/* Two directed states: a full cinematic opening, then a stable 42/58 split. */
.hero { min-height:760px; height:100svh; max-height:1040px; background:#050a11; overflow:hidden; isolation:isolate; }
.hero>video { position:absolute; z-index:0; display:block; background:#050a11; object-position:50% 50%; transition:width 900ms cubic-bezier(.22,.61,.36,1),left 900ms cubic-bezier(.22,.61,.36,1),top 900ms cubic-bezier(.22,.61,.36,1),transform 900ms cubic-bezier(.22,.61,.36,1); }
.hero[data-layout="opening"]>video { left:0; top:0; width:100%; height:100%; object-fit:contain; transform:none; }
.hero[data-layout="split"]>video { left:38%; top:calc(50% + 4px); width:62%; height:auto; aspect-ratio:16/9; object-fit:contain; transform:translateY(-50%); }
.hero[data-layout="logo"]>video { left:50%; top:51%; width:min(92%,1200px); height:auto; aspect-ratio:16/9; object-fit:contain; transform:translate(-50%,-50%); }
.hero-shade { z-index:1; opacity:1; pointer-events:none; transition:background 900ms ease; }
.hero[data-layout="opening"] .hero-shade,.hero[data-layout="logo"] .hero-shade { background:linear-gradient(180deg,#050a1198 0,transparent 18%,transparent 78%,#050a118c 100%); }
.hero[data-layout="split"] .hero-shade { background:linear-gradient(90deg,#050a11 0,#050a11 36%,#050a11c7 40%,transparent 51%),linear-gradient(180deg,#050a1190 0,transparent 15%,transparent 85%,#050a11 100%); }
.hero-scenes { position:absolute; z-index:2; inset:106px 0 0; }
.hero-scene { position:absolute; left:clamp(58px,7vw,118px); top:46%; width:min(34vw,560px); max-width:560px; transform:translateY(-50%); pointer-events:none; }
.hero-scene [data-at] { opacity:0; visibility:hidden; will-change:opacity,transform; }
.hero-scene [data-at]:not([aria-hidden="true"]) { pointer-events:auto; }
.hero-scene .eyebrow { color:#e3e7ed; font-size:13px; line-height:1.5; margin:0 0 22px; text-shadow:0 1px 18px #000; }
.hero-scene h1 { font-size:clamp(2.8rem,4vw,4.8rem); font-weight:600; line-height:1.1; letter-spacing:-.055em; }
.hero-scene h1 span { display:block; white-space:nowrap; }
.hero-scene h1 .companion { color:#dfcbac; }
.hero-support { margin-top:26px; }
.hero-support p,.hero-scene>.scene-support { font-size:clamp(1.02rem,1.08vw,1.12rem); line-height:1.65; color:#e0e4ea; text-wrap:pretty; text-shadow:0 1px 18px #000; }
.hero-scene .button { font-size:13px; margin-top:30px; gap:22px; }
.hero-scene h2 { max-width:590px; font-size:clamp(2rem,3.05vw,3.55rem); font-weight:500; letter-spacing:-.04em; line-height:1.12; text-wrap:balance; }
.hero-scene>.scene-support { margin-top:24px; }
.hero-scene--funnels { width:min(37vw,610px); }
.hero-scene--funnels h2 { font-size:clamp(1.85rem,2.8vw,3.25rem); }
.hero-scene--funnels h2+h2 { margin-top:44px; color:#dfcbac; }
.hero-scene--cta { width:min(39vw,640px); }
.hero-scene--cta h2 { font-size:clamp(1.85rem,2.65vw,3.15rem); line-height:1.18; }
.hero-scene--cta h2 span { display:inline; }
.hero-scene--cta .completion { color:#dfcbac; }
.hero-scene--logo { left:50%; top:70%; width:min(820px,82vw); max-width:820px; text-align:center; transform:translate(-50%,-50%); padding:0 20px; }
.hero-scene--logo p { display:inline-block; padding:13px 24px; border-top:1px solid #88b9d35c; border-bottom:1px solid #88b9d33d; background:linear-gradient(90deg,transparent,#05111db3 18%,#05111db3 82%,transparent); font-size:clamp(1.02rem,1.2vw,1.2rem); font-weight:500; letter-spacing:.025em; line-height:1.6; color:#f3f7fb; text-shadow:0 2px 20px #000; text-wrap:balance; }
.hero-signoff { position:absolute; z-index:2; bottom:30px; left:clamp(58px,7vw,118px); width:auto; font-size:12px; letter-spacing:.14em; color:#d2d8e1; text-shadow:0 1px 18px #000; }
.motion-button { bottom:27px; right:5%; z-index:3; }
.header .nav-cta { white-space:nowrap; }
@media (max-width:1100px) and (min-width:701px) {
  .hero[data-layout="split"]>video { left:39%; width:61%; }
  .hero-scene { left:6.5%; width:35%; }
  .hero-scene h1 { font-size:clamp(2.5rem,4.3vw,3.5rem); }
  .hero-scene h2 { font-size:clamp(1.7rem,3.1vw,2.6rem); }
  .hero-scene--funnels h2+h2 { margin-top:32px; }
  .hero-signoff { left:6.5%; }
}
@media (max-width:700px) {
  .header { height:114px; flex-direction:column; align-items:flex-start; justify-content:center; gap:17px; }
  .header .brand { font-size:25px; }
  .header .brand span { font-size:7px; margin-top:6px; }
  .header nav { width:100%; justify-content:space-between; gap:8px; }
  .header nav>a:not(.nav-cta) { display:block; font-size:10px; }
  .header .nav-cta { font-size:10px; padding:6px 8px; }
  .header .nav-cta span { margin-left:5px; }
  .hero { min-height:780px; max-height:1000px; }
  .hero[data-layout="opening"]>video { inset:114px 0 auto; width:100%; height:calc(100% - 114px); object-fit:contain; }
  .hero[data-layout="logo"]>video { left:50%; top:42%; width:100%; height:auto; aspect-ratio:16/9; transform:translate(-50%,-50%); }
  .hero[data-layout="split"]>video { left:0; top:115px; width:100%; height:auto; aspect-ratio:16/9; transform:none; }
  .hero[data-layout="split"] .hero-shade { background:linear-gradient(180deg,#050a11 0,transparent 18%,transparent 42%,#050a11 55%,#050a11 100%); }
  .hero-scenes { inset:114px 0 0; }
  .hero-scene { top:calc(22px + 56.25vw); bottom:auto; left:6%; width:88%; max-width:none; transform:none; }
  .hero-scene .eyebrow { font-size:10px; margin-bottom:16px; }
  .hero-scene h1 { font-size:clamp(2rem,9vw,3rem); }
  .hero-support { margin-top:18px; }
  .hero-support p,.hero-scene>.scene-support { font-size:14px; line-height:1.65; }
  .hero-scene .button { margin-top:21px; font-size:11px; padding:14px 16px; }
  .hero-scene h2,.hero-scene--funnels h2,.hero-scene--cta h2 { font-size:clamp(1.55rem,7.4vw,2.35rem); }
  .hero-scene--funnels h2+h2 { margin-top:27px; }
  .hero-scene--logo { left:50%; top:67%; bottom:auto; width:92%; transform:translate(-50%,-50%); }
  .hero-scene--logo p { font-size:14px; max-width:340px; margin:auto; padding:11px 15px; }
  .hero-signoff { left:6%; bottom:25px; width:72%; font-size:8px; line-height:1.55; }
}
@media (prefers-reduced-motion:reduce) { .hero>video { transition:none; } .hero-scene [data-at] { will-change:auto; } }
