/* ============================================================
   LITTLE SHEPHERDS' SCHOOLHOUSE
   Design System — v1.0
   ============================================================
   1.  Reset & Tokens
   2.  Base Typography
   3.  Layout Utilities
   4.  Buttons & Links
   5.  Announcement Bar
   6.  Header / Navigation
   7.  Mega Menu
   8.  Mobile Navigation
   9.  Hero
   10. Marquee
   11. Section Components
   12. Cards / Bento / Grids
   13. Tabs, Timeline, Accordion
   14. Testimonials & Slider
   15. Stats
   16. Gallery & Lightbox
   17. Forms
   18. CTA Band
   19. Footer
   20. Page Headers (interior)
   21. Motion / Reveal
   22. Responsive
   ============================================================ */

/* ---------- 1. Reset & Tokens ---------- */

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

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 120px;
  overflow-x: hidden;
}

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

/* <picture> only picks the AVIF/WebP file; it must not add a box, so every
   existing `.x img` rule keeps sizing the <img> exactly as before. */
picture { display: contents; }

input, button, textarea, select { font: inherit; color: inherit; }

:root {
  /* Brand */
  --red:        #CE0E37;
  --red-deep:   #96082A;
  --red-soft:   #F7E3E8;
  --red-glow:   rgba(206, 14, 55, 0.16);

  /* Ink */
  --ink:        #121110;
  --ink-900:    #1B1A18;
  --ink-700:    #3A3835;
  --ink-500:    #6C6862;
  --ink-300:    #9B958C;

  /* Paper */
  --paper:      #FBF9F6;
  --paper-warm: #F6F1EA;
  --sand:       #EFE8DE;
  --white:      #FFFFFF;

  /* Support */
  --sage:       #5E7263;
  --sage-soft:  #E7EDE7;
  --gold:       #B98B2E;

  /* Lines & shadow */
  --line:       rgba(18, 17, 16, 0.10);
  --line-soft:  rgba(18, 17, 16, 0.06);
  --line-dark:  rgba(255, 255, 255, 0.14);

  --shadow-sm:  0 1px 2px rgba(18,17,16,.04), 0 2px 8px rgba(18,17,16,.04);
  --shadow-md:  0 2px 4px rgba(18,17,16,.03), 0 12px 32px rgba(18,17,16,.08);
  --shadow-lg:  0 4px 8px rgba(18,17,16,.04), 0 24px 64px rgba(18,17,16,.12);
  --shadow-xl:  0 8px 16px rgba(18,17,16,.05), 0 40px 96px rgba(18,17,16,.16);

  /* Type */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body:    "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Radii */
  --r-xs: 8px;
  --r-sm: 14px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-xl: 40px;
  --r-pill: 999px;

  /* Rhythm */
  --gutter: clamp(20px, 4vw, 56px);
  --max: 1360px;
  --max-narrow: 880px;
  --section-y: clamp(72px, 9vw, 156px);

  /* Motion */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, .05, .36, 1);
  --dur: .55s;

  /* Chrome */
  --header-h: 82px;
  --bar-h: 40px;
}

::selection {
  background: var(--red);
  color: #fff;
}

/* ---------- 2. Base Typography ---------- */

body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-700);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-feature-settings: "kern" 1, "liga" 1;
}

/* Paired with the ref-counted scrollLock() in main.js: fixing the body and
   offsetting it by the saved scrollY is the only reliable way to stop iOS
   Safari scrolling the page behind a full-screen overlay. */
body.no-scroll {
  overflow: hidden;
  position: fixed;
  width: 100%;
  left: 0;
  right: 0;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.02em;
  font-variation-settings: "SOFT" 12, "WONK" 1, "opsz" 96;
  text-wrap: balance;
}

h1 { font-size: clamp(2.9rem, 6.6vw, 6.2rem); }
h2 { font-size: clamp(2.2rem, 4.6vw, 4.1rem); }
h3 { font-size: clamp(1.5rem, 2.4vw, 2.2rem); line-height: 1.14; }
h4 { font-size: clamp(1.18rem, 1.6vw, 1.42rem); line-height: 1.24; letter-spacing: -0.01em; }
h5 { font-size: 1.06rem; line-height: 1.3; }

p { text-wrap: pretty; }

a {
  color: inherit;
  text-decoration: none;
  transition: color .25s var(--ease), opacity .25s var(--ease);
}

strong, b { font-weight: 700; color: var(--ink-900); }

em { font-style: italic; }

.lede {
  font-size: clamp(1.08rem, 1.55vw, 1.32rem);
  line-height: 1.62;
  color: var(--ink-700);
  max-width: 62ch;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 20px;
}

.eyebrow::before {
  content: "";
  width: 26px;
  height: 1.5px;
  background: currentColor;
  flex: none;
  opacity: .8;
}

.eyebrow.is-centered { justify-content: center; }
.eyebrow.on-dark { color: #E9A8B7; }

.serif-accent {
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: "SOFT" 40, "WONK" 1;
  color: var(--red);
}

.text-balance { text-wrap: balance; }

/* ---------- 3. Layout Utilities ---------- */

.container {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow { max-width: var(--max-narrow); }
.container--wide   { max-width: 1620px; }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(52px, 6vw, 96px); }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }

.section--paper { background: var(--paper-warm); }
.section--sand  { background: var(--sand); }
.section--ink   { background: var(--ink); color: rgba(255,255,255,.72); }
.section--ink h1, .section--ink h2, .section--ink h3,
.section--ink h4, .section--ink h5 { color: #fff; }
.section--ink .lede { color: rgba(255,255,255,.7); }

.section-head { max-width: 760px; margin-bottom: clamp(40px, 5vw, 76px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .lede { margin-inline: auto; }
.section-head h2 + .lede { margin-top: 22px; }

.section-head--split {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(28px, 5vw, 80px);
  align-items: end;
  max-width: none;
}

.hr { height: 1px; background: var(--line); border: 0; }

.stack-sm > * + * { margin-top: 12px; }
.stack    > * + * { margin-top: 20px; }
.stack-lg > * + * { margin-top: 32px; }

.grid { display: grid; gap: clamp(20px, 2.4vw, 34px); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* ---------- 4. Buttons & Links ---------- */

.btn {
  --btn-bg: var(--ink);
  --btn-fg: #fff;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 30px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), color .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}

.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--red);
  transform: translateY(101%);
  transition: transform .5s var(--ease);
}

.btn:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px var(--red-glow);
}

.btn:hover::after { transform: translateY(0); }

.btn .btn-ico {
  width: 16px;
  height: 16px;
  flex: none;
  transition: transform .4s var(--ease);
}

.btn:hover .btn-ico { transform: translateX(3px); }

.btn--red { --btn-bg: var(--red); --btn-fg: #fff; }
.btn--red::after { background: var(--ink); }
.btn--red:hover { box-shadow: 0 12px 30px rgba(18,17,16,.22); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border-color: var(--line);
}
.btn--ghost:hover { border-color: transparent; }

.btn--light {
  --btn-bg: #fff;
  --btn-fg: var(--ink);
}

.btn--outline-light {
  --btn-bg: transparent;
  --btn-fg: #fff;
  border-color: rgba(255,255,255,.28);
}

.btn--sm { padding: 11px 22px; font-size: 0.84rem; }
.btn--lg { padding: 19px 38px; font-size: 1rem; }
.btn--block { width: 100%; }

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

/* Text link with animated underline */
.link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--ink);
  padding-bottom: 3px;
}

.link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transform-origin: right;
  transform: scaleX(1);
  transition: transform .45s var(--ease);
}

.link:hover { color: var(--red); }
.link:hover::after { transform: scaleX(0); transform-origin: left; }
.link svg { width: 15px; height: 15px; transition: transform .4s var(--ease); }
.link:hover svg { transform: translateX(4px); }
.link.on-dark { color: #fff; }
.link.on-dark:hover { color: #E9A8B7; }

/* ---------- 5. Announcement Bar ---------- */

.announce {
  position: relative;
  z-index: 60;
  background: var(--ink);
  color: rgba(255,255,255,.86);
  height: var(--bar-h);
  display: flex;
  align-items: center;
  overflow: hidden;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}

.announce__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.announce__msg {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.announce__pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--red);
  color: #fff;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  flex: none;
}

.announce__msg a { border-bottom: 1px solid rgba(255,255,255,.3); }
.announce__msg a:hover { color: #fff; border-color: #fff; }

.announce__meta {
  display: flex;
  align-items: center;
  gap: 22px;
  color: rgba(255,255,255,.6);
  white-space: nowrap;
}

.announce__meta a:hover { color: #fff; }

/* ---------- 6. Header / Navigation ---------- */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  background: rgba(251, 249, 246, 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: background .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease), height .4s var(--ease);
}

.header.is-stuck {
  border-bottom-color: var(--line-soft);
  box-shadow: 0 1px 24px rgba(18,17,16,.05);
  height: 70px;
}

.header.is-open {
  background: var(--paper);
  border-bottom-color: transparent;
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  height: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
  transition: opacity .3s var(--ease);
}

.brand:hover { opacity: .72; }

.brand__mark {
  height: clamp(34px, 3.4vw, 44px);
  width: auto;
  transition: height .4s var(--ease);
}

.header.is-stuck .brand__mark { height: 32px; }

/* Primary nav */
.nav { display: flex; align-items: center; gap: 2px; height: 100%; }

.nav__item { height: 100%; display: flex; align-items: center; }

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 15px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-700);
  letter-spacing: -0.005em;
  white-space: nowrap;
  cursor: pointer;
  transition: color .25s var(--ease), background .25s var(--ease);
}

.nav__link:hover,
.nav__item.is-active .nav__link,
.nav__link[aria-expanded="true"] {
  color: var(--ink);
  background: rgba(18,17,16,.045);
}

.nav__link[aria-current="page"] { color: var(--red); }

.nav__caret {
  width: 9px;
  height: 9px;
  flex: none;
  opacity: .48;
  transition: transform .35s var(--ease), opacity .25s var(--ease);
}

.nav__link[aria-expanded="true"] .nav__caret { transform: rotate(180deg); opacity: .9; }

.header__actions { display: flex; align-items: center; gap: 12px; flex: none; }

.header__ghost-link {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink-500);
  padding: 8px 4px;
}
.header__ghost-link:hover { color: var(--ink); }

/* Burger */
.burger {
  display: none;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  position: relative;
  flex: none;
  transition: background .3s var(--ease), border-color .3s var(--ease);
}

.burger:hover { background: rgba(18,17,16,.04); }

.burger span {
  position: absolute;
  left: 50%;
  width: 17px;
  height: 1.6px;
  background: var(--ink);
  border-radius: 2px;
  transform: translateX(-50%);
  transition: transform .45s var(--ease), opacity .3s var(--ease), width .3s var(--ease);
}

.burger span:nth-child(1) { top: 18px; }
.burger span:nth-child(2) { top: 23.5px; width: 12px; }
.burger span:nth-child(3) { top: 29px; }

.burger.is-active span:nth-child(1) { top: 23.5px; transform: translateX(-50%) rotate(45deg); }
.burger.is-active span:nth-child(2) { opacity: 0; width: 0; }
.burger.is-active span:nth-child(3) { top: 23.5px; transform: translateX(-50%) rotate(-45deg); }

/* ---------- 7. Mega Menu ---------- */

.mega-wrap {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 95;
  pointer-events: none;
}

.mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  pointer-events: none;
  background: var(--paper);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 30px 70px -20px rgba(18,17,16,.22);
  transition: opacity .38s var(--ease), transform .48s var(--ease), visibility .38s;
}

.mega.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.mega__inner {
  display: grid;
  grid-template-columns: 0.78fr 1.72fr 0.92fr;
  gap: clamp(24px, 3vw, 52px);
  max-width: var(--max);
  margin-inline: auto;
  padding: clamp(34px, 3.4vw, 52px) var(--gutter) clamp(30px, 3vw, 46px);
  align-items: start;
}

/* Column A — intro */
.mega__intro { max-width: 300px; }

.mega__intro .eyebrow { margin-bottom: 14px; }

.mega__title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2vw, 2.05rem);
  line-height: 1.1;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}

.mega__blurb {
  font-size: 0.9rem;
  line-height: 1.62;
  color: var(--ink-500);
  margin-bottom: 24px;
}

.mega__intro-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--red);
}
.mega__intro-cta svg { width: 14px; height: 14px; transition: transform .4s var(--ease); }
.mega__intro-cta:hover svg { transform: translateX(4px); }

/* Column B — links */
.mega__links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px clamp(14px, 1.6vw, 28px);
  align-items: start;
  border-left: 1px solid var(--line-soft);
  border-right: 1px solid var(--line-soft);
  padding-inline: clamp(18px, 2.4vw, 40px);
}

.mega__links--single { grid-template-columns: 1fr; }

/* Each heading + its links form one self-contained column */
.mega__links-group { display: grid; align-content: start; gap: 2px; }

.mega-link {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 13px 14px;
  border-radius: var(--r-sm);
  transition: background .3s var(--ease), transform .35s var(--ease);
}

.mega-link:hover { background: var(--white); box-shadow: var(--shadow-sm); transform: translateX(2px); }

.mega-link__ico {
  width: 38px;
  height: 38px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--red-soft);
  color: var(--red);
  transition: background .3s var(--ease), color .3s var(--ease), transform .4s var(--ease);
}

.mega-link__ico svg { width: 18px; height: 18px; stroke-width: 1.6; }

.mega-link:hover .mega-link__ico {
  background: var(--red);
  color: #fff;
  transform: rotate(-6deg) scale(1.04);
}

.mega-link__name {
  display: block;
  font-size: 0.93rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.35;
  margin-bottom: 2px;
}

.mega-link__desc {
  display: block;
  font-size: 0.79rem;
  line-height: 1.5;
  color: var(--ink-500);
}

.mega-link__tag {
  display: inline-block;
  margin-left: 7px;
  padding: 1px 7px;
  border-radius: var(--r-pill);
  background: var(--red);
  color: #fff;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  vertical-align: middle;
}

.mega__links-head {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-300);
  padding: 4px 14px 10px;
}

/* Column C — feature card */
.mega__feature {
  position: relative;
  display: block;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--ink);
  min-height: 320px;
  isolation: isolate;
}

.mega__feature img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 1s var(--ease);
}

.mega__feature::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(178deg, rgba(18,17,16,.28) 0%, rgba(18,17,16,.5) 34%, rgba(18,17,16,.86) 68%, rgba(18,17,16,.96) 100%);
}

.mega__feature:hover img { transform: scale(1.06); }

.mega__feature-body {
  position: absolute;
  inset: auto 0 0 0;
  padding: 24px;
  color: #fff;
}

.mega__feature-tag {
  display: inline-block;
  padding: 4px 11px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.16);
  backdrop-filter: blur(8px);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.mega__feature h4 { color: #fff; margin-bottom: 7px; }

.mega__feature p {
  font-size: 0.82rem;
  line-height: 1.55;
  color: rgba(255,255,255,.74);
  margin-bottom: 14px;
}

.mega__feature-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
}
.mega__feature-link svg { width: 14px; height: 14px; transition: transform .4s var(--ease); }
.mega__feature:hover .mega__feature-link svg { transform: translateX(4px); }

/* Mega footer strip */
.mega__foot {
  border-top: 1px solid var(--line-soft);
  background: var(--paper-warm);
}

.mega__foot-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  max-width: var(--max);
  margin-inline: auto;
  padding: 15px var(--gutter);
  font-size: 0.83rem;
  color: var(--ink-500);
}

.mega__foot-inner strong { color: var(--ink); font-weight: 700; }

.mega__foot-links { display: flex; gap: 22px; flex-wrap: wrap; }
.mega__foot-links a { font-weight: 600; color: var(--ink-700); }
.mega__foot-links a:hover { color: var(--red); }

/* Scrim behind open mega menu */
.scrim {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(18,17,16,.34);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s var(--ease), visibility .4s;
}

.scrim.is-visible { opacity: 1; visibility: visible; }

/* ---------- 8. Mobile Navigation ---------- */

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform .6s var(--ease), visibility .6s;
  overflow: hidden;
}

/* Use the dynamic viewport unit where supported so the sticky footer CTA
   is not hidden behind mobile browser chrome. */
@supports (height: 100dvh) {
  .mobile-nav { height: 100dvh; bottom: auto; }
}

.mobile-nav.is-open { transform: translateY(0); visibility: visible; }

.mobile-nav__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px var(--gutter);
  padding-top: calc(14px + env(safe-area-inset-top));
  border-bottom: 1px solid var(--line-soft);
  background: var(--paper);
  flex: none;
}

.mobile-nav__top .brand__mark { height: 36px; }

.mobile-nav__body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px var(--gutter) 28px;
  -webkit-overflow-scrolling: touch;
}

/* ---- Section accordions ---- */

.m-group { border-bottom: 1px solid var(--line-soft); display: block; }

.m-group__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 62px;
  padding: 15px 2px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: var(--ink);
  transition: color .3s var(--ease);
}

.m-group__label { display: block; }

.m-group__tag {
  display: inline-block;
  margin-left: 9px;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  background: var(--red);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  vertical-align: middle;
}

.m-group__trigger .plus {
  position: relative;
  width: 32px;
  height: 32px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 50%;
  transition: background .35s var(--ease), border-color .35s var(--ease);
}

.m-group__trigger .plus::before,
.m-group__trigger .plus::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--ink);
  transform: translate(-50%, -50%);
  transition: transform .4s var(--ease), opacity .3s var(--ease), background .3s var(--ease);
}
.m-group__trigger .plus::before { width: 12px; height: 1.5px; }
.m-group__trigger .plus::after  { width: 1.5px; height: 12px; }

.m-group.is-open .m-group__trigger { color: var(--red); }
.m-group.is-open .plus { background: var(--red); border-color: var(--red); }
.m-group.is-open .plus::before { background: #fff; }
.m-group.is-open .plus::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }

/* Direct-link row: a group that navigates instead of expanding. Kept for reuse. */
.m-group--link .m-group__chev {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--ink);
}
.m-group--link .m-group__chev svg { width: 14px; height: 14px; }

.m-group__panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height .5s var(--ease);
}

.m-group__list { padding: 0 0 18px; display: grid; gap: 16px; }

/* Section landing card */
.m-intro {
  display: grid;
  gap: 4px;
  padding: 13px 16px;
  border-radius: var(--r-sm);
  background: var(--ink);
  color: #fff;
}

.m-intro__eyebrow {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #E9A8B7;
}

.m-intro__title {
  font-family: var(--font-display);
  font-size: 0.99rem;
  line-height: 1.22;
  letter-spacing: -0.015em;
  color: #fff;
}

.m-intro__cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 3px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
}
.m-intro__cta svg { width: 13px; height: 13px; }

/* Grouped link columns */
.m-col { display: grid; gap: 6px; }

.m-col__head {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-300);
  padding: 2px 2px 4px;
}

.m-link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  background: var(--paper-warm);
  border: 1px solid transparent;
  transition: background .3s var(--ease), border-color .3s var(--ease);
}

.m-link:active { background: var(--sand); border-color: var(--line-soft); }

.m-link__ico {
  width: 36px;
  height: 36px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--red-soft);
  color: var(--red);
}
.m-link__ico svg { width: 17px; height: 17px; stroke-width: 1.6; }

.m-link__text { min-width: 0; flex: 1; }

.m-link__name {
  display: block;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.m-link__desc {
  display: block;
  margin-top: 1px;
  font-size: 0.75rem;
  line-height: 1.36;
  color: var(--ink-500);
}

.m-link__tag {
  display: inline-block;
  margin-left: 7px;
  padding: 1px 7px;
  border-radius: var(--r-pill);
  background: var(--red);
  color: #fff;
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  vertical-align: middle;
}

.m-link__go { flex: none; color: var(--ink-300); }
.m-link__go svg { width: 15px; height: 15px; }

.m-link[aria-current="page"] { background: var(--red-soft); }
.m-link[aria-current="page"] .m-link__name { color: var(--red-deep); }

/* Tablets have room for the desktop mega menu's two-column shape:
   the section intro spans the full width, the link groups sit side by side.
   Bounded at 1080px, where the real mega menu takes over. */
@media (min-width: 600px) and (max-width: 1080px) {
  .m-group__list { grid-template-columns: 1fr 1fr; gap: 18px 20px; align-items: start; }
  .m-intro { grid-column: 1 / -1; }
  .m-group__trigger { font-size: 1.5rem; }
  .m-centres__grid { grid-template-columns: repeat(3, 1fr); }
}

/* Centre quick-links strip */
.m-centres { padding: 22px 0 4px; }

.m-centres__head {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-300);
  margin-bottom: 10px;
}

.m-centres__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }

.m-centres__grid a {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 10px 12px;
  border-radius: var(--r-xs);
  border: 1px solid var(--line-soft);
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--ink-700);
}
.m-centres__grid a svg { width: 14px; height: 14px; flex: none; color: var(--red); }
.m-centres__grid a:active { background: var(--paper-warm); }

/* ---- Sticky footer ---- */

.mobile-nav__foot {
  flex: none;
  padding: 14px var(--gutter) calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line-soft);
  background: var(--paper-warm);
  display: grid;
  gap: 11px;
}

.mobile-nav__cta { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.mobile-nav__cta .btn { width: 100%; padding: 14px 16px; font-size: 0.86rem; }

.mobile-nav__contact {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 0.76rem;
  color: var(--ink-500);
}
.mobile-nav__contact a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding-block: 8px;
  font-weight: 600;
  color: var(--ink-700);
}
.mobile-nav__contact a svg { width: 13px; height: 13px; color: var(--red); flex: none; }

/* ---------- 9. Hero ---------- */

.hero {
  position: relative;
  min-height: min(92vh, 940px);
  display: flex;
  align-items: flex-end;
  padding-block: clamp(90px, 12vw, 150px) clamp(44px, 6vw, 76px);
  overflow: hidden;
  background: var(--ink);
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  transform: scale(1.06);
  animation: heroZoom 12s var(--ease) forwards;
}

@keyframes heroZoom { to { transform: scale(1); } }

.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(184deg, rgba(18,17,16,.62) 0%, rgba(18,17,16,.12) 34%, rgba(18,17,16,.34) 62%, rgba(18,17,16,.9) 100%),
    radial-gradient(120% 70% at 15% 100%, rgba(150,8,42,.36) 0%, transparent 60%);
}

.hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: end;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 8px 8px 8px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(14px);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  margin-bottom: 26px;
}

.hero__eyebrow b {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  background: var(--red);
  color: #fff;
  font-size: 0.63rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hero__eyebrow span { padding-right: 12px; }

.hero h1 {
  color: #fff;
  font-size: clamp(3rem, 7.4vw, 7rem);
  line-height: 0.96;
  letter-spacing: -0.035em;
  font-variation-settings: "SOFT" 20, "WONK" 1, "opsz" 144;
  text-shadow: 0 2px 40px rgba(0,0,0,.2);
}

.hero h1 em {
  font-style: italic;
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 144;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: #F5B9C6;
}

/* The full vision statement runs to three or four lines, so it steps down a size. */
.hero h1.hero__h1--long {
  font-size: clamp(2.5rem, 5.3vw, 5.1rem);
  line-height: 1.02;
}
.hero h1.hero__h1--long em { white-space: nowrap; }

.hero__sub {
  margin-top: 26px;
  max-width: 46ch;
  font-size: clamp(1.02rem, 1.35vw, 1.2rem);
  line-height: 1.62;
  color: rgba(255,255,255,.8);
}

.hero__cta { margin-top: 36px; }

.hero__aside {
  display: grid;
  gap: 14px;
  padding-bottom: 6px;
}

.hero-card {
  padding: 22px 24px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.15);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  color: #fff;
  transition: background .4s var(--ease), transform .4s var(--ease);
}

.hero-card:hover { background: rgba(255,255,255,.14); transform: translateY(-3px); }

.hero-card__num {
  font-family: var(--font-display);
  font-size: 2.5rem;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #fff;
  margin-bottom: 6px;
}

.hero-card__num sup { font-size: 0.42em; vertical-align: super; color: #F5B9C6; }

.hero-card__label {
  font-size: 0.78rem;
  line-height: 1.45;
  color: rgba(255,255,255,.66);
}

.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 8px;
  font-size: 0.64rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
}

.hero__scroll i {
  display: block;
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, rgba(255,255,255,.5), transparent);
  animation: scrollPulse 2.2s ease-in-out infinite;
}

@keyframes scrollPulse {
  0%, 100% { transform: scaleY(.4); opacity: .3; transform-origin: top; }
  50%      { transform: scaleY(1);  opacity: 1;  transform-origin: top; }
}

/* ---------- 10. Marquee ---------- */

.marquee {
  padding-block: clamp(22px, 2.6vw, 34px);
  background: var(--ink);
  color: #fff;
  overflow: hidden;
  border-block: 1px solid rgba(255,255,255,.08);
}

.marquee--light { background: var(--sand); color: var(--ink); border-color: var(--line-soft); }

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 42s linear infinite;
}

.marquee:hover .marquee__track { animation-play-state: paused; }

.marquee__group {
  display: flex;
  align-items: center;
  gap: clamp(28px, 4vw, 60px);
  padding-right: clamp(28px, 4vw, 60px);
}

.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: clamp(28px, 4vw, 60px);
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.5vw, 2.3rem);
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: inherit;
}

.marquee__item i {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--red);
  flex: none;
}

.marquee__item em {
  font-style: italic;
  font-variation-settings: "SOFT" 60, "WONK" 1;
  opacity: .55;
}

@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- 11. Section Components ---------- */

/* Split feature (image + text) */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 5vw, 92px);
  align-items: center;
}

.split--reverse .split__media { order: 2; }

.split__media {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3.4;
  background: var(--sand);
}

.split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}

.split__media:hover img { transform: scale(1.045); }

.split__media--tall { aspect-ratio: 4 / 5; }

.split__badge {
  position: absolute;
  right: 20px;
  bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-md);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink);
}

.split__badge img { width: 34px; height: 34px; object-fit: contain; }

.split__body h2 + .lede { margin-top: 22px; }
.split__body .btn-row { margin-top: 34px; }

/* Inline check list */
.checks { display: grid; gap: 14px; margin-top: 30px; }

/* Block flow with the tick hung in the left margin — a flex row here would
   split inline children (a <strong> lead-in, a trailing link) into their own
   columns and break the sentence apart. */
.checks li {
  position: relative;
  padding-left: 34px;
  list-style: none;
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--ink-700);
}

.checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--red-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23CE0E37' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 11px no-repeat;
}

/* Quote block */
.pullquote {
  max-width: 22ch;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.4rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variation-settings: "SOFT" 30, "WONK" 1;
}

/* Big statement */
.statement {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4.1vw, 3.6rem);
  line-height: 1.14;
  letter-spacing: -0.028em;
  color: var(--ink);
  max-width: 20ch;
}

.section--ink .statement { color: #fff; }

.statement em {
  font-style: italic;
  color: var(--red);
  font-variation-settings: "SOFT" 60, "WONK" 1;
}

.section--ink .statement em { color: #F5B9C6; }

/* ---------- 12. Cards / Bento / Grids ---------- */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 2.6vw, 38px);
  border-radius: var(--r-md);
  background: var(--white);
  border: 1px solid var(--line-soft);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
  overflow: hidden;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}

.card__ico {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: var(--red-soft);
  color: var(--red);
  margin-bottom: 24px;
  transition: background .4s var(--ease), color .4s var(--ease), transform .5s var(--ease);
}

.card__ico svg { width: 24px; height: 24px; stroke-width: 1.5; }
.card__ico img { width: 28px; height: 28px; object-fit: contain; }

.card:hover .card__ico { background: var(--red); color: #fff; transform: rotate(-7deg); }

.card h4 { margin-bottom: 11px; }

/* Keep headings clear of the oversized index numeral */
.card__num ~ h4 { padding-right: 58px; }

.card p { font-size: 0.93rem; line-height: 1.62; color: var(--ink-500); }

.card__num {
  position: absolute;
  top: 22px;
  right: 26px;
  font-family: var(--font-display);
  font-size: 3.4rem;
  line-height: 1;
  color: var(--ink);
  opacity: .07;
  letter-spacing: -0.04em;
  transition: opacity .4s var(--ease), color .4s var(--ease);
}

.card:hover .card__num { opacity: .14; color: var(--red); }

.card__foot { margin-top: auto; padding-top: 24px; }

.card--dark {
  background: var(--ink-900);
  border-color: rgba(255,255,255,.08);
}
.card--dark h4 { color: #fff; }
.card--dark p { color: rgba(255,255,255,.6); }
.card--dark .card__ico { background: rgba(255,255,255,.1); color: #fff; }

/* Image card */
.icard {
  position: relative;
  display: block;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--ink);
  aspect-ratio: 3 / 3.6;
  isolation: isolate;
}

.icard img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 1.1s var(--ease);
}

.icard::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(178deg, rgba(18,17,16,0) 26%, rgba(18,17,16,.55) 62%, rgba(18,17,16,.94) 100%);
  transition: opacity .5s var(--ease);
}

.icard:hover img { transform: scale(1.07); }

.icard__body {
  position: absolute;
  inset: auto 0 0 0;
  padding: clamp(22px, 2.2vw, 32px);
  color: #fff;
}

.icard__kicker {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #F5B9C6;
  margin-bottom: 10px;
}

.icard h4 { color: #fff; margin-bottom: 8px; }

.icard p {
  font-size: 0.86rem;
  line-height: 1.55;
  color: rgba(255,255,255,.7);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .55s var(--ease), opacity .4s var(--ease), margin .5s var(--ease);
}

.icard:hover p { max-height: 130px; opacity: 1; margin-top: 4px; }

.icard__arrow {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  color: #fff;
  transform: scale(.8);
  opacity: 0;
  transition: transform .5s var(--ease), opacity .4s var(--ease), background .4s var(--ease);
}

.icard__arrow svg { width: 16px; height: 16px; }
.icard:hover .icard__arrow { transform: scale(1); opacity: 1; }
.icard:hover .icard__arrow { background: var(--red); }

/* Bento */
.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(14px, 1.5vw, 22px);
  grid-auto-rows: minmax(190px, auto);
}

.bento > * { grid-column: span 4; }
.bento .b-wide  { grid-column: span 8; }
.bento .b-half  { grid-column: span 6; }
.bento .b-third { grid-column: span 3; }
.bento .b-full  { grid-column: span 12; }
.bento .b-tall  { grid-row: span 2; }

.bento-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(24px, 2.4vw, 36px);
  border-radius: var(--r-md);
  background: var(--white);
  border: 1px solid var(--line-soft);
  overflow: hidden;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}

.bento-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.bento-tile h4 { margin-bottom: 9px; }
.bento-tile p { font-size: 0.9rem; line-height: 1.6; color: var(--ink-500); }

.bento-tile--img { color: #fff; isolation: isolate; }
.bento-tile--img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 1.1s var(--ease);
}
.bento-tile--img::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(18,17,16,.14) 0%, rgba(18,17,16,.4) 42%, rgba(18,17,16,.82) 74%, rgba(18,17,16,.94) 100%);
}
.bento-tile--img:hover img { transform: scale(1.06); }
.bento-tile--img h4 { color: #fff; }
.bento-tile--img p { color: rgba(255,255,255,.74); }

.bento-tile--red { background: var(--red); border-color: transparent; }
.bento-tile--red h4, .bento-tile--red .bento-stat { color: #fff; }
.bento-tile--red p { color: rgba(255,255,255,.82); }

.bento-tile--ink { background: var(--ink); border-color: transparent; }
.bento-tile--ink h4, .bento-tile--ink .bento-stat { color: #fff; }
.bento-tile--ink p { color: rgba(255,255,255,.62); }

.bento-stat {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 4.4vw, 4.2rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink);
  margin-bottom: 10px;
}

.bento-tile__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: auto;
  padding-bottom: 28px;
}

.bento-tile__ico {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: var(--red-soft);
  color: var(--red);
}
.bento-tile__ico svg { width: 21px; height: 21px; stroke-width: 1.5; }
.bento-tile--ink .bento-tile__ico,
.bento-tile--red .bento-tile__ico { background: rgba(255,255,255,.14); color: #fff; }

/* Programme card */
.prog-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line-soft);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}

.prog-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

.prog-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sand); }
.prog-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.prog-card:hover .prog-card__media img { transform: scale(1.06); }

.prog-card__age {
  position: absolute;
  left: 16px;
  top: 16px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(10px);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--ink);
}

.prog-card__body { padding: clamp(22px, 2.2vw, 30px); display: flex; flex-direction: column; flex: 1; }
.prog-card__body h4 { margin-bottom: 10px; }
.prog-card__body p { font-size: 0.9rem; line-height: 1.62; color: var(--ink-500); }
.prog-card__body .link { margin-top: auto; padding-top: 22px; }

/* Person card */
.person { text-align: left; }

.person__media {
  position: relative;
  aspect-ratio: 3 / 3.6;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--sand);
  margin-bottom: 18px;
}

.person__media--initials { display: grid; place-items: center; background: var(--sand); }
.person .person__media--initials span {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ink-300);
}

.person__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease), filter .6s var(--ease); }
.person:hover .person__media img { transform: scale(1.05); }

.person h5 { margin-bottom: 3px; }

.person span {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--red);
}

/* Centre card */
.centre-card {
  position: relative;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line-soft);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}

.centre-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.centre-card__media { position: relative; overflow: hidden; min-height: 220px; background: var(--sand); }
.centre-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.centre-card:hover .centre-card__media img { transform: scale(1.06); }

.centre-card__body { padding: clamp(24px, 2.4vw, 34px); display: flex; flex-direction: column; }

.centre-card__region {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 12px;
}

.centre-card h4 { margin-bottom: 12px; font-size: clamp(1.1rem, 1.5vw, 1.32rem); }

.centre-card__meta { display: grid; gap: 9px; font-size: 0.87rem; color: var(--ink-500); }
.centre-card__meta div { display: flex; gap: 10px; align-items: flex-start; }
.centre-card__meta svg { width: 15px; height: 15px; flex: none; margin-top: 4px; color: var(--ink-300); stroke-width: 1.7; }

.centre-card__tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }

.tag {
  display: inline-block;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: var(--paper-warm);
  border: 1px solid var(--line-soft);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink-700);
}

.tag--red { background: var(--red-soft); border-color: transparent; color: var(--red-deep); }
.tag--sage { background: var(--sage-soft); border-color: transparent; color: var(--sage); }

.centre-card__foot { margin-top: auto; padding-top: 22px; }

/* ---------- 13. Tabs, Timeline, Accordion ---------- */

/* Tabs */
.tabs__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 7px;
  border-radius: var(--r-pill);
  background: var(--paper-warm);
  border: 1px solid var(--line-soft);
  width: fit-content;
  max-width: 100%;
  margin-bottom: clamp(32px, 4vw, 52px);
}

.tabs__nav--center { margin-inline: auto; }

.tab-btn {
  padding: 12px 26px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink-500);
  cursor: pointer;
  white-space: nowrap;
  transition: background .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease);
}

.tab-btn:hover { color: var(--ink); }

.tab-btn.is-active {
  background: var(--ink);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.tab-panel { display: none; }
.tab-panel.is-active { display: block; animation: fadeUp .6s var(--ease) both; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Timeline (A Day at LSS) */
.timeline { position: relative; display: grid; gap: 0; }

.timeline::before {
  content: "";
  position: absolute;
  left: 108px;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--line), var(--line), transparent);
}

.tl-item {
  position: relative;
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 44px;
  padding-block: clamp(10px, 1.1vw, 15px);
  align-items: center;
}

.tl-item__time {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  text-align: right;
  padding-top: 3px;
  white-space: nowrap;
}

.tl-item__time small { display: block; font-size: 0.68rem; font-family: var(--font-body); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-300); }

.tl-item::before {
  content: "";
  position: absolute;
  left: 103px;
  top: 50%;
  margin-top: -5.5px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--ink-300);
  transition: background .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
  z-index: 1;
}

.tl-item:hover::before { background: var(--red); border-color: var(--red); transform: scale(1.25); }
.tl-item__time { align-self: center; }

.tl-item__body {
  display: grid;
  grid-template-columns: 1fr 176px;
  gap: 30px;
  align-items: center;
  padding: clamp(18px, 1.8vw, 24px);
  border-radius: var(--r-md);
  transition: background .4s var(--ease), box-shadow .4s var(--ease);
}

.tl-item:hover .tl-item__body { background: var(--white); box-shadow: var(--shadow-md); }

.tl-item__body h4 { margin-bottom: 8px; }
.tl-item__body p { font-size: 0.92rem; line-height: 1.62; color: var(--ink-500); }

.tl-item__thumb {
  aspect-ratio: 4 / 3;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--sand);
}
.tl-item__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.tl-item:hover .tl-item__thumb img { transform: scale(1.07); }

/* Accordion */
.acc { border-top: 1px solid var(--line); }

.acc__item { border-bottom: 1px solid var(--line); }

.acc__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(22px, 2.2vw, 30px) 4px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  font-size: clamp(1.08rem, 1.6vw, 1.42rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
  transition: color .3s var(--ease);
}

.acc__trigger:hover { color: var(--red); }

.acc__icon {
  position: relative;
  width: 36px;
  height: 36px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 50%;
  transition: background .4s var(--ease), border-color .4s var(--ease);
}

.acc__icon::before, .acc__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--ink);
  transform: translate(-50%, -50%);
  transition: transform .45s var(--ease), opacity .3s var(--ease), background .3s var(--ease);
}
.acc__icon::before { width: 13px; height: 1.5px; }
.acc__icon::after  { width: 1.5px; height: 13px; }

.acc__item.is-open .acc__icon { background: var(--red); border-color: var(--red); }
.acc__item.is-open .acc__icon::before { background: #fff; }
.acc__item.is-open .acc__icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }

.acc__panel { overflow: hidden; max-height: 0; transition: max-height .55s var(--ease); }

.acc__inner {
  padding: 0 4px clamp(24px, 2.4vw, 32px);
  max-width: 74ch;
  font-size: 0.97rem;
  line-height: 1.72;
  color: var(--ink-500);
}

.acc__inner > * + * { margin-top: 14px; }
.acc__inner ul { padding-left: 20px; }
.acc__inner li { margin-top: 7px; }

/* Steps */
.steps { counter-reset: step; display: grid; gap: clamp(18px, 2vw, 26px); }

.step {
  position: relative;
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: clamp(20px, 2.4vw, 34px);
  align-items: start;
  padding: clamp(24px, 2.6vw, 34px);
  border-radius: var(--r-md);
  background: var(--white);
  border: 1px solid var(--line-soft);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}

.step:hover { transform: translateX(5px); box-shadow: var(--shadow-md); }

.step__n {
  counter-increment: step;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--red-soft);
  color: var(--red);
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  transition: background .4s var(--ease), color .4s var(--ease);
}

.step__n::before { content: counter(step, decimal-leading-zero); }

.step:hover .step__n { background: var(--red); color: #fff; }

.step h4 { margin-bottom: 9px; }
.step p { font-size: 0.94rem; line-height: 1.66; color: var(--ink-500); }

/* ---------- 14. Testimonials & Slider ---------- */

.tslider { position: relative; }

.tslider__viewport { overflow: hidden; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }

.tslider__track {
  display: flex;
  gap: clamp(18px, 2vw, 28px);
  transition: transform .7s var(--ease);
  will-change: transform;
}

.tquote {
  flex: 0 0 clamp(300px, 34%, 460px);
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 2.8vw, 40px);
  border-radius: var(--r-md);
  background: var(--white);
  border: 1px solid var(--line-soft);
  transition: box-shadow .5s var(--ease);
}

.tquote:hover { box-shadow: var(--shadow-md); }

.tquote__stars { display: flex; gap: 3px; margin-bottom: 20px; color: var(--red); }
.tquote__stars svg { width: 15px; height: 15px; fill: currentColor; }

.tquote__text {
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 1.35vw, 1.24rem);
  line-height: 1.48;
  letter-spacing: -0.015em;
  color: var(--ink);
  font-variation-settings: "SOFT" 20, "WONK" 1;
  margin-bottom: 26px;
}

.tquote__who { display: flex; align-items: center; gap: 14px; margin-top: auto; }

.tquote__ava {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  background: var(--sand);
}

.tquote__who b { display: block; font-size: 0.92rem; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.tquote__who span { display: block; font-size: 0.78rem; color: var(--ink-500); }

.slider-nav { display: flex; gap: 10px; }

.slider-btn {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}

.slider-btn svg { width: 17px; height: 17px; }
.slider-btn:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.slider-btn:disabled { opacity: .3; cursor: not-allowed; }
.slider-btn:disabled:hover { background: transparent; color: var(--ink); border-color: var(--line); }

.section--ink .slider-btn { border-color: var(--line-dark); color: #fff; }
.section--ink .slider-btn:hover { background: #fff; color: var(--ink); }
.section--ink .tquote { background: var(--ink-900); border-color: rgba(255,255,255,.08); }
.section--ink .tquote__text { color: #fff; }
.section--ink .tquote__who b { color: #fff; }
.section--ink .tquote__who span { color: rgba(255,255,255,.55); }

/* ---------- 15. Stats ---------- */

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 2.4vw, 40px);
}

.stat { padding-top: 26px; border-top: 2px solid var(--ink); }
.section--ink .stat { border-top-color: rgba(255,255,255,.3); }

.stat__n {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 4.6vw, 4.4rem);
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--ink);
  margin-bottom: 12px;
}

.section--ink .stat__n { color: #fff; }
.stat__n sup { font-size: .4em; vertical-align: super; color: var(--red); }
.section--ink .stat__n sup { color: #F5B9C6; }

.stat__label { font-size: 0.88rem; line-height: 1.55; color: var(--ink-500); max-width: 24ch; }
.section--ink .stat__label { color: rgba(255,255,255,.58); }

/* ---------- 16. Gallery & Lightbox ---------- */

.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 1.2vw, 18px);
}

.gallery__item {
  position: relative;
  border-radius: var(--r-sm);
  overflow: hidden;
  aspect-ratio: 1;
  background: var(--sand);
  cursor: pointer;
}

.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease), filter .5s var(--ease); }
.gallery__item:hover img { transform: scale(1.07); }

.gallery__item--wide { grid-column: span 2; aspect-ratio: 2 / 1; }
.gallery__item--tall { grid-row: span 2; aspect-ratio: 1 / 2; }

.gallery__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(18,17,16,.24);
  opacity: 0;
  transition: opacity .4s var(--ease);
}
.gallery__item:hover::after { opacity: 1; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(20px, 5vw, 60px);
  background: rgba(12,11,10,.94);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s var(--ease), visibility .4s;
}

.lightbox.is-open { opacity: 1; visibility: visible; }

.lightbox img {
  max-width: 100%;
  max-height: 86vh;
  border-radius: var(--r-sm);
  object-fit: contain;
  transform: scale(.94);
  transition: transform .5s var(--ease);
}

.lightbox.is-open img { transform: scale(1); }

.lightbox__close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.08);
  color: #fff;
  cursor: pointer;
  transition: background .3s var(--ease);
}
.lightbox__close:hover { background: rgba(255,255,255,.2); }
.lightbox__close svg { width: 18px; height: 18px; }

/* ---------- 17. Forms ---------- */

.form { display: grid; gap: 18px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.field { display: grid; gap: 8px; }

.field label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 15px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--white);
  font-size: 0.95rem;
  color: var(--ink);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}

.field textarea { min-height: 132px; resize: vertical; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 4px var(--red-glow);
}

.field input::placeholder, .field textarea::placeholder { color: var(--ink-300); }

.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236C6862' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px;
  padding-right: 44px;
}

.form__note { font-size: 0.8rem; color: var(--ink-300); line-height: 1.6; }
/* The send failed (refused or offline): the form is kept and can be retried. */
.form__error {
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--red-soft);
  border: 1px solid rgba(206, 14, 55, 0.25);
  color: var(--red-deep);
  font-size: 0.9rem;
  line-height: 1.55;
}
.form__error p { margin: 0 0 10px; }
.form__retry { color: var(--red-deep); border-color: rgba(150, 8, 42, 0.35); }

.form-panel {
  padding: clamp(28px, 3.2vw, 48px);
  border-radius: var(--r-lg);
  background: var(--white);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-md);
}

/* ---------- 18. CTA Band ---------- */

.cta-band {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  isolation: isolate;
}

.cta-band__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.cta-band__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .3; }
.cta-band__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(90% 100% at 20% 0%, rgba(150,8,42,.5) 0%, transparent 62%), linear-gradient(180deg, rgba(18,17,16,.7), rgba(18,17,16,.94));
}

.cta-band__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: clamp(30px, 5vw, 80px);
  align-items: center;
  padding-block: clamp(72px, 8vw, 130px);
}

.cta-band h2 { color: #fff; }
.cta-band h2 em { font-style: italic; color: #F5B9C6; font-variation-settings: "SOFT" 60, "WONK" 1; }
.cta-band p { color: rgba(255,255,255,.78); margin-top: 22px; max-width: 52ch; }

.cta-band__side { display: grid; gap: 14px; }

.cta-mini {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  color: #fff;
  transition: background .4s var(--ease), transform .4s var(--ease);
}

.cta-mini:hover { background: rgba(255,255,255,.13); transform: translateX(4px); }

.cta-mini__ico {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--red);
  color: #fff;
}
.cta-mini__ico svg { width: 19px; height: 19px; stroke-width: 1.6; }

.cta-mini b { display: block; font-size: 0.92rem; font-weight: 700; color: #fff; }
.cta-mini span { display: block; font-size: 0.8rem; color: rgba(255,255,255,.75); }

/* ---------- 19. Footer ---------- */

.footer {
  background: var(--ink);
  color: rgba(255,255,255,.6);
  padding-top: clamp(60px, 7vw, 100px);
  overflow: hidden;
}

.footer a { color: rgba(255,255,255,.68); }
.footer a:hover { color: #fff; }

.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr) 1.3fr;
  gap: clamp(28px, 3.4vw, 56px);
  padding-bottom: clamp(48px, 5vw, 76px);
}

.footer__brand-mark {
  height: 46px;
  width: auto;
  margin-bottom: 22px;
  filter: brightness(0) invert(1);
  opacity: .95;
}

.footer__about { font-size: 0.89rem; line-height: 1.7; max-width: 34ch; }

.footer__socials { display: flex; gap: 10px; margin-top: 24px; }

.footer__socials a {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.14);
  transition: background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.footer__socials a:hover { background: var(--red); border-color: var(--red); transform: translateY(-3px); }
.footer__socials svg { width: 17px; height: 17px; }

.footer__col h5 {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  margin-bottom: 22px;
}

.footer__col ul { list-style: none; display: grid; gap: 11px; }
.footer__col li a { font-size: 0.9rem; }

.footer__contact { display: grid; gap: 16px; font-size: 0.89rem; line-height: 1.6; }
.footer__contact div { display: flex; gap: 12px; align-items: flex-start; }
.footer__contact svg { width: 16px; height: 16px; flex: none; margin-top: 4px; color: var(--red); stroke-width: 1.7; }
.footer__contact b { display: block; color: #fff; font-weight: 700; margin-bottom: 2px; }

.footer__badges { display: flex; gap: 12px; align-items: center; margin-top: 26px; flex-wrap: wrap; }
.footer__badges img { height: 44px; width: auto; object-fit: contain; background: #fff; border-radius: 8px; padding: 5px 9px; }

.footer__wordmark {
  font-family: var(--font-display);
  font-size: clamp(3rem, 13vw, 12rem);
  line-height: 0.82;
  letter-spacing: -0.05em;
  color: rgba(255,255,255,.055);
  white-space: nowrap;
  text-align: center;
  user-select: none;
  padding-block: clamp(10px, 2vw, 24px);
  pointer-events: none;
}

.footer__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-block: 26px;
  border-top: 1px solid rgba(255,255,255,.1);
  font-size: 0.8rem;
  color: rgba(255,255,255,.42);
}

.footer__legal { display: flex; gap: 22px; flex-wrap: wrap; }

/* ---------- 20. Page Headers (interior) ---------- */

.phead {
  position: relative;
  padding-block: clamp(72px, 9vw, 136px) clamp(52px, 6vw, 92px);
  background: var(--ink);
  color: rgba(255,255,255,.7);
  overflow: hidden;
  isolation: isolate;
}

.phead__bg { position: absolute; inset: 0; z-index: -2; }
.phead__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .42; }
.phead__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18,17,16,.86) 0%, rgba(18,17,16,.6) 42%, rgba(18,17,16,.9) 100%),
              radial-gradient(80% 90% at 12% 100%, rgba(150,8,42,.34), transparent 62%);
}

.phead__inner { position: relative; max-width: 900px; }
.phead h1 { color: #fff; font-size: clamp(2.6rem, 5.6vw, 5rem); }
.phead h1 em { font-style: italic; color: #F5B9C6; font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 144; font-weight: 600; letter-spacing: -0.005em; }
.phead .lede { color: rgba(255,255,255,.72); margin-top: 22px; }

.crumbs {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: rgba(255,255,255,.48);
  margin-bottom: 26px;
}
.crumbs a:hover { color: #fff; }
.crumbs span { opacity: .45; }

/* Anchor sub-nav */
.subnav {
  position: sticky;
  top: var(--header-h);
  z-index: 50;
  background: rgba(251,249,246,.86);
  backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--line-soft);
}

.subnav__inner {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  max-width: var(--max);
  margin-inline: auto;
  padding: 10px var(--gutter);
}
.subnav__inner::-webkit-scrollbar { display: none; }

.subnav a {
  padding: 10px 18px;
  border-radius: var(--r-pill);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink-500);
  white-space: nowrap;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.subnav a:hover, .subnav a.is-active { background: var(--ink); color: #fff; }

/* Map */
.map-embed {
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line-soft);
  background: var(--sand);
  aspect-ratio: 16 / 10;
}
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(.3) contrast(1.05); }

/* Notice / callout */
.callout {
  display: flex;
  gap: 18px;
  padding: clamp(22px, 2.4vw, 30px);
  border-radius: var(--r-md);
  background: var(--red-soft);
  border: 1px solid rgba(206,14,55,.14);
}
.callout__ico { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 11px; background: var(--red); color: #fff; }
.callout__ico svg { width: 18px; height: 18px; stroke-width: 1.8; }
.callout h5 { margin-bottom: 5px; }
.callout p { font-size: 0.9rem; line-height: 1.62; color: var(--ink-700); }

/* Fee table */
.table-wrap { overflow-x: auto; border-radius: var(--r-md); border: 1px solid var(--line-soft); background: var(--white); }

table.rates { width: 100%; border-collapse: collapse; min-width: 620px; }

table.rates th, table.rates td { padding: 17px 22px; text-align: left; font-size: 0.92rem; }

table.rates thead th {
  background: var(--ink);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

table.rates tbody tr { border-top: 1px solid var(--line-soft); }
table.rates tbody tr:hover { background: var(--paper-warm); }
table.rates td:first-child { font-weight: 700; color: var(--ink); }
table.rates td.num { font-family: var(--font-display); font-size: 1.05rem; color: var(--ink); letter-spacing: -0.01em; }

/* A rate cell can carry two tiers (POP / non-POP); the qualifier drops back to body type. */
table.rates td.num .rate { display: block; }
table.rates td.num .rate + .rate { margin-top: 10px; }
table.rates td.num .qual {
  display: block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-300);
  margin-top: 1px;
}

/* ---------- 20b. Beacons of Light + virtue chart ---------- */

/* Five pillars: three across, then two centred beneath. Six tracks make the
   centring exact rather than approximate. */
.beacons { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 34px); }
.beacons > * { grid-column: span 2; }
.beacons > *:nth-child(4) { grid-column: 2 / span 2; }
.beacons > *:nth-child(5) { grid-column: 4 / span 2; }

.beacons .card__num { font-size: 2.9rem; color: #fff; opacity: .16; }
.card--dark:hover .card__num { opacity: .28; color: #F5B9C6; }

@media (max-width: 900px) {
  .beacons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .beacons > *, .beacons > *:nth-child(4), .beacons > *:nth-child(5) { grid-column: auto; }
}
@media (max-width: 640px) { .beacons { grid-template-columns: 1fr; } }

.beacons .card--focus {
  border-color: rgba(233,168,183,.45);
  box-shadow: 0 0 0 1px rgba(233,168,183,.2), 0 18px 50px rgba(206,14,55,.18);
}

.beacons__verse {
  margin-top: 18px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  color: #DDB56A;
}
.beacons__verse span {
  display: block;
  margin-top: 4px;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
}

/* ---------- 20c. Curriculum page story ---------- */

/* Small gold labels use a deeper gold than --gold so they pass contrast on white */
.section--sage { background: var(--sage-soft); }

/* Curriculum at a glance: the interactive schoolhouse (roof, six pillars, foundation) */
.phead h1.phead__h1--long { font-size: clamp(2.1rem, 4.4vw, 3.9rem); max-width: 21ch; }
.house {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(18px, 2.6vw, 40px);
  align-items: stretch;
}
.house__build {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(18px, 3vw, 44px);
  border-radius: var(--r-lg);
  background: var(--paper-warm);
  border: 1px solid var(--line-soft);
}
.house__build button {
  border: 0;
  font: inherit;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  opacity: 0.8;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.25s ease, transform 0.25s ease, filter 0.25s ease;
}
.house__build button:hover { opacity: 1; filter: brightness(1.08); }
.house__build button.is-active { opacity: 1; }
.house__build button:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; opacity: 1; }
.house__roof {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: clamp(108px, 13vw, 156px);
  padding: 0 12px clamp(11px, 1.3vw, 16px);
  background: var(--red);
  clip-path: polygon(50% 0, 100% 64%, 100% 100%, 0 100%, 0 64%);
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 1.7vw, 1.4rem);
  letter-spacing: -0.01em;
}
.house__build .house__roof { font-family: var(--font-display); font-weight: 500; }
.house__roof span, .house__base span { padding-bottom: 2px; border-bottom: 2px solid transparent; }
.house__roof.is-active span, .house__base.is-active span { border-bottom-color: rgba(255,255,255,.9); }
.house__roof:focus-visible span { border-bottom-color: #fff; }
.house__pillars {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(5px, 0.9vw, 12px);
  margin: clamp(6px, 0.8vw, 10px) 4% 0;
}
.house__pillar {
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(214px, 25vw, 300px);
  padding: 10px 2px;
  border-radius: 10px 10px 4px 4px;
  background: var(--c);
  font-size: clamp(0.7rem, 1.02vw, 0.9rem);
  line-height: 1.25;
}
.house__pillar span { writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; }
.house__pillar.is-active { transform: translateY(-6px); box-shadow: 0 10px 22px rgba(18,17,16,.22); }
.house__pillar--1 { --c: #96082A; }
.house__pillar--2 { --c: #5E7263; }
.house__pillar--3 { --c: #96701C; }
.house__pillar--4 { --c: #3F6B73; }
.house__pillar--5 { --c: #B0522F; }
.house__pillar--6 { --c: #6B4E71; }
.house__base {
  margin-top: clamp(6px, 0.8vw, 10px);
  padding: clamp(14px, 1.6vw, 20px) 14px;
  border-radius: 12px;
  background: var(--ink);
  font-size: clamp(0.84rem, 1.2vw, 1.02rem);
  line-height: 1.3;
}
.house__detail {
  position: relative;
  overflow: hidden;
  padding: clamp(26px, 3vw, 44px);
  border-radius: var(--r-lg);
  background: var(--ink);
  color: rgba(255,255,255,.8);
  scroll-margin-top: 110px;
}
.house__detail::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: var(--c, var(--red));
  transition: background 0.3s ease;
}
.house__detail[data-part="play"] { --c: var(--red); }
.house__detail[data-part="language"] { --c: #96082A; }
.house__detail[data-part="maths"] { --c: #5E7263; }
.house__detail[data-part="aesthetics"] { --c: #96701C; }
.house__detail[data-part="discovery"] { --c: #3F6B73; }
.house__detail[data-part="motor"] { --c: #B0522F; }
.house__detail[data-part="social"] { --c: #6B4E71; }
.house__detail[data-part="whole"] { --c: var(--ink-300); }
.house__label { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #E9A8B7; }
.house__panel { display: none; }
.house__panel.is-active { display: block; animation: house-in 0.35s ease both; }
.house__kind { display: block; margin-top: 22px; font-size: 0.8rem; color: rgba(255,255,255,.6); }
.house__panel h3 { margin: 6px 0 16px; color: #fff; font-size: clamp(1.6rem, 2.5vw, 2.2rem); line-height: 1.12; }
.house__panel p { font-size: 1rem; line-height: 1.68; }
.house__more { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line-dark); font-size: 0.94rem; }
@keyframes house-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) {
  .house { grid-template-columns: 1fr; }
  .house__pillars { margin-inline: 3%; }
}
@media (prefers-reduced-motion: reduce) {
  .house__panel.is-active { animation: none; }
  .house__build button { transition: none; }
}

/* What we hope children become */
.become {
  padding: clamp(28px, 3.4vw, 52px);
  border-radius: var(--r-lg);
  background: var(--white);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-md);
}
.become__label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #8A6519; }
.become__lead {
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.become__lead em { color: var(--red); }
.become__list { list-style: none; margin-top: 22px; }
.become__list li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-block: 16px;
  border-top: 1px solid var(--line-soft);
  color: var(--ink-700);
}
.become__list b {
  min-width: 5.4em;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  color: var(--ink);
}

/* How children learn — three pillars */
.pillar { padding-top: 28px; border-top: 2px solid var(--gold); }
.pillar__ico {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 22px;
  border-radius: 14px;
  background: var(--white);
  border: 1px solid var(--line-soft);
  color: var(--gold);
}
.pillar__ico svg { width: 22px; height: 22px; }
.pillar__tag { display: block; margin-bottom: 8px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--red); }
.pillar h3 { margin-bottom: 12px; font-size: clamp(1.4rem, 2vw, 1.8rem); }
.pillar p { font-size: 0.96rem; line-height: 1.66; color: var(--ink-500); }

/* A → B → C sequence */
.flow { list-style: none; display: flex; justify-content: center; margin-top: clamp(40px, 4.5vw, 64px); }
.flow__step { position: relative; flex: 1 1 0; max-width: 280px; padding-inline: clamp(14px, 2vw, 28px); text-align: center; }
.flow__step b {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.3rem, 2.1vw, 1.8rem);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.flow__step span { display: block; margin-top: 6px; font-size: 0.88rem; line-height: 1.5; color: var(--ink-500); }
.flow__step + .flow__step::before {
  content: "\2192";
  position: absolute;
  left: 0;
  top: 0;
  transform: translateX(-50%);
  font-size: 1.5rem;
  color: #3F5245;
}

.flow--compact { justify-content: flex-start; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.flow--compact .flow__step {
  flex: none;
  max-width: none;
  padding: 9px 18px;
  border-radius: var(--r-pill);
  background: var(--red-soft);
  font-size: 0.95rem;
  color: var(--ink-700);
}
.flow--compact .flow__step b { display: inline; font-family: var(--font-body); font-size: inherit; font-weight: 700; color: var(--red); }
.flow--compact .flow__step + .flow__step::before { content: none; }

/* Curriculum ⊃ Beacons of Light ⊃ Inner Lights */
.nest__ring { padding: clamp(20px, 2.6vw, 34px); border-radius: var(--r-lg); }
.nest__ring--1 { background: var(--white); border: 1px solid var(--line-soft); box-shadow: var(--shadow-md); color: var(--ink-500); }
.nest__ring--2 { margin-top: 22px; border-radius: calc(var(--r-lg) - 6px); background: var(--ink); color: rgba(255,255,255,.66); }
.nest__ring--3 { margin-top: 20px; border-radius: calc(var(--r-lg) - 12px); background: var(--red); color: rgba(255,255,255,.88); }
.nest__label { display: block; margin-bottom: 6px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #8A6519; }
.nest__ring--2 .nest__label { color: #E9A8B7; }
.nest__ring--3 .nest__label { color: rgba(255,255,255,.78); }
.nest h4 { margin-bottom: 4px; }
.nest__ring--2 h4, .nest__ring--3 h4 { color: #fff; }
.nest p { font-size: 0.9rem; line-height: 1.5; }

/* Inner Lights — a light panel set inside the dark Beacons section */
.ilights {
  position: relative;
  margin-top: clamp(48px, 6vw, 96px);
  padding: clamp(24px, 4vw, 60px);
  border-radius: var(--r-xl);
  background: var(--paper);
  color: var(--ink-700);
}
/* Dashed thread from the five cards down into the panel */
.ilights::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  height: clamp(48px, 6vw, 96px);
  border-left: 2px dashed rgba(233,168,183,.45);
}
.ilights__crumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  background: var(--ink);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
}
.ilights__crumb b { color: #fff; }
.ilights__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(16px, 4vw, 64px);
  align-items: end;
  margin-block: 22px clamp(28px, 3vw, 40px);
}
.section--ink .ilights h3 { color: var(--ink); font-size: clamp(1.8rem, 3.2vw, 2.8rem); }
.ilights__head p { font-size: 1rem; line-height: 1.66; color: var(--ink-500); }
.ilights__prompt { margin-bottom: 12px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-500); }
.ilights .tabs__nav { margin-bottom: 26px; background: var(--white); }

/* Mobile stand-in for .tabs__nav */
.tabs__select {
  display: none;
  width: 100%;
  margin-bottom: 22px;
  padding: 15px 48px 15px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121110' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 18px center / 16px;
  font-weight: 700;
  color: var(--ink);
  -webkit-appearance: none;
  appearance: none;
}

.terms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.term {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  min-height: 148px;
  padding: 20px 22px 24px;
  border-radius: var(--r-md);
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-top: 3px solid var(--ink);
}
/* One virtue held across two terms */
.term--span2 { grid-column: span 2; border-top-color: var(--red); }
.term__when { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #8A6519; }
.term__virtue {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.9vw, 1.7rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.term__virtue i { display: block; margin-top: 4px; font-size: 0.72em; color: var(--ink-500); }
.ilights__note { margin-top: 18px; font-size: 0.9rem; color: var(--ink-500); }

/* 10-week journey */
.weeks {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 6px;
  max-width: 980px;
  margin: 0 auto 18px;
}
.weeks span {
  display: grid;
  place-items: center;
  height: 46px;
  border-radius: 10px;
  background: rgba(94,114,99,.18);
  font-size: 0.85rem;
  font-weight: 700;
  color: #3F5245;
}
.weeks span.is-create { background: var(--red); color: #fff; }

.stages {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: clamp(14px, 2vw, 26px);
  max-width: 980px;
  margin-inline: auto;
}
.stage { padding: clamp(24px, 3vw, 40px); border-radius: var(--r-md); background: var(--white); border-top: 4px solid var(--sage); }
.stage--create { border-top-color: var(--red); }
.stage__weeks { display: block; margin-bottom: 10px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #3F5245; }
.stage--create .stage__weeks { color: var(--red); }
.stage h3 { margin-bottom: 12px; }
.stage p { font-size: 0.96rem; line-height: 1.68; color: var(--ink-500); }
.stages__arrow {
  align-self: center;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.stages__arrow svg { width: 18px; height: 18px; }

/* Framework progression — bars lengthen as children grow */
.ladder {
  display: grid;
  gap: 18px;
  padding: clamp(24px, 3vw, 40px);
  border-radius: var(--r-lg);
  background: var(--paper-warm);
  border: 1px solid var(--line-soft);
}
.ladder__band {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding-bottom: 18px;
  border-bottom: 1px dashed var(--line);
}
.ladder__fw b { display: block; font-family: var(--font-display); font-weight: 500; font-size: 1.7rem; line-height: 1; letter-spacing: -0.01em; color: var(--ink); }
.ladder__fw span { display: block; margin-top: 6px; font-size: 0.72rem; line-height: 1.4; color: var(--ink-500); }
.ladder__levels { list-style: none; display: grid; gap: 8px; }
.ladder__levels li {
  width: calc(58% + var(--i) * 10.5%);
  padding: 11px 16px;
  border-radius: 10px;
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-left: 4px solid var(--red);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink);
}
.ladder__band:first-child .ladder__levels li { border-left-color: var(--sage); }
.ladder__base { padding: 12px 16px; border-radius: 10px; background: var(--ink); font-size: 0.84rem; font-weight: 600; text-align: center; color: #fff; }

/* Six learning areas */
.areas-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 24px;
  margin: clamp(64px, 7vw, 110px) 0 28px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.areas-head p { font-size: 0.95rem; color: var(--ink-500); }
.areas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px clamp(20px, 3vw, 44px); }
.area { display: flex; gap: 16px; align-items: flex-start; }
.area .card__ico { flex: none; margin: 0; }
.area h5 { margin-bottom: 4px; }
.area p { font-size: 0.9rem; line-height: 1.55; color: var(--ink-500); }

/* Programmes page hand-off to the curriculum page */
.bridge { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: center; }
.bridge h3 { margin-bottom: 10px; max-width: 28ch; }
.bridge p { max-width: 60ch; color: var(--ink-500); }
.bridge .btn-row { margin: 0; }

@media (max-width: 900px) {
  .ilights__head { grid-template-columns: 1fr; align-items: start; }
  .stages { grid-template-columns: 1fr; }
  .stages__arrow { justify-self: center; transform: rotate(90deg); }
  .areas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bridge { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .ilights .tabs__nav { display: none; }
  .tabs__select { display: block; }
  .terms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .flow { flex-direction: column; align-items: center; gap: 38px; }
  .flow__step { max-width: none; }
  .flow__step + .flow__step::before { left: 50%; top: -34px; transform: translateX(-50%) rotate(90deg); }
  .flow--compact { flex-direction: row; align-items: flex-start; gap: 10px; }
  .areas { grid-template-columns: 1fr; }
  .ladder__band { grid-template-columns: 1fr; gap: 12px; }
  .weeks { gap: 4px; }
  .weeks span { height: 38px; border-radius: 8px; font-size: 0.78rem; }
}
@media (max-width: 420px) {
  .terms { grid-template-columns: 1fr; }
  .term--span2 { grid-column: auto; }
  .term { min-height: 0; gap: 14px; }
}

/* ---------- 21. Motion / Reveal ---------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .85s var(--ease), transform .95s var(--ease);
  transition-delay: var(--d, 0ms);
}

[data-reveal].is-in { opacity: 1; transform: none; }

[data-reveal="fade"] { transform: none; }
[data-reveal="left"]  { transform: translateX(-30px); }
[data-reveal="right"] { transform: translateX(30px); }
[data-reveal="zoom"]  { transform: scale(.96); }

/* Padding + equal negative margin gives descenders (j, y, g) room inside the
   clipping box without shifting layout; the larger translate keeps the line
   fully hidden behind the taller mask before it reveals. The inline pair does
   the same for an italic "j" that starts a line, whose tail swings left of the box. */
.reveal-mask {
  display: block;
  overflow: hidden;
  padding-bottom: 0.18em;
  margin-bottom: -0.18em;
  padding-inline: 0.14em;
  margin-inline: -0.14em;
}
.reveal-mask > span {
  display: block;
  transform: translateY(125%);
  transition: transform 1.05s var(--ease);
  transition-delay: var(--d, 0ms);
}
.reveal-mask.is-in > span { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal], .reveal-mask > span { opacity: 1 !important; transform: none !important; }
}

/* Focus visibility */
:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Available to assistive tech, out of the visual layout */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 300;
  padding: 12px 20px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: #fff;
  font-size: .85rem;
  font-weight: 700;
}
.skip-link:focus { left: 16px; }

/* ---------- 22. Responsive ---------- */

@media (max-width: 1180px) {
  .mega__inner { grid-template-columns: 1fr 1.2fr; }
  .mega__feature { display: none; }
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer__col--last { grid-column: span 3; }
}

@media (max-width: 1080px) {
  .nav, .header__ghost-link { display: none; }
  /* The mega panels are 1360px wide by design — remove them from layout entirely
     below the nav breakpoint so they can't widen the document. */
  .mega-wrap { display: none; }
  .burger { display: block; }
  .announce__meta { display: none; }

  /* Optical alignment: the ring is centred on its 46px hit area, which leaves
     the bars looking inset from the page gutter that the logo sits against.
     Pull the button outward by half that inset so the icon itself reads as
     flush right, while keeping a 44px+ touch target. */
  .burger {
    width: 44px;
    height: 44px;
    margin-right: -9px;
  }
  .burger span { width: 19px; }
  .burger span:nth-child(1) { top: 16px; }
  .burger span:nth-child(2) { top: 21.5px; width: 13px; }
  .burger span:nth-child(3) { top: 27px; }
  .burger.is-active span:nth-child(1),
  .burger.is-active span:nth-child(3) { top: 21.5px; }
  /* Keep the focus ring circular rather than a square around the circle */
  .burger:focus-visible { outline-offset: 2px; border-radius: 50%; }
  .hero__inner { grid-template-columns: 1fr; }
  /* minmax(0,…) so the unbreakable "7am–7pm" figure can't force the row wider */
  .hero__aside { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .cta-band__inner { grid-template-columns: 1fr; }
  .section-head--split { grid-template-columns: 1fr; align-items: start; }
}

@media (max-width: 900px) {
  :root { --header-h: 74px; }
  /* Anchor targets must clear the sticky header *and* the sticky sub-nav */
  html { scroll-padding-top: calc(var(--header-h) + 60px); }
  .grid-4, .grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
  .bento > *, .bento .b-wide, .bento .b-half, .bento .b-third { grid-column: span 6; }
  .bento .b-tall { grid-row: span 1; }
  .centre-card { grid-template-columns: 1fr; }
  .centre-card__media { min-height: 210px; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .gallery__item--tall { grid-row: span 1; aspect-ratio: 1; }
  .tl-item__body { grid-template-columns: 1fr; }
  .tl-item__thumb { display: none; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__col--last { grid-column: span 2; }
  .form__row { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .announce { font-size: .72rem; }
  .announce__msg span { display: none; }
  .grid-5, .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .bento > *, .bento .b-wide, .bento .b-half, .bento .b-third, .bento .b-full { grid-column: span 12; }
  .hero { min-height: auto; padding-block: 110px 60px; }
  /* Narrow screens put copy over a much larger share of the photo — darken further */
  .hero__media::after {
    background:
      linear-gradient(184deg, rgba(18,17,16,.7) 0%, rgba(18,17,16,.34) 26%, rgba(18,17,16,.6) 54%, rgba(18,17,16,.94) 100%),
      radial-gradient(120% 70% at 15% 100%, rgba(150,8,42,.34) 0%, transparent 60%);
  }
  .hero__aside { grid-template-columns: 1fr; }
  .hero__scroll { display: none; }
  .stats { grid-template-columns: 1fr; }
  .timeline::before { left: 15px; }
  .tl-item { grid-template-columns: 1fr; gap: 10px; padding-left: 44px; }
  .tl-item::before { left: 10px; top: calc(clamp(10px, 1.1vw, 15px) + 10px); margin-top: 0; }
  .tl-item__time { text-align: left; }
  .step { grid-template-columns: 1fr; gap: 18px; }
  .tquote { flex: 0 0 84%; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__col--last { grid-column: span 1; }
  .footer__bar { flex-direction: column; align-items: flex-start; }
  .tabs__nav { width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .tabs__nav::-webkit-scrollbar { display: none; }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .link { justify-content: center; }

  /* The menu's own CTA pair must stay side by side */
  .mobile-nav__cta .btn { width: 100%; }

  /* --- Small-screen typography & rhythm --- */
  h1 { letter-spacing: -0.03em; }
  .section-head { margin-bottom: clamp(30px, 8vw, 44px); }
  .eyebrow { margin-bottom: 15px; }
  .eyebrow::before { width: 18px; }

  /* --- Forms ---
     Anything under 16px makes iOS Safari zoom the page on focus. */
  .field input,
  .field select,
  .field textarea { font-size: 16px; padding: 14px 16px; }
  .field select { padding-right: 44px; }
  .field textarea { min-height: 118px; }
  .form-panel { padding: 22px 18px; }

  /* --- Scrolling data tables get a visible affordance --- */
  .table-wrap {
    position: relative;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .table-wrap::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 34px;
    pointer-events: none;
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,.92));
    border-radius: 0 var(--r-md) var(--r-md) 0;
  }
  table.rates th, table.rates td { padding: 14px 16px; }

  /* --- Testimonial slider becomes a native swipe rail --- */
  .tslider__track {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .tslider__track::-webkit-scrollbar { display: none; }
  .tquote { scroll-snap-align: start; }

  /* --- Hero aside: three compact cards instead of three tall ones --- */
  .hero__aside { gap: 10px; }
  .hero-card { padding: 15px 18px; }
  .hero-card__num { font-size: 1.85rem; margin-bottom: 3px; }
  .hero-card__label { font-size: 0.75rem; }
  .hero__eyebrow { font-size: 0.72rem; margin-bottom: 20px; align-items: flex-start; }
  /* Keep "45+ years" on one line; only the trailing label may wrap */
  .hero__eyebrow b { flex: none; white-space: nowrap; }

  /* --- Footer: two columns of links reads far shorter than one --- */
  .footer__grid { gap: 34px 24px; }
  .footer__col ul { grid-template-columns: 1fr 1fr; gap: 2px 18px; }
  .footer__col--last ul { grid-template-columns: 1fr; }
  .footer__col li a { display: block; padding-block: 9px; }
  .footer__col h5 { margin-bottom: 12px; }
  .footer__legal a { display: inline-block; padding-block: 12px; }
  .footer__contact a { display: inline-block; padding-block: 12px; }
  .footer__about { max-width: none; }

  /* --- Comfortable tap targets (44px minimum) --- */
  .crumbs { gap: 2px 10px; margin-bottom: 20px; }
  .crumbs a { display: inline-block; padding-block: 12px; }
  .subnav a { padding-block: 12px; }
  .acc__trigger { gap: 16px; }
  .link { padding-block: 11px 9px; }
  .brand { min-height: 44px; }
  .footer__socials a { width: 44px; height: 44px; }
  .footer__col li a { padding-block: 10px; }
}

@media (max-width: 430px) {
  /* Header CTA gives way to the burger; the mobile menu carries its own CTA */
  .header__actions .btn { display: none; }
  .announce__pill { display: none; }
}

@media (max-width: 360px) {
  /* Two-up menu tiles get too cramped to read on the smallest handsets */
  .m-centres__grid { grid-template-columns: 1fr; }
  .mobile-nav__cta { grid-template-columns: 1fr; }
  .footer__col ul { grid-template-columns: 1fr; }
}

/* ---------- 23. Touch devices ----------
   Several components park real content behind :hover, which a touch screen
   can never trigger. Reveal it wherever hover isn't available. */

@media (hover: none) {
  .icard p {
    max-height: none;
    opacity: 1;
    margin-top: 4px;
    overflow: visible;
  }
  .icard__arrow { transform: scale(1); opacity: 1; }

  /* Underlines on .link animate away on hover; keep them steady on touch */
  .link::after { transition: none; }

  /* Hover-lift transforms just cause paint churn on touch */
  .card:hover, .bento-tile:hover, .prog-card:hover,
  .centre-card:hover, .step:hover, .hero-card:hover { transform: none; }
}

/* ---------- 31. Careers: role rows, application form ---------- */

/* A shorter page header for pages that lead straight into a form. */
.phead--short { padding-block: clamp(56px, 7vw, 100px) clamp(40px, 5vw, 68px); }

/* --- the role list on join-us.html --- */
.job-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(18px, 3vw, 40px);
  padding: clamp(22px, 2.6vw, 32px) 0;
  border-top: 1px solid var(--line-soft);
}
.job-row:last-child { border-bottom: 1px solid var(--line-soft); }
.job-row__body { flex: 1 1 auto; min-width: 0; }
.job-row__title { font-family: var(--font-display); font-size: clamp(1.15rem, 1.9vw, 1.45rem); color: var(--ink); letter-spacing: -0.01em; }
.job-row__desc { margin-top: 8px; max-width: 56ch; }

.job-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 14px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-500);
}
.job-row__meta span { display: inline-flex; align-items: center; gap: 7px; }
.job-row__meta svg { width: 15px; height: 15px; flex: none; color: var(--red); }

.job-row .btn { flex: none; }
.job-row--ghost .job-row__title { font-size: clamp(1.02rem, 1.5vw, 1.2rem); color: var(--ink-700); }

@media (max-width: 720px) {
  .job-row { flex-direction: column; align-items: flex-start; gap: 18px; }
  .job-row .btn { width: 100%; justify-content: center; }
}

/* --- the application page's two-column layout --- */
.apply-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(24px, 3.4vw, 56px);
  align-items: start;
}
@media (max-width: 980px) { .apply-layout { grid-template-columns: 1fr; } }

/* The aside sticks alongside a long form on a tall screen. */
@media (min-width: 981px) {
  .apply-aside { position: sticky; top: calc(var(--header-h) + 24px); }
}

/* --- required-field marker --- */
.req { color: var(--red); margin-left: 2px; }

/* --- file input --------------------------------------------------------
   The native control is kept (it is the accessible one) and only restyled,
   so keyboard and screen-reader behaviour is untouched. */
.file-field input[type="file"] {
  width: 100%;
  padding: 13px 14px;
  font: inherit;
  font-size: 0.9rem;
  color: var(--ink-500);
  background: var(--white);
  border: 1px dashed var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.file-field input[type="file"]:hover { border-color: var(--red); background: var(--paper); }
.file-field input[type="file"]:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.file-field input[type="file"]::file-selector-button {
  margin-right: 14px;
  padding: 8px 16px;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
  background: var(--ink);
  border: 0;
  border-radius: var(--r-pill);
  cursor: pointer;
}
.file-field__name {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--red);
  word-break: break-all;
}
.file-field__hint { font-size: 0.78rem; color: var(--ink-300); }

/* --- consent checkbox --- */
.field label.checkbox,
.checkbox {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--ink-700);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}
.checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--red);
  cursor: pointer;
}
.checkbox a { color: var(--ink); border-bottom: 1px solid var(--line); }
.checkbox a:hover { border-bottom-color: var(--red); }

/* --- submit status ------------------------------------------------------
   Empty until the form says something, so it takes no space on arrival. */
.form-status {
  font-size: 0.86rem;
  line-height: 1.6;
  font-weight: 600;
  border-radius: var(--r-sm);
}
.form-status:empty { display: none; }
.form-status.is-pending { color: var(--ink-500); }
.form-status.is-error   { color: var(--red); background: var(--red-soft); padding: 13px 16px; }
.form-status.is-success { color: var(--sage); background: var(--sage-soft); padding: 13px 16px; }
.form-status:focus { outline: none; }

/* --- numbered list (what happens next) --- */
ol.numbered { list-style: none; counter-reset: n; display: grid; gap: 14px; }
ol.numbered li {
  counter-increment: n;
  position: relative;
  padding-left: 36px;
  font-size: 0.88rem;
  line-height: 1.6;
}
ol.numbered li strong { color: var(--ink); }
.card--dark ol.numbered li strong { color: #fff; }
ol.numbered li::before {
  content: counter(n);
  position: absolute;
  left: 0;
  top: 1px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--red);
  background: var(--red-soft);
  border-radius: 50%;
}
.card--dark ol.numbered li::before { color: #F5B9C6; background: rgba(255,255,255,.1); }

/* ---------- 32. News & Articles ---------- */
/* The article bodies are migrated WordPress posts: plain p / h2–h6 / lists /
   images / blockquotes, so everything is styled by element inside .article. */

.phead h1.article__title { font-size: clamp(2rem, 4.2vw, 3.4rem); max-width: 22ch; }

.article {
  max-width: 720px;
  margin-inline: auto;
  font-size: 1.04rem;
  line-height: 1.78;
}
.article > * + * { margin-top: 1.1em; }
.article h2,
.article h3,
.article h4,
.article h5,
.article h6 { margin-top: 1.9em; line-height: 1.2; }
.article h2 { font-size: clamp(1.7rem, 2.8vw, 2.3rem); }
.article h3 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); }
.article h4 { font-size: 1.28rem; }
.article h5,
.article h6 { font-size: 1.08rem; font-family: var(--font-body); font-weight: 700; letter-spacing: 0; }
.article h2 + *,
.article h3 + *,
.article h4 + *,
.article h5 + *,
.article h6 + * { margin-top: 0.6em; }

.article__lede {
  font-size: clamp(1.14rem, 1.6vw, 1.3rem);
  line-height: 1.62;
  color: var(--ink);
}

.article a:not(.btn) {
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.article a:not(.btn):hover { color: var(--red-deep); }

.article ul,
.article ol { padding-left: 1.4em; }
.article ul { list-style: disc; }
.article ol { list-style: decimal; }
.article li + li { margin-top: 0.45em; }
.article li::marker { color: var(--red); }

.article img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-md);
  margin-block: 2em;
}
.article figure img { margin-block: 0; }
.article figure { margin-block: 2em; }
.article figcaption { margin-top: 10px; font-size: 0.84rem; color: var(--ink-500); }

.article hr { border: 0; border-top: 1px solid var(--line); margin-block: 2.4em; }

.article blockquote {
  margin-block: 2em;
  padding: 4px 0 4px 26px;
  border-left: 3px solid var(--red);
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: 1.5;
  color: var(--ink);
}
.article blockquote cite {
  display: block;
  margin-top: 12px;
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-style: normal;
  font-weight: 700;
  color: var(--ink-500);
}

.article__video {
  position: relative;
  aspect-ratio: 16 / 9;
  margin-block: 2em;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--sand);
}
.article__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.article__back { max-width: 720px; margin: 56px auto 0; }

.news-card__date {
  display: block;
  margin-bottom: 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.news-card h3 { font-size: clamp(1.18rem, 1.6vw, 1.42rem); line-height: 1.24; margin-bottom: 10px; }

/* Blog furniture: listing filters and search, article meta, cover,
   sign-off, references, share row and the reading-progress bar. */

.tabs__nav--wrap { border-radius: var(--r-lg); margin-bottom: 0; }
.tabs__nav--wrap .tab-btn { padding: 10px 18px; font-size: 0.84rem; }

.news-filter { margin-bottom: clamp(28px, 3.4vw, 44px); }
.news-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  margin-top: 22px;
}
.news-count { font-size: 0.9rem; color: var(--ink-500); }
.news-count strong { color: var(--ink); }

.news-search { position: relative; flex: 0 1 320px; }
.news-search svg {
  position: absolute;
  left: 16px;
  top: 50%;
  width: 17px;
  height: 17px;
  transform: translateY(-50%);
  color: var(--ink-300);
  pointer-events: none;
}
.news-search input {
  width: 100%;
  padding: 12px 18px 12px 44px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--white);
  font: inherit;
  font-size: 0.92rem;
  color: var(--ink);
}
.news-search input:focus { outline: 0; border-color: var(--red); box-shadow: 0 0 0 4px var(--red-glow); }

.news-card[hidden] { display: none; }
.news-empty { margin-top: 8px; text-align: center; color: var(--ink-500); }

/* The newest post runs the full width of the grid, picture beside text. */
.news-card--feature { grid-column: 1 / -1; }
.news-card--feature h3 { font-size: clamp(1.4rem, 2.4vw, 2.1rem); }
@media (min-width: 900px) {
  .news-card--feature { flex-direction: row; }
  .news-card--feature .prog-card__media { flex: 0 0 56%; aspect-ratio: auto; min-height: 380px; }
  .news-card--feature .prog-card__body { justify-content: center; padding: clamp(30px, 3.6vw, 56px); }
  .news-card--feature .prog-card__body p { font-size: 1rem; }
  .news-card--feature .prog-card__body .link { margin-top: 0; }
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 0;
  margin-top: 22px;
  font-size: 0.86rem;
  font-weight: 600;
  color: rgba(255,255,255,.78);
}
.article-meta > * + *::before { content: "\00B7"; margin-inline: 12px; opacity: .6; }

.article-cover { max-width: 960px; margin: 0 auto clamp(36px, 5vw, 60px); }
.article-cover img { display: block; width: 100%; height: auto; border-radius: var(--r-lg); }

.article__byline { margin-top: 2.2em; font-style: italic; color: var(--ink-700); }

.article__refs {
  margin-top: 2.6em;
  padding: clamp(22px, 3vw, 32px);
  border-radius: var(--r-md);
  background: var(--paper-warm);
  border: 1px solid var(--line-soft);
  font-size: 0.9rem;
  line-height: 1.66;
}
.article .article__refs h2 {
  margin-top: 0;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.article__refs li + li { margin-top: 0.8em; }

.article-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  max-width: 720px;
  margin: 52px auto 0;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.article-foot__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.article-foot__label { margin-right: 4px; font-size: 0.8rem; font-weight: 700; color: var(--ink-500); }
.article-foot .tag { padding: 7px 14px; font-size: 0.78rem; transition: background .3s var(--ease), color .3s var(--ease); }
.article-foot .tag:hover { background: var(--red); color: #fff; }
.article-foot + .article__back { margin-top: 28px; }

.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--white);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.share-btn svg { width: 16px; height: 16px; }
.share-btn:hover, .share-btn.is-copied { border-color: var(--red); color: var(--red); }

.read-progress { position: fixed; inset: 0 0 auto 0; z-index: 130; height: 3px; pointer-events: none; }
.read-progress__bar { height: 100%; background: var(--red); transform: scaleX(0); transform-origin: left; }
@media print { .read-progress, .article-foot, .news-filter { display: none; } }

/* ---------- WhatsApp chat button (rendered by js/layout.js) ---------- */
.wa-float {
  position: fixed;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 80; /* under the scrim (90), mobile nav (120) and lightbox (200) */
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25D366;
  color: var(--white);
  box-shadow: var(--shadow-md);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.wa-float:hover { transform: translateY(-2px) scale(1.04); box-shadow: var(--shadow-lg); }
.wa-float:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
@media (max-width: 600px) { .wa-float { width: 52px; height: 52px; } }
@media print { .wa-float { display: none; } }

/* ============================================================
   Mobile fixes (2026-10-01 audit at 360/390/412px)
   ============================================================ */

/* <source> only chooses a file. Under picture{display:contents} it would
   otherwise become an empty flex/grid item and add a stray gap. */
picture > source { display: none; }

/* Grid items that span two columns on wide screens. On a one-column phone
   grid the span would invent a phantom second column and crush its siblings. */
.grid > .span-2 { grid-column: span 2; }

/* Long unbroken strings (email addresses, URLs) must wrap, not push boxes
   past the screen edge. */
a[href^="mailto:"], .article a { overflow-wrap: anywhere; }
.callout > div, .apply-layout > * { min-width: 0; }
select { max-width: 100%; }

/* The icon tile is a <span>, so `.cta-mini span {display:block}` beat its grid. */
.cta-mini .cta-mini__ico { display: grid; }

/* Breadcrumb: only the "/" separators (every even child) stay faint; every
   crumb, linked or not, is readable and the current page is brightest. */
.crumbs { color: rgba(255,255,255,.66); }
.crumbs span { opacity: 1; }
.crumbs > :nth-child(even) { opacity: .45; }
.crumbs > :last-child { color: rgba(255,255,255,.86); }

/* Image-card arrow stays visible on bright photos. */
.icard__arrow { background: rgba(18,17,16,.38); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* Fee cells hold several prices; keep them together as one grid item. */
table.rates .rate-group { display: block; }

/* Blog lead-ins are <h5><strong>…</strong></h5>: give them paragraph leading. */
.article h5, .article h6 { line-height: 1.5; }

/* Article heroes reuse the post's featured image, which usually has its own
   title baked in. Blur it so it reads as texture, not a second headline. */
.phead:has(.article__title) .phead__bg img { filter: blur(10px); transform: scale(1.08); }

/* Team cards: the role is its own line, so "Email …" always starts below it. */
.person > span { display: block; }

/* Annual-report cover badge sits clear of the cover's own logo. */
.prog-card__age--low { top: auto; bottom: 16px; }

@media (max-width: 980px) {
  .apply-layout { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .grid > .span-2 { grid-column: auto; }

  /* Tab pills wrap onto two rows instead of hiding the last tab off-screen. */
  .tabs__nav { overflow-x: visible; flex-wrap: wrap; justify-content: center; border-radius: 26px; gap: 6px; }
  .tab-btn { flex: 1 1 auto; padding: 11px 14px; font-size: 0.84rem; }

  /* Sticky in-page menus scroll sideways: fade the right edge so the cut-off
     pill reads as "more this way", and pad the end so the last one clears it. */
  .subnav__inner {
    padding-right: calc(var(--gutter) + 36px);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent);
  }

  /* Callouts: icon above the text so the copy gets the full width. */
  .callout { flex-direction: column; gap: 14px; }
  .callout .checks { margin-left: 0; padding-left: 0; }

  /* Photo tiles with longer copy need a darker scrim to stay readable. */
  .bento-tile--img::after {
    background: linear-gradient(180deg, rgba(18,17,16,.45) 0%, rgba(18,17,16,.72) 38%, rgba(18,17,16,.92) 72%, rgba(18,17,16,.96) 100%);
  }
  /* Page heroes: more weight at the top where breadcrumb + eyebrow sit. */
  .phead__bg::after {
    background: linear-gradient(180deg, rgba(18,17,16,.92) 0%, rgba(18,17,16,.72) 45%, rgba(18,17,16,.92) 100%),
                radial-gradient(80% 90% at 12% 100%, rgba(150,8,42,.3), transparent 62%);
  }

  /* Image link cards: landscape on phones, so a stack of six isn't 2,500px. */
  .icard { aspect-ratio: 4 / 3; }

  /* Centre key facts: icon beside the heading instead of above it. */
  .facts > .card { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: start; }
  .facts > .card > .card__ico { grid-row: span 2; margin: 0; }
  .facts > .card > * { min-width: 0; }

  /* Footer links keep their 44px tap height without widening the gaps. */
  .footer__contact a { padding-block: 10px; margin-block: -10px; }

  /* 404 hero: title sits over the bright middle of the photo — darken it. */
  .hero[style*="min-height"] .hero__media::after { background: linear-gradient(184deg, rgba(18,17,16,.7) 0%, rgba(18,17,16,.62) 40%, rgba(18,17,16,.9) 100%); }

  /* Timeline: the rail already indents; don't indent the text a second time. */
  .tl-item__body { padding: 10px 0; }

  /* Inner Lights trail pill: let it wrap as whole labels. */
  .ilights__crumb { flex-wrap: wrap; row-gap: 2px; border-radius: 14px; }

  /* Fee table becomes one card per programme (labels from data-label). */
  .table-wrap:has(table.rates) { border: 0; background: none; overflow: visible; }
  .table-wrap:has(table.rates)::after { display: none; }
  table.rates { min-width: 0; }
  table.rates thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.rates, table.rates tbody, table.rates tr, table.rates td { display: block; }
  table.rates tbody { display: grid; gap: 12px; }
  table.rates tbody tr {
    border: 1px solid var(--line-soft);
    border-radius: var(--r-md);
    background: var(--white);
    padding: 6px 0;
  }
  table.rates tbody tr:hover { background: var(--white); }
  table.rates td { padding: 10px 18px; }
  table.rates td:first-child { font-family: var(--font-display); font-size: 1.12rem; padding-top: 12px; }
  table.rates td[data-label]:not(:first-child) {
    display: grid;
    grid-template-columns: minmax(96px, 38%) 1fr;
    gap: 12px;
    border-top: 1px solid var(--line-soft);
  }
  table.rates td[data-label]:not(:first-child)::before {
    content: attr(data-label);
    font-family: var(--font-body, inherit);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-500);
    padding-top: 3px;
  }
}