/* Homepage narrative. The default is a readable, fully illustrated stack. */
.scroll-hero { position: relative; z-index: 2; background: linear-gradient(90deg, rgba(8,15,27,.95), rgba(8,15,27,.42)); border-bottom: 1px solid var(--edge-soft); }
.sh-sticky { position: relative; background: radial-gradient(ellipse at 85% 40%, rgba(29,74,90,.16), transparent 60%); }
.sh-stage { position: relative; }
.sh-step { display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 2.5rem; padding: 7rem 0 4rem; min-width: 0; }
.sh-copy { min-width: 0; }
.sh-eyebrow { display: block; color: var(--color-accent); font: 500 .69rem/1.6 var(--font-mono); text-transform: uppercase; letter-spacing: .12em; margin-bottom: 1.6rem; }
.sh-copy h1, .sh-copy h2 { color: #f4f7fc; font: 600 clamp(2.6rem,4.7vw,4.2rem)/1.09 var(--font-display); letter-spacing: -.035em; margin: 0 0 1.5rem; text-wrap: balance; }
.sh-copy h1 em, .sh-copy h2 em { font-style: normal; color: var(--color-accent); text-shadow: 0 0 20px rgba(6,253,216,.2); }
.sh-copy p { max-width: 480px; color: #a8b5c8; font-size: 1.05rem; line-height: 1.75; }
.sh-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin-top: 2rem; }
.sh-actions .btn-primary { gap: 1.7rem; font-size: .9rem; padding: .95rem 1.25rem; }
.sh-link { display: inline-flex; align-items: center; gap: .75rem; color: #e0e8f3; font-size: .9rem; font-weight: 500; text-decoration: none; border-bottom: 1px solid #435267; padding-bottom: .25rem; }
.sh-link:hover { color: var(--color-accent); border-color: var(--color-accent); }
.sh-note { margin-top: 1.7rem; display: flex; align-items: center; gap: .6rem; color: #8597af; font-size: .76rem; }
.sh-note > span { width: 5px; height: 5px; background: #71b4a7; border-radius: 50%; }
.sh-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.sh-tags span { padding: .4rem .7rem; border: 1px solid #2a3c50; border-radius: 5px; font-size: .76rem; color: #9faec2; }
.sh-art { min-width: 0; margin: 0; position: relative; perspective: 1100px; }
.sh-art::before { content: ''; position: absolute; width: 75%; height: 70%; top: 10%; left: 15%; border-radius: 50%; background: radial-gradient(ellipse, rgba(53,157,169,.13), transparent 68%); pointer-events: none; }
.sh-art img { display: block; width: 100%; height: auto; object-fit: contain; border-radius: 20px; mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 64%, transparent 85%); filter: drop-shadow(0 28px 24px rgba(0,0,0,.32)); transform: rotateX(var(--art-x, 2deg)) rotateY(var(--art-y, -4deg)) translateZ(16px); transition: transform .4s ease-out; }
.scroll-hero.is-ready .sh-art img { animation: artFloat 7s ease-in-out infinite; }
@keyframes artFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.sh-art figcaption { color: #8395ad; font-size: .8rem; padding: 1.1rem 0 0; margin: 0 1.5rem; border-top: 1px solid #253247; }
.sh-art figcaption span { display: block; font: 500 .6rem/1.5 var(--font-mono); letter-spacing: .13em; color: #b2c2d7; margin-bottom: .35rem; }
.sh-bottom { display: none; }

/* Enhanced: the scene changes in place; there is no artificial scroll distance. */
.scroll-hero.is-ready { height: 100vh; height: 100svh; }
.scroll-hero.is-ready .sh-sticky { height: 100%; overflow: hidden; }
.scroll-hero.is-ready .sh-stage { height: calc(100% - 136px); padding-top: var(--nav-height); }
.scroll-hero.is-ready .sh-step { position: absolute; inset: var(--nav-height) 2rem 0; padding: 1rem 0; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(16px); transition: opacity .38s ease, transform .5s ease; }
.scroll-hero.sh-init .sh-step { transition: none !important; }
.scroll-hero.is-ready .sh-step.is-active { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.scroll-hero.is-ready .sh-art img { max-height: min(51vh, 460px); }
.scroll-hero.is-ready .sh-bottom { display: block; position: absolute; bottom: 2.4rem; left: 0; right: 0; }
.sh-navigation { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem; }
.sh-chapter { position: relative; border: 0; border-top: 1px solid #2a394e; border-radius: 0; background: transparent; color: #7e90a9; padding: .85rem 0; display: flex; gap: .7rem; font: 500 .76rem/1.4 var(--font-body); text-align: left; cursor: pointer; }
.sh-chapter span { font-family: var(--font-mono); font-size: .65rem; opacity: .7; }
.sh-chapter[aria-current="step"] { border-color: #8acdc5; color: #f0f7ff; }
.sh-chapter:hover { color: #f0f7ff; }
.sh-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 36px; padding-left: 68px; padding-right: 68px; }
.sh-status { color: #7e90a9; font: 400 .62rem/1.5 var(--font-mono); }
.sh-controls { display: flex; gap: .5rem; margin-left: auto; }
.sh-controls button { background: #101e2f; border: 1px solid #2c3c51; color: #cad8e9; border-radius: 5px; font: 500 .72rem var(--font-body); min-height: 36px; padding: .5rem .9rem; cursor: pointer; }
.sh-controls button:hover { border-color: #88bdb8; }
.sh-controls button:disabled { opacity: .3; cursor: default; }
.sh-next span { margin-left: .8rem; }
.sh-skip { color: #9caec6; text-decoration: none; font-size: .72rem; padding: .5rem 0 .5rem .8rem; }
.sh-skip:hover { color: white; }
.sh-skip span { margin-left: .5rem; }

/* Replace the empty orbit decoration with a useful delivery narrative. */
.delivery-panel { padding: 2.5rem; border: 1px solid #31475f; border-radius: 16px; background: linear-gradient(135deg, rgba(20,41,61,.88), rgba(8,19,34,.88)); align-self: center; text-align: left; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 28px 65px -30px #000; }
.delivery-panel > .section-label { justify-content: flex-start; }
.delivery-panel h3 { font: 600 clamp(1.6rem,2.5vw,2.15rem)/1.25 var(--font-display); letter-spacing: -.04em; margin: 1rem 0 2rem; }
.delivery-steps { list-style: none; margin: 0 0 2rem; padding: 0; }
.delivery-steps li { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); align-items: start; gap: .8rem; padding: 1.25rem 0; border-top: 1px solid #2a4056; text-align: left; }
.delivery-steps li > span { color: var(--color-accent); font: .7rem var(--font-mono); padding-top: .25rem; text-shadow: 0 0 10px rgba(6,253,216,.25); }
.delivery-steps h4 { font-size: .93rem; font-weight: 600; line-height: 1.35; margin: 0 0 .3rem; text-align: left; }
.delivery-steps p { color: #a9b9cd; font-size: .86rem; line-height: 1.65; margin: 0; text-align: left; }
#stats { scroll-margin-top: var(--nav-height); }

@media (min-width: 1450px) { .sh-copy h1, .sh-copy h2 { font-size: 4.5rem; } }
@media (max-width: 1024px) {
    .scroll-hero.is-ready .sh-step { left: 1rem; right: 1rem; gap: 1rem; }
    .sh-copy h1, .sh-copy h2 { font-size: clamp(2.4rem,5vw,3.6rem); }
    .sh-copy p { font-size: .96rem; }
    .sh-actions { gap: 1rem; }
    .sh-art figcaption { margin: 0 .5rem; }
    .delivery-panel { padding: 1.6rem; }
}
@media (max-width: 767px) {
    .sh-step { grid-template-columns: 1fr; gap: 1rem; padding: 6rem 0 2.5rem; }
    .sh-copy h1, .sh-copy h2 { font-size: clamp(1.85rem,7.7vw,2.9rem); line-height: 1.12; letter-spacing: -.045em; margin-bottom: .85rem; }
    .sh-eyebrow { font-size: .56rem; letter-spacing: .1em; margin-bottom: .85rem; }
    .sh-copy p { font-size: .86rem; line-height: 1.6; max-width: 490px; }
    .sh-actions { margin-top: 1.1rem; gap: 1.1rem; }
    .sh-actions .btn-primary { padding: .72rem .9rem; font-size: .78rem; gap: .9rem; min-height: 42px; }
    .sh-link { font-size: .78rem; }
    .sh-note { font-size: .65rem; margin-top: .9rem; }
    .sh-tags { margin-top: .8rem; }
    .sh-tags span { font-size: .65rem; padding: .25rem .5rem; }
    .scroll-hero.is-ready .sh-stage { height: calc(100% - 188px); padding-top: var(--nav-height); }
    .scroll-hero.is-ready .sh-bottom { bottom: 84px; }
    .scroll-hero.is-ready .sh-step { inset: var(--nav-height) 1.25rem 0; grid-template-rows: auto minmax(100px,1fr); align-content: center; gap: .25rem; padding: .75rem 0 .25rem; }
    .scroll-hero.is-ready .sh-art { align-self: center; height: 100%; min-height: 0; display: flex; align-items: center; justify-content: center; }
    .scroll-hero.is-ready .sh-art img { height: 100%; max-height: 250px; width: 100%; }
    .scroll-hero.is-ready .sh-art figcaption { display: none; }
    .sh-navigation { gap: .6rem; }
    .sh-chapter { display: block; font-size: .61rem; padding: .65rem 0; min-height: 44px; white-space: nowrap; }
    .sh-chapter span { display: none; }
    .sh-status { font-size: .52rem; max-width: 125px; }
    .sh-toolbar { gap: .3rem; padding-left: 0; padding-right: 0; }
    .sh-controls { gap: .25rem; }
    .sh-controls button { min-height: 40px; padding: .5rem .65rem; font-size: .65rem; }
    .sh-next span { margin-left: .3rem; }
    .sh-skip { font-size: .64rem; padding-left: .5rem; }
    .sh-skip span { margin-left: .15rem; }
    .delivery-panel { margin-top: 1.5rem; }
}
@media (max-width: 370px) { .sh-status { max-width: 80px; } .sh-copy h1, .sh-copy h2 { font-size: 1.9rem; } .sh-actions { gap: .8rem; } }
@media (max-height: 720px) and (min-width: 768px) {
    .sh-copy h1, .sh-copy h2 { font-size: 3.1rem; }
    .sh-eyebrow { margin-bottom: 1rem; }
    .sh-note { margin-top: 1rem; }
    .sh-copy p { font-size: .95rem; }
    .sh-actions { margin-top: 1.25rem; }
    .sh-art figcaption { display: none; }
}
@media (max-width: 767px) and (max-height: 720px) {
    .sh-note { display: none; }
    .sh-copy h1, .sh-copy h2 { font-size: 1.9rem; }
    .sh-copy p { font-size: .8rem; }
    .sh-step .sh-art img { max-height: 180px; }
}
@media (prefers-reduced-motion: reduce) { .sh-step { transition: none !important; } .sh-art img { transform: none; transition: none; animation: none !important; translate: none; } }