/* =====================================================================
   Loopdash — Editorial redesign layer (Neue Montreal frame)
   Loaded AFTER base.css. Reskins the whole site via token overrides
   + core component restyles. Page-specific treatments live in the
   individual templates.
   ===================================================================== */

:root {
  /* Typeface — tight grotesk */
  --base-font: "Inter Tight", "Helvetica Neue", Arial, sans-serif;

  /* Warm editorial palette lives in base.css :root (--color-cream, --color-charcoal,
     --color-charcoal-light, --color-cream-dark, --primary-color, --color-green-waterloo). */

  /* Accent */
  --accent: #035fd0;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Semantic ink alphas (on paper) */
  --ink-60: rgba(27, 24, 17, 0.64); /* muted body text — 5:1 on cream (WCAG AA) */
  --ink-30: rgba(27, 24, 17, 0.22);
  --ink-12: rgba(27, 24, 17, 0.12);
  /* Paper alphas (on ink) */
  --paper-70: rgba(240, 237, 228, 0.70);
  --paper-55: rgba(240, 237, 228, 0.55);
  --paper-14: rgba(240, 237, 228, 0.14);
}

/* ---------- Base ---------- */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.006em;
}

::-moz-selection { background: var(--accent); color: var(--color-cream); }

::selection { background: var(--accent); color: var(--color-cream); }

/* On dark sections the accent shifts to a lighter blue so blue text/CTAs stay legible. */
.site-footer, .cta, .home-proof { --accent: #3986e6; }

/* ---------- Display typography ---------- */
.headline {
  font-size: clamp(2.6rem, 8vw, 6.75rem);
  line-height: 0.94;
  letter-spacing: -0.026em;
  font-weight: 500;
}
.headline span { color: var(--primary-color); }
/* Inspiration page heading is a long line — dial it down from the display size. */
.headline--inspiration { font-size: clamp(1.9rem, 4vw, 3.5rem); }
.headline em,
.accent-italic {
  font-style: normal;
  font-weight: 400;
  font-family: var(--base-font);
  color: var(--accent);
}

.subheadline { letter-spacing: -0.015em; }

/* Crisp solid headlines instead of the faded gradient */
.text-gradient {
  background: none;
  -webkit-text-fill-color: currentColor;
  background-clip: initial;
  -webkit-background-clip: initial;
  color: var(--color-charcoal);
}
.text-gradient-white {
  background: none;
  -webkit-text-fill-color: currentColor;
  background-clip: initial;
  -webkit-background-clip: initial;
  color: var(--color-cream);
}

/* Tighten the larger steps of the type scale */
.text-8, .text-9, .text-10, .text-11, .text-12, .text-13 { letter-spacing: -0.023em; }
.text-11, .text-12, .text-13 { line-height: 1; font-weight: 500; }

h1, h2, h3 { letter-spacing: -0.015em; }

.eyebrow,
.text-uppercase { letter-spacing: 0.12em; }

/* Small helper for accent text */
.text-accent { color: var(--accent); }

/* ---------- Buttons ---------- */
.button,
.button-primary {
  border-radius: 100px;
  padding: 0.9rem 1.6rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  font-size: clamp(0.85rem, 1.1vw, 0.98rem);
}
.button:hover, .button-primary:hover {
    opacity: 1;
    background: var(--accent);
    border-color: var(--accent);
    color: var(--color-cream);
  }
.button:hover svg, .button-primary:hover svg { fill: var(--color-cream); }

.button-secondary,
.button-white {
  border-radius: 100px;
  background: transparent;
  border: 1px solid var(--color-charcoal);
  color: var(--color-charcoal);
}

.button-secondary:hover, .button-white:hover {
    opacity: 1;
    background: var(--color-charcoal);
    border-color: var(--color-charcoal);
    color: var(--color-cream);
  }

/* On dark cards (e.g. the proposal "Ready to move forward?" CTA) the white
   button needs a solid white fill with black text, not the transparent
   charcoal-on-charcoal treatment above. */
.card.card-dark .button-white {
  background: #fff;
  border-color: #fff;
  color: #000;
}
.card.card-dark .button-white svg { fill: #000; }
.card.card-dark .button-white:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.card.card-dark .button-white:hover svg { fill: #fff; }

.button-lg { padding: 1.05rem 2.1rem; }
.button-sm { padding: 0.62rem 1.2rem; }
.button-xs { padding: 0.4rem 0.9rem; }

/* ---------- Navigation ---------- */
.site-header .navbar { background: transparent; }

.navbar-bkg {
  background: color-mix(in srgb, var(--color-cream) 52%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  border-bottom: 1px solid var(--ink-12);
}
nav.reveal.visible { -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%); }

.nav-flex {
  gap: 0.35rem;
}

.nav-flex a:not(.button) {
    font-weight: 500;
    letter-spacing: -0.01em;
  }

.nav-flex a:not(.button):not(.no-hover):hover {
      background: transparent;
      color: var(--accent);
    }

/* ---------- Mobile menu overlay ---------- */
/* Gaussian-blurred, cream-tinted overlay consistent with the site frame. */
.nav-container {
  background: color-mix(in srgb, var(--color-cream) 68%, transparent);
  -webkit-backdrop-filter: blur(26px) saturate(140%);
  backdrop-filter: blur(26px) saturate(140%);
}
/* The header bar (.navbar-bkg) has a backdrop-filter, which traps the navbar's
   z-index inside its own stacking context — so the overlay covered the whole bar,
   hiding the logo AND the hamburger/X. Lift the bar above the overlay so both the
   logo and the close button stay visible and tappable. */
.nav-opened .navbar-bkg { position: relative; z-index: 300; }
.nav-opened .menu-toggle { position: relative; z-index: 301; }
/* Logo + close icon keep the site ink colour when open (were recoloured green). */
.nav-opened .logo-path { fill: var(--color-charcoal); }
.nav-opened .menu-toggle .bar { background: var(--color-charcoal); }
/* Menu links match the site type + colour — larger and airier on mobile. */
.nav a.menu-item {
  color: var(--color-charcoal); font-family: var(--base-font);
  font-size: clamp(2.6rem, 12vw, 4rem); line-height: 1.1; letter-spacing: -0.023em;
}
.nav a.menu-item:hover { color: var(--accent); }
/* "Work with us" CTA sits at the bottom of the menu items, aligned to them. */
.nav-container { display: flex; flex-direction: column; }
/* The base .nav ul is height:0 (legacy collapse); give it real height when open so
   the CTA flows below the items instead of overlapping them. Drop its translucent
   background so its bottom edge doesn't draw a line over the overlay blur. */
.nav-container .nav { height: auto; background: transparent; padding-top: clamp(6rem, 15vh, 9rem); }
.nav-container .nav-cta { align-self: flex-start; margin: 2.5rem 0 0 1.5rem; font-size: clamp(1.1rem, 4.5vw, 1.45rem); padding: 1rem 2.2rem; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--color-charcoal);
  color: var(--paper-55);
  border-top: 1px solid var(--paper-14);
}
.site-footer h3 { color: var(--paper-55) !important; letter-spacing: 0.14em; }
.site-footer ul li a {
    color: var(--paper-70);
  }
.site-footer ul li a:hover { background: transparent; color: var(--accent); }
.site-footer p { color: var(--paper-55); }
.site-footer .legal {
    border-top: 1px solid var(--paper-14);
  }
.site-footer .legal .legal-links a { color: var(--paper-55); }
.site-footer .legal .legal-links a:hover { color: var(--accent); }

/* ---------- Call to action band ---------- */
.cta {
  background: var(--color-charcoal);
  color: var(--color-cream);
}
.cta .cta-container h4 {
  color: var(--color-cream);
  letter-spacing: -0.023em;
}
.cta .cta-container p { color: var(--paper-70); }
.cta .button-primary {
  background: var(--color-cream);
  border-color: var(--color-cream);
  color: var(--color-charcoal);
}
.cta .button-primary:hover { background: var(--accent); border-color: var(--accent); color: var(--color-cream); }

/* ---------- Cards & project grid ---------- */
.card { border-radius: 10px; box-shadow: 0 12px 34px rgba(27, 24, 17, 0.06); }

.project { border-radius: 8px; }
.project-details h4 { letter-spacing: -0.015em; }

/* ---------- Section rhythm helpers (used by upgraded templates) ---------- */
.section-line { border-top: 1px solid var(--ink-12); }
.eyebrow {
  display: inline-block;
  font-size: clamp(0.7rem, 0.9vw, 0.82rem);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-60);
}

/* ---------- Full-bleed layout ---------- */
/* Full viewport width with responsive edge gutters */
.bleed {
  width: 100%;
  box-sizing: border-box;
  padding-left: clamp(1.25rem, 5vw, 4rem);
  padding-right: clamp(1.25rem, 5vw, 4rem);
}
/* Edge-to-edge, no gutters (images, colour bands) */
.bleed-full { width: 100%; box-sizing: border-box; }

/* Widen the project gallery to full bleed on home + /projects */
.projects {
  max-width: none;
  width: 100%;
  padding: clamp(1.25rem, 5vw, 4rem);
  gap: clamp(1rem, 1.6vw, 1.75rem);
}

/* ---------- Home hero — mirrors the selected-work specimen hero ---------- */
.home-hero-v2 {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: 8.5rem;
  padding-bottom: 2.25rem;
}
.home-hero-v2__top { display: flex; justify-content: space-between; gap: 2rem 3rem; flex-wrap: wrap; }
.home-hero-v2__top p {
  max-width: 38ch; margin: 0;
  font-size: clamp(0.95rem, 1.2vw, 1.2rem);
  color: var(--ink-60); font-weight: 500; line-height: 1.35;
}
.home-hero-v2 h1 {
  font-size: clamp(2.7rem, 10.5vw, 11.5rem);
  font-weight: 500; line-height: 0.9; letter-spacing: -0.032em;
  margin: clamp(2rem, 5vw, 3.5rem) 0;
}
.home-hero-v2 h1 em { font-style: normal; font-weight: 400; color: var(--accent); }
.home-hero-v2__bottom {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 1.5rem 2rem; flex-wrap: wrap;
  padding-top: 1.3rem;
}
.home-hero-v2__cta { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.home-hero-v2__link {
  font-weight: 500;
  border-bottom: 1px solid var(--color-charcoal);
  padding-bottom: 2px;
  transition: color 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.home-hero-v2__link:hover { color: var(--accent); border-color: var(--accent); }
.home-hero-v2__tags {
  font-size: clamp(0.78rem, 1vw, 0.95rem);
  letter-spacing: 0.05em; color: var(--ink-60); font-weight: 500; text-transform: uppercase;
}

/* Clip-reveal on load for the hero headline */
/* padding-bottom gives descenders (g, y, p) room inside the overflow:hidden clip;
   the negative margin cancels it so vertical spacing is unchanged. */
.reveal-line { display: block; overflow: hidden; padding-bottom: 0.16em; margin-bottom: -0.16em; }
.reveal-line > span { display: block; transform: translateY(110%); animation: heroRise 1.05s var(--ease-out) forwards; }
.home-hero-v2 h1 .reveal-line:nth-child(1) > span { animation-delay: 0.12s; }
.home-hero-v2 h1 .reveal-line:nth-child(2) > span { animation-delay: 0.22s; }
.home-hero-v2 h1 .reveal-line:nth-child(3) > span { animation-delay: 0.32s; }
@keyframes heroRise { to { transform: none; } }

/* Homepage hero — per-word rise; words wrap naturally so there's no forced-line stranding. */
.hero-words .hw { display: inline-block; opacity: 0; transform: translateY(0.5em); animation: hwRise 0.85s var(--ease-out) both; animation-play-state: paused; }
/* Start the hero rise only after the preloader clears, so it isn't spent behind it. */
.is-loaded .hero-words .hw { animation-play-state: running; }
.hero-words .hw--accent { color: var(--accent); }
.hero-words .hw:nth-child(1) { animation-delay: 0.05s; }
.hero-words .hw:nth-child(2) { animation-delay: 0.11s; }
.hero-words .hw:nth-child(3) { animation-delay: 0.17s; }
.hero-words .hw:nth-child(4) { animation-delay: 0.23s; }
.hero-words .hw:nth-child(5) { animation-delay: 0.29s; }
.hero-words .hw:nth-child(6) { animation-delay: 0.35s; }
.hero-words .hw:nth-child(7) { animation-delay: 0.41s; }
@keyframes hwRise { from { opacity: 0; transform: translateY(0.5em); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hero-words .hw { animation: none; opacity: 1; transform: none; } }

/* Entrance animation — runs on load, no scroll dependency so content
   can never get stuck hidden. */
.reveal-up { animation: revealUp 0.8s var(--ease-out) both; }
.reveal-up:nth-child(2) { animation-delay: 0.05s; }
.reveal-up:nth-child(3) { animation-delay: 0.1s; }
.reveal-up:nth-child(4) { animation-delay: 0.15s; }
@keyframes revealUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .reveal-line > span { animation: none; transform: none; }
  .reveal-up { animation: none; }
}

/* The site auto-tags every "main section h1/h2/h3" with .fade-up (opacity:0) and reveals
   them via a scroll observer that is unreliable for below-fold headings (they can stay
   invisible). Keep all section headings visible; our editorial pages handle their own
   entrance animations via .reveal-up / .reveal-line. */
.fade-up { opacity: 1 !important; transform: none !important; }

/* Full-bleed section header (eyebrow + link across the row) */
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: clamp(3rem, 7vw, 6rem);
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--ink-12);
}
.section-head .eyebrow { color: var(--ink-60); }
.section-head h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.8rem);
  font-weight: 500;
  letter-spacing: -0.023em;
  margin: 0;
}
.section-head a {
  font-weight: 500;
  border-bottom: 1px solid var(--color-charcoal);
  padding-bottom: 2px;
}
.section-head a:hover { color: var(--accent); border-color: var(--accent); }

/* ======================================================================
   Home — editorial narrative sections
   ====================================================================== */

/* 2 — Statement / manifesto */
.home-statement {
  padding-top: clamp(5rem, 12vw, 10rem);
  padding-bottom: clamp(3rem, 7vw, 6rem);
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(1.5rem, 6vw, 6rem);
  align-items: start;
}
.home-statement h2 {
  font-size: clamp(1.7rem, 3.7vw, 3.35rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.021em;
  margin: 0;
}
.home-statement h2 { color: var(--color-charcoal); }        /* first sentence — dark */
.home-statement .stmt-muted { color: var(--ink-30); }        /* continuation — muted */
/* "your Slack" — highlighted, with a superscript marker + hover/focus tooltip. */
/* Tools rotator — an auto-cycling vertical carousel of the apps we work inside
   (Slack, Linear, Figma, GitHub). Hover/focus reveals the integration note; the
   viewport width animates to the current word so there's no trailing gap.
   Time-based; the JS bails on reduced motion. */
.home-statement .tool-rotator {
  position: relative; display: inline-block;
  vertical-align: bottom; color: var(--accent); cursor: help;
}
.home-statement .tool-rotator__viewport {
  display: block; overflow: hidden;
  height: 1.1em; line-height: 1.1em;
  transition: width 0.55s cubic-bezier(0.65, 0, 0.2, 1);
}
.home-statement .tool-rotator__track { display: block; will-change: transform; }
.home-statement .tool-rotator__item {
  display: block; height: 1.1em; line-height: 1.1em; white-space: nowrap;
}
/* Integration note on hover/focus (kept out of the clipped viewport). */
.home-statement .tool-rotator::after {
  content: attr(data-tip);
  position: absolute; left: 0; bottom: calc(100% + 0.6rem);
  width: -moz-max-content;
  width: max-content; max-width: min(24rem, 74vw);
  background: var(--color-charcoal); color: var(--color-cream);
  font-size: 0.95rem; font-weight: 400; line-height: 1.45; letter-spacing: -0.01em;
  padding: 0.8rem 1rem; border-radius: 12px; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
  opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out);
  z-index: 20;
}
.home-statement .tool-rotator:hover::after,
.home-statement .tool-rotator:focus-visible::after { opacity: 1; transform: none; }
/* Reduced motion (and no-JS): show the first tool, statically. */
@media (prefers-reduced-motion: reduce) {
  .home-statement .tool-rotator__viewport { height: 1.1em; }
}
.home-statement__note {
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  color: var(--ink-60);
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
  line-height: 1.5;
  max-width: 52ch;
}
@media (max-width: 820px) { .home-statement { grid-template-columns: 1fr; } }

/* 3 — Capabilities as a giant interactive type list */
.home-caps { padding-bottom: clamp(3rem, 8vw, 7rem); }
.home-cap-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  border-top: 1px solid var(--ink-12);
  padding: clamp(1rem, 2.4vw, 1.9rem) 0;
  transition: padding 0.5s var(--ease-out), color 0.4s var(--ease-out);
}
.home-cap-row:last-child { border-bottom: 1px solid var(--ink-12); }
.home-cap-row .cap-name {
  font-size: clamp(1.7rem, 5.5vw, 4.5rem);
  font-weight: 500;
  letter-spacing: -0.028em;
  line-height: 1;
  transition: transform 0.5s var(--ease-out);
}
.home-cap-row .cap-name::after { content: " ↗︎"; font-size: 0.38em; vertical-align: middle; opacity: 0; transition: opacity 0.3s var(--ease-out); }
.home-cap-row:hover .cap-name::after { opacity: 1; }
.home-cap-row .cap-meta { font-size: clamp(0.8rem, 1vw, 1rem); color: var(--ink-60); text-align: right; max-width: 32ch; }
.home-cap-row:hover { color: var(--accent); padding-left: 1rem; }
.home-cap-row:hover .cap-name { transform: translateX(0.5rem); }
@media (max-width: 640px) { .home-cap-row .cap-meta { display: none; } }

/* 3b — Capabilities scroll reel: "Intelligent ___" cycles through the work as you scroll.
   A tall section whose inner stage pins to the viewport; a small scroll-linked JS handler
   (in index.njk) translates the word column. Decorative — the cap-row list below carries
   the real, accessible content. */
/* Height = one viewport (the pinned frame) + one scroll "step" per word after the first,
   so the stage stays pinned until every word has cycled through. --reel-steps is set
   inline from the word count; the per-step svh controls how long each word lingers. */
.caps-reel { position: relative; height: calc(100svh + var(--reel-steps, 6) * 16svh); margin: clamp(0.5rem, 2vw, 1.5rem) 0 clamp(2rem, 6vw, 5rem); }
@media (min-width: 1024px) { .caps-reel { height: calc(100svh + var(--reel-steps, 6) * 20svh); } }
/* position: sticky can't pin while an ancestor is a scroll container, and the global
   `main { overflow: hidden }` (base.css) is one. On the about page, clip horizontally
   only so the reel's stage can pin to the viewport. */
body.about-layout main { overflow-x: clip; overflow-y: visible; }
.caps-reel__stage { position: sticky; top: 50px; height: calc(100svh - 100px); display: flex; align-items: center; overflow: clip; isolation: isolate; }
/* Blurred bright-nature backdrop behind the pinned reel. Falls back to a brand gradient
   until https://assets.loopdash.com/img/raw/about-reel-bg.jpg exists, so the section never looks broken. */
.caps-reel__stage::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background: url('https://assets.loopdash.com/img/raw/about-reel-bg.jpg') center / cover no-repeat,
              linear-gradient(180deg, #3a86e6 0%, #a9c6ef 46%, #eef0f3 100%);
  filter: blur(3px) saturate(1.05);
  transform: scale(1.06); /* hides the soft blurred edges */
}
/* Soft dark gradient concentrated in the centre band (where the words scroll) so the white
   text stays legible over the bright sky while the image keeps its brightness top and bottom. */
.caps-reel__stage::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.32) 34%, rgba(0, 0, 0, 0.32) 66%, transparent 100%);
}
.caps-reel__line { position: relative; z-index: 1; }
/* Two-column grid pins the boundary between "Intelligent" and the word to the horizontal
   centre of the section, so the pair reads as centred and "Intelligent" never jitters as
   word widths change. The slot shows several word-heights with a soft top/bottom fade, so
   upcoming words are visible as they scroll in. */
.caps-reel__line {
  display: grid; grid-template-columns: 1fr 1fr; -moz-column-gap: 0.3em; column-gap: 0.3em; align-items: center;
  width: 100%;
  font-size: clamp(1.5rem, 4.5vw, 2.5rem);
  font-weight: 500; letter-spacing: -0.023em; line-height: 1;
}
.caps-reel__fixed { justify-self: end; text-align: right; color: #fff; }
.caps-reel__slot {
  justify-self: start;
  position: relative; display: block; height: calc(7 * 1.3em); overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 24%, #000 76%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 24%, #000 76%, transparent 100%);
}
.caps-reel__track { display: flex; flex-direction: column; will-change: transform; }
.caps-reel__word { height: 1.3em; line-height: 1.3; color: rgba(255, 255, 255, 0.42); white-space: nowrap; transition: color 0.3s ease; }
/* Active word (centred, aligned with "Intelligent") is solid white; the rest stay lighter. */
.caps-reel__word.is-active { color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .caps-reel { height: auto; margin: clamp(1rem, 3vw, 2rem) 0; }
  .caps-reel__stage { position: static; height: auto; }
  .caps-reel__slot { height: 1.3em; -webkit-mask-image: none; mask-image: none; }
  .caps-reel__track { transform: none !important; }
  .caps-reel__word:not(:first-child) { display: none; }
}

/* 4 — Featured work: full-bleed image rows with the text overlaid on top */
.feature-row {
  display: block;
  position: relative;
  width: 100%;
  min-height: min(80vh, 760px);
  overflow: hidden;
}
.feature-row__media { position: absolute; inset: 0; overflow: hidden; background: var(--color-cream-dark); }
.feature-row__media img { position: absolute; inset: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; }
/* Art direction: swap the wide banner for a mobile-friendly crop where provided */
.feature-row__media.has-mobile-art .fr-art--mobile { display: none; }
@media (max-width: 860px) {
  .feature-row__media.has-mobile-art .fr-art--desktop { display: none; }
  .feature-row__media.has-mobile-art .fr-art--mobile { display: block; }
}
/* Featured images that are a subject on a solid brand field (Courier's "Cover-Up"
   cutout, GAIN's dithered globe): sit them on that field color and contain them,
   static and centered, so the subject shows fully at a comfortable size instead of
   a zoomed-in cover crop. Parallax is skipped for these rows in JS. */
.feature-row--courier .feature-row__media img,
.feature-row--gain .feature-row__media img {
  -o-object-fit: contain;
     object-fit: contain; inset: 0; top: 0; height: 100%;
}
.feature-row--courier .feature-row__media { background: #cabe1a; }
.feature-row--gain .feature-row__media { background: #2b0da3; }
/* Cap Courier's "Cover-Up" cutout so the wide wordmark doesn't span the row on
   desktop; centered on the yellow field. */
.feature-row--courier .feature-row__media img { max-width: 700px; margin: auto; }
/* GAIN's globe fills its frame edge-to-edge — scale it down with room to breathe
   around it on the blue field. */
.feature-row--gain .feature-row__media img { width: 62%; height: 62%; margin: auto; }
/* Scrim so the overlaid text stays legible over any image */
.feature-row__media::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(to top, rgba(18,16,13,0.6) 0%, rgba(18,16,13,0.22) 38%, rgba(18,16,13,0) 68%);
}
.feature-row__body {
  position: relative; z-index: 3;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: min(80vh, 760px);
  padding: clamp(2rem, 5vw, 5rem);
  color: var(--color-cream);
}
.feature-row__num { font-size: 0.78rem; color: rgba(255,255,255,0.72); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; }
.feature-row__name { font-size: clamp(2.4rem, 6vw, 4.75rem); font-weight: 500; letter-spacing: -0.028em; line-height: 0.98; margin: 0.7rem 0 0.9rem; color: rgba(255, 255, 255, 0.8); transition: color 0.3s var(--ease-out); }
.feature-row:hover .feature-row__name,
.feature-row:focus-visible .feature-row__name { color: #fff; }
.feature-row__tagline { font-size: clamp(1.1rem, 1.6vw, 1.5rem); color: rgba(255,255,255,0.85); font-weight: 500; max-width: 42ch; margin: 0; line-height: 1.25; }
.feature-row__meta { display: flex; gap: 2.5rem; flex-wrap: wrap; margin-bottom: 2rem; }
.feature-row__meta .k { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(255,255,255,0.72); margin-bottom: 0.35rem; }
.feature-row__meta .v { font-weight: 500; }
@media (max-width: 860px) {
  .feature-row,
  .feature-row__body { min-height: 66vh; }
  .feature-row__body { padding: 2.5rem clamp(1.25rem, 6vw, 2.75rem); }
}

/* 5 — Proof band (dark) */
.home-proof { background: var(--color-charcoal); color: var(--color-cream); padding: clamp(4rem, 9vw, 7.5rem) 0; }
.proof-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2.5rem, 4vw, 3.5rem) 2.5rem; border-bottom: 1px solid var(--paper-14); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.proof-stats .stat .n { font-size: clamp(2.8rem, 7vw, 6rem); font-weight: 500; letter-spacing: -0.03em; line-height: 0.9; }
.proof-stats .stat--wide .n { font-size: clamp(2.2rem, 4.5vw, 3.6rem); letter-spacing: -0.023em; }
.proof-stats .stat .l { color: var(--paper-55); margin-top: 0.9rem; max-width: 24ch; }
@media (max-width: 760px) { .proof-stats { grid-template-columns: 1fr; gap: 2.5rem; } }
.proof-press { margin-top: clamp(2rem, 4vw, 3rem); }
.proof-press .eyebrow { color: var(--paper-55); margin-bottom: 1.25rem; }
.press-marquee { overflow: hidden; white-space: nowrap; }
.press-marquee .track { display: inline-flex; gap: 3rem; animation: home-scrollx 36s linear infinite; }
.press-marquee .track span { font-size: clamp(1rem, 1.6vw, 1.5rem); font-weight: 500; color: var(--paper-70); }
.press-marquee .track span::after { content: "✳︎"; margin-left: 3rem; color: var(--accent); }
@keyframes home-scrollx { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .press-marquee .track { animation: none; } }

/* ======================================================================
   Work index (Projects) — editorial hero + numbered index
   ====================================================================== */
/* Reuse .home-hero-v2 for the hero; these are the extras */
.scroll-cue { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-60); }
.scroll-cue .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: cuePulse 1.8s infinite; }
@keyframes cuePulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.7); opacity: 0.4; } }

.work-index { padding-bottom: clamp(3rem, 8vw, 7rem); }
.work-index__head { display: flex; justify-content: space-between; border-bottom: 1px solid var(--color-charcoal); padding-bottom: 0.8rem; margin-bottom: 0.4rem; }
.work-row {
  display: grid; grid-template-columns: 4rem 1fr auto; align-items: center; gap: 1rem;
  padding: clamp(0.9rem, 1.8vw, 1.5rem) 0; border-bottom: 1px solid var(--ink-12);
  position: relative; transition: padding 0.5s var(--ease-out);
}
.work-row .num { font-size: 0.85rem; color: var(--ink-60); font-variant-numeric: tabular-nums; }
.work-row .name { font-size: clamp(1.5rem, 4.2vw, 3.25rem); font-weight: 500; letter-spacing: -0.023em; transition: transform 0.5s var(--ease-out), color 0.4s var(--ease-out); }
.work-row .meta { font-size: clamp(0.75rem, 1vw, 0.95rem); color: var(--ink-60); text-align: right; }
.work-row:hover { padding-left: 1.2rem; }
.work-row:hover .name { color: var(--accent); transform: translateX(0.4rem); }
.work-row .thumb {
  position: absolute; right: 13rem; top: 50%; width: 16rem; height: 10rem; transform: translateY(-50%) scale(0.85);
  -o-object-fit: cover;
     object-fit: cover; border-radius: 4px; opacity: 0; pointer-events: none; z-index: 5;
  transition: opacity 0.4s var(--ease-out), transform 0.5s var(--ease-out); box-shadow: 0 30px 60px rgba(27, 24, 17, 0.25);
}
.work-row:hover .thumb { opacity: 1; transform: translateY(-50%) scale(1); }
@media (max-width: 960px) { .work-row .thumb { display: none; } }
@media (max-width: 560px) { .work-row { grid-template-columns: 2.4rem 1fr; } .work-row .meta { display: none; } }

/* ======================================================================
   Listing-page hero (Blog)
   ====================================================================== */
.page-hero { padding-top: 9.5rem; padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.page-hero .eyebrow { margin-bottom: 1.25rem; }
.page-hero h1 {
  font-size: clamp(3rem, 12vw, 9.5rem);
  font-weight: 500; line-height: 0.88; letter-spacing: -0.032em;
  margin: 0;
}
.page-hero--compact { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.page-hero--legal {
  padding-top: 8rem;
  padding-bottom: clamp(1.25rem, 2.5vw, 2rem);
}
.page-hero--legal h1 {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  max-width: none;
}
.page-hero--legal .page-hero__meta {
  font-size: 0.8125rem;
  color: var(--ink-60);
  font-weight: 400;
  line-height: 1.4;
  margin: 0.75rem 0 0;
  max-width: none;
}
.page-hero p {
  font-size: clamp(1.1rem, 1.6vw, 1.55rem);
  color: var(--ink-60); font-weight: 500; line-height: 1.3;
  margin: 1.5rem 0 0; max-width: 42ch;
}

/* ======================================================================
   Contact / Work-with-us hub
   ====================================================================== */
.contact-hub { padding-top: 9rem; padding-bottom: clamp(4rem, 10vw, 8rem); }
.contact-hub__head { max-width: 62rem; margin-bottom: clamp(3rem, 6vw, 5rem); }
.contact-hub__head .headline {
  font-size: clamp(2.6rem, 6.5vw, 6rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin: 0;
}
.contact-hub__head .eyebrow { margin-bottom: 1.5rem; }
.contact-hub__grid {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
@media (max-width: 900px) { .contact-hub__grid { grid-template-columns: 1fr; gap: 3.5rem; } }

/* Form */
.contact-form { display: flex; flex-direction: column; gap: clamp(1.75rem, 3vw, 2.5rem); }
.contact-field { display: flex; flex-direction: column; gap: 0.9rem; }
.contact-field > label {
  font-size: clamp(1.15rem, 1.7vw, 1.6rem);
  font-weight: 500; letter-spacing: -0.015em; color: var(--color-charcoal);
}
.contact-form .form-input {
  width: 100%; box-sizing: border-box;
  height: 3.4rem; padding: 0 1.1rem;
  color: var(--color-charcoal);
  background-color: rgba(255, 255, 255, 0.4);
  border: 0.125rem solid var(--color-border);
  border-radius: 12px;
  font-family: var(--base-font); font-size: clamp(0.95rem, 1.2vw, 1.05rem); font-weight: 400;
  -moz-appearance: none;
       appearance: none; -webkit-appearance: none;
  transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), background-color 0.2s var(--ease-out);
}
.contact-form textarea.form-input { height: auto; min-height: 170px; padding: 1rem 1.1rem; line-height: 1.5; resize: vertical; }
.contact-form .form-input::-moz-placeholder { color: rgba(18, 18, 18, 0.35); }
.contact-form .form-input::placeholder { color: rgba(18, 18, 18, 0.35); }
.contact-form .form-input:focus { outline: 0; border-color: var(--color-focus); box-shadow: 0 0 0 4px var(--color-focus-glow); }
.contact-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.25rem, 2.5vw, 2rem); margin-bottom: 1.25rem; }
@media (max-width: 560px) { .contact-field-row { grid-template-columns: 1fr; } }
.contact-form button { align-self: flex-start; margin-top: 0.5rem; }

/* Options */
.contact-options { display: flex; flex-direction: column; }
.contact-options .eyebrow { margin-bottom: 0.5rem; }
.contact-option {
  display: block;
  padding: clamp(1.3rem, 2.2vw, 1.7rem) 0;
  border-top: 1px solid var(--ink-12);
  transition: padding-left 0.4s var(--ease-out);
}
.contact-option:last-child { border-bottom: 1px solid var(--ink-12); }
.contact-option:hover { padding-left: 0.75rem; }
.contact-option h3 {
  font-size: clamp(1.25rem, 1.9vw, 1.6rem);
  font-weight: 500; letter-spacing: -0.015em; margin: 0 0 0.5rem;
  transition: color 0.3s var(--ease-out);
}
.contact-option:hover h3 { color: var(--accent); }
.contact-option p { color: var(--ink-60); margin: 0 0 0.7rem; font-size: 0.98rem; line-height: 1.4; max-width: 36ch; }
.contact-option__link { font-weight: 500; font-size: 0.92rem; border-bottom: 1px solid var(--color-charcoal); padding-bottom: 2px; }
.contact-option:hover .contact-option__link { color: var(--accent); border-color: var(--accent); }

/* 6 — Testimonial cycler */
.home-quote { padding-top: clamp(5rem, 12vw, 9rem); padding-bottom: clamp(5rem, 12vw, 9rem); }
.home-quote > .eyebrow { margin-bottom: clamp(2rem, 4vw, 3rem); }
/* Grid stacking: all slides share one cell, so the container is sized to the
   TALLEST testimonial and never reflows between slides. */
.quote-cycle { display: grid; }
.quote-slide {
  grid-area: 1 / 1;
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  pointer-events: none; margin: 0;
}
.quote-slide.is-active { opacity: 1; transform: none; pointer-events: auto; }
.home-quote .q {
  display: block; margin: 0;
  font-size: clamp(1.5rem, 3.4vw, 3rem);
  font-weight: 500; letter-spacing: -0.021em; line-height: 1.1;
  max-width: 26ch;
}
.home-quote .q em { color: var(--accent); font-style: normal; font-weight: 400; }
.home-quote .cite { margin-top: 2rem; display: block; color: var(--ink-60); font-size: clamp(0.95rem, 1.2vw, 1.1rem); }
.home-quote .cite strong { color: var(--color-charcoal); font-weight: 500; }
.quote-dots { display: flex; gap: 0.55rem; margin-top: clamp(2rem, 4vw, 3rem); }
.quote-dot { width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; background: var(--ink-30); cursor: pointer; transition: background 0.3s var(--ease-out), transform 0.3s var(--ease-out); }
.quote-dot.is-active { background: var(--accent); transform: scale(1.35); }

/* ======================================================================
   Case study (single project) — full-width editorial
   ====================================================================== */
/* clip the .reveal zoom (scale 1.1) so full-bleed images don't create horizontal scroll */
.single-project-layout main { overflow-x: clip; }

.cs-hero { padding-top: 9.5rem; padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.cs-hero .eyebrow { margin-bottom: 1.25rem; }
.cs-hero__title { font-size: clamp(3rem, 11vw, 9rem); font-weight: 500; line-height: 0.9; letter-spacing: -0.032em; margin: 0; color: var(--color-charcoal); }
.cs-hero__tagline { font-size: clamp(1.3rem, 2.6vw, 2.3rem); color: var(--ink-60); font-weight: 500; margin: 1.5rem 0 0; max-width: 26ch; letter-spacing: -0.015em; line-height: 1.15; }
.cs-hero__figure { margin: clamp(2rem, 5vw, 4rem) 0 0; overflow: hidden; background: var(--color-cream-dark); }
.cs-hero__figure img { width: 100%; height: auto; display: block; }
/* Courier's hero is the transparent "Cover-Up" cutout — sit it on the brand yellow
   field at Navigator's ~1.43:1 ratio, capped so the wide wordmark stays contained. */
.cs-hero__figure--courier {
  background: #cabe1a;
  aspect-ratio: 1917 / 1336;
  display: flex; align-items: center; justify-content: center;
}
.cs-hero__figure--courier img { width: 100%; max-width: 800px; height: auto; }

.cs-intro { display: grid; grid-template-columns: 1.7fr 1fr; gap: clamp(2rem, 6vw, 6rem); padding-top: clamp(4rem, 9vw, 7.5rem); padding-bottom: clamp(4rem, 9vw, 7.5rem); align-items: start; }
.cs-intro .eyebrow { margin-bottom: 1.25rem; }
.cs-intro__desc { font-size: clamp(1.35rem, 2.5vw, 2.35rem); font-weight: 400; line-height: 1.2; letter-spacing: -0.015em; margin: 0; color: var(--color-charcoal); }
.cs-meta { display: flex; flex-direction: column; gap: 1.4rem; }
.cs-meta__item { display: flex; flex-direction: column; gap: 0.45rem; border-top: 1px solid var(--ink-12); padding-top: 1rem; }
.cs-meta__k { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-60); }
.cs-meta__v { font-weight: 500; line-height: 1.55; }
.cs-meta__v a { border-bottom: 1px solid var(--ink-30); padding-bottom: 1px; }
.cs-meta__v a:hover { color: var(--accent); border-color: var(--accent); }
@media (max-width: 820px) { .cs-intro { grid-template-columns: 1fr; gap: 2.5rem; } }

.cs-section { padding: clamp(2rem, 5vw, 4rem) 0; }
.cs-section__head { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(1.5rem, 4vw, 4rem); margin-bottom: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.cs-section__head h2, .cs-section__head h3 { font-size: clamp(1.8rem, 4vw, 3.4rem); font-weight: 500; letter-spacing: -0.023em; line-height: 1; margin: 0; }
.cs-section__head p { font-size: clamp(1.05rem, 1.5vw, 1.35rem); color: var(--ink-60); font-weight: 400; line-height: 1.4; margin: 0; }
@media (max-width: 820px) { .cs-section__head { grid-template-columns: 1fr; gap: 1rem; } }

.cs-fullwidth { margin: clamp(1.5rem, 4vw, 3rem) 0; }
.cs-fullwidth img { width: 100%; height: auto; display: block; }

.cs-images { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1rem, 2vw, 1.75rem); align-items: start; }
.cs-img { grid-column: span 12; }
.cs-img img { width: 100%; height: auto; display: block; border-radius: 6px; }
.cs-img .card { border-radius: 10px; overflow: hidden; }
/* Stack multi-column image rows full-width on mobile instead of cramming them side-by-side */
@media (max-width: 820px) {
  .cs-images { grid-template-columns: 1fr; gap: clamp(1rem, 4vw, 1.5rem); }
  .cs-img { grid-column: 1 / -1 !important; }
}

/* Slideshow — JS cross-fades slides; slow, soft fade */
.slideshow { border-radius: 6px; margin-bottom: clamp(1.5rem, 4vw, 3rem); }
.slideshow picture { transition: opacity 0.9s ease-in-out; }
.slideshow img { border-radius: 6px; }

.cs-quote { padding-top: clamp(4rem, 10vw, 8rem); padding-bottom: clamp(4rem, 10vw, 8rem); }
.cs-quote .q { font-size: clamp(1.6rem, 3.8vw, 3.2rem); font-weight: 500; letter-spacing: -0.023em; line-height: 1.08; max-width: 24ch; margin: 0; color: var(--color-charcoal); }
.cs-quote .q::before { content: "\201C"; }
.cs-quote .q::after { content: "\201D"; }
.cs-quote .cite { margin-top: 2rem; color: var(--ink-60); }
.cs-quote .cite strong { color: var(--color-charcoal); font-weight: 500; display: block; font-size: 1.1rem; }

/* ======================================================================
   Footer — RGA-style: big statement + giant wordmark
   ====================================================================== */
.site-footer { padding: 0; }
.site-footer .footer-top {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 2rem 3rem; flex-wrap: wrap;
  padding-top: clamp(4rem, 8vw, 7rem); padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.footer-statement { max-width: none; }
.footer-statement p { font-size: clamp(1.5rem, 3.4vw, 2.9rem); font-weight: 500; letter-spacing: -0.023em; line-height: 1.08; color: var(--color-cream); margin: 0; white-space: nowrap; }
@media (max-width: 640px) { .footer-statement p { white-space: normal; text-wrap: balance; font-size: clamp(1.5rem, 6.5vw, 2rem); } }
.footer-statement em { color: var(--accent); font-style: normal; font-weight: 400; }
.footer-cta { display: flex; flex-direction: column; gap: 1.1rem; align-items: flex-start; }
.footer-cta__btn { background: var(--color-cream); color: var(--color-charcoal); border: 0; }
.footer-cta__btn:hover { background: var(--accent); color: var(--color-cream); }
.footer-cta__btn svg { fill: var(--color-charcoal); }
.footer-cta__email { color: var(--paper-70); border-bottom: 1px solid var(--paper-14); padding-bottom: 2px; font-weight: 500; }
.footer-cta__email:hover { color: var(--accent); }

.site-footer .footer-cols {
  display: grid; grid-template-columns: repeat(3, minmax(0, 15rem)); gap: 2rem 3rem; justify-content: flex-end;
  padding-top: clamp(2.5rem, 5vw, 3.5rem); padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--paper-14);
}
.footer-col h3 { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--paper-55); margin: 0 0 1rem; padding: 0; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { line-height: 1.95; }
.footer-col a { color: var(--paper-70); border-radius: 0; padding: 0; margin: 0; white-space: normal; }
.footer-col a:hover { color: var(--accent); background: transparent; }
@media (max-width: 760px) { .site-footer .footer-cols { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1rem; } }

.site-footer .legal { padding-top: clamp(1.75rem, 3.5vw, 2.5rem); padding-bottom: clamp(1.5rem, 3vw, 2rem); border-top: 1px solid var(--paper-14); margin-top: 0; }

/* RGA-style link row with diagonal arrows */
.footer-menu {
  display: flex; flex-wrap: wrap; gap: clamp(1rem, 2vw, 1.4rem) clamp(1.75rem, 3vw, 2.75rem);
  padding-top: clamp(2.5rem, 5vw, 3.5rem); padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--paper-14);
}
.footer-menu a {
  color: var(--paper-70); font-weight: 500;
  font-size: clamp(1.05rem, 1.6vw, 1.4rem); letter-spacing: -0.01em;
  display: inline-flex; align-items: baseline; gap: 0.25rem;
}
.footer-menu a .arr { font-size: 0.72em; transition: transform 0.3s var(--ease-out); }
.footer-menu a:hover { color: var(--accent); }
.footer-menu a:hover .arr { transform: translate(2px, -2px); }

/* Full-width auto-rotating 3D LOOPDASH mark — the footer finale */
.footer-3d-bottom {
  width: 100%; box-sizing: border-box;
  height: clamp(96px, 12vw, 150px);
  border-top: 1px solid var(--paper-14);
  display: flex; align-items: center; justify-content: center;
}
.footer-3d {
  width: min(170px, 44vw); height: 100%;
  background-color: transparent;
}

/* ======================================================================
   Services — editorial two-column groups
   ====================================================================== */
.svc-group {
  display: grid; grid-template-columns: 1fr 1.5fr; gap: clamp(2rem, 6vw, 6rem);
  padding-top: clamp(3rem, 7vw, 6rem); padding-bottom: clamp(3rem, 7vw, 6rem);
  border-top: 1px solid var(--ink-12); align-items: start;
}
.svc-group__intro { position: sticky; top: 7rem; }
.svc-group__intro .eyebrow { margin-bottom: 1rem; color: var(--accent); }
.svc-group__intro h2 { font-size: clamp(1.9rem, 3.8vw, 3.2rem); font-weight: 500; letter-spacing: -0.023em; line-height: 1; margin: 0 0 1.1rem; }
.svc-group__intro p { color: var(--ink-60); font-size: clamp(1rem, 1.3vw, 1.2rem); line-height: 1.4; max-width: 34ch; margin: 0; font-weight: 500; }
.svc-group__items { display: flex; flex-direction: column; }
.svc-item { display: block; padding: clamp(1.1rem, 2vw, 1.6rem) 0; border-top: 1px solid var(--ink-12); transition: padding-left 0.4s var(--ease-out); }
.svc-item:first-child { border-top: 0; padding-top: 0; }
.svc-item:hover { padding-left: 0.75rem; }
.svc-item h3 { font-size: clamp(1.3rem, 2.1vw, 1.75rem); font-weight: 500; letter-spacing: -0.015em; margin: 0 0 0.45rem; transition: color 0.3s var(--ease-out); }
.svc-item:hover h3 { color: var(--accent); }
.svc-item h3::after { content: " ↗︎"; font-size: 0.6em; vertical-align: middle; opacity: 0; transition: opacity 0.3s var(--ease-out); }
.svc-item:hover h3::after { opacity: 1; }
.svc-item p { color: var(--ink-60); margin: 0; font-size: 1rem; line-height: 1.45; max-width: 54ch; }
@media (max-width: 860px) {
  .svc-group { grid-template-columns: 1fr; gap: 1.75rem; }
  .svc-group__intro { position: static; }
}

/* ======================================================================
   Blog archive — editorial card grid
   ====================================================================== */
.blog-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(2.5rem, 4vw, 4rem) clamp(1.5rem, 3vw, 2.5rem);
  padding-top: clamp(1rem, 2vw, 2rem); padding-bottom: clamp(4rem, 9vw, 7rem);
}
.blog-card { display: block; }
.blog-card__media { aspect-ratio: 16 / 10; overflow: hidden; border-radius: 10px; background: var(--color-cream-dark); margin-bottom: 1.25rem; }
.blog-card__media picture { display: contents; }
/* aspect-ratio on the image itself gives it a definite height so every card is identical and fully covers */
.blog-card__media img { display: block; width: 100%; aspect-ratio: 16 / 10; max-width: none; -o-object-fit: cover; object-fit: cover; transition: transform 1.2s var(--ease-out), filter 1.4s var(--ease-out); }
.blog-card:hover .blog-card__media img { transform: scale(1.04); filter: blur(11px); }
.blog-card__media--logo { display: flex; align-items: center; justify-content: center; }
.blog-card__media--logo .brand-logo-mark { max-width: 52%; max-height: 52%; width: auto; height: auto; }
/* Brand marks render white on the coloured card, except Action Network (keeps its colours). */
.blog-card__media--logo:not(.blog-card__media--keepcolor) .brand-logo-mark,
.blog-card__media--logo:not(.blog-card__media--keepcolor) .brand-logo-mark * { fill: #fff !important; }
.blog-card__meta { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-60); font-weight: 500; }
.blog-card__title { font-size: clamp(1.4rem, 2.3vw, 2.05rem); font-weight: 500; letter-spacing: -0.019em; line-height: 1.08; margin: 0.65rem 0 0.6rem; transition: color 0.3s var(--ease-out); }
.blog-card:hover .blog-card__title { color: var(--accent); }
.blog-card__excerpt { color: var(--ink-60); font-size: 1rem; line-height: 1.42; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 720px) { .blog-grid { grid-template-columns: 1fr; } }

/* ======================================================================
   Service subpages
   ====================================================================== */
.svc-sub__hero { padding-top: 9.5rem; padding-bottom: clamp(2rem, 4vw, 3rem); }
.svc-sub__hero .eyebrow { margin-bottom: 1.25rem; }
.svc-sub__hero h1 { font-size: clamp(2.6rem, 7vw, 6rem); font-weight: 500; line-height: 0.95; letter-spacing: -0.03em; margin: 0 0 1.5rem; max-width: 18ch; }
.svc-sub__hero p { font-size: clamp(1.15rem, 1.8vw, 1.6rem); color: var(--ink-60); max-width: 46ch; margin: 0 0 2rem; line-height: 1.3; }
.svc-block { padding-top: clamp(3rem, 6vw, 5rem); padding-bottom: clamp(0.5rem, 1vw, 1rem); border-top: 1px solid var(--ink-12); }
.svc-block__head { max-width: 40rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.svc-block__head h2 { font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 500; letter-spacing: -0.023em; line-height: 1; margin: 0 0 1rem; }
.svc-block__head p { font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: var(--ink-60); line-height: 1.4; margin: 0; }
.svc-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.75rem, 3vw, 3rem) clamp(1.5rem, 3vw, 2.5rem); }
.svc-feature h3 { font-size: clamp(1.2rem, 1.8vw, 1.6rem); font-weight: 500; letter-spacing: -0.015em; margin: 0 0 0.5rem; }
.svc-feature p { color: var(--ink-60); margin: 0; line-height: 1.45; font-size: 1rem; }
@media (max-width: 820px) { .svc-feature-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .svc-feature-grid { grid-template-columns: 1fr; } }
/* Related services — editorial top-rule rows (was boxed cards, which clashed
   with the borderless row language used across the rest of the site). */
.svc-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.75rem, 3vw, 3rem) clamp(1.5rem, 3vw, 2.5rem); }
.svc-related-card { display: block; border-top: 1px solid var(--ink-12); padding-top: clamp(1.1rem, 2vw, 1.5rem); }
.svc-related-card h3 { font-size: clamp(1.2rem, 1.8vw, 1.6rem); font-weight: 500; margin: 0 0 0.5rem; letter-spacing: -0.015em; transition: color 0.3s var(--ease-out); }
.svc-related-card h3::after { content: " ↗\FE0E"; display: inline-block; font-size: 0.72em; opacity: 0; transform: translate(-0.25em, 0.15em); transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out); }
.svc-related-card:hover h3 { color: var(--accent); }
.svc-related-card:hover h3::after { opacity: 1; transform: none; }
.svc-related-card p { color: var(--ink-60); margin: 0; font-size: 0.95rem; line-height: 1.45; }
@media (max-width: 820px) { .svc-related-grid { grid-template-columns: 1fr; } }

/* Clean FAQ (two-column rows) */
.faq-clean { border-top: 1px solid var(--ink-12); }
.faq-clean__item { border-bottom: 1px solid var(--ink-12); padding: clamp(1.4rem, 2.5vw, 2rem) 0; display: grid; grid-template-columns: 1fr 1.35fr; gap: clamp(1.5rem, 4vw, 4rem); }
.faq-clean__item h3 { font-size: clamp(1.1rem, 1.7vw, 1.45rem); font-weight: 500; letter-spacing: -0.015em; margin: 0; }
.faq-clean__item p { color: var(--ink-60); margin: 0; line-height: 1.5; }
@media (max-width: 760px) { .faq-clean__item { grid-template-columns: 1fr; gap: 0.75rem; } }

/* ======================================================================
   Blog single post
   ====================================================================== */
.post-hero { padding-top: 9rem; padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.post-hero__crumb { display: flex; gap: 0.5rem; align-items: center; color: var(--ink-60); font-size: 0.78rem; margin-bottom: 1.5rem; text-transform: uppercase; letter-spacing: 0.1em; }
.post-hero__crumb a:hover { color: var(--accent); }
.post-hero h1 { font-size: clamp(2.2rem, 5vw, 4.5rem); font-weight: 500; letter-spacing: -0.026em; line-height: 1; margin: 0 0 1.25rem; max-width: 20ch; }
.post-hero__desc { font-size: clamp(1.1rem, 1.6vw, 1.4rem); color: var(--ink-60); max-width: 52ch; margin: 0 0 2rem; line-height: 1.35; }
.post-hero__author { display: flex; align-items: center; gap: 0.8rem; }
.post-hero__author .avatar { width: 44px; height: 44px; border-radius: 50%; -o-object-fit: cover; object-fit: cover; }
.post-hero__author p { margin: 0; font-size: 0.9rem; }
.post-hero__author .role { color: var(--ink-60); }
.post-figure { margin: clamp(2rem, 4vw, 3.5rem) 0 0; overflow: hidden; background: var(--color-cream-dark); }
.post-figure img, .post-figure .image { width: 100%; height: auto; display: block; max-height: 72vh; -o-object-fit: cover; object-fit: cover; }
.post-figure--logo { display: flex; align-items: center; justify-content: center; min-height: 40vh; }
.post-figure--logo .brand-logo-mark { max-width: 40%; max-height: 50%; }
.post-body { max-width: 46rem; margin: 0 auto; padding-top: clamp(2.5rem, 5vw, 4rem); }
.post-body .prose-content { font-size: clamp(1.05rem, 1.3vw, 1.2rem); line-height: 1.65; }
.post-share { max-width: 46rem; margin: 0 auto clamp(1rem, 2vw, 1.5rem); }

/* ======================================================================
   Careers
   ====================================================================== */
.careers-roles-v2 { padding-top: clamp(1rem, 3vw, 2.5rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
.career-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem; padding: clamp(1.4rem, 2.5vw, 2.1rem) 0; border-top: 1px solid var(--ink-12); transition: padding-left 0.4s var(--ease-out); }
.career-row:last-child { border-bottom: 1px solid var(--ink-12); }
.career-row:hover { padding-left: 0.75rem; }
.career-row__title { font-size: clamp(1.5rem, 3vw, 2.4rem); font-weight: 500; letter-spacing: -0.023em; margin: 0; transition: color 0.3s var(--ease-out); }
.career-row:hover .career-row__title { color: var(--accent); }
.career-row__meta { color: var(--ink-60); font-size: 0.95rem; margin-top: 0.45rem; }
.career-row__arrow { font-size: 1.6rem; color: var(--ink-60); transition: transform 0.3s var(--ease-out), color 0.3s var(--ease-out); }
.career-row:hover .career-row__arrow { color: var(--accent); transform: translate(3px, -3px); }

/* ======================================================================
   FAQ — RGA-style accordion (two-column groups)
   ====================================================================== */
.faq-group { display: grid; grid-template-columns: 1fr 2.6fr; gap: clamp(1.5rem, 4vw, 4rem); padding-top: clamp(2.5rem, 5vw, 4rem); padding-bottom: clamp(0.5rem, 1vw, 1rem); border-top: 1px solid var(--ink-12); align-items: start; }
.faq-group__label { position: sticky; top: 7rem; color: var(--accent); }
@media (max-width: 820px) { .faq-group { grid-template-columns: 1fr; gap: 1rem; } .faq-group__label { position: static; } }

.faq-accordion .card-question { background: transparent; box-shadow: none; border: 0; border-top: 1px solid var(--ink-12); border-radius: 0; margin: 0; }
.faq-accordion .card-question:first-child { border-top: 0; }
.faq-accordion .card-header { position: relative; padding: clamp(1.2rem, 2.2vw, 1.7rem) 2.5rem clamp(1.2rem, 2.2vw, 1.7rem) 0; cursor: pointer; }
.faq-accordion .card-header h3 { font-size: clamp(1.1rem, 1.9vw, 1.5rem); font-weight: 500; letter-spacing: -0.015em; margin: 0; transition: color 0.3s var(--ease-out); }
.faq-accordion .card-question:hover .card-header h3 { color: var(--accent); }
.faq-accordion .card-header::after {
  content: ""; position: absolute; right: 2px; top: clamp(1.55rem, 2.6vw, 2.1rem);
  width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform 0.35s var(--ease-out); color: var(--ink-60);
}
.faq-accordion .card-question.opened .card-header::after { transform: rotate(-135deg); }
.faq-accordion .card-question:hover .card-header::after { color: var(--accent); }
/* Align the answer with the question — the base rule indents it 1.25rem, but the
   header sits at the left edge, so drop the horizontal padding. */
.faq-accordion .card-body { color: var(--ink-60); font-size: clamp(1rem, 1.3vw, 1.12rem); line-height: 1.6; max-width: 64ch; padding: 0 0 clamp(1rem, 2vw, 1.5rem); }
.faq-accordion .card-body p { margin: 0 0 1rem; }
.faq-accordion .card-body a { color: var(--color-charcoal); border-bottom: 1px solid var(--ink-30); }
.faq-accordion .card-body a:hover { color: var(--accent); border-color: var(--accent); }
/* The base FAQ card uses a plus-circle icon on h3::after — hide it; we use the caret. */
.faq-accordion .card-header h3::after { display: none; }
.faq-accordion .card-question.opened { background: transparent; box-shadow: none; }

/* ======================================================================
   About — editorial shift (stats / purpose / people / links)
   ====================================================================== */
.about-hero-headline { font-size: clamp(2.4rem, 5.5vw, 5.25rem); font-weight: 500; line-height: 0.98; letter-spacing: -0.03em; max-width: 20ch; margin: 0; }
/* Full-bleed hero banner at the very top of the About pages (sits under the fixed nav). */
.about-hero-media { margin: 0 0 clamp(1.5rem, 3vw, 2.5rem); }
.about-hero-media picture { display: block; }
.about-hero-media__img { display: block; width: 100%; height: clamp(240px, 38vw, 460px); -o-object-fit: cover; object-fit: cover; -o-object-position: center 45%; object-position: center 45%; }
.about-stats { padding-bottom: clamp(2rem, 4vw, 3rem); }
.about-stats__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 4vw, 3.5rem) clamp(2rem, 4vw, 3rem); padding-top: clamp(2rem, 4vw, 3rem); }
.about-stat__n { font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 500; letter-spacing: -0.03em; line-height: 0.9; margin-bottom: 0.9rem; }
.about-stat p { color: var(--ink-60); margin: 0; max-width: 26ch; line-height: 1.4; }
@media (max-width: 820px) { .about-stats__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .about-stats__grid { grid-template-columns: 1fr; } }

.about-purpose { padding-top: clamp(2rem, 4vw, 3.25rem); padding-bottom: clamp(2rem, 4vw, 3.25rem); }
.about-purpose__grid { display: grid; grid-template-columns: 1fr 2.4fr; gap: clamp(1.5rem, 4vw, 4rem); border-top: 1px solid var(--ink-12); padding-top: clamp(2rem, 4vw, 3rem); align-items: start; }
.about-purpose__grid .eyebrow { position: sticky; top: 7rem; }
.about-purpose__prose p { font-size: clamp(1.3rem, 2.2vw, 2rem); font-weight: 400; line-height: 1.28; letter-spacing: -0.015em; margin: 0 0 1.25rem; }
.about-purpose__prose p:last-child { margin-bottom: 0; }
@media (max-width: 820px) { .about-purpose__grid { grid-template-columns: 1fr; gap: 1.5rem; } .about-purpose__grid .eyebrow { position: static; } }
/* Purpose statement — reveal word by word as it scrolls in (same as the home statement). */
.about-purpose__prose .word { display: inline-block; opacity: 0; transform: translateY(0.4em); transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out); }
.about-purpose__prose.words-in .word { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .about-purpose__prose .word { opacity: 1 !important; transform: none !important; transition: none; } }

.about-people { padding-bottom: clamp(2rem, 4vw, 3.25rem); }
.about-links { padding-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.about-link-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border-top: 1px solid var(--ink-12); padding: clamp(1.3rem, 2.5vw, 2rem) 0; font-size: clamp(1.4rem, 3vw, 2.4rem); font-weight: 500; letter-spacing: -0.023em; transition: padding-left 0.4s var(--ease-out), color 0.3s var(--ease-out); }
.about-link-row:last-child { border-bottom: 1px solid var(--ink-12); }
.about-link-row:hover { color: var(--accent); padding-left: 0.75rem; }
.about-link-row .arr { font-size: 0.8em; transition: transform 0.3s var(--ease-out); }
.about-link-row:hover .arr { transform: translate(3px, -3px); }

/* ---------- Inline .link — editorial underline (was a grey chip) ---------- */
.link {
  background: transparent; border-radius: 0; padding: 0; margin: 0;
  white-space: normal; color: inherit;
  border-bottom: 1px solid var(--ink-30);
  transition: color 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}
.link:hover { background: transparent; color: var(--accent); border-color: var(--accent); }

/* FAQ: no divider under the open question, and keep the header padding identical
   open vs closed — the base `.card-question.opened .card-header` rule (higher
   specificity) otherwise resets padding to 1rem 1.25rem, shifting the question
   sideways on open. */
.faq-accordion .card-question.opened .card-header {
  border-bottom: 0;
  padding: clamp(1.2rem, 2.2vw, 1.7rem) 2.5rem clamp(1.2rem, 2.2vw, 1.7rem) 0;
}

/* ======================================================================
   404
   ====================================================================== */
.notfound { min-height: 80svh; display: flex; flex-direction: column; justify-content: center; padding-top: 9rem; padding-bottom: 4rem; }
.notfound .eyebrow { margin-bottom: 1.5rem; color: var(--accent); }
.notfound__code { font-size: clamp(6rem, 26vw, 22rem); font-weight: 500; line-height: 0.8; letter-spacing: -0.035em; margin: 0; }
.notfound__msg { font-size: clamp(1.2rem, 2vw, 1.8rem); color: var(--ink-60); max-width: 34ch; margin: clamp(1.5rem, 3vw, 2.5rem) 0; font-weight: 500; line-height: 1.25; }
.notfound__cta { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.notfound__link { font-weight: 500; border-bottom: 1px solid var(--color-charcoal); padding-bottom: 2px; }
.notfound__link:hover { color: var(--accent); border-color: var(--accent); }

/* ======================================================================
   Legal (privacy / terms)
   ====================================================================== */
.legal-page { max-width: 52rem; padding-top: clamp(0.5rem, 1.5vw, 1rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
.legal-page__intro { font-size: 0.9375rem; color: var(--ink-60); line-height: 1.6; margin: 0 0 clamp(1.5rem, 3vw, 2rem); max-width: 42rem; }
.legal-sections { border-top: 1px solid var(--ink-12); }
.legal-section {
  display: grid;
  grid-template-columns: minmax(7rem, 9rem) 1fr;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(1.25rem, 2vw, 1.75rem) 0;
  border-bottom: 1px solid var(--ink-12);
}
.legal-section h2 {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-60);
  margin: 0;
  line-height: 1.4;
}
.legal-section__body p { font-size: 0.9375rem; color: var(--ink-60); line-height: 1.6; margin: 0 0 0.75rem; }
.legal-section__body p:last-child { margin-bottom: 0; }
.legal-section__body a { color: var(--color-charcoal); border-bottom: 1px solid var(--ink-30); }
.legal-section__body a:hover { color: var(--accent); border-color: var(--accent); }
@media (max-width: 640px) {
  .legal-section { grid-template-columns: 1fr; gap: 0.5rem; }
}

/* ======================================================================
   Home preloader — count-up to 100, then wipe up (Neue Montreal style)
   ====================================================================== */
#preloader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--color-charcoal); color: var(--color-cream);
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: clamp(1.5rem, 6vw, 5.5rem);
  transition: transform 0.9s var(--ease-out);
  will-change: transform;
}
#preloader.done { transform: translateY(-101%); }
#preloader .pl-label { font-size: clamp(0.72rem, 1vw, 0.95rem); letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.55; }
#preloader .pl-count { font-size: clamp(4.5rem, 17vw, 15rem); font-weight: 500; letter-spacing: -0.032em; line-height: 0.78; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { #preloader { display: none; } }
/* Returning visitors (cookie set) skip the intro entirely: the preloader never
   paints and the hero text shows immediately for a fast LCP. The `preloaded`
   class is set synchronously in <head>/before the preloader, so this applies
   on the first frame. */
html.preloaded #preloader { display: none !important; }
html.preloaded .hero-words .hw { animation: none; opacity: 1; transform: none; }

/* ======================================================================
   Home — parallax on featured-work images
   ====================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .feature-row__media img {
    top: -12%; bottom: auto; height: 124%;
    transition: none; will-change: transform;
  }
}

/* ======================================================================
   Home — testimonials as a hover/click list (Neue Montreal weights-chart)
   ====================================================================== */
.home-reviews { padding-top: clamp(4rem, 8vw, 7rem); padding-bottom: clamp(4rem, 8vw, 7rem); }
.home-reviews > .eyebrow { display: block; margin-bottom: clamp(2rem, 4vw, 3rem); }
.reviews-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
@media (max-width: 860px) { .reviews-grid { grid-template-columns: 1fr; gap: 2.5rem; } }
.reviews-list { display: flex; flex-direction: column; align-items: flex-start; }
.review-org {
  text-align: left; background: none; border: 0; cursor: pointer; font-family: inherit;
  padding: clamp(0.45rem, 1vw, 0.8rem) 0;
  font-size: clamp(1.6rem, 3.6vw, 3rem); font-weight: 500; letter-spacing: -0.023em; line-height: 1.05;
  color: var(--ink-60); transition: color 0.3s var(--ease-out);
}
.review-org.is-active { color: var(--accent); }
.reviews-display { display: grid; min-height: 1px; }
.review-quote {
  grid-area: 1 / 1; margin: 0; opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.review-quote.is-active { opacity: 1; transform: none; pointer-events: auto; }
.review-quote .q { font-size: clamp(1.4rem, 2.6vw, 2.3rem); font-weight: 500; letter-spacing: -0.019em; line-height: 1.16; margin: 0; }
.review-quote .cite { margin-top: 1.75rem; color: var(--ink-60); font-size: clamp(0.95rem, 1.2vw, 1.1rem); }
.review-quote .cite strong { color: var(--color-charcoal); font-weight: 500; }

/* ---------- Testimonials index — editorial quote wall ---------- */
.tm-wall { -moz-columns: 2; columns: 2; -moz-column-gap: clamp(2rem, 5vw, 5rem); column-gap: clamp(2rem, 5vw, 5rem); padding-bottom: clamp(4rem, 8vw, 7rem); }
@media (max-width: 760px) { .tm-wall { -moz-columns: 1; columns: 1; } }
.tm-card { -moz-column-break-inside: avoid; break-inside: avoid; -webkit-column-break-inside: avoid; padding: clamp(1.75rem, 3vw, 2.5rem) 0; border-top: 1px solid var(--ink-12); margin: 0; }
.tm-card__quote { font-size: clamp(1.15rem, 1.6vw, 1.45rem); font-weight: 500; letter-spacing: -0.015em; line-height: 1.4; color: var(--color-charcoal); margin: 0 0 1.5rem; }
.tm-card__quote::before { content: "\201C"; }
.tm-card__quote::after { content: "\201D"; }
.tm-card__cite { display: flex; flex-direction: column; gap: 0.15rem; }
.tm-card__name { font-weight: 500; color: var(--color-charcoal); }
.tm-card__role { color: var(--ink-60); font-size: 0.92rem; }

/* ======================================================================
   Single career / role pages — editorial
   ====================================================================== */
.role-hero { padding: 9.5rem clamp(1.25rem, 5vw, 4rem) clamp(2rem, 4vw, 3rem); justify-content: flex-start; align-items: flex-start; text-align: left; }
.role-hero-inner { max-width: 100%; margin: 0; align-items: flex-start; text-align: left; }
.role-badge { display: inline-block; font-size: clamp(0.7rem, 0.9vw, 0.82rem); text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent); font-weight: 500; margin-bottom: 1.25rem; }
.role-hero-title { font-size: clamp(2.6rem, 7vw, 6rem); font-weight: 500; line-height: 0.95; letter-spacing: -0.03em; margin: 0 0 1.5rem; max-width: 20ch; }
.role-hero-desc { font-size: clamp(1.15rem, 1.8vw, 1.6rem); color: var(--ink-60); max-width: 46ch; margin: 0 0 2rem; line-height: 1.3; }

.role-section { padding-top: clamp(2.5rem, 5vw, 4rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.role-section .container-2xl, .role-section .container-xl { max-width: none; width: 100%; margin: 0; padding-left: clamp(1.25rem, 5vw, 4rem); padding-right: clamp(1.25rem, 5vw, 4rem); box-sizing: border-box; }
.careers-eyebrow { display: inline-block; font-size: clamp(0.7rem, 0.9vw, 0.82rem); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 500; color: var(--ink-60); margin-bottom: 1rem; }
.role-section .about-hero-headline { font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1; letter-spacing: -0.023em; }
.role-content-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
@media (max-width: 820px) { .role-content-grid { grid-template-columns: 1fr; gap: 2rem; } }
.role-prose p { font-size: clamp(1.1rem, 1.4vw, 1.35rem); color: rgba(27, 24, 17, 0.74); line-height: 1.5; margin: 0 0 1.25rem; }
.role-stats { display: flex; flex-direction: column; gap: 1.75rem; }
.role-stats-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 2rem; }
.role-stat { display: flex; flex-direction: column; align-items: flex-start; }
/* Subtle pill label — no hard borders, warm tint that sits on the cream page. */
.role-stat-label {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.8rem;
  background: rgba(27, 24, 17, 0.05);
  border-radius: 200px;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
  color: var(--ink-60);
  margin-bottom: 0.85rem;
}
.role-stat-value { font-weight: 500; margin: 0; line-height: 1.4; }

.role-subsection-heading { font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 500; letter-spacing: -0.023em; line-height: 1; margin: 0 0 1.5rem; padding-top: clamp(1.5rem, 3vw, 2.5rem); border-top: 1px solid var(--ink-12); }
.role-prose-block { font-size: clamp(1.1rem, 1.4vw, 1.3rem); color: var(--ink-60); line-height: 1.5; max-width: 60ch; margin: 0 0 1rem; }
.role-italic { font-style: normal; color: var(--ink-60); }
.role-bullets { list-style: none; margin: 0; padding: 0; max-width: 66ch; }
.role-bullet { display: flex; gap: 0.9rem; padding: 0.75rem 0; border-bottom: 1px solid var(--ink-12); font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.45; color: var(--color-charcoal); }
.role-bullet-dot { color: var(--accent); }

.role-section--offers .text-12 { font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 500; letter-spacing: -0.023em; }
.role-benefits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
.role-benefits-row { display: contents; }
.role-benefit-card { border-top: 1px solid var(--ink-12); padding-top: 1.25rem; }
.role-benefit-title { font-size: clamp(1.15rem, 1.7vw, 1.4rem); font-weight: 500; letter-spacing: -0.015em; margin: 0 0 0.5rem; }
.role-benefit-desc { color: var(--ink-60); margin: 0; line-height: 1.45; font-size: 0.98rem; }
@media (max-width: 820px) { .role-benefits-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .role-benefits-grid { grid-template-columns: 1fr; } }
.role-ctas, .role-cta-single { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: clamp(2rem, 4vw, 3rem); }

/* ---------- Featured-work hover: reveal the case-study cue ---------- */
.feature-row__body::after {
  content: "View case study ↗︎";
  margin-top: 1.1rem; font-weight: 500;
  font-size: clamp(1rem, 1.4vw, 1.2rem); letter-spacing: 0.02em; color: var(--color-cream);
  opacity: 0; transform: translateY(0.4em);
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.feature-row:hover .feature-row__body::after,
.feature-row:focus-visible .feature-row__body::after { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .feature-row__body::after { transition: opacity 0.4s var(--ease-out); transform: none; }
}

/* ---------- Statement — word-by-word reveal ---------- */
.home-statement h2 .word { display: inline-block; opacity: 0; transform: translateY(0.4em); transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out); }
.home-statement h2.words-in .word { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .home-statement h2 .word { opacity: 1 !important; transform: none !important; transition: none; } }

/* ---------- Blog post byline bar ---------- */
.post-hero__byline {
  display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
  border-top: 1px solid var(--ink-12);
  max-width: 60rem;
}
.post-hero__share { display: flex; align-items: center; gap: 0.5rem; }

/* ======================================================================
   Role application form — editorial
   ====================================================================== */
/* Left-align the form to the same gutter as the hero (was a centered narrow column),
   matching the editorial left-aligned layout used across the site. */
.role-apply-section { padding: clamp(1rem, 2vw, 2rem) clamp(1.25rem, 5vw, 4rem) clamp(4rem, 8vw, 7rem); }
.role-apply-section .container-xs { max-width: 44rem; margin-left: 0; margin-right: 0; }
/* Short paired fields sit side by side, like the contact form. */
.role-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.25rem, 2.5vw, 2rem); }
.role-form-row .form-group { margin-bottom: 0; }
@media (max-width: 560px) { .role-form-row { grid-template-columns: 1fr; gap: clamp(1.25rem, 2.5vw, 1.75rem); } }
.role-form-header { margin-bottom: clamp(2rem, 4vw, 3rem); }
.role-form-title { font-size: clamp(1.9rem, 3.4vw, 2.8rem); font-weight: 500; letter-spacing: -0.023em; line-height: 1.02; margin: 0 0 0.9rem; color: var(--color-charcoal); }
.role-form-desc { font-size: clamp(1rem, 1.3vw, 1.15rem); color: var(--ink-60); line-height: 1.5; margin: 0; max-width: 52ch; }
.role-form-section-label { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin: 0 0 1.5rem; }
.role-apply-section .form-group { margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem); }
.role-apply-section .form-label { display: block; font-weight: 500; font-size: clamp(1rem, 1.3vw, 1.12rem); letter-spacing: -0.01em; color: var(--color-charcoal); margin-bottom: 0.5rem; }
.role-apply-section .form-hint { font-size: 0.9rem; color: var(--ink-60); line-height: 1.45; margin: 0 0 0.6rem; }
.role-apply-section .form-input {
  width: 100%; box-sizing: border-box; height: 3.4rem; padding: 0 1.1rem;
  color: var(--color-charcoal); background-color: rgba(255, 255, 255, 0.4);
  border: 1px solid var(--ink-12); border-radius: 12px; box-shadow: none;
  font-family: var(--base-font); font-size: clamp(0.95rem, 1.2vw, 1.05rem); font-weight: 400; line-height: 1.4;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.role-apply-section textarea.form-input { height: auto; min-height: 160px; padding: 0.9rem 1.1rem; line-height: 1.55; resize: vertical; }
.role-apply-section select.form-input {
  cursor: pointer; padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231b1811' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1.1rem center; background-size: 14px;
}
.role-apply-section .form-input::-moz-placeholder { color: var(--ink-30); }
.role-apply-section .form-input::placeholder { color: var(--ink-30); }
.role-apply-section .form-input:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(3, 95, 208, 0.14); }
.role-apply-section .hr { height: 1px; background: var(--ink-12); border: 0; }
.role-apply-section .button.w-100 { width: 100%; margin-top: 1rem; }
.role-form-footnote { font-size: 0.9rem; color: var(--ink-60); text-align: center; margin-top: 1.25rem; }

/* =====================================================================
   Mobile / touch polish
   Loaded last so these overrides win. Every rule here is a no-op on
   desktop / non-notch hardware (env() insets resolve to 0, hover: none
   and pointer: coarse don't match), so nothing changes on the pointer
   web — it only sands down the rough edges on phones.
   ===================================================================== */

/* --- Gray/blue flash on tap: kill the native tap highlight everywhere. --- */
html { -webkit-tap-highlight-color: transparent; }

/* --- Pull-to-refresh / scroll chaining: keep gestures inside the page. --- */
html, body { overscroll-behavior: none; }

/* --- Tap feels laggy: remove the 300ms delay + double-tap-zoom on
       interactive controls, and stop long-press from selecting their labels. --- */
a,
button,
.button,
.button-primary,
.button-secondary,
.button-white,
[role="button"],
label,
summary,
input[type="button"],
input[type="submit"],
input[type="reset"] {
  touch-action: manipulation;
}

button,
.button,
.button-primary,
.button-secondary,
.button-white,
[role="button"],
.nav-link,
summary {
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
}

/* --- Page zooms into inputs: iOS zooms any focused field under 16px.
       The design clamps these down to 14px, so pin them to 16px on touch
       devices only (desktop keeps the fluid clamp). --- */
@media (pointer: coarse) {
  input,
  select,
  textarea,
  .form-group .form-input,
  .role-apply-section .form-input {
    font-size: 16px;
  }
}

/* --- Hover state stuck after tap: on touch devices :hover latches after a
       tap and leaves buttons in their hover paint. Reset the button hover
       styles back to their resting state where there's no real hover. --- */
@media (hover: none) {
  .button:hover,
  .button-primary:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
    opacity: 1;
  }
  .button:hover svg,
  .button-primary:hover svg { fill: #fff; }

  .button-secondary:hover,
  .button-white:hover {
    background: transparent;
    border-color: var(--color-charcoal);
    color: var(--color-charcoal);
    opacity: 1;
  }
}

/* --- Content stops at / runs under the notch: with viewport-fit=cover the
       page now fills the display, so keep fixed chrome clear of the safe areas. --- */
.site-header { padding-top: env(safe-area-inset-top); }
.navbar-container {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
.nav-container {
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
.site-footer { padding-bottom: env(safe-area-inset-bottom); }

/* --- Layout has wrong height: full-screen shells jump when the mobile URL
       bar shows/hides. Override the base.css 100vh heights with dynamic
       viewport units — svh (small) for heroes, dvh for app-like shells.
       Kept here so this whole pass lives in one file; base.css is untouched. --- */
.vh-100 { height: 100dvh !important; }
.nav-container { height: 100dvh; }
.single-project-layout .single-project-hero { height: 100svh; }
.password-wrapper { height: 100dvh; }
.single-testimonial { height: 100dvh !important; }