/*
Theme Name:  Atomix Educational Trust
Theme URI:   https://atomixeducationaltrust.ac.uk
Description: Custom block theme for Prior Pursglove College and Stockton Sixth Form College. Part of Atomix Educational Trust. Built from the master-template.html source of truth. Do not redesign here.
Version: 1.37.8
Author:      Atomix Educational Trust
Text Domain: atomix
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 8.1
*/

/* ============================================================
   BRAND TOKENS
   One set of custom property names.
   Switching brand = switching the class on <body>.
   Applied via functions.php body_class filter.
============================================================ */

/* SSFC — Stockton Sixth Form College */
:root,
.brand-ssfc {
  /* --primary-fill is the colour as a fill: buttons, bands, rules.
     --primary is the same colour used as TEXT, and has to clear
     4.5:1 on its own ground. Split on 4 September 2026 because the
     two jobs need different values on a dark ground.

     Stockton's ground is light. The brand orange as text on #FFFAF7
     measures 2.85:1 and fails AA, so text uses #BC1C58, the colour
     already in use for links, at 5.88:1. Fills keep #FF6340.
     5 September 2026. */
  --primary-fill:   #FF6340;
  --primary:        #BC1C58;
  /* The colour as text on white. .btn-white sits on a coloured band
     with a white face, so neither the fill nor the page text token
     suits it. 5 September 2026. */
  --primary-on-white: #BC1C58;
  /* The colour as text on a dark band. Added 8 September 2026, job 2a.
     The event strip sits on #1E1530, and its links are body copy as far
     as the cascade is concerned: they live in a <p>, so
     #main-content :where(p, ...) a[href] at 1-0-1 outranks
     .event-archive-strip__link at 0-1-0 and painted them --link, which is
     #BC1C58 on Stockton and measured 2.86:1. #F27CA6 measures 6.81:1. */
  --primary-on-dark: #F27CA6;
  --primary-dk:     #E04D28;
  --secondary:      #E8266E;
  /* The pink as small text. #E8266E measures 4.11:1 on #FFFAF7 and 3.86:1
     on #FFF1EC, so it fails AA at label size on Stockton's own grounds.
     #C4157A, the deep magenta already in the palette as --secondary-fill,
     measures 5.43:1 on #FFFAF7, 5.10:1 on #FFF1EC and 4.77:1 on #FFE8DC.
     --secondary keeps #E8266E for rules, borders, bars and anything set
     at 24px or above, where it qualifies as large text and passes.
     6 September 2026, job 23. Closes server outstanding 37. */
  --secondary-text: #C4157A;
  --dark:           #1E1530;
  --bg:             #FFFAF7;
  --bg-mid:         #FFF1EC;
  --bg-deep:        #FFE8DC;
  --ink:            rgba(30, 21, 48, 0.82);
  /* Secondary and metadata text were rgba(30,21,48,0.55) and 0.38, which
     measure 3.9:1 and 2.35:1 and fail AA. They are now solid values that
     clear 4.5:1 on every light ground either college uses, and keep the
     hierarchy: --ink 9.95:1, --ink-mid 5.5 to 6.7:1, --ink-light 4.6 to
     5.6:1. 6 September 2026. */
  --ink-mid:        #61596B;
  --ink-light:      #6D6575;
  --border:         rgba(30, 21, 48, 0.1);
  --border-light:   rgba(30, 21, 48, 0.06);

  /* Text sitting on a solid brand-colour band. Stockton's fill is #FF6340,
     where white measures 2.95:1, so the band takes the dark ink at 5.90:1
     and a softer tint of it at 4.71:1. See --band-ink on .brand-ppc, which
     is the mirror image. 6 September 2026. */
  --band-ink:       #1E1530;
  --band-ink-soft:  #422233;

  /* Text on a button or control filled with this brand's own colour. Unlike
     --band-ink these are never re-scoped, because a .btn-primary keeps its
     orange fill wherever it sits, including inside a dark band.
     --primary-fill-hover replaces --primary-dk (#E04D28) for a hover state,
     because neither white (3.99:1) nor the dark ink (4.37:1) passes on it.
     6 September 2026, job 5. */
  --on-primary-fill:     #1E1530;   /* 5.90:1 on #FF6340 */
  --primary-fill-hover:  #E86A45;   /* 5.46:1 with --on-primary-fill */

  /* The secondary pink split into a fill and a text colour, the same way
     --primary did on 4 September 2026. #E8266E cannot carry text at all:
     white measures 4.26:1 on it and the dark ink 4.09:1, and there is no
     third colour that passes, so it could not be fixed by changing the
     text. --secondary-fill is therefore a darker pink, and --secondary
     keeps #E8266E for text and accents on a light ground.
     6 September 2026, server outstanding 37. */
  --secondary-fill:      #C4157A;
  --on-secondary:        #FFFFFF;   /* 5.62:1 on #C4157A */
  --secondary-hover:     #A81269;   /* 7.11:1 with white */

  /* The fill a .cta-banner paints at every width when it carries no colour
     modifier. Before 6 September 2026 the desktop rule made .cta-panel
     transparent and relied on a background image that is often absent, so
     the band rendered white on white at 1280. */
  --cta-band:       var(--primary-fill);
}

/* PPC — Prior Pursglove College
   IMPORTANT: Primary is #8229F0 — do NOT revert to #5C2D91 */
.brand-ppc {
  /* Prior is dark first. The brand purple as text on #1E1530
     measures 2.92:1, which fails AA for body and for large text, so
     text uses a tint of it at 6.77:1. Fills keep the brand purple,
     where white on it measures 5.96:1 and passes. */
  --primary-fill:   #8229F0;
  --primary:        #B98CF7;
  --primary-on-white: #8229F0;
  /* See the Stockton block. Prior's --link on a content page is #8229F0,
     which measures 2.92:1 on #1E1530.

     Consolidated 8 September 2026, server outstanding 80. This held
     #B98BF7, 6.72:1, one digit off --primary's #B98CF7 doing the same
     job. #B98CF7 measures 6.77:1 on the one ground this token is used
     on, so it is better as well as already in the palette, and the
     near-duplicate is retired.

     It is written as a literal and not as var(--primary) on purpose:
     body.brand-ppc:not(.is-front-page) resets --primary to #8229F0, and
     the event archive strip sits on a content page, so var(--primary)
     would resolve to 2.92:1 there. */
  --primary-on-dark: #B98CF7;
  --primary-dk:     #6A1FCC;
  --secondary:      #E0157A;
  /* The magenta as small text, split by ground on 7 September 2026, the same
     way --primary was on 4 September. Two things were wrong.

     The brand value measures 3.78:1 on Prior's own #1E1530, which is the
     fault job 23 fixed for Stockton and left open here. And the note this
     comment replaces claimed it "passes on .section-light": it does not.
     .section-light is #F5F3F0, where #E0157A measures 4.16:1, and
     --bg-deep #EDE9E6 is 3.82:1. Only pure white passed, at 4.61:1.

     One value cannot serve both. Clearing 4.5:1 on #FFFFFF caps the
     luminance at 0.1833 and clearing it on #1E1530 needs at least 0.2211,
     and those two ranges do not meet. So Prior splits, exactly as --primary
     did with #B98CF7.

     This block is the dark-first default. #F2609F is the brand hue
     lightened: 5.77:1 on #1E1530, 5.32:1 on #261B3D and 4.76:1 on #2E2250.
     It is a nudge off #F0559A, which reached 5.37:1 on #1E1530 but only
     4.43:1 on #2E2250 and would have failed the deepest ground.

     --secondary and --secondary-fill are untouched. Every band, rule,
     border, bar and fill keeps #E0157A. */
  --secondary-text: #F2609F;
  --dark:           #1E1530;
  --bg:             #1E1530;   /* dark-first site */
  --bg-mid:         #261B3D;
  --bg-deep:        #2E2250;
  --ink:            rgba(245, 243, 240, 0.85);
  /* Was rgba(245,243,240,0.55) and 0.35, the second of which measures
     3.01:1 on #1E1530 and 2.88:1 on #2E2250. Solid now, and both clear
     4.5:1 on all three Prior dark grounds. 6 September 2026. */
  --ink-mid:        #A59FB0;
  --ink-light:      #9791A5;
  --border:         rgba(245, 243, 240, 0.1);
  --border-light:   rgba(245, 243, 240, 0.06);

  /* Prior's fill is #8229F0, where white measures 5.96:1 and passes, so
     the band keeps white and takes a purple-tinted soft value at 4.70:1. */
  --band-ink:       #FFFFFF;
  --band-ink-soft:  #EDDFFD;

  --on-primary-fill:     #FFFFFF;   /* 5.96:1 on #8229F0 */
  --primary-fill-hover:  #6A1FCC;   /* 7.83:1 with white */

  /* Prior's #E0157A passes with white, so its fill is the brand value and
     nothing here changes colour. The token exists so one set of component
     rules serves both colleges. 6 September 2026. */
  --secondary-fill:      #E0157A;
  --on-secondary:        #FFFFFF;   /* 4.61:1 on #E0157A */
  --secondary-hover:     #C4157A;   /* 5.62:1 with white */

  /* Prior's unmodified band is the magenta secondary, not the purple. */
  --cta-band:       var(--secondary-fill);
}

/* PPC light sections — applied with .section-light modifier */
.brand-ppc .section-light {
  --primary:   #8229F0;   /* light ground, the brand purple passes */
  /* #C4157A, already in the palette as Stockton's --secondary-text: 5.08:1
     on #F5F3F0 and 4.66:1 on #EDE9E6, where the brand #E0157A measured
     4.16:1 and 3.82:1 and failed both. 7 September 2026. */
  --secondary-text: #C4157A;
  --bg:        #F5F3F0;
  --bg-mid:    #EDE9E6;
  --ink:       rgba(30, 21, 48, 0.85);
  --ink-mid:   #61596B;
  --ink-light: #6D6575;
  --border:    rgba(30, 21, 48, 0.1);
}

/* PPC content pages — white base (nav keeps its own explicit dark bg) */
body.brand-ppc:not(.is-front-page) {
  --primary:     #8229F0;   /* light ground, the brand purple passes */
  /* 5.62:1 on #FFFFFF, 5.08:1 on #F5F3F0, 4.66:1 on #EDE9E6. The brand
     value cleared only the white, at 4.61:1. 7 September 2026. */
  --secondary-text: #C4157A;
  --bg:          #FFFFFF;
  --bg-mid:      #F5F3F0;
  --bg-deep:     #EDE9E6;
  --ink:         rgba(30, 21, 48, 0.82);
  --ink-mid:     #61596B;
  --ink-light:   #6D6575;
  --border:      rgba(30, 21, 48, 0.1);
  --border-light: rgba(30, 21, 48, 0.06);
}


/* A dark band inside an otherwise light Prior page needs the tint again.
   .site-footer joined the list on 6 September 2026: it is #1E1530 on every
   page, but body.brand-ppc:not(.is-front-page) had already reset --primary
   to #8229F0, which measures 2.92:1 there. The tint measures 6.77:1. The
   Stockton rule below has always listed its footer. */
.brand-ppc .site-footer,
.brand-ppc .atomix-section.is-dark,
.brand-ppc .atomix-callout {
  --primary: #B98CF7;
  /* --secondary-text joins it, 7 September 2026. The body rule above resets
     the token for the light page, and the list marker inside a dark section
     would otherwise render #C4157A at 3.10:1. #F2609F is 5.77:1. */
  --secondary-text: #F2609F;
}

/* Stockton is the mirror image. Its page token is tuned for a light
   ground and measures 2.86:1 on #1E1530, so the dark bands take the
   brand orange back, which measures 5.90:1 there. */
.brand-ssfc .site-footer,
.brand-ssfc .atomix-section.is-dark,
.brand-ssfc .atomix-callout,
.brand-ssfc .cta-banner--dark,
.brand-ssfc .cta-banner--deep-purple,
.brand-ssfc .cta-banner--black { --primary: #FF6340; }


/* ============================================================
   BAND INK MAP
   --band-ink is the text colour for whatever solid band the element is
   sitting inside, and --band-ink-soft its secondary. The brand blocks
   above set the default from each college's --primary-fill. The rules
   below correct the cases where a band is painted from something other
   than --primary-fill, so the token always matches the ground actually
   rendered. Every pair clears 4.5:1. Added 6 September 2026.
============================================================ */

/* Dark grounds: #1E1530 and #2E2250.
   The two home heroes joined this list on 7 September 2026. A hero is a
   photograph under a heavy #1E1530 scrim, 0.9 on Stockton and 0.97 on
   Prior, so it is a dark band whatever the picture. It was not in the map,
   so --band-ink fell through to the brand default, and on Stockton that is
   #1E1530: the "Book an open event" outline button rendered dark ink on a
   dark photograph at 1.00:1. Prior's default was already white, which is
   why the fault read as Stockton-only. */
.hero-ssfc,
.hero-ppc,
.site-footer,
.atomix-section.is-dark,
.atomix-callout,
.brand-ppc .oe-panel,
.brand-ppc .sidebar-apply,
.brand-ssfc .site-footer,
.cta-banner--dark,
.cta-banner--deep-purple,
.cta-banner--black,
.cta-banner--gradient-dark {
  --band-ink: #FFFFFF;        /* 17.43:1 on #1E1530, 14.38:1 on #2E2250 */
  --band-ink-soft: #A59FB0;   /*  6.93:1 on #1E1530,  5.60:1 on #2E2250 */
}

/* The trust's dark ground is #00353A, not #1E1530, so the pair above does not
   describe it. #A59FB0 measures 5.21:1 on #00353A, which passes, but it is a
   purple-grey mixed for the colleges' aubergine and reads as dirty against
   teal. The trust soft ink is a tint of its own hue. Added 18 September 2026.
   The dark .cta-banner variants are in the list because they are painted from
   --dark, which is now #00353A on this brand. */
.brand-trust .site-footer,
.brand-trust .atomix-section.is-dark,
.brand-trust .atomix-callout,
.brand-trust .cta-banner--dark,
.brand-trust .cta-banner--black,
.brand-trust .cta-banner--gradient-dark {
  --band-ink: #FFFFFF;        /* 13.37:1 on #00353A */
  --band-ink-soft: #C7E4E7;   /*  9.98:1 on #00353A */
  --primary: #A6E7ED;         /*  9.73:1 on #00353A */
  --secondary-text: #A6E7ED;
}

/* Prior purple, #8229F0. */
.cta-banner--purple,
.cta-banner--gradient-purple,
.brand-ppc .cta-banner--primary {
  --band-ink: #FFFFFF;        /* 5.96:1 */
  --band-ink-soft: #EDDFFD;   /* 4.70:1 */
}

/* Deep magenta, #C4157A. This is also Stockton's --secondary-fill since
   6 September 2026, so every Stockton band painted from that token joins
   the list. */
.cta-banner--magenta,
.cta-banner--gradient-magenta,
.brand-ssfc .marquee-strip,
.brand-ssfc .sidebar-event--preview-day,
.brand-ssfc .cta-banner--secondary,
.brand-ssfc .cta-banner--gradient-secondary {
  --band-ink: #FFFFFF;        /* 5.62:1 */
  --band-ink-soft: #F9E6F1;   /* 4.72:1 */
}

/* Stockton orange, #FF6340. White measures 2.95:1 here, so the band takes
   the dark ink. The fill is unchanged. 6 September 2026, job 5. */
.cta-banner--gradient-orange,
.brand-ssfc .cta-banner--primary {
  --band-ink: #1E1530;        /* 5.90:1 */
  --band-ink-soft: #422233;   /* 4.71:1 */
}

/* Prior's own magenta, #E0157A, is the unmodified band on Prior. White
   clears 4.5:1 there by 0.11, and no lighter value passes below it, so the
   soft token repeats the ink rather than dropping under the bar. The
   eyebrow is still distinguished by size, weight and its rule. */
.brand-ppc .cta-banner:not([class*="cta-banner--"]),
.brand-ppc .cta-banner--secondary,
.brand-ppc .cta-banner--gradient-secondary,
.brand-ppc .marquee-strip,
.brand-ppc .sidebar-event--preview-day {
  --band-ink: #FFFFFF;        /* 4.61:1 */
  --band-ink-soft: #FFFFFF;
}

/* ============================================================
   RESET
============================================================ */

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

html {
  font-size: 100%; /* 1rem = 16px — never change */
  scroll-behavior: smooth;
}

body {
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }


/* ============================================================
   ACCESSIBILITY — WCAG 2.1 AA from line one
============================================================ */

.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  background: var(--dark);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.5rem 1rem;
  z-index: 9999;
  transition: top 0.2s;
}
.skip-link:focus { top: 0; }

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

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

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


/* ============================================================
   TYPOGRAPHY
   DM Sans only. All sizes in rem. No px for text or layout.
============================================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: 'DM Sans', sans-serif;
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -0.025em;
  color: var(--ink);
}

/* HEADING SCALE, set 6 September 2026, job 13.
   Sizes are min at 375 and max reached at 1280.

     h1  44 -> 76.8   display page title, unchanged
     h2  28 -> 40     was 32 -> 51.2, which beat a .split-heading h1
     h3  20 -> 26     was 24 -> 32, which beat .main-content-area h2
     h4  18 -> 18     was 20, which beat the new h3 min

   The component overrides that sit on this scale are listed beside
   their own rules: .split-heading, .cta-title, .oe-title,
   .main-content-area h2, .atomix-section h2 and .td-term__name. */
h1 { font-size: clamp(2.75rem, 6vw, 5rem); }
h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); line-height: 1.05; }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.625rem); line-height: 1.1; }
h4 { font-size: 1.125rem; font-weight: 700; line-height: 1.2; }
h5 { font-size: 1rem; font-weight: 700; letter-spacing: 0; }

p { line-height: 1.75; margin-bottom: 1.25rem; }
p:last-child { margin-bottom: 0; }

/* Eyebrow / section label */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--primary);
}
.eyebrow::before {
  content: '';
  display: block;
  width: 2rem;
  height: 2px;
  background: var(--primary-fill);
  flex-shrink: 0;
}

/* Muted eyebrow (on dark bg) */
.eyebrow-muted {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--ink-mid);
}
.eyebrow-muted::before {
  content: '';
  display: block;
  width: 1.5rem;
  height: 1px;
  background: var(--ink-light);
  flex-shrink: 0;
}

/* Eyebrow on coloured/dark section background */
.eyebrow-light {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  color: rgba(255, 255, 255, 0.65);
}
.eyebrow-light::before {
  content: '';
  display: block;
  width: 2rem;
  height: 1px;
  background: rgba(255, 255, 255, 0.4);
  flex-shrink: 0;
}

/* Section header pattern */
.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 3rem;
  gap: 2rem;
  flex-wrap: wrap;
}

.section-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--primary);
  border-bottom: 1px solid var(--primary-fill);
  padding-bottom: 0.1rem;
  white-space: nowrap;
  transition: opacity 0.2s;
}
.section-link:hover { opacity: 0.7; }


/* ============================================================
   BUTTONS
   border-radius: 2px max. No pill shapes. Uppercase tracking.
============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.75rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: none;
  line-height: 1;
  border: 1.5px solid transparent;
  border-radius: 2px;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s, border-color 0.2s, opacity 0.2s, transform 0.1s;
  cursor: pointer;
}
.btn:active { transform: scale(0.97); }

.btn-sm {
  padding: 0.6rem 1.3rem;
  font-size: 0.78rem;
}

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

.btn-secondary {
  background: var(--secondary-fill);
  color: var(--on-secondary);
  border-color: var(--secondary-fill);
}
/* Was opacity: 0.88, which lowered the ratio of an already tight pair. */
.btn-secondary:hover,
.btn-secondary:focus-visible {
  background: var(--secondary-hover);
  border-color: var(--secondary-hover);
  color: var(--on-secondary);
}

/* Outline on light background */
.btn-outline {
  background: transparent;
  color: var(--dark);
  border-color: rgba(30, 21, 48, 0.22);
}
.btn-outline:hover { border-color: var(--dark); }

/* Outline on a dark or coloured band.
   Was rgba(245,243,240,0.85), which measures 11.58:1 on #1E1530 but only
   3.29:1 on Prior's magenta band, which is what /pursglove/apply/ carries.
   It now takes --band-ink, so it follows whichever ground it is sitting on.
   6 September 2026. */
.btn-outline-light {
  background: transparent;
  color: var(--band-ink);
  border-color: color-mix(in srgb, var(--band-ink) 40%, transparent);
}
.btn-outline-light:hover,
.btn-outline-light:focus-visible {
  color: var(--band-ink);
  border-color: var(--band-ink);
}

/* In a hero the button sits on a photograph rather than a flat band, so the
   40% border above can land on a bright patch. Inside a hero it is a solid
   2px white rule. The label needs nothing further: white over the scrim is
   17.43:1 at the darkest point of the gradient and 13.19:1 against a wholly
   white photograph under Stockton's 0.9, so a ground behind the label would
   buy nothing. 7 September 2026. */
.hero-ctas .btn-outline-light {
  border-width: 2px;
  border-color: var(--band-ink);
}

/* White (on coloured background).
   Text is --primary-on-white. Neither --primary nor --primary-fill works
   here: --primary is tuned for the page ground, dark on Prior and light on
   Stockton, and --primary-fill is the brand hex, which on Stockton is
   #FF6340 and measures 2.95:1 on white. 5 September 2026. */
.btn-white {
  background: #fff;
  color: var(--primary-on-white);
  border-color: #fff;
}
.btn-white:hover {
  color: var(--primary-on-white);
  opacity: 0.9;
}
.btn-white:focus-visible {
  color: var(--primary-on-white);
  opacity: 1;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ============================================================
   WP BLOCK BUTTONS — design system bridge
   Maps wp-element-button / wp-block-button__link to .btn styles
   so native Gutenberg buttons match the custom block buttons.
============================================================ */

.wp-element-button,
.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.75rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: none;
  line-height: 1;
  border: 1.5px solid var(--primary-fill);
  border-radius: 2px;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s, border-color 0.2s, opacity 0.2s, transform 0.1s;
  cursor: pointer;
  background: var(--primary-fill);
  color: var(--on-primary-fill);
  text-decoration: none;
}
.wp-element-button:hover,
.wp-block-button__link:hover {
  background: var(--primary-fill-hover);
  border-color: var(--primary-fill-hover);
  color: var(--on-primary-fill);
  opacity: 1;
}
.wp-element-button:active,
.wp-block-button__link:active { transform: scale(0.97); }

/* Outline variant (is-style-outline on .wp-block-button wrapper) */
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--dark);
  border-color: rgba(30, 21, 48, 0.22);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: transparent;
  border-color: var(--dark);
  color: var(--dark);
  opacity: 1;
}

/* CTA banner — sits on a dark overlay so white + outline-light pair */
/* Same shape as .btn-white: a white button sitting on a coloured or
   dark band, so it takes --primary-on-white rather than the page
   token. Server item 3a, closed 5 September 2026. --primary is tuned
   for the page ground and inside a dark cta-banner resolves to
   #B98CF7 on Prior and #FF6340 on Stockton, neither of which clears
   4.5:1 on white. */
.cta-banner .wp-block-button__link {
  background: #fff;
  color: var(--primary-on-white);
  border-color: #fff;
}
.cta-banner .wp-block-button__link:hover {
  background: #fff;
  border-color: #fff;
  color: var(--primary-on-white);
  opacity: 0.9;
}
.cta-banner .wp-block-buttons .wp-block-button + .wp-block-button .wp-block-button__link {
  background: transparent;
  color: rgba(245, 243, 240, 0.85);
  border-color: rgba(245, 243, 240, 0.28);
}
.cta-banner .wp-block-buttons .wp-block-button + .wp-block-button .wp-block-button__link:hover {
  background: transparent;
  border-color: rgba(245, 243, 240, 0.85);
  color: rgba(245, 243, 240, 0.85);
  opacity: 1;
}

/* Context margin rules matching .btn equivalents */
.split-text .wp-block-buttons { margin-top: 0.25rem; }


/* ============================================================
   LAYOUT
   Sections: 100% width — no max-width on sections.
   Padding only via .container. Header follows same pattern.
============================================================ */

.container {
  width: 100%;
  padding-inline: 1.25rem;
}

@media (min-width: 48rem) { .container { padding-inline: 2.5rem; } }
@media (min-width: 64rem) { .container { padding-inline: 3rem; } }


/* ============================================================
   ALERT BANNER
   Full-width notice strip above (or below) the header.
   Dismissible via JS — hides on ✕ click and stores in sessionStorage.
============================================================ */

.site-alert {
  background: var(--primary-fill);
  color: var(--on-primary-fill);
  padding: 0.9rem 0;
  position: relative;
  z-index: 99;
}
.brand-ppc .site-alert { background: var(--bg-deep); border-bottom: 1px solid var(--border); }

.site-alert .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.site-alert-msg {
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 500;
}
.site-alert-msg strong { font-weight: 700; }
.site-alert-msg a {
  color: var(--on-primary-fill);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 700;
}
.site-alert-msg a:hover { opacity: 0.85; }

.site-alert-close {
  color: rgba(255, 255, 255, 0.7);
  padding: 0.4rem;
  flex-shrink: 0;
  transition: color 0.2s, transform 0.2s;
  display: flex;
  align-items: center;
  border-radius: 2px;
}
.site-alert-close:hover  { color: var(--on-primary-fill); }
.site-alert-close:focus-visible {
  outline: 2px solid rgba(255,255,255,0.7);
  outline-offset: 2px;
}

.site-alert[hidden] { display: none !important; }


/* ============================================================
   SITE HEADER
   Sticky. SSFC: frosted glass / cream. PPC: dark.
   Height subtracted from hero: calc(100dvh - 3.75rem)
============================================================ */

/* WordPress wraps header template parts in our custom class */
.atomix-header-wrap {
  position: sticky;
  top: 0;
  z-index: 200;
}
.site-header {
  position: relative;
  transition: box-shadow 0.3s;
}

/* SSFC header */
.brand-ssfc .site-header {
  background: rgba(255, 250, 247, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(30, 21, 48, 0.07);
}
.brand-ssfc .site-header.is-scrolled {
  box-shadow: 0 2px 24px rgba(30, 21, 48, 0.08);
}

/* PPC header */
.brand-ppc .site-header {
  background: rgba(30, 21, 48, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(245, 243, 240, 0.06);
}
.brand-ppc .site-header.is-scrolled {
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.3);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 3.75rem;
  padding-inline: 1.25rem;
}
@media (min-width: 48rem) {
  .header-inner {
    height: 4.25rem;
    padding-inline: 2.5rem;
  }
}
@media (min-width: 64rem) {
  .header-inner { padding-inline: 3rem; }
}


/* --- Logo --- */
.site-logo {
  display: flex;
  align-items: center;
  z-index: 201;
  flex-shrink: 0;
}
.site-logo img {
  height: 2rem;
  width: auto;
}

/* SVG logo image */
.atomix-logo-img {
  height: 2.5rem;  /* 40px — scales with rem if user adjusts font size */
  width: auto;
  display: block;
}

/* PPC logo SVG uses old purple fills (#6c398e).
   On the dark header, invert to white so it's legible.
   NOTE for OOK/Max: please supply an updated PPC SVG with #8229F0
   fills, or a dedicated white/reversed version for the dark header. */
.brand-ppc .atomix-logo-ppc {
  filter: brightness(0) invert(1);
}

/* SSFC logo has gradient colour mark + white text.
   The gradient mark is visible on the cream header.
/* Text fallback wordmark (shown if no logo file is found) */
.logo-fallback {
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.brand-ssfc .logo-fallback { color: var(--dark); }
.brand-ppc .logo-fallback  { color: rgba(245, 243, 240, 0.9); }

.logo-fallback small {
  display: block;
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--ink-mid);
}


/* --- Primary nav (desktop) --- */
.primary-nav { display: none; }
@media (min-width: 48rem) { .primary-nav { display: block; } }

.primary-nav ul {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.primary-nav li {
  position: relative;
}
.primary-nav li:hover {
  z-index: 110;
}

.primary-nav a {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  height: 100%; /* Ensure full-height hit area */
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  transition: color 0.2s;
  white-space: nowrap;
}

/* Indicators for dropdowns */
.primary-nav .menu-item-has-children > a::after {
  content: '';
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: 0.6;
  transition: transform 0.2s;
}
.primary-nav .menu-item-has-children:hover > a::after {
  transform: translateY(1px) rotate(45deg);
}

/* Sub-menus */
.primary-nav .sub-menu {
  position: absolute;
  top: calc(100% - 2px); /* Tighten the gap */
  left: 0;
  width: 14rem;
  background: var(--bg-mid);
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 1rem 0;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
  border: 1px solid var(--border);
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.5rem);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 100;
}

/* The "Bridge" to prevent logout on mouse move */
.primary-nav .menu-item-has-children .sub-menu::before {
  content: '';
  position: absolute;
  top: -1.25rem;
  left: 0;
  width: 100%;
  height: 1.25rem;
  display: block;
}

.brand-ssfc .primary-nav .sub-menu { background: #fff; }
.brand-ppc .primary-nav .sub-menu  { background: #2E2250; }

.primary-nav .menu-item-has-children:hover > .sub-menu,
.primary-nav .menu-item-has-children:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.primary-nav .sub-menu a {
  padding: 0.625rem 1.25rem;
  font-size: 0.72rem;
  text-transform: none;
  letter-spacing: 0.02em;
  font-weight: 500;
  color: var(--ink-mid);
}
/* The Prior header keeps an explicit dark ground on every page, but the
   sub-menu took its background from --bg-mid, which is #F5F3F0 on a content
   page. Light text on a light panel measured 1.00:1: the drop-down was
   invisible on every page except the front page. The panel is pinned to the
   header's own dark now. Found 6 September 2026 while checking job 4, and
   not on the audit's list. */
.brand-ppc .primary-nav .sub-menu         { background: #261B3D; border-color: rgba(245,243,240,0.12); }
.brand-ppc .primary-nav .sub-menu a       { color: rgba(245, 243, 240, 0.75); } /* 8.06:1 on #261B3D */
.brand-ppc .primary-nav .sub-menu a:hover { background: #2E2250; color: #FFFFFF; }
.primary-nav .sub-menu a:hover {
  background: var(--bg);
  color: var(--primary);
}

.brand-ssfc .primary-nav a              { color: var(--ink-mid); }
.brand-ssfc .primary-nav a:hover        { color: var(--dark); }
.brand-ssfc .primary-nav a[aria-current="page"] { color: var(--primary); font-weight: 500; }

.brand-ppc .primary-nav a              { color: rgba(245, 243, 240, 0.55); }
.brand-ppc .primary-nav a:hover        { color: rgba(245, 243, 240, 0.9); }
.brand-ppc .primary-nav a[aria-current="page"] { color: rgba(245, 243, 240, 0.9); font-weight: 500; }


/* --- Header Apply Now CTA (desktop) --- */
.header-cta { display: none; }
@media (min-width: 48rem) {
  .header-cta {
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }
}

/* SSFC: orange background */
.brand-ssfc .nav-apply {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: none;
  background: var(--primary-fill);
  color: var(--on-primary-fill);
  border: none;
  padding: 0.6rem 1.4rem;
  border-radius: 2px;
  text-decoration: none;
  transition: background 0.2s;
  cursor: pointer;
}
.brand-ssfc .nav-apply:hover { background: var(--primary-dk); }

/* PPC: magenta background */
.brand-ppc .nav-apply {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: none;
  background: var(--secondary-fill);
  color: var(--on-secondary);
  border: none;
  padding: 0.6rem 1.4rem;
  text-decoration: none;
  transition: background 0.2s;
  cursor: pointer;
}
/* Was opacity: 0.88 on a 4.61:1 pair, which pushed it under the bar. */
.brand-ppc .nav-apply:hover,
.brand-ppc .nav-apply:focus-visible { background: var(--secondary-hover); }


/* --- Hamburger (mobile) --- */
.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0.5rem;
  z-index: 201;
  flex-shrink: 0;
}
@media (min-width: 48rem) { .hamburger { display: none; } }

.hamburger-bar {
  display: block;
  height: 1.5px;
  border-radius: 1px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s, width 0.2s;
  transform-origin: center;
}
.brand-ssfc .hamburger-bar { background: var(--dark); }
.brand-ppc  .hamburger-bar { background: rgba(245, 243, 240, 0.85); }
/* The trust had no rule here until 18 September 2026, so its three bars
   inherited no background and the hamburger rendered as an invisible 40px
   button on a white header: reachable by keyboard, announced correctly by a
   screen reader, and invisible to everyone else. The trust header band is
   near-white, so the bars take the trust deep, 13.37:1 on #FFFFFF. */
.brand-trust .hamburger-bar { background: var(--dark); }

.hamburger-bar:nth-child(1) { width: 100%; }
.hamburger-bar:nth-child(2) { width: 65%; }
.hamburger-bar:nth-child(3) { width: 100%; }

/* Hamburger → X animation */
.hamburger[aria-expanded="true"] .hamburger-bar:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
  width: 100%;
}
.hamburger[aria-expanded="true"] .hamburger-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.hamburger[aria-expanded="true"] .hamburger-bar:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
  width: 100%;
}


/* --- Mobile nav drawer (Editorial redesign)
   Full-screen dark overlay. Always #1E1530 on both brands —
   gives maximum drama against the SSFC cream site and matches PPC.
   Slides in from right.
   Focus management and Escape-to-close handled in atomix-nav.js
*/
.mobile-nav {
  position: fixed;
  inset: 0;
  background: #1E1530;
  display: flex;
  flex-direction: column;
  z-index: 199;
  overflow: hidden;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (min-width: 48rem) { .mobile-nav { display: none; } }

.mobile-nav.is-open { transform: translateX(0); }


/* --- Mobile nav header row: logo + close button --- */
.mobile-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  height: 3.75rem;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(245, 243, 240, 0.07);
}

/* Logo inside mobile nav — always rendered white regardless of brand */
.mobile-nav-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.mobile-nav-logo .atomix-logo-img {
  height: 2rem;
  width: auto;
  filter: brightness(0) invert(1);
}
/* Fallback wordmark */
.mobile-nav-logo .logo-fallback {
  font-size: 0.9375rem;
  font-weight: 800;
  color: rgba(245, 243, 240, 0.9);
}
.mobile-nav-logo .logo-fallback small { color: rgba(245, 243, 240, 0.45); }

/* Close button — accessible tap target */
.mobile-nav-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  color: rgba(245, 243, 240, 0.5);
  transition: color 0.2s;
  border-radius: 2px;
  flex-shrink: 0;
  font-size: 1rem;
  line-height: 1;
}
.mobile-nav-close:hover { color: rgba(245, 243, 240, 0.95); }
.mobile-nav-close:focus-visible {
  outline: 2px solid var(--primary-fill);
  outline-offset: 2px;
}
/* The × SVG icon inside the close button */
.mobile-nav-close svg {
  width: 1.125rem;
  height: 1.125rem;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: square;
}


/* --- Scrollable menu body --- */
.mobile-nav-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: 1rem;
}


/* --- Top-level menu links (editorial large type) --- */
.mobile-nav-links {
  padding: 0;
}

/* Each list item has a hairline bottom border */
.mobile-nav-links > li {
  border-bottom: 1px solid rgba(245, 243, 240, 0.07);
}

/* Top-level link (no children) */
.mobile-nav-links > li > a {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 1rem 1.5rem;
  font-size: clamp(1.75rem, 6vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.0;
  color: rgba(245, 243, 240, 0.85);
  text-decoration: none;
  transition: color 0.15s;
}
.mobile-nav-links > li > a:hover { color: #fff; }

/* Brand-coloured square bullet prefix on top-level items */
.mobile-nav-links > li > a::before {
  content: '';
  display: block;
  width: 0.4rem;
  height: 0.4rem;
  background: var(--primary-fill);
  flex-shrink: 0;
  margin-top: 0.1rem; /* Optical alignment with cap height */
}

/* Active page highlight */
.mobile-nav-links > li > a[aria-current="page"] { color: var(--primary); }
.mobile-nav-links > li > a[aria-current="page"]::before { background: var(--primary-fill); }


/* --- Parent items (have children / sub-menu) --- */
/* JS wraps the <a> and inserts a toggle button into a .mobile-parent-row */
.mobile-parent-row {
  display: flex;
  align-items: stretch;
}

/* The parent text link itself */
.mobile-parent-link {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 1rem 0 1rem 1.5rem;
  font-size: clamp(1.75rem, 6vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.0;
  color: rgba(245, 243, 240, 0.85);
  text-decoration: none;
  transition: color 0.15s;
  cursor: pointer;
  background: none;
  border: none;
  font-family: 'DM Sans', sans-serif;
  text-align: left;
}
.mobile-parent-link:hover { color: #fff; }

/* Brand bullet on parent items (same pattern as plain links) */
.mobile-parent-link::before {
  content: '';
  display: block;
  width: 0.4rem;
  height: 0.4rem;
  background: var(--primary-fill);
  flex-shrink: 0;
  margin-top: 0.1rem;
}

/* The expand / collapse + button */
.mobile-sub-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  flex-shrink: 0;
  color: rgba(245, 243, 240, 0.35);
  font-size: 1.375rem;
  font-weight: 300;
  line-height: 1;
  transition: color 0.2s, transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 0;
  background: none;
  border: none;
  font-family: 'DM Sans', sans-serif;
  padding: 0 1rem 0 0;
}
.mobile-sub-toggle[aria-expanded="true"] {
  color: var(--primary);
  transform: rotate(45deg);
}
.mobile-sub-toggle:focus-visible {
  outline: 2px solid var(--primary-fill);
  outline-offset: 2px;
}


/* --- Sub-menus: collapsed by default, expand on tap --- */
.mobile-nav-links .sub-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.25s ease;
  opacity: 0;
  /* Indent relative to the bullet + gap */
  padding: 0 1.5rem 0 3.25rem;
  border-left: 2px solid var(--primary-fill);
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}
.mobile-nav-links .sub-menu.is-open {
  max-height: 24rem;
  opacity: 1;
}

.mobile-nav-links .sub-menu li {
  border: none;
}
.mobile-nav-links .sub-menu a {
  display: block;
  padding: 0.65rem 0;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.4;
  color: rgba(245, 243, 240, 0.5);
  border-bottom: 1px solid rgba(245, 243, 240, 0.05);
  transition: color 0.15s;
}
.mobile-nav-links .sub-menu li:last-child > a { border-bottom: none; }
.mobile-nav-links .sub-menu a:hover { color: rgba(245, 243, 240, 0.9); }
/* Tiny padding after sub-menu before next top-level item */
.mobile-nav-links .sub-menu.is-open + li,
.menu-item-has-children:has(.sub-menu.is-open) {
  /* No additional rule needed — spacing from sub-menu padding handles it */
}


/* --- Footer: Apply Now CTA pinned to bottom --- */
.mobile-nav-footer {
  padding: 1.25rem 1.5rem;
  padding-bottom: calc(1.25rem + env(safe-area-inset-bottom));
  flex-shrink: 0;
  border-top: 1px solid rgba(245, 243, 240, 0.07);
}

.mobile-nav-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1rem 1.25rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: none;
  text-decoration: none;
  border-radius: 2px;
  transition: opacity 0.2s;
  gap: 0.75rem;
}
.mobile-nav-cta::after {
  content: '→';
  font-size: 1rem;
  font-weight: 400;
}
.mobile-nav-cta:hover { opacity: 0.88; }
.brand-ssfc .mobile-nav-cta { background: #FF6340; color: var(--on-primary-fill); }
.brand-ppc  .mobile-nav-cta { background: #E0157A; color: var(--on-secondary); }



/* ============================================================
   MARQUEE STRIP
   Background = secondary colour.
   Position: after both hero sections — do NOT move above hero.
   Reduced motion handled globally above.
   Two marquee variants (SSFC / PPC) — CSS controls visibility.
============================================================ */

.marquee-strip {
  background: var(--secondary-fill);
  padding: 0.7rem 0;
  overflow: hidden;
  white-space: nowrap;
}

/* Single marquee rendered per site by PHP — no visibility toggling needed */

.marquee-inner {
  display: inline-flex;
  gap: 3rem;
  animation: marquee 24s linear infinite;
}

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

/* Was rgba(255,255,255,0.82), which measured 3.25:1 on the old #E8266E and
   3.45:1 on Prior's #E0157A. Solid white is 5.62:1 and 4.61:1 on the two
   --secondary-fill values. 6 September 2026. */
.marquee-item {
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--band-ink);
  display: inline-flex;
  align-items: center;
  gap: 1rem;
}

.marquee-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  display: inline-block;
  flex-shrink: 0;
}


/* ============================================================
   HERO — FULL-BLEED CAROUSEL
   Height: calc(100dvh - 3.75rem) — header is sticky in flow,
   not fixed. Hero subtracts header height explicitly.
   No glassmorphism stat cards — removed by design. Stats live
   in the USP strip below the hero.
============================================================ */

.hero-ssfc, .hero-ppc { display: none; }
.brand-ssfc .hero-ssfc { display: block; }
.brand-ppc  .hero-ppc  { display: block; }

.hero-ssfc,
.hero-ppc {
  position: relative;
  height: calc(100dvh - 3.75rem);       /* mobile header */
  min-height: 32rem;
  overflow: hidden;
}
@media (min-width: 48rem) {
  .hero-ssfc, .hero-ppc { height: calc(100dvh - 4.25rem); } /* desktop header */
}
/* Subtract WP admin bar when present */
.admin-bar .hero-ssfc,
.admin-bar .hero-ppc { height: calc(100dvh - 3.75rem - 46px); }
@media (min-width: 48rem) {
  .admin-bar .hero-ssfc,
  .admin-bar .hero-ppc { height: calc(100dvh - 4.25rem - 32px); }
}

.hero-slides { position: absolute; inset: 0; }

.hero-slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 0.9s ease;
  pointer-events: none;
}
.hero-slide.is-active { opacity: 1; pointer-events: auto; }

.hero-slide-bg { position: absolute; inset: 0; overflow: hidden; }
.hero-slide-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Brand gradient overlays */
.brand-ssfc .hero-slide-bg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(30,21,48,0.9) 0%, rgba(30,21,48,0.5) 45%, rgba(30,21,48,0.1) 85%),
    linear-gradient(to bottom, rgba(30,21,48,0.45) 0%, transparent 28%);
}
.brand-ppc .hero-slide-bg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(30,21,48,0.97) 0%, rgba(30,21,48,0.65) 48%, rgba(30,21,48,0.18) 100%),
    linear-gradient(to bottom, rgba(30,21,48,0.65) 0%, transparent 28%);
}

/* Text anchored bottom-left — editorial */
.hero-slide-content {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 2rem 1.25rem 5.5rem;
  z-index: 2;
  transform: translateY(1.25rem);
  opacity: 0;
  transition: opacity 0.6s ease 0.2s, transform 0.6s ease 0.2s;
}
@media (min-width: 56rem) {
  .hero-slide-content { padding: 4rem 4rem 7.5rem; max-width: 62rem; }
}
.hero-slide.is-active .hero-slide-content { transform: translateY(0); opacity: 1; }

.hero-eyebrow {
  font-size: 0.68rem; letter-spacing: 0.01em; text-transform: none;
  font-weight: 600; color: rgba(255,255,255,0.58); margin-bottom: 0.9rem;
  display: flex; align-items: center; gap: 0.65rem;
}
.hero-eyebrow::before {
  content: ''; display: block; width: 2rem; height: 1.5px;
  background: rgba(255,255,255,0.38); flex-shrink: 0;
}

.hero-title {
  font-size: clamp(3rem, 9vw, 6.5rem);
  font-weight: 800;
  line-height: 0.93;
  letter-spacing: -0.03em;
  color: #fff;
  margin-bottom: 1.25rem;
}

.hero-body {
  font-size: 1rem;
  line-height: 1.75;
  color: rgba(255,255,255,0.7);
  max-width: 34rem;
  margin-bottom: 2rem;
  font-weight: 300;
}

.hero-ctas { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; }

/* Dot navigation — bottom-left */
.hero-nav {
  position: absolute;
  bottom: 2rem; left: 1.25rem;
  display: flex; align-items: center; gap: 0.4rem;
  z-index: 10;
}
@media (min-width: 56rem) { .hero-nav { left: 4rem; bottom: 2.5rem; } }

.hero-dot {
  position: relative;
  width: 2rem; height: 3px;
  background: rgba(255,255,255,0.28);
  border: none; cursor: pointer; padding: 0;
  transition: background 0.3s, width 0.3s;
}
.hero-dot::after { content: ''; position: absolute; inset: -1.2rem -0.25rem; }
.hero-dot:hover  { background: rgba(255,255,255,0.55); }
.hero-dot.is-active { background: #fff; width: 3.5rem; }
.hero-dot:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

/* Slide counter — bottom-right */
.hero-slide-count {
  position: absolute;
  bottom: 2.2rem; right: 1.25rem;
  font-size: 0.62rem; letter-spacing: 0.1em;
  color: rgba(255,255,255,0.35); font-weight: 500;
  z-index: 5;
}
@media (min-width: 56rem) { .hero-slide-count { right: 4rem; bottom: 2.7rem; } }

/* Progress bar — very bottom edge */
.hero-progress {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 3px; z-index: 10; overflow: hidden;
  background: rgba(255,255,255,0.1);
}
.hero-progress-bar { height: 100%; width: 0%; background: var(--primary-fill); }

/* Reduced motion — carousel */
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
  .hero-slide-content { transition: none; transform: none; opacity: 1; }
  .hero-progress-bar { transition: none !important; }
}

.scroll-hint {
  position: absolute;
  bottom: 1.5rem; left: 1.25rem;
  display: flex; align-items: center; gap: 0.75rem;
  font-size: 0.7rem; letter-spacing: 0.01em; text-transform: none;
  color: rgba(245,243,240,0.35); z-index: 2;
}
@media (min-width: 56rem) { .scroll-hint { bottom: 2.5rem; left: 2.5rem; } }
.scroll-line {
  width: 2rem; height: 1px; background: rgba(245,243,240,0.25);
  animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%, 100% { opacity: 0.3; transform: scaleX(1); }
  50%       { opacity: 1;   transform: scaleX(1.5); transform-origin: left; }
}

/* Fade-up utility */
.fade-up {
  opacity: 0; transform: translateY(1.5rem);
  animation: fadeUp 0.6s ease forwards;
}
.fade-up:nth-child(1) { animation-delay: 0.05s; }
.fade-up:nth-child(2) { animation-delay: 0.18s; }
.fade-up:nth-child(3) { animation-delay: 0.30s; }
.fade-up:nth-child(4) { animation-delay: 0.42s; }
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }


/* ============================================================
   COURSES GRID & FILTER TABS
   Filter tabs: horizontally scrollable on mobile.
   Card hover: ::before colour bar sweeps left-to-right.
============================================================ */

.courses-section {
  background: var(--bg);
  padding-block: var(--section-y);
}

.filter-tabs {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.filter-tab {
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: none;
  padding: 0.45rem 1.1rem;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--ink-mid);
  transition: all 0.2s;
  border-radius: 2px;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}
.filter-tab:hover { border-color: var(--primary-fill); color: var(--primary); }
.filter-tab[aria-selected="true"] {
  background: var(--primary-fill);
  border-color: var(--primary-fill);
  color: var(--on-primary-fill);
}

/*
 * Course level pages, 4 September 2026.
 *
 * The tabs on /course-type/{slug}/ are real anchors, not buttons, because
 * each level page holds only its own courses and there is nothing on the
 * page for a client-side filter to reveal. They reuse .filter-tab so the
 * two pages look identical, and add the states an anchor needs.
 */
a.filter-tab {
  display: inline-block;
  text-decoration: none;
  line-height: 1.35;
}
.filter-tab.is-active,
a.filter-tab[aria-current="page"] {
  background: var(--primary-fill);
  border-color: var(--primary-fill);
  color: var(--on-primary-fill);
}
.filter-tab.is-active:hover,
a.filter-tab[aria-current="page"]:hover { color: var(--on-primary-fill); }

.courses-intro {
  max-width: 46rem;
  margin-bottom: 2rem;
}
.courses-intro p {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink-mid);
  margin: 0;
}
.courses-intro a { color: inherit; }

.courses-foot {
  margin-top: 2.5rem;
  font-size: 0.9375rem;
  color: var(--ink-mid);
}
.courses-foot-top {
  margin-top: 0;
  margin-bottom: 2rem;
}

.courses-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 48rem) { .courses-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .courses-grid { grid-template-columns: repeat(3, 1fr); } }

.course-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s, box-shadow 0.25s, background 0.25s;
  position: relative;
  text-decoration: none;
}
.brand-ssfc .course-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(30,21,48,0.1);
}
.brand-ppc .course-card:hover { background: var(--bg-mid); }

/* Top colour bar — sweeps left-to-right on hover */
.course-card::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 0; height: 3px;
  background: var(--primary-fill);
  transition: width 0.35s ease;
  z-index: 3;
}
.course-card:hover::before { width: 100%; }

.course-card-img {
  width: 100%; aspect-ratio: 3/2; object-fit: cover; display: block;
  transition: transform 0.45s ease;
}
.course-card:hover .course-card-img { transform: scale(1.05); }

.course-card-body {
  padding: 1.25rem 1.5rem 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.course-type {
  font-size: 0.65rem;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--primary);
  font-weight: 600;
}

.course-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
}

.course-meta {
  display: flex; gap: 1rem; margin-top: auto; padding-top: 0.5rem; flex-wrap: wrap;
}
.course-meta-item { font-size: 0.72rem; color: var(--ink-mid); }

.course-arrow {
  margin-left: auto;
  font-size: 1rem;
  color: var(--ink-light);
  transition: color 0.2s, transform 0.2s;
}
.course-card:hover .course-arrow { color: var(--primary); transform: translate(2px, -2px); }


/* ============================================================
   WELCOME / ABOUT SPLIT SECTION
============================================================ */

.welcome-section {
  background: var(--bg-mid);
  padding-block: 4rem;
}
@media (min-width: 48rem) { .welcome-section { padding-block: 5rem; } }

.welcome-grid {
  padding-inline: 1.25rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}
@media (min-width: 48rem) { .welcome-grid { padding-inline: 2.5rem; } }
@media (min-width: 64rem) {
  .welcome-grid {
    padding-inline: 3rem;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
  }
}

.welcome-intro {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  line-height: 1.1;
  margin-bottom: 1.5rem;
}
.welcome-intro span { color: var(--primary); }

.welcome-body {
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--ink);
  margin-bottom: 2rem;
}
.welcome-body p { margin-bottom: 1rem; }
.welcome-body p:last-child { margin-bottom: 0; }

.welcome-points {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 2.5rem;
}
.welcome-point {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.95rem;
  color: var(--ink);
  line-height: 1.5;
}
.welcome-point::before {
  content: '';
  display: block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--primary-fill); flex-shrink: 0; margin-top: 0.42rem;
}

/* Welcome section colour scheme modifiers */
.welcome-section--dark  { background: var(--bg-deep); }
.welcome-section--light { background: var(--bg-mid); }
/* On PPC, .section-light overrides tokens to a proper light background */
.brand-ppc .welcome-section--light { background: #F5F3F0; --ink: rgba(30,21,48,0.85); --ink-mid: rgba(30,21,48,0.55); }

/* Image mosaic
   Mobile: always 2-col compact grid (all 3 images visible).
   Desktop: left image spans two rows (tall), right column stacks two smaller. */
.welcome-mosaic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 0.5rem;
}

/* Mobile: all equal, large image full-width top */
.mosaic-img-large        { grid-column: 1 / 3; }
.mosaic-img-large img    { aspect-ratio: 16/9; }
.mosaic-img-sm img       { aspect-ratio: 1 / 1; }

/* Desktop: restore tall mosaic layout */
@media (min-width: 36rem) {
  .welcome-mosaic          { gap: 0.75rem; }
  .mosaic-img-large        { grid-column: 1 / 2; grid-row: 1 / 3; }
  .mosaic-img-large img    { aspect-ratio: 3/4; height: 100%; }
  .mosaic-img-sm img       { aspect-ratio: 4/3; }
}

.mosaic-img { border-radius: 4px; overflow: hidden; }
.mosaic-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.4s ease;
}
.mosaic-img:hover img { transform: scale(1.03); }


/* ============================================================
   OPEN EVENT PANEL
   Half brand-colour panel (left) + half full-opacity photo (right).
   Gradient bleed between panels for seamless join.
   SSFC: orange panel. PPC: deep bg panel.
   Mobile: stacked (panel above, photo below); gradient top-to-bottom.
============================================================ */

.open-event-ssfc, .open-event-ppc { display: none; }
.brand-ssfc .open-event-ssfc { display: grid; }
.brand-ppc  .open-event-ppc  { display: grid; }

.open-event-ssfc,
.open-event-ppc {
  grid-template-columns: 1fr;
}
@media (min-width: 56rem) {
  .open-event-ssfc,
  .open-event-ppc { grid-template-columns: 1fr 1fr; min-height: 34rem; }
}

.oe-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.brand-ssfc .oe-panel { background: var(--primary-fill); }
.brand-ppc  .oe-panel { background: #2E2250; }

.oe-content { padding: 3.5rem 1.25rem 3rem; }
@media (min-width: 56rem) { .oe-content { padding: 5rem 3rem 5rem 4rem; } }

/* Was rgba(255,255,255,0.55): 5.39:1 on Prior's #2E2250 but 1.79:1 on
   Stockton's #FF6340. It follows the band now. 6 September 2026, job 4. */
.oe-eyebrow {
  font-size: 0.68rem; letter-spacing: 0.01em; text-transform: none;
  font-weight: 600; color: var(--band-ink-soft); margin-bottom: 0.85rem;
  display: flex; align-items: center; gap: 0.6rem;
}
.oe-eyebrow::before {
  content: ''; display: block; width: 1.75rem; height: 1.5px;
  background: currentColor; flex-shrink: 0;
}

/* Was clamp(2rem, 4vw, 3.5rem), 32 -> 56, above the page h1 on every page
   that carries an open event panel. */
.oe-title {
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -0.025em;
  color: var(--band-ink);
  margin-bottom: 2rem;
}

.oe-date-block {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.5rem 0;
  border-top: 1px solid rgba(255,255,255,0.18);
  border-bottom: 1px solid rgba(255,255,255,0.18);
  margin-bottom: 2rem;
}
.oe-date-day {
  font-size: clamp(3.5rem, 6vw, 5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--band-ink);
  flex-shrink: 0;
}
.oe-date-detail { display: flex; flex-direction: column; gap: 0.2rem; }
.oe-date-month  { font-size: 1rem; font-weight: 700; color: var(--band-ink); letter-spacing: -0.01em; }
.oe-date-time   { font-size: 0.82rem; color: var(--band-ink-soft); }
.oe-date-venue  { font-size: 0.75rem; color: var(--band-ink-soft); margin-top: 0.15rem; }

.oe-photo { position: relative; min-height: 22rem; overflow: hidden; }
@media (min-width: 56rem) { .oe-photo { min-height: 100%; } }
.oe-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Visual review item 7, 5 September 2026. Stockton's open event photo
   is the full width image above the aviation section on the home page,
   and at mobile the default centre crop cut the heads off. Raising the
   focal point keeps the faces in frame. Scoped to the Stockton open
   event panel, which is one image on the whole install, blog 3 page 2.
   Prior's panel is untouched and still crops from the centre. */
.brand-ssfc .open-event-ssfc .oe-photo img { object-position: 50% 20%; }

/* Panel colour bleeds into photo — left-to-right on desktop */
.brand-ssfc .oe-photo::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to right, var(--primary-fill) 0%, transparent 45%);
  z-index: 1; pointer-events: none;
}
.brand-ppc .oe-photo::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to right, #2E2250 0%, transparent 45%);
  z-index: 1; pointer-events: none;
}
/* Mobile: centre content + gradient top-to-bottom */
@media (max-width: 55.99rem) {
  .oe-content {
    text-align: center;
  }
  .oe-eyebrow {
    justify-content: center;
  }
  .oe-eyebrow::before { display: none; } /* hide the decorative line when centred */
  .oe-date-block {
    justify-content: center;
  }
  .brand-ssfc .oe-photo::before {
    background: linear-gradient(to bottom, var(--primary-fill) 0%, transparent 40%);
  }
  .brand-ppc .oe-photo::before {
    background: linear-gradient(to bottom, #2E2250 0%, transparent 40%);
  }
}


/* ============================================================
   HIGH FLYERS PANEL
============================================================ */

.high-flyers-section {
  background: var(--bg-mid);
  padding-block: 4rem;
}
@media (min-width: 48rem) { .high-flyers-section { padding-block: 5rem; } }

.brand-ssfc .high-flyers-section { background: rgba(225, 20, 107, 0.05); }
.brand-ppc  .high-flyers-section { background: rgba(190, 16, 128, 0.08); }

.high-flyers-grid {
  padding-inline: 1.25rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}
@media (min-width: 48rem) { .high-flyers-grid { padding-inline: 2.5rem; } }
@media (min-width: 64rem) {
  .high-flyers-grid { padding-inline: 3rem; grid-template-columns: 1fr 1fr; gap: 5rem; }
}

.hf-image { overflow: hidden; border-radius: 4px; }
.hf-image img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }

.hf-label          { color: var(--secondary-text) !important; }
.hf-label::before  { background: var(--secondary) !important; }

.hf-title {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  line-height: 1.05;
  color: var(--ink);
  margin-bottom: 1rem;
}

.hf-body {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--ink);
  margin-bottom: 1.75rem;
}

.hf-stats  { display: flex; flex-wrap: wrap; gap: 2rem; margin-bottom: 2rem; }
@media (min-width: 48rem) { .hf-stats { gap: 2.5rem; } }

.hf-stat-num {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--secondary);
  line-height: 1;
}
.hf-stat-label { font-size: 0.8rem; color: var(--ink-mid); line-height: 1.4; margin-top: 0.35rem; }

.hf-ctas { display: flex; gap: 1rem; flex-wrap: wrap; }


/* ============================================================
   HIGH FLYERS — STUDENT SHOWCASE GRID
   Used by the atomix/high-flyers-grid block.
   Cards: photo (3:4 portrait) + course tag + name + quote + destination.
============================================================ */

.hf-students-section {
  background: var(--bg);
  padding-block: 4rem;
}
@media (min-width: 48rem) { .hf-students-section { padding-block: 5rem; } }

.hf-students-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 2rem;
}
@media (min-width: 36rem) { .hf-students-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .hf-students-grid { grid-template-columns: repeat(3, 1fr); } }

.hf-student-card {
  background: var(--bg-mid);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s, box-shadow 0.2s;
}
@media (prefers-reduced-motion: no-preference) {
  .hf-student-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
  }
}

.hf-student-photo {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--bg-deep);
}
.hf-student-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s;
}
@media (prefers-reduced-motion: no-preference) {
  .hf-student-card:hover .hf-student-photo img { transform: scale(1.04); }
}

/* Initials placeholder when no photo is set */
.hf-student-photo--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}
.hf-student-photo--placeholder span {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--primary);
  text-transform: none;
  letter-spacing: -0.02em;
}

.hf-student-body {
  padding: 1.25rem 1.25rem 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.hf-student-course {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--primary);
  margin-bottom: 0.3rem;
}

.hf-student-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
  margin-bottom: 0.75rem;
}

.hf-student-quote {
  font-size: 0.88rem;
  font-style: italic;
  color: var(--ink-mid);
  line-height: 1.65;
  margin: 0 0 1rem;
  padding-left: 0.75rem;
  border-left: 2px solid var(--primary-fill);
  flex: 1;
}

.hf-student-dest {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-mid);
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--bg-deep);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.hf-student-dest::before {
  content: '→';
  color: var(--primary);
  font-weight: 700;
  font-style: normal;
}


/* ============================================================
   NEWS GRID
   Cards match course card hover vocabulary:
   ::before colour bar sweeps left-to-right.
============================================================ */

.news-section {
  background: var(--bg);
  padding-block: var(--section-y);
}

.news-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 2rem;
}
@media (min-width: 48rem) { .news-grid { grid-template-columns: repeat(2, 1fr); margin-top: 2.5rem; } }
@media (min-width: 64rem) { .news-grid { grid-template-columns: repeat(3, 1fr); } }

.news-card {
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none;
  color: var(--dark);
  transition: transform 0.25s, box-shadow 0.25s, background 0.25s;
  display: flex;
  flex-direction: column;
  position: relative;
}
.news-card::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 0; height: 3px;
  background: var(--primary-fill);
  transition: width 0.35s ease;
  z-index: 3;
}
.news-card:hover::before { width: 100%; }
.brand-ssfc .news-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(30,21,48,0.1);
}
.brand-ppc .news-card:hover { background: var(--bg-mid); }

.news-card-img {
  width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block;
  transition: transform 0.45s ease;
}
.news-card:hover .news-card-img { transform: scale(1.04); }

.news-card-body {
  padding: 1.25rem 1.5rem 1.75rem;
  background: var(--bg-mid);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.news-tag {
  display: inline-block;
  font-size: 0.6rem;
  letter-spacing: 0.01em;
  text-transform: none;
  font-weight: 600;
  background: var(--primary-fill);
  color: var(--on-primary-fill);
  padding: 0.2rem 0.5rem;
  border-radius: 2px;
  margin-bottom: 0.65rem;
  align-self: flex-start;
}

.news-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
  margin-bottom: 0.75rem;
}

.news-date {
  font-size: 0.72rem;
  color: var(--ink-light);
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-light);
}


/* ============================================================
   COURSE HERO — full-bleed editorial
   Brand gradient over lower portion. Text anchored bottom-left.
   Consistent language with the main hero carousel.
============================================================ */

.hero-course {
  position: relative;
  height: 52vw;
  min-height: 22rem;
  max-height: 60vh;
  overflow: hidden;
}
@media (min-width: 56rem) { .hero-course { height: 55vh; max-height: 42rem; } }

/* Job 9, 6 September 2026. With the empty .course-hero-bg wrapper gone, a
   course with no featured image has nothing painting the hero, and
   .hero-title is white. The panel keeps the dark ground it always had
   behind the photograph. One course is in this state, Stockton Spanish. */
.hero-course--no-photo {
  background: var(--dark);
  height: auto;
  min-height: 0;
  max-height: none;
}
.hero-course--no-photo .course-hero-content { position: static; }

.course-hero-bg { position: absolute; inset: 0; overflow: hidden; }
.course-hero-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }

.brand-ppc .course-hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(30,21,48,0.97) 0%, rgba(30,21,48,0.6) 42%, rgba(30,21,48,0.15) 100%),
    linear-gradient(to bottom, rgba(30,21,48,0.55) 0%, transparent 28%);
}
.brand-ssfc .course-hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(30,21,48,0.9) 0%, rgba(30,21,48,0.5) 45%, rgba(30,21,48,0.1) 88%),
    linear-gradient(to bottom, rgba(30,21,48,0.45) 0%, transparent 28%);
}

.course-hero-content {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 2rem 1.25rem 2rem;
  z-index: 2;
}
@media (min-width: 56rem) { .course-hero-content { padding: 3rem; max-width: 62rem; } }

/* The kicker sat on --secondary, which over the hero's dark gradient
   measures 3.78:1 on Prior and 4.09:1 on Stockton. The hero ground is
   #1E1530 under both gradients, so it takes the dark-band ink instead.
   6 September 2026, job 4. */
.course-hero-type {
  font-size: 0.68rem; letter-spacing: 0.01em; text-transform: none;
  color: #FFFFFF; margin-bottom: 0.55rem; font-weight: 600;
  display: flex; align-items: center; gap: 0.55rem;
}
.course-hero-type::before {
  content: ''; display: block; width: 1.5rem; height: 1.5px;
  background: var(--secondary); flex-shrink: 0;
}

.hero-course .hero-title {
  font-size: clamp(2.5rem, 7vw, 5rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: #fff;
  margin-bottom: 0;
}


/* ============================================================
   QUICK INFO STRIP — course page (below course hero)
   4 columns desktop, 2×2 mobile.
============================================================ */

.quick-info-strip {
  background: var(--primary-fill);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 48rem) { .quick-info-strip { grid-template-columns: repeat(4, 1fr); } }

/* Job 4, 6 September 2026. The grid was a fixed 2 up and 4 across whatever
   the render put in it, so a course with no exam board painted a blank
   coloured cell at 1280 and a course with three facts left one at 375. The
   count comes from data-quick-info-count, which the render already sets. */
.quick-info-strip[data-quick-info-count="1"] { grid-template-columns: 1fr; }
.quick-info-strip[data-quick-info-count="3"] .quick-info-item:last-child {
  grid-column: 1 / -1;
  border-right: none;
}
@media (min-width: 48rem) {
  .quick-info-strip[data-quick-info-count="2"] { grid-template-columns: repeat(2, 1fr); }
  .quick-info-strip[data-quick-info-count="3"] { grid-template-columns: repeat(3, 1fr); }
  .quick-info-strip[data-quick-info-count="3"] .quick-info-item:last-child { grid-column: auto; }
}

.quick-info-item {
  padding: 1.5rem 1.75rem;
  border-right: 1px solid rgba(255,255,255,0.15);
  border-bottom: 1px solid rgba(255,255,255,0.15);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
@media (min-width: 48rem) {
  .quick-info-item { border-bottom: none; }
  .quick-info-item:last-child { border-right: none; }
}
.quick-info-label {
  font-size: 0.62rem; letter-spacing: 0.01em; text-transform: none;
  color: var(--band-ink-soft); font-weight: 500;
}
.quick-info-value { font-size: 1.1rem; font-weight: 700; color: var(--band-ink); }


/* ============================================================
   COURSE BODY — MAIN CONTENT + SIDEBAR
   Single column mobile. Content left / sidebar right on desktop.
============================================================ */

/* Job 15, 6 September 2026. The course body section set no padding of its
   own, so it computed 0 at both widths and the sidebar column started flush
   against the quick info strip at desktop. It now takes --section-y like
   every other section, and .inner-layout's own 3rem block padding is
   removed so the two do not stack. Inline padding is unchanged. */
.course-body-section {
  background: var(--bg);
  padding-block: var(--section-y);
}

.inner-layout {
  padding: 0 1.25rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 64rem) {
  .inner-layout {
    padding: 0;
    grid-template-columns: 1fr 26rem;
    gap: 0;
    align-items: start;
  }
}

.main-content-area {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--ink);
}
@media (min-width: 64rem) { .main-content-area { padding: 4rem 3rem; } }

/* Was clamp(1.2rem, 2vw, 1.5rem), 19.2 -> 24, which put an h2 under the
   h3 above it. It is a narrow column, so it stays smaller than a
   full-width h2, but it now clears the h3. 6 September 2026.

   Job 15: margin-top was a flat 2.5rem, 40px at both widths with no
   responsive step. It now takes --section-y, 32px at 375 and 48px at
   1280, which is the same token the section gaps use. */
.main-content-area h2 {
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);    /* 22 -> 28 */
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-top: var(--section-y);
  margin-bottom: 1rem;
  color: var(--ink);
}
.main-content-area h2:first-child { margin-top: 0; }
.main-content-area p  { margin-bottom: 1.25rem; }
.main-content-area ul { margin-bottom: 1.5rem; padding-left: 1.25rem; list-style: disc; }
.main-content-area li { margin-bottom: 0.5rem; }

/* Sidebar */
.sidebar-area {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}
@media (min-width: 64rem) {
  .sidebar-area {
    position: sticky;
    top: 5rem;
    align-self: start;
    border: none;
    border-left: 1px solid var(--border);
    border-radius: 0;
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
  }
}

.sidebar-apply {
  background: var(--dark);
  padding: 1.75rem;
}
.brand-ssfc .sidebar-apply { background: var(--primary-fill); }

.sidebar-apply-label {
  font-size: 0.62rem; letter-spacing: 0.01em; text-transform: none;
  color: var(--band-ink-soft); margin-bottom: 0.4rem; font-weight: 500;
}
.sidebar-apply-heading {
  font-size: 1.2rem; font-weight: 800; letter-spacing: -0.02em;
  line-height: 1.15; color: var(--band-ink); margin-bottom: 1.25rem;
}
.sidebar-apply .btn { width: 100%; justify-content: center; margin-bottom: 0.6rem; }
.sidebar-apply .btn:last-child { margin-bottom: 0; }

.sidebar-section {
  padding: 1.5rem 1.75rem;
  border-top: 1px solid var(--border);
  background: var(--bg-mid);
}
.sidebar-section-title {
  font-size: 0.62rem; letter-spacing: 0.01em; text-transform: none;
  color: var(--primary); margin-bottom: 1rem; font-weight: 600;
}

.sidebar-stat { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.85rem; }
.sidebar-stat:last-child { margin-bottom: 0; }
.sidebar-stat-num {
  font-size: 1.6rem; font-weight: 800; color: var(--primary);
  line-height: 1; letter-spacing: -0.02em;
  width: 4rem;
  flex-shrink: 0;
}
.sidebar-stat-text { font-size: 0.8rem; color: var(--ink-mid); line-height: 1.35; }

.sidebar-teacher { display: flex; align-items: center; gap: 0.75rem; }
.teacher-avatar {
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--primary-fill); color: var(--on-primary-fill);
  font-size: 0.75rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; letter-spacing: 0.02em;
}
.teacher-name { font-size: 0.88rem; font-weight: 600; color: var(--ink); }
.teacher-role { font-size: 0.75rem; color: var(--ink-mid); }

.sidebar-link-list { list-style: none; }
.sidebar-link-list li { border-bottom: 1px solid var(--border-light); padding: 0.55rem 0; }
.sidebar-link-list li:last-child  { border-bottom: none; padding-bottom: 0; }
.sidebar-link-list li:first-child { padding-top: 0; }
.sidebar-link-list a {
  font-size: 0.82rem; color: var(--primary); text-decoration: none;
  display: flex; justify-content: space-between; align-items: center;
  transition: opacity 0.2s;
}
.sidebar-link-list a:hover { opacity: 0.7; }

.sidebar-oe-date { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 0.3rem; }
.sidebar-oe-detail { font-size: 0.78rem; color: var(--ink-mid); margin-bottom: 1.25rem; line-height: 1.5; }


/* ============================================================
   ACCORDION / FAQs
============================================================ */

.accordion { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 2rem; }
.accordion-item {
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--bg);
  overflow: hidden;
}
.accordion-header {
  width: 100%; text-align: left;
  padding: 1.25rem 1.5rem;
  background: transparent; border: none;
  font-family: inherit; font-size: 1.05rem; font-weight: 600;
  color: var(--dark); cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  transition: background 0.2s;
}
.accordion-header:hover { background: var(--bg-mid); }
.accordion-header[aria-expanded="true"] {
  border-bottom: 1px solid var(--border);
  background: var(--bg-mid);
}
.accordion-icon {
  font-size: 1.5rem; color: var(--primary);
  transition: transform 0.3s ease; line-height: 1;
}
.accordion-header[aria-expanded="true"] .accordion-icon { transform: rotate(45deg); }

.accordion-content {
  padding: 0; max-height: 0; overflow: hidden; opacity: 0;
  transition: all 0.3s ease-in-out;
}
.accordion-content[aria-hidden="false"] { padding: 1.5rem; max-height: 50rem; opacity: 1; }
.accordion-content p:last-child { margin-bottom: 0; }


/* ============================================================
   TOPICS GRID
============================================================ */

.topics-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 2.5rem;
  /* Visual review item 5, 5 September 2026. There is no min-height on
     a topic card and never was. What left a short card looking empty
     was the grid stretching every card in a row to the tallest one,
     which is the default. A one line description now makes a short
     card. */
  align-items: start;
}
@media (min-width: 48rem) { .topics-grid { grid-template-columns: repeat(2, 1fr); } }

.topic-item {
  background: var(--bg-mid); border-radius: 4px;
  padding: 1.5rem; border: 1px solid var(--border);
}
.topic-title { font-size: 1.05rem; font-weight: 700; color: var(--dark); margin-bottom: 0.5rem; }
.topic-desc  { font-size: 0.95rem; color: var(--ink); }


/* ============================================================
   STUDENT QUOTE BLOCK
   Uses <blockquote> — not <p>. Left-border accent.
============================================================ */

/* Job 6, 6 September 2026. The welcome letter on /pursglove/about/ carries
   the core preset classes has-white-color and a background preset, and the
   text colour was resolving to the page ink rather than to white. Pinning
   the block's colour here means the panel is legible whichever way the
   preset classes fall: --band-ink is white on Prior's #8229F0 at 5.96:1 and
   #1E1530 on Stockton's #FF6340 at 5.90:1. */
.quote-block,
.quote-block p,
.quote-block li { color: var(--band-ink); }
.quote-block a[href] { color: var(--band-ink); }

.quote-block {
  background: var(--primary-fill);
  padding: 2.5rem 1.5rem 2.5rem 2rem;
  border-radius: 4px;
  margin: 3.5rem 0;
  position: relative;
  overflow: hidden;
  border-left: 4px solid rgba(255,255,255,0.3);
}
@media (min-width: 48rem) { .quote-block { padding: 3rem 3rem 3rem 2.5rem; } }

.quote-block::before {
  content: '\201C';
  position: absolute;
  top: -2.5rem; right: 1.5rem;
  font-size: 11rem; line-height: 1;
  color: rgba(255,255,255,0.07); font-weight: 800;
  pointer-events: none;
}
.quote-text {
  font-size: clamp(1.1rem, 2.5vw, 1.6rem);
  line-height: 1.55;
  font-weight: 400; font-style: italic;
  color: var(--band-ink);
  margin-bottom: 1.75rem;
  position: relative; z-index: 2;
}
.quote-footer {
  display: flex; align-items: center; gap: 0.85rem;
  position: relative; z-index: 2;
}
.quote-avatar {
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: rgba(255,255,255,0.15); border: 2px solid rgba(255,255,255,0.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem; font-weight: 700; color: var(--band-ink);
  flex-shrink: 0; letter-spacing: 0.05em;
}
.quote-author {
  display: block; font-size: 0.9rem; font-weight: 700; color: var(--band-ink);
  font-style: normal; letter-spacing: 0; text-transform: none;
}
.quote-sub { font-size: 0.78rem; color: var(--band-ink-soft); margin-top: 0.1rem; }


/* ============================================================
   DESTINATIONS GRID
============================================================ */

.dest-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 2.5rem;
}
@media (min-width: 48rem) { .dest-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }

.dest-item {
  text-align: center;
  padding: 1.5rem 1rem;
  border: 1px solid var(--border);
  background: var(--bg-mid);
  border-radius: 3px;
}
.dest-value { font-size: 2rem; font-weight: 800; color: var(--secondary); line-height: 1; margin-bottom: 0.5rem; }
.dest-label { font-size: 0.85rem; color: var(--ink-mid); line-height: 1.3; }


/* ============================================================
   ENTRY REQUIREMENTS GRID
============================================================ */

.req-grid {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--border);
  margin-top: 1rem;
  margin-bottom: 2.5rem;
}
.req-item {
  display: grid;
  grid-template-columns: 1fr;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
  gap: 0.5rem;
}
@media (min-width: 36rem) { .req-item { grid-template-columns: 1fr 2fr; gap: 2rem; } }
.req-label { font-weight: 700; color: var(--dark); }
.req-value  { color: var(--ink); }


/* ============================================================
   RELATED COURSES STRIP
============================================================ */

.related-courses-section {
  background: var(--bg-mid);
  padding-block: 4rem;
}
@media (min-width: 48rem) { .related-courses-section { padding-block: 5rem; } }


/* ============================================================
   CTA BANNER
   Mobile: solid colour panel (all content) stacked above a separate image
   strip — same structural logic as the open-event banner.
   Desktop: full-bleed image, left-to-right gradient overlay, content over top.
============================================================ */

/* --- MOBILE (default / mobile-first) --- */

/* Job 3, 6 September 2026. The base band now paints its own fill at every
   width. Before this, the desktop rule below set .cta-panel to
   transparent !important and left the colour to the .cta-banner-bg
   gradient, which is only rendered when the block has a background image.
   A brand-scheme banner with no image therefore computed
   background-color: rgba(0,0,0,0) at 1280 and rendered white on white on
   17 pages. --cta-band is --primary-fill on Stockton and --secondary on
   Prior, matching what .cta-panel already paints at 375. The colour
   modifier rules further down set .cta-banner background themselves and
   still win, because they come later at equal specificity. */
.cta-banner {
  display: flex;
  flex-direction: column;
  background: var(--cta-band);
}

/* Solid content panel — background set explicitly per context below */
.cta-panel {
  position: relative;
  z-index: 2;
  padding: 3.5rem 1.25rem 3rem;
}

/* Default brand panel colours on mobile */
.brand-ssfc .cta-panel { background: var(--primary-fill); }
.brand-ppc  .cta-panel { background: var(--secondary-fill); }

/* Image strip — sits below the panel, shows full photo */
.cta-banner-bg {
  position: relative;
  flex-shrink: 0;
  height: 22rem;
  overflow: hidden;
}
.cta-banner-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Gradient bleeds panel colour into the top edge of the image strip only */
.brand-ssfc .cta-banner-bg::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, var(--primary-fill) 0%, transparent 40%);
}
.brand-ppc .cta-banner-bg::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, var(--secondary-fill) 0%, transparent 40%);
}

/* --- DESKTOP --- */

@media (min-width: 56rem) {
  /* Switch to full-bleed: image covers everything, content sits over it */
  .cta-banner {
    position: relative;
    overflow: hidden;
    display: block;
    min-height: 34rem;
  }
  .cta-panel {
    background: transparent !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 34rem;
    padding: 7rem 4rem;
  }
  .cta-banner-bg {
    position: absolute;
    inset: 0;
    height: auto;
    flex-shrink: unset;
  }
  /* Left-to-right gradient overlay on desktop */
  .brand-ssfc .cta-banner-bg::after {
    background: linear-gradient(to right,
      var(--primary-fill)           0%,
      var(--primary-fill)           32%,
      rgba(255, 99,  64, 0.88) 56%,
      rgba(255, 99,  64, 0.20) 100%);
  }
  .brand-ppc .cta-banner-bg::after {
    background: linear-gradient(to right,
      var(--secondary-fill)     0%,
      var(--secondary-fill)     32%,
      rgba(224, 21,  122, 0.85) 56%,
      rgba(224, 21,  122, 0.18) 100%);
  }
}

/* ---- COLOUR SCHEME MODIFIERS ---- */

/* Flat solid schemes — panel colour set via .cta-banner background (desktop: shows
   through transparent panel since .cta-banner-bg is hidden). */
.cta-banner--primary      { background: var(--primary-fill); }
.cta-banner--secondary    { background: var(--secondary-fill); }
.cta-banner--dark         { background: var(--dark); }
.cta-banner--purple       { background: #8229F0; }
.cta-banner--magenta      { background: #C4157A; }
.cta-banner--deep-purple  { background: #2E2250; }
.cta-banner--black        { background: #0D0D0D; }

/* Mobile: override panel background to match the scheme */
.cta-banner--primary      .cta-panel { background: var(--primary-fill); }
.cta-banner--secondary    .cta-panel { background: var(--secondary-fill); }
.cta-banner--dark         .cta-panel { background: var(--dark); }
.cta-banner--purple       .cta-panel { background: #8229F0; }
.cta-banner--magenta      .cta-panel { background: #C4157A; }
.cta-banner--deep-purple  .cta-panel { background: #2E2250; }
.cta-banner--black        .cta-panel { background: #0D0D0D; }

/* Solid schemes: hide image strip on both mobile and desktop */
.cta-banner--primary .cta-banner-bg,
.cta-banner--secondary .cta-banner-bg,
.cta-banner--dark .cta-banner-bg,
.cta-banner--purple .cta-banner-bg,
.cta-banner--magenta .cta-banner-bg,
.cta-banner--deep-purple .cta-banner-bg,
.cta-banner--black .cta-banner-bg { display: none; }

/* Gradient-over-image variants — image strip visible.
   Mobile: panel solid + matching colour bleeds into image strip top.
   Desktop: left-to-right overlay (image always full-bleed). */

/* Job 3 on 6 September 2026 gave .cta-banner its own --cta-band fill, and
   noted that the colour modifiers "set .cta-banner themselves and still
   win". The flat schemes do. The gradient schemes never did: they set
   .cta-panel and the image overlay only. A gradient banner WITH an image
   is unaffected either way, because the photograph covers the band. A
   gradient banner with NO image is not: .cta-panel goes
   transparent !important at 56rem and .cta-banner-bg is not emitted at
   all, so the ground at desktop fell through to --cta-band, which is
   --primary-fill on Stockton. On /stockton/support/ the panel therefore
   rendered #FF6340 while the band ink map, keyed on the purple scheme,
   still supplied #FFFFFF and #EDDFFD: 2.95:1 and 2.33:1.

   Painting .cta-banner here fixes it at the ground rather than at the
   text, so the panel is #8229F0 at every width, which is what the author
   chose and what mobile already showed. White on it is 5.96:1 and
   #EDDFFD 4.70:1. Recolouring the text to #1E1530 instead would have
   passed at desktop and broken mobile, where #1E1530 on #8229F0 is
   2.54:1. Exactly one banner on the network is a gradient scheme with no
   image, blog 3 page 413. 8 September 2026, job 2c. */
.cta-banner--gradient-dark      { background: #1E1530; }
.cta-banner--gradient-purple    { background: #8229F0; }
.cta-banner--gradient-magenta   { background: #C4157A; }
.cta-banner--gradient-orange    { background: #FF6340; }
.cta-banner--gradient-secondary { background: var(--secondary-fill); }

.cta-banner--gradient-dark      .cta-panel { background: #1E1530; }
.cta-banner--gradient-purple    .cta-panel { background: #8229F0; }
.cta-banner--gradient-magenta   .cta-panel { background: #C4157A; }
.cta-banner--gradient-orange    .cta-panel { background: #FF6340; }
.cta-banner--gradient-secondary .cta-panel { background: var(--secondary-fill); }

/* Mobile: image strip top gradient matches panel */
.cta-banner--gradient-dark      .cta-banner-bg::after { background: linear-gradient(to bottom, #1E1530          0%, transparent 40%); }
.cta-banner--gradient-purple    .cta-banner-bg::after { background: linear-gradient(to bottom, #8229F0          0%, transparent 40%); }
.cta-banner--gradient-magenta   .cta-banner-bg::after { background: linear-gradient(to bottom, #C4157A          0%, transparent 40%); }
.cta-banner--gradient-orange    .cta-banner-bg::after { background: linear-gradient(to bottom, #FF6340          0%, transparent 40%); }
.cta-banner--gradient-secondary .cta-banner-bg::after { background: linear-gradient(to bottom, var(--secondary-fill) 0%, transparent 40%); }

/* Desktop: left-to-right overlay for gradient variants */
@media (min-width: 56rem) {
  .cta-banner--gradient-dark .cta-banner-bg::after {
    background: linear-gradient(to right, #1E1530 0%, #1E1530 32%, rgba(30, 21, 48, 0.85) 56%, rgba(30, 21, 48, 0.15) 100%);
  }
  .cta-banner--gradient-purple .cta-banner-bg::after {
    background: linear-gradient(to right, #8229F0 0%, #8229F0 32%, rgba(130, 41, 240, 0.85) 56%, rgba(130, 41, 240, 0.15) 100%);
  }
  .cta-banner--gradient-magenta .cta-banner-bg::after {
    background: linear-gradient(to right, #C4157A 0%, #C4157A 32%, rgba(196, 21, 122, 0.85) 56%, rgba(196, 21, 122, 0.15) 100%);
  }
  .cta-banner--gradient-orange .cta-banner-bg::after {
    background: linear-gradient(to right, #FF6340 0%, #FF6340 32%, rgba(255, 99, 64, 0.88) 56%, rgba(255, 99, 64, 0.20) 100%);
  }
  .cta-banner--gradient-secondary .cta-banner-bg::after {
    background: linear-gradient(to right, var(--secondary-fill) 0%, var(--secondary-fill) 32%, rgba(224, 21, 122, 0.85) 56%, rgba(224, 21, 122, 0.18) 100%);
  }
}

.cta-content { position: relative; z-index: 2; max-width: 52rem; }

.cta-eyebrow {
  font-size: 0.68rem; letter-spacing: 0.01em; text-transform: none;
  font-weight: 600; color: var(--band-ink-soft); margin-bottom: 0.85rem;
  display: flex; align-items: center; gap: 0.6rem;
}
.cta-eyebrow::before {
  content: ''; display: block; width: 2rem; height: 1.5px;
  background: currentColor; flex-shrink: 0;
}
/* Was clamp(1.75rem, 7vw, 5.5rem), which rendered 88px at 1280 and was the
   largest thing on every page that carried one, h1 included. It is now on
   the h2 scale when it is an h2, and on the page-title scale on the sixteen
   wellbeing pages where the banner carries the h1. 6 September 2026. */
.cta-title {
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);      /* 28 -> 40 */
  line-height: 0.95; letter-spacing: -0.03em;
  font-weight: 800; color: var(--band-ink);
  margin-bottom: 1.5rem;
}
h1.cta-title { font-size: clamp(2.25rem, 4.4vw, 3.5rem); }  /* 36 -> 56 */
.cta-body {
  font-size: 1rem; line-height: 1.75;
  color: var(--band-ink);
  max-width: 34rem; margin-bottom: 2.5rem; font-weight: 400;
}

/* A banner body authored with a blank line renders one .cta-body per
   paragraph since 7 September 2026, server outstanding 68. Two bodies on
   the network carry one, both "Getting here" pages.

   .cta-content is block layout, so the two margins collapse: the largest
   positive plus the most negative, 2.5rem + -0.75rem = 1.75rem, which is
   one line of body text at this font-size and line-height. The last
   paragraph keeps the full 2.5rem below it, because this only sets the
   top margin of a following sibling. */
.cta-body + .cta-body { margin-top: -0.75rem; }
.cta-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }


/* ============================================================
   FOOTER
   Dark background both brands. Atomix trust strip above legal.
============================================================ */

.site-footer {
  background: var(--dark);
  color: rgba(245, 243, 240, 0.85);
}

.atomix-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 1.75rem 1.25rem;
}
@media (min-width: 48rem) { .atomix-strip { padding: 1.75rem 2.5rem; } }

/* Was rgba(245,243,240,0.55), 5.53:1, and the address line carried an
   inline rgba(...,0.35) at 3.01:1. Both are solid now. 6 September 2026. */
.atomix-strip p {
  font-size: 0.8rem;
  color: var(--band-ink-soft);   /* #A59FB0, 6.93:1 on #1E1530 */
  letter-spacing: 0.04em;
}
.atomix-strip strong {
  color: var(--band-ink);
  font-weight: 500;
}
.atomix-strip__address {
  font-size: 0.72rem;
  color: var(--band-ink-soft);
}
.atomix-strip__address a {
  color: var(--band-ink);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}
.atomix-strip__address a:hover { text-decoration-thickness: 2px; }

.footer-legal-wrap {
  border-top: 1px solid rgba(245, 243, 240, 0.08);
}

.footer-legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.25rem;
}
@media (min-width: 48rem) { .footer-legal { padding: 1.25rem 2.5rem; } }

/* Was rgba(245,243,240,0.45), 4.13:1. */
.footer-legal p {
  font-size: 0.68rem;
  color: var(--band-ink-soft);
  letter-spacing: 0.04em;
}
.footer-legal strong {
  color: var(--primary);
  font-weight: 500;
}

.footer-legal-links { display: flex; gap: 1.25rem; flex-wrap: wrap; }

/* Was rgba(245,243,240,0.45), 4.13:1. */
.footer-legal a {
  font-size: 0.68rem;
  color: var(--band-ink-soft);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-legal a:hover { color: var(--band-ink); text-decoration: underline; }
.footer-legal a:focus-visible { outline-color: var(--primary-fill); }

/* atomix-strip inner layout when socials are present */
.atomix-strip__text { flex: 1 1 auto; }

/* ── Footer Social Icons ──────────────────────────────────── */
.footer-socials {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.footer-social__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 2px;
  color: var(--band-ink-soft);   /* was rgba(245,243,240,0.5), 4.69:1 */
  transition: color 0.2s, background 0.2s;
}
.footer-social__link:hover {
  color: rgba(245, 243, 240, 0.95);
  background: rgba(245, 243, 240, 0.08);
}
.footer-social__link:focus-visible {
  outline: 2px solid var(--primary-fill);
  outline-offset: 2px;
  color: rgba(245, 243, 240, 0.95);
}
.footer-social__link svg { display: block; }


/* ============================================================
   CONTACT PAGE
============================================================ */

/* ── Hero header ─────────────────────────────────────────── */
.contact-hero {
  background: var(--bg);
  padding: 4rem 0 3rem;
  border-bottom: 1px solid var(--border);
}
.contact-hero .container { max-width: 52rem; }

.contact-hero__eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--primary);
  margin-bottom: 0.75rem;
}
.contact-hero__heading {
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.0;
  color: var(--ink);
  margin: 0 0 1.25rem;
}
.contact-hero__sub {
  font-size: 1.0625rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-mid);
  max-width: 40rem;
}

/* ── Details + Map grid ──────────────────────────────────── */
.contact-details-section {
  background: var(--bg);
  padding: 3rem 0 3.5rem;
}

.contact-details-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 56rem) {
  .contact-details-grid {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
  }
  /* No map embed set, so no second column to reserve. 6 September 2026. */
  .contact-details-grid.is-single { grid-template-columns: minmax(0, 34rem); }
}

/* ── Contact cards ───────────────────────────────────────── */
.contact-details-panel {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.contact-card {
  background: var(--bg-mid);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 1.5rem;
}
.contact-card--trust {
  border-left: 3px solid var(--primary-fill);
}

.contact-card__label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--primary);
  margin-bottom: 0.5rem;
}
.contact-card__trust-name {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.contact-card__trust-desc {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--ink-mid);
}

.contact-card__row {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin-top: 0.875rem;
  color: var(--ink);
  text-decoration: none;
}
.contact-card__link {
  transition: color 0.2s;
}
.contact-card__link:hover { color: var(--primary); }
.contact-card__link:focus-visible { outline-color: var(--primary-fill); }

.contact-card__icon {
  display: flex;
  align-items: center;
  margin-top: 0.1rem;
  color: var(--primary);
  flex-shrink: 0;
}
.contact-card__address {
  font-style: normal;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--ink);
}
.contact-card__note {
  font-size: 0.75rem;
  color: var(--ink-mid);
  margin-top: 1rem;
  padding-top: 0.875rem;
  border-top: 1px solid var(--border);
}

/* Named contact person */
.contact-card--person { border-left: 3px solid var(--secondary); }
.contact-person {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.5rem;
}
.contact-person__avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 2px;
  background: var(--primary-fill);
  color: var(--on-primary-fill);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 800;
  flex-shrink: 0;
}
.contact-person__name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
}
.contact-person__role {
  font-size: 0.8125rem;
  color: var(--ink-mid);
  margin-top: 0.125rem;
}

/* ── Map panel ───────────────────────────────────────────── */
.contact-map-panel {
  position: relative;
}

.contact-map {
  width: 100%;
  height: 28rem;
  border-radius: 2px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.contact-map iframe {
  width: 100%;
  height: 100%;
  display: block;
}

.contact-map-placeholder {
  width: 100%;
  height: 20rem;
  border-radius: 2px;
  border: 1px dashed var(--border);
  background: var(--bg-mid);
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-map-placeholder__inner {
  text-align: center;
  padding: 2rem;
  color: var(--ink-mid);
}
.contact-map-placeholder__inner svg {
  display: block;
  margin: 0 auto 1rem;
  color: var(--primary);
  opacity: 0.5;
}
.contact-map-placeholder__inner p {
  font-size: 0.9375rem;
  line-height: 1.6;
  margin-bottom: 0.5rem;
}
.contact-map-placeholder__hint {
  font-size: 0.75rem !important;
  color: var(--ink-light) !important;
}

/* ── Enquiry form section ────────────────────────────────── */
.contact-form-section {
  background: var(--bg-mid);
  border-top: 1px solid var(--border);
  padding: 3.5rem 0 4rem;
}

.contact-form-header {
  max-width: 36rem;
  margin-bottom: 2.5rem;
}
.contact-form-header__eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--primary);
  margin-bottom: 0.5rem;
}
.contact-form-header__heading {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--ink);
  margin: 0 0 0.875rem;
}
.contact-form-header__sub {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--ink-mid);
}

/* Feedback banners */
.contact-feedback {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 1.25rem 1.5rem;
  border-radius: 2px;
  border: 1px solid;
  margin-bottom: 2rem;
  max-width: 44rem;
}
.contact-feedback--success {
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.25);
  color: var(--ink);
}
.contact-feedback--success svg { color: #16a34a; flex-shrink: 0; margin-top: 0.1rem; }
.contact-feedback--error {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.25);
  color: var(--ink);
}
.contact-feedback--error svg { color: #dc2626; flex-shrink: 0; margin-top: 0.1rem; }
.contact-feedback strong { display: block; font-weight: 600; margin-bottom: 0.25rem; }
.contact-feedback p { font-size: 0.875rem; color: var(--ink-mid); margin: 0; }

/* Form layout */
.contact-form {
  max-width: 44rem;
}
.contact-form__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}
@media (min-width: 40rem) {
  .contact-form__grid { grid-template-columns: 1fr 1fr; }
}

.contact-form__field { display: flex; flex-direction: column; gap: 0.375rem; }
.contact-form__field--full { margin-bottom: 1.25rem; }

.contact-form__label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.contact-form__required { color: var(--secondary-text); }
.contact-form__optional { font-weight: 400; color: var(--ink-mid); font-size: 0.75rem; }

.contact-form__input {
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 0.625rem 0.875rem;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s;
  -webkit-appearance: none;
  appearance: none;
}
.contact-form__input:focus {
  outline: none;
  border-color: var(--primary-fill);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 130, 41, 240), 0.15);
}
.contact-form__input::placeholder { color: var(--ink-light); }

.contact-form__select { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 1rem; padding-right: 2.5rem; }

.contact-form__textarea { resize: vertical; min-height: 9rem; }

.contact-form__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
/*
 * Enquiry form honeypot, 8 September 2026.
 *
 * Hidden from sight without display:none, which some bots test for, and
 * hidden from assistive tech by aria-hidden and tabindex -1 on the markup
 * itself, so no person is ever offered the field. A submission that fills
 * it is dropped silently by the init handler in inc/contact.php.
 */
.contact-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-form__privacy {
  font-size: 0.75rem;
  color: var(--ink-mid);
  line-height: 1.6;
  flex: 1 1 auto;
}
.contact-form__privacy a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.contact-form__submit {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: none;
  color: var(--on-primary-fill);
  background: var(--primary-fill);
  border: none;
  border-radius: 2px;
  padding: 0.75rem 1.625rem;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  flex-shrink: 0;
}
.contact-form__submit:hover,
.contact-form__submit:focus-visible { background: var(--primary-fill-hover); }
.contact-form__submit:active { transform: translateY(1px); }
.contact-form__submit:focus-visible { outline: 2px solid var(--primary-fill); outline-offset: 3px; }


/* ============================================================
   TERM DATES PAGE
============================================================ */

/* ── Hero ────────────────────────────────────────────────── */
.td-hero {
  background: var(--bg);
  padding: 3.5rem 0 3rem;
  border-bottom: 1px solid var(--border);
}
.td-hero__eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--primary);
  margin-bottom: 0.625rem;
}
.td-hero__heading {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.0;
  color: var(--ink);
  margin: 0 0 0.5rem;
}
.td-hero__year {
  font-size: 1rem;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 0.01em;
  margin-bottom: 1rem;
}
.td-hero__intro {
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.75;
  color: var(--ink-mid);
  max-width: 44rem;
}

/* ── Year tab switcher ───────────────────────────────────── */

/* Hide functional radio inputs */
.td-yr-radio { display: none; }

/* Panels: visible by default; JS adds hidden attribute to inactive ones.
   Use !important to ensure the hidden attribute always wins over specificity. */
.td-year-panel[hidden] { display: none !important; }

.td-switcher {
  position: relative;
}

.td-tab-bar {
  background: var(--bg-mid);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}
/* When admin bar is visible */
.admin-bar .td-tab-bar { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .td-tab-bar { top: 46px; }
}

.td-tabs {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.td-tabs::-webkit-scrollbar { display: none; }

.td-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-mid);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
  user-select: none;
  -webkit-user-select: none;
}
.td-tab:hover {
  color: var(--ink);
  border-bottom-color: var(--border);
}
.td-tab--active {
  color: var(--primary);
  border-bottom-color: var(--primary-fill);
}

/* Year status badges inside tab labels */
.td-tab__badge--current,
.td-tab__badge--future,
.td-tab__badge--completed {
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: none;
  padding: 0.15em 0.5em;
  border-radius: 2px;
  line-height: 1.6;
}
.td-tab__badge--current {
  background: var(--primary-fill);
  color: var(--on-primary-fill);
}
.td-tab--active .td-tab__badge--current {
  background: var(--primary-fill);
}
.td-tab__badge--future {
  background: var(--bg-deep);
  border: 1px solid var(--border);
  color: var(--ink-mid);
}
.td-tab--active .td-tab__badge--future {
  background: color-mix(in srgb, var(--primary-fill) 12%, transparent);
  border-color: var(--primary-fill);
  color: var(--primary);
}
.td-tab__badge--completed {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--ink-light);
}

/* ── Three-term grid ─────────────────────────────────────── */
.td-terms-section {
  background: var(--bg);
  padding: 3rem 0 3.5rem;
}

.td-terms-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 56rem) {
  .td-terms-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    align-items: start;
  }
}

/* ── Term card ───────────────────────────────────────────── */
.td-term {
  background: var(--bg-mid);
  border: 1px solid var(--border);
  border-radius: 2px;
  border-top: 4px solid var(--primary-fill);
  overflow: hidden;
}

/* ============================================================
   TERM DATES STATUS PALETTE
   Added 6 September 2026, job 16. These six were hardcoded hexes
   scattered through the term dates rules, and two of them were off
   the palette entirely: #0073AA is the WordPress admin blue and had
   arrived by accident, and #E8A020 was written out four times.

   --td-closed is the trust teal, which is a real brand value and the
   nearest thing on the palette to the blue it replaces.

   --td-half-term stays amber and is deliberately not a brand colour.
   The three terms are told apart by their accent, autumn from
   --primary-fill and spring from --secondary, so mapping summer onto
   either would make two of the three identical. Declaring it once is
   the fix; recolouring it is not.

   The other four are status colours rather than brand colours, the
   same class as a green tick and a red cross, and are unchanged.
============================================================ */
:root {
  --td-term-start:  #00a550;
  --td-term-end:    #dc3232;
  --td-half-term:   #E8A020;
  --td-closed:      #006871;
  --td-holiday:     #888888;
  --td-exam:        #6941c6;
}

/* Term colour overrides — Autumn = primary, Spring = secondary, Summer = blend */
.td-term--autumn { border-top-color: var(--primary-fill); }
.td-term--spring { border-top-color: var(--secondary); }
.td-term--summer {
  border-top-color: var(--td-half-term);
}

/* Elevated state for current term */
.td-term--current {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
}
.brand-ppc .td-term--current {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}

/* Completed terms slightly muted */
.td-term--completed { opacity: 0.72; }

/* ── Term header ─────────────────────────────────────────── */
.td-term__header {
  padding: 1.375rem 1.375rem 1rem;
  border-bottom: 1px solid var(--border);
}
.td-term__header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.25rem;
}
/* Was 1.0625rem, 17px, an h2 rendering under the h4 size. */
.td-term__name {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
}
.td-term--spring .td-term__name { color: var(--ink); }

.td-term__year {
  font-size: 0.6875rem;
  color: var(--ink-light);
  font-weight: 500;
  letter-spacing: 0.04em;
  margin: 0.125rem 0 0;
}

/* Status badge */
.td-term__status {
  flex-shrink: 0;
  font-size: 0.5625rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: none;
  padding: 0.25em 0.6em;
  border-radius: 2px;
  margin-top: 0.125rem;
}
.td-term__status--current {
  background: var(--primary-fill);
  color: var(--on-primary-fill);
}
.td-term--spring .td-term__status--current {
  background: var(--secondary-fill);
  color: var(--on-secondary);
}
/* White on the summer amber measures 2.22:1; the dark ink measures 7.87:1. */
.td-term--summer .td-term__status--current {
  background: var(--td-half-term);
  color: #1E1530;
}
.td-term__status--upcoming {
  background: var(--border);
  color: var(--ink-mid);
}
.td-term__status--completed {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--ink-light);
}

.td-term__range {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-mid);
  margin: 0.5rem 0 0;
}

/* Progress bar */
.td-term__progress {
  margin-top: 0.875rem;
  position: relative;
}
.td-term__progress-bar-track {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.td-term__progress-bar {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  position: relative;
  overflow: visible;
}
/* Re-do progress as a proper track + fill */
.td-term__progress {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: visible;
  position: relative;
  margin-top: 0.875rem;
}
.td-term__progress-bar {
  height: 4px;
  background: var(--primary-fill);
  border-radius: 2px;
  position: relative;
  max-width: 100%;
  transition: width 0.4s ease;
}
.td-term--spring .td-term__progress-bar  { background: var(--secondary); }
.td-term--summer .td-term__progress-bar  { background: var(--td-half-term); }

.td-term__progress-label {
  display: block;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--ink-light);
  margin-top: 0.375rem;
}

/* ── Date list ───────────────────────────────────────────── */
.td-date-list {
  list-style: none;
  padding: 0.5rem 0;
  margin: 0;
}

.td-date-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.7rem 1.375rem;
  border-bottom: 1px solid var(--border-light);
  transition: background 0.15s;
}
.td-date-row:last-child { border-bottom: none; }
/* Was opacity: 0.45, which multiplied every colour in the row and took the
   label from 9.95:1 to about 2.6:1. The row is now full opacity and simply
   uses the muted ink, which passes. 6 September 2026. */
.td-date-row--past .td-date-row__label,
.td-date-row--past .td-date-row__date,
.td-date-row--past .td-date-row__note { color: var(--ink-light); }
.td-date-row--past .td-date-row__dot { opacity: 0.55; }
.td-date-row--today { background: rgba(0, 165, 80, 0.05); }
.brand-ppc .td-date-row--today { background: rgba(130, 41, 240, 0.06); }

/* Dot indicator */
.td-date-row__dot {
  flex-shrink: 0;
  display: block;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  margin-top: 0.3rem;
  background: var(--border);
}
.td-date-row__dot--term-start     { background: var(--td-term-start); }
.td-date-row__dot--term-end       { background: var(--td-term-end); }
.td-date-row__dot--half-term      { background: var(--td-half-term); }
.td-date-row__dot--college-closed { background: var(--td-closed); }
.td-date-row__dot--public-holiday { background: var(--td-holiday); }
.td-date-row__dot--exam           { background: var(--td-exam); }
.td-date-row__dot--key-date       { background: var(--primary-fill); }

.td-date-row__content { flex: 1 1 auto; min-width: 0; }

.td-date-row__top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.td-date-row__label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
}

/* "Today" badge */
.td-date-row__today-badge {
  font-size: 0.5625rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: none;
  background: #00a550;
  color: #1E1530;   /* white measures 3.23:1 here, the dark ink 5.39:1 */
  padding: 0.15em 0.5em;
  border-radius: 2px;
}

.td-date-row__bottom {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.125rem;
}
.td-date-row__date {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ink-mid);
  font-variant-numeric: tabular-nums;
}
.td-date-row__note {
  font-size: 0.6875rem;
  color: var(--ink-light);
  font-style: italic;
}

/* Empty state */
.td-term__empty {
  padding: 1.5rem 1.375rem;
  font-size: 0.8125rem;
  color: var(--ink-light);
  font-style: italic;
}

/* ── Key + notes + print ─────────────────────────────────── */
.td-key-section {
  background: var(--bg-mid);
  border-top: 1px solid var(--border);
  padding: 2.5rem 0 3rem;
}
.td-key-section .container {
  display: grid;
  gap: 2rem;
}
@media (min-width: 48rem) {
  .td-key-section .container {
    grid-template-columns: auto 1fr auto;
    align-items: start;
  }
}

.td-key__heading {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--ink-mid);
  margin-bottom: 0.75rem;
}
.td-key__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.td-key__list li {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.8125rem;
  color: var(--ink-mid);
}
.td-key__list .td-date-row__dot { margin-top: 0; }

.td-notes__heading {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--ink-mid);
  margin-bottom: 0.75rem;
}
.td-notes__body {
  font-size: 0.875rem;
  line-height: 1.75;
  color: var(--ink-mid);
  max-width: 36rem;
}

.td-print { display: flex; align-items: flex-start; }
.td-print__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: none;
  color: var(--ink-mid);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 0.625rem 1.125rem;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.td-print__btn:hover {
  border-color: var(--primary-fill);
  color: var(--primary);
}
.td-print__btn:focus-visible { outline-color: var(--primary-fill); }

/* ── Course sidebar event card ───────────────────────────── */

.sidebar-event {
  background: var(--primary-fill);
  border-radius: 2px;
  padding: 1.375rem;
  margin-top: 1rem;
}

/* Preview-day variant */
.sidebar-event--preview-day { background: var(--secondary-fill); }

/* Empty state (no events) */
.sidebar-event--empty {
  background: var(--bg-deep);
  border: 1px solid var(--border);
}

.sidebar-event__label {
  font-size: 0.5625rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--band-ink-soft);
  margin-bottom: 0.75rem;
}
.sidebar-event--empty .sidebar-event__label { color: var(--ink-mid); }

.sidebar-event__none {
  font-size: 0.8125rem;
  color: var(--ink-mid);
  margin-bottom: 0.625rem;
}

.sidebar-event__date-row {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin-bottom: 0.75rem;
}
.sidebar-event__day {
  font-size: 2.75rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--band-ink);
}
.sidebar-event__month-wrap {
  display: flex;
  flex-direction: column;
  padding-top: 0.25rem;
  gap: 0.0625rem;
}
.sidebar-event__weekday {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--band-ink-soft);
}
.sidebar-event__month {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--band-ink);
}

.sidebar-event__meta {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  color: var(--band-ink);
  margin-bottom: 0.375rem;
}
.sidebar-event__meta svg { flex-shrink: 0; }

.sidebar-event__actions {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-top: 1rem;
  padding-top: 0.875rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.sidebar-event__register {
  /* Uses existing .btn.btn-white */
  text-align: center;
  justify-content: center;
}

.sidebar-event__all-link {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--band-ink);
  text-decoration: none;
  text-align: center;
  transition: color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}
.sidebar-event__all-link:hover { color: var(--band-ink); text-decoration: underline; }
.sidebar-event--empty .sidebar-event__all-link {
  color: var(--primary);
  justify-content: flex-start;
}
.sidebar-event--empty .sidebar-event__all-link:hover { color: var(--primary-dk); }

/* ── Print styles ────────────────────────────────────────── */
@media print {
  .atomix-header-wrap,
  .atomix-footer-wrap,
  .td-hero__intro,
  .td-term__progress,
  .td-print,
  .td-tab-bar,
  .td-term__status--completed { display: none !important; }

  /* On print, show all year panels regardless of hidden attribute */
  .td-year-panel[hidden] { display: block !important; }

  .td-terms-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1rem !important;
  }
  .td-term { break-inside: avoid; box-shadow: none !important; opacity: 1 !important; }
  .td-date-row--past .td-date-row__label,
  .td-date-row--past .td-date-row__date,
  .td-date-row--past .td-date-row__note { color: var(--ink) !important; }

  .td-key-section .container { grid-template-columns: 1fr 1fr !important; }
}


/* ============================================================
   EVENTS PAGE
============================================================ */

/* ── Hero header ─────────────────────────────────────────── */
.events-hero {
  background: var(--bg);
  padding: 4rem 0 3rem;
  border-bottom: 1px solid var(--border);
}
.events-hero .container { max-width: 52rem; }

.events-hero__eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--primary);
  margin-bottom: 0.75rem;
}
.events-hero__heading {
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.0;
  color: var(--ink);
  margin: 0 0 1.25rem;
}
.events-hero__sub {
  font-size: 1.0625rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-mid);
  max-width: 42rem;
}

/* ── Featured panel label ────────────────────────────────── */
.events-featured-panel .oe-eyebrow {
  display: inline-block;
  background: rgba(255, 255, 255, 0.12);
  padding: 0.2em 0.6em;
  border-radius: 2px;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
}

/* The pill above lightens the ground under this one eyebrow, so the band
   ink no longer matches what is painted. On Prior the panel is #2E2250
   and 12% white takes it to #473D65, where --band-ink-soft #A59FB0 is
   3.86:1. #CFCAD9 is 6.17:1.

   Scoped to Prior deliberately. Stockton's panel is #FF6340, which the
   same pill takes to #FF7657, where its own #422233 measures 5.29:1 and
   passes; #CFCAD9 there would be 1.64:1. 8 September 2026, job 2e. */
.brand-ppc .events-featured-panel .oe-eyebrow { --band-ink-soft: #CFCAD9; }

/* ── Upcoming events list section ────────────────────────── */
.events-list-section {
  background: var(--bg);
  padding: 3.5rem 0 4rem;
}

.events-list-header {
  margin-bottom: 2.5rem;
}
.events-list-header__eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--primary);
  margin-bottom: 0.5rem;
}
.events-list-header__heading {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--ink);
  margin: 0;
}

/* ── Month grouping ──────────────────────────────────────── */
.events-month-group { margin-bottom: 3rem; }

.events-month-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--ink-mid);
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.25rem;
}

/* ── Events grid ─────────────────────────────────────────── */
.events-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 48rem) {
  .events-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 72rem) {
  .events-grid { grid-template-columns: 1fr 1fr 1fr; }
}

/* ── Event card ──────────────────────────────────────────── */
.event-card {
  background: var(--bg-mid);
  border: 1px solid var(--border);
  border-radius: 2px;
  border-top: 3px solid var(--primary-fill);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Type-specific top border colours */
.event-card--open-day    { border-top-color: var(--primary-fill); }
.event-card--preview-day { border-top-color: var(--secondary); }
.event-card--taster-day  { border-top-color: color-mix(in srgb, var(--primary-fill) 60%, var(--secondary)); }

.event-card__date-block {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.event-card__day {
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--primary);
}
.event-card--preview-day .event-card__day { color: var(--secondary-text); }

.event-card__month {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-mid);
}

.event-card__body { flex: 1 1 auto; }

/* Type badge */
.event-card__type-badge {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
  padding: 0.2em 0.55em;
  border-radius: 2px;
  margin-bottom: 0.625rem;
  background: rgba(130, 41, 240, 0.1);
  color: var(--primary);
}
/* The badge ground is not a page ground: it is the pink at 10% over the
   card, #FDDDDF on Stockton and #F4DFE3 on Prior. --secondary-text
   #C4157A measures 4.44:1 and 4.42:1 there and misses AA on both.
   #A81169 measures 5.62:1 and 5.60:1.

   It stays a literal, checked 8 September 2026 under server outstanding
   80, where the other half of that item was consolidated. It is one
   digit off Stockton's --secondary-hover #A81269, but that token is
   per brand and Prior's is #C4157A, which measures 4.42:1 here and
   fails. This rule is not brand scoped, so one value has to clear both
   composited grounds and var(--secondary-hover) cannot supply it.
   8 September 2026, job 2d. */
.event-card__type-badge--preview-day {
  background: rgba(232, 38, 110, 0.1);
  color: #A81169;
}
.event-card__type-badge--taster-day {
  background: rgba(130, 41, 240, 0.07);
  color: var(--ink-mid);
}

.event-card__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
  margin: 0 0 0.75rem;
}

.event-card__meta {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.event-card__meta-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  color: var(--ink-mid);
  line-height: 1.4;
}
.event-card__meta-item svg {
  flex-shrink: 0;
  color: var(--primary);
  opacity: 0.7;
}

.event-card__cta { margin-top: auto; padding-top: 0.75rem; }

.event-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: none;
  color: var(--primary);
  text-decoration: none;
  transition: gap 0.2s, color 0.2s;
}
.event-card__btn:hover {
  color: var(--primary-dk);
  gap: 0.625rem;
}
.event-card__btn:focus-visible { outline-color: var(--primary-fill); }
.event-card--preview-day .event-card__btn { color: var(--secondary-text); }

/* ── Empty state ─────────────────────────────────────────── */
.events-empty {
  text-align: center;
  padding: 4rem 1.5rem;
  color: var(--ink-mid);
}
.events-empty svg {
  display: block;
  margin: 0 auto 1.25rem;
  color: var(--primary);
  opacity: 0.3;
}
.events-empty h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.events-empty p {
  font-size: 0.9375rem;
  line-height: 1.65;
  max-width: 28rem;
  margin: 0 auto;
}
.events-empty--secondary {
  padding: 2rem 0;
  text-align: left;
}
.events-empty--secondary p {
  margin: 0;
  font-size: 0.875rem;
}


/* ============================================================
   WORDPRESS BLOCK THEME OVERRIDES
   Undo WP-added styles that would interfere with our layout.
============================================================ */

/* Remove default WP block spacing & prevent WP breaking sticky */
.wp-block-template-part,
.wp-site-blocks {
  padding: 0 !important;
  margin: 0 !important;
}
/* Reset margin on groups but allow padding so block spacing attributes work */
.wp-block-group {
  margin: 0 !important;
}
.wp-site-blocks { overflow-x: visible !important; overflow: visible !important; }

/* Prevent WordPress adding max-width to sections */
.wp-block-group.alignfull,
.wp-block-cover.alignfull {
  max-width: none !important;
}

/* ============================================================
   TOPIC CARD GRID  (atomix/topic-card-grid)
   Linked card grid for navigating sub-sections / topic pages.
============================================================ */

.topic-card-section {
  padding: 3.5rem 0;
  background: var(--bg);
}

.topic-card-section-heading {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.0;
  color: var(--ink);
  margin: 0 0 1.75rem;
}

.topic-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.875rem;
}

@media (min-width: 36rem) {
  .topic-card-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 64rem) {
  .topic-card-grid[data-cols="3"] { grid-template-columns: 1fr 1fr 1fr; }
  .topic-card-grid[data-cols="2"] { grid-template-columns: 1fr 1fr; }
}

.topic-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.375rem 1.5rem;
  background: var(--bg-mid);
  border-left: 3px solid var(--primary-fill);
  border-radius: 2px;
  text-decoration: none;
  color: var(--ink);
  transition: background 0.2s, transform 0.2s;
}

div.topic-card { cursor: default; }

a.topic-card:hover {
  background: var(--bg-deep);
  transform: translateX(3px);
}

.topic-card-inner { flex: 1; min-width: 0; }

.topic-card-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--primary);
  margin: 0 0 0.3rem;
  line-height: 1.3;
}

.topic-card-body {
  font-size: 0.8125rem;
  color: var(--ink-mid);
  line-height: 1.5;
  margin: 0;
}

.topic-card-arrow {
  font-size: 1.125rem;
  color: var(--primary);
  flex-shrink: 0;
  transition: transform 0.2s;
}

a.topic-card:hover .topic-card-arrow { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .topic-card, .topic-card-arrow { transition: none; }
}


/* ============================================================
   CALLOUT BOX  (atomix/callout-box)
   Highlighted panel for contact info, tips, or key facts.
============================================================ */

.callout-section {
  padding: 0.25rem 0 1.5rem;
}

.callout-box {
  padding: 1.375rem 1.5rem 1.375rem 1.25rem;
  border-left: 4px solid var(--primary-fill);
  background: var(--bg-mid);
  border-radius: 0 2px 2px 0;
}

.callout-box--tip     { border-left-color: var(--secondary); }
.callout-box--contact { border-left-color: var(--primary-fill); }

.callout-eyebrow {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--primary);
  margin: 0 0 0.4rem;
}

.callout-box--tip .callout-eyebrow { color: var(--secondary-text); }

.callout-heading {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 0.5rem;
  line-height: 1.3;
}

.callout-body {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--ink);
  margin: 0 0 0.75rem;
}

.callout-body:last-child { margin-bottom: 0; }

.callout-link {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
}

.callout-link:hover { text-decoration: underline; }
.callout-box--tip .callout-link { color: var(--secondary-text); }


/* ============================================================
   CONTENT SPLIT  (atomix/content-split)
   Two-column: text one side, single image the other.
============================================================ */

.split-section {
  padding: var(--section-y) 0;
  background: var(--bg);
}

.split-section--dark  { background: var(--bg-mid); }
.split-section--light { background: var(--bg-deep); }

/* On PPC dark sites, "light" is relatively darker, not white */
.brand-ppc .split-section--light {
  background: var(--bg-deep);
}

.split-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 64rem) {
  .split-grid { grid-template-columns: 1fr 1fr; gap: 4rem; }

  /* Job 9, 6 September 2026. A split with no photograph no longer emits a
     placeholder panel, so the text column takes the full width instead of
     sitting beside an empty half. The second selector catches the panels
     that are authored in page content rather than rendered by the
     atomix/content-split block: those carry a core image block whose src is
     empty, which core drops on render and leaves a bare <div>. */
  .split-grid:not(:has(.split-image)) { grid-template-columns: 1fr; }
  .split-grid:has(.split-image:not(:has(img))) { grid-template-columns: 1fr; }

  .split-section--image-left .split-text  { order: 2; }
  .split-section--image-left .split-image { order: 1; }
}

/* An image panel with no image is not a layout, it is a hole. */
.split-image:not(:has(img)),
.oe-photo:not(:has(img)) { display: none; }

.split-text .eyebrow { margin-bottom: 0.75rem; }

/* .split-heading is the page title on 74 pages, where it is an h1, and a
   section heading on 30 more, where it is an h2. At clamp(1.75rem, 3.5vw,
   2.75rem) it rendered 28px and 44px, under the old h2 at 32px and 51.2px,
   so the page title was the smallest heading on the page. The h1 form now
   sits above every h2; the h2 form follows the h2 scale.
   6 September 2026, job 13. */
.split-heading {
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.0;
  color: var(--ink);
  margin: 0 0 1rem;
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);      /* 28 -> 40, as an h2 */
}
h1.split-heading { font-size: clamp(2.25rem, 4.4vw, 3.5rem); }  /* 36 -> 56 */

.split-body {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ink-mid);
  margin: 0 0 1.5rem;
}

.split-body:last-child { margin-bottom: 0; }

.split-text .btn { margin-top: 0.25rem; }

.split-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}

.split-image--placeholder {
  aspect-ratio: 4 / 3;
  background: var(--bg-deep);
  border-radius: 4px;
}


/* ============================================================
   HISTORY TIMELINE
============================================================ */

.history-timeline {
  background: var(--bg);
  padding: 4rem 0;
}

.history-timeline--dark  { background: var(--bg-deep); }
.history-timeline--light { background: var(--bg-mid); }

@media (min-width: 48rem) {
  .history-timeline { padding: 5rem 0; }
}

.history-timeline__header { margin-bottom: 3rem; }

.history-timeline__heading {
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.0;
  color: var(--ink);
  margin: 0.5rem 0 0;
}

.history-timeline__list {
  position: relative;
  list-style: none;
  padding: 0 0 0 2.5rem;
  margin: 0;
}

/* Fading vertical rail */
.history-timeline__list::before {
  content: '';
  position: absolute;
  top: 0.5rem;
  bottom: 0;
  left: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--primary-fill) 0%, transparent 100%);
  opacity: 0.35;
}

.history-timeline__item {
  position: relative;
  padding-bottom: 2.75rem;
}

.history-timeline__item:last-child { padding-bottom: 0; }

/* Dot on the rail */
.history-timeline__item::before {
  content: '';
  position: absolute;
  left: calc(-2.5rem - 1px);
  top: 0.5rem;
  transform: translateX(-50%);
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--primary-fill);
  box-shadow: 0 0 0 3px var(--bg);
}

.history-timeline--dark  .history-timeline__item::before { box-shadow: 0 0 0 3px var(--bg-deep); }
.history-timeline--light .history-timeline__item::before { box-shadow: 0 0 0 3px var(--bg-mid); }

.history-timeline__year {
  display: block;
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.0;
  color: var(--primary);
  margin-bottom: 0.5rem;
}

.history-timeline__text {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ink-mid);
  margin: 0;
  max-width: 48rem;
}

@media (min-width: 56rem) {
  .history-timeline__list { padding-left: 3rem; }

  .history-timeline__item {
    display: grid;
    grid-template-columns: 7rem 1fr;
    column-gap: 2.5rem;
    align-items: baseline;
  }

  .history-timeline__item::before {
    left: calc(-3rem - 1px);
  }

  .history-timeline__year { margin-bottom: 0; }
  .history-timeline__text { max-width: none; }
}


/* ============================================================
   PULL QUOTE
============================================================ */

.pull-quote-section {
  padding: 4rem 0;
  background: var(--primary-fill);
}

/* The default section is --primary-fill, so its text follows --band-ink.
   The two tinted variants sit on --bg-deep and --bg-mid, which are dark on
   Prior but light on Stockton, so they take the page ink instead. */
.pull-quote-section { --band-ink: var(--on-primary-fill); }
.pull-quote-section--dark  { background: var(--bg-deep); --band-ink: var(--ink); }
.pull-quote-section--light { background: var(--bg-mid);  --band-ink: var(--ink); }

@media (min-width: 48rem) {
  .pull-quote-section { padding: 5.5rem 0; }
}

.pull-quote {
  max-width: 46rem;
  margin: 0 auto;
  text-align: center;
}

/* Decorative opening mark */
.pull-quote::before {
  content: '\201C';
  display: block;
  font-family: DM Sans, sans-serif;
  font-size: clamp(4rem, 10vw, 7rem);
  font-weight: 800;
  line-height: 0.65;
  color: rgba(255, 255, 255, 0.2);
  margin-bottom: 1rem;
  user-select: none;
  aria-hidden: true;
}

.pull-quote-section--dark .pull-quote::before,
.pull-quote-section--light .pull-quote::before {
  color: var(--primary);
  opacity: 0.25;
}

.pull-quote__text { margin: 0; }

.pull-quote__text p {
  font-size: clamp(1.2rem, 2.5vw, 1.875rem);
  font-weight: 300;
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: var(--band-ink);
  margin: 0;
  font-style: italic;
}

.pull-quote-section--dark .pull-quote__text p,
.pull-quote-section--light .pull-quote__text p {
  color: var(--ink);
}

.pull-quote__attribution {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
}

.pull-quote__avatar {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.35);
  flex-shrink: 0;
}

.pull-quote-section--dark .pull-quote__avatar,
.pull-quote-section--light .pull-quote__avatar {
  border-color: var(--primary-fill);
}

.pull-quote__meta {
  display: flex;
  flex-direction: column;
  text-align: left;
  gap: 0.15rem;
}

.pull-quote__name {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--band-ink);
  line-height: 1.3;
}

.pull-quote__role {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--band-ink);
  line-height: 1.3;
}

.pull-quote-section--dark .pull-quote__name,
.pull-quote-section--light .pull-quote__name {
  color: var(--ink);
}

.pull-quote-section--dark .pull-quote__role,
.pull-quote-section--light .pull-quote__role {
  color: var(--ink-mid);
}


/* ============================================================
   STAFF SHOWCASE
============================================================ */

.staff-showcase {
  background: var(--bg);
  padding: 4rem 0;
}

.staff-showcase--dark  { background: var(--bg-deep); }
.staff-showcase--light { background: var(--bg-mid); }

@media (min-width: 48rem) {
  .staff-showcase { padding: 5rem 0; }
}

.staff-showcase__header { margin-bottom: 2.5rem; }

.staff-showcase__heading {
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.0;
  color: var(--ink);
  margin: 0.5rem 0 0;
}

.staff-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 34rem) {
  .staff-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 64rem) {
  .staff-grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
  .staff-grid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
}

.staff-card {
  background: var(--bg-mid);
  border-radius: 4px;
  overflow: hidden;
}

.staff-showcase--dark  .staff-card { background: var(--bg); }
.staff-showcase--light .staff-card { background: var(--bg-deep); }

.staff-card__image {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--bg-deep);
}

.staff-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform 0.35s ease;
}

.staff-card:hover .staff-card__image img {
  transform: scale(1.03);
}

.staff-card__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: DM Sans, sans-serif;
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--primary);
  background: var(--bg-deep);
  letter-spacing: -0.04em;
}

.staff-card__info { padding: 1.25rem 1.25rem 1.5rem; }

.staff-card__name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 0.2rem;
  line-height: 1.3;
}

.staff-card__role {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--primary);
  text-transform: none;
  letter-spacing: 0.05em;
  margin: 0 0 0.75rem;
  line-height: 1.4;
}

.staff-card__bio {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--ink-mid);
  margin: 0;
}

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


/* Ensure admin bar doesn't break sticky header offset */
/* Ensure admin bar doesn't break sticky header offset */
@media screen and (min-width: 601px) {
  /* WP admin bar is position: fixed only above 600px */
  .admin-bar .atomix-header-wrap { top: 32px; }
  .admin-bar .mobile-nav { top: 32px; }
}
@media screen and (min-width: 601px) and (max-width: 782px) {
  /* Between 601px and 782px, the fixed admin bar is 46px tall */
  .admin-bar .atomix-header-wrap { top: 46px; }
  .admin-bar .mobile-nav { top: 46px; }
}
/* Below 601px, the WP admin bar becomes position: absolute and scrolls away naturally.
   Therefore, no top offset is needed! The header will stick to 0 properly without a gap. */



/* ==========================================================================
   Course breadcrumb
   Added 5 August 2026. Over 90 per cent of sessions land on a page that is
   not the homepage, so every page states where it sits. Sentence case, 2px
   radius rules do not apply here (no boxes), tracking stays at 0.
   ========================================================================== */

.course-breadcrumb {
  padding: 0.875rem 0;
  border-bottom: 1px solid rgba(245, 243, 240, 0.12);
  background: var(--bg);
}

.brand-ssfc .course-breadcrumb {
  border-bottom-color: rgba(30, 21, 48, 0.12);
}

.course-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.8125rem;
  line-height: 1.4;
}

.course-breadcrumb li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink);
}

.course-breadcrumb li + li::before {
  content: "/";
  color: var(--ink-light);
}

.course-breadcrumb a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

.course-breadcrumb a:hover,
.course-breadcrumb a:focus-visible {
  color: var(--ink);
  text-decoration-thickness: 2px;
}

.course-breadcrumb [aria-current="page"] {
  font-weight: 500;
}


/* ============================================================
   EDITORIAL PATTERN KIT
   Added 4 September 2026. Web translation of the prospectus
   design language recorded in "260805 design record, full.md"
   and proof-pages-design-markup.html.

   Rules this kit holds to:
   - Brand colour comes from the .brand-ppc / .brand-ssfc tokens,
     never hardcoded, so one pattern serves both colleges.
   - 2px radius everywhere. No pill shapes, no shadows.
   - Sentence case. Never uppercase, per the house rule that
     overrides the V4 guidelines.
   - WCAG 2.1 AA. Two tokens are deliberately NOT used for text:
     --primary fails on light grounds at Stockton (2.85:1), and
     --ink-mid / --ink-light fail for normal text (3.89 / 2.37).
     Numerals and quotes use --secondary, which clears the 3:1
     large-text bar on both brands. Everything small uses --ink.
   - Prose is capped at 62ch so no line runs past 70 characters.
============================================================ */

.atomix-section {
  padding-block: var(--section-y);
  background: var(--bg);
}

/* Visual review item 5. A section carrying nothing but prose stops
   reserving a column it never fills: the container narrows to the
   measure rather than the paragraph sitting in 1265px of nothing.
   Opt in per section with is-prose, so nothing moves by surprise.
   Left aligned, because the heading above it already is. */
.atomix-section.is-prose > .container {
  max-width: calc(44ch + 6rem);
  margin-inline: 0;
}

.atomix-section.is-mid   { background: var(--bg-mid); }

/* Dark ground. Both brands share --dark, so the reverse tokens
   below are set locally rather than pulled from the brand block. */
.atomix-section.is-dark {
  background: var(--dark);
  --ink: rgba(245, 243, 240, 0.85);
  --border: rgba(245, 243, 240, 0.22);
  color: rgba(245, 243, 240, 0.85);
}
.atomix-section.is-dark h2,
.atomix-section.is-dark h3 { color: #F5F3F0; }

/* Vertical rhythm is set by the spacing scale further down. */

/* Prose measure. In DM Sans 1ch is about 1.5 times the average
   character, so 62ch measured 95 characters on the page. 44ch lands
   at roughly 67, which is the actual target. */
.atomix-measure { max-width: 44ch; }

/* Kicker. The rule carries the brand colour; the word stays ink,
   because no brand colour clears 4.5:1 at label size on Stockton. */
.atomix-kicker {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin: 0 0 0.5rem;
}
.atomix-kicker::before {
  content: "";
  inline-size: 1.75rem;
  block-size: 2px;
  background: var(--secondary);
  flex: none;
}

/* Was clamp(1.75rem, 4vw, 2.75rem), 28 -> 44, which equalled the old
   .split-heading h1 on the same page. Now one h2 size site-wide. */
.atomix-section h2 {
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 800;
  margin: 0;
  text-wrap: balance;
}
.atomix-section h3 {
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: 0;
}
.atomix-section p { color: var(--ink); }


/* ---------- Stat tile grid, 2 / 3 / 4 up ---------- */

.atomix-stats {
  display: grid;
  gap: 1px;                        /* hairline gutters read as rules */
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 2px;
  grid-template-columns: 1fr;
}
.atomix-stat {
  background: var(--bg);
  padding: clamp(1.125rem, 2.5vw, 1.75rem);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-inline-size: 0;              /* lets long labels wrap, never clip */
}
.atomix-section.is-mid .atomix-stat { background: var(--bg-mid); }
.atomix-section.is-dark .atomix-stat { background: var(--dark); }

.atomix-stat-num,
.atomix-section .atomix-stat-num {
  font-size: clamp(2.25rem, 5.5vw, 3.25rem);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;             /* a numeral must never break */
  margin: 0;
}
.atomix-stat-label {
  font-size: 0.9375rem;
  line-height: 1.4;
  font-weight: 500;
  color: var(--ink);
  margin: 0;
  text-wrap: pretty;
  overflow-wrap: break-word;
  hyphens: none;
}

@media (min-width: 34rem) {
  .atomix-stats.is-2 { grid-template-columns: repeat(2, 1fr); }
  .atomix-stats.is-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 56rem) {
  .atomix-stats.is-3 { grid-template-columns: repeat(3, 1fr); }
  .atomix-stats.is-4 { grid-template-columns: repeat(4, 1fr); }
}


/* ---------- Media and text split ---------- */

.atomix-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
@media (min-width: 52rem) {
  .atomix-split { grid-template-columns: 1fr 1fr; }
  .atomix-split.is-reverse .atomix-split-media { order: 2; }
}
.atomix-split-media img,
.atomix-split-media figure {
  margin: 0;
  inline-size: 100%;
  border-radius: 2px;
  display: block;
}
.atomix-split-media img {
  block-size: 100%;
  max-block-size: 30rem;
  object-fit: cover;
}
.atomix-split-body > * + * { margin-top: 1rem; }

/* Duotone, opt in. Recipe from section 9 of the design record:
   grayscale(1) contrast(1.1) on a light ground, brand tint at 12%
   in multiply. Prior only. Stockton stays full colour. */
.atomix-duotone { position: relative; border-radius: 2px; overflow: hidden; }
.atomix-duotone img { filter: grayscale(1) contrast(1.1); }
.atomix-duotone::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--primary-fill);
  mix-blend-mode: multiply;
  opacity: 0.12;
  pointer-events: none;
}
.atomix-section.is-dark .atomix-duotone img {
  filter: grayscale(1) contrast(1.15) brightness(1.15);
}
.atomix-section.is-dark .atomix-duotone::after {
  mix-blend-mode: screen;
  opacity: 0.13;
}


/* ---------- Numbered steps ---------- */

.atomix-steps { display: grid; gap: 1px; background: var(--border);
  border-block: 1px solid var(--border); }
.atomix-step {
  background: var(--bg);
  padding: clamp(1rem, 2.5vw, 1.5rem) 0;
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  align-items: start;
}
.atomix-section.is-mid .atomix-step { background: var(--bg-mid); }
.atomix-step-n,
.atomix-section .atomix-step-n {
  font-size: 1.5rem;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--secondary);
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.atomix-step-body > * + * { margin-top: 0.375rem; }
.atomix-step-body p { max-width: 44ch; }


/* ---------- Definition cards ---------- */

.atomix-defs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 2px;
}
@media (min-width: 34rem) { .atomix-defs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .atomix-defs.is-4 { grid-template-columns: repeat(4, 1fr); } }
.atomix-def {
  background: var(--bg);
  padding: clamp(1rem, 2.5vw, 1.5rem);
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-inline-size: 0;
}
.atomix-section.is-mid .atomix-def { background: var(--bg-mid); }
.atomix-def-term {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}
.atomix-def-desc { font-size: 0.9375rem; line-height: 1.45; color: var(--ink); margin: 0; }


/* ---------- Pull quote ---------- */

.atomix-pullquote {
  margin: 0;
  padding-left: clamp(1rem, 3vw, 1.75rem);
  border-left: 2px solid var(--secondary);
  max-width: 44ch;
}
.atomix-pullquote p,
.atomix-section .atomix-pullquote p {
  font-size: clamp(1.5rem, 3.2vw, 1.75rem);   /* never below 24px: at the
     brand secondary this must qualify as large text to clear AA */
  line-height: 1.25;
  letter-spacing: -0.02em;
  font-weight: 300;
  font-style: italic;
  color: var(--secondary);
  margin: 0;
}
.atomix-pullquote cite {
  display: block;
  margin-top: 0.75rem;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
}


/* ---------- Table ---------- */

.atomix-table-wrap {
  overflow-x: auto;                /* the page never scrolls, the table does */
  border: 1px solid var(--border);
  border-radius: 2px;
}
.atomix-table-wrap table {
  inline-size: 100%;
  border-collapse: collapse;
  margin: 0;
  min-inline-size: 20rem;   /* fits a 390px viewport: 390 minus the
     container's 2 x 20px padding leaves 350px */
}
.atomix-table-wrap :is(th, td) {
  padding: 0.75rem clamp(0.75rem, 2vw, 1.25rem);
  text-align: left;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--ink);
  border-bottom: 1px solid var(--border);
}
.atomix-table-wrap th { font-weight: 700; }
.atomix-table-wrap thead th { background: var(--bg-mid); }
.atomix-section.is-mid .atomix-table-wrap thead th { background: var(--bg-deep); }
.atomix-table-wrap tr:last-child :is(th, td) { border-bottom: 0; }
.atomix-table-wrap :is(td, th):not(:first-child) { font-variant-numeric: tabular-nums; }
.atomix-table-wrap figcaption { padding: 0.75rem 1rem; font-size: 0.875rem; color: var(--ink); }


/* ---------- Closing callout ---------- */

.atomix-callout {
  background: var(--dark);
  border-radius: 2px;
  padding: clamp(1.75rem, 5vw, 3.5rem);
  color: rgba(245, 243, 240, 0.85);
}
.atomix-callout .atomix-kicker { color: rgba(245, 243, 240, 0.85); }
.atomix-callout h2 { color: #F5F3F0; max-width: 20ch; }
.atomix-callout p { color: rgba(245, 243, 240, 0.85); max-width: 42ch; }
.atomix-callout > * + * { margin-top: 1rem; }
.atomix-callout .wp-block-buttons { margin-top: 1.75rem; }

/* Buttons. Warm white on the dark ground clears 15.7:1 both ways;
   a --primary fill with white type would not clear AA at Stockton. */
.atomix-callout .wp-block-button__link {
  border-radius: 2px;
  padding: 0.75rem 1.375rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  display: inline-block;
}
.atomix-callout .wp-block-button:not(.is-style-outline) .wp-block-button__link {
  background: #F5F3F0;
  color: #1E1530;
  border: 2px solid #F5F3F0;
}
.atomix-callout .wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: #F5F3F0;
  border: 2px solid rgba(245, 243, 240, 0.55);
}
.atomix-callout .wp-block-button__link:hover { text-decoration: underline; }
.atomix-callout .wp-block-button__link:focus-visible {
  outline: 3px solid #F5F3F0;
  outline-offset: 2px;
}

/* WordPress adds .is-layout-flow to every group, which injects a
   block-gap margin between children. Inside the kit's grid and flex
   containers that fights the component's own gap, so it is cleared. */
.atomix-stats > *,
.atomix-defs > *,
.atomix-steps > *,
.atomix-split > *,
.atomix-stat > *,
.atomix-def > *,
.atomix-step > *,
.atomix-table-wrap > * {
  margin-block-start: 0;
  margin-block-end: 0;
}
.atomix-callout > * + *,
.atomix-split-body > * + *,
.atomix-step-body > * + * { margin-block-start: revert; }

/* Page level ink override, for copy inheriting a muted token that
   does not clear AA at body size. */
.atomix-ink { color: var(--ink); }


/* ============================================================
   SPACING SCALE AND CONTENT RHYTHM
   Added 4 September 2026 from Gareth's review of Stockton results,
   where the "A level, 2024/25" heading sat hard against its stat
   tiles and the subject list ran straight into the pull quote.

   One scale, used everywhere. Selectors are wrapped in :where()
   so they carry zero specificity and any component can still set
   its own internal spacing without fighting this.
============================================================ */

:root {
  --sp-1: 0.5rem;    /*  8px */
  --sp-2: 1rem;      /* 16px */
  --sp-3: 1.5rem;    /* 24px */
  --sp-4: 2.5rem;    /* 40px */
  --sp-5: 4rem;      /* 64px */

  /* Space between two full width sections. Visual review item 6,
     applied 5 September 2026. The gap a reader sees is the sum of
     one section's bottom padding and the next one's top padding, so
     this token is half the target: 32px x 2 = 64px at mobile,
     48px x 2 = 96px at 1280. It replaces clamp(2.75rem, 6vw, 5rem),
     which gave 88px at mobile and 160px at 1280. */
  --section-y: clamp(2rem, 3.75vw, 3rem);
}

/* The content column, on block pages and on course pages. */
#main-content :where(.container, .main-content-area) > * { margin-block: 0; }

#main-content :where(.container, .main-content-area) > * + * {
  /* !important is needed to clear the blanket .wp-block-group
     { margin: 0 !important } reset further up this file. Same
     weight, higher specificity, so this wins on specificity
     rather than on source order. */
  margin-block-start: var(--sp-3) !important;
}

/* Headings: clear air above, a tighter gap to the copy they head. */
#main-content :where(.container, .main-content-area) > :where(h2, h3, h4) {
  margin-block-start: var(--sp-4) !important;
  margin-block-end: var(--sp-2) !important;
}
#main-content :where(.container, .main-content-area) > :where(h2, h3, h4):first-child {
  margin-block-start: 0 !important;
}

/* Paragraph to paragraph is the tightest relationship on the page. */
#main-content :where(.container, .main-content-area) > :where(p) + :where(p) {
  margin-block-start: var(--sp-2) !important;
}

/* Anything with a box or a rule around it keeps 24px clear on both
   sides. Adjacent margins collapse, so a 16px heading gap and this
   24px resolve to 24px rather than adding up. */
#main-content :where(.container, .main-content-area)
  > :where(ul, ol, table, figure, blockquote, .wp-block-table,
           .atomix-stats, .atomix-table-wrap,
           .atomix-pullquote, .atomix-defs, .atomix-steps, .atomix-split) {
  margin-block: var(--sp-3) !important;
}

/* Copy sitting directly under its heading keeps the tighter 16px.
   Anything in a box keeps the 24px set above, so this is scoped to
   paragraphs only and has to come after the component rule. */
#main-content :where(.container, .main-content-area) > :where(h2, h3, h4) + :where(p) {
  margin-block-start: var(--sp-2) !important;
}

/* Nested flow: split bodies and step bodies carry the same scale. */
.atomix-split-body > * + *,
.atomix-step-body > * + * { margin-block-start: var(--sp-2); }
.atomix-split-body > :where(h2, h3) + * { margin-block-start: var(--sp-2); }


/* ============================================================
   LISTS IN PAGE CONTENT
   A real bulleted list: brand marker, 8px between items, indented
   from the paragraph edge. list-style is kept rather than replaced
   with a pseudo element, so the list keeps its semantics in
   VoiceOver. Navigation, card and furniture lists are excluded via
   one :not() selector list, which must stay on a single line: a
   line break inside a compound selector becomes a descendant
   combinator and silently retargets the rule.
============================================================ */

#main-content :where(.container, .main-content-area) :where(ul, ol):not([class*="nav"], [class*="menu"], [class*="grid"], [class*="card"], [class*="tab"], [class*="social"], [class*="crumb"], [class*="pagination"], [class*="filter"], [role]) {
  padding-inline-start: var(--sp-3);
  margin-block: var(--sp-3);
  list-style-position: outside;
}

#main-content :where(.container, .main-content-area) ul:not([class*="nav"], [class*="menu"], [class*="grid"], [class*="card"], [class*="tab"], [class*="social"], [class*="crumb"], [class*="pagination"], [class*="filter"], [role]) {
  list-style-type: square;
}

#main-content :where(.container, .main-content-area) ol:not([class*="nav"], [class*="menu"], [class*="grid"], [class*="card"], [class*="tab"], [class*="social"], [class*="crumb"], [class*="pagination"], [class*="filter"], [role]) {
  list-style-type: decimal;
}

#main-content :where(.container, .main-content-area) :where(ul, ol):not([class*="nav"], [class*="menu"], [class*="grid"], [class*="card"], [class*="tab"], [class*="social"], [class*="crumb"], [class*="pagination"], [class*="filter"], [role]) > li {
  padding-inline-start: var(--sp-1);
}

#main-content :where(.container, .main-content-area) :where(ul, ol):not([class*="nav"], [class*="menu"], [class*="grid"], [class*="card"], [class*="tab"], [class*="social"], [class*="crumb"], [class*="pagination"], [class*="filter"], [role]) > li + li {
  margin-block-start: var(--sp-1);
}

#main-content :where(.container, .main-content-area) :where(ul, ol):not([class*="nav"], [class*="menu"], [class*="grid"], [class*="card"], [class*="tab"], [class*="social"], [class*="crumb"], [class*="pagination"], [class*="filter"], [role]) > li::marker {
  color: var(--secondary-text);
  font-weight: 700;
}


/* Breadcrumbs and any other list inside a <nav> are furniture, not
   content. The course breadcrumb is a bare <ol> inside .container,
   so it has no class for the exclusion list above to catch and was
   picking up decimal numbering. */
#main-content nav :where(ul, ol),
#main-content [class*="crumb"] :where(ul, ol) {
  list-style: none !important;
  padding-inline-start: 0 !important;
  margin-block: 0 !important;
}
#main-content nav :where(ul, ol) > li,
#main-content [class*="crumb"] :where(ul, ol) > li {
  padding-inline-start: 0 !important;
  margin-block-start: 0 !important;
}


/* ============================================================
   EVENT STRIP, REBUILT
   One slim bar. Type, date and time on the left, "All events" as a
   right aligned text link on the right. Single line on desktop at
   or under 56px, two tidy lines on mobile at or under 88px.

   Ground changed from the brand colour to ink. White on the
   Stockton orange measured 2.95:1 and the preview day pink failed
   with every available text colour. Ink carries 15.7:1 on both
   colleges and both event types. The brand colour stays as the
   badge rule and the arrow.
============================================================ */

.event-archive-strip {
  background: var(--dark);
  padding: 0;
}
.event-archive-strip--preview-day { background: var(--dark); }

/* The strip's inner element also carries .container, so the content
   rhythm above would push its second line down by 24px on mobile.
   The strip sets its own spacing. */
#main-content .event-archive-strip__inner > *,
.event-archive-strip__inner > * { margin-block: 0 !important; }

.event-archive-strip__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: nowrap;
  min-block-size: 3rem;
  padding-block: var(--sp-1);
}

.event-archive-strip__text {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 var(--sp-2);
  margin: 0;
  min-inline-size: 0;
  font-size: 0.875rem;
  line-height: 1.4;
  color: rgba(245, 243, 240, 0.85);
}

.event-archive-strip__badge {
  flex: none;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  color: #F5F3F0;
  padding-inline-start: 0.625rem;
  border-inline-start: 2px solid var(--primary-fill);
}
.brand-ppc .event-archive-strip__badge { border-inline-start-color: var(--secondary); }

.event-archive-strip__when { min-inline-size: 0; }
.event-archive-strip__when strong { font-weight: 700; color: #F5F3F0; }
.event-archive-strip__sep { margin: 0 0.375rem; opacity: 0.45; }

.event-archive-strip__ctas {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex: none;
  margin: 0;
}

.event-archive-strip__link {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  color: #F5F3F0;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 2px;
}

/* The declaration above never reached the page. .event-archive-strip__ctas
   is a <p>, so the body copy link rule near the foot of this file matches
   these two anchors at 1-0-1 and beats 0-1-0. They rendered --link:
   #8229F0 on a Prior content page, 2.92:1, and #BC1C58 on Stockton,
   2.86:1, both on the strip's #1E1530. The ID here is what takes the
   colour back. 8 September 2026, job 2a. */
#main-content .event-archive-strip__link,
#main-content .event-archive-strip__link--strong,
#main-content .event-archive-strip__arrow {
  color: var(--primary-on-dark);   /* 6.72:1 on Prior, 6.81:1 on Stockton */
}

/* Both links in the strip are underlined at rest, and now say so.
   .event-archive-strip__link declares text-decoration: none and
   .event-archive-strip__link--strong declares underline, which reads as
   "Register underlined, All events not". Neither reaches the page: the same
   body copy rule that was taking the colour also supplies the underline, so
   both have been underlined at rest all along and the two declarations
   disagree with what renders. Stating it here at 1-1-0 makes the behaviour
   deliberate, so raising the specificity of anything in this block later
   cannot silently drop the underline off a link on a dark band.
   8 September 2026, job 6c. */
#main-content .event-archive-strip__link,
#main-content .event-archive-strip__link--strong {
  text-decoration: underline;
}

.event-archive-strip__link:hover { text-decoration: underline; }
.event-archive-strip__link:focus-visible {
  outline: 2px solid #F5F3F0;
  outline-offset: 3px;
}
.event-archive-strip__link--strong { text-decoration: underline; }
.event-archive-strip__arrow { margin-inline-start: 0.25rem; }

/* Two tidy lines on mobile: text on the first, link on the second,
   both left aligned against the container edge. */
@media (max-width: 47.9375rem) {
  .event-archive-strip__inner {
    flex-wrap: wrap;
    gap: var(--sp-1);
    padding-block: var(--sp-1);
    min-block-size: 0;
  }
  /* Keeps the two lines inside 88px even when the date wraps. */
  .event-archive-strip__text,
  .event-archive-strip__link { font-size: 0.8125rem; line-height: 1.35; }
  .event-archive-strip__text,
  .event-archive-strip__ctas { flex: 1 1 100%; }
  .event-archive-strip__ctas { justify-content: flex-start; }
  .event-archive-strip__badge {
    padding-inline-start: 0.5rem;
    font-size: 0.78125rem;
  }
}


/* ============================================================
   MOBILE FIXES, 4 September 2026
   From Gareth's phone screenshots of Stockton Level 2 and Parents.
============================================================ */

/* ---------- 1. Content sitting hard against the footer ----------
   .container carries padding-inline only, never vertical padding.
   38 pages, 19 per college, end with <section class="container">,
   so the last line of copy or a button butts straight onto the dark
   footer, which has no top padding of its own. Sections that set
   their own padding, and the CTA banner that is meant to run flush,
   are untouched because they do not carry .container on the section
   element itself. */
#main-content section.container {
  padding-block-end: var(--sp-5);
}

/* ---------- 2. Side margins varying down a page ----------
   A .container placed inside a column that is already inside a
   .container applies padding-inline twice: 40px at mobile, 96px at
   1280. On Parents that puts the CEDAR button and the paragraphs
   around it 20px further in than the headings above them. 41 pages
   are built this way. The outer container already provides the
   gutter, so the inner one gives it up. */
#main-content .container .container {
  padding-inline: 0;
}

/* ---------- 3. Core quote blocks read as loose paragraphs ----------
   The theme styles .atomix-pullquote but has no rule at all for the
   core quote block, so on Stockton Level 2 the quote and its <cite>
   "Sport student" looked like two stray lines rather than a quote.
   Nine blocks across five pages. Same language as the pull quote:
   a 2px brand rule, italic, and the attribution back in ink.

   The quote text is held at 24px minimum on purpose. At the brand
   secondary it measures about 4.1:1, which clears AA as large text
   but would fail at body size. */
#main-content blockquote.wp-block-quote {
  padding-inline-start: clamp(1rem, 3vw, 1.75rem);
  border-inline-start: 2px solid var(--secondary);
  max-width: 44ch;
  font-style: normal;
}

#main-content blockquote.wp-block-quote p {
  font-size: clamp(1.5rem, 3.2vw, 1.75rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  font-weight: 300;
  font-style: italic;
  color: var(--secondary);
  margin: 0;
}

#main-content blockquote.wp-block-quote p + p {
  margin-block-start: var(--sp-2);
}

/* The attribution. No dash before the name: house rule bans em
   dashes, and wptexturize turns " - " into an en dash. */
#main-content blockquote.wp-block-quote cite {
  display: block;
  margin-block-start: var(--sp-2);
  font-size: 0.9375rem;
  line-height: 1.4;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
}


/* ============================================================
   BODY COPY LINKS
   Added 4 September 2026. The global reset is
   a { color: inherit; text-decoration: none; }
   so a link inside a sentence had no underline and no colour of
   its own. 767 links across 207 pages were invisible as links.

   An underline is a non colour cue, which is what WCAG 1.4.1 asks
   for, so no icon is needed on ordinary links. The icon is kept for
   the links that leave the site, where it warns that the
   destination behaves differently.

   Link colour clears 4.5:1 on every ground it sits on:
     Stockton  #BC1C58 on #FFFAF7 5.88, on #FFE8DC 5.17
     Prior     #8229F0 on #FFFFFF 5.96, tint #B98CF7 on #1E1530 6.77
============================================================ */

:root, .brand-ssfc { --link: #BC1C58; }
.brand-ppc { --link: #B98CF7; }
/* Trust, 18 September 2026. The ground is light on every trust page, so one
   value serves the body copy: #00565E measures 8.42:1 on #FFFFFF, 7.94:1 on
   #F5F9F9 and 7.49:1 on #EBF3F4. A link inside a dark trust band is handled
   by the generic .atomix-section.is-dark rule below, which paints #F5F3F0;
   that measures 12.07:1 on #00353A and 5.89:1 on #006871, so it clears both
   trust dark grounds and needs no brand override. */
.brand-trust { --link: #00565E; }
.brand-ppc .section-light,
body.brand-ppc:not(.is-front-page) { --link: #8229F0; }
.brand-ppc .atomix-section.is-dark,
.brand-ppc .atomix-callout { --link: #B98CF7; }
.atomix-section.is-dark,
.atomix-callout { --link: #F5F3F0; }

/* Job 12, 6 September 2026: headings joined the list. A link inside an
   <h2> or <h3> was outside this rule, so it rendered as #8229F0 with no
   underline, which is colour as the only cue. Five such links sit in h3s
   on /pursglove/endeavour/. Stockton has none, because its equivalent
   Compass page is a draft, which is why this read as a Prior-only fault. */
#main-content :where(p, li, td, th, dd, blockquote, figcaption, h1, h2, h3, h4, h5, h6) a[href] {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

#main-content :where(p, li, td, th, dd, blockquote, figcaption, h1, h2, h3, h4, h5, h6) a[href]:hover {
  text-decoration-thickness: 2px;
}

#main-content :where(p, li, td, th, dd, blockquote, figcaption, h1, h2, h3, h4, h5, h6) a[href]:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Furniture keeps its own treatment: breadcrumbs, card links, the
   course footer links and anything inside a nav are not body copy.
   .event-card joined the list on 6 September 2026 with the heading
   selectors above, because its title is an h3 inside a card. */
#main-content nav :where(p, li, td) a[href],
#main-content :where(.courses-foot, .course-card, .news-card, .topic-card, .event-card) a[href] {
  text-decoration: none;
}

/* A link inside a sentence is prose wherever it sits, and the exclusion
   above was reaching real body copy.

   Everything that rule is for is card furniture, and none of it is inside
   a paragraph: a generated .course-card, .news-card and .topic-card is
   itself the <a>, so it has no descendant anchor at all; .event-card__btn
   sits in a <div class="event-card__cta">; and .courses-foot is the <p>
   rather than a wrapper around one. What the rule did catch was an editor
   reusing the card classes to build a content panel. On /stockton/support/
   four links inside two card-body paragraphs carried colour and no
   underline, 1.65:1 against the text beside them, which is colour as the
   only cue and fails WCAG 1.4.1.

   Restoring the underline for a p, li, td, th, dd or blockquote inside a
   card fixes those without touching one piece of furniture. Same
   specificity as the exclusion, 1-0-1, and later, so it wins; the hover
   thickening and the focus outline above are 1-0-2 and still win over
   this. .courses-foot is deliberately not in the list. 8 September 2026,
   job 3. */
#main-content :where(.course-card, .news-card, .topic-card, .event-card)
  :where(p, li, td, th, dd, blockquote) a[href] {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

/* Links that leave the site. The arrow is decorative, so it carries
   an empty alternative text and is not announced.

   6 September 2026, job 11: the selector was body copy only, so the
   header Apply now button, the footer Vacancies and social links and
   every off-site button carried no icon even once PHP marked them. */
#main-content :where(p, li, td, th, dd, blockquote) a.is-external::after,
#main-content :where(.btn, .wp-block-button__link, .wp-element-button).is-external::after,
.site-header a.is-external::after,
.mobile-nav a.is-external::after,
.site-footer a.is-external::after {
  content: "\2197\FE0E" / "";
  display: inline-block;
  margin-inline-start: 0.15em;
  font-size: 0.85em;
  line-height: 1;
  text-decoration: none;
}

/* The social icons are already a picture of where the link goes, and the
   arrow would sit on top of the glyph. */
.site-footer .footer-social__link.is-external::after { content: none; }

/* Older browsers ignore the alternative text syntax above and would
   read the arrow out. This hides it from the accessibility tree. */
@supports not (content: "x" / "") {
  #main-content :where(p, li, td, th, dd, blockquote) a.is-external::after,
  #main-content :where(.btn, .wp-block-button__link, .wp-element-button).is-external::after,
  .site-header a.is-external::after,
  .mobile-nav a.is-external::after,
  .site-footer a.is-external::after {
    content: none;
  }
}


/* ============================================================
   SECTION GAPS ON BLOCK BUILT PAGES
   Visual review item 6, applied 5 September 2026.

   36 pages across the two colleges carry their section padding as
   an inline style built from the WordPress spacing presets, and an
   inline style beats a stylesheet, so these need !important to
   land. Editing the presets in theme.json instead would move
   padding everywhere those presets are used, not only between
   sections.

   Left alone deliberately: .open-event-ssfc and .open-event-ppc.
   The 4 September proposal listed them as sections that set their
   own padding. They do not. They are grid panels with no
   padding-block at all, so giving them --section-y would add space
   that was never there.
============================================================ */

#main-content .wp-block-group[style*="--wp--preset--spacing--lg"],
#main-content .wp-block-group[style*="--wp--preset--spacing--xl"],
#main-content section[style*="--wp--preset--spacing--lg"],
#main-content section[style*="--wp--preset--spacing--xl"] {
  padding-top: var(--section-y) !important;
  padding-bottom: var(--section-y) !important;
}


/* ============================================================
   CRISIS BLOCK
   Job 1, 6 September 2026. atomix/crisis-block, on the sixteen
   wellbeing pages. It replaced five different wordings of the
   same numbers spread across .site-alert banners and inline
   paragraphs.

   Contrast, measured on the ground each college actually paints:
     Prior     body #1E1530 on #F6F2FB  15.78:1
               links #8229F0 on #F6F2FB  5.39:1
     Stockton  body #1E1530 on #FFF1EC  15.80:1
               links #BC1C58 on #FFF1EC  5.53:1
   The border is --primary-on-white, which is the same value as the
   link colour on both colleges, so the 2px rule is the college's
   own text colour as the brief asks.
============================================================ */

/* The block is a top-level child of <main>, so it carries the site
   container itself and lines up with the page copy either side of it. */
.crisis-block-wrap { padding-block: var(--section-y) 0; }

.crisis-block {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: #FFF1EC;                       /* Stockton */
  border: 2px solid var(--primary-on-white);
  border-radius: 2px;
  color: #1E1530;
  padding: 1.25rem 1.25rem 1.25rem 1.1rem;
  margin: 0 0 var(--section-y);
}
.brand-ppc .crisis-block { background: #F6F2FB; }

@media (min-width: 48rem) {
  .crisis-block { padding: 1.5rem 1.75rem; gap: 1.25rem; }
}

.crisis-block__icon {
  flex: none;
  display: block;
  margin-top: 0.15rem;
  color: var(--primary-on-white);
}
.crisis-block__icon svg { display: block; }

.crisis-block__body { min-width: 0; }

/* The heading names the block for a screen reader and orders the page
   correctly. It is deliberately small: this is a standing safety notice,
   not a section of the page, and it must not compete with the h1. */
.crisis-block__heading {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: #1E1530;
  margin: 0 0 0.5rem;
}

.crisis-block p {
  font-size: 0.9375rem;
  line-height: 1.6;
  margin: 0 0 0.35rem;
  color: #1E1530;
}
.crisis-block p:last-child { margin-bottom: 0; }

/* The telephone numbers are the point of the block, so they are heavier
   than ordinary body copy as well as underlined. */
.crisis-block a[href] {
  color: var(--primary-on-white);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  white-space: nowrap;
}
.crisis-block a[href]:hover { text-decoration-thickness: 2px; }
.crisis-block a[href]:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 2px;
}

/* A tel: link is off-site in the sense the marker uses, but it is not a
   web page, so it takes no external arrow. */
.crisis-block a.is-external::after { content: none; }


/* ============================================================
   PROSE MEASURE ON A PAGE
   Job 19, 6 September 2026.

   A page carried two measures at 1280: the intro sat at about 553px,
   which is the 34rem that .hero-body and .cta-sub already use, and
   every paragraph under it ran the full 1169px, because .container
   sets padding and no width. 1169px is about 145 characters, roughly
   twice a comfortable line.

   --measure is 34rem, which is the value the intro was already using
   and lands at about 68 characters in DM Sans at 1rem. That is the
   65 to 75 the brief asks for.

   Scoped to .wp-block-post-content, which is the block-authored page
   body. The course template renders through the
   <!--atomix-single-course--> marker inside wp:html and carries no
   post content wrapper, so it is exempt without naming it, which is
   what the brief asks.

   Only direct children of a .container are constrained. A paragraph
   inside a card, a stat strip, a split panel or a CTA is furniture
   with its own width and is untouched. Headings are included, or a
   two line h2 would run to 1169px over a 544px paragraph and the page
   would still be showing two measures.
============================================================ */
:root { --measure: 34rem; }

#main-content .wp-block-post-content .container > :where(p, ul, ol, dl, h2, h3, h4) {
  max-width: var(--measure);
}

/* A table, a figure and anything laid out in a grid keep the full
   width. Listed rather than left to inheritance, because they are the
   things a reader scans across rather than reads along. */
#main-content .wp-block-post-content .container > :where(figure, table, .wp-block-table, .wp-block-columns, .wp-block-buttons) {
  max-width: none;
}


/* ============================================================
   TABLES AT 375, AND THE BUS TIMETABLES AT 1280
   Job 20, 6 September 2026.

   A core table block clipped its last column with nothing to say so.
   The figure scrolls now, and the shadow at the edge is painted with
   the local/scroll background trick, so it appears only while there
   is more to scroll to and needs no script.

   min-inline-size is 20rem, 320px, which fits inside the 335px a
   375px viewport leaves after the container padding. With the cells
   wrapping, the cookies table fits without scrolling at all, which is
   what the brief prefers; a wider table scrolls and says so.
============================================================ */
#main-content figure.wp-block-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background:
    linear-gradient(to right, var(--bg) 30%, rgba(255, 255, 255, 0)) left center,
    linear-gradient(to left,  var(--bg) 30%, rgba(255, 255, 255, 0)) right center,
    radial-gradient(farthest-side at 0 50%,   rgba(30, 21, 48, 0.22), rgba(30, 21, 48, 0)) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(30, 21, 48, 0.22), rgba(30, 21, 48, 0)) right center;
  background-repeat: no-repeat;
  background-size: 2.5rem 100%, 2.5rem 100%, 0.85rem 100%, 0.85rem 100%;
  background-attachment: local, local, scroll, scroll;
}

#main-content figure.wp-block-table table { min-inline-size: 20rem; }

#main-content figure.wp-block-table :is(th, td) {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* The fifteen bus route tables are three columns of a stop and two
   times, and at 1280 the Stop cell took 594px of a full width table.
   Any three column table is held to 45rem. :has() is already used in
   this stylesheet for the split grid and the open event photo, so the
   support baseline is the same. */
@media (min-width: 64rem) {
  #main-content figure.wp-block-table:has(thead tr th:nth-child(3)):not(:has(thead tr th:nth-child(4))) {
    max-width: 45rem;
  }
}

/* ==========================================================================
   404 and search results, 8 September 2026
   ==========================================================================
   Both render through markers into templates/404.html and templates/search.html.
   Before this the colleges had neither template, so a missing page and a search
   both fell through to templates/index.html, whose only block is
   wp:post-content, and rendered an empty <main> with no h1 under a 404 or a 200.

   These use the existing section, container, kicker and button tokens, so
   nothing new is introduced to the palette or the spacing scale.
   ========================================================================== */

.error-404__heading,
.search-results__heading {
  margin: 0.25rem 0 0.75rem;
}

.error-404__sub,
.search-results__empty {
  max-width: var(--measure);
  color: var(--ink-mid);
}

.error-404__search {
  margin: 2rem 0;
  max-width: var(--measure);
}

.error-404__search-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.error-404__search-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.error-404__search-input {
  flex: 1 1 14rem;
  min-width: 0;
  padding: 0.75rem 1rem;
  font: inherit;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 2px;
}

.error-404__search-input:focus-visible,
.error-404__search-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.error-404__links {
  margin-top: 2rem;
}

.error-404__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
}

.search-results__list {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
}

.search-results__item {
  padding: 1.25rem 0;
  border-top: 1px solid var(--border-light);
}

.search-results__title {
  margin: 0 0 0.35rem;
  font-size: 1.25rem;
}

.search-results__excerpt {
  margin: 0;
  max-width: var(--measure);
  color: var(--ink-mid);
}

/* ============================================================
   BRAND: ATOMIX EDUCATIONAL TRUST (trust)
   Added 18 September 2026. Ratios measured, not estimated.
   ============================================================ */

/* Grounds. Every ratio below was measured on 18 September 2026 against the
   three grounds this brand actually paints: --bg #FFFFFF, --bg-mid #F5F9F9
   and --bg-deep #EBF3F4, in that order. An earlier draft of this block cited
   a ground of #F0F6F6, which is not a token in the set and never was; the
   values were right and the grounds were wrong. Corrected 18 September 2026. */
.brand-trust,
body.brand-trust:not(.is-front-page) {
  --primary: #006871;            /* 6.52:1 on #FFFFFF, 6.15:1 on #F5F9F9, 5.80:1 on #EBF3F4 */
  --secondary-text: #00565E;     /* 8.42:1 on #FFFFFF, 7.94:1 on #F5F9F9, 7.49:1 on #EBF3F4 */
  --bg: #FFFFFF;
  --bg-mid: #F5F9F9;             /* 4% teal tint */
  --bg-deep: #EBF3F4;            /* 8% teal tint */
  --ink: rgba(16, 38, 42, 0.85); /* renders #34474A on white; 9.84:1 on #FFFFFF, 9.42:1 on #F5F9F9, 9.02:1 on #EBF3F4 */
  --ink-mid: #4A6165;            /* 6.59:1 on #FFFFFF, 6.21:1 on #F5F9F9, 5.85:1 on #EBF3F4 */
  --ink-light: #566B6F;          /* 5.63:1 on #FFFFFF, 5.31:1 on #F5F9F9, 5.00:1 on #EBF3F4 */
  --border: rgba(16, 38, 42, 0.10);
  --border-light: rgba(16, 38, 42, 0.06);

  /* ---- The other fourteen tokens, added 18 September 2026 ----
     Until this date .brand-trust set ten tokens and inherited the rest from
     the :root, .brand-ssfc block, which is Stockton's. That meant a trust
     page painted Stockton's orange #FF6340 on every filled button and CTA
     band, Stockton's pink #E8266E on every secondary, and #1E1530 for --dark
     rather than the trust deep. It looked like a Stockton page in teal text.
     A brand block on this theme has to set all 24 tokens or it inherits a
     college; .brand-ppc sets all 24, and this one now does too.

     The trust palette holds one brand colour, the teal. It has no second
     brand colour, so the four --secondary tokens are mapped onto the teal
     family rather than invented: --secondary and --secondary-fill take
     #00565E, which is trust-primary-dk and already an approved value.
     If the trust is ever given a real secondary colour, these four are the
     rows to change and nothing else. */

  --primary-fill:       #006871;   /* the brand teal as a fill */
  --primary-on-white:   #006871;   /* 6.52:1 on #FFFFFF */
  --primary-on-dark:    #A6E7ED;   /* 9.73:1 on #00353A, 4.75:1 on #006871 */
  --primary-dk:         #00565E;
  --dark:               #00353A;   /* trust-deep. NOT #1E1530, which is the colleges' */

  --secondary:          #00565E;   /* no second brand colour exists; see note above */
  --secondary-fill:     #00565E;
  --on-secondary:       #FFFFFF;   /* 8.42:1 on #00565E */
  --secondary-hover:    #00353A;   /* 13.37:1 with white */

  /* Text on a solid band. A trust band is painted from either --primary-fill
     #006871 or --dark #00353A, so both values have to clear 4.5:1 on BOTH.
     That is the difference from the colleges, where a dark band is always
     #1E1530 and one ink covers it. */
  --band-ink:           #FFFFFF;   /* 6.52:1 on #006871, 13.37:1 on #00353A */
  --band-ink-soft:      #C7E4E7;   /* 4.87:1 on #006871, 9.98:1 on #00353A */

  /* Text on a control filled with the brand's own colour. Never re-scoped,
     because a .btn-primary keeps its teal fill wherever it sits. */
  --on-primary-fill:    #FFFFFF;   /* 6.52:1 on #006871 */
  --primary-fill-hover: #00565E;   /* 8.42:1 with --on-primary-fill */

  --cta-band:           var(--primary-fill);
}

/* A dark band on this brand is painted from either --primary-fill #006871 or
   --dark #00353A, so the ink on it has to clear 4.5:1 on BOTH, not just the
   darker one. #9BE0E6 was here until 18 September 2026 and was withdrawn: it
   measures 9.04:1 on #00353A but only 4.41:1 on #006871, which is large-text
   only and fails body copy. #A6E7ED is the same hue a step lighter and clears
   both. Do not "restore" #9BE0E6; it is the one value that looks sufficient
   because the deeper ground flatters it. */
.brand-trust .atomix-section.is-dark,
.brand-trust .atomix-callout {
  --primary: #A6E7ED;            /* 9.73:1 on #00353A, 4.75:1 on #006871, 6.13:1 on #00565E */
  --secondary-text: #A6E7ED;
}

/* Academy cards. Added 18 September 2026. */
.academy-cards .wp-block-column { display: flex; }
.academy-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  padding: 1.5rem;
  background: var(--bg-mid);
  border: 1px solid var(--border);
  border-radius: 2px;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.academy-card:hover,
.academy-card:focus-within { background: var(--bg-deep); border-color: var(--primary); }
.academy-card-logo { max-height: 56px; width: auto; align-self: flex-start; }
.academy-card-title { margin: 0; font-weight: 700; color: var(--primary); }
.academy-card-body { margin: 0; color: var(--ink-mid); }
.academy-card-link { margin: 0; margin-top: auto; }
.academy-card-link a { color: var(--secondary-text); }
@media (max-width: 781px) { .academy-card { padding: 1.25rem; } }

/* ============================================================
   TRUST HEADER AND FOOTER
   Added 18 September 2026 with parts/header-trust.html and
   parts/footer-trust.html. Every pairing below was measured on that date
   against the ground the element actually paints, not against white.

   These selectors are all .brand-trust scoped or on a class that only the
   trust parts emit, so none of them can match anything on blog 2 or blog 3.
   ============================================================ */

/* Header band. There was no .brand-trust .site-header rule, so before this the
   trust header painted nothing and the page content scrolled under the links.
   Stockton's is a 0.97 tint of its cream and Prior's a 0.95 tint of its dark;
   the trust is light first, so this is a 0.97 tint of white. Ratios below are
   quoted against solid #FFFFFF, which is the worst case: the band only gets
   darker as page content passes under it, and every value here is a dark ink
   on a light ground, so a darker ground can only raise the ratio. */
.brand-trust .site-header {
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(16, 38, 42, 0.08);
}
.brand-trust .site-header.is-scrolled {
  box-shadow: 0 2px 24px rgba(16, 38, 42, 0.08);
}

/* The trust header has no Apply now button, so the nav has the row to itself
   and sits hard right rather than leaving a gap where the button was. */
.site-header--trust .header-inner {
  justify-content: space-between;
}

.site-header--trust .primary-nav {
  margin-inline-start: auto;
}

/* Navigation links. Follows Stockton's shape, which is the light-ground one:
   the resting state is --ink-mid, hover goes to full --ink, and the current
   page takes --primary and a heavier weight. Prior's rgba() approach is not
   copied, because it was built for a dark band. */
.brand-trust .primary-nav a              { color: var(--ink-mid); }   /* #4A6165, 6.59:1 on #FFFFFF */
.brand-trust .primary-nav a:hover        { color: var(--dark); }      /* #00353A, 13.37:1 on #FFFFFF */
.brand-trust .primary-nav a[aria-current="page"] {
  color: var(--primary);                                              /* #006871, 6.52:1 on #FFFFFF */
  font-weight: 500;
}

.brand-trust .primary-nav .sub-menu   { background: #FFFFFF; border-color: rgba(16, 38, 42, 0.12); }
.brand-trust .primary-nav .sub-menu a { color: var(--ink-mid); }      /* 6.59:1 on #FFFFFF */

/* Mobile drawer. .mobile-nav hardcodes #1E1530, the colleges' aubergine, so
   the trust drawer would have been a college-coloured panel behind a teal
   logo. It takes the trust deep instead. */
.brand-trust .mobile-nav { background: var(--dark); }                 /* #00353A */
.brand-trust .mobile-nav-body a        { color: #FFFFFF; }            /* 13.37:1 on #00353A */
.brand-trust .mobile-nav-body a:hover  { color: var(--band-ink-soft); } /* #C7E4E7, 9.98:1 */

/* Footer body. .site-footer already paints var(--dark), which on this brand
   is #00353A, and rgba(245,243,240,0.85) on it measures 9.12:1. */
.trust-footer {
  padding: 3rem 1.25rem 2.5rem;
}

.trust-footer__inner {
  max-width: 76rem;
  margin: 0 auto;
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
  .trust-footer__inner {
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: 2rem;
  }
}

.trust-footer__logo {
  display: inline-block;
  margin-bottom: 1rem;
}

.trust-footer__logo img {
  height: 44px;
  width: auto;          /* against a fixed height, so the mark cannot stretch */
  display: block;
}

/* Brand law: no box, no keyline, no recolour, no re-spacing. The focus ring
   is an outline offset clear of the mark rather than an underline, because an
   underline under an image reads as nothing. */
.trust-footer__logo:focus-visible {
  outline: 2px solid var(--band-ink);
  outline-offset: 4px;
}

.trust-footer__strapline {
  margin: 0 0 1rem;
  max-width: 22rem;
  color: var(--band-ink-soft);   /* #C7E4E7, 9.98:1 on #00353A */
}

.trust-footer__heading {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--band-ink);        /* #FFFFFF, 13.37:1 on #00353A */
}

.trust-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.trust-footer__list a,
.trust-footer__contact-line a {
  color: var(--band-ink);        /* #FFFFFF, 13.37:1 on #00353A */
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  /* WCAG 2.2 AA 2.5.8, target size (minimum), is 24 by 24 CSS pixels. A
     footer link at 1rem/1.5 is 24px tall on its own, and the 0.5rem gap
     between rows keeps two adjacent targets from overlapping. Stated rather
     than left to chance, because the list gap is the thing that guarantees
     it and a future tightening of that gap would break it. */
  display: inline-block;
  min-height: 24px;
  line-height: 1.5;
}

.trust-footer__list a:hover,
.trust-footer__contact-line a:hover {
  text-decoration-thickness: 2px;
}

.trust-footer__list a:focus-visible,
.trust-footer__contact-line a:focus-visible,
.trust-footer__address a:focus-visible {
  outline: 2px solid var(--band-ink);
  outline-offset: 2px;
}

.trust-footer__address {
  margin: 0 0 0.75rem;
  font-style: normal;            /* <address> italicises by default */
  color: var(--band-ink-soft);   /* #C7E4E7, 9.98:1 on #00353A */
}

.trust-footer__contact-line {
  margin: 0 0 0.5rem;
}

.trust-footer__company {
  margin: 0.35rem 0 0;
  color: var(--band-ink-soft);   /* #C7E4E7, 9.98:1 on #00353A */
  font-size: 0.875rem;
}

/* The enquiries address pinned to the foot of the mobile drawer, where the
   colleges put Apply now. 2px radius, never a pill. */
.mobile-nav-contact {
  display: block;
  padding: 0.85rem 1rem;
  border: 2px solid var(--band-ink);
  border-radius: 2px;
  text-align: center;
  color: var(--band-ink);
  text-decoration: none;
  font-weight: 700;
  min-height: 44px;              /* WCAG 2.2 AA 2.5.8, comfortably over 24px */
}

.mobile-nav-contact:hover {
  background: var(--band-ink);
  color: var(--dark);            /* #00353A on #FFFFFF, 13.37:1 */
}

.mobile-nav-contact:focus-visible {
  outline: 2px solid var(--band-ink);
  outline-offset: 3px;
}

/* Trust mobile nav, current page. Added 19 September 2026.
   --primary resolves to #006871 inside the trust panel, which measured 2.05:1 on #00353A and was rejected.
   #A6E7ED measures 9.73:1 on #00353A. */
.mobile-nav--trust .mobile-nav-links a[aria-current="page"],
.mobile-nav--trust .mobile-nav-links .current-menu-item > a { color: #A6E7ED; }

/* Trust page layout. Added 19 September 2026.
   The college theme sets contentSize to 100% and builds each section full bleed, so plain
   post content on the trust pages ran edge to edge with no gutter. Prose sits in a 52rem
   measure, sections and card grids in a 78rem container, both centred. Scoped to the trust brand. */
.brand-trust .entry-content > * {
  box-sizing: border-box;
  max-width: 78rem;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}
.brand-trust .entry-content > :is(p, ul, ol, h1, h2, h3, h4, blockquote, figure.wp-block-table) {
  max-width: 60rem;
}
.brand-trust .entry-content > .atomix-section {
  max-width: none;
  padding-inline: 0;
}
.brand-trust .atomix-section > .container {
  max-width: 78rem;
  margin-inline: auto !important;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}
.brand-trust .entry-content > h1 { margin-top: 2.5rem; }
.brand-trust .entry-content > h2 { margin-top: 2rem; }

/* Trust home page: hero, news grid, section tints (19 Sep 2026).
   Hero ink is white on #006871 (6.52:1); kicker #A6E7ED on #006871 (4.75:1). */
.brand-trust .trust-hero {
  background: #006871 url(assets/trust-mark.png) no-repeat;
  background-position: right clamp(-14rem, -12vw, -6rem) center;
  background-size: auto 150%;
  color: #FFFFFF;
  padding-block: clamp(3.5rem, 9vw, 7.5rem);
  overflow: hidden;
}
.brand-trust .trust-hero .container > * { max-width: 46rem; }
.brand-trust .trust-hero .atomix-kicker { color: #A6E7ED; }
.brand-trust .trust-hero h1 { color: #FFFFFF; font-size: clamp(2.6rem, 6.5vw, 5rem); line-height: 1.02; letter-spacing: -0.02em; margin: 0.5rem 0 1.25rem; max-width: 14ch; }
.brand-trust .trust-hero p { color: #FFFFFF; font-size: clamp(1.05rem, 1.5vw, 1.25rem); max-width: 38rem; }
.brand-trust .trust-hero .wp-block-buttons { margin-top: 1.75rem; }
.brand-trust .trust-hero .wp-block-button__link { background: #FFFFFF; color: #006871; border-color: #FFFFFF; }
.brand-trust .trust-hero .wp-block-button__link:hover { background: #EBF3F4; color: #00565E; }
.brand-trust .trust-hero .is-style-outline .wp-block-button__link { background: transparent; color: #FFFFFF; border-color: #FFFFFF; }
.brand-trust .trust-hero .is-style-outline .wp-block-button__link:hover { background: #FFFFFF; color: #006871; }
@media (max-width: 47.99rem) {
  .brand-trust .trust-hero { background-size: auto 75%; background-position: right -13rem bottom -8rem; }
}
.brand-trust .atomix-section.is-tint { background: #F5F9F9; }
.brand-trust .trust-news .wp-block-post-template { gap: 1.5rem; }
.brand-trust .trust-news .wp-block-post { background: #FFFFFF; border: 1px solid #D5E3E5; border-radius: 2px; padding: 0 0 1.25rem; margin: 0; }
.brand-trust .trust-news .wp-block-post-featured-image { margin: 0; }
.brand-trust .trust-news .wp-block-post-featured-image img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.brand-trust .trust-news .wp-block-post-date { font-size: 0.875rem; color: #4A6165; padding: 1rem 1.25rem 0; margin: 0; }
.brand-trust .trust-news .wp-block-post-title { font-size: 1.25rem; line-height: 1.25; padding: 0 1.25rem; margin: 0.4rem 0 0.6rem; }
.brand-trust .trust-news .wp-block-post-title a { color: #00565E; text-decoration: none; }
.brand-trust .trust-news .wp-block-post-title a:hover, .brand-trust .trust-news .wp-block-post-title a:focus-visible { text-decoration: underline; }
.brand-trust .trust-news .wp-block-post-excerpt { padding: 0 1.25rem; font-size: 0.95rem; margin: 0; }
.brand-trust .trust-news .wp-block-post-excerpt__more-text { display: none; }
.brand-trust .trust-news .wp-block-query-no-results p { color: #4A6165; }
.brand-trust .trust-news + .wp-block-buttons { margin-top: 1.5rem; }
.brand-trust .trust-welcome { display: grid; gap: 2rem; }
@media (min-width: 60rem) {
  .brand-trust .trust-welcome { grid-template-columns: 1fr 2fr; gap: 3rem; align-items: start; }
  .brand-trust .trust-welcome > :first-child { position: sticky; top: 6rem; }
}
.brand-trust .trust-welcome .atomix-kicker { margin-bottom: 0.5rem; }
.brand-trust .trust-welcome p.trust-signoff { border-top: 2px solid #006871; padding-top: 1rem; margin-top: 1.5rem; }
.brand-trust .atomix-section.is-tint .atomix-section { background: transparent; padding-top: 0; }
.brand-trust .atomix-section.is-tint .academy-card { background: #FFFFFF; }

/* ==========================================================================
   Trust panels (19 Sep 2026). Rounded 20px content boxes with a 20px page
   gutter, matching the current trust site. Each panel or card can carry a
   circle icon notched into its bottom right corner (.panel-notch + .panel-icon).
   The icon is an inline SVG in an HTML block: swap the <svg> for any 24px
   stroke icon (Lucide, Heroicons, Phosphor) and it inherits colour and size.
   --notch-bg must equal the background the panel sits on.
   ========================================================================== */
.brand-trust { --panel-radius: 20px; --page-gutter: 1.25rem; --notch-bg: #FFFFFF; --panel-max: 96rem; }
.brand-trust .entry-content > .panel,
.brand-trust .entry-content > .trust-band {
  box-sizing: border-box;
  width: calc(100% - (2 * var(--page-gutter)));
  max-width: var(--panel-max);
  margin-inline: auto !important;
  margin-block: 0 !important;
}
.brand-trust .entry-content > .panel + .panel,
.brand-trust .entry-content > .panel + .trust-band,
.brand-trust .entry-content > .trust-band + .panel,
.brand-trust .entry-content > .trust-band + .trust-band { margin-top: var(--page-gutter) !important; }
.brand-trust .entry-content > .panel:first-child { margin-top: var(--page-gutter) !important; }
.brand-trust .entry-content > .panel:last-child,
.brand-trust .entry-content > .trust-band:last-child { margin-bottom: var(--page-gutter) !important; }
.brand-trust .panel {
  position: relative;
  border-radius: var(--panel-radius);
  padding: clamp(1.5rem, 4vw, 3.75rem);
  overflow: hidden;
}
.brand-trust .entry-content > .trust-band { padding: clamp(1.5rem, 4vw, 3.75rem) clamp(0.5rem, 2vw, 1.5rem); }
.brand-trust .panel--teal { background: #006871 url(assets/trust-mark.png) no-repeat right clamp(-14rem, -12vw, -6rem) center / auto 150%; color: #FFFFFF; --notch-bg: #FFFFFF; }
.brand-trust .panel--teal h1, .brand-trust .panel--teal h2, .brand-trust .panel--teal p { color: #FFFFFF; }
.brand-trust .panel--teal .atomix-kicker { color: #A6E7ED; } /* 4.75:1 on #006871 */
.brand-trust .panel--tint { background: #F5F9F9; --notch-bg: #FFFFFF; }
.brand-trust .panel--tint .setting-card { --notch-bg: #F5F9F9; }
.brand-trust .panel--dark { background: #00353A; color: #FFFFFF; --notch-bg: #FFFFFF; }
.brand-trust .panel--dark h2, .brand-trust .panel--dark p { color: #FFFFFF; }
.brand-trust .panel--dark .atomix-kicker { color: #A6E7ED; } /* 9.73:1 on #00353A */
.brand-trust .panel--dark .wp-block-button__link { background: #FFFFFF; color: #00353A; border-color: #FFFFFF; }
.brand-trust .panel--dark .is-style-outline .wp-block-button__link { background: transparent; color: #FFFFFF; border-color: #FFFFFF; }
.brand-trust .panel--dark .is-style-outline .wp-block-button__link:hover { background: #FFFFFF; color: #00353A; }
.brand-trust .panel .container { max-width: none; padding-inline: 0; }
.brand-trust .panel > * + * { margin-top: 1rem; }
@media (max-width: 47.99rem) {
  .brand-trust { --page-gutter: 0.75rem; }
  .brand-trust .panel--teal { background-size: auto 75%; background-position: right -13rem bottom -8rem; }
}

/* Notch and circle icon */
.brand-trust .panel-notch {
  position: absolute; right: 0; bottom: 0; width: 5rem; height: 5rem;
  background: var(--notch-bg);
  border-top-left-radius: var(--panel-radius);
  pointer-events: none;
}
.brand-trust .panel-notch::before,
.brand-trust .panel-notch::after {
  content: ""; position: absolute; width: var(--panel-radius); height: var(--panel-radius);
  background: radial-gradient(circle at 0 0, transparent calc(var(--panel-radius) - 0.5px), var(--notch-bg) var(--panel-radius));
}
.brand-trust .panel-notch::before { left: calc(-1 * var(--panel-radius)); bottom: 0; }
.brand-trust .panel-notch::after { right: 0; top: calc(-1 * var(--panel-radius)); }
.brand-trust .panel-icon {
  position: absolute; right: 0.25rem; bottom: 0.25rem; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; border-radius: 50%;
  background: #00353A; color: #FFFFFF;
  transition: transform 160ms ease, background-color 160ms ease;
}
.brand-trust .panel-icon svg { width: 1.375rem; height: 1.375rem; }
.brand-trust .panel-icon:hover { background: #006871; transform: translate(1px, -1px); }
.brand-trust .panel-icon:focus-visible { outline: 3px solid #006871; outline-offset: 3px; }
.brand-trust .panel--dark .panel-icon { background: #006871; }
.brand-trust .panel--dark .panel-icon:hover { background: #00565E; }
@media (prefers-reduced-motion: reduce) { .brand-trust .panel-icon { transition: none; } .brand-trust .panel-icon:hover { transform: none; } }

/* Hero panel */
.brand-trust .panel--hero { padding-block: clamp(3rem, 8vw, 6.5rem); min-height: min(70vh, 40rem); display: flex; flex-direction: column; justify-content: center; }
.brand-trust .panel--hero > * { max-width: 46rem; }
.brand-trust .panel--hero h1 { font-size: clamp(2.6rem, 6.5vw, 5rem); line-height: 1.02; letter-spacing: -0.02em; margin: 0.5rem 0 1.25rem; max-width: 14ch; }
.brand-trust .panel--hero p { font-size: clamp(1.05rem, 1.5vw, 1.25rem); max-width: 38rem; }
.brand-trust .panel--hero .wp-block-buttons { margin-top: 1.75rem; }
.brand-trust .panel--hero .wp-block-button__link { background: #FFFFFF; color: #006871; border-color: #FFFFFF; }
.brand-trust .panel--hero .wp-block-button__link:hover { background: #EBF3F4; color: #00565E; }
.brand-trust .panel--hero .is-style-outline .wp-block-button__link { background: transparent; color: #FFFFFF; border-color: #FFFFFF; }
.brand-trust .panel--hero .is-style-outline .wp-block-button__link:hover { background: #FFFFFF; color: #006871; }
.brand-trust .panel--hero .panel-icon { background: #00353A; color: #FFFFFF; }
.brand-trust .panel--hero .panel-icon:hover { background: #006871; }
.brand-trust .panel--hero .panel-icon:focus-visible { outline-color: #00353A; }

/* Setting cards: borderless, soft shadow, logo, equal height, three per row */
.brand-trust .setting-cards { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-top: 1.75rem; }
@media (min-width: 40rem) { .brand-trust .setting-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .brand-trust .setting-cards { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
.brand-trust .setting-card {
  position: relative; display: flex; flex-direction: column;
  background: #FFFFFF; border: 0; border-radius: var(--panel-radius);
  padding: 1.75rem 1.75rem 4.25rem;
  box-shadow: 0 1px 2px rgba(0, 53, 58, 0.06), 0 12px 32px rgba(0, 53, 58, 0.10);
  transition: box-shadow 180ms ease, transform 180ms ease;
}
.brand-trust .setting-card:hover, .brand-trust .setting-card:focus-within { box-shadow: 0 2px 4px rgba(0, 53, 58, 0.08), 0 18px 44px rgba(0, 53, 58, 0.16); transform: translateY(-2px); }
.brand-trust .setting-card-logo { height: 4.5rem; display: flex; align-items: center; margin-bottom: 1.25rem; }
.brand-trust .setting-card-logo img { max-height: 4.5rem; max-width: 11rem; width: auto; height: auto; object-fit: contain; }
.brand-trust .setting-card-wordmark { font-weight: 700; font-size: 1.5rem; line-height: 1.1; color: #006871; letter-spacing: -0.01em; }
.brand-trust .setting-card-kicker { font-size: 0.8125rem; font-weight: 700; color: #00565E; margin: 0 0 0.35rem; }
.brand-trust .setting-card-title { font-size: 1.25rem; line-height: 1.25; margin: 0 0 0.5rem; color: #10262A; }
.brand-trust .setting-card-body { font-size: 0.95rem; line-height: 1.55; margin: 0; color: #34474A; }
@media (prefers-reduced-motion: reduce) { .brand-trust .setting-card { transition: none; } .brand-trust .setting-card:hover { transform: none; } }

/* Welcome grid inside a panel */
.brand-trust .panel .trust-welcome { margin-top: 0; }
.brand-trust .setting-card { padding-bottom: 5.25rem; }
.brand-trust .setting-card-body { padding-right: 1rem; }
@media (min-width: 64rem) {
  .brand-trust .setting-card--wide { grid-column: 1 / -1; display: grid; grid-template-columns: 11rem 1fr; column-gap: 2rem; align-items: center; padding-bottom: 1.75rem; padding-right: 6rem; }
  .brand-trust .setting-card--wide .setting-card-logo { grid-row: 1 / span 3; margin: 0; }
}
.brand-trust .entry-content > .trust-band { padding-inline: clamp(1.5rem, 4vw, 3.75rem); }
.brand-trust .entry-content { padding-bottom: var(--page-gutter); }
.brand-trust .panel--dark p, .brand-trust .panel--tint > p { max-width: 42rem; }
.brand-trust .setting-card-logo:empty { display: none; }

/* Panel rows: side by side panels and photo tiles (19 Sep 2026) */
.brand-trust .entry-content > .panel-row {
  box-sizing: border-box; width: calc(100% - (2 * var(--page-gutter))); max-width: var(--panel-max);
  margin-inline: auto !important; margin-block: 0 !important;
  display: grid; grid-template-columns: 1fr; gap: var(--page-gutter);
}
.brand-trust .entry-content > :is(.panel, .trust-band, .panel-row) + :is(.panel, .trust-band, .panel-row) { margin-top: var(--page-gutter) !important; }
.brand-trust .entry-content > .panel-row:first-child { margin-top: var(--page-gutter) !important; }
.brand-trust .panel-row > .panel { width: auto; min-width: 0; }
.brand-trust .panel--image { padding: 0; background: #EBF3F4; }
.brand-trust .panel--image > .wp-block-image, .brand-trust .panel--image > figure { margin: 0; height: 100%; }
.brand-trust .panel--image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.brand-trust .panel-row > .panel--image { aspect-ratio: 4 / 3; }
@media (min-width: 64rem) {
  .brand-trust .panel-row--split { grid-template-columns: 3fr 2fr; }
  .brand-trust .panel-row--3 { grid-template-columns: repeat(3, 1fr); }
  .brand-trust .panel-row--split > .panel--image { aspect-ratio: auto; min-height: 100%; }
  .brand-trust .panel-row--3 > .panel--image { aspect-ratio: 3 / 2; }
}
.brand-trust .panel--image .panel-notch { --notch-bg: #FFFFFF; }
.brand-trust .trust-welcome .ceo-photo { margin: 1.5rem 0 0; max-width: 18rem; border-radius: var(--panel-radius); overflow: hidden; }
.brand-trust .trust-welcome .ceo-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; }
.brand-trust .panel--image figcaption { position: absolute; left: 1rem; bottom: 1rem; margin: 0; padding: 0.4rem 0.75rem; background: rgba(0, 53, 58, 0.85); color: #FFFFFF; font-size: 0.8125rem; border-radius: 2px; }
@media (min-width: 64rem) {
  .brand-trust .entry-content > .panel-row--split { grid-template-columns: 3fr 2fr; }
  .brand-trust .entry-content > .panel-row--3 { grid-template-columns: repeat(3, 1fr); }
}
.brand-trust .entry-content > .panel-row { padding: 0; }
.brand-trust .panel--image img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; }
.brand-trust .panel--image > .wp-block-image, .brand-trust .panel--image > figure { position: static; height: auto; }
.brand-trust .panel-row > .panel--image { min-height: 16rem; }
.brand-trust .entry-content > .panel-row:last-child { margin-bottom: var(--page-gutter) !important; }

/* Buttons on the trust brand: 10px radius so they sit with the 20px panels (Gareth, 19 Sep 2026) */
.brand-trust .wp-block-button__link,
.brand-trust .wp-element-button,
.brand-trust .btn-primary,
.brand-trust .btn-outline-light,
.brand-trust .btn { border-radius: 10px; }

/* Setting cards v2: the notch is cut out of the card with a mask, and the shadow is a
   drop-shadow on the wrapper, so it follows the cut and there is no flat patch behind the icon. */
.brand-trust .setting-card-wrap {
  position: relative; display: flex; min-width: 0;
  filter: drop-shadow(0 1px 2px rgba(0, 53, 58, 0.06)) drop-shadow(0 12px 28px rgba(0, 53, 58, 0.12));
  transition: filter 180ms ease, transform 180ms ease;
}
.brand-trust .setting-card-wrap:hover, .brand-trust .setting-card-wrap:focus-within {
  filter: drop-shadow(0 2px 4px rgba(0, 53, 58, 0.08)) drop-shadow(0 18px 40px rgba(0, 53, 58, 0.18));
  transform: translateY(-2px);
}
.brand-trust .setting-card-wrap > .setting-card { flex: 1 1 auto; width: 100%; box-shadow: none; transform: none; transition: none; }
.brand-trust .setting-card-wrap > .setting-card:hover { box-shadow: none; transform: none; }
.brand-trust .setting-card-wrap > .panel-icon { right: 0.25rem; bottom: 0.25rem; }
.brand-trust .setting-card-wrap .panel-notch { display: none; }
.brand-trust .setting-card {
  --n: 5rem; --r: var(--panel-radius);
  -webkit-mask:
    linear-gradient(#000 0 0) 0 0 / calc(100% - var(--n)) calc(100% - var(--r) + 2px) no-repeat,
    linear-gradient(#000 0 0) 0 100% / calc(100% - var(--n) - var(--r)) var(--r) no-repeat,
    radial-gradient(circle at 0 0, #000 calc(var(--r) - 0.5px), transparent var(--r)) calc(100% - var(--n)) 100% / var(--r) var(--r) no-repeat,
    linear-gradient(#000 0 0) 0 0 / calc(100% - var(--r) + 2px) calc(100% - var(--n)) no-repeat,
    linear-gradient(#000 0 0) 100% 0 / var(--r) calc(100% - var(--n) - var(--r)) no-repeat,
    radial-gradient(circle at 0 0, #000 calc(var(--r) - 0.5px), transparent var(--r)) 100% calc(100% - var(--n)) / var(--r) var(--r) no-repeat,
    radial-gradient(circle at 100% 100%, transparent calc(var(--r) - 0.5px), #000 var(--r)) calc(100% - var(--n) + var(--r)) calc(100% - var(--n) + var(--r)) / var(--r) var(--r) no-repeat;
  mask:
    linear-gradient(#000 0 0) 0 0 / calc(100% - var(--n)) calc(100% - var(--r) + 2px) no-repeat,
    linear-gradient(#000 0 0) 0 100% / calc(100% - var(--n) - var(--r)) var(--r) no-repeat,
    radial-gradient(circle at 0 0, #000 calc(var(--r) - 0.5px), transparent var(--r)) calc(100% - var(--n)) 100% / var(--r) var(--r) no-repeat,
    linear-gradient(#000 0 0) 0 0 / calc(100% - var(--r) + 2px) calc(100% - var(--n)) no-repeat,
    linear-gradient(#000 0 0) 100% 0 / var(--r) calc(100% - var(--n) - var(--r)) no-repeat,
    radial-gradient(circle at 0 0, #000 calc(var(--r) - 0.5px), transparent var(--r)) 100% calc(100% - var(--n)) / var(--r) var(--r) no-repeat,
    radial-gradient(circle at 100% 100%, transparent calc(var(--r) - 0.5px), #000 var(--r)) calc(100% - var(--n) + var(--r)) calc(100% - var(--n) + var(--r)) / var(--r) var(--r) no-repeat;
}
@media (min-width: 64rem) {
  .brand-trust .setting-card--wide-wrap { grid-column: 1 / -1; }
  .brand-trust .setting-card-wrap > .setting-card--wide { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) { .brand-trust .setting-card-wrap { transition: none; } .brand-trust .setting-card-wrap:hover { transform: none; } }

/* Crest on teal panels, v2 (19 Sep 2026): drawn on a pseudo-element at 55% so white text over it
   still clears 4.5:1 (about #1C7981 under the lines, 4.8:1), sat to the right and vertically centred. */
.brand-trust .panel--teal { background-image: none; }
.brand-trust .panel--teal::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url(assets/trust-mark.png) no-repeat right -3rem center / auto 104%;
  opacity: 0.45;
}
.brand-trust .panel--teal > :not(.panel-notch):not(.panel-icon) { position: relative; z-index: 1; }
.brand-trust .panel--teal > .panel-notch, .brand-trust .panel--teal > .panel-icon { z-index: 2; }
@media (max-width: 47.99rem) {
  .brand-trust .panel--teal::before { background-size: auto 70%; background-position: right -6rem bottom -3rem; }
}
/* Page heroes (not the home page): shorter, title and standfirst only */
.brand-trust .panel--page { min-height: min(52vh, 30rem); padding-block: clamp(2.5rem, 6vw, 5rem); }
.brand-trust .panel--page h1 { font-size: clamp(2.4rem, 5.5vw, 4.25rem); max-width: 16ch; }
.brand-trust .panel--white { background: #FFFFFF; box-shadow: 0 1px 2px rgba(0, 53, 58, 0.05), 0 10px 28px rgba(0, 53, 58, 0.08); }
.brand-trust .panel > h2:first-child, .brand-trust .panel > .wp-block-heading:first-child { margin-top: 0; }
.brand-trust .panel > :is(p, ul, ol, h2, h3) { max-width: 60rem; }
.brand-trust .panel h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.1; margin-bottom: 0.75rem; }
.brand-trust .panel ul, .brand-trust .panel ol { padding-left: 1.25rem; }
/* People grid (About page) */
.brand-trust .people-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; margin-top: 1.5rem; }
@media (min-width: 48rem) { .brand-trust .people-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 72rem) { .brand-trust .people-grid { grid-template-columns: repeat(5, 1fr); } }
.brand-trust .person { margin: 0; }
.brand-trust .person img, .brand-trust .person .person-blank { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 15%; border-radius: var(--panel-radius); background: #EBF3F4; }
.brand-trust .person .person-blank { display: grid; place-items: center; color: #006871; font-weight: 700; font-size: 2rem; }
.brand-trust .person figcaption { margin-top: 0.75rem; font-size: 0.95rem; line-height: 1.35; color: #34474A; }
.brand-trust .person figcaption strong { display: block; color: #10262A; }
/* News archive grid on the News page */
.brand-trust .trust-news--all .wp-block-post-template { gap: 1.5rem; }
.brand-trust .trust-news .wp-block-query-pagination { margin-top: 1.5rem; }

/* Round bite (19 Sep 2026, Gareth): the cut-out is now a circle around the icon, not a square notch.
   Icon is 3rem at 0.25rem from the corner, so its centre sits at (100% - 1.75rem, 100% - 1.75rem).
   Bite radius 2rem = icon radius 1.5rem + 0.5rem breathing space. */
.brand-trust .panel-notch {
  width: 4rem; height: 4rem; right: -0.25rem; bottom: -0.25rem;
  border-radius: 50%;
}
.brand-trust .panel-notch::before, .brand-trust .panel-notch::after { content: none; }
.brand-trust .setting-card {
  -webkit-mask: radial-gradient(circle at calc(100% - 1.75rem) calc(100% - 1.75rem), transparent calc(2rem - 0.5px), #000 2rem);
  mask: radial-gradient(circle at calc(100% - 1.75rem) calc(100% - 1.75rem), transparent calc(2rem - 0.5px), #000 2rem);
}
/* Wider bite: 1rem of air around the icon (radius 2.5rem, same centre) */
.brand-trust .panel-notch { width: 5rem; height: 5rem; right: -0.75rem; bottom: -0.75rem; }
.brand-trust .setting-card {
  -webkit-mask: radial-gradient(circle at calc(100% - 1.75rem) calc(100% - 1.75rem), transparent calc(2.5rem - 0.5px), #000 2.5rem);
  mask: radial-gradient(circle at calc(100% - 1.75rem) calc(100% - 1.75rem), transparent calc(2.5rem - 0.5px), #000 2.5rem);
}

/* Bite v3 (19 Sep 2026): circle of air around the icon, with 1rem fillets where it meets the
   card edges so nothing looks pointy. Geometry: icon centre 1.75rem in from the corner, bite
   radius 2.75rem, fillet radius 1rem, so the fillet touches the edge 5.424rem from the corner
   (1.75 + sqrt((2.75 + 1)^2 - (1.75 - 1)^2)). Change these four numbers together. */
.brand-trust { --bite: 2.75rem; --fil: 1rem; --ic: 1.75rem; --tan: 5.424rem; }
.brand-trust .setting-card {
  -webkit-mask:
    radial-gradient(circle at calc(100% - var(--ic)) calc(100% - var(--ic)), transparent calc(var(--bite) - 0.5px), #000 var(--bite)),
    linear-gradient(#000 0 0) 0 0 / calc(100% - var(--fil) + 1px) calc(100% - var(--fil) + 1px) no-repeat,
    linear-gradient(#000 0 0) 0 100% / calc(100% - var(--tan)) var(--fil) no-repeat,
    linear-gradient(#000 0 0) 100% 0 / var(--fil) calc(100% - var(--tan)) no-repeat,
    radial-gradient(circle, #000 calc(var(--fil) - 0.5px), transparent var(--fil)) calc(100% - var(--tan) + var(--fil)) 100% / calc(2 * var(--fil)) calc(2 * var(--fil)) no-repeat,
    radial-gradient(circle, #000 calc(var(--fil) - 0.5px), transparent var(--fil)) 100% calc(100% - var(--tan) + var(--fil)) / calc(2 * var(--fil)) calc(2 * var(--fil)) no-repeat;
  -webkit-mask-composite: source-in, source-over, source-over, source-over, source-over, source-over;
  mask:
    radial-gradient(circle at calc(100% - var(--ic)) calc(100% - var(--ic)), transparent calc(var(--bite) - 0.5px), #000 var(--bite)),
    linear-gradient(#000 0 0) 0 0 / calc(100% - var(--fil) + 1px) calc(100% - var(--fil) + 1px) no-repeat,
    linear-gradient(#000 0 0) 0 100% / calc(100% - var(--tan)) var(--fil) no-repeat,
    linear-gradient(#000 0 0) 100% 0 / var(--fil) calc(100% - var(--tan)) no-repeat,
    radial-gradient(circle, #000 calc(var(--fil) - 0.5px), transparent var(--fil)) calc(100% - var(--tan) + var(--fil)) 100% / calc(2 * var(--fil)) calc(2 * var(--fil)) no-repeat,
    radial-gradient(circle, #000 calc(var(--fil) - 0.5px), transparent var(--fil)) 100% calc(100% - var(--tan) + var(--fil)) / calc(2 * var(--fil)) calc(2 * var(--fil)) no-repeat;
  mask-composite: intersect, add, add, add, add, add;
}
/* Painted version for panels (no shadow, so paint the page colour on top) */
.brand-trust .panel-notch {
  width: calc(2 * var(--bite)); height: calc(2 * var(--bite));
  right: calc(var(--ic) - var(--bite)); bottom: calc(var(--ic) - var(--bite));
  border-radius: 50%; overflow: visible;
}
.brand-trust .panel-notch::before, .brand-trust .panel-notch::after {
  content: ""; position: absolute; border-radius: 0;
  background: radial-gradient(circle at 0 0, transparent calc(var(--fil) - 0.5px), var(--notch-bg) var(--fil));
}
.brand-trust .panel-notch::before { left: calc(var(--bite) - var(--tan) + var(--ic)); bottom: calc(var(--bite) - var(--ic)); width: calc(var(--tan) - var(--ic)); height: var(--fil); }
.brand-trust .panel-notch::after { top: calc(var(--bite) - var(--tan) + var(--ic)); right: calc(var(--bite) - var(--ic)); width: var(--fil); height: calc(var(--tan) - var(--ic)); }
/* Fillet pieces widened 0.25rem past the fillet centre so they reach the tangent point with the bite */
.brand-trust .panel-notch::before { background: radial-gradient(circle at 0 0.25rem, transparent calc(var(--fil) - 1.5px), var(--notch-bg) calc(var(--fil) - 0.5px)); bottom: calc(var(--bite) - var(--ic) - 0.25rem); height: calc(var(--fil) + 0.25rem); }
.brand-trust .panel-notch::after { background: radial-gradient(circle at 0.25rem 0, transparent calc(var(--fil) - 1.5px), var(--notch-bg) calc(var(--fil) - 0.5px)); right: calc(var(--bite) - var(--ic) - 0.25rem); width: calc(var(--fil) + 0.25rem); }
.brand-trust .panel-notch { width: calc(2 * var(--bite) + 1px); height: calc(2 * var(--bite) + 1px); right: calc(var(--ic) - var(--bite) - 0.5px); bottom: calc(var(--ic) - var(--bite) - 0.5px); }
.brand-trust .panel-notch::before { left: calc(var(--bite) - var(--tan) + var(--ic) + 0.5px); bottom: calc(var(--bite) - var(--ic) - 0.25rem + 0.5px); }
.brand-trust .panel-notch::after { top: calc(var(--bite) - var(--tan) + var(--ic) + 0.5px); right: calc(var(--bite) - var(--ic) - 0.25rem + 0.5px); }

/* Balance pass (19 Sep 2026, Gareth): icon flush in the corner, bite radius = corner radius (2.25rem),
   so the cut reads as a quarter of the same circle the corners are drawn from. Fillets stay 1rem.
   tan = 1.5 + sqrt((2.25 + 1)^2 - (1.5 - 1)^2) = 4.711rem. */
.brand-trust { --panel-radius: 2.25rem; --ic: 1.5rem; --bite: 2.25rem; --tan: 4.711rem; }
.brand-trust .panel-icon, .brand-trust .setting-card-wrap > .panel-icon { right: 0; bottom: 0; }

/* ==========================================================================
   Bite v4 (19 Sep 2026): one clip-path instead of masks and painted patches.
   The box (card or panel) is clipped to a rounded rectangle with a circular bite
   at the bottom right; the icon sits in a wrapper outside the clipped box, so it
   is never cut by the box's own corner. Shadows follow the clip via drop-shadow
   on the wrapper. Browsers without shape() keep a plain rounded box.
   Geometry (px): corner 36, icon radius 24 flush in the corner, bite radius 36,
   fillet radius 16. Fillet touches the edge 75.4 from the corner; the fillet
   meets the bite at (18.5, 59.6) and (59.6, 18.5) from the corner.
   ========================================================================== */
.brand-trust .has-bite, .brand-trust .setting-card {
  clip-path: inset(0 round 36px);
  clip-path: shape(from 36px 0,
    hline to calc(100% - 36px),
    arc to 100% 36px of 36px cw,
    vline to calc(100% - 75.4px),
    arc to calc(100% - 18.5px) calc(100% - 59.6px) of 16px cw,
    arc to calc(100% - 59.6px) calc(100% - 18.5px) of 36px ccw,
    arc to calc(100% - 75.4px) 100% of 16px cw,
    hline to 36px,
    arc to 0 calc(100% - 36px) of 36px cw,
    vline to 36px,
    arc to 36px 0 of 36px cw,
    close);
}
.brand-trust .setting-card { -webkit-mask: none; mask: none; }
.brand-trust .panel-notch { display: none; }
.brand-trust .panel-wrap { position: relative; display: flex; min-width: 0; }
.brand-trust .panel-wrap > .panel { flex: 1 1 auto; width: 100%; overflow: hidden; }
.brand-trust .panel-wrap > .panel-icon { position: absolute; right: 0; bottom: 0; z-index: 2; }
.brand-trust .entry-content > .panel-wrap {
  box-sizing: border-box; width: calc(100% - (2 * var(--page-gutter))); max-width: var(--panel-max);
  margin-inline: auto !important; margin-block: 0 !important; padding: 0;
}
.brand-trust .entry-content > :is(.panel, .trust-band, .panel-row, .panel-wrap) + :is(.panel, .trust-band, .panel-row, .panel-wrap) { margin-top: var(--page-gutter) !important; }
.brand-trust .entry-content > .panel-wrap:first-child { margin-top: var(--page-gutter) !important; }
.brand-trust .entry-content > .panel-wrap:last-child { margin-bottom: var(--page-gutter) !important; }
.brand-trust .panel-row > .panel-wrap > .panel { width: 100%; }

/* ==========================================================================
   Polish pass, trust brand (19 Sep 2026)
   1. Elevation: three shadow levels, teal tinted so they read as part of the page.
   2. Header: hairline appears once the page scrolls.
   3. Reveal: panels and cards fade up as they enter view (JS adds .reveal/.is-in).
   4. Page crossfade: cross-document view transition between pages.
   5. Hero crossfade: two or three photos in one image panel, slow and quiet.
   6. Footer as a dark rounded panel; news cards raised; micro-interactions.
   ========================================================================== */
.brand-trust {
  --shadow-rest: 0 1px 2px rgba(0, 53, 58, 0.05), 0 4px 12px rgba(0, 53, 58, 0.05);
  --shadow-raised: 0 1px 2px rgba(0, 53, 58, 0.06), 0 12px 28px rgba(0, 53, 58, 0.12);
  --shadow-lifted: 0 2px 4px rgba(0, 53, 58, 0.08), 0 20px 44px rgba(0, 53, 58, 0.18);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}
.brand-trust .panel--white { box-shadow: var(--shadow-rest); }
.brand-trust .panel-row > .panel--image { box-shadow: var(--shadow-rest); }
.brand-trust .trust-welcome .ceo-photo, .brand-trust .person img { box-shadow: var(--shadow-rest); }
.brand-trust .setting-card-wrap { filter: drop-shadow(0 1px 2px rgba(0, 53, 58, 0.06)) drop-shadow(0 12px 28px rgba(0, 53, 58, 0.12)); }
.brand-trust .setting-card-wrap:hover, .brand-trust .setting-card-wrap:focus-within { filter: drop-shadow(0 2px 4px rgba(0, 53, 58, 0.08)) drop-shadow(0 20px 44px rgba(0, 53, 58, 0.18)); }

/* 2. Header */
.brand-trust #site-header { transition: box-shadow 240ms var(--ease-out); }
.brand-trust #site-header.is-scrolled { box-shadow: 0 1px 0 rgba(0, 53, 58, 0.08), 0 8px 24px rgba(0, 53, 58, 0.06); }

/* 3. Reveal */
.js .brand-trust .reveal { opacity: 0; translate: 0 14px; transition: opacity 640ms var(--ease-out), translate 640ms var(--ease-out); }
.js .brand-trust .reveal.is-in { opacity: 1; translate: 0 0; }
.js .brand-trust .setting-cards .reveal:nth-child(3n + 2) { transition-delay: 60ms; }
.js .brand-trust .setting-cards .reveal:nth-child(3n + 3) { transition-delay: 120ms; }
@media (prefers-reduced-motion: reduce) { .js .brand-trust .reveal { opacity: 1; translate: none; transition: none; } }

/* 4. Page crossfade (same-origin navigations; ignored where unsupported) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 180ms ease-out both trust-fade-out; }
::view-transition-new(root) { animation: 260ms ease-out both trust-fade-in; }
@keyframes trust-fade-out { to { opacity: 0; } }
@keyframes trust-fade-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }

/* 5. Hero crossfade: every image in the panel after the first sits on top and fades in on a cycle */
.brand-trust .panel--image.is-crossfade img { transition: none; }
.brand-trust .panel--image.is-crossfade > .wp-block-image + .wp-block-image img { opacity: 0; animation: trust-crossfade 24s ease-in-out infinite; }
.brand-trust .panel--image.is-crossfade > .wp-block-image:nth-of-type(2) img { animation-delay: 0s; }
.brand-trust .panel--image.is-crossfade > .wp-block-image:nth-of-type(3) img { animation-delay: 8s; }
.brand-trust .panel--image.is-crossfade > .wp-block-image:nth-of-type(4) img { animation-delay: 16s; }
@keyframes trust-crossfade { 0%, 25% { opacity: 0; } 33%, 58% { opacity: 1; } 66%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .brand-trust .panel--image.is-crossfade > .wp-block-image + .wp-block-image img { animation: none; opacity: 0; } }

/* 6a. Footer as a dark rounded panel with the crest */
.brand-trust .site-footer--trust {
  position: relative; overflow: hidden;
  width: calc(100% - (2 * var(--page-gutter))); max-width: var(--panel-max);
  margin: 0 auto var(--page-gutter); border-radius: var(--panel-radius);
}
.brand-trust .site-footer--trust::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url(assets/trust-mark.png) no-repeat right -4rem center / auto 120%; opacity: 0.12;
}
.brand-trust .site-footer--trust > * { position: relative; z-index: 1; }

/* 6b. News cards */
.brand-trust .trust-news .wp-block-post { border: 0; border-radius: var(--panel-radius); overflow: hidden; box-shadow: var(--shadow-rest); transition: box-shadow 240ms var(--ease-out), transform 240ms var(--ease-out); }
.brand-trust .trust-news .wp-block-post:hover, .brand-trust .trust-news .wp-block-post:focus-within { box-shadow: var(--shadow-raised); transform: translateY(-3px); }
.brand-trust .trust-news .wp-block-post-featured-image { overflow: hidden; }
.brand-trust .trust-news .wp-block-post-featured-image img { transition: transform 600ms var(--ease-out); }
.brand-trust .trust-news .wp-block-post:hover .wp-block-post-featured-image img { transform: scale(1.03); }
.brand-trust .trust-news .wp-block-post-date { display: inline-block; margin: 1rem 1.25rem 0; padding: 0.25rem 0.6rem; border-radius: 999px; background: #EBF3F4; color: #00565E; font-size: 0.8125rem; font-weight: 700; }

/* 6c. Micro-interactions */
.brand-trust .panel-icon svg { transition: transform 200ms var(--ease-out); }
.brand-trust .panel-icon:hover svg, .brand-trust .panel-icon:focus-visible svg { transform: translate(2px, -2px); }
.brand-trust .wp-block-button__link { transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out), transform 200ms var(--ease-out); }
.brand-trust .wp-block-button__link:hover { transform: translateY(-1px); }
.brand-trust a:focus-visible, .brand-trust button:focus-visible { outline: 3px solid #006871; outline-offset: 3px; border-radius: 4px; }
.brand-trust .panel--teal a:focus-visible, .brand-trust .panel--dark a:focus-visible { outline-color: #A6E7ED; }
@media (prefers-reduced-motion: reduce) {
  .brand-trust .trust-news .wp-block-post, .brand-trust .trust-news .wp-block-post-featured-image img, .brand-trust .panel-icon svg, .brand-trust .wp-block-button__link { transition: none; }
  .brand-trust .trust-news .wp-block-post:hover { transform: none; }
}

/* =====================================================================
   v1.32.0, 19 September 2026. Gradients, photo heroes, mobile drawer crest,
   hamburger radius, footer tagline, document lists (Key information).
   Everything scoped to .brand-trust. Appended after the polish pass.
   ===================================================================== */

/* 1. Subtle gradients. Teal panels and dark grounds pick up a soft diagonal
   shift of about 8% either side of the flat colour, so large blocks stop
   reading as flat fills. Ink contrast: the lightest teal stop #00747E still
   clears 4.5:1 with white (5.2:1); the darkest dark stop is darker than
   #00353A so nothing gets worse. */
.brand-trust { --teal-grad: linear-gradient(135deg, #00747E 0%, #006871 48%, #005A62 100%); --dark-grad: linear-gradient(150deg, #00434A 0%, #00353A 52%, #002A2E 100%); }
.brand-trust .panel--teal { background: var(--teal-grad); }
.brand-trust .panel--dark { background: var(--dark-grad); }
.brand-trust .site-footer--trust { background: var(--dark-grad); }

/* 2. Crest on teal panels, v3: the footer treatment. Large, quiet (12%),
   sat off the right edge and vertically centred, never behind the h1. */
.brand-trust .panel--teal::before { background: url(assets/trust-mark.png) no-repeat right -4rem center / auto 120%; opacity: 0.12; }
@media (max-width: 47.99rem) { .brand-trust .panel--teal::before { background-size: auto 80%; background-position: right -5rem bottom -2rem; } }

/* 3. Mobile drawer: the footer crest style on the dark gradient. The drawer
   is overflow hidden and its body scrolls inside it, so a pseudo-element
   pinned to the drawer stays put while the links scroll. */
.brand-trust .mobile-nav { background: var(--dark-grad); }
.brand-trust .mobile-nav--trust::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: url(assets/trust-mark.png) no-repeat right -6rem bottom -4rem / auto 78%; opacity: 0.12; }
.brand-trust .mobile-nav--trust > * { position: relative; z-index: 1; }

/* 4. Hamburger and drawer close as proper buttons with the 10px radius. */
.brand-trust .hamburger { width: 2.75rem; height: 2.75rem; padding: 0.75rem 0.7rem; border-radius: 10px; background: #EBF3F4; transition: background-color 200ms var(--ease-out); }
.brand-trust .hamburger:hover { background: #D6E8EA; }
.brand-trust .hamburger[aria-expanded="true"] { background: #D6E8EA; }
.brand-trust .mobile-nav-close { border-radius: 10px; background: rgba(255, 255, 255, 0.08); color: #FFFFFF; }
.brand-trust .mobile-nav-close:hover { background: rgba(255, 255, 255, 0.16); color: #FFFFFF; }

/* 5. Footer tagline. The strapline is now the trust tagline; the descriptor
   under it keeps the plain "what we are" line at a quieter weight. */
.brand-trust .trust-footer__strapline { font-weight: 700; font-size: 1.125rem; margin-bottom: 0.25rem; }
.brand-trust .trust-footer__descriptor { color: rgba(255, 255, 255, 0.78); margin: 0 0 1rem; font-size: 0.95rem; }

/* 6. Photo hero: the photograph fills the rounded box and the words sit on
   it. The h1 sits top left over a teal gradient scrim; the standfirst and
   buttons sit in a white card bottom left; the bite icon keeps the bottom
   right corner. Contrast: the scrim is #00353A at 86% behind the h1, which
   puts white text well past 4.5:1 on any photo; the card is white on its
   own so its text does not depend on the photo at all. */
.brand-trust .panel--hero-image { position: relative; isolation: isolate; min-height: min(80vh, 46rem); padding: clamp(1.25rem, 3.5vw, 2.5rem); display: flex; flex-direction: column; justify-content: space-between; background: #00353A; color: #FFFFFF; }
.brand-trust .panel--hero-image.panel--page { min-height: min(58vh, 34rem); }
.brand-trust .panel--hero-image > .hero-media { position: absolute; inset: 0; margin: 0; max-width: none; z-index: 0; }
.brand-trust .hero-media > .wp-block-image, .brand-trust .hero-media > figure { margin: 0; position: static; }
.brand-trust .hero-media img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; }
.brand-trust .hero-media.is-crossfade > .wp-block-image + .wp-block-image img { opacity: 0; animation: trust-crossfade 24s ease-in-out infinite; }
.brand-trust .hero-media.is-crossfade > .wp-block-image:nth-of-type(2) img { animation-delay: 0s; }
.brand-trust .hero-media.is-crossfade > .wp-block-image:nth-of-type(3) img { animation-delay: 8s; }
.brand-trust .hero-media.is-crossfade > .wp-block-image:nth-of-type(4) img { animation-delay: 16s; }
.brand-trust .panel--hero-image::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(112deg, rgba(0, 53, 58, 0.86) 0%, rgba(0, 53, 58, 0.58) 38%, rgba(0, 53, 58, 0.14) 72%, rgba(0, 53, 58, 0.30) 100%); }
.brand-trust .panel--hero-image > :not(.hero-media) { position: relative; z-index: 2; }
.brand-trust .panel--hero-image h1 { color: #FFFFFF; max-width: 13ch; margin: clamp(0.5rem, 3vw, 2.5rem) 0 clamp(2.5rem, 7vw, 6rem); font-size: clamp(2.6rem, 6.5vw, 5.25rem); line-height: 1.02; letter-spacing: -0.02em; text-wrap: balance; }
.brand-trust .panel--hero-image.panel--page h1 { font-size: clamp(2.4rem, 5.5vw, 4.25rem); max-width: 16ch; margin-bottom: clamp(2rem, 5vw, 4rem); }
.brand-trust .panel--hero-image > .hero-card { background: #FFFFFF; color: #00353A; border-radius: calc(var(--panel-radius) - 0.875rem); padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.25rem, 2.5vw, 2rem); max-width: 34rem; margin: 0 6rem 0 0; box-shadow: var(--shadow-raised); }
.brand-trust .panel--hero-image .hero-card p { color: #00353A; font-size: clamp(1rem, 1.3vw, 1.125rem); line-height: 1.5; margin: 0; max-width: none; }
.brand-trust .panel--hero-image .hero-card p + .wp-block-buttons { margin-top: 1.125rem; }
.brand-trust .panel--hero .hero-card .wp-block-button__link { background: #006871; color: #FFFFFF; border-color: #006871; }
.brand-trust .panel--hero .hero-card .wp-block-button__link:hover { background: #00565E; color: #FFFFFF; }
.brand-trust .panel--hero .hero-card .is-style-outline .wp-block-button__link { background: transparent; color: #006871; border-color: #006871; }
.brand-trust .panel--hero .hero-card .is-style-outline .wp-block-button__link:hover { background: #006871; color: #FFFFFF; }
.brand-trust .panel--hero-image .panel-icon { background: #FFFFFF; color: #006871; }
.brand-trust .panel--hero-image .panel-icon:hover { background: #EBF3F4; }
@media (max-width: 47.99rem) {
  .brand-trust .panel--hero-image { min-height: min(84vh, 40rem); }
  .brand-trust .panel--hero-image > .hero-card { margin: 0 0 3.5rem; max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .brand-trust .hero-media.is-crossfade > .wp-block-image + .wp-block-image img { animation: none; opacity: 0; } }

/* 7. Document lists for Key information. Each document is a card-like link
   with a file mark, the title and the format, two across on desktop. */
.brand-trust .doc-list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0.625rem; max-width: none; }
@media (min-width: 48rem) { .brand-trust .doc-list { grid-template-columns: 1fr 1fr; } }
.brand-trust .doc-list li { margin: 0; padding: 0; }
.brand-trust .doc-list a { display: flex; align-items: center; gap: 0.875rem; min-height: 3.75rem; padding: 0.75rem 1rem; border-radius: 12px; background: #FFFFFF; color: #00353A; text-decoration: none; box-shadow: var(--shadow-rest); transition: box-shadow 240ms var(--ease-out), transform 240ms var(--ease-out), background-color 200ms var(--ease-out); }
.brand-trust .panel--white .doc-list a { background: #F5F9F9; box-shadow: none; }
.brand-trust .doc-list a:hover, .brand-trust .doc-list a:focus-visible { box-shadow: var(--shadow-raised); transform: translateY(-2px); }
.brand-trust .panel--white .doc-list a:hover { background: #EBF3F4; }
.brand-trust .doc-list a::before { content: ""; flex: 0 0 auto; width: 2.25rem; height: 2.25rem; border-radius: 9px; background: #006871 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3C/svg%3E") center / 1.125rem no-repeat; }
.brand-trust .doc-list__title { flex: 1 1 auto; font-weight: 600; line-height: 1.3; }
.brand-trust .doc-list__meta { flex: 0 0 auto; font-size: 0.8125rem; font-weight: 700; color: #00565E; white-space: nowrap; }
.brand-trust .panel > h3 { margin-top: 2rem; font-size: 1.25rem; }
.brand-trust .panel > h3 + .doc-list { margin-top: 0.75rem; }
.brand-trust .panel > .doc-list + h3 { margin-top: 2.25rem; }
@media (prefers-reduced-motion: reduce) { .brand-trust .doc-list a, .brand-trust .hamburger { transition: none; } .brand-trust .doc-list a:hover { transform: none; } }

/* 8. Text links on teal and dark grounds (Key information contact panel). */
.brand-trust :is(.panel--teal, .panel--dark) a:not(.wp-block-button__link):not(.panel-icon) { color: #FFFFFF; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.brand-trust :is(.panel--teal, .panel--dark) a:not(.wp-block-button__link):not(.panel-icon):hover { color: #A6E7ED; }

/* v1.32.1 fix-ups, 19 September 2026, after the first look at v1.32.0. */
/* Teal and dark grounds: text links were inheriting the page link teal and vanishing. */
.brand-trust .entry-content :is(.panel--teal, .panel--dark) a:not(.wp-block-button__link):not(.panel-icon) { color: #FFFFFF !important; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.brand-trust .entry-content :is(.panel--teal, .panel--dark) a:not(.wp-block-button__link):not(.panel-icon):hover { color: #A6E7ED !important; }
/* Document lists: full panel width, no list indent, no underline (the card is the link). */
.brand-trust .panel > .doc-list, .brand-trust .entry-content .doc-list { max-width: none; padding: 0; margin-left: 0; margin-right: 0; }
.brand-trust .entry-content .doc-list a, .brand-trust .entry-content .doc-list a:hover { text-decoration: none; color: #00353A; }
.brand-trust .entry-content .doc-list a:hover .doc-list__title { text-decoration: underline; text-underline-offset: 0.18em; }
@media (min-width: 80rem) { .brand-trust .doc-list { grid-template-columns: 1fr 1fr 1fr; } }
/* Photo hero: the bite icon sits in the bite, which shows the white page, so it stays dark. */
.brand-trust .panel-wrap--hero > .panel-icon { background: #00353A; color: #FFFFFF; }
.brand-trust .panel-wrap--hero > .panel-icon:hover { background: #006871; color: #FFFFFF; }
/* The document card is the link, so the accessible underline rule on #main-content stands down for it. */
#main-content .brand-trust .doc-list a[href], .brand-trust #main-content .doc-list a[href] { text-decoration: none; }
/* Phones: keep the hero card clear of the bite at the bottom right. */
@media (max-width: 47.99rem) { .brand-trust .panel--hero-image > .hero-card { margin-bottom: 4.75rem; } }

/* =====================================================================
   v1.33.0, 19 September 2026. Setting cards v2: chips, name, one line,
   photo with a button over it; one swipeable row on the home page, a
   detailed grid on Our academies. Replaces the .setting-card grid.
   ===================================================================== */

/* Scroller (home) */
.brand-trust .scroller { position: relative; margin-top: 1.25rem; }
.brand-trust .scroller__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.brand-trust .scroller__hint { margin: 0; font-size: 0.9rem; color: #3F5A5D; }
.brand-trust .scroller__nav { display: flex; gap: 0.5rem; margin-left: auto; flex: 0 0 auto; }
.brand-trust .scroller__btn { width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 10px; background: #00353A; color: #FFFFFF; display: grid; place-items: center; cursor: pointer; transition: background-color 200ms var(--ease-out), opacity 200ms var(--ease-out), transform 200ms var(--ease-out); }
.brand-trust .scroller__btn:hover { background: #006871; transform: translateY(-1px); }
.brand-trust .scroller__btn svg { width: 1.25rem; height: 1.25rem; }
.brand-trust .scroller.at-start .scroller__btn[data-dir="-1"], .brand-trust .scroller.at-end .scroller__btn[data-dir="1"] { opacity: 0.35; pointer-events: none; }
.brand-trust .scroller__track { list-style: none; margin: 0 -0.25rem; padding: 0.375rem 0.25rem 1.25rem; display: flex; gap: 1.25rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 0.25rem; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: #C5DADD transparent; max-width: none; }
.brand-trust .scroller__track > .scard { flex: 0 0 min(19.5rem, 82vw); scroll-snap-align: start; }
.brand-trust .panel > .scroller { max-width: none; }

/* Card */
.brand-trust .scard { position: relative; display: flex; flex-direction: column; margin: 0; padding: 0; border-radius: calc(var(--panel-radius) - 0.875rem); background: #FFFFFF; color: #00353A; box-shadow: var(--shadow-rest); overflow: hidden; }
.brand-trust .scard:hover, .brand-trust .scard:focus-within { box-shadow: var(--shadow-raised); transform: translateY(-4px); }
.brand-trust .scard:focus-within { outline: 3px solid #006871; outline-offset: 3px; }
.brand-trust .scard__body { padding: 1.25rem 1.25rem 1.125rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1 0 auto; }
.brand-trust .scard__meta { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; min-height: 2.25rem; }
.brand-trust .scard__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.375rem; max-width: none; }
.brand-trust .scard__chips li { margin: 0; padding: 0.25rem 0.6rem; border-radius: 8px; background: #EBF3F4; color: #00565E; font-size: 0.78rem; font-weight: 700; line-height: 1.3; white-space: nowrap; }
.brand-trust .scard__mark { flex: 0 0 auto; }
.brand-trust .scard__mark img { display: block; width: auto; height: auto; max-height: 2.25rem; max-width: 6.5rem; object-fit: contain; }
.brand-trust .scard__name { margin: 0.25rem 0 0; font-size: clamp(1.35rem, 1.6vw, 1.6rem); line-height: 1.1; letter-spacing: -0.01em; font-weight: 800; text-wrap: balance; }
.brand-trust .scard__name a { color: inherit; text-decoration: none; }
.brand-trust .scard__name a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.brand-trust .scard__name a:focus-visible { outline: none; }
#main-content .brand-trust .scard__name a[href], .brand-trust #main-content .scard__name a[href] { text-decoration: none; }
.brand-trust .scard__line { margin: 0; font-size: 0.95rem; color: #2E4A4D; max-width: none; }
.brand-trust .scard__desc { margin: 0.25rem 0 0; font-size: 0.95rem; line-height: 1.5; max-width: none; }
.brand-trust .scard__facts { position: relative; z-index: 2; margin: 0.75rem 0 0; padding: 0.75rem 0 0; border-top: 1px solid #DCE9EA; display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 0.75rem; font-size: 0.9rem; line-height: 1.4; }
.brand-trust .scard__facts dt { margin: 0; font-weight: 700; color: #00565E; }
.brand-trust .scard__facts dd { margin: 0; }
.brand-trust .scard__facts a { color: #006871; }
.brand-trust .scard__media { position: relative; margin-top: auto; aspect-ratio: 4 / 3; background: #EBF3F4; overflow: hidden; }
.brand-trust .scard__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 30%); transition: transform 600ms var(--ease-out); }
.brand-trust .scard:hover .scard__media img { transform: scale(1.04); }
.brand-trust .scard__cta { position: absolute; left: 1rem; bottom: 1rem; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.9rem; border-radius: 10px; background: #FFFFFF; color: #00353A; font-size: 0.875rem; font-weight: 700; line-height: 1; box-shadow: var(--shadow-rest); }
.brand-trust .scard__cta svg { width: 1rem; height: 1rem; transition: transform 200ms var(--ease-out); }
.brand-trust .scard:hover .scard__cta svg { transform: translate(2px, -2px); }

/* The trust card: teal, crest, no photo */
.brand-trust .scard--trust { background: var(--teal-grad); color: #FFFFFF; }
.brand-trust .scard--trust .scard__chips li { background: rgba(255, 255, 255, 0.16); color: #FFFFFF; }
.brand-trust .scard--trust .scard__line, .brand-trust .scard--trust .scard__desc { color: rgba(255, 255, 255, 0.9); }
.brand-trust .scard--trust .scard__facts { border-top-color: rgba(255, 255, 255, 0.25); }
.brand-trust .scard--trust .scard__facts dt { color: #A6E7ED; }
.brand-trust .scard--trust .scard__facts a { color: #FFFFFF; }
.brand-trust .scard--trust .scard__media { background: transparent; }
.brand-trust .scard--trust .scard__media::before { content: ""; position: absolute; inset: 0; background: url(assets/trust-mark.png) no-repeat right -2.5rem center / auto 165%; opacity: 0.16; }
.brand-trust .scard--trust .scard__cta { background: #FFFFFF; color: #006871; }

/* Directory (Our academies) */
.brand-trust .setting-directory { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
.brand-trust .panel > .setting-directory { max-width: none; padding: 0; }
@media (min-width: 48rem) { .brand-trust .setting-directory { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } }
@media (min-width: 90rem) { .brand-trust .setting-directory { grid-template-columns: repeat(3, 1fr); } }
.brand-trust .setting-directory .scard__media { aspect-ratio: 16 / 10; }
.brand-trust .setting-directory .scard__name { font-size: clamp(1.5rem, 2vw, 1.9rem); }

/* Reveal: cards fade up with a stagger, and the hover lift keeps its own timing */
.js .brand-trust .scard.reveal { transition: opacity 640ms var(--ease-out), translate 640ms var(--ease-out), box-shadow 240ms var(--ease-out), transform 240ms var(--ease-out); }
.js .brand-trust .scard.reveal:nth-child(3n + 2) { transition-delay: 60ms; }
.js .brand-trust .scard.reveal:nth-child(3n + 3) { transition-delay: 120ms; }
.js .brand-trust .scard.reveal.is-in { transition-delay: 0ms; }
@media (prefers-reduced-motion: reduce) {
  .brand-trust .scard, .brand-trust .scard__media img, .brand-trust .scard__cta svg, .brand-trust .scroller__btn { transition: none; }
  .brand-trust .scard:hover { transform: none; }
  .brand-trust .scroller__track { scroll-behavior: auto; }
}
/* v1.33.1: the theme's external-link mark on a[target="_blank"]::after was stretching over the whole card; the card link carries its own "opens in a new tab" text instead. */
.brand-trust .scard__name a[target="_blank"]::after, .brand-trust .scard__name a::after { content: "" !important; background: none !important; width: auto !important; height: auto !important; margin: 0 !important; display: block; }

/* =====================================================================
   v1.34.0, 19 September 2026. Logo ticker: a Gallery block style. Add a
   Gallery block, pick the style "Logo ticker", drop the logos in. JS wraps
   the logos in a track, clones them once and loops the track; without JS,
   or with reduced motion, the logos sit in a wrapped row. Not scoped to a
   brand so the colleges can use it too.
   ===================================================================== */
.wp-block-gallery.is-style-logo-ticker { --logo-h: 2.75rem; --ticker-gap: 3.5rem; display: block; margin: 0; padding: 0.5rem 0; overflow: hidden; }
.wp-block-gallery.is-style-logo-ticker.is-ticking { -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.wp-block-gallery.is-style-logo-ticker .ticker__track { display: flex; align-items: center; gap: var(--ticker-gap); width: max-content; animation: logo-ticker var(--dur, 40s) linear infinite; }
.wp-block-gallery.is-style-logo-ticker.is-reverse .ticker__track { animation-direction: reverse; }
.wp-block-gallery.is-style-logo-ticker:hover .ticker__track, .wp-block-gallery.is-style-logo-ticker:focus-within .ticker__track { animation-play-state: paused; }
.wp-block-gallery.is-style-logo-ticker:not(.is-ticking) { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.5rem var(--ticker-gap); }
.wp-block-gallery.is-style-logo-ticker .wp-block-image, .wp-block-gallery.is-style-logo-ticker figure { margin: 0; width: auto !important; flex: 0 0 auto; }
.wp-block-gallery.is-style-logo-ticker img { display: block; height: var(--logo-h); width: auto !important; max-width: 11rem; object-fit: contain; filter: grayscale(1); opacity: 0.72; transition: filter 300ms ease, opacity 300ms ease; }
.wp-block-gallery.is-style-logo-ticker:hover img, .wp-block-gallery.is-style-logo-ticker:focus-within img { filter: none; opacity: 1; }
.wp-block-gallery.is-style-logo-ticker figcaption { display: none; }
.wp-block-gallery.is-style-logo-ticker.is-style-logo-ticker--large { --logo-h: 3.5rem; }
@keyframes logo-ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .wp-block-gallery.is-style-logo-ticker .ticker__track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; row-gap: 1.5rem; }
  .wp-block-gallery.is-style-logo-ticker .ticker__track > .is-clone { display: none; }
  .wp-block-gallery.is-style-logo-ticker.is-ticking { -webkit-mask-image: none; mask-image: none; }
}
/* Labels above each ticker on the trust site */
.brand-trust .ticker-label { margin: 0 0 0.75rem; font-size: 0.9rem; font-weight: 700; color: #00565E; text-align: center; }
.brand-trust .ticker-label + .wp-block-gallery { margin-bottom: 2rem; }
.brand-trust .panel > .wp-block-gallery.is-style-logo-ticker { max-width: none; }
/* v1.34.1: the core gallery rules (figure width, img 100% and object-fit cover) outrank the ticker rules, so these carry the weight. */
.wp-block-gallery.has-nested-images.is-style-logo-ticker figure.wp-block-image, .wp-block-gallery.has-nested-images.is-style-logo-ticker .ticker__track figure.wp-block-image { width: auto !important; height: auto !important; flex: 0 0 auto !important; margin: 0 !important; display: block; }
.wp-block-gallery.has-nested-images.is-style-logo-ticker figure.wp-block-image img { width: auto !important; height: var(--logo-h) !important; max-width: 11rem !important; object-fit: contain !important; flex: none !important; }
.wp-block-gallery.has-nested-images.is-style-logo-ticker.is-ticking { display: block !important; flex-wrap: nowrap; gap: 0; }
.brand-trust .panel > .ticker-label { max-width: none; }

/* ==========================================================================
   v1.35 About page: principles mosaic, vision and mission, pull line, pillars
   ========================================================================== */
.brand-trust .panel > :is(.mosaic__top, .mosaic__tiles, .vm, .pillars) { max-width: none; }

.brand-trust .mosaic__top { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 3vw, 3rem); align-items: start; }
.brand-trust .mosaic__media { position: relative; margin: 0; min-width: 0; }
.brand-trust .mosaic__media > .wp-block-image { position: relative; isolation: isolate; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: calc(var(--panel-radius) - 0.875rem); background: #00353A; }
.brand-trust .mosaic__media > .wp-block-image img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; }
.brand-trust .mosaic__media > .wp-block-image::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(160deg, rgba(0, 53, 58, 0.90) 0%, rgba(0, 53, 58, 0.62) 36%, rgba(0, 53, 58, 0) 70%); }
.brand-trust .panel .mosaic__media > h2 { position: absolute; z-index: 1; top: clamp(1.25rem, 3vw, 2.25rem); left: clamp(1.25rem, 3vw, 2.25rem); right: 1.25rem; margin: 0; max-width: 11ch; color: #FFFFFF; font-size: clamp(2rem, 4.2vw, 3.5rem); line-height: 1.02; letter-spacing: -0.02em; text-wrap: balance; }
.brand-trust .mosaic__quote { position: relative; z-index: 2; margin: -2.5rem 1rem 0 !important; padding: clamp(1.25rem, 2.5vw, 1.75rem); background: #E3F0F1; border-radius: calc(var(--panel-radius) - 0.875rem); box-shadow: var(--shadow-raised); }
.brand-trust .mosaic__quote p { margin: 0; color: #00353A; font-size: clamp(1.2rem, 1.9vw, 1.5rem); line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; }
.brand-trust .mosaic__body { min-width: 0; }
.brand-trust .mosaic__body p { margin: 0 0 1rem; max-width: 34rem; font-size: clamp(1.05rem, 1.3vw, 1.175rem); line-height: 1.6; }
.brand-trust .mosaic__body p:last-child { margin-bottom: 0; }

.brand-trust .panel > .mosaic__tiles { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 2.5vw, 2rem); margin-top: clamp(2.5rem, 5vw, 4rem) !important; }
.brand-trust .mosaic__tile { min-width: 0; }
.brand-trust .mosaic__tile > .wp-block-image { position: relative; margin: 0 0 1rem; aspect-ratio: 3 / 2; overflow: hidden; border-radius: calc(var(--panel-radius) - 0.875rem); background: #EBF3F4; }
.brand-trust .mosaic__tile > .wp-block-image img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; transition: transform 600ms var(--ease-out); }
.brand-trust .mosaic__tile:hover > .wp-block-image img { transform: scale(1.03); }
.brand-trust .mosaic__num, .brand-trust .pillar__num { margin: 0; color: #006871; font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.brand-trust .mosaic__tile h3 { margin: 0.25rem 0 0.5rem; font-size: clamp(1.35rem, 2vw, 1.75rem); line-height: 1.1; }
.brand-trust .mosaic__tile p:last-child { margin: 0; max-width: 30rem; }

.brand-trust .vm { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 4rem); }
.brand-trust .vm > * { min-width: 0; }
.brand-trust .panel--teal .vm h2 { margin: 0 0 1rem; padding-top: 0.75rem; border-top: 2px solid rgba(255, 255, 255, 0.55); color: #FFFFFF; font-size: 1.125rem; line-height: 1.2; letter-spacing: 0; }
.brand-trust .vm__vision p { margin: 0; font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.25; font-weight: 700; letter-spacing: -0.015em; text-wrap: pretty; }
.brand-trust .vm__mission p { margin: 0 0 1rem; max-width: 38rem; font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.6; }
.brand-trust .vm__mission p:last-child { margin-bottom: 0; }

.brand-trust .panel > .trust-pull { margin-top: 2rem; padding-left: clamp(1rem, 2vw, 1.5rem); border-left: 3px solid #006871; max-width: 30ch; color: #00353A; font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; text-wrap: balance; }

.brand-trust .panel > .pillars { display: grid; grid-template-columns: 1fr; gap: clamp(1rem, 2vw, 1.5rem); margin-top: 1.5rem !important; }
.brand-trust .pillar { min-width: 0; padding: clamp(1.25rem, 2.5vw, 2rem); background: #FFFFFF; border-radius: calc(var(--panel-radius) - 0.875rem); box-shadow: var(--shadow-rest); }
.brand-trust .pillar h3 { margin: 0.25rem 0 0.5rem; font-size: 1.25rem; line-height: 1.2; }
.brand-trust .pillar p:last-child { margin: 0; }

@media (min-width: 48rem) {
  .brand-trust .mosaic__top { grid-template-columns: 7fr 5fr; }
  .brand-trust .mosaic__media { margin-bottom: 2rem !important; }
  .brand-trust .mosaic__quote { position: absolute; right: -1.5rem; bottom: -2rem; margin: 0 !important; max-width: 22rem; }
  .brand-trust .panel > .mosaic__tiles { grid-template-columns: repeat(3, 1fr); }
  .brand-trust .panel > .pillars { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 60rem) {
  .brand-trust .vm { grid-template-columns: 5fr 6fr; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-trust .mosaic__tile > .wp-block-image img { transition: none; }
  .brand-trust .mosaic__tile:hover > .wp-block-image img { transform: none; }
}

/* v1.35.0 additions, 20 September 2026: footer registered office label, trust contact form panel */
.brand-trust .trust-footer__label { margin: 0 0 0.25rem; font-size: 0.8125rem; font-weight: 700; color: #A6E7ED; }
.brand-trust .trust-form .contact-form { margin-top: 1.5rem; max-width: 60rem; }
.brand-trust .trust-form .contact-form__input { border-radius: 10px; border-color: #C5DADD; background: #FFFFFF; }
.brand-trust .trust-form .contact-form__input:focus { border-color: #006871; box-shadow: 0 0 0 3px rgba(0, 104, 113, 0.18); }
.brand-trust .trust-form .contact-form__submit { border-radius: 10px; background: #006871; color: #FFFFFF; letter-spacing: 0; font-size: 0.95rem; padding: 0.8rem 1.5rem; }
.brand-trust .trust-form .contact-form__submit:hover { background: #00565E; }
.brand-trust .trust-form .contact-feedback { border-radius: 12px; margin: 1rem 0 0; }
.brand-trust .trust-form .contact-form__privacy { max-width: 36rem; }
/* ==========================================================================
   v1.36 accessibility fixes, 20 September 2026
   Append to style.css after the v1.35 block, then bump Version to 1.36.0.
   Every ratio below was measured in the browser, not estimated.
   ========================================================================== */

/* 1. About, principles mosaic. The headline sits directly on a photograph with
      no scrim. Measured against the Prior campus photo, 22% of the pixels behind
      it gave white text under 3:1, worst case 1.73:1. With this scrim the worst
      case is 3.69:1, against the 3:1 that 56px bold needs. It sits under the
      headline (z-index 1) and the quote card (z-index 2). */
.brand-trust .mosaic__media > .wp-block-image::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(0,53,58,.55) 0%, rgba(0,53,58,.34) 34%, rgba(0,53,58,0) 66%);
}

/* 2. Setting cards, the trust card. It is the only card with a teal ground, and
      its name, phone and email links were rendering in the dark teal meant for
      the white cards: 1.52:1 measured.
      The theme already carries .brand-trust .scard--trust .scard__facts a { color:#fff },
      but #main-content :where(...) a { color: var(--link) } holds an id and wins on
      specificity, so that rule never applied. Rather than escalate the fight, this
      redefines --link on the card, which is the mechanism the theme intends.
      Applies to the home scroller and the Our academies directory: both use .scard. */
.brand-trust .scard--trust { --link: #fff; }
.brand-trust .scard--trust .scard__name { color: #fff; }
.brand-trust .scard--trust .scard__facts dd a { text-decoration-color: rgba(255,255,255,.65); }

/* 3. #A6E7ED is 9.73:1 on the #00353A drawer but only 4.02:1 on this lighter teal
      gradient, under the 4.5:1 needed at 14.4px. #D6F4F7 measures 4.78:1.
      The extra .scard is not decoration: the theme's own rule for this selector has
      identical specificity, so without it the winner depends on source order, and
      Additional CSS loads before style.css. */
.brand-trust .scard.scard--trust .scard__facts dt { color: #D6F4F7; }

/* 4. WCAG 1.4.10 reflow. At 320px, which is what 400% zoom on a 1280 screen comes
      to, home, About and Our academies scrolled sideways: document width 353px
      against a 320px viewport. Two separate causes.

      a) .panel-row > .panel sets width:auto and .panel-row > .panel--image adds
         aspect-ratio: 4/3. The panel also has a 256px min-height, so at narrow
         widths the height wins and the ratio drives the width back up to 341px,
         wider than the 296px grid track. Making the width authoritative lets the
         track decide and the ratio fall out of it. No effect at 1440 or 390. */
.brand-trust .panel-row > .panel--image { width: 100%; }

/*    b) The setting card fact list is a two column grid, and
         endeavourenquiries@atomix.ac.uk is one unbreakable 31 character token, so
         the dd pushed past its track. */
.brand-trust .scard__facts dd { min-width: 0; overflow-wrap: anywhere; }


/* ==========================================================================
   v1.37.0, 22 September 2026. College footers: the family of logos and the
   trust crest.

   Both colleges and the trust as a row of white logos at the top of the
   footer (inc/footer-family.php), and the trust crest laid faintly across
   the footer, the same device the trust website's footer uses. Scoped to
   the two college brands; the trust footer is a different part.
   ========================================================================== */
.brand-ppc .site-footer--college,
.brand-ssfc .site-footer--college {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
.brand-ppc .site-footer--college::before,
.brand-ssfc .site-footer--college::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: url("assets/trust-mark.png") no-repeat right -5rem center / auto 150%;
	opacity: 0.08;
}
@media (max-width: 47.99rem) {
	.brand-ppc .site-footer--college::before,
	.brand-ssfc .site-footer--college::before {
		background-position: left 25vw center;
		background-size: auto 140%;
	}
}

.footer-family {
	padding: 2.25rem 1.25rem 0.5rem;
}
@media (min-width: 48rem) {
	.footer-family {
		padding: 3rem 2.5rem 0.75rem;
	}
}
.footer-family__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.5rem 2.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.footer-family__list li {
	margin: 0;
}
.footer-family__logo {
	display: block;
	line-height: 0;
	border-radius: 2px;
	transition: opacity 0.2s;
}
.footer-family__logo:hover {
	opacity: 0.85;
}
.footer-family__logo:focus-visible {
	outline: 2px solid var(--band-ink);
	outline-offset: 6px;
}
.footer-family__logo img {
	display: block;
	width: auto;
	max-width: none;
}
.footer-family__logo--college img {
	height: 4.25rem;
}
.footer-family__logo--trust img {
	height: 3.25rem;
}
.footer-family__trust {
	padding-left: 2.25rem;
	border-left: 1px solid rgba(245, 243, 240, 0.2);
}
@media (max-width: 47.99rem) {
	.footer-family__logo--college img {
		height: 3.5rem;
	}
	.footer-family__logo--trust img {
		height: 2.75rem;
	}
	.footer-family__trust {
		flex-basis: 100%;
		padding: 1.25rem 0 0;
		border-left: 0;
		border-top: 1px solid rgba(245, 243, 240, 0.2);
	}
}

/* 1.37.2: keep footer legal links clear of the cookie settings button */
.site-footer .footer-legal { padding-bottom: 5rem; }