/* ==========================================================================
   Mangawhai Village Preschool
   Coastal Northland. Sand, pōhutukawa, teal water, charcoal tree.
   Palette drawn from the centre's own logo, grounded into earthy neutrals.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Grounds */
  --white:      #FFFFFF;   /* clean neutral — hero, content surfaces, cards */
  --paper:      #FDFBF7;   /* barely-warm white, for large calm areas */
  --cream:      #FAF0DF;   /* page */
  --cream-warm: #F7E9D4;   /* subtle alternate */
  --sand:       #F3D6A9;   /* warm accent. Only ever used on the dark teal grounds */
  --mist:       #E4EDED;   /* pale band with a trace of the wave in it */
  --sand-deep:  #E6C08A;   /* hairlines on sand */

  /* Ink */
  --ink:        #232323;   /* text + dark grounding */
  --ink-75:     #4C4843;
  --ink-55:     #6E6960;

  /* Earth + accent */
  --sage:       #17686D;   /* the wave teal, deepened just enough to carry cream text */
  --forest:     #0F4E53;   /* the same wave teal, deeper again, for grounds behind photographs */
  --sage-deep:  #0F4E53;
  --teal:       #1F9BA3;   /* the wave, straight off the logo. Graphic use only:
                              2.96:1 on cream, so never behind cream or white text */
  --wave:       #79BEC3;   /* the same teal softened, for the tagline band. Takes ink
                              text at 7.46:1 */
  --teal-ink:   #1A7375;   /* text, links, buttons — 4.95:1 on cream */
  --sun:        #F19A3A;   /* rationed: one moment per page, ink text on top */

  /* Type — taken straight off the logo lockup, which uses two faces:
     a chunky rounded cap face for MANGAWHAI, and a light geometric sans for
     "Village Preschool". The header wordmark reproduces that pairing exactly.
     Across the rest of the site the geometric carries the headings, because it
     is the readable half; the rounded face stays a brand signature.
     Body is a humanist sans — legible at 16px in a way a geometric is not. */
  --brand:   'Fredoka', 'Trebuchet MS', system-ui, sans-serif;
  --display: 'Outfit', 'Century Gothic', system-ui, sans-serif;
  --sans: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Rhythm — deliberately several widths, not one */
  --wide:   1320px;
  --normal: 1120px;
  --text:   720px;
  --gut: clamp(22px, 5.2vw, 68px);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
:focus-visible { outline: 2px solid var(--teal-ink); outline-offset: 3px; border-radius: 2px; }

/* ---------- Paper grain ----------
   Very low-opacity turbulence so flat cream doesn't read as screen-flat. */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 200;
  opacity: .05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ---------- Type scale ---------- */
h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--ink);
  line-height: 1.12;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.15rem, 5vw, 4rem); font-weight: 500; letter-spacing: -0.018em; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.5rem); letter-spacing: -0.012em; }
h3 { font-size: clamp(1.18rem, 1.8vw, 1.5rem); }
/* .h4 lets a heading sit at the right level in the outline while looking like an h4 */
h4, .h4 { font-size: 1.06rem; font-family: var(--sans); font-weight: 700; letter-spacing: 0; }

/* The logo sets heavy caps against a light lowercase line. Emphasis inside a
   heading borrows that contrast — a lighter weight in sage, not an italic. */
.soft {
  font-style: normal;
  font-weight: 300;
  color: var(--sage);
}
h1 .soft, h2 .soft { letter-spacing: 0; }

p { max-width: 64ch; }
p + p { margin-top: 1.05em; }
strong { font-weight: 700; }

.lead {
  font-size: clamp(1.06rem, 1.35vw, 1.22rem);
  line-height: 1.65;
  color: var(--ink-75);
  max-width: 56ch;
}
.small { font-size: .93rem; line-height: 1.65; color: var(--ink-75); }
.meta {
  font-size: .74rem; letter-spacing: .17em; text-transform: uppercase;
  font-weight: 700; color: var(--ink-55);
}

/* Eyebrow with a short teal rule — the recurring structural accent */
.eyebrow {
  display: flex; align-items: center; gap: .8em;
  font-size: .745rem; letter-spacing: .19em; text-transform: uppercase;
  font-weight: 700; color: var(--teal-ink); margin-bottom: 1.4rem;
}
.eyebrow::before { content: ""; width: 30px; height: 2px; background: var(--teal); flex: none; }
.eyebrow.is-sage { color: var(--sage); }
.eyebrow.is-sage::before { background: var(--sage); }
.eyebrow.on-dark { color: var(--sand); }
.eyebrow.on-dark::before { background: var(--sun); }
.eyebrow.is-centred { justify-content: center; }

/* Hand-drawn underline, wobbled on purpose */
.drawn { position: relative; display: inline-block; }
.drawn::after {
  content: "";
  position: absolute; left: -2%; right: -2%; bottom: -.16em;
  height: .34em;
  background: no-repeat center/100% 100%
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' preserveAspectRatio='none'%3E%3Cpath d='M2 9.4C48 4.2 96 3.1 148 5.2c40 1.6 78 4.6 116 1.1' fill='none' stroke='%23F19A3A' stroke-width='4.2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.drawn.is-teal::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' preserveAspectRatio='none'%3E%3Cpath d='M2 9.4C48 4.2 96 3.1 148 5.2c40 1.6 78 4.6 116 1.1' fill='none' stroke='%231F9BA3' stroke-width='4.2' stroke-linecap='round'/%3E%3C/svg%3E"); }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--normal); margin-inline: auto; padding-inline: var(--gut); }
.wrap.is-wide { max-width: var(--wide); }
.wrap.is-text { max-width: calc(var(--text) + var(--gut) * 2); }

/* Sections vary on purpose — mechanical equal padding is the AI tell */
.sec        { padding-block: clamp(72px, 9.5vw, 136px); }
.sec.is-tall{ padding-block: clamp(88px, 13vw, 176px); }
.sec.is-tight{padding-block: clamp(52px, 6.5vw, 88px); }

.band-white { background: var(--white); }
.band-paper { background: var(--paper); }
.band-sand  { background: var(--sand); }
.band-mist  { background: var(--mist); }
/* A section that ends on a row of short columns does not need a full pad
   underneath it, or the empty ground reads as a mistake. */
.sec.ends-short { padding-bottom: clamp(40px, 5vw, 70px); }
/* The wave straight off the logo. Too light for cream text, so anything on
   it is ink, the same way the orange works. */
.band-wave  { background: var(--wave); color: var(--ink); }
.band-cream { background: var(--cream); }
.band-warm  { background: var(--cream-warm); }
.band-deep  { background: var(--forest); color: var(--cream); }
.band-sage  { background: var(--sage); color: var(--cream); }
.band-deep h1, .band-deep h2, .band-deep h3, .band-sage h2, .band-sage h3 { color: var(--cream); }
.band-deep .soft, .band-sage .soft { color: var(--sand); }
.band-deep p, .band-sage p { color: #E8DFCE; }

/* Section divider — two overlapping wave layers, the way the logo stacks its
   teal wave over the sand one. Irregular by hand, not a symmetric sine.
   The strip behind the waves is painted the colour of the section ABOVE, so the
   join reads as one continuous surface instead of a band of page background. */
.edge {
  --edge-top:   var(--cream);   /* whatever sits above this divider */
  --edge-back:  #F6E3C3;        /* the lighter wave, sitting behind */
  --edge-front: var(--sand);    /* the leading wave, matches the section below */
  --edge-h: clamp(64px, 7.2vw, 112px);
  display: block; width: 100%;
  height: var(--edge-h);
  background: var(--edge-top);
}

/* Lapping variant: drop the painted backdrop and pull the whole thing up, so the
   wave shapes themselves run over the bottom of the image above instead of
   sitting under it behind a flat strip. */
.edge.overlap {
  background: transparent;
  position: relative;
  z-index: 1;
  margin-top: calc(var(--edge-h) * -0.62);
}

/* A section that follows an overlapping wave already carries the wave's own
   height above its content, so it does not need a full section pad on top too. */
.edge.overlap + .sec { padding-top: clamp(24px, 3vw, 46px); }
.edge .w-back  { fill: var(--edge-back); }
.edge .w-front { fill: var(--edge-front); }
.edge.flip { transform: scaleX(-1); }

/* What sits ABOVE the divider */
.edge.from-white { --edge-top: var(--white); }
.edge.from-sand  { --edge-top: var(--sand); }
.edge.from-mist  { --edge-top: var(--mist); }
.edge.to-mist    { --edge-back: #F1F6F6; --edge-front: var(--mist); }
.edge.from-white.to-mist { --edge-back: #F1F6F6; }   /* white -> mist */
.edge.from-cream.to-mist { --edge-back: #EFEFE6; }   /* cream -> mist */
.edge.from-mist.to-cream { --edge-back: #EFF2EA; }   /* mist  -> cream */
.edge.from-wave  { --edge-top: var(--wave); }
.edge.to-wave    { --edge-back: #BDDCDD; --edge-front: var(--wave); }
.edge.from-wave.to-deep  { --edge-back: #44868B; }   /* wave  -> deep teal */
.edge.from-wave.to-white { --edge-back: #BCDEE1; }   /* wave  -> white */
.edge.from-white.to-deep { --edge-back: #87A6A9; }   /* white -> deep teal */
.edge.from-deep.to-cream { --edge-back: #849F99; }   /* deep  -> cream */
.edge.from-cream.to-deep { --edge-back: #849F99; }   /* cream -> deep teal */
.edge.from-deep.to-white { --edge-back: #87A6A9; }   /* deep  -> white */
.edge.from-cream { --edge-top: var(--cream); }
.edge.from-deep  { --edge-top: var(--forest); }

/* What sits BELOW it — the two wave tones */
/* Rear wave stays lighter than the leading one so it blends up into the section
   above rather than reading as a hard second band. Cream and white sit close
   together, so this layer is deliberately a soft edge, not a distinct wave. */
.edge.to-cream { --edge-back: #FCF8EF; --edge-front: var(--cream); }

/* The rear wave is the midpoint of the two sections a divider actually joins, so
   it reads as a graded step from one ground to the next rather than a stripe. */
.edge.from-sand.to-cream  { --edge-back: #F6E3C4; }   /* sand  -> cream */
.edge.from-sand.to-white  { --edge-back: #F9EAD4; }   /* sand  -> white */
.edge.from-white          { --edge-back: #F9EAD4; }   /* white -> sand  */
.edge.from-cream.to-white { --edge-back: #FCF8EF; }   /* cream -> white */
.edge.from-white.to-cream { --edge-back: #FCF8EF; }   /* white -> cream */
.edge.to-white {
  --edge-back:  #FEFBF6;
  --edge-front: var(--white);
}
.edge.to-deep {
  --edge-back:  #1D6166;
  --edge-front: var(--forest);
}
.edge.to-warm {
  --edge-back:  #FBF0DE;
  --edge-front: var(--cream-warm);
}

/* ---------- Buttons — three distinct shapes, not three pills ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .62em;
  font-family: var(--sans); font-weight: 700;
  font-size: .93rem; letter-spacing: .015em;
  padding: .95em 2.05em;
  border-radius: 3px;
  transition: transform .28s var(--ease), background-color .28s var(--ease), color .28s var(--ease), box-shadow .28s var(--ease);
}
.btn svg { flex: none; }
.btn:hover { transform: translateY(-2px); }

/* The one orange moment per page. Ink on sun = 7.05:1 */
.btn--sun {
  background: var(--sun); color: var(--ink);
  box-shadow: 0 1px 0 rgba(35,35,35,.22);
  border-radius: 3px 14px 3px 14px;
  padding: 1.02em 2.35em;
}
.btn--sun:hover { background: #E88C26; box-shadow: 0 8px 22px -10px rgba(35,35,35,.55); }

.btn--ink { background: var(--ink); color: var(--cream); }
/* Hollow on a dark ground, filling with cream on hover. */
.btn--ghost {
  color: var(--cream);
  border: 1.5px solid rgba(250, 240, 223, .55);
  position: relative; overflow: hidden; isolation: isolate;
}
.btn--ghost::before {
  content: ""; position: absolute; inset: auto 0 0 0; height: 0;
  background: var(--cream); z-index: -1; transition: height .32s var(--ease);
}
.btn--ghost:hover { color: var(--forest); border-color: var(--cream); }
.btn--ghost:hover::before { height: 100%; }
.btn--ink:hover { background: #0E0E0E; }

/* Outline with a fill that wipes up from the baseline */
.btn--line {
  color: var(--teal-ink);
  border: 1.5px solid var(--teal-ink);
  position: relative; overflow: hidden; isolation: isolate;
}
.btn--line::before {
  content: ""; position: absolute; inset: auto 0 0 0; height: 0;
  background: var(--teal-ink); z-index: -1; transition: height .32s var(--ease);
}
.btn--line:hover { color: #fff; }
.btn--line:hover::before { height: 100%; }
.btn--line.on-dark { color: var(--sand); border-color: rgba(243,214,169,.5); }
.btn--line.on-dark::before { background: var(--sand); }
.btn--line.on-dark:hover { color: var(--ink); border-color: var(--sand); }

/* Text link with the drawn rule sliding in */
.link {
  display: inline-flex; align-items: center; gap: .5em;
  font-weight: 700; font-size: .95rem; color: var(--teal-ink);
  padding-block: .5rem; padding-bottom: calc(.5rem + 3px); position: relative;
  min-height: 44px; box-sizing: border-box;
}
.link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
  background: currentColor; transform: scaleX(.34); transform-origin: left;
  transition: transform .34s var(--ease);
}
.link:hover::after { transform: scaleX(1); }
.link svg { transition: transform .34s var(--ease); }
.link:hover svg { transform: translateX(4px); }
.link.on-dark { color: var(--sand); }

.btn-row { display: flex; flex-wrap: wrap; gap: .85rem 1.1rem; align-items: center; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(11px); -webkit-backdrop-filter: blur(11px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.site-header.is-stuck { border-bottom-color: rgba(35,35,35,.11); }
.header-in {
  max-width: var(--wide); margin-inline: auto; padding: .85rem var(--gut);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}

.brand { display: flex; align-items: center; gap: .72rem; min-width: 0; }
.brand img { width: 50px; height: 50px; object-fit: contain; flex: none; }
.brand-words { display: grid; line-height: 1; }
/* The header wordmark rebuilds the logo lockup in type: the rounded cap face
   over the light geometric line, same as the mark sitting beside it. */
.brand-words b {
  font-family: var(--brand); font-weight: 600;
  font-size: clamp(.88rem, 3.6vw, 1.16rem);
  letter-spacing: .022em; text-transform: uppercase; color: var(--ink);
  white-space: nowrap;
}
.brand-words span {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(.58rem, 2.3vw, .78rem);
  letter-spacing: .1em; text-transform: none;
  color: var(--teal-ink); margin-top: .26em;
  white-space: nowrap;
}

.nav { display: flex; align-items: center; gap: clamp(1rem, 2.3vw, 2.1rem); }
.nav a {
  font-size: .885rem; font-weight: 600; color: var(--ink);
  position: relative; padding: .35rem 0;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 6px;
  background: no-repeat center/100% 100%
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5.6C22 2.4 44 1.9 68 3.3c18 1 34 2.4 50 .9' fill='none' stroke='%231F9BA3' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  opacity: 0; transform: translateY(3px); transition: opacity .26s var(--ease), transform .26s var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { opacity: 1; transform: none; }
.nav a[aria-current="page"] { color: var(--teal-ink); }
/* `.nav a` sets padding: .35rem 0, which outranks `.btn` and was flattening the
   header button's sides. Restate it here at higher specificity. */
.nav .btn { margin-left: .45rem; padding: .72em 1.5em; }
.nav .btn::after { display: none; }

.burger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; }
.burger span { display: block; width: 23px; height: 2px; background: var(--ink); position: relative; transition: background-color .2s; }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 23px; height: 2px; background: var(--ink);
  transition: transform .3s var(--ease), top .2s var(--ease);
}
.burger span::before { top: -7px; } .burger span::after { top: 7px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 900px) {
  .burger { display: flex; flex: none; }
  .header-in { gap: .75rem; }
  .nav {
    position: fixed; inset: 68px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--white); border-bottom: 1px solid rgba(35,35,35,.12);
    padding: .5rem var(--gut) 1.6rem;
    transform: translateY(-125%); transition: transform .4s var(--ease);
    max-height: calc(100dvh - 68px); overflow-y: auto;
  }
  .nav.is-open { transform: none; }
  .nav a { padding: .95rem 0; border-bottom: 1px solid rgba(35,35,35,.09); font-size: 1.05rem; }
  .nav a::after { display: none; }
  .nav .btn { margin: 1.1rem 0 0; justify-content: center; }
}

/* ---------- Home hero ----------
   Type-led and minimal. One headline, one line of fact, one button.
   The photograph bleeds off the right edge at full hero height, which does
   the impact without a single overlay, gradient or floating badge. */
/* The homepage opens on the centre itself: the aerial photograph fills the
   hero edge to edge, and the headline, the centre's own line and the invitation
   sit over its lower left on a teal ombre that fades out to the right, so the
   play area stays clear. */
.hero--photo {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: flex-end;
  min-height: clamp(560px, 88vh, 900px);
  background: var(--forest); color: var(--cream);
}
.hero-bg { position: absolute; inset: 0; z-index: -2; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 46%; }
.hero--photo::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to right, rgba(10, 44, 47, .88) 0%, rgba(10, 44, 47, .66) 30%, rgba(10, 44, 47, .18) 58%, rgba(10, 44, 47, 0) 76%),
    linear-gradient(to top, rgba(10, 44, 47, .6) 0%, rgba(10, 44, 47, 0) 42%);
}
.hero-inner {
  padding-top: clamp(96px, 12vw, 150px);
  /* room at the foot for the wave that laps over the photograph */
  padding-bottom: clamp(112px, 12vw, 176px);
}
.hero--photo h1 {
  color: var(--cream); max-width: 12ch;
  font-size: clamp(2.4rem, 5.4vw, 4.6rem);
  margin-bottom: clamp(1.1rem, 1.8vw, 1.6rem);
}
.hero--photo h1 .soft { color: var(--sand); }
.hero-tag {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(1.2rem, 1.9vw, 1.6rem);
  line-height: 1.28; letter-spacing: -.014em;
  color: #F3ECDD; max-width: 24ch;
  text-wrap: balance;
  margin-bottom: clamp(1.7rem, 2.6vw, 2.4rem);
}
.hero-tag em { font-style: normal; font-weight: inherit; }
/* the invitation is a sentence, so the button is allowed to wrap */
.hero--photo .btn { white-space: normal; text-align: left; max-width: 100%; }
@media (max-width: 760px) {
  .hero--photo { min-height: clamp(520px, 82vh, 700px); }
  .hero-bg img { object-position: 70% 50%; }
  .hero--photo::after {
    background:
      linear-gradient(to top, rgba(10, 44, 47, .94) 0%, rgba(10, 44, 47, .8) 36%, rgba(10, 44, 47, .28) 66%, rgba(10, 44, 47, .12) 100%);
  }
}

/* ---------- Homepage: the welcome ---------- */
/* The team's own words beside a photograph of one of them, so it reads as a
   greeting from people rather than a block of copy. */
.welcome {
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(30px, 6vw, 104px); align-items: center;
}
.welcome-photo { border-radius: 18px; overflow: hidden; box-shadow: 0 34px 64px -42px rgba(20, 38, 40, .5); }
.welcome-photo img { width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover; object-position: 42% 30%; display: block; }
.welcome-copy h2 { max-width: 16ch; }
.welcome-copy p { max-width: 54ch; color: var(--ink-75); font-size: 1.04rem; line-height: 1.75; }
@media (max-width: 880px) {
  .welcome { grid-template-columns: 1fr; gap: 28px; }
  .welcome-photo img { aspect-ratio: 4 / 3.4; }
}

/* ---------- Page header (inner pages) ---------- */
/* Page header. A photograph of the centre behind a deep ombre, so every inner
   page opens with the place itself rather than sliding into cream content. The
   gradient runs diagonally, heaviest at the bottom-left where the type sits and
   thinning toward the top-right so the photo still reads. */
.page-head {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--forest);
  color: var(--cream);
  /* Same vertical rhythm as a standard section on the home page, so inner pages
     do not open with noticeably more air than the home page does. */
  padding-block: clamp(66px, 8.6vw, 122px) clamp(56px, 7vw, 100px);
}
.page-head-bg { position: absolute; inset: 0; z-index: -2; }
.page-head-bg img { width: 100%; height: 100%; object-fit: cover; }
/* The ombre runs top-to-bottom, because the headline and the lead sit side by
   side low in the block — a diagonal left the right-hand column in the light. */
.page-head::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to right, rgba(18, 28, 20, .42) 0%, rgba(18, 28, 20, .10) 62%, rgba(18, 28, 20, 0) 100%),
    linear-gradient(to bottom,
      rgba(18, 28, 20, .34) 0%,
      rgba(18, 28, 20, .62) 34%,
      rgba(20, 32, 22, .86) 66%,
      rgba(20, 32, 22, .95) 100%);
}
.page-head-bg img { object-position: var(--head-pos, 50% 50%); }
.page-head h1 { color: var(--cream); max-width: 15ch; }
.page-head h1 .soft { color: var(--sand); }
.page-head .lead { margin-top: 1.6rem; color: #E4DCCB; }
.page-head .eyebrow { margin-bottom: 1.6rem; color: var(--sand); }
.page-head .eyebrow::before { background: var(--sun); }
.page-head .drawn::after { filter: none; }
.page-head--split {
  display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr);
  gap: clamp(24px, 4vw, 64px); align-items: end;
}
@media (max-width: 860px) { .page-head--split { grid-template-columns: 1fr; } }

/* The band hugs its line rather than sitting in a deep field of sand — the wave
   dividers above and below already give it room. */
/* ---------- Editorial spread (two columns, offset, one image bleeds) ---------- */
.spread {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(30px, 5vw, 86px); align-items: center;
}
.spread.is-top { align-items: start; }
.spread.is-reverse .spread-media { order: 2; }
.spread.is-offset .spread-copy { padding-top: clamp(0px, 4vw, 62px); }
@media (max-width: 900px) {
  .spread { grid-template-columns: 1fr; gap: 34px; }
  .spread.is-reverse .spread-media { order: 0; }
  .spread.is-offset .spread-copy { padding-top: 0; }
}

/* Image shapes — deliberately not one shared radius */
.shape-arch  { border-radius: 999px 999px 8px 8px; }
.shape-leaf  { border-radius: 130px 8px 130px 8px; }
.shape-wave  { border-radius: 8px 150px 8px 150px; }
.shape-flat  { border-radius: 4px; }
.shape-arch, .shape-leaf, .shape-wave, .shape-flat { overflow: hidden; }
.shape-arch img, .shape-leaf img, .shape-wave img, .shape-flat img { width: 100%; height: 100%; object-fit: cover; }


.media-stack { position: relative; }
.media-stack .under {
  position: absolute; right: -6%; bottom: -12%; width: 46%;
  border-radius: 8px; overflow: hidden;
  box-shadow: 0 22px 48px -28px rgba(35,35,35,.62);
  border: 7px solid var(--cream);
}
@media (max-width: 900px) { .media-stack .under { width: 40%; right: 0; bottom: -9%; } }

/* ---------- The philosophy quote (Our Story) ---------- */
.credo-quote {
  font-family: var(--display); font-weight: 200;
  font-size: clamp(2rem, 5vw, 4rem); line-height: 1.1;
  letter-spacing: -.026em; color: var(--cream);
}
.credo { padding-block: clamp(64px, 7vw, 100px); }

/* ---------- Homepage: the practical details ---------- */
/* A row of photo cards you move through, each one topic, with an orange
   progress line and a 01 / 03 counter underneath. One card in focus at a
   time with the next peeking in: on a desktop each card is wide, photograph
   on the left and words on the right, with arrow buttons beside the counter
   for anyone using a mouse; on a phone the photograph sits above. */
.info-sec { padding-top: clamp(40px, 5vw, 72px); }
.tips-head { margin-bottom: clamp(26px, 3vw, 40px); }
.tips-head h2 { max-width: 20ch; }
.tips-track {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: min(74%, 900px);
  gap: clamp(16px, 2vw, 28px);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none;
  margin-inline: calc(-1 * var(--gut)); padding: 4px var(--gut) 6px;
  scroll-padding-inline: var(--gut);
}
.tips-track::-webkit-scrollbar { display: none; }
.tips-track:focus-visible { outline: 2px solid var(--teal-ink); outline-offset: 4px; }
.tip {
  scroll-snap-align: start;
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: clamp(22px, 3vw, 44px); align-items: center;
}
.tip figure { border-radius: 18px; overflow: hidden; margin: 0; }
.tip img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--cream-warm); }
.tip h3 { font-family: var(--display); font-weight: 400; font-size: clamp(1.4rem, 2.2vw, 1.9rem); letter-spacing: -.015em; margin-bottom: .6rem; }
.tip p { color: var(--ink-75); font-size: 1rem; line-height: 1.65; max-width: 46ch; }
.tip p a { color: var(--teal-ink); font-weight: 600; }
.tips-bar {
  display: flex; align-items: center; gap: clamp(14px, 2vw, 26px);
  margin-top: clamp(28px, 3.4vw, 44px);
}
.tips-progress { position: relative; flex: 1; height: 2px; background: rgba(35, 35, 35, .14); border-radius: 2px; overflow: hidden; }
.tips-progress span {
  position: absolute; left: 0; top: 0; bottom: 0; width: calc(100% / 3);
  background: var(--sun); border-radius: 2px;
  transition: transform .45s var(--ease);
}
.tips-count { font-size: .8rem; font-weight: 700; letter-spacing: .18em; color: var(--ink-55); white-space: nowrap; }
.tips-count b { color: var(--ink); font-weight: 700; }
.tips-btn {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid rgba(35, 35, 35, .2); background: transparent; color: var(--ink);
  transition: background-color .25s var(--ease), color .25s var(--ease), opacity .25s;
}
.tips-btn:hover { background: var(--ink); color: var(--cream); }
.tips-btn[disabled] { opacity: .3; pointer-events: none; }
.tips-link { margin-top: clamp(22px, 2.6vw, 32px); }
@media (max-width: 760px) {
  .tips-track { grid-auto-columns: 86%; }
  .tip { grid-template-columns: 1fr; gap: 0; align-items: start; }
  .tip figure { margin-bottom: 20px; }
  .tips-btn { display: none; }
}

/* ---------- Homepage: our values ---------- */
/* Typographic rather than decorated, after the client's Bear Park example:
   the heading holds the left, and the four values run down the right beside
   one thin rule, each numbered in small orange caps, its name in the light
   display weight and a single line under it, with plenty of room between.
   The numbering echoes the 01 / 03 counter on the cards above. */
.values-wrap {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(28px, 6vw, 110px); align-items: start;
}
.values-head h2 { margin-bottom: 1.1rem; }
.values-list {
  border-left: 1px solid rgba(243, 214, 169, .28);
  padding-left: clamp(22px, 3vw, 44px);
  display: grid; gap: clamp(30px, 4vw, 52px);
}
/* a touch lighter than the brand orange, which is 4.3:1 on this ground */
.val-no {
  display: block; margin-bottom: .55rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .2em;
  color: #F5B068;
}
.values-list h3 {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.12; letter-spacing: -.018em;
  color: var(--cream); margin-bottom: .5rem;
}
.values-list p { font-size: 1rem; line-height: 1.65; color: #D5CDBE; max-width: 50ch; }
@media (max-width: 880px) { .values-wrap { grid-template-columns: 1fr; gap: 28px; } }

/* A line of the same wave the dividers are made from, drifting behind the
   section so the dark ground is not a flat rectangle. */
.credo { position: relative; overflow: hidden; }
/* On Our Story the statement sits on white, like the homepage hero, so the
   header photograph is not followed straight away by a second dark block. */
.credo--light .credo-quote { color: var(--ink); }
/* The section hangs from a label column: the eyebrow holds the left, where the
   header's headline sits, and everything the centre wrote runs down the right.
   The eyebrow travels with the reader as the section scrolls past, so the
   column is doing something rather than standing empty. */
.philo {
  display: grid;
  grid-template-columns: minmax(0, .34fr) minmax(0, 1fr);
  gap: clamp(24px, 4.4vw, 80px);
}
.philo-label .eyebrow { margin-top: clamp(.5rem, 1.3vw, 1.15rem); }
/* A size under the header's headline, so the header stays the biggest thing
   on the page and the statement reads as the next step down. */
.credo--light .credo-quote {
  font-size: clamp(1.9rem, 3.7vw, 3.35rem);
  line-height: 1.12; margin-top: 0;
}
.credo--light .saying { grid-template-columns: 1fr; gap: .45rem; }
@media (max-width: 880px) {
  .philo { grid-template-columns: 1fr; gap: 14px; }
  .philo-label .eyebrow { margin-top: 0; }
}
.credo--light .credo-quote .soft { color: var(--teal-ink); }
.credo--light .saying { border-top-color: rgba(35, 35, 35, .16); }
.credo--light .saying-mi { color: var(--teal-ink); }
.credo--light .saying-reading { color: var(--ink-55); }
.credo--light .saying-cols p { color: var(--ink-75); }
.credo--light .saying-note { color: var(--ink-55); }
.credo--light .credo-line { stroke: var(--teal); opacity: .14; }

/* The everyday rhythms take the page's one deep band, so the order runs white,
   deep teal, cream, sage, the same as the homepage. The panel's photograph
   needs a deeper shadow to separate from a dark ground. */
.space-deep { position: relative; }
.space-deep .layer-photo { box-shadow: 0 40px 70px -36px rgba(0, 0, 0, .7); }
.space-deep .panel { box-shadow: 0 30px 60px -40px rgba(0, 0, 0, .55); }
/* A white panel on a dark band is a light surface again, so it takes back the
   ink the band hands its own type. */
.band-deep .panel h2, .band-deep .panel h3, .band-deep .panel h4,
.band-sage .panel h2, .band-sage .panel h3, .band-sage .panel h4 { color: var(--ink); }
.band-deep .panel p, .band-sage .panel p { color: var(--ink-75); }
.credo > .wrap { position: relative; z-index: 1; }
/* It runs off both sides of the section and never ends inside it, so the
   section's own overflow clip cannot leave a line stopping in mid air. */
.credo-line {
  position: absolute; left: -6%; top: 20%;
  width: 112%; height: 56%;
  /* img, svg, video are capped at max-width:100% further up, which clamped this
     to the section width and left the line stopping short of the right edge. */
  max-width: none;
  fill: none; stroke: var(--wave); stroke-width: 1.4; opacity: .22;
  pointer-events: none;
  /* and it fades out at both ends, so it can never read as a cut line. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
}
.credo-line path:last-child { opacity: .55; }
@media (prefers-reduced-motion: no-preference) {
  .credo-line { animation: credoDrift 34s ease-in-out infinite alternate; }
  @keyframes credoDrift {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-3%, 1.4%, 0); }
  }
}

/* ---------- Panels ---------- */
/* White, paper and cream are all pale warm neutrals, so alternating them band
   by band read as noise rather than rhythm. The lower half of the page is one
   cream field instead, and the contrast moves into objects sitting on it: a
   white panel for the programmes and another for the video, with the
   photographs between them. */
.panel {
  background: var(--white);
  border-radius: clamp(14px, 2.1vw, 32px);
  padding: clamp(32px, 4.2vw, 68px) clamp(22px, 3.2vw, 56px) clamp(36px, 4.4vw, 70px);
}

/* ---------- Feature list with drawn ticks ---------- */
.ticks { display: grid; gap: .8rem; margin-top: 1.5rem; }
.ticks li { display: grid; grid-template-columns: 22px 1fr; gap: .8rem; align-items: start; font-size: .97rem; }
.ticks svg { margin-top: .42em; color: var(--teal); }
.ticks.on-dark svg { color: var(--sun); }

/* ---------- Daily rhythm timeline ---------- */
.rhythm { display: grid; gap: 0; max-width: 780px; }
.rhythm li {
  display: grid; grid-template-columns: clamp(88px, 12vw, 124px) 1fr;
  gap: clamp(16px, 3vw, 34px);
  padding: 1.35rem 0; border-top: 1px solid rgba(35,35,35,.14);
  align-items: start;
}
.rhythm li:last-child { border-bottom: 1px solid rgba(35,35,35,.14); }
.rhythm time {
  font-family: var(--display); font-weight: 600; font-size: 1.02rem;
  color: var(--teal-ink); letter-spacing: .01em; padding-top: .12em;
}
.rhythm h4, .rhythm .h4 { margin-bottom: .3rem; }
.rhythm p { font-size: .95rem; color: var(--ink-75); }
/* the same list on a dark band: sand labels, softened cream text, pale rules */
.band-deep .rhythm li { border-color: rgba(243, 214, 169, .2); }
.band-deep .rhythm time { color: var(--sand); }
.band-deep .rhythm p, .band-deep .callout p { color: #D5CDBE; }

/* ---------- Team ---------- */








/* ---------- Our story: the philosophy ---------- */
/* The centre's own document puts the statement, the whakatauki and the Kaiako
   paragraph all under one heading, "our philosophy", in that order. So does
   this: the statement at display scale, the whakatauki beneath it behind a
   hairline, and the paragraph running as two columns so nothing is left
   hanging in an empty quarter of the section. */
.saying {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: clamp(10px, 2.4vw, 42px);
  align-items: baseline;
  margin-top: clamp(30px, 3.8vw, 54px);
  padding-top: clamp(24px, 2.9vw, 40px);
  border-top: 1px solid rgba(243, 214, 169, .26);
}
.saying-mi {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(1.35rem, 2.5vw, 2.15rem); line-height: 1.16;
  letter-spacing: -.016em; color: var(--sand);
  text-wrap: balance;
}
.saying-reading {
  font-style: italic; color: #CFC7B9;
  font-size: clamp(.98rem, 1.2vw, 1.1rem);
}
.saying-cols {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(22px, 3.6vw, 68px);
  margin-top: clamp(26px, 3.2vw, 44px);
}
.saying-cols p { color: #E8DFCE; font-size: .99rem; line-height: 1.65; }
.saying-note {
  margin-top: clamp(22px, 2.6vw, 34px);
  max-width: 62ch; color: #CFC7B9;
  font-size: .96rem; line-height: 1.65;
}
.saying-link { margin-top: clamp(20px, 2.4vw, 30px); }
@media (max-width: 760px) {
  .saying { grid-template-columns: 1fr; gap: .4rem; }
  .saying-cols { grid-template-columns: 1fr; gap: .95rem; }
}

/* The photograph is the base layer and the white box sits on top of it,
   overlapping its edge. The box keeps even padding all round, and the
   photograph shows the same amount above and below it on both blocks, so the
   pair reads as one device mirrored rather than two boxes that happen to
   overlap. */
.layer {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: stretch;
}
.layer + .layer { margin-top: clamp(48px, 6vw, 92px); }
.layer-photo {
  grid-column: 6 / -1; grid-row: 1;
  position: relative; overflow: hidden;
  border-radius: 14px;
  min-height: clamp(320px, 34vw, 500px);
  box-shadow: 0 34px 64px -40px rgba(20, 38, 40, .55);
}
.layer-photo img {
  position: absolute; left: 0; top: -28px;
  width: 100%; height: calc(100% + 56px);
  object-fit: cover; display: block;
}
.layer-panel {
  grid-column: 1 / 8; grid-row: 1;
  position: relative; z-index: 1;
  align-self: center;
  margin-block: clamp(34px, 4.4vw, 70px);
}
.layer--flip .layer-photo { grid-column: 1 / 8; }
.layer--flip .layer-panel { grid-column: 6 / -1; }
@media (max-width: 880px) {
  .layer { grid-template-columns: 1fr; }
  .layer-photo, .layer--flip .layer-photo { grid-column: 1; grid-row: 1; min-height: 240px; }
  /* stacked, the box rides up over the bottom of the photograph */
  .layer-panel, .layer--flip .layer-panel {
    grid-column: 1; grid-row: 2;
    margin: -48px 14px 0;
  }
}

/* ---------- Our story: at a glance ---------- */
/* Four figures a parent asks about first, set large on the light ground
   between the deep band and the sage close. Each sits under a hairline that
   draws across as it arrives. */
.figures {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(22px, 3.6vw, 64px);
}
.figures > li { position: relative; padding-top: clamp(20px, 2.2vw, 30px); }
.figures > li::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: rgba(35, 35, 35, .18);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.1s var(--ease) .15s;
}
.figures > li.is-in::before { transform: scaleX(1); }
/* the same short orange bar the homepage stages carry, set on the hairline */
.figures > li::after {
  content: ""; position: absolute; top: -1px; left: 0;
  width: 26px; height: 3px; border-radius: 2px; background: var(--sun);
}
.figure {
  font-family: var(--display); font-weight: 200;
  font-size: clamp(2.6rem, 5vw, 4.4rem); line-height: 1;
  letter-spacing: -.03em; color: var(--teal-ink);
  margin-bottom: clamp(12px, 1.4vw, 20px);
}
.figure-text { font-size: .97rem; line-height: 1.6; color: var(--ink-75); max-width: 30ch; }
.figure-link { margin-top: .9rem; }
@media (max-width: 760px) { .figures { grid-template-columns: 1fr; row-gap: 30px; } }

/* Secondary section headings step down, so every h2 on a page is not the same
   size and the page has somewhere to put emphasis. */
.h2-sub { font-size: clamp(1.4rem, 2.4vw, 2rem); }

/* Fifteen portraits is a lot of scrolling on a phone, so they collapse behind a
   toggle there. Open by default in the markup, closed by JS only on small
   screens — with no JS everyone still sees the whole team. */
.team-reveal > summary {
  display: none;
  cursor: pointer; list-style: none;
  font-weight: 700; font-size: .95rem; color: var(--teal-ink);
  padding: .85rem 0;
}
.team-reveal > summary::-webkit-details-marker { display: none; }
.team-reveal > summary span {
  display: inline-flex; align-items: center; gap: .55em;
  border-bottom: 1.5px solid currentColor; padding-bottom: 3px;
}
.team-reveal > summary span::after {
  content: ""; width: 9px; height: 9px; border-right: 1.8px solid currentColor;
  border-bottom: 1.8px solid currentColor; transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .25s var(--ease);
}
.team-reveal[open] > summary span::after { transform: rotate(-135deg) translate(-3px, -3px); }
@media (max-width: 760px) {
  .team-reveal > summary { display: block; }
  .team-reveal[open] > .team-grid { margin-top: .4rem; }
}

/* The team, with the centre's own portraits. A plain grid of faces reads better
   here than any layout trick — fifteen people is the point. */
.team-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 36px) clamp(14px, 1.8vw, 26px);
}
.team-grid img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: 90px 90px 6px 6px;
  background: var(--cream);
  margin-bottom: .75rem;
}
.team-grid h3 { font-size: 1rem; line-height: 1.25; margin-bottom: .2rem; }
/* Roles run to one or two lines ("Teacher" vs "ECE Teacher · Person Responsible"),
   which left the cards at different heights. Reserve two lines for all of them. */
.team-grid .meta {
  font-size: .66rem; letter-spacing: .09em; color: var(--teal-ink);
  line-height: 1.45; min-height: 2.9em;
}
@media (max-width: 1040px) { .team-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (max-width: 780px)  { .team-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 480px)  { .team-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* The English reading of the whakataukī, kept quiet under it. */
.translation {
  margin-top: .5rem;
  font-style: italic;
  color: var(--ink-55);
  font-size: 1.02rem;
}

/* ---------- Values ---------- */
.values { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(20px, 3vw, 44px); }
/* Four tones so the row reads as a deliberate sequence: the wave at full
   strength, softened, the sun, then ink. */
.values > li { padding-top: 1.4rem; border-top: 2px solid var(--teal); }
.values > li:nth-child(2) { border-top-color: var(--wave); }
.values > li:nth-child(3) { border-top-color: var(--sun); }
.values > li:nth-child(4) { border-top-color: var(--ink); }
.values h3 { font-size: 1.28rem; margin-bottom: .55rem; }
.values p { font-size: .94rem; color: var(--ink-75); }
@media (max-width: 820px) { .values { grid-template-columns: 1fr 1fr; } }
@media (max-width: 440px) { .values { grid-template-columns: 1fr; } }

/* ---------- Photo strip — varied widths, not a uniform grid ---------- */
/* Four photographs of one size in a row was a contact sheet. They are now a
   mosaic: one tall frame holding the left and three filling the right. The
   pictures carry it on their own, with nothing written over them. */
.strip {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: clamp(132px, 16.5vw, 218px);
  gap: clamp(8px, 1vw, 14px);
}
.strip figure {
  position: relative; overflow: hidden;
  border-radius: 10px;
  isolation: isolate;
}
.strip figure:nth-child(1) { grid-column: span 5; grid-row: span 2; border-radius: 120px 10px 10px 10px; }
.strip figure:nth-child(2) { grid-column: span 7; }
.strip figure:nth-child(3) { grid-column: span 4; }
.strip figure:nth-child(4) { grid-column: span 3; border-radius: 10px 10px 90px 10px; }
.strip img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.1s var(--ease);
}
.strip figure:hover img { transform: scale(1.045); }
/* A near-square photo in a portrait slot crops from the sides, so hold the crop
   left of centre to keep both faces in frame. */
.strip img[src*="teacher"]  { object-position: 40% 28%; }
.strip img[src*="watering"] { object-position: 50% 42%; }
@media (max-width: 860px) {
  .strip { grid-auto-rows: clamp(120px, 24vw, 190px); }
  .strip figure:nth-child(1) { grid-column: span 12; grid-row: span 1; border-radius: 90px 10px 10px 10px; }
  .strip figure:nth-child(2) { grid-column: span 12; }
  .strip figure:nth-child(3) { grid-column: span 7; }
  .strip figure:nth-child(4) { grid-column: span 5; border-radius: 10px 10px 90px 10px; }
}

/* ---------- Gallery ---------- */
.gal-group + .gal-group { margin-top: clamp(58px, 8vw, 108px); }
.gal-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap; margin-bottom: 2.1rem;
  border-bottom: 1px solid rgba(35,35,35,.16); padding-bottom: 1rem;
}
.gal-head h2 { font-size: clamp(1.6rem, 2.9vw, 2.3rem); }
.gal-head p { font-size: .93rem; color: var(--ink-75); max-width: 42ch; }

.gal { display: grid; gap: 12px; }
.gal-a { grid-template-columns: 1.6fr 1fr; }
.gal-a figure:nth-child(1) { grid-row: span 2; }
.gal-b { grid-template-columns: 1fr 1fr 1fr; }
.gal-b figure:nth-child(3) { grid-column: span 2; }
.gal figure { overflow: hidden; position: relative; background: var(--sand); }
.gal img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.gal figure:hover img { transform: scale(1.04); }
.gal figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.4rem 1.1rem .95rem;
  background: linear-gradient(to top, rgba(35,35,35,.82), rgba(35,35,35,0));
  color: #fff; font-size: .82rem; letter-spacing: .02em;
  opacity: 0; transform: translateY(8px); transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.gal figure:hover figcaption, .gal figure:focus-within figcaption { opacity: 1; transform: none; }
.gal-a figure:nth-child(1) img { aspect-ratio: 4/5; }
.gal-a figure:nth-child(2) img, .gal-a figure:nth-child(3) img { aspect-ratio: 4/2.7; }
.gal-b img { aspect-ratio: 4/3; }
.gal-b figure:nth-child(3) img { aspect-ratio: 8/3.2; }
@media (max-width: 760px) {
  .gal-a, .gal-b { grid-template-columns: 1fr 1fr; }
  .gal-a figure:nth-child(1) { grid-row: auto; }
  .gal-b figure:nth-child(3) { grid-column: span 2; }
  .gal img { aspect-ratio: 1/1 !important; }
  .gal-b figure:nth-child(3) img { aspect-ratio: 2/1 !important; }
}

/* ---------- Video ---------- */
.video-frame {
  position: relative; aspect-ratio: 16/9; overflow: hidden;
  border-radius: 6px 90px 6px 90px; background: var(--ink);
}
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Steps ---------- */
.steps { counter-reset: s; display: grid; gap: 0; }
.steps li {
  counter-increment: s; position: relative;
  padding: 1.7rem 0 1.7rem clamp(56px, 7vw, 86px);
  border-top: 1px solid rgba(35,35,35,.15);
}
.steps li:last-child { border-bottom: 1px solid rgba(35,35,35,.15); }
.steps li::before {
  content: counter(s, decimal-leading-zero);
  position: absolute; left: 0; top: 1.75rem;
  font-family: var(--display); font-size: 1.02rem; font-weight: 700;
  color: var(--teal); letter-spacing: .06em;
}
.steps h3 { font-size: 1.25rem; margin-bottom: .42rem; }
.steps p { font-size: .97rem; color: var(--ink-75); }

/* ---------- Form — custom fields, no framework defaults ---------- */
.form { display: grid; gap: 1.35rem; }
.field { display: grid; gap: .42rem; }
.field label { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-75); }
.field input, .field select, .field textarea {
  width: 100%; background: transparent;
  border: 0; border-bottom: 1.5px solid rgba(35,35,35,.3);
  padding: .7rem .1rem; font-size: 1rem; border-radius: 0;
  transition: border-color .26s var(--ease), background-color .26s var(--ease);
}
.field textarea { min-height: 122px; resize: vertical; line-height: 1.6; }
.field select {
  appearance: none; padding-right: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='8' viewBox='0 0 13 8'%3E%3Cpath d='M1 1l5.5 5.5L12 1' fill='none' stroke='%231A7375' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .35rem center;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-bottom-color: var(--teal-ink); background: rgba(31,155,163,.055);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-55); opacity: .75; }
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.35rem; }
@media (max-width: 620px) { .field-pair { grid-template-columns: 1fr; } }
.form-note { font-size: .84rem; color: var(--ink-55); }
.form-status { font-size: .93rem; font-weight: 600; color: var(--sage); display: none; }
.form-status.is-on { display: block; }

/* ---------- Contact detail list ---------- */
.details { display: grid; gap: 1.5rem; }
.details > div { display: grid; grid-template-columns: 26px 1fr; gap: 1rem; align-items: start; }
.details svg { color: var(--teal); margin-top: .2em; }
.details h4, .details .h4 { margin-bottom: .18rem; }
.details a { color: var(--teal-ink); font-weight: 600;
  display: inline-block; padding-block: .55rem; }
.details a:hover { text-decoration: underline; text-underline-offset: 3px; }
.details p, .details address { font-style: normal; font-size: .97rem; color: var(--ink-75); }

.map-frame { overflow: hidden; border-radius: 6px; border: 1px solid rgba(35,35,35,.14); background: var(--white); }
.map-frame iframe { width: 100%; height: clamp(280px, 42vw, 430px); border: 0; display: block; filter: saturate(.86); }

/* ---------- Contact: where to find us ---------- */
/* The heading and the two routes sit beside the map, which matches their
   height. Underneath, the details run across one white panel, so the section
   is two even rows instead of one short column beside a very tall one. */
.contact-map { height: 100%; }
.contact-map iframe { height: 100%; min-height: clamp(280px, 30vw, 400px); }
#tour .spread { align-items: stretch; }
.contact-panel { margin-top: clamp(40px, 5vw, 76px); }
/* the contact section is the page's sage close, so its small print goes light */
.cta-final .small { color: #D5CDBE; }
.details--four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6rem 1.4rem; }
@media (max-width: 980px) { .details--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .details--four { grid-template-columns: 1fr; } }

/* ---------- Callout ---------- */
.callout {
  border-left: 3px solid var(--sun);
  background: var(--white);
  box-shadow: 0 1px 0 rgba(35,35,35,.06);
  padding: 1.5rem 1.7rem;
  border-radius: 0 6px 6px 0;
}
.callout h4, .callout .h4 { margin-bottom: .4rem; }
.callout p { font-size: .95rem; color: var(--ink-75); }
.band-white .callout, .band-paper .callout { background: var(--cream-warm); box-shadow: none; }
.band-deep .callout, .band-sage .callout { background: rgba(255,255,255,.07); box-shadow: none; }
.band-deep .callout h4, .band-sage .callout h4,
.band-deep .callout .h4, .band-sage .callout .h4 { color: var(--cream); }

/* ---------- Final CTA ---------- */
/* A section that carries straight on from the one above it, sharing a ground
   with no divider between. Without this their two section pads stack, which
   left 190px of empty cream between the programmes and the gallery. */
.sec.joins-above { padding-top: 0; }

/* ---------- Closing call to action as a card ---------- */
/* The close is a pale mist card rather than a band. It sits on the white of
   the section above and its lower edge laps down over the dark footer, so it
   reads as an object resting across the seam. The footer gets the extra room
   only on pages that have the card. */
.cta-card-sec {
  --lap: clamp(64px, 8vw, 112px);
  position: relative; z-index: 2; padding-bottom: 0;
  /* the white stops where the footer starts, so the dark shows beside the
     card's lower edge instead of being painted over */
  background: linear-gradient(to bottom, var(--white) calc(100% - var(--lap)), transparent calc(100% - var(--lap)));
}
.cta-card {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--mist);
  border-radius: clamp(20px, 2.6vw, 34px);
  padding: clamp(46px, 6vw, 88px) clamp(22px, 5vw, 84px);
  text-align: center;
  margin-bottom: calc(-1 * var(--lap));
  box-shadow: 0 46px 90px -50px rgba(20, 38, 40, .55);
}
.cta-card .lead { margin-inline: auto; max-width: 52ch; }
.cta-card-line {
  position: absolute; z-index: -1; left: -6%; top: 26%;
  width: 112%; height: 62%; max-width: none;
  fill: none; stroke: var(--teal); stroke-width: 1.4; opacity: .16;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
main:has(.cta-card-sec) + .site-footer {
  padding-top: calc(clamp(64px, 8vw, 112px) + clamp(80px, 8vw, 100px));
}

.cta-final { position: relative; overflow: hidden; }

/* The closing CTA is the last thing above the near-black footer, so it steps
   down through the teal rather than sitting flat, with a soft warm lift from
   the top so the heading has something to sit against. The top stop is held
   dark enough that the small eyebrow, the lead and the outline button all
   clear 4.5:1 against it. */
.band-sage.cta-final {
  background:
    radial-gradient(125% 85% at 50% -8%, rgba(243,214,169,.07) 0%, rgba(243,214,169,0) 60%),
    linear-gradient(180deg, #145F65 0%, #125860 40%, #10525A 72%, var(--forest) 100%);
}
.cta-final .wrap { position: relative; z-index: 2; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: #D9D2C4; padding-block: clamp(56px, 7vw, 88px) 0; }
.footer-grid {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.25fr;
  gap: clamp(28px, 4vw, 56px);
}
.site-footer h4, .site-footer .footer-h { font-family: var(--sans); font-weight: 700; line-height: 1.12; color: var(--sand); font-size: .76rem; letter-spacing: .17em; text-transform: uppercase; margin-bottom: 1.15rem; }
.site-footer a { color: #D9D2C4; }
.site-footer a:hover { color: var(--sand); }
.footer-logo img { width: 128px; margin-bottom: 1.2rem; }
.footer-links { display: grid; font-size: .95rem; }
/* Footer links are a list of tap targets, so they carry their own height
   rather than relying on the text alone. */
.footer-links a, .footer-links span { display: block; padding-block: .64rem; }
.footer-contact a, .footer-contact span { display: block; padding-block: .64rem; }
.footer-contact { display: grid; font-size: .95rem; font-style: normal; }
.socials { display: flex; gap: .7rem; margin-top: 1.2rem; }
.socials a {
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid rgba(217,210,196,.28); border-radius: 3px;
  transition: background-color .26s var(--ease), border-color .26s var(--ease), color .26s var(--ease);
}
.socials a:hover { background: var(--sand); border-color: var(--sand); color: var(--ink); }
.footer-base {
  margin-top: clamp(38px, 5vw, 60px); padding-block: 1.5rem;
  border-top: 1px solid rgba(217,210,196,.17);
  display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; justify-content: space-between;
  font-size: .8rem; color: rgba(217,210,196,.62);
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- Reveal on scroll ---------- */
/* Content is visible by default. Only once JS has confirmed it is running
   do we hide these to animate them in, so a script failure never blanks a page. */
.js .rise { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .rise.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .rise { opacity: 1; transform: none; } }

/* ---------- Utilities ---------- */
.stack-sm > * + * { margin-top: .8rem; }
.stack   > * + * { margin-top: 1.25rem; }
.stack-lg > * + * { margin-top: 2.2rem; }
.mt-lg { margin-top: clamp(34px, 4.6vw, 62px); }
.mt-md { margin-top: clamp(22px, 3vw, 38px); }
/* Read by screen readers, not shown. For section headings that would only
   repeat what the page heading already says. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--ink); color: var(--cream); padding: .8rem 1.2rem;
}
.skip:focus { left: 0; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ==========================================================================
   Coastal line icons (hand-drawn set). Masked so they take the palette
   colour rather than sitting on the page as flat black artwork.
   Used sparingly — stage marks, one section heading, two watermarks.
   ========================================================================== */
.ic {
  display: inline-block; flex: none;
  width: var(--ic, 32px); height: var(--ic, 32px);
  background-color: currentColor;
  -webkit-mask: var(--ic-src) no-repeat center / contain;
          mask: var(--ic-src) no-repeat center / contain;
}
.ic-shell        { --ic-src: url("../images/icons/shell.svg"); }
.ic-bucket-spade { --ic-src: url("../images/icons/bucket-spade.svg"); }
.ic-kite         { --ic-src: url("../images/icons/kite.svg"); }
.ic-sunrise      { --ic-src: url("../images/icons/sunrise.svg"); }
.ic-flax         { --ic-src: url("../images/icons/flax.svg"); }
.ic-gull         { --ic-src: url("../images/icons/gull.svg"); }
.ic-nikau        { --ic-src: url("../images/icons/nikau.svg"); }
.ic-starfish     { --ic-src: url("../images/icons/starfish.svg"); }
.ic-fish         { --ic-src: url("../images/icons/fish.svg"); }
.ic-sailboat     { --ic-src: url("../images/icons/sailboat.svg"); }

/* Stage mark above each programme number */
.prog-mark { --ic: clamp(40px, 4.6vw, 56px); color: var(--teal); display: block; margin-bottom: 1rem; }
.band-sand .prog-mark, .band-warm .prog-mark { color: var(--sage); }

/* Icon sitting beside a section eyebrow */
.eyebrow .ic { --ic: 20px; }

/* Heading mark — sits above an h2, replaces nothing, adds a beat */
.head-mark { --ic: clamp(34px, 3.6vw, 46px); color: var(--teal); display: block; margin-bottom: 1.1rem; }
.band-deep .head-mark, .band-sage .head-mark { color: var(--sand); }

/* Small footer flourish */
.footer-mark { --ic: 34px; color: rgba(243,214,169,.45); margin-top: 1.4rem; }

/* Very narrow phones: the stacked wordmark is what overflows, so tighten it. */
@media (max-width: 430px) {
  .brand img { width: 42px; height: 42px; }
  .header-in { padding-inline: 18px; }
}

/* ==========================================================================
   Lightbox — a panel over a dimmed page, not a full-screen takeover.
   Built by main.js, so with no JS the images stay ordinary images.
   ========================================================================== */
.lb-trigger { cursor: zoom-in; }
.lb-trigger:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }

.lb {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center;
  padding: clamp(16px, 4vw, 52px);
  background: rgba(20, 26, 21, .62);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.lb[hidden] { display: none; }

.lb-panel {
  position: relative;
  width: min(940px, 100%);
  max-width: 100%;
  background: var(--cream);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 34px 80px -28px rgba(0, 0, 0, .6);
}

/* aspect-ratio gives the stage a definite height, which is what lets the
   absolutely-positioned image size itself reliably. */
.lb-stage {
  position: relative;
  aspect-ratio: var(--lb-ar, 3 / 2);
  background: var(--cream-warm);
}
.lb-stage img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: contain; object-position: center;
  opacity: 0; transition: opacity .28s var(--ease);
}
.lb-stage img.is-ready { opacity: 1; }

.lb-meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(12px, 2vw, 26px);
  padding: clamp(12px, 1.6vw, 17px) clamp(14px, 2vw, 22px);
  border-top: 1px solid var(--sand-deep);
}
.lb-cap { font-size: .92rem; line-height: 1.5; color: var(--ink-75); margin: 0; max-width: 60ch; }
.lb-nav { display: flex; align-items: center; gap: .5rem; flex: none; }
.lb-count {
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 700; color: var(--ink-55); min-width: 5.5em; text-align: center;
}

.lb-btn {
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 3px;
  color: var(--ink); background: transparent;
  border: 1px solid rgba(35, 35, 35, .2);
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.lb-btn:hover { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.lb-btn:focus-visible { outline: 2px solid var(--teal-ink); outline-offset: 3px; }
.lb-btn[hidden] { display: none; }

.lb-close {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  background: rgba(250, 240, 223, .92);
  border-color: rgba(35, 35, 35, .16);
}

@media (max-width: 560px) {
  .lb-meta { flex-direction: column; align-items: flex-start; }
  .lb-nav { align-self: flex-end; }
}
@media (prefers-reduced-motion: reduce) { .lb-stage img { transition: none; } }

/* ==========================================================================
   Centre news
   ========================================================================== */
.post-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(26px, 4.4vw, 64px);
  align-items: center;
}
.post-media { display: block; overflow: hidden; border-radius: 8px 140px 8px 140px; }
.post-media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 1.1s var(--ease); }
.post-feature:hover .post-media img { transform: scale(1.035); }
.post-meta {
  font-size: .72rem; letter-spacing: .15em; text-transform: uppercase;
  font-weight: 700; color: var(--teal-ink); margin-bottom: .9rem;
}
.post-body h3 { font-size: clamp(1.35rem, 2.2vw, 1.9rem); line-height: 1.2; margin-bottom: .8rem; }
.post-body h3 a { background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1.5px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size .35s var(--ease); }
.post-feature:hover .post-body h3 a { background-size: 100% 1.5px; }
.post-body p { color: var(--ink-75); }
@media (max-width: 860px) { .post-feature { grid-template-columns: 1fr; } }

/* Article body */
.article > * + * { margin-top: 1.15rem; }
.article-lead {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(1.2rem, 1.9vw, 1.5rem); line-height: 1.5;
  color: var(--ink); max-width: none;
}
.article h2 {
  margin-top: clamp(34px, 4.4vw, 58px);
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.35rem, 2.5vw, 1.95rem); line-height: 1.18;
  letter-spacing: -.012em;
}
.article h3 { margin-top: clamp(26px, 3vw, 38px); font-size: 1.2rem; }
.article ul:not(.rhythm), .article ol { padding-left: 1.15rem; }
.article ul:not(.rhythm) li, .article ol li { margin-top: .5rem; color: var(--ink-75); }
.article ul:not(.rhythm) li::marker { color: var(--teal-ink); }
.article blockquote {
  margin-top: clamp(26px, 3vw, 38px); padding-left: clamp(18px, 2.2vw, 30px);
  border-left: 2px solid var(--sand);
  font-family: var(--display); font-size: clamp(1.1rem, 1.9vw, 1.35rem);
  line-height: 1.45; color: var(--sage);
}
.article a:not(.link) { color: var(--teal-ink); font-weight: 700;
  box-shadow: inset 0 -1px 0 rgba(26,115,117,.45); }
.article a:not(.link):hover { box-shadow: inset 0 -2px 0 currentColor; }
.article img { width: 100%; height: auto; margin-top: clamp(26px, 3vw, 38px); border-radius: 6px 78px 6px 78px; }
.article p { max-width: none; }
.article-faq { margin-top: clamp(20px, 2.6vw, 32px); max-width: none; }
.article-faq time { font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; font-weight: 700; }

/* Post list below the feature */
.post-rule {
  border: 0; height: 1px; background: rgba(35,35,35,.13);
  margin: clamp(46px, 6vw, 78px) 0 clamp(34px, 4.4vw, 52px);
}
.post-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(26px, 3.4vw, 46px) clamp(22px, 3vw, 40px);
}
.post-card { display: flex; flex-direction: column; }
.post-card .post-thumb { display: block; overflow: hidden; border-radius: 6px 78px 6px 78px; margin-bottom: 1.15rem; }
.post-card:nth-child(even) .post-thumb { border-radius: 78px 6px 78px 6px; }
.post-card .post-thumb img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform 1s var(--ease);
}
.post-card:hover .post-thumb img { transform: scale(1.045); }
.post-card .post-meta { font-size: .68rem; margin-bottom: .6rem; }
.post-card h3 { font-size: 1.12rem; line-height: 1.28; margin-bottom: .55rem; }
.post-card h3 a { background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1.4px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size .35s var(--ease); }
.post-card:hover h3 a { background-size: 100% 1.4px; }
.post-card p { font-size: .92rem; line-height: 1.6; color: var(--ink-75); }
@media (max-width: 860px) {
  .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .post-grid { grid-template-columns: 1fr; gap: 34px; }
}

.link-inline {
  color: var(--teal-ink); font-weight: 700;
  box-shadow: inset 0 -1px 0 rgba(26,115,117,.45);
  transition: box-shadow .3s var(--ease), color .3s var(--ease);
}
.link-inline:hover { color: var(--sage); box-shadow: inset 0 -2px 0 currentColor; }

/* Single combined gallery: masonry columns, each photo keeps its own shape */
.gal-mosaic {
  display: block;
  column-count: 3;
  column-gap: clamp(10px, 1.1vw, 16px);
}
.gal-mosaic figure {
  break-inside: avoid;
  margin-bottom: clamp(10px, 1.1vw, 16px);
  display: block;
}
.gal-mosaic img { height: auto; aspect-ratio: auto; display: block; }
/* Force the split so the three columns finish level rather than in a staircase.
   The photo order is sequenced so these four-item columns come out near-equal. */
@media (min-width: 901px) {
  .gal-mosaic figure:nth-child(6), .gal-mosaic figure:nth-child(11) { break-after: column; }
}
@media (max-width: 900px) { .gal-mosaic { column-count: 2; } }
@media (max-width: 520px) { .gal-mosaic { column-count: 1; } }
@media (max-width: 760px) { .gal-mosaic img { aspect-ratio: auto !important; } }

/* Intro line above the gallery, carrying the copy the section headings used to */
.gal-intro {
  max-width: 62ch; color: var(--ink-75); font-size: 1.02rem;
  margin-bottom: clamp(28px, 3.4vw, 46px);
}
.gal-intro span { color: var(--teal-ink); font-weight: 700; }

/* The photos open in a lightbox, so say so */
.gal figure { cursor: zoom-in; }
.gal-mosaic figure::after {
  content: ""; position: absolute; top: 12px; right: 12px;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(35,35,35,.55) no-repeat center/13px 13px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 1H1v5M10 15h5v-5M1 15l5-5M15 1l-5 5'/%3E%3C/svg%3E");
  opacity: 0; transform: scale(.85);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
  pointer-events: none;
}
.gal-mosaic figure:hover::after, .gal-mosaic figure:focus-within::after { opacity: 1; transform: none; }

/* On touch there is no hover, so the captions sit under the photo instead */
@media (hover: none), (max-width: 760px) {
  .gal-mosaic figure { background: transparent; }
  .gal-mosaic figcaption {
    position: static; opacity: 1; transform: none;
    background: none; color: var(--ink-75);
    padding: .6rem .1rem 0; font-size: .84rem; line-height: 1.45;
  }
  .gal-mosaic figure::after { display: none; }
}

/* ==========================================================================
   FAQ — the questions asked on every tour, answered before the tour
   ========================================================================== */
.faq { border-top: 1px solid rgba(35,35,35,.15); }
.faq details {
  border-bottom: 1px solid rgba(35,35,35,.15);
}
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: baseline; gap: 1rem;
  padding: 1.35rem 2.6rem 1.35rem 0;
  position: relative;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.02rem, 1.5vw, 1.18rem); line-height: 1.35;
  transition: color .25s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--teal-ink); }
.faq summary::after {
  content: ""; position: absolute; right: 4px; top: 1.75rem;
  width: 11px; height: 11px;
  border-right: 2px solid var(--teal); border-bottom: 2px solid var(--teal);
  transform: rotate(45deg);
  transition: transform .3s var(--ease);
}
.faq details[open] > summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq details[open] > summary { color: var(--teal-ink); }
.faq-a { padding: 0 clamp(0px, 3vw, 48px) 1.5rem 0; }
.faq-a p { font-size: .97rem; line-height: 1.68; color: var(--ink-75); max-width: 62ch; }
.faq-a p + p { margin-top: .8rem; }
.faq-a a { color: var(--teal-ink); font-weight: 700;
  box-shadow: inset 0 -1px 0 rgba(26,115,117,.45); }
.faq-a a:hover { box-shadow: inset 0 -2px 0 currentColor; }

/* Form status: a failed send must not look like a successful one */
.form-status.is-bad { color: #9B2C2C; }

/* Draft posts are viewable, so they need to say so unmistakably */
.draft-flag {
  position: relative; z-index: 5;
  margin: 0; padding: .85rem var(--gut);
  background: var(--sun); color: var(--ink);
  font-size: .9rem; font-weight: 700; line-height: 1.5;
  max-width: none; text-align: center;
}

/* Team as names, set as a list rather than a photo grid */
.team-names {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 0 clamp(20px, 3vw, 48px);
  border-top: 1px solid rgba(35,35,35,.15);
}
.team-names li {
  font-family: var(--display);
  font-size: clamp(1.02rem, 1.5vw, 1.16rem);
  font-weight: 500;
  padding: .95rem 0;
  border-bottom: 1px solid rgba(35,35,35,.15);
}
@media (max-width: 480px) { .team-names { grid-template-columns: 1fr; } }

/* Paragraph inside the dark values panel */

/* ==========================================================================
   Discover widgets
   The enquiry and enrolment forms are served by Discover, the centre's
   management system. Their markup is not ours to change, so this softens the
   edges rather than trying to restyle it wholesale.
   ========================================================================== */
.widget { max-width: 860px; margin-inline: auto; padding-inline: 15px; }
/* Their enquiry form is a Bootstrap container, so its width is fixed by the
   viewport rather than by its parent and it ignores the column it sits in.
   Make it fluid so it fits wherever we put it. The 15px padding above absorbs
   the negative margins on their rows. */
.widget .discover-panel,
.widget .discover-container,
.widget .discover-panel-body { width: auto !important; max-width: 100% !important; }
.widget--wide { max-width: none; }
.widget-loading, .widget-fallback {
  color: var(--ink-55); font-size: .95rem; padding: 1.5rem 0;
}
.widget-fallback a { color: var(--teal-ink); font-weight: 700; }

/* Their forms set their own type. Bring it back to the site's face. */
.widget, .widget input, .widget select, .widget textarea, .widget button, .widget label {
  font-family: var(--sans);
}
.widget h1, .widget h2, .widget h3, .widget h4, .widget legend {
  font-family: var(--display); color: var(--ink);
}
.widget input:focus, .widget select:focus, .widget textarea:focus {
  outline: 2px solid var(--teal-ink); outline-offset: 1px;
}
/* Wide multi step wizard: let it scroll rather than break the page */
.widget--wide { overflow-x: auto; }

/* Their classes are all discover- prefixed, so these overrides cannot leak. */
.widget .discover-btn {
  border: 0; border-radius: 3px;
  padding: .72rem 1.5rem;
  font-family: var(--display); font-weight: 600; font-size: .97rem;
  letter-spacing: .01em;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.widget .discover-btn-primary { background: var(--sun); color: var(--ink); }
.widget .discover-btn-primary:hover,
.widget .discover-btn-primary:focus { background: #E08A2B; color: var(--ink); }
.widget .discover-btn-info {
  background: transparent; color: var(--teal-ink);
  box-shadow: inset 0 0 0 1.5px var(--teal-ink);
}
.widget .discover-btn-info:hover,
.widget .discover-btn-info:focus { background: var(--teal-ink); color: #fff; }

.widget .discover-form-control {
  border-radius: 3px; border: 1px solid rgba(35,35,35,.24);
  box-shadow: none; transition: border-color .22s var(--ease);
}
.widget .discover-form-control:focus {
  border-color: var(--teal-ink); box-shadow: none;
}
.widget .discover-h2 {
  font-family: var(--display); font-weight: 500; color: var(--ink);
  letter-spacing: -.012em;
}

/* A shorter header for a page that is mostly form */
.page-head.is-short { min-height: 0; padding-block: clamp(90px, 12vw, 150px) clamp(70px, 9vw, 110px); }

/* The version 4 enrolment widget is a web component built on Tailwind, from
   Xplor. Only its buttons and its step marker are recoloured, because deeper
   overrides would break the next time Discover ship an update. */
.widget .x-button.primary {
  background: var(--sun) !important;
  color: var(--ink) !important;
  border-color: var(--sun) !important;
}
.widget .x-button.primary:hover { background: #E08A2B !important; border-color: #E08A2B !important; }
.widget .x-button.secondary {
  background: transparent !important;
  color: var(--teal-ink) !important;
  border: 1.5px solid var(--teal-ink) !important;
}
.widget .x-button.secondary:hover { background: var(--teal-ink) !important; color: #fff !important; }
.widget .bg-indigo-600 { background-color: var(--teal-ink) !important; border-color: var(--teal-ink) !important; }
.widget .text-indigo-600 { color: var(--teal-ink) !important; }
.widget .bg-gray-50 { background-color: transparent !important; }
/* Their layout relies on an mx-auto class that is not in the stylesheet they
   ship, so the form sits hard against the left of its column. Centre it, and
   let it use a little more of the page than their default 672px. */
.widget .max-w-2xl,
.widget .max-w-xl {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 860px !important;
}
.widget .flex-1 { min-width: 0; }

/* Two routes side by side, the enquiry and the full application */
.route-row { display: flex; flex-wrap: wrap; gap: .8rem; }

/* ==========================================================================
   The five enrolment steps
   The heading and a photograph hold still on the left while the steps scroll
   past on the right, each one brightening as it reaches the middle of the
   screen. The dimming is only switched on by script, so without it, or with
   reduced motion, every step reads at full strength.
   ========================================================================== */
.stepline {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(30px, 6vw, 100px); align-items: start;
}
.stepline-hold { position: sticky; top: 112px; }
.stepline-hold h2 { font-size: clamp(1.8rem, 3.2vw, 2.8rem); margin-bottom: clamp(18px, 2vw, 26px); }
.stepline-hold figure {
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 34px 64px -40px rgba(20, 38, 40, .55);
}
.stepline-hold img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.stepline-list > li {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(18px, 2.4vw, 34px);
  padding: clamp(26px, 3.2vw, 44px) 0;
  border-top: 1px solid rgba(35, 35, 35, .14);
  transition: opacity .5s var(--ease);
}
.stepline-list > li:last-child { border-bottom: 1px solid rgba(35, 35, 35, .14); }
.stepline-list.is-live > li { opacity: .28; }
.stepline-list.is-live > li.is-on { opacity: 1; }
.stepline-no {
  font-family: var(--display); font-weight: 200;
  font-size: clamp(2.4rem, 4vw, 3.6rem); line-height: .9;
  color: var(--teal-ink); min-width: 1.6em;
}
.stepline-list h3 { font-size: clamp(1.15rem, 1.6vw, 1.4rem); margin-bottom: .4rem; }
.stepline-list p { font-size: .97rem; line-height: 1.62; color: var(--ink-75); max-width: 48ch; }
@media (max-width: 880px) {
  .stepline { grid-template-columns: 1fr; }
  .stepline-hold { position: static; }
}

/* Phones: every enrolment step at full strength. The highlight follows the
   middle of the screen, and on a phone the first steps you see sit below it,
   so they loaded looking faded and switched off. */
@media (max-width: 880px) {
  .stepline-list.is-live > li { opacity: 1; }
}

/* Our Story's header photograph comes through more clearly: the same ombre at
   roughly two thirds the strength, still dark enough behind the headline. */
.page-head--light::after {
  background:
    linear-gradient(to right, rgba(18, 28, 20, .30) 0%, rgba(18, 28, 20, .06) 62%, rgba(18, 28, 20, 0) 100%),
    linear-gradient(to bottom,
      rgba(18, 28, 20, .16) 0%,
      rgba(18, 28, 20, .34) 34%,
      rgba(20, 32, 22, .58) 66%,
      rgba(20, 32, 22, .72) 100%);
}

/* Phones: one left edge for everything, the closing card included, the way the
   rest of each page already reads. */
@media (max-width: 640px) {
  .cta-card { text-align: left; }
  .cta-card .eyebrow.is-centred { justify-content: flex-start; }
  .cta-card .lead { margin-inline: 0; }
  .cta-card .btn-row { justify-content: flex-start !important; }
}

/* ---------- Clear header over the opening photograph ----------
   Every page opens on a photo, so the header floats over it with light type
   and turns solid white once the page has moved (or the phone menu is open). */
:root { --header-h: 78px; }
@media (max-width: 430px) { :root { --header-h: 70px; } }
body:has(main > :is(.page-head, .hero--photo):first-child) .site-header {
  position: fixed; left: 0; right: 0;
  transition: border-color .3s var(--ease), background-color .3s var(--ease), box-shadow .3s var(--ease);
}
body:has(main > :is(.page-head, .hero--photo):first-child) .site-header:not(.is-stuck):not(:has(.nav.is-open)) {
  background: linear-gradient(to bottom, rgba(8, 30, 32, .58), rgba(8, 30, 32, 0));
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.site-header:not(.is-stuck):not(:has(.nav.is-open)) .brand-words b,
.site-header:not(.is-stuck):not(:has(.nav.is-open)) .brand-words span { color: #fff; transition: color .3s var(--ease); }
.site-header:not(.is-stuck):not(:has(.nav.is-open)) .burger span,
.site-header:not(.is-stuck):not(:has(.nav.is-open)) .burger span::before,
.site-header:not(.is-stuck):not(:has(.nav.is-open)) .burger span::after { background: #fff; }
@media (min-width: 901px) {
  .site-header:not(.is-stuck) .nav a { color: #fff; }
  .site-header:not(.is-stuck) .nav a[aria-current="page"] { color: var(--sand); }
  .site-header:not(.is-stuck) .nav .btn--line { color: #fff; border-color: rgba(255,255,255,.75); }
  .site-header:not(.is-stuck) .nav .btn--line::before { background: #fff; }
  .site-header:not(.is-stuck) .nav .btn--line:hover { color: var(--ink); border-color: #fff; }
}
main > .page-head:first-child { padding-top: calc(clamp(66px, 8.6vw, 122px) + var(--header-h)); }
main > .page-head.is-short:first-child { padding-top: calc(clamp(66px, 8.6vw, 122px) + var(--header-h)); }
main > .hero--photo:first-child .hero-inner { padding-top: calc(clamp(40px, 6vw, 80px) + var(--header-h)); }

/* Swipe cards: each one is a white card, photo flush to its left edge and the
   copy inside it, so the photo and its text read as one object. */
.tips-track { padding-bottom: 34px; align-items: stretch; }
.tip {
  background: var(--white); border-radius: 20px; overflow: hidden;
  gap: 0; align-items: stretch;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  box-shadow: 0 1px 2px rgba(35, 35, 35, .05), 0 16px 34px -20px rgba(15, 78, 83, .34);
}
.tip figure { border-radius: 0; height: 100%; }
.tip img { height: 100%; }
.tip-copy { align-self: center; padding: clamp(24px, 3.4vw, 52px); }
.tips-bar { margin-top: 0; }
@media (max-width: 760px) {
  .tip { grid-template-columns: 1fr; }
  .tip figure { margin-bottom: 0; height: auto; }
  .tip img { height: auto; }
  .tip-copy { align-self: start; padding: 22px 22px 26px; }
}

/* ---------- Audit fixes ---------- */
/* Phone: the home hero fills most of the first screen. */
@media (max-width: 760px) {
  .hero--photo { min-height: 92vh; min-height: 92svh; }
}
/* The closing card's eyebrow was centred inside a narrow left-hand box. */
.cta-card .eyebrow.is-centred { max-width: none; width: 100%; }
/* Two columns side by side: the second must not pick up the paragraph gap. */
.saying-cols p + p { margin-top: 0; }
/* One rule under the heading, not two. */
.gal-head + .spread .rhythm li:first-child { border-top: 0; padding-top: 0; }
/* Linked rows keep their tap height without sitting further from their label. */
.details a { margin-block: -.37rem; }
@media (max-width: 520px) { .footer-grid { gap: 40px; } }
/* Enquiry form: the two buttons were touching. */
.widget #dc-btn-add-child { margin: 0 0 10px 10px; }
.widget #dc-btn-submit { margin-left: 10px; }
/* Enrolment form: the widget reserves a full screen of height, which left a
   blank gap under short steps. */
.widget .min-h-screen { min-height: 0 !important; }
/* On a phone six step labels do not fit on one line, so the numbers stand alone. */
@media (max-width: 600px) {
  .widget .max-w-xl span.text-xs.whitespace-nowrap { display: none; }
  .widget .max-w-xl > div > .flex-1 { margin-top: 0 !important; }
}

/* ---------- Additions, October: reviews, the team, the floating button, motifs ---------- */
.edge.from-mist.to-white { --edge-back: #F1F6F6; }   /* mist -> white */

/* What families say: three quiet cards; a swipe row on a phone */
.reviews-head { margin-bottom: clamp(26px, 3.2vw, 44px); }
.reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.review {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 1.6rem;
  background: var(--white); border-radius: 20px;
  padding: clamp(54px, 5vw, 68px) clamp(22px, 2.6vw, 36px) clamp(24px, 2.6vw, 34px);
  box-shadow: 0 1px 2px rgba(35, 35, 35, .05), 0 16px 34px -22px rgba(15, 78, 83, .34);
}
.review::before {
  content: "\201C"; position: absolute; top: clamp(8px, 1vw, 14px); left: clamp(20px, 2.4vw, 32px);
  font-family: var(--display); font-size: 4.2rem; line-height: 1; color: var(--sun);
}
.review blockquote { margin: 0; }
.review blockquote p { font-family: var(--display); font-weight: 300; font-size: clamp(1.05rem, 1.35vw, 1.2rem); line-height: 1.55; color: var(--ink); max-width: none; }
.review-by { display: grid; gap: .15rem; padding-top: 1.1rem; border-top: 1px solid rgba(35, 35, 35, .12); }
.review-by b { font-weight: 700; font-size: .95rem; }
.review-by span { font-size: .85rem; color: var(--ink-55); }
.reviews:focus-visible { outline: 2px solid var(--teal-ink); outline-offset: 4px; }
@media (max-width: 860px) {
  .reviews {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gut)); padding: 4px var(--gut) 30px; scroll-padding-inline: var(--gut);
  }
  .reviews::-webkit-scrollbar { display: none; }
  .review { scroll-snap-align: start; }
}

/* Meet the team */
.team-head { margin-bottom: clamp(28px, 3.4vw, 48px); max-width: 60ch; }
.crew { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(22px, 2.8vw, 40px) clamp(16px, 2vw, 28px); }
.crew-photo { aspect-ratio: 1; border-radius: 18px; overflow: hidden; background: var(--mist); margin-bottom: .9rem; }
.crew-photo img { width: 100%; height: 100%; object-fit: cover; }
.crew-blank {
  display: block; width: 100%; height: 100%;
  background: no-repeat center 62% / 54%
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%231F9BA3' stroke-opacity='.45' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='32' cy='23' r='11'/%3E%3Cpath d='M10 58c2-13 11-19 22-19s20 6 22 19'/%3E%3C/svg%3E");
}
.crew h3 { margin-bottom: .15rem; }
.crew p { font-size: .9rem; color: var(--ink-75); }
@media (max-width: 900px) { .crew { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .crew { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* The enquiry button that follows the page: a tab on the right edge on a
   wide screen, there from the moment the page opens, as in the centre's own
   example; a pill in the corner on a phone, which waits until the page has
   moved so it never sits over the opening photograph's own button. */
.float-cta {
  position: fixed; z-index: 90; right: 0; top: 50%;
  transform: translate(0, -50%) rotate(180deg); writing-mode: vertical-rl;
  background: var(--sun); color: var(--ink); font-weight: 700; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
  padding: 1.5rem .85rem; border-radius: 0 16px 16px 0;
  box-shadow: 0 10px 26px -12px rgba(35, 35, 35, .55);
  transition: transform .4s var(--ease), opacity .3s var(--ease), visibility .3s, background-color .25s var(--ease);
}
.float-cta:hover { background: #E08A2B; }
.float-cta:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
body:has(.nav.is-open) .float-cta, body:has(.lb.is-open) .float-cta { opacity: 0; visibility: hidden; }
@media (max-width: 760px) {
  .float-cta {
    top: auto; bottom: 16px; right: 14px; writing-mode: horizontal-tb;
    transform: translateY(140%); padding: .8rem 1.15rem; border-radius: 999px; font-size: .76rem; letter-spacing: .08em;
    opacity: 0; visibility: hidden;
  }
  body:has(.site-header.is-stuck) .float-cta { transform: none; opacity: 1; visibility: visible; }
}
@media print { .float-cta { display: none; } }

/* Coastal motifs: one rule. Every section label carries a small drawing in
   place of its dash, the same size and in the same place on every section of
   every page. The labels over the opening photographs keep the plain dash. */
.eyebrow.has-ic::before { display: none; }
.eyebrow.has-ic { gap: .7em; }
.eyebrow.has-ic .ic { --ic: 26px; margin-block: -6px; }

/* ---------- Motion, second pass ----------
   Everything here is slow and small, and none of it runs for a visitor who
   has asked their device for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  /* The opening photograph settles into place as the page arrives */
  .hero-bg img, .page-head-bg img { animation: settle 2.6s var(--ease) both; }
  @keyframes settle { from { transform: scale(1.07); } to { transform: none; } }

  /* and the words over it come up one after another */
  .hero-inner > *, .page-head > .wrap > * { animation: come-up .9s var(--ease) both; }
  .hero-inner > :nth-child(1), .page-head > .wrap > :nth-child(1) { animation-delay: .15s; }
  .hero-inner > :nth-child(2), .page-head > .wrap > :nth-child(2) { animation-delay: .3s; }
  .hero-inner > :nth-child(3) { animation-delay: .45s; }
  .hero-inner > :nth-child(4) { animation-delay: .6s; }
  @keyframes come-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

  /* A section's little drawing arrives just after its label */
  .js .rise .eyebrow.has-ic .ic, .js .rise.cta-card .eyebrow.has-ic .ic { opacity: 0; transform: translateY(8px) rotate(-14deg) scale(.7); transition: opacity .6s var(--ease) .25s, transform .9s cubic-bezier(.3, 1.5, .5, 1) .25s; }
  .js .rise.is-in .eyebrow.has-ic .ic { opacity: 1; transform: none; }

  /* Cards lift a little under the pointer; photographs ease in closer */
  .tip, .callout, .js .review.rise, .js .post-card.rise, .js .crew li.rise { transition: translate .4s var(--ease), box-shadow .4s var(--ease), opacity .8s var(--ease), transform .8s var(--ease); }
  .tip:hover, .review:hover { translate: 0 -5px; box-shadow: 0 1px 2px rgba(35, 35, 35, .05), 0 26px 44px -22px rgba(15, 78, 83, .42); }
  .callout:hover { translate: 4px 0; }
  .tip img, .crew-photo img, .welcome-photo img, .post-media img, .post-thumb img, .stepline-hold img { transition: transform 1.1s var(--ease); }
  .tip:hover img, .crew li:hover .crew-photo img, .welcome-photo:hover img, .post-media:hover img, .post-thumb:hover img, .stepline-hold figure:hover img { transform: scale(1.04); }

  /* The values count themselves in, one line at a time */
  .js .values-list.rise > li { opacity: 0; transform: translateX(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
  .js .values-list.rise.is-in > li { opacity: 1; transform: none; }
  .js .values-list.rise.is-in > li:nth-child(2) { transition-delay: .12s; }
  .js .values-list.rise.is-in > li:nth-child(3) { transition-delay: .24s; }
  .js .values-list.rise.is-in > li:nth-child(4) { transition-delay: .36s; }
}

/* ---------- Footer, compacted ----------
   Smaller logo, tighter rows and less air, so the footer takes roughly two
   thirds of the height it did. On a phone the page links and the hours sit
   side by side instead of everything stacking in one long column. */
.site-footer { padding-top: clamp(40px, 4.6vw, 60px); }
.footer-grid { gap: clamp(22px, 3vw, 44px); align-items: start; }
.footer-logo img { width: 92px; height: auto; margin-bottom: .8rem; }
.footer-logo .small { font-size: .86rem; line-height: 1.5; }
.socials { margin-top: .9rem; gap: .55rem; }
.socials a { width: 38px; height: 38px; }
.site-footer h4, .site-footer .footer-h { margin-bottom: .6rem; }
.footer-links, .footer-contact { font-size: .9rem; }
.footer-links a, .footer-links span,
.footer-contact a, .footer-contact span { padding-block: .3rem; line-height: 1.45; }
.site-footer .footer-h[style] { margin-top: 1.1rem !important; }
.footer-base { margin-top: clamp(24px, 3vw, 36px); padding-block: 1rem; }
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 26px 22px; }
  .footer-logo { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; column-gap: 18px; align-items: center; }
  .footer-logo img { grid-row: span 2; margin-bottom: 0; width: 84px; }
  .footer-logo .small { max-width: none !important; align-self: end; }
  .footer-logo .socials { margin-top: .6rem; align-self: start; }
  /* fingers need more room than a mouse pointer does */
  .footer-links a, .footer-contact a { padding-block: .5rem; }
  .socials a { width: 44px; height: 44px; }
}
@media (max-width: 520px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px 18px; }
  .footer-grid > :last-child { grid-column: 1 / -1; }
  .footer-base { flex-direction: column; gap: .2rem; }
}
main:has(.cta-card-sec) + .site-footer { padding-top: calc(clamp(40px, 4.6vw, 60px) + clamp(80px, 8vw, 100px)); }
/* On a phone, leave room so the enquiry pill never sits over the last line. */
@media (max-width: 760px) { body:has(.float-cta) .footer-base { padding-bottom: 4.4rem; } }

/* ---------- Phone header fixes ----------
   Newer iPhones draw the page behind the status bar, so scrolled content was
   showing above the solid header. A strip of the header's own white now
   reaches up behind the clock once the header is solid. */
.site-header::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 160px;
  background: var(--white); opacity: 0; pointer-events: none;
  transition: opacity .3s var(--ease);
}
.site-header.is-stuck::before, .site-header:has(.nav.is-open)::before { opacity: 1; }

/* The open menu ended flush under its last button and the page carried on
   straight beneath it, which read as the button being cut off. It now has
   room under the button, rounded lower corners and a soft shadow. */
@media (max-width: 900px) {
  .nav { padding-bottom: 2.2rem; border-bottom: 0; border-radius: 0 0 22px 22px; }
  .nav.is-open { box-shadow: 0 34px 50px -26px rgba(15, 40, 42, .5); }
  .site-header:has(.nav.is-open) { background: var(--white); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
/* The real cut-off: the menu's row divider was replacing the bottom edge of
   the Enrol now button with a faint grey line. */
@media (max-width: 900px) {
  .nav .btn--line { border: 1.5px solid var(--teal-ink); }
  .site-header:not(.is-stuck) .nav .btn--line { color: var(--teal-ink); }
}
body:has(.nav.is-open) .float-cta.float-cta { opacity: 0; visibility: hidden; }

/* ---------- Phone and tablet: the menu as a hanging bar ----------
   The centre asked for the header to float clear of the screen edges, with
   the logo on one side, Enquire now in the middle and the menu on the other.
   It is always solid white here, so the rules that make the wide header
   clear over the photograph are overridden; that is what the !important is for. */
.header-enquire { display: none; }
@media (max-width: 900px) {
  .site-header, body .site-header {
    position: fixed !important; top: calc(10px + env(safe-area-inset-top, 0px)); left: 10px !important; right: 10px !important;
    background: var(--white) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    border: 0; border-radius: 20px;
    box-shadow: 0 1px 2px rgba(35, 35, 35, .08), 0 14px 30px -16px rgba(15, 40, 42, .5);
  }
  .site-header::before { display: none; }
  .header-in { padding: .5rem .55rem .5rem .8rem; gap: .5rem; }
  .brand img { width: 44px; height: 44px; }
  .site-header .brand-words b { color: var(--ink) !important; font-size: .82rem; }
  .site-header .brand-words span { color: var(--teal-ink) !important; font-size: .56rem; }
  .site-header .burger span, .site-header .burger span::before, .site-header .burger span::after { background: var(--ink) !important; }
  .site-header .burger[aria-expanded="true"] span { background: transparent !important; }
  .header-enquire {
    display: inline-flex; margin-inline: auto; flex: none;
    padding: .62em 1.15em; font-size: .8rem; white-space: nowrap;
  }
  /* the bar now carries the enquiry button, so the corner pill steps aside */
  .float-cta { display: none; }
  body:has(.float-cta) .footer-base { padding-bottom: 1rem; }

  /* the menu drops out of the bar as a matching card */
  .nav {
    position: absolute; inset: calc(100% + 8px) 0 auto 0;
    border-radius: 20px; padding: .4rem 1.1rem 1.3rem;
    max-height: calc(100dvh - 110px);
    transform: translateY(-10px); opacity: 0; visibility: hidden; pointer-events: none;
    transition: transform .3s var(--ease), opacity .25s var(--ease), visibility .25s;
    box-shadow: 0 1px 2px rgba(35, 35, 35, .08), 0 24px 44px -18px rgba(15, 40, 42, .55);
  }
  .nav.is-open { transform: none; opacity: 1; visibility: visible; pointer-events: auto; }
  .nav a:last-of-type:not(.btn) { border-bottom: 0; }
}
/* On a narrow phone there is no room for the wordmark beside the button */
@media (max-width: 520px) { .site-header .brand-words { display: none; } }

/* ---------- Photographs arrive from above ----------
   main.js marks each photo frame .reveal and adds .is-in as that frame
   reaches the screen. The frame itself is never hidden (an element clipped
   to nothing does not count as on screen, so it would never be let in); the
   picture inside it is uncovered from the top down and settles into place. */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal > img, .js .reveal > iframe, .js .reveal > video, .js .reveal > a > img {
    clip-path: inset(0 0 100% 0); transform: translateY(-26px) scale(1.04);
    transition: clip-path .95s var(--ease), transform 1.2s var(--ease);
  }
  .js .reveal.is-in > img, .js .reveal.is-in > iframe, .js .reveal.is-in > video, .js .reveal.is-in > a > img {
    clip-path: inset(0 0 0 0); transform: none;
  }
  /* until its picture arrives, a frame shows no tint or shadow of its own */
  .js .reveal:not(.is-in) { background-color: transparent; box-shadow: none; }
  .js .reveal { transition: background-color .4s var(--ease) .5s, box-shadow .6s var(--ease) .4s; }

  /* the swipe cards come in from the side instead, since they sit in a row */
  .js .tips.rise .tip { opacity: 0; transform: translateX(40px); transition: opacity .7s var(--ease), transform .8s var(--ease), translate .4s var(--ease), box-shadow .4s var(--ease); }
  .js .tips.rise.is-in .tip { opacity: 1; transform: none; }
  .js .tips.rise.is-in .tip:nth-child(2) { transition-delay: .12s; }
  .js .tips.rise.is-in .tip:nth-child(3) { transition-delay: .24s; }
}
/* A grid of photographs no longer fades in as one block; each photo does its own. */
.js .gal.rise, .js .strip.rise { opacity: 1; transform: none; }
/* In the phone swipe row, the cards waiting off to the side are already there
   when they are swiped to, rather than fading in late. */
@media (max-width: 860px) { .js .reviews .review.rise { opacity: 1; transform: none; } }

/* ---------- Motion, third pass: movement, not only fades ----------
   The centre asked for more active animation. Sections now come in from the
   side they sit on, headings rise a word at a time, cards pop into place,
   the waves swell up, the figures count, and the opening photograph drifts
   as the page slides over it. Each plays once, as it is reached. */
@media (prefers-reduced-motion: no-preference) {
  /* Headings, a word at a time */
  .words .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .14em; margin-bottom: -.14em; }
  .js .words .w > span { display: inline-block; transform: translateY(108%) rotate(4deg); transform-origin: left bottom; transition: transform .85s cubic-bezier(.2, .8, .2, 1); }
  .js .words.is-in .w > span { transform: none; }

  /* Two-column sections: each half comes in from its own side */
  .js .welcome-copy.rise, .js .spread > .rise:last-child, .js .spread.rise > .spread-media,
  .js .values-list.rise, .js .philo-body > .rise { transform: translateX(70px); }
  .js .welcome-photo.rise, .js .spread > .rise:first-child, .js .spread.rise > .spread-copy,
  .js .values-head.rise, .js .stepline-hold.rise, .js .tips-head.rise, .js .reviews-head.rise, .js .team-head.rise { transform: translateX(-70px); }
  .js .spread.rise > .spread-media, .js .spread.rise > .spread-copy { opacity: 0; transition: opacity .8s var(--ease), transform 1s cubic-bezier(.2, .8, .2, 1); }
  .js .spread.rise.is-in > .spread-media, .js .spread.rise.is-in > .spread-copy { opacity: 1; transform: none; }
  .js .spread.rise.is-in > .spread-media { transition-delay: .15s; }
  .js .rise { transition: opacity .8s var(--ease), transform 1s cubic-bezier(.2, .8, .2, 1); }
  .js .welcome-copy.rise.is-in, .js .spread > .rise.is-in, .js .values-list.rise.is-in, .js .philo-body > .rise.is-in,
  .js .welcome-photo.rise.is-in, .js .values-head.rise.is-in, .js .stepline-hold.rise.is-in,
  .js .tips-head.rise.is-in, .js .reviews-head.rise.is-in, .js .team-head.rise.is-in { transform: none; }

  /* The layered panels on Our Story slide in over their photograph */
  .js .layer.rise { opacity: 1; transform: none; }
  .js .layer.rise > .layer-panel { opacity: 0; transform: translateX(-90px); transition: opacity .7s var(--ease) .25s, transform 1.1s cubic-bezier(.2, .8, .2, 1) .25s; }
  .js .layer--flip.rise > .layer-panel { transform: translateX(90px); }
  .js .layer.rise.is-in > .layer-panel { opacity: 1; transform: none; }

  /* Cards pop up into place with a little spring */
  .js .review.rise, .js .crew > li.rise, .js .figures > li.rise, .js .post-card.rise, .js .cta-card.rise {
    transform: translateY(60px) scale(.9);
    transition: opacity .6s var(--ease), transform .95s cubic-bezier(.25, 1.35, .45, 1), translate .4s var(--ease), box-shadow .4s var(--ease);
  }
  .js .review.rise.is-in, .js .crew > li.rise.is-in, .js .figures > li.rise.is-in, .js .post-card.rise.is-in, .js .cta-card.rise.is-in { transform: none; }
  .js .crew > li.rise:nth-child(4n+2) { transition-delay: .08s; }
  .js .crew > li.rise:nth-child(4n+3) { transition-delay: .16s; }
  .js .crew > li.rise:nth-child(4n+4) { transition-delay: .24s; }

  /* The enrolment steps and the practical rows step in from the right, one by one.
     The steps keep their own dimming (the step nearest the middle of the
     screen reads brightest), so only their position is animated here. */
  .js .stepline-list > li { transform: translateX(56px); transition: transform .8s cubic-bezier(.2, .8, .2, 1), opacity .4s var(--ease); }
  .js .stepline-list.is-in > li { transform: none; }
  .js .rise .rhythm > li, .js .rise > .callout, .js .faq.rise > details {
    opacity: 0; transform: translateX(56px);
    transition: opacity .6s var(--ease), transform .8s cubic-bezier(.2, .8, .2, 1), translate .4s var(--ease);
  }
  .js .rise.is-in .rhythm > li, .js .rise.is-in > .callout, .js .faq.rise.is-in > details { opacity: 1; transform: none; }
  .js :is(.stepline-list, .rhythm, .faq) > :nth-child(2), .js .rise > .callout:nth-of-type(2) { transition-delay: .09s; }
  .js :is(.stepline-list, .rhythm, .faq) > :nth-child(3), .js .rise > .callout:nth-of-type(3) { transition-delay: .18s; }
  .js :is(.stepline-list, .rhythm, .faq) > :nth-child(4) { transition-delay: .27s; }
  .js :is(.stepline-list, .rhythm, .faq) > :nth-child(5) { transition-delay: .36s; }
  .js :is(.stepline-list, .rhythm, .faq) > :nth-child(6) { transition-delay: .45s; }
  .js :is(.stepline-list, .rhythm, .faq) > :nth-child(7) { transition-delay: .54s; }

  /* The waves swell up from flat as they are reached */
  .js .edge.swell .w-front, .js .edge.swell .w-back { transform: translateY(70%); transition: transform 1.3s cubic-bezier(.2, .8, .2, 1); }
  .js .edge.swell .w-back { transition-delay: .12s; }
  .js .edge.swell.is-in .w-front, .js .edge.swell.is-in .w-back { transform: none; }

  /* Photographs drop in further, and the little drawings keep a gentle bob */
  .js .reveal > img, .js .reveal > iframe, .js .reveal > video { transform: translateY(-60px) scale(1.12); }
  .eyebrow.has-ic .ic { animation: bob 4.5s ease-in-out infinite; }
  @keyframes bob { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -3px; rotate: -6deg; } }

  /* Buttons: the arrow leans forward, the fill presses in */
  .btn { transition: transform .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease); }
  .btn:hover { transform: translateY(-2px); box-shadow: 0 12px 22px -14px rgba(35, 35, 35, .6); }
  .btn:active { transform: translateY(0) scale(.98); }
}
/* Things waiting off to one side before they slide in must not make the page
   wider than the screen. Clipping (rather than hiding) keeps sticky parts working. */
main, .site-footer { overflow-x: clip; }
/* A phone number never breaks across two lines */
a[href^="tel:"] { white-space: nowrap; }

/* ---------- Home: questions, and the enquiry form on the page ---------- */
.faq-split { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 6vw, 104px); align-items: start; }
.faq-split-head .link { display: inline-flex; }
.enquiry-split { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 88px); align-items: start; }
.enquiry-direct { line-height: 2; }
.enquiry-direct a { color: var(--teal-ink); font-weight: 700; }
.enquiry-panel { padding: clamp(20px, 2.6vw, 40px); box-shadow: 0 1px 2px rgba(35, 35, 35, .05), 0 22px 44px -28px rgba(15, 78, 83, .4); }
.enquiry-panel .widget { max-width: none; padding-inline: 0; }
.enquiry-panel--wide { margin-top: clamp(26px, 3.4vw, 46px); padding: clamp(26px, 3.6vw, 56px); }
.enquiry-panel--wide .widget { margin-top: clamp(18px, 2.2vw, 30px); max-width: 860px; }
.enquiry-panel .widget-loading { min-height: 220px; display: grid; place-items: center; color: var(--ink-55); }
@media (max-width: 880px) { .faq-split, .enquiry-split { grid-template-columns: 1fr; gap: 26px; } }
/* The form needs the full width to keep its labels on one line, so the
   wording sits above it rather than beside it. */
.enquiry-split { grid-template-columns: 1fr; gap: clamp(22px, 2.8vw, 38px); }
.enquiry-copy { max-width: 62ch; }
.enquiry-panel .widget { max-width: 860px; margin-inline: auto; }
/* iPhones on software older than 2022 do not understand "clip"; give them the
   plain version so the page still cannot be dragged sideways. */
@supports not (overflow-x: clip) { main, .site-footer { overflow-x: hidden; } }

/* ---------- The simple contact form ---------- */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-form .btn { justify-self: start; }
.contact-form .form-note a { color: var(--teal-ink); font-weight: 700; }
.contact-form .form-status { outline: none; }
.contact-form-wrap { max-width: 720px; margin-top: clamp(18px, 2.2vw, 30px); }
.enquiry-panel { padding: clamp(24px, 3vw, 44px); }
@media (min-width: 881px) {
  .enquiry-split { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 88px); }
}
@media (max-width: 520px) { .contact-form .field-pair { grid-template-columns: 1fr; } }

/* ---------- Phone and tablet: the hanging bar, compact ----------
   The centre asked for the bar to shrink to its contents (logo, Enquire now,
   menu, sitting close together) and to be slightly see-through. */
@media (max-width: 900px) {
  .site-header, body .site-header {
    left: 50% !important; right: auto !important; transform: translateX(-50%);
    width: max-content; max-width: calc(100vw - 20px);
    background: rgba(255, 255, 255, .8) !important;
    backdrop-filter: blur(14px) saturate(1.3) !important; -webkit-backdrop-filter: blur(14px) saturate(1.3) !important;
    border-radius: 999px;
  }
  .site-header:has(.nav.is-open) { background: var(--white) !important; }
  .header-in { padding: .36rem .42rem; gap: .3rem; }
  .site-header .brand-words { display: none; }
  .brand img { width: 42px; height: 42px; }
  .header-enquire { margin-inline: 0; border-radius: 999px; padding: .7em 1.2em; }
  .burger { width: 42px; height: 42px; }
  .nav {
    left: 50%; right: auto; width: calc(100vw - 20px);
    transform: translate(-50%, -10px);
  }
  .nav.is-open { transform: translate(-50%, 0); }
}

/* The login pages load an older style kit (Bootstrap, through the parent and
   staff login boxes) that sets the base text size to 10px and restyles .btn.
   Keep the theme's own sizes and keep the header's enquiry button to phones.
   Also published under Appearance > Customize > Additional CSS at launch. */
html { font-size: 100% !important; }
.site-header .header-enquire { display: none; }
@media (max-width: 900px) { .site-header .header-enquire { display: inline-flex; } }
/* The centre tour, played from the website rather than YouTube */
.video-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--ink); display: block; }

/* ---------- WordPress only ---------- */
/* Logged-in staff see the admin bar; the floating header sits under it. */
.admin-bar .site-header { top: 32px; }
@media (max-width: 900px) { .admin-bar .site-header { top: 42px; } }
@media (max-width: 782px) { .admin-bar .site-header { top: 56px; } }
@media (max-width: 600px) { .admin-bar .site-header.is-stuck { top: 10px; } }
/* Images placed in a post by the editor */
.article .alignleft { float: left; margin: .4rem 1.6rem 1rem 0; }
.article .alignright { float: right; margin: .4rem 0 1rem 1.6rem; }
.article .aligncenter { display: block; margin-inline: auto; }
.article figure { margin-block: 1.6rem; }
.article figcaption, .article .wp-caption-text { font-size: .85rem; color: var(--ink-55); margin-top: .5rem; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.post-pages { display: flex; gap: 1.2rem; justify-content: space-between; margin-top: clamp(28px, 4vw, 48px); }