/* ============================================================
 * ONSITE — page-specific styles
 * Hero is a 4-tile collage. MIS is a hero section. No comparison.
 * Testimonial is rich. Final CTA uses sky-blue pill.
 * ============================================================ */

:root { scroll-padding-top: 100px; }

.section + .section { padding-top: var(--sp-10); }
@media (min-width: 768px) { .section + .section { padding-top: var(--sp-16); } }

/* ============================================================
 * HERO PANEL — grouped.org.uk style, OnSite (violet) palette.
 * Rounded violet board: copy left, photo bleeding right; three
 * mode cards overlap the board's bottom edge.
 * ============================================================ */
.hero-panel {
  padding: clamp(104px, 9vw, 120px) 0 clamp(14px, 1.6vw, 20px);
}
.hero-panel__board {
  position: relative;
  background: var(--ge-navy);
  border-radius: clamp(24px, 2.4vw, 36px);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  padding: clamp(28px, 4vw, 44px);
}
@media (min-width: 900px) {
  .hero-panel__board {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: stretch;
    gap: clamp(48px, 6vw, 104px);
    min-height: clamp(420px, 40vw, 500px);
    padding: clamp(40px, 3.4vw, 52px) clamp(20px, 2vw, 36px) clamp(24px, 2.5vw, 36px) clamp(44px, 4vw, 64px);
  }
}
.hero-panel__copy { max-width: 760px; }

/* Cut-out person, floating bottom-right with the watermark behind */
.hero-panel__art {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 300px;
}
.hero-panel__art img {
  position: relative;
  z-index: 1;
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 520px;
  object-fit: contain;
  filter: drop-shadow(0 14px 26px rgba(26, 18, 64, 0.18));
}
@media (min-width: 900px) {
  .hero-panel__art img { max-height: 880px; max-width: 128%; transform: translate(52px, 64px); }
}
/* Floating icon badges around the cut-out */
.hero-panel__badge {
  position: absolute;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md, 14px);
  background: var(--ge-white);
  color: #614DBA;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 28px rgba(26, 18, 64, 0.24);
  z-index: 2;
  animation: hero-badge-float 5s var(--ease-standard) infinite;
}
.hero-panel__badge svg { width: 24px; height: 24px; }
.hero-panel__badge--1 { top: 10%; left: 0%; animation-delay: 0s; }
.hero-panel__badge--2 { top: 42%; right: -2%; animation-delay: 1.1s; }
.hero-panel__badge--3 { bottom: 26%; left: 4%; animation-delay: 2.3s; }
@keyframes hero-badge-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}
@media (prefers-reduced-motion: reduce) { .hero-panel__badge { animation: none; } }

/* ---- Home hero: mobile stacking ---- */
@media (max-width: 899px) {
  .hero-panel { padding: clamp(96px, 22vw, 112px) 0 var(--sp-8); }
  .hero-panel__board {
    grid-template-columns: 1fr;
    padding: clamp(28px, 7vw, 40px);
    gap: var(--sp-5);
    min-height: 0;
  }
  .hero-panel__copy { max-width: none; }
  .hero-panel__art { min-height: 0; justify-content: center; }
  .hero-panel__art img { max-height: 340px; margin: var(--sp-2) auto 0; transform: none; }
  /* Floating badges stay on mobile too — slightly smaller, framing the
   * cut-out. (Were previously hidden below 900px.) */
  .hero-panel__badge { width: 46px; height: 46px; }
  .hero-panel__badge svg { width: 22px; height: 22px; }
  /* Raise the tick badge higher up the cut-out on mobile. */
  .hero-panel__badge--2 { top: 18%; }
  .hero-panel__stats { margin-top: var(--sp-5); padding-inline: 0; }
  .stat__icon svg { width: 38px; height: 38px; }
  .stat__icon { right: var(--sp-3); bottom: var(--sp-3); }
}
/* Blurred reception scene behind the cut-out, fading into the navy */
.hero-panel__board::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, rgba(15, 20, 56, 0.95) 0%, rgba(74, 57, 149, 0.86) 50%, rgba(123, 98, 217, 0.74) 100%),
    url('../assets/images/ui/hero-reception-bg.png') center / cover no-repeat;
  filter: blur(6px);
  transform: scale(1.08);
  z-index: 0;
  pointer-events: none;
}
/* Faint brand watermark behind the photo */
.hero-panel__board::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -10%;
  transform: translateY(-50%);
  height: 120%;
  aspect-ratio: 1 / 1;
  background: var(--ge-white);
  -webkit-mask: url('../assets/images/brand/grouped-symbol-white.svg') no-repeat center / contain;
  mask: url('../assets/images/brand/grouped-symbol-white.svg') no-repeat center / contain;
  opacity: 0.18;
  pointer-events: none;
  z-index: 0;
}
/* Stacked layout (< 900px): the watermark was centred vertically over the
 * WHOLE board, so the symbol bled up behind the headline. Re-anchor it to
 * the bottom so it sits only behind the image. Placed AFTER the base rule
 * so it wins on source order. */
@media (max-width: 899px) {
  .hero-panel__board::after {
    top: auto;
    bottom: clamp(28px, 7vw, 40px);
    right: 50%;
    transform: translateX(50%);
    height: 300px;
    opacity: 0.14;
  }
}

.hero-panel__copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-5);
  justify-content: center;
}
.hero-panel__copy .eyebrow--ghost {
  color: var(--ge-white);
  border-color: rgba(255, 255, 255, 0.35);
}
.hero-panel__copy h1 {
  font-size: clamp(38px, 4.4vw, 60px);
  font-weight: var(--fw-light);
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0;
  color: var(--ge-white);
  text-wrap: pretty;
}
.hero-panel__nb { white-space: nowrap; }
.hero-panel__copy h1 .hl {
  background: #E8E4F9;
  color: #614DBA;
  padding: 0.04em 16px 0.18em;
}
.hero-panel__lede {
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: var(--fw-light);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
  max-width: 46ch;
}
.hero-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}
/* White pill CTA on the violet board (navy arrow). Needs to beat
 * [data-theme="violet"] .btn--primary, so carry .hero-panel + .btn--primary. */
.hero-panel .hero-panel__cta.btn--primary {
  background: var(--ge-white);
  border-color: var(--ge-white);
  color: var(--ge-navy);
}
.hero-panel .hero-panel__cta.btn--primary .btn__arrow { background: var(--ge-navy); color: var(--ge-white); }
.hero-panel .hero-panel__cta.btn--primary:hover { background: #E8E4F9; border-color: #E8E4F9; color: var(--ge-navy); }
.hero-panel .hero-panel__cta.btn--primary:hover .btn__arrow { background: var(--ge-navy); color: var(--ge-white); }
.hero-panel__ghost {
  color: var(--ge-white);
  border-color: rgba(255, 255, 255, 0.35);
  background: transparent;
}
.hero-panel__ghost:hover { border-color: var(--ge-white); background: rgba(255, 255, 255, 0.10); }

/* Trust row */
.hero-panel__trust {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
  flex-wrap: wrap;
}
.hero-panel__trust-logos { display: inline-flex; }
.hero-panel__trust-badge {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--ge-white);
  border: 2px solid var(--ge-white);
  margin-left: -10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hero-panel__trust-badge:first-child { margin-left: 0; }
.hero-panel__trust-badge img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.hero-panel__trust-label { color: rgba(255, 255, 255, 0.85); font-size: 15px; font-weight: var(--fw-light); }
.hero-panel__trust-label strong { font-weight: var(--fw-regular); color: var(--ge-white); }

/* Photo bleeds to the board's right/top/bottom edges */
.hero-panel__photo {
  position: relative;
  z-index: 1;
  min-height: 320px;
  overflow: hidden;
  border-radius: 0;
}
.hero-panel__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 899px) {
  .hero-panel__photo { border-radius: clamp(16px, 4vw, 22px); min-height: 280px; }
}
@media (min-width: 900px) {
  /* Bleed the photo to the board's top/bottom edges (cancels board padding) */
  .hero-panel__photo {
    margin-top: calc(-1 * clamp(40px, 3.6vw, 60px));
    margin-bottom: calc(-1 * clamp(40px, 3.6vw, 60px));
  }
}

/* Three mode cards overlap the board's bottom edge */
.hero-panel__cards {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
}
@media (min-width: 760px) {
  .hero-panel__cards {
    grid-template-columns: repeat(3, 1fr);
    margin-top: clamp(-72px, -5vw, -44px);
    padding: 0 clamp(0px, 2vw, 32px);
  }
}
.hero-panel__card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6);
  border-radius: var(--radius-lg, 16px);
  border: 1px solid var(--ge-neutral-lt3);
  text-decoration: none;
  transition: transform var(--dur-base) var(--ease-standard);
}
.hero-panel__card:hover { transform: translateY(-3px); }
.hero-panel__card--1 { background: #F6F4FF; }
.hero-panel__card--2 { background: #E8E4F9; }
.hero-panel__card--3 { background: #EFEBFC; }
.hero-panel__card-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md, 10px);
  background: var(--ge-white);
  color: #614DBA;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hero-panel__card-icon svg { width: 22px; height: 22px; }
.hero-panel__card h3 {
  font-size: 19px;
  font-weight: var(--fw-regular);
  line-height: 1.2;
  margin: 0;
  color: var(--ge-navy);
}
.hero-panel__card p {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-light);
  line-height: 1.5;
  color: var(--ge-text-secondary);
  margin: 0;
  flex: 1 1 auto;
}
.hero-panel__card-link {
  font-size: 15px;
  font-weight: var(--fw-regular);
  color: #614DBA;
  display: inline-flex;
  gap: 6px;
}
.hero-panel__card:hover .hero-panel__card-link { gap: 10px; }

/* 5-stat grid lifted to overlap the board's bottom edge */
.hero-panel__stats { position: relative; z-index: 3; }
@media (min-width: 760px) {
  .hero-panel__stats {
    margin-top: var(--sp-6);
    padding-inline: 0;
    gap: var(--sp-3);
  }
}

/* ============================================================
 * 2. HERO — 2-tile (headline + photo)
 * Layout:
 *   ┌──────────────────┬──────────────────────────────┐
 *   │                  │                              │
 *   │  HEADLINE CARD   │     LARGE PHOTO CARD         │
 *   │   (with CTAs)    │     (subtle zoom on hover)   │
 *   │                  │                              │
 *   └──────────────────┴──────────────────────────────┘
 * ============================================================ */
.hero {
  padding: var(--sp-20) 0 var(--sp-8);
}
@media (min-width: 768px) {
  .hero { padding: var(--sp-24) 0 var(--sp-8); }
}

.hero__collage {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}
@media (min-width: 960px) {
  .hero__collage {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: stretch;
  }
}

/* TILE 1: Headline + CTAs — transparent on the white hero band, no card chrome */
.hero__headline {
  background: transparent;
  border-radius: 0;
  padding: 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-8);
  min-height: 420px;
}
@media (min-width: 960px) {
  .hero__headline { min-height: 520px; padding: var(--sp-4) 0; }
}

.hero__top { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-5); }

.hero h1 {
  font-size: clamp(34px, 5.5vw, 64px);
  font-weight: var(--fw-light);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--ge-navy);
  margin: 0;
}
.hero h1 .hl { margin: 0 -2px; }

.hero__lede {
  font-size: clamp(16px, 1.4vw, 18px);
  font-weight: var(--fw-light);
  line-height: 1.55;
  color: var(--fg2);
  margin: 0;
  max-width: 500px;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

/* TILE 2: Large photo with hover zoom */
.hero__photo {
  padding: 0;
  min-height: 420px;
  display: flex;
  background: transparent;
  border-radius: var(--radius-xl);
  overflow: hidden;
}
@media (min-width: 960px) {
  .hero__photo { min-height: 520px; }
}
.hero__photo-inner {
  position: relative;
  width: 100%;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--ge-bg-light);
}
.hero__photo-img {
  width: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
  position: absolute;
  /* Overhang ±8% so the parallax translate has room without exposing
   * the card's grey background underneath. The hero__photo-inner has
   * overflow:hidden so the overhang is clipped. */
  top: -8%;
  left: 0;
  right: 0;
  height: 116%;
  /* Smooth out small jitters between scroll frames. */
  transition: transform 90ms linear;
  will-change: transform;
}
/* Hover scale removed — the JS-driven parallax now owns the transform on
 * the hero image. Re-introducing a hover transform here would fight the
 * scroll-tracked translate. */
.hero__photo:hover .hero__photo-img { /* no-op */ }

/* ============================================================
 * HERO — FULL-WIDTH VARIANT (.hero--fullwidth)
 * Photo becomes the band's background; headline + CTAs overlay it
 * in the container. Adds a dark left-to-right gradient for legibility.
 * ============================================================ */
.hero--fullwidth {
  position: relative;
  padding: 0;
  min-height: 640px;
  background-color: var(--ge-navy);
  background-image: url("../assets/images/photos/onsite/onsite-hero-school.png");
  background-size: cover;
  background-position: center 35%;
  overflow: hidden;
}
@media (min-width: 768px) { .hero--fullwidth { min-height: 720px; } }
@media (min-width: 1200px) { .hero--fullwidth { min-height: 780px; } }

/* Dark gradient overlay — strongest on the left so headline reads clean,
 * fades to clear on the right so the photo remains visible. */
.hero--fullwidth::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(15, 20, 56, 0.78) 0%,
    rgba(15, 20, 56, 0.55) 40%,
    rgba(15, 20, 56, 0.18) 75%,
    rgba(15, 20, 56, 0.00) 100%
  );
  z-index: 1;
}

.hero--fullwidth .container {
  position: relative;
  z-index: 2;
  min-height: inherit;
  display: flex;
  align-items: center;
  padding-top: var(--sp-16);
  padding-bottom: var(--sp-16);
}

/* Hide the right photo tile; one canvas-wide photo now serves both jobs. */
.hero--fullwidth .hero__collage {
  display: block;
  width: 100%;
}
.hero--fullwidth .hero__photo,
.hero--fullwidth .hero__badge { display: none; }

.hero--fullwidth .hero__headline {
  background: transparent;
  border: 0;
  padding: 0;
  min-height: 0;
  max-width: 720px;
}

.hero--fullwidth .hero h1,
.hero--fullwidth .hero__lede { color: var(--ge-white); }

.hero--fullwidth .hero__lede { color: var(--white-85); max-width: 560px; }

/* Eyebrow flips to on-dark so the pill is visible on the photo */
.hero--fullwidth .hero__top .eyebrow--ghost {
  color: var(--ge-white);
  border-color: var(--white-35);
}

/* Sky highlight stays sky-blue (already legible on navy overlay) */
.hero--fullwidth .hero h1 .hl {
  background: var(--ge-sky);
  color: var(--ge-white);
}

/* "See how it works" ghost button needs on-dark treatment */
.hero--fullwidth .btn--ghost {
  color: var(--ge-white);
  border-color: var(--white-35);
}
.hero--fullwidth .btn--ghost:hover {
  border-color: var(--ge-white);
  background: var(--white-10);
}

/* ============================================================
 * HERO FLOATING BADGES — three identical light-sky chips, each
 * floating above one of the figures in the photo (the two boys
 * walking, the teacher, and the three students talking).
 * Each badge floats on its own loop so motion feels organic.
 * ============================================================ */
.hero__badge {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  /* Hard-coded literal blues — the page runs the violet theme which
     would otherwise repaint --ge-blue-3 / --ge-sky to violet. */
  background: #EBF9FF; /* pale icy blue tile */
  color: #2FB7F1;      /* sky-blue icon stroke */
  box-shadow:
    0 6px 16px rgba(15, 20, 56, 0.18),
    0 2px 4px rgba(15, 20, 56, 0.10);
  pointer-events: none;
  z-index: 2;
  will-change: transform;
  /* Translate -50% on X to center the badge on the supplied left/right anchor */
  --x-center: -50%;
}
.hero__badge svg { width: 55%; height: 55%; }

/* Position each badge HIGH above its group, centred horizontally on it. */

/* Badge 1 — above the two boys walking (subject ~x 20% of photo) */
.hero__badge--1 {
  bottom: 56%;
  left: 20%;
}

/* Badge 2 — above the teacher walking (subject ~x 46%) */
.hero__badge--2 {
  bottom: 62%;
  left: 46%;
}

/* Badge 3 — above the three students talking (subject ~x 75%) */
.hero__badge--3 {
  bottom: 58%;
  left: 75%;
}

@media (min-width: 960px) {
  .hero__badge { width: 48px; height: 48px; border-radius: 13px; }
}

/* Entrance scale-in + idle float + scroll-rise are all driven from JS
 * (scripts/hero-badges.js) since they need to combine on one transform. */

/* ============================================================
 * 3. PRODUCT STATS — inline number strip (no card chrome)
 * Numbers separated by hairline dividers, like Apple's product-page strips.
 * ============================================================ */
.stats { padding: var(--sp-8) 0 var(--sp-12); }
@media (min-width: 768px) { .stats { padding: var(--sp-10) 0 var(--sp-16); } }

.stats__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
@media (min-width: 768px) {
  .stats__grid { grid-template-columns: repeat(4, 1fr); }
}
.stat {
  background: transparent;
  border-radius: 0;
  padding: var(--sp-7) var(--sp-5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-2);
  position: relative;
  min-height: 132px;
}
/* Right divider, except last item in each row */
.stat::after {
  content: "";
  position: absolute;
  top: var(--sp-5);
  bottom: var(--sp-5);
  right: 0;
  width: 1px;
  background: var(--ge-neutral-lt3);
}
.stat:nth-child(2n)::after { display: none; }
@media (min-width: 768px) {
  .stat { padding: var(--sp-8) var(--sp-5); min-height: 168px; }
  .stat:nth-child(2n)::after { display: block; }
  .stat:nth-child(5n)::after { display: none; }
}
/* Bottom divider on top row only (mobile 2-col) */
.stat:nth-child(-n+2) { border-bottom: 1px solid var(--ge-neutral-lt3); }
@media (min-width: 768px) {
  .stat:nth-child(-n+2) { border-bottom: 0; }
}

/* Accreditations stat — replaces the number with two logo plates. */
.stat--accreditations { gap: var(--sp-3); }
.stat__certs {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
.stat__cert-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-standard);
  opacity: 0.85;
}
.stat__cert-logo:hover { opacity: 1; transform: translateY(-1px); }
.stat__cert-logo img {
  height: 40px;
  width: auto;
  max-width: 100%;
  display: block;
}
@media (min-width: 1200px) {
  .stat__cert-logo img { height: 48px; }
}
.stat--violet { background: transparent; color: var(--ge-navy); }
.stat__number {
  font-size: clamp(36px, 4vw, 52px);
  font-weight: var(--fw-light);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ge-navy);
  margin: 0;
  transition: color var(--dur-base) var(--ease-standard);
}
.stat--violet .stat__number { color: var(--ge-navy); }
.stat__number--word { font-size: clamp(30px, 3.4vw, 44px); }
/* Big link icon, bottom-right corner of the tile (no square) */
.stat__icon {
  position: absolute;
  right: var(--sp-4);
  bottom: var(--sp-4);
  color: #E8E4F9;
  pointer-events: none;
}
.stat__icon svg { width: 60px; height: 60px; }
/* Cymraeg logo rendered as a flat lilac silhouette (mask) */
.stat__icon--cymraeg {
  width: 64px;
  height: 64px;
  background: #E8E4F9;
  -webkit-mask: url('../assets/images/brand/cymraeg-logo.svg') no-repeat center / contain;
  mask: url('../assets/images/brand/cymraeg-logo.svg') no-repeat center / contain;
}
.stat__label {
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  color: var(--ge-text-secondary);
  line-height: 1.45;
  margin: 0;
  max-width: 22ch;
}
.stat--violet .stat__label { color: var(--ge-text-secondary); }

/* Stats as individual tiles — cycling navy / violet / lilac grounds. */
.stats__grid { gap: var(--sp-4); }
.stat { border-radius: var(--radius-lg, 16px); }
.stat::after { display: none !important; }
.stat:nth-child(-n+2) { border-bottom: 0 !important; }
.stat:nth-child(1) { background: #8572DA; }
.stat:nth-child(2) { background: #E8E4F9; }
.stat:nth-child(3) { background: #3B6EF0; }
.stat:nth-child(4) { background: #F6F4FF; }
.stat:nth-child(5) { background: #E8E4F9; }
/* Medium / deep violet tiles → light text */
.stat:nth-child(1) .stat__number,
.stat:nth-child(3) .stat__number,
.stat:nth-child(1) .stat__number--word,
.stat:nth-child(3) .stat__number--word { color: var(--ge-white); }
.stat:nth-child(1) .stat__label,
.stat:nth-child(3) .stat__label { color: rgba(255, 255, 255, 0.82); }
/* Light / faint violet tiles → dark text */
.stat:nth-child(2) .stat__number,
.stat:nth-child(4) .stat__number,
.stat:nth-child(5) .stat__number,
.stat:nth-child(2) .stat__number--word,
.stat:nth-child(4) .stat__number--word { color: #614DBA; }
.stat:nth-child(2) .stat__label,
.stat:nth-child(4) .stat__label,
.stat:nth-child(5) .stat__label { color: var(--ge-text-secondary); }

/* Bilingual stat — the word "Bilingual" sits inline with the Cymraeg
 * roundel so the relationship reads at a glance. */
.stat__bilingual-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 60px;
}
.stat__bilingual-row .stat__number--word { min-height: 0; }
.stat__cymraeg {
  width: auto;
  height: 28px;
  display: block;
  flex: 0 0 auto;
}
@media (min-width: 768px) {
  .stat__cymraeg { height: 32px; }
}

/* ============================================================
 * 4. MIS PARTNER SECTION — centred intro + full-bleed logo band
 * Logos become the main act: edge-to-edge, no tile chrome, massive.
 * ============================================================ */
.partners {
  background: var(--ge-bg-light);
  padding: var(--sp-16) 0 0;
}
@media (min-width: 768px) { .partners { padding: var(--sp-20) 0 0; } }

/* Centred intro — copy sits above the logo band */
.partners__intro {
  max-width: 720px;
  margin: 0 auto var(--sp-12);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
}
/* Override .eyebrow's default align-self: flex-start so it sits centred. */
.partners__intro .eyebrow { align-self: center; }
@media (min-width: 768px) { .partners__intro { margin-bottom: var(--sp-16); } }

.partners__intro h2 {
  font-size: clamp(32px, 4vw, 52px);
  font-weight: var(--fw-light);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ge-navy);
}
.partners__intro h2 .hl { margin: 0 -2px; }
.partners__intro p {
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  line-height: 1.55;
  color: var(--ge-text-secondary);
  margin: 0;
  max-width: 560px;
}

/* Full-bleed band — three logo cells, hairline-divided, no tile chrome.
 * Sits on the brand-light grey so the white intro band above it cuts hard. */
.partners__band {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}
@media (min-width: 720px) {
  .partners__band { grid-template-columns: repeat(4, 1fr); }
}

/* ── New two-column layout: copy left, MIS logos as a 2×2 tile grid right ── */
.partners--split { padding: var(--sp-16) 0; }
@media (min-width: 768px) { .partners--split { padding: var(--sp-20) 0; } }
.partners--split .partners__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8);
}
@media (min-width: 900px) {
  .partners--split .partners__layout {
    grid-template-columns: 1fr 1.05fr;
    gap: clamp(var(--sp-10), 6vw, var(--sp-16));
    align-items: center;
  }
}
/* Intro flips to left-aligned in the split */
.partners--split .partners__intro {
  max-width: none;
  margin: 0;
  text-align: left;
  align-items: flex-start;
}
.partners--split .partners__intro .eyebrow { align-self: flex-start; }
.partners--split .partners__band {
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}
/* Single auto-rotating logo tile (one cell, logos cross-fade) */
.partners--split .partners__band--carousel { grid-template-columns: 1fr; }
.partners__band--carousel .partners__logo-cell {
  position: relative;
  min-height: 240px;
  background: var(--ge-white);
  border: 1px solid var(--ge-neutral-lt3);
  border-radius: var(--radius-lg, 16px);
}
.partners__carousel {
  position: absolute;
  inset: 0;
}
.partners__carousel img {
  position: absolute;
  inset: 0;
  margin: auto;
  max-height: 88px;
  max-width: 66%;
  width: auto;
  object-fit: contain;
  opacity: 0;
  transition: opacity 600ms var(--ease-standard);
}
.partners__carousel img.is-active { opacity: 1; }
.partners__carousel .partners__logo--sims { max-height: 190px; max-width: 92%; }
@media (prefers-reduced-motion: reduce) {
  .partners__carousel img { transition: none; }
}
/* Greyscale "trusted by schools" strip — full-width row below the split */
.schools-strip { padding: clamp(var(--sp-10), 5vw, var(--sp-14, 56px)) 0; }
.partners__schools {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-5);
  text-align: center;
}
.partners__schools-label {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: var(--fw-regular);
  color: var(--ge-text-secondary);
}
.partners__schools-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(var(--sp-6), 4vw, var(--sp-10));
  flex-wrap: wrap;
}
.partners__schools-logos img {
  height: 56px;
  width: auto;
  filter: grayscale(1);
  opacity: 0.55;
  mix-blend-mode: multiply;
  transition: filter var(--dur-base) var(--ease-standard), opacity var(--dur-base) var(--ease-standard);
}
.partners__schools-logos img:hover { filter: grayscale(0); opacity: 1; }

.partners__logo-cell {
  display: flex;
  align-items: center;
  background: var(--ge-white);
  border: 1px solid var(--ge-neutral-lt3);
  border-radius: var(--radius-lg, 16px);
  justify-content: center;
  padding: var(--sp-6) var(--sp-4);
  min-height: 140px;
  position: relative;
  transition: background var(--dur-base) var(--ease-standard);
}
@media (min-width: 768px) {
  .partners__logo-cell { padding: var(--sp-8) var(--sp-5); min-height: 180px; }
}
@media (min-width: 1200px) {
  .partners__logo-cell { padding: var(--sp-10) var(--sp-6); min-height: 200px; }
}

/* Cells are rounded tiles (gap-separated), so no inter-cell dividers.
 * Hover keeps the logo scale only — no background tint. */

.partners__logo-cell img {
  max-height: 64px;
  max-width: 80%;
  width: auto;
  height: auto;
  transition: transform var(--dur-base) var(--ease-standard);
}
@media (min-width: 768px) {
  .partners__logo-cell img { max-height: 80px; }
}
@media (min-width: 1200px) {
  .partners__logo-cell img { max-height: 88px; }
}
.partners__logo-cell:hover img { transform: scale(1.06); }

/* GroupEd One — text-rendered wordmark used until a real logo file lands.
 * Sized to match the visual weight of the other partner logos. */
.partners__wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-sans);
  color: var(--ge-navy);
  transition: transform var(--dur-base) var(--ease-standard);
}
.partners__wordmark-symbol {
  /* The symbol participates in the overall logo, so it sits with the text */
  height: 40px !important;
  max-height: 40px;
  width: auto;
}
@media (min-width: 768px) {
  .partners__wordmark-symbol { height: 52px !important; max-height: 52px; }
}
.partners__wordmark-text {
  font-size: 22px;
  font-weight: var(--fw-regular);
  letter-spacing: -0.01em;
  line-height: 1;
}
@media (min-width: 768px) {
  .partners__wordmark-text { font-size: 28px; }
}
.partners__wordmark-text-one { font-weight: var(--fw-light); color: var(--ge-sky); }
.partners__logo-cell:hover .partners__wordmark { transform: scale(1.06); }

/* ============================================================
 * PROOF BAND — full-bleed school photo, between testimonial & features
 * Acts as a "scene change" so the navy run doesn't fatigue the eye.
 * ============================================================ */
.proof-band {
  position: relative;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--ge-navy);
  color: var(--ge-white);
}
@media (min-width: 768px) { .proof-band { min-height: 0; } }
@media (min-width: 1200px) { .proof-band { min-height: 0; } }

.proof-band__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  display: block;
  z-index: 0;
  filter: blur(12px);
  /* No CSS transform — the parallax script writes transform:translate3d() + the
   * static scale (data-parallax-static="scale(1.10)") so the blurred edges
   * never expose the band's navy fallback during translation. */
  will-change: transform;
}
/* Dark gradient overlay — pulls the photo darker at the bottom-left where
 * the copy sits, leaving the right side cleaner so the photo still reads. */
.proof-band__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      105deg,
      rgba(15, 20, 56, 0.72) 0%,
      rgba(15, 20, 56, 0.55) 45%,
      rgba(15, 20, 56, 0.30) 100%
    );
  pointer-events: none;
}
.proof-band__inner {
  position: relative;
  z-index: 2;
  /* Vertical padding only — keep the .container horizontal gutters so the
   * eyebrow/headline never run flush to the viewport edge on mobile. */
  padding-block: var(--sp-10);
  max-width: 1280px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-5);
}
@media (min-width: 768px) {
  .proof-band__inner { padding-block: var(--sp-12); gap: var(--sp-6); }
}

.proof-band__eyebrow {
  background: transparent;
  color: var(--ge-white);
  border: 1px solid rgba(255, 255, 255, 0.45);
}

.proof-band__headline {
  font-size: clamp(40px, 7vw, 96px);
  font-weight: var(--fw-light);
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: var(--ge-white);
  margin: 0;
  max-width: 16ch;
  text-wrap: balance;
}
.proof-band__num {
  color: var(--ge-white);
  font-weight: var(--fw-regular);
  letter-spacing: -0.04em;
}

.proof-band__sub {
  font-size: clamp(15px, 1.4vw, 18px);
  font-weight: var(--fw-light);
  line-height: 1.55;
  color: var(--white-85);
  margin: 0;
  max-width: 44ch;
}

/* Phone mockup video floating on the cleaner right side of the band.
 * The video is a transparent VP8 webm so it composites over the photo. */
.proof-band__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-5);
}
@media (min-width: 768px) { .proof-band__copy { gap: var(--sp-6); } }
.proof-band__media {
  display: none;
  flex-shrink: 0;
  align-self: stretch;
  position: relative;
}
.proof-band__media video {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 26px 60px rgba(8, 11, 35, 0.5));
}
@media (min-width: 880px) {
  .proof-band__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: clamp(24px, 4vw, 56px);
    padding-block: clamp(48px, 5vw, 80px);
  }
  .proof-band__copy { flex: 1 1 auto; }
  .proof-band__media {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 auto;
    width: auto;
    align-self: stretch;
  }
  .proof-band__media video {
    width: auto;
    max-width: clamp(360px, 42vw, 620px);
    max-height: clamp(440px, 60vw, 760px);
  }
}
.features {
  background: var(--ge-bg-light);
  padding: var(--sp-16) 0;
  color: var(--ge-navy);
}
@media (min-width: 768px) { .features { padding: var(--sp-20) 0; } }
@media (min-width: 768px) { .features { padding: var(--sp-20) 0; } }

.features__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-bottom: var(--sp-10);
  max-width: 720px;
}
.features__head h2 {
  font-size: clamp(32px, 4vw, 52px);
  font-weight: var(--fw-light);
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ge-navy);
}
.features__head h2 .hl {
  background: #E8E4F9;
  color: #614DBA;
  padding: 0 14px;
}
.features__head p {
  font-size: var(--fs-h4);
  font-weight: var(--fw-light);
  color: var(--ge-text-secondary);
  margin: 0;
}
/* Eyebrow returns to the default ghost (dark) on the light band */
.features .eyebrow--ghost {
  color: var(--ge-navy);
  border-color: var(--ge-neutral-lt3);
}

.features__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
}
@media (min-width: 640px) {
  .features__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .features__grid { grid-template-columns: repeat(3, 1fr); }
}
/* Light card on the soft band */
.feature {
  background: var(--ge-white);
  border: 1px solid var(--ge-neutral-lt3);
  color: var(--ge-navy);
  border-radius: var(--radius-lg);
  padding: var(--sp-7);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  transition: transform var(--dur-base) var(--ease-standard),
              background var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard);
}
@media (min-width: 768px) { .feature { padding: var(--sp-8); } }
.feature:hover {
  border-color: var(--ge-neutral-dk4, #C1CCDB);
  transform: translateY(-2px);
  box-shadow: none;
}
/* Accent card — lilac ground */
.feature--violet { background: #E8E4F9; border-color: #DCD6F4; }
.feature--violet:hover { background: #E8E4F9; }

.feature__icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: #E8E4F9;
  color: #614DBA;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard);
}
.feature:hover .feature__icon {
  background: #614DBA;
  color: var(--ge-white);
}
.feature--violet .feature__icon { background: var(--ge-white); color: #614DBA; }
.feature--violet:hover .feature__icon { background: #614DBA; color: var(--ge-white); }
.feature__icon svg { width: 24px; height: 24px; }

.feature h3 {
  font-size: 20px;
  font-weight: var(--fw-regular);
  line-height: 1.25;
  margin: 0;
  color: var(--ge-navy);
}
.feature--violet h3 { color: var(--ge-navy); }
.feature p {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-light);
  line-height: 1.55;
  color: var(--ge-text-secondary);
  margin: 0;
}
.feature--violet p { color: var(--ge-text-secondary); }

/* ============================================================
 * 6. THREE MODES — horizontal scroll-snap carousel on WHITE band
 * Apple-style: tall portrait cards, peek of the next, hairline
 * progress bar + circular nav buttons bottom-right.
 * ============================================================ */
.modes {
  background: var(--ge-white);
  padding: var(--sp-16) 0;
}
@media (min-width: 768px) { .modes { padding: var(--sp-20) 0; } }

.modes__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-8);
  max-width: 720px;
}
.modes__head h2 {
  font-size: clamp(32px, 4vw, 52px);
  font-weight: var(--fw-light);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ge-navy);
}
.modes__head h2 .hl { margin: 0 -2px; }
.modes__head p {
  font-size: var(--fs-h4);
  font-weight: var(--fw-light);
  color: var(--ge-text-secondary);
  margin: 0;
  max-width: 640px;
}

/* Carousel viewport — contained within the same gutter as .container so
 * slides start AND end aligned with the rest of the page (no full-bleed
 * peek past the right edge). */
.modes__viewport {
  overflow: hidden;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--sp-5);
}
@media (min-width: 768px) {
  .modes__viewport { padding: 0 var(--sp-8); }
}
.modes__track {
  display: flex;
  gap: var(--sp-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  padding: 0 0 var(--sp-3);
  /* A bit of right-padding so the last slide can snap to the start without
   * being clipped by the viewport's right gutter. */
  scroll-padding-left: 0;
}
.modes__track::-webkit-scrollbar { display: none; }
@media (min-width: 768px) {
  .modes__track {
    gap: var(--sp-5);
  }
}

/* Tall portrait card. Width clamps so a few slides fit and the next slide
 * hints in past the right edge of the contained viewport. */
/* ============================================================
 * MODES GRID — 2×2 stacked tiles (replaces the carousel).
 * Slides stack into a responsive grid; on mobile they collapse
 * to a single column.
 * ============================================================ */
.modes__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}
@media (min-width: 768px) {
  .modes__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-5);
  }
}

/* Inside the grid, slides no longer scroll-snap horizontally —
 * they fill their grid cell and size to content. */
.modes__grid .modes__slide {
  flex: initial;
  scroll-snap-align: unset;
  scroll-snap-stop: unset;
  width: auto;
  min-height: 0;
}
/* Mockup-style media (transparent phone screens) — modest height */
.modes__grid .modes__media {
  min-height: 220px;
  flex: 1 1 auto;
}
.modes__grid .modes__media img,
.modes__grid .modes__media video {
  max-height: 320px;
}
@media (min-width: 768px) {
  .modes__grid .modes__media { min-height: 260px; }
  .modes__grid .modes__media img,
  .modes__grid .modes__media video { max-height: 380px; }
}
/* Photo variants — show the full image, not letterboxed.
 * Aspect-ratio keeps the photo's proportions intact at any tile width. */
.modes__grid .modes__media--photo {
  height: auto;
  aspect-ratio: 4 / 3;
  min-height: 0;
}
.modes__grid .modes__media--photo img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
}

.modes__slide {
  flex: 0 0 clamp(280px, 78vw, 560px);
  scroll-snap-align: start;
  scroll-snap-stop: always;
  background: var(--ge-bg-light);
  border-radius: var(--radius-xl);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-height: 440px;
  position: relative;
  transition: background var(--dur-base) var(--ease-standard);
}
@media (min-width: 768px) {
  .modes__slide { padding: var(--sp-7); min-height: 500px; }
}

.modes__slide-copy { display: flex; flex-direction: column; gap: var(--sp-4); }

.modes__slide-tag {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: var(--fw-regular);
  line-height: 1.5;
}
.modes__slide--reception .modes__slide-tag  { background: var(--ge-green-2); color: var(--ge-green-4); }
.modes__slide--staff .modes__slide-tag      { background: var(--ge-blue-3);  color: var(--ge-blue); }
.modes__slide--evacuation .modes__slide-tag { background: var(--ge-red-2);   color: var(--ge-red-4); }
.modes__slide--lockdown .modes__slide-tag   { background: var(--ge-orange-1); color: var(--ge-orange-safety); }

.modes__slide-heading {
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: var(--fw-light);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--ge-navy);
  text-wrap: pretty;
}

.modes__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.modes__list li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: var(--sp-3);
  align-items: start;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-light);
  line-height: 1.45;
  color: var(--ge-navy);
}
.modes__check {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 20px;
  margin-top: 2px;
}
.modes__slide--reception .modes__check  { background: var(--ge-green-4); color: #fff; }
.modes__slide--staff .modes__check      { background: var(--ge-sky);     color: #fff; }
.modes__slide--evacuation .modes__check { background: var(--ge-red-4);   color: #fff; }
.modes__slide--lockdown .modes__check   { background: var(--ge-orange-safety); color: #fff; }
.modes__check svg { width: 11px; height: 11px; }

/* Media area at the bottom — phone-mockup video slot. Grows to fill. */
.modes__media {
  flex: 1;
  margin-top: auto;
  border-radius: var(--radius-lg);
  background: var(--ge-white);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  position: relative;
}
.modes__media img,
.modes__media video {
  width: auto;
  height: 100%;
  max-height: 240px;
  object-fit: contain;
  display: block;
  transition: transform 500ms var(--ease-standard),
              filter 500ms var(--ease-standard);
}
@media (min-width: 768px) {
  .modes__media { min-height: 220px; }
  .modes__media img, .modes__media video { max-height: 280px; }
}

/* Photo variant — full-bleed image (with its own composed background)
 * fills the media cell. No bottom mask needed since the image already
 * has its own fade/vignette baked in. */
.modes__media--photo {
  background: var(--ge-white);
  overflow: hidden;
  align-items: stretch;
  justify-content: stretch;
  position: relative;
}
.modes__media--photo img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: center;
  filter: none;
  -webkit-mask-image: none;
          mask-image: none;
}
.modes__slide:hover .modes__media--photo img,
.modes__slide:focus-within .modes__media--photo img {
  transform: scale(1.03);
  filter: none;
}
.modes__media--ipad {
  background: transparent;
  overflow: visible;
}
.modes__media--ipad img {
  width: 100%;
  height: auto;
  max-height: none;
  filter: drop-shadow(0 18px 40px rgba(15, 20, 56, 0.18))
          drop-shadow(0 6px 12px rgba(15, 20, 56, 0.10));
}
.modes__slide:hover .modes__media--ipad img,
.modes__slide:focus-within .modes__media--ipad img {
  transform: scale(1.04);
  filter: drop-shadow(0 28px 56px rgba(15, 20, 56, 0.24))
          drop-shadow(0 10px 18px rgba(15, 20, 56, 0.14));
}

/* Placeholder variant — neutral grey card with icon + label.
 * Used until a real image asset is supplied. */
.modes__media--placeholder {
  background: repeating-linear-gradient(
    135deg,
    #EEF1F6 0 14px,
    #E4E8EF 14px 28px
  );
  align-items: center;
  justify-content: center;
}
.modes__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  color: var(--ge-text-secondary);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-light);
  letter-spacing: 0.02em;
}
.modes__placeholder svg { width: 36px; height: 36px; opacity: 0.7; }

/* ─── Deadline callout (Lockdown slide) ─────────────────────
 * Small floating card pinned to the bottom-left of the photo,
 * announcing the Martyn's Law compliance deadline.
 * ─────────────────────────────────────────────────────────── */
.modes__deadline {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
  width: clamp(168px, 18vw, 200px);
  aspect-ratio: 1 / 1;
  padding: var(--sp-5);
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 20px;
  box-shadow:
    0 8px 22px rgba(15, 20, 56, 0.18),
    0 2px 6px rgba(15, 20, 56, 0.10);
  transform-origin: center center;
  z-index: 2;
  animation: modes-deadline-pulse 5s var(--ease-standard) infinite;
}
@keyframes modes-deadline-pulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    box-shadow:
      0 8px 22px rgba(15, 20, 56, 0.18),
      0 2px 6px rgba(15, 20, 56, 0.10),
      0 0 0 0 rgba(255, 121, 0, 0.35);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.035);
    box-shadow:
      0 14px 32px rgba(15, 20, 56, 0.22),
      0 4px 10px rgba(15, 20, 56, 0.12),
      0 0 0 8px rgba(255, 121, 0, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .modes__deadline { animation: none; }
}
.modes__deadline-icon {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--ge-orange-1);
  color: var(--ge-orange-safety);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.modes__deadline-icon svg { width: 16px; height: 16px; }
.modes__deadline-copy { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.modes__deadline-label {
  margin: 0;
  font-size: 12px;
  font-weight: var(--fw-regular);
  color: var(--ge-navy);
  line-height: 1.2;
  letter-spacing: -0.005em;
}
.modes__deadline-date {
  margin: 0;
  font-size: 11px;
  font-weight: var(--fw-light);
  color: var(--ge-orange-safety);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
}

/* Carousel controls — progress bar + arrow buttons bottom-right */
.modes__controls {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  margin-top: var(--sp-6);
}
.modes__progress {
  flex: 1;
  height: 2px;
  background: var(--ge-neutral-lt3);
  border-radius: 1px;
  position: relative;
  overflow: hidden;
}
.modes__progress-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 33.333%;
  background: var(--ge-navy);
  border-radius: 1px;
  transition: transform var(--dur-base) var(--ease-standard),
              width var(--dur-base) var(--ease-standard);
}
.modes__nav { display: flex; gap: var(--sp-2); }
.modes__nav-btn {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--ge-bg-light);
  border: 1px solid var(--ge-neutral-lt3);
  color: var(--ge-navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard);
}
.modes__nav-btn:hover {
  background: var(--ge-navy);
  border-color: var(--ge-navy);
  color: var(--ge-white);
}
.modes__nav-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  background: var(--ge-bg-light);
  border-color: var(--ge-neutral-lt3);
  color: var(--ge-navy);
}
.modes__nav-btn svg { width: 16px; height: 16px; }
.modes__nav-btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* ============================================================
 * 7. PRICE BLOCK — full-bleed VIOLET band, no card chrome
 * ============================================================ */
.price {
  background: #4A3995;
  color: var(--ge-white);
  padding: var(--sp-16) 0;
  position: relative;
  overflow: hidden;
  text-align: center;
}
@media (min-width: 768px) { .price { padding: var(--sp-20) 0; } }

/* White card tile sitting on the violet band. */
.price__card {
  background: var(--ge-white);
  border-radius: var(--radius-xl, 28px);
  padding: clamp(40px, 5vw, 72px) clamp(24px, 4vw, 56px);
  max-width: 960px;
  margin-inline: auto;
  text-align: center;
  position: relative;
  overflow: visible;
}
@media (min-width: 768px) { .price__card { padding: clamp(56px, 5vw, 80px) clamp(40px, 5vw, 72px); } }
.price__eyebrow {
  display: inline-flex;
  padding: 3px 10px;
  background: transparent;
  color: var(--ge-navy);
  border: 1px solid var(--ge-neutral-lt3);
  border-radius: var(--radius-pill);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: var(--fw-regular);
  margin-bottom: var(--sp-5);
  line-height: 1.5;
}
.price__amount {
  font-size: clamp(80px, 13vw, 160px);
  font-weight: var(--fw-light);
  letter-spacing: -0.04em;
  color: var(--ge-navy);
  line-height: 1;
  margin: var(--sp-4) 0 var(--sp-2);
  /* Initial scale matches the parallax-script's starting point so there's no
   * pop-in before the first scroll event fires. */
  transform: scale(0.85);
  transform-origin: center bottom;
  transition: transform 90ms linear;
  will-change: transform;
}
.price__amount sup {
  font-size: 0.22em;
  font-weight: var(--fw-light);
  color: var(--ge-text-secondary);
  margin-left: 8px;
  vertical-align: super;
  top: -1.2em;
  position: relative;
}
/* Two pricing tiers side by side — each its own bordered card. */
.price__tiers {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
  margin: var(--sp-8) 0 var(--sp-6);
}
@media (min-width: 620px) {
  .price__tiers { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
}
.price__tier {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-7) var(--sp-5);
  background: var(--ge-violet-2, #E8E4F9);
  border: 1px solid var(--ge-violet-3, #CFC6F0);
  border-radius: var(--radius-lg, 18px);
  text-align: center;
}
/* Secondary tier — pale blue, violet outline to match the primary */
.price__tier:nth-child(2) {
  background: #E4EDFC;
  border-color: var(--ge-violet-3, #CFC6F0);
}
.price__tier-label {
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: var(--fw-regular);
  color: var(--ge-navy);
}
/* Two prices share the band, so each is scaled down from the single-price size. */
.price__tier .price__amount {
  font-size: clamp(56px, 8vw, 92px);
  margin: 0;
  color: #4A3995;
}
.price__tagline {
  font-size: clamp(22px, 2.5vw, 32px);
  font-weight: var(--fw-light);
  color: var(--ge-navy);
  margin: 0 0 var(--sp-5);
  letter-spacing: -0.015em;
}
.price__disclaimer {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-light);
  color: var(--ge-text-secondary);
  max-width: 480px;
  margin: 0 auto;
  line-height: 1.5;
}
/* Demo CTA inside the white price card — violet to match the band. */
.price__cta {
  margin-top: var(--sp-8);
  background: #4A3995;
  border-color: #4A3995;
  color: var(--ge-white);
}
.price__cta .btn__arrow { background: var(--ge-white); color: #4A3995; }
.price__cta:hover { background: var(--ge-violet-4, #614DBA); border-color: var(--ge-violet-4, #614DBA); }
.price__cta:hover .btn__arrow { background: var(--ge-white); color: var(--ge-violet-4, #614DBA); }
/* Large white GroupEd symbol watermark filling the violet band.
 * Mask guarantees a true-white fill regardless of the SVG's own colour. */
.price::before {
  content: "";
  position: absolute;
  top: 46%;
  right: -8%;
  transform: translateY(-50%) rotate(-8deg);
  height: 115%;
  aspect-ratio: 1 / 1;
  background: var(--ge-white);
  -webkit-mask: url('../assets/images/brand/grouped-symbol-white.svg') no-repeat center / contain;
  mask: url('../assets/images/brand/grouped-symbol-white.svg') no-repeat center / contain;
  opacity: 0.10;
  pointer-events: none;
  z-index: 0;
  animation: price-drift 34s ease-in-out infinite;
}
@keyframes price-drift {
  0%   { transform: translate(0, -50%) rotate(-8deg); }
  50%  { transform: translate(-5%, -54%) rotate(-2deg); }
  100% { transform: translate(0, -50%) rotate(-8deg); }
}
@media (prefers-reduced-motion: reduce) { .price::before { animation: none; } }
.price::after { display: none; }
.price__card::before,
.price__card::after { display: none; }
.price__card > * { position: relative; z-index: 1; }

/* ============================================================
 * PRICE AURORA — slow-flowing sky/blue gradient behind the £379.
 * Pure CSS: three radial blobs drift across the band on a 24s loop.
 * ============================================================ */
.price__aurora {
  position: absolute;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  opacity: 1;
  background:
    radial-gradient(circle at 22% 30%, rgba(47, 183, 241, 0.70), transparent 38%),
    radial-gradient(circle at 78% 70%, rgba(27, 54, 126, 0.85), transparent 42%),
    radial-gradient(circle at 50% 45%, rgba(75, 103, 177, 0.55), transparent 45%),
    radial-gradient(circle at 90% 20%, rgba(47, 183, 241, 0.45), transparent 35%);
  filter: blur(70px);
  animation: aurora-drift 14s ease-in-out infinite;
  will-change: transform;
}
.price .container { position: relative; z-index: 1; }

/* Big, slow drift — small percentages on a blurred layer barely register, so
 * the keyframes do meaningful translates and scale changes. */
@keyframes aurora-drift {
  0%, 100% { transform: translate3d(0%, 0%, 0) scale(1); }
  25%      { transform: translate3d(12%, -8%, 0) scale(1.18); }
  50%      { transform: translate3d(-10%, 10%, 0) scale(1.10); }
  75%      { transform: translate3d(8%, 6%, 0) scale(1.22); }
}
@media (prefers-reduced-motion: reduce) {
  .price__aurora { animation: none; }
}

/* ============================================================
 * GUARANTEE-BANNER AURORA — subtler version of the same idea,
 * scoped to the contract banner so it feels alive too.
 * ============================================================ */

/* ============================================================
 * 8. TESTIMONIAL — editorial pull-quote on full-bleed NAVY band
 *
 * Magazine-style: big sky-blue quote glyph, oversized light quote,
 * confident byline strip with school + stats divided by a hairline.
 * ============================================================ */
/* ============================================================
 * TESTIMONIAL — carousel of light quote cards on a soft band.
 * One quote shown at a time; arrows + dots below.
 * ============================================================ */
.testimonial {
  background: var(--ge-white);
  padding: var(--sp-16) 0;
  position: relative;
  overflow: hidden;
}
@media (min-width: 768px) { .testimonial { padding: var(--sp-20) 0; } }
.testimonial > .container { position: relative; z-index: 1; }

/* Centered head above the carousel. */
.testimonial__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1;
  margin-bottom: var(--sp-8);
}
@media (min-width: 768px) { .testimonial__head { margin-bottom: var(--sp-10); } }
.testimonial__title {
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: var(--fw-light);
  line-height: 1.18;
  letter-spacing: -0.025em;
  color: var(--ge-navy);
  margin: var(--sp-5) 0 0;
  text-wrap: balance;
}
/* Lilac pill on "OnSite" — generous padding so letters never touch edges */
.testimonial__title .hl {
  background: var(--ge-violet-2, #E8E4F9);
  color: #4A3995;
  padding: 0.06em 16px 0.2em;
}
.testimonial__eyebrow {
  display: inline-flex;
  align-self: center;
  color: var(--ge-navy);
  border-color: var(--ge-neutral-lt3);
}

/* ---- Carousel ---- */
.testimonial__carousel { position: relative; z-index: 1; }
.testimonial__track {
  display: flex;
  align-items: stretch;
  gap: var(--sp-6);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 4px;
  margin: -4px;
}
.testimonial__track::-webkit-scrollbar { display: none; }
.testimonial__track:focus-visible {
  outline: 2px solid var(--ge-sky);
  outline-offset: 4px;
  border-radius: var(--radius-xl);
}
.testimonial__slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  min-width: 0;
}

/* Controls — dots left, arrows right. */
.testimonial__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  margin-top: var(--sp-7);
}
.testimonial__dots { display: flex; align-items: center; gap: var(--sp-3); }
.testimonial__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill, 999px);
  background: var(--ge-neutral-lt3);
  cursor: pointer;
  transition: width 200ms var(--ease-standard), background 200ms var(--ease-standard);
}
.testimonial__dot.is-active { width: 28px; background: var(--ge-sky); }
.testimonial__arrows { display: flex; align-items: center; gap: var(--sp-3); }
.testimonial__arrow {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill, 999px);
  border: 1px solid var(--ge-neutral-lt3);
  background: var(--ge-white);
  color: var(--ge-navy);
  cursor: pointer;
  transition: background 180ms var(--ease-standard), border-color 180ms var(--ease-standard), opacity 180ms var(--ease-standard);
}
.testimonial__arrow svg { width: 22px; height: 22px; }
.testimonial__arrow:hover { background: var(--ge-white); border-color: var(--ge-text-secondary); }
.testimonial__arrow:disabled { opacity: 0.35; cursor: default; }

/* ---- Quote cards (carousel slides) ---- */
.testimonial__card {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  /* NB: --sp-9 doesn't exist in the scale — using it made the whole
   * shorthand invalid and collapsed the card padding to 0 on mobile
   * (below the 768px override), so the quote ran flush to the edges. */
  padding: var(--sp-8) var(--sp-6);
  border: 1px solid var(--ge-neutral-lt3);
  border-radius: var(--radius-xl, 24px);
  overflow: hidden;
  text-align: left;
}
@media (min-width: 768px) { .testimonial__card { padding: var(--sp-12) var(--sp-12); } }
.testimonial__track .testimonial__card {
  background: #4A3995;
  border-color: #4A3995;
}
/* Card 1 — violet, white writing */
.testimonial__card .testimonial__quote { color: var(--ge-white); }
.testimonial__card .testimonial__hl { background: transparent; color: var(--ge-white) !important; }
.testimonial__card .testimonial__byline,
.testimonial__card .testimonial__byline-stats { border-color: rgba(255, 255, 255, 0.22); }
.testimonial__card .testimonial__byline-name { color: var(--ge-white); }
.testimonial__card .testimonial__byline-role { color: rgba(255, 255, 255, 0.78); }
.testimonial__card .testimonial__byline-stat-num,
.testimonial__card .testimonial__byline-stat-num span,
.testimonial__card .testimonial__byline-stat-num .hl-sky { color: var(--ge-white); }
.testimonial__card .testimonial__byline-stat-label { color: rgba(255, 255, 255, 0.72); }
/* Speech icon — shown only on the violet card */
.testimonial__icon { display: none; }
.testimonial__card .testimonial__icon {
  display: block;
  color: var(--ge-white);
  margin-bottom: var(--sp-4);
}
.testimonial__icon svg { width: 44px; height: 44px; }
/* Each slide a different primary brand colour */
.testimonial__track .testimonial__card:nth-child(2) {
  background: #1B88C8;
  border-color: #1B88C8;
}


.testimonial__quote {
  font-size: clamp(21px, 2.3vw, 30px);
  font-weight: var(--fw-light);
  line-height: 1.4;
  letter-spacing: -0.015em;
  color: var(--ge-navy);
  margin: 0 0 var(--sp-7);
  flex: 1 1 auto;
  text-wrap: pretty;
}
.testimonial__hl { color: var(--ge-blue); font-weight: var(--fw-regular); }

/* Byline strip — school identity left, stats right, hairline above. */
.testimonial__byline {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  margin-top: auto;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--ge-neutral-lt3);
}
@media (min-width: 600px) {
  .testimonial__byline {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-8);
    padding-top: var(--sp-6);
  }
}
.testimonial__byline-school {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  flex: 1 1 auto;
  min-width: 0;
}
.testimonial__byline-logo {
  width: 80px;
  height: 80px;
  flex: 0 0 80px;
  background: var(--ge-white);
  border: 1px solid var(--ge-neutral-lt3);
  border-radius: var(--radius-md);
  padding: 8px;
  object-fit: contain;
  display: block;
}
@media (min-width: 768px) {
  .testimonial__byline-logo { width: 96px; height: 96px; flex-basis: 96px; }
}
.testimonial__byline-id { display: flex; flex-direction: column; gap: 4px; }
.testimonial__byline-name {
  font-size: var(--fs-h4);
  font-weight: var(--fw-regular);
  color: var(--ge-navy);
  margin: 0;
  letter-spacing: -0.005em;
}
.testimonial__byline-role {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-light);
  color: var(--ge-text-secondary);
  margin: 0;
}
.testimonial__byline-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
  border-top: 1px solid var(--ge-neutral-lt3);
  padding-top: var(--sp-5);
  flex: 0 0 auto;
}
@media (min-width: 600px) {
  .testimonial__byline-stats {
    border-top: 0;
    padding-top: 0;
    border-left: 1px solid var(--ge-neutral-lt3);
    padding-left: var(--sp-8);
    gap: var(--sp-7);
  }
}
.testimonial__byline-stat { display: flex; flex-direction: column; gap: 4px; }
.testimonial__byline-stat-num {
  font-size: clamp(32px, 3.6vw, 44px);
  font-weight: var(--fw-light);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--ge-violet-4, #614DBA);
  margin: 0;
}
.testimonial__byline-stat-num span { color: var(--ge-violet-4, #614DBA); }
.testimonial__byline-stat-num .hl-sky {
  color: var(--ge-sky);
  font-weight: var(--fw-regular);
  margin-right: 0.05em;
}
.testimonial__byline-stat-label {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-light);
  color: var(--ge-text-secondary);
  margin: 0;
  line-height: 1.45;
  max-width: 18ch;
}

/* Contract guarantee banner — merged into the navy price band.
 * Sky-tinted glass with a soft outer glow so it reads as a key
 * reassurance, not background chrome. */
.price__guarantee {
  margin: var(--sp-12) auto 0;
  max-width: 760px;
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: left;
  gap: var(--sp-6);
  padding: var(--sp-7);
  /* Aurora layer (::before) drifts UNDER the static gradient base.
   * Base gradient gives the consistent sky tint; aurora adds motion. */
  background: linear-gradient(
    135deg,
    rgba(47, 183, 241, 0.14) 0%,
    rgba(47, 183, 241, 0.06) 100%
  );
  border: 1px solid rgba(47, 183, 241, 0.40);
  border-radius: var(--radius-xl);
  position: relative;
  z-index: 1;
  overflow: hidden;
  box-shadow:
    0 12px 40px rgba(47, 183, 241, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.price__guarantee::before {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 15% 50%, rgba(47, 183, 241, 0.55), transparent 42%),
    radial-gradient(circle at 85% 50%, rgba(27, 54, 126, 0.55), transparent 42%),
    radial-gradient(circle at 50% 100%, rgba(75, 103, 177, 0.40), transparent 50%);
  filter: blur(40px);
  opacity: 0.7;
  animation: guarantee-aurora 14s ease-in-out infinite;
  will-change: transform;
}
.price__guarantee > * { position: relative; z-index: 1; }
@keyframes guarantee-aurora {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(8%, -4%, 0) scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .price__guarantee::before { animation: none; }
}
@media (max-width: 600px) {
  .price__guarantee {
    flex-direction: column;
    text-align: center;
    gap: var(--sp-4);
    padding: var(--sp-7) var(--sp-6);
  }
}
.price__guarantee-icon {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--ge-sky);
  color: var(--ge-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(47, 183, 241, 0.45);
}
.price__guarantee-icon svg { width: 26px; height: 26px; }
.price__guarantee-copy { min-width: 0; flex: 1; text-align: center; }
.price__guarantee-title {
  font-size: clamp(20px, 1.8vw, 24px);
  font-weight: var(--fw-regular);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
  color: var(--ge-white);
}
.price__guarantee-desc {
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  line-height: 1.5;
  color: var(--white-85);
  margin: 0;
  text-wrap: balance;
}
.price__guarantee-desc strong {
  color: var(--ge-sky);
  font-weight: var(--fw-regular);
}

/* ============================================================
 * TRUST STRIP — accreditation logos.
 * Default: white band between price & CTA.
 * Modifier `.trust-strip--hero` adapts it for use right under the hero —
 * tighter padding so it reads as an extension of the hero, not its own beat.
 * ============================================================ */
.trust-strip {
  background: var(--ge-white);
  padding: var(--sp-12) 0 var(--sp-10);
  border-top: 1px solid var(--ge-neutral-lt3);
}
@media (min-width: 768px) { .trust-strip { padding: var(--sp-16) 0 var(--sp-12); } }

.trust-strip--hero {
  border-top: 0;
  padding: var(--sp-2) 0 var(--sp-8);
}
@media (min-width: 768px) {
  .trust-strip--hero { padding: var(--sp-4) 0 var(--sp-10); }
}

.trust-strip .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-6);
  text-align: center;
}

.trust-strip__eyebrow {
  font-size: 11px;
  font-weight: var(--fw-regular);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ge-text-secondary);
}

.trust-strip__logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--sp-8);
  width: 100%;
}
@media (min-width: 768px) { .trust-strip__logos { gap: var(--sp-12); } }

.trust-strip__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.82;
  transition: opacity var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-standard);
}
.trust-strip__logo:hover { opacity: 1; transform: translateY(-2px); }

.trust-strip__logo img {
  height: 64px;
  width: auto;
  display: block;
}
@media (min-width: 768px) {
  .trust-strip__logo img { height: 80px; }
}
.final-cta {
  background: var(--ge-white);
  color: var(--ge-navy);
  padding: var(--sp-16) 0;
  position: relative;
  overflow: hidden;
}
@media (min-width: 768px) { .final-cta { padding: var(--sp-20) 0; } }
.final-cta__card {
  background: transparent;
  border-radius: 0;
  padding: 0;
  text-align: center;
  position: relative;
  overflow: visible;
}
@media (min-width: 768px) { .final-cta__card { padding: 0; } }
.final-cta__inner {
  max-width: 720px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.final-cta__eyebrow {
  /* Inherits base size/letterspacing/padding from .eyebrow. Dark-context overrides: */
  margin-bottom: var(--sp-6);
  align-self: center;
}
.final-cta .eyebrow--ghost {
  color: var(--ge-white);
  border-color: rgba(255, 255, 255, 0.35);
}
.final-cta h2 {
  font-size: clamp(36px, 5vw, 64px);
  font-weight: var(--fw-light);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 0 var(--sp-5);
  color: var(--ge-navy);
}
/* Sky-blue pill, white text — readable, brand-consistent */
.final-cta h2 .hl {
  background: var(--ge-violet-2, #E8E4F9);
  color: #4A3995;
  padding: 0.08em 16px 0.22em;
}
/* Heading highlight pills — comfortable padding so descenders/letters
 * never touch the pill edges. */
.hero h1 .hl,
.features__head h2 .hl,
.modes__head h2 .hl,
.partners__intro h2 .hl {
  padding: 0.08em 16px 0.22em;
  line-height: 1.18;
}
.final-cta__sub {
  font-size: var(--fs-h4);
  font-weight: var(--fw-light);
  line-height: 1.5;
  color: var(--ge-text-secondary);
  margin: 0 auto var(--sp-8);
  max-width: 540px;
}
.final-cta__small {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-light);
  color: var(--ge-text-secondary);
  margin: var(--sp-5) 0 0;
}
.final-cta__small a {
  color: var(--ge-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.final-cta__small a:hover { color: var(--ge-sky); }

/* Decorative rings removed — white band stays clean. */
.final-cta::before,
.final-cta::after { display: none; }
.final-cta__card::before { display: none; }

/* ============================================================
 * NAV — match the Martyn's Law page chrome: solid white bar,
 * navy CTA button with a violet hover and white-on-navy arrow.
 * (foundation.css provides the base layout; these override the
 * default sky CTA so both pages share one nav appearance.)
 * ============================================================ */
.nav { background: var(--ge-white) !important; }
/* Match Martyn's Law nav logo sizing — needs to beat `.nav__brand img`
 * (foundation) which sets width:auto at height 72px (→ ~242px wide). */
.nav__brand img.nav__brand-logo { width: 175px; }
.nav .btn--primary {
  background: var(--ge-navy);
  color: var(--ge-white);
  box-shadow: none;
}
.nav .btn--primary:hover {
  background: var(--ge-violet-4, #614DBA);
  color: var(--ge-white);
  box-shadow: none;
}
.nav .btn--primary:active {
  background: #382872;
  box-shadow: none;
}
.nav .btn--primary:focus-visible {
  box-shadow: 0 0 0 3px rgba(97, 77, 186, 0.40);
}
/* Arrow pill: white-on-navy at rest, violet-on-white on hover */
.nav .btn--primary .btn__arrow {
  background: var(--ge-white);
  color: var(--ge-navy);
}
.nav .btn--primary:hover .btn__arrow {
  background: var(--ge-white);
  color: var(--ge-violet-4, #614DBA);
}