/* ============================================================
     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:.05; mix-blend-mode:multiply;
    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
     ============================================================ */
  .masthead{position:sticky; top:0; z-index:120; background:rgba(247,246,242,.84);
    -webkit-backdrop-filter:blur(18px) saturate(180%); backdrop-filter:blur(18px) saturate(180%);
    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,.88);
    -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
    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,.94); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
    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 --- */
  .eyebrow{display:inline-block; font-family:var(--mono); font-weight:500; font-size:12px;
    letter-spacing:.18em; text-transform:uppercase; color:var(--marigold-deep);}

  /* --- 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,.72);
    -webkit-backdrop-filter:blur(14px) saturate(1.4);
    backdrop-filter:blur(14px) saturate(1.4);
    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(18px) saturate(1.6);
    backdrop-filter:blur(18px) saturate(1.6);
    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,.74), rgba(251,250,247,.60));
    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; }

  /* --- 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{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);}
  @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,.80), rgba(251,250,247,.64));
      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(64px); 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 six doors — light bordered cards on paper (STATIC = grid) */
  .home .dstage-boxes{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.4vw,18px);
    max-width:960px; margin:0 auto;}
  .home .dbox{position:relative; display:flex; flex-direction:column; justify-content:space-between; gap:22px;
    min-height:186px; padding:clamp(16px,1.5vw,22px);
    border:1px solid var(--line); border-radius:14px;
    background:rgba(20,18,58,.022);
    will-change:transform;}
  .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; will-change:transform,opacity;}
  .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); min-height:0; aspect-ratio:3/4; gap:0; transition:none;}
  .home #boxes.dstage-live .dstage-field{display:block;}
  /* the final resolves last, absolutely centred over the cleared cloud */
  .home #boxes.dstage-live .dstage-final{position:absolute; inset:0; z-index:4; margin:0; opacity:0;
    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);}

  /* ============ 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%;}
  .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); transform:scale(var(--dot,1));}
  .home .stop:last-child .n{background:var(--ink); border-color:var(--ink); color:#fff;}
  .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(64px); will-change:transform;}
  .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(70px); 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;}
    .home .orbit{top:8%; left:auto; right:-40%; transform:none; opacity:.7;}
    .home .orbit .o1{width:300px; height:300px;} .home .orbit .o2{width:420px; height:420px;} .home .orbit .o3{width:560px; height:560px;}
    .home .orbit .op-m,.home .orbit .op-t{display:none;}
    .home .scroll-hint{display:none;}
    .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{min-height:148px; padding:15px 14px; gap: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%;}
  }