/* =============================================================
   THE PILOT - "Aurora Glass" redesign mockup
   Self-contained: does not load the production stylesheet, so the
   surface architecture below is free of the old opaque bands.
   Brand palette, Aleo + Figtree are carried over unchanged.
   ============================================================= */

/* ---------- 1. TOKENS ---------------------------------------- */
:root{
  /* brand, unchanged */
  --teal:#1e4c47;
  --teal-deep:#173a36;
  --teal-ink:#102b28;
  --teal-black:#0b1f1d;
  --green:#478058;
  --mist:#b8c9c4;
  --gold:#c9a84c;
  --gold-lit:#dcc077;     /* gold that clears AA on dark glass */
  --gold-deep:#7f661b;    /* gold that clears AA on light glass */
  --olive-text:#65655a;
  --ink:#3d423d;
  --cream:#fdf8e8;

  --display:'Aleo', Georgia, serif;
  --body:'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* --- ONE SPATIAL SYSTEM ------------------------------------
     The whole page resolves to two vertical rails:
       Rail A (block edge) - every panel, card, timeline and table
       Rail B (text)       - every heading, paragraph and list
     --shell sets the block rail; text is left-aligned against the inner
     padding, so Rail B is always Rail A + one padding step.        */
  --gutter:clamp(16px,2.6vw,36px);    /* viewport -> block edge     */
  --pad-x:clamp(18px,4.6vw,84px);     /* panel border -> content    */
  --pad-y:clamp(32px,4.4vw,62px);
  /* Line length is what caps the block width, so the body type scales
     up with it: at 18.5px, 736px still reads at ~77 characters. */
  --body-size:clamp(17px,0.42vw + 13.7px,20px);
  --measure:37em;                     /* 37 x the body size, so the
                                         character count stays constant
                                         as the type scales: ~76 chars */
  /* The block width is DERIVED from the measure, not set independently.
     That makes a panel's content box exactly one measure wide, so the
     text fills it and the left and right insets are always equal. Set
     the shell by hand and any slack collects on the right instead. */
  --shell:calc(var(--measure) + (var(--pad-x) * 2) + (var(--gutter) * 2));
  --gap:clamp(52px,5.5vw,88px);       /* the single vertical rhythm */

  /* --- glass recipes -----------------------------------------
     Each is background + border + inset lit edge + drop shadow.
     The inset highlight is what sells it as a lit pane of glass
     rather than a flat translucent box. */
  --glass-bg:linear-gradient(158deg, rgba(255,255,255,.80) 0%, rgba(255,255,255,.62) 100%);
  --glass-brd:1px solid rgba(255,255,255,.72);
  --glass-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -1px 0 rgba(255,255,255,.28),
    0 1px 2px rgba(16,43,40,.05),
    0 24px 60px -24px rgba(16,43,40,.28);

  --card-bg:linear-gradient(158deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.50) 100%);
  --card-brd:1px solid rgba(255,255,255,.65);
  --card-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    0 1px 2px rgba(16,43,40,.04),
    0 14px 34px -14px rgba(16,43,40,.22);
  --card-shadow-lift:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 2px 4px rgba(16,43,40,.05),
    0 28px 58px -18px rgba(16,43,40,.32);

  /* dark glass sits over a LIGHT field, so it needs high opacity
     to keep white text at full contrast */
  --dark-bg:linear-gradient(158deg, rgba(21,52,48,.94) 0%, rgba(11,31,29,.97) 100%);
  --dark-brd:1px solid rgba(255,255,255,.14);
  --dark-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 30px 70px -28px rgba(11,31,29,.75);

  --cream-bg:linear-gradient(158deg, rgba(254,250,236,.92) 0%, rgba(250,243,223,.86) 100%);

  --blur:20px;

  /* --- motion ------------------------------------------------
     One easing family. --e-out settles (fast start, long tail),
     --e-io is for reversible interactions, --e-spring overshoots
     very slightly and is reserved for badges and the nav pill. */
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.4,0,.2,1);
  --e-spring:cubic-bezier(.34,1.18,.64,1);
  /* Entrance amplitude and speed, in one place. Restrained on purpose:
     the motion should register without asking to be watched. */
  --dur:.55s;          /* most elements        */
  --dur-panel:.7s;     /* the big glass panels */
  --rise:14px;         /* vertical entrance    */
  --shift:12px;        /* lateral entrance     */
  --scale-from:.988;   /* panel entrance       */
}

/* ---------- 2. BASE ------------------------------------------ */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:92px;}
body{
  margin:0;
  font-family:var(--body);
  font-size:var(--body-size);
  line-height:1.75;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;

  /* THE FIELD - a fixed, viewport-sized luminous gradient. Fixed
     rather than document-length so it stays composed no matter how
     tall the page is, and so it never repaints while scrolling. */
  background:
    radial-gradient(1200px 820px at 12% -8%,  rgba(71,128,88,.22), transparent 62%),
    radial-gradient(1000px 720px at 92% 6%,   rgba(201,168,76,.16), transparent 60%),
    radial-gradient(1100px 900px at 76% 98%,  rgba(30,76,71,.20),  transparent 64%),
    linear-gradient(168deg, #eff4f0 0%, #e3ebe6 38%, #ebf1ed 66%, #dde7e1 100%);
  background-attachment:fixed;
}

/* drifting light, fixed over the field */
.aurora{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.aurora span{
  position:absolute;display:block;border-radius:50%;
  filter:blur(90px);opacity:.5;
  will-change:transform;
}
.aurora .a1{width:46vw;height:46vw;left:-8vw;top:-6vw;
  background:radial-gradient(circle,rgba(71,128,88,.55),transparent 70%);
  animation:drift1 46s var(--e-io) infinite alternate;}
.aurora .a2{width:38vw;height:38vw;right:-6vw;top:22vh;
  background:radial-gradient(circle,rgba(201,168,76,.42),transparent 70%);
  animation:drift2 56s var(--e-io) infinite alternate;}
.aurora .a3{width:52vw;height:52vw;left:22vw;bottom:-18vw;
  background:radial-gradient(circle,rgba(30,76,71,.45),transparent 70%);
  animation:drift3 66s var(--e-io) infinite alternate;}
@keyframes drift1{to{transform:translate3d(6vw,4vh,0) scale(1.10);}}
@keyframes drift2{to{transform:translate3d(-7vw,6vh,0) scale(.92);}}
@keyframes drift3{to{transform:translate3d(4vw,-5vh,0) scale(1.07);}}

/* everything above the field */
.page{position:relative;z-index:1;}

p{margin:0 0 1.25em;}
a{color:#2f6b45;text-decoration:none;}
strong{font-weight:600;color:var(--teal);}
h1,h2,h3,h4{font-family:var(--display);color:var(--teal);margin:0;font-weight:700;
  line-height:1.14;letter-spacing:-.02em;}
img{max-width:100%;}
figure{margin:0;}  /* UA default is 1em 40px, which breaks the rails */

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;}
:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px;border-radius:4px;}
.skip{position:absolute;left:16px;top:-64px;z-index:200;background:var(--teal);color:#fff;
  padding:12px 20px;border-radius:10px;font-weight:600;transition:top .25s var(--e-out);}
.skip:focus{top:16px;}

/* ---------- 3. LAYOUT ---------------------------------------- */
/* every section's outer block - this edge is Rail A */
.shell{max-width:var(--shell);margin:0 auto;padding-inline:var(--gutter);}

/* One gap, declared once, between every section. Sections carry no
   padding of their own, so two neighbours can never stack their
   spacing into a double gap. */
main{display:flex;flex-direction:column;gap:var(--gap);padding-block:var(--gap);}
.band{padding:0;position:relative;}

/* The reading grid. The text column is LEFT-aligned, not centred, so
   the only thing between a panel's border and its text is the panel's
   own padding. --lead adds that same padding to sections that have no
   panel around them, so every text block on the page starts at one x.
   .wide items ignore the lead and span the block edge to edge. */
.flow{
  display:grid;
  grid-template-columns:
    [full-start] var(--lead,0px)
    [text-start] min(100% - var(--lead,0px), var(--measure)) [text-end]
    minmax(0,1fr) [full-end];
}
.flow > *{grid-column:text;min-width:0;}
.flow > .wide{grid-column:full;}

/* a .flow sitting straight on the field borrows the panel's padding */
.shell > .flow{--lead:var(--pad-x);}

/* ---------- 3b. VERTICAL RHYTHM ------------------------------
   One scale for the whole page. Every gap below is set by the pair
   of elements it sits between, so a heading is the same distance
   from its body copy in every section. Order matters: the later
   rules intentionally win for heading pairs. */
.flow > *{margin:0;}

/* 1. default: paragraph to paragraph */
.flow > * + *{margin-top:1.25em;}

/* 2. blocks breathe more than prose does */
.flow > * + .figure, .flow > .figure + *,
.flow > * + .mtable, .flow > .mtable + *,
.flow > * + .calcbox, .flow > .calcbox + *,
.flow > * + .gcream, .flow > .gcream + *,
.flow > * + .layers, .flow > .layers + *,
.flow > * + .two, .flow > .two + *,
.flow > * + .qlist, .flow > .qlist + *,
.flow > * + .toc, .flow > .toc + *,
.flow > * + .timeline, .flow > .timeline + *,
.flow > * + .stages, .flow > .stages + *,
.flow > * + .pullquote, .flow > .pullquote + *{margin-top:2.1rem;}

/* 3. air above a heading */
.flow > * + h3{margin-top:2.7rem;}

/* 4. a heading sits close to what it introduces (wins over rule 2) */
.flow > .eyebrow + *{margin-top:.2rem;}
.flow > .part-head + *{margin-top:.45rem;}
.flow > .h2 + *{margin-top:.4rem;}
.flow > .section-sub + *{margin-top:1.5rem;}
.flow > h3 + *{margin-top:.75rem;}

/* the same pairs, one level down, inside a numbered stage */
.stage > *{margin:0;}
.stage > * + *{margin-top:1.25em;}
.stage > * + .gcream, .stage > .gcream + *{margin-top:2.1rem;}
.stage > * + .exlabel{margin-top:1.8rem;}
.stage > .exlabel + *{margin-top:.45rem;}
.stage > h3 + *{margin-top:.75rem;}

/* ---------- 4. GLASS SURFACES -------------------------------- */
.glass,.gcard,.gdark,.gcream{position:relative;}

/* the big reading pane - fills the shell, so its edge IS Rail A */
.glass{
  padding:var(--pad-y) var(--pad-x);
  border-radius:26px;
  background:var(--glass-bg);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(180%);
          backdrop-filter:blur(var(--blur)) saturate(180%);
  border:var(--glass-brd);
  box-shadow:var(--glass-shadow);
}

/* smaller floating cards that sit directly on the field */
.gcard{
  border-radius:18px;
  padding:26px 28px;
  background:var(--card-bg);
  -webkit-backdrop-filter:blur(16px) saturate(170%);
          backdrop-filter:blur(16px) saturate(170%);
  border:var(--card-brd);
  box-shadow:var(--card-shadow);
  overflow:hidden;
  transition:transform .35s var(--e-out), box-shadow .35s var(--e-out);
}
.gcard:hover{transform:translateY(-3px);box-shadow:var(--card-shadow-lift);}

/* a single specular sweep on hover - the tell that it is glass */
.sheen::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(112deg,transparent 32%,rgba(255,255,255,.4) 50%,transparent 68%);
  transform:translateX(-120%);opacity:0;
}
.sheen:hover::after{transform:translateX(120%);opacity:1;
  transition:transform .7s var(--e-io), opacity .2s linear;}

/* dark glass */
.gdark{
  border-radius:22px;
  background:var(--dark-bg);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
          backdrop-filter:blur(24px) saturate(160%);
  border:var(--dark-brd);
  box-shadow:var(--dark-shadow);
  color:rgba(245,245,242,.9);
  overflow:hidden;
}
.gdark h2,.gdark h3,.gdark h4{color:#fff;}
.gdark strong{color:#fff;}

/* warm glass, reserved for case studies - lighter blur because it
   nests inside a panel that is already blurring */
.gcream{margin:0;
  border-radius:18px;
  padding:26px 30px 28px;
  background:var(--cream-bg);
  -webkit-backdrop-filter:blur(8px) saturate(140%);
          backdrop-filter:blur(8px) saturate(140%);
  border:1px solid rgba(201,168,76,.45);
  border-left:4px solid var(--gold);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 16px 38px -18px rgba(140,110,30,.4);
}

/* ---------- 5. TYPOGRAPHY ------------------------------------ */
.eyebrow{
  font-weight:700;text-transform:uppercase;letter-spacing:.2em;
  font-size:.72rem;color:var(--gold-deep);margin:0 0 1.1rem;
  display:inline-flex;align-items:center;gap:.7rem;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--gold);}
.h2{font-size:clamp(2.05rem,4.2vw,3rem);line-height:1.05;margin-bottom:.45rem;}
h3{font-size:clamp(1.3rem,2.2vw,1.52rem);}
.section-sub{font-family:var(--display);font-style:italic;color:var(--olive-text);
  font-size:clamp(1.06rem,1.7vw,1.2rem);margin:0 0 2rem;}
.lead{font-size:clamp(1.18rem,2vw,1.42rem);line-height:1.62;color:var(--teal);letter-spacing:-.005em;}
.flow p{font-size:1em;line-height:1.75;}

.part-head{display:flex;align-items:center;gap:16px;margin:0 0 18px;}
.part-num{font-weight:700;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-deep);flex-shrink:0;}
.part-head .rule{flex:1;height:1px;background:linear-gradient(90deg,var(--gold),rgba(201,168,76,0));
  transform-origin:0 50%;}

.bullets{list-style:none;margin:1em 0 0;padding:0;}
.bullets li{position:relative;padding:5px 0 5px 24px;font-size:1.01rem;line-height:1.66;}
.bullets li::before{content:"";position:absolute;left:0;top:15px;width:6px;height:6px;
  border-radius:50%;background:var(--green);}
.gcream .bullets li::before{background:var(--gold);}

.exlabel{font-weight:700;text-transform:uppercase;letter-spacing:.18em;font-size:.68rem;
  color:var(--olive-text);}

/* ---------- 6. NAV ------------------------------------------- */
.nav{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
          backdrop-filter:blur(18px) saturate(180%);
  border-bottom:1px solid rgba(255,255,255,.5);
  transition:background .4s var(--e-io), border-color .4s var(--e-io), box-shadow .4s var(--e-io);
}
.nav.stuck{
  background:rgba(255,255,255,.74);
  border-bottom-color:rgba(16,43,40,.08);
  box-shadow:0 14px 34px -22px rgba(16,43,40,.5);
}
.nav-inner{max-width:var(--shell);margin:0 auto;padding:13px var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:18px;}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--display);font-weight:700;
  color:var(--teal);font-size:1rem;letter-spacing:-.01em;}
.brand .mk{display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,var(--teal),var(--teal-ink));
  border-radius:9px;padding:6px 8px;
  box-shadow:0 4px 12px -2px rgba(16,43,40,.45), inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .35s var(--e-spring);}
.brand:hover .mk{transform:translateY(-1px) rotate(-2.5deg);}
.brand .mk img{display:block;height:21px;width:auto;}
.brand .om-two{font-weight:400;color:#3a6b46;}

.navlinks{position:relative;display:flex;align-items:center;gap:2px;}
.navlinks a{
  position:relative;z-index:1;
  padding:8px 15px;border-radius:999px;
  font-size:.725rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--olive-text);white-space:nowrap;
  transition:color .35s var(--e-io);
}
.navlinks a:hover{color:var(--teal);}
.navlinks a[aria-current="true"]{color:var(--teal);}

/* one pill that SLIDES between sections rather than appearing */
.navpill{
  position:absolute;z-index:0;top:50%;left:0;height:33px;
  width:var(--w,0px);
  transform:translate3d(var(--x,0px),-50%,0);
  border-radius:999px;
  background:linear-gradient(150deg,rgba(201,168,76,.30),rgba(201,168,76,.16));
  border:1px solid rgba(201,168,76,.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
  opacity:0;
  transition:transform .42s var(--e-spring), width .42s var(--e-spring), opacity .3s var(--e-io);
}
.navpill.on{opacity:1;}

.progress{position:absolute;left:0;bottom:-1px;height:2px;width:100%;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--green),var(--gold));
  will-change:transform;}

@media(max-width:780px){
  .nav-inner{flex-wrap:wrap;padding-bottom:0;gap:0;}
  .navlinks{order:3;width:100%;overflow-x:auto;gap:2px;
    margin:0 calc(var(--gutter) * -1);padding:2px var(--gutter) 9px;
    scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);
            mask-image:linear-gradient(90deg,#000 88%,transparent);}
  .navlinks::-webkit-scrollbar{display:none;}
  .navpill{display:none;}
  .navlinks a[aria-current="true"]{
    background:linear-gradient(150deg,rgba(201,168,76,.30),rgba(201,168,76,.16));}
}

/* ---------- 7. HERO ------------------------------------------ */
.hero{
  position:relative;overflow:hidden;
  padding:clamp(80px,11vw,136px) 0 clamp(96px,11vw,132px);
  color:#f2f5f3;
  background:
    radial-gradient(900px 620px at 76% 14%, rgba(71,128,88,.42), transparent 62%),
    radial-gradient(760px 540px at 6% 92%, rgba(11,31,29,.75), transparent 66%),
    linear-gradient(162deg,#123330 0%,#1b4540 46%,#27594f 100%);
}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.025) 0 1px,transparent 1px 84px);}
/* melt the hero into the light field instead of cutting it off */
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:clamp(110px,16vw,190px);pointer-events:none;
  background:linear-gradient(180deg,rgba(239,244,240,0) 0%,rgba(239,244,240,.55) 62%,#eff4f0 100%);}
.hero .wrap{position:relative;z-index:3;}
.hero-topo{position:absolute;right:-8%;top:-26%;width:min(920px,92vw);opacity:.15;
  color:#fff;pointer-events:none;z-index:1;}
.hero-rocket{position:absolute;right:15%;top:48%;width:224px;height:224px;object-fit:contain;
  z-index:2;filter:drop-shadow(0 26px 54px rgba(0,0,0,.42));
  transform:translateY(-50%);will-change:transform;}
.hero-rocket-in{animation:float 9s ease-in-out infinite;}
@keyframes float{0%,100%{transform:translateY(-50%) rotate(0deg);}
  50%{transform:translateY(calc(-50% - 9px)) rotate(-1.8deg);}}
@media(max-width:1180px){.hero-rocket{right:5%;width:172px;height:172px;opacity:.9;}}
@media(max-width:880px){.hero-rocket{display:none;}}

.hero-kicker{display:inline-flex;align-items:center;gap:12px;
  font-size:.7rem;font-weight:700;letter-spacing:.34em;text-transform:uppercase;
  color:var(--gold-lit);margin-bottom:22px;}
.hero-kicker::before{content:"";width:30px;height:1px;background:var(--gold);}
.hero h1{color:#fff;font-size:clamp(3rem,8.4vw,6rem);line-height:.96;letter-spacing:-.038em;
  margin-bottom:24px;}
.hero-deck{font-family:var(--display);font-style:italic;color:#cfdcd7;
  font-size:clamp(1.16rem,2.5vw,1.6rem);line-height:1.42;max-width:26ch;margin:0 0 32px;}

/* glass chips, floating on the hero's own gradient */
.hero-meta{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 36px;padding:0;list-style:none;}
.hero-meta li{
  font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:#e6ede9;
  padding:8px 16px;border-radius:999px;
  background:rgba(255,255,255,.10);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
}
.hero-cue{display:inline-flex;align-items:center;gap:10px;color:#cfdcd7;
  font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  transition:color .3s var(--e-io);}
.hero-cue:hover{color:#fff;}
.hero-cue svg{width:15px;height:15px;animation:cue 3.2s var(--e-io) infinite;}
@keyframes cue{0%,100%{transform:translateY(0);}50%{transform:translateY(3px);}}

/* ---------- 8. PULL QUOTE ------------------------------------ */
.pullquote{padding:2px 0 2px 28px;border-left:2px solid var(--gold);}
.pullquote q{display:block;quotes:none;font-family:var(--display);font-style:italic;
  font-weight:500;font-size:clamp(1.3rem,2.6vw,1.7rem);line-height:1.34;
  letter-spacing:-.015em;color:var(--teal);}

/* ---------- 9. CONTENTS -------------------------------------- */
.toc{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;}
.toc a{display:flex;flex-direction:column;gap:9px;}
.tnum{font-weight:700;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep);}
.ttitle{font-family:var(--display);font-weight:700;color:var(--teal);font-size:1.15rem;
  line-height:1.25;letter-spacing:-.018em;}
.tq{font-family:var(--display);font-style:italic;color:var(--olive-text);font-size:.94rem;
  line-height:1.45;}
.tgo{display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding-top:6px;font-size:.67rem;
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#2f6b45;}
.tgo svg{width:13px;height:13px;transition:transform .3s var(--e-out);}
.toc a:hover .tgo svg{transform:translateX(3px);}

/* ---------- 10. FORMAT CARDS --------------------------------- */
.two{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:34px;}
@media(max-width:820px){.two{grid-template-columns:1fr;}}
.two .gcard::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--green),var(--gold));}
.cardico{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;
  justify-content:center;background:rgba(71,128,88,.13);color:#2f6b45;margin-bottom:15px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);}
.cardico svg{width:20px;height:20px;}
.two h3{font-size:1.18rem;margin-bottom:.75rem;}
.two p{font-size:.97rem;line-height:1.65;margin:0;}

/* ---------- 11. QUESTIONNAIRE -------------------------------- */
.qlist{list-style:none;padding:0;counter-reset:q;
  display:grid;gap:12px;}
.qlist > li{counter-increment:q;padding:26px 30px 28px 84px;}
.qlist > li::before{
  content:counter(q);position:absolute;left:28px;top:26px;
  width:38px;height:38px;border-radius:12px;
  background:linear-gradient(150deg,var(--teal),var(--teal-ink));
  color:#fff;font-family:var(--display);font-weight:700;font-size:1rem;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 16px -4px rgba(16,43,40,.5), inset 0 1px 0 rgba(255,255,255,.2);
}
.qlist .q{font-family:var(--display);font-weight:600;color:var(--teal);
  font-size:1.06rem;line-height:1.44;margin:0;}
.qlist .consider{display:flex;gap:10px;align-items:flex-start;margin:.9rem 0 0;
  font-size:.9rem;line-height:1.6;color:var(--olive-text);}
.qlist .consider svg{width:16px;height:16px;flex-shrink:0;margin-top:4px;color:var(--gold-deep);}
@media(max-width:620px){
  .qlist > li{padding:24px 22px 26px;}
  .qlist > li::before{position:static;margin-bottom:14px;}
}

/* ---------- 12. STAGE RAIL ----------------------------------- */
/* Stage bodies sit on the same text rail as every other paragraph, so
   the numeral rides inline with the heading rather than out in a
   margin that no longer exists. */
.stages{display:grid;gap:40px;}
.stage{position:relative;}
.stage + .stage{padding-top:40px;
  border-top:1px solid rgba(201,168,76,.28);}
.stage > *{max-width:var(--measure);}
.stage h3{display:flex;align-items:center;gap:15px;}
.sn{flex:0 0 auto;width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:700;font-size:.95rem;color:var(--teal);
  background:linear-gradient(158deg,rgba(255,255,255,.92),rgba(255,255,255,.74));
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1.5px solid var(--gold);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 6px 16px -5px rgba(140,110,30,.42);}
.stage h3{font-size:1.34rem;margin:0 0 .7rem;}
@media(max-width:620px){
  .stages{gap:32px;}
  .stage + .stage{padding-top:32px;}
  .stage h3{gap:12px;}
  .sn{width:38px;height:38px;font-size:.88rem;}
}

.cslabel{display:inline-flex;align-items:center;gap:8px;
  font-weight:700;text-transform:uppercase;letter-spacing:.16em;font-size:.645rem;
  background:linear-gradient(150deg,#d8b85c,var(--gold));color:#392c05;
  border-radius:999px;padding:6px 15px;margin-bottom:1rem;
  box-shadow:0 5px 14px -4px rgba(180,145,40,.7), inset 0 1px 0 rgba(255,255,255,.5);}
.cslabel svg{width:14px;height:14px;}
.gcream > *{margin:0;}
.gcream > * + *{margin-top:1.25em;}
.gcream p{font-size:1em;line-height:1.7;}
.gcream p:last-child{margin-bottom:0;}

.chain{font-family:var(--display);font-weight:600;font-size:1.04rem;line-height:1.7;
  color:var(--teal);background:rgba(71,128,88,.10);border-left:3px solid var(--green);
  border-radius:12px;padding:16px 22px;}

/* ---------- 13. FIGURES -------------------------------------- */
.figure{padding:10px;border-radius:20px;overflow:hidden;
  background:var(--card-bg);
  -webkit-backdrop-filter:blur(16px) saturate(170%);backdrop-filter:blur(16px) saturate(170%);
  border:var(--card-brd);box-shadow:var(--card-shadow);}
.figure img{display:block;width:100%;height:auto;border-radius:12px;}
.figure figcaption{padding:13px 14px 5px;font-size:.81rem;letter-spacing:.03em;color:var(--olive-text);}

/* ---------- 14. MEASURES TABLE ------------------------------- */
.mtable{border-radius:18px;overflow:hidden;
  background:var(--card-bg);
  -webkit-backdrop-filter:blur(16px) saturate(170%);backdrop-filter:blur(16px) saturate(170%);
  border:var(--card-brd);box-shadow:var(--card-shadow);
  display:grid;grid-template-columns:1fr 1fr;}
@media(max-width:760px){.mtable{grid-template-columns:1fr;}}
.mtable > div{border-left:1px solid rgba(16,43,40,.07);padding-bottom:20px;}
.mtable > div:first-child{border-left:0;}
@media(max-width:760px){.mtable > div{border-left:0;border-top:1px solid rgba(16,43,40,.07);}
  .mtable > div:first-child{border-top:0;}}
.mtable h4{font-family:var(--body);font-weight:700;font-size:.69rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--teal);padding:15px 26px;margin:0 0 5px;
  background:rgba(255,255,255,.42);border-bottom:1px solid rgba(16,43,40,.07);}
.mtable ul{list-style:none;margin:0;padding:0 26px;}
.mtable li{font-size:.93rem;line-height:1.6;padding:9px 0;border-top:1px solid rgba(16,43,40,.06);}
.mtable li:first-child{border-top:0;}
.gcream .mtable{background:rgba(255,255,255,.62);border-color:rgba(201,168,76,.32);}

/* ---------- 15. CALCULATOR CTA ------------------------------- */
.calcbox{padding:34px 38px;display:flex;gap:24px;align-items:center;flex-wrap:wrap;}
.calcbox::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.03) 0 1px,transparent 1px 62px);}
.calcbox > *{position:relative;z-index:1;}
.calcbox .ci{flex-shrink:0;width:52px;height:52px;padding:12px;border-radius:15px;
  color:var(--gold-lit);background:rgba(201,168,76,.16);
  border:1px solid rgba(201,168,76,.34);box-shadow:inset 0 1px 0 rgba(255,255,255,.2);}
.calcbox .ct{flex:1 1 300px;}
.calcbox h4{font-size:1.3rem;margin:0 0 .35rem;}
.calcbox p{margin:0;font-size:.97rem;line-height:1.6;color:rgba(238,244,240,.84);}
@media(max-width:860px){.calcbox .ct{flex:1 1 100%;}}
@media(max-width:620px){.calcbox{padding:26px 22px;}}

/* ---------- 16. BUTTONS -------------------------------------- */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:9px;
  font-family:var(--body);font-weight:700;font-size:.87rem;letter-spacing:.03em;
  padding:14px 24px;border-radius:12px;border:0;
  transition:transform .3s var(--e-out), box-shadow .3s var(--e-out), background .25s var(--e-io);}
.btn svg{width:16px;height:16px;flex-shrink:0;transition:transform .3s var(--e-out);}
.btn.solid{background:linear-gradient(150deg,#dcbc62,var(--gold));color:#14322e;
  box-shadow:0 10px 26px -10px rgba(201,168,76,.9), inset 0 1px 0 rgba(255,255,255,.5);}
.btn.solid:hover{transform:translateY(-2px);
  box-shadow:0 16px 34px -10px rgba(201,168,76,1), inset 0 1px 0 rgba(255,255,255,.6);}
.btn.solid:hover svg{transform:translate(2px,-2px);}
.btn.ghost{color:#fff;background:rgba(255,255,255,.07);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.34), inset 0 1px 0 rgba(255,255,255,.18);}
.btn.ghost:hover{transform:translateY(-2px);background:rgba(255,255,255,.12);
  box-shadow:inset 0 0 0 1.5px var(--gold-lit), inset 0 1px 0 rgba(255,255,255,.2);}
.btn.ghost:hover svg{transform:translateX(3px);}
/* travelling highlight */
.btn::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(112deg,transparent 34%,rgba(255,255,255,.5) 50%,transparent 66%);
  transform:translateX(-120%);opacity:0;}
.btn:hover::after{transform:translateX(130%);opacity:1;
  transition:transform .65s var(--e-io), opacity .2s linear;}
.docbar{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px;}

/* ---------- 17. VALUE LAYERS --------------------------------- */
.layers{list-style:none;padding:0;counter-reset:ly;display:grid;gap:10px;}
.layers li{counter-increment:ly;padding:18px 22px 18px 62px;font-size:1rem;line-height:1.62;}
.layers li::before{content:counter(ly,decimal-leading-zero);position:absolute;left:22px;top:19px;
  font-family:var(--display);font-weight:700;font-size:.9rem;color:var(--gold-deep);}
.layers li:hover{transform:translateX(2px);}

/* ---------- 18. TIMELINE ------------------------------------- */
.timeline{display:grid;gap:14px;}
/* The label used to sit in a fixed 200px column; when it wrapped to two
   lines the pill stretched to the column and left dead space beside it.
   Stacking it also matches the source document, where these are headings. */
.phase{padding:26px 30px;}
.pk{display:inline-flex;align-items:center;gap:9px;
  font-weight:700;text-transform:uppercase;letter-spacing:.15em;font-size:.68rem;color:var(--teal);
  background:linear-gradient(150deg,rgba(201,168,76,.26),rgba(201,168,76,.13));
  border:1px solid rgba(201,168,76,.42);border-radius:999px;padding:7px 15px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);}
.pk .dot{width:7px;height:7px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 3px rgba(201,168,76,.25);}
.phase-body{margin-top:.9rem;}
.phase-body > *{margin:0;}
.phase-body > * + *{margin-top:1.25em;}
.phase-body p{font-size:1em;line-height:1.7;}

/* ---------- 19. CLOSING + FOOTER ----------------------------- */
.closing{padding:var(--pad-y) var(--pad-x);
  text-align:center;}
.closing .eyebrow{color:var(--gold-lit);justify-content:center;}
.closing .eyebrow::before{background:var(--gold-lit);}
.closing h2{font-size:clamp(1.85rem,3.6vw,2.5rem);line-height:1.12;margin-bottom:.9rem;}
.closing p{max-width:52ch;margin:0 auto;font-size:1.04rem;line-height:1.72;color:rgba(238,244,240,.84);}
.closing .docbar{justify-content:center;}

.foot{padding:54px 0 46px;text-align:center;
  background:linear-gradient(180deg,rgba(16,43,40,.94),rgba(11,31,29,.98));
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  border-top:1px solid rgba(255,255,255,.1);}
.brand-lg{display:inline-flex;align-items:center;gap:12px;font-family:var(--display);
  font-weight:700;color:#fff;font-size:1.3rem;margin-bottom:14px;}
.brand-lg .om-two{color:var(--mist);font-weight:400;}
.footlinks{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin:18px 0 20px;
  padding:0;list-style:none;}
.footlinks a{color:#cfdcd7;font-size:.74rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;padding:9px 16px;border-radius:999px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);
  transition:background .35s var(--e-io), color .35s var(--e-io), transform .35s var(--e-out);}
.footlinks a:hover{background:rgba(201,168,76,.22);color:#fff;transform:translateY(-1px);}
.foot .fine{font-size:.79rem;color:rgba(207,220,215,.72);letter-spacing:.05em;margin:0;}

/* ---------- 20. MOTION SYSTEM -------------------------------- */
/* Entrances are declarative: an element declares a direction, JS only
   adds .in and a stagger delay. One easing curve throughout. */
[data-anim]{opacity:0;will-change:opacity,transform;}
[data-anim="rise"]{transform:translate3d(0,var(--rise),0);}
[data-anim="fade"]{transform:none;}
[data-anim="scale"]{transform:scale(var(--scale-from));}
[data-anim="left"]{transform:translate3d(calc(var(--shift) * -1),0,0);}
[data-anim="right"]{transform:translate3d(var(--shift),0,0);}
[data-anim="rule"]{opacity:1;transform:scaleX(0);}

[data-anim].in{
  opacity:1;transform:none;
  transition:opacity var(--dur) var(--e-out), transform var(--dur) var(--e-out);
  transition-delay:var(--d,0ms);
}
[data-anim="rule"].in{transform:scaleX(1);
  transition:transform var(--dur-panel) var(--e-out);transition-delay:var(--d,0ms);}

/* panels get a touch longer so they feel weighty */
.glass[data-anim].in,.gdark[data-anim].in{transition-duration:var(--dur-panel);}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  [data-anim]{opacity:1 !important;transform:none !important;transition:none !important;}
  .aurora span{animation:none !important;}
  .hero-rocket-in{animation:none !important;}
  .hero-cue svg{animation:none !important;}
  .sheen::after,.btn::after{display:none !important;}
  *,*::before,*::after{transition-duration:.01ms !important;}
}

/* ---------- 21. RESPONSIVE / PERF ---------------------------- */
@media(max-width:700px){
  :root{--blur:14px;}
  /* fewer, cheaper blurred layers on phones */
  .aurora span{filter:blur(64px);opacity:.42;}
  .glass{border-radius:20px;}
}

@media print{
  body{background:#fff;}
  .aurora,.progress,.hero-cue,.hero-topo,.skip,.footlinks{display:none !important;}
  .glass,.gcard,.gcream,.figure,.mtable{box-shadow:none;border:1px solid #ccc;
    background:#fff;backdrop-filter:none;}
  .gdark,.foot,.hero{background:#fff !important;color:#000 !important;}
  .gdark h2,.gdark h4,.gdark p,.hero h1,.closing h2,.closing p{color:#000 !important;}
  .stage,.gcream,.qlist > li,.figure{break-inside:avoid;}
}

/* =============================================================
   SITE LAYER - added for the multi-page mockup.
   Everything above is the Aurora Glass system built for The Pilot;
   below are the views, the home hub, and the components the other
   three pages need. Same tokens, same rails, same rhythm.
   ============================================================= */

/* ---------- VIEWS (client-side routing) ---------------------- */
.view{display:none;}
/* each page is its own file now, so a page shows in full colour from its first
   frame - no fade-in from blank, which flickered on every page change */
.view.active{display:block;}

/* ---------- HOME HUB ----------------------------------------- */
.hub-hero{padding:clamp(76px,10vw,124px) 0 clamp(72px,9vw,110px);}
.hub-hero h1{max-width:17ch;font-size:clamp(2.5rem,6.2vw,4.4rem);}
.hub-lead{color:#cfdcd7;font-size:clamp(1.04rem,1.7vw,1.2rem);line-height:1.68;max-width:52ch;margin:0 0 34px;}

/* the four route cards */
.routes{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:16px;}
.route{display:flex;flex-direction:column;gap:12px;padding:28px 28px 30px;}
.route .rnum{font-weight:700;font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep);}
.route h3{font-size:1.24rem;line-height:1.22;}
.route p{font-size:.95rem;line-height:1.6;margin:0;}
.route .more{margin-top:auto;padding-top:14px;display:inline-flex;align-items:center;gap:8px;
  font-size:.68rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#2f6b45;}
.route .more svg{width:14px;height:14px;transition:transform .3s var(--e-out);}
.route:hover .more svg{transform:translateX(3px);}

/* ---------- STATS -------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;}
.stat{padding:26px 26px 28px;}
.stat .num{font-family:var(--display);font-weight:700;font-size:2.8rem;line-height:1;
  color:var(--teal);letter-spacing:-.03em;}
.stat .desc{font-size:.96rem;line-height:1.58;margin:12px 0 10px;}
.stat .src{font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--olive-text);
  margin:0;font-weight:700;}

/* ---------- WRITTEN TESTIMONIALS ----------------------------- */
.quotes{display:grid;gap:16px;}
.tcard{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;padding:28px 30px 30px;}
@media(max-width:620px){.tcard{grid-template-columns:1fr;gap:14px;}}
.tcard .avatar img{width:64px;height:64px;border-radius:50%;object-fit:cover;display:block;
  border:2px solid rgba(255,255,255,.85);box-shadow:0 6px 18px -6px rgba(16,43,40,.4);}
.tcard blockquote{margin:0;font-size:1em;line-height:1.72;}
.tcard blockquote::before{content:"";display:block;width:26px;height:2px;background:var(--gold);margin-bottom:14px;}
.tcard .attr{margin:14px 0 0;font-family:var(--display);font-weight:700;color:var(--teal);font-size:1rem;}
.tcard .attr .r{font-family:var(--body);font-weight:500;color:var(--olive-text);font-size:.86rem;}

/* ---------- VIDEO WALL --------------------------------------- */
.vwall{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:12px;}
.vcard{position:relative;display:block;border-radius:14px;overflow:hidden;aspect-ratio:3/4;
  background:linear-gradient(158deg,rgba(30,76,71,.92),rgba(11,31,29,.96));
  box-shadow:var(--card-shadow);transition:transform .35s var(--e-out), box-shadow .35s var(--e-out);}
.vcard:hover{transform:translateY(-3px);box-shadow:var(--card-shadow-lift);}
.vcard img{width:100%;height:100%;object-fit:cover;display:block;}
.vcard .vmeta{position:absolute;left:0;right:0;bottom:0;padding:40px 14px 12px;
  background:linear-gradient(180deg,transparent,rgba(8,24,22,.9));color:#fff;}
.vcard .vname{display:block;font-family:var(--display);font-weight:700;font-size:.88rem;line-height:1.2;}
.vcard .vrole{display:block;font-size:.66rem;letter-spacing:.04em;color:#d3ded9;margin-top:3px;}
.vcard .vplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.92);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.35);transition:transform .3s var(--e-out);}
.vcard .vplay svg{width:15px;height:15px;margin-left:2px;color:var(--teal);}
.vcard:hover .vplay{transform:translate(-50%,-50%) scale(1.08);}

/* ---------- COMPARISON TABLE --------------------------------- */
.ctable{border-radius:16px;overflow:hidden;border:var(--card-brd);box-shadow:var(--card-shadow);
  background:var(--card-bg);
  -webkit-backdrop-filter:blur(16px) saturate(170%);backdrop-filter:blur(16px) saturate(170%);}
.ctable .row{display:grid;grid-template-columns:1.05fr 1fr 1.45fr;border-top:1px solid rgba(16,43,40,.07);}
.ctable .row:first-child{border-top:0;}
.ctable .row > div{padding:14px 18px;font-size:.92rem;line-height:1.55;}
.ctable .row.head > div{background:rgba(255,255,255,.45);font-family:var(--body);font-weight:700;
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);}
.ctable .k{font-family:var(--display);font-weight:700;color:var(--teal);}
.ctable .muted{color:var(--olive-text);}
.ctable .gap{color:#9d442d;font-weight:600;}
.ctable .focus{color:#2f6b45;font-weight:700;}
@media(max-width:760px){
  .ctable .row{grid-template-columns:1fr;padding-bottom:8px;}
  .ctable .row.head{display:none;}
  .ctable .row > div{padding-bottom:6px;}
  .ctable .row > div[data-l]::before{content:attr(data-l);display:block;font-size:.6rem;
    letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--olive-text);margin-bottom:4px;}
}

/* ---------- CALLOUT ------------------------------------------ */
.callout{border-radius:18px;padding:28px 32px;text-align:center;
  background:linear-gradient(158deg,rgba(201,168,76,.14),rgba(201,168,76,.06));
  border:1px solid rgba(201,168,76,.42);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);}
.callout .pre{font-family:var(--display);font-style:italic;color:var(--olive-text);
  font-size:1rem;margin:0 0 .5rem;}
.callout .big{font-family:var(--display);font-weight:700;color:var(--teal);
  font-size:clamp(1.15rem,2.2vw,1.46rem);line-height:1.34;margin:0;letter-spacing:-.015em;}

/* ---------- CHALLENGE CARDS ---------------------------------- */
.chal-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:14px;}
.chal{padding:26px 28px 28px;}
.chal .cnum{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,var(--teal),var(--teal-ink));color:#fff;
  font-family:var(--display);font-weight:700;font-size:.9rem;margin-bottom:12px;
  box-shadow:0 5px 14px -4px rgba(16,43,40,.5);}
.chal h3{font-size:1.08rem;margin-bottom:6px;}
.chal .cdesc{font-size:.9rem;line-height:1.55;color:var(--olive-text);margin:0 0 12px;}
.chal ul{list-style:none;margin:0;padding:0;}
.chal li{font-size:.89rem;line-height:1.55;padding:8px 0;border-top:1px solid rgba(16,43,40,.07);
  font-family:var(--display);font-style:italic;color:var(--teal);}
.chal li:first-child{border-top:0;}

/* ---------- SPEC ROWS (logistics) ---------------------------- */
.spec{border-radius:16px;overflow:hidden;border:var(--card-brd);box-shadow:var(--card-shadow);
  background:var(--card-bg);
  -webkit-backdrop-filter:blur(16px) saturate(170%);backdrop-filter:blur(16px) saturate(170%);}
.spec-row{display:grid;grid-template-columns:225px 1fr;border-top:1px solid rgba(16,43,40,.07);}
.spec-row:first-child{border-top:0;}
@media(max-width:620px){.spec-row{grid-template-columns:1fr;}}
.spec-k{padding:15px 22px;font-family:var(--display);font-weight:700;color:var(--teal);font-size:.94rem;
  background:rgba(255,255,255,.4);}
.spec-v{padding:15px 22px;font-size:.94rem;}
@media(max-width:620px){.spec-v{padding-top:2px;}}

/* ---------- FEATURE LIST ------------------------------------- */
.feats{display:grid;gap:12px;counter-reset:ft;}
.feat{counter-increment:ft;position:relative;padding:24px 28px 26px 74px;}
.feat::before{content:counter(ft,decimal-leading-zero);position:absolute;left:28px;top:25px;
  font-family:var(--display);font-weight:700;font-size:.94rem;color:var(--gold-deep);}
.feat h3{font-size:1.06rem;margin-bottom:6px;}
.feat p{font-size:.94rem;line-height:1.62;margin:0;}
@media(max-width:560px){.feat{padding:22px 22px 24px;}.feat::before{position:static;display:block;margin-bottom:8px;}}

/* ---------- FAQ ---------------------------------------------- */
.faq{display:grid;gap:10px;}
.faq details{border-radius:14px;overflow:hidden;border:var(--card-brd);box-shadow:var(--card-shadow);
  background:var(--card-bg);
  -webkit-backdrop-filter:blur(14px) saturate(170%);backdrop-filter:blur(14px) saturate(170%);}
.faq summary{list-style:none;cursor:pointer;padding:18px 24px;
  font-family:var(--display);font-weight:700;color:var(--teal);font-size:1rem;line-height:1.4;
  display:flex;align-items:flex-start;gap:14px;transition:background .25s var(--e-io);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary:hover{background:rgba(255,255,255,.4);}
.faq summary::after{content:"";flex-shrink:0;margin-left:auto;width:9px;height:9px;margin-top:7px;
  border-right:2px solid var(--gold-deep);border-bottom:2px solid var(--gold-deep);
  transform:rotate(45deg);transition:transform .3s var(--e-out);}
.faq details[open] summary::after{transform:rotate(-135deg);}
.faq .a{padding:0 24px 20px;font-size:.96rem;line-height:1.7;}

/* ---------- REFERENCES --------------------------------------- */
.reflist{list-style:none;margin:0;padding:0;}
.reflist li{padding:11px 0;border-top:1px solid rgba(16,43,40,.08);font-size:.87rem;line-height:1.6;
  color:var(--olive-text);}
.reflist li:first-child{border-top:0;}
.reflist .sup{color:var(--gold-deep);font-weight:700;margin-right:.4em;}
.reflist cite{font-style:italic;}

/* ---------- MISC --------------------------------------------- */
.two-lists{display:grid;grid-template-columns:1fr 1fr;gap:0 28px;}
@media(max-width:620px){.two-lists{grid-template-columns:1fr;}}
.two-lists .bullets{margin:0;}
.sig{font-size:.96rem;line-height:1.7;}

/* the site nav carries five destinations, so it needs the rail sooner */
@media(max-width:940px){
  .nav-inner{flex-wrap:wrap;padding-bottom:0;gap:0;}
  .navlinks{order:3;width:100%;overflow-x:auto;gap:2px;
    margin:0 calc(var(--gutter) * -1);padding:2px var(--gutter) 9px;
    scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);
            mask-image:linear-gradient(90deg,#000 88%,transparent);}
  .navlinks::-webkit-scrollbar{display:none;}
  .navpill{display:none;}
  .navlinks a[aria-current="page"]{
    background:linear-gradient(150deg,rgba(201,168,76,.30),rgba(201,168,76,.16));}
}
.navlinks a[aria-current="page"]{color:var(--teal);}

/* .btn.ghost is built for dark panels (white type). On light glass it
   needs the inverse, or it disappears. */
.btn.ghost.dark-on-light{
  color:var(--teal);background:rgba(255,255,255,.5);
  box-shadow:inset 0 0 0 1.5px rgba(30,76,71,.28), inset 0 1px 0 rgba(255,255,255,.8);}
.btn.ghost.dark-on-light:hover{
  color:var(--teal);background:rgba(255,255,255,.78);
  box-shadow:inset 0 0 0 1.5px rgba(30,76,71,.55), inset 0 1px 0 rgba(255,255,255,.9);}




































/* =============================================================
   TUNING PASS
   1. type scale brought back to standard sizes
   2. compositing cost cut so scrolling stays smooth
   3. the brand mark shown as designed, on light
   ============================================================= */

/* ---------- 1. TYPE ------------------------------------------ */
:root{
  /* was 20px at full width, which read as oversized. 17.5px is a
     normal long-form body size; the measure is in em so the line
     still lands at ~74 characters. */
  --body-size:clamp(16px,0.16vw + 14.6px,17.5px);
}
.hero h1{font-size:clamp(2.5rem,6.2vw,4.3rem);letter-spacing:-.032em;}
.hub-hero h1{font-size:clamp(2.35rem,5.6vw,3.9rem);}
.hero-deck,.hub-lead{font-size:clamp(1.06rem,1.65vw,1.28rem);}
.h2{font-size:clamp(1.78rem,3.3vw,2.45rem);}
h3{font-size:clamp(1.16rem,1.8vw,1.32rem);}
.lead{font-size:clamp(1.06rem,1.55vw,1.2rem);}
.section-sub{font-size:clamp(1rem,1.4vw,1.1rem);}
.stat .num{font-size:2.3rem;}
.closing h2{font-size:clamp(1.62rem,3vw,2.15rem);}
.route h3{font-size:1.14rem;}
.stage h3{font-size:1.22rem;}
.pullquote q{font-size:clamp(1.16rem,2.1vw,1.46rem);}
.callout .big{font-size:clamp(1.08rem,1.9vw,1.32rem);}
.tcard .attr{font-size:.95rem;}
.brand{font-size:.94rem;}

/* ---------- 2. COMPOSITING ----------------------------------- */
/* background-attachment:fixed repaints the whole gradient on every
   scroll frame. Painting it into the already-fixed aurora layer
   instead means the browser composites it once and never repaints. */
body{background:#e7eee9;background-attachment:scroll;}
.aurora::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(1200px 820px at 12% -8%,  rgba(71,128,88,.22), transparent 62%),
    radial-gradient(1000px 720px at 92% 6%,   rgba(201,168,76,.16), transparent 60%),
    radial-gradient(1100px 900px at 76% 98%,  rgba(30,76,71,.20),  transparent 64%),
    linear-gradient(168deg, #eff4f0 0%, #e3ebe6 38%, #ebf1ed 66%, #dde7e1 100%);
}
.aurora{contain:strict;}
/* a 90px blur on a 52vw box is the single most expensive thing on the
   page; smaller and softer reads the same but costs a fraction */
.aurora span{filter:blur(64px);opacity:.42;}

/* Keep real backdrop blur only where it is actually doing work: the
   sticky bar and the large reading panels. Every small card sat on a
   smooth gradient, where blurring it is visually indistinguishable
   from not blurring it - but each one forced its own backdrop pass. */
.gcard,.figure,.mtable,.ctable,.spec,.faq details,.gcream,.sn,.vcard{
  -webkit-backdrop-filter:none !important;
          backdrop-filter:none !important;
}
.gcard,.figure,.mtable,.ctable,.spec,.faq details{
  background:linear-gradient(158deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.74) 100%);
}
.gcream{background:linear-gradient(158deg,#fefaf0,#faf3df);}
.sn{background:linear-gradient(158deg,#fcfefd,#f2f7f4);}
/* the panels keep their blur, just a cheaper radius */
.glass{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);}
.gdark{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);}
.nav{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);}

/* hidden routes should cost nothing at all */
.view:not(.active){content-visibility:hidden;}

/* ---------- 3. BRAND MARK ------------------------------------ */
/* The logo is a sage-and-green mark drawn for light backgrounds.
   Boxing it in a dark teal tile inverted its context. */
.brand .mk{background:none;border-radius:0;padding:0;box-shadow:none;}
.brand .mk img{height:30px;width:auto;}
.brand:hover .mk{transform:translateY(-1px);}
.brand > span:last-child{white-space:nowrap;}
@media(max-width:420px){
  .brand > span:last-child{font-size:.86rem;}
  .brand .mk img{height:26px;}
}
/* on the dark footer the mark needs a light chip to read against */
.foot .brand-lg img{
  height:44px;width:auto;background:#fff;border-radius:10px;padding:6px 9px;box-sizing:border-box;
  box-shadow:0 6px 18px -6px rgba(0,0,0,.5);
}

/* the mark is square; pin it so it can never be flex-shrunk to nothing */
.brand .mk{flex:0 0 auto;}
/* the mark is the tightly cropped, transparent version (256x451), so it
   sits straight on the nav glass with no white box around it */
.brand .mk img{width:auto;height:34px;flex:0 0 auto;}
@media(max-width:420px){.brand .mk img{height:30px;}}

/* the hero chips each carried their own backdrop pass, on a smooth
   gradient where it makes no visible difference */
.hero-meta li{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,255,255,.13);}

/* display:none already skips rendering, so this was redundant */
.view:not(.active){content-visibility:visible;}

/* smaller type freed up line-length budget, so widen the measure to
   claw back page width: 38em at 17px measures ~72 characters. */
:root{--measure:38em;}

/* =============================================================
   WIDE DESKTOP PASS
   The block width used to be derived from the reading measure, which
   capped the whole page at ~790px - about 40% of a 1900px screen.
   Now the container is set independently and the measure is centred
   inside it, so prose stays readable while grids, tables and figures
   use the full width. The header shares the same token, so it widens
   with everything else.
   ============================================================= */
:root{
  --shell:min(1240px, 95vw);
  --pad-x:clamp(18px,3.2vw,52px);
  --measure:39em;            /* ~76 characters at 17px */
}

/* Centre the measure again. Left-aligning it made sense when the panel
   was only as wide as the text; in a wide container it would dump all
   the slack on one side. Centred, both insets stay equal, and a panel
   and a bare section resolve to the same text rail. */
.flow{
  grid-template-columns:
    [full-start] minmax(0,1fr)
    [text-start] min(100%, var(--measure)) [text-end]
    minmax(0,1fr) [full-end];
}
.shell > .flow{--lead:0px;}

/* card grids re-tuned so four-up sets land as 4, not 3 + an orphan */
.routes{grid-template-columns:repeat(auto-fit,minmax(min(238px,100%),1fr));}
.chal-grid{grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));}
.toc{grid-template-columns:repeat(auto-fit,minmax(min(215px,100%),1fr));}
.stats{grid-template-columns:repeat(auto-fit,minmax(min(215px,100%),1fr));}
.vwall{grid-template-columns:repeat(auto-fill,minmax(min(168px,100%),1fr));}
.feats{grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr));}
.quotes{grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));}
.timeline{grid-template-columns:1fr;}  /* it is a sequence, keep it linear */

/* =============================================================
   ALIGNMENT PASS
   In a wide container, centring the measure pushed headings and
   body copy inward while cards, tables and callouts ran the full
   width - so every section had a visible step. Text is now
   left-aligned to the same edge as those blocks: one left rail
   for the whole page. Paragraphs keep their measure, so only
   their right edge is short, which is just normal ragged text.
   ============================================================= */
.flow{
  grid-template-columns:
    [full-start text-start] min(100%, var(--measure)) [text-end]
    minmax(0,1fr) [full-end];
}

/* headings and button rows are short - let them use the whole width
   rather than wrapping early inside the measure */
.flow > .eyebrow,
.flow > .part-head,
.flow > .h2,
.flow > h2,
.flow > h3,
.flow > .section-sub,
.flow > .docbar{grid-column:full;}

/* the closing panel stays deliberately centred */
.closing .flow > *{grid-column:full;}

/* =============================================================
   EDITORIAL RAIL (v2 - section groups)
   Every panel is the same width. On desktop a reading panel splits
   in two: the heading block sits in a left rail, copy fills the
   right, and tables, figures and card grids span both.
   The build wraps each heading block with the copy it introduces
   (.sg = .sh + .sb). The heading pins while its own section is on
   screen and stops where that section ends - it can never slide over
   the next heading or a table, because its section contains it.
   Every rail item behaves the same: label, heading or both, it pins.
   ============================================================= */
:root{--pad-x:clamp(20px,4.4vw,64px);}
.callout,.reflist,.two-lists,.faq{width:100%;}

h1,h2,h3,.h2{text-wrap:balance;}
.h2{font-size:clamp(1.7rem,2.6vw,2.2rem);line-height:1.08;}
.flow p,.flow li{text-wrap:pretty;}

/* the copy column of a group is its own reading flow */
.sb.flow{grid-template-columns:[full-start text-start] minmax(0,1fr) [text-end full-end];}
.flow > .sg,.flow > .stack{grid-column:full;}

/* a subtitle carries its own bottom margin; in a grid it would stack with
   the next block's top margin, so the flow owns the spacing instead */
.flow > .section-sub{margin-bottom:0;}
.flow > .section-sub + *{margin-top:1rem;}
.flow > .section-sub.stack + .wide{margin-top:1.6rem;}

/* heading block */
.sh > *{margin:0;}
.sh > :is(.eyebrow,.part-head) + *{margin-top:.75rem;}
.sh > .eyebrow{align-items:flex-start;line-height:1.55;}
.sh > .eyebrow::before{margin-top:.62em;flex:0 0 auto;}
.sh .h2{margin-bottom:0;}

/* rhythm between blocks at panel level */
.flow > .sg + .sg{margin-top:2.7rem;}
.flow > :is(.sg,.stack) + .wide,
.flow > .wide + :is(.sg,.stack){margin-top:2.1rem;}
.flow > .stack + .wide{margin-top:1.6rem;}

@media (min-width:960px){
  :is(.glass > .flow, .shell > .flow){
    grid-template-columns:
      [full-start head-start] 31% [head-end] clamp(2.5rem,4vw,4rem)
      [text-start] minmax(0,1fr) [text-end full-end];
  }
  /* a bare section has no padding of its own: its heading stays on the
     card edge, while its copy column lines up with the copy in panels */
  .shell > .flow{
    grid-template-columns:
      [full-start head-start] calc(var(--pad-x) + (100% - (var(--pad-x) * 2)) * .31)
      [head-end] clamp(2.5rem,4vw,4rem)
      [text-start] minmax(0,1fr) [text-end] var(--pad-x) [full-end];
  }
  .flow > .sg{display:grid;grid-template-columns:subgrid;align-items:start;}
  .sg > .sh{grid-column:head;container-type:inline-size;}
  /* a heading pins only in a section taller than the screen - the one case
     where it would scroll away while its copy is still being read. The
     page measures each section (.pin) on load and on resize. */
  .sg.pin > .sh{position:sticky;top:96px;}
  /* a rail heading is sized to its column, so it holds to three lines at any width */
  .sh .h2{font-size:clamp(1.5rem,10.5cqi,2.2rem);}
  .sg > .sb{grid-column:text;}
}

@media (max-width:959.98px){
  .flow{grid-template-columns:[full-start text-start] minmax(0,1fr) [text-end full-end];}
  .sg > .sh + .sb{margin-top:.7rem;}
  .flow > .sg + .sg{margin-top:2.2rem;}
}

/* =============================================================
   ON THIS PAGE
   Desktop: its own column left of the panels, pinned for the whole
   page, marking the section in view. The page container widens to
   make room, so the panels keep almost all of their width.
   Smaller screens: a compact menu at the top of the page.
   ============================================================= */
.otp{display:none;}
.otp-t{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  color:var(--gold-deep);margin:0 0 14px;}
.otp ol,.otp-m ol{list-style:none;margin:0;padding:0;}
.otp ol{border-left:1px solid rgba(16,43,40,.13);}
.otp a{display:block;padding:7px 0 7px 16px;margin-left:-1px;border-left:2px solid transparent;
  font-size:.84rem;line-height:1.4;color:rgba(16,43,40,.66);text-decoration:none;
  transition:color .25s var(--e-out), border-color .25s var(--e-out);}
.otp a:hover{color:var(--teal);}
.otp a.on{color:var(--teal-ink);font-weight:600;border-left-color:var(--gold);}

.otp-m{max-width:var(--shell);width:calc(100% - (var(--gutter) * 2));margin:0 auto calc(var(--gap) * -.55);
  border-radius:16px;background:var(--card-bg);border:var(--card-brd);box-shadow:var(--card-shadow);}
.otp-m summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;
  padding:14px 20px;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--gold-deep);}
.otp-m summary::-webkit-details-marker{display:none;}
.otp-m summary::after{content:"";width:8px;height:8px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translateY(-3px);transition:transform .25s var(--e-out);}
.otp-m[open] summary::after{transform:rotate(-135deg) translateY(-1px);}
.otp-m ol{padding:0 8px 10px;}
.otp-m a{display:block;padding:10px 12px;border-top:1px solid rgba(16,43,40,.07);font-size:.92rem;
  color:var(--teal);text-decoration:none;}

@media (min-width:1280px){
  :root{--shell:min(1480px, 96vw);}
  main.has-otp{display:grid;grid-template-columns:clamp(180px,13vw,210px) minmax(0,1fr);
    column-gap:clamp(28px,2.6vw,44px);row-gap:var(--gap);align-items:start;
    max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter);}
  main.has-otp > section{grid-column:2;}
  main.has-otp > section > .shell{max-width:none;padding-inline:0;}
  main.has-otp > .otp{display:block;grid-column:1;align-self:stretch;}
  main.has-otp > .otp-m{display:none;}
  .otp-in{position:sticky;top:96px;}
}
main > section{scroll-margin-top:88px;}

/* =============================================================
   HEROES - one scene per page, the rocket in every one
   ============================================================= */
.hero > .shell{position:relative;z-index:3;}
/* the fade into the page sits over the scene, so the scene melts into the page too */
.hero::after{z-index:2;}
.hero-art{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;}
.hero-rk{transform-box:fill-box;transform-origin:50% 50%;
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.42));animation:rkfloat 9s ease-in-out infinite;}
@keyframes rkfloat{0%,100%{transform:translate(0,0) rotate(0deg);}50%{transform:translate(3px,-9px) rotate(-1.5deg);}}
@media (prefers-reduced-motion:reduce){.hero-rk{animation:none;}}

.hero--possibility{background:
  radial-gradient(720px 520px at 80% 18%, rgba(201,168,76,.13), transparent 62%),
  radial-gradient(760px 540px at 6% 92%, rgba(11,31,29,.75), transparent 66%),
  linear-gradient(162deg,#0f2d2b 0%,#173f3b 50%,#20504a 100%);}
.hero--program{background:
  radial-gradient(820px 600px at 78% 40%, rgba(96,150,98,.36), transparent 62%),
  radial-gradient(760px 540px at 6% 92%, rgba(11,31,29,.75), transparent 66%),
  linear-gradient(162deg,#10302b 0%,#1b4a3d 50%,#295c46 100%);}
.hero--pilot{background:
  radial-gradient(760px 560px at 84% 30%, rgba(201,168,76,.16), transparent 60%),
  radial-gradient(760px 540px at 6% 92%, rgba(11,31,29,.75), transparent 66%),
  linear-gradient(162deg,#0e2a2b 0%,#163c3e 50%,#214c4b 100%);}
.hero--proof{background:
  radial-gradient(700px 520px at 80% 34%, rgba(201,168,76,.15), transparent 60%),
  radial-gradient(760px 540px at 6% 92%, rgba(8,24,22,.8), transparent 66%),
  linear-gradient(162deg,#0b2321 0%,#123431 50%,#1b443f 100%);}

/* phones: the scene sits behind the text, so it steps back */
/* phones: the scene gets its own band above the text instead of sitting behind it */
@media (max-width:880px){
  .hero{padding-top:188px;}
  .hero-art{inset:0 0 auto auto;width:100%;height:196px;opacity:1;
    -webkit-mask-image:linear-gradient(180deg,#000 62%,transparent);mask-image:linear-gradient(180deg,#000 62%,transparent);}
}

/* 3. timeline: one hairline, a gold node per phase, no card chrome */
.timeline{position:relative;gap:0;padding-left:34px;}
.timeline::before{content:"";position:absolute;left:6px;top:10px;bottom:10px;width:1px;
  background:linear-gradient(180deg,var(--gold) 0%,rgba(201,168,76,.35) 100%);}
.timeline > .phase{
  background:none;border:0;border-radius:0;box-shadow:none;overflow:visible;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  padding:0 0 1.9rem;position:relative;
}
.timeline > .phase:last-child{padding-bottom:0;}
.timeline > .phase:hover{transform:none;box-shadow:none;}
.timeline > .phase::after{display:none;}
.timeline > .phase::before{content:"";position:absolute;left:-33px;top:.55rem;width:13px;height:13px;
  border-radius:50%;background:var(--paper,#fbfaf6);border:2px solid var(--gold);box-sizing:border-box;}
.timeline .pk{background:none;border:0;padding:0;box-shadow:none;}
.timeline .pk .dot{display:none;}
.timeline .phase-body{margin-top:.35rem;}
.timeline .phase-body h3{margin:0;}
.timeline .phase-body h3 + p{margin-top:.35rem;}

/* 4. spec rows sized for the copy column */
.spec{width:100%;}
@media (min-width:621px){.spec-row{grid-template-columns:minmax(140px,30%) 1fr;}}
.timeline .pk{color:var(--gold-deep);}

.timeline .pk{color:var(--gold-deep);}


/* =============================================================
   BACK TO TOP - appears once the hero is behind you
   ============================================================= */
.totop{position:fixed;right:clamp(16px,2.4vw,32px);bottom:clamp(16px,2.4vw,32px);z-index:60;
  width:48px;height:48px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  color:var(--teal-ink);background:rgba(255,255,255,.82);border:1px solid rgba(16,43,40,.1);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:0 10px 28px -10px rgba(16,43,40,.45),0 2px 6px rgba(16,43,40,.08);
  opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity .3s var(--e-out),transform .3s var(--e-out),box-shadow .3s var(--e-out),color .2s;}
.totop.show{opacity:1;transform:none;pointer-events:auto;}
.totop:hover{transform:translateY(-2px);box-shadow:0 14px 32px -10px rgba(16,43,40,.5),0 2px 6px rgba(16,43,40,.1);color:var(--teal);}
.totop:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
.totop svg{width:20px;height:20px;}
@media (prefers-reduced-motion:reduce){.totop{transition:opacity .2s;transform:none;}}
@media print{.totop{display:none;}}

/* =============================================================
   VIDEO TILES - the recordings carry burned-in captions near the
   bottom of the frame; a deeper scrim keeps the name and role clean
   ============================================================= */
/* the play badge moves to the corner so the faces carry the tile */
.vcard .vplay{left:auto;top:12px;right:12px;width:34px;height:34px;transform:none;}
.vcard .vplay svg{width:12px;height:12px;}
.vcard:hover .vplay{transform:scale(1.08);}
.vcard .vmeta{padding:72px 14px 13px;
  background:linear-gradient(180deg,rgba(8,24,22,0) 0%,rgba(8,24,22,.8) 42%,rgba(8,24,22,.95) 100%);}

/* =============================================================
   ONE SYSTEM - measured, not eyeballed
   Labels: two designs (leading rule vs trailing rule) and two sizes
   (a paragraph rule was inflating some to body size). Now one label.
   Section headings: four sizes. Now one. Cards: 26/28/30px padding
   on identical cards. Now 28px.
   ============================================================= */
.eyebrow,.flow .eyebrow,.closing .eyebrow,.part-num{
  font-size:.78rem;letter-spacing:.2em;font-weight:700;line-height:1.5;text-transform:uppercase;}
.part-head{gap:.7rem;margin:0;align-items:center;}
.part-head::before{content:"";width:26px;height:1px;background:var(--gold);flex:0 0 auto;}
.part-head .rule{display:none;}
.flow > .part-head + *{margin-top:.2rem;}
.sh > .part-head{align-items:flex-start;}
.sh > .part-head::before{margin-top:.62em;}

.h2,.closing h2{font-size:clamp(1.55rem,2.3vw,2.05rem);line-height:1.1;}
@media (min-width:960px){
  /* in the rail the heading still yields to its column when that is narrow */
  .sh .h2{font-size:min(clamp(1.55rem,2.3vw,2.05rem), max(1.4rem, 11.1cqi));}
}
.closing .eyebrow{margin-bottom:.9rem;}

/* plain cards only - numbered and icon cards keep their own left inset */
.stat,.chal,.tcard,.route,.two > .gcard{padding:28px;}

/* TESTIMONIALS FLOW - quotes differ in length, so they flow into two
   balanced columns instead of a grid with ragged gaps and an orphan */
.quotes{display:block;columns:2 380px;column-gap:16px;}
.quotes > .tcard{break-inside:avoid;margin:0 0 16px;width:100%;}

/* PHONE VIDEO WALL - two up, so 18 tiles are a short scroll, not 5,800px */
@media (max-width:620px){.vwall{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .vcard .vname{font-size:.8rem;}.vcard .vrole{font-size:.62rem;}.vcard .vmeta{padding:56px 10px 10px;}
  .vcard .vplay{top:8px;right:8px;width:30px;height:30px;}}

/* DIAGRAM SCROLL - phones swipe the diagram at a legible size */
@media (max-width:700px){
  .fig-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;border-radius:12px;scrollbar-width:thin;}
  .fig-scroll > img{width:720px;max-width:none;height:auto;}
  .figure figcaption::after{content:" - swipe to see the whole diagram";color:var(--gold-deep);font-weight:600;}
}
.fig-scroll:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}

/* =============================================================
   TEAM ADDITIONS - route-card questions and the highlight quote
   ============================================================= */
.route .rq{font-family:var(--display);font-style:italic;color:var(--olive-text);font-size:1.02rem;line-height:1.4;margin:-4px 0 0;}
.route .more.quiet{color:var(--olive-text);}
.hq{margin:0 0 16px;padding:2px 0 2px 16px;border-left:2px solid var(--gold);}
.hq blockquote{margin:0;font-family:var(--display);font-style:italic;font-size:1.02rem;line-height:1.4;color:var(--teal-ink);}
.hq figcaption{margin-top:10px;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--gold-deep);}
.hq-m{max-width:var(--shell);width:calc(100% - (var(--gutter) * 2));margin:0 auto 18px;box-sizing:border-box;}
.hq-m{padding-left:18px;}
.hq-m blockquote{font-size:clamp(1.3rem,4.6vw,1.6rem);line-height:1.3;}
.hq-m figcaption{margin-top:12px;font-size:.7rem;letter-spacing:.16em;}
@media (min-width:1280px){main.has-otp > .hq-m{grid-column:2;grid-row:1;width:auto;max-width:none;margin:0 0 calc(var(--gap) * -.3);padding:4px 0 4px 22px;}
main.has-otp > .hq-m blockquote{font-size:clamp(1.4rem,1.9vw,1.85rem);line-height:1.3;max-width:34ch;}
main.has-otp > .hq-m figcaption{margin-top:12px;font-size:.72rem;letter-spacing:.16em;}
}
@media (min-width:640px){#s-home-0 .routes{grid-template-columns:repeat(2,minmax(0,1fr));}
}


/* =============================================================
   VIDEO - click to play. Only the thumbnail loads with the page;
   the YouTube player (and its tracking) is added on click.
   ============================================================= */
.videobox{margin:0;}
.video{position:relative;width:100%;aspect-ratio:16/9;background:#0d2321;
  border-radius:20px;overflow:hidden;border:var(--card-brd);box-shadow:var(--card-shadow);}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.facade{position:absolute;inset:0;display:block;width:100%;padding:0;border:0;cursor:pointer;
  background:#0d2321;font:inherit;}
.facade img{width:100%;height:100%;object-fit:cover;display:block;}
.facade::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(13,35,33,.12) 0%,rgba(13,35,33,.2) 55%,rgba(8,24,22,.78) 100%);}
.facade .play{position:absolute;left:50%;top:50%;z-index:2;transform:translate(-50%,-50%);
  width:84px;height:84px;border-radius:50%;background:rgba(255,255,255,.94);
  display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(0,0,0,.32);
  transition:transform .3s var(--e-out),background .3s var(--e-out);}
.facade .play svg{width:30px;height:30px;margin-left:5px;color:var(--teal);}
.facade:hover .play,.facade:focus-visible .play{transform:translate(-50%,-50%) scale(1.08);background:#fff;}
.facade:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
.facade .vlabel{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px 26px;text-align:left;
  color:#fff;font-family:var(--display);font-weight:600;font-size:1.2rem;line-height:1.3;}
.facade .vlabel small{display:block;margin-bottom:5px;font-family:var(--body);font-weight:700;
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-lit);}
.vcap{margin:14px 2px 0;font-size:.92rem;line-height:1.6;color:var(--olive-text);max-width:62ch;}
@media (max-width:560px){
  .facade .play{width:62px;height:62px;}
  .facade .play svg{width:22px;height:22px;}
  .facade .vlabel{padding:14px 16px;font-size:1rem;}
  /* the recording has burned-in subtitles near the bottom; mute them behind the label */
  .facade::after{background:linear-gradient(180deg,rgba(13,35,33,.1) 0%,rgba(13,35,33,.25) 45%,rgba(8,24,22,.93) 100%);}
}
@media (prefers-reduced-motion:reduce){.facade .play{transition:none;}}

/* =============================================================
   ROI CALCULATOR
   The calculator itself is built by assets/calculator.js (questions,
   maths and submission unchanged). Everything here is scoped to its
   pages so it cannot leak into the rest of the site.
   ============================================================= */
.hero--roi{background:
  radial-gradient(760px 560px at 84% 34%, rgba(201,168,76,.15), transparent 60%),
  radial-gradient(760px 540px at 6% 92%, rgba(11,31,29,.75), transparent 66%),
  linear-gradient(162deg,#0e2a2b 0%,#173f3c 50%,#22504a 100%);}
.hero-lead{max-width:60ch;margin:0 0 6px;color:#cfdcd7;}
.hero-lead p{margin:0 0 .9em;font-size:clamp(1rem,1.4vw,1.1rem);line-height:1.7;}
.choose{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
@media (max-width:760px){.choose{grid-template-columns:1fr;}}
.choice h3{font-size:1.3rem;}
.roi-steps{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));}

/* the calculator page: a focused form panel, not the reading layout */
.calc-page main{padding-top:clamp(28px,4vw,48px);}
.calc-crumb{max-width:880px;margin:0 auto 14px;font-size:.78rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-deep);display:flex;gap:10px;align-items:center;}
.calc-crumb a{color:var(--teal);text-decoration:none;}
.calc-crumb a:hover{text-decoration:underline;}
.calc-crumb span{color:var(--olive-text);}
.calc-panel{max-width:880px;margin-inline:auto;}
#calc.calcwrap,#calc .calcwrap{max-width:none;margin:0;padding:0;}
#calc .band{padding:0;}

/* step indicator - not the nav's reading bar, which shares the class name */
#calc .progress{position:static;display:flex;gap:6px;width:auto;height:auto;margin:0 0 34px;
  transform:none;background:none;will-change:auto;}
#calc .progress i{flex:1;height:4px;border-radius:2px;background:rgba(16,43,40,.1);transition:background .35s;}
#calc .progress i.on{background:linear-gradient(90deg,var(--green),var(--gold));}

#calc .step{display:none;}
#calc .step.on{display:block;animation:calcstep .35s var(--e-out);}
@keyframes calcstep{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
#calc .stepmeta{font-size:.78rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-deep);margin-bottom:10px;}
#calc .step h2{font-family:var(--display);font-weight:700;color:var(--teal-ink);
  font-size:clamp(1.55rem,2.3vw,2.05rem);line-height:1.1;margin:0 0 16px;text-wrap:balance;}
#calc .step > p{margin:0 0 1em;line-height:1.75;color:var(--ink);}

#calc .field{margin:0 0 30px;}
#calc .qnum{display:block;margin-bottom:6px;font-size:.72rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-deep);}
#calc .qlabel{display:block;margin-bottom:8px;font-family:var(--display);font-weight:600;
  font-size:1.12rem;line-height:1.45;color:var(--teal);}
#calc .help{margin:0 0 10px;font-size:.92rem;line-height:1.6;color:var(--olive-text);}
#calc input[type=text],#calc input[type=email],#calc input[type=number],#calc textarea{
  width:100%;box-sizing:border-box;font:inherit;font-size:1rem;color:var(--ink);
  background:rgba(255,255,255,.88);border:1.5px solid rgba(16,43,40,.16);border-radius:12px;padding:13px 15px;
  -webkit-appearance:none;appearance:none;transition:border-color .2s,box-shadow .2s;}
#calc textarea{min-height:118px;resize:vertical;line-height:1.6;}
#calc input:focus,#calc textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(201,168,76,.28);}
#calc input.err,#calc textarea.err{border-color:#a33a2a;}
#calc .money{position:relative;}
#calc .money input{padding-left:32px;}
#calc .money::before{content:"$";position:absolute;left:15px;top:50%;transform:translateY(-50%);
  color:var(--olive-text);pointer-events:none;}
#calc .errmsg{display:none;margin-top:7px;font-size:.86rem;font-weight:600;color:#a33a2a;}
#calc .errmsg.on{display:block;}

#calc .choices{display:grid;gap:10px;}
#calc .choices label{display:flex;align-items:flex-start;gap:12px;cursor:pointer;padding:15px 17px;
  font-size:.97rem;line-height:1.5;color:var(--ink);background:rgba(255,255,255,.72);
  border:1.5px solid rgba(16,43,40,.12);border-radius:12px;transition:border-color .2s,background .2s;}
#calc .choices label:hover{border-color:rgba(16,43,40,.3);background:#fff;}
#calc .choices input{appearance:none;-webkit-appearance:none;flex-shrink:0;width:19px;height:19px;margin:1px 0 0;
  border:2px solid rgba(16,43,40,.3);border-radius:50%;transition:border-color .2s,border-width .2s;}
#calc .choices input:checked{border-color:var(--teal);border-width:6px;}
#calc .choices input:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
#calc .choices label:has(input:checked){border-color:var(--teal);background:#f1f7f3;}

#calc .stepnav{display:flex;align-items:center;gap:12px;margin-top:34px;padding-top:24px;
  border-top:1px solid rgba(16,43,40,.1);}
#calc .stepnav .spacer{flex:1;}
#calc button.btn{cursor:pointer;font:inherit;font-weight:700;}
#calc .btn.lg{padding:15px 30px;font-size:.95rem;}
#calc .btn.back{background:none;box-shadow:none;color:var(--olive-text);padding-left:4px;}
#calc .btn.back:hover{color:var(--teal);transform:none;}
#calc .btn.back::before{content:"\2190";margin-right:4px;}
#calc .btn[disabled]{opacity:.7;cursor:progress;}

/* results */
#calc .results-top{padding:0;}
#calc .results-thanks{margin:0 0 18px;text-align:center;font-family:var(--display);
  font-size:clamp(1.2rem,2.2vw,1.55rem);line-height:1.35;color:var(--teal);}
#calc .headline{margin:30px 0;padding:34px 28px;text-align:center;border-radius:18px;
  background:rgba(255,255,255,.72);border:1px solid rgba(16,43,40,.1);}
#calc .headline .hk{margin-bottom:12px;font-size:.72rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--olive-text);}
#calc .headline .fig{font-family:var(--display);font-weight:700;line-height:1;letter-spacing:-.02em;
  font-size:clamp(2.3rem,6.4vw,3.6rem);color:var(--teal-ink);}
#calc .headline .per{margin-top:10px;font-size:.95rem;letter-spacing:.04em;color:var(--olive-text);}
/* the first headline is the answer: dark, like the site's closing panels */
#calc .results-top > .calcwrap > .headline{margin:0 0 30px;border:0;
  background:radial-gradient(420px 220px at 80% 0%, rgba(201,168,76,.22), transparent 70%),
    linear-gradient(160deg,#173f3b,#0f2c2a);box-shadow:0 20px 44px -22px rgba(8,24,22,.7);}
#calc .results-top > .calcwrap > .headline .hk{color:var(--gold-lit);}
#calc .results-top > .calcwrap > .headline .fig{color:#fff;}
#calc .results-top > .calcwrap > .headline .per{color:rgba(238,244,240,.8);}
#calc .rsec{margin-top:40px;}
#calc .rsec h3{margin:0 0 10px;font-family:var(--display);font-size:1.3rem;color:var(--teal-ink);}
#calc .rsec p{line-height:1.75;}
#calc .mgrid{display:grid;grid-template-columns:repeat(4,1fr);margin:22px 0;border-radius:14px;overflow:hidden;
  background:rgba(255,255,255,.85);border:1px solid rgba(16,43,40,.1);}
#calc .metric{padding:20px 18px;border-right:1px solid rgba(16,43,40,.08);}
#calc .metric:last-child{border-right:0;}
#calc .metric .mv{font-family:var(--display);font-weight:700;font-size:1.4rem;line-height:1.15;color:var(--teal);
  overflow-wrap:anywhere;}
#calc .metric .ml{margin-top:5px;font-size:.82rem;line-height:1.4;color:var(--olive-text);}
@media (max-width:760px){
  #calc .mgrid{grid-template-columns:1fr 1fr;}
  #calc .metric{border-bottom:1px solid rgba(16,43,40,.08);}
  #calc .metric:nth-child(2n){border-right:0;}
}
@media (max-width:420px){#calc .mgrid{grid-template-columns:1fr;}#calc .metric{border-right:0;}}
#calc .note{margin:28px 0;padding:22px 26px;border-radius:14px;font-size:.95rem;line-height:1.65;
  background:linear-gradient(150deg,rgba(248,241,222,.9),rgba(244,236,214,.85));border:1px solid rgba(201,168,76,.3);}
#calc .note p{margin:0 0 .8em;}
#calc .note p:last-child{margin-bottom:0;}
#calc .echo{margin:14px 0;padding:14px 20px;font-family:var(--display);font-style:italic;font-size:1.1rem;
  line-height:1.5;color:var(--teal);background:rgba(255,255,255,.8);border-left:3px solid var(--gold);
  border-radius:0 12px 12px 0;}
#calc .flash{margin:0 0 22px;padding:14px 18px;border-radius:12px;font-size:.94rem;line-height:1.55;}
#calc .flash.ok{background:#eef5f0;border:1px solid #bfd8c8;color:var(--teal);}
#calc .flash.warn{background:#fdf3ec;border:1px solid #e8c9ad;color:#8a4b25;}
#calc .docbar{display:flex;flex-wrap:wrap;gap:12px;}
/* the Print button sits on a light panel: dark text, not the white-on-dark ghost */
#calc .btn.ghost{color:var(--teal);background:rgba(255,255,255,.55);
  box-shadow:inset 0 0 0 1.5px rgba(30,76,71,.28), inset 0 1px 0 rgba(255,255,255,.8);}
#calc .btn.ghost:hover{background:rgba(255,255,255,.8);box-shadow:inset 0 0 0 1.5px rgba(30,76,71,.55);}
@media (max-width:560px){
  #calc .stepnav{flex-wrap:wrap;}
  #calc .btn.lg{padding:14px 22px;}
}
@media (prefers-reduced-motion:reduce){#calc .step.on{animation:none;}}

/* printing the results: just the results, on white */
@media print{
  .calc-crumb,#calc .stepnav,#calc .docbar,#calc .flash,.nav,.foot,.aurora,.totop,.skip{display:none!important;}
  body{background:#fff!important;}
  .calc-panel{box-shadow:none!important;border:0!important;background:#fff!important;padding:0!important;
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important;}
  #calc .results-top > .calcwrap > .headline{background:#fff!important;border:2px solid #1e4c47!important;box-shadow:none!important;}
  #calc .results-top > .calcwrap > .headline .fig,#calc .results-top > .calcwrap > .headline .hk,
  #calc .results-top > .calcwrap > .headline .per{color:#000!important;}
  #calc .rsec{break-inside:avoid;}
}

/* the highlight quote carries its speaker: a small round photo beside the name */
.hq figcaption{display:flex;align-items:center;gap:12px;}
.hq-av{width:44px;height:44px;flex:0 0 auto;border-radius:50%;object-fit:cover;border:2px solid #fff;box-shadow:0 4px 14px -4px rgba(16,43,40,.35);}
@media (min-width:1280px){main.has-otp > .hq-m .hq-av{width:52px;height:52px;}}

/* the highlight quote inside the Home hero: light on the dark field, clear of the fade */
.hub-hero:has(.hq-hero){padding-bottom:clamp(128px,17vw,212px);}
.hq-hero{margin:4px 0 0;padding:4px 0 4px 20px;border-left-color:var(--gold-lit);max-width:44ch;}
.hq-hero blockquote{color:#fff;font-size:clamp(1.15rem,1.6vw,1.4rem);line-height:1.4;}
.hq-hero figcaption{color:var(--gold-lit);font-size:.72rem;letter-spacing:.16em;}
.hq-hero .hq-av{width:46px;height:46px;border-color:rgba(255,255,255,.85);box-shadow:0 6px 18px -6px rgba(0,0,0,.5);}

/* compact numbered signs (The Possibility: How to Know a Challenge Is Adaptive) */
.signs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
@media (max-width:720px){.signs{grid-template-columns:1fr;}}
.gcard.sign{display:flex;gap:14px;align-items:center;padding:18px 22px;}
.sign .cnum{flex:none;width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,var(--teal),var(--teal-ink));color:#fff;
  font-family:var(--display);font-weight:700;font-size:.85rem;box-shadow:0 5px 14px -4px rgba(16,43,40,.5);}
.sign p{margin:0;font-size:.95rem;line-height:1.55;}
.sign strong{color:var(--teal);}
.sign p{font-family:var(--display);font-style:italic;color:var(--teal);font-size:1.02rem;}

/* The Possibility opening stats: headline figure, gold accent */
.stats-pop .stat{position:relative;padding-top:34px;}
.stats-pop .stat::before{content:"";position:absolute;left:28px;top:0;width:44px;height:4px;
  border-radius:0 0 4px 4px;background:linear-gradient(90deg,var(--gold),var(--gold-lit));}
.stats-pop .num{font-size:clamp(3rem,5vw,3.8rem);}
.stats-pop .desc{font-size:1rem;margin:14px 0 14px;}

/* =============================================================
   VIDEO PLAYER - The Proof's testimonials, set in a dark "screening
   room" panel: one centred player, then a looping carousel of the
   leaders. The picked card slides to the middle; the cards either
   side step back. Built by assets/site.js.
   ============================================================= */
.vplayer{--card-w:clamp(186px,15.5vw,212px);
  padding:clamp(16px,2.4vw,30px) clamp(14px,3vw,40px) clamp(14px,2vw,24px);border-radius:28px;overflow:hidden;
  background:radial-gradient(900px 420px at 50% -12%, rgba(201,168,76,.17), transparent 64%), var(--dark-bg);}
.vp-stage{position:relative;z-index:1;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#0a1d1b;
  box-shadow:0 0 0 1px rgba(255,255,255,.09), 0 34px 70px -30px rgba(0,0,0,.75);}
.vp-stage mux-player{position:absolute;inset:0;width:100%;height:100%;--media-object-fit:contain;}
.vp-facade{position:absolute;inset:0;padding:0;border:0;margin:0;cursor:pointer;background:#0a1d1b;display:block;width:100%;}
.vp-facade img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--e-out);}
.vp-facade::after{content:"";position:absolute;inset:0;background:radial-gradient(closest-side,rgba(8,24,22,0) 60%,rgba(8,24,22,.35));}
.vp-facade:hover img{transform:scale(1.025);}
.vp-big{position:absolute;left:50%;top:50%;z-index:1;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;
  display:grid;place-items:center;background:rgba(255,255,255,.95);color:var(--teal);
  box-shadow:0 0 0 10px rgba(255,255,255,.14), 0 16px 36px -10px rgba(0,0,0,.6);transition:transform .3s var(--e-out),box-shadow .3s;}
.vp-big svg{width:32px;height:32px;margin-left:5px;}
.vp-facade:hover .vp-big{transform:scale(1.06);box-shadow:0 0 0 14px rgba(255,255,255,.18), 0 16px 36px -10px rgba(0,0,0,.6);}
.vp-facade:focus-visible{outline:3px solid var(--gold-lit);outline-offset:-3px;}
.vp-wait{position:absolute;left:50%;top:50%;z-index:2;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;
  border:3px solid rgba(255,255,255,.3);border-top-color:#fff;animation:vpspin .8s linear infinite;}
@keyframes vpspin{to{transform:rotate(360deg);}}

/* the label over the carousel: what to do, and where you are */
.vplayer .vp-count{display:flex;align-items:center;justify-content:center;gap:14px;margin:clamp(16px,2vw,24px) 0 8px;
  font-size:.7rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-lit);}
.vp-count::before,.vp-count::after{content:"";width:34px;height:1px;background:rgba(220,192,119,.5);}
.vp-num{color:rgba(238,244,240,.6);letter-spacing:.12em;font-variant-numeric:tabular-nums;}

/* the carousel */
.vp-rail{position:relative;}
.vp-view{overflow:hidden;overflow:clip;padding:6px 0 4px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);}
.vp-track{list-style:none;margin:0;padding:0;display:flex;gap:18px;width:max-content;align-items:stretch;
  transition:transform .6s var(--e-out);will-change:transform;touch-action:pan-y;}
.vp-track li{flex:0 0 var(--card-w);display:flex;}
.vp-item{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%;margin:0;padding:8px 8px 12px;
  border:1px solid transparent;border-radius:16px;cursor:pointer;text-align:center;font:inherit;color:inherit;background:transparent;
  opacity:.5;transform:scale(.9);transition:opacity .45s var(--e-out),transform .6s var(--e-out),background .3s,border-color .3s;}
.vp-item:hover{opacity:.8;}
.vp-item.is-center{opacity:1;transform:none;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);}
.vp-item:focus-visible{outline:2px solid var(--gold-lit);outline-offset:2px;}
.vp-thumb{position:relative;width:100%;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#173f3b;margin-bottom:5px;
  box-shadow:0 14px 26px -16px rgba(0,0,0,.8);}
.vp-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.vp-mini{position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;
  display:grid;place-items:center;color:#fff;border:1.5px solid rgba(255,255,255,.9);background:rgba(10,29,27,.35);
  transition:transform .25s var(--e-out),background .25s;}
.vp-mini svg{width:15px;height:15px;margin-left:2px;}
.vp-item:hover .vp-mini{transform:scale(1.08);background:rgba(201,168,76,.55);}
.vp-on{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  background:rgba(10,29,27,.62);color:#fff;font-size:.6rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;}
.vp-on::before{content:"";width:22px;height:14px;
  background:linear-gradient(var(--gold-lit),var(--gold-lit)) 0 100%/4px 60% no-repeat,
             linear-gradient(var(--gold-lit),var(--gold-lit)) 50% 100%/4px 100% no-repeat,
             linear-gradient(var(--gold-lit),var(--gold-lit)) 100% 100%/4px 40% no-repeat;}
.vp-n{font-family:var(--display);font-weight:700;font-size:.94rem;line-height:1.25;color:#fff;}
.vp-r{font-size:.72rem;line-height:1.35;color:rgba(238,244,240,.66);letter-spacing:.02em;}
.vp-q{margin-top:4px;font-family:var(--display);font-style:italic;font-size:.8rem;line-height:1.45;color:rgba(238,244,240,.84);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;overflow:hidden;}
.vp-item.is-on .vp-thumb{box-shadow:0 0 0 2px var(--gold-lit), 0 14px 26px -16px rgba(0,0,0,.8);}
.vp-item.is-on .vp-on{display:flex;}
.vp-item.is-on .vp-mini{display:none;}

/* arrows sit over the faded edges, level with the thumbnails */
.vp-arrow{position:absolute;top:calc(6px + 8px + (var(--card-w) - 16px) * .28125);z-index:2;transform:translateY(-50%);
  width:44px;height:44px;border-radius:50%;cursor:pointer;display:grid;place-items:center;color:#fff;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .25s,color .25s,border-color .25s;}
.vp-prev{left:0;}
.vp-next{right:0;}
.vp-arrow svg{width:19px;height:19px;}
.vp-arrow:hover{background:var(--gold-lit);border-color:var(--gold-lit);color:var(--teal-ink);}
.vp-arrow:focus-visible{outline:2px solid var(--gold-lit);outline-offset:3px;}

@media (max-width:560px){
  .vplayer{--card-w:58vw;border-radius:22px;}
  .vp-big{width:62px;height:62px;margin:-31px 0 0 -31px;box-shadow:0 0 0 7px rgba(255,255,255,.14), 0 12px 28px -10px rgba(0,0,0,.6);}
  .vp-big svg{width:24px;height:24px;margin-left:4px;}
  .vp-arrow{width:38px;height:38px;}
  .vplayer .vp-count{gap:9px;font-size:.62rem;letter-spacing:.15em;white-space:nowrap;text-wrap:nowrap;}
  .vp-count::before,.vp-count::after{width:16px;}
  .vp-view{-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
                  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);}
}
@media (prefers-reduced-motion:reduce){
  .vp-wait{animation:none;}
  .vp-facade img,.vp-track,.vp-item{transition:none;}
}

/* the faded previews either side of the player: the leader before and after
   the one on screen (and, with room, the next ones out). Placed by site.js. */
.vp-screen{position:relative;max-width:880px;margin:0 auto;}
.vp-ghost{display:none;position:absolute;z-index:0;padding:0;margin:0;border:0;cursor:pointer;overflow:hidden;
  border-radius:14px;background:#0a1d1b;box-shadow:0 20px 40px -24px rgba(0,0,0,.8);
  transition:opacity .35s var(--e-out),filter .35s;}
.vplayer[data-ghosts] .vp-ghost{display:block;}
.vplayer .vp-ghost[hidden]{display:none;}
.vp-ghost img{position:absolute;left:0;top:0;width:100%;height:128%;object-fit:cover;object-position:50% 18%;display:block;filter:saturate(.75);opacity:0;transition:opacity .5s var(--e-out);}
.vp-ghost img.is-in{opacity:1;}
@media (prefers-reduced-motion:reduce){.vp-ghost img{transition:none;}}  /* the bottom (burned-in captions) is cropped away */
.vp-g1{opacity:.42;}
.vp-g2{opacity:.22;}
.vp-ghost:hover,.vp-ghost:focus-visible{opacity:.75;}
.vp-ghost:focus-visible{outline:2px solid var(--gold-lit);outline-offset:2px;}
/* each preview fades away toward the panel edge */
.vp-gr{-webkit-mask-image:linear-gradient(90deg,#000 35%,rgba(0,0,0,.25));mask-image:linear-gradient(90deg,#000 35%,rgba(0,0,0,.25));}
.vp-gl{-webkit-mask-image:linear-gradient(270deg,#000 35%,rgba(0,0,0,.25));mask-image:linear-gradient(270deg,#000 35%,rgba(0,0,0,.25));}
/* the nearer preview names who it is, running up its inner edge */
.vp-gname{position:absolute;top:50%;writing-mode:vertical-rl;white-space:nowrap;
  font-size:.6rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#fff;
  text-shadow:0 1px 6px rgba(0,0,0,.8);}
.vp-gr .vp-gname{left:10px;transform:translateY(-50%);}
.vp-gl .vp-gname{right:10px;transform:translateY(-50%) rotate(180deg);}
.vp-ghost::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,29,27,.55),rgba(10,29,27,0) 45%);}
.vp-gl::after{background:linear-gradient(270deg,rgba(10,29,27,.55),rgba(10,29,27,0) 45%);}
.vp-gname{z-index:1;}
@media (prefers-reduced-motion:reduce){.vp-ghost{transition:none;}}

/* the first video starts by itself with the sound off; this turns it on */
.vp-unmute{position:absolute;top:16px;left:16px;z-index:3;display:inline-flex;align-items:center;gap:9px;
  padding:10px 17px 10px 13px;border-radius:999px;cursor:pointer;font:inherit;font-size:.78rem;font-weight:700;letter-spacing:.04em;
  color:#fff;background:rgba(10,29,27,.72);border:1px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 10px 26px -12px rgba(0,0,0,.7);
  transition:background .25s,color .25s,border-color .25s;animation:vpnudge 2.6s var(--e-out) 1.2s 3;}
.vp-unmute svg{width:18px;height:18px;flex:0 0 auto;}
.vp-unmute:hover{background:var(--gold-lit);border-color:var(--gold-lit);color:var(--teal-ink);}
.vp-unmute:focus-visible{outline:2px solid var(--gold-lit);outline-offset:3px;}
@keyframes vpnudge{0%,100%{box-shadow:0 10px 26px -12px rgba(0,0,0,.7),0 0 0 0 rgba(220,192,119,.55);}
  50%{box-shadow:0 10px 26px -12px rgba(0,0,0,.7),0 0 0 10px rgba(220,192,119,0);}}
@media (max-width:560px){.vp-unmute{top:10px;left:10px;padding:8px 14px 8px 11px;font-size:.72rem;}}
@media (prefers-reduced-motion:reduce){.vp-unmute{animation:none;}}

/* =============================================================
   MOBILE MENU - below 941px the page links fold behind a menu
   button, and open as a panel under the bar. Opened by site.js.
   ============================================================= */
.navtoggle{display:none;}
@media(max-width:940px){
  .nav-inner{flex-wrap:nowrap;padding-bottom:13px;gap:12px;}
  .navtoggle{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;flex:0 0 auto;
    width:44px;height:44px;margin:0;padding:0;border-radius:12px;cursor:pointer;
    background:rgba(255,255,255,.6);border:1px solid rgba(16,43,40,.12);transition:background .25s,border-color .25s;}
  .navtoggle:hover{background:#fff;}
  .navtoggle:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
  .navtoggle span{display:block;width:20px;height:2px;border-radius:2px;background:var(--teal-ink);
    transition:transform .3s var(--e-out),opacity .2s;}
  /* the three lines fold into an X while the menu is open */
  .nav.open .navtoggle{background:#fff;border-color:rgba(201,168,76,.55);}
  .nav.open .navtoggle span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .nav.open .navtoggle span:nth-child(2){opacity:0;}
  .nav.open .navtoggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  .navlinks{position:absolute;left:0;right:0;top:100%;order:0;width:auto;margin:0;
    padding:10px var(--gutter) 18px;flex-direction:column;align-items:stretch;gap:4px;overflow:visible;
    -webkit-mask-image:none;mask-image:none;
    background:#f4f7f4;
    border-bottom:1px solid rgba(16,43,40,.08);box-shadow:0 26px 40px -24px rgba(16,43,40,.5);
    visibility:hidden;opacity:0;transform:translateY(-8px);
    transition:opacity .22s var(--e-io),transform .3s var(--e-out),visibility 0s linear .3s;}
  .nav.open .navlinks{visibility:visible;opacity:1;transform:none;transition:opacity .22s var(--e-io),transform .3s var(--e-out);
    }
  .nav.open{background:#f4f7f4;}
  .navlinks a{padding:15px 16px;border-radius:12px;font-size:.8rem;}
  .navlinks a:hover{background:rgba(16,43,40,.05);}
  .navlinks a[aria-current="page"]{color:var(--teal-ink);
    background:linear-gradient(150deg,rgba(201,168,76,.30),rgba(201,168,76,.16));}
}
/* while the menu is open the page behind it steps back (a tap there closes it) */
.navscrim{position:fixed;inset:0;z-index:59;background:rgba(10,29,27,.4);opacity:0;visibility:hidden;
  transition:opacity .25s var(--e-io),visibility 0s linear .25s;}
.menu-open .navscrim{opacity:1;visibility:visible;transition:opacity .25s var(--e-io);}
@media(min-width:941px){.navscrim{display:none;}}
@media (prefers-reduced-motion:reduce){.navtoggle span,.navlinks,.navscrim{transition:none !important;}}

/* =============================================================
   PAGE CHANGES - the new page dissolves in over the old one, and the
   nav bar holds still (Chrome, Edge, Safari; others just change page).
   ============================================================= */
html{background:#e7eee9;}   /* the site green, never a white frame */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto;}
  .nav{view-transition-name:site-nav;}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.28s;animation-timing-function:cubic-bezier(.4,0,.2,1);}
  ::view-transition-group(site-nav){animation-duration:.28s;}
}