/* ============================================================
 * SCHOOL TYPES — shared audience-page template (design system v2)
 * ------------------------------------------------------------
 * Primary schools · Secondary schools · LAs & MATs.
 * These are BRAND / audience pages, so they lead with the PRIMARY
 * palette (navy / sky / blue + tints) — never a product colour —
 * and use the shared full-photo hero (hero2). One stylesheet drives
 * all three; the pages differ only by hero photo + copy.
 * Loads AFTER home-v2.css (reuses hero2, .proofrow/.proof, .bandhead,
 * .rv reveals, nav, footer, contact band).
 * ============================================================ */

/* ---------- per-audience accent palette (set via body class) ----------
 * Products own the cool colours (One teal · Sync sky · Classroom royal blue ·
 * OnSite violet), so each audience page uses the PRIMARY brand palette at a
 * different depth: Primary = sky · Secondary = blue · LAs & MATs = navy.
 *   --st-accent    bright accent (eyebrow pill)
 *   --st-on-accent text colour that contrasts on the accent
 *   --st-ink       deep AA-passing shade (icons, links, highlight text)
 *   --st-tint      light wash (proof band)
 *   --st-tint-2    slightly deeper tint (icon tiles, hero highlight)
 * Base .st keeps the old sky/blue as a safe fallback. */
.st {
  --st-accent: #2FB7F1; --st-on-accent: #0F1438;
  --st-ink: #1B367E; --st-tint: #EBF9FF; --st-tint-2: #D9F4FF;
}
.st--primary   { --st-accent: #2FB7F1; --st-on-accent: #0F1438; --st-ink: #0E6FA6; --st-tint: #D9F4FF; --st-tint-2: #BFE9FC; }
.st--secondary { --st-accent: #1B367E; --st-on-accent: #FFFFFF; --st-ink: #1B367E; --st-tint: #E8ECF8; --st-tint-2: #D3DCF1; }
.st--las       { --st-accent: #0F1438; --st-on-accent: #FFFFFF; --st-ink: #0F1438; --st-tint: #EBEDF3; --st-tint-2: #D8DCE8; }

/* ---------- hero (interior height + audience eyebrow) ---------- */
/* plain solid-colour hero for now — photos are stand-ins, hidden until real ones land */
.hero2--stype .hero2__frame { min-height: var(--hero-h); background: var(--ge-navy, #0F1438); }
.hero2--stype .hero2__photo,
.hero2--stype .hero2__scrim { display: none; }
.hero2--stype .hero2__copy { padding-bottom: clamp(48px, 7vw, 90px); }  /* legacy variant — the live pages use .hero2--cutout, see hero-cutout.css */
.st-eyebrow {
  align-self: flex-start;
  margin-bottom: 4px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--st-accent);
  color: var(--st-on-accent);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.st-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }
/* white ghost secondary button on the photo */
.st-hero__ghost.btn {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.55);
  font-weight: 700;
  /* symmetric padding — .btn--large reserves extra left padding for an arrow
     chip this arrow-less ghost button doesn't have, so the label was off-centre */
  padding-inline: 28px;
}
.st-hero__ghost.btn:hover { background: rgba(255, 255, 255, 0.22); color: #fff; }
/* hero headline highlight takes the audience colour (overrides home-v2's sky) */
/* site-signature pill on all three audience pages (Rebecca, 4 Aug — every
   highlight pill matches the home hero's). It used to take each page's own
   audience tint, which also failed AA on two of the three. */
.st .hero2__copy h1 .mark { background: var(--ge-blue-3, #D9F4FF); color: var(--ge-blue, #1B367E); }

/* ---------- proof band (white, receives the hanging proof cards) ----------
   WHITE AFTER A HERO (site rule, Rebecca 4 Aug: "id like to make a rule that
   after a hero there is only white sections"). This band used to carry each
   page's audience tint; the tint has moved one section down to .st-lineup, so
   the three audience pages still read in their own colour, just not against
   the hero. The hanging .proof cards carry a deep shadow of their own, so they
   still lift off a white band. */
.st-proof { background: #fff; padding: clamp(80px, 9vw, 140px) 0 clamp(64px, 8vw, 110px); }
.st-proof .bandhead { padding-top: 0; }

/* ---------- benefit cards ---------- */
.st-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 1.8vw, 24px);
  margin-top: clamp(32px, 3.5vw, 52px);
}
/* soft shadow, no stroke — these cards now sit on a WHITE band, and a hairline
   stroke is the "visible tile stroke" Rebecca asked to be removed site-wide */
.st-card {
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 8px 24px rgba(15, 20, 56, 0.08);
  padding: clamp(24px, 2.4vw, 32px);
  transition: transform 220ms var(--hv2-ease), box-shadow 220ms var(--hv2-ease);
}
.st-card:hover { transform: translateY(-6px); box-shadow: 0 22px 48px rgba(15, 20, 56, 0.12); }
.st-card__ico {
  width: 48px; height: 48px; border-radius: 13px;
  display: grid; place-items: center;
  background: var(--st-tint-2);
  color: var(--st-ink);
  margin-bottom: 14px;
  transition: transform 220ms var(--hv2-ease);
}
.st-card:hover .st-card__ico { transform: rotate(-8deg); }   /* the site "handshake" micro-tilt */
.st-card__ico svg { width: 22px; height: 22px; }
.st-card h3 { margin: 0 0 8px; font-size: 17.5px; color: var(--ge-navy, #0F1438); }
.st-card p { margin: 0; font-size: 14.5px; line-height: 1.55; color: #4A5876; }

/* ---------- product line-up (white logos on identity chips) ---------- */
/* the audience tint lives here now (it was on .st-proof until 4 Aug, when the
   band after a hero became white site-wide). These cards carry a full-width
   solid identity-colour header, so they read easily against a tint. */
.st-lineup { background: var(--st-tint); padding: clamp(80px, 9vw, 140px) 0; }
.st-lineup .bandhead { padding-top: 0; }
.st-prods {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 1.8vw, 24px);
  margin-top: clamp(32px, 3.5vw, 52px);
}
.st-prod {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 8px 24px rgba(15, 20, 56, 0.08);   /* soft lift, no stroke */
  overflow: hidden;                      /* clip the colour header to the card corners */
  text-decoration: none;
  transition: transform 220ms var(--hv2-ease), box-shadow 220ms var(--hv2-ease);
}
.st-prod:hover { transform: translateY(-6px); box-shadow: 0 22px 48px rgba(15, 20, 56, 0.14); }
/* full-width solid identity-colour header + white logo (matches the pricing cards) */
.st-prod__chip {
  display: flex; align-items: center; justify-content: center;
  padding: clamp(26px, 2.8vw, 36px) 20px;
}
.st-prod__chip img { height: clamp(36px, 3.4vw, 46px); width: auto; max-width: 86%; display: block; }
.st-prod__chip--one { background: #1B88C8; }
.st-prod__chip--onsite { background: #614DBA; }
.st-prod__chip--classroom { background: #2248C0; }
.st-prod__chip--sync { background: #1B88C8; }
.st-prod h3 { margin: clamp(22px, 2.4vw, 28px) clamp(22px, 2.2vw, 28px) 0; font-size: 18px; color: var(--ge-navy, #0F1438); }
.st-prod p { margin: 8px clamp(22px, 2.2vw, 28px) 0; flex: 1; font-size: 14px; line-height: 1.5; color: #4A5876; }
.st-prod__go { display: inline-flex; align-items: center; gap: 6px; margin: 16px clamp(22px, 2.2vw, 28px) clamp(24px, 2.4vw, 30px); font-size: 14px; font-weight: 700; color: var(--st-ink); }
.st-prod:hover .st-prod__go { color: var(--ge-navy, #0F1438); }
.st-prod__go svg { width: 15px; height: 15px; }

/* ---------- final CTA — navy board on white, room for footer card ---------- */
.st-final { background: #fff; padding: clamp(80px, 9vw, 140px) 0 clamp(280px, 22vw, 380px); }
.st-board {
  position: relative;
  overflow: hidden;
  background: var(--ge-navy, #0F1438);
  border-radius: clamp(20px, 2.5vw, 34px);
  padding: clamp(40px, 6vw, 82px) clamp(28px, 4vw, 64px);
  text-align: center;
  color: #fff;
}
.st-board h2 { margin: 0 0 14px; color: #fff; }
.st-board > p { margin: 0 auto clamp(24px, 3vw, 34px); max-width: 54ch; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.6; color: rgba(255, 255, 255, 0.88); }
.st-board__wm { position: absolute; right: -4%; bottom: -34%; width: 28%; opacity: 0.05;  /* 5 Aug: watermark opacities cut ~40% ("can we make the watermarks in the product and school type pages fainter"). Was 0.08. */; pointer-events: none; }
.st-board__wm img { width: 100%; height: auto; }
.st-board > *:not(.st-board__wm) { position: relative; z-index: 1; }
/* white pill CTA on the navy board */
.st-board .btn { background: #fff; color: var(--ge-navy, #0F1438); border: none; font-weight: 700; }
.st-board .btn:hover { background: #EAF1F8; color: var(--ge-navy, #0F1438); }
.st-board .btn__arrow { background: var(--ge-navy, #0F1438); color: #fff; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .st-cards, .st-prods { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .st-cards, .st-prods { grid-template-columns: 1fr; }
}

/* ============================================================
 * Fix: on these pages the testimonials (.band--proof) follow the navy
 * "See the whole child" band. The quote carousel has a negative top margin
 * to straddle UP into the previous band (great on the home page, where it
 * sits over the blue stats band). Here it was pulling up into the whole-child
 * content and crowding its bottom edge — so cancel the straddle and give the
 * testimonials proper top spacing. (Home is unaffected: there .band--proof
 * follows .band--blue, so this adjacent-sibling rule never matches.)
 * ============================================================ */
.band--navy + .band--proof { padding-top: clamp(56px, 7vw, 96px); }
.band--navy + .band--proof .quotes { margin-top: 0; }

/* ------------------------------------------------------------
 * PRIMARY "see the whole child" — laptop clip on a white card
 * (updated 24 July 2026). Rebecca's supplied clip has a plain WHITE
 * background (not a transparent cut-out) — a blend-mode trick can't hide
 * a white background on navy without also crushing the light dashboard
 * UI inside it (multiply darkens everything, screen leaves the white
 * intact). So instead of faking transparency, the video sits on an actual
 * white card, matching .pair__phone's white-frame treatment — the video's
 * own white background blends into the card seamlessly. Scoped to Primary
 * only (home/other schools keep the original rounded-tile video).
 * ------------------------------------------------------------ */
.st--primary .pair__photo {
  object-fit: cover;
  background: #fff;
  padding: clamp(16px, 2vw, 28px);
  border-radius: 24px;
  box-shadow: 0 28px 60px rgba(15, 20, 56, 0.35);
}

/* Primary Schools leads with CLASSROOM BLUE rather than the shared navy
   (Rebecca, 27 Jul: "primary school hero needs to be classroom blue").
   Note this is a product identity colour on an audience page, which CLAUDE.md
   normally reserves for the product's own pages — her explicit call. */
.st--primary .hero2--cutout .hero2__frame { background: #2248C0; }

/* LAs & MATs leads with the PARENT APP PINK rather than the shared navy
   (Rebecca, 29 Jul: "change the hero tile colour of the las page - use the
   pink from the parent app"). Same deliberate exception as Primary above.

   #A24F81 is the Parent app palette's --pp-ink, not its brighter --pp-4
   (#B26192). That matters: the hero carries white body copy, and white on
   #B26192 measures 4.19:1 — under the 4.5:1 floor. --pp-ink is the same hue's
   AA-passing shade (5.3:1 white) and exists in product-page.css precisely for
   text-bearing pink surfaces. */
.st--las .hero2--cutout .hero2__frame { background: #A24F81; }

/* The two accents inside that hero were sky blue (#2FB7F1 eyebrow pill) and
   pale sky (#D9F4FF highlight behind "every school") — chosen to sit on NAVY.
   On pink they read as leftovers from the old colour, so both move into the
   Parent app's own tints: --pp-2 #F5DDEC and --pp-1 #FFF3F9, with the deep
   pinks for text. Same relationship as before (a light tint of the hero's own
   family), just the right family. Revert = delete these two rules.

   Scope note: this changes the HERO only, which is what she asked for. The
   rest of the LAs page still runs on the navy/blue .st--las tokens above
   (proof band, icon tiles, links) — carrying the pink through the whole page
   would mean editing those tokens, which was NOT part of the ask.

   The headline highlight is NO LONGER pink. It was #FFF3F9 / #A24F81 here,
   but 4 Aug Rebecca set one rule for the whole site: "any highlight pills on
   the site need to be the same colour as the home page hero highlight pills."
   So the pill falls back to hero-cutout.css's pale-sky/blue pair and only the
   eyebrow keeps the pink on this page. */
.st--las .hero2__eyebrow { background: #F5DDEC; color: #8A436E; }

/* ============================================================
 * LAs & MATs HERO — animated stat tiles (Rebecca, 28 Jul: "stat
 * tiles ... that are visually engaging and animated. not just a
 * load animation but an animation that repeats in a loop").
 * Replaces the flat schools collage.
 *
 * NOTE ON MOTION: CLAUDE.md otherwise allows only one-pass motion
 * (plus slow marquees), so these looping charts are a deliberate
 * exception on Rebecca's instruction. Kept slow and shallow — the
 * data redraws, the CARDS never move — and fully stopped under
 * prefers-reduced-motion, which shows the finished state.
 *
 * The figures are illustrative UI, like the product heroes' cards,
 * and the whole cluster is aria-hidden.
 * ============================================================ */
/* Layout copied from the reference Rebecca shared: a small coloured card top
   left, the big chart card to its right overlapping it, and the bar card
   bottom-left sitting in FRONT of both. Cards overlap by design here — that is
   the reference, and it is the same trick the product heroes use with
   .pv3g__card--tl/--bl/--br. (Her earlier "don't layer them" was about the
   photo collage, not UI cards.) */
.las-stats {
  position: absolute;
  z-index: 1;
  top: 50%;
  transform: translateY(-50%);
  right: calc((var(--hero-h) - max(340px, 50svh)) / 2);
  width: min(45%, 515px);
  /* Deliberately SHORTER than the three cards stacked, which is what forces
     them to interlock the way the reference does — at 470px tall they merely
     sat in a column with an 81px gap between the chart card and the bars. */
  height: clamp(340px, 29vw, 415px);
}
.las-stats .las-card { position: absolute; }
.las-card--ring { top: 0;    left: 0; width: 47%; z-index: 1; }
.las-card--line { top: 12%;  right: 0; width: 70%; z-index: 2; }
.las-card--bars { bottom: 0; left: 0; width: 58%; z-index: 3; }
.las-card {
  background: #fff;
  border-radius: var(--tile-radius);   /* was 18px — unified 4 Aug */
  padding: clamp(13px, 1.2vw, 18px);
  box-shadow: 0 18px 40px rgba(15, 20, 56, 0.22);
  /* one-pass entrance, staggered — the looping part is inside each chart */
  opacity: 0;
  animation: las-card-in 620ms var(--hv2-ease) forwards;
}
.las-card--ring { animation-delay: 160ms; }
.las-card--line { animation-delay: 40ms; }
.las-card--bars { animation-delay: 280ms; }
@keyframes las-card-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.las-card__label { margin: 0; font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em; color: #7C88A6; }
.las-card__sub   { margin: 6px 0 0; font-size: 11px; color: #7C88A6; }
.las-card__big   { margin: 5px 0 9px; font-size: clamp(27px, 2.5vw, 38px); font-weight: 800; letter-spacing: -0.02em; color: var(--ge-navy, #0F1438); line-height: 1; }
.las-card__big i { font-style: normal; font-size: 0.5em; font-weight: 700; color: var(--ge-sky, #2FB7F1); margin-left: 2px; }
.las-card__head  { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }

/* live chip — the dot is the only thing that pulses */
.las-live { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; color: #4F7D2C; }
.las-live i { width: 6px; height: 6px; border-radius: 999px; background: #8ACB55; animation: las-pulse 2.4s ease-in-out infinite; }
@keyframes las-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.7); } }

/* ---- ring: sweeps up, holds, resets ---- */
.las-ring { position: relative; display: grid; place-items: center; margin-top: 6px; }
.las-ring svg { width: min(100%, 118px); height: auto; transform: rotate(-90deg); }
.las-ring__track { fill: none; stroke: rgba(27, 54, 126, 0.16); stroke-width: 11; }
.las-ring__fill {
  fill: none; stroke: var(--ge-sky, #2FB7F1); stroke-width: 11; stroke-linecap: round;
  stroke-dasharray: 251.3;              /* 2 * pi * r(40) */
  stroke-dashoffset: 0;
  animation: las-ring-sweep 6s var(--hv2-ease) infinite;
}
@keyframes las-ring-sweep {
  0%       { stroke-dashoffset: 251.3; }
  45%, 82% { stroke-dashoffset: 0; }
  100%     { stroke-dashoffset: 251.3; }
}
.las-ring__num { position: absolute; font-size: clamp(17px, 1.6vw, 24px); font-weight: 800; color: var(--ge-navy, #0F1438); letter-spacing: -0.02em; }
.las-ring__num i { font-style: normal; font-size: 0.55em; color: #7C88A6; }

/* ---- line: the trace redraws on a loop, the dot fades in at the end ---- */
.las-line { display: block; width: 100%; height: clamp(56px, 5vw, 76px); overflow: visible; }
.las-line__trace {
  fill: none; stroke: var(--ge-blue, #1B367E); stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 520; stroke-dashoffset: 0;
  animation: las-trace 7s var(--hv2-ease) infinite;
}
@keyframes las-trace {
  0%       { stroke-dashoffset: 520; }
  55%, 85% { stroke-dashoffset: 0; }
  100%     { stroke-dashoffset: 520; }
}
.las-line__dot {
  fill: #fff; stroke: var(--ge-sky, #2FB7F1); stroke-width: 3.5;
  opacity: 0; animation: las-dot 7s var(--hv2-ease) infinite;
}
@keyframes las-dot { 0%, 45% { opacity: 0; } 60%, 85% { opacity: 1; } 100% { opacity: 0; } }
.las-line__axis { display: flex; justify-content: space-between; margin-top: 6px; font-size: 9.5px; color: #A6B0C4; }

/* ---- bars: grow in sequence, hold, drop back ---- */
.las-bars { display: flex; align-items: flex-end; gap: 6px; height: clamp(48px, 4.4vw, 64px); margin-top: 2px; }
.las-bars span {
  flex: 1; border-radius: 4px 4px 2px 2px; background: #D9E4F2;
  height: var(--h); transform-origin: bottom;
  animation: las-bar 5.6s var(--hv2-ease) infinite;
}
.las-bars span:nth-child(1) { animation-delay: 0ms; }
.las-bars span:nth-child(2) { animation-delay: 110ms; }
.las-bars span:nth-child(3) { animation-delay: 220ms; }
.las-bars span:nth-child(4) { animation-delay: 330ms; }
.las-bars span:nth-child(5) { animation-delay: 440ms; }
.las-bars span:nth-child(6) { background: var(--ge-sky, #2FB7F1); animation-delay: 550ms; }
@keyframes las-bar {
  0%       { transform: scaleY(0.06); }
  32%, 78% { transform: scaleY(1); }
  100%     { transform: scaleY(0.06); }
}
.las-bars__axis { display: flex; justify-content: space-between; margin-top: 6px; font-size: 9.5px; color: #A6B0C4; }

/* same 1300px cutoff as the hero photo it replaces */
@media (max-width: 1300px) { .las-stats { display: none; } }

@media (prefers-reduced-motion: reduce) {
  /* everything settles on its finished state — no loops, no entrance */
  .las-card { opacity: 1; animation: none; }
  .las-ring__fill { animation: none; stroke-dashoffset: 0; }
  .las-line__trace { animation: none; stroke-dashoffset: 0; }
  .las-line__dot { animation: none; opacity: 1; }
  .las-bars span { animation: none; transform: none; }
  .las-live i { animation: none; }
}

/* ---- COLOUR PASS (Rebecca, 28 Jul: "add some more colour to the animation") ----
   The first version was navy/sky/grey and read flat. Now each card carries its
   own colour, the line has a gradient stroke plus a soft area fill under it, and
   the bars run through the palette instead of being grey with one sky bar.
   All from colors_and_type.css: sky #2FB7F1 · blue #1B367E · green #8ACB55 ·
   violet #614DBA · yellow #E8BA19. */

/* The census card was --ge-blue-3 #D9F4FF, which is the SAME pale blue as the
   grouped-symbol-blue3.svg watermark sitting behind it, so the card vanished
   into the mark (Rebecca, 28 Jul). Moved to the green tint — a different hue
   entirely, and "ready" reading green suits a 100% census figure.
   Contrast on #E6F3D9: label #456E26 5.18:1, number #2F5019 7.97:1. */
.las-card--ring { background: #E6F3D9; }
.las-card--ring .las-card__label,
.las-card--ring .las-card__sub { color: #456E26; }
.las-ring__track { stroke: rgba(69, 110, 38, 0.20); }
.las-ring__fill { stroke: #4F7D2C; }
.las-ring__num { color: #2F5019; }
.las-ring__num i { color: #4F7D2C; }

/* flat green — matches the live-pulse dot and the trace's own endpoint
   marker; was a navy->sky->green gradient (Rebecca, 28 Jul: remove all
   gradients site-wide) */
.las-line__trace { stroke: #8ACB55; }
.las-line__area {
  fill: #8ACB55;
  fill-opacity: 0.16;
  opacity: 0;
  animation: las-area 7s var(--hv2-ease) infinite;
}
@keyframes las-area { 0%, 30% { opacity: 0; } 60%, 85% { opacity: 1; } 100% { opacity: 0; } }
.las-line__dot { stroke: #8ACB55; }          /* green marker at the peak */

/* bars cycle through the palette */
.las-bars span:nth-child(1) { background: #C9DCF3; }
.las-bars span:nth-child(2) { background: var(--ge-sky, #2FB7F1); }
.las-bars span:nth-child(3) { background: #A9CBEF; }
.las-bars span:nth-child(4) { background: var(--ge-violet-3, #8572DA); }
.las-bars span:nth-child(5) { background: #7FC3E8; }
.las-bars span:nth-child(6) { background: #8ACB55; }
.las-card--bars .las-card__big i { color: #8ACB55; }

/* a small amber "trend" chip on the bars card so a third hue appears */
.las-trend {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: 8px; padding: 2px 7px; border-radius: 999px;
  background: #FDF8E9; color: #7A5C00;
  font-size: 10px; font-weight: 800; letter-spacing: 0.02em;
  vertical-align: 0.32em;
}
@media (prefers-reduced-motion: reduce) {
  .las-line__area { animation: none; opacity: 1; }
}

/* HERO BACKGROUND MARK — no longer overridden here. The product-page ghost
   mark (large, faint, white, bleeding off the TOP-right) is now the BASE
   treatment for every .hero2--cutout hero, set once in hero-cutout.css
   (Rebecca, 28 Jul: "keep this as a rule"). These three pages inherit it, so
   this duplicate block was deleted rather than left to drift out of sync.
   The markup still points at grouped-symbol-white.svg, which the rule needs. */

/* ============================================================
 * STH — "big-sentence" audience hero (TRIAL on Secondary, 29 Jul 2026)
 * ------------------------------------------------------------
 * Rebecca's Starling takeaway: audience pages don't need the same
 * hero as home/product pages. This is the approved statement-band
 * setting (one big navy line on white) promoted to the top of the
 * page: white sheet · audience row · big H1 · a "scene" in the
 * reader's own words · year-group pills · one navy CTA · facts
 * line — then three real school photos hanging across the seam
 * into the tint band below.
 *
 * Trial scope: secondary-schools.html ONLY. Primary keeps its
 * classroom-blue hero (her 27 Jul call) and LAs keeps las-stats
 * until she approves this. NOTHING here touches hero-cutout.css
 * (8 pages load it) — these .sth rules are additive and inert on
 * any page without the markup.
 *
 * Revert: restore the old <section class="hero2 ..."> block in
 * the page (kept in comments there) — this CSS can stay, unused.
 * ============================================================ */
.sth {
  position: relative;
  background: #fff;
  overflow-x: clip;                 /* NOT overflow:hidden — the photo strip must hang out of the bottom */
  padding-top: clamp(48px, 6vw, 88px);
  /* one token drives the straddle AND the clearance below (they cannot drift) */
  --sth-hang: clamp(80px, 12vw, 130px);
}
.sth__bg {
  position: absolute; inset: 0;
  overflow: hidden;
  pointer-events: none;
}
/* ghost mark — site geometry (hero-cutout.css base rule) but the PALE BLUE
   mark: a white mark at 11% is invisible on a white ground. Same corner, same
   size, same faintness to the eye. ONE-LINE ALTERNATIVE for the letter of the
   28 Jul rule: point src back at grouped-symbol-white.svg, set opacity to
   .11, and move this span inside the strip's right-hand photo. */
.sth__mark {
  position: absolute;
  top: clamp(-200px, -14vw, -90px);
  right: clamp(-220px, -14vw, -110px);
  width: clamp(500px, 70vw, 1120px);
  height: auto;
  opacity: 0.5;
}
.sth__inner {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px); /* right column is deliberate air */
  column-gap: clamp(32px, 5vw, 88px);
  align-items: end;
}

/* --- audience row (replaces the eyebrow pill; links to sibling pages) --- */
.sth__who {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 16px;
  font-size: 15px;
}
.sth__who a {
  color: #4A5876;
  padding-block: 12px; margin-block: -6px;   /* 44px tap height without moving the layout */
}
.sth__who a:hover { color: #1B367E; text-decoration: underline; text-underline-offset: 4px; }
.sth__who [aria-current="page"] {
  color: #0F1438; font-weight: 600;
  border-bottom: 3px solid #2FB7F1;
  border-radius: 1.5px;
  padding-bottom: 7px;
}
.sth__who a + a::before,
.sth__who a + span::before,
.sth__who span + a::before { content: ""; display: inline-block; width: 1px; height: 14px; background: #E6ECF4; margin-right: 16px; vertical-align: -2px; }
@media (max-width: 560px) {
  .sth__who a + a::before, .sth__who a + span::before, .sth__who span + a::before { display: none; }
}

/* --- the big sentence --- */
.sth__h1 {
  font-size: clamp(2.125rem, 5.8vw, 5.25rem);   /* 34 -> 84px, rem so zoom scales the whole composition */
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: #0F1438;
  max-width: 26ch;
  margin: clamp(22px, 2.6vw, 34px) 0 0;
}
/* highlight pill — geometry from .hero2__copy h1 .mark, site-signature colours
   (#D9F4FF / #1B367E = 9.8:1). NOT --st-tint-2/--st-ink (4.28:1, fails AA). */
.sth__h1 .mark {
  display: inline-block;
  background: #D9F4FF; color: #1B367E;
  border-radius: 0.24em;
  padding: 0.1em 0.18em 0.16em;
  margin-block: 0.14em 0.08em;
  line-height: 1;
}

/* --- the scene: their day, their words; GroupEd not named --- */
.sth__scene {
  font-size: clamp(17px, 1.4vw, 21px);
  font-weight: 400;
  line-height: 1.55;
  color: #4A5876;
  max-width: 46ch;
  margin: clamp(20px, 2.4vw, 30px) 0 0;
}
/* --- the turn: where GroupEd arrives --- */
.sth__turn {
  font-size: clamp(19px, 1.6vw, 25px);
  font-weight: 400;                  /* body copy is never bold */
  line-height: 1.4;
  color: #0F1438;
  margin: 14px 0 0;
}

/* --- year-group pills --- */
.sth__pills { margin-top: clamp(26px, 3vw, 36px); }
.sth__pills-label { font-size: 13.5px; color: #4A5876; margin: 0 0 10px; }
.sth__pills ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.sth__pills li {
  padding: 7px 15px;
  font-size: 14.5px; font-weight: 600; color: #0F1438;
  border: 1px solid rgba(15, 20, 56, 0.14);
  border-radius: 999px;
  background: transparent;
  animation: sth-pill-fill 300ms var(--hv2-ease) forwards;
}
@keyframes sth-pill-fill { to { background: var(--st-tint); } }
.sth__pills li:nth-child(1) { animation-delay: 420ms; }
.sth__pills li:nth-child(2) { animation-delay: 480ms; }
.sth__pills li:nth-child(3) { animation-delay: 540ms; }
.sth__pills li:nth-child(4) { animation-delay: 600ms; }
.sth__pills li:nth-child(5) { animation-delay: 660ms; }
.sth__pills li:nth-child(6) { animation-delay: 720ms; }
.sth__pills li:nth-child(7) { animation-delay: 780ms; }
.sth__pills li:nth-child(8) { animation-delay: 840ms; }

/* --- actions: ONE navy pill + one quiet text link (the restraint) --- */
.sth__actions {
  margin-top: clamp(28px, 3.2vw, 42px);
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}
.sth__cta.btn {
  background: #0F1438; color: #fff;
  min-height: 48px;
}
.sth__cta.btn:hover { background: #1B367E; color: #fff; }
.sth__cta .btn__arrow { background: #2FB7F1; color: #0F1438; }  /* the one bright accent */
.sth__link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 15px; font-weight: 600; color: #1B367E;
}
.sth__link:hover { color: #0F1438; text-decoration: underline; text-underline-offset: 4px; }
.sth__link svg { width: 15px; height: 15px; transition: transform 200ms var(--hv2-ease); }
.sth__link:hover svg { transform: translateX(4px); }
.sth__link:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(47, 183, 241, 0.45); border-radius: 999px; }

/* --- footnote facts --- */
.sth__facts {
  margin: clamp(16px, 1.8vw, 22px) 0 0;
  font-size: 13px; color: #4A5876;
}

/* --- the seam strip: three real schools crossing into the band below --- */
.sth__strip {
  /* full-bleed via the proven crests trick, then padded back to the hero-tile margin */
  width: 100vw; margin-left: calc(50% - 50vw);
  padding-inline: clamp(10px, 1.6vw, 22px);
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: clamp(12px, 1.4vw, 20px);
  margin-top: clamp(40px, 5vw, 64px);
  margin-bottom: calc(-1 * var(--sth-hang));   /* the hang — same token as the clearance below */
  position: relative; z-index: 1;
}
.sth__strip img {
  width: 100%;
  height: clamp(180px, 19vw, 260px);
  object-fit: cover;
  object-position: center var(--focus, 50%);
  border-radius: clamp(18px, 2vw, 24px);
  box-shadow: 0 18px 40px rgba(15, 20, 56, 0.14);
  animation: las-card-in 520ms var(--hv2-ease) both;
}
.sth__strip img:nth-child(2) { animation-delay: 110ms; }
.sth__strip img:nth-child(3) { animation-delay: 220ms; }

/* clearance in the band below — reads the SAME token, and the adjacent-sibling
   selector means it only fires on a page that actually has the new hero */
.sth + .st-proof .bandhead { padding-top: calc(var(--sth-hang) + clamp(24px, 2.6vw, 40px)); }
.sth + .st-proof { --sth-hang: clamp(80px, 12vw, 130px); }

/* --- entrance: CSS keyframes, NOT .rv (which is opacity:0 until deferred JS
   runs — putting it on above-fold copy would blank the LCP element) --- */
@keyframes sth-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.sth__who    { animation: sth-in 420ms var(--hv2-ease) both; }
.sth__h1     { animation: sth-in 420ms var(--hv2-ease) 70ms both; }
.sth__scene  { animation: sth-in 420ms var(--hv2-ease) 140ms both; }
.sth__turn   { animation: sth-in 420ms var(--hv2-ease) 210ms both; }
.sth__pills  { animation: sth-in 420ms var(--hv2-ease) 280ms both; }
.sth__actions,
.sth__facts  { animation: sth-in 420ms var(--hv2-ease) 350ms both; }

@media (prefers-reduced-motion: reduce) {
  .sth__who, .sth__h1, .sth__scene, .sth__turn, .sth__pills, .sth__actions, .sth__facts,
  .sth__strip img {
    animation: none; opacity: 1; transform: none;
  }
  .sth__pills li { animation: none; background: var(--st-tint); }
}

/* --- responsive --- */
@media (max-width: 1024px) {
  .sth__inner { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .sth { --sth-hang: clamp(56px, 14vw, 72px); }
  .sth + .st-proof { --sth-hang: clamp(56px, 14vw, 72px); }
  /* the strip STAYS three photos — plural peers is the whole belonging case.
     It becomes a swipeable snap row rather than collapsing to one photo. */
  .sth__strip {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 74%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-inline: 20px;
    gap: 12px;
  }
  .sth__strip::-webkit-scrollbar { display: none; }
  .sth__strip img {
    aspect-ratio: 1 / 1.15;
    height: auto;
    scroll-snap-align: center;
  }
  .sth__mark { width: min(420px, 92vw); top: -70px; right: -140px; }
}
@media (max-width: 560px) {
  .sth__actions { flex-direction: column; align-items: stretch; }
  .sth__cta.btn { width: 100%; max-width: 320px; margin-inline: auto; justify-content: center; }
  .sth__link { justify-content: center; }
}

/* ------------------------------------------------------------
 * AUDIENCE HERO — copy vertically centred (Rebecca, 29 Jul:
 * "can we make the text hero central. you need to do the same
 * for secondary school page too and las page")
 *
 * The shared hero frame is a flex row with align-items: flex-end,
 * so the copy column sat hard against the bottom of the card
 * (measured 148px of air above it, 0 below, at 1440px). Centring
 * the COPY only — via align-self, not by changing the frame's
 * align-items — leaves the photo-and-cards column exactly where
 * it is.
 *
 * This lives in school-types.css on purpose: only Primary,
 * Secondary and LAs & MATs load this sheet. Founders Club uses
 * the same .hero2--photo template but was NOT part of the ask,
 * so it keeps its bottom-aligned copy. Putting this in
 * hero-cutout.css would have changed Founders Club too.
 *
 * Padding is evened up to 44px top and bottom (was 40/48, which
 * only mattered while the block was bottom-aligned) so the
 * optical centre matches the true centre.
 * ------------------------------------------------------------ */
.hero2--photo .hero2__copy {
  align-self: center;
  padding-block: 44px;
}

/* ============================================================
 * AUDIENCE HERO — the Monzo pattern  (5 Aug 2026)
 * Rebecca sent monzo.com's hero and asked for "each of the school type heros
 * designed like this". Measured off her reference: a pale tinted card inset
 * from the page edges, copy ranged left inside it, a small pill label above the
 * headline, a dark pill CTA, and the photograph in its own rounded frame on the
 * right with an object breaking out over its corner.
 *
 * The three heroes already had the right BONES — eyebrow, headline, lede, two
 * buttons, photo right, floating cards on the photo. What changes is the tone:
 * they were dark cards with white type (navy, classroom-blue #2248C0, plum
 * #A24F81) and this inverts them to a pale card with dark type.
 *
 * ⚠ ONE NEUTRAL TINT ON ALL THREE, not a pale version of each page's colour.
 * Monzo's tint measures 4.2% off white — it reads as white with a cast, not as
 * a coloured panel. A pale blue, pale plum and pale navy would have re-created
 * the coloured-section-background look that was tried and rejected on the home
 * page ("fun/bright" = bright accents on a clean base). Each page's colour
 * survives where it always did: the eyebrow pill, the headline's highlight, and
 * the cards on the photo.
 *
 * Applied via .hero2--aud on the section, so removing one class per page puts
 * the dark heroes back exactly as they were.
 * ============================================================ */
.st .hero2--aud.hero2--cutout .hero2__frame {
  /* the site's own neutral module tint — same value as .band--module, so the
     hero belongs to the same family as the modules further down the page */
  background: var(--ge-bg-light, #F3F7FA);
  /* modular geometry: the same inset and 64px radius every carded band on the
     site uses, rather than the hero's own bespoke radius.
     ⚠ --hero-gutter, NOT margin-inline. The frame's width comes from
     `min(--hero-cap, 100% - 2 × --hero-gutter)`, so a margin stacked on top of a
     width that still assumed the old 24px gutter made the frame wider than its
     own box — 16-21px of page overflow the moment the inset went to 64. Feeding
     the token into the gutter keeps the width formula and the edge in agreement. */
  --hero-gutter: var(--band-inset, 24px);
  border-radius: var(--band-radius, 64px);
}

/* ---- type inverts to dark ---- */
.st .hero2--aud .hero2__copy h1 { color: var(--ge-navy, #0F1438); }
.st .hero2--aud .hero2__lede { color: #4A5876; }

/* ---- the label becomes Monzo's white pill ----
   theirs is a white chip with near-black text, not a coloured one. The page's
   own colour moves to the TEXT, which keeps the three pages distinguishable
   without putting a second saturated block next to the headline. */
.st .hero2--aud .hero2__eyebrow {
  background: #fff;
  color: var(--ge-navy, #0F1438);
  box-shadow: 0 2px 10px rgba(15, 20, 56, 0.06);
}
.st--primary .hero2--aud.hero2--cutout .hero2__eyebrow { color: #2248C0; }
.st--las .hero2--aud.hero2--cutout .hero2__eyebrow { color: #8A436E; }

/* ---- buttons flip: the primary CTA was white-on-dark, now dark-on-pale ---- */
.st .hero2--aud .hero2__cta.btn {
  background: var(--ge-navy, #0F1438);
  color: #fff;
}
.st .hero2--aud .hero2__cta.btn:hover { background: #1B2352; color: #fff; }
.st .hero2--aud .hero2__cta .btn__arrow { background: #fff; color: var(--ge-navy, #0F1438); }
.st .hero2--aud .st-hero__ghost.btn {
  background: transparent;
  color: var(--ge-navy, #0F1438);
  box-shadow: inset 0 0 0 1.5px rgba(15, 20, 56, 0.22);
}
.st .hero2--aud .st-hero__ghost.btn:hover {
  background: rgba(15, 20, 56, 0.05);
  box-shadow: inset 0 0 0 1.5px rgba(15, 20, 56, 0.4);
}

/* ---- the ghost hexagon ----
   ⚠ SKY, NOT NAVY — 7 Aug 2026. The mark used to be filtered to navy and shown
   at 3.5%, on the reasoning that white-at-11% is invisible on a pale card. True,
   but inverting to navy solved it the wrong way round: a dark glyph on a pale
   card gets heavy fast, which is why it had to be pushed down to 3.5%, at which
   point it was not faint but absent.
   The Launch Deal hero solved the same problem properly — sky #2FB7F1, which
   shifts the HUE rather than the lightness and stays legible without going dark.
   These now use the identical treatment, so "the same opacity" genuinely means
   the same look: same colour, same 0.20, same pale background.
   ⚠ The filter is what recolours the white source SVG. Keep the two heroes in
   step; if one changes colour, both do. */
.st .hero2--aud .hero2__mark img { filter: brightness(0) saturate(100%) invert(64%) sepia(58%) saturate(2493%) hue-rotate(169deg) brightness(101%) contrast(91%); }
  /* ⚠ 0.20 — THE ONE VALUE FOR HERO MARKS ON A PALE BACKGROUND (7 Aug 2026).
     A single site-wide number cannot work: 0.11 of a pale glyph reads clearly on
     navy and is invisible on the #F3F7FA card. That is exactly the bug Rebecca
     reported three times on the Launch Deal hero. So the rule is one value per
     BACKGROUND FAMILY — 0.11 on dark, 0.20 on pale — which is what makes them
     look the same, which is what she actually asked for.
     ⚠ THIS REVERSES A 5 AUG DECISION on the school-type heroes, where she asked
     for the product and school-type watermarks to be fainter and they went to
     0.035. At 0.035 a pale glyph on a pale card is not faint, it is absent. */
.st .hero2--aud.hero2--cutout .hero2__mark { opacity: 0.20; }

/* ---- the photo keeps its frame; its shadow softens on a pale ground ----
   a 38%-black shadow was tuned against navy and reads as dirt on #F3F7FA */
.st .hero2--aud .hero2__photoframe { box-shadow: 0 30px 70px rgba(15, 20, 56, 0.16); }

/* ---- the floating cards get a hairline ----
   on a dark hero their white edge did the separating; over a photo on a pale
   card the bottom-left one can overlap both, so it needs its own edge */
.st .hero2--aud .hero2__card { box-shadow: 0 18px 40px rgba(15, 20, 56, 0.16), 0 0 0 1px rgba(15, 20, 56, 0.05); }


/* ⚠ SPECIFICITY, learned the hard way on the first pass.
   .st--primary .hero2--cutout .hero2__frame and .st--las's equivalent are both
   (0,3,0), so the plain .hero2--aud .hero2__frame at (0,2,0) lost on both pages
   and only Secondary — which has no page-specific frame rule — inverted. The
   result was navy type on classroom blue at 2.34:1, i.e. an unreadable headline.
   Every rule above now carries .st plus a compounded .hero2--aud.hero2--cutout
   where it has to beat a page rule.
   The two page rules themselves are left in place, not deleted: taking .hero2--aud
   off a page must still return it to its own dark colour. */

/* the LAs data cards were built for a plum ground; on the pale card their white
   surfaces need the same hairline the photo cards get */
.st--las .hero2--aud .las-card { box-shadow: 0 18px 40px rgba(15,20,56,0.16), 0 0 0 1px rgba(15,20,56,0.05); }

/* ---- BIGGER HERO PHOTO  (5 Aug 2026) ----
 * "we need our images to be bigger like this. please still keep our tiles though."
 *
 * MEASURED against the Monzo hero she sent: their photo is ~44% of the card's
 * width and ~89% of its height. Ours was 39% and 69% — so the real gap was
 * HEIGHT, not width, and it read as a small picture floating in a large card.
 *
 * Driven by percentage of the frame rather than svh. The old
 * `height: max(340px, 50svh)` tracked the WINDOW, so the photo's share of the
 * card changed with every browser height; a percentage keeps the composition
 * fixed at 86% whatever the viewport does.
 * The aspect goes 1.1:1 → 0.98:1 — very slightly portrait. That is what buys the
 * height without the width running into the copy, since width follows aspect.
 *
 * ⚠ THE TILES ARE KEPT, as asked. They are absolutely positioned against
 * .hero2__photowrap, which is itself absolute — so it is their containing block
 * and they travel with the photo automatically. Nothing about them changes here;
 * they simply sit on the corners of a bigger picture. */
.st .hero2--aud .hero2__photowrap {
  height: 86%;
  aspect-ratio: 0.98 / 1;
  width: auto;
}

/* the copy column gives up ~50px so the two never touch. Was 40rem + padding
   (≈738px at 1440), which put its right edge exactly on the photo's left edge
   once the photo grew. The headline and lede both sit well inside this. */
/* ⚠ min-width, not unconditional. hero-cutout.css hides the photo entirely
   below 1300px ("the copy and the photo collide, so the photo goes") and gives
   the copy 58rem back. An unconditional narrowing here at (0,4,0) beat that and
   left the copy squeezed into 36rem with no photo beside it — a narrow column of
   text and a large empty right half. Only applies where there IS a photo. */
@media (min-width: 1301px) {
  .st .hero2--aud .hero2__copy {
    max-width: calc(36rem + 2 * clamp(20px, 3.4vw, 56px));
  }
}

/* ---- LAs & MATs: a TILE where the photo goes  (5 Aug 2026) ----
 * "even though we dont have a image on the las hero page - lets make a tile
 * here the image would normally be."
 * Primary and Secondary have a photograph occupying 86% of the hero's height
 * with white cards on its corners. This page has only the three floating data
 * cards and nothing behind them, so its hero read as emptier than the other two
 * even though it carries more content.
 * .las-stats becomes that missing block: same height and position as the photo
 * on the other two pages, as a soft tinted tile with the three cards arranged on
 * it exactly as they already were. Nothing about the cards changes — they are
 * still absolutely positioned against .las-stats, which is still their
 * containing block.
 * ⚠ WHITE since 6 Aug 2026 ("can we make this tile white on the las page"). It was
 * #E9EFF7, and the reason given at the time was that the cards were all white and a
 * white tile would erase them. That is no longer true: the census card is now green
 * tint and the onboarding card violet tint, so only the attendance card is white —
 * and it keeps its own drop shadow, which is what separates it. Verified after the
 * change that the white card still reads against the white tile. */
.st--las .hero2--aud .las-stats {
  /* the photo's geometry on Primary/Secondary, matched */
  height: 86%;
  width: min(43%, 620px);
  top: 50%;
  right: clamp(20px, 3.4vw, 56px);
  transform: translateY(-50%);
  background: #fff;
  border-radius: clamp(18px, 2vw, 28px);
  box-shadow: 0 30px 70px rgba(15, 20, 56, 0.16);
  /* the cards sit ON it, so they need room inside rather than hanging off */
  padding: clamp(18px, 2vw, 30px);
}
/* the three cards keep their arrangement, expressed against the tile's padding
   box instead of the old bare column */
.st--las .hero2--aud .las-stats .las-card--ring { top: clamp(18px, 2vw, 30px); left: clamp(18px, 2vw, 30px); }
.st--las .hero2--aud .las-stats .las-card--line { top: 20%; right: clamp(18px, 2vw, 30px); }
.st--las .hero2--aud .las-stats .las-card--bars { bottom: clamp(18px, 2vw, 30px); left: clamp(18px, 2vw, 30px); }

@media (max-width: 1300px) {
  /* the other two pages drop the photo entirely below this width; the tile goes
     with it so all three heroes behave the same as they narrow */
  .st--las .hero2--aud .las-stats { display: none; }
}

/* ---- SCHOOL-TYPE TESTIMONIALS: the OnSite treatment  (5 Aug 2026) ----
 * Built for LAs & MATs first, then "apply this to the other school type pages" —
 * so the scope widened from .st--las to .st and Primary and Secondary follow.
 * "apply how we have done the testimonial on the onsite page to the las and mats
 * page. we dont need a carousel."
 * OnSite's is tile-free: no card, no watermark, oversized navy type at the home
 * page's exact size, crest beside the school name in the caption. Same here.
 * ⚠ The carded .quote component itself is untouched — this only restyles it
 * inside .band--proof on the .st pages. Anywhere else it still has its card. */
.st .band--proof .quote {
  background: transparent;
  box-shadow: none;
  border: none;
  padding: 0;
  color: var(--ge-navy, #0F1438);
}
/* the hexagon behind the quote goes with the card — it was a watermark for a
   coloured tile, and there is no tile now */
.st .band--proof .quote__mark { display: none; }
.st .band--proof .quote blockquote {
  /* the home page's exact numbers, which OnSite also uses — 25ch at up to 54px.
     Keep the three in step; if one moves they all should. */
  margin: 0;
  max-width: 25ch;
  font-size: clamp(30px, 3.9vw, 54px);
  line-height: 1.18;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--ge-navy, #0F1438);
}
.st .band--proof .quote figcaption {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.2vw, 18px);
  margin-top: clamp(22px, 2.4vw, 32px);
}
.st .band--proof .quote figcaption img { height: clamp(40px, 3.6vw, 52px); width: auto; flex: none; }
/* ⚠ these were white for the violet/blue/navy cards. On no card at all that is
   white on white — the same trap as the OnSite quote and its stat chips. */
.st .band--proof .q-name { color: var(--ge-navy, #0F1438); font-size: clamp(15px, 1.2vw, 17px); }
.st .band--proof .q-role { color: #4A5876; font-size: clamp(13px, 1.05vw, 14.5px); opacity: 1; }
.st .band--proof .q-hl { color: var(--ge-violet-4, #614DBA); }
/* one quote, so the track is just a block */
.st .band--proof .quotes { display: block; }
.st .band--proof .quote { position: static; opacity: 1; }

/* ---- HERO PILLS: BIGGER, BETTER LAYERED  (5 Aug 2026) ----
 * "can we make the pop up pills bigger and layer them on the image in a nicer
 * way." They were sized for the old smaller photo; against a picture that is now
 * 86% of the hero's height they had shrunk in proportion and read as labels
 * rather than moments.
 * Roughly a third bigger throughout — icon 44→56px, the big number 38→52px, more
 * padding, a softer larger radius. Scoped to .hero2--aud so the same component
 * on other pages keeps its current size.
 * The LAYERING is the other half: they now hang further off the photo's edges
 * (-30px → -44px) so they clearly sit ON the picture rather than being tucked
 * inside it, and Secondary's second card moved from top-right to bottom-right in
 * the markup so its pair runs diagonally instead of clustering along the top. */
.st .hero2--aud .hero2__card {
  border-radius: 22px;
  /* a deeper, softer shadow — a bigger card needs more lift to stay separate
     from a busy photograph */
  box-shadow: 0 22px 50px rgba(15, 20, 56, 0.24), 0 0 0 1px rgba(15, 20, 56, 0.04);
}
.st .hero2--aud .hero2__cardpill {
  gap: 16px;
  padding: 14px 28px 14px 14px;
  border-radius: 999px;
}
.st .hero2--aud .hero2__pillico { width: 56px; height: 56px; }
.st .hero2--aud .hero2__pillico svg { width: 24px; height: 24px; }
.st .hero2--aud .hero2__cardpill > span:last-child { font-size: 16.5px; }
.st .hero2--aud .hero2__cardpill strong,
.st .hero2--aud .hero2__cardpill b { font-size: 17.5px; }
.st .hero2--aud .hero2__cardbig { padding: 18px 26px; border-radius: 22px; }
.st .hero2--aud .hero2__biglabel { font-size: 15px; gap: 10px; }
.st .hero2--aud .hero2__bignum { font-size: clamp(42px, 3.6vw, 52px); margin-top: 6px; }

/* Hang off the photo's edges so they layer over it rather than sit in it — but not
   so far that they crowd the HERO CARD's edge, which is the thing you actually see.
   ⚠ 6 Aug 2026, Rebecca: "those pills in that example are too close to the edges…
   its the same on primary and secondary". Measured at 1440: the photo sits 45px
   from the frame's top and 49px from its right, and these were pulling the cards
   43px back out of it — landing the top pill 2px from the frame's top edge and the
   attendance card 6px from its right. On a card with a 64px corner radius that put
   them inside the curve.
   Halved to ~22px at 1440, which leaves ~23px of clearance at the top and ~27px at
   the right while keeping the overhang the design wants.
   ⚠ Judge these against the FRAME, not the photo — the photo's own inset is what
   turns a modest overhang into a collision. */
.st .hero2--aud .hero2__card--tl { top: clamp(-22px, -1.5vw, -12px); left: clamp(-44px, -3vw, -24px); }
.st .hero2--aud .hero2__card--tr { top: clamp(-22px, -1.5vw, -12px); right: clamp(-22px, -1.5vw, -12px); }
.st .hero2--aud .hero2__card--bl { bottom: clamp(84px, 8vw, 112px); left: clamp(-44px, -3vw, -24px); }
.st .hero2--aud .hero2__card--br { bottom: clamp(-18px, -1.2vw, -10px); right: clamp(-22px, -1.5vw, -12px); }

/* ============================================================
 * HERO IN THE NAV-TILE COLOUR — a trial  (6 Aug 2026)
 * Rebecca: "could we try the hero itself being the colour that the school is in
 * the nav bar". The colours are lifted straight from the mega-menu tiles in
 * home-v2.css, so the tile you click and the hero you land on are the same:
 *   Primary schools  → .mm__tile--blue     #2248C0
 *   Secondary schools→ .mm__tile--navy     #0F1438
 *   LAs & MATs       → .mm__tile--skytint  #D9F4FF  (pale — keeps dark type)
 *
 * ⚠ IT IS A SEPARATE CLASS ON TOP OF .hero2--aud, NOT A REPLACEMENT. --aud carries
 *   the modular GEOMETRY (--hero-gutter: --band-inset and the 64px radius) that
 *   puts these heroes on the site's one margin. Dropping --aud to get the old dark
 *   heroes back would silently undo that and the hero would fall off the shared
 *   margin. To end the trial, delete `hero2--tile` from the three pages — one word
 *   each — and everything below stops applying.
 *
 * ⚠ TWO of the three tiles are DARK and one is PALE, so the type cannot invert
 *   wholesale. Primary and Secondary flip to white; LAs keeps the dark-on-pale
 *   treatment --aud already gives it and only changes its background.
 * ============================================================ */
.st--primary   .hero2--tile.hero2--cutout .hero2__frame { background: #2248C0; }
.st--secondary .hero2--tile.hero2--cutout .hero2__frame { background: var(--ge-navy, #0F1438); }
.st--las       .hero2--tile.hero2--cutout .hero2__frame { background: var(--ge-violet-4, #614DBA); }  /* follows the nav tile, changed to OnSite violet 6 Aug 2026 */

/* ---- the two DARK tiles: type back to white ---- */
.st--primary .hero2--tile .hero2__copy h1,
.st--secondary .hero2--tile .hero2__copy h1,
.st--las .hero2--tile .hero2__copy h1 { color: #fff; }
.st--primary .hero2--tile .hero2__lede,
.st--secondary .hero2--tile .hero2__lede,
.st--las .hero2--tile .hero2__lede { color: rgba(255, 255, 255, 0.86); }

/* the CTA was navy-on-pale under --aud; on a dark card it has to invert or it
   disappears into the background */
.st--primary .hero2--tile .hero2__cta.btn,
.st--secondary .hero2--tile .hero2__cta.btn,
.st--las .hero2--tile .hero2__cta.btn { background: #fff; color: var(--ge-navy, #0F1438); }
.st--primary .hero2--tile .hero2__cta.btn:hover,
.st--secondary .hero2--tile .hero2__cta.btn:hover,
.st--las .hero2--tile .hero2__cta.btn:hover { background: rgba(255, 255, 255, 0.88); color: var(--ge-navy, #0F1438); }
.st--primary .hero2--tile .hero2__cta .btn__arrow,
.st--secondary .hero2--tile .hero2__cta .btn__arrow,
.st--las .hero2--tile .hero2__cta .btn__arrow { background: var(--ge-navy, #0F1438); color: #fff; }
.st--primary .hero2--tile .st-hero__ghost.btn,
.st--secondary .hero2--tile .st-hero__ghost.btn,
.st--las .hero2--tile .st-hero__ghost.btn {
  color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.45);
}
.st--primary .hero2--tile .st-hero__ghost.btn:hover,
.st--secondary .hero2--tile .st-hero__ghost.btn:hover,
.st--las .hero2--tile .st-hero__ghost.btn:hover {
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.75);
}

/* the eyebrow stays the white pill --aud gives it; only the LAs text colour needs
   re-pointing, since its hero is no longer the neutral tint */
.st--secondary .hero2--tile.hero2--cutout .hero2__eyebrow { color: var(--ge-navy, #0F1438); }
.st--las       .hero2--tile.hero2--cutout .hero2__eyebrow { color: var(--ge-violet-4, #614DBA); }

/* ---- the ghost hexagon ----
   ⚠ White at 0.11 on the two dark tiles — the site's dark-hero value. The sky-at-
   0.20 treatment --aud uses is for PALE cards and would be far too strong here.
   The LAs tile is pale, so it keeps --aud's sky mark untouched. */
.st--primary .hero2--tile .hero2__mark img,
.st--secondary .hero2--tile .hero2__mark img,
.st--las .hero2--tile .hero2__mark img { filter: none; }
.st--primary .hero2--tile .hero2__mark,
.st--secondary .hero2--tile .hero2__mark,
.st--las .hero2--tile .hero2__mark { opacity: 0.11; }

/* ---- the hexagon clears the copy  (6 Aug 2026) ----
 * Rebecca: "can we also move the heros icon logo further to the right so its not
 * touching any text". Measured at 1440: the mark's left edge sat at 506px inside
 * the frame while the copy ran to 723px — a 217px overlap, with the headline
 * reading straight through the hexagon.
 * Moved right AND narrowed, because doing either alone is wrong: pushing it right
 * on its own would slide most of it off the card and leave a sliver, and shrinking
 * it alone would not have been enough. Together they put the left edge at ~765px,
 * about 42px clear of the longest line, and still leave ~540px of mark on the card.
 * ⚠ Scoped to .st on purpose. `.hero2--cutout .hero2__mark` in hero-cutout.css is
 * shared markup, but these three audience pages are the ONLY pages that render it
 * (checked across all 29) — scoping keeps it that way if another page adopts it.
 * ⚠ The two numbers are a pair. Change one and re-measure the clearance, or the
 * headline creeps back under the hexagon. */
.st .hero2--cutout .hero2__mark {
  /* ⚠ THREE numbers doing one job — read all three before touching any.
     Rebecca wanted two things that fight each other at this width: "not touching
     any text" and "i still want it to slightly peak out of the left side of the
     photo". Measured at 1440: the photo's left edge is 717px into the frame and the
     headline's long line ends at 723 — it already runs 6px PAST the photo, so there
     is no clear gap beside the headline to peek into.
     Resolved with the vertical, not the horizontal: the hexagon is pushed DOWN so
     its widest point sits level with the buttons (which end at 456) instead of the
     headline. It emerges ~50px to the left of the photo, well clear of every line
     of copy, and the peek reads exactly as asked. */
  /* ⚠ 6 Aug, second pass: "the icon logo in the hero needs to move up bit now".
     Was clamp(20px, 5vw, 90px) — pushed down far enough to clear the headline, but
     it then sat low enough to read as sinking out of the card. Raised ~60px. The
     widest point of the hexagon still lands below the headline's baseline, which is
     the constraint that matters; re-measure the clearance if you move it again. */
  top: clamp(-40px, 2vw, 30px);
  right: clamp(-240px, -15vw, -120px);
  width: clamp(420px, 60vw, 960px);
}
@media (max-width: 900px) {
  /* stacked layout: the copy has the full width, so the mark goes back to being a
     corner flourish rather than something that has to dodge a text column */
  .st .hero2--cutout .hero2__mark { right: clamp(-200px, -16vw, -100px); width: clamp(400px, 66vw, 700px); }
}

/* ---- the closing board takes the page's own colour  (6 Aug 2026) ----
 * Rebecca: "can we make these on each school types pages corospond with the pages
 * hero colour". The board was navy on all three; it now matches whatever the hero
 * (and therefore the nav tile) is, so a page reads as one colour end to end:
 *   Primary   #2248C0   ·   Secondary  navy   ·   LAs & MATs  violet #614DBA
 * ⚠ These three values are the SAME ONES as .hero2--tile above and .mm__tile--*
 * in home-v2.css. Three places, one colour per page — change one, change all three,
 * or the tile, the hero and the closing board stop agreeing.
 * ⚠ Secondary is left to inherit the base navy rather than restated, so there is
 * one less number to keep in sync.
 * No type rules needed: the board is already white-on-dark, and all three colours
 * are dark enough to carry white text (violet 7.28:1, blue 8.59:1, navy 17.4:1). */
.st--primary .st-board { background: #2248C0; }
.st--las     .st-board { background: var(--ge-violet-4, #614DBA); }

/* ============================================================
 * LAs HERO CARD CLUSTER — RE-STAGED, AND MORE COLOUR  (6 Aug 2026)
 * Rebecca: "i feel like these could be displayed in a nicer arrangment. use more
 * colours too".
 *
 * WHAT WAS WRONG, measured: the three cards were 47% + 70% + 58% wide and all
 * anchored to the same left/right edges, so they summed to 175% of the container.
 * The 70%-wide chart card started at 30% and sat on top of the census card, whose
 * gauge is centred at ~23% — the gauge and its "100%" were completely hidden. It
 * read as a mistake rather than as a stack.
 *
 * THE NEW STAGGER: the two supporting cards are narrower and sit on opposite
 * corners, and only their CORNERS tuck under the chart card, never their content.
 *   ring  0-40%   top-left        ·  the gauge is now fully visible
 *   line  38-100% upper-right     ·  the widest card, and the one you read first
 *   bars  0-56%   bottom-left     ·  clears the chart's bottom edge
 * ⚠ The overlap is deliberate but small — it is what stops the group reading as a
 *   plain column. If you widen any card, re-check the gauge is still uncovered.
 *
 * MORE COLOUR: each card now carries a different accent from the palette instead
 * of two whites and one green — green for census (a "ready" figure), sky for
 * attendance, violet for onboarding, which also picks up the page's new violet.
 * Every pairing is checked for contrast; the numbers are in the comments.
 * ============================================================ */
.las-card--ring { top: 0;   left: 0;  width: 40%; z-index: 1; }
.las-card--line { top: 4%;  right: 0; width: 62%; z-index: 3; }
.las-card--bars { bottom: 0; left: 0; width: 56%; z-index: 2; }

/* ---- attendance: white card, sky accents (was an all-green chart) ---- */
.las-card--line .las-card__big i { color: #1B88C8; }
.las-card--line .las-line__trace { stroke: #1B88C8; }
.las-card--line .las-line__area  { fill: #1B88C8; }
.las-card--line .las-line__dot   { stroke: #1B88C8; }

/* ---- onboarding: pale violet, matching the page ----
   label #4B3B9C on #ECE8FB is 7.04:1; the navy number is 14.9:1 */
.las-card--bars { background: #ECE8FB; }
.las-card--bars .las-card__label,
.las-card--bars .las-bars__axis span { color: #4B3B9C; }
.las-card--bars .las-trend { background: rgba(75, 59, 156, 0.14); color: #4B3B9C; }
/* the bars run through the palette rather than one flat colour — the last one is
   the page's violet so the newest month reads as "now" */
.las-bars span:nth-child(1) { background: #A9D2F0; }
.las-bars span:nth-child(2) { background: #4FA9E8; }
.las-bars span:nth-child(3) { background: #8ACB55; }
.las-bars span:nth-child(4) { background: #1B88C8; }
.las-bars span:nth-child(5) { background: #9B8BE0; }
.las-bars span:nth-child(6) { background: var(--ge-violet-4, #614DBA); }

/* ⚠ THE TESTIMONIAL CAROUSEL MOVED OUT OF THIS FILE — 6 Aug 2026.
   Rebecca: "role out that testimonial design across site". This stylesheet only
   loads on the three school-type pages, so the .tcar block now lives in
   styles/home-v2.css, which loads on all 30. Nothing about the design changed;
   it changed address. Don't re-add it here. */