/* Magic Garden Early Education
   Built to the approved concept comp, then revised to a three-centre group site.
   Display type is Poppins, chosen to sit in the same geometric family as the logo wordmark.
   Greens run one perceptual step darker than the comp so white text clears WCAG AA.
   Full documentation in DESIGN.md. */

/* ---------- fonts ---------- */
@font-face{font-family:Poppins;src:url(/assets/fonts/poppins-500-latin.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Poppins;src:url(/assets/fonts/poppins-500-latin-ext.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Poppins;src:url(/assets/fonts/poppins-600-latin.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Poppins;src:url(/assets/fonts/poppins-600-latin-ext.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Figtree;src:url(/assets/fonts/figtree-latin.woff2) format('woff2');font-weight:300 700;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Figtree;src:url(/assets/fonts/figtree-latin-ext.woff2) format('woff2');font-weight:300 700;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- tokens ---------- */
:root{
  --ink:#2b3640;
  --ink-2:#3d4750;
  --body:#565b5f;
  --muted:#6b7075;
  --rule:#e3e2dc;

  --green:#5f7049;
  --green-deep:#4a5836;
  --green-logo:#435430;
  --green-accent:#6d7f50;
  --green-tint:#e7ebdf;

  --sky:#a9bccb;
  --blue-band:#dce4ec;
  --blue-ink:#26323c;

  --cream:#fcfaf7;
  --sand:#f4f4f0;
  --stone:#f4f3f0;
  --white:#fff;

  --gut:clamp(20px,5vw,64px);
  --wrap:1180px;
  --r:16px;
  --ease:cubic-bezier(.16,.84,.32,1);

  --display:Poppins,"Century Gothic","Avenir Next",ui-sans-serif,system-ui,sans-serif;
  --text:Figtree,ui-sans-serif,system-ui,"Segoe UI",Roboto,sans-serif;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--body);
  font:400 17px/1.65 var(--text);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg{max-width:100%;display:block}
img{height:auto}
a{color:inherit}
ul{list-style:none;margin:0;padding:0}
h1,h2,h3{margin:0;color:var(--ink);font-family:var(--display);font-weight:600;
  letter-spacing:-.022em;line-height:1.12}
p{margin:0}
:focus-visible{outline:3px solid var(--green);outline-offset:3px;border-radius:4px}

.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--green);color:#fff;
  padding:12px 20px;border-radius:0 0 12px 0;font-weight:600}
.skip:focus{left:0}

.h2{font-size:clamp(28px,3.3vw,42px);line-height:1.13;text-wrap:balance}
.h2 em{font-style:normal;color:var(--green-accent)}
.eyebrow{font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--green);margin-bottom:14px}

/* the pōhutukawa mark, set above a centred heading */
.orn{width:78px;height:auto;margin:0 auto 20px;opacity:.22}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:52px;padding:0 30px;border-radius:999px;text-decoration:none;
  font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:-.005em;white-space:nowrap;
  transition:background-color .25s var(--ease),color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease)}
.btn--green{background:var(--green);color:#fff;box-shadow:0 2px 10px -4px rgba(43,54,64,.45)}
.btn--green:hover{background:var(--green-deep);transform:translateY(-1px);box-shadow:0 8px 20px -10px rgba(43,54,64,.6)}
.btn--white{background:#fff;color:var(--ink);box-shadow:0 2px 10px -4px rgba(43,54,64,.35)}
.btn--white:hover{color:var(--green-deep);transform:translateY(-1px);box-shadow:0 8px 22px -10px rgba(43,54,64,.5)}
.btn:active{transform:translateY(0)}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:40;background:var(--white);border-bottom:1px solid transparent;
  transition:box-shadow .3s var(--ease),border-color .3s var(--ease)}
.hdr.is-stuck{box-shadow:0 6px 24px -18px rgba(43,54,64,.6);border-bottom-color:var(--rule)}
.hdr__in{max-width:1440px;margin:0 auto;padding:12px var(--gut);display:flex;align-items:center;gap:20px}
.hdr__logo{flex:0 0 auto;line-height:0}
/* The logo is the stacked sprig-and-wordmark from the high-resolution file, so it is sized
   by height: 1.46:1, it would push the bar to 136px if sized by the old width. */
.hdr__logo img{height:clamp(58px,6vw,82px);width:auto}
.nav{margin-left:auto}
.nav__list{display:flex;align-items:center;gap:clamp(6px,1.4vw,22px)}
.nav__list>li{position:relative}
.nav__list>li>a,.nav__top{font-family:var(--display);font-size:14.5px;font-weight:500;
  color:var(--ink-2);text-decoration:none;padding:10px 2px;display:inline-flex;align-items:center;gap:6px;
  background:none;border:0;cursor:pointer;letter-spacing:-.005em}
.nav__list>li>a{position:relative;cursor:pointer}
.nav__list>li>a::after{content:"";position:absolute;left:2px;right:2px;bottom:4px;height:2px;background:var(--green);
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav__list>li>a:hover::after,.nav__list>li>a[aria-current]::after{transform:scaleX(1)}

.chev{width:11px;height:8px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;
  stroke-linejoin:round;transition:transform .28s var(--ease)}
.nav__top[aria-expanded="true"]{color:var(--green-deep)}
.nav__top[aria-expanded="true"] .chev{transform:rotate(180deg)}

/* dropdowns */
.menu{position:absolute;top:calc(100% + 10px);left:-18px;min-width:250px;background:#fff;
  border:1px solid var(--rule);border-radius:14px;padding:10px;
  box-shadow:0 24px 48px -28px rgba(43,54,64,.65),0 2px 6px -3px rgba(43,54,64,.2)}
.menu[hidden]{display:none}
.menu::before{content:"";position:absolute;top:-7px;left:30px;width:12px;height:12px;background:#fff;
  border-left:1px solid var(--rule);border-top:1px solid var(--rule);transform:rotate(45deg);border-radius:2px 0 0 0}
.menu__head{font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--green);padding:8px 12px 10px;border-bottom:1px solid var(--rule);margin-bottom:6px}
.menu ul>li>a,.menu ul>li>span{display:block;padding:10px 12px;border-radius:9px;text-decoration:none;
  font-size:15px;font-weight:500;color:var(--ink);transition:background-color .2s var(--ease),color .2s var(--ease)}
.menu ul>li>a span,.menu ul>li>span span{display:block;font-size:12.5px;font-weight:400;color:var(--muted);margin-top:2px}
.menu ul>li>a:hover{background:var(--green-tint);color:var(--green-deep)}
/* a sister centre in the Our Centres menu sits behind a hairline, apart from the three */
.menu ul>li.nav__sister{margin-top:6px;padding-top:6px;border-top:1px solid var(--rule)}
/* No "See all three centres" line under the list since 5 October 2026 (Andrew: "remove this
   from the menu now we have 4 centres in the list"); /locations is still the Our Centres crumb
   on every centre page and the "See all three centres" link on the homepage. */

.hdr__cta{margin-left:clamp(10px,1.8vw,28px);min-height:44px;padding:0 22px;font-size:14.5px}
.burger{display:none;background:none;border:0;padding:10px;margin-left:auto;cursor:pointer}
.burger span{display:block;width:23px;height:2px;background:var(--ink);border-radius:2px;
  transition:transform .3s var(--ease),opacity .2s var(--ease)}
.burger span+span{margin-top:5px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* mobile nav */
.mnav{border-top:1px solid var(--rule);padding:10px var(--gut) 28px;max-height:calc(100vh - 76px);overflow-y:auto}
.mnav__list>li{border-bottom:1px solid var(--rule);padding:4px 0}
.mnav__list>li>a,.mnav__list>li>span{display:block;padding:13px 2px;font-family:var(--display);
  font-size:17px;font-weight:500;text-decoration:none;color:var(--ink)}

.mnav__group{color:var(--ink)!important;padding-bottom:4px!important}
.mnav__sub{padding:0 0 12px 14px;border-left:1px solid var(--rule);margin-left:2px}
.mnav__sub li.nav__sister{margin-top:4px;border-top:1px solid var(--rule)}
/* the line under a name belongs to its link: the touch rule's 12px for a row
   (.mnav__sub li span) would otherwise pad it too and open a gap under the sister centre */
.mnav__sub li a span{padding:0}
.mnav__sub li a,.mnav__sub li span{display:block;padding:9px 0;font-size:15px;text-decoration:none;color:var(--ink-2)}

.mnav__sub li a span,.mnav__sub li span span{display:block;font-size:12.5px;color:var(--muted)}
.mnav .btn{width:100%;margin-top:22px}
.mnav__tel{display:block;text-align:center;margin-top:14px;font-weight:600;color:var(--green);text-decoration:none}

/* ---------- hero ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;background:var(--ink);contain:paint}
.hero__img{width:100%;height:clamp(470px,54vw,650px);object-fit:cover;object-position:50% 32%}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 45%;opacity:0;pointer-events:none;
  transition:opacity 1.2s var(--ease)}
.hero__video.is-playing{opacity:1}
/* The shade sits where the text sits and nowhere else. A soft pool centred on the text block
   (x from the container's left gutter, y at the block's centre, which is 87px above the hero's
   midline because the buttons share the centring) holds the words at .84, and the rest of the
   frame gets a light wash. Measured over every frame of the loop, 17 September 2026: the pale
   "amazing" keeps 5.9:1 at its worst (the old full-width gradient gave 4.5 to 4.9), the white
   lines 10:1 or better, and the frame as a whole is a quarter lighter, most of it on the left
   where Andrew asked. The phone layout below keeps the old gradient: its text sits at the
   bottom, over the photo. */
.hero__scrim{position:absolute;inset:0;
  background:
    radial-gradient(ellipse 640px 440px at max(230px,50% - 490px) calc(50% - 87px),
      rgba(17,24,30,.84) 0%,rgba(17,24,30,.81) 25%,rgba(17,24,30,.68) 45%,rgba(17,24,30,.42) 65%,rgba(17,24,30,.14) 85%,rgba(17,24,30,0) 100%),
    linear-gradient(97deg,rgba(17,24,30,.30) 0%,rgba(17,24,30,.22) 32%,rgba(17,24,30,.12) 60%,rgba(17,24,30,.04) 82%),
    linear-gradient(to top,rgba(17,24,30,.34) 0%,rgba(17,24,30,0) 34%)}
.hero__mark{position:absolute;right:-80px;top:-70px;width:min(400px,36vw);opacity:.07;pointer-events:none;
  transform:scaleX(-1) rotate(-8deg)}
.hero__in{position:absolute;inset:0;max-width:1440px;margin:0 auto;padding:0 var(--gut) 78px;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.hero__h{font-size:clamp(44px,6vw,80px);line-height:1.02;color:#fff;letter-spacing:-.035em;max-width:11ch}
.hero__h span{display:block;color:var(--sky)}
.hero__sub{margin:18px 0 0;color:rgba(255,255,255,.94);font-size:clamp(16px,1.5vw,19px);line-height:1.5;
  max-width:36ch;text-shadow:0 1px 12px rgba(20,28,34,.5)}
.hero__acts{display:flex;flex-wrap:wrap;gap:13px;margin-top:28px}

.hero__wave{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:clamp(38px,5.2vw,74px);fill:var(--sand)}

/* ---------- page hero (inner pages) ---------- */
.phero{position:relative;isolation:isolate;overflow:hidden;background:var(--ink);contain:paint}
.phero__img{width:100%;height:clamp(280px,30vw,380px);object-fit:cover;object-position:50% 42%}
.phero__scrim{position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(20,28,34,.82) 0%,rgba(20,28,34,.6) 45%,rgba(20,28,34,.24) 80%)}
.phero__mark{position:absolute;right:-60px;top:-50px;width:min(320px,30vw);opacity:.08;pointer-events:none;
  transform:scaleX(-1) rotate(-8deg)}
.phero__in{position:absolute;inset:0;max-width:1440px;margin:0 auto;padding:0 var(--gut) 54px;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.phero__crumb{font-size:13px;color:rgba(255,255,255,.78);margin-bottom:12px;letter-spacing:.01em}
.phero__crumb a{color:rgba(255,255,255,.92)}
.phero__crumb span{margin:0 7px;color:rgba(255,255,255,.5)}
.phero__h{font-size:clamp(38px,5vw,64px);color:#fff;letter-spacing:-.032em;line-height:1.04}
.phero__sub{margin-top:14px;color:rgba(255,255,255,.93);font-size:clamp(16px,1.5vw,19px);max-width:36ch}

/* ---------- pillars ---------- */
.pillars{background:var(--sand);padding:clamp(44px,5.4vw,66px) var(--gut) clamp(48px,5.6vw,70px)}
.pillars__grid{max-width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr)}
.pillar{position:relative;padding:4px clamp(12px,1.7vw,24px);text-align:center}
.pillar+.pillar::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:1px;background:var(--rule)}
/* The five pillar icons are Magic Garden's own artwork rather than generic line icons, so
   they are images and cannot be stroke-drawn the way the old set was. They lift in instead,
   staggered left to right, which keeps the strip's arrival without pretending to draw. */
.pillar .ico{width:56px;height:56px;margin:0 auto 16px;object-fit:contain}
.pillar h2{font-size:clamp(15.5px,1.4vw,18px);line-height:1.28;color:var(--ink);margin-bottom:11px}
.pillar p{font-size:14.5px;line-height:1.55;color:var(--body);text-wrap:pretty}

[data-lift] .ico{opacity:0;transform:translateY(10px) scale(.94)}
[data-lift].is-drawn .ico{opacity:1;transform:none;
  transition:opacity .6s var(--ease) var(--d,0ms),transform .6s var(--ease) var(--d,0ms)}

/* ---------- locations ---------- */
.locs{background:var(--cream);padding:clamp(64px,7.6vw,104px) var(--gut)}
.locs__head{max-width:660px;margin:0 auto clamp(38px,4.4vw,58px);text-align:center}
.locs__head p{margin-top:16px;color:var(--body);text-wrap:pretty}
.locs__anchor{height:0;scroll-margin-top:calc(100vh - 28px)}
.locs__grid{max-width:var(--wrap);margin:0 auto;display:grid;gap:clamp(24px,3vw,38px);
  grid-template-columns:repeat(3,minmax(0,1fr))}
.loc__media{position:relative;overflow:hidden;border-radius:var(--r);margin-bottom:20px;
  box-shadow:0 20px 40px -30px rgba(43,54,64,.6)}
.loc__media img{width:100%;transition:transform .7s var(--ease)}
.loc:hover .loc__media img{transform:scale(1.035)}

.loc h3{font-size:clamp(19px,1.8vw,23px);margin-bottom:10px}
.loc__blurb{font-size:15px;line-height:1.6;color:var(--body);margin-bottom:16px;text-wrap:pretty}
.loc__addr{display:flex;gap:9px;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.loc__addr+.loc__addr{margin-top:9px}
.loc__addr a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:1px}
.loc__addr a:hover{color:var(--green-deep);border-bottom-color:var(--green)}

/* The fuller card on /locations, since 18 September 2026 the whole page below the band.
   The name is the h2 (there is no heading above it any more) and links to the page; the
   packet's own line sits under it; the facts run as a two-column definition list behind a
   hairline, the same idiom as the Key information panel on the centre page. */
.locs--full .locs__grid{align-items:start}
.loc--full h2{font-size:clamp(21px,2vw,26px);margin-bottom:6px;letter-spacing:-.02em}
.loc--full h2 a,.loc h3 a{color:var(--ink);text-decoration:none}
.loc--full h2 a:hover,.loc h3 a:hover{color:var(--green-deep)}
.loc__media a{display:block}
.loc__tag{font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--green);margin-bottom:12px;text-wrap:pretty}
.loc__facts{margin:16px 0 0;padding:6px 0 0;border-top:1px solid var(--rule)}
.loc__facts>div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:0 12px;padding:9px 0;border-bottom:1px solid var(--rule);font-size:14.5px;line-height:1.5}
.loc__facts dt{font-family:var(--display);font-weight:600;font-size:12.5px;letter-spacing:.02em;color:var(--muted);padding-top:2px}
.loc__facts dd{color:var(--ink-2);text-wrap:pretty}
.loc__facts dd a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:1px}
.loc__facts dd a:hover{color:var(--green-deep);border-bottom-color:var(--green)}
.loc--full .loc__more{display:flex;flex-wrap:wrap;gap:8px 22px}
.loc__link{color:var(--green-deep);font-weight:600;font-size:14.5px;text-decoration:none;border-bottom:1px solid var(--green-tint);padding-bottom:2px}
.loc__link:hover{border-bottom-color:var(--green)}

/* The sister centre on /locations (Ben, 30 September 2026): Birkenhead Point Montessori,
   which the family owns under its own name. A white panel under the three cards, words on
   the left and the same facts list on the right, with no photograph, so it reads as a
   neighbour of Magic Garden rather than a fourth centre; its one link leaves for its own
   website, with the arrow pointing out. */
.sister{max-width:var(--wrap);margin:clamp(48px,5.6vw,72px) auto 0;padding:clamp(24px,3vw,38px);
  background:var(--white);border:1px solid var(--rule);border-radius:var(--r);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(22px,3.4vw,52px);align-items:start}
.sister h2{font-size:clamp(21px,2vw,26px);margin-bottom:6px;letter-spacing:-.02em}
.sister .loc__blurb{margin-bottom:0}
.sister .loc__facts{margin-top:0}
a:hover>.arr--out{transform:translate(2px,-2px)}

/* ---------- welcome ---------- */
.welcome{position:relative;overflow:hidden;background:var(--sand);
  padding:clamp(62px,7.4vw,104px) var(--gut) clamp(56px,7vw,96px)}
.welcome__leaf{position:absolute;right:-90px;bottom:-60px;width:min(540px,48vw);opacity:.055;
  transform:rotate(-8deg);pointer-events:none}
.welcome__in{position:relative;max-width:var(--wrap);margin:0 auto;display:grid;gap:clamp(34px,4.4vw,62px);
  grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);align-items:center}
.welcome__copy p{max-width:56ch;text-wrap:pretty}
.welcome__copy .h2{margin-bottom:22px}
.welcome__copy .h2+p{margin-bottom:16px}
.welcome__media img{width:100%;border-radius:var(--r);box-shadow:0 22px 44px -30px rgba(43,54,64,.55)}

.whaka{margin:32px 0 0;padding:22px 0 4px 26px;border-left:1px solid var(--green-accent)}
.whaka blockquote{margin:0}
.whaka blockquote p{font-family:var(--display);font-weight:500;font-size:clamp(18px,1.8vw,22px);
  line-height:1.38;color:var(--green-deep);letter-spacing:-.018em}
.whaka figcaption{margin-top:12px;font-size:14.5px;line-height:1.55;color:var(--muted)}
.whaka figcaption span{display:block;margin-top:8px;font-family:var(--display);font-size:11px;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--green)}

/* ---------- rooms ---------- */
.rooms{background:var(--cream);padding:clamp(62px,7.4vw,100px) var(--gut)}
.rooms__head{max-width:620px;margin:0 auto clamp(34px,4vw,52px);text-align:center}
.rooms__head p{margin-top:16px;color:var(--body);text-wrap:pretty}
.rooms__grid{max-width:var(--wrap);margin:0 auto;display:grid;gap:clamp(24px,3vw,40px);
  grid-template-columns:repeat(3,minmax(0,1fr))}
.room img{width:100%;border-radius:var(--r);margin-bottom:22px;box-shadow:0 18px 36px -28px rgba(43,54,64,.6)}
.room h3{font-size:clamp(19px,1.8vw,24px);margin-bottom:12px}
.room p{font-size:15.5px;line-height:1.6;text-wrap:pretty}

/* ---------- testimonials ----------
   Each slide owns its heading and its two photographs. The three layouts hang the images
   at different heights and sizes so a change of slide changes the composition, not just
   the paragraph inside it. */
.says{background:var(--stone);padding:clamp(60px,7vw,92px) var(--gut);overflow:hidden}
.says__deck{position:relative;max-width:1180px;margin:0 auto}
.say{display:grid;grid-template-columns:210px minmax(0,1fr) 210px;gap:clamp(24px,4vw,56px);
  align-items:center;justify-content:center}
.say[hidden]{display:none}
.say__aside{width:100%;border-radius:var(--r);object-fit:cover;aspect-ratio:3/4;
  box-shadow:0 20px 40px -30px rgba(43,54,64,.6)}
.say__mid{text-align:center;max-width:620px;margin:0 auto}
.say__mid .h2{margin-bottom:22px}
.say blockquote{margin:0}
.say blockquote p{font-size:clamp(16.5px,1.6vw,19px);line-height:1.68;color:var(--ink-2);text-wrap:pretty}
.say__by{margin-top:22px;font-family:var(--display);font-weight:600;color:var(--ink);font-size:15px}
.say__by span{display:block;margin-top:4px;font-family:var(--text);font-weight:500;font-size:13.5px;color:var(--muted)}

/* the homepage quote's arrangement; .say--static below sets the photographs back to centre.
   Six more arrangements, .say--b to .say--g, went on 25 September 2026: no markup used them
   since the testimonials stopped changing layout on 20 September. */
.say--a .say__aside--l{align-self:end;transform:translateY(16px)}
.say--a .say__aside--r{align-self:start;transform:translateY(-16px)}

/* since 20 September 2026 (Ben): one heading and two fixed photographs, centred beside the
   middle column rather than staggered, and only the quote rotates. The slides inside
   .say__quotes are plain blocks; the outer .say keeps the three-column composition. The
   minimum height keeps the photographs from shifting as a longer quote follows a short one. */
.say--static .say__aside{align-self:center;transform:none}
.say__quotes{position:relative}
.say__quotes .say{display:block;grid-template-columns:none;gap:0}
.say__quotes .say[hidden]{display:none}
@media (min-width:901px){.say__quotes{min-height:290px}}

/* a slide entering fades and lifts, so the swap reads as one movement */
.say.is-entering{animation:sayIn .55s var(--ease) both}
@keyframes sayIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* controls, grouped so they read as one obvious thing to press */
.says__nav{display:flex;align-items:center;justify-content:center;gap:clamp(10px,1.8vw,18px);
  margin-top:clamp(26px,3vw,38px)}
.says__arrow{width:48px;height:48px;flex:0 0 auto;padding:0;border-radius:50%;
  background:#fff;border:1px solid var(--rule);color:var(--green-deep);cursor:pointer;
  display:grid;place-items:center;
  box-shadow:0 2px 10px -6px rgba(43,54,64,.55);
  transition:background-color .22s var(--ease),border-color .22s var(--ease),
             color .22s var(--ease),transform .22s var(--ease)}
.says__arrow:hover{background:var(--green);border-color:var(--green);color:#fff;transform:translateY(-1px)}
.says__arrow:active{transform:translateY(0)}
.says__arrow svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.says__arrow--prev svg{transform:rotate(180deg)}

/* the row wraps because seven 44px tap targets do not fit across a phone */
.says__dots{display:flex;flex-wrap:wrap;gap:4px;justify-content:center}
/* the dot is 10px but the thing you can tap is 44px */
.says__dots button{width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer;
  display:grid;place-items:center}
.says__dots button::before{content:"";width:10px;height:10px;border-radius:50%;background:#cbcfc4;
  transition:background-color .3s var(--ease),transform .3s var(--ease)}
.says__dots button:hover::before{background:var(--green-accent)}
.says__dots button[aria-current="true"]::before{background:var(--green);transform:scale(1.3)}

/* an unfinished slide should look unfinished while we are still waiting on real words */

/* ---------- team ---------- */
.team{background:var(--blue-band);padding:clamp(54px,6.4vw,84px) var(--gut)}
.team__in{max-width:var(--wrap);margin:0 auto;display:grid;
  grid-template-columns:minmax(0,56ch) minmax(240px,320px);justify-content:center;align-items:center;text-align:center;gap:clamp(30px,4vw,64px)}
/* Andrew asked for the section centred: his words and the photograph of him and Gemma side
   by side, the pair sitting on the centre line rather than spread to the edges, the text
   centred within its column */
.team__copy p{margin-top:16px;margin-left:auto;margin-right:auto;color:#4a555f;max-width:60ch;font-size:16px;text-wrap:pretty}
.team__copy .more{display:flex;justify-content:center}
.team__copy .h2{color:var(--blue-ink)}

/* one portrait of the owners where the three circles used to be; the same rounded, softly
   shadowed photo treatment as everywhere else, narrower than the copy */
.team__photo{margin:0;width:100%;justify-self:center}
.team__photo img{width:100%;height:auto;border-radius:var(--r);box-shadow:0 22px 44px -30px rgba(43,54,64,.55)}
.team__photo figcaption{margin-top:12px;font-family:var(--display);font-weight:600;font-size:13.5px;color:var(--blue-ink);text-align:center}
/* Sized by how many people are in the list rather than a fixed six. The homepage carries the
   three who are behind all three centres; a centre page carries its own room leaders. */
.team__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,124px));
  gap:clamp(12px,1.6vw,24px);justify-content:start;align-content:start}
.team__grid li{text-align:center}
.team__grid img{width:100%;max-width:104px;aspect-ratio:1;margin:0 auto 12px;border-radius:50%;object-fit:cover;
  border:3px solid rgba(255,255,255,.9);box-shadow:0 10px 22px -14px rgba(38,50,60,.7)}
.team__grid b{display:block;font-family:var(--display);font-size:13px;font-weight:600;color:var(--blue-ink);line-height:1.3}
.team__grid span{display:block;margin-top:3px;font-size:12.5px;color:#5a656e;line-height:1.35}
/* A centre page's team: the heading above and every circle in one row under it (Ben, 24
   September 2026: "their photos combined lined on one line"). Seven fit across from about
   1060px; a narrower screen carries the row onto a second line, centred, rather than
   shrinking the faces. */
.team--centre .team__in{grid-template-columns:minmax(0,1fr)}
.team--centre .team__grid{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(14px,2vw,24px)}
.team--centre .team__grid li{width:116px}
/* the founders on the homepage story: the team portraits' circles on the cream band */
.founders{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,124px));gap:clamp(12px,1.6vw,24px);justify-content:start;margin-top:24px}
.founders li{text-align:center}
.founders img{width:100%;max-width:104px;aspect-ratio:1;margin:0 auto 12px;border-radius:50%;object-fit:cover;
  border:3px solid rgba(255,255,255,.9);box-shadow:0 10px 22px -14px rgba(38,50,60,.7)}
.founders b{display:block;font-family:var(--display);font-size:13px;font-weight:600;color:var(--green-deep);line-height:1.3}
.founders span{display:block;margin-top:3px;font-size:12.5px;color:#5a656e;line-height:1.35}

/* ---------- careers: lede, split, routes ---------- */
.lede{background:var(--sand);padding:clamp(62px,7.4vw,98px) var(--gut)}
.lede__in{max-width:720px;margin:0 auto;text-align:center}
.lede__p{margin-top:20px;font-size:clamp(16.5px,1.6vw,18.5px);line-height:1.68;color:var(--ink-2);text-wrap:pretty}

.split{background:var(--cream);padding:clamp(56px,6.6vw,92px) var(--gut)}
.split+.split{border-top:1px solid var(--rule)}
.split__in{max-width:var(--wrap);margin:0 auto;display:grid;gap:clamp(32px,4.4vw,62px);
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
.split--flip{background:var(--sand)}
.split__media img{width:100%;border-radius:var(--r);box-shadow:0 22px 44px -30px rgba(43,54,64,.55)}
.split__copy .h2{margin-bottom:20px}
.split__copy p{max-width:52ch;text-wrap:pretty}
.split__copy p+p{margin-top:15px}

/* the terms of the job, as a rule-separated list rather than a grid of perk cards */
.perks{background:var(--sand);padding:clamp(62px,7.4vw,100px) var(--gut)}
.perks__head{max-width:620px;margin:0 auto clamp(30px,3.6vw,46px);text-align:center}
.perks__head p{margin-top:16px;color:var(--body);text-wrap:pretty}
.perks__list{max-width:var(--wrap);margin:0 auto;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(32px,4.4vw,68px)}
.perks__list li{padding:22px 0;border-top:1px solid var(--rule)}
.perks__list b{display:block;font-family:var(--display);font-weight:600;font-size:17px;
  letter-spacing:-.015em;color:var(--ink);margin-bottom:7px}
.perks__list p{font-size:15px;line-height:1.6;color:var(--body);text-wrap:pretty}

.lede--alt{background:var(--sand)}
.lede--alt .lede__p+.lede__p{margin-top:16px}
.lede .tocome{margin-top:22px}
/* the closing band's green on a lede, for the section that ends a page
   (How children learn, "As school approaches"; Ben, 20 September
   2026). Holds the same bleeding leaves as .cta, so it keeps overflow hidden. */
.lede--green{position:relative;overflow:hidden;background:var(--green);color:#fff}
.lede--green .lede__in{position:relative}
.lede--green .h2{color:#fff}
.lede--green .lede__p{color:rgba(255,255,255,.94)}
.lede--green .lede__p a{color:#fff;font-weight:600;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.45);padding-bottom:2px}
.lede--green .lede__p a:hover{border-bottom-color:#fff}
.lede--green .lede__p a+a{margin-left:22px}
.split--green{position:relative;overflow:hidden;background:var(--green);color:#fff}
.split--green .split__in{position:relative}
.split--green .h2{color:#fff}
.split--green .split__copy p{color:rgba(255,255,255,.94)}
.split--green .more a{color:#fff;border-bottom:1px solid rgba(255,255,255,.45);padding-bottom:2px;text-decoration:none;font-weight:600}
.split--green .more a:hover{border-bottom-color:#fff}
.part--green .part__h,.part--green .part__h span{background:var(--green);color:#fff}
.part--green .part__h::before{background:rgba(255,255,255,.28)}

.routes{background:var(--cream);padding:clamp(62px,7.4vw,100px) var(--gut)}
.routes__head{max-width:620px;margin:0 auto clamp(34px,4vw,52px);text-align:center}
.routes__head p{margin-top:16px;color:var(--body);text-wrap:pretty}
.routes__grid{max-width:var(--wrap);margin:0 auto;display:grid;gap:clamp(20px,2.6vw,34px) clamp(28px,3.6vw,54px);
  grid-template-columns:repeat(2,minmax(0,1fr))}
.route{padding:22px 0 0;border-top:1px solid var(--rule)}
.route h3,.route h4{font-size:clamp(18px,1.65vw,21px);margin-bottom:10px}
.route p{font-size:15.5px;line-height:1.62;text-wrap:pretty}

/* ---------- cta band ---------- */
.cta{position:relative;overflow:hidden;background:var(--green);color:#fff;
  padding:clamp(44px,5.4vw,68px) var(--gut)}
.cta__leaf{position:absolute;top:50%;width:min(460px,40vw);opacity:.07;pointer-events:none}
.cta__leaf--l{left:-96px;transform:translateY(-50%) rotate(6deg)}
.cta__leaf--r{right:-96px;transform:translateY(-50%) scaleX(-1) rotate(6deg)}
.cta__in{position:relative;max-width:var(--wrap);margin:0 auto;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(26px,4vw,58px);align-items:center}
.cta__l{display:flex;align-items:center;gap:clamp(16px,2vw,26px);
  border-right:1px solid rgba(255,255,255,.28);padding-right:clamp(20px,3vw,44px)}
.cta__ico{flex:0 0 auto;width:52px;height:52px;fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cta__l .h2{color:#fff;font-size:clamp(23px,2.5vw,32px);line-height:1.18}
.cta__r p{color:rgba(255,255,255,.94);margin-bottom:22px;max-width:44ch;font-size:16px;text-wrap:pretty}
.cta__tel{display:inline-block;margin-left:18px;color:rgba(255,255,255,.94);font-weight:600;
  text-decoration:none;border-bottom:1px solid rgba(255,255,255,.45);padding-bottom:2px}
.cta__tel:hover{border-bottom-color:#fff;color:#fff}
.cta__mail{color:#fff;font-weight:600;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.45)}
.cta__mail:hover{border-bottom-color:#fff}

/* a second action beside the first, on the pages that have a natural one */

/* ---------- footer ---------- */
.ftr{position:relative;overflow:hidden;background:var(--stone);padding:clamp(46px,5.4vw,68px) var(--gut) 0}
.ftr__mark{position:absolute;left:-110px;bottom:-70px;width:min(420px,38vw);opacity:.05;
  transform:rotate(5deg);pointer-events:none}
.ftr__in{position:relative;max-width:var(--wrap);margin:0 auto;display:grid;gap:clamp(26px,3.4vw,44px);
  grid-template-columns:1.25fr 1.45fr .85fr .95fr}
.ftr__brand img{width:clamp(150px,15vw,188px);height:auto}
.ftr__brand p{margin-top:14px;font-size:14.5px;color:var(--muted)}
/* the brand column carries phone, email and hours under the tagline, so the three link
   columns can be pages only */
.ftr__brand p+p{margin-top:10px;display:flex;gap:10px;color:var(--ink-2);line-height:1.55}
.ftr__brand p+p a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:1px;
  transition:color .2s var(--ease),border-color .2s var(--ease)}
.ftr__brand p+p a:hover{color:var(--green-deep);border-bottom-color:var(--green)}

.ftr__legal{display:flex;gap:18px}
.ftr__legal p{margin:0}
.ftr__legal a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:1px}
.ftr__legal a:hover{color:var(--green-deep);border-bottom-color:var(--green)}
.ftr__col h2{font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--green);margin-bottom:14px}
.ftr__col p{display:flex;gap:10px;font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.ftr__col p+p{margin-top:12px}
.ftr__col b{font-weight:600;color:var(--ink)}
.ftr__col a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:1px;
  transition:color .2s var(--ease),border-color .2s var(--ease)}
.ftr__col a:hover{color:var(--green-deep);border-bottom-color:var(--green)}
.mini{flex:0 0 auto;width:18px;height:18px;margin-top:3px;fill:none;stroke:var(--green);
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ftr__base{position:relative;max-width:var(--wrap);margin:clamp(34px,4vw,54px) auto 0;padding:20px 0 24px;
  border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;gap:12px 20px;justify-content:space-between;
  font-size:13.5px;color:var(--muted)}
.ftr__up{color:var(--muted);text-decoration:none}
.ftr__up:hover{color:var(--green-deep)}
/* the Infocare app, between the columns and the base (Jarren, 24 September 2026) */
.ftr__app{position:relative;max-width:var(--wrap);margin:clamp(30px,3.6vw,48px) auto 0;display:flex;flex-wrap:wrap;
  align-items:center;gap:12px 18px;padding:16px 20px;border:1px solid var(--rule);border-radius:var(--r);
  background:rgba(255,255,255,.55);font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.ftr__app-ico{flex:0 0 auto;width:26px;height:26px;fill:none;stroke:var(--green);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.ftr__app>p:first-of-type{flex:1 1 320px}
.ftr__app b{font-family:var(--display);font-weight:600;color:var(--ink);margin-right:6px}
.ftr__stores{display:flex;gap:10px;flex-wrap:wrap}
.ftr__stores a{display:inline-flex;align-items:center;padding:8px 16px;border-radius:999px;background:var(--ink);
  color:#fff;text-decoration:none;font-family:var(--display);font-size:13px;font-weight:600;
  transition:background-color .2s var(--ease)}
.ftr__stores a:hover{background:var(--green-deep)}

/* ---------- offscreen work ----------
   The page runs about 5400px on desktop and 9000px on a phone, so most of it is out of
   view at any moment. content-visibility lets the browser skip layout and paint for those
   sections until they approach the viewport. contain-intrinsic-size holds their place so
   the scrollbar does not jump; the values are the measured heights, and being roughly
   right is enough.

   The locations section is deliberately left out: it is the #locations anchor target, and
   skipped sections make anchor jumps land badly. */
.rooms,.says,.team,.cta,.ftr,.perks,.routes,.split,.lede{content-visibility:auto}
.rooms{contain-intrinsic-size:auto 850px}
.says{contain-intrinsic-size:auto 560px}
.team{contain-intrinsic-size:auto 370px}
.cta{contain-intrinsic-size:auto 290px}
.ftr{contain-intrinsic-size:auto 400px}
.perks{contain-intrinsic-size:auto 620px}
.routes{contain-intrinsic-size:auto 700px}
.split{contain-intrinsic-size:auto 620px}
.lede{contain-intrinsic-size:auto 420px}
@media (max-width:700px){
  .rooms{contain-intrinsic-size:auto 1600px}
  .says{contain-intrinsic-size:auto 620px}
  .team{contain-intrinsic-size:auto 860px}
  .cta{contain-intrinsic-size:auto 430px}
  .ftr{contain-intrinsic-size:auto 760px}
  .perks,.routes,.split,.lede{contain-intrinsic-size:auto 900px}
}

/* ---------- reveal ---------- */
/* opacity and transform only. An animated blur has to re-rasterise the element on every
   frame, which is the most expensive way to fade something in and the first thing to go
   when a page feels heavy under the scroll. */
[data-rise]{opacity:0;transform:translateY(20px)}
[data-rise].is-in{opacity:1;transform:none;
  transition:opacity .7s var(--ease) var(--d,0ms),transform .8s var(--ease) var(--d,0ms)}

/* ---------- responsive ---------- */
@media (max-width:1240px){
  .nav__list{gap:4px}
  .nav__list>li>a,.nav__top{font-size:13.5px}
}
@media (max-width:1080px){
  .nav,.hdr__cta{display:none}
  .burger{display:block}
  .pillars__grid{grid-template-columns:repeat(3,1fr);gap:34px 0}
  .pillar:nth-child(3n+1)::before{display:none}
  .team__in{grid-template-columns:1fr}
  .ftr__in{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .team__in{grid-template-columns:minmax(0,1fr)}
  .team__photo{width:min(100%,320px);order:-1}

  .welcome__in,.split__in{grid-template-columns:1fr}
  .welcome__media{order:-1}
  .split--flip .split__media{order:-1}
  /* .say and .say__aside, singular: an earlier pass wrote .says here, which matched the
     section rather than the slide, so phones kept the three-column desktop grid and the
     quote ran down a column a few characters wide */
  .say{grid-template-columns:1fr}
  .say__aside{display:none}
  .say__mid{max-width:560px}
  .rooms__grid,.locs__grid{grid-template-columns:1fr;max-width:560px}
  .perks__list{grid-template-columns:1fr;max-width:560px}
  .routes__grid{grid-template-columns:1fr;max-width:560px}
  .cta__in{grid-template-columns:1fr}
  .cta__l{border-right:0;border-bottom:1px solid rgba(255,255,255,.28);padding:0 0 24px}
}
@media (max-width:700px){
  body{font-size:16.5px}
  .hero__video{display:none}
  .hero__img{height:min(80vh,620px);object-position:52% 30%}
  .hero__scrim{background:
    linear-gradient(97deg,rgba(17,24,30,.92) 0%,rgba(17,24,30,.78) 32%,rgba(17,24,30,.36) 60%,rgba(17,24,30,.08) 82%),
    linear-gradient(to top,rgba(17,24,30,.42) 0%,rgba(17,24,30,0) 34%)}
  .hero__in{padding-bottom:56px;justify-content:flex-end}
  .hero__h{max-width:100%}
  .hero__acts .btn{flex:1 1 auto}
  .phero__img{height:min(46vh,300px)}
  .pillars__grid{grid-template-columns:repeat(2,1fr);gap:32px 0}
  .pillar::before{display:none!important}
  .pillar:nth-child(even)::before{display:block!important;left:0}
  .ftr__in{grid-template-columns:1fr;gap:30px}
  .whaka{padding-left:20px}
  .routes__grid{gap:0 clamp(28px,3.6vw,54px)}
}
@media (max-width:420px){
  /* a long label can wrap on the narrowest phones rather than push the page sideways */
  .btn{white-space:normal;text-align:center;line-height:1.3;padding-top:12px;padding-bottom:12px}
  .pillars__grid{grid-template-columns:1fr;gap:30px}
  .pillar:nth-child(even)::before{display:none!important}
}

@media (prefers-reduced-motion:reduce){
  html:focus-within{scroll-behavior:auto}
  .hero__video{display:none}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  [data-rise]{opacity:1;transform:none;filter:none}
  [data-lift] .ico{opacity:1;transform:none}
}

@media print{
  .hdr,.burger,.mnav,.hero__wave,.says__dots,.ftr__up,.hero__video{display:none}
  body{background:#fff}
  .cta{background:#fff;color:#000}
}

/* ---------- interior pages ----------
   Nine pages sit under Home and Careers, and the photo library tops out at 1024px, so a
   photographic band on every one of them would ship soft images. These pages take a green
   band carrying the mark instead. It is faster, it holds contrast at any size, and it
   leaves the photographs for the places on the page where 900px is plenty. Give the repo
   1800px originals and these can become photographs without touching the markup. */
.phero--plain{background:var(--green-deep);padding:clamp(46px,6vw,78px) 0 clamp(40px,5vw,62px)}
.phero--plain .phero__in{position:static;padding:0 var(--gut);max-width:1440px}
.phero--plain .phero__mark{right:-40px;top:auto;bottom:-90px;width:min(340px,32vw);opacity:.09}
/* A photograph behind the plain band (Ben, 20 September 2026: heroes on the About Us and
   centre pages, the careers band's idea). .phero--plain keeps the flowing layout, so the
   chips and the whakataukī can run as tall as they need; the photograph covers the section
   behind them and a heavier scrim than /careers carries the white type across the whole
   width, because the chips and the quote reach the right edge. Green shows until the
   photograph arrives, and stays the fallback if it never does. */
.phero--photo .phero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%;z-index:-1}
.phero--photo .phero__scrim{background:linear-gradient(100deg,rgba(24,38,30,.86) 0%,rgba(24,38,30,.72) 55%,rgba(24,38,30,.6) 100%)}
.phero--photo .phero__mark{opacity:.07}
.phero--photo .phero__in{position:relative}
/* A lighter scrim for a centre whose photograph reads dark (heroLight on its record; Andrew,
   5 October 2026: the Takapuna and Ponderosa heroes were "a bit too dark"). Dark behind the
   words, open on the right. Measured with the words hidden, on the pixels behind each one:
   white text keeps 3:1 on the headings and 4.5:1 on everything else at 320 to 1440 wide. A
   tablet's heading runs further across, so the dark part reaches further there; a phone's
   words fill the band, so it lightens evenly. */
.phero--light .phero__scrim{background:linear-gradient(100deg,rgba(24,38,30,.76) 0%,rgba(24,38,30,.66) 36%,rgba(24,38,30,.4) 58%,rgba(24,38,30,.14) 80%,rgba(24,38,30,.04) 100%)}
@media (max-width:1099px){.phero--light .phero__scrim{background:linear-gradient(100deg,rgba(24,38,30,.78) 0%,rgba(24,38,30,.7) 44%,rgba(24,38,30,.46) 66%,rgba(24,38,30,.2) 85%,rgba(24,38,30,.08) 100%)}}
@media (max-width:700px){.phero--light .phero__scrim{background:linear-gradient(100deg,rgba(24,38,30,.74) 0%,rgba(24,38,30,.64) 55%,rgba(24,38,30,.56) 100%)}}

/* the small arrow that ends a "read on" link */
.arr{display:inline-block;width:17px;height:17px;margin-left:6px;vertical-align:-3px;
  fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .25s var(--ease)}
a:hover>.arr{transform:translateX(3px)}
.loc__more{margin-top:16px}
/* the Enquire now button under each centre on the homepage (Ben, 20 September 2026) */
/* the card is a column and the button sits at its foot, so the three Enquire now buttons
   line up across the row however long each blurb runs */
.loc{display:flex;flex-direction:column}
.loc__body{display:flex;flex-direction:column;flex:1 1 auto}
.loc__enquire{margin-top:auto;padding-top:16px}
.loc__enquire .btn{font-size:14.5px;padding:11px 20px}
.loc__more a{color:var(--green-deep);font-weight:600;font-size:14.5px;text-decoration:none;
  border-bottom:1px solid var(--green-tint);padding-bottom:2px}
.loc__more a:hover{border-bottom-color:var(--green)}

.btn--ghost{background:transparent;color:var(--green-deep);box-shadow:inset 0 0 0 1.5px var(--green)}
.btn--ghost:hover{background:var(--green);color:#fff}
/* What a link hands you, said inside the button, so nobody discovers it is a PDF by opening
   it. Inherits colour so it stays legible through the ghost button's hover inversion. */
.btn__note{font-weight:500;font-size:12.5px;letter-spacing:.02em}
.lede__note{margin-top:14px;font-size:14.5px;line-height:1.6;color:var(--muted);text-wrap:pretty}
.lede__note a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:1px}
.lede__note a:hover{color:var(--green-deep);border-bottom-color:var(--green)}

/* ---------- contact panels ---------- */
.cpanels{background:var(--sand);padding:clamp(56px,6.6vw,92px) var(--gut)}
/* the contact page: a short band and the panels straight under it, so all three centres
   show without scrolling on a laptop (Ben, 20 September 2026) */
.phero--tint.phero--slim{padding:clamp(14px,1.8vw,22px) 0 clamp(14px,1.8vw,22px)}
.phero--slim .phero__h{font-size:clamp(30px,3.6vw,44px)}
.phero--slim .phero__crumb{margin-bottom:6px}
.cpanels--tight{padding:clamp(16px,2vw,24px) var(--gut) clamp(32px,3.6vw,48px)}
.cpanels--tight .cpanel{padding:clamp(16px,1.8vw,20px)}
.cpanels--tight .cpanel h3{margin-bottom:10px}
.cpanels--tight .cpanel__d{gap:6px 10px}
.cpanels--tight .cpanel__d dt{font-size:10px}
.cpanels--tight .cpanel__d dd{font-size:14px;overflow-wrap:break-word}
.cpanels--tight .cpanel__d dd a[href^="mailto:"]{font-size:13px;letter-spacing:-.01em}
.cpanels--tight .cpanel__map{margin-top:10px}
.cpanels--tight .cpanel__acts{margin-top:12px}

.cpanels__grid{max-width:var(--wrap);margin:0 auto;display:grid;gap:clamp(20px,2.6vw,32px);
  grid-template-columns:repeat(3,minmax(0,1fr))}
/* the About link always sits under the button, whatever the centre's name length */
.cpanel__acts{margin-top:18px;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.cpanel__more{color:var(--green-deep);font-weight:600;font-size:14.5px;text-decoration:none;border-bottom:1px solid var(--green-tint);padding-bottom:1px}
.cpanel__more:hover{border-bottom-color:var(--green)}
.cpanel__acts .btn{font-size:14.5px;padding:11px 18px}
.cpanels__note{max-width:var(--wrap);margin:clamp(24px,3vw,40px) auto 0;font-size:15px;color:var(--body);text-align:center}
.cpanels__note a{color:var(--green-deep);font-weight:600;text-decoration:none;border-bottom:1px solid var(--green-tint)}
.cpanel{background:var(--cream);border-radius:var(--r);padding:clamp(24px,2.6vw,32px);
  border:1px solid var(--rule)}
.cpanel h3{font-size:clamp(19px,1.8vw,23px);margin-bottom:18px}
.cpanel__d{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 16px;align-items:baseline}
.cpanel__d dt{font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--green);padding-top:3px}
.cpanel__d dd{margin:0;min-width:0;overflow-wrap:anywhere;font-size:15px;line-height:1.55;color:var(--ink-2)}
.cpanel__d a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:1px}
.cpanel__d a:hover{color:var(--green-deep);border-bottom-color:var(--green)}

.cpanel__map{margin-top:18px}
.cpanel__map a{color:var(--green-deep);font-weight:600;font-size:14.5px;text-decoration:none;
  border-bottom:1px solid var(--green-tint);padding-bottom:2px}
.cpanel__map a:hover{border-bottom-color:var(--green)}

/* ---------- centre page details ---------- */
.cdet{display:grid;grid-template-columns:96px 1fr;gap:14px;padding:14px 0;
  border-top:1px solid var(--rule);font-size:15.5px;line-height:1.55;color:var(--ink-2);
  text-wrap:pretty}
.cdets .cdet:last-child{border-bottom:1px solid var(--rule)}
.cdet>span{font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--green);padding-top:4px}
.cdet i{font-style:italic;color:var(--muted)}
.cdet a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:1px}
.cdet a:hover{color:var(--green-deep);border-bottom-color:var(--green)}

/* the "our other centres" strip that ends every centre page */

@media (max-width:900px){
  .cpanels__grid{grid-template-columns:1fr;max-width:560px}
}
@media (max-width:700px){
  .cdet{grid-template-columns:1fr;gap:4px;padding:12px 0}
  .cdet>span{padding-top:0}
}
.cpanels{content-visibility:auto;contain-intrinsic-size:auto 640px}

/* the chip after a room's name is its ages */
.room__ages{font-family:var(--text);font-style:normal;font-weight:500;font-size:13px;letter-spacing:0;color:var(--green-deep);background:var(--green-tint);border-radius:999px;padding:3px 9px;margin-left:8px;vertical-align:middle;white-space:nowrap}

/* A room with its own words opens them from its tile (Jarren, 24 September 2026). The
   name is the button; its ::after stretches over the whole tile so the photograph and the
   lead line answer a click too. tools/centre.mjs has the markup and why it is shaped so. */
.room--opens{position:relative}
.room__btn{font:inherit;color:var(--ink);background:none;border:0;padding:0;margin:0;text-align:left;
  cursor:pointer;transition:color .2s var(--ease)}
.room__btn::after{content:"";position:absolute;inset:0;border-radius:var(--r)}
.room__btn:focus-visible{outline:none}
.room__btn:focus-visible::after{outline:3px solid var(--green);outline-offset:6px}
.room--opens img{transition:transform .5s var(--ease),box-shadow .3s var(--ease)}
.room--opens:hover img{transform:translateY(-4px);box-shadow:0 24px 44px -26px rgba(43,54,64,.7)}
.room--opens:hover .room__btn,.room--opens.is-open .room__btn{color:var(--green-deep)}
.room--opens.is-open img{box-shadow:0 0 0 3px var(--green),0 18px 36px -28px rgba(43,54,64,.6)}
.room__more{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-family:var(--display);
  font-size:13px;font-weight:600;color:var(--green)}
.room__plus{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;
  border:1.5px solid currentColor;border-radius:50%;padding:2px;transition:transform .3s var(--ease)}
.room--opens.is-open .room__plus{transform:rotate(45deg)}

/* The panel. On a wide screen every panel sits below the row of tiles, full width; on a
   phone each one follows its own tile, which is its place in the markup. */
.room__panel{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(24px,3.4vw,48px);align-items:start;background:#fff;border-radius:var(--r);
  padding:clamp(22px,3vw,40px);box-shadow:0 18px 40px -30px rgba(43,54,64,.55);scroll-margin-top:96px}
.room__panel[hidden]{display:none}
.room__panel-img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:calc(var(--r) - 4px)}
.room__panel-h{font-family:var(--display);font-weight:600;font-size:clamp(20px,2vw,26px);line-height:1.25;
  letter-spacing:-.015em;color:var(--ink);margin:0 0 14px}
.room__copy p{font-size:16px;line-height:1.68;color:var(--body);text-wrap:pretty}
.room__copy p+p{margin-top:14px}
.room__quote{margin:20px 0 0;padding:2px 0 2px 20px;border-left:1px solid var(--green-accent)}
.room__quote p{font-size:17px;line-height:1.6;font-weight:500;color:var(--green-deep)}
@media (min-width:901px){
  .room__panel{order:1}
}
@media (max-width:900px){
  .room__panel{grid-template-columns:1fr;margin-top:-8px}
  .room__panel-img{display:none}
  .room__panel-h{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}

/* visually hidden: a heading a screen reader needs where the layout has no room for it */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* three routes side by side, on fees and funding */
.routes__grid--three{grid-template-columns:repeat(3,minmax(0,1fr))}
.route p+p{margin-top:12px}
.route__more a{color:var(--green-deep);font-weight:600;font-size:14.5px;text-decoration:none;
  border-bottom:1px solid var(--green-tint);padding-bottom:2px}
.route__more a:hover{border-bottom-color:var(--green)}
.routes__note{max-width:var(--wrap);margin:clamp(26px,3vw,38px) auto 0;font-size:14px;line-height:1.55;color:var(--muted);text-wrap:pretty}
.centre__acts{margin-top:22px}
.centre__acts:empty{display:none}

@media (max-width:900px){
  
  
  .routes__grid--three{grid-template-columns:1fr;max-width:560px}
  .routes__note{max-width:560px}
}

/* ---------- teacher voices ----------
   Three quotes side by side rather than a carousel: nobody clicks through testimonials, and
   all three fit. The rule above each one stands in for the quotation mark. */
.voices{background:var(--stone);padding:clamp(60px,7vw,96px) var(--gut)}
.voices__head{max-width:620px;margin:0 auto clamp(32px,3.8vw,48px);text-align:center}
.voices__head p{margin-top:16px;color:var(--body);text-wrap:pretty}
/* the teachers' quotes rotate one at a time since 20 September 2026 (Ben) */
.voices__deck{max-width:720px;margin:0 auto;text-align:center}
.voices__deck blockquote p{font-size:clamp(16.5px,1.6vw,18.5px)}

.voices blockquote{margin:0}
.voices blockquote p{font-size:16px;line-height:1.68;color:var(--ink-2);text-wrap:pretty}
.voices__by{margin-top:20px;font-family:var(--display);font-weight:600;font-size:15.5px;color:var(--ink)}
.voices__by span{display:block;margin-top:5px;font-family:var(--text);font-weight:400;
  font-size:13.5px;color:var(--muted)}
/* A teacher's own photograph beside her words (Cherie, 29 September 2026; Ben: "add it to
   the right side but make it seem integrated/seamless", and move no text). It is placed
   absolutely, so no line moves, in the style of the "Meet some of our team" circles, and it
   sits inside its slide, so it comes and goes with the quote. On a wide screen it stands in
   the margin to the right of the quote, level with its middle; under 1100px that margin is
   too narrow, so it drops to the right-hand end of her name line. */
.say--face{position:relative}
.voices__face{position:absolute;display:block;aspect-ratio:1;border-radius:50%;object-fit:cover;
  border:3px solid rgba(255,255,255,.9);box-shadow:0 10px 22px -14px rgba(38,50,60,.7)}
@media (min-width:1100px){
  .voices__face{width:clamp(120px,10.5vw,150px);height:auto;left:calc(100% + clamp(28px,3vw,48px));
    top:50%;transform:translateY(-50%)}
}
@media (max-width:1099px){
  .voices__face{width:56px;height:56px;right:0;bottom:0}
}

.voices{content-visibility:auto;contain-intrinsic-size:auto 560px}

/* the joining-centre notice sits on its own band, directly under the page title, because
   on those pages it is the most important sentence on the page */

.cdets{margin-top:22px}

/* The fee table CSS lived here. Ben took pricing off the site in September 2026 and the
   page stopped being "Enquiry & Fees", so .fees and .ftab went with it rather than sitting
   here unused. Both are in git at 166f90a if the figures ever go back up.

   .lede and .lede--alt are BOTH sand, so a page running two in a row showed one unbroken
   band. That is what .lede--cream is for, and /enquiry still needs it. */
.lede--cream{background:var(--cream)}

/* ---------- page hero, per-page opening ----------
   Nine interior pages ran the same deep-green band with a title and one line under it, so
   every page announced itself the same way. The band stays, because it is the brand, but it
   now carries a slot: .phero__deck holds whatever that page opens with. /contact opens with
   the phone number, /rooms with three doors, /enquiry with the three facts that decide it.

   Two grounds, set by the variant and read by everything below through custom properties,
   so a deck component does not need to know which band it is sitting on:
     .phero--plain  deep green, for the pages that tell a story
     .phero--tint   pale green, for the utility pages that answer a question */
.phero--plain{--ph-ink:#fff;--ph-dim:rgba(255,255,255,.78);--ph-chip:rgba(255,255,255,.14);
  --ph-chip-ink:#fff;--ph-line:rgba(255,255,255,.3);--ph-hover:rgba(255,255,255,.26)}

.phero--tint{background:var(--green-tint);padding:clamp(42px,5.4vw,70px) 0 clamp(38px,4.6vw,56px);
  --ph-ink:var(--ink);--ph-dim:#5c6752;--ph-chip:rgba(255,255,255,.72);--ph-chip-ink:var(--green-deep);
  --ph-line:rgba(74,88,54,.22);--ph-hover:#fff}
.phero--tint .phero__in{position:static;padding:0 var(--gut);max-width:1440px}
.phero--tint .phero__mark{right:-40px;top:auto;bottom:-90px;width:min(340px,32vw);opacity:.13}
.phero--tint .phero__h{color:var(--ink)}
.phero--tint .phero__crumb{color:var(--ph-dim)}
.phero--tint .phero__crumb a{color:var(--green-deep)}
.phero--tint .phero__crumb span{color:rgba(74,88,54,.45)}
.phero--tint .phero__sub{color:var(--ink-2)}

/* the deck: a row of whatever this page opens with */
.phero__deck{position:relative;margin-top:clamp(20px,2.4vw,30px);display:flex;flex-wrap:wrap;
  gap:10px;align-items:stretch}

/* a chip. As <a> it is a jump link into the page, as <span> it is a fact. */
.phero__chip{display:inline-flex;align-items:center;gap:9px;padding:10px 18px;border-radius:999px;
  background:var(--ph-chip);color:var(--ph-chip-ink);text-decoration:none;
  font-family:var(--display);font-size:14px;font-weight:600;letter-spacing:-.005em;
  border:1px solid var(--ph-line);
  transition:background-color .22s var(--ease),transform .22s var(--ease)}
a.phero__chip:hover{background:var(--ph-hover);transform:translateY(-1px)}
.phero__chip b{font-weight:600}
/* the qualifier reads quieter than the value on family, weight and size alone. It used to
   also carry opacity, which dropped it under 4.5:1 on both bands. */
.phero__chip i{font-style:normal;font-family:var(--text);font-weight:400;font-size:13px}

/* the phone number on /contact, sized to be the biggest tap target above the fold */

/* --green, not --green-accent: the accent gives 4.37:1 on white and this is 11px text, so
   it misses WCAG AA. Everything in this band was checked against the ground it sits on. */

/* a line of the centre's own words, carried in the band rather than buried on the page */
.phero__quote{position:relative;margin:clamp(22px,2.6vw,32px) 0 0;padding-left:22px;max-width:44ch;
  border-left:2px solid var(--ph-line);
  font-size:clamp(16px,1.6vw,19px);line-height:1.6;color:var(--ph-dim);text-wrap:pretty}
.phero__quote blockquote{margin:0}
.phero__quote blockquote p{margin:0;color:var(--ph-ink);opacity:.95}
.phero__quote figcaption{margin-top:10px;font-size:14.5px;line-height:1.55}
.phero__quote b{display:block;margin-top:8px;font-family:var(--display);font-size:13px;
  font-weight:600;letter-spacing:.02em;color:var(--ph-ink);opacity:.85}

/* the whakataukī on What we believe sits to the right of the title, not under it (Ben, 20
   September 2026): two columns on a wide screen, the crumb, title, line and chips down the
   left and the quote centred against them on the right; stacked again on a phone */
.phero--aside .phero__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,38%);column-gap:clamp(32px,5vw,80px);align-items:center}
.phero--aside .phero__in>:not(.phero__quote){grid-column:1}
.phero--aside .phero__quote{grid-column:2;grid-row:2/span 3;margin:0;justify-self:end;align-self:center;padding-left:26px}
@media (max-width:900px){
  .phero--aside .phero__in{display:block}
  .phero--aside .phero__quote{margin:clamp(22px,2.6vw,32px) 0 0}
}

/* a second row of chips in a band: the enrolment page's links to what sits beside it */

@media (max-width:560px){
  .phero__deck{gap:8px}
  .phero__chip{padding:9px 14px;font-size:13.5px}
  
}

/* ---------- perks variants ----------
   The same two-column rule-separated list carried the middle of /philosophy, /curriculum and
   /meals, so three pages in a row had the same shape at the same scroll depth. The component
   stays, because it suits all three. What changes is the rhythm.

   --num   numbered, one column, wider measure. For a list that is an argument rather than a
           set of facts: /philosophy, where each belief is followed by what it commits us to.
   --tick  three columns, ticked, tighter. For a list a parent scans rather than reads:
           /meals, where the whole list is things you can check. */

.perks--tick .perks__list{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(24px,3.2vw,48px)}
.perks--tick .perks__list li{padding:20px 0 20px 34px;position:relative}
.perks--tick .perks__list li::before{content:"";position:absolute;left:2px;top:26px;
  width:17px;height:11px;border-left:2px solid var(--green-accent);
  border-bottom:2px solid var(--green-accent);transform:rotate(-45deg)}
.perks--tick .perks__list b{font-size:16px}
.perks--tick .perks__list p{font-size:14.5px}

@media (max-width:900px){
  .perks--tick .perks__list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .perks--tick .perks__list{grid-template-columns:1fr}
  
}

/* --flow  four steps in a row, each in a soft green bubble with a line icon, an arrow from
           one to the next. Andrew's "First few weeks settling in" graphic of 21 September
           2026, for /transitions. Rebuilt as HTML rather than placed as the PNG, the rule the
           philosophy graphics set: the words stay text, so they read on a phone, sit on
           /review and reach a screen reader, and "Nutrition" stays a link. The fills are his,
           nudged one step so they still show on the sand band. Each bubble has its own
           slightly uneven radius so the row reads as drawn rather than stamped. On a phone
           the four stack and the arrows turn to point down. */
.perks--flow .perks__list{--gap:clamp(36px,4vw,54px);list-style:none;padding:0;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:0 var(--gap);align-items:stretch}
.perks--flow .perks__list li{position:relative;border:0;padding:clamp(56px,5.6vw,76px) clamp(20px,2.3vw,32px) clamp(30px,3.2vw,44px);
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;
  background:var(--bub)}
/* the content starts at the same height in every bubble, so the four icons share a line
   (Ben, 24 September 2026); on a phone each bubble stands alone and centres again */
.perks--flow .perks__list li:nth-child(1){--bub:#e2ebde;border-radius:52% 48% 50% 50% / 45% 47% 53% 55%}
.perks--flow .perks__list li:nth-child(2){--bub:#ecefe1;border-radius:49% 51% 48% 52% / 47% 44% 56% 53%}
.perks--flow .perks__list li:nth-child(3){--bub:#dbe5d5;border-radius:50% 50% 52% 48% / 44% 48% 52% 56%}
.perks--flow .perks__list li:nth-child(4){--bub:#dde9e1;border-radius:48% 52% 50% 50% / 46% 46% 54% 54%}
.perks--flow .perks__list li:not(:last-child)::after{content:"";position:absolute;top:50%;right:calc(-1 * var(--gap));
  width:var(--gap);height:14px;transform:translateY(-50%);pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 14' fill='none' stroke='%235f7049' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 7h23M20 2l5 5-5 5'/%3E%3C/svg%3E") center/26px 13px no-repeat}
.perks--flow .flow__ico{width:52px;height:52px;margin-bottom:14px;flex:none;
  fill:none;stroke:var(--green-deep);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* a shape drawn in front of another takes the bubble's fill, so the line behind it breaks */
.perks--flow .flow__ico .fill{fill:var(--bub)}
.perks--flow .perks__list b{font-size:17px;margin-bottom:9px;text-wrap:balance}
.perks--flow .perks__list p{font-size:14.5px;line-height:1.55}
.perks--flow .perks__list p a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--green-accent);padding-bottom:1px}
.perks--flow .perks__list p a:hover{color:var(--green-deep);border-bottom-color:var(--green-deep)}
@media (max-width:1080px){
  .perks--flow .perks__list li{padding:52px 16px 28px}
  .perks--flow .perks__list b{font-size:16px}
  .perks--flow .perks__list p{font-size:14px}
}
@media (max-width:900px){
  .perks--flow .perks__list{grid-template-columns:1fr;max-width:440px;gap:var(--gap) 0}
  .perks--flow .perks__list li{padding:clamp(34px,9vw,44px) clamp(28px,8vw,40px);justify-content:center}
  .perks--flow .perks__list b{font-size:17px}
  .perks--flow .perks__list p{font-size:15px}
  .perks--flow .perks__list li:not(:last-child)::after{top:100%;right:auto;left:50%;
    transform:translate(-50%,calc(var(--gap) / 2 - 7px)) rotate(90deg)}
}
.perks--flow{contain-intrinsic-size:auto 720px}
@media (max-width:700px){
  .perks--flow{contain-intrinsic-size:auto 1500px}
}

/* ---------- build id in the footer ----------
   Which build you are looking at, and whether it is the current one. The tag is hidden until
   site.js has actually compared against /version.json, so a page that cannot reach it shows a
   plain build number rather than a "latest" it has not earned. */
.ver{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);
  font-variant-numeric:tabular-nums}
.ver__id{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;
  color:var(--ink-2)}

.ver__tag{display:inline-block;padding:2px 9px;border-radius:999px;font-family:var(--display);
  font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase}
.ver__tag--ok{background:var(--green-tint);color:var(--green-deep)}
/* amber rather than red: a stale page is worth noticing and is not an error */
.ver__tag--old{background:#f6e7c6;color:#6b4f16}
@media (max-width:560px){
  .ver{width:100%;order:3}
}

/* ---------- opening splash ----------
   Covers the whole page, header and footer included, while the site loads, then lifts away.

   THE SAFETY RULE, and it is the whole design: this must never be able to trap a visitor
   behind it. So the reveal is a CSS animation with fill-mode both. It runs on its own and
   ends with the splash hidden and non-interactive whether or not any JavaScript ever runs.
   site.js can only make it leave EARLIER, once the page has finished loading. The scroll
   lock is added by that same script, so a visitor without JavaScript is never locked at all.

   z-index sits above the sticky header, which is 40. */
.splash{position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  background:var(--green-tint);pointer-events:none;
  animation:splashOut .4s var(--ease) 1.85s both}
.splash__in{display:grid;justify-items:center;gap:26px;padding:0 var(--gut)}
.splash__logo{width:min(360px,58vw);height:auto;
  animation:splashLogoIn .85s var(--ease) both}

/* a thread that fills while the page loads, so the hold reads as progress rather than a
   pause. It is decorative: it times out with the splash rather than tracking real bytes. */
.splash__bar{display:block;width:min(180px,40vw);height:2px;border-radius:2px;
  background:rgba(74,88,54,.18);overflow:hidden}
.splash__bar i{display:block;width:100%;height:100%;background:var(--green-deep);
  transform-origin:left;transform:scaleX(0);
  animation:splashBar 1.75s var(--ease) .2s both}

@keyframes splashLogoIn{
  from{opacity:0;transform:translateY(16px) scale(.9)}
  to{opacity:1;transform:none}
}
@keyframes splashBar{
  from{transform:scaleX(0)}
  to{transform:scaleX(1)}
}
/* the card lifts and fades, and the site is already sitting behind it */
@keyframes splashOut{
  from{opacity:1}
  to{opacity:0;visibility:hidden}
}

/* site.js adds this once the page has loaded, to cut the hold short */
.splash.is-done{animation:splashOut .35s var(--ease) both}

/* The page behind used to settle in from 55% opacity as the card left (splashReveal). Ben
   saw that as a haze over the homepage and asked for it to go, 20 September 2026: the page
   is fully opaque from the first frame and only the card moves. */

/* Locked only while the splash is up, and only ever by script. */
html.is-splashing,html.is-splashing body{overflow:hidden}

@media (prefers-reduced-motion:reduce){
  .splash{display:none}
}
@media print{
  .splash{display:none}
  .splash ~ main{animation:none;opacity:1}
}

/* ---------- the founding story ----------
   Cream, so it alternates against the sand welcome band above it and the stone testimonial
   band below. It replaced the rooms grid, which repeated /rooms sentence for sentence; the
   rooms belong to their own page and to Northcross's.

   The three marks are dates and counts, so they use tabular figures and sit in their own
   column on desktop, under the copy on a phone. */
.story{background:var(--cream);padding:clamp(62px,7.4vw,100px) var(--gut)}
.story__in{max-width:var(--wrap);margin:0 auto;display:grid;gap:clamp(32px,4.4vw,64px);
  grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);align-items:center}
.story__copy p{margin-top:18px;font-size:clamp(16px,1.55vw,17.5px);line-height:1.68;
  color:var(--ink-2);text-wrap:pretty;max-width:52ch}
.orn--left{margin-left:0;margin-right:auto}
.story__more{margin-top:24px}
.story__more a{color:var(--green-deep);font-weight:600;font-size:15px;text-decoration:none}
.story__more a:hover{color:var(--green)}
/* The same arrow link, usable under any block of copy: the welcome, centres and team
   sections on the homepage each end with one so a reader has somewhere to go from the
   section itself. --dark is for the blue team band, where sage on blue falls under 4.5:1. */
.more{margin-top:24px}
.more a{color:var(--green-deep);font-weight:600;font-size:15px;text-decoration:none}
.more a:hover{color:var(--green)}
.more--dark a:hover{color:var(--blue-ink)}

.story__side{display:grid;gap:clamp(26px,3vw,40px);align-content:center}
.story__side .founders{margin-top:0;justify-content:start}
.story__marks{display:grid;gap:clamp(18px,2.2vw,28px)}
.story__marks li{padding-left:22px;border-left:2px solid var(--green-accent)}
.story__marks b{display:block;font-family:var(--display);font-weight:600;
  font-size:clamp(30px,3.4vw,44px);line-height:1;color:var(--green-deep);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.story__marks span{display:block;margin-top:8px;font-size:14.5px;line-height:1.5;
  color:var(--body);text-wrap:pretty}

@media (max-width:900px){
  .story__in{grid-template-columns:1fr}
  .story__marks{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
}
@media (max-width:520px){
  .story__marks{grid-template-columns:1fr}
}
.story{content-visibility:auto;contain-intrinsic-size:auto 520px}

/* the "see the rooms" link that sits inside a centre's Rooms detail line */
.cdet__more{display:inline-block;margin-left:6px;white-space:nowrap;
  color:var(--green-deep);font-weight:600;text-decoration:none}
.cdet__more:hover{color:var(--green)}
/* In the two-column .cdet row a trailing link is its own grid item, so it used to drop
   into the label column under the label; it sits under the value it belongs to instead. */
@media (min-width:701px){ .cdet>.cdet__more{grid-column:2;justify-self:start;margin-left:0} }

/* the build credit, sitting quietly beside the copyright line */
.ftr__by{color:var(--muted)}
.ftr__by a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:1px}
.ftr__by a:hover{color:var(--green-deep);border-bottom-color:var(--green)}

/* ---------- forms ----------
   The review dashboard is the only page with fields, and this is the whole form
   language: the same 16px radius and full-pill controls as everything else, a 3px green
   focus ring, and errors in the one warm colour the gate page already uses. Field borders
   sit at 3.5:1 against white, because for a text box the border is often the only thing
   that says "type here". Nothing here uses opacity for hierarchy. */
.form{max-width:760px}

.field{display:grid;gap:8px;align-content:start;min-width:0}
.field--full{grid-column:1/-1}
.field__label{font-family:var(--display);font-weight:600;font-size:14.5px;color:var(--ink);letter-spacing:-.005em}
.field__label i{font-style:normal;font-family:var(--text);font-weight:400;font-size:13.5px;color:var(--muted);margin-left:6px}

.field__in{width:100%;min-height:52px;padding:12px 18px;border-radius:14px;
  border:1px solid #858c80;background:#fff;color:var(--ink);
  font:400 16px/1.4 var(--text);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.field__in::placeholder{color:#8a9088}
select.field__in{appearance:none;-webkit-appearance:none;padding-right:44px;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1.5 6 6.5l5-5' fill='none' stroke='%232b3640' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;background-position:right 18px center;background-size:12px 8px}
textarea.field__in{min-height:132px;resize:vertical;line-height:1.55}
.field__in:hover{border-color:var(--green)}
.field__in:focus-visible{outline:3px solid var(--green);outline-offset:2px;border-color:var(--green)}
.field.is-invalid .field__in{border-color:#a3472f;box-shadow:inset 0 0 0 1px #a3472f}
.field__error{display:flex;gap:7px;align-items:flex-start;font-size:13.5px;line-height:1.5;color:#8a3f2e;text-wrap:pretty}
.field__error:empty{display:none}
.field__error::before{content:"";flex:0 0 auto;width:6px;height:6px;margin-top:7px;border-radius:50%;background:#a3472f}

/* a set of radio buttons as pills, for a question with a handful of answers */
fieldset.field{border:0;margin:0;padding:0;min-width:0}
.field legend{padding:0;margin-bottom:8px}

.form__acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:6px}
.form__acts .btn[aria-busy="true"]{opacity:.7;pointer-events:none}

/* the summary at the top of the form after a failed submit, and the panel after a good one */

/* the honeypot: off screen for a person, an ordinary field for a bot */

/* ---------- small additions ---------- */
/* a route heading that is itself a link, on the 404 page */
.route h3 a{color:inherit;text-decoration:none;transition:color .2s var(--ease)}
.route h3 a:hover{color:var(--green-deep)}

/* ---------- questions families ask ----------
   Native <details>, styled as the same rule-separated rows every list on the site uses.
   The chevron turns; nothing else animates. Answers stay in the document whether open or
   closed, so find-in-page and search both see them. */
.faq{background:var(--cream);padding:clamp(40px,4.8vw,64px) var(--gut) clamp(56px,6.6vw,92px)}
.faq__in{max-width:820px;margin:0 auto}
.faq__group+.faq__group{margin-top:clamp(40px,4.8vw,64px)}
.faq__h{font-size:clamp(22px,2.3vw,30px);margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--rule)}
.faq__item{border-bottom:1px solid var(--rule)}
.faq__item summary{display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:18px 4px;cursor:pointer;list-style:none;
  font-family:var(--display);font-weight:600;font-size:clamp(16px,1.5vw,18px);letter-spacing:-.01em;
  color:var(--ink);line-height:1.35;text-wrap:balance;
  transition:color .2s var(--ease)}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary:hover{color:var(--green-deep)}
.faq__item summary:focus-visible{outline:3px solid var(--green);outline-offset:2px;border-radius:6px}
.faq__chev{flex:0 0 auto;width:14px;height:10px;fill:none;stroke:var(--green);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .28s var(--ease)}
.faq__item[open] .faq__chev{transform:rotate(180deg)}
.faq__a{padding:0 4px 22px;max-width:62ch}
.faq__a p{font-size:16px;line-height:1.66;color:var(--body);text-wrap:pretty}
.faq__a p+p{margin-top:12px}
.faq__a a{color:var(--green-deep);font-weight:600;text-decoration:none;border-bottom:1px solid var(--green-tint);padding-bottom:1px}
.faq__a a:hover{border-bottom-color:var(--green)}
/* a question arrived at by its anchor opens itself */
.faq__item:target{scroll-margin-top:96px}
.faq{content-visibility:auto;contain-intrinsic-size:auto 1800px}

/* ---------- prose pages ----------
   Privacy and accessibility: a single reading column, the site's ordinary body text, real
   bullets, and a date at the foot. Nothing here needs to be scanned or sold. */
.prose{background:var(--cream);padding:clamp(48px,5.6vw,80px) var(--gut) clamp(64px,7.4vw,104px)}
.prose__in{max-width:68ch;margin:0 auto}
.prose h2{font-size:clamp(20px,2vw,26px);margin:clamp(30px,3.4vw,44px) 0 12px}
.prose h2:first-child{margin-top:0}
.prose p,.prose li{font-size:16.5px;line-height:1.68;color:var(--body);text-wrap:pretty}
.prose p+p{margin-top:14px}
.prose ul{list-style:disc;padding-left:22px;margin:0}
.prose li+li{margin-top:8px}
.prose li::marker{color:var(--green)}
.prose a{color:var(--green-deep);font-weight:600;text-decoration:none;border-bottom:1px solid var(--green-tint);padding-bottom:1px}
.prose a:hover{border-bottom-color:var(--green)}
.prose__date{margin-top:clamp(30px,3.4vw,44px)!important;padding-top:16px;border-top:1px solid var(--rule);font-size:14px!important;color:var(--muted)!important}
.prose{content-visibility:auto;contain-intrinsic-size:auto 1400px}

/* ---------- finding us ----------
   The map on a centre page, as a facade until the visitor asks for it. The frame keeps its
   4:3 box empty or full, so nothing shifts when the map arrives. */
.map{background:var(--cream);padding:clamp(56px,6.6vw,92px) var(--gut);border-top:1px solid var(--rule)}
.map__in{max-width:var(--wrap);margin:0 auto;display:grid;gap:clamp(32px,4.4vw,62px);
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center}
.map__copy .h2{margin-bottom:18px}
.map__addr{font-size:clamp(17px,1.6vw,19px);line-height:1.5;color:var(--ink-2)}
.map__acts{margin-top:22px}
.map__frame{position:relative;overflow:hidden;aspect-ratio:4/3;border-radius:var(--r);background:var(--sand);
  border:1px solid var(--rule);display:grid;place-items:center;isolation:isolate}
.map__mark{position:absolute;right:-70px;bottom:-60px;width:min(380px,60%);opacity:.07;transform:rotate(-8deg);pointer-events:none}
.map__facade{position:relative;text-align:center;padding:24px;max-width:34ch}
.map__alt{display:block;margin-top:14px;font-size:14px;color:var(--green-deep);font-weight:600;text-decoration:none}
.map__alt:hover{color:var(--green)}
.map__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (max-width:900px){
  .map__in{grid-template-columns:1fr}
}
.map{content-visibility:auto;contain-intrinsic-size:auto 620px}

/* two buttons side by side at the foot of a split's copy */

/* ---------- centre of amazing: the wheel ----------
   Six ideas, Andrew's, from his "Centre of Amazing" graphic of 18 September 2026: a ring of
   six wedges round a cream core, pale sage grounds, dark green line icons and labels.
   Rebuilt in SVG rather than placed as the PNG so it stays sharp, themeable and readable
   by a screen reader. Since 20 September 2026 it sits beside the vision on What we believe,
   in the split's media slot, and it is static: no walking light and no hover (Ben). The
   "What we mean by amazing" section with the six statements came off the same day. */
.hex__svg{width:100%;max-width:460px;height:auto;margin:0 auto;display:block;overflow:visible}
.hex__wedge{fill:var(--green-tint);stroke:var(--sand);stroke-width:3;stroke-linejoin:round}
.hex__wedge:nth-child(even){fill:#dbe2cf}
.hex__icon{fill:none;stroke:var(--green-deep);stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.hex__label{font-family:var(--display);font-weight:600;font-size:5.6px;letter-spacing:.06em;text-transform:uppercase;fill:var(--green-deep);text-anchor:middle}
.hex__core{fill:var(--cream);stroke:var(--sand);stroke-width:3}
.hex__core-t{font-family:var(--display);text-anchor:middle;fill:var(--green-deep)}
.hex__core-t tspan:first-child{font-weight:500;font-size:7.4px;letter-spacing:-.01em}
.hex__core-t tspan:last-child{font-weight:600;font-size:12.5px;letter-spacing:-.03em}
.split__media--wheel{display:grid;place-items:center}
.split__media--wheel .hex__svg{max-width:420px}
.split__media--wheel .hex__wedge,.split__media--wheel .hex__core{stroke:var(--cream)}

/* ---------- the About Us pages: Jarren's sections ----------
   Each of the five About Us pages is a set of named sections in the order Jarren's header
   document of 18 September 2026 gives them. The band lists them as jump chips; each one
   opens with a marker, the section's name set small on a rule, and holds the components
   that carry it. Nested sections keep their own grounds, so the marker sits on the cream
   the page falls back to. The sticky header is 82px on a wide screen, so a jump lands the
   marker below it. */
.part{scroll-margin-top:96px}
.part__h{position:relative;text-align:center;padding:clamp(26px,3vw,38px) var(--gut) 0;background:var(--cream)}
.part__h::before{content:"";position:absolute;left:var(--gut);right:var(--gut);top:calc(50% + clamp(13px,1.5vw,19px));height:1px;background:var(--rule)}
.part__h span{position:relative;display:inline-block;padding:6px 16px;background:var(--cream);border-radius:999px;
  font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--green)}

/* A section the family has yet to write. The heading is Jarren's; the note is the only
   thing under it, styled as a gap rather than as copy, and it is one snippet on /review so
   he can write straight into the box. tools/copy-apply.mjs drops this class when his words
   land, so nothing has to be edited by hand afterwards. */
.tocome{max-width:62ch;margin:0 auto;padding:20px 24px;text-align:left;border:1px dashed #b9bfb2;border-radius:14px;
  background:var(--sand);color:var(--body);font-size:15px;line-height:1.6;text-wrap:pretty}
.tocome::before{content:"Still to come";display:block;margin-bottom:6px;font-family:var(--display);font-size:11.5px;
  font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--green)}

/* ---------- cultural narrative ----------
   Six chapters strung along one pathway. Copy on one side of the line, one thing drawn out
   of the words on the other, sides alternating; on a phone the line moves to the left and
   everything stacks beside it. The asides carry nothing the paragraph does not. */
.narr{position:relative;overflow:hidden;background:var(--cream);padding:clamp(62px,7.4vw,100px) var(--gut)}
.narr__leaf{position:absolute;right:-140px;top:-40px;width:620px;height:auto;opacity:.05;pointer-events:none;user-select:none}
.narr__head{position:relative;max-width:620px;margin:0 auto clamp(38px,4.4vw,60px);text-align:center}
.narr__head p{margin-top:16px;color:var(--body);text-wrap:pretty}
.narr__path{list-style:none;padding:0;position:relative;max-width:var(--wrap);margin:0 auto;display:grid;gap:clamp(30px,3.6vw,54px)}
.narr__path::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--rule);transform:translateX(-.5px)}
.chapter{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 clamp(48px,6vw,96px);align-items:center}
.chapter::before{content:"";position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 5px var(--cream)}
.chapter:nth-child(even) .chapter__copy{grid-column:2;grid-row:1}
.chapter:nth-child(even) .chapter__aside{grid-column:1;grid-row:1;justify-self:end;text-align:right}
.chapter__copy{position:relative}
.chapter__where{display:block;font-family:var(--display);font-weight:600;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--green);margin-bottom:10px}
.chapter__num{display:block;font-family:var(--display);font-weight:600;font-size:clamp(40px,4.4vw,60px);line-height:1;color:var(--green-tint);letter-spacing:-.03em;margin-bottom:6px}
.chapter h3,.chapter h4{font-size:clamp(22px,2.2vw,28px);margin-bottom:12px}
.chapter p{max-width:52ch;text-wrap:pretty}
.chapter__aside{max-width:380px}

/* 01: the three centres, as stops on a route */
.stops{list-style:none;margin:0;position:relative;padding-left:26px}
.stops::before{content:"";position:absolute;left:6px;top:14px;bottom:14px;width:2px;background:var(--green-accent);border-radius:1px}
.stops li{position:relative;padding:10px 0}
.stops li::before{content:"";position:absolute;left:-26px;top:16px;width:14px;height:14px;border-radius:50%;background:var(--cream);border:2px solid var(--green-accent)}
.stops li:first-child::before{background:var(--green-accent)}
.stops b{display:block;font-family:var(--display);font-weight:600;font-size:17px;color:var(--ink)}
.stops span{display:block;font-size:14.5px;color:var(--muted);margin-top:2px}
.chapter:nth-child(even) .stops{padding-left:0;padding-right:26px}
.chapter:nth-child(even) .stops::before{left:auto;right:6px}
.chapter:nth-child(even) .stops li::before{left:auto;right:-26px}

/* 02: the lineage */
.lineage{display:grid;gap:14px}
.lineage div{padding:12px 0 0;border-top:1px solid var(--rule)}
.lineage dt{font-family:var(--display);font-weight:600;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--green)}
.lineage dd{margin:6px 0 0;font-size:16px;line-height:1.5;color:var(--ink)}

/* 03 and 05: names as small pills */
.tags__label{font-family:var(--display);font-weight:600;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--green);margin:0 0 8px}
.tags__label+.tags{margin-bottom:18px}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.chapter:nth-child(even) .tags{justify-content:flex-end}
.tags li{font-size:14.5px;line-height:1;padding:9px 14px;border-radius:999px;border:1px solid var(--rule);background:#fff;color:var(--ink-2)}
.tags--soft li{background:var(--green-tint);border-color:transparent;color:var(--green-deep)}

/* 04: the figures */
.figures{display:grid;gap:clamp(14px,1.8vw,22px)}
.figures li{padding-left:22px;border-left:2px solid var(--green-accent)}
.chapter:nth-child(even) .figures li{padding-left:0;padding-right:22px;border-left:0;border-right:2px solid var(--green-accent)}
.figures b{display:block;font-family:var(--display);font-weight:600;font-size:clamp(30px,3.4vw,44px);line-height:1;color:var(--green-deep);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.figures span{display:block;margin-top:6px;font-size:14.5px;line-height:1.5;color:var(--body);text-wrap:pretty}

/* 05: the hundred languages */
.hundred b{display:block;font-family:var(--display);font-weight:600;font-size:clamp(64px,7vw,96px);line-height:.95;color:var(--green-deep);letter-spacing:-.04em}
.hundred>span{display:block;margin:6px 0 16px;font-size:14.5px;color:var(--muted)}

/* 06: the schools */
.schools{display:flex;flex-wrap:wrap;gap:10px}
.chapter:nth-child(even) .schools{justify-content:flex-end}
.schools li{font-family:var(--display);font-weight:600;font-size:15px;padding:11px 16px;border-radius:14px;background:var(--green);color:#fff}
.schools li:nth-child(even){background:var(--green-deep)}
.schools__note{margin-top:14px;font-size:14px;color:var(--muted);text-wrap:pretty}

@media (max-width:900px){
  .hex__svg{max-width:340px}
  .narr__path::before{left:8px;transform:none}
  .chapter{grid-template-columns:1fr;gap:20px;padding-left:36px}
  .chapter::before{left:8px;top:22px;margin-left:-7px}
  .chapter:nth-child(even) .chapter__copy{grid-column:1;grid-row:auto}
  .chapter:nth-child(even) .chapter__aside{grid-column:1;grid-row:auto;justify-self:start;text-align:left}
  .chapter:nth-child(even) .stops{padding-left:26px;padding-right:0}
  .chapter:nth-child(even) .stops::before{left:6px;right:auto}
  .chapter:nth-child(even) .stops li::before{left:-26px;right:auto}
  .chapter:nth-child(even) .tags,.chapter:nth-child(even) .schools{justify-content:flex-start}
  .chapter:nth-child(even) .figures li{padding-left:22px;padding-right:0;border-left:2px solid var(--green-accent);border-right:0}
  .narr__leaf{width:420px;right:-160px}
}
.narr{content-visibility:auto}
.narr{contain-intrinsic-size:auto 1900px}

/* ---------- centre page: photograph, key information, introduction ----------
   The photograph and the Key information panel share the left column and the centre's own
   introduction (several paragraphs, from the family's packets of 17 September 2026) the
   right, so the copy can run long without stranding the photograph in the middle of it.
   Row two is the flexible one, so the panel sits directly under the photograph however
   long the copy runs. On a phone: the photograph, the facts, then the reading. */
.split__in--centre{grid-template-rows:auto 1fr;grid-template-areas:"media copy" "facts copy";align-items:start}
.split__in--centre .split__media{grid-area:media}
.split__in--centre .split__copy{grid-area:copy}
.split__facts{grid-area:facts;align-self:start}
.split__facts .cdets{margin-top:0}
.cdets__h{font-size:17px;letter-spacing:-.01em;color:var(--ink);margin-bottom:6px}
@media (max-width:900px){
  .split__in--centre{grid-template-rows:auto;grid-template-areas:"media" "facts" "copy"}
}

/* ---------- the centre at a glance ----------
   The packet's bullet points as one scannable strip: three tight columns of ticked rows on
   sand, the meals list's idiom, because a parent scans this rather than reads it. Sand
   between the cream split above and the cream map below, which carries its own rule. */
.glance{background:var(--sand);padding:clamp(56px,6.6vw,92px) var(--gut)}
.glance__in{max-width:var(--wrap);margin:0 auto}
.glance__head{max-width:620px;margin:0 auto clamp(26px,3.2vw,40px);text-align:center}
.glance__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(24px,3.2vw,48px)}
.glance__list li{position:relative;padding:16px 0 16px 34px;border-top:1px solid var(--rule);font-size:15.5px;line-height:1.5;color:var(--ink-2);text-wrap:pretty}
.glance__list li::before{content:"";position:absolute;left:2px;top:22px;width:17px;height:11px;border-left:2px solid var(--green-accent);border-bottom:2px solid var(--green-accent);transform:rotate(-45deg)}
@media (max-width:900px){
  .glance__list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .glance__list{grid-template-columns:1fr}
}
.glance{content-visibility:auto;contain-intrinsic-size:auto 420px}

/* Take a look around (centre page, Northcross since 25 September 2026): the centre's
   photographs in groups, cream between the sand glance strip and the map, which carries its
   own rule. Four across with a `wide` tile two by two (the second of a group on the right);
   two across under 900px with a wide tile full width. A wide tile's picture is absolutely
   placed so the ordinary tiles, not its own 16:9, decide the row heights it spans. Photos
   carry the site's soft shadow; the tile scales its photograph on hover the way a location
   card does. */
.look{background:var(--cream);padding:clamp(62px,7.4vw,100px) var(--gut)}
.look__head{max-width:620px;margin:0 auto clamp(30px,3.6vw,46px);text-align:center}
.look__group{max-width:var(--wrap);margin:0 auto}
.look__group + .look__group{margin-top:clamp(34px,4vw,54px)}
.look__h{font-size:clamp(19px,1.8vw,24px);margin-bottom:16px}
.look__grid{list-style:none;margin:0;padding:0;display:grid;gap:clamp(10px,1.2vw,16px);
  grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:dense}
.look__tile{min-width:0}
.look__tile a{position:relative;display:block;height:100%;overflow:hidden;border-radius:12px;background:var(--sand);
  box-shadow:0 14px 30px -24px rgba(43,54,64,.6)}
.look__tile img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;transition:transform .5s var(--ease)}
.look__tile a:hover img{transform:scale(1.035)}
.look__tile--wide{grid-column:span 2;grid-row:span 2}
.look__tile--r{grid-column:3/span 2}
.look__tile--wide img{position:absolute;inset:0;height:100%;aspect-ratio:auto}
/* a group of wides alone has no ordinary tile to give its rows a height (tools/centre.mjs) */
.look__grid--wides .look__tile--wide a{height:auto;aspect-ratio:16/9}
@media (max-width:900px){
  .look__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .look__tile--wide,.look__tile--r{grid-column:1/-1;grid-row:auto}
  .look__tile--wide img{position:static;height:auto;aspect-ratio:16/9}
}
.look{content-visibility:auto;contain-intrinsic-size:auto 1900px}

/* The viewer a gallery tile opens: a modal <dialog> site.js builds, so the page behind is
   inert and Escape closes it. The photograph fits the screen whole, never cropped; the
   buttons sit at the sides on a wide screen and under the photograph on a phone, where a
   swipe also steps. The buttons sit above the photograph's layer and the counter lets taps
   through: until 25 September 2026 the figure covered the close button and, on a phone,
   the counter covered both arrows, so taps landed on neither (_work/viewer-taps.mjs). */
.lbox{width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;
  background:transparent;color:#fff;overflow:hidden}
.lbox::backdrop{background:rgba(24,30,34,.95)}
.lbox__fig{position:absolute;inset:0;margin:0;display:flex;align-items:center;justify-content:center;
  padding:72px 88px}
.lbox__img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;border-radius:10px}
.lbox__btn{position:absolute;z-index:2;width:48px;height:48px;border:0;border-radius:999px;cursor:pointer;
  display:grid;place-items:center;background:rgba(255,255,255,.94);color:var(--ink);
  transition:background-color .2s var(--ease),transform .2s var(--ease)}
.lbox__btn:hover{background:#fff;transform:scale(1.06)}
.lbox__btn:focus-visible{outline:3px solid #fff;outline-offset:3px;border-radius:999px}
.lbox__btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lbox__close{top:16px;right:16px}
.lbox__prev,.lbox__next{top:50%;margin-top:-24px}
.lbox__prev{left:20px}
.lbox__next{right:20px}
.lbox__count{position:absolute;left:0;right:0;pointer-events:none;bottom:22px;margin:0;text-align:center;
  font:600 14px/1 var(--display);letter-spacing:.04em;color:rgba(255,255,255,.86)}
html.lbox-lock{overflow:hidden}
@media (max-width:700px){
  .lbox__fig{padding:68px 12px 96px}
  .lbox__prev,.lbox__next{top:auto;bottom:14px;margin:0}
  .lbox__prev{left:calc(50% - 124px)}
  .lbox__next{right:calc(50% - 124px)}
  .lbox__count{bottom:31px}
}
@media (prefers-reduced-motion:no-preference){
  .lbox[open]{animation:lbox-in .22s var(--ease)}
  @keyframes lbox-in{from{opacity:0}}
}

/* ---------- book a tour: the button and the panel ----------
   Ben, 24 September 2026, from a reference he liked: a button on every page opens a panel
   from the right with the tour form in it (src/partials/tour.html). The panel is the site's
   deep green with the fields drawn on it; every text colour is solid, not transparent, and
   measured against it: white 7.7:1, the quiet text #e3e8da 6.1:1 (5.3:1 inside a field),
   the placeholder #d7dfcc 4.8:1 on the field, the error text #ffd3c4 5.6:1, the field and
   chip borders #b7c2a8 4.1:1, and the chosen chip's green on cream 7.4:1.

   Without JavaScript the button is a link to #tour and :target opens the panel. site.js
   puts .tour-js on <html> and opens it with .is-open instead, so :target stops applying
   and a closed panel stays closed even with #tour still in the address. */
.hdr__tour{margin-left:clamp(10px,1.8vw,28px);min-height:44px;padding:0 20px;font-size:14.5px}
.hdr__tour+.hdr__cta{margin-left:10px}
@media (max-width:1080px){
  .hdr__tour{margin-left:auto;min-height:40px;padding:0 16px;font-size:14px}
  .hdr__tour~.burger{margin-left:6px}
}
@media (max-width:360px){.hdr__tour{padding:0 12px;font-size:13.5px}}

.tour{position:fixed;inset:0;z-index:100;visibility:hidden;transition:visibility 0s linear .45s}
html:not(.tour-js) .tour:target,.tour.is-open{visibility:visible;transition-delay:0s}
.tour__scrim{position:absolute;inset:0;background:rgba(30,36,26,.55);opacity:0;transition:opacity .4s var(--ease)}
.tour__panel{position:absolute;top:0;right:0;height:100%;width:min(620px,100%);overflow-y:auto;overscroll-behavior:contain;
  background:var(--green-deep);color:#fff;transform:translateX(100%);transition:transform .45s var(--ease);
  padding:clamp(56px,6vw,76px) clamp(22px,4.4vw,60px) 56px;box-shadow:-24px 0 60px -30px rgba(20,26,18,.7)}
html:not(.tour-js) .tour:target .tour__scrim,.tour.is-open .tour__scrim{opacity:1}
html:not(.tour-js) .tour:target .tour__panel,.tour.is-open .tour__panel{transform:none}
html.tour-lock{overflow:hidden}

.tour__x{position:absolute;top:18px;right:18px;width:44px;height:44px;display:grid;place-items:center;
  border-radius:12px;border:1px solid #b7c2a8;color:#fff;transition:background-color .2s var(--ease)}
.tour__x:hover{background:#546240}
.tour__x:focus-visible,.tour__panel a:focus-visible{outline:3px solid #fff;outline-offset:2px}
.tour__x svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}

.tour__eyebrow{margin:0 0 14px;font-family:var(--display);font-size:12.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:#e3e8da}
.tour__h{margin:0 0 14px;max-width:18ch;font-family:var(--display);font-weight:600;
  font-size:clamp(28px,3.3vw,38px);line-height:1.12;letter-spacing:-.02em;color:#fff}
.tour__h:focus{outline:none}
.tour__lede{margin:0 0 30px;max-width:48ch;color:#e3e8da;line-height:1.6}
.tour__panel a{color:#fff}

.tour__grid{display:grid;grid-template-columns:1fr 1fr;gap:22px 16px}
@media (max-width:560px){.tour__grid{grid-template-columns:1fr}}
.tour .field__label{color:#fff;font-size:14px}
.tour .field__label i{color:#e3e8da}
.tour .field__in{min-height:48px;border-radius:12px;background-color:#546240;border-color:#b7c2a8;color:#fff}
.tour .field__in::placeholder{color:#d7dfcc;opacity:1}
.tour .field__in:hover{border-color:#fff}
.tour .field__in:focus-visible{outline:3px solid #fff;border-color:#fff}
.tour select.field__in{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>")}
.tour select.field__in option{background:#fff;color:var(--ink)}
.tour textarea.field__in{min-height:96px}
.tour .field__hint{margin:0;font-size:13px;line-height:1.5;color:#e3e8da}
.tour .field__error{color:#ffd3c4}
.tour .field__error::before{background:#ffd3c4}
.tour .field.is-invalid .field__in,.tour .field.is-invalid .seg{border-color:#ffd3c4;box-shadow:inset 0 0 0 1px #ffd3c4}

/* two answers as one control, and a handful of answers as pills; the real inputs stay in
   the page, visually hidden, so the keyboard and a screen reader get ordinary radios and
   checkboxes */
.seg{display:grid;grid-template-columns:1fr 1fr;border:1px solid #b7c2a8;border-radius:12px;overflow:hidden}
.seg label,.chip{position:relative;cursor:pointer}
.seg input,.chip input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.seg span{display:grid;place-items:center;min-height:46px;padding:0 10px;font-size:14.5px;font-weight:500;
  transition:background-color .2s var(--ease),color .2s var(--ease)}
.seg label+label span{border-left:1px solid #b7c2a8}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip span{display:inline-flex;align-items:center;min-height:42px;padding:0 16px;border:1px solid #b7c2a8;border-radius:10px;
  font-size:14.5px;font-weight:500;transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.chip:hover span,.seg label:hover span{border-color:#fff}
.seg input:checked+span,.chip input:checked+span{background:var(--cream);color:var(--green-deep);border-color:var(--cream)}
.seg input:focus-visible+span,.chip input:focus-visible+span{outline:3px solid #fff;outline-offset:-3px}

.tour__alert{margin:0 0 22px;padding:14px 18px;border-radius:12px;background:#fcfaf7;color:#8a3f2e;font-size:14.5px;line-height:1.5}
.tour__alert ul{margin:6px 0 0;padding-left:18px;list-style:disc}
.tour__acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:30px}
.tour__send{background:var(--cream);color:var(--green-deep)}
.tour__send:hover{background:#fff;transform:translateY(-1px)}
.tour__send[aria-busy="true"]{opacity:.8;pointer-events:none}
.tour__note{margin:0;font-size:13px;line-height:1.5;color:#e3e8da;max-width:30ch}
.tour__fallback p{color:#e3e8da;margin:0 0 16px}
.tour__fallback ul{list-style:none;margin:0;padding:0;border-top:1px solid #b7c2a8}
.tour__fallback li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;padding:14px 0;border-bottom:1px solid #b7c2a8}
.tour__done h3{margin:0 0 12px;font-family:var(--display);font-size:24px;font-weight:600;letter-spacing:-.015em;color:#fff}
.tour__done:focus{outline:none}
.tour__done p{color:#e3e8da;margin:0 0 20px}

/* the honeypot: off screen for a person, an ordinary field for a bot */
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

@media (prefers-reduced-motion:reduce){.tour,.tour__scrim,.tour__panel{transition:none}}
@media print{.tour,.hdr__tour{display:none}}

/* =====================================================================================
   PHONES AND TABLETS (27 September 2026)
   Ben: the desktop site is finished; make the phone version really good, because most
   parents will open it on a phone. Everything below is a layer on top of the desktop
   design, never an edit to it: a rule here lives in a phone or tablet media query, a
   (hover: none) query, or styles markup that renders nothing on a wide screen (the thumb
   bar, a centre's quick buttons, the call sheet, the gallery's photo counts, the quote
   counter). tools/desk-diff.mjs holds every visible box at 1100, 1280 and 1440 to the build
   before this pass. The breakpoints:
     700 and under, held upright     the phone: thumb bar, compact header, phone layouts
     700 and under                   the phone layouts (a small phone on its side included)
     701 to 900                      tablet portrait: two columns where they fit
     701 to 1080                     the header's Enquire button beside Book a tour
     height 500 and under, sideways  a phone on its side: a short header, no thumb bar
   DESIGN.md, "Phones and tablets", has the why of each.
   ===================================================================================== */

/* the gutter clears a notch when a phone is on its side (viewport-fit=cover in head.html);
   env() is 0 everywhere else, so this is the old gutter on every desktop */
:root{--gut:max(clamp(20px,5vw,64px),env(safe-area-inset-left),env(safe-area-inset-right))}
html{-webkit-tap-highlight-color:rgba(95,112,73,.16)}

/* phone-only pieces, off until a query below turns them on */
.pbar,.cquick,.look__n,.says__count{display:none}

/* the splash has already played this visit (the line in the homepage's head) */
.splash-seen .splash{display:none}

/* ---------- the call sheet ----------
   The thumb bar's Call on every page but a centre's own: the three centres' numbers in a
   sheet that rises from the foot of the screen. A modal <dialog>, so nothing renders until
   it opens. */
.csheet{position:fixed;inset:auto 0 0 0;width:100%;max-width:none;max-height:100dvh;margin:0;padding:0;border:0;
  background:transparent;color:var(--ink);overflow:visible}
.csheet::backdrop{background:rgba(30,36,26,.55)}
.csheet__in{position:relative;background:var(--cream);border-radius:20px 20px 0 0;
  padding:24px var(--gut) calc(20px + env(safe-area-inset-bottom));box-shadow:0 -24px 50px -30px rgba(20,26,18,.7)}
.csheet__h{margin:0 0 12px;padding-right:48px;font-family:var(--display);font-weight:600;font-size:20px;letter-spacing:-.015em;color:var(--ink)}
.csheet__list{border-top:1px solid var(--rule)}
.csheet__list a,.mnav__calls a{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:58px;
  padding:8px 0;border-bottom:1px solid var(--rule);text-decoration:none;color:var(--ink-2)}
.csheet__list span,.mnav__calls span{font-size:15.5px;line-height:1.35}
.csheet__list b,.mnav__calls b{font-family:var(--display);font-weight:600;font-size:17px;color:var(--green-deep);white-space:nowrap;font-variant-numeric:tabular-nums}
.csheet__note{margin-top:14px;font-size:14.5px;color:var(--muted)}
.csheet__x{position:absolute;top:12px;right:max(8px,calc(var(--gut) - 12px));width:44px;height:44px;display:grid;place-items:center;
  border:0;border-radius:12px;background:none;color:var(--ink);cursor:pointer}
.csheet__x:focus-visible{outline:3px solid var(--green);outline-offset:0}
html.csheet-lock{overflow:hidden}
@media (prefers-reduced-motion:no-preference){
  .csheet[open] .csheet__in{animation:csheetUp .32s var(--ease)}
  @keyframes csheetUp{from{transform:translateY(100%)}}
}

/* the action icons: the bar, the quick buttons, the sheet's close button */
.tap__ico{width:19px;height:19px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ---------- the phone menu (every width that has the burger) ----------
   It holds the page still behind it (html.mnav-open, from site.js), fits the screen that is
   actually visible (dvh: 100vh on iOS runs under the toolbar and hid the last buttons),
   gives every row a full thumb's height, and ends on each centre's number under its name. */
html.mnav-open{overflow:hidden}
.mnav{max-height:calc(100vh - 76px);max-height:calc(100dvh - 76px);overscroll-behavior:contain;
  padding-bottom:calc(28px + env(safe-area-inset-bottom))}
.mnav__sub li a,.mnav__sub li span{padding:12px 0}
.mnav__callh{margin:28px 0 6px;font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--green)}
.mnav__calls{border-top:1px solid var(--rule)}

/* ---------- touch ----------
   A tap on a phone leaves :hover applied until the next tap somewhere else, so a card
   stayed zoomed and a button stayed lifted after it was pressed. On a screen that cannot
   hover, the hover movement is taken back and a press answers instead. */
@media (hover:none){
  .loc:hover .loc__media img,.look__tile a:hover img,a:hover>.arr{transform:none}
  .room--opens:hover img{transform:none;box-shadow:0 18px 36px -28px rgba(43,54,64,.6)}
  .room--opens.is-open:hover img{box-shadow:0 0 0 3px var(--green),0 18px 36px -28px rgba(43,54,64,.6)}
  .btn:hover,a.phero__chip:hover,.says__arrow:hover,.lbox__btn:hover,.tour__send:hover{transform:none}
  .btn--green:hover{background:var(--green);box-shadow:0 2px 10px -4px rgba(43,54,64,.45)}
  .btn--white:hover{color:var(--ink);box-shadow:0 2px 10px -4px rgba(43,54,64,.35)}
  .btn--ghost:hover{background:transparent;color:var(--green-deep)}
  a.phero__chip:hover{background:var(--ph-chip)}
  .says__arrow:hover{background:#fff;border-color:var(--rule);color:var(--green-deep)}
  .btn:active,.pbar__a:active,.cquick__a:active,a.phero__chip:active,.says__arrow:active{transform:scale(.97)}
  .btn--green:active,.pbar__a--go:active{background:var(--green-deep)}
  .loc__media a:active img,.look__tile a:active img,.room--opens:active img{opacity:.86}
}

/* ---------- the header wherever the burger shows ----------
   The burger is a full 44px target, and from 701 to 1080 (tablets, a narrow laptop window)
   there is room for Enquire beside Book a tour again. */
@media (max-width:1080px){
  .burger{display:grid;place-content:center;width:44px;height:44px;padding:0;margin-right:-11px}
}
@media (min-width:701px) and (max-width:1080px){
  .hdr__cta{display:inline-flex;min-height:40px;padding:0 18px;font-size:14px}
  .hdr__tour+.hdr__cta{margin-left:8px}
  .hdr__cta~.burger{margin-left:8px}
}

/* ===================== the phone ===================== */
@media (max-width:700px){

  /* the header: the logo, the menu, and (while the thumb bar is away) Book a tour */
  .hdr__in{padding-top:9px;padding-bottom:9px;gap:12px}
  .hdr__logo img{height:52px}
  .hdr__tour{min-height:44px}
  .mnav{max-height:calc(100vh - 70px);max-height:calc(100dvh - 70px)}

  /* the rhythm: less air between sections, a smaller ornament, the same order of spaces */
  .locs,.rooms,.says,.story,.lede,.split,.perks,.routes,.welcome,.look,.glance,.map,.narr,.voices,.faq,.prose{padding-top:52px;padding-bottom:54px}
  .team{padding-top:46px;padding-bottom:50px}
  .orn{width:58px;margin-bottom:14px}
  .locs__head,.rooms__head,.perks__head,.routes__head,.voices__head,.look__head,.glance__head,.narr__head{margin-bottom:30px}
  .phero--plain{padding:34px 0 32px}
  .phero__h{font-size:clamp(32px,9vw,38px)}

  /* A passage of more than a few lines is set left: a centred paragraph at this width has a
     different start on every line. Its ornament and heading go left with it. */
  .lede__in,.team__copy,.say__mid,.voices__deck,.locs__head{text-align:left}
  .lede .orn,.say__mid .orn,.locs__head .orn,.voices__deck .orn{margin-left:0}
  .team__copy p{margin-left:0}
  .team__copy .more{justify-content:flex-start}

  .loc--full .loc__more{gap:0 22px}

  /* the band's chips run in one row that scrolls sideways, fading at the edge, rather than
     one chip a line down the band */
  .phero__deck{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;
    margin-right:calc(-1 * var(--gut));padding-right:var(--gut);
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent)}
  .phero__deck::-webkit-scrollbar{display:none}
  .phero__chip{flex:none;white-space:nowrap;min-height:44px}
  .phero__deck::after{content:"";flex:0 0 12px}

  /* ---------- homepage ---------- */
  .hero__img{height:min(78vh,600px);height:min(78svh,600px)}
  .hero__acts .btn{flex:0 0 auto;min-width:148px}

  /* the five pillars as rows: icon, then its heading and line */
  .pillars{padding:30px var(--gut) 34px}
  .pillars__grid{grid-template-columns:1fr;gap:0}
  .pillars .pillar{display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:18px;align-items:start;
    text-align:left;padding:16px 0;border-top:1px solid var(--rule)}
  .pillars .pillar:first-child{border-top:0}
  .pillars .pillar:nth-child(n)::before{display:none!important}
  .pillar .ico{grid-row:1/span 2;width:52px;height:52px;margin:2px 0 0}
  .pillar h2{margin:0 0 4px;font-size:16.5px}
  .pillar h2 br{display:none}
  .pillar p{font-size:14.5px;line-height:1.5}

  /* The centres. "Enquire" lands at the top of the three cards (the anchor moves above the
     grid here), so every card's Enquire now is on the way down; on a wide screen it lands
     at their foot, where all three buttons are in view at once. */
  .locs{display:flex;flex-direction:column}
  .locs__head,.locs__grid{width:100%}
  .locs__anchor{order:1;scroll-margin-top:78px}
  .locs__grid{order:2;gap:40px}
  .loc__media{margin-bottom:16px}
  .loc h3{font-size:21px;margin-bottom:8px}
  .loc__blurb{margin-bottom:12px}
  .loc__addr{align-items:center;gap:12px;min-height:46px;padding:0;border-top:1px solid var(--rule)}
  .loc__addr>span{padding:7px 0}
  .loc__addr+.loc__addr{margin-top:0}
  .loc__addr .mini{margin-top:0}
  .loc__addr a{flex:1;align-self:stretch;display:flex;align-items:center;border-bottom:0;padding:0;min-width:0;overflow-wrap:anywhere}
  .loc__more{margin-top:4px}
  .loc__enquire{padding-top:10px}
  .loc__enquire .btn{width:100%}
  /* the sister centre panel stays under the cards (.locs is a column with ordered parts
     here) and stacks its words over its facts */
  .sister{order:3;width:100%;grid-template-columns:1fr;margin-top:44px;padding:22px 20px}

  /* the founding marks three across, under the story */
  .story__marks{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .story__marks li{padding-left:12px}
  .story__marks b{font-size:30px}
  .story__marks span{font-size:14px}

  /* the quotes: a counter in place of the dots, and the row under the quote, not centred */
  .says__dots{display:none}
  .says__count{display:block;margin:0;min-width:70px;text-align:center;font-family:var(--display);font-weight:600;
    font-size:14.5px;color:var(--ink-2);font-variant-numeric:tabular-nums}
  .says__nav{justify-content:flex-start;gap:12px}

  /* the owners' photograph, shorter than it is wide */
  .team__photo{width:100%}
  .team__photo img{aspect-ratio:4/3;object-fit:cover;object-position:50% 28%}

  /* ---------- the centre pages ---------- */
  .cquick{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:10px;padding:16px var(--gut) 0;background:var(--cream)}
  .cquick__a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border-radius:999px;
    background:#fff;color:var(--ink);box-shadow:0 2px 10px -4px rgba(43,54,64,.35),inset 0 0 0 1px var(--rule);
    font-family:var(--display);font-weight:600;font-size:15px;text-decoration:none}
  .cquick__a .tap__ico{color:var(--green)}
  .cquick+.split{padding-top:24px}

  /* Key information: the label beside its value, as on a wide screen, not above it */
  .cdet{grid-template-columns:86px minmax(0,1fr);gap:0 12px;padding:11px 0}
  .cdet>span{padding-top:4px}
  .cdet>.cdet__more{grid-column:2;justify-self:start;margin-left:0}
  .cdet{overflow-wrap:anywhere}
  .cdet a[href^="mailto:"]{font-size:14.5px;letter-spacing:-.01em}
  .centre__acts{display:flex;flex-wrap:wrap;gap:10px}
  .centre__acts .btn{flex:1 1 150px}

  /* the rooms as rows: a small photograph, its name and ages, its line */
  .rooms__grid{gap:0;max-width:none}
  .room{display:grid;grid-template-columns:104px minmax(0,1fr);column-gap:16px;align-items:start;
    padding:16px 0;border-top:1px solid var(--rule)}
  .rooms__grid>.room:first-child{border-top:0;padding-top:0}
  .room img{grid-row:1/span 3;width:104px;height:104px;object-fit:cover;margin:0;border-radius:12px}
  .room h3{font-size:18px;margin:2px 0 6px}
  .room p{font-size:14.5px;line-height:1.5}
  .room__ages{margin-left:4px}
  .room__more{margin-top:8px}
  .room__btn::after{inset:-4px}
  .room__panel{margin:0 0 12px;padding:18px}
  .room__panel-img{display:block}

  /* Take a look around: each group a row that swipes sideways, the next photograph showing
     at the edge, its count beside its name; a tap opens the viewer as before */
  .look__head{margin-bottom:22px}
  .look__group{margin-right:calc(-1 * var(--gut))}
  .look__group+.look__group{margin-top:28px}
  .look__h{font-size:18px;margin-bottom:10px}
  .look__n{display:inline;font-family:var(--text);font-weight:500;font-size:14.5px;letter-spacing:0;color:var(--muted)}
  .look__grid{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
    scrollbar-width:none;padding:2px 0 20px}
  .look__grid::-webkit-scrollbar{display:none}
  .look__grid::after{content:"";flex:0 0 calc(var(--gut) - 10px)}
  .look__tile,.look__tile--wide,.look__tile--r{flex:0 0 80%;grid-column:auto;grid-row:auto;scroll-snap-align:start}
  .look__tile a{height:auto}
  .look__tile--wide img{position:static;height:auto;aspect-ratio:16/9}

  .glance__list li{padding:13px 0 13px 32px;font-size:15px}
  .glance__list li::before{top:19px}

  .map__frame{aspect-ratio:16/11}
  .map__acts .btn{width:100%}

  /* the team three to a row */
  .team--centre .team__grid{gap:20px 10px}
  .team--centre .team__grid li{width:calc((100% - 20px) / 3)}
  .team__grid img{max-width:88px}

  .cta__l .h2 br{display:none}
  .cta__tel{display:inline-flex;align-items:center;min-height:44px}

  /* ---------- Contact ---------- */
  .cpanels--tight .cpanel{padding:18px}
  .cpanels--tight .cpanel__d{grid-template-columns:62px minmax(0,1fr);gap:2px 12px;align-items:center}
  .cpanels--tight .cpanel__d dt{font-size:10.5px;padding-top:0}
  .cpanels--tight .cpanel__d dd{font-size:15px}
  .cpanels--tight .cpanel__d dd a[href^="mailto:"]{font-size:14.5px}
  .cpanel__d a{display:inline-flex;align-items:center;min-height:44px;border-bottom:0}
  .cpanel__d a[href^="tel:"]{font-family:var(--display);font-weight:600;font-size:21px;color:var(--green-deep);letter-spacing:-.01em}
  .cpanel__acts .btn{width:100%}

  /* ---------- the About Us pages ----------
     Under a section's marker the ornament goes and the gap closes: the marker has already
     said where you are, so the section opens once, not three times. */
  .part__h{padding-top:24px}
  .part__h span{max-width:calc(100% - 32px);font-size:12px;letter-spacing:.12em;line-height:1.5}
  .part__h + * .orn{display:none}
  .part__h + section{padding-top:30px}
  .hex__label{font-size:5.9px}
  .split__media--wheel .hex__svg{max-width:360px}

  /* the photographic band on Careers: the words sit at its foot, clear of the faces */
  .phero:not(.phero--plain):not(.phero--tint) .phero__img{height:min(60vh,420px);object-position:50% 24%}
  .phero:not(.phero--plain):not(.phero--tint) .phero__in{justify-content:flex-end;padding-bottom:40px}
  .phero:not(.phero--plain):not(.phero--tint) .phero__scrim{background:linear-gradient(to top,rgba(20,28,34,.9) 0%,rgba(20,28,34,.66) 36%,rgba(20,28,34,.08) 72%)}

  /* ---------- the footer: the two page lists side by side, every link a thumb's height */
  .ftr{padding-top:40px}
  .ftr__in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px 18px}
  .ftr__brand,.ftr__col--wide{grid-column:1/-1}
  .ftr__brand img{width:150px}
  .ftr__col h2{margin-bottom:6px}
  .ftr__col--wide p+p{margin-top:12px}
  .ftr__col:not(.ftr__col--wide) p+p{margin-top:0}
  .ftr__col:not(.ftr__col--wide) a,.ftr__legal a,.ftr__by a,.ftr__up{display:inline-flex;align-items:center;min-height:44px;border-bottom:0;padding:0}
  .ftr__app{margin-top:28px;padding:16px}
  .ftr__stores a{min-height:44px;padding:0 18px}
  .ftr__base{margin-top:26px;gap:0 18px;padding:12px 0 18px}

  /* how tall the skipped sections are here, so the scrollbar does not jump */
  .rooms{contain-intrinsic-size:auto 700px}
  .team{contain-intrinsic-size:auto 900px}
  .ftr{contain-intrinsic-size:auto 1000px}
  .look{contain-intrinsic-size:auto 1100px}
}

/* ---------- the thumb bar: a phone held upright ----------
   Call, Book a tour and Enquire where the thumb rests (Ben, 27 September 2026). Book a tour
   moves here out of the header, which becomes the logo and the menu. It steps aside while
   the menu is open; the tour panel and the sheets cover it. The footer runs on under it, so
   the last line of the page is never behind it. */
@media (max-width:700px) and (min-height:501px){
  .pbar{position:fixed;left:0;right:0;bottom:0;z-index:45;display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);
    gap:8px;padding:8px max(10px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));
    background:rgba(252,250,247,.97);border-top:1px solid var(--rule);box-shadow:0 -10px 26px -20px rgba(43,54,64,.5)}
  .pbar__a{display:flex;align-items:center;justify-content:center;gap:7px;min-height:48px;padding:0 14px;border-radius:999px;
    font-family:var(--display);font-weight:600;font-size:14.5px;letter-spacing:-.005em;white-space:nowrap;text-decoration:none;
    color:var(--ink);background:#fff;box-shadow:inset 0 0 0 1px var(--rule);transition:background-color .2s var(--ease),transform .2s var(--ease)}
  .pbar__a .tap__ico{color:var(--green)}
  .pbar__a--tour{color:var(--green-deep);background:transparent;box-shadow:inset 0 0 0 1.5px var(--green)}
  .pbar__a--go{color:#fff;background:var(--green);box-shadow:0 2px 10px -4px rgba(43,54,64,.45)}
  .pbar__a--go .tap__ico{color:#fff}
  .pbar__a:focus-visible{outline:3px solid var(--green);outline-offset:2px}
  html.mnav-open .pbar{display:none}
  .hdr__tour{display:none}
  .hdr__tour~.burger{margin-left:auto}
  .ftr{padding-bottom:calc(66px + env(safe-area-inset-bottom))}
}
@media (max-width:360px) and (min-height:501px){
  .pbar{gap:6px}
  .pbar__a{padding:0 10px;font-size:14px}
  .pbar__a--tour .tap__ico,.pbar__a--go .tap__ico{display:none}
}

/* ---------- a phone on its side ----------
   Height is the scarce thing: a short header, the hero sized to the screen so its button
   shows, and no thumb bar (the header keeps Book a tour). */
@media (max-height:500px) and (orientation:landscape){
  .hdr__in{padding-top:6px;padding-bottom:6px}
  .hdr__logo img{height:42px}
  .mnav{max-height:calc(100vh - 56px);max-height:calc(100dvh - 56px)}
  .hero__img{height:max(300px,calc(100vh - 56px));height:max(300px,calc(100svh - 56px))}
  .hero__in{padding-bottom:44px}
  .hero__h{font-size:clamp(34px,6vw,50px)}
  .hero__sub{margin-top:10px}
  .hero__acts{margin-top:16px}
  .phero--plain{padding:28px 0 26px}
}

/* ---------- the quotes hold their height ----------
   Stacked in one cell once site.js runs the deck, every quote occupies the same space, so
   the deck is as tall as its longest quote and nothing below it moves as they rotate. A
   wide screen has its own fixed height for this (.say__quotes, min-height). */
@media (max-width:900px){
  .say__quotes.is-deck{display:grid}
  .say__quotes.is-deck>.say{grid-area:1/1}
  .say__quotes.is-deck>.say[hidden]{display:block;visibility:hidden}
}

/* ===================== tablet, held upright (701 to 900) =====================
   Two columns wherever the content fits in two, rather than the phone's single column
   stretched across a tablet, which made Northcross longer at 768 than on a phone. */
@media (min-width:701px) and (max-width:900px){
  .welcome__in{grid-template-columns:minmax(0,1fr) minmax(0,.92fr);align-items:start}
  .welcome__media{order:0;position:sticky;top:110px}
  .split__in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .split--flip .split__media{order:0}
  .split__in--centre{grid-template-rows:auto 1fr;grid-template-areas:"media copy" "facts copy"}
  .story__in{grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr)}
  .story__marks{grid-template-columns:1fr}
  .map__in{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
  .cta__in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .cta__l{border-bottom:0;border-right:1px solid rgba(255,255,255,.28);padding:0 24px 0 0}

  /* the centres as rows: photograph beside its words */
  .locs__grid{max-width:var(--wrap);gap:34px}
  .loc{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:0 28px;align-items:start}
  .loc__media{margin-bottom:0}

  /* the rooms three across, each room's words below the row, as on a wide screen */
  .rooms__grid{grid-template-columns:repeat(3,minmax(0,1fr));max-width:var(--wrap);gap:22px}
  .room h3{font-size:18px}
  .room p{font-size:14.5px}
  .room__panel{order:1;grid-template-columns:minmax(0,5fr) minmax(0,7fr);margin-top:0}
  .room__panel-img{display:block}
  .room__panel-h{position:static;width:auto;height:auto;margin:0 0 14px;overflow:visible;clip-path:none;white-space:normal}

  /* Key information sits in the narrower left column here: the label goes above its value
     again, so a centre's email has the column's whole width */
  .cdet{grid-template-columns:minmax(0,1fr);gap:2px;padding:12px 0;overflow-wrap:anywhere}
  .cdet>span{padding-top:0}
  .cdet>.cdet__more{grid-column:auto}
  .cdet a[href^="mailto:"]{font-size:14.5px;letter-spacing:-.01em}

  /* the photographs four across, as on a wide screen, where their order keeps every row full */
  .look__grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .look__tile--wide{grid-column:span 2;grid-row:span 2}
  .look__tile--r{grid-column:3/span 2}
  .look__tile--wide img{position:absolute;inset:0;height:100%;aspect-ratio:auto}

  .perks__list,.routes__grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:var(--wrap)}
  .cpanels__grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:var(--wrap)}
  .team--centre .team__grid li{width:104px}
}

@media print{
  .pbar,.csheet,.cquick,.says__count{display:none!important}
  .ftr{padding-bottom:0}
}

/* ---------- a touch screen, at any width ----------
   Every control a thumb uses is at least 44px each way wherever the pointer is a finger:
   phones, tablets, a phone on its side. A mouse never matches this query, so the desktop is
   untouched. tools/phone-test.mjs holds every page to it at seven screen sizes. */
@media (pointer:coarse){
  /* a link on a line of its own: every "read on" link ends in the arrow */
  a:has(>.arr),.loc__link,.cdet__more,.cta__tel,.map__alt{display:inline-flex;align-items:center;min-height:44px}
  /* a name that is a link: the heading keeps its size, the link reaches past it */
  .loc h3 a,.loc--full h2 a,.route h3 a{display:inline-block;padding:12px 0;margin:-12px 0}
  /* a value that is a link, in a list of facts or in the crumb: a taller target on the same
     line; the hairline under it becomes an underline, so it stays at the words */
  .loc__facts dd a,.cdet a,.loc__addr a,.cpanel__d a,.phero__crumb a,.ftr__brand p+p a{padding:13px 0;border-bottom:0;
    text-decoration:underline;text-decoration-color:var(--rule);text-decoration-thickness:1px;text-underline-offset:4px}
  .phero__crumb a{padding:15px 6px;margin:0 -6px;text-decoration-color:currentColor}
  .cpanel__d a{padding:16px 0}
  /* in Key information the phone and email links are grid items, where padding moves the
     words down; the margin takes the move back and leaves the taller target */
  .cdet>a[href^="tel:"],.cdet>a[href^="mailto:"]{margin:-13px 0}
  .hdr__logo{display:flex;align-items:center;min-height:44px}
  .hdr__tour,.hdr__cta{min-height:44px}
  .ftr__col:not(.ftr__col--wide) p+p{margin-top:0}
  .ftr__col:not(.ftr__col--wide) a,.ftr__legal a,.ftr__by a,.ftr__up{display:inline-flex;align-items:center;min-height:44px;min-width:44px;border-bottom:0;padding:0}
  .ftr__stores a{min-height:44px;padding:0 18px}
}