/*
Theme Name: Critical Marketing
Theme URI: https://criticalmkt.com
Author: Critical Marketing
Author URI: https://criticalmkt.com
Description: Custom theme for Critical Marketing. Editorial, modern, agency-quality.
Version: 3.71
*/

/* ==================================================================
   BRAND FONT — Ethnocentric (matches the Critical Marketing logo)
   ================================================================== */
@font-face {
  font-family: 'Ethnocentric';
  src: url('assets/fonts/Ethnocentric-Regular.woff2') format('woff2'),
       url('assets/fonts/Ethnocentric-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  /* `block` (was: swap): the preloader uses Ethnocentric for the "CRITICAL"
     wordmark with an absolutely-positioned A icon. On slow connections
     (especially mobile) the Inter fallback rendered first, letter widths
     differed from Ethnocentric, and when the real font swapped in mid-
     animation the whole word + icon shifted awkwardly. `block` holds the
     text invisible (max 3s) until Ethnocentric is loaded; paired with a
     `<link rel="preload">` in header.php so the font is over the wire by
     the time paint happens, and a `document.fonts.ready` gate on the JS
     entrance cascade as a safety belt. */
  font-display: block;
}
@font-face {
  font-family: 'Good Times';
  src: url('assets/fonts/GoodTimes-Regular.woff2') format('woff2'),
       url('assets/fonts/GoodTimes-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ==================================================================
   PRELOADER — CRITICAL with A → red triangle morph
   The A in CRITICAL animates: shrinks + fades, while a red triangle
   "A mark" swoops in from above and lands in place. Brief hold,
   then the whole preloader fades out smoothly to reveal the page.
   ================================================================== */
body.cm-loading { overflow: hidden; }
body:not(.cm-loading) .cm-preloader { opacity: 0; visibility: hidden; transform: scale(1.04); }

.cm-preloader {
  position: fixed;
  inset: 0;
  background: #0A0A0B;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.7s, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.cm-preloader::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.075) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.075) 1px, transparent 1px);
  background-size: 56px 56px;
  animation: cm-preloader-grid-pan 7s linear infinite;
  mask-image: radial-gradient(ellipse at center, #000 45%, transparent 95%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 45%, transparent 95%);
  pointer-events: none;
}
@keyframes cm-preloader-grid-pan {
  from { transform: translate(0, 0); }
  to   { transform: translate(56px, 56px); }
}
.cm-pre-stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
.cm-pre-text {
  display: inline-flex;
  align-items: center;
  font-family: 'Ethnocentric', 'Inter', sans-serif;
  font-weight: 400;
  font-size: clamp(2.5rem, 7.5vw, 5rem);
  letter-spacing: 0.04em;
  color: #fff;
  line-height: 1;
  text-transform: uppercase;
}
.cm-pre-l {
  position: relative;
  display: inline-block;
  vertical-align: baseline;
  line-height: 1;
  opacity: 0;
  transform: translateY(40px);
  animation: cm-pre-letter 0.6s cubic-bezier(0.22, 1, 0.36, 1) var(--d) forwards;
}
.cm-pre-space { display: inline-block; width: 0.5em; }

/* The A slot. The letter renders INLINE so its baseline naturally aligns
   with surrounding letters — no positioning math. The icon image is the
   only thing absolutely positioned, sized in em units, centered horizontally
   via negative margin-left (so the animation transform can stay clean). */
.cm-pre-A {
  position: relative;
  display: inline-block;
  vertical-align: baseline;
  margin: 0 0.04em;
}
.cm-pre-A-letter {
  /* Renders inline-block so the .cm-pre-A container keeps its width,
     preserving exact spacing between C and L — but visibility:hidden
     keeps the letter visually absent so only the icon ever shows.
     The icon's animation runs independently and slides into the slot. */
  display: inline-block;
  line-height: 1;
  visibility: hidden;
}
.cm-pre-A-mark {
  position: absolute;
  /* Source: Critical A icon re-extracted from the brand master logo —
     symmetric, both feet splay outward, 1.569:1 aspect. CSS height set
     to the surrounding letters' VISIBLE cap height (measured at 53px
     against a 80px font-size = 0.66em), and bottom offset to lift the
     icon's feet up to the letters' visible baseline (which sits ~23.5px
     above the em-box bottom in Ethnocentric). */
  left: 50%;
  bottom: 0.29em;
  height: 0.7em;
  width: 1.098em;
  margin-left: -0.549em;
  object-fit: contain;
  object-position: center bottom;
  opacity: 0;
  transform: translateY(-180%) rotate(-90deg) scale(0.4);
  animation:
    cm-pre-A-mark-in 0.7s cubic-bezier(0.34, 1.36, 0.64, 1) 1.20s forwards,
    cm-pre-A-pulse 0.6s cubic-bezier(0.22, 1, 0.36, 1) 1.90s forwards;
}
.cm-pre-bar {
  width: 60px;
  height: 1px;
  background: rgba(255,255,255,0.12);
  overflow: hidden;
  opacity: 0;
  animation: cm-pre-fadein 0.5s ease 0.6s forwards;
}
.cm-pre-bar span {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, transparent, var(--c-primary), transparent);
  transform: translateX(-100%);
  animation: cm-pre-bar-slide 1.8s cubic-bezier(0.65, 0, 0.35, 1) 0.4s infinite;
}

@keyframes cm-pre-letter {
  to { opacity: 1; transform: none; }
}
@keyframes cm-pre-A-out {
  0% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(20px) scale(0.6); }
}
@keyframes cm-pre-A-mark-in {
  0%   { opacity: 0; transform: translateY(-160%) rotate(-15deg) scale(0.5); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
}
@keyframes cm-pre-A-pulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.12); }
  100% { transform: scale(1); }
}
@keyframes cm-pre-fadein {
  to { opacity: 1; }
}
@keyframes cm-pre-bar-slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .cm-pre-l, .cm-pre-A-letter, .cm-pre-A-mark, .cm-pre-bar, .cm-pre-bar span {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  body.cm-loading { overflow: auto; }
  .cm-preloader { display: none; }
}

/* ==================================================================
   1. DESIGN TOKENS
   ================================================================== */
:root {
  /* COLOR — restrained palette */
  --c-primary:      #ED1E24;
  --c-primary-dark: #B71418;
  --c-primary-soft: rgba(237, 30, 36, 0.08);
  --c-dark:         #0A0A0B;
  --c-charcoal:     #1A1A1D;
  --c-text:         #2A2A2E;
  --c-text-muted:   #6B6E76;
  --c-text-soft:    #A5A8B0;
  --c-bg:           #FFFFFF;
  --c-cream:        #FAF6F1;
  --c-stone:        #F4F4F1;
  --c-soft:         #F7F7F9;
  --c-border:       #E5E5E8;
  --c-border-dark:  #1F1F22;

  /* TYPE */
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif:   'Instrument Serif', Georgia, serif;

  /* Major Third (1.25) scale */
  --t-xs:      0.75rem;     /* 12 */
  --t-sm:      0.875rem;    /* 14 */
  --t-base:    1.0625rem;   /* 17 — bumped from 16 */
  --t-lg:      1.1875rem;   /* 19 */
  --t-xl:      1.375rem;    /* 22 */
  --t-2xl:     1.75rem;     /* 28 */
  --t-3xl:     2.25rem;     /* 36 */
  --t-4xl:     clamp(2.75rem, 4vw, 3.5rem);
  --t-5xl:     clamp(3.25rem, 5vw, 4.5rem);
  --t-6xl:     clamp(4rem, 6.5vw, 6rem);
  --t-7xl:     clamp(5rem, 8vw, 8rem);
  --t-display: clamp(6rem, 12vw, 12rem);

  /* SPACING (4px base) */
  --s-1: 4px;   --s-2: 8px;    --s-3: 12px;   --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;   --s-7: 48px;   --s-8: 64px;
  --s-9: 80px;  --s-10: 96px;  --s-11: 128px; --s-12: 160px;
  --s-13: 200px;

  /* LAYOUT */
  --container:  1320px;
  --gutter:     32px;
  --header-h:   80px;
  --marquee-h:  104px;
  --section-y:  var(--s-12);          /* 160 */
  --section-y-sm: var(--s-10);        /* 96 */

  /* RADIUS */
  --r-sm: 6px;   --r-md: 12px;   --r-lg: 24px;   --r-xl: 32px;
  --r-full: 999px;

  /* SHADOW */
  --shadow-1: 0 1px 2px rgba(10,10,11,0.04);
  --shadow-2: 0 2px 8px rgba(10,10,11,0.06);
  --shadow-3: 0 8px 32px rgba(10,10,11,0.08);
  --shadow-4: 0 24px 60px rgba(10,10,11,0.16);
  --shadow-glow: 0 16px 40px rgba(237, 30, 36, 0.22);

  /* MOTION */
  --ease:        cubic-bezier(0.22, 1, 0.36, 1);
  --ease-snappy: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:    200ms;
  --dur:         350ms;
  --dur-slow:    700ms;
}

/* ==================================================================
   2. RESET & BASE
   ================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: 1.55;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  letter-spacing: -0.005em;
}
body.menu-open { overflow: hidden; }

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

a { color: inherit; text-decoration: none; transition: color var(--dur) var(--ease); }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, textarea, select { font-family: inherit; font-size: inherit; }

::selection { background: var(--c-primary); color: #fff; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: 600;
  line-height: 1.02;
  color: var(--c-dark);
  letter-spacing: -0.03em;
}

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

em, .accent, em.accent, .split-accent {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--c-primary);
  letter-spacing: -0.01em;
}

/* ==================================================================
   3. LAYOUT PRIMITIVES
   ================================================================== */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  width: 100%;
}

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

.section {
  padding: var(--section-y) 0;
  position: relative;
}
.section-sm { padding: var(--section-y-sm) 0; }
.section-cream { background: var(--c-cream); }
.section-stone { background: var(--c-stone); }
.section-soft { background: var(--c-soft); }
.section-dark { background: var(--c-dark); color: rgba(255,255,255,0.78); }
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: #fff; }
.section-charcoal { background: var(--c-charcoal); color: rgba(255,255,255,0.8); }
.section-charcoal h1, .section-charcoal h2, .section-charcoal h3 { color: #fff; }

/* ==================================================================
   4. EYEBROW (new — bar + tracked uppercase)
   ================================================================== */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-primary);
  margin-bottom: 24px;
}
.eyebrow::before {
  content: '';
  display: inline-block;
  width: 32px;
  height: 2px;
  background: var(--c-primary);
}
.eyebrow-dark { color: rgba(255,255,255,0.7); }
.eyebrow-dark::before { background: var(--c-primary); }
.eyebrow-muted { color: var(--c-text-muted); }
.eyebrow-muted::before { background: var(--c-text-muted); }

/* ==================================================================
   5. BUTTONS
   ================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: -0.005em;
  padding: 16px 30px;
  border: 1.5px solid transparent;
  border-radius: var(--r-full);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transform: translateY(101%);
  transition: transform 0.45s var(--ease-snappy), opacity 0.45s ease;
  z-index: -1;
}
.btn .btn-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  transition: transform var(--dur) var(--ease);
}
.btn:hover .btn-arrow { transform: translate(4px, -2px); }

.btn-sm { padding: 11px 22px; font-size: 0.8125rem; }
.btn-lg { padding: 20px 38px; font-size: 1rem; }

.btn-primary {
  background: var(--c-primary);
  color: #fff;
  border-color: var(--c-primary);
}
.btn-primary::before { background: var(--c-primary-dark); opacity: 1; transform: translateY(101%); }
.btn-primary:hover::before { transform: translateY(0); }
.btn-primary:hover {
  border-color: var(--c-primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow);
}

.btn-dark {
  background: var(--c-dark);
  color: #fff;
  border-color: var(--c-dark);
}
.btn-dark::before { background: var(--c-primary); opacity: 1; transform: translateY(101%); }
.btn-dark:hover::before { transform: translateY(0); }
.btn-dark:hover { border-color: var(--c-primary); transform: translateY(-2px); }

.btn-outline {
  background: transparent;
  color: var(--c-dark);
  border-color: var(--c-dark);
}
.btn-outline:hover {
  background: var(--c-dark);
  color: #fff;
  transform: translateY(-2px);
}

.btn-ghost {
  background: transparent;
  color: var(--c-dark);
  padding: 4px 0;
  border-radius: 0;
  border: 0;
  border-bottom: 1.5px solid var(--c-dark);
}
.btn-ghost::before { display: none; }
.btn-ghost:hover {
  color: var(--c-primary);
  border-color: var(--c-primary);
  transform: none;
}
.btn-ghost.on-dark { color: #fff; border-color: rgba(255,255,255,0.4); }
.btn-ghost.on-dark:hover { color: var(--c-primary); border-color: var(--c-primary); }

/* Link with arrow (used in cards, lists) */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--c-dark);
  font-size: 0.9375rem;
  position: relative;
}
.link-arrow svg, .link-arrow .arrow { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); }
.link-arrow:hover { color: var(--c-primary); }
.link-arrow:hover svg, .link-arrow:hover .arrow { transform: translate(4px, -2px); }

/* ==================================================================
   6. HEADER + NAV
   ================================================================== */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  background: rgba(255,255,255,0.85);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  z-index: 100;
  transition: box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  background: rgba(255,255,255,0.92);
  border-bottom-color: var(--c-border);
}

.nav-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.site-logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.site-logo img { height: 56px; width: auto; }
@media (max-width: 768px) { .site-logo img { height: 40px; } }

.primary-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  flex: 1;
  justify-content: flex-end;
}
.primary-nav-list {
  display: flex;
  align-items: center;
  gap: 28px;
}
.primary-nav-list > li { position: relative; }
.primary-nav-list > li > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9375rem;
  font-weight: 450;
  color: var(--c-dark);
  padding: 8px 0;
  position: relative;
  letter-spacing: -0.005em;
}
.primary-nav-list > li > a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--c-primary);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur) var(--ease);
}
.primary-nav-list > li > a:hover::after,
.primary-nav-list > li.current-menu-item > a::after {
  transform: scaleX(1);
  transform-origin: left;
}
.primary-nav-list > li > a:hover { color: var(--c-primary); }
.primary-nav-list .dropdown-arrow {
  display: inline-flex;
  align-items: center;
  margin-left: 2px;
  transition: transform var(--dur) var(--ease);
}
.primary-nav-list .dropdown-arrow svg { display: block; }
.primary-nav-list > li:hover .dropdown-arrow { transform: rotate(180deg); }

.primary-nav-list .sub-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: -16px;
  min-width: 220px;
  padding: 12px 0;
  background: #fff;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-3);
  border: 1px solid var(--c-border);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all var(--dur) var(--ease);
}
.primary-nav-list > li:hover > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.primary-nav-list .sub-menu a {
  display: block;
  padding: 10px 24px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--c-dark);
  transition: all var(--dur-fast) var(--ease);
}
.primary-nav-list .sub-menu a:hover { color: var(--c-primary); background: var(--c-soft); }

.btn-pill-nav {
  background: var(--c-primary);
  color: #fff;
  border-radius: var(--r-full);
  padding: 11px 22px;
  font-size: 0.875rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all var(--dur) var(--ease);
  border: 1.5px solid var(--c-primary);
  letter-spacing: -0.005em;
}
.btn-pill-nav:hover {
  background: var(--c-dark);
  border-color: var(--c-dark);
  transform: translateY(-1px);
}
.nav-cta { margin-left: 12px; }

.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
}
.mobile-menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--c-dark);
  border-radius: 2px;
  transition: all var(--dur) var(--ease);
}
.mobile-menu-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-menu-toggle.active span:nth-child(2) { opacity: 0; }
.mobile-menu-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu-overlay {
  position: fixed;
  inset: 0;
  background: var(--c-dark);
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
  padding: calc(var(--header-h) + 32px) 32px 48px;
  overflow-y: auto;
}
.mobile-menu-overlay.active { opacity: 1; visibility: visible; }
.mobile-menu-overlay nav { display: flex; flex-direction: column; gap: 20px; }
.mobile-menu-overlay a {
  display: block;
  color: #fff;
  font-size: 1.75rem;
  font-weight: 700;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  letter-spacing: -0.025em;
}
.mobile-menu-overlay a:hover { color: var(--c-primary); }
.mobile-menu-overlay .mobile-nav-cta {
  margin-top: 24px;
  background: var(--c-primary);
  border-radius: var(--r-full);
  text-align: center;
  border: 0;
  padding: 18px 32px;
  font-size: 1rem;
}

/* ==================================================================
   7. HERO (editorial split)
   ================================================================== */
.hero {
  position: relative;
  padding: calc(var(--header-h) + var(--s-9)) 0 var(--s-11);
  background: var(--c-bg);
  overflow: hidden;
  /* Sized so that the red marquee band sits exactly at the bottom of the
     viewport on first load. 100dvh handles mobile dynamic viewport. */
  min-height: calc(100dvh - var(--marquee-h));
  display: flex;
  align-items: center;
}
@supports not (height: 100dvh) {
  .hero { min-height: calc(100vh - var(--marquee-h)); }
}
.hero-inner {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--s-9);
  align-items: center;
  width: 100%;
}
.hero-content { max-width: 700px; }
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-primary);
  margin-bottom: var(--s-7);
}
.hero-eyebrow::before {
  content: '';
  width: 36px; height: 2px;
  background: var(--c-primary);
}
.hero-title {
  font-size: var(--t-7xl);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--c-dark);
  margin-bottom: var(--s-6);
}
.hero-title em.accent,
.hero-title .accent {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--c-primary);
}
.hero-lede {
  font-size: var(--t-lg);
  line-height: 1.55;
  color: var(--c-text);
  max-width: 540px;
  margin-bottom: var(--s-7);
}
.hero-ctas {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: var(--s-7);
}
.hero-meta {
  display: flex;
  gap: 24px;
  font-size: 0.8125rem;
  color: var(--c-text-muted);
  letter-spacing: 0.01em;
  margin-top: 8px;
}
.hero-meta span { position: relative; }
.hero-meta span:not(:last-child)::after {
  content: '';
  display: inline-block;
  width: 4px; height: 4px;
  background: var(--c-text-muted);
  border-radius: 50%;
  margin-left: 24px;
  vertical-align: middle;
}

/* Hero visual — 2 stacked client result cards */
.hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 480px;
}
.hero-cards {
  position: relative;
  width: 100%;
  max-width: 480px;
}
.hero-cards::before {
  content: '';
  position: absolute;
  top: 8%; right: 8%;
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(237, 30, 36, 0.16) 0%, rgba(237, 30, 36, 0) 65%);
  filter: blur(20px);
  z-index: 0;
}
.hero-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 32px;
  box-shadow: var(--shadow-3);
  transition: all var(--dur-slow) var(--ease);
}
.hero-card-top {
  transform: rotate(-3deg);
  margin-bottom: -24px;
  margin-right: 60px;
  z-index: 2;
  animation: drift-a 10s ease-in-out infinite;
}
.hero-card-bot {
  transform: rotate(2.5deg);
  margin-left: 60px;
  z-index: 1;
  background: var(--c-dark);
  color: #fff;
  border-color: var(--c-charcoal);
  animation: drift-b 12s ease-in-out infinite;
}
@keyframes drift-a {
  0%, 100% { transform: rotate(-3deg) translateY(0); }
  50%      { transform: rotate(-3.5deg) translateY(-8px); }
}
@keyframes drift-b {
  0%, 100% { transform: rotate(2.5deg) translateY(0); }
  50%      { transform: rotate(2deg) translateY(8px); }
}
.hero-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.hero-card-logo {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--c-primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: -0.02em;
}
.hero-card-bot .hero-card-logo {
  background: rgba(255,255,255,0.1);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.15);
}
.hero-card-client {
  font-size: 0.9375rem;
  font-weight: 700;
  color: inherit;
  letter-spacing: -0.01em;
}
.hero-card-tag {
  font-size: 0.75rem;
  color: var(--c-text-muted);
  margin-top: 2px;
}
.hero-card-bot .hero-card-tag { color: rgba(255,255,255,0.55); }
.hero-card-stat {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 16px;
}
.hero-card-stat .n {
  font-size: 2.75rem;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.9;
}
.hero-card-stat .delta {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--c-primary-soft);
  color: var(--c-primary);
}
.hero-card-bot .hero-card-stat .delta {
  background: rgba(237,30,36,0.18);
}
.hero-card-desc {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--c-text-muted);
}
.hero-card-bot .hero-card-desc { color: rgba(255,255,255,0.65); }

/* ==================================================================
   7B. HERO v2 — animated background, dashboard mockup
   ================================================================== */
.hero-v2 { background: #fff; isolation: isolate; }
.hero-v2 .hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero-grid {
  position: absolute;
  inset: -40px;
  background-image:
    linear-gradient(to right, rgba(10,10,11,0.022) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10,10,11,0.022) 1px, transparent 1px);
  background-size: 80px 80px;
  animation: hero-grid-pan 9s linear infinite;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 90%);
}
@keyframes hero-grid-pan {
  from { transform: translate(0, 0); }
  to   { transform: translate(80px, 80px); }
}
.hero-blob { display: none; } /* killed per user feedback - red gradient blob */
.hero-blob-1 {
  width: 520px; height: 520px;
  top: -120px; right: -100px;
  background: radial-gradient(circle, rgba(237, 30, 36, 0.18) 0%, transparent 70%);
  animation: hero-blob-drift-1 16s ease-in-out infinite;
}
.hero-blob-2 {
  width: 420px; height: 420px;
  bottom: -80px; left: 10%;
  background: radial-gradient(circle, rgba(237, 30, 36, 0.08) 0%, transparent 70%);
  animation: hero-blob-drift-2 22s ease-in-out infinite;
}
@keyframes hero-blob-drift-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-40px, 40px) scale(1.1); }
}
@keyframes hero-blob-drift-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(60px, -30px) scale(0.95); }
}
.hero-v2 .container { position: relative; z-index: 1; }
.hero-v2 .hero-inner { padding-bottom: 120px; }
.hero-v2 .hero-title {
  font-size: clamp(3rem, 6.5vw, 6rem);
  font-weight: 600;
  letter-spacing: -0.04em;
}

/* Hero visual v2 — dashboard mockup */
.hero-visual-v2 {
  position: relative;
  min-height: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-screen {
  position: relative;
  width: 100%;
  max-width: 540px;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(10, 10, 11, 0.16), 0 1px 3px rgba(10, 10, 11, 0.06);
  border: 1px solid rgba(10, 10, 11, 0.05);
  transform: rotate(-1.5deg);
  animation: hero-screen-float 12s ease-in-out infinite;
}
@keyframes hero-screen-float {
  0%, 100% { transform: rotate(-1.5deg) translateY(0); }
  50%      { transform: rotate(-1deg) translateY(-10px); }
}
.hero-screen-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: #F7F7F9;
  border-bottom: 1px solid rgba(10, 10, 11, 0.05);
}
.hero-screen-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(10, 10, 11, 0.12);
}
.hero-screen-dot:nth-child(1) { background: #FF5F57; }
.hero-screen-dot:nth-child(2) { background: #FEBC2E; }
.hero-screen-dot:nth-child(3) { background: #28C840; }
.hero-screen-tab {
  font-size: 0.7rem;
  color: rgba(10, 10, 11, 0.45);
  margin-left: auto;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.hero-screen-body { padding: 24px; }
.hero-screen-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.hero-screen-eyebrow {
  display: block;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(10, 10, 11, 0.45);
  margin-bottom: 4px;
}
.hero-screen-h {
  display: block;
  font-size: 1.1rem;
  font-weight: 600;
  color: #0A0A0B;
  letter-spacing: -0.02em;
}
.hero-screen-badge {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--c-primary);
  background: var(--c-primary-soft);
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.hero-screen-chart {
  height: 120px;
  margin: 8px 0 20px;
}
.hero-screen-chart svg {
  width: 100%; height: 100%;
  display: block;
}
.hero-chart-line {
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  animation: hero-chart-draw 2.4s cubic-bezier(0.65, 0, 0.35, 1) 0.4s forwards;
}
@keyframes hero-chart-draw { to { stroke-dashoffset: 0; } }
.hero-chart-dot {
  opacity: 0;
  transform-origin: center;
  transform-box: fill-box;
  animation: hero-chart-dot-in 0.4s ease 2.6s forwards, hero-chart-dot-pulse 2s ease-in-out 3s infinite;
}
@keyframes hero-chart-dot-in { to { opacity: 1; } }
.hero-chart-area {
  opacity: 0;
  animation: hero-chart-dot-in 0.6s ease 1.8s forwards;
}

.hero-screen-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(10, 10, 11, 0.06);
}
.hero-tile { display: flex; flex-direction: column; gap: 2px; }
.hero-tile-n {
  font-size: 1.5rem;
  font-weight: 700;
  color: #0A0A0B;
  letter-spacing: -0.03em;
  line-height: 1;
}
.hero-tile-l {
  font-size: 0.7rem;
  color: rgba(10, 10, 11, 0.45);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Floating chips around screen */
.hero-chip {
  position: absolute;
  background: #fff;
  padding: 10px 16px;
  border-radius: 999px;
  box-shadow: var(--shadow-3);
  border: 1px solid rgba(10, 10, 11, 0.06);
  font-size: 0.8125rem;
  font-weight: 600;
  color: #0A0A0B;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -0.005em;
}
.hero-chip-1 {
  top: -16px;
  left: -24px;
  animation: chip-drift-1 9s ease-in-out infinite, chip-enter 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s backwards;
}
.hero-chip-2 {
  bottom: -16px;
  right: -16px;
  animation: chip-drift-2 11s ease-in-out infinite, chip-enter 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.9s backwards;
}
.hero-chip-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(237, 30, 36, 0.18);
  animation: chip-pulse 1.8s ease-in-out infinite;
}
@keyframes chip-drift-1 {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-6px, -8px); }
}
@keyframes chip-drift-2 {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(6px, -10px); }
}
@keyframes chip-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.35); }
}

/* ==================================================================
   8. MARQUEE
   ================================================================== */
.marquee {
  width: 100%;
  height: var(--marquee-h);
  background: var(--c-primary);
  overflow: hidden;
  border: 0;
  display: flex;
  align-items: center;
}
.marquee-track {
  display: flex;
  animation: marquee-scroll 60s linear infinite;
  width: max-content;
  white-space: nowrap;
  will-change: transform;
}
.marquee-set {
  display: inline-flex;
  align-items: center;
}
.marquee-item {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(1.5rem, 3.4vw, 3rem);
  letter-spacing: -0.015em;
  padding: 0 44px;
  display: inline-flex;
  align-items: center;
  color: #fff;
  line-height: 1;
}
/* Alternating italic serif treatment creates editorial rhythm without
   needing dots or dividers between items. */
.marquee-item:nth-child(even) {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.78);
  padding: 0 40px;
}
@keyframes marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-33.3333%, 0, 0); }
}
.marquee:hover .marquee-track { animation-play-state: paused; }

/* Legacy variants kept in case other templates reference them */
.marquee--dark, .marquee-dark { background: var(--c-primary); }
.marquee--dark .marquee-item, .marquee-dark .marquee-item { color: #fff; }
.marquee-cream {
  background: var(--c-cream);
}
.marquee-cream .marquee-item { color: rgba(0,0,0,0.6); }
.marquee-cream .marquee-item::after { background: var(--c-primary); opacity: 1; }

/* ==================================================================
   9. HOW WE WORK — process steps
   ================================================================== */
.how-section {
  padding: var(--section-y) 0;
  background: var(--c-cream);
}
.how-head {
  margin-bottom: var(--s-9);
  max-width: 760px;
}
.how-head h2 {
  font-size: var(--t-5xl);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
}
.how-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.how-step {
  background: #fff;
  border: 1px solid rgba(10, 10, 11, 0.06);
  border-radius: var(--r-xl);
  padding: 36px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all var(--dur-slow) var(--ease);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.how-step::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--c-primary);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.6s var(--ease);
}
.how-step:hover {
  transform: translateY(-8px);
  border-color: var(--c-primary);
  box-shadow: 0 24px 50px rgba(237, 30, 36, 0.12);
}
.how-step:hover::before { transform: scaleX(1); }
.how-step-num {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-primary);
  margin-bottom: 24px;
}
.how-step h3 {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.2;
  margin-bottom: 6px;
}
.how-step p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--c-text);
  margin: 0;
}
@media (max-width: 1024px) {
  .how-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .how-grid { grid-template-columns: 1fr; }
}

/* ==================================================================
   9B. FEATURED WORK (legacy, keep for compatibility)
   ================================================================== */
.featured-work {
  padding: var(--section-y) 0;
}
.featured-work-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 48px;
  margin-bottom: var(--s-9);
  flex-wrap: wrap;
}
.featured-work-head h2 {
  font-size: var(--t-5xl);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.95;
  max-width: 700px;
}
.featured-work-head p {
  font-size: var(--t-lg);
  color: var(--c-text);
  max-width: 380px;
  line-height: 1.5;
}
.featured-work-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 32px;
  align-items: stretch;
}
.case-card {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--c-soft);
  color: var(--c-text);
  display: flex;
  flex-direction: column;
  transition: all var(--dur-slow) var(--ease);
  min-height: 540px;
  cursor: pointer;
  isolation: isolate;
}
.case-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-4); }
.case-card-1 { background: var(--c-dark); color: #fff; transform: translateY(-32px); }
.case-card-1:hover { transform: translateY(-40px); }
.case-card-2 { background: var(--c-cream); transform: translateY(64px); }
.case-card-2:hover { transform: translateY(24px); }

.case-card-content {
  padding: 40px 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}
.case-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.case-card-mark {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--c-primary);
  color: #fff;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: -0.04em;
  font-size: 0.875rem;
}
.case-card-1 .case-card-mark { background: var(--c-primary); }
.case-card-client {
  font-size: var(--t-xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: inherit;
}
.case-card-tag {
  font-size: 0.8125rem;
  color: var(--c-text-muted);
  margin-top: 2px;
}
.case-card-1 .case-card-tag { color: rgba(255,255,255,0.5); }
.case-card-stat {
  margin: 24px 0 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.case-card-stat .n {
  font-size: clamp(2.75rem, 5vw, 4rem);
  font-weight: 700;
  letter-spacing: -0.038em;
  line-height: 0.92;
  color: var(--c-primary);
}
.case-card-1 .case-card-stat .n { color: var(--c-primary); }
.case-card-stat .label {
  font-size: 0.875rem;
  color: var(--c-text-muted);
  letter-spacing: 0.01em;
}
.case-card-1 .case-card-stat .label { color: rgba(255,255,255,0.55); }
.case-card-desc {
  font-size: 0.9375rem;
  line-height: 1.6;
  margin-bottom: 24px;
}
.case-card-1 .case-card-desc { color: rgba(255,255,255,0.72); }
.case-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid var(--c-border);
}
.case-card-1 .case-card-foot { border-color: rgba(255,255,255,0.08); }
.case-card-cta {
  font-weight: 600;
  font-size: 0.9375rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit;
}
.case-card-cta svg { width: 14px; height: 14px; transition: transform var(--dur) var(--ease); }
.case-card:hover .case-card-cta svg { transform: translate(4px, -2px); }
.case-card-1 .case-card-cta { color: #fff; }

/* ==================================================================
   10. EDITORIAL SERVICES LIST (replaces 4-card Excellence grid)
   ================================================================== */
.services-list-section {
  padding: var(--section-y) 0;
  background: var(--c-bg);
}
.services-list-head {
  margin-bottom: var(--s-9);
  max-width: 760px;
}
.services-list-head h2 {
  font-size: var(--t-5xl);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.95;
}
.services-list-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 80px;
  align-items: start;
}
.services-list {
  list-style: none;
}
.services-list-item {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 28px 0;
  border-top: 1px solid var(--c-border);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  position: relative;
}
.services-list-item:last-child { border-bottom: 1px solid var(--c-border); }
.services-list-item .num {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--c-text-muted);
  letter-spacing: 0.04em;
  width: 36px;
  flex-shrink: 0;
}
.services-list-item .name {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--c-dark);
  flex: 1;
  transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.services-list-item .arrow {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--dur) var(--ease);
  flex-shrink: 0;
}
.services-list-item:hover .name {
  color: var(--c-primary);
  transform: translateX(8px);
}
.services-list-item:hover .arrow {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff;
  transform: rotate(-45deg);
}
.services-list-item.active .name { color: var(--c-primary); }

/* Services preview pane with hover-swap */
.services-preview-frame {
  position: sticky;
  top: calc(var(--header-h) + 40px);
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--c-cream);
}
.services-preview-slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 40px;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  color: #fff;
}
.services-preview-slide.active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.services-preview-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-color: var(--c-dark);
  z-index: 0;
}
.services-preview-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,11,0.1) 0%, rgba(10,10,11,0.5) 55%, rgba(10,10,11,0.92) 100%);
  z-index: 1;
}
.services-preview-tag {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(10px);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  align-self: flex-start;
}
.services-preview-content {
  position: relative;
  z-index: 1;
}
.services-preview-content h4 {
  color: #fff;
  font-size: var(--t-2xl);
  font-weight: 600;
  letter-spacing: -0.025em;
  margin-bottom: 16px;
  line-height: 1.1;
}
.services-preview-content p {
  color: rgba(255,255,255,0.85);
  font-size: 0.9375rem;
  line-height: 1.55;
  max-width: 320px;
}

/* ==================================================================
   11. BY THE NUMBERS (dark stat band — replaces partner row)
   ================================================================== */
.numbers-band {
  background: var(--c-dark);
  color: #fff;
  padding: var(--s-10) 0;
  position: relative;
  overflow: hidden;
}
.numbers-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 20%, rgba(237, 30, 36, 0.18) 0%, transparent 50%),
    radial-gradient(circle at 20% 80%, rgba(237, 30, 36, 0.10) 0%, transparent 50%);
  pointer-events: none;
}
.numbers-band .container { position: relative; z-index: 1; }
.numbers-band-head {
  margin-bottom: var(--s-9);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: end;
}
.numbers-band-head h2 {
  font-size: var(--t-5xl);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.95;
  color: #fff;
  max-width: 600px;
}
.numbers-band-head p {
  color: rgba(255,255,255,0.65);
  font-size: var(--t-lg);
  line-height: 1.55;
  max-width: 400px;
  justify-self: end;
}
.numbers-band-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 64px;
}
.number-stat {
  position: relative;
}
.number-stat .n {
  font-size: clamp(3.5rem, 6vw, 5.5rem);
  font-weight: 700;
  letter-spacing: -0.042em;
  line-height: 0.85;
  color: #fff;
  display: block;
  margin-bottom: 16px;
}
.number-stat .n em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--c-primary);
  letter-spacing: -0.04em;
}
.number-stat .label {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.4;
  letter-spacing: 0.01em;
  max-width: 220px;
}

/* ==================================================================
   12. WHY CRITICAL (3 pillars, asymmetric — replaces Help section)
   ================================================================== */
.why-section {
  padding: var(--section-y) 0;
  background: var(--c-cream);
}

/* Editorial dark variant — replaces the old card stack on homepage */
.why-section-dark {
  background: var(--c-dark);
  color: #fff;
  padding: var(--section-y) 0;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.why-section-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 56px 56px;
  animation: hero-grid-pan 18s linear infinite;
  mask-image: radial-gradient(ellipse at 20% 30%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at 20% 30%, #000 30%, transparent 80%);
  z-index: -1;
}
.why-head-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 64px;
  align-items: end;
  margin-bottom: var(--s-9);
  padding-bottom: var(--s-8);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.why-head-dark h2 {
  font-size: var(--t-5xl);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 0.98;
  color: #fff;
}
.why-head-dark h2 em { color: var(--c-primary); font-family: var(--font-serif); font-weight: 400; font-style: italic; }
.eyebrow-dark { color: rgba(255,255,255,0.55); }
.eyebrow-dark::before { background: var(--c-primary); }
.why-lede {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: rgba(255,255,255,0.65);
  max-width: 420px;
  margin: 0;
}
.why-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-bottom: var(--s-10);
}
.why-stat {
  padding: 8px 40px 8px 0;
  border-right: 1px solid rgba(255,255,255,0.08);
}
.why-stat:last-child { border-right: 0; }
.why-stat + .why-stat { padding-left: 40px; }
.why-stat-n {
  font-family: var(--font-sans);
  font-size: clamp(3.5rem, 8vw, 6.5rem);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--c-primary);
  margin-bottom: 24px;
  display: flex;
  align-items: baseline;
}
.why-stat-suffix {
  font-size: 0.4em;
  margin-left: 0.1em;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.45);
}
.why-stat h3 {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
  color: #fff;
  line-height: 1.2;
}
.why-stat p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.55);
}
.why-credo {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  padding-top: var(--s-9);
  border-top: 1px solid rgba(255,255,255,0.08);
}
.why-credo-line {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.why-credo-num {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--c-primary);
}
.why-credo-line h4 {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: #fff;
}
.why-credo-line p {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: rgba(255,255,255,0.55);
}
@media (max-width: 900px) {
  .why-head-row { grid-template-columns: 1fr; gap: 32px; }
  .why-stats, .why-credo { grid-template-columns: 1fr; gap: 32px; }
  .why-stat { padding: 0 0 32px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
  .why-stat + .why-stat { padding-left: 0; padding-top: 32px; }
  .why-stat:last-child { border-bottom: 0; }
}
.why-head {
  margin-bottom: var(--s-9);
  max-width: 820px;
}
.why-head h2 {
  font-size: var(--t-5xl);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.95;
}
.why-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 32px;
  align-items: start;
}
.why-card {
  background: #fff;
  border-radius: var(--r-xl);
  padding: 48px;
  border: 1px solid rgba(10,10,11,0.06);
  transition: all var(--dur-slow) var(--ease);
}
.why-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-3); }
.why-card-large {
  grid-row: span 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 540px;
  background: linear-gradient(160deg, #fff 0%, rgba(237, 30, 36, 0.04) 100%);
  border-color: rgba(237, 30, 36, 0.1);
}
.why-card-large .why-card-icon {
  background: var(--c-primary);
  color: #fff;
}
.why-card-icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: var(--c-dark);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 32px;
}
.why-card-icon svg { width: 24px; height: 24px; }
.why-card h3 {
  font-size: var(--t-2xl);
  font-weight: 600;
  letter-spacing: -0.025em;
  margin-bottom: 16px;
  color: var(--c-dark);
  line-height: 1.1;
}
.why-card-large h3 { font-size: var(--t-3xl); margin-bottom: 20px; }
.why-card p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--c-text);
}
.why-card-large p { font-size: var(--t-lg); }
.why-card-stat {
  font-family: var(--font-sans);
  font-size: 4rem;
  font-weight: 700;
  letter-spacing: -0.038em;
  line-height: 0.9;
  color: var(--c-primary);
  margin-top: auto;
  padding-top: 40px;
}
.why-card-stat span {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--c-text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 8px;
}

/* ==================================================================
   13B. TEAM GRID — 3 equal cards (new v3.1)
   ================================================================== */
.team-grid-equal {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.team-grid-equal .team-card {
  background: transparent;
  border-radius: 0;
  cursor: default;
  transition: transform var(--dur-slow) var(--ease);
  display: flex;
  flex-direction: column;
}
.team-grid-equal .team-card:hover { transform: translateY(-6px); box-shadow: none; }
.team-grid-equal .team-card-image {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--c-stone);
  margin-bottom: 20px;
  position: relative;
}
.team-grid-equal .team-card-image::after { display: none; }
.team-grid-equal .team-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}
.team-grid-equal .team-card:hover .team-card-image img { transform: scale(1.06); transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.team-grid-equal .team-card-meta {
  padding: 0 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.team-grid-equal .team-card-meta h4 {
  font-family: var(--font-sans);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--c-dark);
  line-height: 1.15;
}
.team-grid-equal .team-card-meta .role {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--c-text-muted);
  margin: 6px 0 0;
}
@media (max-width: 1024px) {
  .team-grid-equal { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .team-grid-equal { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
}

/* ==================================================================
   13. TEAM BENTO (legacy, kept for About page)
   ================================================================== */
.team-section {
  padding: var(--section-y) 0;
  background: var(--c-bg);
}
.team-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 32px;
  margin-bottom: var(--s-9);
}
.team-head h2 {
  font-size: var(--t-5xl);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.95;
  max-width: 700px;
}
.team-bento {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: auto auto;
  gap: 24px;
  min-height: 720px;
}
.team-tile {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--c-soft);
  cursor: pointer;
  isolation: isolate;
}
.team-tile-feature {
  grid-row: span 2;
  min-height: 720px;
}
.team-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}
.team-tile:hover img { transform: scale(1.04); }
.team-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(10,10,11,0.8) 100%);
  pointer-events: none;
}
.team-tile-content {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 32px;
  color: #fff;
  z-index: 1;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
}
.team-tile-content h4 {
  color: #fff;
  font-size: var(--t-xl);
  font-weight: 600;
  letter-spacing: -0.025em;
  margin-bottom: 4px;
}
.team-tile-feature .team-tile-content h4 { font-size: var(--t-2xl); }
.team-tile-content .role {
  color: rgba(255,255,255,0.7);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.team-tile-arrow {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(8px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
  transition: all var(--dur) var(--ease);
}
.team-tile:hover .team-tile-arrow {
  background: var(--c-primary);
  transform: rotate(-45deg);
}
.team-tile-hiring {
  background: var(--c-primary);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 32px;
  cursor: default;
}
.team-tile-hiring::after { display: none; }
.team-tile-hiring .label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.85;
}
.team-tile-hiring h4 {
  color: #fff;
  font-size: var(--t-2xl);
  font-weight: 600;
  letter-spacing: -0.025em;
  margin-top: 12px;
}
.team-tile-hiring p {
  color: rgba(255,255,255,0.85);
  font-size: 0.875rem;
  line-height: 1.5;
  margin-top: 12px;
}

/* ==================================================================
   14. EDITORIAL PULL-QUOTE TESTIMONIAL
   ================================================================== */
.testimonials {
  padding: var(--section-y) 0;
  background: var(--c-cream);
  position: relative;
  overflow: hidden;
}
.testimonials-inner {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 64px;
  align-items: center;
}
.testimonial-quote-block {
  position: relative;
}
.testimonial-quote-block::before {
  content: '\201C';
  position: absolute;
  top: -80px; left: -40px;
  font-family: var(--font-serif);
  font-size: 16rem;
  color: var(--c-primary);
  opacity: 0.18;
  line-height: 0.8;
  pointer-events: none;
  font-style: italic;
}
.testimonial-quote {
  font-family: var(--font-sans);
  font-size: clamp(1.875rem, 3vw, 3rem);
  font-weight: 500;
  line-height: 1.2;
  color: var(--c-dark);
  letter-spacing: -0.025em;
  position: relative;
  z-index: 1;
}
.testimonial-quote em {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  color: var(--c-primary);
}
.testimonial-meta {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.testimonial-meta-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.testimonial-author-card {
  background: #fff;
  border: 1px solid rgba(10,10,11,0.06);
  border-radius: var(--r-lg);
  padding: 24px 28px;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.testimonial-author-card.active {
  background: var(--c-dark);
  color: #fff;
  border-color: var(--c-dark);
}
.testimonial-author-card:hover:not(.active) {
  border-color: var(--c-dark);
  transform: translateX(8px);
}
.testimonial-author-card .who {
  display: flex;
  align-items: center;
  gap: 14px;
}
.testimonial-author-mark {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--c-primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.8125rem;
  flex-shrink: 0;
}
.testimonial-author-card .name {
  font-weight: 700;
  color: var(--c-dark);
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
}
.testimonial-author-card.active .name { color: #fff; }
.testimonial-author-card .role {
  font-size: 0.8125rem;
  color: var(--c-text-muted);
  margin-top: 2px;
}
.testimonial-author-card.active .role { color: rgba(255,255,255,0.65); }

/* ==================================================================
   15. BLOG (featured + 2 stacked)
   ================================================================== */
.blog-section {
  padding: var(--section-y) 0;
  background: var(--c-bg);
}
.blog-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 32px;
  margin-bottom: var(--s-9);
}
.blog-head h2 {
  font-size: var(--t-5xl);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.95;
  max-width: 700px;
}
.blog-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 32px;
  align-items: stretch;
}
/* New 2x3 uniform grid for homepage feed */
.blog-grid-2x3 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 900px) {
  .blog-grid-2x3 { grid-template-columns: 1fr; }
}
.blog-featured {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  display: block;
  background: var(--c-soft);
  transition: all var(--dur-slow) var(--ease);
}
.blog-featured:hover { transform: translateY(-6px); box-shadow: var(--shadow-4); }
.blog-featured-image {
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: var(--c-stone);
}
.blog-featured-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}
.blog-featured:hover .blog-featured-image img { transform: scale(1.04); }
.blog-featured-content {
  padding: 32px 36px;
}
.blog-featured-content .meta {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.8125rem;
  color: var(--c-text-muted);
  margin-bottom: 16px;
}
.blog-featured-content .meta .tag {
  font-weight: 700;
  color: var(--c-primary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.blog-featured-content h3 {
  font-size: var(--t-3xl);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin-bottom: 16px;
}
.blog-featured-content p {
  color: var(--c-text);
  font-size: 0.9375rem;
  line-height: 1.55;
}
.blog-secondary {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.blog-card-mini {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  align-items: center;
  text-decoration: none;
  color: inherit;
  padding: 16px;
  border-radius: var(--r-lg);
  transition: all var(--dur) var(--ease);
  background: var(--c-soft);
}
.blog-card-mini:hover {
  background: var(--c-cream);
  transform: translateX(6px);
}
.blog-card-mini-image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-md);
}
.blog-card-mini-image img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.blog-card-mini h4 {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin-bottom: 8px;
}
.blog-card-mini .meta {
  font-size: 0.75rem;
  color: var(--c-text-muted);
  letter-spacing: 0.02em;
}

/* ==================================================================
   16. DARK CTA SECTION (replaces redundant lets-work + marquee + footer-h2)
   ================================================================== */
.big-cta {
  padding: var(--section-y) 0 var(--section-y);
  background: #fff;
  color: var(--c-text);
  position: relative;
  overflow: hidden;
}
/* Replaces the red gradient with a real image background */
.big-cta-image .big-cta-image-bg {
  position: absolute;
  inset: 0;
  background: #fff;
  z-index: 0;
}
.big-cta-image .big-cta-image-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(10,10,11,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10,10,11,0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  animation: hero-grid-pan 12s linear infinite;
  mask-image: radial-gradient(ellipse at center, #000 25%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 25%, transparent 85%);
}
.big-cta-image::before { display: none; }
.big-cta-image .container { position: relative; z-index: 1; }
.big-cta-inner {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
}
.big-cta-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-bottom: 32px;
}
.big-cta-eyebrow::before {
  content: '';
  display: inline-block;
  width: 32px; height: 2px;
  background: var(--c-primary);
}
.big-cta-eyebrow::before {
  content: '';
  display: inline-block;
  width: 32px; height: 2px;
  background: var(--c-primary);
}
.big-cta h2 {
  font-size: clamp(3.5rem, 8vw, 7.5rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.95;
  color: var(--c-dark);
  margin-bottom: 36px;
}
.big-cta h2 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--c-primary);
  letter-spacing: -0.025em;
}
.big-cta-lede {
  font-size: var(--t-xl);
  color: var(--c-text);
  line-height: 1.5;
  max-width: 640px;
  margin-bottom: 48px;
}
.big-cta-row {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}
.big-cta-meta {
  display: flex;
  gap: 32px;
  padding-top: 40px;
  border-top: 1px solid var(--c-border);
  flex-wrap: wrap;
}
.big-cta-meta-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.big-cta-meta-item .label {
  font-size: 0.75rem;
  color: var(--c-text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.big-cta-meta-item .value {
  font-size: 1rem;
  font-weight: 600;
  color: var(--c-dark);
  letter-spacing: -0.01em;
}

/* ==================================================================
   17. FOOTER (utilitarian)
   ================================================================== */
.site-footer {
  background: var(--c-dark);
  color: rgba(255,255,255,0.7);
  padding: var(--s-9) 0 var(--s-5);
  border-top: 1px solid rgba(255,255,255,0.06);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 64px;
  margin-bottom: 64px;
}
.footer-brand .footer-logo { display: inline-block; margin-bottom: 24px; }
.footer-brand .footer-logo img { height: 72px; width: auto; }
.footer-brand p {
  font-size: 0.875rem;
  line-height: 1.55;
  color: rgba(255,255,255,0.55);
  max-width: 320px;
  margin-bottom: 28px;
}
.footer-social {
  display: flex;
  gap: 10px;
}
.footer-social a {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.75);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--dur) var(--ease);
}
.footer-social a:hover { transform: translateY(-2px); color: #fff; }
.footer-social .social-fb:hover { background: #1877F2; border-color: #1877F2; }
.footer-social .social-ig:hover {
  background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  border-color: transparent;
}
.footer-social .social-li:hover { background: #0A66C2; border-color: #0A66C2; }
.footer-col h4 {
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 12px; }
.footer-col a {
  font-size: 0.9375rem;
  font-weight: 500;
  color: rgba(255,255,255,0.7);
  letter-spacing: -0.005em;
  transition: color var(--dur) var(--ease);
}
.footer-col a:hover { color: var(--c-primary); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.4);
}
.footer-bottom-links {
  display: flex;
  gap: 24px;
}

/* ==================================================================
   18. PAGE HERO (interior pages)
   ================================================================== */
.page-hero {
  padding: calc(var(--header-h) + var(--s-10)) 0 var(--section-y-sm);
  background: var(--c-bg);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(10,10,11,0.085) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10,10,11,0.085) 1px, transparent 1px);
  background-size: 64px 64px;
  animation: hero-grid-pan 9s linear infinite;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 14%, #000 68%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 18%, #000 78%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, #000 14%, #000 68%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 18%, #000 78%, transparent 100%);
  mask-composite: intersect;
  z-index: -1;
}
.page-hero::after { display: none; }
.page-hero .container { position: relative; z-index: 1; }
.page-hero-inner {
  max-width: 1000px;
}
.page-hero h1 {
  font-size: var(--t-6xl);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.95;
  margin-bottom: 28px;
}
.page-hero h1 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--c-primary);
  letter-spacing: -0.02em;
}
.page-hero .lede {
  font-size: var(--t-xl);
  color: var(--c-text);
  line-height: 1.5;
  max-width: 640px;
}

/* ==================================================================
   19. SERVICES PAGE (full service list)
   ================================================================== */
.services-page-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--c-border);
}
.services-page-grid .service-row {
  padding: 48px 32px;
  border-bottom: 1px solid var(--c-border);
  display: flex;
  gap: 32px;
  align-items: start;
  cursor: pointer;
  transition: background var(--dur) var(--ease);
  position: relative;
}
.services-page-grid .service-row:nth-child(odd) { border-right: 1px solid var(--c-border); }
.services-page-grid .service-row:hover { background: var(--c-soft); }
.services-page-grid .service-num {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--c-primary);
  letter-spacing: 0.08em;
  flex-shrink: 0;
  width: 40px;
}
.services-page-grid .service-row h4 {
  font-size: var(--t-2xl);
  font-weight: 600;
  letter-spacing: -0.025em;
  margin-bottom: 12px;
  line-height: 1.15;
}
.services-page-grid .service-row p {
  color: var(--c-text);
  line-height: 1.6;
  font-size: 0.9375rem;
  margin: 0;
}

/* ==================================================================
   20. ABOUT PAGE
   ================================================================== */
.about-story {
  padding: var(--section-y) 0;
}
.about-story-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
  align-items: start;
}
.about-story-image {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--c-stone);
}
.about-story-image img { width: 100%; height: 100%; object-fit: cover; }
.about-story-content h2 {
  font-size: var(--t-4xl);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 28px;
}
.about-story-content p {
  font-size: var(--t-lg);
  line-height: 1.6;
  color: var(--c-text);
  margin-bottom: 20px;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: var(--s-9);
}
.value-card {
  background: #fff;
  border: 1px solid rgba(10,10,11,0.06);
  border-radius: var(--r-xl);
  padding: 40px 36px;
  transition: all var(--dur) var(--ease);
}
.value-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-3);
  border-color: var(--c-primary);
}
.value-card .num {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--c-primary);
  letter-spacing: 0.08em;
  margin-bottom: 20px;
}
.value-card h4 {
  font-size: var(--t-xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}
.value-card p {
  color: var(--c-text);
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* ==================================================================
   21. CONTACT PAGE
   ================================================================== */
.contact-section {
  padding: var(--section-y) 0;
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 80px;
  align-items: start;
}
.contact-info h2 {
  font-size: var(--t-4xl);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 24px;
}
.contact-info .lede {
  font-size: var(--t-lg);
  color: var(--c-text);
  line-height: 1.55;
  margin-bottom: 40px;
}
.contact-info-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.contact-info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--c-border);
}
.contact-info-item .label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.contact-info-item .value {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--c-dark);
  letter-spacing: -0.01em;
}
.contact-info-item .value a:hover { color: var(--c-primary); }

.contact-form {
  background: var(--c-cream);
  padding: 48px;
  border-radius: var(--r-xl);
}
.contact-form h3 {
  font-size: var(--t-2xl);
  font-weight: 600;
  letter-spacing: -0.025em;
  margin-bottom: 8px;
}
.contact-form .lede {
  color: var(--c-text);
  font-size: 0.9375rem;
  margin-bottom: 32px;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.form-row.single { grid-template-columns: 1fr; }
.form-group label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 10px;
  color: var(--c-dark);
}
.form-group input,
.form-group textarea {
  width: 100%;
  padding: 14px 0;
  border: 0;
  border-bottom: 1.5px solid var(--c-border);
  font-size: 1rem;
  color: var(--c-dark);
  background: transparent;
  transition: all var(--dur) var(--ease);
  border-radius: 0;
}
.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--c-primary);
}
.form-group textarea { resize: vertical; min-height: 100px; }
.contact-form .btn-primary { width: 100%; margin-top: 16px; }
.honeypot { position: absolute; left: -9999px; }

/* ==================================================================
   22. FAQ ACCORDION
   ================================================================== */
.faq-list {
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.faq-item {
  border-top: 1px solid var(--c-border);
  transition: all var(--dur) var(--ease);
}
.faq-item:last-child { border-bottom: 1px solid var(--c-border); }
.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32px 0;
  cursor: pointer;
  font-size: var(--t-lg);
  font-weight: 700;
  color: var(--c-dark);
  letter-spacing: -0.015em;
  user-select: none;
  text-align: left;
  width: 100%;
}
.faq-icon {
  width: 32px; height: 32px;
  flex-shrink: 0;
  position: relative;
  transition: transform var(--dur) var(--ease);
}
.faq-icon::before,
.faq-icon::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  background: var(--c-dark);
  transition: all var(--dur) var(--ease);
}
.faq-icon::before { width: 14px; height: 1.5px; transform: translate(-50%, -50%); }
.faq-icon::after  { width: 1.5px; height: 14px; transform: translate(-50%, -50%); }
.faq-item.open .faq-icon::after { transform: translate(-50%, -50%) scaleY(0); }
.faq-item.open .faq-icon::before { background: var(--c-primary); }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s var(--ease);
}
.faq-item.open .faq-answer { max-height: 600px; }
.faq-answer p {
  padding: 0 0 32px;
  color: var(--c-text);
  font-size: var(--t-base);
  line-height: 1.65;
  max-width: 760px;
}

/* ==================================================================
   22B. ABOUT — full-width feature photo + 2-col story
   ================================================================== */
.about-feature-photo {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  margin-bottom: var(--section-y-sm);
}
.about-feature-photo img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: var(--r-xl);
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.about-story { padding: 0 0 var(--section-y) 0; }
.about-story-text { max-width: 1200px; margin: 0 auto; }
.about-story-text h2 {
  font-size: var(--t-5xl);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
  margin-bottom: var(--s-8);
  max-width: 900px;
}
.about-story-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.about-story-cols p { font-size: var(--t-lg); line-height: 1.7; color: var(--c-text); margin-bottom: 20px; }
@media (max-width: 900px) {
  .about-story-cols { grid-template-columns: 1fr; gap: 32px; }
}

/* ==================================================================
   22C. CONTACT v2 — sleeker form with floating labels
   ================================================================== */
.contact-section-v2 { padding: var(--section-y) 0; }
.contact-grid-v2 {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 32px;
  align-items: stretch;
}
.contact-info-card {
  background: var(--c-dark);
  color: #fff;
  border-radius: var(--r-xl);
  padding: 56px 48px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.contact-info-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size: 56px 56px;
  animation: hero-grid-pan 14s linear infinite;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 90%);
  z-index: -1;
}
.contact-info-card h2 {
  color: #fff;
  font-size: var(--t-4xl);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
  margin-bottom: 48px;
}
.contact-channels {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 56px;
}
.contact-channel {
  display: grid;
  grid-template-columns: 48px 1fr 16px;
  gap: 20px;
  align-items: center;
  padding: 24px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  color: #fff;
  text-decoration: none;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.contact-channel:last-child { border-bottom: 1px solid rgba(255,255,255,0.08); }
.contact-channel-static { cursor: default; }
.contact-channel:not(.contact-channel-static):hover {
  transform: translateX(8px);
  border-top-color: rgba(237, 30, 36, 0.4);
}
.contact-channel-icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.85);
}
.contact-channel:not(.contact-channel-static):hover .contact-channel-icon {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff;
}
.contact-channel-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: 2px;
}
.contact-channel-value {
  display: block;
  font-size: 1.0625rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.01em;
}
.contact-channel-arrow {
  color: rgba(255,255,255,0.4);
  display: inline-flex;
  transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.contact-channel:hover .contact-channel-arrow {
  color: var(--c-primary);
  transform: translate(4px, -2px);
}
.contact-info-meta {
  margin-top: auto;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.contact-info-meta-item .label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: 4px;
}
.contact-info-meta-item .value {
  display: block;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #fff;
}

.contact-form-v2 {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: 56px 48px;
  box-shadow: var(--shadow-3);
}
.contact-form-head { margin-bottom: 40px; }
.contact-form-badge { display: none; } /* killed per user feedback: dev-y */
.contact-form-badge-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #25C57F;
  box-shadow: 0 0 0 3px rgba(37, 197, 127, 0.18);
  animation: chip-pulse 1.8s ease-in-out infinite;
}
.contact-form-v2 h3 {
  font-size: var(--t-3xl);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 12px;
}
.contact-form-v2 .contact-form-head p {
  color: var(--c-text);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.form-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
.form-field-row.single { grid-template-columns: 1fr; }
.form-field {
  position: relative;
}
.form-field input,
.form-field textarea {
  width: 100%;
  padding: 22px 16px 10px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  font-size: 1rem;
  color: var(--c-dark);
  background: var(--c-soft);
  transition: all var(--dur) var(--ease);
  font-family: inherit;
}
.form-field textarea { resize: vertical; min-height: 120px; padding-top: 28px; }
.form-field label {
  position: absolute;
  top: 18px;
  left: 16px;
  font-size: 0.9375rem;
  color: var(--c-text-muted);
  pointer-events: none;
  transition: all var(--dur) var(--ease);
  letter-spacing: -0.005em;
}
.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--c-primary);
  background: #fff;
  box-shadow: 0 0 0 4px var(--c-primary-soft);
}
.form-field input:focus + label,
.form-field input:not(:placeholder-shown) + label,
.form-field textarea:focus + label,
.form-field textarea:not(:placeholder-shown) + label {
  top: 8px;
  font-size: 0.7rem;
  color: var(--c-primary);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.contact-form-v2 .btn-primary { margin-top: 8px; }

@media (max-width: 1024px) {
  .contact-grid-v2 { grid-template-columns: 1fr; }
  .contact-info-card, .contact-form-v2 { padding: 40px 32px; }
}
@media (max-width: 640px) {
  .contact-info-card { padding: 32px 24px; }
  .contact-form-v2 { padding: 32px 24px; }
  .form-field-row { grid-template-columns: 1fr; gap: 16px; }
  .contact-info-meta { grid-template-columns: 1fr; }
}

/* ==================================================================
   22D. FAQ 2-COLUMN GRID
   ================================================================== */
.faq-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 64px;
  max-width: 1200px;
  margin: 0 auto;
}
.faq-grid-2col .faq-item:nth-child(1),
.faq-grid-2col .faq-item:nth-child(2) { border-top: 1px solid var(--c-border); }
@media (max-width: 900px) {
  .faq-grid-2col { grid-template-columns: 1fr; gap: 0; }
  .faq-grid-2col .faq-item:nth-child(2) { border-top: 0; }
}

/* ==================================================================
   23. SCROLL REVEAL
   ================================================================== */
/* Slightly less aggressive ease-out so the user can see the middle of the
   motion, not just the snap into place. Duration bumped to 1.3s for clearer
   perception. Selector specificity raised (.js-ready prefix) so it beats
   per-element transitions like `.services-page-grid .service-row` and
   `.hm-v5-phase` that were clobbering opacity/transform transitions and
   causing those elements to snap in instead of animate. We include
   background + box-shadow so hover transitions on those elements still
   read as smooth (short duration via the standard ease tokens). */
.js-ready [data-reveal] {
  transition:
    opacity 1.05s cubic-bezier(0.16, 0.84, 0.32, 1),
    transform 1.05s cubic-bezier(0.16, 0.84, 0.32, 1),
    background-color 0.3s var(--ease),
    box-shadow 0.3s var(--ease);
}
.js-ready [data-reveal]:not(.revealed) { opacity: 0; }
.js-ready [data-reveal="fade-up"]:not(.revealed)    { transform: translateY(110px); }
.js-ready [data-reveal="fade-left"]:not(.revealed)  { transform: translateX(-90px); }
.js-ready [data-reveal="fade-right"]:not(.revealed) { transform: translateX(90px); }
.js-ready [data-reveal="zoom-in"]:not(.revealed)    { transform: scale(0.92); }
[data-reveal].revealed { opacity: 1; transform: none; }
[data-reveal-delay="1"] { transition-delay: 110ms; }
[data-reveal-delay="2"] { transition-delay: 220ms; }
[data-reveal-delay="3"] { transition-delay: 330ms; }
[data-reveal-delay="4"] { transition-delay: 440ms; }
/* Extra reveal directions for varied motion across sections */
.js-ready [data-reveal="fade-down"]:not(.revealed)        { transform: translateY(-110px); }
.js-ready [data-reveal="rotate-left"]:not(.revealed)      { transform: translate(-110px, 32px) rotate(-7deg); }
.js-ready [data-reveal="rotate-right"]:not(.revealed)     { transform: translate(110px, 32px) rotate(7deg); }
.js-ready [data-reveal="pop-in"]:not(.revealed)           { transform: scale(0.78) translateY(32px); }
.js-ready [data-reveal="slide-rise"]:not(.revealed)       { transform: translateY(140px) scale(0.94); }
.js-ready [data-reveal="tilt-up"]:not(.revealed)          { transform: translateY(100px) rotate(-2.5deg); }
[data-reveal-delay="5"] { transition-delay: 500ms; }
[data-reveal-delay="6"] { transition-delay: 600ms; }
[data-reveal-delay="7"] { transition-delay: 700ms; }
[data-reveal-delay="8"] { transition-delay: 800ms; }


/* Page exit motion — subtle but visible. Fires earlier than before so users
   can see it happen during normal scrolling, not after the element is gone.
   Adds a small upward translate + opacity dim so motion registers without
   being intrusive. Returns cleanly when scrolling back up (hysteresis in JS).
   Specificity raised to match the entrance rule so it wins against
   per-element transitions. */
.js-ready [data-reveal].scrolled-past {
  opacity: 0.25;
  transform: translateY(-40px);
  transition:
    opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  [data-reveal].scrolled-past { opacity: 1 !important; transform: none !important; }
  .marquee-track { animation: none !important; }
  .hero-card-top, .hero-card-bot, .hero-screen { animation: none !important; }
  .hero-blob-1, .hero-blob-2, .hero-grid { animation: none !important; }
}

/* ==================================================================
   24. BACK TO TOP
   ================================================================== */
.back-to-top {
  position: fixed;
  bottom: 32px;
  right: 32px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--c-dark);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all var(--dur) var(--ease);
  border: 1.5px solid var(--c-dark);
}
.back-to-top.visible { opacity: 1; visibility: visible; transform: none; }
.back-to-top:hover {
  background: var(--c-primary);
  border-color: var(--c-primary);
  transform: translateY(-3px);
}
.back-to-top::before {
  content: '';
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 7px solid #fff;
}

/* ==================================================================
   25. RESPONSIVE
   ================================================================== */
@media (max-width: 1200px) {
  :root { --section-y: 120px; --section-y-sm: 80px; }
  .featured-work-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .case-card-1, .case-card-2 { transform: none; }
  .case-card-1:hover, .case-card-2:hover { transform: translateY(-8px); }
  .services-list-grid { gap: 48px; }
  .why-grid { gap: 24px; }
}

@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr; gap: 64px; }
  .hero-visual { min-height: 420px; }
  .featured-work-grid { grid-template-columns: 1fr; gap: 32px; }
  .case-card { min-height: 0; }
  .services-list-grid { grid-template-columns: 1fr; }
  .services-preview { position: relative; top: auto; max-width: 600px; margin: 32px auto 0; }
  .numbers-band-head { grid-template-columns: 1fr; gap: 24px; }
  .numbers-band-head p { justify-self: start; }
  .numbers-band-grid { grid-template-columns: repeat(2, 1fr); gap: 48px; }
  .why-grid { grid-template-columns: 1fr; }
  .why-card-large { grid-row: auto; min-height: auto; }
  .team-bento { grid-template-columns: 1fr; min-height: 0; }
  .team-tile-feature { grid-row: auto; min-height: 480px; }
  .testimonials-inner { grid-template-columns: 1fr; gap: 48px; }
  .blog-grid { grid-template-columns: 1fr; }
  .about-story-grid { grid-template-columns: 1fr; gap: 48px; }
  .contact-grid { grid-template-columns: 1fr; gap: 48px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 48px; }
  .values-grid { grid-template-columns: 1fr; }
  .services-page-grid { grid-template-columns: 1fr; }
  .services-page-grid .service-row:nth-child(odd) { border-right: 0; }
}

@media (max-width: 768px) {
  :root {
    --section-y: 80px;
    --section-y-sm: 56px;
    --gutter: 20px;
    --header-h: 64px;
  }
  .primary-nav { display: none; }
  .mobile-menu-toggle { display: inline-flex; }
  .site-logo img { height: 36px; }
  .hero-title { font-size: clamp(2.5rem, 11vw, 4rem); }
  .hero-lede { font-size: 1rem; }
  .hero-cards { max-width: 320px; }
  .hero-card { padding: 24px; }
  .hero-card-stat .n { font-size: 2.25rem; }
  .case-card-content { padding: 28px 24px; }
  .case-card-1, .case-card-2 { transform: none; }
  .services-list-item { padding: 20px 0; gap: 12px; }
  .services-list-item .num { width: 32px; font-size: 0.75rem; }
  .services-list-item .name { font-size: 1.5rem; }
  .services-list-item .arrow { width: 36px; height: 36px; }
  .numbers-band-grid { grid-template-columns: 1fr 1fr; gap: 32px 16px; padding-top: 40px; }
  .number-stat .n { font-size: 2.5rem; }
  .why-card { padding: 32px 24px; }
  .why-card-large { min-height: auto; }
  .why-card-stat { font-size: 2.5rem; padding-top: 24px; }
  .team-tile-feature { min-height: 360px; }
  .testimonial-quote { font-size: 1.5rem; }
  .testimonial-quote-block::before { font-size: 10rem; top: -40px; left: -10px; }
  .blog-card-mini { grid-template-columns: 120px 1fr; }
  .big-cta h2 { font-size: clamp(2.5rem, 12vw, 4rem); letter-spacing: -0.04em; }
  .big-cta-lede { font-size: 1rem; }
  .big-cta-meta { gap: 24px; }
  .footer-grid { grid-template-columns: 1fr; gap: 40px; }
  .footer-bottom { flex-direction: column; align-items: start; }
  .marquee-item { padding: 0 16px; font-size: clamp(2rem, 10vw, 3.5rem); }
  .form-row { grid-template-columns: 1fr; }
  .contact-form { padding: 32px 24px; }
  .featured-work-head { gap: 24px; }
  .featured-work-head h2 { font-size: clamp(2rem, 9vw, 2.75rem); }
  .services-list-head h2,
  .numbers-band-head h2,
  .why-head h2,
  .team-head h2,
  .blog-head h2 { font-size: clamp(2rem, 9vw, 2.75rem); }
}

/* ==================================================================
   26. BLOG GRID + CATEGORY PILLS (v3.3)
   ================================================================== */
.blog-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: var(--s-9);
  padding-bottom: 32px;
  border-bottom: 1px solid var(--c-border);
}
.blog-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--r-full);
  background: #fff;
  border: 1px solid var(--c-border);
  color: var(--c-dark);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: all var(--dur) var(--ease);
  text-decoration: none;
}
.blog-pill:hover {
  background: var(--c-dark);
  color: #fff;
  border-color: var(--c-dark);
  transform: translateY(-2px);
}
.blog-pill.active {
  background: var(--c-dark);
  color: #fff;
  border-color: var(--c-dark);
}

/* Per-category color identity, applies to active state */
.blog-pill[data-cat="seo"].active,
.blog-pill[data-cat="seo"]:hover { background: var(--cat-seo); border-color: var(--cat-seo); }
.blog-pill[data-cat="paid-media"].active,
.blog-pill[data-cat="paid-media"]:hover { background: var(--cat-paid); border-color: var(--cat-paid); }
.blog-pill[data-cat="social-media"].active,
.blog-pill[data-cat="social-media"]:hover { background: var(--cat-social); border-color: var(--cat-social); }
.blog-pill[data-cat="sales-strategy"].active,
.blog-pill[data-cat="sales-strategy"]:hover { background: var(--cat-sales); border-color: var(--cat-sales); }
.blog-pill[data-cat="insights"].active,
.blog-pill[data-cat="insights"]:hover { background: var(--cat-insights); border-color: var(--cat-insights); }

/* Pill color dot, lives left of label */
.blog-pill::before {
  content: '';
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-text-muted);
  transition: transform 0.25s ease, background 0.2s ease;
  flex-shrink: 0;
}
.blog-pill[data-cat=""]::before { display: none; }
.blog-pill[data-cat="seo"]::before { background: var(--cat-seo); }
.blog-pill[data-cat="paid-media"]::before { background: var(--cat-paid); }
.blog-pill[data-cat="social-media"]::before { background: var(--cat-social); }
.blog-pill[data-cat="sales-strategy"]::before { background: var(--cat-sales); }
.blog-pill[data-cat="insights"]::before { background: var(--cat-insights); }
.blog-pill:hover::before,
.blog-pill.active::before { background: #fff; transform: scale(1.15); }
.blog-pill-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(10,10,11,0.08);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--c-text-muted);
}
.blog-pill.active .blog-pill-count,
.blog-pill:hover .blog-pill-count {
  background: rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.85);
}

.blog-posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.blog-post-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(10,10,11,0.06);
  border-radius: var(--r-xl);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: all var(--dur-slow) var(--ease);
}
.blog-post-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-4);
  border-color: var(--c-dark);
}
.blog-post-image {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--c-stone);
}
.blog-post-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}
.blog-post-card:hover .blog-post-image img { transform: scale(1.05); }
.blog-post-image-placeholder {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--c-stone) 0%, var(--c-cream) 100%);
}
.blog-post-cat-pill {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 6px 14px;
  background: rgba(10,10,11,0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--r-full);
}
.blog-post-content {
  padding: 28px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}
.blog-post-content h3 {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.3;
  color: var(--c-dark);
}
.blog-post-card:hover .blog-post-content h3 { color: var(--c-primary); }
.blog-post-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8125rem;
  color: var(--c-text-muted);
  margin-top: auto;
}
.blog-post-meta .dot {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--c-text-muted);
}

@media (max-width: 1024px) {
  .blog-posts-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .blog-posts-grid { grid-template-columns: 1fr; }
  .blog-filter-row { gap: 8px; }
  .blog-pill { padding: 8px 14px; font-size: 0.8125rem; }
}

/* Section 27 used to override the A-mark positioning + animation. Canonical
   block at top of stylesheet (line ~120) is the single source of truth now. */


/* Hero chip entrance bounce */
@keyframes chip-enter {
  0%   { opacity: 0; transform: translate(0, 12px) scale(0.85); }
  100% { opacity: 1; transform: translate(0, 0) scale(1); }
}

@keyframes hero-chart-dot-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.5); }
}

/* ==================================================================
   28. BLOG CATEGORY COLORS + FILTER STATES (v3.4)
   Each category gets its own accent. Pills + post-card overlays both
   color-coded so the user can scan quickly.
   ================================================================== */
:root {
  --cat-seo:    #10B981;
  --cat-paid:   #ED1E24;
  --cat-social: #8B5CF6;
  --cat-sales:  #F59E0B;
  --cat-insights: #3B82F6;
}

/* Pill colors per category */
.blog-pill[data-cat="seo"]:hover,
.blog-pill[data-cat="seo"].active {
  background: var(--cat-seo);
  border-color: var(--cat-seo);
  color: #fff;
}
.blog-pill[data-cat="paid-media"]:hover,
.blog-pill[data-cat="paid-media"].active {
  background: var(--cat-paid);
  border-color: var(--cat-paid);
  color: #fff;
}
.blog-pill[data-cat="social-media"]:hover,
.blog-pill[data-cat="social-media"].active {
  background: var(--cat-social);
  border-color: var(--cat-social);
  color: #fff;
}
.blog-pill[data-cat="sales-strategy"]:hover,
.blog-pill[data-cat="sales-strategy"].active {
  background: var(--cat-sales);
  border-color: var(--cat-sales);
  color: #fff;
}
.blog-pill[data-cat="insights"]:hover,
.blog-pill[data-cat="insights"].active {
  background: var(--cat-insights);
  border-color: var(--cat-insights);
  color: #fff;
}

/* Card category-pill overlay colors */
.blog-post-card[data-cat="seo"] .blog-post-cat-pill { background: var(--cat-seo); }
.blog-post-card[data-cat="paid-media"] .blog-post-cat-pill { background: var(--cat-paid); }
.blog-post-card[data-cat="social-media"] .blog-post-cat-pill { background: var(--cat-social); }
.blog-post-card[data-cat="sales-strategy"] .blog-post-cat-pill { background: var(--cat-sales); }
.blog-post-card[data-cat="insights"] .blog-post-cat-pill { background: var(--cat-insights); }

/* Card hover: border tint matches category */
.blog-post-card[data-cat="seo"]:hover { border-color: var(--cat-seo); }
.blog-post-card[data-cat="seo"]:hover .blog-post-content h3 { color: var(--cat-seo); }
.blog-post-card[data-cat="paid-media"]:hover { border-color: var(--cat-paid); }
.blog-post-card[data-cat="paid-media"]:hover .blog-post-content h3 { color: var(--cat-paid); }
.blog-post-card[data-cat="social-media"]:hover { border-color: var(--cat-social); }
.blog-post-card[data-cat="social-media"]:hover .blog-post-content h3 { color: var(--cat-social); }
.blog-post-card[data-cat="sales-strategy"]:hover { border-color: var(--cat-sales); }
.blog-post-card[data-cat="sales-strategy"]:hover .blog-post-content h3 { color: var(--cat-sales); }
.blog-post-card[data-cat="insights"]:hover { border-color: var(--cat-insights); }
.blog-post-card[data-cat="insights"]:hover .blog-post-content h3 { color: var(--cat-insights); }

/* Filter transition state — cards smoothly fade/scale out when filtered */
.blog-post-card {
  transition: transform var(--dur-slow) var(--ease),
              box-shadow var(--dur-slow) var(--ease),
              border-color var(--dur) var(--ease),
              opacity 0.35s ease;
}
.blog-post-card.filter-hidden {
  opacity: 0;
  transform: scale(0.94);
  pointer-events: none;
}

/* Animated initial-entrance keyframe to make staggered cascade feel
   intentional after preloader closes */
@keyframes cm-section-rise {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: none; }
}


/* big-cta is now WHITE; .on-dark ghost button needs to behave like .btn-ghost on light */
.big-cta .btn-ghost.on-dark {
  color: var(--c-dark);
  border-color: var(--c-border);
}
.big-cta .btn-ghost.on-dark:hover {
  color: var(--c-primary);
  border-color: var(--c-primary);
}

/* ==================================================================
   28. PROSE + SINGLE POST (v3.12)
   ================================================================== */
.cm-prose {
  max-width: 760px;
  margin: 0 auto;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--c-text);
}
.cm-prose h2 { font-size: var(--t-3xl); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; margin: 56px 0 16px; }
.cm-prose h3 { font-size: var(--t-2xl); font-weight: 600; letter-spacing: -0.018em; line-height: 1.2; margin: 40px 0 12px; }
.cm-prose p { margin: 0 0 20px; }
.cm-prose a { color: var(--c-primary); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.cm-prose a:hover { color: var(--c-primary-dark); }
.cm-prose ul, .cm-prose ol { margin: 0 0 20px 24px; }
.cm-prose li { margin: 0 0 10px; }
.cm-prose img { max-width: 100%; height: auto; border-radius: var(--r-lg); margin: 24px 0; }
.cm-prose blockquote {
  border-left: 4px solid var(--c-primary);
  padding: 8px 0 8px 24px;
  margin: 32px 0;
  font-style: italic;
  color: var(--c-text);
  font-size: 1.125rem;
}
.cm-prose code { background: var(--c-stone); padding: 2px 6px; border-radius: 4px; font-size: 0.9em; }

.single-feature-image {
  max-width: 1200px;
  margin: 0 auto var(--s-9);
  padding: 0 var(--gutter);
}
.single-feature-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--r-xl);
}

/* ==================================================================
   29. WHY CRITICAL — MAGAZINE LAYOUT (v3.13, replaces dark band)
   ================================================================== */
.why-mag {
  padding: var(--section-y) 0;
  background: var(--c-bg);
}
.why-mag-head {
  max-width: 960px;
  margin-bottom: var(--s-9);
}
.why-mag-statement {
  font-family: var(--font-sans);
  font-size: clamp(2.5rem, 5.5vw, 4.75rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--c-dark);
  margin-top: 16px;
}
.why-mag-statement em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--c-primary);
}
.why-mag-split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 80px;
  align-items: center;
  padding: var(--s-9) 0;
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  margin-bottom: var(--s-9);
}
.why-mag-photo {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.why-mag-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.why-mag-copy { max-width: 480px; }
.why-mag-lede {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.25rem, 1.8vw, 1.625rem);
  line-height: 1.4;
  color: var(--c-dark);
  margin-bottom: 24px;
  letter-spacing: -0.005em;
}
.why-mag-copy p {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--c-text);
  margin-bottom: 24px;
}
.why-mag-principles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
}
.why-mag-principle {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  padding-top: 32px;
}
.why-mag-principle::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 2px;
  background: var(--c-primary);
}
.why-mag-num {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--c-text-muted);
  text-transform: uppercase;
}
.why-mag-principle h4 {
  font-size: 1.3125rem;
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--c-dark);
  line-height: 1.2;
}
.why-mag-principle p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--c-text);
}
@media (max-width: 900px) {
  .why-mag-split { grid-template-columns: 1fr; gap: 40px; }
  .why-mag-principles { grid-template-columns: 1fr; gap: 32px; }
}

/* ==================================================================
   30. VIDEO FACADE — poster + play button, swaps to YouTube iframe
   ================================================================== */
.cm-video-facade {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--c-stone);
  border-radius: var(--r-xl);
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 16 / 9;
  isolation: isolate;
}
.cm-video-facade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), filter 0.4s ease;
}
.cm-video-facade::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,11,0) 50%, rgba(10,10,11,0.35) 100%);
  pointer-events: none;
}
.cm-video-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--c-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 16px 48px rgba(237, 30, 36, 0.45);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s ease;
  z-index: 2;
}
.cm-video-play svg { transform: translateX(2px); }
.cm-video-facade:hover img { transform: scale(1.03); filter: brightness(0.92); }
.cm-video-facade:hover .cm-video-play { transform: translate(-50%, -50%) scale(1.08); }
.cm-video-facade.playing .cm-video-play,
.cm-video-facade.playing img,
.cm-video-facade.playing::after { display: none; }
.cm-video-facade iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ==================================================================
   31. HOMEPAGE v4 — editorial rebuild below hero+marquee (2026-05-14)
   ================================================================== */

/* Section head pattern */
.hm-section-head {
  max-width: 820px;
  margin-bottom: var(--s-9);
}
.hm-section-head h2 {
  font-size: clamp(2rem, 4.5vw, 3.75rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--c-dark);
  margin-top: 16px;
}
.hm-section-head h2 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--c-primary);
}

/* MANIFESTO */
.hm-manifesto {
  padding: var(--section-y) 0;
  background: var(--c-cream);
  border-top: 1px solid rgba(10,10,11,0.05);
  text-align: left;
}
.hm-manifesto-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-primary);
  margin: 0 0 32px;
}
.hm-manifesto-eyebrow span {
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--c-primary);
}
.hm-manifesto-headline {
  font-family: var(--font-sans);
  font-size: clamp(2.25rem, 5.5vw, 4.5rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.02;
  color: var(--c-dark);
  max-width: 1100px;
  margin: 0 0 40px;
}
.hm-manifesto-headline em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--c-primary);
}
.hm-manifesto-body {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--c-text);
  max-width: 700px;
}

/* BENTO services */
.hm-bento {
  padding: var(--section-y) 0;
  background: var(--c-bg);
}
.hm-bento-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(220px, auto);
  gap: 16px;
}
.hm-bento-cell {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
}
.hm-bento-cell:hover { transform: translateY(-4px); }
.hm-bento-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.hm-bento-cell:hover .hm-bento-bg { transform: scale(1.05); }
.hm-bento-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,11,0.1) 0%, rgba(10,10,11,0.55) 60%, rgba(10,10,11,0.92) 100%);
  z-index: 1;
}
.hm-bento-content {
  position: relative;
  z-index: 2;
  color: #fff;
  max-width: 420px;
}
.hm-bento-num {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--c-primary);
  display: block;
  margin-bottom: 14px;
}
.hm-bento-cell h3 {
  font-size: 1.625rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 12px;
}
.hm-bento-cell p {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: rgba(255,255,255,0.78);
}
.hm-bento-feature {
  grid-column: span 4;
  grid-row: span 2;
  min-height: 460px;
}
.hm-bento-feature h3 { font-size: 2.5rem; }
.hm-bento-feature p { font-size: 1rem; max-width: 480px; }
.hm-bento-dark {
  grid-column: span 2;
  background: var(--c-dark);
  color: #fff;
  justify-content: space-between;
  isolation: isolate;
}
.hm-bento-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 36px 36px;
  z-index: -1;
}
.hm-bento-dark .hm-bento-content { color: #fff; }
.hm-bento-dark p { color: rgba(255,255,255,0.7); }
.hm-bento-mini-chart {
  position: relative;
  height: 60px;
  margin-top: 24px;
  color: var(--c-primary);
}
.hm-bento-mini-chart svg { width: 100%; height: 100%; }
.hm-bento-light {
  grid-column: span 2;
  background: var(--c-soft);
  color: var(--c-dark);
  justify-content: flex-start;
}
.hm-bento-light .hm-bento-num { color: var(--c-primary); }
.hm-bento-light h3 { color: var(--c-dark); margin-top: 0; }
.hm-bento-light p { color: var(--c-text); margin-bottom: 20px; }
.hm-bento-link {
  margin-top: auto;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--c-dark);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s ease, gap 0.2s ease;
  text-decoration: none;
}
.hm-bento-link:hover { color: var(--c-primary); gap: 10px; }
.hm-bento-image {
  grid-column: span 2;
  min-height: 320px;
}
@media (max-width: 1024px) {
  .hm-bento-grid { grid-template-columns: repeat(2, 1fr); }
  .hm-bento-feature { grid-column: span 2; grid-row: auto; min-height: 420px; }
  .hm-bento-dark, .hm-bento-light, .hm-bento-image { grid-column: span 1; }
}
@media (max-width: 640px) {
  .hm-bento-grid { grid-template-columns: 1fr; }
  .hm-bento-cell { grid-column: span 1 !important; }
  .hm-bento-feature h3 { font-size: 1.875rem; }
}

/* BY THE NUMBERS — dark band */
.hm-numbers {
  padding: var(--section-y) 0;
  background: var(--c-dark);
  color: #fff;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.hm-numbers::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size: 56px 56px;
  animation: hero-grid-pan 18s linear infinite;
  mask-image: radial-gradient(ellipse at 20% 30%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at 20% 30%, #000 30%, transparent 80%);
  z-index: -1;
}
.hm-numbers-head {
  max-width: 720px;
  margin-bottom: var(--s-10);
}
.hm-numbers-head h2 {
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #fff;
  margin-top: 16px;
}
.hm-numbers-head h2 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--c-primary);
}
.eyebrow-on-dark { color: rgba(255,255,255,0.55); }
.eyebrow-on-dark::before { background: var(--c-primary); }
.hm-numbers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px 0;
}
.hm-num-cell {
  padding: 0 32px;
  border-right: 1px solid rgba(255,255,255,0.08);
}
.hm-num-cell:first-child { padding-left: 0; }
.hm-num-cell:last-child { padding-right: 0; border-right: 0; }
.hm-num-big {
  font-family: var(--font-sans);
  font-size: clamp(3.5rem, 7vw, 6rem);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--c-primary);
  margin-bottom: 18px;
  display: flex;
  align-items: baseline;
}
.hm-num-suffix {
  font-size: 0.45em;
  margin-left: 0.08em;
  font-weight: 500;
  letter-spacing: 0;
  color: rgba(255,255,255,0.5);
}
.hm-num-label {
  font-size: 0.95rem;
  line-height: 1.45;
  color: rgba(255,255,255,0.7);
}
@media (max-width: 900px) {
  .hm-numbers-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 32px; }
  .hm-num-cell:nth-child(2) { border-right: 0; padding-right: 0; }
  .hm-num-cell:nth-child(3) { padding-left: 0; }
}

/* PROCESS — horizontal stepper */
.hm-process {
  padding: var(--section-y) 0;
  background: var(--c-cream);
}
.hm-process-track {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin: 0;
  padding: 32px 0 0;
  position: relative;
}
.hm-process-track::before {
  content: '';
  position: absolute;
  top: 12px;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-primary) 20%, var(--c-primary) 80%, transparent);
  opacity: 0.4;
}
.hm-process-step {
  position: relative;
  padding-top: 36px;
}
.hm-process-step::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--c-primary);
  box-shadow: 0 0 0 4px rgba(237,30,36,0.18);
}
.hm-process-num {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--c-primary);
  display: block;
  margin-bottom: 12px;
}
.hm-process-step h4 {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--c-dark);
  margin-bottom: 12px;
  line-height: 1.1;
}
.hm-process-step p {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--c-text);
}
@media (max-width: 900px) {
  .hm-process-track { grid-template-columns: 1fr 1fr; }
  .hm-process-track::before { display: none; }
}
@media (max-width: 560px) {
  .hm-process-track { grid-template-columns: 1fr; }
}

/* TEAM strip */
.hm-team {
  padding: var(--section-y) 0;
  background: var(--c-bg);
}
.hm-team-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.hm-team-card {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--c-stone);
  isolation: isolate;
}
.hm-team-img { position: absolute; inset: 0; z-index: 0; }
.hm-team-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.hm-team-card:hover .hm-team-img img { transform: scale(1.05); }
.hm-team-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, transparent 50%, rgba(10,10,11,0.85) 100%);
}
.hm-team-info {
  position: absolute;
  bottom: 28px;
  left: 28px;
  right: 28px;
  z-index: 2;
  color: #fff;
}
.hm-team-info h4 {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.018em;
  margin-bottom: 4px;
}
.hm-team-info p {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.02em;
}
@media (max-width: 900px) {
  .hm-team-strip { grid-template-columns: 1fr 1fr; }
  .hm-team-card:nth-child(3) { grid-column: span 2; aspect-ratio: 16 / 9; }
}
@media (max-width: 600px) {
  .hm-team-strip { grid-template-columns: 1fr; }
  .hm-team-card:nth-child(3) { grid-column: auto; aspect-ratio: 4 / 5; }
}

/* READING — feature post + 2 secondary */
.hm-reading {
  padding: var(--section-y) 0;
  background: var(--c-cream);
}
.hm-reading-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  flex-wrap: wrap;
}
.hm-reading-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 32px;
}
.hm-feature-post {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--c-dark);
  background: #fff;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid rgba(10,10,11,0.06);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
}
.hm-feature-post:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-4);
}
.hm-feature-img {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--c-stone);
}
.hm-feature-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.hm-feature-post:hover .hm-feature-img img { transform: scale(1.04); }
.hm-feature-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 28px 32px 0;
}
.hm-feature-tag {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-primary);
}
.hm-feature-post[data-cat="seo"] .hm-feature-tag { color: var(--cat-seo); }
.hm-feature-post[data-cat="paid-media"] .hm-feature-tag { color: var(--cat-paid); }
.hm-feature-post[data-cat="social-media"] .hm-feature-tag { color: var(--cat-social); }
.hm-feature-post[data-cat="sales-strategy"] .hm-feature-tag { color: var(--cat-sales); }
.hm-feature-post[data-cat="insights"] .hm-feature-tag { color: var(--cat-insights); }
.hm-feature-date {
  font-size: 0.8125rem;
  color: var(--c-text-muted);
}
.hm-feature-post h3 {
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.15;
  padding: 16px 32px 8px;
  color: var(--c-dark);
}
.hm-feature-cta {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--c-primary);
  padding: 0 32px 32px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.2s ease;
}
.hm-feature-post:hover .hm-feature-cta { gap: 12px; }
.hm-side-posts {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.hm-side-post {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 24px;
  text-decoration: none;
  color: var(--c-dark);
  background: #fff;
  border-radius: var(--r-lg);
  overflow: hidden;
  padding: 16px;
  border: 1px solid rgba(10,10,11,0.06);
  transition: transform 0.3s ease, border-color 0.2s ease;
  align-items: center;
}
.hm-side-post:hover { transform: translateX(4px); border-color: var(--c-dark); }
.hm-side-img {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--c-stone);
}
.hm-side-img img { width: 100%; height: 100%; object-fit: cover; }
.hm-side-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.75rem;
  color: var(--c-text-muted);
  margin-bottom: 8px;
}
.hm-side-tag {
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-primary);
}
.hm-side-post[data-cat="seo"] .hm-side-tag { color: var(--cat-seo); }
.hm-side-post[data-cat="paid-media"] .hm-side-tag { color: var(--cat-paid); }
.hm-side-post[data-cat="social-media"] .hm-side-tag { color: var(--cat-social); }
.hm-side-post[data-cat="sales-strategy"] .hm-side-tag { color: var(--cat-sales); }
.hm-side-post[data-cat="insights"] .hm-side-tag { color: var(--cat-insights); }
.hm-side-post h4 {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--c-dark);
}
@media (max-width: 900px) {
  .hm-reading-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .hm-side-post { grid-template-columns: 100px 1fr; gap: 16px; }
}

/* ==================================================================
   32. WPForms integration on the Contact page — brand-consistent style
   ================================================================== */
.contact-form-v2 .wpforms-container { margin: 0; }
.contact-form-v2 .wpforms-container .wpforms-field {
  padding: 0 0 16px;
}
.contact-form-v2 .wpforms-field-label {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--c-text-muted);
  margin-bottom: 8px;
  display: block;
}
.contact-form-v2 .wpforms-field input[type="text"],
.contact-form-v2 .wpforms-field input[type="email"],
.contact-form-v2 .wpforms-field input[type="tel"],
.contact-form-v2 .wpforms-field textarea {
  width: 100%;
  max-width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: #fff;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--c-dark);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.contact-form-v2 .wpforms-field input[type="text"]:focus,
.contact-form-v2 .wpforms-field input[type="email"]:focus,
.contact-form-v2 .wpforms-field input[type="tel"]:focus,
.contact-form-v2 .wpforms-field textarea:focus {
  outline: none;
  border-color: var(--c-dark);
  box-shadow: 0 0 0 3px rgba(10,10,11,0.08);
}
.contact-form-v2 .wpforms-field textarea {
  min-height: 140px;
  font-family: var(--font-sans);
}
.contact-form-v2 .wpforms-required-label { color: var(--c-primary); }
.contact-form-v2 .wpforms-submit {
  width: 100%;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 58px !important;
  padding: 16px 32px !important;
  background: var(--c-primary) !important;
  border: 1px solid var(--c-primary) !important;
  border-radius: var(--r-full) !important;
  color: #fff !important;
  font-family: var(--font-sans) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: -0.005em !important;
  transition: background 0.2s ease, transform 0.2s ease !important;
  cursor: pointer;
}
.contact-form-v2 .wpforms-submit:hover {
  background: var(--c-dark) !important;
  border-color: var(--c-dark) !important;
  transform: translateY(-1px);
}
.contact-form-v2 .wpforms-error {
  color: var(--c-primary);
  font-size: 0.8125rem;
  margin-top: 6px;
  display: block;
}
.contact-form-v2 .wpforms-field-input-error {
  border-color: var(--c-primary) !important;
}
.contact-form-v2 .wpforms-confirmation-container {
  padding: 24px;
  background: var(--c-cream);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  color: var(--c-dark);
}
.contact-form-v2 .wpforms-confirmation-container p { margin: 0; }

/* ==================================================================
   33. CUSTOM RED CURSOR (fine-pointer devices only)
   Dot follows the mouse exactly; ring eases behind with ~18% lerp.
   Scales up on interactive elements. Hidden on touch/coarse pointers
   so mobile/tablet users get the native cursor / no overlay.
   ================================================================== */
.cm-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.2s var(--ease);
}
.cm-cursor.visible { opacity: 1; }
/* Hide the custom cursor while the preloader curtain is still up. The
   body has `cm-loading` until killPreloader() runs. */
body.cm-loading .cm-cursor { opacity: 0 !important; visibility: hidden; }
.cm-cursor-dot,
.cm-cursor-ring {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  display: block;
  border-radius: 50%;
  will-change: transform, width, height;
}
.cm-cursor-dot {
  width: 8px;
  height: 8px;
  background: var(--c-primary);
  box-shadow: 0 0 12px rgba(237, 30, 36, 0.55);
  transition: width 0.2s var(--ease), height 0.2s var(--ease), background 0.2s var(--ease);
}
.cm-cursor-ring {
  width: 36px;
  height: 36px;
  border: 1.5px solid var(--c-primary);
  background: transparent;
  transition: width 0.28s var(--ease), height 0.28s var(--ease), background 0.28s var(--ease), border-color 0.28s var(--ease);
}
/* Interactive-element hover state */
.cm-cursor.hover .cm-cursor-dot {
  width: 4px;
  height: 4px;
  background: #fff;
}
.cm-cursor.hover .cm-cursor-ring {
  width: 60px;
  height: 60px;
  background: rgba(237, 30, 36, 0.12);
  border-color: var(--c-primary);
}
/* Hide the system cursor when our custom one is active — but NOT while
   the preloader curtain is still up (so the user sees the normal cursor
   during loading instead of nothing). */
@media (hover: hover) and (pointer: fine) {
  body.cm-has-custom-cursor:not(.cm-loading),
  body.cm-has-custom-cursor:not(.cm-loading) a,
  body.cm-has-custom-cursor:not(.cm-loading) button,
  body.cm-has-custom-cursor:not(.cm-loading) input,
  body.cm-has-custom-cursor:not(.cm-loading) textarea,
  body.cm-has-custom-cursor:not(.cm-loading) select,
  body.cm-has-custom-cursor:not(.cm-loading) [role="button"],
  body.cm-has-custom-cursor:not(.cm-loading) .cm-video-facade {
    cursor: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cm-cursor { display: none !important; }
}
@media (max-width: 1024px) {
  .cm-cursor { display: none; }
}

/* ==================================================================
   34. LENIS SMOOTH SCROLL
   Required CSS for Lenis to take over the scroll container correctly.
   ================================================================== */
html.lenis,
html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: hidden;
}
.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

/* ==================================================================
   PILLAR PAGES — Service pillar / Location / Industry / Case Study
   shared section + grid styles (2026-05-18 SEO program)
   ================================================================== */
.pillar-answer-box { padding: 56px 0 24px; background: var(--c-cream); border-top: 1px solid rgba(10,10,11,0.05); }
.pillar-answer { max-width: 880px; }
.pillar-answer p {
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  line-height: 1.7;
  color: var(--c-dark);
  margin: 0;
}
.pillar-section { max-width: 1100px; }
.pillar-section h2 {
  font-size: clamp(2rem, 4.4vw, 3.25rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--c-dark);
  margin: 0 0 var(--s-7);
}
.pillar-section h2 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--c-primary);
}
.pillar-section h3 {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--c-dark);
  margin: 0 0 12px;
}
.pillar-section h4 {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--c-dark);
  margin: 0 0 14px;
}
.pillar-section p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--c-text);
  margin: 0 0 18px;
}
.pillar-section ul {
  margin: 0 0 20px;
  padding-left: 24px;
  line-height: 1.7;
  color: var(--c-text);
}
.pillar-section ul li { margin-bottom: 8px; }
.pillar-process,
.pillar-deliverables,
.pillar-case-studies,
.pillar-pricing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-7);
  margin-top: var(--s-8);
}
.pillar-process { grid-template-columns: 1fr; max-width: 900px; }
.pillar-step {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 24px 24px;
  align-items: start;
  padding: 24px 0;
  border-top: 1px solid rgba(10,10,11,0.08);
}
/* Force h3 + p into column 2 (otherwise auto-flow puts p in narrow col 1) */
.pillar-step h3,
.pillar-step p {
  grid-column: 2;
}
.pillar-step:last-child { border-bottom: 1px solid rgba(10,10,11,0.08); }
.pillar-num {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--c-primary);
}
.pillar-deliverable,
.pillar-case-study,
.pillar-pricing-tier {
  padding: 28px 24px;
  border: 1px solid rgba(10,10,11,0.08);
  background: #fff;
  display: flex;
  flex-direction: column;
}
.pillar-deliverable h4 {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-primary);
  margin-bottom: 16px;
}
.pillar-deliverable ul { padding-left: 18px; }
.pillar-deliverable li { font-size: 0.875rem; line-height: 1.55; }
.pillar-case-study p { font-size: 0.9375rem; }
.pillar-case-study .link-arrow { margin-top: auto; padding-top: 12px; }
.pillar-pricing-tier { border-radius: 4px; }
.pillar-price { font-size: 1.375rem; color: var(--c-dark); margin: 0 0 20px; }
.pillar-price strong { color: var(--c-primary); font-weight: 700; }
.pillar-pricing-tier ul { padding-left: 18px; }
.pillar-pricing-tier li { font-size: 0.875rem; }
.pillar-pricing-note {
  margin-top: var(--s-7);
  text-align: center;
  font-size: 0.9375rem;
  color: var(--c-text);
}
.pillar-anti-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 16px;
}
.pillar-anti-list li {
  padding: 18px 22px;
  background: var(--c-cream);
  border-left: 3px solid var(--c-primary);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--c-dark);
}
.pillar-anti-list strong { color: var(--c-dark); display: block; margin-bottom: 4px; }

@media (max-width: 768px) {
  .pillar-step { grid-template-columns: 1fr; gap: 8px; }
  .pillar-process,
  .pillar-deliverables,
  .pillar-case-studies,
  .pillar-pricing { grid-template-columns: 1fr; gap: 24px; }
  .pillar-answer p { font-size: 1rem; }
  .pillar-section h2 { font-size: clamp(1.75rem, 7vw, 2.5rem); }
}
.pillar-quote {
  margin: var(--s-7) 0;
  padding: 32px 28px;
  background: #fff;
  border-left: 4px solid var(--c-primary);
  font-family: var(--font-serif);
  font-style: italic;
}
.pillar-quote p {
  font-size: 1.375rem;
  line-height: 1.5;
  color: var(--c-dark);
  margin: 0 0 16px;
}
.pillar-quote footer {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 0.9375rem;
  color: var(--c-text);
}
.link-arrow-disabled { color: var(--c-text-muted); pointer-events: none; }

/* ==================================================================
   35. MOBILE FIXES — 640px and below (2026-05-18)
   Comprehensive sitewide pass. The existing 768px / 640px / 560px
   blocks earlier in the file handle a lot, but several selectors were
   either missed or had higher specificity rules elsewhere clobbering
   them (especially `.hero-v2 .hero-title` which beats `.hero-title`).
   This block lives at the end of the file so it wins source-order
   ties and handles all the audit findings in one place.
   ================================================================== */
@media (max-width: 640px) {
  /* HOMEPAGE HERO — h1 was overflowing the viewport because
     `.hero-v2 .hero-title` (specificity 0,2,0) had a clamp min of 3rem
     that beat the 768px rule's `.hero-title` (specificity 0,1,0). */
  .hero-v2 .hero-title {
    font-size: clamp(1.625rem, 7.4vw, 2.25rem);
    line-height: 1.1;
    letter-spacing: -0.025em;
    overflow-wrap: break-word;
  }
  /* Hero CTA buttons stack vertically on mobile so neither one gets clipped. */
  .hero-ctas {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 100%;
  }
  .hero-ctas .btn,
  .hero-ctas .btn-primary,
  .hero-ctas .btn-ghost {
    width: 100%;
    justify-content: center;
    white-space: normal;
  }
  /* Hide the "Campaign live" / "Conversion Lift" dashboard mock entirely
     on mobile — it adds confusion at narrow widths and competes with the
     hero text for attention. Desktop/tablet keeps it. */
  .hero-visual,
  .hero-visual-v2 {
    display: none !important;
  }
  /* Hero no longer tries to fill 100dvh on mobile — it was creating
     huge empty whitespace above the content. Use natural content height
     with comfortable top/bottom padding instead. */
  .hero {
    min-height: 0;
    padding: calc(var(--header-h) + 32px) 0 56px;
    align-items: flex-start;
  }
  .hero-v2 .hero-inner { padding-bottom: 40px; gap: 40px; }
  .hero-lede { font-size: 0.9375rem; line-height: 1.55; }
  .hero-content { max-width: 100%; }
  /* Hero visual dashboard mockup — kill the -1.5deg rotation on mobile
     (it pushed the card past the right edge) and constrain to viewport. */
  .hero-visual-v2 {
    min-height: 0;
    margin-top: 16px;
  }
  .hero-screen {
    max-width: 100%;
    transform: none;
    animation: none;
  }

  /* PAGE HERO (interior pages) — h1 used --t-6xl with min 4rem,
     way too big on a 375px viewport. */
  .page-hero h1 {
    font-size: clamp(1.625rem, 7.4vw, 2.25rem);
    line-height: 1.1;
    letter-spacing: -0.025em;
    margin-bottom: 18px;
    overflow-wrap: break-word;
  }
  .page-hero {
    padding: calc(var(--header-h) + 56px) 0 64px;
  }
  .page-hero .lede { font-size: 0.9375rem; line-height: 1.6; }

  /* ABOUT page — story + values section h2s used --t-5xl with min
     3.25rem, overflowing on mobile. */
  .about-story-text h2,
  .about-story-content h2,
  .why-head h2 {
    font-size: clamp(1.75rem, 7.5vw, 2.5rem);
    line-height: 1.1;
    letter-spacing: -0.025em;
    margin-bottom: 24px;
    word-break: break-word;
  }
  .values-grid { gap: 18px; }
  .value-card { padding: 28px 22px; }
  .value-card h4 { font-size: 1.125rem; }
  .value-card p { font-size: 0.875rem; }

  /* HOMEPAGE MARQUEE — items were rendering huge. */
  .marquee-item {
    font-size: clamp(1.25rem, 6.5vw, 1.75rem);
    padding: 0 22px;
    letter-spacing: -0.01em;
  }
  .marquee-item:nth-child(even) { padding: 0 20px; }

  /* CONTACT PAGE ---------------------------------------------------- */
  .contact-info-card h2,
  .contact-form-v2 .contact-form-head h3 {
    font-size: clamp(1.375rem, 6.4vw, 1.875rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    word-break: break-word;
  }
  .contact-section-v2 .contact-grid-v2 {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .contact-info-card,
  .contact-form-v2 {
    padding: 28px 22px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .contact-channel-value { font-size: 0.9375rem; }

  /* HOMEPAGE — BILLBOARD section ---------------------------------- */
  .hm-v5-billboard { padding: 64px 0; }
  .hm-v5-billboard-text h2 {
    font-size: clamp(1.6rem, 7.8vw, 2.25rem);
    line-height: 1.15;
  }
  .hm-v5-billboard-facade { aspect-ratio: 16 / 10; }

  /* HOMEPAGE — CAPABILITIES section -------------------------------- */
  .hm-v5-caps-section { padding: 64px 0; }
  .hm-v5-caps-head h2 {
    font-size: clamp(1.875rem, 8vw, 2.5rem);
    line-height: 1.05;
  }

  /* HOMEPAGE — PHASES section -------------------------------------- */
  .hm-v5-phases { padding: 64px 0; }
  .hm-v5-phases-head h2 {
    font-size: clamp(1.75rem, 7.5vw, 2.5rem);
    line-height: 1.1;
  }
  .hm-v5-phase {
    padding: 28px 22px 0;
  }
  .hm-v5-phase h4 {
    font-size: 1.1875rem;
    margin-bottom: 14px;
  }
  .hm-v5-phase p {
    font-size: 0.875rem;
    margin-bottom: 24px;
  }
  .hm-v5-certs {
    gap: 22px 28px;
    padding-top: 40px;
  }
  .hm-v5-certs img { max-height: 34px; }

  /* HOMEPAGE — OPERATE section ------------------------------------ */
  .hm-v5-operate { padding: 64px 0; }

  /* TEAM section -------------------------------------------------- */
  .team-section { padding: 64px 0; }
  .team-grid-equal {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .team-head h2 { font-size: clamp(1.875rem, 7.5vw, 2.5rem); line-height: 1.1; }

  /* BIG CTA ------------------------------------------------------- */
  .big-cta { padding: 80px 0; }
  .big-cta h2,
  .big-cta-image h2 {
    font-size: clamp(2rem, 9vw, 2.75rem);
    line-height: 1.05;
    letter-spacing: -0.025em;
  }
  .big-cta-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .big-cta-row .btn,
  .big-cta-row .btn-ghost { width: 100%; justify-content: center; }

  /* SERVICES PAGE — service rows ---------------------------------- */
  .services-page-grid {
    grid-template-columns: 1fr;
  }
  .services-page-grid .service-row {
    padding: 28px 0;
    border-right: 0 !important;
  }
  .services-page-grid .service-row h4 {
    font-size: 1.25rem;
    margin-bottom: 8px;
  }
  .services-page-grid .service-row p { font-size: 0.875rem; }
  .services-page-grid .service-num { width: 32px; font-size: 0.75rem; }

  /* FAQ PAGE ----------------------------------------------------- */
  .faq-grid-2col {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .faq-item {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .faq-question {
    padding: 18px 0;
    gap: 12px;
  }
  .faq-question span:first-child {
    font-size: 0.875rem;
    line-height: 1.4;
    padding-right: 4px;
    word-break: break-word;
    overflow-wrap: break-word;
  }
  .faq-answer p { font-size: 0.875rem; line-height: 1.6; }

  /* BLOG GRID + SINGLE POSTS ------------------------------------- */
  .blog-posts-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .blog-post-card h3 {
    font-size: 1.0625rem;
    line-height: 1.25;
  }
  .blog-filter-row {
    gap: 8px;
    flex-wrap: wrap;
  }
  .blog-pill {
    font-size: 0.75rem;
    padding: 6px 12px;
  }
  .single-post-content h1,
  .single-post-content .post-title {
    font-size: clamp(1.875rem, 7.5vw, 2.5rem);
    line-height: 1.1;
  }
  /* Field-notes pattern (if any single template still uses it) */
  .hm-feature-post h3 { font-size: 1.25rem; line-height: 1.2; }
  .hm-side-post h4 { font-size: 0.9375rem; line-height: 1.3; }

  /* HEADER on mobile --------------------------------------------- */
  .site-header .container { padding: 0 var(--gutter); }

  /* HORIZONTAL OVERFLOW GUARDS — last-resort safety to prevent
     any rogue element from causing horizontal scroll on mobile. */
  html, body { overflow-x: hidden; max-width: 100%; }
  img, video, iframe { max-width: 100%; height: auto; }
}

/* Tighter pass at very narrow widths (iPhone SE, 320-375px) */
@media (max-width: 375px) {
  :root { --gutter: 16px; }
  .hero-v2 .hero-title,
  .page-hero h1 {
    font-size: clamp(1.75rem, 9vw, 2.25rem);
  }
  .marquee-item { font-size: clamp(1.125rem, 6vw, 1.5rem); padding: 0 18px; }
  .marquee-item:nth-child(even) { padding: 0 16px; }
  .hm-v5-phase { padding: 24px 18px 0; }
}

/* ==================================================================
   32. HOMEPAGE v5 — editorial redesign below hero+marquee (2026-05-18)
   Manifesto / Capabilities / How we operate / Numbers — then existing
   Team + Big CTA continue unchanged.
   ================================================================== */

/* --- 1. BILLBOARD + BUSINESS NEEDS — inherited from live site --- */
.hm-v5-billboard {
  padding: var(--section-y) 0;
  background: #fff;
}
.hm-v5-billboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-9);
  align-items: center;
}
.hm-v5-billboard-video { width: 100%; }
.hm-v5-billboard-facade {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.hm-v5-billboard-facade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hm-v5-billboard-text h2 {
  font-family: var(--font-sans);
  font-size: clamp(1.875rem, 3.4vw, 2.875rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.18;
  color: var(--c-dark);
  margin: 0 0 28px;
}
.hm-v5-billboard-text h2 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--c-primary);
}
.hm-v5-billboard-text p {
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--c-text);
  margin: 0 0 32px;
  max-width: 540px;
}
.hm-v5-billboard-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--c-dark);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: color var(--dur) var(--ease);
}
.hm-v5-billboard-link:hover { color: var(--c-primary); }
.hm-v5-billboard-link span {
  display: inline-block;
  transition: transform var(--dur) var(--ease);
}
.hm-v5-billboard-link:hover span { transform: translate(2px, -2px); }

/* --- legacy v5.0 manifesto (kept inert; no element targets it now) --- */
.hm-v5-manifesto {
  padding: var(--section-y) 0 var(--section-y-sm);
  background: var(--c-cream);
  border-top: 1px solid rgba(10,10,11,0.05);
}
.hm-v5-manifesto-head {
  max-width: 980px;
  margin-bottom: var(--s-9);
}
.hm-v5-manifesto-head h2 {
  font-size: clamp(2rem, 4.4vw, 3.5rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: var(--c-dark);
  margin-top: 22px;
}
.hm-v5-manifesto-head h2 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--c-primary);
}
.hm-v5-manifesto-beliefs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-7);
  border-top: 1px solid rgba(10,10,11,0.08);
  padding-top: var(--s-8);
}
.hm-v5-belief {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hm-v5-belief-num {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--c-primary);
}
.hm-v5-belief h4 {
  font-size: 1.4375rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--c-dark);
  line-height: 1.2;
  margin: 0;
}
.hm-v5-belief p {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--c-text);
  margin: 0;
}

/* --- 2. CAPABILITIES --- */
.hm-v5-caps {
  padding: var(--section-y-sm) 0 var(--section-y);
  background: var(--c-cream);
}
.hm-v5-caps-head {
  max-width: 760px;
  margin-bottom: var(--s-9);
}
.hm-v5-caps-head h2 {
  font-size: clamp(2.25rem, 5vw, 4rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 0.98;
  color: var(--c-dark);
  margin-top: 22px;
}
.hm-v5-caps-head h2 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--c-primary);
}
.hm-v5-caps-lede {
  margin-top: 24px;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--c-text);
  max-width: 640px;
}
.hm-v5-caps-grid {
  background: transparent;
}
.hm-v5-caps-foot {
  margin-top: var(--s-8);
  display: flex;
  justify-content: flex-start;
}

/* --- 3. HOW WE OPERATE — editorial manifesto on dark (v5.1) --- */
.hm-v5-operate {
  padding: var(--section-y) 0;
  background: var(--c-dark);
  color: rgba(255,255,255,0.85);
  position: relative;
}
.hm-v5-operate::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 80px 80px;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 18%, #000 82%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 20%, #000 80%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, #000 18%, #000 82%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 20%, #000 80%, transparent 100%);
  mask-composite: intersect;
  pointer-events: none;
  z-index: 0;
}
.hm-v5-operate .container { position: relative; z-index: 1; }
.hm-v5-operate-statement {
  text-align: center;
  max-width: 880px;
  margin: 0 auto var(--s-10);
}
.hm-v5-operate-statement .eyebrow {
  justify-content: center;
}
.hm-v5-operate-statement h2 {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 400;
  font-family: var(--font-serif);
  font-style: italic;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: #fff;
  margin-top: 24px;
}
.hm-v5-operate-statement h2 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--c-primary);
}
.hm-v5-operate-body {
  margin: 28px auto 0;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.7);
  max-width: 640px;
  font-family: var(--font-sans);
  font-style: normal;
}
.hm-v5-operate-principles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-7);
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: var(--s-8);
  margin-top: var(--s-9);
}
.hm-v5-principle {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hm-v5-principle-num {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--c-primary);
}
.hm-v5-principle h4 {
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: #fff;
  margin: 0;
  line-height: 1.2;
}
.hm-v5-principle p {
  font-size: 0.875rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.62);
  margin: 0;
}

/* --- EXCELLENCE IN ALL PHASES — inherited from live site --- */
.hm-v5-phases {
  padding: var(--section-y) 0;
  background: #fff;
}
.hm-v5-phases-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--s-9);
}
.hm-v5-phases-subtitle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--c-dark);
  margin-bottom: 16px;
}
.hm-v5-phases-arrow {
  display: inline-flex;
  align-items: center;
}
.hm-v5-phases-arrow svg {
  width: 38px;
  height: 12px;
}
.hm-v5-phases-head h2 {
  font-family: var(--font-sans);
  font-size: clamp(2rem, 4.4vw, 3.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.18;
  color: var(--c-dark);
  margin: 0;
}
.hm-v5-phases-head h2 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--c-primary);
}
.hm-v5-phases-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: var(--s-9);
}
.hm-v5-phase {
  background: var(--c-cream);
  padding: 36px 28px 0;
  border-bottom: 2px solid var(--c-primary);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.hm-v5-phase:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(10,10,11,0.06);
}
.hm-v5-phase-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 28px;
  border: 1px solid rgba(10,10,11,0.18);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--c-dark);
  margin-bottom: 28px;
}
.hm-v5-phase h4 {
  font-family: var(--font-sans);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--c-dark);
  margin: 0 0 20px;
}
.hm-v5-phase h4 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--c-primary);
}
.hm-v5-phase p {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--c-text);
  margin: 0 0 32px;
}
.hm-v5-certs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 4vw, 56px);
  flex-wrap: wrap;
  padding-top: var(--s-7);
  border-top: 1px solid rgba(10,10,11,0.08);
}
.hm-v5-certs img {
  display: block;
  max-height: 56px;
  width: auto;
  opacity: 0.65;
  filter: grayscale(1);
  transition: opacity var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.hm-v5-certs img:hover {
  opacity: 1;
  filter: grayscale(0);
}

/* --- legacy v5.0 operate-grid (kept inert; no element targets it now) --- */
.hm-v5-operate-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--s-10);
  align-items: start;
}
.hm-v5-operate-lede h2 {
  font-size: clamp(2.25rem, 5vw, 4rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 0.98;
  color: #fff;
  margin-top: 22px;
}
.hm-v5-operate-lede h2 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--c-primary);
}
.hm-v5-operate-lede p {
  margin-top: 26px;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.7);
  max-width: 480px;
}
.hm-v5-operate-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.hm-v5-operate-list li {
  display: flex;
  gap: 32px;
  padding: 32px 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  align-items: start;
}
.hm-v5-operate-num {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--c-primary);
  width: 36px;
  flex-shrink: 0;
  padding-top: 4px;
}
.hm-v5-operate-list h4 {
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 8px;
  line-height: 1.2;
}
.hm-v5-operate-list p {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: rgba(255,255,255,0.65);
  margin: 0;
}

/* --- 4. BY THE NUMBERS --- */
.hm-v5-stats {
  padding: var(--section-y) 0;
  background: var(--c-cream);
}
.hm-v5-stats-head {
  max-width: 760px;
  margin-bottom: var(--s-9);
}
.hm-v5-stats-head h2 {
  font-size: clamp(2.25rem, 5vw, 4rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 0.98;
  color: var(--c-dark);
  margin-top: 22px;
}
.hm-v5-stats-head h2 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--c-primary);
}
.hm-v5-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid rgba(10,10,11,0.08);
}
.hm-v5-stat {
  padding: var(--s-7) var(--s-6) var(--s-7) 0;
  border-right: 1px solid rgba(10,10,11,0.08);
}
.hm-v5-stat:last-child { border-right: 0; padding-right: 0; }
.hm-v5-stat-num {
  font-family: var(--font-sans);
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--c-primary);
  display: flex;
  align-items: baseline;
}
.hm-v5-stat-suffix,
.hm-v5-stat-prefix {
  font-size: 0.55em;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--c-primary);
  margin-left: 2px;
}
.hm-v5-stat-prefix {
  margin-right: 2px;
  margin-left: 0;
}
.hm-v5-stat-label {
  margin-top: 20px;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--c-text);
}

/* --- v5 responsive --- */
@media (max-width: 1024px) {
  .hm-v5-billboard-grid {
    grid-template-columns: 1fr;
    gap: var(--s-7);
  }
  .hm-v5-phases-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .hm-v5-operate-principles {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-7) var(--s-6);
  }
}
@media (max-width: 768px) {
  .hm-v5-billboard-text p { max-width: none; }
  .hm-v5-phases-grid {
    grid-template-columns: 1fr;
  }
  .hm-v5-certs {
    gap: 28px 36px;
  }
  .hm-v5-certs img {
    max-height: 40px;
  }
  .hm-v5-manifesto-beliefs {
    grid-template-columns: 1fr;
    gap: var(--s-6);
  }
  .hm-v5-operate-statement h2 {
    font-size: clamp(2rem, 8vw, 3rem);
  }
  .hm-v5-operate-principles {
    grid-template-columns: 1fr;
    gap: var(--s-6);
  }
}