:root{--navy:#1D3045;--blue:#006cd2;--ink:var(--navy);--w:#fff}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}body{font-family:Inter,"Helvetica Neue",Helvetica,Arial,sans-serif;overflow-x:hidden;background:#dfe4e9;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}button{font:inherit;border:0;background:none;cursor:pointer}
.track{position:relative;height:500vh}
.scene{position:sticky;top:0;height:100vh;width:100%;overflow:hidden}
canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.ov{position:absolute;inset:0;pointer-events:none}
/* nav */
.nav{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:48px 48px 24px;color:var(--ink);transition:color .5s;pointer-events:auto}
.nav.light{color:#fff}
.links{display:flex;gap:40px}
.links a{font-size:12px;letter-spacing:.15em;text-transform:uppercase;font-weight:500;position:relative;opacity:0;transform:translateY(-12px);animation:nin .6s cubic-bezier(.16,1,.3,1) forwards}
.links a.on::after{content:"";position:absolute;left:0;right:0;bottom:-12px;height:2px;background:currentColor}
.right{display:flex;gap:32px;align-items:center;font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;opacity:0;animation:nin .6s .5s cubic-bezier(.16,1,.3,1) forwards}
.dot{width:20px;height:20px;border-radius:50%;background:currentColor;display:inline-grid;place-items:center;margin-left:8px;vertical-align:middle}
.dot i{display:block;width:6px;height:6px;border-radius:50%;background:#dfe4e9;transition:background .5s}
@keyframes nin{to{opacity:1;transform:none}}
/* layers */
.layer{position:absolute;inset:0;transition:opacity .1s ease-out}
.st{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);transition-delay:var(--d,0ms)}
.layer.vis .st{opacity:1;transform:none}
.l1{display:flex;align-items:center;padding:0 128px}
.l1 h1{font-size:clamp(2rem,5vw,5rem);line-height:1.2;color:var(--ink)}
.l1 p{margin-top:24px;font-size:14px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink);opacity:.9}
.circ{position:absolute;bottom:48px;right:48px;width:48px;height:48px;border-radius:50%;border:1px solid var(--ink);display:grid;place-items:center;color:var(--ink);pointer-events:auto}
.circ svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.l2{display:flex;align-items:center;justify-content:center;padding:0 32px;text-align:center}
.l2 h2{max-width:900px;font-size:clamp(1.5rem,4.5vw,4.5rem);line-height:1.3;letter-spacing:.02em;color:var(--ink)}
.l2 .m1{opacity:.8}.l2 .m2{opacity:.5}
.l3{display:flex;align-items:center;justify-content:flex-end;padding:0 128px;color:#fff}
.l3 .in{max-width:42rem}
.l3 .eb{font-size:18px;letter-spacing:.02em;opacity:.6;margin-bottom:16px}
.l3 h2{font-size:clamp(2rem,4vw,4rem);line-height:1.2;letter-spacing:.02em;margin-bottom:32px}
.l3 .cta{display:flex;align-items:center;gap:16px;pointer-events:auto}
.l3 .cta span{font-size:14px;letter-spacing:.3em;text-transform:uppercase;opacity:.8}
.l3 .cta b{width:40px;height:40px;border-radius:50%;background:#fff;display:grid;place-items:center;color:#1f2937;transition:transform .3s}
.l3 .cta:hover b{transform:scale(1.1)}
.l3 .cta svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
/* type modes */
body.caps h1,body.caps h2{text-transform:uppercase;font-weight:300}
body.med h1,body.med h2{text-transform:none;font-weight:500;letter-spacing:-.025em}
body.med .l1 h1{line-height:1.08}
body.blue{--ink:var(--blue)}
/* after */
/* switch */
@media(max-width:1023px){.links,.right{display:none}.l1,.l3{padding:0 32px}.nav{padding:32px 24px 16px}}
@media(prefers-reduced-motion:reduce){.st,.layer{transition:none}}

:root{--white:#fff;--ink:#0a0a0a;--muted:#1a1a1a;--blue-dark:#0053a3;--blue-deep:#004a96;--blue-pale:#7eb6ee;--blue-wash:#e8f2fb;--blue-wash-deep:#d9e9f9;--sub:rgba(0,0,0,.45);--border:rgba(0,0,0,.1);--pad-x:clamp(20px,3.52vw,64px);--ease:cubic-bezier(.16,1,.3,1)}
html{scrollbar-gutter:stable}
@media(min-width:1024px){html{font-size:1.111111vw}}
.section-ink{--ink:#0a0a0a}

.btn{position:relative;display:inline-flex;align-items:center;gap:18px;height:58px;padding:12px 10px 12px 22px;font-size:16px;font-weight:500;letter-spacing:-.015em;white-space:nowrap;overflow:hidden;isolation:isolate}
.btn::before{content:"";position:absolute;inset:0;transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease);z-index:-1}
.btn:hover::before{transform:scaleX(1)}
.btn__ico{width:36px;height:36px;display:grid;place-items:center;transition:background .3s var(--ease),color .3s var(--ease)}
.btn__ico svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;fill:none}
.btn--nav{background:var(--blue);color:#fff;justify-self:end}.btn--nav::before{background:var(--blue-deep)}
.btn--nav .btn__ico{background:var(--blue-dark);color:#fff}.btn--nav:hover .btn__ico{background:#fff;color:var(--blue)}
.btn--light{background:#fff;color:var(--blue)}.btn--light::before{background:var(--blue-wash)}
.btn--light .btn__ico{background:var(--blue);color:#fff}.btn--light:hover .btn__ico{background:var(--blue-dark)}
.btn--solid{background:var(--blue);color:#fff}.btn--solid::before{background:var(--blue-deep)}
.btn--solid .btn__ico{background:var(--blue-dark);color:#fff}.btn--solid:hover .btn__ico{background:#fff;color:var(--blue)}
.btn--ghost{padding:12px 26px;background:rgba(255,255,255,.55);backdrop-filter:blur(24px);color:var(--ink)}.btn--ghost::before{background:rgba(255,255,255,.78)}
.btn--ghostblue{padding:12px 26px;background:transparent;color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue)}.btn--ghostblue::before{background:var(--blue-wash)}
.btn--white{background:#fff;color:var(--blue)}.btn--white::before{background:var(--blue-wash)}.btn--white .btn__ico{background:var(--blue);color:#fff}


/* ---------- shared section type ---------- */
.reveal .w{display:inline-block;opacity:0;filter:blur(12px);transform:translateY(16px);transition:opacity .7s var(--ease),filter .7s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--i)*26ms)}
.reveal.in .w{opacity:1;filter:blur(0);transform:none}
.reveal h2 .w{transform:translateY(40px);filter:blur(20px);transition-delay:calc(var(--i)*55ms)}
h2{font-size:clamp(1.9rem,3.2vw,3rem);font-weight:300;text-transform:uppercase;letter-spacing:.02em;line-height:1.2;color:var(--navy)}
.sub{font-size:1.125rem;font-weight:300;line-height:1.45;color:var(--muted)}

/* ---------- band ---------- */
.band{height:100lvh;min-height:560px;display:grid;place-items:center;text-align:center;padding:0 var(--pad-x)}
.band__in{max-width:44rem;display:flex;flex-direction:column;align-items:center;gap:2.25rem}
.band h2{max-width:36rem}.band .sub{max-width:27rem}

/* ---------- runway ---------- */
.runway{height:400lvh;position:relative}
.panel{position:sticky;top:0;height:100lvh;background:var(--blue-wash);border-radius:48px 48px 0 0;overflow:hidden}
.panel__head{position:absolute;top:14%;left:var(--pad-x);right:var(--pad-x);display:grid;grid-template-columns:1.6fr 1fr;gap:3rem;align-items:start}
.panel__head .sub{max-width:22rem}
.rail{position:absolute;top:40%;bottom:2.5rem;left:var(--pad-x);display:flex;gap:.625rem;will-change:transform}
.card{flex:none;width:27rem;padding:2rem;border-radius:24px;display:flex;flex-direction:column;justify-content:space-between}
.card--list{width:33rem;background:#fff;box-shadow:inset 0 0 0 1px var(--blue)}
.card--blue{background:var(--blue);color:#fff}
.card--pale{background:var(--blue-pale);color:var(--ink)}
.card--deep{background:var(--blue-dark);color:#fff}
.card__n{font-size:1.1rem;font-weight:500;opacity:.7}
.card__t{font-size:1.75rem;font-weight:300;text-transform:uppercase;letter-spacing:.03em;line-height:1.15}
.card__p{margin-top:1rem;font-size:1.05rem;font-weight:300;line-height:1.4;max-width:22rem;opacity:.92}
.card__list{list-style:none;margin-top:1.5rem}
.card__list li{display:flex;justify-content:space-between;padding:1rem 0;border-top:1px solid var(--border);font-size:1.15rem;font-weight:300}
.card__list li:last-child{border-bottom:1px solid var(--border)}
.card__list b{font-weight:500;color:var(--blue)}
.card__foot{display:flex;align-items:end;justify-content:space-between;gap:1rem}

/* ---------- overlay ---------- */
.about{position:relative;z-index:10;margin-top:-100lvh;background:var(--blue-wash-deep);border-radius:48px 48px 0 0;padding:clamp(3rem,6vw,5rem) var(--pad-x) clamp(4rem,7vw,6rem)}
.about__grid{display:grid;grid-template-columns:28rem 1fr;gap:4rem;align-items:start;margin-top:3rem}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem 1.5rem}
.stat{border-left:2px solid var(--blue);padding-left:1.25rem}
.stat b{display:block;font-size:3.5rem;font-weight:500;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.stat span{display:block;margin-top:.75rem;font-size:.95rem;font-weight:300;color:var(--sub)}
.story{font-size:clamp(1.5rem,2.3vw,2.25rem);font-weight:300;line-height:1.25;letter-spacing:-.02em}
.story .m{color:rgba(0,0,0,.38)}
.about .actions{margin-top:2.5rem}

/* ---------- pilot rail ---------- */
.team{position:relative;z-index:10;background:var(--blue-wash-deep);padding:0 0 clamp(3rem,5vw,4rem)}
.team__head{padding:0 var(--pad-x) 2rem}
.drag{display:flex;gap:.75rem;padding:0 var(--pad-x);overflow-x:auto;scrollbar-width:none;cursor:grab;user-select:none;touch-action:pan-y}
.drag::-webkit-scrollbar{display:none}.drag.grabbing{cursor:grabbing}
.wk{flex:none;width:20rem;height:24rem;padding:1.75rem;border-radius:24px;background:#fff;display:flex;flex-direction:column;justify-content:space-between}
.wk--intro{width:27rem;background:var(--blue);color:#fff}
.wk--tail{background:var(--blue-pale)}
.wk__k{font-size:1rem;font-weight:500;color:var(--blue)}.wk--intro .wk__k{color:rgba(255,255,255,.7)}
.wk__t{font-size:1.35rem;font-weight:400;letter-spacing:-.01em;line-height:1.2}
.wk--intro .wk__t{font-size:2rem}
.wk__p{font-size:1.05rem;font-weight:300;line-height:1.4;color:var(--sub)}.wk--intro .wk__p,.wk--tail .wk__p{color:inherit;opacity:.85}
.weeks{list-style:none;margin-top:2.5rem;border-top:1px solid var(--border)}
.weeks li{display:grid;grid-template-columns:5rem 1fr;gap:1rem;padding:.9rem 0;border-bottom:1px solid var(--border);font-size:.95rem;font-weight:300;line-height:1.35}
.weeks b{font-weight:500;color:var(--blue)}
.face{flex:none;position:relative;width:20.75rem;height:26rem;border-radius:24px;overflow:hidden;background:var(--blue-pale)}
.face__ph{position:absolute;inset:0;background:linear-gradient(160deg,#9cc4ef 0%,#7eb6ee 55%,#5f9fe0 100%)}
.face__ph::after{content:"";position:absolute;left:50%;top:38%;width:9rem;height:9rem;border-radius:50%;transform:translate(-50%,-50%);background:rgba(255,255,255,.35)}
.face__ph::before{content:"";position:absolute;left:50%;top:78%;width:16rem;height:14rem;border-radius:8rem 8rem 0 0;transform:translate(-50%,-30%);background:rgba(255,255,255,.28)}
.face__plate{position:absolute;left:1.5rem;right:1.5rem;bottom:5.5rem;height:4rem;border-radius:8px;background:rgba(255,255,255,.8);backdrop-filter:blur(10px);display:flex;flex-direction:column;justify-content:center;gap:.6rem;padding:0 1.25rem}
.face__plate b{font-size:1rem;font-weight:500}.face__plate span{font-size:.85rem;color:var(--sub)}
.face__p{position:absolute;left:1.5rem;right:1.5rem;bottom:1.5rem;font-size:.9rem;font-weight:300;line-height:1.35;color:var(--navy)}
.bar{margin:1.5rem var(--pad-x) 0;height:2px;background:var(--border)}
.bar i{display:block;height:100%;background:var(--blue);transform-origin:left;transform:scaleX(.35)}

/* ---------- pilot form ---------- */
.contact{position:relative;z-index:20;min-height:100lvh;background:var(--blue-wash);border-radius:48px 48px 0 0;overflow:hidden;display:grid;grid-template-columns:1fr 35rem;gap:3rem;padding:clamp(3rem,6vw,5rem) var(--pad-x)}
.contact__scene{position:absolute;inset:0;z-index:0;opacity:.75}
.contact__scene canvas{display:block;width:100%;height:100%}
.contact__copy{position:relative;z-index:1;align-self:center;max-width:36rem}
.form{position:relative;z-index:1;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);border-radius:24px;padding:2rem;display:flex;flex-direction:column;gap:1.25rem;min-height:36rem}
.form__t{font-size:1.6rem;font-weight:300;text-transform:uppercase;letter-spacing:.03em}
.field{display:flex;flex-direction:column;gap:.6rem}
.field label{font-size:.9rem;font-weight:500;color:var(--blue)}
.field input{font:inherit;font-weight:300;padding:1.2rem 1.5rem;border:1px solid var(--border);background:transparent;outline:0}
.field input:focus{border-color:var(--blue)}
.consent{font-size:.85rem;font-weight:300;color:var(--sub);line-height:1.4}
.consent a{text-decoration:underline}
.form .btn{margin-top:auto;justify-content:space-between}

/* ---------- footer ---------- */
.foot{position:relative;z-index:20;background:var(--blue-wash);padding:2rem var(--pad-x) 2.5rem;display:flex;justify-content:space-between;gap:1rem;font-size:.9rem;font-weight:300;color:var(--sub)}
.foot b{font-weight:500;color:var(--ink)}
.foot svg{width:12px;height:12px;vertical-align:-1px;margin-right:6px}

.burger{display:none}
@media(max-width:1023px){
        .panel__head{grid-template-columns:1fr;gap:1.25rem;top:10%}.rail{top:48%}.card{width:78vw;max-width:22rem;padding:1.5rem}.card--list{width:82vw}.card__t{font-size:1.5rem}
  .about__grid{grid-template-columns:1fr;gap:2.5rem}.stat b{font-size:2.6rem}
  .contact{grid-template-columns:1fr}.contact__scene{display:none}.form{min-height:0}
  .panel,.about,.contact{border-radius:28px 28px 0 0}
}
@media(prefers-reduced-motion:reduce){
    .reveal .w{opacity:1;filter:none;transform:none;transition:none}
  
}

.about,.team,.contact,.foot{--ink:#0a0a0a}

/* ---------- shared header for subpages + login ---------- */
.hdr{position:fixed;top:1rem;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:0 var(--pad-x);pointer-events:none}
.hdr>*{pointer-events:auto}
.hdr__logo{display:flex;align-items:center;gap:.5rem;height:3.375rem;padding:0 1rem 0 .5rem;background:rgba(255,255,255,.8);backdrop-filter:blur(10px);border-radius:8px}
.hdr__logo{color:var(--navy);padding:0 1rem}
.hdr__logo .lockup{height:1.9rem;width:auto;display:block}
.hdr__logo b{font-size:1.25rem;font-weight:400;letter-spacing:-.01em;color:var(--navy)}
.hdr__nav{display:flex;align-items:center;gap:2.5rem;height:3.375rem;padding:0 2.25rem;background:rgba(255,255,255,.8);backdrop-filter:blur(10px);border-radius:8px}
.hdr__nav a{font-size:1rem;font-weight:300;color:var(--navy);transition:color .15s}
.hdr__nav a:hover,.hdr__nav a.on{color:var(--blue)}
.hdr__right{display:flex;align-items:center;gap:.75rem}
.hdr__login{font-size:.95rem;font-weight:300;color:var(--navy);padding:0 1rem;height:3.375rem;display:flex;align-items:center;background:rgba(255,255,255,.8);backdrop-filter:blur(10px);border-radius:8px}
.hdr .btn{height:3.375rem;border-radius:46px;padding:0 .125rem 0 2rem;gap:.625rem}
.hdr .btn .btn__ico{width:3rem;height:3rem;border-radius:50%}
.scene .hdr{position:absolute;top:2rem}
.scene .hdr__logo,.scene .hdr__nav,.scene .hdr__login{background:rgba(255,255,255,.55)}
/* subpage hero (layout A) */
.ph{background:var(--blue-wash);border-radius:0 0 48px 48px;padding:11rem var(--pad-x) 5rem;display:grid;grid-template-columns:1.4fr 1fr;gap:3rem;align-items:end}
.ph h1{font-size:clamp(2.2rem,4.2vw,3.9rem);font-weight:300;text-transform:uppercase;letter-spacing:.02em;line-height:1.15;color:var(--navy)}
.ph .sub{max-width:28rem}
.ph .crumb{grid-column:1/-1;font-size:.85rem;font-weight:300;color:var(--sub);margin-bottom:-1.5rem}
.ph .crumb a{color:var(--blue)}
/* flow */
.flow{padding:5rem var(--pad-x);display:grid;grid-template-columns:minmax(0,52rem);justify-content:start;gap:3.5rem}
.blk h2{font-size:clamp(1.5rem,2.4vw,2.1rem);margin-bottom:1rem}
.blk p{font-size:1.125rem;font-weight:300;line-height:1.55;color:var(--muted);max-width:44rem}
.blk p+p{margin-top:1rem}
.blk .time{font-size:.9rem;font-weight:500;color:var(--blue);margin-bottom:.5rem}
.blk ul{list-style:none;margin-top:.5rem}
.blk li{padding:.9rem 0;border-top:1px solid var(--border);font-size:1.05rem;font-weight:300;line-height:1.4}
.blk li:last-child{border-bottom:1px solid var(--border)}
.blk .ph-placeholder{margin-top:1.25rem;height:16rem;border-radius:24px;background:linear-gradient(160deg,#e8f2fb,#d9e9f9);display:grid;place-items:center;color:var(--sub);font-size:.9rem;font-weight:300}
.blk .hint{font-size:.85rem;color:var(--sub);margin-top:.5rem}
.blk .rule{padding:1rem 0;border-top:1px solid var(--border);display:grid;grid-template-columns:8rem 1fr;gap:1rem;font-size:1.05rem;font-weight:300}
.blk .rule b{font-weight:500;color:var(--blue)}
/* faq */
.faq{padding:0 var(--pad-x) 5rem;max-width:56rem}
.faq details{border-top:1px solid var(--border)}
.faq details:last-child{border-bottom:1px solid var(--border)}
.faq summary{list-style:none;cursor:pointer;padding:1.25rem 0;font-size:1.15rem;font-weight:400;color:var(--navy);display:flex;justify-content:space-between;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:300;color:var(--blue);font-size:1.4rem;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 1.25rem;font-size:1.05rem;font-weight:300;line-height:1.5;color:var(--muted);max-width:40rem}
/* cards grid (layout B alt) */
.grid{padding:4rem var(--pad-x) 5rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(18rem,1fr));gap:.75rem}
.gcard{border-radius:24px;padding:1.75rem;min-height:18rem;display:flex;flex-direction:column;justify-content:space-between;background:#fff;box-shadow:inset 0 0 0 1px var(--border)}
.gcard--blue{background:var(--blue);color:#fff;box-shadow:none}.gcard--pale{background:var(--blue-pale);box-shadow:none}
.gcard .k{font-size:.9rem;font-weight:500;color:var(--blue)}.gcard--blue .k{color:rgba(255,255,255,.7)}
.gcard h3{font-size:1.5rem;font-weight:400;letter-spacing:-.01em;line-height:1.2;margin:.75rem 0}
.gcard p{font-size:1rem;font-weight:300;line-height:1.45;color:var(--sub)}.gcard--blue p,.gcard--pale p{color:inherit;opacity:.85}
.gcard a.more{font-size:.95rem;color:var(--blue);margin-top:1rem}
/* pilot band */
.band2{margin:0 var(--pad-x) 3rem;background:var(--blue);color:#fff;border-radius:24px;padding:3.5rem;display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:center}
.band2 h2{color:#fff;font-size:clamp(1.6rem,2.8vw,2.4rem)}
.band2 p{margin-top:.75rem;font-weight:300;opacity:.85;max-width:32rem}
.scene .btn--nav{display:none}
@media(max-width:1023px){.hdr__nav,.hdr__login{display:none}.ph{grid-template-columns:1fr;padding-top:8rem}.band2{grid-template-columns:1fr;padding:2rem}}

/* ---------- scroll-tied hero video ---------- */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:0}
.scene canvas#c{z-index:1;opacity:1;transition:opacity .4s}
.scene.has-video canvas#c{opacity:0}

/* ---------- photo cards on the reader rail ---------- */
.card--photo{position:relative;padding:0;overflow:hidden;background:var(--blue-pale);width:22rem}
.card--photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 25%;display:block}
.card--photo::before{content:"";position:absolute;inset:0;background:var(--navy);opacity:.2;mix-blend-mode:multiply;pointer-events:none;z-index:1}
.card--photo::after{content:"";position:absolute;inset:auto 0 0 0;height:62%;background:linear-gradient(180deg,rgba(29,48,69,0),rgba(29,48,69,.45) 45%,rgba(29,48,69,.75));pointer-events:none;z-index:1}
.card__plate{position:absolute;left:1.25rem;right:1.25rem;bottom:6.4rem;z-index:2;display:flex;flex-direction:column;gap:.45rem}
.card__plate b{font-size:1.6rem;font-weight:400;letter-spacing:-.01em;line-height:1.1;color:#fff}.card__plate span{font-size:.95rem;font-weight:300;color:rgba(255,255,255,.75)}
.card__line{position:absolute;left:1.25rem;right:1.25rem;bottom:1.25rem;z-index:2;font-size:.95rem;font-weight:300;line-height:1.35;color:#fff}
.card__line em{font-style:normal;opacity:.75;font-size:.85rem}
@media(max-width:1023px){.card--photo{width:78vw;max-width:22rem}}

/* ---------- questions over the fog ---------- */
.faq--bg{position:relative;z-index:10;max-width:none;padding:7rem var(--pad-x) 8rem;background:#eef3f8 url(assets/faq-bg.jpg) center 40%/cover no-repeat}
.faq--bg::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(232,242,251,.55),rgba(232,242,251,.15) 40%,rgba(232,242,251,.55));pointer-events:none}
.faq--bg>div{position:relative;max-width:34rem}
.faq--bg h2{color:var(--navy)}
.faq--bg details{border-top-color:rgba(29,48,69,.25)}
.faq--bg details:last-child{border-bottom-color:rgba(29,48,69,.25)}
.faq--bg summary{color:var(--navy)}
.faq--bg details p{color:var(--navy);opacity:.85}
/* narrower question rows */
.faq--bg>div{max-width:40rem}
.faq--bg h2{max-width:none}
.faq summary::after{font-size:1.1rem;font-weight:300}

.faq--bg summary{padding:1.1rem 0;font-size:1.05rem;align-items:center}
.faq--bg summary::after{margin-left:1.5rem;font-size:1.25rem;line-height:1;width:1rem;text-align:right;flex:none}
.faq--bg details p{max-width:36rem}

.gcard__img{position:relative}
.gcard .imgwrap{position:relative;border-radius:16px;overflow:hidden;margin:-.25rem 0 .75rem}
.gcard .imgwrap::after{content:"";position:absolute;inset:0;background:var(--navy);opacity:.18;mix-blend-mode:multiply}
.gcard .imgwrap img{margin:0;border-radius:0}

.faq--bg h2{font-size:clamp(1.6rem,2.4vw,2.2rem);max-width:34rem}
.faq--bg details p{max-width:32rem}
.l3 h2,.l3 .eb,.l3 .cta span{color:#fff}

/* ---------- FAQ: column, rules, background placement ---------- */
.faq--bg>div{max-width:34rem !important}
.faq--bg{background-position:78% 60%}
.faq--bg details{border-top:0;position:relative}
.faq--bg details:last-child{border-bottom:0}
.faq--bg details::before,.faq--bg details:last-child::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,rgba(29,48,69,.3) 0%,rgba(29,48,69,.3) 70%,rgba(29,48,69,0) 100%)}
.faq--bg details:last-child::after{top:auto;bottom:0}
@media(max-width:1023px){.faq--bg{background-position:85% 85%}}

/* ============================================================
   UI/UX pass — see notes inline. Everything below is additive.
   ============================================================ */

/* 1 — the fluid root was unclamped: ~11px at 1024w, ~28px at 2560w.
       Clamp it so body copy stays readable on laptops and sane on ultrawide. */
@media(min-width:1024px){html{font-size:clamp(15px,1.1111vw,19px)}}

/* 2 — keyboard focus was invisible everywhere (a{text-decoration:none} + no outlines). */
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:3px}
.scene :focus-visible,.l3 :focus-visible,.hdr.light :focus-visible{outline-color:#fff}
.skip{position:absolute;left:var(--pad-x);top:-4rem;z-index:200;background:var(--blue);color:#fff;padding:.75rem 1.25rem;border-radius:8px;font-size:.95rem;transition:top .2s}
.skip:focus{top:1rem}

/* 3 — header inversion over the dark end of the hero.
       The old rule was `.nav.light` but the element is class="hdr" id="nav", so it never fired. */
.hdr__logo,.hdr__nav,.hdr__login{transition:background .45s var(--ease),color .45s var(--ease)}
.hdr.light .hdr__logo,.hdr.light .hdr__nav,.hdr.light .hdr__login{background:rgba(15,26,38,.42);color:#fff}
.hdr.light .hdr__nav a,.hdr.light .hdr__login{color:#fff}
.hdr.light .hdr__nav a:hover,.hdr.light .hdr__nav a.on{color:var(--blue-pale)}
.hdr.light .burger{background:rgba(15,26,38,.42);color:#fff}

/* 4 — the header scrolled away for the whole (very long) page below the hero.
       A compact bar returns once the hero is done. */
.hdr--stuck{position:fixed;top:.75rem;transform:translateY(calc(-100% - 1.5rem));transition:transform .45s var(--ease);z-index:60}
.hdr--stuck.on{transform:none}
.hdr--stuck .hdr__logo,.hdr--stuck .hdr__nav,.hdr--stuck .hdr__login{background:rgba(255,255,255,.9);box-shadow:0 8px 30px -18px rgba(29,48,69,.55)}
@media(prefers-reduced-motion:reduce){.hdr--stuck{transition:none}}

/* 5 — below 1024px the nav and log-in link were simply display:none with no
       replacement, so phones had no navigation at all. Burger + drawer. */
.burger{display:none;width:3.375rem;height:3.375rem;border-radius:8px;background:rgba(255,255,255,.8);backdrop-filter:blur(10px);color:var(--navy);place-items:center;flex:none}
.burger span{position:relative;display:block;width:18px;height:1.5px;background:currentColor;transition:transform .3s var(--ease),opacity .2s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:1.5px;background:currentColor;transition:transform .3s var(--ease)}
.burger span::before{top:-6px}.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}
.drawer{position:fixed;inset:0;z-index:120;display:grid;grid-template-rows:1fr;background:rgba(29,48,69,.45);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s}
.drawer.on{opacity:1;visibility:visible}
.drawer__panel{align-self:start;margin:.75rem;padding:4.5rem 1.75rem 2rem;background:var(--blue-wash);border-radius:24px;transform:translateY(-16px);transition:transform .35s var(--ease);max-height:calc(100dvh - 1.5rem);overflow:auto}
.drawer.on .drawer__panel{transform:none}
/* :not(.btn) matters — `.drawer a` outranks `.btn{display:inline-flex}` and would
   flatten the cloned CTA so its label and arrow stack on top of each other. */
.drawer a:not(.btn){display:block;padding:1rem 0;border-top:1px solid rgba(29,48,69,.14);font-size:1.25rem;font-weight:300;color:var(--navy)}
.drawer a:not(.btn):first-of-type{border-top:0}
.drawer__close{position:absolute;top:1.25rem;right:1.25rem;width:2.75rem;height:2.75rem;display:grid;place-items:center;border-radius:8px;color:var(--navy);background:rgba(29,48,69,.06)}
.drawer__close svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;fill:none}
.drawer__panel{position:relative}
.drawer .btn{margin-top:1.5rem;width:100%;justify-content:space-between;border-radius:46px;padding:0 .125rem 0 1.5rem;height:3.5rem}
.drawer .btn .btn__ico{width:3rem;height:3rem;border-radius:50%}
body.locked{overflow:hidden}
@media(max-width:1023px){.burger{display:grid}}
@media(prefers-reduced-motion:reduce){.drawer,.drawer__panel{transition:none}}

/* 6 — named customers band */
.clients{position:relative;z-index:10;background:var(--blue-wash-deep);padding:0 var(--pad-x) clamp(3.5rem,6vw,5.5rem)}
.clients__head{display:flex;justify-content:space-between;align-items:end;gap:2rem;flex-wrap:wrap;padding-bottom:1.75rem;border-bottom:1px solid rgba(29,48,69,.18)}
.clients__head h2{font-size:clamp(1.5rem,2.4vw,2.1rem)}
.clients__head .sub{max-width:24rem}
.clients__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:.75rem;margin-top:2rem}
.client{background:#fff;border-radius:24px;padding:1.75rem;display:flex;flex-direction:column;gap:.75rem;min-height:13.5rem}
.client--us{background:var(--blue);color:#fff}
.client__role{font-size:.8rem;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--blue)}
.client--us .client__role{color:rgba(255,255,255,.7)}
.client__mark{font-size:1.6rem;font-weight:500;letter-spacing:-.03em;line-height:1.05;color:var(--navy)}
.client--us .client__mark{color:#fff}
.client__p{margin-top:auto;font-size:1rem;font-weight:300;line-height:1.45;color:var(--sub)}
.client--us .client__p{color:rgba(255,255,255,.85)}

/* 7 — the pilot form did nothing at all (onsubmit=preventDefault, no validation,
       no feedback). States for the working version. */
.field input{border-radius:8px;transition:border-color .2s,box-shadow .2s}
.field input:focus{box-shadow:0 0 0 3px rgba(0,108,210,.15)}
.field.err input{border-color:#b3261e}
.field .err__msg{display:none;font-size:.85rem;color:#b3261e;font-weight:400}
.field.err .err__msg{display:block}
.form__done{display:none;flex:1;flex-direction:column;justify-content:center;gap:1rem;text-align:left}
.form__done h3{font-size:1.6rem;font-weight:300;text-transform:uppercase;letter-spacing:.03em;color:var(--navy)}
.form__done p{font-size:1.05rem;font-weight:300;line-height:1.5;color:var(--muted)}
.form__done a{color:var(--blue);text-decoration:underline}
.form.sent>*:not(.form__done){display:none}
.form.sent .form__done{display:flex}
.btn[aria-busy="true"]{opacity:.7;pointer-events:none}

/* 8 — the rail finished its travel in the first third of the pinned section,
       leaving dead scroll. Scrub span is corrected in site.js; heights trimmed
       here so the page is ~2 screens shorter overall. */
.track{height:400vh}
.runway{height:340lvh}