/* ============================================================================
   AURA — CONTENT PAGES (about / contact / schools) — Clean-agency skin.
   Loaded AFTER aura.css + app-shell.css, so these page-specific rules win.
   Foundations come from aura.css and are NOT redefined here:
     - tokens (--ink/--paper/--marigold-deep/--teal/--disp/--body/--mono/--ease/
       --sh-1/--sh-2/--radius ...)
     - base components (.btn/.btn--solid/.btn--ghost/.card/.chip/.eyebrow/
       .field/.input/.label/.glass-nav/.reveal/.wrap/.sec)
     - shared clean chrome scoped to `.home` (glass nav, footer, cursor,
       floating glass-cta, ambient glow + grain)
   Every rule below is scoped to a page class (.about/.contact/.schools) or a
   page-local component class, so nothing leaks into home or the portal.
   Breakpoint 900px (native-app under). Motion is transform/opacity only.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   SHARED CONTENT-PAGE PRIMITIVES
   ------------------------------------------------------------------------- */
.about main, .contact main, .schools main{ display:block; }

/* page hero */
.page-hero{ padding-top:clamp(34px,6vw,74px); padding-bottom:clamp(26px,4vw,48px); position:relative; }
.page-hero .crumb{ display:flex; align-items:center; gap:9px; font-family:var(--mono);
  font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint);
  margin-bottom:clamp(16px,2.4vw,26px); }
.page-hero .crumb a{ color:var(--ink-faint); transition:color .2s var(--ease); }
.page-hero .crumb a:hover{ color:var(--marigold-deep); }
.page-hero .crumb .sep{ opacity:.5; }
.page-hero h1{ font-size:clamp(38px,7.4vw,84px); line-height:1.0; letter-spacing:-.03em; max-width:15ch; }
.page-hero h1 em{ font-style:italic; color:var(--marigold-deep); }
.page-hero .hero-foot{ display:flex; align-items:flex-end; justify-content:space-between;
  gap:clamp(18px,3vw,40px); flex-wrap:wrap; margin-top:clamp(20px,3vw,34px); }
.page-hero .hero-foot .lead{ max-width:54ch; }
.page-hero .folio{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-faint); white-space:nowrap; padding-bottom:4px; }

/* section heads */
.p-head{ max-width:720px; margin-bottom:clamp(26px,4vw,46px); }
.p-head .eyebrow{ margin-bottom:14px; }
.p-head h2{ margin:0; }
.p-head h2 em{ font-style:italic; color:var(--marigold-deep); }
.p-head .lead{ margin-top:16px; }
.p-runhead{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding-bottom:14px; margin-bottom:clamp(22px,3vw,40px); border-bottom:1px solid var(--line); }
.p-runhead .eyebrow{ margin:0; }
.p-runhead h2{ margin:0; font-size:clamp(23px,3.2vw,38px); }
.p-runhead .note{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-faint); }

/* card grids — auto-fit so they never overflow a 360px viewport */
.p-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:16px; }
.p-cards--2{ grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); }

/* a plain feature card body (used inside base .card) */
.fcard .k{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--marigold-deep); font-weight:600; margin-bottom:14px; display:block; }
.fcard h3{ font-size:clamp(19px,1.9vw,24px); line-height:1.15; margin-bottom:10px; }
.fcard p{ color:var(--ink-soft); font-size:15px; line-height:1.55; }

/* long-form prose */
.prose{ max-width:64ch; }
.prose p{ font-size:clamp(16px,1.35vw,18px); line-height:1.7; color:var(--ink-soft); margin-bottom:20px; }
.prose p:last-child{ margin-bottom:0; }
.prose strong{ color:var(--ink); font-weight:600; }

/* dark feature band */
.ink-band{ position:relative; overflow:hidden; background:linear-gradient(165deg,var(--ink),var(--deep));
  color:var(--paper); border-radius:26px; padding:clamp(28px,5vw,64px); box-shadow:var(--sh-2); }
.ink-band .eyebrow{ color:var(--marigold); }
.ink-band h2{ color:var(--paper); }
.ink-band h2 em{ font-style:italic; color:var(--marigold); }
.ink-band .p-runhead{ border-color:rgba(251,250,247,.18); }
.ink-band .p-runhead .note{ color:rgba(251,250,247,.5); }
.ink-card{ background:rgba(251,250,247,.045); border:1px solid rgba(251,250,247,.12); border-radius:16px;
  padding:clamp(20px,2.4vw,28px); transition:transform .25s var(--ease), background .25s var(--ease); }
.ink-card:hover{ transform:translateY(-3px); background:rgba(251,250,247,.08); }
.ink-card .k{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--marigold); font-weight:600; margin-bottom:12px; display:block; }
.ink-card h2, .ink-card h3{ color:var(--paper); font-size:clamp(18px,1.7vw,22px); margin-bottom:8px; }
.ink-card p{ color:rgba(251,250,247,.72); font-size:14.5px; line-height:1.55; }

/* cta rows + underline link */
.cta-row{ display:flex; gap:16px 20px; align-items:center; flex-wrap:wrap; margin-top:clamp(26px,3.2vw,42px); }
.ink-band .link-u{ color:var(--marigold); }
.ink-band .link-u:hover{ border-bottom-color:var(--marigold); }

/* closing CTA band */
.cta-band{ text-align:center; }
.cta-band .eyebrow{ margin-bottom:14px; }
.cta-band h2{ font-size:clamp(30px,5.4vw,58px); letter-spacing:-.025em; line-height:1.02; max-width:17ch; margin:0 auto; }
.cta-band h2 em{ font-style:italic; color:var(--marigold-deep); }
.cta-band p{ margin:18px auto 0; max-width:48ch; color:var(--ink-soft); }
.cta-band .cta-row{ justify-content:center; }

/* ---------------------------------------------------------------------------
   ABOUT
   ------------------------------------------------------------------------- */
.about .founder-grid{ display:grid; grid-template-columns:.72fr 2fr; gap:clamp(20px,3vw,48px);
  align-items:start; margin-top:clamp(30px,4vw,54px); }
.about .fpanel{ position:relative; overflow:hidden; aspect-ratio:4/5; border-radius:20px;
  background:linear-gradient(165deg,var(--ink),var(--deep)); color:var(--paper); padding:20px;
  display:flex; flex-direction:column; justify-content:space-between; box-shadow:var(--sh-2); }
.about .fpanel .cap{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(251,250,247,.6); position:relative; z-index:2; }
.about .fpanel .initial{ position:absolute; left:50%; top:52%; transform:translate(-50%,-50%);
  font-family:var(--disp); font-weight:700; font-size:clamp(120px,16vw,220px); line-height:.7;
  color:rgba(251,250,247,.09); }
.about .fnote{ font-size:clamp(15px,1.2vw,17.5px); line-height:1.7; color:var(--ink-soft); }
.about .fnote .sig{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink); margin-top:20px; }

.about .founder-quote{ position:relative; overflow:hidden; text-align:center;
  background:linear-gradient(150deg,var(--plum),var(--ink)); color:var(--paper); border-radius:26px;
  padding:clamp(38px,6vw,88px) clamp(24px,4vw,60px); box-shadow:var(--sh-2); }
.about .founder-quote .qmark{ font-family:var(--disp); font-weight:700; font-size:clamp(84px,12vw,132px);
  line-height:.5; color:var(--marigold); opacity:.4; height:.44em; }
.about .founder-quote blockquote{ font-family:var(--disp); font-weight:500; font-size:clamp(24px,3.6vw,42px);
  line-height:1.18; letter-spacing:-.02em; max-width:22ch; margin:clamp(18px,2.4vw,28px) auto 0; }
.about .founder-quote blockquote em{ font-style:italic; color:var(--marigold); }
.about .founder-quote figcaption{ font-family:var(--mono); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(251,250,247,.6); margin-top:22px; }

@media (max-width:760px){
  .about .founder-grid{ grid-template-columns:1fr; }
}

/* ---------------------------------------------------------------------------
   CONTACT
   ------------------------------------------------------------------------- */
.contact .contact-grid{ display:grid; grid-template-columns:1.35fr .95fr; gap:clamp(20px,3vw,40px);
  align-items:start; }
.contact .form-card{ padding:clamp(22px,3vw,36px); }
.contact .form-card:hover, .contact .reach:hover{ transform:none; box-shadow:var(--sh-1); }
.contact .form-card:active, .contact .reach:active{ transform:none; box-shadow:var(--sh-1); }
.contact .form-card .eyebrow{ display:block; margin-bottom:12px; }
.contact .form-card h2{ font-size:clamp(24px,3vw,36px); margin-bottom:clamp(18px,2.6vw,28px); }

/* Restyle the JS-generated lead form (.lead / .lead-row / label / .btn-red) to
   the clean skin. The form markup is produced by aura.js and moved in here, so
   we style it in place rather than changing its structure. */
.contact #leadForm{ display:flex; flex-direction:column; gap:16px; max-width:100%; }
.contact #leadForm .lead-row{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; }
.contact #leadForm label{ display:flex; flex-direction:column; gap:8px; font-family:var(--mono);
  font-size:12px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); }
.contact #leadForm .opt{ text-transform:none; letter-spacing:0; font-weight:400; color:var(--ink-faint); }
.contact #leadForm input,
.contact #leadForm select,
.contact #leadForm textarea{ width:100%; min-width:0; 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); }
.contact #leadForm textarea{ min-height:120px; resize:vertical; }
.contact #leadForm input:focus,
.contact #leadForm select:focus,
.contact #leadForm textarea:focus{ outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(18,165,148,.18); }
.contact #leadForm .btn-red{ margin-top:4px; align-self:flex-start; background:var(--marigold-deep);
  color:var(--ink); border:1px solid transparent;
  box-shadow:0 1px 2px rgba(233,122,31,.25),0 10px 26px rgba(233,122,31,.28); }
.contact #leadForm .btn-red:hover{ background:#d86e14;
  box-shadow:0 2px 6px rgba(233,122,31,.30),0 16px 40px rgba(233,122,31,.34); }
.contact #leadForm .lead-err{ font-size:13.5px; color:#c0392b; font-weight:500; }
.contact #leadForm .lead-err a{ color:#c0392b; text-decoration:underline; }
.contact #leadForm .lead-fine{ font-size:12.5px; color:var(--ink-faint); line-height:1.5; }

/* reach-us aside */
.contact .reach{ padding:clamp(22px,3vw,32px); }
.contact .reach .eyebrow{ display:block; margin-bottom:16px; }
.contact .reach ul{ list-style:none; }
.contact .reach li{ display:flex; justify-content:space-between; gap:14px; padding:13px 0;
  border-top:1px solid var(--line); font-size:14.5px; }
.contact .reach li:first-child{ border-top:none; }
.contact .reach li .k{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-faint); }
.contact .reach li .v{ color:var(--ink); font-weight:500; text-align:right; }
.contact .reach li a.v{ color:var(--marigold-deep); }
.contact .reach .btns{ margin-top:22px; display:flex; flex-direction:column; gap:12px; }
.contact .reach .btns .btn{ width:100%; }

/* community channels */
.contact .comm-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
  gap:14px; margin-top:clamp(20px,3vw,30px); }
/* channel tiles are liquid glass (.lglass supplies fill/border/backdrop); these
   rules keep layout only, plus a tile-weight shadow that reads over the glass. */
.contact .chan{ display:flex; align-items:center; gap:15px; padding:15px 17px;
  border-radius:16px; min-height:64px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 6px 18px -12px rgba(20,18,58,.26);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
.contact .chan:hover{ transform:translateY(-3px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 14px 28px -12px rgba(20,18,58,.34); }
.contact .chan .cico{ width:44px; height:44px; flex:none; border-radius:12px; display:grid; place-items:center;
  font-family:var(--disp); font-weight:700; color:#fff; box-shadow:0 6px 14px -4px rgba(20,18,58,.35); }
.contact .chan .cbody b{ display:block; font-family:var(--disp); font-weight:600; font-size:16px; color:var(--ink); }
.contact .chan .cbody span{ font-size:13px; color:var(--ink-soft); }
.contact .chan .carr{ margin-left:auto; color:var(--ink-faint); }
.contact .comm-pending{ font-family:var(--mono); font-size:13px; color:var(--ink-faint);
  margin-top:clamp(18px,2.4vw,26px); }

@media (max-width:820px){
  .contact .contact-grid{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .contact #leadForm .lead-row{ grid-template-columns:1fr; }
}

/* ---------------------------------------------------------------------------
   SCHOOLS
   ------------------------------------------------------------------------- */
.schools .step-card .sn{ font-family:var(--disp); font-weight:700; font-size:clamp(28px,3vw,40px);
  color:var(--marigold-deep); line-height:1; margin-bottom:14px; }
.schools .step-card h2{ font-size:clamp(18px,1.7vw,22px); margin-bottom:8px; }
.schools .step-card p{ color:var(--ink-soft); font-size:14.5px; line-height:1.55; }
.schools .step-card .chip{ margin-top:14px; }

.schools .spec .k{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-faint); display:block; }
.schools .spec .v{ font-family:var(--disp); font-weight:600; font-size:clamp(22px,2.4vw,30px);
  letter-spacing:-.01em; margin:10px 0 8px; }
.schools .spec p{ color:var(--ink-soft); font-size:14px; line-height:1.5; }

/* ---------------------------------------------------------------------------
   PATH — the full career roadmap for one field.

   Three stages down the page: the foundation steps (01–03), the grid of career
   pathways, and the seven-stop rail for whichever pathway is selected. The rail
   itself is NOT restyled here — path.html emits the same .rail/.stop markup the
   home page uses and `body.home` is present, so it inherits that component
   wholesale. Only the surrounding chrome is defined below.
   ------------------------------------------------------------------------- */
.path .path-hero{ padding-top:clamp(40px,7vw,86px); }
.path .path-name{ max-width:18ch; }
.path .path-sub{ margin-top:clamp(14px,2vw,22px); max-width:56ch; }
.path .path-cta{ display:flex; align-items:center; gap:22px; flex-wrap:wrap;
  margin-top:clamp(24px,3.4vw,36px); }

/* --- field picker (no ?field=, or an unknown slug) --- */
.path .picker-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,268px),1fr));
  gap:14px; }
.path .picker-card{ display:flex; flex-direction:column; gap:7px; padding:clamp(20px,2.4vw,26px);
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--sh-1); color:var(--ink);
  transition:transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease); }
.path .picker-card:hover{ transform:translateY(-4px); box-shadow:var(--sh-2);
  border-color:rgba(20,18,58,.2); }
.path .pk-n{ font-size:12px; color:var(--ink-faint); letter-spacing:.08em; }
.path .pk-name{ font-family:var(--disp); font-weight:600; font-size:clamp(19px,2vw,23px);
  letter-spacing:-.015em; line-height:1.1; }
.path .pk-tag{ font-size:13.5px; color:var(--ink-soft); line-height:1.5; }
.path .pk-go{ margin-top:8px; font-size:12px; font-weight:600; color:var(--marigold-deep); }

/* --- THE MAP · one trunk, then it diverges -------------------------------
   Trunk = the field's Steps 01–03, drawn as the same horizontal timeline used
   everywhere else. It then drops into a vertical spine and fans into one branch
   per career. The divergence hangs off the END of the trunk (not its start),
   because that is when it actually happens — so the spine sits under the last
   trunk node, at 5/6 of the trunk's width (three equal stops, node centred in
   each: W - W/6). --spine-x carries that offset to the drop and the fan so the
   three pieces stay joined at every width. */
/* The trunk carries the real guidance now (concrete options per step), so it
   runs the full width in three columns rather than sitting as a small inline
   timeline. Everything above funnels into a collector bar, which turns down at
   the left into the spine — so the divergence reads as "all of that, then it
   splits", not "it branches off step 01". */
.path .map{ --trunk-w:100%; --spine-x:13px; --node:26px; --stub:26px; }
.path .map-cap{ display:block; font-family:var(--mono); font-weight:600; font-size:11.5px;
  letter-spacing:.11em; text-transform:uppercase; color:var(--ink-soft); }
.path .map-cap-fan{ margin-top:4px; }

/* the trunk — three columns, node and connector along the top */
.path .map-trunk{ list-style:none; display:grid; grid-template-columns:repeat(3,1fr);
  gap:0 clamp(16px,2.4vw,32px); width:var(--trunk-w); margin:16px 0 0; padding:0; }
.path .trunk-stop{ position:relative; min-width:0; }
.path .trunk-stop::after{ content:''; position:absolute; top:calc(var(--node) / 2 - 1px);
  left:calc(var(--node) / 2); right:calc(-1 * clamp(16px,2.4vw,32px)); height:2px;
  background:var(--line); z-index:0; }
.path .trunk-stop:last-child::after{ display:none; }
.path .tr-n{ position:relative; z-index:1; display:flex; align-items:center; justify-content:center;
  width:var(--node); height:var(--node); margin:0 0 11px; border-radius:50%; box-sizing:border-box;
  background:var(--card); border:2px solid var(--line); color:var(--ink);
  font-size:10.5px; font-weight:600; }
/* the trunk ends where the split begins — mark it */
.path .trunk-stop:last-child .tr-n{ background:var(--ink); border-color:var(--ink); color:#fff; }
/* WHEN this step happens — the thing a student actually needs to orient by */
.path .tr-stage{ display:block; font-family:var(--disp); font-weight:700; font-size:15px;
  letter-spacing:-.012em; line-height:1.2; color:var(--ink); }
/* what the step is about, in the PDF's own words */
.path .tr-t{ display:block; margin-top:3px; font-size:11.5px; line-height:1.35; color:var(--ink-faint); }
/* the concrete options inside it — the actual guidance, lifted verbatim */
.path .tr-keys{ list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column;
  gap:5px; text-align:left; }
.path .tr-keys li{ position:relative; padding-left:13px; font-size:12px; line-height:1.4;
  color:var(--ink-soft); }
.path .tr-keys li::before{ content:''; position:absolute; left:0; top:.55em; width:4px; height:4px;
  border-radius:50%; background:var(--marigold-deep); }

/* the collector bar: a rule under the whole trunk that turns down at the left */
.path .map-drop{ display:block; position:relative; height:30px; margin-top:20px; }
.path .map-drop::before{ content:''; position:absolute; left:var(--spine-x); right:0; top:0;
  height:2px; background:var(--line); }
.path .map-drop::after{ content:''; position:absolute; left:calc(var(--spine-x) - 1px); top:0;
  bottom:0; width:2px; background:var(--line); }
.path .map-cap-fan{ margin-left:calc(var(--spine-x) + var(--stub)); }

/* the fan */
.path .map-fan{ list-style:none; margin:12px 0 0; padding:0; }
.path .branch-row{ position:relative; padding-left:calc(var(--spine-x) + var(--stub)); }
/* each row draws its own slice of the spine, so it runs from the first node's
   centre to the last node's centre with no JS measuring */
.path .branch-row::before{ content:''; position:absolute; left:calc(var(--spine-x) - 1px);
  top:0; bottom:0; width:2px; background:var(--line); }
.path .branch-row:first-child::before{ top:22px; }
.path .branch-row:last-child::before{ bottom:calc(100% - 22px); }
.path .branch-row:only-child::before{ display:none; }
/* the elbow into each branch */
.path .branch-row::after{ content:''; position:absolute; left:calc(var(--spine-x) - 1px); top:21px;
  width:var(--stub); height:2px; background:var(--line); }

.path .branch{ display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  padding:9px 14px 9px 12px; margin:1px 0; border-radius:11px; cursor:pointer; font:inherit;
  background:transparent; border:1px solid transparent; color:var(--ink);
  transition:background .22s var(--ease), border-color .22s var(--ease), transform .22s var(--ease); }
.path .branch:hover{ background:var(--card); border-color:var(--line); transform:translateX(3px); }
.path .branch.on{ background:var(--card); border-color:var(--marigold-deep);
  box-shadow:0 0 0 1px var(--marigold-deep), var(--sh-1); }
.path .br-n{ flex:none; width:26px; height:26px; display:grid; place-items:center; border-radius:50%;
  box-sizing:border-box; background:var(--card); border:2px solid var(--line);
  font-size:10.5px; font-weight:600; color:var(--ink-faint);
  transition:background .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease); }
.path .branch:hover .br-n{ border-color:var(--marigold-deep); color:var(--marigold-deep); }
.path .branch.on .br-n{ background:var(--marigold-deep); border-color:var(--marigold-deep); color:#fff; }
.path .br-name{ flex:1; min-width:0; font-family:var(--disp); font-weight:600; font-size:15.5px;
  letter-spacing:-.01em; line-height:1.3; }
.path .br-go{ flex:none; color:var(--ink-faint); opacity:0;
  transition:opacity .22s var(--ease), transform .22s var(--ease); }
.path .branch:hover .br-go{ opacity:1; transform:translateX(2px); color:var(--marigold-deep); }
.path .branch.on .br-go{ opacity:1; color:var(--marigold-deep); }

/* ---- a branch opens its pathway INLINE, running off to the right ---------------
   Clicking a branch used to reveal the roadmap in a separate section far below the
   list — you lost your place and the connection between "this career" and "this
   roadmap" wasn't visible. Now #railBlock is moved into the clicked row and the row
   expands, with the rail running sideways on its own horizontal scroller. The elbow
   continues the diagram's own line language: it carries on past the end of the branch
   and turns down into the pathway. */
.path .branch-panel{ height:0; overflow:hidden; }
.path .branch-panel-in{ position:relative; padding:18px 0 6px 0; }
/* the line out of the branch: down the left, into the rail */
.path .branch-row.open > .branch-panel .branch-panel-in::before{
  content:''; position:absolute; left:calc(var(--spine-x) + var(--stub) + 12px); top:0; bottom:26px;
  width:2px; background:linear-gradient(180deg, var(--marigold-deep), rgba(233,122,31,.15)); }
/* the branch itself reads as the open one */
.path .branch-row.open .branch{ border-color:var(--marigold-deep); background:var(--card); }
/* the rail block, once it is living inside a branch row */
.path .branch-panel .rail-head-wrap,
.path .branch-panel .rail-foot-wrap{ width:auto; max-width:none;
  padding-left:calc(var(--spine-x) + var(--stub) + 30px); padding-right:0; margin:0; }
.path .branch-panel .rail-head{ margin-bottom:14px; }
/* the pathway name is already the branch label — don't say it twice inline */
.path .branch-panel .rail-head h2{ display:none; }
.path .branch-panel .rail-head .lead{ margin-top:6px; font-size:14.5px; }
.path .branch-panel .rail-scroll{ overflow-x:auto; overflow-y:hidden; scrollbar-width:none;
  -webkit-overflow-scrolling:touch; }
/* desktop shows the whole pathway (see the grid rule in aura.css) — this inline
   copy must not keep its own horizontal scroller or it would clip the grid */
@media (min-width:900px){ .path .branch-panel .rail-scroll{ overflow:visible; } }
.path .branch-panel .rail-scroll::-webkit-scrollbar{ display:none; }
.path .branch-panel .rail{ padding-left:calc(var(--spine-x) + var(--stub) + 30px); }
.path .branch-panel .rail-foot{ border-top:1px solid var(--line); padding-top:14px; margin-top:4px; }

@media (max-width:860px){
  .path .branch-panel .rail-head-wrap,
  .path .branch-panel .rail-foot-wrap,
  .path .branch-panel .rail{ padding-left:calc(var(--spine-x) + var(--stub)); }
  .path .branch-row.open > .branch-panel .branch-panel-in::before{ display:none; }
}

/* ---- the map DRAWS ITSELF, starting at 01 -------------------------------------
   The map only appears once a field is picked, so a student was landing on a
   finished diagram with no idea which end to read from. Now it builds in order —
   node 01, the line to 02, node 02, the line to 03, node 03, the drop, then each
   branch peeling off — so the eye is placed at the start and led through it.
   Every connector is a pseudo-element (that's the whole trick of this diagram),
   which is why this is CSS transitions and not gsap. Two classes drive it:
   .map-anim sets the "not drawn yet" state and is added by the page script ONLY
   when motion is allowed, so with JS off or reduced-motion on, the map is simply
   fully drawn. .map-play then releases it. Per-item --d delays are written inline
   by the renderer, so the cascade is correct for any number of branches. */
.path .map-anim .trunk-stop{ opacity:0; transform:translateY(12px); }
.path .map-anim .trunk-stop::after{ transform:scaleX(0); transform-origin:left center; }
.path .map-anim .map-drop::before{ transform:scaleX(0); transform-origin:left center; }
.path .map-anim .map-drop::after{ transform:scaleY(0); transform-origin:top center; }
.path .map-anim .map-cap-fan{ opacity:0; transform:translateY(8px); }
.path .map-anim .branch-row{ opacity:0; transform:translateX(-10px); }
.path .map-anim .branch-row::before{ transform:scaleY(0); transform-origin:top center; }
.path .map-anim .branch-row::after{ transform:scaleX(0); transform-origin:left center; }

.path .map-anim.map-play .trunk-stop,
.path .map-anim.map-play .map-cap-fan,
.path .map-anim.map-play .branch-row{ opacity:1; transform:none;
  transition:opacity .5s var(--ease), transform .5s var(--ease); transition-delay:var(--d,0s); }
/* each connector draws AFTER the node it leaves, so the line always follows the dot */
.path .map-anim.map-play .trunk-stop::after,
.path .map-anim.map-play .branch-row::before,
.path .map-anim.map-play .branch-row::after{ transform:none;
  transition:transform .42s var(--ease); transition-delay:calc(var(--d,0s) + .18s); }
.path .map-anim.map-play .map-drop::before{ transform:none;
  transition:transform .45s var(--ease); transition-delay:1.05s; }
.path .map-anim.map-play .map-drop::after{ transform:none;
  transition:transform .3s var(--ease); transition-delay:1.4s; }

/* 01 is the way in: ring it in marigold (03 is already filled ink as the end of
   the trunk) and pulse it twice as it lands, so "start here" needs no label */
.path .trunk-stop:first-child .tr-n{ border-color:var(--marigold-deep); color:var(--marigold-deep); }
.path .map-anim.map-play .trunk-stop:first-child .tr-n{
  animation:mapStartPulse 1.25s var(--ease) 2 both; animation-delay:var(--d,0s); }
@keyframes mapStartPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(233,122,31,0); }
  45%    { box-shadow:0 0 0 7px rgba(233,122,31,.16); }
}
@media (prefers-reduced-motion:reduce){
  .path .map-anim .trunk-stop,
  .path .map-anim .branch-row,
  .path .map-anim .map-cap-fan{ opacity:1 !important; transform:none !important; }
  .path .map-anim .trunk-stop::after,
  .path .map-anim .branch-row::before,
  .path .map-anim .branch-row::after,
  .path .map-anim .map-drop::before,
  .path .map-anim .map-drop::after{ transform:none !important; }
  .path .map-anim.map-play .trunk-stop:first-child .tr-n{ animation:none; }
}

/* narrow: the trunk goes full width and the spine comes back to the left margin,
   so long career names keep the whole line */
@media (max-width:860px){
  /* the trunk stacks: three steps read top-to-bottom, each still numbered and
     still carrying its options */
  .path .map-trunk{ grid-template-columns:1fr; gap:0; }
  .path .trunk-stop{ padding:0 0 20px 0; }
  .path .trunk-stop::after{ left:calc(var(--node) / 2 - 1px); right:auto; top:var(--node);
    width:2px; height:100%; }
  /* stacked, the connector runs DOWN — so it must draw on the vertical axis */
  .path .map-anim .trunk-stop::after{ transform:scaleY(0); transform-origin:top center; }
  .path .tr-n{ margin-bottom:8px; }
  .path .trunk-stop .tr-stage,
  .path .trunk-stop .tr-t,
  .path .trunk-stop .tr-keys{ padding-left:calc(var(--node) + 12px); margin-top:-32px; }
  .path .trunk-stop .tr-t{ margin-top:3px; }
  .path .trunk-stop .tr-keys{ margin-top:10px; }
  .path .map-drop{ margin-top:6px; }
  .path .br-name{ font-size:14.5px; }
}

/* --- STAGE 1 · the three foundation steps --- */
.path .fnd-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:clamp(14px,1.8vw,20px); align-items:start; }
.path .fnd{ display:flex; flex-direction:column; gap:5px; }
.path .fnd:hover{ transform:none; box-shadow:var(--sh-1); }   /* a reference card, not a control */
.path .fnd-n{ font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--marigold-deep); }
.path .fnd-t{ font-size:clamp(19px,2vw,23px); margin-top:6px; letter-spacing:-.015em; }
.path .fnd-sub{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-faint); }
.path .fnd-body{ margin-top:14px; padding-top:14px; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:12px; }
.path .fnd-h{ font-family:var(--disp); font-weight:600; font-size:14px; color:var(--ink);
  letter-spacing:-.005em; line-height:1.3; }
.path .fnd-p{ font-size:14px; line-height:1.6; color:var(--ink-soft); }
.path .fnd-list{ list-style:none; display:flex; flex-direction:column; gap:9px; }
.path .fnd-list li{ position:relative; padding-left:16px; font-size:14px; line-height:1.55;
  color:var(--ink-soft); }
.path .fnd-list li::before{ content:""; position:absolute; left:0; top:.62em;
  width:5px; height:5px; border-radius:50%; background:var(--marigold-deep); }
.path .fnd-list b{ color:var(--ink); font-weight:600; }

/* --- STAGE 2 · the pathway cards --- */
.path .tracks-lead{ margin-bottom:clamp(20px,2.6vw,28px); }
.path .track-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,282px),1fr));
  gap:clamp(12px,1.5vw,16px); }
.path .track-card{ display:flex; flex-direction:column; gap:7px; text-align:left; width:100%;
  padding:clamp(18px,2.2vw,24px); cursor:pointer; color:var(--ink); font:inherit;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--sh-1);
  transition:transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease); }
.path .track-card:hover{ transform:translateY(-4px); box-shadow:var(--sh-2);
  border-color:rgba(233,122,31,.5); }
.path .track-card:active{ transform:translateY(-1px); }
/* the selected pathway is the one drawn on the rail below — say so */
.path .track-card.on{ border-color:var(--marigold-deep); background:#fff;
  box-shadow:0 0 0 1px var(--marigold-deep), var(--sh-2); }
.path .tk-n{ font-size:12px; letter-spacing:.1em; color:var(--marigold-deep); font-weight:600; }
.path .tk-name{ font-family:var(--disp); font-weight:600; font-size:17.5px; letter-spacing:-.012em;
  line-height:1.18; }
.path .tk-pitch{ font-size:13.5px; line-height:1.5; color:var(--ink-soft); flex:1; }
.path .tk-go{ margin-top:10px; font-size:11.5px; font-weight:600; color:var(--ink-faint);
  transition:color .25s var(--ease); }
.path .track-card:hover .tk-go,
.path .track-card.on .tk-go{ color:var(--marigold-deep); }

/* --- the rail section --- */
.path .path-rail-sec{ padding-top:clamp(28px,4vw,52px); }
.path .rail-head{ max-width:760px; margin-bottom:clamp(18px,2.4vw,28px); }
.path .rail-head h2{ margin:12px 0 0; font-size:clamp(26px,3.6vw,40px); }
.path .rail-head .lead{ margin-top:12px; }
.path .rail-foot{ display:flex; align-items:center; justify-content:space-between; gap:18px;
  flex-wrap:wrap; margin-top:4px; }
.path .rail-foot .rail-hint{ margin:0; }
.path .rail-nav{ display:flex; align-items:center; gap:12px; }
.path .rail-arw{ width:42px; height:42px; flex:none; display:grid; place-items:center;
  border-radius:50%; border:1px solid var(--line); background:var(--card); color:var(--ink);
  box-shadow:var(--sh-1); cursor:pointer; font-size:16px;
  transition:transform .2s var(--ease), border-color .25s var(--ease), color .25s var(--ease); }
.path .rail-arw:hover{ border-color:var(--marigold-deep); color:var(--marigold-deep); }
.path .rail-arw:active{ transform:scale(.92); }
.path .rail-count{ font-size:12.5px; color:var(--ink-faint); font-variant-numeric:tabular-nums; }
.path .rail-count b{ color:var(--ink); }

.path .path-close{ margin-top:clamp(36px,5vw,60px); padding-top:clamp(26px,3.4vw,40px);
  border-top:1px solid var(--line); }
.path .path-close p{ font-family:var(--disp); font-weight:500; font-size:clamp(20px,2.6vw,28px);
  line-height:1.3; letter-spacing:-.015em; color:var(--ink); max-width:26ch; }
.path .path-close p em{ font-style:italic; color:var(--marigold-deep); }

@media (max-width:600px){
  .path .path-cta{ gap:16px; }
  .path .path-cta .btn{ width:100%; justify-content:center; }
  .path .rail-foot{ flex-direction:column; align-items:flex-start; gap:14px; }
}

/* ---------------------------------------------------------------------------
   SCHOOLS — SPLIT HERO + POLAROID WALL

   The hero becomes two columns at >=900px: the existing copy on the left, a
   cluster of tilted polaroid frames on the right. Below 900px it stacks and the
   wall sits under the CTA, capped so it never dominates the fold.

   The wall is DECORATIVE. It carries no hover lift, no press state and no
   pointer events, so it can never read as a row of tappable cards.
   ------------------------------------------------------------------------- */
.schools .hero-split{ display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(28px,4.5vw,72px); align-items:center; }
.schools .hero-copy{ min-width:0; }
/* the copy column is narrower than a full-bleed hero, so let the headline and the
   standfirst use the width they have rather than the page-wide caps */
.schools .hero-split h1{ max-width:none; }
.schools .hero-split .hero-foot .lead{ max-width:46ch; }
.schools .hero-art{ min-width:0; }

.schools .pola-wall{ display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(14px,1.8vw,24px) clamp(12px,1.6vw,20px);
  max-width:520px; margin-inline:auto; pointer-events:none; }

/* One polaroid: a 4:5 window, a deep bottom lip, a hand-set caption.
   Each frame's tilt and vertical offset are held in --rot / --dy rather than in a
   transform directly. aura.css's shared reveal sets `.reveal.in{transform:none}`,
   which would otherwise straighten every frame the moment it scrolled into view;
   composing the transform from the variables lets both states keep the tilt. */
.schools .pola{ --rot:0deg; --dy:0px;
  position:relative; margin:0; padding:clamp(9px,1vw,12px);
  padding-bottom:clamp(30px,3.4vw,42px);
  background:var(--card); border:1px solid var(--line); border-radius:4px;
  box-shadow:var(--sh-1), 0 18px 40px -22px rgba(20,18,58,.42);
  cursor:default; }
/* alternating tilts + small offsets do the scattering; the overlap comes from the
   offsets rather than absolute positioning, so the cluster reflows at any width */
.schools .pola:nth-child(1){ --rot:-4.5deg; --dy:0px;   z-index:2; }
.schools .pola:nth-child(2){ --rot:3.5deg;  --dy:26px;  z-index:1; }
.schools .pola:nth-child(3){ --rot:2.5deg;  --dy:-8px;  z-index:3; }
.schools .pola:nth-child(4){ --rot:-3deg;   --dy:14px;  z-index:2; }
.schools .pola:nth-child(5){ --rot:5deg;    --dy:-10px; z-index:4;
  grid-column:1 / -1; justify-self:center; width:62%; }

/* the window. Empty = a designed marigold/teal panel with a faint monogram,
   the same device the course cards use, so a missing photo is never a blank box.
   An <img> dropped in here covers it automatically. */
.schools .pola-frame{ position:relative; display:grid; place-items:center; overflow:hidden;
  aspect-ratio:4/5; border-radius:2px;
  background:linear-gradient(150deg, rgba(255,149,64,.20), rgba(18,165,148,.16)); }
.schools .pola-frame img{ position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block; }
.schools .pola-mark{ font-family:var(--disp); font-weight:700; letter-spacing:-.02em;
  font-size:clamp(30px,4vw,46px); line-height:1; color:rgba(233,122,31,.34); }

.schools .pola-cap{ position:absolute; left:0; right:0; bottom:clamp(8px,1vw,12px);
  text-align:center; font-family:var(--mono); font-size:clamp(10px,1vw,11.5px);
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint);
  padding-inline:8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Staggered entrance, riding the shared .reveal observer in aura.js (it adds .in;
   auraShowStatic does the same on the no-JS / failsafe path, so the wall can never
   be left invisible). Both selectors below outrank .reveal / .reveal.in, so the
   frames rise into their own tilt instead of into transform:none. */
.schools .pola{ opacity:0; transform:rotate(var(--rot)) translateY(calc(var(--dy) + 22px));
  transition:opacity .7s var(--ease), transform .7s var(--ease); }
.schools .pola.in{ opacity:1; transform:rotate(var(--rot)) translateY(var(--dy)); }
.schools .pola:nth-child(2){ transition-delay:.07s; }
.schools .pola:nth-child(3){ transition-delay:.14s; }
.schools .pola:nth-child(4){ transition-delay:.21s; }
.schools .pola:nth-child(5){ transition-delay:.28s; }

@media (max-width:900px){
  .schools .hero-split{ grid-template-columns:1fr; gap:clamp(30px,6vw,44px); }
  .schools .pola-wall{ max-width:400px; }
}
@media (max-width:420px){
  .schools .pola-wall{ max-width:320px; gap:12px 10px; }
  .schools .pola{ padding:8px; padding-bottom:28px; }
}
/* reduced motion: keep the tilt, drop the entrance — and do not depend on .in */
@media (prefers-reduced-motion:reduce){
  .schools .pola,
  .schools .pola.in{ opacity:1; transform:rotate(var(--rot)) translateY(var(--dy));
    transition:none; }
}