/* ==========================================================================
   SMC Children Services: design system
   --------------------------------------------------------------------------
   ONE PLACE TO CHANGE COLOURS AND FONTS
   In WordPress: Elementor > Site Settings > Global Colors / Global Fonts.
     Primary   -> logo blue (links, focus, secondary buttons)
     Secondary -> deep blue (hero, dark bands, footer)
     Text      -> body text
     Accent    -> headings
     Magenta   -> main action buttons (Apply Now, View Vacancies, Send)
     Lime      -> positive states (success, Register Your Interest panel)
     Orange    -> every icon, step number and marker (one colour site-wide)
   Palette per spec §6: deep blue with brighter magenta/pink, lime green,
   orange/yellow and white.
     Fonts: Primary = headings, Text = body copy, Accent = buttons
   Every other colour on the site (hovers, tints, borders, dark bands,
   dark mode) is derived from those four with color-mix(), so changing a
   Global Color updates the whole site. In the static HTML build the
   Elementor variables do not exist, so the fallbacks below are used.
   Tokens are declared on body too because Elementor sets its Global
   Colors on <body class="elementor-kit-N">, not on :root.

   This exact file is used by both the HTML build and the WordPress theme.
   ========================================================================== */

:root, body {
  color-scheme: light dark;

  /* ---- Global tokens (Elementor Site Settings) ---- */
  --brand-base: var(--e-global-color-primary, #1d6fb9);
  --navy-base: var(--e-global-color-secondary, #17508f);
  --magenta-base: var(--e-global-color-smcmagenta, #d80078);
  --lime-base: var(--e-global-color-smclime, #a8c000);
  --orange-base: var(--e-global-color-smcorange, #f5a300);   /* sampled from the logo */
  --text-base: var(--e-global-color-text, #3a4657);
  --ink-base: var(--e-global-color-accent, #1b222c);

  --font-display: var(--e-global-typography-primary-font-family, "Figtree"), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: var(--e-global-typography-text-font-family, "Poppins"), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-ui: var(--e-global-typography-accent-font-family, "Noto Sans"), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-logo: "Montserrat", var(--font-display);
  --logo-blue: #1d6fb9; /* logo lettering colour: part of the logo, not the theme */

  /* ---- Derived: light ---- */
  --brand: var(--brand-base);
  --brand-fill: var(--brand-base);
  --brand-fill-hover: color-mix(in srgb, var(--brand-base) 80%, #000);
  --brand-tint: color-mix(in srgb, var(--brand-base) 10%, #fff);
  --action: var(--magenta-base);
  --action-hover: color-mix(in srgb, var(--magenta-base) 80%, #000);
  --lime-tint: color-mix(in srgb, var(--lime-base) 12%, #fff);
  --lime-line: color-mix(in srgb, var(--lime-base) 40%, #fff);
  --orange-tint: color-mix(in srgb, var(--orange-base) 12%, #fff);
  --icon: color-mix(in srgb, var(--orange-base) 62%, #000);   /* deep orange, 4.5:1+ on its tint */
  --icon-tint: var(--orange-tint);
  --navy: var(--navy-base);
  --band: var(--navy-base);
  --footer: var(--navy-base);
  --band-text: color-mix(in srgb, var(--navy-base) 12%, #fff);
  --band-muted: color-mix(in srgb, var(--navy-base) 34%, #fff);

  --ink: var(--ink-base);
  --text: var(--text-base);
  --muted: color-mix(in srgb, var(--text-base) 80%, #fff);

  --surface: #fff;
  --surface-2: color-mix(in srgb, var(--brand-base) 6%, #fff);   /* soft logo-blue sections */
  --card: #fff;
  --line: color-mix(in srgb, var(--ink-base) 11%, #fff);
  --line-strong: color-mix(in srgb, var(--ink-base) 24%, #fff);
  --photo: color-mix(in srgb, var(--brand-base) 10%, #eef1f5);

  --success: color-mix(in srgb, var(--lime-base) 50%, #000);   /* deep lime, 6:1 on white */
  --success-tint: var(--lime-tint);
  --warning: color-mix(in srgb, var(--orange-base) 55%, #000);
  --warning-tint: var(--orange-tint);
  --error: #b3261e;

  --focus: var(--brand-base);
  --header-bg: rgb(255 255 255 / .88);
  --material-thick: rgb(255 255 255 / .84);
  --material-edge: rgb(255 255 255 / .6);
  --scroll-edge: color-mix(in srgb, var(--ink-base) 9%, transparent);
  --shadow: 0 6px 24px color-mix(in srgb, var(--ink-base) 9%, transparent);
  --on-dark: #fff;
  --on-dark-line: rgb(255 255 255 / .2);

  /* ---- Shape, motion, layout ---- */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --dur-press: 100ms;
  --dur: 320ms;
  --container: 1160px;
  --gutter: clamp(16px, 4vw, 32px);
  --section-y: clamp(56px, 8vw, 104px);
  --header-h: 72px;
}

/* ---- Derived: dark mode (follows the device setting) ---- */
@media (prefers-color-scheme: dark) {
  :root, body {
    --brand: color-mix(in srgb, var(--brand-base) 45%, #fff);
    --brand-fill: color-mix(in srgb, var(--brand-base) 88%, #fff);
    --brand-fill-hover: color-mix(in srgb, var(--brand-base) 76%, #fff);
    --brand-tint: color-mix(in srgb, var(--brand-base) 26%, #0d1424);
    --band: color-mix(in srgb, var(--navy-base) 80%, #000);
    --footer: color-mix(in srgb, var(--navy-base) 70%, #000);
    --ink: #edf2f8;
    --text: #c6cfdb;
    --muted: #96a3b5;
    --surface: #0d1424;
    --surface-2: #121b2e;
    --card: #172238;
    --line: #26324a;
    --line-strong: #3a4865;
    --photo: #1c2a40;
    --success: color-mix(in srgb, var(--lime-base) 70%, #fff);
    --success-tint: color-mix(in srgb, var(--lime-base) 16%, #0d1424);
    --lime-tint: color-mix(in srgb, var(--lime-base) 14%, #121b2e);
    --lime-line: color-mix(in srgb, var(--lime-base) 35%, #121b2e);
    --orange-tint: color-mix(in srgb, var(--orange-base) 14%, #121b2e);
    --icon: color-mix(in srgb, var(--orange-base) 72%, #fff);
    --icon-tint: color-mix(in srgb, var(--orange-base) 20%, #0d1424);
    --error: #ff8a8f;
    --focus: var(--brand);
    --header-bg: rgb(13 20 36 / .86);
    --material-thick: rgb(23 34 56 / .86);
    --material-edge: rgb(255 255 255 / .08);
    --scroll-edge: rgb(0 0 0 / .35);
    --shadow: 0 8px 28px rgb(0 0 0 / .35);
    --logo-blue: #5fa3e0;
  }
}

/* ---- Increased contrast ---- */
@media (prefers-contrast: more) {
  :root, body {
    --muted: var(--text); --line: var(--line-strong);
    --header-bg: var(--surface); --material-thick: var(--card); --material-edge: var(--line-strong);
  }
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text);
  background: var(--surface);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  font-optical-sizing: auto;
  transition: background-color .4s ease, color .4s ease;
}
a, button, summary, label, input, select, textarea { touch-action: manipulation; }
img, svg { max-width: 100%; display: block; }
img { height: auto; }
a { color: var(--brand); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); margin: 0 0 .5em; font-weight: 700; text-wrap: balance; }
h1 { font-size: clamp(2rem, 3.6vw, 2.75rem); font-weight: 800; line-height: 1.08; letter-spacing: -.028em; }
h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); line-height: 1.1; letter-spacing: -.022em; }
h3 { font-size: 1.25rem; line-height: 1.25; letter-spacing: -.01em; }
h4 { font-size: 1.0625rem; line-height: 1.3; }
p, li { text-wrap: pretty; }
p { margin: 0 0 1em; }
ul, ol { padding-left: 1.25em; margin: 0 0 1em; }
li + li { margin-top: .35em; }
strong { color: var(--ink); font-weight: 650; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 1000;
  background: var(--brand-fill); color: #fff; padding: 12px 16px;
  border-radius: var(--radius-sm); font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 12px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.container--narrow { max-width: 780px; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: .7em 1.35em;
  font: 600 1rem/1.2 var(--font-ui);
  border-radius: var(--radius-sm); border: 1.5px solid transparent;
  text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .15s, color .15s, border-color .15s, transform var(--dur) var(--ease);
}
.btn:active { transform: scale(.97); transition: transform var(--dur-press) ease-out, background-color .15s; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--primary { background: var(--action); color: #fff; }
.btn--primary:hover { background: var(--action-hover); color: #fff; }
.btn--blue { background: var(--brand-fill); color: #fff; }
.btn--blue:hover { background: var(--brand-fill-hover); color: #fff; }
.btn--outline { border-color: var(--line-strong); color: var(--ink); background: var(--card); }
.btn--outline:hover { border-color: var(--brand); color: var(--brand); }
.btn--light { background: #fff; color: var(--band); }
.btn--light:hover { background: var(--brand-tint); color: var(--band); }
.btn--ghost-light { border-color: rgb(255 255 255 / .55); color: #fff; background: transparent; }
.btn--ghost-light:hover { border-color: #fff; color: #fff; background: rgb(255 255 255 / .08); }
.btn--sm { min-height: 44px; padding: .55em 1.1em; font-size: .95rem; }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* Secondary link: a quiet button */
.link-arrow {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .55em 1.1em;
  font: 600 .95rem/1.2 var(--font-ui); color: var(--ink); text-decoration: none;
  background: var(--card); border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm);
  transition: border-color .15s, color .15s, transform var(--dur) var(--ease);
}
.link-arrow:hover { border-color: var(--brand); color: var(--brand); text-decoration: none; }
.link-arrow:active { transform: scale(.97); transition: transform var(--dur-press) ease-out; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--header-bg);
  -webkit-backdrop-filter: saturate(1.8) blur(20px);
  backdrop-filter: saturate(1.8) blur(20px);
}
.site-header::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; pointer-events: none;
  background: linear-gradient(var(--scroll-edge), transparent);
  opacity: 0; transition: opacity var(--dur) var(--ease);
}
.site-header.is-scrolled::after { opacity: 1; }
.site-header .container { display: flex; align-items: center; gap: 24px; min-height: var(--header-h); }

.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: none; min-height: 44px; }
.logo:hover { text-decoration: none; }
.logo__mark { height: 42px; width: auto; }
.logo__text { display: flex; flex-direction: column; line-height: 1; }
.logo__name, .logo__sub { font-family: var(--font-logo); font-weight: 700; color: var(--logo-blue); }
.logo__name { font-size: 1.45rem; line-height: 1; letter-spacing: .01em; }
.logo__sub { font-size: .68rem; letter-spacing: .045em; text-transform: uppercase; margin-top: 4px; }

.main-nav { margin-left: auto; }
.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; }
.main-nav li + li { margin: 0; }
.main-nav a {
  display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: var(--radius-sm);
  color: var(--text); font-weight: 550; font-size: .97rem; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.main-nav a:hover { color: var(--ink); background: var(--surface-2); }
.main-nav a[aria-current="page"] { color: var(--brand); font-weight: 650; }
.header-cta { flex: none; }

.nav-toggle {
  display: none; margin-left: auto; width: 48px; height: 48px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--card); cursor: pointer; align-items: center; justify-content: center;
}
.nav-toggle:active { transform: scale(.94); }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 2px; position: relative;
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1060px) {
  .nav-toggle { display: inline-flex; }
  .header-cta { display: none; }
  .main-nav {
    position: fixed; inset: var(--header-h) 0 0 0; background: var(--surface); padding: 12px var(--gutter) 32px; overflow-y: auto;
    visibility: hidden; opacity: 0; transform: translateY(-12px); transform-origin: top center;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur);
  }
  .main-nav.is-open {
    visibility: visible; opacity: 1; transform: none;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s;
  }
  .main-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .main-nav a { min-height: 56px; padding: 0 4px; font-size: 1.15rem; border-bottom: 1px solid var(--line); border-radius: 0; }
  .main-nav a:hover { background: none; }
  .main-nav__cta { margin-top: 24px; display: grid; gap: 12px; }
  body.nav-open { overflow: hidden; }
}
@media (min-width: 1061px) { .main-nav__cta { display: none; } }

/* Mobile: recruitment actions within thumb reach */
.mobile-cta {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: var(--header-bg);
  -webkit-backdrop-filter: saturate(1.8) blur(20px);
  backdrop-filter: saturate(1.8) blur(20px);
  box-shadow: inset 0 1px 0 var(--material-edge), 0 -10px 24px -12px var(--scroll-edge);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); gap: 10px;
}
.mobile-cta .btn { flex: 1; }
@media (max-width: 720px) { .mobile-cta { display: flex; } body { padding-bottom: 76px; } }

/* ==========================================================================
   Sections & layout
   ========================================================================== */
.section { padding: var(--section-y) 0; }
.section--soft { background: var(--surface-2); }
.section--blue { background: var(--band); color: var(--band-text); }
.section--blue h2, .section--blue h3 { color: #fff; }
.section--tight { padding: clamp(40px, 5vw, 64px) 0; }

.section-head { max-width: 680px; margin-bottom: clamp(28px, 4vw, 44px); }
.section-head--split { max-width: none; display: flex; justify-content: space-between; align-items: end; gap: 16px 24px; flex-wrap: wrap; }
.section-head p { font-size: 1.125rem; color: var(--muted); margin: 0; }
.lead { font-size: clamp(1.125rem, 1.6vw, 1.25rem); color: var(--muted); line-height: 1.55; }
.kicker { font-size: .95rem; font-weight: 600; color: var(--muted); margin-bottom: 10px; letter-spacing: .01em; }

.grid { display: grid; gap: clamp(16px, 2.4vw, 24px); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) { .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid--2, .grid--3 { grid-template-columns: 1fr; } }
.equal-cards > .card { height: 100%; }

/* Side-by-side: text centred, photo matches the text height */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: stretch; }
.split--reverse > :first-child { order: 2; }
.split > div:not(.photo):not(.card) { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.split > div:not(.photo):not(.card) > * { max-width: 100%; }
.split > .photo { aspect-ratio: auto; min-height: 360px; height: 100%; }
.split > .card { align-self: center; }
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split--reverse > :first-child { order: 0; }
  .split > .photo { min-height: 0; aspect-ratio: 4 / 3; }
}

/* Photos */
.photo { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--photo); aspect-ratio: 4 / 3; }
.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.photo--wide { aspect-ratio: 16 / 9; }

/* Cards */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(22px, 2.6vw, 28px); }
.card h3 { margin-bottom: .4em; }
.card p:last-child { margin-bottom: 0; }
.benefit p { color: var(--muted); }
.icon-tile {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 16px;
  background: var(--icon-tint); color: var(--icon);
}
.icon-tile svg { width: 22px; height: 22px; }

.meta { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.meta li { margin: 0; display: inline-flex; align-items: center; gap: 6px; font-size: .95rem; color: var(--text); letter-spacing: .01em; }
.meta svg { width: 16px; height: 16px; color: var(--icon); flex: none; }
.tag {
  display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; font-weight: 600; letter-spacing: .01em;
  padding: 3px 10px; border-radius: 6px; background: var(--surface-2); color: var(--text); border: 1px solid var(--line);
}

.notice {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--brand-tint); border-radius: var(--radius-sm); padding: 14px 16px; font-size: .97rem; color: var(--text);
}
.notice svg { width: 20px; height: 20px; flex: none; color: var(--icon); margin-top: 2px; }
.notice p { margin: 0; }

.empty-state {
  text-align: center; background: var(--card); border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg); padding: clamp(32px, 5vw, 56px) clamp(20px, 4vw, 48px);
}
.empty-state p { max-width: 540px; margin-left: auto; margin-right: auto; color: var(--muted); }
.empty-state .btn-row { justify-content: center; margin-top: 20px; }

/* Placeholder (copy still to be supplied) */
.ph { font-style: italic; color: var(--muted); background: var(--surface-2); border: 1px dashed var(--line-strong); border-radius: 6px; padding: 1px 8px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.ph-block { border: 1px dashed var(--line-strong); border-radius: var(--radius); padding: 20px 22px; color: var(--muted); font-style: italic; background: var(--surface-2); }

/* ==========================================================================
   Page hero & home hero
   ========================================================================== */
.page-hero { background: var(--surface-2); border-bottom: 1px solid var(--line); }
.page-hero .container { padding-top: clamp(36px, 5vw, 64px); padding-bottom: clamp(40px, 5vw, 64px); }
.page-hero h1 { max-width: 820px; }
.page-hero .lead { max-width: 660px; margin-bottom: 0; }
.page-hero .btn-row { margin-top: 28px; }

.breadcrumb { font-size: .95rem; margin-bottom: 20px; letter-spacing: .01em; }
.breadcrumb ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.breadcrumb li { margin: 0; display: flex; gap: 6px; align-items: center; color: var(--muted); }
.breadcrumb li + li::before { content: "/"; color: var(--line-strong); }
.breadcrumb a { color: var(--brand); }

/* Home hero: navy + team photo fading in from the right (faces stay uncovered) */
.hero--photo { position: relative; overflow: hidden; background: var(--band); color: var(--band-text); }
.hero--photo .hero__media {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(60%, 940px);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24%);
  mask-image: linear-gradient(90deg, transparent 0, #000 24%);
}
.hero--photo .hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 55%; }
.hero--photo .hero__content {
  position: relative; z-index: 1;
  padding-top: clamp(72px, 10vw, 136px); padding-bottom: clamp(72px, 10vw, 136px);
  min-height: clamp(460px, 44vw, 620px);
}
.hero--photo .hero__content > * { max-width: min(34rem, 37vw); }
.hero--photo h1 { color: #fff; font-size: clamp(2rem, 3.4vw, 2.75rem); line-height: 1.1; letter-spacing: -.025em; margin-bottom: 20px; }
.hero--photo h1 span { display: block; }
.hero--photo .lead { color: var(--band-text); font-size: clamp(1.2rem, 1.7vw, 1.45rem); line-height: 1.5; margin-bottom: 32px; }
@media (max-width: 860px) {
  .hero--photo .hero__content > * { max-width: 34rem; }
  .hero--photo .hero__media {
    position: relative; width: 100%; height: 300px;
    -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
  }
  .hero--photo .hero__content { min-height: 0; padding-top: 8px; padding-bottom: 56px; }
}

/* ==========================================================================
   Vacancies
   ========================================================================== */
/* Featured (home): intro column + role rows */
.jobs-feature { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.jobs-feature__intro h2 { margin-bottom: 12px; }
.jobs-feature__intro .btn-row { margin-top: 24px; }
.job-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.job-row {
  position: relative; margin: 0; display: flex; align-items: center; gap: 20px; overflow: hidden;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px;
  transition: background-color .2s, border-color .2s, box-shadow .2s;
}
.job-row__main { flex: 1; min-width: 0; display: grid; gap: 6px; }
.job-row h3 { margin: 0; font-size: clamp(1.15rem, 1.8vw, 1.35rem); }
.job-row h3 a { color: var(--ink); text-decoration: none; transition: color .2s; }
.job-row h3 a::after { content: ""; position: absolute; inset: 0; }
.job-row h3 a:focus-visible { outline: none; }
.job-row h3 a:focus-visible::after { outline: 3px solid #fff; outline-offset: -3px; border-radius: var(--radius); }
.job-row .meta li, .job-row .meta svg { transition: color .2s; }
.job-row__apply { position: relative; z-index: 1; flex: none; }
.job-row:hover, .job-row:focus-within { background: var(--brand-fill); border-color: var(--brand-fill); box-shadow: var(--shadow); }
.job-row:hover h3 a, .job-row:focus-within h3 a, .job-row:hover .meta li, .job-row:focus-within .meta li { color: #fff; }
.job-row:hover .meta svg, .job-row:focus-within .meta svg { color: rgb(255 255 255 / .8); }
.job-row:hover .job-row__apply, .job-row:focus-within .job-row__apply { background: #fff; color: var(--action); }
@media (max-width: 900px) { .jobs-feature { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .job-row { padding: 18px; } }

/* Careers list */
.filters {
  display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px;
}
.filters .field { margin: 0; }
.filters .btn { height: 52px; min-height: 52px; }
@media (max-width: 860px) { .filters { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .filters { grid-template-columns: 1fr; } }
.results-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px 12px; margin: 24px 0 12px; flex-wrap: wrap; }
.results-bar p { margin: 0; color: var(--muted); font-weight: 600; }

.job-list { display: grid; gap: 12px; }
.job-card {
  position: relative; display: flex; flex-direction: column; gap: 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px;
  transition: border-color .15s;
}
.job-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: var(--shadow); opacity: 0; transition: opacity var(--dur) var(--ease); }
.job-card:hover { border-color: var(--line-strong); }
.job-card:hover::after { opacity: 1; }
.job-card h3 { margin: 0; font-size: 1.25rem; }
.job-card h3 a { color: var(--ink); text-decoration: none; }
.job-card h3 a:hover { text-decoration: underline; }
.job-card__footer { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.job-card--row { flex-direction: row; align-items: center; gap: 24px; padding: 24px 28px; }
.job-card--row .job-card__body { flex: 1; display: grid; gap: 10px; }
.job-card--row .job-card__footer { margin: 0; flex-direction: column; align-items: flex-end; flex: none; }
@media (max-width: 760px) {
  .job-card--row { flex-direction: column; align-items: stretch; padding: 22px; }
  .job-card--row .job-card__footer { flex-direction: row; align-items: center; }
}

/* Job detail */
.job-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(32px, 5vw, 64px); align-items: start; }
.job-layout__aside { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 16px; }
@media (max-width: 960px) { .job-layout { grid-template-columns: 1fr; } .job-layout__aside { position: static; } }

.summary-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow); }
.summary-card h2 { font-size: 1.25rem; }
.summary-card dl { margin: 0 0 20px; display: grid; }
.summary-card dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.summary-card dt { color: var(--muted); font-size: .95rem; }
.summary-card dd { margin: 0; color: var(--ink); font-weight: 600; text-align: right; font-size: .97rem; }
.summary-card .btn + .btn { margin-top: 10px; }

.prose { max-width: 70ch; }
.prose h2 { font-size: clamp(1.4rem, 2.4vw, 1.75rem); margin-top: 1.7em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.4em; }
.prose ul { padding-left: 0; list-style: none; }
.prose ul li { position: relative; padding-left: 26px; }
.prose ul li::before { content: ""; position: absolute; left: 6px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }
.prose blockquote { margin: 1.5em 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--line-strong); color: var(--text); font-size: 1.08rem; }
.prose img { border-radius: var(--radius); }

.download {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; min-height: 64px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card);
  text-decoration: none; color: var(--ink); -webkit-tap-highlight-color: transparent;
  transition: border-color .15s, color .15s, transform var(--dur) var(--ease);
}
.download:hover { border-color: var(--brand); }
.download:active { transform: scale(.97); transition: transform var(--dur-press) ease-out; }
.download__type { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; font-size: .75rem; font-weight: 800; color: var(--icon); background: var(--icon-tint); flex: none; letter-spacing: .04em; }
.download strong { display: block; font-size: 1rem; }
.download span:not(.download__type) { font-size: .9rem; color: var(--muted); }
.download-list { display: grid; gap: 10px; }

.share { display: flex; gap: 8px; flex-wrap: wrap; }
.share a, .share button {
  width: 44px; height: 44px; border-radius: var(--radius-sm); display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--card); color: var(--text); cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: border-color .15s, color .15s, transform var(--dur) var(--ease);
}
.share a:hover, .share button:hover { border-color: var(--ink); color: var(--ink); }
.share a:active, .share button:active { transform: scale(.97); }
.share svg { width: 18px; height: 18px; }

/* ==========================================================================
   Content components
   ========================================================================== */
/* Steps (a real sequence) */
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; counter-reset: step; }
.steps li { margin: 0; counter-increment: step; position: relative; padding-top: 60px; }
.steps li::before {
  content: counter(step); position: absolute; top: 0; left: 0; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; font: 700 1.1rem var(--font-display); color: var(--icon); background: var(--icon-tint);
}
.steps li::after { content: ""; position: absolute; top: 22px; left: 56px; right: -12px; height: 1px; background: var(--line); }
.steps li:last-child::after { display: none; }
.steps h3 { font-size: 1.125rem; margin-bottom: .3em; }
.steps p { color: var(--muted); margin: 0; font-size: 1rem; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr 1fr; } .steps li::after { display: none; } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

/* Values */
.value-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; border-top: 1px solid var(--line); }
.value-list li { margin: 0; padding: 18px 0; border-bottom: 1px solid var(--line); display: flex; gap: 14px; align-items: center; font: 650 1.2rem/1.3 var(--font-display); color: var(--ink); }
.value-list li::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--orange-base); flex: none; }
@media (max-width: 640px) { .value-list { grid-template-columns: 1fr; } }

/* Vision / mission statements */
.statement { font: 600 clamp(1.25rem, 2.4vw, 1.6rem)/1.4 var(--font-display); letter-spacing: -.012em; color: #fff; margin: 0 0 28px; }
.statement-label { font-size: .95rem; font-weight: 650; color: var(--band-muted); margin-bottom: 8px; letter-spacing: .01em; }

/* Gallery */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; grid-auto-flow: dense; gap: 12px; }
.gallery .photo { aspect-ratio: auto; }
.gallery .photo--wide2 { grid-column: span 2; }
.gallery .photo--tall2 { grid-row: span 2; }
@media (max-width: 860px) { .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; } }

/* Testimonial carousel */
.quotes__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 6vw, 88px); align-items: center; }
.quotes__intro h2 { margin-bottom: 28px; }
.quotes__controls { display: flex; align-items: center; gap: 14px; }
.quotes__btn {
  width: 48px; height: 48px; display: grid; place-items: center; cursor: pointer;
  background: transparent; color: #fff; border: 1.5px solid rgb(255 255 255 / .35); border-radius: var(--radius-sm);
  -webkit-tap-highlight-color: transparent; transition: border-color .15s, background-color .15s, transform var(--dur) var(--ease);
}
.quotes__btn svg { width: 20px; height: 20px; }
.quotes__btn:hover { border-color: #fff; background: rgb(255 255 255 / .08); }
.quotes__btn:active { transform: scale(.94); transition: transform var(--dur-press) ease-out; }
.quotes__btn:disabled { opacity: .35; cursor: default; transform: none; }
.quotes__btn:focus-visible { outline-color: #fff; }
.quotes__count { font: 600 .95rem var(--font-ui); color: var(--band-muted); min-width: 52px; text-align: center; font-variant-numeric: tabular-nums; }
.quotes__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; scrollbar-width: none; border-radius: var(--radius); }
.quotes__track::-webkit-scrollbar { display: none; }
.quotes__track:focus-visible { outline: 3px solid #fff; outline-offset: 6px; }
.quote-slide { flex: 0 0 100%; scroll-snap-align: start; margin: 0; padding: 4px 8px 4px 0; overflow: hidden; }
.quote-slide blockquote { position: relative; margin: 0 0 28px; padding-top: 56px; font: 500 clamp(1.3rem, 2.4vw, 1.85rem)/1.4 var(--font-display); letter-spacing: -.012em; color: #fff; }
.quote-slide blockquote::before { content: "\201C"; position: absolute; top: -8px; left: 0; font: 700 6rem/1 var(--font-display); color: rgb(255 255 255 / .22); }
.quotes__track--long .quote-slide blockquote { font-size: clamp(1.1rem, 1.7vw, 1.35rem); line-height: 1.55; }
.quote-slide figcaption { display: flex; flex-direction: column; gap: 2px; padding-top: 18px; border-top: 1px solid var(--on-dark-line); }
.quote-slide figcaption strong { color: #fff; font-weight: 600; }
.quote-slide figcaption span { color: var(--band-muted); font-size: .95rem; }
@media (max-width: 900px) { .quotes__grid { grid-template-columns: 1fr; } .quotes__intro h2 { margin-bottom: 20px; } }

/* Directors */
.leaders { display: grid; gap: clamp(28px, 4vw, 44px); }
.leaders h2 { margin: 0; font-size: clamp(2rem, 3.6vw, 2.75rem); }
.leaders__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); }
.leaders__list li { margin: 0; display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 24px; align-items: stretch; }
.leaders__photo { aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; background: var(--photo); display: flex; align-items: flex-end; justify-content: center; }
.leaders__photo svg { width: 82%; height: auto; fill: color-mix(in srgb, var(--ink-base) 18%, var(--photo)); }
.leaders__photo img { width: 100%; height: 100%; object-fit: cover; }
.leaders__body { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-width: 0; }
.leaders__quote { margin: 0; flex: 1; display: flex; align-items: center; font: 500 1.05rem/1.55 var(--font-display); color: var(--ink); letter-spacing: -.005em; }
.leaders__text { display: flex; flex-direction: column; gap: 10px; padding-top: 20px; border-top: 2px solid var(--brand); }
.leaders__text span { font: 600 .9rem/1 var(--font-ui); letter-spacing: .02em; color: var(--muted); }
.leaders__text strong { font: 700 clamp(1.5rem, 2.4vw, 2rem)/1.1 var(--font-display); letter-spacing: -.025em; color: var(--ink); white-space: nowrap; }
@media (max-width: 860px) { .leaders__list { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .leaders__list li { grid-template-columns: 112px minmax(0, 1fr); gap: 18px; } .leaders__text strong { white-space: normal; } }

/* CTA band: navy text panel + uncovered photo */
.cta-full { position: relative; overflow: hidden; background: var(--band); color: var(--band-text); }
.cta-full__media { position: absolute; top: 0; right: 0; bottom: 0; width: 44%; }
.cta-full__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.cta-full__inner { position: relative; z-index: 1; display: grid; gap: 24px; padding-top: clamp(48px, 6vw, 80px); padding-bottom: clamp(48px, 6vw, 80px); }
.cta-full__inner > * { max-width: min(560px, 50%); }
.cta-full h2 { color: #fff; margin-bottom: .3em; max-width: 18ch; }
.cta-full p { margin: 0; font-size: 1.0625rem; max-width: 52ch; }
@media (max-width: 860px) {
  .cta-full__media { position: relative; width: 100%; height: 240px; }
  .cta-full__inner > * { max-width: 100%; }
}

.interest-panel {
  display: grid; grid-template-columns: 1fr auto; gap: 20px 24px; align-items: center;
  background: var(--lime-tint); border: 1px solid var(--lime-line); border-radius: var(--radius-lg); padding: clamp(22px, 3.5vw, 32px);
}
.interest-panel h3 { margin-bottom: .25em; }
.interest-panel p { margin: 0; color: var(--muted); }
@media (max-width: 760px) { .interest-panel { grid-template-columns: 1fr; } }

/* News */
.post-card { position: relative; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: border-color .15s, transform var(--dur) var(--ease); }
.post-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: var(--shadow); opacity: 0; transition: opacity var(--dur) var(--ease); z-index: 1; }
.post-card:hover { border-color: var(--line-strong); }
.post-card:hover::before { opacity: 1; }
.post-card:hover .photo img { transform: scale(1.03); }
.post-card:active { transform: scale(.99); transition: transform var(--dur-press) ease-out; }
.post-card .photo { border-radius: 0; aspect-ratio: 16 / 10; }
.post-card__body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.post-card__meta { display: flex; gap: 10px; align-items: center; font-size: .92rem; color: var(--muted); letter-spacing: .01em; }
.post-card h3 { margin: 0; font-size: 1.2rem; }
.post-card h3 a { color: var(--ink); text-decoration: none; }
.post-card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.post-card h3 a:focus-visible { outline: none; }
.post-card h3 a:focus-visible::after { outline: 3px solid var(--focus); outline-offset: -3px; border-radius: var(--radius); }
.post-card p { color: var(--muted); margin: 0; font-size: 1rem; }
.post-feature { position: relative; display: grid; grid-template-columns: 1.2fr 1fr; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 24px; }
.post-feature .photo { border-radius: 0; aspect-ratio: auto; min-height: 300px; }
.post-feature__body { padding: clamp(24px, 4vw, 44px); display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.post-feature h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.post-feature h2 a { color: var(--ink); text-decoration: none; }
@media (max-width: 860px) { .post-feature { grid-template-columns: 1fr; } .post-feature .photo { min-height: 200px; } }

.pagination { display: flex; justify-content: center; gap: 8px; margin-top: 40px; flex-wrap: wrap; }
.pagination a, .pagination span { min-width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--radius-sm); border: 1px solid var(--line); text-decoration: none; font: 600 1rem var(--font-ui); color: var(--ink); padding: 0 12px; }
.pagination [aria-current], .pagination .current { background: var(--ink); color: var(--surface); border-color: var(--ink); }

/* Contact */
.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.contact-list li { margin: 0; display: flex; gap: 14px; align-items: flex-start; }
.contact-list .icon-tile { margin: 0; flex: none; }
.contact-list strong { display: block; }

/* Legal */
.legal-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
.legal-nav { position: sticky; top: calc(var(--header-h) + 24px); }
.legal-nav h2 { font: 650 .95rem/1 var(--font-body); color: var(--muted); margin-bottom: 12px; letter-spacing: 0; }
.legal-nav ul { list-style: none; padding: 0; margin: 0; }
.legal-nav li { margin: 0; }
.legal-nav a { display: flex; align-items: center; min-height: 44px; padding: 0 14px; color: var(--text); text-decoration: none; border-radius: var(--radius-sm); }
.legal-nav a:hover { background: var(--surface-2); }
.legal-nav a[aria-current="page"] { background: var(--brand-tint); color: var(--ink); font-weight: 650; }
.legal-updated { font-size: .95rem; color: var(--muted); margin-bottom: 24px; }
.legal-table { width: 100%; border-collapse: collapse; font-size: .97rem; }
.legal-table th, .legal-table td { padding: 12px 16px; text-align: left; vertical-align: top; }
.legal-table thead tr { background: var(--surface-2); }
.legal-table tbody tr { border-top: 1px solid var(--line); }
@media (max-width: 860px) { .legal-layout { grid-template-columns: 1fr; } .legal-nav { position: static; } }

/* ==========================================================================
   Forms
   ========================================================================== */
.form { display: grid; gap: 20px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }
.field { display: grid; gap: 6px; }
.field label, .field legend { font-weight: 650; color: var(--ink); font-size: 1rem; }
.req { color: var(--error); }
.field .hint { font-size: .9rem; color: var(--muted); font-weight: 400; }
.input, .select, .textarea {
  width: 100%; padding: 0 14px; font: inherit; font-size: 1.0625rem; color: var(--ink);
  background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  transition: border-color .15s, box-shadow var(--dur) var(--ease);
}
.input, .select { height: 52px; min-height: 52px; line-height: 1.4; }
.textarea { min-height: 130px; padding: 12px 14px; line-height: 1.6; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--muted); opacity: .85; }
.select {
  appearance: none; padding-right: 40px; background-repeat: no-repeat; background-position: right 14px center;
  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='%235b6580' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-tint); }
.input[readonly] { background: var(--surface-2); color: var(--text); }
.field.has-error .input, .field.has-error .select, .field.has-error .textarea, .field.has-error .file-drop { border-color: var(--error); }
.field-error { display: none; color: var(--error); font-size: .95rem; font-weight: 600; }
.field.has-error .field-error { display: block; animation: error-in 200ms ease-out both; }
@keyframes error-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }

.file-drop { position: relative; border: 1.5px dashed var(--line-strong); border-radius: var(--radius); background: var(--surface-2); padding: 22px; text-align: center; transition: border-color .15s, background .15s; }
.file-drop:hover, .file-drop.is-dragover { border-color: var(--brand); background: var(--brand-tint); }
.file-drop input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.file-drop input[type="file"]:focus-visible + .file-drop__inner { outline: 3px solid var(--focus); outline-offset: 6px; border-radius: 6px; }
.file-drop__icon { display: block; width: 32px; height: 32px; margin: 0 auto 8px; color: var(--icon); }
.file-drop__icon svg { width: 100%; height: 100%; }
.file-drop strong { display: block; }
.file-drop__inner > span:not(.file-drop__icon) { font-size: .92rem; color: var(--muted); }
.file-drop__name { margin-top: 8px; font-weight: 650; color: var(--success); font-size: .95rem; }

.check { display: flex; gap: 12px; align-items: flex-start; font-size: 1rem; cursor: pointer; }
.check input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--brand-fill); flex: none; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: clamp(24px, 4vw, 44px); }
.form-card h2 { font-size: clamp(1.6rem, 3vw, 2rem); }
/* Sent confirmation: replaces the form and its intro inside the card */
.form-card:has(> .form-success:not([hidden])) > :is(h2, .muted) { display: none; }
.form-success { text-align: center; padding: clamp(16px, 3vw, 32px) 0; }
.form-success:not([hidden]) { animation: materialize 420ms var(--ease) both; }
div.form-success > .icon-tile {
  width: 72px; height: 72px; margin: 0 auto 22px; border-radius: 50%;
  background: var(--lime-base); color: #fff;
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--lime-base) 22%, transparent);
}
div.form-success > .icon-tile svg { width: 36px; height: 36px; stroke-width: 3; }
.form-success h3 { font-size: clamp(1.6rem, 2.6vw, 2rem); letter-spacing: -.018em; margin-bottom: .35em; }
.form-success p { max-width: 42ch; margin-inline: auto; color: var(--text); }
.form-success .btn { margin-top: 12px; }
.form-alert { padding: 14px 16px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--error) 10%, var(--card)); color: var(--error); font-weight: 600; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--footer); color: var(--band-muted); font-size: .97rem; }
.site-footer a { color: var(--band-text); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-main { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding: clamp(48px, 6vw, 72px) 0 40px; }
.site-footer h2 { font: 650 .95rem/1 var(--font-body); letter-spacing: 0; color: #fff; margin-bottom: 14px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.site-footer li { margin: 0; }
.site-footer li a { display: inline-flex; align-items: center; min-height: 36px; }
.footer-logo { display: inline-block; text-decoration: none; }
.footer-logo:hover { text-decoration: none; }
.footer-logo img { width: 80px; height: auto; }
.footer-cta p { margin-bottom: 12px; }
.footer-bottom { border-top: 1px solid rgb(255 255 255 / .1); padding: 18px 0; display: flex; justify-content: space-between; align-items: center; gap: 8px 16px; flex-wrap: wrap; font-size: .92rem; }
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: 0 18px; }
.linklike { background: none; border: 0; padding: 0; min-height: 36px; font: inherit; font-family: var(--font-ui); color: var(--band-text); cursor: pointer; }
.linklike:hover { text-decoration: underline; }
@media (max-width: 960px) { .footer-main { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-main { grid-template-columns: 1fr; gap: 28px; } }

/* Cookie banner (replace with a consent plugin if preferred) */
.cookie-banner {
  position: fixed; z-index: 200; left: 16px; right: 16px; bottom: 16px; max-width: 520px; padding: 22px;
  background: var(--material-thick);
  -webkit-backdrop-filter: saturate(1.8) blur(28px);
  backdrop-filter: saturate(1.8) blur(28px);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 1px 0 var(--material-edge), 0 24px 60px -12px rgb(0 0 0 / .28), 0 0 0 1px var(--line);
  transform-origin: bottom left; animation: materialize var(--dur) var(--ease) both;
}
.cookie-banner.is-leaving { animation: dematerialize 220ms var(--ease) both; }
.cookie-banner h2 { font-size: 1.15rem; margin-bottom: .3em; }
.cookie-banner p { font-size: .97rem; margin-bottom: 14px; }
.cookie-banner .btn-row { gap: 8px; }
.cookie-prefs { display: grid; gap: 12px; margin-bottom: 16px; padding: 14px; background: var(--surface-2); border-radius: var(--radius-sm); }
@media (max-width: 720px) { .cookie-banner { bottom: 88px; } }
@keyframes materialize { from { opacity: 0; transform: translateY(12px) scale(.96); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes dematerialize { from { opacity: 1; transform: none; filter: none; } to { opacity: 0; transform: translateY(12px) scale(.96); filter: blur(6px); } }

/* ==========================================================================
   Utilities
   ========================================================================== */
.mb-0 { margin-bottom: 0; }
.mt-s { margin-top: 16px; } .mt-m { margin-top: 28px; } .mt-l { margin-top: 48px; }
.text-center { text-align: center; }
.muted { color: var(--muted); }

/* ==========================================================================
   Accessibility preferences
   ========================================================================== */
@media (prefers-reduced-transparency: reduce) {
  .site-header, .mobile-cta, .cookie-banner { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .site-header { border-bottom: 1px solid var(--line-strong); }
  .site-header::after { display: none; }
  .mobile-cta { box-shadow: none; border-top: 1px solid var(--line-strong); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 150ms !important; }
  .btn:active, .post-card:active, .download:active, .share a:active, .share button:active,
  .nav-toggle:active, .quotes__btn:active, .link-arrow:active { transform: none; }
  .main-nav { transform: none !important; }
  .quotes__track { scroll-behavior: auto; }
  .cookie-banner, .cookie-banner.is-leaving, .form-success:not([hidden]), .field.has-error .field-error { animation-name: fade; animation-duration: 150ms; }
  .cookie-banner.is-leaving { animation-direction: reverse; }
  @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
}

/* ==========================================================================
   Vision & mission: two equal panels on the navy band (CSS only)
   ========================================================================== */
.section--blue .container:has(> .statement) {
  max-width: var(--container);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto 1fr;
  grid-auto-flow: column;          /* label 1 + statement 1 | label 2 + statement 2 */
  column-gap: clamp(16px, 2.4vw, 24px);
}
.section--blue .container:has(> .statement) > .statement-label,
.section--blue .container:has(> .statement) > .statement {
  margin: 0;
  background: rgb(255 255 255 / .06);
  border-left: 1px solid rgb(255 255 255 / .1);
  border-right: 1px solid rgb(255 255 255 / .1);
}
.section--blue .container:has(> .statement) > .statement-label {
  padding: clamp(24px, 3vw, 36px) clamp(24px, 3vw, 40px) 14px;
  border-top: 1px solid rgb(255 255 255 / .1);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  font: 650 1rem/1.4 var(--font-ui);
  letter-spacing: .01em;
  color: color-mix(in srgb, var(--brand-base) 30%, #fff);
}
.section--blue .container:has(> .statement) > .statement-label::before {
  content: ""; display: block; width: 32px; height: 3px; border-radius: 2px; margin-bottom: 16px;
  background: color-mix(in srgb, var(--brand-base) 45%, #fff);
}
.section--blue .container:has(> .statement) > .statement {
  padding: 0 clamp(24px, 3vw, 40px) clamp(24px, 3vw, 40px);
  border-bottom: 1px solid rgb(255 255 255 / .1);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  font: 600 clamp(1.15rem, 1.9vw, 1.4rem)/1.45 var(--font-display);
  letter-spacing: -.01em;
}
@media (max-width: 760px) {
  .section--blue .container:has(> .statement) { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
  .section--blue .container:has(> .statement) > .statement + .statement-label { margin-top: 16px; }
}

/* ==========================================================================
   BRAND PALETTE SWITCH (spec §6 colours vs. classic blue)
   --------------------------------------------------------------------------
   Default: brand palette (magenta actions, lime positive states, orange highlights).
   Switch:  WordPress  -> Settings > SMC > Design > "Colour palette"
            HTML build -> add class="smc-classic" to <body>
   Classic mode maps magenta/lime/orange back to the blue, so nothing else changes.
   ========================================================================== */
body:not(.smc-classic) :is(.hero--photo, .cta-full) .btn--light { background: var(--action); color: #fff; }
body:not(.smc-classic) :is(.hero--photo, .cta-full) .btn--light:hover { background: var(--action-hover); color: #fff; }
body.smc-classic {
  --magenta-base: var(--brand-base);
  --lime-base: #5c9e5f;   /* plain green for success messages */
  --orange-base: var(--brand-base);
  --action: var(--brand-fill);
  --action-hover: var(--brand-fill-hover);
}
body.smc-classic .interest-panel { background: var(--card); border-color: var(--line); }

/* ==========================================================================
   OPTIONAL: logo colour accents
   --------------------------------------------------------------------------
   Switch:  WordPress  -> Settings > SMC > "Logo colour accents"
            HTML build -> class="smc-accents" on <body>
   Remove permanently: delete this whole block (and the setting).
   Adds the multicolour logo stripe and orange highlights on the blue bands.
   ========================================================================== */
.smc-accents {
  --acc-magenta: var(--magenta-base);
  --acc-orange: var(--orange-base);
  --acc-lime: var(--lime-base);
  --acc-sky: #2f9fd6;
  --acc-purple: #941b80;
  --acc-stripe: linear-gradient(90deg,
    var(--acc-magenta) 0 20%, var(--acc-orange) 20% 40%, var(--acc-lime) 40% 60%,
    var(--acc-sky) 60% 80%, var(--acc-purple) 80% 100%);
}

/* Signature stripe: footer top + under the home hero */
.smc-accents .site-footer { position: relative; }
.smc-accents .site-footer::before { content: ""; display: block; height: 4px; background: var(--acc-stripe); }
.smc-accents .hero--photo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--acc-stripe); z-index: 2; }

/* Small highlights on the blue bands and director cards use the same orange as the icons */
.smc-accents .quote-slide blockquote::before { color: var(--orange-base); }
.smc-accents .section--blue .container:has(> .statement) > .statement-label::before { background: var(--orange-base); }
.smc-accents .leaders__text { border-top-color: var(--orange-base); }

/* ======================= end of optional logo accents ===================== */

/* ==========================================================================
   STRICT DOCUMENT PALETTE (on every page via class="smc-strict")
   --------------------------------------------------------------------------
   Only the colours named in spec §6 (logo blue, deep blue, magenta, lime,
   orange, white) plus text colours. No tints, no extra borders: sections are
   told apart by solid colour blocks instead.
   Switch: add/remove class="smc-strict" on <body>.
   ========================================================================== */
.smc-strict {
  --surface-2: #fff;
  --icon-tint: var(--orange-base);
  --icon: var(--ink-base);   /* dark symbol on solid orange */
}
.smc-strict .download__type, .smc-strict .steps li::before, .smc-strict .icon-tile { color: var(--ink-base); }
.smc-strict .meta svg { color: var(--orange-base); }

/* Page header: deep blue block, like the home hero */
.smc-strict .page-hero { background: var(--band); color: var(--band-text); border-bottom: 0; }
.smc-strict .page-hero h1 { color: #fff; }
.smc-strict .page-hero .lead { color: var(--band-text); }
.smc-strict .page-hero .breadcrumb li { color: var(--band-muted); }
.smc-strict .page-hero .breadcrumb li + li::before { color: var(--band-muted); }
.smc-strict .page-hero .breadcrumb a { color: #fff; }

/* Logo-blue blocks (class "section--brand" on chosen sections; other soft sections are white).
   Text colours flip to white inside; white components inside reset to normal colours. */
.smc-strict .section--brand {
  background: var(--brand-base); color: #fff;
  --ink: #fff;
  --text: color-mix(in srgb, var(--brand-base) 8%, #fff);
  --muted: color-mix(in srgb, var(--brand-base) 14%, #fff);
  --brand: #fff;
  --line: rgb(255 255 255 / .3);
}
.smc-strict .section--brand :is(.card, .job-row, .form-card, .empty-state, .btn--outline, .download) {
  --ink: var(--ink-base);
  --text: var(--text-base);
  --muted: color-mix(in srgb, var(--text-base) 80%, #fff);
  --brand: var(--brand-base);
  --line: color-mix(in srgb, var(--ink-base) 11%, #fff);
  color: var(--text);
}
.smc-strict .section--brand .steps li::before { background: #fff; color: var(--navy-base); }
.smc-strict .section--brand .leaders__photo { background: #fff; }

/* Register Your Interest: deep-blue card, magenta main button */
.smc-strict .interest-panel { background: var(--navy-base); border: 0; }
.smc-strict .interest-panel :is(h2, h3, strong) { color: #fff; }
.smc-strict .interest-panel p { color: var(--band-text); }

/* Help note: no box, just the orange icon and text */
.smc-strict .notice { background: none; padding: 0; }
.smc-strict .notice svg { color: var(--orange-base); }
.smc-strict .page-hero .meta li { color: var(--band-text); }

/* ==========================================================================
   Design preview switch (client presentations only; WordPress: Settings > SMC)
   ========================================================================== */
.design-switch {
  position: fixed; right: 16px; bottom: 16px; z-index: 95;
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 4px 4px 12px;
  background: var(--ink-base); color: #fff; border-radius: 999px;
  box-shadow: 0 8px 24px rgb(0 0 0 / .25); font: 600 .85rem var(--font-ui);
}
.design-switch span { margin-right: 6px; opacity: .75; }
.design-switch button {
  border: 0; border-radius: 999px; padding: 7px 14px; min-height: 34px; cursor: pointer;
  background: transparent; color: #fff; font: inherit;
}
.design-switch button[aria-pressed="true"] { background: #fff; color: var(--ink-base); }
.design-switch button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 720px) { .design-switch { bottom: 88px; right: 12px; } }

/* Vacancy rows on a blue block: hover in deep blue so the card never blends into the section */
.smc-strict .section--brand .job-row:hover, .smc-strict .section--brand .job-row:focus-within {
  background: var(--navy-base); border-color: var(--navy-base); box-shadow: 0 12px 28px rgb(0 0 0 / .22);
}