/* ==========================================================================
   OrbitQube public-v2, LIGHT lane, with a token-level dark override.

   Every colour in this file lives in one of the three :root blocks below and
   nowhere else. Nothing outside them may name a colour; every rule reaches for
   a token, so switching theme is a swap of values, never a swap of rules.

     1. :root                                   the complete light palette
     2. @media (prefers-color-scheme: dark)
          :root:not([data-theme="light"])       the device asked for dark
     3. :root[data-theme="dark"]                the visitor chose dark

   Ground: cool blue-grey paper on one hue, elevation ascending toward white in
   light and toward a lifted slate in dark.
   Accent: the logo cyan, drawn down to a deep teal in light and lifted to a
   bright teal in dark. One hue, both directions, so nothing is invented.
   Emphasis: indigo violet, used sparingly, never on anything interactive.
   ========================================================================== */
:root{
  --bg:#EDF1F4;
  --surface-1:#F2F5F7;
  --surface-2:#F7F9FA;
  --surface-3:#FBFCFD;
  --surface-4:#FFFFFF;
  --ink:#10202B;
  --ink-2:#33454F;
  --ink-3:#54656F;
  --line:#CCD7DE;
  --line-2:#AEBFC9;
  --accent:#0A5C66;
  --accent-ink:#F4FBFC;
  --accent-soft:#DCEBEE;
  --emphasis:#5D3A9E;
  --ok:#24855A;
  --warn:#AB8600;
  --danger:#560D12;
  --whatsapp:#25D366;
  --whatsapp-ink:#10202B;
  --font-display:"Bricolage Grotesque","Trebuchet MS",system-ui,sans-serif;
  --font-body:"IBM Plex Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --fs-display:clamp(2.5rem,1.75rem + 3.6vw,4.5rem);
  --fs-h1:clamp(1.875rem,1.4rem + 2.1vw,3rem);
  --fs-h2:clamp(1.375rem,1.16rem + 1vw,2rem);
  --fs-h3:clamp(1.0625rem,1rem + 0.35vw,1.25rem);
  --fs-lede:clamp(1.0625rem,0.98rem + 0.55vw,1.375rem);
  --fs-body:clamp(1rem,0.965rem + 0.18vw,1.0625rem);
  --fs-sm:clamp(0.875rem,0.855rem + 0.1vw,0.9375rem);
  --fs-eyebrow:clamp(0.75rem,0.73rem + 0.1vw,0.8125rem);
  --lh-tight:1.08;
  --lh-body:1.62;
  --maxw:72rem;
  --maxw-narrow:48rem;
  --pad-x:clamp(1.25rem,4vw,2.5rem);
  --header-h:4rem;
  --r-sm:4px;
  --r-md:10px;
  --r-lg:18px;
  --r-pill:999px;
  --shadow-1:0 1px 2px rgba(16,32,43,0.05),0 2px 10px rgba(16,32,43,0.045);
  --shadow-2:0 -2px 4px rgba(16,32,43,0.04),0 -10px 34px rgba(16,32,43,0.10);
  --space-1:0.25rem;
  --space-2:0.5rem;
  --space-3:0.75rem;
  --space-4:1rem;
  --space-5:1.5rem;
  --space-6:2rem;
  --space-7:3rem;
  --space-8:4rem;
  --bp-phone:640px;
  --bp-tablet:900px;
  --bp-desktop:1200px;
}

/* The dark values, twice over. Only the colour tokens move: type, space, radii
   and breakpoints are the same design in either ground. Every pair below was
   measured against the same floors as the light set (text 4.5:1, marks 3:1,
   hairlines 1.2:1) and the same colour-blindness separation. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0C161B;
    --surface-1:#121E24;
    --surface-2:#17252C;
    --surface-3:#1D2D35;
    --surface-4:#243740;
    --ink:#EBF2F5;
    --ink-2:#C4D2D9;
    --ink-3:#9BAEB7;
    --line:#374C57;
    --line-2:#4A6472;
    --accent:#4FC8D6;
    --accent-ink:#03242A;
    --accent-soft:#12333B;
    --emphasis:#AE94F9;
    --ok:#3F9263;
    --warn:#A08722;
    --danger:#EAB8C0;
    --whatsapp:#25D366;
    --whatsapp-ink:#10202B;
    --shadow-1:0 1px 2px rgba(0,0,0,0.40),0 2px 10px rgba(0,0,0,0.32);
    --shadow-2:0 -2px 4px rgba(0,0,0,0.36),0 -10px 34px rgba(0,0,0,0.46);
  }
}
:root[data-theme="dark"]{
  --bg:#0C161B;
  --surface-1:#121E24;
  --surface-2:#17252C;
  --surface-3:#1D2D35;
  --surface-4:#243740;
  --ink:#EBF2F5;
  --ink-2:#C4D2D9;
  --ink-3:#9BAEB7;
  --line:#374C57;
  --line-2:#4A6472;
  --accent:#4FC8D6;
  --accent-ink:#03242A;
  --accent-soft:#12333B;
  --emphasis:#AE94F9;
  --ok:#3F9263;
  --warn:#A08722;
  --danger:#EAB8C0;
  --whatsapp:#25D366;
  --whatsapp-ink:#10202B;
  --shadow-1:0 1px 2px rgba(0,0,0,0.40),0 2px 10px rgba(0,0,0,0.32);
  --shadow-2:0 -2px 4px rgba(0,0,0,0.36),0 -10px 34px rgba(0,0,0,0.46);
}

/* the three breakpoint tokens above are mirrored by the three media queries at
   the foot of this file, and 900px is mirrored again by DRAWER_BP in site-v2.js */

/* --- reset -------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;color-scheme:light dark}
body,h1,h2,h3,p,ul,ol,figure,figcaption,dl{margin:0}
ul,ol{padding:0;list-style:none}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit}
a{color:var(--accent)}

body{
  background:var(--bg);
  color:var(--ink-2);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:var(--font-display);
  color:var(--ink);
  line-height:var(--lh-tight);
  letter-spacing:-0.02em;
  font-weight:650;
}

:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-sm)}
::selection{background:var(--accent-soft);color:var(--ink)}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad-x)}
.narrow{max-width:var(--maxw-narrow)}

.skip{
  position:absolute;left:var(--space-4);top:-6rem;z-index:60;
  background:var(--surface-4);color:var(--ink);border:1px solid var(--line-2);
  padding:var(--space-3) var(--space-4);border-radius:var(--r-sm);
  font-size:var(--fs-sm);text-decoration:none;transition:top .15s ease;
}
.skip:focus{top:var(--space-4)}

/* --- Material Symbols, decorative throughout ----------------------------- */
.material-symbols-outlined{
  font-family:"Material Symbols Outlined";
  font-weight:normal;font-style:normal;
  font-size:1.5rem;line-height:1;letter-spacing:normal;text-transform:none;
  display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;
  font-variation-settings:"FILL" 0,"wght" 400,"GRAD" 0,"opsz" 24;
  -webkit-font-feature-settings:"liga";font-feature-settings:"liga";
  -webkit-font-smoothing:antialiased;
  flex:none;
}

/* the tinted tile every section icon sits in, exactly as the original page */
.itile{
  width:2.75rem;height:2.75rem;border-radius:var(--r-md);
  display:grid;place-content:center;flex:none;
  background:var(--accent-soft);color:var(--accent);
}

/* --- shared furniture --------------------------------------------------- */
.eyebrow{
  font-size:var(--fs-eyebrow);
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink-3);
  font-weight:600;
  display:flex;align-items:center;gap:var(--space-3);
}
.eyebrow::before{content:"";width:1.75rem;height:2px;background:var(--accent);flex:none}

.sechead{margin-bottom:var(--space-6);display:flex;flex-direction:column;gap:var(--space-4)}
.sechead h2{font-size:var(--fs-h2)}
.sechead__lede{font-size:var(--fs-lede);line-height:1.5;color:var(--ink-2);max-width:56ch}
.sechead--center{align-items:center;text-align:center}
.sechead--center .eyebrow{justify-content:center}
.sechead--center .sechead__lede{margin-inline:auto}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  min-height:44px;padding:0 var(--space-5);
  border:1px solid var(--line-2);border-radius:var(--r-pill);
  background:var(--surface-4);color:var(--ink);
  font-size:var(--fs-sm);font-weight:600;letter-spacing:0.01em;
  text-decoration:none;cursor:pointer;text-align:center;
  transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.btn:hover{background:var(--surface-1);border-color:var(--accent)}
.btn--primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn--primary:hover{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.btn--quiet{background:var(--surface-4);border-color:var(--line-2)}
.btn--wa{background:var(--whatsapp);border-color:var(--whatsapp);color:var(--whatsapp-ink)}
.btn--wa:hover{background:var(--whatsapp);border-color:var(--ink);color:var(--whatsapp-ink)}
.btn--sm{min-height:44px;padding:0 var(--space-4);font-size:var(--fs-eyebrow)}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--space-3)}

.golink{
  display:inline-flex;align-items:center;gap:var(--space-2);min-height:44px;
  color:var(--accent);font-weight:600;font-size:var(--fs-sm);text-decoration:none;
  align-self:flex-start;
}
.golink__arrow{font-size:1.125rem;transition:transform .18s ease}
.golink:hover{text-decoration:underline;text-underline-offset:4px}
.golink:hover .golink__arrow{transform:translateX(4px)}

/* --- header ------------------------------------------------------------- */
.header{
  position:sticky;top:0;z-index:40;
  background:var(--surface-4);border-bottom:1px solid var(--line);
}
.header__bar{display:flex;align-items:center;gap:var(--space-4);min-height:var(--header-h)}
.brand{display:flex;align-items:center;gap:var(--space-3);text-decoration:none;color:var(--ink);flex:none}
.brand img{width:auto;height:1.75rem}
.brand b{font-family:var(--font-display);font-weight:700;font-size:1.0625rem;letter-spacing:-0.025em}
.header__nav{display:none}
.header__nav a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 var(--space-3);
  color:var(--ink-2);text-decoration:none;font-size:var(--fs-sm);font-weight:500;
  border-bottom:2px solid var(--surface-4);
}
.header__nav a:hover{color:var(--ink)}
.header__nav a[aria-current="page"]{color:var(--accent);border-bottom-color:var(--accent)}
.header__actions{display:flex;align-items:center;gap:var(--space-3);margin-inline-start:auto}
.header__cta{display:none}
.burger{
  width:44px;height:44px;display:grid;place-content:center;gap:5px;
  background:var(--surface-4);border:1px solid var(--line-2);border-radius:var(--r-sm);cursor:pointer;
}
.burger span{display:block;width:18px;height:2px;background:var(--ink);transition:transform .2s ease,opacity .2s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.drawer{
  position:fixed;inset:var(--header-h) 0 0 0;z-index:39;
  background:var(--surface-4);border-top:1px solid var(--line);
  display:flex;flex-direction:column;
  padding:var(--space-4) var(--pad-x) var(--space-7);
  overflow-y:auto;
}
.drawer[hidden]{display:none}
.drawer__link{
  display:flex;align-items:center;justify-content:space-between;min-height:56px;
  color:var(--ink);text-decoration:none;font-family:var(--font-display);
  font-size:var(--fs-h3);font-weight:600;border-bottom:1px solid var(--line);
}
.drawer__link[aria-current="page"]{color:var(--accent)}
.drawer__link span{color:var(--line-2);font-family:var(--font-body);font-weight:400}
.drawer__foot{display:flex;flex-direction:column;gap:var(--space-3);margin-top:var(--space-6)}
body.is-locked{overflow:hidden}

/* --- band rhythm, declared once so no two section rules can fight ------- */
.hero,.pathways,.arms,.caps,.why,.academy-band,.cta-band{
  padding-block:clamp(2.75rem,6vw,5.5rem);
}
.hero{padding-block:clamp(2.75rem,6vw,5rem) clamp(3rem,7vw,6rem)}

/* --- hero, the thesis ---------------------------------------------------- */
.hero{background:var(--surface-2);border-bottom:1px solid var(--line)}
.hero__inner{display:flex;flex-direction:column;align-items:flex-start}
.chip{
  display:inline-flex;align-items:center;gap:var(--space-3);
  background:var(--accent-soft);color:var(--accent);
  border:1px solid var(--line);border-radius:var(--r-pill);
  padding:var(--space-2) var(--space-4);
  font-size:var(--fs-eyebrow);font-weight:600;letter-spacing:0.08em;text-transform:uppercase;
}
.chip__dot{width:8px;height:8px;border-radius:var(--r-pill);background:var(--accent);flex:none}
.hero h1{
  font-size:var(--fs-display);font-weight:700;letter-spacing:-0.035em;
  margin-top:var(--space-5);max-width:20ch;
}
/* No hero image, by the owner's decision. So the hero is composed as a type
   block that OWNS the width rather than a left column with an empty right half:
   the headline runs wider, the lede sits under it at a reading measure, and the
   buttons close the block. The band's own tonal shift does the framing. */
@media (min-width:1200px){
  .hero__inner{max-width:60rem}
  .hero h1{max-width:22ch}
}
.h1-accent{color:var(--accent)}
.hero__lede{
  font-size:var(--fs-lede);color:var(--ink-2);max-width:58ch;
  margin-top:var(--space-5);line-height:1.5;
}
.hero .btn-row{margin-top:var(--space-6)}

/* --- pathways ------------------------------------------------------------ */
.pathways__grid{display:grid;gap:var(--space-4)}
.card{
  background:var(--surface-4);border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3);min-width:0;
}
.card h3{font-size:var(--fs-h3);font-weight:650}
.card p{font-size:var(--fs-sm);color:var(--ink-2);flex:1 0 auto}
.card--link{text-decoration:none;transition:border-color .18s ease,box-shadow .18s ease}
.card--link:hover{border-color:var(--accent);box-shadow:var(--shadow-1)}
.card .itile{margin-bottom:var(--space-1)}

/* --- arms ---------------------------------------------------------------- */
.arms{background:var(--surface-2);border-block:1px solid var(--line)}
.arms__grid{display:grid;gap:var(--space-5)}
.arm{
  background:var(--surface-4);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--space-6) var(--space-5);
  display:flex;flex-direction:column;gap:var(--space-4);min-width:0;
}
.arm h3{font-size:var(--fs-h3)}
.arm > p{font-size:var(--fs-sm);color:var(--ink-2)}
.ticks{display:flex;flex-direction:column;gap:var(--space-3);flex:1 0 auto}
.ticks li{
  display:flex;align-items:flex-start;gap:var(--space-3);
  font-size:var(--fs-sm);color:var(--ink-2);
}
.ticks .material-symbols-outlined{font-size:1.25rem;color:var(--accent);margin-top:0.1em}

/* --- capabilities -------------------------------------------------------- */
.caps__grid{display:grid;gap:var(--space-4)}

/* --- the two split bands, each an argument beside its picture ------------ */
.why{border-top:1px solid var(--line)}
.split{display:grid;gap:clamp(2rem,5vw,3.5rem);align-items:center}
.split__text{display:flex;flex-direction:column;gap:var(--space-4);min-width:0}
.split__text h2{font-size:var(--fs-h1)}
.split .btn-row{margin-top:var(--space-2)}

.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3);margin-top:var(--space-3)}
.stat{
  background:var(--surface-4);border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-1);min-width:0;
}
.stat b{
  font-family:var(--font-display);font-size:var(--fs-h3);font-weight:700;
  color:var(--ink);letter-spacing:-0.02em;overflow-wrap:anywhere;
}
.stat span{font-size:var(--fs-eyebrow);color:var(--ink-3);line-height:1.5}

.media{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);min-width:0}
.media img{width:100%;height:auto;aspect-ratio:4 / 3;object-fit:cover}
/* A drawing is composed to its own edges, so it is CONTAINED in the frame and
   sits on the page ground. A photograph has no composition to lose and still
   fills the frame. */
.media img[src$=".svg"]{object-fit:contain;background:var(--surface-1);
  /* the caption card sits over the bottom of the frame, so a contained drawing
     needs clearance there or the card covers part of it */
  padding:var(--space-5) var(--space-5) 5.5rem}
.media__cap{
  position:absolute;left:var(--space-4);right:var(--space-4);bottom:var(--space-4);
  background:var(--surface-4);border:1px solid var(--line-2);border-radius:var(--r-md);
  padding:var(--space-3) var(--space-4);
  display:flex;flex-direction:column;gap:var(--space-1);
}
.media__cap b{font-family:var(--font-display);font-size:var(--fs-sm);font-weight:700;color:var(--ink)}
.media__cap span{font-size:var(--fs-eyebrow);color:var(--ink-2);line-height:1.5}

/* --- academy band -------------------------------------------------------- */
.academy-band{background:var(--surface-4);border-block:1px solid var(--line)}
.academy-band .eyebrow::before{background:var(--emphasis)}

/* --- closing call -------------------------------------------------------- */
.cta-band{background:var(--accent-soft);border-block:1px solid var(--line)}
.cta-band__inner{display:grid;gap:var(--space-6)}
.cta-band h2{font-size:var(--fs-h1);max-width:16ch;margin-top:var(--space-4)}
.cta-band .sechead__lede{margin-top:var(--space-4);max-width:52ch}

/* --- components the inner pages need -------------------------------------
   Added centrally after a page lane reported six missing components. Each was
   about to be reinvented in a per-page <style> block, which is how a token
   system acquires exceptions. They live here so every page shares one version.
   -------------------------------------------------------------------------- */

/* visually hidden, for text that carries meaning a glyph cannot */
.vh{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* fourth-level heading, so a deep page keeps a skip-free outline */
h4{
  font-family:var(--font-display);color:var(--ink);font-size:var(--fs-h3);
  line-height:var(--lh-tight);letter-spacing:-0.015em;font-weight:650;margin:0;
}

/* breadcrumb */
.crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);
  font-size:var(--fs-sm);color:var(--ink-3);padding-block:var(--space-4) 0;
}
.crumbs a{
  color:var(--ink-3);text-decoration:none;
  /* a breadcrumb rung is standalone navigation, so it clears the 24px target
     floor even though it sits in a list. WCAG 2.5.8 excepts a target sized by
     the line height of surrounding PROSE; this is not prose. */
  display:inline-flex;align-items:center;min-height:24px;
}
.crumbs a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.crumbs li{display:flex;align-items:center;gap:var(--space-2)}
.crumbs li + li::before{content:"";width:5px;height:5px;border-radius:var(--r-pill);background:var(--line-2);flex:none}
.crumbs [aria-current="page"]{color:var(--ink-2)}

/* a wide thing scrolls inside its own box, never the document */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-4)}
.tablewrap:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
table{border-collapse:collapse;width:100%;min-width:34rem;font-size:var(--fs-sm)}
caption{text-align:left;padding:var(--space-4);color:var(--ink-3);font-size:var(--fs-sm)}
th,td{text-align:left;padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--line);vertical-align:top}
thead th{color:var(--ink);font-weight:650;background:var(--surface-3)}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
td .material-symbols-outlined{font-size:1.25rem}
.is-yes{color:var(--ok)}
.is-no{color:var(--ink-3)}

/* FAQ, native details and summary */
.faq{display:flex;flex-direction:column;gap:var(--space-3)}
.faq details{
  background:var(--surface-4);border:1px solid var(--line);border-radius:var(--r-md);
}
.faq summary{
  list-style:none;cursor:pointer;min-height:44px;
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
  padding:var(--space-4) var(--space-5);
  font-weight:600;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex:none;width:10px;height:10px;
  border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
  transform:rotate(45deg);transform-origin:center;transition:transform .15s ease;
  margin-top:-4px;
}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:4px}
.faq summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:var(--r-md)}
.faq details > *:not(summary){padding:0 var(--space-5) var(--space-5);color:var(--ink-2)}

/* small stacks and chip rows, used on the product and programme pages */
.stack{display:flex;flex-direction:column;gap:var(--space-4)}
.chips{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.chips li,.chip--sm{
  border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface-3);
  padding:var(--space-2) var(--space-4);font-size:var(--fs-sm);color:var(--ink-2);
}
blockquote{margin:0}
.quote{
  background:var(--surface-4);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:var(--r-md);padding:var(--space-5);color:var(--ink-2);
}
.quote__by{display:block;margin-top:var(--space-3);font-size:var(--fs-sm);color:var(--ink-3)}

/* a four-up grid, asked for by the schools and FormaLabs pages.
   auto-fit rather than a fixed four: a trim pass left one of these grids with
   two cards, and four fixed tracks stretched them across dead space. The grid
   now takes the column count the content actually fills. */
.grid4{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.caps__grid{grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}

/* small print that sits inside the page rather than in the footer, for an
   attribution line. The footer's own legal class was being borrowed for this. */
.smallprint{font-size:var(--fs-sm);color:var(--ink-3)}

/* a closing band whose heading is a sentence rather than three words. The
   cta-band heading is clamped to 16ch on purpose; this one is not. */
.cta-band--wide h2{max-width:34ch}

/* --- forms -------------------------------------------------------------
   Lifted verbatim from the local shim three form pages were carrying, so the
   contact form, the intern form and the trainer form share one definition.
   ------------------------------------------------------------------------ */
.formband{padding-block:clamp(2.75rem,6vw,5.5rem)}
.formcard{background:var(--surface-4);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.25rem,4vw,2.5rem)}
.form{display:flex;flex-direction:column;gap:var(--space-5)}
.form__head{display:flex;flex-direction:column;gap:var(--space-3)}
.form__head h2{font-size:var(--fs-h2)}
.form__head p{font-size:var(--fs-sm);color:var(--ink-2)}
.fgrid{display:grid;gap:var(--space-5)}
.field{display:flex;flex-direction:column;gap:var(--space-2);min-width:0}
.field > label{font-size:var(--fs-eyebrow);font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-3)}
.field__opt{text-transform:none;letter-spacing:normal;font-weight:400}
.req{color:var(--danger)}
.input{width:100%;min-height:48px;padding:var(--space-3) var(--space-4);font:inherit;font-size:var(--fs-sm);color:var(--ink);background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r-md)}
select.input{cursor:pointer}
textarea.input{min-height:8rem;line-height:1.55;resize:vertical}
.input::placeholder{color:var(--ink-3)}
.input:focus-visible{border-color:var(--accent)}
.input[aria-invalid="true"]{border-color:var(--danger)}
.field-error{display:none;font-size:var(--fs-eyebrow);line-height:1.5;color:var(--danger)}
.field-error.is-shown{display:block}
.checkline{display:flex;align-items:flex-start;gap:var(--space-3);min-height:44px}
.checkline input{width:1.25rem;height:1.25rem;margin-top:0.35rem;flex:none;accent-color:var(--accent);cursor:pointer}
.checkline label{font-size:var(--fs-sm);color:var(--ink-2);cursor:pointer}
.checkgrid{display:grid;gap:var(--space-2)}
.fieldset{border:0;margin:0;padding:0;min-width:0;display:flex;flex-direction:column;gap:var(--space-2)}
.fieldset > legend{padding:0;font-size:var(--fs-eyebrow);font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-3)}
.formnote{font-size:var(--fs-eyebrow);color:var(--ink-3);text-align:center}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.banner{display:none;flex-direction:column;align-items:center;gap:var(--space-4);text-align:center;padding-block:var(--space-5)}
.banner.is-shown{display:flex}
.banner h2{font-size:var(--fs-h2)}
.banner p{font-size:var(--fs-sm);color:var(--ink-2);max-width:46ch}
.phone{display:flex;gap:var(--space-2)}
.phone select{flex:none;width:auto}
.backlink{display:inline-flex;align-items:center;min-height:44px;margin-top:var(--space-5);font-size:var(--fs-sm);color:var(--accent)}
@media (min-width:640px){
  .fgrid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .checkgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* two blocks the ShopTrail pages add inside the hero band, and the trademark
   line both of them close on. Lifted from those pages so nothing stays local. */
.hero .chips{margin-top:var(--space-5)}
.hero .card{margin-top:var(--space-6);max-width:58ch}
.hero__note{margin-top:var(--space-4);max-width:60ch;font-size:var(--fs-sm);color:var(--ink-3)}
.attrib{max-width:72ch;margin-inline:auto;padding-block:var(--space-6);text-align:center;font-size:var(--fs-eyebrow);color:var(--ink-3)}

/* a two-up equal card grid from 900px, asked for by the products router */
/* Two equal cards side by side. align-items defaults to stretch, which is what a
   card pair needs: .split centres its children, so a shorter card sat lower than
   its neighbour, and at 1200px .split also goes 1.15fr to 0.85fr, which made one
   card wider and therefore shorter. Neither is right for two peers. */
.grid2{display:grid;gap:var(--space-4);grid-template-columns:minmax(0,1fr);align-items:stretch}
.grid2 > .card{height:100%}
/* A page band rather than a card pair: two equal columns with a band's gap,
   aligned at the top. The contact page used the text-and-media split, which
   centres its children and, above 1200px, gives one column 1.15fr against the
   other's 0.85fr, so the enquiry list sat low and narrow beside a wider form. */
.grid2--band{gap:clamp(2rem,5vw,3.5rem);align-items:start}
.grid2--band > .card{height:auto}
@media (min-width:900px){ .grid2{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* a list item whose whole content is a link is a standalone target, not a link
   inside a sentence, so it clears the 24px floor. The legal pages list three
   Academy policy links this way and each measured 21px. */
.stack li > a:only-child{display:inline-flex;align-items:center;min-height:24px}

/* a redirect stub: one short message centred while the browser moves on */
.stub{min-height:60vh;display:flex;align-items:center}
.stub h1{font-size:var(--fs-h2)}

.stack--indent{margin-top:var(--space-2);margin-inline-start:var(--space-4)}

/* --- footer -------------------------------------------------------------- */
.footer{background:var(--surface-4);border-top:1px solid var(--line)}
.footer__inner{display:grid;gap:var(--space-5);padding-block:clamp(1.75rem,3.5vw,2.75rem)}
.footer__tag{margin-top:var(--space-3);font-size:var(--fs-sm);color:var(--ink-3);max-width:36ch}
.footer__col h2{
  font-family:var(--font-body);font-size:var(--fs-eyebrow);letter-spacing:0.14em;
  text-transform:uppercase;color:var(--ink-3);font-weight:600;margin-bottom:var(--space-2);
}
.footer__col a{
  display:flex;align-items:center;min-height:38px;
  color:var(--ink-2);text-decoration:none;font-size:var(--fs-sm);overflow-wrap:anywhere;
}
/* Touch pointers still need the 44px hit area; a mouse does not, and 44px per link
   made the footer taller than the section above it. */
@media (pointer:coarse){ .footer__col a{min-height:44px} }
.footer__col a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:4px}
.footer__bottom{
  border-top:1px solid var(--line);padding-top:var(--space-4);
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-5);
  font-size:var(--fs-eyebrow);color:var(--ink-3);
}
/* The legal block is reference text, not reading matter. It runs the full width of
   the footer rather than the 80ch measure the rest of the page uses, at the smallest
   size on the page, so it takes two lines instead of five. */
.footer__legal{
  padding-bottom:var(--space-3);
  font-size:0.75rem;line-height:1.5;color:var(--ink-3);max-width:none;
}
.footer__legal + .footer__legal{padding-top:0}

/* the theme control: a real button, its state in words and in aria-pressed */
.themetog{
  display:inline-flex;align-items:center;gap:var(--space-2);min-height:44px;
  padding:0 var(--space-4);margin-inline-start:auto;
  background:var(--surface-1);color:var(--ink-2);
  border:1px solid var(--line-2);border-radius:var(--r-pill);
  font-size:var(--fs-eyebrow);font-weight:600;cursor:pointer;
  transition:border-color .18s ease,color .18s ease;
}
.themetog:hover{border-color:var(--accent);color:var(--accent)}
.themetog__mark{
  width:10px;height:10px;border-radius:var(--r-pill);flex:none;
  border:2px solid var(--accent);
}
.themetog[aria-pressed="true"] .themetog__mark{background:var(--accent)}

/* --- WhatsApp float ------------------------------------------------------ */
.wa{
  position:fixed;right:var(--space-4);bottom:var(--space-4);z-index:35;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  min-height:52px;min-width:52px;padding:0 var(--space-4);
  border-radius:var(--r-pill);background:var(--whatsapp);color:var(--whatsapp-ink);
  text-decoration:none;box-shadow:var(--shadow-1);
  font-size:var(--fs-sm);font-weight:600;
}
.wa svg{width:22px;height:22px;fill:currentColor}
.wa span{display:none}

/* --- consent bar --------------------------------------------------------- */
.consent-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:var(--surface-4);border-top:1px solid var(--line-2);box-shadow:var(--shadow-2);
}
.consent-bar[hidden]{display:none}
.consent-bar__inner{display:grid;gap:var(--space-3);padding-block:var(--space-4)}
.consent-bar p{font-size:var(--fs-eyebrow);line-height:1.65;color:var(--ink-2);max-width:72ch}
.consent-bar .btn-row{gap:var(--space-2)}

/* ==========================================================================
   Breakpoint 1 of 3, 640px. The five entry points pair up, the capability
   cards pair up, the consent bar puts its buttons beside its sentence, the
   WhatsApp control earns its label, and the footer splits into two columns.
   ========================================================================== */
@media (min-width:640px){
  .pathways__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .consent-bar__inner{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--space-5)}
  .wa span{display:inline}
  .footer__inner{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer__brand{grid-column:1 / -1}
}

/* ==========================================================================
   Breakpoint 2 of 3, 900px. The drawer retires and the nav comes inline, the
   entry points and the capabilities go three up, the two arms bands split
   picture from argument, and the closing call sits beside its buttons.
   ========================================================================== */
@media (min-width:900px){
  :root{--header-h:4.5rem}
  .header__nav{display:flex;gap:var(--space-1);margin-inline-start:var(--space-6)}
  .header__actions{gap:var(--space-4)}
  .header__cta{display:inline-flex}
  .burger{display:none}
  .drawer{display:none}
  .pathways__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .arms__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .split--reverse .split__text{order:2}
  .cta-band__inner{grid-template-columns:minmax(0,1fr) minmax(0,auto);align-items:center;gap:var(--space-7)}
  .footer__inner{grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,1fr))}
  .footer__brand{grid-column:auto}
  .hero h1{max-width:14ch}
}

/* ==========================================================================
   Breakpoint 3 of 3, 1200px. The three arms run as one row, the four proof
   tiles run as one measure, the entry points fill the width, and each split
   gives the argument the wider share.
   ========================================================================== */
@media (min-width:1200px){
  /* Three then two. Five equal columns at this width left each card about 200px
     wide and wrapped the educational-institutes body to nine lines. Six tracks
     with each card spanning two gives 3 + 2 with the last row centred, and every
     card keeps a readable measure. */
  .pathways__grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .pathways__grid > .card{grid-column:span 2}
  .pathways__grid > .card:nth-child(4){grid-column:2 / span 2}
  .pathways__grid > .card:nth-child(5){grid-column:4 / span 2}
  .arms__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(4,minmax(0,1fr))}
  .split{grid-template-columns:minmax(0,1.15fr) minmax(0,0.85fr);gap:var(--space-8)}
  .media img:not([src$=".svg"]){aspect-ratio:1 / 1}
  .hero h1{max-width:13ch}
}

/* --- motion: one orchestrated page load, and nothing else ---------------- */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  .hero__inner > *{animation:rise .55s cubic-bezier(.2,.7,.3,1) both}
  .hero__inner > *:nth-child(2){animation-delay:.06s}
  .hero__inner > *:nth-child(3){animation-delay:.12s}
  .hero__inner > *:nth-child(4){animation-delay:.18s}
  @keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}