/* =============================================================
   Job N Job — Homepage Prototype v13 (dark landing refinement)
   Direction: cinematic dark landing (black hero with gold + white
   typography), text-led AI section, dark heritage section, white
   footer tattoo + aligned affiliations row. Real Job N Job logo on
   black in the header. Humanist 521 BT (company typeface) + Source
   Serif 4 editorial display.
   Reference image: assets/hero/hero-human-ai.png
   Static review build. Not production.
   ============================================================= */

/* ---- COMPANY TYPEFACE — Humanist 521 BT (TTF only) ---- */
@font-face {
  font-family: 'Humanist 521 BT';
  src: url('assets/fonts/Humanist521BT-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Humanist 521 BT';
  src: url('assets/fonts/Humanist521BT-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Humanist 521 BT';
  src: url('assets/fonts/Humanist521BT-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Humanist 521 BT';
  src: url('assets/fonts/Humanist521BT-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* ---- TOKENS ---- */
:root {
  /* v16 — white-led page palette. The whole site sits on a clean
     premium white ground; previous "ivory" tokens are repurposed as
     near-white surface tints so any rule that depends on subtle
     surface differences still works against the new white-led
     system. */
  --ivory:        #FFFFFF;        /* primary page ground — pure white */
  --ivory-soft:   #FAF7F0;        /* very faint warm tint (cards, services rows) */
  --ivory-deep:   #F0EBE0;        /* deeper tint for sub-panels and footer-utility */
  --white:        #FFFFFF;

  /* Dark surfaces — used very sparingly in v11 */
  --ink:          #14110D;
  --ink-soft:     #1C1812;
  --ink-line:     #2E2820;

  /* Text */
  --graphite:     #1F1B16;        /* primary body on light */
  --graphite-soft:#3F3A33;
  --stone-mute:   #7A7468;        /* labels / muted body */
  --offwhite:     #EFE7D2;
  --offwhite-mute:#8A8273;

  /* Brand red — the JNJ accent, used decisively but restrained */
  --red:          #C9282A;        /* primary red */
  --red-deep:     #A52022;        /* hover */
  --red-soft:     rgba(201,40,42,0.12);

  /* Sage / soft premium green — used for the header CTA in v11
     (a polished light-green, not neon, not bright) */
  --sage:         #93B19A;
  --sage-deep:    #6E947B;
  --sage-text:    #1F3A2A;
  --sage-soft:    rgba(147,177,154,0.18);

  /* Antique brass — heritage / founder accent */
  --brass:        #B8924E;
  --brass-soft:   #D7B881;
  --brass-deep:   #806328;

  /* Hairlines on light (slightly darker on the warmer ground) */
  --hairline:     #CFC5AC;
  --hairline-soft:#DDD3B9;

  /* v13 — Dark landing palette */
  --obsidian:       #0A0807;       /* deepest near-black for hero / heritage */
  --obsidian-soft:  #14110D;       /* slightly lifted for layered dark sections */
  --obsidian-line:  #2A241B;       /* warm hairline on dark grounds */
  --gold:           #E2BC73;       /* primary gold accent for dark sections */
  --gold-soft:      #F0D29A;       /* highlight gold */
  --gold-deep:      #A87E33;       /* deeper gold for hover / shadow */
  --white-soft:     #F4EFE2;       /* soft off-white body text on dark */

  /* Footer base — v13 switches the footer / tattoo area to WHITE.
     We keep these tokens for the dark Final-CTA / Hiring section. */
  --footer-base:    #FFFFFF;       /* v13: footer ground is now white */
  --footer-base-2:  #F4EFE2;       /* very light cream for footer-utility */
  --footer-text:    #1F1B16;       /* dark text on white footer */
  --footer-text-mute:#6E665A;

  /* Type scale */
  --fs-h0:    clamp(2.625rem, 6vw, 5.25rem);
  --fs-h1:    clamp(2.25rem, 4.2vw, 3.5rem);
  --fs-h2:    clamp(1.875rem, 3.4vw, 2.875rem);
  --fs-h3:    clamp(1.125rem, 1.75vw, 1.375rem);
  --fs-body:  1.0625rem;

  /* Spacing — v12 tightens every step so the page feels more
     intentional and less spread out. */
  --pad-sm: 14px;
  --pad-md: 24px;
  --pad-lg: 44px;
  --pad-xl: 72px;

  /* Layout */
  --container: 1280px;
  --gutter: 32px;
}

/* ---- RESET ---- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 120px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}
body {
  margin: 0;
  /* Humanist 521 BT is the company typeface (TTF, applied to body / nav /
     UI / proof points). Source Serif 4 stays for editorial display
     headlines + italic accents — the two work together as in the
     original brand application. */
  font-family: 'Humanist 521 BT', 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--graphite);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; }
a {
  color: var(--graphite);
  text-decoration: none;
  transition: color 200ms ease, border-color 200ms ease;
}
a:hover { color: var(--red); }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}
ul, ol { padding-left: 1.25rem; }
p { margin: 0 0 1em; max-width: 70ch; }
h1, h2, h3, h4 {
  margin: 0 0 0.5em;
  line-height: 1.12;
  letter-spacing: -0.012em;
  color: var(--graphite);
  font-weight: 500;
}

/* Type ladder */
.serif-h1 {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: var(--fs-h0);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.022em;
}
.serif-h2 {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.018em;
}
.serif-h3 {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.006em;
}
.red-italic {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: var(--red);
}
.brass-italic {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: var(--brass);
}

/* Accessibility */
.skip-link { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; background: var(--ink); color: var(--ivory); padding: 8px 14px; z-index: 100; }
.skip-link:focus { left: 8px; top: 8px; width: auto; height: auto; }

/* Prototype banner */
.proto-banner {
  background: var(--ink);
  color: var(--ivory);
  text-align: center;
  font-size: 0.74rem;
  padding: 6px 12px;
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--red);
}
.proto-banner strong { color: var(--brass-soft); margin-right: 6px; }

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

/* =============================================================
   HEADER · v13 — dark cinematic header on top of the dark hero.
   Transparent on the hero ground; fills in when the user scrolls.
   ============================================================= */
.site-header {
  /* v16 — white header on the white-led page. Hairline-soft border
     bottom separates it from the hero band. */
  position: sticky; top: 0; z-index: 50;
  background: var(--white);
  border-bottom: 1px solid var(--hairline-soft);
  transition: background 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.site-header.scrolled {
  background: rgba(255,255,255,0.96);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom-color: var(--hairline);
  box-shadow: 0 4px 16px rgba(20,17,13,0.06);
}
.header-row {
  /* v15 — compact, premium.
     v16.1 — row bumped slightly to seat the larger 88px brand-logo
     with breathing room above/below. Not bulky, still premium. */
  display: flex; align-items: center; justify-content: space-between;
  height: 104px; gap: 40px;
  transition: height 220ms ease;
}
.site-header.scrolled .header-row { height: 88px; }

/* Brand — v13 uses jobnjob-black.png (white wordmark on a black canvas
   that blends seamlessly with the dark header / hero ground). */
.brand {
  display: inline-flex; align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  height: 100%;
}
.brand-logo {
  /* v16 — white header, transparent logo. The PNG already has dark
     wordmark + red N, so we DROP the v15 invert/hue-rotate trick
     and just keep a tiny drop-shadow for premium polish.
     v16.1 visual-polish — header logo was too small on the v16
     white header. Step every breakpoint up while keeping the
     overall header height the same (the row uses align-items so
     a taller logo doesn't bulk the bar out). */
  display: block;
  height: 88px;
  width: auto;
  max-width: none;
  object-fit: contain;
  transition: height 220ms ease;
  filter: drop-shadow(0 1px 1px rgba(20,17,13,0.06));
}
.site-header.scrolled .brand-logo { height: 70px; }
@media (max-width: 1100px) {
  .brand-logo { height: 74px; }
}
@media (max-width: 720px) {
  .brand-logo { height: 58px; }
}

.primary-nav {
  display: flex; align-items: center;
  gap: 32px;
  flex: 1; justify-content: center;
}
.primary-nav > ul {
  display: flex; gap: 44px;
  list-style: none; padding: 0; margin: 0;
}
.primary-nav a {
  /* v16 — dark graphite on the new white header. Red hover underline. */
  color: var(--graphite);
  font-family: 'Humanist 521 BT', 'Inter', sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  position: relative;
  padding: 8px 0;
  white-space: nowrap;
  text-transform: none;
}
.primary-nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -4px;
  height: 1px; background: var(--red);
  transition: right 280ms ease;
}
.primary-nav a:hover { color: var(--red); }
.primary-nav a:hover::after { right: 0; }
/* v16.2 — header Hire Talent CTA was inheriting graphite via the
   .primary-nav a rule and turning red on hover via a:hover. Pin the
   pill to white text + no underline in both states with a more
   specific selector. Same fix is intentionally NOT applied to the
   regular nav links. */
.primary-nav a.btn-primary-pill,
.primary-nav a.btn-primary-pill:hover,
.primary-nav a.btn-primary-pill:focus,
.primary-nav a.btn-primary-pill:visited { color: var(--white); }
.primary-nav a.btn-primary-pill::after { display: none; }
.primary-nav a.btn-primary-pill .cta-arrow { color: var(--white); opacity: 1; }
/* Mobile burger lines — dark on white */
.nav-toggle span { background: var(--graphite); }

.nav-cta { white-space: nowrap; }
.cta-arrow { display: inline-block; transition: transform 220ms ease; }
.btn:hover .cta-arrow { transform: translateX(3px); }

.nav-toggle {
  display: none;
  background: none; border: 0; padding: 8px;
  cursor: pointer;
}
.nav-toggle span {
  display: block; width: 24px; height: 1.5px; background: var(--graphite); margin: 6px 0;
  transition: background 150ms ease;
}

@media (max-width: 1100px) {
  .nav-toggle { display: block; }
  .brand-wordmark { font-size: 1.625rem; }
  .header-row { height: 76px; gap: 16px; }
  .primary-nav {
    position: fixed; top: 0; right: -100%; width: 88%; max-width: 380px; height: 100vh;
    background: var(--ivory); flex-direction: column; align-items: flex-start;
    padding: 100px 32px 32px; gap: 0;
    transition: right 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: -16px 0 48px rgba(0,0,0,0.08);
    border-left: 1px solid var(--hairline);
  }
  .primary-nav > ul { flex-direction: column; gap: 0; width: 100%; }
  .primary-nav a {
    display: block; padding: 16px 0; font-size: 1.0625rem;
    border-bottom: 1px solid var(--hairline-soft);
  }
  .primary-nav a::after { display: none; }
  .primary-nav.open { right: 0; }
  .nav-cta { margin-top: 28px; align-self: stretch; text-align: center; justify-content: center; }
}

/* =============================================================
   BUTTONS
   ============================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 13px 24px;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: background 220ms ease, color 220ms ease, border-color 220ms ease, transform 220ms ease;
  white-space: nowrap;
  text-transform: none;
  text-decoration: none;
}
/* Primary — brand red */
.btn-primary {
  background: var(--red);
  color: var(--white);
  border-color: var(--red);
  box-shadow: 0 6px 18px rgba(201,40,42,0.22);
}
.btn-primary:hover {
  background: var(--red-deep);
  border-color: var(--red-deep);
  color: var(--white);
}
/* Ghost on light (graphite border) */
.btn-ghost-ink {
  background: transparent;
  color: var(--graphite);
  border-color: var(--graphite);
}
.btn-ghost-ink:hover {
  background: var(--graphite);
  color: var(--ivory);
}
/* Ghost pill — used in header */
.btn-ghost-pill {
  background: transparent;
  color: var(--graphite);
  border-color: var(--graphite);
  border-radius: 100px;
  padding: 10px 22px;
}
.btn-ghost-pill:hover {
  background: var(--graphite);
  color: var(--ivory);
}
/* Header CTA — v13 premium light-sage button.
   Aligned cleanly with the nav baseline, white text, refined soft
   rounding (not a cheap pill), generous padding and a brass-tinted
   shadow stack so it reads as a high-end action button. */
.btn-primary-pill {
  /* v15.2 — same overall size as the hero Hire Talent button.
     Premium dark executive green, white text, no visible border.
     v16.1 visual-polish — more horizontal breathing room around
     the label and the arrow so the button doesn't feel cramped.
     Padding stepped up (left/right 40px), arrow gap stepped up,
     min-width floor so the symmetry is held on both the header
     and hero instances. Height unchanged (48px), font-size
     unchanged. No border. */
  background: linear-gradient(180deg, #2F6F4F 0%, #285E45 100%);
  color: var(--white);
  border: 0;
  border-radius: 6px;
  padding: 14px 40px;
  min-width: 200px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Humanist 521 BT', 'Inter', sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  box-shadow:
    0 10px 22px rgba(0,0,0,0.42),
    0 1px 0 rgba(255,255,255,0.18) inset,
    0 -1px 0 rgba(0,0,0,0.30) inset;
}
.btn-primary-pill .cta-arrow {
  margin-left: 14px;
  color: var(--white);
  opacity: 0.96;
}
.btn-primary-pill:hover {
  background: linear-gradient(180deg, #285E45 0%, #1F4E38 100%);
  color: var(--white);
  border: 0;
  box-shadow:
    0 14px 30px rgba(0,0,0,0.50),
    0 1px 0 rgba(255,255,255,0.22) inset,
    0 -1px 0 rgba(0,0,0,0.34) inset;
  transform: translateY(-1px);
}
/* Ghost light — used on dark grounds */
.btn-ghost-light {
  background: transparent;
  color: var(--ivory);
  border-color: rgba(239,231,210,0.42);
}
.btn-ghost-light:hover {
  background: var(--ivory);
  color: var(--ink);
  border-color: var(--ivory);
}

/* =============================================================
   SECTIONS
   ============================================================= */
.section { padding: clamp(56px, 6vw, 96px) 0; }
.section-ink { background: var(--ink); color: var(--ivory); }
.section-ink p { color: var(--offwhite-mute); }
.section-ink strong { color: var(--ivory); }

.section-head { max-width: 70ch; margin-bottom: 36px; }   /* v12 — tighter */
.section-head .lead { margin-top: 0.5rem; }
.section-head-center {
  text-align: center;
  margin-left: auto; margin-right: auto;
  max-width: 760px;
}
.section-head-center .lead { margin-left: auto; margin-right: auto; }
.section-head-split {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 56px;
  align-items: end;
  max-width: none;
  margin-bottom: 48px;
}
.section-head-split h2 { margin-bottom: 0; }
.section-head-split .lead-aside {
  font-size: 1rem;
  color: var(--graphite-soft);
  max-width: 46ch;
  margin: 0;
  line-height: 1.55;
}
@media (max-width: 900px) {
  .section-head-split { grid-template-columns: 1fr; gap: 14px; align-items: start; }
}

/* Eyebrow */
.eyebrow {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 18px;
}
.eyebrow-brass { color: var(--brass-deep); }
.eyebrow-light { color: var(--brass-soft); }
.h2-light, .lead-light, .muted-light { color: var(--ivory); }
.muted-light { color: var(--offwhite-mute); }
.muted { color: var(--stone-mute); font-size: 0.9375rem; }
.lead {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--graphite-soft);
  max-width: 58ch;
  font-weight: 400;
}
.lead-light { color: var(--offwhite); }

/* =============================================================
   HERO · the centrepiece
   v11 — page ground tuned to harmonise with the dark dual-portrait
   image. A subtle warm radial wash bleeds down from the top-right,
   matched by a darker bleed on the hero image side, so the photo no
   longer looks "pasted onto" the page.
   ============================================================= */
/* v16 hero ground — WHITE / premium. Subtle warm radial wash from
   the upper right + faint red bloom from lower left keep the
   atmosphere without losing the white-led direction. The hero image
   container is now flexible (image-agnostic) so a future hero photo
   can be dropped in without breaking the layout. */
.hero {
  background:
    radial-gradient(60% 55% at 82% 18%, rgba(216,176,108,0.14) 0%, transparent 60%),
    radial-gradient(40% 35% at 18% 95%, rgba(201,40,42,0.05) 0%, transparent 65%),
    var(--white);
  color: var(--graphite);
  padding: clamp(56px, 6vw, 96px) 0 clamp(48px, 5vw, 72px);
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; right: -8%; top: 0; bottom: 0;
  width: 50%;
  background:
    radial-gradient(55% 75% at 65% 50%, rgba(216,176,108,0.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 1100px) { .hero::before { display: none; } }
.hero .hero-grid { position: relative; z-index: 2; }

/* v16.5 — Hero banner BEHIND the text.
   The wide 1942×809 banner artwork (globe, skylines, people, icons)
   now sits behind the hero text as a large premium backdrop. The
   image is absolutely positioned across the full hero section,
   centred on the container; the text overlays it via z-index. A
   soft white veil + radial fade keeps the copy fully readable on
   top of the busier parts of the artwork. No white block, no
   frame, transparency preserved. */
.hero-banner { padding-bottom: clamp(40px, 4vw, 64px); }
.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: start;
}
.hero-banner .hero-copy {
  position: relative;
  z-index: 2;
  max-width: 60ch;
}
.hero-banner .hero-h1 { max-width: 22ch; }
.hero-banner .hero-lead { max-width: 60ch; }

/* Hero text — dark graphite on white, brand red italic accent */
.hero-h1 {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: var(--fs-h0);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.024em;
  color: var(--graphite);
  margin: 0 0 22px;
  max-width: 14ch;
}
.h1-line { display: block; }
.h1-line-accent em {
  /* v16 — flat brand red italic (the v13 gold gradient text-fill is
     dropped since it depended on the dark ground for contrast). */
  color: var(--red);
  font-style: italic;
  font-weight: 400;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  text-shadow: none;
}
.hero-lead {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--graphite-soft);
  max-width: 54ch;
  margin: 0 0 16px;
}
.hero-strap {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.0625rem;
  color: var(--red);
  margin: 0 0 28px;
  letter-spacing: -0.005em;
}
.hero-strap em { font-style: italic; color: var(--red-deep); }
.hero-ctas {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-bottom: 28px;
}
/* Hero primary CTA — on dark we use the same premium sage as the
   header so the page-level red is reserved for accents only. */
.hero .btn-primary {
  /* v15.1 — matches header CTA: darker premium green, white text,
     no border, no gold outline ring.
     v16.1 — extra horizontal breathing room around label + arrow,
     min-width floor so it stays in step with the header pill. */
  background: linear-gradient(180deg, #2F6F4F 0%, #285E45 100%);
  color: var(--white);
  border: 0;
  border-radius: 6px;
  padding: 14px 40px;
  min-width: 200px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  letter-spacing: 0.06em;
  box-shadow:
    0 12px 26px rgba(0,0,0,0.5),
    0 1px 0 rgba(255,255,255,0.18) inset,
    0 -1px 0 rgba(0,0,0,0.30) inset;
}
.hero .btn-primary .cta-arrow { margin-left: 14px; }
.hero .btn-primary:hover {
  background: linear-gradient(180deg, #285E45 0%, #1F4E38 100%);
  border: 0;
  color: var(--white);
  box-shadow:
    0 14px 30px rgba(0,0,0,0.55),
    0 1px 0 rgba(255,255,255,0.22) inset,
    0 -1px 0 rgba(0,0,0,0.34) inset;
  transform: translateY(-1px);
}
/* Hero secondary CTA — v16 outlined graphite on the new white ground */
.hero .btn-ghost-ink {
  background: transparent;
  color: var(--graphite);
  border: 1px solid var(--graphite);
  border-radius: 6px;
  padding: 14px 28px;
  height: 48px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.hero .btn-ghost-ink:hover {
  background: var(--graphite);
  border-color: var(--graphite);
  color: var(--white);
}

/* Hero proof strip — v16: red dots, graphite text, hairline top */
.hero-proof {
  list-style: none; padding: 24px 0 0; margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  border-top: 1px solid var(--hairline);
  align-items: center;
}
@media (max-width: 700px) {
  .hero-proof { gap: 10px 18px; }
}
.hero-proof li { display: inline-flex; align-items: center; gap: 10px; padding: 0; }
.proof-dot {
  flex-shrink: 0;
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 4px rgba(201,40,42,0.10);
}
.hero-proof .proof-h {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 0.9375rem;
  color: var(--graphite);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.005em;
}

/* =============================================================
   HERO VISUAL · v16.5 — backdrop layer behind the text
   The hero image is absolutely positioned across the full hero
   section as a large background visual. The artwork is rendered
   at premium scale (max-width capped only by the section), kept
   at its true 1942 / 809 aspect via the image's intrinsic ratio
   + object-fit. A subtle white-from-left gradient veil
   (.hv-readability-veil) sits between the image and the text so
   the editorial copy never loses contrast.
   ============================================================= */
.hero-visual {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  overflow: hidden;
}
.hv-figure {
  margin: 0;
  position: relative;
  width: 100%;
  max-width: 1480px;
  padding: 0 clamp(8px, 2vw, 32px);
  box-sizing: border-box;
  display: block;
}
.hv-image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1942 / 809;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
  isolation: isolate;
}
.hv-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  /* v16.5 — slight opacity so the artwork reads as a soft backdrop
     rather than competing with the foreground typography. */
  opacity: 0.55;
  filter: contrast(1.02) saturate(1.02);
}
/* Readability veil — white wash on the left where the text sits,
   fading to transparent on the right so the image's main subjects
   (globe, skylines, people, icons) remain visible. Sits on top of
   the image but under the .hero-grid text. */
.hv-readability-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.72) 28%, rgba(255,255,255,0.36) 52%, rgba(255,255,255,0.12) 78%, rgba(255,255,255,0) 100%),
    linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 70%, rgba(255,255,255,0.20) 100%);
}
/* v16.1 — halo dropped. With the wrap now fully transparent, the
   soft brass/red glow would print as a coloured wash on the white
   page and contradict the "no box, no shadow" brief. Hidden. */
.hv-image-wrap::before { display: none; }
/* No visible frame on the hero image — the photo sits clean on white. */
.hv-image-edge { display: none; }
/* v16 — vignette removed (it only made sense to anchor a dark photo
   onto a dark page). On white, it would tint future replacement
   images. Hide it. */
.hv-image-glow { display: none; }
/* Editorial caption strip under the image (small, premium, not a card) */
.hv-caption {
  margin: 18px 4px 0;
  display: flex; align-items: center; gap: 14px;
}
.hv-caption-line {
  flex: 0 0 36px;
  height: 1px;
  background: var(--brass);
  opacity: 0.7;
}
.hv-caption-text {
  font-family: 'Humanist 521 BT', 'Inter', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--stone-mute);     /* v16 — readable on white */
  font-weight: 700;
}
.hv-caption-line { background: var(--brass); opacity: 0.7; }
/* v16.4 — caption hidden in the new banner layout. The text block
   already carries the editorial framing; a caption under the
   backdrop would float awkwardly. Preserved as a node in case a
   future hero swap wants it back. */
.hv-caption { display: none; }

/* Tablet · narrow viewport, fade the backdrop more so text reads
   as the priority. Image stays full-width and centred. */
@media (max-width: 1100px) {
  .hv-figure { max-width: 100%; }
  .hv-image-wrap { aspect-ratio: 1942 / 809; }
  .hv-image { opacity: 0.42; }
  .hv-readability-veil {
    background:
      linear-gradient(180deg, rgba(255,255,255,0.78) 0%, rgba(255,255,255,0.46) 45%, rgba(255,255,255,0.30) 100%);
  }
}
@media (max-width: 640px) {
  /* Mobile · further dial down the image opacity and use a stronger
     vertical veil so the typography reads cleanly at small sizes. */
  .hv-figure { max-width: 100%; padding: 0; }
  .hv-image-wrap { aspect-ratio: 1942 / 809; }
  .hv-image { opacity: 0.30; }
  .hv-readability-veil {
    background:
      linear-gradient(180deg, rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.62) 50%, rgba(255,255,255,0.42) 100%);
  }
}

/* =============================================================
   STANDING & AFFILIATIONS  (was: trust strip)
   v11 — white background, larger badges, REC Compliant UK included,
   six tiles instead of five.
   ============================================================= */
.trust-strip {
  background: var(--white);
  padding: 60px 0 64px;
  border-top: 1px solid var(--hairline-soft);
  border-bottom: 1px solid var(--hairline-soft);
  text-align: center;
}
.trust-label {
  font-family: 'Humanist 521 BT', 'Inter', sans-serif;
  font-size: 0.74rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 38px;
  font-weight: 600;
  position: relative;
  padding-bottom: 18px;
}
.trust-label::after {
  content: ""; display: block;
  width: 48px; height: 1px;
  background: var(--brass);
  margin: 14px auto 0;
}
.trust-row {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 32px;
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
}
@media (max-width: 1100px) {
  .trust-row { grid-template-columns: repeat(3, 1fr); gap: 44px 28px; }
}
@media (max-width: 560px) {
  .trust-row { grid-template-columns: repeat(2, 1fr); gap: 36px 20px; }
}
.trust-cell {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  justify-content: flex-start;
  text-align: center;
  position: relative;
  padding: 8px 6px;
}
.trust-cell::after { display: none; }
.trust-mark {
  flex-shrink: 0;
  width: 88px; height: 88px;
  display: flex; align-items: center; justify-content: center;
}
.trust-mark img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
}
.t-h {
  display: block;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 0.95rem;
  color: var(--graphite);
  font-weight: 500;
  letter-spacing: -0.006em;
  line-height: 1.25;
}
.t-s {
  display: block;
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone-mute);
  font-weight: 500;
  line-height: 1.4;
  margin-top: 4px;
  max-width: 22ch;
}
.trust-typomark {
  width: 64px; height: 64px;
  background: var(--ink);
  color: var(--ivory);
  border-radius: 50%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  position: relative;
}
.trust-typomark::before {
  content: ""; position: absolute; inset: 4px;
  border: 1px solid rgba(184,146,78,0.68);
  border-radius: 50%;
}
.typo-1 {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--ivory);
  line-height: 1;
  letter-spacing: 0.1em;
}
.typo-2 {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 0.8rem;
  color: var(--brass);
  font-weight: 400;
  line-height: 1.2;
}
.trust-typomark-hiscox .typo-h {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.375rem;
  color: var(--brass);
  font-style: italic;
}

/* =============================================================
   AI · TALENT INTELLIGENCE
   ============================================================= */
/* AI & Talent Intelligence — v13: text-led editorial section, no image,
   tighter vertical rhythm. Background stays warm ivory so the section
   reads as a calm "essay page" between the dark hero and the rest of
   the homepage. */
.section-ai {
  /* v15.9 — overall section height reduced to match the now-compact
     editorial AI cards.
     v16.1 visual-polish — the brass radial gradient was creating a
     faint coloured wash behind the wide AI banner. The brief asks
     for the banner to sit on pure white / transparent ground with
     no shade or panel. Gradient dropped; section now reads as a
     clean white essay page. */
  background: var(--ivory);
  padding-top: clamp(44px, 5vw, 72px);
  padding-bottom: clamp(36px, 4vw, 60px);
}
.section-ai-v13 .container { max-width: 1180px; }
@media (min-width: 1280px) {
  /* v16.2 — let the AI cards grid breathe wider than the editorial
     head above, so the six cards feel premium and balanced. The
     head stays at the editorial 880px (see .ai-head-v13). */
  .section-ai-v13 .cap-grid { max-width: 1280px; }
}
.section-ai-v13 .ai-grid-section { padding-top: 4px; }
.ai-grid-section { display: block; }

/* v13 text-led head — vertical editorial typography stack.
   Three serif lines, with "Human Insight" set as the brand-red italic
   accent in the middle so the eye moves AI-Assisted Sourcing → Human
   Insight → Better Outcomes naturally. */
.ai-head-v13 {
  margin: 0 auto;
  max-width: 880px;
  text-align: center;
  padding: 0;
}
.ai-h2-v13 {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.018em;
  color: var(--graphite);
  margin: 16px 0 24px;
}
.ai-h-line {
  display: block;
  position: relative;
}
.ai-h-line + .ai-h-line { margin-top: 0.18em; }
.ai-h-line-2 {
  /* "Human Insight · Better Outcomes" — composite line. Red italic
     accent overall; the "Better Outcomes" half stays in brass-italic
     via its own <em> styling below. */
  font-style: italic;
  color: var(--red);
}
/* v16.3 — composite line: keep Human Insight and Better Outcomes on
   one row on desktop. Stack to two rows on narrow viewports. */
.ai-h-line-combined {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  column-gap: 0.35em;
}
.ai-h-line-combined .ai-h-part { display: inline; white-space: nowrap; }
.ai-h-line-combined .ai-h-sep {
  color: var(--brass);
  font-style: normal;
  opacity: 0.85;
}
@media (max-width: 640px) {
  .ai-h-line-combined { flex-direction: column; }
  .ai-h-line-combined .ai-h-sep { display: none; }
}
.ai-h-line-3 em,
.ai-h-line-2 em.ai-h-part {
  /* "Better Outcomes" — brass italic, for editorial closure */
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  color: var(--brass);
  font-weight: 400;
}
/* Thin brass hairline above the heading stack for editorial polish */
.ai-head-v13::before {
  content: ""; display: block;
  width: 56px; height: 1px;
  background: var(--brass);
  opacity: 0.7;
  margin: 0 auto 18px;
}
.ai-lead-v13 {
  margin: 18px auto 12px;
  max-width: 62ch;
  font-size: 1.0625rem;
  color: var(--graphite-soft);
}
.section-ai-v13 .ai-foot-line {
  /* v15.9 — tighter gap before the cards */
  margin: 10px auto 20px;
  text-align: center;
  font-size: 0.95rem;
  color: var(--graphite-soft);
  max-width: 62ch;
}

/* v12 — two-column premium layout: small refined editorial figure on
   the left, eyebrow + H2 + lead on the right. The figure is no longer
   a large circular blend; it is a tight, sepia, brass-ringed editorial
   plate that reads as a brand artefact, not a literal stock image. */
.ai-grid-section-v12 .ai-head {
  display: grid;
  grid-template-columns: 0.42fr 0.58fr;
  gap: clamp(36px, 4vw, 64px);
  text-align: left;
  max-width: 1080px;
  margin: 0 auto 48px;
  align-items: center;
}
.ai-grid-section-v12 .ai-head .eyebrow,
.ai-grid-section-v12 .ai-head h2,
.ai-grid-section-v12 .ai-head .lead,
.ai-grid-section-v12 .ai-head .ai-foot-line {
  grid-column: 2;
  margin-left: 0;
  margin-right: 0;
}
.ai-grid-section-v12 .ai-figure {
  grid-column: 1;
  grid-row: 1 / span 4;
  margin: 0;
  max-width: 320px;
  justify-self: start;
}
@media (max-width: 900px) {
  .ai-grid-section-v12 .ai-head {
    grid-template-columns: 1fr;
    gap: 24px;
    text-align: center;
  }
  .ai-grid-section-v12 .ai-head .eyebrow,
  .ai-grid-section-v12 .ai-head h2,
  .ai-grid-section-v12 .ai-head .lead,
  .ai-grid-section-v12 .ai-head .ai-foot-line { grid-column: 1; }
  .ai-grid-section-v12 .ai-figure {
    grid-column: 1; grid-row: auto;
    margin: 0 auto;
    max-width: 240px;
  }
}

/* Refined editorial figure — small, sepia, premium brass border + thin
   vertical accent line connecting it to the heading column. */
.ai-figure {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start;
  padding-right: 24px;
}
.ai-figure-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  background:
    linear-gradient(180deg, #2A241B 0%, #1F1B16 100%);
  border: 1px solid var(--brass-deep);
  box-shadow:
    0 30px 60px -22px rgba(20,17,13,0.30),
    inset 0 0 0 4px rgba(216,176,108,0.12);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  border-radius: 2px;
  isolation: isolate;
}
.ai-figure-wrap::before {
  /* warm brass plate overlay so the brain image reads as a "minted"
     editorial artefact rather than a stock photo on white */
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(60% 50% at 50% 30%, rgba(216,176,108,0.18) 0%, transparent 60%),
    radial-gradient(70% 60% at 50% 100%, rgba(201,40,42,0.10) 0%, transparent 65%);
  pointer-events: none;
  z-index: 1;
}
.ai-figure-wrap img {
  position: relative; z-index: 0;
  width: 72%;
  height: auto;
  /* Knock out the white background and recolour into a sepia/brass
     editorial treatment so it sits comfortably as a brand artefact. */
  mix-blend-mode: screen;
  filter: grayscale(1) contrast(1.18) brightness(0.92) sepia(0.5) hue-rotate(-12deg);
  opacity: 0.95;
}
.ai-figcap {
  margin: 16px 0 0;
  display: flex; align-items: center; gap: 12px;
  width: 100%;
}
.ai-figcap-line {
  flex: 0 0 28px; height: 1px;
  background: var(--brass); opacity: 0.8;
}
.ai-figcap span:last-child {
  font-family: 'Humanist 521 BT', 'Inter', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--stone-mute);
  font-weight: 700;
  line-height: 1.4;
}

.ai-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 56px;
}
.ai-head h2 { margin: 0 0 18px; }
.ai-head .lead { margin: 0 auto 16px; }
.ai-foot-line {
  font-size: 0.9375rem;
  color: var(--graphite-soft);
  margin: 16px auto 0;
  max-width: 62ch;
}
.ai-foot-line strong { color: var(--red); font-weight: 500; }
/* v15.6 — AI capability cards: wider horizontal layout, 3×2 grid,
   premium ivory ground with a gold icon plate on the left, thin brass
   hairline divider in the middle, and number/title/body on the right.
   Cards are wider and more balanced than v15.4 (icon 120 not 84, min
   height 170 not 200, padding 24/30 not 26/28). The previous 1px
   hairline-bg grid trick is replaced by a clean 10px gap. */
.cap-grid {
  max-width: 1480px;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  background: transparent;
  border: 0;
}
@media (max-width: 1100px) {
  .cap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .cap-grid { grid-template-columns: 1fr; }
}

/* v15.9 — AI cards match the Selected Work editorial discipline:
   wider, shorter, less internal padding, smaller icon column, tighter
   divider, more compact typography. Cards stay 3 × 2 on desktop,
   icon-divider-body horizontal layout preserved. */
.cap-card {
  /* v16.1 visual-polish — same overall height as before. We gain
     premium presence by enlarging the icon plate (96 → 116), adding
     a soft warm circular ground behind it and a thin red accent
     line above the number. Card padding unchanged, so the 3 × 2
     grid stays in step. */
  background: var(--ivory-soft);
  padding: 18px 24px;
  display: grid;
  grid-template-columns: 116px 1px minmax(0, 1fr);
  align-items: center;
  column-gap: 24px;
  position: relative;
  overflow: hidden;
  transition: background 220ms ease, box-shadow 220ms ease;
}
.cap-card:hover {
  background: var(--white);
  box-shadow:
    0 14px 32px -16px rgba(20,17,13,0.18),
    0 2px 6px -2px rgba(20,17,13,0.06);
}
/* v16.1 — subtle red accent line at top of each card for premium
   editorial weight. Light cards only; the dark feature card keeps
   its own existing red left border. */
.cap-card:not(.cap-card-feature)::before {
  content: ""; position: absolute;
  top: 0; left: 0;
  width: 56px; height: 2px;
  background: var(--red);
  opacity: 0.85;
}

.cap-card-icon {
  width: 116px;
  height: 116px;
  display: flex; align-items: center; justify-content: center;
  grid-column: 1;
  position: relative;
}
/* v16.1 — soft warm circular ground behind the icon image, gives
   the icon weight without a hard frame. Brass/cream wash on light
   cards, dimmed for the dark feature card so it reads correctly. */
.cap-card-icon::before {
  content: ""; position: absolute;
  inset: 4px;
  border-radius: 50%;
  background:
    radial-gradient(60% 60% at 50% 45%, rgba(216,176,108,0.22) 0%, rgba(216,176,108,0.10) 55%, transparent 78%);
  z-index: 0;
}
.cap-card-feature .cap-card-icon::before {
  background:
    radial-gradient(60% 60% at 50% 45%, rgba(216,176,108,0.18) 0%, rgba(216,176,108,0.08) 55%, transparent 78%);
}
.cap-card-icon img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform 320ms ease;
}
.cap-card:hover .cap-card-icon img { transform: scale(1.04); }

.cap-card-divider {
  grid-column: 2;
  display: block;
  width: 1px;
  height: 60px;
  background: rgba(184, 146, 78, 0.35);
  align-self: center;
  justify-self: center;
}

.cap-card-body {
  grid-column: 3;
  min-width: 0;
}

@media (max-width: 1100px) {
  .cap-card {
    grid-template-columns: 96px 1px minmax(0, 1fr);
    column-gap: 18px;
    padding: 16px 20px;
  }
  .cap-card-icon { width: 96px; height: 96px; }
  .cap-card-divider { height: 52px; }
}
@media (max-width: 700px) {
  .cap-card {
    grid-template-columns: 82px 1px minmax(0, 1fr);
    column-gap: 16px;
    padding: 14px 18px;
  }
  .cap-card-icon { width: 82px; height: 82px; }
  .cap-card-divider { height: 48px; }
}
.cap-num {
  display: block;
  font-family: 'Source Serif 4', Georgia, serif;
  color: var(--red);
  margin: 0 0 2px;              /* tighter than v15.6's 4px */
  line-height: 1;
}
.cap-num em {
  font-style: italic;
  font-size: 1rem;              /* was 1.125rem — smaller editorial figure */
  font-weight: 400;
  letter-spacing: -0.005em;
}
.cap-h {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.0625rem;          /* was 1.2rem */
  font-weight: 500;
  color: var(--graphite);
  letter-spacing: -0.008em;
  margin: 0 0 6px;               /* was 8px */
  line-height: 1.15;
}
.cap-card p {
  font-size: 0.86rem;            /* was 0.92rem — matches Selected Work body */
  color: var(--graphite-soft);
  margin: 0;
  max-width: none;
  line-height: 1.4;              /* was 1.45 */
}
/* v16.2 — partial image watermark behind body text.
   Each card sets a custom property --cap-bg on the element, and we
   paint it as a fade-edged image on the right side of the card,
   bleeding under the body copy. Foreground content (icon, divider,
   body) sits above via z-index. Watermark intentionally subtle on
   light cards; slightly stronger on the dark feature card so the
   illustration remains readable without losing the dark ground. */
.cap-card::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  right: -6%;
  width: 62%;
  background-image: var(--cap-bg);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: contain;
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 28%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 28%, #000 100%);
  transition: opacity 320ms ease;
}
.cap-card:hover::after { opacity: 0.18; }
.cap-card-icon,
.cap-card-divider,
.cap-card-body { position: relative; z-index: 1; }

.cap-card-feature {
  background: var(--ink);
  color: var(--ivory);
  border-left: 2px solid var(--red);
}
.cap-card-feature::after {
  opacity: 0.22;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 28%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 28%, #000 100%);
}
.cap-card-feature:hover::after { opacity: 0.30; }
.cap-card-feature .cap-num { color: var(--red); }
.cap-card-feature .cap-h { color: var(--ivory); }
.cap-card-feature p { color: var(--offwhite); }
.cap-card-feature p strong { color: var(--red); font-weight: 500; }
/* v16.1 visual-polish — Human Consultant Review (the dark feature
   card) was inheriting the general .cap-card:hover { background: white }
   rule. On hover the background flipped to white while the text
   stayed white/ivory, making the card unreadable. Pin the dark
   ground on hover and lift the body copy a touch so the hover still
   feels responsive without breaking contrast. The five light cards
   are unchanged. */
.cap-card-feature:hover { background: var(--ink-soft); }
.cap-card-feature:hover .cap-h,
.cap-card-feature:hover p { color: var(--white); }
.cap-card-feature:hover .cap-card-divider { background: rgba(216,176,108,0.55); }

/* =============================================================
   SERVICES
   ============================================================= */
.section-services { background: var(--ivory); }
.svc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--hairline-soft);
}
@media (max-width: 980px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .svc-grid { grid-template-columns: 1fr; } }
.svc-row {
  /* v16.3 — service cards shorter. Padding pulled in, numerals
     smaller, internal gaps tighter. Symmetry preserved across 8
     cards; section reads as compact editorial grid, not as tall
     stack. */
  padding: 18px 22px 16px;
  border-bottom: 1px solid var(--hairline-soft);
  border-right: 1px solid var(--hairline-soft);
  transition: background 220ms ease;
  position: relative;
}
@media (min-width: 981px) { .svc-row:nth-child(4n) { border-right: 0; } }
@media (max-width: 980px) and (min-width: 541px) { .svc-row:nth-child(2n) { border-right: 0; } }
@media (max-width: 540px) { .svc-row { border-right: 0; } }
.svc-row:hover { background: var(--ivory-soft); }
.svc-row::before {
  content: ""; position: absolute; left: 22px; top: 18px;
  width: 0; height: 2px; background: var(--red);
  transition: width 280ms ease;
}
.svc-row:hover::before { width: 28px; }
.svc-num {
  display: block;
  font-family: 'Source Serif 4', Georgia, serif;
  color: var(--red);
  line-height: 0.9;
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}
.svc-num em { font-style: italic; font-size: 2rem; font-weight: 400; }
.svc-body h3 {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--graphite);
  letter-spacing: -0.008em;
  margin: 0 0 4px;
  line-height: 1.18;
}
.svc-body p {
  font-size: 0.86rem;
  color: var(--graphite-soft);
  margin: 0;
  line-height: 1.45;
  max-width: 42ch;
}

/* =============================================================
   SECTORS · INDUSTRIES
   ============================================================= */
.section-sectors { background: var(--white); border-top: 1px solid var(--hairline-soft); }   /* v16 — pure white */
.ind-grid {
  list-style: none; padding: 0; margin: 36px 0 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--hairline-soft);
  border: 1px solid var(--hairline-soft);
}
@media (max-width: 1024px) { .ind-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .ind-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .ind-grid { grid-template-columns: 1fr; } }

/* =============================================================
   v16.3 — Sector tiles. Each .ind-cell becomes a square card with
   its sector image painted behind via the --ind-bg custom property,
   a subtle dark overlay for legibility, and white type. 5 × 2 grid
   on desktop, scales down on smaller viewports. Premium and clean,
   no thick borders, no heavy shadows.
   ============================================================= */
.ind-grid-tiles {
  margin-top: 36px;
  gap: 12px;
  background: transparent;
  border: 0;
}
.ind-grid-tiles .ind-cell {
  position: relative;
  isolation: isolate;
  aspect-ratio: 1 / 1;
  padding: 18px 18px 16px;
  background-image: var(--ind-bg);
  background-color: var(--ink);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  color: var(--white);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  overflow: hidden;
  transition: transform 320ms ease;
}
.ind-grid-tiles .ind-cell:hover { transform: translateY(-2px); background-color: var(--ink); }
.ind-grid-tiles .ind-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(20,17,13,0) 38%, rgba(20,17,13,0.65) 78%, rgba(20,17,13,0.85) 100%),
    linear-gradient(180deg, rgba(20,17,13,0.18) 0%, rgba(20,17,13,0.04) 30%, rgba(20,17,13,0) 50%);
  transition: opacity 320ms ease;
  pointer-events: none;
}
.ind-grid-tiles .ind-cell:hover .ind-overlay { opacity: 0.95; }
.ind-grid-tiles .ind-num {
  position: relative;
  z-index: 1;
  font-family: 'Source Serif 4', Georgia, serif;
  color: var(--brass-soft);
  line-height: 1;
  margin: 0 0 6px;
  min-width: 0;
}
.ind-grid-tiles .ind-num em {
  font-style: italic;
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: 0.02em;
}
.ind-grid-tiles .ind-name {
  position: relative;
  z-index: 1;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.0625rem;
  color: var(--white);
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.18;
  text-shadow: 0 1px 12px rgba(0,0,0,0.32);
  max-width: 14ch;
}
@media (max-width: 640px) {
  .ind-grid-tiles { gap: 10px; }
  .ind-grid-tiles .ind-cell { padding: 14px; }
  .ind-grid-tiles .ind-name { font-size: 0.95rem; max-width: 18ch; }
}

/* Legacy .ind-cell rules below remain for the older list-style sector
   variant, in case a future page reuses the same component name. */
.ind-grid:not(.ind-grid-tiles) .ind-cell {
  background: var(--ivory);
  padding: 22px 20px;
  display: flex; align-items: baseline; gap: 14px;
  transition: background 220ms ease;
}
.ind-grid:not(.ind-grid-tiles) .ind-cell:hover { background: var(--white); }
.ind-grid:not(.ind-grid-tiles) .ind-num {
  font-family: 'Source Serif 4', Georgia, serif;
  color: var(--red);
  line-height: 1;
  flex-shrink: 0;
  min-width: 28px;
}
.ind-grid:not(.ind-grid-tiles) .ind-num em { font-style: italic; font-size: 1.4rem; font-weight: 400; letter-spacing: -0.005em; }
.ind-grid:not(.ind-grid-tiles) .ind-name {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1rem;
  color: var(--graphite);
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.25;
}

/* =============================================================
   FOUNDER / HERITAGE
   ============================================================= */
/* v16 — Heritage / Founder flipped to white. Brass and red retained
   as accents; copy is graphite/graphite-soft. */
.section-founder {
  background:
    radial-gradient(60% 50% at 22% 18%, rgba(216,176,108,0.10) 0%, transparent 65%),
    radial-gradient(50% 40% at 82% 90%, rgba(201,40,42,0.04) 0%, transparent 65%),
    var(--white);
  color: var(--graphite);
  /* v16.2 — section padding pulled in so the stats no longer make
     the founder block feel stretched on tall viewports. */
  padding: clamp(48px, 5vw, 80px) 0;
}
.section-founder .eyebrow,
.section-founder .eyebrow-brass {
  color: var(--brass-deep);
}
.founder-head {
  text-align: center;
  max-width: 32ch;
  margin: 0 auto 32px;
}
.founder-h2 { line-height: 1.1; color: var(--graphite); }
.section-founder .brass-italic { color: var(--brass); }
.founder-grid {
  display: grid;
  grid-template-columns: 0.82fr 1fr;
  gap: clamp(40px, 6vw, 72px);
  align-items: start;
  margin-bottom: 0;
}
@media (max-width: 900px) { .founder-grid { grid-template-columns: 1fr; gap: 36px; } }
.founder-portrait {
  margin: 0;
  position: relative;
  max-width: 440px;
  justify-self: center;
}
.founder-mat {
  /* v16 — white mat on a white ground; the photo sits inside a
     subtle brass-hairline frame. */
  background: var(--white);
  padding: 12px;
  position: relative;
  border: 1px solid var(--hairline);
  box-shadow:
    0 18px 40px -16px rgba(20,17,13,0.18),
    inset 0 0 0 1px rgba(184,146,78,0.10);
}
.founder-mat::before {
  content: ""; position: absolute;
  top: 6px; left: 6px; right: 6px; bottom: 6px;
  border: 1px solid var(--brass);
  opacity: 0.45;
  pointer-events: none;
  z-index: 1;
}
.founder-mat img {
  width: 100%; height: auto;
  display: block;
  position: relative; z-index: 0;
  filter: grayscale(0.3) contrast(1.06);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
}
.founder-portrait figcaption {
  background: var(--white);
  padding: 14px 22px 18px;
  border: 1px solid var(--hairline);
  border-top: 1px solid var(--brass);
  display: flex; flex-direction: column; gap: 4px;
  text-align: center;
}
.fp-name {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--graphite);
  letter-spacing: -0.005em;
}
.fp-role {
  font-size: 0.66rem;
  color: var(--brass-deep);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
}
.fp-meta {
  font-size: 0.74rem;
  color: var(--stone-mute);
  font-style: italic;
  margin-top: 2px;
}

.founder-copy { position: relative; padding-left: 4px; }
.founder-quote {
  margin: 0 0 24px;
  padding: 4px 0 4px 22px;
  border-left: 2px solid var(--brass);
}
.founder-quote p {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.22;
  color: var(--graphite);
  margin: 0 0 12px;
  max-width: 28ch;
  letter-spacing: -0.01em;
  font-weight: 400;
}
.founder-quote cite {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass-deep);
  font-style: normal;
  font-weight: 600;
}
.founder-lead {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--graphite);
  font-weight: 400;
}
.founder-copy p { color: var(--graphite-soft); max-width: 56ch; }
/* v16.8 — Heritage / Founder body paragraphs justified.
   Targets only the two body paragraphs inside .founder-copy: the
   .founder-lead opener and the unclassed second paragraph (firm
   history). The italic .founder-tagline and the .founder-quote
   are intentionally excluded, as is anything outside the founder
   block. text-align-last: left keeps the final short line tidy. */
.founder-copy > .founder-lead,
.founder-copy > p:not(.founder-tagline) {
  text-align: justify;
  text-align-last: left;
  -webkit-hyphens: auto;
          hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
}
.founder-tagline {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-size: 1.0625rem;
  color: var(--brass-deep);
  margin: 16px 0 0;
}
/* Founder stats · v16.3 — compact horizontal trio.
   Three stats sit on a single row, separated by thin brass
   hairlines. Each stat is a tight figure-over-label cell, so the
   block reads as a low editorial stripe rather than a tall stacked
   list. Sits directly below the founder copy, parallel in height
   to the founder portrait opposite. Mobile: single column with
   tight stacking. */
.founder-stats {
  list-style: none;
  padding: 12px 0 4px;
  margin: 18px 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 0;
}
.founder-stats li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4px;
  padding: 4px 16px 0;
  text-align: left;
  position: relative;
  min-height: 0;
}
.founder-stats li + li {
  border-left: 1px solid var(--hairline-soft);
}
.founder-stats li:first-child { padding-left: 0; }
.founder-stats li:last-child { padding-right: 0; }
.founder-stats li::before,
.founder-stats li::after { display: none; }
.stat-num {
  font-family: 'Source Serif 4', Georgia, serif;
  color: var(--graphite);
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-start;
}
.stat-num em {
  font-style: normal;
  font-weight: 500;
  font-size: 1.875rem;
  letter-spacing: -0.012em;
}
.stat-num small {
  font-size: 0.5em;
  vertical-align: super;
  font-weight: 500;
  color: var(--brass-deep);
  letter-spacing: 0;
  margin-left: 1px;
}
.stat-lab {
  font-family: 'Humanist 521 BT', 'Inter', sans-serif;
  font-size: 0.62rem;
  color: var(--stone-mute);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  line-height: 1.4;
  max-width: 26ch;
}
@media (max-width: 720px) {
  .founder-stats {
    grid-template-columns: 1fr;
    padding: 8px 0;
  }
  .founder-stats li {
    flex-direction: row;
    align-items: baseline;
    gap: 14px;
    padding: 6px 0;
  }
  .founder-stats li + li {
    border-left: 0;
    border-top: 1px solid var(--hairline-soft);
  }
  .stat-num em { font-size: 1.625rem; }
}

/* =============================================================
   LEADERSHIP PREVIEW
   ============================================================= */
.section-leadership {
  background: var(--white);
  border-top: 1px solid var(--hairline-soft);
  /* v16.3 — section padding tightened further so the single-row
     people grid no longer sits in an empty section. */
  padding-top: clamp(28px, 3vw, 44px);
  padding-bottom: clamp(28px, 3vw, 44px);
}
.section-leadership .section-head-center { margin-bottom: 14px; }
.section-leadership .section-head .lead { margin-top: 0.25rem; }
.leadership-h2 { margin-bottom: 6px; }
.leadership-h2-line {
  display: inline-block;
  white-space: normal;
}
@media (min-width: 1100px) {
  /* v16.3 — keep the whole heading on one line on desktop where
     space allows; "Every Brief" cannot drop awkwardly. */
  .leadership-h2 { font-size: clamp(1.5rem, 2.6vw, 2.25rem); }
  .leadership-h2-line { white-space: nowrap; }
}
.people-row {
  /* v15.7 — six leaders now (was five). Single row of 6 on widest
     screens, 3×2 on tablet, 2×3 on small tablet, 1×6 on mobile.
     v16.3 — top margin pulled in further. */
  list-style: none; padding: 0; margin: 14px 0 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
}
@media (max-width: 1280px) { .people-row { grid-template-columns: repeat(3, 1fr); gap: 22px; } }
@media (max-width: 720px) { .people-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .people-row { grid-template-columns: 1fr; } }
.person { margin: 0; }
.person-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--ivory-deep);
  border: 1px solid var(--hairline);
}
.person-photo::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(245,241,230,0.10) 0%, transparent 30%, transparent 70%, rgba(31,27,22,0.12) 100%);
  pointer-events: none;
}
.person-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 18%;
  filter: grayscale(0.30) contrast(1.05) brightness(1.0) sepia(0.06);
  transition: filter 320ms ease, transform 600ms ease;
}
.person:hover .person-photo img {
  filter: grayscale(0.12) contrast(1.06) brightness(1.02) sepia(0.02);
  transform: scale(1.02);
}
.person:first-child .person-photo img {
  filter: grayscale(0.45) contrast(1.04) brightness(0.98) sepia(0.08);
  object-position: center 14%;
}
/* Leadership card meta — v11: names centred under each portrait */
.person-meta {
  padding: 18px 8px 0;
  display: flex; flex-direction: column; gap: 4px;
  position: relative;
  text-align: center;
  align-items: center;
}
.person-meta::before {
  content: ""; position: absolute; top: 0; left: 50%;
  transform: translate(-50%, 0);
  width: 28px; height: 2px;
  background: var(--red);
}
.person-name {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--graphite);
  margin: 10px 0 0;
  letter-spacing: -0.008em;
  line-height: 1.25;
}
.person-role {
  font-size: 0.82rem;
  color: var(--graphite-soft);
  margin: 0;
  font-weight: 500;
}
.person-firm {
  font-size: 0.74rem;
  color: var(--stone-mute);
  margin: 0;
  letter-spacing: 0.02em;
}
.person-firm em { font-style: italic; }

/* =============================================================
   CASE STUDIES · ink panel
   ============================================================= */
.section-cases {
  /* v16 — section flipped to white. Card chrome adapts: light card
     bg, dark text, brass-deep accents, hairline border. */
  background: var(--white);
  color: var(--graphite);
  padding-top: clamp(44px, 5vw, 72px);
  padding-bottom: clamp(44px, 5vw, 72px);
  border-top: 1px solid var(--hairline-soft);
}
.section-cases .section-head-center { margin-bottom: 16px; }
.section-cases .eyebrow-light { color: var(--brass-deep); }
.section-cases .h2-light { color: var(--graphite); }
.section-cases .muted-light { color: var(--stone-mute); }
/* v16.3 — bring the anonymised statement directly under the heading,
   tight to the H2, centred and width-controlled so it reads as part
   of the heading block rather than floating below. */
.section-cases .cases-statement {
  margin: 8px auto 0;
  max-width: 52ch;
  font-size: 0.92rem;
  line-height: 1.5;
  text-align: center;
}
.section-cases .section-head-cases h2 { margin-bottom: 6px; }
.section-cases .eyebrow { color: var(--brass-soft); }
/* v15.8 — Selected Work / Case Studies redesigned to be wider and
   shorter. Out: 280 px min-height + centred-stacked content + heavy
   34 px top padding + ink-line hairline grid trick. In: content-driven
   height, left-aligned editorial layout, tighter padding, clean 16 px
   gap separation. Dark luxury treatment is preserved. */
.case-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  background: transparent;
  border: 0;
  margin-top: 28px;
}
@media (max-width: 960px) { .case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .case-grid { grid-template-columns: 1fr; } }

.case-card {
  /* v16 — light cream card on the new white section. Graphite text,
     hairline border, premium soft shadow on hover.
     v16.3 — vertical card height reduced; padding pulled in. */
  background: var(--ivory-soft);
  padding: 18px 22px 16px;
  display: flex; flex-direction: column;
  text-align: left;
  position: relative;
  transition: background 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
  border: 1px solid var(--hairline-soft);
}
.case-card::before {
  /* thin brand-red accent bar pinned to the top-left of each card */
  content: ""; position: absolute; top: 0; left: 0;
  width: 36px; height: 2px;
  background: var(--red);
  transition: width 320ms ease;
}
.case-card:hover {
  background: var(--white);
  border-color: var(--brass);
  box-shadow: 0 18px 36px -16px rgba(20,17,13,0.10);
}
.case-card:hover::before { width: 72px; }

.case-tag {
  /* v16.3 — top detail line: bolder weight, slightly tighter tracking. */
  font-family: 'Humanist 521 BT', 'Inter', sans-serif;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 6px;
  text-align: left;
  display: block;
  max-width: none;
  line-height: 1.3;
}
.case-h {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--graphite);
  margin: 0 0 8px;
  letter-spacing: -0.012em;
  line-height: 1.18;
  text-align: left;
  max-width: none;
}
.case-dl {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  text-align: left;
  max-width: none;
  width: 100%;
}
.case-dl dt {
  /* v16.3 — NEED / OUTCOME labels bolder. */
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 800;
  margin-top: 2px;
}
.case-dl dd {
  margin: 0 0 2px;
  font-size: 0.82rem;
  color: var(--graphite-soft);
  line-height: 1.4;
}
.case-ref {
  margin: 14px 0 0;
  padding-top: 10px;
  font-size: 0.66rem;
  color: var(--stone-mute);
  font-style: italic;
  text-align: left;
  width: 100%;
  border-top: 1px solid var(--hairline);
  letter-spacing: 0.02em;
}

/* =============================================================
   GROUP CONTEXT
   ============================================================= */
/* Group Context · v12 — tighter, white, tree layout:
   AHM Corp on top
   Job N Job + Cipher7 side by side below
   No borders/plaque cards around the logos. */
.section-group {
  background: var(--white);
  /* v16.1 visual-polish — section padding pulled in further so the
     Group Context block reads as a compact editorial diagram rather
     than a full-height section. */
  padding: clamp(28px, 3vw, 48px) 0 clamp(28px, 3vw, 48px);
  border-top: 1px solid var(--hairline-soft);
  border-bottom: 1px solid var(--hairline-soft);
}
.section-group .section-head-center { margin-bottom: 18px; }
/* Title: visually reduce the connector words "is" / "of" */
.group-h2 .word-connector {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 0.62em;
  color: var(--stone-mute);
  text-transform: lowercase;
  letter-spacing: 0.04em;
  vertical-align: 0.18em;
  margin: 0 0.1em;
}
/* v13 — Group Context tree, vertical spacing tightened significantly.
   v16.1 — every step pulled tighter to remove the previous open-air
   feel. Tree margin, pillar gaps and connector stem all reduced;
   hierarchy stays readable, layout stays unchanged. */
.group-tree {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin: 10px auto 0;
  max-width: 920px;
}
.group-pillar {
  margin: 0;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  gap: 4px;
}
.group-pillar-top { gap: 4px; }
.group-pillar-top .group-plaque-bare { max-width: 220px; }
.group-pillar-top .group-plaque-bare img { max-height: 92px; }

.group-stem {
  display: block;
  width: 1px;
  height: 18px;
  background: linear-gradient(180deg, var(--brass) 0%, rgba(184,146,78,0) 100%);
  margin: 2px 0 6px;
}
.group-children {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 48px);
  width: 100%;
  align-items: start;
  position: relative;
}
.group-children::before {
  content: ""; position: absolute;
  top: -10px; left: 25%; right: 25%; height: 1px;
  background: var(--brass);
  opacity: 0.55;
}
.group-children .group-pillar { gap: 4px; }
.group-children .group-plaque-bare img { max-height: 72px; }
@media (max-width: 720px) {
  .group-children { grid-template-columns: 1fr; gap: 16px; }
  .group-children::before { display: none; }
}

/* Borderless logo "plaque" — no card, no shadow, no top red bar */
.group-plaque-bare {
  background: transparent;
  border: 0;
  box-shadow: none;
  width: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 2px 8px;
  position: relative;
  height: auto;
  min-height: 80px;
}
.group-plaque-bare::before { display: none !important; }
.group-plaque-bare img {
  max-width: 100%;
  width: auto;
  height: auto;
  max-height: 80px;
  object-fit: contain;
}
.group-plaque img {
  max-width: 100%; max-height: 100%;
  width: auto;
  object-fit: contain;
  position: relative; z-index: 1;
}
.group-pillar figcaption {
  display: flex; flex-direction: column; gap: 2px;
  align-items: center;
  margin-top: 2px;
}
.group-eyebrow {
  font-family: 'Humanist 521 BT', 'Inter', sans-serif;
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 700;
}
.group-role {
  font-family: 'Humanist 521 BT', 'Inter', sans-serif;
  font-size: 0.82rem;
  color: var(--graphite-soft);
  letter-spacing: 0.02em;
  max-width: 28ch;
}
.group-led {
  text-align: center;
  margin: 14px auto 0;
  font-size: 0.95rem;
  color: var(--graphite-soft);
  max-width: 60ch;
}
.group-led strong { color: var(--red); font-weight: 500; }

/* =============================================================
   FINAL CTA
   ============================================================= */
/* v16 — Hiring (Final CTA) flipped to white. Brass hairline top
   replaces the gold gradient. Brand red retained as the heading
   accent; dark green sage CTA stays. */
.section-final {
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(216,176,108,0.10) 0%, transparent 60%),
    var(--white);
  color: var(--graphite);
  padding: clamp(56px, 6vw, 96px) 0;
  position: relative;
  overflow: hidden;
  text-align: center;
  border-top: 1px solid var(--hairline-soft);
}
.section-final::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--brass) 50%, transparent);
  opacity: 0.65;
}
.section-final::after { content: ""; position: absolute; inset: 0; background: none; }
.section-final .eyebrow,
.section-final .eyebrow-light { color: var(--brass-deep); }
.section-final .red-italic { color: var(--red); -webkit-text-fill-color: var(--red); }
.section-final h2 { color: var(--graphite); }
.final-inner {
  max-width: 760px; margin: 0 auto;
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.final-h { margin: 0 0 6px; max-width: 26ch; }
.final-strap {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-size: 1.0625rem;
  color: var(--brass-deep);
  margin: 0 0 18px;
  letter-spacing: -0.005em;
}
.final-ctas {
  display: flex; gap: 14px; flex-wrap: wrap; justify-content: center;
  align-items: center;
}
.section-final .btn-primary {
  background: linear-gradient(180deg, #2F6F4F 0%, #285E45 100%);
  color: var(--white);
  border: 0;
  border-radius: 6px;
  padding: 14px 28px;
  height: 48px;
  font-weight: 700;
  letter-spacing: 0.06em;
  box-shadow: 0 12px 26px rgba(20,17,13,0.18);
}
.section-final .btn-primary:hover {
  background: linear-gradient(180deg, #285E45 0%, #1F4E38 100%);
  color: var(--white);
}
.section-final .btn-ghost-light {
  background: transparent;
  color: var(--graphite);
  border: 1px solid var(--graphite);
  border-radius: 6px;
  padding: 14px 28px;
  height: 48px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.section-final .btn-ghost-light:hover {
  background: var(--graphite);
  border-color: var(--graphite);
  color: var(--white);
}

/* =============================================================
   FOOTER
   ============================================================= */
/* =============================================================
   FOOTER · v12
   NOT black. Premium warm graphite gradient. The illustrated
   "JNJ Tattoo" banner (jobnjob-footer.png) sits at the very top,
   and the Standing & Affiliations row is integrated tight beneath
   it as a single visually-coherent footer band — no longer split
   between the upper page and a separate strip.
   ============================================================= */
/* v13 — Footer is now LIGHT (white tattoo area + light-cream lower
   columns), with a brass hairline at the top to separate it from the
   dark "Hiring" Final-CTA section above. */
.site-footer {
  /* v14 footer pass — pure white throughout, tightened vertical
     rhythm. No more beige/cream gradient. */
  background: var(--white);
  color: var(--footer-text);
  position: relative;
}
.site-footer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--brass) 50%, transparent);
  opacity: 0.65;
}
/* JNJ Tattoo banner — used as the visual centrepiece at the top of
   the footer. Padding tightened in v12 so it sits closer to the
   affiliations row beneath. */
.footer-banner {
  /* v15 — tighter */
  padding: clamp(14px, 1.8vw, 22px) 0 clamp(6px, 1vw, 12px);
  text-align: center;
}
.footer-banner img {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 760px;
  height: auto;
}

/* v12 — Standing & Affiliations row, integrated tight under the
   JNJ tattoo banner, sharing the same warm graphite footer ground.
   Compact, premium, no big tile cards: just clean badges + tiny
   uppercase labels. */
.footer-affiliations {
  /* v15 — tighter */
  padding: 2px 0 clamp(14px, 1.8vw, 22px);
  text-align: center;
}
.footer-affiliations-label {
  font-family: 'Humanist 521 BT', 'Inter', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--brass-deep);
  font-weight: 700;
  margin: 0 0 10px;
  position: relative;
  display: inline-block;
  padding-bottom: 6px;
}
.footer-affiliations-label::after {
  content: ""; position: absolute; bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 36px; height: 1px;
  background: var(--brass);
  opacity: 0.85;
}
/* v13 — clean grid of EQUAL-HEIGHT badge tiles with consistently
   aligned labels. Two rows fall naturally on smaller screens but
   each tile keeps the same size and the labels stay on a baseline. */
.footer-affiliations-row {
  /* v16.14 — Standing & Affiliations rolled back to the softer
     v16.11/12 visual style (smaller logos, softer caption colour,
     lighter caption weight) while preserving the 12-column grid
     that keeps the strip on one row on desktop. minmax(72px, 1fr)
     stays so the 12th item never drops to a second row on
     intermediate widths. */
  list-style: none; padding: 0; margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, minmax(72px, 1fr));
  gap: 14px 10px;
  align-items: start;
  justify-items: center;
  max-width: 1216px;
}
@media (max-width: 1179px) { .footer-affiliations-row { grid-template-columns: repeat(6, minmax(72px, 1fr)); } }
@media (max-width: 760px)  { .footer-affiliations-row { grid-template-columns: repeat(4, minmax(72px, 1fr)); gap: 16px 12px; } }
@media (max-width: 460px)  { .footer-affiliations-row { grid-template-columns: repeat(3, minmax(72px, 1fr)); gap: 14px 10px; } }
.footer-affiliations-row > li {
  /* v16.14 — slim logo band restored (52 px), auto label band so
     two-line labels still fit. */
  display: grid;
  grid-template-rows: 52px auto;
  align-items: center;
  justify-items: center;
  gap: 8px;
  text-align: center;
  padding: 0;
  width: 100%;
  min-width: 0;
}
.footer-affiliations-row img {
  display: block;
  width: auto;
  max-width: 100%;
  height: 52px;
  object-fit: contain;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
.footer-affiliations-row span {
  /* v16.14 — softer caption (footer-text-mute, smaller, lighter
     weight) — the previous v16.11/12 treatment, restored. */
  font-family: 'Humanist 521 BT', 'Inter', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--footer-text-mute);
  font-weight: 600;
  line-height: 1.25;
  max-width: 14ch;
  align-self: start;
}
/* Hiscox typographic tile, same dimensions as image tiles */
.footer-affil-typo .hiscox-mark {
  width: 100%;
  max-width: 96px;
  height: 84px;
  background: var(--white);
  border: 1px solid var(--hairline-soft);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  box-shadow:
    0 1px 0 rgba(184,146,78,0.28),
    0 6px 14px rgba(20,17,13,0.05);
}
.footer-affil-typo .hiscox-mark em {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-size: 1.1rem;
  color: var(--brass-deep);
  font-weight: 500;
  letter-spacing: 0.01em;
}

.footer-top {
  /* v15 — pure white, even tighter */
  padding: clamp(16px, 2vw, 24px) 0 clamp(10px, 1.4vw, 16px);
  border-top: 1px solid var(--hairline-soft);
  background: var(--white);
}
.footer-grid {
  /* v15 — tighter column gap */
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr) 1.3fr;
  gap: 18px 26px;
}
@media (max-width: 1024px) { .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 22px 26px; } }
@media (max-width: 640px) { .footer-grid { grid-template-columns: 1fr; } }
/* v15.5 — Footer left brand column centred as one clean vertical
   stack: logo · tagline · strapline · wax stamp. */
.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.brand-logo-foot {
  /* v16.14 — footer JNJ logo widened so it visually anchors above
     the "Family-run recruitment, working internationally since 1977"
     line. Sized by width (auto height) so the aspect ratio is kept
     exactly and the mark never blurs. The mark spans roughly the
     width of the tagline beneath it. */
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
  margin: 0 auto 12px;
}
@media (max-width: 720px) {
  .brand-logo-foot { max-width: 260px; }
}
.footer-tag {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 0.9rem;
  color: var(--brass-deep);
  margin: 0 auto 6px;
  max-width: 36ch;
  line-height: 1.4;
  text-align: center;
}
.footer-tagline {
  font-size: 0.8rem;
  color: var(--footer-text);
  margin: 0 auto;
  letter-spacing: 0.06em;
  font-weight: 600;
  text-align: center;
}
.footer-tagline em {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  color: var(--brass-deep);
  font-weight: 400;
}
.footer-h {
  font-family: 'Humanist 521 BT', 'Inter', sans-serif;
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--brass-deep); margin: 0 0 6px;
  position: relative; padding-bottom: 4px;
}
.footer-h::after {
  content: ""; position: absolute; bottom: 0; left: 0;
  width: 24px; height: 1px;
  background: var(--brass);
}
.footer-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.footer-list a {
  font-size: 0.85rem;
  color: var(--footer-text);
  opacity: 0.86;
  transition: color 200ms ease, opacity 200ms ease, padding-left 200ms ease;
}
.footer-list a:hover { color: var(--red); opacity: 1; padding-left: 3px; }
.footer-contact address {
  font-size: 0.85rem; font-style: normal; line-height: 1.55;
  color: var(--footer-text); opacity: 0.86;
}
.footer-contact address a { color: var(--footer-text); border-bottom: 1px solid rgba(201,40,42,0.32); }
.footer-contact address a:hover { color: var(--red); border-bottom-color: var(--red); }

.footer-affil {
  border-top: 1px solid rgba(216,176,108,0.18);
  background: rgba(255,250,235,0.04);
  padding: 36px 0 40px;
  text-align: center;
}
.footer-affil-label {
  font-family: 'Humanist 521 BT', 'Inter', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--brass-soft);
  margin: 0 0 24px;
  font-weight: 700;
}
.footer-affil-row {
  list-style: none; padding: 0; margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 22px;
  max-width: 920px;
  align-items: stretch;
}
@media (max-width: 1024px) { .footer-affil-row { grid-template-columns: repeat(3, 1fr); gap: 28px 22px; } }
@media (max-width: 540px) { .footer-affil-row { grid-template-columns: repeat(2, 1fr); gap: 24px 18px; } }
.footer-affil-row > li {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  text-align: center;
}
.affil-tile {
  width: 84px; height: 84px;
  background: var(--white);
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  padding: 10px;
  position: relative;
  box-shadow: 0 1px 0 rgba(184,146,78,0.35), 0 6px 18px rgba(0,0,0,0.18);
}
.affil-tile img { max-width: 100%; max-height: 100%; object-fit: contain; }
.footer-affil-row > li > span {
  font-family: 'Humanist 521 BT', 'Inter', sans-serif;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--footer-text-mute);
  font-weight: 600;
  line-height: 1.4;
  max-width: 14ch;
}

.footer-compliance {
  /* v16.3 — four-line stacked compliance block, all lines centred
     directly under each other, no left/right drift. Insured by
     Hiscox stays on the same compliance line as the REC date so it
     doesn't wrap onto its own line. */
  border-top: 1px solid var(--hairline-soft);
  background: var(--white);
  padding: 12px 0;
  font-size: 0.74rem; color: var(--footer-text-mute);
  line-height: 1.55;
  text-align: center;
}
.footer-compliance .container { text-align: center; }
.footer-compliance p {
  margin: 0 auto 2px;
  max-width: 1000px;
  text-align: center;
  display: block;
}
.footer-compliance .compliance-line {
  /* v16.7 — keep the full compliance sentence (ISO + REC + Hiscox)
     on one centred line on desktop. Allow it to wrap naturally on
     narrower viewports. */
  margin: 0 auto 6px;
  max-width: none;
  white-space: nowrap;
  overflow: visible;
  font-size: 0.72rem;
  letter-spacing: -0.002em;
}
@media (max-width: 1100px) {
  .footer-compliance .compliance-line {
    white-space: normal;
    max-width: 980px;
    font-size: 0.74rem;
  }
}
.footer-compliance .legal {
  margin: 0 auto 2px;
  max-width: 760px;
  text-align: center;
}
.footer-compliance .legal:last-child { margin-bottom: 0; }

.footer-utility {
  /* v15 — pure white, even tighter */
  background: var(--white);
  border-top: 1px solid var(--hairline-soft);
  padding: 5px 0;
}
.footer-utility .container { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.footer-utility ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 22px; flex-wrap: wrap; }
.footer-utility a { font-size: 0.74rem; color: var(--footer-text-mute); letter-spacing: 0.06em; }
.footer-utility a:hover { color: var(--red); }
.footer-utility .muted { font-size: 0.72rem; color: var(--footer-text-mute); opacity: 0.8; }

/* =============================================================
   MOBILE refinements
   ============================================================= */
@media (max-width: 720px) {
  :root { --gutter: 24px; }
  .section { padding: 64px 0; }
  .hero { padding: 56px 0 64px; }
  .hero-grid { gap: 40px; }
  .hero-h1 { letter-spacing: -0.02em; }
  .hero-lead { font-size: 1rem; }
  .hero-strap { font-size: 1rem; margin-bottom: 24px; }
  .hero-proof { padding-top: 22px; }
  .hv-side { right: auto; }
  .section-head { margin-bottom: 36px; }
  .ai-head { margin-bottom: 36px; }
  .founder-head { margin-bottom: 36px; }
  .founder-portrait { max-width: 360px; }
  .footer-top { padding: 48px 0 32px; }
  .footer-affil { padding: 28px 0; }
}
@media (max-width: 480px) {
  .hero { padding: 48px 0 56px; }
  .section { padding: 56px 0; }
  .hero-ctas .btn { flex: 1 1 100%; }
  .brand-suffix { display: none; }
}

/* Subtle fade-in */
.fade-in {
  opacity: 0; transform: translateY(12px);
  transition: opacity 650ms ease, transform 650ms ease;
}
.fade-in.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .fade-in { opacity: 1; transform: none; transition: none; }
}

/* =============================================================
   v15.3 — Footer 49 Years badge + centred compliance + wider
   header CTA + floating back-to-top button.
   ============================================================= */

/* Task 1 — 49 Years badge under the Contact column */
.footer-contact-badge {
  margin-top: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.footer-contact-badge img {
  display: block;
  width: auto;
  height: auto;
  max-width: 140px;
  max-height: 180px;
  object-fit: contain;        /* preserve aspect, no stretch, no crop */
  /* respect transparency */
}
@media (max-width: 640px) {
  .footer-contact-badge { margin-top: 10px; }
  .footer-contact-badge img { max-width: 120px; max-height: 160px; }
}

/* Task 2 — centre the compliance + legal text */
.footer-compliance {
  text-align: center;
}
.footer-compliance p {
  margin-left: auto;
  margin-right: auto;
  max-width: 80ch;
}
.footer-compliance .legal {
  max-width: 92ch;
}

/* Task 3 — wider header Hire Talent CTA (more horizontal padding,
   font-size unchanged, height kept tasteful and aligned with the
   88px nav row). */
.btn-primary-pill {
  padding-left: 40px;
  padding-right: 40px;
  height: 44px;               /* slightly shorter than 48px so it sits cleanly inside the 88px header row */
}

/* Task 4 — floating back-to-top button.
   Hidden by default; shown when JS adds .is-visible. Bottom-right,
   small, premium, matches the dark/gold palette. */
.back-to-top {
  position: fixed;
  right: clamp(16px, 2vw, 28px);
  bottom: clamp(16px, 2vw, 28px);
  /* v16.10 — high z-index so the floating button sits above every
     section, slider control, header and preview overlay. */
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px 0 12px;
  height: 44px;
  min-width: 44px;
  background: linear-gradient(180deg, #2F6F4F 0%, #1F4E38 100%);
  color: var(--white);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-family: 'Humanist 521 BT', 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1;
  box-shadow:
    0 12px 24px rgba(0,0,0,0.36),
    0 1px 0 rgba(255,255,255,0.18) inset,
    0 -1px 0 rgba(0,0,0,0.30) inset;
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease, background 220ms ease;
}
.back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.back-to-top:hover {
  background: linear-gradient(180deg, #285E45 0%, #163B2A 100%);
}
.back-to-top:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.back-to-top[hidden] { display: none; }
.back-to-top-arrow {
  display: inline-flex;
  width: 18px; height: 18px;
  color: var(--gold-soft);
}
.back-to-top-arrow svg { width: 100%; height: 100%; }
.back-to-top-label {
  display: inline-block;
  color: var(--white);
}
@media (max-width: 480px) {
  .back-to-top {
    padding: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
  }
  .back-to-top-label { display: none; }
  .back-to-top-arrow { margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .back-to-top { transition: opacity 100ms linear; }
  .back-to-top.is-visible { transform: none; }
}

/* =============================================================
   v15.4 — Wax stamp inside the left footer brand column.
   The v15.3 .footer-contact-badge rule remains in the file but its
   markup has been removed from index.html, so it is now inert.
   ============================================================= */
.footer-brand-wax {
  /* v15.5 — centred at every breakpoint (the whole footer-brand
     column is now a centred vertical stack). */
  margin-top: 14px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.footer-brand-wax img {
  width: clamp(86px, 7vw, 120px);
  height: auto;
  object-fit: contain;
  display: block;
}

/* v15.5 — Black 49-years badge under the Contact address.
   Centred within the Contact column, modest size, transparent. */
/* v15.8 — Belt-and-braces centring for the 49-years badge inside the
   Contact column. Block container with text-align center + an
   inline-block image with auto margins is the most reliable way to
   centre an asset inside a block-level container, regardless of any
   inherited rules from the parent .footer-col. */
.footer-contact-years {
  /* v16.14 — the stamp now sits CENTRED inside the Contact column
     directly under the address text block (under the "Mon-Fri · UK
     business hours." line). The address itself is centred in this
     pass too (see .footer-contact below), so the stamp's centre-line
     aligns with the centre of the address text. */
  margin: 18px auto 0;
  max-width: 260px;
  display: block;
  text-align: center;
  line-height: 0;
}
.footer-contact-years img {
  display: inline-block;
  margin: 0 auto;
  width: clamp(96px, 7vw, 120px);
  height: auto;
  object-fit: contain;
  background: transparent;
  border: 0;
}
/* Anchor the Contact column to a centred axis so the address text
   and the 49-year stamp share the same vertical centreline on
   desktop AND mobile. Restricted to the Contact column only so the
   other footer columns (Firm, Expertise, Sectors) remain
   left-aligned. */
.footer-contact { text-align: center; }
.footer-contact .footer-h { text-align: center; }
.footer-contact address { text-align: center; }

/* v16.6 — the wide AI & Talent Intelligence banner that used to sit
   between the eyebrow and the H2 stack was removed (markup + CSS
   block deleted) so the section reads as eyebrow → H2 → lead →
   six cards with no orphan visual in between. */

/* =============================================================
   v16 content integration — minimal CSS for two new blocks.
   No design-token / colour / layout changes elsewhere.
   ============================================================= */

/* Hero commercial line — italic serif, brand red, between H1 and lead */
.hero-commercial {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  color: var(--red);
  letter-spacing: -0.005em;
  line-height: 1.25;
  margin: -8px 0 18px;          /* pull up tight under the H1 */
  max-width: 32ch;
}

/* Client Recommendations placeholder section */
.section-recommendations {
  background: var(--white);
  border-top: 1px solid var(--hairline-soft);
  border-bottom: 1px solid var(--hairline-soft);
  padding-top: clamp(44px, 5vw, 72px);
  padding-bottom: clamp(44px, 5vw, 72px);
}
.section-recommendations .section-head-center { margin-bottom: 28px; }

.recs-grid {
  list-style: none; padding: 0; margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  max-width: 1180px;
}
@media (max-width: 960px) { .recs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .recs-grid { grid-template-columns: 1fr; } }

.rec-card {
  background: var(--ivory-soft);
  border: 1px solid var(--hairline-soft);
  padding: 24px 26px 20px;
  display: flex; flex-direction: column;
  text-align: left;
  position: relative;
  min-height: 0;
  transition: background 220ms ease, border-color 220ms ease;
}
.rec-card::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 36px; height: 2px;
  background: var(--brass);
  opacity: 0.85;
}
.rec-quote {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-size: 1.0625rem;
  color: var(--graphite);
  margin: 0 0 14px;
  line-height: 1.45;
  letter-spacing: -0.005em;
}
.rec-meta {
  margin: auto 0 0;
  padding-top: 10px;
  font-family: 'Humanist 521 BT', 'Inter', sans-serif;
  font-size: 0.66rem;
  color: var(--stone-mute);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  border-top: 1px solid var(--hairline);
}
.rec-card-placeholder { opacity: 0.92; }

/* =============================================================
   v16.2 — Our Expertise heading + lion accent.
   Two-line heading via .svc-h2-line spans so the "Three" word
   never drops awkwardly on its own. The lion sits in the right
   column, base-aligned with the services grid border below.
   ============================================================= */
.section-head-with-lion {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: end;
  margin-bottom: 0;
}
.section-head-with-lion .svc-head-text {
  padding-bottom: 8px;
}
.section-head-with-lion h2 { margin-bottom: 16px; }
.section-head-with-lion .lead-aside {
  font-size: 1rem;
  color: var(--graphite-soft);
  max-width: 58ch;
  margin: 0;
  line-height: 1.55;
}
.svc-h2 {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.svc-h2-line {
  display: block;
  line-height: 1.08;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .svc-h2-line { white-space: normal; }
}
.svc-lion {
  margin: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  /* The lion's base lines up with the top edge of the services
     grid below. The grid sits directly under this header with no
     extra top margin, so the figure's base = the grid's top. */
}
.svc-lion img {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 6px 18px rgba(20,17,13,0.10));
}
@media (max-width: 1100px) {
  .svc-lion img { max-width: 340px; }
}
@media (max-width: 900px) {
  .section-head-with-lion {
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: start;
    margin-bottom: 24px;
  }
  .svc-lion { order: -1; justify-content: flex-start; align-items: center; }
  .svc-lion img { max-width: 220px; }
  .svc-h2-line { white-space: normal; }
}

/* v16.2 — Sectors heading: two stacked lines. Primary "10 Sectors"
   stays at h2 size, "Sector-Specialist Consultants" sits below at
   a slightly smaller editorial weight. Layout, sector grid and lead
   paragraph unchanged. */
.sec-h2 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sec-h2-line { display: block; line-height: 1.08; }
.sec-h2-sub {
  font-size: 0.7em;
  line-height: 1.15;
  letter-spacing: -0.012em;
}

/* =============================================================
   v16.1 visual-polish — Heritage / Founder headline typography.
   Two lines: "Founded In 1977" and "Family-Owned Today".
   "Founded In" + "Family-Owned" remain at the base serif-h2 size
   (already set on .founder-h2). The year "1977" and the word
   "Today" sit on the same line, larger, for premium editorial
   emphasis. No full stops, brass-italic colour preserved on the
   second line. Numbers ride a touch lower so their baselines
   feel anchored next to the smaller words.
   ============================================================= */
.founder-h2-stacked {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.founder-h2-line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: 0.32em;
}
.founder-h2-big {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 400;
  font-size: 1.55em;
  line-height: 0.92;
  letter-spacing: -0.022em;
  color: var(--graphite);
}
.founder-h2-big-italic {
  font-style: italic;
  color: var(--brass);
}
@media (max-width: 720px) {
  .founder-h2-big { font-size: 1.4em; }
}

/* =============================================================
   v16.2 — Beta pill (header)
   Sits between the nav links and the Hire Talent CTA. Small,
   subtle, premium. Brass-deep wash on a cream surface with a
   brass border; reads as intentional, not as an error label.
   Hidden on the smallest viewports so it doesn't crowd the burger
   menu — the Hire Talent CTA stays untouched.
   ============================================================= */
.beta-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0 10px;
  border: 1px solid var(--brass);
  background: rgba(216, 176, 108, 0.10);
  color: var(--brass-deep);
  font-family: 'Humanist 521 BT', 'Inter', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  border-radius: 100px;
  margin-right: 14px;
  cursor: default;
  user-select: none;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .beta-pill { display: none; }
}

/* =============================================================
   v16.2 — Shared slider primitive (Selected Work + Client
   Recommendations). Horizontal scroll with snap, accessible
   prev/next buttons. No external library. Keyboard focus visible
   on the scrollable track; controls hidden on widths where the
   full set already fits.
   ============================================================= */
.case-slider,
.recs-slider {
  position: relative;
  margin-top: 28px;
  /* v16.3 — clip partial cards: viewport hides any card that isn't
     in a fully-aligned slide. Inner padding gives focus outlines
     room to breathe. */
  overflow: hidden;
  padding: 4px 0 12px;
}
.case-track,
.recs-track {
  /* v16.3 — flex track with exact card widths so 3 (or 2, or 1) full
     cards always fit and there's no half-card peeking at the edge. */
  --slider-gap: 16px;
  --slider-per-view: 3;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: var(--slider-gap);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  padding: 0;
}
.case-track::-webkit-scrollbar,
.recs-track::-webkit-scrollbar { display: none; }
.case-track > .case-card,
.recs-track > .rec-card {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  flex: 0 0 calc((100% - (var(--slider-per-view) - 1) * var(--slider-gap)) / var(--slider-per-view));
  min-width: 0;
  box-sizing: border-box;
}
.case-track:focus-visible,
.recs-track:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 4px;
}

@media (max-width: 1024px) {
  .case-track,
  .recs-track { --slider-per-view: 2; }
}
@media (max-width: 640px) {
  .case-track,
  .recs-track { --slider-per-view: 1; }
}

/* Prev / next control row */
.slider-controls {
  display: flex; gap: 12px;
  justify-content: center;
  margin-top: 22px;
}
.slider-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: var(--white);
  color: var(--graphite);
  font-size: 1.1rem;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 220ms ease, color 220ms ease, border-color 220ms ease, transform 220ms ease;
}
.slider-btn:hover {
  background: var(--graphite);
  color: var(--white);
  border-color: var(--graphite);
  transform: translateY(-1px);
}
.slider-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
  background: var(--white);
  color: var(--graphite);
  border-color: var(--hairline);
}

/* =============================================================
   v16.2 — Recommendations slider: card structure preserved from
   the v16.0 placeholder but laid out inside the horizontal track.
   ============================================================= */
.recs-h2-line { display: inline; white-space: normal; }
@media (min-width: 900px) {
  .recs-h2-line { white-space: nowrap; }
}
.rec-context {
  font-family: 'Humanist 521 BT', 'Inter', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 10px;
  line-height: 1.35;
}

/* =============================================================
   v16.11 — Menu close (X) button + DUNS tile two-line label.
   ============================================================= */

/* Close button is hidden by default; only shown when the slide-in
   primary-nav is in .open state (mobile / tablet ≤ 1100 px). On
   desktop the nav is inline-visible so the close button never
   appears. */
.nav-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 999px;
  background: var(--graphite);
  color: var(--white);
  font-size: 1.6rem;
  line-height: 1;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10000;
  box-shadow: 0 8px 18px rgba(0,0,0,0.18);
  transition: background 200ms ease, transform 180ms ease;
}
.nav-close:hover { background: var(--red); transform: scale(1.04); }
.nav-close:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.nav-close span { display: inline-block; transform: translateY(-1px); }
.primary-nav.open .nav-close { display: inline-flex; }

/* Dim outside-overlay when the slide-in menu is open. Sits behind
   the nav panel; clicking it closes the menu (JS). */
.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 17, 13, 0.42);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease;
  z-index: 49;
}
.nav-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}
@media (min-width: 1101px) {
  /* Desktop: nav is inline; never use overlay or close-X. */
  .nav-overlay { display: none !important; }
  .nav-close { display: none !important; }
}

/* DUNS affiliation tile · two-line label (D-U-N-S Registered + the
   No. 211438591). v16.14 — matched to the softer caption colour
   restored on the row. */
.footer-affiliations-row li span small {
  display: block;
  font-size: 0.78em;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--footer-text-mute);
  margin-top: 2px;
  font-weight: 600;
}

/* =============================================================
   v16.9 — Mobile refinement pass.
   All rules below are scoped inside @media queries so the desktop
   layout is untouched. Tasks T1–T6 from the v16.9 brief.
   ============================================================= */

/* ----- T1 · Sector tiles smaller on mobile ----- */
@media (max-width: 720px) {
  .ind-grid-tiles {
    /* Override the legacy 1-col @ 420px rule for tile-style cards;
       keep 2 columns down to the smallest viewport so each card
       stays compact instead of becoming a full-width tower. */
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px;
    margin-top: 24px;
  }
  .ind-grid-tiles .ind-cell {
    padding: 12px;
    aspect-ratio: 1 / 1;
    max-height: 220px;
  }
  .ind-grid-tiles .ind-overlay {
    background:
      linear-gradient(180deg, rgba(20,17,13,0) 30%, rgba(20,17,13,0.78) 75%, rgba(20,17,13,0.92) 100%);
  }
  .ind-grid-tiles .ind-num em { font-size: 0.95rem; }
  .ind-grid-tiles .ind-name {
    font-size: 0.86rem;
    max-width: 18ch;
    text-shadow: 0 1px 10px rgba(0,0,0,0.42);
  }
}
@media (max-width: 420px) {
  .ind-grid-tiles .ind-cell { padding: 10px; max-height: 180px; }
  .ind-grid-tiles .ind-name { font-size: 0.8rem; }
}

/* ----- T2 · Lion floats to the top-right of the heading on mobile ----- */
@media (max-width: 900px) {
  .section-head-with-lion {
    position: relative;
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: start;
    margin-bottom: 28px;
  }
  .section-head-with-lion .svc-head-text { padding-right: 130px; }
  .section-head-with-lion .svc-lion {
    /* Sits at the top-right corner of the heading text block, near
       the "Most Clients Use Two Or Three" line. Order override
       cancels the previous "lion above text" rule. */
    order: 0;
    position: absolute;
    top: 4px;
    right: 0;
    margin: 0;
    justify-content: flex-end;
    align-items: flex-start;
    width: 120px;
    pointer-events: none;
  }
  .section-head-with-lion .svc-lion img {
    max-width: 120px;
    width: 100%;
    height: auto;
  }
}
@media (max-width: 480px) {
  .section-head-with-lion .svc-head-text { padding-right: 96px; }
  .section-head-with-lion .svc-lion { width: 92px; top: 6px; }
  .section-head-with-lion .svc-lion img { max-width: 92px; }
}

/* ----- T3 · Hero image more visible behind text on mobile ----- */
@media (max-width: 1100px) {
  /* Tablet · scale the artwork up so the globe and figures read
     behind the copy without losing readability. */
  .hv-image { opacity: 0.55; }
  .hv-figure { transform: scale(1.35); transform-origin: center 38%; }
  .hv-readability-veil {
    background:
      linear-gradient(180deg, rgba(255,255,255,0.62) 0%, rgba(255,255,255,0.38) 45%, rgba(255,255,255,0.30) 100%);
  }
}
@media (max-width: 640px) {
  /* Mobile · image scaled larger still and held a notch brighter
     so it reads clearly behind the stacked copy. The white veil is
     stronger across the bottom where the CTA buttons and proof
     points sit, so they remain fully legible / tappable. */
  .hv-image { opacity: 0.60; }
  .hv-figure { transform: scale(1.8); transform-origin: center 32%; }
  .hv-readability-veil {
    background:
      linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.32) 35%, rgba(255,255,255,0.46) 70%, rgba(255,255,255,0.72) 100%);
  }
}

/* ----- T4 · Founder + Leadership portraits smaller on mobile ----- */
@media (max-width: 720px) {
  .founder-portrait { max-width: 260px; }
  .founder-mat { padding: 8px; }
  .founder-mat img { aspect-ratio: 4 / 5; }
  .founder-portrait figcaption { padding: 10px 16px 12px; }

  /* Leadership · keep 2 columns but cap each card so faces stay
     premium and the section doesn't tower vertically. */
  .people-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
  }
  .person-photo { max-width: 200px; margin: 0 auto; }
  .person-meta { padding-top: 8px; }
}
@media (max-width: 420px) {
  /* Override the legacy 1-col leadership rule to stay 2-col on
     small phones so each portrait stays compact and the page
     scrolls less. */
  .people-row {
    grid-template-columns: repeat(2, 1fr) !important;
    max-width: 360px;
    gap: 14px;
  }
  .person-photo { max-width: 160px; }
  .founder-portrait { max-width: 220px; }
}

/* ----- T5 · 49-year stamp centred under the Contact block on mobile ----- */
@media (max-width: 640px) {
  .footer-contact-years {
    margin: 16px auto 0;
    max-width: 260px;
    text-align: center;
  }
  .footer-contact { text-align: center; }
  .footer-contact .footer-h { text-align: center; }
  .footer-contact address { text-align: center; }
}

/* ----- v16.11 · Floating "Back to home section" button now shows
   on desktop, tablet AND mobile (the v16.9 desktop-hide rule was
   removed per the v16.11 brief). The button's premium green pill
   style, scroll-triggered visibility, smooth scroll to #home and
   reduced-motion handling are kept as-is in the earlier v15.3
   CSS block + script.js handler. */