/* =====================================================================
   Elles Belles Early Learning: Homepage
   Navy-led, warm, premium. Built for Spaceship Media.
   ===================================================================== */

:root{
  /* Brand: sampled from the Elles Belles logo */
  --navy:        #262F6B;
  --navy-deep:   #1A2150;
  --navy-mid:    #333E85;
  --navy-tint:   #EEF0F8;
  --pink:        #E5799D;
  --yellow:      #FADF06;

  /* Neutrals */
  --cream:       #FAF7F2;
  --cream-deep:  #F2EDE4;
  --pink-tint:   #FCEEF3;
  --white:       #FFFFFF;
  --ink:         #1E2338;
  --muted:       #6B7186;
  --line:        rgba(38,47,107,.12);

  /* Type */
  --display: Georgia, "Times New Roman", serif;
  --heading: Georgia, "Times New Roman", serif;
  --sans:    "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Rhythm */
  --gut: clamp(1.25rem, 4vw, 2.5rem);
  --sec: clamp(5rem, 11vw, 9.5rem);
  --max: 1240px;

  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 32px;
  --r-xl: 48px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --nav-h: 76px;
}
/* Pages fully moved to the current heading face: the legacy display serif is swapped out everywhere on them, nav and footer included. */
.type-current{--display:var(--heading)}


/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,figure,ul{margin:0}
ul{padding:0;list-style:none}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

html{scroll-behavior:smooth}
section[id]{scroll-margin-top:84px}
body{
  font-family:var(--sans);
  font-size:clamp(1rem,.96rem + .2vw,1.0625rem);
  line-height:1.65;
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.wrap{width:min(100% - 2*var(--gut), var(--max));margin-inline:auto}

.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:.75rem 1.25rem;z-index:999;border-radius:0 0 var(--r-sm) 0}
.skip:focus{left:0}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

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

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--heading);font-weight:400;line-height:1.1;letter-spacing:-.015em;
  text-wrap:balance}
h1{font-size:clamp(2.75rem,7.2vw,5.25rem)}
h2{font-size:clamp(2rem,4.6vw,3.5rem)}
h3{font-size:clamp(1.35rem,2.1vw,1.75rem);line-height:1.2}
em{font-style:italic;font-variation-settings:"SOFT" 60,"WONK" 1}

.eyebrow{
  font-family:var(--sans);font-size:.75rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--navy);
  display:flex;align-items:center;gap:.7rem;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--pink);flex:none;border-radius:2px}
.eyebrow--light{color:rgba(255,255,255,.85)}
.eyebrow--light::before{background:var(--yellow)}

.lead{font-size:1.15em;color:var(--ink)}
p{color:var(--muted)}
.lead,strong{color:var(--ink)}

.link-arrow{
  display:inline-flex;align-items:center;gap:.5rem;font-weight:600;color:var(--navy);
  font-size:.95rem;margin-top:1.5rem;
}
.link-arrow span{transition:transform .35s var(--ease)}
.link-arrow:hover span{transform:translateX(6px)}

.stars{color:var(--yellow);letter-spacing:.1em;font-size:1rem;
  text-shadow:0 1px 0 rgba(0,0,0,.18)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-weight:650;font-size:.95rem;letter-spacing:.01em;
  padding:.95rem 1.75rem;border-radius:100px;
  transition:transform .3s var(--ease),background .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease);
  white-space:nowrap;
}
.btn--sm{padding:.7rem 1.35rem;font-size:.875rem}
.btn--lg{padding:1.1rem 2.1rem}
.btn--primary{background:var(--navy);color:#fff;box-shadow:0 6px 20px -8px rgba(38,47,107,.6)}
.btn--primary:hover{background:var(--navy-deep);transform:translateY(-2px);box-shadow:0 12px 28px -10px rgba(38,47,107,.7)}
.btn--yellow{background:var(--yellow);color:var(--navy-deep);box-shadow:0 6px 20px -8px rgba(250,223,6,.5)}
.btn--yellow:hover{transform:translateY(-2px);filter:brightness(1.05)}
.btn--ghost{border:1.5px solid rgba(255,255,255,.45);color:#fff}
.btn--ghost:hover{background:rgba(255,255,255,.12);border-color:#fff;transform:translateY(-2px)}

/* =====================================================================
   NAV
   ===================================================================== */
.nav{
  position:fixed;inset:0 0 auto;z-index:700;
  transition:background .4s var(--ease),box-shadow .4s var(--ease),backdrop-filter .4s var(--ease);
}
.nav__inner{
  width:min(100% - 2*var(--gut), 1440px);margin-inline:auto;
  height:var(--nav-h);display:flex;align-items:center;gap:2rem;
  transition:height .4s var(--ease);
}
/* ---- logo -------------------------------------------------------------
   The wordmark in logo-400.png is navy, so over the navy hero it vanished
   and only the handprints read. Both marks now ship in the markup and
   cross-fade with the nav's own transparent → solid flip: white over the
   hero, navy once the bar turns cream.

   Legibility over the hero comes from two stacked treatments rather than a
   badge: a tight dark drop-shadow that outlines each letterform, and a
   wide, fully-feathered radial shading behind the mark. The shading is
   painted as the anchor's own background with padding to give it room
   (cancelled by an equal negative margin, so the nav layout is unchanged);
   it has no edge of its own at any point, so it reads as ambient depth
   rather than a plate. Both stand down in the stuck state, where the navy
   mark sits on cream and needs neither.
   --------------------------------------------------------------------- */
.nav__logo{
  display:grid;flex:none;
  padding:.5rem 1.15rem;margin:-.5rem -1.15rem;
  transition:background .4s var(--ease);
}
.nav__logo img{
  grid-area:1/1;
  height:56px;width:auto;transition:height .4s var(--ease),opacity .4s var(--ease);
}
.nav__logo-mark--light{opacity:0}
.nav.is-stuck .nav__logo img{height:46px}
.nav__links{display:flex;align-items:center;gap:clamp(.85rem,1.35vw,2rem);margin-inline:auto}
.nav__links > a,.navdrop__link{
  font-size:.925rem;font-weight:550;color:rgba(255,255,255,.9);position:relative;padding:.35rem 0;
  transition:color .3s var(--ease);
}
.nav__links > a::after,.navdrop__link::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease);border-radius:2px;
}
.nav__links > a:hover::after,.navdrop__link:hover::after{transform:scaleX(1);transform-origin:left}
.nav__actions{display:flex;align-items:center;gap:1rem}

/* ---- nav dropdowns (About Us / Campuses / For Families) ---- */
.navdrop{position:relative;display:flex;align-items:center;gap:.3rem}
.navdrop__chev{
  display:flex;color:rgba(255,255,255,.9);padding:.35rem;margin:-.35rem;border-radius:50%;
  transition:color .3s var(--ease),background .3s var(--ease),transform .35s var(--ease);
}
.navdrop__chev svg{width:10px;height:7px;display:block}
.navdrop__chev:hover{background:rgba(255,255,255,.14)}
.navdrop.is-open .navdrop__chev{transform:rotate(180deg)}
.nav.is-stuck .navdrop__link,.nav.is-stuck .navdrop__chev{color:var(--navy)}
.nav.is-stuck .navdrop__chev:hover{background:var(--navy-tint)}

.navdrop__panel{
  /* flush against the trigger (no gap) so the pointer never crosses
     unrendered space on its way from the link to the panel: that gap
     was why hovering down into the menu closed it before you arrived.
     The old 14px gap is now top padding on the panel itself instead. */
  position:absolute;top:100%;left:50%;transform:translate(-50%,8px);min-width:15rem;
  background:var(--white);border-radius:var(--r-md);padding:1.25rem .6rem .6rem;
  box-shadow:0 2px 4px rgba(38,47,107,.05),0 26px 50px -22px rgba(38,47,107,.55);
  display:flex;flex-direction:column;gap:.1rem;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .28s var(--ease),transform .28s var(--ease),visibility 0s linear .28s;
}
.navdrop.is-open .navdrop__panel{
  opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);
  transition:opacity .28s var(--ease),transform .28s var(--ease);
}
.navdrop--right .navdrop__panel{left:auto;right:-.6rem;transform:translateY(8px)}
.navdrop--right.is-open .navdrop__panel{transform:translateY(0)}
.navdrop__panel a{
  display:flex;align-items:baseline;gap:.5rem;padding:.55rem .75rem;border-radius:10px;
  font-size:.875rem;font-weight:550;color:var(--ink);line-height:1.3;
  transition:background .25s var(--ease),color .25s var(--ease);
}
.navdrop__panel a:hover{background:var(--navy-tint);color:var(--navy)}
.navdrop__panel .note{font-size:.72rem;font-weight:650;color:var(--pink);white-space:nowrap}
.nav .btn--primary{background:rgba(255,255,255,.14);border:1.5px solid rgba(255,255,255,.4);
  color:#fff;backdrop-filter:blur(8px);box-shadow:none}
.nav .btn--primary:hover{background:#fff;color:var(--navy);border-color:#fff}

/* frosted glass over hero / page header */
.nav:not(.is-stuck){background:rgba(255,255,255,.12);backdrop-filter:blur(16px) saturate(1.2)}

/* nested Age Groups submenu (desktop) */
.navdrop__subitem{position:relative;display:flex;align-items:center;justify-content:space-between;gap:.25rem}
.navdrop__subitem > a{flex:1}
.navdrop__sub-arrow{flex:none;font-size:.75rem;color:var(--muted);padding:0 .4rem;line-height:1}
.navdrop__subpanel{position:absolute;left:100%;top:-.6rem;min-width:11rem;
  background:var(--white);border-radius:var(--r-md);padding:.5rem .5rem;
  box-shadow:0 2px 4px rgba(38,47,107,.06),0 26px 50px -22px rgba(38,47,107,.55);
  display:flex;flex-direction:column;gap:.1rem;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .2s var(--ease),visibility 0s linear .2s}
.navdrop__subitem:hover .navdrop__subpanel,
.navdrop__subitem:focus-within .navdrop__subpanel{opacity:1;visibility:visible;pointer-events:auto;
  transition:opacity .2s var(--ease)}

/* scrolled state */
.nav.is-stuck{background:rgba(255,255,255,.92);backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:0 1px 0 var(--line),0 12px 30px -22px rgba(38,47,107,.5)}
.nav.is-stuck .nav__inner{height:60px}
.nav.is-stuck .nav__logo img{height:42px}
.nav.is-stuck .nav__links a{color:var(--navy)}
.nav.is-stuck .btn--primary{background:var(--navy);border-color:var(--navy);color:#fff;
  box-shadow:0 6px 20px -8px rgba(38,47,107,.6)}
.nav.is-stuck .btn--primary:hover{background:var(--navy-deep);border-color:var(--navy-deep);color:#fff}
.nav.is-stuck .nav__toggle span{background:var(--navy)}

/* hamburger */
.nav__toggle{display:none;width:44px;height:44px;position:relative;border-radius:50%}
.nav__toggle span{
  position:absolute;left:11px;width:22px;height:2px;background:#fff;border-radius:2px;
  transition:transform .35s var(--ease),opacity .25s var(--ease),background .4s var(--ease);
}
.nav__toggle span:nth-child(1){top:18px}
.nav__toggle span:nth-child(2){top:25px}
body.menu-open .nav__toggle span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
body.menu-open .nav__toggle span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}

/* mobile menu */
.mobile{
  position:fixed;inset:0;z-index:90;background:var(--navy);
  display:flex;flex-direction:column;justify-content:safe center;gap:3rem;
  padding:calc(var(--nav-h) + 2rem) var(--gut) 3rem;
  /* an open dropdown can outgrow a short phone screen: scroll, never clip */
  overflow-y:auto;overscroll-behavior:contain;
  opacity:0;transition:opacity .45s var(--ease);
}
.mobile[hidden]{display:none}
.mobile.is-open{opacity:1}
.mobile__links{display:flex;flex-direction:column;gap:.35rem}
.mobile__links a{
  font-family:var(--display);font-size:clamp(2rem,9vw,3rem);color:#fff;
  display:flex;align-items:baseline;gap:1rem;padding:.35rem 0;
  opacity:0;transform:translateY(18px);
}
.mobile.is-open .mobile__links a{animation:menuIn .55s var(--ease) forwards;animation-delay:calc(var(--n,0)*60ms + 120ms)}
@keyframes menuIn{to{opacity:1;transform:none}}

/* mobile accordion for the dropdown sections */
.mdrop{opacity:0;transform:translateY(18px)}
.mobile.is-open .mdrop{animation:menuIn .55s var(--ease) forwards;animation-delay:calc(var(--n,0)*60ms + 120ms)}
.mdrop__top{display:flex;align-items:baseline;gap:1rem;width:100%;text-align:left;
  font-family:var(--display);font-size:clamp(2rem,9vw,3rem);color:#fff;padding:.35rem 0;line-height:1.1}
.mdrop__chev{margin-left:auto;align-self:center;display:flex;transition:transform .35s var(--ease)}
.mdrop__chev svg{width:16px;height:11px;display:block}
.mdrop.is-open .mdrop__chev{transform:rotate(180deg)}
.mdrop__panel{overflow:hidden;max-height:0;transition:max-height .4s var(--ease)}
.mdrop__panel > div{padding:.2rem 0 .6rem 2.6rem;display:flex;flex-direction:column;gap:.1rem}
.mdrop__panel a{font-family:var(--sans);font-size:1rem;font-weight:550;
  color:rgba(255,255,255,.72);padding:.42rem 0;opacity:1;transform:none;animation:none;display:block}
.mdrop__panel a:hover{color:#fff}
.mdrop__panel .note{font-size:.72rem;font-weight:650;color:var(--yellow);margin-left:.4rem}
/* mobile: indented Age Groups sub-links */
.mdrop__sub-head{display:block;padding:.3rem 0 .15rem;font-size:.72rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.4);margin-top:.3rem}
.mdrop__sub-link{font-family:var(--sans);font-size:.95rem;font-weight:550;
  color:rgba(255,255,255,.72);padding:.38rem 0 .38rem 1rem;display:block}
.mdrop__sub-link:hover{color:#fff}
.mobile__foot{display:flex;flex-direction:column;gap:1.25rem;align-items:stretch}
/* navy CTA would vanish on the navy panel: go yellow here */
.mobile__foot .btn--primary{background:var(--yellow);color:var(--navy-deep);border:0;box-shadow:none}
.mobile__foot .btn--primary:hover{background:#fff;color:var(--navy)}
.mobile__foot p{text-align:center}
.mobile__foot p{color:rgba(255,255,255,.6);font-size:.85rem;letter-spacing:.14em;text-transform:uppercase}

/* =====================================================================
   HERO
   ===================================================================== */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  padding-bottom:clamp(3rem,7vh,5.5rem);overflow:hidden;background:var(--navy-deep)}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__poster{position:absolute;inset:0;
  background-image:url(/assets/images/photoshoot/indoor-storytime-1800.webp);
  background-size:cover;background-position:center;background-color:var(--navy-deep)}
.hero__video{position:absolute;inset:0;opacity:0;transition:opacity 1.1s var(--ease)}
.hero__video.is-ready{opacity:1}
.hero__video iframe{
  position:absolute;top:50%;left:50%;
  width:100vw;height:56.25vw;min-height:100svh;min-width:177.78svh;
  transform:translate(-50%,-50%);pointer-events:none;border:0;
}
/* scrim keeps the video readable *and* visible: heavier at the edges, light in the middle */
.hero__scrim{position:absolute;inset:0;
  background:
    linear-gradient(to top, rgba(21,27,63,.94) 0%, rgba(21,27,63,.72) 22%, rgba(21,27,63,.18) 52%, rgba(21,27,63,.34) 100%),
    linear-gradient(to right, rgba(21,27,63,.55) 0%, rgba(21,27,63,0) 55%);
}

.hero__content{position:relative;z-index:2;width:min(100% - 2*var(--gut),var(--max));margin-inline:auto;
  display:flex;align-items:flex-end;justify-content:space-between;gap:3rem;flex-wrap:wrap}
.hero__copy{max-width:44rem}
.hero__title{font-family:var(--heading);font-weight:400;
  line-height:1;letter-spacing:-.02em;color:#fff;margin:1.25rem 0 0;
  text-shadow:0 2px 30px rgba(0,0,0,.25)}
.hero__title em{color:var(--yellow)}
.hero__cta{display:flex;gap:.85rem;flex-wrap:wrap;margin-top:2.25rem}
.hero .btn--primary{background:var(--yellow);color:var(--navy-deep);box-shadow:0 10px 30px -12px rgba(250,223,6,.7)}
.hero .btn--primary:hover{background:#fff;color:var(--navy)}

.hero__trust{
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(14px);border-radius:var(--r-md);padding:1.25rem 1.5rem;max-width:16rem;
}
.hero__rating{display:flex;align-items:center;gap:.6rem}
.hero__google-logo{width:20px;height:20px;flex:none;filter:drop-shadow(0 2px 5px rgba(0,0,0,.2))}
.hero__rating strong{color:#fff;font-size:1.5rem;font-family:var(--display);font-weight:600}
.hero__trust p{color:rgba(255,255,255,.78);font-size:.85rem;line-height:1.45;margin-top:.35rem}

.hero__scroll{position:absolute;left:50%;bottom:1.5rem;transform:translateX(-50%);z-index:2;
  width:26px;height:42px;border:1.5px solid rgba(255,255,255,.4);border-radius:100px;display:grid;place-items:start center;padding-top:8px}
.hero__scroll span{width:3px;height:7px;background:#fff;border-radius:3px;animation:scrollDot 1.9s var(--ease) infinite}
@keyframes scrollDot{0%{opacity:0;transform:translateY(0)}30%{opacity:1}70%{opacity:1;transform:translateY(13px)}100%{opacity:0;transform:translateY(15px)}}

/* =====================================================================
   UVP
   ===================================================================== */
.uvp{padding:clamp(5rem,9vw,8rem) 0 clamp(4.5rem,8vw,7rem);position:relative;z-index:3;isolation:isolate}
.uvp__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2vw,2rem);
  align-items:stretch;width:min(100%,1440px);margin-inline:auto}
@media (min-width:821px) and (max-width:1100px){
  .uvp__grid{grid-template-columns:repeat(2,1fr)}
}
.card--uvp .card__media{aspect-ratio:4/3.3}
.card--uvp .card__body{padding-inline:1.5rem;padding-bottom:2rem}
.card{background:var(--white);border-radius:var(--r-lg);padding:0;overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:0 2px 4px rgba(38,47,107,.04),0 24px 48px -32px rgba(38,47,107,.35);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.card:hover{transform:translateY(-6px);box-shadow:0 2px 4px rgba(38,47,107,.05),0 34px 60px -34px rgba(38,47,107,.45)}

/* full-width image sitting flush at the top of the card */
.card__media{aspect-ratio:4/3.5;overflow:hidden;background:var(--navy-tint);
  border-radius:0 0 var(--r-md) var(--r-md)}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.card:hover .card__media img{transform:scale(1.05)}

.card__body{padding:0 1.75rem 2.25rem;text-align:center;flex:1;display:flex;flex-direction:column}

/* circular icon badge straddling the image's lower edge */
.card__badge{width:78px;height:78px;border-radius:50%;background:#FBE9EF;
  display:grid;place-items:center;margin:-39px auto 1.15rem;position:relative;z-index:2;
  box-shadow:0 12px 24px -14px rgba(38,47,107,.4)}
.card__icon{width:40px;height:40px;object-fit:contain}
.card__badge--photo .card__icon{width:52px;height:52px}
.card__body h3{color:var(--navy);margin-bottom:.6rem}
.card__body p{font-size:.95rem;margin-bottom:1.5rem}
.card__rule{width:46px;height:3px;border-radius:3px;background:var(--pink);margin:auto auto 0}

/* =====================================================================
   ABOUT
   ===================================================================== */
.about{padding:var(--sec) 0;position:relative}
/* Homepage only: the UVP cards already carry their own bottom padding,
   so the full var(--sec) here on top of that read as an oversized gap
   before "We believe...": tighten it to match the hero→cards rhythm
   directly above. The About-us page's Philosophy section (#philosophy)
   keeps the full var(--sec) top padding untouched. */
#about{padding-top:calc(var(--sec) / 2)}
/* About-us page only: philosophy → purpose is one continuous train of
   thought, so it sits closer than the section rhythm used elsewhere */
#philosophy{padding-bottom:calc(var(--sec) / 2)}
/* Childcare-subsidy page only: the explanation runs straight into the
   at-a-glance facts, so it doesn't need the full section gap either */
#what-it-is{padding-bottom:calc(var(--sec) / 2)}
.about__head{max-width:60rem;margin-bottom:clamp(3rem,6vw,5rem)}
.statement{margin-top:1.5rem;color:var(--navy);font-size:clamp(1.75rem,3.9vw,3rem);line-height:1.2}
/* inside a split copy column the statement sits at heading scale, not hero scale */
.statement--split{margin-top:1.25rem;font-size:clamp(1.5rem,2.9vw,2.15rem)}
.statement .w{display:inline-block;opacity:.16;transition:opacity .5s var(--ease),transform .5s var(--ease);transform:translateY(.12em)}
.statement .w.on{opacity:1;transform:none}

.about__body{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2.5rem,6vw,5rem);align-items:center}
.about__collage{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:auto auto;gap:1rem}
.about__collage img{width:100%;height:100%;object-fit:cover}
.collage__a{grid-column:1/2;grid-row:1/2;border-radius:var(--r-lg) var(--r-lg) var(--r-lg) 0;overflow:hidden;aspect-ratio:4/3.2}
.collage__b{grid-column:2/3;grid-row:1/3;border-radius:200px 200px var(--r-lg) var(--r-lg);overflow:hidden;aspect-ratio:3/4.6}
.collage__c{grid-column:1/2;grid-row:2/3;border-radius:0 var(--r-lg) var(--r-lg) var(--r-lg);overflow:hidden;aspect-ratio:4/3}
.collage__c img{object-position:top}
.about__text p + p{margin-top:1.1rem}
/* Ormond runs the mirror of Cheltenham: copy on the left, collage on the right. */
.about--flip .about__body{grid-template-columns:.85fr 1.15fr}
.about--flip .about__collage{order:2}
@media (max-width:560px){
  .about__collage{grid-template-rows:auto auto}
  .about__collage .collage__a{grid-column:1/-1;grid-row:1/2;aspect-ratio:16/11;border-radius:var(--r-lg)}
  .about__collage .collage__c{grid-column:1/2;grid-row:2/3;aspect-ratio:4/5}
  .about__collage .collage__b{grid-column:2/3;grid-row:2/3;aspect-ratio:4/5}
}
.about--flip .about__text{order:1}
@media (max-width:900px){
  .about--flip .about__body{grid-template-columns:1fr}
  .about--flip .about__collage{order:1}
  .about--flip .about__text{order:2}
}
/* Coming-soon campuses have a single approved render rather than a photo
   collage, so the intro runs as one image beside the copy. */
.about__single{margin:0;border-radius:var(--r-lg);overflow:hidden;
  background:var(--navy-tint);aspect-ratio:4/3}
.about__single img{width:100%;height:100%;object-fit:cover}
@media (max-width:900px){.about__body--single{grid-template-columns:1fr}}

/* =====================================================================
   FAMILY OWNED  (navy hero band)
   ===================================================================== */
.family{background:var(--navy);color:#fff;padding:var(--sec) 0;border-radius:var(--r-xl);
  margin-inline:clamp(0px,2vw,24px);position:relative;overflow:hidden}
.family::before{content:"";position:absolute;top:-30%;right:-12%;width:52%;aspect-ratio:1;
  background:radial-gradient(circle,rgba(229,121,157,.22),transparent 68%);pointer-events:none}
.family::after{content:"";position:absolute;bottom:-25%;left:-10%;width:44%;aspect-ratio:1;
  background:radial-gradient(circle,rgba(250,223,6,.13),transparent 68%);pointer-events:none}
.family__top{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2.5rem,6vw,5.5rem);align-items:center;position:relative}
.family__visual{min-width:0}
.family__portrait{position:relative;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 40px 80px -40px rgba(0,0,0,.6)}
.family__portrait img{width:100%;height:auto}
.family__kinder-logo{display:block;width:min(82%,330px);height:auto;margin:clamp(1.35rem,3vw,2rem) auto 0;
  padding:.9rem 1.15rem;background:rgba(255,255,255,.96);border-radius:var(--r-md);
  box-shadow:0 22px 48px -30px rgba(0,0,0,.65)}
/* two logos side-by-side (kinder approval + NQF rating) */
.family__logos{display:flex;align-items:center;justify-content:center;gap:1rem;
  margin:clamp(1.35rem,3vw,2rem) auto 0}
.family__logo-img{height:110px;width:auto;background:rgba(255,255,255,.96);border-radius:var(--r-md);
  padding:.75rem 1rem;box-shadow:0 22px 48px -30px rgba(0,0,0,.65);display:block}
.family__tag{position:absolute;left:1.25rem;bottom:1.25rem;background:var(--yellow);color:var(--navy-deep);
  font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;padding:.5rem 1rem;border-radius:100px}
.family__copy h2{color:#fff;margin:1.5rem 0 1.75rem}
/* sized so "Community-Focused Approach" always fits on one line of the column */
.family__copy .family__title{font-size:clamp(1.3rem,6.1vw,2.1rem)}
@media (min-width:901px){.family__copy .family__title{font-size:clamp(1.9rem,3.25vw,2.9rem)}}
.family__copy h2 em{color:var(--pink)}
.family__prose p{color:rgba(255,255,255,.78)}
.family__prose p + p{margin-top:1.1rem}
.family__prose strong{color:#fff}


.family__band{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.25rem,2.5vw,2rem);
  margin-top:clamp(3.5rem,7vw,6rem);padding-top:clamp(2.5rem,5vw,3.5rem);
  border-top:1px solid rgba(255,255,255,.16);position:relative}
.band__item h3{color:#fff;font-size:1.2rem;margin-bottom:.6rem;display:flex;align-items:center;gap:.6rem}
.band__item h3::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--yellow);flex:none}
.band__item p{color:rgba(255,255,255,.7);font-size:.95rem}

/* =====================================================================
   POTENTIAL: stacking cards + scroll spine
   ===================================================================== */
.potential{padding:var(--sec) 0 0;position:relative}
.potential__head{max-width:52rem;margin-bottom:clamp(3rem,6vw,4.5rem)}
.potential__head h2{color:var(--navy);margin-top:1.5rem}
.potential__intro{margin-top:1.25rem;font-size:1.1rem}

.stack{position:relative;padding-bottom:var(--sec)}
.stack__spine{position:absolute;left:calc(var(--gut) / 2);top:0;height:100%;width:2px;overflow:visible}
.spine__track{stroke:var(--line);stroke-width:2}
.spine__fill{stroke:var(--pink);stroke-width:2;stroke-dasharray:100;stroke-dashoffset:100;
  transition:stroke-dashoffset .1s linear}

.stack__card{
  position:sticky;top:calc(var(--nav-h) + 1.5rem);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,4rem);align-items:center;
  background:var(--white);border-radius:var(--r-lg);overflow:hidden;
  padding:clamp(2rem,4vw,3.5rem);
  box-shadow:0 2px 4px rgba(38,47,107,.04),0 30px 60px -34px rgba(38,47,107,.4);
  margin-bottom:2rem;
  transform:translateY(calc(var(--i) * 0px));
}
.stack__card:nth-child(2){background:var(--cream-deep)}
.stack__card:nth-child(3){background:var(--navy-tint)}
.stack__num{font-family:var(--display);font-size:.95rem;font-weight:600;color:var(--pink);
  letter-spacing:.1em;display:block;margin-bottom:.9rem}
.stack__text h3{color:var(--navy);margin-bottom:1rem;font-size:clamp(1.6rem,2.6vw,2.25rem)}
.stack__media{border-radius:var(--r-md);overflow:hidden;aspect-ratio:4/3.1}
.stack__media img{width:100%;height:100%;object-fit:cover}
.ticks{margin-top:1.5rem;display:grid;gap:.7rem}
.ticks li{position:relative;padding-left:1.9rem;font-size:.95rem;color:var(--muted)}
.ticks li::before{
  content:"";position:absolute;left:0;top:.34em;width:19px;height:19px;border-radius:50%;
  background:var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round' d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px 11px no-repeat;
}


/* =====================================================================
   CAMPUSES
   ===================================================================== */
.campuses{padding:var(--sec) 0;position:relative;background:#FDF5F8}
.campuses__head{max-width:46rem;margin-bottom:clamp(2rem,4vw,3rem)}
.campuses__head h2{color:var(--navy);margin-top:1.25rem}
.campuses__intro{margin-top:1.1rem;font-size:1.05rem}

/* full-bleed map */
.campuses__mapwrap{position:relative;width:100vw;margin-left:calc(50% - 50vw);background:#E9ECF2}
/* static maps (no map API): an image with HTML pins placed by percentage,
   so the pins stay locked to their spot at every width */
.smap{position:relative;overflow:hidden;background:#E9ECF2;isolation:isolate}
.smap__img{width:100%;height:100%;object-fit:cover;display:block}
.smap__img[hidden]{display:none}
.smap--campuses{aspect-ratio:1920/1000;max-height:500px;width:100%}
.smap--campuses .smap__img{object-position:center}
.smap .smap__pin{position:absolute;left:var(--x);top:var(--y);margin:-44px 0 0 -16px;z-index:600}
.smap .smap__pin[hidden]{display:none}
.smap__credit{position:absolute;right:.5rem;bottom:.35rem;z-index:601;margin:0;
  font-size:10px;line-height:1.4;color:#7b8590;background:rgba(255,255,255,.7);padding:0 .35rem;border-radius:4px}
.smap--contact{height:clamp(340px,46vh,460px)}
/* interactive Google Maps iframe for contact page */
.imap{position:relative;background:#E9ECF2}
.imap--contact{height:clamp(340px,46vh,460px)}
.imap__frame{width:100%;height:100%;border:0;display:block}
.imap__frame[hidden]{display:none}
/* brand vignette melts the map edges into the cream page */
/* soft top + bottom fade so the map melts into the cream page.
   z-index sits above the tiles (200) but below the markers (600), so the
   imagery fades while the pins and labels stay crisp. */
.campuses__mapwrap::before,
.campuses__mapwrap::after{content:"";position:absolute;left:0;right:0;height:130px;
  pointer-events:none;z-index:450}
.campuses__mapwrap::before{top:0;background:linear-gradient(to bottom,#FDF5F8 4%,rgba(253,245,248,0))}
.campuses__mapwrap::after{bottom:0;background:linear-gradient(to top,#FDF5F8 4%,rgba(253,245,248,0))}
.map-fallback{padding:2rem var(--gut);text-align:center;color:var(--muted)}

/* legend pill floating on the map */
.map-legend{position:absolute;left:50%;bottom:1.5rem;transform:translateX(-50%);z-index:500;
  display:flex;gap:1.75rem;background:var(--white);padding:.7rem 1.4rem;border-radius:100px;
  box-shadow:0 2px 4px rgba(38,47,107,.05),0 18px 40px -22px rgba(38,47,107,.5);
  font-size:.85rem;color:var(--muted)}
.map-legend span{display:inline-flex;align-items:center;gap:.5rem}
.map-legend .dot{width:11px;height:11px;border-radius:50%;flex:none}
.map-legend .dot--open{background:var(--navy)}
.map-legend .dot--soon{background:#fff;border:3px solid var(--pink)}

/* custom map markers: pin is the anchor box; the label card is
   absolutely positioned so it can flip sides without moving the pin. */
.mk{position:relative;display:inline-block;width:32px;height:44px;text-decoration:none;
  filter:drop-shadow(0 8px 16px rgba(38,47,107,.26));transition:transform .3s var(--ease)}
.mk:hover{transform:translateY(-3px);z-index:600}
.mk__pin{position:absolute;inset:0;z-index:2}
.mk__pin svg{width:100%;height:100%;display:block}
.mk--open .mk__pin{color:var(--navy)}
.mk--soon .mk__pin{color:var(--pink)}
.mk--open .mk__pin::before{content:"";position:absolute;left:50%;top:15px;width:14px;height:14px;
  transform:translate(-50%,-50%);border-radius:50%;background:var(--navy);opacity:.35;z-index:-1;
  animation:mkPing 2.8s var(--ease) infinite}
@keyframes mkPing{0%{transform:translate(-50%,-50%) scale(1);opacity:.35}70%{transform:translate(-50%,-50%) scale(3.6);opacity:0}100%{opacity:0}}
.mk__card{position:absolute;top:15px;left:calc(100% - 6px);transform:translateY(-50%);
  display:flex;flex-direction:column;gap:.05rem;white-space:nowrap;background:var(--white);
  padding:.5rem .85rem;border-radius:12px}
.mk--cardleft .mk__card{left:auto;right:calc(100% - 6px)}
/* contact page: the campus that isn't selected steps back rather than away */
.mk--muted{opacity:.42;transition:opacity .45s var(--ease)}
.mk__card b{font-family:var(--display);font-size:1rem;font-weight:600;color:var(--navy);line-height:1.1}
.mk__badge{font-family:var(--sans);font-size:.6rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--navy)}
.mk--soon .mk__badge{color:#C25680}
.mk__badge--cta{text-transform:none;letter-spacing:.01em;color:var(--navy);font-size:.68rem}
.mk__badge--cta::after{content:" \2192";transition:margin-left .3s var(--ease)}
.mk:hover .mk__badge--cta::after{margin-left:.2rem}
.mk__short{display:none}
@media (max-width:420px){.mk__long{display:none}.mk__short{display:inline}}
@media (max-width:700px){
  .smap--campuses{aspect-ratio:800/900;max-height:none}
  .smap--campuses .smap__pin{left:var(--mx);top:var(--my)}
  .smap__pin--flip-sm .mk__card{left:auto;right:calc(100% - 6px)}
  .campuses__mapwrap::before{height:56px}
  .campuses__mapwrap::after{display:none}
  .map-legend{position:static;transform:none;justify-content:center;margin:1rem auto 0;width:max-content;max-width:calc(100% - 2*var(--gut))}
}


/* =====================================================================
   REVIEWS: 3 auto-scrolling columns, pause on hover
   ===================================================================== */
.reviews{padding:var(--sec) 0;background:var(--white);position:relative;overflow:hidden}
.reviews__head{max-width:46rem;margin-bottom:clamp(2.5rem,5vw,3.5rem)}
.reviews__head h2{color:var(--navy);margin-top:1.25rem}
.reviews__score{display:flex;align-items:center;gap:.85rem;margin-top:1.25rem;flex-wrap:wrap}
.reviews__score .stars{text-shadow:none;color:#F5C518}
.reviews__score p{color:var(--ink);font-size:.95rem}
.reviews__score strong{color:var(--navy);font-family:var(--display);font-size:1.15rem}
.reviews__score span{color:var(--muted)}
.reviews__more{display:flex;justify-content:center;margin-top:clamp(2rem,4vw,3rem)}

.marquee{
  position:relative;display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1rem,2vw,1.5rem);height:min(78vh,720px);overflow:hidden;
  width:min(100% - 2*var(--gut),var(--max));margin-inline:auto;
  -webkit-mask:linear-gradient(to bottom,transparent,#000 9%,#000 91%,transparent);
  mask:linear-gradient(to bottom,transparent,#000 9%,#000 91%,transparent);
}
.marquee__col{display:flex;flex-direction:column;gap:clamp(1rem,2vw,1.5rem);will-change:transform}
.marquee__col:hover{animation-play-state:paused}
.marquee__fade{display:none}

.rev{
  background:var(--cream);border:1px solid var(--line);border-radius:var(--r-md);
  padding:1.6rem;flex:none;transition:border-color .3s var(--ease),box-shadow .3s var(--ease)
}
.rev:hover{border-color:rgba(38,47,107,.3);box-shadow:0 16px 34px -26px rgba(38,47,107,.5)}
.rev__top{display:flex;align-items:center;gap:.8rem;margin-bottom:.9rem}
.rev__avatar{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-weight:700;font-size:.85rem;color:#fff;background:var(--navy)}
.rev__who{flex:1;min-width:0}
.rev__who strong{display:block;font-size:.925rem;color:var(--ink);font-weight:650;line-height:1.3}
.rev__who span{font-size:.78rem;color:var(--muted)}
.rev__g{width:18px;height:18px;flex:none;opacity:.9}
.rev__stars{color:#F5C518;font-size:.8rem;letter-spacing:.08em;margin-bottom:.5rem}
.rev p{font-size:.925rem;line-height:1.6;color:var(--muted)}

/* =====================================================================
   CTA
   ===================================================================== */
.cta{position:relative;padding:clamp(5rem,10vw,8rem) 0;overflow:hidden;background:var(--navy-deep);
  border-radius:var(--r-xl);margin:0 clamp(0px,2vw,24px) clamp(0px,2vw,24px)}
.cta__bg{position:absolute;inset:0}
.cta__bg img{width:100%;height:100%;object-fit:cover;opacity:.28}
.cta__bg img{object-position:var(--cta-pos,50% 50%)}
@media (max-width:820px){.cta__bg img{object-position:var(--cta-pos-t,var(--cta-pos,50% 50%))}}
@media (max-width:560px){.cta__bg img{object-position:var(--cta-pos-m,var(--cta-pos-t,var(--cta-pos,50% 50%)))}}
.cta::after{content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,rgba(26,33,80,.92) 12%,rgba(26,33,80,.62) 62%,rgba(38,47,107,.5))}
.cta__inner{position:relative;z-index:2;text-align:center;display:flex;flex-direction:column;align-items:center}
.cta__inner .eyebrow{justify-content:center}
.cta__inner h2{color:#fff;margin:1.5rem 0 0;max-width:20ch}
.cta__inner h2 em{color:var(--yellow)}
.cta__sub{color:rgba(255,255,255,.8);max-width:46ch;margin-top:1.5rem;font-size:1.075rem}
.cta__actions{display:flex;gap:.85rem;flex-wrap:wrap;justify-content:center;margin-top:2.25rem}
.cta__phones{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.35rem .75rem;
  margin-top:1.5rem;color:rgba(255,255,255,.8);font-size:1rem}
.cta__phones a{color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(255,255,255,.4);white-space:nowrap}
.cta__phones a:hover{text-decoration-color:var(--yellow)}
.cta__phones span{color:rgba(255,255,255,.45)}
@media (max-width:480px){
  .cta__phones{flex-direction:column;gap:.45rem}
  .cta__phones span{display:none}
  .campus-card__sep{display:none}
  .campus-card__meta a{display:block;width:fit-content}
}

/* =====================================================================
   FOOTER
   ===================================================================== */
.footer{background:var(--cream);padding:clamp(3.5rem,7vw,5.5rem) 0 2.5rem;color:var(--ink)}
.footer__grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:clamp(2rem,4vw,3rem)}
.footer__brand img{height:68px;width:auto;margin-bottom:1.25rem}
.footer__brand p{font-size:.95rem;max-width:28ch}
.footer__col h4{font-family:var(--sans);font-size:.78rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--navy);margin-bottom:1rem}
.footer__col p,.footer__col a{display:block;font-size:.925rem;color:var(--muted);margin-bottom:.5rem;
  transition:color .25s var(--ease)}
.footer__col a:hover{color:var(--navy)}
.footer__ack{margin-top:clamp(3rem,6vw,4.5rem);
  font-size:.82rem;line-height:1.7;color:var(--muted);max-width:80ch;
  margin-inline:auto;text-align:center}
.footer__base{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.footer__base p{font-size:.82rem}

/* =====================================================================
   SUB-PAGE HEADER  (compact: never more than ~48% of viewport height)
   Reuses the hero's visual language (navy scrim over photography, light
   eyebrow, serif title) at a fraction of the size, so a sub-page reads as
   part of the same site without repeating the full video hero.
   ===================================================================== */
.pagehead{
  position:relative;overflow:hidden;
  height:46vh;min-height:300px;max-height:max(520px,26vw);
  display:flex;align-items:flex-end;
  /* reserves clearance for the fixed nav above the bottom-anchored
     content: a no-op for normal short titles (the box already has
     more headroom than this), but stops a longer heading's top line
     from sliding up behind the nav on a short/mobile box. */
  padding-top:var(--nav-h);
  margin-top:0;
}
.pagehead__img{position:absolute;inset:0}
.pagehead__img img{width:100%;height:100%;object-fit:cover;object-position:var(--ph-pos,center 30%);transform-origin:50% 0}
/* per-page focal points keep faces below the overlaid nav; the zoom is top-anchored so it only pushes faces down */
@media (max-width:820px){.pagehead__img img{object-position:var(--ph-pos-t,var(--ph-pos,center 30%));transform:scale(var(--ph-zoom-t,1))}}
@media (max-width:560px){.pagehead__img img{object-position:var(--ph-pos-m,var(--ph-pos-t,var(--ph-pos,center 30%)));transform:scale(var(--ph-zoom-m,var(--ph-zoom-t,1)))}}
/* Framed headers: when a full-bleed crop cannot show every face, the photo is
   framed below the nav (-below) and/or as a right-hand panel (-panel), over a
   soft-focus copy of itself so the header still reads as one photo. */
.pagehead--fit{background:var(--navy-deep);
  --ph-mx:linear-gradient(#000,#000);--ph-my:linear-gradient(#000,#000)}
.pagehead--fit::before{content:"";position:absolute;inset:-40px;
  background:var(--ph-bg) center 30%/cover no-repeat;filter:blur(24px) saturate(1.05);opacity:.85}
.pagehead--fit .pagehead__img{-webkit-mask-image:var(--ph-mx),var(--ph-my);mask-image:var(--ph-mx),var(--ph-my);
  -webkit-mask-composite:source-in;mask-composite:intersect}
@media (min-width:821px){
  .ph-d-below .pagehead__img{top:var(--nav-h)}
  .ph-d-below{--ph-my:linear-gradient(to bottom,transparent,#000 8px)}
  .ph-d-panel .pagehead__img{left:auto;width:var(--ph-pw)}
  .ph-d-panel{--ph-mx:linear-gradient(to right,transparent,#000 12%)}
  /* stops short of the rating card so it never sits over a face */
  .ph-d-inset .pagehead__img{right:calc(var(--gut) + 17rem)}
  .ph-d-inset{--ph-mx:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent)}
}
@media (min-width:561px) and (max-width:820px){
  .ph-t-below .pagehead__img{top:var(--nav-h)}
  .ph-t-below{--ph-my:linear-gradient(to bottom,transparent,#000 8px)}
  .ph-t-panel .pagehead__img{left:auto;width:var(--ph-pw-t)}
  .ph-t-panel{--ph-mx:linear-gradient(to right,transparent,#000 12%)}
}
@media (max-width:560px){
  .ph-m-below .pagehead__img{top:var(--nav-h)}
  .ph-m-below{--ph-my:linear-gradient(to bottom,transparent,#000 8px)}
}
.pagehead__scrim{position:absolute;inset:0;
  background:
    linear-gradient(to top, rgba(21,27,63,.92) 0%, rgba(21,27,63,.62) 45%, rgba(21,27,63,.28) 100%),
    linear-gradient(to right, rgba(21,27,63,.35) 0%, rgba(21,27,63,0) 60%);
}
.pagehead__content{position:relative;z-index:2;width:min(100% - 2*var(--gut),var(--max));
  margin-inline:auto;padding-bottom:clamp(2rem,5vw,3.25rem)}
.pagehead__content h1{color:#fff;margin-top:1rem;text-shadow:0 2px 24px rgba(0,0,0,.25);
  font-size:clamp(1.6rem,7.2vw,5.25rem)}
.pagehead__content h1 em{color:var(--yellow)}
.pagehead__crumb{color:rgba(255,255,255,.7);font-size:.85rem;margin-top:1rem}
.pagehead__crumb a{color:#fff;font-weight:600}
.pagehead__crumb a:hover{text-decoration:underline}

/* =====================================================================
   MISSION / VISION: same card language as the homepage UVP cards
   (white surface, rounded, soft shadow, pink accent) now paired with
   real photography bleeding to the card's edge, plus a couple of thin
   pink doodle marks for warmth. Palette and type stay exactly on-system
: no new colours or fonts, just a livelier arrangement of the same
   building blocks used everywhere else on the site.
   ===================================================================== */
.mv{padding:calc(var(--sec) / 2) 0 var(--sec);position:relative;overflow:hidden}
.mv__head{max-width:40rem;margin-bottom:clamp(2.5rem,5vw,3.5rem)}
.mv__head h2{color:var(--navy);margin-top:1.25rem}
.mv__intro{margin-top:1.1rem;font-size:1.05rem}

.mv__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.25rem,2.5vw,2rem);position:relative;z-index:1}
/* an odd last card sits centred at the same width as its siblings */
.mv__grid--odd{grid-auto-rows:1fr}
.mv__grid--odd .mv-card:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;
  width:calc(50% - clamp(1.25rem,2.5vw,2rem) / 2)}
.way__actions{display:flex;flex-wrap:wrap;gap:.85rem}
.mv-card{background:var(--white);border-radius:var(--r-lg);overflow:hidden;
  display:grid;grid-template-columns:1.15fr .85fr;align-items:stretch;
  box-shadow:0 2px 4px rgba(38,47,107,.04),0 24px 48px -32px rgba(38,47,107,.35);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.mv-card:hover{transform:translateY(-6px);box-shadow:0 2px 4px rgba(38,47,107,.05),0 34px 60px -34px rgba(38,47,107,.45)}
.mv-card__text{padding:clamp(1.75rem,3.2vw,2.5rem)}
.mv-card__icon{width:52px;height:52px;border-radius:50%;background:#FBE9EF;color:var(--navy);
  display:grid;place-items:center;margin-bottom:1.25rem}
.mv-card__icon svg{width:24px;height:24px}
.mv-card h3{color:var(--navy);margin-bottom:0}
.mv-card .card__rule{display:block;margin:.9rem 0 1.35rem}
.mv-card__text p + p{margin-top:.9rem}
.mv-card__text p{font-size:.95rem}
.mv-card__media{position:relative;overflow:hidden;min-height:14rem}
.mv-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.mv-card:hover .mv-card__media img{transform:scale(1.05)}
/* fade the photo into the card's white surface instead of a hard seam */
.mv-card__media::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to right, var(--white) 0%, rgba(255,255,255,.85) 6%, rgba(255,255,255,0) 26%)}
/* pets card click: popup covers the entire card footprint */
#pets .mv-card{cursor:zoom-in}
#pets .mv-card.is-open{cursor:zoom-out}
#pets .mv-card:focus-visible{outline:3px solid var(--pink);outline-offset:4px}
.pet-popup{position:fixed;z-index:9999;pointer-events:none;
  opacity:0;transform:scale(.96);
  transition:opacity .22s ease,transform .22s ease;
  border-radius:var(--radius,12px);overflow:hidden;
  background:rgba(255,255,255,.96);
  box-shadow:0 8px 24px rgba(0,0,0,.18),0 32px 64px -16px rgba(0,0,0,.28)}
.pet-popup.is-visible{opacity:1;transform:scale(1)}
.pet-popup img{display:block;width:100%;height:100%;object-fit:cover}

/* thin dotted-line doodles: brand pink only, kept faint and out of the
   way of any text so the section stays calm rather than cluttered */
.mv__doodle{position:absolute;width:60px;height:60px;opacity:.5;pointer-events:none;z-index:0}
.mv__doodle--heart{top:8%;left:2%}
.mv__doodle--sun{top:4%;right:3%}

/* =====================================================================
   AGE GROUPS: real child cut-outs emerging from soft organic shapes.
   Each card uses only the existing brand palette; the small variation in
   shape, colour and child angle keeps the trio playful but cohesive.
   ===================================================================== */
.ages{padding:var(--sec) 0;position:relative;overflow:hidden;background:var(--white)}
.ages::before,.ages::after{content:"";position:absolute;pointer-events:none;border-radius:50%}
.ages::before{width:28rem;aspect-ratio:1;left:-16rem;top:-13rem;
  background:radial-gradient(circle,rgba(229,121,157,.13),transparent 68%)}
.ages::after{width:30rem;aspect-ratio:1;right:-18rem;bottom:-16rem;
  background:radial-gradient(circle,rgba(250,223,6,.14),transparent 68%)}
.ages .wrap{position:relative;z-index:1}
.ages__head{text-align:center;max-width:46rem;margin:0 auto clamp(2.75rem,5vw,4rem)}
.ages__head .eyebrow{justify-content:center}
.ages__head h2{color:var(--navy);margin-top:1.25rem}
.ages__intro{font-size:1.05rem;margin-top:1.1rem}
.ages__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2.2vw,1.75rem)}

.age-card{--age-main:var(--pink);--age-accent:var(--navy);
  background:var(--cream);border-radius:var(--r-lg);overflow:hidden;position:relative;
  box-shadow:0 2px 4px rgba(38,47,107,.04),0 24px 48px -32px rgba(38,47,107,.35);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.age-card:hover{transform:translateY(-7px);
  box-shadow:0 2px 4px rgba(38,47,107,.05),0 36px 64px -36px rgba(38,47,107,.5)}
.age-card--nursery{--age-main:var(--yellow);--age-accent:var(--pink)}
.age-card--toddlers{--age-main:var(--pink);--age-accent:var(--navy)}
.age-card--kindergarten{--age-main:var(--navy);--age-accent:var(--yellow)}

.age-card__visual{height:clamp(20rem,29vw,23.5rem);position:relative;isolation:isolate;overflow:hidden}
.age-card__visual::after{content:"";position:absolute;z-index:3;inset:auto 0 0;height:4.5rem;
  pointer-events:none;background:linear-gradient(to bottom,rgba(251,248,244,0),var(--cream) 88%)}
.age-card__shape{position:absolute;z-index:0;width:96%;height:auto;left:50%;top:1.1rem;
  transform:translateX(-50%);overflow:visible}
.age-card__shape-main{fill:var(--age-main)}
.age-card__shape-accent{fill:none;stroke:var(--age-accent);stroke-width:3.5;
  stroke-linecap:round;stroke-dasharray:2 10;opacity:.8}
.age-card__visual img{position:absolute;z-index:2;left:50%;height:auto;max-width:none;
  filter:drop-shadow(0 16px 14px rgba(26,33,80,.15));
  transform:translateX(-50%) rotate(var(--child-rotate,0deg));transform-origin:50% 90%;
  transition:transform .65s var(--ease)}
.age-card:hover .age-card__visual img{transform:translateX(-50%) translateY(-8px) rotate(var(--child-hover-rotate,0deg))}
.age-card--nursery .age-card__visual img{width:78%;bottom:-1.1rem;--child-rotate:-1deg;--child-hover-rotate:1deg}
.age-card--toddlers .age-card__visual img{width:auto;height:160%;left:49%;bottom:-13rem;--child-rotate:1deg;--child-hover-rotate:-.5deg}
/* top-anchored so the head keeps the same overlap with the blob at every
   card height, which bottom-anchoring loses as .age-card__visual reflows */
.age-card--kindergarten .age-card__visual img{width:74%;top:.5rem;bottom:auto;--child-rotate:-1deg;--child-hover-rotate:1deg}

.age-card__copy{position:relative;padding:clamp(1.5rem,2.8vw,2rem);text-align:center;background:var(--cream)}
.age-card__copy::before{content:"";position:absolute;left:50%;top:0;transform:translate(-50%,-50%);
  width:46px;height:3px;background:var(--pink);border-radius:3px}
.age-card__num{display:block;font-size:.68rem;font-weight:750;letter-spacing:.16em;color:var(--pink);margin-bottom:.55rem}
.age-card h3{color:var(--navy);font-size:clamp(1.45rem,2.2vw,1.8rem);margin-bottom:.65rem}
.age-card__copy p{font-size:.93rem;max-width:30ch;margin-inline:auto}
/* same CTA on every card, pinned to the card foot so the three line up */
.age-card{display:flex;flex-direction:column}
.age-card__copy{flex:1;display:flex;flex-direction:column;align-items:center}
.age-card__copy p{margin-bottom:1.4rem}
.age-card__cta{margin-top:auto}

/* =====================================================================
   "THE ELLES BELLES WAY": text + image split, mirrors the homepage
   About section's collage/text layout but with a single image so it
   reads distinctly while staying in the same visual family.
   ===================================================================== */
.way{padding:var(--sec) 0}
/* Cheltenham page only: "Meet The Team" sits between two sections that
   already each own half of the standard gap, so this instance's own
   full var(--sec) on both sides was stacking to roughly double the
   site's normal section rhythm. Match the alternating half/zero
   pattern already used by its neighbours instead. */
.way#team{padding-top:0;padding-bottom:calc(var(--sec) / 2)}
.way__body{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2.5rem,6vw,5rem);align-items:center}
.way__media{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3.4;
  box-shadow:0 2px 4px rgba(38,47,107,.04),0 30px 60px -34px rgba(38,47,107,.4)}
.way__media img{width:100%;height:100%;object-fit:cover}
/* the brand-story slot holds a 16:9 player rather than a photo, so it opts out
   of the portrait-ish photo ratio and lets the player fill the box */
.way__media--video{aspect-ratio:16/9}
.way__media--video .whyus__video{aspect-ratio:unset;height:100%;max-width:none;border-radius:0;box-shadow:none}
.way__text h2{margin-bottom:1.5rem}
.way__text p + p{margin-top:1.1rem}
.way--reverse .way__body{grid-template-columns:1.1fr 1fr}
.way--reverse .way__media{order:2}

/* =====================================================================
   FAQ: a calm two-column lead-in with the site's existing accordion
   surface on the right. The first answer is opened by main.js.
   ===================================================================== */
.faq{padding:0 0 var(--sec);position:relative}
.faq__grid{display:grid;grid-template-columns:.72fr 1.28fr;gap:clamp(2.5rem,6vw,5rem);align-items:start}
.faq__head{position:sticky;top:calc(var(--nav-h) + 2rem)}
/* the campus variant's questions column had no top offset of its own,
   so it sat flush against the section edge while the head column
   (padded separately) floated lower, so give the whole section even
   top spacing instead, so both columns start level. */
.faq--campus{padding-top:var(--sec)}
/* the standalone FAQ page has no section above it, so it needs the same
   comfortable gap below the page header that the campus variant gets */
.faq--page{padding-top:var(--sec)}
.faq--page .faq__media{margin:2rem 0 0;border-radius:var(--r-lg);overflow:hidden;
  background:var(--navy-tint);aspect-ratio:4/3}
.faq--page .faq__media img{width:100%;height:100%;object-fit:cover;object-position:50% 12%}
@media (max-width:900px){.faq--page .faq__media{display:none}}
.faq__head h2{color:var(--navy);margin-top:1.25rem}
.faq__intro{font-size:1.05rem;margin-top:1.1rem;max-width:35ch}
.faq__list{gap:.85rem}
.faq__list .acc__item{border:1px solid transparent}
.faq__list .acc__item.is-open{border-color:rgba(229,121,157,.28)}
.faq__list .acc__top{padding:1.3rem clamp(1.2rem,2.2vw,1.75rem);font-size:clamp(1.08rem,1.45vw,1.25rem)}
.faq__list .acc__top:hover{background:rgba(229,121,157,.055)}
.faq__list .acc__panel > div{padding:0 clamp(1.2rem,2.2vw,1.75rem) 1.5rem}
.faq__list .acc__panel p{font-size:.95rem;line-height:1.75}
.faq__list .acc__panel p + p{margin-top:1.1rem}
.faq__list .acc__panel ul{margin-top:.75rem;display:grid;gap:.45rem}
.faq__list .acc__panel ul li{position:relative;padding-left:1.2rem;font-size:.95rem;line-height:1.65}
.faq__list .acc__panel ul li::before{content:'';position:absolute;left:0;top:.6em;
  width:.4rem;height:.4rem;border-radius:50%;background:var(--pink)}
.faq__link{color:var(--navy);font-weight:650;text-decoration:underline;text-decoration-color:var(--pink);text-underline-offset:3px}
.faq__link:hover{color:var(--pink)}

/* =====================================================================
   REVEAL
   ===================================================================== */
.reveal{opacity:0;transform:translateY(26px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
  transition-delay:calc(var(--d,0) * 90ms)}
.reveal.on{opacity:1;transform:none}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:1080px){
  .nav__links{display:none}
  .nav__actions{margin-left:auto}
  .nav__toggle{display:block}
  .about__body{grid-template-columns:1fr;gap:3rem}
  .family__top{grid-template-columns:1fr;gap:2.5rem}
  .family__visual{max-width:26rem;margin-inline:auto}
  .mk__card{padding:.42rem .72rem}
  .mk__card b{font-size:.9rem}
  .mk__badge{font-size:.56rem}
  .mk__badge--cta{font-size:.6rem}
  .stack__card{grid-template-columns:1fr;gap:2rem}
  .stack__media{order:-1;aspect-ratio:16/9}
  .stack__card{position:relative;top:auto;margin-bottom:1.5rem}
  .mv__grid{grid-template-columns:1fr;max-width:34rem;margin-inline:auto}
  .mv__grid--odd .mv-card:last-child:nth-child(odd){width:auto;justify-self:stretch}
  .mv__doodle{width:44px;height:44px}
  .age-card__visual{height:21rem}
  .way__body,.way--reverse .way__body{grid-template-columns:1fr;gap:2.5rem}
  .way--reverse .way__media{order:-1}
  .faq__grid{grid-template-columns:1fr;gap:2.5rem}
  .faq__head{position:static;max-width:44rem}
  .faq__intro{max-width:44rem}
}
@media (max-width:820px){
  :root{--nav-h:64px}
  .nav__logo{padding:.4rem .85rem;margin:-.4rem -.85rem}
  .nav__logo img{height:46px}
  .nav.is-stuck .nav__logo img{height:38px}
  .uvp::before{background-size:720px 420px;opacity:.18}
  .uvp__grid{grid-template-columns:1fr;max-width:26rem;margin-inline:auto}
  .ages__grid{grid-template-columns:1fr;max-width:30rem;margin-inline:auto}
  .age-card__visual{height:24rem}
  .family__band{grid-template-columns:1fr;gap:2rem}
  .marquee{grid-template-columns:repeat(2,1fr);height:min(70vh,620px)}
  .footer__grid{grid-template-columns:repeat(2,1fr)}
  .hero__content{flex-direction:column;align-items:flex-start}
  .hero__trust{max-width:none;width:100%;display:flex;align-items:center;gap:1rem}
  .hero__trust p{margin-top:0;font-size:.8rem}
  .about__collage{gap:.75rem}
  /* min-height, not height: short titles still land at exactly this
     size (unchanged), but a longer heading that needs more room can
     grow the box instead of clipping behind the fixed nav. */
  .pagehead{height:auto;min-height:max(42vh,260px)}
}
@media (max-width:560px){
  /* the bar also carries the CTA pill and the hamburger at this width */
  .nav__logo img{height:52px}
  .uvp::before{background-size:560px 327px;background-position:center 1rem;opacity:.17}
  .age-card__visual{height:21rem}
  .faq__list .acc__top{padding:1.1rem 1.15rem}
  .nav.is-stuck .nav__logo img{height:43px}
  .marquee{grid-template-columns:1fr;height:min(64vh,520px)}
  .campuses__intro br{display:none}
  .footer__grid{grid-template-columns:1fr}
  /* only the stacked hero / CTA / menu buttons go full-bleed: never the nav pill */
  .hero__cta,.cta__actions{width:100%}
  .hero__cta .btn,.cta__actions .btn,.mobile__foot .btn{width:100%}
  .hero__scroll{display:none}
  .pagehead{height:auto;min-height:var(--ph-minh-m,max(40vh,240px,70vw))}
  .mv-card{grid-template-columns:1fr}
  .mv-card__media{order:-1;min-height:15rem}
  /* image now sits above the text, so fade its bottom edge (where it meets
     the text panel) instead of its side */
  .mv-card__media::before{background:linear-gradient(to top, var(--white) 0%, rgba(255,255,255,.85) 6%, rgba(255,255,255,0) 26%)}
  .mv__doodle{display:none}
}

/* =====================================================================
   MOTION PREFERENCES
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
  .reveal{opacity:1;transform:none}
  .statement .w{opacity:1;transform:none}
  .marquee__col{animation:none !important;transform:none !important}
  .mk--open .mk__pin::before{animation:none !important;opacity:0}
  .marquee{height:auto;-webkit-mask:none;mask:none}
  .hero__video{display:none}
}

/* marquee keyframes: appended so the JS-set animation names resolve */
@keyframes revUp   { from{transform:translateY(0)}      to{transform:translateY(-50%)} }
@keyframes revDown { from{transform:translateY(-50%)}   to{transform:translateY(0)} }

/* =====================================================================
   CAMPUS DETAIL: accordion + contact card (Cheltenham page).
   Same surfaces, radii and pink accent as the rest of the site; the
   accordion mirrors how this content is grouped on the current site.
   ===================================================================== */
.detail{padding:0 0 calc(var(--sec) / 2)}
/* Cheltenham campus page only: Meet the Team follows directly, so it
   doesn't need the full section gap on top of this section's own */
.detail + .way{padding-top:calc(var(--sec) / 2)}
.detail__head{max-width:44rem;margin-bottom:clamp(2rem,4vw,3rem)}
.detail__head h2{color:var(--navy);margin-top:1.25rem}
.detail__grid{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(1.5rem,3.5vw,3rem);align-items:start}

.acc{display:flex;flex-direction:column;gap:.75rem}
.acc__item{background:var(--white);border-radius:var(--r-md);overflow:hidden;
  box-shadow:0 1px 2px rgba(38,47,107,.04),0 18px 36px -30px rgba(38,47,107,.4);
  transition:box-shadow .35s var(--ease)}
.acc__item.is-open{box-shadow:0 2px 4px rgba(38,47,107,.05),0 26px 48px -30px rgba(38,47,107,.5)}
.acc__top{display:flex;align-items:center;gap:1rem;width:100%;text-align:left;
  padding:1.15rem clamp(1.1rem,2vw,1.6rem);
  font-family:var(--display);font-size:clamp(1.05rem,1.5vw,1.22rem);font-weight:600;
  color:var(--navy);line-height:1.25;text-wrap:pretty}
.acc__chev{margin-left:auto;flex:none;display:flex;color:var(--pink);
  transition:transform .35s var(--ease)}
.acc__chev svg{width:13px;height:9px;display:block}
.acc__item.is-open .acc__chev{transform:rotate(180deg)}
.acc__panel{overflow:hidden;max-height:0;transition:max-height .4s var(--ease)}
.acc__panel > div{padding:0 clamp(1.1rem,2vw,1.6rem) 1.35rem}
.acc__panel p{font-size:.95rem}

.visit{background:var(--navy);color:#fff;border-radius:var(--r-lg);
  padding:clamp(1.6rem,2.6vw,2.1rem);position:sticky;top:calc(var(--nav-h) + 1rem)}
.visit h3{color:#fff;font-size:1.45rem}
.visit .card__rule{display:block;margin:.85rem 0 1.35rem}
.visit__list{display:flex;flex-direction:column;gap:1.1rem}
.visit__label{display:block;font-size:.68rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--yellow);margin-bottom:.3rem}
.visit__val{display:block;font-size:.95rem;color:rgba(255,255,255,.85);line-height:1.5;
  transition:color .25s var(--ease)}
a.visit__val:hover{color:#fff;text-decoration:underline}
.visit__cta{width:100%;margin-top:1.6rem;background:var(--yellow);color:var(--navy-deep);box-shadow:none}
.visit__cta:hover{background:#fff;color:var(--navy)}

@media (max-width:1080px){
  .detail__grid{grid-template-columns:1fr}
  .visit{position:static;max-width:34rem}
}

/* =====================================================================
   CHELTENHAM CHOICE TABS: a broad, editorial tab surface inspired by
   the supplied interaction reference, expressed in the Elles Belles
   palette and rounded visual language.
   ===================================================================== */
.why-tabs{padding:calc(var(--sec) / 2) 0 var(--sec);position:relative;overflow:hidden;background:var(--cream)}
.why-tabs::before{content:"";position:absolute;width:24rem;aspect-ratio:1;border-radius:50%;
  right:-13rem;top:-11rem;background:radial-gradient(circle,rgba(229,121,157,.16),transparent 68%);pointer-events:none}
.why-tabs__head{position:relative;max-width:50rem;text-align:center;margin:0 auto clamp(2.5rem,5vw,4rem)}
.why-tabs__head .eyebrow{justify-content:center}
.why-tabs__head h2{color:var(--navy);margin-top:1.25rem}
.why-tabs__shell{position:relative;background:var(--white);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 2px 4px rgba(38,47,107,.04),0 32px 64px -42px rgba(38,47,107,.5)}
.why-tabs__nav{display:grid;grid-template-columns:repeat(4,1fr);background:rgba(229,121,157,.16);
  border-bottom:1px solid rgba(38,47,107,.08)}
.why-tab{position:relative;padding:1.15rem .9rem;color:var(--navy);font-family:var(--sans);
  font-size:clamp(.82rem,1.25vw,.98rem);font-weight:700;letter-spacing:.01em;text-align:center;
  transition:color .3s var(--ease),background .3s var(--ease)}
.why-tab::after{content:"";position:absolute;left:50%;bottom:0;width:0;height:4px;border-radius:4px 4px 0 0;
  background:var(--yellow);transform:translateX(-50%);transition:width .35s var(--ease)}
.why-tab:hover{background:rgba(255,255,255,.55)}
.why-tab.is-active{background:var(--navy);color:#fff}
.why-tab.is-active::after{width:42px}
.why-tab:focus-visible{outline:3px solid var(--yellow);outline-offset:-4px}
.why-panel{display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);min-height:34rem;background:var(--white)}
.why-panel[hidden]{display:none}
.why-panel.is-active{animation:whyPanelIn .55s var(--ease) both}
.why-panel__copy{display:flex;flex-direction:column;justify-content:center;padding:clamp(2.2rem,5vw,4.25rem)}
.why-panel__kicker{display:block;margin-bottom:1rem;color:var(--pink);font-size:.72rem;font-weight:750;
  letter-spacing:.15em;text-transform:uppercase}
.why-panel h3{color:var(--navy);font-size:clamp(2rem,3.5vw,3rem);line-height:1.06;margin-bottom:1.4rem}
.why-panel p{font-size:1rem;line-height:1.75}
.why-panel p + p{margin-top:1rem}
.why-panel .btn{align-self:flex-start;margin-top:1.8rem}
.why-panel__media{position:relative;min-height:26rem;overflow:hidden}
.why-panel__media::before{content:"";position:absolute;z-index:1;inset:0 auto 0 0;width:18%;pointer-events:none;
  background:linear-gradient(to right,var(--white),rgba(255,255,255,0))}
.why-panel__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.why-panel.is-active .why-panel__media img{animation:whyImageIn .75s var(--ease) both}
.why-tabs__shell:hover .why-panel.is-active .why-panel__media img{transform:scale(1.02)}
.way__team-copy .btn{margin-top:1.9rem}

@keyframes whyPanelIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes whyImageIn{from{opacity:.7;transform:scale(1.035)}to{opacity:1;transform:scale(1)}}

@media (max-width:820px){
  .why-tabs__nav{display:flex;overflow-x:auto;scrollbar-width:none}
  .why-tabs__nav::-webkit-scrollbar{display:none}
  .why-tab{flex:1 0 8rem;white-space:nowrap}
  .why-panel{grid-template-columns:1fr}
  .why-panel__media{order:-1;min-height:0;aspect-ratio:16/10}
  .why-panel__media::before{inset:auto 0 0;width:auto;height:24%;background:linear-gradient(to top,var(--white),rgba(255,255,255,0))}
  .why-panel__copy{padding:clamp(2rem,7vw,3rem)}
}

/* three age-group tabs: share the row evenly, no sideways scroll on phones */
.why-tabs__shell--3 .why-tabs__nav{grid-template-columns:repeat(3,1fr)}
@media (max-width:820px){
  .why-tabs__shell--3 .why-tab{flex:1 1 0;min-width:0;padding-inline:.4rem}
}

@media (max-width:560px){
  .why-tabs__shell{border-radius:var(--r-md)}
  .why-panel h3{font-size:clamp(1.75rem,8vw,2.25rem)}
  .way__team-copy .btn{margin-top:1.6rem}
}

/* =====================================================================
   MEET THE FOUNDER: portrait intro
   The homepage's About section is text beside a collage; this is the same
   split at a different weight: one portrait, framed rather than bled, so
   a single person reads as the subject instead of a mood board. The frame
   is the pink rule and yellow tag already used on the family portrait.
   ===================================================================== */
.founder{padding:var(--sec) 0}
.founder__grid{display:grid;grid-template-columns:.82fr 1.18fr;
  gap:clamp(2.5rem,6vw,5rem);align-items:center}

.founder__portrait{position:relative;isolation:isolate}
.founder__portrait img{width:100%;height:100%;object-fit:cover;
  border-radius:var(--r-lg) var(--r-lg) 200px 200px;
  box-shadow:0 2px 4px rgba(38,47,107,.05),0 40px 70px -38px rgba(38,47,107,.55)}
/* offset outline echoing the portrait's silhouette: depth without a box */
.founder__portrait::before{content:"";position:absolute;z-index:-1;
  inset:1.5rem -1.5rem -1.5rem 1.5rem;border:1.5px solid var(--pink);opacity:.45;
  border-radius:var(--r-lg) var(--r-lg) 200px 200px}

.founder__name{color:var(--navy);margin:1.25rem 0 .35rem;
  font-size:clamp(2.4rem,5vw,3.6rem)}
.founder__role{font-family:var(--sans);font-size:.78rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--pink)}
.founder__text{margin-top:1.75rem}
.founder__text p + p{margin-top:1.1rem}

/* =====================================================================
   TIMELINE: the founder's story as a walk down the page
   Same pink scroll spine as the homepage's "potential" stack (shared
   [data-spine] behaviour in main.js), with the cards on one side of it.
   ===================================================================== */
.story{padding:0 0 var(--sec);position:relative}
.story__head{max-width:46rem;margin-bottom:clamp(2.5rem,5vw,4rem)}
.story__head h2{color:var(--navy);margin-top:1.25rem}

.timeline{position:relative;padding-left:clamp(2.25rem,4vw,3.5rem)}
.timeline__spine{position:absolute;left:0;top:.5rem;width:2px;
  height:calc(100% - 1rem);overflow:visible}
.timeline__item{position:relative;padding-bottom:clamp(2rem,4vw,3rem)}
.timeline__item:last-child{padding-bottom:0}
/* marker sits back on the spine */
.timeline__item::before{content:"";position:absolute;
  left:calc(-1 * clamp(2.25rem,4vw,3.5rem) - 6px);top:.55rem;
  width:14px;height:14px;border-radius:50%;background:var(--cream);
  border:3px solid var(--pink);transition:transform .4s var(--ease),background .4s var(--ease)}
.timeline__item:hover::before{transform:scale(1.25);background:var(--pink)}

.timeline__card{background:var(--white);border-radius:var(--r-lg);
  padding:clamp(1.5rem,3vw,2.25rem);
  box-shadow:0 2px 4px rgba(38,47,107,.04),0 24px 48px -34px rgba(38,47,107,.35);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.timeline__card:hover{transform:translateY(-5px);
  box-shadow:0 2px 4px rgba(38,47,107,.05),0 34px 60px -34px rgba(38,47,107,.45)}
.timeline__when{font-family:var(--sans);font-size:.7rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--pink);display:block;
  margin-bottom:.7rem}
.timeline__card h3{color:var(--navy);margin-bottom:.7rem;font-size:clamp(1.3rem,2vw,1.6rem)}
.timeline__card p{font-size:.975rem}
.timeline__card p + p{margin-top:.9rem}

/* =====================================================================
   PULL QUOTE: navy band, one line, nothing else competing
   ===================================================================== */
.pullquote{background:var(--navy);color:#fff;border-radius:var(--r-xl);
  margin-inline:clamp(0px,2vw,24px);padding:clamp(3.5rem,8vw,6rem) 0;
  position:relative;overflow:hidden}
.pullquote::before{content:"";position:absolute;top:-40%;left:-8%;width:46%;aspect-ratio:1;
  background:radial-gradient(circle,rgba(250,223,6,.16),transparent 68%);pointer-events:none}
.pullquote::after{content:"";position:absolute;bottom:-38%;right:-8%;width:46%;aspect-ratio:1;
  background:radial-gradient(circle,rgba(229,121,157,.22),transparent 68%);pointer-events:none}
.pullquote__inner{position:relative;z-index:1;text-align:center;
  max-width:44rem;margin-inline:auto}
.pullquote__mark{font-family:var(--display);font-size:5rem;line-height:.6;
  color:var(--yellow);display:block;margin-bottom:1rem}
.pullquote blockquote{font-family:var(--display);font-weight:500;line-height:1.18;
  letter-spacing:-.02em;font-size:clamp(1.75rem,4vw,3rem);color:#fff;margin:0}
.pullquote cite{display:block;font-family:var(--sans);font-style:normal;
  font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.62);margin-top:1.75rem}

/* =====================================================================
   PLAIN CARD TRIO: the UVP card without the photo, for sections where
   the substance is the words. Same surface, radius, shadow and pink rule.
   ===================================================================== */
.trio{padding:var(--sec) 0}
.trio__head{max-width:46rem;margin-bottom:clamp(2.5rem,5vw,3.5rem)}
.trio__head h2{color:var(--navy);margin-top:1.25rem}
.trio__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.2vw,1.75rem)}
.card--plain{padding:clamp(1.6rem,3vw,2.25rem)}
.card--plain .card__badge{width:60px;height:60px;margin:0 0 1.25rem}
.card--plain .card__icon{width:28px;height:28px;color:var(--navy)}
.card--plain h3{color:var(--navy);margin-bottom:.75rem;font-size:clamp(1.25rem,1.9vw,1.5rem)}
.card--plain p{font-size:.95rem}
.card--plain .card__rule{margin:1.5rem 0 0}

/* =====================================================================
   CHILDCARE SUBSIDY: three numbered steps
   Reads as a route, not a list: an oversized serif numeral, the action,
   and the link out to the government service that actually does it.
   ===================================================================== */
.steps{padding:var(--sec) 0;background:var(--white)}
/* the calculator and step guide read as consecutive planning tools */
.ccs-calculator + .steps{padding-top:calc(var(--sec) / 1.7)}
.steps__head{max-width:46rem;margin-bottom:clamp(2.5rem,5vw,3.5rem)}
.steps__head h2{color:var(--navy);margin-top:1.25rem}
/* shared lead-in paragraph for the sections added with these pages */
.steps__intro{margin-top:1.1rem;font-size:1.05rem}
.steps__grid{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1rem,2.2vw,1.75rem);counter-reset:step}
.step{position:relative;background:var(--cream);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:clamp(1.6rem,3vw,2.25rem);
  display:flex;flex-direction:column;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease)}
.step:hover{transform:translateY(-6px);border-color:transparent;
  box-shadow:0 2px 4px rgba(38,47,107,.05),0 30px 56px -34px rgba(38,47,107,.45)}
.step__num{font-family:var(--display);font-size:3.25rem;font-weight:600;line-height:1;
  color:var(--navy-tint);display:block;margin-bottom:.5rem;
  transition:color .5s var(--ease)}
.step:hover .step__num{color:var(--pink)}
.step h3{color:var(--navy);margin-bottom:.75rem;font-size:clamp(1.2rem,1.8vw,1.45rem)}
.step p{font-size:.95rem}
.step__list{margin-top:.9rem;display:grid;gap:.55rem}
.step__list li{position:relative;padding-left:1.15rem;font-size:.925rem;color:var(--muted)}
.step__list li::before{content:"";position:absolute;left:0;top:.62em;
  width:5px;height:5px;border-radius:50%;background:var(--pink)}
.step .link-arrow{margin-top:auto;padding-top:1.5rem}

/* CCS calculator: a generous editorial split using the brand's cream,
   navy and pink rather than the reference site's visual treatment. */
.ccs-calculator{padding:calc(var(--sec) / 1.6) 0 calc(var(--sec) / 1.8);background:var(--navy-tint)}
.ccs-calculator__grid{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(2.5rem,6vw,5.5rem);align-items:center}
.ccs-calculator__media{position:relative;overflow:hidden;border-radius:var(--r-xl);
  aspect-ratio:1.18/1;background:var(--navy-tint);
  box-shadow:0 3px 8px rgba(38,47,107,.05),0 34px 64px -38px rgba(38,47,107,.48)}
.ccs-calculator__media::after{content:"";position:absolute;right:-2.5rem;bottom:-2.5rem;
  width:10rem;height:10rem;border:1.5rem solid rgba(229,121,157,.65);border-radius:50%}
.ccs-calculator__media img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.ccs-calculator__copy{max-width:36rem}
.ccs-calculator__copy h2{color:var(--navy);margin:1.25rem 0 1.35rem}
.ccs-calculator__copy p:not(.eyebrow){font-size:1.05rem}
.ccs-calculator__button{margin-top:2rem;min-width:11rem}
@media (max-width:820px){
  .ccs-calculator__grid{grid-template-columns:1fr;gap:2.25rem}
  .ccs-calculator__media{aspect-ratio:16/11}
  .ccs-calculator__media::after{width:6rem;height:6rem;border-width:1rem;right:-2.25rem;bottom:-2.25rem}
  .ccs-calculator__copy{max-width:44rem}
}

/* =====================================================================
   CONTACT: campus tabs driving one shared map, plus the message form
   ===================================================================== */
.contact{padding:var(--sec) 0}
.contact__head{max-width:46rem;margin-bottom:clamp(2rem,4vw,3rem)}
.contact__head h2{color:var(--navy);margin-top:1.25rem}

.ctabs{display:inline-flex;gap:.35rem;background:var(--white);padding:.35rem;
  border-radius:100px;margin-bottom:clamp(1.75rem,3.5vw,2.5rem);
  box-shadow:0 2px 4px rgba(38,47,107,.05),0 18px 40px -30px rgba(38,47,107,.5)}
.ctab{padding:.72rem 1.6rem;border-radius:100px;font-size:.925rem;font-weight:650;
  color:var(--muted);transition:background .35s var(--ease),color .35s var(--ease)}
.ctab:hover{color:var(--navy)}
.ctab[aria-selected="true"]{background:var(--navy);color:#fff}

.contact__grid{display:grid;grid-template-columns:.9fr 1.1fr;
  gap:clamp(1.5rem,3.5vw,2.75rem);align-items:start}
.cpanel[hidden]{display:none}
.cpanel{animation:fadeUp .5s var(--ease) both}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* the campus card reuses the navy .visit surface from the campus pages */
.cpanel .visit{position:static}
.cpanel .visit__cta{margin-top:1.75rem}

.contact__map{border-radius:var(--r-lg);overflow:hidden;position:relative;
  min-height:clamp(340px,46vh,460px);background:#E9ECF2;
  box-shadow:0 2px 4px rgba(38,47,107,.04),0 30px 60px -38px rgba(38,47,107,.45)}

/* servicing suburbs, as tags */
.suburbs{padding:calc(var(--sec)*.55) 0;background:var(--cream);
  border-top:1px solid rgba(38,47,107,.06)}
.suburbs__head{margin-bottom:clamp(1rem,2vw,1.5rem)}
.suburbs__head h2{color:var(--navy);margin-top:1rem}
.suburbs__list{display:flex;flex-wrap:wrap;gap:.6rem}
.suburbs__list li{background:var(--white);border:1px solid var(--line);
  border-radius:100px;padding:.55rem 1.15rem;font-size:.9rem;color:var(--muted);
  transition:transform .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.suburbs__list li:hover{transform:translateY(-3px);color:var(--navy);
  border-color:rgba(38,47,107,.32)}
.suburbs__list li.is-home{background:var(--navy);border-color:var(--navy);
  color:#fff;font-weight:650}

/* =====================================================================
   FORM: the same fields as the current site's contact form, on the
   site's own surfaces. Validation is native; the submit posts to the
   existing Jotform endpoint the current site already uses.
   ===================================================================== */
.formsec{padding:var(--sec) 0;background:var(--white)}
.formsec__grid{display:grid;grid-template-columns:.85fr 1.15fr;
  gap:clamp(2.5rem,6vw,5rem);align-items:start}
.formsec__aside h2{color:var(--navy);margin-top:1.25rem}
.formsec__aside p{margin-top:1.25rem;font-size:1.05rem}
.formsec__direct{margin-top:2rem;display:grid;gap:1rem}
.formsec__direct a{display:flex;align-items:center;gap:.85rem;font-size:.95rem;
  color:var(--ink);font-weight:600;transition:color .25s var(--ease)}
.formsec__direct a:hover{color:var(--navy)}
.formsec__direct i{width:38px;height:38px;border-radius:50%;background:#FBE9EF;
  color:var(--navy);display:grid;place-items:center;flex:none}
.formsec__direct svg{width:17px;height:17px}

.form{display:grid;gap:1.15rem}
.form__row{display:grid;grid-template-columns:repeat(2,1fr);gap:1.15rem}
.field{display:grid;gap:.45rem}
.field label{font-size:.78rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--navy)}
.field label .req{color:var(--pink)}
.field input,.field select,.field textarea{
  font:inherit;font-size:.975rem;color:var(--ink);width:100%;
  background:var(--cream);border:1.5px solid var(--line);border-radius:var(--r-sm);
  padding:.9rem 1.1rem;
  transition:border-color .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease)}
.field textarea{min-height:9rem;resize:vertical;line-height:1.6}
.field select{appearance:none;cursor:pointer;padding-right:2.75rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 7'%3E%3Cpath fill='none' stroke='%23262F6B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 5 5.5l4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1.1rem center;background-size:11px 8px}
.field input:hover,.field select:hover,.field textarea:hover{border-color:rgba(38,47,107,.28)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;background:var(--white);border-color:var(--navy);
  box-shadow:0 0 0 4px rgba(38,47,107,.1)}
/* only scold a field the visitor has actually left in a bad state.
   :user-invalid waits for real interaction, which :placeholder-shown cannot
   do on date inputs: those always report a placeholder, so an untouched
   empty date was being flagged red the moment the page loaded. */
.field input:user-invalid,
.field select:user-invalid,
.field textarea:user-invalid{border-color:var(--pink)}
.form__actions{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap;margin-top:.35rem}
.form__note{font-size:.85rem;color:var(--muted);flex:1;min-width:14rem}
.form__privacy{margin:0;font-size:.8rem;line-height:1.55;color:var(--muted)}
.form__privacy a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.jf-embed{width:100%}
.jf-embed iframe{display:block;width:100%;border:0;overflow:hidden;background:transparent}
.jf-embed--simple{max-width:50rem;margin-inline:auto}
.jf-after{display:grid;gap:.75rem;margin-top:1.25rem}
.jf-after--center{max-width:50rem;margin-inline:auto;text-align:center}
.jf-after--center .form__note{min-width:0}

@media (max-width:1080px){
  .founder__grid{grid-template-columns:1fr;gap:2.5rem}
  .founder__portrait{max-width:24rem}
  .founder__portrait::before{inset:1rem -1rem -1rem 1rem}
  .trio__grid,.steps__grid{grid-template-columns:1fr;max-width:34rem;margin-inline:auto}
  .contact__grid,.formsec__grid{grid-template-columns:1fr;gap:2.5rem}
  .cpanel .visit{max-width:none}
}
@media (max-width:560px){
  .form__row{grid-template-columns:1fr}
  .ctabs{display:flex;width:100%}
  .ctab{flex:1;padding:.72rem .5rem;text-align:center}
  .founder__portrait::before{display:none}
  .pullquote__mark{font-size:3.5rem}
}

/* =====================================================================
   CHELTENHAM CAMPUS GALLERY: a bento grid built from the campus's real
   photos, dense-packed with a few wide/tall cells so it reads as a
   composed mosaic rather than a uniform grid. Markup is generated by
   main.js from a data array (js/main.js → GALLERY_IMAGES); the section
   here only needs the empty grid mount, #cheltGallery.
   ===================================================================== */
.gallery{padding:var(--sec) 0;background:var(--white)}
.gallery__head{max-width:46rem;margin-bottom:clamp(2rem,4vw,3rem)}
.gallery__head h2{color:var(--navy);margin-top:1.25rem}
.gallery__intro{margin-top:1.1rem;font-size:1.05rem}

/* Scrolling image columns: same marquee mechanic as the Reviews section */
.gallery__grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  height:min(80vh,720px);overflow:hidden;
  width:min(100% - 2*var(--gut),var(--max));margin-inline:auto;
  gap:clamp(.5rem,1.2vw,.85rem);
  -webkit-mask:linear-gradient(to bottom,transparent,#000 9%,#000 91%,transparent);
  mask:linear-gradient(to bottom,transparent,#000 9%,#000 91%,transparent)}

#ormondGallery{
  height:min(58vh,580px);
  -webkit-mask:linear-gradient(to bottom,transparent,#000 6%,#000 94%,transparent);
  mask:linear-gradient(to bottom,transparent,#000 6%,#000 94%,transparent)}

.gallery__col{
  display:flex;flex-direction:column;
  gap:clamp(.5rem,1.2vw,.85rem);will-change:transform}
.gallery__col:hover{animation-play-state:paused}

.gallery__item{
  position:relative;overflow:hidden;border-radius:var(--r-md);
  cursor:pointer;border:0;padding:0;display:block;
  background:var(--navy-tint);aspect-ratio:4/3;flex:none}
.gallery__item img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s ease}
.gallery__item::after{
  content:"";position:absolute;inset:0;
  background:rgba(26,33,80,.4);
  opacity:0;transition:opacity .3s ease}
.gallery__item:hover img{transform:scale(1.06)}
.gallery__item:hover::after{opacity:1}
.gallery__item:focus-visible{
  outline:2px solid var(--pink);outline-offset:2px}

@media (max-width:768px){
  .gallery__grid{height:min(75vh,600px)}
  .gallery__col:nth-child(3){display:none}
}
@media (max-width:480px){
  .gallery__grid{height:min(70vh,500px);grid-template-columns:1fr}
  .gallery__col:nth-child(2){display:none}
}

/* =====================================================================
   GALLERY LIGHTBOX: one overlay, reused for every image; main.js swaps
   the src and caption rather than building a new node per click.
   ===================================================================== */
.lightbox{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center}
.lightbox[hidden]{display:none}
.lightbox__backdrop{position:absolute;inset:0;background:rgba(20,25,64,.94);
  animation:lbFade .3s var(--ease) both}
.lightbox__figure{position:relative;z-index:1;max-width:min(92vw,1240px);
  margin:0 clamp(3.25rem,8vw,5.5rem);animation:lbIn .35s var(--ease) both}
.lightbox__img{display:block;max-width:100%;max-height:82vh;width:auto;height:auto;
  margin-inline:auto;border-radius:var(--r-md);
  box-shadow:0 40px 90px -20px rgba(0,0,0,.65)}
.lightbox__count{text-align:center;color:rgba(255,255,255,.7);font-size:.82rem;
  font-weight:600;letter-spacing:.06em;margin-top:1rem}
.lightbox__close,.lightbox__nav{position:absolute;z-index:2;display:flex;align-items:center;
  justify-content:center;width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;
  transition:background .25s var(--ease),transform .25s var(--ease);flex:none}
.lightbox__close svg,.lightbox__nav svg{width:18px;height:18px}
.lightbox__close:hover,.lightbox__nav:hover{background:rgba(255,255,255,.26)}
.lightbox__close{top:1.5rem;right:1.5rem}
.lightbox__prev{left:clamp(.5rem,2vw,1.5rem);top:50%;transform:translateY(-50%)}
.lightbox__next{right:clamp(.5rem,2vw,1.5rem);top:50%;transform:translateY(-50%)}
.lightbox__prev:hover{transform:translateY(-50%) translateX(-2px)}
.lightbox__next:hover{transform:translateY(-50%) translateX(2px)}
@keyframes lbFade{from{opacity:0}to{opacity:1}}
@keyframes lbIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:none}}

/* =====================================================================
   VIDEO TRIGGER + MODAL: a play button over a still photo, opening a
   popup that embeds the YouTube video only once clicked (nothing loads
   until then), reusing the lightbox's dark backdrop + close-button
   language for visual consistency.
   ===================================================================== */
.video-trigger{position:relative;display:block;width:100%;height:100%;padding:0;border:0;
  cursor:pointer;background:none}
.video-trigger img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s var(--ease)}
.video-trigger::after{content:"";position:absolute;inset:0;background:rgba(20,25,64,.22);
  opacity:0;transition:opacity .3s var(--ease)}
.video-trigger:hover::after,.video-trigger:focus-visible::after{opacity:1}
.video-trigger:hover img{transform:scale(1.05)}
.video-trigger__play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:clamp(52px,8vw,68px);height:clamp(52px,8vw,68px);border-radius:50%;
  background:rgba(255,255,255,.95);display:grid;place-items:center;color:var(--navy);
  box-shadow:0 16px 34px -12px rgba(0,0,0,.55);
  transition:transform .3s var(--ease),background .3s var(--ease),color .3s var(--ease)}
.video-trigger__play svg{width:38%;height:38%;margin-left:3%}
.video-trigger:hover .video-trigger__play{transform:translate(-50%,-50%) scale(1.08);background:var(--yellow)}

.video-modal{position:fixed;inset:0;z-index:320;display:flex;align-items:center;justify-content:center;
  padding:var(--gut)}
.video-modal[hidden]{display:none}
.video-modal__backdrop{position:absolute;inset:0;background:rgba(20,25,64,.94);
  animation:lbFade .3s var(--ease) both}
.video-modal__frame{position:relative;z-index:1;width:min(94vw,1100px);aspect-ratio:16/9;
  background:#000;border-radius:var(--r-md);overflow:hidden;
  box-shadow:0 40px 90px -20px rgba(0,0,0,.65);animation:lbIn .35s var(--ease) both}
.video-modal__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-modal__close{position:absolute;z-index:2;top:.85rem;right:.85rem;
  display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;
  background:rgba(15,18,42,.55);color:#fff;backdrop-filter:blur(6px);
  transition:background .25s var(--ease)}
.video-modal__close:hover{background:rgba(15,18,42,.8)}
.video-modal__close svg{width:18px;height:18px}
body.lb-open{overflow:hidden}

@media (max-width:560px){
  .lightbox__figure{margin:0 3.25rem}
  .lightbox__close{top:.85rem;right:.85rem;width:40px;height:40px}
  .lightbox__prev{left:.4rem}
  .lightbox__next{right:.4rem}
  .lightbox__prev,.lightbox__next{width:40px;height:40px}
  .lightbox__img{max-height:74vh}
}
@media (prefers-reduced-motion: reduce){
  .lightbox__backdrop,.lightbox__figure{animation:none}
}

/* =====================================================================
   EARLY LEARNING HUB: editorial cards and category filters
   ===================================================================== */
.hub-intro{padding:var(--sec) 0 calc(var(--sec) / 2.2)}
.hub-intro__copy{max-width:52rem}
.hub-intro h2{color:var(--navy);margin:1.25rem 0 1.1rem}
.hub-intro__copy > p:last-child{font-size:1.08rem;max-width:62ch}
.hub-browser{padding:0 0 var(--sec)}
.hub-filters{display:flex;gap:.65rem;overflow-x:auto;padding:.35rem .15rem 1.25rem;
  scrollbar-width:none;margin-bottom:clamp(1.75rem,4vw,3rem)}
.hub-filters::-webkit-scrollbar{display:none}
.hub-filter{flex:none;border:1px solid var(--line);border-radius:100px;background:#fff;
  color:var(--navy);font-size:.86rem;font-weight:700;padding:.72rem 1.25rem;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease)}
.hub-filter:hover{transform:translateY(-2px);border-color:var(--pink)}
.hub-filter.is-active{background:var(--navy);border-color:var(--navy);color:#fff}
.hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.4vw,1.8rem)}
.hub-card{display:flex;flex-direction:column;background:#fff;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid rgba(38,47,107,.08);box-shadow:0 18px 48px -36px rgba(38,47,107,.55);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.hub-card[hidden]{display:none}
.hub-card:hover{transform:translateY(-7px);box-shadow:0 26px 58px -32px rgba(38,47,107,.46)}
.hub-card--refiltered{animation:hubCardIn .48s var(--ease) both}
.hub-card__media{display:block;overflow:hidden;aspect-ratio:1.35/1;background:var(--navy-tint)}
.hub-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .65s var(--ease)}
.hub-card:hover .hub-card__media img{transform:scale(1.045)}
.hub-card__body{display:flex;flex-direction:column;align-items:flex-start;flex:1;padding:clamp(1.35rem,2.5vw,1.8rem)}
.hub-card__tag{font-size:.68rem;font-weight:750;letter-spacing:.14em;text-transform:uppercase;color:var(--pink);margin-bottom:.75rem}
.hub-card h3{color:var(--navy);font-size:clamp(1.3rem,2vw,1.65rem);margin-bottom:.75rem}
.hub-card__body p{font-size:.9rem}
.hub-card .link-arrow{margin-top:auto;padding-top:1.15rem}
.hub-coming{margin-top:clamp(2rem,5vw,4rem);padding:clamp(1.5rem,3vw,2.25rem);
  border-radius:var(--r-lg);background:var(--navy-tint);display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.hub-coming h3{color:var(--navy);margin-bottom:.35rem}
.hub-coming__mark{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;
  flex:none;background:var(--yellow);color:var(--navy);font-family:var(--display);font-size:2rem;transform:rotate(-5deg)}
@keyframes hubCardIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* Article page: reuses .pagehead for sizing (height, padding, h1 size,
   breadcrumb style) so every page header on the site is dimensionally
   identical. Only the navy gradient + decorative ring are specific to
   this variant, replacing the photo the other pageheads use. */
.article-hero{background:linear-gradient(135deg,var(--navy) 0%,var(--navy-mid) 100%)}
.article-hero::after{content:"";position:absolute;width:19rem;height:19rem;border:3rem solid rgba(229,121,157,.32);
  border-radius:48% 52% 58% 42%;right:-5rem;top:20%;transform:rotate(18deg)}
.article{padding:var(--sec) 0}
.article__layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(15rem,.65fr);gap:clamp(2.5rem,7vw,6rem);align-items:start}
.article__body{font-size:1.03rem}
.article__body > p:first-child{font-size:1.22rem;color:var(--ink)}
.article__body h2{font-size:clamp(2rem,3.8vw,3rem);color:var(--navy);margin:3.4rem 0 1.1rem}
.article__body h3{color:var(--navy);margin:2rem 0 .7rem}
.article__body p + p{margin-top:1.1rem}
.article__body ul{display:grid;gap:.7rem;margin:1.35rem 0}
.article__body li{position:relative;padding-left:1.35rem;color:var(--muted)}
.article__body li::before{content:"";position:absolute;left:0;top:.72em;width:7px;height:7px;border-radius:50%;background:var(--pink)}
.article__steps{display:grid;gap:.9rem;margin:1.35rem 0;padding:0;list-style:none;counter-reset:step}
.article__steps li{counter-increment:step;padding-left:2.4rem}
.article__steps li::before{content:counter(step);top:.05em;width:1.65rem;height:1.65rem;display:grid;place-items:center;
  font-size:.8rem;font-weight:700;color:var(--navy);background:var(--pink-tint);border-radius:50%}
.article__body li strong{color:var(--navy)}
.article__body a:not(.btn):not(.article__cta-link){color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.article__figure{border-radius:var(--r-xl);overflow:hidden;margin-bottom:2rem;aspect-ratio:16/10}
.article__figure img{width:100%;height:100%;object-fit:cover}
.article__aside{position:sticky;top:calc(var(--nav-h) + 2rem);background:var(--navy-tint);border-radius:var(--r-lg);
  padding:clamp(1.4rem,3vw,2rem)}
.article__aside h3{color:var(--navy);margin-bottom:.75rem}
.article__aside .btn{margin-top:1.25rem;width:100%}
.compare{display:grid;gap:.8rem;margin:1.75rem 0}
.compare__row{display:grid;grid-template-columns:.55fr 1fr 1fr;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-md);background:#fff}
.compare__row > *{padding:1rem;font-size:.88rem;color:var(--muted)}
.compare__row strong{background:var(--cream-deep);color:var(--navy)}
.compare__row > * + *{border-left:1px solid var(--line)}
.compare__row--head{background:var(--navy);border-color:var(--navy)}
.compare__row--head > *{color:#fff;font-weight:700}
.compare__row--head strong{background:transparent;color:#fff}
.article__cta-link{color:var(--navy);font-weight:650;text-decoration:underline;text-decoration-color:var(--pink);text-underline-offset:3px}
.article__cta-link:hover{color:var(--pink)}

@media (max-width:900px){
  .hub-grid{grid-template-columns:repeat(2,1fr)}
  .article__layout{grid-template-columns:1fr}
  .article__aside{position:static;max-width:32rem}
}
@media (max-width:620px){
  .hub-grid{grid-template-columns:1fr}
  .hub-coming{align-items:flex-start}
  .hub-coming__mark{width:56px;height:56px;font-size:1.6rem}
  .compare__row{grid-template-columns:1fr}
  .compare__row > * + *{border-left:0;border-top:1px solid var(--line)}
  .compare__row--head{display:none}
  .compare__row [data-label]::before{content:attr(data-label);display:block;margin-bottom:.2rem;
    font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--pink)}
}
@media (prefers-reduced-motion:reduce){.hub-card--refiltered{animation:none}}

/* =====================================================================
   INTERNAL PAGE COMPONENTS
   Shared building blocks for the pages recreated from the legacy site:
   prose bodies, people cards, feature tiles, split bands, campus cards,
   photo grids and the thank-you panel. Generated pages use these; see
   tools/partials.mjs.
   ===================================================================== */

/* ---- prose: readable single-column body for policy/framework pages ---- */
.prose{padding:var(--sec) 0}
.prose--tint{background:var(--navy-tint)}
.prose__wrap{width:min(100% - 2*var(--gut),var(--max));margin-inline:auto}
.prose__head{max-width:46rem;margin-bottom:clamp(1.75rem,3.5vw,2.75rem)}
.prose__head h2{color:var(--navy);margin-top:1.25rem}
.prose__intro{margin-top:1.1rem;font-size:1.05rem}
.prose__body{max-width:46rem}
.prose__body > * + *{margin-top:1.1rem}
.prose__body .lead{font-size:1.125rem;color:var(--ink)}
.prose__body ul{padding-left:1.1rem;display:flex;flex-direction:column;gap:.55rem}
.prose__body li{position:relative;padding-left:.9rem;list-style:none}
.prose__body li::before{content:"";position:absolute;left:0;top:.62em;
  width:6px;height:6px;border-radius:50%;background:var(--pink)}
.prose__body a:not(.btn){color:var(--navy);font-weight:650;
  text-decoration:underline;text-decoration-color:var(--pink);text-underline-offset:3px}
.prose__body a:not(.btn):hover{color:var(--pink)}

/* ---- people: educator and chef profiles ---- */
.people{padding:var(--sec) 0}
.people__head{max-width:46rem;margin-bottom:clamp(2rem,4vw,3rem)}
.people__head h2{color:var(--navy);margin-top:1.25rem}
.people__intro{margin-top:1.1rem;font-size:1.05rem}
.people__list{display:flex;flex-direction:column;gap:clamp(1.25rem,2.5vw,2rem)}
.person{background:var(--white);border-radius:var(--r-lg);overflow:hidden;
  display:grid;grid-template-columns:.34fr .66fr;align-items:stretch;
  box-shadow:0 2px 4px rgba(38,47,107,.04),0 24px 48px -32px rgba(38,47,107,.35);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.person:hover{transform:translateY(-4px);
  box-shadow:0 2px 4px rgba(38,47,107,.05),0 34px 60px -34px rgba(38,47,107,.45)}
.person:not(:has(.person__media)){grid-template-columns:1fr}
.person__media{position:relative;overflow:hidden;min-height:16rem;background:var(--navy-tint)}
.person__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.person:hover .person__media img{transform:scale(1.05)}
.person__body{padding:clamp(1.75rem,3.2vw,2.75rem)}
.person__body h3{color:var(--navy);margin-bottom:.3rem}
.person__role{color:var(--pink);font-size:.82rem;font-weight:750;
  letter-spacing:.06em;text-transform:uppercase}
.person__body .card__rule{display:block;margin:.9rem 0 1.35rem}
.person__body p + p{margin-top:.9rem}
.person__body p{font-size:.95rem}

/* ---- tiles: pillars, programs, benefits ---- */
.tiles{padding:var(--sec) 0}
.tiles__head{max-width:46rem;margin-bottom:clamp(2rem,4vw,3rem)}
.tiles__head h2{color:var(--navy);margin-top:1.25rem}
.tiles__intro{margin-top:1.1rem;font-size:1.05rem}
.tiles__grid{display:grid;gap:clamp(1rem,2vw,1.6rem)}
.tiles__grid--2{grid-template-columns:repeat(2,1fr)}
.tiles__grid--3{grid-template-columns:repeat(3,1fr)}
.tile{background:var(--white);border-radius:var(--r-lg);
  padding:clamp(1.6rem,2.8vw,2.25rem);
  box-shadow:0 2px 4px rgba(38,47,107,.04),0 24px 48px -32px rgba(38,47,107,.35);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
  display:flex;flex-direction:column}
.tile:hover{transform:translateY(-5px);
  box-shadow:0 2px 4px rgba(38,47,107,.05),0 34px 60px -34px rgba(38,47,107,.45)}
/* Icon badge, same pink disc as the homepage feature cards but sized for the
   tile's own padding rather than overhanging a photo. */
.tile__badge{width:56px;height:56px;border-radius:50%;background:#FBE9EF;color:var(--pink);
  display:grid;place-items:center;margin-bottom:1.1rem;flex:none;
  box-shadow:0 12px 24px -16px rgba(38,47,107,.4)}
.tile__badge svg{width:28px;height:28px}
.tile--icon .tile__num{position:absolute;top:clamp(1.6rem,2.8vw,2.25rem);right:clamp(1.6rem,2.8vw,2.25rem);margin:0}
.tile--icon{position:relative}
.tile__num{display:block;font-size:.68rem;font-weight:750;letter-spacing:.16em;
  color:var(--pink);margin-bottom:.55rem}
.tile h3{color:var(--navy);margin-bottom:0;font-size:1.15rem}
.tile .card__rule{display:block;margin:.85rem 0 1.15rem 0}
.tile p{font-size:.95rem}
.tile p + p{margin-top:.75rem}
.tile .link-arrow{margin-top:auto;padding-top:1.15rem}

/* Card image: bleeds to the card's edges above the body content. */
.tile--media{padding-top:0;overflow:hidden}
.tile__media{margin:0 calc(-1 * clamp(1.6rem,2.8vw,2.25rem)) clamp(1.15rem,2vw,1.5rem);
  background:var(--navy-tint);aspect-ratio:16/10;overflow:hidden}
.tile__media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s var(--ease)}
.tile--media:hover .tile__media img{transform:scale(1.04)}
/* the icon badge overlaps the image edge, the way .card__badge does on the homepage */
.tile--media.tile--icon .tile__badge{margin-top:calc(-28px - clamp(.4rem,1vw,.7rem));
  position:relative;z-index:1;background:#FBE9EF}
.tile--media.tile--icon .tile__num{top:clamp(1rem,1.8vw,1.35rem)}

/* Doodle-pattern background, same asset and treatment as .prose--doodle-bg */
.tiles--doodle-bg{position:relative;overflow:hidden}
.tiles--doodle-bg::before{content:"";position:absolute;inset:0;
  background:url('/assets/images/toy-doodle-bg.webp') center/cover repeat;
  opacity:.13;pointer-events:none;z-index:0}
.tiles--doodle-bg .wrap{position:relative;z-index:1}
/* trims the gap left by the preceding band */
.tiles--tight-top{padding-top:calc(var(--sec) * .4)}

@media (prefers-reduced-motion:reduce){
  .tile__media img,.tile--media:hover .tile__media img{transition:none;transform:none}
}

/* ---- split: text beside a tall image ---- */
.split{padding:var(--sec) 0}
.split__grid{display:grid;grid-template-columns:.85fr 1.15fr;
  gap:clamp(2rem,5vw,4.5rem);align-items:center}
.split--flip .split__media{order:2}
/* when the media moves to the right it should keep the narrower column,
   so swap the track widths rather than letting the copy inherit them */
.split--flip .split__grid{grid-template-columns:1.15fr .85fr}
.split--tint{background:var(--cream-deep)}
.split__media{border-radius:var(--r-lg);overflow:hidden;background:var(--navy-tint);
  aspect-ratio:3/4;max-height:34rem}
.split__media img{width:100%;height:100%;object-fit:cover}
.split__copy h2{color:var(--navy);margin-top:1.25rem}
.split__copy p{margin-top:1.1rem}
.split__copy .lead{font-size:1.05rem;color:var(--ink)}
.split__copy ul{margin-top:1.1rem;display:grid;gap:.5rem}
.split__copy ul li{position:relative;padding-left:1.4rem;line-height:1.6}
.split__copy ul li::before{content:"";position:absolute;left:0;top:.6em;
  width:.45rem;height:.45rem;border-radius:50%;background:var(--pink)}
@media (max-width:900px){
  .split__grid,.split--flip .split__grid{grid-template-columns:1fr}
  .split--flip .split__media{order:0}
  .split__media{aspect-ratio:4/3;max-height:22rem}
}

/* ---- campus index cards ---- */
.campus-list{padding:var(--sec) 0;background:var(--cream-deep)}
.campus-list__head{max-width:52rem;margin-bottom:clamp(2rem,4vw,3rem)}
.campus-list__intro{margin-top:1.5rem;font-size:1.05rem;max-width:46rem}
.campus-list__grid{display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(.85rem,1.8vw,1.5rem)}
.campus-card{background:var(--white);border-radius:var(--r-lg);overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:0 2px 4px rgba(38,47,107,.04),0 24px 48px -32px rgba(38,47,107,.35);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.campus-card:hover{transform:translateY(-6px);
  box-shadow:0 2px 4px rgba(38,47,107,.05),0 34px 60px -34px rgba(38,47,107,.45)}
.campus-card__media{position:relative;display:block;aspect-ratio:4/2.6;
  overflow:hidden;background:var(--navy-tint)}
.campus-card__media img{width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease)}
.campus-card:hover .campus-card__media img{transform:scale(1.05)}
.campus-card__flag{position:absolute;top:1rem;left:1rem;z-index:2;
  background:var(--yellow);color:var(--navy-deep);border-radius:999px;
  padding:.42rem 1rem;font-size:.7rem;font-weight:750;letter-spacing:.08em;
  text-transform:uppercase}
.campus-card__body{padding:clamp(1.6rem,2.8vw,2.25rem);flex:1;
  display:flex;flex-direction:column}
.campus-card__body h3{color:var(--navy);margin-bottom:0}
.campus-card__body h3 a{color:inherit}
.campus-card__body h3 a:hover{color:var(--pink)}
.campus-card__body .card__rule{display:block;margin:.85rem 0 1.15rem 0}
.campus-card__body p{font-size:.95rem}
.campus-card__meta{margin-top:.75rem;color:var(--muted);font-size:.9rem}
.campus-card__meta a{color:var(--navy);font-weight:600}
.campus-card__meta a:hover{color:var(--pink)}
.campus-card .link-arrow{margin-top:auto;padding-top:1.35rem}

/* ---- facts: three-up campus info cards ---- */
.facts{padding:0 0 var(--sec)}
.facts__head{max-width:44rem;margin-bottom:clamp(2rem,4vw,3rem)}
.facts__head h2{color:var(--navy);margin-top:1.25rem}
.facts__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.6rem)}
.factcard{background:var(--white);border-radius:var(--r-lg);
  padding:clamp(1.6rem,2.8vw,2.25rem);
  box-shadow:0 2px 4px rgba(38,47,107,.04),0 24px 48px -32px rgba(38,47,107,.35)}
.factcard h3{color:var(--navy);margin-bottom:0;font-size:1.1rem}
.factcard .card__rule{display:block;margin:.85rem 0 1.15rem 0}
.factcard p{font-size:.95rem}
.factcard p + p{margin-top:.5rem}
.factcard a{color:var(--navy);font-weight:600}
.factcard a:hover{color:var(--pink)}

/* ---- photogrid: static gallery for campuses without a photo feed ---- */
.photogrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.6rem,1.4vw,1rem)}
.photogrid__item{border-radius:var(--r-md);overflow:hidden;background:var(--navy-tint);
  aspect-ratio:4/3;margin:0}
.photogrid__item img{width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--ease)}
.photogrid__item:hover img{transform:scale(1.05)}

/* ---- thank you ---- */
/* Full-height centred panel. The nav is fixed and overlays the page, so its
   height is added as padding on both axes' worth of centring rather than only
   the top, which is what previously pushed the content low. */
.thanks{min-height:100svh;display:grid;place-items:center;
  padding:calc(var(--nav-h) + clamp(3rem,8vw,5rem)) 0 clamp(5rem,12vh,8rem);background:#151B3F;
  position:relative;overflow:hidden}
.thanks::before{content:"";position:absolute;inset:0;
  background:url('/assets/images/photoshoot/watermelon-play-1200.webp') center/cover no-repeat;
  pointer-events:none;z-index:0}
.thanks--tour::before{background-image:url('/assets/images/photoshoot/kinder-seesaw-1200.webp')}
.thanks--waitlist::before{background-image:url('/assets/images/photoshoot/merry-go-round-1200.webp')}
.thanks--contact::before{background-image:url('/assets/images/photoshoot/storytime-mat-1200.webp')}
.thanks::after{content:"";position:absolute;inset:0;
  background:rgba(21,27,63,.72);pointer-events:none;z-index:1}
.thanks > .wrap{position:relative;z-index:2}
.thanks__inner{text-align:center;display:flex;flex-direction:column;align-items:center}
.thanks__inner .eyebrow{justify-content:center;color:rgba(255,255,255,.85)}
.thanks__inner .eyebrow::before{background:var(--yellow)}
.thanks__mark{width:74px;height:74px;border-radius:50%;background:rgba(255,255,255,.15);
  color:#fff;display:grid;place-items:center;margin-bottom:1.75rem}
.thanks__mark svg{width:32px;height:32px}
.thanks__inner h1{color:#fff;margin-top:1rem;text-shadow:0 2px 20px rgba(0,0,0,.25)}
.thanks__inner h1 em{color:var(--yellow)}
.thanks__sub{max-width:44ch;margin-top:1.5rem;font-size:1.075rem;color:rgba(255,255,255,.85)}
.thanks .btn--line{color:#fff;border-color:rgba(255,255,255,.45)}
.thanks .btn--line:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.7);transform:translateY(-2px)}
.thanks__actions{display:flex;gap:.85rem;flex-wrap:wrap;justify-content:center;margin-top:2.25rem}

/* ---- outline button on light grounds ---- */
.btn--line{border:1.5px solid var(--line);color:var(--navy);background:transparent}
.btn--line:hover{background:var(--navy-tint);border-color:var(--navy);transform:translateY(-2px)}

/* ---- responsive ---- */
@media (max-width:980px){
  .tiles__grid--3{grid-template-columns:repeat(2,1fr)}
  .facts__grid{grid-template-columns:1fr}
  .campus-list__grid{grid-template-columns:repeat(2,1fr);max-width:none;margin-inline:0}
  .split__grid{grid-template-columns:1fr;max-width:34rem;margin-inline:auto}
  .split--flip .split__media{order:0}
  .split__media{aspect-ratio:4/3;max-height:none}
  .photogrid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .tiles__grid--2,.tiles__grid--3{grid-template-columns:1fr}
  .person{grid-template-columns:1fr}
  .person__media{order:-1;min-height:15rem;aspect-ratio:4/3}
}
@media (max-width:480px){
  .photogrid{grid-template-columns:1fr}
  .campus-list__grid{grid-template-columns:1fr;max-width:34rem;margin-inline:auto}
}

/* =====================================================================
   TEAM PAGE SPACING FIXES
   ===================================================================== */
/* More breathing room between eyebrow and heading on team pages */
.people__head h2{margin-top:1.75rem}
/* Person card name → role spacing */
.person__body h3{margin-bottom:.55rem}
/* Compact top padding for pages where the hero sits close above (ops manager) */
.people--compact{padding-top:clamp(2.5rem,5vw,4rem)}

/* =====================================================================
   TILE WITH PHOTO: for team index cards on Our Team page
   ===================================================================== */
.tile--photo{padding:0;overflow:hidden}
.tile--photo .tile__photo-media{aspect-ratio:16/10;overflow:hidden;background:var(--navy-tint)}
.tile--photo .tile__photo-media img{width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--ease)}
.tile--photo:hover .tile__photo-media img{transform:scale(1.05)}
.tile--photo .tile__body{padding:clamp(1.5rem,2.6vw,2.1rem)}
.tile--photo .tile__body h3{color:var(--navy);margin-bottom:0;font-size:1.15rem}
.tile--photo .tile__body .card__rule{display:block;margin:.85rem 0 1.15rem}
.tile--team{display:flex;flex-direction:column;color:inherit;text-decoration:none}
.tile--team .tile__photo-media{aspect-ratio:4/5}
.tile--team .tile__photo-media img{object-position:center top}
.tile--team .tile__body{flex:1;padding:clamp(1.1rem,2vw,1.5rem) clamp(1.25rem,2.1vw,2.1rem)}
.tile--team .link-arrow{margin:0;padding:0;font-size:clamp(.95rem,.5rem + .75vw,1.05rem);font-family:var(--heading);
  text-decoration:underline;text-decoration-color:var(--pink);text-underline-offset:3px}
.tile--team:hover .link-arrow,.tile--team:focus-visible .link-arrow{color:var(--pink)}
.tile--team:hover .link-arrow span{transform:translateX(6px)}

/* =====================================================================
   DECORATIVE GRAPHIC: semi-transparent brand handprint in prose sections
   ===================================================================== */
.prose--deco{position:relative;overflow:hidden}
.prose--deco .wrap{position:relative;z-index:1}
.prose__deco-img{
  position:absolute;right:-4%;bottom:-15%;
  width:clamp(14rem,22vw,20rem);
  opacity:.10;pointer-events:none;z-index:0;
  user-select:none}
/* scale up slightly for the CTA bottom section usage */
.cta--deco{position:relative;overflow:hidden}
.cta__deco-img{
  position:absolute;right:-3%;bottom:-12%;
  width:clamp(16rem,26vw,24rem);
  opacity:.08;pointer-events:none;z-index:0;
  user-select:none}

/* =====================================================================
   OWNER / TEAM-INTRO PORTRAIT: remove shadow, show outline shape
   ===================================================================== */
/* Landscape family / team-intro photo: show the outline, drop the deep shadow */
.founder__portrait--family{aspect-ratio:4/5;border-radius:var(--r-xl)}
.founder__portrait--family img{
  border-radius:var(--r-lg) var(--r-lg) 200px 200px;
  box-shadow:0 2px 4px rgba(38,47,107,.03),0 8px 20px -8px rgba(38,47,107,.2)}
/* restore the outline ::before (no display:none) */
.founder__portrait--family::before{
  inset:1.2rem -1.2rem -1.2rem 1.2rem}
/* navy outline variant for Meet the Owner */
.founder__portrait--navy-outline::before{border-color:var(--navy)}
@media (max-width:1080px){
  .founder__portrait--family{aspect-ratio:16/10;max-width:100%;border-radius:var(--r-lg)}
}

/* =====================================================================
   TEAM MEMBER INTERACTIVE TABS
   ===================================================================== */
.ttabs{display:grid;grid-template-columns:repeat(3,1fr);gap:.85rem;
  margin:2.5rem 0 0;padding:0}
.ttab{border:2px solid transparent;background:var(--cream);cursor:pointer;
  padding:.9rem 1rem;text-align:left;border-radius:var(--r-md);
  transition:background .2s,border-color .2s,box-shadow .2s;
  display:flex;align-items:center;gap:.85rem;width:100%}
.ttab:hover{background:var(--navy-tint);border-color:rgba(38,47,107,.12)}
.ttab[aria-selected="true"]{background:var(--navy-tint);
  border-color:var(--navy);
  box-shadow:0 4px 16px -6px rgba(38,47,107,.2)}
.ttab__img{width:56px;height:56px;border-radius:50%;overflow:hidden;
  flex-shrink:0;background:rgba(38,47,107,.08)}
.ttab__img img{width:100%;height:100%;object-fit:cover;object-position:top center}
.ttab__info{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.ttab__name{font-weight:700;color:var(--navy);font-size:.9rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ttab__role{font-size:.75rem;color:#666;line-height:1.3}

.tpanels{margin-top:2rem}
.tpanel{display:none;animation:tpanel-in .3s ease both}
.tpanel--active{display:grid;grid-template-columns:1fr 1.6fr;
  gap:clamp(1.5rem,4vw,3rem);align-items:start}
@keyframes tpanel-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.tpanel__media{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:3/4;
  background:var(--navy-tint)}
.tpanel__media img{width:100%;height:100%;object-fit:cover;object-position:top center}
.tpanel__body{padding-top:.5rem}
.tpanel__body h3{color:var(--navy);margin-bottom:.3rem;
  font-size:clamp(1.3rem,2.5vw,1.65rem)}
.tpanel__role{color:var(--pink);font-weight:700;font-size:.82rem;
  letter-spacing:.1em;text-transform:uppercase;margin-bottom:1.25rem;display:block}
.tpanel__bio p + p{margin-top:.8rem}
.tpanel__bio p{font-size:.97rem;line-height:1.7}

@media (max-width:900px){
  .ttabs{grid-template-columns:1fr}
  .ttab__img{width:48px;height:48px}
  .tpanel--active{grid-template-columns:1fr}
  .tpanel__media{aspect-ratio:16/9;max-height:22rem}
}

/* =====================================================================
   ELSEWHERE AT ELLES BELLES: doodle-pattern full-section background
   ===================================================================== */
.prose--doodle-bg{position:relative;overflow:hidden}
.prose--doodle-bg::before{
  content:"";position:absolute;inset:0;
  background:url('/assets/images/toy-doodle-bg.webp') center/cover repeat;
  opacity:.13;pointer-events:none;z-index:0}
.prose--doodle-bg .wrap{position:relative;z-index:1}
/* Remove the old corner image when doodle-bg is active */
.prose--doodle-bg .prose__deco-img{display:none}

/* =====================================================================
   TEAM PAGE HEADING TOP SPACING: more gap from the page header above
   ===================================================================== */
.people--campus-page{padding-top:var(--sec)}

/* Pages where two neighbouring sections each own a full section gap, so the
   pair stacks to roughly double the page rhythm. Halving both restores it. */
#team-intro{padding-bottom:calc(var(--sec) / 2)}
#team-links{padding-top:calc(var(--sec) / 2)}
#what-makes-us-special{padding-bottom:calc(var(--sec) / 2)}

/* =====================================================================
   ZEINA: operations manager page designed experience
   ===================================================================== */
.zeina-intro{padding:var(--sec) 0 calc(var(--sec)*.28)}
.zeina-intro__grid{display:grid;grid-template-columns:1fr 1.5fr;
  gap:clamp(2rem,5vw,4rem);align-items:center}
.zeina-intro__media{border-radius:var(--r-xl);overflow:hidden;aspect-ratio:4/5;
  background:var(--navy-tint)}
.zeina-intro__media img{width:100%;height:100%;object-fit:cover;object-position:top center}
.zeina-intro__body h2{color:var(--navy);margin:.5rem 0 1rem}
.zeina-intro__body .lead{font-size:1.075rem;margin-bottom:1rem}
.zeina-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem;
  padding:calc(var(--sec)*.65) 0}
.zeina-card{background:#fff;border-radius:var(--r-lg);padding:1.75rem 1.85rem;
  border-left:3px solid var(--pink)}
.zeina-card__when{display:block;font-size:.75rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--pink);margin-bottom:.6rem}
.zeina-card h3{color:var(--navy);font-size:1.05rem;margin-bottom:.7rem}
.zeina-card p{font-size:.95rem;line-height:1.7}
@media (max-width:860px){
  .zeina-intro__grid{grid-template-columns:1fr}
  .zeina-intro__media{aspect-ratio:4/5;max-width:24rem;margin-inline:auto}
  .zeina-cards{grid-template-columns:1fr}
}

/* =====================================================================
   STACK ROLE LABEL: team member / Zeina story card role text
   ===================================================================== */
.stack__role{display:block;color:var(--pink);font-family:var(--sans);font-size:.78rem;
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  margin:.15rem 0 1.1rem}

/* =====================================================================
   ZEINA STORY: stack-card storytelling section
   ===================================================================== */
.zeina-story{background:var(--cream)}
.zeina-story > .wrap{padding-top:calc(var(--sec)*.42);padding-bottom:clamp(1.5rem,3vw,2.5rem)}

/* =====================================================================
   TEAM STACK: the campus team cards reuse the homepage "Our approach"
   stack, but with portrait crops since these are people, not scenes.
   ===================================================================== */
.stack--people .stack__card{
  max-width:60rem;margin-inline:auto;
  grid-template-columns:1fr clamp(185px,21vw,240px);
  gap:clamp(1.6rem,3vw,2.75rem);
  padding:clamp(1.6rem,2.9vw,2.5rem);
  margin-bottom:1.35rem;
  /* one fixed height so the two campus pages match each other exactly and
     the sticky stack does not jump as cards of different bio length pass */
  min-height:clamp(27rem,34vw,31rem)}
.stack--people .stack__media{aspect-ratio:3/4;align-self:center}
/* centre-weighted, not top: these are head-and-shoulders portraits and a
   top-anchored crop clipped the taller subjects' heads */
.stack--people .stack__media img{object-position:center 22%}
/* tighter crop keeps the forearm tattoo at the bottom-left out of frame */
.stack--people .stack__media img.stack__img--hannah{transform:scale(1.2);transform-origin:56% 18%}
.stack--people .stack__media img.stack__img--helen{transform:scale(1.34);transform-origin:59% 57%}
.stack--people .stack__media img.stack__img--rima{transform:scale(1.2);transform-origin:62% 100%}
.stack--people .stack__num{margin-bottom:.5rem;font-size:.85rem}
.stack--people .stack__text h3{font-size:clamp(1.3rem,2.1vw,1.7rem);margin-bottom:.2rem}
.stack--people .stack__role{font-size:.74rem;margin:.15rem 0 1rem}
.stack--people .stack__text p{font-size:.94rem;line-height:1.72}
.stack--people .stack__text p+p{margin-top:.9rem}
.stack__bio-extra[hidden]{display:none}
.stack__bio-extra p:first-child{margin-top:.9rem}
.stack__read-more{margin-top:.35rem;min-height:44px;background:none;border:none;padding:.6rem 0;cursor:pointer;font-family:var(--sans);font-size:.88rem;font-weight:600;color:var(--pink);text-decoration:underline;text-underline-offset:3px;letter-spacing:.01em}
.stack__read-more:hover{color:var(--navy)}
@media (max-width:900px){
  .stack--people .stack__card{grid-template-columns:1fr;max-width:34rem}
  .stack--people .stack__media{order:-1;aspect-ratio:3/4;width:min(86%,20rem);margin-inline:auto}
}
@media (max-width:560px){
  .stack:not(.stack--people) .stack__card{padding:1rem 1rem 1.75rem;gap:1.5rem}
  .stack:not(.stack--people) .stack__media{aspect-ratio:4/3}
  .stack:not(.stack--people) .stack__text{padding-inline:.6rem}
}

/* =====================================================================
   CURRICULUM PILLARS
   Four portrait cards in one row. The cut-out sits in its own block at the
   foot of the card (not absolutely positioned over it), so the copy above
   can never run into the artwork. No blobs or shadows: plain transparent
   cut-outs on the card colour.
   ===================================================================== */
.pillars{padding:calc(var(--sec) / 2) 0 var(--sec)}
.pillars__head{max-width:52rem;margin-bottom:clamp(2rem,4vw,3rem)}
.pillars__head h2{color:var(--navy);margin-top:1.25rem}
.pillars__intro{margin-top:1rem;color:var(--muted);max-width:44rem}

.pillars__grid{display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(.9rem,1.5vw,1.35rem);align-items:stretch}

.pillar-card{--pc-pad:clamp(1.3rem,1.7vw,1.85rem);
  --art-h:11rem;--art-b:0rem;--art-x:0rem;
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  border-radius:var(--r-lg);padding:var(--pc-pad);
  min-height:clamp(31rem,39vw,36rem)}

.pillar-card--a{background:var(--white);--art-h:17rem}
.pillar-card--b{background:rgba(229,121,157,.13);--art-h:9rem}
.pillar-card--c{background:var(--navy-tint);--art-h:16rem;--art-x:22%}
.pillar-card--d{background:rgba(250,223,6,.18);--art-h:17.25rem;--art-b:-1rem;--art-x:0%}

.pillar-card__body{position:relative;z-index:2}
.pillar-card__num{display:block;margin-bottom:.7rem;color:var(--pink);
  font-family:var(--display);font-size:.9rem;font-weight:600;letter-spacing:.1em}
.pillar-card__body h3{color:var(--navy);margin-bottom:.75rem;line-height:1.16;
  font-size:clamp(1.05rem,1.35vw,1.3rem)}
.pillar-card__body p{font-size:.86rem;line-height:1.62;
  display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden}

/* the artwork block: reserves its own height in the flow, and bleeds out to
   the card edges by cancelling the card padding */
.pillar-card__art{margin-top:auto;position:relative;height:var(--art-h);
  margin-inline:calc(var(--pc-pad) * -1);
  margin-bottom:calc(var(--pc-pad) * -1);
  pointer-events:none}
.pillar-card__art img{position:absolute;bottom:var(--art-b);
  height:100%;width:auto;max-width:none;filter:none}
.pillar-card__art--bl img{left:var(--art-x)}
.pillar-card__art--br img{right:var(--art-x)}

@media (max-width:1080px){
  .pillars__grid{grid-template-columns:repeat(2,1fr)}
  .pillar-card{min-height:clamp(27rem,52vw,31rem)}
}
@media (max-width:560px){
  .pillars__grid{grid-template-columns:1fr}
  .pillar-card{min-height:0}
  .pillar-card__body p{-webkit-line-clamp:none;overflow:visible}
}

/* =====================================================================
   HOW LEARNING IS RECORDED: copy beside an arched portrait, reusing the
   collage arch shape already used elsewhere on the site.
   ===================================================================== */
.recorded{padding:var(--sec) 0;background:var(--cream-deep)}
.recorded__grid{display:grid;grid-template-columns:1.15fr .85fr;
  gap:clamp(2.5rem,6vw,5rem);align-items:center}
.recorded__body h2{color:var(--navy);margin-top:1.25rem}
.recorded__text{margin-top:1.75rem}
.recorded__text p + p{margin-top:1.1rem}
.recorded__text strong{color:var(--navy);font-weight:700}
.recorded__media{margin:0;aspect-ratio:4/5;overflow:hidden;background:var(--navy-tint);
  border-radius:200px 200px var(--r-lg) var(--r-lg);
  box-shadow:0 2px 4px rgba(38,47,107,.05),0 36px 64px -38px rgba(38,47,107,.5)}
.recorded__media img{width:100%;height:100%;object-fit:cover}
@media (max-width:900px){
  .recorded__grid{grid-template-columns:1fr;gap:2.5rem}
  .recorded__media{order:-1;aspect-ratio:4/3.4;max-width:30rem;
    border-radius:160px 160px var(--r-lg) var(--r-lg)}
}

/* =====================================================================
   PROGRAMS CAROUSEL
   Exactly three cards in view, the middle one sitting slightly proud.
   Arrows flank the strip and wrap around at either end.
   ===================================================================== */
.programs{padding:calc(var(--sec) * .55) 0 var(--sec)}
.programs__head{max-width:52rem;margin-bottom:clamp(2rem,4vw,3rem)}
.programs__head h2{color:var(--navy);margin-top:1.25rem}

.carousel{position:relative;padding-inline:clamp(3.75rem,7vw,6.5rem)}
.carousel__arrow{position:absolute;top:calc(50% - .75rem);transform:translateY(-50%);
  z-index:3;width:3rem;height:3rem;border-radius:50%;cursor:pointer;
  border:1.5px solid rgba(38,47,107,.14);background:var(--white);color:var(--navy);
  display:grid;place-items:center;
  box-shadow:0 2px 6px rgba(38,47,107,.08),0 14px 30px -16px rgba(38,47,107,.5);
  transition:background .25s var(--ease),color .25s var(--ease),
    border-color .25s var(--ease),box-shadow .25s var(--ease)}
.carousel__arrow svg{width:1.35rem;height:1.35rem}
.carousel__arrow--prev{left:clamp(.4rem,2vw,1.75rem)}
.carousel__arrow--next{right:clamp(.4rem,2vw,1.75rem)}
.carousel__arrow:hover{background:var(--navy);color:#fff;border-color:var(--navy);
  box-shadow:0 2px 6px rgba(38,47,107,.12),0 18px 36px -16px rgba(38,47,107,.6)}
.carousel__arrow:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}

.carousel__viewport{overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth}
.carousel__viewport::-webkit-scrollbar{display:none}
.carousel__viewport:focus-visible{outline:3px solid var(--yellow);outline-offset:4px}
/* The viewport scrolls, so it clips on both axes. Any shadow that is still
   opaque when it meets that clip box draws a hard line. The track therefore
   carries enough vertical room for the glow to reach zero, and the glow
   itself is inset from the card sides so the left/right clip lands roughly
   two blur radii out, where it has already faded to nothing. */
.carousel__track{--cgap:clamp(1rem,2vw,1.5rem);
  display:flex;gap:var(--cgap);list-style:none;margin:0;
  padding:2.5rem 0 5.5rem}

/* three across: the percentage resolves against the track's content box,
   which already excludes its own side padding */
.prog-card{flex:0 0 calc((100% - 2 * var(--cgap)) / 3);scroll-snap-align:start;
  position:relative}
.prog-card::after{content:"";position:absolute;z-index:0;pointer-events:none;
  left:11%;right:11%;top:18%;bottom:-1.1rem;
  border-radius:var(--r-lg);
  background:rgba(38,47,107,.30);
  filter:blur(1rem);
  transition:transform .45s var(--ease),background-color .45s var(--ease)}
.prog-card__inner{position:relative;z-index:1;
  height:100%;display:flex;flex-direction:column;
  background:var(--white);border-radius:var(--r-lg);overflow:hidden;
  transition:transform .45s var(--ease)}
.prog-card.is-centre .prog-card__inner{transform:translateY(-.6rem) scale(1.045)}
.prog-card.is-centre::after{transform:translateY(-.6rem) scale(1.045);
  background:rgba(38,47,107,.38)}

.prog-card__media{position:relative;aspect-ratio:4/3;overflow:hidden;isolation:isolate}
.prog-card__media img{width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--ease)}
.prog-card__veil{position:absolute;inset:0;transition:opacity .4s var(--ease);
  background:linear-gradient(to top,var(--veil-a) 0%,var(--veil-b) 58%,var(--veil-c) 100%)}
.prog-card--pink  {--veil-a:rgba(229,121,157,.88);--veil-b:rgba(229,121,157,.42);--veil-c:rgba(229,121,157,.12)}
.prog-card--navy  {--veil-a:rgba(38,47,107,.88);--veil-b:rgba(38,47,107,.44);--veil-c:rgba(38,47,107,.12)}
.prog-card--yellow{--veil-a:rgba(180,140,6,.9);--veil-b:rgba(215,178,10,.44);--veil-c:rgba(250,223,6,.14)}
.prog-card__title{position:absolute;left:0;right:0;bottom:0;margin:0;color:#fff;
  padding:1.25rem clamp(1.1rem,2vw,1.5rem);
  font-size:clamp(1.05rem,1.5vw,1.4rem);line-height:1.18;
  text-shadow:0 2px 12px rgba(0,0,0,.28);
  transition:transform .45s var(--ease)}
.prog-card__body{padding:clamp(1.1rem,2vw,1.5rem);flex:1}
.prog-card__body p{font-size:.9rem;line-height:1.68;
  display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden}
.prog-card__body{display:flex;flex-direction:column;align-items:flex-start}
.prog-card__more{margin-top:auto;padding:.85rem 0 .35rem;min-height:44px;background:none;border:0;cursor:pointer;
  font-family:var(--sans);font-size:.88rem;font-weight:600;color:var(--pink);
  text-decoration:underline;text-underline-offset:3px}
.prog-card__more:hover{color:var(--navy)}
.prog-card__more:focus-visible{outline:2px solid var(--navy);outline-offset:3px;border-radius:4px}

/* program detail dialog */
.prog-modal{width:min(100% - 2rem,40rem);max-height:min(100% - 2rem,52rem);padding:0;border:0;
  border-radius:var(--r-lg);background:var(--white);color:var(--ink);overflow:hidden;
  box-shadow:0 30px 80px rgba(21,27,63,.35)}
.prog-modal[open]{display:flex}
.prog-modal::backdrop{background:rgba(20,25,64,.72)}
.prog-modal__inner{position:relative;display:flex;flex-direction:column;width:100%;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.prog-modal__media{position:relative;margin:0;aspect-ratio:16/9;flex:none;overflow:hidden;isolation:isolate}
.prog-modal__media img{width:100%;height:100%;object-fit:cover}
.prog-modal__title{position:absolute;left:0;right:0;bottom:0;margin:0;color:#fff;
  padding:1.25rem clamp(1.25rem,4vw,2rem);font-size:clamp(1.35rem,3vw,1.8rem);line-height:1.15;
  text-shadow:0 2px 12px rgba(0,0,0,.28)}
.prog-modal__body{padding:clamp(1.25rem,4vw,2rem)}
.prog-modal__body p{font-size:.98rem;line-height:1.7}
.prog-modal__body p + p{margin-top:1rem}
.prog-modal__close{position:absolute;top:.85rem;right:.85rem;z-index:2;width:2.6rem;height:2.6rem;border-radius:50%;
  display:grid;place-items:center;background:rgba(255,255,255,.92);color:var(--navy);
  box-shadow:0 4px 14px rgba(0,0,0,.18)}
.prog-modal__close svg{width:1.15rem;height:1.15rem}
.prog-modal__close:hover{background:#fff}
.prog-modal__close:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
html.has-modal{overflow:hidden}

/* hover: lift the card, ease the photo in, lighten the veil a touch */
.prog-card__inner:hover{transform:translateY(-.6rem) scale(1.03)}
.prog-card:hover::after{transform:translateY(-.6rem) scale(1.03);
  background:rgba(38,47,107,.38)}
.prog-card.is-centre .prog-card__inner:hover{transform:translateY(-.9rem) scale(1.07)}
.prog-card.is-centre:hover::after{transform:translateY(-.9rem) scale(1.07)}
.prog-card__inner:hover .prog-card__media img{transform:scale(1.07)}
.prog-card__inner:hover .prog-card__veil{opacity:.86}
.prog-card__inner:hover .prog-card__title{transform:translateY(-.2rem)}

@media (max-width:1080px){
  .prog-card{flex:0 0 calc((100% - var(--cgap)) / 2)}
}
@media (max-width:700px){
  .prog-card{flex:0 0 86%}
  .prog-card__body p{-webkit-line-clamp:9}
  .carousel__arrow{width:2.5rem;height:2.5rem}
  .carousel__arrow svg{width:1.1rem;height:1.1rem}
}
@media (prefers-reduced-motion:reduce){
  .carousel__viewport{scroll-behavior:auto}
  .prog-card__inner,.prog-card::after,.prog-card__media img,
  .prog-card__title,.prog-card__veil{transition:none}
}

/* =====================================================================
   MEALS COLLAGE: cards and photographs interlocked into one rectangle.
   Four columns by three rows on desktop, every cell filled, one gap.
   ===================================================================== */
.mcollage{padding:var(--sec) 0}
.mcollage__head{max-width:52rem;margin-bottom:clamp(2rem,4vw,3rem)}
.mcollage__head h2{color:var(--navy);margin-top:1.25rem}

.mcollage__grid{display:grid;gap:clamp(.9rem,1.6vw,1.35rem);
  grid-template-columns:repeat(4,1fr);
  grid-template-rows:repeat(3,minmax(13rem,auto))}
.mcollage__cell{margin:0;border-radius:var(--r-md);overflow:hidden;min-width:0}
.mcollage__img{background:var(--navy-tint)}
.mcollage__img img{width:100%;height:100%;object-fit:cover;display:block}
.mcollage__card{background:var(--white);padding:clamp(1.35rem,2.2vw,1.9rem);
  display:flex;flex-direction:column;justify-content:center;
  box-shadow:0 2px 4px rgba(38,47,107,.04),0 22px 44px -32px rgba(38,47,107,.4)}
.mcollage__card h3{color:var(--navy);font-size:clamp(1.02rem,1.5vw,1.25rem);
  line-height:1.25;margin-bottom:.7rem}
.mcollage__card p{font-size:.92rem;line-height:1.7}
.mcollage__card--2{background:var(--navy);color:rgba(255,255,255,.86)}
.mcollage__card--2 h3{color:#fff}
.mcollage__card--2 p{color:rgba(255,255,255,.82)}
.mcollage__card--3{background:var(--cream-deep)}

.mcollage__img--chef  {grid-column:1 / 3;grid-row:1 / 3}
.mcollage__card--1    {grid-column:3 / 5;grid-row:1 / 2}
.mcollage__card--2    {grid-column:3 / 4;grid-row:2 / 4}
.mcollage__img--garden{grid-column:4 / 5;grid-row:2 / 4}
.mcollage__card--3    {grid-column:1 / 3;grid-row:3 / 4}

@media (max-width:1000px){
  .mcollage__grid{grid-template-columns:repeat(2,1fr);
    grid-template-rows:repeat(4,minmax(12rem,auto))}
  .mcollage__img--chef  {grid-column:1 / 3;grid-row:1 / 2}
  .mcollage__card--1    {grid-column:1 / 2;grid-row:2 / 3}
  .mcollage__card--2    {grid-column:2 / 3;grid-row:2 / 3}
  .mcollage__img--garden{grid-column:1 / 2;grid-row:3 / 4}
  .mcollage__card--3    {grid-column:2 / 3;grid-row:3 / 4}
}
@media (max-width:640px){
  .mcollage__grid{grid-template-columns:1fr;grid-template-rows:none}
  .mcollage__cell{grid-column:1 / -1 !important;grid-row:auto !important}
  .mcollage__img{aspect-ratio:16/10}
}

/* =====================================================================
   OWNER PORTRAIT: the standard portrait treatment, with the heavy
   drop shadow softened (the outline carries the depth instead).
   ===================================================================== */
.founder__portrait--soft img{
  box-shadow:0 2px 4px rgba(38,47,107,.03),0 8px 20px -8px rgba(38,47,107,.2)}

/* Ormond campus tile: the child sits low in the frame, so bias the crop
   down rather than centring it and cropping the face out. */
.tile__photo-media--lower img{object-position:center 28%}

/* =====================================================================
   ELSEWHERE AT ELLES BELLES: compact variant of the doodle section
   ===================================================================== */
.prose--doodle-bg{padding-top:calc(var(--sec) * .5);padding-bottom:calc(var(--sec) * .5)}
.prose--doodle-bg .prose__head{margin-bottom:1.25rem}
.prose--doodle-bg .prose__body p{margin-top:.5rem}
.prose--doodle-bg .prose__body p:first-child{margin-top:0}
.prose--doodle-bg .prose__body p.prose__action{margin-top:1.65rem}

/* Compact "read more" footers: a short link block does not need a full
   section's rhythm above and below it. */
.prose--compact{padding-top:calc(var(--sec) * .38);padding-bottom:calc(var(--sec) * .38)}
.prose--compact .prose__head{margin-bottom:.9rem}
.prose--compact .prose__head h2{margin-top:.6rem;font-size:clamp(1.4rem,2.4vw,1.95rem)}
.prose--compact .prose__body > * + *{margin-top:.55rem}

/* =====================================================================
   NQS RATING BAND: the assessment badge beside a short explanation
   ===================================================================== */
.rating{padding:0 0 calc(var(--sec) * .55)}
.rating__grid{display:grid;grid-template-columns:.7fr 1.3fr;
  gap:clamp(2rem,5vw,4rem);align-items:center;
  background:var(--cream-deep);border-radius:var(--r-lg);
  padding:clamp(1.75rem,4vw,3rem)}
.rating__badge{margin:0}
.rating__badge img{width:100%;height:auto;max-width:22rem;margin-inline:auto}
.rating__copy h2{color:var(--navy);margin-top:1rem;
  font-size:clamp(1.35rem,2.3vw,1.9rem);line-height:1.2}
.rating__copy p{margin-top:1rem}
@media (max-width:820px){
  .rating__grid{grid-template-columns:1fr;text-align:center}
  .rating__copy .eyebrow{justify-content:center}
  .rating__badge img{max-width:16rem}
}

/* =====================================================================
   SPLIT SLIM: compact top/bottom padding for intro sections that sit
   immediately above a form, which avoids the double-padding effect.
   ===================================================================== */
.split--slim{padding-top:calc(var(--sec) * .5);padding-bottom:calc(var(--sec) * .5)}

/* =====================================================================
   CHILD SAFE STANDARDS: decorative offset frames around image
   placeholders, echoing the founder portrait style.
   ===================================================================== */
.css-img-frame{position:relative;isolation:isolate;display:block}
.css-img-frame img{border-radius:var(--r-lg);width:100%;display:block;position:relative;z-index:1}

/* pink frames: three nested outlines offset to bottom-right */
.css-img-frame--pink{
  box-shadow:
    9px 9px 0 1.5px rgba(229,121,157,.55),
    17px 17px 0 1.5px rgba(229,121,157,.3),
    25px 25px 0 1.5px rgba(229,121,157,.14);
  border-radius:var(--r-lg);
  margin-bottom:1.6rem;
  margin-right:1.6rem}

/* yellow frames: three nested outlines offset to bottom-left */
.css-img-frame--yellow{
  box-shadow:
    -9px 9px 0 1.5px rgba(210,165,0,.65),
    -17px 17px 0 1.5px rgba(210,165,0,.35),
    -25px 25px 0 1.5px rgba(210,165,0,.18);
  border-radius:var(--r-lg);
  margin-bottom:1.6rem;
  margin-left:1.6rem}

/* =====================================================================
   CHILD SAFE STANDARDS PAGE
   Three movements: framed intro, scope chips, numbered pledge cards.
   ===================================================================== */
/* statement of commitment: full-width copy, two-column pledge list */
.css-statement{padding:var(--sec) 0;background:var(--cream-deep)}
.css-statement__grid{max-width:62rem;margin-inline:auto}
.css-statement__copy h2{color:var(--navy);margin-top:1.25rem}
.css-statement__copy p{margin-top:1.1rem}
.css-statement__copy ul{margin-top:1.1rem;display:grid;gap:.5rem;
  grid-template-columns:repeat(auto-fill,minmax(min(26rem,100%),1fr))}
.css-statement__copy ul li{position:relative;padding-left:1.4rem;line-height:1.6}
.css-statement__copy ul li::before{content:'';position:absolute;left:0;top:.6em;
  width:.45rem;height:.45rem;border-radius:50%;background:var(--pink)}

/* Scope chips: the ten organisation types. The yellow wash is painted as the
   section's own background layer rather than an element stacked over it. */
.csafe-scope{padding:calc(var(--sec)*.7) 0;position:relative;
  background:
    radial-gradient(60% 70% at 4% 108%, rgba(250,223,6,.38), transparent 70%),
    var(--cream-deep)}
.csafe-scope__head{max-width:46rem;position:relative}
.csafe-scope__head h2{color:var(--navy);margin-top:1.1rem}
.csafe-scope__intro{margin-top:1.1rem}
.csafe-scope__list{margin-top:clamp(1.5rem,3vw,2.25rem);position:relative;
  display:flex;flex-wrap:wrap;gap:.7rem}
.csafe-scope__list li{background:var(--white);border:1px solid var(--line);
  border-radius:100px;padding:.6rem 1.25rem;font-size:.93rem;color:var(--muted);
  transition:transform .3s var(--ease),color .3s var(--ease),
             border-color .3s var(--ease),box-shadow .3s var(--ease)}
.csafe-scope__list li:hover{transform:translateY(-3px);color:var(--navy);
  border-color:rgba(38,47,107,.3);box-shadow:0 14px 26px -18px rgba(38,47,107,.5)}
.csafe-scope__list li.is-ours{background:var(--navy);border-color:var(--navy);
  color:#fff;font-weight:650}
.csafe-scope__list li.is-ours:hover{color:#fff}

@media (prefers-reduced-motion:reduce){
  .csafe-scope__list li{transition:none}
  .csafe-scope__list li:hover{transform:none}
}

/* =====================================================================
   SCHOOL READINESS FUNDING PAGE
   Framed intro, a numbered four-step funding year, framed data section.
   ===================================================================== */
.srf-intro{padding:var(--sec) 0 calc(var(--sec)*.6);position:relative;overflow:hidden}
.srf-intro::before{content:"";position:absolute;top:-26%;left:-12%;width:42%;aspect-ratio:1;
  background:radial-gradient(circle,rgba(250,223,6,.30),transparent 70%);pointer-events:none}
.srf-intro__grid{display:grid;grid-template-columns:.95fr 1.05fr;
  gap:clamp(2.5rem,6vw,5rem);align-items:center;position:relative}
.srf-intro__media{min-width:0}
/* plain rounded image, no decorative outline behind it */
.srf-figure{margin:0;border-radius:var(--r-lg);overflow:hidden;background:var(--navy-tint);
  box-shadow:0 2px 4px rgba(38,47,107,.05),0 26px 50px -34px rgba(38,47,107,.45)}
.srf-figure img{display:block;width:100%;height:auto}
.srf-intro__copy h2{color:var(--navy);margin-top:1.25rem}
.srf-intro__copy p{margin-top:1.2rem}
.srf-intro__copy .lead{font-size:1.06rem;color:var(--ink)}

/* Four-step band. A connecting rule runs behind the numbers on wide screens
   so the steps read as one sequence rather than four separate cards. */
.srf-cycle{padding:calc(var(--sec)*.75) 0;background:var(--cream-deep);
  position:relative;overflow:hidden}
.srf-cycle::after{content:"";position:absolute;top:-28%;right:-10%;width:40%;aspect-ratio:1;
  background:radial-gradient(circle,rgba(229,121,157,.22),transparent 70%);pointer-events:none}
.srf-cycle__head{max-width:46rem;position:relative}
.srf-cycle__head h2{color:var(--navy);margin-top:1.1rem}
.srf-cycle__steps{list-style:none;margin:clamp(2rem,4vw,3rem) 0 0;padding:0;position:relative;
  display:grid;gap:clamp(1rem,2vw,1.5rem);
  grid-template-columns:repeat(auto-fit,minmax(min(14rem,100%),1fr))}
.srf-step{position:relative;background:var(--white);border-radius:var(--r-lg);
  padding:clamp(1.4rem,2.4vw,1.9rem);
  box-shadow:0 2px 4px rgba(38,47,107,.04),0 24px 48px -32px rgba(38,47,107,.35);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.srf-step:hover{transform:translateY(-5px);
  box-shadow:0 2px 4px rgba(38,47,107,.05),0 34px 60px -34px rgba(38,47,107,.45)}
.srf-step__num{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:#FBE9EF;color:var(--pink);font-size:.8rem;font-weight:750;letter-spacing:.08em;
  margin-bottom:1rem}
.srf-step h3{color:var(--navy);font-size:1.05rem;margin-bottom:.5rem}
.srf-step p{font-size:.92rem;line-height:1.65}

.srf-data{padding:calc(var(--sec)*.8) 0 var(--sec);position:relative;overflow:hidden}
.srf-data::before{content:"";position:absolute;bottom:-26%;right:-12%;width:44%;aspect-ratio:1;
  background:radial-gradient(circle,rgba(229,121,157,.18),transparent 70%);pointer-events:none}
.srf-data__grid{display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(2.5rem,6vw,5rem);align-items:center;position:relative}
.srf-data__media{min-width:0}
.srf-data__copy h2{color:var(--navy);margin-top:1.25rem}
.srf-data__copy p{margin-top:1.2rem}
.srf-data__copy .lead{font-size:1.06rem;color:var(--ink)}

@media (max-width:900px){
  .srf-intro__grid,.srf-data__grid{grid-template-columns:1fr}
  /* image below the copy on narrow screens, for both bands */
  .srf-intro__media{order:2}
}
@media (prefers-reduced-motion:reduce){
  .srf-step{transition:none}
  .srf-step:hover{transform:none}
}


/* =====================================================================
   NQF PAGE: arched portrait image + compact award badge below
   ===================================================================== */
/* Mirrors the homepage .family composition: navy rounded panel, portrait with
   a yellow tag, the credential card beneath it, copy alongside, facts banded
   across the bottom behind a hairline rule. */
.nqf-intro{background:var(--navy);color:#fff;padding:var(--sec) 0;
  position:relative;overflow:hidden}
.nqf-intro::before{content:"";position:absolute;top:-30%;right:-12%;width:52%;aspect-ratio:1;
  background:radial-gradient(circle,rgba(229,121,157,.22),transparent 68%);pointer-events:none}
.nqf-intro::after{content:"";position:absolute;bottom:-25%;left:-10%;width:44%;aspect-ratio:1;
  background:radial-gradient(circle,rgba(250,223,6,.13),transparent 68%);pointer-events:none}
.nqf-intro__top{display:grid;grid-template-columns:.85fr 1.15fr;
  gap:clamp(2.5rem,6vw,5.5rem);align-items:center;position:relative}
.nqf-intro__visual{min-width:0}
.nqf-intro__portrait{position:relative;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 40px 80px -40px rgba(0,0,0,.6)}
.nqf-intro__portrait img{width:100%;height:auto}
.nqf-intro__tag{position:absolute;left:1.25rem;bottom:1.25rem;background:var(--yellow);color:var(--navy-deep);
  font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;padding:.5rem 1rem;border-radius:100px}
.nqf-intro__award{display:block;width:min(82%,330px);height:auto;margin:clamp(1.35rem,3vw,2rem) auto 0;
  padding:.9rem 1.15rem;background:rgba(255,255,255,.96);border-radius:var(--r-md);
  box-shadow:0 22px 48px -30px rgba(0,0,0,.65)}
.nqf-intro__copy h2{color:#fff;margin:1.5rem 0 1.75rem}
.nqf-intro__prose p{color:rgba(255,255,255,.78)}
.nqf-intro__prose p + p{margin-top:1.1rem}
.nqf-intro__prose strong{color:#fff}
.nqf-intro__band{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.25rem,2.5vw,2rem);
  margin-top:clamp(3.5rem,7vw,6rem);padding-top:clamp(2.5rem,5vw,3.5rem);
  border-top:1px solid rgba(255,255,255,.16);position:relative}
@media (max-width:980px){
  .nqf-intro__band{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .nqf-intro__top{grid-template-columns:1fr}
}
@media (max-width:560px){
  .nqf-intro__band{grid-template-columns:1fr}
}

/* =====================================================================
   SIMPLE ENROLMENT / WAITLIST FORM: matches the reference layout
   (Child details, Parent details, Contact details, Submit)
   ===================================================================== */
.split--slim{position:relative;z-index:1}
/* landscape photo: the frame follows the image's own ratio so nothing is cropped */
@media (min-width:981px){.split--landscape.split--flip .split__grid{grid-template-columns:1fr 1fr}}
.split--landscape .split__media{aspect-ratio:auto;max-height:none}
.split--landscape .split__media img{height:auto}

/* ---- enrolment and waitlist form surface ---- */
.formsec.formsec--navy{background:var(--cream-deep)}
.formsec.formsec--navy::before,.formsec.formsec--navy::after{display:none}
.formsec.formsec--navy .form__section-title{border-bottom-color:rgba(229,121,157,.34)}

/* Tour form: single field group, so no section rules between blocks */
.form--tour{gap:clamp(1.5rem,3vw,2rem)}

.formsec__simple-head{text-align:center;max-width:44rem;margin-inline:auto;
  margin-bottom:clamp(1.75rem,3.5vw,2.5rem)}
.formsec__simple-head .eyebrow{justify-content:center}
.formsec__simple-head h2{color:var(--navy);margin-top:1.1rem}
.formsec__simple-blurb{margin-top:1.1rem;font-size:1rem;line-height:1.7}
.form--simple{max-width:50rem;margin-inline:auto;display:grid;gap:clamp(2rem,4vw,3rem)}
.form__section-title{font-family:var(--heading);
  font-size:clamp(1.3rem,2vw,1.65rem);font-weight:600;color:var(--navy);
  padding-bottom:.6rem;margin-bottom:1.1rem;
  border-bottom:2px solid var(--line)}
.form__section-fields{display:grid;gap:.9rem}
.form--simple .form__actions{text-align:center;padding-top:.5rem}

/* =====================================================================
   INFORMATION FOR FAMILIES: accordion left, image right
   ===================================================================== */
#resources{padding:var(--sec) 0}
.faminfo{display:grid;grid-template-columns:1fr .85fr;gap:clamp(2rem,5vw,4rem);
  align-items:stretch;margin-top:clamp(2rem,4vw,3rem)}
/* the figure matches the list's height (never shorter than a portrait-friendly
   minimum) and anchors near the top so both heads stay in frame */
.faminfo__figure{position:relative;margin:0;min-height:clamp(26rem,36vw,32rem)}
.faminfo__figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 18%;border-radius:var(--r-lg);display:block}
.faminfo__item{border-bottom:1px solid var(--line)}
.faminfo__item:first-child{border-top:1px solid var(--line)}
.faminfo__summary{cursor:pointer;list-style:none;padding:1.1rem 0;
  display:flex;align-items:center;gap:.85rem;
  font-weight:600;font-size:.975rem;color:var(--navy);font-family:var(--display)}
.faminfo__summary::marker,.faminfo__summary::-webkit-details-marker{display:none}
.faminfo__summary::after{content:"";width:18px;height:18px;flex:none;margin-left:auto;
  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23262f6b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .3s}
details[open] > .faminfo__summary::after{transform:rotate(180deg)}
.faminfo__icon{width:34px;height:34px;border-radius:50%;background:#FBE9EF;
  color:var(--navy);display:grid;place-items:center;flex:none}
.faminfo__icon svg{width:17px;height:17px}
.faminfo__body{padding:.2rem 0 1.25rem calc(34px + .85rem);color:var(--muted)}
.faminfo__body p{font-size:.94rem;line-height:1.7}
.faminfo__body .link-arrow{margin-top:.75rem;font-size:.88rem}
@media (max-width:820px){
  .faminfo{grid-template-columns:1fr}
  .faminfo__figure{display:none}
}

/* =====================================================================
   A HOLISTIC EDUCATION: image left, copy right
   ===================================================================== */
.holistic{padding:var(--sec) 0 calc(var(--sec) * .55)}
.holistic__grid{display:grid;grid-template-columns:.85fr 1.15fr;
  gap:clamp(2.5rem,6vw,5rem);align-items:center}
.holistic__media{margin:0;aspect-ratio:4/5;overflow:hidden;background:var(--navy-tint);
  border-radius:200px 200px var(--r-lg) var(--r-lg)}
.holistic__media img{width:100%;height:100%;object-fit:cover}
.holistic__body h2{color:var(--navy);margin-top:1.25rem}
.holistic__text{margin-top:1.75rem}
.holistic__text p + p{margin-top:1.1rem}
@media (max-width:900px){
  .holistic__grid{grid-template-columns:1fr;gap:2.5rem}
  .holistic__media{order:-1;aspect-ratio:4/3.4;max-width:28rem;
    border-radius:160px 160px var(--r-lg) var(--r-lg)}
}

/* =====================================================================
   DINING: copy beside a single photograph, on a light pink ground
   ===================================================================== */
.dining{padding:var(--sec) 0 calc(var(--sec) * .55);background:rgba(229,121,157,.09)}
.dining__grid{display:grid;grid-template-columns:1.1fr .9fr;
  gap:clamp(2.5rem,6vw,4.5rem);align-items:center}
.dining__body h2{color:var(--navy);margin-top:1.25rem;
  font-size:clamp(1.75rem,3.4vw,2.75rem);line-height:1.18}
.dining__text{margin-top:1.75rem}
.dining__text p + p{margin-top:1.1rem}
.dining__media{margin:0;aspect-ratio:4/3.4;overflow:hidden;background:var(--navy-tint);
  border-radius:var(--r-lg);
  box-shadow:0 2px 4px rgba(38,47,107,.04),0 30px 60px -34px rgba(38,47,107,.4)}
.dining__media img{width:100%;height:100%;object-fit:cover}
@media (max-width:900px){
  .dining__grid{grid-template-columns:1fr;gap:2.5rem}
  .dining__media{aspect-ratio:16/10}
}

/* =====================================================================
   OUR CHEFS: two portrait cards, one image-first, one image-last
   ===================================================================== */
.chefs{padding:calc(var(--sec) * .55) 0}
/* Chefs: the pair sits beside the heading inside one tinted panel, so the
   section reads as a single intentional composition and stays compact.
   Portraits are never cropped: the image keeps its own aspect ratio. */
.chefs__panel{position:relative;overflow:hidden;
  background:var(--cream-deep);border-radius:var(--r-xl);
  padding:clamp(2rem,4.5vw,3.5rem);
  display:grid;grid-template-columns:.9fr 1.1fr;
  gap:clamp(2rem,5vw,4rem);align-items:center}
.chefs__panel::before{content:"";position:absolute;top:-38%;right:-14%;width:46%;aspect-ratio:1;
  background:radial-gradient(circle,rgba(229,121,157,.20),transparent 68%);pointer-events:none}
.chefs__panel::after{content:"";position:absolute;bottom:-32%;left:-12%;width:40%;aspect-ratio:1;
  background:radial-gradient(circle,rgba(250,223,6,.26),transparent 68%);pointer-events:none}
.chefs__intro{position:relative;min-width:0}
.chefs__intro h2{color:var(--navy);margin-top:1.25rem}
.chefs__lead{margin-top:1.1rem;font-size:1.02rem;max-width:28rem}

.chefs__pair{position:relative;display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(1.25rem,3vw,2.25rem)}
.chef{min-width:0}
.chef__portrait{position:relative;margin:0;border-radius:var(--r-lg);overflow:hidden;
  background:var(--navy-tint);
  box-shadow:0 2px 4px rgba(38,47,107,.05),0 26px 50px -30px rgba(38,47,107,.55)}
/* height:auto keeps the whole portrait in frame, heads included */
.chef__portrait img{display:block;width:100%;height:auto}
.chef__portrait img.chef__img--rima{scale:1.2;transform-origin:62% 100%}
.chef__tag{position:absolute;left:.85rem;bottom:.85rem;
  background:var(--yellow);color:var(--navy-deep);
  font-family:var(--display);font-size:.95rem;font-weight:600;
  padding:.35rem .9rem;border-radius:100px}
.chef__role{margin-top:.9rem;color:var(--pink);font-size:.68rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase}
.chef__bio{margin-top:.4rem;font-size:.88rem;line-height:1.6}
.chef__link{display:block;border-radius:var(--r-lg)}
.chef__link img{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.chef__link:hover img,.chef__link:focus-visible img{transform:scale(1.03)}
.chef__more{margin-top:.6rem;font-size:.88rem;text-decoration:underline;text-decoration-color:var(--pink);text-underline-offset:3px}
.stack--people .stack__card[id]{scroll-margin-top:7rem}

@media (max-width:900px){
  .chefs__panel{grid-template-columns:1fr;gap:clamp(1.75rem,4vw,2.5rem)}
  .chefs__lead{max-width:none}
}
@media (max-width:560px){
  .chefs__pair{grid-template-columns:1fr;gap:1.75rem;max-width:20rem;margin-inline:auto}
}

/* =====================================================================
   MEALS PAGE: tighten the rhythm between sections
   ===================================================================== */
.mcollage{padding:calc(var(--sec) * .55) 0}

/* Chefs: the pair runs the full content width, close to both screen edges. */
/* Carousel: give the cards more of a narrow screen back. */
@media (max-width:700px){
  .carousel{padding-inline:clamp(2.5rem,11vw,3.25rem)}
}

/* =====================================================================
   ZEINA'S STORY: the Meals collage component, arranged for six cells
   (two photographs and four story blocks) in one cohesive rectangle.
   ===================================================================== */
.mcollage--story{padding:calc(var(--sec) * .42) 0 var(--sec);background:var(--cream)}
.mcollage--story .mcollage__grid{grid-template-rows:repeat(3,minmax(12rem,auto))}
.mcollage__when{display:block;margin-bottom:.5rem;color:var(--pink);
  font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.mcollage--story .mcollage__card--1{background:var(--white)}
.mcollage--story .mcollage__card--2{background:var(--cream-deep);color:inherit}
.mcollage--story .mcollage__card--2 h3{color:var(--navy)}
.mcollage--story .mcollage__card--3{background:var(--navy);color:rgba(255,255,255,.86)}
.mcollage--story .mcollage__card--3 h3{color:#fff}
.mcollage--story .mcollage__card--3 p{color:rgba(255,255,255,.82)}
.mcollage--story .mcollage__card--2 p{color:var(--muted)}
.mcollage--story .mcollage__card--4{background:var(--cream-deep)}
.mcollage--story .mcollage__card--1 p,
.mcollage--story .mcollage__card--2 p{
  display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}

.mcollage__img--a{grid-column:1 / 3;grid-row:1 / 3}
.mcollage--story .mcollage__card--1{grid-column:3 / 4;grid-row:1 / 2}
.mcollage--story .mcollage__card--2{grid-column:4 / 5;grid-row:1 / 2}
.mcollage--story .mcollage__card--3{grid-column:3 / 4;grid-row:2 / 4}
.mcollage__img--b{grid-column:4 / 5;grid-row:2 / 4}
.mcollage--story .mcollage__card--4{grid-column:1 / 3;grid-row:3 / 4}

@media (max-width:1000px){
  .mcollage--story .mcollage__grid{grid-template-rows:repeat(4,minmax(11rem,auto))}
  .mcollage__img--a{grid-column:1 / 3;grid-row:1 / 2}
  .mcollage--story .mcollage__card--1{grid-column:1 / 2;grid-row:2 / 3}
  .mcollage--story .mcollage__card--2{grid-column:2 / 3;grid-row:2 / 3}
  .mcollage--story .mcollage__card--3{grid-column:1 / 2;grid-row:3 / 4}
  .mcollage__img--b{grid-column:2 / 3;grid-row:3 / 4}
  .mcollage--story .mcollage__card--4{grid-column:1 / 3;grid-row:4 / 5}
}

/* =====================================================================
   BOOK A TOUR: intro, booking form and proof share the first screen.
   Navy ground so the transparent nav reads as it does on every page head.
   ===================================================================== */
.tourtop{position:relative;overflow:hidden;background:var(--navy-deep);color:#fff;
  padding:calc(var(--nav-h) + clamp(2rem,5vw,3.5rem)) 0 clamp(3.5rem,7vw,5.5rem)}
.tourtop::before,.tourtop::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.tourtop::before{width:42rem;aspect-ratio:1;right:-16rem;top:-14rem;
  background:radial-gradient(circle,rgba(229,121,157,.22),transparent 66%)}
.tourtop::after{width:36rem;aspect-ratio:1;left:-14rem;bottom:-18rem;
  background:radial-gradient(circle,rgba(250,223,6,.14),transparent 66%)}
.tourtop__grid{position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  grid-template-areas:"head form";
  column-gap:clamp(2rem,5vw,4.5rem);align-items:stretch}
.tourtop__head{grid-area:head;display:flex;flex-direction:column}
.tourtop__proof{margin-top:clamp(2rem,3.5vw,3rem)}
.tourtop__form{grid-area:form}
.tourtop h1{color:#fff;margin-top:1.1rem;max-width:14ch;
  font-size:clamp(2.2rem,4.4vw,3.4rem);line-height:1.04}
.tourtop h1 em{color:var(--yellow)}
.tourtop__sub{margin-top:1.1rem;color:rgba(255,255,255,.82);font-size:1.05rem;max-width:34rem}
.tourtop__form{background:var(--white);color:var(--ink);border-radius:var(--r-lg);
  padding:clamp(1.5rem,3.2vw,2.4rem);box-shadow:0 40px 80px -40px rgba(0,0,0,.55)}
.tourtop__form .form--tour{display:grid;gap:1.35rem}
.tourtop__formtitle{color:var(--navy);font-size:clamp(1.45rem,2.4vw,1.85rem)}
.tourtop__points{display:grid;gap:.6rem;margin-top:1.75rem}
.tourtop__points li{position:relative;padding-left:1.6rem;color:rgba(255,255,255,.86);font-size:.95rem}
.tourtop__points li::before{content:"";position:absolute;left:0;top:.45em;width:.95rem;height:.55rem;
  border-left:2px solid var(--yellow);border-bottom:2px solid var(--yellow);transform:rotate(-45deg)}
.field__hint{font-size:.8rem;color:var(--muted);line-height:1.5}

/* ---- proof: a claim and the evidence for it, side by side ---- */
.proof{margin-top:1.75rem;display:grid;gap:1rem}
.proof__claim{color:var(--ink);font-size:.98rem}
.proof--dark .proof__claim{color:rgba(255,255,255,.86)}
.proof--dark .proof__claim strong{color:#fff}
.proof__quote{margin:0;background:var(--white);border-radius:var(--r-md);
  padding:1.25rem 1.4rem;border-left:4px solid var(--pink);
  box-shadow:0 2px 4px rgba(38,47,107,.04),0 22px 44px -30px rgba(38,47,107,.45)}
.proof__quote p{color:var(--ink);font-family:var(--display);font-size:1.08rem;line-height:1.45}
.proof__quote footer{margin-top:.75rem;font-size:.8rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:.2rem .5rem;align-items:center}
.proof__stars{color:#F5C518;letter-spacing:.08em}
.proof--dark .proof__quote,.proof__quote--dark{background:rgba(255,255,255,.08);border-left-color:var(--yellow);box-shadow:none}
.proof--dark .proof__quote p,.proof__quote--dark p{color:#fff}
.proof--dark .proof__quote footer,.proof__quote--dark footer{color:rgba(255,255,255,.7)}

/* ---- readiness paths (Book a Tour) ---- */
.paths{padding:clamp(4rem,8vw,6.5rem) 0}
.paths__head{max-width:46rem;margin-bottom:clamp(1.75rem,3.5vw,2.5rem)}
.paths__head h2{color:var(--navy);margin-top:1.1rem;font-size:clamp(1.75rem,3.4vw,2.6rem)}
.paths__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2vw,1.5rem)}
.path{background:var(--white);border-radius:var(--r-lg);padding:clamp(1.5rem,2.6vw,2rem);
  display:flex;flex-direction:column;align-items:flex-start;border:1px solid var(--line)}
.path--now{background:var(--navy-tint);border-color:rgba(38,47,107,.18)}
.path__stage{font-size:.7rem;font-weight:750;letter-spacing:.15em;text-transform:uppercase;color:var(--pink)}
.path h3{color:var(--navy);margin:.55rem 0 .6rem;font-size:1.3rem}
.path p{font-size:.94rem;margin-bottom:1.4rem}
.path .btn{margin-top:auto}

/* =====================================================================
   AGE GROUP PAGES
   ===================================================================== */
.opening{padding:var(--sec) 0 calc(var(--sec) * .6)}
.opening__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:start}
.opening__head .statement{font-size:clamp(1.75rem,3.4vw,2.7rem)}
.opening__text p + p{margin-top:1rem}
.opening__actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;margin-top:1.75rem}
.opening__actions .link-arrow{margin-top:0}

.claim{padding:calc(var(--sec) * .6) 0}
.claim--tint{background:var(--cream-deep)}
.claim__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center}
.claim--flip .claim__copy{order:2}
.claim__copy h2{color:var(--navy);margin-top:1.1rem;font-size:clamp(1.75rem,3.2vw,2.6rem)}
.claim__copy p{margin-top:1rem}
.claim__copy .lead{font-size:1.1rem;margin-top:1.35rem}
.claim__copy a:not(.btn):not(.link-arrow){color:var(--navy);font-weight:650;text-decoration:underline;
  text-decoration-color:var(--pink);text-underline-offset:3px}
.claim__proof{position:relative}
.claim__media{margin:0;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3.6;background:var(--navy-tint);
  box-shadow:0 2px 4px rgba(38,47,107,.04),0 30px 60px -34px rgba(38,47,107,.4)}
.claim__media img{width:100%;height:100%;object-fit:cover}
/* the review overlaps the photo's foot, so the two read as one proof */
.claim__media + .proof__quote{position:relative;margin:-3.25rem clamp(.75rem,2.5vw,1.75rem) 0}
.claim--quote .claim__grid{align-items:center}
.claim--quote .proof__quote{padding:clamp(1.5rem,3vw,2.25rem)}
.claim--quote .proof__quote p{font-size:clamp(1.15rem,1.8vw,1.4rem)}

.dayflow{padding:calc(var(--sec) * .6) 0;background:var(--white)}
.dayflow__head{max-width:46rem;margin-bottom:clamp(2rem,4vw,3rem)}
.dayflow__head h2{color:var(--navy);margin-top:1.1rem}
.dayflow__intro{margin-top:1rem;font-size:1.05rem}
.dayflow__list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(.85rem,1.6vw,1.25rem);
  list-style:none;margin:0;padding:0;position:relative}
.dayflow__step{background:var(--cream);border-radius:var(--r-md);padding:1.35rem 1.25rem;position:relative}
.dayflow__num{display:inline-grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:50%;
  background:var(--navy);color:#fff;font-size:.78rem;font-weight:750;letter-spacing:.06em}
.dayflow__step h3{color:var(--navy);font-size:1.1rem;margin:.9rem 0 .45rem}
.dayflow__step p{font-size:.9rem;line-height:1.6}

.whyus{background:var(--navy);color:#fff;padding:calc(var(--sec) * .7) 0;border-radius:var(--r-xl);
  margin:calc(var(--sec) * .4) clamp(0px,2vw,24px);position:relative;overflow:hidden}
.whyus::before{content:"";position:absolute;top:-30%;right:-12%;width:50%;aspect-ratio:1;
  background:radial-gradient(circle,rgba(229,121,157,.2),transparent 68%);pointer-events:none}
.whyus__grid{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center}
.whyus h2{color:#fff;margin-top:1.1rem;font-size:clamp(1.9rem,3.6vw,2.9rem)}
.whyus .lead{color:rgba(255,255,255,.88);margin-top:1.25rem;font-size:1.05rem}
.whyus__list{margin-top:1.5rem;display:grid;gap:.6rem}
.whyus__list li{position:relative;padding-left:1.6rem;color:rgba(255,255,255,.82);font-size:.95rem}
.whyus__list li::before{content:"";position:absolute;left:0;top:.45em;width:.95rem;height:.55rem;
  border-left:2px solid var(--yellow);border-bottom:2px solid var(--yellow);transform:rotate(-45deg)}
.whyus .link-arrow{color:var(--yellow)}
.whyus__proof{display:grid;gap:1rem;max-width:32rem;justify-self:center;width:100%}
.whyus__portrait{margin:0;position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/4.2;
  box-shadow:0 40px 80px -40px rgba(0,0,0,.6)}
.whyus__portrait img{width:100%;height:100%;object-fit:cover;object-position:center 20%}
.whyus__portrait figcaption{position:absolute;left:1rem;bottom:1rem;background:var(--yellow);color:var(--navy-deep);
  font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.45rem .9rem;border-radius:100px}

/* whyus video — 16:9 to match the landscape source, so the player fills the
   box edge to edge with no letterboxing */
.whyus__video{margin:0;position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/9;
  box-shadow:0 40px 80px -40px rgba(0,0,0,.6);background:#000;width:100%;max-width:34rem;margin-inline:auto}
.whyus__video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

/* campus pages: feature + Open Day videos side by side, same player as whyus */
.cvideos{padding:var(--sec) 0;margin-top:calc(var(--sec) / 2);background:var(--navy-tint)}
.cvideos + .way#team{padding-top:var(--sec)}
.cvideos__head{max-width:46rem;margin-bottom:clamp(2rem,4vw,3rem)}
.cvideos__head h2{color:var(--navy);margin-top:1.25rem}
.cvideos__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.25rem,3vw,2.5rem)}
.cvideos__item{margin:0;min-width:0}
.cvideos__player{max-width:none;
  box-shadow:0 2px 4px rgba(38,47,107,.04),0 30px 60px -34px rgba(38,47,107,.45)}
.cvideos__item figcaption{margin-top:1.1rem;color:var(--navy);font-weight:600;font-size:1rem;line-height:1.4}
.cvideos__label{display:block;margin-bottom:.4rem;font-size:.7rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--pink)}
.cvideos__opened{display:flex;align-items:center;gap:.5rem;width:fit-content;max-width:100%;margin-top:.9rem;
  padding:.5rem 1rem .5rem .8rem;border-radius:100px;background:var(--navy);color:#fff;
  font-size:.86rem;font-weight:600;letter-spacing:.01em;line-height:1.2}
.cvideos__opened svg{width:1.05rem;height:1.05rem;flex:none;color:var(--yellow)}
.cvideos__opened time{font-weight:700}
@media (min-width:1000px){.cvideos__grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:999px){.cvideos__grid--3{grid-template-columns:minmax(0,1fr);row-gap:2.25rem;max-width:44rem;margin-inline:auto}}
@media (max-width:760px){.cvideos__grid{grid-template-columns:minmax(0,1fr);row-gap:2.25rem}}
/* founder page: the whyus band with the video given the larger column */
.founder-video{margin-top:0;margin-bottom:var(--sec)}
.founder-video .whyus__grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.founder-video .whyus__proof,.founder-video .whyus__video{max-width:none}
.founder-video .link-arrow{margin-top:1.75rem}
@media (max-width:900px){.founder-video .whyus__grid{grid-template-columns:minmax(0,1fr)}}
/* campus pages: the pets section sits on its own soft pink band */
#pets.mv{background:var(--pink-tint);padding:var(--sec) 0;margin-top:calc(var(--sec) / 2)}

/* testimonials — horizontal carousel */
.testimonials{padding:var(--sec) 0;overflow:hidden}
.testimonials__head{text-align:center;max-width:46rem;margin:0 auto clamp(2.5rem,5vw,4rem)}
.testimonials__head .eyebrow{justify-content:center}
.testimonials__head h2{color:var(--navy);margin-top:1.25rem}

/* carousel wrapper: arrow buttons sit outside the track.
   overflow:hidden masks off-screen items; padding-block gives shadows room. */
.testimonials__carousel{position:relative;padding-inline:clamp(40px,6vw,64px);
  padding-block:44px;overflow:hidden}
.tcar__btn{position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:44px;height:44px;border-radius:50%;background:var(--white);
  box-shadow:0 4px 20px rgba(0,0,0,.14);border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:var(--navy);
  transition:background .2s var(--ease),box-shadow .2s var(--ease),opacity .2s;flex-shrink:0}
.tcar__btn:hover{background:var(--navy);color:#fff;box-shadow:0 8px 28px rgba(0,0,0,.22)}
.tcar__btn:disabled{opacity:.3;cursor:default}
.tcar__btn--prev{left:0}
.tcar__btn--next{right:0}
.tcar__btn svg{width:22px;height:22px;display:block;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* viewport: overflow:visible so box-shadows on items are not clipped;
   the parent carousel overflow:hidden masks off-screen items. */
.tcar__viewport{position:relative;overflow:visible;width:100%}

/* items: absolute-positioned, transitioned by JS */
.tcar__item{
  position:absolute;
  top:0;
  border-radius:var(--r-lg);
  overflow:hidden;
  background:#0a0f1e;
  box-shadow:0 6px 28px rgba(0,0,0,.18),0 2px 8px rgba(0,0,0,.10);
  transition:left .48s cubic-bezier(.4,0,.2,1),
             top .48s cubic-bezier(.4,0,.2,1),
             width .48s cubic-bezier(.4,0,.2,1),
             height .48s cubic-bezier(.4,0,.2,1),
             opacity .48s ease;
  cursor:pointer}
.tcar__item.is-center{cursor:default;z-index:3}
.tcar__item.is-side{z-index:2}
.tcar__item.is-hidden{z-index:1;pointer-events:none}

/* inner fills the item (iframe or thumbnail+play overlay) */
.tcar__inner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.tcar__inner iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

/* thumbnail image for preview (side) cards */
.tcar__thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* play-icon overlay on preview cards */
.tcar__play{position:relative;z-index:1;width:56px;height:56px;border-radius:50%;
  background:rgba(0,0,0,.52);backdrop-filter:blur(4px);border:2px solid rgba(255,255,255,.4);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:background .2s,transform .18s}
.tcar__item.is-side:hover .tcar__play,.tcar__item.is-side:focus-visible .tcar__play{
  background:rgba(0,0,0,.75);transform:scale(1.08)}
.tcar__play svg{width:24px;height:24px;fill:#fff;margin-left:3px;display:block}

/* standard book-serif ampersand: Georgia gives a conventional printed & */
.amp{font-family:var(--heading);font-style:normal}

/* about-us: kinder logo uses same sizing as homepage */
.family__kinder-logo{height:110px;width:auto;background:rgba(255,255,255,.96);border-radius:var(--r-md);
  padding:.75rem 1rem;box-shadow:0 22px 48px -30px rgba(0,0,0,.65);display:block}

/* kindergarten: benefits band */
.kusp{background:var(--navy-deep);color:#fff;padding:var(--sec) 0;position:relative;overflow:hidden}
.kusp::after{content:"";position:absolute;width:40rem;aspect-ratio:1;border-radius:50%;left:-16rem;bottom:-22rem;
  background:radial-gradient(circle,rgba(250,223,6,.12),transparent 66%);pointer-events:none}
.kusp__grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center}
.kusp h2{color:#fff;margin-top:1.1rem;font-size:clamp(1.9rem,3.6vw,2.9rem);max-width:20ch}
.kusp__list{margin-top:clamp(1.75rem,3.5vw,2.5rem);display:grid;gap:1.1rem}
.kusp__list li{display:flex;gap:1rem;align-items:flex-start}
.kusp__tick{flex:none;width:2.1rem;height:2.1rem;border-radius:50%;background:var(--yellow);color:var(--navy-deep);
  display:grid;place-items:center}
.kusp__tick svg{width:1.1rem;height:1.1rem}
.kusp__list h3{color:#fff;font-family:var(--sans);font-size:1.02rem;font-weight:700;letter-spacing:0;line-height:1.35}
.kusp__list p{color:rgba(255,255,255,.72);font-size:.92rem;margin-top:.2rem}
.kusp__proof{display:grid;gap:1rem;justify-items:center}
.kusp__badge{margin:0;background:#fff;border-radius:var(--r-md);padding:1rem 1.25rem;width:min(100%,19rem)}
.kusp__badge img{width:100%;height:auto}
.kusp__note{color:rgba(255,255,255,.72);font-size:.85rem;text-align:center;max-width:19rem}
.kusp__note a{color:var(--yellow);font-weight:650}
.kusp--full .kusp__grid{grid-template-columns:minmax(0,1fr)}
.kusp--full .kusp__list{grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr));column-gap:clamp(1.5rem,3vw,2.75rem);row-gap:1.6rem}

/* kindergarten: comparison, as cards rather than a spreadsheet */
.kcompare{padding:var(--sec) 0 calc(var(--sec) * .6)}
.kcompare__head{max-width:46rem;margin-bottom:clamp(2rem,4vw,3rem)}
.kcompare__head h2{color:var(--navy);margin-top:1.1rem}
.kcompare__intro{margin-top:1rem;font-size:1.05rem}
.kcompare__table{display:grid;gap:.6rem}
.kcompare__row{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.15fr) minmax(0,1.15fr);
  gap:.6rem;align-items:stretch}
.kcompare__row--head > span{font-size:.72rem;font-weight:750;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);padding:.4rem 1.1rem}
.kcompare__row--head .kcompare__col--us{background:var(--navy);color:#fff;border-radius:var(--r-md) var(--r-md) 0 0;
  padding:.85rem 1.1rem;font-family:var(--display);text-transform:none;letter-spacing:0;font-size:1.1rem;font-weight:600}
.kcompare__row--head .kcompare__col:not(.kcompare__col--us){align-self:end}
.kcompare__label{display:flex;align-items:center;padding:1rem 1.1rem;font-family:var(--display);
  font-size:1.08rem;font-weight:600;color:var(--navy)}
.kcompare__cell{display:flex;gap:.75rem;align-items:flex-start;padding:1rem 1.1rem;background:var(--white);
  border-radius:var(--r-sm);font-size:.94rem;color:var(--muted);border:1px solid var(--line)}
.kcompare__cell--us{background:var(--navy-tint);color:var(--ink);border-color:rgba(38,47,107,.16)}
.kcompare__mark{flex:none;width:1.6rem;height:1.6rem;border-radius:50%;display:grid;place-items:center;margin-top:-.05rem}
.kcompare__mark svg{width:.95rem;height:.95rem}
.kcompare__mark--yes{background:var(--navy);color:#fff}
.kcompare__cell:not(.kcompare__cell--us) .kcompare__mark--yes{background:rgba(38,47,107,.14);color:var(--navy)}
.kcompare__mark--no{background:#FBE9EF;color:#C25680}
.kcompare__foot{margin-top:1.25rem;font-size:.85rem}

@media (max-width:1080px){
  .dayflow__list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dayflow__step:last-child{grid-column:1 / -1}
}
@media (max-width:900px){
  .tourtop__grid{grid-template-columns:1fr;grid-template-areas:"head" "form";row-gap:clamp(2.25rem,7vw,3rem)}
  .paths__grid{grid-template-columns:1fr}
  .opening__grid,.claim__grid,.whyus__grid,.kusp__grid{grid-template-columns:1fr}
  .claim--flip .claim__copy{order:0}
  .claim__proof{max-width:34rem}
  .kusp__proof{justify-items:start}
}
@media (max-width:640px){
  .dayflow__list{grid-template-columns:1fr}
  .dayflow__step:last-child{grid-column:auto}
  .kcompare__row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .kcompare__row--head > span:first-child{display:none}
  .kcompare__label{grid-column:1 / -1;padding:.9rem .2rem .1rem}
  .kcompare__cell{flex-direction:column;gap:.5rem;font-size:.88rem;padding:.85rem .9rem}
  .kcompare__row--head .kcompare__col--us{font-size:.95rem;padding:.7rem .9rem}
  .kcompare__row--head > span{padding:.4rem .9rem}
  .claim__media + .proof__quote{margin:-2.25rem .6rem 0}
  .whyus{border-radius:var(--r-lg);margin-inline:0}
}

/* ---- light blue section backgrounds ---- */
.opening--tint{background:var(--navy-tint)}
.claim--blue{background:var(--navy-tint)}

/* nursery familiar-faces image: 10% smaller */
#responsive-care .claim__media{max-width:90%;margin-inline:auto}

/* hero__trust card on interior page headers */
.pagehead .hero__trust{
  position:absolute;right:var(--gut);bottom:clamp(1.5rem,3vw,2.5rem);z-index:2;max-width:16rem;
}
@media (max-width:820px){
  .pagehead .hero__trust{display:none}
}

/* ---- 5-tab campus tabs ---- */
.why-tabs__shell--5 .why-tabs__nav{grid-template-columns:repeat(5,1fr)}
@media(max-width:900px){
  .why-tabs__shell--5 .why-tab{flex:1 0 7rem;min-width:0;padding-inline:.35rem}
}

/* ---- paths section (Book a Tour CTA) background ---- */
.paths{background:var(--navy-tint)}

/* ---- 30-day guarantee section ---- */
.guarantee{background:var(--navy);color:#fff;padding:var(--sec) 0;border-radius:var(--r-xl);
  margin-inline:clamp(0px,2vw,24px);position:relative;overflow:hidden}
.guarantee::before{content:"";position:absolute;top:-30%;right:-12%;width:52%;aspect-ratio:1;
  background:radial-gradient(circle,rgba(229,121,157,.22),transparent 68%);pointer-events:none}
.guarantee::after{content:"";position:absolute;bottom:-25%;left:-10%;width:44%;aspect-ratio:1;
  background:radial-gradient(circle,rgba(250,223,6,.13),transparent 68%);pointer-events:none}
.guarantee__top{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2.5rem,6vw,5.5rem);align-items:center;position:relative}
.guarantee__visual{min-width:0}
.guarantee__deco-wrap{position:relative}
.guarantee__portrait{border-radius:var(--r-lg);overflow:hidden;box-shadow:0 40px 80px -40px rgba(0,0,0,.6)}
.guarantee__portrait img{width:100%;height:auto;display:block}
.guarantee__deco{position:absolute;width:clamp(9.75rem,39%,15.75rem);height:auto;
  pointer-events:none;z-index:2}
.guarantee__deco--star{top:-6.5rem;left:-6.5rem;transform:rotate(-14deg)}
.guarantee__deco--sun{bottom:-6.5rem;right:-6.5rem;transform:rotate(12deg)}
.guarantee__copy h2{color:#fff;margin:0 0 1.5rem}
.guarantee__sub{color:rgba(255,255,255,.85);font-size:1.05rem;line-height:1.7;margin-bottom:1.5rem}
.guarantee__prose p{color:rgba(255,255,255,.78)}
.guarantee__prose p + p{margin-top:1.1rem}
@media (min-width:1081px) and (max-width:1360px){
  .guarantee__deco--sun{right:-3rem;bottom:-5.5rem}
}
/* Must follow the base rules above, or the two-column desktop grid wins on phones */
@media (max-width:1080px){
  .guarantee__top{grid-template-columns:1fr;gap:3.25rem}
  .guarantee__visual{width:100%;max-width:30rem;margin-inline:auto}
  .guarantee__deco{width:clamp(5.5rem,22vw,9rem)}
  .guarantee__deco--star{top:-2.75rem;left:-1.75rem}
  .guarantee__deco--sun{bottom:-2rem;right:-1.25rem}
  .guarantee__copy{max-width:36rem;margin-inline:auto}
}

/* =====================================================================
   BUSH KINDER: two portrait photos + doodle overlays + body text
   ===================================================================== */
/* --sun/--star are 2x the earlier doodle sizes. The media column is padded so
   each doodle can hang mostly outside its photo corner without hitting the
   text column or overflowing the page. */
.bush-kinder{--sun:clamp(96px,17.6vw,224px);--star:clamp(72px,12.8vw,168px);
  padding:calc(var(--sec) / 2.2) 0 calc(var(--sec) / 1.6);background:#fff;overflow-x:clip}
.bush-kinder__layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.65fr);
  gap:clamp(2.5rem,6vw,6rem);align-items:center}
.bush-kinder__media{padding:calc(var(--sun) * .32) calc(var(--sun) * .32) calc(var(--star) * .32) calc(var(--star) * .32)}
.bush-kinder__photos{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(.75rem,1.6vw,1.25rem);align-items:start}
.bush-kinder__fig{margin:0;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:3/4;
  transition:transform .3s ease,box-shadow .3s ease}
.bush-kinder__fig img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s ease}
.bush-kinder__fig--b{margin-top:clamp(1.5rem,5vw,3.5rem)}
.bush-kinder__fig:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,.14)}
.bush-kinder__fig:hover img{transform:scale(1.04)}
.bush-kinder__doodle{position:absolute;pointer-events:none;opacity:1;z-index:2;height:auto}
.bush-kinder__doodle--sun{width:var(--sun);top:calc(var(--sun) * -.35);right:calc(var(--sun) * -.35)}
.bush-kinder__doodle--star{width:var(--star);bottom:calc(var(--star) * -.35);left:calc(var(--star) * -.35)}
.bush-kinder__head{margin-bottom:0}
.bush-kinder__head .eyebrow{font-size:.7rem}
.bush-kinder__head h2{color:var(--navy);margin-top:.4rem}
.bush-kinder__body .lead{font-size:clamp(1.05rem,1.7vw,1.2rem);color:var(--navy);font-weight:600;margin-bottom:1rem}
.bush-kinder__body p+p{margin-top:.85rem}
.bush-kinder__body .link-arrow{display:inline-flex;align-items:center;gap:.4rem;margin-top:1.5rem;
  font-family:var(--heading);font-size:1rem;text-decoration:underline;text-decoration-color:var(--pink);text-underline-offset:3px}
.bush-kinder__body .link-arrow:hover{color:var(--pink)}
@media (max-width:820px){
  .bush-kinder__layout{grid-template-columns:1fr;gap:1.5rem}
  .bush-kinder__media{max-width:51rem;width:100%;margin-inline:auto}
  .bush-kinder__head{margin-bottom:1.25rem}
}
@media (max-width:600px){
  .bush-kinder{--sun:84px;--star:62px}
  .bush-kinder__media{padding:calc(var(--sun) * .3) calc(var(--sun) * .2) calc(var(--star) * .3) calc(var(--star) * .2)}
}

/* =====================================================================
   CCS CALCULATOR
   ===================================================================== */
.ccscalc{padding:calc(var(--sec) / 1.6) 0 var(--sec);background:var(--cream)}
/* two-column layout: wizard (main) left, info aside right */
.ccscalc__layout{display:grid;grid-template-columns:1fr 320px;gap:clamp(2rem,4vw,4rem);align-items:start}
.ccscalc__head{margin-bottom:clamp(1.5rem,3vw,2.5rem)}
.ccscalc__head h2{color:var(--navy);margin-top:1.25rem}
.ccscalc__intro{margin-top:1.1rem;font-size:1.05rem}
.ccscalc__money{position:relative}
.ccscalc__money span{position:absolute;left:1.05rem;top:50%;transform:translateY(-50%);color:var(--muted);font-weight:600;pointer-events:none}
.ccscalc__money input{width:100%;padding-left:2rem}

/* aside info panel */
.ccscalc__aside{display:grid;gap:1.25rem;position:sticky;top:2rem}
.ccscalc__aside-card{background:var(--white);border-radius:var(--r-xl);padding:clamp(1.25rem,2.5vw,1.75rem);
  box-shadow:0 2px 4px rgba(38,47,107,.04),0 12px 32px -16px rgba(38,47,107,.22)}
.ccscalc__aside-card--rates{background:var(--navy-deep);color:#fff}
.ccscalc__aside-h{font-family:var(--heading);font-size:1.05rem;color:var(--navy);margin:0 0 .85rem}
.ccscalc__aside-card--rates .ccscalc__aside-h{color:var(--yellow)}
.ccscalc__aside-list{list-style:none;display:grid;gap:.6rem;font-size:.88rem;line-height:1.55;color:var(--text);margin:0;padding:0}
.ccscalc__aside-list li{padding-left:1.1rem;position:relative}
.ccscalc__aside-list li::before{content:"";position:absolute;left:0;top:.52em;width:.42rem;height:.42rem;
  border-radius:50%;background:var(--pink)}
.ccscalc__aside-link{display:inline-flex;align-items:center;gap:.3rem;margin-top:1rem;font-size:.88rem;
  font-family:var(--heading);color:var(--navy);text-decoration:underline;text-decoration-color:var(--pink);text-underline-offset:3px}
.ccscalc__aside-link:hover{color:var(--pink)}
.ccscalc__aside-rates{display:grid;gap:.7rem;margin:0;padding:0}
.ccscalc__aside-rates div{display:grid;gap:.15rem}
.ccscalc__aside-rates dt{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.ccscalc__aside-rates dd{font-weight:650;color:#fff;margin:0;font-size:.9rem}
.ccscalc__aside-note{font-size:.75rem;color:rgba(255,255,255,.6);margin:.9rem 0 0;line-height:1.55}
@media (max-width:900px){
  .ccscalc__layout{grid-template-columns:1fr}
  .ccscalc__aside{position:static;grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .ccscalc__aside{grid-template-columns:1fr}
}

/* ---- Multi-step wizard ---- */
.ccswiz{background:var(--white);border-radius:var(--r-xl);
  padding:clamp(1.75rem,4vw,3rem);
  box-shadow:0 2px 4px rgba(38,47,107,.04),0 24px 48px -32px rgba(38,47,107,.35)}
.ccswiz__header{margin-bottom:clamp(1.5rem,3vw,2rem)}
.ccswiz__track{height:6px;background:var(--line);border-radius:100px;overflow:hidden}
.ccswiz__fill{height:100%;background:var(--pink);border-radius:100px;transition:width .4s ease}
.ccswiz__meta{margin-top:.6rem;font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* one spacing rhythm: question > hint > fields; label > control > hint > error */
.ccswiz__q{font-family:var(--heading);font-size:clamp(1.25rem,2.2vw,1.5rem);color:var(--navy);line-height:1.3;margin:0 0 .6rem}
.ccswiz__q:focus{outline:none}
.ccswiz__q:focus-visible{outline:2px solid var(--navy);outline-offset:4px;border-radius:4px}
.ccswiz__hint{font-size:.92rem;color:var(--muted);line-height:1.6;margin:0 0 1.5rem;max-width:44rem}
.ccswiz__hint a{color:var(--navy);text-decoration:underline;text-decoration-color:var(--pink);text-underline-offset:2px}
.ccswiz__q + .ccswiz__fields{margin-top:1.25rem}
.ccswiz__fields{display:grid;gap:1.5rem}
.ccswiz__fields--2{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem 1.25rem}
.ccswiz__field{display:grid;gap:.55rem;align-content:start}
.ccswiz__label{font-size:.95rem;font-weight:650;color:var(--navy);line-height:1.35}
.ccswiz__req{color:var(--pink);margin-left:.2rem}
.ccswiz__field input,.ccswiz__field select{font:inherit;font-size:1rem;color:var(--ink);width:100%;height:3.25rem;
  background:var(--cream);border:1.5px solid var(--line);border-radius:var(--r-sm);padding:0 1rem;
  transition:border-color .2s,background .2s,box-shadow .2s}
.ccswiz__field select{appearance:none;cursor:pointer;padding-right:2.75rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 7'%3E%3Cpath fill='none' stroke='%23262F6B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 5 5.5l4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;background-size:11px 8px;
  text-overflow:ellipsis;white-space:nowrap}
.ccswiz__field .ccscalc__money input{padding-left:2rem}
.ccswiz__field input:hover,.ccswiz__field select:hover{border-color:rgba(38,47,107,.3)}
.ccswiz__field input:focus,.ccswiz__field select:focus{outline:none;background:var(--white);border-color:var(--navy);box-shadow:0 0 0 4px rgba(38,47,107,.12)}
.ccswiz__field.has-error input,.ccswiz__field.has-error select{border-color:#c0392b;background:#fffafa}
.ccswiz__field.has-error input:focus,.ccswiz__field.has-error select:focus{box-shadow:0 0 0 4px rgba(192,57,43,.14)}
.ccswiz__fhint{font-size:.82rem;color:var(--muted);line-height:1.5;margin:0}
.ccswiz__ferr{display:flex;gap:.45rem;align-items:flex-start;font-size:.85rem;font-weight:600;color:#b03a2e;line-height:1.45;margin:0}
.ccswiz__ferr::before{content:"!";flex:none;display:grid;place-items:center;width:1.1rem;height:1.1rem;margin-top:.08rem;
  border-radius:50%;background:#c0392b;color:#fff;font-size:.72rem;font-weight:800}
.ccswiz__ferr[hidden]{display:none}
.ccswiz__choices + .ccswiz__ferr{margin-top:-.75rem}
/* compact answer cards */
.ccswiz__choices{display:grid;gap:.75rem}
.ccswiz__choices--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ccswiz__choices--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.ccswiz__choice{position:relative;display:flex;align-items:center;gap:.8rem;min-height:3.25rem;padding:.75rem 1rem;
  background:var(--white);border:1.5px solid var(--line);border-radius:var(--r-sm);cursor:pointer;
  transition:border-color .18s,background .18s,box-shadow .18s}
.ccswiz__choice-input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.ccswiz__choice:hover{border-color:rgba(38,47,107,.35)}
.ccswiz__choice:has(:focus-visible){outline:2px solid var(--navy);outline-offset:2px}
.ccswiz__choice:has(:checked){border-color:var(--navy);background:var(--navy-tint);box-shadow:inset 0 0 0 1px var(--navy)}
.ccswiz__choice-dot{flex:none;width:1.15rem;height:1.15rem;border-radius:50%;border:2px solid rgba(38,47,107,.35);background:var(--white);
  display:grid;place-items:center;transition:border-color .18s}
.ccswiz__choice:has(:checked) .ccswiz__choice-dot{border-color:var(--navy)}
.ccswiz__choice:has(:checked) .ccswiz__choice-dot::after{content:"";width:.55rem;height:.55rem;border-radius:50%;background:var(--navy)}
.ccswiz__choice-text{display:grid;gap:.1rem;min-width:0;line-height:1.3}
.ccswiz__choice-text strong{font-size:.98rem;font-weight:650;color:var(--navy)}
.ccswiz__choice-text small{font-size:.82rem;color:var(--muted)}
.ccswiz__choices.has-error .ccswiz__choice{border-color:#e3a39b}
/* nav */
.ccswiz__nav{display:flex;gap:.75rem;margin-top:2rem;padding-top:1.5rem;border-top:1.5px solid var(--line);flex-wrap:wrap}
.ccswiz__nav .btn{min-width:8.5rem}
.ccswiz__nav .btn[hidden]{display:none}
.ccswiz__next{margin-left:auto}
.ccswiz__nav .btn:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.ccswiz__disc{font-size:.78rem;color:var(--muted);margin-top:1rem;line-height:1.55}
.ccswiz__disc a{color:var(--navy);text-decoration:underline;text-underline-offset:2px}
.ccswiz__alert{padding:1rem 1.15rem;border-radius:var(--r-sm);background:#fdf0ef;border-left:3px solid #c0392b;color:#7d2a22;font-size:.92rem;line-height:1.55}
@media (max-width:640px){
  .ccswiz__fields--2,.ccswiz__choices--2{grid-template-columns:1fr}
  .ccswiz__choices--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ccswiz__nav .btn{flex:1;min-width:0}
}
/* results panel */
.ccswiz__results{padding-top:.25rem}
.ccswiz__res-hero{background:var(--navy-deep);color:#fff;border-radius:var(--r-lg);
  padding:clamp(1.25rem,3vw,2rem);margin-bottom:1.5rem;text-align:center}
.ccswiz__res-big{font-family:var(--heading);font-size:clamp(2.6rem,6vw,3.6rem);color:var(--yellow);line-height:1;margin-bottom:.4rem}
.ccswiz__res-label{font-size:.9rem;color:rgba(255,255,255,.8)}
.ccswiz__res-dl{display:grid;grid-template-columns:1fr 1fr;gap:.9rem 1.25rem;
  padding:1.25rem 0;border-top:1.5px solid var(--line);border-bottom:1.5px solid var(--line);margin-bottom:1.25rem}
.ccswiz__res-dl dt{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ccswiz__res-dl dd{margin:.25rem 0 0;font-size:1.1rem;font-weight:650;color:var(--navy)}
.ccswiz__res-green{color:#1a7f4e!important}
.ccswiz__res-sub{font-size:.82rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:.6rem}
.ccswiz__res-children{list-style:none;display:grid;gap:.6rem;margin-bottom:1.25rem}
.ccswiz__res-children li{display:grid;grid-template-columns:auto 1fr;gap:.4rem 1rem;align-items:baseline;font-size:.92rem}
.ccswiz__res-cname{font-weight:700;color:var(--navy)}
.ccswiz__res-crate{color:var(--muted);font-size:.85rem}
.ccswiz__res-crate em{font-style:normal;font-size:.7rem;font-weight:700;text-transform:uppercase;
  background:var(--yellow);color:var(--navy-deep);border-radius:100px;padding:.1rem .45rem;margin-left:.3rem}
.ccswiz__res-cgap{grid-column:1/-1;font-weight:650;font-size:.9rem}
.ccswiz__res-notes{list-style:disc;padding-left:1.2rem;font-size:.85rem;color:var(--muted);display:grid;gap:.4rem;margin-bottom:1rem}
.ccswiz__res-disc{font-size:.8rem;color:var(--muted);line-height:1.55;margin-bottom:1.25rem}
.ccswiz__res-cta{display:flex;gap:.75rem;flex-wrap:wrap}
@media (max-width:560px){
  .ccswiz__res-dl{grid-template-columns:1fr}
  .ccswiz__res-cta .btn{width:100%;justify-content:center}
}

.nowrap{white-space:nowrap}
.statement .w{white-space:nowrap}
@media (max-width:360px){.kcompare__row--head > span{letter-spacing:.05em;font-size:.66rem}}