/* ==========================================================================
   Master of Mental Maths — Design 5 "Warm Studio"
   Fluid design system. One stylesheet, every breakpoint 320 -> 2560.
   Tokens first; nothing below uses a raw colour or a raw radius.
   ========================================================================== */

:root{
  /* ====================================================================
     Palette derived from the client's logo (Illustrator PDF, 2026-09-21).
     The three logo inks are exact; the action colours are the same hues
     deepened until white text clears AA on them, because the logo's own
     green and amber are far too light to carry white.
     ==================================================================== */

  /* --- the logo's own three inks, exact — for the mark and brand moments */
  --logo-red:   #E8272D;
  --logo-amber: #F7AE44;
  --logo-green: #7FC141;

  /* --- ink & ground: neutrals warmed toward the logo's amber ---------- */
  --ink:        #1F1C1A;   /* body text            — 16.2:1 on cream      */
  --ink-2:      #433D38;   /* headings on tint     — 10.3:1 on cream      */
  --muted:      #635B53;   /* secondary text       —  6.4:1 on cream      */
  --ground:     #FFF8F2;   /* page                                        */
  --ground-2:   #FBF1E7;   /* alternating band                            */
  --surface:    #FFFFFF;   /* cards                                       */
  --line:       #EADFD3;   /* hairline                                    */
  --line-2:     #DCCDBC;   /* stronger hairline                           */

  /* --- action colours ------------------------------------------------- */
  --brand:      #D11F26;   /* logo red deepened — white 5.4:1             */
  --brand-ink:  #9A161B;   /* pressed / link-on-tint                      */
  --brand-tint: #FCEAEA;

  --amber:      #F7AE44;   /* the logo amber itself — ink on it 8.8:1     */
  --amber-deep: #8A5512;   /* amber text on cream — 5.9:1                 */
  --amber-tint: #FDF0DC;

  --mint:       #3E7A22;   /* logo green deepened — white 5.2:1           */
  --mint-tint:  #EDF6E4;

  --night:      #1C1B1A;   /* warm near-black bands, footer               */
  --night-2:    #2C2A27;   /* raised surface inside a dark band           */
  --night-line: rgba(255,248,242,.16);
  --on-night:   #F6F1EA;   /* text on night — 15.5:1                      */
  --on-night-2: #B5ADA3;   /* muted text on night — 7.8:1                 */

  --focus:      #0B63CE;

  /* --- radius: a real scale, not one value everywhere ------------------ */
  --r-xs: 4px; --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 32px; --r-pill: 999px;

  /* --- elevation: only things that genuinely float --------------------- */
  --lift-menu:  0 12px 32px -8px rgba(27,29,38,.22), 0 2px 6px rgba(27,29,38,.08);
  --lift-stuck: 0 1px 0 var(--line), 0 6px 18px -10px rgba(27,29,38,.28);
  --lift-float: 0 22px 48px -20px rgba(27,29,38,.38);

  /* --- layout --------------------------------------------------------- */
  --pad: clamp(16px, 4.2vw, 40px);
  --wide: 1240px;
  --narrow: 780px;
  --section-y: clamp(56px, 8vw, 116px);

  /* --- type ----------------------------------------------------------- */
  --display: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --text: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mark: Montserrat, system-ui, sans-serif;

  --t-hero:  clamp(36px, 4.8vw, 62px);
  --t-h1:    clamp(32px, 4.6vw, 56px);
  --t-h2:    clamp(27px, 3.4vw, 42px);
  --t-h3:    clamp(21px, 2.1vw, 27px);
  --t-h4:    clamp(18px, 1.5vw, 20px);
  --t-lede:  clamp(17px, 1.45vw, 21px);
  --t-body:  17px;
  --t-sm:    15px;
  --t-xs:    13.5px;
  --t-eyebrow: 12.5px;
}

*,*::before,*::after{ box-sizing:border-box }

html{ -webkit-text-size-adjust:100% }

body{
  margin:0;
  overflow-x:hidden;
  background:var(--ground);
  color:var(--ink);
  font:400 var(--t-body)/1.7 var(--text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg,video{ display:block; max-width:100% }
img{ height:auto }

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:700;
  line-height:1.06;
  letter-spacing:-.022em;
  margin:0;
  color:var(--ink);
  text-wrap:balance;
}
h1{ font-size:var(--t-h1) }
h2{ font-size:var(--t-h2) }
h3{ font-size:var(--t-h3); line-height:1.18; letter-spacing:-.015em }
h4{ font-size:var(--t-h4); line-height:1.3; letter-spacing:-.008em; font-weight:700 }
p{ margin:0 }
ul,ol{ margin:0; padding:0; list-style:none }

a{ color:var(--brand); text-decoration:none }
a:hover{ color:var(--brand-ink) }

:focus-visible{ outline:3px solid var(--focus); outline-offset:3px; border-radius:var(--r-xs) }

::selection{ background:var(--amber-tint); color:var(--ink) }

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */
.wrap{ width:100%; max-width:var(--wide); margin-inline:auto; padding-inline:var(--pad) }
.wrap--narrow{ max-width:var(--narrow) }
.section{ padding-block:var(--section-y) }
.section--tight{ padding-block:clamp(40px,5.5vw,76px) }
.band-cream{ background:var(--ground-2) }
.band-white{ background:var(--surface) }
.band-mint{ background:var(--mint-tint) }
.band-amber{ background:var(--amber-tint) }
.band-night{ background:var(--night); color:var(--on-night) }
.band-night h1,.band-night h2,.band-night h3,.band-night h4{ color:var(--on-night) }
.band-night .lede,.band-night .muted{ color:var(--on-night-2) }

.stack{ display:flex; flex-direction:column }
.stack-8 > * + *{ margin-top:8px }
.stack-12 > * + *{ margin-top:12px }
.stack-16 > * + *{ margin-top:16px }
.stack-24 > * + *{ margin-top:24px }
.stack-32 > * + *{ margin-top:32px }
.stack-40 > * + *{ margin-top:clamp(28px,3.4vw,44px) }

/* --------------------------------------------------------------------------
   Type helpers
   -------------------------------------------------------------------------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--text); font-weight:700;
  font-size:var(--t-eyebrow); letter-spacing:.15em; text-transform:uppercase;
  color:var(--amber-deep);
}
.eyebrow::before{
  content:""; width:22px; height:2px; background:var(--amber); flex:none;
}
.band-night .eyebrow{ color:var(--amber) }
.band-night .eyebrow::before{ background:var(--amber) }
.eyebrow--red{ color:var(--brand) }
.eyebrow--red::before{ background:var(--brand) }
.eyebrow--mint{ color:var(--mint) }
.eyebrow--mint::before{ background:var(--mint) }

.lede{ font-size:var(--t-lede); line-height:1.62; color:var(--muted); max-width:62ch }
.muted{ color:var(--muted) }
.sm{ font-size:var(--t-sm) }
.xs{ font-size:var(--t-xs) }

/* The one decorative flourish: a soft rule behind a key phrase. */
.mark-under{
  background-image:linear-gradient(transparent 62%, var(--amber-tint) 62%, var(--amber-tint) 92%, transparent 92%);
  padding-inline:.06em;
}
.mark-red{ color:var(--brand) }

.section-head{ display:grid; gap:18px; max-width:66ch }
.section-head .lede{ max-width:58ch }
.section-head--wide{ max-width:none }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:0 26px;
  border:1.5px solid transparent; border-radius:var(--r-sm);
  font-family:var(--text); font-size:16px; font-weight:700; letter-spacing:.005em;
  text-align:center; cursor:pointer; white-space:nowrap;
  transition:background-color .18s ease-out, color .18s ease-out,
             border-color .18s ease-out, transform .18s ease-out;
}
.btn:active{ transform:translateY(1px) }
.btn svg{ flex:none }

.btn--primary{ background:var(--brand); color:#fff }
.btn--primary:hover{ background:var(--brand-ink); color:#fff }

.btn--ink{ background:var(--ink); color:var(--ground) }
.btn--ink:hover{ background:#000; color:var(--ground) }

.btn--amber{ background:var(--amber); color:var(--ink) }
.btn--amber:hover{ background:#D8920A; color:var(--ink) }

.btn--mint{ background:var(--mint); color:#fff }
.btn--mint:hover{ background:#0A5239; color:#fff }

.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line-2) }
.btn--ghost:hover{ background:var(--surface); border-color:var(--ink); color:var(--ink) }

.band-night .btn--ghost{ color:var(--on-night); border-color:#4A5470 }
.band-night .btn--ghost:hover{ background:var(--night-2); border-color:var(--on-night); color:var(--on-night) }

.btn--sm{ min-height:44px; padding:0 18px; font-size:15px }
.btn--lg{ min-height:58px; padding:0 32px; font-size:17px }
.btn--block{ width:100% }

.btn-row{ display:flex; flex-wrap:wrap; gap:14px; align-items:center }

.textlink{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:700; font-size:var(--t-sm); color:var(--ink);
  border-bottom:2px solid var(--amber); padding-bottom:3px;
  transition:gap .18s ease-out, border-color .18s ease-out;
}
.textlink:hover{ gap:13px; border-color:var(--brand); color:var(--ink) }
.band-night .textlink{ color:var(--on-night) }

/* --------------------------------------------------------------------------
   The bead rail — this direction's signature device.
   A rod with beads on it, used as a divider and a progress rail.
   -------------------------------------------------------------------------- */
.beads{ display:flex; align-items:center; gap:7px }
.beads i{ width:11px; height:11px; border-radius:50%; background:var(--amber); display:block }
.beads i:nth-child(2){ background:var(--brand) }
.beads i:nth-child(3){ background:var(--mint) }
.beads i:nth-child(4){ background:var(--ink); opacity:.28 }
.beads--rod{ position:relative; padding-inline:10px }
.beads--rod::before{
  content:""; position:absolute; inset-inline:0; top:50%; height:2px;
  background:var(--line-2); transform:translateY(-50%); z-index:0;
}
.beads--rod i{ position:relative; z-index:1; box-shadow:0 0 0 4px var(--ground) }

.rule-beads{
  display:flex; align-items:center; gap:16px;
  color:var(--muted); font-size:var(--t-xs); font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
}
.rule-beads::after{ content:""; flex:1; height:1px; background:var(--line) }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.utilbar{
  background:var(--night); color:var(--on-night-2);
  font-size:var(--t-xs);
  padding-block:9px;
}
.utilbar .wrap{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap }
.utilbar a{ color:var(--on-night) }
.utilbar a:hover{ color:var(--amber) }
.utilbar__left{ display:flex; align-items:center; gap:22px; flex-wrap:wrap }
.utilbar__right{ display:flex; align-items:center; gap:18px }
.utilbar__item{ display:inline-flex; align-items:center; gap:7px }
.utilbar__sep{ width:1px; height:14px; background:#3A4462 }

.siteheader{ position:sticky; top:0; z-index:60; background:var(--ground) }
.siteheader__bar{
  border-bottom:1px solid var(--line);
  background:var(--ground);
  transition:box-shadow .2s ease-out, background-color .2s ease-out;
}
.siteheader__bar .wrap{
  display:flex; flex-wrap:nowrap; align-items:center; justify-content:space-between;
  gap:clamp(12px,2vw,32px); min-height:86px;
}
/* the nav must never shrink below its items, or they overlap the CTA */
.siteheader__bar .nav{ flex:none }
.siteheader.is-stuck .siteheader__bar{
  box-shadow:var(--lift-stuck);
  border-bottom-color:transparent;
  background:rgba(255,248,242,.94);
  -webkit-backdrop-filter:saturate(1.4) blur(8px);
          backdrop-filter:saturate(1.4) blur(8px);
}
.siteheader.is-stuck .siteheader__bar .wrap{ min-height:68px }
.siteheader.is-stuck .utilbar{ display:none }

/* --------------------------------------------------------------------------
   Logo
   The client's mark is a circular badge with the name set on an arch. At header
   size that arch is unreadable, so small placements use the badge on its own
   beside the name typeset in the logo's face (Montserrat ExtraBold) and its
   red. The complete original lockup is used wherever there is room for it.
   -------------------------------------------------------------------------- */
.logo{ display:inline-flex; align-items:center; gap:11px; flex:none }
.logo__mark{ width:54px; height:54px; flex:none }
.logo__marks{ display:flex; flex-direction:column; line-height:1 }
.logo__top{
  font-family:var(--mark); font-weight:800; font-size:10.5px;
  letter-spacing:.155em; color:var(--logo-red);
}
.logo__main{
  font-family:var(--mark); font-weight:800; font-size:16px;
  letter-spacing:.012em; color:var(--logo-red); margin-top:4px;
}
.logo__tag{ font-size:10.5px; letter-spacing:.02em; color:var(--muted); margin-top:6px }
/* the tagline sets the lockup's width, which the header cannot afford next to
   a seven-item nav — it lives in the footer instead */
.siteheader .logo__tag, .drawer .logo__tag{ display:none }

/* the full original lockup, on a light plaque so the brand inks stay exact
   even on a dark band */
.logo-full{
  display:inline-block; background:var(--surface);
  border-radius:var(--r-md); padding:14px 16px;
}
.logo-full svg, .logo-full img{ width:176px; height:auto; display:block }

/* the fourth bead is ink, which disappears on a dark band */
.band-night .beads i:nth-child(4),
.sitefooter .beads i:nth-child(4){ background:var(--on-night-2); opacity:1 }

/* desktop nav */
.nav{ display:flex; align-items:center; gap:clamp(2px,.7vw,8px) }
.nav__item{ position:relative; display:flex }
.nav__link{
  position:relative;
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 11px; border-radius:var(--r-sm);
  font-size:15px; font-weight:600; color:var(--ink);
  white-space:nowrap; background:transparent; border:0; cursor:pointer;
  font-family:var(--text);
  transition:background-color .16s ease-out, color .16s ease-out;
}
.nav__link:hover{ background:var(--ground-2); color:var(--ink) }

/* nav active state is driven by body[data-page], so one header serves every page */
body[data-page="home"]      .nav__link[data-nav="home"],
body[data-page="about"]     .nav__link[data-nav="about"],
body[data-page="program"]   .nav__link[data-nav="program"],
body[data-page="franchise"] .nav__link[data-nav="franchise"],
body[data-page="schools"]   .nav__link[data-nav="schools"],
body[data-page="teacher"]   .nav__link[data-nav="teacher"],
body[data-page="demo"]      .nav__link[data-nav="demo"]{ color:var(--brand) }

body[data-page="home"]      .nav__link[data-nav="home"]::after,
body[data-page="about"]     .nav__link[data-nav="about"]::after,
body[data-page="program"]   .nav__link[data-nav="program"]::after,
body[data-page="franchise"] .nav__link[data-nav="franchise"]::after,
body[data-page="schools"]   .nav__link[data-nav="schools"]::after,
body[data-page="teacher"]   .nav__link[data-nav="teacher"]::after,
body[data-page="demo"]      .nav__link[data-nav="demo"]::after{
  content:""; position:absolute; left:11px; right:11px; bottom:1px; height:2px;
  background:var(--brand); border-radius:2px;
}

.nav__caret{ transition:transform .18s ease-out }
.nav__item[data-open="true"] .nav__caret{ transform:rotate(180deg) }

.menu{
  position:absolute; top:calc(100% + 10px); left:0; z-index:70;
  min-width:252px; padding:8px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--lift-menu);
  display:none;
}
.menu--right{ left:auto; right:0 }
.nav__item[data-open="true"] .menu,
.header__cta [data-open="true"] .menu{ display:block }
.menu a{
  display:block; padding:11px 13px; border-radius:var(--r-sm);
  font-size:15px; font-weight:600; color:var(--ink);
}
.menu a:hover{ background:var(--ground-2); color:var(--brand) }
.menu a span{ display:block; font-weight:400; font-size:var(--t-xs); color:var(--muted); margin-top:2px }

.header__cta{ display:flex; align-items:center; gap:10px; flex:none }
.header__cta .nav__item{ position:relative }

.burger{
  display:none; width:48px; height:48px; flex:none;
  align-items:center; justify-content:center;
  background:var(--surface); border:1.5px solid var(--line-2); border-radius:var(--r-sm);
  cursor:pointer; color:var(--ink);
}
.burger:hover{ border-color:var(--ink) }

/* drawer */
.drawer-scrim{
  position:fixed; inset:0; z-index:90; background:rgba(19,26,46,.5);
  opacity:0; visibility:hidden; transition:opacity .22s ease-out, visibility .22s;
  border:0; padding:0; cursor:pointer;
}
.drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:100;
  width:min(380px, 88vw);
  background:var(--ground);
  border-left:1px solid var(--line);
  transform:translateX(100%);
  transition:transform .26s cubic-bezier(.22,.61,.36,1);
  display:flex; flex-direction:column;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding-bottom:env(safe-area-inset-bottom);
  visibility:hidden;
}
body.drawer-open .drawer{ transform:translateX(0); visibility:visible }
body.drawer-open .drawer-scrim{ opacity:1; visibility:visible }
body.drawer-open{ overflow:hidden }
.drawer__head{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px var(--pad); border-bottom:1px solid var(--line);
  position:sticky; top:0; background:var(--ground); z-index:2;
}
.drawer__close{
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  background:transparent; border:1.5px solid var(--line-2); border-radius:var(--r-sm);
  cursor:pointer; color:var(--ink); flex:none;
}
.drawer__nav{ padding:8px var(--pad) 20px }
.drawer__nav a{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:15px 0; min-height:54px;
  border-bottom:1px solid var(--line);
  font-family:var(--display); font-size:19px; font-weight:600; color:var(--ink);
}
.drawer__nav a:hover{ color:var(--brand) }
.drawer__foot{ padding:22px var(--pad) 32px; display:grid; gap:12px; background:var(--ground-2); margin-top:auto }

/* the header's width budget, measured rather than guessed:
   logo 120 + nav ~645 + primary CTA 170 + gaps 64 = ~1000px of content */
@media (max-width:1320px){ .header__cta .btn--ghost{ display:none } }
@media (max-width:1180px){
  .nav{ display:none }
  .burger{ display:flex }
}
@media (max-width:640px){
  .header__cta .btn{ display:none }
  .utilbar__hours, .utilbar__sep{ display:none }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero{
  position:relative; overflow:hidden;
  padding-block:clamp(44px,6vw,86px) clamp(52px,7vw,96px);
  background:var(--ground);
}
/* faint vertical rods — an abacus frame, not a gradient blob */
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:repeating-linear-gradient(90deg,
     var(--line) 0 1px, transparent 1px 96px);
  opacity:.55;
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 22%, #000 62%, transparent);
          mask-image:linear-gradient(180deg, transparent, #000 22%, #000 62%, transparent);
}
.hero .wrap{ position:relative }
.hero__grid{
  display:grid; gap:clamp(32px,5vw,64px);
  grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);
  align-items:center;
}
/* the headline is set to break as written — balancing would undo the parallel */
.hero__title{ font-size:var(--t-hero); letter-spacing:-.033em; line-height:1.04; text-wrap:pretty }
.hero__lede{ font-size:var(--t-lede); color:var(--ink-2); max-width:46ch; line-height:1.6 }

.hero__media{ position:relative }
.hero__frame{
  position:relative; border-radius:var(--r-xl); overflow:hidden;
  aspect-ratio:5/6; background:var(--ground-2);
  box-shadow:var(--lift-float);
}
.hero__frame img{ width:100%; height:100%; object-fit:cover }
.hero__badge{
  position:absolute; left:-18px; bottom:28px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-md); padding:16px 20px;
  box-shadow:var(--lift-float); max-width:268px;
}
.hero__badge b{ display:block; font-family:var(--display); font-size:19px; letter-spacing:-.01em }

.trustrail{
  margin-top:clamp(36px,4.6vw,60px); padding-top:26px;
  border-top:1px solid var(--line);
  display:grid; gap:20px clamp(20px,3vw,40px);
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.trustrail__item{ display:grid; gap:4px }
.trustrail__item b{ font-family:var(--display); font-size:var(--t-h4); letter-spacing:-.01em }
.trustrail__item span{ font-size:var(--t-sm); color:var(--muted); line-height:1.5 }

@media (max-width:980px){
  .hero__grid{ grid-template-columns:1fr }
  .hero__media{ order:-1; max-width:540px; margin-inline:auto; width:100% }
  .hero__frame{ aspect-ratio:4/3 }
  .hero__badge{ left:auto; right:14px; bottom:-20px }
  .trustrail{ grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:clamp(48px,6vw,60px) }
}
@media (max-width:420px){ .trustrail{ grid-template-columns:1fr } }

/* --------------------------------------------------------------------------
   Cards & grids
   -------------------------------------------------------------------------- */
.grid{ display:grid; gap:clamp(16px,2.2vw,28px) }
.grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)) }
.grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)) }
.grid-4{ grid-template-columns:repeat(4,minmax(0,1fr)) }
@media (max-width:900px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:620px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr } }

.split{
  display:grid; gap:clamp(28px,4.6vw,72px);
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:center;
}
.split--media-left > .split__media{ order:-1 }
@media (max-width:900px){
  .split{ grid-template-columns:1fr }
  .split--media-left > .split__media{ order:0 }
}
.split__media img{ width:100%; border-radius:var(--r-lg); aspect-ratio:4/3; object-fit:cover }
.split__media--tall img{ aspect-ratio:4/5 }

.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:clamp(22px,2.4vw,30px);
  display:flex; flex-direction:column; gap:12px;
  transition:border-color .18s ease-out, transform .18s ease-out;
}
.card--link:hover{ border-color:var(--ink); transform:translateY(-3px) }
.card__top{ display:flex; align-items:center; justify-content:space-between; gap:12px }
.card__num{
  font-family:var(--display); font-weight:700; font-size:14px;
  letter-spacing:.06em; color:var(--muted);
}
.card__media{
  margin:calc(-1 * clamp(22px,2.4vw,30px)); margin-bottom:4px; overflow:hidden;
  border-radius:var(--r-lg) var(--r-lg) 0 0;
}
.card__media img{ width:100%; aspect-ratio:16/10; object-fit:cover }
.card > .btn, .card > .textlink{ margin-top:auto; align-self:flex-start }

/* audience card — each opportunity gets its own accent, not three clones */
.audience{ border-top:5px solid var(--line) }
.audience--parents{ border-top-color:var(--brand) }
.audience--franchise{ border-top-color:var(--amber) }
.audience--schools{ border-top-color:var(--mint) }
.audience__tag{
  font-size:var(--t-xs); font-weight:700; letter-spacing:.12em; text-transform:uppercase;
}
.audience--parents .audience__tag{ color:var(--brand) }
.audience--franchise .audience__tag{ color:var(--amber-deep) }
.audience--schools .audience__tag{ color:var(--mint) }

/* numbered skill list on the night band */
.skills{ display:grid; gap:0; grid-template-columns:repeat(3,minmax(0,1fr)) }
.skills li{
  padding:26px clamp(18px,2vw,30px) 26px 0;
  border-top:1px solid var(--night-line);
  display:grid; gap:7px; align-content:start;
}
.skills li:nth-child(-n+3){ border-top:0 }
.skills__n{ font-family:var(--display); font-weight:700; font-size:13px; color:var(--amber); letter-spacing:.1em }
.skills h3{ font-size:var(--t-h4) }
.skills p{ color:var(--on-night-2); font-size:var(--t-sm); line-height:1.6 }
@media (max-width:900px){
  .skills{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .skills li:nth-child(-n+3){ border-top:1px solid var(--night-line) }
  .skills li:nth-child(-n+2){ border-top:0 }
}
@media (max-width:560px){
  .skills{ grid-template-columns:1fr }
  .skills li:nth-child(-n+2){ border-top:1px solid var(--night-line) }
  .skills li:first-child{ border-top:0 }
}

/* three-step pathway, joined by the rod */
.pathway{ display:grid; gap:clamp(22px,3vw,34px); grid-template-columns:repeat(3,minmax(0,1fr)); position:relative }
.pathway::before{
  content:""; position:absolute; top:34px; left:8%; right:8%; height:2px;
  background:repeating-linear-gradient(90deg, var(--line-2) 0 10px, transparent 10px 18px);
}
.step{ position:relative; display:grid; gap:14px; justify-items:start; align-content:start }
.step__bead{
  width:68px; height:68px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:700; font-size:24px;
  background:var(--surface); color:var(--ink);
  border:2px solid var(--ink);
  box-shadow:0 0 0 8px var(--ground);
}
.step:nth-child(1) .step__bead{ background:var(--brand); border-color:var(--brand); color:#fff }
.step:nth-child(2) .step__bead{ background:var(--amber); border-color:var(--amber); color:var(--ink) }
.step:nth-child(3) .step__bead{ background:var(--mint); border-color:var(--mint); color:#fff }
.band-cream .step__bead{ box-shadow:0 0 0 8px var(--ground-2) }
.band-white .step__bead{ box-shadow:0 0 0 8px var(--surface) }
@media (max-width:820px){
  .pathway{ grid-template-columns:1fr; gap:26px }
  .pathway::before{ display:none }
}

/* 8-level rail */
.levels{ display:grid; gap:14px; grid-template-columns:repeat(4,minmax(0,1fr)) }
.level{
  display:grid; gap:8px; padding:20px; align-content:start;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  border-left:3px solid var(--amber);
}
.level:nth-child(n+5){ border-left-color:var(--brand) }
.level__n{
  font-family:var(--display); font-weight:700; font-size:var(--t-xs);
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
}
.level h4{ font-size:16.5px; line-height:1.35 }
@media (max-width:1000px){ .levels{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:520px){ .levels{ grid-template-columns:1fr } }

.stageflow{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 8px;
  font-family:var(--display); font-weight:600; font-size:var(--t-sm);
}
.stageflow span{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-pill); padding:7px 15px;
}
.stageflow i{ color:var(--line-2); font-style:normal }

/* tick list */
.ticks{ display:grid; gap:14px }
.ticks li{ display:grid; grid-template-columns:24px 1fr; gap:13px; align-items:start; line-height:1.6 }
.ticks svg{ margin-top:4px; color:var(--mint) }
.band-night .ticks svg{ color:var(--amber) }
.ticks b{ font-weight:700 }
.ticks--2{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px clamp(18px,3vw,40px) }
@media (max-width:620px){ .ticks--2{ grid-template-columns:1fr } }

/* stat row — the client's own figures */
.stats{ display:grid; gap:clamp(18px,2.4vw,30px); grid-template-columns:repeat(4,minmax(0,1fr)) }
.stat{ display:grid; gap:3px; padding-left:18px; border-left:2px solid var(--amber) }
.stat b{ font-family:var(--display); font-weight:700; font-size:clamp(26px,3vw,38px); letter-spacing:-.02em; line-height:1.05 }
.stat span{ font-size:var(--t-sm); color:var(--muted) }
.band-night .stat span{ color:var(--on-night-2) }
@media (max-width:820px){ .stats{ grid-template-columns:repeat(2,minmax(0,1fr)) } }

/* testimonials */
.quotes{ display:grid; gap:clamp(18px,2.4vw,28px); grid-template-columns:repeat(3,minmax(0,1fr)) }
.quote{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(24px,2.6vw,34px); display:grid; gap:16px; align-content:start;
}
.quote:nth-child(2){ background:var(--amber-tint); border-color:#F0DFBC }
.quote__mark{ font-family:var(--display); font-size:46px; line-height:.7; color:var(--amber); height:26px }
.quote p{ font-size:17px; line-height:1.62 }
.quote cite{ font-style:normal; font-size:var(--t-sm); font-weight:700; color:var(--muted) }
@media (max-width:900px){ .quotes{ grid-template-columns:1fr } }

/* gallery */
.gallery{ display:grid; gap:14px; grid-template-columns:repeat(6,minmax(0,1fr)) }
.gallery figure{ margin:0; overflow:hidden; border-radius:var(--r-md); background:var(--ground-2) }
.gallery img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease-out }
.gallery figure:hover img{ transform:scale(1.04) }
.gallery .g-tall{ grid-column:span 2; grid-row:span 2 }
.gallery .g-wide{ grid-column:span 2; aspect-ratio:16/10 }
.gallery .g-sq{ grid-column:span 2; aspect-ratio:16/10 }
@media (max-width:820px){
  .gallery{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .gallery .g-tall{ grid-column:span 2; grid-row:auto; aspect-ratio:16/10 }
  .gallery .g-wide,.gallery .g-sq{ grid-column:span 1 }
}

/* FAQ */
.faq{ display:grid; gap:0; border-top:1px solid var(--line) }
.faq details{ border-bottom:1px solid var(--line) }
.faq summary{
  list-style:none; cursor:pointer; padding:22px 48px 22px 0; position:relative;
  font-family:var(--display); font-size:var(--t-h4); font-weight:600; line-height:1.35;
  color:var(--ink); min-height:56px; display:flex; align-items:center;
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary:hover{ color:var(--brand) }
.faq summary::after{
  content:""; position:absolute; right:6px; top:50%; width:15px; height:2px;
  background:var(--ink); transform:translateY(-50%);
}
.faq summary::before{
  content:""; position:absolute; right:12.5px; top:50%; width:2px; height:15px;
  background:var(--ink); transform:translateY(-50%);
  transition:opacity .18s ease-out, transform .18s ease-out;
}
.faq details[open] summary::before{ opacity:0; transform:translateY(-50%) rotate(90deg) }
.faq__a{ padding:0 clamp(24px,6vw,96px) 26px 0; color:var(--muted); line-height:1.7; max-width:74ch }

/* CTA band */
.ctaband{ position:relative; overflow:hidden }
.ctaband::after{
  content:""; position:absolute; right:-70px; bottom:-70px; width:300px; height:300px;
  border:42px solid var(--night-2); border-radius:50%; pointer-events:none;
}
.ctaband .wrap{ position:relative; z-index:1 }
.ctaband h2{ font-size:var(--t-h1) }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.form{ display:grid; gap:22px }
.formgrid{ display:grid; gap:18px; grid-template-columns:repeat(2,minmax(0,1fr)) }
@media (max-width:620px){ .formgrid{ grid-template-columns:1fr } }
.field{ display:grid; gap:7px; min-width:0 }
.field--full{ grid-column:1 / -1 }
.field > label,.field > .label{ font-size:var(--t-sm); font-weight:700; color:var(--ink) }
.field .req{ color:var(--brand) }
.field .hint{ font-size:var(--t-xs); color:var(--muted) }
.input, select.input, textarea.input{
  width:100%; min-height:52px; padding:13px 15px;
  font-family:var(--text); font-size:16px; color:var(--ink);
  background:var(--surface); border:1.5px solid var(--line-2); border-radius:var(--r-sm);
  transition:border-color .16s ease-out, box-shadow .16s ease-out;
}
textarea.input{ min-height:124px; resize:vertical; line-height:1.6 }
.input::placeholder{ color:#96917F }
.input:hover{ border-color:var(--ink-2) }
.input:focus{ outline:none; border-color:var(--focus); box-shadow:0 0 0 4px rgba(11,99,206,.15) }
select.input{
  appearance:none; -webkit-appearance:none; padding-right:44px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235C6173' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center;
}
.choices{ display:flex; flex-wrap:wrap; gap:10px }
.choice{
  display:inline-flex; align-items:center; gap:9px;
  min-height:46px; padding:0 16px;
  background:var(--surface); border:1.5px solid var(--line-2); border-radius:var(--r-pill);
  font-size:var(--t-sm); font-weight:600; cursor:pointer;
}
.choice:hover{ border-color:var(--ink) }
.choice input{ width:18px; height:18px; accent-color:var(--brand); margin:0 }
.consent{
  display:grid; grid-template-columns:22px 1fr; gap:12px; align-items:start;
  font-size:var(--t-sm); line-height:1.6; color:var(--muted);
}
.consent input{ width:20px; height:20px; margin-top:2px; accent-color:var(--brand) }
.formcard{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(24px,3vw,40px);
}
.formnote{ display:flex; align-items:center; gap:9px; font-size:var(--t-xs); color:var(--muted) }
.fieldset{ border:0; margin:0; padding:0; display:grid; gap:18px }
.fieldset__legend{
  display:flex; align-items:center; gap:12px; padding:0;
  font-family:var(--display); font-size:var(--t-h4); font-weight:700; color:var(--ink);
}
.fieldset__legend em{
  font-style:normal; width:30px; height:30px; flex:none; border-radius:50%;
  background:var(--ink); color:var(--ground);
  display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700;
}
.filebox{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:14px 16px; border:1.5px dashed var(--line-2); border-radius:var(--r-sm);
  background:var(--ground);
}

/* --------------------------------------------------------------------------
   Page hero (inner pages)
   -------------------------------------------------------------------------- */
.pagehero{ background:var(--ground-2); border-bottom:1px solid var(--line); padding-block:clamp(34px,4.6vw,66px) }
.pagehero__grid{ display:grid; gap:clamp(24px,4vw,56px); grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); align-items:center }
@media (max-width:900px){ .pagehero__grid{ grid-template-columns:1fr } }
.pagehero img{ width:100%; border-radius:var(--r-lg); aspect-ratio:16/11; object-fit:cover }
.crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:var(--t-xs); color:var(--muted) }
.crumbs a{ color:var(--muted) }
.crumbs a:hover{ color:var(--ink) }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.sitefooter{ background:var(--night); color:var(--on-night-2); padding-top:clamp(48px,6vw,80px) }
.sitefooter h4{
  color:var(--on-night); font-size:13px; letter-spacing:.12em; text-transform:uppercase;
  font-family:var(--text); font-weight:700;
}
.sitefooter a:not(.btn){ color:var(--on-night-2) }
.sitefooter a:not(.btn):hover{ color:var(--amber) }
.sitefooter .logo__top{ color:var(--on-night) }
.sitefooter .logo__tag{ color:var(--on-night-2); display:block }
.footer__grid{
  display:grid; gap:clamp(28px,3.4vw,46px);
  grid-template-columns:minmax(0,1.45fr) repeat(3,minmax(0,1fr));
}
@media (max-width:980px){ .footer__grid{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:560px){ .footer__grid{ grid-template-columns:1fr } }
.footer__links{ display:grid; gap:11px; font-size:var(--t-sm); margin-top:18px }
.footer__cta{
  margin-top:clamp(34px,4vw,54px); padding:26px 0;
  border-top:1px solid var(--night-line);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px;
}
.footer__tagline{ font-family:var(--display); font-size:var(--t-h3); color:var(--on-night); letter-spacing:-.015em }
.footer__legal{
  border-top:1px solid var(--night-line); padding-block:20px 26px;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px;
  font-size:var(--t-xs);
}
.footer__legal ul{ display:flex; flex-wrap:wrap; gap:18px }

/* --------------------------------------------------------------------------
   Demo-harness chrome (not part of the design)
   -------------------------------------------------------------------------- */
.dcx-bar{
  position:fixed; left:12px; bottom:12px; z-index:2147483000;
  display:inline-flex; align-items:center; gap:7px;
  font:600 12px/1 var(--text); background:#111827; color:#fff;
  border-radius:var(--r-pill); padding:10px 15px; text-decoration:none;
  box-shadow:0 4px 14px rgba(0,0,0,.28); opacity:.92;
}
.dcx-bar:hover{ opacity:1; color:#fff }
@media print{ .dcx-bar{ display:none } }

.toast{
  position:fixed; z-index:2147483100; right:16px; top:16px;
  max-width:340px; padding:14px 18px;
  background:var(--ink); color:var(--ground); border-radius:var(--r-md);
  font-size:var(--t-sm); line-height:1.5; box-shadow:var(--lift-menu);
  opacity:0; transform:translateY(-10px); transition:opacity .2s, transform .2s;
  pointer-events:none;
}
.toast.is-on{ opacity:1; transform:translateY(0) }
@media (max-width:560px){ .toast{ left:16px; right:16px; max-width:none } }

.notice{
  background:var(--amber-tint); border:1px solid #F0DFBC; border-radius:var(--r-md);
  padding:16px 20px; font-size:var(--t-sm); line-height:1.6; color:#6B4E12;
}
.notice b{ color:#4A3608 }

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}

/* --------------------------------------------------------------------------
   Additions: skip link, dark-ground logo variant
   -------------------------------------------------------------------------- */
.skip{
  position:absolute; left:16px; top:-200px; z-index:2147483200;
  background:var(--ink); color:var(--ground); font-weight:700; font-size:15px;
  padding:14px 20px; border-radius:var(--r-sm);
  transition:top .18s ease-out;
}
.skip:focus{ top:16px; color:var(--ground) }

/* typeset name on a dark ground: the logo red lightened to clear 6.3:1 */
.logo--light .logo__top,
.logo--light .logo__main{ color:#FF6B70 }
.logo--light .logo__tag{ color:var(--on-night-2) }

.drawer-scrim{ appearance:none; -webkit-appearance:none }

/* anchored sections must clear the sticky header */
:target, section[id], main[id]{ scroll-margin-top:96px }
html{ scroll-behavior:smooth }

/* On the narrowest phones a long label ("Explore franchise opportunity")
   is wider than the column, so buttons stop being single-line there. */
@media (max-width:480px){
  .btn{
    white-space:normal; text-align:center;
    padding:12px 20px; line-height:1.3;
  }
}

/* --------------------------------------------------------------------------
   Inner-page components
   -------------------------------------------------------------------------- */

/* stat rows that are not four items long */
.stats--auto{ grid-template-columns:repeat(auto-fit,minmax(186px,1fr)) }

/* an honest placeholder where the client still owes us an asset */
.photo-placeholder{
  display:grid; place-content:center; gap:6px; text-align:center;
  aspect-ratio:11/13; border:1.5px dashed var(--line-2); border-radius:var(--r-lg);
  background:var(--ground-2); color:var(--muted); padding:24px;
}
.photo-placeholder b{ font-family:var(--display); font-size:var(--t-sm); color:var(--ink-2) }
.photo-placeholder span{ font-size:var(--t-xs) }

/* form page: form beside a supporting column */
.split--form{
  grid-template-columns:minmax(0,1.32fr) minmax(0,.68fr);
  align-items:start; gap:clamp(28px,3.4vw,52px);
}
@media (max-width:980px){ .split--form{ grid-template-columns:1fr } }
.sticky-aside{ position:sticky; top:104px; display:grid; gap:clamp(16px,2vw,24px) }
@media (max-width:980px){ .sticky-aside{ position:static } }

.aside-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(20px,2.2vw,28px); display:grid; gap:14px; align-content:start;
}
.aside-card--ink{ background:var(--night); color:var(--on-night); border-color:var(--night) }
.aside-card--ink h3,.aside-card--ink h4{ color:var(--on-night) }
.aside-card--ink p,.aside-card--ink li{ color:var(--on-night-2) }
/* :not(.btn) — otherwise this beats .btn--amber and the label vanishes */
.aside-card--ink a:not(.btn){ color:var(--amber) }

/* numbered "what happens next" list */
.numlist{ display:grid; gap:22px; counter-reset:n }
.numlist li{
  display:grid; grid-template-columns:38px 1fr; gap:16px; align-items:start;
  counter-increment:n;
}
.numlist li::before{
  content:counter(n,decimal-leading-zero);
  font-family:var(--display); font-weight:700; font-size:14px;
  color:var(--amber-deep); background:var(--amber-tint);
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.numlist h4{ margin-bottom:4px }
.numlist p{ color:var(--muted); font-size:var(--t-sm); line-height:1.6 }

/* small feature list used on the "why partner" sections */
.features{ display:grid; gap:clamp(16px,2vw,24px); grid-template-columns:repeat(3,minmax(0,1fr)) }
@media (max-width:900px){ .features{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:560px){ .features{ grid-template-columns:1fr } }
.feature{ display:grid; gap:8px; align-content:start; padding-top:20px; border-top:2px solid var(--ink) }
.feature h4{ font-size:17px }
.feature p{ color:var(--muted); font-size:var(--t-sm); line-height:1.6 }

/* pull quote */
.pullquote{
  font-family:var(--display); font-weight:600;
  font-size:var(--t-h3); line-height:1.3; letter-spacing:-.015em;
  border-left:3px solid var(--amber); padding-left:clamp(18px,2.4vw,28px);
}

/* a question that owns a set of radio choices */
.fieldset__q{
  padding:0; margin:0 0 10px;
  font-size:var(--t-sm); font-weight:700; color:var(--ink);
}

/* --------------------------------------------------------------------------
   Documentation pages (brand tokens, component sheets)
   -------------------------------------------------------------------------- */
.swatches{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)) }
.swatch{ border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; background:var(--surface) }
.swatch__chip{
  height:88px; display:flex; align-items:flex-end; justify-content:flex-start;
  padding:10px 12px; font-size:12px; font-weight:700;
}
.swatch__meta{ padding:12px 14px; display:grid; gap:2px }
.swatch__meta b{ font-size:14px }
.swatch__meta span{ font-size:12.5px; color:var(--muted) }

.spec{ width:100%; border-collapse:collapse; font-size:var(--t-sm) }
.spec caption{ text-align:left; font-size:var(--t-xs); color:var(--muted); padding-bottom:10px }
.spec th,.spec td{ text-align:left; padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:top }
.spec th{ font-weight:700; color:var(--ink); white-space:nowrap }
.spec tr:first-child th{ border-top:2px solid var(--ink) }
.spec td:last-child{ color:var(--muted) }
.specwrap{ overflow-x:auto; -webkit-overflow-scrolling:touch }

.specimen{ display:grid; gap:6px; padding:18px 0; border-top:1px solid var(--line) }
.specimen__label{ font-size:var(--t-xs); color:var(--muted); font-weight:700; letter-spacing:.08em; text-transform:uppercase }

.phone-frame{
  width:390px; max-width:100%; height:720px;
  border:10px solid var(--ink); border-radius:34px; overflow:hidden;
  background:var(--ground); box-shadow:var(--lift-float);
}
.phone-frame iframe{ width:100%; height:100%; border:0; display:block }
.frame-row{ display:flex; flex-wrap:wrap; gap:clamp(20px,3vw,40px); align-items:flex-start }

.tokengrid{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)) }
.tokenbox{ border:1px solid var(--line); border-radius:var(--r-md); padding:16px; background:var(--surface); display:grid; gap:10px }
.tokenbox__demo{ height:54px; background:var(--amber-tint); border:1px solid var(--line-2) }
.tokenbox b{ font-size:13.5px }
.tokenbox span{ font-size:12.5px; color:var(--muted) }

/* A 390px phone frame cannot fit inside a 390px viewport, and shrinking it
   would misrepresent the layout it is showing. So the row scrolls inside
   itself instead, the way a wide table does. */
.frame-row--frames{ flex-wrap:nowrap; overflow-x:auto; padding-bottom:12px }
.frame-row--frames > *{ flex:none }

/* a native file input has an intrinsic width wider than a 320px column */
.filebox input[type="file"]{ width:100%; min-width:0; font-size:14px }