/* ==========================================================================
   The Oxfordian School — design system
   Ported from the Figma design tokens in src/styles/theme.css
   ========================================================================== */

:root {
  /* ======================================================================
     Oxfordian unified website theme — the specification's tokens, verbatim.
     Everything semantic below points at these, so the spec is the single
     source of truth for colour and the ramps stay as tints, not as decisions.
     ====================================================================== */

  /* ======================================================================
     The official palette. Four brand colours, three tints and one body value —
     nothing else may appear as a colour in this stylesheet.
     ====================================================================== */

  /* Core brand */
  --oxford-navy: #0D1045;      /* nav, hero, dark sections   */
  --oxford-royal: #1A227F;     /* gradient accent            */
  --oxford-crimson: #E8172C;   /* menu accent, CTA, badges   */
  --oxford-white: #FFFFFF;     /* base background, text on dark */

  /* Opacity / tint variants */
  --oxford-navy-wash: rgba(13, 16, 69, 0.06);   /* card hover, icon fills */
  --oxford-red-wash: rgba(232, 23, 44, 0.08);   /* badge backgrounds      */
  --oxford-nav-border: rgba(255, 255, 255, 0.08);
  --oxford-on-dark-muted: rgba(255, 255, 255, 0.60);

  /* Body text */
  --oxford-body: #626780;      /* paragraph, secondary labels */

  /* States and hairlines. Not colours of their own — darker steps of the
     brand reds and blues, and the 10% navy hairline the theme has always
     used for a card edge on white. */
  --oxford-crimson-hover: #C40B21;
  --oxford-navy-hover: #151B69;
  --oxford-royal-hover: #0D1045;
  --oxford-hairline: rgba(13, 16, 69, 0.10);

  /* Layout and effects */
  /* The hairline, not the old Soft Sky: that colour is not in this palette. */
  --oxford-border: var(--oxford-hairline);
  --oxford-shadow: 0 10px 30px rgba(13, 16, 69, 0.10);
  --oxford-shadow-hover: 0 16px 34px rgba(13, 16, 69, 0.16);
  --oxford-radius-sm: 8px;
  --oxford-radius-md: 14px;
  --oxford-radius-lg: 22px;

  /* ======================================================================
     Colour — four ramps, 50 → 900, ten steps each.
     The 500 step of each ramp is the approved brand colour; the ramp exists
     so tints and shades stay on-brand instead of being mixed by eye.
     ====================================================================== */

  /* Warm Neutrals (Warm Nudes) — cream and sand surfaces. These replace the
     cold #fafafa / high-glare white the theme used before. */
  --ox-nude-50:  #fffefc;      /* Snow Linen  */
  --ox-nude-100: #fffdf9;      /* Warm White  — the page background */
  --ox-nude-200: #fefbf5;      /* Ivory       */
  --ox-nude-300: #fdf9f1;      /* Cream       — section bands */
  --ox-nude-400: #fcf7ed;      /* Soft Pearl  */
  --ox-nude-500: #fbf5ea;      /* Vanilla     */
  --ox-nude-600: #faf4e7;      /* Nude Blush  */
  --ox-nude-700: #f9f2e4;      /* Bisque      */
  --ox-nude-800: #f8f0e0;      /* Light Sand  */
  --ox-nude-900: #fbf7f0;      /* Alabaster   */
  --ox-nude-base: #c09c75;     /* Tan — the ramp's identity chip, not a surface */

  /* Crimson Red (school primary) — 500 is the historic brand scarlet. */
  --ox-red-50:  #fff0ef;       /* Light Coral     */
  --ox-red-100: #ffc8c2;       /* Warm Salmon     */
  --ox-red-200: #ffa389;       /* Soft Rose       */
  --ox-red-300: #ff7768;       /* Vibrant Coral   */
  --ox-red-400: #ff463d;       /* Bright Rose     */
  --ox-red-500: #e8172c;       /* Crimson Base    */
  --ox-red-600: #c40b21;       /* Classic Cardinal*/
  --ox-red-700: #9e0017;       /* Deep Burgundy   */
  --ox-red-800: #7b0011;       /* Oxblood Maroon  */
  --ox-red-900: #540007;       /* Rich Velvet     */

  /* Royal Blue (secondary accent) — true blue, no violet bias. */
  --ox-royal-50:  #f0f5ff;     /* Ice Blue        */
  --ox-royal-100: #d0dbfd;     /* Soft Sky        */
  --ox-royal-200: #a2b9fb;     /* Light Royal     */
  --ox-royal-300: #7496fa;     /* Clear Cobalt    */
  --ox-royal-400: #4770eb;     /* Vibrant Azure   */
  --ox-royal-500: #1a227f;     /* Royal Base      */
  --ox-royal-600: #151b69;     /* Imperial Blue   */
  --ox-royal-700: #101452;     /* Classic Indigo  */
  --ox-royal-800: #0a0c3c;     /* Midnight Blue   */
  --ox-royal-900: #050626;     /* Abyss Blue      */

  /* Deep Navy (institutional foundation) — structural text and dark bands. */
  --ox-navy-50:  #eceff8;      /* Cool Slate      */
  --ox-navy-100: #c6cee3;      /* Soft Navy       */
  --ox-navy-200: #9eadc9;      /* Light Navy      */
  --ox-navy-300: #7588aa;      /* Slate Navy      */
  --ox-navy-400: #50658d;      /* Steel Blue      */
  --ox-navy-500: #0d1045;      /* Deep Navy Base  */
  --ox-navy-600: #0b0e3b;      /* Abyss Navy      */
  --ox-navy-700: #090b30;      /* Midnight Navy   */
  --ox-navy-800: #060824;      /* Obsidian Navy   */
  --ox-navy-900: #030416;      /* Void Navy       */

  /* ----------------------------------------------------------------------
     Semantic aliases. Everything in the stylesheet below points at these,
     so a ramp step can be re-pointed in one line without a search-replace.
     ---------------------------------------------------------------------- */
  --ox-navy: var(--oxford-navy);
  --ox-royal: var(--ox-royal-500);   /* header/footer, table heads, links */
  /* This had been rewritten to royal by an earlier sweep, which is why the
     brand red stopped appearing. It is the brand red again. */
  --ox-red: var(--oxford-crimson);

  /*
     The white scheme, taken from tasisengland.org at the school's request: a
     white page with a pale blue-grey band. Cards are white on a white page, so
     they are held apart by the hairline border they already carried rather
     than by their fill — do not remove it. The nude ramp above is left intact,
     so the earlier cream scheme can be restored by re-pointing these four
     lines. */
  --ox-page: var(--oxford-white);
  /* Warmed from the blue-grey #f0f4f7 on 5 Sep 2026, so component surfaces sit
     in the same family as the cream page rather than reading cool against it.
     Nude-600, the section surface the guidelines already name. Every
     foreground improves slightly: body 5.04 to 5.08, navy 16.13 to 16.28,
     red-600 5.56 to 5.61. Base crimson stays below the floor at 4.17, as it
     was at 4.14, and remains forbidden as text here. */
  --ox-surface: var(--oxford-white);
  --ox-surface-deep: var(--oxford-navy-wash);
  --ox-card: var(--oxford-white);
  --ox-white: var(--oxford-white);   /* Reversed type and controls on dark */

  /* Body copy keeps its own value: it sits between navy 300 and 400 and was
     tuned for contrast on a light background, not picked off the ramp. */
  --ox-body: var(--oxford-body);

  --ox-navy-subtle: var(--oxford-navy-wash);
  --ox-navy-line: var(--oxford-border);
  --ox-royal-subtle: rgba(26, 34, 127, 0.08);
  --ox-red-subtle: var(--oxford-red-wash);
  --ox-nav-border: var(--oxford-nav-border);

  /* ======================================================================
     Type — Montserrat is the single typeface for the whole digital footprint.
     Five weights approved: 300 display-only (40px+), 400 body, 500 labels,
     600 subheadings, 700 headings. 100/200/800/900 are not used on the site.
     The scale is Montserrat's own, not the Inter values relabelled: its
     x-height is 0.525em against Inter's 0.546em, so body rises a step, and
     its rounder forms open wider gaps at size, so display tracking tightens.
     ====================================================================== */
  --font-display: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-body: var(--font-display);
  --weight-heading: 700;
  --weight-subheading: 600;
  --weight-body: 400;
  --weight-label: 500;

  /* Tracking corrections — scale with the type, applied by size band. */
  --track-display: -0.03em;    /* 40px and above */
  --track-lg: -0.025em;        /* 24 – 40px      */
  --track-md: -0.01em;         /* 17 – 24px      */
  --track-body: 0;             /* 15 – 17px      */
  --track-eyebrow: 0.14em;     /* uppercase 11 – 14px */

  /* Space */
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 20px;
  --space-lg: 40px;
  --space-xl: 80px;

  /* Radius */
  --radius-card: var(--oxford-radius-md);
  --radius-badge: var(--oxford-radius-sm);
  --radius-btn: 8px;

  /* Layout
     The container grows with the viewport instead of stopping dead at 1200px,
     which left 360px of empty margin either side of a 1920px screen — better
     than a third of the display doing nothing, with the navigation bunched in
     the middle of it.

     clamp() and not a plain percentage: 92vw alone would make the site
     *narrower* than it is today on a 1280px laptop. The floor holds the current
     width, the ceiling stops lines of text from running too long to read, and
     .ox-container is width:100% so a max-width above the viewport is harmless
     on small screens. Prose measures (--ox-measure, .ox-section-header) are
     deliberately left alone — a wider page is not a licence for wider text. */
  --container: clamp(1200px, 92vw, 1800px);
  --gutter: clamp(24px, 2.6vw, 44px);
  --nav-h: 88px;   /* raised with the logo, which is now 52px tall */

  /* Accent colours used by the extracurricular pillars */
}

/* --------------------------------------------------------------------------
   Reset / base
   -------------------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth;
  /* The header is sticky, so an anchor jump would otherwise land with the
     section heading hidden underneath it. */
  scroll-padding-top: calc(var(--nav-h) + 24px); }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  letter-spacing: var(--track-body);
  color: var(--ox-body);
  background: var(--ox-page);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img,
video { max-width: 100%; height: auto; display: block; }

a { color: var(--ox-fg-link); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--ox-fg-strong);
  margin: 0 0 var(--space-sm);
  line-height: 1.2;
  letter-spacing: var(--track-md);
}

/* Montserrat web scale. Tracking is set per size band, not per element:
   the correction has to scale with the type or it stops working. */
h1 { font-size: clamp(36px, 5vw, 52px); font-weight: 700; letter-spacing: var(--track-display); line-height: 1.05; }
h2 { font-size: clamp(27px, 3.4vw, 38px); font-weight: 700; letter-spacing: var(--track-lg); line-height: 1.12; }
h3 { font-size: clamp(21px, 2.2vw, 27px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
h4 { font-size: 20px; font-weight: 700; letter-spacing: var(--track-md); }
h5 { font-size: 17px; font-weight: 600; letter-spacing: var(--track-md); line-height: 1.3; }
h6 { font-size: 15px; font-weight: 600; letter-spacing: var(--track-body); }

p { margin: 0 0 var(--space-md); }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 var(--space-md); padding-left: 20px; }

blockquote {
  margin: 0;
  padding-left: var(--space-md);
  border-left: 4px solid var(--oxford-royal);
}

hr { border: 0; border-top: 1px solid var(--ox-navy-line); margin: var(--space-lg) 0; }

figure { margin: 0; }

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

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%); white-space: nowrap;
}

.skip-link:focus {
  position: fixed; top: 8px; left: 8px; z-index: 999;
  background: #fff; color: var(--ox-fg-strong);
  padding: 10px 16px; border-radius: var(--radius-btn);
  clip: auto; clip-path: none; width: auto; height: auto;
}

:focus-visible { outline: 2px solid var(--ox-focus-ring); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

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

.ox-section { padding-block: clamp(48px, 7vw, var(--space-xl)); }
.ox-section--tight { padding-block: clamp(36px, 5vw, 56px); }
.ox-section--surface { background: var(--ox-surface); }
.ox-section--navy { background: var(--ox-navy); color: rgba(255, 255, 255, 0.72); }
.ox-section--navy h1,
.ox-section--navy h2,
.ox-section--navy h3,
.ox-section--navy h4 { color: #fff; }

.ox-grid { display: grid; gap: var(--space-lg); }
.ox-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ox-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ox-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ox-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ox-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.ox-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.ox-split--top { align-items: start; }
/* Core's flow layout adds a top margin to every child after the first, which in
   a two-column split drops the right-hand column a few pixels below the left.
   The split owns its own spacing. */
.ox-split > * { margin-block: 0; }

.ox-stack { display: flex; flex-direction: column; gap: var(--space-md); }
.ox-row { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }
.ox-center { text-align: center; }
/* Montserrat sets about 7% wider than Inter, so a 640px column drops from
   roughly 65 characters to 60. The measure widens to hold the same count. */
.ox-measure { max-width: 690px; }
.ox-measure--wide { max-width: 775px; }/* --------------------------------------------------------------------------
   Components — badge, eyebrow, section header
   -------------------------------------------------------------------------- */

.ox-badge {
  display: inline-block;
  background: var(--ox-royal-subtle);
  color: var(--ox-fg-brand);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px var(--space-sm);
  border-radius: var(--radius-badge);
  margin-bottom: var(--space-sm);
}
.ox-badge--light {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}.ox-badge--navy { background: var(--ox-navy-subtle); color: var(--ox-fg-strong); }

.ox-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--ox-navy-subtle);
  color: var(--ox-fg-strong);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.3px;
  padding: 5px 12px;
  border-radius: var(--radius-badge);
}
/* Transparent chips: the grade levels read as a quiet list at the foot of the
   band rather than as filled blocks competing with the copy above them. */
.ox-chip--outline {
  background: transparent;
  border: 1px solid var(--ox-navy-line);
  color: var(--ox-fg-strong);
}.ox-chip--tag {
  background: var(--ox-royal-subtle);
  color: var(--ox-fg-brand);
  font-weight: 600;
  font-size: 13px;
  border-radius: 20px;
  padding: 4px 12px;
}

.ox-section-header { max-width: 680px; }
.ox-section-header p { color: var(--ox-body); font-size: 17px; margin-bottom: 0; }
.ox-section-header--center { margin-inline: auto; text-align: center; }
.ox-section-header--light p { color: rgba(255, 255, 255, 0.62); }

.ox-eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ox-fg-brand);
  margin: 0 0 var(--space-md);
}

.ox-rule { width: 48px; height: 3px; background: var(--oxford-royal); border-radius: 2px; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.ox-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  padding: 15px 26px;
  border-radius: var(--radius-btn);
  border: 1px solid transparent;
  cursor: pointer;
  transition: filter 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.15s ease;
  text-decoration: none;
  white-space: nowrap;
}
.ox-btn:hover { text-decoration: none; filter: brightness(0.9); }
.ox-btn:active { transform: translateY(1px); }

.ox-btn--primary { background: var(--ox-red); color: #fff; }.ox-btn--ghost {
  background: transparent;
  color: var(--ox-fg-strong);
  border-color: var(--ox-navy-line);
}
.ox-btn--ghost:hover { background: var(--ox-navy-subtle); filter: none; }
.ox-btn--ghost-light {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.18);
}
.ox-btn--ghost-light:hover { background: rgba(255, 255, 255, 0.16); filter: none; }.ox-btn--sm { font-size: 14px; padding: 11px 18px; }
.ox-btn--block { width: 100%; }

.ox-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 14px;
  color: var(--ox-fg-brand);
}
.ox-link-arrow:hover { text-decoration: none; gap: 10px; transition: gap 0.15s ease; }

.ox-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
}
.ox-back-link:hover { color: #fff; text-decoration: none; }

/* --------------------------------------------------------------------------
   Header / navigation
   -------------------------------------------------------------------------- */

.ox-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--ox-royal);
  border-bottom: 1px solid var(--ox-nav-border);
}

.ox-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: var(--nav-h);
}

.ox-logo { display: flex; align-items: center; flex-shrink: 0; }
.ox-logo img { height: 52px; width: auto; object-fit: contain; }
.ox-logo:hover { text-decoration: none; }.ox-nav { display: flex; align-items: center; gap: clamp(24px, 2.4vw, 40px); }
.ox-nav__item { position: relative; }

.ox-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 17px;
  color: #fff;
  opacity: 0.85;
  padding: 24px 0;
  background: none;
  border: 0;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.ox-nav__link:hover,
.ox-nav__item.is-open > .ox-nav__link,
.ox-nav__item.is-current > .ox-nav__link { opacity: 1; text-decoration: none; }
.ox-nav__item.is-current > .ox-nav__link { position: relative; }
.ox-nav__item.is-current > .ox-nav__link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 18px;
  height: 2px;
  background: var(--oxford-royal);
  border-radius: 2px;
}
.ox-nav__caret { transition: transform 0.15s ease; }
.ox-nav__item.is-open .ox-nav__caret { transform: rotate(180deg); }

.ox-header__actions { display: flex; align-items: center; gap: var(--space-sm); }
/* Core's flow layout gives every child after the first a 10px top margin, which
   pushed the Contact button 5px below the login button despite align-items.
   Same reset .ox-split uses. The shared min-width makes the pair the same size
   rather than two different widths sitting side by side. */
.ox-header__actions > * { margin-block: 0; }
.ox-header__actions .ox-btn {
  min-width: 152px;
  padding: 10px 16px;
  font-size: 13.5px;
}

.ox-nav-toggle {
  display: none;
  background: none;
  border: 0;
  color: #fff;
  padding: 8px;
  cursor: pointer;
  border-radius: var(--radius-btn);
}
.ox-nav-toggle:hover { background: rgba(255, 255, 255, 0.08); }

/* Dropdowns */
.ox-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 260px;
  /* Sections carry up to six children with a line of description each, so cap
     the width and let the descriptions wrap rather than stretching the panel. */
  max-width: 340px;
  border: 1px solid var(--ox-navy-line);
  background: var(--ox-card);
  border-radius: var(--radius-card);
  box-shadow: 0 20px 48px rgba(13, 16, 69, 0.18);
  padding: var(--space-sm);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  z-index: 210;
}
.ox-nav__item.is-open .ox-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.ox-dropdown__link {
  display: block;
  padding: 10px var(--space-sm);
  border-radius: var(--radius-btn);
  font-size: 14px;
  font-weight: 500;
  color: var(--ox-fg-strong);
}
.ox-dropdown__link:hover { background: var(--ox-surface); text-decoration: none; color: var(--ox-fg-brand); }
.ox-dropdown__link span { display: block; font-size: 12px; font-weight: 400; color: var(--ox-body); margin-top: 2px; }

/* Mega dropdown — campus cards */
.ox-dropdown--mega {
  width: min(880px, calc(100vw - 48px));
  padding: 0;
  overflow: hidden;
}
.ox-dropdown__head {
  background: var(--ox-navy);
  padding: var(--space-md) var(--space-lg);
}
.ox-dropdown__head h4 { color: #fff; margin: 0 0 4px; font-size: 18px; }
.ox-dropdown__head p { color: rgba(255, 255, 255, 0.6); font-size: 13px; margin: 0; }
.ox-dropdown__body { padding: var(--space-md); }
.ox-dropdown__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); }
.ox-dropdown__card {
  display: block;
  padding: var(--space-sm) 14px;
  border: 1px solid var(--ox-navy-line);
  border-radius: var(--radius-btn);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.ox-dropdown__card:hover { border-color: var(--ox-fg-brand); background: var(--ox-royal-subtle); text-decoration: none; }
.ox-dropdown__card strong { display: block; font-family: var(--font-display); font-size: 15px; color: var(--ox-fg-strong); }
.ox-dropdown__card span { font-size: 12px; color: var(--ox-body); }
.ox-dropdown__foot {
  border-top: 1px solid var(--ox-navy-line);
  padding: var(--space-sm) var(--space-md);
  text-align: right;
}

/* Mobile panel */
.ox-mobile-nav {
  display: none;
  background: var(--ox-navy);
  border-top: 1px solid var(--ox-nav-border);
  max-height: calc(100vh - var(--nav-h));
  overflow-y: auto;
}
.ox-mobile-nav.is-open { display: block; }
.ox-mobile-nav__list { list-style: none; margin: 0; padding: var(--space-sm) 0 var(--space-md); }
.ox-mobile-nav__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.ox-mobile-nav__link {
  flex: 1;
  display: block;
  padding: 14px 0;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
}
.ox-mobile-nav__link:hover { text-decoration: none; }
.ox-mobile-nav__toggle {
  background: none;
  border: 0;
  color: rgba(255, 255, 255, 0.55);
  padding: 10px;
  cursor: pointer;
}
.ox-mobile-nav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.ox-mobile-nav__sub { display: none; padding: 0 0 var(--space-sm) var(--space-sm); }
.ox-mobile-nav__sub.is-open { display: block; }
.ox-mobile-nav__sub a {
  display: block;
  padding: 9px 0;
  color: rgba(255, 255, 255, 0.66);
  font-size: 14px;
}

/* Group headings in the mobile panel (3.217.0).
   The same headings the dropdown shows, since both now read the menu. The
   dropdown sits on a light panel and this one on navy, so the label is set in
   white rather than --ox-fg-strong; measured 12.3 against the panel. */
.ox-mobile-nav__group + .ox-mobile-nav__group {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  margin-top: 8px;
  padding-top: 8px;
}
.ox-mobile-nav__group-label {
  margin: 6px 0 2px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}/* --------------------------------------------------------------------------
   Hero patterns
   -------------------------------------------------------------------------- */

.ox-hero {
  background: var(--ox-navy);
  color: rgba(255, 255, 255, 0.7);
  padding-block: clamp(48px, 7vw, 88px);
  position: relative;
  overflow: hidden;
}
.ox-hero h1 { color: #fff; }
.ox-hero__lede {
  font-size: 17px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.62);
  max-width: 520px;
}
.ox-hero__media {
  border-radius: var(--radius-card);
  overflow: hidden;
  position: relative;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
}
.ox-hero__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 10; }

/* Home hero: a landscape frame rather than the standing 4:3 one. The picture
   is wider than it is tall, so the column carrying it gets the larger share of
   the split and the copy beside it is given a measure that suits the shorter
   height — otherwise the text runs long past the bottom of the picture. */
.ox-hero .ox-split { grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); }
.ox-hero .ox-hero__media img { aspect-ratio: 16 / 9; }
.ox-hero .ox-hero__lede { max-width: 46ch; }

@media (max-width: 900px) {
  .ox-hero .ox-split { grid-template-columns: minmax(0, 1fr); }
  .ox-hero .ox-hero__media img { aspect-ratio: 16 / 10; }
}
.ox-hero__media-badge {
  position: absolute;
  left: var(--space-md);
  bottom: var(--space-md);
  background: rgba(13, 16, 69, 0.82);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--radius-badge);
}
.ox-hero__arc {
  position: absolute;
  right: -80px;
  top: -80px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: rgba(232, 23, 44, 0.07);
  pointer-events: none;
}
.ox-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-md); }

.ox-trust-bar {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 4vw, 48px);
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--ox-nav-border);
}
.ox-trust-bar__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  color: #fff;
  line-height: 1;
  margin: 0 0 4px;
}
.ox-trust-bar__label { font-size: 12px; color: rgba(255, 255, 255, 0.55); margin: 0; }

/* Video hero (Meet the Team) */
.ox-video-hero {
  position: relative;
  min-height: var(--ox-hero-max, 600px);
  overflow: hidden;
  background: var(--ox-navy);
  display: flex;
  align-items: flex-end;
}
.ox-video-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
}
/* Sets the band's height from inside it: the section is a flex container, so
   its height is that of the tallest item in flow. Zero width, so it takes no
   room and never becomes a focus or hit target. */
.ox-video-hero__sizer {
  width: 0;
  flex: 0 0 auto;
  pointer-events: none;
}
.ox-video-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(13, 16, 69, 0.45) 0%, rgba(13, 16, 69, 0.72) 60%, rgba(13, 16, 69, 0.92) 100%);
}
.ox-video-hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-block: clamp(56px, 8vw, 96px) clamp(40px, 6vw, 72px);
}
/* Same treatment as the photograph headers: centred, and light enough that the
   film behind it stays the thing you look at. */
.ox-video-hero__content .ox-container { text-align: center; }
.ox-video-hero h1 {
  color: #fff;
  max-width: 640px;
  margin-inline: auto;
  font-weight: 300;
  letter-spacing: -0.005em;
}
.ox-video-hero p {
  color: rgba(255, 255, 255, 0.65);
  max-width: 520px;
  margin-inline: auto;
  font-size: 17px;
  line-height: 1.65;
}

/* Breadcrumb */
.ox-breadcrumb {
  background: var(--ox-surface);
  border-bottom: 1px solid var(--ox-navy-line);
  padding-block: 14px;
  font-size: 13px;
}
.ox-breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ox-breadcrumb a { color: var(--ox-body); }
.ox-breadcrumb a:hover { color: var(--ox-fg-brand); }
.ox-breadcrumb li[aria-current] { color: var(--ox-fg-strong); font-weight: 600; }
.ox-breadcrumb svg { color: rgba(98, 103, 128, 0.5); }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.ox-card {
  background: var(--ox-card);
  border: 1px solid var(--ox-navy-line);
  border-radius: var(--radius-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.ox-card:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10); transform: translateY(-2px); text-decoration: none; }
.ox-card__media { position: relative; overflow: hidden; background: var(--ox-surface); }
.ox-card__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ox-card__body { padding: var(--space-md); display: flex; flex-direction: column; gap: var(--space-xs); flex: 1; }
.ox-card__kicker {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ox-fg-brand);
}
.ox-card__title { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--ox-fg-strong); margin: 0; line-height: 1.3; }
.ox-card__text { font-size: 14px; color: var(--ox-body); line-height: 1.6; margin: 0; }
.ox-card__foot { margin-top: auto; padding-top: var(--space-xs); }

/* Story card */
.ox-story-card .ox-card__media img { aspect-ratio: 16 / 10; }

/* Featured (large) story card */
.ox-feature-card {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  min-height: 420px;
  display: flex;
  align-items: flex-end;
  color: #fff;
}
.ox-feature-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ox-feature-card::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(13, 16, 69, 0.92) 0%, rgba(13, 16, 69, 0.45) 55%, rgba(13, 16, 69, 0.1) 100%);
}
.ox-feature-card__body { position: relative; z-index: 1; padding: var(--space-lg); }
.ox-feature-card h3 { color: #fff; font-size: clamp(22px, 2.6vw, 30px); }
.ox-feature-card p { color: rgba(255, 255, 255, 0.75); font-size: 15px; margin-bottom: var(--space-sm); }
.ox-feature-card:hover { text-decoration: none; }

/* Compact overlay card (Life stack) */
.ox-mini-card {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  min-height: 130px;
  display: flex;
  align-items: flex-end;
  color: #fff;
}
.ox-mini-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ox-mini-card::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(13, 16, 69, 0.9) 0%, rgba(13, 16, 69, 0.25) 100%);
}
.ox-mini-card__body { position: relative; z-index: 1; padding: var(--space-sm) var(--space-md); }
.ox-mini-card__kicker { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #fff; opacity: 0.8; }
.ox-mini-card strong { display: block; font-family: var(--font-display); font-size: 16px; margin: 2px 0; }
.ox-mini-card span { font-size: 12px; color: rgba(255, 255, 255, 0.7); }
.ox-mini-card:hover { text-decoration: none; }

/* Journey (grade level) card */
.ox-journey-card .ox-card__media img { aspect-ratio: 4 / 3; }

/* The grade-level row runs five across, so each card is narrow by definition.
   Scale the type and padding down to match — at 330px wide the standard card
   sizing reads as oversized. */
.ox-journey-row .ox-journey-card .ox-card__media img { aspect-ratio: 3 / 2; }
.ox-journey-row .ox-journey-card .ox-card__body { padding: var(--space-sm) var(--space-sm) var(--space-md); gap: 4px; }
.ox-journey-row .ox-journey-card .ox-card__title { font-size: 16px; letter-spacing: var(--track-md); }
.ox-journey-row .ox-journey-card p { font-size: 13.5px; line-height: 1.5; }
.ox-journey-row .ox-journey-card__age { font-size: 11px; letter-spacing: 0.04em; }
.ox-journey-row .ox-journey-card__icon { width: 30px; height: 30px; }
.ox-journey-row .ox-journey-card__icon svg { width: 15px; height: 15px; }
.ox-journey-card__icon {
  position: absolute;
  left: var(--space-sm);
  top: var(--space-sm);
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ox-fg-strong);
}
.ox-journey-card__age { font-size: 12px; font-weight: 600; color: var(--ox-fg-brand); }

/* Campus row (home list) */
.ox-campus-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  border: 1px solid var(--ox-navy-line);
  border-radius: var(--radius-card);
  background: var(--ox-card);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.ox-campus-row:hover {
  border-color: var(--ox-fg-brand);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07);
  transform: translateY(-2px);
  text-decoration: none;
}
.ox-campus-row__icon {
  width: 42px; height: 42px;
  flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--ox-royal-subtle);
  color: var(--ox-fg-brand);
}
.ox-campus-row__text { flex: 1; min-width: 0; }
.ox-campus-row__text strong { display: block; font-family: var(--font-display); font-size: 17px; color: var(--ox-fg-strong); }
.ox-campus-row__text span { font-size: 13px; color: var(--ox-body); }
.ox-campus-row__chevron { color: var(--ox-body); flex-shrink: 0; }

/* Icon bullet (why-oxfordian) */
.ox-bullet { display: flex; gap: var(--space-md); align-items: flex-start; }
.ox-bullet__num {
  width: 34px; height: 34px;
  flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--oxford-royal);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
}
.ox-bullet h4 { margin: 0 0 4px; font-size: 18px; }
.ox-bullet p { font-size: 15px; margin: 0; }

/* Icon card (mission / vision / values, pillars) */
.ox-icon-card {
  background: var(--ox-card);
  border: 1px solid var(--ox-navy-line);
  border-radius: var(--radius-card);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  height: 100%;
}
.ox-icon-card__icon {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--ox-royal-subtle);
  color: var(--ox-fg-brand);
  margin-bottom: var(--space-xs);
}
.ox-icon-card h3 { font-size: 20px; margin: 0; }
.ox-icon-card p { font-size: 15px; margin: 0; }
.ox-icon-card--navy {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--ox-nav-border);
}
.ox-icon-card--navy h3 { color: #fff; }
.ox-icon-card--navy p { color: rgba(255, 255, 255, 0.62); }
.ox-icon-card--navy .ox-icon-card__icon { background: rgba(232, 23, 44, 0.16); }

/* Leader card */
.ox-leader-card {
  background: var(--ox-card);
  border: 1px solid var(--ox-navy-line);
  border-radius: var(--radius-card);
  padding: var(--space-lg) var(--space-md);
  text-align: center;
}
.ox-leader-card img {
  width: 84px; height: 84px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center; /* portraits crop to the face, not the chest */
  margin: 0 auto var(--space-sm);
}
.ox-leader-card__role {
  font-size: 10px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--ox-fg-brand); margin: 0 0 6px;
}
.ox-leader-card strong { display: block; font-family: var(--font-display); font-size: 17px; color: var(--ox-fg-strong); }
.ox-leader-card a { font-size: 13px; color: var(--ox-body); }

/* Facility card */
.ox-facility-card { border-radius: var(--radius-card); overflow: hidden; background: var(--ox-surface); }
.ox-facility-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ox-facility-card__body { padding: var(--space-md); }
.ox-facility-card h4 { font-size: 17px; margin: 0 0 6px; }
.ox-facility-card p { font-size: 14px; margin: 0; }

/* Stat tiles */
.ox-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-sm);
}
.ox-stat {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--ox-nav-border);
  border-radius: var(--radius-card);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 6px;
}/* Big number card */
.ox-number-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--ox-nav-border);
  border-radius: var(--radius-card);
  padding: var(--space-lg);
}
.ox-number-card__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 38px);
  color: #fff;
  line-height: 1;
  margin: 0;
}
.ox-number-card__unit { font-size: 13px; color: var(--ox-fg-brand); font-weight: 600; margin: 6px 0 var(--space-xs); }
.ox-number-card__label { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: #fff; margin: 0 0 6px; }
.ox-number-card p { font-size: 14px; color: rgba(255, 255, 255, 0.6); margin: 0; }

/* Video card */
.ox-video-card {
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--ox-navy);
  position: relative;
  box-shadow: 0 8px 32px var(--ox-navy-subtle);
}
.ox-video-card video { width: 100%; display: block; aspect-ratio: 16 / 9; object-fit: cover; }
.ox-video-card__meta {
  position: absolute;
  left: var(--space-sm);
  bottom: var(--space-sm);
  background: rgba(13, 16, 69, 0.8);
  backdrop-filter: blur(6px);
  border-radius: var(--radius-btn);
  padding: 8px 12px;
  color: #fff;
}
.ox-video-card__meta strong { display: block; font-size: 13px; font-weight: 600; }
.ox-video-card__meta span { font-size: 11px; color: rgba(255, 255, 255, 0.65); }

/* Embed cards (YouTube / Facebook) */
.ox-embed-card {
  background: var(--ox-card);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14);
  display: flex;
  flex-direction: column;
}
.ox-embed-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  font-weight: 600;
  font-size: 14px;
  color: var(--ox-fg-strong);
  border-bottom: 1px solid var(--ox-navy-line);
}
.ox-embed-card__frame { position: relative; aspect-ratio: 16 / 9; background: #000; }
.ox-embed-card__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ox-embed-card__frame--tall { aspect-ratio: 3 / 4; background: var(--ox-surface); }
.ox-embed-card__foot { padding: var(--space-sm) var(--space-md); }

/* --------------------------------------------------------------------------
   Journey strip / timeline / process steps
   -------------------------------------------------------------------------- */

.ox-journey-strip {
  display: grid;
  /* Follows the number of steps the block actually rendered. Five was hard
     coded here, which would have broken the moment a sixth step was added. */
  grid-template-columns: repeat(var(--ox-journey-cols, 5), 1fr);
  gap: var(--space-md);
  counter-reset: step;
}
.ox-journey-step { text-align: center; position: relative; }
.ox-journey-step__num {
  width: 40px; height: 40px;
  margin: 0 auto var(--space-sm);
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--oxford-royal);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  position: relative;
  z-index: 1;
}
.ox-journey-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 20px; left: calc(50% + 26px); right: calc(-50% + 26px);
  height: 2px;
  background: var(--ox-navy-line);
}
/* h3 was added when the strip became a block: the markup has always emitted
   h3, so this rule had been styling a tag that was never on the page and the
   titles were rendering at the theme's default 21px. */
.ox-journey-step h3,
.ox-journey-step h4 { font-size: 16px; margin: 0 0 4px; }
.ox-journey-step p { font-size: 13px; margin: 0; }

.ox-timeline { position: relative; padding-block: var(--space-md); }
.ox-timeline::before {
  content: '';
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: rgba(255, 255, 255, 0.12);
}
.ox-timeline__item { position: relative; width: 50%; padding: 0 var(--space-lg) var(--space-lg); }
.ox-timeline__item--left { margin-right: auto; text-align: right; }
.ox-timeline__item--right { margin-left: auto; }
.ox-timeline__dot {
  position: absolute;
  top: 6px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--oxford-royal);
  border: 3px solid var(--ox-navy);
}
.ox-timeline__item--left .ox-timeline__dot { right: -7px; }
.ox-timeline__item--right .ox-timeline__dot { left: -7px; }
.ox-timeline__year {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--ox-fg-brand);
  letter-spacing: 0.5px;
  margin: 0 0 4px;
}
.ox-timeline h4 { color: #fff; font-size: 18px; margin: 0 0 6px; }
.ox-timeline p { color: rgba(255, 255, 255, 0.6); font-size: 14px; margin: 0; }

.ox-step {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
}
.ox-step__badge {
  width: 40px; height: 40px;
  flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--ox-navy);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
}
.ox-step h4 { margin: 0 0 4px; font-size: 18px; }
.ox-step p { margin: 0; font-size: 15px; }

/* --------------------------------------------------------------------------
   Accordion (FAQ)
   -------------------------------------------------------------------------- */

.ox-accordion { border-top: 1px solid var(--ox-navy-line); }
.ox-accordion__item { border-bottom: 1px solid var(--ox-navy-line); }
.ox-accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  background: none;
  border: 0;
  padding: var(--space-md) 0;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--ox-fg-strong);
  cursor: pointer;
}
.ox-accordion__icon {
  flex-shrink: 0;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--ox-royal-subtle);
  color: var(--ox-fg-brand);
  transition: transform 0.2s ease;
}
.ox-accordion__trigger[aria-expanded="true"] .ox-accordion__icon { transform: rotate(45deg); }
.ox-accordion__panel { display: none; padding: 0 0 var(--space-md); }
.ox-accordion__panel.is-open { display: block; }
.ox-accordion__panel p { font-size: 15px; margin: 0; max-width: 760px; }

/* --------------------------------------------------------------------------
   Filter tags
   -------------------------------------------------------------------------- */

.ox-filter { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.ox-filter__btn {
  background: var(--ox-card);
  border: 1px solid var(--ox-navy-line);
  border-radius: 999px;
  padding: 8px 16px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--ox-body);
  cursor: pointer;
  transition: all 0.15s ease;
}
.ox-filter__btn:hover { border-color: var(--ox-fg-brand); color: var(--ox-fg-brand); text-decoration: none; }
.ox-filter__btn.is-active { background: var(--ox-navy); border-color: var(--ox-fg-strong); color: #fff; }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.ox-form { display: grid; gap: var(--space-sm); }
.ox-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
.ox-field { display: flex; flex-direction: column; gap: 6px; }
.ox-field label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--ox-fg-strong);
}
.ox-field input,
.ox-field select,
.ox-field textarea {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ox-fg-strong);
  background: var(--ox-card);
  border: 1px solid var(--ox-navy-line);
  border-radius: var(--radius-btn);
  padding: 13px 14px;
  width: 100%;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.ox-field input:focus,
.ox-field select:focus,
.ox-field textarea:focus {
  outline: none;
  border-color: var(--ox-fg-brand);
  background: var(--ox-card);
}
.ox-field input::placeholder,
.ox-field textarea::placeholder { color: rgba(98, 103, 128, 0.65); }
.ox-field--full { grid-column: 1 / -1; }
.ox-hp { position: absolute !important; left: -9999px; }

.ox-form__note { font-size: 12px; color: var(--ox-body); margin: 0; }
.ox-form__status { font-size: 14px; margin: 0; padding: var(--space-sm) 14px; border-radius: var(--radius-btn); display: none; }
.ox-form__status.is-visible { display: block; }
.ox-form__status--ok { background: var(--ox-royal-subtle); color: var(--ox-fg-link); }

/* The one place the spec keeps red outside the CTA: a real alert. Crimson
   hover is the readable step, 5.84 on white where base crimson is 4.58. */
.ox-form__status--error { background: var(--ox-red-subtle); color: var(--oxford-crimson-hover); }

.ox-form-card {
  background: var(--ox-card);
  border: 1px solid var(--ox-navy-line);
  border-radius: var(--radius-card);
  padding: clamp(24px, 4vw, var(--space-lg));
  box-shadow: 0 12px 40px var(--ox-navy-subtle);
}

/* Modal */
.ox-modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
  background: rgba(13, 16, 69, 0.6);
  backdrop-filter: blur(4px);
}
.ox-modal.is-open { display: flex; }
.ox-modal__dialog {
  background: var(--ox-card);
  border-radius: var(--radius-card);
  width: min(620px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  position: relative;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.32);
}
.ox-modal__head {
  background: var(--ox-navy);
  padding: var(--space-lg) var(--space-lg) var(--space-md);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}
.ox-modal__head h3 { color: #fff; margin: 0 0 6px; }
.ox-modal__head p { color: rgba(255, 255, 255, 0.62); font-size: 14px; margin: 0; }
.ox-modal__body { padding: var(--space-lg); }
.ox-modal__close {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 0;
  color: #fff;
  cursor: pointer;
}
.ox-modal__close:hover { background: rgba(255, 255, 255, 0.24); }

/* --------------------------------------------------------------------------
   CTA banners
   -------------------------------------------------------------------------- */

.ox-cta {
  background: var(--ox-navy);
  color: rgba(255, 255, 255, 0.7);
  padding-block: clamp(40px, 6vw, 64px);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.ox-cta h2 { color: #fff; margin-bottom: var(--space-md); }
.ox-cta p { color: rgba(255, 255, 255, 0.62); max-width: 560px; margin-inline: auto; }
.ox-cta__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); justify-content: center; margin-top: var(--space-md); }

.ox-cta-box {
  background: var(--ox-surface);
  border-radius: var(--radius-card);
  padding: clamp(28px, 4vw, var(--space-lg));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}
.ox-cta-box h3 { margin: 0 0 6px; }
.ox-cta-box p { margin: 0; font-size: 15px; max-width: 520px; }

.ox-cta-option {
  background: var(--ox-card);
  border: 1px solid var(--ox-navy-line);
  border-radius: var(--radius-card);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  align-items: flex-start;
  height: 100%;
}
.ox-cta-option h4 { margin: 0; }
.ox-cta-option p { font-size: 14px; margin: 0; flex: 1; }

/* --------------------------------------------------------------------------
   Article / prose
   -------------------------------------------------------------------------- */

.ox-prose { font-size: 17px; line-height: 1.75; color: var(--ox-body); }
.ox-prose h2, .ox-prose h3, .ox-prose h4 { margin-top: var(--space-lg); }
.ox-prose img { border-radius: var(--radius-card); margin-block: var(--space-md); }
.ox-prose a { text-decoration: underline; }
.ox-prose ul, .ox-prose ol { padding-left: 22px; }
.ox-prose li { margin-bottom: 8px; }
.ox-prose > *:first-child { margin-top: 0; }

/* --------------------------------------------------------------------------
   Links inside running copy
   --------------------------------------------------------------------------
   A link set apart only by its colour is invisible to a reader who cannot see
   that colour (WCAG 1.4.1, Use of Colour), so every link sitting in a sentence
   or a list item carries an underline. Controls that already read as controls
   — buttons, arrow links, the back link, the utility bar — keep their own
   treatment and are excluded by name. The #ox-main scope keeps this out of the
   header, the footer and the jump menu. */
#ox-main p a:not(.ox-btn):not(.ox-link-arrow):not(.ox-back-link):not(.ox-util):not(.ox-badge),
#ox-main li a:not(.ox-btn):not(.ox-link-arrow):not(.ox-back-link):not(.ox-util):not(.ox-badge) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(26, 34, 127, 0.45);
}
#ox-main p a:not(.ox-btn):not(.ox-link-arrow):not(.ox-back-link):not(.ox-util):not(.ox-badge):hover,
#ox-main li a:not(.ox-btn):not(.ox-link-arrow):not(.ox-back-link):not(.ox-util):not(.ox-badge):hover {
  text-decoration-color: currentColor;
}

.ox-quote-card {
  background: var(--ox-surface);
  border-left: 4px solid var(--oxford-royal);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  padding: var(--space-lg);
}
.ox-quote-card p {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  font-size: 19px;
  color: var(--ox-fg-strong);
  line-height: 1.55;
  margin: 0 0 var(--space-xs);
}
.ox-quote-card cite { font-style: normal; font-size: 14px; color: var(--ox-body); }

.ox-checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.ox-checklist li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.ox-checklist svg { flex-shrink: 0; margin-top: 3px; color: var(--ox-fg-brand); }

/* Contact lines */
.ox-contact-list { display: grid; gap: var(--space-sm); }
.ox-contact-line { display: flex; gap: var(--space-sm); align-items: flex-start; font-size: 15px; min-width: 0; }
.ox-contact-line svg { flex-shrink: 0; margin-top: 3px; color: var(--ox-fg-brand); }
/* A flex item will not shrink below the min-content width of its text, and a
   long address like quintas.admissions@oxfordreynosa.edu.mx has no break
   opportunity — so it pushes straight out of the card. min-width:0 lets the
   item shrink; overflow-wrap gives the browser somewhere to break. */
.ox-contact-line a { color: inherit; min-width: 0; overflow-wrap: anywhere; }
.ox-contact-line a:hover { color: var(--ox-fg-brand); }

.ox-map-embed {
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--ox-surface);
  position: relative;
}
.ox-map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ox-map-embed img { width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.ox-footer {
  background: var(--ox-royal);
  color: rgba(255, 255, 255, 0.55);
  padding-block: clamp(40px, 6vw, 64px) var(--space-lg);
  font-size: 14px;
}
.ox-footer__cols {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: var(--space-lg);
}
.ox-footer__logo img { height: 40px; width: auto; margin-bottom: var(--space-sm); }
.ox-footer h3,
.ox-footer h4 {
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0 0 var(--space-sm);
}
.ox-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ox-footer a { color: rgba(255, 255, 255, 0.55); }
.ox-footer a:hover { color: #fff; text-decoration: none; }
.ox-footer__social { display: flex; gap: var(--space-xs); margin-top: var(--space-sm); }
.ox-footer__social a {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
  transition: background 0.15s ease, color 0.15s ease;
}
.ox-footer__social a:hover { background: var(--oxford-royal); color: #fff; }
.ox-footer__divider { height: 1px; background: var(--ox-nav-border); margin-block: var(--space-lg) var(--space-md); }
.ox-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
}
.ox-footer__legal { display: flex; gap: var(--space-md); flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   Pagination / archive bits
   -------------------------------------------------------------------------- */

.ox-pagination { display: flex; justify-content: center; gap: 6px; margin-top: var(--space-lg); }
.ox-pagination .page-numbers {
  display: grid; place-items: center;
  min-width: 40px; height: 40px;
  padding: 0 10px;
  border-radius: var(--radius-btn);
  border: 1px solid var(--ox-navy-line);
  color: var(--ox-fg-strong);
  font-size: 14px;
  font-weight: 600;
}
.ox-pagination .page-numbers:hover { border-color: var(--ox-fg-brand); color: var(--ox-fg-brand); text-decoration: none; }
.ox-pagination .page-numbers.current { background: var(--ox-navy); border-color: var(--ox-fg-strong); color: #fff; }

.ox-empty {
  text-align: center;
  padding-block: var(--space-xl);
  color: var(--ox-body);
}

/* WordPress core alignment / caption classes */
.alignleft { float: left; margin: 0 var(--space-md) var(--space-sm) 0; }
.alignright { float: right; margin: 0 0 var(--space-sm) var(--space-md); }
.aligncenter { display: block; margin-inline: auto; }
.alignwide { max-width: min(1100px, 100%); margin-inline: auto; }
.alignfull { width: 100%; }
.wp-caption-text, figcaption { font-size: 13px; color: var(--ox-body); margin-top: 8px; }
.sticky .ox-card { border-color: var(--ox-fg-brand); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .ox-grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ox-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ox-journey-strip { grid-template-columns: repeat(3, 1fr); row-gap: var(--space-lg); }
  .ox-journey-step::after { display: none; }
  .ox-footer__cols { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 960px) {
  .ox-nav,
  .ox-header__actions .ox-btn { display: none; }
  .ox-nav-toggle { display: inline-flex; }
  .ox-dropdown { display: none; }
}

@media (max-width: 860px) {
  :root { --gutter: 20px; }
  .ox-split { grid-template-columns: 1fr; }
  .ox-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ox-form__grid { grid-template-columns: 1fr; }
  .ox-timeline::before { left: 7px; }
  .ox-timeline__item { width: 100%; margin: 0; padding: 0 0 var(--space-lg) var(--space-lg); text-align: left; }
  .ox-timeline__item--left .ox-timeline__dot,
  .ox-timeline__item--right .ox-timeline__dot { left: 1px; right: auto; }
  .ox-dropdown__grid { grid-template-columns: 1fr; }
  .ox-video-hero { min-height: 480px; }
}

@media (max-width: 620px) {
  .ox-grid--2,
  .ox-grid--3,
  .ox-grid--4,
  .ox-grid--5 { grid-template-columns: 1fr; }
  .ox-journey-strip { grid-template-columns: 1fr; }
  .ox-footer__cols { grid-template-columns: 1fr; }
  .ox-cta-box { flex-direction: column; align-items: flex-start; }
  .ox-feature-card { min-height: 340px; }
  .ox-trust-bar { gap: var(--space-md); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Horizontal scroller used for card rows on small screens */
@media (max-width: 620px) {
  .ox-scroller {
    display: flex;
    gap: var(--space-sm);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    -webkit-overflow-scrolling: touch;
  }
  .ox-scroller > * { flex: 0 0 82%; scroll-snap-align: start; }
}

/* Card rows between the phone scroller and the flip-row band are handled in
   blocks.css, not here: .ox-grid.is-layout-flow re-declares display:grid at
   (0,2,0) in that later file, so a rule at this weight in this file cannot win.
   See "Card rows in the middle band" there. */

/* --------------------------------------------------------------------------
   Oxford After School
   -------------------------------------------------------------------------- */

/* Hero lockup ------------------------------------------------------------- */

.ox-as-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}
.ox-as-hero__text { gap: var(--space-md); }

/* Official artwork, when assets/images/afterschool-logo.svg|png is present. */
.ox-as-logo { width: auto; object-fit: contain; display: block; }
.ox-as-logo--sm { height: 44px; }
.ox-as-logo--md { height: 72px; }
.ox-as-logo--lg { height: clamp(84px, 11vw, 132px); }

/* CSS fallback wordmark in the style of the After School flyers. */
.ox-as-mark {
  --ox-as-size: 44px;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  line-height: 0.82;
  letter-spacing: -0.02em;
  -webkit-text-stroke: 0.5px currentColor;
}
.ox-as-mark--sm { --ox-as-size: 26px; }
.ox-as-mark--md { --ox-as-size: 38px; }
.ox-as-mark--lg { --ox-as-size: clamp(24px, 3.4vw, 44px); }
/* The lower line is the long one, so it sets the width of the whole lockup. */
.ox-as-mark { max-width: 100%; }
.ox-as-mark__line { overflow-wrap: anywhere; }

.ox-as-mark__line { display: block; font-size: var(--ox-as-size); }
.ox-as-mark__line--top { font-size: calc(var(--ox-as-size) * 0.82); }
.ox-as-mark__line--bottom { position: relative; }

/* Class cards ------------------------------------------------------------- */

.ox-program-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.ox-program-card {
  --ox-program-accent: var(--ox-royal);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  background: var(--ox-card);
  border: 1px solid var(--ox-navy-line);
  border-top: 3px solid var(--ox-program-accent);
  border-radius: var(--radius-card);
  padding: var(--space-md);
}
.ox-section--surface .ox-program-card { background: var(--ox-card); }

.ox-program-card__head { display: flex; gap: var(--space-sm); align-items: flex-start; }
.ox-program-card__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--ox-navy-subtle);
  background: color-mix(in srgb, var(--ox-program-accent) 12%, transparent);
  color: var(--ox-program-accent);
}
.ox-program-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--ox-fg-strong);
  margin: 0;
  line-height: 1.25;
}
.ox-program-card__alt {
  font-size: 12px;
  font-style: italic;
  color: var(--ox-body);
  margin: 2px 0 0;
}
.ox-program-card__text { font-size: 14px; line-height: 1.6; color: var(--ox-body); margin: 0; }

.ox-program-card__meta { display: grid; gap: 8px; margin: 0; }
.ox-program-card__meta > div { display: flex; gap: 10px; align-items: flex-start; }
.ox-program-card__meta dt { flex-shrink: 0; color: var(--ox-program-accent); line-height: 1; margin-top: 2px; }
.ox-program-card__meta dd { margin: 0; font-size: 14px; color: var(--ox-fg-strong); font-weight: 500; }
.ox-program-card__slot { display: block; }

.ox-program-card__fee {
  margin: auto 0 0;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--ox-navy-line);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--ox-fg-strong);
}

/* Timetable --------------------------------------------------------------- */

.ox-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-card);
  border: 1px solid var(--ox-nav-border);
  -webkit-overflow-scrolling: touch;
}

.ox-timetable {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.03);
}
.ox-timetable th,
.ox-timetable td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--ox-nav-border);
}
.ox-timetable thead th {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  background: var(--ox-royal);
  white-space: nowrap;
}
.ox-timetable tbody th {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: #fff;
}
.ox-timetable tbody td { color: rgba(255, 255, 255, 0.72); }
.ox-timetable tbody tr:last-child th,
.ox-timetable tbody tr:last-child td { border-bottom: 0; }
.ox-timetable tbody tr:hover { background: rgba(255, 255, 255, 0.04); }

.ox-timetable__alt { display: block; font-size: 12px; font-style: italic; font-weight: 400; color: rgba(255, 255, 255, 0.5); }
.ox-timetable__slot { display: block; white-space: nowrap; }
.ox-timetable__fee { color: #fff; font-weight: 600; white-space: nowrap; }
.ox-timetable__note { margin: var(--space-md) 0 0; font-size: 13px; color: rgba(255, 255, 255, 0.55); }

/* The timetable is seven columns wide and cannot usefully shrink, so on a phone
   it scrolls sideways inside .ox-table-wrap. Two things make that workable:
   the class name stays pinned to the left edge, so a parent swiping across to
   the fees still knows which row they are reading, and a line above the table
   says it can be swiped, because a scroller with no visible edge does not
   announce itself on touch. */
.ox-timetable__swipe { display: none; }

@media (min-width: 901px) and (max-width: 1000px) {
  .ox-timetable__swipe {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: var(--space-md) 0 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.62);
  }
  .ox-timetable__swipe::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.22), transparent);
  }

  .ox-timetable thead th:first-child,
  .ox-timetable tbody tr:not(.ox-timetable__group) > th:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    /* Opaque, or the columns sliding underneath show through. The gradient
       repeats the 3% wash the table carries over the navy section. */
    background-color: var(--ox-fg-strong);
    background-image: linear-gradient(rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.03));
    box-shadow: 1px 0 0 var(--ox-nav-border), 6px 0 10px -8px rgba(0, 0, 0, 0.75);
  }
  .ox-timetable thead th:first-child {
    z-index: 3;
    /* An explicit fill, not --ox-fg-link. A foreground token used as a
       background works only for as long as nothing re-points it: inside a navy
       band the link colour is now Soft Sky, and this head turned into a pale
       block still carrying white text at 1.38. Royal carries white at 72% at
       roughly 8.4. */
    background-color: var(--oxford-royal);
    background-image: none;
  }
  /* The pinned column is the widest thing in the row; cap it so the rest of
     the table still has room to scroll into. */
  .ox-timetable thead th:first-child,
  .ox-timetable tbody tr:not(.ox-timetable__group) > th:first-child {
    max-width: 42vw;
  }
}

/* Campus grouping ---------------------------------------------------------
   The same class runs at several campuses with different coaches and slots, so
   the table is banded by campus rather than listed flat. Each band is its own
   tbody, which is also what the campus filter shows and hides. */
.ox-timetable__group th {
  background: rgba(255, 255, 255, 0.07);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: #fff;
  padding-top: 18px;
  padding-bottom: 18px;
}
.ox-timetable__count {
  margin-left: var(--space-sm);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: none;
  color: rgba(255, 255, 255, 0.5);
}
.ox-timetable__enrol {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.55);
}

/* Trial-class action. Sized down so a column of them does not out-shout the
   timetable itself, but still a real target on touch. */
.ox-trial-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-btn);
  background: transparent;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.ox-trial-btn:hover { background: var(--oxford-royal); border-color: var(--ox-fg-brand); }
.ox-trial-btn svg { flex-shrink: 0; }

/* Filter chips reversed for the navy band. */
.ox-filter--light { margin-top: var(--space-md); }
.ox-filter--light .ox-filter__btn {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.78);
}
.ox-filter--light .ox-filter__btn:hover { border-color: var(--ox-fg-brand); color: #fff; }
.ox-filter--light .ox-filter__btn.is-active {
  background: var(--oxford-royal);
  border-color: var(--ox-fg-brand);
  color: #fff;
}

/* Light checklist for navy sections --------------------------------------- */

.ox-checklist--light li { color: rgba(255, 255, 255, 0.78); }
.ox-checklist--light svg { color: var(--ox-fg-brand); }

.ox-as-benefits { gap: var(--space-md); }

@media (max-width: 860px) {
  .ox-as-hero { grid-template-columns: 1fr; }
  .ox-as-benefits { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  .ox-program-grid { grid-template-columns: 1fr; }
  .ox-as-benefits { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Accreditations & partner logos (global, above the footer)
   -------------------------------------------------------------------------- */

.ox-certifications {
  background: var(--ox-card);
  border-top: 1px solid var(--ox-navy-line);
  padding-block: clamp(28px, 4vw, 44px);
}

.ox-certifications__title {
  font-family: var(--font-display);
  font-weight: var(--weight-label);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ox-body);
  text-align: center;
  margin: 0 0 var(--space-md);
}

.ox-certifications__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 3.5vw, 44px);
}

.ox-certifications__item { display: flex; align-items: center; }

.ox-certifications__item img {
  height: clamp(30px, 3.4vw, 44px);
  width: auto;
  max-width: 150px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.65;
  transition: filter 0.2s ease, opacity 0.2s ease;
}
.ox-certifications__item img:hover,
.ox-certifications__item a:focus-visible img {
  filter: grayscale(0);
  opacity: 1;
}

@media (max-width: 620px) {
  .ox-certifications__list { gap: var(--space-md); }
  .ox-certifications__item img { height: 28px; max-width: 110px; }
}

@media (prefers-reduced-motion: reduce) {
  .ox-certifications__item img { transition: none; }
}

/* --------------------------------------------------------------------------
   Editable block-editor content (Home page band, block patterns)
   -------------------------------------------------------------------------- */

.ox-home-content .ox-prose { max-width: none; }
.ox-home-content .ox-prose > * { max-width: 760px; margin-inline: auto; }
.ox-home-content .ox-prose > .alignwide,
.ox-home-content .ox-prose > .alignfull,
.ox-home-content .ox-prose > .wp-block-columns { max-width: none; }

/* Pillar grid — core columns wearing the theme's card styling. */
.ox-pillar-grid { gap: var(--space-md); margin-top: var(--space-lg); }
.ox-pillar-grid .wp-block-column.ox-icon-card { flex-basis: 0; flex-grow: 1; }
.ox-pillar-grid .ox-icon-card h3 { font-size: 20px; margin: 0; }
.ox-pillar-grid .ox-icon-card p { font-size: 15px; margin: 0; color: var(--ox-body); }

@media (max-width: 860px) {
  .ox-pillar-grid { flex-wrap: wrap; }
  .ox-pillar-grid .wp-block-column.ox-icon-card { flex-basis: calc(50% - var(--space-md)) !important; }
}
@media (max-width: 620px) {
  .ox-pillar-grid .wp-block-column.ox-icon-card { flex-basis: 100% !important; }
}

/* Full-width navy band pattern. */
.ox-home-band {
  background: var(--ox-navy);
  color: rgba(255, 255, 255, 0.72);
  padding-block: clamp(40px, 6vw, 72px);
  padding-inline: var(--gutter);
}
.ox-home-band h2,
.ox-home-band h3 { color: #fff; }

/* --------------------------------------------------------------------------
   Home — Oxfordian Experience, Pillars, What's New, Community Voices
   -------------------------------------------------------------------------- */

/* Experience cards — 1:1 imagery on Snow White. */
/* The Oxfordian Experience — three commitments read as one section.
   The cards are stretched to a common height and the picture is the dominant
   element in each: a 4:5 portrait that grows to fill whatever height the
   longest card sets, so the row stays level however uneven the copy is. */.ox-experience-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--ox-card);
  border: 1px solid var(--ox-navy-line);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.ox-experience-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 44px var(--ox-navy-subtle);
}.ox-experience-card h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-heading);
  font-size: 20px;
  color: var(--ox-fg-strong);
  letter-spacing: var(--track-md);
  margin: 0;
}
.ox-experience-card p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ox-body);
  margin: 0;
}

/* Our Story: the timeline stands where the photograph used to, so it has half
   the width it was designed for. Collapse the alternating layout to one side
   and scale it down rather than letting it overflow. */
.ox-story-timeline { display: flex; flex-direction: column; gap: var(--space-sm); }
.ox-story-timeline h3 { margin: 0; }
.ox-timeline--compact { margin-top: var(--space-sm); padding-left: 0; }
.ox-timeline--compact::before { left: 7px; }
.ox-timeline--compact .ox-timeline__item,
.ox-timeline--compact .ox-timeline__item--left,
.ox-timeline--compact .ox-timeline__item--right {
  width: 100%;
  margin: 0 0 var(--space-md);
  padding: 0 0 0 34px;
  text-align: left;
}
.ox-timeline--compact .ox-timeline__dot { left: 0; right: auto; transform: none; }
.ox-timeline--compact .ox-timeline__year { font-size: 12px; margin: 0; }

/* The timeline was drawn for the navy band it used to live in, so its type is
   white and its rule is a white tint. On the light Our Story section that made
   every year, heading and line of copy invisible — the dots were all that
   showed. Recolour for a light ground. */
.ox-timeline--compact::before { background: var(--ox-navy-line); }
.ox-timeline--compact .ox-timeline__dot { background: var(--oxford-royal); border-color: var(--ox-page); }

/* Our Story timeline -------------------------------------------------------
   Heavier line and dots than the original hairline, and the years carry more
   weight, because this is the spine of the section rather than a decoration. */
.ox-timeline--compact::before { width: 4px; margin-left: -2px; border-radius: 999px; }
.ox-timeline--compact .ox-timeline__dot {
  width: 18px;
  height: 18px;
  border-width: 4px;
  top: 4px;
}
.ox-timeline--compact .ox-timeline__year {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

/* On a wide screen the school's history reads better left to right: four dates
   in a row under one rule, rather than a tall column that pushes the rest of
   the section down the page. Below this it stays a vertical list, where a row
   of four would be unreadable. */
/* A grid item will not shrink below its content unless it is told it may, and
   the row of milestones is very wide. Without these the timeline forced the Our
   Story grid to "1850px 0px": the first column blew past the page and the
   second collapsed, taking the photograph with it. */
.ox-story-timeline,
.ox-timeline--compact { min-width: 0; }

@media (min-width: 901px) {
  /* The timeline reads across the full width of the section rather than inside
     one half of the split, which is what gives the seven dates room. */
  .ox-story-timeline { grid-column: 1 / -1; }

  .ox-timeline--compact {
    /* Everything hangs off one number: the rail's centre line. The dots are
       positioned inside their own item while the rail is painted on the
       container, so both have to be derived from it or they drift apart. */
    --ox-rail: 20px;

    display: grid;
    grid-auto-flow: column;
    /* Seven milestones will not all fit legibly at once, so each keeps a
       readable width and the row scrolls the last one or two into view. */
    grid-auto-columns: minmax(200px, 1fr);
    gap: var(--space-lg);
    padding-top: 0;
    padding-left: 0;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    /* Painted as a background rather than an absolute element so the rail runs
       the whole length of the row, including the part scrolled out of view. */
    background-image: linear-gradient(var(--ox-navy-line), var(--ox-navy-line));
    background-repeat: no-repeat;
    background-size: 100% 4px;
    background-position: 0 calc(var(--ox-rail) - 2px);
    background-attachment: local;
  }
  .ox-timeline--compact::before { display: none; }

  .ox-timeline--compact .ox-timeline__item,
  .ox-timeline--compact .ox-timeline__item--left,
  .ox-timeline--compact .ox-timeline__item--right {
    width: auto;
    margin: 0;
    /* Clears the rail, then leaves a gap before the year. */
    padding: calc(var(--ox-rail) + 26px) 0 0;
    text-align: left;
    scroll-snap-align: start;
  }
  .ox-timeline--compact .ox-timeline__dot {
    /* 18px dot centred on the rail. */
    top: calc(var(--ox-rail) - 9px);
    left: 0;
    right: auto;
  }
  .ox-timeline--compact .ox-timeline__year { margin-bottom: 2px; }
}
.ox-timeline--compact .ox-timeline__year { color: var(--ox-fg-brand); }
.ox-timeline--compact h4 { color: var(--ox-fg-strong); font-size: 16px; margin: 2px 0 4px; }
.ox-timeline--compact p { color: var(--ox-body); font-size: 13.5px; line-height: 1.55; margin: 0; }

/* The scholarship figure now leads a band of its own rather than sitting under
   a heading somewhere else, so it needs a headline of its own. */
.ox-becas__headline {
  margin: var(--space-xs) 0 0;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 700;
  letter-spacing: var(--track-lg);
  color: var(--ox-fg-strong);
}

/* Accreditations, styled after the grade-level journey steps: a numbered card
   per item, so six acronyms read as a sequence the school has worked through
   rather than a row of undifferentiated logos. */
.ox-cert-steps { display: flex; flex-direction: column; gap: var(--space-sm); }
.ox-cert-steps__grid { margin-top: var(--space-xs); }
.ox-cert-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-md) var(--space-sm) var(--space-sm);
  border: 1px solid var(--ox-navy-line);
  border-radius: var(--radius-card);
  background: var(--ox-card);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.ox-cert-step:hover {
  border-color: var(--ox-fg-brand);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px var(--ox-navy-subtle);
}
.ox-cert-step__num {
  position: absolute;
  top: -11px;
  left: var(--space-sm);
  min-width: 30px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--oxford-royal);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: center;
  color: #fff;
}
.ox-cert-step__name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: var(--track-md);
  color: var(--ox-fg-strong);
}
.ox-cert-step__note { font-size: 12.5px; line-height: 1.45; color: var(--ox-body); }

@media (max-width: 620px) {
  .ox-cert-steps__grid { grid-template-columns: minmax(0, 1fr); }
}

/* "What is offered here" — the condensed replacement for a grid of full class
   cards in each pillar. Names and their Spanish equivalents only; the timetable
   carries days, times, ages, coaches and fees, and is linked underneath. */
.ox-offer { margin-top: var(--space-lg); }.ox-offer__note {
  margin: var(--space-md) 0 0;
  font-size: 14px;
  color: var(--ox-body);
}
.ox-offer__note .ox-link-arrow { margin-left: 6px; }/* The Collaborators Week band: the same treatment as the page's opening video,
   but shorter and centred, because it carries a single invitation rather than a
   page title. The video autoplays muted on a loop with no controls, so what the
   visitor sees is movement — there is no poster frame held in front of it. */
.ox-video-hero--band { min-height: 460px; align-items: center; }
.ox-video-hero--band .ox-video-hero__content { padding-block: var(--space-xl); }
.ox-video-hero--band .ox-container { max-width: 780px; text-align: center; }
.ox-video-hero--band h2 {
  color: #fff;
  font-size: clamp(28px, 3.4vw, 42px);
  letter-spacing: var(--track-lg);
  margin: var(--space-xs) 0 var(--space-sm);
}
.ox-video-hero--band p { color: rgba(255, 255, 255, 0.78); margin-inline: auto; }
.ox-video-hero--band .ox-hero__actions { justify-content: center; margin-top: var(--space-md); }

@media (max-width: 620px) {
  .ox-video-hero--band { min-height: 380px; }
}

/* The six departments. Numbered like the grade-level journey so the set reads
   as one structure rather than six unrelated boxes, with the Spanish name
   leading because that is what the school calls them. */
.ox-dept-grid { margin-top: var(--space-lg); }
.ox-dept {
  position: relative;
  padding: var(--space-lg) var(--space-md) var(--space-md);
  border: 1px solid var(--ox-navy-line);
  border-top: 3px solid var(--oxford-royal);
  border-radius: var(--radius-card);
  background: var(--ox-card);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ox-dept:hover { transform: translateY(-3px); box-shadow: 0 16px 38px var(--ox-navy-subtle); }
.ox-grid--6 .ox-dept { padding: var(--space-md) var(--space-sm) var(--space-sm); }
.ox-grid--6 .ox-dept h3 { font-size: 15px; }
.ox-grid--6 .ox-dept p { font-size: 13px; }
.ox-grid--6 .ox-dept__num { font-size: 22px; right: var(--space-sm); }
.ox-grid--6 .ox-cert-step { padding: var(--space-md) var(--space-sm) var(--space-sm); }
.ox-grid--6 .ox-cert-step__name { font-size: 14px; }
.ox-grid--6 .ox-cert-step__note { font-size: 11.5px; }

.ox-dept__num {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-md);
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  color: var(--ox-fg-strong);
  opacity: 0.12;
}
.ox-dept h3 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: var(--track-md);
  color: var(--ox-fg-strong);
}
.ox-dept p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ox-body); }

.ox-dept-support {
  margin-top: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-card);
  background: var(--ox-navy);
  text-align: center;
}
.ox-dept-support h3 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: var(--track-md);
  color: #fff;
}
.ox-dept-support p { margin: 0 0 var(--space-sm); font-size: 14px; color: rgba(255, 255, 255, 0.7); }
.ox-dept-support__row { justify-content: center; flex-wrap: wrap; gap: var(--space-xs); }
.ox-dept-support__row .ox-chip {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.20);
  color: #fff;
}

/* Registration: enrolling for the year and trying a single class are two routes
   to the same conversation, so they sit inside one panel divided by a rule
   rather than in two separately framed boxes stacked down the page. */
.ox-register-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: var(--space-lg);
  border: 1px solid var(--ox-navy-line);
  border-radius: var(--radius-card);
  /* White on purpose here: the registration panel is the one place on the page
     asking for a decision, and lifting it clear of the warm ground is what
     makes it read as a form rather than another band of copy. */
  background: #fff;
  overflow: hidden;
}
.ox-register-pair__half {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg);
  /* Core's flow layout puts a top margin on every child after the first, which
     in a two-column grid drops the right half ten pixels below the left. */
  margin-block: 0;
}
/* The divider is the join: a single rule, not a gap. */
.ox-register-pair__half + .ox-register-pair__half {
  border-left: 1px solid var(--ox-navy-line);
}
.ox-register-pair__half--trial { background: var(--ox-nude-200); }
.ox-register-pair__tag {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--ox-fg-brand);
}
.ox-register-pair__half h3 {
  margin: 0;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: var(--track-md);
  color: var(--ox-fg-strong);
}
.ox-register-pair__half p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--ox-body); }
.ox-register-pair__half .ox-hero__actions { margin-top: auto; padding-top: var(--space-sm); }

@media (max-width: 860px) {
  .ox-register-pair { grid-template-columns: minmax(0, 1fr); }
  .ox-register-pair__half + .ox-register-pair__half {
    border-left: 0;
    border-top: 1px solid var(--ox-navy-line);
  }
}

/* Campus cards sit on one line at desktop width — four on After School, five on
   Admissions — and step down rather than crushing as the screen narrows. The
   contact card holds an email address, so there is a floor below which the line
   has to break. */
@media (max-width: 1400px) {
  .ox-section .ox-grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ox-section .ox-grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .ox-section .ox-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ox-section .ox-grid--5,
  .ox-section .ox-grid--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .ox-section .ox-grid--4,
  .ox-section .ox-grid--5,
  .ox-section .ox-grid--6 { grid-template-columns: minmax(0, 1fr); }
}

/* The Perez quote and the collaborator testimony sit side by side: the written
   line and the person saying something like it, on the same navy band. */
.ox-voices-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.ox-video-card--testimony { margin: 0; max-width: none; }
.ox-video-card--testimony video {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-card);
  background: #000;
  display: block;
}
@media (max-width: 900px) {
  .ox-voices-split { grid-template-columns: minmax(0, 1fr); }
}

/* A heading wearing the badge's clothes: the same crimson-on-tint pill the
   small eyebrow badges use, scaled up to carry a section title on its own so
   the badge above it is not repeating the same words. */
.ox-badge-heading {
  display: inline-block;
  margin: 0;
  padding: 10px 22px;
  border-radius: 999px;
  background: var(--ox-royal-subtle);
  color: var(--ox-fg-brand);
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 700;
  letter-spacing: var(--track-lg);
  line-height: 1.15;
}

/* Campus improvements carry the most substance in this section, so they get the
   room: two across rather than four, with type to match. The programme list
   above them is now a single line each, so it can afford to be small. */
.ox-upgrade-card { padding: var(--space-lg); }
.ox-upgrade-card h4 {
  font-size: 21px;
  letter-spacing: var(--track-md);
  margin: 0 0 8px;
}
.ox-upgrade-card p { font-size: 15.5px; line-height: 1.7; }
#whats-new .ox-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 860px) {
  #whats-new .ox-grid--4 { grid-template-columns: minmax(0, 1fr); }
}
/* One line per item now that the names are gone. */
.ox-role-card strong { font-size: 15px; line-height: 1.45; }/* Sub-section headings inside a section. */
.ox-subsection-title {
  font-family: var(--font-display);
  font-weight: var(--weight-subheading);
  font-size: 13px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ox-fg-link);
  text-align: center;
  margin: var(--space-lg) 0 0;
}

/* New leadership role cards. */
.ox-role-card {
  background: var(--ox-card);
  border: 1px solid var(--ox-navy-line);
  border-radius: var(--radius-card);
  padding: var(--space-md);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.ox-role-card__icon {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--ox-royal-subtle);
  color: var(--ox-fg-brand);
  margin-bottom: var(--space-xs);
}
.ox-role-card strong {
  font-family: var(--font-display);
  font-weight: var(--weight-heading);
  font-size: 16px;
  color: var(--ox-fg-strong);
}
.ox-role-card span { font-size: 13px; color: var(--ox-body); line-height: 1.5; }

/* Campus upgrade cards. */
.ox-upgrade-card {
  background: var(--ox-card);
  border: 1px solid var(--ox-navy-line);
  border-top: 3px solid var(--ox-royal);
  border-radius: var(--radius-card);
  padding: var(--space-md);
}
.ox-upgrade-card h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-subheading);
  font-size: 16px;
  color: var(--ox-fg-strong);
  margin: 0 0 6px;
}
.ox-upgrade-card p { font-size: 14px; line-height: 1.6; color: var(--ox-body); margin: 0; }

.ox-upgrade-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  max-width: 720px;
  margin: var(--space-md) auto 0;
  font-size: 14px;
  color: var(--ox-body);
}
.ox-upgrade-note svg { flex-shrink: 0; margin-top: 3px; color: var(--ox-fg-brand); }

/* Community voices pull quote. */
.ox-voices__quote {
  margin: 0;
  max-width: 820px;
  margin-inline: auto;
  text-align: center;
}
.ox-voices__mark { color: var(--ox-fg-brand); display: inline-block; margin-bottom: var(--space-sm); }
.ox-voices blockquote { margin: 0; border: 0; padding: 0; }
.ox-voices blockquote p {
  font-family: var(--font-display);
  font-weight: var(--weight-subheading);
  font-size: clamp(20px, 2.6vw, 30px);
  line-height: 1.45;
  color: #fff;
  margin: 0 0 var(--space-md);
}
.ox-voices figcaption { font-size: 14px; color: rgba(255, 255, 255, 0.6); }
.ox-voices figcaption strong {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--weight-subheading);
  font-size: 15px;
  color: #fff;
}
.ox-voices figcaption span { display: block; margin-top: 2px; }

/* With a portrait, the quote sits beside it. */
.ox-voices__quote--with-photo {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  text-align: left;
  max-width: 940px;
}
.ox-voices__portrait {
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}
.ox-voices__portrait img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
}

@media (max-width: 620px) {
  .ox-voices__quote--with-photo { grid-template-columns: 1fr; text-align: center; }
  .ox-voices__portrait { max-width: 200px; margin-inline: auto; }
}


/* Pill button — high-contrast crimson CTA. */
.ox-btn--pill { border-radius: 999px; padding: 15px 30px; font-size: 16px; }

/* Becas statistic. */
.ox-becas__inner { text-align: center; max-width: 720px; margin-inline: auto; }
.ox-becas__value {
  font-family: var(--font-display);
  font-weight: var(--weight-heading);
  font-size: clamp(44px, 7vw, 76px);
  line-height: 1;
  color: var(--ox-fg-strong);
  margin: 0;
  letter-spacing: -0.02em;
}
.ox-becas__unit {
  font-family: var(--font-display);
  font-weight: var(--weight-subheading);
  font-size: 18px;
  color: var(--ox-fg-brand);
  margin: 6px 0 var(--space-sm);
}
.ox-becas__text { font-size: 16px; color: var(--ox-body); margin: 0 auto var(--space-md); max-width: 560px; }

/* Numbered pillar rows (Our School). */
.ox-pillar-list { display: grid; gap: var(--space-md); }
.ox-pillar-row {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
  background: var(--ox-card);
  border: 1px solid var(--ox-navy-line);
  border-radius: var(--radius-card);
  padding: var(--space-lg);
}
/* The home pillars carry a strapline between the heading and the body that the
   Our School ones do not, so the row style gains one rule rather than a fork. */
.ox-pillar-row .ox-pillar-row__subtitle {
  margin: 2px 0 8px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: var(--track-md);
  color: var(--ox-fg-brand);
}

.ox-pillar-row__num {
  flex-shrink: 0;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--ox-royal);
  color: #fff;
  font-family: var(--font-display);
  font-weight: var(--weight-heading);
  font-size: 18px;
}
.ox-pillar-row h3 { font-size: 21px; color: var(--ox-fg-strong); margin: 0; line-height: 1.3; }
.ox-pillar-row p { font-size: 15px; line-height: 1.7; color: var(--ox-body); margin: 0; }

@media (max-width: 620px) {
  .ox-pillar-row { flex-direction: column; gap: var(--space-sm); padding: var(--space-md); }
}

/* Impact feature box (Community Connection). */
.ox-impact { max-width: 860px; margin-inline: auto; text-align: center; }
.ox-impact h2 { color: #fff; margin: var(--space-sm) 0 var(--space-md); }
.ox-impact p { color: rgba(255, 255, 255, 0.72); font-size: 16px; line-height: 1.75; }

.ox-impact__figures {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: var(--space-md);
  margin-block: var(--space-lg);
}
.ox-impact__figure {
  flex: 1 1 220px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--ox-nav-border);
  border-radius: var(--radius-card);
  padding: var(--space-md);
}.ox-impact__value {
  font-family: var(--font-display);
  font-weight: var(--weight-heading);
  font-size: clamp(30px, 4.4vw, 46px);
  line-height: 1;
  color: #fff;
  margin: 0;
  letter-spacing: -0.02em;
}
.ox-impact__value span { font-size: 0.45em; margin-left: 4px; color: rgba(255, 255, 255, 0.6); }
.ox-impact__label { font-size: 13px; color: rgba(255, 255, 255, 0.6); margin: var(--space-xs) 0 0; line-height: 1.5; }

/* Collaborator voice cards (Meet the Team). */
.ox-voice-card {
  margin: 0;
  background: var(--ox-card);
  border: 1px solid var(--ox-navy-line);
  border-radius: var(--radius-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}.ox-voice-card blockquote { margin: 0; padding: var(--space-lg) var(--space-lg) var(--space-xs); border: 0; flex: 1; }
.ox-voice-card__mark { color: var(--ox-fg-brand); display: block; margin-bottom: var(--space-xs); }
.ox-voice-card blockquote p {
  font-family: var(--font-display);
  font-weight: var(--weight-subheading);
  font-size: 18px;
  line-height: 1.55;
  color: var(--ox-fg-strong);
  margin: 0;
}
.ox-voice-card figcaption {
  padding: 0 var(--space-lg) var(--space-lg);
  font-size: 14px;
  color: var(--ox-body);
}

/* --------------------------------------------------------------------------
   Curriculum grid (grade level pages)
   -------------------------------------------------------------------------- */

.ox-curriculum-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.ox-curriculum-card {
  background: var(--ox-surface);
  border: 1px solid var(--ox-navy-line);
  border-top: 3px solid var(--ox-royal);
  border-radius: var(--radius-card);
  padding: var(--space-md);
}
.ox-curriculum-card__group {
  font-family: var(--font-display);
  font-weight: var(--weight-heading);
  font-size: 15px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--ox-fg-link);
  margin: 0 0 var(--space-sm);
}
.ox-curriculum-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.ox-curriculum-card__list li {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ox-fg-strong);
  padding-left: 14px;
  position: relative;
}
.ox-curriculum-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--oxford-royal);
}
.ox-curriculum-card__label {
  font-family: var(--font-display);
  font-weight: var(--weight-subheading);
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ox-body);
  margin: var(--space-md) 0 var(--space-xs);
}
.ox-curriculum-card__list--extra li { color: var(--ox-body); }
.ox-curriculum-card__list--extra li::before { background: var(--ox-royal); }

.ox-curriculum-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: var(--space-md) 0 0;
  font-size: 14px;
  color: var(--ox-body);
}
.ox-curriculum-note svg { flex-shrink: 0; margin-top: 3px; color: var(--ox-fg-link); }

/* Campus academic plan buttons. */
.ox-plans { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-sm); }

/* --------------------------------------------------------------------------
   TEDx The Oxfordian School feature
   -------------------------------------------------------------------------- */

.ox-tedx__wordmark {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 var(--space-xs);
}
.ox-tedx__ted {
  font-family: var(--font-display);
  font-weight: var(--weight-heading);
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1;
  letter-spacing: -0.03em;
  /* The TEDx wordmark is a third party brand mark, not our accent: it stays its
     own red. Royal on the navy band measures 1.34; crimson measures 3.90, which
     clears the floor for text this size. */
  color: var(--oxford-crimson);
  text-transform: uppercase;
}
/* The superscript measures 3.90 on the navy band, below the 4.5 small text
   would need. It is left alone deliberately: WCAG 1.4.3 exempts text that is
   part of a logo or brand name, and the specification's seventh rule forbids
   recolouring a logo to suit a local treatment. Recorded here so a later
   contrast pass does not "fix" the TEDx mark into something TED does not
   license. */
.ox-tedx__ted sup { font-size: 0.5em; top: -0.55em; position: relative; margin-left: 1px; }
.ox-tedx__host {
  font-family: var(--font-display);
  font-weight: var(--weight-body);
  font-size: clamp(14px, 1.7vw, 18px);
  color: rgba(255, 255, 255, 0.82);
  letter-spacing: 0.2px;
}
.ox-tedx .ox-hero__media img { aspect-ratio: 3 / 2; }

/* Leader bios on the leadership cards. */
.ox-leader-card { text-align: left; }
.ox-leader-card img { margin-inline: 0; }
.ox-leader-card__bio {
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--ox-navy-line);
}
.ox-leader-card__bio p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--ox-body);
  margin: 0 0 var(--space-xs);
}
.ox-leader-card__bio p:last-child { margin-bottom: 0; }

/* Monogram shown when a leader has no photograph on file. */
.ox-leader-card__monogram {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--ox-royal-subtle);
  color: var(--ox-fg-link);
  font-family: var(--font-display);
  font-weight: var(--weight-heading);
  font-size: 34px;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   Home — "Our impact, by the numbers"
   Ten figures on a light band, 5 x 2, per the Figma home page.
   -------------------------------------------------------------------------- */

.ox-numbers { background: var(--ox-card); }

.ox-numbers-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.ox-numbers-stat {
  background: var(--ox-surface);
  border: 1px solid var(--ox-navy-line);
  border-radius: var(--radius-card);
  padding: var(--space-lg) var(--space-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-sm);
}

.ox-numbers-stat__icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ox-navy-subtle);
  color: var(--ox-fg-strong);
}

.ox-numbers-stat__value {
  font-family: var(--font-display);
  font-weight: var(--weight-heading);
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1;
  color: var(--ox-fg-strong);
  margin: 0;
  /* Keeps "+1,000" and "1–18" from wrapping mid-figure on narrow columns. */
  white-space: nowrap;
}

.ox-numbers-stat__label {
  font-size: 14px;
  line-height: 1.35;
  color: var(--ox-body);
  margin: 0;
}

@media (max-width: 1024px) {
  .ox-numbers-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .ox-numbers-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
  .ox-numbers-stat { padding: var(--space-md) var(--space-sm); }
  .ox-numbers-stat__icon { width: 44px; height: 44px; }
}

/* --------------------------------------------------------------------------
   Home — campus overview list
   The first campus reads as a raised white card; the rest stay flat so the
   list has one clear entry point.
   -------------------------------------------------------------------------- */

.ox-campus-list { display: flex; flex-direction: column; gap: 4px; }

.ox-campus-list .ox-campus-row {
  background: transparent;
  border-color: transparent;
  padding-inline: var(--space-sm);
}
.ox-campus-list .ox-campus-row .ox-campus-row__icon {
  background: var(--ox-navy-subtle);
  color: var(--ox-fg-strong);
}

.ox-campus-list .ox-campus-row--featured,
.ox-campus-list .ox-campus-row:hover,
.ox-campus-list .ox-campus-row:focus-visible {
  background: var(--ox-card);
  border-color: var(--ox-navy-line);
  padding-inline: var(--space-md);
  box-shadow: 0 4px 16px rgba(13, 16, 69, 0.06);
  transform: none;
}
.ox-campus-list .ox-campus-row--featured .ox-campus-row__icon,
.ox-campus-list .ox-campus-row:hover .ox-campus-row__icon,
.ox-campus-list .ox-campus-row:focus-visible .ox-campus-row__icon {
  background: var(--oxford-royal);
  color: #fff;
}

/* Map plate label, top-left rather than bottom-left. */
.ox-hero__media-badge--tl {
  top: 0;
  bottom: auto;
  left: 0;
  border-radius: 0 0 var(--radius-btn) 0;
  background: var(--ox-navy);
}

/* --------------------------------------------------------------------------
   Home — "None of this would be possible without you."
   -------------------------------------------------------------------------- */

.ox-cta--connect .ox-badge { margin-bottom: var(--space-md); }
.ox-cta--connect h2 { max-width: 860px; margin-inline: auto; }
.ox-cta--connect p { max-width: 720px; }

/* --------------------------------------------------------------------------
   Service and sustainability — Love Foundation / Live Green
   -------------------------------------------------------------------------- */

.ox-service-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.ox-service-card {
  background: var(--ox-card);
  border: 1px solid var(--ox-navy-line);
  border-radius: var(--radius-card);
  padding: clamp(24px, 3vw, var(--space-lg));
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  height: 100%;
}
.ox-service-card h3 { margin: 0; font-size: clamp(20px, 1.8vw, 24px); }
.ox-service-card p { margin: 0; font-size: 15px; color: var(--ox-body); flex: 1; }

.ox-service-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
  font-weight: var(--weight-subheading);
  font-size: 15px;
  color: var(--ox-fg-strong);
}
.ox-service-card__link svg { flex-shrink: 0; }
.ox-service-card__link:hover { color: var(--ox-fg-brand); text-decoration: none; }

@media (max-width: 780px) {
  .ox-service-grid { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   Inline contact links — Community Library Facebook / email, and anywhere
   else a programme carries its own official channels.
   -------------------------------------------------------------------------- */

.ox-inline-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
  margin-top: var(--space-xs);
}

.ox-inline-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-weight: var(--weight-subheading);
  font-size: 15px;
  color: var(--ox-fg-strong);
  overflow-wrap: anywhere;
}
.ox-inline-link svg { flex-shrink: 0; }
.ox-inline-link:hover { color: var(--ox-fg-brand); text-decoration: none; }

/* On the navy achievement card. */
.ox-inline-links--light .ox-inline-link { color: #fff; }
.ox-inline-links--light .ox-inline-link:hover { color: var(--ox-fg-brand); }

/* Purpose note beside a phone / email contact line.
   The base .ox-contact-line is a non-wrapping flex row, so the note needs
   wrapping switched on to sit under the number rather than beside it. */
.ox-contact-line { flex-wrap: wrap; }
.ox-contact-line__note {
  display: block;
  width: 100%;
  padding-left: 30px;
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ox-body);
}
.ox-section--navy .ox-contact-line__note,
.ox-hero .ox-contact-line__note { color: rgba(255, 255, 255, 0.6); }

/* --------------------------------------------------------------------------
   Campus class timetable
   -------------------------------------------------------------------------- */

.ox-schedule {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xs) var(--space-lg);
}
.ox-schedule__row {
  /* Grid, not flex with space-between: the value has to be allowed to wrap
     inside its own track. A flex item that cannot wrap simply grows, and this
     row is half of a two column grid, so it grew straight over the column
     beside it. */
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  align-items: baseline;
  gap: 2px var(--space-sm);
  padding: 12px 0;
  border-bottom: 1px solid var(--ox-navy-line);
}
.ox-schedule__level { font-weight: var(--weight-subheading); color: var(--ox-fg-strong); font-size: 15px; }

/* Was white-space: nowrap. That was right when this column held "7:00 - 14:00"
   and wrong the moment it held "$1,200 per month, $60 per hour, $800 at Vista
   Hermosa": measured on the live page the value ran 261px past a 239px row on
   a phone, straight across whatever sat beside it. The value wraps now, and
   the row gives it a track it can wrap inside. */
.ox-schedule__time {
  color: var(--ox-body);
  font-size: 15px;
  min-width: 0;
  text-align: right;
  overflow-wrap: break-word;
}

@media (max-width: 780px) {
  .ox-schedule { grid-template-columns: minmax(0, 1fr); }
}

/* Under the width where a label and a value sit comfortably side by side, the
   value goes under its label rather than squeezing into a sliver. */
@media (max-width: 620px) {
  .ox-schedule__row { grid-template-columns: minmax(0, 1fr); }
  .ox-schedule__time { text-align: left; }
}

/* Bands -------------------------------------------------------------------
   Six identical cards said "six comparable things". A rate sheet is not that:
   four service rates and two food add-ons, priced on different units. So the
   rows group under a labelled rule instead, the same band the leadership page
   uses, with one label doing the work the repeated card chrome was doing. */
.ox-schedule-band {
  border: 1px solid var(--ox-navy-line);
  border-radius: var(--radius-card);
  padding: var(--space-sm) var(--space-md) 4px;
  background: var(--ox-surface);
  margin-bottom: var(--space-sm);
}
.ox-schedule-band__label {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin: 4px 0 2px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ox-fg-brand);
}
.ox-schedule-band__label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--ox-navy-line);
}
.ox-schedule-band .ox-schedule { display: block; }
.ox-schedule-band .ox-schedule__row:last-child { border-bottom: 0; }

/* --------------------------------------------------------------------------
   Leadership — wide horizontal cards, full portrait beside the text
   -------------------------------------------------------------------------- */

.ox-leader-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md);
}

.ox-leader-card--wide {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: center;
  text-align: left;
  padding: var(--space-md);
}

.ox-leader-card--wide .ox-leader-card__photo {
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--ox-surface);
}

/* The whole portrait, not a crop of it. */
.ox-leader-card--wide .ox-leader-card__photo img {
  width: 100%;
  height: auto;
  max-height: 320px;
  object-fit: contain;
  object-position: center top;
  border-radius: 0;
  margin: 0;
  display: block;
}

.ox-leader-card--wide .ox-leader-card__monogram {
  width: 100%;
  height: 220px;
  border-radius: 0;
}

.ox-leader-card--wide .ox-leader-card__body { min-width: 0; }
.ox-leader-card--wide .ox-leader-card__body strong { font-size: 20px; display: block; }

@media (min-width: 1100px) {
  .ox-leader-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .ox-leader-card--wide { grid-template-columns: minmax(0, 1fr); }
  .ox-leader-card--wide .ox-leader-card__photo img { max-height: 380px; }
}


/* The class a trial is being requested for, named at the top of the modal. */
.ox-modal__class {
  margin: var(--space-xs) 0 0;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--ox-fg-brand);
}

/* Activity photo galleries -------------------------------------------------
   Used on the After School page (a short strip under each pillar) and in full
   on the pillar's own page. The column count comes from the block so one rule
   serves both. */
.ox-gallery {
  display: grid;
  grid-template-columns: repeat(var(--ox-gallery-cols, 3), minmax(0, 1fr));
  gap: var(--space-sm);
  margin-block: var(--space-md);
}
.ox-gallery__item {
  margin: 0;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--ox-surface);
  aspect-ratio: 4 / 3;
}
.ox-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ox-gallery__more {
  margin-block: 0 var(--space-md);
}
@media (max-width: 900px) {
  .ox-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .ox-gallery { grid-template-columns: 1fr; }
}

/* Oxford Language School — the level ladder --------------------------------
   Six regular levels then the two conversational ones. Not the numbered-steps
   block: that supplies its own counter on top of the level number and read as
   "1 01 Beginner I". These carry one number each. */
.ox-ols-levels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-sm);
  margin-block: var(--space-md);
}
/* Core's flow layout puts a top margin on every child after the first, which
   inside a grid drops row one out of line with the rest. Same reset
   .ox-split uses. */
.ox-ols-levels > * { margin-block: 0; }
.ox-ols-level {
  background: var(--ox-card);
  border: 1px solid var(--ox-navy-line);
  border-top: 4px solid var(--ox-royal);
  border-radius: var(--radius-card);
  padding: var(--space-md) var(--space-sm);
  text-align: center;
}
.ox-ols-level__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(30px, 3.2vw, 44px);
  font-weight: 700;
  line-height: 1;
  color: var(--ox-fg-link);
}
.ox-ols-level__name {
  display: block;
  margin-top: 8px;
  font-weight: 600;
  color: var(--ox-fg-strong);
}
.ox-ols-level--more {
  background: var(--ox-navy);
  border-color: var(--ox-fg-strong);
  border-top-color: var(--ox-fg-brand);
}
.ox-ols-level--more .ox-ols-level__num,
.ox-ols-level--more .ox-ols-level__name {
  color: #fff;
}

/* Contact page ------------------------------------------------------------- */
/* A hero with no media beside it does not need the full band height. */.ox-contact-cards > * { margin-block: 0; }
.ox-contact-card { display: flex; flex-direction: column; gap: var(--space-xs); }
.ox-contact-card > * { margin-block: 0; }
.ox-contact-card__address { color: var(--ox-body); font-size: 13px; line-height: 1.45; }
/* The address opens a map, so it should read as a link without shouting. */
.ox-contact-card__address a { color: var(--ox-body); text-decoration: underline; text-decoration-color: var(--ox-navy-line); text-underline-offset: 3px; }
.ox-contact-card__address a:hover { color: var(--ox-fg-brand); text-decoration-color: currentColor; }
.ox-contact-card__phone { font-family: var(--font-display); font-size: 18px; font-weight: 700; }
.ox-contact-card__phone a { color: var(--ox-fg-brand); }

/* Five campuses on one line, and the four After School contacts on another, so
   a parent scans the row rather than reading down it. The cards are tightened
   to pay for the narrower columns. The generic .ox-grid--5 rule drops to three
   at 1400px, which would break the row on an ordinary laptop, so this grid
   keeps its own breakpoints. */
.ox-contact-cards { gap: var(--space-sm); }
.ox-contact-card { padding: var(--space-md) var(--space-sm); }
.ox-contact-card h3 { font-size: 16px; }
.ox-contact-card .ox-card__kicker { font-size: 11px; }
.ox-contact-card .ox-link-arrow { font-size: 13px; }
.ox-section .ox-grid--5.ox-contact-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); }
#after-school .ox-grid--4 { gap: var(--space-sm); }
@media (max-width: 1100px) {
  .ox-section .ox-grid--5.ox-contact-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .ox-section .ox-grid--5.ox-contact-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .ox-section .ox-grid--5.ox-contact-cards { grid-template-columns: minmax(0, 1fr); }
}
.ox-contact-card .ox-link-arrow { margin-top: auto; }/* Mobile overflow ----------------------------------------------------------
   The block editor lets a row be set to "no wrap", and several button rows are
   saved that way. On a phone that row stays wider than the screen: the home
   hero's pair measured 391px, the After School hero's 475px and the admissions
   trio 665px, all inside a 375px viewport. Nothing scrolled sideways, because
   .ox-hero clips its overflow — the second and third buttons were simply cut
   off. Allowing those rows to wrap below the tablet breakpoint fixes all of
   them at once, and costs nothing where the row already fits, since flex-wrap
   only permits wrapping rather than forcing it. */
@media (max-width: 900px) {
  .wp-block-group.is-layout-flex.is-nowrap { flex-wrap: wrap; }
}

/* The After School hero is a grid whose single mobile track is sized `1fr`,
   which still cannot go below its content's min-content width. The button row
   above set that floor to 475px and stretched the whole hero — heading and all
   — past the screen edge. min-width:0 lets the track shrink as intended. */
.ox-as-hero__text { min-width: 0; }

/* The home hero's title is a paragraph with a fixed font-size set in the
   editor, so it does not scale down: at 49px it filled 40% of a phone screen.
   Only the size is overridden, and only on small screens — the wording and the
   block itself are left exactly as they were edited. */
@media (max-width: 600px) {
  .ox-hero p[style*="font-size"] {
    font-size: clamp(28px, 7.5vw, 38px) !important;
    line-height: 1.12;
  }
}

/* Header utility band -------------------------------------------------------
   The page's own cream runs to the top of the screen, carrying the full-colour
   crest and the practical links, and the navy bar below is only navigation.
   That is the arrangement ASFM and TASIS England use, and it lets the crest be
   read in colour rather than reversed out of a dark strip. */
.ox-topbar {
  background: var(--ox-page);
  padding-block: var(--space-md);
}
.ox-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  flex-wrap: wrap;
}
.ox-topbar__inner > * { margin-block: 0; }
.ox-logo--color img { height: clamp(48px, 5.4vw, 74px); width: auto; display: block; }

.ox-topbar__utils {
  display: flex;
  align-items: flex-start;
  gap: clamp(var(--space-md), 3vw, var(--space-xl));
}
.ox-util {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: center;
  color: var(--ox-fg-brand);
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: color 0.15s ease;
}
.ox-util:hover { color: var(--ox-fg-strong); text-decoration: none; }
.ox-util__icon { display: grid; place-items: center; height: 28px; }
.ox-util__label { display: block; white-space: nowrap; }

/* The navy bar carries only navigation now, so the menu centres in it and the
   mobile toggle keeps to the right. */
.ox-header__inner { gap: var(--space-md); }
.ox-header .ox-nav { flex: 1; justify-content: center; }
.ox-header__actions { margin-left: auto; }

@media (max-width: 960px) {
  /* The three utility links stay in the header on a phone rather than moving
     into the menu. They keep their labels, which are what say who each icon is
     for, but small and pushed to the right so they read as a quiet strip beside
     the crest rather than competing with it. */
  .ox-topbar { padding-block: var(--space-sm); }
  .ox-topbar__inner {
    /* One row: crest left, links right. The base rule wraps, which would drop
       them onto a line of their own. */
    flex-wrap: nowrap;
    gap: var(--space-sm);
  }
  /* Small enough that the crest and all three links share the row. */
  .ox-logo--color img { height: 36px; }
  .ox-topbar__utils {
    align-items: flex-start;
    gap: var(--space-sm);
    margin-left: auto;
  }
  .ox-util {
    gap: 3px;
    font-size: 9.5px;
    letter-spacing: 0;
    max-width: 8.5ch;
  }
  .ox-util__icon { height: 18px; }
  .ox-util__icon svg { width: 18px; height: 18px; }
  .ox-util__label { white-space: normal; }
}

/* Dropdowns read as glass, so the page stays visible behind them ------------
   The panel keeps a solid fill by default: over a photograph, translucent text
   with no blur behind it is unreadable. Where the browser can blur what is
   underneath, it becomes semi-transparent instead, which is the effect asked
   for, and the blur keeps the navy labels legible whatever they land on. */
@supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .ox-dropdown {
    background: rgba(255, 253, 249, 0.78);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    backdrop-filter: blur(18px) saturate(1.4);
  }
  .ox-dropdown__link:hover {
    background: rgba(13, 16, 69, 0.06);
  }
}

/* Page header, photograph behind the title -----------------------------------
   The block below the navigation on an interior page. A photograph runs the
   full width and the title sits on it, over a scrim that darkens towards the
   bottom so the type stays legible whatever the picture does up there. */
.ox-page-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  /* The ceiling is a variable so the block's Height control can raise or lower
     it per page. The clamp is kept, so a taller header still shrinks on a
     phone instead of becoming a fixed slab. */
  min-height: clamp(340px, 46vw, var(--ox-hero-max, 600px));
  overflow: hidden;
  background: var(--ox-navy);
}
/* When the header carries several photographs they are stacked, so each one
   needs to fill the band rather than only the first. */
.ox-page-hero__img + .ox-page-hero__img { z-index: 0; }
@media (prefers-reduced-motion: reduce) {
  .ox-page-hero__img { animation: none !important; }
  .ox-page-hero__img + .ox-page-hero__img { opacity: 0 !important; }
}
.ox-page-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ox-page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(13, 16, 69, 0.88) 0%, rgba(13, 16, 69, 0.55) 42%, rgba(13, 16, 69, 0.18) 100%);
}
.ox-page-hero__body {
  position: relative;
  z-index: 1;
  width: 100%;
  /* The band is tall, so the title sits further off the bottom edge to keep it
     clear of the fold and give the photograph room to read. */
  padding-block: var(--space-lg) clamp(var(--space-lg), 4vw, var(--space-xl));
}
.ox-page-hero__body > * { margin-block: 0; }
/* The photograph is the point of this band, so the words sit centred and light
   over it rather than shouting from the corner. Montserrat is self-hosted at
   every weight, so 300 is a real cut, not a synthesised one. */
.ox-page-hero__body .ox-container { text-align: center; }
.ox-page-hero__actions { justify-content: center; }
.ox-page-hero .ox-eyebrow {
  /* The palette's muted-on-dark value. This had followed Soft Sky into the
     navy hairline and disappeared against the hero. */
  color: var(--oxford-on-dark-muted);
  margin-bottom: var(--space-xs);
}
.ox-page-hero h1 {
  color: #fff;
  margin: 0 auto;
  max-width: 20ch;
  font-weight: 300;
  /* The display tracking is tuned for bold; at 300 it needs to open up. */
  letter-spacing: -0.005em;
}
/* A longer title needs both a smaller size and more room, or the 20ch cap
   breaks it over two lines however small the type gets. */
.ox-page-hero--compact h1 {
  font-size: clamp(26px, 3.3vw, 42px);
  max-width: 32ch;
}
.ox-page-hero__lede {
  color: rgba(255, 255, 255, 0.82);
  max-width: 56ch;
  margin: var(--space-sm) auto 0;
}
.ox-page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

/* With the links switched off the foot renders empty; collapse it so the card
   does not carry a blank strip under the embed. */
.ox-embed-card__foot:empty { display: none; }

/* Home hero on a phone --------------------------------------------------
   On a wide screen the picture sits beside the words and both are in view. On a
   phone the column is text first and the picture ends up below a long stretch of
   copy, so it is lifted to sit right under the eyebrow, between "Reggio Emilia
   philosophy" and "Life at The Oxfordian School".

   The eyebrow and the picture are in different parents, so the split is set to
   display:contents and its children are ordered inside the container instead. */
@media (max-width: 900px) {
  .ox-hero .ox-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }
  /* blocks.css sets .ox-split.is-layout-flow{display:grid} and loads after this
     file, so the child combinator is needed to out-weigh it. */
  .ox-hero .ox-container > .ox-split { display: contents; }
  .ox-hero .ox-container > *:not(.ox-split) { order: 1; }
  .ox-hero .ox-hero__media { order: 2; }
  .ox-hero .ox-split > *:not(.ox-hero__media) { order: 3; }
  /* The flow-layout margins fight the flex gap once these are siblings. */
  .ox-hero .ox-container > * { margin-block: 0; }
}

/* The timetable on a pillar's own page sits on a light section, not the navy
   band it was designed for, so the type and rules are re-coloured there. */
.ox-section:not(.ox-section--navy) .ox-table-wrap { border-color: var(--ox-navy-line); }
.ox-section:not(.ox-section--navy) .ox-timetable { background: #fff; }
.ox-section:not(.ox-section--navy) .ox-timetable th,
.ox-section:not(.ox-section--navy) .ox-timetable td { border-bottom-color: var(--ox-navy-line); }
.ox-section:not(.ox-section--navy) .ox-timetable tbody th { color: var(--ox-fg-strong); }
.ox-section:not(.ox-section--navy) .ox-timetable tbody td { color: var(--ox-body); }
.ox-section:not(.ox-section--navy) .ox-timetable__alt { color: rgba(13, 16, 69, 0.55); }
.ox-section:not(.ox-section--navy) .ox-timetable__fee { color: var(--ox-fg-strong); }
.ox-section:not(.ox-section--navy) .ox-timetable__note,
.ox-section:not(.ox-section--navy) .ox-timetable__swipe { color: var(--ox-body); }
.ox-section:not(.ox-section--navy) .ox-timetable tbody tr:hover { background: var(--ox-surface); }
.ox-section:not(.ox-section--navy) .ox-timetable__group th {
  background: var(--ox-surface);
  border-bottom-color: var(--ox-navy-line);
  color: var(--ox-fg-strong);
}
@media (max-width: 900px) {
  .ox-section:not(.ox-section--navy) .ox-timetable tbody tr:not(.ox-timetable__group) > th:first-child {
    background-color: #fff;
    background-image: none;
    box-shadow: 1px 0 0 var(--ox-navy-line), 6px 0 10px -8px rgba(13, 16, 69, 0.35);
  }
}

/* Teaching approach cards -------------------------------------------------
   Six levels from belief down to the tool in a child's hands. Each one is a
   different kind of thing, so each carries its own accent off the school's own
   ramps, crimson through royal, azure, coral, steel and tan. The kicker names
   the question that level answers, which is what keeps the six reading as one
   chain rather than six unrelated tiles. */
.ox-approach-grid {
  display: grid;
  /* Explicit column counts rather than auto-fit, because the accents are
     assigned per position: to keep warm and cool alternating in both directions
     the rule has to know how many columns there are. */
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
@media (min-width: 620px) {
  .ox-approach-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 980px) {
  .ox-approach-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.ox-approach-card {
  --ox-accent: var(--oxford-royal);

  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--space-md);
  background: var(--ox-card);
  border: 1px solid var(--ox-nav-border);
  /* The accent runs the full width of the top, so each card is a distinct
     topic at a glance rather than a row of identical boxes. */
  border-top: 4px solid var(--ox-accent);
  border-radius: var(--radius-card);
  box-shadow: 0 1px 2px rgba(13, 16, 69, 0.04), 0 8px 20px -14px rgba(13, 16, 69, 0.28);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.ox-approach-card:hover {
  transform: translateY(-3px);
  border-color: var(--ox-accent);
  box-shadow: 0 2px 4px rgba(13, 16, 69, 0.06), 0 16px 32px -18px rgba(13, 16, 69, 0.4);
}
.ox-approach-card > * { margin-block: 0; }

/* The specification has no warm accent family, so the old warm/cool alternation
   is gone. Four accents remain — navy, royal, azure, steel — and a single four
   step cycle never puts the same one beside or below itself at one, two or
   three columns, which is what the two cycles used to be for. */
.ox-approach-card:nth-child(4n+1) { --ox-accent: var(--oxford-navy); }
.ox-approach-card:nth-child(4n+2) { --ox-accent: var(--oxford-royal); }
.ox-approach-card:nth-child(4n+3) { --ox-accent: var(--oxford-royal); }
.ox-approach-card:nth-child(4n)   { --ox-accent: var(--oxford-body); }

.ox-approach-card p.ox-approach-card__kicker {
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 999px;
  /* Plain tint first, so a browser without color-mix still gets a chip. */
  background: var(--ox-surface);
  background: color-mix(in srgb, var(--ox-accent) 12%, transparent);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  /* Navy, not the card's accent. The accent sits behind the kicker as a 12%
     tint of itself, so an accent that is already mid-tone reads against a
     lighter version of itself — the campus cards measured 4.22 against the 4.5
     an 11px label needs. The accent still colours the card's rule and chip;
     only the label steps to navy, which is 15.6 on any of these tints. */
  color: var(--ox-navy);
}
.ox-approach-card h3 {
  font-size: 21px;
  margin: 0;
  color: var(--ox-fg-strong);
}
.ox-approach-card p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ox-body);
}
.ox-approach-card p.ox-approach-card__eg {
  margin-top: auto;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--ox-navy-line);
  font-size: 13px;
  font-weight: 600;
  color: var(--ox-fg-strong);
}

@media (prefers-reduced-motion: reduce) {
  .ox-approach-card { transition: none; }
  .ox-approach-card:hover { transform: none; }
}

/* The lead story sits in its own box so the category buttons can swap which
   card is showing; only ever one is visible, so it fills the column. */
.ox-feature-lead { display: block; height: 100%; }
.ox-feature-lead > .ox-feature-card { height: 100%; }
/* A card sets its own display, and an author display always beats the browser's
   rule for [hidden], so the filtered-out cards would otherwise all still show.
   Scoped rather than !important, which is enough to win here. */
/* ox-story-grid is an id, not a class: written as .ox-story-grid this rule
   never matched, so "load more" had nothing left to reveal, the cards were
   showing all along. Kept as a list of the containers that actually filter. */
.ox-feature-lead > [hidden],
.ox-grid > [hidden],
.ox-enrichment-grid > [hidden],
#ox-story-grid > [hidden],
[data-ox-filter-single] > [hidden],
[data-ox-load-more-target] > [hidden] { display: none; }

/* A story reads as one column: the words run full width and what used to sit
   in a right-hand rail, the pull quote, the pictures and the tags, follows
   underneath instead of squeezing the text into half the page. */
@media (min-width: 901px) {
  article > .ox-section .ox-split.ox-split--top:has(> .ox-prose) {
    display: block;
  }
  article > .ox-section .ox-split.ox-split--top > .ox-prose { max-width: 72ch; }
  article > .ox-section .ox-split.ox-split--top > .ox-stack { margin-top: var(--space-lg); }
}

/* Video -------------------------------------------------------------------
   Sits in a column beside text, so it takes the column's width and keeps the
   film's own shape rather than a fixed height. */
.ox-video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--ox-navy);
}
.ox-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Fading slideshow ---------------------------------------------------------
   The photographs are stacked on top of each other, so the figure keeps the
   height of the first one and the rest are laid over it. */
.ox-slideshow {
  position: relative;
  margin: 0;
  border-radius: var(--radius-card);
  overflow: hidden;
  isolation: isolate;
}
.ox-slideshow img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.ox-slideshow img + img {
  position: absolute;
  inset: 0;
  height: 100%;
}
/* Someone who has asked for less movement gets the first photograph, still. */
@media (prefers-reduced-motion: reduce) {
  .ox-slideshow img { animation: none !important; }
  .ox-slideshow img + img { opacity: 0 !important; }
}

/* Enrichment offerings ------------------------------------------------------
   These run inside the school day, so they sit on the grade-level page with the
   curriculum rather than with the After School classes. */
.ox-enrichment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-lg);
}
/* Cards set their own display, which beats the browser's rule for [hidden], so
   the folded ones need saying explicitly. */
.ox-enrichment-grid > [hidden] { display: none; }

.ox-enrichment-card {
  background: var(--ox-card);
  border: 1px solid var(--ox-nav-border);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.ox-enrichment-card__img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
}
.ox-enrichment-card__title {
  margin: 0;
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--ox-fg-strong);
}

/* The photograph under the Our Story text, sized so it sits with the timeline
   opposite rather than dominating the column. */
.ox-story-photo { margin: var(--space-md) 0 0; }
.ox-story-photo img { width: 100%; border-radius: var(--radius-card); display: block; }


/* ============================================================================
   Theming tokens (3.171.0)
   ----------------------------------------------------------------------------
   Three layers, and the whole point is that a component only ever touches the
   middle one.

     1. Primitives   --ox-navy-500, --ox-red-600 ...   the raw palette, already
                     defined further up this file. Never used by a component.
     2. Semantic     --ox-bg-canvas, --ox-fg-default   what a component asks for.
                     A theme is nothing but a remapping of this layer.
     3. Bridge       --ox-page, --ox-card ...          the old names, pointed at
                     the semantic layer so existing rules follow the theme.

   Adding a theme later is one new block in the THEMES section. No component
   changes, no refactor, because nothing downstream names a colour.

   Every foreground/background pairing below is verified against WCAG AA: 4.5:1
   for text, 3:1 for informational borders and focus rings. The numbers are in
   the comments so a future edit can be rechecked rather than assumed.
   ========================================================================== */

/* ---------------------------------------------------------------- LIGHT ---
   The default theme sits on bare :root, so a document with no class at all is
   already correctly themed. That is what keeps the first paint free of
   JavaScript. */
:root {
  color-scheme: light;

  /* surfaces */
  /* The founder asked for the warm white back, so the light theme returns to
     the surfaces the brand guidelines actually specify: the page is cream and
     a card is warm white, one step lighter, so it lifts without a tint.
     Measured on cream: body 5.30, navy 16.99, royal 12.66, red-600 5.85, and
     the navy-300 control border 3.41, all above their floors. Base crimson
     falls to 4.36 as text on cream, which is why the guidelines already
     forbid it there; nothing in the stylesheets uses it that way. */
  --ox-bg-canvas: var(--oxford-white);
  --ox-bg-surface: var(--oxford-white);
  --ox-bg-raised: var(--ox-surface);
  --ox-bg-sunken: var(--ox-surface);

  /* a band that deliberately opposes the canvas; it flips with the theme */
  --ox-bg-inverse: var(--ox-navy-500);
  --ox-fg-on-inverse: #ffffff;

  /* a band that must stay navy in every theme, because white type sits on a
     photograph inside it and the photograph does not change with the theme */
  --ox-bg-pinned: var(--ox-navy-500);
  --ox-fg-on-pinned: #ffffff;

  /* text: 7.93, 17.84 and 5.57 against the canvas */
  --ox-fg-default: var(--oxford-body);
  --ox-fg-strong: var(--ox-navy-500);
  /* Literal, not var(--ox-body): --ox-body is bridged back to --ox-fg-default
     at the bottom of this file, so pointing at it collapsed muted into default
     and lost the 5.57 tone entirely. A semantic token may only ever reference a
     primitive, never a bridged legacy name. */
  --ox-fg-muted: var(--oxford-body);

  /* brand and links: 6.15 and 13.30 against the canvas */
  /* Red is the menu accent, the CTA and the badge colour. */
  --ox-fg-brand: var(--oxford-crimson);
  --ox-fg-link: var(--oxford-royal);

  /* a filled brand control: white on red-500 is 4.58, which clears AA but only
     just, so a text-bearing fill should prefer --ox-bg-brand-strong at 6.15 */
  --ox-bg-brand: var(--oxford-crimson);
  --ox-bg-brand-strong: var(--oxford-crimson-hover);
  --ox-fg-on-brand: #ffffff;

  --ox-bg-brand-subtle: var(--ox-royal-subtle);
  --ox-bg-accent-subtle: var(--ox-royal-subtle);

  /* --ox-line-subtle is decorative and exempt from a contrast minimum.
     --ox-line-strong carries meaning, so it holds 3.58 here and 5.34 in dark;
     one value satisfies both themes. */
  --ox-line-subtle: var(--oxford-border);
  --ox-line-strong: var(--oxford-body);

  --ox-focus-ring: var(--oxford-royal);
}

/* ----------------------------------------------------------------- DARK ---
   Applied by the class, and also by system preference when the document opts
   in with .ox-theme-auto. The auto path is deliberately opt-in: components are
   still being migrated off the legacy names below, so a half migrated page
   should not flip under a visitor whose laptop happens to be in dark mode.
   Once the bridge section is empty, drop .ox-theme-auto from the selector and
   system preference takes over for everyone. */
.ox-theme-dark,
.ox-theme-auto.ox-theme-dark {
  color-scheme: dark;

  --ox-bg-canvas: #0b0e20;
  --ox-bg-surface: #141833;
  --ox-bg-raised: #1d2244;

  /* --ox-surface was deliberately left out of the flat white pass because it
     drives media wells, card media and dropdown hover as well as section
     bands, and bleaching it would have flattened all of them. It was then
     left out of the dark theme too, so it stayed the light blue grey #f0f4f7
     while every foreground flipped to near white: the Our Impact tiles were
     white type on a white tile at 1.04. Sixteen rules read this token, all of
     them light surfaces, so one dark value fixes the lot. Same shade as
     --ox-bg-raised, since that is exactly what these are. */
  --ox-surface: #1d2244;
  --ox-bg-sunken: #070914;

  --ox-bg-inverse: var(--ox-nude-800);
  --ox-fg-on-inverse: var(--ox-navy-500);

  --ox-bg-pinned: var(--ox-navy-500);
  --ox-fg-on-pinned: #ffffff;

  /* 12.15, 16.64 and 8.45 against the canvas */
  --ox-fg-default: var(--ox-navy-100);
  --ox-fg-strong: var(--ox-navy-50);
  --ox-fg-muted: var(--ox-navy-200);

  /* 7.37 and 9.90 against the canvas */
  --ox-fg-brand: var(--ox-red-300);
  --ox-fg-link: var(--ox-royal-200);

  --ox-bg-brand: var(--oxford-royal);
  --ox-bg-brand-strong: var(--ox-red-400);
  --ox-fg-on-brand: #ffffff;

  --ox-bg-brand-subtle: rgba(232, 23, 44, 0.16);
  --ox-bg-accent-subtle: rgba(162, 185, 251, 0.14);

  --ox-line-subtle: #2a3052;
  --ox-line-strong: var(--ox-navy-300);

  --ox-focus-ring: var(--ox-royal-200);
}

@media (prefers-color-scheme: dark) {
  .ox-theme-auto:not(.ox-theme-light) {
    color-scheme: dark;

    --ox-bg-canvas: #0b0e20;
    --ox-bg-surface: #141833;
    --ox-bg-raised: #1d2244;

  /* --ox-surface was deliberately left out of the flat white pass because it
     drives media wells, card media and dropdown hover as well as section
     bands, and bleaching it would have flattened all of them. It was then
     left out of the dark theme too, so it stayed the light blue grey #f0f4f7
     while every foreground flipped to near white: the Our Impact tiles were
     white type on a white tile at 1.04. Sixteen rules read this token, all of
     them light surfaces, so one dark value fixes the lot. Same shade as
     --ox-bg-raised, since that is exactly what these are. */
  --ox-surface: #1d2244;
    --ox-bg-sunken: #070914;

    --ox-bg-inverse: var(--ox-nude-800);
    --ox-fg-on-inverse: var(--ox-navy-500);

    --ox-fg-default: var(--ox-navy-100);
    --ox-fg-strong: var(--ox-navy-50);
    --ox-fg-muted: var(--ox-navy-200);

    --ox-fg-brand: var(--ox-red-300);
    --ox-fg-link: var(--ox-royal-200);

    --ox-bg-brand-strong: var(--ox-red-400);
    --ox-bg-brand-subtle: rgba(232, 23, 44, 0.16);
    --ox-bg-accent-subtle: rgba(162, 185, 251, 0.14);

    --ox-line-subtle: #2a3052;
    --ox-focus-ring: var(--ox-royal-200);
  }
}

/* ---------------------------------------------------------------- BRIDGE ---
   The legacy names, re-pointed at the semantic layer. This is what lets the
   theme reach rules written long before it existed, without touching them.

   Only unambiguous names are bridged. --ox-navy and --ox-red are deliberately
   left alone: each is used as both a text colour and a background across the
   stylesheet, so a single mapping would be wrong in half its call sites. Those
   are migrated per component, by replacing the call site with --ox-fg-strong or
   --ox-bg-inverse as the case may be. --ox-white is likewise left literal,
   because several uses mean the colour white on a photograph, not the canvas. */
:root {
  --ox-page: var(--ox-bg-canvas);
  --ox-card: var(--ox-bg-surface);
  /* Bridged to --ox-fg-default, which is Deep Navy. This deliberately reverses
     the note that used to sit here: the bridge pointed at the muted step so it
     would be invisible when it was introduced, and the specification's fourth
     rule is that body text is Deep Navy on every light surface. So the restyle
     the old note was avoiding is now the point. Captions and metadata take
     --ox-fg-muted (Steel Blue) directly rather than riding on --ox-body. */
  --ox-body: var(--ox-fg-default);
  --ox-navy-line: var(--ox-line-subtle);
}

/* A menu item marked ox-strong in Appearance > Menus (3.219.0).
   Andrea asked for Community Connection to stand out from the stories above
   it. The class is hers to move; the weight lives here so both the dropdown
   and the phone panel pick it up. */
.ox-dropdown__link.ox-strong,
.ox-mobile-nav__sub a.ox-strong {
  font-weight: 700;
}

/* Timetable on a phone ------------------------------------------------------
   Seven columns cannot be read on a 375px screen. Pinning the class name and
   inviting a swipe made the scroller usable, but measured on the live page a
   parent could still only see 30% of the table at once and had to swipe to
   reach the time, the fee and the trial button.

   So below 760px the table stops being a table: each row becomes a card, and
   every cell prints its own column name from the data-label the renderer puts
   on it. Nothing is hidden, nothing scrolls sideways, and the reading order is
   the order the row was written in. The markup stays a real <table>, so the
   semantics a screen reader relies on are untouched. */
@media (max-width: 900px) {
  .ox-table-wrap { overflow-x: visible; border: 0; border-radius: 0; }

  .ox-timetable { min-width: 0; background: none; }
  .ox-timetable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

  .ox-timetable tbody tr:not(.ox-timetable__group) {
    display: block;
    margin-bottom: 8px;
    border: 1px solid var(--ox-nav-border);
    border-radius: var(--radius-card);
    background: rgba(255, 255, 255, 0.04);
    padding: 6px 0;
  }
  .ox-timetable tbody tr:not(.ox-timetable__group) > th,
  .ox-timetable tbody tr:not(.ox-timetable__group) > td {
    display: grid;
    grid-template-columns: 6.5em 1fr;
    gap: 10px;
    align-items: baseline;
    padding: 5px 14px;
    border-bottom: 0;
    line-height: 1.35;
  }
  .ox-timetable tbody tr:not(.ox-timetable__group) .ox-tt-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  /* Several times in one cell read as one line each, not one block each. */
  .ox-timetable tbody tr:not(.ox-timetable__group) .ox-timetable__slot { display: inline; }
  .ox-timetable tbody tr:not(.ox-timetable__group) .ox-timetable__slot + .ox-timetable__slot::before {
    content: " · ";
    color: rgba(255, 255, 255, 0.4);
  }
  .ox-timetable__enrol { display: block; }

  /* The class name is the card's title, so it takes the full width and drops
     its label. Everything under it is a labelled pair. */
  .ox-timetable tbody tr:not(.ox-timetable__group) > th {
    display: block;
    padding-bottom: 2px;
    font-size: 15px;
  }
  .ox-timetable tbody tr:not(.ox-timetable__group) > td::before {
    content: attr(data-label);
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
  }
  /* An empty cell would otherwise print a label with nothing beside it. */
  .ox-timetable tbody tr:not(.ox-timetable__group) > td:empty { display: none; }

  .ox-timetable__fee { white-space: normal; }
  .ox-timetable__group th { border-radius: var(--radius-card); }

  .ox-timetable__swipe { display: none; }
  .ox-timetable__stacked-note {
    margin: var(--space-md) 0 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.62);
  }
}

/* Above the stack the note is wrong: there the table is still a table. */
@media (min-width: 901px) {
  .ox-timetable__stacked-note { display: none; }
}

/* Disclosure ---------------------------------------------------------------
   WordPress's own details block, styled to sit beside the accordion rather
   than beneath it. Used where a section carries more detail than a reader
   needs on first pass: the summary stays visible and says what is inside, so
   nothing is hidden without a label for it.

   A native <details> is used rather than a scripted panel because it opens
   with no JavaScript, is announced correctly by a screen reader on its own,
   and is searchable in the page by the browser's own find. */
.ox-prose .wp-block-details,
.ox-container .wp-block-details {
  border: 1px solid var(--ox-navy-line);
  border-radius: var(--radius-card);
  background: var(--ox-surface);
  padding: 0;
  margin-block: 8px;
}
.wp-block-details > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: 14px var(--space-md);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--ox-fg-strong);
}
.wp-block-details > summary::-webkit-details-marker { display: none; }
.wp-block-details > summary::after {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.2s ease;
  opacity: 0.65;
}
.wp-block-details[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.wp-block-details > summary:focus-visible {
  outline: 3px solid var(--ox-fg-brand);
  outline-offset: -3px;
  border-radius: var(--radius-card);
}
.wp-block-details > *:not(summary) { margin: 0 var(--space-md) 4px; }
.wp-block-details > *:not(summary):last-child { margin-bottom: var(--space-md); }
.wp-block-details ul { margin: 0 0 0 18px; padding: 0; }
.wp-block-details li { margin-bottom: 6px; }

@media (prefers-reduced-motion: reduce) {
  .wp-block-details > summary::after { transition: none; }
}

/* Rate tables --------------------------------------------------------------
   The units used to be repeated on every row: "$1,200 per month, $60 per hour,
   $800 at Vista Hermosa", eleven times over. A header says each unit once, and
   the figures line up under it where they can be compared, which is the whole
   reason to put numbers in a column. */
.ox-rates { margin: 0; }
.ox-rates table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.ox-rates th,
.ox-rates td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--ox-navy-line);
}
.ox-rates thead th {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ox-body);
  white-space: nowrap;
}
.ox-rates tbody th,
.ox-rates tbody td:first-child {
  font-weight: var(--weight-subheading);
  color: var(--ox-fg-strong);
}
/* The figures are the point of the table, so they carry the weight. */
.ox-rates tbody td:not(:first-child) {
  font-variant-numeric: tabular-nums;
  color: var(--ox-fg-strong);
}
.ox-rates tbody tr:last-child th,
.ox-rates tbody tr:last-child td { border-bottom: 0; }

/* A level name can wrap; a figure never should. */
.ox-rates td:first-child { min-width: 0; }
.ox-rates td:not(:first-child),
.ox-rates th:not(:first-child) { white-space: nowrap; }

@media (max-width: 560px) {
  .ox-rates table { font-size: 14px; }
  .ox-rates th,
  .ox-rates td { padding: 8px 6px; }
}

/* A rate table on a phone ---------------------------------------------------
   Four columns do not fit 279px: measured, the rates table ran 186px past its
   container and scrolled sideways. Below 620px each row becomes a small block
   of labelled pairs, the labels taken from the table's own headings by the
   script that adds .is-stackable. Without that script the table stays a
   scrolling table, which is worse but not broken. */
@media (max-width: 620px) {
  .ox-rates table.is-stackable thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .ox-rates table.is-stackable tbody tr {
    display: block;
    padding: 6px 0 8px;
    border-bottom: 1px solid var(--ox-navy-line);
  }
  .ox-rates table.is-stackable tbody tr:last-child { border-bottom: 0; }

  .ox-rates table.is-stackable tbody td {
    display: grid;
    grid-template-columns: 8.5em 1fr;
    gap: 10px;
    padding: 3px 0;
    border-bottom: 0;
    white-space: normal;
  }
  /* The level is the block's title, not a labelled pair. */
  .ox-rates table.is-stackable tbody td:first-child {
    display: block;
    font-size: 15px;
    padding-bottom: 4px;
  }
  .ox-rates table.is-stackable tbody td[data-label]:not(:first-child)::before {
    content: attr(data-label);
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ox-body);
  }
  /* A blank figure would print a label with nothing beside it. */
  .ox-rates table.is-stackable tbody td:empty { display: none; }
}

/* Print ---------------------------------------------------------------------
   These pages get printed. An admissions folder, a rate sheet on a fridge, the
   principles pinned in a classroom. What a browser prints by default is the
   screen with its navigation, and anything a reader has not opened is simply
   absent from the paper.

   So: the chrome goes, everything hidden behind a disclosure is opened, both
   faces of a turning tile are shown, and rows and cards are kept off page
   boundaries. Colour is left to the browser's own background setting rather
   than forced, because most people print these without backgrounds and dark
   bands would otherwise eat a cartridge. */
@media print {
  .ox-topbar,
  .ox-nav,
  .ox-nav-toggle,
  .ox-mobile-nav,
  .ox-jumpnav,
  .ox-footer,
  .ox-cta__actions,
  .ox-band__nav,
  .ox-filter,
  .ox-timetable__swipe,
  .ox-timetable__stacked-note,
  .ox-values__toggle,
  .ox-values__cue,
  .ox-modal { display: none !important; }

  /* Opening a closed disclosure for print is done in theme.js, not here: a
     closed <details> hides its children through the browser's own shadow DOM,
     so display on the light DOM child does nothing at all. Measured before
     trusting it. */
  .wp-block-details > summary::after { display: none; }
  .wp-block-details { border-color: #999; }

  /* A turning tile prints front only, because the back is rotated away from
     the page. Flattened here so both faces read as two lines. */
  .ox-values__card { transform: none !important; }
  .ox-values__face { position: static !important; transform: none !important; backface-visibility: visible !important; }
  .ox-values__tile--flip { perspective: none; }

  /* Nothing useful is split across a page boundary. */
  .ox-values__tile,
  .ox-approach-card,
  .ox-schedule__row,
  .ox-schedule-band,
  .ox-journey-step,
  .ox-rates tbody tr,
  .ox-timetable tbody tr,
  details { break-inside: avoid; page-break-inside: avoid; }

  h1, h2, h3 { break-after: avoid; page-break-after: avoid; }

  /* A table that scrolls on screen has nowhere to scroll on paper. */
  .ox-table-wrap { overflow: visible !important; }
  .ox-timetable { min-width: 0 !important; }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 10px;
    word-break: break-all;
  }
  a[href^="#"]::after,
  a[href^="mailto"]::after { content: ""; }

  body { background: #fff; }
}