/* =============================================================
   GMFJ website — base layout & components.
   Consumes the brand tokens from brand.css (single source of
   brand truth, shared with the PWA). This file adds the full-width
   *website* chrome (header, footer, grids) that the app canvas
   does not need.
   ============================================================= */

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

/* scroll-padding-top keeps every in-page anchor (the legal "on this page" index, any #id link)
   clear of the sticky header — without it the target heading lands underneath it. */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--site-sticky-top);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fnt-body);
  line-height: 1.55;
  color: var(--text);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  color: var(--text-strong);
  line-height: 1.15;
  margin: 0 0 var(--space-4);
}
h1 { font-size: var(--fnt-display-2); }
h2 { font-size: var(--fnt-h1); }
h3 { font-size: var(--fnt-h2); }
h4 { font-size: var(--fnt-h3); }

a { color: var(--indigo-300); text-decoration: none; }
a:hover { text-decoration: underline; }

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

/* ---- Layout ---- */
.container { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: var(--space-5); }
.section { padding-block: var(--space-7); }
.section--alt { background: var(--surface-alt); }

.grid { display: grid; gap: var(--space-5); }
@media (min-width: 640px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.page-main { min-height: 60vh; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-display); font-weight: var(--font-display-weight);
  font-size: var(--fnt-body); line-height: 1;
  padding: 0.75rem 1.35rem; border-radius: var(--radius-pill);
  border: 2px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn--primary { background: var(--brand-cta); color: #fff; }
.btn--primary:hover { box-shadow: var(--shadow-md); }
.btn--accent { background: var(--brand-accent); color: #fff; }
.btn--ghost { background: transparent; border-color: var(--line); color: var(--text-strong); }
.btn--ghost:hover { border-color: var(--indigo-300); color: var(--indigo-300); }
.btn--lg { padding: 0.95rem 1.8rem; font-size: var(--fnt-h4); }

/* ---- Cards ---- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  overflow: hidden; transition: box-shadow .15s ease, transform .15s ease;
}
/* Cards lift on hover — the whole card is the link, so an underline on its text reads as noise. */
.card--link:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); text-decoration: none; }
.card--link:hover, .card--link:hover * { text-decoration: none; }
.card__body { padding: var(--space-5); }

.chip {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: var(--fnt-small); font-weight: 500;
  padding: 0.2rem 0.6rem; border-radius: var(--radius-pill);
  background: var(--surface-soft); color: var(--text-strong);
}
.chip--new { background: var(--brand-accent); color: #fff; }

/* ---- Header ---- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header__bar { display: flex; align-items: center; gap: var(--space-5); height: 4rem; }
.site-header__logo { display: inline-flex; align-items: center; flex: 0 0 auto; }

/* Logo swap: the dark-ink mark on light surfaces, the white mark on dark ones.
   Driven purely by the data-theme attribute, so the right one is correct at first paint. */
.site-logo { height: 2.1rem; width: auto; display: block; }
.site-logo--on-dark { display: none; }
:root[data-theme="dark"] .site-logo--on-light { display: none; }
:root[data-theme="dark"] .site-logo--on-dark { display: block; }
@media (min-width: 900px) { .site-logo { height: 2.4rem; } }

/* ---- Theme toggle ---- */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem; padding: 0;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--surface-alt); color: var(--text-strong);
  cursor: pointer; transition: background-color .15s ease, border-color .15s ease;
}
.theme-toggle:hover { border-color: var(--brand-accent); color: var(--brand-accent); }
.theme-toggle:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 2px; }
/* Show the icon for the theme you'd switch TO: a moon while light ("press for dark"), a sun while
   dark. The button's aria-label carries the meaning either way, so the icon never has to. */
.theme-toggle__icon--sun { display: none; }
.theme-toggle__icon--moon { display: block; }
:root[data-theme="dark"] .theme-toggle__icon--sun { display: block; }
:root[data-theme="dark"] .theme-toggle__icon--moon { display: none; }
@media (prefers-reduced-motion: reduce) { .theme-toggle { transition: none; } }
/* ---- Primary nav (desktop) ---- */
.site-nav { display: none; margin-left: auto; }
.site-nav__list { display: flex; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.site-nav__item { position: relative; }
.site-nav__item > a {
  display: block; padding: 0.5rem 0.7rem; border-radius: var(--radius);
  color: var(--text-strong); font-weight: 600; white-space: nowrap;
}
.site-nav__item > a:hover { color: var(--brand-accent); background: var(--surface-alt); text-decoration: none; }
.has-menu > a::after { content: "▾"; margin-left: 0.35rem; font-size: 0.7em; opacity: .6; }

/* Dropdowns open on hover AND focus-within, so they're usable by keyboard with no JavaScript. */
.site-menu {
  position: absolute; top: 100%; left: 0; z-index: 60; min-width: 17rem;
  display: none; padding: var(--space-3);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
.has-menu:hover > .site-menu, .has-menu:focus-within > .site-menu { display: block; }
.site-menu a { display: block; padding: 0.5rem 0.6rem; border-radius: var(--radius); color: var(--text-strong); }
.site-menu a:hover { background: var(--surface-alt); text-decoration: none; }
.site-menu a strong { display: block; font-weight: 700; }
.site-menu a span { display: block; font-size: var(--fnt-small); color: var(--text-muted); }
.site-menu--wide { min-width: 30rem; right: auto; }
.site-menu__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.site-menu__heading {
  display: block; padding: 0 0.6rem; margin-bottom: 0.35rem;
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-muted); font-weight: 700;
}
.site-menu__all { margin-top: var(--space-2); border-top: 1px solid var(--line); padding-top: var(--space-3) !important; font-weight: 600; color: var(--brand-accent) !important; }

.site-header__actions { display: flex; gap: var(--space-2); margin-left: auto; align-items: center; }
.site-nav + .site-header__actions { margin-left: var(--space-4); }
@media (min-width: 1040px) { .site-nav { display: block; } .site-header__actions { margin-left: var(--space-4); } }

/* ---- Header search ----
   A button at every width, not a field: it opens the full search page where the filters,
   distance search and sorting live, rather than starting a bare keyword query from the bar. */
.site-search-btn { display: inline-flex; }

/* ---- Mobile menu ----
   A <details> disclosure: no JavaScript, and it degrades to an open list if CSS fails. */
.site-burger { position: relative; }
.site-burger > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem; border-radius: var(--radius-pill);
  border: 1px solid var(--line); background: var(--surface-alt); color: var(--text-strong);
}
.site-burger > summary::-webkit-details-marker { display: none; }
.site-burger[open] > summary { border-color: var(--brand-accent); color: var(--brand-accent); }
.site-burger__panel {
  position: absolute; right: 0; top: calc(100% + 0.5rem); z-index: 70;
  width: min(20rem, calc(100vw - 2rem));
  max-height: min(70vh, 32rem); overflow-y: auto;
  padding: var(--space-3);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
.site-burger__panel a { display: block; padding: 0.55rem 0.6rem; border-radius: var(--radius); color: var(--text-strong); font-weight: 500; }
.site-burger__panel a:hover { background: var(--surface-alt); text-decoration: none; }
.site-burger__panel .site-menu__heading { margin-top: var(--space-3); }
.site-burger__panel .site-menu__heading:first-child { margin-top: 0; }
@media (min-width: 1040px) { .site-burger { display: none; } }

/* Trim the header on small screens so the logo and primary action always fit. */
@media (max-width: 620px) { .hide-sm { display: none !important; } }

/* ---- Footer ---- */
.site-footer { background: var(--brand-navy); color: #dfe4f2; padding-block: var(--space-7) var(--space-5); margin-top: var(--space-7); }
/* The footer is navy in BOTH themes, so it always takes the white mark. */
.site-footer__logo { display: inline-block; margin-bottom: var(--space-5); }
.site-footer__logo img { height: 2.4rem; width: auto; display: block; }
.site-footer a { color: #dfe4f2; }
.site-footer a:hover { color: #fff; }
.site-footer h4 { color: #fff; font-size: var(--fnt-h4); margin-bottom: var(--space-3); }
.site-footer__cols { display: grid; gap: var(--space-6); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .site-footer__cols { grid-template-columns: repeat(4, 1fr); } }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.site-footer__small { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid rgba(255,255,255,.15); font-size: var(--fnt-small); display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between; }

/* ---- Hero ---- */
.hero { background: var(--brand-gradient); color: #fff; padding-block: var(--space-7); }
.hero h1 { color: #fff; font-size: var(--fnt-display-1); }
.hero p { font-size: var(--fnt-h4); max-width: 42ch; opacity: .95; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }

/* ---- Forms ----
   Match every text-like control by EXCLUSION. An input[type="text"] selector silently misses
   <input> with no type attribute — which is exactly what Blazor's @bind renders — and also
   date/number/password, leaving unstyled shrink-wrapped native boxes next to styled selects. */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="range"]),
select,
textarea {
  width: 100%; font: inherit; color: var(--text-strong);
  padding: 0.6rem 0.8rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface);
  /* Native pickers (date, select popup) follow the page theme via :root color-scheme. */
  color-scheme: inherit;
}
textarea { resize: vertical; min-height: 5rem; line-height: 1.55; }
select { padding-right: 2rem; cursor: pointer; }

input::placeholder, textarea::placeholder { color: var(--text-muted); opacity: 1; }
input:disabled, select:disabled, textarea:disabled {
  background: var(--surface-alt); color: var(--text-muted); cursor: not-allowed;
}
input[type="checkbox"], input[type="radio"] {
  width: 1.05rem; height: 1.05rem; flex: 0 0 auto;
  accent-color: var(--brand-accent); cursor: pointer;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--indigo-300); outline-offset: 1px; border-color: var(--indigo-300); }
label { font-weight: 600; color: var(--text-strong); }

/* ---- Navigation progress bar ----
   Indeterminate: we can't know how long the server will take, and a fake percentage is worse
   than an honest "working on it". */
.nav-progress {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 9999;
  pointer-events: none; overflow: hidden;
  opacity: 0; transition: opacity .15s ease;
}
.nav-progress.is-active { opacity: 1; }
.nav-progress::before {
  content: ""; display: block; height: 100%; width: 35%;
  background: var(--brand-gradient);
  animation: nav-progress-slide 1.1s ease-in-out infinite;
}
@keyframes nav-progress-slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(340%); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-progress::before { animation: none; width: 100%; }
  .nav-progress { transition: none; }
}

/* Content settles in rather than snapping — subtle, and skipped for reduced-motion. */
.fade-in { animation: fade-in-up .28s ease-out both; }
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .fade-in { animation: none; } }

/* ---- Skeleton placeholders ---- */
.skeleton {
  display: block; border-radius: var(--radius);
  background: linear-gradient(90deg, var(--surface-alt) 25%, var(--surface-soft) 37%, var(--surface-alt) 63%);
  background-size: 400% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
@keyframes skeleton-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }

/* Visible to screen readers only — status messages that don't need to be on screen. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- App promo band ---- */
.app-promo {
  display: grid; gap: var(--space-5); align-items: center;
  grid-template-columns: 1fr;
  margin-block: var(--space-6);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--brand-navy); color: #fff;
  background-image: radial-gradient(circle at 110% 10%, rgba(198,11,136,.5), transparent 55%);
}
@media (min-width: 860px) { .app-promo { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-7); } }
.app-promo--compact { padding: var(--space-5); grid-template-columns: 1fr; }
.app-promo__eyebrow { font-size: var(--fnt-small); font-weight: 700; opacity: .85; }
.app-promo h2 { color: #fff; margin: var(--space-2) 0 var(--space-2); }
.app-promo p { color: rgba(255,255,255,.9); margin: 0; max-width: 52ch; }
.app-promo__list { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-2); }
.app-promo__list li { display: flex; align-items: flex-start; gap: var(--space-3); color: rgba(255,255,255,.95); font-size: var(--fnt-small); }
.app-promo__list svg { flex: 0 0 auto; color: var(--mint-100); margin-top: .15rem; }
.app-promo__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); align-items: center; }
.app-promo .btn--ghost { border-color: rgba(255,255,255,.55); color: #fff; }

/* Store buttons. Replace with the official Apple/Google badge artwork when supplied — their
   brand guidelines require the official assets in production. */
.app-store {
  display: inline-flex; align-items: center; gap: var(--space-3);
  padding: 0.55rem 1rem; border-radius: var(--radius);
  background: #fff; color: var(--brand-ink); border: 1px solid transparent;
  text-decoration: none; font-weight: 700; line-height: 1.15;
}
.app-store:hover { text-decoration: none; opacity: .92; }
.app-store span { display: grid; }
.app-store small { font-weight: 500; font-size: 0.65rem; opacity: .75; }
.app-store--light { background: #fff; }

.app-promo__art { display: flex; align-items: center; gap: var(--space-5); }
.app-promo__art img { max-width: 12rem; height: auto; display: block; }
.app-promo__qr { display: none; text-align: center; }
.app-promo__qr span { display: block; font-size: 0.7rem; color: rgba(255,255,255,.85); margin-top: 0.35rem; }
/* Scanning the screen you're reading makes no sense — desktop only. */
@media (min-width: 860px) { .app-promo__qr { display: block; } }

/* The generated SVG has its own quiet zone, but it's part of the image and scales with it, so the
   card adds real padding too — a QR pressed against a coloured edge is measurably harder to scan.
   aspect-ratio + height:auto keeps the code square no matter what box it's dropped into; stretching
   a QR in one axis stops it scanning altogether. */
.qr {
  background: #fff; padding: 0.6rem; border-radius: var(--radius);
  aspect-ratio: 1; max-width: 100%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.qr svg { width: 100%; height: auto; max-height: 100%; display: block; }

/* ---- /app page ---- */
.app-hero { display: grid; gap: var(--space-6); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 860px) { .app-hero { grid-template-columns: minmax(0, 1fr) auto; } }
.app-hero__qr { display: none; text-align: center; color: #fff; }
.app-hero__qr strong { display: block; margin-top: var(--space-3); }
.app-hero__qr span { display: block; font-size: var(--fnt-small); opacity: .85; }
@media (min-width: 860px) { .app-hero__qr { display: block; } }
.app-shots { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); margin-top: var(--space-4); }
.app-shots img { width: 100%; height: auto; border-radius: var(--radius-lg); border: 1px solid var(--line); display: block; }

/* ---- Industry (sector) cards ---- */
.sector-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 620px) { .sector-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .sector-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sector-card {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-5); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  text-decoration: none; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.sector-card:hover { border-color: var(--brand-accent); transform: translateY(-2px); box-shadow: var(--shadow-md); text-decoration: none; }
.sector-card__top { display: flex; align-items: center; justify-content: space-between; }
.sector-card__icon {
  width: 2.6rem; height: 2.6rem; border-radius: var(--radius);
  background: var(--surface-alt); color: var(--brand-accent);
  display: inline-flex; align-items: center; justify-content: center;
}
/* A quiet, labelled roundel: the count is useful context, not the headline — the sector name is.
   Muted surface + small caps keeps it legible without competing with the title. */
.sector-card__count {
  display: inline-flex; align-items: baseline; gap: 0.3rem;
  padding: 0.2rem 0.6rem; border-radius: var(--radius-pill);
  background: var(--surface-alt); border: 1px solid var(--line);
  color: var(--text-muted); font-size: var(--fnt-small); line-height: 1.4;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.sector-card__count b { font-weight: 700; color: var(--text-strong); }
.sector-card:hover .sector-card__count { border-color: var(--brand-accent); }
.sector-card__name { margin: 0; font-size: var(--fnt-h3); color: var(--text-strong); }
.sector-card__blurb { margin: 0; color: var(--text-muted); font-size: var(--fnt-small); line-height: 1.6; }
.sector-card__cta { margin-top: auto; font-size: var(--fnt-small); font-weight: 600; color: var(--brand-accent); }
@media (prefers-reduced-motion: reduce) { .sector-card { transition: none; } .sector-card:hover { transform: none; } }

/* ---- Career DNA promo ---- */
.dna-promo { display: grid; gap: var(--space-6); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 940px) { .dna-promo { grid-template-columns: minmax(0, 1fr) auto; } }
.dna-promo__eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--brand-accent); font-weight: 700; font-size: var(--fnt-small); }
.dna-promo h2 { margin: var(--space-2) 0 var(--space-3); }
.dna-promo__list { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-2); }
.dna-promo__list li { display: flex; align-items: flex-start; gap: var(--space-3); color: var(--text-strong); }
.dna-promo__list svg { flex: 0 0 auto; color: var(--success); margin-top: 0.2rem; }

.dna-promo__cards { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 560px) { .dna-promo__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dna-promo__card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--space-4);
  display: grid; gap: 0.25rem; justify-items: center; text-align: center;
}
.dna-promo__card strong { color: var(--text-strong); font-size: var(--fnt-h4); }
.dna-promo__tag {
  font-size: 0.65rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700;
  color: var(--text-muted); background: var(--surface-alt);
  padding: 0.1rem 0.5rem; border-radius: var(--radius-pill);
}

/* ---- Benefits callout ---- */
.callout { margin-block: var(--space-6); }
.callout__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); }
.callout__head h2 { margin: 0; }
.callout__intro { margin: var(--space-2) 0 0; color: var(--text-muted); max-width: 60ch; }
.callout__badge { flex: 0 0 auto; color: var(--brand-accent); }
.callout__badge svg { width: 2.5rem; height: 2.5rem; }

.callout__grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 680px) { .callout__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .callout__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.benefit {
  background: var(--surface-alt); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--space-5);
}
.benefit__label {
  display: block; color: var(--brand-accent); font-weight: 700;
  font-size: var(--fnt-small); margin-bottom: var(--space-2);
}
.benefit__title { margin: 0 0 var(--space-3); font-size: var(--fnt-h3); color: var(--text-strong); }
.benefit__body { margin: 0; color: var(--text-muted); line-height: 1.65; }
.benefit__body a { color: var(--brand-accent); font-weight: 600; }

/* Final tile: the action, visually distinct from the reading material. */
.callout__cta {
  display: flex; flex-direction: column; justify-content: center; gap: var(--space-3);
  padding: var(--space-5); border-radius: var(--radius-lg);
  background: var(--brand-navy); color: #fff;
  background-image: radial-gradient(circle at 120% 0%, rgba(198,11,136,.55), transparent 60%);
}
.callout__cta h3 { margin: 0; color: #fff; font-size: var(--fnt-h3); }
.callout__cta p { margin: 0; color: rgba(255,255,255,.85); font-size: var(--fnt-small); }
.callout__cta .btn { align-self: flex-start; }

/* ---- Vacancy cards ---- */
.vcard { display: flex; flex-direction: column; gap: var(--space-3); height: 100%; }
.vcard__head { display: flex; align-items: flex-start; gap: var(--space-3); }
.vcard__logo {
  width: 3rem; height: 3rem; flex: 0 0 auto; border-radius: var(--radius);
  background: #fff; object-fit: contain; padding: 0.25rem; border: 1px solid var(--line);
}
.vcard__initials {
  width: 3rem; height: 3rem; flex: 0 0 auto; border-radius: var(--radius);
  background: var(--brand-gradient); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700;
}
.vcard__title { font-size: var(--fnt-h4); font-weight: 700; color: var(--text-strong); margin: 0; }
.vcard__employer { color: var(--text-muted); font-size: var(--fnt-small); }
.vcard__facts { display: grid; gap: 0.35rem; font-size: var(--fnt-small); color: var(--text-muted); }
/* DIRECT children only — a nested span must stay inline flow, or a flex context here would
   make the browser ignore its <br> and lay label/value out side by side. */
.vcard__facts > span { display: flex; align-items: center; gap: var(--space-2); }
.vcard__facts svg { flex: 0 0 auto; opacity: .8; }

/* ---- Opportunity masthead ----
   Bigger than a card logo so it holds its own against the h1, and scales with the fluid type
   scale so a two-line title doesn't leave it looking undersized. Descendant selectors beat the
   base .vcard__logo/.vcard__initials sizing. */
.opp-masthead { display: flex; align-items: center; gap: var(--space-4); }
.opp-masthead .vcard__logo,
.opp-masthead .vcard__initials {
  width: clamp(4.5rem, 8vw, 6rem);
  height: clamp(4.5rem, 8vw, 6rem);
  border-radius: var(--radius-lg);
}
.opp-masthead .vcard__initials { font-size: var(--fnt-h2); }
/* Once the title wraps to several lines, top-align so the logo sits with the first line
   rather than drifting to the vertical middle of the block. */
@media (max-width: 640px) { .opp-masthead { align-items: flex-start; gap: var(--space-3); } }

/* ---- Opportunity sidebar facts: icon, label above value ---- */
/* Reset the UA's 40px <dd> indent, or every value sits offset from the label above it. */
.opp-facts, .opp-facts dt, .opp-facts dd { margin: 0; padding: 0; }
.opp-facts { display: grid; gap: var(--space-4); }
.opp-facts__row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.opp-facts__icon { color: var(--text-muted); margin-top: 0.15rem; display: inline-flex; }
.opp-facts__label { display: block; font-size: var(--fnt-small); font-weight: 600; color: var(--text-muted); line-height: 1.3; }
.opp-facts__value { display: block; color: var(--text-strong); font-weight: 600; line-height: 1.4; }
.vcard__foot { margin-top: auto; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; padding-top: var(--space-2); }
.vcard__provider { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fnt-small); color: var(--text-muted); }
.vcard__provider img { width: 1.4rem; height: 1.4rem; object-fit: contain; background: #fff; border-radius: 3px; padding: 1px; }

/* ---- Search filters ---- */
.filter-group { border: 0; padding: 0; margin: 0; }
.filter-group legend { font-weight: 700; font-size: var(--fnt-small); color: var(--text-strong); padding: 0; margin-bottom: var(--space-2); }
/* Checkbox + label: align to the first line and let long names wrap under themselves,
   not under the checkbox. */
.filter-check {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-2);
  align-items: start; font-size: var(--fnt-small); font-weight: 400;
  line-height: 1.35; padding: 0.15rem 0;
}
.filter-check input[type="checkbox"] { margin-top: 0.1rem; }
.filter-check .count { color: var(--text-muted); }
.filter-scroll { max-height: 17rem; overflow-y: auto; padding-right: var(--space-2); }

/* ---- Advert detail cards (skills, qualifications, training, prospects) ---- */
.detail-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 780px) { .detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.detail-card { display: flex; flex-direction: column; }
.detail-card__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.detail-card__head h2 { margin: 0; font-size: var(--fnt-h3); }
.detail-card__icon {
  width: 2.4rem; height: 2.4rem; flex: 0 0 auto; border-radius: var(--radius);
  background: var(--surface-alt); color: var(--brand-accent);
  display: inline-flex; align-items: center; justify-content: center;
}
/* Advert copy often arrives as one run of asterisk-separated text — keep it readable. */
.detail-card__body { font-size: var(--fnt-small); line-height: 1.7; }
.detail-card__body ul { padding-left: 1.1rem; margin: 0; }
.detail-card__body p:last-child { margin-bottom: 0; }

/* ---- Key facts strip ----
   align-items:stretch so every accent bar runs the full height of its row — otherwise a value
   that wraps (e.g. "15 months (Fixed Term)") leaves the bars beside it visibly short. */
.keyfacts {
  display: grid; gap: var(--space-4) var(--space-5);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}
@media (min-width: 620px) { .keyfacts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 980px) { .keyfacts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.keyfact {
  display: grid; align-content: start; gap: 0.2rem; height: 100%;
  padding-left: var(--space-3); border-left: 3px solid var(--brand-accent);
}
.keyfact__label {
  font-size: 0.72rem; line-height: 1.3; color: var(--text-muted);
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
}
/* Smaller than body: these are scannable facts, not prose — and it keeps most values on one line. */
.keyfact__value { font-size: var(--fnt-small); line-height: 1.35; color: var(--text-strong); font-weight: 700; }

/* ---- Static map ----
   Composed from OSM tiles rather than an embed, so there is nothing to interact with: no zoom
   controls and no scroll-wheel capture when the pointer passes over it. */
.staticmap {
  position: relative; overflow: hidden; width: 100%;
  border-radius: var(--radius-lg); background: var(--surface-alt);
  border: 1px solid var(--line);
}
.staticmap__plane { position: absolute; left: 50%; top: 0; transform: translateX(-50%); }
.staticmap__plane img { position: absolute; display: block; width: 256px; height: 256px; }
.staticmap__pin {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -100%);
  color: var(--brand-cta); filter: drop-shadow(0 2px 3px rgba(0,0,0,.5));
}
.staticmap__pin svg { width: 2.25rem; height: 2.25rem; stroke-width: 2.5; fill: #fff; }
.staticmap__attr {
  position: absolute; right: 0; bottom: 0;
  font-size: 0.65rem; line-height: 1.6; padding: 0 0.4rem;
  background: rgba(255,255,255,.75); color: #333; border-top-left-radius: var(--radius);
}
.staticmap__attr a { color: #333; }
/* Tiles are photographic map imagery — keep them legible in dark theme without inverting them. */
:root[data-theme="dark"] .staticmap__plane { filter: brightness(.85) contrast(1.05); }

/* ---- Search layout ---- */
.search-layout { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 900px) { .search-layout { grid-template-columns: 18rem 1fr; } }
.search-filters { position: sticky; top: var(--site-sticky-top); }
.search-filters form { background: var(--surface-alt); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-5); }

/* ---- Opportunity detail ---- */
.opp-layout { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 900px) { .opp-layout { grid-template-columns: 1fr 20rem; } }
.opp-body { line-height: 1.7; }
.opp-body h2, .opp-body h3 { margin-top: var(--space-5); }
.opp-body ul { padding-left: 1.25rem; }
/* Stick the ASIDE, not the card inside it. A sticky element can only travel within its
   containing block, and `align-items: start` sizes the aside to exactly its content — so a
   sticky card had nowhere to go and simply never moved. The aside's containing block is the
   grid, which is as tall as the article column, so it has the full page to travel.
   Only from 900px up, where the two-column layout actually exists. */
@media (min-width: 900px) {
  .opp-layout > aside { position: sticky; top: var(--site-sticky-top); }
}

/* ---- Utilities ---- */
.text-muted { color: var(--text-muted); }

/* Clamp long copy to N lines instead of letting it set the card's height. */
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* Safety net: an unbroken string (URL, long token) must never blow out a card's width. */
.card__body { overflow-wrap: anywhere; }
.text-center { text-align: center; }
.stack { display: grid; gap: var(--space-4); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* ---- Blazor error UI ---- */
#blazor-error-ui {
  background: var(--warning); color: var(--brand-ink);
  bottom: 0; box-shadow: var(--shadow-md); display: none;
  left: 0; padding: 0.75rem 1.25rem; position: fixed; width: 100%; z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

/* ---------------------------------------------------------------------------
   Small print (privacy, terms, cookies, about, accreditations, contact)
   Long-form text pages. The priorities are a readable measure, a sticky index,
   and a print stylesheet — people do print these.
   --------------------------------------------------------------------------- */

.legal-hero {
  background: var(--surface-alt);
  border-bottom: 1px solid var(--line);
  padding-block: var(--space-7) var(--space-6);
}
.legal-hero h1 { margin-bottom: var(--space-3); }
.legal-hero__standfirst {
  color: var(--text-muted); font-size: var(--fnt-h4);
  max-width: 46rem; margin-bottom: var(--space-3);
}
.legal-hero__updated {
  color: var(--text-muted); font-size: var(--fnt-small); margin-bottom: 0;
}

.crumbs {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  font-size: var(--fnt-small); color: var(--text-muted);
  margin-bottom: var(--space-4);
}
.crumbs a { color: var(--text-muted); }
.crumbs a:hover { color: var(--text-strong); }

.legal-shell { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 62rem) {
  .legal-shell { grid-template-columns: 16rem minmax(0, 1fr); gap: var(--space-7); }
}

.legal-toc { position: sticky; top: var(--site-sticky-top); display: none; }
@media (min-width: 62rem) { .legal-toc { display: block; } }
.legal-toc h2 {
  font-size: var(--fnt-small); text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted); margin-bottom: var(--space-3);
}
.legal-toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); }
.legal-toc li { margin: 0; }
.legal-toc a {
  display: block; padding: 0.35rem 0 0.35rem var(--space-4);
  margin-left: -2px; border-left: 2px solid transparent;
  font-size: var(--fnt-small); color: var(--text-muted); line-height: 1.35;
}
.legal-toc a:hover { color: var(--text-strong); }
.legal-toc a.is-current {
  color: var(--brand-cta); border-left-color: var(--brand-cta); font-weight: 600;
}

/* ~68 characters is the comfortable reading measure for body copy. */
.legal-body { max-width: 44rem; }
.legal-body h2 {
  font-size: var(--fnt-h2); margin-top: var(--space-7); margin-bottom: var(--space-4);
  padding-top: var(--space-2); scroll-margin-top: var(--space-6);
}
.legal-body h2:first-child { margin-top: 0; }
.legal-body h3 { font-size: var(--fnt-h4); margin-top: var(--space-5); margin-bottom: var(--space-3); }
.legal-body p, .legal-body li { line-height: 1.7; }
.legal-body ul, .legal-body ol { margin: 0 0 var(--space-4); padding-left: var(--space-5); }
.legal-body li { margin-bottom: var(--space-2); }
.legal-body li > ul, .legal-body li > ol { margin-top: var(--space-2); }

.legal__lede { font-size: var(--fnt-h4); color: var(--text-strong); font-weight: 500; }
.legal__meta {
  background: var(--surface-alt); border-left: 3px solid var(--line);
  padding: var(--space-3) var(--space-4); border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--fnt-small); color: var(--text-muted);
}
.legal__meta strong { color: var(--text-strong); }

.legal-facts { display: grid; gap: var(--space-3); margin: 0 0 var(--space-4); }
.legal-facts > div {
  display: grid; gap: 0.15rem; padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--line);
}
.legal-facts dt { font-size: var(--fnt-small); color: var(--text-muted); }
.legal-facts dd { margin: 0; font-weight: 600; color: var(--text-strong); }

.legal-links { list-style: none; padding-left: 0; }
.legal-links li { margin-bottom: var(--space-2); }

.table-scroll { overflow-x: auto; margin-bottom: var(--space-5); }
.legal-table { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: var(--fnt-small); }
.legal-table th, .legal-table td {
  text-align: left; vertical-align: top; padding: var(--space-3);
  border-bottom: 1px solid var(--line);
}
.legal-table th { background: var(--surface-alt); color: var(--text-strong); }
.legal-table code { word-break: break-word; }

/* Accreditations ---------------------------------------------------------- */
.accred-grid { display: grid; gap: var(--space-5); margin-bottom: var(--space-6); }
.accred {
  display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: var(--space-5);
  align-items: start; padding-bottom: var(--space-5); border-bottom: 1px solid var(--line);
}
@media (max-width: 40rem) { .accred { grid-template-columns: 1fr; gap: var(--space-4); } }
.accred h2 { margin-top: 0; margin-bottom: var(--space-2); font-size: var(--fnt-h4); }
/* These marks only exist as dark ink, so they need a permanent light backing to
   stay legible when the rest of the page goes dark. */
.accred__mark {
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--space-3); min-height: 5.5rem;
}
.accred__mark img { max-width: 100%; height: auto; object-fit: contain; }

/* Contact ------------------------------------------------------------------ */
.contact-grid {
  display: grid; gap: var(--space-4); margin-bottom: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.contact-card {
  display: flex; gap: var(--space-4); align-items: flex-start;
  padding: var(--space-4); background: var(--surface); color: inherit;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.contact-card:hover {
  border-color: var(--brand-cta); transform: translateY(-2px);
  box-shadow: var(--shadow-sm); text-decoration: none;
}
.contact-card__icon { font-size: 1.6rem; line-height: 1; flex: 0 0 auto; }
.contact-card__body { display: grid; gap: 0.2rem; min-width: 0; }
.contact-card__body strong { color: var(--text-strong); }
.contact-card__body .text-muted { font-size: var(--fnt-small); line-height: 1.45; }
.contact-card__addr {
  font-size: var(--fnt-small); color: var(--brand-cta); font-weight: 600;
  overflow-wrap: anywhere;
}

@media print {
  .legal-hero { background: none; border: 0; padding-block: 0 1rem; }
  .legal-toc, .crumbs, .site-header, .site-footer, .cookie-consent { display: none !important; }
  .legal-shell { display: block; }
  .legal-body { max-width: none; }
  .legal-body h2 { break-after: avoid; }
  .legal-body a { text-decoration: underline; }
  .legal-body a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; word-break: break-all; }
}

/* ---------------------------------------------------------------------------
   News — index, cards and article
   --------------------------------------------------------------------------- */

.news-hero {
  background: var(--surface-alt);
  border-bottom: 1px solid var(--line);
  padding-block: var(--space-7) var(--space-5);
}
.news-hero h1 { margin-bottom: var(--space-3); }
.news-hero__standfirst {
  color: var(--text-muted); font-size: var(--fnt-h4);
  max-width: 46rem; margin-bottom: var(--space-3);
}
.news-hero__count { font-size: var(--fnt-small); color: var(--text-muted); margin-bottom: 0; }

/* Topic chips. Horizontally scrollable on small screens rather than wrapping to
   five rows and pushing the articles below the fold. */
.news-filter {
  /* Flush beneath the header, not at top:0 — otherwise it slides under it. */
  position: sticky; top: var(--site-sticky-flush); z-index: 20;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  padding-block: var(--space-3);
}
.news-filter__scroll {
  display: flex; gap: var(--space-2); overflow-x: auto;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
.news-filter__scroll::-webkit-scrollbar { display: none; }

.news-chip {
  display: inline-flex; align-items: center; gap: 0.4rem; flex: 0 0 auto;
  padding: 0.4rem 0.85rem; border-radius: var(--radius-pill);
  border: 1px solid var(--line); background: var(--surface);
  color: var(--text-muted); font-size: var(--fnt-small); font-weight: 500;
  white-space: nowrap; transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.news-chip:hover { color: var(--text-strong); border-color: var(--text-muted); text-decoration: none; }
.news-chip.is-active {
  background: var(--brand-cta); border-color: var(--brand-cta); color: #fff;
}
.news-chip__n { font-size: 0.72em; opacity: .65; font-variant-numeric: tabular-nums; }

/* Lead story ---------------------------------------------------------------- */
.news-lead {
  display: grid; gap: 0; color: inherit; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface); margin-bottom: var(--space-6);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
@media (min-width: 52rem) { .news-lead { grid-template-columns: 1.15fr 1fr; } }
.news-lead:hover {
  border-color: var(--brand-cta); box-shadow: var(--shadow-md);
  transform: translateY(-2px); text-decoration: none;
}
.news-lead__media { position: relative; background: var(--surface-alt); min-height: 13rem; }
.news-lead__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-lead__body {
  padding: var(--space-6); display: flex; flex-direction: column;
  gap: var(--space-3); justify-content: center;
}
.news-lead__body h2 { margin: 0; font-size: var(--fnt-h2); }
.news-lead__body p { margin: 0; color: var(--text-muted); line-height: 1.6; }
.news-lead__cta {
  display: inline-flex; align-items: center; gap: var(--space-2);
  color: var(--brand-cta); font-weight: 600; margin-top: var(--space-2);
}
.news-lead__cta svg { transition: transform .15s ease; }
.news-lead:hover .news-lead__cta svg { transform: translateX(3px); }

/* Card grid ----------------------------------------------------------------- */
.news-grid {
  display: grid; gap: var(--space-5);
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}
.news-card {
  display: flex; flex-direction: column; color: inherit; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.news-card:hover {
  border-color: var(--brand-cta); box-shadow: var(--shadow-md);
  transform: translateY(-2px); text-decoration: none;
}
.news-card__media {
  aspect-ratio: 16 / 9; background: var(--surface-alt);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.news-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-card__placeholder { color: var(--text-muted); opacity: .4; }
.news-card__placeholder svg { width: 2.5rem; height: 2.5rem; }
.news-card__body {
  padding: var(--space-4); display: flex; flex-direction: column;
  gap: var(--space-2); flex: 1 1 auto;
}
.news-card__body h3 { margin: 0; font-size: var(--fnt-h4); line-height: 1.3; }
.news-card__body p {
  margin: 0; color: var(--text-muted); font-size: var(--fnt-small); line-height: 1.55;
  /* Three lines keeps every card the same height without truncating mid-thought. */
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.news-card__eyebrow {
  display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
  font-size: var(--fnt-small); color: var(--text-muted);
}
.news-card__latest {
  background: var(--brand-accent); color: #fff; font-weight: 700;
  font-size: 0.7rem; letter-spacing: .04em; text-transform: uppercase;
  padding: 0.15rem 0.5rem; border-radius: var(--radius-pill);
}
.news-card__tags { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-top: auto; padding-top: var(--space-2); }
.news-card__tag {
  font-size: 0.72rem; color: var(--text-muted);
  background: var(--surface-alt); border-radius: var(--radius-pill);
  padding: 0.15rem 0.55rem;
}

/* Loading placeholders ------------------------------------------------------ */
.skeleton-line, .news-card--skeleton .news-card__media {
  background: linear-gradient(90deg, var(--surface-alt) 25%, var(--surface-soft) 37%, var(--surface-alt) 63%);
  background-size: 400% 100%; animation: skeleton 1.4s ease infinite;
  border-radius: var(--radius);
}
.skeleton-line { display: block; height: 0.9rem; margin-bottom: var(--space-3); }
.skeleton-line--short { width: 45%; }
.news-card--skeleton { pointer-events: none; }
@keyframes skeleton { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) {
  .skeleton-line, .news-card--skeleton .news-card__media { animation: none; }
}

.pager {
  display: flex; align-items: center; justify-content: center; gap: var(--space-4);
  margin-top: var(--space-7); flex-wrap: wrap;
}
.pager__status { color: var(--text-muted); font-size: var(--fnt-small); }
.btn.is-disabled { opacity: .4; pointer-events: none; }

/* Article ------------------------------------------------------------------- */
.article-head { padding-block: var(--space-6) var(--space-5); }
.article-head h1 { margin-bottom: var(--space-4); }
.article-head__standfirst {
  font-size: var(--fnt-h4); color: var(--text-muted); line-height: 1.55;
  margin-bottom: var(--space-4);
}
.article-meta {
  display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap;
  font-size: var(--fnt-small); color: var(--text-muted);
}

/* Full width of the article column — its left edge is the same as the headline's
   and the body copy's, which is the whole point. */
.article-hero {
  width: 100%; margin: 0 0 var(--space-6);
  display: block; border-radius: var(--radius-lg); border: 1px solid var(--line);
}

.article-shell {
  display: grid; gap: var(--space-6) var(--space-7); align-items: start;
  padding-bottom: var(--space-7); justify-content: space-between;
}
@media (min-width: 64rem) {
  /* Cap the article column at a readable measure rather than letting it stretch to
     fill; the sidebar stays pinned right and the slack falls between them. */
  .article-shell { grid-template-columns: minmax(0, 46rem) 18rem; }
}

.article-main { min-width: 0; }
.article-body { max-width: none; }
.article-body > :first-child { margin-top: 0; }
.article-body p, .article-body li { line-height: 1.75; }
.article-body p { margin-bottom: var(--space-4); }
.article-body h2 { font-size: var(--fnt-h2); margin-top: var(--space-6); margin-bottom: var(--space-3); }
.article-body h3 { font-size: var(--fnt-h4); margin-top: var(--space-5); margin-bottom: var(--space-3); }
.article-body ul, .article-body ol { margin: 0 0 var(--space-4); padding-left: var(--space-5); }
.article-body li { margin-bottom: var(--space-2); }
.article-body img { max-width: 100%; height: auto; border-radius: var(--radius); }
.article-body a { text-decoration: underline; text-underline-offset: 2px; }
.article-body blockquote {
  margin: var(--space-5) 0; padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--brand-cta); background: var(--surface-alt);
  border-radius: 0 var(--radius) var(--radius) 0; font-size: var(--fnt-h4); line-height: 1.5;
}
.article-body blockquote p:last-child { margin-bottom: 0; }
/* Editor-pasted tables are the most common way admin HTML breaks a layout. */
.article-body table { display: block; overflow-x: auto; max-width: 100%; border-collapse: collapse; }
.article-body iframe { max-width: 100%; }

.article-figure { margin: var(--space-5) 0; }
.article-figure img { width: 100%; border-radius: var(--radius-lg); display: block; }
.article-figure figcaption {
  margin-top: var(--space-2); font-size: var(--fnt-small); color: var(--text-muted);
}
.article-video { position: relative; aspect-ratio: 16 / 9; }
.article-video iframe {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; border-radius: var(--radius-lg);
}

.doc-link {
  display: flex; gap: var(--space-3); align-items: flex-start; color: inherit;
  padding: var(--space-4); border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--surface);
}
.doc-link:hover { border-color: var(--brand-cta); text-decoration: none; }
.doc-link strong { display: block; color: var(--text-strong); }
.doc-link .text-muted { font-size: var(--fnt-small); }

.article-foot {
  margin-top: var(--space-7); padding-top: var(--space-5);
  border-top: 1px solid var(--line); display: grid; gap: var(--space-5);
}
.article-foot h2 {
  font-size: var(--fnt-small); text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted); margin: 0 0 var(--space-3);
}
.share-btn {
  padding: 0.4rem 0.9rem; border-radius: var(--radius-pill);
  border: 1px solid var(--line); color: var(--text-muted);
  font-size: var(--fnt-small); font-weight: 500;
}
.share-btn:hover { border-color: var(--brand-cta); color: var(--brand-cta); text-decoration: none; }

.article-aside { display: grid; gap: var(--space-4); position: sticky; top: var(--site-sticky-top); }
@media (max-width: 63.99rem) { .article-aside { position: static; } }
.article-aside__card {
  padding: var(--space-5); border: 1px solid var(--line);
  border-radius: var(--radius-lg); background: var(--surface-alt);
}
.article-aside__card h2 { font-size: var(--fnt-h4); margin: 0 0 var(--space-2); }
.article-aside__card p {
  color: var(--text-muted); font-size: var(--fnt-small);
  line-height: 1.55; margin-bottom: var(--space-4);
}
.article-aside__card .btn { width: 100%; }

/* Section header with a trailing action ("Latest news … All news"). */
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-5);
}
.section-head h2 { margin-bottom: var(--space-2); }
.section-head > div { min-width: 0; }

/* ---------------------------------------------------------------------------
   Employer profile
   --------------------------------------------------------------------------- */

/* Readable measure that stays LEFT-aligned inside the standard container, so prose
   sections share their left edge with the cards and the footer. A narrowed
   .container would centre itself and land on a different edge. */
.prose-col { max-width: 58rem; }

/* NB: "perk", not "benefit" — BenefitsCallout already owns .benefit / .benefit__label
   (see ~line 422). Reusing those names here redefined them further down the cascade and
   flattened the callout's vertical cards into a horizontal row. */
.perk-grid {
  display: grid; gap: var(--space-4); margin-top: var(--space-5);
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
.perk {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.perk__icon {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-pill);
  background: var(--surface-alt); color: var(--brand-cta);
}
.perk__label { font-size: var(--fnt-small); line-height: 1.4; color: var(--text-strong); }

/* ---------------------------------------------------------------------------
   Advice & guidance
   --------------------------------------------------------------------------- */

.advice-hero {
  background: var(--surface-alt);
  border-bottom: 1px solid var(--line);
  padding-block: var(--space-7) var(--space-6);
}
.advice-hero h1 { margin-bottom: var(--space-3); }
.advice-hero__standfirst {
  color: var(--text-muted); font-size: var(--fnt-h4);
  max-width: 46rem; margin-bottom: 0;
}

/* Pathways: entry by situation. Numbered because they're broadly sequential. */
.pathway-grid {
  display: grid; gap: var(--space-4); margin-top: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.pathway {
  display: flex; gap: var(--space-4); align-items: flex-start; color: inherit;
  padding: var(--space-4); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.pathway:hover {
  border-color: var(--brand-cta); transform: translateY(-2px);
  box-shadow: var(--shadow-sm); text-decoration: none;
}
.pathway__step {
  flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-gradient); color: #fff; font-weight: 700;
  font-family: var(--font-display);
}
.pathway__body { display: grid; gap: 0.2rem; min-width: 0; }
.pathway__body strong { color: var(--text-strong); }
.pathway__body .text-muted { font-size: var(--fnt-small); line-height: 1.45; }

.topic-grid {
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}
.topic-card {
  display: flex; flex-direction: column; gap: var(--space-2); color: inherit;
  padding: var(--space-5); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.topic-card:hover {
  border-color: var(--brand-cta); transform: translateY(-2px);
  box-shadow: var(--shadow-md); text-decoration: none;
}
.topic-card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; border-radius: var(--radius);
  background: var(--surface-alt); color: var(--brand-accent); margin-bottom: var(--space-2);
}
.topic-card__icon svg { width: 1.35rem; height: 1.35rem; }
.topic-card h3 { margin: 0; font-size: var(--fnt-h4); }
.topic-card p { margin: 0; color: var(--text-muted); font-size: var(--fnt-small); line-height: 1.55; }
.topic-card__meta {
  margin-top: auto; padding-top: var(--space-3);
  font-size: var(--fnt-small); color: var(--brand-accent); font-weight: 600;
}

.guide-card {
  display: flex; flex-direction: column; gap: var(--space-2); color: inherit;
  padding: var(--space-5); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.guide-card:hover {
  border-color: var(--brand-cta); transform: translateY(-2px);
  box-shadow: var(--shadow-md); text-decoration: none;
}
.guide-card__topic {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted); font-weight: 700;
}
.guide-card h3 { margin: 0; font-size: var(--fnt-h4); line-height: 1.3; }
.guide-card p { margin: 0; color: var(--text-muted); font-size: var(--fnt-small); line-height: 1.55; }
.guide-card__cta {
  margin-top: auto; padding-top: var(--space-3);
  font-size: var(--fnt-small); font-weight: 600; color: var(--brand-accent);
}

/* Guide body extras */
.takeaways {
  background: var(--surface-alt); border-left: 3px solid var(--brand-accent);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: var(--space-5); margin: var(--space-6) 0;
}
.takeaways h2 { margin-top: 0 !important; font-size: var(--fnt-h4) !important; }
.takeaways ul { margin-bottom: 0; }

.faqs { display: grid; gap: var(--space-3); margin-bottom: var(--space-5); }
.faq {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); padding: var(--space-4);
}
.faq summary {
  cursor: pointer; font-weight: 600; color: var(--text-strong);
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "＋"; float: right; color: var(--text-muted); font-weight: 400; }
.faq[open] summary::after { content: "－"; }
.faq p { margin: var(--space-3) 0 0; color: var(--text-muted); line-height: 1.7; }

.guide-cta {
  margin-top: var(--space-6); padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}

/* The guide page borrows the legal TOC, which is normally desktop-only inside its own aside. */
.article-aside .legal-toc { display: block; position: static; }

/* ---- Footer: intro, accreditation marks, Cyber Essentials ---------------- */

.site-footer__trust {
  margin-top: var(--space-6); padding-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, .14);
  display: grid; gap: var(--space-5); align-items: center;
}
@media (min-width: 60rem) {
  .site-footer__trust { grid-template-columns: auto minmax(0, 1fr); gap: var(--space-7); }
}

.site-footer__marks { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }

/* Transparent boxes — the source files already carry transparency, so a white chip was only ever
   there to make dark ink legible. The box itself stays, because the logos vary wildly in aspect
   ratio (tall circular badges through to wide wordmarks) and a fixed box is what keeps the row
   from looking ragged. */
.footer-mark {
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border-radius: var(--radius);
  width: 5.5rem; height: 3rem;
  opacity: .9; transition: opacity .15s ease, transform .15s ease;
}
.footer-mark:hover { opacity: 1; transform: translateY(-2px); text-decoration: none; }
.footer-mark img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }

/* Flat dark-ink marks rendered white so they read on navy. brightness(0) flattens the artwork to
   solid black first, so invert(1) yields clean white regardless of the original colours. Marks
   with their own coloured background are left alone — see the Whiten flag in SiteFooter. */
.footer-mark--whiten img { filter: brightness(0) invert(1); }

.site-footer__blurb {
  margin: 0; font-size: var(--fnt-small); line-height: 1.65; opacity: .9;
}
.site-footer__blurb strong { color: #fff; }

/* ---- Home hero with the student cut-out ---------------------------------- */

.hero--home { position: relative; overflow: hidden; }
/* The copy sits above the figure, and is capped so it never runs underneath it. */
.hero--home > .container { position: relative; z-index: 1; }
.hero__copy { max-width: 36rem; }

/* The source is cropped to head-and-torso, so the figure reads large at hero size rather than
   being a small full-length person. Height tracks the hero and the negative bottom offset bleeds
   the hip off the bottom edge — sizing UP past 100% instead would crop the top of his head, which
   is the one part that has to stay whole.

   Hidden below 62rem: there's no room beside the copy, and a decorative image isn't worth the
   bytes on a phone. */
/* At 2x the hero height the figure is taller than the hero, so it is anchored to the TOP and the
   body runs off the bottom edge. Anchoring to the bottom instead would crop his head, which is
   the one part that has to stay whole. Result: a large head-and-shoulders, clipped at the chest.
   Offset from the right as a percentage so he holds his position as the viewport changes. */
.hero__figure {
  display: none;
  position: absolute; right: 6%; top: 0; bottom: auto;
  height: 200%; width: auto; max-width: none;
  pointer-events: none; user-select: none;
}
/* Hero height and figure size are deliberately DECOUPLED.
   The figure is a percentage of the hero, so making him bigger used to mean making the hero
   taller — and at 34–38rem the hero filled 83–93% of a laptop screen. Since it's a dark gradient,
   arriving on the home page in light mode made the whole visible page go dark, which reads as the
   theme having switched. The hero is now a sane 24–26rem and the figure's percentage is raised to
   compensate, so he stays the same size on screen. To resize him, change the percentage — not the
   hero height. */
@media (min-width: 62rem) {
  .hero--home { min-height: 24rem; display: flex; align-items: center; }
  .hero__figure { display: block; height: 285%; }
}
@media (min-width: 80rem) {
  .hero--home { min-height: 26rem; }
  .hero__figure { right: 9%; height: 290%; }
}

/* ---- Brand carousel ("Top organisations…") -------------------------------- */

.brandwall__title { margin-bottom: var(--space-6); }

.brandwall {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
}

/* Fixed, square-ish tiles on a white chip. Employer logos arrive in every conceivable aspect
   ratio and most assume a white background, so a uniform chip is what turns a rag-bag of
   supplied files into a wall that looks deliberate. */
.brandwall__tile {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1; padding: var(--space-4);
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.brandwall__tile:hover {
  transform: translateY(-3px); box-shadow: var(--shadow-md);
  border-color: var(--brand-cta); text-decoration: none;
}
.brandwall__tile:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 2px; }
.brandwall__tile img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; display: block;
}

@media (prefers-reduced-motion: reduce) {
  .brandwall__tile { transition: none; }
  .brandwall__tile:hover { transform: none; }
}

/* ---------------------------------------------------------------------------
   Shared page hero
   Every top-level page gets the same branded header: brand gradient, white
   text, and the student cut-out on the right. Advice, news and the small-print
   pages previously used a flat --surface-alt band, which made them read as a
   different site from /apprenticeships and /explore-career-path.

   The figure is a BACKGROUND image here, not an <img> as on the home page.
   It's purely decorative on these pages, and doing it in CSS means every hero
   picks it up without touching a single page's markup — including any hero
   added later. The home page keeps its <img> because there it's the largest
   above-the-fold element and needs preloading for LCP.
   --------------------------------------------------------------------------- */

.hero,
.advice-hero,
.news-hero,
.legal-hero {
  position: relative;
  overflow: hidden;
  background: var(--brand-gradient);
  color: #fff;
  border-bottom: 0;
}

/* Text that was tuned for a light band needs re-tuning for the gradient. */
.advice-hero h1, .news-hero h1, .legal-hero h1 { color: #fff; }

.advice-hero__standfirst,
.news-hero__standfirst,
.legal-hero__standfirst {
  color: rgba(255, 255, 255, .92);
}
.news-hero__count,
.legal-hero__updated {
  color: rgba(255, 255, 255, .8);
}
.news-hero__count a { color: #fff; text-decoration: underline; }

/* Breadcrumbs sit inside these heroes on most pages. */
.hero .crumbs,
.advice-hero .crumbs,
.news-hero .crumbs,
.legal-hero .crumbs { color: rgba(255, 255, 255, .78); }
.hero .crumbs a,
.advice-hero .crumbs a,
.news-hero .crumbs a,
.legal-hero .crumbs a { color: rgba(255, 255, 255, .78); }
.hero .crumbs a:hover,
.advice-hero .crumbs a:hover,
.news-hero .crumbs a:hover,
.legal-hero .crumbs a:hover { color: #fff; }

/* Keep the page's own content above the figure. */
.hero > .container,
.advice-hero > .container,
.news-hero > .container,
.legal-hero > .container { position: relative; z-index: 1; }

/* Copy is capped so it never runs under the figure on wide screens. */
.advice-hero__standfirst,
.news-hero__standfirst,
.legal-hero__standfirst { max-width: 40rem; }

/* The figure.
   `contain` + bottom-right is what keeps him WHOLE. Sizing by height instead
   (auto 126%) made the image wider than its fixed-width box, so the background
   was cropped down the left and he appeared sliced in half. `contain` fits the
   image inside the box on whichever axis is tighter, so it can never crop in
   either direction whatever height a given page's hero ends up. Anchored to the
   bottom so he stands on the hero's edge rather than floating. */
.hero::after,
.advice-hero::after,
.news-hero::after,
.legal-hero::after {
  content: "";
  position: absolute; top: var(--space-4); bottom: 0; right: 6%;
  width: 13rem;
  background: url("/img/callouts/student.webp") no-repeat right bottom;
  background-size: contain;
  pointer-events: none;
  display: none;
}

/* Only where there's genuinely room beside the heading. */
@media (min-width: 64rem) {
  .hero::after,
  .advice-hero::after,
  .news-hero::after,
  .legal-hero::after { display: block; }

  /* These heroes are shorter than the home one, so they need a floor to stop
     the figure being squashed into a letterbox. */
  .advice-hero, .news-hero, .legal-hero { min-height: 15rem; }
}
@media (min-width: 84rem) {
  .hero::after,
  .advice-hero::after,
  .news-hero::after,
  .legal-hero::after { right: 9%; width: 15rem; }
}

/* The home hero already has its own <img> figure — don't double it up. */
.hero--home::after { content: none; }

/* ---- "Explore your career path" cards ------------------------------------ */

.path-grid {
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
}

.path-card {
  position: relative; display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-5); color: inherit;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden;
  /* Resting shadow, same as .card. The card background and the section background are BOTH
     --surface, so without it the tiles read as flat panels that blend into the page — barely
     visible in dark mode, where --surface and --surface-alt sit close together. */
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.path-card:hover {
  transform: translateY(-3px); box-shadow: var(--shadow-md);
  border-color: var(--brand-cta); text-decoration: none;
}
.path-card:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 2px; }

/* A brand wash that sweeps in on hover — enough life to invite a click without
   turning the card into a toy. */
.path-card::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--brand-gradient);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform .22s ease;
}
.path-card:hover::before { transform: scaleY(1); }

.path-card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; border-radius: var(--radius);
  background: var(--surface-alt); color: var(--brand-accent);
  margin-bottom: var(--space-2);
  transition: background-color .18s ease, color .18s ease;
}
.path-card__icon svg { width: 1.35rem; height: 1.35rem; }
.path-card:hover .path-card__icon { background: var(--brand-accent); color: #fff; }

.path-card h3 { margin: 0; font-size: var(--fnt-h4); }
.path-card__blurb { margin: 0; color: var(--text-strong); font-weight: 500; line-height: 1.5; }
.path-card__detail {
  margin: 0; color: var(--text-muted); font-size: var(--fnt-small); line-height: 1.6;
}

.path-card__meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); margin-top: auto; padding-top: var(--space-4);
}
.path-card__tag {
  font-size: 0.72rem; font-weight: 700; letter-spacing: .03em;
  color: var(--text-muted); background: var(--surface-alt);
  padding: 0.2rem 0.6rem; border-radius: var(--radius-pill); white-space: nowrap;
}
.path-card__go {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: var(--fnt-small); font-weight: 700; color: var(--brand-cta);
}
.path-card__go svg { width: 1rem; height: 1rem; transition: transform .18s ease; }
.path-card:hover .path-card__go svg { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .path-card, .path-card::before, .path-card__icon, .path-card__go svg { transition: none; }
  .path-card:hover { transform: none; }
  .path-card:hover::before { transform: scaleY(1); }
}