/* ============================================================
     CLEAN-AGENCY SKIN — design-system root.
     Palette: ink text on warm paper; marigold-deep + teal accents.
     Type: Space Grotesk (display) / Inter (body) / JetBrains Mono (labels).
     The base components live in the "DESIGN SYSTEM BASE" block at the end of
     this file so they authoritatively override any legacy editorial rules that
     remain in between (those page-sections are reskinned in later tasks).
     ============================================================ */
  :root{
    /* palette */
    --ink:#14123A;
    --plum:#2A1B4D;
    --deep:#0D0B28;
    --paper:#FBFAF7;
    --paper-dim:#F1EEE7;
    --card:#FFFFFF;
    --marigold:#FF9540;
    --marigold-deep:#E97A1F;
    --teal:#12A594;
    --ink-soft:#4A4770;
    --ink-faint:#8683A6;
    --line:rgba(20,18,58,.12);

    /* type */
    --disp:'Space Grotesk',sans-serif;
    --body:'Inter',system-ui,sans-serif;
    --mono:'JetBrains Mono',ui-monospace,monospace;

    /* motion + elevation + metrics */
    --ease:cubic-bezier(.22,1,.36,1);
    --sh-1:0 1px 2px rgba(20,18,58,.06),0 4px 16px rgba(20,18,58,.06);
    --sh-2:0 2px 6px rgba(20,18,58,.08),0 18px 48px rgba(20,18,58,.10);
    --radius:18px;
    --maxw:1240px;
    --pad:clamp(20px,5vw,72px);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  /* components set display:flex/grid, which silently defeats the hidden attribute */
  [hidden]{display:none !important;}
  html{-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; background:var(--paper);}
  /* No background here: html already paints the paper canvas. A background on
     body would paint over the z-index:-1 glow/grain pseudo-elements (body forms
     no stacking context) and occlude them. */
  body{color:var(--ink); font-family:var(--body); line-height:1.55;
    position:relative; min-height:100vh;}

  /* ambient marigold/teal glows — pinned behind content, never intercept input */
  body::before{content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
    background:
      radial-gradient(58vw 52vh at 6% -8%, rgba(255,149,64,.07), transparent 62%),
      radial-gradient(52vw 48vh at 100% -4%, rgba(18,165,148,.06), transparent 60%);}
  /* ~2.5% paper grain — static, decorative, behind content */
  body::after{content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.025;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

  ::selection{background:var(--marigold); color:var(--ink);}
  a{color:var(--marigold-deep); text-decoration:none;}
  img{max-width:100%; display:block;}
  :focus-visible{outline:2px solid var(--teal); outline-offset:3px;}

  /* skip-link — off-screen until focused */
  .skip-link{position:absolute; left:12px; top:-60px; z-index:1000; padding:10px 16px;
    background:var(--card); color:var(--ink); border-radius:10px; box-shadow:var(--sh-1);
    font-family:var(--body); font-weight:600; transition:top .2s var(--ease);}
  .skip-link:focus{top:12px;}

  .grain{position:fixed; inset:0; z-index:400; pointer-events:none; opacity:.045;
    /* no mix-blend-mode: blending a fixed full-screen layer re-composites the
       whole viewport on every scroll frame, for no visible gain at 5% alpha */
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

  .preload .rv{opacity:0;}
  .preload .rv-clip{clip-path:inset(0 0 100% 0);}
  /* The mask only needs to hide the line *before* it slides up. Keeping overflow:hidden
     afterwards clips ascenders and descenders, so it is released once the reveal ends.
     The padding gives headroom during the animation itself. */
  .mask{overflow:hidden; display:block; padding-top:.28em; margin-top:-.28em;}
  .mask.done{overflow:visible;}
  .preload .mask > *{transform:translateY(130%);}
  .up{opacity:0; transform:translateY(30px);}
  @media (prefers-reduced-motion: reduce){ .preload *,.up,.mask>*{opacity:1 !important; clip-path:none !important; transform:none !important;} }

  /* ============================================================
     LAYOUT
     ============================================================ */
  .bleed{padding:0 clamp(14px,1.8vw,30px);}
  .read{max-width:1060px; margin:0 auto; padding:0 clamp(18px,4vw,48px);}
  .narrow{max-width:820px; margin:0 auto; padding:0 clamp(18px,4vw,48px);}
  section{position:relative;}

  /* padding follows the tier — loud sections get air, quiet ones don't */
  .sec-xl{padding:clamp(96px,13vw,200px) 0;}
  .sec-l {padding:clamp(76px,9vw,140px) 0;}
  .sec-m {padding:clamp(60px,7vw,110px) 0;}
  .sec-s {padding:clamp(48px,5vw,84px) 0;}
  .clip{overflow:hidden;}

  .s-ink{background:var(--ink); color:var(--paper);}
  .s-red{background:var(--red); color:#fff;}

  /* ============================================================
     TYPE
     ============================================================ */
  .disp{font-family:var(--disp); font-weight:400; letter-spacing:-.013em; line-height:.86;}
  .t-xl{font-size:var(--t-xl); text-transform:lowercase; line-height:.88; letter-spacing:-.016em;}
  .t-l {font-size:var(--t-l);  text-transform:lowercase; line-height:.88;}
  .t-m {font-size:var(--t-m);  line-height:.98; font-weight:400;}
  .t-s {font-size:var(--t-s);  line-height:1.02; font-weight:400;}
  .disp em{font-style:italic; font-weight:400;}
  .hot{color:var(--red);}
  .s-red .hot{color:var(--ink);}

  /* Instrument Serif has far sturdier strokes than a Didone, so the reverse-contrast
     compensation Bodoni needed on dark grounds is no longer necessary. */

  .cap{font-family:var(--grote); font-weight:700; font-size:9.5px; letter-spacing:.24em;
    text-transform:uppercase; color:var(--faint);}
  .s-ink .cap{color:rgba(247,246,242,.5);}
  .s-red .cap{color:rgba(255,255,255,.66);}
  .eyebrow{font-family:var(--grote); font-size:11px; letter-spacing:.26em; text-transform:uppercase;
    color:var(--red); font-weight:700;}
  .s-red .eyebrow{color:#fff;}
  .lead{font-size:clamp(15px,1.15vw,18px); line-height:1.55; color:var(--soft); max-width:52ch;}
  .s-ink .lead{color:rgba(247,246,242,.7);}
  .s-red .lead{color:rgba(255,255,255,.85);}

  .runhead{display:flex; justify-content:space-between; align-items:baseline; gap:16px;
    padding-bottom:9px; margin-bottom:clamp(18px,2.2vw,32px); border-bottom:1px solid var(--line);}
  .s-ink .runhead{border-color:var(--line-i);}
  .s-red .runhead{border-color:rgba(255,255,255,.4);}

  .hl{background-image:linear-gradient(var(--red),var(--red)); background-repeat:no-repeat;
    background-position:0 100%; background-size:0% 2px;
    transition:background-size .6s cubic-bezier(.6,0,.2,1); padding-bottom:2px;}
  .hl.on{background-size:100% 2px;}

  /* drop cap — manifesto only */
  .dropcap::first-letter{font-family:var(--disp); font-weight:400; float:left; font-size:3.1em;
    line-height:.78; padding:.06em .1em 0 0; color:var(--red);}

  /* pull quote */
  .pull{font-family:var(--disp); font-weight:400; font-style:normal;
    font-size:clamp(23px,2.5vw,40px); line-height:1.28; letter-spacing:-.012em;
    border-top:2px solid var(--ink); border-bottom:1px solid var(--line);
    padding:clamp(20px,2.4vw,34px) 0; margin:clamp(34px,4vw,58px) 0; max-width:24ch;}
  .pull cite{display:block; font-family:var(--grote); font-style:normal; font-size:10px;
    letter-spacing:.2em; text-transform:uppercase; color:var(--soft); margin-top:18px; font-weight:700;}

  /* section folio, set in the corner like a page number */
  .folio{position:absolute; top:clamp(16px,2vw,30px); right:clamp(14px,1.8vw,30px);
    font-family:var(--grote); font-size:10px; letter-spacing:.22em; text-transform:uppercase;
    color:var(--faint); z-index:2;}
  .s-ink .folio,.s-red .folio{color:rgba(255,255,255,.42);}

  /* fixed left progress rail — the publication's page numbers */
  .prail{position:fixed; left:14px; top:50%; transform:translateY(-50%); z-index:110;
    display:none; flex-direction:column; gap:11px; pointer-events:none;}
  .prail span{font-family:var(--grote); font-size:9px; letter-spacing:.14em; font-weight:700;
    color:var(--faint); opacity:.5; transition:color .3s, opacity .3s, transform .3s; transform-origin:left;}
  .prail span.on{color:var(--red); opacity:1; transform:scale(1.35);}
  /* the rail only appears once there's a gutter to put it in — otherwise it sits
     on top of the hero's contents column */
  @media (min-width:1280px){
    .prail{display:flex;}
    /* every full-width container needs the same gutter, not just .bleed */
    .bleed,.hs-pin,.rail{padding-left:58px;}
  }

  /* ============================================================
     BUTTONS
     ============================================================ */
  .btn{font-family:var(--grote); font-weight:800; font-size:clamp(11px,.85vw,12.5px); letter-spacing:.1em;
    text-transform:uppercase; padding:15px 28px; cursor:pointer; white-space:nowrap; display:inline-block;
    border:none; transition:transform .2s var(--spring), background .25s, color .25s;}
  .btn-fill{background:var(--ink); color:var(--paper);}
  .btn-fill:hover{background:var(--red); color:#fff; transform:translateY(-3px);}
  .btn-invert{background:var(--paper); color:var(--ink);}
  .btn-invert:hover{background:var(--red); color:#fff; transform:translateY(-3px);}
  .btn:active{transform:translateY(0) scale(.94);}
  /* used on both <a> and <button>, so it carries its own button reset */
  .link-u{font-family:var(--grote); font-weight:700; font-size:11px; letter-spacing:.08em;
    text-transform:uppercase; border:none; border-bottom:2px solid var(--red); padding:0 0 3px;
    cursor:pointer; white-space:nowrap; display:inline-block; background:none; color:inherit;}
  .btn,.link-u,.book,.glass-cta,.quiz-opt,.course,.xrow,.toc li{-webkit-tap-highlight-color:transparent; touch-action:manipulation;}

  .mono{display:inline-flex; align-items:flex-end; gap:3px; height:24px;}
  .mono i{display:block; width:4px; background:currentColor; height:100%;}
  .mono i:nth-child(2){height:64%;} .mono i:nth-child(3){height:82%; background:var(--red); transform:translateY(-5px);}

  /* ============================================================
     MASTHEAD
     ============================================================ */
  /* Near-opaque paper + a light blur — a sticky bar that no longer re-blurs the
     whole viewport on every scroll frame (perf), yet still reads as clean glass. */
  .masthead{position:sticky; top:0; z-index:120; background:rgba(247,246,242,.94);
    -webkit-backdrop-filter:blur(8px) saturate(140%); backdrop-filter:blur(8px) saturate(140%);
    border-bottom:1px solid var(--ink);}
  /* vertical only — a `padding` shorthand here would override .bleed's side gutter
     (same specificity, declared later) and pin the wordmark to the viewport edge */
  .mast-row{display:flex; align-items:center; justify-content:space-between;
    padding-top:11px; padding-bottom:9px; gap:20px;}
  .brand{display:flex; align-items:center; gap:10px;}
  .wordmark{font-family:var(--disp); font-weight:400; font-size:clamp(21px,2vw,28px); line-height:1;}
  .wordmark sup{font-family:var(--grote); font-size:8px; letter-spacing:.16em; vertical-align:super;
    margin-left:3px; font-weight:700; color:var(--soft);}
  .mast-center{font-family:var(--grote); font-size:9.5px; letter-spacing:.26em; text-transform:uppercase;
    color:var(--soft); text-align:center; line-height:1.6;}
  .mast-right{display:flex; align-items:center; gap:20px;}
  .mast-right nav{display:flex; gap:18px; font-family:var(--grote); font-size:10.5px; letter-spacing:.13em;
    text-transform:uppercase; font-weight:700;}
  .mast-right nav a{position:relative; padding-bottom:3px;}
  .mast-right nav a::after{content:""; position:absolute; left:0; bottom:0; height:2px; width:100%;
    background:var(--red); transform:scaleX(0); transform-origin:left; transition:transform .3s cubic-bezier(.6,0,.2,1);}
  .mast-right nav a:hover::after{transform:scaleX(1);}
  .book{font-family:var(--grote); font-weight:800; font-size:10.5px; letter-spacing:.11em; text-transform:uppercase;
    background:var(--ink); color:var(--paper); padding:11px 18px; border:none; cursor:pointer;
    transition:transform .2s var(--spring), background .2s;}
  .book:hover{background:var(--red);} .book:active{transform:scale(.94);}
  @media (max-width:960px){ .mast-center{display:none;} .mast-right nav{display:none;} }

  .glass-cta{position:fixed; z-index:130; left:50%; bottom:22px; transform:translate(-50%,26px); opacity:0;
    pointer-events:none; display:inline-flex; align-items:center; gap:11px; padding:14px 24px; border-radius:100px;
    font-family:var(--grote); font-weight:800; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
    color:var(--paper); background:rgba(11,11,13,.92);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    border:1px solid rgba(247,246,242,.18); box-shadow:0 12px 38px rgba(11,11,13,.32);
    transition:transform .55s cubic-bezier(.2,.8,.2,1), opacity .4s, background .3s; cursor:pointer;}
  .glass-cta.show{opacity:1; transform:translate(-50%,0); pointer-events:auto;}
  .glass-cta:hover{background:var(--red);}
  .glass-cta:active{transform:translate(-50%,0) scale(.94);}
  .glass-cta .gdot{width:7px; height:7px; border-radius:50%; background:var(--red); animation:gpulse 2.2s infinite;}
  .glass-cta:hover .gdot{background:#fff;}
  @keyframes gpulse{0%{box-shadow:0 0 0 0 rgba(210,16,42,.55)}70%{box-shadow:0 0 0 7px rgba(210,16,42,0)}100%{box-shadow:0 0 0 0 rgba(210,16,42,0)}}

  .marquee{background:var(--ink); color:var(--paper); overflow:hidden; white-space:nowrap;}
  .marquee.inv{background:var(--paper); color:var(--ink); border-top:1px solid var(--ink); border-bottom:1px solid var(--ink);}
  .marquee .track{display:inline-flex; padding:9px 0; font-family:var(--grote); font-size:10.5px;
    letter-spacing:.2em; text-transform:uppercase; font-weight:700; will-change:transform; animation:scrollx 34s linear infinite;}
  .marquee .track span{display:inline-flex; align-items:center; gap:36px; padding-right:36px;}
  .marquee b{color:var(--red); font-weight:800;}
  @keyframes scrollx{from{transform:translateX(0)}to{transform:translateX(-50%)}}

  /* ============================================================
     HERO — restored contents-page structure
     ============================================================ */
  .hero{padding:clamp(16px,2vw,28px) 0 clamp(40px,5vw,76px);}
  .hero-grid{display:grid; grid-template-columns:.8fr 3.2fr; gap:clamp(18px,2.4vw,40px); align-items:stretch;}
  .contents{display:flex; flex-direction:column; justify-content:space-between;
    border-right:1px solid var(--line); padding-right:clamp(14px,1.4vw,24px);}
  .contents .head{font-family:var(--grote); font-size:9.5px; letter-spacing:.22em; text-transform:uppercase;
    color:var(--soft); margin-bottom:13px;}
  .toc{list-style:none;}
  /* indent on hover via transform, not padding — padding animation forces layout each frame */
  .toc li{padding:9px 0; border-top:1px solid var(--line);
    transition:transform .3s cubic-bezier(.6,0,.2,1);}
  .toc li:hover{transform:translateX(8px);}
  /* the row is an <a> for keyboard access, so it owns the flex layout, not the <li> */
  .toc li > a{display:flex; align-items:baseline; gap:10px; width:100%; cursor:pointer;}
  .toc .fol{font-family:var(--grote); font-size:9.5px; color:var(--faint); font-weight:700; transition:color .2s;}
  .toc li:hover .fol{color:var(--red);}
  .toc .nm{font-family:var(--disp); font-size:clamp(15px,1.15vw,19px); font-weight:400; line-height:1.05;}
  .contents .foot{font-family:var(--grote); font-size:9px; letter-spacing:.16em; text-transform:uppercase;
    color:var(--faint); line-height:2; margin-top:16px;}
  .contents .foot .live{color:var(--red);}

  .main{display:flex; flex-direction:column;}
  .folio-row{display:flex; align-items:baseline; justify-content:space-between; gap:18px;
    font-family:var(--grote); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
    color:var(--soft); margin-bottom:clamp(6px,1vh,14px); flex-wrap:wrap;}
  .folio-row .big{font-family:var(--disp); font-size:clamp(26px,2.6vw,42px); font-weight:400; color:var(--ink);}
  .headline{display:flex; align-items:flex-end; justify-content:space-between; gap:clamp(20px,3vw,44px); flex-wrap:wrap;}
  /* sized for the longest line ("they told you.") inside the main column, not for "three." */
  .headline h1{font-family:var(--disp); font-weight:400; line-height:.92; letter-spacing:-.016em;
    font-size:clamp(40px,8.4vw,132px); text-transform:lowercase;}
  .headline h1 em{font-style:italic; font-weight:400;}
  .headline .sub{max-width:390px; padding-bottom:8px; flex:1 1 300px;}
  .headline .sub p{font-size:clamp(14px,1.05vw,17.5px); line-height:1.5; color:var(--soft);}
  .headline .sub p b{color:var(--ink); font-weight:700;}
  .headline .sub p em{font-style:italic;}
  .cta{display:flex; align-items:center; gap:18px; margin-top:20px; flex-wrap:wrap;}
  /* extra room so the marginal note has its own lane under the headline's descenders */
  .hero-facts{display:grid; grid-template-columns:repeat(3,1fr); border-top:2px solid var(--ink);
    margin-top:clamp(38px,4.4vw,64px);}
  .hero-facts div{padding:12px 12px 0; border-right:1px solid var(--line);}
  .hero-facts div:last-child{border-right:none;}
  .hero-facts b{font-family:var(--disp); font-size:clamp(24px,2.6vw,40px); font-weight:400; display:block;
    line-height:.98; white-space:nowrap;}
  .hero-facts span{display:block; margin-top:5px;}

  .cover{position:relative; margin-top:clamp(18px,2.2vw,32px); background:var(--ink); color:var(--paper);
    min-height:clamp(260px,40vh,440px); overflow:hidden; display:flex; align-items:center; justify-content:center;
    cursor:pointer; padding:24px; flex:1;}
  .cover .diag{position:absolute; inset:0; opacity:.5;
    background:repeating-linear-gradient(-45deg, transparent 0 24px, rgba(247,246,242,.045) 24px 25px);}
  .cover .scan{position:absolute; top:0; bottom:0; width:2px; left:0; opacity:.85;
    background:linear-gradient(180deg,transparent,var(--red),transparent); animation:scanx 7s cubic-bezier(.7,0,.3,1) infinite;}
  @keyframes scanx{0%{left:-1%}50%{left:100%}100%{left:100%}}
  .cover .huge{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-family:var(--disp);
    font-weight:400; font-size:clamp(110px,22vw,340px); line-height:.7; color:rgba(247,246,242,.075);
    pointer-events:none; white-space:nowrap;}
  .cover .huge em{color:rgba(210,16,42,.45); font-style:normal;}
  .cover .cl{position:absolute; z-index:2;}
  .cover .cl.tl{top:14px; left:16px;} .cover .cl.tr{top:14px; right:16px;}
  .cover .cl.bl{bottom:14px; left:16px;} .cover .cl.br{bottom:14px; right:16px;}
  .play{position:relative; z-index:3; display:flex; align-items:center; gap:16px;}
  .play .disc{width:clamp(56px,4.6vw,74px); height:clamp(56px,4.6vw,74px); border-radius:50%;
    background:rgba(247,246,242,.1); -webkit-backdrop-filter:blur(11px); backdrop-filter:blur(11px);
    border:1px solid rgba(247,246,242,.4); color:var(--paper); display:flex; align-items:center; justify-content:center;
    font-size:18px; transition:transform .25s var(--spring), background .25s, border-color .25s;}
  .cover:hover .play .disc{transform:scale(1.1); background:var(--red); border-color:var(--red);}
  .play b{font-family:var(--disp); font-weight:400; font-size:clamp(19px,1.7vw,27px); display:block; line-height:1;}

  @media (max-width:980px){
    .hero-grid{grid-template-columns:1fr; gap:24px;}
    .contents{border-right:none; border-top:1px solid var(--line); padding-right:0; padding-top:18px; order:3;}
    .toc{display:grid; grid-template-columns:1fr 1fr; gap:0 20px;}
    .main{order:1;}
  }

  /* ============================================================
     THE BREAK — one of only three XL moments
     ============================================================ */
  .brk{height:340vh; position:relative; background:var(--ink); color:var(--paper);}
  .brk-pin{height:100vh; position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden;}
  .brk-head{position:absolute; top:11vh; left:0; right:0; text-align:center;}
  .brk-boxes{position:relative; display:flex; flex-wrap:wrap; justify-content:center;
    gap:clamp(7px,1vw,18px); z-index:3; max-width:min(94vw,1180px);}
  .bx{width:clamp(96px,12vw,178px); aspect-ratio:3/4; border:1px solid var(--line-i);
    display:flex; flex-direction:column; justify-content:space-between;
    padding:clamp(10px,1vw,16px); will-change:transform;}
  .bx .nm{font-family:var(--disp); font-size:clamp(21px,2.6vw,44px); font-weight:400; line-height:.9; margin-top:auto;}
  .bx .sm{font-size:clamp(9.5px,.8vw,12px); opacity:.56; margin-top:7px; line-height:1.35;}
  .brk-field{position:absolute; inset:0; z-index:2; pointer-events:none;}
  .brk-field .w{position:absolute; font-family:var(--disp); white-space:nowrap;
    transform:translate(-50%,-50%); opacity:0; will-change:transform,opacity;}
  .brk-final{position:absolute; z-index:4; text-align:center; font-family:var(--disp); font-weight:400;
    font-size:var(--t-xl); line-height:.92; letter-spacing:-.016em; opacity:0; text-transform:lowercase;}
  .brk-final em{font-style:italic; color:var(--red);}
  .brk-final .sub{display:block; font-family:var(--grote); font-size:10.5px; letter-spacing:.22em;
    text-transform:uppercase; opacity:.56; margin-top:24px;}

  /* ============================================================
     EXPLORER — no headline. the directory IS the typography.
     ============================================================ */
  .xlist{border-top:2px solid var(--ink);}
  .xrow{border-bottom:1px solid var(--line);}
  /* .xhead is a real <button> so the accordion works from the keyboard — it carries
     its own reset rather than inheriting the UA's button chrome. */
  .xhead{display:flex; align-items:center; gap:clamp(12px,2vw,28px); padding:clamp(13px,1.5vw,24px) 0;
    width:100%; text-align:left; background:none; border:none; color:inherit; font:inherit;
    cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation;
    transition:transform .35s cubic-bezier(.6,0,.2,1);}
  .xrow:hover .xhead,.xrow.open .xhead{transform:translateX(clamp(8px,1.4vw,22px));}
  .xnum{font-family:var(--grote); font-weight:700; font-size:10.5px; letter-spacing:.14em; color:var(--faint); flex:none; width:26px;}
  .xname{font-family:var(--disp); font-weight:400; line-height:.94; letter-spacing:-.01em;
    font-size:clamp(28px,5vw,76px); flex:1; text-transform:lowercase; transition:color .25s;}
  .xrow:hover .xname,.xrow.open .xname{color:var(--red);}
  .xrole{font-family:var(--grote); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
    color:var(--soft); text-align:right; flex:none; max-width:230px; display:none;}
  @media (min-width:1000px){ .xrole{display:block;} }
  .xplus{flex:none; font-family:var(--grote); font-size:19px; color:var(--red); transition:transform .35s var(--spring);}
  .xrow.open .xplus{transform:rotate(45deg);}
  .xbody{overflow:hidden; height:0;}
  .xinner{padding:0 0 clamp(24px,2.6vw,40px);}
  .xstats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
  @media (max-width:760px){ .xstats{grid-template-columns:1fr 1fr;} }
  .xstats .cell{background:var(--paper); padding:clamp(13px,1.3vw,20px);}
  .xstats .val{font-family:var(--disp); font-size:clamp(16px,1.6vw,26px); font-weight:400; margin-top:7px; line-height:1.05;}
  .xmeta{display:flex; flex-wrap:wrap; gap:22px; justify-content:space-between; align-items:flex-end; margin-top:20px;}
  .xskills{display:flex; flex-wrap:wrap; gap:8px; margin-top:13px;}
  .xskills span{font-family:var(--grote); font-size:10px; letter-spacing:.08em; text-transform:uppercase;
    border:1px solid var(--line-2); padding:7px 13px;}

  /* ============================================================
     ROADMAP — a continuous track with a node per stage, plus a career switcher
     ============================================================ */
  /* header: title left, career switcher right */
  .rm-head{display:flex; justify-content:space-between; align-items:flex-end; gap:26px;
    flex-wrap:wrap; margin-bottom:clamp(28px,3.2vw,50px);}
  .rm-h{font-family:var(--disp); font-size:var(--t-m); font-weight:400; line-height:.98;
    letter-spacing:-.02em; margin-top:14px;}
  .rm-tabs{display:flex; gap:8px; flex-wrap:wrap;}
  .rm-tab{font-family:var(--grote); font-weight:800; font-size:10.5px; letter-spacing:.12em;
    text-transform:uppercase; padding:12px 18px; border:1px solid var(--line-i); background:transparent;
    color:var(--paper); cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation;
    transition:background .25s, color .25s, border-color .25s, transform .2s var(--spring);}
  .rm-tab:hover{border-color:var(--red);}
  .rm-tab:active{transform:scale(.94);}
  .rm-tab.on{background:var(--red); border-color:var(--red); color:#fff;}

  /* the timeline — a continuous track with a node per stage, so it reads as a path
     rather than seven unrelated boxes */
  .rail{display:flex; overflow-x:auto; scrollbar-width:none; padding-left:clamp(14px,1.8vw,30px);}
  .rail::-webkit-scrollbar{display:none;}
  .stop{position:relative; flex:0 0 clamp(168px,17vw,238px);
    padding:58px clamp(18px,1.6vw,26px) clamp(18px,2vw,28px) 0;}
  /* --seg / --dot default to 1, so with JS off or reduced motion the track is simply
     drawn. The timeline sets them to 0 and animates back up. */
  .stop::before{content:""; position:absolute; top:28px; left:0; right:0; height:1px;
    background:rgba(247,246,242,.34);                     /* segments join into one line */
    transform:scaleX(var(--seg,1)); transform-origin:left;}
  .stop:first-child::before{left:7px;}
  .stop::after{content:""; position:absolute; top:22px; left:0; width:14px; height:14px;
    border-radius:50%; background:var(--red); box-shadow:0 0 0 5px var(--ink);
    transform:scale(var(--dot,1));}
  .stop .n{font-family:var(--grote); font-size:10px; letter-spacing:.2em; font-weight:800;
    color:var(--red); text-transform:uppercase;}
  .stop .t{font-family:var(--disp); font-size:clamp(18px,1.7vw,27px); font-weight:400;
    margin-top:9px; line-height:1.04;}
  .stop .d{font-size:clamp(12px,1vw,14px); line-height:1.5; margin-top:9px; opacity:.68;}
  .rail-end{position:relative; flex:0 0 96px;}
  .rail-end::before{content:""; position:absolute; top:28px; left:0; width:34px; height:1px;
    background:rgba(247,246,242,.34);}
  .rail-end i{position:absolute; top:19px; left:38px; color:var(--red); font-style:normal; font-size:17px;}

  /* ============================================================
     METHOD — the quiet block
     ============================================================ */
  .steps{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.8vw,28px);}
  .step{border-top:2px solid var(--ink); padding-top:16px;}
  .step .sn{font-family:var(--disp); font-size:clamp(28px,2.8vw,42px); font-weight:400; line-height:.9;}
  .step .st{font-family:var(--disp); font-size:clamp(17px,1.4vw,22px); font-weight:400; margin-top:12px;}
  .step .sd{font-size:13.5px; line-height:1.55; color:var(--soft); margin-top:9px;}
  .step .sm{font-family:var(--grote); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
    color:var(--red); margin-top:12px; font-weight:700;}
  @media (max-width:900px){ .steps{grid-template-columns:1fr 1fr;} }
  @media (max-width:560px){ .steps{grid-template-columns:1fr;} }

  /* ============================================================
     ACADEMY — headline holds left, gallery scrolls past it
     ============================================================ */
  .hs{position:relative;}
  .hs-pin{height:100vh; overflow:hidden; display:flex; align-items:center;
    gap:clamp(20px,3vw,54px); padding:0 clamp(14px,1.8vw,30px);}
  .hs-side{flex:0 0 clamp(240px,25vw,400px); align-self:stretch; display:flex; flex-direction:column;
    justify-content:center; border-right:1px solid var(--line-i); padding-right:clamp(18px,2vw,34px);}
  /* sized for a narrow column — --t-l wraps this to five lines and reads cramped */
  .hs-side .h{font-family:var(--disp); font-size:clamp(34px,4vw,64px); font-weight:400; line-height:.94;
    letter-spacing:-.012em; text-transform:lowercase; margin:16px 0;}
  .hs-side .h em{font-style:italic; font-weight:400;}
  .hs-viewport{flex:1; overflow:hidden;}
  .hs-track{display:flex; gap:clamp(12px,1.3vw,20px); will-change:transform;}
  .course{position:relative; isolation:isolate; overflow:hidden;
    flex:0 0 clamp(240px,25vw,360px); border:1px solid var(--line-i); padding:clamp(18px,1.8vw,28px);
    display:flex; flex-direction:column; min-height:clamp(300px,42vh,420px); cursor:pointer; background:transparent;
    transition:transform .25s var(--spring), background .3s, border-color .3s;}
  .course .c-top,.course .c-name,.course .c-desc,.course .c-foot{position:relative;}
  /* the rail sits on the dark ground, so the artwork has to fade to ink, not paper */
  .s-ink .cthumb{background:rgba(247,246,242,.03);}
  .s-ink .cthumb.empty{background:
    repeating-linear-gradient(-45deg, transparent 0 22px, rgba(247,246,242,.05) 22px 23px), rgba(247,246,242,.03);}
  .s-ink .cthumb .cmark{color:rgba(247,246,242,.10);}
  .s-ink .cthumb::after{background:linear-gradient(180deg,
    rgba(11,11,13,0) 0%, rgba(11,11,13,.22) 30%, rgba(11,11,13,.86) 52%, var(--ink) 68%);}
  .course:hover .cthumb .cmark{color:rgba(210,16,42,.28);}
  .course:hover{background:rgba(247,246,242,.05); border-color:var(--red); transform:translateY(-5px);}
  .course:active{transform:scale(.98);}
  .c-top{display:flex; justify-content:space-between;}
  .c-name{font-family:var(--disp); font-size:clamp(26px,2.6vw,42px); font-weight:400; margin-top:auto; line-height:.96;}
  .c-desc{font-size:clamp(12.5px,1vw,14.5px); line-height:1.5; margin-top:12px; opacity:.7;}
  .c-foot{display:flex; align-items:center; justify-content:space-between; margin-top:18px; padding-top:14px;
    border-top:1px solid var(--line-i);}
  .c-price{font-family:var(--disp); font-size:clamp(20px,1.8vw,30px); font-weight:400;}
  .c-enroll{font-family:var(--grote); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
    font-weight:800; color:var(--red);}
  .course-cta{justify-content:space-between; background:rgba(247,246,242,.05);}
  @media (max-width:980px){
    .hs-pin{height:auto; flex-direction:column; align-items:stretch; padding:clamp(56px,7vw,90px) clamp(14px,1.8vw,30px);}
    .hs-side{flex:none; border-right:none; border-bottom:1px solid var(--line-i); padding-right:0; padding-bottom:24px; margin-bottom:24px;}
    .hs-viewport{overflow:visible;}
    .hs-track{flex-wrap:wrap;} .course{flex:1 1 100%;}
  }

  /* ============================================================
     QUIZ — the only right-aligned block on the page
     ============================================================ */
  .quiz-wrap{display:grid; grid-template-columns:1fr .85fr; gap:clamp(24px,4vw,72px); align-items:center;}
  @media (max-width:940px){ .quiz-wrap{grid-template-columns:1fr;} }
  .quiz-copy{text-align:right;}
  .quiz-copy .lead{margin-left:auto;}
  @media (max-width:940px){ .quiz-copy{text-align:left; order:-1;} .quiz-copy .lead{margin-left:0;} }
  .quiz-card{background:var(--ink); color:var(--paper); padding:clamp(22px,2.4vw,38px); overflow:hidden;}

  /* collapsed invite — the quiz stays shut until someone opts in */
  .quiz-invite{cursor:pointer; display:block; width:100%; text-align:left; background:none;
    border:none; color:inherit; font:inherit; padding:0;}
  .quiz-invite .qbig{font-family:var(--disp); font-weight:400; font-size:clamp(28px,3vw,50px);
    line-height:.98; letter-spacing:-.02em; margin:14px 0 16px; text-transform:lowercase;}
  .quiz-invite .qbig em{font-style:italic; font-weight:400; color:var(--red);}
  .quiz-meta{display:flex; flex-wrap:wrap; gap:0; border-top:1px solid var(--line-i);
    border-bottom:1px solid var(--line-i); margin-bottom:22px;}
  .quiz-meta div{flex:1 1 90px; padding:12px 14px 12px 0;}
  .quiz-meta b{font-family:var(--disp); font-size:clamp(17px,1.5vw,24px); font-weight:400; display:block; line-height:1;}
  .quiz-meta span{display:block; margin-top:5px;}
  .quiz-go{display:inline-flex; align-items:center; gap:12px; font-family:var(--grote); font-weight:800;
    font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; background:var(--red); color:#fff;
    padding:15px 26px; transition:transform .2s var(--spring), background .25s;}
  .quiz-invite:hover .quiz-go{background:var(--paper); color:var(--ink); transform:translateX(4px);}
  .quiz-invite:active .quiz-go{transform:scale(.95);}

  .qcount{font-family:var(--grote); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
    color:var(--red); font-weight:800; margin-bottom:12px;}
  .quiz-prog{display:flex; gap:6px; margin-bottom:24px;}
  .quiz-prog span{height:3px; flex:1; background:var(--line-i);
    transition:background .3s, transform .35s var(--spring); transform-origin:left;}
  .quiz-prog span.on{background:var(--red); transform:scaleY(2);}
  .quiz-q{font-family:var(--disp); font-size:clamp(21px,2vw,32px); font-weight:400; line-height:1.08; margin-bottom:24px;}
  .quiz-opts{display:flex; flex-direction:column; gap:9px;}
  .quiz-opt{display:flex; align-items:center; gap:14px; text-align:left; background:transparent;
    border:1px solid var(--line-i); color:var(--paper);
    padding:15px 17px; font-family:var(--sans); font-size:clamp(14px,1.1vw,16px); cursor:pointer;
    transition:transform .22s cubic-bezier(.6,0,.2,1), border-color .2s, background .2s;}
  /* a lettered marker makes it obvious these are answers, not links */
  .quiz-opt .ql{flex:none; width:24px; height:24px; border:1px solid var(--line-i); border-radius:50%;
    display:flex; align-items:center; justify-content:center; font-family:var(--grote); font-weight:800;
    font-size:10px; text-transform:uppercase; color:var(--red); transition:background .2s, color .2s, border-color .2s;}
  .quiz-opt:hover{border-color:var(--red); transform:translateX(8px);}
  .quiz-opt:hover .ql{background:var(--red); color:#fff; border-color:var(--red);}
  .quiz-opt:active{transform:translateX(8px) scale(.975);}
  .quiz-opt.picked .ql{background:#fff; color:var(--red); border-color:#fff;}
  @keyframes stamp{0%{transform:scale(1)}35%{transform:scale(.96)}100%{transform:scale(1)}}
  .quiz-opt.picked{animation:stamp .34s var(--spring); background:var(--red); border-color:var(--red);
    color:#fff; font-weight:700;}
  .quiz-res .rname{font-family:var(--disp); font-size:var(--t-m); font-weight:400; line-height:.9;
    margin:9px 0 16px; color:var(--red); text-transform:lowercase;}
  @keyframes land{0%{opacity:0; transform:scale(.9) rotate(-3deg)}60%{transform:scale(1.03) rotate(1deg)}100%{opacity:1; transform:scale(1) rotate(0)}}
  .quiz-res .rname{animation:land .55s var(--spring) both;}
  .quiz-card .lead{color:rgba(247,246,242,.7);}
  .quiz-card .cap{color:rgba(247,246,242,.5);}

  /* ============================================================
     SCHOOLS
     ============================================================ */
  .schools-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(26px,4vw,64px); align-items:center;}
  @media (max-width:900px){ .schools-grid{grid-template-columns:1fr;} }
  .school-list{list-style:none; margin-top:20px;}
  .school-list li{padding:13px 0 13px 28px; border-top:1px solid var(--line); position:relative;
    font-size:clamp(14px,1.1vw,16px);}
  .school-list li::before{content:"→"; position:absolute; left:0; color:var(--red); font-weight:700;}
  .school-panel{border:1px solid var(--line-2); padding:clamp(20px,2.2vw,34px); aspect-ratio:4/3;
    display:flex; flex-direction:column; justify-content:space-between;}
  .school-panel .big{font-family:var(--disp); font-size:var(--t-l); font-weight:400; line-height:.88;}

  /* ============================================================
     MANIFESTO — the only centred block
     ============================================================ */
  .manifesto{font-family:var(--disp); font-weight:400; font-size:var(--t-m); line-height:1.16;
    letter-spacing:-.018em;}
  .manifesto .w{color:var(--faint);}
  .why-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:clamp(40px,4.6vw,72px);
    border-top:2px solid var(--ink);}
  @media (max-width:900px){ .why-grid{grid-template-columns:1fr;} }
  .why{padding:20px clamp(14px,1.6vw,26px) 0; border-right:1px solid var(--line);}
  .why:last-child{border-right:none;}
  @media (max-width:900px){ .why{border-right:none; border-bottom:1px solid var(--line); padding-bottom:20px;} }
  .why h3{font-family:var(--disp); font-size:clamp(19px,1.7vw,27px); font-weight:400; text-transform:lowercase;}
  .why p{font-size:13.5px; line-height:1.55; color:var(--soft); margin-top:9px;}
  .founder{display:grid; grid-template-columns:.7fr 2fr; gap:clamp(20px,3vw,50px); margin-top:clamp(44px,5vw,80px);
    align-items:start; border-top:1px solid var(--line); padding-top:clamp(26px,3vw,44px);}
  @media (max-width:900px){ .founder{grid-template-columns:1fr;} }
  .fpanel{aspect-ratio:4/5; background:var(--ink); color:var(--paper); padding:18px;
    display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; position:relative;}
  .fpanel .initial{font-family:var(--disp); font-weight:400; font-size:clamp(100px,13vw,210px); line-height:.72;
    color:rgba(247,246,242,.1); position:absolute; left:50%; top:52%; transform:translate(-50%,-50%);}
  .fpanel .cap{color:rgba(247,246,242,.5); position:relative; z-index:2;}
  .fnote{font-size:clamp(14.5px,1.15vw,17.5px); line-height:1.62; color:var(--soft);}
  .fnote .sig{font-family:var(--grote); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
    color:var(--ink); margin-top:22px; font-weight:700;}

  /* ============================================================
     COMMUNITY + CONTACT — grid leads
     ============================================================ */
  /* The band sits on paper now, so the gutters have to be paper for the black cards
     to read as separate blocks, and the cards carry their own reversed text colour
     instead of inheriting it from an .s-ink ancestor. */
  .comm-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--paper);
    border:1px solid var(--line);}
  @media (max-width:760px){ .comm-grid{grid-template-columns:1fr;} }
  .comm{background:var(--ink); color:var(--paper); padding:clamp(20px,2.2vw,34px);
    display:flex; flex-direction:column;
    min-height:clamp(160px,20vh,230px); transition:background .3s, transform .25s var(--spring);}
  .comm:hover{background:var(--ink-2); transform:translateY(-3px);}
  .comm .cap{color:rgba(247,246,242,.5);}
  .comm .cn{font-family:var(--disp); font-size:clamp(24px,2.6vw,42px); font-weight:400; margin-top:auto; line-height:.95;}
  .comm .cd{font-size:13px; opacity:.6; margin-top:9px;}
  .comm .cgo{font-family:var(--grote); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
    color:var(--red); font-weight:800; margin-top:14px;}
  .contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,64px);
    margin-top:clamp(38px,4.4vw,70px); align-items:start;}
  @media (max-width:900px){ .contact-grid{grid-template-columns:1fr;} }
  .cdetail{list-style:none;}
  .cdetail li{padding:14px 0; border-top:1px solid var(--line); display:flex; justify-content:space-between;
    gap:18px; font-size:clamp(13.5px,1.1vw,16px); flex-wrap:wrap;}
  .cdetail li span:first-child{opacity:.5; font-family:var(--grote); font-size:9.5px; letter-spacing:.2em;
    text-transform:uppercase; font-weight:700;}

  /* ============================================================
     FINAL — the third and last XL moment
     ============================================================ */
  .final{text-align:center; padding:clamp(96px,15vh,200px) 0; overflow:hidden;}
  .final .big{font-family:var(--disp); font-weight:400; font-size:clamp(42px,9.6vw,150px);
    line-height:.92; letter-spacing:-.016em; text-transform:lowercase;}
  .final .big em{font-style:italic; color:var(--ink);}
  .final p{margin:30px auto 0; max-width:44ch; font-size:clamp(14.5px,1.1vw,17px); line-height:1.55;}
  .final .fcta{margin-top:38px; display:flex; gap:20px; justify-content:center; align-items:center; flex-wrap:wrap;}
  .final .link-u{border-color:#fff;}

  footer{background:var(--paper-2); color:var(--soft); padding:clamp(50px,5.5vw,82px) 0 26px; border-top:2px solid var(--ink);}
  .foot-grid{display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:30px;}
  @media (max-width:820px){ .foot-grid{grid-template-columns:1fr 1fr;} }
  @media (max-width:520px){ .foot-grid{grid-template-columns:1fr;} }
  footer .tagline{font-size:13px; line-height:1.6; max-width:290px; margin-top:14px;}
  footer h2{font-family:var(--grote); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
    color:var(--ink); margin-bottom:14px;}
  footer ul{list-style:none;} footer ul li{margin-bottom:9px; font-size:14px;}
  footer ul a:hover{color:var(--red);}
  .foot-bottom{border-top:1px solid var(--line); margin-top:42px; padding-top:20px; display:flex;
    justify-content:space-between; flex-wrap:wrap; gap:12px; font-family:var(--grote); font-size:10px;
    letter-spacing:.12em; text-transform:uppercase;}

  /* ============================================================
     MARGINALIA
     ============================================================ */
  .anchor{position:relative;}
  .mg{position:absolute; pointer-events:none; z-index:6; color:var(--red);}
  .mg svg{overflow:visible; display:block; width:100%; height:100%;}
  .mg svg *{fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke;}
  .mg-note{position:absolute; pointer-events:none; z-index:6; font-family:var(--hand); font-weight:600;
    font-size:clamp(15px,1.3vw,22px); line-height:1.1; color:var(--red); opacity:0; transform:rotate(-4deg);
    white-space:nowrap; letter-spacing:normal; text-transform:none; font-style:normal;}
  .mg-note.on{opacity:1;}
  .mg-note.paper{color:var(--paper);}
  .count{font-variant-numeric:tabular-nums;}

  @media (prefers-reduced-motion: reduce){
    .mg svg *{stroke-dashoffset:0 !important;}
    .mg-note{opacity:1 !important;}
    .hl{background-size:100% 2px !important; transition:none !important;}
    .quiz-opt.picked,.quiz-res .rname{animation:none !important;}
  }
  /* Re-assert the progress-rail gutter last: .rail and .hs-pin declare their own
     padding-left further down the sheet, which would otherwise beat the earlier rule. */
  @media (min-width:1280px){ .bleed,.hs-pin,.rail{padding-left:58px;} }

  @media (max-width:640px){
    .mg[data-mobile="off"],.mg-note[data-mobile="off"]{display:none;}
    .mg-note{font-size:15px;}
    .cover .cl.br{display:none;}   /* collides with .cl.bl at phone widths */
    .play{flex-direction:column; align-items:flex-start; gap:12px;}
  }

  /* ==========================================================================
     COMPONENTS added for the multi-page build
     ========================================================================== */
  .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;}

  /* Headings carry browser defaults for size and weight that the type scale does
     not always restate. Neutralise them once, so an <h2 class="disp t-l"> and the
     <div class="disp t-l"> it replaced render identically. */
  h1,h2,h3,h4,h5,h6{font-size:inherit; font-weight:inherit; line-height:inherit;}
  main{display:block;}

  /* ---- skip link: first thing in the tab order, invisible until focused ---- */
  .skip-link{position:fixed; top:0; left:0; z-index:300; transform:translateY(-120%);
    background:var(--ink); color:var(--paper); padding:14px 22px;
    font-family:var(--grote); font-weight:800; font-size:11px; letter-spacing:.1em;
    text-transform:uppercase; transition:transform .2s cubic-bezier(.6,0,.2,1);}
  .skip-link:focus-visible{transform:translateY(0); outline-offset:-3px;}
  .btn-red{background:var(--red); color:#fff;}
  .btn-red:hover{background:var(--ink); color:var(--paper); transform:translateY(-3px);}
  .btn-line{background:transparent; color:inherit; border:1px solid var(--line-2);}
  .btn-line:hover{border-color:var(--red); color:var(--red);}
  .s-ink .btn-line{border-color:var(--line-i);}
  .is-pending{opacity:.5; cursor:default;}

  /* ---- mobile navigation ---- */
  .nav-toggle{display:none; background:none; border:none; cursor:pointer; padding:8px; margin-right:-8px;
    -webkit-tap-highlight-color:transparent;}
  .nav-toggle i{display:block; width:22px; height:2px; background:var(--ink); margin:4px 0;
    transition:transform .3s cubic-bezier(.6,0,.2,1), opacity .2s;}
  .nav-toggle[aria-expanded="true"] i:nth-child(1){transform:translateY(6px) rotate(45deg);}
  .nav-toggle[aria-expanded="true"] i:nth-child(2){opacity:0;}
  .nav-toggle[aria-expanded="true"] i:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
  /* visibility, not just transform: a drawer parked off-screen with transform alone
     is still focusable, so tabbing out of the masthead fell into six invisible links. */
  .nav-drawer{position:fixed; inset:0; z-index:119; background:var(--paper); padding:88px clamp(20px,6vw,48px) 40px;
    display:flex; flex-direction:column; gap:4px; transform:translateY(-100%); visibility:hidden;
    transition:transform .45s cubic-bezier(.6,0,.2,1), visibility 0s linear .45s;
    overflow-y:auto;}
  .nav-drawer.open{transform:translateY(0); visibility:visible; transition-delay:0s;}
  .nav-drawer a{font-family:var(--disp); font-size:clamp(30px,9vw,52px); font-weight:400; line-height:1.18;
    text-transform:lowercase; border-bottom:1px solid var(--line); padding:12px 0;}
  .nav-drawer a.here{color:var(--red);}
  .nav-drawer .drawer-foot{margin-top:auto; padding-top:28px; display:flex; flex-direction:column; gap:14px;}
  @media (max-width:960px){ .nav-toggle{display:block;} }
  @media (min-width:961px){ .nav-drawer{display:none;} }
  .mast-right nav a.here{color:var(--red);}
  .mast-right nav a.here::after{transform:scaleX(1);}

  /* ---- modal ---- */
  .modal{position:fixed; inset:0; z-index:200; display:none;}
  .modal.open{display:block;}
  .modal-scrim{position:absolute; inset:0; background:rgba(11,11,13,.72);
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); animation:mfade .3s ease both;}
  @keyframes mfade{from{opacity:0}to{opacity:1}}
  @keyframes mrise{from{opacity:0; transform:translate(-50%,-46%)}to{opacity:1; transform:translate(-50%,-50%)}}
  .modal-panel{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    width:min(620px,calc(100vw - 32px)); max-height:min(88vh,860px); overflow-y:auto;
    background:var(--paper); color:var(--ink); padding:clamp(26px,3vw,44px);
    animation:mrise .38s cubic-bezier(.2,.8,.2,1) both; box-shadow:0 30px 80px rgba(11,11,13,.4);}
  @media (prefers-reduced-motion: reduce){ .modal-scrim,.modal-panel{animation:none !important;} }
  .modal-x{position:absolute; top:12px; right:12px; width:38px; height:38px; border:none; background:none;
    cursor:pointer; font-size:15px; color:var(--soft); transition:color .2s, transform .2s var(--spring);}
  .modal-x:hover{color:var(--red);} .modal-x:active{transform:scale(.9);}
  .modal-head{margin-bottom:24px; padding-right:34px;}
  .modal-title{font-family:var(--disp); font-weight:400; font-size:clamp(26px,3vw,42px); line-height:1;
    letter-spacing:-.02em; margin-top:12px; text-transform:lowercase;}
  .modal-blurb{margin-top:14px; font-size:14.5px; line-height:1.55; color:var(--soft);}
  .modal-embed{width:100%; height:min(72vh,620px); border:0; display:block;}
  .modal-embed.film{aspect-ratio:16/9; height:auto;}

  /* ---- lead form ---- */
  .lead{display:flex; flex-direction:column; gap:14px;}
  .lead-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
  @media (max-width:520px){ .lead-row{grid-template-columns:1fr;} }
  .lead label{display:flex; flex-direction:column; gap:7px; font-family:var(--grote); font-size:10px;
    letter-spacing:.18em; text-transform:uppercase; font-weight:700; color:var(--soft);}
  .lead .opt{text-transform:none; letter-spacing:0; font-weight:400; opacity:.7;}
  .lead input,.lead select,.lead textarea{font-family:var(--sans); font-size:15px; color:var(--ink);
    background:var(--paper-2); border:1px solid var(--line); padding:13px 14px; width:100%;
    transition:border-color .2s, background .2s;}
  .lead textarea{resize:vertical; min-height:84px; line-height:1.5;}
  .lead input:focus,.lead select:focus,.lead textarea:focus{border-color:var(--red); background:var(--paper); outline:none;}
  .lead button[type=submit]{align-self:flex-start; margin-top:6px;}
  .lead button[type=submit]:disabled{opacity:.55; cursor:wait;}
  .lead-err{font-size:13.5px; color:var(--red); font-weight:500;}
  .lead-err a{text-decoration:underline;}
  .lead-fine{font-size:12px; color:var(--faint); line-height:1.5;}

  /* ---- inner-page hero ---- */
  .phero{padding:clamp(46px,6vw,96px) 0 clamp(34px,4vw,60px); border-bottom:1px solid var(--line);}
  .phero .crumb{font-family:var(--grote); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
    color:var(--faint); margin-bottom:clamp(18px,2.4vw,32px);}
  .phero .crumb a:hover{color:var(--red);}
  .phero h1{font-family:var(--disp); font-weight:400; font-size:clamp(44px,9vw,140px); line-height:.92;
    letter-spacing:-.016em; text-transform:lowercase;}
  .phero h1 em{font-style:italic; font-weight:400;}
  .phero .psub{display:flex; justify-content:space-between; align-items:flex-end; gap:28px;
    flex-wrap:wrap; margin-top:clamp(20px,2.4vw,34px);}

  /* ---- course grid ---- */
  .cgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line);
    border:1px solid var(--line);}
  @media (max-width:960px){ .cgrid{grid-template-columns:1fr 1fr;} }
  @media (max-width:620px){ .cgrid{grid-template-columns:1fr;} }
  .ccard{position:relative; isolation:isolate; overflow:hidden;
    background:var(--paper); padding:clamp(22px,2.2vw,34px); display:flex; flex-direction:column;
    min-height:clamp(300px,34vh,380px); transition:background .3s, transform .25s var(--spring);}
  .ccard:hover{transform:translateY(-4px);}

  /* ---- course thumbnail: the artwork sits BEHIND the card and fades out before
     the title, so the name is always on solid paper and always legible. Drop a
     file into assets/img/courses/ and set `thumb` in AURA_DATA — no layout change. ---- */
  .cthumb{position:absolute; inset:0; z-index:-1; overflow:hidden; background:var(--paper-2);
    display:flex; align-items:flex-start; justify-content:flex-end;}
  .cthumb img{width:100%; height:100%; object-fit:cover; display:block;
    filter:grayscale(1) contrast(1.06); transition:filter .5s, transform .6s cubic-bezier(.2,.8,.2,1);}
  .ccard:hover .cthumb img{filter:grayscale(0) contrast(1); transform:scale(1.04);}
  /* diagonal rule pattern — the same device as the hero cover, so an empty slot
     reads as a designed panel rather than a missing asset */
  .cthumb.empty{background:
    repeating-linear-gradient(-45deg, transparent 0 22px, rgba(11,11,13,.045) 22px 23px), var(--paper-2);}
  .cthumb .cmark{font-family:var(--disp); font-weight:400; line-height:.74;
    font-size:clamp(72px,9vw,132px); color:rgba(11,11,13,.09); padding:14px 18px 0 0;
    transition:color .4s;}
  .ccard:hover .cthumb .cmark{color:rgba(210,16,42,.16);}
  /* the fade: transparent over the art, solid paper by the time the title starts */
  .cthumb::after{content:""; position:absolute; inset:0;
    background:linear-gradient(180deg,
      rgba(247,246,242,0) 0%, rgba(247,246,242,.16) 30%,
      rgba(247,246,242,.80) 52%, var(--paper) 68%);}
  .ccard .c-top,.ccard .cn,.ccard .cd,.ccard .cf{position:relative;}
  .ccard .cn{margin-top:auto;}
  .ccard .cn{font-family:var(--disp); font-size:clamp(26px,2.6vw,40px); font-weight:400; line-height:.98; margin-top:auto;}
  .ccard .cd{font-size:13.5px; line-height:1.55; color:var(--soft); margin-top:12px;}
  .ccard .cf{display:flex; justify-content:space-between; align-items:center; margin-top:20px;
    padding-top:16px; border-top:1px solid var(--line);}
  .ccard .cp{font-family:var(--disp); font-size:clamp(20px,1.8vw,28px); font-weight:400;}
  .ccard .cgo{font-family:var(--grote); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
    font-weight:800; color:var(--red);}

  /* ---- course detail ---- */
  .cdetail-grid{display:grid; grid-template-columns:1.35fr .65fr; gap:clamp(28px,4vw,72px); align-items:start;}
  @media (max-width:900px){ .cdetail-grid{grid-template-columns:1fr;} }
  .cbox{border:1px solid var(--line-2); padding:clamp(22px,2.4vw,34px); position:sticky; top:96px;}
  .cbox .price{font-family:var(--disp); font-size:clamp(34px,4vw,60px); font-weight:400; line-height:1;}
  .cbox ul{list-style:none; margin:20px 0;}
  .cbox li{display:flex; justify-content:space-between; gap:14px; padding:11px 0;
    border-top:1px solid var(--line); font-size:14px;}
  .cbox li span:first-child{color:var(--faint); font-family:var(--grote); font-size:9.5px;
    letter-spacing:.18em; text-transform:uppercase; font-weight:700;}
  .clist{list-style:none; margin-top:18px;}
  .clist li{padding:13px 0 13px 30px; border-top:1px solid var(--line); position:relative; font-size:15.5px; line-height:1.5;}
  .clist li::before{content:"→"; position:absolute; left:0; color:var(--red); font-weight:700;}
  .csyl{list-style:none; margin-top:18px; counter-reset:s;}
  .csyl li{counter-increment:s; padding:16px 0 16px 52px; border-top:1px solid var(--line);
    position:relative; font-size:15.5px; line-height:1.5;}
  .csyl li::before{content:counter(s,decimal-leading-zero); position:absolute; left:0; top:16px;
    font-family:var(--grote); font-size:10px; letter-spacing:.14em; font-weight:800; color:var(--red);}

  /* ==========================================================================
     COURSE PREVIEW — a 16:9 slot that is a designed object while it is empty,
     and takes a real embed the moment `preview` is set in AURA_DATA.
     ========================================================================== */
  .cpreview{position:relative; display:block; width:100%; aspect-ratio:16/9; overflow:hidden;
    background:var(--ink); color:var(--paper); border:none; padding:0; cursor:pointer;
    margin-bottom:clamp(30px,3.4vw,52px); -webkit-tap-highlight-color:transparent;}
  .cpreview .pv-diag{position:absolute; inset:0; opacity:.55;
    background:repeating-linear-gradient(-45deg, transparent 0 24px, rgba(247,246,242,.045) 24px 25px);}
  .cpreview .pv-mark{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    font-family:var(--disp); font-weight:400; font-size:clamp(120px,20vw,260px); line-height:.7;
    color:rgba(247,246,242,.07); pointer-events:none; white-space:nowrap;}
  .cpreview img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.5;}
  .pv-body{position:relative; z-index:2; height:100%; display:flex; align-items:center;
    gap:clamp(14px,1.6vw,22px); padding:clamp(18px,2.4vw,34px);}
  .pv-disc{flex:none; width:clamp(54px,4.4vw,72px); height:clamp(54px,4.4vw,72px); border-radius:50%;
    background:rgba(247,246,242,.1); -webkit-backdrop-filter:blur(11px); backdrop-filter:blur(11px);
    border:1px solid rgba(247,246,242,.4); color:var(--paper);
    display:flex; align-items:center; justify-content:center; font-size:17px;
    transition:transform .25s var(--spring), background .25s, border-color .25s;}
  .cpreview:hover .pv-disc{transform:scale(1.1); background:var(--red); border-color:var(--red);}
  .pv-txt b{font-family:var(--disp); font-weight:400; font-size:clamp(19px,1.8vw,28px);
    display:block; line-height:1; text-transform:lowercase;}
  .pv-txt .cap{display:block; margin-top:9px; color:rgba(247,246,242,.5);}
  .cpreview .pv-len{position:absolute; z-index:2; right:14px; bottom:12px;
    color:rgba(247,246,242,.62);}
  @media (max-width:600px){ .pv-body{flex-direction:column; align-items:flex-start; justify-content:center;} }

  /* ==========================================================================
     CURRICULUM — every module and every lesson, expandable. The summary line
     and all counts are computed from the data, never typed in.
     ========================================================================== */
  .curr-bar{display:flex; justify-content:space-between; align-items:baseline; gap:18px;
    flex-wrap:wrap; margin-bottom:14px;}
  .curr-sum{font-family:var(--grote); font-weight:700; font-size:11px; letter-spacing:.14em;
    text-transform:uppercase; color:var(--soft);}
  .curr{border-top:2px solid var(--ink);}
  .mod{border-bottom:1px solid var(--line);}
  .mod-head{display:flex; align-items:center; gap:clamp(12px,1.4vw,20px); width:100%;
    padding:clamp(15px,1.5vw,21px) 0; background:none; border:none; color:inherit; font:inherit;
    text-align:left; cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation;}
  .mod-n{flex:none; width:26px; font-family:var(--grote); font-weight:700; font-size:10.5px;
    letter-spacing:.14em; color:var(--faint);}
  .mod-t{flex:1; font-family:var(--disp); font-weight:400; font-size:clamp(18px,1.7vw,26px);
    line-height:1.06; transition:color .25s;}
  .mod-head:hover .mod-t{color:var(--red);}
  .mod-meta{flex:none; font-family:var(--grote); font-weight:700; font-size:9.5px; letter-spacing:.16em;
    text-transform:uppercase; color:var(--faint); white-space:nowrap;}
  @media (max-width:600px){ .mod-meta{display:none;} }
  .mod-plus{flex:none; font-family:var(--grote); font-size:18px; color:var(--red);
    transition:transform .35s var(--spring);}
  .mod.open .mod-plus{transform:rotate(45deg);}
  .mod-body{overflow:hidden; height:0;}
  .mod-inner{padding-bottom:14px;}

  .lesson{display:flex; align-items:center; gap:13px; padding:11px 0 11px 26px;
    border-top:1px solid var(--line-2); font-size:14.5px; line-height:1.45;}
  .lesson:first-child{border-top:none;}
  .lk{flex:none; width:21px; height:21px; border:1px solid var(--line-2); border-radius:50%;
    display:flex; align-items:center; justify-content:center; font-size:8.5px; color:var(--soft);}
  .lesson.is-free .lk{border-color:var(--red); color:var(--red);}
  .l-t{flex:1; min-width:0;}
  .l-free{flex:none; font-family:var(--grote); font-weight:800; font-size:9px; letter-spacing:.14em;
    text-transform:uppercase; color:var(--red); border:1px solid var(--red); padding:3px 7px;}
  .l-len{flex:none; font-variant-numeric:tabular-nums; font-size:12.5px; color:var(--faint);}
  @media (max-width:760px){
    .mod-head{padding:18px 0;}
    .lesson{padding:14px 0 14px 20px; font-size:15px; flex-wrap:wrap;}
    .l-t{flex:1 1 100%; order:2;}
    .lk{order:1;} .l-free{order:1;} .l-len{order:1; margin-left:auto;}
  }

  /* ---- clickable lesson (r2-play) ---- */
  .lesson.l-play{cursor:pointer; transition:background-color .2s;}
  .lesson.l-play:hover,
  .lesson.l-play:focus-visible{background-color:var(--paper-2); outline:none;}
  .lesson.l-play:focus-visible{box-shadow:inset 2px 0 0 var(--red);}

  /* ---- video modal (r2-play playback) ---- */
  .vid-wrap{position:relative; width:100%; background:#000;}
  .vid-player{width:100%; aspect-ratio:16/9; height:auto; display:block; background:#000;}
  .vid-err{margin-top:14px;}

  /* ---- generic section head for inner pages ---- */
  .shead{display:flex; justify-content:space-between; align-items:baseline; gap:20px; flex-wrap:wrap;
    padding-bottom:10px; border-bottom:1px solid var(--line); margin-bottom:clamp(22px,2.6vw,38px);}

  /* ---- course.html student sign-in strip, sits under the "Course content" shead ---- */
  .cauth{margin-top:calc(-1 * clamp(22px,2.6vw,38px) + 14px); margin-bottom:22px;
    font-family:var(--sans); font-size:13px; color:var(--soft); display:flex; align-items:center; gap:8px;}
  .cauth b{color:var(--ink); font-weight:700;}
  .cauth .link-u{font-size:10.5px;}
  .prose{max-width:62ch;}
  .prose p{font-size:clamp(15px,1.15vw,18px); line-height:1.65; color:var(--soft); margin-bottom:18px;}
  .prose p strong{color:var(--ink); font-weight:700;}

  /* ==========================================================================
     MOBILE — built for the phone, not squeezed onto it.
     The editorial system runs on small caps and hairline rules, which is right
     on a desktop and unusable on a phone. Below 760px every interactive target
     clears 44px and no interactive text sits under 13px.
     ========================================================================== */
  @media (max-width:760px){

    /* ---- type: legible sizes for anything you act on ---- */
    .btn{font-size:13px; padding:17px 26px; min-height:48px;}
    .link-u{font-size:12.5px; padding:13px 0; min-height:44px; display:inline-flex; align-items:center;}
    .book{font-size:11.5px; padding:15px 16px; min-height:46px;}
    .cap{font-size:10.5px; letter-spacing:.18em;}
    .eyebrow{font-size:11.5px; letter-spacing:.2em;}
    .lead{font-size:16px; line-height:1.6;}
    .wordmark sup{font-size:9px;}
    .prose p{font-size:16.5px; line-height:1.7;}

    /* ---- forms: 16px inputs, or iOS zooms the whole page on focus ---- */
    .lead label{font-size:11.5px; letter-spacing:.14em;}
    .lead input,.lead select,.lead textarea{font-size:16px; padding:15px 14px;}
    .lead-fine{font-size:12.5px;}
    .lead button[type=submit]{width:100%; text-align:center;}

    /* ---- tap targets ---- */
    .brand{padding:11px 0;}
    .nav-toggle{width:44px; height:44px; display:flex; flex-direction:column;
      justify-content:center; align-items:center; padding:0; margin-right:-10px;}
    .mast-row{gap:12px;}
    footer ul li{margin-bottom:0;}
    footer ul a{display:block; padding:13px 0; font-size:15px;}
    footer h2{font-size:11px;}
    .toc li{padding:0;} .toc li > a{padding:15px 0;}
    .cdetail li{padding:15px 0; font-size:15px;}
    .cbox li{padding:14px 0;}
    .school-list li{padding:16px 0 16px 30px; font-size:16px;}
    .rm-tab{padding:15px 18px; font-size:11.5px; min-height:46px;}
    .quiz-opt{padding:17px 16px; font-size:15.5px;}
    .quiz-go{padding:17px 24px; font-size:12.5px;}
    .xhead{padding:18px 0;}
    .comm{min-height:auto; padding:24px 22px;}
    .ccard{min-height:auto; padding:26px 22px;}
    .course{min-height:auto;}

    /* ---- layout ---- */
    .hero-facts{grid-template-columns:1fr 1fr 1fr;}
    .hero-facts div{padding:12px 8px 0;}
    .hero-facts b{font-size:clamp(20px,6vw,30px);}
    .cbox{position:static;}                 /* sticky is meaningless once stacked */
    .modal-panel{width:calc(100vw - 20px); max-height:92vh; padding:26px 20px 30px;}
    .modal-title{font-size:clamp(24px,7vw,34px);}
    .quiz-meta div{flex:1 1 33%; padding-right:8px;}
    .quiz-meta b{font-size:19px;}

    /* ---- horizontal rails: momentum + snap, so a swipe lands cleanly ---- */
    .rail,.hs-track{-webkit-overflow-scrolling:touch; scroll-snap-type:x proximity;}
    .rail > *,.hs-track > *{scroll-snap-align:start;}
    .rail{padding-left:clamp(14px,4vw,24px);}
    .stop{flex:0 0 min(76vw,260px);}
  }

  /* very narrow phones: the masthead CTA and the hamburger stop competing */
  @media (max-width:400px){
    .book{padding:14px 12px; font-size:11px; letter-spacing:.06em;}
    .wordmark{font-size:20px;}
    .mast-center{display:none;}
  }

  /* Grid children default to min-width:auto, so one long word can push a column
     wider than its track. This is what overflowed the quiz column at 360px. */
  .quiz-wrap > *,.cdetail-grid > *,.schools-grid > *,.hero-grid > *,
  .founder > *,.contact-grid > *,.foot-grid > *{min-width:0;}

  @media (max-width:760px){
    /* inline links inside padded rows still need their own tap area */
    .cdetail li a,.cbox li a,.nav-drawer .drawer-foot a{display:inline-block; padding:11px 0; font-size:15px;}
    .book{font-size:12px;}
    .lead label{font-size:12px;}
    footer h2{font-size:11.5px;}
  }
  @media (max-width:400px){ .book{font-size:11.5px;} }

  @media (max-width:760px){
    /* long CTA labels must wrap rather than push past the viewport */
    .link-u{white-space:normal; line-height:1.5; text-align:left;}
    .cdetail li a,.cbox li a,.nav-drawer .drawer-foot a{padding:13px 0;}

    /* micro-caps floor: 9.5px uppercase is unreadable at arm's length on a phone */
    .cdetail li span:first-child,.cbox li span:first-child,.step .sm,.xskills span,
    .stop .n,.c-enroll,.ccard .cgo,.comm .cgo,.qcount,.pull cite,.fnote .sig,
    .contents .foot,.folio,.phero .crumb,.hs-hint,.quiz-res .cap{font-size:11px;}
    .xnum{font-size:11px;}
  }

  @media (max-width:760px){
    /* The sticky masthead already carries a permanent "Book a session", so the
       floating pill is redundant here — and it was covering quiz answers. */
    .glass-cta{display:none !important;}

    /* the hero is the whole argument; it should not read timid on a phone */
    .headline h1{font-size:clamp(52px,13.5vw,132px);}
    /* the marginal note is hidden at this width, so reclaim its lane */
    .hero-facts{margin-top:clamp(22px,5vw,30px);}
    .hero-facts .cap{font-size:9.5px; letter-spacing:.1em;}
    .cta{gap:14px; margin-top:18px;}
  }

  /* A section head already draws a rule, so the first row's border-top doubles it. */
  .shead + .clist li:first-child,.shead + .csyl li:first-child,
  .cbox ul li:first-child,.cdetail li:first-child{border-top:none;}

  /* ---- phone bottom pill nav ---- */
  .pillnav{position:fixed; left:50%; bottom:14px; transform:translateX(-50%); z-index:125;
    display:none; align-items:center; gap:2px; padding:5px;
    background:rgba(11,11,13,.96); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    border-radius:100px; border:1px solid rgba(247,246,242,.14);
    box-shadow:0 12px 34px rgba(11,11,13,.42); max-width:calc(100vw - 20px);}
  .pillnav a,.pillnav button{font-family:var(--grote); font-weight:800; font-size:10.5px;
    letter-spacing:.09em; text-transform:uppercase; color:rgba(247,246,242,.74);
    padding:14px 15px; border-radius:100px; border:none; background:none; white-space:nowrap;
    cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background .25s, color .25s;}
  .pillnav a.on{background:rgba(247,246,242,.12); color:var(--paper);}
  .pillnav .pn-book{background:var(--red); color:#fff;}
  .pillnav a:active,.pillnav button:active{transform:scale(.94);}

  @media (max-width:760px){
    .pillnav{display:flex;}
    body{padding-bottom:84px;}          /* so the footer is never hidden behind it */
    /* the contents list is replaced by the pill nav on a phone */
    .hero-grid .contents{display:none;}

    /* ---- compact footer: one link per full-width row was absurdly tall ---- */
    .foot-grid{grid-template-columns:1fr 1fr; gap:26px 20px;}
    footer{padding:44px 0 22px;}
    footer .foot-grid > div:first-child{grid-column:1 / -1;}
    footer .tagline{font-size:13px; max-width:none; margin-top:12px;}
    footer ul a{padding:9px 0; font-size:14px;}
    footer h2{margin-bottom:8px;}
    .foot-bottom{margin-top:28px; padding-top:16px; font-size:9.5px; gap:6px;}
  }
  @media (max-width:400px){ .pillnav a,.pillnav button{padding:14px 12px; font-size:10px;} }

  /* ---- swipe hint: a dot travelling a short track, instead of an arrow glyph ---- */
  .swipe{display:inline-block; position:relative; width:34px; height:8px;
    vertical-align:middle; margin-right:9px;}
  .swipe::before{content:""; position:absolute; left:0; right:0; top:50%;
    height:1px; background:currentColor; opacity:.28;}
  .swipe i{position:absolute; top:50%; left:0; width:7px; height:7px; margin-top:-3.5px;
    border-radius:50%; background:var(--red); animation:swipeRun 2.4s cubic-bezier(.55,0,.35,1) infinite;}
  @keyframes swipeRun{
    0%{transform:translateX(0); opacity:0}
    12%{opacity:1}
    62%{transform:translateX(27px); opacity:1}
    88%,100%{transform:translateX(27px); opacity:0}
  }
  @media (prefers-reduced-motion: reduce){ .swipe i{animation:none; transform:translateX(13px); opacity:1;} }

  /* Landscape phones are wider than 760px and were falling through to the desktop rules:
     pill nav hidden, floating CTA shown — its pulsing red dot marooned at the bottom of a
     390px-tall screen. Declared last so it beats the .pillnav base rule above. */
  @media (pointer:coarse) and (max-height:560px){
    .glass-cta{display:none !important;}
    .pillnav{display:flex;}
    body{padding-bottom:78px;}
  }

  /* ==========================================================================
     THEME TOGGLE — a half-filled disc, the printer's density mark. Reads as
     "contrast" in both grounds without needing a sun or a moon.
     ========================================================================== */
  .theme-toggle{width:34px; height:34px; flex:none; padding:0; cursor:pointer;
    background:none; border:1px solid var(--line-2); border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center; color:inherit;
    -webkit-tap-highlight-color:transparent; touch-action:manipulation;
    transition:border-color .25s, transform .2s var(--spring);}
  .theme-toggle:hover{border-color:var(--red);}
  .theme-toggle:active{transform:scale(.9);}
  .theme-toggle .tt-ico{width:15px; height:15px; border-radius:50%;
    border:1.5px solid currentColor; overflow:hidden; position:relative;}
  /* the fill is the right half only — it flips side with the theme */
  .theme-toggle .tt-ico::after{content:""; position:absolute; top:-1px; bottom:-1px; right:-1px;
    width:50%; background:currentColor; transition:transform .3s cubic-bezier(.6,0,.2,1);}
  :root[data-theme="dark"] .theme-toggle .tt-ico::after{transform:translateX(-100%);}
  .theme-toggle .tt-label{display:none;}
  /* the drawer copy gets a labelled row instead of a bare icon */
  .nav-drawer .theme-toggle{width:auto; height:auto; border-radius:100px; gap:11px;
    padding:13px 20px; align-self:flex-start;}
  .nav-drawer .theme-toggle .tt-label{display:inline; font-family:var(--grote); font-weight:800;
    font-size:11px; letter-spacing:.1em; text-transform:uppercase;}
  @media (max-width:960px){ .mast-right .theme-toggle{display:none;} }

  /* only for the length of a swap — see auraSetTheme() in theme.js */
  .theme-anim,.theme-anim *,.theme-anim *::before,.theme-anim *::after{
    transition:background-color .3s ease, color .3s ease, border-color .3s ease, fill .3s ease !important;}
  @media (prefers-reduced-motion: reduce){ .theme-anim,.theme-anim *{transition:none !important;} }

  /* ==========================================================================
     DARK THEME
     ==========================================================================
     The sheet is already built on --paper (ground) / --ink (text and inverted
     chrome) / --red, so flipping those three tokens carries most of the page.

     What it cannot carry, and why each override below exists:

     1. Large slabs. `.s-ink`, `.brk`, `.cover`, `.quiz-card`, `.comm`, `.fpanel`
        use `background:var(--ink)`. Flipped, they become full-bleed cream —
        a flashbang at night, and it would invert the page's whole rhythm.
        They stay dark on a *raised* ground (--slab) so the light-on-dark rules
        already written for them (rgba(247,246,242,…), --line-i) stay correct.
        Anything inside them that resolved its colour through var(--paper)
        does need flipping — that is what the `color:` overrides are.

     2. Thin inverted elements — the marquee strips, .btn-fill, .book — SHOULD
        flip. A 40px cream band on black is the same hard swing the light page
        gets from a black band on paper, at a size that does not glare. Those
        are left alone deliberately.

     3. Red splits in two. Deep crimson goes muddy on black, so --red is
        lifted for accent text (5.6:1 on the ground). But lifted red under
        WHITE text only reaches 3:1, so every red fill behind white keeps a
        deep --red-deep (5.6:1 with #fff — better than the light theme manages).
     ========================================================================== */
  :root[data-theme="dark"]{
    color-scheme:dark;                 /* native scrollbars, selects and autofill */

    --paper:#0F0E0C;                   /* page ground — warm, to echo the paper stock */
    --paper-2:#1A1815;                 /* footer, input fills */
    --ink:#F4F1E8;                     /* text, rules, inverted chrome */
    --ink-2:#E4DFD2;
    --slab:#1A1714;                    /* raised surface: was a black slab on paper */
    --slab-2:#241F1A;                  /* its hover */
    --void:#08070A;                    /* deeper than ground — The Break only */

    --red:#FF4155;                     /* accent ON dark: 5.6:1 */
    --red-deep:#CE1128;                /* fill UNDER white text: 5.6:1 */

    --soft:#ABA598;                    /* secondary text: 7.4:1 */
    --faint:#8B8578;                   /* micro-caps: 5.1:1 */
    --line:rgba(244,241,232,.15);
    --line-2:rgba(244,241,232,.30);
    /* --line-i is the rule colour INSIDE a slab. Slabs stay dark, so it does not flip. */
  }

  /* --- grain: multiply is invisible on black --- */
  :root[data-theme="dark"] .grain{mix-blend-mode:screen; opacity:.03;}

  /* --- 1. slabs stay dark, and take the raised ground --- */
  :root[data-theme="dark"] .s-ink,
  :root[data-theme="dark"] .cover,
  :root[data-theme="dark"] .quiz-card,
  :root[data-theme="dark"] .fpanel{background:var(--slab); color:var(--ink);}
  :root[data-theme="dark"] .cpreview{background:var(--slab); color:var(--ink);}
  :root[data-theme="dark"] .pv-disc{color:var(--ink);}
  /* the thumbnail scrim has to fade to whatever the card ground actually is */
  :root[data-theme="dark"] .cthumb::after{background:linear-gradient(180deg,
      rgba(15,14,12,0) 0%, rgba(15,14,12,.18) 30%,
      rgba(15,14,12,.82) 52%, var(--paper) 68%);}
  :root[data-theme="dark"] .cthumb.empty{background:
    repeating-linear-gradient(-45deg, transparent 0 22px, rgba(244,241,232,.05) 22px 23px), var(--paper-2);}
  :root[data-theme="dark"] .cthumb .cmark{color:rgba(244,241,232,.10);}
  /* .s-ink is a raised slab in dark, so its cards fade to that instead of to ink */
  :root[data-theme="dark"] .s-ink .cthumb::after{background:linear-gradient(180deg,
    rgba(26,23,20,0) 0%, rgba(26,23,20,.22) 30%, rgba(26,23,20,.86) 52%, var(--slab) 68%);}
  :root[data-theme="dark"] .ccard:hover .cthumb .cmark{color:rgba(255,65,85,.20);}
  :root[data-theme="dark"] .comm{background:var(--slab);}
  :root[data-theme="dark"] .comm:hover{background:var(--slab-2);}
  :root[data-theme="dark"] .ccard:hover{background:var(--slab);}
  :root[data-theme="dark"] .brk{background:var(--void); color:var(--ink);}
  /* the node halo punches through the rail line — it has to match what is behind it */
  :root[data-theme="dark"] .stop::after{box-shadow:0 0 0 5px var(--slab);}

  /* --- colours inside those slabs that resolved through var(--paper) --- */
  :root[data-theme="dark"] .rm-tab,
  :root[data-theme="dark"] .quiz-opt,
  :root[data-theme="dark"] .play .disc,
  :root[data-theme="dark"] .mg-note.paper{color:var(--ink);}
  :root[data-theme="dark"] .quiz-invite:hover .quiz-go{background:var(--ink); color:var(--paper);}
  /* .btn-invert only ever sits on a slab or on red — both want the cream fill */
  :root[data-theme="dark"] .btn-invert{background:var(--ink); color:var(--paper);}

  /* --- 3. red fills that carry white text keep the deep crimson --- */
  :root[data-theme="dark"] .s-red{background:var(--red-deep);}
  :root[data-theme="dark"] .btn-red,
  :root[data-theme="dark"] .quiz-go,
  :root[data-theme="dark"] .pillnav .pn-book,
  :root[data-theme="dark"] .rm-tab.on,
  :root[data-theme="dark"] .quiz-opt.picked{background:var(--red-deep);}
  :root[data-theme="dark"] .rm-tab.on{border-color:var(--red-deep);}
  :root[data-theme="dark"] .quiz-opt.picked{border-color:var(--red-deep);}
  :root[data-theme="dark"] .quiz-opt:hover .ql{background:var(--red-deep); border-color:var(--red-deep);}
  :root[data-theme="dark"] .btn-fill:hover,
  :root[data-theme="dark"] .btn-invert:hover{background:var(--red-deep); color:#fff;}
  :root[data-theme="dark"] .book:hover{background:var(--red-deep); color:#fff;}
  :root[data-theme="dark"] .cover:hover .play .disc{background:var(--red-deep); border-color:var(--red-deep);}
  /* the marquee band is cream in dark, so its dingbats need the deep red too */
  :root[data-theme="dark"] .marquee:not(.inv) b{color:var(--red-deep);}

  /* --- chrome --- */
  :root[data-theme="dark"] .masthead{background:rgba(15,14,12,.80);
    border-bottom-color:var(--line-2);}
  /* the floating pill inverts — cream on black is what makes it read as floating */
  :root[data-theme="dark"] .glass-cta{background:rgba(244,241,232,.93); color:var(--paper);
    border-color:rgba(15,14,12,.12); box-shadow:0 12px 38px rgba(0,0,0,.55);}
  :root[data-theme="dark"] .glass-cta:hover{background:var(--red-deep); color:#fff;}
  :root[data-theme="dark"] .glass-cta .gdot{background:var(--red-deep);}
  :root[data-theme="dark"] .glass-cta:hover .gdot{background:#fff;}
  /* the pill nav is already dark, so on a dark ground it needs lifting off it */
  :root[data-theme="dark"] .pillnav{background:rgba(36,31,26,.96);
    border-color:rgba(244,241,232,.20); box-shadow:0 12px 34px rgba(0,0,0,.6);}
  /* the bar stays dark, so the active item's label must not follow --paper down */
  :root[data-theme="dark"] .pillnav a.on{color:var(--ink);}
  :root[data-theme="dark"] .modal-scrim{background:rgba(0,0,0,.82);}
  :root[data-theme="dark"] .modal-panel{border:1px solid var(--line);
    box-shadow:0 30px 80px rgba(0,0,0,.7);}
  :root[data-theme="dark"] footer{border-top-color:var(--line-2);}

  /* ============================================================================
     CLEAN-AGENCY DESIGN SYSTEM — authoritative base components.

     Named in task-1-brief §Interfaces; reused verbatim by later page/portal
     tasks. Placed at the end so these definitions win source-order over any
     legacy editorial rules above (which are removed page-by-page in T3–T6).
     Motion is transform/opacity only and collapses under reduced-motion.
     ============================================================================ */

  /* --- type --- */
  h1,h2,h3,h4,h5,h6{font-family:var(--disp); font-weight:600; letter-spacing:-.02em;
    line-height:1.08; color:var(--ink); text-transform:none;}
  h1{font-size:clamp(40px,7vw,76px); font-weight:700; line-height:1.02; letter-spacing:-.025em;}
  h2{font-size:clamp(30px,4.6vw,52px);}
  h3{font-size:clamp(21px,2.6vw,30px);}
  .mono{font-family:var(--mono);}

  /* --- layout --- */
  .wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad);}
  .sec{padding-block:clamp(64px,10vh,128px);}

  /* --- eyebrow --- */
  /* Section labels ("Stage 2 · real jobs you can do"). Bumped to bold at a slightly
     larger size with tighter tracking — at 500 weight and .18em these read as faint
     decoration rather than the section headings they actually are. */
  .eyebrow{display:inline-block; font-family:var(--mono); font-weight:700; font-size:13px;
    letter-spacing:.13em; text-transform:uppercase; color:var(--marigold-deep);}
  /* The label that introduces a whole section ("how counselling works") is doing
     the job of a heading, so give it heading weight: larger, tighter, and lifted
     off the h2 beneath it. Section labels only — inline eyebrows keep the size
     above so nothing else in the page shifts. */
  .home .sec-head .eyebrow,
  .home .p-head .eyebrow,
  .home .runhead .eyebrow{font-size:clamp(15px,1.5vw,18px); font-weight:800;
    letter-spacing:.09em; margin-bottom:12px;}

  /* --- buttons --- */
  .btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
    font-family:var(--body); font-weight:600; font-size:15px; line-height:1;
    padding:14px 24px; min-height:48px; border-radius:12px; border:1px solid transparent;
    cursor:pointer; white-space:nowrap; text-decoration:none; text-transform:none; letter-spacing:0;
    -webkit-tap-highlight-color:transparent; touch-action:manipulation;
    transition:transform .18s var(--ease), box-shadow .25s var(--ease),
      background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);}
  .btn:active{transform:scale(.97);}
  .btn--solid{background:var(--marigold-deep); color:var(--ink);
    box-shadow:0 1px 2px rgba(233,122,31,.25), 0 10px 26px rgba(233,122,31,.28);}
  .btn--solid:hover{background:#d86e14;
    box-shadow:0 2px 6px rgba(233,122,31,.30), 0 16px 40px rgba(233,122,31,.34);}
  .btn--ghost{background:var(--card); color:var(--ink); border-color:var(--line); box-shadow:var(--sh-1);}
  .btn--ghost:hover{border-color:rgba(20,18,58,.24); box-shadow:var(--sh-2);}

  /* --- card --- */
  .card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
    box-shadow:var(--sh-1); padding:clamp(20px,3vw,28px);
    transition:transform .25s var(--ease), box-shadow .25s var(--ease);}
  .card:hover{transform:translateY(-3px); box-shadow:var(--sh-2);}
  .card:active{transform:translateY(-1px); box-shadow:var(--sh-2);}

  /* --- chip (pill) --- */
  .chip{display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:999px;
    background:var(--paper-dim); color:var(--ink-soft); border:1px solid var(--line);
    font-family:var(--body); font-size:13px; font-weight:500; line-height:1; white-space:nowrap;}

  /* --- form controls --- */
  .field{display:flex; flex-direction:column; gap:8px; margin-bottom:16px;}
  .label{font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.08em;
    text-transform:uppercase; color:var(--ink-soft);}
  .input{width:100%; font-family:var(--body); font-size:16px; color:var(--ink); line-height:1.3;
    background:var(--card); border:1px solid var(--line); border-radius:12px;
    padding:14px 16px; min-height:48px;
    transition:border-color .2s var(--ease), box-shadow .2s var(--ease);}
  .input::placeholder{color:var(--ink-faint);}
  .input:focus{outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(18,165,148,.18);}
  textarea.input{min-height:120px; resize:vertical;}

  /* --- sticky glass nav --- */
  .glass-nav{position:sticky; top:0; z-index:100;
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding:14px clamp(16px,4vw,32px);
    background:rgba(251,250,247,.92);
    -webkit-backdrop-filter:blur(8px) saturate(1.2);
    backdrop-filter:blur(8px) saturate(1.2);
    border-bottom:1px solid var(--line);}

  /* ============================================================================
     LIQUID GLASS — reusable frosted material (Apple visionOS / iOS-26 "Liquid
     Glass" vibe). Applied to the top nav and the community card + channel tiles.
     Depth + a lit edge: a saturated backdrop blur over a translucent fill, a
     bright inner border, a soft outer shadow, a fixed specular sheen (::before),
     and a pointer-tracked highlight (::after, driven by --gx/--gy set in aura.js
     on pointer:fine + motion-on). Pseudo-elements inherit the radius so rounded
     surfaces stay clean; motion is opacity + background-position only, so the
     material is fully static wherever the JS is inert. Reusable — add `.lglass`
     to any element and it becomes glass. */
  .lglass{ position:relative; isolation:isolate; border-radius:var(--radius);
    background:linear-gradient(180deg, rgba(255,255,255,.60), rgba(255,255,255,.42));
    -webkit-backdrop-filter:blur(11px) saturate(1.5);
    backdrop-filter:blur(11px) saturate(1.5);
    border:1px solid rgba(255,255,255,.6);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.9),
      inset 1px 0 0 rgba(255,255,255,.5),
      inset 0 -1px 0 rgba(20,18,58,.04),
      0 1px 2px rgba(20,18,58,.05),
      0 20px 46px -16px rgba(20,18,58,.24);}
  /* fixed specular sheen — a soft lit edge sweeping from the top-left */
  .lglass::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
    border-radius:inherit;
    background:linear-gradient(135deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.14) 24%, rgba(255,255,255,0) 48%);
    opacity:.85; transition:opacity .4s var(--ease);}
  /* pointer-tracked specular highlight — its centre is driven by --gx/--gy */
  .lglass::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
    border-radius:inherit;
    background:radial-gradient(200px circle at var(--gx,50%) var(--gy,50%),
      rgba(255,255,255,.55), rgba(255,255,255,0) 60%);
    opacity:0; transition:opacity .45s var(--ease);}
  .lglass > *{ position:relative; z-index:1; }
  @media (hover:hover) and (pointer:fine){
    .lglass{ transition:box-shadow .35s var(--ease), transform .35s var(--ease); }
    .lglass:hover{ box-shadow:
      inset 0 1px 0 rgba(255,255,255,1),
      inset 1px 0 0 rgba(255,255,255,.6),
      inset 0 -1px 0 rgba(20,18,58,.05),
      0 2px 6px rgba(20,18,58,.06),
      0 28px 62px -16px rgba(20,18,58,.30);}
    .lglass:hover::before{ opacity:1; }
    .lglass:hover::after{ opacity:1; }
  }
  @media (prefers-reduced-motion:reduce){
    .lglass::after{ display:none; }
    .lglass::before{ transition:none; }
  }

  /* --- the top nav as a liquid-glass bar (full-bleed: keep it edge-to-edge with
         only a lit bottom hairline, and let inner shadows breathe) --- */
  .glass-nav.lglass{ border-radius:0; border-left:0; border-right:0; border-top:0;
    border-bottom:1px solid rgba(255,255,255,.55);
    background:linear-gradient(180deg, rgba(251,250,247,.93), rgba(251,250,247,.90));
    /* explicit cheap blur — overrides the .lglass base blur(11px) so the always-
       visible bar stays light on scroll (near-opaque paper does the real work) */
    -webkit-backdrop-filter:blur(8px) saturate(1.2); backdrop-filter:blur(8px) saturate(1.2);
    box-shadow:0 1px 0 rgba(255,255,255,.5), 0 14px 34px -20px rgba(20,18,58,.28);
    transition:box-shadow .4s var(--ease), background .4s var(--ease), margin-bottom .5s cubic-bezier(.2,.9,.24,1.08);}
  .glass-nav.lglass::before,
  .glass-nav.lglass::after{ border-radius:0; }
  /* KEEP THE BAR PINNED. .lglass sets position:relative so its ::before/::after
     glass layers have something to anchor to, and it is defined AFTER
     .glass-nav{position:sticky} at equal specificity — so it silently won and
     the header scrolled away. Only ≥1024px was unaffected, because the floating
     rule below is more specific. Restate sticky at .lglass's specificity. */
  .glass-nav.lglass{ position:sticky; top:0; }

  /* --- footer --- */
  .footer{background:var(--deep); color:rgba(255,255,255,.72);
    padding:clamp(48px,8vh,96px) 0; margin-top:clamp(64px,10vh,120px);}
  .footer a{color:rgba(255,255,255,.86);}
  .footer a:hover{color:#fff;}

  /* --- scroll reveal (transform/opacity only) --- */
  .reveal{opacity:0; transform:translateY(24px); transition:.7s var(--ease);}
  .reveal.in{opacity:1; transform:none;}
  @media (prefers-reduced-motion:reduce){
    .reveal,.m-rise{opacity:1; transform:none; transition:none;}
    *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important;
      transition-duration:.001ms !important; scroll-behavior:auto !important;}
  }

  /* ============================================================================
     CUSTOM CURSOR — desktop, pointer:fine only. Driven by aura.js; hidden until
     the first pointer move (body.cursor-ready) so it never sits parked at 0,0.
     ============================================================================ */
  .cursor-dot,.cursor-ring{position:fixed; top:0; left:0; pointer-events:none; z-index:900;
    border-radius:50%; will-change:transform; opacity:0;}
  .cursor-dot{width:7px; height:7px; background:var(--ink); margin:-3.5px 0 0 -3.5px;
    transition:opacity .3s var(--ease), background .25s var(--ease);}
  .cursor-ring{width:36px; height:36px; border:1.5px solid rgba(20,18,58,.34); margin:-18px 0 0 -18px;
    transition:width .25s var(--ease), height .25s var(--ease), margin .25s var(--ease),
      border-color .25s var(--ease), background .25s var(--ease), opacity .3s var(--ease);}
  body.cursor-on{cursor:none;}
  body.cursor-ready .cursor-dot,body.cursor-ready .cursor-ring{opacity:1;}
  body.cursor-hover .cursor-ring{width:54px; height:54px; margin:-27px 0 0 -27px;
    border-color:var(--marigold-deep); background:rgba(255,149,64,.1);}
  body.cursor-hover .cursor-dot{background:var(--marigold-deep);}
  /* --- over a DARK background (footer, the closing band, the marquee, ink cards/buttons):
     aura.js samples the real background colour under the pointer and flips the cursor to
     paper so it stays visible. Both parts already transition their colour, so it fades. --- */
  body.cursor-dark .cursor-dot{background:var(--paper);}
  body.cursor-dark .cursor-ring{border-color:rgba(251,250,247,.45);}
  body.cursor-dark.cursor-hover .cursor-ring{border-color:var(--marigold); background:rgba(255,149,64,.16);}
  body.cursor-dark.cursor-hover .cursor-dot{background:var(--marigold);}
  @media (max-width:899px), (prefers-reduced-motion:reduce), (pointer:coarse){
    .cursor-dot,.cursor-ring{display:none !important;}
    body.cursor-on{cursor:auto !important;}
  }

  /* ============================================================================
     CLEAN HOME PAGE — index.html sections + reskin of the JS-generated
     components (career explorer, roadmap, academy, quiz). Scoped to `.home` so
     these authoritative rules win over the legacy editorial CSS above without
     affecting pages that are reskinned in later tasks.
     Breakpoint: 900px. Motion is transform/opacity only; reduced-motion static.
     ============================================================================ */


  /* --- section rhythm --- */
  .home .sec-block{padding-block:clamp(56px,8vw,120px);}
  .home #academy{padding-top:clamp(40px,5vw,72px);}
  .home .lead{font-size:clamp(16px,1.5vw,19px); color:var(--ink-soft); max-width:58ch; line-height:1.55;}
  .home .sec-head{max-width:760px; margin-bottom:clamp(30px,4vw,52px);}
  .home .sec-head .eyebrow{margin-bottom:14px;}
  .home .sec-head h2{margin:0;}
  .home .sec-head h2 em{font-style:italic; color:var(--marigold-deep);}
  .home .sec-head p.lead{margin-top:16px;}
  .home .sec-head.runhead{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; max-width:none;}
  .home .cap{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint);}
  .home .hl{background-image:linear-gradient(var(--marigold-deep),var(--marigold-deep));
    background-repeat:no-repeat; background-position:0 92%; background-size:0 2px;
    transition:background-size .5s var(--ease); padding-bottom:1px;}
  .home .hl.on{background-size:100% 2px;}
  .home .link-u{display:inline-flex; align-items:center; gap:6px; background:none; border:none; padding:0;
    font-family:var(--disp); font-weight:600; font-size:15px; color:var(--marigold-deep); cursor:pointer;
    border-bottom:1.5px solid transparent; transition:border-color .25s var(--ease), color .25s var(--ease);}
  .home .link-u:hover{border-bottom-color:var(--marigold-deep);}
  .home .btn .ar{transition:transform .3s var(--ease);}
  .home .btn:hover .ar,.home .btn:active .ar{transform:translateX(4px);}

  /* --- clean overrides for JS-generated legacy buttons --- */
  .home .btn-fill{background:var(--marigold-deep); color:#fff; border:1px solid transparent; border-radius:12px;
    box-shadow:0 1px 2px rgba(233,122,31,.25),0 10px 26px rgba(233,122,31,.28);
    padding:14px 22px; min-height:48px; font-family:var(--body); font-weight:600; font-size:15px;
    display:inline-flex; align-items:center; gap:8px;}
  .home .btn-fill:hover{background:#d86e14;}
  .home .btn-invert{background:var(--marigold-deep); color:#fff; border:1px solid transparent; border-radius:12px;
    box-shadow:0 1px 2px rgba(233,122,31,.25),0 10px 26px rgba(233,122,31,.28);
    padding:14px 22px; min-height:48px; font-family:var(--body); font-weight:600; font-size:15px;
    display:inline-flex; align-items:center; gap:8px; cursor:pointer;}
  .home .btn-invert:hover{background:#d86e14;}

  /* ============ GLASS NAV / TOP APP BAR ============ */
  .home .site-nav{z-index:120; gap:18px;}
  .home .nav-brand{display:inline-flex; align-items:center; gap:11px; font-family:var(--disp);
    font-weight:700; font-size:20px; letter-spacing:-.01em; color:var(--ink);}
  .home .nav-mark{width:32px; height:32px; border-radius:9px; flex:none; display:grid; place-items:center;
    background:linear-gradient(135deg,var(--marigold),var(--teal)); color:var(--ink);
    font-family:var(--disp); font-weight:700; font-size:18px; box-shadow:0 4px 12px rgba(233,122,31,.28);}
  .home .nav-links{display:flex; align-items:center; gap:4px;}
  .home .nav-links a{position:relative; font-size:14.5px; font-weight:500; color:var(--ink-soft); padding:9px 14px; border-radius:11px;
    transition:color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);}
  .home .nav-links a:hover,.home .nav-links a.here{color:var(--ink); background:rgba(20,18,58,.05);}
  .home .nav-actions{display:flex; align-items:center; gap:10px;}
  .home .nav-book{min-height:42px; padding:0 18px; font-size:14.5px;}
  .home .nav-menu-btn{display:none; width:44px; height:44px; flex-direction:column; align-items:center;
    justify-content:center; gap:5px; border:1px solid var(--line); border-radius:11px; background:var(--card);
    box-shadow:var(--sh-1); cursor:pointer;}
  .home .nav-menu-btn span{width:18px; height:2px; background:var(--ink); border-radius:2px;}

  /* ============ NAV LABELS ============ */
  .home .nav-lab{display:inline-block; line-height:1.2;}

  /* ============================================================================
     MEGA-MENU (desktop >=1024px, real hover + fine pointer)
     ----------------------------------------------------------------------------
     Hovering / focusing a top nav item lights a GLOWING PILL behind it and drops a
     large liquid-glass PANEL from the bar. The bar squares its bottom corners while
     open and the panel squares its top corners + tucks up 1px, so bar + panel read
     as ONE glass container. There is ONE panel; its content is rebuilt to reflect
     the active item with a quick crossfade. Built in JS (initMegaMenu) from a menu
     model so the markup is authored once and works on all 7 pages. Below 1024px /
     on touch the panel is display:none -> fully inert; the mobile bottom bar + sheet
     menu are untouched. Motion is transform/opacity only; reduced-motion = no morph.
     ============================================================================ */

  /* the glowing active pill (set by JS on the hovered / focused / open item) */
  .home .nav-links a.is-active{
    color:var(--ink);
    background:linear-gradient(180deg, rgba(255,149,64,.22), rgba(255,149,64,.10));
    box-shadow:
      inset 0 0 0 1px rgba(255,149,64,.42),
      0 0 0 4px rgba(255,149,64,.10),
      0 10px 26px -8px rgba(233,122,31,.55),
      0 0 24px -2px rgba(255,149,64,.45);}

  /* panel — hidden everywhere by default; only >=1024 (fine pointer) enables it */
  .home .mega{display:none;}

  @media (min-width:1024px){
    .home .mega{
      display:block; position:absolute; top:100%; left:0; right:0;
      margin-top:-1px; z-index:-1;
      opacity:0; visibility:hidden; pointer-events:none;
      transform:translateY(-10px) scale(.985); transform-origin:top center;
      border-radius:0 0 22px 22px;
      transition:opacity .32s var(--ease), transform .42s cubic-bezier(.2,.9,.24,1.08), visibility 0s linear .42s;}
    .home .mega.lglass{border-top:0;
      background:linear-gradient(180deg, rgba(252,251,248,.95), rgba(250,249,245,.92));
      box-shadow:0 1px 0 rgba(255,255,255,.5), 0 30px 60px -22px rgba(20,18,58,.34);}
    .home .mega.lglass::before,
    .home .mega.lglass::after{border-radius:inherit;}
    .home .glass-nav.mega-open .mega{
      opacity:1; visibility:visible; pointer-events:auto;
      transform:translateY(0) scale(1);
      transition:opacity .32s var(--ease), transform .42s cubic-bezier(.2,.9,.24,1.08), visibility 0s;}

    .home .mega-inner{display:grid; grid-template-columns:minmax(210px,.95fr) 1.55fr; gap:clamp(20px,3vw,44px);
      padding:clamp(22px,2.4vw,32px) clamp(22px,2.6vw,36px) clamp(24px,2.6vw,32px);
      transition:opacity .15s var(--ease), transform .15s var(--ease);}
    .home .mega.swapping .mega-inner{opacity:0; transform:translateY(5px);}

    /* left featured column */
    .home .mega-feat{display:flex; flex-direction:column; align-items:flex-start; gap:13px;
      padding-right:clamp(14px,1.6vw,26px); border-right:1px solid var(--line);}
    .home .mega-eyebrow{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
      color:var(--marigold-deep);}
    .home .mega-head{font-family:var(--disp); font-weight:600; font-size:clamp(21px,1.85vw,26px);
      line-height:1.12; letter-spacing:-.01em; color:var(--ink); margin:0; min-height:2.24em;}
    .home .mega-all{display:inline-flex; align-items:center; gap:7px; margin-top:auto;
      font-family:var(--disp); font-weight:600; font-size:15px; color:var(--marigold-deep);
      border-bottom:1.5px solid transparent; transition:border-color .25s var(--ease);}
    .home .mega-all .ar{transition:transform .3s var(--ease);}
    .home .mega-all:hover{border-bottom-color:var(--marigold-deep);}
    .home .mega-all:hover .ar{transform:translateX(4px);}

    /* right sub-link cards */
    .home .mega-cards{display:grid; grid-template-columns:1fr; gap:8px; align-content:start;}
    .home .mega-card{display:flex; align-items:center; gap:14px; text-align:left; width:100%;
      padding:12px 15px; border-radius:14px; background:rgba(255,255,255,.72);
      border:1px solid rgba(20,18,58,.06); box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
      cursor:pointer; transition:transform .28s var(--ease), background .28s var(--ease), box-shadow .28s var(--ease);}
    .home .mega-card:hover{transform:translateX(4px); background:#fff;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 12px 26px -12px rgba(20,18,58,.28);}
    .home .mega-ic{flex:none; width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
      background:linear-gradient(135deg, rgba(255,149,64,.92), rgba(233,122,31,.94)); color:#fff;
      box-shadow:0 6px 16px -6px rgba(233,122,31,.6);}
    .home .mega-ic svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7;
      stroke-linecap:round; stroke-linejoin:round;}
    .home .mega-ct{display:flex; flex-direction:column; gap:2px; min-width:0;}
    .home .mega-t{font-family:var(--disp); font-weight:600; font-size:15.5px; color:var(--ink); line-height:1.2;}
    .home .mega-d{font-size:13px; color:var(--ink-soft); line-height:1.3;}
    .home .mega-card .ar{margin-left:auto; color:var(--ink-faint);
      transition:transform .3s var(--ease), color .25s var(--ease);}
    .home .mega-card:hover .ar{transform:translateX(3px); color:var(--marigold-deep);}
  }

  /* --- floating rounded glass bar (desktop >=1024) — a centered, rounded,
         liquid-glass bar with a small top gap, matching the reference's premium
         feel. Below 1024 the bar stays full-bleed (see .glass-nav.lglass above). --- */
  @media (min-width:1024px){
    .home .glass-nav.lglass{
      position:fixed; top:14px; left:0; right:0; z-index:120;
      max-width:1180px; margin:14px auto 0; border-radius:22px;
      border:1px solid rgba(255,255,255,.62);
      background:linear-gradient(180deg, rgba(251,250,247,.93), rgba(251,250,247,.90));
      -webkit-backdrop-filter:blur(8px) saturate(1.2); backdrop-filter:blur(8px) saturate(1.2);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 18px 44px -18px rgba(20,18,58,.30);
      transition:border-radius .42s cubic-bezier(.2,.9,.24,1.08), box-shadow .4s var(--ease), background .4s var(--ease);}
    .home .glass-nav.lglass::before,
    .home .glass-nav.lglass::after{border-radius:inherit;}
    .home .glass-nav.lglass.mega-open{
      border-bottom-left-radius:0; border-bottom-right-radius:0;
      background:linear-gradient(180deg, rgba(251,250,247,.88), rgba(251,250,247,.74));}
  }

  @media (prefers-reduced-motion:reduce){
    .home .mega,
    .home .mega-inner,
    .home .glass-nav.lglass{transition:none;}
  }

  /* --- sheet nav menu (mobile) --- */
  .sheet-menu{display:flex; flex-direction:column; gap:4px;}
  .sheet-menu a{display:flex; align-items:center; justify-content:space-between; padding:15px 4px;
    font-family:var(--disp); font-weight:600; font-size:19px; color:var(--ink);
    border-bottom:1px solid var(--line);}
  .sheet-menu a::after{content:"\2192"; color:var(--ink-faint);}
  .sheet-menu .btn{margin-top:18px; width:100%;}

  /* ============ HERO ============ */
  .home .hero{position:relative; overflow:hidden; padding-top:clamp(48px,9vh,96px); padding-bottom:clamp(44px,7vw,84px);}
  /* Desktop (>=1024) the glass nav is position:fixed (see floating-bar rule above), so it
     no longer reserves flow space — the hero rises to y=0 and its coloured blob background
     fills the whole top behind/around the floating pill (no flat full-width paper band).
     Pad the hero top so its content clears the ~86px-tall pill with breathing room. */
  @media (min-width:1024px){
    .home .hero{padding-top:clamp(120px,10vh,150px);}
  }
  .home .hero-bg{position:absolute; inset:0; z-index:0; pointer-events:none;}
  .home .blob{position:absolute; border-radius:50%; filter:blur(30px); opacity:.5; will-change:transform;}
  .home .blob.b1{width:520px; height:520px; top:-180px; left:-140px; background:radial-gradient(circle,rgba(255,149,64,.5),transparent 66%);}
  .home .blob.b2{width:560px; height:560px; top:-120px; right:-180px; background:radial-gradient(circle,rgba(18,165,148,.4),transparent 66%);}
  .home .blob.b3{width:420px; height:420px; bottom:-260px; left:38%; background:radial-gradient(circle,rgba(255,149,64,.24),transparent 66%);}
  .home .orbit{position:absolute; left:50%; top:46%; transform:translate(-50%,-50%); z-index:0; pointer-events:none;}
  .home .orbit i{position:absolute; left:50%; top:50%; border:1.5px solid var(--line); border-radius:50%; transform:translate(-50%,-50%);}
  .home .orbit .o1{width:460px; height:460px; animation:orbspin 42s linear infinite;}
  .home .orbit .o2{width:680px; height:680px; border-style:dashed; border-color:rgba(20,18,58,.08); animation:orbspin 64s linear infinite reverse;}
  .home .orbit .o3{width:920px; height:920px; border-color:rgba(20,18,58,.06); animation:orbspin 96s linear infinite;}
  .home .orbit .op{position:absolute; left:50%; top:50%; width:12px; height:12px; border-radius:50%;}
  .home .orbit .op-m{background:var(--marigold-deep); margin:-6px 0 0 224px; animation:orbspin 42s linear infinite; transform-origin:-224px 6px;}
  .home .orbit .op-t{background:var(--teal); margin:-6px 0 0 -340px; animation:orbspin 64s linear infinite reverse; transform-origin:340px 6px;}
  @keyframes orbspin{to{transform:translate(-50%,-50%) rotate(360deg);}}
  .home .hero-in{position:relative; z-index:2; max-width:940px; margin:0 auto; text-align:center;}
  .home .pill{display:inline-flex; align-items:center; gap:9px; background:var(--card); border:1px solid var(--line);
    padding:9px 16px 9px 12px; border-radius:999px; box-shadow:var(--sh-1); margin-bottom:24px;}
  .home .pill .dotpulse{width:8px; height:8px; border-radius:50%; background:var(--teal); position:relative;}
  .home .pill .dotpulse::after{content:""; position:absolute; inset:-4px; border-radius:50%; border:1px solid var(--teal); animation:dotpulse 2s ease-out infinite;}
  @keyframes dotpulse{0%{transform:scale(.6); opacity:.9} 100%{transform:scale(2.1); opacity:0}}
  .home .pill .mono{font-size:11.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.08em;}
  .home .hero-h1{font-family:var(--disp); font-weight:700; font-size:clamp(46px,8.4vw,98px);
    letter-spacing:-.035em; line-height:.98; color:var(--ink);}
  .home .hero-h1 em{font-style:italic; color:var(--marigold-deep);}
  .home .hero-sub{margin:24px auto 0; font-size:clamp(16px,1.8vw,21px); color:var(--ink-soft); max-width:58ch; line-height:1.5;}
  .home .hero-sub b{color:var(--ink); font-weight:600;}
  .home .hero-cta{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:32px;}
  .home .hero-stats{display:flex; margin:44px auto 0; max-width:640px; border:1px solid var(--line);
    border-radius:var(--radius); background:var(--card); box-shadow:var(--sh-1); overflow:hidden;}
  .home .hero-stats .st{flex:1; min-width:0; padding:20px 18px; text-align:center; border-right:1px solid rgba(20,18,58,.07);}
  .home .hero-stats .st:last-child{border-right:none;}
  .home .hero-stats .num{font-family:var(--disp); font-weight:700; font-size:clamp(22px,3vw,30px); letter-spacing:-.02em; color:var(--ink);}
  .home .hero-stats .num.m{color:var(--marigold-deep);}
  .home .hero-stats .num.t{color:var(--teal);}
  .home .hero-stats .lbl{font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); margin-top:5px;}
  .home .scroll-hint{display:flex; flex-direction:column; align-items:center; gap:8px; margin-top:40px; color:var(--ink-faint);}
  .home .scroll-hint .mono{font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;}
  .home .mouse{width:22px; height:34px; border:1.5px solid var(--ink-faint); border-radius:12px; position:relative;}
  .home .mouse::after{content:""; position:absolute; left:50%; top:7px; width:3px; height:6px; background:var(--ink-faint);
    border-radius:2px; transform:translateX(-50%); animation:mousewheel 1.8s ease infinite;}
  @keyframes mousewheel{0%{opacity:0; transform:translate(-50%,0)} 30%{opacity:1} 60%{opacity:1; transform:translate(-50%,8px)} 100%{opacity:0; transform:translate(-50%,8px)}}

  /* ============ MARQUEE (clean) ============ */
  .home .marquee{background:var(--ink); color:var(--paper); border:none; overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
  .home .marquee.inv{background:var(--paper-dim); color:var(--ink-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
  .home .marquee .track{font-family:var(--disp); font-weight:500; font-size:clamp(15px,2vw,20px);
    letter-spacing:0; text-transform:none; padding:15px 0; animation:home-marq 36s linear infinite;}
  .home .marquee .track span{gap:26px; padding-right:26px;}
  .home .marquee b{color:var(--marigold);}
  .home .marquee.inv b{color:var(--marigold-deep);}
  @keyframes home-marq{from{transform:translateX(0)} to{transform:translateX(-50%)}}

  /* ============ THE DOORS — dark pinned "vogue" set-piece ============
     A full-viewport, pinned scroll moment on the LIGHT paper palette (the earlier look the
     client loved — animation timeline unchanged, only colours are light). The six exam-doors
     students are handed sit on a light --paper stage; on desktop they scatter as a cloud of a
     thousand career words blooms, then the "a thousand doors" line resolves.

     Architecture mirrors the rest of the home motion layer: the DEFAULT markup is a CLEAR
     STATIC light stage (head + six doors in a grid + closing line — nothing hidden, #field
     display:none). Only when home.js confirms desktop(>=900) + GSAP + motion-on does it add
     #boxes.dstage-live, which turns .dstage-pin into a pinned, viewport-tall stage, lays the
     doors out as a centred row, and reveals the field. Reduced-motion / mobile / no-GSAP
     never get .dstage-live, so nothing pins and nothing is left hidden.

     Fresh .dstage-* / .dbox names — the legacy unprefixed .brk* rules earlier in this file
     are unused but must not leak onto this markup. */

  /* --- light stage shell (static) — earlier paper palette, animation unchanged --- */
  .home .dstage{background:var(--paper); color:var(--ink);}
  .home .dstage-pin{position:relative; padding:0 clamp(20px,5vw,48px);}

  /* the cap line at the top of the stage */
  .home .dstage-head{font-family:var(--mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase;
    color:var(--ink-faint); text-align:center; margin:0 auto clamp(30px,4vw,48px); max-width:640px;}
  .home .dstage-head .dstage-mid{margin:0 .5em; color:var(--marigold-deep);}

  /* the doors — light bordered cards on paper (STATIC = grid). The card is a shell; the
     .dbox-head button carries the exact padding/min-height/spacing the card used to have,
     so a CLOSED door looks pixel-identical to before it became clickable. */
  .home .dstage-boxes{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.4vw,18px);
    max-width:960px; margin:0 auto; align-items:start;}
  .home .dbox{position:relative; display:flex; flex-direction:column;
    border:1px solid var(--line); border-radius:14px; overflow:hidden;
    background:rgba(20,18,58,.022);
    transition:border-color .25s var(--ease), background .25s var(--ease), box-shadow .3s var(--ease);}
  /* promoted only while the set-piece is in view — see .field-hot below */
  .home #boxes.field-hot .dbox{will-change:transform;}
  .home .dbox-head{flex:1; display:flex; flex-direction:column; justify-content:space-between; gap:22px;
    min-height:186px; padding:clamp(16px,1.5vw,22px); width:100%;
    text-align:left; font:inherit; color:inherit; background:none; border:0; cursor:pointer;}
  /* the only added mark on a closed door: a quiet + (same affordance the explorer rows use) */
  .home .dbox-plus{position:absolute; top:clamp(14px,1.4vw,20px); right:clamp(14px,1.4vw,20px);
    font-family:var(--mono); font-size:18px; line-height:1; color:var(--ink-faint);
    transition:transform .3s var(--ease), color .25s var(--ease);}
  .home .dbox:hover .dbox-plus{color:var(--marigold-deep);}
  .home .dbox.open{border-color:var(--marigold-deep); background:#fff;
    box-shadow:0 20px 46px -28px rgba(20,18,58,.55);}
  /* in the grid an open door takes the full row — at 2 columns a half-width card is too
     narrow for the actions and the path steps wrap to shreds */
  .home .dstage-boxes .dbox.open{grid-column:1 / -1;}
  .home .dbox.open .dbox-plus{transform:rotate(45deg); color:var(--marigold-deep);}

  /* the panel behind a door: two actions, then the short path (height tweened by home.js) */
  .home .dbox-body{height:0; overflow:hidden;}
  .home .dbox-inner{padding:0 clamp(16px,1.5vw,22px) clamp(18px,1.6vw,22px); border-top:1px solid var(--line);}
  .home .dbox-acts{display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin-top:16px;}
  .home .dbox-plabel{display:block; margin:18px 0 12px; font-family:var(--mono); font-size:10.5px;
    letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint);}
  /* The short path runs HORIZONTALLY, the same left-to-right timeline the sample
     roadmap and the full path pages use — numbered node, connector through the
     middle, label underneath. Deliberately mirrors .home .stop so a student
     recognises the same object everywhere; only the scale differs, because this
     one lives inside a door panel rather than across the page.
     An open door is only min(360px,42vw) wide while the pinned set-piece is
     live, so the track scrolls rather than squashing the steps. */
  .home .dbox-path{list-style:none; counter-reset:dp; margin:0; padding:2px 0 4px;
    display:flex; align-items:flex-start; gap:0;
    overflow-x:auto; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity; scrollbar-width:none;}
  .home .dbox-path::-webkit-scrollbar{display:none;}
  /* Sized so the four steps FIT the panel rather than clipping at the card edge:
     they grow to share the width (max 170px, which fills the wide static panel
     exactly) and stop shrinking at 100px, below which the track scrolls instead
     of crushing the labels. Only a phone should ever reach that. */
  .home .dbox-path li{counter-increment:dp; position:relative; scroll-snap-align:start;
    flex:1 0 100px; max-width:170px; padding:0 5px; text-align:center;
    font-size:12px; line-height:1.32; color:var(--ink);}
  /* connector — sits behind the nodes and joins centre to centre */
  .home .dbox-path li::after{content:''; position:absolute; top:10px; left:0; right:0;
    height:2px; background:var(--line); z-index:0;}
  .home .dbox-path li:first-child::after{left:50%;}
  .home .dbox-path li:last-child::after{right:50%;}
  /* the node — white with a rule, and the final step filled, exactly like .stop .n */
  .home .dbox-path li::before{content:counter(dp); position:relative; z-index:1;
    display:flex; align-items:center; justify-content:center;
    width:22px; height:22px; margin:0 auto 9px; border-radius:50%;
    background:var(--card); border:2px solid var(--line); color:var(--ink);
    font-family:var(--mono); font-size:10px; font-weight:600; box-sizing:border-box;}
  .home .dbox-path li:last-child::before{background:var(--ink); border-color:var(--ink); color:#fff;}
  .home .dbox-cap{font-family:var(--mono); font-size:11px; letter-spacing:.13em; text-transform:uppercase;
    color:var(--ink-faint);}
  .home .dbox-nm{font-family:var(--disp); font-weight:700; font-size:clamp(26px,2.6vw,42px); letter-spacing:-.02em;
    line-height:.92; color:var(--ink);}
  .home .dbox-sm{margin-top:8px; font-size:clamp(12px,.9vw,13.5px); line-height:1.35; color:var(--ink-soft);}

  /* the field of career words — hidden until the live pinned stage reveals it */
  .home .dstage-field{position:absolute; inset:0; z-index:2; pointer-events:none; display:none; contain:layout paint;}
  .home .dstage-field .w{position:absolute; transform:translate(-50%,-50%);
    font-family:var(--mono); font-weight:500; letter-spacing:.01em; white-space:nowrap;
    color:var(--ink-soft); opacity:0;}
  /* PERF: will-change here promotes EVERY word to its own compositor layer, and
     there are ~64 of them. Left on permanently they stay resident for the whole
     page and make ordinary scrolling stutter, even though this section only
     animates for a moment. .field-hot is added by home.js while the doors
     set-piece is in view and removed when it leaves. */
  .home #boxes.field-hot .dstage-field .w{will-change:transform,opacity;}
  .home #boxes.field-hot .dstage-final{will-change:transform,opacity,filter;}
  .home .dstage-field .w.ink{color:var(--ink);}
  .home .dstage-field .w.acc-mari{color:var(--marigold-deep);}
  .home .dstage-field .w.acc-teal{color:var(--teal);}
  .home .dstage-field .w.ital{font-style:italic;}

  /* the closing line (STATIC = visible below the doors) */
  .home .dstage-final{margin:clamp(30px,4vw,52px) auto 0; text-align:center; font-family:var(--disp); font-weight:700;
    font-size:clamp(34px,6vw,74px); line-height:1; letter-spacing:-.022em; color:var(--ink); text-transform:lowercase;}
  .home .dstage-final em{font-style:italic; font-weight:700; color:var(--marigold-deep);}
  .home .dstage-sub{display:block; margin-top:18px; font-family:var(--mono); font-weight:500; font-size:12px;
    letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint);}

  /* --- live state: the pinned viewport-tall stage that runs the timeline (desktop only) --- */
  .home #boxes.dstage-live{padding-block:0;}
  .home #boxes.dstage-live .dstage-pin{min-height:100vh; padding:0; overflow:hidden;}
  /* head floats top-centre */
  .home #boxes.dstage-live .dstage-head{position:absolute; top:11vh; left:0; right:0; margin:0; z-index:3;}
  /* doors become a centred row of tall door-cards (the vogue look) */
  .home #boxes.dstage-live .dstage-boxes{position:absolute; inset:0; z-index:3; max-width:none; margin:0;
    display:flex; flex-wrap:wrap; align-content:center; align-items:center; justify-content:center;
    gap:clamp(8px,1vw,18px); padding:0 clamp(20px,4vw,60px);}
  .home #boxes.dstage-live .dbox{width:clamp(104px,12vw,178px); aspect-ratio:3/4;
    transition:width .45s var(--ease), border-color .25s var(--ease), background .25s var(--ease);}
  .home #boxes.dstage-live .dbox-head{min-height:0; gap:0;}
  /* An opened door widens out of the row into a readable panel and drops the 3/4
     ratio. It has to be wide enough for the four-step horizontal path inside it
     (4 x 100px minimum + the panel's own padding), or the track clips at the card
     edge and reads as broken — 520px clears that with room for the labels. */
  .home #boxes.dstage-live .dbox.open{width:min(520px,54vw); aspect-ratio:auto; z-index:6;}
  /* doors are only pickable while they're standing still — once the scroll set-piece is
     under way they're mid-flight (and finally invisible), so they must not swallow clicks */
  .home #boxes.dstage-live.doors-locked .dbox{pointer-events:none;}
  .home #boxes.dstage-live .dstage-field{display:block;}
  /* the final resolves last, absolutely centred over the cleared cloud. pointer-events:none
     is load-bearing: this element is inset:0 (it covers the ENTIRE stage) and sits above the
     doors, so without it the invisible headline swallows every click meant for a door. */
  .home #boxes.dstage-live .dstage-final{position:absolute; inset:0; z-index:4; margin:0; opacity:0;
    pointer-events:none;
    display:flex; flex-direction:column; align-items:center; justify-content:center;}

  @media (prefers-reduced-motion:reduce){
    .home .dstage-field{display:none !important;}
  }

  /* ============ CAREER EXPLORER (accordion) ============ */
  .home .field-count{font-size:12px; color:var(--ink-faint); letter-spacing:.06em;}
  .home .field-count b{color:var(--marigold-deep);}
  .home .xlist{border:1px solid var(--line); border-radius:var(--radius); background:var(--card);
    box-shadow:var(--sh-1); overflow:hidden;}
  .home .xrow{border-bottom:1px solid var(--line);}
  .home .xrow:last-child{border-bottom:none;}
  .home .xh{margin:0;}
  .home .xhead{display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:16px;
    width:100%; text-align:left; background:none; border:none; cursor:pointer; padding:20px clamp(18px,2.4vw,28px);
    color:var(--ink); transition:background .25s var(--ease);}
  .home .xhead:hover{background:rgba(20,18,58,.03);}
  .home .xnum{font-family:var(--mono); font-size:12px; color:var(--ink-faint);}
  .home .xname{font-family:var(--disp); font-weight:600; font-size:clamp(18px,2vw,24px); letter-spacing:-.01em;}
  .home .xrole{font-family:var(--mono); font-size:12.5px; color:var(--marigold-deep); text-align:right;}
  .home .xplus{width:34px; height:34px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center;
    font-family:var(--disp); font-size:20px; color:var(--ink-soft); transition:transform .35s var(--ease), background .25s var(--ease), color .25s var(--ease);}
  .home .xrow.open .xplus{transform:rotate(45deg); background:var(--marigold-deep); color:#fff; border-color:var(--marigold-deep);}
  .home .xbody{height:0; overflow:hidden;}
  .home .xinner{padding:2px clamp(18px,2.4vw,28px) 26px;}
  .home .xstats{display:grid; grid-template-columns:repeat(4,1fr); gap:10px;}
  .home .xstats .cell{background:var(--paper-dim); border-radius:12px; padding:14px 16px;}
  .home .xstats .cell .cap{display:block; margin-bottom:7px;}
  .home .xstats .cell .val{font-family:var(--disp); font-weight:600; font-size:18px; color:var(--ink); line-height:1.25;}
  .home .xmeta{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top:20px;}
  .home .xmeta .cap{display:block;}
  .home .xskills{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px;}
  .home .xskills span{font-family:var(--mono); font-size:11.5px; padding:6px 12px; border-radius:999px;
    background:rgba(18,165,148,.1); border:1px solid rgba(18,165,148,.24); color:#0e7d70;}
  .home .explorer-foot{margin-top:22px; font-size:clamp(16px,1.5vw,19px); color:var(--ink-soft);}
  /* simplified expanded explorer row — one line of context + two CTAs, no stat grid */
  .home .xlead{margin:2px 0 20px; max-width:60ch; font-size:clamp(15px,1.4vw,18px); line-height:1.5; color:var(--ink-soft);}
  .home .xacts{display:flex; align-items:center; gap:22px; flex-wrap:wrap;}
  @media (max-width:640px){
    .home .xlead{margin-bottom:16px;}
    .home .xacts{flex-direction:column; align-items:stretch; gap:14px;}
    .home .xacts .btn-fill{text-align:center;}
  }

  /* ============ ROADMAP ============ */
  .home .rm-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:34px;}
  .home .rm-head .eyebrow{margin-bottom:12px; display:inline-block;}
  .home .rm-head h2{margin:0;}
  .home .rm-head h2 em{font-style:italic; color:var(--marigold-deep);}
  .home .rm-tabs{display:flex; gap:8px; flex-wrap:wrap;}
  .home .rm-tab{font-family:var(--mono); font-weight:500; font-size:12px; letter-spacing:.04em; padding:9px 15px;
    min-height:40px; border-radius:999px; border:1px solid var(--line); background:var(--card); color:var(--ink-soft);
    box-shadow:var(--sh-1); cursor:pointer; transition:border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease), transform .18s var(--ease);}
  .home .rm-tab:hover{border-color:var(--marigold-deep); color:var(--ink);}
  .home .rm-tab:active{transform:scale(.95);}
  .home .rm-tab.on{background:var(--marigold-deep); border-color:var(--marigold-deep); color:#fff;}
  .home .rail-scroll{overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -webkit-overflow-scrolling:touch;}
  .home .rail-scroll::-webkit-scrollbar{display:none;}
  .home .rail{display:flex; gap:0; width:max-content; min-width:100%; padding:10px var(--pad) 22px;}
  .home .stop{flex:0 0 clamp(196px,20vw,232px); position:relative; padding:0 12px;}
  /* --seg / --dot inherit down from the .stop element (gsap sets them there);
     they default to 1 so with JS off or reduced-motion the track is fully drawn. */
  .home .stop::before{content:""; position:absolute; top:19px; left:0; right:0; height:2px; background:var(--line);
    transform:scaleX(var(--seg,1)); transform-origin:left;}
  .home .stop:first-child::before{left:50%;}
  .home .stop:last-child::before{right:50%;}
  /* KILL the legacy node. The editorial skin drew a rail node with .stop::after
     (unscoped, near the top of this file); the clean skin draws it as .stop .n
     instead. That pseudo-element was never removed, and because --red does not
     exist in this skin its fill resolved to nothing while its `box-shadow:0 0 0
     5px var(--ink)` still painted — leaving a hollow ink ring parked at the LEFT
     edge of every stop, half a step away from the label it belonged to. */
  .home .stop::after{content:none;}
  .home .stop .n{position:relative; z-index:2; width:40px; height:40px; margin:0 auto; border-radius:50%;
    background:var(--card); border:2px solid var(--line); display:grid; place-items:center;
    font-family:var(--mono); font-weight:600; font-size:13px; color:var(--ink);}
  /* The filled final node. `.rail-end` is the real last child of `.rail`, so a
     plain :last-child never matched the last STOP and the arrival was never
     marked; :has(+ .rail-end) targets it precisely, with :last-child kept for a
     rail rendered without an end marker. */
  .home .stop:last-child .n,
  .home .stop:has(+ .rail-end) .n{background:var(--ink); border-color:var(--ink); color:#fff;}

  /* ---- DESKTOP: show the WHOLE path at once -------------------------------
     A horizontal drag-rail hides most of a pathway behind an edge — on a wide
     screen there is no reason to make someone drag to read step 5 of 7. Above
     900px the rail becomes a fixed 4-column grid that wraps (7 steps read 4+3),
     nothing overflows, and the drag affordance is dropped. Below 900px the
     original swipe rail is untouched — there it genuinely is the right control.

     The column count is FIXED rather than auto-fit so the connector line can be
     trimmed deterministically: the segment is cut at the start and end of every
     row via :nth-child(4n+1) / :nth-child(4n), which auto-fit would make
     impossible (you cannot know where the browser broke the row). */
  @media (min-width:900px){
    .home .rail-scroll{overflow:visible;}
    .home .rail{display:grid; grid-template-columns:repeat(4,1fr);
      width:auto; min-width:0; gap:34px 0; padding:10px var(--pad) 22px;}
    .home .stop{flex:none; width:auto;}
    .home .rail .stop:nth-child(4n+1)::before{left:50%;}
    .home .rail .stop:nth-child(4n)::before{right:50%;}
    /* The trailing arrow is a "there is more, keep scrolling" cue — meaningless
       once everything fits, and its ::before leaves a stray line stub. Needs the
       extra .rail in the selector: `.home .rail-end{display:grid}` is declared
       LATER in this file, so an equal-specificity override here would lose. */
    .home .rail .rail-end{display:none;}
    .home .stop:has(+ .rail-end)::before{right:50%;}
    .home .rail-drag{display:none;}
  }
  .home .stop .t{font-family:var(--disp); font-weight:600; font-size:17px; color:var(--ink); text-align:center; margin-top:18px; line-height:1.15;}
  .home .stop .d{font-size:13.5px; color:var(--ink-soft); text-align:center; line-height:1.45; margin-top:6px;}
  .home .rail-end{position:relative; flex:0 0 76px; display:grid; place-items:center;}
  .home .rail-end::before{content:""; position:absolute; top:19px; left:0; width:38px; height:2px; background:var(--line);}
  .home .rail-end i{position:relative; z-index:2; margin-top:2px; color:var(--marigold-deep); font-style:normal; font-size:20px;}
  .home .rail-hint{display:flex; align-items:center; gap:10px; margin-top:6px; font-size:12px; letter-spacing:.04em; color:var(--ink-faint);}
  .home .swipe{display:inline-flex; width:26px; height:16px;}
  .home .swipe i{display:block; width:16px; height:2px; background:var(--marigold-deep); align-self:center; border-radius:2px; animation:swipex 1.6s ease-in-out infinite;}
  @keyframes swipex{0%,100%{transform:translateX(0)} 50%{transform:translateX(6px)}}

  /* ============ METHOD ============ */
  .home .steps{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
  .home .step{display:flex; flex-direction:column; gap:8px;}
  .home .step .sn{font-size:12px; color:var(--marigold-deep); letter-spacing:.08em;}
  .home .step h3{font-size:20px; margin:2px 0 2px;}
  .home .step p{font-size:14.5px; color:var(--ink-soft); line-height:1.5; flex:1;}
  .home .step .chip{align-self:flex-start; margin-top:6px;}
  .home .method-cta{display:flex; gap:20px; align-items:center; flex-wrap:wrap; margin-top:clamp(28px,3.4vw,44px);}

  /* ============ SKILL ACADEMY ============ */
  .home .academy-lead{margin-bottom:clamp(24px,3vw,36px);}
  .home #academy .swipe-hint{display:none;}
  .home .hs-track{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
  .home .course{position:relative; background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
    padding:0 0 22px; box-shadow:var(--sh-1); overflow:hidden; display:flex; flex-direction:column;
    transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);}
  .home .course:hover{transform:translateY(-5px); box-shadow:var(--sh-2); border-color:transparent;}
  .home .cthumb{position:relative; display:block; aspect-ratio:16/9; overflow:hidden; background:var(--paper-dim);}
  .home .cthumb img{width:100%; height:100%; object-fit:cover;}
  .home .cthumb.empty{display:grid; place-items:center; background:linear-gradient(135deg,rgba(255,149,64,.16),rgba(18,165,148,.16));}
  .home .cthumb .cmark{font-family:var(--disp); font-weight:700; font-size:34px; color:var(--marigold-deep); letter-spacing:-.02em;}
  .home .course .c-top{display:flex; gap:8px; padding:16px clamp(18px,2vw,22px) 0;}
  .home .course .c-top .cap{font-family:var(--mono); font-size:10.5px; padding:5px 10px; border-radius:999px; background:var(--paper-dim); color:var(--ink-soft); letter-spacing:.03em;}
  .home .course .c-name{font-family:var(--disp); font-weight:600; font-size:21px; letter-spacing:-.01em; color:var(--ink); padding:12px clamp(18px,2vw,22px) 0;}
  .home .course .c-desc{font-size:14px; color:var(--ink-soft); line-height:1.5; padding:8px clamp(18px,2vw,22px) 0; flex:1;}
  .home .course .c-foot{display:flex; align-items:center; justify-content:space-between; padding:16px clamp(18px,2vw,22px) 0;}
  .home .course .c-price{font-family:var(--disp); font-weight:700; font-size:19px; color:var(--ink);}
  .home .course .c-enroll{font-family:var(--disp); font-weight:600; font-size:14px; color:var(--marigold-deep);}
  .home .course.course-cta{align-items:flex-start; justify-content:center; padding:clamp(24px,3vw,32px);
    background:linear-gradient(160deg,var(--plum),var(--ink)); color:var(--paper); border-color:transparent;}
  .home .course.course-cta .cap{color:rgba(251,250,247,.7);}
  .home .course.course-cta .c-name{padding:14px 0 0; color:var(--paper); font-size:28px;}
  .home .course.course-cta .c-enroll{padding:0; color:var(--marigold); margin-top:14px;}

  /* ============ QUIZ ============ */
  .home .quiz-wrap{display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(28px,4vw,54px); align-items:center;}
  .home .quiz-copy .eyebrow{color:var(--teal);}
  .home .quiz-copy h2{margin:14px 0 0;}
  .home .quiz-copy h2 em{font-style:italic; color:var(--marigold-deep);}
  .home .quiz-copy .lead{margin-top:16px;}
  .home .quiz-copy .link-u{margin-top:20px;}
  .home .quiz-card{background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:var(--radius);
    box-shadow:var(--sh-2); padding:clamp(22px,3vw,32px); overflow:hidden;}
  .home .quiz-invite{width:100%; text-align:left; background:none; border:none; cursor:pointer; color:var(--ink);}
  .home .quiz-invite .cap{color:var(--teal);}
  .home .qbig{font-family:var(--disp); font-weight:700; font-size:clamp(26px,3.4vw,34px); letter-spacing:-.02em; line-height:1.05; margin:14px 0 22px;}
  .home .qbig em{font-style:italic; color:var(--marigold-deep);}
  .home .quiz-meta{display:flex; gap:22px; margin-bottom:24px;}
  .home .quiz-meta b{font-family:var(--disp); font-weight:700; font-size:22px; color:var(--marigold-deep); display:block;}
  .home .quiz-meta .cap{display:block; margin-top:3px;}
  .home .quiz-go{display:inline-flex; align-items:center; gap:8px; min-height:48px; padding:0 22px; border-radius:12px;
    background:var(--marigold-deep); color:#fff; font-family:var(--body); font-weight:600; font-size:15px;
    transition:background .25s var(--ease), transform .18s var(--ease);}
  .home .quiz-invite:hover .quiz-go{background:#d86e14; transform:translateX(3px);}
  .home .qcount{font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--teal);}
  .home .quiz-prog{display:flex; gap:6px; margin:14px 0 22px;}
  .home .quiz-prog span{height:5px; flex:1; border-radius:999px; background:var(--paper-dim); transition:background .4s var(--ease);}
  .home .quiz-prog span.on{background:var(--marigold-deep);}
  .home .quiz-q{font-family:var(--disp); font-weight:600; font-size:clamp(20px,2.4vw,26px); letter-spacing:-.01em; line-height:1.15; margin-bottom:20px;}
  .home .quiz-opts{display:flex; flex-direction:column; gap:11px;}
  .home .quiz-opt{display:flex; align-items:center; gap:13px; text-align:left; width:100%; min-height:56px;
    padding:14px 16px; border-radius:14px; border:1.5px solid var(--line); background:var(--paper);
    font-family:var(--body); font-size:15.5px; font-weight:500; color:var(--ink); cursor:pointer;
    transition:border-color .25s var(--ease), background .25s var(--ease), transform .18s var(--ease), box-shadow .25s var(--ease);}
  .home .quiz-opt .ql{width:26px; height:26px; flex:none; border-radius:8px; border:1.5px solid var(--line);
    display:grid; place-items:center; font-family:var(--mono); font-size:12px; color:var(--ink-faint); transition:.25s var(--ease);}
  .home .quiz-opt:hover{border-color:var(--marigold-deep); background:var(--card); transform:translateX(3px); box-shadow:var(--sh-1);}
  .home .quiz-opt:hover .ql{border-color:var(--marigold-deep); color:var(--marigold-deep);}
  .home .quiz-opt.picked{border-color:var(--teal); background:rgba(18,165,148,.08);}
  .home .quiz-opt.picked .ql{background:var(--teal); border-color:var(--teal); color:#fff;}
  .home .quiz-res .cap{color:var(--teal);}
  .home .quiz-res .rname{font-family:var(--disp); font-weight:700; font-size:clamp(28px,4vw,40px); letter-spacing:-.02em; color:var(--marigold-deep); margin:6px 0 12px;}
  .home .quiz-res .lead{font-size:15.5px; color:var(--ink-soft);}

  /* ============ SCHOOLS ============ */
  .home .schools{display:grid; grid-template-columns:1.05fr .95fr; gap:0; border-radius:var(--radius);
    overflow:hidden; box-shadow:var(--sh-2); background:var(--ink); color:var(--paper);}
  .home .schools-left{padding:clamp(30px,4vw,56px);}
  .home .schools-left .eyebrow{color:var(--marigold);}
  .home .schools-left h2{color:var(--paper); margin:14px 0 0;}
  .home .schools-left .lead{color:rgba(251,250,247,.78); margin-top:16px;}
  .home .schools-left .hl{background-image:linear-gradient(var(--marigold),var(--marigold));}
  .home .schools-left .hl em{color:var(--marigold); font-style:italic;}
  .home .slist{list-style:none; margin:26px 0 30px; display:grid; gap:2px;}
  .home .slist li{display:flex; gap:13px; align-items:flex-start; padding:14px 0; border-bottom:1px solid rgba(251,250,247,.1); font-size:15.5px; color:rgba(251,250,247,.82);}
  .home .slist li:last-child{border-bottom:none;}
  .home .slist .ck{width:24px; height:24px; flex:none; border-radius:7px; display:grid; place-items:center;
    background:linear-gradient(135deg,var(--marigold),var(--teal)); color:var(--ink); font-weight:700; font-size:13px; margin-top:1px;}
  .home .schools-right{padding:clamp(30px,4vw,56px); background:rgba(251,250,247,.04); border-left:1px solid rgba(251,250,247,.1);
    display:flex; flex-direction:column; justify-content:center; gap:16px; text-align:center;}
  .home .schools-right .cap{color:rgba(251,250,247,.6);}
  .home .big-num{font-family:var(--disp); font-weight:700; font-size:clamp(48px,7vw,80px); letter-spacing:-.03em; line-height:.9; color:var(--paper);}
  .home .big-num .hot{color:var(--marigold);}
  .home .big-num .unit{display:block; font-size:clamp(14px,1.4vw,18px); font-weight:500; color:rgba(251,250,247,.7); letter-spacing:0; margin-top:8px;}

  /* ============ MANIFESTO / WHY ============ */
  .home #manifesto .sec-head{margin-bottom:18px;}
  .home .manifesto-copy{font-family:var(--disp); font-weight:500; font-size:clamp(24px,3.4vw,40px);
    line-height:1.24; letter-spacing:-.015em; color:var(--ink-soft); max-width:20ch; margin-bottom:clamp(36px,5vw,60px);}
  .home .manifesto-copy .w{color:inherit; transition:color .3s var(--ease);}
  .home .why-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
  .home .why h3{font-size:21px; margin-bottom:10px;}
  .home .why p{color:var(--ink-soft); font-size:14.5px; line-height:1.55;}
  .home .quote{margin:26px 0 0; background:linear-gradient(150deg,var(--plum),var(--ink)); color:var(--paper);
    border-radius:var(--radius); padding:clamp(34px,5vw,60px); text-align:center; box-shadow:var(--sh-2); position:relative; overflow:hidden;}
  .home .quote .qmark{font-family:var(--disp); font-size:110px; line-height:.6; color:var(--marigold); opacity:.35; height:52px;}
  .home .quote blockquote{margin:0; font-family:var(--disp); font-weight:500; font-size:clamp(22px,3.2vw,36px);
    line-height:1.2; letter-spacing:-.02em; max-width:22ch; margin-inline:auto; color:var(--paper);}
  .home .quote blockquote em{color:var(--marigold); font-style:italic;}
  .home .quote .qattr{margin-top:20px; font-size:12.5px; color:rgba(251,250,247,.7); text-transform:uppercase; letter-spacing:.1em;}

  /* ============ COMMUNITY + CONTACT ============ */
  /* ---- community band: a soft colour field so the frosted glass reads as glass.
          On near-white paper, glass with nothing behind it looks like a flat white
          box (that was the original bug) — so we lay marigold + teal blurred blobs
          behind the card, clipped to the section. ---- */
  .home .comm-band{position:relative; overflow:hidden;}
  .home .comm-band > .wrap{position:relative; z-index:1;}
  .home .comm-field{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;}
  .home .comm-field span{position:absolute; border-radius:50%; filter:blur(30px);}
  .home .comm-field .cf1{width:400px; height:400px; left:-70px; top:-30px;
    background:radial-gradient(circle, rgba(255,149,64,.55), transparent 68%); opacity:.55;}
  .home .comm-field .cf2{width:440px; height:440px; left:24%; bottom:-160px;
    background:radial-gradient(circle, rgba(18,165,148,.5), transparent 68%); opacity:.5;}
  .home .comm-field .cf3{width:320px; height:320px; right:8%; top:-60px;
    background:radial-gradient(circle, rgba(255,149,64,.38), transparent 66%); opacity:.42;}

  .home .cc{display:grid; grid-template-columns:1.1fr 1fr; gap:20px; align-items:stretch;}
  /* comm-card + channel tiles are liquid glass (.lglass supplies the material).
     These rules keep layout only, plus a lighter fill on the card so the colour
     field shows through and the more-opaque tiles read as glass floating on it. */
  .home .comm-card{border-radius:var(--radius); padding:clamp(18px,2.4vw,26px);
    background:linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.20));}
  .home .chans{display:grid; gap:12px;}
  .home .chan{display:flex; align-items:center; gap:15px; padding:15px 17px; border-radius:14px;
    min-height:62px; box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 6px 18px -12px rgba(20,18,58,.26);
    transition:transform .3s var(--ease), box-shadow .3s var(--ease);}
  .home .chan:hover{transform:translateY(-2px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 12px 26px -12px rgba(20,18,58,.34);}
  .home .chan .cico{width:44px; height:44px; flex:none; border-radius:12px; display:grid; place-items:center;
    color:#fff; font-family:var(--disp); font-weight:700; box-shadow:0 6px 14px -4px rgba(20,18,58,.35);}
  .home .chan:nth-child(1) .cico{background:#5865F2;} .home .chan:nth-child(2) .cico{background:#229ED9;} .home .chan:nth-child(3) .cico{background:#25D366;} .home .chan:nth-child(4) .cico{background:linear-gradient(135deg,#7A3FF2,#E1306C 52%,#F58529);}
  .home .chan .cbody b{display:block; font-family:var(--disp); font-weight:600; font-size:17px; color:var(--ink);}
  .home .chan .cbody span{font-size:13.5px; color:var(--ink-soft);}
  .home .chan .carr{margin-left:auto; color:var(--ink-faint); transition:transform .3s var(--ease), color .3s var(--ease);}
  .home .chan:hover .carr{transform:translateX(3px); color:var(--marigold-deep);}
  .home .contact-card{background:linear-gradient(155deg,var(--plum),var(--deep)); color:var(--paper);
    border-radius:var(--radius); padding:clamp(24px,3vw,36px); box-shadow:var(--sh-2); display:flex; flex-direction:column;}
  .home .contact-card .eyebrow{color:var(--marigold);}
  .home .contact-card h3{color:var(--paper); font-size:24px; margin:12px 0 18px;}
  .home .crow{padding:14px 0; border-bottom:1px solid rgba(251,250,247,.12);}
  .home .crow .k{color:rgba(251,250,247,.55); margin-bottom:5px;}
  .home .crow .v{font-size:16px; color:var(--paper); font-weight:500;}
  .home .crow a.v{color:var(--marigold);}
  .home .contact-card .btn{margin-top:22px; align-self:flex-start;}

  /* ============ FINAL CTA ============ */
  .home .final-wrap{padding-bottom:clamp(72px,10vw,140px);}
  .home .final{position:relative; overflow:hidden; background:linear-gradient(165deg,var(--ink),var(--deep));
    color:var(--paper); text-align:center; border-radius:26px; padding:clamp(48px,8vw,104px) clamp(24px,5vw,60px); box-shadow:var(--sh-2);}
  .home .final .fblob{position:absolute; border-radius:50%; filter:blur(30px); opacity:.4; pointer-events:none;}
  .home .final .fb1{width:400px; height:400px; top:-120px; left:-80px; background:radial-gradient(circle,rgba(255,149,64,.55),transparent 65%);}
  .home .final .fb2{width:440px; height:440px; bottom:-160px; right:-100px; background:radial-gradient(circle,rgba(18,165,148,.5),transparent 65%);}
  .home .final-inner{position:relative; z-index:2;}
  .home .final-h{font-size:clamp(32px,6vw,66px); color:var(--paper); max-width:16ch; margin-inline:auto; letter-spacing:-.03em; line-height:1.02;}
  .home .final-h em{color:var(--marigold); font-style:italic;}
  .home .final p{margin:22px auto 0; max-width:52ch; color:rgba(251,250,247,.78); font-size:clamp(16px,1.8vw,19px);}
  .home .final .fcta{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:34px;}
  .home .final .btn--ghost{background:transparent; color:var(--paper); border-color:rgba(251,250,247,.3);}
  .home .final .btn--ghost:hover{border-color:var(--paper); background:rgba(251,250,247,.08);}

  /* ============ FOOTER ============ */
  .home .site-foot{background:var(--deep); color:rgba(251,250,247,.68); padding:clamp(48px,6vw,72px) 0 34px; margin-top:0;}
  .home .foot-top{display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:28px;}
  .home .foot-brand .nav-brand{color:#fff; margin-bottom:14px;}
  .home .fabout{color:rgba(251,250,247,.55); font-size:14px; max-width:34ch; line-height:1.55;}
  .home .fcol h3{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:rgba(251,250,247,.4); margin:0 0 14px; font-weight:600;}
  .home .fcol a{display:block; color:rgba(251,250,247,.72); font-size:14px; padding:6px 0; transition:color .25s var(--ease);}
  .home .fcol a:hover{color:var(--marigold);}
  .home .foot-bottom{margin-top:40px; padding-top:22px; border-top:1px solid rgba(251,250,247,.12);
    display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:12px; color:rgba(251,250,247,.45);}

  /* ============ FLOATING CTA (desktop) ============ */
  .home .glass-cta{position:fixed; z-index:110; left:auto; right:26px; bottom:26px; transform:translateY(26px);
    display:inline-flex; align-items:center; gap:9px; padding:14px 22px; border-radius:999px; border:none;
    background:var(--marigold-deep); color:#fff; font-family:var(--body); font-weight:600; font-size:15px;
    box-shadow:0 10px 30px -6px rgba(233,122,31,.5); opacity:0; pointer-events:none;
    transition:opacity .35s var(--ease), transform .35s var(--ease), background .25s var(--ease);}
  .home .glass-cta.show{opacity:1; transform:translateY(0); pointer-events:auto;}
  .home .glass-cta:hover{background:#d86e14;}
  .home .glass-cta .gdot{width:8px; height:8px; border-radius:50%; background:#fff; opacity:.9;}

  /* ============================================================================
     CLEAN HOME — RESPONSIVE (<900px = native app)
     ============================================================================ */
  @media (max-width:899px){
    .home .nav-links,.home .nav-book{display:none;}
    .home .nav-menu-btn{display:flex;}
    .home .site-nav{padding:12px clamp(16px,5vw,22px);}
    .home .glass-cta{display:none !important;}

    .home .hero-in{text-align:left;}
    .home .hero-stats{margin-top:32px;}
    /* MOBILE ORBIT — a real, centred backdrop behind the hero content (not shoved
       off-screen). Larger rings, higher opacity, dots shown, keeps spinning. The
       rings overflow the viewport but are clipped by .home .hero{overflow:hidden}
       so they never widen the page. z-index:0 keeps them behind .hero-in (z-index:2). */
    .home .orbit{top:44%; left:50%; right:auto; transform:translate(-50%,-50%); opacity:.92; z-index:0;}
    .home .orbit .o1{width:340px; height:340px;}
    .home .orbit .o2{width:508px; height:508px;}
    .home .orbit .o3{width:676px; height:676px;}
    .home .orbit .op-m,.home .orbit .op-t{display:block;}
    /* re-seat the marigold + teal dots onto the smaller mobile rings */
    .home .orbit .op-m{margin:-6px 0 0 164px; transform-origin:-164px 6px;}
    .home .orbit .op-t{margin:-6px 0 0 -248px; transform-origin:248px 6px;}
    .home .scroll-hint{display:none;}

    /* --- mobile-only entrance for the otherwise-static blocks (the doors grid +
       the USP trust bar). .m-rise has NO effect >=900px, so desktop is untouched;
       aura.js reveals it via the shared IntersectionObserver / static fallback. --- */
    .home .m-rise{opacity:0; transform:translateY(22px);
      transition:opacity .7s var(--ease), transform .7s var(--ease);}
    .home .m-rise.in{opacity:1; transform:none;}
    .home .dstage-boxes .m-rise:nth-child(2){transition-delay:.05s;}
    .home .dstage-boxes .m-rise:nth-child(3){transition-delay:.10s;}
    .home .dstage-boxes .m-rise:nth-child(4){transition-delay:.15s;}
    .home .dstage-boxes .m-rise:nth-child(5){transition-delay:.20s;}
    .home .dstage-boxes .m-rise:nth-child(6){transition-delay:.25s;}
    .home .usp-row .m-rise:nth-child(2){transition-delay:.06s;}
    .home .usp-row .m-rise:nth-child(3){transition-delay:.12s;}
    .home .usp-row .m-rise:nth-child(4){transition-delay:.18s;}
    .home .hero-cta .btn{flex:1 1 auto; justify-content:center;}

    /* dark doors stage — static two-up grid, legible, no horizontal overflow */
    .home .dstage-head{font-size:10.5px; letter-spacing:.14em;}
    .home .dstage-boxes{grid-template-columns:1fr 1fr; gap:10px;}
    .home .dbox-head{min-height:148px; padding:15px 14px; gap:14px;}
    .home .dbox-inner{padding:0 14px 16px;}
    /* A phone cannot fit four readable steps, so the track scrolls here. Bleed it
       to the card's edge (negative margin + matching padding) so the steps run
       under the edge like a rail, instead of stopping dead against the border and
       looking severed. */
    .home .dbox-path{margin-inline:-14px; padding-inline:14px; scroll-padding-left:14px;}
    .home .dbox-nm{font-size:clamp(24px,7vw,32px);}
    .home .dbox-sm{font-size:12.5px;}
    .home .dstage-final{font-size:clamp(30px,9vw,44px);}

    .home .xhead{grid-template-columns:auto 1fr auto; gap:12px; padding:18px 16px;}
    .home .xrole{display:none;}
    .home .xstats{grid-template-columns:1fr 1fr;}
    .home .xmeta{flex-direction:column; align-items:stretch; gap:14px;}
    .home .xmeta > div:last-child{display:flex; flex-direction:column; gap:12px;}

    .home .steps{grid-template-columns:1fr;}
    .home .quiz-wrap{grid-template-columns:1fr; gap:26px;}
    .home .schools{grid-template-columns:1fr;}
    .home .schools-right{border-left:none; border-top:1px solid rgba(251,250,247,.1);}
    .home .why-grid{grid-template-columns:1fr;}
    .home .cc{grid-template-columns:1fr;}
    .home .foot-top{grid-template-columns:1fr 1fr;}

    /* academy + rails become swipe carousels */
    .home .hs-track.carousel{display:flex; flex-wrap:nowrap; grid-template-columns:none;}
    .home #academy .swipe-hint{display:inline-flex; align-items:center; gap:6px; color:var(--ink-faint);}
    .home #academy .swipe-hint .h-arw{animation:swipex 1.6s ease-in-out infinite;}
    .home .rail{padding-inline:clamp(16px,5vw,22px);}
  }

  @media (max-width:560px){
    .home .hero-stats{flex-direction:column;}
    .home .hero-stats .st{border-right:none; border-bottom:1px solid rgba(20,18,58,.07);}
    .home .hero-stats .st:last-child{border-bottom:none;}
    .home .foot-top{grid-template-columns:1fr;}
    .home .quiz-meta{gap:16px;}
    .home .method-cta{flex-direction:column; align-items:flex-start; gap:14px;}
  }

  /* ============================================================================
     CONVERSION ADD-ONS — USP trust bar, FAQ accordion, page-hero CTA.
     Additive; tokens only. USP items are PASSIVE trust signals (default cursor,
     no hover-press, not links). FAQ uses native <details>/<summary> so it is
     keyboard-operable with no JS. Motion is transform-only and collapses under
     reduced-motion. Placed last so it wins source order.
     ============================================================================ */

  /* --- page-hero primary CTA (careers/courses/course/about/contact/schools) --- */
  .phero-cta{margin-top:clamp(22px,3vw,32px); display:flex; gap:14px; flex-wrap:wrap;}

  /* --- USP / trust bar (passive) --- */
  .usp-bar{background:var(--card); border-block:1px solid var(--line);}
  .usp-row{display:grid; grid-template-columns:repeat(4,1fr);}
  .usp{display:flex; align-items:center; justify-content:center; gap:11px;
    padding:16px clamp(14px,2vw,24px); cursor:default; border-left:1px solid var(--line);}
  .usp:first-child{border-left:none;}
  .usp .usp-ic{display:inline-flex; flex:none; color:var(--marigold-deep);}
  .usp:nth-child(2) .usp-ic,
  .usp:nth-child(4) .usp-ic{color:var(--teal);}
  .usp .usp-ic svg{display:block; width:18px; height:18px;}
  .usp span{font-family:var(--body); font-size:13.5px; font-weight:500; color:var(--ink);
    line-height:1.25; letter-spacing:-.005em;}
  @media (max-width:860px){
    .usp-row{grid-template-columns:repeat(2,1fr);}
    .usp{justify-content:flex-start;}
    .usp:nth-child(odd){border-left:none;}
    .usp:nth-child(n+3){border-top:1px solid var(--line);}
  }
  @media (max-width:480px){
    .usp-row{grid-template-columns:1fr;}
    .usp{border-left:none; justify-content:flex-start;}
    .usp:nth-child(n+2){border-top:1px solid var(--line);}
  }

  /* --- FAQ accordion --- */
  .faq-sec{padding-block:clamp(56px,8vw,120px);}
  .faq-list{max-width:820px; margin-top:clamp(24px,3vw,40px); border-top:1px solid var(--line);}
  .faq-item{border-bottom:1px solid var(--line);}
  .faq-item > summary{list-style:none; cursor:pointer; display:flex; align-items:center;
    justify-content:space-between; gap:20px; padding:20px 4px; min-height:48px;}
  .faq-item > summary::-webkit-details-marker{display:none;}
  .faq-q{font-family:var(--disp); font-weight:600; font-size:clamp(17px,2vw,21px);
    color:var(--ink); letter-spacing:-.01em; line-height:1.3;}
  .faq-mk{position:relative; flex:none; width:22px; height:22px;}
  .faq-mk::before,.faq-mk::after{content:""; position:absolute; top:50%; left:50%;
    width:14px; height:2px; border-radius:2px; background:var(--marigold-deep);
    transform:translate(-50%,-50%); transition:transform .25s var(--ease);}
  .faq-mk::after{transform:translate(-50%,-50%) rotate(90deg);}
  .faq-item[open] .faq-mk::after{transform:translate(-50%,-50%) rotate(0deg);}
  .faq-a{padding:0 4px 22px;}
  .faq-a p{font-family:var(--body); font-size:15.5px; line-height:1.6; color:var(--ink-soft);
    margin:0; max-width:66ch;}
  .faq-item > summary:focus-visible{outline:2px solid var(--teal); outline-offset:2px; border-radius:6px;}
  .faq-cta{display:flex; align-items:center; gap:20px; flex-wrap:wrap;
    margin-top:clamp(28px,3.5vw,44px);}
  .faq-cta p{font-family:var(--disp); font-weight:500; font-size:clamp(17px,2vw,20px);
    color:var(--ink); margin:0;}
  @media (max-width:560px){
    .faq-cta{flex-direction:column; align-items:flex-start; gap:14px;}
    .faq-cta .btn{width:100%;}
  }