/* =========================================================================
   Nevoxel — the "Harbour" design system

   Implements Harbour v1.0 (Brand Guidelines/Marine recruitment design
   system-handoff.zip). Four rules drive everything below:

     1. Structure over effect — rules, borders and grids do the work. No
        gradient meshes, glows, glass panels or animated blobs; those read
        as tech, and this is an operating maritime business.
     2. One orange, one job — signal orange marks action and nothing else.
        Never body text, never headings, never decoration, never a fill
        larger than a button.
     3. Two doors, always — Find Jobs (navy) and Hire Talent (orange) as a
        fixed pair, in that order.
     4. Evidence, not adjectives — figures, places and credentials carry
        the experience claim, so they are set plainly and ruled, not
        dramatised.

   Target colour proportion on any full page: white / mist 60%, navy 33%,
   orange 7%.

   LAYOUT RULE
   -----------
   `.band` owns every section's vertical rhythm (96px desktop, 56px mobile).
   No component class sets section-level top/bottom padding, so section
   spacing can never be decided by which selector happens to win.
   ========================================================================= */

/* ----------------------------------------------------------------- tokens */

:root {
  /* -----------------------------------------------------------------
     HARBOUR PALETTE

     Navy is structure and ink. Signal orange is action, and only action.
     White and mist carry the page. Nothing else has a job.

     Components address these through the semantic aliases below the scales
     (--paper, --ink, --sea-fg…) so a surface can be restated in one place
     rather than 200.
     ----------------------------------------------------------------- */

  /* navy scale */
  --navy-950: #071426;
  --navy-900: #0b1f3a;
  --navy-800: #173352;
  --navy-700: #33455a;

  /* slate scale */
  --slate-600: #465666;
  --slate-500: #5a6876;
  --slate-400: #77848f;
  --slate-300: #a9b3bc;

  /* signal orange — action only */
  --signal-50: #fdede7;
  --signal-400: #ff7a47;
  --signal-600: #e8541f;
  --signal-800: #b33f13;

  /* neutrals & status */
  --page: #ffffff;
  --mist-50: #f4f6f8;
  --line: #e2e6ea;
  --line-strong: #c8d0d8;
  --success: #1f7a5c;
  --success-50: #eaf5f1;

  /* ---- semantic aliases ---- */

  --deep: var(--navy-900); /* dark sections, hero, mobile drawer */
  --deep-2: var(--navy-950); /* deepest layer — footer */
  --shoal: var(--navy-800); /* softer navy band */
  --shoal-2: var(--navy-700);
  --paper: var(--page);
  --paper-2: var(--mist-50); /* alt bands */
  --paper-3: var(--line);

  --ink: var(--navy-900); /* headings + strong text on white (14.9:1) */
  --ink-70: var(--slate-600); /* body text on white (7.8:1) */
  --ink-50: var(--slate-400); /* muted meta on white (4.6:1) */
  --ink-15: var(--line); /* default hairline */
  --ink-08: #edf0f3; /* faintest hairline */

  --sea-fg: #ffffff; /* headings on navy at 100% */
  --sea-fg-70: rgba(255, 255, 255, 0.75); /* body on navy at 75% */
  --sea-fg-50: rgba(255, 255, 255, 0.5); /* eyebrows / meta on navy */
  --sea-line: rgba(255, 255, 255, 0.22); /* hairline on navy */
  --sea-line-soft: rgba(255, 255, 255, 0.14);

  /* -----------------------------------------------------------------
     TYPE — three families, three jobs (self-hosted, see @font-face below).
       Plus Jakarta Sans  display & headings, 700/800 only, negative tracking
       Onest              body, UI, forms, labels, buttons — 400/500/600
       JetBrains Mono     eyebrows, reference numbers, dates
     ----------------------------------------------------------------- */
  --display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --body: 'Onest', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --font-primary: var(--body);

  /* Weights. --fw-thin is retained as a name only; Harbour has no thin cut,
     so it resolves to Book — pull-quotes read through size, not weight. */
  --fw-thin: 400;
  --fw-book: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-heavy: 800;

  /* Tracking, per role. Display tightens; eyebrows open right up. */
  --tracking-display: -0.04em;
  --tracking-heading: -0.025em;
  --tracking-eyebrow: 0.14em;
  --letter-spacing-default: normal;
  --text-transform-default: none;

  /* Typographic scale — Harbour tokens */
  --fs-h1: 3.5rem; /* display-xl · 56px, hero only */
  --lh-h1: 1.03;
  --fw-h1: var(--fw-heavy);

  --fs-h2: 2.625rem; /* display-l · 42px, page + section titles */
  --lh-h2: 1.08;
  --fw-h2: var(--fw-heavy);

  --fs-h3: 1.875rem; /* heading-l · 30px */
  --lh-h3: 1.2;
  --fw-h3: var(--fw-bold);

  --fs-h4: 1.25rem; /* heading-m · 20px, card titles */
  --lh-h4: 1.25;
  --fw-h4: var(--fw-bold);

  --fs-lede: 1.0625rem; /* body-l · 17px, max 60ch */
  --fs-body: 0.9375rem; /* body-m · 15px, max 70ch */
  --lh-body: 1.65;
  --fw-body: var(--fw-book);

  --fs-small: 0.8125rem; /* body-s · 13px, card copy + helper text */
  --lh-small: 1.6;

  --fs-link: 0.9375rem;
  --lh-link: 1.65;
  --fw-link: var(--fw-book);

  --fs-button: 0.875rem; /* 14px · 600 — MD control is 48px tall */
  --lh-button: 1;
  --fw-button: var(--fw-semibold);

  --fs-list: 0.9375rem;
  --fw-list: var(--fw-book);

  --fs-eyebrow: 0.6875rem; /* 11px mono, 0.14em, caps */

  --fs-label: 0.8125rem; /* field labels · 13px / 600 */
  --lh-label: 1.4;
  --fw-label: var(--fw-semibold);

  /* 4px spacing scale */
  --s1: 0.5rem; /* 8  · pill gaps */
  --s2: 1rem; /* 16 · card grid gap */
  --s3: 1.5rem; /* 24 · card padding */
  --s4: 2rem; /* 32 */
  --s5: 2.5rem; /* 40 · block padding */
  --s6: 4rem; /* 64 · gutter */
  --s7: 6rem; /* 96 · section rhythm */
  --s8: 8rem;
  --s-section-mobile: 3.5rem; /* 56 · section rhythm below 768 */

  --wrap: 1240px;
  --wrap-narrow: 760px;

  /* Shape — full rounding is reserved for buttons and filter chips. */
  --radius: 4px; /* inputs */
  --radius-tag: 6px; /* tags, avatars */
  --radius-lg: 8px; /* cards, blocks */
  --radius-media: 12px; /* media, hero */
  --radius-pill: 999px;

  /* Elevation — restrained. Border first, shadow only where it earns it. */
  --shadow-sm: 0 1px 2px rgb(11 31 58 / 0.06);
  --shadow-md: 0 6px 20px rgb(11 31 58 / 0.1);
  --shadow-lg: 0 18px 44px rgb(11 31 58 / 0.16);
  --focus-ring: 0 0 0 2px rgb(11 31 58 / 0.16);

  /* Motion — 160ms for hovers, 240ms for panels. No parallax, no scroll-jack. */
  --ease: cubic-bezier(0.2, 0.6, 0.3, 1);
  --ease-out: cubic-bezier(0.2, 0.6, 0.3, 1);
  --dur: 240ms;
  --dur-fast: 160ms;

  --header-h: 76px;
}

/* --------------------------------------------------------------- webfonts */
/* Plus Jakarta Sans, Onest and JetBrains Mono (all SIL OFL) — self-hosted
   variable cuts, so no request ever leaves the origin. One file per family
   per subset covers the whole weight range the system uses. */

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/assets/fonts/PlusJakartaSans-latin.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/assets/fonts/PlusJakartaSans-latin-ext.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Onest';
  src: url('/assets/fonts/Onest-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Onest';
  src: url('/assets/fonts/Onest-latin-ext.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('/assets/fonts/JetBrainsMono-latin.woff2') format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/assets/fonts/JetBrainsMono-latin-ext.woff2') format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------------------ reset */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-primary);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-body);
  letter-spacing: var(--letter-spacing-default);
  text-transform: var(--text-transform-default);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,
svg {
  max-width: 100%;
  display: block;
}

h1,
h2,
h3,
h4 {
  font-family: var(--display);
  margin: 0;
  text-wrap: balance;
  letter-spacing: var(--tracking-heading);
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: var(--fw-h1); letter-spacing: var(--tracking-display); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-h2); letter-spacing: -0.032em; }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-h3); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: var(--fw-h4); letter-spacing: -0.02em; }

p {
  margin: 0 0 var(--s2);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-body);
  text-wrap: pretty;
}

p:last-child {
  margin-bottom: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration-color: var(--signal-600);
  text-underline-offset: 3px;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* Emphasis inside a display heading stays in the display face — Harbour
   headings never drop into a second family mid-line. */
em {
  font-style: italic;
  font-family: inherit;
}

.mono {
  font-family: var(--mono);
  font-size: 0.8125em;
  letter-spacing: normal;
}

.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;
}

/* -------------------------------------------------------- focus + a11y */

/* The focus ring is navy on every interactive element, including orange
   buttons — never orange. On navy surfaces it flips to white so it stays
   visible. */
:focus-visible {
  outline: 2px solid var(--navy-900);
  outline-offset: 3px;
  border-radius: 2px;
}

.band--deep :focus-visible,
.band--shoal :focus-visible,
.hero :focus-visible,
.mega :focus-visible,
.mobile-nav :focus-visible,
.footer :focus-visible,
.cookie :focus-visible {
  outline-color: #ffffff;
}

.skip {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: 200;
  background: var(--signal-600);
  color: #fff;
  padding: var(--s2) var(--s3);
  font-family: var(--mono);
  font-size: var(--fs-small);
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease);
}

.skip:focus {
  transform: translate(-50%, 0);
}

/* --------------------------------------------------------------- layout */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--s3);
}

/* `.band` is the single owner of section rhythm: 96px desktop, 56px mobile. */
.band {
  position: relative;
  padding-block: var(--s7);
}

.band--tight {
  padding-block: var(--s6);
}

.band--loose {
  padding-block: var(--s8);
}

@media (max-width: 768px) {
  .band {
    padding-block: var(--s-section-mobile);
  }

  .band--tight {
    padding-block: var(--s5);
  }

  .band--loose {
    padding-block: var(--s6);
  }
}

.band--paper {
  background: var(--paper);
}

.band--paper-alt {
  background: var(--paper-2);
}

.band--shoal {
  background: var(--shoal);
  color: var(--sea-fg);
}

.band--deep {
  background: var(--deep);
  color: var(--sea-fg);
}

.band--deep h1,
.band--deep h2,
.band--deep h3,
.band--shoal h1,
.band--shoal h2,
.band--shoal h3 {
  color: var(--sea-fg);
}

/* ------------------------------------------------------- section boundary */
/* Harbour breaks pages with a plain rule and a change of surface, not with
   drawn dividers. `.band--coast` marks a section that follows a navy one;
   it gets a little extra head-room and nothing else. */

.band--coast {
  padding-top: calc(var(--s7) + var(--s1));
}

@media (max-width: 768px) {
  .band--coast {
    padding-top: calc(var(--s-section-mobile) + var(--s1));
  }
}


/* ------------------------------------------------------------ typography */

.sec-head {
  max-width: 60ch;
  margin-bottom: var(--s5);
}

.sec-head--center {
  margin-inline: auto;
  text-align: center;
}

.sec-head__title {
  font-size: clamp(1.875rem, 3.4vw, 2.625rem);
  line-height: var(--lh-h2);
  letter-spacing: -0.032em;
}

/* Lead paragraph — 17px, slate-600, capped at 60ch. */
.sec-head__lede {
  margin-top: var(--s2);
  max-width: 60ch;
  font-size: var(--fs-lede);
  line-height: 1.65;
  color: var(--slate-600);
}

.band--deep .sec-head__lede,
.band--shoal .sec-head__lede {
  color: var(--sea-fg-70);
}

/* --------------------------------------------------------------- buttons */

/* Buttons are the one component that takes full rounding, and orange is the
   one fill they take. Sizes: SM 40px, MD 48px (default), LG 56px.

   THE TWO-DOOR RULE — "Find jobs" is navy, "Hire talent" is orange, they
   appear together in that order, and a view never carries two competing
   orange buttons. Variants: solid = orange (employer / primary action),
   navy = seafarer primary, inverse = white fill on navy, outline/secondary
   = bordered on light, ghost = bordered on navy. */

.btn {
  --btn-bg: var(--signal-600);
  --btn-fg: #fff;
  --btn-bd: var(--signal-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  padding: 0 26px;
  min-height: 48px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius-pill);
  font-family: var(--body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-button);
  letter-spacing: normal;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease);
}

.btn__arrow {
  width: 15px;
  height: 11px;
  flex: none;
  transition: transform var(--dur-fast) var(--ease);
}

.btn:hover .btn__arrow {
  transform: translateX(3px);
}

/* primary — signal orange, one per view */
.btn--solid:hover {
  --btn-bg: var(--signal-800);
  --btn-bd: var(--signal-800);
}

/* navy — the seafarer primary, and the left half of the two-door pair */
.btn--navy {
  --btn-bg: var(--navy-900);
  --btn-fg: #fff;
  --btn-bd: var(--navy-900);
}

.btn--navy:hover {
  --btn-bg: var(--navy-950);
  --btn-bd: var(--navy-950);
}

/* secondary — bordered on a light surface, shadow on hover */
.btn--outline {
  --btn-bg: transparent;
  --btn-fg: var(--navy-900);
  --btn-bd: var(--line-strong);
}

.btn--outline:hover {
  --btn-bg: var(--page);
  --btn-bd: var(--line);
  box-shadow: var(--shadow-md);
}

/* inverse — white fill, navy label, for use on navy */
.btn--inverse {
  --btn-bg: #ffffff;
  --btn-fg: var(--navy-900);
  --btn-bd: #ffffff;
}

.btn--inverse:hover {
  --btn-bg: var(--mist-50);
  --btn-bd: var(--mist-50);
}

/* ghost — white 50% border on navy */
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: #ffffff;
  --btn-bd: rgba(255, 255, 255, 0.5);
}

.btn--ghost:hover {
  --btn-bd: #ffffff;
  --btn-bg: rgba(255, 255, 255, 0.08);
}

.btn[aria-disabled='true'],
.btn:disabled {
  --btn-bg: #eef1f4;
  --btn-fg: var(--slate-300);
  --btn-bd: #eef1f4;
  pointer-events: none;
}

.btn--sm {
  min-height: 40px;
  padding: 0 18px;
  font-size: var(--fs-small);
}

.btn--lg {
  min-height: 56px;
  padding: 0 32px;
  font-size: var(--fs-link);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
  margin-top: var(--s4);
}

.btn-row--center {
  justify-content: center;
}

/* Dark surfaces flip the outline button to the ghost treatment. */
.band--deep .btn--outline,
.band--shoal .btn--outline,
.hero .btn--outline {
  --btn-fg: #ffffff;
  --btn-bd: rgba(255, 255, 255, 0.5);
}

.band--deep .btn--outline:hover,
.band--shoal .btn--outline:hover,
.hero .btn--outline:hover {
  --btn-bg: rgba(255, 255, 255, 0.08);
  --btn-bd: #ffffff;
  box-shadow: none;
}

/* ================================================================ MASTHEAD */

.masthead {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--page);
  border-bottom: 1px solid var(--line);
  transition: background var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease), height var(--dur-fast) var(--ease);
}

.masthead.is-condensed {
  box-shadow: var(--shadow-sm);
}

.masthead__inner {
  display: flex;
  align-items: center;
  gap: var(--s3);
  height: var(--header-h);
  transition: height var(--dur-fast) var(--ease);
}

.masthead.is-condensed .masthead__inner {
  height: 62px;
}

/* ------------------------------------------------------------------ brand */

.brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex: none;
}

/* Real logo lockup — icon, wordmark and tagline as one piece of artwork
   (see src/assets/img/logo/), used whole rather than recomposed with typeset
   text. The footer uses a pre-rendered white knockout rather than
   currentColor, since a raster mark can't recolour itself the way the old
   inline SVG did. Native master is 960x230 (4.18:1); height is set, width
   follows. */
.brand__logo {
  display: block;
  height: 46px;
  width: auto;
  flex: none;
  transition: height var(--dur-fast) var(--ease);
}

.masthead.is-condensed .brand__logo {
  height: 38px;
}

/* -------------------------------------------------------------------- nav */

.nav {
  margin-inline: auto;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.nav__item {
  position: relative;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.6rem 0.7rem;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  font-family: var(--body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-link);
  color: var(--navy-700);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease);
}

.nav__link:hover,
.nav__trigger[aria-expanded='true'] {
  color: var(--navy-900);
}

/* The current section is marked by weight plus a signal rule — the one
   place orange appears in the bar besides the Hire talent button. */
.nav__link.is-current {
  color: var(--navy-900);
  font-weight: var(--fw-semibold);
  border-bottom-color: var(--signal-600);
}

.nav__chev {
  width: 9px;
  height: 6px;
  transition: transform var(--dur-fast) var(--ease);
}

.nav__trigger[aria-expanded='true'] .nav__chev {
  transform: rotate(180deg);
}

/* Six nav groups need 1128px of header to sit on one row (brand 159 + nav 659
   + actions 214 + two 24px gaps + 48px of gutter), measured at 1240. So the
   drawer takes over at 1140 rather than the usual tablet breakpoint, with a
   little margin. Re-measure if a nav label changes — a longer label moves it.
   The three 1140px rules in this file (nav, masthead actions, burger) are one
   switch: move them together or the header will contradict itself. */
@media (max-width: 1140px) {
  .nav {
    display: none;
  }
}

/* ------------------------------------------------------------- mega menu */

/* Dropdown — white panel, border, shadow-md. Label over note, per Harbour. */
.mega {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  width: min(460px, 90vw);
  background: var(--page);
  color: var(--navy-900);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.mega[hidden] {
  display: none;
}

.mega__inner {
  padding: var(--s3);
}

.mega__blurb {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--slate-400);
  margin-bottom: var(--s2);
}

.mega__blurb-mark {
  width: 6px;
  height: 6px;
  background: var(--signal-600);
  border-radius: 2px;
  flex: none;
}

.mega__list {
  display: grid;
  gap: 2px;
}

.mega__link {
  display: block;
  padding: 0.7rem 0.8rem;
  border-radius: var(--radius-tag);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease);
}

.mega__link:hover,
.mega__link.is-current {
  background: var(--mist-50);
}

.mega__label {
  display: block;
  font-family: var(--body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-link);
  color: var(--navy-900);
}

.mega__note {
  display: block;
  font-size: var(--fs-small);
  color: var(--slate-400);
  line-height: 1.5;
}

/* --------------------------------------------------------------- actions */

.masthead__actions {
  display: flex;
  align-items: center;
  gap: var(--s1);
  flex: none;
  margin-left: auto;
}

@media (max-width: 1140px) {
  .masthead__actions .btn {
    display: none;
  }
}

.burger {
  display: none;
  /* 44px minimum touch target (WCAG 2.5.5). */
  width: 44px;
  height: 44px;
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-tag);
  padding: 0;
  place-items: center;
  gap: 5px;
  flex-direction: column;
}

.burger__bar {
  display: block;
  width: 17px;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--dur-fast) var(--ease),
    opacity var(--dur-fast) var(--ease);
}

.burger[aria-expanded='true'] .burger__bar:first-child {
  transform: translateY(3.25px) rotate(45deg);
}

.burger[aria-expanded='true'] .burger__bar:last-child {
  transform: translateY(-3.25px) rotate(-45deg);
}

@media (max-width: 1140px) {
  .burger {
    display: flex;
  }
}

/* ------------------------------------------------------------ mobile nav */

/* Mobile drawer — navy panel, rules between rows, the two doors at the foot. */
.mobile-nav {
  border-top: 1px solid var(--line);
  background: var(--navy-900);
  color: var(--sea-fg);
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
}

.mobile-nav[hidden] {
  display: none;
}

.mobile-nav__inner {
  padding: var(--s2) var(--s3) var(--s4);
}

.mobile-nav__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--sea-line-soft);
  font-family: var(--body);
  font-weight: var(--fw-semibold);
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  list-style: none;
}

.mobile-nav__top::-webkit-details-marker {
  display: none;
}

.mobile-nav__group summary::after {
  content: '+';
  font-family: var(--mono);
  color: var(--sea-fg-50);
  font-size: 1.25rem;
  line-height: 1;
}

.mobile-nav__group[open] summary::after {
  content: '–';
}

.mobile-nav__links {
  display: grid;
  padding: var(--s2) 0 var(--s2) var(--s2);
  border-bottom: 1px solid var(--sea-line-soft);
}

.mobile-nav__links a {
  padding: 0.6rem 0;
  text-decoration: none;
}

.mobile-nav__links span {
  display: block;
  font-family: var(--body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-link);
}

.mobile-nav__links em {
  display: block;
  font-size: var(--fs-small);
  color: var(--sea-fg-50);
  font-style: normal;
}

/* The two doors, side by side, at the foot of the drawer. */
.mobile-nav__cta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s1);
  margin-top: var(--s3);
}

@media (max-width: 400px) {
  .mobile-nav__cta {
    grid-template-columns: 1fr;
  }
}

.mobile-nav__cta .btn {
  justify-content: center;
}

/* ==================================================================== HERO */

/* Hero pattern A — navy field, scrim running left to right so the headline
   always sits on the darkest part. A linear scrim, never a radial vignette. */

.hero {
  position: relative;
  background: var(--navy-900);
  color: var(--sea-fg);
  overflow: hidden;
}

/* 16:9 as a *floor*, not a fixed ratio. The slideshow deck is taller than the
   old static hero (eyebrow + desk link + controls), and .hero has
   overflow:hidden — an aspect-ratio with a max-height would silently clip the
   controls at some widths rather than growing. clamp keeps the same 16:9 look
   at ordinary widths while letting the box grow when the content needs it. */
.hero--home {
  min-height: clamp(460px, 56.25vw, 900px);
  display: flex;
  align-items: center;
  padding-block: clamp(var(--s6), 6vh, var(--s7));
}

.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* ---- home hero slideshow ------------------------------------------------ */

/* One layer per desk, stacked and cross-faded. The navy scrim (::after) sits
   above all of them, so it is painted once rather than per slide. */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--navy-950);
}

.hero__layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 640ms var(--ease);
}

.hero__layer.is-active {
  opacity: 1;
}

/* The legal desk has no photography yet, so its layer is the clause drawing on
   navy — plain white line work, no fill, the same device the home hero used
   before the vessel photo arrived. Sits right of centre, where the scrim is
   lightest and the headline is not. */
.hero__mark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-inline: clamp(var(--s4), 8vw, 12vw);
}

/* Overrides .hub-mark's own max-width — in the hero the drawing is sized by
   the hero, not by the interior-page aside it was written for. */
.hero__mark svg {
  width: min(46%, 460px);
  max-width: none;
  height: auto;
  max-height: 78%;
}

/* Slides share one grid cell so the deck is as tall as the tallest slide and
   nothing reflows as they rotate. */
.hero__deck {
  display: grid;
}

.hero__slide {
  grid-area: 1 / 1;
  opacity: 0;
  /* visibility, not opacity alone: an invisible slide still contains a link,
     and opacity:0 would leave it focusable. */
  visibility: hidden;
  transition:
    opacity 520ms var(--ease),
    visibility 0s linear 520ms;
}

.hero__slide.is-active {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 520ms var(--ease),
    visibility 0s;
}

/* The quiet third link. The two doors below it stay the only buttons. */
.hero__deskline {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 44px;
  margin-top: var(--s3);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.32);
  transition: border-color var(--dur-fast) var(--ease);
}

.hero__deskline:hover {
  border-bottom-color: #fff;
}

.hero__deskline svg {
  width: 16px;
  flex: none;
}

/* ---- slideshow controls ------------------------------------------------- */

/* Dots are the only control in the text column — a quiet row under the doors. */
.hero__controls {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s4);
}

.hero__dots {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: -9px; /* optically align the first mark with the text edge */
}

/* A short bar inside a 44px target — the hit area is the button, the ::before
   is what you see. The current slide's bar is longer, so position reads
   without relying on colour alone. */
.hero__dot {
  position: relative;
  width: 28px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

.hero__dot::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 10px;
  height: 3px;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  transition: width 320ms var(--ease), background var(--dur-fast) var(--ease);
}

.hero__dot:hover::before {
  background: rgba(255, 255, 255, 0.7);
}

.hero__dot.is-current {
  width: 40px;
}

.hero__dot.is-current::before {
  width: 24px;
  background: #fff;
}

/* Pause/play: required by WCAG 2.2.2 for auto-advancing content, but not shown
   to pointer users. Visually hidden until a keyboard user tabs onto it. */
.hero__pause {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
  background: transparent;
  color: #fff;
  font-family: var(--body);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  cursor: pointer;
}

.hero__pause:focus-visible {
  position: static;
  width: auto;
  height: 32px;
  margin: 0;
  padding: 0 0.875rem;
  overflow: visible;
  clip: auto;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
}

/* Side arrows — vertically centred on the hero's edges, frosted and quiet at
   rest, fully present only when reached for. */
.hero__arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  translate: 0 -50%;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 240ms var(--ease), color 240ms var(--ease),
    background 240ms var(--ease), border-color 240ms var(--ease),
    transform 240ms var(--ease);
}

.hero__arrow[hidden] {
  display: none;
}

.hero__arrow--prev {
  left: clamp(12px, 2.2vw, 40px);
}

.hero__arrow--next {
  right: clamp(12px, 2.2vw, 40px);
}

.hero__arrow svg {
  width: 20px;
  height: 20px;
}

/* Arrows brighten a little when the pointer is anywhere over the hero. */
.hero--home:hover .hero__arrow {
  opacity: 1;
}

.hero__arrow:hover,
.hero__arrow:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.32);
}

.hero__arrow--prev:hover {
  transform: translateX(-2px);
}

.hero__arrow--next:hover {
  transform: translateX(2px);
}

/* Between 900 and 1360px the container margin is narrower than an arrow, so
   the text column steps in far enough that the left arrow never sits on the
   headline. */
@media (min-width: 901px) and (max-width: 1360px) {
  .hero--home .hero__inner {
    padding-inline: 88px;
  }
}

/* Below 900px the dots do the job on their own and the arrows would collide
   with the text. */
@media (max-width: 900px) {
  .hero__arrow {
    display: none;
  }
}

/* Reduced motion: no cross-fade, no auto-advance (hero.js enforces the second
   half). Slides cut instantly and only when asked for. */
@media (prefers-reduced-motion: reduce) {
  .hero__layer,
  .hero__slide {
    transition: none;
  }
}

.hero--home::after,
.hero--photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(7, 20, 38, 0.94) 0%,
    rgba(7, 20, 38, 0.74) 46%,
    rgba(7, 20, 38, 0.22) 100%
  );
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
}

.hero--home .hero__inner {
  display: block;
}

.hero--home .hero__text {
  max-width: 640px;
}

@media (max-width: 940px) {
  .hero--home {
    min-height: 560px;
  }
}

/* display-xl · 56/58 · 800 · -0.04em, stepping to 2.25rem below 768. */
.hero__title {
  font-size: clamp(2.25rem, 5.4vw, 3.5rem);
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-h1);
}

/* Emphasis stays in the display face and drops to 78% white — Harbour never
   switches family mid-headline. */
.hero__title em {
  font-family: inherit;
  font-weight: inherit;
  font-style: normal;
  letter-spacing: inherit;
  color: rgba(255, 255, 255, 0.62);
}

.hero__lede {
  max-width: 52ch;
  margin-top: var(--s3);
  font-size: var(--fs-lede);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
}

.hero__since {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s4);
  font-family: var(--mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--sea-fg-50);
}

.hero__since::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--sea-line);
  flex: none;
}

/* ---- interior page hero ---------------------------------------------- */

.hero--page {
  padding-block: clamp(var(--s6), 9vw, var(--s7));
}

.hero--page .hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--s6);
  align-items: center;
}

/* With no aside the hero is a single column. The measure is capped on the
   text, not on the container, so the headline stays on the same left grid
   line as every section below it. */
/* ---- hero aside --------------------------------------------------------- */

/* A plain white line drawing where a page has no photograph. Orange never
   appears in or over imagery. */
.hero__aside {
  display: flex;
  justify-content: center;
}

.hub-mark {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
}

@media (max-width: 900px) {
  /* Decorative, and on a narrow screen it costs vertical space the headline
     and the two doors need more. */
  .hero__aside {
    display: none;
  }
}

.hero--page:not(:has(.hero__aside)) .hero__inner {
  grid-template-columns: 1fr;
}

.hero--page:not(:has(.hero__aside)) .hero__text {
  max-width: 900px;
}

@media (max-width: 900px) {
  .hero--page .hero__inner {
    grid-template-columns: 1fr;
    gap: var(--s4);
  }
}

/* Hero pattern A on an interior page — full-bleed photograph under the same
   left-to-right scrim as the home hero, headline on the dark left side. Shorter
   than the home hero: this is a page opener, not the brand statement. */
.hero--photo {
  min-height: clamp(440px, 40vw, 640px);
  display: flex;
  align-items: center;
}

.hero--page.hero--photo .hero__text {
  max-width: 640px;
}

/* Below 768 the headline spans the full width, so the light right-hand end of
   the scrim would sit under text. Flatten it to an even, readable wash. */
@media (max-width: 768px) {
  .hero--photo::after {
    background: rgba(7, 20, 38, 0.8);
  }
}

/* Hero pattern B — inner page navy band, display-l rather than display-xl. */
.hero--page .hero__title {
  font-size: clamp(2rem, 4.4vw, 2.625rem);
  line-height: var(--lh-h2);
  letter-spacing: -0.032em;
}

/* ==================================================================== DUAL */

.dual {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s3);
}

@media (max-width: 800px) {
  .dual {
    grid-template-columns: 1fr;
  }
}

/* The two doors as full blocks: navy for the seafarer, mist for the
   employer. Flat surfaces, one border, shadow only on hover. */

.dual__card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--s5);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease);
}

.dual__card--sea {
  background: var(--navy-900);
  color: var(--sea-fg);
  border: 1px solid var(--navy-900);
}

.dual__card--shore {
  background: var(--mist-50);
  color: var(--navy-900);
  border: 1px solid var(--line);
}

.dual__card:hover {
  box-shadow: var(--shadow-md);
}

.dual__card--shore:hover {
  border-color: var(--line-strong);
}

/* Same treatment as .card__media: the photo bleeds to the card edges
   (negative margins undo the padding) and the card clips it to its own
   radius, with the same slow push-in on hover. 16:9 rather than 3:2 because
   these cards are twice as wide — 3:2 would push the text below the fold. */
.dual__card {
  overflow: hidden;
}

.dual__media {
  margin: calc(-1 * var(--s5)) calc(-1 * var(--s5)) var(--s4);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--mist-50);
}

.dual__card--sea .dual__media {
  background: var(--navy-800);
}

/* Hairline only on the light card; on navy the surface change is the edge. */
.dual__card--shore .dual__media {
  border-bottom: 1px solid var(--line);
}

.dual__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease);
}

.dual__card:hover .dual__media img,
.dual__card:focus-visible .dual__media img {
  transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .dual__media img {
    transition: none;
  }

  .dual__card:hover .dual__media img,
  .dual__card:focus-visible .dual__media img {
    transform: none;
  }
}

.dual__coord {
  font-family: var(--mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--slate-400);
  margin-bottom: var(--s2);
}

.dual__card--sea .dual__coord {
  color: var(--signal-400);
}

.dual__title {
  font-size: clamp(1.5rem, 2.6vw, 1.875rem);
  line-height: var(--lh-h3);
  letter-spacing: var(--tracking-heading);
  margin-bottom: var(--s2);
}

.dual__title em {
  font-family: inherit;
  font-weight: inherit;
  font-style: normal;
  color: rgba(255, 255, 255, 0.62);
}

.dual__card--shore .dual__title em {
  color: var(--slate-400);
}

.dual__body {
  max-width: 44ch;
  color: var(--slate-600);
  margin-bottom: var(--s4);
}

.dual__card--sea .dual__body {
  color: var(--sea-fg-70);
}

/* Text link — orange, arrow on the right, always. */
.dual__go {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: auto;
  font-family: var(--body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-small);
  color: var(--signal-600);
}

.dual__card--sea .dual__go {
  color: var(--signal-400);
}

.dual__go svg {
  width: 15px;
  height: 11px;
  transition: transform var(--dur-fast) var(--ease);
}

.dual__card:hover .dual__go svg {
  transform: translateX(5px);
}

/* =================================================================== TRUST */

.trust {
  text-align: center;
}

/* Set as a display heading rather than an 11px mono eyebrow — the logo cloud
   is a proof point and the line introducing it should be read, not skimmed. */
.trust__label {
  font-family: var(--display);
  font-size: clamp(1.5rem, 3vw, 2.125rem);
  font-weight: var(--fw-bold);
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--navy-900);
  margin-bottom: var(--s3);
}

/* Hairlines that fade out at both ends, above and below the cloud. */
.trust__rule {
  height: 1px;
  background: var(--line-strong);
  -webkit-mask-image: linear-gradient(to right, transparent, #000, transparent);
  mask-image: linear-gradient(to right, transparent, #000, transparent);
  margin-bottom: var(--s4);
}

.trust__rule--short {
  max-width: 24rem;
  margin: 0 auto var(--s2);
}

/* ---- infinite logo cloud ------------------------------------------------ */

/* Edges fade to transparent so logos arrive and leave rather than being cut
   off by the container. */
.logo-cloud {
  --logo-cloud-gap: 64px;
  overflow: hidden;
  padding-block: var(--s3);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
}

.logo-cloud__track {
  display: flex;
  width: max-content;
  will-change: transform;
}

/* Each set carries the gap as trailing padding too, so set 1 + gap is exactly
   half the track and the loop has no visible seam. */
.logo-cloud__set {
  display: flex;
  align-items: center;
  gap: var(--logo-cloud-gap);
  padding-right: var(--logo-cloud-gap);
  margin: 0;
  list-style: none;
}

.logo-cloud__item {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
}

.logo-cloud__logo {
  display: block;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  filter: grayscale(1) contrast(1.05);
  opacity: 0.55;
  transition: filter 360ms var(--ease), opacity 360ms var(--ease),
    transform 420ms cubic-bezier(0.34, 1.4, 0.64, 1);
}

/* The whole row slows (logo-cloud.js); the logo under the pointer also takes
   its own colour, so the slowdown has a reason. */
.logo-cloud__item:hover .logo-cloud__logo {
  filter: none;
  opacity: 1;
  transform: scale(1.08);
}

@media (hover: none) {
  .logo-cloud__logo {
    filter: none;
    opacity: 1;
  }
}

/* Static fallback — no JS, or reduced motion: one centred, wrapping set and no
   edge fade (nothing is moving through the edges). */
.logo-cloud:not(.is-running) {
  -webkit-mask-image: none;
  mask-image: none;
}

/* Block, not flex: as a flex item the set keeps its min-content width and
   overflows off both edges instead of wrapping. */
.logo-cloud:not(.is-running) .logo-cloud__track {
  display: block;
  width: auto;
}

.logo-cloud:not(.is-running) .logo-cloud__set {
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s3) var(--s5);
  padding-right: 0;
}

.logo-cloud:not(.is-running) [data-logo-clone] {
  display: none;
}

@media (max-width: 640px) {
  .logo-cloud {
    --logo-cloud-gap: 44px;
  }

  .logo-cloud__logo {
    transform: scale(0.85);
  }

  .logo-cloud__item:hover .logo-cloud__logo {
    transform: scale(0.92);
  }
}

.band--deep .trust__label,
.band--shoal .trust__label {
  color: var(--sea-fg-50);
}

/* A static wall, not a marquee — a fixed row reads as a client list, a
   scrolling carousel reads as a SaaS landing page. The motion is spent on
   arrival and on hover instead.

   Flex rather than grid so a part-filled last row centres instead of hanging
   left: seven logos wrap 7 → 4+3 → 2+2+2+1, always centred. */
.logo-wall {
  --logo-gap: var(--s2);
  --logo-cols: 7;
  --logo-scale: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--logo-gap);
  margin-bottom: var(--s4);
}

@media (max-width: 1100px) {
  .logo-wall {
    --logo-cols: 4;
  }
}

@media (max-width: 560px) {
  .logo-wall {
    --logo-cols: 2;
  }
}

.logo-wall__item {
  position: relative;
  flex: 0 0 calc((100% - (var(--logo-cols) - 1) * var(--logo-gap)) / var(--logo-cols));
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 92px;
  padding: var(--s2);
  background: var(--page);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 320ms var(--ease), box-shadow 320ms var(--ease),
    border-color 320ms var(--ease);
}

/* Navy rule that draws out from the centre on hover. Navy, not orange:
   orange is reserved for actions and never sits on imagery. */
.logo-wall__item::after {
  content: '';
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 0;
  height: 2px;
  background: var(--navy-900);
  border-radius: 2px 2px 0 0;
  transform: scaleX(0);
  transition: transform 360ms var(--ease);
}

/* At rest every mark is set in one tone, so seven brand palettes read as a
   single calm row; hover gives the one you are looking at its own colour. */
.logo-wall__logo {
  display: block;
  max-width: 100%;
  height: auto;
  filter: grayscale(1) contrast(1.05);
  opacity: 0.6;
  transform: scale(var(--logo-scale));
  transition: filter 360ms var(--ease), opacity 360ms var(--ease),
    transform 420ms cubic-bezier(0.34, 1.4, 0.64, 1);
}

.logo-wall__item:hover {
  transform: translateY(-3px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
}

.logo-wall__item:hover::after {
  transform: scaleX(1);
}

.logo-wall__item:hover .logo-wall__logo {
  filter: none;
  opacity: 1;
  transform: scale(calc(var(--logo-scale) * 1.08));
}

/* Touch screens have no hover, so a grey wall would never show its colours. */
@media (hover: none) {
  .logo-wall__logo {
    filter: none;
    opacity: 1;
  }
}

/* /about/clients — the wall is the page, so the marks are set larger. */
.logo-wall--large {
  --logo-scale: 1.3;
  --logo-gap: var(--s3);
  --logo-cols: 4;
  justify-content: flex-start;
}

.logo-wall--large .logo-wall__item {
  min-height: 140px;
}

@media (max-width: 560px) {
  .logo-wall--large {
    --logo-cols: 2;
    --logo-scale: 1.1;
  }
}

/* Arrival — cells rise in one after another while each logo comes into focus.
   An animation with fill-mode backwards, so once it ends the element's own
   transform is free again for the hover lift. Hidden only when motion is
   allowed and motion.js has not yet marked the wall as in view. */
@media (prefers-reduced-motion: no-preference) {
  [data-motion='logos']:not(.is-in) .logo-wall__item {
    opacity: 0;
  }

  [data-motion='logos'].is-in .logo-wall__item {
    animation: logo-cell-in 620ms var(--ease) backwards;
    animation-delay: calc(var(--i, 0) * 80ms);
  }

  [data-motion='logos'].is-in .logo-wall__logo {
    animation: logo-mark-in 900ms var(--ease) backwards;
    animation-delay: calc(var(--i, 0) * 80ms + 120ms);
  }
}

@keyframes logo-cell-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}

@keyframes logo-mark-in {
  from {
    opacity: 0;
    filter: grayscale(1) blur(6px);
    transform: scale(calc(var(--logo-scale) * 0.86));
  }
}

/* Fallback for a client with no logo file yet. */
.wordmark {
  font-family: var(--display);
  font-weight: var(--fw-bold);
  font-size: clamp(0.875rem, 1.5vw, 1.0625rem);
  letter-spacing: -0.02em;
  color: var(--slate-400);
  text-align: center;
  transition: color var(--dur-fast) var(--ease);
}

.logo-wall__item:hover .wordmark {
  color: var(--navy-900);
}

.trust__note {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--s2) var(--s3);
  font-family: var(--mono);
  font-size: var(--fs-small);
  color: var(--slate-400);
}

.band--deep .trust__note,
.band--shoal .trust__note {
  color: var(--sea-fg-50);
}

/* The award is a credential, so it is set as a bordered tag rather than a
   coloured chip — orange stays reserved for action. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.7rem;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-tag);
  color: var(--navy-900);
  letter-spacing: normal;
  font-weight: var(--fw-semibold);
}

.band--deep .badge,
.band--shoal .badge {
  border-color: rgba(255, 255, 255, 0.28);
  color: #ffffff;
}

.badge::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--signal-600);
}

.band--deep .badge::before,
.band--shoal .badge::before {
  background: var(--signal-400);
}

/* =================================================================== GRIDS */

/* 16px card grid gap; four-up drops to two-up at 1024 and one-up at 640. */
.grid {
  display: grid;
  gap: var(--s2);
}

.grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1024px) {
  .grid--3,
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr;
  }
}

/* =================================================================== CARDS */

/* Card — white, 1px border, radius 8, shadow-sm. Hover lifts the shadow to
   md and darkens the border; the card itself never moves. */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--s3);
  background: var(--page);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease);
}

.band--paper-alt .card {
  background: var(--page);
}

.band--deep .card,
.band--shoal .card {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--sea-line);
  box-shadow: none;
}

.card--link:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
}

.band--deep .card--link:hover,
.band--shoal .card--link:hover {
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: none;
}

/* Photo card — the image bleeds to the card edges (negative margins undo the
   padding) and the card clips it to its own radius, so photo and card read as
   one object rather than a picture dropped into a box. */
.card--media {
  overflow: hidden;
}

.card__media {
  margin: calc(-1 * var(--s3)) calc(-1 * var(--s3)) var(--s3);
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--mist-50);
  border-bottom: 1px solid var(--line);
}

.card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease);
}

/* With photos lining the cards up at the top, a tag that floats at a different
   height in each card reads as ragged — pin it and the arrow to the bottom. */
.card--media .card__meta {
  margin-top: auto;
  padding-top: var(--s2);
}

.card--media .card__go {
  margin-top: 0;
}

/* A slow, small push-in: enough to say "this opens", not enough to distract. */
.card--link:hover .card__media img,
.card--link:focus-visible .card__media img {
  transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .card__media img {
    transition: none;
  }

  .card--link:hover .card__media img,
  .card--link:focus-visible .card__media img {
    transform: none;
  }
}

.card__index {
  font-family: var(--mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--slate-400);
  margin-bottom: var(--s2);
}

.band--deep .card__index,
.band--shoal .card__index {
  color: var(--signal-400);
}

/* heading-m · 20/25 · 700 · -0.02em */
.card__title {
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  letter-spacing: -0.02em;
  margin-bottom: 0.75rem;
}

.card__body {
  color: var(--slate-500);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

.band--deep .card__body,
.band--shoal .card__body {
  color: var(--sea-fg-70);
}

.card__meta {
  margin-top: var(--s2);
  font-family: var(--mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--slate-400);
}

.band--deep .card__meta,
.band--shoal .card__meta {
  color: var(--sea-fg-50);
}

.card__go {
  margin-top: auto;
  padding-top: var(--s2);
  color: var(--signal-600);
}

.band--deep .card__go,
.band--shoal .card__go {
  color: var(--signal-400);
}

.card__go svg {
  width: 16px;
  height: 12px;
  transition: transform var(--dur-fast) var(--ease);
}

.card--link:hover .card__go svg {
  transform: translateX(5px);
}

/* =================================================================== CHIPS */

/* Sector & attribute tags — radius 6, mist fill or hairline border. Filter
   chips (the pill kind) live with the jobs filters below. */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
}

/* Three of these are links now (the live practice verticals), so the whole row
   carries the documented 44px minimum touch target rather than mixing a 34px
   plain chip with a 44px tappable one. The 8px row gap is too tight to extend
   a hit area with a pseudo-element without adjacent rows overlapping. */
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 14px;
  background: var(--mist-50);
  border: 1px solid transparent;
  border-radius: var(--radius-tag);
  font-family: var(--body);
  font-size: 0.75rem;
  font-weight: var(--fw-semibold);
  color: var(--slate-600);
}

/* A chip that leads somewhere — the three live practice verticals. Structure
   carries the affordance: a visible border and heading ink, not a colour
   change. Orange stays on buttons. */
.chip--link {
  border-color: var(--line-strong);
  color: var(--navy-800);
  text-decoration: none;
  transition:
    background var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease);
}

.chip--link:hover {
  background: var(--paper);
  border-color: var(--navy-800);
}

.band--deep .chip,
.band--shoal .chip {
  background: transparent;
  border-color: var(--sea-line);
  color: var(--sea-fg-70);
}

.band--deep .chip--link,
.band--shoal .chip--link {
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}

.band--deep .chip--link:hover,
.band--shoal .chip--link:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: #fff;
}

/* ================================================================ TIMELINE */

.timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s3);
  counter-reset: step;
}

@media (max-width: 980px) {
  .timeline {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .timeline {
    grid-template-columns: 1fr;
  }
}

.timeline__step {
  position: relative;
  padding-top: var(--s3);
  border-top: 1px solid var(--ink-15);
}

.band--deep .timeline__step,
.band--shoal .timeline__step {
  border-top-color: var(--sea-line);
}

/* The step marker is a short navy rule sitting on the track — a ruled tick,
   not a coloured mark. Orange is not spent on decoration. */
.timeline__step::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 0;
  width: 32px;
  height: 3px;
  background: var(--navy-900);
}

.band--deep .timeline__step::before,
.band--shoal .timeline__step::before {
  background: #ffffff;
}

.timeline__num {
  font-family: var(--mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  color: var(--slate-400);
}

.band--deep .timeline__num,
.band--shoal .timeline__num {
  color: var(--signal-400);
}

.timeline__title {
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  letter-spacing: -0.02em;
  margin: var(--s1) 0 0.75rem;
}

.timeline__text {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--slate-500);
}

.band--deep .timeline__text,
.band--shoal .timeline__text {
  color: var(--sea-fg-70);
}

.timeline__when {
  margin-top: var(--s2);
  font-family: var(--mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--slate-400);
}

.band--deep .timeline__when,
.band--shoal .timeline__when {
  color: var(--sea-fg-50);
}

/* ============================================================ TESTIMONIALS */

.quotes {
  position: relative;
  max-width: 860px;
  margin-inline: auto;
}

.quotes__track {
  display: grid;
}

.quotes__slide {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.quotes__slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.quote {
  margin: 0;
  text-align: center;
}

.quote__flag {
  display: inline-block;
  margin-bottom: var(--s3);
  padding: 6px 13px;
  background: var(--mist-50);
  border: 1px solid var(--line);
  border-radius: var(--radius-tag);
  font-family: var(--mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--slate-400);
}

.band--deep .quote__flag,
.band--shoal .quote__flag {
  background: transparent;
  border-color: var(--sea-line);
  color: var(--sea-fg-50);
}

/* Testimonials read as plain statements, set in the body face at reading
   weight. No italics, no oversized quote marks. */
.quote__text {
  margin: 0;
  font-family: var(--body);
  font-size: clamp(1.0625rem, 1.9vw, 1.375rem);
  font-style: normal;
  font-weight: var(--fw-book);
  line-height: 1.55;
  color: var(--navy-900);
  text-wrap: balance;
}

.band--deep .quote__text,
.band--shoal .quote__text {
  color: #ffffff;
}

.quote__text::before {
  content: '“';
}

.quote__text::after {
  content: '”';
}

.quote__by {
  margin-top: var(--s3);
  font-family: var(--body);
  font-size: var(--fs-small);
}

.quote__name {
  display: block;
  color: inherit;
  font-weight: var(--fw-semibold);
  letter-spacing: normal;
}

.quote__role {
  display: block;
  color: var(--slate-400);
  margin-top: 2px;
}

.band--deep .quote__role,
.band--shoal .quote__role {
  color: var(--sea-fg-50);
}

.quotes__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  margin-top: var(--s4);
}

.quotes__btn {
  /* 44px minimum touch target (WCAG 2.5.5 / iOS HIG). */
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: none;
  border: 1px solid var(--ink-15);
  border-radius: 100px;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}

.band--deep .quotes__btn,
.band--shoal .quotes__btn {
  border-color: var(--sea-line);
}

.quotes__btn:hover {
  border-color: var(--navy-900);
  color: var(--navy-900);
}

.band--deep .quotes__btn:hover,
.band--shoal .quotes__btn:hover {
  border-color: #ffffff;
  color: #ffffff;
}

.quotes__btn svg {
  width: 16px;
  height: 12px;
}

.quotes__dots {
  display: flex;
  /* The dots carry their own 44px padding, so no extra gap is needed. */
  gap: 0;
}

/* The visible dot stays 8px; the button around it is a full 44px touch
   target (WCAG 2.5.5). The mark itself is drawn as a pseudo-element so the
   hit area can grow without the dot growing with it. */
.quotes__dot {
  width: 44px;
  height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  cursor: pointer;
}

.quotes__dot::before {
  content: '';
  width: 8px;
  height: 8px;
  border: 1px solid var(--ink-15);
  border-radius: 100px;
  transition: background var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease);
}

.band--deep .quotes__dot::before,
.band--shoal .quotes__dot::before {
  border-color: var(--sea-line);
}

.quotes__dot[aria-selected='true']::before {
  background: var(--navy-900);
  border-color: var(--navy-900);
}

.band--deep .quotes__dot[aria-selected='true']::before,
.band--shoal .quotes__dot[aria-selected='true']::before {
  background: #ffffff;
  border-color: #ffffff;
}

/* ============================================================== JOB CARDS */

.job {
  display: block;
  padding: var(--s3);
  background: var(--page);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease);
}

.band--deep .job,
.band--shoal .job {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--sea-line);
  box-shadow: none;
}

.job:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
}

.band--deep .job:hover,
.band--shoal .job:hover {
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: none;
}

.job[hidden] {
  display: none;
}

.job__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2);
}

.job__title {
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  letter-spacing: -0.02em;
}

.job__posted {
  font-family: var(--mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--slate-400);
  white-space: nowrap;
  flex: none;
}

.band--deep .job__posted,
.band--shoal .job__posted {
  color: var(--sea-fg-50);
}

.job__org {
  margin: 0.35rem 0 0;
  font-size: var(--fs-body);
  color: var(--slate-500);
}

.band--deep .job__org,
.band--shoal .job__org {
  color: var(--sea-fg-70);
}

/* Status tag — radius 6, mist fill, per the pills sheet. */
.job__confidential {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 3px 9px;
  background: var(--mist-50);
  border: 1px solid var(--line);
  border-radius: var(--radius-tag);
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--slate-500);
  vertical-align: 2px;
}

.band--deep .job__confidential,
.band--shoal .job__confidential {
  background: transparent;
  border-color: var(--sea-line);
  color: var(--sea-fg-70);
}

.job__summary {
  margin: var(--s2) 0 0;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--slate-500);
  max-width: 70ch;
}

.band--deep .job__summary,
.band--shoal .job__summary {
  color: var(--sea-fg-70);
}

.job__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: var(--s3);
}

/* Each fact is an attribute tag rather than a bulleted run of small text. */
.job__fact {
  padding: 6px 13px;
  background: var(--mist-50);
  border: 1px solid transparent;
  border-radius: var(--radius-tag);
  font-family: var(--body);
  font-size: 0.75rem;
  font-weight: var(--fw-semibold);
  color: var(--slate-600);
}

.band--deep .job__fact,
.band--shoal .job__fact {
  background: transparent;
  border-color: var(--sea-line);
  color: var(--sea-fg-70);
}

.job__fact--place {
  background: var(--navy-900);
  color: #ffffff;
}

.band--deep .job__fact--place,
.band--shoal .job__fact--place {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--navy-900);
}

/* Pay is the fact candidates scan for, so it is set apart by a border and
   full-strength ink rather than by colour — orange stays with the buttons. */
.job__fact--pay {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--navy-900);
}

.band--deep .job__fact--pay,
.band--shoal .job__fact--pay {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.4);
  color: #ffffff;
}

.job-list {
  display: grid;
  gap: var(--s2);
}

/* ================================================================ FILTERS */

.filters {
  position: sticky;
  top: var(--header-h);
  z-index: 40;
  padding: var(--s3);
  margin-bottom: var(--s4);
  background: var(--mist-50);
  border: 1px solid var(--line);
  border-radius: var(--radius-media);
}

.filters__search {
  position: relative;
  margin-bottom: var(--s2);
}

.filters__search svg {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--slate-400);
  pointer-events: none;
}

/* The jobs search is the one pill-shaped input — hero pattern C. */
.filters__input {
  width: 100%;
  min-height: 48px;
  padding: 0.85rem 1.25rem 0.85rem 2.9rem;
  background: var(--page);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-family: var(--body);
  font-size: 1rem;
  color: var(--navy-900);
}

.filters__input::placeholder {
  color: var(--slate-300);
}

.filters__input:focus {
  outline: none;
  border-color: var(--navy-900);
  box-shadow: var(--focus-ring);
}

.filters__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s2);
}

@media (max-width: 860px) {
  .filters__row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .filters__row {
    grid-template-columns: 1fr;
  }
}

.filters__field {
  display: grid;
  gap: 0.35rem;
}

.filters__label {
  font-family: var(--mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--slate-400);
}

.filters__select {
  width: 100%;
  /* 48px control per the field anatomy; 1rem font-size is required —
     Safari on iOS force-zooms the page when a focused control is under 16px. */
  padding: 0.7rem 2rem 0.7rem 0.875rem;
  min-height: 48px;
  background: var(--page);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font-family: var(--body);
  font-size: 1rem;
  color: var(--navy-900);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2377848f' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  background-size: 10px;
}

.filters__select:focus {
  outline: none;
  border-color: var(--navy-900);
  box-shadow: var(--focus-ring);
}

.filters__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  margin-top: var(--s2);
  padding-top: var(--s2);
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: var(--fs-small);
  color: var(--slate-400);
}

.filters__clear {
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--body);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--signal-600);
  text-decoration: none;
}

.filters__clear:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.empty {
  padding: var(--s6) var(--s4);
  text-align: center;
  background: var(--mist-50);
  border: 1px solid var(--line);
  border-radius: var(--radius-media);
}

.empty[hidden] {
  display: none;
}

.empty__title {
  font-size: 1.5rem;
  margin-bottom: var(--s2);
}

.empty__body {
  max-width: 46ch;
  margin: 0 auto var(--s3);
  color: var(--ink-70);
}

/* ============================================================ JOB DETAIL */

.jd {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--s6);
  align-items: start;
}

@media (max-width: 940px) {
  .jd {
    grid-template-columns: 1fr;
    gap: var(--s4);
  }
}

.jd__body h2 {
  font-size: 1.5rem;
  margin: var(--s5) 0 var(--s2);
}

.jd__body h2:first-child {
  margin-top: 0;
}

.jd__list {
  display: grid;
  gap: var(--s2);
}

.jd__list li {
  position: relative;
  padding-left: var(--s3);
  color: var(--ink-70);
}

/* List markers are a short navy rule — orange is not spent on bullets. */
.jd__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 8px;
  height: 2px;
  background: var(--navy-900);
}

.jd__aside {
  position: sticky;
  top: calc(var(--header-h) + var(--s2));
  padding: var(--s3);
  background: var(--page);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.jd__facts {
  display: grid;
  gap: var(--s2);
  margin-bottom: var(--s3);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--line);
}

.jd__fact {
  display: grid;
  gap: 2px;
}

.jd__fact dt {
  font-family: var(--mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--slate-400);
}

.jd__fact dd {
  margin: 0;
  font-family: var(--body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body);
}

.jd__aside .btn {
  width: 100%;
  justify-content: center;
}

.jd__note {
  margin-top: var(--s2);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--slate-400);
}

/* ================================================================== STATS */

/* Evidence, not adjectives — a ruled block of figures. The numbers are navy
   at display weight; orange would make them read as decoration. */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--page);
}

.band--deep .stats,
.band--shoal .stats {
  background: transparent;
  border-color: var(--sea-line);
}

.stat {
  padding: var(--s3) 22px;
  border-left: 1px solid var(--line);
}

.stat:first-child {
  border-left: 0;
}

.band--deep .stat,
.band--shoal .stat {
  border-left-color: var(--sea-line);
}

@media (max-width: 640px) {
  .stat {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .stat:first-child {
    border-top: 0;
  }

  .band--deep .stat,
  .band--shoal .stat {
    border-top-color: var(--sea-line);
  }
}

.stat__figure {
  display: block;
  font-family: var(--display);
  font-weight: var(--fw-heavy);
  font-size: clamp(2rem, 3.4vw, 2.5rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--navy-900);
}

.band--deep .stat__figure,
.band--shoal .stat__figure {
  color: #ffffff;
}

.stat__label {
  display: block;
  margin-top: var(--s1);
  font-size: var(--fs-small);
  color: var(--slate-400);
}

.band--deep .stat__label,
.band--shoal .stat__label {
  color: var(--sea-fg-70);
}

/* ============================================================== ACCORDION */

.accordion {
  display: grid;
  max-width: 800px;
}

.accordion__item {
  border-bottom: 1px solid var(--ink-15);
}

.band--deep .accordion__item,
.band--shoal .accordion__item {
  border-bottom-color: var(--sea-line);
}

.accordion__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s3) 0;
  font-family: var(--display);
  font-weight: var(--fw-bold);
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
  cursor: pointer;
  list-style: none;
}

.accordion__q::-webkit-details-marker {
  display: none;
}

.accordion__q:hover {
  color: var(--signal-600);
}

.band--deep .accordion__q:hover,
.band--shoal .accordion__q:hover {
  color: var(--signal-400);
}

.accordion__icon {
  position: relative;
  width: 14px;
  height: 14px;
  flex: none;
}

/* Icons: 1.5px stroke, square caps, navy — a single line weight throughout. */
.accordion__icon::before,
.accordion__icon::after {
  content: '';
  position: absolute;
  background: var(--navy-900);
  transition: transform var(--dur-fast) var(--ease);
}

.band--deep .accordion__icon::before,
.band--deep .accordion__icon::after,
.band--shoal .accordion__icon::before,
.band--shoal .accordion__icon::after {
  background: #ffffff;
}

.accordion__icon::before {
  top: 6.25px;
  left: 0;
  width: 14px;
  height: 1.5px;
}

.accordion__icon::after {
  left: 6.25px;
  top: 0;
  width: 1.5px;
  height: 14px;
}

.accordion__item[open] .accordion__icon::after {
  transform: scaleY(0);
}

.accordion__a {
  padding-bottom: var(--s3);
  max-width: 68ch;
  color: var(--ink-70);
}

.band--deep .accordion__a,
.band--shoal .accordion__a {
  color: var(--sea-fg-70);
}

/* ==================================================================== CTA */

/* Closing CTA — "two ways in", as a mist panel with a border and radius 12,
   sitting between the last section and the navy footer. */

.band--cta {
  border-top: 1px solid var(--line);
}

.cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  flex-wrap: wrap;
  padding: var(--s5);
  background: var(--mist-50);
  border: 1px solid var(--line);
  border-radius: var(--radius-media);
}

.cta__text {
  max-width: 56%;
}

@media (max-width: 800px) {
  .cta__text {
    max-width: none;
  }
}

.cta__title {
  font-size: clamp(1.625rem, 3vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.cta__body {
  margin-top: 0.75rem;
  max-width: 52ch;
  color: var(--slate-500);
}

.cta__actions {
  display: flex;
  gap: var(--s1);
  flex-wrap: wrap;
}

/* ================================================================== POSTS */

.post {
  display: flex;
  flex-direction: column;
  padding: var(--s3) 0;
  border-top: 2px solid var(--navy-900);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease);
}

.post:hover {
  border-top-color: var(--signal-600);
}

/* With a cover the photo leads the card, so the rule above it is dropped —
   a line over a photo reads as a stray border. */
.post--cover {
  border-top: 0;
  padding-top: 0;
}

.post__cover {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-media);
  background: var(--mist-50);
  margin-bottom: var(--s3);
}

/* Blog index lead post — a 21:9 band across the full content width. */
.post__cover--lead {
  aspect-ratio: 21 / 9;
}

.post__meta {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s2);
  font-family: var(--mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.post__cat {
  color: var(--slate-400);
}

.post__date {
  color: var(--slate-400);
}

.post__title {
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  letter-spacing: -0.02em;
  margin-bottom: 0.75rem;
}

.post:hover .post__title {
  color: var(--signal-600);
}

.post__dek {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--slate-500);
  margin-bottom: var(--s2);
}

.post__read {
  margin-top: auto;
  font-family: var(--mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--slate-400);
}

/* ------------------------------------------------------------- article */

.article {
  max-width: var(--wrap-narrow);
  margin-inline: auto;
}

.article__body p {
  font-size: var(--fs-lede);
  line-height: 1.7;
  margin-bottom: var(--s3);
}

/* The drop cap is set in navy — a heading colour, not an accent. */
.article__body p:first-of-type::first-letter {
  float: left;
  font-family: var(--display);
  font-weight: var(--fw-heavy);
  font-size: 3.4em;
  line-height: 0.84;
  letter-spacing: -0.04em;
  padding: 0.06em 0.1em 0 0;
  color: var(--navy-900);
}

.article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s3);
  padding-bottom: var(--s3);
  margin-bottom: var(--s4);
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--slate-400);
}

/* ================================================================== PRESS */

.press-list {
  display: grid;
  border-top: 1px solid var(--navy-900);
}

.press-item {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr) 120px;
  gap: var(--s3);
  align-items: baseline;
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--line);
}

@media (max-width: 760px) {
  .press-item {
    grid-template-columns: 1fr;
    gap: var(--s1);
  }
}

.press-item__kind {
  font-family: var(--mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--slate-400);
}

.press-item__title {
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
}

.press-item__note {
  margin-top: var(--s1);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--slate-500);
}

.press-item__date {
  font-family: var(--mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  color: var(--slate-400);
  text-align: right;
}

@media (max-width: 760px) {
  .press-item__date {
    text-align: left;
  }
}

.press-item--placeholder .press-item__title {
  color: var(--ink-50);
}

/* =================================================================== TEAM */

/* Four across on wide screens, two on tablets, one on phones — so four
   members never leave a single card stranded on a row of its own. */
.team {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s3);
}

@media (max-width: 1180px) {
  .team {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .team {
    grid-template-columns: 1fr;
  }
}

/* Consultant profile — portrait slot, then name, role, tags, bio. The
   portrait holds initials on flat navy until real photography exists
   (Harbour calls for 4:5, neutral wall, eye-level, consistent crop). */

.member {
  display: flex;
  flex-direction: column;
  padding: var(--s3);
  background: var(--page);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.member__portrait {
  position: relative;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  margin: calc(var(--s3) * -1) calc(var(--s3) * -1) var(--s3);
  border-bottom: 1px solid var(--line);
  background: var(--navy-900);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow: hidden;
}

.member__initials {
  position: relative;
  z-index: 2;
  font-family: var(--display);
  font-weight: var(--fw-heavy);
  font-size: 3rem;
  letter-spacing: -0.04em;
  color: #ffffff;
}

/* Photo portrait — fills the slot. */
.member__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.member__name {
  font-size: 1.125rem;
  letter-spacing: -0.02em;
}

.member__role {
  margin: 0.2rem 0 var(--s2);
  font-family: var(--body);
  font-size: var(--fs-small);
  letter-spacing: normal;
  text-transform: none;
  font-weight: var(--fw-book);
  color: var(--slate-400);
}

/* In a flex column the flag would stretch full width — keep it a tag. */
.member .quote__flag {
  align-self: flex-start;
  margin-bottom: var(--s2);
}

.member__bio {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--slate-500);
  margin-bottom: var(--s3);
}

.member__focus {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
}

.member__focus li {
  padding: 5px 10px;
  background: var(--mist-50);
  border-radius: var(--radius-tag);
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  color: var(--slate-600);
}

/* ================================================================ OFFICES */

.offices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s3);
}

@media (max-width: 900px) {
  .offices {
    grid-template-columns: 1fr;
  }
}

.office {
  position: relative;
  padding: var(--s3);
  background: var(--page);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* The head office is marked by a navy border, not a coloured one. */
.office--hq {
  border-color: var(--navy-900);
}

.office__hq-flag {
  position: absolute;
  top: var(--s3);
  right: var(--s3);
  padding: 4px 9px;
  background: var(--navy-900);
  border-radius: var(--radius-tag);
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: #ffffff;
}

.office__city {
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  letter-spacing: -0.02em;
}

.office__role {
  margin: 0.25rem 0 var(--s2);
  font-family: var(--mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--slate-400);
}

.office__lines {
  color: var(--slate-500);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

.office__phone {
  display: inline-block;
  margin-top: var(--s2);
  font-family: var(--mono);
  font-size: var(--fs-small);
  color: var(--signal-600);
  text-decoration: none;
}

.office__phone:hover {
  text-decoration: underline;
}

.office__coord {
  margin-top: var(--s3);
  padding-top: var(--s2);
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  color: var(--slate-400);
}

/* map */

.map {
  margin-top: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--radius-media);
  overflow: hidden;
  background: var(--mist-50);
}

.map iframe {
  display: block;
  width: 100%;
  height: 380px;
  border: 0;
  filter: grayscale(0.35) contrast(1.05);
}

/* ================================================================== FORMS */

.form {
  display: grid;
  gap: var(--s3);
  max-width: 680px;
}

.form--compact {
  max-width: none;
}

.form__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s3);
}

@media (max-width: 640px) {
  .form__grid {
    grid-template-columns: 1fr;
  }
}

.field {
  display: grid;
  gap: 0.4rem;
  margin: 0;
}

.field[hidden] {
  display: none;
}

/* Field anatomy: label above, 48px control, 4px radius, 1px border.
   Focus is a 2px navy ring — never orange. */

.field__label {
  font-family: var(--body);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: normal;
  text-transform: none;
  color: var(--navy-900);
}

.band--deep .field__label,
.band--shoal .field__label {
  color: rgba(255, 255, 255, 0.75);
}

.field__opt {
  text-transform: none;
  letter-spacing: normal;
  font-weight: var(--fw-book);
  color: var(--slate-400);
}

.field__input {
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 0.875rem;
  background: var(--page);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font-family: var(--body);
  font-size: 1rem;
  color: var(--navy-900);
  transition: border-color var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease);
}

.field__input::placeholder {
  color: var(--slate-300);
}

.band--deep .field__input,
.band--shoal .field__input {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.22);
  color: #ffffff;
}

.field__input:focus {
  outline: none;
  border-color: var(--navy-900);
  box-shadow: var(--focus-ring);
}

.band--deep .field__input:focus,
.band--shoal .field__input:focus {
  border-color: #ffffff;
  box-shadow: 0 0 0 2px rgb(255 255 255 / 0.2);
}

.field__input--area {
  resize: vertical;
  min-height: 120px;
}

/* Select control — same chevron treatment as the job board filters, so the two
   selects on the site look like one component. */
.field__input--select {
  padding-right: 2rem;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2377848f' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  background-size: 10px;
}

/* On navy the chevron has to invert too, or it disappears into the surface. */
.band--deep .field__input--select,
.band--shoal .field__input--select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Native option lists inherit the page background, not the navy panel. */
.field__input--select option {
  color: var(--navy-900);
  background: var(--page);
}

/* Errors use signal-800, the darkest orange — legible as small text. */
.field__input[aria-invalid='true'] {
  border-color: var(--signal-800);
}

.field__error {
  font-size: 0.75rem;
  color: var(--signal-800);
}

.band--deep .field__error,
.band--shoal .field__error {
  color: var(--signal-400);
}

.field--check {
  gap: 0;
}

.check {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--slate-500);
  cursor: pointer;
}

.band--deep .check,
.band--shoal .check {
  color: var(--sea-fg-70);
}

.check input {
  margin: 0.2rem 0 0;
  width: 18px;
  height: 18px;
  accent-color: var(--navy-900);
  flex: none;
}

/* segmented control */

.seg {
  margin: 0;
  padding: 0;
  border: 0;
}

/* The audience selector uses the filter-chip pattern: pill, navy fill when
   selected, hairline border when not. */

.seg__legend {
  padding: 0;
  margin-bottom: 0.75rem;
  font-family: var(--body);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: normal;
  text-transform: none;
  color: var(--navy-900);
}

.band--deep .seg__legend,
.band--shoal .seg__legend {
  color: rgba(255, 255, 255, 0.75);
}

.seg__options {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--s1);
}

.seg__opt {
  position: relative;
}

.seg__opt input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.seg__opt span {
  display: block;
  min-height: 44px;
  padding: 0.7rem 1.1rem;
  background: var(--page);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-family: var(--body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-small);
  color: var(--slate-600);
  text-align: center;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.band--deep .seg__opt span,
.band--shoal .seg__opt span {
  background: transparent;
  border-color: var(--sea-line);
  color: var(--sea-fg-70);
}

.seg__opt input:checked + span {
  background: var(--navy-900);
  border-color: var(--navy-900);
  color: #fff;
}

.band--deep .seg__opt input:checked + span,
.band--shoal .seg__opt input:checked + span {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--navy-900);
}

.seg__opt input:focus-visible + span {
  outline: 2px solid var(--navy-900);
  outline-offset: 2px;
}

.band--deep .seg__opt input:focus-visible + span,
.band--shoal .seg__opt input:focus-visible + span {
  outline-color: #ffffff;
}

.form__foot {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
}

.form__routing {
  font-size: var(--fs-small);
  color: var(--slate-400);
  margin: 0;
}

.band--deep .form__routing,
.band--shoal .form__routing {
  color: var(--sea-fg-50);
}

.form__routing .mono {
  color: var(--navy-900);
}

.band--deep .form__routing .mono,
.band--shoal .form__routing .mono {
  color: #ffffff;
}

.form__status {
  margin: 0;
  font-size: var(--fs-small);
  min-height: 1.4em;
}

.form__status.is-ok {
  color: var(--success);
}

.band--deep .form__status.is-ok,
.band--shoal .form__status.is-ok,
.footer .form__status.is-ok {
  color: #ffffff;
}

.form__status.is-error {
  color: var(--signal-800);
}

.band--deep .form__status.is-error,
.band--shoal .form__status.is-error,
.footer .form__status.is-error {
  color: var(--signal-400);
}

/* ================================================================= FOOTER */

/* The footer sits on navy-950 — the deepest surface on the page. */
.footer {
  background: var(--navy-950);
  color: var(--sea-fg);
}

/* Brand · four link columns · signup. The brand and signup keep more weight
   than a link column but less than they did at three, so the four link lists
   still hold "Resume & coaching" on one line. */
.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(4, 1fr) 1.3fr;
  gap: var(--s4);
  padding-block: var(--s6);
}

@media (max-width: 1180px) {
  .footer__grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .footer__brand,
  .footer__signup {
    grid-column: span 4;
  }
}

@media (max-width: 820px) {
  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer__brand,
  .footer__signup {
    grid-column: span 2;
  }
}

.footer__blurb {
  margin: var(--s3) 0;
  max-width: 34ch;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.68);
}

.footer__blurb em {
  font-style: normal;
  color: #ffffff;
}

.footer__social {
  display: flex;
  gap: var(--s3);
  font-family: var(--mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.footer__social a {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.6);
}

.footer__social a:hover {
  color: #ffffff;
  text-decoration: underline;
}

.footer__head {
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: var(--fw-book);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: var(--s2);
  line-height: 1.4;
}

.footer__col ul {
  display: grid;
  gap: 0.7rem;
}

.footer__col a {
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
}

.footer__col a:hover {
  color: #ffffff;
  text-decoration: underline;
}

.footer__signup-note {
  font-size: var(--fs-small);
  color: var(--sea-fg-50);
  margin-bottom: var(--s2);
}

.signup {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s1);
}

.signup__input {
  padding: 0.7rem 0.875rem;
  min-height: 44px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius);
  font-family: var(--body);
  font-size: 1rem; /* under 16px triggers iOS focus zoom */
  color: #ffffff;
  min-width: 0;
}

.signup__input::placeholder {
  color: var(--sea-fg-50);
}

.signup__input:focus {
  outline: none;
  border-color: #ffffff;
  box-shadow: 0 0 0 2px rgb(255 255 255 / 0.2);
}

.signup .form__status {
  grid-column: span 2;
}

.footer__bar {
  border-top: 1px solid var(--sea-line-soft);
}

.footer__bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  flex-wrap: wrap;
  padding-block: var(--s3);
  font-family: var(--mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.45);
}

.footer__bar-inner p {
  margin: 0;
}

.footer__legal {
  display: flex;
  gap: var(--s3);
}

.footer__legal a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
}

.footer__legal a:hover {
  color: #ffffff;
  text-decoration: underline;
}

/* ============================================================== UTILITIES */

.prose {
  max-width: var(--wrap-narrow);
}

.prose h2 {
  font-size: 1.625rem;
  margin: var(--s5) 0 var(--s2);
}

.prose h3 {
  font-size: 1.25rem;
  margin: var(--s4) 0 var(--s1);
}

.prose p {
  margin-bottom: var(--s3);
  color: var(--ink-70);
}

.prose ul {
  display: grid;
  gap: var(--s1);
  margin-bottom: var(--s3);
}

.prose ul li {
  position: relative;
  padding-left: var(--s3);
  color: var(--ink-70);
}

.prose ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 8px;
  height: 2px;
  background: var(--navy-900);
}

.band--deep .prose ul li::before,
.band--shoal .prose ul li::before {
  background: #ffffff;
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s6);
  align-items: start;
}

@media (max-width: 900px) {
  .split {
    grid-template-columns: 1fr;
    gap: var(--s4);
  }
}

.lede-lg {
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--navy-900);
  max-width: 34ch;
}

.band--deep .lede-lg,
.band--shoal .lede-lg {
  color: #ffffff;
}

.note {
  padding: 4px 0 4px var(--s2);
  border-left: 2px solid var(--navy-700);
  background: transparent;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--slate-500);
}

.band--deep .note,
.band--shoal .note {
  border-left-color: rgba(255, 255, 255, 0.4);
  color: var(--sea-fg-70);
}

/* 404 */

.notfound {
  text-align: center;
  padding-block: var(--s8);
}

.notfound__code {
  font-family: var(--mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--signal-400);
  margin-bottom: var(--s3);
}

.notfound__title {
  font-size: clamp(2.25rem, 5.4vw, 3.5rem);
  line-height: var(--lh-h1);
  letter-spacing: var(--tracking-display);
  margin-bottom: var(--s3);
}

.notfound__body {
  max-width: 48ch;
  margin: 0 auto var(--s4);
  color: var(--sea-fg-70);
}

.notfound__search {
  display: flex;
  gap: var(--s1);
  max-width: 460px;
  margin: 0 auto var(--s5);
}

.notfound__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s2) var(--s3);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
}

.notfound__links a {
  color: var(--signal-400);
}

/* ============================================================ COOKIE BAR */

.cookie {
  position: fixed;
  left: var(--s2);
  right: var(--s2);
  bottom: var(--s2);
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  flex-wrap: wrap;
  max-width: 900px;
  margin-inline: auto;
  padding: var(--s3);
  background: var(--navy-900);
  color: var(--sea-fg);
  border: 1px solid var(--navy-800);
  border-radius: var(--radius-media);
  box-shadow: var(--shadow-lg);
}

.cookie[hidden] {
  display: none;
}

.cookie__text {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--sea-fg-70);
  max-width: 56ch;
  margin: 0;
}

.cookie__text a {
  color: var(--signal-400);
}

.cookie__actions {
  display: flex;
  gap: var(--s1);
  flex-wrap: wrap;
}

/* ================================================================= MOTION */
/*
   Declarative motion layer. Elements opt in with data-motion="…"; motion.js
   adds .is-in when they enter the viewport. Swapping in Motion (motion.dev)
   or GSAP means reading the same attributes — the markup does not change.
   See MOTION.md.
*/

[data-motion] {
  --motion-delay: 0ms;
}

/* Reveals are short and small — a settle, not a performance. */
@media (prefers-reduced-motion: no-preference) {
  [data-motion='rise'],
  [data-motion='fade'] {
    opacity: 0;
    transition: opacity 400ms var(--ease) var(--motion-delay),
      transform 400ms var(--ease) var(--motion-delay);
  }

  [data-motion='rise'] {
    transform: translateY(12px);
  }

  [data-motion='rise'].is-in,
  [data-motion='fade'].is-in {
    opacity: 1;
    transform: none;
  }

  [data-motion='stagger'] > * {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 400ms var(--ease), transform 400ms var(--ease);
  }

  [data-motion='stagger'].is-in > * {
    opacity: 1;
    transform: none;
  }

}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  [data-motion],
  [data-motion] > * {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* --------------------------------------------------------------- printing */

@media print {
  .masthead,
  .footer,
  .cookie,
  .btn-row,
  .filters {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
  }
}

/* =========================================================================
   TYPOGRAPHY SYSTEM — Harbour
   Applied last so the scale wins over legacy per-component sizing.
     · Plus Jakarta Sans carries display and headings at 700/800 with
       negative tracking. It never sets body copy.
     · Onest carries everything a person reads or types into: body, leads,
       labels, buttons, links.
     · JetBrains Mono is reserved for eyebrows, references and dates —
       11px, 0.14em, uppercase.
   ========================================================================= */

/* Inline text links carry the link scale. Structural wrapper anchors
   (job cards, dual cards, post cards) and nav/footer links keep their own
   sizing so layouts don't shift. */
.prose a,
.article__body a,
.jd__body a,
.note a,
p a,
li a {
  font-size: inherit;
  line-height: inherit;
  font-weight: var(--fw-medium);
  color: var(--signal-600);
}

.band--deep .prose a,
.band--deep p a,
.band--shoal .prose a,
.band--shoal p a {
  color: var(--signal-400);
}

/* Content list items */
.prose ul li,
.jd__list li,
.article__body li {
  font-size: var(--fs-list);
  font-weight: var(--fw-list);
}

label {
  font-weight: var(--fw-label);
}

/* Buttons are set in the body face at 14px / 600 — the display face is for
   headings only. Heights come from --btn sizing above (SM 40, MD 48, LG 56). */
button,
.btn {
  font-family: var(--body);
}

.btn {
  font-size: var(--fs-button);
  line-height: var(--lh-button);
  font-weight: var(--fw-button);
}

/* Everything set in the mono label style: 11px, 0.14em, uppercase. */
.mega__blurb,
.dual__coord,
.card__meta,
.card__index,
.office__role,
.office__hq-flag,
.office__coord,
.post__meta,
.post__read,
.press-item__kind,
.press-item__date,
.filters__label,
.footer__head,
.timeline__num,
.timeline__when,
.job__posted,
.job__confidential,
.notfound__code,
.hero__since,
.article__meta {
  font-family: var(--mono);
  font-weight: var(--fw-book);
}

.badge,
.trust__note,
.field__label,
.seg__legend,
.member__role,
.mono {
  font-weight: var(--fw-semibold);
}

/* Display headings — Plus Jakarta Sans at 800. */
.hero__title,
.sec-head__title,
.dual__title,
.notfound__title,
.cta__title,
.stat__figure {
  font-family: var(--display);
  font-weight: var(--fw-heavy);
}

/* Card and section headings sit at 700. */
.card__title,
.job__title,
.post__title,
.timeline__title,
.member__name,
.office__city,
.empty__title,
.press-item__title {
  font-family: var(--display);
  font-weight: var(--fw-bold);
}

/* Long-form prose keeps the 17px lead size; short prose runs at body-m. */
.article__body p {
  font-size: var(--fs-lede);
  line-height: 1.7;
  font-weight: var(--fw-book);
  color: var(--slate-600);
}

.prose p,
.prose ul li {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.hero__lede,
.sec-head__lede,
.lede-lg,
.dual__body,
.quote__text {
  font-family: var(--body);
  font-weight: var(--fw-book);
}

/* =========================================================================
   TOUCH TARGETS
   Small text links (footer columns, social, legal, mobile nav) sit at ~16px
   tall, which is fine for a mouse but under the 44px WCAG 2.5.5 / iOS HIG
   minimum for a finger. Scoped to coarse pointers so the desktop footer keeps
   its tight vertical rhythm and nothing shifts for mouse users.
   ========================================================================= */

@media (pointer: coarse) {
  .footer__col a,
  .footer__social a,
  .footer__legal a,
  .mobile-nav__links a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  .footer__col ul {
    gap: 0;
  }

  .footer__social {
    gap: var(--s4);
  }

  /* The logo link is a primary target on mobile. */
  .brand {
    min-height: 44px;
  }
}