:root{
    --indigo-900:#0B0E1F;
    --indigo-800:#141833;
    --indigo-700:#1F2440;
    --violet-500:#C05F3D;
    --violet-400:#D17849;
    --cyan-400:#7FA8C4;
    --cyan-300:#9DC3DA;
    --paper:#FBF8F2;
    --mist:#F2ECDF;
    --ink:#262A30;
    --ink-soft:#6E6A60;
    --line:#E6DFCE;
    --line-dark:#2A3050;
    --white:#FFFFFF;
    --maxw:1180px;
    --display:"Fraunces",Georgia,serif;
    --body:"Inter",system-ui,sans-serif;
    --mono:"IBM Plex Mono",monospace;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    font-family:var(--body);
    color:var(--ink);
    background:var(--paper);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  h1,h2,h3{font-family:var(--display);font-weight:500;line-height:1.08;letter-spacing:-0.02em}
  a{color:inherit;text-decoration:none}
  section{position:relative}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
  .eyebrow{
    font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.18em;
    text-transform:uppercase;color:var(--violet-500);margin-bottom:22px;display:inline-block;
  }
  .eyebrow.on-dark{color:var(--cyan-300)}
  .lead{font-size:1.18rem;color:var(--ink-soft);max-width:60ch}
  .lead.on-dark{color:#C2B8A0}

  /* ---------- NAV ---------- */
  header{
    position:fixed;top:0;left:0;right:0;z-index:100;
    background:rgba(251,250,255,.82);backdrop-filter:blur(14px);
    border-bottom:1px solid transparent;transition:border-color .3s,background .3s;
  }
  header.scrolled{border-bottom-color:var(--line)}
  .nav{display:flex;align-items:center;justify-content:space-between;height:70px;max-width:var(--maxw);margin:0 auto;padding:0 28px}
  .brand{display:flex;align-items:center;gap:11px;font-family:var(--display);font-size:1.12rem;font-weight:600;letter-spacing:-.01em}
  .brand .mark{width:26px;height:26px;flex-shrink:0}
  .nav-links{display:flex;align-items:center;gap:30px}
  .nav-links a{font-size:.9rem;color:var(--ink-soft);font-weight:500;transition:color .2s}
  .nav-links a:hover{color:var(--ink)}
  .btn{
    display:inline-flex;align-items:center;gap:8px;font-family:var(--body);font-weight:600;
    font-size:.9rem;padding:11px 22px;border-radius:100px;cursor:pointer;border:none;
    transition:transform .15s,box-shadow .3s,background .3s;text-align:center;
  }
  .btn-primary{
    background:linear-gradient(120deg,var(--violet-500),var(--violet-400));color:var(--white);
    box-shadow:0 4px 20px rgba(192,95,61,.32);
  }
  .btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 28px rgba(192,95,61,.42)}
  .btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
  .btn-ghost:hover{border-color:var(--violet-400);color:var(--violet-500)}
  .btn-ghost.on-dark{color:var(--white);border-color:var(--line-dark)}
  .btn-ghost.on-dark:hover{border-color:var(--cyan-400);color:var(--cyan-300)}
  .nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px}
  .nav-toggle span{display:block;width:22px;height:2px;background:var(--ink);margin:4px 0;transition:.3s}

  /* ---------- HERO ---------- */
  .hero{
    background:
      radial-gradient(1200px 700px at 78% -5%, rgba(127,168,196,.16), transparent 60%),
      radial-gradient(900px 600px at 8% 25%, rgba(209,120,73,.20), transparent 55%),
      linear-gradient(180deg,var(--indigo-900),var(--indigo-800));
    color:var(--white);position:relative;overflow:hidden;
    padding:150px 0 110px;
  }
  #hero-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.9}
  .hero .wrap{position:relative;z-index:2}
  .hero-eyebrow{
    font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
    color:var(--cyan-300);margin-bottom:28px;display:flex;align-items:center;gap:10px;
  }
  .hero-eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--cyan-400);box-shadow:0 0 12px var(--cyan-400)}
  .hero h1{font-size:clamp(2.6rem,6vw,4.6rem);max-width:16ch;margin-bottom:30px;font-weight:500}
  .hero h1 .grad{
    background:linear-gradient(110deg,var(--cyan-300),var(--violet-400));
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    font-style:italic;
  }
  .hero-sub{font-size:1.18rem;color:#D9CEB0;max-width:56ch;margin-bottom:20px}
  .hero-sub2{font-size:1.02rem;color:#B0A488;max-width:52ch;margin-bottom:38px}
  .hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
  .hero-init{margin-top:34px;font-size:.92rem;color:#A89A7C}
  .hero-init b{color:#E8DCC0;font-weight:600}

  .teaser-link{font-family:var(--mono);font-size:.82rem;color:var(--violet-500);border-bottom:1px dashed var(--violet-400);padding-bottom:2px}
  .teaser-link.on-dark{color:var(--cyan-300);border-bottom-color:var(--cyan-400)}

  /* ---------- QUICK NAV ---------- */
  .quicknav{background:var(--indigo-900);border-bottom:1px solid var(--line-dark);padding:26px 0}
  .qn-wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-dark);border-radius:14px;overflow:hidden;border:1px solid var(--line-dark)}
  .qn-item{background:var(--indigo-900);padding:20px 24px;display:flex;flex-direction:column;gap:5px;transition:background .2s}
  .qn-item:hover{background:var(--indigo-800)}
  .qn-k{font-weight:600;font-size:.98rem;color:var(--white)}
  .qn-d{font-size:.82rem;color:#A89A7C}

  /* ---------- generic light section ---------- */
  .sec{padding:104px 0}
  .sec-sm{padding:76px 0}
  .sec h2{font-size:clamp(1.9rem,3.6vw,2.9rem);max-width:20ch;margin-bottom:22px}
  .center{text-align:center;margin-left:auto;margin-right:auto}
  .center .lead{margin-left:auto;margin-right:auto}
  .dark{
    background:linear-gradient(180deg,var(--indigo-800),var(--indigo-900));color:var(--white);
  }
  .dark h2{color:var(--white)}
  .mistbg{background:var(--mist)}

  /* story */
  .story-list{max-width:60ch;margin-top:12px}
  .story-list p{font-size:1.14rem;color:var(--ink-soft);margin-bottom:14px}
  .story-list p b{color:var(--ink);font-weight:600}
  .pullquote{
    font-family:var(--display);font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.28;
    color:var(--ink);max-width:24ch;font-style:italic;
    border-left:3px solid var(--cyan-400);padding-left:26px;margin-top:8px;
  }
  .pullquote.on-dark{color:#F5F0E0;border-left-color:var(--cyan-400)}

  /* challenge fragmented list */
  .frag{display:flex;flex-wrap:wrap;gap:12px;margin:30px 0}
  .frag span{
    font-family:var(--mono);font-size:.82rem;padding:9px 15px;border-radius:8px;
    background:var(--white);border:1px solid var(--line);color:var(--ink-soft);
  }
  .callout{
    background:linear-gradient(120deg,var(--indigo-700),var(--violet-500));
    color:var(--white);border-radius:18px;padding:36px 40px;margin-top:20px;
    font-family:var(--display);font-size:clamp(1.2rem,2.2vw,1.6rem);line-height:1.34;font-style:italic;
  }

  /* belief cycle chips */
  .cycle-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:34px 0 8px}
  .cycle-row .chip{
    font-family:var(--mono);font-size:.8rem;padding:10px 16px;border-radius:100px;
    background:var(--white);border:1px solid var(--line);font-weight:500;
  }
  .cycle-row .arw{color:var(--violet-400);font-size:1.1rem}

  /* three columns */
  .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:14px}
  .grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
  .card{
    background:var(--white);border:1px solid var(--line);border-radius:18px;padding:32px;
    transition:transform .25s,box-shadow .25s,border-color .25s;
  }
  .card:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(30,20,80,.08);border-color:var(--violet-400)}
  .card h3{font-size:1.28rem;margin-bottom:12px}
  .card .knum{font-family:var(--mono);font-size:.78rem;color:var(--violet-500);letter-spacing:.1em;display:block;margin-bottom:14px}
  .card p{color:var(--ink-soft);font-size:.98rem}
  .card.on-dark{background:rgba(255,255,255,.04);border-color:var(--line-dark)}
  .card.on-dark h3{color:var(--white)}
  .card.on-dark p{color:#B8AD98}

  /* LEP loop */
  .lep-wrap{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
  #lep-canvas{width:100%;max-width:440px;aspect-ratio:1;margin:0 auto;display:block}
  .lep-steps .step{padding:22px 0;border-bottom:1px solid var(--line-dark)}
  .lep-steps .step:last-child{border-bottom:none}
  .lep-steps h3{font-size:1.5rem;color:var(--white);margin-bottom:8px;display:flex;align-items:center;gap:12px}
  .lep-steps h3 .bul{width:11px;height:11px;border-radius:50%}
  .lep-steps p{color:#B8AD98;font-size:1rem;max-width:44ch}

  /* HUB */
  .hub-row{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:16px}
  .hub-card{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:34px 30px;position:relative;overflow:hidden}
  .hub-card .letter{font-family:var(--display);font-size:3.4rem;font-weight:600;line-height:1;background:linear-gradient(140deg,var(--violet-500),var(--cyan-400));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:14px}
  .hub-card h3{font-size:1.3rem;margin-bottom:10px}
  .hub-card p{color:var(--ink-soft);font-size:.97rem}

  /* network effect canvas */
  #net-canvas{width:100%;height:340px;display:block;margin-top:20px;border-radius:18px;background:rgba(255,255,255,.02);border:1px solid var(--line-dark)}

  /* co-sell diagram */
  .cosell-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:center;margin-top:10px}
  .cosell-vis{background:var(--white);border:1px solid var(--line);border-radius:22px;padding:20px}
  #cosell-canvas{width:100%;height:auto;display:block}
  .compare{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px}
  .compare .col{border-radius:16px;padding:24px}
  .compare .a{background:var(--mist);border:1px solid var(--line)}
  .compare .b{background:linear-gradient(150deg,var(--indigo-700),var(--violet-500));color:var(--white)}
  .compare .col .t{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px;opacity:.8}
  .compare .a .t{color:var(--ink-soft);opacity:1}
  .compare .b .t{color:var(--white)}
  .compare .col p{font-size:.98rem}
  .compare .a p{color:var(--ink-soft)}
  .compare .b p{color:#F5F0E0}
  .isnot{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px}
  .isnot .box h4{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--violet-500);margin-bottom:12px}
  .isnot .box ul{list-style:none}
  .isnot .box li{font-size:.94rem;color:#C2B8A0;padding:6px 0 6px 22px;position:relative}
  .isnot .box.is li::before{content:"✓";position:absolute;left:0;color:var(--cyan-400);font-weight:700}
  .isnot .box.not li::before{content:"×";position:absolute;left:0;color:#8A7F68;font-weight:700}

  /* seven pathways */
  .paths{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:14px}
  .path{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:24px 22px;transition:border-color .2s,transform .2s}
  .path:hover{border-color:var(--violet-400);transform:translateY(-2px)}
  .path h4{font-size:1.08rem;margin-bottom:8px;font-family:var(--display);font-weight:600}
  .path p{font-size:.9rem;color:var(--ink-soft)}

  /* why different two-col */
  .flowcol{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:32px}
  .flowcol.b{background:linear-gradient(180deg,var(--indigo-800),var(--indigo-900));border:none;color:var(--white)}
  .flowcol h3{font-size:1.15rem;margin-bottom:20px}
  .flowcol.b h3{color:var(--white)}
  .flowstep{font-family:var(--mono);font-size:.9rem;padding:8px 0;color:var(--ink-soft)}
  .flowcol.b .flowstep{color:#B8AD98}
  .flowstep .ar{color:var(--violet-400);display:block;font-size:.8rem;margin:2px 0}
  .repeat-badge{display:inline-block;margin-top:10px;font-family:var(--mono);font-size:.8rem;color:var(--cyan-300);border:1px solid var(--cyan-400);border-radius:100px;padding:6px 16px}

  /* pilot */
  .dignity{
    background:linear-gradient(120deg,var(--indigo-700),var(--violet-500));color:var(--white);
    border-radius:18px;padding:34px 38px;font-family:var(--display);font-style:italic;
    font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.36;margin-top:26px;max-width:34ch;
  }
  .tag{display:inline-block;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
    padding:5px 12px;border-radius:100px;background:rgba(209,120,73,.14);color:var(--violet-500);margin-left:10px;vertical-align:middle}
  .tag.dark{background:rgba(157,195,218,.14);color:var(--cyan-300)}

  /* indicators list */
  .ind{columns:2;column-gap:40px;margin-top:20px;max-width:760px}
  .ind li{list-style:none;padding:9px 0 9px 26px;position:relative;color:var(--ink-soft);font-size:.98rem;break-inside:avoid}
  .dark .ind li{color:#C2B8A0}
  .ind li::before{content:"";position:absolute;left:0;top:16px;width:9px;height:9px;border-radius:50%;background:linear-gradient(140deg,var(--violet-500),var(--cyan-400))}

  /* roles grid */
  .roles{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:16px}
  .role{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:28px;transition:.2s}
  .role:hover{border-color:var(--violet-400);transform:translateY(-2px)}
  .role .ico{width:38px;height:38px;margin-bottom:16px;color:var(--violet-500)}
  .role h3{font-size:1.16rem;margin-bottom:8px}
  .role p{font-size:.94rem;color:var(--ink-soft)}

  /* hub examples chips */
  .hubex{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px;max-width:760px}
  .hubex span{font-family:var(--body);font-weight:500;font-size:.92rem;padding:10px 18px;border-radius:100px;background:var(--white);border:1px solid var(--line);transition:.2s}
  .hubex span:hover{border-color:var(--violet-400);color:var(--violet-500)}

  /* partners list */
  .plist{margin-top:16px}
  .prow{display:grid;grid-template-columns:230px 1fr;gap:24px;padding:22px 0;border-bottom:1px solid var(--line);align-items:baseline}
  .prow:last-child{border-bottom:none}
  .prow h4{font-size:1.12rem;font-family:var(--display);font-weight:600}
  .prow p{color:var(--ink-soft);font-size:.98rem}

  /* governance */
  .govgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:22px}
  .govgrid .g{display:flex;gap:12px;align-items:flex-start;padding:14px 0}
  .govgrid .g .c{width:20px;height:20px;flex-shrink:0;color:var(--cyan-400);margin-top:2px}
  .govgrid .g span{color:#C2B8A0;font-size:1rem}
  .status-note{margin-top:26px;padding:22px 26px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--line-dark);color:#B8AD98;font-size:.98rem;max-width:70ch}

  /* ---------- PHOTO PLACEHOLDER (swap src when real image is ready) ----------
     To add a real photo: replace the .ph-inner div's content with
     <img src="/images/yourfile.jpg" alt="..."> inside the .photo-slot div.
     No backend needed — just drop the file in an /images folder and point to it. */
  .photo-slot{
    aspect-ratio:1/1;border-radius:16px;overflow:hidden;position:relative;
    background:linear-gradient(150deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
    border:1px dashed var(--line-dark);display:flex;align-items:center;justify-content:center;
  }
  .photo-slot.light{background:linear-gradient(150deg,var(--mist),var(--paper));border-color:var(--line)}
  .photo-slot img{width:100%;height:100%;object-fit:cover;display:block}
  .photo-slot .ph-inner{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px;text-align:center}
  .photo-slot svg{width:30px;height:30px;color:var(--line-dark);opacity:.7}
  .photo-slot.light svg{color:var(--ink-soft);opacity:.4}
  .photo-slot .ph-label{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:#7A7460}
  .photo-slot.light .ph-label{color:var(--ink-soft);opacity:.55}
  .team-row{display:grid;grid-template-columns:140px 1fr;gap:24px;align-items:center;margin-top:24px;max-width:560px}
  .team-row .photo-slot{width:100%;aspect-ratio:1}
  .team-row .tcopy .name{font-family:var(--display);font-size:1.15rem;color:#F5F0E0;margin-bottom:4px}
  .team-row .tcopy .role{font-family:var(--mono);font-size:.75rem;color:#8A8470;text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
  .team-row .tcopy p{font-size:.92rem;color:#B8AD98}
  .story-illustration{width:100%;max-width:460px;aspect-ratio:1/1;margin:0 auto 0;display:block;border-radius:22px;box-shadow:0 20px 50px rgba(20,15,5,.14);object-fit:cover}
  .story-legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 28px;margin:16px auto 28px;max-width:720px;text-align:left}
  .story-legend span{font-family:var(--mono);font-size:.78rem;color:var(--ink-soft);display:flex;align-items:center;gap:7px}
  .story-legend b{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;color:#fff;font-size:.68rem;font-weight:700}

  /* resources */
  .resgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:16px}
  .res{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:26px;display:flex;flex-direction:column;gap:12px;transition:.2s}
  .res:hover{border-color:var(--violet-400);box-shadow:0 14px 34px rgba(30,20,80,.07)}
  .res .meta{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
  .res h3{font-size:1.14rem}
  .res p{font-size:.93rem;color:var(--ink-soft);flex-grow:1}
  .res .go{font-weight:600;font-size:.9rem;color:var(--violet-500);display:inline-flex;align-items:center;gap:6px}
  .res.soon{opacity:.62;cursor:default;pointer-events:none}
  .res.soon .go{color:var(--ink-soft)}

  /* final CTA */
  .finalcta{
    background:
      radial-gradient(800px 400px at 80% 10%, rgba(127,168,196,.18), transparent 60%),
      linear-gradient(160deg,var(--indigo-800),var(--indigo-900));
    color:var(--white);text-align:center;padding:120px 0;
  }
  .finalcta h2{font-size:clamp(2rem,4.4vw,3.4rem);max-width:18ch;margin:0 auto 26px;color:var(--white)}
  .finalcta .lead{color:#C2B8A0;margin:0 auto 20px}
  .finalcta .btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:38px 0 42px}
  .finalcta .amb{
    font-family:var(--display);font-style:italic;font-size:clamp(1.2rem,2.2vw,1.55rem);
    line-height:1.4;max-width:30ch;margin:0 auto;color:#F5F0E0;
    padding-top:38px;border-top:1px solid var(--line-dark);
  }

  /* footer */
  footer{background:var(--indigo-900);color:#B0A488;padding:70px 0 40px}
  .foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-bottom:44px;border-bottom:1px solid var(--line-dark)}
  .foot-brand .brand{color:var(--white);margin-bottom:16px}
  .foot-brand p{font-size:.94rem;max-width:34ch;margin-bottom:10px}
  .foot-brand .init b{color:#E8DCC0}
  .foot-col h5{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#8A7F68;margin-bottom:16px}
  .foot-col a{display:block;font-size:.92rem;color:#B8AD98;padding:6px 0;transition:color .2s}
  .foot-col a:hover{color:var(--cyan-300)}
  .foot-bot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;padding-top:32px}
  .foot-bot .disc{font-size:.82rem;color:#8A7F68;max-width:60ch;line-height:1.6}
  .foot-lep{font-family:var(--display);font-style:italic;color:var(--cyan-300);font-size:1.05rem;white-space:nowrap}

  /* reveal animation */
  .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
  .reveal.in{opacity:1;transform:none}



  /* ---------- INNER PAGE HERO (smaller banner, not full homepage hero) ---------- */
  .page-hero{
    background:linear-gradient(180deg,var(--indigo-900),var(--indigo-800));
    color:var(--white);padding:150px 0 70px;position:relative;overflow:hidden;
  }
  .page-hero::after{
    content:"";position:absolute;top:-120px;right:-120px;width:420px;height:420px;border-radius:50%;
    border:1px solid var(--line-dark);opacity:.5;
  }
  .page-hero .wrap{position:relative;z-index:2}
  .page-hero .eyebrow{color:var(--cyan-300)}
  .page-hero h1{font-size:clamp(2.1rem,4.6vw,3.4rem);color:var(--white);max-width:20ch;margin-bottom:18px}
  .page-hero p{font-size:1.08rem;color:#C4BEEA;max-width:62ch}
  .breadcrumb{font-family:var(--mono);font-size:.78rem;color:#8A8470;margin-bottom:18px}
  .breadcrumb a{color:#B8AD98}
  .breadcrumb a:hover{color:var(--cyan-300)}

  /* ---------- FORMS ---------- */
  .form-card{background:var(--white);border:1px solid var(--line);border-radius:20px;padding:40px;max-width:720px;margin:0 auto}
  .form-card.on-dark{background:rgba(255,255,255,.04);border-color:var(--line-dark)}
  .field{margin-bottom:20px}
  .field label{display:block;font-family:var(--mono);font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px}
  .field input,.field select,.field textarea{
    width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--line);
    font-family:var(--body);font-size:1rem;color:var(--ink);background:var(--paper);
    transition:border-color .2s;
  }
  .field select{
    appearance:none;-webkit-appearance:none;-moz-appearance:none;
    padding-right:42px;cursor:pointer;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6A60' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 14px center;
    background-size:16px;
  }
  .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--violet-500)}
  .field textarea{resize:vertical;min-height:100px}
  .field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .field-check{display:flex;align-items:flex-start;gap:10px;margin-bottom:24px}
  .field-check input{width:auto;margin-top:3px}
  .field-check label{font-family:var(--body);font-size:.88rem;color:var(--ink-soft);text-transform:none;letter-spacing:0}
  .form-submit{width:100%;justify-content:center;font-size:1rem;padding:14px}
  .form-note{display:none;margin-top:16px;padding:14px 18px;border-radius:10px;background:var(--mist);color:var(--ink-soft);font-size:.9rem}
  .req{color:var(--violet-500)}

  /* ---------- content page utility ---------- */
  .prose{max-width:70ch}
  .prose p{margin-bottom:16px;color:var(--ink-soft);font-size:1.02rem;line-height:1.7}
  .prose h3{font-size:1.3rem;margin:32px 0 12px;color:var(--ink)}
  .toc{background:var(--mist);border-radius:16px;padding:24px 28px;margin-bottom:8px}
  .toc h4{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:14px}
  .toc ol{padding-left:20px}
  .toc li{color:var(--ink-soft);font-size:.92rem;padding:4px 0}
  .toc a{color:var(--ink);font-weight:500}
  .toc a:hover{color:var(--violet-500)}
  .pathway-row{display:grid;grid-template-columns:230px 1fr;gap:24px;padding:20px 0;border-bottom:1px solid var(--line);align-items:baseline}
  .pathway-row:last-child{border-bottom:none}
  .cta-band{
    background:linear-gradient(150deg,var(--indigo-800),var(--indigo-900));color:var(--white);
    border-radius:24px;padding:56px 48px;text-align:center;margin-top:20px;
  }
  .cta-band h2{color:var(--white);font-size:clamp(1.6rem,3vw,2.2rem);margin:0 auto 14px;max-width:27ch}
  .cta-band p{color:#C4BEEA;max-width:52ch;margin:0 auto 26px}

  /* ---------- nav active state, mobile backdrop, focus rings ---------- */
  .nav-links a.nav-active{color:var(--ink);position:relative}
  .nav-links a.nav-active::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:linear-gradient(120deg,var(--violet-500),var(--violet-400))}
  /* z-index kept below header's (100) — header establishes its own stacking
     context, so .nav-links' z-index:150 only applies inside it; a backdrop
     z-index higher than header's would sit on top of the open dropdown too
     and swallow its clicks, even though nav-links' own number looks higher. */
  .nav-backdrop{position:fixed;inset:0;background:rgba(11,14,31,.45);opacity:0;pointer-events:none;transition:opacity .25s ease;z-index:90}
  .nav-backdrop.show{opacity:1;pointer-events:auto}
  a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
    outline:2px solid var(--violet-400);outline-offset:3px;border-radius:4px;
  }
  .field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline-offset:0}

  /* ---------- consistent hover/transition timing across interactive tiles ---------- */
  .card,.role,.res,.path,.hub-card{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
  .hub-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(30,20,80,.08);border-color:var(--violet-400)}

  /* ---------- post-apply "journey" modal ---------- */
  .modal-backdrop{
    position:fixed;inset:0;background:rgba(11,14,31,.6);z-index:300;
    display:flex;align-items:center;justify-content:center;padding:24px;
    opacity:0;pointer-events:none;transition:opacity .25s ease;
  }
  .modal-backdrop.show{opacity:1;pointer-events:auto}
  .modal-card{
    background:var(--paper);border-radius:22px;padding:48px 44px;max-width:480px;width:100%;
    position:relative;box-shadow:0 30px 80px rgba(11,14,31,.35);
    transform:translateY(12px) scale(.98);transition:transform .25s ease;text-align:center;
  }
  .modal-backdrop.show .modal-card{transform:none}
  .modal-close{
    position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:50%;
    border:none;background:var(--mist);color:var(--ink-soft);font-size:1.3rem;line-height:1;
    cursor:pointer;display:flex;align-items:center;justify-content:center;
  }
  .modal-close:hover{background:var(--line);color:var(--ink)}
  .modal-eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--violet-500);display:block;margin-bottom:16px}
  .modal-card h3{font-family:var(--display);font-size:1.9rem;margin-bottom:14px;color:var(--ink)}
  .modal-card p{color:var(--ink-soft);font-size:1.02rem;line-height:1.6;margin-bottom:28px}
  .modal-cta{width:100%;justify-content:center}

  /* ---------- video placeholder slot (welcome page) ---------- */
  .video-slot{
    aspect-ratio:16/9;border-radius:20px;background:linear-gradient(150deg,var(--indigo-800),var(--indigo-900));
    border:1px dashed var(--line-dark);display:flex;align-items:center;justify-content:center;
    max-width:560px;margin:24px auto 0;color:var(--white);
  }
  .video-slot .video-inner{display:flex;flex-direction:column;align-items:center;gap:14px}
  .video-slot svg{width:52px;height:52px;color:var(--cyan-300)}
  .video-slot .video-label{font-family:var(--mono);font-size:.82rem;color:#B8AD98}

  /* ---------- journey steps ("what happens after the session") ---------- */
  .journey-steps{margin-top:28px;display:flex;flex-direction:column;align-items:center}
  .jstep{display:flex;align-items:center;gap:16px;max-width:440px;width:100%;padding:10px 0;text-align:left}
  .jstep .jn{
    flex-shrink:0;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    background:linear-gradient(140deg,var(--violet-500),var(--cyan-400));color:var(--white);
    font-family:var(--mono);font-weight:600;font-size:.95rem;
  }
  .jstep p{color:#C2B8A0;font-size:1rem}
  .jarrow{color:var(--cyan-400);font-size:1.1rem;opacity:.7;line-height:1}

  /* ---------- RESPONSIVE OVERRIDES (kept last so they always win the cascade) ---------- */
  @media (max-width:900px){
    .nav-links{
      display:flex;flex-direction:column;gap:16px;position:absolute;top:70px;right:20px;left:20px;
      max-width:calc(100% - 40px);background:var(--white);padding:20px;border-radius:16px;
      box-shadow:0 20px 50px rgba(30,20,80,.16);z-index:150;
      opacity:0;visibility:hidden;transform:translateY(-8px);pointer-events:none;
      transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s;
    }
    .nav-links.open{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:opacity .22s ease,transform .22s ease}
    .nav-toggle{display:block}
    .nav-toggle.active span:nth-child(1){transform:translateY(6px) rotate(45deg)}
    .nav-toggle.active span:nth-child(2){opacity:0}
    .nav-toggle.active span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
    .grid3,.hub-row,.roles,.resgrid,.paths{grid-template-columns:1fr 1fr}
    .lep-wrap,.cosell-grid,.grid2,.foot-top{grid-template-columns:1fr;gap:34px}
    .compare,.isnot,.govgrid{grid-template-columns:1fr}
    .story-legend{grid-template-columns:1fr}
    .team-row{grid-template-columns:100px 1fr}
    .prow{grid-template-columns:1fr;gap:6px}
    .pathway-row{grid-template-columns:1fr;gap:6px}
    .qn-wrap{grid-template-columns:1fr}
    .field-row{grid-template-columns:1fr;gap:0}
    .ind{columns:1}
    .foot-top{grid-template-columns:1fr 1fr}
  }
  @media (max-width:560px){
    .paths,.grid3,.hub-row,.roles,.resgrid,.foot-top{grid-template-columns:1fr}
    .sec{padding:72px 0}
    .hero{padding:120px 0 80px}
    .form-card{padding:22px}
    .cta-band{padding:40px 26px}
    .modal-card{padding:34px 26px}
    .jstep{max-width:100%}
    .team-row{grid-template-columns:76px 1fr;gap:16px}
  }
  @media (prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important}
    .reveal{opacity:1;transform:none}
  }