/*
Theme Name: Advanced Tuition Blocks
Theme URI: https://advancedtuition.co.uk
Author: Bedford+Co
Author URI: https://bedfordandco.net
Description: Block-editor build of the Advanced Tuition site. Same design and stylesheet as the classic Advanced Tuition theme; every page is native blocks, edited in the WordPress block editor. Built by Bedford+Co.
Version: 2.0.2
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: advanced-tuition
*/

/* ==========================================================================
   1. TOKENS
   Palette, type and spacing are taken verbatim from the Claude Design import
   (brand-tokens block, which overrides the base Bedford+Co editorial system).
   ========================================================================== */

:root {
  /* Paper / neutrals */
  --paper-000: #ffffff;
  --paper-050: #e4ebf1;
  --paper-100: #e1e5ee;

  /* Brand */
  --color-purple: #1d1a74;
  --color-blue: #134f88;
  --color-blend: #1a4485;

  /* Roles */
  --color-primary: #134f88;
  --color-primary-hover: #0f3e6c;
  --color-accent: #1d1a74;
  --color-accent-hover: #151256;

  /* Primary button. The client objected to the dark blue on buttons, which is
     not in their brand pack, so the main call to action takes the pack's
     Signature Purple carried toward its Soft Magenta and darkened enough to
     hold a white label at 4.9:1. The pack magenta itself is 3.1:1, too light
     for white text. The rest of the brand palette is awaiting their sign-off
     on staging, so Deep Blue stays everywhere else for now. */
  --btn-brand: #9753c0;
  --btn-brand-hover: #864aab;

  /* Ink */
  --ink-900: #0e0311;
  --color-text: #0e0311;
  --color-text-lead: #4a4756;
  --color-text-muted: #6b6773;
  --color-border: #e2e4ea;

  /* On dark */
  --color-white: #ffffff;
  --color-on-dark: #ffffff;
  --color-on-dark-muted: #d9d7ea;

  /* Footer */
  --color-footer-bg: #0e0311;
  --color-footer-text: #e4e1ec;
  --color-footer-muted: #b7b3c4;
  --color-footer-label: #87a4bf;
  --color-footer-meta: #8a869a;
  --color-footer-rule: #2c2934;
  --color-footer-chip: #3a3742;

  /* Signature gradient, the one bold move, used on the homepage h1 only */
  --grad-brand: linear-gradient(100deg, #ca6ce6, #0bc0df);
  --grad-logo: linear-gradient(45deg, #1d1a74, #134f88);
  /* Vibrant flow for the oversized numerals and quote marks. Both stops clear
     3:1 on white, which the brightest logo stops do not. */
  --grad-numeral: linear-gradient(100deg, #b354cf, #0f9fb8);

  /* Chart palette, validated categorical set: brand primary plus the two
     stops of the signature gradient, deepened to clear the lightness band,
     chroma floor, CVD separation and 3:1 contrast against white. */
  --chart-a: #1f5fa0;
  --chart-b: #0f9fb8;
  --chart-c: #b354cf;
  --chart-neutral: #8a93a6;
  /* Chart gradient, the logo's magenta-to-cyan flow, deepened so white text
     holds 4.5:1 at every point along it (the logo stops fall to 2.2:1).
     Used on the infographics; the bright --grad-brand stays decorative. */
  --chart-grad-start: #9b3fb8;
  --chart-grad-end: #0b7f93;
  --grad-chart: linear-gradient(90deg, var(--chart-grad-start), var(--chart-grad-end));
  --grad-chart-down: linear-gradient(180deg, var(--chart-grad-start), var(--chart-grad-end));
  /* Pale partner to the chart gradient, 'also runs' on the workshop calendar. */
  --chart-soft: #a9bed3;
  /* Hairlines that still register on the muted section tint. */
  --color-border-on-muted: #cfd9e4;

  /* Hero scrim, flat ink veil over the full-bleed homepage photograph.
     Even coverage rather than a fade, so the white headline holds at any
     width and the copy is not tied to a readable zone. */
  /* Placeholder behind a full-bleed photograph while it downloads. Every page
     leads with a different photograph, so the hero is never in cache when you
     move between pages and there is always a moment before it paints. Measured
     mean of the 61 hero crops is #887c77, so under the scrim this resolves to
     the same tone the loaded photograph averages and the swap barely registers.
     The old behaviour was the scrim over white, a pale grey that read as a
     placeholder box. */
  --photo-base: #887c77;

  --scrim-hero: rgba(14, 3, 17, 0.55);

  /* Type */
  /* Montserrat matches the logo wordmark, client request, Sept 2026. */
  --font-display: 'Montserrat', ui-sans-serif, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-body: 'Inter', ui-sans-serif, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Scale re-set for Montserrat, which runs ~15% wider than the serif it
     replaced. Held at the ruleset floors: h1 56px, h2 40px, h3 24px desktop. */
  --text-h1: clamp(36px, 4.8vw, 56px);
  --text-h1-hero: clamp(36px, 5.4vw, 68px);
  --text-h1-sub: clamp(36px, 4.8vw, 56px);
  --text-h2: clamp(28px, 3.6vw, 40px);
  --text-h2-sm: clamp(28px, 3.6vw, 40px);
  --text-h3: 24px;
  --text-h4: 20px;
  --text-body: 18px;
  --text-body-sm: 16px;
  --text-lead: 19px;
  --text-standfirst: clamp(19px, 2vw, 23px);
  --text-pullquote: clamp(22px, 2.6vw, 28px);
  --text-eyebrow: 12px;
  --text-cta: 13px;
  --text-nav: 12px;
  --text-nav-btn: 12px;

  --leading-body: 1.8;
  --leading-body-sm: 1.7;
  --measure-body: 700px;
  --measure-lead: 560px;
  --measure-quote: 720px;

  /* Spacing, 8px base scale */
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 20px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 56px;
  --space-10: 64px;
  --space-12: 80px;
  --space-14: 96px;
  --space-16: 120px;
  --space-18: 140px;

  /* Section rhythm, mobile first */
  --section-hero-top: 72px;
  --section-hero-bottom: 56px;
  --section-primary: 64px;
  --section-secondary: 56px;
  --section-footer-top: 64px;
  --section-footer-bottom: 32px;

  --content-max: 1200px;
  --content-mid: 900px;
  --content-narrow: 800px;
  --gutter: 20px;

  --panel-padding: 28px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --border-hairline: 1px solid var(--color-border);

  --transition: 0.2s ease;
}

@media (min-width: 768px) {
  :root {
    --gutter: 32px;
    --section-hero-top: 100px;
    --section-hero-bottom: 72px;
    --section-primary: 88px;
    --section-secondary: 72px;
    --panel-padding: 36px;
  }
}

@media (min-width: 1024px) {
  :root {
    --gutter: 40px;
    --section-hero-top: 140px;
    --section-hero-bottom: 100px;
    --section-primary: 120px;
    --section-secondary: 100px;
    --section-footer-top: 80px;
    --section-footer-bottom: 40px;
    --panel-padding: 44px;
  }
}

/* ==========================================================================
   2. RESET / BASE
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper-000);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  font-weight: 400;
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (min-width: 768px) {
  body {
    font-size: var(--text-body);
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  margin: 0;
  color: var(--color-text);
}

h1 {
  font-size: var(--text-h1);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.08;
}

h2 {
  font-size: var(--text-h2);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.14;
}

h3 {
  font-size: var(--text-h3);
  font-weight: 700;
  line-height: 1.25;
}

h4 {
  font-size: var(--text-h4);
  font-weight: 700;
  line-height: 1.3;
}

p {
  margin: 0 0 var(--space-4);
  max-width: var(--measure-body);
}

p:last-child:not(:where(.btn-group, .btn-group--center, .contact-details__label, .contact-details__value, .entry__meta, .eyebrow, .hero__eyebrow, .link-row, .price__figure, .price__label, .price__note, .site-actions, .site-footer__label)) {
  margin-bottom: 0;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition);
}

a:hover,
a:focus-visible {
  color: var(--color-accent);
}

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

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

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

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--color-primary);
  color: var(--color-on-dark);
  padding: var(--space-2) var(--space-4);
}

.skip-link:focus {
  left: var(--space-3);
  top: var(--space-3);
  color: var(--color-on-dark);
}

/* ==========================================================================
   3. LAYOUT PRIMITIVES
   ========================================================================== */

.wrap {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--mid {
  max-width: var(--content-mid);
}

.wrap--narrow {
  max-width: var(--content-narrow);
}

.section {
  padding-block: var(--section-primary);
}

.section--secondary {
  padding-block: var(--section-secondary);
}

.section--hero {
  padding-top: var(--section-hero-top);
  padding-bottom: var(--section-hero-bottom);
}

.section--muted {
  background: var(--paper-050);
}

.section--primary {
  background: var(--color-blue);
}

.section--accent {
  background: var(--color-purple);
}

.section--tight {
  padding-block: var(--space-9);
}

/* Section intro, eyebrow + h2 + optional lead */
.section__intro {
  max-width: 640px;
  margin: 0 auto var(--space-10);
  text-align: center;
}

.section__intro--tight {
  margin-bottom: var(--space-8);
}

.section__intro h2 {
  margin: 0;
}

.section__intro p {
  margin: var(--space-3) auto 0;
  color: var(--color-text-muted);
  font-size: var(--text-body-sm);
}

.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}

.eyebrow--on-dark {
  color: var(--color-on-dark-muted);
}

/* ==========================================================================
   4. BUTTONS
   Primary = filled blue (prospects). Ghost = outlined (existing students).
   ========================================================================== */

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-cta);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  padding: 14px 30px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}

.btn--primary {
  background: var(--btn-brand);
  color: var(--color-on-dark);
  border-color: var(--btn-brand);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--btn-brand-hover);
  border-color: var(--btn-brand-hover);
  color: var(--color-on-dark);
}

/* The lead call to action on each main page, sitting over a photograph.
   Same magenta as the primary button: seven templates ask for this style, so
   without a rule here they render as bare text on the image. */
.btn--brand {
  background: var(--btn-brand);
  color: var(--color-on-dark);
  border-color: var(--btn-brand);
}

.btn--brand:hover,
.btn--brand:focus-visible {
  background: var(--btn-brand-hover);
  border-color: var(--btn-brand-hover);
  color: var(--color-on-dark);
}

/* Moodle / existing-student action. Was an outlined black button; filled in
   the brand magenta like the rest, so every button on a light background now
   reads the same (client, Oct 2026). It only ever sits on white or the pale
   tint, so the fill always has a clear edge. */
.btn--ghost {
  background: var(--btn-brand);
  color: var(--color-on-dark);
  border-color: var(--btn-brand);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  background: var(--btn-brand-hover);
  border-color: var(--btn-brand-hover);
  color: var(--color-on-dark);
}

/* Exception: the menu keeps the outlined pairing. Two filled magenta buttons
   side by side in the header gave the quiet action the same weight as Apply
   Now; outlined against the filled primary reads as a clear second choice.
   Covers the mobile panel too, which repeats the same pair. */
.site-actions .btn--ghost {
  background: transparent;
  color: var(--ink-900);
  border-color: var(--ink-900);
}

.site-actions .btn--ghost:hover,
.site-actions .btn--ghost:focus-visible {
  background: var(--ink-900);
  border-color: var(--ink-900);
  color: var(--paper-000);
}

.btn--on-dark {
  background: var(--paper-000);
  color: var(--ink-900);
  border-color: var(--paper-000);
}

/* Flips on hover: the white fill becomes near-black and the label turns
   white, the same move the outlined button used to make. */
.btn--on-dark:hover,
.btn--on-dark:focus-visible {
  background: var(--ink-900);
  border-color: var(--ink-900);
  color: var(--paper-000);
}

.btn--ghost-on-dark {
  background: transparent;
  color: var(--color-on-dark);
  border-color: var(--color-on-dark);
}

.btn--ghost-on-dark:hover,
.btn--ghost-on-dark:focus-visible {
  background: var(--color-on-dark);
  color: var(--ink-900);
}

.btn-group {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.btn-group--center {
  justify-content: center;
}

/* ==========================================================================
   5. SITE HEADER / NAV
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--paper-000);
}

.site-header__inner {
  /* Full width, not the content column: logo to the far left, buttons to the
     far right, links centred on the page between them. */
  padding: 14px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}

@media (min-width: 1024px) {
  .site-header__inner {
    padding-block: 18px;
    gap: var(--space-6);
  }
}

.site-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  color: var(--ink-900);
}

.site-brand:hover {
  color: var(--ink-900);
}

.site-brand__mark {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
}

.site-brand__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.04em;
  color: var(--ink-900);
  white-space: nowrap;
}

@media (min-width: 480px) {
  .site-brand__name {
    font-size: 18px;
  }
}

/* Bigger on phones: the "TUITION" line in the lockup is small, light and
   widely tracked, and at 40px the whole mark is only ~12px of actual letter
   height. CSS cannot embolden artwork, so size is the only lever here until
   a mobile-weight logo file arrives. */
.site-brand__logo {
  max-height: 48px;
  width: auto;
}

@media (min-width: 768px) {
  .site-brand__logo {
    max-height: 40px;
  }
}

/* Nav toggle (mobile) */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* No frame, the 44px box is the tap target, not a visible button. */
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--ink-900);
}

/*
 * Two lines, not three. The span itself is an invisible anchor so the pair
 * stays symmetric about the centre; the lines are its two pseudo-elements,
 * which rotate to meet as an X.
 */
.nav-toggle__bar {
  position: relative;
  display: block;
  width: 26px;
  height: 2px;
  background: transparent;
}

.nav-toggle__bar::before,
.nav-toggle__bar::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transition: transform var(--transition);
}

.nav-toggle__bar::before {
  top: -5px;
}

.nav-toggle__bar::after {
  top: 5px;
}

.nav-toggle[aria-expanded='true'] .nav-toggle__bar::before {
  transform: translateY(5px) rotate(45deg);
}

.nav-toggle[aria-expanded='true'] .nav-toggle__bar::after {
  transform: translateY(-5px) rotate(-45deg);
}

@media (min-width: 1440px) {
  .nav-toggle {
    display: none;
  }
}

/* Nav panel */
.site-nav {
  display: none;
}

.site-nav.is-open {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--paper-000);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-5) var(--gutter) var(--space-7);
}

.site-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.site-nav__list a {
  font-family: var(--font-body);
  font-size: var(--text-nav);
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-900);
}

.site-nav__list a:hover,
.site-nav__list .current-menu-item > a {
  color: var(--color-primary);
}

.site-actions {
  display: none;
}

.site-actions--mobile {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

.site-actions--mobile .btn {
  width: 100%;
  padding: 16px 30px;
}

@media (min-width: 1440px) {
  /* Equal outer columns put the links on the page's centre line. The desktop
     nav only appears once there is room for exact centring; below 1440px the
     burger takes over rather than letting the links drift off centre. */
  .site-header__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }

  .site-brand {
    justify-self: start;
  }

  .site-nav {
    display: block;
    justify-self: center;
  }

  .site-nav.is-open {
    position: static;
    border: 0;
    padding: 0;
  }

  .site-nav__list {
    flex-direction: row;
    align-items: center;
    /* Nine items have to hold one line, nowrap makes a regression obvious
       rather than letting the header quietly grow a second row. */
    gap: 20px;
    flex-wrap: nowrap;
  }

  .site-nav__list a {
    white-space: nowrap;
  }

  .site-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
    justify-self: end;
  }

  .site-actions--mobile {
    display: none;
  }

  /* Compact header variants of the buttons */
  .site-actions .btn {
    font-size: var(--text-nav-btn);
    padding: 11px 20px;
  }
}

/* ==========================================================================
   6. HERO
   ========================================================================== */

.hero {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}

@media (min-width: 900px) {
  .hero {
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--space-10);
  }
}

.hero__eyebrow {
  display: block;
  font-size: var(--text-eyebrow);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-purple);
  margin-bottom: var(--space-4);
}

.hero__title {
  margin: 0 0 var(--space-5);
}

/* Signature element: the homepage headline carries the brand gradient. */
.hero__title--gradient {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__lead {
  font-size: var(--text-lead);
  line-height: var(--leading-body);
  color: var(--color-text-lead);
  max-width: var(--measure-lead);
  margin: 0 0 var(--space-8);
}

.hero__actions {
  margin-bottom: var(--space-8);
}

.hero__media {
  width: 100%;
}

.hero__media img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  border-radius: var(--radius-md);
}

@media (min-width: 900px) {
  .hero__media img {
    height: 460px;
  }
}

@media (min-width: 1024px) {
  .hero--home .hero__media img {
    height: 520px;
  }
}

/* Hero stat strip */
.hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-6);
}

@media (min-width: 640px) {
  .hero__stats {
    gap: var(--space-7);
  }
}

.stat__figure {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  color: var(--ink-900);
  line-height: 1.1;
}

.stat__label {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-muted);
  max-width: 180px;
}

/* Hero with no image, single column, full measure */
.hero--no-media {
  grid-template-columns: 1fr;
}

/* Centred hero variant (UCAS) */
.hero--centered {
  display: block;
  max-width: var(--content-mid);
  margin-inline: auto;
  text-align: center;
}

.hero--centered .hero__lead {
  max-width: 640px;
  margin-inline: auto;
}

.hero--centered .btn-group {
  justify-content: center;
}

/* Page hero (News, Contact), headline only */
.page-hero {
  padding-top: var(--section-hero-top);
  padding-bottom: var(--space-7);
}

.page-hero__title {
  margin: 0;
  max-width: 760px;
  font-size: clamp(32px, 4.5vw, 52px);
}

/* Full-bleed background variant, homepage.
   The photograph runs the full width of the section behind the copy; the
   white wash keeps the left-hand column as clean paper for the headline. */
.section--hero-bg {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 68vh;
  overflow: hidden;
  /* Clips the fixed background layer to the section box, without this the
     photograph would stay pinned to the viewport down the whole page. */
  clip-path: inset(0);
}

.section--hero-bg .wrap {
  position: relative;
  z-index: 1;
  width: 100%;
}

/* Pinned to the viewport, so the copy scrolls up over a stationary
   photograph. Clipped by the section above. */
.hero-bg {
  position: fixed;
  inset: 0;
  /* Placeholder until the photograph paints; see --photo-base. It sits on
     this wrapper, not the img: a background on the img itself costs Chrome
     its fast path for compositing a plain image, and a pinned layer then
     re-rasterises as the section's clip moves, which shows as a faint
     jitter while scrolling. */
  background-color: var(--photo-base);
}

.hero-bg__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 64% 50%;
}

.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--scrim-hero);
}

@media (min-width: 900px) {
  .section--hero-bg {
    min-height: 82vh;
  }

  .hero-bg__img {
    object-position: 72% 50%;
  }
}

/* For photographs whose subject sits high in the frame. */
.hero-bg--top .hero-bg__img {
  object-position: 60% 15%;
}

/* Copy sits alone over the photograph, single column, on dark. */
.hero--overlay {
  display: block;
}

.hero--overlay .hero__body {
  max-width: 640px;
}

.hero--overlay .hero__eyebrow {
  color: var(--color-on-dark-muted);
}

.hero--overlay .hero__title {
  color: var(--color-on-dark);
  font-size: var(--text-h1-hero);
  margin-bottom: var(--space-7);
}

.hero--overlay .hero__lead {
  color: var(--color-on-dark);
  margin-bottom: var(--space-8);
}

.hero--overlay .hero__actions {
  margin-bottom: 0;
}

@media (min-width: 900px) {
  .hero--overlay .hero__body {
    max-width: 860px;
  }
}

/* ==========================================================================
   7. INTRO + FIGURES
   ========================================================================== */

.intro-stats {
  display: grid;
  gap: var(--space-8);
}

@media (min-width: 900px) {
  .intro-stats {
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--space-14);
    align-items: start;
  }
}

.intro-stats__lead {
  font-size: var(--text-standfirst);
  font-weight: 500;
  line-height: 1.55;
  color: var(--ink-900);
  max-width: var(--measure-body);
  margin-bottom: var(--space-4);
}

.intro-stats__text {
  color: var(--color-text-lead);
  line-height: var(--leading-body);
  max-width: var(--measure-body);
}

.intro-stats__figures {
  margin: 0;
  display: grid;
  gap: var(--space-5);
}

.figure-row {
  display: grid;
  grid-template-columns: minmax(104px, auto) 1fr;
  gap: var(--space-4);
  align-items: baseline;
  border-top: var(--border-hairline);
  padding-top: var(--space-4);
}

.figure-row__figure {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 800;
  line-height: 1.05;
  color: var(--ink-900);
}

.figure-row__label {
  margin: 0;
  font-size: var(--text-body-sm);
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* ==========================================================================
   8. CREDENTIAL ROW
   ========================================================================== */

.credential-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-4) var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.credential-row__item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.credential-row__label {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
}

.credential-row__icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  color: var(--color-primary);
}

/* All four claims share one line, each on a single line of its own. The
   1120px content box needs the tighter gap and the smaller label to fit. */
@media (min-width: 1200px) {
  .credential-row {
    flex-wrap: nowrap;
    gap: var(--space-4);
  }

  .credential-row__item {
    gap: 8px;
  }

  .credential-row__icon {
    width: 20px;
    height: 20px;
  }

  .credential-row__label {
    font-size: 13px;
    white-space: nowrap;
  }
}

.exam-boards__heading {
  text-align: center;
  margin: 0 0 var(--space-5);
  max-width: none;
}

/* Exam board logos, grayscale per the editorial theme rules */
.exam-boards {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  list-style: none;
  margin: 0;
  padding: 0;
}

.exam-boards__item img {
  height: 34px;
  width: auto;
  filter: grayscale(100%);
  opacity: 0.6;
  transition: filter var(--transition), opacity var(--transition);
}

.exam-boards__item img:hover {
  filter: grayscale(0);
  opacity: 1;
}

@media (min-width: 768px) {
  .exam-boards__item img {
    height: 40px;
  }
}

/* ==========================================================================
   9. SUBJECT / FEATURE COLUMNS
   ========================================================================== */

.col-grid {
  display: grid;
  gap: var(--space-8);
}

@media (min-width: 700px) {
  .col-grid--2,
  .col-grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .col-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.feature__title {
  font-family: var(--font-display);
  font-size: var(--text-h4);
  font-weight: 700;
  margin: 0 0 var(--space-2);
}

.feature__body {
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  color: var(--color-text-muted);
  margin: 0;
}

/* Inline text links under a grid */
.link-row {
  text-align: center;
  margin-top: var(--space-9);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-5) var(--space-8);
}

.link-arrow {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-900);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 2px;
}

.link-arrow:hover {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* ==========================================================================
   10. SUBJECT LIST / PROSE
   ========================================================================== */

.subject-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: var(--border-hairline);
}

.subject-list__item {
  border-bottom: var(--border-hairline);
}

.subject-row {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-6) 0;
  color: var(--color-text);
  transition: background-color var(--transition), padding-inline var(--transition);
}

@media (min-width: 800px) {
  .subject-row {
    grid-template-columns: 260px 1fr;
    gap: var(--space-8);
    align-items: baseline;
    padding-block: var(--space-7);
  }
}

.subject-row:hover,
.subject-row:focus-visible {
  color: var(--color-text);
  background: var(--paper-050);
}

@media (min-width: 800px) {
  /* Nudge in on hover rather than moving the row, so the rules stay put. */
  .subject-row:hover,
  .subject-row:focus-visible {
    padding-inline: var(--space-5);
  }
}

/* Rows with no destination, the individual subject pages were retired. */
.subject-row--static,
.subject-row--static:hover {
  background: none;
  padding-inline: 0;
  cursor: auto;
}

.subject-row__title {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  color: inherit;
}

.subject-row__body {
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  color: var(--color-text-muted);
  max-width: var(--measure-body);
  margin: 0 0 var(--space-2);
}

.subject-row__cue {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
}

.subject-row:hover .subject-row__cue,
.subject-row:focus-visible .subject-row__cue {
  color: var(--color-accent);
}

/* Prose paired with a photograph. Source order is text-then-image so the
   single-column view reads before it looks; the swap is desktop-only. */
.prose-media {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}

@media (min-width: 900px) {
  .prose-media {
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--space-12);
  }

  .prose-media--reverse .prose {
    order: 2;
  }

  .prose-media--reverse .prose-media__figure {
    order: 1;
  }
}

.prose-media__figure {
  margin: 0;
}

.prose-media__figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

/* Continuous body copy, subject pages */
.prose {
  max-width: var(--measure-body);
}

.prose__heading {
  font-size: var(--text-h2-sm);
  margin: 0 0 var(--space-5);
}

.prose__lead {
  font-size: var(--text-standfirst);
  font-weight: 500;
  line-height: 1.55;
  color: var(--ink-900);
  margin-bottom: var(--space-5);
}

.prose__text {
  color: var(--color-text-lead);
  line-height: var(--leading-body);
  margin-bottom: var(--space-4);
}

/* ==========================================================================
   11. JOURNEY PATHWAY
   ========================================================================== */

/* A roadmap, not a row of buttons: markers threaded on a continuous line.
   Nothing is filled, bordered or hoverable, so it never reads as clickable.
   Narrow screens run it down the page; from 768px it runs across. */
.roadmap {
  /* Overridden per step count by the modifiers below. */
  --roadmap-stops: 5;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  display: grid;
  gap: var(--space-5);
}

.roadmap--3 {
  --roadmap-stops: 3;
}

.roadmap--4 {
  --roadmap-stops: 4;
}

.roadmap--5 {
  --roadmap-stops: 5;
}

.roadmap--6 {
  --roadmap-stops: 6;
}

.roadmap--7 {
  --roadmap-stops: 7;
}

.roadmap--8 {
  --roadmap-stops: 8;
}

.roadmap--9 {
  --roadmap-stops: 9;
}

.roadmap--10 {
  --roadmap-stops: 10;
}

/* The line itself, behind the markers. */
.roadmap::before {
  content: '';
  position: absolute;
  left: 13px;
  top: 14px;
  bottom: 14px;
  width: 2px;
  background: var(--grad-chart-down);
}

.roadmap__stop {
  position: relative;
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: var(--space-4);
}

.roadmap__marker {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-image: var(--grad-chart);
  /* A ring in the page colour so the line appears to pass behind the marker. */
  box-shadow: 0 0 0 4px var(--paper-000);
  color: var(--color-on-dark);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.section--muted .roadmap__marker {
  box-shadow: 0 0 0 4px var(--paper-050);
}

.roadmap__label {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text);
}

@media (min-width: 768px) {
  .roadmap {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 0;
  }

  /* The line spans marker to marker, so it stops where the roadmap stops.
     Half a column at each end, the step count comes in as a modifier
     because the track is divided into equal columns. */
  .roadmap::before {
    left: calc(50% / var(--roadmap-stops));
    right: calc(50% / var(--roadmap-stops));
    top: 13px;
    bottom: auto;
    width: auto;
    height: 2px;
    background: var(--grad-chart);
  }

  .roadmap__stop {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: var(--space-3);
    padding-inline: var(--space-2);
  }

  .roadmap__label {
    font-size: 14px;
  }
}

/* Optional buttons row at the foot of a content section, always centred on
   the page, which is why the markup sits outside any narrower reading column. */
.section-actions {
  margin-top: var(--space-7);
}

.journey__note {
  margin-top: var(--space-5);
  margin-inline: auto;
  font-size: var(--text-body-sm);
  color: var(--color-text-muted);
  max-width: var(--measure-body);
  text-align: center;
}

/* ==========================================================================
   12. CYCLE DIAGRAM
   ========================================================================== */

.cycle {
  margin: 0;
}

/* The ring needs width to be legible; below this the ordered list is shown. */
.cycle__svg {
  display: none;
}

.cycle__list {
  list-style: none;
  counter-reset: cycle;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.cycle__list-item {
  counter-increment: cycle;
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 12px 16px;
  background: var(--paper-050);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
}

.cycle__list-item::before {
  content: counter(cycle);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--grad-chart);
  color: var(--color-on-dark);
  font-size: 12px;
  font-weight: 700;
}

.section--muted .cycle__list-item {
  background: var(--color-white);
}

@media (min-width: 900px) {
  .cycle__svg {
    display: block;
    width: 100%;
    max-width: 760px;
    height: auto;
    margin-inline: auto;
  }

  .cycle__list {
    display: none;
  }
}

/* Gradient stops for the inline SVG charts, CSS, so they follow the tokens. */
.chart-stop--start {
  stop-color: var(--chart-grad-start);
}

.chart-stop--end {
  stop-color: var(--chart-grad-end);
}

/* Ring, chevrons and nodes all draw from one diagonal gradient in user
   space, so colour flows around the circle rather than restarting per shape.
   Stroke and fill are set on the elements, not here. */
.cycle__ring {
  fill: none;
  stroke-width: 2;
}

.cycle__arrow {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cycle__num {
  fill: var(--color-on-dark);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
}

.cycle__label {
  fill: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
}

.cycle__centre {
  fill: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ==========================================================================
   13. HOURS COMPARISON CHART
   ========================================================================== */

.hours {
  margin: 0;
}

.hours__svg {
  display: block;
  width: 100%;
  max-width: 760px;
  height: auto;
  margin-inline: auto;
  overflow: visible;
}

/* Segments take their fill from the chart gradient on the element itself. */

/* Text wears text tokens, never the series colour. */
.hours__row-label {
  fill: var(--color-text);
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
}

.hours__row-note,
.hours__tick {
  fill: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: 14px;
}

.hours__seg-label {
  fill: var(--color-on-dark);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
}

.hours__seg-hours {
  fill: var(--color-on-dark);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
}

.hours__total {
  fill: var(--color-text);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
}

/* Recessive axis and grid. */
.hours__axis,
.hours__gridline {
  stroke: var(--color-border);
  stroke-width: 1;
}

.hours__gridline {
  stroke-dasharray: 3 5;
}


/* ==========================================================================
   14. NUMBERED LIST ITEMS
   Only used where content is genuinely sequential.
   ========================================================================== */

.numbered-grid {
  list-style: none;
  padding: 0;
  margin: 0;
}

.numbered {
  position: relative;
}

.numbered__index {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 800;
  line-height: 1;
  /* Gradient numerals: colour is the point, so they are no longer faded back.
     The flat colour is the fallback where background-clip: text is missing. */
  background-image: var(--grad-numeral);
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--color-accent);
  -webkit-text-fill-color: transparent;
  display: block;
  margin-bottom: var(--space-2);
}

.numbered__title {
  font-family: var(--font-display);
  font-size: var(--text-h4);
  font-weight: 700;
  margin: 0 0 var(--space-2);
}

.numbered__body {
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  color: var(--color-text-muted);
  margin: 0;
}

/* ==========================================================================
   15. CARDS / PANELS
   Hairline border, generous padding, no shadow, per the editorial system.
   ========================================================================== */

.card {
  background: var(--paper-000);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--panel-padding);
}

.card--stat {
  text-align: left;
}

.card__figure {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: var(--space-1);
}

.card__label {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.card-grid {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 600px) {
  .card-grid--2,
  .card-grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .card-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .card-grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

.card-grid--pricing {
  max-width: 960px;
  margin-inline: auto;
  gap: var(--space-6);
}

/* Pricing */
.price__label {
  font-family: var(--font-body);
  font-size: var(--text-cta);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.price__figure {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: var(--space-1);
}

.price__unit {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text-muted);
}

.price__note {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-muted);
}

/* ==========================================================================
   16. TESTIMONIALS
   ========================================================================== */

.testimonial-featured {
  max-width: var(--measure-quote);
  margin-inline: auto;
  text-align: center;
}

.testimonial-featured__quote {
  font-family: var(--font-body);
  font-size: var(--text-pullquote);
  font-style: italic;
  font-weight: 500;
  line-height: 1.45;
  color: var(--color-text);
  margin: 0 auto var(--space-6);
  max-width: var(--measure-quote);
}

.testimonial-featured__rule {
  width: 40px;
  height: 1px;
  background: var(--color-border);
  border: 0;
  margin: 0 auto var(--space-5);
}

.testimonial__name {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
}

.testimonial__role {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  color: var(--color-text-muted);
}

.testimonial-columns {
  display: grid;
  gap: var(--space-8);
  max-width: var(--content-narrow);
  margin: var(--space-10) auto 0;
}

@media (min-width: 700px) {
  .testimonial-columns {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-10);
  }
}

.testimonial-column {
  position: relative;
}

.testimonial-column__mark {
  font-family: var(--font-display);
  font-size: 72px;
  line-height: 0.8;
  background-image: var(--grad-numeral);
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--color-primary);
  -webkit-text-fill-color: transparent;
  display: block;
  margin-bottom: var(--space-1);
}

.testimonial-column__quote {
  font-family: var(--font-body);
  font-size: 17px;
  font-style: italic;
  line-height: 1.7;
  color: var(--color-text-lead);
  margin: 0 0 var(--space-4);
}

/* ==========================================================================
   17. PULLQUOTE
   ========================================================================== */

.pullquote {
  border-left: 4px solid var(--color-primary);
  padding: var(--space-2) 0 var(--space-2) var(--space-6);
  margin: 0;
  max-width: var(--measure-quote);
}

.pullquote__text {
  font-family: var(--font-body);
  font-size: var(--text-pullquote);
  font-style: italic;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-text);
  margin: 0 0 var(--space-3);
  max-width: none;
}

.pullquote__attribution {
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ==========================================================================
   18. FAQ ACCORDION
   ========================================================================== */

.faq {
  border-top: 1px solid var(--color-border);
}

.faq__item {
  border-bottom: 1px solid var(--color-border);
}

.faq__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  text-align: left;
  background: none;
  border: 0;
  padding: var(--space-5) 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-text);
}

.faq__question:hover {
  color: var(--color-primary);
}

.faq__icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  transition: transform var(--transition);
}

.faq__question[aria-expanded='true'] .faq__icon {
  transform: rotate(180deg);
}

.faq__answer {
  display: none;
  padding: 0 0 var(--space-5);
}

.faq__answer.is-open {
  display: block;
}

.faq__answer p {
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  color: var(--color-text-muted);
  margin: 0;
  max-width: var(--measure-body);
}

/* ==========================================================================
   19. WORKSHOP ACCORDION
   One panel per programme. The open panel carries the logo gradient along
   its top edge, the brand's colour flow, used as a marker, not a fill.
   ========================================================================== */

.workshops {
  border-top: 1px solid var(--color-border);
}

.workshop {
  position: relative;
  border-bottom: 1px solid var(--color-border);
}

.workshop::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--grad-brand);
  opacity: 0;
  transition: opacity var(--transition);
}

.workshop.is-open::before {
  opacity: 1;
}

/* Clears the sticky header when "See the workshops" jumps here. */
#workshops {
  scroll-margin-top: 72px;
}

.workshop__heading {
  margin: 0;
}

.workshop__trigger {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    'index name icon'
    '. season .';
  align-items: center;
  column-gap: var(--space-4);
  row-gap: 6px;
  padding: var(--space-6) 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: var(--color-text);
}

.workshop__index {
  grid-area: index;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-primary);
}

.workshop__name {
  grid-area: name;
  font-family: var(--font-display);
  font-size: var(--text-h4);
  font-weight: 700;
  line-height: 1.25;
  transition: color var(--transition);
}

.workshop__season {
  grid-area: season;
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.workshop__icon {
  grid-area: icon;
  width: 20px;
  height: 20px;
  color: var(--color-primary);
  transition: transform var(--transition);
}

.workshop__trigger:hover .workshop__name {
  color: var(--color-primary);
}

.workshop__trigger[aria-expanded='true'] .workshop__icon {
  transform: rotate(180deg);
}

@media (min-width: 768px) {
  .workshop__trigger {
    grid-template-columns: 48px 1fr auto auto;
    grid-template-areas: 'index name season icon';
    column-gap: var(--space-6);
    padding: var(--space-7) 0;
  }

  .workshop__name {
    font-size: var(--text-h3);
  }
}

.workshop__panel {
  display: none;
  padding-bottom: var(--space-10);
}

.workshop__panel.is-open {
  display: block;
}

/* Text first in source, so the phone view reads before it looks. */
.workshop__layout {
  display: grid;
  gap: var(--space-8);
}

@media (min-width: 900px) {
  .workshop__layout {
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--space-12);
    align-items: start;
    padding-left: 72px;
  }

  .workshop__layout--text {
    grid-template-columns: 1fr;
  }
}

.workshop__copy {
  max-width: var(--measure-body);
}

.workshop__lead {
  font-size: var(--text-standfirst);
  line-height: 1.5;
  color: var(--color-text);
  margin-bottom: var(--space-5);
}

.workshop__text {
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  color: var(--color-text-lead);
}

.workshop__points {
  list-style: none;
  margin: var(--space-6) 0;
  padding: var(--space-5) 0 0;
  border-top: 1px solid var(--color-border);
  display: grid;
  gap: var(--space-2);
}

.workshop__points li {
  position: relative;
  padding-left: 28px;
  font-size: var(--text-body-sm);
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-text);
}

.workshop__points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 14px;
  height: 3px;
  border-radius: 2px;
  background: var(--grad-brand);
}

.workshop__when {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--text-body-sm);
  color: var(--color-text-lead);
  margin-bottom: 0;
}

.workshop__when-label {
  font-size: var(--text-eyebrow);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.workshop__actions {
  margin-top: var(--space-7);
}

.workshop__figure {
  margin: 0;
}

.workshop__figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-md);
}

/* ==========================================================================
   20. WORKSHOP CALENDAR
   The chart gradient on a shared Jan–Dec axis, against a pale tone for
   'also runs'. Every row states its timing in words as well, so colour is
   never the only signal.
   ========================================================================== */

.calendar {
  margin: 0;
  --calendar-label: 300px;
  --calendar-any: var(--chart-soft);
}

.calendar__months,
.calendar__track {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 3px;
}

.calendar__months {
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

.calendar__month {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-text-muted);
}

.calendar__rows {
  list-style: none;
  margin: 0;
  padding: 0;
}

.calendar__row {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
}

.section--muted .calendar__months,
.section--muted .calendar__row {
  border-color: var(--color-border-on-muted);
}

.calendar__label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.calendar__name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--color-text);
}

.calendar__note {
  font-size: 14px;
  color: var(--color-text-lead);
}

.calendar__track {
  align-items: center;
}

.calendar__cell {
  height: 16px;
}

.calendar__cell--main {
  background-image: var(--grad-chart);
  /* One gradient across the whole year: each cell shows its twelfth. */
  background-size: 1200% 100%;
}

.calendar__cell:nth-child(1) {
  background-position: 0.0% 0;
}

.calendar__cell:nth-child(2) {
  background-position: 9.09% 0;
}

.calendar__cell:nth-child(3) {
  background-position: 18.18% 0;
}

.calendar__cell:nth-child(4) {
  background-position: 27.27% 0;
}

.calendar__cell:nth-child(5) {
  background-position: 36.36% 0;
}

.calendar__cell:nth-child(6) {
  background-position: 45.45% 0;
}

.calendar__cell:nth-child(7) {
  background-position: 54.55% 0;
}

.calendar__cell:nth-child(8) {
  background-position: 63.64% 0;
}

.calendar__cell:nth-child(9) {
  background-position: 72.73% 0;
}

.calendar__cell:nth-child(10) {
  background-position: 81.82% 0;
}

.calendar__cell:nth-child(11) {
  background-position: 90.91% 0;
}

.calendar__cell:nth-child(12) {
  background-position: 100.0% 0;
}


.calendar__cell--any {
  background: var(--calendar-any);
}

.calendar__cell.is-start {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.calendar__cell.is-end {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

.calendar__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-5);
  font-size: 14px;
  color: var(--color-text-lead);
}

.calendar__key {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.calendar__swatch {
  width: 24px;
  height: 12px;
  border-radius: 6px;
}

.calendar__swatch--main {
  background: var(--grad-chart);
}

.calendar__swatch--any {
  background: var(--calendar-any);
}

@media (min-width: 900px) {
  .calendar__months {
    margin-left: calc(var(--calendar-label) + var(--space-6));
  }

  .calendar__row {
    grid-template-columns: var(--calendar-label) 1fr;
    gap: var(--space-6);
    align-items: center;
    padding: var(--space-5) 0;
  }
}

/* ==========================================================================
   21. STATEMENT
   One claim over a photograph. Same scrim treatment as the homepage hero, at
   section height rather than viewport height.
   ========================================================================== */

.statement {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 320px;
  overflow: hidden;
  /* Clips the pinned photograph to this section. Without it the image would
     stay fixed to the viewport for the whole page. clip-path does not create
     a containing block, which is what keeps the fixed layer working. */
  clip-path: inset(0);
}

/* Pinned, so the copy scrolls over a stationary photograph, the same
   treatment as the homepage hero, not scroll-rate parallax. */
.statement__media {
  position: fixed;
  inset: 0;
  /* Placeholder, on the wrapper for the same reason as .hero-bg. */
  background-color: var(--photo-base);
}

.statement__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 50%;
}

.statement__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--scrim-hero);
}

.statement .wrap {
  position: relative;
  z-index: 1;
  width: 100%;
}

.statement__body {
  /* Centred on the page: the photograph runs full width, so anchoring the
     claim to the left edge left it adrift in the frame. */
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}

.statement__claim {
  font-family: var(--font-display);
  font-size: var(--text-h2-sm);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--color-on-dark);
  margin: 0;
  max-width: none;
}

.statement__support {
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  color: var(--color-on-dark-muted);
  margin: var(--space-4) auto 0;
  max-width: 52ch;
}

.statement__action {
  margin-top: var(--space-6);
}

/* The group is a flex row, so it centres with justify-content, not text-align. */
.statement__action .btn-group {
  justify-content: center;
}

@media (min-width: 900px) {
  .statement {
    min-height: 420px;
  }
}

/* ==========================================================================
   22. CTA BANNER
   ========================================================================== */

.cta {
  text-align: center;
}

/* Banner over a photograph: pinned and scrimmed exactly like the hero and the
   statement sections, so every full-bleed image on the site reads the same. */
.cta-banner--media {
  position: relative;
  overflow: hidden;
  clip-path: inset(0);
}

.cta-banner__media {
  position: fixed;
  inset: 0;
  /* Placeholder, on the wrapper for the same reason as .hero-bg. */
  background-color: var(--photo-base);
}

.cta-banner__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cta-banner__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--scrim-hero);
}

.cta-banner--media .wrap {
  position: relative;
  z-index: 1;
}

.cta__title {
  font-size: var(--text-h2-sm);
  color: var(--color-on-dark);
  margin: 0 0 var(--space-3);
}

.cta__body {
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--color-on-dark-muted);
  max-width: 520px;
  margin: 0 auto var(--space-8);
}

/* ==========================================================================
   23. NEWS
   ========================================================================== */

.news-list {
  display: flex;
  flex-direction: column;
}

.news-item {
  display: grid;
  gap: var(--space-3);
  padding-block: var(--space-7);
  border-top: 1px solid var(--color-border);
}

@media (min-width: 768px) {
  .news-item {
    grid-template-columns: 160px 1fr;
    gap: var(--space-6);
  }
}

.news-item__date {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-muted);
  padding-top: 4px;
}

.news-item__tag {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-purple);
  margin-bottom: var(--space-2);
}

.news-item__title {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 var(--space-2);
}

.news-item__title a {
  color: var(--color-text);
}

.news-item__title a:hover {
  color: var(--color-primary);
}

.news-item__excerpt {
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  line-height: 1.75;
  color: var(--color-text-lead);
  margin: 0;
  max-width: 680px;
}

.news-empty {
  padding-block: var(--space-10);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

/* Pagination */
.pagination {
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-family: var(--font-body);
  font-size: 15px;
}

.pagination .page-numbers {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--ink-900);
}

.pagination .page-numbers.current {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-dark);
}

/* ==========================================================================
   24. SINGLE POST / PAGE CONTENT
   ========================================================================== */

.entry {
  padding-top: var(--section-hero-top);
  padding-bottom: var(--section-primary);
}

.entry__meta {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

.entry__title {
  margin: 0 0 var(--space-6);
  max-width: 800px;
}

.entry__thumb {
  margin-bottom: var(--space-8);
}

.entry__thumb img {
  width: 100%;
  border-radius: var(--radius-md);
}

.entry__content {
  max-width: var(--measure-body);
}

.entry__content h2 {
  font-size: var(--text-h2-sm);
  margin: var(--space-10) 0 var(--space-4);
}

.entry__content h3 {
  margin: var(--space-8) 0 var(--space-3);
}

.entry__content p,
.entry__content ul,
.entry__content ol {
  margin-bottom: var(--space-5);
}

.entry__content blockquote {
  border-left: 4px solid var(--color-primary);
  padding-left: var(--space-6);
  margin: var(--space-8) 0;
  font-style: italic;
  font-size: var(--text-pullquote);
  line-height: 1.4;
}

.entry__content img {
  border-radius: var(--radius-md);
  margin-block: var(--space-6);
}

.entry__nav {
  display: flex;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  font-size: 15px;
}

/* ==========================================================================
   25. CONTACT
   ========================================================================== */

.contact-grid {
  display: grid;
  gap: var(--space-10);
}

@media (min-width: 900px) {
  .contact-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.contact-details {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin-bottom: var(--space-7);
}

.contact-details__label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-cta);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-purple);
  margin-bottom: var(--space-1);
}

.contact-details__note {
  margin: var(--space-1) 0 0;
  font-size: var(--text-body-sm);
  color: var(--color-text-muted);
}

.contact-details__value {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-900);
}

/* Plain links only. A button in this column keeps its own colours. */
.contact-details__value a:not(.btn) {
  color: var(--ink-900);
}

.contact-details__value a:not(.btn):hover {
  color: var(--color-primary);
}

.social-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.social-row a {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
}

.social-row a:hover {
  color: var(--ink-900);
  border-color: var(--ink-900);
}

.contact-map {
  margin-top: var(--space-7);
}

.contact-map iframe,
.contact-map img {
  width: 100%;
  height: 220px;
  border: 0;
  border-radius: var(--radius-md);
  object-fit: cover;
}

/* Enquiry form, Elfsight widget container */
.enquiry-form__fallback {
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  color: var(--color-text-lead);
}

/* Form */
.form__title {
  font-family: var(--font-display);
  font-size: var(--text-h4);
  font-weight: 700;
  margin: 0 0 var(--space-5);
}

.form__field {
  margin-bottom: var(--space-5);
}

.form__label {
  display: block;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-1);
}

.form__input,
.form__textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-text);
  background: var(--paper-000);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  transition: border-color var(--transition);
}

.form__input:focus,
.form__textarea:focus {
  border-color: var(--color-primary);
  outline: none;
}

.form__textarea {
  resize: vertical;
  min-height: 120px;
}

.form__submit {
  width: 100%;
}

.form__note {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-text-muted);
  margin-top: var(--space-3);
}

.form__honeypot {
  position: absolute;
  left: -9999px;
}

.form-message {
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-5);
  font-size: 15px;
}

.form-message--success {
  background: #e8f2ea;
  border: 1px solid #b6d5bd;
  color: #1f5130;
}

.form-message--error {
  background: #f7e9e9;
  border: 1px solid #ddb6b6;
  color: #7a2626;
}

.form__error {
  display: block;
  font-size: 13px;
  color: #a33232;
  margin-top: 4px;
}

/* ==========================================================================
   26. FOOTER
   ========================================================================== */

.site-footer {
  background: var(--color-footer-bg);
  color: var(--color-footer-text);
}

.site-footer a {
  color: var(--color-footer-text);
}

.site-footer a:hover {
  color: var(--color-on-dark);
}

.site-footer__inner {
  max-width: var(--content-max);
  margin-inline: auto;
  padding: var(--section-footer-top) var(--gutter) var(--space-7);
  display: grid;
  gap: var(--space-8);
}

@media (min-width: 640px) {
  .site-footer__inner {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .site-footer__inner {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: var(--space-8);
  }
}

.site-footer__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 18px;
  color: var(--color-footer-text);
}

.site-footer__logo {
  max-height: 46px;
  width: auto;
}

.site-footer__brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.04em;
}

.site-footer__blurb {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-footer-muted);
  max-width: 320px;
  margin: 0 0 var(--space-4);
}

.site-footer__label {
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-footer-label);
  margin-bottom: var(--space-3);
}

.site-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.site-footer__list a {
  font-family: var(--font-body);
  font-size: 15px;
}

.site-footer__contact {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
}

.site-footer__hours {
  color: var(--color-footer-meta);
  font-size: 14px;
}

.site-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__social a {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-footer-muted);
  border: 1px solid var(--color-footer-chip);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
}

.site-footer__social a:hover {
  border-color: var(--color-footer-muted);
}

/* Moodle button in the footer, light on dark, distinct from Apply Now */
.site-footer .btn--moodle {
  display: inline-block;
  background: var(--paper-000);
  color: var(--ink-900);
  font-family: var(--font-body);
  font-size: var(--text-cta);
  font-weight: 600;
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--paper-000);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* White is the resting state now, so hover moves to the brand colour rather
   than to another white. */
.site-footer .btn--moodle:hover,
.site-footer .btn--moodle:focus-visible {
  background: var(--btn-brand);
  border-color: var(--btn-brand);
  color: var(--color-on-dark);
}

.site-footer__bar {
  max-width: var(--content-max);
  margin-inline: auto;
  padding: var(--space-5) var(--gutter);
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-footer-meta);
}

/* Meta items on one line, with a hairline running out to the right edge. */
.site-footer__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.site-footer__divider {
  color: var(--color-footer-rule);
}

/* Takes the leftover width, so the rule ends where the row ends. */
.site-footer__rule {
  flex: 1 1 60px;
  height: 1px;
  min-width: 40px;
  background: var(--color-footer-rule);
}

.site-footer__credit {
  /* The global p rule caps body copy at the reading measure; this line has to
     reach the right edge of the bar instead. */
  max-width: none;
  margin: var(--space-4) 0 0;
  text-align: right;
  color: var(--color-footer-meta);
}

.site-footer__credit a {
  color: var(--color-footer-text);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.site-footer__credit a:hover,
.site-footer__credit a:focus-visible {
  color: var(--color-on-dark);
}

/* ==========================================================================
   27. 404
   ========================================================================== */

.error-404 {
  padding-block: var(--section-hero-top) var(--section-primary);
  text-align: center;
}

.error-404__code {
  font-family: var(--font-display);
  font-size: 96px;
  font-weight: 800;
  line-height: 1;
  color: var(--color-primary);
  opacity: 0.18;
  margin-bottom: var(--space-5);
}

.error-404 p {
  margin-inline: auto;
  color: var(--color-text-muted);
  margin-bottom: var(--space-8);
}

/* ==========================================================================
   28. MOTION
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  /* Drop the pinned backdrops into the flow, they read as motion. */
  .hero-bg,
  .statement__media,
  .cta-banner__media {
    position: absolute;
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms;
    transition-duration: 0.01ms;
  }
}