/* ==========================================================================
   CareerJump — design system
   Job-board first: dense, scannable listings inside a calm, professional shell.
   Palette is sampled from the logo (assets/img/color_transparent.png).
   ========================================================================== */

:root {
  /* Brand — straight from the logo */
  --brand:      #004EB7;   /* wordmark blue */
  --brand-700:  #003D92;
  --brand-800:  #002C6B;
  --brand-500:  #2E74C9;   /* monogram blue */
  --brand-200:  #B9D0F0;
  --brand-100:  #DCE8FA;
  --brand-050:  #F1F6FD;
  --accent:     #AE0C10;   /* tagline red */
  --accent-600: #8E0A0D;
  --accent-050: #FDF1F1;

  /* Ink & surfaces — cooled slightly so they sit with the blue */
  --ink:        #0B1B33;
  --ink-2:      #3D4C63;
  --ink-3:      #6B7A90;
  --line:       #E2E8F0;
  --line-2:     #EFF3F8;
  --bg:         #FFFFFF;
  --bg-2:       #F7F9FC;
  --bg-3:       #EEF3F9;

  --ok:         #0E7C4A;
  --ok-bg:      #E9F7F0;

  /* Type */
  --display: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Shape */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-full: 999px;

  --sh-1: 0 1px 2px rgba(11,27,51,.06);
  --sh-2: 0 4px 14px rgba(11,27,51,.07);
  --sh-3: 0 12px 32px rgba(11,27,51,.10);
  --sh-4: 0 28px 70px rgba(11,27,51,.16);
  --ring: 0 0 0 4px rgba(0,78,183,.14);

  --wrap: 1200px;
  --header-h: 80px;
}

/* ---------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 20px); }

body {
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
ul, ol { list-style: none; padding: 0; }
a { color: var(--brand); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--brand-700); }
button { font: inherit; }

h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -.025em;
  font-weight: 800;
}
h1 { font-size: clamp(2.15rem, 1.3rem + 3.4vw, 3.5rem); }
h2 { font-size: clamp(1.7rem, 1.2rem + 1.9vw, 2.5rem); }
h3 { font-size: 1.1rem; font-weight: 700; }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: #fff; padding: 12px 22px; border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; color: #fff; }

/* --------------------------------------------------------------- layout */
.shell { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }
.section { padding: clamp(56px, 6.5vw, 96px) 0; }
.section-alt { background: var(--bg-2); }
.section-navy { background: var(--ink); color: rgba(255,255,255,.72); }
.section-navy h2, .section-navy h3 { color: #fff; }

.section-head { max-width: 640px; margin-bottom: 42px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head p { margin-top: 14px; font-size: 1.04rem; }

.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(276px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); }

.icon { width: 20px; height: 20px; flex: none; }
.icon-sm { width: 16px; height: 16px; }
.icon-xs { width: 13px; height: 13px; }

.text-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--display); font-weight: 700; color: var(--brand);
}
.text-link:hover { gap: 12px; }
.text-link .icon { transition: transform .15s ease; }

/* -------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--display); font-weight: 700; font-size: .94rem;
  padding: 12px 22px; border-radius: var(--r-sm); border: 1px solid transparent;
  cursor: pointer; white-space: nowrap; transition: all .16s ease;
}
.btn-primary { background: var(--brand); color: #fff; box-shadow: 0 4px 12px rgba(0,78,183,.24); }
.btn-primary:hover { background: var(--brand-700); color: #fff; box-shadow: 0 8px 20px rgba(0,78,183,.3); transform: translateY(-1px); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #142a4b; color: #fff; transform: translateY(-1px); }
.btn-outline { border-color: var(--line); background: #fff; color: var(--ink); }
.btn-outline:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-050); }
.btn-white { background: #fff; color: var(--brand); }
.btn-white:hover { background: #fff; color: var(--brand-700); transform: translateY(-1px); box-shadow: var(--sh-2); }
.btn-ghost { background: transparent; color: var(--brand); padding-inline: 12px; }
.btn-ghost:hover { background: var(--brand-050); }
.btn-sm { padding: 9px 15px; font-size: .86rem; }
.btn-lg { padding: 15px 28px; font-size: 1rem; }
.btn-block { width: 100%; }
.btn-group { display: flex; flex-wrap: wrap; gap: 12px; }

/* --------------------------------------------------------------- header */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.9);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line-2);
  transition: box-shadow .2s ease;
}
.site-header.is-stuck { box-shadow: var(--sh-2); }
.header-inner {
  min-height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 22px;
}

/* Both logo files carry ~20% clear space, so the box is taller than the ink. */
.brand { display: inline-flex; align-items: center; flex: none; }
.brand-logo { height: 56px; width: auto; }

.site-nav { display: flex; align-items: center; gap: 2px; }
.site-nav > a:not(.btn) {
  font-family: var(--display); font-weight: 600; font-size: .92rem;
  color: var(--ink-2); padding: 9px 12px; border-radius: var(--r-xs);
  white-space: nowrap; position: relative;
}
.site-nav > a:not(.btn):hover { color: var(--brand); background: var(--brand-050); }
.site-nav > a.is-active { color: var(--ink); }
.site-nav > a.is-active::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 2px;
  height: 2px; border-radius: 2px; background: var(--brand);
}
.nav-cta { margin-left: 10px; }
.nav-toggle {
  display: none; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-xs); padding: 9px; color: var(--ink); cursor: pointer;
}

/* ====================================================== JOB BOARD HOME */

/* ---------- search band ---------- */
.board-hero {
  position: relative; overflow: hidden;
  padding: clamp(50px, 6vw, 84px) 0 clamp(46px, 5.5vw, 72px);
  background: linear-gradient(135deg, #04204A 0%, var(--brand-800) 46%, var(--brand-700) 100%);
  color: rgba(255,255,255,.76);
}
.board-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(900px 420px at 88% -10%, rgba(46,116,201,.5), transparent 62%),
    radial-gradient(600px 380px at 4% 110%, rgba(174,12,16,.22), transparent 58%);
}
.board-hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(80% 70% at 35% 40%, #000, transparent);
}
.board-hero .shell { position: relative; z-index: 1; }

.board-kicker {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px;
  padding: 7px 16px; border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.08); border-radius: var(--r-full);
  font-size: .82rem; color: rgba(255,255,255,.86);
}
.board-kicker i {
  width: 7px; height: 7px; border-radius: 50%; background: #4ADE80;
  box-shadow: 0 0 0 0 rgba(74,222,128,.7); animation: pulse 2.4s infinite;
}
@keyframes pulse {
  70%  { box-shadow: 0 0 0 7px rgba(74,222,128,0); }
  100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); }
}

.board-hero h1 { color: #fff; max-width: 16ch; }
.board-hero h1 em { color: var(--brand-200); font-style: normal; }
.board-lead { margin-top: 18px; max-width: 56ch; font-size: clamp(1rem, 1.2vw, 1.12rem); }

.board-search {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr auto;
  gap: 6px; margin-top: 32px; padding: 7px;
  background: #fff; border-radius: var(--r-md); box-shadow: var(--sh-4);
}
.bs-field { position: relative; display: flex; align-items: center; border-radius: var(--r-sm); }
.bs-field > .icon { position: absolute; left: 14px; color: var(--ink-3); pointer-events: none; }
.bs-field input, .bs-field select {
  width: 100%; border: 0; background: transparent; font: inherit; font-size: .95rem;
  color: var(--ink); padding: 14px 12px 14px 42px; border-radius: var(--r-sm);
  appearance: none; text-overflow: ellipsis;
}
.bs-field select { cursor: pointer; padding-right: 32px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7A90' stroke-width='2' stroke-linecap='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 15px; }
.bs-field:focus-within { background: var(--brand-050); }
.bs-field input:focus, .bs-field select:focus { outline: none; }
.bs-field + .bs-field::before {
  content: ''; position: absolute; left: 0; top: 20%; bottom: 20%; width: 1px; background: var(--line-2);
}

.board-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 20px; font-size: .87rem; }
.board-quick span {
  font-family: var(--display); font-weight: 800; font-size: .7rem;
  letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.52); margin-right: 4px;
}
.board-quick a {
  border: 1px solid rgba(255,255,255,.24); color: rgba(255,255,255,.9);
  padding: 6px 15px; border-radius: var(--r-full);
}
.board-quick a:hover { background: #fff; border-color: #fff; color: var(--brand); }

/* ---------- the board ---------- */
.board-section { padding-top: clamp(48px, 5vw, 70px); }
.board-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 20px; margin-bottom: 24px;
}

.job-rows {
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: #fff; overflow: hidden; box-shadow: var(--sh-1);
}
.job-row + .job-row { border-top: 1px solid var(--line-2); }
.job-row > a {
  display: grid; grid-template-columns: 46px 1fr auto 24px;
  align-items: center; gap: 18px; padding: 18px 22px; color: inherit;
  border-left: 3px solid transparent; transition: background .15s ease, border-color .15s ease;
}
.job-row > a:hover { background: var(--brand-050); border-left-color: var(--brand); }
.job-row > a:hover .job-row-go { opacity: 1; transform: translateX(0); }
.job-row > a:hover .job-row-main strong { color: var(--brand); }

.job-row-icon {
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: var(--r-sm); background: var(--brand-050); color: var(--brand);
}
.job-row-icon .icon { width: 20px; height: 20px; }
.job-row-main { min-width: 0; }
.job-row-main strong {
  display: block; font-family: var(--display); font-size: 1.02rem; font-weight: 700;
  color: var(--ink); line-height: 1.3; margin-bottom: 5px; transition: color .15s ease;
}
.job-row-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .82rem; color: var(--ink-3); }
.job-row-meta > span { display: inline-flex; align-items: center; gap: 5px; }
.job-row-meta .icon { color: var(--brand-500); }
.job-row-aside { text-align: right; white-space: nowrap; }
.job-row-aside b { display: block; font-family: var(--display); font-weight: 700; font-size: .9rem; color: var(--ink-2); }
.job-row-date { display: block; font-size: .76rem; color: var(--ink-3); margin-top: 3px; }
.job-row-go { color: var(--brand); opacity: 0; transform: translateX(-5px); transition: all .16s ease; }

.board-more { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 28px; }
.board-more p { font-size: .92rem; }
.board-more p a { font-weight: 600; border-bottom: 1px solid currentColor; }

/* A single heading, left-aligned. The two sections that use it lost their
   standfirst paragraphs, so the old two-column head had nothing to balance. */
.band-head { margin-bottom: 32px; }
.band-head h2 { max-width: 20ch; }

/* ---------- browse by field ----------
   A blue band mid-page. The salary section used to carry the colour here; with
   it gone the homepage ran white from the board all the way to the footer. */
.fields-section {
  position: relative; overflow: hidden;
  background: linear-gradient(155deg, var(--brand-800) 0%, var(--brand) 58%, var(--brand-700) 100%);
  color: rgba(255,255,255,.72);
}
/* A soft off-centre highlight so the flat fill does not read as a printed
   block of ink. Purely decorative, and it never sits under the text. */
.fields-section::before {
  content: ''; position: absolute; top: -30%; right: -10%; width: 60%; padding-bottom: 60%;
  background: radial-gradient(circle, rgba(255,255,255,.1) 0%, transparent 62%);
  pointer-events: none;
}
.fields-section .shell { position: relative; }
.fields-section .band-head h2 { color: #fff; }

.fields-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); }
.field-tile {
  position: relative; display: flex; flex-direction: column; min-height: 150px;
  padding: 22px; border-radius: var(--r-md); color: #fff;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.field-tile:hover {
  background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.42);
  transform: translateY(-3px); color: #fff;
}
.field-tile:hover .field-go { opacity: 1; transform: translateX(0); }
.field-icon {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--r-sm);
  background: rgba(255,255,255,.16); color: #fff; margin-bottom: 16px;
}
.field-tile h3 { font-size: 1rem; line-height: 1.3; margin-bottom: 6px; color: #fff; }
 /* .62 measured 3.46:1 against the tile — below AA for body text. .82 clears
    it at 4.85:1 while still sitting back from the heading. */
.field-tile p { font-size: .85rem; color: rgba(255,255,255,.82); margin-top: auto; }
.field-go {
  position: absolute; right: 20px; bottom: 20px; color: #fff;
  opacity: 0; transform: translateX(-6px); transition: all .18s ease;
}

/* ---------- locations ----------
   Light, so the blue band above it stays the accent. The count leads: it is
   the only number that changes, and the reason anyone scans this row. */
.places-section { background: var(--bg-2); }
.places-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); }
.places-grid li { display: flex; }
.places-grid a {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  padding: 20px 22px; background: #fff;
  border: 1px solid var(--line); border-left: 3px solid var(--brand-200);
  border-radius: var(--r-sm); color: inherit;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.places-grid a:hover {
  border-color: var(--brand-200); border-left-color: var(--brand);
  box-shadow: var(--sh-2); transform: translateY(-2px);
}
.place-n {
  font-family: var(--display); font-size: 1.9rem; font-weight: 800;
  letter-spacing: -.03em; line-height: 1; color: var(--brand); margin-bottom: 8px;
}
.places-grid strong { font-family: var(--display); font-size: .96rem; color: var(--ink); }
/* --ink-3 measures 4.35:1 on white — just under AA. --ink-2 clears it. */
.places-grid span { font-size: .82rem; color: var(--ink-2); }

/* ---------- method + voices ---------- */
.method-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(44px, 6vw, 88px); align-items: start; }
.method-copy h2 { margin-bottom: 18px; }
.method-copy p { max-width: 46ch; margin-bottom: 20px; }
.method-list { border-top: 1px solid var(--line); }
.method-list li {
  display: grid; grid-template-columns: 54px 1fr; gap: 16px;
  padding: 24px 0; border-bottom: 1px solid var(--line);
}
.method-no { font-family: var(--display); font-weight: 800; font-size: 1.2rem; color: var(--brand-200); }
.method-list h3 { margin-bottom: 6px; }
.method-list p { font-size: .93rem; max-width: 52ch; }

.method-voices {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px; margin-top: 52px; padding-top: 42px; border-top: 1px solid var(--line);
}
.method-voices figure {
  display: flex; flex-direction: column; gap: 18px; padding: 26px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-md);
}
.method-voices blockquote { flex: 1; font-size: .93rem; line-height: 1.62; }
.method-voices figcaption { display: flex; align-items: center; gap: 12px; }
.voice-avatar {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center;
  border-radius: 50%; background: var(--brand); color: #fff;
  font-family: var(--display); font-weight: 800; font-size: .85rem;
}
.voice-who { display: flex; flex-direction: column; line-height: 1.35; }
.voice-who strong { font-family: var(--display); color: var(--ink); font-size: .93rem; }
.voice-who > span { font-size: .83rem; color: var(--ink-3); }

/* ---------- split CTA ---------- */
.decision-section { padding: 0 0 clamp(56px, 6.5vw, 92px); }
.decision-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.decision-copy { padding: clamp(38px, 5vw, 64px); }
.decision-copy:first-child {
  background: linear-gradient(135deg, var(--brand-800), var(--brand)); color: rgba(255,255,255,.8);
  border-radius: var(--r-lg) 0 0 var(--r-lg);
}
.decision-copy:first-child h2 { color: #fff; }
.decision-employer { background: var(--bg-2); border: 1px solid var(--line); border-left: 0; border-radius: 0 var(--r-lg) var(--r-lg) 0; }
.decision-label {
  display: inline-block; margin-bottom: 14px;
  font-family: var(--display); font-weight: 800; font-size: .72rem;
  letter-spacing: .14em; text-transform: uppercase; opacity: .75;
}
.decision-copy p { margin: 12px 0 26px; max-width: 42ch; }

/* ========================================================= INNER PAGES */

.page-head {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #04204A 0%, var(--brand-800) 55%, var(--brand-700) 100%);
  color: rgba(255,255,255,.76); padding: clamp(40px, 5vw, 68px) 0;
}
.page-head::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(760px 340px at 88% -20%, rgba(46,116,201,.45), transparent 62%);
}
.page-head .shell { position: relative; z-index: 1; }
.page-head h1 { color: #fff; }
.page-head > .shell > p { margin-top: 14px; max-width: 62ch; }

.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: .84rem; color: rgba(255,255,255,.55); margin-bottom: 16px; }
.crumbs a { color: rgba(255,255,255,.8); }
.crumbs a:hover { color: #fff; }

/* ---------- jobs page ---------- */
.jobs-head-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: 44px; align-items: end; }
.jobs-head-grid p { margin-top: 14px; }
.jobs-hero-search {
  display: flex; gap: 6px; background: #fff; padding: 7px;
  border-radius: var(--r-md); box-shadow: var(--sh-4);
}
.jobs-hero-search .bs-field { flex: 1; }

.jobs-layout { display: grid; grid-template-columns: 284px 1fr; gap: 30px; align-items: start; }

.filters {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 20px; position: sticky; top: calc(var(--header-h) + 20px); box-shadow: var(--sh-1);
}
.filters-panel > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  cursor: pointer; list-style: none;
}
.filters-panel > summary::-webkit-details-marker { display: none; }
.filters-title {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--display); font-weight: 800; font-size: 1rem; color: var(--ink);
}
.filters-title em { font-style: normal; font-weight: 600; color: var(--brand); }
.filters-chevron { color: var(--ink-3); transition: transform .18s ease; }
.filters-panel[open] > summary .filters-chevron { transform: rotate(90deg); }
@media (min-width: 961px) {
  .filters-panel > summary { cursor: default; pointer-events: none; }
  .filters-chevron { display: none; }
}

.filter-group { padding: 16px 0; border-bottom: 1px solid var(--line-2); }
.filters fieldset.filter-group { border: 0; padding-inline: 0; margin: 0; }
.filter-group:last-of-type { border-bottom: 0; }
.filter-group > label, .filter-legend {
  display: block; font-family: var(--display); font-weight: 800; font-size: .74rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink); margin-bottom: 9px;
}
.filters-actions { margin-top: 16px; }

.radio-list { display: grid; gap: 8px; }
.radio-row { display: flex; align-items: center; gap: 9px; font-size: .91rem; cursor: pointer; }
.radio-row input { accent-color: var(--brand); width: 16px; height: 16px; }
.radio-row span { display: inline-flex; align-items: baseline; gap: 7px; }
.radio-row i {
  font-style: normal; font-size: .73rem; color: var(--ink-3);
  background: var(--bg-2); padding: 1px 7px; border-radius: var(--r-full);
}

.jobs-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px; margin-bottom: 18px;
}
.jobs-count { font-family: var(--display); font-weight: 700; color: var(--ink); }
.jobs-count b { color: var(--brand); }
.jobs-count span { color: var(--ink-3); font-weight: 500; }
.sort-box { display: flex; align-items: center; gap: 9px; font-size: .89rem; }
.sort-box select { width: auto; min-width: 168px; }

.active-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--brand-050); color: var(--brand-700); border: 1px solid var(--brand-100);
  padding: 5px 9px 5px 14px; border-radius: var(--r-full); font-size: .84rem; font-weight: 500;
}
.chip a { display: grid; place-items: center; color: inherit; opacity: .65; }
.chip a:hover { opacity: 1; }

.jobs-list { display: grid; gap: 14px; }

.empty-state {
  text-align: center; padding: 64px 24px;
  border: 1px dashed var(--line); border-radius: var(--r-md); background: var(--bg-2);
}
.empty-state .icon-tile { margin-inline: auto; }
.empty-state p { margin: 10px auto 22px; max-width: 46ch; }

.pagination { display: flex; justify-content: center; gap: 6px; margin-top: 34px; flex-wrap: wrap; }
.pagination a, .pagination span {
  min-width: 40px; height: 40px; display: grid; place-items: center; padding: 0 12px;
  border: 1px solid var(--line); border-radius: var(--r-xs); background: #fff;
  font-family: var(--display); font-weight: 700; font-size: .89rem; color: var(--ink-2);
}
.pagination a:hover { border-color: var(--brand); color: var(--brand); }
.pagination .is-current { background: var(--brand); border-color: var(--brand); color: #fff; }
.pagination .gap { border: 0; background: none; }

/* ---------- job card (grid contexts) ---------- */
.job-card {
  display: flex; flex-direction: column; gap: 15px; padding: 22px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  transition: all .18s ease;
}
.job-card:hover { border-color: var(--brand-200); box-shadow: var(--sh-3); transform: translateY(-2px); }
.job-card-head { display: flex; align-items: flex-start; gap: 13px; }
.company-avatar {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center;
  border-radius: var(--r-sm); background: var(--brand-050); color: var(--brand);
  font-family: var(--display); font-weight: 800; font-size: .92rem;
}
.company-avatar .icon { width: 20px; height: 20px; }
.job-card-title { flex: 1; min-width: 0; }
.job-card-title h3 { font-size: 1.02rem; line-height: 1.32; }
.job-card-title h3 a { color: var(--ink); }
.job-card-title h3 a:hover { color: var(--brand); }
.job-company { font-size: .84rem; color: var(--ink-3); margin-top: 3px; }
.job-summary {
  font-size: .91rem; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.job-meta { display: flex; flex-wrap: wrap; gap: 7px 15px; font-size: .84rem; color: var(--ink-3); }
.job-meta li { display: inline-flex; align-items: center; gap: 6px; }
.job-meta .icon { color: var(--brand-500); }
.job-card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-top: 14px; border-top: 1px solid var(--line-2); margin-top: auto;
}
.job-posted { display: inline-flex; align-items: center; gap: 6px; font-size: .81rem; color: var(--ink-3); }

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--display); font-size: .74rem; font-weight: 800;
  padding: 5px 11px; border-radius: var(--r-full); white-space: nowrap;
}
.badge-setup { background: var(--brand-050); color: var(--brand); }
.badge-soft { background: var(--brand-050); color: var(--brand); }
.badge-line { border: 1px solid var(--line); color: var(--ink-2); }

/* ---------- job detail ---------- */
.job-hero-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.job-hero-tags .badge {
  background: rgba(255,255,255,.14); color: #fff; font-size: .79rem;
  padding: 7px 14px; font-weight: 600;
}
.job-layout { display: grid; grid-template-columns: 1fr 340px; gap: 34px; align-items: start; }

.prose h2 { font-size: 1.28rem; margin: 32px 0 13px; }
.prose h2:first-child { margin-top: 0; }
.prose p { margin-bottom: 13px; }
.prose ul { display: grid; gap: 10px; margin-bottom: 18px; }
.prose ul li { display: flex; gap: 11px; align-items: flex-start; font-size: .96rem; }
.prose ul li .icon { color: var(--brand); margin-top: 4px; flex: none; }

.apply-card {
  position: sticky; top: calc(var(--header-h) + 20px);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 24px; box-shadow: var(--sh-2);
}
.apply-card .apply-role { font-family: var(--display); font-size: 1.2rem; font-weight: 800; color: var(--ink); line-height: 1.25; }
.apply-card .apply-note { font-size: .81rem; color: var(--ink-3); margin-top: 6px; margin-bottom: 18px; }
.apply-facts { display: grid; gap: 12px; margin: 18px 0; }
.apply-facts li { display: flex; align-items: center; gap: 11px; font-size: .89rem; }
.apply-facts .icon { color: var(--brand-500); }
.apply-facts b { color: var(--ink); font-weight: 600; }
.apply-hint { font-size: .79rem; color: var(--ink-3); text-align: center; margin-top: 11px; }

/* ---------------------------------------------------------------- forms */
.form-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: clamp(22px, 3.5vw, 36px); box-shadow: var(--sh-1);
}
/* Two explicit columns, not auto-fit. auto-fit gave three at this width, so a
   four-field form put one field alone on row two beside two empty columns.
   Fixed pairs means fields always sit side by side and the row always fills. */
.form-grid { display: grid; gap: 17px 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-row { display: grid; gap: 7px; }
.form-row.full { grid-column: 1 / -1; }
/* A file input and a Turnstile iframe both have a fixed intrinsic width; giving
   them their own row stops either from being squeezed. */
.turnstile-row { margin-top: 3px; min-height: 68px; }
.turnstile-row .cf-turnstile { display: block; }
.form-row label { font-family: var(--display); font-weight: 700; font-size: .87rem; color: var(--ink); }
.req { color: var(--accent); }
.form-hint { font-size: .8rem; color: var(--ink-3); }

.field {
  width: 100%; border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 11px 13px; font: inherit; font-size: .92rem; color: var(--ink); background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); }
select.field { cursor: pointer; appearance: none; padding-right: 36px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7A90' stroke-width='2' stroke-linecap='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }
textarea.field { min-height: 128px; resize: vertical; }
input[type=file].field { padding: 9px 12px; cursor: pointer; }
input[type=file].field::file-selector-button {
  border: 0; background: var(--ink); color: #fff; font: inherit; font-size: .84rem;
  padding: 8px 14px; border-radius: var(--r-xs); margin-right: 12px; cursor: pointer;
}

.consent { display: flex; gap: 11px; align-items: flex-start; font-size: .88rem; }
.consent input { accent-color: var(--brand); width: 17px; height: 17px; margin-top: 3px; flex: none; }

.alert {
  display: flex; gap: 12px; align-items: flex-start; padding: 15px 17px;
  border-radius: var(--r-sm); margin-bottom: 22px; font-size: .92rem;
}
.alert-success { background: var(--ok-bg); border: 1px solid #A8DFC4; color: #0A6A3E; }
.alert-error { background: var(--accent-050); border: 1px solid #F3C4C5; color: var(--accent-600); }
.alert .icon { margin-top: 2px; flex: none; }
.alert strong { display: block; font-family: var(--display); }

/* -------------------------------------------------------------- content */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 24px; transition: all .18s ease;
}
.card:hover { border-color: var(--brand-200); box-shadow: var(--sh-2); }
.card h3 { margin-bottom: 8px; }
.card p { font-size: .94rem; }
.icon-tile {
  width: 44px; height: 44px; border-radius: var(--r-sm); display: grid; place-items: center;
  margin-bottom: 16px; background: var(--brand-050); color: var(--brand);
}
.icon-tile.coral { background: var(--accent-050); color: var(--accent); }

.steps { counter-reset: step; display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  font-family: var(--display); font-size: 2.3rem; font-weight: 800;
  color: var(--brand-100); line-height: 1; display: block; margin-bottom: 10px;
}
.section-navy .step::before { color: rgba(185,208,240,.3); }
.step h3 { margin-bottom: 7px; }
.step p { font-size: .94rem; }

.contact-layout { display: grid; grid-template-columns: 1fr 350px; gap: 34px; align-items: start; }
.info-list { display: grid; gap: 18px; }
.info-list li { display: flex; gap: 14px; align-items: flex-start; }
.info-list .icon-tile { margin: 0; width: 42px; height: 42px; }
.info-list b { display: block; font-family: var(--display); color: var(--ink); font-size: .94rem; }
.info-list a, .info-list span { font-size: .92rem; }

.split-layout { display: grid; grid-template-columns: 1fr 320px; gap: 34px; align-items: start; }
.content-narrow { max-width: 760px; }
.content-narrow h2 { margin: 38px 0 13px; font-size: 1.42rem; }
.content-narrow h2:first-child { margin-top: 0; }
.content-narrow h3 { margin: 24px 0 9px; }
.content-narrow p { margin-bottom: 14px; }
.content-narrow ul { display: grid; gap: 10px; margin-bottom: 18px; }
.content-narrow ul li { display: flex; gap: 11px; align-items: flex-start; }
.content-narrow ul li .icon { color: var(--brand); margin-top: 4px; flex: none; }
.pullquote {
  border-left: 3px solid var(--brand); padding: 4px 0 4px 22px; margin: 24px 0;
  font-family: var(--display); font-size: 1.12rem; font-weight: 600; color: var(--ink); line-height: 1.5;
}

/* --------------------------------------------------------------- footer */
.site-footer { background: var(--ink); color: rgba(255,255,255,.62); padding: 62px 0 26px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 40px; }
.footer-logo { height: 62px; width: auto; margin-bottom: 16px; }
.footer-blurb { font-size: .92rem; max-width: 34ch; }
.footer-blurb strong { color: #fff; font-family: var(--display); }
.footer-col h3 { color: #fff; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 15px; }
.footer-col ul { display: grid; gap: 10px; }
.footer-col a { color: rgba(255,255,255,.62); font-size: .92rem; }
.footer-col a:hover { color: #fff; }
.footer-contact li { display: flex; gap: 10px; align-items: flex-start; }
.footer-contact .icon { color: var(--brand-200); margin-top: 3px; }
.footer-contact span { font-size: .92rem; }
.footer-bottom {
  margin-top: 46px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px; font-size: .85rem;
}
.footer-legal { display: flex; gap: 22px; }
.footer-legal a { color: rgba(255,255,255,.62); }
.footer-legal a:hover { color: #fff; }

/* ----------------------------------------------------------- responsive */
@media (max-width: 1080px) {
  .board-search { grid-template-columns: 1fr 1fr; }
  .board-search .bs-keyword { grid-column: 1 / -1; }
  .board-search .bs-field + .bs-field::before { display: none; }
  .board-search .btn { grid-column: 1 / -1; }
  .method-grid { grid-template-columns: 1fr; }
  .decision-grid { grid-template-columns: 1fr; }
  .decision-copy:first-child { border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .decision-employer { border-left: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--r-lg) var(--r-lg); }
}

@media (max-width: 1080px) {
  .nav-toggle { display: grid; place-items: center; }
  .site-nav {
    position: absolute; top: 100%; left: 0; right: 0; display: none;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: #fff; border-bottom: 1px solid var(--line);
    padding: 14px 20px 20px; box-shadow: var(--sh-3);
  }
  .site-nav.is-open { display: flex; }
  /* The desktop underline does not read in a stacked menu, so the current page
     gets a left rule and the brand colour instead. */
  .site-nav > a:not(.btn) {
    padding: 14px 12px; border-radius: var(--r-xs);
    border-left: 3px solid transparent;
  }
  .site-nav > a:not(.btn) + a:not(.btn) { border-top: 1px solid var(--line-2); }
  .site-nav > a.is-active::after { display: none; }
  .site-nav > a.is-active {
    color: var(--brand); background: var(--brand-050); border-left-color: var(--brand);
  }
  .nav-cta { margin: 12px 0 0; padding-block: 15px; }
  .brand-logo { height: 46px; }
}

@media (max-width: 960px) {
  .jobs-layout, .job-layout, .contact-layout, .split-layout { grid-template-columns: 1fr; }
  .filters, .apply-card { position: static; }
  .jobs-head-grid { grid-template-columns: 1fr; gap: 18px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 680px) {
  .shell { width: min(100% - 32px, var(--wrap)); }
  .board-search { grid-template-columns: 1fr; }
  .board-head { align-items: flex-start; }
  .job-row > a { grid-template-columns: 38px 1fr; gap: 13px; padding: 16px; }
  .job-row-icon { width: 38px; height: 38px; }
  .job-row-aside { grid-column: 2; text-align: left; margin-top: 2px; }
  .job-row-aside b { display: inline; }
  .job-row-date { display: inline; margin-left: 10px; }
  .job-row-go { display: none; }
  .job-card-foot { flex-direction: column; align-items: stretch; gap: 10px; }
  .job-card-foot .btn { justify-content: center; }
  .footer-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media print {
  .site-header, .site-footer, .apply-card, .nav-toggle, .board-hero { display: none !important; }
  body { color: #000; }
}

/* ==========================================================================
   Page-specific blocks
   ========================================================================== */

.jobs-section, .method-section { background: var(--bg); }
.jobs-head .shell > p { max-width: none; }

.footer-brand .footer-logo-wrap { display: block; }

/* ---------- about ---------- */
.about-layout { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(40px, 5vw, 72px); align-items: start; }

.about-photo-card { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-3); background: #fff; }
.about-photo-card img { width: 100%; height: auto; display: block; }
.about-photo-card figcaption {
  padding: 16px 20px; font-size: .88rem; color: var(--ink-3);
  border-top: 1px solid var(--line); background: #fff;
}

.about-principles { display: grid; gap: 14px; margin-top: 8px; }
.about-principles li {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 16px 18px; background: var(--bg-2);
  border: 1px solid var(--line); border-radius: var(--r-sm);
}
.about-principles .icon { color: var(--brand); margin-top: 3px; flex: none; }
.about-principles strong { display: block; font-family: var(--display); color: var(--ink); margin-bottom: 3px; }

.about-cta { background: var(--bg-2); }
.about-cta-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 26px; padding: clamp(30px, 4vw, 52px);
  background: linear-gradient(135deg, var(--brand-800), var(--brand));
  border-radius: var(--r-lg); color: rgba(255,255,255,.82);
}
.about-cta-inner h2 { color: #fff; }
.about-cta-inner p { margin-top: 10px; max-width: 46ch; }

/* Testimonial card (about page grid) */
.tcard {
  display: flex; flex-direction: column; gap: 16px; height: 100%; padding: 26px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  transition: all .18s ease;
}
.tcard:hover { border-color: var(--brand-200); box-shadow: var(--sh-2); }
.tcard .icon-quote { color: var(--brand-100); width: 32px; height: 32px; }
.tcard blockquote { flex: 1; font-size: .94rem; line-height: 1.62; }
.tcard figcaption {
  display: flex; align-items: center; gap: 12px;
  padding-top: 16px; border-top: 1px solid var(--line-2);
}
.tcard .avatar {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center;
  border-radius: 50%; background: var(--brand); color: #fff;
  font-family: var(--display); font-weight: 800; font-size: .85rem;
}
.tcard .who { display: flex; flex-direction: column; line-height: 1.35; }
.tcard .who b { font-family: var(--display); color: var(--ink); font-size: .93rem; }
.tcard .who span { font-size: .83rem; color: var(--ink-3); }

@media (max-width: 960px) {
  .about-layout { grid-template-columns: 1fr; }
}

/* The about page leads with the story, so its banner runs a little taller. */
.page-head-about { padding: clamp(52px, 6vw, 88px) 0; }
.page-head-about h1 { max-width: 18ch; }

/* ==========================================================================
   MOBILE REFINEMENTS
   Audited at 375px: clipped meta lines, single-column directories that ran
   the page to 11,600px, sub-12px labels and thumb targets under 38px.
   ========================================================================== */

@media (max-width: 680px) {
  /* Side-by-side pairs stop working once a column is under ~230px. */
  .form-grid { grid-template-columns: 1fr; }

  /* --- board rows: the setup and schedule were colliding, and the schedule was
         being clipped at the right edge. Give each its own line. --- */
  .job-row > a { grid-template-columns: 40px 1fr; gap: 12px 13px; padding: 15px 16px; align-items: start; }
  .job-row-icon { width: 40px; height: 40px; }
  .job-row-main strong { font-size: 1rem; margin-bottom: 6px; }
  .job-row-meta { gap: 3px 12px; font-size: .81rem; }
  .job-row-aside {
    grid-column: 2; display: flex; flex-wrap: wrap; align-items: baseline;
    gap: 4px 10px; text-align: left; white-space: normal; margin-top: 2px;
  }
  .job-row-aside b { display: inline; font-size: .92rem; }
  .job-row-date { display: inline; margin: 0; font-size: .79rem; }

  /* --- job cards: the setup badge was squeezing the title into two lines --- */
  .job-card { padding: 18px; gap: 13px; }
  .job-card-head { flex-wrap: wrap; }
  .job-card-title { flex: 1 1 calc(100% - 57px); }
  .job-card-head .badge-setup { flex: 0 0 auto; margin-left: 57px; }
  .job-card-title h3 { font-size: 1.05rem; }

  /* --- two-up directories: one tile per row turned these into endless
         scrolls. Both fit comfortably at 2 columns on a 375px screen. --- */
  .fields-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .field-tile { min-height: 0; padding: 16px 14px; }
  .fields-section::before { display: none; }
  .field-icon { width: 36px; height: 36px; margin-bottom: 12px; }
  .field-icon .icon { width: 18px; height: 18px; }
  .field-tile h3 { font-size: .92rem; }
  .field-tile p { font-size: .8rem; margin-top: 8px; }
  .field-go { display: none; }

  .places-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .places-grid a { padding: 15px 16px; }
  .places-grid strong { font-size: .9rem; }
  .place-n { font-size: 1.55rem; margin-bottom: 5px; }

  /* --- thumb targets: footer and inline nav links sat at 18–26px --- */
  .footer-col ul { gap: 2px; }
  /* Text links in the footer columns get a 44px tap target. The social tiles
     are excluded: they are already 40px square, and this rule's
     `display: inline-flex` would drop their glyph to the left edge. */
  .footer-col ul:not(.footer-social) li a {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .footer-contact li { min-height: 40px; align-items: center; }
  .footer-legal a { display: inline-flex; align-items: center; min-height: 44px; }
  .board-quick a, .chip { min-height: 40px; align-items: center; }
  .text-link { display: inline-flex; align-items: center; min-height: 40px; }
  /* A border-bottom on a 40px-tall inline-flex leaves the rule floating below
     the text, so widen the hit area and underline the glyphs instead. */
  .board-more p a {
    display: inline; border-bottom: 0;
    text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
    padding: 10px 0;
  }

  /* --- nothing below 12px: these are counts and labels people actually read --- */
  .board-quick span { font-size: .75rem; }
  .field-tile p, .places-grid span,
  .job-row-date, .radio-row i, .form-hint { font-size: .78rem; }
  .decision-label { font-size: .76rem; }

  /* --- the tab strip scrolls; say so with a fade at the edge --- */

  /* --- section rhythm: tighten the vertical padding on a phone --- */
  .section { padding: 46px 0; }
  .board-head { margin-bottom: 18px; }
  .band-head { margin-bottom: 24px; }
  .method-voices { margin-top: 34px; padding-top: 30px; }
  .board-hero { padding: 40px 0 44px; }
  .board-lead { font-size: .98rem; }
}

/* Very narrow phones (≤360px): two columns get cramped, fall back to one. */
@media (max-width: 360px) {
  .fields-grid, .places-grid { grid-template-columns: 1fr; }
  .job-card-head .badge-setup { margin-left: 0; }
}

/* ==========================================================================
   Tap targets & legibility — from the 375px audit
   ========================================================================== */

/* The job title was a 23px-tall link inside a 200px card. Stretch it over the
   whole card so anywhere on the card opens the role, on every screen size. */
.job-card { position: relative; }
.job-card-title h3 a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.job-card-foot .btn { position: relative; z-index: 2; }

@media (max-width: 680px) {
  /* Filter labels and — more importantly — the setup badge were at 11.8px. */
  .filter-group > label, .filter-legend { font-size: .8rem; }
  .badge { font-size: .8rem; padding: 6px 12px; }
  .badge-setup { font-size: .84rem; }

  /* The real target for a radio is its label, so give the row full height. */
  .radio-row { min-height: 44px; }
  .radio-row input { width: 20px; height: 20px; }
  .consent { padding: 4px 0; }
  .consent input { width: 22px; height: 22px; margin-top: 1px; }

  .crumbs { gap: 6px 10px; }
  .crumbs a { display: inline-flex; align-items: center; min-height: 32px; }

  /* Sticky filters would eat a phone screen; they are already static here, but
     keep the panel from running long once it is open. */
  .filter-group { padding: 14px 0; }
}

@media (max-width: 680px) {
  /* Tapping a phone number should place a call and tapping an address should
     open mail — on a contact page these are the two targets that matter most,
     and they were 18px tall. */
  .info-list a, .footer-contact a {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .info-list li { align-items: center; }
}

/* ==========================================================================
   HERO SLIDER
   Three photographs crossfade behind the copy while the search bar stays put.
   Every slide is in the markup, so slide 1 is correct before JS runs and the
   whole thing degrades to a static hero if JS never arrives.
   ========================================================================== */

.board-hero { position: relative; isolation: isolate; }

.hero-slides { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero-slide {
  position: absolute; inset: 0;
  background-size: cover; background-repeat: no-repeat;
  opacity: 0; transform: scale(1.06);
  transition: opacity 1.1s ease, transform 8s linear;
}
.hero-slide.is-on { opacity: 1; transform: scale(1); }

/* The photographs are busy, so the copy sits on its own wash of brand colour. */
.board-hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(105deg, rgba(4,32,74,.95) 0%, rgba(0,44,107,.88) 42%, rgba(0,78,183,.62) 100%),
    radial-gradient(760px 420px at 88% -10%, rgba(46,116,201,.42), transparent 62%);
}
.board-hero::after { z-index: -1; }

/* Slides are stacked so the section height never jumps between them. */
.hero-stage { display: grid; }
.hero-copy {
  grid-area: 1 / 1; opacity: 0; visibility: hidden;
  transform: translateY(14px);
  transition: opacity .55s ease, transform .55s ease, visibility 0s linear .55s;
}
.hero-copy.is-on {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .6s ease .12s, transform .6s ease .12s, visibility 0s;
}
.hero-copy .board-kicker,
.hero-copy h1,
.hero-copy .board-lead,
.hero-copy .hero-cta { opacity: 0; transform: translateY(16px); }
.hero-copy.is-on .board-kicker { animation: heroIn .6s .05s ease both; }
.hero-copy.is-on h1            { animation: heroIn .6s .14s ease both; }
.hero-copy.is-on .board-lead   { animation: heroIn .6s .23s ease both; }
.hero-copy.is-on .hero-cta     { animation: heroIn .6s .32s ease both; }
@keyframes heroIn { to { opacity: 1; transform: none; } }

.hero-cta { margin-top: 26px; }

.hero-dots { display: flex; gap: 10px; margin-top: 30px; }
.hero-dots button {
  width: 34px; height: 34px; padding: 0; display: grid; place-items: center;
  background: none; border: 0; cursor: pointer;
}
.hero-dots span {
  display: block; width: 26px; height: 3px; border-radius: 3px;
  background: rgba(255,255,255,.34); transition: background .25s ease, width .25s ease;
}
.hero-dots button:hover span { background: rgba(255,255,255,.62); }
.hero-dots button.is-on span { background: #fff; width: 40px; }

/* ==========================================================================
   SCROLL REVEAL
   Sections lift in as they enter the viewport. The class is only added by JS,
   so with JS off (or reduced motion on) everything is simply visible.
   ========================================================================== */

.js .js-reveal { opacity: 0; transform: translateY(22px); }
.js-reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
}
/* Children stagger so a grid arrives as a wave rather than a block. */
.js .js-stagger > * { opacity: 0; transform: translateY(18px); }
.js-stagger.is-in > * {
  opacity: 1; transform: none;
  transition: opacity .55s cubic-bezier(.22,.61,.36,1), transform .55s cubic-bezier(.22,.61,.36,1);
}
.js-stagger.is-in > *:nth-child(1) { transition-delay: .04s; }
.js-stagger.is-in > *:nth-child(2) { transition-delay: .09s; }
.js-stagger.is-in > *:nth-child(3) { transition-delay: .14s; }
.js-stagger.is-in > *:nth-child(4) { transition-delay: .19s; }
.js-stagger.is-in > *:nth-child(5) { transition-delay: .24s; }
.js-stagger.is-in > *:nth-child(6) { transition-delay: .29s; }
.js-stagger.is-in > *:nth-child(7) { transition-delay: .34s; }
.js-stagger.is-in > *:nth-child(8) { transition-delay: .39s; }


/* Nobody should be made motion-sick by a job board. */
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: opacity .01ms; transform: none !important; }
  .hero-copy, .hero-copy * { transition: none !important; animation: none !important; }
  .js-reveal, .js-stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; }
}

@media (max-width: 680px) {
  .hero-dots { margin-top: 22px; }
  .hero-cta { margin-top: 20px; }
}

/* ==========================================================================
   Legal pages (data privacy)
   ========================================================================== */

.legal-layout { grid-template-columns: 1fr 300px; }
.legal-intro {
  font-size: 1.05rem; color: var(--ink); padding: 18px 22px; margin-bottom: 30px;
  background: var(--brand-050); border-left: 3px solid var(--brand);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.legal-body h2 {
  padding-top: 10px; border-top: 1px solid var(--line);
  font-size: 1.28rem;
}
.legal-body h2:first-of-type { border-top: 0; padding-top: 0; }

.legal-steps { counter-reset: legal; display: grid; gap: 14px; margin: 18px 0 0; }
.legal-steps li {
  display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start;
  padding: 18px 20px; background: var(--bg-2);
  border: 1px solid var(--line); border-radius: var(--r-sm);
}
.legal-step-no {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--brand); color: #fff;
  font-family: var(--display); font-weight: 800; font-size: .86rem;
}
.legal-steps strong { display: block; font-family: var(--display); color: var(--ink); margin-bottom: 4px; }
.legal-steps p { font-size: .9rem; margin: 0; }
.legal-steps code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em;
  background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px;
}

.legal-toc { position: sticky; top: calc(var(--header-h) + 20px); padding: 20px; }
.legal-toc ul { display: grid; gap: 2px; }
.legal-toc a {
  display: block; padding: 9px 12px; border-radius: var(--r-xs);
  font-size: .89rem; color: var(--ink-2); border-left: 2px solid transparent;
}
.legal-toc a:hover { background: var(--brand-050); color: var(--brand); border-left-color: var(--brand); }

@media (max-width: 960px) {
  .legal-layout { grid-template-columns: 1fr; }
  .legal-toc { position: static; }
}
@media (max-width: 680px) {
  .legal-toc a { min-height: 44px; display: flex; align-items: center; }
  .legal-steps li { padding: 16px; }
}

/* ==========================================================================
   Contact page
   ========================================================================== */

/* Segmented "I am a…" — a radio group that reads as a choice, not a dropdown. */
.choice-set { border: 0; padding: 0; margin: 0 0 24px; }
.choice-set legend {
  padding: 0; margin-bottom: 10px;
  font-family: var(--display); font-weight: 700; font-size: .87rem; color: var(--ink);
}
.choice-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.choice { position: relative; cursor: pointer; }
.choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.choice-body {
  display: flex; flex-direction: column; gap: 5px; height: 100%;
  padding: 15px 14px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  transition: all .16s ease;
}
.choice-body .icon { color: var(--ink-3); transition: color .16s ease; }
.choice-body b { font-family: var(--display); font-size: .92rem; color: var(--ink); }
.choice-body em { font-style: normal; font-size: .8rem; color: var(--ink-3); }
.choice:hover .choice-body { border-color: var(--brand-200); }
.choice input:checked + .choice-body {
  border-color: var(--brand); background: var(--brand-050);
  box-shadow: 0 0 0 1px var(--brand);
}
.choice input:checked + .choice-body .icon { color: var(--brand); }
.choice input:focus-visible + .choice-body { outline: 2px solid var(--brand); outline-offset: 2px; }

.field.has-error { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(174,12,16,.1); }
.field-error { font-size: .8rem; color: var(--accent-600); }

.form-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px;
  margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line-2);
}
.form-foot .form-hint { flex: 1; min-width: 220px; margin: 0; }

.sent-panel { text-align: center; padding: 22px 8px; }
.sent-mark {
  display: grid; place-items: center; width: 62px; height: 62px; margin: 0 auto 20px;
  border-radius: 50%; background: var(--ok-bg); color: var(--ok);
}
.sent-mark .icon { width: 30px; height: 30px; stroke-width: 2.4; }
.sent-panel h2 { font-size: 1.6rem; margin-bottom: 12px; }
.sent-panel p { max-width: 46ch; margin: 0 auto 26px; }
.sent-panel .btn-group { justify-content: center; }

.contact-aside { display: grid; gap: 18px; }
.contact-cta p { margin-bottom: 16px; }

@media (max-width: 560px) {
  .choice-row { grid-template-columns: 1fr; }
  .choice-body { flex-direction: row; align-items: center; gap: 12px; }
  .choice-body em { display: none; }
  .form-foot .btn { width: 100%; justify-content: center; }
}

/* The eyebrow kickers are gone; these two remain as labels for a sidebar nav
   and an About card, so they get a quiet heading style of their own. */
.side-title {
  font-family: var(--display); font-weight: 800; font-size: .8rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
  margin-bottom: 14px;
}
.legal-toc .side-title { margin-bottom: 10px; }

/* ==========================================================================
   Carousel — scroll-snap track with arrows and dots
   Native horizontal scrolling does the work: it swipes on touch, takes the
   keyboard, and degrades to a plain scrollable list without JavaScript.
   ========================================================================== */

.carousel { position: relative; }

.carousel-track {
  display: flex; gap: 20px; padding: 4px 4px 8px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track > li {
  flex: 0 0 calc((100% - 40px) / 3);
  scroll-snap-align: start;
  display: flex;
}
.carousel-track > li > .tcard { width: 100%; }
.carousel-track:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; border-radius: var(--r-md); }

.carousel-nav {
  display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 26px;
}
.carousel-btn {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none;
  background: #fff; border: 1px solid var(--line); border-radius: 50%;
  color: var(--ink); cursor: pointer; transition: all .16s ease;
}
.carousel-btn:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); box-shadow: var(--sh-2); }
.carousel-btn:disabled { opacity: .35; cursor: default; }
.carousel-btn[data-dir="-1"] .icon { transform: rotate(180deg); }

.carousel-dots { display: flex; gap: 7px; }
.carousel-dots button {
  width: 22px; height: 24px; padding: 0; display: grid; place-items: center;
  background: none; border: 0; cursor: pointer;
}
.carousel-dots span {
  display: block; width: 100%; height: 4px; border-radius: 4px;
  background: var(--line); transition: background .2s ease;
}
.carousel-dots button:hover span { background: var(--brand-200); }
.carousel-dots button.is-on span { background: var(--brand); }

@media (max-width: 900px) {
  .carousel-track > li { flex-basis: calc((100% - 20px) / 2); }
}
@media (max-width: 620px) {
  .carousel-track { gap: 14px; }
  .carousel-track > li { flex-basis: 100%; }
  .carousel-nav { gap: 12px; margin-top: 20px; }
  .carousel-dots button { width: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .carousel-track { scroll-behavior: auto; }
}

/* The testimonials and the closing CTA read as one thought, but two full
   section paddings stacked between them left a 188px hole. */
#stories { padding-bottom: clamp(28px, 3.2vw, 44px); }
.about-cta { padding-top: clamp(28px, 3.2vw, 44px); }

/* ==========================================================================
   Announcement modal
   Hidden until JS opens it, so a script failure can never leave a dialog
   on screen with no way to dismiss it.
   ========================================================================== */

.modal[hidden] { display: none; }
.modal {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  padding: 24px;
}

.modal-veil {
  position: absolute; inset: 0;
  background: rgba(4, 16, 38, .62);
  backdrop-filter: blur(3px);
  animation: modalVeil .28s ease both;
}
@keyframes modalVeil { from { opacity: 0; } }

.modal-box {
  position: relative;
  width: min(100%, 520px);
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  padding: clamp(28px, 4vw, 42px);
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-4);
  text-align: center;
  animation: modalIn .34s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(16px) scale(.98); }
}

.modal-x {
  position: absolute; top: 14px; right: 14px;
  display: grid; place-items: center; width: 38px; height: 38px;
  background: none; border: 0; border-radius: 50%;
  color: var(--ink-3); cursor: pointer; transition: all .15s ease;
}
.modal-x:hover { background: var(--bg-2); color: var(--ink); }

.modal-logo { height: 58px; width: auto; margin: 0 auto 20px; }

.modal-kicker {
  font-size: .9rem; color: var(--ink-3); margin-bottom: 12px;
}

.modal-box h2 {
  font-size: clamp(1.3rem, 1.1rem + .9vw, 1.65rem);
  line-height: 1.25; margin-bottom: 18px;
}
.modal-box h2 em { font-style: normal; color: var(--brand); }

.modal-body { display: grid; gap: 12px; font-size: .95rem; }
.modal-body strong { color: var(--ink); }

.modal-foot {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  margin-top: 26px;
}

/* The page must not scroll behind an open dialog. */
body.is-locked { overflow: hidden; }

@media (max-width: 560px) {
  .modal { padding: 16px; }
  .modal-box { padding: 26px 20px; }
  .modal-logo { height: 46px; margin-bottom: 16px; }
  .modal-foot { flex-direction: column; }
  .modal-foot .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .modal-veil, .modal-box { animation: none; }
}

/* Turnstile cannot render when the site key's hostname list does not include
   the domain being used. The widget is then an empty box, so the form says so
   rather than asking for a tick that is not there.

   The [hidden] rule must come first and must exist at all: the browser hides
   [hidden] elements from its own stylesheet, and ANY author `display` beats
   that regardless of specificity. Setting `display: block` here made the
   warning permanently visible no matter what the script did. */
.turnstile-failed[hidden] { display: none; }
.turnstile-failed { margin-top: 8px; max-width: 46ch; }

/* ---------- social links ---------- */

/* Brand marks are filled glyphs, so they read heavier than the stroke icons
   around them; a tinted tile gives each one a consistent footprint instead.

   `.footer-col ul` is (0,1,1) and lays its children out in a grid, so this
   needs the same weight or the icons stack into a column. */
.footer-col ul.footer-social,
.contact-social ul {
  display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0;
}
/* The margin has to sit at this weight too. Resetting `margin` in the rule
   above silently cancelled a `margin-top` set at lower specificity, which is
   what left the icons touching the line above them on mobile. */
.footer-col ul.footer-social { margin: 22px 0 0; }
.contact-social ul { margin: 0; }
.footer-social a, .contact-social a {
  display: grid; place-items: center;
  /* `justify-content` too: place-items is grid-only, so if anything flips this
     box to flex the glyph would otherwise fall to the left edge. */
  justify-content: center; align-items: center;
  width: 40px; height: 40px;
  border-radius: 10px; transition: background .16s ease, color .16s ease, transform .16s ease;
}

/* The glyph inherited the 16px `icon-sm` size, which filled 40% of a 40px
   tile and read as an empty box with a smudge in it. A brand mark has to be
   big enough in its tile to be recognised at a glance. */
.footer-social .icon, .contact-social .icon { width: 20px; height: 20px; }

.footer-social a {
  background: rgba(255,255,255,.1); color: rgba(255,255,255,.88);
}
.footer-social a:hover, .footer-social a:focus-visible {
  background: var(--brand); color: #fff; transform: translateY(-2px);
}
.contact-social { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.contact-social .form-hint { margin-bottom: 10px; }
.contact-social a { background: var(--brand-050); color: var(--brand); }
.contact-social a:hover, .contact-social a:focus-visible { background: var(--brand); color: #fff; transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
  .footer-social a:hover, .contact-social a:hover { transform: none; }
}