/* =========================================================
   JohnLuke.com · Marketing Site Styles
   ========================================================= */

/* Branded text selection — orange highlight, white text on top, site-wide.
   Lives near the top of the file so it's never overridden by section CSS. */
::selection      { background: #F47620; color: #fff; }
::-moz-selection { background: #F47620; color: #fff; }

/* Slider hardening — keeps the work-slider (and other drag-sliders) feeling
   like wearecollins.com instead of the browser's native image grab + jank.
   - Native image-drag suppressed so Windows mice don't hijack the gesture.
   - touch-action: pan-x lets touch scroll horizontally without competing
     with vertical page scroll.
   - overscroll-behavior-x: contain stops the slider from triggering the
     browser's "back" gesture when scrolled to the start.
   - Symmetric scroll-padding so both ends snap clean to the section grid.
   - Last card snaps to its end so the right gutter stops cleanly. */
.work-slider, .g-deliver-grid {
  scroll-padding-right: 24px;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
  -webkit-tap-highlight-color: transparent;
}
.work-slider .work-card:last-child,
.g-deliver-grid > *:last-child { scroll-snap-align: end; }
/* Carousel media is transparent to pointer events. The drag/click
   pattern (per wearecollins.com): drag-to-scroll lives on the scroll
   container, click lives on the per-card <a>. If the <img>/<video>
   itself captures the pointer, mousedown lands on the media and the
   browser starts a native image drag (or the <video> intercepts and
   swallows the click) — JL flagged 2026-05-19: "draggable only between
   the images, can't click on the image, cursor stuck in grab mode."
   pointer-events:none on the media element passes both the pointerdown
   AND the synthesized click straight through to the parent .work-card /
   .stats-card link. The native-drag and user-select suppressions stay
   for browsers that don't honor pointer-events on <img>. */
.work-slider img,
.work-slider video,
.work-slider .work-card-img,
.stats-reel img,
.stats-reel video,
.stats-reel .stats-card-img,
.g-deliver-grid img {
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}


/* Fonts: Matrix II (display) and Aktiv Grotesk (body) */
/* matrix-ii is loaded from Adobe Typekit (kit "oci3chh") via the
   <link rel="stylesheet" href="https://use.typekit.net/oci3chh.css">
   tag in each HTML head. The local .woff fallbacks below kick in if
   Typekit is blocked (e.g. on localhost without domain whitelisting,
   or corporate Windows networks that block use.typekit.net).

   IMPORTANT — no local @font-face for the `matrix-ii` family itself.
   Earlier attempts to expose a local Book or Regular cut under the
   `matrix-ii` name overrode the Adobe Fonts kit's hosted cut (because
   this stylesheet loads after the typekit <link>) and produced a
   visibly different weight than v1's johnluke.com. v1 has no local
   matrix-ii @font-face — it lets the kit's hosted matrix-ii be the
   only source — so v2 follows the same pattern. The fallback below
   uses a separate family name (`matrix-ii-fallback`) so it only
   activates when the kit can't reach the browser, mirroring v1
   exactly (JL 2026-05-19). */
/* matrix-ii-fallback @ 400 deliberately uses book.woff (NOT reg.woff)
   so the local fallback matches the lighter Book cut v1's kit serves
   as `matrix-ii @ 400`. Adobe Fonts ships "Matrix II OT Reg" as a
   heavy slab — pointing the local fallback at reg.woff made v2 read
   visibly thicker than v1 (JL flagged 2026-05-19 with the Adobe
   catalog screenshot). The Regular slab cut stays available at
   weight 600 below for any rule that wants the heavy treatment. */
@font-face {
  font-family: 'matrix-ii-fallback';
  src: url('assets/fonts/matrix-ii-ot-book.woff') format('woff');
  font-weight: 300 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'matrix-ii-fallback';
  src: url('assets/fonts/matrix-ii-ot-reg.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Matrix II Script';
  src: url('assets/fonts/matrix-ii-script-ot-reg.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Aktiv Grotesk';
  src: url('assets/fonts/aktiv-grotesk-regular.ttf') format('truetype');
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #020C0F;
  --ink-warm: #20201D;
  --cream: #F7F7F0;
  --subtle: #F4F4F6;
  --stone: #F5F5F4;
  --border: #E9E9E7;
  --muted: #929292;
  --grey-700: #6B6B6B;
  --accent: #F47620;
  --accent-dark: #D05E0C;
  --white: #FFFFFF;

  /* Site-wide content cap. Matches the wider template family
     (.pt-*, .sv-*, .tm-*, .md-*, .tr-*, case studies) which were
     authored at 1440. v1 used to ship --max-wide at 1360 while those
     templates rendered at 1440, so the nav looked narrower than the
     content on every non-home page. Bumped to 1440 so the nav
     aligns with the section edge on every page. */
  --max-wide: 1440px;
  /* Site-wide horizontal page-section gutter. Scales fluidly between 24px
     (mobile) and 65px (desktop). Use var(--page-pad-x) on every page-level
     section so every page reads to the same edge. */
  --page-pad-x: clamp(24px, 4vw, 65px);

  --font-display: "matrix-ii", "matrix-ii-fallback", sans-serif;
  --font-body: "aktiv-grotesk", 'Aktiv Grotesk', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-nav: 'Inter', system-ui, sans-serif;
  /* Big stat numbers across the site (.stat-num, .cs-stat-value,
     .rd-stat-value, .stats-card-stat-value). Moret is now in the
     Adobe Fonts kit oci3chh (JL added it 2026-05-19), so the cascade
     simplifies to the Adobe-recommended snippet: `"moret", serif`.
     Fraunces / matrix-ii were the fallbacks while Moret wasn't in
     the kit; unused now that the kit ships it. */
  --font-numbers: "moret", serif;
  --font-small: 'Poppins', 'Inter', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

body {
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Background fades over 0.4s; text color snaps in 0.15s ease-out so
     we don't dwell in the awkward "grey text on grey background"
     midstate visible when both properties interpolate together. Per
     JL 2026-05-17 video: with both at 0.6s, the ~300ms midpoint reads
     as washed-out / unreadable. Splitting speeds lands text on its
     new color quickly while the background completes a smoother fade. */
  transition:
    background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.15s ease-out;
}

/* ========= DARK MODE (scroll-triggered) ========= */
body.is-dark { background: var(--ink); color: #fff;}
/* Nav stays transparent in dark mode. The frosted-glass treatment
   (rgba bg + 14px backdrop-blur) made the nav read as a distinct
   horizontal strip during the body fade — flagged 2026-05-17 as
   "menu as separate section, defeats the whole purpose." Backdrop-
   filter has no transition, so even with body bg fading smoothly,
   the blur snaps on/off. Removing the special bg + blur lets the
   nav inherit the body's color and fade as one coherent surface.
   The nav is `position: absolute` (not fixed), so it scrolls away
   with the page — no need for a frosted-glass stuck-state bg. */
/* `.site-nav`, `.hero`, `.positioning`, `.selected-work` are all
   transparent by default now (no `background` declaration in their
   base rules), so they inherit body's color in every mode. No need to
   re-state `background: transparent` here — and removing those rules
   eliminates the second source of desync, since each one had been
   acquiring its own `0.6s ease` transition that raced body's `0.4s
   cubic-bezier`. */
body.is-dark .site-logo { color: #fff;}
body.is-dark .site-nav-link { color: #fff;}
body.is-dark .site-nav-link.active { color: #fff;}
body.is-dark .hero-headline { color: #fff;}
body.is-dark .positioning-headline { color: #fff;}
body.is-dark .positioning-inner { border-top-color: rgba(255,255,255,0.1);}
body.is-dark .section-title { color: #fff;}
body.is-dark .work-cta-section { border-top-color: rgba(255,255,255,0.1);}
body.is-dark .work-cta-headline { color: #fff;}
body.is-dark .services-stats { border-top-color: rgba(255,255,255,0.1); border-bottom-color: rgba(255,255,255,0.1);}
body.is-dark .stat { border-right-color: rgba(255,255,255,0.1);}
body.is-dark .stat-num { color: #fff;}
body.is-dark .service-row { border-bottom-color: rgba(255,255,255,0.1);}
body.is-dark .service-title { color: #fff;}
body.is-dark .service-desc { color: rgba(255,255,255,0.75);}
body.is-dark .service-offering { background: rgba(255,255,255,0.06); color: #fff; border-color: rgba(255,255,255,0.12);}
body.is-dark .work-hero-headline { color: #fff;}
body.is-dark .work-filter { color: #fff; border-color: rgba(255,255,255,0.18);}
body.is-dark .work-filter:hover { background: rgba(255,255,255,0.08);}
body.is-dark .work-filter.active { background: var(--accent); border-color: var(--accent);}
body.is-dark .work-count { color: rgba(255,255,255,0.5);}
body.is-dark .services-hero-headline { color: #fff;}
body.is-dark .services-hero-sub { color: rgba(255,255,255,0.6);}
body.is-dark .btn-dark { background: var(--accent); color: #fff; border-color: var(--accent);}
body.is-dark .btn-dark:hover { background: var(--accent-dark);}
body.is-dark .btn-outline { color: #fff; border-color: rgba(255,255,255,0.25);}
body.is-dark .btn-outline:hover { background: rgba(255,255,255,0.06); border-color: #fff;}

a { color: inherit; text-decoration: none; }
button { border: none; background: none; cursor: pointer; font-family: inherit; }
img { display: block; max-width: 100%; }

/* ========= TOP NAV =========
   Aligned to the same content grid as body sections and footer:
   max-width: var(--max-wide), margin auto, padding: 22px var(--page-pad-x).
   The logo and right-side links sit at the same horizontal edge as
   any body section's content, edge-to-edge across every page.
*/
.site-nav {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--max-wide);
  padding: 22px var(--page-pad-x);
  display: flex;
  justify-content: center;
  z-index: 1000;
  box-sizing: border-box;
}
.site-nav-inner {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-logo {
  height: 28px;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  position: relative;
  text-decoration: none;
  transition: color 0.5s ease;
}
.site-logo-wordmark,
.site-logo-svg,
.site-logo svg {
  height: 100%;
  width: auto;
  display: block;
  /* Prevent the small bottom bars of the .ll. mark from getting dropped
     by sub-pixel rounding on mobile Safari at small heights. */
  shape-rendering: geometricPrecision;
  fill: currentColor;
  overflow: visible;
}

/* Lottie smiley logo is currently disabled — the animation data file
   (assets/jl-happy.js) is empty, so the container would render blank.
   Hide it entirely; .site-logo (the inline .ll. wordmark) is shown on
   every breakpoint instead. */
.site-logo-smiley {
  width: 60px;
  height: 60px;
  display: none;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  position: relative;
  cursor: pointer;
  margin: -8px 0;
}
.site-logo-smiley-lottie {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: filter 0.4s ease;
}
.site-logo-smiley-lottie svg { width: 100% !important; height: 100% !important; }
.site-logo-smiley-lottie svg rect { fill: transparent !important; }
/* Lottie ships with raster image frames (no fillable paths), so we tint via CSS
   filter on dark pages to render the icon white. */
body.is-dark .site-logo-smiley-lottie,
body[data-force-dark="true"] .site-logo-smiley-lottie {
  filter: brightness(0) invert(1);
}

.site-nav-links {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* HAMBURGER TOGGLE — Menu Lottie at rest, swaps to Close Lottie when open */
.site-nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  width: 44px;
  height: 44px;
  color: inherit;
  position: relative;
  z-index: 1001;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  user-select: none;
  touch-action: manipulation;
}
.site-nav-toggle:focus { outline: none; }
.site-nav-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
.site-nav-toggle-lottie {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  padding: 6px;
  box-sizing: border-box;
}
.site-nav-toggle-lottie svg {
  width: 100% !important;
  height: 100% !important;
}
.site-nav-toggle-x {
  display: none;
  position: absolute;
  inset: 0;
  margin: auto;
  width: 24px;
  height: 24px;
}
/* Static X is now handled by the close-state Lottie inside navToggleLottie.
   Keep the lottie wrapper visible at all times so the close animation can render. */
.site-nav-toggle .site-nav-toggle-x { display: none; }

/* Lottie sources have inconsistent baked-in colors (Menu uses white, Close uses
   near-black). Tint the whole layer via filter so it always reads in the right
   tone for the page mode. brightness(0) collapses to pure black, optional
   invert(1) flips to white on dark pages. */
.site-nav-toggle-lottie { filter: brightness(0); }
body.is-dark .site-nav-toggle-lottie,
body[data-force-dark="true"] .site-nav-toggle-lottie { filter: brightness(0) invert(1); }

/* Lottie sources include a 1080×1080 background rect that renders as a black box
   at small sizes. Force background rects transparent (mirrors the live-site hack). */
.site-nav-toggle-lottie svg rect { fill: transparent !important; }

/* MOBILE MENU OVERLAY */
.mobile-menu {
  position: fixed;
  inset: 0;
  background: rgba(247, 247, 240, 0.94);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  color: var(--ink);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-12px);
  transition: opacity 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  display: flex;
  flex-direction: column;
}
.mobile-menu.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
body.is-dark .mobile-menu { background: rgba(2, 12, 15, 0.92); color: var(--cream); }
body[data-force-dark="true"] .mobile-menu { background: rgba(2, 12, 15, 0.92); color: var(--cream); }

.mobile-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px;
  border-bottom: 1px solid var(--border);
  visibility: hidden;
}
body.is-dark .mobile-menu-head { border-bottom-color: rgba(247,247,240,0.08); }
.mobile-menu-logo {
  height: 24px;
  color: inherit;
  display: inline-flex; align-items: center;
  text-decoration: none;
}
.mobile-menu-logo .site-logo-wordmark { height: 100%; width: auto; display: block; }
.mobile-menu-close {
  background: none;
  border: none;
  padding: 8px;
  margin: -8px;
  cursor: pointer;
  color: inherit;
}

.mobile-menu-links {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 28px 0;
  overflow-y: auto;
}
.mobile-nav-link {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -1px;
  color: var(--ink);
  text-decoration: none;
  padding: 14px 32px;
  border-bottom: 1px solid var(--border);
  transition: color 0.2s ease, background 0.2s ease, padding 0.25s cubic-bezier(0.2,0.8,0.2,1);
  position: relative;
}
body.is-dark .mobile-nav-link { color: var(--cream); border-bottom-color: rgba(247,247,240,0.08); }
.mobile-nav-link:hover,
.mobile-nav-link.active {
  color: var(--accent);
}
.mobile-menu-foot {
  padding: 20px 32px 36px;
  border-top: 1px solid var(--border);
}
body.is-dark .mobile-menu-foot { border-top-color: rgba(247,247,240,0.08); }
.mobile-menu-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border-radius: 999px;
  transition: gap 0.2s ease, background 0.2s ease;
}
body.is-dark .mobile-menu-cta { background: var(--accent); }
.mobile-menu-cta:hover { gap: 14px; background: var(--accent); color: #fff; }

.site-nav-link {
  padding: 20px 28px;
  font-family: var(--font-nav);
  font-size: 21px;
  color: var(--ink);
  font-weight: 400;
  line-height: 1.5;
  transition: opacity 0.15s;
}
.site-nav-link:not(.active) {
  opacity: 0.5;
}
.site-nav-link:hover {
  opacity: 1;
}
.site-nav-link.active {
  opacity: 1;
  font-weight: 500;
}

/* ========= HERO ========= */
.hero {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 91px 65px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 392px;
  /* No background and no transition by design. The body owns the
     surface color (line ~95); .hero is transparent in every mode so
     the body fade reads as one coherent surface. Previous declaration
     was `background: var(--white)` + `transition: background-color
     0.6s ease` — redundant in light mode (body is already white) and
     racing the body's 0.4s cubic-bezier in dark mode, which is what
     produced JL's "two sections" scroll-up jank. */
}

.hero-headline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 11px;
  font-family: var(--font-display);
  font-size: 64px;
  /* Matrix II Regular (400) per JL 2026-05-18 — the Light/Book (300)
     cut read too thin in context, so titles ship at Regular. */
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: -1px;
  color: var(--ink);
}
.hero-headline .accent {
  color: var(--accent);
}
.hero-break-mobile { display: none; }
@media (max-width: 720px) {
  .hero-break-mobile { display: block; flex-basis: 100%; height: 0; }
}
.hero-sub {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.4;
  color: #4D4D46;
  margin-top: 22px;
  max-width: 920px;
  letter-spacing: -0.01em;
}
.hero-ctas {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 28px;
}

/* ========= FEATURED IMAGE ========= */
.featured-image {
  max-width: var(--max-wide);
  margin: 0 auto;
  padding: 0 var(--page-pad-x);
}
.featured-image-inner {
  width: 100%;
  height: 487px;
  max-height: 765px;
  border-radius: 15px;
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(1000px 400px at 30% 50%, rgba(244, 118, 32, 0.55), transparent 70%),
    linear-gradient(135deg, #D74B2D 0%, #E89A3C 50%, #7A5233 100%);
}
.featured-image-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 22% 48%, #fff 0%, #fff 9%, transparent 9.5%),
    radial-gradient(circle at 48% 35%, #fff 0%, #fff 10%, transparent 10.5%),
    radial-gradient(circle at 70% 52%, #fff 0%, #fff 11%, transparent 11.5%);
  opacity: 0.1;
}
.featured-image-sticker {
  position: absolute;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  text-align: center;
  color: var(--ink);
  line-height: 1;
  box-shadow: 0 6px 24px rgba(0,0,0,0.2), inset 0 -3px 0 rgba(0,0,0,0.08);
  transform: rotate(-8deg);
}
.featured-image-sticker.one {
  top: 24%; left: 18%;
  width: 140px; height: 140px;
  background: #F47620;
  color: #fff;
  font-size: 18px;
  transform: rotate(-14deg);
}
.featured-image-sticker.two {
  top: 18%; left: 48%;
  width: 130px; height: 130px;
  background: #1E5CF7;
  color: #fff;
  font-size: 20px;
  transform: rotate(6deg);
}
.featured-image-sticker.three {
  top: 48%; left: 22%;
  width: 130px; height: 130px;
  background: #FFD84D;
  color: var(--ink);
  font-size: 14px;
  transform: rotate(8deg);
}
.featured-image-sticker.four {
  top: 54%; left: 44%;
  width: 110px; height: 110px;
  background: #4DB856;
  color: #fff;
  font-size: 16px;
  font-family: var(--font-display);
  transform: rotate(-16deg);
}
.featured-image-sticker.five {
  top: 36%; left: 66%;
  width: 140px; height: 140px;
  background: #E8EEDE;
  color: #2A7B3C;
  font-size: 18px;
  font-family: var(--font-display);
  transform: rotate(12deg);
}

/* ========= ABOUT / POSITIONING ========= */
.positioning {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  height: 508px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.positioning-inner {
  width: 100%;
  max-width: var(--max-wide);
  border-top: 1px solid var(--border);
  padding: 90px 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.positioning-headline {
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -1px;
  color: var(--ink);
  max-width: 949px;
}
.positioning-ctas {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ========= BUTTONS ========= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 24px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  transition: transform 0.15s, background 0.15s, border-color 0.15s;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }

.btn-dark {
  background: var(--ink);
  color: var(--subtle);
}
.btn-dark:hover { background: #000; }

.btn-outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--border);
}
.btn-outline:hover {
  background: var(--subtle);
  border-color: var(--ink);
}

/* btn-light — cream/white-filled pill. Used in the home positioning
   CTA ladder for the middle (Request RFP) tier between the outline
   and accent pills (JL 2026-05-18). */
.btn-light {
  background: var(--cream, #F7F7F0);
  color: var(--ink, #020C0F);
  border-color: var(--cream, #F7F7F0);
}
.btn-light:hover { background: #fff; border-color: #fff; }
body.is-dark .btn-light,
body[data-force-dark="true"] .btn-light {
  background: #fff;
  color: var(--ink, #020C0F);
  border-color: #fff;
}
body.is-dark .btn-light:hover,
body[data-force-dark="true"] .btn-light:hover {
  background: var(--cream, #F7F7F0);
  border-color: var(--cream, #F7F7F0);
}

/* btn-accent — orange-filled pill. Conversion-tier CTA (the one we
   actually want clicked). Reads on both light and dark surfaces. */
.btn-accent {
  background: var(--accent, #F47620);
  color: #fff;
  border-color: var(--accent, #F47620);
}
.btn-accent:hover {
  background: var(--accent-dark, #D45A0F);
  border-color: var(--accent-dark, #D45A0F);
}

.btn-arrow {
  width: 20px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ========= SELECTED WORK ========= */
.selected-work {
  width: 100%;
  /* No background, no transition — body owns the surface color (see
     `.hero` for the longer explanation). Eliminates the 0.6s ease vs
     0.4s cubic-bezier desync that produced the "two sections" jank. */
  padding: 0;
}
.selected-work-inner {
  max-width: var(--max-wide);
  margin: 0 auto;
  padding: 10px var(--page-pad-x) 80px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.section-title {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--ink);
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 21px;
}

.work-card {
  height: 600px;
  border-radius: 15px;
  overflow: hidden;
  position: relative;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  transition: transform 0.25s;
}
.work-card:hover { transform: translateY(-4px); }

.work-card.one { background: linear-gradient(135deg, #4C3BA0 0%, #2B1F6B 100%);}
.work-card.one::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, #F47620 0%, #F47620 2%, transparent 2.5%),
    radial-gradient(circle at 52% 50%, #1E5CF7 0%, #1E5CF7 2.4%, transparent 2.9%),
    radial-gradient(circle at 48% 52%, #E15B5B 0%, #E15B5B 2%, transparent 2.5%);
}
.work-card.two {
  background: linear-gradient(180deg, #7CB8E3 0%, #5493C4 45%, #2E6B9E 100%);
}
.work-card.two::before {
  content: '';
  position: absolute;
  top: 30%; left: 35%;
  width: 280px; height: 200px;
  background: #F6EEDF;
  border-radius: 4px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.2);
  transform: rotate(-2deg);
}
.work-card.two::after {
  content: 'American\A Cancer\A Society';
  white-space: pre;
  position: absolute;
  top: 33%; left: 39%;
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 600;
  color: #1E2EC9;
  line-height: 1;
  transform: rotate(-2deg);
}
.work-card.three {
  background: linear-gradient(135deg, #F9D8B0 0%, #E89455 35%, #C4563B 100%);
}
.work-card.three::before {
  content: '';
  position: absolute;
  bottom: 20%; left: 30%;
  width: 240px; height: 280px;
  background: linear-gradient(180deg, #1E5CF7 0%, #3A2FA0 60%, #1B1054 100%);
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}
.work-card.four {
  background: linear-gradient(180deg, #EE6D4E 0%, #F5B048 60%, #D84D3C 100%);
}
.work-card.four::before {
  content: '';
  position: absolute;
  inset: 20% 25%;
  background: radial-gradient(circle at 50% 50%, #FFEFB8 0%, #FFB84D 40%, #E55F2B 100%);
  border-radius: 50%;
  box-shadow: 0 20px 50px rgba(0,0,0,0.2);
}

.work-tags {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
  z-index: 2;
  align-self: flex-start;
}
.work-tag {
  padding: 5px 11px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.work-card-label {
  position: relative;
  z-index: 2;
  font-family: var(--font-body);
  font-size: 14px;
  color: rgba(255,255,255,0.85);
  margin-top: auto;
  font-weight: 500;
}

/* ========= CLIENT LOGOS BAR ========= */
.logo-bar {
  width: 100%;
  background: var(--ink);
  padding: 36px 24px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 36px;
  flex-wrap: wrap;
}
.logo-bar-img {
  height: 56px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.85;
  transition: opacity 0.2s ease;
}
.logo-bar-img:hover { opacity: 1;}
@media (max-width: 900px) {
  .logo-bar { gap: 24px; padding: 24px 16px;}
  .logo-bar-img { height: 36px; max-width: 100px;}
}

/* ========= FOOTER ========= */
/* ========= FOOTER =========
   Same content grid as nav and body. Outer is full-bleed (dark
   background runs viewport edge to edge); inner caps at var(--max-wide)
   centered with var(--page-pad-x) horizontal padding so footer
   content aligns to the same vertical line as nav and body.
*/
.site-footer {
  background: var(--ink);
  color: #fff;
  padding: 60px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
}
.site-footer-inner {
  width: 100%;
  max-width: var(--max-wide);
  padding: 0 var(--page-pad-x);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  /* Was `gap: 60px` which added a tall void between the footer-top
     wordmark row and the rest of the columns. JL flagged 2026-05-18:
     "site-footer-inner has a 60px gap, you can remove it." */
  gap: 0;
}
.site-footer-divider {
  height: 1px;
  background: rgba(255,255,255,0.1);
  width: 100%;
}

.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}
.footer-brand-wordmark {
  height: 40px;
  width: auto;
  display: block;
}

.footer-badges {
  display: flex;
  align-items: center;
  gap: 20px;
}
.footer-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(255,255,255,0.06);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.1);
  color: #fff;
  font-size: 12px;
}
.footer-badge-icon {
  width: 20px; height: 20px;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  font-weight: 700;
}
.footer-badge-icon.hs { background: #FF7A59;}
.footer-badge-icon.tp { background: #00B67A; color: #000;}
.footer-badge-text { display: flex; flex-direction: column; gap: 1px;}
.footer-badge-text strong { font-weight: 700; font-size: 12px;}
.footer-badge-text span { font-size: 10px; opacity: 0.7;}
.footer-badge-stars { color: #00B67A; font-size: 11px; letter-spacing: 1px;}

.footer-nav {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 28px;
  align-items: flex-start;
  padding: 40px 0;
}
.footer-nav-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  font-family: var(--font-nav);
}
@media (max-width: 1100px) {
  .footer-nav { grid-template-columns: repeat(3, 1fr); gap: 32px 24px; padding: 32px 0; }
}
@media (max-width: 720px) {
  /* Single-column accordion on mobile. Each column collapses behind
     its title; tap the title to expand. Keeps the link inventory for
     SEO + navigation while taking the visual weight off the bottom of
     the page. Toggling is wired in footer.js via [data-collapsed]. */
  .footer-nav { grid-template-columns: 1fr; gap: 0; padding: 16px 0; }
  .footer-nav-col {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 14px 0;
    gap: 0;
    position: relative;
  }
  .footer-nav-col:last-child { border-bottom: 1px solid rgba(255,255,255,0.08); }
  .footer-nav-col[data-collapsed="true"] .footer-nav-link {
    display: none;
  }
  .footer-nav-col[data-collapsed="true"] > .footer-nav-title { margin-bottom: 0; }
  .footer-nav-col[data-collapsed="false"] > .footer-nav-title { margin-bottom: 12px; }
  .footer-nav-col > .footer-nav-title {
    font-size: 14px;
    width: 100%;
    cursor: pointer;
    user-select: none;
    padding-right: 36px;
    position: relative;
    transition: color 0.2s ease;
  }
  .footer-nav-col > .footer-nav-title::after {
    content: "";
    position: absolute;
    right: 4px;
    top: 50%;
    width: 10px;
    height: 10px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-70%) rotate(45deg);
    transition: transform 0.2s ease;
    opacity: 0.6;
  }
  .footer-nav-col[data-collapsed="false"] > .footer-nav-title::after {
    transform: translateY(-30%) rotate(-135deg);
  }
  .footer-nav-link { font-size: 14px; line-height: 1.4; padding: 12px 0 12px 4px; display: block; }
  .footer-top { flex-direction: column; align-items: flex-start; gap: 20px; }
  .footer-bottom { flex-direction: column-reverse; align-items: flex-start; gap: 18px; }
  .footer-final { flex-direction: column-reverse; align-items: flex-start; gap: 14px; padding-bottom: 24px; }
  .site-footer-inner { padding: 32px 16px 24px; }
}
.footer-nav-title {
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  text-transform: uppercase;
  line-height: 1.2;
  margin-bottom: 4px;
  text-decoration: none;
  display: inline-block;
  transition: color 0.2s ease;
}
a.footer-nav-title:hover { color: var(--accent); }
.footer-nav-link {
  font-size: 14px;
  font-weight: 500;
  color: #929292;
  line-height: 1.2;
  transition: color 0.15s;
}
.footer-nav-link:hover { color: #fff;}

.footer-bottom {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}
.footer-social {
  display: flex;
  align-items: center;
  gap: 46px;
}
.footer-social-icon {
  width: 20px;
  height: 20px;
  color: #fff;
  opacity: 0.8;
  transition: opacity 0.15s;
}
.footer-social-icon:hover { opacity: 1;}

.footer-legal {
  display: flex;
  gap: 62px;
  font-family: var(--font-small);
  font-size: 12px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.24px;
  align-items: center;
}
.footer-final {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  max-width: var(--max-wide);
  margin: 0 auto;
}
.footer-final .footer-copyright {
  text-align: left;
  flex: 1;
  width: auto;
}
.footer-portal-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-small);
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  text-decoration: none;
  transition: color 0.2s ease;
  white-space: nowrap;
}
.footer-portal-link:hover { color: var(--accent);}
.footer-portal-link svg { opacity: 1; flex-shrink: 0;}
.footer-final-links { display: inline-flex; align-items: center; gap: 22px; flex-wrap: wrap; justify-content: flex-end; }
.footer-final-links .footer-nav-link { font-family: var(--font-small); font-size: 11px; font-weight: 400; color: var(--grey-700); text-transform: uppercase; letter-spacing: 0.18em; text-decoration: none; transition: color 0.2s ease; }
.footer-final-links .footer-nav-link:hover { color: var(--accent); }
@media (max-width: 600px) {
  .footer-final { flex-direction: column; gap: 12px;}
  .footer-final .footer-copyright { text-align: center;}
  .footer-final-links { gap: 16px; justify-content: center; }
}

.site-footer .footer-final .footer-copyright,
.footer-copyright {
  font-family: var(--font-small);
  font-size: 12px;
  color: #6B6B6B;
  text-align: center;
}

/* ========= RESPONSIVE ========= */
@media (max-width: 1200px) {
  .hero-headline { font-size: 52px;}
  .positioning-headline { font-size: 52px;}
  .work-grid { grid-template-columns: repeat(2, 1fr); gap: 18px;}
  .work-card { height: 480px;}
}

@media (max-width: 900px) {
  .site-nav { padding: 14px 20px;}
  .site-nav-link { padding: 10px 12px; font-size: 14px;}
  .hero { padding: 140px 24px 24px; min-height: auto;}
  .hero-headline { font-size: 44px; gap: 6px;}
  .positioning { height: auto; padding: 40px 24px;}
  .positioning-inner { padding: 60px 0;}
  .positioning-headline { font-size: 44px;}
  .featured-image { padding: 0 20px;}
  .featured-image-inner { height: 320px;}
  .featured-image-sticker { transform: scale(0.7) !important;}
  .selected-work-inner { padding: 0 20px 60px;}
  .work-grid { grid-template-columns: 1fr;}
  .work-card { height: 380px;}
  .section-title { font-size: 28px;}
  .logo-bar { gap: 20px; padding: 16px;}
  .logo-bar-item { height: 40px; padding: 0 12px;}
  .site-footer { padding: 40px 16px;}
  .footer-top { flex-direction: column; align-items: flex-start;}
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 20px;}
  .footer-social { gap: 24px;}
  .footer-legal { gap: 24px;}
}

/* Hamburger nav: show on mobile, hide desktop links */
@media (max-width: 720px) {
  .site-nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .site-nav-links { display: none; }
  .site-logo { display: inline-flex; height: 22px; }
  .site-logo-smiley { display: none; }
}

@media (max-width: 560px) {
  .site-logo { height: 20px;}
  .hero-headline { font-size: 36px;}
  .positioning-headline { font-size: 32px;}
  .work-card { height: 300px; padding: 20px;}
  .featured-image-inner { height: 240px;}
  .featured-image-sticker.one { width: 80px; height: 80px; font-size: 12px;}
  .featured-image-sticker.two { width: 80px; height: 80px; font-size: 14px;}
  .featured-image-sticker.three { width: 80px; height: 80px; font-size: 10px;}
  .featured-image-sticker.four { width: 70px; height: 70px; font-size: 12px;}
  .featured-image-sticker.five { width: 80px; height: 80px; font-size: 12px;}
}

/* ============================================================
   Readability safety net for dark-mode scroll transition
   ============================================================ */
body.is-dark .positioning-sub { color: rgba(255,255,255,0.7);}
body.is-dark .positioning-inner .positioning-ctas .btn-outline { color: #fff; border-color: rgba(255,255,255,0.25);}
body.is-dark h1, body.is-dark h2, body.is-dark h3, body.is-dark h4 { color: #fff;}
body.is-dark p { color: rgba(255,255,255,0.85);}
/* Exception: within explicitly-light-backgrounded regions, keep original dark text */
body.is-dark .seo-section:not(.dark) h1,
body.is-dark .seo-section:not(.dark) h2,
body.is-dark .seo-section:not(.dark) h3,
body.is-dark .seo-section:not(.dark) h4,
body.is-dark .seo-section:not(.dark) p,
body.is-dark .seo-section:not(.dark) strong,
body.is-dark .seo-section:not(.dark) span { color: var(--ink);}
body.is-dark .seo-section:not(.dark) .seo-section-eyebrow,
body.is-dark .seo-section:not(.dark) .accent { color: var(--accent);}
body.is-dark .seo-core-card p { color: #3D434A;}
body.is-dark .seo-section.dark p { color: rgba(247,247,240,0.82);}
body.is-dark .seo-section.dark .seo-core-card p { color: rgba(247,247,240,0.7);}

/* ============================================================
   Case study body — section headings inside pf-intro-body
   ============================================================ */
.pf-intro-body .pf-section-h {
  font-family: "matrix-ii", serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.2;
  color: #F7F7F0;
  margin: 48px 0 16px;
  letter-spacing: -0.5px;
}
.pf-intro-body .pf-section-h:first-child { margin-top: 32px; }
.pf-intro-body blockquote {
  border-left: 3px solid #F47620;
  padding: 4px 0 4px 20px;
  margin: 24px 0;
  font-family: "matrix-ii", serif;
  font-size: 24px;
  line-height: 1.3;
  color: #F47620;
}
.pf-intro-body blockquote p { margin: 0; }
.pf-intro-body strong { color: #F7F7F0; font-weight: 500; }
@media (max-width: 900px) {
  .pf-intro-body .pf-section-h { font-size: 24px; margin: 36px 0 12px; }
  .pf-intro-body blockquote { font-size: 20px; }
}

/* ============================================================
   NOTES CARD GRID — used on /notes.html, /notes/<category>/,
   /category/<slug>/. Three-up text cards with hover lift and
   accent top-bar slide-in. No featured image required.
   ============================================================ */
.nt-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.nt-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 28px 28px 24px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  position: relative;
  overflow: hidden;
  min-height: 280px;
}
.nt-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(2,12,15,0.06);
}
/* JL 2026-05-19: replaced the 3px top accent bar with a full-perimeter
   orange outline that reveals left-to-right via clip-path. The earlier
   version painted a thick top edge that read as a separate visual
   element (and was duplicated by the card's own 1px border turning
   orange on hover). Now the card's border stays neutral and a single
   accent stroke sweeps across on hover.

   inset: 0 (not -1px) so the ::before stays INSIDE the card's
   overflow: hidden clip. box-shadow inset draws a 1px orange ring at
   the inner edge of the grey border — visually the orange stroke
   appears to replace the grey one as the clip-path reveals. */
.nt-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--accent);
  pointer-events: none;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.nt-card:hover::before { clip-path: inset(0 0 0 0); }
.nt-card-eyebrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.nt-card-cat {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.nt-card-date {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.nt-card-title {
  font-family: "matrix-ii", serif;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.4px;
  color: var(--ink);
  margin: 0 0 14px;
  transition: color 0.2s ease;
}
.nt-card:hover .nt-card-title { color: var(--accent); }
.nt-card-excerpt {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.55;
  color: #3D434A;
  margin: 0 0 22px;
  flex: 1 1 auto;
}
.nt-card-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  transition: color 0.2s ease, gap 0.25s ease;
}
.nt-card:hover .nt-card-arrow {
  color: var(--accent);
  gap: 14px;
}
.nt-empty {
  grid-column: 1 / -1;
  padding: 80px 24px;
  text-align: center;
  color: var(--muted);
  font-style: italic;
}
@media (max-width: 1100px) {
  .nt-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
@media (max-width: 700px) {
  .nt-grid { grid-template-columns: 1fr; gap: 14px; }
  .nt-card { padding: 24px 22px 20px; min-height: 0; }
  .nt-card-title { font-size: 24px; }
}

/* ============================================================
   STICKY CTA — bottom-right floating "Schedule a call" pill.
   Appears on every page after a short delay, hides on the
   schedule-a-call page itself and on the 404. Hides briefly
   when user scrolls up (gives the reader a break).
   ============================================================ */
.sc-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 980;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px 14px 26px;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  /* Keep "Schedule a call" on a single line on every viewport.
     The flex item's text node was breaking onto two lines at narrow
     widths (JL 2026-05-18). */
  white-space: nowrap;
  border-radius: 999px;
  box-shadow: 0 8px 28px rgba(2, 12, 15, 0.18), 0 2px 6px rgba(2, 12, 15, 0.08);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
              background 0.2s ease,
              box-shadow 0.25s ease,
              gap 0.25s ease;
  pointer-events: none;
}
.sc-fab.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
/* Mobile: center the FAB horizontally so it doesn't crowd the right edge.
   Desktop keeps the bottom-right anchor unchanged. */
@media (max-width: 720px) {
  .sc-fab {
    right: auto;
    left: 50%;
    transform: translate(-50%, 20px);
  }
  .sc-fab.is-visible {
    transform: translate(-50%, 0);
  }
}
.sc-fab:hover {
  background: var(--accent);
  gap: 14px;
  box-shadow: 0 14px 38px rgba(244, 118, 32, 0.35), 0 2px 6px rgba(2, 12, 15, 0.08);
}
.sc-fab-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(244, 118, 32, 0.55);
  animation: scFabPulse 2.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.sc-fab:hover .sc-fab-pulse {
  background: #fff;
  animation: none;
}
.sc-fab-arrow {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
}
.sc-fab-arrow svg { display: block; }
@keyframes scFabPulse {
  0%   { box-shadow: 0 0 0 0 rgba(244, 118, 32, 0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(244, 118, 32, 0); }
  100% { box-shadow: 0 0 0 0 rgba(244, 118, 32, 0); }
}

/* On dark pages (case studies, grow), invert: cream pill on dark.
   The cream version pops against the dark hero/gallery. */
body.is-dark .sc-fab,
body[data-force-dark="true"] .sc-fab {
  background: var(--cream);
  color: var(--ink);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}
body.is-dark .sc-fab:hover,
body[data-force-dark="true"] .sc-fab:hover {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 14px 38px rgba(244, 118, 32, 0.4);
}

@media (max-width: 600px) {
  .sc-fab {
    right: 16px;
    bottom: 16px;
    padding: 12px 18px 12px 20px;
    font-size: 12px;
    letter-spacing: 0.05em;
  }
}

/* ============================================================
   CASE STUDY LAYOUT — locked
   Hero is the only full-bleed element. Every content section
   is boxed at --max-wide with consistent 65px gutters.
   Edit here, not in per-page <style> blocks.
   ============================================================ */
body[data-force-dark="true"] { background: #020C0F; color: #F7F7F0; }

/* Solid nav bar above the hero on case study pages.
   Scoped to `[data-force-dark="true"]` only — that attribute is set
   by the case study BodyClass component and signals "this is a
   permanently-dark page." The home page's scroll-triggered dark mode
   sets `body.is-dark` WITHOUT data-force-dark, so it correctly
   inherits the default position:absolute transparent nav and fades
   uniformly with the body. Per JL 2026-05-17 video — the rule used
   to also target `body.is-dark` which broke the home scroll-fade
   into three visible bands (full-width solid nav + body fade + reel
   frame). Removing the is-dark match resolves it. */
/* Solid case-study nav override REMOVED per JL 2026-05-18.

   Previously `body[data-force-dark="true"] .site-nav` made the nav a
   full-width, full-bleed solid bar (width:100%, max-width:none,
   position:relative, ink bg). It fired on /portal, /about, /work,
   /team/[slug], and the 5 case studies that don't carry the
   cs-hero-overlay class.

   JL flagged: "navigation throughout the whole site should be the same
   width and not change." Letting the default `.site-nav` rule own the
   width on every page — max-width: var(--max-wide), centered. The text
   color rules from `body.is-dark .site-nav-link` etc. still flip the
   nav to white-on-dark on dark pages without needing the solid bar.

   Case-study pages that want the floating-over-hero treatment use the
   `body.cs-hero-overlay[data-force-dark="true"] .site-nav` variant
   below; that rule is unchanged. */

/* Overlay hero layout — nav floats over the hero image, no solid bar.
   Apply by adding `cs-hero-overlay` to the body. The hero shifts up to
   sit under the nav, and the nav goes back to absolute + transparent. */
body.cs-hero-overlay.is-dark .site-nav,
body.cs-hero-overlay[data-force-dark="true"] .site-nav {
  position: absolute !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: translateX(-50%) !important;
  left: 50% !important;
  width: 100% !important;
  max-width: 1440px !important;
  padding: 22px var(--page-pad-x) !important;
}
body.cs-hero-overlay .pf-hero { margin-top: 0; }

/* Hero — full-bleed, the only thing that breaks the box */
.pf-hero {
  position: relative;
  width: 100%;
  height: 70vh;
  min-height: 560px;
  overflow: hidden;
  background: var(--hero-bg, #020C0F);
}
.pf-hero img,
.pf-hero video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Logo overlay sits on top of the hero video/bg, centered, free aspect. */
.pf-hero img.pf-hero-logo {
  inset: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: auto;
  max-width: 440px;
  max-height: 56%;
  object-fit: contain;
  z-index: 2;
}
.pf-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(2,12,15,0.1) 0%, rgba(2,12,15,0) 30%, rgba(2,12,15,0.6) 100%);
  pointer-events: none;
}

/* Title block — boxed */
.cs-titleblock {
  background: #020C0F;
  color: #F7F7F0;
  /* Use the site-wide gutter so the case-study title aligns with
     the nav logo + every section edge. v1 shipped a hardcoded 20px
     here which broke the universal grid on wide viewports (logo at
     ~65px from edge, case-study title at 20px). JL flagged
     2026-05-18. */
  padding: 60px var(--page-pad-x) 30px;
}
.cs-titleblock-inner {
  max-width: var(--max-wide);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
}
.cs-h1 {
  font-family: "matrix-ii", serif;
  font-size: 56px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -1.5px;
  color: #F7F7F0;
  margin: 0 0 6px;
}
.cs-url {
  font-family: var(--font-body);
  font-size: 14px;
  color: rgba(247,247,240,0.5);
  text-decoration: none;
}
.cs-url:hover { color: var(--accent); }
.cs-tag {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(247,247,240,0.5);
}

/* Intro — boxed, two-column with services sidebar */
.cs-intro {
  background: #020C0F;
  color: #F7F7F0;
  padding: 0 var(--page-pad-x) 60px;
}
.cs-intro-inner {
  max-width: var(--max-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 80px;
  align-items: start;
}
.cs-intro-body p,
.cs-intro-body .cs-intro-p {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: rgba(247,247,240,0.85);
  margin: 0 0 18px;
}
.cs-intro-body strong { color: #F7F7F0; font-weight: 500; }
.cs-intro-lead { font-weight: 500; color: #F7F7F0; }
.cs-intro-h2 {
  font-family: "matrix-ii", serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.2;
  color: #F7F7F0;
  margin: 36px 0 14px;
  letter-spacing: -0.3px;
}
.cs-intro-h2:first-child { margin-top: 0; }
.cs-services-label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(247,247,240,0.5);
  margin-bottom: 16px;
}
.cs-services-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.9;
  color: rgba(247,247,240,0.7);
}

/* Stats — boxed */
.cs-stats {
  background: #020C0F;
  padding: 40px var(--page-pad-x) 60px;
  border-top: 1px solid rgba(247,247,240,0.08);
}
.cs-stats-inner {
  max-width: var(--max-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
}
.cs-stat { padding: 24px 0; }
.cs-stat-value {
  /* Serif Moret (Adobe Fonts) with Fraunces (Google Fonts) and
     matrix-ii fallbacks — matches v1 production baseline. */
  font-family: var(--font-numbers);
  font-size: 88px;
  font-weight: 400;
  line-height: 1;
  color: var(--accent);
  letter-spacing: -0.04em;
  font-variant-numeric: lining-nums tabular-nums;
}
.cs-stat-label {
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(247,247,240,0.7);
  margin-top: 12px;
  line-height: 1.4;
}

/* Visual gallery — boxed (the lockdown rule).
   max-width includes the 20px gutters so the inner content area
   lines up with the footer / cs-titleblock-inner / cs-intro-inner
   at every viewport size. */
.pf-body {
  background: #020C0F;
  /* The inner content area must match .cs-intro-inner / .cs-titleblock-inner
     (those use band+inner: band has padding, inner has max-width=var(--max-wide)).
     pf-body has padding AND max-width on the same element, so its content
     area was --max-wide - 2*var(--page-pad-x), i.e. ~130px narrower than
     cs-* sections — image gallery sat ~65px right of body copy. Extend
     max-width by 2*var(--page-pad-x) so the *content* area equals
     var(--max-wide). JL flagged 2026-05-19 with a vertical alignment
     line on /work/jll. */
  max-width: calc(var(--max-wide) + 2 * var(--page-pad-x));
  margin: 0 auto;
  padding: 40px var(--page-pad-x) 80px;
}
.pf-row {
  margin: 0 0 16px;
  background: var(--row-bg, transparent);
  padding: var(--row-pad, 0);
  border-radius: var(--row-radius, 0);
  box-sizing: border-box;
}
.pf-row:last-child { margin-bottom: 0; }
/* When a row has a tinted background, drop the dark fill from each
   media-item so the row's color shows behind transparent PNGs. */
.pf-row[style*="--row-bg"] .pf-media-item { background: var(--cell-bg, transparent); }
.pf-row-full { display: block; }
.pf-row-full .pf-media-item { width: 100%; }
/* Lock full-width video cells to 16:9 so they don't collapse to the
   browser's default video element height (~150px) before metadata loads.
   The video itself uses cover to fill, so even non-16:9 sources fit cleanly. */
.pf-row-full .pf-media-item.pf-video,
.pf-row-full .pf-media-item:has(> video) {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.pf-row-full .pf-media-item.pf-video video,
.pf-row-full .pf-media-item:has(> video) video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pf-row-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pf-row-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
.pf-row-1-2 { display: grid; grid-template-columns: 1fr 2fr; gap: 16px; }
.pf-row-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pf-row-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pf-row-small { max-width: 720px; margin: 16px auto; }
.pf-row-accent { max-width: 480px; margin: 24px auto; }
.pf-media-item {
  position: relative;
  background: #0D1417;
  border-radius: 8px;
  overflow: hidden;
}
.pf-media-item img,
.pf-media-item video {
  width: 100%;
  height: auto;
  display: block;
}
.pf-row-split .pf-media-item,
.pf-row-grid-3 .pf-media-item,
.pf-row-grid-4 .pf-media-item { aspect-ratio: 1 / 1; }
/* 2/3 + 1/3 rows: row holds a 16:9 aspect, cells stretch to fill, cover */
.pf-row-2-1, .pf-row-1-2 { aspect-ratio: 16 / 9; }
.pf-row-2-1 .pf-media-item, .pf-row-1-2 .pf-media-item { overflow: hidden; min-height: 0; }
.pf-row-2-1 .pf-media-item img, .pf-row-2-1 .pf-media-item video,
.pf-row-1-2 .pf-media-item img, .pf-row-1-2 .pf-media-item video {
  width: 100%; height: 100%; object-fit: var(--cell-fit, cover);
}
.pf-row-split .pf-media-item img,
.pf-row-split .pf-media-item video {
  width: 100%;
  height: 100%;
  /* Two-up rows default to cover so both cells fill the same square,
     no letterbox gaps. Override per-row with style="--cell-fit:contain". */
  object-fit: var(--cell-fit, cover);
}
.pf-row-grid-3 .pf-media-item img,
.pf-row-grid-3 .pf-media-item video,
.pf-row-grid-4 .pf-media-item img,
.pf-row-grid-4 .pf-media-item video {
  width: 100%;
  height: 100%;
  object-fit: var(--cell-fit, contain);
}

/* Asymmetric grid: first cell takes left column spanning two rows,
   remaining two cells stack on the right. Aspect-ratio holds shape. */
.pf-row-asymmetric {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 16px;
  aspect-ratio: 21 / 12;
}
.pf-row-asymmetric .pf-media-item {
  position: relative;
  overflow: hidden;
  min-height: 0;
}
.pf-row-asymmetric .pf-media-item:first-child {
  grid-row: 1 / span 2;
  grid-column: 1;
}
.pf-row-asymmetric .pf-media-item img,
.pf-row-asymmetric .pf-media-item video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: var(--cell-fit, cover) !important;
}
@media (max-width: 720px) {
  .pf-row-asymmetric {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    aspect-ratio: auto;
  }
  .pf-row-asymmetric .pf-media-item:first-child { grid-row: auto; grid-column: auto; }
  .pf-row-asymmetric .pf-media-item { aspect-ratio: 5 / 4; }
}

/* Selected work — boxed */
.cs-related {
  background: #020C0F;
  padding: 80px var(--page-pad-x);
  border-top: 1px solid rgba(247,247,240,0.08);
}
.cs-related-inner {
  max-width: var(--max-wide);
  margin: 0 auto;
}
.cs-related-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 28px;
  gap: 16px;
}
.cs-related-title {
  font-family: "matrix-ii", serif;
  font-size: 36px;
  font-weight: 400;
  letter-spacing: -0.5px;
  color: #F7F7F0;
  margin: 0;
}
.cs-related-back {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #F7F7F0;
  padding: 10px 22px;
  border: 1px solid rgba(247,247,240,0.25);
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.cs-related-back:hover { background: rgba(247,247,240,0.06); border-color: #F7F7F0; }
.cs-related-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.cs-related-card {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  background: #0D1417;
  border-radius: 8px;
  overflow: hidden;
}
.cs-related-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.cs-related-card:hover img { transform: scale(1.04); }

/* ============================================================
   WORK SLIDER — used on home page Selected Work AND on case study
   bottom "Selected Work" related strips. Square cards, horizontal
   scroll-snap, hover reveals tags + title with a stagger.
   ============================================================ */
.work-slider-wrap {
  position: relative;
  /* Full-bleed wrap — break out of any max-width parent and span
     viewport edge to viewport edge. The slider's scroll-padding then
     pulls the first/last card back to the content grid edges so they
     snap flush at scroll=start and scroll=end. Cards in between bleed
     off the viewport on whichever side isn't snapped. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 8px;
  padding-bottom: 36px;
}
.work-slider {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  /* Snap distance from the viewport edge to the section's content grid
     edge. At desktop = (viewport - max-wide)/2 + page-pad-x ≈ 97.6px at
     1440 viewport. At mobile/tablet (when viewport <= max-wide) it floors
     to var(--page-pad-x) so the first card sits at the standard gutter. */
  scroll-padding-left: max(var(--page-pad-x), calc((100vw - var(--max-wide)) / 2 + var(--page-pad-x)));
  scroll-padding-right: max(var(--page-pad-x), calc((100vw - var(--max-wide)) / 2 + var(--page-pad-x)));
  padding-top: 12px;
  padding-bottom: 24px;
  /* Inner padding mirrors scroll-padding so the first card's natural
     position equals its snap target — no jank on initial render. */
  padding-left: max(var(--page-pad-x), calc((100vw - var(--max-wide)) / 2 + var(--page-pad-x)));
  padding-right: max(var(--page-pad-x), calc((100vw - var(--max-wide)) / 2 + var(--page-pad-x)));
  margin-left: 0;
  margin-right: 0;
  /* Slim, visible scrollbar — gives Windows users an obvious discovery cue
     that the row is scrollable. Mac trackpad users still get smooth scrolling. */
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--border) 100%, transparent) transparent;
  cursor: grab;
  user-select: none;
}
.work-slider::-webkit-scrollbar { height: 8px; }
.work-slider::-webkit-scrollbar-track { background: transparent; }
.work-slider::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--ink) 18%, transparent);
  border-radius: 4px;
  transition: background 0.2s ease;
}
.work-slider::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--ink) 35%, transparent);
}
.work-slider.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.work-slider.is-dragging .work-card { pointer-events: none; }
.work-slider .work-card {
  flex: 0 0 calc((100% - 2 * 24px) / 2.33);
  scroll-snap-align: start;
}
.work-card {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  background: #1A1A1A;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  padding: 0;
  height: auto;
}
.work-card:hover { transform: translateY(-6px); }
.work-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.work-card:hover .work-card-img { transform: scale(1.04); }

/* === Per-project cover focal-point overrides ===
   Default object-position is center, but some covers have their key subject
   off-center in the source image. Shift the focal point so the subject stays
   visible when the image is square-cropped into a card. */
.work-card-img[src$="seagulls.jpg"],
.work-card-img[src$="seagulls.png"],
.arc-card-cover img[src$="seagulls.jpg"],
.arc-card-cover img[src$="seagulls.png"] {
  object-position: 33% center;
}
.work-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.5) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 1;
  pointer-events: none;
}
.work-card:hover::after { opacity: 1; }
.work-card-content {
  position: absolute;
  inset: 0;
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 2;
  pointer-events: none;
}
.work-tags {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
}
.work-tag {
  padding: 2px 11px;
  background: rgba(0,0,0,0.8);
  color: #F7F7F0;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.9;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: 999px;
  display: inline-block;
  opacity: 0;
  transform: translateY(-50px) rotate(-45deg);
  transition: opacity 0.5s, transform 0.5s;
}
.work-card:hover .work-tag {
  opacity: 1;
  transform: translateY(0) rotate(0);
  transition-delay: var(--delay, 0ms);
}
.work-card-label {
  color: #fff;
  font-family: "aktiv-grotesk", "Inter", system-ui, sans-serif;
  font-size: 32px;
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 12px rgba(0,0,0,0.4);
  display: inline-block;
  opacity: 0;
  transform: translateY(50px) rotate(15deg);
  transform-origin: left bottom;
  transition: opacity 0.5s, transform 0.5s;
}
.work-card:hover .work-card-label {
  opacity: 1;
  transform: translateY(0) rotate(0);
}
.work-slider-hint {
  position: absolute;
  right: 20px;
  bottom: 4px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  transition: color 0.2s ease;
  background: transparent;
  border: 0;
  padding: 4px 0;
}
.work-slider-hint:hover { color: var(--ink); }
body.is-dark .work-slider-hint:hover,
[data-force-dark] .work-slider-hint:hover { color: #F7F7F0; }
.work-slider-hint::before {
  content: '→';
  font-size: 14px;
  color: var(--accent);
  transition: transform 0.25s ease;
}
.work-slider-hint:hover::before { transform: translateX(3px); }
@media (max-width: 1100px) {
  .work-slider .work-card { flex: 0 0 calc((100% - 24px) / 1.33); }
}
@media (max-width: 700px) {
  .work-slider .work-card { flex: 0 0 85%; }
  .work-card-label { font-size: 24px; }
}

/* ============================================================
   COL-PROCESS — editorial dark-ledger process section
   Used on moments/* and goals/exit-ready for "How we move through it."
   Full-bleed dark band with Roman-numeral numbered phases, hairline rules
   between rows, and matrix-ii display set at moderate sizes. Replaces the
   older animated .g-process timeline.
   ============================================================ */
.col-process {
  background: var(--ink);
  color: var(--cream);
  /* Full-bleed dark background runs viewport edge to edge; horizontal
     gutter lives on the direct children below so content snaps to the
     same grid line as nav, body, and footer. */
  padding: 140px 0;
  border-top: 1px solid color-mix(in srgb, var(--cream) 8%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--cream) 8%, transparent);
}
.col-process > .col-process-head,
.col-process > .col-process-list,
.col-process > .col-process-closing {
  max-width: var(--max-wide);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--page-pad-x);
  padding-right: var(--page-pad-x);
  box-sizing: border-box;
}
.col-process-head { margin-bottom: 64px; }
.col-process-head .col-tag,
.col-process-head .col-process-eyebrow {
  font-family: "aktiv-grotesk", var(--font-body);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: 0.55;
  display: inline-block;
}
.col-process-head h2 {
  font-family: "matrix-ii", serif;
  font-weight: 400;
  font-size: clamp(28px, 3.5vw, 48px);
  line-height: 0.98;
  letter-spacing: -1.5px;
  margin: 16px 0 0;
  color: var(--cream);
  max-width: 18ch;
}
.col-process-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.col-process-step {
  display: grid;
  grid-template-columns: 100px 280px 1fr;
  gap: 48px;
  padding: 36px 0;
  border-top: 1px solid color-mix(in srgb, var(--cream) 14%, transparent);
  align-items: baseline;
}
.col-process-step:last-child {
  border-bottom: 1px solid color-mix(in srgb, var(--cream) 14%, transparent);
}
.col-process-step-n {
  font-family: "matrix-ii", serif;
  font-style: italic;
  font-size: 28px;
  color: var(--accent);
  margin: 0;
}
.col-process-step-tag {
  font-family: "matrix-ii", serif;
  font-size: clamp(19px, 1.7vw, 24px);
  line-height: 1.2;
  letter-spacing: -0.3px;
  color: var(--cream);
  margin: 0;
}
.col-process-step p {
  font-family: "aktiv-grotesk", var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--cream);
  opacity: 0.82;
  margin: 0;
  max-width: 56ch;
}
/* Closing thought below the process list — singular italic statement that
   serves as the section's exit line, not a step in the process. Sits in the
   same dark band but visually separated from the numbered ledger above. */
.col-process-closing {
  font-family: "matrix-ii", serif;
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.3;
  letter-spacing: -0.4px;
  color: var(--cream);
  margin: 56px 0 0;
  padding-top: 40px;
  max-width: 56ch;
}
.col-process-closing em { color: var(--accent); }
@media (max-width: 900px) {
  .col-process { padding: 100px 0; }
  .col-process-step { grid-template-columns: 50px 1fr; gap: 14px 18px; }
  .col-process-step-tag { grid-column: 2; margin-bottom: 8px; }
  .col-process-step p { grid-column: 2; }
  .col-process-closing { margin-top: 40px; padding-top: 28px; font-size: 22px; }
}

/* Final CTA — boxed, dark section to close the page */
.cs-final-cta {
  background: #020C0F;
  color: #F7F7F0;
  padding: 100px var(--page-pad-x) 120px;
  border-top: 1px solid rgba(247,247,240,0.08);
}
.cs-final-cta-inner {
  max-width: var(--max-wide);
  margin: 0 auto;
}
.cs-final-cta-h2 {
  font-family: "matrix-ii", serif;
  font-size: 56px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -1px;
  color: #F7F7F0;
  margin: 0 0 36px;
  max-width: 900px;
}
.cs-final-cta-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Read More collapse on the cs-intro body.
   No max-height transition — it traps the computed value on certain
   browser/grid-parent combos. Instant snap is fine; the fade gradient
   below softens the visual. */
.cs-body-collapsed {
  position: relative;
  max-height: 360px;
  overflow: hidden;
}
.cs-body-collapsed.is-open {
  max-height: none;
}
.cs-body-collapsed::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 120px;
  background: linear-gradient(180deg, rgba(2,12,15,0) 0%, rgba(2,12,15,0.95) 100%);
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.cs-body-collapsed.is-open::after { opacity: 0; }
.cs-body-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding: 12px 26px;
  background: transparent;
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: var(--accent);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.cs-body-toggle:hover { background: var(--accent); color: #fff; }
.cs-body-toggle .icon { transition: transform 0.3s ease; }
.cs-body-toggle.is-open .icon { transform: rotate(180deg); }

/* ============================================================
   CASE STUDY EDITORIAL — restrained chapter layout with sticky
   results sidebar. Replaces the dense single-column .cs-intro-body
   pattern. Wrap with .cs-intro-rd to opt in.
   ============================================================ */
.cs-intro-rd {
  background: #020C0F;
  color: #F7F7F0;
  /* Universal grid: match .cs-titleblock / .cs-related / .cs-final-cta.
     v1 shipped hardcoded 20px here which left rd-grid content sitting
     ~45px left of the titleblock h1 on wide viewports. JL flagged
     2026-05-19 (the blue alignment line on /work/jll). */
  padding: 0 var(--page-pad-x) 80px;
}
.rd-grid {
  max-width: var(--max-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 80px;
  padding-top: 56px;
}
.rd-main { min-width: 0; }
.rd-aside { position: sticky; top: 80px; align-self: start; }

.rd-stats { display: flex; flex-direction: column; gap: 32px; }
.rd-stat-eyebrow {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(247,247,240,0.4);
  margin-bottom: 24px;
}
.rd-stat-value {
  /* Serif Moret stack via --font-numbers — v1 production baseline. */
  font-family: var(--font-numbers);
  font-size: 56px;
  font-weight: 400;
  line-height: 0.95;
  color: #F7F7F0;
  letter-spacing: -0.3px;
  font-variant-numeric: lining-nums tabular-nums;
}
.rd-stat-value-sm {
  font-size: 24px;
  line-height: 1.2;
}
.rd-stat-label {
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(247,247,240,0.6);
  margin-top: 10px;
  line-height: 1.45;
  letter-spacing: 0.02em;
}
.rd-credits {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid rgba(247,247,240,0.1);
}
.rd-credits.is-first { margin-top: 0; padding-top: 0; border-top: 0; }
.rd-credits-label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(247,247,240,0.4);
  margin-bottom: 14px;
}
.rd-credits-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.85;
  color: rgba(247,247,240,0.7);
}

.rd-chapter { margin: 0 0 48px; }
.rd-chapter:last-child { margin-bottom: 0; }
.rd-chapter-tag {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(247,247,240,0.45);
  margin-bottom: 16px;
  display: block;
}
.rd-chapter-lede {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: #F7F7F0;
  margin: 0 0 16px;
  font-weight: 400;
}
.rd-chapter p {
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.7;
  color: rgba(247,247,240,0.78);
  margin: 0 0 16px;
}
.rd-chapter p strong { color: #F7F7F0; font-weight: 500; }
.rd-pullquote {
  font-family: "matrix-ii", serif;
  font-size: 22px;
  line-height: 1.35;
  font-style: italic;
  color: rgba(247,247,240,0.9);
  margin: 28px 0 28px 24px;
  padding: 0;
  border: 0;
}

.rd-expandable {
  position: relative;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}
.rd-expandable.is-open { max-height: 9000px; }
.rd-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  padding: 10px 22px;
  background: transparent;
  border: 1px solid rgba(247,247,240,0.25);
  border-radius: 999px;
  color: #F7F7F0;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.rd-toggle:hover {
  border-color: rgba(247,247,240,0.55);
  background: rgba(247,247,240,0.04);
}
.rd-toggle .icon { transition: transform 0.3s ease; }
.rd-toggle.is-open .icon { transform: rotate(180deg); }

@media (max-width: 900px) {
  .rd-grid {
    grid-template-columns: 1fr;
    gap: 48px;
    padding-top: 32px;
  }
  .rd-aside { position: static; order: -1; }
  /* On mobile/tablet: eyebrow becomes full-width section header,
     stats sit below in a 2-col grid (or 1-col on narrow phones). */
  .rd-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 32px;
  }
  .rd-stats .rd-stat-eyebrow {
    grid-column: 1 / -1;
    margin-bottom: 4px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(247,247,240,0.08);
  }
  .rd-stat-value { font-size: 44px; }
  .rd-credits { margin-top: 32px; }
}
@media (max-width: 600px) {
  .cs-intro-rd { padding: 0 var(--page-pad-x) 48px; }
  .rd-stats { grid-template-columns: 1fr; gap: 20px; }
  .rd-stat-value { font-size: 40px; }
  .rd-pullquote { font-size: 18px; margin-left: 12px; }
}

/* ============================================================
   LEGAL PAGES — Terms / Privacy.
   Shared template: hero with eyebrow + title + lede + meta chips,
   two-column body with sticky table of contents on the left,
   article on the right, plus a closing CTA.
   ============================================================ */
.lg-hero {
  padding: 130px var(--page-pad-x) 56px;
  border-bottom: 1px solid rgba(2,12,15,0.08);
}
.lg-hero-inner {
  max-width: var(--max-wide);
  margin: 0 auto;
}
.lg-eyebrow {
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.lg-h1 {
  font-family: "matrix-ii", serif;
  font-size: 96px;
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -2px;
  color: var(--ink);
  margin: 0 0 28px;
}
.lg-lede {
  font-family: "matrix-ii", serif;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.4px;
  color: #3D434A;
  max-width: 820px;
  margin: 0 0 36px;
}
.lg-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.lg-meta-item {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink);
  padding: 10px 18px;
  background: rgba(2,12,15,0.04);
  border: 1px solid rgba(2,12,15,0.08);
  border-radius: 999px;
}
.lg-meta-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* TOC col 1 (240px), article col 2 (1fr) — matches v1's johnluke.com
   exactly. Source order in the v1 HTML body is <aside class="lg-toc">
   FIRST, then <article class="lg-article">, so the natural CSS Grid
   placement lands them in the right columns without explicit
   `grid-column` overrides. An earlier attempt at swapping (article
   left, toc right) with explicit grid-columns left the body content
   apparently missing on /terms-of-service + /privacy-policy
   (JL 2026-05-19 with screenshot). Reverted to v1's exact rule. */
.lg-body {
  max-width: var(--max-wide);
  margin: 0 auto;
  padding: 80px var(--page-pad-x) 100px;
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 80px;
  align-items: start;
}
.lg-toc {
  position: sticky;
  top: 100px;
}
.lg-toc-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}
.lg-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: toc;
}
.lg-toc-list li {
  counter-increment: toc;
  border-top: 1px solid rgba(2,12,15,0.1);
}
.lg-toc-list li:last-child { border-bottom: 1px solid rgba(2,12,15,0.1); }
.lg-toc-list a {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 0;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink);
  text-decoration: none;
  transition: color 0.2s;
}
.lg-toc-list a::before {
  content: counter(toc, decimal-leading-zero);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--muted);
  flex-shrink: 0;
}
.lg-toc-list a:hover { color: var(--accent); }

.lg-article {
  font-family: var(--font-body);
  max-width: 740px;
}
.lg-intro {
  font-family: "matrix-ii", serif;
  font-size: 22px;
  line-height: 1.4;
  letter-spacing: -0.3px;
  color: var(--ink);
  margin: 0 0 48px;
}
.lg-section {
  padding: 36px 0;
  border-top: 1px solid rgba(2,12,15,0.1);
  scroll-margin-top: 100px;
}
.lg-section:first-of-type { border-top: 1px solid rgba(2,12,15,0.18); }
.lg-section h2 {
  font-family: "matrix-ii", serif;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.4px;
  color: var(--ink);
  margin: 0 0 16px;
}
.lg-section p {
  font-size: 16px;
  line-height: 1.7;
  color: #3D434A;
  margin: 0 0 14px;
}
.lg-section p:last-child { margin-bottom: 0; }
.lg-section a {
  color: var(--accent);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.lg-section a:hover { border-color: var(--accent); }

.lg-contact-card {
  margin-top: 16px;
  padding: 22px 26px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lg-contact-name {
  font-family: "matrix-ii", serif;
  font-size: 22px;
  letter-spacing: -0.3px;
  color: var(--ink);
}
.lg-contact-link {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.lg-contact-link:hover { border-color: var(--accent); }

.lg-cta {
  background: var(--ink);
  color: var(--cream);
  padding: 100px var(--page-pad-x) 120px;
}
.lg-cta-inner {
  max-width: var(--max-wide);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 32px;
}
.lg-cta-h2 {
  font-family: "matrix-ii", serif;
  font-size: 44px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.6px;
  color: #fff;
  margin: 0;
  max-width: 720px;
}
.lg-cta-buttons { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.lg-cta .btn-outline { color: #fff; border-color: rgba(255,255,255,0.25); }
.lg-cta .btn-outline:hover { background: rgba(255,255,255,0.06); border-color: #fff; }

@media (max-width: 1000px) {
  .lg-h1 { font-size: 60px; letter-spacing: -1px; }
  .lg-lede { font-size: 22px; }
  .lg-body { grid-template-columns: 1fr; gap: 40px; padding: 60px var(--page-pad-x) 80px; }
  .lg-toc { position: static; }
  .lg-cta-h2 { font-size: 32px; }
}
@media (max-width: 600px) {
  .lg-hero { padding: 90px var(--page-pad-x) 40px; }
  .lg-h1 { font-size: 44px; }
  .lg-lede { font-size: 18px; }
  .lg-cta { padding: 70px var(--page-pad-x) 90px; }
}

/* Mobile */
@media (max-width: 900px) {
  /* Mobile padding override REMOVED with the desktop full-width rule
     (line ~1386). The default `.site-nav { padding: 22px var(--page-pad-x) }`
     responsive scale already handles narrow viewports. */
  .pf-hero { height: 65vh; min-height: 480px; }
  /* Mobile case-study gutters: keep on the universal grid. The hardcoded
     16px values these used to ship were close to the var(--page-pad-x)
     mobile floor (24px) but drifted just enough to read as misaligned
     against the title block + footer at narrow widths. */
  .cs-titleblock { padding: 32px var(--page-pad-x) 20px; }
  .cs-titleblock-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .cs-h1 { font-size: 40px; }
  .cs-intro { padding: 0 var(--page-pad-x) 32px; }
  .cs-intro-inner { grid-template-columns: 1fr; gap: 32px; }
  .cs-stats { padding: 32px var(--page-pad-x) 40px; }
  .cs-stats-inner { grid-template-columns: 1fr 1fr; gap: 20px; }
  .cs-stat-value { font-size: 56px; }
  .pf-body { padding: 24px var(--page-pad-x) 60px; }
  .pf-row-split,
  .pf-row-grid-3,
  .pf-row-grid-4 { grid-template-columns: 1fr; gap: 12px; }
  .pf-row-split .pf-media-item,
  .pf-row-grid-3 .pf-media-item,
  .pf-row-grid-4 .pf-media-item { aspect-ratio: auto; }
  .pf-row-split .pf-media-item img,
  .pf-row-split .pf-media-item video { height: auto; }
  .cs-related { padding: 60px var(--page-pad-x); }
  .cs-related-head { flex-wrap: wrap; gap: 16px; }
  .cs-related-title { font-size: 28px; }
  .cs-related-grid { grid-template-columns: 1fr; }
  .cs-final-cta { padding: 60px var(--page-pad-x) 80px; }
  .cs-final-cta-h2 { font-size: 36px; }
}


/* ============================================================
   FUNNEL FORMS — shared form pattern.
   Used on /contact, /brief, scorecard email-gate, newsletter.
   Restrained editorial type. Cream bg, dark ink, accent on focus.
   ============================================================ */
.jl-form {
  display: grid;
  gap: 18px;
  max-width: 480px;
}
.jl-form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.jl-form-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.jl-form-input,
.jl-form-textarea,
.jl-form-select {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  transition: border-color 0.15s ease;
  width: 100%;
  -webkit-appearance: none;
}
.jl-form-textarea { resize: vertical; min-height: 120px; font-family: var(--font-body); }
.jl-form-input:focus,
.jl-form-textarea:focus,
.jl-form-select:focus {
  outline: none;
  border-color: var(--accent);
}
.jl-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.jl-form-submit {
  margin-top: 8px;
  padding: 14px 28px;
  background: var(--ink);
  color: #fff;
  border: 0;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  justify-self: start;
  transition: background 0.2s ease, transform 0.15s ease;
}
.jl-form-submit:hover { background: var(--accent); transform: translateY(-1px); }
.jl-form-submit:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.jl-form-fineprint {
  font-size: 12px;
  color: var(--muted);
  margin: 4px 0 0;
  line-height: 1.5;
}
.jl-form-success {
  padding: 24px;
  border: 1px solid var(--accent);
  border-radius: 12px;
  background: rgba(244,118,32,0.05);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
}
.jl-form-success strong { display: block; margin-bottom: 6px; font-family: "matrix-ii", serif; font-size: 22px; font-weight: 400; }

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

/* Footer newsletter — compact, cream-on-dark friendly */
.footer-newsletter {
  max-width: 420px;
  margin: 0 0 28px;
  padding: 0 0 28px;
  border-bottom: 1px solid rgba(247,247,240,0.12);
}
.footer-newsletter-eyebrow {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(247,247,240,0.6);
  margin-bottom: 8px;
}
.footer-newsletter-h {
  font-family: "matrix-ii", serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.2;
  color: #F7F7F0;
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}
.footer-newsletter-row {
  display: flex;
  gap: 8px;
}
.footer-newsletter-input {
  flex: 1;
  font-family: var(--font-body);
  font-size: 14px;
  color: #F7F7F0;
  background: rgba(247,247,240,0.06);
  border: 1px solid rgba(247,247,240,0.18);
  border-radius: 999px;
  padding: 11px 16px;
  -webkit-appearance: none;
}
.footer-newsletter-input::placeholder { color: rgba(247,247,240,0.45); }
.footer-newsletter-input:focus { outline: none; border-color: var(--accent); }
.footer-newsletter-btn {
  background: var(--accent);
  color: #020C0F;
  border: 0;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 11px 18px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.footer-newsletter-btn:hover { background: #ff8c42; }
.footer-newsletter-fineprint {
  font-size: 11px;
  color: rgba(247,247,240,0.5);
  margin: 8px 0 0;
}

/* ============================================================
   SITE-WIDE PAGE-SECTION GUTTER (single source of truth)
   Pages have used 20px / 24px / 65px inconsistently in inline
   <style> blocks. This rule forces all known page-level section
   classes to the same horizontal gutter so every page reads to
   the same edge. Inline styles can still control top/bottom
   padding; only padding-left/right is overridden.
   ============================================================ */
.bt-hero-row, .bt-section, .bt-cta, .bt-related,
.g-hero, .g-section, .g-cta, .g-related, .g-cta-row,
.audit-spine, .audit-portal, .audit-library, .audit-proof,
.audit-instrument-intro, .audit-instrument-stage, .audit-instrument-outro,
.sv-hero, .sv-services, .sv-cta,
.nm-samples, .rb-audit-callout, .rp-vs,
.bs-portal {
  padding-left: var(--page-pad-x) !important;
  padding-right: var(--page-pad-x) !important;
}
/* `.g-section-eyebrow + *` was in the selector list above — it matched
   the <h2 class="g-section-h2"> sibling that sits next to the eyebrow,
   and DOUBLE-INDENTED it (the parent .g-section already supplies the
   gutter, so the h2 ended up `var(--page-pad-x)` further right than
   the eyebrow above it and the .g-faq-list below it). v1 ships this
   bug; v2 strips it. JL spotted it on /goals/exit-ready FAQ. */
/* .bt-hero alone (without a parent .bt-hero-row) also takes the gutter,
   but when it's nested inside .bt-hero-row the row already provides the
   gutter — the nested .bt-hero must zero its own padding to avoid
   double-stacking. */
.bt-hero { padding-left: var(--page-pad-x) !important; padding-right: var(--page-pad-x) !important; }
.bt-hero-row .bt-hero { padding-left: 0 !important; padding-right: 0 !important; }

/* Generic utility for new pages — opt in instead of repeating gutter rules */
.boxed {
  max-width: var(--max-wide);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--page-pad-x);
  padding-right: var(--page-pad-x);
}

/* ============================================================
   RESPONSIVE TYPOGRAPHY CAP — Collins-inspired scale (JL 2026-05-18,
   "use collins for sizing references"). Collins uses Portrait Text
   serif at a tight three-step scale:
     --font-size-xl  = 48px mobile (<768)  → 58px tablet (≥768)
                       → 72px desktop (≥960)
   Mapped onto our Matrix II display chain. Editorial weight (Book
   300) reads thinner at these sizes than the older 32/38/48/64 ramp
   did at weight 400.
   Applied with !important so per-page inline styles still get
   constrained.
   ============================================================ */
h1, .bt-hero-title, .sv-hero-title, .hero-headline, .g-hero-headline,
.work-hero-headline, .services-hero-headline,
.pv-head-h1, .audit-instrument-intro h2 {
  font-size: min(64px, var(--hero-cap, 100vw)) !important;
}
.bt-hero-title, .sv-hero-title, .g-hero-headline,
.work-hero-headline, .services-hero-headline {
  font-size: 64px !important;
  line-height: 1.02 !important;
  letter-spacing: -1px !important;
}

@media (max-width: 960px) {
  h1, .bt-hero-title, .sv-hero-title, .hero-headline, .g-hero-headline,
  .work-hero-headline, .services-hero-headline,
  .pv-head-h1, .audit-instrument-intro h2 {
    font-size: 52px !important;
    line-height: 1.04 !important;
    letter-spacing: -0.8px !important;
  }
}

@media (max-width: 900px) {
  h1, .bt-hero-title, .sv-hero-title, .hero-headline, .g-hero-headline,
  .pv-head-h1, .v5-step-prompt, .audit-instrument-intro h2,
  .layer-card-title, .audit-portal-text h2,
  .nm-samples-h2, .audit-instrument-outro p {
    font-size: clamp(36px, 6vw, 52px) !important;
    line-height: 1.06 !important;
    letter-spacing: -0.7px !important;
  }
  .bt-section-h2, .g-section-h2, .bt-cta-headline, .audit-library-text h3,
  .bs-portal-text h2, .rb-audit-callout-text h2,
  .col-process-head h2 {
    font-size: clamp(24px, 5vw, 44px) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.5px !important;
  }
  .bt-hero-sub, .sv-hero-sub {
    font-size: clamp(16px, 3vw, 26px) !important;
    line-height: 1.3 !important;
  }
}
@media (max-width: 600px) {
  h1, .bt-hero-title, .sv-hero-title, .hero-headline, .g-hero-headline,
  .pv-head-h1, .v5-step-prompt, .audit-instrument-intro h2,
  .layer-card-title, .audit-portal-text h2,
  .nm-samples-h2, .audit-instrument-outro p {
    /* Dialed back from 48px peak — JL flagged the Collins-72 scale
       still read too heavy at mobile sizes, so we cap at 44 here
       and let the floor pull it down on the smallest screens. */
    font-size: clamp(32px, 9vw, 44px) !important;
  }
  .bt-section-h2, .g-section-h2, .bt-cta-headline, .audit-library-text h3,
  .bs-portal-text h2, .rb-audit-callout-text h2,
  .col-process-head h2 {
    font-size: clamp(22px, 7vw, 32px) !important;
  }
  .bt-hero-sub, .sv-hero-sub { font-size: clamp(15px, 4.5vw, 20px) !important; }
  .nm-hero-pick { font-size: clamp(36px, 13vw, 56px) !important; }
}

/* === g-related-grid: keep cards inside the section even at narrow
       desktop widths and never overflow horizontally === */
.g-related-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  max-width: 100% !important;
}

/* === HERO SUBTITLE TREATMENT — site-wide ===
   Long-form subtitles set in orange read as advertising, not editorial.
   Drop the accent color, scale the size down so the H1 stays the focal
   point, and let the copy support the headline rather than compete with
   it. Single-line eyebrow tags above the H1 keep the accent. */
.bt-hero-sub, .sv-hero-sub {
  color: var(--ink) !important;
  opacity: 0.7;
  font-size: clamp(17px, 1.5vw, 22px) !important;
  line-height: 1.45 !important;
  letter-spacing: -0.005em !important;
}

/* ============================================================
   JL MEDIA LOADER — Lottie overlay for heavy media (videos,
   large images, iframes). Wraps the target via /assets/jl-loader.js
   when the element has data-jl-loader. Two variants:
     data-jl-loader        → black bracket on cream (light bg)
     data-jl-loader="white" → white bracket on ink (dark bg)
   ============================================================ */
.jl-loader-wrap { position: relative; display: block; line-height: 0; }
.jl-loader-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 4;
  opacity: 1;
  transition: opacity 0.45s ease;
  border-radius: inherit;
  overflow: hidden;
}
.jl-loader-overlay.is-hiding { opacity: 0; }
.jl-loader-overlay.is-black { background: #F7F5EE; }
.jl-loader-overlay.is-white { background: #020C0F; }
.jl-loader-slot { width: 88px; height: 88px; display: block; line-height: 0; }
@media (max-width: 720px) { .jl-loader-slot { width: 64px; height: 64px; } }
/* Wrap inherits border-radius from common card containers via :where so
   the overlay rounds with the card and doesn't bleed past it. */
:where(.work-card, .bt-hero-row, .reel-frame, .audit-portal-shot) > .jl-loader-wrap,
.jl-loader-wrap > .jl-loader-overlay { border-radius: inherit; }

/* ============================================================
   YOUTUBE EMBED — facade pattern.
   Renders thumbnail + custom play button only. Clicking swaps
   in the real YouTube iframe with autoplay so view counts still
   register. ~95% lighter than a default iframe on first load.
   Usage:
     <div class="jl-yt" data-id="VIDEO_ID"
          data-title="Optional title for SR/seo">
       <img src="https://i.ytimg.com/vi_webp/VIDEO_ID/maxresdefault.webp"
            alt="" loading="lazy">
       <button class="jl-yt-play" aria-label="Play video"></button>
     </div>
   ============================================================ */
.jl-yt {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0A0F12;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  isolation: isolate;
  transition: box-shadow 0.4s ease;
}
.jl-yt:hover { box-shadow: 0 30px 80px rgba(0, 0, 0, 0.18); }
.jl-yt > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.4s ease;
}
.jl-yt::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 55%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.18) 60%, rgba(0,0,0,0.42) 100%),
    linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.45) 100%);
  z-index: 2;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.jl-yt:hover > img { transform: scale(1.02); }
.jl-yt-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--accent);
  border: 0;
  cursor: pointer;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 36px rgba(244, 118, 32, 0.45), 0 2px 6px rgba(0, 0, 0, 0.18);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.2s ease, box-shadow 0.3s ease;
}
.jl-yt-play::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-left: 22px solid #fff;
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
  margin-left: 6px;
}
.jl-yt:hover .jl-yt-play {
  transform: translate(-50%, -50%) scale(1.08);
  background: var(--accent);
  box-shadow: 0 18px 48px rgba(244, 118, 32, 0.55), 0 2px 6px rgba(0, 0, 0, 0.18);
}
.jl-yt[data-loaded="true"] > img,
.jl-yt[data-loaded="true"]::after,
.jl-yt[data-loaded="true"] .jl-yt-play { opacity: 0; pointer-events: none; }
.jl-yt > iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 4;
}
.jl-yt-caption {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  margin: 14px 0 0;
  text-align: center;
}
@media (max-width: 720px) {
  .jl-yt-play { width: 64px; height: 64px; }
  .jl-yt-play::after { border-left: 16px solid #fff; border-top: 10px solid transparent; border-bottom: 10px solid transparent; margin-left: 4px; }
}


/* ============================================================
   Dark-mode fade — REMOVED per JL 2026-05-17.

   Previously this block declared transitions on every element with
   a `body.is-dark .X { ... }` rule (nav, hero-headline, positioning,
   selected-work, stat, service-row, btn-dark, etc.). The intent was
   to keep them in sync with the body's fade.

   In practice, declaring the same transition on body AND on child
   elements caused the browser to compute + apply each compositor
   layer slightly out of sync — the body bg would tick and the
   child's bg/color would tick a hair later, so during the 400ms
   fade you'd see a faint visible delta between the body and any
   element with its own transition.

   The body has its own transition (line ~103). Child elements
   either:
     a) inherit body's color via cascade (text without explicit color
        rules) — fades with body automatically, or
     b) have their text color snap instantly to the new value once
        is-dark fires — clean, no mid-state, no out-of-sync delta.

   `.site-nav` was the one element that needed its own transition
   when it had a frosted-glass bg in dark mode — but that was
   removed in PR #88, so the nav is fully transparent now and
   inherits from body. No transition needed.
   ============================================================ */
/* (Block intentionally empty.) */


/* ============================================================
   /home-v2 — experimental home variant, added 2026-05-17.

   Scoped to `body[data-nav="hamburger"]` so it only applies on
   /home-v2 (which sets the attribute in an inline script before
   first paint, same pattern as `v2-stage`). Other routes are
   untouched.

   1. Nav: hide desktop links, show the hamburger toggle on every
      breakpoint. SiteNav already renders both — we just flip which
      one is visible.
   ============================================================ */
body[data-nav="hamburger"] .site-nav-links { display: none; }
body[data-nav="hamburger"] .site-nav-toggle { display: flex; }

/* 2. Stats reel — horizontal scrolling carousel of anchor cases on
   /home-v2. Layout mirrors .work-slider exactly (full-bleed wrap,
   content-grid scroll-snap, visible thin scrollbar) so the two reels
   on the page share the same gutter alignment and scroll rhythm. The
   .stats-card itself owns its own content layout. */
.stats-reel-section {
  /* No background here. The body owns the surface color and fades
     through transparently — same fix we applied to .hero +
     .selected-work in PR #91. A hard `background: var(--cream)` +
     `body.is-dark .stats-reel-section { background: ink }` would
     race body's bg-color transition and produce the "two sections"
     jank. */
  padding: clamp(40px, 8vw, 120px) 0 clamp(60px, 10vw, 140px);
}

.stats-reel-inner {
  max-width: var(--max-wide);
  margin: 0 auto;
  padding: 0 var(--page-pad-x);
}
.stats-reel-inner .section-head {
  margin-bottom: clamp(28px, 4vw, 56px);
}

/* Wrap: match .work-slider-wrap exactly. Full-bleed (viewport edge
   to viewport edge); the slider's scroll-padding pulls the first +
   last cards back to the content grid edges. */
.stats-reel-wrap {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 8px;
  padding-bottom: 36px;
}
.stats-reel {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  /* Same snap-edge formula as .work-slider. At desktop the cards
     snap flush to the content grid; at viewport <= --max-wide they
     snap to the --page-pad-x gutter. */
  scroll-padding-left: max(var(--page-pad-x), calc((100vw - var(--max-wide)) / 2 + var(--page-pad-x)));
  scroll-padding-right: max(var(--page-pad-x), calc((100vw - var(--max-wide)) / 2 + var(--page-pad-x)));
  padding-top: 12px;
  padding-bottom: 24px;
  padding-left: max(var(--page-pad-x), calc((100vw - var(--max-wide)) / 2 + var(--page-pad-x)));
  padding-right: max(var(--page-pad-x), calc((100vw - var(--max-wide)) / 2 + var(--page-pad-x)));
  margin-left: 0;
  margin-right: 0;
  /* Scrollbar hidden per JL 2026-05-18 — was matching .work-slider's
     thin bar but the dark-mode stats reel kicks it onto an ink
     background where the rail reads loud and breaks the editorial
     mood. Drag-to-scroll + scroll-snap still carry the affordance. */
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
}
.stats-reel::-webkit-scrollbar { display: none; }
.stats-reel.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.stats-reel.is-dragging .stats-card { pointer-events: none; }
.stats-reel:active { cursor: grabbing; }

.stats-card {
  /* Same per-card flex formula as .work-slider .work-card — 2.33
     cards visible on desktop. Keeps the snap rhythm + horizontal
     edges aligned with the work carousel above. */
  flex: 0 0 calc((100% - 2 * 24px) / 2.33);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  background: #fff;
  border: 1px solid rgba(2, 12, 15, 0.07);
  box-shadow: 0 1px 3px rgba(2, 12, 15, 0.04), 0 10px 30px rgba(2, 12, 15, 0.06);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transform: translateZ(0);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.stats-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 2px 6px rgba(2, 12, 15, 0.06), 0 20px 40px rgba(2, 12, 15, 0.10);
}
body.is-dark .stats-card {
  background: rgba(247, 247, 240, 0.04);
  border-color: rgba(247, 247, 240, 0.08);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
body.is-dark .stats-card:hover {
  background: rgba(247, 247, 240, 0.06);
}

.stats-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0a1a22;
  overflow: hidden;
}
/* Same cover treatment whether the media slot is a next/image or a
   <video> (ACS). Default object-position is 50% center; per-slug
   overrides come in as inline styles from V1_PROJECT_FOCAL. */
.stats-card-img { object-fit: cover; }
video.stats-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.stats-card-media-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(2,12,15,0) 50%, rgba(2,12,15,0.55) 100%);
  pointer-events: none;
}
.stats-card-eyebrow {
  position: absolute;
  left: 22px;
  bottom: 18px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream);
}

.stats-card-body {
  padding: 28px 28px 30px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.stats-card-hook {
  font-family: 'matrix-ii', Georgia, serif;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.28;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
  color: var(--ink, #020C0F);
}
body.is-dark .stats-card-hook { color: var(--cream); }

.stats-card-stats {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 18px 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(2, 12, 15, 0.08);
}
body.is-dark .stats-card-stats { border-top-color: rgba(247, 247, 240, 0.10); }
.stats-card-stat-value {
  /* Serif Moret stack via --font-numbers — matches v1 production
     stat-number treatment. Tabular + lining nums keep "1,750%" and
     "34%" column-aligned. */
  font-family: var(--font-numbers);
  font-weight: 400;
  font-style: normal;
  font-feature-settings: 'lnum' 1, 'tnum' 1;
  font-variant-numeric: lining-nums tabular-nums;
  font-size: clamp(30px, 3.4vw, 42px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink, #020C0F);
}
body.is-dark .stats-card-stat-value { color: var(--cream); }
.stats-card-stat-label {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.4;
  color: var(--ink-60, rgba(2, 12, 15, 0.55));
  margin-top: 6px;
}
body.is-dark .stats-card-stat-label {
  color: rgba(247, 247, 240, 0.55);
}
.stats-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink, #020C0F);
}
body.is-dark .stats-card-cta { color: var(--cream); }
.stats-card:hover .stats-card-cta svg { transform: translateX(4px); }
.stats-card-cta svg { transition: transform 0.25s ease; }

/* 3. Hero-v2 + selected-work-v2 compactness — hamburger nav is
   shorter, so we don't need the hero/positioning padding from /. */
/* +150px on the top padding per JL 2026-05-18 — drops "Challengers
   Win." lower into the viewport so the hero breathes. */
/* Combined hero/carousel gap reduced by ~60px per JL 2026-05-18 —
   "Challengers Win" was sitting too far above the carousel. Trim
   .hero-v2's bottom padding (the carousel keeps its own top padding
   for snap rhythm). */
/* +150px on top per JL 2026-05-19 (third bump). Cumulative inset
   is +450px over the original v1 hero — "Challengers Win." should
   sit roughly mid-viewport on a typical desktop window now. */
.hero-v2 { padding-top: clamp(570px, 50vw, 630px); padding-bottom: 0; }
.selected-work-v2 { padding-top: clamp(8px, 1vw, 12px); }
/* Mobile bump: +100px on the hero top padding so "Challengers Win."
   sits roughly mid-viewport on phones too, not crammed against the
   nav. The desktop clamp resolves to 570px on every viewport ≤1140px,
   which on a 375×667 iPhone left the title in the upper third with a
   dead band of background below it. JL 2026-05-19. */
@media (max-width: 720px) {
  .hero-v2 { padding-top: 670px; }
}

/* Same responsive flex breakpoints as .work-slider .work-card so the
   two reels keep their visible-card count + snap rhythm aligned. */
@media (max-width: 1100px) {
  .stats-reel .stats-card { flex: 0 0 calc((100% - 24px) / 1.33); }
}
@media (max-width: 700px) {
  .stats-reel .stats-card { flex: 0 0 85%; }
  .stats-card-body { padding: 22px 20px 24px; gap: 18px; }
  .stats-card-stats { gap: 14px 22px; padding-top: 16px; }
}


/* ============================================================
   /home-v2 mega-nav — added 2026-05-17 per JL.

   Only used on /home-v2 (the page inlines <HomeV2Nav />). To prevent
   the layout's SiteNav from rendering its own bar on top, we hide it
   when `data-nav="hamburger"` is set on body.
   ============================================================ */
body[data-nav="hamburger"] > .site-nav,
body[data-nav="hamburger"] > .mobile-menu { display: none !important; }

/* Top bar — logo on the left, hamburger toggle on the right. NOT
   sticky: position absolute so it scrolls away with the page. The
   menu surface below is `position: fixed` so when it opens it covers
   the viewport regardless of scroll position. */
/* Aligned to the same content grid as `.site-nav`: max-width caps
   the bar at var(--max-wide) and `padding: 18px var(--page-pad-x)`
   pushes the logo inward, so the logo lands on the same vertical
   line as `.hero` headlines and `.selected-work` carousel content.
   First pass swapped just the padding variable, which only fixed
   narrow viewports — at widths >1440 the v2nav was still 100% wide
   while .hero capped at 1440 + an extra 65px inset, leaving the
   logo 65px outside the section grid. Centering the bar on
   var(--max-wide) closes that gap on every viewport. */
.v2nav {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--max-wide);
  z-index: 1000;
  padding: 18px var(--page-pad-x);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  box-sizing: border-box;
}
.v2nav-inner {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: auto;
}
.v2nav-logo {
  height: 32px;
  display: inline-block;
  color: var(--ink, #020C0F);
}
/* Shrink the mega-nav logo on narrow viewports — at 32px the
   wordmark was visually dominating the small mobile nav bar
   (JL 2026-05-18). */
@media (max-width: 720px) {
  .v2nav-logo { height: 22px; }
}
@media (max-width: 480px) {
  .v2nav-logo { height: 20px; }
}
.v2nav[data-open="true"] .v2nav-logo,
body.is-dark .v2nav-logo { color: var(--cream); }
.v2nav-logo .site-logo-wordmark { height: 100%; width: auto; display: block; }
.v2nav-toggle {
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  padding: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  z-index: 1001;
}
.v2nav-toggle .site-nav-toggle-lottie { filter: brightness(0); }
.v2nav[data-open="true"] .v2nav-toggle .site-nav-toggle-lottie,
body.is-dark .v2nav-toggle .site-nav-toggle-lottie { filter: brightness(0) invert(1); }

/* Burger ↔ cross SVG (NavToggle.tsx). Two stacked rects that morph
   into an X when the menu opens. Sits above the menu surface
   (z-index: 1001 on .v2nav-toggle) so the close target stays
   reachable while the dark overlay covers everything else. */
.v2nav-toggle .nav-toggle-icon {
  width: 22px;
  height: 18px;
  fill: var(--ink, #020C0F);
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
  transform-origin: 50% 50%;
  overflow: visible;
}
.v2nav-toggle .nav-toggle-icon rect {
  transition:
    transform 0.45s cubic-bezier(0.65, 0, 0.35, 1),
    y 0.45s cubic-bezier(0.65, 0, 0.35, 1),
    fill 0.25s ease;
  transform-origin: 50% 50%;
}
/* When the menu is open OR on dark pages, render the icon in cream
   so it stays legible against the ink surface. */
.v2nav[data-open="true"] .v2nav-toggle .nav-toggle-icon,
body.is-dark .v2nav-toggle .nav-toggle-icon { fill: var(--cream, #F7F7F0); }
.v2nav[data-open="true"] .v2nav-toggle .nav-toggle-icon rect,
body.is-dark .v2nav-toggle .nav-toggle-icon rect { fill: var(--cream, #F7F7F0); }
/* Burger → cross morph. Open state rotates the SVG and converges
   the two rects toward the center, crossed at 45°. */
.v2nav-toggle .nav-toggle-icon[data-state="cross"] { transform: rotate(180deg); }
.v2nav-toggle .nav-toggle-icon[data-state="cross"] rect:first-child {
  transform: rotate(45deg) translateY(4px);
}
.v2nav-toggle .nav-toggle-icon[data-state="cross"] rect:last-child {
  transform: rotate(-45deg) translateY(-4px);
}

/* Full-screen menu surface. Stays mounted so the close animation can
   play. is-open swaps the clip-path. */
.v2nav-menu {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: var(--ink, #020C0F);
  color: var(--cream);
  clip-path: circle(0% at calc(100% - 42px) 42px);
  transition: clip-path 0.6s cubic-bezier(0.7, 0, 0.2, 1);
  pointer-events: none;
}
.v2nav-menu.is-open {
  clip-path: circle(150% at calc(100% - 42px) 42px);
  pointer-events: auto;
}
/* Menu inner: two-column editorial sitemap. Left column owns items +
   tertiary + CTA; right column is one big cinema panel that swaps
   media on hover.

   Horizontal sizing matches the .v2nav top bar (max-width var(--max-wide),
   centered, padding var(--page-pad-x)) so the Work / About / Services
   serif column lines up flush with the JOHN LUKE logo above and every
   section content edge on the page beneath. JL flagged 2026-05-18:
   menu items were sitting LEFT of the logo because max(40px, 5vw) was
   tighter than var(--page-pad-x). */
.v2nav-menu-inner {
  position: relative;
  width: 100%;
  max-width: var(--max-wide);
  height: 100%;
  margin: 0 auto;
  display: grid;
  /* Cinema panel column narrowed + vertically centered per JL
     2026-05-19 (smaller-cards reference: aanstekelijk.nl). Was
     `min(48vw, 720px)` stretched full-height; now `min(34vw, 460px)`
     and align-items: center so the deck sits as a smaller centered
     plate rather than a wall-height column. */
  grid-template-columns: 1fr min(34vw, 460px);
  align-items: center;
  padding: max(96px, 12vh) var(--page-pad-x) max(48px, 6vh);
  gap: clamp(32px, 5vw, 96px);
  box-sizing: border-box;
}

/* Left column wraps items + tertiary + CTA so they stack vertically
   and the column owns its own `onMouseLeave` for hover-out reset. */
.v2nav-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

/* Big item hierarchy. */
.v2nav-items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vh, 40px);
}
.v2nav-item {
  position: relative;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.v2nav-menu.is-open .v2nav-item { opacity: 1; transform: none; }
.v2nav-menu.is-open .v2nav-item:nth-child(1) { transition-delay: 0.10s; }
.v2nav-menu.is-open .v2nav-item:nth-child(2) { transition-delay: 0.18s; }
.v2nav-menu.is-open .v2nav-item:nth-child(3) { transition-delay: 0.26s; }

.v2nav-item-link {
  display: inline-block;
  font-family: 'matrix-ii', Georgia, serif;
  font-size: clamp(52px, 7vw, 96px);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--cream);
  text-decoration: none;
  transition: color 0.2s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.v2nav-item.is-hover .v2nav-item-link {
  color: var(--accent, #ff5a3c);
  transform: translateX(8px);
}
/* Dim non-hovered items when one is hovered. */
.v2nav-items:hover .v2nav-item:not(.is-hover) .v2nav-item-link {
  color: rgba(247, 247, 240, 0.32);
}

/* Tagline under each item — small body text in the dim-cream tone,
   max-width so it wraps on its own line not all the way across. */
.v2nav-item-tag {
  margin: 10px 0 0;
  max-width: 38ch;
  font-family: 'Inter', 'Aktiv Grotesk', sans-serif;
  font-size: clamp(13px, 1.2vw, 15px);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0.005em;
  color: rgba(247, 247, 240, 0.55);
  transition: color 0.2s ease;
}
.v2nav-item.is-hover .v2nav-item-tag { color: rgba(247, 247, 240, 0.85); }

/* Tertiary row — Industries · Moments · Notes · Client Portal.
   Small-caps signal that depth without claiming primary nav status.
   `flex-wrap` so the row breaks cleanly on narrow viewports rather
   than overflowing the menu column. */
.v2nav-tertiary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: clamp(28px, 4vh, 48px);
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s ease 0.32s, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.32s;
}
.v2nav-menu.is-open .v2nav-tertiary { opacity: 1; transform: none; }
.v2nav-tertiary a {
  color: rgba(247, 247, 240, 0.55);
  text-decoration: none;
  transition: color 0.2s ease;
}
.v2nav-tertiary a:hover { color: var(--cream); }
.v2nav-tertiary span { color: rgba(247, 247, 240, 0.3); }

/* Bottom-strip Client Portal entry — mirrors the lock-icon + label
   pattern used in <SiteFooter>'s footer-bar-left row so the auth
   surface reads the same wherever the user encounters it. Pinned to
   the absolute bottom of the popup; centered on var(--max-wide) with
   var(--page-pad-x) gutters so the Client Portal label lands flush
   with the menu items, logo, and every other section edge on the
   site (JL 2026-05-19: "it should fit the universal grid margins
   and not be an outlier"). Fades in with the rest of the menu via
   .v2nav-menu.is-open .v2nav-foot. */
.v2nav-foot {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  bottom: clamp(20px, 4vh, 40px);
  width: 100%;
  max-width: var(--max-wide);
  display: flex;
  justify-content: flex-start;
  padding: 0 var(--page-pad-x);
  box-sizing: border-box;
  pointer-events: none;
  opacity: 0;
  transition:
    opacity 0.5s ease 0.50s,
    transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.50s;
}
.v2nav-menu.is-open .v2nav-foot {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.v2nav-foot-portal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
  color: rgba(247, 247, 240, 0.55);
  text-decoration: none;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: color 0.2s ease;
}
.v2nav-foot-portal:hover { color: var(--cream); }
.v2nav-foot-portal svg { opacity: 0.85; }

/* Contact CTA pill — biggest call-to-action. */
.v2nav-cta-row {
  margin-top: clamp(28px, 4vh, 48px);
  display: flex;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s ease 0.40s, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.40s;
}
.v2nav-menu.is-open .v2nav-cta-row { opacity: 1; transform: none; }
.v2nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 32px;
  border-radius: 999px;
  background: var(--accent, #ff5a3c);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.v2nav-cta:hover { background: var(--accent-dark, #d44a30); transform: translateY(-1px); }
.v2nav-cta-arrow { display: inline-flex; transition: transform 0.25s ease; }
.v2nav-cta:hover .v2nav-cta-arrow { transform: translateX(4px); }

/* Right column — one big cinema panel that swaps media on hover.
   Always visible (no blank state). React swaps the inner media via a
   `key` change so the cross-fade triggers automatically. */
.v2nav-cinema {
  grid-column: 2;
  position: relative;
  display: block;
  width: 100%;
  /* Fixed 4:5 aspect ratio (was height: 100% — fills the whole menu
     column which made the deck wall-height). JL 2026-05-19 wanted
     smaller cinema images on the popup, matching aanstekelijk.nl's
     centered plate treatment. */
  aspect-ratio: 4 / 5;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(247, 247, 240, 0.04);
  color: var(--cream);
  text-decoration: none;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: scale(0.985);
  transition: opacity 0.6s ease 0.20s, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.20s;
}
.v2nav-menu.is-open .v2nav-cinema { opacity: 1; transform: none; }

/* Stack-deck variant — three cards layered, active card on top.
   Each card is absolutely positioned and shares the same rounded
   frame as the parent. The two stack cards offset behind to read
   as a shuffled deck; on hover the whole stack lifts slightly and
   the offsets widen, telling the user the deck is interactive. */
.v2nav-cinema { background: transparent; box-shadow: none; overflow: visible; border-radius: 0; }
.v2nav-cinema-card {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(247, 247, 240, 0.04);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}
.v2nav-cinema-card-stack {
  pointer-events: none;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
}
.v2nav-cinema-card-stack[data-stack="1"] {
  transform: translate(2.2%, 2.6%) rotate(2deg) scale(0.965);
  opacity: 0.78;
  z-index: 1;
}
.v2nav-cinema-card-stack[data-stack="2"] {
  transform: translate(4.4%, 5.2%) rotate(4deg) scale(0.93);
  opacity: 0.55;
  z-index: 0;
}
.v2nav-cinema-card-active {
  z-index: 2;
  animation: v2nav-cinema-fade 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* On hover, fan the deck slightly more so the shuffle is legible. */
.v2nav-cinema[data-hover="true"] .v2nav-cinema-card-stack[data-stack="1"] {
  transform: translate(3.4%, 4.0%) rotate(3.2deg) scale(0.96);
}
.v2nav-cinema[data-hover="true"] .v2nav-cinema-card-stack[data-stack="2"] {
  transform: translate(6.6%, 8.0%) rotate(5.4deg) scale(0.91);
}
.v2nav-cinema[data-hover="true"] .v2nav-cinema-card-active {
  transform: translateY(-4px);
}
@keyframes v2nav-cinema-fade {
  from { opacity: 0; transform: scale(1.03); }
  to   { opacity: 1; transform: none; }
}
.v2nav-cinema-img { object-fit: cover; width: 100%; height: 100%; }
video.v2nav-cinema-img { position: absolute; inset: 0; }

.v2nav-cinema-label {
  position: absolute;
  left: clamp(20px, 2vw, 32px);
  bottom: clamp(20px, 2vw, 32px);
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7);
  /* Stays steady while the media cross-fades. */
  background: rgba(2, 12, 15, 0.45);
  padding: 8px 14px;
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Below 900px the cinema panel collapses — left column takes the
   full menu width. The big serif items + taglines + tertiary + CTA
   carry the menu on their own. */
@media (max-width: 900px) {
  .v2nav-menu-inner { grid-template-columns: 1fr; padding-top: max(80px, 10vh); }
  .v2nav-cinema { display: none; }
}
@media (max-width: 600px) {
  .v2nav-item-link { font-size: clamp(44px, 12vw, 72px); }
  .v2nav-items { gap: clamp(16px, 2.4vh, 28px); }
}


/* ============================================================
   /about premium hero — added 2026-05-18 per JL.

   Replaces the v1 .about-hero (which paired a demo-reel video on
   the left with the headline on the right). New layout is a single
   centered editorial column on an ink surface, with quick-nav
   anchor pills inline so the visitor can jump to focus / team /
   clients without scrolling. The hero inherits dark styling from
   `body.is-dark` (set by AboutPage); no per-component dark fallback
   needed.
   ============================================================ */
.about-hero-v2 {
  position: relative;
  background: var(--ink, #020C0F);
  color: var(--cream, #F7F7F0);
  padding: clamp(120px, 16vw, 200px) 0 clamp(80px, 10vw, 140px);
  overflow: hidden;
}

/* Soft accent glow behind the headline — radial gradient anchored
   off-center so the visual weight stays asymmetric and editorial.
   pointer-events: none so it doesn't capture clicks on the nav
   pills below. */
.about-hero-v2::before {
  content: '';
  position: absolute;
  top: -25%;
  left: 50%;
  transform: translateX(-50%);
  width: 95vw;
  max-width: 1100px;
  aspect-ratio: 1 / 1;
  background: radial-gradient(
    circle at center,
    rgba(244, 118, 32, 0.08) 0%,
    rgba(244, 118, 32, 0) 60%
  );
  pointer-events: none;
  z-index: 0;
}

.about-hero-v2-inner {
  position: relative;
  z-index: 1;
  max-width: var(--max-wide);
  margin: 0 auto;
  padding: 0 var(--page-pad-x);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.about-hero-v2-headline {
  font-family: 'matrix-ii', 'matrix-ii-fallback', serif;
  font-weight: 400;
  font-size: clamp(48px, 7vw, 104px);
  line-height: 0.96;
  letter-spacing: -1.4px;
  color: var(--cream, #F7F7F0);
  margin: 0 0 clamp(28px, 3vw, 40px);
  max-width: 14ch;
  text-wrap: balance;
}
.about-hero-v2-headline .accent {
  color: var(--accent, #F47620);
  font-style: italic;
}

.about-hero-v2-sub {
  font-family: var(--font-body);
  font-size: clamp(17px, 1.6vw, 22px);
  line-height: 1.55;
  color: rgba(247, 247, 240, 0.78);
  margin: 0 0 clamp(40px, 5vw, 64px);
  max-width: 540px;
}

/* Quick-nav anchor pills — replaces v1's .about-tabs. Reads as a
   single editorial row at desktop, wraps on narrow viewports. */
.about-hero-v2-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(8px, 1vw, 14px);
  margin-bottom: clamp(40px, 5vw, 64px);
}
.about-hero-v2-nav-link {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(247, 247, 240, 0.7);
  text-decoration: none;
  padding: 9px 18px;
  border: 1px solid rgba(247, 247, 240, 0.15);
  border-radius: 999px;
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.about-hero-v2-nav-link:hover {
  color: var(--cream, #F7F7F0);
  border-color: rgba(247, 247, 240, 0.45);
  background: rgba(247, 247, 240, 0.05);
}

.about-hero-v2-cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

/* Tighten the spacing under the new hero so the stats reel doesn't
   feel orphaned. /home-v2's stats-reel-section has its own padding
   so the stack reads as a single composition. */
.about-hero-v2 + .stats-reel-section {
  padding-top: clamp(40px, 5vw, 64px);
}

@media (max-width: 640px) {
  .about-hero-v2-headline {
    max-width: 20ch;
  }
  .about-hero-v2-nav-link {
    padding: 8px 14px;
    font-size: 11.5px;
  }
}


/* ============================================================
   /home-v2 closing CTA — added 2026-05-18 per JL.

   Lives after the Results stats reel. Editorial centered block with
   eyebrow, big serif headline, sub, and two CTAs (Submit an RFP +
   Schedule a call). Inherits dark mode from `body.is-dark` (set by
   ScrollDarkMode once the user scrolls past the hero), so colors
   read in light mode at top of page AND dark mode at bottom without
   per-state overrides.
   ============================================================ */
.home-v2-cta {
  position: relative;
  padding: clamp(80px, 10vw, 140px) 0 clamp(120px, 14vw, 180px);
  overflow: hidden;
}

.home-v2-cta-inner {
  position: relative;
  max-width: var(--max-wide);
  margin: 0 auto;
  padding: 0 var(--page-pad-x);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.home-v2-cta-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-dim, rgba(2, 12, 15, 0.55));
  margin: 0 0 clamp(20px, 2.5vw, 32px);
}
body.is-dark .home-v2-cta-eyebrow { color: rgba(247, 247, 240, 0.55); }

.home-v2-cta-headline {
  font-family: 'matrix-ii', 'matrix-ii-fallback', serif;
  font-weight: 400;
  font-size: clamp(40px, 5.4vw, 76px);
  line-height: 1.02;
  letter-spacing: -1px;
  color: var(--ink, #020C0F);
  margin: 0 0 clamp(20px, 2.4vw, 28px);
  max-width: 18ch;
  text-wrap: balance;
}
body.is-dark .home-v2-cta-headline { color: var(--cream, #F7F7F0); }

.home-v2-cta-sub {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.45vw, 19px);
  line-height: 1.6;
  color: var(--text-soft, #525b65);
  margin: 0 0 clamp(36px, 4vw, 56px);
  max-width: 520px;
}
body.is-dark .home-v2-cta-sub { color: rgba(247, 247, 240, 0.72); }

.home-v2-cta-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}


/* ============================================================
   /about — promoted stats grid (was nested inside the v1
   clients-section; per JL 2026-05-18 the stats now stand alone
   as the section right after the hero).
   ============================================================ */
.about-stats {
  padding: clamp(56px, 7vw, 96px) 0;
}
.about-stats-inner {
  max-width: var(--max-wide);
  margin: 0 auto;
  padding: 0 var(--page-pad-x);
  text-align: center;
}
.about-stats .about-chapter-eyebrow {
  display: inline-block;
  margin-bottom: clamp(24px, 3vw, 40px);
}


/* ============================================================
   Client logo lockup — added 2026-05-18 per JL.

   Static row of white-variant client SVGs. Rendered on / (between
   the Results reel and the closing CTA) and on /about (inside the
   "Our Clients" block). Designed to sit on dark surfaces — the
   logos are all light-on-dark variants. On light pages, set
   `surface="dark"` to ship a self-contained ink panel; otherwise
   the strip inherits the surrounding background.
   ============================================================ */
.client-logos {
  padding: clamp(56px, 7vw, 96px) 0;
}
.client-logos-dark {
  background: var(--ink, #020C0F);
  color: var(--cream, #F7F7F0);
}
.client-logos-inherit {
  /* Inherits from parent — typically `body.is-dark` ink. No override. */
  background: transparent;
}

.client-logos-inner {
  max-width: var(--max-wide);
  margin: 0 auto;
  padding: 0 var(--page-pad-x);
}

.client-logos-head {
  text-align: center;
  margin-bottom: clamp(28px, 4vw, 56px);
}

.client-logos-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(247, 247, 240, 0.55);
  margin: 0 0 12px;
}
body:not(.is-dark) .client-logos-inherit .client-logos-eyebrow {
  color: var(--text-dim, rgba(2, 12, 15, 0.55));
}

.client-logos-headline {
  font-family: 'matrix-ii', 'matrix-ii-fallback', serif;
  font-weight: 400;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.6px;
  color: var(--cream, #F7F7F0);
  margin: 0;
  text-wrap: balance;
}
body:not(.is-dark) .client-logos-inherit .client-logos-headline {
  color: var(--ink, #020C0F);
}

/* Logo grid — 3-column CSS grid per JL 2026-05-18. Each cell is the
   same size; the logo inside scales to fit a uniform optical bounding
   box (max-width + max-height). That way TheNeuron, JLL, TR Capital
   etc. all read at the same visual mass regardless of their wildly
   different intrinsic aspect ratios. Collapses to 2 cols then 1 col
   on narrow viewports. */
.client-logos-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  justify-items: center;
  gap: clamp(28px, 4vw, 56px) clamp(32px, 5vw, 72px);
}

.client-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  /* Uniform optical cell — every logo lives inside the same bounding
     box so the row reads as a balanced 3×N grid rather than a row of
     mismatched sizes. height caps tall marks like JLL/AlphaCore; the
     internal logo's max-height stays under it, max-width keeps the
     widest wordmarks from spilling cell-to-cell. */
  height: clamp(56px, 7vw, 80px);
  /* Logos sit at ~70% opacity so the row reads as a quiet wall of
     credibility rather than competing with the page's editorial
     voice. Hover bumps each to full opacity so individual marks
     still read on close inspection. */
  opacity: 0.7;
  transition: opacity 0.25s ease;
}
.client-logo:hover { opacity: 1; }

.client-logo-img {
  display: block;
  /* Optical sizing: cap both axes so the cell stays uniform. Each
     logo passes its own `--logo-scale` (set inline) to multiply the
     base caps; the reference logos run at scale 1.0 and visually
     dominant ones (TheNeuron, JLL, TR Capital) come in below 1.0
     so the 3×N grid reads as a balanced wall. aspect-ratio (also
     inline) keeps proportions intact regardless of the SVG's
     intrinsic dimensions. */
  --logo-scale: 1;
  max-width: calc(82% * var(--logo-scale));
  max-height: calc(clamp(32px, 3.8vw, 46px) * var(--logo-scale));
  width: auto;
  height: auto;
}
body:not(.is-dark) .client-logos-inherit .client-logo-img {
  filter: invert(1);
}

@media (max-width: 900px) {
  .client-logos-grid { grid-template-columns: repeat(3, 1fr); gap: 28px 32px; }
}
@media (max-width: 560px) {
  .client-logos-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 28px; }
  .client-logo { height: 60px; }
}