/* ==========================================================================
   Mason Blake — main.css
   --------------------------------------------------------------------------
   1. Tokens          5. Global: header / footer
   2. Base            6. Layouts (one block per ACF flexible-content layout)
   3. Utilities       7. Job search template
   4. Components      8. Motion + reduced-motion
   Animations only touch transform / opacity (plus one-off clip-path reveals),
   so they stay on the compositor. Nothing is hidden without JS: every
   "hidden until revealed" rule is scoped to `.js`.
   ========================================================================== */

/* 1. TOKENS ================================================================ */
:root {
  /* Brand */
  --primary: #aa198d;        /* magenta — buttons, accents on light */
  --primary-dark: #8a1373;
  --secondary: #00adbb;      /* teal — accents on dark */
  --secondary-light: #4fd3dd;
  --blend: #5563a4;          /* midpoint of the two, used as the 3rd division colour */
  --brand-gradient: linear-gradient(100deg, var(--primary) 0%, var(--blend) 50%, var(--secondary) 100%);

  /* Neutrals */
  --ink: #0c0e13;
  --ink-2: #13161d;
  --ink-3: #1d212b;
  --paper: #f4f4f2;
  --paper-2: #e9e9e6;
  --white: #ffffff;

  /* Division colours (dial, chips, filters) */
  --c-distribution: var(--primary);
  --c-investment: var(--secondary);
  --c-operations: var(--blend);

  /* Theme-able roles (re-scoped by .theme-* classes) */
  --bg: var(--paper);
  --text: var(--ink);
  --text-muted: #646973;
  --tone: #9a9ea6;           /* second tone in two-tone headings */
  --accent: var(--primary);  /* readable accent for this theme */
  --line: rgba(12, 14, 19, 0.12);
  --line-strong: rgba(12, 14, 19, 0.26);
  --surface: rgba(12, 14, 19, 0.04);

  /* Type */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --step--2: 0.75rem;
  --step--1: clamp(0.8rem, 0.78rem + 0.1vw, 0.875rem);
  --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --step-1: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  --step-2: clamp(1.35rem, 1.15rem + 0.9vw, 1.9rem);
  --step-3: clamp(1.9rem, 1.4rem + 2.2vw, 3.3rem);
  --step-4: clamp(2.5rem, 1.6rem + 4vw, 5.2rem);
  --step-5: clamp(3.1rem, 1.4rem + 7.6vw, 8.8rem);

  /* Layout */
  --gutter: clamp(16px, 4vw, 56px);
  --max: 1520px;
  --radius: 0;
  --section-y: clamp(88px, 11vw, 168px);
  --header-h: 88px;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.8, 0.18, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

.theme-paper { --bg: var(--paper); }
.theme-sand  { --bg: var(--paper-2); }
.theme-white { --bg: var(--white); }
.theme-ink {
  --bg: var(--ink);
  --text: #f4f4f2;
  --text-muted: #9198a3;
  --tone: #5f6672;
  --accent: var(--secondary);
  --line: rgba(244, 244, 242, 0.12);
  --line-strong: rgba(244, 244, 242, 0.28);
  --surface: rgba(244, 244, 242, 0.05);
}
.theme-paper, .theme-sand, .theme-white, .theme-ink { background-color: var(--bg); color: var(--text); }

/* 2. BASE ================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
  overflow-x: clip;
}
body.no-scroll { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
p { text-wrap: pretty; }
h1, h2, h3, h4 { font-weight: 500; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--secondary); outline-offset: 3px; }
::selection { background: var(--primary); color: var(--white); }
[id] { scroll-margin-top: calc(var(--header-h) + 16px); }
[hidden] { display: none !important; }

/* 3. UTILITIES ============================================================= */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 1000;
  padding: 12px 18px; background: var(--primary); color: var(--white); font-weight: 500;
  transform: translateY(-160%); transition: transform 0.3s var(--ease);
}
.skip-link:focus { transform: none; }

.section { position: relative; padding-block: var(--section-y); }

/* Eyebrow: small label with a two-colour brand bar */
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: var(--step--2); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted);
}
.eyebrow::before { content: ""; width: 18px; height: 3px; background: linear-gradient(90deg, var(--primary) 50%, var(--secondary) 50%); }

/* Headings: tight, sans, two-tone (.tone = second colour) */
.display {
  font-size: var(--step-4);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
.display--md { font-size: var(--step-3); line-height: 1.02; letter-spacing: -0.04em; }
.tone { color: var(--tone); }
.grad {
  background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent;
}

.lede { font-size: var(--step-1); line-height: 1.5; color: var(--text-muted); max-width: 40ch; text-wrap: pretty; letter-spacing: -0.01em; }
.prose { color: var(--text-muted); max-width: 52ch; text-wrap: pretty; }
.prose p + p { margin-top: 1em; }
.mono { font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0; }

/* 4. COMPONENTS ============================================================ */

/* Icons (inline SVG sprite) */
.i { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.i--fill { fill: currentColor; stroke: none; }

/* Buttons — square, solid colour change on hover, arrow in its own cell */
.btn {
  --btn-bg: transparent; --btn-fg: currentColor; --btn-bd: transparent;
  --btn-bg-h: var(--btn-bg); --btn-fg-h: var(--btn-fg); --btn-bd-h: var(--btn-bd);
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 0 20px; border: 1px solid var(--btn-bd); border-radius: 0;
  background: var(--btn-bg); color: var(--btn-fg);
  font-size: 0.9375rem; font-weight: 500; letter-spacing: -0.005em; line-height: 1; white-space: nowrap;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.btn:hover, .btn:focus-visible { background: var(--btn-bg-h); color: var(--btn-fg-h); border-color: var(--btn-bd-h); }
/* Trailing icon sits in a full-height cell pinned to the right edge, so it still works when a
   button stretches to full width: label on the left, divider + icon cell flush right */
.btn:has(> .i:last-child) { --cell: 48px; position: relative; justify-content: flex-start; padding-right: calc(var(--cell) + 18px); }
.btn > .i:last-child {
  position: absolute; top: 0; right: 0; bottom: 0; box-sizing: border-box;
  width: var(--cell); height: 100%; padding: 0 calc((var(--cell) - 16px) / 2);
  border-left: 1px solid color-mix(in srgb, currentColor 28%, transparent);
  transition: background-color 0.3s var(--ease);
}
.btn > .i use { transform-box: view-box; transition: transform 0.4s var(--ease); }
/* Hover: colour change, the icon cell deepens slightly, the arrow eases a few px right */
.btn:hover > .i:last-child, .btn:focus-visible > .i:last-child { background-color: rgba(0, 0, 0, 0.14); }
.btn:hover > .i:not(.i--fill) use, .btn:focus-visible > .i:not(.i--fill) use { transform: translateX(3px); }
.btn--primary   { --btn-bg: var(--primary);   --btn-fg: var(--white); --btn-bg-h: var(--primary-dark); }
.btn--secondary { --btn-bg: var(--secondary); --btn-fg: var(--ink);   --btn-bg-h: var(--secondary-light); }
.btn--linkedin  { --btn-bg: #0a66c2;          --btn-fg: var(--white); --btn-bg-h: #004182; }
.btn--ink       { --btn-bg: var(--ink);       --btn-fg: var(--white); --btn-bg-h: var(--primary); }
.btn--white     { --btn-bg: var(--white);     --btn-fg: var(--ink);   --btn-bg-h: var(--primary); --btn-fg-h: var(--white); }
.btn--outline   { --btn-bd: var(--line-strong); --btn-bg-h: var(--text); --btn-fg-h: var(--bg); --btn-bd-h: var(--text); }
.btn--sm { min-height: 44px; padding-left: 16px; font-size: 0.875rem; }
.btn--sm:has(> .i:last-child) { --cell: 42px; padding-right: calc(var(--cell) + 14px); }
.site-header .btn { font-size: 1rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* Text link with arrow */
.link-arrow {
  display: inline-flex; align-items: center; gap: 10px; font-weight: 500; letter-spacing: -0.01em;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  padding-bottom: 6px; transition: background-size 0.5s var(--ease), color 0.3s;
}
.link-arrow:hover { color: var(--accent); }
.link-arrow .i { transition: transform 0.45s var(--ease); }
.link-arrow:hover .i { transform: translateX(4px); }

/* Chips */
.chip-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius);
  font-size: var(--step--1); line-height: 1.2; white-space: nowrap;
}
.chip[data-division]::before { content: ""; width: 6px; height: 6px; background: var(--dot, var(--primary)); }
[data-division="distribution"] { --dot: var(--c-distribution); }
[data-division="investment"]   { --dot: var(--c-investment); }
[data-division="operations"]   { --dot: var(--c-operations); }

/* Square icon button */
.icon-btn {
  display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: var(--radius);
  border: 1px solid var(--line-strong); background: transparent;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease), opacity 0.3s;
}
.icon-btn:hover:not([aria-disabled="true"]) { background: var(--text); color: var(--bg); border-color: var(--text); }
.icon-btn[aria-disabled="true"] { opacity: 0.3; cursor: default; }

/* Search bar */
.search-bar {
  display: flex; align-items: stretch; max-width: 640px;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--radius);
  transition: border-color 0.3s, background-color 0.3s;
}
.search-bar:focus-within { border-color: var(--secondary); background: rgba(255, 255, 255, 0.12); }
.search-bar__field { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px; padding-inline: 18px 10px; }
.search-bar__field .i { color: var(--text-muted); }
.search-bar__field + .search-bar__field { flex: 0 0 auto; border-left: 1px solid rgba(255, 255, 255, 0.16); }
.search-bar input, .search-bar select { width: 100%; min-width: 0; height: 58px; padding: 0; background: none; border: 0; outline: 0; color: inherit; }
.search-bar input::placeholder { color: var(--text-muted); opacity: 1; }
.search-bar select {
  appearance: none; -webkit-appearance: none; padding-right: 28px; cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239198a3' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 4px center / 16px no-repeat;
}
.search-bar select option { color: var(--ink); }
.search-bar select:focus-visible { outline: none; color: var(--secondary); }
.search-bar .btn { height: auto; margin: 5px; flex: none; }

/* Media */
.media { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--ink-2); aspect-ratio: var(--ratio, 4 / 5); }
.media img { width: 100%; height: 100%; object-fit: cover; }
.media__credit { position: absolute; right: 10px; bottom: 8px; font: 500 10px/1 var(--font-mono); color: rgba(255, 255, 255, 0.6); }

/* Full-bleed photo backgrounds (hero, page hero, testimonials, cards) */
.bg-photo { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.bg-photo img { width: 100%; height: 100%; object-fit: cover; }
.bg-photo::after { content: ""; position: absolute; inset: 0; background: var(--shade, rgba(12, 14, 19, 0.6)); }

/* Job rows (Latest roles + Job search) */
.job-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); container: jobs / inline-size; }
.job {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: 170px minmax(0, 1fr) auto 52px; align-items: center; gap: clamp(16px, 2.5vw, 32px);
  padding-block: clamp(22px, 2.4vw, 30px); border-bottom: 1px solid var(--line);
}
.job::before {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--brand-gradient); transform: scaleX(0); transform-origin: left; transition: transform 0.7s var(--ease);
}
.job:hover::before, .job:focus-within::before { transform: scaleX(1); }
.job__tag { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; color: var(--text-muted); }
.job__tag time { font-family: var(--font-mono); font-size: 0.75rem; }
.job__title { font-size: var(--step-2); font-weight: 500; line-height: 1.1; letter-spacing: -0.03em; text-wrap: balance; transition: color 0.3s; }
.job:hover .job__title { color: var(--accent); }
.job__title a::after { content: ""; position: absolute; inset: 0; }
.job__title a:focus-visible { outline: none; }
.job:has(.job__title a:focus-visible) { outline: 2px solid var(--secondary); outline-offset: 4px; }
.job__excerpt {
  margin-top: 8px; color: var(--text-muted); font-size: 0.9375rem; max-width: 68ch;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.job__facts { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-size: 0.875rem; color: var(--text-muted); text-align: right; white-space: nowrap; }
.job__facts strong { color: var(--text); font-weight: 500; }
.job__fact { display: inline-flex; align-items: center; gap: 6px; }
.job__go {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--radius); border: 1px solid var(--line-strong);
  transition: background-color 0.4s, border-color 0.4s, color 0.4s;
}
.job__go .i { transition: transform 0.5s var(--ease); }
.job:hover .job__go { background: var(--primary); border-color: var(--primary); color: var(--white); }
.job:hover .job__go .i { transform: rotate(45deg); }
.job-empty { display: grid; justify-items: start; gap: 16px; padding: 48px 0; border-bottom: 1px solid var(--line); }
.job-empty p { color: var(--text-muted); max-width: 46ch; }
@container jobs (max-width: 760px) {
  .job { grid-template-columns: minmax(0, 1fr) 44px; gap: 12px 16px; }
  .job__tag { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 14px; }
  .job__facts { grid-column: 1; grid-row: 3; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 16px; text-align: left; }
  .job__go { grid-column: 2; grid-row: 2 / span 2; width: 44px; height: 44px; align-self: center; }
}

/* Filter pills */
.filters { display: flex; flex-wrap: wrap; gap: 6px; }
.filter {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px;
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: none;
  font-size: 0.875rem; transition: background-color 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s;
}
.filter:hover { border-color: var(--text); }
.filter[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.filter__count { font-family: var(--font-mono); font-size: 0.7rem; opacity: 0.6; }

/* 5. GLOBAL: HEADER ======================================================== */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 100; height: var(--header-h);
  color: var(--white); border-bottom: 1px solid transparent;
  transition: transform 0.55s var(--ease), background-color 0.4s, border-color 0.4s;
}
.site-header.is-scrolled {
  background: rgba(12, 14, 19, 0.82);
  -webkit-backdrop-filter: saturate(140%) blur(14px); backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.site-header.is-hidden { transform: translateY(-100%); }
.site-header.menu-open { background: var(--ink); -webkit-backdrop-filter: none; backdrop-filter: none; transform: none; }
.site-header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.brand { position: relative; z-index: 2; display: inline-flex; align-items: center; line-height: 0; transition: opacity 0.3s; }
.brand:hover { opacity: 0.8; }
.brand__logo { display: block; width: clamp(180px, 16vw, 240px); height: auto; aspect-ratio: 250 / 25; }

.nav__list { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(20px, 2.6vw, 40px); }
.nav__list a { position: relative; display: inline-block; padding-block: 6px; font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.01em; color: rgba(255, 255, 255, 0.8); transition: color 0.3s; }
.nav__list a:hover, .nav__list a[aria-current="page"] { color: var(--white); }
.nav__list a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--brand-gradient);
  transform: scaleX(0); transform-origin: right; transition: transform 0.55s var(--ease);
}
.nav__list a:hover::after, .nav__list a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav__extra { display: none; }

.site-header__actions { position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; }
.menu-toggle { display: none; position: relative; width: 44px; height: 44px; border-radius: var(--radius); border: 1px solid rgba(255, 255, 255, 0.28); background: none; }
.menu-toggle span { position: absolute; left: 12px; right: 12px; top: calc(50% - 0.75px); height: 1.5px; background: currentColor; transition: transform 0.5s var(--ease); }
.menu-toggle span:first-child { transform: translateY(-4px); }
.menu-toggle span:last-child  { transform: translateY(4px); }
.menu-toggle[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child  { transform: rotate(-45deg); }

@media (max-width: 959px) {
  .menu-toggle { display: grid; }
  .nav {
    position: fixed; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: space-between;
    padding: calc(var(--header-h) + 40px) var(--gutter) 40px; background: var(--ink); overflow-y: auto;
    opacity: 0; visibility: hidden; transition: opacity 0.45s var(--ease), visibility 0s linear 0.45s;
  }
  .menu-open .nav { opacity: 1; visibility: visible; transition: opacity 0.45s var(--ease); }
  .nav__list { flex-direction: column; gap: 2px; }
  .nav__list a { font-size: clamp(2.2rem, 9vw, 3rem); font-weight: 500; letter-spacing: -0.04em; line-height: 1.2; color: var(--white); }
  .nav__list a::after { height: 3px; }
  .nav__list li { transform: translateY(20px); opacity: 0; transition: transform 0.7s var(--ease), opacity 0.7s var(--ease); }
  .menu-open .nav__list li { transform: none; opacity: 1; }
  .menu-open .nav__list li:nth-child(2) { transition-delay: 0.05s; }
  .menu-open .nav__list li:nth-child(3) { transition-delay: 0.1s; }
  .menu-open .nav__list li:nth-child(4) { transition-delay: 0.15s; }
  .menu-open .nav__list li:nth-child(5) { transition-delay: 0.2s; }
  .nav__extra { display: grid; justify-items: start; gap: 6px; margin-top: 48px; color: #9198a3; font-family: var(--font-mono); font-size: 0.875rem; }
  .nav__extra .btn { margin-bottom: 18px; font-family: var(--font-sans); }
}
@media (max-width: 639px) { .site-header__actions .btn { display: none; } }

/* 5b. GLOBAL: FOOTER ======================================================= */
.site-footer { padding-top: clamp(72px, 9vw, 128px); }
.footer__alerts {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 32px;
  padding-bottom: clamp(40px, 5vw, 64px); border-bottom: 1px solid var(--line);
}
.footer__alerts .display { font-size: clamp(1.5rem, 1rem + 1.6vw, 2.5rem); max-width: none; text-wrap: balance; }
.footer__cols { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 40px; padding-block: clamp(40px, 5vw, 72px); }
.footer__col h2 { font-size: var(--step--2); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 18px; }
.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer__col a { color: rgba(244, 244, 242, 0.82); transition: color 0.3s; }
.footer__col a:hover { color: var(--secondary); }
.footer__col address { font-style: normal; color: var(--text-muted); line-height: 1.7; }
.footer__about p { color: var(--text-muted); max-width: 30ch; margin-top: 18px; }
.footer__legal {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px;
  padding-block: 24px; border-top: 1px solid var(--line); font-size: var(--step--1); color: var(--text-muted);
}
.footer__legal ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.footer__legal a:hover { color: var(--text); }
.footer__legal-end { display: flex; align-items: center; gap: 28px; }
.to-top { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line-strong); color: var(--text); transition: background-color 0.3s, color 0.3s, border-color 0.3s; }
.to-top .i { transform: rotate(-90deg); transition: transform 0.4s var(--ease); }
.to-top:hover { background: var(--text); color: var(--bg); border-color: var(--text); }
.to-top:hover .i { transform: rotate(-90deg) translateX(3px); }
@media (max-width: 959px) {
  .footer__cols { grid-template-columns: 1fr 1fr; }
  .footer__about { grid-column: 1 / -1; }
}
@media (max-width: 479px) { .footer__cols { grid-template-columns: 1fr; } }

/* 6. LAYOUTS =============================================================== */

/* ---- Layout: hero -------------------------------------------------------- */
.hero { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: min(90svh, 880px); padding-top: calc(var(--header-h) + 80px); }
.hero .bg-photo {
  --shade:
    linear-gradient(90deg, rgba(12, 14, 19, 0.88) 0%, rgba(12, 14, 19, 0.7) 38%, rgba(12, 14, 19, 0.15) 75%, rgba(12, 14, 19, 0.05) 100%),
    linear-gradient(180deg, rgba(12, 14, 19, 0.65) 0%, rgba(12, 14, 19, 0) 30%, rgba(12, 14, 19, 0) 60%, rgba(12, 14, 19, 0.85) 100%),
    radial-gradient(70% 60% at 0% 100%, rgba(170, 25, 141, 0.38), transparent 70%),
    radial-gradient(50% 50% at 100% 30%, rgba(0, 173, 187, 0.18), transparent 70%);
}
.hero__inner { position: relative; z-index: 1; padding-bottom: clamp(56px, 9vw, 128px); }
/* Faint 360° dial on the right of the hero (wide screens only) */
.hero__dial {
  position: absolute; z-index: 0; right: 0; bottom: 0;
  width: min(64vw, 1040px); aspect-ratio: 1; transform: translate(50%, 50%); pointer-events: none; display: none;
}
.hero__dial svg { width: 100%; height: 100%; overflow: visible; }
.hd-track { fill: none; stroke: rgba(255, 255, 255, 0.07); stroke-width: 1; vector-effect: non-scaling-stroke; }
.hd-inner { fill: none; stroke: rgba(255, 255, 255, 0.05); stroke-width: 1; vector-effect: non-scaling-stroke; }
.hd-rotor { transform-box: view-box; transform-origin: 300px 300px; }
/* Minor notches every 5°, skipping every 30° where a major notch sits (so the two never overlap and double up) */
.hd-ticks { fill: none; stroke: rgba(255, 255, 255, 0.17); stroke-width: 8; stroke-dasharray: 0 5 0.2 4.8 0.2 4.8 0.2 4.8 0.2 4.8 0.2 4.8; }
.hd-ticks--major { stroke: rgba(255, 255, 255, 0.3); stroke-width: 15; stroke-dasharray: 0.3 29.7; }
.hd-arc { fill: none; stroke-width: 1.5; stroke-dasharray: 116 244; opacity: 0.6; vector-effect: non-scaling-stroke; }
.hd-arc--1 { stroke: var(--primary); stroke-dashoffset: -2; }
.hd-arc--2 { stroke: var(--blend); stroke-dashoffset: -122; }
.hd-arc--3 { stroke: var(--secondary); stroke-dashoffset: -242; }
@media (min-width: 1100px) { .hero__dial { display: block; } }
@media (min-width: 1360px) { .hero__dial { width: min(84vw, 1400px); } }
.hero__title { font-size: clamp(2.9rem, 1.4rem + 5.4vw, 7rem); font-weight: 500; line-height: 0.92; letter-spacing: -0.055em; margin-bottom: clamp(18px, 2.2vw, 30px); }
.hero__title .line { display: block; overflow: hidden; padding-block: 0.1em 0.06em; margin-block: -0.1em -0.06em; }
.hero__title .line > span { display: block; }
.hero__title .tone { color: rgba(255, 255, 255, 0.72); }
.hero .eyebrow, .page-hero .eyebrow { color: rgba(255, 255, 255, 0.85); }
.hero__deg { display: inline-block; white-space: nowrap; }
/* The degree sign as a mini three-sector dial — a nod to the divisions dial further down */
.hero__ring { display: inline-block; width: 0.34em; height: 0.34em; margin-left: 0.05em; vertical-align: top; margin-top: 0.04em; overflow: visible; }
.hero__ring-rotor { transform-box: view-box; transform-origin: 20px 20px; }
.hero__ring-seg { fill: none; stroke-width: 8; stroke-dasharray: 110 250; }
.hero__ring-seg--1 { stroke: var(--primary); stroke-dashoffset: -5; }
.hero__ring-seg--2 { stroke: var(--blend); stroke-dashoffset: -125; }
.hero__ring-seg--3 { stroke: var(--secondary); stroke-dashoffset: -245; }
.hero__row { display: grid; gap: 40px; max-width: 680px; }
.hero__lede { font-size: var(--step-1); color: rgba(255, 255, 255, 0.9); max-width: 40ch; letter-spacing: -0.01em; text-wrap: balance; }
.hero .search-bar { width: 100%; max-width: 680px; }
@media (max-width: 959px) {
  .hero { min-height: 78svh; }
  .hero .bg-photo { --shade: linear-gradient(180deg, rgba(12, 14, 19, 0.6) 0%, rgba(12, 14, 19, 0.72) 45%, rgba(12, 14, 19, 0.95) 100%), radial-gradient(80% 60% at 0% 100%, rgba(170, 25, 141, 0.35), transparent 70%); }
}
@media (max-width: 639px) {
  .search-bar { flex-direction: column; }
  .search-bar__field + .search-bar__field { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.16); }
  .search-bar__field { padding-inline: 14px; }
  .search-bar .btn { height: 50px; }
}

/* ---- Layout: roles_ticker -------------------------------------------------- */
/* Reads like a market ticker:  [■ CODE]  Job title  LDN  ▲ NEW  (or the posted date) */
.ticker { display: flex; align-items: stretch; height: 58px; border-block: 1px solid var(--line); font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.04em; line-height: 1; }
.ticker__label {
  flex: none; display: flex; align-items: center; gap: 12px;
  padding: 0 32px 0 max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--text);
}
.ticker__label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--secondary); animation: pulse 2s infinite; }
.ticker__count { padding: 4px 6px; background: var(--secondary); color: var(--ink); font-weight: 500; letter-spacing: 0.04em; }
.ticker__viewport {
  flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.ticker__viewport::-webkit-scrollbar { display: none; }
.ticker.is-ready .ticker__viewport { overflow: hidden; }
.ticker__track { display: flex; width: max-content; height: 100%; }
.ticker.is-ready .ticker__track { animation: ticker var(--ticker-dur, 60s) linear infinite; }
.ticker:hover .ticker__track, .ticker:focus-within .ticker__track { animation-play-state: paused; }
.ticker__list { list-style: none; margin: 0; padding: 0; display: flex; }
.ticker__item { display: flex; align-items: center; }
.ticker__item a { display: flex; align-items: baseline; gap: 12px; padding-right: 48px; white-space: nowrap; color: var(--text); }
.ticker__code { display: inline-flex; align-items: center; gap: 6px; padding: 4px 7px; border: 1px solid var(--line-strong); color: rgba(255, 255, 255, 0.85); letter-spacing: 0.08em; }
.ticker__code::before { content: ""; width: 6px; height: 6px; background: var(--dot); }
.ticker__title { font-family: var(--font-sans); font-size: 0.875rem; font-weight: 500; letter-spacing: -0.01em; transition: color 0.3s; }
.ticker__item a:hover .ticker__title { color: var(--secondary); }
.ticker__loc, .ticker__status { color: var(--text-muted); text-transform: uppercase; }
.ticker__status--new { color: var(--secondary); }
/* Drawn triangle (not a font glyph): sits on the text baseline, as tall as the capitals */
.ticker__status--new::before {
  content: ""; display: inline-block; vertical-align: baseline;
  width: 0.62em; height: 0.66em; margin-right: 6px;
  background: currentColor; clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
/* Where supported, trim each text box to its capital height and centre everything, so the
   job title's capitals sit exactly in the middle of the boxed division tag */
@supports (text-box: trim-both cap alphabetic) {
  .ticker__item a { align-items: center; }
  .ticker__title, .ticker__loc, .ticker__status, .ticker__code { text-box: trim-both cap alphabetic; }
  .ticker__code { display: inline-block; padding: 6px 7px; }
  .ticker__code::before { display: inline-block; margin-right: 6px; vertical-align: 0.1em; }
}

/* ---- Layout: statement ----------------------------------------------------- */
.statement__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 6vw, 104px); align-items: center; }
.statement__media .media { --ratio: 4 / 5; }
.statement__body .eyebrow { margin-bottom: 28px; }
.eyebrow + .display, .eyebrow + .dual__title { margin-top: 22px; }
.statement__text { font-size: var(--step-3); font-weight: 500; line-height: 1.1; letter-spacing: -0.04em; text-wrap: pretty; }
.statement__text .tone { display: block; margin-top: 0.35em; color: var(--tone); }
@media (max-width: 959px) {
  .statement__grid { grid-template-columns: 1fr; }
  .statement__media .media { --ratio: 16 / 10; }
}

/* ---- Layout: divisions (the 360° dial) ------------------------------------ */
.divisions__intro { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 28px clamp(24px, 5vw, 80px); align-items: start; }

.divisions__intro .btn { margin-top: 28px; }
.divisions__intro .prose { padding-top: 0.4em; } /* optical: large type sits lower in its line box */
/* With an eyebrow above the heading, line the paragraph up with the heading, not the eyebrow */
.divisions__intro:has(.eyebrow) .prose { padding-top: calc(0.75rem * 1.6 + 22px + 0.4em); }
@media (max-width: 959px) { .divisions__intro:has(.eyebrow) .prose { padding-top: 0; } }
.orbit { display: grid; grid-template-columns: min(480px, calc(62svh - 24px), 42%) minmax(0, 1fr); gap: clamp(48px, 8vw, 140px); margin-top: clamp(32px, 4vw, 64px); }
.orbit__stage { position: relative; }
.orbit__sticky { position: sticky; top: 19vh; top: 19svh; height: 62vh; height: 62svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; }
.orbit__dial { position: relative; width: 100%; aspect-ratio: 1; }
.orbit__svg { position: relative; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.orbit__rotor { transform-box: view-box; transform-origin: 250px 250px; transform: rotate(var(--rot, -60deg)); transition: transform 1.4s var(--ease); }
.orbit__track { fill: none; stroke: var(--line); stroke-width: 1; }
.orbit__ticks { fill: none; stroke: var(--line-strong); stroke-width: 6; stroke-dasharray: 0.25 4.75; }
.orbit__seg { fill: none; stroke: var(--paper-2); stroke-width: 12; stroke-dasharray: 116 244; transition: stroke 0.8s var(--ease); }
.orbit__seg[data-seg="0"] { stroke-dashoffset: -2; }
.orbit__seg[data-seg="1"] { stroke-dashoffset: -122; }
.orbit__seg[data-seg="2"] { stroke-dashoffset: -242; }
.orbit__seg.is-active[data-seg="0"] { stroke: var(--c-distribution); }
.orbit__seg.is-active[data-seg="1"] { stroke: var(--c-investment); }
.orbit__seg.is-active[data-seg="2"] { stroke: var(--c-operations); }
.orbit__label { fill: var(--text-muted); font: 500 11px/1 var(--font-mono); letter-spacing: 0.18em; text-transform: uppercase; transition: fill 0.6s; }
.orbit__label.is-active { fill: var(--ink); }
.orbit__pointer { fill: var(--ink); }
/* Photo inside the dial — crossfades per division */
.orbit__photo { position: absolute; inset: 15%; border-radius: 50%; overflow: hidden; background: var(--ink-2); }
.orbit__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.12); transition: opacity 0.9s var(--ease), transform 1.6s var(--ease); }
.orbit__photo img.is-active { opacity: 1; transform: none; }
.orbit__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 14, 19, 0) 35%, rgba(12, 14, 19, 0.75) 100%); }
.orbit__center { position: absolute; inset: 15%; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 16%; text-align: center; color: var(--white); pointer-events: none; }
.orbit__center > * { transition: opacity 0.35s var(--ease), transform 0.35s var(--ease); }
.orbit__center.is-swapping > * { opacity: 0; transform: translateY(6px); }
.orbit__num { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.7); }
.orbit__name { font-size: clamp(1.6rem, 2.6vw, 2.4rem); font-weight: 500; letter-spacing: -0.04em; line-height: 1.1; margin-block: 4px; }

.orbit__step { min-height: 62vh; min-height: 62svh; display: flex; flex-direction: column; justify-content: center; padding-block: 24px; transition: opacity 0.7s var(--ease); }
.js .orbit__step:not(.is-active) { opacity: 0.25; }
.orbit__index { display: flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.orbit__index::before { content: ""; width: 10px; height: 10px; background: var(--dot); }
.orbit__img { display: none; margin-bottom: 28px; }
.orbit__img .media { --ratio: 16 / 10; }
.orbit__title { font-size: var(--step-4); font-weight: 500; line-height: 1; letter-spacing: -0.05em; margin-block: 18px 22px; }
.orbit__step .prose { font-size: var(--step-1); line-height: 1.5; max-width: 34ch; letter-spacing: -0.01em; }
.orbit__areas { margin-top: 32px; }
.orbit__areas h4 { font-size: var(--step--2); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); font-weight: 500; margin-bottom: 12px; }
.orbit__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 28px; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line); }
.orbit__foot small { font-family: var(--font-mono); color: var(--text-muted); font-size: 0.75rem; }
@media (max-width: 959px) {
  .divisions__intro { grid-template-columns: 1fr; }
  .orbit { grid-template-columns: 1fr; margin-top: 48px; }
  .orbit__stage { display: none; }
  .orbit__step { min-height: 0; padding-block: 0 56px; }
  .js .orbit__step:not(.is-active) { opacity: 1; }
  .orbit__img { display: block; }
  /* Quarter of the dial pinned to the bottom-right corner while the divisions scroll past */
}

/* ---- Layout: values -------------------------------------------------------- */
.values__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px clamp(24px, 5vw, 80px); align-items: end; }
.values__head .eyebrow { grid-column: 1 / -1; }
.values__list { list-style: none; margin: clamp(48px, 6vw, 96px) 0 0; padding: 0; border-top: 1px solid var(--line); }
.value {
  position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: baseline; gap: 16px;
  padding-block: clamp(18px, 2vw, 26px); border-bottom: 1px solid var(--line);
}
.value::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--brand-gradient);
  transform: scaleX(0); transform-origin: left; transition: transform 0.9s var(--ease);
}
.value:hover::after { transform: scaleX(1); }
.value__num { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--text-muted); }
.value__text { font-size: var(--step-3); font-weight: 500; line-height: 1; letter-spacing: -0.05em; }
.value__text .tone { transition: color 0.5s; }
.value__word { display: inline-block; transition: transform 0.8s var(--ease); }
.value:hover .value__word { transform: translateX(0.12em); background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.value__mark { align-self: center; width: 28px; height: 28px; color: var(--secondary); opacity: 0; transform: translateX(-16px); transition: opacity 0.5s, transform 0.8s var(--ease); }
.value:hover .value__mark { opacity: 1; transform: none; }
@media (max-width: 959px) {
  .values__head { grid-template-columns: 1fr; }
  .value { grid-template-columns: 40px minmax(0, 1fr); }
  .value__mark { display: none; }
}

/* ---- Layout: split ---------------------------------------------------------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 112px); align-items: center; }
.split--reverse .split__media { order: 2; }
.split__media { position: relative; }
.media__badge {
  position: absolute; left: 0; bottom: 0; max-width: 300px; padding: 24px 26px;
  background: var(--primary); color: var(--white);
}
.media__badge strong { display: block; font-size: 2.6rem; font-weight: 500; line-height: 1; letter-spacing: -0.05em; }
.media__badge span { display: block; margin-top: 8px; font-size: 0.875rem; color: rgba(255, 255, 255, 0.85); }
.split__body .display { margin-bottom: 26px; }
.features { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.feature { position: relative; padding-top: 20px; border-top: 1px solid var(--line); }
.feature::before { content: ""; position: absolute; left: 0; top: -1px; width: 40px; height: 2px; background: var(--brand-gradient); }
.feature__num { display: block; margin-bottom: 12px; font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted); }
.feature h3 { font-size: 1.125rem; font-weight: 500; letter-spacing: -0.02em; margin-bottom: 6px; }
.feature p { color: var(--text-muted); font-size: 0.9375rem; }
@media (max-width: 539px) { .features { grid-template-columns: 1fr; } }
.split__body .btn { margin-top: 36px; }
@media (max-width: 959px) {
  .split { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
  .split__media .media { --ratio: 4 / 3; }
}

/* ---- Layout: latest_roles ------------------------------------------------- */
.roles__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: clamp(32px, 4vw, 56px); }

.roles__foot { display: flex; justify-content: center; margin-top: clamp(40px, 5vw, 64px); }

/* ---- Layout: testimonials -------------------------------------------------- */
.quotes { overflow: hidden; isolation: isolate; }
.quotes .bg-photo { --shade: linear-gradient(180deg, rgba(12, 14, 19, 0.82), rgba(12, 14, 19, 0.92)), radial-gradient(60% 70% at 100% 100%, rgba(0, 173, 187, 0.22), transparent 70%); }
.quotes > :not(.bg-photo) { position: relative; z-index: 1; }
.quotes__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: clamp(36px, 4vw, 64px); }

.quotes__controls { display: flex; align-items: center; gap: 10px; }
.quotes__count { min-width: 64px; text-align: center; font-family: var(--font-mono); color: var(--text-muted); font-size: 0.8125rem; }
.quotes__track {
  --pad: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
  position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: min(72%, 600px);
  gap: clamp(12px, 2vw, 24px); padding-inline: var(--pad); scroll-padding-inline: var(--pad);
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
}
.quotes__track::-webkit-scrollbar { display: none; }
.quotes__track:focus-visible { outline-offset: -2px; }
.quote {
  scroll-snap-align: start; display: flex; flex-direction: column; justify-content: space-between; gap: 48px;
  min-height: clamp(240px, 22vw, 320px); padding: clamp(24px, 2.6vw, 40px);
  background: rgba(19, 22, 29, 0.78); border: 1px solid var(--line); border-radius: var(--radius);
  transition: opacity 0.6s var(--ease), border-color 0.6s;
}
.js .quote:not(.is-current) { opacity: 0.4; }
.quote.is-current { border-color: rgba(0, 173, 187, 0.45); }
.quote__mark { width: 28px; height: 28px; color: var(--secondary); }
.quote blockquote p { font-size: var(--step-2); font-weight: 500; line-height: 1.2; letter-spacing: -0.03em; text-wrap: balance; }
.quote figcaption { display: flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.quote figcaption::before { content: ""; width: 18px; height: 3px; background: linear-gradient(90deg, var(--primary) 50%, var(--secondary) 50%); }
.quotes__progress { height: 2px; margin-top: clamp(32px, 4vw, 48px); background: var(--line); overflow: hidden; }
.quotes__progress span { display: block; height: 100%; background: var(--brand-gradient); transform-origin: left; transform: scaleX(var(--p, 0.25)); transition: transform 0.6s var(--ease); }
@media (max-width: 639px) { .quotes__track { grid-auto-columns: 88%; } }

/* ---- Layout: dual_cta (two photo panels) ----------------------------------- */
/* Everything is always visible; hover only zooms the photo out slightly and turns the arrow. */
.dual { display: flex; min-height: clamp(480px, 64vh, 660px); background: var(--ink); border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.dual__panel {
  position: relative; isolation: isolate; overflow: hidden; flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
  padding: clamp(28px, 4vw, 64px);
  color: var(--white);
  --text: var(--white); --text-muted: rgba(255, 255, 255, 0.8); --tone: rgba(255, 255, 255, 0.55); --line-strong: rgba(255, 255, 255, 0.4); --bg: var(--ink);
}
.dual__panel + .dual__panel { border-left: 1px solid rgba(255, 255, 255, 0.14); }
.dual__panel .bg-photo { z-index: -1; }
/* Stretched link: the heading link covers the panel; phone/email links sit above it */
.dual__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.dual__link:focus-visible { outline: none; }
.dual__panel:has(.dual__link:focus-visible) { outline: 2px solid var(--secondary); outline-offset: -6px; }
.dual__panel .contact-lines a { position: relative; z-index: 2; }
.dual__panel:hover .btn { background: var(--btn-bg-h); color: var(--btn-fg-h); }
.dual__panel:hover .btn > .i:last-child { background-color: rgba(0, 0, 0, 0.14); }
.dual__panel:hover .btn > .i use { transform: translateX(3px); }
.dual__panel .bg-photo img { transform: scale(1.06); transition: transform 1.6s var(--ease); }
.dual__panel:hover .bg-photo img, .dual__panel:focus-within .bg-photo img { transform: none; }
.dual__panel--clients .bg-photo { --shade: linear-gradient(180deg, rgba(12, 14, 19, 0.35), rgba(12, 14, 19, 0.92)), linear-gradient(135deg, rgba(170, 25, 141, 0.55), rgba(170, 25, 141, 0) 65%); }
.dual__panel--candidates .bg-photo { --shade: linear-gradient(180deg, rgba(12, 14, 19, 0.35), rgba(12, 14, 19, 0.92)), linear-gradient(225deg, rgba(0, 173, 187, 0.5), rgba(0, 173, 187, 0) 65%); }
.dual__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.dual__index { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.8); }
.dual__index b { font-weight: 500; color: var(--white); margin-right: 10px; }
.dual__arrow {
  display: grid; place-items: center; flex: none; width: 64px; height: 64px; border-radius: 0;
  border: 1px solid rgba(255, 255, 255, 0.4);
  transition: transform 0.8s var(--ease), background-color 0.5s, border-color 0.5s;
}
.dual__arrow .i { width: 22px; height: 22px; }
.dual__panel:hover .dual__arrow, .dual__panel:focus-within .dual__arrow { transform: rotate(45deg); border-color: transparent; }
.dual__panel--clients:hover .dual__arrow, .dual__panel--clients:focus-within .dual__arrow { background: var(--primary); }
.dual__panel--candidates:hover .dual__arrow, .dual__panel--candidates:focus-within .dual__arrow { background: var(--secondary); color: var(--ink); }
.dual__title { font-size: var(--step-4); font-weight: 500; line-height: 0.98; letter-spacing: -0.05em; max-width: 12ch; text-wrap: balance; }
.dual__more p { margin-top: 20px; color: var(--text-muted); max-width: 42ch; }
.dual__more .btn-row { margin-top: 28px; }
.dual__more .contact-lines { margin-top: 20px; }
@media (max-width: 859px) {
  .dual { flex-direction: column; }
  .dual__panel { flex: 0 0 auto; min-height: 440px; padding-inline: var(--gutter); } /* grow to fit content instead of being squeezed */
  .dual__panel + .dual__panel { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.14); }
}

.contact-lines { display: grid; gap: 4px; margin-top: 28px; }
.contact-lines a { display: inline-flex; align-items: center; gap: 12px; font-size: var(--step-2); font-weight: 500; letter-spacing: -0.03em; line-height: 1.25; width: fit-content; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.5s var(--ease); }
.contact-lines a:hover { background-size: 100% 1px; }
.contact-lines a .i { width: 0.8em; height: 0.8em; }

/* Photo-backed sections share these lighter muted tones */
.quotes, .page-hero { --tone: rgba(244, 244, 242, 0.55); --text-muted: rgba(244, 244, 242, 0.75); }

/* Values rows as links (home) */
a.value { color: inherit; }
a.value:focus-visible { outline-offset: -2px; }
.values__aside { display: grid; gap: 24px; justify-items: start; }

/* ---- Sub-navigation (About section pages) --------------------------------- */
.subnav { display: flex; gap: 4px; margin-top: clamp(40px, 5vw, 64px); overflow-x: auto; scrollbar-width: none; }
.page-hero.page-hero--tabs { padding-bottom: 0; }
.subnav a { flex: none; display: inline-flex; align-items: center; height: 58px; padding: 0 clamp(18px, 2.4vw, 32px); border-radius: var(--radius) var(--radius) 0 0; background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.85); font-size: 1rem; font-weight: 500; letter-spacing: -0.01em; transition: background-color 0.3s, color 0.3s; }
.subnav a:hover { background: rgba(255, 255, 255, 0.18); color: var(--white); }
.subnav a[aria-current="page"] { background: var(--tab-bg, var(--paper)); color: var(--ink); }

/* ---- Layout: contact (details + form) -------------------------------------- */
.contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.contact__details .display { margin-bottom: 32px; }
.contact-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.contact-item { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 18px; align-items: center; padding-block: 22px; border-bottom: 1px solid var(--line); }
.contact-item__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius); background: var(--surface); color: var(--accent); }
.contact-item .k { display: block; margin-bottom: 4px; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.contact-item .v { font-size: var(--step-1); font-weight: 500; letter-spacing: -0.02em; line-height: 1.3; font-style: normal; }
.contact-item a.v:hover { color: var(--accent); }
.map-card { position: relative; margin-top: 32px; }
.map-card .media { --ratio: 16 / 11; }
.map-card .media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 14, 19, 0) 40%, rgba(12, 14, 19, 0.85)); }
.map-card__body { position: absolute; z-index: 1; left: 24px; right: 24px; bottom: 22px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; color: var(--white); }
.map-card__body address { font-style: normal; line-height: 1.5; }

.form-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(24px, 4vw, 56px); position: relative; overflow: hidden; }
.form-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--brand-gradient); }
.form-card h2 { font-size: var(--step-2); letter-spacing: -0.03em; }
.form-card > p { margin-top: 8px; color: var(--text-muted); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 32px; }
.field { display: grid; gap: 8px; align-content: start; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field > label, .field legend { font-size: 0.875rem; font-weight: 500; padding: 0; }
.field .opt { color: var(--text-muted); font-weight: 400; }
.input {
  width: 100%; height: 52px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: transparent; transition: border-color 0.25s, box-shadow 0.25s;
}
textarea.input { height: auto; min-height: 160px; padding: 14px; resize: vertical; }
.input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(170, 25, 141, 0.15); }
.input:user-invalid { border-color: #c62828; }
fieldset.field { border: 0; margin: 0; min-width: 0; }
.segmented { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border: 1px solid var(--line-strong); border-radius: var(--radius); }
.segmented label { position: relative; cursor: pointer; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented span { display: grid; place-items: center; height: 44px; padding: 0 10px; border-radius: 0; font-size: 0.875rem; text-align: center; transition: background-color 0.3s, color 0.3s; }
.segmented label:hover span { background: var(--surface); }
.segmented input:checked + span { background: var(--ink); color: var(--white); }
.segmented input:focus-visible + span { outline: 2px solid var(--secondary); outline-offset: 2px; }
.file { display: flex; align-items: center; gap: 14px; padding: 14px; border: 1px dashed var(--line-strong); border-radius: var(--radius); font-size: 0.875rem; color: var(--text-muted); }
.file input { width: 100%; font-size: 0.875rem; min-width: 0; max-width: 100%; }
.file input::file-selector-button { margin-right: 12px; height: 38px; padding: 0 14px; border: 0; border-radius: 0; background: var(--ink); color: var(--white); font: inherit; cursor: pointer; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin-top: 28px; }
.form-foot .check { border: 0; padding: 0; max-width: 46ch; font-size: 0.875rem; color: var(--text-muted); align-items: flex-start; }
.form-foot .check a { text-decoration: underline; text-underline-offset: 2px; color: var(--text); }
.form-success { display: none; padding-block: 32px; }
.form-success h3 { font-size: var(--step-2); letter-spacing: -0.03em; margin-top: 16px; }
.form-success p { margin-top: 8px; color: var(--text-muted); }
.form-success__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 0; background: var(--primary); color: var(--white); }
.form-card.is-sent form { display: none; }
.form-card.is-sent .form-success { display: block; }
@media (max-width: 959px) { .contact { grid-template-columns: 1fr; } }
@media (max-width: 539px) {
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .segmented { grid-template-columns: minmax(0, 1fr); }
}

/* 7. JOB SEARCH TEMPLATE =================================================== */
.page-hero { position: relative; overflow: hidden; isolation: isolate; padding-block: calc(var(--header-h) + clamp(56px, 9vw, 128px)) clamp(56px, 7vw, 96px); }
.page-hero .bg-photo { --shade: linear-gradient(180deg, rgba(12, 14, 19, 0.75), rgba(12, 14, 19, 0.88)), radial-gradient(60% 80% at 0% 100%, rgba(170, 25, 141, 0.35), transparent 70%); }
.page-hero .wrap { position: relative; z-index: 1; }
.page-hero .display { font-size: clamp(2.5rem, 1.5rem + 3.6vw, 5rem); line-height: 0.95; letter-spacing: -0.05em; margin-block: 24px; max-width: 16ch; }
.page-hero .display .tone { color: rgba(244, 244, 242, 0.5); }
.page-hero .lede { max-width: 46ch; color: rgba(244, 244, 242, 0.78); }
.page-hero .search-bar { margin-top: 40px; max-width: 820px; }
.breadcrumb ol { list-style: none; margin: 0 0 32px; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); }
.breadcrumb li + li::before { content: "/"; margin-right: 10px; color: rgba(255, 255, 255, 0.35); }
.breadcrumb a { transition: color 0.3s; }
.breadcrumb a:hover { color: var(--white); }
.breadcrumb [aria-current] { color: var(--secondary); }

.results { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.filters-panel { position: sticky; top: calc(var(--header-h) + 24px); }
.filters-panel__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 24px; }
.filters-panel__head h2 { font-size: var(--step-2); letter-spacing: -0.03em; }
.text-btn { background: none; border: 0; padding: 0; font-size: 0.875rem; color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px; }
.text-btn:hover { color: var(--text); }
.fieldset { border: 0; margin: 0 0 32px; padding: 0; min-width: 0; }
.fieldset legend { padding: 0; margin-bottom: 8px; font-size: var(--step--2); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.check { display: flex; align-items: center; gap: 12px; padding-block: 12px; border-bottom: 1px solid var(--line); cursor: pointer; font-size: 0.9375rem; }
.check input {
  appearance: none; -webkit-appearance: none; flex: none; width: 18px; height: 18px; margin: 0;
  border: 1px solid var(--line-strong); border-radius: 0; display: grid; place-items: center; cursor: pointer;
  transition: background-color 0.25s, border-color 0.25s;
}
.check input::after { content: ""; width: 9px; height: 5px; border: 2px solid var(--white); border-top: 0; border-right: 0; transform: rotate(-45deg) scale(0); margin-top: -2px; transition: transform 0.25s var(--ease); }
.check input:checked { background: var(--primary); border-color: var(--primary); }
.check input:checked::after { transform: rotate(-45deg) scale(1); }
.check__count { margin-left: auto; font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted); }
.check[data-division] .check__label::before { content: ""; display: inline-block; width: 6px; height: 6px; background: var(--dot); margin-right: 10px; vertical-align: middle; }
.cv-card { position: relative; overflow: hidden; isolation: isolate; padding: 26px; border-radius: var(--radius); background: var(--ink); color: var(--white); }
.cv-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--brand-gradient); }
.cv-card h3 { font-size: 1.375rem; letter-spacing: -0.03em; line-height: 1.15; }
.cv-card p { margin-block: 10px 20px; color: #9198a3; font-size: 0.875rem; }

.results__bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 20px; }
.results__count { font-size: 0.9375rem; color: var(--text-muted); }
.results__count strong { font-size: 2rem; font-weight: 500; letter-spacing: -0.04em; color: var(--text); vertical-align: -0.1em; margin-right: 6px; }
.select {
  appearance: none; -webkit-appearance: none; height: 44px; padding: 0 40px 0 14px; border-radius: var(--radius);
  border: 1px solid var(--line-strong); background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23646973' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 14px center / 14px no-repeat;
  font-size: 0.875rem; cursor: pointer;
}
.pagination { margin-top: 48px; }
.pagination ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }
.pagination a, .pagination span { display: grid; place-items: center; min-width: 44px; height: 44px; padding-inline: 14px; border-radius: var(--radius); border: 1px solid var(--line-strong); font-family: var(--font-mono); font-size: 0.8125rem; transition: background-color 0.3s, color 0.3s; }
.pagination a:hover { background: var(--text); color: var(--bg); }
.pagination [aria-current="page"] { background: var(--primary); color: var(--white); border-color: var(--primary); }
@media (max-width: 959px) {
  .results { grid-template-columns: 1fr; }
  .filters-panel { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
  .filters-panel__head, .cv-card { grid-column: 1 / -1; }
}
@media (max-width: 539px) { .filters-panel { grid-template-columns: 1fr; } }

/* 7b. NEWS, ARTICLE + DIVERSITY ============================================ */

/* ---- Post meta + cards (archive, related posts) ---------------------------- */
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.post-meta .chip { font-family: var(--font-sans); letter-spacing: 0; text-transform: none; }

.archive-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 20px; margin-bottom: clamp(36px, 4vw, 56px); border-bottom: 1px solid var(--line); }
.archive-bar__title { font-size: var(--step-2); letter-spacing: -0.03em; }
.archive-bar form { display: flex; flex-wrap: wrap; gap: 8px; }
.field-inline { position: relative; }
.field-inline .i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.field-inline .input { width: 280px; height: 44px; padding-left: 42px; }

.post-feature { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 72px); align-items: center; margin-bottom: clamp(56px, 7vw, 104px); }
.post-feature .media { --ratio: 16 / 10; }
.post-feature__title { font-size: var(--step-3); font-weight: 500; line-height: 1.05; letter-spacing: -0.04em; margin-block: 20px 16px; text-wrap: balance; transition: color 0.3s; }
.post-feature__title a::after { content: ""; position: absolute; inset: 0; }
.post-feature p { color: var(--text-muted); max-width: 46ch; }
.post-feature .link-arrow { margin-top: 28px; }

.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(40px, 4vw, 64px) clamp(20px, 2.4vw, 32px); }
.post-card { position: relative; display: flex; flex-direction: column; gap: 16px; }
.post-card .media { --ratio: 16 / 10; }
.post-card .media img, .post-feature .media img { transition: transform 1.2s var(--ease); }
.post-card:hover .media img, .post-feature:hover .media img { transform: scale(1.04); }
.post-card__title { font-size: var(--step-1); font-weight: 500; line-height: 1.25; letter-spacing: -0.02em; text-wrap: balance; transition: color 0.3s; }
.post-card__title a::after { content: ""; position: absolute; inset: 0; }
.post-card:hover .post-card__title, .post-feature:hover .post-feature__title { color: var(--accent); }
.post-card a:focus-visible, .post-feature a:focus-visible { outline: none; }
.post-card:has(a:focus-visible), .post-feature:has(a:focus-visible) { outline: 2px solid var(--secondary); outline-offset: 8px; }
.post-card__by { font-size: 0.875rem; color: var(--text-muted); }

/* Brand tile for posts without a thumbnail */
.media--brand { display: grid; place-items: center; background: radial-gradient(70% 80% at 0% 100%, rgba(170, 25, 141, 0.35), transparent 70%), radial-gradient(60% 70% at 100% 0%, rgba(0, 173, 187, 0.2), transparent 70%), var(--ink); }
.media--brand svg { width: 22%; height: auto; }
.media--brand circle { fill: none; stroke-width: 6; stroke-dasharray: 110 250; }

@media (max-width: 959px) {
  .post-feature { grid-template-columns: 1fr; }
  .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .post-grid { grid-template-columns: 1fr; }
  .archive-bar form, .field-inline, .field-inline .input { width: 100%; }
}

/* ---- Article (single post) -------------------------------------------------- */
.page-hero--article {
  background: radial-gradient(60% 90% at 0% 100%, rgba(170, 25, 141, 0.3), transparent 70%), radial-gradient(50% 70% at 100% 0%, rgba(0, 173, 187, 0.14), transparent 70%), var(--ink);
  padding-bottom: calc(clamp(100px, 12vw, 180px) + clamp(40px, 5vw, 72px));
}
.page-hero--article .display { font-size: clamp(2.2rem, 1.4rem + 3vw, 4.25rem); max-width: 22ch; }
.page-hero--article .post-meta { margin-top: 8px; color: rgba(255, 255, 255, 0.75); }
.page-hero--article .lede { margin-top: 20px; }
.article { padding-top: 0; }
.article__image { position: relative; z-index: 1; margin-top: calc(-1 * clamp(100px, 12vw, 180px)); }
.article__image .media { --ratio: 21 / 9; }
.article__layout { display: grid; grid-template-columns: 240px minmax(0, 720px); gap: clamp(40px, 7vw, 120px); margin-top: clamp(48px, 6vw, 88px); }
.article__aside { position: sticky; top: calc(var(--header-h) + 32px); align-self: start; display: grid; gap: 40px; }
.aside-title { margin-bottom: 14px; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.toc a { display: block; margin-left: -1px; padding: 8px 0 8px 16px; border-left: 2px solid transparent; font-size: 0.9375rem; color: var(--text-muted); transition: color 0.3s, border-color 0.3s; }
.toc a:hover { color: var(--text); }
.toc a[aria-current="true"] { color: var(--text); border-left-color: var(--primary); }
.share__list { display: flex; gap: 8px; }
.share .icon-btn { width: 44px; height: 44px; }
.share__status { min-height: 1.4em; margin-top: 8px; font-size: 0.8125rem; color: var(--text-muted); }

.article__body { font-size: 1.125rem; line-height: 1.75; color: #2b2f36; }
.article__body > * + * { margin-top: 1.25em; }
.article__body h2 { margin-top: 2.2em; font-size: var(--step-2); font-weight: 500; line-height: 1.15; letter-spacing: -0.03em; color: var(--text); scroll-margin-top: calc(var(--header-h) + 24px); }
.article__body h2:first-child { margin-top: 0; }
.article__body h2 + * { margin-top: 0.75em; }
.article__body a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.article__body ul { padding-left: 1.2em; }
.article__body li + li { margin-top: 0.5em; }
.article__body li::marker { color: var(--primary); }
.pullout {
  margin-block: 2em; padding: 6px 0 6px 28px; border-left: 3px solid; border-image: var(--brand-gradient) 1;
  font-size: var(--step-2); font-weight: 500; line-height: 1.25; letter-spacing: -0.03em; color: var(--text);
}
.article__footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line); }
.author { display: flex; align-items: center; gap: 14px; }
.author__avatar { display: grid; place-items: center; width: 48px; height: 48px; background: var(--ink); color: var(--white); font-family: var(--font-mono); font-size: 0.8125rem; }
.author strong { display: block; font-weight: 500; }
.author span { font-size: 0.875rem; color: var(--text-muted); }
.related__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: clamp(32px, 4vw, 48px); }
@media (max-width: 959px) {
  .article__layout { grid-template-columns: 1fr; }
  .article__aside { position: static; order: 2; }
  .toc { display: none; }
  .article__image .media { --ratio: 16 / 10; }
}

/* ---- Layout: figures (sourced facts) ------------------------------------------ */
.intro-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 28px clamp(24px, 5vw, 80px); align-items: start; }
.intro-split .lead { font-size: var(--step-1); line-height: 1.5; letter-spacing: -0.01em; color: var(--text-muted); max-width: 44ch; padding-top: 0.4em; }
.figures { list-style: none; margin: clamp(48px, 6vw, 88px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px clamp(20px, 3vw, 40px); }
.figure { position: relative; padding-top: 22px; border-top: 1px solid var(--line); }
.figure::before { content: ""; position: absolute; left: 0; top: -1px; width: 40px; height: 2px; background: var(--brand-gradient); }
.figure__value { display: block; font-size: var(--step-3); font-weight: 500; line-height: 1; letter-spacing: -0.05em; }
.figure__label { display: block; margin-top: 12px; font-size: 0.9375rem; color: var(--text-muted); max-width: 28ch; }
.figure__source { display: block; margin-top: 12px; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
@media (max-width: 959px) {
  .intro-split { grid-template-columns: 1fr; }
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 539px) { .figures { grid-template-columns: 1fr; } }

/* ---- Layout: quote_band ---------------------------------------------------------- */
.quote-band { background: radial-gradient(60% 90% at 100% 100%, rgba(0, 173, 187, 0.16), transparent 70%), radial-gradient(50% 80% at 0% 0%, rgba(170, 25, 141, 0.22), transparent 70%), var(--ink); }
.quote-band figure { max-width: 1040px; }
.quote-band .quote__mark { width: 36px; height: 36px; margin-bottom: 32px; color: var(--secondary); }
.quote-band blockquote { margin: 0; }
.quote-band blockquote p { font-size: var(--step-3); font-weight: 500; line-height: 1.12; letter-spacing: -0.04em; text-wrap: balance; }
.quote-band figcaption { display: flex; align-items: center; gap: 12px; margin-top: 32px; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.quote-band figcaption::before { content: ""; width: 18px; height: 3px; background: linear-gradient(90deg, var(--primary) 50%, var(--secondary) 50%); }

/* 8. MOTION ================================================================ */
@keyframes ticker { to { transform: translateX(-50%); } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(0, 173, 187, 0.6); } 70%, 100% { box-shadow: 0 0 0 9px rgba(0, 173, 187, 0); } }
@keyframes rise { from { opacity: 0; transform: translateY(28px); } }
@keyframes line-up { from { transform: translateY(105%); } }
@keyframes settle { from { transform: scale(1.14); } }
@keyframes drift { to { transform: translateY(12%) scale(1.04); } }

/* Hero intro (CSS only, plays once on load) */
.js .hero .bg-photo { animation: settle 2.6s var(--ease) both; }
.js .hero [data-intro] { animation: rise 1.1s var(--ease) both; animation-delay: calc(var(--d, 0) * 90ms + 300ms); }
.js .hero__title .line > span { animation: line-up 1.25s var(--ease) both; animation-delay: calc(var(--d, 0) * 110ms + 150ms); }
/* Mini dial: arcs draw in once the headline lands, then the ring steps round a third at a time */
.js .hero__ring-seg { animation: ring-draw 0.9s var(--ease) both; animation-delay: 0.9s; }
.js .hero__ring-seg--2 { animation-delay: 1.05s; }
.js .hero__ring-seg--3 { animation-delay: 1.2s; }
.hero__ring-rotor { animation: ring-step 9s infinite; animation-delay: 2.4s; }
.hd-rotor { animation: spin 150s linear infinite; }
/* Big dial: fades in, arcs draw, then it steps round in sync with the ° ring; the dot orbits slowly */
.js .hero__dial { animation: hd-fade 1.6s var(--ease) both 0.5s; }
@keyframes hd-fade { from { opacity: 0; } }
.js .hd-arc { animation: hd-draw 1.4s var(--ease) both; animation-delay: 0.9s; }
.js .hd-arc--2 { animation-delay: 1.05s; }
.js .hd-arc--3 { animation-delay: 1.2s; }
@keyframes hd-draw { from { stroke-dasharray: 0 360; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes ring-draw { from { stroke-dasharray: 0 360; } }
@keyframes ring-step {
  0%, 22%   { transform: rotate(0deg);   animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  33%, 55%  { transform: rotate(120deg); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  66%, 88%  { transform: rotate(240deg); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  100%      { transform: rotate(360deg); }
}

/* Hero image drifts with scroll — scroll-driven, so zero JS and off the main thread */
@supports (animation-timeline: scroll()) {
  .hero .bg-photo img, .page-hero .bg-photo img { animation: drift linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
}

/* Scroll reveals (JS adds .is-in via IntersectionObserver) */
.js [data-reveal] { opacity: 0; transform: translateY(32px); transition: opacity 1s var(--ease), transform 1s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
.js [data-reveal="fade"] { transform: none; }
.js [data-reveal="clip"] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); transition: clip-path 1.4s var(--ease-in-out); }
.js [data-reveal="clip"] img { transform: scale(1.2); transition: transform 1.8s var(--ease); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal="clip"].is-in { clip-path: inset(0 0 0 0); }
.js [data-reveal="clip"].is-in img { transform: none; }
.js .values__list [data-reveal] { transform: translateX(-40px); }
.js .values__list [data-reveal].is-in { transform: none; }

/* Statement words light up with scroll position (scroll-driven where supported) */
@supports (animation-timeline: view()) {
  .is-split .w { animation: word-in linear both; animation-timeline: view(); animation-range: cover 8% cover 38%; }
}
@keyframes word-in { from { opacity: 0.14; } to { opacity: 1; } }

::view-transition-group(*) { animation-duration: 0.45s; animation-timing-function: var(--ease); }

@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; transition-delay: 0s !important; }
  .hero .bg-photo img, .page-hero .bg-photo img { animation: none !important; }
  .js [data-reveal], .js [data-reveal="clip"], .js [data-reveal="clip"] img { opacity: 1; transform: none; clip-path: none; }
  .ticker.is-ready .ticker__viewport { overflow-x: auto; }
  .ticker.is-ready .ticker__track { animation: none; }
  .js .orbit__step:not(.is-active), .js .quote:not(.is-current) { opacity: 1; }
}