:root{color-scheme:dark;--red:#943b3d;--paper:#f4f5f2;--ink:#101414;--muted:#b5bfbb;--gutter:clamp(22px,4vw,76px)}
*{box-sizing:border-box}
html{scroll-behavior:auto}
body{margin:0;background:var(--ink);color:var(--paper);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit}
button:focus-visible,a:focus-visible{outline:3px solid white;outline-offset:5px}
.scene{height:440svh;position:relative}
.hero{position:sticky;top:0;height:100svh;min-height:420px;overflow:hidden;background:#141b1c;isolation:isolate}
.picture{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 48%}
#motion{opacity:0}
.hero[data-ready="true"] #motion{opacity:1}
.shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,12,12,.25),transparent 34%,rgba(5,12,12,.12) 60%,rgba(5,12,12,.78));pointer-events:none}
.masthead{position:absolute;top:0;inset-inline:0;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:28px var(--gutter);z-index:2}
.brand{color:white;text-decoration:none;font-weight:700;font-size:16px;letter-spacing:.1em;white-space:nowrap}
.brand span{color:#b95759}
.study-label,.eyebrow{font-size:10px;letter-spacing:.2em;line-height:1.6;font-weight:700}
.study-label{color:#e4e9e6;white-space:nowrap}
.study-label span{margin:0 8px;color:#a1aaa5}
.hero-copy{position:absolute;inset-inline-start:var(--gutter);bottom:clamp(92px,13vh,155px);max-width:700px;z-index:2}
.hero-copy .eyebrow{margin:0 0 18px}
h1{font-size:clamp(32px,4.4vw,70px);line-height:1.02;letter-spacing:-.035em;margin:0;font-weight:750}
h1 span{color:#b95759}
.support{font-size:clamp(16px,1.6vw,22px);margin:16px 0 0;line-height:1.4}
.hero-foot{position:absolute;bottom:28px;inset-inline:var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:20px;z-index:2}
.hero-foot p,.stage{font-size:11px;letter-spacing:.04em;margin:0}
.stage{border:1px solid #ffffff50;border-radius:99px;padding:10px 16px}
.skip{position:absolute;top:90px;right:var(--gutter);background:#0a111142;border:1px solid #ffffff60;color:white;padding:11px 16px;border-radius:99px;cursor:pointer;z-index:3;font-size:12px;text-decoration:none}
.opening{position:absolute;inset:0;background:#000;display:grid;place-items:center;z-index:4;opacity:1;transition:opacity .25s ease}
.opening[hidden]{display:none}
.opening-inner{text-align:center;width:min(280px,75vw)}
.opening-brand{font-size:16px;font-weight:700;letter-spacing:.13em;margin:0 0 28px}
.opening-brand span{color:#b95759}
#load-label{font-size:11px;color:#b5bfbb;letter-spacing:.035em;line-height:1.5}
progress{appearance:none;width:100%;height:2px;border:none;background:#292b2a;margin-top:12px}
progress::-webkit-progress-bar{background:#292b2a}
progress::-webkit-progress-value{background:#a34749}
progress::-moz-progress-bar{background:#a34749}
.notes{padding:85px var(--gutter) 100px;display:grid;grid-template-columns:minmax(0,1fr) minmax(270px,.7fr);gap:clamp(40px,8vw,140px);max-width:1440px;margin:auto}
.notes .eyebrow{color:#a7b7af;margin:0 0 25px}
h2{font-size:clamp(32px,4vw,56px);font-weight:500;letter-spacing:-.04em;line-height:1.08;margin:0 0 30px}
.notes p:not(.eyebrow){color:#bec7c2;line-height:1.7;font-size:14px;max-width:56ch}
.test-card{border:1px solid #ffffff24;border-radius:18px;padding:28px;background:#ffffff03;align-self:start}
h3{margin:0 0 20px;font-size:16px;font-weight:600}
dl{margin:0}
dl div{padding:12px 0;display:flex;justify-content:space-between;gap:22px;border-top:1px solid #ffffff15;font-size:12px;line-height:1.4}
dt{color:#a7b7af}dd{margin:0;text-align:right}
.notes .test-note{font-size:11px!important;line-height:1.6!important}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.actions button{border:1px solid #ffffff40;color:white;background:transparent;border-radius:99px;padding:11px 15px;font-size:12px;cursor:pointer}
.failure{color:#ffb9b9!important}
@media(min-aspect-ratio:19/10){.picture{object-fit:contain}}
@media(max-aspect-ratio:3/2){.picture{object-fit:contain}}
@media(max-width:700px){
 .scene{height:400svh}.hero{min-height:440px}
 .picture{object-fit:contain;object-position:center 40%}
 .shade{background:linear-gradient(180deg,#1014143d,transparent 35%,#10141400 53%,#101414 78%)}
 .masthead{padding-top:23px;gap:12px}.brand{font-size:12px}.study-label{font-size:8px;letter-spacing:.1em}
 .study-label span{margin-inline:3px}.skip{top:68px;font-size:10px;padding:9px 12px}
 .hero-copy{bottom:112px;max-width:calc(100% - var(--gutter)*2)}
 .hero-copy .eyebrow{font-size:8px;letter-spacing:.13em;margin-bottom:13px}
 h1{font-size:clamp(31px,8.4vw,44px)}.support{font-size:16px;margin-top:12px}
 .hero-foot{bottom:26px}.hero-foot p{max-width:22ch;font-size:10px;line-height:1.6}.stage{font-size:10px;padding:9px 13px}
 .notes{grid-template-columns:1fr;padding-top:58px;gap:34px}.test-card{padding:23px}
}
@media(prefers-reduced-motion:reduce){.scene{height:100svh}.opening{display:none}.skip,#scroll-hint{display:none}}

/* Full-scene phone/tablet composition. The approved motion file is unchanged. */
@media(max-width:1180px),(any-pointer:coarse) and (max-width:1400px){
 .hero{height:100dvh;--motion-height:56.458333vw;--scene-top:calc((100% - var(--motion-height)) * .4);--scene-bottom:calc((100% - var(--motion-height)) * .6);--scene-seam:16px}
 .hero::before,.hero::after{content:"";position:absolute;inset-inline:0;pointer-events:none;background-repeat:no-repeat;background-size:100% 100%;z-index:0}
 .hero::before{top:0;height:calc(var(--scene-top) + var(--scene-seam));background-image:linear-gradient(180deg,rgba(153,187,214,0) 65%,#99bbd6),url('/assets/scene-sky.webp')}
 .hero::after{bottom:0;height:calc(var(--scene-bottom) + var(--scene-seam));background-image:linear-gradient(180deg,#58575d,rgba(88,87,93,0) 90px),url('/assets/scene-foreground.webp')}
 .picture{object-fit:contain;object-position:center 40%;z-index:1;-webkit-mask-image:linear-gradient(to bottom,transparent var(--scene-top),#000 calc(var(--scene-top) + var(--scene-seam)),#000 calc(var(--scene-top) + var(--motion-height) - var(--scene-seam)),transparent calc(var(--scene-top) + var(--motion-height)));mask-image:linear-gradient(to bottom,transparent var(--scene-top),#000 calc(var(--scene-top) + var(--scene-seam)),#000 calc(var(--scene-top) + var(--motion-height) - var(--scene-seam)),transparent calc(var(--scene-top) + var(--motion-height)))}
 .shade{z-index:2;background:linear-gradient(180deg,rgba(5,12,12,.22),transparent 28%,transparent 55%,rgba(5,12,12,.2) 72%,rgba(5,12,12,.58))}
 .masthead,.hero-copy,.hero-foot{z-index:3}
 .skip{z-index:4}
 .opening{z-index:5}
 .hero-foot{bottom:max(26px,env(safe-area-inset-bottom))}
}
@supports(width:1cqw){
 @media(max-width:1180px),(any-pointer:coarse) and (max-width:1400px){
  .hero{container-type:size;--motion-height:56.458333cqw}
 }
}
@media(max-width:1180px) and (min-aspect-ratio:16/9),(any-pointer:coarse) and (max-width:1400px) and (min-aspect-ratio:16/9){
 .hero{min-height:0}
 .hero::before,.hero::after{display:none}
 .picture{object-fit:cover;object-position:center 48%;-webkit-mask-image:none;mask-image:none}
}
@media(max-width:700px) and (max-height:500px){
 .masthead{padding-top:14px}.skip{top:52px;padding:7px 12px}
 .hero-copy{bottom:57px}.hero-copy .eyebrow{margin-bottom:8px}h1{font-size:28px}.support{margin-top:8px;font-size:14px}
 .hero-foot{bottom:14px}.hero-foot p{font-size:9px}.stage{font-size:9px;padding:7px 11px}
}