/* ============================================================================
   Waterford College — site.css
   ----------------------------------------------------------------------------
   Shared page-level styles for every page on the site. Load order per page:
     colors_and_type.css  (tokens)
     chrome.css           (header / hero / footer / buttons)
     site.css             (this file: sections, prose, cards, bands)
     an optional inline <style> for anything genuinely page-specific
   Everything here is driven by var(--wc-*) tokens. Never introduce a new hex.
   ========================================================================== */

:root {
  --content-w: 1180px;
  --prose-w: 68ch;
  /* Vertical rhythm: one scale used by every band so pages stack predictably. */
  --band-y: 104px;
  --band-y-tight: 76px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--wc-white);
  color: var(--wc-petrol);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ============================================================================
   BANDS — every content section is a band. Alternate .band--tint for rhythm.
   ========================================================================== */
.band { padding: var(--band-y) 0; }
.band--tight { padding: var(--band-y-tight) 0; }
.band--tint { background: var(--wc-off-white); }
.band--petrol { background: var(--wc-petrol); color: var(--fg-on-dark); }
.band--petrol h2, .band--petrol h3 { color: var(--wc-white); }
.band--petrol p { color: var(--fg-on-dark-muted); }
.band + .band--tint, .band--tint + .band { border-top: 1px solid var(--line-soft); }

.container { max-width: var(--content-w); margin: 0 auto; padding: 0 48px; }
.container--narrow { max-width: 900px; }

/* ============================================================================
   SECTION HEADS — eyebrow, serif title with one italic accent word, lede.
   This rhythm is the site's signature; keep it consistent across pages.
   ========================================================================== */
.eyebrow-line {
  font-family: var(--font-sans);
  font-size: 12px; font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--wc-green);
  margin: 0 0 18px;
}
.band--petrol .eyebrow-line { color: var(--wc-lime); }

.section-title {
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  line-height: 1.12;
  letter-spacing: var(--tracking-tight);
  margin: 0 0 20px;
  max-width: 22ch;
  text-wrap: balance;
}
.section-title em { font-style: italic; color: var(--wc-green); }
.band--petrol .section-title em { color: var(--wc-lime); }

.lede {
  font-size: 18px;
  color: var(--fg-2);
  max-width: var(--prose-w);
  margin: 0;
}
.band--petrol .lede { color: var(--fg-on-dark-muted); }

/* body prose inside a band */
.prose p { font-size: 16.5px; color: var(--fg-2); max-width: var(--prose-w); margin: 0 0 18px; }
.prose p:last-child { margin-bottom: 0; }

/* Opening paragraph as a lede.
   Most prose blocks run two or three paragraphs at one size, which reads as a
   grey slab with no way in. Setting the first one larger and darker gives the
   eye an entry point and the block a shape. :not(:last-of-type) keeps
   single-paragraph blocks untouched, since a lone lede has nothing to lead. */
.prose > p:first-of-type:not(:last-of-type) {
  font-size: 19.5px;
  line-height: 1.55;
  color: var(--fg-1);
  margin-bottom: 22px;
}
@media (max-width: 700px) {
  .prose > p:first-of-type:not(:last-of-type) { font-size: 18px; }
}
.band--petrol .prose > p:first-of-type:not(:last-of-type) { color: #fff; }
.prose a { color: var(--wc-green-dark); }
.band--petrol .prose p { color: var(--fg-on-dark-muted); }
.band--petrol .prose a { color: var(--wc-lime); }

/* ============================================================================
   BUTTONS on light fields (chrome.css owns the ones on petrol)
   ========================================================================== */
.btn-solid {
  background: var(--wc-petrol); border-color: var(--wc-petrol); color: var(--wc-white);
  font-size: 12.5px;
}
.btn-solid:hover { background: var(--wc-green); border-color: var(--wc-green); color: var(--wc-petrol); }
.btn-outline {
  background: transparent; border-color: rgba(1,55,84,.28); color: var(--wc-petrol);
  font-size: 12.5px;
}
.btn-outline:hover { border-color: var(--wc-petrol); background: var(--wc-petrol); color: var(--wc-white); }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.wc-btn svg { width: 15px; height: 15px; flex: none; }

/* ============================================================================
   CARD GRIDS
   ========================================================================== */
.grid { display: grid; gap: 26px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }

.card {
  background: var(--wc-white);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: 34px 30px 30px;
  box-shadow: var(--sh-card);
  display: flex; flex-direction: column;
}
.card h3 {
  font-family: var(--font-serif); font-weight: 400;
  font-size: 1.5rem; margin: 0 0 12px; color: var(--wc-petrol);
}
.card p { font-size: 15.5px; color: var(--fg-2); margin: 0; max-width: none; }
.card__link { margin-top: auto; padding-top: 22px; }

/* a card that leads with a photo */
.card--photo { padding: 0; overflow: hidden; }
.card--photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.card--photo .card__body { padding: 28px 30px 30px; display: flex; flex-direction: column; flex: 1; }
.card--photo .card__meta {
  font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--wc-green); margin: 0 0 10px;
}

/* ============================================================================
   REASON LIST — the "why this school" blocks. A rule, a heading, a paragraph.
   ========================================================================== */
.reasons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 44px 56px; margin-top: 56px; }
.reason { border-top: 2px solid var(--wc-green); padding-top: 22px; }
.reason h3 {
  font-family: var(--font-serif); font-weight: 400; font-size: 1.45rem;
  margin: 0 0 10px; color: var(--wc-petrol);
}
.reason p { font-size: 15.5px; color: var(--fg-2); margin: 0; max-width: 46ch; }
.band--petrol .reason { border-top-color: var(--wc-lime); }
.band--petrol .reason h3 { color: var(--wc-white); }

/* ============================================================================
   FACT STRIP — small pill facts (grades open, curriculum, and so on)
   ========================================================================== */
.facts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.facts span {
  font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--wc-petrol); background: var(--wc-white);
  border: 1px solid var(--line-soft); border-radius: var(--r-pill);
  padding: 9px 18px;
}
.band--tint .facts span { background: var(--wc-white); }
.band--petrol .facts span {
  background: transparent; color: var(--wc-white); border-color: var(--line-on-dark);
}

/* ============================================================================
   SPLIT — text one side, photo the other
   ========================================================================== */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.split--flip .split__media { order: -1; }
.split__media img { width: 100%; border-radius: var(--r-lg); display: block; aspect-ratio: 4 / 3; object-fit: cover; }

/* ============================================================================
   CTA BAND — the closing call on every page
   ========================================================================== */
.cta { background: var(--wc-green); color: var(--wc-petrol); position: relative; overflow: hidden; }
.cta__glow {
    position: absolute; right: -140px; top: 50%; transform: translateY(-50%);
    width: 520px; height: 520px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 62%);
    pointer-events: none;
  }
.cta .container { position: relative; z-index: 1; padding-top: 84px; padding-bottom: 88px; }
.cta h2 {
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(2rem, 3.6vw, 2.8rem); line-height: 1.1;
  color: var(--wc-petrol); margin: 0 0 16px; max-width: 20ch;
}
/* On the green field the accent is italic ALONE. White on brand green is only
   2.62:1 and lime is worse, so the two-tone treatment drops its colour shift
   here rather than its legibility. Petrol on green is 5.5:1. */
.cta h2 em { font-style: italic; color: var(--wc-petrol); }
.cta p { color: var(--wc-petrol); font-size: 17px; max-width: 56ch; margin: 0; }
/* Buttons on green: solid petrol leads, outlined petrol follows. */
.cta .wc-btn--green { background: var(--wc-petrol); border-color: var(--wc-petrol); color: var(--wc-white); }
.cta .wc-btn--green:hover { background: var(--wc-white); border-color: var(--wc-white); color: var(--wc-petrol); filter: none; }
.cta .wc-btn--ghost { color: var(--wc-petrol); border-color: rgba(1,55,84,.34); }
.cta .wc-btn--ghost:hover { background: rgba(1,55,84,.08); }

/* ============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1000px) {
  .grid--3 { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: 1fr; gap: 40px; }
  .split--flip .split__media { order: 0; }
}
@media (max-width: 900px) {
  :root { --band-y: 68px; --band-y-tight: 52px; }
  .container { padding: 0 24px; }
  .reasons { grid-template-columns: 1fr; gap: 34px; margin-top: 38px; }
  .cta .container { padding-top: 60px; padding-bottom: 64px; }
}
@media (max-width: 700px) {
  .grid--2, .grid--3 { grid-template-columns: 1fr; }
}

/* The Waterford lockup is wide; shrink it before it can overflow. */
@media (max-width: 560px) {
  .wc-header { padding: 12px 16px; gap: 12px; }
  .wc-header__brand img { height: 28px; }
}

/* ============================================================================
   NEWS — the listing and the article layout
   ========================================================================== */
.news-list { display: grid; gap: 26px; grid-template-columns: repeat(2, 1fr); margin-top: 52px; }
@media (max-width: 800px) { .news-list { grid-template-columns: 1fr; } }

.news-card { display: flex; flex-direction: column; }
.news-card time {
  font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--wc-green); display: block; margin-bottom: 10px;
}
.news-card h3 {
  font-family: var(--font-serif); font-weight: 400; font-size: 1.55rem;
  margin: 0 0 12px; color: var(--wc-petrol);
}
.news-card p { font-size: 15.5px; color: var(--fg-2); margin: 0; max-width: none; }

/* Article body. Measure is deliberately narrow: this is long-form reading. */
.article { max-width: 68ch; }
.article time {
  font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--wc-green); display: block; margin-bottom: 18px;
}
.article p { font-size: 17.5px; line-height: 1.66; color: var(--fg-2); margin: 0 0 22px; max-width: none; }
.article p:first-of-type { font-size: 19px; color: var(--wc-petrol); }
.article h2 {
  font-family: var(--font-serif); font-weight: 400; font-size: 1.75rem;
  color: var(--wc-petrol); margin: 44px 0 16px;
}
.article a { color: var(--wc-green-dark); }
.article-nav { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line-soft); }

/* ============================================================================
   DESIGN PASS — softness, colour and shape
   ----------------------------------------------------------------------------
   The first build was correct and plain. This layer adds the things that make
   it feel like the brand: an arched "badge" silhouette borrowed from the shield
   in the logo, green as a real background rather than only an accent, and
   photography given room to carry a page.
   ========================================================================== */

/* ---------------------------------------------------------------- green band */
/* Brand green is only 2.62:1 on white, so it can never carry small text as a
   foreground. As a BACKGROUND behind white text it is strong and safe, and it
   is the warmest surface in the palette. Use it for a page's one big moment. */
.band--green { background: var(--wc-green); color: var(--wc-petrol); }
.band--green .eyebrow-line { color: var(--wc-petrol); opacity: .75; }
.band--green .section-title { color: var(--wc-petrol); }
.band--green .section-title em { color: var(--wc-white); font-style: italic; }
.band--green .lede, .band--green .prose p { color: rgba(1,55,84,.86); }
.band--green .reason { border-top-color: rgba(1,55,84,.35); }
.band--green .reason h3 { color: var(--wc-petrol); }
.band--green .reason p { color: rgba(1,55,84,.82); }
.band--green .facts span {
  background: rgba(255,255,255,.55); border-color: rgba(1,55,84,.18); color: var(--wc-petrol);
}
.band--green .wc-btn.btn-solid { background: var(--wc-petrol); border-color: var(--wc-petrol); color: #fff; }
.band--green .wc-btn.btn-solid:hover { background: var(--wc-white); border-color: var(--wc-white); color: var(--wc-petrol); }

/* Pale green wash, for a softer alternative to the cool grey tint. */
.band--mint { background: #EAF7F2; }

/* ------------------------------------------------------------- the arch shape */
/* The logo is a shield. An arch is that silhouette softened: flat foot, round
   shoulders. It is the site's one ownable image shape, and it is what makes a
   photo grid stop looking like a stock template. */
.arch {
  border-radius: 50% 50% var(--r-lg) var(--r-lg) / 32% 32% var(--r-lg) var(--r-lg);
  overflow: hidden;
}
.arch img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* A portrait arch, for the "one child, doing one thing" shots. */
.arch--portrait { aspect-ratio: 3 / 4; }
.arch--tall { aspect-ratio: 2 / 3; }

/* Arch cards: an arched photo with a caption beneath, the pattern replacing
   plain text columns wherever a page was reading as a wall of words. */
.arch-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin-top: 52px; }
.arch-row--3 { grid-template-columns: repeat(3, 1fr); }
.arch-card__label {
  font-family: var(--font-serif); font-weight: 400; font-size: 1.3rem;
  color: var(--wc-petrol); margin: 20px 0 6px;
}
.arch-card p { font-size: 15px; color: var(--fg-2); margin: 0; max-width: none; }
.band--petrol .arch-card__label { color: var(--wc-white); }
.band--petrol .arch-card p { color: var(--fg-on-dark-muted); }
.band--green .arch-card__label, .band--green .arch-card p { color: var(--wc-petrol); }
@media (max-width: 1000px) { .arch-row, .arch-row--3 { grid-template-columns: 1fr 1fr; gap: 24px; } }
@media (max-width: 560px) { .arch-row, .arch-row--3 { grid-template-columns: 1fr; } }

/* ------------------------------------------------------- full-bleed photo band */
/* A picture used as a breath between two text sections. */
.photo-band { position: relative; overflow: hidden; height: 46vh; min-height: 340px; }
.photo-band img { width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-focus, 50% 40%); }
.photo-band::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(1,55,84,.20) 0%, rgba(1,55,84,0) 40%, rgba(1,55,84,.30) 100%);
}

/* --------------------------------------------------------------- soft edges */
/* Rounder cards and softer shadows throughout: the campus and the messaging
   are organic, and hard rectangles fight that. */
.card { border-radius: 28px; }
.split__media img { border-radius: 28px; }
.card--photo img { border-radius: 0; }

/* ============================================================================
   SUB-NAV — the "where am I" device
   ----------------------------------------------------------------------------
   The site deliberately runs FEW pages, each holding several sections, with a
   sticky bar that jumps between them and highlights the section you are in.
   School sites get lost-in-a-maze precisely because they answer every question
   with another page. This is the alternative, and it is the pattern Broadacres
   uses on its About and Contact pages.
   Behaviour lives in scripts/chrome.js and self-initialises on [data-subnav].
   ========================================================================== */
.subnav {
  /* --wc-header-h is measured by scripts/chrome.js; the fallbacks are the
     heights the header actually renders at, desktop and mobile. */
  position: sticky; top: var(--wc-header-h, 80px); z-index: 40;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.subnav__track {
  max-width: var(--content-w); margin: 0 auto; padding: 0 48px;
  display: flex; gap: 34px; overflow-x: auto; scrollbar-width: none;
}
.subnav__track::-webkit-scrollbar { display: none; }
.subnav a {
  flex: none; border: 0; text-decoration: none;
  font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-3); padding: 20px 0;
  border-bottom: 2px solid transparent;
  transition: color var(--dur-fast) var(--ease-natural);
}
.subnav a:hover { color: var(--wc-petrol); opacity: 1; }
.subnav a.is-active { color: var(--wc-green-dark); border-bottom-color: var(--wc-green); }
@media (max-width: 900px) { .subnav { top: var(--wc-header-h, 68px); } .subnav__track { padding: 0 24px; gap: 24px; } }

/* Overflow affordance: fade the edge that has more behind it, and put a
   chevron there. Without this the jump bar just ends, and the sections past
   the edge are invisible. Classes are set by scripts/chrome.js. */
.subnav { display: flex; align-items: stretch; }
.subnav__track {
  --fade-left: 0; --fade-right: 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0,
    #000 calc(var(--fade-left) * 30px), #000 calc(100% - (var(--fade-right) * 30px)), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0,
    #000 calc(var(--fade-left) * 30px), #000 calc(100% - (var(--fade-right) * 30px)), transparent 100%);
}
.subnav.has-left  .subnav__track { --fade-left: 1; }
.subnav.has-right .subnav__track { --fade-right: 1; }

.subnav__chev {
  flex: none; width: 38px; border: 0; cursor: pointer;
  background: rgba(255,255,255,.94); color: var(--wc-petrol);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-natural);
}
.subnav__chev svg { width: 19px; height: 19px; }
.subnav.has-left  .subnav__chev--prev,
.subnav.has-right .subnav__chev--next { opacity: 1; pointer-events: auto; }
.subnav__chev:focus-visible { outline: 2px solid var(--wc-green); outline-offset: -3px; }
@media (min-width: 1100px) { .subnav__chev { display: none; } }

/* ------------------------------------------------------------------
   Sub-nav, phone shape. The horizontal bar steps aside entirely and a
   dropdown takes over: the bar could only ever show two of six sections
   at 375px, and the rest were invisible.
   ------------------------------------------------------------------ */
.subnav-drop { display: none; }
@media (max-width: 899px) {
  .subnav { display: block; background: transparent; backdrop-filter: none; border-bottom: 0; }
  .subnav__track, .subnav__chev { display: none !important; }
  .subnav-drop { display: block; position: relative; }
}
.subnav-drop__head {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; text-align: left; cursor: pointer;
  background: var(--wc-petrol); color: #fff;
  border: 0; border-bottom: 2px solid var(--wc-green);
  padding: 13px 24px; font-family: inherit;
}
.subnav-drop__eyebrow {
  display: block; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  font-weight: 600; color: rgba(255,255,255,.55); margin-bottom: 3px;
}
.subnav-drop__current { display: block; font-size: 16px; font-weight: 600; line-height: 1.25; }
.subnav-drop__meta { display: flex; align-items: center; gap: 12px; flex: none; }
.subnav-drop__count {
  font-size: 12px; letter-spacing: .1em; color: rgba(255,255,255,.62);
  font-variant-numeric: tabular-nums;
}
.subnav-drop__tri {
  width: 20px; height: 20px; transition: transform var(--dur-fast) var(--ease-natural);
}
.subnav-drop.is-open .subnav-drop__tri { transform: rotate(180deg); }

/* The list overlays the page rather than pushing it down. */
.subnav-drop__list {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 5;
  list-style: none; margin: 0; padding: 0;
  background: var(--wc-white);
  max-height: 0; overflow: hidden;
  box-shadow: 0 26px 44px -18px rgba(1,42,64,.3);
  transition: max-height 300ms var(--ease-natural);
}
.subnav-drop.is-open .subnav-drop__list { max-height: 76vh; overflow: auto; }
.subnav-drop__list a {
  display: flex; align-items: center; gap: 15px;
  padding: 16px 24px; border-top: 1px solid var(--line-soft);
  font-size: 16px; font-weight: 400; letter-spacing: normal; text-transform: none;
  color: var(--fg-2); text-decoration: none; border-bottom: 0;
}
.subnav-drop__list li:first-child a { border-top: 0; }
.subnav-drop__dot {
  flex: none; width: 9px; height: 9px; border-radius: 50%;
  background: #C7CCD1; transition: background 160ms, box-shadow 160ms;
}
.subnav-drop__list a.is-active {
  background: rgba(26,181,136,.08); color: var(--wc-petrol); font-weight: 600;
}
.subnav-drop__list a.is-active .subnav-drop__dot {
  background: var(--wc-green); box-shadow: 0 0 0 4px rgba(26,181,136,.16);
}

/* Sections targeted by a sub-nav need headroom so the sticky bars do not
   cover the heading when you jump to them. */
[data-subnav-section] { scroll-margin-top: calc(var(--wc-header-h, 80px) + var(--wc-subnav-h, 60px) + 10px); }

/* ============================================================================
   PEOPLE — leadership cards
   ========================================================================== */
.people { display: grid; grid-template-columns: 320px 1fr; gap: 48px; align-items: start; margin-top: 44px; }
.people__photo { border-radius: 28px; overflow: hidden; }
.people__photo img { width: 100%; display: block; aspect-ratio: 3 / 4; object-fit: cover; }
.people__name { font-family: var(--font-serif); font-weight: 400; font-size: 1.9rem; margin: 0 0 6px; }
.people__role {
  font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--wc-green); margin: 0 0 22px;
}
@media (max-width: 800px) { .people { grid-template-columns: 1fr; gap: 28px; } .people__photo { max-width: 300px; } }

/* A quiet panel for an honest note, e.g. a post still being appointed. */
.note-panel {
  background: var(--wc-off-white); border: 1px solid var(--line-soft);
  border-left: 3px solid var(--wc-green);
  border-radius: 0 20px 20px 0; padding: 26px 30px; margin-top: 38px; max-width: 68ch;
}
.note-panel p { margin: 0; font-size: 16px; color: var(--fg-2); max-width: none; }

/* ------------------------------------------------------------------
   School wall: the other ThriveEd schools as a fixed grid of ten tiles.
   Deliberately not a carousel. A horizontal scroller hides most of its
   content behind an interaction people do not always find.
   Ten tiles divide exactly by five and by two, so no row is ever ragged.
   ------------------------------------------------------------------ */
.school-wall {
  display: grid; gap: 14px; margin-top: 40px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 900px) { .school-wall { grid-template-columns: repeat(5, 1fr); } }

.school-tile {
  position: relative; margin: 0; overflow: hidden;
  border-radius: 16px; background: var(--wc-petrol);
}
.school-tile img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
}
.school-tile figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: 26px 12px 11px;
  background: linear-gradient(180deg, rgba(1,42,64,0) 0%, rgba(1,42,64,.82) 62%, rgba(1,42,64,.92) 100%);
  color: #fff;
}
.school-tile__name {
  display: block; font-size: 13px; font-weight: 600; line-height: 1.25;
}
.school-tile__place {
  display: block; margin-top: 2px; font-size: 10.5px;
  letter-spacing: .08em; text-transform: uppercase; opacity: .82;
}
@media (min-width: 900px) {
  .school-tile figcaption { padding: 30px 13px 12px; }
  .school-tile__name { font-size: 13.5px; }
}


/* ------------------------------------------------------------------
   Day table: the shape of a school day, two columns, used on every
   phase page so the times are scannable rather than buried in prose.
   ------------------------------------------------------------------ */
.daytable { width: 100%; border-collapse: collapse; margin-top: 34px; max-width: 720px; }
.daytable th, .daytable td {
  text-align: left; padding: 15px 0;
  border-bottom: 1px solid var(--line-soft); font-size: 15.5px;
}
.daytable th {
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--wc-green); font-weight: 600;
}
.daytable td:first-child { font-weight: 600; }
.daytable td:last-child { text-align: right; }
.daytable th:last-child { text-align: right; }
@media (max-width: 560px) {
  .daytable td, .daytable th { font-size: 14.5px; padding: 13px 0; }
}


/* Subject pills: a scannable list of what a phase actually takes. */
.pill-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.lede + .pill-list { margin-top: 30px; }
.pill-group .pill-list { margin-top: 16px; }
.pill-list span {
  font-size: 14px; color: var(--wc-petrol); background: var(--wc-white);
  border: 1px solid var(--line-soft); border-radius: var(--r-pill); padding: 10px 20px;
}
/* The first group follows a lede that carries no bottom margin, so without
   this it sits flush against the sentence above it. */
.pill-group { margin-top: 38px; }
.pill-group + .pill-group { margin-top: 34px; }
.pill-group__label {
  font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--wc-green); margin: 0;
}

/* ------------------------------------------------------------------
   Story film: a YouTube embed that autoplays muted, with a pill to
   turn sound on. The iframe only loads once the section is near.
   ------------------------------------------------------------------ */
.film { position: relative; border-radius: 26px; overflow: hidden; background: var(--wc-petrol); }
.film__frame { position: relative; width: 100%; aspect-ratio: 16 / 9; }
.film__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.film__sound {
  position: absolute; left: 18px; bottom: 18px; z-index: 2;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 20px 11px 16px; border: 0; border-radius: var(--r-pill);
  background: rgba(255,255,255,.94); color: var(--wc-petrol);
  font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  box-shadow: 0 8px 24px rgba(1,42,64,.3);
}
.film__sound:hover { background: #fff; }
.film__sound:focus-visible { outline: 2px solid var(--wc-green); outline-offset: 3px; }
.film__sound svg { width: 18px; height: 18px; flex: none; }
@media (max-width: 560px) {
  .film__sound { left: 12px; bottom: 12px; padding: 9px 16px 9px 13px; font-size: 13px; }
}

/* On a phone a 16:9 film inside the container gutters is barely bigger than a
   thumbnail, so let it run to both edges instead. */
@media (max-width: 700px) {
  .film {
    margin-inline: -24px;
    width: calc(100% + 48px);
    border-radius: 0;
  }
}

/* ============================================================================
   SCROLL REVEAL — see scripts/reveal.js
   Everything here is inside a prefers-reduced-motion guard, and the script
   bails out under the same condition, so there are two independent brakes.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* Headings: one mask per visual line, the line slides up out of it. */
  .rv-h .rv-line {
    display: block;
    overflow: hidden;
    /* room for descenders so g, y and p are not clipped by the mask;
       the negative margin puts the line rhythm back exactly as it was */
    padding-bottom: .22em;
    margin-bottom: -.22em;
  }
  .rv-h .rv-line__i {
    display: block;
    transform: translateY(115%);
    transition: transform .82s cubic-bezier(.16, 1, .3, 1);
    transition-delay: var(--rv-d, 0s);
  }
  .rv-h.is-in .rv-line__i { transform: none; }

  /* Body copy: a short fade up. */
  .rv-fade {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .66s ease, transform .66s cubic-bezier(.16, 1, .3, 1);
    transition-delay: var(--rv-d, 0s);
  }
  .rv-fade.is-in { opacity: 1; transform: none; }

  /* Tiles: `translate` rather than `transform`, so a card's own hover lift
     still works while this is running. */
  .rv-tile {
    opacity: 0;
    translate: 0 26px;
    transition: opacity .7s ease, translate .7s cubic-bezier(.16, 1, .3, 1);
    transition-delay: var(--rv-d, 0s);
  }
  .rv-tile.is-in { opacity: 1; translate: none; }
}

/* ============================================================================
   HOVER — lift and a slow push into the image
   Rounded blocks pick up a deeper shadow and rise slightly; the photo inside
   scales a touch behind its own rounded mask, so the movement reads as depth
   rather than as the card jumping. Pointer devices only: on a touch screen
   there is no hover, and :hover can stick after a tap.
   ========================================================================== */
@media (hover: hover) and (pointer: fine) {
  .card,
  .school-tile,
  .arch,
  .render-figure img,
  .visit-card {
    transition: transform .34s var(--ease-natural),
                box-shadow .34s var(--ease-natural);
  }

  .card:hover,
  .visit-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 46px -16px rgba(1, 42, 64, .26);
  }

  /* the photo moves, the frame does not */
  .card--photo img,
  .school-tile img,
  .arch img,
  .render-figure img,
  .film img {
    transition: transform .72s var(--ease-natural);
  }
  .card--photo:hover img,
  .school-tile:hover img,
  .arch-card:hover .arch img,
  .render-figure:hover img {
    transform: scale(1.045);
  }

  .school-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 40px -14px rgba(1, 42, 64, .3);
  }

  .arch-card:hover .arch {
    box-shadow: 0 22px 46px -16px rgba(1, 42, 64, .3);
  }

  .render-figure { overflow: hidden; border-radius: 28px; }
  .render-figure:hover { box-shadow: 0 22px 48px -18px rgba(1, 42, 64, .28); }
}

/* A tile that is animating in must not also be shoved by a hover transform. */
@media (prefers-reduced-motion: reduce) {
  .card, .school-tile, .arch, .render-figure img, .visit-card,
  .card--photo img, .arch img, .film img { transition: none !important; }
  .card:hover, .school-tile:hover, .visit-card:hover { transform: none; }
  .card--photo:hover img, .school-tile:hover img,
  .arch-card:hover .arch img, .render-figure:hover img { transform: none; }
}

/* ============================================================================
   CYCLING WORD — the hero's last word flips through the four threads
   The words are stacked in one grid cell, so the box is always as wide as the
   longest of them and the heading never reflows as they change.
   ========================================================================== */
.cycle {
  display: inline-grid;
  vertical-align: baseline;
  font-style: italic;
}
.cycle > span {
  grid-area: 1 / 1;
  white-space: nowrap;
}
@media (prefers-reduced-motion: no-preference) {
  .cycle > span {
    opacity: 0;
    transform: translateY(0.42em);
    transition: opacity .34s ease, transform .44s cubic-bezier(.16, 1, .3, 1);
  }
  .cycle > span.is-out {
    opacity: 0;
    transform: translateY(-0.42em);
  }
}
.cycle > span.is-on { opacity: 1; transform: none; }

/* Without motion, the first word simply sits there. */
@media (prefers-reduced-motion: reduce) {
  .cycle > span { opacity: 0; }
  .cycle > span.is-on { opacity: 1; }
}

/* ============================================================================
   INTAKE RIBBON — what actually opens in 2027, high on the Home page
   The three intakes are not a continuous range, so they are shown as three
   separate groups. A parent's first question is "do you take my child's
   grade", and this answers it before they scroll.
   ========================================================================== */
.ribbon {
  background: var(--wc-green);
  color: var(--wc-petrol);
}
.ribbon__inner {
  max-width: var(--content-w); margin: 0 auto; padding: 22px 48px;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 12px 28px;
}
.ribbon__label {
  font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  margin: 0; opacity: .78; flex: none;
}
.ribbon__groups { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ribbon__groups li {
  background: rgba(255, 255, 255, .92);
  border-radius: var(--r-pill);
  padding: 8px 18px;
  font-size: 14.5px; font-weight: 600;
  white-space: nowrap;
}
.ribbon__note { font-size: 13px; margin: 0; opacity: .82; flex: none; }
@media (max-width: 900px) {
  .ribbon__inner { padding: 18px 24px; gap: 10px 18px; }
  .ribbon__groups li { font-size: 13.5px; padding: 7px 15px; }
}

/* ----------------------------------------------------------------------------
   Resting shadows. These belong outside the hover query: a touch device should
   still see the depth, it just cannot hover.

   On the petrol band a petrol shadow is invisible by definition, so the dark
   bands get a near-black one plus a faint light rim to separate the image from
   the ground.
   -------------------------------------------------------------------------- */
.arch-card .arch,
.school-tile,
.render-figure {
  box-shadow: 0 12px 32px -14px rgba(1, 42, 64, .22);
}

.band--petrol .arch-card .arch,
.band--petrol .school-tile,
.band--petrol .render-figure,
.band--petrol .card {
  box-shadow: 0 18px 42px -14px rgba(0, 0, 0, .55),
              0 0 0 1px rgba(255, 255, 255, .07);
}
@media (hover: hover) and (pointer: fine) {
  .band--petrol .arch-card:hover .arch,
  .band--petrol .school-tile:hover,
  .band--petrol .render-figure:hover {
    box-shadow: 0 26px 54px -16px rgba(0, 0, 0, .66),
                0 0 0 1px rgba(255, 255, 255, .12);
  }
}