/* =========================================================================
   TLC Website — 1:1 build of the homepage Figma design.
   Mobile-first; desktop breakpoint 1024px.
   ========================================================================= */

/* ---------- Brand tokens ---------- */
:root {
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Primary brand (TLC design system) */
  --navy:        #005695;
  --navy-dark:   #014373;
  --navy-deep:   #0a3050;
  --green:       #77b28c;  /* secondary brand green — gradient start tone (solid use: text/borders) */
  --green-dark:  #3f7d58;  /* darkened Sept 2026 so white text and green-on-white pass WCAG AA (4.9:1) */
  --green-deep:  #3f7d58;  /* alias: legacy name kept for backwards-compatibility */
  --green-gradient:      linear-gradient(135deg, #3a7553 0%, #3f7d58 100%);  /* white text: 5.5:1 → 4.9:1 */
  --green-gradient-hover: linear-gradient(135deg, #2f6b48 0%, #3a7553 100%);
  --teal:        #1D6F73;        /* health — TLC teal (unchanged) */

  /* Accent colours used across the page */
  --pink:        #005695;        /* culinary — TLC brand blue */
  --pink-soft:   #005695;
  --purple:      #4A8A67;        /* education — brand green */
  --orange:      #0A3050;        /* leadership — TLC navy-deep */
  --blue:        #014373;        /* safeguarding — TLC navy-dark */
  --yellow:      #f5b932;
  --red:         #7A1F2B;        /* negative / "not covered" indicator (not a sector colour) */

  --text:        #1f2a37;
  --text-muted:  #5a6776;
  --line:        #e3e8ee;
  --bg:          #f4f6f8;
  --bg-soft:     #f4f6f8;  /* alias: legacy name */
  --card:        #ffffff;
  --white:       #ffffff;

  --page-max: 1280px;
  --gutter: clamp(20px, 4vw, 60px);
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  font-family: var(--font-sans);
  color: var(--text);
  line-height: 1.55;
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

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

/* ---------- Skip link (accessibility) ---------- */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 10000;
  padding: 12px 24px;
  background: var(--navy);
  color: var(--white);
  font-weight: 600;
  font-size: 14px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: top .2s ease;
}
.skip-link:focus {
  top: 12px;
}

/* ---------- Type ---------- */
h1, h2, h3, h4, h5 {
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--navy-deep);
  /* Balance heading line lengths so a single word doesn't dangle on its own line */
  text-wrap: balance;
}
/* Avoid widows in body copy — modern browsers will re-flow the last line */
p { text-wrap: pretty; }
/* Desktop scale */
h1 { font-size: 56px; }
h2 { font-size: 48px; }
h3 { font-size: 40px; }
h4 { font-size: 32px; }
h5 { font-size: 24px; }
p  { font-size: 16px; }

/* Tablet */
@media (max-width: 1024px) {
  h1 { font-size: 52px; }
  h2 { font-size: 44px; }
  h3 { font-size: 36px; }
  h4 { font-size: 28px; }
  h5 { font-size: 24px; }
}

/* Mobile */
@media (max-width: 640px) {
  h1 { font-size: 40px; }
  h2 { font-size: 36px; }
  h3 { font-size: 32px; }
  h4 { font-size: 24px; }
  h5 { font-size: 20px; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px 12px 22px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  transition: transform .2s ease, background .25s ease, box-shadow .25s ease, color .2s ease;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);
}
.btn:active { transform: translateY(0); transition-duration: .08s; }

/* Nudge the arrow forward on hover */
.btn__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  flex-shrink: 0;
  transition: transform .25s ease, background .25s ease;
}
.btn:hover .btn__arrow { transform: translateX(3px); }
a.tcard:hover .btn__arrow,
.tcard__label:hover .btn__arrow { transform: translateX(3px); }

/* Image cards: a subtle lift + zoom on hover */
.tcard {
  transition: transform .35s ease, box-shadow .35s ease;
}
.tcard:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.2);
}
.tcard img { transition: transform .5s ease; }
.tcard:hover img { transform: scale(1.04); }
.btn__arrow::before {
  content: '';
  width: 12px;
  height: 12px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12h13l-5-5 1.4-1.4L21.8 12l-7.4 7.4L13 18l5-5H5z'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12h13l-5-5 1.4-1.4L21.8 12l-7.4 7.4L13 18l5-5H5z'/></svg>") no-repeat center / contain;
}

.btn--green        { background: var(--green-gradient); color: var(--white); }
.btn--green:hover  { background: var(--green-gradient-hover); }
.btn--green .btn__arrow { background: rgba(255, 255, 255, 0.22); }

.btn--ghost-light  { background: transparent; color: var(--white); border: 1.5px solid rgba(255,255,255,0.55); padding: 10px 14px 10px 22px; }
.btn--ghost-light:hover { background: rgba(255,255,255,0.08); }
.btn--ghost-light .btn__arrow { background: rgba(255,255,255,0.18); }

/* =========================================================================
   ANNOUNCEMENT BAR
   ========================================================================= */
.announce {
  background: var(--teal);
  color: var(--white);
  font-size: 14px;
  padding: 10px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.announce p { text-align: center; flex: 1; margin: 0; }
.announce a { text-decoration: underline; }
.announce__close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: var(--white);
  cursor: pointer;
  border: 0;
  padding: 0;
  transition: background .2s ease;
}
.announce__close:hover { background: rgba(255, 255, 255, 0.3); }

/* =========================================================================
   HEADER
   ========================================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--white);
  border-bottom: 1px solid rgba(0,0,0,0.05);
  transition: box-shadow .3s ease;
}
.site-header.is-sticky {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
.header-sentinel {
  height: 0;
  width: 100%;
  pointer-events: none;
}
.nav {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-block: 18px;
  transition: padding-block .25s ease;
}
.nav__logo img {
  width: 70px;
  height: 70px;
  transition: width .25s ease, height .25s ease;
}
.site-header.is-sticky .nav { padding-block: 8px; }
.site-header.is-sticky .nav__logo img { width: 48px; height: 48px; }
.site-header.is-sticky .nav__cta { padding: 10px 18px; font-size: 14px; }
.nav__cta { transition: padding .25s ease, font-size .25s ease; }
@media (prefers-reduced-motion: reduce) {
  .nav, .nav__logo img, .nav__cta { transition: none; }
}
.nav__links {
  display: none;
  list-style: none;
  gap: 36px;
  margin-inline: auto;
}
.nav__links a {
  font-weight: 500;
  font-size: 16px;
  color: var(--text);
  display: inline-flex;
  align-items: center;
}
.nav__links a:hover { color: var(--green-deep); }
.nav__links a[aria-current="page"]:hover { color: var(--text); }
.nav__cta { margin-left: auto; }

.nav__toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px; height: 40px;
  padding: 10px;
  margin-left: auto;   /* push to far right when nav__cta is hidden */
}
.nav__toggle span {
  display: block;
  height: 2px;
  background: var(--navy);
  border-radius: 2px;
}

@media (max-width: 1023.98px) {
  .nav__cta { display: none; }
}
@media (min-width: 1024px) {
  .nav__links { display: flex; }
  .nav__cta   { display: inline-flex; margin-left: 0; }
  .nav__toggle { display: none; }
}
/* Smaller laptops: the full nav (logo + 6 links + CTA) only just fits at
   1024px with the roomy desktop spacing, so tighten gaps and trim the logo
   and CTA through ~1200px. Larger screens keep the original spacious look. */
.nav__links a { white-space: nowrap; }
@media (min-width: 1024px) and (max-width: 1199.98px) {
  .nav { gap: 12px; }
  .nav__links { gap: 16px; }
  .nav__links a { font-size: 14px; }
  .nav__logo img { width: 52px; height: 52px; }
  .nav__cta { padding: 9px 14px; font-size: 13px; }
}

.mobile-menu {
  display: none;
  padding: 16px var(--gutter) 24px;
  border-top: 1px solid rgba(0,0,0,0.05);
  background: var(--white);
}
.mobile-menu.is-open { display: block; }
.mobile-menu ul { list-style: none; display: grid; gap: 14px; }
.mobile-menu a { font-weight: 500; padding: 6px 0; }
.mobile-menu__cta {
  margin-top: 22px;
  display: flex !important;
  width: 100%;
  justify-content: center;
  padding: 14px 22px;
  font-size: 15px;
}

/* =========================================================================
   DESKTOP NAV SUBMENU (Apprenticeships → Sectors)
   ========================================================================= */
.has-sub { position: relative; }

/* Trigger link with chevron */
.has-sub__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.has-sub__chev {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .25s ease;
  opacity: 0.7;
  margin-top: -2px;
}
.has-sub:hover .has-sub__chev,
.has-sub:focus-within .has-sub__chev {
  transform: rotate(225deg) translate(-2px, -2px);
  opacity: 1;
}

/* Underline animation: stop it spanning the chevron */
.nav__links .has-sub__trigger::after { right: 14px; }

/* Submenu panel */
.submenu {
  position: absolute;
  top: calc(100% + 6px);
  left: -16px;
  z-index: 1100;
  min-width: 320px;
  padding: 12px;
  background: var(--white);
  border-radius: 16px;
  box-shadow:
    0 30px 60px -20px rgba(10, 48, 80, 0.22),
    0 8px 20px -8px rgba(10, 48, 80, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
  display: grid;
  gap: 2px;
}
/* Invisible bridge so the panel doesn't close while the cursor crosses the gap */
.submenu::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}
.has-sub:hover > .submenu,
.has-sub:focus-within > .submenu,
.has-sub > .submenu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* "All apprenticeships" overview row */
.submenu__overview {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--bg);
  color: var(--navy-deep);
  font-weight: 600;
  transition: background .2s ease;
}
.submenu__overview:hover { background: rgba(119, 178, 140, 0.12); }
.submenu__overview small {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.01em;
}
.submenu__overview + .submenu__item { margin-top: 6px; }

/* Each sector row */
.submenu__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-radius: 10px;
  color: var(--navy-deep);
  font-weight: 500;
  transition: background .2s ease, transform .2s ease;
}
.submenu__item:hover {
  background: var(--bg);
  transform: translateX(2px);
}
.submenu__item[aria-current="page"] {
  background: rgba(10, 48, 80, 0.05);
}
.submenu__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.submenu__name {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--navy-deep);
  line-height: 1.2;
}
.submenu__item small,
.submenu__overview small {
  display: block;
}
.submenu__item small {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* Sector dot */
.submenu__dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 1), 0 0 0 4px currentColor;
}
.submenu__item--culinary     .submenu__dot { background: var(--pink); color: rgba(0, 86, 149, 0.25); }
.submenu__item--education    .submenu__dot { background: var(--purple); color: rgba(74, 138, 103, 0.3); }
.submenu__item--health       .submenu__dot { background: var(--teal); color: rgba(29, 111, 115, 0.3); }
.submenu__item--leadership   .submenu__dot { background: var(--orange); color: rgba(10, 48, 80, 0.3); }
.submenu__item--safeguarding .submenu__dot { background: var(--blue); color: rgba(1, 67, 115, 0.3); }

/* Compact variant (About -> Partnerships / Policies): plain rows, no sector dots */
.submenu--compact { min-width: 250px; }
.submenu--compact .submenu__item { gap: 0; }

/* =========================================================================
   MOBILE NAV SUBMENU (collapsible)
   ========================================================================= */
.m-has-sub { display: flex; flex-direction: column; }
.m-sub-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 0;
  background: transparent;
  border: 0;
  color: var(--text);
  font: inherit;
  font-weight: 500;
  font-size: 16px;
  text-align: left;
  cursor: pointer;
}
.m-sub-chev {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--navy);
  border-bottom: 2px solid var(--navy);
  transform: rotate(45deg);
  transition: transform .25s ease;
}
.m-sub-toggle[aria-expanded="true"] .m-sub-chev {
  transform: rotate(-135deg);
}

.m-sub {
  list-style: none;
  display: grid !important;
  gap: 6px !important;
  margin: 8px 0 4px;
  padding: 8px 0 8px 14px;
  border-left: 2px solid var(--line);
}
.m-sub[hidden] { display: none !important; }
.m-sub li { margin: 0; }
.m-sub a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px !important;
  font-weight: 500;
  font-size: 15px;
  color: var(--text);
}
.m-sub a[aria-current="page"] { font-weight: 600; }
.m-sub-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.m-sub-dot--culinary     { background: var(--pink); }
.m-sub-dot--education    { background: var(--purple); }
.m-sub-dot--health       { background: var(--teal); }
.m-sub-dot--leadership   { background: var(--orange); }
.m-sub-dot--safeguarding { background: var(--blue); }

/* =========================================================================
   HERO
   ========================================================================= */
.hero {
  padding: clamp(40px, 6vw, 72px) 0;
  background: var(--white);
}
.hero__grid {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .hero__grid { grid-template-columns: 1.15fr 1fr; gap: 32px; }
  .hero__media { max-width: 380px; }
}
@media (min-width: 1024px) {
  .hero__grid { grid-template-columns: 1.05fr 1fr; gap: clamp(40px, 4vw, 56px); }
  .hero__media { max-width: 560px; }
}

.hero__title {
  font-size: clamp(40px, 5.4vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.025em;
}
/* Home hero: uppercase kicker line above a three-line stacked headline */
.hero__kicker {
  margin: 0 0 18px;
  color: var(--green-dark);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.6;
  text-transform: uppercase;
}
.hero__title--stack {
  font-size: clamp(34px, 4.1vw, 52px);
  line-height: 1.08;
  text-wrap: initial; /* each span is its own line; do not balance across them */
}
.hero__title--stack span { display: block; }
.hero__accent {
  color: var(--green-dark);
  font-style: normal;
}
.hero__desc strong {
  display: block;
  margin-bottom: 4px;
  color: var(--navy-deep);
  font-weight: 700;
}
.hero__desc {
  margin-top: 22px;
  max-width: 52ch;
  color: var(--text);
  font-size: 16px;
  line-height: 1.7;
}
.hero__creds {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px 36px;
}
.hero__creds img {
  width: auto;
  object-fit: contain;
}
.hero__creds .cred--ofsted  { height: 60px; }
.hero__creds .cred--cg      { height: 42px; }
.hero__creds .cred--pearson { height: 32px; }
.hero__creds .cred--cmi     { height: 42px; }
.hero__actions {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.hero__media {
  position: relative;
  max-width: 560px;
  margin-inline: auto;
  width: 100%;
}
.hero__media img {
  width: 100%;
  height: auto;
  display: block;
}

/* Blob shape with gold outline — image is clipped into a rounded form with
   a sharp top-right corner; the SVG overlay paints a gold arc that's thickest
   at that corner and fades toward the other edges. */
.hero__media .shape-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
}
.hero__media .shape-image {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: 48% 0% 48% 48%;
  overflow: hidden;
}
.hero__media .shape-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.hero--page .hero__media .shape-image img {
  object-position: right center;
}
.emp-hero .hero__media .shape-image img {
  object-position: left center;
}
.hero__media .shape-outline {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

/* =========================================================================
   CULINARY APPRENTICESHIP — horizontal accordion
   Each cell collapses to its 98px-wide bar; the open cell expands to fill.
   Earlier (left-of-active) bars stack on the left;
   later (right-of-active) bars stack on the right.
   ========================================================================= */
.culinary { background: var(--navy-deep); color: var(--white); overflow: hidden; }

.acc {
  position: relative;
  display: flex;
  align-items: stretch;
  min-height: 680px;
  width: 100%;
}

.acc__cell {
  position: relative;
  flex: 0 0 98px;        /* default = collapsed (just the bar) */
  overflow: hidden;
  /* Smoother easing — Material standard, slight ease-in-out */
  transition: flex-basis .55s cubic-bezier(.4, 0, .2, 1),
              flex-grow  .55s cubic-bezier(.4, 0, .2, 1);
  color: var(--white);
}
.acc__cell.is-open {
  flex: 1 1 0%;          /* expand to fill remaining space */
}

.acc__cell--culinary    { background: var(--pink); }
.acc__cell--education   { background: var(--purple); }
.acc__cell--health      { background: var(--teal); }
.acc__cell--leadership  { background: var(--orange); }
.acc__cell--safeguarding{ background: var(--blue); }

/* Panels live in a SHARED overlay (as siblings of cells, inside .acc).
   This decouples panel position from cell motion: content stays put while
   the colored bars animate around it. Each panel carries its sector colour
   (slightly darkened) so it still reads as part of that cell's stripe. */
.acc__panel {
  position: absolute;
  top: 0;
  bottom: 0;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  transition: opacity .45s cubic-bezier(.4, 0, .2, 1);
  /* Layered background: subtle darken on top of the sector colour set below */
  background-image: linear-gradient(rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.16));
}
.acc__panel[data-panel="culinary"]    { background-color: var(--pink); }
.acc__panel[data-panel="education"]   { background-color: var(--purple); }
.acc__panel[data-panel="health"]      { background-color: var(--teal); }
.acc__panel[data-panel="leadership"]  { background-color: var(--orange); }
.acc__panel[data-panel="safeguarding"]{ background-color: var(--blue); }
.acc__panel.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* Desktop horizontal accordion: each panel is pinned to where its cell's
   open area would be (cell's left edge + the open cell's panel width = 100vw
   minus 5 bars). Cross-fade between them with no movement. */
@media (min-width: 900px) {
  .acc__panel {
    /* 5 bars of 98px each: open cell's panel area = .acc width minus all bars.
       Use 100% (content width) not 100vw, otherwise scrollbar pushes the panel
       over the open cell's bar and makes it look thinner. */
    width: calc(100% - 5 * 98px);
  }
  .acc__panel[data-panel="culinary"]    { left: 0; }
  .acc__panel[data-panel="education"]   { left: 98px; }
  .acc__panel[data-panel="health"]      { left: calc(2 * 98px); }
  .acc__panel[data-panel="leadership"]  { left: calc(3 * 98px); }
  .acc__panel[data-panel="safeguarding"]{ left: calc(4 * 98px); }
}
@media (min-width: 900px) and (max-width: 1023.98px) {
  /* Bars shrink to 80px in this range */
  .acc__panel { width: calc(100% - 5 * 80px); }
  .acc__panel[data-panel="education"]   { left: 80px; }
  .acc__panel[data-panel="health"]      { left: calc(2 * 80px); }
  .acc__panel[data-panel="leadership"]  { left: calc(3 * 80px); }
  .acc__panel[data-panel="safeguarding"]{ left: calc(4 * 80px); }
}

.acc__panel-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: stretch;
  width: 100%;
  height: 100%;
  padding: clamp(40px, 5vw, 64px) clamp(28px, 4vw, 56px) 0; /* no bottom padding — let chef sit flush */
  padding-left: max(clamp(28px, 4vw, 56px), calc((100vw - 1280px) / 2 + var(--gutter)));
}
@media (min-width: 900px) {
  .acc__panel-inner { grid-template-columns: 1fr 1fr; }
}

.acc__copy {
  align-self: center;
  max-width: 560px;
  padding-bottom: clamp(40px, 5vw, 64px); /* keep text away from section bottom */
}
.acc__copy h2,
.acc__copy h3 { color: var(--white); }
.acc__copy h2 {
  margin-bottom: 14px;
  font-size: clamp(28px, 3.2vw, 38px);
}
.acc__copy h3 {
  margin-top: 24px;
  margin-bottom: 10px;
  font-size: 17px;
  font-weight: 700;
}
.acc__copy p {
  font-size: 14.5px;
  line-height: 1.7;
  color: rgba(255,255,255,0.95);
  max-width: 48ch;
}
.acc__actions {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.acc__media {
  align-self: end;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.acc__media img {
  width: auto;
  max-width: 100%;
  max-height: 600px;
  height: auto;
  object-fit: contain;
  object-position: bottom center;
  display: block;
}
/* Flip the Health & Social Care worker so they face inward toward the text */
.acc__cell--health .acc__media img { transform: scaleX(-1); }

/* The vertical bar pinned to the right edge of each cell */
.bar {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 98px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 28px;
  padding: 24px 0;
  color: var(--white);
  cursor: pointer;
  border: 0;
  outline: 0;
  background: transparent;       /* cell already paints the colour */
  font-family: inherit;
  transition: filter .2s ease;
}
.bar:hover { filter: brightness(1.08); }
.acc__cell.is-open .bar { filter: brightness(0.92); cursor: default; }

.bar__label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.bar__icon {
  width: 56px;
  height: 56px;
  object-fit: contain;
  display: block;
  background: var(--white);
  border: 0;
  border-radius: 50%;
  padding: 9px;
  box-sizing: border-box;
}

/* ---- Button: white-outline ghost (used inside panels) ---- */
.btn--ghost-white {
  background: transparent;
  color: var(--white);
  border: 1.5px solid var(--white);
  padding: 11px 14px 11px 22px;
}
.btn--ghost-white:hover { background: rgba(255,255,255,0.10); }
.btn--ghost-white .btn__arrow { background: transparent; border: 1.5px solid var(--white); }
.btn--ghost-white .btn__arrow::before { background: var(--white); }

/* Very small screens — hide the chef image entirely to save space */
@media (max-width: 479.98px) {
  .acc__media { display: none; }
}

/* =========================================================================
   TRUSTED PARTNER (dark)
   ========================================================================= */
.trusted {
  background: linear-gradient(135deg, var(--teal) 0%, var(--navy-deep) 70%);
  color: var(--white);
  padding: clamp(56px, 7vw, 96px) 0 clamp(56px, 7vw, 96px);
}
.trusted__top {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  grid-template-columns: 1fr;
  align-items: center; /* vertically center stats next to copy */
}
@media (min-width: 1024px) {
  .trusted__top {
    grid-template-columns: 3fr 1fr;  /* copy 3/4, stats 1/4 */
  }
}
.trusted__copy h2 { color: var(--white); margin-bottom: 18px; }
.trusted__copy p  { color: rgba(255,255,255,0.85); font-size: 15px; line-height: 1.7; margin-bottom: 14px; }
.trusted__copy .btn { margin-top: 16px; }

.stats {
  display: grid;
  gap: 24px 18px;
  text-align: center;
  justify-items: center;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
}
@media (min-width: 1024px) {
  /* On desktop the stats sit in a narrow side column — stack them vertically */
  .stats {
    grid-template-columns: 1fr;
    text-align: right;
    justify-items: end;
    gap: 32px;
  }
}
.stat__num {
  font-size: clamp(34px, 3.6vw, 52px);
  font-weight: 600;
  color: var(--green);
  line-height: 1;
  letter-spacing: -0.01em;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}
.stat__label {
  margin-top: 6px;
  color: var(--white);
  font-weight: 400;
  font-size: 17px;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.4);
}

/* Impact at a glance — five survey stats between the copy and the cards */
.glance {
  margin-top: clamp(44px, 5vw, 64px);
  padding-top: clamp(36px, 4vw, 48px);
  border-top: 1px solid rgba(130, 192, 151, 0.28);
  text-align: center;
}
.glance__eyebrow {
  font-size: 12px;
  line-height: 1.4;
  color: #b8e0c6;
  background: rgba(119, 178, 140, 0.2);
  margin-bottom: 14px;
}
.glance__title {
  color: var(--white);
  font-size: clamp(20px, 2vw, 26px);
  margin: 0 0 clamp(24px, 3vw, 36px);
}
.glance__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}
.glance__item {
  flex: 1 1 180px;
  max-width: 230px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 22px 16px 24px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(130, 192, 151, 0.25);
  border-radius: var(--radius-md);
}
.glance__value {
  display: inline-flex;
  align-items: baseline;
  color: var(--white);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  font-size: clamp(40px, 4vw, 52px);
  font-variant-numeric: tabular-nums;
}
.glance__unit { font-size: 0.55em; color: var(--green); margin-left: 2px; }
.glance__label {
  margin-top: 12px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #b8e0c6;
}
.glance__desc {
  margin-top: 8px;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255,255,255,0.8);
  text-wrap: pretty;
}

.trusted__cards {
  margin-top: clamp(40px, 5vw, 64px);
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) {
  .trusted__cards { grid-template-columns: repeat(3, 1fr); }
}
.tcard {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 9 / 10; /* ~10% shorter than 4:5 */
}
.tcard img {
  width: 100%; height: 100%; object-fit: cover;
}
/* Funding image — shift focus to the right so we see more of the people */
.tcard--funding img { object-position: 32% center; }
.tcard__label {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  background: var(--green-gradient);
  color: var(--white);
  border-radius: var(--radius-pill);
  padding: 12px 16px 12px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  font-size: 15px;
}
.tcard__label .btn__arrow {
  background: var(--green-deep);
  width: 30px;
  height: 30px;
}

/* =========================================================================
   MARCO PIERRE WHITE ACADEMY (portrait background + overlay)
   ========================================================================= */
.academy {
  position: relative;
  background: var(--navy-deep);
  color: var(--white);
  overflow: hidden;
  min-height: 540px;
  display: flex;
  align-items: center;
}
.academy__bg {
  position: absolute; inset: 0;
  background-position: center 30%;
  background-size: cover;
  background-repeat: no-repeat;
}
.academy::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(20,30,45,0.85) 0%, rgba(20,30,45,0.55) 45%, rgba(20,30,45,0.25) 80%, rgba(20,30,45,0.10) 100%);
}
.academy__inner {
  position: relative;
  z-index: 1;
  padding-block: clamp(48px, 6vw, 80px);
  width: 100%;
}
.academy__card {
  max-width: 540px;
  background: rgba(28, 43, 61, 0.55);
  backdrop-filter: blur(2px);
  border-radius: var(--radius-md);
  padding: clamp(28px, 3vw, 40px);
}
.academy__card h2 { color: var(--white); margin-bottom: 16px; }
.academy__card p  { font-size: 15px; line-height: 1.7; color: rgba(255,255,255,0.9); margin-bottom: 14px; }
.academy__card .btn { margin-top: 12px; }

/* ---------- MOBILE: stack the chef photo above the text, gradient behind card ---------- */
@media (max-width: 599.98px) {
  .academy {
    min-height: 0;
    display: block;        /* unstack the desktop flex centering */
  }
  /* Image becomes a real top block (not a full-bleed background) */
  .academy__bg {
    position: relative;
    inset: auto;
    width: 100%;
    height: 240px;
    background-position: center 22%;
  }
  /* No gradient overlay on mobile — solid navy section background does the job */
  .academy::after { display: none; }
  /* Container goes full width so the gradient bleeds to the edges */
  .academy__inner            { padding-block: 0; }
  .container.academy__inner  { padding-inline: 0; }
  /* Card is full-bleed, flush, no rounded corners — padding is INSIDE only */
  .academy__card {
    max-width: 100%;
    width: 100%;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
    padding: 15px;
  }
}

/* =========================================================================
   TESTIMONIALS (dark gradient + employer / apprentice carousel)
   ========================================================================= */
.feedback {
  background: linear-gradient(135deg, var(--teal) 0%, var(--navy-deep) 65%);
  color: var(--white);
  padding: clamp(56px, 7vw, 96px) 0;
}
.feedback__head { text-align: center; max-width: 800px; margin: 0 auto 48px; }
.feedback__head h2 { color: var(--white); margin-bottom: 14px; }
.feedback__head p  { color: rgba(255,255,255,0.85); font-size: 15px; line-height: 1.7; }

/* Testimonial carousel (employer + apprentice voices) */
.tsl { position: relative; --per-view: 1; --tsl-gap: 20px; }
@media (min-width: 800px)  { .tsl { --per-view: 2; --tsl-gap: 24px; } }
@media (min-width: 1100px) { .tsl { --per-view: 3; --tsl-gap: 28px; } }
.tsl__viewport {
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
  padding: 6px 4px 10px;
  margin: -6px -4px -10px;
  border-radius: var(--radius-md);
}
.tsl__viewport:active { cursor: grabbing; }
.tsl__viewport:focus-visible { outline: 2px solid var(--green); outline-offset: 6px; }
.tsl__track {
  display: flex;
  align-items: stretch;
  gap: var(--tsl-gap);
  will-change: transform;
  transition: transform .55s cubic-bezier(.4, 0, .2, 1);
}
.tsl__slide {
  flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--tsl-gap)) / var(--per-view));
  display: flex;
  opacity: 1;
  transition: opacity .45s ease;
}
/* Slides the script has scrolled out of view fade back (they peek at the edges mid-slide) */
.tsl__slide[aria-hidden="true"] { opacity: 0.35; }
.tsl__card {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(130, 192, 151, 0.35);
  border-radius: var(--radius-md);
  padding: clamp(24px, 3vw, 36px);
}
.tsl__tag {
  align-self: flex-start;
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: rgba(119, 178, 140, 0.2);
  color: #b8e0c6;
  margin-bottom: 8px;
}
.tsl__card--apprentice .tsl__tag { background: rgba(255,255,255,0.14); color: var(--white); }
.tsl__mark {
  display: block;
  color: var(--green);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 84px;
  line-height: 0.3;
  height: 30px;
  margin-top: 26px;
  margin-bottom: 6px;
}
.tsl__title {
  color: var(--white);
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.35;
  margin: 0 0 12px;
}
.tsl__text { font-size: 15px; line-height: 1.7; color: rgba(255,255,255,0.85); margin: 0; }

/* Carousel controls (prev / dots / next / pause) */
.tsl__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 32px;
}
.tsl__dots { display: flex; gap: 8px; align-items: center; }
.tsl__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  padding: 0;
  border: 0;
  transition: background .2s, transform .2s;
}
.tsl__dot.is-active { background: var(--green); transform: scale(1.4); }
.tsl__dot:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.tsl__arrow,
.tsl__play {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(130, 192, 151, 0.4);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: background .2s;
}
.tsl__arrow::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 10px; height: 10px;
  border-right: 2px solid var(--white);
  border-top: 2px solid var(--white);
  transform: translate(-65%, -50%) rotate(45deg);
}
.tsl__arrow--prev::before { transform: translate(-30%, -50%) rotate(-135deg); }
.tsl__arrow:hover,
.tsl__play:hover { background: rgba(255, 255, 255, 0.16); }
.tsl__arrow:focus-visible,
.tsl__play:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
/* Pause icon: two bars; play icon: triangle */
.tsl__play { margin-left: 6px; }
.tsl__play::before,
.tsl__play::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 3px; height: 12px;
  background: var(--white);
  transform: translateY(-50%);
}
.tsl__play::before { left: calc(50% - 5px); }
.tsl__play::after  { left: calc(50% + 2px); }
.tsl__play.is-paused::after { display: none; }
.tsl__play.is-paused::before {
  left: 50%;
  width: 0; height: 0;
  background: none;
  border-left: 11px solid var(--white);
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  transform: translate(-40%, -50%);
}
@media (prefers-reduced-motion: reduce) {
  .tsl__track, .tsl__slide { transition: none; }
}

/* =========================================================================
   READY TO START CTA (white bg, woman on laptop)
   ========================================================================= */
.ready {
  padding: clamp(56px, 7vw, 96px) 0;
}
.ready__grid {
  display: grid;
  gap: clamp(32px, 4vw, 64px);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) {
  .ready__grid { grid-template-columns: 1fr 1fr; }
}
.ready__media {
  position: relative;
  max-width: 440px;
  margin-inline: auto;
  width: 100%;
}
.ready__media .frame {
  position: relative;
  aspect-ratio: 1 / 1;
}
.ready__media .frame img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ready__copy h2 { margin-bottom: 18px; }
.ready__copy p  { color: var(--text); font-size: 15px; line-height: 1.7; margin-bottom: 14px; max-width: 50ch; }
.ready__copy .btn { margin-top: 18px; }

/* Tablet: centre the copy + button under the image */
@media (min-width: 600px) and (max-width: 899.98px) {
  .ready__copy { text-align: center; }
  .ready__copy p { margin-left: auto; margin-right: auto; }
}

/* =========================================================================
   EMPLOYER IMPACT STRIP (teal) — sits between the closing CTA and the footer
   ========================================================================= */
.impact {
  position: relative;
  background: linear-gradient(100deg, #1a6468 0%, var(--teal) 55%, #24858a 100%);
  color: var(--white);
  overflow: hidden;
}
/* Green accent line along the top edge */
.impact::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: var(--green-gradient);
}
/* Soft highlight behind the heading for depth */
.impact::after {
  content: "";
  position: absolute;
  left: -120px;
  top: 50%;
  width: 520px;
  height: 520px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 65%);
  pointer-events: none;
}
.impact .container { position: relative; z-index: 1; }
.impact__inner {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
  align-items: center;
  padding-block: 44px;
  text-align: center; /* heading centred above the list on tablet/phone */
}
@media (min-width: 900px) {
  .impact__inner { grid-template-columns: auto 1fr; gap: 56px; text-align: left; }
}
.impact__eyebrow {
  display: inline-block;
  margin: 0 0 10px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: var(--green-gradient);
  color: var(--navy-deep);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
}
.impact h3 {
  color: var(--white);
  font-size: clamp(24px, 2.8vw, 36px);
  line-height: 1.15;
  margin: 0;
  font-weight: 700;
  text-wrap: balance;
}
@media (min-width: 900px) {
  .impact h3 { max-width: 14ch; }
}
.impact__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 16px;
}
@media (min-width: 900px) {
  /* Three neat columns sized to the widest pill, pushed to the right */
  .impact__list { grid-template-columns: repeat(3, auto); justify-content: end; }
}
.impact__list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 22px 11px 11px;
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--navy-deep);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
  white-space: nowrap;
}
.impact__tick {
  position: relative;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--green-gradient);
}
.impact__tick::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 5px;
  width: 7px;
  height: 13px;
  border-right: 3px solid var(--white);
  border-bottom: 3px solid var(--white);
  transform: rotate(45deg);
}
/* Tablet: pills get tight in three columns — drop to two */
@media (min-width: 600px) and (max-width: 899.98px) {
  .impact__list { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 600px; margin-inline: auto; }
  .impact__list li { justify-content: flex-start; }
}

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-footer {
  background: var(--navy-deep);
  color: var(--white);
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: clamp(40px, 5vw, 64px) 0 32px;
}
.footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  margin-bottom: 40px;
}
.footer__top img { width: 80px; height: 80px; flex-shrink: 0; }
.footer__top h3 {
  color: var(--white);
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
}
.footer__top h3 .footer__top-soft { font-weight: 400; }

.footer__cols {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 800px) {
  .footer__cols { grid-template-columns: 1fr 1fr 1.3fr; }
}
.fcol {
  border: 1.5px solid rgba(130, 192, 151, 0.45);
  border-radius: var(--radius-md);
  padding: 28px 28px 32px;
}
/* details/summary native styling reset */
.fcol > summary {
  list-style: none;
  cursor: default;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--white);
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 22px;
  outline: none;
}
.fcol > summary::-webkit-details-marker { display: none; }
.fcol > summary::marker { display: none; }
.fcol__chev {
  display: none;  /* hidden on desktop — column always shows */
  width: 14px; height: 14px;
  border-right: 2px solid var(--white);
  border-bottom: 2px solid var(--white);
  transform: rotate(45deg);
  transition: transform .25s ease;
  margin-right: 4px;
}
.fcol[open] .fcol__chev { transform: rotate(-135deg); }
.fcol h4 {
  color: var(--white);
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 22px;
}
.fcol h5 {
  color: var(--green);
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 14px;
}
.fcol ul { list-style: none; display: grid; gap: 10px; margin-bottom: 22px; }
.fcol ul:last-child { margin-bottom: 0; }
.fcol ul li { font-size: 14px; color: rgba(255,255,255,0.9); line-height: 1.5; }
.fcol a { color: inherit; }
.fcol a:hover { color: var(--green); }
.fcol__viewall {
  display: inline-block;
  margin-top: 6px;
  color: var(--green);
  font-weight: 600;
}

.fcol--about p {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255,255,255,0.92);
  margin-bottom: 10px;
}
.fcol--about a {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255,255,255,0.92);
  text-decoration: underline;
}
.fcol--about strong { font-weight: 700; }
.fcol--about p:last-of-type { margin-bottom: 18px; }

.fsocial {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.fsocial a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--green-gradient);
}
.fsocial svg { width: 16px; height: 16px; fill: var(--white); }

/* Accreditation logos — sit under the social icons in the Get in touch column */
.footer__accred {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.footer__accred-title {
  color: var(--green);
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 16px;
}
.footer__accred-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
}
.footer__accred-row img { height: 38px; width: auto; object-fit: contain; }
.footer__accred-row img[alt="Ofsted Good Provider"] { height: 54px; }
/* Laptop / tablet-landscape: the column is narrower, keep all four logos on one row */
@media (min-width: 800px) and (max-width: 1199.98px) {
  .footer__accred-row { gap: 12px 14px; }
  .footer__accred-row img { height: 32px; }
  .footer__accred-row img[alt="Ofsted Good Provider"] { height: 44px; }
}

.footer__bottom {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.12);
  display: grid;
  gap: 20px 36px;
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) {
  .footer__bottom { grid-template-columns: 1fr auto; }
}
.footer__bottom-brand {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 600px) {
  .footer__bottom-brand { grid-template-columns: 1fr; gap: 24px; }
}
.footer__bottom p {
  font-size: 12px;
  line-height: 1.6;
  color: rgba(255,255,255,0.78);
}
.footer__legal {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
  margin: 0;
}
@media (min-width: 900px) {
  .footer__legal { justify-content: flex-end; }
}
.footer__legal li { position: relative; font-size: 13px; }
.footer__legal li + li::before {
  content: "";
  position: absolute;
  left: -11px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 13px;
  background: rgba(255,255,255,0.28);
}
.footer__legal a { color: rgba(255,255,255,0.82); }
.footer__legal a:hover { color: var(--green); }


/* ---------- Scroll Reveal Animations ---------- */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .7s cubic-bezier(.16, 1, .3, 1),
              transform .7s cubic-bezier(.16, 1, .3, 1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal--delay-1 { transition-delay: .1s; }
.reveal--delay-2 { transition-delay: .2s; }
.reveal--delay-3 { transition-delay: .3s; }
/* Staggered children */
.reveal-group .reveal { transition-delay: calc(var(--reveal-i, 0) * .1s); }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Nav link animated underline ---------- */
.nav__links a {
  position: relative;
  padding-bottom: 4px;
}
.nav__links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--green);
  border-radius: 1px;
  transition: width .3s cubic-bezier(.16, 1, .3, 1);
}
.nav__links a:hover::after {
  width: 100%;
}
.nav__links a[aria-current="page"] {
  font-weight: 600;
}
.nav__links a[aria-current="page"]::after {
  width: 100%;
  height: 3px;
  background: var(--green);
}
.mobile-menu a[aria-current="page"] {
  font-weight: 700;
}

/* ---------- Hero background treatment ---------- */
.hero {
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: -120px;
  right: -80px;
  width: 580px;
  height: 580px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(119, 178, 140, 0.07) 0%, rgba(119, 178, 140, 0) 70%);
  pointer-events: none;
  z-index: 0;
}
.hero::after {
  content: '';
  position: absolute;
  bottom: -160px;
  left: -100px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 86, 149, 0.05) 0%, rgba(0, 86, 149, 0) 70%);
  pointer-events: none;
  z-index: 0;
}
.hero .container {
  position: relative;
  z-index: 1;
}

/* ---------- Page entrance animation ---------- */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroFadeIn {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
.hero__kicker {
  animation: heroFadeUp .8s cubic-bezier(.16, 1, .3, 1) both;
  animation-delay: .05s;
}
.hero__title {
  animation: heroFadeUp .8s cubic-bezier(.16, 1, .3, 1) both;
  animation-delay: .1s;
}
.hero__desc {
  animation: heroFadeUp .8s cubic-bezier(.16, 1, .3, 1) both;
  animation-delay: .25s;
}
.hero__creds {
  animation: heroFadeUp .8s cubic-bezier(.16, 1, .3, 1) both;
  animation-delay: .4s;
}
.hero__actions {
  animation: heroFadeUp .8s cubic-bezier(.16, 1, .3, 1) both;
  animation-delay: .5s;
}
.hero__media {
  animation: heroFadeIn 1s cubic-bezier(.16, 1, .3, 1) both;
  animation-delay: .3s;
}

@media (prefers-reduced-motion: reduce) {
  .hero__kicker, .hero__title, .hero__desc, .hero__creds, .hero__actions, .hero__media {
    animation: none;
  }
}

/* ---------- Back-to-top button ---------- */
.back-to-top {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 900;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--green-gradient);
  color: var(--white);
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease, background .2s ease;
}
.back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.back-to-top:hover {
  background: var(--green-gradient-hover);
  transform: translateY(-2px);
}
.back-to-top svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (max-width: 599.98px) {
  .back-to-top { bottom: 18px; right: 18px; width: 40px; height: 40px; }
}

/* ---------- Employer logo marquee ---------- */
.logo-marquee {
  background: var(--bg);
  padding: 28px 0;
  overflow: hidden;
  position: relative;
}
.logo-marquee::before,
.logo-marquee::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.logo-marquee::before {
  left: 0;
  background: linear-gradient(90deg, var(--bg), transparent);
}
.logo-marquee::after {
  right: 0;
  background: linear-gradient(-90deg, var(--bg), transparent);
}
.logo-marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: marqueeScroll 40s linear infinite;
}
.logo-marquee__track img {
  height: 40px;
  width: auto;
  object-fit: contain;
  /* Every image carries its own trailing space, so translateX(-50%) lands
     exactly where the duplicate set begins — no jump on loop. */
  margin-right: 88px;
  transition: opacity .3s ease;
}
.logo-marquee__track img:hover {
  opacity: 0.85;
}
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-marquee__track { animation: none; }
}

/* ---------- Editorial pre-footer CTA ---------- */
.ready--editorial {
  background: #f5f1e9;
  padding-block: clamp(64px, 9vw, 120px);
  position: relative;
  overflow: hidden;
}
.ready--editorial::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 18%, rgba(119, 178, 140, 0.08) 0%, transparent 45%),
    radial-gradient(circle at 88% 82%, rgba(0, 86, 149, 0.06) 0%, transparent 50%);
  pointer-events: none;
}
.ready--editorial .container { position: relative; z-index: 1; }

.ready__card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: clamp(36px, 5vw, 72px);
  box-shadow:
    0 30px 80px -32px rgba(10, 48, 80, 0.22),
    0 8px 22px -10px rgba(10, 48, 80, 0.08);
}
.ready--editorial .ready__grid {
  align-items: center;
}
.ready--editorial .ready__copy h2 {
  color: var(--navy-deep);
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: 18px;
  text-wrap: balance;
}
.ready--editorial .ready__copy p {
  color: var(--text);
  font-size: 15px;
  line-height: 1.7;
}
.ready--editorial .ready__copy p.ready__eyebrow {
  display: inline-block;
  color: var(--green-dark);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0 0 18px;
  padding: 6px 14px;
  background: rgba(119, 178, 140, 0.14);
  border-radius: var(--radius-pill);
  max-width: none;
}

/* Image frame */
.polaroid {
  max-width: 420px;
  margin-inline: auto;
}
.polaroid img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}
/* Photo variant: fill the frame to match the other editorial images */
.polaroid--photo img {
  object-fit: cover;
  border-radius: var(--radius-md);
  box-shadow: 0 20px 48px -16px rgba(10, 48, 80, 0.22);
}

/* Pull-quote */
.ready__pullquote {
  margin: 32px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--line);
  position: relative;
}
.ready__pullquote::before {
  content: '\201C';
  position: absolute;
  top: 8px;
  left: -2px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 48px;
  line-height: 1;
  color: var(--green);
  opacity: 0.35;
}
.ready__pullquote p {
  font-style: italic;
  color: var(--navy-deep);
  font-size: 16px;
  line-height: 1.55;
  margin: 0 0 8px;
  padding-left: 28px;
  max-width: 48ch;
}
.ready__pullquote cite {
  font-style: normal;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  padding-left: 28px;
  display: block;
  text-transform: uppercase;
}

/* Stacked layout on small screens */
@media (max-width: 899.98px) {
  .polaroid { max-width: 280px; }
  .ready--editorial .ready__copy { text-align: left; }
  .ready--editorial .ready__copy p { margin-left: 0; margin-right: 0; }
  .ready__pullquote p,
  .ready__pullquote cite { padding-left: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .polaroid:hover { transform: rotate(-2.5deg); }
}

/* ---------- Combined CTA + employer impact (home) ----------
   The "Employers tell us..." proof points sit inside the CTA copy, between
   the paragraphs and the button, so it all reads as one compact section. */
.ready--combined {
  padding-block: clamp(48px, 6vw, 80px);
}
.ready--combined .ready__card {
  padding: clamp(28px, 4vw, 52px);
}
.ready--combined .ready__grid {
  gap: clamp(28px, 4vw, 56px);
}
@media (min-width: 900px) {
  .ready--combined .ready__grid { grid-template-columns: 5fr 7fr; }
}
.ready--combined .polaroid { max-width: 380px; }
.ready--combined .ready__copy h2 { margin-bottom: 14px; }
.ready--combined .ready__copy p { margin-bottom: 12px; max-width: 56ch; }
.ready--combined .ready__copy .btn { margin-top: 22px; }

.ready__proof {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.ready--combined .ready__copy p.ready__proof-label {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--navy-deep);
}
.ready__proof-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}
.ready__proof-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 7px;
  border-radius: var(--radius-pill);
  background: rgba(119, 178, 140, 0.14);
  color: var(--navy-deep);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}
.ready__tick {
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--green-gradient);
}
.ready__tick::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 3.5px;
  width: 5px;
  height: 9px;
  border-right: 2.5px solid var(--white);
  border-bottom: 2.5px solid var(--white);
  transform: rotate(45deg);
}
/* =========================================================================
   APPRENTICESHIPS PAGE — hero variant + sector blocks
   ========================================================================= */

/* Hero variant used on inner pages */
.hero--page { padding-bottom: clamp(48px, 6vw, 80px); }
.hero__eyebrow {
  display: inline-block;
  color: var(--green-dark);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0 0 16px;
  padding: 6px 14px;
  background: rgba(119, 178, 140, 0.14);
  border-radius: var(--radius-pill);
}

/* Navy ghost button for use on the white hero */
.btn--ghost-navy {
  background: transparent;
  color: var(--navy-deep);
  border: 1.5px solid var(--navy-deep);
  padding: 11px 14px 11px 22px;
}
.btn--ghost-navy:hover { background: rgba(10, 48, 80, 0.06); }
.btn--ghost-navy .btn__arrow { background: var(--navy-deep); }
.btn--ghost-navy .btn__arrow::before { background: var(--white); }

/* Section wrapper — full-bleed coloured band, image and panel side-by-side */
.sector {
  color: var(--white);
  padding: clamp(48px, 7vw, 96px) 0;
  position: relative;
  overflow: hidden;
}
.sector--culinary     { background: var(--pink); }
.sector--education    { background: linear-gradient(135deg, #a66f1a 0%, #8f5e12 100%); } /* darkened marigold: white copy now ≥4.5:1 */
.sector--health       { background: var(--teal); }
.sector--leadership   { background: var(--orange); }
.sector--safeguarding { background: var(--blue); }

/* Soft contrast wash on top of each sector colour */
.sector::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.18));
  pointer-events: none;
}
.sector .container { position: relative; z-index: 1; }

.sector__grid {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) {
  .sector__grid { grid-template-columns: 1.05fr 1fr; }
  .sector--reverse .sector__grid { grid-template-columns: 1fr 1.05fr; }
  .sector--reverse .sector__media { order: 2; }
  .sector--reverse .sector__panel { order: 1; }
}

.sector__media {
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: rgba(0, 0, 0, 0.15);
  box-shadow: 0 20px 48px -16px rgba(0, 0, 0, 0.35);
}
.sector__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .6s ease;
}
.sector:hover .sector__media img { transform: scale(1.03); }

/* Health & Social Care figure left unflipped (faces as shot) */
.sector--health .sector__media img { transform: scaleX(1); }
.sector--health:hover .sector__media img { transform: scaleX(1) scale(1.03); }

/* Focal-point overrides so the subject stays centred after the portrait crop */
.sector--culinary     .sector__media img { object-position: 40% center; }
.sector--education    .sector__media img { object-position: 60% center; }
.sector--health       .sector__media img { object-position: 30% center; }
.sector--leadership   .sector__media img { object-position: 30% center; }
.sector--safeguarding .sector__media img { object-position: 60% center; }

.sector__panel {
  max-width: 580px;
}
.sector__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--white);
  border: 0;
  margin-bottom: 22px;
}
.sector__icon img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}
.sector__panel h2 {
  color: var(--white);
  margin-bottom: 16px;
  font-size: clamp(28px, 3.2vw, 40px);
}
.sector__panel h3 {
  color: var(--white);
  font-size: 18px;
  font-weight: 700;
  margin-top: 26px;
  margin-bottom: 10px;
}
.sector__panel p {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.94);
  margin-bottom: 14px;
  max-width: 52ch;
}
.sector__actions {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Tablet: the stacked sector image kept the base 4/5 portrait at full width,
   making it far too tall above the text. Contain it as a landscape banner. */
@media (min-width: 600px) and (max-width: 899px) {
  .sector__media {
    aspect-ratio: 16 / 9;
    width: 100%;
    max-width: 640px;
    margin-inline: auto;
  }
}

@media (max-width: 599.98px) {
  .sector { padding: 44px 0; }
  .sector__media { aspect-ratio: 4 / 3; }
  .sector__icon { width: 52px; height: 52px; margin-bottom: 18px; }
  .sector__icon img { width: 36px; height: 36px; }
  .sector__panel h2 { font-size: 26px; }
  .sector__panel h3 { font-size: 16px; }
  .sector__panel p  { font-size: 14.5px; }
  .sector__actions .btn { font-size: 13px; padding: 10px 12px 10px 18px; }
}

/* MPW CTA variant on the apprenticeships page */
.academy--apprenticeships .academy__card h2 {
  font-size: clamp(26px, 3vw, 38px);
}

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

/* =========================================================================
   RESPONSIVE OVERRIDES
   Breakpoints:
     - Desktop:        >= 1024px      (default styling)
     - Tablet land.:   768px - 1023px
     - Tablet port.:   600px - 767px
     - Phone:          400px - 599px
     - Small phone:    < 400px
   ========================================================================= */

/* ---------- TABLET LANDSCAPE (1024px and below) ---------- */
@media (max-width: 1023.98px) {
  /* Header */
  .nav__logo img { width: 56px; height: 56px; }
  .nav { padding-block: 14px; gap: 18px; }

  /* Hero credentials sized down */
  .hero__creds { gap: 16px 24px; margin-top: 26px; }
  .hero__creds .cred--ofsted  { height: 48px; }
  .hero__creds .cred--pearson { height: 26px; }
  .hero__creds .cred--cg,
  .hero__creds .cred--cmi     { height: 34px; }

  /* Culinary accordion: keep horizontal but with narrower bars */
  .acc { min-height: 580px; }
  .acc__cell { flex: 0 0 80px; }
  .bar { width: 80px; }
  .bar__icon { width: 44px; height: 44px; padding: 8px; }
  .bar__label { font-size: 18px; }
  .acc__media img { max-height: 480px; }

  /* MPW Academy */
  .academy { min-height: 480px; }
}

/* ---------- TABLET PORTRAIT (600-1023px, fine-tune layouts) ---------- */
@media (min-width: 600px) and (max-width: 1023.98px) {
  /* Trusted cards: stay 3-col (cards are short and fit nicely) */
  .trusted__cards { grid-template-columns: repeat(3, 1fr); }

  /* Footer: 2-column layout — three short columns wrap neatly */
  .footer__cols { grid-template-columns: 1fr 1fr; }
}

/* ---------- BELOW 900px: culinary switches to vertical accordion ----------
   Cells (bars) and panels are siblings — use flex `order` to interleave so
   each panel appears directly below its matching bar. */
@media (max-width: 899.98px) {
  .culinary { min-height: 0; }
  .acc { min-height: 0; flex-direction: column; }
  .acc__cell {
    flex: 0 0 auto;
    width: 100%;
    overflow: visible;
  }

  /* Interleave order: cell N → order (2N-1), panel N → order (2N) */
  .acc__cell[data-cell="culinary"]      { order: 1; }
  .acc__panel[data-panel="culinary"]    { order: 2; }
  .acc__cell[data-cell="education"]     { order: 3; }
  .acc__panel[data-panel="education"]   { order: 4; }
  .acc__cell[data-cell="health"]        { order: 5; }
  .acc__panel[data-panel="health"]      { order: 6; }
  .acc__cell[data-cell="leadership"]    { order: 7; }
  .acc__panel[data-panel="leadership"]  { order: 8; }
  .acc__cell[data-cell="safeguarding"]  { order: 9; }
  .acc__panel[data-panel="safeguarding"]{ order: 10; }

  /* Bar — its own row, 64px tall */
  .bar {
    position: relative;
    width: 100%;
    height: 64px;
    flex-direction: row;
    padding: 0 22px;
    gap: 14px;
    background: transparent;
  }
  .bar__label { writing-mode: horizontal-tb; transform: none; font-size: 18px; order: 1; }
  .bar__icon { width: 36px; height: 36px; padding: 7px; margin-left: auto; order: 2; }

  /* Panel — relative to flow, hidden when its sibling cell isn't open */
  .acc__panel {
    position: relative;
    inset: auto;
    width: 100%;
    background: rgba(0, 0, 0, 0.18);
    z-index: auto;
  }
  .acc__panel:not(.is-open) { display: none; }
  .acc__panel.is-open       { opacity: 1; pointer-events: auto; }
  /* Border between bar and its open panel */
  .acc__cell.is-open .bar { border-bottom: 1px solid rgba(255,255,255,0.2); }

  .acc__panel-inner {
    padding: 28px var(--gutter) 0;
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .acc__copy { padding-bottom: 28px; max-width: none; }
  .acc__media { align-self: stretch; }
  .acc__media img { max-height: 360px; width: 100%; object-position: bottom center; }
}

/* ---------- TABLET (600 – 899px): side-by-side panel, image overflows right ---------- */
@media (min-width: 600px) and (max-width: 899.98px) {
  .acc__cell.is-open .acc__panel { overflow: hidden; }

  .acc__panel-inner {
    grid-template-columns: 1.45fr 1fr;
    gap: 0;
    padding: 36px 0 0 var(--gutter);
    padding-right: 0;
    align-items: end;
  }
  .acc__copy {
    padding-bottom: 36px;
    padding-right: 4px;
    align-self: center;
  }
  .acc__media {
    align-self: end;
    justify-self: end;
    overflow: visible;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
  }
  /* Image bigger than its column, anchored right so only the left portion shows */
  .acc__media img {
    height: 420px;
    max-height: 420px;
    width: auto;
    max-width: none;
    object-fit: contain;
    object-position: bottom right;
    transform: translateX(28%);
  }
  /* Health & Social Care: flipped, sized close to the other panels */
  .acc__cell--health .acc__media img {
    height: 460px;
    max-height: 460px;
    transform: translateX(18%) scaleX(-1);
  }
}

/* ---------- TABLET PORTRAIT & PHONE (under 800px) ---------- */
@media (max-width: 799.98px) {
  /* Hero CTA buttons sit at natural content width, wrap as needed */
  .hero__actions { gap: 12px; flex-wrap: wrap; }
  .hero__actions .btn { width: auto; }

  /* MPW academy — narrower card so more of the chef background shows through */
  .academy { min-height: 440px; }
  .academy__card { max-width: 460px; background: rgba(10, 48, 80, 0.78); backdrop-filter: blur(3px); }

  /* Testimonial carousel — one card per view, tighter controls */
  .tsl__card { padding: 26px 22px; }
  .tsl__nav { gap: 12px; margin-top: 26px; }
  .tsl__arrow, .tsl__play { width: 36px; height: 36px; min-width: 36px; min-height: 36px; }
  .tsl__arrow::before { width: 8px; height: 8px; }
  .tsl__dot { width: 9px; height: 9px; min-width: 9px; min-height: 9px; }
  .tsl__dot.is-active { transform: scale(1.3); }

  /* Footer */
  .footer__cols { gap: 12px; }
  .fcol { padding: 18px 22px; }
  .fcol > summary { cursor: pointer; margin-bottom: 0; }
  .fcol[open] > summary { margin-bottom: 18px; }
  .fcol__chev { display: block; }
  .fcol__body > h4 { display: none; }

  .footer__bottom { gap: 18px; }
  .footer__bottom img { width: 130px; }
  .footer__bottom p  { font-size: 11.5px; line-height: 1.55; }

  /* Section padding more compact */
  .trusted, .feedback, .ready { padding-block: clamp(40px, 7vw, 64px); }
  .academy__inner { padding-block: clamp(40px, 7vw, 64px); }
}

/* ---------- PHONE (under 600px) ---------- */
@media (max-width: 599.98px) {
  :root { --gutter: 16px; }

  /* Header — hide CTA on small phones to give the logo + hamburger room */
  .nav { gap: 12px; }
  .nav__cta { display: none; }
  .nav__logo img { width: 50px; height: 50px; }

  /* Announce bar wraps cleanly */
  .announce { font-size: 13px; line-height: 1.5; padding: 10px 14px; }

  /* Hero */
  .hero { padding: 28px 0 44px; }
  .hero__title { font-size: clamp(38px, 10vw, 52px); line-height: 1.05; }
  .hero__kicker { font-size: 11.5px; letter-spacing: 0.12em; margin-bottom: 14px; }
  .hero__title--stack { font-size: clamp(30px, 8.6vw, 44px); line-height: 1.1; }
  .hero__desc { font-size: 15px; margin-top: 16px; }
  .hero__creds { gap: 16px 24px; margin-top: 24px; }
  .hero__creds .cred--ofsted  { height: 52px; }
  .hero__creds .cred--pearson { height: 28px; }
  .hero__creds .cred--cg,
  .hero__creds .cred--cmi     { height: 38px; }
  .hero__actions { margin-top: 22px; flex-wrap: wrap; gap: 10px; }
  .hero__actions .btn { width: auto; font-size: 14px; padding: 12px 16px 12px 22px; }

  /* Culinary mobile bars — slightly shorter */
  .acc__cell { flex: 0 0 58px; }
  .bar { height: 58px; padding: 0 18px; gap: 12px; }
  .bar__label { font-size: 16px; }
  .bar__icon { width: 32px; height: 32px; padding: 6px; }
  .acc__media img { max-height: 300px; }
  .acc__copy h2 { font-size: 26px; }
  .acc__copy h3 { font-size: 16px; margin-top: 18px; }
  .acc__copy p { font-size: 14px; }
  .acc__actions .btn { font-size: 13px; padding: 10px 12px 10px 18px; }

  /* Trusted partner */
  .trusted__cards { grid-template-columns: 1fr; gap: 16px; }
  .tcard { aspect-ratio: 16 / 12; }
  .tcard__label { padding: 10px 14px 10px 18px; font-size: 13px; }
  .tcard__label .btn__arrow { width: 26px; height: 26px; }
  /* Stats: all three side-by-side */
  .stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px 12px;
    text-align: center;
    justify-items: center;
  }
  .stat__num { font-size: 30px; }
  .stat__label { font-size: 13px; }

  /* MPW Academy */
  .academy__card { padding: 22px; }
  .academy__card h2 { font-size: 24px; }
  .academy__card p { font-size: 14px; }

  /* Feedback */
  .feedback__head { margin-bottom: 28px; }
  .feedback__head h2 { font-size: 26px; }
  .feedback__head p  { font-size: 14px; }
  .tsl__card { padding: 22px 18px; }
  .tsl__title { font-size: 17px; }
  .glance__grid { gap: 12px; }
  .glance__item { flex-basis: calc(50% - 6px); max-width: none; padding: 18px 12px 20px; }
  .glance__desc { font-size: 13px; }
  .tsl__text { font-size: 14px; }
  .tsl__mark { font-size: 64px; height: 24px; margin-top: 20px; }

  /* Ready CTA */
  .ready__media { max-width: 280px; }
  .ready__copy h2 { font-size: 26px; }
  .ready__copy p { font-size: 14.5px; }

  /* Employer impact strip — compact white pills in two columns */
  .impact__inner { padding-block: 32px; gap: 20px; }
  .impact__eyebrow { font-size: 11px; margin-bottom: 8px; }
  .impact h3 { font-size: 24px; }
  .impact__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .impact__list li {
    padding: 8px 12px 8px 8px;
    gap: 8px;
    white-space: normal;
    font-size: 13.5px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14);
  }
  .impact__tick { width: 22px; height: 22px; }
  .impact__tick::before { left: 7.5px; top: 3.5px; width: 5.5px; height: 10px; border-width: 0 2.5px 2.5px 0; }

  /* Footer accreditation logos a touch smaller */
  .footer__accred-row { gap: 12px 16px; }
  .footer__accred-row img { height: 32px; }
  .footer__accred-row img[alt="Ofsted Good Provider"] { height: 46px; }

  /* Footer — stack and centre the logo + headline on phones */
  .footer__top {
    gap: 16px;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .footer__top img { width: 64px; height: 64px; }
  .footer__top h3 { font-size: 22px; max-width: none; }
  .fcol { padding: 16px 20px; }
  .fcol > summary { font-size: 16px; }
  .fcol[open] > summary { margin-bottom: 16px; }
  .fcol h4 { font-size: 16px; margin-bottom: 18px; }
  .fcol h5 { font-size: 14px; margin-bottom: 10px; }
  .fcol ul { gap: 8px; }
  .fcol ul li,
  .fcol--about p,
  .fcol--about a { font-size: 13.5px; }
  .fsocial { gap: 8px; }
  .fsocial a { width: 38px; height: 38px; }
}

/* ---------- SMALL PHONE (under 400px) ---------- */
@media (max-width: 399.98px) {
  .hero__title { font-size: 36px; }
  .hero__title--stack { font-size: 30px; }
  .hero__desc { font-size: 14px; }
  .hero__creds { gap: 12px 18px; }
  .hero__creds .cred--ofsted  { height: 44px; }
  .hero__creds .cred--pearson { height: 24px; }
  .hero__creds .cred--cg,
  .hero__creds .cred--cmi     { height: 32px; }

  .bar { padding: 0 14px; }
  .bar__label { font-size: 14px; }
  .bar__icon { width: 28px; height: 28px; padding: 5px; }

  .stat__num { font-size: 30px; }
  .academy__card { padding: 20px; }
  .academy__card h2 { font-size: 22px; }

  /* Very small phones — single column of pills */
  .impact__list { grid-template-columns: 1fr; max-width: 260px; margin-inline: auto; }
}

/* ---------- TOUCH DEVICES (any pointer:coarse) ---------- */
@media (hover: none) and (pointer: coarse) {
  /* Comfortable tap targets (dots stay decorative — the surrounding nav row
     gives plenty of tap area, and the prev/next arrows handle primary use) */
  .nav__links a,
  .mobile-menu a,
  .fcol a,
  .fsocial a { min-height: 44px; min-width: 44px; }
  .tsl__arrow, .tsl__play { min-height: 36px; min-width: 36px; }
  .tsl__dot   { min-height: 9px;  min-width: 9px;  }

  /* Disable :hover lift on cards (looks weird on touch) */
  .tcard:hover { transform: none; box-shadow: none; }
  .tcard:hover img { transform: none; }
  .btn:hover { transform: none; box-shadow: none; }
}

/* ---------- LANDSCAPE PHONE ---------- */
@media (max-width: 899.98px) and (orientation: landscape) and (max-height: 500px) {
  /* Hero shouldn't dominate the viewport in landscape phone */
  .hero { padding: 24px 0; }
  .hero__title { font-size: 32px; }
  .academy { min-height: 360px; }
}

/* =========================================================================
   SECTOR PAGE (culinary.php and future sibling pages)
   - Each sector page sets its own --sector-* tokens on the <body>.
   - All shared section styles use those tokens, so duplicating the page for
     Education, Health, Leadership or Safeguarding only means changing the
     token block + the hero image.
   ========================================================================= */
.sector-page {
  --sector: var(--pink);                 /* set per-sector below */
  --sector-dark: #4a1019;                /* darker shade for overlays */
  --sector-soft: #eef3f8;                /* page background tint */
  --sector-tint: rgba(0, 86, 149, 0.08);
  --sector-ring: rgba(0, 86, 149, 0.18);
}
.sector-page--culinary {
  --sector: #005695;             /* TLC brand blue */
  --sector-dark: #013a66;
  --sector-soft: #eef3f8;
  --sector-tint: rgba(0, 86, 149, 0.08);
  --sector-ring: rgba(0, 86, 149, 0.18);
}
.sector-page--education {
  --sector: #4A8A67;             /* brand green */
  --sector-dark: #2f5c43;
  --sector-soft: #eff5f1;
  --sector-tint: rgba(74, 138, 103, 0.10);
  --sector-ring: rgba(74, 138, 103, 0.22);
}
.sector-page--health {
  --sector: #1D6F73;             /* TLC teal */
  --sector-dark: #0d4448;
  --sector-soft: #eff5f5;
  --sector-tint: rgba(29, 111, 115, 0.08);
  --sector-ring: rgba(29, 111, 115, 0.20);
}
.sector-page--leadership {
  --sector: #0A3050;             /* TLC navy-deep */
  --sector-dark: #04182a;
  --sector-soft: #eef2f6;
  --sector-tint: rgba(10, 48, 80, 0.08);
  --sector-ring: rgba(10, 48, 80, 0.20);
}
.sector-page--safeguarding {
  --sector: #014373;             /* TLC navy-dark */
  --sector-dark: #012845;
  --sector-soft: #eef2f6;
  --sector-tint: rgba(1, 67, 115, 0.08);
  --sector-ring: rgba(1, 67, 115, 0.20);
}

/* ---------- Buttons (sector-page additions) ---------- */
.btn--white {
  background: var(--white);
  color: var(--sector, var(--navy-deep));
}
.btn--white:hover { background: rgba(255, 255, 255, 0.92); }
.btn--white .btn__arrow {
  background: var(--sector, var(--navy-deep));
}
.btn--white .btn__arrow::before { background: var(--white); }

.btn--burgundy {
  background: var(--sector, var(--pink));
  color: var(--white);
}
.btn--burgundy:hover { background: var(--sector-dark, #4a1019); }
.btn--burgundy .btn__arrow {
  background: rgba(255, 255, 255, 0.22);
}

.btn--ghost-dark {
  background: transparent;
  color: var(--sector, var(--navy-deep));
  border: 1.5px solid var(--sector, var(--navy-deep));
  padding: 11px 14px 11px 22px;
}
.btn--ghost-dark:hover { background: var(--sector-tint); }
.btn--ghost-dark .btn__arrow {
  background: transparent;
  border: 1.5px solid var(--sector, var(--navy-deep));
}
.btn--ghost-dark .btn__arrow::before { background: var(--sector, var(--navy-deep)); }

/* Shared eyebrow */
.eyebrow {
  display: inline-block;
  color: var(--sector, var(--navy-deep));
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0 0 16px;
  padding: 6px 14px;
  background: var(--sector-tint);
  border-radius: var(--radius-pill);
}
.eyebrow--light {
  background: rgba(255, 255, 255, 0.16);
  color: var(--white);
}

/* =========================================================================
   SECTOR HERO
   ========================================================================= */
.sec-hero {
  position: relative;
  color: var(--white);
  background:
    radial-gradient(circle at 12% 22%, rgba(255, 255, 255, 0.10) 0%, transparent 55%),
    radial-gradient(circle at 86% 78%, rgba(0, 0, 0, 0.18) 0%, transparent 55%),
    linear-gradient(140deg, var(--sector) 0%, var(--sector-dark) 100%);
  padding: clamp(28px, 4vw, 56px) 0 clamp(56px, 7vw, 100px);
  overflow: hidden;
}
.sec-hero::after {
  /* Soft texture: a faint paper grain via repeating dots */
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px) 0 0 / 24px 24px;
  pointer-events: none;
  opacity: 0.6;
}
.sec-hero > .container { position: relative; z-index: 1; }

/* Breadcrumb */
.sec-hero__crumbs {
  margin-bottom: clamp(20px, 3vw, 36px);
}
.sec-hero__crumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.7);
  padding: 0;
  margin: 0;
}
.sec-hero__crumbs li {
  display: flex;
  align-items: center;
  gap: 14px;
}
.sec-hero__crumbs li + li::before {
  content: '/';
  color: rgba(255, 255, 255, 0.35);
  margin-right: 0;
}
.sec-hero__crumbs a {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
  text-decoration: none;
  transition: color .2s ease;
}
.sec-hero__crumbs a:hover { color: var(--white); }
.sec-hero__crumbs [aria-current="page"] {
  color: var(--white);
  font-weight: 600;
}

.sec-hero__grid {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) {
  .sec-hero__grid { grid-template-columns: 1.05fr 1fr; }
}

.sec-hero__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--white);
  border: 0;
  margin-bottom: 22px;
}
.sec-hero__icon img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.sec-hero__eyebrow {
  display: inline-block;
  color: var(--white);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0 0 18px;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-pill);
}

.sec-hero__title {
  color: var(--white);
  font-size: clamp(40px, 5.4vw, 68px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin-bottom: 20px;
  max-width: 16ch;
}

.sec-hero__desc {
  color: rgba(255, 255, 255, 0.92);
  font-size: 16px;
  line-height: 1.7;
  max-width: 52ch;
  margin-bottom: 28px;
}

.sec-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.sec-hero__facts {
  list-style: none;
  margin: 36px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px 20px;
}
.sec-hero__facts li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--white);
}
.sec-hero__facts li span {
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
}
.sec-hero__facts li span small {
  font-size: 14px;
  font-weight: 500;
  margin-left: 2px;
}
.sec-hero__facts li small {
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
}

.sec-hero__media {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: 0 24px 60px -16px rgba(0, 0, 0, 0.45);
}
.sec-hero__media picture,
.sec-hero__media img {
  width: 100%;
  height: 100%;
  display: block;
}
.sec-hero__media img {
  object-fit: cover;
  object-position: 40% center;
}

/* Tablet: contain the stacked hero image (same fix as the apprenticeships
   sector blocks) so the full-width 4/5 portrait isn't overwhelming. */
@media (min-width: 600px) and (max-width: 899px) {
  .sec-hero__media {
    aspect-ratio: 16 / 9;
    width: 100%;
    max-width: 640px;
    margin-inline: auto;
  }
}

@media (max-width: 599.98px) {
  .sec-hero__title { font-size: clamp(36px, 9vw, 44px); }
  .sec-hero__facts { gap: 10px 12px; }
  .sec-hero__facts li span { font-size: 22px; }
  .sec-hero__facts li span small { font-size: 12px; }
  .sec-hero__facts li small { font-size: 11.5px; }
  .sec-hero__media { aspect-ratio: 4 / 3; }
}

/* =========================================================================
   SECTOR INTRO — feature grid
   ========================================================================= */
.sec-intro {
  background: var(--white);
  padding: clamp(56px, 7vw, 96px) 0;
}
.sec-intro__head {
  max-width: 760px;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.sec-intro__head h2 {
  font-size: clamp(28px, 3.6vw, 44px);
  margin-bottom: 18px;
  color: var(--navy-deep);
}
.sec-intro__lead {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
}

.sec-intro__grid {
  display: grid;
  gap: clamp(20px, 2.4vw, 32px);
  grid-template-columns: 1fr;
}
@media (min-width: 600px) { .sec-intro__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px){ .sec-intro__grid { grid-template-columns: repeat(4, 1fr); } }

.ifeature {
  position: relative;
  padding: 32px 28px 30px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ifeature:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px -22px rgba(10, 48, 80, 0.18);
  border-color: var(--sector-ring);
}
.ifeature__num {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--sector);
  background: var(--sector-tint);
  width: fit-content;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
}
.ifeature h3 {
  font-size: 18px;
  margin: 0;
  color: var(--navy-deep);
  line-height: 1.3;
}
.ifeature p {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-muted);
  margin: 0;
}

/* =========================================================================
   PATHWAY — dark band with three numbered steps
   ========================================================================= */
.pathway {
  background:
    radial-gradient(circle at 80% 12%, rgba(255,255,255,0.06) 0%, transparent 50%),
    linear-gradient(135deg, var(--sector-dark) 0%, var(--sector) 100%);
  color: var(--white);
  padding: clamp(64px, 8vw, 112px) 0;
  position: relative;
  overflow: hidden;
}
.pathway::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px) 0 0 / 24px 24px;
  pointer-events: none;
  opacity: 0.5;
}
.pathway > .container { position: relative; z-index: 1; }

.pathway__head {
  max-width: 720px;
  margin: 0 auto clamp(48px, 6vw, 80px);
  text-align: center;
}
.pathway__head h2 {
  color: var(--white);
  font-size: clamp(28px, 3.6vw, 44px);
  margin-bottom: 16px;
}
.pathway__head p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 16px;
  line-height: 1.7;
}

.pathway__steps {
  list-style: none;
  display: grid;
  align-items: start;
  gap: 24px;
  padding: 0;
  margin: 0;
  grid-template-columns: 1fr;
}
@media (min-width: 800px) {
  .pathway__steps {
    /* Flex so the pattern supports any number of steps + connectors */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
  }
  .pathway__step { flex: 1 1 0; min-width: 0; }
  .pathway__connect { flex: 0 0 40px; }
}

.pathway__step {
  text-align: center;
  padding: 8px 12px;
}
.pathway__step h3 {
  color: var(--white);
  font-size: 18px;
  font-weight: 700;
  margin: 18px 0 6px;
}
.pathway__step p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
}

.pathway__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--white);
  color: var(--sector);
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
  border: 4px solid rgba(255, 255, 255, 0.2);
  font-size: 22px;
}
.pathway__connect {
  display: none;
  height: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0) 100%);
  position: relative;
  align-self: center;
}
.pathway__connect::after {
  content: '';
  position: absolute;
  right: -4px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(255,255,255,0.7);
  border-top: 2px solid rgba(255,255,255,0.7);
  rotate: 45deg;
}
@media (min-width: 800px) {
  .pathway__connect { display: block; }
}

/* =========================================================================
   LEVELS — three full-width programme cards
   ========================================================================= */
.levels {
  background: var(--sector-soft);
  padding: clamp(56px, 7vw, 96px) 0;
  position: relative;
}
.levels__head {
  max-width: 720px;
  margin: 0 auto clamp(36px, 5vw, 56px);
  text-align: center;
}
.levels__head h2 {
  color: var(--navy-deep);
  font-size: clamp(28px, 3.6vw, 44px);
  margin-bottom: 14px;
}
.levels__head p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-muted);
}

.lvl {
  background: var(--white);
  border-radius: var(--radius-lg);
  margin-bottom: 28px;
  overflow: hidden;
  position: relative;
  box-shadow:
    0 24px 60px -32px rgba(10, 48, 80, 0.22),
    0 4px 14px -6px rgba(10, 48, 80, 0.08);
  transition: transform .35s ease, box-shadow .35s ease;
}
.lvl::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 6px;
  background: var(--sector);
}
.lvl:hover {
  transform: translateY(-3px);
  box-shadow:
    0 30px 70px -28px rgba(10, 48, 80, 0.28),
    0 8px 18px -8px rgba(10, 48, 80, 0.12);
}
.lvl:last-of-type { margin-bottom: 0; }

.lvl__head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: center;
  padding: clamp(28px, 3.5vw, 44px) clamp(28px, 4vw, 56px) 0;
}

.lvl__badge {
  width: 96px;
  height: 96px;
  border-radius: 24px;
  background: linear-gradient(135deg, var(--sector) 0%, var(--sector-dark) 100%);
  color: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  box-shadow: 0 10px 24px -10px var(--sector-ring);
  flex-shrink: 0;
}
.lvl__badge-num {
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}
.lvl__badge-label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0.9;
}

.lvl__title { display: flex; flex-direction: column; gap: 8px; }
.lvl__eyebrow {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sector);
  font-weight: 700;
  margin: 0;
}
.lvl__title h3 {
  color: var(--navy-deep);
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 700;
  line-height: 1.15;
  margin: 0;
}
.lvl__strap {
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 4px 0 0;
  max-width: 56ch;
}

.lvl__body {
  padding: clamp(20px, 3vw, 32px) clamp(28px, 4vw, 56px) clamp(28px, 4vw, 44px);
}
.lvl__summary {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--text);
  margin: 24px 0 28px;
  max-width: 72ch;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.lvl__cols {
  display: grid;
  gap: clamp(24px, 3vw, 40px);
  grid-template-columns: 1fr;
}
@media (min-width: 700px) {
  .lvl__cols { grid-template-columns: 1.4fr 1fr; }
}

.lvl__col h4 {
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy-deep);
  font-weight: 700;
  margin: 0 0 14px;
}
.lvl__col h4 + h4 { margin-top: 28px; }
.lvl__col ul + h4, .lvl__col p + h4 { margin-top: 22px; }  /* breathing room before 'Entry requirements' */
.lvl__col p {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-muted);
}

ul.ticks, ul.dots {
  list-style: none;
  padding: 0;
  margin: 0 0 4px;
  display: grid;
  gap: 10px;
}
ul.ticks li,
ul.dots li {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text);
  padding-left: 28px;
  position: relative;
}
ul.ticks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--sector-tint);
}
ul.ticks li::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 8px;
  width: 8px;
  height: 4px;
  border-left: 2px solid var(--sector);
  border-bottom: 2px solid var(--sector);
  transform: rotate(-45deg);
}
ul.dots li::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sector);
}

.lvl__cta {
  margin-top: clamp(24px, 3vw, 36px);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

@media (max-width: 599.98px) {
  .lvl__head {
    grid-template-columns: 1fr;
    gap: 18px;
    padding-bottom: 0;
  }
  .lvl__badge { width: 76px; height: 76px; border-radius: 18px; }
  .lvl__badge-num { font-size: 34px; }
  .lvl__title h3 { font-size: 24px; }
  .lvl__strap { font-size: 15px; }
  .lvl__summary { font-size: 15px; margin-top: 18px; padding-top: 18px; }
  .lvl::before { width: 4px; }
}

/* =========================================================================
   EMPLOYER CTA (light card, sits above accreditations)
   ========================================================================= */
.emp-cta {
  background: var(--white);
  padding: clamp(56px, 7vw, 96px) 0;
}
.emp-cta__card {
  background: linear-gradient(135deg, #f5f1e9 0%, #ffffff 100%);
  border-radius: var(--radius-lg);
  padding: clamp(36px, 5vw, 64px);
  box-shadow:
    0 30px 80px -32px rgba(10, 48, 80, 0.22),
    0 8px 22px -10px rgba(10, 48, 80, 0.08);
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  grid-template-columns: 1fr;
  align-items: center;
  border: 1px solid var(--sector-ring);
}
@media (min-width: 900px) {
  .emp-cta__card { grid-template-columns: 1.4fr 1fr; }
}
.emp-cta__card h2 {
  color: var(--navy-deep);
  font-size: clamp(28px, 3.2vw, 40px);
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}
.emp-cta__card p {
  color: var(--text);
  font-size: 15.5px;
  line-height: 1.7;
  max-width: 56ch;
}
.emp-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-self: start;
}
@media (min-width: 900px) {
  .emp-cta__actions { justify-self: end; }
}

/* =========================================================================
   EMPLOYERS PAGE (for-employers.php)
   ========================================================================= */

/* Navy ghost button (used on light backgrounds — also used by sector pages) */
.btn--navy {
  background: var(--navy-deep);
  color: var(--white);
}
.btn--navy:hover { background: #04182a; }
.btn--navy .btn__arrow { background: rgba(255, 255, 255, 0.22); }

/* Hero variant */
.emp-hero { padding-bottom: clamp(48px, 6vw, 80px); }
.emp-hero .hero__title { max-width: 16ch; }

/* ---------- Trust strip ---------- */
.emp-trust {
  background: var(--bg);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: clamp(28px, 4vw, 44px) 0;
}
.emp-trust__row {
  list-style: none;
  display: grid;
  gap: 24px;
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(2, 1fr);
  text-align: center;
}
@media (min-width: 700px) {
  .emp-trust__row { grid-template-columns: repeat(4, 1fr); }
}
.emp-trust__row li {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.emp-trust__num {
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 700;
  color: var(--navy-deep);
  line-height: 1;
  letter-spacing: -0.01em;
}
.emp-trust__label {
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
}

/* ---------- Why partner ---------- */
.emp-why {
  background: linear-gradient(135deg, var(--teal) 0%, var(--navy-deep) 70%);
  color: var(--white);
  padding: clamp(64px, 8vw, 112px) 0;
  position: relative;
  overflow: hidden;
}
.emp-why::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px) 0 0 / 24px 24px;
  pointer-events: none;
  opacity: 0.5;
}
.emp-why > .container { position: relative; z-index: 1; }

.emp-why__grid {
  display: grid;
  gap: clamp(36px, 5vw, 56px);
  grid-template-columns: 1fr;
  align-items: start;
}

.emp-why__head {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.emp-why__head h2 {
  color: var(--white);
  font-size: clamp(28px, 3.4vw, 40px);
  letter-spacing: -0.01em;
  margin: 0 auto 18px;
  max-width: 24ch;
}
.emp-why__head p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 15px;
  line-height: 1.7;
}

.emp-why__benefits {
  list-style: none;
  display: grid;
  gap: 18px;
  margin: 0;
  padding: 0;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .emp-why__benefits { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .emp-why__benefits { grid-template-columns: repeat(3, 1fr); }
}
.emp-why__benefits li {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 16px;
  align-items: start;
  padding: 20px 22px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(130, 192, 151, 0.25);
  border-radius: var(--radius-md);
  transition: transform .25s ease, background .25s ease, border-color .25s ease;
}
.emp-why__benefits li:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(119, 178, 140, 0.5);
  transform: translateY(-2px);
}
.emp-why__tick {
  display: inline-flex;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--green-gradient);
  color: var(--white);
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.emp-why__tick svg { width: 20px; height: 20px; }
.emp-why__benefits h3 {
  color: var(--white);
  font-size: 16px;
  font-weight: 700;
  margin: 2px 0 6px;
  line-height: 1.3;
}
.emp-why__benefits p {
  color: rgba(255, 255, 255, 0.82);
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0;
}

/* ---------- What we offer ---------- */
.emp-offer {
  background: var(--white);
  padding: clamp(64px, 8vw, 112px) 0;
}
.emp-offer__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(40px, 5vw, 64px);
}
.emp-offer__head h2 {
  color: var(--navy-deep);
  font-size: clamp(28px, 3.4vw, 42px);
  margin-bottom: 14px;
}
.emp-offer__head p {
  color: var(--text-muted);
  font-size: 15.5px;
  line-height: 1.7;
}

.emp-offer__grid {
  display: grid;
  gap: clamp(20px, 2.4vw, 32px);
  grid-template-columns: 1fr;
}
@media (min-width: 600px) { .emp-offer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px){ .emp-offer__grid { grid-template-columns: repeat(4, 1fr); } }

.emp-offer__card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 36px 28px 32px;
  text-align: left;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.emp-offer__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px -22px rgba(10, 48, 80, 0.18);
  border-color: rgba(119, 178, 140, 0.4);
}
.emp-offer__icon {
  position: relative;
  display: inline-flex;
  width: 56px;
  height: 56px;
  color: var(--navy-deep);
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
}
.emp-offer__icon::before {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--green-gradient);
  bottom: 8px;
  left: 8px;
  z-index: 0;
}
/* Vary the blob position to give cards visual rhythm */
.emp-offer__card:nth-child(2) .emp-offer__icon::before,
.emp-offer__card:nth-child(4) .emp-offer__icon::before,
.emp-offer__card:nth-child(7) .emp-offer__icon::before { bottom: auto; top: 8px; left: auto; right: 8px; }
.emp-offer__card:nth-child(3) .emp-offer__icon::before,
.emp-offer__card:nth-child(6) .emp-offer__icon::before { bottom: 8px; left: auto; right: 8px; }
.emp-offer__card:nth-child(5) .emp-offer__icon::before,
.emp-offer__card:nth-child(8) .emp-offer__icon::before { bottom: auto; top: 8px; left: 8px; }
.emp-offer__icon svg {
  position: relative;
  z-index: 1;
  width: 28px;
  height: 28px;
}
.emp-offer__card h3 {
  font-size: 18px;
  color: var(--navy-deep);
  margin: 0 0 10px;
}
.emp-offer__card p {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-muted);
  margin: 0;
}

/* ---------- Sectors we cover ---------- */
.emp-sectors {
  background: var(--bg);
  padding: clamp(64px, 8vw, 112px) 0;
}
.emp-sectors__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(40px, 5vw, 56px);
}
.emp-sectors__head h2 {
  color: var(--navy-deep);
  font-size: clamp(28px, 3.4vw, 42px);
  margin-bottom: 14px;
}
.emp-sectors__head p {
  color: var(--text-muted);
  font-size: 15.5px;
  line-height: 1.7;
}

.emp-sectors__grid {
  display: grid;
  gap: clamp(18px, 2vw, 24px);
  grid-template-columns: 1fr;
}
@media (min-width: 600px) { .emp-sectors__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px){ .emp-sectors__grid { grid-template-columns: repeat(5, 1fr); } }

.emp-sec {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 32px 26px 28px;
  border: 1px solid var(--line);
  color: var(--navy-deep);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  overflow: hidden;
}
.emp-sec::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--sec-colour, var(--green));
}
.emp-sec:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px -22px rgba(10, 48, 80, 0.20);
  border-color: var(--sec-colour, var(--green));
}
.emp-sec--culinary     { --sec-colour: #005695; }
.emp-sec--education    { --sec-colour: #4A8A67; }
.emp-sec--health       { --sec-colour: #1D6F73; }
.emp-sec--leadership   { --sec-colour: #0A3050; }
.emp-sec--safeguarding { --sec-colour: #014373; }

.emp-sec__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 6px;
}
.emp-sec__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.emp-sec h3 {
  font-size: 19px;
  margin: 0;
  color: var(--navy-deep);
}
.emp-sec p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
  flex: 1;
}
.emp-sec__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--sec-colour);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 6px;
}
.emp-sec__cta .btn__arrow {
  width: 24px;
  height: 24px;
  background: var(--sec-colour);
  color: var(--white);
}
.emp-sec__cta .btn__arrow::before { background: var(--white); }
.emp-sec:hover .emp-sec__cta .btn__arrow { transform: translateX(3px); }

/* ---------- How we work with you ---------- */
.emp-steps {
  background: var(--navy-deep);
  color: var(--white);
  padding: clamp(64px, 8vw, 112px) 0;
  position: relative;
  overflow: hidden;
}
.emp-steps::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px) 0 0 / 24px 24px;
  pointer-events: none;
}
.emp-steps > .container { position: relative; z-index: 1; }

.emp-steps__head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto clamp(40px, 5vw, 64px);
}
.emp-steps__head h2 {
  color: var(--white);
  font-size: clamp(28px, 3.4vw, 42px);
  margin-bottom: 14px;
  text-wrap: balance;
}
.emp-steps__head p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 15.5px;
  line-height: 1.7;
}

.emp-steps__list {
  --num-size: 44px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin: 0;
  padding: 0;
  position: relative;
  counter-reset: empstep;
}
/* Wider markers for the 4-digit year timeline */
.emp-steps__list--years { --num-size: 54px; }
/* Glowing connector line */
.emp-steps__list::before {
  content: '';
  position: absolute;
  top: 12px;
  bottom: 12px;
  width: 2px;
  left: calc(var(--num-size) / 2);
  transform: translateX(-1px);
  background: linear-gradient(
    180deg,
    rgba(119, 178, 140, 0) 0%,
    rgba(119, 178, 140, 0.45) 12%,
    rgba(119, 178, 140, 0.45) 88%,
    rgba(119, 178, 140, 0) 100%
  );
  z-index: 0;
}

.emp-step {
  position: relative;
  display: grid;
  grid-template-columns: var(--num-size) 1fr;
  align-items: start;
  column-gap: 20px;
  background: transparent;
  border: 0;
  padding: 0;
  transition: none;
}
.emp-step:hover {
  transform: none;
  background: transparent;
  border-color: transparent;
}

.emp-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--num-size);
  height: var(--num-size);
  border-radius: 50%;
  background: var(--green-gradient);
  color: var(--white);
  font-weight: 700;
  font-size: 17px;
  font-family: 'Inter', sans-serif;
  letter-spacing: -0.01em;
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 5px var(--navy-deep);
  transition: box-shadow .3s ease, transform .3s ease;
}
.emp-step:hover .emp-step__num {
  box-shadow: 0 0 0 5px var(--navy-deep), 0 0 28px rgba(119, 178, 140, 0.55);
  transform: scale(1.06);
}

.emp-step h3 {
  font-size: 18px;
  margin: 8px 0 6px;
  color: var(--white);
}
.emp-step p {
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
}

/* Mobile: keep the number in column 1 (spanning both rows) and stack the
   heading + text in column 2. Without this, grid auto-placement drops the
   paragraph into the narrow number column. */
.emp-step__num { grid-column: 1; grid-row: 1 / span 2; }
.emp-step h3   { grid-column: 2; grid-row: 1; }
.emp-step p    { grid-column: 2; grid-row: 2; }

/* Desktop: zigzag timeline with centred line */
@media (min-width: 820px) {
  .emp-steps__list { gap: 36px; max-width: 960px; margin-inline: auto; }
  .emp-steps__list::before { left: 50%; top: 22px; bottom: 22px; }

  .emp-step {
    grid-template-columns: 1fr var(--num-size) 1fr;
    column-gap: 40px;
    align-items: center;
  }
  .emp-step__num {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
  }
  .emp-step h3 {
    grid-column: 1;
    grid-row: 1;
    text-align: right;
    align-self: end;
    margin: 0 0 4px;
  }
  .emp-step p {
    grid-column: 1;
    grid-row: 2;
    text-align: right;
    align-self: start;
    max-width: 38ch;
    margin-left: auto;
  }
  .emp-step:nth-child(even) h3 {
    grid-column: 3;
    text-align: left;
  }
  .emp-step:nth-child(even) p {
    grid-column: 3;
    text-align: left;
    margin-left: 0;
    margin-right: auto;
  }
}

/* ---------- Funding callout ---------- */
.emp-funding {
  background: var(--bg);
  padding: clamp(56px, 7vw, 96px) 0;
}
.emp-funding__card {
  background: linear-gradient(135deg, #f5f1e9 0%, #ffffff 100%);
  border-radius: var(--radius-lg);
  padding: clamp(36px, 5vw, 64px);
  display: grid;
  gap: clamp(32px, 4vw, 56px);
  grid-template-columns: 1fr;
  align-items: center;
  box-shadow: 0 30px 60px -28px rgba(10, 48, 80, 0.18);
}
@media (min-width: 900px) {
  .emp-funding__card { grid-template-columns: 1.3fr 1fr; }
}
.emp-funding__card h2 {
  color: var(--navy-deep);
  font-size: clamp(26px, 3.2vw, 38px);
  margin-bottom: 14px;
}
.emp-funding__card p {
  color: var(--text);
  font-size: 15.5px;
  line-height: 1.7;
  margin-bottom: 22px;
  max-width: 52ch;
}
.emp-funding__media {
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 5 / 4;
  box-shadow: 0 16px 36px -16px rgba(10, 48, 80, 0.25);
}
.emp-funding__media img {
  width: 100%; height: 100%;
  object-fit: cover;
}

/* ---------- Impact on your organisation ---------- */
.emp-impact {
  background: var(--white);
  padding: clamp(56px, 7vw, 96px) 0;
}
.emp-impact__grid {
  display: grid;
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .emp-impact__grid { grid-template-columns: 1fr 1.1fr; }
}
.emp-impact__media {
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 5 / 6;
  max-width: 460px;
  margin-inline: auto;
  box-shadow: 0 20px 48px -16px rgba(10, 48, 80, 0.22);
}
.emp-impact__media img {
  width: 100%; height: 100%; object-fit: cover;
}
.emp-impact__copy .eyebrow {
  color: var(--green-dark);
  background: rgba(119, 178, 140, 0.14);
}
.emp-impact__copy h2 {
  color: var(--navy-deep);
  font-size: clamp(26px, 3.2vw, 38px);
  letter-spacing: -0.01em;
  margin-bottom: 20px;
  max-width: 22ch;
}
.emp-impact__copy p:not(.eyebrow) {
  color: var(--text);
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 16px;
  max-width: 60ch;
}
.emp-impact__copy p:not(.eyebrow):last-child { margin-bottom: 0; }

/* Tablet: match the eligibility (emp-funding) and the section underneath
   (emp-impact) images so they share the same aspect ratio and size while
   stacked. Desktop (>=900px) and phone (<600px) layouts are left as-is. */
@media (min-width: 600px) and (max-width: 899px) {
  .emp-funding__media,
  .emp-impact__media {
    aspect-ratio: 5 / 4;
    width: 100%;
    max-width: 560px;
    margin-inline: auto;
  }
}

/* Stacked layout: show the image above the text on the eligibility section so
   it matches the section underneath (which is already image-first). */
@media (max-width: 899px) {
  .emp-funding__media { order: -1; }
}

/* Variant of the ticks list that fits an article block */
ul.ticks.ticks--inline {
  margin: 0 0 28px;
}
ul.ticks.ticks--inline li::before {
  background: rgba(119, 178, 140, 0.18);
}
ul.ticks.ticks--inline li::after {
  border-left-color: var(--green-dark);
  border-bottom-color: var(--green-dark);
}

/* ---------- Trusted by ---------- */
.emp-trusted-by {
  background: var(--bg);
  padding: clamp(40px, 6vw, 64px) 0;
}
.emp-trusted-by__label {
  text-align: center;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 700;
  margin: 0 0 28px;
}
.emp-trusted-by .logo-marquee {
  background: transparent;
  padding: 0;
}
.emp-trusted-by .logo-marquee::before,
.emp-trusted-by .logo-marquee::after {
  background: linear-gradient(90deg, var(--bg), transparent);
}
.emp-trusted-by .logo-marquee::after {
  background: linear-gradient(-90deg, var(--bg), transparent);
}
.emp-trusted-by .logo-marquee__track img { height: 44px; }

/* ---------- FAQ ---------- */
.emp-faq {
  background: var(--white);
  padding: clamp(64px, 8vw, 112px) 0;
}
.emp-faq__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(36px, 4vw, 52px);
}
.emp-faq__head h2 {
  color: var(--navy-deep);
  font-size: clamp(26px, 3.2vw, 38px);
}
.emp-faq__list {
  max-width: 820px;
  margin: 0 auto;
  display: grid;
  gap: 14px;
}
@media (min-width: 900px) {
  .emp-faq__list--two-col {
    max-width: 1200px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 20px;
    align-items: start;
  }
}
.emp-faq__item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.emp-faq__item[open] {
  border-color: var(--green);
  box-shadow: 0 16px 36px -18px rgba(10, 48, 80, 0.15);
}
.emp-faq__item > summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-weight: 600;
  font-size: 16px;
  color: var(--navy-deep);
  outline: none;
}
.emp-faq__item > summary::-webkit-details-marker { display: none; }
.emp-faq__item > summary::marker { display: none; }
.emp-faq__item > summary:hover { color: var(--green-dark); }
.emp-faq__chev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(119, 178, 140, 0.14);
  position: relative;
  flex-shrink: 0;
  transition: background .25s ease, transform .3s ease;
}
.emp-faq__chev::before {
  content: '';
  width: 8px; height: 8px;
  border-right: 2px solid var(--green-dark);
  border-bottom: 2px solid var(--green-dark);
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform .25s ease;
}
.emp-faq__item[open] .emp-faq__chev {
  background: var(--green-gradient);
}
.emp-faq__item[open] .emp-faq__chev::before {
  border-right-color: var(--white);
  border-bottom-color: var(--white);
  transform: rotate(-135deg) translate(-1px, -1px);
}
.emp-faq__body {
  padding: 0 24px 22px;
}
.emp-faq__body p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text);
  margin: 0;
  max-width: 70ch;
}

/* ---------- Final CTA ---------- */
.emp-final-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: var(--white);
  padding: clamp(72px, 9vw, 132px) 0;
}
/* full-bleed photo background */
.emp-final-cta__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: 65% 30%;
}
/* gradient overlay: solid navy on the left for legible text,
   fading to reveal the photo on the right so the whole panel reads as one */
.emp-final-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg,
      var(--navy-deep) 0%,
      rgba(10, 48, 80, 0.94) 34%,
      rgba(12, 58, 88, 0.72) 58%,
      rgba(29, 111, 115, 0.40) 100%),
    linear-gradient(0deg, rgba(10, 48, 80, 0.45) 0%, transparent 45%);
}
/* faint brand-green wash bleeding up from the bottom-left for depth */
.emp-final-cta::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: -120px; bottom: -160px;
  width: 460px; height: 460px;
  border-radius: 50%;
  background: rgba(119, 178, 140, 0.28);
  filter: blur(90px);
  pointer-events: none;
}
.emp-final-cta__inner {
  position: relative;
  max-width: 620px;
  padding-left: 24px;
}
.emp-final-cta__inner::before {
  content: '';
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 4px;
  border-radius: 4px;
  background: linear-gradient(var(--green), var(--teal));
}
.emp-final-cta__eyebrow {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 12px;
}
.emp-final-cta h2 {
  color: var(--white);
  font-size: clamp(28px, 3.8vw, 46px);
  line-height: 1.12;
  margin-bottom: 16px;
  max-width: 18ch;
}
.emp-final-cta__lead {
  color: rgba(255, 255, 255, 0.88);
  font-size: 15.5px;
  line-height: 1.7;
  max-width: 52ch;
  margin-bottom: 30px;
}
.emp-final-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
/* On narrow screens there's no room for a side-by-side photo,
   so darken the overlay and let the image read as a subtle backdrop. */
@media (max-width: 720px) {
  .emp-final-cta__bg { background-position: 60% 28%; }
  .emp-final-cta::before {
    background:
      linear-gradient(160deg,
        rgba(10, 48, 80, 0.86) 0%,
        rgba(10, 48, 80, 0.92) 55%,
        rgba(29, 111, 115, 0.80) 100%);
  }
}

/* Final CTA buttons — "fill sweep + flip" hover (scoped to this section).
   A colour wipes in from the left: the green button deepens, and the ghost
   button flips to solid white with navy text + arrow. */
.emp-final-cta__actions .btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;          /* contain the fill layer behind text + arrow */
}
.emp-final-cta__actions .btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .4s cubic-bezier(.65, 0, .35, 1);
}
.emp-final-cta__actions .btn:hover::before { transform: scaleX(1); }

/* Green: keep the base green and wipe a deeper green over it */
.emp-final-cta__actions .btn--green:hover { background: var(--green-gradient); }
.emp-final-cta__actions .btn--green::before { background: var(--green-gradient-hover); }

/* Ghost: wipe solid white in, flip the text and arrow to navy */
.emp-final-cta__actions .btn--ghost-white::before { background: var(--white); }
.emp-final-cta__actions .btn--ghost-white:hover { background: transparent; color: var(--navy-deep); }
.emp-final-cta__actions .btn--ghost-white:hover .btn__arrow { border-color: var(--navy-deep); }
.emp-final-cta__actions .btn--ghost-white:hover .btn__arrow::before { background: var(--navy-deep); }

/* =================================================================
   FOR LEARNERS PAGE
   ================================================================= */

.lrn-hero { padding-bottom: clamp(48px, 6vw, 80px); }
.lrn-hero .hero__title { max-width: 16ch; }

/* Eyebrow accent on the impact-style support section */
.lrn-support .emp-impact__copy .eyebrow {
  color: var(--green-dark);
  background: rgba(119, 178, 140, 0.14);
}

/* ---------- Real feedback from real learners ---------- */
.lrn-stories {
  background: var(--bg);
  padding: clamp(64px, 8vw, 112px) 0;
}
.lrn-stories__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(36px, 4vw, 56px);
}
.lrn-stories__head h2 {
  color: var(--navy-deep);
  font-size: clamp(28px, 3.4vw, 42px);
}
.lrn-stories__grid {
  display: grid;
  gap: clamp(20px, 2.4vw, 32px);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .lrn-stories__grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .lrn-stories__grid { grid-template-columns: repeat(3, 1fr); }
}
.lrn-story {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 36px 28px 28px;
  margin: 0;
  display: flex;
  flex-direction: column;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.lrn-story:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px -22px rgba(10, 48, 80, 0.18);
  border-color: rgba(119, 178, 140, 0.4);
}
.lrn-story__quote {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(119, 178, 140, 0.16);
  color: var(--green-dark);
  margin-bottom: 18px;
}
.lrn-story__quote svg { width: 22px; height: 22px; }
.lrn-story blockquote {
  margin: 0 0 22px;
  padding: 0;
  border: 0;
  flex: 1;
}
.lrn-story blockquote p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text);
  margin: 0;
}
.lrn-story figcaption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.lrn-story figcaption strong {
  font-size: 15px;
  color: var(--navy-deep);
  font-weight: 700;
}
.lrn-story figcaption span {
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  text-transform: uppercase;
  font-weight: 600;
}

/* =================================================================
   FUNDING PAGE
   ================================================================= */

.fund-hero { padding-bottom: clamp(48px, 6vw, 80px); }
.fund-hero .hero__title { max-width: 16ch; }

/* ---------- Two funding routes split ---------- */
.fund-routes {
  background: var(--white);
  padding: clamp(64px, 8vw, 112px) 0;
}
.fund-routes__head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto clamp(36px, 4vw, 56px);
}
.fund-routes__head h2 {
  color: var(--navy-deep);
  font-size: clamp(28px, 3.4vw, 42px);
  margin-bottom: 16px;
}
.fund-routes__head p {
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.7;
}
.fund-routes__grid {
  display: grid;
  gap: clamp(20px, 2.4vw, 32px);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .fund-routes__grid { grid-template-columns: 1fr 1fr; }
}
.fund-route {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 3.5vw, 44px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  overflow: hidden;
}
.fund-route::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: var(--route-accent, var(--green));
}
.fund-route:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px -20px rgba(10, 48, 80, 0.22);
  border-color: transparent;
}
.fund-route--levy { --route-accent: var(--navy); }
.fund-route--sme  { --route-accent: var(--green); }

.fund-route__tag {
  display: inline-block;
  align-self: flex-start;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: rgba(0, 86, 149, 0.10);
  color: var(--navy);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.fund-route__tag--alt {
  background: rgba(119, 178, 140, 0.16);
  color: var(--green-dark);
}
.fund-route h3 {
  color: var(--navy-deep);
  font-size: clamp(22px, 2.4vw, 28px);
  margin: 0;
}
.fund-route__lead {
  color: var(--text);
  font-size: 15.5px;
  line-height: 1.7;
  margin: 0;
}
.fund-route .ticks { margin: 4px 0 8px; }
.fund-route .ticks li::before { background: rgba(119, 178, 140, 0.18); }
.fund-route .ticks li::after {
  border-left-color: var(--green-dark);
  border-bottom-color: var(--green-dark);
}
.fund-route .btn {
  align-self: flex-start;
  margin-top: auto;
}

/* ---------- Levy explainer (dark, statty) ---------- */
.fund-levy {
  background: linear-gradient(140deg, var(--navy-deep) 0%, #022a4a 100%);
  color: var(--white);
  padding: clamp(64px, 8vw, 112px) 0;
  position: relative;
  overflow: hidden;
}
.fund-levy::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 12%, rgba(119, 178, 140, 0.20) 0%, transparent 50%),
              radial-gradient(circle at 10% 88%, rgba(0, 86, 149, 0.35) 0%, transparent 55%);
  pointer-events: none;
}
.fund-levy > .container { position: relative; z-index: 1; }
.fund-levy__grid {
  display: grid;
  gap: clamp(36px, 5vw, 64px);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 960px) {
  .fund-levy__grid { grid-template-columns: 1.15fr 1fr; }
}
.fund-levy__copy h2 {
  color: var(--white);
  font-size: clamp(26px, 3vw, 36px);
  margin-bottom: 18px;
}
.fund-levy__copy p {
  color: rgba(255, 255, 255, 0.82);
  font-size: 15.5px;
  line-height: 1.75;
  margin-bottom: 14px;
  max-width: 56ch;
}
.fund-levy__facts {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr 1fr;
}
.fund-levy__facts li {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  padding: 22px 22px 24px;
  backdrop-filter: blur(6px);
  transition: transform .25s ease, background .25s ease;
}
.fund-levy__facts li:hover {
  background: rgba(255, 255, 255, 0.10);
  transform: translateY(-3px);
}
.fund-levy__num {
  display: block;
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--green);
  margin-bottom: 8px;
  line-height: 1;
}
.fund-levy__lbl {
  display: block;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
}

/* ---------- What funding covers (do / don't) ---------- */
.fund-covers {
  background: var(--bg);
  padding: clamp(64px, 8vw, 112px) 0;
}
.fund-covers__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(36px, 4vw, 56px);
}
.fund-covers__head h2 {
  color: var(--navy-deep);
  font-size: clamp(28px, 3.4vw, 42px);
  margin-bottom: 14px;
}
.fund-covers__head p {
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.7;
}
.fund-covers__grid {
  display: grid;
  gap: clamp(20px, 2.4vw, 32px);
  grid-template-columns: 1fr;
}
@media (min-width: 800px) {
  .fund-covers__grid { grid-template-columns: 1fr 1fr; }
}
.fund-covers__card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 3.5vw, 40px);
  border: 1px solid var(--line);
  transition: transform .25s ease, box-shadow .25s ease;
}
.fund-covers__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -20px rgba(10, 48, 80, 0.18);
}
.fund-covers__tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 8px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.fund-covers__tag svg {
  width: 28px; height: 28px;
  border-radius: 50%;
  padding: 5px;
  flex-shrink: 0;
}
.fund-covers__card--yes .fund-covers__tag {
  background: rgba(119, 178, 140, 0.14);
  color: var(--green-dark);
}
.fund-covers__card--yes .fund-covers__tag svg {
  background: var(--green-gradient);
  color: var(--white);
  stroke: var(--white);
}
.fund-covers__card--no .fund-covers__tag {
  background: rgba(122, 31, 43, 0.10);
  color: var(--red);
}
.fund-covers__card--no .fund-covers__tag svg {
  background: var(--red);
  color: var(--white);
  stroke: var(--white);
}
.fund-covers__card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}
.fund-covers__card li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text);
}
.fund-covers__card li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px; height: 8px;
  border-radius: 50%;
}
.fund-covers__card--yes li::before { background: var(--green); }
.fund-covers__card--no  li::before { background: var(--red); }

/* ---------- Incentives grid ---------- */
.fund-incentives {
  background: var(--white);
  padding: clamp(64px, 8vw, 112px) 0;
}
.fund-incentives__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(36px, 4vw, 56px);
}
.fund-incentives__head h2 {
  color: var(--navy-deep);
  font-size: clamp(28px, 3.4vw, 42px);
  margin-bottom: 14px;
}
.fund-incentives__head p {
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.7;
}
.fund-incentives__grid {
  display: grid;
  gap: clamp(20px, 2.4vw, 28px);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .fund-incentives__grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .fund-incentives__grid { grid-template-columns: repeat(4, 1fr); }
}
.fund-incentive {
  background: linear-gradient(160deg, #f7fbf2 0%, #ffffff 70%);
  border: 1px solid rgba(119, 178, 140, 0.25);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 32px);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fund-incentive:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -20px rgba(119, 178, 140, 0.28);
  border-color: var(--green);
}
.fund-incentive__num {
  display: block;
  font-size: clamp(30px, 3.4vw, 40px);
  font-weight: 800;
  color: var(--green-dark);
  letter-spacing: -0.02em;
  line-height: 1;
}
.fund-incentive h3 {
  color: var(--navy-deep);
  font-size: 18px;
  margin: 0;
  line-height: 1.3;
}
.fund-incentive p {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text);
  margin: 0;
}

/* =========================================================================
   RESOURCES PAGE
   ========================================================================= */

/* ---- Audience split (two paths) ---- */
.res-paths {
  padding: clamp(48px, 6vw, 80px) 0;
}
.res-paths__grid {
  display: grid;
  gap: clamp(20px, 2.4vw, 32px);
  grid-template-columns: 1fr;
}
@media (min-width: 760px) { .res-paths__grid { grid-template-columns: 1fr 1fr; } }

.res-path {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 280px;
  padding: 32px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: var(--white);
  isolation: isolate;
  transition: transform .35s ease, box-shadow .35s ease;
}
.res-path:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 56px -24px rgba(10, 48, 80, 0.45);
}
.res-path__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.res-path::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(10,48,80,0.10) 0%, rgba(10,48,80,0.78) 100%);
}
.res-path--employers::after { background: linear-gradient(180deg, rgba(0,86,149,0.15) 0%, rgba(1,67,115,0.85) 100%); }
.res-path--learners::after  { background: linear-gradient(180deg, rgba(45,95,63,0.15) 0%, rgba(95,162,56,0.82) 100%); }
.res-path__eyebrow {
  display: inline-block;
  align-self: flex-start;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.18);
  margin-bottom: 14px;
}
.res-path h2 { color: var(--white); font-size: 30px; margin-bottom: 8px; }
.res-path p { color: rgba(255,255,255,0.92); margin-bottom: 20px; max-width: 42ch; }
.res-path__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.res-path__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.28);
  transition: background .25s ease;
}
.res-path__chip:hover { background: rgba(255,255,255,0.30); }

/* ---- Article library ---- */
.res-lib { padding: clamp(56px, 7vw, 96px) 0; }
.res-lib__head {
  max-width: 720px;
  margin-bottom: clamp(28px, 3vw, 40px);
}
.res-lib__head h2 { margin-bottom: 14px; }
.res-lib__head p { color: var(--text-muted); font-size: 17px; }

/* Featured article */
.res-feature {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--white);
  margin-bottom: clamp(32px, 4vw, 48px);
  transition: transform .35s ease, box-shadow .35s ease;
}
.res-feature:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -28px rgba(10,48,80,0.28); }
@media (min-width: 860px) { .res-feature { grid-template-columns: 1.15fr 1fr; } }
.res-feature__media { position: relative; min-height: 240px; }
.res-feature__media img { width: 100%; height: 100%; object-fit: cover; }
.res-feature__flag {
  position: absolute;
  top: 18px;
  left: 18px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--green-gradient);
  color: var(--white);
}
.res-feature__body { padding: clamp(28px, 3vw, 44px); display: flex; flex-direction: column; }
.res-feature__meta { display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--text-muted); margin-bottom: 14px; flex-wrap: wrap; }
.res-feature__body h3 { font-size: 30px; margin-bottom: 14px; }
.res-feature__body p { color: var(--text-muted); margin-bottom: 22px; }
.res-feature__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--navy);
}
.res-feature__cta .btn__arrow { background: var(--navy); }

/* Filter chips */
.res-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: clamp(24px, 3vw, 36px);
}
.res-filter {
  font-size: 13.5px;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all .25s ease;
}
.res-filter:hover { border-color: var(--navy); color: var(--navy); }
.res-filter.is-active { background: var(--navy); border-color: var(--navy); color: var(--white); }
.res-filter__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--chip, var(--green)); }

/* Article grid */
.res-grid {
  display: grid;
  gap: clamp(20px, 2.4vw, 30px);
  grid-template-columns: 1fr;
}
@media (min-width: 620px) { .res-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px){ .res-grid { grid-template-columns: repeat(3, 1fr); } }

.res-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.res-card.is-hidden { display: none; }
.res-card:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -22px rgba(10,48,80,0.20); border-color: rgba(119,178,140,0.4); }
.res-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.res-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.res-card:hover .res-card__media img { transform: scale(1.05); }
.res-card__tag {
  position: absolute;
  top: 14px;
  left: 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.92);
  color: var(--cat, var(--navy-deep));
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.res-card__tag::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--cat, var(--navy-deep)); }
.res-card__body { padding: 22px 22px 26px; display: flex; flex-direction: column; flex: 1; }
.res-card__meta { font-size: 12.5px; color: var(--text-muted); margin-bottom: 10px; }
.res-card__body h3 { font-size: 20px; line-height: 1.3; margin-bottom: 10px; }
.res-card__body p { font-size: 14.5px; color: var(--text-muted); margin-bottom: 18px; }
.res-card__cta { margin-top: auto; font-size: 14px; font-weight: 600; color: var(--navy); display: inline-flex; align-items: center; gap: 7px; }
.res-card__cta .btn__arrow { background: var(--navy); }

.res-empty {
  display: none;
  text-align: center;
  padding: 48px 0;
  color: var(--text-muted);
}
.res-empty.is-shown { display: block; }

/* ---- Downloadable guides ---- */
.res-guides {
  padding: clamp(56px, 7vw, 96px) 0;
  background: var(--bg);
}
.res-guides__head { max-width: 720px; margin-bottom: clamp(28px, 3vw, 40px); }
.res-guides__head h2 { margin-bottom: 14px; }
.res-guides__head p { color: var(--text-muted); font-size: 17px; }
.res-guides__grid {
  display: grid;
  gap: clamp(18px, 2vw, 26px);
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .res-guides__grid { grid-template-columns: 1fr 1fr; } }
.res-guide {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 24px;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.res-guide:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -22px rgba(10,48,80,0.18); border-color: rgba(119,178,140,0.4); }
.res-guide__icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,86,149,0.10);
  color: var(--navy);
}
.res-guide__icon svg { width: 24px; height: 24px; }
.res-guide__body { flex: 1; }
.res-guide__kicker { font-size: 11.5px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: var(--green-dark); margin-bottom: 6px; display: block; }
.res-guide__body h3 { font-size: 19px; margin-bottom: 6px; }
.res-guide__body p { font-size: 14px; color: var(--text-muted); margin-bottom: 14px; }
.res-guide__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
.res-guide__link { font-size: 13.5px; font-weight: 600; color: var(--navy); display: inline-flex; align-items: center; gap: 7px; transition: color .2s ease; }
.res-guide__link svg { width: 15px; height: 15px; }
.res-guide__link:hover { color: var(--green-dark); }
.res-guide__link--view { color: var(--green-dark); }
.res-guide__link--view:hover { color: var(--navy); }

/* ---- Glossary ---- */
.res-glossary { padding: clamp(56px, 7vw, 96px) 0; }
.res-glossary__head { max-width: 720px; margin-bottom: clamp(24px, 3vw, 36px); }
.res-glossary__head h2 { margin-bottom: 14px; }
.res-glossary__head p { color: var(--text-muted); font-size: 17px; }
.res-glossary__grid {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--line);
}
@media (min-width: 760px) { .res-glossary__grid { grid-template-columns: 1fr 1fr; column-gap: clamp(32px, 4vw, 64px); } }
.res-term {
  border-bottom: 1px solid var(--line);
  padding: 20px 0;
}
.res-term dt { font-weight: 700; color: var(--navy-deep); font-size: 16px; margin-bottom: 5px; }
.res-term dd { font-size: 14.5px; color: var(--text-muted); }

/* ---- Newsletter ---- */
.res-news { padding: 0 0 clamp(56px, 7vw, 96px); }
.res-news__card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  padding: clamp(36px, 5vw, 64px);
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: var(--white);
  display: grid;
  gap: 28px;
  align-items: center;
}
@media (min-width: 860px) { .res-news__card { grid-template-columns: 1.1fr 1fr; } }
.res-news__card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 88% 12%, rgba(119,178,140,0.30) 0%, transparent 45%);
  pointer-events: none;
}
.res-news__copy { position: relative; z-index: 1; }
.res-news__copy h2 { color: var(--white); margin-bottom: 12px; }
.res-news__copy p { color: rgba(255,255,255,0.88); max-width: 46ch; }
.res-news__form { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 12px; }
.res-news__row { display: flex; gap: 10px; flex-wrap: wrap; }
.res-news__input {
  flex: 1;
  min-width: 200px;
  padding: 14px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.12);
  color: var(--white);
  font-size: 15px;
}
.res-news__input::placeholder { color: rgba(255,255,255,0.7); }
.res-news__input:focus { outline: 2px solid var(--green); background: rgba(255,255,255,0.18); }
.res-news__note { font-size: 12.5px; color: rgba(255,255,255,0.7); }
.res-news__note a { text-decoration: underline; }

/* =========================================================================
   CONTACT PAGE
   ========================================================================= */
.con-main { padding: clamp(48px, 6vw, 80px) 0 clamp(56px, 7vw, 96px); }
.con-wrap {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 920px) { .con-wrap { grid-template-columns: 0.85fr 1.15fr; } }

/* ---- Left: contact methods ---- */
.con-info__head { margin-bottom: clamp(20px, 2.5vw, 28px); }
.con-info__head h2 { font-size: 30px; margin-bottom: 12px; }
.con-info__head p { color: var(--text-muted); }

.con-methods { display: flex; flex-direction: column; gap: 16px; }
.con-method {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
a.con-method:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -22px rgba(10,48,80,0.18); border-color: rgba(119,178,140,0.4); }
.con-method__icon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,86,149,0.10);
  color: var(--navy);
}
.con-method__icon svg { width: 22px; height: 22px; }
.con-method__body h3 { font-size: 16px; margin-bottom: 4px; }
.con-method__body p, .con-method__body a { font-size: 14.5px; color: var(--text-muted); }
.con-method__body strong { color: var(--navy-deep); font-weight: 600; }

.con-social { display: flex; gap: 10px; margin-top: 24px; }
.con-social a {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--navy-deep);
  transition: all .25s ease;
}
.con-social a:hover { background: var(--navy); color: var(--white); border-color: var(--navy); }
.con-social svg { width: 18px; height: 18px; fill: currentColor; }

/* ---- Right: form card ---- */
.con-form-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 44px);
  box-shadow: 0 30px 60px -34px rgba(10,48,80,0.20);
}
.con-form-card h2 { font-size: 28px; margin-bottom: 8px; }
.con-form-card > p { color: var(--text-muted); margin-bottom: 26px; }

.con-form { display: grid; gap: 18px; }
.con-form__row { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .con-form__row { grid-template-columns: 1fr 1fr; } }

.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: 13.5px; font-weight: 600; color: var(--navy-deep); }
.field label .req { color: var(--green-dark); }
.field input,
.field select,
.field textarea {
  font-family: inherit;
  font-size: 15px;
  color: var(--text);
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  width: 100%;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.field textarea { resize: vertical; min-height: 130px; }
.field select { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235a6776' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 42px;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--navy);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(0,86,149,0.12);
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-muted); }

.con-consent { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--text-muted); }
.con-consent input { margin-top: 3px; width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--green); }
.con-consent a { text-decoration: underline; }
.con-form__submit { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
/* Honeypot field: off-screen for people, visible to form-filling bots. */
.con-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.con-form__note { font-size: 12.5px; color: var(--text-muted); }
.con-form__note.is-error { color: #b42318; font-weight: 600; }
.con-form__note.is-success { color: var(--green-dark); font-weight: 600; }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: #b42318; box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.12); }
.field__error { display: block; font-size: 12.5px; color: #b42318; margin-top: 4px; }
.con-consent.is-invalid > span { color: #b42318; }
.con-consent .field__error { display: block; width: 100%; font-size: 12.5px; color: #b42318; margin-top: 4px; }

/* ---- Departments ---- */
.con-depts { padding: clamp(48px, 6vw, 80px) 0; background: var(--bg); }
.con-depts__head { max-width: 640px; margin-bottom: clamp(24px, 3vw, 36px); }
.con-depts__head h2 { margin-bottom: 12px; }
.con-depts__head p { color: var(--text-muted); font-size: 17px; }
.con-depts__grid {
  display: grid;
  gap: clamp(18px, 2vw, 26px);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .con-depts__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px){ .con-depts__grid { grid-template-columns: repeat(4, 1fr); } }
.con-dept {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 26px 24px;
}
.con-dept h3 { font-size: 18px; margin-bottom: 8px; }
.con-dept p { font-size: 14px; color: var(--text-muted); margin-bottom: 14px; }
.con-dept a { font-size: 14px; font-weight: 600; color: var(--navy); display: inline-flex; align-items: center; gap: 7px; word-break: break-word; }

/* ---- Map ---- */
.con-map { line-height: 0; }
.con-map iframe {
  width: 100%;
  height: clamp(320px, 42vw, 460px);
  border: 0;
  display: block;
  filter: grayscale(0.2) contrast(1.02);
}

/* =========================================================================
   LEGAL / POLICY PAGES — readable prose column
   ========================================================================= */
.legal { padding: clamp(36px, 5vw, 64px) 0 clamp(56px, 8vw, 96px); }
.legal__inner { max-width: 760px; margin-inline: auto; }
.legal__updated { color: var(--text-muted); font-size: 14px; margin: 0 0 36px; }
.legal h2 {
  font-size: clamp(22px, 3vw, 28px);
  line-height: 1.25;
  margin: 44px 0 14px;
}
.legal > .legal__inner > h2:first-of-type { margin-top: 0; }
.legal h3 { font-size: clamp(18px, 2.4vw, 21px); margin: 28px 0 10px; }
.legal p { color: var(--text); line-height: 1.75; margin: 0 0 16px; }
.legal ul { margin: 0 0 16px; padding-left: 22px; list-style: disc; }
.legal li { margin-bottom: 8px; line-height: 1.7; }
.legal a { color: var(--navy); text-decoration: underline; }
.legal a:hover { color: var(--green-dark); }
.legal strong { color: var(--navy-deep); }
.legal__contact {
  margin-top: 40px;
  padding: clamp(20px, 3vw, 28px);
  background: var(--bg);
  border-radius: var(--radius-md);
}
.legal__contact p { margin-bottom: 6px; }

/* ---------- PRINT ---------- */
@media print {
  .announce, .nav__cta, .nav__toggle, .mobile-menu, .tsl__nav, .culinary, .academy { display: none; }
  body { color: #000; background: #fff; }
  .site-footer, .feedback, .trusted, .impact { background: #fff !important; color: #000 !important; }
  #cc-root { display: none !important; }
}

/* =========================================================================
   Cookie consent — banner + preferences modal (matches TLC brand tokens)
   ========================================================================= */
.cc-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- Consent dialog (blocking: stays until the visitor makes a choice) ---- */
html.cc-locked,
html.cc-locked body { overflow: hidden; }

.cc-gate {
  position: fixed; inset: 0;
  background: rgba(10, 48, 80, 0.58);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  z-index: 8900;
  opacity: 0;
  transition: opacity .3s ease;
}
.cc-gate.is-open { opacity: 1; }
.cc-gate[hidden] { display: none; }

.cc-banner {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(.96);
  width: min(640px, calc(100% - 32px));
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  background: var(--white);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: 0 24px 70px rgba(10, 48, 80, 0.35);
  z-index: 9000;
  opacity: 0;
  visibility: hidden;
  transition: transform .35s cubic-bezier(.16,1,.3,1), opacity .3s ease, visibility .3s;
}
.cc-banner:focus { outline: none; }
.cc-banner.is-open { transform: translate(-50%, -50%) scale(1); opacity: 1; visibility: visible; }
.cc-banner__inner {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 28px 30px;
}
.cc-banner__title { font-size: 1.35rem; font-weight: 700; color: var(--navy); margin-bottom: 8px; }
.cc-banner__text p { font-size: .95rem; line-height: 1.6; color: var(--text-muted); margin: 0; }
.cc-banner__text a { color: var(--green-dark); font-weight: 600; text-decoration: underline; }
.cc-banner__text a:hover { color: var(--navy); }
.cc-banner__note { margin-top: 12px !important; font-weight: 600; color: var(--navy) !important; }
.cc-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
}

/* On the Cookie Policy / Privacy Policy pages the prompt sits at the foot of
   the screen without blocking, so visitors can read the policy first. */
.cc-banner--bar {
  top: auto;
  bottom: 20px;
  transform: translate(-50%, calc(100% + 40px));
  width: min(1100px, calc(100% - 32px));
  max-height: none;
  box-shadow: 0 18px 50px rgba(10, 48, 80, 0.22);
}
.cc-banner--bar.is-open { transform: translate(-50%, 0); }
.cc-banner--bar .cc-banner__inner { flex-direction: row; align-items: center; gap: 28px; padding: 22px 26px; }
.cc-banner--bar .cc-banner__title { font-size: 1.05rem; margin-bottom: 4px; }
.cc-banner--bar .cc-banner__text p { font-size: .9rem; }
.cc-banner--bar .cc-banner__note { display: none; }
.cc-banner--bar .cc-banner__actions { flex-shrink: 0; flex-wrap: nowrap; }

/* ---- Shared buttons (Accept / Reject equal prominence) ---- */
.cc-btn {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: .88rem;
  padding: 11px 20px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
  border: 2px solid transparent;
}
.cc-btn:hover { transform: translateY(-1px); }
.cc-btn:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.cc-btn--solid { background: var(--green-gradient); color: var(--white); }
.cc-btn--solid:hover { background: var(--green-gradient-hover); }
.cc-btn--ghost { background: var(--white); color: var(--navy); border-color: var(--navy); }
.cc-btn--ghost:hover { background: var(--navy); color: var(--white); }

/* ---- Overlay + modal ---- */
.cc-overlay {
  position: fixed; inset: 0;
  background: rgba(10, 48, 80, 0.5);
  z-index: 9100;
  opacity: 0;
  transition: opacity .25s ease;
}
.cc-overlay.is-open { opacity: 1; }
/* When closed the [hidden] attr must win over the author display rules below,
   otherwise the invisible full-screen modal keeps intercepting clicks. */
.cc-modal[hidden], .cc-overlay[hidden] { display: none; }
.cc-modal {
  position: fixed; inset: 0;
  z-index: 9200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity .25s ease;
}
.cc-modal.is-open { opacity: 1; }
.cc-modal__panel {
  background: var(--white);
  width: min(620px, 100%);
  max-height: min(85vh, 760px);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px rgba(10, 48, 80, 0.35);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(14px) scale(.98);
  transition: transform .3s cubic-bezier(.16,1,.3,1);
}
.cc-modal.is-open .cc-modal__panel { transform: none; }
.cc-modal__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 26px;
  border-bottom: 1px solid var(--line);
}
.cc-modal__head h2 { font-size: 1.3rem; color: var(--navy); }
.cc-modal__close {
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  color: var(--navy);
  transition: background .2s ease;
}
.cc-modal__close:hover { background: var(--bg); }
.cc-modal__body { padding: 22px 26px; overflow-y: auto; }
.cc-modal__body > p { font-size: .92rem; color: var(--text-muted); margin-bottom: 20px; }
.cc-modal__body > p a { color: var(--green-dark); font-weight: 600; text-decoration: underline; }
.cc-modal__foot {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end;
  padding: 18px 26px;
  border-top: 1px solid var(--line);
  background: var(--bg);
}

/* ---- Category rows ---- */
.cc-cat { padding: 16px 0; border-top: 1px solid var(--line); }
.cc-cat:first-of-type { border-top: 0; }
.cc-cat__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cc-cat__title { font-size: 1rem; font-weight: 700; color: var(--navy-deep); }
.cc-cat__desc { font-size: .86rem; color: var(--text-muted); margin-top: 6px; }
.cc-cat__always { font-size: .8rem; font-weight: 600; color: var(--green-dark); flex-shrink: 0; }

/* ---- Toggle switch ---- */
.cc-toggle { position: relative; display: inline-flex; align-items: center; flex-shrink: 0; cursor: pointer; }
.cc-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.cc-toggle > span[aria-hidden],
.cc-toggle--locked > span {
  width: 46px; height: 26px; border-radius: var(--radius-pill);
  background: #c7d0da; position: relative; transition: background .2s ease; display: block;
}
.cc-toggle > span[aria-hidden]::after,
.cc-toggle--locked > span::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--white); box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform .2s ease;
}
.cc-toggle input:checked + span { background: var(--green-gradient); }
.cc-toggle input:checked + span::after { transform: translateX(20px); }
.cc-toggle input:focus-visible + span { outline: 3px solid var(--green); outline-offset: 2px; }
.cc-toggle--locked > span { background: var(--green-gradient); opacity: .55; cursor: not-allowed; }
.cc-toggle--locked > span::after { transform: translateX(20px); }

/* ---- Gated embed placeholder (e.g. Google Maps) ---- */
.cc-embed-blocked {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; text-align: center;
  width: 100%; min-height: 320px; height: 100%;
  padding: 32px;
  background: var(--bg);
  color: var(--text-muted);
}
.cc-embed-blocked p { font-size: .95rem; max-width: 420px; }

@media (max-width: 860px) {
  .cc-banner__inner { gap: 16px; padding: 22px 20px; }
  .cc-banner__title { font-size: 1.2rem; }
  .cc-banner__actions .cc-btn { flex: 1 1 auto; text-align: center; }
  .cc-banner--bar .cc-banner__inner { flex-direction: column; align-items: stretch; padding: 20px; }
  .cc-banner--bar .cc-banner__actions { flex-wrap: wrap; }
  .cc-modal__foot { justify-content: stretch; }
  .cc-modal__foot .cc-btn { flex: 1 1 auto; }
}

/* ============================================================
   SECTOR SPOTLIGHT — BIG EDITORIAL  (full-width homepage band)
   Full-bleed photo + colour wash, oversized copy, giant ghost
   index numeral, full-width bottom bar with labelled tabs.
   ============================================================ */
.spotlight{position:relative;width:100%;height:720px;min-height:560px;overflow:hidden;background:var(--navy-deep);font-family:'Inter',system-ui,sans-serif;
  /* left/right edge that lines up with the site's centred .container column */
  --sp-inset:calc(max((100% - var(--page-max))/2, 0px) + var(--gutter));
  /* photo zoom (height-based); raise toward 140% for more zoom, lower for less */
  --sp-img-h:112%}

/* 1. Photo layer (crossfade) */
.spotlight__photos{position:absolute;inset:0}
/* --sp-img-h controls the zoom: bigger % = more zoomed-in. Sized by height
   (not cover) so the photo is a touch smaller and right-aligned, leaving the
   left edge to the colour wash. */
.spotlight__photo{position:absolute;inset:0;opacity:0;transition:opacity .8s ease;background-size:auto var(--sp-img-h);background-repeat:no-repeat;background-position:right 22%}
.spotlight__photo.is-active{opacity:1}

/* 2. Colour wash (solid left, clears by ~60%) + floor shade */
.spotlight__wash{position:absolute;inset:0;transition:background .7s ease;pointer-events:none}
.spotlight__floor{position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,rgba(0,0,0,.28),rgba(0,0,0,0) 30%)}

/* 3. Giant ghost index numeral */
.spotlight__index{position:absolute;left:var(--sp-inset);bottom:72px;font-size:230px;font-weight:800;line-height:.8;letter-spacing:-.05em;color:rgba(255,255,255,.10);transition:color .7s ease;pointer-events:none;font-variant-numeric:tabular-nums;z-index:1}
.spotlight.is-light .spotlight__index{color:rgba(10,48,80,.10)}

/* 4. Copy block */
.spotlight__copies{position:absolute;top:0;bottom:88px;left:0;right:0;z-index:2}
.spotlight__copy{position:absolute;inset:0;display:none;flex-direction:column;justify-content:center;padding:0 var(--sp-inset)}
.spotlight__copy.is-active{display:flex}
.spotlight__copyinner{max-width:600px}
.spotlight__copy.is-active .spotlight__copyinner{animation:aSlideUp .6s ease both}
.spotlight__eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:24px}
.spotlight__badge{width:48px;height:48px;border-radius:999px;background:#fff;display:grid;place-items:center;flex:0 0 auto;box-shadow:0 6px 18px rgba(0,0,0,.22)}
.spotlight__badge img{width:26px;height:26px;display:block}
.spotlight__kicker{display:flex;flex-direction:column;gap:5px}
.spotlight__meta{font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.88)}
.spotlight__rule{width:52px;height:3px;border-radius:2px;background:#fff;opacity:.55}
.spotlight__copy h2{margin:0 0 18px;font-size:50px;line-height:1;font-weight:700;letter-spacing:-.02em;color:#fff;text-wrap:balance;text-shadow:0 2px 22px rgba(0,0,0,.2)}
.spotlight__copy p{margin:0;font-size:17px;line-height:1.6;max-width:620px;font-weight:400;color:rgba(255,255,255,.94);text-shadow:0 1px 12px rgba(0,0,0,.22)}
.spotlight__copy h3{margin:20px 0 6px;font-size:19px;font-weight:600;color:#fff}
.spotlight__copy .spotlight__subpara{font-size:15.5px;line-height:1.58;color:rgba(255,255,255,.9)}
.spotlight__actions{display:flex;gap:14px;margin-top:28px;flex-wrap:wrap}

/* light sector (Education / gold) -> navy text, no shadows */
.spotlight__copy--light .spotlight__meta{color:rgba(10,48,80,.85)}
.spotlight__copy--light .spotlight__rule{background:var(--navy-deep)}
.spotlight__copy--light h2{color:var(--navy-deep);text-shadow:none}
.spotlight__copy--light p{color:rgba(10,48,80,.92);text-shadow:none}
.spotlight__copy--light .spotlight__subpara{color:rgba(10,48,80,.88)}
.spotlight__copy--light h3{color:var(--navy-deep)}

/* CTA pills */
.spotlight__pill{display:inline-flex;align-items:center;gap:13px;padding:13px 14px 13px 24px;border-radius:999px;border:1.6px solid rgba(255,255,255,.6);color:#fff;text-decoration:none;font-weight:600;font-size:15px;white-space:nowrap;background:transparent;transition:transform .2s,background .2s}
.spotlight__pill:hover,.spotlight__pill:focus-visible{transform:translateY(-2px)}
.spotlight__pill--primary{background:#fff;color:var(--navy-deep);border-color:#fff}
.spotlight__pillchip{width:30px;height:30px;border-radius:999px;display:grid;place-items:center;border:1.6px solid rgba(255,255,255,.6)}
.spotlight__pill--primary .spotlight__pillchip{border-color:rgba(10,48,80,.35)}
.spotlight__copy--light .spotlight__pill{border-color:rgba(10,48,80,.55);color:var(--navy-deep)}
.spotlight__copy--light .spotlight__pillchip{border-color:rgba(10,48,80,.55)}
.spotlight__copy--light .spotlight__pill--primary{background:var(--navy-deep);color:#fff;border-color:var(--navy-deep)}
.spotlight__copy--light .spotlight__pill--primary .spotlight__pillchip{border-color:rgba(255,255,255,.5)}

/* 5. Bottom control bar */
.spotlight__bar{position:absolute;left:0;right:0;bottom:0;height:88px;display:flex;align-items:center;gap:20px;padding:0 var(--sp-inset);z-index:3;background:linear-gradient(0deg,rgba(0,0,0,.42),rgba(0,0,0,0))}
.spotlight__nav{display:flex;gap:10px;flex:0 0 auto}
.spotlight__arrowbtn{width:46px;height:46px;border-radius:999px;cursor:pointer;border:1.6px solid rgba(255,255,255,.5);background:rgba(255,255,255,.1);color:#fff;font-size:24px;line-height:1;display:grid;place-items:center;padding-bottom:3px;transition:background .2s}
.spotlight__arrowbtn:hover,.spotlight__arrowbtn:focus-visible{background:rgba(255,255,255,.22)}
.spotlight__arrowbtn:focus-visible{outline:3px solid #fff;outline-offset:2px}

/* labelled sector tabs */
.spotlight__tabs{display:flex;gap:10px;flex:1}
.stab{position:relative;overflow:hidden;flex:1;min-width:0;display:flex;align-items:center;gap:12px;justify-content:flex-start;padding:12px 18px;border-radius:12px;cursor:pointer;border:none;font-family:inherit;font-weight:600;font-size:14px;text-align:left;color:rgba(255,255,255,.9);background:rgba(255,255,255,.14);transition:background .3s,color .3s}
.stab__badge{width:28px;height:28px;border-radius:999px;flex:0 0 auto;display:grid;place-items:center;background:rgba(255,255,255,.18);transition:background .3s}
.stab__badge img{width:17px;height:17px;display:block}
.stab__name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stab.is-active.sector--culinary{background:var(--pink)}
.stab.is-active.sector--education{background:var(--purple)}
.stab.is-active.sector--health{background:var(--teal)}
.stab.is-active.sector--leadership{background:var(--navy-deep)}
.stab.is-active.sector--safeguarding{background:var(--blue)}
.stab.is-active{color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.28)}
.stab.is-active .stab__badge{background:#fff}
.stab:focus-visible{outline:3px solid #fff;outline-offset:-3px}

/* progress underline on active tab (re-keyed by JS) */
.stab__progress{position:absolute;left:0;bottom:0;height:3px;width:0;background:rgba(255,255,255,.8)}
.stab.is-active .stab__progress{background:rgba(255,255,255,.8)}
.spotlight:not(.is-paused) .stab.is-active .stab__progress{animation:aProg 6000ms linear both}

@keyframes aSlideUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes aProg{from{width:0}to{width:100%}}

/* ---- responsive ---- */
@media (max-width:1200px){
  .spotlight{height:660px}
  .spotlight__copy h2{font-size:42px}
  .spotlight__copy p{font-size:16px}
  .spotlight__index{font-size:180px}
}

/* Laptop / desktop: nudge each photo further right so the subjects' faces
   clear the left-hand copy. More shift on wider screens (more room). The two
   mirrored photos (education, leadership) take the opposite sign because of
   their scaleX(-1) flip — local-left renders as screen-right. Tune --sp-shift. */
@media (min-width:1024px){
  .spotlight{--sp-shift:clamp(0px, calc(150px - (100vw - 1280px) * 0.18), 150px)}
  .spotlight__photo--culinary{background-position:right calc(-1 * var(--sp-shift) - 70px) top 22%}
  .spotlight__photo--health{background-position:right calc(-1 * var(--sp-shift)) top 18%}
  .spotlight__photo--safeguarding{background-position:right calc(-1 * var(--sp-shift)) top 26%}
  .spotlight__photo--education{background-position:left calc(-1 * var(--sp-shift) - 70px) top 20%}
  .spotlight__photo--leadership{background-position:left calc(-1 * var(--sp-shift)) top 20%}
}
/* ===== Mobile / tablet: stack the carousel vertically =====
   The desktop layout overlays the copy on top of the photo. On narrow
   screens the sector copy is far too tall for that (it overflowed the fixed
   stage and collided with the bar), so we switch to a clean vertical stack:
     photo banner  ->  solid navy copy panel (natural height)  ->  control bar. */
@media (max-width:1023.98px){
  .spotlight{height:auto;min-height:0;--sp-mh:clamp(200px,46vw,300px)}

  /* 1. Photo becomes a fixed-height banner at the top of the stack */
  .spotlight__photos{position:relative;width:100%;height:var(--sp-mh)}
  .spotlight__photo{background-image:none!important;background-size:cover;background-position:center 18%;transform:none!important}

  /* hide desktop-only overlays; soft-fade the photo into the navy panel */
  .spotlight__wash{display:none}
  .spotlight__index{display:none}
  .spotlight__floor{top:0;height:var(--sp-mh);background:linear-gradient(0deg,var(--navy-deep) 1%,rgba(10,48,80,0) 42%)}

  /* 2. Copy panel: normal flow, natural height, solid navy background */
  .spotlight__copies{position:relative;width:100%;height:auto;top:auto;bottom:auto;background:var(--navy-deep)}
  .spotlight__copy{position:relative;inset:auto;padding:26px 22px 32px}
  .spotlight__copyinner{max-width:640px}
  .spotlight__copy h2{font-size:clamp(26px,6.4vw,38px);line-height:1.05}
  .spotlight__copy p{font-size:15.5px}
  .spotlight__copy h3{font-size:18px}
  .spotlight__copy .spotlight__subpara{font-size:14.5px}
  .spotlight__actions{margin-top:24px;gap:12px}
  .spotlight__pill{font-size:15px;padding:13px 14px 13px 22px}

  /* every sector reads as white-on-navy here (incl. the "light" Education one) */
  .spotlight__copy--light .spotlight__meta,
  .spotlight__copy--light h2,
  .spotlight__copy--light p,
  .spotlight__copy--light h3,
  .spotlight__copy--light .spotlight__subpara{color:#fff;text-shadow:none}
  .spotlight__copy--light .spotlight__rule{background:#fff}
  .spotlight__copy--light .spotlight__pill{border-color:rgba(255,255,255,.6);color:#fff}
  .spotlight__copy--light .spotlight__pill--primary{background:#fff;color:var(--navy-deep)}
  .spotlight__copy--light .spotlight__pillchip{border-color:rgba(255,255,255,.6)}

  /* 3. Control bar below the panel — icon-only sector tabs on a single row */
  .spotlight__bar{position:relative;height:auto;bottom:auto;flex-wrap:nowrap;gap:10px;padding:14px 16px 16px;background:var(--navy-deep);border-top:1px solid rgba(255,255,255,.12)}
  .spotlight__nav{order:1;flex:0 0 auto}
  .spotlight__tabs{order:2;flex:1 1 auto;flex-wrap:nowrap;overflow:visible;gap:8px}
  .stab{flex:1 1 0;min-width:0;justify-content:center;padding:12px 8px}
  .stab__name{display:none}
}

@media (max-width:560px){
  .spotlight__copy{padding:24px 18px 30px}
  /* full-width stacked CTAs for easy tapping */
  .spotlight__actions{flex-direction:column;align-items:stretch}
  .spotlight__pill{width:100%;justify-content:space-between;padding:14px 16px 14px 22px}
  /* tighten the icon tabs so all five + arrows fit one row on phones */
  .spotlight__bar{gap:8px;padding:14px 12px}
  .stab{padding:12px 4px}
  .stab__badge{width:26px;height:26px}
}

@media (prefers-reduced-motion:reduce){
  .spotlight__photo,.spotlight__wash,.spotlight__index{transition:none}
  .spotlight__copy.is-active .spotlight__copyinner{animation:none}
  .stab.is-active .stab__progress{animation:none;width:0}
}

/* =========================================================================
   PARTNERSHIPS PAGE (partnerships.html)
   ========================================================================= */
.prt-partners { background: var(--bg); }

.prt-grid {
  list-style: none;
  display: grid;
  gap: clamp(16px, 2vw, 24px);
  grid-template-columns: 1fr 1fr;
}
@media (min-width: 720px)  { .prt-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .prt-grid { grid-template-columns: repeat(4, 1fr); } }

.prt-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 28px 22px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.prt-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px -22px rgba(10, 48, 80, 0.18);
  border-color: rgba(119, 178, 140, 0.4);
}
.prt-card__logo {
  height: 72px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.prt-card__logo img {
  max-height: 56px;
  max-width: 150px;
  width: auto;
  object-fit: contain;
}
.prt-card h3 {
  font-size: 16px;
  line-height: 1.3;
  color: var(--navy-deep);
  margin-bottom: 10px;
}
.prt-card__tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: auto;
}
.prt-card__tag::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cat, var(--navy));
}
.prt-card__tag--culinary     { --cat: var(--pink); }
.prt-card__tag--education    { --cat: var(--purple); }
.prt-card__tag--health       { --cat: var(--teal); }
.prt-card__tag--leadership   { --cat: var(--orange); }
.prt-card__tag--safeguarding { --cat: var(--blue); }

.prt-card--cta {
  background: var(--navy-deep);
  border-color: var(--navy-deep);
  color: var(--white);
  justify-content: center;
  grid-column: 1 / -1;
}
@media (min-width: 720px)  { .prt-card--cta { grid-column: auto; } }
.prt-card--cta h3 { color: var(--white); font-size: 20px; }
.prt-card--cta p  { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.82); margin-bottom: 18px; }
.prt-card--cta .btn { font-size: 14px; }

/* Partner voices: two cards, centred */
.prt-stories { background: var(--white); }
.prt-stories .lrn-stories__grid { max-width: 920px; margin-inline: auto; }
@media (min-width: 1024px) { .prt-stories .lrn-stories__grid { grid-template-columns: 1fr 1fr; } }
.prt-stories .lrn-story blockquote p { font-size: 15.5px; }

/* MPW card on this page carries an eyebrow pill above the heading */
#marco-pierre-white .academy__card .eyebrow { display: inline-flex; }

/* =========================================================================
   POLICIES PAGE (policies.php)
   Hub for the public policy suite + Policies and Compliance Library.
   ========================================================================= */

/* Hero: jump-to pills under the actions */
.pol-jump {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
  max-width: 860px;
}
.pol-jump__label { font-size: 13px; font-weight: 600; color: var(--text-muted); margin-right: 4px; }
.pol-jump a {
  font-size: 13px;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--navy-deep);
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.pol-jump a:hover { border-color: var(--green); color: var(--green-dark); background: rgba(119, 178, 140, 0.08); }

/* Funding-year notice */
.pol-notice { padding: 0 0 clamp(40px, 5vw, 64px); }
.pol-notice__box {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: var(--navy-deep);
  color: var(--white);
  border-radius: var(--radius-md);
  padding: clamp(20px, 3vw, 28px);
}
.pol-notice__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--green);
}
.pol-notice__icon svg { width: 22px; height: 22px; }
.pol-notice__box h2 { font-size: 18px; margin-bottom: 6px; color: var(--white); }
.pol-notice__box p { font-size: 14.5px; line-height: 1.65; color: rgba(255, 255, 255, 0.85); margin: 0; }
.pol-notice__box a { color: var(--green); text-decoration: underline; }
.pol-notice__box a:hover { color: var(--white); }

/* Overview cards */
.pol-overview { padding: clamp(56px, 7vw, 96px) 0; background: var(--bg); }
.pol-overview__head { max-width: 720px; margin-bottom: clamp(28px, 3vw, 40px); }
.pol-overview__head h2 { margin-bottom: 14px; }
.pol-overview__head p { color: var(--text-muted); font-size: 17px; }
.pol-grid {
  display: grid;
  gap: clamp(18px, 2vw, 26px);
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .pol-grid { grid-template-columns: 1fr 1fr; } }
.pol-card {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 24px;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.pol-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -20px rgba(10, 48, 80, 0.25); border-color: var(--green); }
.pol-card__icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 86, 149, 0.10);
  color: var(--navy);
}
.pol-card__icon svg { width: 24px; height: 24px; }
.pol-card__body { flex: 1; min-width: 0; }
.pol-card__kicker { font-size: 11.5px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: var(--green-dark); margin-bottom: 6px; display: block; }
.pol-card__body h3 { font-size: 19px; line-height: 1.3; margin-bottom: 6px; }
.pol-card__body p { font-size: 14px; color: var(--text-muted); margin-bottom: 14px; }
.pol-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
.pol-card__link { font-size: 13.5px; font-weight: 600; color: var(--navy); display: inline-flex; align-items: center; gap: 7px; transition: color .2s ease; }
.pol-card__link svg { width: 15px; height: 15px; flex-shrink: 0; }
.pol-card__link:hover { color: var(--green-dark); }
.pol-card__link--ext { color: var(--green-dark); }
.pol-card__link--ext:hover { color: var(--navy); }

/* Detailed summaries (accordion) */
.pol-detail { padding: clamp(56px, 7vw, 96px) 0; }
.pol-detail__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
  max-width: 980px;
  margin: 0 auto clamp(24px, 3vw, 36px);
}
.pol-detail__head h2 { margin-bottom: 10px; }
.pol-detail__head p { color: var(--text-muted); font-size: 17px; max-width: 640px; }
.pol-toggle {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--navy);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 9px 16px;
  background: var(--white);
  transition: border-color .2s ease, color .2s ease;
}
.pol-toggle:hover { border-color: var(--green); color: var(--green-dark); }
.pol-list { max-width: 980px; margin: 0 auto; display: grid; gap: 14px; }
.pol-item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  scroll-margin-top: 120px;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.pol-item[open] { border-color: var(--green); box-shadow: 0 16px 36px -18px rgba(10, 48, 80, 0.15); }
.pol-item:target { border-color: var(--green); }
.pol-item > summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-weight: 600;
  font-size: 17px;
  color: var(--navy-deep);
}
.pol-item > summary::-webkit-details-marker { display: none; }
.pol-item > summary::marker { display: none; }
.pol-item > summary:hover { color: var(--green-dark); }
.pol-item__sum { display: flex; flex-direction: column; gap: 3px; }
.pol-item__sum small { font-size: 12.5px; font-weight: 500; color: var(--text-muted); }
.pol-item__chev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(119, 178, 140, 0.14);
  position: relative;
  flex-shrink: 0;
  transition: background .25s ease;
}
.pol-item__chev::before {
  content: '';
  width: 8px; height: 8px;
  border-right: 2px solid var(--green-dark);
  border-bottom: 2px solid var(--green-dark);
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform .25s ease;
}
.pol-item[open] .pol-item__chev { background: var(--green-gradient); }
.pol-item[open] .pol-item__chev::before {
  border-right-color: var(--white);
  border-bottom-color: var(--white);
  transform: rotate(-135deg) translate(-1px, -1px);
}
.pol-item__body { padding: 0 24px 26px; display: grid; gap: 22px; }
@media (min-width: 900px) { .pol-item__body { grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; } }
.pol-item__text p { font-size: 15px; line-height: 1.7; color: var(--text); margin: 0 0 12px; }
.pol-item__text ul { margin: 0 0 12px; padding-left: 20px; list-style: disc; }
.pol-item__text li { font-size: 15px; line-height: 1.65; margin-bottom: 7px; }
.pol-item__text h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--green-dark); margin: 18px 0 8px; }
.pol-item__text a { color: var(--navy); text-decoration: underline; }
.pol-item__text a:hover { color: var(--green-dark); }
.pol-item__text strong { color: var(--navy-deep); }
.pol-meta {
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 18px 20px 20px;
  align-self: start;
}
.pol-meta h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--navy-deep); margin: 0 0 12px; }
.pol-meta dl { display: grid; grid-template-columns: 1fr; gap: 0; font-size: 13.5px; margin: 0; }
.pol-meta dt { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-top: 12px; }
.pol-meta dt:first-child { margin-top: 0; }
.pol-meta dd { margin: 2px 0 0; color: var(--navy-deep); font-weight: 500; line-height: 1.5; }
.pol-meta__doc { display: inline-flex; gap: 7px; align-items: center; margin-top: 16px; font-size: 13.5px; font-weight: 600; color: var(--navy); }
.pol-meta__doc svg { width: 15px; height: 15px; }
.pol-meta__doc:hover { color: var(--green-dark); }

/* Governance band */
.pol-gov { padding: clamp(56px, 7vw, 96px) 0; background: var(--navy-deep); color: var(--white); }
.pol-gov__head { max-width: 720px; margin-bottom: clamp(28px, 3vw, 40px); }
.pol-gov__head h2 { color: var(--white); margin-bottom: 14px; }
.pol-gov__head p { color: rgba(255, 255, 255, 0.82); font-size: 17px; }
.pol-gov__grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .pol-gov__grid { grid-template-columns: repeat(3, 1fr); } }
.pol-gov__card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  padding: 24px;
}
.pol-gov__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--green-gradient);
  color: var(--navy-deep);
  font-weight: 700;
  margin-bottom: 14px;
}
.pol-gov__card h3 { font-size: 18px; color: var(--white); margin-bottom: 8px; }
.pol-gov__card p { font-size: 14.5px; line-height: 1.65; color: rgba(255, 255, 255, 0.82); }

/* Policies and Compliance Library table */
.pol-library { padding: clamp(56px, 7vw, 96px) 0; }
.pol-library__head { max-width: 760px; margin-bottom: clamp(24px, 3vw, 36px); }
.pol-library__head h2 { margin-bottom: 14px; }
.pol-library__head p { color: var(--text-muted); font-size: 17px; }
.pol-table-wrap { border: 1px solid var(--line); border-radius: var(--radius-md); overflow-x: auto; background: var(--white); }
.pol-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pol-table th, .pol-table td { text-align: left; vertical-align: top; padding: 14px 12px; border-bottom: 1px solid var(--line); }
.pol-table th:first-child, .pol-table td:first-child { padding-left: 18px; }
.pol-table th:last-child, .pol-table td:last-child { padding-right: 18px; }
.pol-table thead th { background: var(--bg); font-size: 11px; line-height: 1.35; text-transform: uppercase; letter-spacing: 0.08em; color: var(--navy-deep); }
.pol-table tbody tr:last-child td, .pol-table tbody tr:last-child th { border-bottom: 0; }
.pol-table th[scope="row"] { font-weight: 600; color: var(--navy-deep); line-height: 1.4; }
.pol-table th[scope="row"] a:hover { color: var(--green-dark); }
.pol-table__ref { color: var(--text-muted); font-size: 12px; line-height: 1.5; display: block; }
.pol-table__ver { display: inline-block; padding: 3px 10px; border-radius: var(--radius-pill); background: rgba(119, 178, 140, 0.16); color: var(--green-dark); font-weight: 600; font-size: 12px; white-space: nowrap; }
.pol-table__doc { font-weight: 600; color: var(--navy); white-space: nowrap; text-decoration: underline; }
.pol-table__doc:hover { color: var(--green-dark); }
@media (max-width: 1023.98px) {
  /* Stack each row as a card; column headings become inline labels */
  .pol-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pol-table, .pol-table tbody, .pol-table tr, .pol-table th, .pol-table td { display: block; }
  .pol-table tr { padding: 10px 0 12px; border-bottom: 1px solid var(--line); }
  .pol-table tbody tr:last-child { border-bottom: 0; }
  .pol-table th[scope="row"] { font-size: 16px; padding: 12px 18px 8px; border: 0; }
  .pol-table td { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 12px; padding: 6px 18px; border: 0; }
  .pol-table td::before { content: attr(data-label); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: var(--text-muted); padding-top: 3px; }
}
.pol-library__note { margin-top: 18px; font-size: 14px; color: var(--text-muted); line-height: 1.6; }
.pol-library__note a { color: var(--navy); text-decoration: underline; }
.pol-library__note a:hover { color: var(--green-dark); }

/* Raise a concern */
.pol-raise { padding: clamp(56px, 7vw, 96px) 0; background: var(--bg); }
.pol-raise__head { text-align: center; max-width: 720px; margin: 0 auto clamp(28px, 3vw, 40px); }
.pol-raise__head h2 { margin-bottom: 12px; }
.pol-raise__head p { color: var(--text-muted); font-size: 17px; }
.pol-raise__grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .pol-raise__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .pol-raise__grid { grid-template-columns: repeat(4, 1fr); } }
.pol-raise__card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 24px;
  display: flex;
  flex-direction: column;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.pol-raise__card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -20px rgba(10, 48, 80, 0.25); border-color: var(--green); }
.pol-raise__card h3 { font-size: 17px; margin-bottom: 8px; }
.pol-raise__card p { font-size: 14px; color: var(--text-muted); line-height: 1.6; margin-bottom: 16px; flex: 1; }
.pol-raise__card .pol-card__link { margin-top: auto; }
.pol-raise__urgent { margin-top: 24px; text-align: center; font-size: 14px; color: var(--text-muted); line-height: 1.6; }
.pol-raise__urgent strong { color: var(--red); }

@media print {
  .pol-item { break-inside: avoid; }
  .pol-item > summary { cursor: default; }
  .pol-item:not([open]) .pol-item__body { display: block; }
  .pol-toggle, .pol-jump, .pol-raise { display: none; }
}


/* =========================================================================
   TLC — brand layer (v3, September 2026)
   Loaded after site.css. Brings the website onto the TLC brand system used
   across the learning books, the induction handbooks, the learner portal and
   the vision film: deep navy + sage + cream paper, Inter with one italic
   Cormorant word per heading, sage eyebrows with a short rule, and rules /
   indents instead of tinted panels. Every rule here overrides or adds to
   site.css; nothing in site.css was deleted.
   ========================================================================= */

/* ---------- Tokens ---------- */
:root {
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-serif: 'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif;

  --navy:        #29445F;   /* Deep Navy — primary anchor */
  --navy-dark:   #223a50;
  --navy-deep:   #1b2f44;   /* dark bands, footer */
  --green:       #83C097;   /* Sage — eyebrows, rules, small accents */
  --green-dark:  #3f7d58;   /* sage darkened for text on white (AA) */
  --green-deep:  #3f7d58;
  --green-gradient:       var(--navy);
  --green-gradient-hover: var(--navy-dark);
  --signal:      #3085C6;   /* Signal Blue — the logo's ball; used very sparingly */

  --cream:       #F5F2EC;   /* paper */
  --text:        #1A2633;   /* ink */
  --text-muted:  #6B7280;
  --line:        #E4E7EB;
  --bg:          #F5F2EC;
  --bg-soft:     #F5F2EC;

  /* Sector palette — one ramp from the logo navy to the logo green, no other hues.
     Each sector has a main tone (rules, dots, kickers, chips) and a deeper tone (hero and band gradients, hovers). */
  --sec-culinary:       #29445F;  /* navy */
  --sec-culinary-d:     #1B2F44;
  --sec-education:      #2E5C45;  /* forest */
  --sec-education-d:    #1F4634;
  --sec-health:         #2C5F63;  /* deep sea, where the navy meets the green */
  --sec-health-d:       #1F4649;
  --sec-safeguarding:   #1B2F44;  /* navy, deepest */
  --sec-safeguarding-d: #111F2E;
  --sec-wellbeing:      #3F7D58;  /* sage, dark enough for text */
  --sec-wellbeing-d:    #2E5C45;
  --sec-leadership:     #3E6183;  /* slate navy */
  --sec-leadership-d:   #29445F;
  --mint:               #E6F1EA;  /* the light band */

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
}

/* ---------- Type ---------- */
body { font-family: var(--font-sans); color: var(--text); }
h1, h2, h3, h4 { font-family: var(--font-sans); color: var(--navy); letter-spacing: -0.015em; text-wrap: balance; }
h1 { font-weight: 700; }
h2 { font-weight: 700; }
h3 { font-weight: 600; }
h1 em, h2 em, h3 em, .serif, .hero__accent {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.14em;
  letter-spacing: 0;
  color: inherit;
  line-height: 1;
}
.hero__accent { color: inherit; }
p { text-wrap: pretty; }

/* Eyebrow: sage small caps with a short rule — no pill, no tint */
.eyebrow, .hero__kicker, .hero__eyebrow, .ready__eyebrow, .glance__eyebrow, .sec-hero__tag {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  padding: 0;
  background: none;
  border-radius: 0;
  color: var(--green-dark);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.4;
}
.eyebrow::before, .hero__kicker::before, .hero__eyebrow::before, .ready__eyebrow::before, .sec-hero__tag::before {
  content: '';
  width: 24px;
  height: 1.5px;
  background: var(--green);
  flex-shrink: 0;
}
.eyebrow--light, .eyebrow--light::before { color: var(--green); background: none; }
.eyebrow--light::before { background: var(--green); }
.emp-impact__copy .eyebrow, .lrn-support .emp-impact__copy .eyebrow { background: none; }
.eyebrow.no-rule::before { display: none; }

/* ---------- Buttons ---------- */
.btn { font-weight: 600; font-size: 14.5px; letter-spacing: 0; }
.btn--green { background: var(--navy); color: #fff; }
.btn--green:hover { background: var(--navy-dark); box-shadow: 0 10px 22px -10px rgba(41, 68, 95, 0.55); }
.btn--green .btn__arrow { background: rgba(255,255,255,0.18); }
.btn--ghost-navy { color: var(--navy); border-color: rgba(41, 68, 95, 0.55); }
.btn--ghost-navy:hover { background: rgba(41, 68, 95, 0.06); }
.btn--ghost-navy .btn__arrow { background: var(--navy); }
.btn--ghost-white { color: #fff; border-color: rgba(255,255,255,0.55); }
.emp-final-cta__actions .btn--green:hover { background: var(--navy-dark); }
.emp-final-cta__actions .btn--green::before { background: var(--navy-dark); }
/* ---------- Header / nav: deep navy bar, white links, sage underline, sage CTA ---------- */
.site-header { background: var(--navy); border-bottom: 1px solid rgba(255,255,255,0.10); }
.site-header.is-sticky { box-shadow: 0 14px 34px -22px rgba(0,0,0,0.6); }
.nav__links > li > a { color: #fff; font-weight: 500; }
.nav__links > li > a:hover { color: #fff; }
.nav__links > li > a[aria-current="page"] { color: #fff; font-weight: 600; }
.nav__links > li > a[aria-current="page"]:hover { color: #fff; }
.nav__links a::after, .nav__links a[aria-current="page"]::after { background: var(--green); }
.has-sub__chev { opacity: 0.8; }
.nav__toggle span { background: #fff; }
/* CTA: the one sage element on the bar */
.nav__cta.btn--green { background: var(--green); color: var(--navy-deep); }
.nav__cta.btn--green:hover { background: #8ecea3; color: var(--navy-deep); box-shadow: 0 10px 22px -10px rgba(0,0,0,0.5); }
.nav__cta.btn--green .btn__arrow { background: rgba(27,47,68,0.14); color: var(--navy-deep); }
/* Dropdown panels stay paper-white with navy text */
.submenu { background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 60px -20px rgba(0,0,0,0.35), 0 8px 20px -8px rgba(0,0,0,0.18); }
.submenu__overview, .submenu__item, .submenu__name { color: var(--navy); }
.submenu__overview { background: var(--cream); }
.submenu__item:hover, .submenu__item[aria-current="page"] { background: var(--cream); }
/* Mobile menu: same navy, white links */
.mobile-menu { background: var(--navy); border-top: 1px solid rgba(255,255,255,0.10); }
.mobile-menu a, .m-sub-toggle { color: #fff; }
.m-sub-chev { border-color: #fff; }
.m-sub { border-left-color: rgba(255,255,255,0.22); }
.m-sub a { color: rgba(255,255,255,0.88); }
.m-sub a[aria-current="page"], .mobile-menu a[aria-current="page"] { color: #fff; }
.mobile-menu__cta.btn--green { background: var(--green); color: var(--navy-deep); }
.mobile-menu__cta.btn--green .btn__arrow { background: rgba(27,47,68,0.14); }

/* Retire the announcement bar and the moving logo track wherever markup remains */
.announce, .logo-marquee { display: none !important; }

/* ---------- Generic v3 section rhythm ---------- */
.v3 { padding-block: clamp(64px, 8vw, 108px); }
.v3--cream { background: var(--cream); }
.v3--white { background: #fff; }
.v3--navy { background: var(--navy); color: #fff; }
.v3--navy h2, .v3--navy h3, .v3--navy p { color: #fff; }
.v3--navy .eyebrow { color: var(--green); }
.v3--deep { background: var(--navy-deep); color: #fff; }
.v3--deep h2, .v3--deep h3, .v3--deep p { color: #fff; }
.v3--deep .eyebrow { color: var(--green); }
.v3__head { max-width: 720px; margin-bottom: clamp(32px, 4vw, 56px); }
.v3__head h2 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.08; margin: 0 0 18px; }
.v3__head p { font-size: 17px; line-height: 1.65; color: var(--text-muted); margin: 0; max-width: 62ch; }
.v3--navy .v3__head p, .v3--deep .v3__head p { color: rgba(255,255,255,0.82); }
.v3__head--center { margin-inline: auto; text-align: center; }
.v3__head--center .eyebrow { justify-content: center; }
.v3__foot { margin-top: clamp(28px, 4vw, 44px); display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.v3__note { font-size: 14px; color: var(--text-muted); max-width: 70ch; margin: 0; }
.v3--navy .v3__note, .v3--deep .v3__note { color: rgba(255,255,255,0.72); }

/* ---------- Hero (home) ---------- */
.v3-hero { background: #fff; padding-block: clamp(28px, 3vw, 44px) clamp(36px, 4vw, 56px); }
.v3-hero__grid { display: grid; grid-template-columns: 1fr; gap: clamp(32px, 4vw, 56px); align-items: center; }
.v3-hero h1, .v3-hero .v3-hero__title { font-family: var(--font-sans); font-weight: 700; color: var(--navy); font-size: clamp(40px, 5.6vw, 70px); line-height: 1.02; letter-spacing: -0.03em; margin: 0 0 22px; max-width: 12ch; text-wrap: balance; }
.v3-hero .v3-hero__title em { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: 1.14em; letter-spacing: 0; line-height: 1; }
/* Rotating hero: slides, photos and captions are stacked in one grid cell and cross-fade */
.v3-hero__stack { display: grid; }
.v3-hero__stack > .v3-hero__slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .9s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .7s; }
.v3-hero__stack > .v3-hero__slide.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity .9s cubic-bezier(.22, 1, .36, 1) .25s, transform 1s cubic-bezier(.22, 1, .36, 1) .25s, visibility 0s; }
.v3-hero__slide .v3-hero__lead { margin-bottom: 0; }
.v3-hero__media .shape-image { display: grid; }
#hero-rotator .v3-hero__media .shape-image > img { grid-area: 1 / 1; opacity: 0; transform: scale(1.04); transition: opacity 1.1s cubic-bezier(.22, 1, .36, 1), transform 1.6s cubic-bezier(.22, 1, .36, 1); }
#hero-rotator .v3-hero__media .shape-image > img.is-active { opacity: 1; transform: scale(1); }
/* Progress dots: thin bars, the active one fills over the slide's duration */
.v3-hero__dots { display: flex; gap: 8px; margin: 24px 0 26px; }
.v3-hero__dot { position: relative; width: 34px; height: 18px; padding: 0; border: 0; background: none; cursor: pointer; }
.v3-hero__dot span { position: absolute; left: 0; right: 0; top: 8px; height: 2px; border-radius: 1px; background: var(--line); overflow: hidden; }
.v3-hero__dot span::after { content: ''; position: absolute; inset: 0; background: var(--navy); transform: scaleX(0); transform-origin: left; }
.v3-hero__dot:hover span { background: #cfd5db; }
.v3-hero__dot.is-active span::after { animation: v3DotFill var(--dot-ms, 6500ms) linear forwards; }
.v3-hero__dot.is-done span::after { transform: scaleX(1); }
#hero-rotator.is-paused .v3-hero__dot.is-active span::after { animation-play-state: paused; }
.v3-hero__dot:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 4px; }
@keyframes v3DotFill { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .v3-hero__stack > .v3-hero__slide, #hero-rotator .v3-hero__media .shape-image > img { transition: opacity .2s ease, visibility 0s; transform: none; }
  .v3-hero__dot.is-active span::after { animation: none; transform: scaleX(1); }
}
.v3-hero__lead { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6; color: var(--text); max-width: 46ch; margin: 0 0 30px; }
.v3-hero__lead strong { color: var(--navy); font-weight: 600; }
.v3-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.v3-hero__trust { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 13px; color: var(--text-muted); letter-spacing: 0.02em; }
.v3-hero__trust span { display: inline-flex; align-items: center; gap: 8px; }
.v3-hero__trust span::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
/* Hero photo in the same teardrop (sharp top-right corner) as every other page hero */
.v3-hero__media { position: relative; max-width: 560px; margin-inline: auto; width: 100%; animation: none; }
.v3-hero__media .shape-image { box-shadow: 0 30px 60px -30px rgba(27, 47, 68, 0.45); }
.v3-hero__media .shape-image img { object-position: center; aspect-ratio: 1 / 1; height: auto; width: 100%; object-fit: cover; }
@media (min-width: 900px) {
  .v3-hero__grid { grid-template-columns: 1fr 1fr; align-items: end; }
  .v3-hero__copy { padding-bottom: 6px; }
}
/* the five TLC teardrops sit under the photo, level with the buttons */
.v3-hero__media .v3-hero__trust { margin-top: 20px; padding-top: 0; border-top: 0; justify-content: center; gap: 12px 18px; }
.v3-hero__media .v3-hero__trust .v3-tear { width: 66px; }
.v3-hero__media .v3-tear .v3-badge { width: 66px; height: 66px; }
@media (max-width: 480px) { .v3-hero__media .v3-hero__trust { gap: 10px 9px; } .v3-hero__media .v3-hero__trust .v3-tear { width: 58px; } .v3-hero__media .v3-tear .v3-badge { width: 58px; height: 58px; } }

/* ---------- Client logos (static) ---------- */
.v3-clients { padding-block: clamp(36px, 5vw, 56px); }
.v3-clients__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(22px, 4vw, 56px); }
.v3-clients__row img { height: 30px; width: auto; max-width: 150px; object-fit: contain; opacity: 0.86; }
.v3-clients__row img.v3-clients__mark--tall { height: 44px; }
.v3-clients__row--past img { height: 22px; max-width: 120px; opacity: 0.5; }
.v3-clients__label { text-align: center; font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 22px; }
.v3-clients__label + .v3-clients__row + .v3-clients__label { margin-top: 36px; }
.v3--navy .v3-clients__row img, .v3--deep .v3-clients__row img { opacity: 0.9; }
@media (min-width: 900px) {
  .v3-clients__row img { height: 34px; max-width: 170px; }
  .v3-clients__row img.v3-clients__mark--tall { height: 50px; }
  .v3-clients__row--past img { height: 24px; }
}

/* ---------- Thesis: three columns, rule-and-indent ---------- */
.v3-cols { display: grid; grid-template-columns: 1fr; gap: 28px; }
.v3-col { padding-left: 18px; border-left: 2px solid var(--green); }
.v3-col h3 { font-size: 19px; margin: 0 0 10px; }
.v3-col p { font-size: 15px; line-height: 1.7; color: var(--text); margin: 0; }
.v3-col p + p { margin-top: 10px; }
.v3-col__num { display: block; font-family: var(--font-serif); font-style: italic; font-size: 30px; color: var(--green-dark); line-height: 1; margin-bottom: 14px; }
@media (min-width: 760px) { .v3-cols { grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 56px); } }

/* ---------- Academies & partners ---------- */
.v3-acad { display: grid; grid-template-columns: 1fr; gap: 16px; }
.v3-acad__item { display: grid; grid-template-columns: 1fr; gap: 16px; padding: 26px 24px 24px; border: 1px solid rgba(255,255,255,0.14); border-radius: var(--radius-md); background: rgba(255,255,255,0.03); transition: background .25s ease, border-color .25s ease, transform .25s ease; }
.v3-acad__item:hover { background: rgba(255,255,255,0.06); border-color: rgba(131, 192, 151, 0.5); transform: translateY(-2px); }
.v3-acad__mark { height: 60px; display: flex; align-items: center; }
.v3-acad__mark img { height: 100%; width: auto; max-width: 250px; object-fit: contain; object-position: left center; }
/* Licensed partner marks keep their own colours, so they sit on a white tile on the navy band */
.v3-acad__mark--tile { height: auto; padding: 10px 14px; background: #fff; border-radius: 10px; width: fit-content; }
.v3-acad__mark--tile img { height: 56px; max-width: 160px; }
/* NSPCC lock-up on the partnerships card and the safeguarding strip */
.v3-nspcc-mark { display: block; width: auto; height: 96px; margin: 0 0 18px; }
.v3-acad__item h3 { font-size: 19px; margin: 0 0 4px; }
.v3-acad__line { font-family: var(--font-serif); font-style: italic; font-size: 18px; color: var(--green); margin: 0 0 12px; }
.v3-acad__item p { font-size: 14.5px; line-height: 1.65; color: rgba(255,255,255,0.84); margin: 0; }
.v3-acad__item .v3-acad__link { margin-top: 16px; font-size: 13.5px; font-weight: 600; color: #fff; display: inline-flex; align-items: center; gap: 8px; }
.v3-acad__item .v3-acad__link::after { content: '\2192'; transition: transform .2s ease; }
.v3-acad__item:hover .v3-acad__link::after { transform: translateX(4px); }
/* Two lead cards across the top (MPW, NSPCC), three beneath, all on one grid */
@media (min-width: 700px) {
  .v3-acad { grid-template-columns: repeat(6, 1fr); }
  .v3-acad__item { grid-column: span 3; }
  .v3-acad__item--lead { grid-column: span 3; grid-template-columns: 184px 1fr; align-items: center; column-gap: 28px; padding: 30px 30px 28px; }
  .v3-acad__item--lead .v3-acad__mark { height: auto; max-height: 100px; }
  .v3-acad__item--lead .v3-acad__mark img { max-width: 184px; max-height: 100px; height: auto; }
  .v3-acad__item--lead .v3-acad__mark--tile img { height: 64px; }
  .v3-acad__item--lead h3 { font-size: 22px; }
}
@media (min-width: 1040px) {
  .v3-acad__item { grid-column: span 2; }
  .v3-acad__item--lead { grid-column: span 3; }
}

/* ---------- Sectors ---------- */
.v3-sectors { display: grid; grid-template-columns: 1fr; gap: 14px; }
.v3-sector { display: flex; flex-direction: column; gap: 0; padding: 26px 22px 22px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); position: relative; overflow: hidden; transition: box-shadow .25s ease, transform .25s ease; color: inherit; }
.v3-sector::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--sec, var(--navy)); }
.v3-sector:hover { box-shadow: 0 18px 40px -22px rgba(27,47,68,0.35); transform: translateY(-2px); }
.v3-sector__kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sec, var(--navy)); margin: 0 0 10px; white-space: nowrap; line-height: 1.4; }
.v3-sector h3 { font-size: 20px; line-height: 1.2; margin: 0 0 12px; min-height: 2.4em; }
.v3-sector > p:not(.v3-sector__kicker) { font-size: 14px; line-height: 1.55; color: var(--text); margin: 0 0 16px; min-height: 6.2em; }
.v3-sector__list { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 1.35; color: var(--text-muted); min-height: calc(12px + 3 * 2.7em + 12px); }
.v3-sector__list li { display: grid; grid-template-columns: 30px 1fr; gap: 8px; align-items: start; min-height: 2.7em; }
.v3-sector__lvl { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; color: var(--sec, var(--navy)); border: 1px solid currentColor; border-radius: 5px; padding: 1px 0; text-align: center; line-height: 1.3; min-height: 18px; }
.v3-sector__list li span:last-child { padding-top: 1px; }
.v3-sector__dot { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--sec, var(--navy)); margin: 6px auto 0; opacity: 0.8; }
.v3-sector__more { margin-top: auto; padding-top: 18px; font-size: 13.5px; font-weight: 600; color: var(--navy); display: inline-flex; gap: 8px; align-items: center; }
.v3-sector__more::after { content: '\2192'; }
.v3-sector--culinary { --sec: var(--sec-culinary); }
.v3-sector--health { --sec: var(--sec-health); }
.v3-sector--education { --sec: var(--sec-education); }
.v3-sector--safeguarding { --sec: var(--sec-safeguarding); }
.v3-sector--wellbeing { --sec: var(--sec-wellbeing); }
.v3-sector--leadership { --sec: var(--sec-leadership); }
@media (min-width: 640px) { .v3-sectors { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .v3-sectors { grid-template-columns: repeat(5, 1fr); gap: 16px; } }

/* ---------- Dual panels (employers / learners) ---------- */
.v3-dual { display: grid; grid-template-columns: 1fr; gap: 20px; }
.v3-dual__panel { padding: clamp(28px, 4vw, 44px); border-radius: var(--radius-lg); background: var(--cream); display: flex; flex-direction: column; gap: 14px; }
.v3-dual__panel--navy { background: var(--navy); color: #fff; }
.v3-dual__panel--navy h3, .v3-dual__panel--navy p { color: #fff; }
.v3-dual__panel--navy .eyebrow { color: var(--green); }
.v3-dual__panel h3 { font-size: clamp(24px, 2.4vw, 30px); line-height: 1.15; margin: 0; }
.v3-dual__panel p { font-size: 15.5px; line-height: 1.65; margin: 0; max-width: 52ch; }
.v3-dual__panel ul { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; }
.v3-dual__panel li { padding-left: 18px; position: relative; }
.v3-dual__panel li::before { content: ''; position: absolute; left: 0; top: 10px; width: 8px; height: 1.5px; background: var(--green); }
.v3-dual__panel .btn { margin-top: 10px; align-self: flex-start; }
@media (min-width: 860px) { .v3-dual { grid-template-columns: 1fr 1fr; gap: 28px; } }

/* ---------- Proof: stats + voices ---------- */
.v3-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.v3-stat { padding: 22px 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); }
.v3-stat__num { display: block; font-size: clamp(34px, 3.4vw, 46px); font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--navy); font-variant-numeric: tabular-nums; }
.v3-stat__num small { font-size: 0.5em; color: var(--green-dark); margin-left: 2px; font-weight: 700; }
.v3-stat__label { display: block; margin-top: 10px; font-size: 13.5px; line-height: 1.45; color: var(--text-muted); }
@media (min-width: 900px) { .v3-stats { grid-template-columns: repeat(5, 1fr); } }
.v3-stats__source { margin: 14px 0 0; font-size: 12.5px; color: var(--text-muted); }

.v3-voices { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: clamp(36px, 5vw, 56px); }
.v3-voice { padding: 6px 0 6px 22px; border-left: 2px solid var(--green); }
.v3-voice blockquote { margin: 0; font-family: var(--font-serif); font-style: italic; font-size: clamp(20px, 2vw, 24px); line-height: 1.35; color: var(--navy); }
.v3-voice p { margin: 10px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--text); max-width: 46ch; }
.v3-voice figcaption { margin-top: 12px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green-dark); }
@media (min-width: 860px) { .v3-voices { grid-template-columns: repeat(2, 1fr); gap: 28px 48px; } }

/* ---------- Values band ---------- */
.v3-values { padding-block: clamp(44px, 6vw, 72px); }
.v3-values__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 0; margin: 0; padding: 0; list-style: none; }
.v3-values__row li { font-family: var(--font-serif); font-style: italic; font-size: clamp(22px, 2.6vw, 30px); color: #fff; padding-inline: clamp(14px, 2.4vw, 28px); position: relative; }
.v3-values__row li + li::before { content: ''; position: absolute; left: 0; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: var(--green); transform: translate(-50%, -50%); }
.v3-values__line { text-align: center; margin: 26px 0 0; font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--green); }

/* ---------- Final CTA + accreditations ---------- */
.v3-cta { text-align: center; }
.v3-cta h2 { font-size: clamp(32px, 4vw, 52px); line-height: 1.05; margin: 0 0 16px; }
.v3-cta p { font-size: 17px; line-height: 1.6; color: rgba(255,255,255,0.82); max-width: 56ch; margin: 0 auto 28px; }
.v3-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.v3-accred { margin-top: clamp(40px, 6vw, 64px); padding-top: 32px; border-top: 1px solid rgba(255,255,255,0.14); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 40px; }
.v3-accred__label { width: 100%; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin: 0 0 6px; }
.v3-accred img { height: 44px; width: auto; max-width: 140px; object-fit: contain; }

/* ---------- Partner strip on sector pages ---------- */
.v3-partner { padding-block: clamp(40px, 5vw, 64px); background: var(--cream); border-block: 1px solid var(--line); }
.v3-partner__grid { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; }
.v3-partner__mark { display: flex; align-items: center; }
.v3-partner__mark img { height: 64px; width: auto; max-width: 260px; object-fit: contain; object-position: left center; }
.v3-partner h2 { font-size: clamp(24px, 2.6vw, 32px); margin: 0 0 8px; }
.v3-partner .v3-partner__line, .academy__card .v3-partner__line, .ready__copy .v3-partner__line { font-family: var(--font-serif); font-style: italic; font-size: 21px; line-height: 1.3; color: var(--green-dark); margin: 0 0 14px; }
.v3-partner p { font-size: 15px; line-height: 1.7; color: var(--text); margin: 0; max-width: 62ch; }
.v3-partner .btn { margin-top: 18px; }
@media (min-width: 860px) { .v3-partner__grid { grid-template-columns: 280px 1fr; gap: 48px; } }

/* ---------- Group ("where TLC fits") on About ---------- */
.v3-group { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.v3-group__item { padding: 22px 18px; border: 1px solid rgba(255,255,255,0.14); border-radius: var(--radius-md); display: flex; flex-direction: column; gap: 12px; min-height: 150px; }
.v3-group__item img { height: 40px; width: auto; max-width: 150px; object-fit: contain; object-position: left center; }
.v3-group__item h3 { font-size: 15px; margin: 0; }
.v3-group__item p { font-size: 13px; line-height: 1.5; color: rgba(255,255,255,0.78); margin: 0; }
@media (min-width: 700px) { .v3-group { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1040px) { .v3-group { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Vision list (About) ---------- */
.v3-vision { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--line); }
.v3-vision li { display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: start; padding: 24px 0; border-bottom: 1px solid var(--line); }
.v3-vision__num { font-family: var(--font-serif); font-style: italic; font-size: 22px; line-height: 1; }
@media (min-width: 900px) { .v3-vision { grid-template-columns: repeat(2, 1fr); column-gap: 56px; } .v3-vision li:last-child:nth-child(odd) { grid-column: 1 / -1; } .v3-vision li:last-child:nth-child(odd) p { max-width: 80ch; } }
.v3-vision h3 { font-size: 20px; margin: 0 0 4px; }
.v3-vision p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--text); max-width: 60ch; }

/* ---------- Page heroes across the site: allow the serif word ---------- */
.hero--page .hero__title em, .sec-hero__title em, .sec-hero h1 em { font-family: var(--font-serif); font-style: italic; font-weight: 500; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-deep); }
.footer__safeguarding { margin: 26px 0 0; padding: 16px 18px; border: 1px solid rgba(255,255,255,0.16); border-radius: var(--radius-md); font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,0.86); }
.footer__safeguarding strong { color: #fff; }
.footer__safeguarding a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Motion: respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .v3-acad__item, .v3-sector, .btn { transition: none; }
}

/* ---------- Sector dots in the menus ---------- */
.submenu__item--wellbeing .submenu__dot { background: var(--sec-wellbeing); color: rgba(63, 125, 88, 0.3); }
.m-sub-dot--wellbeing { background: var(--sec-wellbeing); }
.submenu__item--culinary .submenu__dot, .m-sub-dot--culinary { background: var(--sec-culinary); color: rgba(41, 68, 95, 0.3); }
.submenu__item--education .submenu__dot, .m-sub-dot--education { background: var(--sec-education); color: rgba(46, 92, 69, 0.3); }
.submenu__item--health .submenu__dot, .m-sub-dot--health { background: var(--sec-health); color: rgba(44, 95, 99, 0.3); }
.submenu__item--safeguarding .submenu__dot, .m-sub-dot--safeguarding { background: var(--sec-safeguarding); color: rgba(27, 47, 68, 0.3); }
.submenu__item--leadership .submenu__dot, .m-sub-dot--leadership { background: var(--sec-leadership); color: rgba(62, 97, 131, 0.3); }

/* ---------- Sector accent colours for the existing emp-sec cards ---------- */
.emp-sec--culinary     { --sec-colour: var(--sec-culinary); }
.emp-sec--education    { --sec-colour: var(--sec-education); }
.emp-sec--health       { --sec-colour: var(--sec-health); }
.emp-sec--leadership   { --sec-colour: var(--sec-leadership); }
.emp-sec--safeguarding { --sec-colour: var(--sec-safeguarding); }
.emp-sec--wellbeing    { --sec-colour: var(--sec-wellbeing); }

/* ---------- Dark bands onto the navy palette (teal gradients retired) ---------- */
.trusted, .feedback, .emp-why { background: var(--navy); }
.impact { background: var(--navy-deep); }
.impact__eyebrow { display: inline-flex; align-items: center; gap: 12px; padding: 0; background: none; border-radius: 0; color: var(--green); font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.impact__eyebrow::before { content: ''; width: 24px; height: 1.5px; background: var(--green); flex-shrink: 0; }
.emp-final-cta__inner::before { background: var(--green); }
.emp-steps { background: var(--navy-deep); }
.emp-final-cta { background: var(--navy); }
.emp-why__tick { background: var(--green); color: var(--navy-deep); }

/* ---------- Sector page tokens on the navy-to-green ramp ---------- */
.sector-page--culinary     { --sector: #29445F; --sector-dark: #1B2F44; --sector-soft: #EEF2F6; --sector-tint: rgba(41, 68, 95, 0.08);  --sector-ring: rgba(41, 68, 95, 0.2); }
.sector-page--education    { --sector: #2E5C45; --sector-dark: #1F4634; --sector-soft: #EDF4EF; --sector-tint: rgba(46, 92, 69, 0.09);  --sector-ring: rgba(46, 92, 69, 0.22); }
.sector-page--health       { --sector: #2C5F63; --sector-dark: #1F4649; --sector-soft: #ECF3F3; --sector-tint: rgba(44, 95, 99, 0.09);  --sector-ring: rgba(44, 95, 99, 0.2); }
.sector-page--leadership   { --sector: #3E6183; --sector-dark: #29445F; --sector-soft: #EEF2F6; --sector-tint: rgba(62, 97, 131, 0.08); --sector-ring: rgba(62, 97, 131, 0.2); }
.sector-page--safeguarding { --sector: #1B2F44; --sector-dark: #111F2E; --sector-soft: #EDF0F4; --sector-tint: rgba(27, 47, 68, 0.08);  --sector-ring: rgba(27, 47, 68, 0.2); }
.sector-page--wellbeing    { --sector: #3F7D58; --sector-dark: #2E5C45; --sector-soft: #EBF4EE; --sector-tint: rgba(63, 125, 88, 0.10); --sector-ring: rgba(63, 125, 88, 0.22); }
.sec-hero { background: linear-gradient(135deg, var(--sector-dark) 0%, var(--sector) 100%); }
.sec-hero__eyebrow { color: rgba(255,255,255,0.85); }
.sec-hero__eyebrow::before { background: rgba(255,255,255,0.6); }

/* ---------- Hero eyebrows on sector pages: no pill ---------- */
.sec-hero__eyebrow { display: inline-flex; align-items: center; gap: 12px; padding: 0; background: none; border-radius: 0; color: rgba(255,255,255,0.88); font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.sec-hero__eyebrow::before { content: ''; width: 24px; height: 1.5px; background: rgba(255,255,255,0.6); flex-shrink: 0; }
/* Apprenticeships page: the six sector bands walk the ramp, navy to green, with one light band to breathe */
/* Apprenticeships bands (29 Sept): navy and white only, alternating down the page */
.sector--culinary, .sector--health, .sector--wellbeing, .sector--education:not(.sector--light), .sector--safeguarding:not(.sector--light) { background: linear-gradient(135deg, #1F3650 0%, #29445F 55%, #33526F 100%); }
.sector--light { background: #fff; color: var(--ink); }
.sector--light::before { display: none; }
.sector--light .sector__panel h2, .sector--light .sector__panel h3 { color: var(--navy); }
.sector--light .sector__panel p { color: var(--text); }
.sector--light .sector__icon { background: var(--navy); }
.sector--light .sector__icon img { filter: brightness(0) invert(1); }
.sector--light .sector__media { box-shadow: 0 24px 48px -20px rgba(27,47,68,0.35); }
.sector--light .btn--ghost-light { color: var(--navy); border-color: var(--navy); }
.sector--light .btn--ghost-light:hover { background: rgba(41,68,95,0.06); }
.sector--light .btn--ghost-light .btn__arrow { background: var(--navy); color: #fff; }
.sector--light .btn--ghost-white { color: var(--navy); border-color: var(--navy); }
.sector--light .btn--ghost-white .btn__arrow { background: var(--navy); color: #fff; }
.hero--page .hero__title { font-size: clamp(36px, 4.6vw, 58px); }

/* ---------- Opening screen (home only): logo, "From vision to action.", then the curtain lifts ---------- */
.v3-intro { position: fixed; inset: 0; z-index: 20000; background: radial-gradient(120% 90% at 50% 42%, #33526f 0%, var(--navy) 48%, #182b3f 100%); color: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; opacity: 0; visibility: hidden; will-change: transform; }
.v3-intro.is-on { opacity: 1; visibility: visible; }
.v3-intro__glow { position: absolute; inset: -20%; background: radial-gradient(70% 60% at 80% 18%, rgba(131,192,151,0.11) 0%, rgba(131,192,151,0) 70%), radial-gradient(60% 55% at 18% 88%, rgba(48,133,198,0.08) 0%, rgba(48,133,198,0) 70%); animation: v3IntroGlow 6s ease-in-out infinite alternate; }
.v3-intro__inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 30px; padding: 24px; text-align: center; }
.v3-intro__mark { width: clamp(108px, 13vw, 150px); height: auto; opacity: 0; transform: scale(0.9); animation: v3IntroMark 1.6s cubic-bezier(.22, 1, .36, 1) .2s both; }
.v3-intro__rule { width: clamp(140px, 16vw, 220px); height: 1px; background: linear-gradient(90deg, rgba(131,192,151,0) 0%, var(--green) 18%, var(--green) 82%, rgba(131,192,151,0) 100%); transform: scaleX(0); transform-origin: center; animation: v3IntroRule 1.4s cubic-bezier(.22, 1, .36, 1) .9s both; }
.v3-intro__line { margin: 0; font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: clamp(40px, 6.4vw, 80px); line-height: 1.05; letter-spacing: -0.005em; color: #fff; opacity: 0; transform: translateY(12px); animation: v3IntroLine 1.4s cubic-bezier(.22, 1, .36, 1) 1.5s both; }
.v3-intro__line em { font-family: var(--font-serif); font-style: italic; font-weight: 500; color: var(--green); }
.v3-intro__eyebrow { margin: 0; font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: 0.34em; text-transform: uppercase; color: rgba(255,255,255,0.58); opacity: 0; animation: v3IntroLine 1.2s ease 2.2s both; }
.v3-intro__skip { position: absolute; right: 28px; bottom: 26px; background: none; border: 0; padding: 8px 2px; color: rgba(255,255,255,0.55); font: inherit; font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; opacity: 0; animation: v3IntroLine .8s ease 2.2s both; }
.v3-intro__skip:hover { color: #fff; }
.v3-intro.is-leaving { animation: v3IntroLeave 1.6s cubic-bezier(.65, 0, .18, 1) both; }
.v3-intro.is-leaving .v3-intro__inner { animation: v3IntroInnerOut .9s cubic-bezier(.4, 0, .2, 1) both; }
body.intro-active { overflow: hidden; }
body.intro-active .v3-hero__grid > * { opacity: 0; }
body.intro-done .v3-hero__grid > * { animation: v3HeroIn 1.4s cubic-bezier(.22, 1, .36, 1) .7s both; }
body.intro-done .v3-hero__grid > :nth-child(2) { animation-delay: .95s; }
@keyframes v3IntroMark  { to { opacity: 1; transform: scale(1); } }
@keyframes v3IntroRule  { to { transform: scaleX(1); } }
@keyframes v3IntroLine  { to { opacity: 1; transform: translateY(0); } }
@keyframes v3IntroGlow  { from { transform: translate3d(-2%, 1%, 0); } to { transform: translate3d(2%, -1%, 0); } }
@keyframes v3IntroLeave { to { transform: translateY(-100%); } }
@keyframes v3IntroInnerOut { to { opacity: 0; transform: translateY(-28px) scale(0.98); } }
@keyframes v3HeroIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .v3-intro__mark, .v3-intro__rule, .v3-intro__line, .v3-intro__eyebrow, .v3-intro__skip { animation-duration: .01s; animation-delay: 0s; }
  .v3-intro__glow { animation: none; }
  .v3-intro.is-leaving { animation: v3IntroFade .35s ease both; }
  body.intro-done .v3-hero__grid > * { animation: none; opacity: 1; }
}
@keyframes v3IntroFade { to { opacity: 0; } }

/* Numbered tool tiles on the How we deliver page */
.v3-tool__num { font-family: var(--font-serif); font-style: italic; font-size: 30px; line-height: 1; color: var(--green); height: auto; }

.v3-textlink { color: var(--navy); font-weight: 600; text-decoration: underline; text-decoration-color: var(--green); text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.v3-textlink:hover { text-decoration-color: var(--navy); }
.mobile-menu .m-sub-dot--safeguarding { background: rgba(255,255,255,0.85); }
.mobile-menu .m-sub-dot--leadership { background: rgba(255,255,255,0.55); }

/* Hero credentials: every mark sits in the TLC teardrop */
.v3-hero__trust--marks { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px 22px; margin-top: 30px; padding-top: 24px; }
.v3-hero__trust--marks span::before { display: none; }
.v3-hero__trust .v3-tear { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; color: inherit; text-decoration: none; width: 72px; }
.v3-hero__trust .v3-tear--logo { width: 88px; }
.v3-tear__shape { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; padding: 10px; box-sizing: border-box; background: #fff; border: 1.5px solid var(--navy); border-radius: 50% 0 50% 50%; }
.v3-tear__shape img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.v3-tear--logo .v3-tear__shape img[alt="Ofsted Good Provider"] { width: 46px; height: 46px; }
.v3-tear--logo .v3-tear__shape img[alt="matrix Standard"] { width: 54px; }
.v3-tear .v3-badge { width: 72px; height: 72px; display: block; }
.v3-hero__trust .v3-tear__cap { display: block; width: 100%; font-size: 10.5px; line-height: 1.3; text-align: center; color: var(--text-muted); }
a.v3-tear:hover .v3-tear__shape { box-shadow: 0 8px 18px -10px rgba(41,68,95,0.45); }
a.v3-tear:hover .v3-tear__cap { color: var(--navy); }
@media (max-width: 480px) { .v3-hero__trust--marks { gap: 14px 16px; } .v3-hero__trust .v3-tear { width: 62px; } .v3-tear__shape, .v3-tear .v3-badge { width: 62px; height: 62px; } .v3-tear--logo .v3-tear__shape img[alt="Ofsted Good Provider"] { width: 40px; height: 40px; } }

/* For Learners: what you gain, in the teardrop */
.v3-gain { padding-block: clamp(40px, 5vw, 64px); background: var(--cream); }
.v3-gain__row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
.v3-gain__item { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.v3-gain__icon { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; background: var(--navy); color: #fff; border-radius: 50% 0 50% 50%; flex-shrink: 0; }
.v3-gain__icon svg { width: 34px; height: 34px; }
.v3-gain__item h3 { font-size: 16px; line-height: 1.25; margin: 0; color: var(--navy); }
.v3-gain__item p { font-size: 13.5px; line-height: 1.55; color: var(--text-muted); margin: 0; max-width: 24ch; }
@media (min-width: 760px) { .v3-gain__row { grid-template-columns: repeat(5, 1fr); gap: 20px; } }

/* ---------- Cinematic timeline (dark band, dashed spine, alternating steps) ---------- */
.cine { --band: #1a2633; background: var(--band); position: relative; padding: 0; color: #e8edf2; }
.cinehead { padding: clamp(64px, 8vw, 96px) 22px clamp(40px, 5vw, 60px); text-align: center; position: relative; z-index: 2; }
.cinehead .eyebrow { justify-content: center; margin-bottom: 14px; }
.cinehead h2 { color: #fff; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.08; margin: 0; }
.cinehead h2 em { color: var(--green); }
.cinehead p { color: #b9c7d4; font-size: 16px; max-width: 60ch; margin: 16px auto 0; line-height: 1.65; }
.ctrack { position: relative; }
.ctrack::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 0; border-left: 2px dashed rgba(131,192,151,.4); transform: translateX(-1px); z-index: 2; }
.cstep { position: relative; min-height: 320px; display: flex; align-items: center; overflow: hidden; }
.cstep .cbg { position: absolute; inset: 0; background-position: center; background-size: cover; background-repeat: no-repeat; transform: scale(1.06); }
.cstep .cshade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(26,38,51,.95) 0%, rgba(26,38,51,.88) 42%, rgba(34,58,80,.5) 66%, rgba(26,38,51,.72) 100%); }
.cstep:nth-child(even) .cshade { background: linear-gradient(270deg, rgba(26,38,51,.95) 0%, rgba(26,38,51,.88) 42%, rgba(34,58,80,.5) 66%, rgba(26,38,51,.72) 100%); }
.cstep:not(.plain) h3, .cstep:not(.plain) p, .cstep:not(.plain) .cmoment { text-shadow: 0 1px 12px rgba(26,38,51,.7); }
.cstep.plain .cbg { background: radial-gradient(circle at 78% 30%, rgba(131,192,151,.14), transparent 60%), linear-gradient(160deg, var(--navy-deep), var(--band)); }
.cstep.plain:nth-child(even) .cbg { background: radial-gradient(circle at 22% 30%, rgba(131,192,151,.14), transparent 60%), linear-gradient(200deg, var(--navy-deep), var(--band)); }
.cstep.plain .cshade { background: none; }
.cstep .cnum-ghost { position: absolute; right: 6%; top: 50%; transform: translateY(-50%); font-family: var(--font-serif); font-style: italic; font-weight: 600; font-size: 280px; line-height: 1; color: rgba(131,192,151,.09); pointer-events: none; z-index: 1; }
.cstep:nth-child(even) .cnum-ghost { right: auto; left: 6%; }
.cstep .ccirc { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--green); background: var(--navy); display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-style: italic; font-weight: 600; font-size: 26px; color: #fff; z-index: 3; box-shadow: 0 0 0 10px rgba(26,38,51,.55); }
.cstep .ccirc--year { font-size: 19px; letter-spacing: -0.01em; width: 70px; height: 70px; }
.cstep .cbody { position: relative; z-index: 2; width: 50%; padding: 60px 7%; }
.cstep:nth-child(odd) .cbody { margin-right: auto; text-align: right; padding-right: calc(7% + 48px); }
.cstep:nth-child(even) .cbody { margin-left: auto; text-align: left; padding-left: calc(7% + 48px); }
.cstep .cmoment { font-family: var(--font-serif); font-style: italic; font-weight: 600; font-size: 18px; color: var(--green); display: block; margin-bottom: 8px; }
.cstep h3 { color: #fff; font-size: clamp(22px, 2.6vw, 32px); font-weight: 700; letter-spacing: -0.015em; line-height: 1.15; margin: 0 0 10px; }
.cstep p { color: #c6d2dd; font-size: 15px; line-height: 1.7; max-width: 44ch; display: inline-block; margin: 0; }
@media (max-width: 800px) {
  .ctrack::before { left: 30px; }
  .cstep { min-height: 0; }
  .cstep .ccirc { left: 30px; top: 52px; transform: translate(-50%, 0); width: 52px; height: 52px; font-size: 21px; }
  .cstep .ccirc--year { width: 60px; height: 60px; font-size: 15px; }
  .cstep .cbody, .cstep:nth-child(odd) .cbody, .cstep:nth-child(even) .cbody { width: 100%; margin: 0; text-align: left; padding: 44px 24px 44px 76px; }
  .cstep .cshade, .cstep:nth-child(even) .cshade { background: linear-gradient(180deg, rgba(26,38,51,.9), rgba(26,38,51,.84)); }
  .cstep .cnum-ghost { font-size: 170px; right: -10px; left: auto; }
  .cstep:nth-child(even) .cnum-ghost { left: auto; right: -10px; }
}
@media (prefers-reduced-motion: reduce) { .cstep .cbg { transform: none; } }

/* ---------- Storyboard: sticky teardrop photo panel + numbered steps ---------- */
.v3-story { padding-block: clamp(48px, 6vw, 88px); background: #fff; }
.v3-story__grid { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; }
.v3-story__panel { display: none; }
.v3-story__tear { position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: 50% 0 50% 50%; overflow: hidden; background: var(--navy); box-shadow: 0 30px 60px -30px rgba(27,47,68,0.5); }
.v3-story__frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.05); transition: opacity .9s cubic-bezier(.22,1,.36,1), transform 1.6s cubic-bezier(.22,1,.36,1); }
.v3-story__frame.is-active { opacity: 1; transform: scale(1); }
.v3-story__count { position: absolute; left: 8%; bottom: 6%; display: flex; align-items: baseline; gap: 8px; color: #fff; text-shadow: 0 2px 16px rgba(26,38,51,.6); }
.v3-story__n { font-family: var(--font-serif); font-style: italic; font-weight: 600; font-size: 84px; line-height: 1; }
.v3-story__of { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.85); }
.v3-story__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.v3-story__step { display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 26px 0; border-top: 1px solid var(--line); transition: opacity .4s ease; }
.v3-story__step:last-child { border-bottom: 1px solid var(--line); }
.v3-story__idx { font-family: var(--font-serif); font-style: italic; font-weight: 600; font-size: 30px; line-height: 1; color: var(--green); padding-top: 4px; }
.v3-story__kicker { display: block; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--green-dark); margin-bottom: 8px; }
.v3-story__step h3 { font-size: 22px; margin: 0 0 8px; }
.v3-story__step p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--text); max-width: 52ch; }
@media (min-width: 900px) {
  .v3-story__grid { grid-template-columns: minmax(300px, 420px) 1fr; gap: clamp(40px, 6vw, 96px); }
  .v3-story__panel { display: block; position: sticky; top: 110px; }
  .v3-story__step { opacity: .42; padding: 32px 0; }
  .v3-story__step.is-active { opacity: 1; }
  .v3-story__step.is-active .v3-story__idx { color: var(--navy); }
}
@media (prefers-reduced-motion: reduce) { .v3-story__frame { transition: none; transform: none; } .v3-story__step { opacity: 1 !important; } }

/* ---------- Sector ledger (For Employers): ruled rows instead of cards ---------- */
.v3-ledger { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.v3-ledger__row { display: grid; grid-template-columns: 1fr; gap: 6px 24px; padding: 22px 0; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; position: relative; }
.v3-ledger__name { display: flex; align-items: center; gap: 12px; font-size: 19px; font-weight: 600; color: var(--navy); margin: 0; }
.v3-ledger__name::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--sec, var(--navy)); flex-shrink: 0; }
.v3-ledger__levels { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
.v3-ledger__copy { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--text); max-width: 60ch; }
.v3-ledger__go { font-size: 13.5px; font-weight: 600; color: var(--navy); white-space: nowrap; }
.v3-ledger__go::after { content: ' \2192'; }
.v3-ledger__row:hover { background: linear-gradient(90deg, rgba(131,192,151,.08), transparent 70%); }
.v3-ledger__row--health { --sec: var(--sec-health); } .v3-ledger__row--culinary { --sec: var(--sec-culinary); } .v3-ledger__row--education { --sec: var(--sec-education); } .v3-ledger__row--safeguarding { --sec: var(--sec-safeguarding); } .v3-ledger__row--wellbeing { --sec: var(--sec-wellbeing); }
@media (min-width: 820px) {
  .v3-ledger__row { grid-template-columns: 260px 1fr auto; align-items: center; }
  .v3-ledger__levels { grid-column: 1; }
  .v3-ledger__name { grid-row: 1; }
  .v3-ledger__copy { grid-column: 2; grid-row: 1 / span 2; }
  .v3-ledger__go { grid-column: 3; grid-row: 1 / span 2; }
}

.v3-gain--outline .v3-gain__icon { background: #fff; color: var(--navy); border: 1.5px solid var(--navy); }
.emp-sectors--ledger .emp-sectors__head { margin-bottom: 28px; }

/* ---------- Experts page ---------- */
.v3-xhero { --xhero-pt: clamp(56px, 8vw, 110px); --xhero-pb: clamp(48px, 7vw, 96px); position: relative; background: var(--navy-deep); color: #fff; overflow: hidden; padding-block: var(--xhero-pt) var(--xhero-pb); }
.v3-xhero__glow { position: absolute; inset: -20%; background: radial-gradient(46% 50% at 74% 52%, rgba(131,192,151,.22), transparent 66%), radial-gradient(50% 45% at 12% 85%, rgba(48,133,198,.1), transparent 65%); pointer-events: none; }
.v3-xhero__grid { position: relative; display: grid; grid-template-columns: 1fr; gap: 24px; align-items: end; }
.v3-xhero h1 { color: #fff; font-size: clamp(40px, 5.4vw, 68px); line-height: 1.02; letter-spacing: -0.03em; margin: 0 0 22px; max-width: 12ch; }
.v3-xhero h1 em { color: var(--green); }
.v3-xhero__lead { font-size: clamp(16.5px, 1.4vw, 19px); line-height: 1.65; color: rgba(255,255,255,.86); max-width: 50ch; margin: 0 0 30px; }
.v3-xhero__wall { position: relative; aspect-ratio: 1 / 1; max-width: 560px; margin-inline: auto; width: 100%; }
.v3-pola { position: absolute; left: var(--x); top: var(--y); width: var(--w, 32%); margin: 0; padding: 6% 6% 9%; background: #fff; box-shadow: 0 24px 50px -22px rgba(0,0,0,.6), 0 4px 12px -6px rgba(0,0,0,.3); transform: rotate(var(--r, 0deg)); border-radius: 2px; }
.v3-pola img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
/* Focal-point override: tall shot, pin to the top so the carer's face stays in the square */
.v3-pola img[src$="pola/care-meal.jpg"] { object-position: center 0%; }
.v3-pola figcaption { margin-top: 6%; font-family: var(--font-serif); font-style: italic; font-size: clamp(11px, 1.1vw, 15px); color: var(--navy); text-align: center; line-height: 1.2; }
.v3-xhero__wall .v3-pola { padding: 4% 4% 6%; }
.v3-xhero__wall .v3-pola:hover { transform: rotate(0deg) scale(1.04); z-index: 5; }
.v3-xhero__wall .v3-pola { transition: transform .5s cubic-bezier(.22,1,.36,1); }
@media (min-width: 900px) { .v3-xhero__grid { grid-template-columns: 1fr 1.1fr; gap: clamp(24px, 4vw, 56px); } .v3-xhero__copy { padding-bottom: 28px; } }
/* The experts themselves: two cut-out portraits filling the hero from top edge to bottom edge, Marco in front */
.v3-xhero__pictured { margin: 26px 0 0; font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,.62); max-width: 44ch; }
.v3-xhero__cast { position: relative; align-self: stretch; width: calc(100% + clamp(60px, 12vw, 200px)); min-height: 520px; margin-top: calc(-1 * var(--xhero-pt)); margin-bottom: calc(-1 * var(--xhero-pb)); pointer-events: none; }
.v3-xhero__cut { position: absolute; bottom: 0; width: auto; display: block; filter: drop-shadow(0 30px 40px rgba(0,0,0,.45)); }
.v3-xhero__cut--marco { right: -4%; height: 100%; z-index: 2; }
.v3-xhero__cut--lino { left: 0; height: 84%; z-index: 1; }
@media (max-width: 899px) { .v3-xhero__cast { width: 100%; min-height: 0; height: clamp(320px, 92vw, 440px); max-width: 560px; margin: 0 auto calc(-1 * var(--xhero-pb)); } .v3-xhero__cut--marco { right: 0; } .v3-xhero__cut--lino { height: 84%; } }
@media (max-width: 899px) {
  .v3-xhero__wall { aspect-ratio: auto; display: flex; gap: 14px; overflow-x: auto; padding: 8px 4px 20px; scroll-snap-type: x mandatory; max-width: none; }
  .v3-xhero__wall .v3-pola { position: static; width: 46%; flex: 0 0 46%; scroll-snap-align: start; transform: rotate(var(--r, 0deg)) scale(.96); }
}
/* chapters */
.v3-chap { position: relative; overflow: hidden; padding-block: clamp(56px, 7vw, 104px); background: #fff; }
.v3-chap--cream { background: var(--cream); }
.v3-chap--deep { background: var(--navy-deep); color: #fff; }
.v3-chap--deep h2, .v3-chap--deep p { color: #fff; }
.v3-chap--deep .v3-chap__line { color: var(--green); }
.v3-chap--deep .v3-chap__quote { color: rgba(255,255,255,.92); border-color: var(--green); }
.v3-chap--deep p { color: rgba(255,255,255,.86); }
.v3-chap__ghost { position: absolute; top: 24px; right: 4%; font-family: var(--font-serif); font-style: italic; font-weight: 600; font-size: clamp(120px, 22vw, 320px); line-height: 1; color: rgba(41,68,95,.06); pointer-events: none; }
.v3-chap--alt .v3-chap__ghost { right: auto; left: 4%; }
.v3-chap--deep .v3-chap__ghost { color: rgba(131,192,151,.08); }
.v3-chap__grid { position: relative; display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
.v3-chap__media { position: relative; padding-bottom: 60px; }
.v3-chap__feature { position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; isolation: isolate; transform: translateZ(0); box-shadow: 0 34px 60px -30px rgba(27,47,68,.55); }
.v3-chap__feature--tear { border-radius: 50% 0 50% 50%; }
.v3-chap__feature--wide { width: 100%; max-width: 620px; aspect-ratio: 16 / 10; border-radius: var(--radius-lg); }
.v3-chap__feature img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
/* Care chapter: shift right so both faces sit centrally and the nurse's hair is not clipped */
.v3-chap__feature img[src$="photo/care-garden-2.jpg"] { object-position: 60% center; }
.v3-chap__fan { position: absolute; right: 0; bottom: 0; width: 60%; max-width: 360px; height: 46%; }
.v3-pola--s { position: absolute; width: 46%; padding: 4% 4% 5%; }
.v3-chap__fan .v3-pola--s:nth-child(1) { left: 0; bottom: 30%; z-index: 2; }
.v3-chap__fan .v3-pola--s:nth-child(2) { left: 38%; bottom: 8%; z-index: 3; }
.v3-chap__fan .v3-pola--s:nth-child(3) { left: 60%; bottom: 40%; z-index: 1; }
.v3-chap__marks { display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: center; margin-top: 26px; }
.v3-chap__marks img { height: 34px; width: auto; max-width: 140px; object-fit: contain; opacity: .9; }
.v3-chap__copy .eyebrow { margin-bottom: 18px; }
.v3-chap__mark { display: block; height: 56px; width: auto; max-width: 220px; object-fit: contain; object-position: left center; margin: 0 0 18px; }
.v3-chap__mark--tile { height: 64px; }
.v3-chap__copy h2 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.08; margin: 0 0 6px; }
.v3-chap__line { font-family: var(--font-serif); font-style: italic; font-size: 20px; color: var(--green-dark); margin: 0 0 18px; }
.v3-chap__quote { font-family: var(--font-serif); font-style: italic; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.35; color: var(--navy); border-left: 2px solid var(--green); padding-left: 18px; margin: 0 0 20px; max-width: 30ch; }
.v3-chap__copy p:not(.eyebrow):not(.v3-chap__line):not(.v3-chap__quote) { font-size: 15.5px; line-height: 1.7; color: var(--text); max-width: 58ch; margin: 0 0 14px; }
.v3-chap__copy .btn { margin-top: 12px; }
@media (min-width: 900px) {
  .v3-chap__grid { grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); }
  .v3-chap--alt .v3-chap__media { order: 2; }
  .v3-chap--alt .v3-chap__copy { order: 1; }
  .v3-chap__media { padding-bottom: 80px; }
}
/* photo CTA */
.v3-cta--photo { position: relative; overflow: hidden; background: var(--navy-deep); }
.v3-cta--photo .v3-cta__bg { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; opacity: .55; transform: scale(1.04); }
.v3-cta--photo::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(27,47,68,.78), rgba(27,47,68,.92)); z-index: 1; }
.v3-cta--photo .container { position: relative; z-index: 2; }
.v3-cta--photo h2 { font-size: clamp(34px, 4.4vw, 58px); }
.v3-cta--photo .btn--green { background: var(--green); color: var(--navy-deep); }
.v3-cta--photo .btn--green .btn__arrow { background: rgba(27,47,68,.14); color: var(--navy-deep); }

.v3-chap--deep .v3-chap__copy p:not(.eyebrow):not(.v3-chap__line):not(.v3-chap__quote) { color: rgba(255,255,255,.86); }

/* ---------- Photo strip: four teardrops with captions ---------- */
.v3-strip { padding-block: clamp(36px, 5vw, 64px); overflow: hidden; }
.v3-strip__eyebrow { justify-content: center; margin-bottom: 26px; }
.v3-strip__row { display: flex; gap: clamp(18px, 3vw, 44px); justify-content: center; align-items: flex-start; }
.v3-strip__tear { width: 21%; flex: 0 0 21%; margin: 0; }
.v3-strip__tear:nth-child(even) { margin-top: 36px; }
.v3-strip__shape { border-radius: 50% 0 50% 50%; overflow: hidden; aspect-ratio: 1 / 1; box-shadow: 0 26px 48px -26px rgba(27,47,68,0.45); transform: translateZ(0); }
.v3-strip__shape img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.22,1,.36,1); }
.v3-strip__tear:hover .v3-strip__shape img { transform: scale(1.05); }
/* Focal-point override: keep the carer's face in frame on the Health page strip */
.v3-strip__shape img[src$="pola/care-meal.jpg"] { object-position: 40% 0%; }
/* Culinary strip: the colour "Plating up" photo sits beside three B&W shots, so match them */
.v3-strip__shape img[src$="photo/chef-plating-wide.jpg"] { filter: grayscale(1) contrast(1.05); }
/* Safeguarding strip: wide 3:2 shots, shift the crop so both people sit inside the square */
.v3-strip__shape img[src$="pola/coach-tablet.jpg"] { object-position: 62% center; }
.v3-strip__shape img[src$="pola/coach-sofa.jpg"]   { object-position: 30% center; }
/* Wellbeing strip: wide shot, shift left so nurse and resident both sit inside the square */
.v3-strip__shape img[src$="photo/care-garden-wide.jpg"] { object-position: 35% center; }
.v3-strip__tear figcaption { margin-top: 14px; font-family: var(--font-serif); font-style: italic; font-size: 17px; color: var(--navy); text-align: center; line-height: 1.25; }
@media (max-width: 760px) {
  .v3-strip__row { justify-content: flex-start; overflow-x: auto; padding: 8px 4px 20px; scroll-snap-type: x mandatory; gap: 16px; }
  .v3-strip__tear { width: 56%; flex: 0 0 56%; scroll-snap-align: start; margin-top: 0 !important; }
}

.v3-cta--photo .v3-accred { position: relative; z-index: 2; }

.v3-cta--photo h2, .v3-cta--photo p { color: #fff; }
.v3-cta--photo .eyebrow { color: var(--green); }
.v3-cta--photo p { color: rgba(255,255,255,.88); }

/* ---------- Delivery model blocks ---------- */
.v3-teach { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0 40px; counter-reset: teach; }
.v3-teach li { counter-increment: teach; display: grid; grid-template-columns: 56px 1fr; gap: 12px 14px; padding: 18px 0; border-top: 1px solid var(--line); }
.v3-teach li::before { content: counter(teach, decimal-leading-zero); font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: 19px; line-height: 1; width: 48px; height: 48px; }
.v3-teach li::before { grid-row: 1 / span 2; }
.v3-teach h3 { grid-column: 2; font-size: 17px; margin: 0 0 4px; }
.v3-teach li p { grid-column: 2; }
.v3-teach p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--text); }
.v3-teach__line { margin: 32px 0 0; font-family: var(--font-serif); font-style: italic; font-size: clamp(20px, 2vw, 26px); color: var(--navy); max-width: 40ch; }
@media (min-width: 760px) { .v3-teach { grid-template-columns: 1fr 1fr; } }
.v3-honest__grid { display: grid; grid-template-columns: 1fr; gap: 24px 64px; align-items: start; }
.v3-honest__grid .v3__head { margin-bottom: 0; }
.v3-honest { list-style: none; margin: 0; padding: 0; }
.v3-honest li { position: relative; padding: 14px 0 14px 30px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.6; color: var(--text); }
.v3-honest li:last-child { border-bottom: 1px solid var(--line); }
.v3-honest li::before { content: ''; position: absolute; left: 0; top: 24px; width: 16px; height: 1.5px; background: var(--green); }
.v3-honest strong { color: var(--navy); font-weight: 600; }
@media (min-width: 900px) { .v3-honest__grid { grid-template-columns: 0.9fr 1.1fr; } }
.v3-three { display: grid; grid-template-columns: 1fr; gap: 18px; }
.v3-three__col { padding: 26px 24px; border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius-md); }
.v3-three__col--tlc { background: rgba(255,255,255,.06); border-color: rgba(131,192,151,.5); }
.v3-three__col h3 { font-size: 19px; margin: 0 0 14px; color: #fff; }
.v3-three__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.v3-three__col li { position: relative; padding-left: 18px; font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,.86); }
.v3-three__col li::before { content: ''; position: absolute; left: 0; top: 11px; width: 8px; height: 1.5px; background: var(--green); }
@media (min-width: 820px) { .v3-three { grid-template-columns: repeat(3, 1fr); } }
.v3-vision--four li { grid-template-columns: 64px 1fr; }
.v3-answers { margin: 0; display: grid; grid-template-columns: 1fr; gap: 0 48px; }
.v3-answers > div { padding: 20px 0; border-top: 1px solid var(--line); }
.v3-answers dt { font-family: var(--font-serif); font-style: italic; font-size: 21px; color: var(--navy); margin: 0 0 8px; }
.v3-answers dd { margin: 0; font-size: 15px; line-height: 1.65; color: var(--text); max-width: 52ch; }
@media (min-width: 820px) { .v3-answers { grid-template-columns: 1fr 1fr; } }
.v3-volumes { list-style: none; margin: 0 0 36px; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0 40px; }
.v3-volumes li { display: grid; grid-template-columns: 48px 1fr; gap: 12px; padding: 16px 0; border-top: 1px solid rgba(255,255,255,.14); }
.v3-volumes span { font-family: var(--font-serif); font-style: italic; font-weight: 600; font-size: 22px; color: var(--green); line-height: 1.1; }
.v3-volumes h3 { font-size: 16.5px; margin: 0 0 3px; color: #fff; }
.v3-volumes p { margin: 0; font-size: 14px; color: rgba(255,255,255,.78); }
@media (min-width: 760px) { .v3-volumes { grid-template-columns: 1fr 1fr; } }
.v3-tiers { display: grid; grid-template-columns: 1fr; gap: 14px; }
.v3-tiers > div { padding: 22px 22px; border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius-md); }
.v3-tiers__k { display: block; font-family: var(--font-serif); font-style: italic; font-size: 18px; color: var(--green); margin-bottom: 6px; }
.v3-tiers strong { display: block; color: #fff; font-size: 15px; margin-bottom: 8px; }
.v3-tiers p { margin: 0; font-size: 14px; color: rgba(255,255,255,.8); line-height: 1.6; }
@media (min-width: 820px) { .v3-tiers { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Tools bento (How we deliver) ---------- */
.v3-tools { display: grid; grid-template-columns: 1fr; gap: 16px; }
.v3-tool { display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,0.14); border-radius: var(--radius-md); background: rgba(255,255,255,0.03); overflow: hidden; transition: background .25s ease, border-color .25s ease, transform .25s ease; }
.v3-tool:hover { background: rgba(255,255,255,0.06); border-color: rgba(131,192,151,0.5); transform: translateY(-2px); }
.v3-tool__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--navy-deep); }
.v3-tool__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s cubic-bezier(.22,1,.36,1); }
.v3-tool:hover .v3-tool__media img { transform: scale(1.03); }
.v3-tool__body { padding: 24px 24px 26px; }
.v3-tool__num { display: block; font-family: var(--font-serif); font-style: italic; font-size: 26px; line-height: 1; color: var(--green); margin-bottom: 12px; }
.v3-tool h3 { font-size: 19px; margin: 0 0 4px; color: #fff; }
.v3-tool .v3-acad__line { margin: 0 0 10px; }
.v3-tool p { font-size: 14.5px; line-height: 1.65; color: rgba(255,255,255,0.84); margin: 0; }
.v3-tool--book { align-items: center; padding-top: 34px; background: radial-gradient(60% 50% at 50% 30%, rgba(131,192,151,.12), transparent 70%), rgba(255,255,255,0.03); }
.v3-tool--book .v3-tool__body { width: 100%; }
@media (min-width: 900px) {
  .v3-tools { grid-template-columns: repeat(6, 1fr); grid-auto-rows: auto; }
  .v3-tool { grid-column: span 2; }
  .v3-tool--wide { grid-column: span 4; }
  .v3-tool--half { grid-column: span 3; }
}
/* the 3D book */
.v3-book { --w: 190px; --h: 240px; --d: 26px; width: var(--w); height: var(--h); perspective: 1100px; margin: 8px auto 30px; }
.v3-book__inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateY(-28deg) rotateX(3deg); transition: transform .7s cubic-bezier(.22,1,.36,1); }
.v3-tool--book:hover .v3-book__inner { transform: rotateY(-14deg) rotateX(2deg); }
.v3-book__cover, .v3-book__back { position: absolute; inset: 0; border-radius: 2px 6px 6px 2px; }
.v3-book__cover { background-size: cover; background-position: center; transform: translateZ(calc(var(--d) / 2)); box-shadow: inset 6px 0 10px -6px rgba(0,0,0,.35), 22px 34px 40px -18px rgba(0,0,0,.6); }
.v3-book__back { background: #1d1d1f; transform: translateZ(calc(var(--d) / -2)); }
.v3-book__spine { position: absolute; top: 0; height: 100%; width: var(--d); left: calc(var(--d) / -2); background: linear-gradient(90deg, #111, #2a2a2c 50%, #111); transform: rotateY(90deg); }
.v3-book__pages { position: absolute; top: 3px; bottom: 3px; width: var(--d); left: calc(100% - var(--d) / 2); background: repeating-linear-gradient(90deg, #f3efe6 0 1px, #dcd6c8 1px 2px); transform: rotateY(90deg); }
.v3-book__top { position: absolute; left: 0; width: 100%; height: var(--d); top: calc(var(--d) / -2); background: repeating-linear-gradient(180deg, #f3efe6 0 1px, #dcd6c8 1px 2px); transform: rotateX(90deg); }
/* two books on one shelf */
.v3-shelf { display: flex; align-items: flex-end; justify-content: center; gap: 28px; width: 100%; padding: 6px 12px 0; margin: 8px 0 34px; }
.v3-shelf .v3-book { --w: 146px; --h: 190px; --d: 22px; margin: 0; flex: 0 0 auto; }
.v3-shelf .v3-book--b { transform: translateY(8px); }
.v3-shelf .v3-book--b .v3-book__inner { transition-delay: .06s; }
@media (max-width: 359px) { .v3-shelf { gap: 18px; } .v3-shelf .v3-book { --w: 124px; --h: 162px; --d: 18px; } }
@media (prefers-reduced-motion: reduce) { .v3-book__inner, .v3-tool__media img { transition: none; } }

/* ---------- The storytelling layer ---------- */
/* the founder's letter */
.v3-letter__grid { display: grid; grid-template-columns: 1fr; gap: 36px; align-items: start; }
.v3-letter__photo { border-radius: 50% 0 50% 50%; overflow: hidden; aspect-ratio: 1 / 1; max-width: 420px; box-shadow: 0 30px 60px -30px rgba(27,47,68,0.45); }
.v3-letter__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v3-letter__caption { font-family: var(--font-serif); font-style: italic; font-size: 17px; color: var(--text-muted); margin: 14px 0 0; }
.v3-letter__facts { list-style: none; margin: 28px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); display: grid; gap: 10px; font-size: 14px; color: var(--text); }
.v3-letter__facts strong { display: inline-block; width: 52px; font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: 18px; color: var(--navy); }
.v3-letter__text h2 { max-width: 16ch; }
.v3-letter__text > p { font-size: 17px; line-height: 1.72; color: var(--text); max-width: 62ch; margin: 0 0 18px; }
.v3-letter__text > p.v3-letter__open { font-family: var(--font-serif); font-style: italic; font-size: 26px; line-height: 1.35; color: var(--navy); margin: 22px 0 20px; }
.v3-letter__sig { display: flex; flex-direction: column; gap: 2px; margin: 30px 0 0; padding-top: 22px; border-top: 1px solid var(--line); max-width: 62ch; }
.v3-letter__name { font-family: var(--font-serif); font-style: italic; font-size: 30px; color: var(--navy); line-height: 1; }
.v3-letter__role { font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green-dark); margin-top: 8px; }
.v3-letter .v3__note { margin-top: 18px; }
@media (min-width: 900px) {
  .v3-letter__grid { grid-template-columns: 5fr 7fr; gap: 64px; }
  .v3-letter__media { position: sticky; top: 110px; }
  .v3-letter--short .v3-letter__grid { align-items: center; }
  .v3-letter--short .v3-letter__media { position: static; }
}

/* what we believe */
.v3-creed { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid rgba(255,255,255,0.14); }
.v3-creed li { display: grid; grid-template-columns: 56px 1fr; gap: 6px 16px; padding: 26px 0; border-bottom: 1px solid rgba(255,255,255,0.14); }
.v3-creed__num { grid-row: 1 / span 2; font-family: var(--font-serif); font-style: italic; font-size: 34px; line-height: 1; color: var(--green); padding-top: 2px; }
.v3-creed h3 { grid-column: 2; font-size: 22px; line-height: 1.2; color: #fff; margin: 0; letter-spacing: -0.01em; }
.v3-creed .v3-creed__line { grid-column: 2; font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: 20px; line-height: 1.35; color: rgba(255,255,255,0.82); margin: 0; max-width: 44ch; }
@media (min-width: 900px) {
  .v3-creed { grid-template-columns: repeat(2, 1fr); column-gap: 64px; }
  .v3-creed li:last-child { grid-column: 1 / -1; }
  .v3-creed li:last-child h3 { font-size: 26px; }
  .v3-creed li:last-child .v3-creed__line { font-size: 30px; max-width: none; }
}

/* the film */
.v3-film { position: relative; background-size: cover; background-position: 62% 18%; color: #fff; min-height: 520px; display: flex; align-items: center; overflow: hidden; }
.v3-film__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(27,47,68,0.94) 0%, rgba(27,47,68,0.78) 45%, rgba(27,47,68,0.35) 100%); }
.v3-film__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; padding-top: 72px; padding-bottom: 72px; }
.v3-film__copy h2 { color: #fff; max-width: 14ch; margin-bottom: 18px; }
.v3-film__copy p { color: rgba(255,255,255,0.86); max-width: 48ch; font-size: 17px; line-height: 1.65; margin: 0; }
.v3-film__play { display: inline-flex; flex-direction: column; align-items: center; gap: 16px; text-decoration: none; color: #fff; justify-self: start; }
.v3-film__btn { width: 104px; height: 104px; border-radius: 50% 0 50% 50%; background: var(--green); color: var(--navy-deep); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 24px 50px -20px rgba(0,0,0,0.6); transition: transform .35s cubic-bezier(.22,1,.36,1), background .25s ease; }
.v3-film__btn svg { width: 44px; height: 44px; margin-left: 4px; }
.v3-film__play:hover .v3-film__btn { transform: scale(1.06); background: #9fd1b0; }
.v3-film__label { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
@media (min-width: 900px) { .v3-film__grid { grid-template-columns: 1fr auto; gap: 64px; } .v3-film__play { justify-self: end; margin-right: 6vw; } }

/* stories */
.v3-tales { display: grid; gap: 40px; margin-top: 40px; }
.v3-tale { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }
.v3-tale__media { display: flex; justify-content: center; }
.v3-tale__pola { position: static; left: auto; top: auto; width: min(100%, 340px); margin: 0; padding: 14px 14px 12px; }
.v3-tale__pola figcaption { font-family: var(--font-serif); font-style: italic; font-size: 19px; color: var(--navy); text-align: center; margin-top: 12px; line-height: 1.2; }
.v3-tale__body h3 { font-size: 26px; line-height: 1.2; margin: 0 0 18px; color: var(--navy); }
.v3-tale__beats { margin: 0; padding: 0; display: grid; gap: 14px; }
.v3-tale__beat dt { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green-dark); margin: 0 0 4px; }
.v3-tale__beat dd { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--text); max-width: 58ch; }
.v3-tale__quote { margin: 22px 0 0; padding: 0 0 0 18px; border-left: 3px solid var(--green); }
.v3-tale__quote p { font-family: var(--font-serif); font-style: italic; font-size: 21px; line-height: 1.4; color: var(--navy); margin: 0; max-width: 40ch; }
@media (min-width: 900px) {
  .v3-tale { grid-template-columns: 5fr 7fr; gap: 56px; }
  .v3-tale--flip .v3-tale__media { order: 2; }
  .v3-tale--flip .v3-tale__body { order: 1; }
  .v3-tales { gap: 72px; }
}

/* is TLC for you */
.v3-decide__grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 36px; }
.v3-decide__col { border-radius: var(--radius-md); padding: 30px 28px 32px; }
.v3-decide__col h3 { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: 30px; margin: 0 0 18px; }
.v3-decide__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.v3-decide__col li { display: grid; grid-template-columns: 26px 1fr; gap: 2px 12px; }
.v3-decide__col li::before { content: ''; grid-row: 1 / span 2; width: 18px; height: 18px; margin-top: 3px; border-radius: 50% 0 50% 50%; }
.v3-decide__col li strong { grid-column: 2; font-size: 16px; line-height: 1.35; }
.v3-decide__col li span { grid-column: 2; font-size: 14px; line-height: 1.6; }
.v3-decide__col--yes { background: var(--navy); color: #fff; }
.v3-decide__col--yes h3 { color: #fff; }
.v3-decide__col--yes li::before { background: var(--green); }
.v3-decide__col--yes li strong { color: #fff; }
.v3-decide__col--yes li span { color: rgba(255,255,255,0.8); }
.v3-decide__col--no { background: var(--cream); border: 1px solid var(--line); color: var(--text); }
.v3-decide__col--no h3 { color: var(--navy); }
.v3-decide__col--no li::before { border: 1.5px solid var(--navy); background: transparent; }
.v3-decide__col--no li strong { color: var(--navy); }
.v3-decide__col--no li span { color: var(--text-muted); }
.v3-decide__col .btn { margin-top: 26px; }
@media (min-width: 900px) { .v3-decide__grid { grid-template-columns: 1fr 1fr; gap: 24px; } .v3-decide__col { padding: 38px 36px 40px; } }

/* why the experts said yes */
.v3-chap__why { margin: 18px 0 22px; padding: 16px 18px; border-radius: 10px; background: rgba(131,192,151,0.12); }
.v3-chap--deep .v3-chap__why { background: rgba(255,255,255,0.07); }
.v3-chap__why-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green-dark); margin-bottom: 6px; }
.v3-chap--deep .v3-chap__why-label { color: var(--green); }
.v3-chap__why p { margin: 0; font-size: 15.5px; line-height: 1.6; }
/* purpose, mission, vision */
.v3-pmv { position: relative; overflow: hidden; background: var(--navy); }
.v3-pmv__glow { position: absolute; inset: -20%; background: radial-gradient(50% 45% at 50% 30%, rgba(131,192,151,.16), transparent 66%), radial-gradient(40% 40% at 90% 90%, rgba(48,133,198,.12), transparent 65%); pointer-events: none; }
.v3-pmv .container { position: relative; }
.v3-pmv__top { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; padding-bottom: 44px; border-bottom: 1px solid rgba(255,255,255,.14); }
.v3-pmv__top .v3__head { margin: 0; }
.v3-pmv__top .v3__head h2 { margin-bottom: 0; }
.v3-pmv__lead { position: relative; padding: 30px 34px 32px; border: 1px solid rgba(255,255,255,.18); border-left: 3px solid var(--green); border-radius: var(--radius-md); background: rgba(255,255,255,.045); }
@media (min-width: 900px) { .v3-pmv__top { grid-template-columns: 1.1fr 1fr; gap: clamp(40px, 6vw, 88px); } }
.v3-pmv__label { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--green); margin: 0 0 14px; }
.v3-pmv__big { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.25; color: #fff; margin: 0; }
.v3-pmv__grid { display: grid; grid-template-columns: 1fr; gap: 28px 48px; margin: 44px 0 0; }
.v3-pmv__item { margin: 0; padding: 4px 0 4px 22px; border-left: 2px solid var(--green); }
.v3-pmv__item dt { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--green); margin: 0 0 10px; }
.v3-pmv__item dd { margin: 0; font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: clamp(20px, 1.7vw, 24px); line-height: 1.4; color: rgba(255,255,255,.94); max-width: 40ch; }
@media (min-width: 900px) { .v3-pmv__grid { grid-template-columns: repeat(2, 1fr); } }

/* the learning approach + why TLC (numbered, ruled) */
.v3-approach__list, .v3-reasons__list { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--line); }
.v3-approach__list li, .v3-reasons__list li { display: grid; grid-template-columns: 64px 1fr; gap: 6px 16px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.v3-approach__num, .v3-reasons__num { grid-row: 1 / span 2; font-family: var(--font-serif); font-style: italic; font-size: 22px; line-height: 1; }
.v3-approach__list h3, .v3-reasons__list h3 { grid-column: 2; font-size: 19px; line-height: 1.3; margin: 0; color: var(--navy); }
.v3-approach__list p, .v3-reasons__list p { grid-column: 2; font-size: 15px; line-height: 1.62; color: var(--text); margin: 0; max-width: 56ch; }
.v3-reasons__close { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.v3-reasons__close p { flex: 1 1 100%; font-family: var(--font-serif); font-style: italic; font-size: 21px; line-height: 1.4; color: var(--navy); margin: 0 0 8px; max-width: 54ch; }
.v3-reasons--navy .v3-reasons__list { border-top-color: rgba(255,255,255,0.14); }
.v3-reasons--navy .v3-reasons__list li { border-bottom-color: rgba(255,255,255,0.14); }
.v3-reasons--navy .v3-reasons__num { color: var(--green); }
.v3-reasons--navy .v3-reasons__list h3, .v3-reasons--navy .v3-reasons__close p { color: #fff; }
.v3-reasons--navy .v3-reasons__list p { color: rgba(255,255,255,0.8); }
@media (min-width: 900px) {
  .v3-approach__list, .v3-reasons__list { grid-template-columns: repeat(2, 1fr); column-gap: 56px; }
  .v3-approach__list li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .v3-approach__list li:last-child:nth-child(odd) p { max-width: 80ch; }
}

/* the positioning statement is long: one size down */
.v3-hero .v3-hero__title--long { font-size: clamp(32px, 4vw, 54px); }

/* the standard runs both ways */
.v3-pact__grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 36px; }
.v3-pact__col { border-radius: var(--radius-md); padding: 28px 26px 30px; background: #fff; border: 1px solid var(--line); }
.v3-pact__col h3 { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: 27px; margin: 0 0 18px; color: var(--navy); }
.v3-pact__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.v3-pact__col li { display: grid; grid-template-columns: 22px 1fr; gap: 2px 12px; }
.v3-pact__col li::before { content: ''; grid-row: 1 / span 2; width: 15px; height: 15px; margin-top: 4px; border-radius: 50% 0 50% 50%; background: var(--green); }
.v3-pact__col li strong { grid-column: 2; font-size: 15.5px; line-height: 1.35; color: var(--navy); }
.v3-pact__col li span { grid-column: 2; font-size: 14px; line-height: 1.55; color: var(--text-muted); }
.v3-pact__col--2 { background: var(--navy); border-color: var(--navy); }
.v3-pact__col--2 h3, .v3-pact__col--2 li strong { color: #fff; }
.v3-pact__col--2 li span { color: rgba(255,255,255,0.78); }
.v3-pact__col--3 li::before { background: transparent; border: 1.5px solid var(--navy); }
@media (min-width: 900px) { .v3-pact__grid { grid-template-columns: repeat(3, 1fr); gap: 22px; } }

/* careers */
.v3-pact__grid--two { grid-template-columns: 1fr; }
@media (min-width: 900px) { .v3-pact__grid--two { grid-template-columns: repeat(2, 1fr); } }
.v3-roles { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 36px; }
.v3-role { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 24px 24px 26px; border-top: 3px solid var(--green); }
.v3-role h3 { font-size: 18px; line-height: 1.3; margin: 0 0 8px; color: var(--navy); }
.v3-role__sectors { font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green-dark); margin: 0 0 10px; }
.v3-role p { font-size: 14.5px; line-height: 1.6; color: var(--text); margin: 0; }
@media (min-width: 640px) { .v3-roles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .v3-roles { grid-template-columns: repeat(4, 1fr); gap: 18px; } }
.v3-openroles { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: start; }
.v3-openroles h2 { max-width: 18ch; }
.v3-openroles > div > p:last-child { font-size: 16px; line-height: 1.65; color: var(--text); max-width: 56ch; margin: 14px 0 0; }
.v3-openroles__panel { background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 26px 26px 28px; }
.v3-openroles__label { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green-dark); margin: 0 0 14px; }
.v3-openroles__chips { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.v3-openroles__chips li { font-size: 13.5px; font-weight: 600; color: var(--navy); background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; }
@media (min-width: 900px) { .v3-openroles { grid-template-columns: 7fr 5fr; gap: 56px; } }

/* short desktop viewports: keep the whole hero above the fold */
@media (min-width: 900px) and (max-height: 800px) {
  .v3-hero { padding-top: 20px; padding-bottom: 32px; }
  .v3-hero__media { max-width: 440px; }
  .v3-hero .v3-hero__title, .v3-hero h1 { font-size: clamp(34px, 4.2vw, 52px); }
  .v3-hero .v3-hero__title--long { font-size: clamp(30px, 3.3vw, 42px); }
  .v3-hero__lead { font-size: 16px; margin-bottom: 20px; }
  .v3-hero__dots { margin: 16px 0 18px; }
}
@media (min-width: 900px) and (max-height: 740px) { .v3-hero__media { max-width: 350px; } .v3-hero { padding-top: 14px; } }

/* the two audience panels: buttons on the same line */
.v3-dual__panel .btn { margin-top: auto; align-self: flex-start; }
.v3-dual__panel ul { margin-bottom: 18px; }

/* ---------- Quiet closing call to action ---------- */
.v3-cta--quiet { background: var(--cream); border-top: 1px solid var(--line); padding-block: clamp(36px, 5vw, 56px); text-align: left; }
.v3-cta--quiet .eyebrow { color: var(--green-dark); justify-content: flex-start; }
.v3-cta--quiet .eyebrow::before { background: var(--green); }
.v3-cta--quiet__grid { display: grid; grid-template-columns: 1fr; gap: 22px; align-items: center; }
.v3-cta--quiet h2 { font-size: clamp(24px, 2.4vw, 30px); line-height: 1.15; margin: 0 0 8px; color: var(--navy); max-width: 22ch; }
.v3-cta--quiet p:not(.eyebrow) { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-muted); max-width: 58ch; }
.v3-cta--quiet .v3-accred img { filter: none; opacity: 1; }
.v3-cta--quiet__links { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
@media (min-width: 900px) { .v3-cta--quiet__grid { grid-template-columns: 1fr auto; gap: 48px; } .v3-cta--quiet__links { justify-content: flex-end; } }

/* ---------- Footer, slimmed ---------- */
.site-footer { padding: 44px 0 22px; }
.footer__top { display: none; }
.footer__cols { gap: 36px; }
@media (min-width: 800px) { .footer__cols { grid-template-columns: 1fr 1fr 1.4fr; gap: 48px; } }
.fcol { border: 0; border-radius: 0; padding: 0; }
.fcol > summary { margin-bottom: 12px; font-size: 14.5px; }
.fcol ul { gap: 6px; margin-bottom: 14px; }
.fcol ul li { font-size: 13.5px; }
.fcol--about p { font-size: 13.5px; line-height: 1.55; }
.fsocial { margin-top: 12px; }
.footer__safeguarding { margin: 14px 0 0; padding: 0; border: 0; border-radius: 0; font-size: 12.5px; line-height: 1.55; color: rgba(255,255,255,0.72); max-width: 46ch; }
.footer__bottom { margin-top: 26px; padding-top: 16px; }
.footer__bottom p { font-size: 11.5px; line-height: 1.5; }
.footer__legal li { font-size: 12px; }
.v3-accred--quiet { margin-top: 30px; padding-top: 28px; border-top-color: var(--line); display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 24px; justify-items: center; align-items: center; }
.v3-accred--quiet img { height: 44px; max-width: 160px; }
.v3-accred--quiet img[alt="Ofsted Good Provider"] { height: 58px; }
@media (min-width: 760px) { .v3-accred--quiet { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Five values, one row of teardrops (About) ---------- */
.v3-vrow { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px 20px; }
.v3-vrow__item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; }
.v3-vrow__tear { width: 92px; height: 92px; display: flex; align-items: center; justify-content: center; background: var(--navy); color: #fff; border-radius: 50% 0 50% 50%; box-shadow: 0 18px 32px -20px rgba(27,47,68,.5); margin-bottom: 20px; transition: transform .35s cubic-bezier(.22,1,.36,1); }
.v3-vrow__tear--outline { background: #fff; color: var(--navy); border: 1.5px solid var(--navy); box-shadow: none; }
.v3-vrow__tear svg { width: 38px; height: 38px; }
.v3-vrow__item:hover .v3-vrow__tear { transform: translateY(-4px); }
.v3-vrow__item h3 { font-size: 19px; line-height: 1.2; color: var(--navy); margin: 0 0 10px; }
.v3-vrow__item p { font-size: 14.5px; line-height: 1.6; color: var(--text-muted); margin: 0; max-width: 26ch; }
.v3-vrow__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 900px) { .v3-vrow { grid-template-columns: repeat(5, 1fr); gap: 24px; } .v3-vrow__item:last-child:nth-child(odd) { grid-column: auto; } }
.v3-vrow--four .v3-vrow__item p { max-width: 30ch; }
@media (min-width: 900px) { .v3-vrow--four { grid-template-columns: repeat(4, 1fr); gap: 32px; } }

/* ---------- The journey: four stages on one line ---------- */
.v3-steps { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 30px; position: relative; }
.v3-steps__item { position: relative; }
.v3-steps__num { position: relative; z-index: 1; width: 64px; height: 64px; border-radius: 50% 0 50% 50%; background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-style: italic; font-size: 26px; margin-bottom: 20px; box-shadow: 0 16px 28px -18px rgba(27,47,68,.55); }
.v3-steps__item h3 { font-size: 21px; line-height: 1.2; margin: 0 0 6px; color: var(--navy); }
.v3-steps__promise { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: 19px; line-height: 1.3; color: var(--green-dark); margin: 0 0 12px; }
.v3-steps__item p { font-size: 15px; line-height: 1.65; color: var(--text); margin: 0; max-width: 34ch; }
@media (min-width: 900px) {
  .v3-steps { grid-template-columns: repeat(4, 1fr); gap: 36px; }
  .v3-steps::before { content: ''; position: absolute; left: 32px; right: 20%; top: 32px; height: 1px; background: linear-gradient(90deg, var(--green) 0%, rgba(131,192,151,.35) 100%); }
}

/* ---------- Careers: vacancy board ---------- */
.v3-jobs__filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 22px; }
.v3-jobs__chip { font: inherit; font-size: 13px; font-weight: 600; color: var(--navy); background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.v3-jobs__chip:hover { border-color: var(--navy); }
.v3-jobs__chip.is-active { background: var(--navy); color: #fff; border-color: var(--navy); }
.v3-jobs__layout { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }
.v3-jobs__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.v3-job { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); transition: border-color .2s, box-shadow .2s; }
.v3-job.is-active { border-color: var(--navy); box-shadow: 0 18px 36px -26px rgba(27,47,68,.5); }
.v3-job__open { display: block; width: 100%; text-align: left; font: inherit; color: inherit; background: none; border: 0; padding: 20px 22px; cursor: pointer; border-radius: var(--radius-md); }
.v3-job__open:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.v3-job__area { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--green-dark); margin-bottom: 8px; }
.v3-job h3 { font-size: 19px; line-height: 1.25; margin: 0 0 6px; color: var(--navy); }
.v3-job__meta { font-size: 13.5px; color: var(--text-muted); margin: 0 0 8px; line-height: 1.45; }
.v3-job__pay { font-size: 15px; font-weight: 600; color: var(--ink); margin: 0 0 4px; }
.v3-job__type { font-size: 13px; color: var(--text-muted); margin: 0 0 10px; }
.v3-job__sum { font-size: 14px; line-height: 1.55; color: var(--text); margin: 0; }
.v3-job__inline { padding: 0 22px 22px; }
.v3-job__inline .v3-jobd { padding: 20px 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; }
.v3-jobs__detail { display: none; }
.v3-jobd { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 30px 32px 28px; }
.v3-jobd__ref { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 10px; }
.v3-jobd h3 { font-size: 26px; line-height: 1.15; margin: 0 0 18px; color: var(--navy); }
.v3-jobd__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; margin: 0 0 22px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.v3-jobd__facts div { margin: 0; }
.v3-jobd__facts dt { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 3px; }
.v3-jobd__facts dd { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--ink); }
.v3-jobd__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin: 0 0 26px; }
.v3-jobd__hint { font-size: 13px; color: var(--text-muted); max-width: 30ch; line-height: 1.45; }
.v3-jobd h4 { font-size: 15px; letter-spacing: .02em; margin: 22px 0 8px; color: var(--navy); }
.v3-jobd p { font-size: 15px; line-height: 1.65; color: var(--text); margin: 0 0 10px; }
.v3-jobd ul { margin: 0; padding-left: 20px; }
.v3-jobd li { font-size: 14.5px; line-height: 1.6; color: var(--text); margin: 0 0 5px; }
.v3-jobd__foot { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--text-muted); }
@media (min-width: 900px) {
  .v3-jobs__layout { grid-template-columns: 5fr 7fr; gap: 24px; }
  .v3-jobs__detail { display: block; position: sticky; top: 96px; max-height: calc(100vh - 116px); overflow: auto; border-radius: var(--radius-md); }
  .v3-job__inline { display: none; }
}

/* ---------- Resources: guide cards that expand into a floating window (card-expand pattern) ---------- */
.v3-guides { --radius: 18px; }
.v3-guides__grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 8px; }
.v3-guides .card { position: relative; display: flex; align-items: flex-end; text-align: left; width: 100%; border: 0; cursor: pointer; color: #fff; font: inherit; border-radius: var(--radius); overflow: hidden; isolation: isolate; min-height: clamp(280px, 34vh, 340px); padding: 0; }
.v3-guides .card.feat { min-height: clamp(320px, 40vh, 400px); }
.v3-guides .card__img, .xp-morph .card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .8s cubic-bezier(.2,.7,.2,1); display: block; }
.v3-guides .card::after, .xp-morph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(17,31,46,.92), rgba(17,31,46,.38) 55%, rgba(17,31,46,.06)); z-index: -1; }
.v3-guides .card:hover .card__img { transform: scale(1.05); }
.v3-guides .card[hidden] { display: none; }
.v3-guides .t-in, .xp-morph .t-in { padding: clamp(20px, 3vw, 32px); max-width: 54ch; display: block; }
.v3-guides .t-ey, .xp-morph .t-ey, .xp-heroin .t-ey { display: block; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--green); }
.v3-guides .t-h, .xp-morph .t-h { display: block; font-weight: 700; letter-spacing: -.02em; margin-top: 10px; line-height: 1.12; color: #fff; font-size: clamp(20px, 1.8vw, 24px); }
.v3-guides .card.feat .t-h, .xp-morph.feat .t-h { font-size: clamp(24px, 2.6vw, 34px); }
.v3-guides .t-sub, .xp-morph .t-sub { display: block; color: #e4ebf1; margin-top: 8px; font-size: 14.5px; line-height: 1.5; max-width: 44ch; opacity: .94; }
.v3-guides .t-go, .xp-morph .t-go { display: inline-flex; gap: .45rem; margin-top: 14px; font-weight: 600; color: #fff; font-size: 14px; align-items: center; }
.v3-guides .arw { transition: transform .2s; display: inline-block; }
.v3-guides .card:hover .arw { transform: translateX(6px); }
@media (min-width: 760px) { .v3-guides__grid { grid-template-columns: repeat(2, 1fr); } .v3-guides .card.feat { grid-column: 1 / -1; } }
@media (min-width: 1100px) { .v3-guides__grid { grid-template-columns: repeat(3, 1fr); } .v3-guides .card.feat { grid-column: span 2; } }

/* the pop-up */
.xp-scrim { position: fixed; inset: 0; z-index: 4900; background: rgba(12,20,29,.5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity .5s; pointer-events: none; }
.xp-scrim.on { opacity: 1; pointer-events: auto; }
.xp { position: fixed; z-index: 5000; background: #fff; border-radius: 18px; overflow: hidden; display: none; box-shadow: 0 60px 120px -30px rgba(0,0,0,.55); color: var(--text);
  transition: top .56s cubic-bezier(.32,.72,.25,1), left .56s cubic-bezier(.32,.72,.25,1), width .56s cubic-bezier(.32,.72,.25,1), height .56s cubic-bezier(.32,.72,.25,1), border-radius .56s cubic-bezier(.32,.72,.25,1); }
.xp.on { display: block; }
.xp.full { overflow-y: auto; overscroll-behavior: contain; }
.xp-bar { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; gap: 12px; padding: 12px clamp(18px, 4vw, 36px); background: var(--navy); border-bottom: 1px solid rgba(255,255,255,.14); opacity: 0; transition: opacity .4s ease .15s; }
.xp-bar__title { color: #fff; font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xp.full .xp-bar { opacity: 1; }
.xp.full:not(.xp-scrolled) .xp-bar { opacity: 0; pointer-events: none; }
.xp-bar .sp { flex: 1; }
.xp-back { background: none; border: 1px solid rgba(255,255,255,.4); color: #fff; font: inherit; font-weight: 600; font-size: 13.5px; padding: 8px 16px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.xp-back:hover { background: rgba(255,255,255,.12); }
.xp-hero { position: relative; height: auto; min-height: 100%; margin-top: -63px; display: flex; align-items: flex-end; }
.xp-hero::before { content: ""; position: absolute; inset: 0; background: var(--img) center/cover no-repeat; }
.xp-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(17,31,46,.94), rgba(17,31,46,.42) 52%, rgba(17,31,46,.06)); }
.xp-hero.side-l::after { background: linear-gradient(to right, rgba(17,31,46,.84), rgba(17,31,46,.36) 46%, rgba(17,31,46,0) 74%), linear-gradient(to top, rgba(17,31,46,.86), rgba(17,31,46,.2) 55%, rgba(17,31,46,.04)); }
.xp-hero.side-r::after { background: linear-gradient(to left, rgba(17,31,46,.84), rgba(17,31,46,.36) 46%, rgba(17,31,46,0) 74%), linear-gradient(to top, rgba(17,31,46,.86), rgba(17,31,46,.2) 55%, rgba(17,31,46,.04)); }
.xp-heroin { position: relative; z-index: 2; width: 100%; max-width: 1180px; margin: 0 auto; padding: clamp(28px, 4vw, 52px); display: flex; }
.xp-hero.side-r .xp-heroin { justify-content: flex-end; }
.xp-heroin .hcol { max-width: 56ch; }
.xp-heroin h2 { color: #fff; font-weight: 700; letter-spacing: -.025em; line-height: 1.06; font-size: clamp(28px, 4vw, 46px); margin: 10px 0 0; max-width: 20ch; }
.xp-heroin .hl-h { color: #fff; font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: clamp(20px, 2.2vw, 26px); margin: 22px 0 0; }
.xp-heroin p { color: #e4ebf1; margin: 12px 0 0; line-height: 1.65; font-size: 16px; max-width: 64ch; }
@media (max-width: 700px) { .xp-heroin { justify-content: flex-start !important; } .xp-hero.side-l::after, .xp-hero.side-r::after { background: linear-gradient(to top, rgba(17,31,46,.94), rgba(17,31,46,.45) 55%, rgba(17,31,46,.1)); } }
.xp-body { opacity: 0; transform: translateY(20px); transition: opacity .5s ease .1s, transform .5s cubic-bezier(.2,.7,.2,1) .1s; }
.xp.full .xp-body { opacity: 1; transform: none; }
.xp-read { max-width: 800px; margin: 0 auto; padding: clamp(30px, 5vh, 52px) clamp(20px, 5vw, 40px) clamp(64px, 9vh, 100px); }
.xp-read h3 { color: var(--navy); font-size: 19px; font-weight: 700; margin: 30px 0 0; }
.xp-read p { color: var(--text); margin: 12px 0 0; line-height: 1.7; font-size: 16px; }
.xp-read ul { margin: 12px 0 0; padding-left: 22px; }
.xp-read li { color: var(--text); line-height: 1.65; font-size: 15.5px; margin: 6px 0 0; }
.xp-read a { color: var(--green-dark); text-decoration: underline; text-underline-offset: 2px; }
.xp-read .xp-foot { margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--text-muted); line-height: 1.6; }
.xp-morph { position: absolute; inset: 0; z-index: 8; pointer-events: none; min-height: 0; opacity: 1; transition: opacity .38s ease; border-radius: 0; display: flex; align-items: flex-end; color: #fff; overflow: hidden; isolation: isolate; }
.xp.full .xp-morph { opacity: 0; transition: opacity .55s ease .12s; }
@media (prefers-reduced-motion: reduce) { .xp, .xp-body, .xp-hero, .xp-bar, .xp-morph { transition: none; } }

/* ---------- Numbered lists: the numeral sits in a navy teardrop everywhere ---------- */
.v3-vision__num, .v3-approach__num, .v3-reasons__num, .v3-teach li::before { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50% 0 50% 50%; background: var(--navy); color: #fff; box-shadow: 0 14px 26px -18px rgba(27,47,68,.6); padding: 0; }
.v3-vision__num { margin-top: 2px; }
.v3-reasons--navy .v3-reasons__num { background: var(--green); color: var(--navy-deep); box-shadow: none; }
.v3-creed__num { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50% 0 50% 50%; background: var(--green); color: var(--navy-deep); font-size: 19px; padding: 0; margin-top: 2px; }
.v3-creed li { grid-template-columns: 64px 1fr; }

/* ---------- At a glance (About): white band, numbers in teardrops ---------- */
.emp-trust { background: #fff; border-top: 0; border-bottom: 0; padding: clamp(36px, 5vw, 60px) 0; }
.emp-trust__row li { align-items: center; gap: 14px; }
.emp-trust__num { display: flex; align-items: center; justify-content: center; width: clamp(96px, 9vw, 120px); height: clamp(96px, 9vw, 120px); border-radius: 50% 0 50% 50%; background: var(--navy); color: #fff; font-size: clamp(26px, 2.4vw, 34px); letter-spacing: -0.02em; box-shadow: 0 22px 40px -26px rgba(27,47,68,.6); }
.emp-trust__row li:nth-child(even) .emp-trust__num { background: #fff; color: var(--navy); border: 1.5px solid var(--navy); box-shadow: none; }
.emp-trust__label { max-width: 20ch; font-size: 12.5px; color: var(--text-muted); }

/* ---------- Sector pages: the career pathway, in teardrops ---------- */
.pathway__dot { width: 96px; height: 96px; border-radius: 50% 0 50% 50%; border: 0; background: #fff; color: var(--navy); font-size: 26px; letter-spacing: -0.01em; box-shadow: 0 24px 44px -22px rgba(0,0,0,.5); position: relative; }
.pathway__dot::after { content: ''; position: absolute; left: 50%; bottom: 14px; width: 18px; height: 2px; background: var(--green); transform: translateX(-50%); }
.pathway__step h3 { font-size: 21px; margin-top: 22px; }
.pathway__step p { font-size: 15px; color: rgba(255,255,255,.84); max-width: 30ch; margin-inline: auto; }
.pathway__connect { height: 2px; background: linear-gradient(90deg, rgba(131,192,151,0) 0%, var(--green) 50%, rgba(131,192,151,0) 100%); }
.pathway__connect::after { border-color: var(--green); }
@media (min-width: 800px) { .pathway__connect { flex-basis: 64px; margin-top: -72px; } }

/* ---------- Sector hero: the expert partner's mark as the third fact ---------- */
.sec-hero__mark { justify-content: flex-end; gap: 8px; }
.sec-hero__mark img { display: block; height: 44px; width: auto; max-width: 170px; object-fit: contain; object-position: left center; }
.sec-hero__mark--tile img { height: 56px; background: #fff; padding: 5px 8px; border-radius: 6px; }
.sec-hero__mark--wide img { height: 56px; max-width: 220px; }
@media (max-width: 600px) { .sec-hero__mark img { height: 36px; max-width: 140px; } .sec-hero__mark--tile img { height: 48px; } }

/* ---------- Apprenticeships bands: the pull line that opens each sector ---------- */
.sector__panel .sector__pull { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: clamp(22px, 2vw, 27px); line-height: 1.3; color: #fff; margin: 0 0 18px; max-width: 24ch; }
.sector--light .sector__panel .sector__pull { color: var(--navy); }
.sector__panel .sector__pull + p { margin-top: 0; }

/* ---------- Policies: the library ---------- */
.pol-lib__tools { display: grid; gap: 16px; margin: 0 0 28px; }
.pol-search input { width: 100%; max-width: 560px; font: inherit; font-size: 15px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); }
.pol-search input:focus { outline: 2px solid var(--green); outline-offset: 2px; border-color: var(--navy); }
.pol-lib .v3-jobs__filters { margin: 0; }
.pol-group { margin: 0 0 34px; }
.pol-group__title { font-size: 16px; letter-spacing: .02em; color: var(--navy); margin: 0 0 10px; padding-bottom: 10px; border-bottom: 2px solid var(--navy); display: flex; align-items: baseline; gap: 10px; }
.pol-group__title span { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: 18px; color: var(--green-dark); }
.pol-rows { list-style: none; margin: 0; padding: 0; }
.pol-row__btn { text-decoration: none; display: grid; grid-template-columns: 74px 1fr auto; grid-template-areas: "code title go" "code meta go"; gap: 2px 14px; align-items: center; width: 100%; text-align: left; font: inherit; color: inherit; background: none; border: 0; border-bottom: 1px solid var(--line); padding: 14px 4px; cursor: pointer; transition: background .2s; }
.pol-row__btn:hover { background: var(--cream); }
.pol-row__btn:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.pol-row__code { grid-area: code; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; color: var(--green-dark); }
.pol-row__title { grid-area: title; font-size: 16px; font-weight: 600; color: var(--navy); line-height: 1.3; }
.pol-row__owner, .pol-row__status, .pol-row__next { grid-area: meta; font-size: 12.5px; color: var(--text-muted); }
.pol-row__owner { justify-self: start; }
.pol-row__status { justify-self: start; margin-left: 0; }
.pol-row__next { justify-self: start; }
.pol-row__btn > span[class*="pol-row__"]:nth-child(3) ~ span:not(.pol-row__go) { display: inline; }
.pol-row__go { grid-area: go; font-size: 13px; font-weight: 600; color: var(--navy); padding: 6px 14px; border: 1px solid var(--navy); border-radius: 999px; white-space: nowrap; }
.pol-row__btn:hover .pol-row__go { background: var(--navy); color: #fff; }
.pol-row__status--live { color: var(--green-dark); font-weight: 600; }
.pol-row__status--review { color: #7a5410; font-weight: 600; }
@media (min-width: 900px) {
  .pol-row__btn { grid-template-columns: 74px minmax(0, 1.6fr) minmax(0, 1fr) 150px 110px auto; grid-template-areas: "code title owner status next go"; gap: 16px; }
  .pol-row__owner { grid-area: owner; } .pol-row__status { grid-area: status; } .pol-row__next { grid-area: next; }
}
@media (max-width: 899px) { .pol-row__btn { grid-template-areas: "code title go" "code owner go" "code status go"; } .pol-row__next { display: none; } .pol-row__owner { grid-area: owner; } .pol-row__status { grid-area: status; } }
.pol-tbc { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #7a5410; background: #FEF3E0; border-radius: 4px; padding: 1px 6px; vertical-align: baseline; cursor: help; }
.pol-lib__empty { color: var(--text-muted); font-size: 15px; }

/* the reading window for a policy: no photo hero, a navy document head instead */
.xp--doc .xp-bar { opacity: 1; }
.xp--doc.full:not(.xp-scrolled) .xp-bar { opacity: 1; pointer-events: auto; }
.xp-print { margin-right: 4px; }
.xp-read--doc { max-width: 860px; padding-top: 0; }
.pol-doc__head { background: var(--navy); color: #fff; margin: 0 calc(-1 * clamp(20px, 5vw, 40px)); padding: clamp(28px, 4vw, 44px) clamp(20px, 5vw, 40px) clamp(24px, 3vw, 34px); }
.pol-doc__cat, .pol-doc__head .pol-doc__cat, .xp-read .pol-doc__cat { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--green); margin: 0 0 10px; }
.pol-doc__head h2 { color: #fff; font-size: clamp(26px, 3.2vw, 38px); line-height: 1.1; letter-spacing: -.02em; margin: 0 0 22px; max-width: 24ch; }
.pol-doc__facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 24px; margin: 0; padding: 18px 0 0; border-top: 1px solid rgba(255,255,255,.16); }
.pol-doc__facts div { margin: 0; }
.pol-doc__facts dt { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.62); margin: 0 0 3px; }
.pol-doc__facts dd { margin: 0; font-size: 13.5px; line-height: 1.45; color: #fff; }
.pol-doc__applies, .xp-read .pol-doc__applies { margin: 18px 0 0; font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,.86); }
.pol-doc__applies strong { color: #fff; margin-right: 6px; }
@media (min-width: 760px) { .pol-doc__facts { grid-template-columns: repeat(3, 1fr); } }
.pol-doc__body { padding-top: 10px; }
.pol-doc__sec { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; font-size: 19px; color: var(--navy); margin: 34px 0 6px; }
.pol-doc__n { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: 22px; color: var(--green-dark); min-width: 1.4em; }
.pol-doc__sec small { font-size: 12px; font-weight: 500; color: var(--text-muted); letter-spacing: .02em; }
.xp-read--doc p { font-size: 15.5px; line-height: 1.7; margin: 12px 0 0; }
.xp-read--doc ul { margin: 10px 0 0; padding-left: 22px; }
.xp-read--doc li { font-size: 15px; line-height: 1.62; margin: 5px 0 0; }
.pol-note { margin: 18px 0 0; padding: 16px 20px; border-radius: 10px; border-left: 4px solid var(--navy); background: var(--cream); }
.pol-note strong { display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--navy); margin-bottom: 4px; }
.pol-note p { margin: 0; font-size: 15px; }
.pol-note--sky { background: #EAF1F5; border-left-color: var(--navy); }
.pol-note--info { background: var(--cream); border-left-color: var(--green-dark); }
.pol-note--warn { background: #FEF3E0; border-left-color: #b8791d; }
.pol-note--warn strong { color: #7a5410; }
.pol-note--risk { background: #F9E9EC; border-left-color: #7d1f30; }
.pol-note--risk strong { color: #7d1f30; }
.pol-table { margin: 16px 0 0; overflow-x: auto; }
.pol-table table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.5; }
.pol-table th { text-align: left; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--navy); background: var(--cream); padding: 10px 12px; border-bottom: 2px solid var(--navy); vertical-align: bottom; }
.pol-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--text); }
.pol-kv { margin: 22px 0 0; padding: 16px 20px; border: 1px solid var(--line); border-radius: 10px; }
.pol-kv h4 { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--navy); margin: 0 0 8px; }
.pol-kv dl { margin: 0; display: grid; gap: 6px; }
.pol-kv dl div { display: grid; grid-template-columns: 82px 1fr; gap: 10px; font-size: 14px; }
.pol-kv dt { font-weight: 700; color: var(--green-dark); letter-spacing: .04em; }
.pol-kv dt a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.pol-kv dd { margin: 0; color: var(--text); }
.pol-doc__foot { margin-top: 36px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--text-muted); line-height: 1.6; }
.pol-doc__foot a { color: var(--green-dark); }
.pol-docs { display: none; }
@media print {
  body > *:not(.xp) { display: none !important; }
  .xp { display: block !important; position: static !important; width: auto !important; height: auto !important; box-shadow: none !important; border-radius: 0 !important; overflow: visible !important; }
  .xp-bar, .xp-scrim { display: none !important; }
  .xp-body { opacity: 1 !important; transform: none !important; }
  .pol-doc__head { background: #fff !important; color: #000; margin: 0; padding: 0 0 12px; border-bottom: 2px solid #000; }
  .pol-doc__head h2, .pol-doc__facts dd, .pol-doc__applies, .pol-doc__applies strong { color: #000 !important; }
  .pol-doc__facts dt, .pol-doc__cat { color: #444 !important; }
  .pol-tbc { border: 1px solid #999; background: none; color: #444; }
}

/* =========================================================================
   ERROR PAGES (401, 402, …) — error.php, wired via ErrorDocument in .htaccess
   ========================================================================= */
.err-hero .hero__media .shape-wrapper { overflow: visible; }
.err-badge {
  position: absolute;
  left: -6px;
  bottom: 8%;
  z-index: 3;
  padding: 14px 22px 16px;
  background: var(--navy-deep);
  color: var(--white);
  border-radius: var(--radius-md);
  box-shadow: 0 14px 34px rgba(10, 48, 80, 0.28);
}
.err-badge strong {
  display: block;
  font-size: clamp(44px, 6vw, 64px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.err-badge span {
  display: block;
  margin-top: 6px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.8;
}
.err-meta {
  margin-top: 28px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text-muted);
}
.err-meta a { color: var(--green-dark); }
.err-meta code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  padding: 2px 7px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  word-break: break-all;
}
@media (max-width: 719px) {
  .err-badge { left: 0; bottom: 4%; padding: 10px 16px 12px; }
}