/* =============================================================
   Happy Faces Forever — Website V8
   The HFFDLC brand refresh (guidelines v60) applied over V7's
   structure: twelve locked pastels, Baloo 2 + Inter, and the
   STEAM doodle field behind the sections. Built on V7
   V2's sections, components and layout, dressed in the lighter
   lilac-and-sage palette. The V6 cinematic hero is kept as-is.
   V2's colour token names are aliased onto the new palette, so
   V2's markup and component CSS carry straight over.
   ============================================================= */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Inter:wght@400;500;600;700&family=Caveat:wght@600;700&display=swap');

:root{
  /* ---- the lighter palette ---- */
  --paper:#FFFFFF;
  --lilac-1:#F7F2FB; --lilac-2:#EDE2F4; --lilac-3:#DCCBE9;
  --sage-1:#F2F7E9;  --sage-2:#E4EFD2;  --sage-3:#CFE1AE;
  --plum:#6B4382; --plum-deep:#573369;
  --moss:#55742F; --gold:#9A7828; --rose:#A9497A; --teal:#2F7380;
  --blue:#2F6493; --clay:#A9573C;

  /* ---- V2 token names, re-pointed at the new palette ---- */
  --terracotta:#6B4382; --terracotta-deep:#573369;
  --cream:#F7F2FB;        /* page / pale lilac band */
  --peach:#F2F7E9;        /* alternating sage band */
  --sage:#E4EFD2;
  --bluegrey:#E3EDF4;
  --greige:#EDE2F4;
  --blush:#FAE3EE;
  --canary:#FBF1D2;
  --apricot:#F8E0C0;
  --lavender:#E7DAF2; --lav:#E7DAF2;
  --yellowgreen:#E9F2D8;
  --card:#F7F2FB;
  --sage-accent:#55742F;

  --ink:#332B3A; --ink-70:#645C6E; --ink-45:rgba(51,43,58,.55);
  --ink-2:#645C6E; --ink-3:#978FA3;
  --rule:#ECE6F1; --rule-2:#F5F1F8;

  --display:'Baloo 2',system-ui,-apple-system,sans-serif;
  --body:'Inter',system-ui,-apple-system,sans-serif;
  --script:'Caveat',cursive;
  --serif:'Fraunces','Iowan Old Style',Georgia,serif;   /* hero headline only */

  --maxw:1200px;
  --gut:clamp(18px,4vw,40px);
  --ease:cubic-bezier(.19,1,.22,1);
  --ease-back:cubic-bezier(.34,1.56,.64,1);
  --r-xl:26px; --r-lg:20px; --r-md:14px;
  --lift:0 26px 46px -34px rgba(51,43,58,.5);
  --lift-2:0 34px 60px -40px rgba(51,43,58,.5);
  color-scheme:light;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px;overflow-x:clip}
body{font-family:var(--body);color:var(--ink);background:var(--paper);
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
svg{display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--display);line-height:1.06;font-weight:800;letter-spacing:-.02em;text-wrap:balance}
::selection{background:var(--lilac-2);color:var(--ink)}
:focus-visible{outline:2px solid var(--plum);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.skip{position:absolute;left:-9999px;background:var(--plum);color:#fff;padding:12px 18px;z-index:300;border-radius:0 0 12px 0}
.skip:focus{left:0;top:0}

html.js .reveal{opacity:0;transform:translateY(20px)}
html.js .reveal.in{opacity:1;transform:none;transition:opacity .75s var(--ease),transform .75s var(--ease)}
html.js .reveal.d1{transition-delay:.08s} html.js .reveal.d2{transition-delay:.16s} html.js .reveal.d3{transition-delay:.24s}

/* ---------- buttons (V2 names + the two V6 ones) ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-family:var(--body);
  font-weight:600;font-size:1rem;line-height:1.3;padding:.8em 1.5em;border-radius:999px;
  border:2px solid transparent;cursor:pointer;white-space:nowrap;
  transition:transform .3s var(--ease-back),box-shadow .3s,background .25s,color .25s,border-color .25s;
}
.btn svg{flex:none;width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2}
.btn:hover{transform:translateY(-2px)}
.btn-primary,.btn-fill{background:var(--plum);color:#fff;box-shadow:0 14px 26px -14px rgba(107,67,130,.9)}
.btn-primary:hover,.btn-fill:hover{background:var(--plum-deep)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:#241E2A}
.btn-ghost{border-color:var(--lilac-3);color:var(--plum);background:var(--paper)}
.btn-ghost:hover{background:var(--lilac-1);border-color:var(--plum)}
.btn-cream{background:#fff;color:var(--plum);box-shadow:var(--lift)}
.btn-accent{border-color:var(--c,var(--plum));color:var(--c,var(--plum));background:var(--paper)}
.btn-accent:hover{background:var(--c,var(--plum));color:#fff}
.btn-sm{padding:.62em 1.2em;font-size:.87rem}
.arrow{display:inline-flex;align-items:center;gap:.45em;font-weight:600;font-size:.92rem;color:var(--plum)}
.arrow svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.4;transition:transform .25s var(--ease)}
.arrow:hover svg{transform:translateX(4px)}

/* ---------- Face component ---------- */
.hf-face{width:100%;height:100%;overflow:visible}
.hf-face .eye{transform-box:fill-box;transform-origin:center;
  transform:translate(var(--ex,0px),var(--ey,0px));transition:transform .12s ease}
.hf-face.blink .eye{transform:translate(var(--ex,0px),var(--ey,0px)) scaleY(.12)}
.hf-face .feat{transition:transform .5s var(--ease)}

/* =============================================================
   HEADER
   ============================================================= */
.rainbow{height:4px;background:linear-gradient(90deg,
  #F0B3AC 0 16.6%, #F5CFA3 16.6% 33.2%, #F0E3A8 33.2% 49.8%,
  #CFE1AE 49.8% 66.4%, #AFCFE2 66.4% 83%, #DCCBE9 83% 100%)}

.masthead{position:sticky;top:env(safe-area-inset-top,0px);z-index:100;background:rgba(255,255,255,.9);backdrop-filter:blur(14px) saturate(160%)}
.bar{border-bottom:1px solid var(--rule)}
.bar .wrap{display:flex;align-items:center;gap:18px;height:80px;transition:height .3s var(--ease)}
.masthead.small .bar .wrap{height:66px}
.brand{flex:none;display:flex;align-items:center}
.brand img{height:52px;width:auto;transition:height .3s var(--ease)}
.masthead.small .brand img{height:44px}

.nav{margin-left:auto;display:flex;align-items:center;gap:2px}
.nav > a,.nav-btn{
  font:inherit;font-size:.93rem;font-weight:500;color:var(--ink-2);background:none;border:0;cursor:pointer;
  padding:.6em .95em;border-radius:999px;display:inline-flex;align-items:center;gap:6px;position:relative;
  transition:color .18s,background .18s;
}
.nav > a,.nav-btn{white-space:nowrap}
.nav > a:hover,.nav-btn:hover,.nav-group.open .nav-btn{color:var(--plum);background:var(--lilac-1)}
.nav a.on,.nav-btn.on{color:var(--plum)}
.nav-btn svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2.6;transition:transform .25s}
.nav-group{position:relative}
.nav-group.open .nav-btn svg{transform:rotate(180deg)}

.menu{
  position:absolute;top:calc(100% + 14px);right:0;background:var(--paper);border:1px solid var(--rule);
  border-radius:var(--r-lg);padding:12px;min-width:280px;box-shadow:var(--lift-2);
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:.22s var(--ease);
}
.nav-group.open .menu{opacity:1;visibility:visible;transform:none}
/* the gap between the button and the panel stays hoverable, so the menu does not
   close while the pointer crosses it */
.menu::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.menu a{display:flex;align-items:baseline;gap:11px;padding:10px 12px;border-radius:12px;font-size:.92rem;
  color:var(--ink-2);transition:background .16s,color .16s}
.menu a:hover{background:var(--lilac-1);color:var(--plum)}
.menu a i{width:8px;height:8px;flex:none;border-radius:50%;background:var(--mc,var(--lilac-3));transform:translateY(-1px)}
.menu a b{font-weight:600;color:var(--ink);white-space:nowrap}
.menu a:hover b{color:var(--plum)}
.menu a span{margin-left:auto;font-size:.78rem;color:var(--ink-3);font-variant-numeric:tabular-nums;padding-left:12px;white-space:nowrap}
.menu h6{font-size:.67rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);
  font-weight:700;padding:4px 12px 8px;display:flex;align-items:baseline;gap:9px}
.menu h6 em{font-style:normal;letter-spacing:0;text-transform:none;font-weight:500;font-size:.74rem;color:var(--ink-3);opacity:.85}

/* ---- Programs panel: age ladder, a planning rail and a closing prompt ---- */
.menu.wide{width:min(760px,calc(100vw - 32px));min-width:0;padding:0;overflow:hidden;
  left:50%;right:auto;transform:translate(-50%,-6px);
  display:grid;grid-template-columns:minmax(0,1fr) 206px}
.nav-group.open .menu.wide{transform:translate(-50%,0)}
.menu-main{padding:14px 8px 14px 12px;min-width:0}
/* two columns read top to bottom, so each one is its own run up the age ladder */
.menu-ages{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(4,auto);
  grid-auto-flow:column;column-gap:8px}
.menu-ages a{padding:9px 11px}
.menu-ages a b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menu-ages a span{padding-left:8px}
.menu-rail{background:var(--lilac-1);border-left:1px solid var(--rule);padding:14px 10px 14px 12px;min-width:0}
.menu-rail a{display:block;padding:9px 11px}
.menu-rail a b{white-space:normal;display:block}
.menu-rail a em{display:block;font-style:normal;font-size:.75rem;line-height:1.4;color:var(--ink-3);margin-top:3px}
.menu-rail a:hover em{color:var(--plum)}
/* below ~1120px the rail drops under the ladder, so the program names never truncate */
@media(max-width:1120px){
  .menu.wide{width:min(640px,calc(100vw - 32px));grid-template-columns:minmax(0,1fr)}
  .menu-rail{border-left:0;border-top:1px solid var(--rule);padding:12px 10px 14px 12px;
    display:grid;grid-template-columns:1fr 1fr;column-gap:8px;align-items:start}
  .menu-rail h6{grid-column:1/-1}
}

.callnum{font-size:.93rem;font-weight:600;font-variant-numeric:tabular-nums;padding:.6em .8em;white-space:nowrap;color:var(--ink)}
.burger{display:none;background:none;border:0;cursor:pointer;padding:9px;margin-left:auto;color:var(--ink)}
.burger svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8}

/* mobile bar + drawer + to top */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;gap:10px;
  background:rgba(255,255,255,.95);backdrop-filter:blur(14px);border-top:1px solid var(--rule);
  padding:11px 14px;padding-bottom:calc(11px + env(safe-area-inset-bottom,0px))}
.mbar a{flex:1;display:flex;align-items:center;justify-content:center;gap:.5em;padding:.8em 1em;
  font-size:.93rem;font-weight:600;border-radius:999px;border:1.5px solid var(--lilac-3);color:var(--plum)}
.mbar a.p{background:var(--plum);color:#fff;border-color:var(--plum)}
.scrim{position:fixed;inset:0;background:rgba(51,43,58,.42);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:.28s;z-index:110}
.scrim.on{opacity:1;visibility:visible}
.drawer{position:fixed;inset:0 0 0 auto;width:min(390px,92vw);background:var(--paper);z-index:120;
  transform:translateX(102%);visibility:hidden;transition:transform .35s var(--ease),visibility .35s;
  display:flex;flex-direction:column;box-shadow:-24px 0 60px -34px rgba(51,43,58,.55)}
.drawer.on{transform:none;visibility:visible}
.drawer header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--rule)}
.drawer header img{height:44px;width:auto}
.drawer header button{background:none;border:0;cursor:pointer;padding:8px;color:var(--ink)}
.drawer header button svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2}
.drawer nav{flex:1;overflow-y:auto;padding:12px 14px 24px}
.drawer nav a,.drawer nav button.acc{display:flex;align-items:center;justify-content:space-between;width:100%;
  font-family:var(--display);font-weight:600;font-size:1.06rem;color:var(--ink);text-align:left;
  padding:13px 12px;background:none;border:0;border-radius:12px;cursor:pointer}
.drawer nav a:hover,.drawer nav button.acc:hover{background:var(--lilac-1)}
.drawer nav button.acc svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.4;transition:transform .25s}
.drawer nav .accbox{display:none;padding:2px 0 10px 14px}
.drawer nav .accbox a{font-family:var(--body);font-weight:500;font-size:.93rem;color:var(--ink-2);padding:9px 12px}
.drawer nav .accbox a i{width:7px;height:7px;flex:none;border-radius:50%;background:var(--mc,var(--lilac-3));margin-right:10px}
.drawer .open .accbox{display:block}
.drawer .open button.acc{color:var(--plum)}
.drawer .open button.acc svg{transform:rotate(180deg)}
.drawer footer{padding:16px 20px;border-top:1px solid var(--rule);display:grid;gap:10px}

.totop{position:fixed;right:18px;bottom:88px;z-index:80;width:44px;height:44px;border-radius:50%;
  background:var(--paper);border:1px solid var(--rule);box-shadow:var(--lift);cursor:pointer;display:grid;
  place-items:center;opacity:0;visibility:hidden;transform:translateY(8px);transition:.28s var(--ease);color:var(--plum)}
.totop.on{opacity:1;visibility:visible;transform:none}
.totop svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2.2}

/* =============================================================
   HERO — cinematic banner, slow-zoom slideshow behind the words
   ============================================================= */
.hero{position:relative;min-height:clamp(468px,58vw,632px);display:flex;align-items:flex-end;
  overflow:hidden;background:#2A2034}
.show{position:absolute;inset:0;z-index:1}
.show .sl{position:absolute;inset:0;opacity:0;transition:opacity 1.2s var(--ease);
  backface-visibility:hidden;contain:paint}
.show .sl.on{opacity:1}
/* a slide that is neither coming in nor going out is not painted at all, and only the
   two slides mid-crossfade are promoted — four idle full-bleed photos otherwise sit in
   the compositor for the whole visit */
.show .sl:not(.on):not(.out){visibility:hidden}
.show .sl.on,.show .sl.out{will-change:opacity}
.show .sl img{width:100%;height:100%;object-fit:cover;transform:scale(1.001);
  backface-visibility:hidden}
.show.kb .sl.on img{animation:kenburns 9.5s ease-out forwards;will-change:transform}
.show.kb.hold .sl.on img{animation-play-state:paused}
@keyframes kenburns{
  from{transform:scale(1.001) translate(0,0)}
  to{transform:scale(1.13) translate(-1.8%,-1.3%)}
}
.veil{position:absolute;inset:0;z-index:2;background:
  linear-gradient(103deg, rgba(40,30,50,.84) 0%, rgba(40,30,50,.66) 42%, rgba(40,30,50,.22) 74%, rgba(40,30,50,.08) 100%),
  linear-gradient(0deg, rgba(40,30,50,.38) 0%, rgba(40,30,50,0) 26%)}

.hero-in{position:relative;z-index:3;width:100%;padding-block:clamp(44px,5.6vw,78px) clamp(62px,7vw,96px)}
.kicker{display:inline-flex;align-items:center;gap:11px;font-size:.72rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:#fff;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.3);
  padding:.5em 1.05em;border-radius:999px;margin-bottom:20px}
.kicker i{display:flex;gap:4px}
.kicker i b{width:6px;height:6px;border-radius:50%}
h1{font-size:clamp(2.2rem,4.5vw,3.55rem);line-height:1.04;letter-spacing:-.026em;margin-bottom:18px;
  max-width:16ch;color:#fff;text-shadow:0 2px 24px rgba(30,22,38,.4)}
h1 .k{color:#E4C9F0}
h1 .n{font-weight:400;font-style:italic;color:rgba(255,255,255,.76)}
.hero-lead{font-size:clamp(1.02rem,1.35vw,1.14rem);color:rgba(255,255,255,.88);max-width:48ch;margin-bottom:24px}
.hero-act{display:flex;gap:11px;flex-wrap:wrap;margin-bottom:22px}
.hero-fine{font-size:.85rem;color:rgba(255,255,255,.74);max-width:64ch}
.hero-fine .fine-hours{display:block;white-space:nowrap;margin-top:5px}

.hero .btn-fill{background:#fff;color:var(--plum);box-shadow:0 16px 30px -18px rgba(0,0,0,.7)}
.hero .btn-fill:hover{background:var(--lilac-1)}
.hero .btn:not(.btn-fill){border-color:rgba(255,255,255,.62);color:#fff;background:transparent}
.hero .btn:not(.btn-fill):hover{background:rgba(255,255,255,.17)}

/* caption + dots, bottom right of the banner */
.shot-meta{position:absolute;z-index:4;right:0;bottom:clamp(18px,2.4vw,28px);display:flex;align-items:center;
  gap:16px;padding-inline:var(--gut);max-width:var(--maxw);left:50%;transform:translateX(-50%);
  width:100%;justify-content:flex-end}
.shot-cap{font-size:.82rem;color:rgba(255,255,255,.82);text-align:right;max-width:54ch}
.dots{display:flex;gap:8px}
.dots button{width:8px;height:8px;border-radius:999px;border:0;background:rgba(255,255,255,.45);cursor:pointer;
  padding:0;transition:.28s var(--ease)}
.dots button:hover{background:rgba(255,255,255,.8)}
.dots button[aria-current="true"]{background:#fff;width:26px}

/* figures bar sitting flush under the banner */
.statband{background:var(--paper);border-bottom:1px solid var(--rule)}
.railstats-in{display:grid;grid-template-columns:repeat(4,1fr)}
.st{padding:24px 26px;border-left:1px solid var(--rule)}
.st:first-child{border-left:0}
.st b{display:block;font-family:var(--display);font-size:clamp(1.6rem,2.8vw,2.2rem);font-weight:600;line-height:1;
  font-variant-numeric:tabular-nums}
.st b i{font-style:normal;font-size:.44em;font-family:var(--body);font-weight:600;color:var(--ink-2);margin-left:.3em}
.st > span{display:block;font-size:.83rem;color:var(--ink-2);margin-top:9px;line-height:1.45}
.st b span{display:inline;font:inherit;color:inherit;margin:0}
.st:nth-child(1) b{color:var(--plum)} .st:nth-child(2) b{color:var(--moss)}
.st:nth-child(3) b{color:var(--gold)} .st:nth-child(4) b{color:var(--teal)}

@media(max-width:900px){
  .hero{min-height:clamp(430px,84vw,520px)}
  .veil{background:linear-gradient(180deg,rgba(40,30,50,.34) 0%,rgba(40,30,50,.5) 42%,rgba(40,30,50,.82) 100%)}
  .shot-cap{display:none}
  .shot-meta{justify-content:center}
}

/* ---------- generic section ---------- */
.section{padding:clamp(70px,10vw,130px) 0;position:relative}
.eyebrow{display:inline-flex;align-items:center;gap:.55em;font-weight:600;font-size:.78rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--terracotta)}
.eyebrow .num{font-family:var(--display);font-weight:800}
.sec-title{font-size:clamp(2.1rem,5vw,3.6rem);margin:18px 0 20px;letter-spacing:-.03em}
.sec-lead{font-size:1.15rem;color:var(--ink-70);max-width:none;text-align:left}
.script-accent{font-family:var(--script);color:var(--terracotta);font-weight:700}

/* ---------- "known" section: interactive face grid ---------- */
.known{background:var(--bluegrey);color:var(--ink);overflow:hidden}
.known .eyebrow{color:var(--terracotta-deep)}
/* Consolidated Why section — centered statement + reasons */
.why-head{max-width:900px;margin:0 auto 44px;text-align:center}
.why-head .eyebrow{display:inline-block;margin-bottom:18px}
.why-statement{font-family:var(--display);font-weight:800;letter-spacing:-.02em;line-height:1.08;
  font-size:clamp(1.9rem,4.6vw,3.4rem);color:var(--ink)}
.why-statement .pq{color:var(--terracotta);white-space:nowrap;font-family:var(--script)!important;font-weight:700;font-style:normal;letter-spacing:0;font-size:1.15em;display:inline-block}
.why-sub{color:var(--ink-70);max-width:64ch;margin:20px auto 0}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
/* Trust highlights consolidated into Why section */
.trust-strip{margin-top:20px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px 26px;
  background:rgba(255,255,255,.5);border-radius:20px;padding:26px 30px;border:1px solid rgba(51,43,58,.06)}
.trust{display:flex;gap:12px;align-items:flex-start}
.trust .tick{width:28px;height:28px;border-radius:8px;background:var(--sage);display:grid;place-items:center;flex:none;margin-top:1px}
.trust .tick svg{width:16px;height:16px;color:var(--ink)}
.trust b{font-family:var(--display);font-size:.98rem;display:block;color:var(--ink)}
.trust span{font-size:.85rem;color:var(--ink-70)}
@media(max-width:820px){.trust-strip{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.trust-strip{grid-template-columns:1fr}}
.why{background:rgba(255,255,255,.6);border-radius:20px;padding:26px 24px 24px;border:1px solid rgba(51,43,58,.06);
  transition:transform .35s var(--ease),background .35s}
.why:hover{transform:translateY(-6px);background:#fff}
.why .why-ic{width:48px;height:48px;border-radius:14px;background:var(--card);display:grid;place-items:center;margin-bottom:14px}
.why .why-ic svg{width:24px;height:24px;color:var(--terracotta)}
.why h3{font-family:var(--display);font-size:1.15rem;margin-bottom:6px;color:var(--ink)}
.why p{font-size:.92rem;color:var(--ink-70);line-height:1.5}
@media(max-width:900px){.why-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.why-grid{grid-template-columns:1fr}.why-statement .pq{white-space:normal}}

/* ---------- STEAM week: horizontal typographic days ---------- */
.week{display:flex;flex-direction:column;gap:2px;margin-top:40px;border-top:2px solid rgba(51,43,58,.14)}
/* Approach intro (consolidated) */
.approach-intro{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center;margin-top:8px}
.approach-visual{margin:0;border-radius:22px;overflow:hidden;background:#fff;box-shadow:0 20px 44px -30px rgba(51,43,58,.4);position:relative}
.approach-visual img{width:100%;height:auto;display:block}
.approach-visual figcaption{padding:16px 20px;display:flex;flex-direction:column;line-height:1.2}
.approach-visual figcaption b{font-family:var(--display);font-size:1.05rem}
.approach-visual figcaption span{font-size:.9rem;color:var(--ink-70);margin-top:2px}
.lang-note{margin-top:22px;background:#fff;border-radius:16px;padding:18px 20px;box-shadow:0 14px 34px -28px rgba(51,43,58,.4)}
.lang-note b{font-family:var(--display);font-size:1.02rem;display:block;margin-bottom:4px}
.lang-note span{font-size:.92rem;color:var(--ink-70)}
@media(max-width:820px){.approach-intro{grid-template-columns:1fr;gap:28px}}
.day{display:grid;grid-template-columns:88px 1fr auto;gap:28px;align-items:center;
  padding:26px 8px;border-bottom:2px solid rgba(51,43,58,.14);position:relative;
  transition:background .35s,padding-left .35s var(--ease)}
.day:hover{background:rgba(255,255,255,.5);padding-left:20px}
.day .glyph{font-family:var(--display);font-weight:800;font-size:3.4rem;line-height:1;
  width:88px;height:88px;border-radius:22px;display:grid;place-items:center;color:var(--ink);
  transition:transform .4s var(--ease-back)}
.day:hover .glyph{transform:rotate(-6deg) scale(1.05)}
.day .body h3{font-size:1.5rem;margin-bottom:2px}
.day .body .dow{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--terracotta);font-weight:700}
.day .body p{color:var(--ink-70);font-size:.98rem;max-width:60ch;margin-top:4px}
.day .idx{font-family:var(--display);font-size:1rem;color:var(--ink-45);font-weight:700}
@media(max-width:680px){
  .day{grid-template-columns:60px 1fr;gap:18px}
  .day .glyph{width:60px;height:60px;font-size:2.2rem;border-radius:16px}
  .day .idx{display:none}
}

/* ---------- programs: editorial cards ---------- */
.prog-list{display:grid;gap:22px}
.prog{display:grid;grid-template-columns:auto 1fr;gap:32px;align-items:center;
  background:#fff;border-radius:26px;padding:26px 32px;box-shadow:0 20px 44px -30px rgba(51,43,58,.4);
  transition:transform .4s var(--ease),box-shadow .4s;border:1px solid rgba(51,43,58,.05)}
.prog:hover{transform:translateY(-5px);box-shadow:0 30px 54px -28px rgba(51,43,58,.45)}
.prog .pface{width:74px;height:74px;border-radius:20px;display:grid;place-items:center;flex:none}
.prog .pface .hf-face{width:80%;height:80%}
.prog .meta{min-width:0}
.prog .age{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--terracotta);font-weight:700}
.prog h3{font-size:1.5rem;margin:3px 0}
.prog .room{color:var(--ink-70);font-size:.92rem}
.prog .pmeta{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.prog .pmeta span{font-size:.74rem;font-weight:600;letter-spacing:.02em;padding:.3em .7em;border-radius:999px;
  background:var(--cream);color:var(--ink-70);white-space:nowrap}
.prog .pmeta span.season{background:var(--peach);color:var(--terracotta-deep)}
.prog .pdesc{color:var(--ink-70);font-size:.95rem;margin-top:10px;max-width:56ch;line-height:1.5}
.prog .ratio{text-align:right;flex:none}
.prog .ratio .big{font-family:var(--display);font-weight:800;font-size:2rem;color:var(--ink);line-height:1}
.prog .ratio .cap{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-45);font-weight:600}
.prog .ratio .vs{font-size:.8rem;color:var(--terracotta);font-weight:600;margin-top:2px}
@media(max-width:680px){
  .prog{grid-template-columns:auto 1fr;gap:18px;padding:22px}
  .prog .ratio{grid-column:2;text-align:left;display:flex;align-items:baseline;gap:10px;margin-top:4px}
}

/* ---------- pull quote / voice ---------- */
.pull{text-align:center;max-width:min(90vw,900px);margin:0 auto;position:relative}
.pull .q{font-family:var(--display);font-weight:800;font-size:clamp(2.2rem,5.4vw,4rem);line-height:1.06;letter-spacing:-.03em}
.pull .q .fv{color:var(--terracotta)}
.pull .q .pq-accent{color:var(--cream);position:relative;white-space:nowrap;
  text-decoration:underline;text-decoration-thickness:.09em;text-underline-offset:.12em;
  text-decoration-color:rgba(255,255,255,.45)}
.pull .qmark{font-family:var(--display);font-weight:800;font-size:clamp(4rem,12vw,9rem);
  line-height:.4;color:rgba(255,255,255,.35);display:block;height:.45em}
.pull .qmark.close{transform:rotate(180deg);margin-top:.15em}
.pull-sec{position:relative;overflow:hidden}
.pull-sec::before{content:"";position:absolute;inset:0;opacity:.12;pointer-events:none;
  background-image:radial-gradient(circle,#fff 2.2px,transparent 2.2px);background-size:30px 30px}
.pull-faces{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.pull-faces .pf{position:absolute;width:74px;height:74px;opacity:.9;
  filter:drop-shadow(0 10px 18px rgba(51,43,58,.25))}
.pull-faces .pf1{top:12%;left:6%;transform:rotate(-12deg)}
.pull-faces .pf2{bottom:14%;left:12%;transform:rotate(10deg)}
.pull-faces .pf3{top:16%;right:8%;transform:rotate(14deg)}
.pull-faces .pf4{bottom:12%;right:6%;transform:rotate(-8deg)}
@media(max-width:720px){.pull-faces .pf{width:52px;height:52px}.pull-faces .pf1,.pull-faces .pf3{top:4%}}

/* ---------- reviews widget / fallback ---------- */
.reviews-widget{min-height:0}
.reviews-widget:not(.has-widget){margin:0;height:0;overflow:hidden}
.reviews-widget.has-widget{margin-top:20px}
/* When a real widget is present and rendered, hide the hand-built fallback.
   The widget container starts effectively empty; JS reveals fallback if it stays empty. */
.testi-fallback.hide{display:none}

/* ---------- feature split ---------- */
.feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-top:44px}
.feat{background:#fff;border-radius:22px;padding:28px 26px;box-shadow:0 18px 40px -30px rgba(51,43,58,.4);
  transition:transform .4s var(--ease)}
.feat:hover{transform:translateY(-6px)}
.feat .chip{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;margin-bottom:16px}
.feat .chip svg{width:26px;height:26px;color:var(--ink)}
.feat h3{font-size:1.18rem;margin-bottom:6px}
.feat p{font-size:.95rem;color:var(--ink-70)}

/* ---------- testimonials marquee ---------- */
.testi{overflow:hidden}
.testi-row{display:flex;gap:24px;width:max-content;animation:marq 46s linear infinite}
.testi:hover .testi-row{animation-play-state:paused}
@keyframes marq{to{transform:translateX(calc(-50% - 12px))}}
.tcard{width:380px;background:#fff;border-radius:24px;padding:30px;box-shadow:0 18px 44px -30px rgba(51,43,58,.4);flex:none}
.tcard .stars{color:var(--apricot);letter-spacing:2px;margin-bottom:12px}
.tcard p{font-size:1rem;margin-bottom:16px}
.tcard .who{display:flex;align-items:center;gap:12px}
.tcard .who .av{width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-family:var(--display);font-weight:700;font-size:1.15rem;color:var(--ink)}
.tcard .who b{font-family:var(--display);font-size:.98rem;display:block}
.tcard .who span{font-size:.82rem;color:var(--terracotta);font-weight:600}
@media(prefers-reduced-motion:reduce){.testi-row{animation:none;flex-wrap:wrap;width:auto;justify-content:center}}

/* ---------- visit / CTA ---------- */
.visit{background:var(--terracotta);color:#fff;border-radius:36px;padding:clamp(40px,6vw,72px);
  position:relative;overflow:hidden}
.visit h2{color:#fff;font-size:clamp(2rem,5vw,3.4rem)}
.visit p{opacity:.95;max-width:48ch;margin:16px 0 28px;font-size:1.1rem}
.visit .dots{position:absolute;inset:0;opacity:.12;
  background-image:radial-gradient(circle,#fff 2.5px,transparent 2.5px);background-size:30px 30px;pointer-events:none}
.visit-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:48px;align-items:center;position:relative}
.visit-facts{display:flex;flex-direction:column;gap:14px}
.vfact{display:flex;gap:14px;align-items:flex-start;background:rgba(255,255,255,.12);
  border-radius:16px;padding:16px 18px;backdrop-filter:blur(4px)}
.vfact svg{width:22px;height:22px;flex:none;margin-top:2px}
.vfact b{font-family:var(--display);display:block;font-size:1rem}
.vfact span{font-size:.9rem;opacity:.9}
.vfact a{text-decoration:underline;text-underline-offset:3px}
@media(max-width:820px){.visit-grid{grid-template-columns:1fr;gap:32px}}

/* ---------- footer ---------- */
footer.site{background:var(--greige);color:var(--ink-70);padding:70px 0 34px;border-top:1px solid rgba(51,43,58,.1)}
.foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px;margin-bottom:44px}
.foot-brand .fb{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.foot-brand .mark{width:46px;height:46px}
.brand-logo.foot{height:60px}
.foot-brand .name{font-family:var(--display);font-weight:800;font-size:1.3rem;color:var(--ink)}
.foot-brand .name .fv{color:var(--terracotta)}
.foot-brand p{max-width:34ch;font-size:.94rem;color:var(--ink-70)}
.foot-col h4{font-family:var(--display);color:var(--ink);font-size:1rem;margin-bottom:14px}
.foot-col a,.foot-col p{display:block;font-size:.93rem;color:var(--ink-70);margin-bottom:10px;transition:color .2s}
.foot-col a:hover{color:var(--terracotta)}
.foot-col .foot-fax{margin-top:-6px}
.foot-bottom{border-top:1px solid rgba(51,43,58,.14);padding-top:22px;display:flex;
  justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.84rem;color:var(--ink-45)}
@media(max-width:720px){.foot-top{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}

/* ---------- misc ---------- */
.i-terracotta{background:var(--terracotta)}.i-canary{background:var(--canary)}
.i-blush{background:var(--blush)}.i-bluegrey{background:var(--bluegrey)}
.i-apricot{background:var(--apricot)}.i-lavender{background:var(--lavender)}
.i-yellowgreen{background:var(--yellowgreen)}.i-sage{background:var(--sage)}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:12px;z-index:100;background:#fff;padding:10px 16px;border-radius:8px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:3px solid var(--terracotta);outline-offset:3px;border-radius:6px}

@media(max-width:560px){
  
  .statrow{grid-template-columns:1fr!important;gap:30px!important;padding:38px 24px!important}
}

/* ---- Mobile refinements ---- */
@media(max-width:640px){
  
  
  
  
  .why-statement{font-size:clamp(1.7rem,7vw,2.4rem)}
  .why-statement .pq{white-space:normal}
  .extras-cta{flex-direction:column;align-items:stretch;text-align:center}
  .extras-cta .btn{width:100%;justify-content:center}
  .theme-band{padding:30px 22px}
  .visit-grid,.connect-grid,.approach-intro,.la-head{gap:24px}
  .steam-row{gap:22px}
}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
  
  
  
}

/* ---------- flexible schedules ---------- */
.sched-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:14px}
@media(max-width:820px){.sched-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.sched-grid{grid-template-columns:1fr}}
.sched{background:#fff;border-radius:22px;padding:26px 24px;box-shadow:0 18px 40px -30px rgba(51,43,58,.4);
  border:1px solid rgba(51,43,58,.05);position:relative;transition:transform .35s var(--ease)}
.sched:hover{transform:translateY(-6px)}
.sched .tag{position:absolute;top:18px;right:18px;font-size:.66rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--terracotta)}
.sched .hrs{font-family:var(--display);font-weight:800;font-size:2.4rem;line-height:1;color:var(--ink)}
.sched .hrs small{font-size:.9rem;font-weight:600;color:var(--ink-70)}
.sched h3{font-size:1.15rem;margin:10px 0 6px}
.sched p{font-size:.92rem;color:var(--ink-70)}
.sched .swatch{width:48px;height:48px;border-radius:14px;margin-bottom:14px;display:grid;place-items:center}
.sched .swatch svg{width:26px;height:26px;color:var(--ink)}
.sched-note{margin-top:24px;background:var(--peach);border-radius:20px;padding:24px 28px;
  display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}
.sched-note svg{width:26px;height:26px;color:var(--terracotta);flex:none;margin-top:2px}
.sched-note b{font-family:var(--display);font-size:1.1rem;display:block;margin-bottom:4px}
.sched-note p{color:var(--ink-70);font-size:.95rem;max-width:68ch}

/* ---------- photo bands & frames ---------- */
.photo{border-radius:22px;overflow:hidden;position:relative;background:var(--greige);box-shadow:0 18px 44px -30px rgba(51,43,58,.4)}
.photo img{width:100%;height:100%;object-fit:cover;display:block}
.photo.ph::after{content:attr(data-label);position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;text-align:center;padding:22px;color:var(--ink-45);font-size:.86rem;
  background:repeating-linear-gradient(45deg,rgba(51,43,58,.04) 0 12px,rgba(51,43,58,.07) 12px 24px)}
.photo.ph{aspect-ratio:4/3}
/* inside the gallery, tiles are sized by the grid, not aspect-ratio */
.gallery .photo{aspect-ratio:auto;height:100%;min-height:0}
.gallery .photo.ph::after{position:absolute}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:150px;gap:14px;margin-top:14px}
.gallery .photo:nth-child(1){grid-column:span 2;grid-row:span 2}
.gallery .photo:nth-child(6){grid-column:span 2}
@media(max-width:760px){.gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:130px}
  .gallery .photo:nth-child(1){grid-column:span 2;grid-row:span 1}
  .gallery .photo:nth-child(6){grid-column:span 2}}

.prog-photo{width:100%;aspect-ratio:16/10;border-radius:16px;overflow:hidden;margin-bottom:0}

/* hero photo strip */




/* ---------- highlights ---------- */
.hl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:14px}
.hl{display:flex;gap:14px;align-items:flex-start;background:#fff;border-radius:18px;padding:20px 22px;
  box-shadow:0 14px 34px -28px rgba(51,43,58,.4)}
.hl .tick{width:34px;height:34px;border-radius:10px;background:var(--sage);display:grid;place-items:center;flex:none}
.hl .tick svg{width:19px;height:19px;color:var(--ink)}
.hl b{font-family:var(--display);font-size:1rem;display:block;margin-bottom:2px}
.hl span{font-size:.9rem;color:var(--ink-70)}

/* split with photo */
.imgsplit{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.imgsplit.rev .photo{order:2}
@media(max-width:820px){.imgsplit{grid-template-columns:1fr;gap:28px}.imgsplit.rev .photo{order:0}}

/* ---------- enrollment steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:14px;counter-reset:step}
.step{background:#fff;border-radius:20px;padding:28px 22px 24px;box-shadow:0 18px 40px -30px rgba(51,43,58,.4);
  position:relative;border:1px solid rgba(51,43,58,.05)}
.step::before{counter-increment:step;content:counter(step);position:absolute;top:-16px;left:22px;
  width:40px;height:40px;border-radius:50%;background:var(--terracotta);color:#fff;display:grid;place-items:center;
  font-family:var(--display);font-weight:800;font-size:1.1rem;box-shadow:0 8px 18px -8px rgba(195,113,99,.9)}
.step h4{font-family:var(--display);font-size:1.08rem;margin:16px 0 6px}
.step p{font-size:.9rem;color:var(--ink-70)}
@media(max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}

/* ---------- Learning in Action gallery ---------- */
.la-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap;margin-bottom:36px}
.la-head .sec-lead{max-width:42ch;margin-bottom:6px}
.la-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:16px}
.la-fig{position:relative;margin:0;border-radius:22px;overflow:hidden;box-shadow:0 20px 44px -30px rgba(51,43,58,.45);
  grid-column:span 1;grid-row:span 1}
.la-fig.la-a{grid-column:span 2;grid-row:span 2}
.la-fig.la-c{grid-row:span 2}
.la-fig img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.la-fig:hover img{transform:scale(1.06)}
.la-fig figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 18px 14px;color:#fff;font-family:var(--display);
  font-weight:600;font-size:1rem;background:linear-gradient(to top,rgba(51,43,58,.72),transparent)}
@media(max-width:820px){
  .la-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:170px}
  .la-fig.la-a{grid-column:span 2;grid-row:span 1}
  .la-fig.la-c{grid-row:span 1}
}
@media(max-width:480px){.la-grid{grid-template-columns:1fr;grid-auto-rows:200px}.la-fig.la-a{grid-column:span 1}}

/* ---------- Staying Connected (phone mockup) ---------- */
.connect-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center}
.connect-copy .connect-list{list-style:none;margin-top:20px;display:flex;flex-direction:column;gap:12px}
.connect-copy .connect-list li{display:flex;gap:12px;align-items:flex-start;font-size:1rem;color:var(--ink)}
.connect-copy .connect-list svg{width:20px;height:20px;color:var(--terracotta);flex:none;margin-top:3px}
.phone-mock{display:flex;justify-content:center}
.phone{position:relative;width:270px;background:#fff;border-radius:38px;padding:26px 18px 22px;
  box-shadow:0 30px 60px -30px rgba(51,43,58,.5);border:1px solid rgba(51,43,58,.06)}
.phone .notch{position:absolute;top:14px;left:50%;transform:translateX(-50%);width:70px;height:6px;
  border-radius:999px;background:var(--greige)}
.phone .app-logo{width:44px;height:44px;border-radius:13px;background:var(--terracotta);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:1.3rem;margin:16px 0 12px}
.phone .greet{font-family:var(--display);font-weight:700;font-size:1.15rem;margin-bottom:14px}
.phone .app-card{background:var(--cream);border-radius:18px;overflow:hidden;box-shadow:0 10px 24px -18px rgba(51,43,58,.5)}
.phone .app-card img{width:100%;height:150px;object-fit:cover;display:block}
.phone .app-card-body{padding:14px 15px 16px}
.phone .app-card-body small{font-size:.62rem;letter-spacing:.14em;color:var(--terracotta);font-weight:700}
.phone .app-card-body b{font-family:var(--display);font-size:1.05rem;display:block;margin:3px 0 2px}
.phone .app-card-body span{font-size:.8rem;color:var(--ink-70)}
.phone .app-dots{display:flex;gap:7px;justify-content:center;margin-top:16px}
.phone .app-dots i{width:7px;height:7px;border-radius:50%;background:var(--greige)}
.phone .app-dots i:first-child{background:var(--terracotta);width:20px;border-radius:999px}
@media(max-width:820px){.connect-grid{grid-template-columns:1fr;gap:36px}.phone-mock{order:2}}

/* ---------- STEAM card (unique graphic, replaces clip-art + day list) ---------- */
.approach-intro--single{display:block}
.approach-visual .steam-card{background:#fff;border-radius:28px;padding:44px 34px 38px;margin-top:34px;
  box-shadow:0 22px 50px -34px rgba(51,43,58,.45);border:1px solid rgba(51,43,58,.05);
  background-image:radial-gradient(circle at 12% 18%,rgba(234,170,108,.10),transparent 40%),radial-gradient(circle at 88% 82%,rgba(200,212,212,.14),transparent 42%)}
.steam-row{display:grid;grid-template-columns:repeat(5,1fr);gap:26px}
.steam-item{text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
.steam-tile{width:96px;height:96px;border-radius:26px;display:grid;place-items:center;
  font-family:var(--display);font-weight:800;font-size:3.2rem;color:var(--ink);
  box-shadow:0 16px 30px -14px rgba(51,43,58,.45);transition:transform .4s var(--ease-back)}
.steam-item:hover .steam-tile{transform:translateY(-7px) rotate(0deg) scale(1.04)!important}
.steam-item b{font-family:var(--display);font-size:1.18rem;color:var(--ink)}
.steam-def{font-size:.85rem;color:var(--ink-70);line-height:1.45;display:block}
.sdef-ic{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:8px;
  vertical-align:-8px;margin-right:4px}
.sdef-ic svg{width:15px;height:15px;color:var(--ink)}
/* Standout "One weekly theme" band — designed to wow */
.theme-band{margin-top:26px;background:linear-gradient(135deg,var(--plum),#8E64A8);border-radius:24px;
  padding:40px 30px;text-align:center;position:relative;overflow:hidden;
  box-shadow:0 26px 54px -30px rgba(195,113,99,.9)}
.theme-band .dots{position:absolute;inset:0;opacity:.14;pointer-events:none;
  background-image:radial-gradient(circle,#fff 2.5px,transparent 2.5px);background-size:28px 28px}
.theme-band-inner{position:relative}
.theme-band b{display:block;font-family:var(--display);font-weight:800;color:#fff;
  font-size:clamp(1.8rem,4vw,2.8rem);line-height:1.05;letter-spacing:-.02em}
.theme-band span{display:block;margin-top:8px;font-family:var(--script);font-weight:700;
  color:var(--canary);font-size:clamp(1.5rem,3.4vw,2.4rem)}
@media(max-width:760px){
  .steam-row{grid-template-columns:repeat(2,1fr);gap:28px}
  .steam-item:last-child{grid-column:1 / -1}
}
@media(max-width:420px){.steam-row{grid-template-columns:1fr}.steam-item:last-child{grid-column:auto}}

/* ---------- Grow with us (detailed program cards) ---------- */
.grow-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
.grow{background:#fff;border-radius:24px;overflow:hidden;box-shadow:0 20px 44px -30px rgba(51,43,58,.4);
  border:1px solid rgba(51,43,58,.05);display:flex;flex-direction:column;
  transition:transform .4s var(--ease),box-shadow .4s}
.grow:hover{transform:translateY(-6px);box-shadow:0 30px 54px -30px rgba(51,43,58,.45)}
.grow-photo{width:100%;aspect-ratio:3/2;overflow:hidden;position:relative;flex:none}
.grow-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease)}
.grow-photo img.pos-down{object-position:center 32%}
.grow:hover .grow-photo img{transform:scale(1.05)}
.grow-photo.ph{background:repeating-linear-gradient(45deg,rgba(51,43,58,.04) 0 14px,rgba(51,43,58,.07) 14px 28px);
  display:grid;place-items:center}
.grow-photo.ph .ph-note{font-size:.8rem;color:var(--ink-45);text-align:center;padding:16px;line-height:1.4}
.grow-meta{display:flex;flex-direction:column;flex:1;padding:24px 26px 26px}
.grow-meta .age{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--terracotta);font-weight:700}
.grow-meta h3{font-family:var(--display);font-size:1.35rem;margin:4px 0 8px;line-height:1.1}
.grow .pmeta{margin-bottom:12px}
.grow .pmeta span{font-size:.72rem;font-weight:600;padding:.28em .7em;border-radius:999px;background:var(--cream);color:var(--ink-70)}
.grow .pmeta span.season{background:var(--peach);color:var(--terracotta-deep)}
.grow-desc{font-size:.95rem;color:var(--ink-70);line-height:1.5;margin-bottom:14px}
.grow-list{list-style:none;margin:0 0 18px;display:flex;flex-direction:column;gap:8px}
.grow-list li{position:relative;padding-left:22px;font-size:.88rem;color:var(--ink-70);line-height:1.45}
.grow-list li::before{content:"";position:absolute;left:0;top:.5em;width:9px;height:9px;border-radius:50%;
  background:var(--terracotta);opacity:.35}
.grow-list li b{color:var(--ink);font-weight:700}
.grow-link{margin-top:auto;font-weight:600;font-size:.92rem;color:var(--terracotta);transition:gap .2s}
.grow-link:hover{text-decoration:underline;text-underline-offset:3px}
@media(max-width:960px){.grow-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.grow-grid{grid-template-columns:1fr}}

/* ---------- Tour request form (mirrors reference fields) ---------- */
.tour-form{display:flex;flex-direction:column;gap:14px}
.tour-form .tf{display:flex;flex-direction:column;gap:6px;font-size:.82rem;font-weight:600;color:#fff}
.tour-form .tf-row{display:flex;gap:14px}
.tour-form .tf-row .tf{flex:1}
.tour-form input,.tour-form select,.tour-form textarea{
  font-family:var(--body);font-size:1rem;font-weight:400;color:var(--ink);
  padding:.8em 1em;border-radius:12px;border:0;background:#fff;width:100%}
.tour-form textarea{resize:vertical;min-height:84px}
.tour-form input::placeholder,.tour-form textarea::placeholder{color:var(--ink-45)}
.tour-form input:focus,.tour-form select:focus,.tour-form textarea:focus{
  outline:3px solid rgba(255,255,255,.6);outline-offset:1px}
.tour-form .btn-ink{margin-top:4px}
.tour-form .tf-note{color:rgba(255,255,255,.9);font-size:.8rem;font-weight:400}
@media(max-width:520px){.tour-form .tf-row{flex-direction:column;gap:14px}}

/* ---------- Beyond the classroom (enticing teaser) ---------- */
.extras-head{max-width:none;margin-bottom:36px}
.extras-head .sec-title{max-width:none}
.extras-head .sec-lead{max-width:72ch}
/* ---------- Beyond the classroom — Layout A (clean list rows) ---------- */
.extras-rows{display:flex;flex-direction:column;border-radius:20px;overflow:hidden;
  border:1px solid rgba(51,43,58,.09);margin-bottom:40px;box-shadow:0 20px 44px -34px rgba(51,43,58,.35)}
.xrow{display:grid;grid-template-columns:auto 260px 1fr;gap:22px;align-items:center;padding:20px 26px;background:#fff;
  transition:background .3s var(--ease)}
.xrow:nth-child(even){background:var(--card)}
.xrow:hover{background:var(--peach)}
.xrow .xic{width:46px;height:46px;border-radius:13px;flex:none;display:grid;place-items:center}
.xrow .xic svg{width:23px;height:23px;color:var(--ink)}
.xrow b{font-family:var(--display);font-weight:700;font-size:1.05rem;color:var(--ink);line-height:1.2}
.xrow p{font-size:.9rem;color:var(--ink-70);line-height:1.5;margin:0}
@media(max-width:760px){
  .xrow{grid-template-columns:auto 1fr;gap:16px;padding:18px 20px}
  .xrow p{grid-column:2}
}
/* Simplified enrichment names (icon + name only) */
.extras-names{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:40px}
.xname{display:flex;align-items:center;gap:14px;background:#fff;border-radius:16px;padding:18px 22px;
  border:1px solid rgba(51,43,58,.06);box-shadow:0 12px 30px -24px rgba(51,43,58,.4);
  transition:transform .3s var(--ease),box-shadow .3s}
.xname:hover{transform:translateY(-4px);box-shadow:0 20px 40px -28px rgba(51,43,58,.5)}
.xname .xic{width:46px;height:46px;border-radius:13px;flex:none;display:grid;place-items:center}
.xname .xic svg{width:23px;height:23px;color:var(--ink)}
.xname b{font-family:var(--display);font-weight:700;font-size:1.02rem;color:var(--ink);line-height:1.2}
@media(max-width:820px){.extras-names{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.extras-names{grid-template-columns:1fr}}
.extras-cta{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;
  background:var(--peach);border-radius:24px;padding:32px 40px}
.extras-cta p{font-family:var(--display);font-weight:600;font-size:1.25rem;color:var(--ink);max-width:52ch;margin:0}
.extras-cta .btn{flex:none;align-self:center;height:54px;white-space:nowrap}
@media(max-width:600px){.extras-cta{flex-direction:column;align-items:flex-start;padding:26px 24px}
  .extras-cta p{font-size:1.1rem}}

/* ---------- School-age sub-programs (boxed) ---------- */
.subprograms{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.subprog{background:var(--cream);border-radius:14px;padding:14px 16px;border:1px solid rgba(51,43,58,.06)}
.subprog b{font-family:var(--display);font-size:1rem;color:var(--ink);display:block;margin-bottom:3px}
.subprog span{font-size:.86rem;color:var(--ink-70);line-height:1.45}



/* ---------- Ratio bars (Small groups... your little one is seen) ---------- */
.ratio-block{margin-top:44px;display:grid;grid-template-columns:1fr 1.1fr;gap:44px;align-items:center;
  background:rgba(255,255,255,.55);border-radius:24px;padding:36px 40px;border:1px solid rgba(51,43,58,.06)}
.ratio-head h3{font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.1;
  letter-spacing:-.02em;color:var(--ink);margin-bottom:12px}
.ratio-head p{font-size:.98rem;color:var(--ink-70);line-height:1.55}
.ratio-bars{display:flex;flex-direction:column;gap:16px}
.rbar-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.rbar-top b{font-family:var(--display);font-weight:700;font-size:.98rem;color:var(--ink)}
.rbar-top span{font-size:.88rem;color:var(--terracotta);font-weight:600}
.rtrack{height:14px;border-radius:999px;background:rgba(51,43,58,.1);overflow:hidden}
.rtrack i{display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,var(--terracotta-deep),var(--apricot));transition:width 1.1s var(--ease)}
@media(max-width:820px){.ratio-block{grid-template-columns:1fr;gap:26px;padding:30px 26px}}

/* ---------- Core Values (colored columns) ---------- */
/* ---------- Core Values — Layout C (two-column list) ---------- */
.values-list{columns:2;column-gap:48px;margin-top:44px}
.vdef{break-inside:avoid;display:flex;gap:16px;align-items:flex-start;padding:18px 0;
  border-bottom:1px solid rgba(51,43,58,.1)}
.vdef:first-child,.vdef:nth-child(4){padding-top:0}
.vdef-ic{width:44px;height:44px;border-radius:13px;background:#fff;display:grid;place-items:center;flex:none;
  box-shadow:0 8px 16px -10px rgba(51,43,58,.3)}
.vdef-ic svg{width:22px;height:22px;color:var(--terracotta)}
.vdef b{font-family:var(--display);font-weight:700;font-size:1.02rem;color:var(--ink);display:block;margin-bottom:3px;line-height:1.2}
.vdef span{font-size:.88rem;color:var(--ink-70);line-height:1.45}
.values-note{margin-top:26px;display:flex;gap:16px;align-items:center;background:var(--greige);border-radius:18px;padding:20px 26px}
.values-note svg{width:26px;height:26px;color:var(--terracotta);flex:none}
.values-note p{font-size:.98rem;color:var(--ink-70);margin:0}
@media(max-width:640px){.values-list{columns:1}.vdef:nth-child(4){padding-top:18px}}

/* ---------- Health & Safety ---------- */
/* ---------- Health & Safety — Layout A (clean list rows) ---------- */
.safety-rows{display:flex;flex-direction:column;border-radius:20px;overflow:hidden;margin-top:44px;
  border:1px solid rgba(51,43,58,.09);box-shadow:0 20px 44px -34px rgba(51,43,58,.3)}
.safety-row{display:grid;grid-template-columns:auto 240px 1fr;gap:22px;align-items:center;padding:22px 26px;
  background:rgba(255,255,255,.85);transition:background .3s var(--ease)}
.safety-row:nth-child(even){background:rgba(255,255,255,.55)}
.safety-row:hover{background:#fff}
.safety-row .safety-ic{width:48px;height:48px;border-radius:14px;background:#fff;display:grid;place-items:center;flex:none;
  box-shadow:0 8px 16px -10px rgba(51,43,58,.3)}
.safety-row .safety-ic svg{width:24px;height:24px;color:var(--terracotta)}
.safety-row h3{font-family:var(--display);font-weight:700;font-size:1.08rem;color:var(--ink);margin:0;line-height:1.15}
.safety-row p{font-size:.9rem;color:var(--ink-70);line-height:1.5;margin:0}
@media(max-width:760px){
  .safety-row{grid-template-columns:auto 1fr;gap:16px;padding:18px 20px}
  .safety-row p{grid-column:2}
}

/* ---------- Reusable section CTA ---------- */
.section-cta{margin-top:40px;text-align:center}
@media(max-width:640px){.section-cta .btn{width:100%;justify-content:center}}

/* ---------- Child development domains (NJ early learning pathway) ---------- */
.domains{margin-top:34px;background:#fff;border-radius:24px;padding:40px 36px;
  box-shadow:0 22px 50px -34px rgba(51,43,58,.4);border:1px solid rgba(51,43,58,.05)}
.domains-head{max-width:70ch;margin-bottom:30px}
.domains-head h3{font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.1;
  letter-spacing:-.02em;color:var(--ink);margin-bottom:12px}
.domains-head p{font-size:1rem;color:var(--ink-70);line-height:1.55}
.domains-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.domain{background:var(--cream);border-radius:16px;padding:22px 20px;transition:transform .3s var(--ease)}
.domain:hover{transform:translateY(-4px)}
.domain .domain-ic{width:44px;height:44px;border-radius:12px;background:#fff;display:grid;place-items:center;margin-bottom:12px}
.domain .domain-ic svg{width:22px;height:22px;color:var(--terracotta)}
.domain h4{font-family:var(--display);font-weight:700;font-size:1rem;color:var(--ink);margin-bottom:6px}
.domain p{font-size:.85rem;color:var(--ink-70);line-height:1.45}
@media(max-width:900px){.domains-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.domains-grid{grid-template-columns:1fr}}

/* ---------- STEAM banner (animated poster) ---------- */
.steam-banner{margin-top:30px;background:#fff;border-radius:26px;padding:52px 28px;
  box-shadow:0 22px 50px -34px rgba(51,43,58,.4);border:1px solid rgba(51,43,58,.05);overflow:hidden;
  display:flex;align-items:center;justify-content:center;gap:clamp(14px,3.5vw,56px);position:relative;min-height:260px}
.hf-stl{position:relative;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  animation:hfbob 3s ease-in-out infinite;will-change:transform;z-index:2}
.hf-stl b{font-family:var(--display);font-weight:800;font-size:clamp(3.4rem,8.5vw,6.4rem);line-height:1;display:block}
.steam-obj-wrap{width:clamp(64px,10vw,116px);height:clamp(64px,10vw,116px);display:block}
.steam-obj-wrap .hf-face{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 10px 16px rgba(51,43,58,.18))}
.hf-stl.s1{animation-delay:.2s}.hf-stl.s2{animation-delay:.4s}.hf-stl.s3{animation-delay:.6s}.hf-stl.s4{animation-delay:.8s}
@keyframes hfbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
/* Scattered decorative floating icons around the banner */
.hf-fl{position:absolute;width:34px;height:34px;pointer-events:none;opacity:.7;will-change:transform;z-index:1}
.hf-fl svg{width:100%;height:100%}
.hf-fl.sc1{top:16px;left:5%;animation:flt-a 4.6s ease-in-out infinite}
.hf-fl.sc2{top:12px;left:30%;animation:flt-b 5.4s ease-in-out infinite}
.hf-fl.sc3{top:20px;right:26%;animation:flt-a 5s ease-in-out infinite .3s}
.hf-fl.sc4{top:14px;right:5%;width:40px;height:40px;animation:flt-b 6s ease-in-out infinite}
.hf-fl.sc5{top:44%;right:2.5%;width:40px;height:40px;animation:flt-a 5.6s ease-in-out infinite .2s}
.hf-fl.sc6{bottom:18px;right:22%;animation:flt-b 5.2s ease-in-out infinite}
.hf-fl.sc7{bottom:14px;right:6%;animation:flt-a 4.8s ease-in-out infinite}
.hf-fl.sc8{bottom:16px;left:28%;animation:flt-b 5.8s ease-in-out infinite .3s}
.hf-fl.sc9{bottom:20px;left:5%;animation:flt-a 5.4s ease-in-out infinite}
.hf-fl.sc10{top:44%;left:2.5%;animation:flt-b 6.2s ease-in-out infinite .2s}
@keyframes flt-a{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-9px) rotate(8deg)}}
@keyframes flt-b{0%,100%{transform:translateY(0) rotate(6deg)}50%{transform:translateY(9px) rotate(-8deg)}}
@media(prefers-reduced-motion:reduce){.hf-stl,.hf-fl{animation:none!important}}
@media(max-width:640px){.hf-fl{display:none}.steam-banner{min-height:0;padding:38px 16px}}

/* STEAM definitions row (poster style) */
.steam-defs{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;margin-top:22px;
  background:rgba(255,255,255,.5);border-radius:20px;padding:26px 20px;border:1px solid rgba(51,43,58,.06)}
.sdef{text-align:center;padding:0 16px;position:relative}
.sdef+.sdef::before{content:"";position:absolute;left:0;top:8%;height:84%;width:1px;background:rgba(51,43,58,.12)}
.sdef-l{font-family:var(--display);font-weight:800;font-size:1.6rem;display:block;line-height:1}
.sdef b{font-family:var(--display);font-weight:700;font-size:.9rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--terracotta-deep);display:block;margin:8px 0 8px}
.sdef p{font-size:.86rem;color:var(--ink-70);line-height:1.45}
@media(max-width:820px){.steam-defs{grid-template-columns:repeat(2,1fr);gap:20px}
  .sdef+.sdef::before{display:none}.sdef:last-child{grid-column:1/-1}}
@media(max-width:480px){.steam-defs{grid-template-columns:1fr}.sdef:last-child{grid-column:auto}}

/* Integrate / NJ domains two-column layout */
.integrate{margin-top:34px;background:#fff;border-radius:24px;padding:40px 36px;
  box-shadow:0 22px 50px -34px rgba(51,43,58,.4);border:1px solid rgba(51,43,58,.05)}
.integrate-head{max-width:74ch;margin-bottom:30px}
.integrate-head h3{font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.1;
  letter-spacing:-.02em;color:var(--ink);margin-bottom:12px}
.integrate-head p{font-size:1rem;color:var(--ink-70);line-height:1.6}
.dom-cols{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.dom-col{background:var(--cream);border-radius:20px;padding:28px 26px}
.dom-col:first-child{background:var(--bluegrey)}
.dom-col:last-child{background:var(--sage)}
.dom-col-top{display:flex;align-items:center;gap:12px;margin-bottom:4px}
.dom-badge{font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
  padding:.32em .8em;border-radius:999px;background:#fff;color:var(--terracotta-deep)}
.dom-col-top h4{font-family:var(--display);font-weight:800;font-size:1.2rem;color:var(--ink)}
.dom-sub{font-size:.86rem;color:var(--ink-70);margin-bottom:16px}
.dom-list{list-style:none;display:flex;flex-direction:column;gap:12px}
.dom-list.two{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px}
.dom-list li{position:relative;padding-left:18px}
.dom-list li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;border-radius:50%;background:var(--terracotta);opacity:.5}
.dom-list li b{font-family:var(--display);font-weight:700;font-size:.95rem;color:var(--ink);display:block;line-height:1.25}
.dom-list li span{font-size:.84rem;color:var(--ink-70);line-height:1.4}
@media(max-width:820px){.dom-cols{grid-template-columns:1fr}.dom-list.two{grid-template-columns:1fr}}

@media(prefers-reduced-motion:reduce){.steam-banner .stl,.steam-banner .fl{animation:none!important}}

/* ---------- Whole-child seamless grid (Modern 2) ---------- */
.wholechild{margin-top:34px}
.wc-head{max-width:none;margin-bottom:28px}
.wc-head h3{font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.1;
  letter-spacing:-.02em;color:var(--ink);margin-bottom:12px;max-width:none}
.wc-head p{font-size:1.02rem;color:var(--ink-70);line-height:1.6;max-width:none;text-align:left}
.wc-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;background:rgba(51,43,58,.08);
  border-radius:22px;overflow:hidden;box-shadow:0 24px 50px -36px rgba(51,43,58,.4)}
.wc-cell{background:#fff;padding:30px 22px;text-align:center;transition:background .3s var(--ease)}
.wc-cell:hover{background:var(--card)}
.wc-ico{width:56px;height:56px;border-radius:18px;margin:0 auto 16px;display:grid;place-items:center;
  transition:transform .35s var(--ease-back)}
.wc-cell:hover .wc-ico{transform:translateY(-4px) rotate(-5deg)}
.wc-ico svg{width:27px;height:27px;color:var(--ink)}
.wc-cell b{font-family:var(--display);font-weight:700;font-size:1.05rem;color:var(--ink);display:block;margin-bottom:6px;line-height:1.15}
.wc-cell p{font-size:.85rem;color:var(--ink-70);margin:0;line-height:1.4}
.wc-foot{margin-top:26px;display:flex;align-items:center;gap:14px;font-size:.92rem;color:var(--ink-70);flex-wrap:wrap}
.wc-badge{background:var(--sage);color:var(--sage-accent);font-family:var(--display);font-weight:700;font-size:.72rem;
  letter-spacing:.05em;text-transform:uppercase;padding:.42em .95em;border-radius:999px}
@media(max-width:900px){.wc-grid{grid-template-columns:repeat(2,1fr)}.wc-cell:last-child{grid-column:1/-1}}
@media(max-width:480px){.wc-grid{grid-template-columns:1fr}.wc-cell:last-child{grid-column:auto}}

/* ---------- Subpage hero (Core Values, Health & Safety) ---------- */
.subpage-hero{padding:calc(clamp(70px,10vw,130px) + 60px) 0 clamp(30px,5vw,54px);background:var(--cream)}
.subpage-hero .eyebrow{display:block;margin-bottom:14px}
.subpage-title{font-family:var(--display);font-weight:800;font-size:clamp(2.4rem,6vw,4.4rem);
  line-height:1.02;letter-spacing:-.03em;color:var(--ink);max-width:20ch}

/* ---------- Our Mission section (full-width band) ---------- */
.mission-band{position:relative;max-width:900px;margin:0 auto;text-align:center;padding:8px 0}
.mission-band .mission-quote{position:absolute;font-family:var(--display);font-weight:800;
  font-size:clamp(5rem,10vw,8rem);color:rgba(195,113,99,.18);top:-30px;left:0;right:0;line-height:1;pointer-events:none}
.mission-band .eyebrow{position:relative;display:block;margin-bottom:16px}
.mission-band p{position:relative;font-family:var(--display);font-weight:600;
  font-size:clamp(1.35rem,2.8vw,2rem);line-height:1.35;color:var(--ink);margin:0}

/* ---------- Stats row (restored) ---------- */
.statrow{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;text-align:center;
  background:#fff;border-radius:28px;padding:44px 40px;max-width:900px;margin:0 auto;
  box-shadow:0 24px 50px -34px rgba(51,43,58,.4);border:1px solid rgba(51,43,58,.05)}
.stat-num{font-family:var(--display);font-weight:800;font-size:clamp(2.6rem,6vw,4rem);
  color:var(--terracotta);line-height:1}
.stat-label{color:var(--ink-70);margin-top:6px;font-size:1rem}

/* =============================================================
   TAGS · APP · CAREERS · QUOTES · STEPS
   ============================================================= */
.tags{display:flex;flex-wrap:wrap;gap:10px}
.tag{display:inline-flex;align-items:center;gap:10px;background:var(--tw);border-radius:999px;
  padding:.68em 1.15em;font-size:.92rem;font-weight:500;color:var(--ink)}
.tag i{width:8px;height:8px;flex:none;border-radius:50%;background:var(--tc)}

.app{display:grid;grid-template-columns:238px 1fr;gap:clamp(26px,4vw,52px);align-items:center}
.phone{width:100%;max-width:238px;border:1.5px solid var(--lilac-3);border-radius:28px;padding:16px 14px 18px;
  background:var(--paper);box-shadow:var(--lift)}
.phone .notch{width:60px;height:4px;border-radius:99px;background:var(--rule);margin:0 auto 14px}
.phone .greet{font-family:var(--display);font-weight:600;font-size:1.05rem;margin-bottom:12px}
.phone figure{border-radius:14px;overflow:hidden;background:var(--lilac-1)}
.phone img{width:100%;aspect-ratio:4/3;object-fit:cover}
.phone figcaption{padding:12px 13px}
.phone figcaption small{font-size:.58rem;letter-spacing:.14em;font-weight:700;color:var(--c)}
.phone figcaption b{display:block;font-family:var(--display);font-size:.98rem;font-weight:600;margin:4px 0 2px}
.phone figcaption span{font-size:.73rem;color:var(--ink-3)}
.ticks{list-style:none;display:grid;gap:12px;margin-bottom:26px}
.ticks li{display:flex;gap:12px;align-items:flex-start;color:var(--ink-2)}
.ticks svg{width:17px;height:17px;flex:none;margin-top:5px;stroke:var(--c);fill:none;stroke-width:2.6}

.job{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-xl);
  padding:clamp(24px,3.2vw,36px);box-shadow:var(--lift)}
.job-top{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:flex-start;
  padding-bottom:22px;border-bottom:1px solid var(--rule);margin-bottom:26px}
.job-top h3{font-size:clamp(1.3rem,2.4vw,1.75rem);margin-bottom:10px}
.job-pay{text-align:right}
.job-pay b{display:block;font-family:var(--display);font-size:1.5rem;font-weight:600;
  font-variant-numeric:tabular-nums;color:var(--c)}
.job-pay span{font-size:.8rem;color:var(--ink-3)}
.job-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,36px)}
.job-cols h4{font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3);font-weight:700;
  font-family:var(--body);margin-bottom:13px}
.job-cols ul{list-style:none;display:grid;gap:9px}
.job-cols li{font-size:.91rem;color:var(--ink-2);position:relative;padding-left:18px}
.job-cols li::before{content:"";position:absolute;left:0;top:.56em;width:8px;height:8px;border-radius:50%;
  background:var(--c);opacity:.35}
.job-foot{margin-top:28px;padding-top:24px;border-top:1px solid var(--rule);display:flex;gap:18px;
  align-items:center;flex-wrap:wrap}
.job-foot p{font-size:.92rem;color:var(--ink-2)}

.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.quote{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-lg);padding:28px 26px;
  box-shadow:var(--lift);display:flex;flex-direction:column}
.quote blockquote{font-family:var(--display);font-weight:400;font-size:1.06rem;line-height:1.45;
  letter-spacing:-.01em;margin-bottom:20px;flex:1}
.quote .by{font-size:.86rem;color:var(--ink-2)}
.quote .by .rt{color:var(--gold);letter-spacing:2px;font-size:.88rem;margin-bottom:8px}
.quote .by b{display:block;font-weight:600;color:var(--ink);margin-bottom:2px}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.stepc{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-lg);padding:26px 24px}
.stepc em{font-style:normal;font-family:var(--body);font-weight:700;font-size:.66rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--c);display:block;margin-bottom:12px}
.stepc h4{font-size:1.08rem;margin-bottom:8px}
.stepc p{font-size:.89rem;color:var(--ink-2);line-height:1.55}


/* =============================================================
   V7 adjustments — V2's components in the lighter palette
   ============================================================= */
.hero h1{font-family:var(--serif);font-weight:600}   /* the hero keeps its serif */
.script-accent{font-family:var(--script);color:var(--plum);font-weight:700;font-size:1.16em;letter-spacing:0}

/* cards: lighter borders, softer shadows */
.why,.sched,.grow,.trust,.tcard,.step,.sdef,.wc-cell,.xname,.safety-row,.vdef{border-color:var(--rule)}
.why:hover,.sched:hover,.grow:hover,.xname:hover{box-shadow:var(--lift)}

/* the one dark block V2 used, restated in deep plum */
.ratio-block{background:#3A2E44;color:#fff}
.ratio-head h3,.rbar-top b{color:#fff}
.ratio-head p{color:rgba(255,255,255,.76)}
.ratio-head .script-accent{color:var(--sage-3)}
.rbar-top span{color:var(--sage-3)}
.rtrack{background:rgba(255,255,255,.16)}
.rtrack i{background:linear-gradient(90deg,var(--lilac-3),var(--sage-3))}

/* eyebrows, rules and stars */
.eyebrow{color:var(--plum)}
.eyebrow::before{background:var(--sage-3)}
.stars,.rt{color:var(--gold)}

/* footer */
footer.site{background:#3A2E44;color:rgba(255,255,255,.78)}
.foot-col h4{color:var(--sage-3)}
.foot-brand .fb{background:#fff;border-radius:16px;padding:10px 14px;display:inline-block}

/* form fields on the plum slab */
.tf input,.tf select,.tf textarea{border-radius:12px}
.tf input:focus,.tf select:focus,.tf textarea:focus{outline:2px solid var(--sage-3);outline-offset:1px}

/* chips, used by the Careers listing */
.px-meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.chip{font-size:.75rem;font-weight:600;padding:.4em .9em;border-radius:999px;border:1px solid var(--rule);
  color:var(--ink-70);background:var(--paper);white-space:nowrap}
.chip.k{border-color:transparent;background:var(--c,var(--plum));color:#fff}

/* =============================================================
   Responsive — header, figures bar and mobile chrome
   ============================================================= */
@media(max-width:900px){
  .nav,.bar .btn,.callnum{display:none}
  .burger{display:block}
  .mbar{display:flex}
  body{padding-bottom:70px}
  .railstats-in{grid-template-columns:1fr 1fr}
  .st:nth-child(3),.st:nth-child(4){border-top:1px solid var(--rule)}
  .st:nth-child(3){border-left:0}
}
@media(max-width:720px){
  body{font-size:16px}
  .menu.wide{min-width:0}
}
@media(max-width:430px){
  .railstats-in{grid-template-columns:1fr}
  .st:nth-child(n+2){border-left:0;border-top:1px solid var(--rule)}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  html.js .reveal{opacity:1;transform:none}
}
@media print{.masthead,.mbar,.totop,.scrim,.drawer,.rainbow,.dots{display:none!important}}


/* =============================================================
   V7.1 — later adjustments
   ============================================================= */
.is-hidden{display:none!important}

/* the ratio panel takes the same purple as the contact slab */
.ratio-block{background:var(--terracotta)}
.rtrack{background:rgba(255,255,255,.22)}
.rtrack i{background:linear-gradient(90deg,#E7DAF2,var(--sage-3))}

/* footer text was inheriting V2's dark ink on the dark ground */
footer.site{color:rgba(255,255,255,.82)}
.foot-brand p{color:rgba(255,255,255,.78)}
.foot-col a,.foot-col p{color:rgba(255,255,255,.8)}
.foot-col a:hover{color:#fff}
.foot-bottom{border-top-color:rgba(255,255,255,.18);color:rgba(255,255,255,.66)}
.foot-bottom span{color:rgba(255,255,255,.66)}

/* the review marquee fades at both edges instead of being chopped */
.testi-fallback{-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}

/* =============================================================
   V7.2 — phone and tablet pass
   ============================================================= */

/* The enrollment steps were re-declared after their own media queries, so they
   stayed four-across on a phone and steps 3 and 4 sat off the screen. */
@media(max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}

/* Justified text opens rivers once the column is narrow. */
/* (superseded by the justification rule in V7.3) */

/* Small print that still reads on a phone. */
@media(max-width:900px){
  .grow-meta .age{font-size:.78rem}
  .grow .pmeta span,.sched .tag,.prog .pmeta span{font-size:.76rem}
  .eyebrow{font-size:.78rem;letter-spacing:.13em}
}

/* Touch targets: a finger needs more than a text baseline to aim at. */
@media(hover:none){
  .grow-link{display:inline-block;padding:7px 0}
  .foot-col a,.foot-col p{padding-block:3px}
  .drawer nav > a,.drawer .acc{min-height:48px}
  .dots button{position:relative;width:30px;height:30px;background:transparent}
  .dots button::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;
    margin:-4px 0 0 -4px;border-radius:999px;background:rgba(255,255,255,.45);transition:.28s var(--ease)}
  .dots button[aria-current="true"]::after{background:#fff;width:26px;margin-left:-13px}
  .mbar a{padding:.95em 1em}
}

/* Phone refinements */
@media(max-width:560px){
  .foot-top{grid-template-columns:1fr;gap:30px;margin-bottom:34px}
  .foot-bottom{flex-direction:column;align-items:flex-start;gap:8px}
  .totop{display:none}            /* the fixed call/tour bar already owns this corner */
}
@media(max-width:430px){
  .hero-act{flex-direction:column;align-items:stretch}
  .hero-act .btn{justify-content:center;width:100%}
}
@media(hover:none){
  /* the attribute rule outranks the plain one, so the active dot needs restating */
  .dots button[aria-current="true"]{background:transparent;width:30px}
}

/* =============================================================
   V7.3 — one type scale, one justification rule, STEAM on phones
   ============================================================= */

/* The STEAM poster is a five-up row. On a phone the icons held a 64px floor
   while the letters ran at 8.5vw, so the row outgrew the card and the M was
   clipped. Both now scale with the viewport. */
@media(max-width:640px){
  .steam-banner{gap:clamp(6px,2vw,14px);padding:30px 12px}
  .hf-stl{gap:6px}
  .steam-obj-wrap{width:clamp(38px,12vw,64px);height:clamp(38px,12vw,64px)}
  .hf-stl b{font-size:clamp(1.9rem,10vw,3.4rem)}
}
@media(max-width:380px){
  .steam-obj-wrap{width:clamp(34px,11vw,48px);height:clamp(34px,11vw,48px)}
  .hf-stl b{font-size:clamp(1.7rem,9vw,2.4rem)}
}

/* ---- the type scale -------------------------------------------------
   Four steps for body copy, used at every width. The page was carrying
   thirteen near-identical sizes between 13.6px and 18.4px.             */
:root{
  --fs-lead:1.125rem;   /* 18.0px — section leads and section intros */
  --fs-body:.95rem;     /* 15.2px — a block's main paragraph */
  --fs-sm:.9rem;        /* 14.4px — supporting copy inside cards and rows */
  --fs-xs:.82rem;       /* 13.1px — captions and fine print */
  --band-cream:#FBF8F3; /* the warm band, in place of the sage wash */
}
@media(max-width:560px){:root{--fs-lead:1.0625rem}}   /* 17px, so leads don't shout */

.sec-lead,.hero-lead,.visit p,.extras-head p,.wc-head p{font-size:var(--fs-lead);line-height:1.62}
.tcard p,.values-note p,.domains-head p,.sched-note p,.prog .pdesc,.grow-desc,.day .body p,
.connect-copy .connect-list li,.feat p,.ratio-head p,.job-foot p{
  font-size:var(--fs-body);line-height:1.6}
.why p,.trust span,.lang-note span,.approach-visual figcaption span,.sched p,.step p,.safety-row p,
.vdef span,.subprog span,.xrow p,.hl span,.vfact span,.foot-brand p,.foot-col a,.foot-col p,
.grow-list li,.domain p,.stepc p,.quote .by,.sdef p,.wc-cell p,.wc-cell span{
  font-size:var(--fs-sm);line-height:1.55}
.hero-fine,.st > span,.tour-form .tf-note,.phone .app-card-body span,.grow-photo.ph .ph-note{
  font-size:var(--fs-xs);line-height:1.5}

/* ---- justification --------------------------------------------------
   One rule, every width: body copy is ragged-right. Justification was
   only ever on the section leads, and on a phone it opened gaps wide
   enough to read as a bug (one line of the Approach lead carried three
   words across the full column). Headings and the little centred cards
   keep their own alignment.                                            */
.sec-lead,.why-sub,.wc-head p,.extras-head p,.domains-head p,.ratio-head p,.visit p,
.tcard p,.grow-desc,.why p,.sched p,.step p,.safety-row p,.vdef span,.subprog span,.xrow p,
.values-note p,.sched-note p,.lang-note span,.foot-brand p,.grow-list li,.hero-lead,.hero-fine,
.feat p,.day .body p,.domain p,.trust span,.vfact span,.job-foot p,.stepc p{
  text-align:left;hyphens:auto;-webkit-hyphens:auto}

/* a touch of shadow keeps the hero copy legible now that the veil is lighter */
.hero-lead,.hero-fine{text-shadow:0 1px 14px rgba(30,22,38,.55)}
.kicker{text-shadow:0 1px 8px rgba(30,22,38,.4)}

/* =============================================================
   V7.4 — one background rhythm for the whole page
   Four beats, repeated: lilac · white · sage · white.
   The tints are the two palette washes at their lightest, so no
   section shouts and the white bands give the page air.
   ============================================================= */
#mission,#values,#included      {background:var(--lilac-1)}
#approach,#connected,#enroll    {background:var(--band-cream)}
.known,#programs,#safety,
#schedules,#reviews,#faq,#visit,
#careers                        {background:var(--paper)}

/* On the white bands the cards were a 55–60% white veil, which disappears.
   They get a real surface instead. */
.known .why{background:#fff;box-shadow:0 18px 40px -30px rgba(51,43,58,.34)}
.known .trust-strip{background:var(--lilac-1);border-color:var(--rule)}
#safety .safety-row{background:#fff}
#safety .safety-row:nth-child(even){background:var(--lilac-1)}

/* =============================================================
   V7.6 — the cream replaces sage everywhere it was a surface
   Two weights: the band cream for large panels and hovers, and a
   slightly deeper one for the small fills (chips, badges, tick
   squares, avatars) that have to stay visible on a white card.
   Icons and the rainbow rule keep their own colours.
   ============================================================= */
:root{--cream-2:#F6F0E4}

/* panels, notes and hovers */
.sched-note,.extras-cta,.dom-col:last-child{background:var(--band-cream)}
.xrow:hover{background:var(--band-cream)}

/* small fills that need to read against white */
.trust .tick,.hl .tick,.i-sage,.i-yellowgreen,.wc-badge,
.prog .pmeta span.season,.grow .pmeta span.season{
  background:var(--cream-2)}
.wc-badge{color:var(--terracotta-deep)}
.prog .pmeta span.season,.grow .pmeta span.season{color:var(--terracotta-deep)}

/* the accents on the dark ratio panel and in the footer */
.ratio-head .script-accent,.rbar-top span,.foot-col h4{color:var(--band-cream)}
.rtrack i{background:linear-gradient(90deg,#E7DAF2,var(--band-cream))}
.tf input:focus,.tf select:focus,.tf textarea:focus{outline-color:var(--band-cream)}

/* =============================================================
   V7.8 — on a phone the wordmark leads
   With the nav collapsed there is nothing to balance the logo
   against, so it centres and grows, and the burger sits over it
   on the right.
   ============================================================= */
@media(max-width:900px){
  .bar .wrap{position:relative;justify-content:center;height:104px}
  .masthead.small .bar .wrap{height:84px}
  .brand{margin-inline:auto}
  .brand img{height:74px}
  .masthead.small .brand img{height:62px}
  /* the burger tucks in a little tighter so the wordmark can take the width */
  .burger{position:absolute;right:calc(var(--gut) - 6px);top:50%;transform:translateY(-50%);
    margin-left:0;padding:9px}
}
@media(max-width:380px){
  .brand img{height:64px}
  .masthead.small .brand img{height:54px}
}

/* the six trust ticks take the button purple, with a white check on top */
.trust .tick{background:var(--terracotta)}
.trust .tick svg{color:#fff}

/* =============================================================
   Header sizing, in one place (it had drifted across four blocks
   and an unscoped rule was overriding the phone sizes).
     up to 900px   logo centred, burger right   74 / 62 px
     up to 380px                                64 / 54 px
     901–1250px    phone number hidden, nav tight   62 / 52 px
     1251px and up full row with the phone number   76 / 60 px
   The second number is the compact state after scrolling.
   ============================================================= */
@media(min-width:901px) and (max-width:1250px){
  .bar .wrap{gap:10px;height:96px}
  .masthead.small .bar .wrap{height:78px}
  .brand img{height:62px}
  .masthead.small .brand img{height:52px}
  .callnum{display:none}
  .nav > a,.nav-btn{padding:.6em .62em;font-size:.9rem}
}
@media(min-width:1251px){
  .bar .wrap{height:108px}
  .masthead.small .bar .wrap{height:84px}
  .brand img{height:76px}
  .masthead.small .brand img{height:60px}
}


/* =============================================================================
   V8 · THE BRAND LAYER  —  HFFDLC Brand Guidelines v60
   =============================================================================
   Twelve locked swatches, Baloo 2 + Inter, Porcelain as the paper tone.
   Pastels are fills; text and display accents use deepened versions of the
   same hues so every one clears its contrast floor. Nothing above this block
   was deleted — this layer re-points the tokens the components already use.
   ========================================================================== */
:root{
  /* --- the twelve locked swatches --------------------------------------- */
  --porcelain:#FAFAFA;  --greige:#E5DCD3;   --cream:#F6F0E4;     --peach:#F7E2CF;
  --sage:#D0DEC4;       --yellowgreen:#DBE2B9; --blush:#ECB4A5;  --bluegrey:#C8D4D4;
  --apricot:#EAAA6C;    --lavender:#C9BCD7; --canary:#FCF6B0;
  --terracotta:#C37163;
  --lav:#C9BCD7;
  --band-soft:var(--cream);   /* every tinted band is the brand Cream #F6F0E4 */

  /* --- deepened tones, for type and for fills that carry light text ------ */
  --tc-label:#9C4F42;    /* small text on light   5.6:1 */
  --tc-deep:#8A4438;     /* fills under white text 7.1:1 */
  --d-terracotta:#C66F60; --d-apricot:#CB6F17; --d-sage:#6E934F;
  --d-yellowgreen:#7F8E37; --d-lavender:#987EB4; --d-bluegrey:#6F9090; --d-blush:#DD6444;

  /* --- ink, warmed to sit with the pastels ------------------------------ */
  --ink:#36302F; --ink-2:#5C5451; --ink-70:#6A615E; --ink-45:#8E8582; --ink-3:#8E8582;
  --rule:#E7E0D8;

  /* --- the tokens every component already reads ------------------------- */
  --paper:var(--porcelain);
  --card:var(--cream);
  --lilac-1:var(--cream); --lilac-2:var(--peach); --lilac-3:var(--greige);
  --sage-1:var(--cream);  --sage-2:var(--sage);   --sage-3:var(--d-sage);
  --band-cream:var(--cream);
  --plum:var(--terracotta); --plum-deep:var(--tc-deep);
  --terracotta-deep:var(--tc-label);
  --moss:var(--d-sage); --gold:var(--d-apricot); --rose:var(--tc-label);
  --teal:var(--d-bluegrey); --blue:var(--d-bluegrey); --clay:var(--d-apricot);
  --cream-2:var(--peach);

  /* --- type: three faces, two of them on the page ----------------------- */
  --display:'Baloo 2',system-ui,-apple-system,sans-serif;
  --body:'Inter',system-ui,-apple-system,sans-serif;
  --script:'Caveat',cursive;   /* V2's script flourish, restored */
  --serif:'Baloo 2',system-ui,sans-serif;
}

/* headlines are Baloo 2 everywhere, including the hero */
.hero h1{font-family:var(--display);font-weight:800;letter-spacing:-.02em}
/* the script flourish is V2's Caveat again, in the brand accent colour */
.script-accent,.why-statement .pq{font-family:var(--script);font-weight:700;
  color:var(--tc-label);font-size:1.16em;letter-spacing:0;font-style:normal}
.why-statement .pq{font-size:1.15em}
.hero h1 .k{color:var(--peach)}
.hero h1 .n{font-weight:600;font-style:normal;color:rgba(255,255,255,.8)}

/* --- section rhythm, in the brand neutrals ------------------------------ */
#mission,#values,#included   {background:var(--peach)}
#approach,#connected,#enroll {background:var(--cream)}
.known,#programs,#safety,
#schedules,#reviews,#faq,#visit,
#careers                     {background:var(--porcelain)}
body{background:var(--porcelain)}

/* --- panels that carry light text use the deepened terracotta ----------- */
.ratio-block,.visit{background:var(--tc-deep)}
.ratio-head .script-accent{color:var(--peach)}
.rbar-top span{color:var(--peach)}
.rtrack{background:rgba(255,255,255,.22)}
.rtrack i{background:linear-gradient(90deg,var(--peach),var(--canary))}
.week-band,.wk-band{background:var(--tc-deep)}
.vfact{background:rgba(255,255,255,.14)}
.tf input:focus,.tf select:focus,.tf textarea:focus{outline-color:var(--peach)}

/* --- buttons ------------------------------------------------------------ */
.btn-fill,.btn-primary{background:var(--tc-deep);color:#fff;border-color:var(--tc-deep)}
.btn-fill:hover,.btn-primary:hover{background:#73382E;border-color:#73382E}
.btn-ghost{border-color:var(--greige);color:var(--tc-label);background:var(--porcelain)}
.btn-ghost:hover{background:var(--cream)}
.btn-ink{background:var(--ink);color:#fff}
.hero .btn-fill{background:#fff;color:var(--tc-deep);border-color:#fff}
.hero .btn-fill:hover{background:var(--cream)}

/* --- small accents ------------------------------------------------------ */
.eyebrow{color:var(--tc-label)}
.eyebrow::before{background:var(--terracotta)}
.nav a.on,.nav-btn.on,.menu a:hover b,.menu a:hover{color:var(--tc-label)}
.menu a:hover,.nav > a:hover,.nav-btn:hover,.nav-group.open .nav-btn{background:var(--cream);color:var(--tc-label)}
.trust .tick{background:var(--tc-deep)}
.grow-link,.foot-col a:hover,.callnum{color:var(--tc-label)}
.testi .tcard .who span{color:var(--tc-label)}
.tcard .stars,.quote .by .rt{color:var(--d-apricot)}

/* --- the dark footer, warmed ------------------------------------------- */
footer.site{background:#3C332F;color:rgba(255,255,255,.82)}
.foot-col h4{color:var(--peach)}
.foot-bottom{border-top-color:rgba(255,255,255,.16)}

/* --- the hero veil goes warm instead of plum ---------------------------- */
.veil{background:
  linear-gradient(103deg, rgba(60,41,34,.82) 0%, rgba(60,41,34,.62) 42%, rgba(60,41,34,.2) 74%, rgba(60,41,34,.06) 100%),
  linear-gradient(0deg, rgba(60,41,34,.4) 0%, rgba(60,41,34,0) 26%)}
@media(max-width:900px){
  .veil{background:linear-gradient(180deg,rgba(60,41,34,.34) 0%,rgba(60,41,34,.5) 42%,rgba(60,41,34,.82) 100%)}
}
.statband{background:var(--porcelain)}
.masthead{background:rgba(250,250,250,.92)}

/* =============================================================================
   V8 · THE DOODLE FIELD
   The tile covers the whole section again. Opacity is baked into the two SVGs
   and each section paints the tile as its own background-image — no overlay
   element and nothing promoted to its own compositing layer.
   ========================================================================== */
.section,.statband{position:relative}
#mission,#values,#included{
  --halo:var(--band-soft);
  background-color:var(--band-soft);
  background-image:url(assets/doodles.svg);background-size:430px 430px}
#approach,#connected,#enroll{
  --halo:var(--cream);
  background-color:var(--cream);
  background-image:url(assets/doodles.svg);background-size:520px 520px}
.known,#programs,#safety,#schedules,#reviews,#faq,#visit,.statband{
  --halo:var(--porcelain);
  background-color:var(--porcelain);
  background-image:url(assets/doodles-light.svg);background-size:520px 520px}
#careers,.hero{background-image:none}
@media print{.section,.statband{background-image:none!important}}

/* the top and bottom rule takes the eight icon swatches, in the puzzle-ring order */
.rainbow{background:linear-gradient(90deg,
  var(--terracotta) 0% 12.5%, var(--yellowgreen) 12.5% 25%, var(--blush) 25% 37.5%,
  var(--bluegrey) 37.5% 50%, var(--apricot) 50% 62.5%, var(--lavender) 62.5% 75%,
  var(--canary) 75% 87.5%, var(--sage) 87.5% 100%)}

/* cards keep a paper lift above the porcelain page, with warmed shadows */
.why,.sched,.grow,.trust-strip,.tcard,.step,.sdef,.wc-cell,.xname,.safety-row,.vdef,
.hl,.subprog,.domains,.steam-banner,.phone,.job{border-color:var(--rule)}
.steam-banner,.grow,.sched,.tcard,.step,.hl,.xname,.domains{background:#fff}
.subprog{background:var(--cream)}
.values-note,.sched-note,.extras-cta,.dom-col:last-child{background:var(--cream)}
.dom-col:first-child{background:var(--bluegrey)}
.wc-badge{background:var(--peach);color:var(--tc-label)}
.prog .pmeta span.season,.grow .pmeta span.season{background:var(--greige);color:var(--ink-70)}
.grow .pmeta span{background:var(--greige);color:var(--ink-70)}
.hl .tick,.i-sage,.i-yellowgreen{background:var(--sage)}
.i-bluegrey{background:var(--bluegrey)} .i-blush{background:var(--blush)}
.i-canary{background:var(--canary)} .i-apricot{background:var(--apricot)}
.i-lavender{background:var(--lavender)} .i-terracotta{background:var(--terracotta)}
.foot-brand .fb{background:var(--porcelain)}

/* =============================================================================
   V8 · CLEARING THE PATTERN BEHIND TEXT
   The field stays everywhere; the motifs simply stop where words start. Each
   bare text block paints the band colour behind itself and fades it out with a
   radial gradient, so the doodles disappear around the type instead of running
   under it. The padding gives the gradient room and the matching negative
   margin keeps the layout exactly where it was. Gradients rather than blurred
   shadows: a blur on this many blocks cost a few frames on a fast scroll.
   `--halo` is set per section group, so the patch always matches its band.
   ========================================================================== */
.section .sec-title,
.section .sec-lead,
.section .why-statement,
.section .mission-quote,
.mission-band p,
.wc-head h3,.wc-head p,
.extras-head p,
.domains-head h3,.domains-head p{
  padding:12px 20px;margin-left:-20px;margin-right:-20px;
  background-image:radial-gradient(ellipse 104% 150% at 50% 50%,
    var(--halo,transparent) 0 58%, rgba(255,255,255,0) 100%);
}
.section .sec-title,.section .why-statement{margin-top:-12px;margin-bottom:calc(20px - 12px)}
.section .sec-lead{margin-bottom:calc(var(--lead-gap,44px) - 12px)}
.section .eyebrow,.connect-copy .connect-list,.sdef,.vdef{
  background-color:var(--halo,transparent);border-radius:8px}
.connect-copy .connect-list{padding:8px 14px;margin-left:-14px;margin-right:-14px}
.sdef,.vdef{box-shadow:0 0 0 10px var(--halo,transparent)}
/* inline accents inherit their heading's clearing */
.section .sec-title .script-accent,.section .why-statement .pq{background:none;box-shadow:none}

/* the figures bar keeps the field, with each figure clearing its own patch */
.statband{--halo:var(--porcelain)}
.st b,.st > span{background-image:radial-gradient(ellipse 120% 150% at 50% 50%,
  var(--halo) 0 58%, rgba(255,255,255,0) 100%);padding:4px 14px;margin:0 -14px}



/* =============================================================================
   V8 · THE V2 ACCENT
   V2 carried the warm terracotta at its own strength — buttons, the teacher-
   time panel, the weekly-theme band and the tour slab were all terracotta, not
   the near-brown deepening V8 was using. This block puts that back:

     --terracotta  #C37163   the swatch itself — dots, rules, display letters
     --tc-mid      #AE5A4A   the same hue, deep enough to carry white text
                             (4.8:1) — buttons, panels, the band
     --tc-label    #9C4F42   small text on a light band (5.1–5.6:1)
     --tc-deep     #8A4438   kept for hovers and the band's dark stop

   The band returns to V2's two-stop terracotta gradient.
   ========================================================================== */
:root{
  --tc-mid:#AE5A4A;
  --plum-deep:var(--tc-mid);
}
.ratio-block,.visit{background:var(--tc-mid)}
.theme-band,.week-band,.wk-band{background:linear-gradient(135deg,var(--tc-mid) 0%,var(--tc-deep) 100%)}
.btn-fill,.btn-primary{background:var(--tc-mid);color:#fff;border-color:var(--tc-mid)}
.btn-fill:hover,.btn-primary:hover{background:var(--tc-deep);border-color:var(--tc-deep)}
.hero .btn-fill{background:#fff;color:var(--tc-mid);border-color:#fff}
.hero .btn-fill:hover{background:var(--cream);color:var(--tc-deep)}
.trust .tick{background:var(--tc-mid)}

/* =============================================================================
   V8 · OUR MISSION, AS V2 HAD IT
   V2's mission band was a clean colour band with the oversized quote mark
   floating over it. The doodle field was turning that into noise and the
   text-clearing patches were cutting pale rectangles out of it, so this one
   section opts out of both: flat Cream, no tile, no halos, V2's spacing.
   ========================================================================== */
#mission{background-image:none}
#mission .mission-quote,
#mission .mission-band p,
#mission .mission-band .eyebrow{
  padding:0;margin-left:0;margin-right:0;
  background-image:none;background-color:transparent;border-radius:0}

/* =============================================================================
   V8 · THE WHY LEAD IS CENTRED AGAIN
   The justification pass swept .why-sub in with the section leads and left-
   aligned it. In V2 it is a centred block under a centred heading.
   ========================================================================== */
.why-head .sec-lead,.why-head .why-sub{text-align:center;margin-inline:auto}


/* =============================================================================
   COMMON QUESTIONS
   Plain, visible question-and-answer pairs — no accordion, so every answer is in
   the markup for search engines and AI assistants to read. Each pair is a card,
   which also keeps the doodle field clear of the text.
   ========================================================================== */
.faq-list{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.faq-item{background:#fff;border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:24px 26px;box-shadow:var(--lift)}
.faq-item h3{font-family:var(--display);font-weight:700;font-size:1.06rem;line-height:1.25;
  color:var(--ink);margin-bottom:8px;letter-spacing:-.01em}
.faq-item p{font-size:.95rem;line-height:1.6;color:var(--ink-70);text-align:left;hyphens:auto}
.faq-item a{color:var(--terracotta-deep);text-decoration:underline;text-underline-offset:2px}
@media(max-width:860px){.faq-list{grid-template-columns:1fr;gap:14px}
  .faq-item{padding:20px 22px}}

/* The clearing patch on a section title is pulled up 12px so the layout does not
   shift; that patch was painting over the bottom of the eyebrow above it. Lift
   the eyebrow into its own stacking context instead of adding a gap. */
.section .eyebrow{position:relative;z-index:1}

/* The tour form's reply message colours its own border and text with these two
   tokens. They were referenced by main.js but never defined, so a success and a
   failure looked identical. Both clear 4.5:1 on white. */
:root{--a-green:#2E7D52; --a-red:#B3261E}

/* The hero's fine print ran to three lines on a phone: the credentials wrapped
   onto two, pushing the hours onto a third. A shorter phrasing takes over below
   760px so the hours always land on the second line. */
.hero-fine .fine-brief{display:none}
@media(max-width:760px){
  .hero-fine .fine-full{display:none}
  .hero-fine .fine-brief{display:inline}
}

/* The hero's credentials line has to hold one line on a phone so the hours land
   on the second — including when the reader has large text turned on. Sizing it
   from the viewport with a rem term keeps it responsive to that setting without
   letting it wrap, and the clamp bounds it either way. */
@media(max-width:760px){
  .hero-fine{font-size:clamp(11px, 2.2vw + .22rem, 14px)}
  .hero-fine .fine-brief{white-space:nowrap}
}


/* =============================================================================
   THE TOUR FORM'S REPLY MESSAGE
   It sits on the terracotta slab, so it has to be a solid light chip rather than
   coloured text — green on terracotta was barely readable. Both states clear 7:1
   against the chip, and the chip itself is opaque so the slab never shows through.
   ========================================================================== */
.form-note{margin-top:10px;padding:14px 16px;border-radius:12px;background:#fff;
  border:1px solid var(--rule);border-left-width:4px;
  font-size:.95rem;line-height:1.5;color:var(--ink);text-align:left;
  box-shadow:0 10px 24px -18px rgba(0,0,0,.5)}
.form-note.is-ok {border-color:#2E7D52;color:#1A5B3A}
.form-note.is-err{border-color:#B3261E;color:#8E1F19}