/*  Richard M Stone — main.css
    Brand: Navy #000A26 · Tan #97572A · White #FFFFFF · Inter
    Tone: clean, calm, minimal, considered, premium. Restraint over noise.
    Motion: punctuation only — fade-ins, no parallax. Respects prefers-reduced-motion.
    --------------------------------------------------------------- */

/* Manrope — modern geometric sans with humanist warmth. Used for the
   signature pull-quote in all-caps. */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  --color-primary: #000A26;      /* navy */
  --color-secondary: #0a1638;    /* near-navy elevation */
  --color-accent: #97572A;       /* tan */
  --color-accent-light: #b8754a;
  --color-tan-gradient: linear-gradient(135deg, #79451E 0%, #97572A 55%, #975721 100%);
  --color-tan-radial:   radial-gradient(circle at 35% 35%, #b8754a 0%, #97572A 40%, #975721 70%, #79451E 100%);
  --color-white: #ffffff;
  --color-paper: #f6f3ee;        /* warm off-white for light sections */
  --color-rule: rgba(255,255,255,.14);
  --color-rule-dark: rgba(0,10,38,.12);
  --color-mute: #6b6f7a;

  --color-button-bg: #97572A;
  --color-button-text: #ffffff;
  --color-button-hover-bg: #79451E;
  --color-button-hover-text: #ffffff;
  --color-link: #97572A;
  --color-link-hover: #79451E;

  /* Fallbacks if Theme Options → Typography hasn't loaded yet (inc/customizer-output.php overrides at runtime). */
  --font-body-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-heading-family: 'Inter', system-ui, -apple-system, sans-serif;
  --font-script-family: 'Allura', 'Dancing Script', cursive;

  /* Back-compat aliases — let existing selectors keep using var(--font-h{N}-family). */
  --font-h1-family: var(--font-heading-family);
  --font-h2-family: var(--font-heading-family);
  --font-h3-family: var(--font-heading-family);
  --font-h4-family: var(--font-heading-family);
  --font-h5-family: var(--font-heading-family);
  --font-h6-family: var(--font-heading-family);

  --font-h1-size: clamp(40px, 6vw, 88px);
  --font-h1-weight: 700;
  --font-h1-line-height: 1.05;
  --font-h2-size: clamp(28px, 3.6vw, 48px);
  --font-h2-weight: 700;
  --font-h2-line-height: 1.1;
  --font-h3-size: clamp(20px, 1.6vw, 26px);
  --font-h3-weight: 600;
  --font-body-size: 17px;
  --font-body-line-height: 1.65;
  --font-label-size: 12px;
  --font-label-spacing: .22em;

  --gutter: clamp(20px, 4vw, 72px);
  --max: 1280px;
  --max-prose: 640px;
  --radius: 999px;
  --header-h: 80px;
  --ease: cubic-bezier(.2,.7,.2,1);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-body-family);
  font-size: var(--font-body-size);
  line-height: var(--font-body-line-height);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'ss01','cv11';
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-link); text-decoration: none; transition: color .2s var(--ease); }
a:hover, a:focus-visible { color: var(--color-link-hover); }
a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4, h5, h6 { margin: 0 0 .5em; font-family: var(--font-heading-family); letter-spacing: -.005em; }
p { margin: 0 0 1em; }

/* a11y */
.screen-reader-text {
  border: 0; clip: rect(1px,1px,1px,1px); -webkit-clip-path: inset(50%); clip-path: inset(50%);
  height: 1px; width: 1px; overflow: hidden; position: absolute !important; word-wrap: normal !important;
}
.skip-link { position: absolute; top: -100px; left: 0; background: var(--color-accent); color: var(--color-white); padding: 8px 12px; z-index: 9999; }
.skip-link:focus { top: 0; }

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

.label {
  display: inline-block;
  font-size: var(--font-label-size);
  letter-spacing: var(--font-label-spacing);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-accent);
}

/* ---------- Header — two distinct positioning modes ----------
   1. Default: position: absolute over the hero. Scrolls away with the page,
      transparent at all times — no background change on scroll.
   2. Condensed (scrolling up past the hero): position: fixed at the top,
      navy bar with inline menu. Slides in via translateY transition. */
.site-header {
  position: absolute; inset: 0 0 auto 0;
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(20px, 4vw, 48px);
  z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
}
.site-header--condensed {
  position: fixed;
  background: rgba(0,10,38,.96);
  backdrop-filter: saturate(120%) blur(12px);
  -webkit-backdrop-filter: saturate(120%) blur(12px);
  border-bottom-color: var(--color-rule);
  /* Slide in from above when the condensed bar appears. */
  animation: rmsHeaderDrop .35s var(--ease);
}
@keyframes rmsHeaderDrop {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}

/* ---- Inline nav (visible only in condensed state, desktop only) ---- */
.site-header__nav {
  display: none;
  flex: 1;
  justify-content: center;
}
.site-header__menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.5vw, 36px);
}
.site-header__menu a {
  color: var(--color-white);
  /* Modern geometric sans for the sticky-header nav — distinct from the
     Inter elsewhere, gives the condensed bar a confident weight. */
  font-family: 'Manrope', var(--font-heading-family), system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 8px 2px;
  transition: color .2s var(--ease);
}
.site-header__menu a:hover,
.site-header__menu .current-menu-item > a {
  color: var(--color-accent);
}
/* Sign-up CTA — hidden by default, only shown in the condensed sticky header.
   Compact size + lighter bronze border/text (--color-accent-light, #b8754a)
   so it sits gently on the navy bar without competing with the bronze H1
   numbers further down the page. */
.site-header .site-header__cta {
  display: none;
  padding: 10px 22px;
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--color-accent-light);
  border-color: var(--color-accent-light);
}
.site-header .site-header__cta:hover,
.site-header .site-header__cta:focus-visible {
  color: var(--color-white);
  border-color: var(--color-accent-light);
}
.site-header .site-header__cta::before {
  /* Reduce the hover-fill saturation so the lighter button still feels
     consistent when it fills in. */
  background: var(--color-accent-light);
}

/* Reveal nav + Sign Up CTA on desktop only when the header is condensed. */
@media (min-width: 900px) {
  .site-header--condensed .site-header__nav { display: flex; }
  .site-header--condensed .site-header__cta { display: inline-flex; }
  .site-header--condensed .nav-toggle { display: none; }
}
.site-header__brand {
  color: var(--color-white);
  font-family: var(--font-heading-family);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: .02em;
  text-decoration: none;
}
.site-header__brand:hover { color: var(--color-white); }
.site-header__wordmark { display: inline-block; }
.site-header__brand img { max-height: 72px; width: auto; display: block; }
.site-header__logo {
  /* White wordmark on the navy/hero header. Subtle shadow keeps it legible against
     the brightest pixels of the hero photo (e.g. the marble fireplace highlights). */
  filter: drop-shadow(0 1px 1px rgba(0,10,38,.35));
}

.nav-toggle {
  width: 72px; height: 72px;
  display: inline-flex; flex-direction: column;
  /* Closed state: both bars share the same right edge. The shorter bottom
     bar therefore reads as indented on the left. */
  align-items: flex-end;
  justify-content: center;
  gap: 11px;
  background: transparent; border: 0; padding: 0;
  color: var(--color-white);
}
.nav-toggle__bar {
  /* Both bars share an identical 3px thickness (was 2.5px which can
     antialias unevenly between rows). */
  height: 3px;
  background: currentColor;
  transition:
    transform .25s var(--ease),
    width .3s var(--ease),
    opacity .2s var(--ease);
}
/* Asymmetric closed state — top bar longer than the bottom for a more
   distinct, modern wordmark feel. */
.nav-toggle__bar:first-child { width: 48px; }
.nav-toggle__bar:last-child  { width: 32px; }

/* X colour when the drawer is open. Drawer is navy now, so the X must be
   light (was --color-primary which made it invisible on its own background). */
.nav-toggle[aria-expanded="true"] { color: var(--color-white); align-items: center; }
/* Bars normalise to equal width when forming the X so the close icon
   reads as a clean cross instead of two unequal slashes. */
.nav-toggle[aria-expanded="true"] .nav-toggle__bar { width: 40px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:first-child { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:last-child  { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Overlay menu ----------
   Drawer panel that slides in from the right and covers 40% of the viewport
   (full width on mobile). A dim scrim covers the remaining page so the rest
   of the site is still partly visible behind it. */
.overlay-menu {
  position: fixed; inset: 0;
  z-index: 40;
  /* Scrim — translucent navy curtain that fades in with the drawer. */
  background: rgba(0,10,38,.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .35s var(--ease), visibility .35s var(--ease);
}
.overlay-menu[aria-hidden="false"] { opacity: 1; visibility: visible; pointer-events: auto; }

.overlay-menu__inner {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 40%;
  min-width: 320px;
  /* Navy base + soft bronze glow drifting up from the lower-right so the
     drawer doesn't read as a flat slab. */
  background:
    radial-gradient(70% 55% at 100% 100%, rgba(184,117,74,.22) 0%, rgba(184,117,74,.08) 35%, rgba(0,10,38,0) 70%),
    radial-gradient(45% 40% at 110% 60%, rgba(184,117,74,.12) 0%, rgba(0,10,38,0) 60%),
    var(--color-primary);
  color: var(--color-white);
  display: flex; align-items: center; justify-content: flex-start;
  /* More breathing room on the left so the big menu items don't crowd the
     drawer edge. Right padding stays comfortable. */
  padding: var(--header-h) clamp(40px, 5vw, 72px) var(--header-h) clamp(56px, 7vw, 96px);
  /* Slide in from the right edge. */
  transform: translateX(100%);
  transition: transform .4s cubic-bezier(.65,0,.2,1);
  box-shadow: -30px 0 60px rgba(0,0,0,.4);
}
.overlay-menu[aria-hidden="false"] .overlay-menu__inner { transform: translateX(0); }

@media (max-width: 899px) {
  .overlay-menu__inner { width: 100%; min-width: 0; }
}
.overlay-menu__nav  { display: grid; gap: clamp(28px, 4vw, 48px); justify-items: stretch; width: 100%; }
.overlay-menu__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; text-align: left; }

/* Entrance stagger — each menu item slides in from the right and fades
   in ~70ms after the previous one as the drawer opens. */
.overlay-menu__list li {
  opacity: 0;
  transform: translateX(40px);
  transition:
    opacity .55s cubic-bezier(.2,.7,.2,1),
    transform .55s cubic-bezier(.2,.7,.2,1);
  transition-delay: 0ms;
}
.overlay-menu[aria-hidden="false"] .overlay-menu__list li {
  opacity: 1;
  transform: translateX(0);
  /* --i is set per-item in PHP for the fallback list. wp_nav_menu items
     fall back to the :nth-child rules below. */
  transition-delay: calc(var(--i, 0) * 70ms + 220ms);
}
.overlay-menu[aria-hidden="false"] .overlay-menu__list li:nth-child(1) { transition-delay: 220ms; }
.overlay-menu[aria-hidden="false"] .overlay-menu__list li:nth-child(2) { transition-delay: 290ms; }
.overlay-menu[aria-hidden="false"] .overlay-menu__list li:nth-child(3) { transition-delay: 360ms; }
.overlay-menu[aria-hidden="false"] .overlay-menu__list li:nth-child(4) { transition-delay: 430ms; }
.overlay-menu[aria-hidden="false"] .overlay-menu__list li:nth-child(5) { transition-delay: 500ms; }
.overlay-menu[aria-hidden="false"] .overlay-menu__list li:nth-child(6) { transition-delay: 570ms; }
.overlay-menu[aria-hidden="false"] .overlay-menu__list li:nth-child(7) { transition-delay: 640ms; }
.overlay-menu[aria-hidden="false"] .overlay-menu__list li:nth-child(8) { transition-delay: 710ms; }

/* Big modern Sign Up CTA — appears last in the entrance sequence. */
.overlay-menu__cta {
  justify-self: start;
  padding: 22px 36px !important;
  font-size: 14px !important;
  letter-spacing: .16em !important;
  gap: 16px;
  margin-top: clamp(16px, 3vw, 32px);
  border-color: var(--color-accent-light);
  color: var(--color-accent-light);
  opacity: 0;
  transform: translateY(20px);
  /* Slide in from below after menu items finish staggering. */
  transition:
    opacity .55s var(--ease),
    transform .55s var(--ease),
    border-color .25s var(--ease);
}
.overlay-menu[aria-hidden="false"] .overlay-menu__cta {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 900ms;
}
/* Snap the text to white the instant the user hovers — no delay — so the
   label is never the dark bronze when the gradient sweeps in behind it. */
.overlay-menu__cta:hover,
.overlay-menu__cta:focus-visible {
  color: var(--color-white) !important;
  transition: color 0s !important;
}
.overlay-menu__cta-arrow {
  display: inline-block;
  transition: transform .3s var(--ease);
}
.overlay-menu__cta:hover .overlay-menu__cta-arrow,
.overlay-menu__cta:focus-visible .overlay-menu__cta-arrow {
  transform: translateX(6px);
}

.overlay-menu__list a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 4px 0;
  /* Light text on the navy drawer. */
  color: var(--color-white);
  font-family: var(--font-heading-family);
  font-weight: 800;
  font-size: clamp(34px, 4.8vw, 64px);
  line-height: 1.0;
  letter-spacing: -.025em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color .25s var(--ease), padding-left .35s cubic-bezier(.2,.7,.2,1);
}
/* Bronze indicator bar that slides in from the left on hover/focus.
   Lighter bronze for better contrast on the navy background. */
.overlay-menu__list a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 2px;
  background: var(--color-accent-light);
  transform: translateY(-50%);
  transition: width .35s cubic-bezier(.2,.7,.2,1);
}
.overlay-menu__list a:hover,
.overlay-menu__list a:focus-visible,
.overlay-menu__list .current-menu-item > a {
  /* Lighter bronze on hover so it reads against the navy. */
  color: var(--color-accent-light);
  padding-left: 56px;
}
.overlay-menu__list a:hover::before,
.overlay-menu__list a:focus-visible::before,
.overlay-menu__list .current-menu-item > a::before {
  width: 40px;
}

/* Floating bottom badge — removed (no decorative devices). */
.floating-badge { display: none !important; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 32px;
  /* Pill (fully-rounded) by default — keeps the historic shape for ghost
     buttons; individual variants can override with a smaller radius. */
  border-radius: var(--radius);
  font-family: var(--font-heading-family);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 1.5px solid transparent;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
  text-decoration: none;
}
.btn--tan          { background: var(--color-button-bg); color: var(--color-button-text); }
.btn--tan:hover, .btn--tan:focus-visible    { background: var(--color-button-hover-bg); color: var(--color-button-hover-text); }
/* Outlined ghost button: transparent fill, bronze 1.5px border, sharp 0px
   corners. Bronze fill slides in from the left on hover; text colour flips
   to white. Stripped back, editorial. */
.btn--tan-gradient {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: transparent;
  color: var(--color-accent);
  border: 1.5px solid var(--color-accent);
  border-radius: 0;
  padding: 14px 32px;
  box-shadow: none;
  transition: color .35s var(--ease), border-color .35s var(--ease);
}
/* Bronze fill that slides in from the left on hover. Lives behind the label
   via z-index, so the text always renders on top. */
.btn--tan-gradient::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-tan-radial);
  transform: translateX(-101%);
  transition: transform .45s cubic-bezier(.65,0,.2,1);
}
.btn--tan-gradient:hover,
.btn--tan-gradient:focus-visible {
  color: var(--color-white);
  border-color: var(--color-accent);
}
.btn--tan-gradient:hover::before,
.btn--tan-gradient:focus-visible::before {
  transform: translateX(0);
}
.btn--tan-gradient:active {
  color: var(--color-white);
}
.btn--ghost-light  { color: var(--color-white); border-color: var(--color-white); background: transparent; }
.btn--ghost-light:hover, .btn--ghost-light:focus-visible { background: var(--color-white); color: var(--color-primary); }
.btn--ghost-dark   { color: var(--color-primary); border-color: var(--color-primary); background: transparent; }
.btn--ghost-dark:hover, .btn--ghost-dark:focus-visible { background: var(--color-primary); color: var(--color-white); }

/* ============================================================
   HERO — fullscreen image slider with a massive name overlay.
   Two slides cycle: each pairs a background image with one word
   ("RICHARD" / "STONE"). Image + word animate together so the
   composition swaps in sync, like a magazine cover changing edition.
   ============================================================ */
.hero {
  /* Sticky inside .hero-stage so the Positioning section scrolls UP over
     the hero like a curtain. Sticky scope is bound to the hero-stage wrapper —
     once Positioning has fully scrolled past, the wrapper ends, the hero
     un-sticks and disappears for the rest of the page. */
  position: sticky;
  top: 0;
  z-index: 1;
  /* Stable mobile viewport — 100svh ignores collapsing browser chrome so the
     hero doesn't jump as the URL bar shows/hides. Fall back to 100vh on
     browsers without svh support. */
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background: var(--color-primary);
  color: var(--color-white);
  isolation: isolate;
}

/* Small eyebrow label top-left, above the slides. */
.hero__eyebrow {
  position: absolute;
  top: calc(var(--header-h) + 16px);
  left: var(--gutter);
  z-index: 3;
  font-family: var(--font-body-family);
  font-size: 12px;
  letter-spacing: var(--font-label-spacing);
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  max-width: 38ch;
}

/* CTA — anchored lower-left, white ghost outline by default, bronze fill
   slides in from the left on hover so the button feels rooted in the brand
   button language without competing with the giant cycling word. */
.hero__cta {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(100px, 12vh, 140px);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 16px 30px;
  background: transparent;
  color: var(--color-white);
  border: 1.5px solid var(--color-white);
  font-family: var(--font-heading-family);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: color .35s var(--ease), border-color .35s var(--ease);
}
.hero__cta::before {
  /* Bronze fill that slides in from the left on hover. Lives behind the
     label via z-index, so the text always renders on top. */
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-tan-radial);
  transform: translateX(-101%);
  transition: transform .45s cubic-bezier(.65,0,.2,1);
}
.hero__cta:hover,
.hero__cta:focus-visible {
  color: var(--color-white);
  border-color: var(--color-accent);
}
.hero__cta:hover::before,
.hero__cta:focus-visible::before {
  transform: translateX(0);
}
.hero__cta-arrow {
  display: inline-block;
  transition: transform .3s var(--ease);
}
.hero__cta:hover .hero__cta-arrow,
.hero__cta:focus-visible .hero__cta-arrow {
  transform: translateX(6px);
}

/* H1 — upper-right, three phrases stacked. Uppercase editorial caps,
   tight letter-spacing so it reads as one confident statement. */
.hero__h1 {
  position: absolute;
  top: calc(var(--header-h) + 16px);
  right: var(--gutter);
  z-index: 3;
  margin: 0;
  text-align: right;
  font-family: var(--font-heading-family);
  font-weight: 700;
  font-size: clamp(18px, 1.8vw, 26px);
  line-height: 1.15;
  letter-spacing: -.005em;
  text-transform: uppercase;
  color: var(--color-white);
  max-width: 22ch;
}
.hero__h1-line {
  display: block;
}
.hero__h1-line + .hero__h1-line { margin-top: 2px; }

/* Description — lower-right, sits above the bottom indicator bar.
   Smaller body copy, looser line-height, kept short with max-width. */
.hero__desc {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(96px, 14vh, 140px);
  z-index: 3;
  margin: 0;
  text-align: right;
  font-family: var(--font-body-family);
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.55;
  color: rgba(255,255,255,.82);
  max-width: 44ch;
}

/* Tablet — vertical stack of CTA (above) → description (below) → bottom
   bar so they never overlap. The giant cycling word is also tightened
   so it doesn't crowd the H1 in the top-right corner. */
@media (max-width: 1024px) {
  .hero__h1   {
    font-size: clamp(20px, 2.4vw, 28px);
    max-width: 18ch;
    line-height: 1.15;
  }
  .hero__desc {
    font-size: clamp(13px, 1.2vw, 15px);
    max-width: 30ch;
    bottom: clamp(96px, 13vh, 130px);
  }
  .hero__slide-media img { object-position: 78% 30%; }
  /* CTA pushed well above the description so there's a clear gap between
     the two — they were colliding on tablet-landscape heights. */
  .hero__cta  { bottom: clamp(220px, 28vh, 280px); }
  /* Slightly smaller giant word so it doesn't push into the H1 column. */
  .hero__slide-word { font-size: clamp(56px, 13vw, 220px); }
}

/* Mobile portrait — everything left-aligned. The full role-line eyebrow
   ("Construction Consultant · CDM Principal Designer · NED") is too long
   to fit on a single line at this size and wrapped into the H1 below.
   Hiding it — the H1 already carries the role essence. */
@media (max-width: 899px) {
  .hero__eyebrow { display: none; }
  .hero__h1 {
    top: calc(var(--header-h) + 16px);
    right: auto;
    left: var(--gutter);
    text-align: left;
    font-size: clamp(20px, 4.6vw, 28px);
    line-height: 1.15;
    max-width: 22ch;
  }
  .hero__desc {
    right: auto;
    left: var(--gutter);
    bottom: clamp(90px, 13vh, 130px);
    text-align: left;
    font-size: 13px;
    line-height: 1.5;
    max-width: 32ch;
  }
  .hero__cta {
    bottom: clamp(240px, 32vh, 300px);
    padding: 13px 24px;
    font-size: 12px;
    letter-spacing: .13em;
  }
  .hero__slide-media img { object-position: 82% 35%; }
  .hero__slide-word { font-size: clamp(56px, 14vw, 180px); }
}

/* Small mobile — same layout but more compressed. */
@media (max-width: 480px) {
  .hero__eyebrow { display: none; }
  .hero__h1 {
    top: calc(var(--header-h) + 12px);
    font-size: clamp(18px, 5.2vw, 24px);
  }
  .hero__desc {
    bottom: clamp(80px, 12vh, 120px);
    font-size: 12px;
    max-width: 100%;
  }
  .hero__cta {
    padding: 11px 20px;
    font-size: 11px;
    letter-spacing: .12em;
    bottom: clamp(220px, 30vh, 270px);
  }
  .hero__slide-media img { object-position: 85% 35%; }
  .hero__slide-word { font-size: clamp(48px, 16vw, 140px); }
}

/* Single static background image, full bleed. */
.hero__slide-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__slide-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Very slow continuous Ken Burns zoom so the background still feels alive. */
  animation: rmsHeroKenBurns 24s ease-in-out infinite alternate;
}
/* Navy gradient overlay so the bronze word reads cleanly against the photo. */
.hero__slide-media::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,10,38,.55) 0%, rgba(0,10,38,.35) 50%, rgba(0,10,38,.75) 100%);
}

/* Words container — all words stack in the same grid cell; only one shows
   at a time via animation. */
.hero__words {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 1;
  pointer-events: none;
}

/* The giant overlay word — wraps a hidden sizer + two visible halves.
   Halves split: top half slides down from above + bottom half slides up
   from below to meet at the centre line, hold, then both exit the way
   they came in. */
.hero__slide-word {
  grid-row: 1;
  grid-column: 1;
  position: relative;
  display: inline-block;
  text-align: center;
  font-family: var(--font-heading-family);
  font-weight: 900;
  font-size: clamp(56px, 15vw, 280px);
  line-height: .85;
  letter-spacing: -.04em;
  text-transform: uppercase;
  white-space: nowrap;
  user-select: none;
  /* Small vertical padding so descenders/ascenders aren't cropped at
     the natural baseline. */
  padding: .08em .04em .04em 0;
  /* CRUCIAL: clip the halves once they translate outside this word's box.
     Without this, the next word's halves (parked above/below) bleed into
     the viewport because the parent never trims them. */
  overflow: hidden;
}

/* Invisible sizer keeps the parent's box at the size of the full word so
   the absolute halves have a stable rect to clip against. */
.hero__slide-word-sizer {
  visibility: hidden;
  display: inline-block;
}

/* Each visible half is a full copy of the word, positioned over the sizer
   and clipped to either the upper or lower half by inset(). */
.hero__slide-word-half {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--color-tan-radial);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--color-accent);
  will-change: transform;
  animation-duration: calc(var(--word-count, 2) * var(--word-duration, 4.5s));
  animation-timing-function: cubic-bezier(.7, 0, .25, 1);
  animation-iteration-count: infinite;
  animation-delay: calc(var(--i, 0) * var(--word-duration, 4.5s));
}
.hero__slide-word-half--top {
  clip-path: inset(0 0 50% 0);
  -webkit-clip-path: inset(0 0 50% 0);
  transform: translateY(-100%);
  animation-name: rmsHeroWordTop;
}
.hero__slide-word-half--bottom {
  clip-path: inset(50% 0 0 0);
  -webkit-clip-path: inset(50% 0 0 0);
  transform: translateY(100%);
  animation-name: rmsHeroWordBottom;
}

@keyframes rmsHeroKenBurns {
  from { transform: scale(1.04); }
  to   { transform: scale(1.12); }
}

/* Word visibility timeline (each word fills 50% of the total cycle):
   - 0-1%   : hidden (tiny pre-entry pad)
   - 1-10%  : sliding in
   - 10-40% : held visible
   - 40-49% : sliding out
   - 49-100%: hidden (other word's slot)
   Tight transitions — ~6s loop total at the default 3s word-duration. */
@keyframes rmsHeroWordTop {
  0%,  1%   { transform: translateY(-100%); }
  10%       { transform: translateY(0); }
  40%       { transform: translateY(0); }
  49%, 100% { transform: translateY(-100%); }
}
@keyframes rmsHeroWordBottom {
  0%,  1%   { transform: translateY(100%); }
  10%       { transform: translateY(0); }
  40%       { transform: translateY(0); }
  49%, 100% { transform: translateY(100%); }
}

/* Bottom-aligned scroll indicator + slide dots. */
.hero__bottom {
  position: absolute;
  left: var(--gutter); right: var(--gutter);
  bottom: clamp(24px, 4vh, 48px);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  pointer-events: none;
}
.hero__bottom > * { pointer-events: auto; }

.hero__dots {
  display: inline-flex;
  gap: 10px;
  align-items: center;
}
.hero__dot {
  width: 32px;
  height: 2px;
  background: rgba(255,255,255,.25);
  position: relative;
  overflow: hidden;
}
.hero__dot::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-accent);
  transform: translateX(-101%);
  animation: rmsHeroDot
    calc(var(--word-count, 2) * var(--word-duration, 4.5s))
    linear
    infinite;
  animation-delay: calc(var(--i, 0) * var(--word-duration, 4.5s));
}
@keyframes rmsHeroDot {
  0%      { transform: translateX(-101%); }
  4%      { transform: translateX(-101%); }
  46%     { transform: translateX(0); }
  53%, 100% { transform: translateX(101%); }
}

.hero__scroll {
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--color-white);
  font-family: var(--font-body-family);
  font-size: 11px;
  letter-spacing: var(--font-label-spacing);
  text-transform: uppercase;
  text-decoration: none;
  opacity: .85;
  transition: opacity .25s var(--ease), gap .3s var(--ease);
}
.hero__scroll:hover,
.hero__scroll:focus-visible {
  color: var(--color-white);
  opacity: 1;
  gap: 16px;
}
.hero__scroll-arrow {
  display: inline-block;
  animation: rmsHeroArrowBounce 2.4s ease-in-out infinite;
}
@keyframes rmsHeroArrowBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__slide,
  .hero__slide-media img,
  .hero__slide-word,
  .hero__dot::after,
  .hero__scroll-arrow { animation: none; }
  .hero__slide { opacity: 1; }
  .hero__slide:not(:first-child) { display: none; }
  .hero__slide-word-half { clip-path: none; -webkit-clip-path: none; transform: none; }
  /* Show only one word's halves when motion is reduced. */
  .hero__slide-word + .hero__slide-word { display: none; }
}

/* ============================================================
   HERO STAGE — wraps hero + positioning so the sticky hero's reveal
   scope is bound to these two sections only. After scrolling past
   positioning, the wrapper ends, the hero un-sticks and exits the
   viewport entirely — sections below never see the hero again.
   ============================================================ */
.hero-stage {
  position: relative;
}

/* Every section paints above the sticky hero via z-index. */
.site-main section:not(.hero) {
  position: relative;
  z-index: 2;
}

/* ============================================================
   POSITIONING — magazine feature layout
   Background: subtle vertical parallax carousel
   Foreground: asymmetric head · portrait + prose · trust badges
   ============================================================ */
.positioning {
  position: relative;
  background: var(--color-paper);
  color: var(--color-primary);
  padding: clamp(96px, 14vw, 180px) var(--gutter);
  overflow: hidden;
  isolation: isolate;
}

/* Vertical parallax background — confined to the LEFT 40% of the section.
   Muted thumbnails behind the portrait + content area. */
.positioning__bg {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 40%;
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  pointer-events: none;
  overflow: hidden;
  /* Lowered visual weight overall — the carousel is texture, not content. */
  opacity: .35;
}
.positioning__bg-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}
.positioning__bg-thumb {
  flex: 0 0 auto;
  aspect-ratio: 3/4;
  overflow: hidden;
}
.positioning__bg-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(.55) contrast(.95);
}
/* Paper overlay on the carousel — vertical fades soften the top/bottom
   so the parallax doesn't cut hard against the section edges, and a
   right-edge gradient fades the carousel into clean paper where the prose
   sits. */
.positioning__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    /* Right-edge fade — clean transition into the prose column. */
    linear-gradient(to right, rgba(246,243,238,0) 0%, rgba(246,243,238,.2) 60%, rgba(246,243,238,1) 100%),
    /* Top + bottom paper fades so the section edges blend cleanly. */
    linear-gradient(180deg, rgba(246,243,238,1) 0%, rgba(246,243,238,.3) 14%, rgba(246,243,238,.3) 86%, rgba(246,243,238,1) 100%);
}

/* All foreground content sits above the parallax background. */
.positioning > *:not(.positioning__bg) {
  position: relative;
  z-index: 1;
}

/* HEAD — chapter marker on left, huge editorial heading on right. */
.positioning__head {
  max-width: var(--max);
  margin: 0 auto clamp(56px, 7vw, 96px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr);
  gap: clamp(32px, 5vw, 96px);
  align-items: end;
  padding-bottom: clamp(40px, 5vw, 64px);
  border-bottom: 1px solid rgba(151,87,42,.3);
}
.positioning__head-left {
  display: grid;
  gap: 14px;
}
.positioning__chapter {
  font-family: var(--font-body-family);
  font-size: 12px;
  letter-spacing: var(--font-label-spacing);
  text-transform: uppercase;
  color: rgba(0,10,38,.5);
}
.positioning__head .label {
  display: inline-flex; align-items: center; gap: 14px;
  color: var(--color-accent);
  margin: 0;
}
.positioning__head .label::after {
  content: ''; display: block; width: 56px; height: 1px;
  background: currentColor; opacity: .55;
}
.positioning__heading {
  font-family: var(--font-heading-family);
  font-size: clamp(36px, 4.6vw, 72px);
  line-height: 1.0;
  letter-spacing: -.03em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 0 20px;
  max-width: 16ch;
}
.positioning__intro {
  font-family: var(--font-heading-family);
  font-style: italic;
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.4;
  color: rgba(0,10,38,.7);
  margin: 0;
  max-width: 48ch;
}

/* BODY — portrait left, 3-paragraph prose right. */
.positioning__body {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: clamp(48px, 6vw, 96px);
  align-items: start;
}
/* Portrait of Richard seated — left column. Bronze corner brackets at
   top-right and bottom-left, matching the architectural language elsewhere. */
.positioning__media {
  position: relative;
  padding: 18px;
}
.positioning__media img {
  width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block;
}
.positioning__media::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 48px; height: 48px;
  border-top: 2px solid var(--color-accent);
  border-right: 2px solid var(--color-accent);
}
.positioning__media::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 48px; height: 48px;
  border-bottom: 2px solid var(--color-accent);
  border-left: 2px solid var(--color-accent);
}
/* Supporting paragraphs (direct children of .positioning__prose — i.e.
   pos_p2 + pos_p3 once the WYSIWYG outputs them). */
.positioning__prose > p {
  color: rgba(0,10,38,.72);
  margin: 0 0 22px;
  font-size: 16px;
  line-height: 1.65;
  max-width: 56ch;
}
.positioning__prose > p:last-of-type { margin-bottom: 0; }

/* Lead paragraph wrapper (pos_p1). The inner <p> from WYSIWYG gets the
   lead text treatment; the wrapper carries the structural bottom margin. */
.positioning__lead {
  margin: 0 0 28px;
}
.positioning__lead p {
  font-size: clamp(20px, 1.5vw, 24px);
  line-height: 1.45;
  color: var(--color-primary);
  font-weight: 400;
  max-width: 52ch;
  margin: 0;
}

/* TRUST BADGES — compact badges that sit at the end of the prose.
   Each badge takes equal width via flex:1 so Google + Trustpilot look
   visually balanced even though their wordmarks have different lengths. */
.trust-row {
  margin-top: clamp(28px, 3.5vw, 48px);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: stretch;
  /* Cap the row so the badges don't span wider than the prose feels. */
  max-width: 480px;
}
.trust {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  /* Equal share of the row — both badges become the same width. */
  flex: 1 1 0;
  min-width: 0;
  padding: 10px 14px;
  border: 1px solid rgba(0,10,38,.25);
  text-decoration: none;
  color: var(--color-primary);
  background: transparent;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.trust:hover,
.trust:focus-visible {
  border-color: var(--color-primary);
  background-color: rgba(0,10,38,.04);
  color: var(--color-primary); /* score + dividers stay navy */
  outline: 0;
}
.trust__stars {
  display: inline-flex;
  gap: 2px;
  color: var(--color-primary); /* default: brand navy */
  transition: color .3s var(--ease);
}
.trust__stars svg {
  width: 14px; height: 14px;
}
.trust__brand {
  font-family: var(--font-heading-family);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -.005em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-primary); /* default: brand navy */
  transition: color .3s var(--ease);
}
.trust__brand-letter {
  color: inherit; /* default brand navy; overridden on hover per-letter */
  transition: color .3s var(--ease);
}
.trust__brand--trustpilot {
  gap: 6px;
}
.trust__brand-star {
  width: 16px;
  height: 16px;
  color: var(--color-primary); /* default: brand navy */
  transition: color .3s var(--ease);
}
.trust__score {
  font-family: var(--font-heading-family);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0;
  color: var(--color-primary);
  padding-left: 10px;
  border-left: 1px solid rgba(0,10,38,.18);
  margin-left: 2px;
  line-height: 1;
}

/* HOVER REVEAL — Google: real wordmark colours + yellow stars. */
.trust--google:hover .trust__brand-letter--g-blue,
.trust--google:focus-visible .trust__brand-letter--g-blue   { color: #4285F4; }
.trust--google:hover .trust__brand-letter--g-red,
.trust--google:focus-visible .trust__brand-letter--g-red    { color: #EA4335; }
.trust--google:hover .trust__brand-letter--g-yellow,
.trust--google:focus-visible .trust__brand-letter--g-yellow { color: #FBBC04; }
.trust--google:hover .trust__brand-letter--g-green,
.trust--google:focus-visible .trust__brand-letter--g-green  { color: #34A853; }
.trust--google:hover .trust__stars,
.trust--google:focus-visible .trust__stars { color: #FBBC04; }

/* HOVER REVEAL — Trustpilot: brand green wordmark + star + stars. */
.trust--trustpilot:hover .trust__brand,
.trust--trustpilot:focus-visible .trust__brand,
.trust--trustpilot:hover .trust__brand-star,
.trust--trustpilot:focus-visible .trust__brand-star,
.trust--trustpilot:hover .trust__stars,
.trust--trustpilot:focus-visible .trust__stars { color: #00B67A; }

/* Tablet → stack head, single column body. Hide the parallax carousel
   so it stops competing with the prose on narrower viewports. */
@media (max-width: 1024px) {
  .positioning__head { grid-template-columns: 1fr; gap: 24px; }
  .positioning__body { grid-template-columns: 1fr; gap: 48px; }
  .positioning__bg   { display: none; }
}
@media (max-width: 640px) {
  .positioning__heading { font-size: clamp(36px, 9vw, 64px); max-width: none; }
  .trust { padding: 7px 12px; }
  .trust__brand { font-size: 13px; }
}

/* ============================================================
   CREDIBILITY ANCHORS (shop slot)
   ============================================================ */
/* Full-bleed bronze band — no side gutter, three equal columns separated by
   thin white vertical rules, top + bottom hairlines defining the band.
   Faint engineering/blueprint grid layered over the bronze gradient adds
   architectural texture without losing the warmth of the bronze. */
.anchors {
  background:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px) 0 0 / 80px 80px,
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px) 0 0 / 80px 80px,
    linear-gradient(135deg, #79451E 0%, #97572A 55%, #975721 100%);
  color: var(--color-white);
  padding: 0;
  border-top: 1px solid rgba(255,255,255,.14);
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.anchors__list {
  /* Edge-to-edge — no max-width cap, no auto-margins. */
  max-width: none;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.anchor {
  position: relative;
  padding: clamp(56px, 7vw, 96px) clamp(28px, 4vw, 64px);
  /* Vertical divider between columns. Last column has no trailing border. */
  border-right: 1px solid rgba(255,255,255,.18);
  overflow: hidden;
  /* Reset link/focus outline — we manage focus visually via the hover state. */
  outline: 0;
  cursor: pointer;
  isolation: isolate;
}
.anchor:last-child { border-right: 0; }

/* Reveal image — sits behind the body, hidden by default, fades + zooms in
   on hover/focus. A dark overlay keeps the white text readable on top. */
.anchor__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  transform: scale(1.1);
  transition: opacity .55s var(--ease), transform .9s var(--ease);
  pointer-events: none;
}
.anchor__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.anchor__media::after {
  /* Darken the image so the bronze band's white text/numbers stay legible. */
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,10,38,.55) 0%, rgba(0,10,38,.78) 100%);
}
.anchor:hover .anchor__media,
.anchor:focus-visible .anchor__media {
  opacity: 1;
  transform: scale(1);
}

/* The text content sits above the media via z-index; on hover the body
   gently lifts and the value scales up to anchor the new composition. */
.anchor__body {
  position: relative;
  z-index: 1;
  transition: transform .5s var(--ease);
}

.anchor__index {
  display: block;
  font-family: var(--font-heading-family);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: var(--font-label-spacing);
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
  margin-bottom: 28px;
  transition: color .35s var(--ease), letter-spacing .5s var(--ease);
}
.anchor__value {
  font-family: var(--font-heading-family);
  font-weight: 700;
  font-size: clamp(56px, 7vw, 104px);
  line-height: .95;
  letter-spacing: -.04em;
  background: none;
  -webkit-background-clip: initial;
          background-clip: initial;
  -webkit-text-fill-color: initial;
  color: var(--color-white);
  margin: 0 0 20px;
  /* Scale up slightly on hover for emphasis. transform-origin keeps it
     anchored to the bottom-left so it grows up + right, not from centre. */
  transform-origin: left bottom;
  transition: transform .5s var(--ease);
}
.anchor__label {
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255,255,255,.85);
  margin: 0;
  max-width: 28ch;
  /* "Description lowers down" — push the label down a few pixels on hover so
     it visually settles below the enlarged value. */
  transform: translateY(0);
  transition: transform .5s var(--ease), color .35s var(--ease);
}

.anchor:hover .anchor__value,
.anchor:focus-visible .anchor__value {
  transform: scale(1.08);
}
.anchor:hover .anchor__label,
.anchor:focus-visible .anchor__label {
  transform: translateY(12px);
  color: rgba(255,255,255,.95);
}
.anchor:hover .anchor__index,
.anchor:focus-visible .anchor__index {
  color: var(--color-white);
  letter-spacing: calc(var(--font-label-spacing) + .02em);
}

/* ============================================================
   CONNECTOR (podcast slot — plain prose)
   ============================================================ */
/* Magazine "feature article" layout — asymmetric head, 4-column body
   with vertical portrait + 3 short prose columns, full-width numbered
   practice areas strip at the bottom. Distinct from positioning's
   2-col layout above. */
.connector {
  background: var(--color-primary);
  padding: clamp(96px, 14vw, 180px) var(--gutter);
  color: var(--color-white);
}
.connector__inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  gap: clamp(56px, 8vw, 120px);
}

/* HEAD — chapter marker + label on the left, huge title on the right. */
.connector__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: clamp(32px, 4vw, 80px);
  align-items: end;
  padding-bottom: clamp(40px, 5vw, 64px);
  border-bottom: 1px solid var(--color-rule);
}
.connector__head-left {
  display: grid;
  gap: 14px;
}
.connector__chapter {
  font-family: var(--font-body-family);
  font-size: 12px;
  letter-spacing: var(--font-label-spacing);
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
.connector__head .label {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--color-accent);
}
.connector__head .label::after {
  content: ''; display: block; width: 56px; height: 1px;
  background: currentColor; opacity: .55;
}
.connector__heading {
  font-family: var(--font-heading-family);
  font-size: clamp(48px, 7vw, 120px);
  line-height: .95;
  letter-spacing: -.035em;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0;
  color: var(--color-white);
  max-width: 14ch;
}

/* BODY — portrait + three short prose columns. */
.connector__body {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.connector__figure {
  position: relative;
  margin: 0;
  padding: 14px;
}
.connector__figure img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  display: block;
  filter: saturate(.85);
}
.connector__figure::before,
.connector__figure::after {
  content: '';
  position: absolute;
  width: 40px;
  height: 40px;
  z-index: 2;
  pointer-events: none;
}
.connector__figure::before {
  top: 0; right: 0;
  border-top: 2px solid var(--color-accent);
  border-right: 2px solid var(--color-accent);
}
.connector__figure::after {
  bottom: 0; left: 0;
  border-bottom: 2px solid var(--color-accent);
  border-left: 2px solid var(--color-accent);
}
.connector__figure figcaption {
  margin: 16px 0 0;
  font-family: var(--font-body-family);
  font-size: 11px;
  letter-spacing: var(--font-label-spacing);
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}

/* Cursor-following preview — fixed-positioned floating image that follows
   the mouse when hovering a practice area. JS in main.js controls the
   transform and opacity. */
.connector__cursor-img {
  position: fixed;
  top: 0; left: 0;
  width: clamp(180px, 18vw, 280px);
  aspect-ratio: 3/4;
  z-index: 100;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-9999px, -9999px, 0) translate(60px, -50%) scale(.9);
  transition: opacity .25s var(--ease), scale .35s var(--ease);
  /* Bronze frame + drop shadow to lift it off the page. */
  outline: 1px solid var(--color-accent);
  outline-offset: 6px;
  box-shadow: 0 18px 40px rgba(0,0,0,.4);
  will-change: transform, opacity;
}
.connector__cursor-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.connector__cursor-img.is-visible {
  opacity: 1;
  scale: 1;
}
/* Hide entirely on touch devices — hover doesn't apply and the floating
   image would be confusing. */
@media (hover: none) {
  .connector__cursor-img { display: none; }
}

.connector__col {
  display: grid;
  gap: 18px;
}
.connector__col-marker {
  margin: 0;
  font-family: var(--font-body-family);
  font-size: 12px;
  letter-spacing: var(--font-label-spacing);
  text-transform: uppercase;
  color: var(--color-accent);
  font-weight: 600;
}
.connector__col-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255,255,255,.82);
}

/* ROLES STRIP — full-width practice areas list with numbers. */
.connector__roles {
  padding-top: clamp(48px, 6vw, 80px);
  border-top: 1px solid var(--color-rule);
  display: grid;
  grid-template-columns: minmax(0, 180px) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 72px);
  align-items: baseline;
}
.connector__roles-label {
  font-family: var(--font-body-family);
  font-size: 12px;
  letter-spacing: var(--font-label-spacing);
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.connector__roles-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.connector__roles-list li {
  display: flex;
  align-items: baseline;
  gap: clamp(16px, 1.4vw, 24px);
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-family: var(--font-heading-family);
  font-size: clamp(22px, 2.4vw, 36px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.015em;
  text-transform: uppercase;
  color: var(--color-white);
  cursor: pointer;
  outline: 0;
  transition: color .25s var(--ease), padding-left .35s var(--ease);
}
.connector__roles-list li:last-child { border-bottom: 0; }
.connector__roles-list li:hover,
.connector__roles-list li:focus-visible { color: var(--color-accent); padding-left: 12px; }
.connector__role-no {
  font-family: var(--font-body-family);
  font-size: 12px;
  letter-spacing: var(--font-label-spacing);
  font-weight: 500;
  color: var(--color-accent);
  min-width: 32px;
  text-transform: uppercase;
}

/* Responsive — collapse the 4-col body cleanly and stack the head. */
@media (max-width: 1024px) {
  .connector__head { grid-template-columns: 1fr; gap: 32px; }
  .connector__body { grid-template-columns: 1fr 1fr; }
  .connector__figure { grid-column: 1 / -1; }
  .connector__figure img { aspect-ratio: 16/9; }
}
@media (max-width: 768px) {
  .connector__body { grid-template-columns: 1fr; }
  .connector__roles { grid-template-columns: 1fr; }
  .connector__heading { font-size: clamp(36px, 9vw, 64px); max-width: none; }
}

/* ============================================================
   WORK TILES (brands slot — now 4 tiles)
   ============================================================ */
/* "How Richard Works" section: paper background with a layered architectural
   drafting grid behind the heading area. Below that, the tile row goes
   full-bleed edge-to-edge with zero gaps. */
.tiles {
  background:
    /* Fine grid — secondary architectural detail. */
    linear-gradient(rgba(151,87,42,.05) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(151,87,42,.05) 1px, transparent 1px) 0 0 / 24px 24px,
    /* Major grid — primary divisions like a drafting sheet. */
    linear-gradient(rgba(151,87,42,.10) 1px, transparent 1px) 0 0 / 96px 96px,
    linear-gradient(90deg, rgba(151,87,42,.10) 1px, transparent 1px) 0 0 / 96px 96px,
    var(--color-paper);
  color: var(--color-primary);
  /* Only top padding — left, right and bottom are 0 so the tiles below
     can bleed to the section edges. */
  padding: clamp(96px, 12vw, 160px) 0 0;
}
.tiles__head {
  max-width: var(--max);
  margin: 0 auto clamp(56px, 7vw, 96px);
  padding: 0 var(--gutter);
  display: grid; gap: 20px;
}
.tiles__head .label {
  margin: 0;
  display: inline-flex; align-items: center; gap: 14px;
  color: var(--color-accent);
}
.tiles__head .label::after {
  content: ''; display: block; width: 56px; height: 1px;
  background: currentColor; opacity: .55;
}
.tiles__head h2 {
  font-size: clamp(40px, 5.4vw, 76px);
  line-height: .98;
  font-weight: 700;
  letter-spacing: -.035em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0;
  max-width: 14ch;
}
.tiles__head .tiles__sub {
  font-size: clamp(17px, 1.2vw, 19px);
  line-height: 1.5;
  color: rgba(0,10,38,.72);
  max-width: 60ch; margin: 8px 0 0;
}
/* Four equal-width tiles in a single row, edge-to-edge.
   No max-width cap, no gaps between cells — the row spans the full
   viewport from edge to edge and runs all the way to the bottom of
   the section. */
.tiles__list--full {
  max-width: none;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.tile-full {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  text-decoration: none;
  color: var(--color-white);
  display: block;
  isolation: isolate;
}
.tile-full:hover,
.tile-full:focus-visible {
  color: var(--color-white);
  outline: 0;
}

/* Background image — fills the tile. Subtle zoom on hover for life. */
.tile-full__image {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.tile-full__image img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .9s cubic-bezier(.2,.7,.2,1), filter .5s var(--ease);
  filter: saturate(.85);
}
.tile-full:hover .tile-full__image img,
.tile-full:focus-visible .tile-full__image img {
  transform: scale(1.06);
}

/* Default state: small bronze index + role label at the bottom of the
   tile, sitting on a navy fade-in gradient so the text reads against
   any image. Fades out when the detail panel arrives. */
.tile-full__default {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(20px, 2vw, 32px);
  background:
    linear-gradient(180deg, rgba(0,10,38,0) 30%, rgba(0,10,38,.55) 75%, rgba(0,10,38,.85) 100%);
  transition: opacity .4s var(--ease);
}
.tile-full__index {
  display: inline-block;
  font-family: var(--font-body-family);
  font-size: 11px;
  letter-spacing: var(--font-label-spacing);
  text-transform: uppercase;
  color: var(--color-accent);
  font-weight: 600;
  margin-bottom: 10px;
}
.tile-full__role {
  margin: 0;
  font-family: var(--font-heading-family);
  font-size: clamp(16px, 1.5vw, 22px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--color-white);
}

/* Hover state: navy panel slides up from below, revealing the full
   description on top of the image. */
.tile-full__detail {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* Allow long body copy to scroll inside the panel if the tile is short. */
  overflow-y: auto;
  padding: clamp(24px, 2.4vw, 40px);
  background: var(--color-primary);
  color: var(--color-white);
  opacity: 0;
  transform: translateY(8%);
  transition: opacity .45s var(--ease), transform .55s cubic-bezier(.25,.85,.25,1);
  pointer-events: none;
}
.tile-full__index--detail {
  margin-bottom: 0;
  align-self: flex-start;
}
.tile-full__heading {
  margin: clamp(16px, 1.6vw, 24px) 0 14px;
  font-family: var(--font-heading-family);
  font-size: clamp(18px, 1.6vw, 24px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.015em;
  text-transform: uppercase;
  color: var(--color-white);
  max-width: 18ch;
}
.tile-full__body {
  margin: 0 0 clamp(16px, 2vw, 24px);
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255,255,255,.82);
}

/* CTA shown at the bottom of the hover detail panel. The whole tile is
   already an <a> linking to the target page, so this is a visible
   affordance + the arrow that slides on hover. */
.tile-full__readmore {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  align-self: flex-start;
  margin-top: auto;
  padding-bottom: 4px;
  font-family: var(--font-body-family);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--font-label-spacing);
  text-transform: uppercase;
  color: var(--color-accent);
  border-bottom: 1px solid var(--color-accent);
  transition: gap .3s var(--ease), color .3s var(--ease);
}
.tile-full__readmore-arrow {
  display: inline-block;
  transition: transform .3s var(--ease);
}
.tile-full:hover .tile-full__readmore,
.tile-full:focus-visible .tile-full__readmore {
  gap: 16px;
}
.tile-full:hover .tile-full__readmore-arrow,
.tile-full:focus-visible .tile-full__readmore-arrow {
  transform: translateX(6px);
}

/* Hover trigger: fade out default, fade in detail panel. */
.tile-full:hover .tile-full__default,
.tile-full:focus-visible .tile-full__default {
  opacity: 0;
}
.tile-full:hover .tile-full__detail,
.tile-full:focus-visible .tile-full__detail {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Responsive — 2 cols on tablet, 1 col on small mobile. The hover state
   on touch devices is replaced by tap-to-show below. */
@media (max-width: 1024px) {
  .tiles__list--full { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .tiles__list--full { grid-template-columns: 1fr; }
  .tile-full { aspect-ratio: 4/3; }
}
/* Touch devices — show the detail panel when the tile is focused/tapped
   (since hover doesn't fire on touch). */
@media (hover: none) {
  .tile-full:focus .tile-full__default,
  .tile-full:active .tile-full__default { opacity: 0; }
  .tile-full:focus .tile-full__detail,
  .tile-full:active .tile-full__detail { opacity: 1; transform: translateY(0); }
}

/* Tile card: cleaner, larger image, no chrome border, bronze accent line
   appears on hover at the bottom edge of the image. */
.tile {
  display: grid; grid-template-rows: auto auto auto auto;
  gap: 20px;
  color: var(--color-primary);
  text-decoration: none;
  background: transparent;
  border: 0;
  padding: 0;
  position: relative;
  transition: transform .35s var(--ease);
}
.tile:hover, .tile:focus-visible {
  color: var(--color-primary);
  transform: translateY(-4px);
}
.tile__media {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
}
.tile__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .35s var(--ease);
  filter: saturate(.85);
}
.tile:hover .tile__media img,
.tile:focus-visible .tile__media img {
  transform: scale(1.06);
  filter: saturate(1);
}
/* Bronze rule slides in across the bottom of the image on hover. */
.tile__media::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 3px;
  background: var(--color-tan-radial);
  transition: width .5s cubic-bezier(.2,.7,.2,1);
}
.tile:hover .tile__media::after,
.tile:focus-visible .tile__media::after {
  width: 100%;
}
.tile__heading {
  margin: 8px 0 0;
  font-size: clamp(22px, 1.8vw, 30px);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.tile__body {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(0,10,38,.72);
  max-width: 48ch;
}
.tile__cta {
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--color-accent);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-top: 4px;
}
.tile__cta-arrow { transition: transform .35s var(--ease); display: inline-block; }
.tile:hover .tile__cta-arrow,
.tile:focus-visible .tile__cta-arrow { transform: translateX(8px); }

/* ============================================================
   SIGNATURE QUOTE (news slot)
   ============================================================ */
.quote {
  position: relative;
  background: var(--color-primary);
  padding: clamp(120px, 18vw, 240px) var(--gutter);
  overflow: hidden;
}
.quote__bg {
  position: absolute; inset: 0; z-index: 0;
}
.quote__bg img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: .35;
  filter: saturate(.7);
}
.quote__bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(80% 70% at 50% 40%, rgba(0,10,38,.55) 0%, rgba(0,10,38,.88) 100%);
}
.quote__inner {
  position: relative; z-index: 1;
  max-width: 1100px; margin: 0 auto;
  text-align: center;
  padding: clamp(40px, 5vw, 72px);
}
/* Big bronze opening quotation mark above the text — sculptural display char. */
.quote__inner::before {
  content: '\201C';
  display: block;
  font-family: var(--font-script-family), serif;
  font-size: clamp(120px, 16vw, 200px);
  line-height: .8;
  color: var(--color-accent);
  background: var(--color-tan-radial);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: -.2em;
  user-select: none;
}
/* Signature pull-quote — Manrope all-caps with mixed weight emphasis.
   Base text is faded (lighter weight + reduced opacity) so the
   highlighted phrases inside <span class="quote__highlight"> jump out
   as the impact moments. */
.quote__text {
  font-family: 'Manrope', 'Inter', system-ui, sans-serif;
  font-size: clamp(30px, 4.6vw, 68px);
  line-height: 1.1;
  font-weight: 400;
  color: rgba(255,255,255,.42);
  letter-spacing: -.015em;
  text-transform: uppercase;
  font-style: normal;
  margin: 0 0 56px;
  max-width: 22ch;
  margin-inline: auto;
}
/* The impact phrases — full white, heavy weight. Targets both the legacy
   .quote__highlight span AND <strong> elements coming from the WYSIWYG
   editor so editors can emphasise via the Bold button. */
.quote__text .quote__highlight,
.quote__text strong {
  color: var(--color-white);
  font-weight: 800;
  letter-spacing: -.02em;
}
/* Strip the inline quote marks now that the giant one is above. */
.quote__text::before,
.quote__text::after { content: none; }

/* Attribution — the brand SVG wordmark replaces the plain "Richard Stone"
   text. Centred under a thin bronze rule. */
.quote__attribution {
  position: relative;
  display: inline-block;
  padding-top: 28px;
  font-style: normal;
}
.quote__attribution::before {
  content: '';
  position: absolute; left: 50%; top: 0;
  transform: translateX(-50%);
  width: 56px; height: 1px;
  background: var(--color-accent);
  opacity: .55;
}
.quote__attribution img {
  display: block;
  width: clamp(160px, 22vw, 280px);
  height: auto;
  /* Subtle drop shadow lifts the script wordmark off the navy bg. */
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.25));
}

/* ============================================================
   RECOGNITION STRIP (timeline slot)
   ============================================================ */
/* Recognition — editorial "index" layout. Full-bleed 4-column grid.
   Massive bronze-gradient ghost numbers sit behind each award; small
   monogram badges in the upper-left, corner accents on hover. */
.recognition {
  background: var(--color-paper); color: var(--color-primary);
  /* Only top padding — left, right, bottom are 0 so the grid runs to
     the section edges. */
  padding: clamp(96px, 12vw, 160px) 0 0;
}

/* Header keeps its own padding so it's not full bleed — only the grid is. */
.recognition__head {
  max-width: var(--max);
  margin: 0 auto clamp(64px, 7vw, 96px);
  padding: 0 var(--gutter) clamp(40px, 5vw, 64px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: clamp(32px, 4vw, 80px);
  align-items: end;
  border-bottom: 1px solid rgba(151,87,42,.3);
  margin-bottom: 0;
}
.recognition__head-left {
  display: grid; gap: 14px;
}
.recognition__index-marker {
  font-family: var(--font-body-family);
  font-size: 12px;
  letter-spacing: var(--font-label-spacing);
  text-transform: uppercase;
  color: rgba(0,10,38,.5);
}
.recognition__head .label {
  display: inline-flex; align-items: center; gap: 14px;
  color: var(--color-accent);
  margin: 0;
}
.recognition__head .label::after {
  content: ''; display: block; width: 56px; height: 1px;
  background: currentColor; opacity: .55;
}
.recognition__heading {
  font-family: var(--font-heading-family);
  font-size: clamp(48px, 7vw, 112px);
  line-height: .95;
  letter-spacing: -.035em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0;
  max-width: 14ch;
}

/* Grid of awards — 4 full-bleed columns, no gaps, hairlines between cells. */
.recognition__list {
  max-width: none;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.recognition__item {
  position: relative;
  padding: clamp(40px, 4vw, 64px) clamp(24px, 2.4vw, 40px);
  border-right: 1px solid rgba(151,87,42,.3);
  border-bottom: 1px solid rgba(151,87,42,.3);
  overflow: hidden;
  transition: background-color .4s var(--ease);
  min-height: clamp(240px, 22vw, 320px);
  display: flex;
  align-items: flex-end;
}
/* Last column in each row: no trailing right border. */
.recognition__item:nth-child(4n) { border-right: 0; }
/* Last row: drop bottom border so the grid meets the next section
   cleanly. nth-last-child(-n+4) handles up to 4 trailing items. */
.recognition__item:nth-last-child(-n+4):nth-child(4n+1),
.recognition__item:nth-last-child(-n+3):nth-child(4n+2),
.recognition__item:nth-last-child(-n+2):nth-child(4n+3),
.recognition__item:nth-last-child(1):nth-child(4n) {
  border-bottom: 0;
}
.recognition__item:hover {
  background-color: rgba(151,87,42,.04);
}

/* Huge bronze-gradient ghost number in the background. */
.recognition__ghost {
  position: absolute;
  right: -.05em;
  bottom: -.25em;
  font-family: var(--font-heading-family);
  font-weight: 900;
  font-size: clamp(160px, 18vw, 280px);
  line-height: .8;
  letter-spacing: -.06em;
  pointer-events: none;
  color: var(--color-accent);
  background: var(--color-tan-radial);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: .12;
  transition: opacity .5s var(--ease), transform .8s var(--ease);
  will-change: transform, opacity;
}
.recognition__item:hover .recognition__ghost {
  opacity: .22;
  transform: translate(-.04em, -.02em) scale(1.03);
}

.recognition__content {
  position: relative;
  z-index: 1;
}
.recognition__no {
  display: block;
  font-family: var(--font-body-family);
  font-size: 11px;
  letter-spacing: var(--font-label-spacing);
  text-transform: uppercase;
  color: var(--color-accent);
  font-weight: 600;
  margin-bottom: 18px;
}
.recognition__title {
  margin: 0 0 14px;
  font-family: var(--font-heading-family);
  font-size: clamp(20px, 2vw, 30px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.015em;
  text-transform: uppercase;
  color: var(--color-primary);
  max-width: 18ch;
}
.recognition__sub {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(0,10,38,.65);
  letter-spacing: .005em;
  max-width: 36ch;
}

/* Top-left corner bracket accent — appears on hover. Pushed slightly
   further out to clear the monogram badge. */
.recognition__corner {
  position: absolute;
  top: 14px; left: 14px;
  width: 0; height: 0;
  border-top: 2px solid var(--color-accent);
  border-left: 2px solid var(--color-accent);
  opacity: 0;
  transition: width .35s var(--ease), height .35s var(--ease), opacity .25s var(--ease);
}
.recognition__item:hover .recognition__corner {
  width: 36px;
  height: 36px;
  opacity: 1;
}

/* Monogram logo badge — placeholder for actual award/credential logo
   images. Bronze outline + tracked uppercase letters. Sits in the
   upper-left corner of each card. */
.recognition__logo {
  position: absolute;
  top: clamp(24px, 2.6vw, 36px);
  left: clamp(24px, 2.4vw, 40px);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 32px;
  padding: 0 12px;
  font-family: var(--font-heading-family);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-accent);
  border: 1.5px solid var(--color-accent);
  background: var(--color-paper);
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.recognition__item:hover .recognition__logo {
  background-color: var(--color-accent);
  color: var(--color-paper);
}

/* Recognition responsive — 4-col → 2-col on tablet → 1-col on mobile. */
@media (max-width: 1024px) {
  .recognition__list { grid-template-columns: repeat(2, 1fr); }
  .recognition__item { border-right: 1px solid rgba(151,87,42,.3); border-bottom: 1px solid rgba(151,87,42,.3); }
  .recognition__item:nth-child(even) { border-right: 0; }
  /* Reset 4-col last-row rules for 2-col context. */
  .recognition__item:nth-last-child(-n+4):nth-child(4n+1),
  .recognition__item:nth-last-child(-n+3):nth-child(4n+2),
  .recognition__item:nth-last-child(-n+2):nth-child(4n+3),
  .recognition__item:nth-last-child(1):nth-child(4n) { border-bottom: 1px solid rgba(151,87,42,.3); }
  .recognition__item:nth-last-child(-n+2):nth-child(odd),
  .recognition__item:last-child { border-bottom: 0; }
}
@media (max-width: 640px) {
  .recognition__head { grid-template-columns: 1fr; gap: 24px; padding-bottom: 32px; }
  .recognition__heading { font-size: clamp(36px, 9vw, 56px); }
  .recognition__list { grid-template-columns: 1fr; }
  .recognition__item { border-right: 0 !important; border-bottom: 1px solid rgba(151,87,42,.3); min-height: 0; padding: clamp(32px, 8vw, 56px) var(--gutter); }
  .recognition__item:last-child { border-bottom: 0; }
  .recognition__ghost { font-size: clamp(140px, 30vw, 200px); }
}

/* ============================================================
   CONTACT CTA (speaking slot)
   ============================================================ */
.contact {
  position: relative;
  background: var(--color-primary);
  padding: clamp(120px, 16vw, 220px) var(--gutter);
  text-align: center;
  overflow: hidden;
}

/* Thumbnail grid background — four parallax rows. JS translates each
   row horizontally in alternating directions on scroll. */
.contact__bg-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(10px, 1.4vw, 20px);
  padding: 0;
  pointer-events: none;
  /* Faint by default — image colour reads but doesn't compete with copy. */
  opacity: .55;
}
.contact__bg-row {
  display: flex;
  gap: clamp(10px, 1.4vw, 20px);
  width: max-content;
  will-change: transform;
  /* Initial offset for the brick-style stagger: even rows shifted to
     break the grid into an "off-set" layout. */
  transform: translate3d(0, 0, 0);
}
.contact__bg-row[data-row="0"] { margin-left: 0; }
.contact__bg-row[data-row="1"] { margin-left: clamp(-160px, -10vw, -80px); }
.contact__bg-row[data-row="2"] { margin-left: clamp(-80px, -6vw, -40px); }
.contact__bg-row[data-row="3"] { margin-left: clamp(-220px, -14vw, -120px); }

.contact__bg-thumb {
  flex: 0 0 auto;
  width: clamp(140px, 14vw, 220px);
  aspect-ratio: 4/3;
  overflow: hidden;
}
.contact__bg-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  /* Desaturate so the thumbnails blend into the navy mood. */
  filter: saturate(.7) contrast(.95) brightness(.85);
}

/* Strong navy vignette over the thumbnails — keeps the contact text
   readable while the edges of the grid stay visible. */
.contact__bg-grid::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 65% at 50% 50%, rgba(0,10,38,.55) 0%, rgba(0,10,38,.78) 60%, rgba(0,10,38,.92) 100%);
}

/* Touch / reduced motion — keep the grid but don't move it. */
@media (prefers-reduced-motion: reduce) {
  .contact__bg-row { transform: none !important; }
}
.contact__inner {
  position: relative; z-index: 1;
  max-width: 880px; margin: 0 auto;
  color: var(--color-white);
}
.contact__inner .label {
  color: var(--color-accent);
  margin-bottom: 28px;
  display: inline-flex; align-items: center; gap: 14px;
}
.contact__inner .label::before,
.contact__inner .label::after {
  content: ''; display: block; width: 56px; height: 1px;
  background: currentColor; opacity: .55;
}
.contact__heading {
  font-family: var(--font-heading-family);
  font-size: clamp(44px, 6vw, 88px);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.035em;
  text-transform: uppercase;
  margin: 0 auto 32px;
  color: var(--color-white);
  max-width: 14ch;
}
.contact__body {
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.55;
  color: rgba(255,255,255,.82);
  margin: 0 auto 44px;
  max-width: 56ch;
}
.contact__note {
  margin: 24px 0 0;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--color-primary); color: var(--color-white); border-top: 1px solid var(--color-rule); }
.site-footer__inner {
  max-width: var(--max); margin: 0 auto;
  padding: clamp(32px, 4vw, 56px) var(--gutter);
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 24px; align-items: center;
}
.site-footer__copy { margin: 0; font-size: 13px; color: rgba(255,255,255,.6); justify-self: start; }
.site-footer__menu { justify-self: center; }
.site-footer__menu-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 22px;
}
.site-footer__menu-list a { color: rgba(255,255,255,.7); font-size: 13px; }
.site-footer__menu-list a:hover { color: var(--color-accent); }
.site-footer__credit { margin: 0; font-size: 13px; color: rgba(255,255,255,.5); justify-self: end; }
.site-footer__credit span { color: var(--color-white); }

/* The lime newsletter section from the previous skin doesn't belong on this brand. */
.newsletter { display: none !important; }

/* Contact block (above the legal strip) */
.site-footer__contact {
  border-bottom: 1px solid var(--color-rule);
  padding: clamp(28px, 4vw, 48px) var(--gutter);
}
.site-footer__contact-inner {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center;
}
.site-footer__address {
  margin: 0; font-style: normal;
  color: rgba(255,255,255,.78); font-size: 14px; line-height: 1.55;
}
.site-footer__contact-links { display: flex; gap: 28px; flex-wrap: wrap; }
.site-footer__contact-link {
  color: var(--color-white); font-size: 14px; letter-spacing: .02em;
  text-decoration: none;
  border-bottom: 1px solid var(--color-accent);
  padding-bottom: 2px;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.site-footer__contact-link:hover, .site-footer__contact-link:focus-visible {
  color: var(--color-accent); border-color: var(--color-white);
}

/* Social icon row */
.site-footer__social {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0;
  border-bottom: 1px solid var(--color-rule);
}
.site-footer__social-link {
  flex: 1 1 auto;
  display: inline-grid; place-items: center;
  padding: 22px 0;
  color: var(--color-white);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.site-footer__social-link + .site-footer__social-link { border-left: 1px solid var(--color-rule); }
.site-footer__social-link:hover, .site-footer__social-link:focus-visible {
  background: var(--color-accent); color: var(--color-white);
}

/* Page templates fallback */
.page-header, .archive-header { padding-top: calc(var(--header-h) + 40px); }

/* ============================================================
   MOTION (punctuation — fade in on scroll, respect reduced motion)
   ============================================================ */
.will-reveal { opacity: 0; transform: translateY(16px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.will-reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .will-reveal { opacity: 1; transform: none; }
}

/* ============================================================
   RESPONSIVE — global section overrides for tablet + mobile.
   Hero has its own breakpoints above; this block handles every
   other section.
   ============================================================ */

/* Tablet (≤1024px): drop 3-col grids to 2-col, 2-col to 1-col. */
@media (max-width: 1024px) {
  .positioning__inner   { grid-template-columns: 1fr; gap: clamp(40px, 5vw, 64px); }
  .tiles__list          { grid-template-columns: repeat(2, 1fr); gap: clamp(24px, 3vw, 36px); }
  .anchors__list        { grid-template-columns: 1fr; gap: 0; }
  .anchor               { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.18); padding: clamp(40px, 6vw, 64px) var(--gutter); }
  .anchor:last-child    { border-bottom: 0; }
  .recognition__list    { grid-template-columns: repeat(2, 1fr); }
  .recognition__head .recognition__heading { font-size: clamp(28px, 4vw, 44px); }
  /* Connector now has its own responsive rules inline; nothing to override here. */
  .site-footer__inner   { grid-template-columns: 1fr; text-align: center; }
  .site-footer__copy,
  .site-footer__credit  { justify-self: center; }
  .site-footer__contact-inner { grid-template-columns: 1fr; text-align: center; }
  .site-footer__contact-links { justify-content: center; }
}

/* Mobile (≤768px): final stack — everything one column, smaller heads. */
@media (max-width: 768px) {
  .tiles__list          { grid-template-columns: 1fr; gap: 28px; }
  .recognition__list    { grid-template-columns: 1fr; }
  /* Tighten huge section headings so they don't push content off-screen. */
  .tiles__head h2,
  .contact__heading,
  .positioning__copy h2 { font-size: clamp(32px, 7vw, 56px); letter-spacing: -.02em; }
  .anchor__value        { font-size: clamp(48px, 12vw, 80px); }
  .quote__text          { font-size: clamp(24px, 6vw, 36px); }
  .quote__inner::before { font-size: clamp(80px, 22vw, 140px); }
}

/* Small mobile (≤480px): typographic tightening + smaller header. */
@media (max-width: 480px) {
  :root {
    --header-h: 64px;
    --font-body-size: 16px;
    --gutter: 20px;
  }
  .site-header__brand img { max-height: 48px; }
  .nav-toggle { width: 48px; height: 48px; gap: 7px; }
  .nav-toggle__bar { width: 28px; }
  .overlay-menu__list a { font-size: 28px; line-height: 1.05; }
}

/* Inline editor affordance (dev only) */
.tcm-editable { position: relative; }
.tcm-editable:hover { outline: 1px dashed var(--color-accent); outline-offset: 4px; }

/* ===========================================================================
   WYSIWYG body fields — paragraphs output by ACF/SCF wysiwyg are wrapped
   in <p>. Zero the default browser margin on those inner paragraphs so
   the surrounding wrappers (which carry layout margin themselves) don't
   pick up extra spacing. Inline styles (color, size, line-height) are
   inherited from the wrapper class naturally.
   =========================================================================== */
.hero__desc > p,
.connector__col-text > p,
.tiles__sub > p,
.contact__body > p,
.quote__text > p {
  margin: 0;
  font: inherit;
  color: inherit;
}