/* =========================================================
   DESIGN TOKENS — v11 "Green Field" visual language
   Ported from the Claude Design concept (Impact / Homepage /
   Case HELLO .dc.html files), July 2026.

   Identity:
   - Deep green field (#062A1C) for header, heroes, footer
   - Warm paper background (#F4F6F1), soft green alt band (#DFEBE0)
   - White cards, 28px radius, soft green-tinted shadows
   - Mint pill buttons (#9BE8C0 on #04281A)
   - Roboto Flex display type: huge, tight, confident
   - Roboto Serif italic flourish word in the homepage hero
========================================================= */
:root {
  /* ---- Brand palette ---- */
  --green-deep: #062a1c; /* hero / header / footer field */
  --green-heading: #0b3a28; /* headings on light */
  --green-accent: #0e5b43; /* links, stat numbers */
  --green-accent-hover: #063d2b;
  --mint: #9be8c0; /* primary button container */
  --on-mint: #04281a;
  --mint-focus: #7bdba8; /* focus ring on dark */

  --bg: #f4f6f1; /* page background */
  --bg-band: #dfebe0; /* soft green section band */
  --card: #ffffff;

  --ink: #171d19; /* strongest body ink */
  --body-ink: #3d473f; /* default body text */
  --muted: #5b6a5f; /* captions, kickers */
  --border: #c9d6cc;

  /* On-dark roles */
  --on-dark: #eaf6ec;
  --on-dark-muted: #b9d9c3;
  --on-dark-nav: #bfe3cb;
  --on-dark-kicker: #9bc7aa;
  --on-dark-outline: #4e7a62;

  /* Shadows (green-tinted, from the concept) */
  --shadow-card: 0 1px 2px rgba(6, 42, 28, 0.08);
  --shadow-lift: 0 16px 40px rgba(6, 42, 28, 0.16);

  /* Shape */
  --radius-card: 28px;
  --radius-media: 24px;
  --radius-pill: 999px;

  /* Layout */
  --max: 880px; /* prose container; media and cards break out wider (see WIDE MEDIA BREAKOUT) */
  --measure: 72ch;
  --pad-x: clamp(20px, 4vw, 56px);

  /* Type */
  --font: "Roboto", system-ui, -apple-system, sans-serif;
  --font-display: "Roboto Flex", "Roboto", system-ui, sans-serif;
  --font-serif: "Roboto Serif", Georgia, serif;

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-spring: cubic-bezier(0.34, 1.3, 0.64, 1);

  /* ---- Material Web component theming ---- */
  --md-sys-color-primary: var(--green-accent);
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-surface: var(--bg);
  --md-sys-color-on-surface: var(--ink);
  --md-sys-color-outline: #6f7b72;
  --md-ref-typeface-brand: "Roboto", sans-serif;
  --md-ref-typeface-plain: "Roboto", sans-serif;
  --md-focus-ring-color: var(--green-accent);
  --md-focus-ring-active-width: 2px;
}

/* Filled buttons: mint pill with deep-green label */
md-filled-button {
  --md-filled-button-container-color: var(--mint);
  --md-filled-button-container-shape: var(--radius-pill);
  --md-filled-button-label-text-color: var(--on-mint);
  --md-filled-button-hover-label-text-color: var(--on-mint);
  --md-filled-button-focus-label-text-color: var(--on-mint);
  --md-filled-button-pressed-label-text-color: var(--on-mint);
  --md-filled-button-icon-color: var(--on-mint);
  --md-filled-button-hover-icon-color: var(--on-mint);
  --md-filled-button-focus-icon-color: var(--on-mint);
  --md-filled-button-pressed-icon-color: var(--on-mint);
  --md-filled-button-hover-state-layer-color: var(--on-mint);
  --md-filled-button-pressed-state-layer-color: var(--on-mint);
  --md-filled-button-label-text-weight: 500;
}

/* Outlined buttons: green label on light surfaces (default) */
md-outlined-button {
  --md-outlined-button-container-shape: var(--radius-pill);
  --md-outlined-button-label-text-color: var(--green-accent);
  --md-outlined-button-hover-label-text-color: var(--green-accent-hover);
  --md-outlined-button-focus-label-text-color: var(--green-accent-hover);
  --md-outlined-button-pressed-label-text-color: var(--green-accent-hover);
  --md-outlined-button-icon-color: var(--green-accent);
  --md-outlined-button-hover-icon-color: var(--green-accent-hover);
  --md-outlined-button-focus-icon-color: var(--green-accent-hover);
  --md-outlined-button-pressed-icon-color: var(--green-accent-hover);
  --md-outlined-button-outline-color: #8fae9c;
  --md-outlined-button-label-text-weight: 500;
}

/* Outlined buttons and icon buttons on dark green fields */
.site-header md-outlined-button,
.hero-type md-outlined-button,
.page-hero md-outlined-button,
.case-hero:not(.case-hero--detail) md-outlined-button,
.site-footer md-outlined-button {
  --md-outlined-button-label-text-color: var(--on-dark);
  --md-outlined-button-hover-label-text-color: var(--on-dark);
  --md-outlined-button-focus-label-text-color: var(--on-dark);
  --md-outlined-button-pressed-label-text-color: var(--on-dark);
  --md-outlined-button-icon-color: var(--on-dark);
  --md-outlined-button-hover-icon-color: var(--on-dark);
  --md-outlined-button-focus-icon-color: var(--on-dark);
  --md-outlined-button-pressed-icon-color: var(--on-dark);
  --md-outlined-button-outline-color: var(--on-dark-outline);
  --md-outlined-button-hover-state-layer-color: var(--on-dark);
  --md-outlined-button-pressed-state-layer-color: var(--on-dark);
}

/* Undefined-element fallback: every page is a full browser navigation
   (no client-side routing), so Material Web's custom elements re-fetch
   and re-upgrade on every click. Until @material/web/all.js finishes
   defining them, md-filled-button/md-outlined-button/md-icon-button
   render as bare unstyled inline text (all the theming above lives in
   --md-* custom properties, which only apply once the shadow DOM
   exists) — that plain-text-to-pill-button pop is the "blink" on nav
   clicks. Give the raw elements a matching size/shape so the upgrade
   is invisible instead of a jump.
   https://web.dev/articles/custom-elements-best-practices#fouce */
md-filled-button:not(:defined),
md-outlined-button:not(:defined) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 24px;
  border-radius: var(--radius-pill);
  font-family: var(--font);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  vertical-align: middle;
}
md-filled-button:not(:defined) {
  background: var(--mint);
  color: var(--on-mint);
}
md-outlined-button:not(:defined) {
  background: transparent;
  color: var(--green-accent);
  border: 1px solid #8fae9c;
}
.site-header md-outlined-button:not(:defined),
.hero-type md-outlined-button:not(:defined),
.page-hero md-outlined-button:not(:defined),
.case-hero:not(.case-hero--detail) md-outlined-button:not(:defined),
.site-footer md-outlined-button:not(:defined) {
  color: var(--on-dark);
  border-color: var(--on-dark-outline);
}
md-icon-button:not(:defined) {
  display: inline-flex;
  width: 48px;
  height: 48px;
  color: transparent; /* hides the raw icon-name text (e.g. "menu") */
  vertical-align: middle;
}
md-icon:not(:defined) {
  display: inline-block;
  width: 1em;
  font-size: 1.125em;
  color: transparent; /* hides the raw icon-name text (e.g. "arrow_forward") */
  overflow: hidden;
  vertical-align: middle;
}

/* =========================================================
   CROSS-DOCUMENT VIEW TRANSITIONS
   This is a set of separate static pages, not an SPA — every nav
   click is a full browser navigation. Both the outgoing and
   incoming page need this rule for the browser to transition
   between them instead of hard-cutting; since every page shares
   this stylesheet, that's automatic. No-op / instant navigation
   in browsers that don't support it yet (progressive enhancement).

   The browser default (a straight opacity crossfade of the whole
   page as one flat image) looks worse than no transition at all
   here: it double-exposes the outgoing hero text and the incoming
   content on top of each other for ~150ms, since they don't share
   a layout. Two overrides fix that:
   1. Header/footer are named so the browser treats them as one
      persistent element instead of two flat images to dissolve
      between — since they render identically on every page, a
      plain instant swap between two identical snapshots is
      invisible, so this reads as the nav "staying put".
   2. Everything else fades old-out-then-new-in (sequential, not
      simultaneous) so the two pages' content never overlaps.
========================================================= */
@view-transition {
  navigation: auto;
}
.site-header {
  view-transition-name: site-header;
}
.site-footer {
  view-transition-name: site-footer;
}
::view-transition-group(site-header),
::view-transition-group(site-footer) {
  animation: none;
}
::view-transition-old(site-header),
::view-transition-old(site-footer),
::view-transition-new(site-header),
::view-transition-new(site-footer) {
  animation: none;
  mix-blend-mode: normal;
}
::view-transition-image-pair(root) {
  isolation: isolate;
}
::view-transition-old(root),
::view-transition-new(root) {
  /* Two browser defaults actively hurt this site:
     1. mix-blend-mode: plus-lighter (additive light blending) — causes a
        bright/white flash mid-crossfade on our dark background.
     2. simultaneous fade timing — old and new are both partway visible
        at once, and since they're unrelated layouts (not the same
        content shifting position), that reads as garbled overlapping
        double-exposed text, not a smooth dissolve.
     Fix: normal blending, plus a contiguous (not simultaneous, not
     gapped) old-out-then-new-in sequence — old finishes exactly when
     new starts, both linear, so there's no pause where nothing is
     visible and no window where both are visible together. */
  mix-blend-mode: normal;
  animation-timing-function: linear;
  animation-fill-mode: both;
}
::view-transition-old(root) {
  animation-name: vt-fade-out;
  animation-duration: 90ms;
}
::view-transition-new(root) {
  animation-name: vt-fade-in;
  animation-duration: 110ms;
  animation-delay: 90ms;
}
@keyframes vt-fade-out {
  to {
    opacity: 0;
  }
}
@keyframes vt-fade-in {
  from {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* =========================================================
   RESET
========================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
html,
body {
  margin: 0;
  padding: 0;
  font-family: var(--font);
  font-size: 1rem;
  color: var(--body-ink);
  background: var(--bg);
  line-height: 1.65;
  overflow-x: clip; /* full-bleed 100vw bands may include scrollbar width */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
/* Push the footer to the viewport edge on short pages (e.g. Contact);
   .cookie-banner and .skip-link are position:fixed/absolute, so they
   don't take part in this flow. */
main {
  flex: 1 0 auto;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* =========================================================
   TYPOGRAPHY
========================================================= */
h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  color: var(--green-heading);
  margin: 0 0 0.75rem;
}
h1 {
  font-size: clamp(3rem, 9vw, 8.75rem);
  font-weight: 760;
  line-height: 0.95;
  letter-spacing: -0.035em;
}
h2 {
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  font-weight: 680;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
h3 {
  font-size: 1.3125rem;
  font-weight: 660;
  line-height: 1.2;
  letter-spacing: -0.015em;
}
h4 {
  font-size: 1.0625rem;
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
h5 {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
  color: var(--muted);
  margin: 0 0 0.65rem;
}
p {
  margin: 0 0 1.1rem;
}

.lede,
.subheadline {
  color: var(--body-ink);
  font-size: clamp(1rem, 1.3vw, 1.1875rem);
  font-weight: 400;
  line-height: 1.65;
  margin: 0 0 1.25rem;
}

/* =========================================================
   SHARED TYPOGRAPHIC PATTERNS
========================================================= */

/* Eyebrow / section label */
.featured-work__eyebrow,
.testimonials__eyebrow,
.page-nav__label {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}

/* Stat sub-label */
.facts-grid .card-box strong {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Secondary body text */
.case-card__caption,
.testimonials__cta,
.img-caption {
  font-size: 0.9375rem;
  color: var(--muted);
}

/* =========================================================
   LINKS
========================================================= */
a {
  color: var(--green-accent);
  text-decoration: none;
  transition: color 150ms var(--ease-out);
}
a:hover,
a:focus-visible {
  color: var(--green-accent-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.text-link {
  display: block;
  margin-top: 1.25rem;
  font-weight: 500;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.text-link:hover {
  color: var(--green-accent-hover);
}

/* =========================================================
   LAYOUT
========================================================= */
main,
.page {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 1.25rem;
}
section {
  padding: 3.5rem 0;
}
.case-section {
  padding: clamp(2rem, 3.5vh, 3rem) 0;
  border-top: none;
}
.page-hero,
.case-hero {
  padding: 3.5rem 0 1.5rem;
}

/* =========================================================
   DARK GREEN HERO BANDS
   .page-hero and .case-hero live inside the constrained
   <main>, so they break out to full-bleed with the 100vw
   trick, then re-constrain their own content.
========================================================= */
.hero-type,
.page-hero,
.case-hero:not(.case-hero--detail) {
  position: relative;
  width: 100vw;
  left: 50%;
  margin-left: -50vw;
  background: var(--green-deep);
  color: var(--on-dark);
  padding-top: clamp(32px, 6vh, 72px);
  padding-bottom: clamp(44px, 7vh, 80px);
  padding-inline: max(1.25rem, calc((100vw - var(--max)) / 2 + 1.25rem));
  text-align: left;
}
.page-hero > *,
.case-hero:not(.case-hero--detail) > * {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  text-align: left;
}
.page-hero h1,
.case-hero:not(.case-hero--detail) h1 {
  margin: 0;
  color: var(--on-dark);
}
.page-hero .lede,
.case-hero:not(.case-hero--detail) .lede {
  margin: clamp(20px, 3.5vh, 36px) 0 0;
  max-width: 56ch;
  color: var(--on-dark-muted);
}
.page-hero a:not([class]),
.case-hero:not(.case-hero--detail) a:not([class]) {
  color: var(--on-dark);
}

/* Case-study detail hero: light, editorial, breadcrumb above */
.case-hero--detail {
  padding: clamp(36px, 6vh, 64px) 0 0.5rem;
  text-align: left;
}
.case-hero--detail > * {
  margin-left: 0;
  margin-right: 0;
  text-align: left;
}
.case-hero--detail h1 {
  font-size: clamp(2.375rem, 5.5vw, 4.5rem);
  font-weight: 720;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--green-heading);
  max-width: 16ch;
  text-wrap: balance;
  margin: 0;
}
.case-hero--detail .lede {
  margin: 1.75rem 0 1rem;
  max-width: 64ch;
  color: var(--body-ink);
}

/* Case signature kicker */
.case-hero__kicker {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.4rem;
  margin: 0 0 1.25rem;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.case-hero__kicker md-icon {
  --md-icon-size: 18px;
  font-size: 18px;
  color: var(--green-accent);
}

/* =========================================================
   TEXT COLUMN — left-aligned editorial (was centered in v10)
========================================================= */
:is(.text-column, .case-section)
  > :is(p, ul, ol, blockquote, .lede, .subheadline) {
  max-width: var(--measure);
  margin-left: 0;
  margin-right: 0;
  text-align: left;
}
:is(.text-column, .case-section) > :is(h1, h2, h3, h4, h5) {
  text-align: left;
}

/* pull-quote: large display statement, left-aligned */
p.pull-quote,
.case-section > p.pull-quote,
.text-column > p.pull-quote {
  font-family: var(--font-display);
  font-weight: 480;
  font-size: clamp(1.25rem, 2.2vw, 1.875rem);
  line-height: 1.4;
  letter-spacing: -0.015em;
  text-align: left;
  color: var(--green-heading);
  margin: 1.5rem 0;
  max-width: 62ch;
  padding: 0;
}
.pull-quote::before,
.pull-quote::after {
  content: none;
}

.case-section h3 {
  margin-top: 3rem;
}
.case-section h4 {
  margin-top: 2.25rem;
}
.case-section h3 + .subheadline {
  margin-top: -0.15rem;
}

/* =========================================================
   HEADER + NAV — dark green field
========================================================= */
.logo {
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 1rem;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--on-dark);
  text-decoration: none;
}
.logo:hover {
  color: var(--on-dark);
  text-decoration: none;
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 1500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px var(--pad-x);
  background: var(--green-deep);
  border-bottom: none;
}
.site-nav {
  display: flex;
  gap: clamp(0.35rem, 1.2vw, 1rem);
  align-items: center;
}
.nav-link {
  position: relative;
  padding: 0.4rem 0.3rem;
  color: var(--on-dark-nav);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  transition: color 150ms var(--ease-out);
}
.nav-link::after {
  content: none;
}
.nav-link:hover {
  color: var(--on-dark);
  background: transparent;
  text-decoration: none;
}
.nav-link.active {
  background: transparent;
  color: var(--on-dark);
  font-weight: 500;
}

/* Focus visibility on dark fields */
.site-header :focus-visible,
.hero-type :focus-visible,
.page-hero :focus-visible,
.case-hero:not(.case-hero--detail) :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--mint-focus);
}
.site-header md-filled-button,
.hero-type md-filled-button,
.site-footer md-filled-button {
  --md-focus-ring-color: var(--mint-focus);
}

/* =========================================================
   BREADCRUMBS — quiet, light, left-aligned
========================================================= */
.breadcrumbs {
  border-bottom: none;
  background: var(--bg);
}
.breadcrumbs .container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 1.5rem 1.25rem 0;
  font-size: 0.875rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.breadcrumbs a {
  color: var(--green-accent);
  font-weight: 400;
}
.breadcrumbs a:hover {
  color: var(--green-accent-hover);
}
.breadcrumb-separator {
  opacity: 0.45;
}
.breadcrumbs [aria-current="page"] {
  color: var(--muted);
  font-weight: 400;
}

/* Mobile toggle */
.nav-toggle {
  display: none;
  z-index: 1600;
  --md-icon-button-icon-color: var(--on-dark);
}
.nav-toggle__icon-close {
  display: none;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__icon-menu,
.nav-toggle[data-aria-expanded="true"] .nav-toggle__icon-menu {
  display: none;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__icon-close,
.nav-toggle[data-aria-expanded="true"] .nav-toggle__icon-close {
  display: inline-flex;
}
body.nav-open {
  overflow: hidden;
}

/* =========================================================
   TYPOGRAPHIC HERO (index) — the green field statement
========================================================= */
.hero-type {
  text-align: left;
  padding-top: clamp(24px, 5dvh, 88px);
  padding-bottom: clamp(28px, 6dvh, 96px);
  border-bottom: none;
}
.hero-type__kicker {
  margin: 0 0 clamp(16px, 2.5vh, 28px);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-dark-kicker);
}
.hero-type__headline {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.4vw, 3.25rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--on-dark);
  margin: 0;
  max-width: 42ch;
  text-wrap: pretty;
}
.hero-type__headline br {
  display: block;
  content: "";
  margin-top: clamp(0.15em, 1.3dvh, 0.5em);
}
.hero-type__flourish {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 560;
  letter-spacing: -0.015em;
}
.hero-type__body {
  font-size: clamp(0.9375rem, 1.2vw, 1.125rem);
  color: var(--on-dark-muted);
  line-height: 1.6;
  max-width: 52ch;
  margin: clamp(24px, 4vh, 44px) 0 0;
}
.hero-type__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  margin-top: clamp(16px, 3dvh, 40px);
}
.hero-type__proof {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin: clamp(24px, 4vh, 40px) 0 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--on-dark-kicker);
}
.hero-type__proof a {
  color: var(--on-dark-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--on-dark-outline);
}
.hero-type__proof a:hover {
  color: var(--on-dark);
  text-decoration-color: var(--on-dark);
}
.hero-type__proof span {
  color: var(--on-dark-outline);
}

/* =========================================================
   CHECKLIST — quiet editorial bullets
========================================================= */
.checklist {
  list-style: none;
  padding-left: 0;
  margin: 1rem 0 2.25rem;
  max-width: var(--measure);
}
.checklist li {
  position: relative;
  padding-left: 1.35rem;
  margin: 0.6rem 0;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--body-ink);
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.72em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--green-accent);
}
.checklist li strong {
  color: var(--ink); /* not the link green — this is emphasis, not a link */
}
.checklist li a strong {
  color: inherit; /* except when the strong IS the link (e.g. "Read the full case study →") */
}
.case-section > .subheadline + .checklist {
  margin-top: 0.6rem;
}

/* =========================================================
   KEY METRICS — white cards, 28px radius, soft shadow
========================================================= */
.key-metrics {
  --md-elevation-level: 0;
  position: relative;
  margin: 1.5rem 0 2.25rem;
  padding: clamp(24px, 3.5vw, 44px);
  background: var(--card);
  border: none;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.metrics-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: clamp(16px, 2.5vw, 32px);
  list-style: none;
  padding: 0;
  margin: 0 0 0.5rem;
}
.metrics-list li {
  text-align: left;
}
.metrics-list li strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.2vw, 2.875rem);
  font-weight: 740;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--green-heading); /* data highlight, not the link accent */
  font-variant-numeric: tabular-nums;
}
.metrics-list li span {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.45;
  font-weight: 400;
}
.key-metrics .checklist {
  margin: 1.5rem 0 0.25rem;
  max-width: none;
}
.key-metrics .checklist li {
  margin: 0.45rem 0;
}

/* Journey-context labels inside metric cards */
.metric-label {
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin: 0 0 1.5rem;
  padding: 0;
  border-bottom: none;
  text-align: left;
}

/* Consecutive metric cards keep breathing room */
.case-section > .key-metrics + .key-metrics {
  margin-top: 1.5rem;
  border-top: none;
}

/* =========================================================
   MEDIA
========================================================= */
.responsive-img {
  width: 100%;
  height: auto;
}
.case-media {
  margin: 2.5rem auto;
  max-width: var(--max);
}
.case-media img,
.case-media video {
  width: 100%;
  height: auto;
  border-radius: var(--radius-media);
  box-shadow: none;
  display: block;
  aspect-ratio: auto;
  object-fit: contain;
  background: transparent;
  border: none;
}
.case-media--transparent img {
  object-fit: contain;
  background: transparent;
  box-shadow: none;
  border: none;
  aspect-ratio: auto;
}

/* =========================================================
   MEDIA GRID — side-by-side design versions/iterations
========================================================= */
.media-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin: 2.5rem 0;
}
@media (min-width: 640px) {
  .media-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
  }
}
.media-grid__item {
  margin: 0;
  cursor: zoom-in;
}
.media-grid__item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-media);
  background: transparent;
  object-fit: contain;
}
.media-grid__caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.65rem;
  text-align: center;
}

/* Compact variant: 1-3 items, sized to content, no empty grid tracks
   (used for before/after pairs and single call-out shots) */
.media-grid--compact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
}
.media-grid--compact .media-grid__item {
  flex: 0 1 200px;
}

/* Large modifier: bigger call-out shots (e.g. a before/after pair
   that carries a key decision) */
.media-grid--large .media-grid__item {
  flex-basis: 320px;
}

/* Single portrait mockup, called out on its own (e.g. a shipped screen) */
.phone-shot {
  max-width: 320px;
  margin: 2rem auto;
}
.phone-shot img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-media);
  background: transparent;
}
.media-grid__version {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-heading);
}
.media-grid__desc {
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--muted);
}

.img-caption,
:is(.text-column, .case-section) > .img-caption {
  margin-top: 0.75rem;
  margin-bottom: 3.5rem;
  text-align: center;
  max-width: var(--measure);
  margin-left: auto;
  margin-right: auto;
  font-style: italic;
  line-height: 1.5;
}

.video-embed {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  overflow: hidden;
  border-radius: var(--radius-media);
  border: none;
  box-shadow: var(--shadow-card);
  background: #000;
}
.video-embed iframe,
.video-embed video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  object-fit: cover;
  /* Shake It! demo only: the source clip carries a "Veo" watermark in the
     bottom-right corner. A 20% center-scale zoom is the smallest crop that
     pushes it fully outside the frame (verified against the source frame;
     a 10% zoom still left a sliver visible). */
  transform: scale(1.2);
}
.video-embed-vertical {
  position: relative;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  aspect-ratio: 9 / 20;
  overflow: hidden;
  /* Zero on purpose: these are raw screen recordings with square corners
     (status bar, Safari toolbar) that run edge to edge in the frame. Any
     positive radius clips into that content at the top/bottom corners. */
  border-radius: 0;
  border: none;
  box-shadow: none;
  background: transparent;
}
.video-embed-vertical video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Blur-up / reveal */
img.blur-up {
  filter: blur(20px);
  transform: scale(1.02);
  transition:
    filter 600ms var(--ease-out),
    transform 600ms var(--ease-out);
  will-change: filter, transform;
}
img.blur-up.blur-up-ready {
  filter: blur(0px);
  transform: scale(1);
}

/* =========================================================
   REVEAL SAFETY NET
========================================================= */
.reveal {
  opacity: 1;
  transform: none;
  transition: none;
}
html.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.65s var(--ease-out),
    transform 0.65s var(--ease-out);
}
html.js .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
html.js .case-card.reveal {
  transform: translateY(28px);
  will-change: transform, opacity;
}
html.js .case-card.reveal.is-visible {
  transform: none;
}
html.js .case-card.reveal.is-visible:hover {
  transform: translateY(-6px);
}
html.js .reveal-group .reveal:nth-child(1) {
  transition-delay: 0ms;
}
html.js .reveal-group .reveal:nth-child(2) {
  transition-delay: 90ms;
}
html.js .reveal-group .reveal:nth-child(3) {
  transition-delay: 180ms;
}
html.js .reveal-group .reveal:nth-child(4) {
  transition-delay: 270ms;
}

/* Lightbox */
body.lightbox-open {
  overflow: hidden;
}
.image-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(4, 24, 16, 0.92);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 3000;
  padding: 1rem;
}
.image-lightbox--open {
  display: flex;
}
.image-lightbox__inner {
  position: relative;
  width: 100%;
  max-width: 1100px;
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.image-lightbox__inner img {
  display: block;
  max-width: 100%;
  max-height: 90vh;
  height: auto;
  border-radius: 12px;
  box-shadow: none;
}
.image-lightbox__close {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 3100;
  --md-icon-button-icon-color: #fff;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.8));
}
@media (max-width: 640px) {
  .image-lightbox {
    justify-content: flex-start;
    padding: 0.75rem;
  }
  .image-lightbox__inner {
    width: 100%;
    max-width: none;
    height: 90vh;
    max-height: none;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }
  .image-lightbox__inner img {
    height: 90vh;
    width: auto;
    max-height: 90vh;
    max-width: none;
    margin: 0;
    scroll-snap-align: start;
  }
}

/* =========================================================
   ABOUT
========================================================= */
.about-page .about-hero {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 2.5rem;
  align-items: start;
}
.about-photo {
  height: 420px;
  background: #dce8dd;
  overflow: hidden;
  border-radius: var(--radius-card);
  position: sticky;
  top: 5.5rem;
  border: none;
  box-shadow: var(--shadow-card);
}
.about-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.facts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.card-box {
  --md-elevation-level: 0;
  position: relative;
  background: var(--card);
  border: none;
  box-shadow: var(--shadow-card);
  padding: 1.75rem;
  border-radius: var(--radius-card);
}
.facts-grid .card-box strong {
  margin-bottom: 0.35rem;
}

/* Whole-card click target for contact-card only (the plain .card-box use
   on About's Quick Facts has no destination, so it stays inert). Same
   pattern as .case-card__cover: an invisible link stretched over the
   card, hidden from assistive tech since the visible button already
   provides a labeled, keyboard-reachable link to the same destination. */
.contact-card {
  cursor: pointer;
}
.contact-card__cover {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.contact-card md-outlined-button {
  position: relative;
  z-index: 2;
}
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.5rem;
  max-width: 860px;
  margin: 0 auto;
}

/* =========================================================
   CASE CARDS — white, 28px radius, lift on hover
========================================================= */
.case-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 2vw, 28px);
  margin-top: 1.5rem;
}
@media (min-width: 860px) {
  .case-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.case-grid.case-grid--two {
  grid-template-columns: 1fr;
  gap: clamp(16px, 2vw, 28px);
}
@media (min-width: 860px) {
  .case-grid.case-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.case-card {
  --md-elevation-level: 0;
  position: relative;
  border: none;
  border-radius: var(--radius-card);
  background: var(--card);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition:
    transform 0.45s var(--ease-spring),
    box-shadow 0.45s var(--ease-spring);
}
.case-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lift);
  background: var(--card);
}
.case-card__media {
  display: block;
  text-decoration: none;
  overflow: hidden;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  background: #dce8dd;
  aspect-ratio: 4 / 3;
}
.case-card__media img,
.case-card__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 450ms var(--ease-spring);
}
.case-card:hover .case-card__media img,
.case-card:hover .case-card__media video {
  transform: scale(1.03);
}
.case-card__body {
  padding: 1.5rem 1.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 1;
}
.case-card__kicker {
  font-size: 0.75rem;
  color: var(--muted);
  letter-spacing: 0.1em;
  font-weight: 500;
  text-transform: uppercase;
}
.case-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.8vw, 1.75rem);
  line-height: 1.15;
  margin: 0;
  font-weight: 680;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.case-card__caption {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--body-ink);
  flex: 1;
}
.case-card__caption strong {
  font-weight: 700;
  color: var(--ink); /* not the link green — the whole card is already the link */
}

.case-card__actions {
  margin-top: auto;
  padding-top: 0.5rem;
}
.case-card__actions md-filled-button,
.case-card__actions md-outlined-button {
  width: 100%;
}

/* Whole-card click target: an invisible link stretched over the card.
   Hidden from assistive tech (aria-hidden + tabindex="-1") because the
   image link and "View Case Study" button already provide a properly
   labeled, keyboard-reachable link to the same destination; this overlay
   only extends the click/tap area for pointer users. .case-card__media
   and .case-card__actions get their own stacking context so they stay
   independently clickable above it. */
.case-card__cover {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.case-card__media,
.case-card__actions {
  position: relative;
  z-index: 2;
}
.case-card {
  cursor: pointer;
}

/* ── CASE CARD — featured horizontal variant ──────────── */
.case-card--featured {
  --md-elevation-level: 0;
  flex-direction: row;
  background: var(--card);
}
.case-card--featured .case-card__media {
  flex: 0 0 55%;
  aspect-ratio: unset;
  border-radius: var(--radius-card) 0 0 var(--radius-card);
}
.case-card--featured .case-card__body {
  padding: 2.25rem 2.25rem;
  justify-content: center;
}
.case-card--featured .case-card__title {
  font-size: clamp(1.5rem, 2.2vw, 2rem);
}
@media (max-width: 767px) {
  .case-card--featured {
    flex-direction: column;
  }
  .case-card--featured .case-card__media {
    flex: none;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
  }
}

/* case-block heading labels */
.case-section .case-block {
  max-width: var(--measure);
  margin-left: 0;
  margin-right: 0;
  text-align: left;
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
  color: var(--muted);
}
.case-section .checklist + p {
  margin-top: 1.25rem;
}

/* =========================================================
   PAGE NAV (cross-page explore nudge)
========================================================= */
.page-nav {
  max-width: var(--max);
  margin: 0 auto;
  padding: 2.5rem 1.25rem;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  flex-wrap: wrap;
  flex-direction: row;
}
.page-nav__label {
  white-space: nowrap;
  text-align: left;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
}
.page-nav__links {
  display: flex;
  justify-content: flex-start;
  gap: 1.75rem;
  flex-wrap: wrap;
}
.page-nav__link {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--green-accent);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.page-nav__link:hover {
  color: var(--green-accent-hover);
}

/* =========================================================
   CLOSING CTA
========================================================= */
.closing-cta {
  max-width: var(--max);
  margin: 0 auto;
  padding: 3rem 1.25rem 3rem;
  text-align: center;
}
.closing-cta__label {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1rem;
}

/* =========================================================
   FOOTER — dark green field
========================================================= */
.site-footer {
  max-width: none;
  margin: 0;
  background: var(--green-deep);
  color: var(--on-dark-muted);
  padding: clamp(36px, 5vh, 56px) var(--pad-x);
  border-top: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.875rem;
  font-weight: 400;
}
.site-footer .social {
  display: flex;
  gap: 22px;
}
.site-footer .social a {
  color: var(--on-dark);
  font-weight: 400;
  transition: color 150ms var(--ease-out);
}
.site-footer .social a:hover {
  color: var(--on-dark-muted);
}

/* =========================================================
   COOKIE BANNER
========================================================= */
.cookie-banner {
  position: fixed;
  inset: auto 1.25rem 1.25rem 1.25rem;
  max-width: 460px;
  padding: 1.25rem 1.5rem;
  background: var(--card);
  border: none;
  box-shadow: var(--shadow-lift);
  border-radius: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  z-index: 2200;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--body-ink);
}
.cookie-banner.hidden {
  display: none;
}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 960px) {
  .about-page .about-hero {
    grid-template-columns: 1fr;
  }
  .about-photo {
    position: static;
    height: 280px;
  }
  .facts-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  body {
    overflow-x: hidden;
  }
  .hero-type {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .site-header {
    padding-inline: 1rem;
  }
  .nav-toggle {
    display: block;
  }
  .site-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 5.5rem 1.5rem 2rem;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    background: var(--green-deep);
    z-index: 1400;
  }
  .site-nav.open {
    display: flex;
  }
  .site-nav .nav-link {
    width: 100%;
    padding: 0.85rem 0;
    font-size: 1.0625rem;
    border-radius: 0;
    border-bottom: 1px solid rgba(234, 246, 236, 0.14);
    color: var(--on-dark-nav);
  }
  .site-nav .nav-link.active {
    color: var(--on-dark);
    font-weight: 500;
    background: none;
  }
  .site-nav md-filled-button {
    width: 100%;
    margin-top: 1rem;
  }

  .facts-grid {
    grid-template-columns: 1fr;
  }
  .contact-grid {
    grid-template-columns: 1fr;
  }
  .site-footer {
    flex-direction: column;
    gap: 1.25rem;
    align-items: flex-start;
  }
}

/* =========================================================
   UTILITIES
========================================================= */
.skip-link {
  position: absolute;
  top: -3rem;
  left: 1rem;
  z-index: 2000;
  padding: 0.6rem 1rem;
  background: var(--card);
  color: var(--green-heading);
  border-radius: var(--radius-pill);
  font-weight: 500;
  box-shadow: var(--shadow-card);
  transition: top 150ms var(--ease-out);
}
.skip-link:focus {
  top: 1rem;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 3px solid var(--green-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Prose links — permanent underline, not just on hover, so color is
   never the only signal that something is clickable (affordance fix,
   scoped to light body-copy containers, not the dark hero bands,
   which style their own links separately). */
.case-section a:not([class]),
.text-column a:not([class]),
.checklist a:not([class]),
.recommendation a:not([class]) {
  color: var(--green-accent);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.case-section a:not([class]):hover,
.text-column a:not([class]):hover,
.checklist a:not([class]):hover,
.recommendation a:not([class]):hover {
  color: var(--green-accent-hover);
}

/* =========================================================
   ROLE SPLIT — Hands-on vs Leadership (case-hello)
========================================================= */
.role-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 2rem 0 0;
  border: none;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--card);
  box-shadow: var(--shadow-card);
}
.role-split__col {
  padding: clamp(24px, 3vw, 40px);
}
.role-split__col--handson {
  border-right: 1px solid #e2ece4;
  background: var(--card);
}
.role-split__col--leader {
  background: var(--card);
}
.role-split__label {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--green-heading);
  margin: 0 0 0.3rem;
}
.role-split__phase {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1.25rem;
}
.role-split__footnote {
  font-size: 0.875rem;
  color: var(--muted);
  margin: 0.75rem 0 2rem;
  padding: 0;
}
@media (max-width: 780px) {
  .role-split {
    grid-template-columns: 1fr;
  }
  .role-split__col--handson {
    border-right: none;
    border-bottom: 1px solid #e2ece4;
  }
}

/* =========================================================
   FEATURED WORK (homepage)
========================================================= */
.featured-work {
  padding: clamp(48px, 7vh, 88px) 1.25rem clamp(40px, 6vh, 72px);
  max-width: calc(var(--max) + 2.5rem);
  margin: 0 auto;
}
.featured-work__eyebrow {
  margin: 0 0 clamp(24px, 4vh, 40px);
}
.featured-work__cta {
  margin: 2.75rem 0 0;
  text-align: center;
}

/* ── LEADERSHIP SIGNALS — soft green full-bleed band ──── */
.leadership-signals {
  max-width: none;
  margin: 0;
  background: var(--bg-band);
  border-top: none;
  padding: clamp(48px, 7vh, 88px) max(1.25rem, calc((100% - var(--max)) / 2));
}

.leadership-signals__eyebrow {
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 500;
  color: #4a5b4f;
  margin: 0 0 clamp(24px, 4vh, 40px);
}

.leadership-signals__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 48px);
}

@media (max-width: 860px) {
  .leadership-signals__grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
}

.signal-item {
  border-top: none;
  padding-top: 0;
}

.signal-item__heading {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 680;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0 0 0.75rem;
  color: var(--green-heading);
}

.signal-item__body {
  font-size: 0.9375rem;
  color: #33423a;
  line-height: 1.6;
  margin: 0;
}

.leadership-signals__cta {
  margin-top: clamp(28px, 4vh, 44px);
  text-align: center;
}

/* =========================================================
   TESTIMONIALS / SOCIAL PROOF — one large quote at a time
========================================================= */
.testimonials {
  padding: clamp(48px, 7vh, 88px) 1.25rem clamp(40px, 6vh, 72px);
  max-width: calc(var(--max) + 2.5rem);
  margin: 0 auto;
  border-top: none;
}
.testimonials__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: clamp(24px, 4vh, 40px);
  flex-wrap: wrap;
  gap: 1rem;
}
.testimonials__controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.testimonials__btn {
  --md-icon-button-icon-color: var(--green-heading);
}
.testimonials__counter {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--muted);
  min-width: 44px;
  text-align: center;
  letter-spacing: 0.02em;
}
.testimonials__slider {
  overflow: hidden;
}
.testimonials__track {
  display: flex;
  transition: transform 0.42s var(--ease-out);
}
.testimonial {
  flex: 0 0 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border-left: none;
}
.testimonial__quote {
  max-width: 880px;
  font-family: var(--font-display);
  font-weight: 480;
  font-size: clamp(1.25rem, 2.2vw, 1.875rem);
  line-height: 1.4;
  letter-spacing: -0.015em;
  color: var(--green-heading);
  margin: 0 0 1.75rem;
  min-height: 5.6em;
}
.testimonial__footer {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.testimonial__name {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.testimonial__role {
  font-size: 0.875rem;
  color: var(--muted);
}
.testimonials__cta,
:is(.text-column, .case-section) > .testimonials__cta {
  margin-top: 2.75rem;
  margin-left: auto;
  margin-right: auto;
  max-width: none;
  text-align: center;
}

/* =========================================================
   RECOMMENDATIONS PAGE — stacked large quotes
========================================================= */
.recommendations-list {
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 5vh, 4rem);
}
.recommendation {
  padding: clamp(24px, 3.5vw, 44px);
  border-left: none;
  background: var(--card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.recommendation__quote {
  font-family: var(--font-display);
  font-weight: 480;
  font-size: clamp(1.125rem, 1.8vw, 1.5rem);
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--green-heading);
  margin: 0 0 1.25rem;
}
.recommendation__footer {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.recommendation__name {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.recommendation__role {
  font-size: 0.875rem;
  color: var(--muted);
}

/* ── READING PROGRESS BAR ────────────────────────────── */
#reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: var(--mint);
  z-index: 1600;
  pointer-events: none;
}

/* ── METRICS BAR ──────────────────────────────────────── */
.metrics-bar {
  --md-elevation-level: 0;
  position: relative;
  display: flex;
  background: var(--bg-band);
  border-radius: var(--radius-card);
  box-shadow: none;
  margin: 2rem 0;
}
.metrics-bar__item {
  flex: 1;
  padding: clamp(28px, 4vw, 48px) clamp(20px, 3vw, 40px);
  border-right: none;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.metrics-bar__number {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 3.6vw, 3.25rem);
  font-weight: 740;
  color: var(--green-heading);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.metrics-bar__label {
  font-size: 0.875rem;
  color: #33423a;
  line-height: 1.45;
}
@media (max-width: 640px) {
  .metrics-bar {
    flex-direction: column;
  }
  .metrics-bar__item {
    border-bottom: none;
    padding-block: 1.25rem;
  }
  .metrics-bar__item:first-child {
    padding-top: 2rem;
  }
  .metrics-bar__item:last-child {
    padding-bottom: 2rem;
  }
}

/* ─────────────────────────────────────────
   iPhone 16 Frame (unchanged from v10)
───────────────────────────────────────── */
.iphone-frame {
  display: flex;
  justify-content: center;
  padding: 2rem 0;
}
.iphone-outer {
  position: relative;
  width: 320px;
  background: #1a1a1a;
  border-radius: 54px;
  padding: 14px;
  box-shadow:
    0 0 0 1px #3a3a3a,
    0 0 0 3px #1a1a1a,
    0 0 0 4px #444,
    0 30px 80px rgba(0, 0, 0, 0.5),
    0 10px 30px rgba(0, 0, 0, 0.3);
}
.iphone-side-buttons {
  position: absolute;
  left: -4px;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.iphone-btn-silent {
  width: 4px;
  height: 28px;
  background: #3a3a3a;
  border-radius: 2px 0 0 2px;
}
.iphone-btn-vol {
  width: 4px;
  height: 48px;
  background: #3a3a3a;
  border-radius: 2px 0 0 2px;
}
.iphone-btn-power {
  position: absolute;
  right: -18px;
  top: 40px;
  width: 4px;
  height: 72px;
  background: #3a3a3a;
  border-radius: 0 2px 2px 0;
}
.iphone-screen {
  background: #000;
  border-radius: 42px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}
.iphone-statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px 0;
  height: 50px;
  background: #000;
  position: relative;
  flex-shrink: 0;
}
.iphone-time {
  font-size: 15px;
  font-weight: 600;
  color: white;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing: -0.3px;
}
.iphone-dynamic-island {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 34px;
  background: #000;
  border-radius: 20px;
  box-shadow: 0 0 0 2px #1a1a1a;
}
.iphone-status-icons {
  display: flex;
  align-items: center;
  gap: 6px;
}
.iphone-video-container {
  flex: 1;
  background: #000;
  overflow: hidden;
  height: 560px;
}
.iphone-video-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.iphone-homebar {
  height: 30px;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.iphone-homebar::after {
  content: "";
  width: 120px;
  height: 5px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}

/* ── ABOUT PAGE — beliefs list dividers ───────────────── */
.about-page .case-section .checklist li {
  margin: 0.85rem 0;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--border);
}
.about-page .case-section .checklist li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* =========================================================
   REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* =========================================================
   PRINT
========================================================= */
@media print {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  .site-header,
  .cookie-banner,
  .nav-toggle {
    display: none !important;
  }
  .hero-type,
  .page-hero,
  .case-hero,
  .site-footer {
    background: #fff !important;
    color: #000 !important;
  }
}

/* =========================================================
   WIDE MEDIA BREAKOUT
   Prose stays at --measure inside the --max container; galleries
   and stat/role cards extend symmetrically past it (up to 130px
   per side, ~1100px total), echoing the full-bleed hero bands.
   .case-media (single photo/video figures) is deliberately left
   out: those show the image at its natural, uncropped ratio
   (see .case-media img/video, object-fit: contain), so they stay
   contained and centered like .phone-shot rather than stretched
   edge to edge. The max(0px, …) clamp disables the breakout as
   soon as the viewport can no longer spare the space, so
   nothing ever overflows on smaller screens.
========================================================= */
.media-grid:not(.media-grid--compact),
.role-split,
.metrics-bar {
  margin-inline: calc(
    -1 * max(0px, min(130px, 50vw - (var(--max) / 2) - 1.25rem))
  );
}

/* =========================================================
   SHORT-VIEWPORT FOLD FIT (homepage hero)
   Targets height, not width, so it catches landscape phones and
   short desktop windows alike. The headline copy is fixed-length
   by design, so this compresses padding, line spacing, and the
   <br><br> paragraph gaps (not the text itself) to keep the
   header + full hero + CTAs within one screen as often as
   possible without shrinking the copy.
========================================================= */
@media (max-height: 700px) {
  .site-header {
    padding-block: 10px;
  }
  .hero-type {
    padding-top: 16px;
    padding-bottom: 20px;
  }
  .hero-type__headline {
    font-size: clamp(1.25rem, 4.2dvh, 3.25rem);
    line-height: 1.15;
  }
  .hero-type__headline br {
    margin-top: 0.12em;
  }
  .hero-type__actions {
    margin-top: 14px;
  }
}