/*
 * Hynes Law Group — Design System Tokens
 *
 * Source of truth: Figma "Hynes Law Group — Website" (sMs2HpkDuhmltfGi5JgQYl),
 * section "Jun 28" (page UI). Designs are pixel-accurate at 1440.
 *
 * Approach: fluid per-band cqw scaling (module 01b), THREE bands (variant A):
 * base = desktop ≥1024 (anchor 1440, px ÷ 14.4); ≤1023 = tablet (anchor 768, ÷ 7.68);
 * ≤639 = mobile (anchor 375, ÷ 3.75). Sizes are pixel-true AT the anchors and
 * interpolate fluidly inside each band. The container caps at --page-max (1600).
 * Band-switched vars: --fs-* type ramp + --gutter/--section-py/--card-pad/--r-*.
 * WARNING: never write star-slash as comment TEXT — it terminates the comment early
 * and the minifier silently DROPS the rules that follow (bit us once with "--fs-star").
 *
 * The matching Tailwind utility tokens live in the @theme block in
 * app/assets/tailwind/application.css. Admin theme lives in admin_theme.css and is
 * NOT affected by these tokens.
 */

/* ── Brand fonts — self-hosted (latin subset), no Google round-trip, no FOUT ── */
@font-face {
  font-family: "Sentient";
  font-style: normal;
  font-weight: 200 700; /* variable */
  font-display: swap;
  src: url("/fonts/sentient-var.woff2") format("woff2");
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900; /* variable */
  font-display: swap;
  src: url("/fonts/geist-var.woff2") format("woff2");
}
/* Display family = ANCIZAR SERIF site-wide (Anton, 31 Jul — replaced Literata, whose
   woff2s stay on disk for a cheap revert). Variable file (wght 300–900): Light 300 for
   all headings, Regular 400 for statements/quotes. */
@font-face {
  font-family: "Ancizar Serif";
  font-style: normal;
  font-weight: 300 900; /* variable */
  font-display: swap;
  src: url("/fonts/ancizar-serif.woff2") format("woff2");
}

:root {
  /* ── Colors · Surfaces (Figma paint styles) ─────────────────────────── */
  --paper: #FAFAF9;      /* Surface/Paper — page background */
  --parchment: #EFEEDF;  /* Surface/Parchment — CTA band, warm blocks */
  --sage: #DFE4C6;       /* Surface/Sage — hover / accent surface */
  --mist: #D6ECE9;       /* Surface/Mist — step cards, cool accents */

  /* ── Colors · Ink ───────────────────────────────────────────────────── */
  --ink: #131410;        /* Ink/Primary — body text on light */
  --charcoal: #232120;   /* Ink/Charcoal — dark cards */
  --evergreen: #1E2E2D;  /* Ink/Evergreen — dark feature cards, hover card */

  /* Derived ink opacities (used across the designs on light surfaces) */
  --ink-70: rgba(19, 20, 16, 0.70);
  --ink-50: rgba(19, 20, 16, 0.50);
  /* …and on dark surfaces */
  --cream: #FAFAF9;
  --cream-70: rgba(250, 250, 249, 0.70);
  --cream-50: rgba(250, 250, 249, 0.50);

  --divider: rgba(19, 20, 16, 0.15);        /* 1px hairlines on light */
  --divider-dark: rgba(250, 250, 249, 0.20); /* 1px hairlines on dark */

  /* ── Type families ──────────────────────────────────────────────────── */
  --font-display: "Ancizar Serif", "Iowan Old Style", Georgia, serif; /* Literata retired 31 Jul; Sentient 30 Jul */
  --font-body: "Geist", ui-sans-serif, system-ui, sans-serif;
  --track-display: -0.02em; /* −2% (Figma 470:23409, 31 Jul; was −3%) */

  /* ── Layout (desktop band ≥1024, anchor 1440 — px ÷ 14.4) ───────────── */
  --page-max: 1600px;         /* content stops growing here (client: 1920 felt huge on 27") */
  --gutter: 2.7778cqw;        /* 40 @1440 — page side gutter */
  --section-py: 8.3333cqw;    /* 120 @1440 — standard section padding */
  --card-pad: 1.6667cqw;      /* 24 @1440 — card inner padding */
  --r-card: 0.8333cqw;        /* 12 @1440 — dark feature card radius */
  --r-btn: 0.2778cqw;         /* 4  @1440 — buttons, light cards (r4 ONLY, no pills) */

  /* ── Fluid type ramp — band-switched (see the band blocks below). Desktop = Figma
     values @1440; tablet/mobile anchors are OUR design (no Figma adaptives): px ÷ 14.4. */
  --fs-hero: 6.3889cqw;      /* 92 */
  --fs-cta: 5cqw;            /* 72 */
  --fs-page: 3.8889cqw;      /* 56 */
  --fs-section: 2.7778cqw;   /* 40 */
  --fs-quote: 2.5cqw;        /* 36 */
  --fs-statement: 2.2222cqw; /* 32 */
  --fs-card: 1.6667cqw;      /* 24 */
  --fs-step: 1.3889cqw;      /* 20 */
  --fs-footer-h: 1.1111cqw;  /* 16 */
  --fs-lead: 1.25cqw;        /* 18 */
  --fs-body-l: 1.1111cqw;    /* 16 */
  --fs-body: 0.9722cqw;      /* 14 */
  --fs-caption: 0.8333cqw;   /* 12 */
  --fs-fine: 0.6944cqw;      /* 10 */
  --fs-eyebrow: 0.8333cqw;   /* 12 */
  --fs-label: 0.9722cqw;     /* 14 */
}

/* ═══ ADAPTIVE BANDS (variant A, client-approved): base = desktop ≥1024 (anchor 1440),
   ≤1023 = tablet (anchor 768, px ÷ 7.68), ≤639 = mobile (anchor 375, px ÷ 3.75).
   Designs are pixel-true AT the anchors and interpolate fluidly inside each band. ═══ */
@media (max-width: 1023px) { /* TABLET ÷7.68 */
  :root {
    --gutter: 3.125cqw;      /* 24 */
    --section-py: 11.4583cqw;/* 88 */
    --card-pad: 3.125cqw;    /* 24 */
    --r-card: 1.5625cqw;     /* 12 */
    --r-btn: 0.5208cqw;      /* 4 */
    --fs-hero: 8.3333cqw;      /* 64 */
    --fs-cta: 7.2917cqw;       /* 56 */
    --fs-page: 5.7292cqw;      /* 44 */
    --fs-section: 4.4271cqw;   /* 34 */
    --fs-quote: 3.9063cqw;     /* 30 */
    --fs-statement: 3.5156cqw; /* 27 */
    --fs-card: 2.8646cqw;      /* 22 */
    --fs-step: 2.474cqw;       /* 19 */
    --fs-footer-h: 2.0833cqw;  /* 16 */
    --fs-lead: 2.2135cqw;      /* 17 */
    --fs-body-l: 2.0833cqw;    /* 16 */
    --fs-body: 1.8229cqw;      /* 14 */
    --fs-caption: 1.5625cqw;   /* 12 */
    --fs-fine: 1.3021cqw;      /* 10 */
    --fs-eyebrow: 1.5625cqw;   /* 12 */
    --fs-label: 1.8229cqw;     /* 14 */
  }
}
@media (max-width: 639px) { /* MOBILE ÷3.75 */
  :root {
    --gutter: 4.2667cqw;     /* 16 */
    --section-py: 17.0667cqw;/* 64 */
    --card-pad: 5.3333cqw;   /* 20 */
    --r-card: 3.2cqw;        /* 12 */
    --r-btn: 1.0667cqw;      /* 4 */
    --fs-hero: 11.7333cqw;     /* 44 */
    --fs-cta: 10.6667cqw;      /* 40 */
    --fs-page: 9.0667cqw;      /* 34 */
    --fs-section: 7.4667cqw;   /* 28 */
    --fs-quote: 6.4cqw;        /* 24 */
    --fs-statement: 5.8667cqw; /* 22 */
    --fs-card: 5.3333cqw;      /* 20 */
    --fs-step: 4.8cqw;         /* 18 */
    --fs-footer-h: 4cqw;       /* 15 */
    --fs-lead: 4.2667cqw;      /* 16 */
    --fs-body-l: 4cqw;         /* 15 — readability floor for the elderly audience */
    --fs-body: 3.7333cqw;      /* 14 */
    --fs-caption: 3.2cqw;      /* 12 */
    --fs-fine: 2.6667cqw;      /* 10 */
    --fs-eyebrow: 3.2cqw;      /* 12 */
    --fs-label: 3.7333cqw;     /* 14 */
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DS PRIMITIVES (shared by sections + admin styleguide previews)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── UI / Button (Figma 57:2076) — rectangular r4, diamond glyph, Size Large/Small ×
   Theme Dark/Light/Outline. Large: px18/py16; Small: px14/py12; gap 12; label Geist
   Medium 14/120%. Diamond 8×8 — sage on Dark, charcoal on Light/Outline.
   Hover states are ours (Figma defines none): Dark lightens toward charcoal-green,
   Light tints sage, Outline solidifies its border. Render via components/button. ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.8333cqw;                              /* 12 */
  padding: 1.1111cqw 1.25cqw;                  /* 16 / 18 */
  border-radius: var(--r-btn);
  font-family: var(--font-body);
  font-weight: 500; font-size: var(--fs-label); line-height: 1.2; /* UI/Button 14 */
  white-space: nowrap; text-decoration: none; cursor: pointer; border: 0;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn--sm { padding: 0.8333cqw 0.9722cqw; }     /* 12 / 14 */
.btn__diamond { width: 0.5556cqw; height: 0.5556cqw; flex-shrink: 0; transition: transform 0.45s cubic-bezier(0.33, 1, 0.68, 1); } /* 8; hover spin below */
.btn:hover .btn__diamond { transform: rotate(180deg); } /* a small delight (client) — the diamond lands looking identical, the spin is the point */
.btn--dark { background: var(--evergreen); color: var(--paper); }
.btn--dark .btn__diamond { color: var(--sage); }
.btn--dark:hover { background: #2E4644; } /* LIGHTER evergreen — darker was invisible (client) */
.btn--light { background: var(--paper); color: var(--charcoal); }
.btn--light:hover { background: var(--sage); }
.btn--outline { background: transparent; color: var(--charcoal); border: 1px solid rgba(35, 33, 32, 0.3); padding: calc(1.1111cqw - 1px) calc(1.25cqw - 1px); }
.btn--outline.btn--sm { padding: calc(0.8333cqw - 1px) calc(0.9722cqw - 1px); }
.btn--outline:hover { border-color: var(--charcoal); }

.home-area__heading { text-wrap: balance; } /* no hanging conjunction in the 2-line wrap (client, 31 Jul) */
/* Every display-type element tracks −3% (the .font-display utility only sets the family). */
/* Display weight = LIGHT 300 site-wide (Anton, 30 Jul round 3): card titles, section and
   hero headings, service names — one step thinner. The EXCEPTIONS stay Regular 400: the
   long statement texts ("We focus on lasting relationships…") and quotes — running display
   copy needs the weight. Order matters: the exception rule must follow .font-display. */
.font-display { letter-spacing: var(--track-display); font-weight: 300; }
.text-statement, .text-quote { font-weight: 400; }
/* Home hero H1: back on Sentient with everyone else (the Literata experiment is retired,
   the woff2 stays on disk for a cheap re-try) — Light like all headings, 100 on desktop. */
.home-hero__title { font-size: 6.9444cqw; } /* 100 (desktop only; band re-statements below) */

/* ── UI / Eyebrow Lockup — diamond + Geist 12 label (no caps, no mono) ── */
.eyebrow { display: inline-flex; align-items: center; gap: 0.5556cqw; } /* 8 */
.eyebrow__diamond { width: 0.8333cqw; height: 0.8333cqw; flex-shrink: 0; } /* 12 */
.eyebrow__label {
  font-family: var(--font-body); font-size: var(--fs-eyebrow); line-height: 1.5; /* UI/Eyebrow 12 */
  letter-spacing: 0.02em;
}

/* ── Arrow swap (components/arrow_swap) — the ↗ flies out top-right, a twin slides in
   from bottom-left, on hover of the enclosing <a>/<button>. Container is sized by the
   caller's class; both icons fill it. ── */
.arrow-swap { position: relative; display: block; overflow: hidden; }
.arrow-swap .ds-icon {
  position: absolute; inset: 0; width: 100%; height: 100%;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.arrow-swap__b { transform: translate(-150%, 150%); }
a:hover .arrow-swap .arrow-swap__a, button:hover .arrow-swap .arrow-swap__a { transform: translate(150%, -150%); }
a:hover .arrow-swap .arrow-swap__b, button:hover .arrow-swap .arrow-swap__b { transform: translate(0, 0); }

/* ── Descriptive-text wrapping — site-wide orphan control. Headings use
   text-wrap: balance on their own classes, NOT pretty. ── */
.body-copy, .section-sub { text-wrap: pretty; }

/* ═══════════════════════════════════════════════════════════════════════════
   SCALE MECHANICS (kept from template — module 01b)
   ═══════════════════════════════════════════════════════════════════════════ */

/* All fluid sizing uses cqw (1% of the nearest query container). .page-scale wraps the
   page content; when .is-capped (set per page via @scale_capped) it caps at --page-max and
   centres, so cqw — and therefore every font/space/size — freezes there while the content
   stays centred. The fixed header is outside .page-scale → its own cap below. */
.page-scale.is-capped { container-type: inline-size; max-width: var(--page-max); margin-inline: auto; }
.scale-capped .site-header__cap { container-type: inline-size; max-width: var(--page-max); margin-inline: auto; }

/* Full-bleed: break an element out of the capped .page-scale container to span the whole
   viewport width. Below the cap it's a no-op. vw here is intentional (viewport, not cqw). */
.full-bleed { width: 100vw; margin-inline: calc(50% - 50vw); }

/* Bleed a section's SOLID background to the screen edges while its content stays capped:
   a ::before layer stretched to the viewport BEHIND the content (isolation keeps it above
   the page bg). No clip-path — so reveal animations are never cut at the section edges.
   Set --bleed per section. (Photo/gradient sections use .full-bleed + an inner cap div.) */
.bleed { position: relative; isolation: isolate; }
.bleed::before { content: ""; position: absolute; inset: 0 calc(50% - 50vw); background: var(--bleed); z-index: -1; }

/* ═══════════════════════════════════════════════════════════════════════════
   MOTION PRIMITIVES (kept from template)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Seamless marquee — TWO+ identical .marquee__group tracks side by side; each
   animates translateX(0 → -100%) of its OWN width, so the loop is pixel-exact.
   marquee_controller sets --marquee-duration = groupWidth / speed. Each group must
   be ≥ the viewport wide (render enough copies) so no empty gap appears. ── */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}
.marquee { display: flex; width: 100%; overflow: hidden; }
.marquee__group {
  display: flex; align-items: center; flex-shrink: 0;
  animation: marquee var(--marquee-duration, 40s) linear infinite;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .marquee__group { animation: none; }
}

/* ── Reveal-on-view — single shared reveal primitive (reveal_controller).
   Variants via data-reveal: mask (text slides from behind a clip), rise (drift up +
   fade), fade/media. Hidden state gated on .reveal-on (JS present); disabled under
   reduced motion. Delay: --reveal-base + --reveal-i × step. ── */
:root { --reveal-step: 0.12s; --reveal-ease: cubic-bezier(0.22, 1, 0.36, 1); } /* unhurried — elderly audience */
/* Hidden state fades via `filter: opacity()` — NOT the `opacity` property. The property
   would override an element's own designed opacity (fine prints .5, subs .6…): the item
   revealed to FULL ink, then visibly dimmed when the cleanup released it (client caught
   it twice — CTA note, About fine print). filter multiplies with the element's own
   opacity, so dim text stays dim through the whole entrance. */
.reveal-on [data-reveal]:not([data-reveal~="mask"]) { filter: opacity(0); transition: filter 0.95s ease, transform 1.25s var(--reveal-ease); transition-delay: calc(var(--reveal-base, 0s) + var(--reveal-i, 0) * var(--reveal-step)); will-change: transform, filter; }
/* will-change pre-promotes the layer while the item WAITS (kills the first-frame hitch
   when the transition kicks in mid-scroll); the post-reveal cleanup strips the attribute,
   so these rules stop matching and the layer is released — no standing memory cost. */
.reveal-on [data-reveal~="rise"] { transform: translateY(1.6em); }
.reveal-on [data-reveal~="media"] { transform: translateY(28px) scale(0.965); }
/* pad/-margin widens the clip window BELOW the baseline so deep descenders (Faculty
   Glyphic g/y/p) are never cut — 0.25em covers the font's descender depth. */
.reveal-on [data-reveal~="mask"] { overflow: clip; padding-bottom: 0.25em; margin-bottom: -0.25em; }
.reveal-line { display: block; }
.reveal-on [data-reveal~="mask"] > * { display: block; filter: opacity(0); transform: translateY(110%); transition: transform 1.35s var(--reveal-ease), filter 1s ease; transition-delay: calc(var(--reveal-base, 0s) + var(--reveal-i, 0) * var(--reveal-step)); will-change: transform, filter; }
.reveal-on [data-reveal].is-in:not([data-reveal~="mask"]) { filter: none; transform: none; }
.reveal-on [data-reveal~="mask"].is-in > * { filter: none; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal-on [data-reveal], .reveal-on [data-reveal] > * { filter: none !important; transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SITE HEADER (Figma Site/Nav 33:272 + solid state 270:19601) — fixed bar, 88 tall,
   px40/py26. Transparent over the hero (wordmark logo); .site-header--solid = paper bg +
   hairline + monogram lockup. .site-header--hidden slides it away (scroll down).
   States toggled by header_controller.
   ═══════════════════════════════════════════════════════════════════════════ */
.site-header {
  position: fixed; inset-inline: 0; top: 0; z-index: 50;
  background: transparent;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.25s ease, border-color 0.25s ease;
  border-bottom: 1px solid transparent;
}
.site-header--hidden { transform: translateY(-101%); }
.site-header--solid { background: var(--paper); border-bottom-color: var(--divider); }
.site-header__bar {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  height: 6.1111cqw;             /* 88 (py 26) over the hero */
  padding-inline: var(--gutter); /* 40 */
  transition: height 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Solid (returning) bar is more compact: py 26 → 16, i.e. 88 → 68 tall. */
.site-header--solid .site-header__bar { height: 4.7222cqw; }
.site-header__home { display: block; flex-shrink: 0; }
.site-header__logo { display: block; height: 2.2222cqw; width: auto; } /* monogram lockup 212×32 — the ONE header logo */
.site-header__nav {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 2.2222cqw; /* 32 */
}
.site-header__link, .site-header__phone {
  font-family: var(--font-body); font-size: var(--fs-label); line-height: 1.3; /* UI/Label 14 */
  color: var(--evergreen); text-decoration: none; white-space: nowrap;
  transition: opacity 0.2s ease;
}
.site-header__link:hover, .site-header__phone:hover { opacity: 0.6; }
/* Phone + Book on ONE paper plate (client: the number was getting lost; Figma 361:22288) —
   bg paper, 20% hairline, r6, 24 left inset, 2px ring around the button. */
.site-header__right {
  display: flex; align-items: center; gap: 1.6667cqw; /* 24 */
  padding: 2px 2px 2px 1.6667cqw;
  /* Glass, not flat white (Figma 418:22654 — Anton's redesign after Charlie's "not so
     prominent"): Paper at 20% + background blur 4, hairline unchanged. */
  background: rgba(250, 250, 249, 0.2);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); /* design says 4 — doubled per Anton (30 Jul) */
  border: 1px solid rgba(35, 33, 32, 0.2); border-radius: 0.4167cqw; /* 6 */
}
/* Over a hero (transparent header) the glass plate runs borderless (Anton, 30 Jul);
   the hairline returns with the scrolled solid bar. */
.site-header:not(.site-header--solid) .site-header__right { border-color: transparent; }
/* Dark page-top theme (About — evergreen first band): parchment chrome + paper Book button
   while transparent. The scrolled SOLID state and the open drawer fall back to the normal
   paper bar, so every override is scoped :not(--solid):not(--drawer-open). */
.site-header--dark:not(.site-header--solid):not(.site-header--drawer-open) .site-header__link,
/* dark theme: the plate is GLASS now (20% paper), so the phone needs light ink too */
.site-header--dark:not(.site-header--solid):not(.site-header--drawer-open) .site-header__phone,
.site-header--dark:not(.site-header--solid):not(.site-header--drawer-open) .site-header__burger { color: var(--parchment); }
.site-header--dark:not(.site-header--solid):not(.site-header--drawer-open) .site-header__logo { filter: brightness(0) invert(1); } /* static-SVG lockup → paper */
.site-header--dark:not(.site-header--solid):not(.site-header--drawer-open) .btn--dark { background: var(--paper); color: var(--charcoal); }
.site-header--dark:not(.site-header--solid):not(.site-header--drawer-open) .btn--dark:hover { background: var(--sage); }
.site-header--dark:not(.site-header--solid):not(.site-header--drawer-open) .btn--dark .btn__diamond { color: var(--evergreen); }

/* Mobile burger + full-screen drawer (<640 — see the mobile band block). */
.site-header__burger {
  display: none; align-items: center; justify-content: center;
  width: 11.7333cqw; height: 11.7333cqw; margin-right: -2.1333cqw; /* 44 tap target, icon optically flush */
  background: none; border: 0; padding: 0; color: var(--evergreen); cursor: pointer;
}
/* Morphing burger — two bars rotate into an X (one element for both states). */
.site-header__burger-lines { position: relative; display: block; width: 22px; height: 10px; } /* fixed px — fractional cqw made the two bars rasterize differently */
.site-header__burger-lines span {
  position: absolute; left: 0; right: 0; height: 2px; background: currentColor;
  /* 2px EXACTLY (client, ×2): 1.5px landed on different device-pixel boundaries, so the
     two bars rasterized with different weights. Box 10px tall → resting bars sit on
     integer rows (0–2 / 8–10) and the X state centres both at 4–6. */
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), top 0.3s cubic-bezier(0.22, 1, 0.36, 1), bottom 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.site-header__burger-lines span:first-child { top: 0; }
.site-header__burger-lines span:last-child { bottom: 0; }
.site-header--drawer-open .site-header__burger-lines span:first-child { top: calc(50% - 1px); transform: rotate(45deg); }
.site-header--drawer-open .site-header__burger-lines span:last-child { bottom: calc(50% - 1px); transform: rotate(-45deg); }
.site-header--drawer-open { background: var(--paper); }
/* Drawer slides down; its items cascade in (links → buttons) once open. */
.site-header__drawer {
  position: fixed; inset: 0; z-index: -1; /* under the bar so the bar stays clickable */
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 24cqw var(--gutter) 8.5333cqw; /* 90 / 16 / 32 */
  background: var(--paper);
  opacity: 0; visibility: hidden; transform: translateY(-2.5%);
  transition: opacity 0.35s ease, visibility 0.35s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.site-header--drawer-open .site-header__drawer { opacity: 1; visibility: visible; transform: translateY(0); }
.site-header__drawer-nav {
  position: relative; display: flex; flex-direction: column; gap: 6.4cqw; /* 24 */
  flex: 1; justify-content: center; align-items: center; text-align: center; /* links dead-centre (client) */
}
/* Mirrored HG monogram behind the links — centred on About (= nav centre), width = the
   CTA buttons below (nav stretches to the drawer's padding box). */
.site-header__drawer-stamp {
  position: absolute; left: 0; right: 0; top: 50%;
  width: 100%; height: auto;
  transform: translateY(-50%) scaleX(-1);
  opacity: 0.02; pointer-events: none;
}
.site-header__drawer-link { font-size: 7.4667cqw; line-height: 1.2; color: var(--evergreen); text-decoration: none; } /* 28, Faculty */
.site-header__drawer-link, .site-header__drawer-foot .btn {
  opacity: 0; transform: translateY(-10px);
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.site-header--drawer-open .site-header__drawer-link, .site-header--drawer-open .site-header__drawer-foot .btn { opacity: 1; transform: none; }
.site-header--drawer-open .site-header__drawer-link:nth-child(1) { transition-delay: 0.12s; }
.site-header--drawer-open .site-header__drawer-link:nth-child(2) { transition-delay: 0.18s; }
.site-header--drawer-open .site-header__drawer-link:nth-child(3) { transition-delay: 0.24s; }
.site-header--drawer-open .site-header__drawer-foot .btn:nth-child(1) { transition-delay: 0.32s; }
.site-header--drawer-open .site-header__drawer-foot .btn:nth-child(2) { transition-delay: 0.38s; }
.site-header__drawer-foot { display: flex; flex-direction: column; gap: 2.1333cqw; } /* 8 */
.site-header__drawer-cta { justify-content: center; }
html.nav-locked { overflow: hidden; }

/* ═══════════════════════════════════════════════════════════════════════════
   HOME SECTIONS (Figma Home 270:19278, Jun 28) — desktop band, px @1440 ÷ 14.4
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 01 Hero (270:19279) — full-bleed beach photo, full viewport height (client: the
   bottom CTA must never fall off-screen). Evergreen display copy top-left; glass CTA row
   pinned bottom-left; subtle 15% darkening top + bottom. ── */
.home-hero {
  position: relative; height: 100vh; height: 100svh; overflow: clip;
  /* Denser, slightly longer entrance choreography for the first screen. */
  --reveal-base: 0.3s; --reveal-step: 0.16s;
}
/* Parallax wrapper: 20% reserve ABOVE the hero — the photo drifts down for the whole
   time the hero is on screen (max shift = 0.18 × height < the 20% reserve). */
.home-hero__parallax { position: absolute; left: 0; right: 0; top: -20%; bottom: 0; will-change: transform; }
.home-hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Entrance is GATED on the photo being decoded (reveal_controller adds .is-ready — see
   data-reveal-wait-images): until then the photo is hidden and the choreography holds, so a
   slow network can never "blink" the image mid-animation. Then the photo fades in and
   settles from a 5% zoom (anchored top-centre) — 2.8s, outlasting the copy cascade.
   Hidden state only when JS is present (.reveal-on) and motion is allowed. */
@media (prefers-reduced-motion: no-preference) {
  .reveal-on .home-hero .home-hero__photo { opacity: 0; transform-origin: 50% 0; transform: scale(1.05); transition: opacity 0.9s ease; will-change: transform, opacity; } /* pre-promote the big photo before the settle */
  .reveal-on .home-hero.is-ready .home-hero__photo { opacity: 1; animation: hero-photo-settle 2.8s cubic-bezier(0.22, 1, 0.36, 1) both; }
}
@keyframes hero-photo-settle {
  from { transform: scale(1.05); }
  to   { transform: scale(1); }
}
/* Progressive (gradient) blur ON the photo — sharp at the top, softening toward the bottom
   third where the CTA sits. Masked backdrop-filter = the design's "image 7" blur layer. */
.home-hero__blur {
  position: absolute; inset: 0; pointer-events: none;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  mask-image: linear-gradient(to bottom, transparent 64%, black 94%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 64%, black 94%);
}
/* The same progressive blur under the fixed NAV (client, 29 Jul) — separates the menu
   from the photo the way the bottom band separates the CTA. */
/* Progressive header blur on hero sections (Figma 418:22652 — Anton's redesign): blur 10
   at the very top fading LINEARLY to 0 at the nav band's bottom edge (88 tall), full bleed
   width. A masked backdrop-filter is the CSS approximation of Figma's progressive
   background blur. Used on home + page heroes + about. No z-index — DOM order keeps it
   under the copy. */
.hero-blur-top {
  position: absolute; top: 0; left: 0; right: 0; height: 6.1111cqw; /* 88 = the nav band */
  pointer-events: none;
  backdrop-filter: blur(7.5px); -webkit-backdrop-filter: blur(7.5px); /* 10 −25% (Anton, 30 Jul) */
  mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
}
.home-hero__shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.15) 5.9%, rgba(0, 0, 0, 0) 35%),
    linear-gradient(to top, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0) 24.7%);
}
/* Inner cap wrapper — the bleeding photo spans the viewport, the content stays on the
   same capped grid as every other section. */
.home-hero__cap { position: relative; max-width: var(--page-max); margin-inline: auto; height: 100%; }
.home-hero__copy {
  position: absolute; left: var(--gutter); top: 10cqw; /* 40 / 144 */
  display: flex; flex-direction: column; gap: 1.9444cqw; /* 28 */
  width: 36.3194cqw; /* 523 */
  color: var(--evergreen);
}
.home-hero__title { opacity: 0.8; font-weight: 300; } /* one step lighter than the display default 400 (client, 29 Jul) */
.home-hero__sub { opacity: 0.75; max-width: 32.1528cqw; } /* 463 */
.home-hero__cta {
  position: absolute; left: var(--gutter); bottom: 2.7778cqw; /* 40 */
  display: flex; align-items: center; gap: 1.9444cqw; /* 28 */
}
.home-hero__note {
  color: var(--parchment); font-size: var(--fs-caption); line-height: 1.5; letter-spacing: 0.02em; /* 12 */
  width: 11.8056cqw; /* 170 */
}
.home-hero__note-sep { display: none; }

/* ── 02 Credential bar (270:19288) — white r12 cards (logo · hairline · caption) in a
   seamless right-to-left marquee. Card geometry from Figma: h128, p24, inner gap 24,
   12 between cards. Caption Body/Base 14, Evergreen 60%. ── */
.home-cred { padding-block: 2.7778cqw; background: var(--paper); overflow: clip; } /* 40 */
.cred-card {
  display: flex; align-items: center; flex-shrink: 0;
  gap: 1.6667cqw;                 /* 24 */
  height: 8.8889cqw;              /* 128 */
  padding: 1.6667cqw;             /* 24 */
  margin-right: 0.8333cqw;        /* 12 between cards */
  background: #FFFFFF; border-radius: var(--r-card);
}
.cred-card__seal { width: 5.5556cqw; height: 5.5556cqw; }              /* 80 */
.cred-card__naela { width: 10.625cqw; height: 2.7778cqw; }             /* 153×40 */
/* Raster badges — pre-cropped hi-res files (no CSS cropping), scaled down by the browser
   so they stay sharp on retina. The Super-Lawyers pair sits flush (no gap). */
.cred-card__pair { display: flex; align-items: center; flex-shrink: 0; }
.cred-card__tb-badge { width: 5.4167cqw; height: 5.2083cqw; object-fit: contain; } /* 78×75 */
.cred-card__tb-text { width: 5.2778cqw; height: 3.9583cqw; object-fit: contain; }  /* 76×57 */
.cred-card__ap { width: 7.0833cqw; height: 5.5556cqw; object-fit: contain; flex-shrink: 0; } /* 102×80 */
.cred-card__rule { align-self: stretch; border-left: 1px solid rgba(30, 46, 45, 0.05); } /* Figma Line 4: evergreen 5% */
.cred-card__label { font-size: var(--fs-body); line-height: 1.6; color: var(--evergreen); opacity: 0.6; white-space: nowrap; } /* Body/Base 14; breaks are explicit <br> */

/* ── 03 Statement (270:19446) — eyebrow left (445 col), Heading/Statement copy right.
   Copy at charcoal 75%; the tail phrase at evergreen 21% (scroll-fill end state — the
   scroll-driven fill is a later enhancement). ── */
.home-statement { display: flex; gap: 0.8333cqw; padding: var(--section-py) var(--gutter); background: var(--paper); }
.home-statement__eyebrow { width: 30.9028cqw; flex-shrink: 0; color: var(--evergreen); } /* 445 */
.home-statement__eyebrow .eyebrow__label { opacity: 0.8; }
.home-statement__copy { flex: 1; color: rgba(30, 46, 45, 0.8); } /* no-JS fallback: fully inked (Evergreen 80%) */
/* Scroll ink-fill words (statement_fill_controller) — shared by Statement + Testimonial;
   each section sets its own from/to colors. */
.fill-word { color: var(--fill-from); transition: color 0.35s ease; }
.fill-word.is-filled { color: var(--fill-to); }
.home-statement { --fill-from: rgba(30, 46, 45, 0.1); --fill-to: rgba(30, 46, 45, 0.8); } /* Evergreen 80% inked (client) */

/* ── 04 Services (270:19455) — WHITE band. Left: heading + sub + sticky "All services"
   at the column's bottom-left. Right: 900-wide 2-col grid of Card / Service. ── */
.home-svc { display: flex; align-items: flex-start; gap: 0.8333cqw; padding: var(--section-py) var(--gutter); --bleed: #FFFFFF; }
/* Left rail: the SECTION height is owned by the grid (auto with the card count — cards can
   be added/removed freely). The rail stretches to match; inside it the heading sticks to the
   top and "All services" rides the viewport bottom while the grid scrolls past. */
.home-svc__head {
  align-self: stretch;
  flex: 1; display: flex; flex-direction: column; justify-content: space-between;
  color: var(--evergreen);
}
/* Sticky rail REMOVED (client, 29 Jul — the sticky CTA overlapped the heading while the
   section entered; with six cards there is nothing to ride along anyway). Static rail:
   heading top, button at the rail's bottom via the head's space-between. */
.home-svc__heading { display: flex; flex-direction: column; gap: 1.6667cqw; } /* 24 */
.home-svc__sub { opacity: 0.6; max-width: 26.3194cqw; } /* 379 */
.home-svc__cta { align-self: flex-start; }
.home-svc__grid { width: 62.5cqw; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.8333cqw; } /* 900 / 12 */

/* Card / Service (62:2102) — Paper default; Evergreen on hover. Hairline: evergreen 5%
   default, cream 5% on the dark card (recoloured, NOT hidden — per Figma). */
.svc-card {
  display: flex; flex-direction: column; justify-content: space-between;
  height: 15.2778cqw;                              /* 220 */
  padding: 1.6667cqw 1.25cqw 1.6667cqw 1.6667cqw;  /* 24 / 18 / 24 / 24 */
  background: var(--paper); border: 1px solid transparent; border-radius: var(--r-card);
  text-decoration: none;
  transition: background-color 0.6s cubic-bezier(0.33, 1, 0.68, 1), border-color 0.6s cubic-bezier(0.33, 1, 0.68, 1); /* unhurried — the dark hover is high-contrast */
}
.svc-card__row { display: flex; align-items: flex-start; justify-content: space-between; width: 100%; }
.svc-card__title { color: var(--evergreen); /* Evergreen 80% (client) */ opacity: 0.8; width: 14.9306cqw; text-wrap: balance; transition: color 0.6s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.6s cubic-bezier(0.33, 1, 0.68, 1); } /* 215; balance — Literata wraps these */
.svc-card__chip {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 2.7778cqw; height: 2.7778cqw; border-radius: 0.4167cqw; /* 40 / 6 */
  background: #FFFFFF; color: var(--evergreen);
  transition: background-color 0.6s cubic-bezier(0.33, 1, 0.68, 1);
}
.svc-card__arrow { width: 0.9722cqw; height: 0.9722cqw; } /* 14 */
.svc-card__foot { display: flex; flex-direction: column; gap: 0.8333cqw; width: 100%; } /* 12 */
.svc-card__rule { border-top: 1px solid rgba(30, 46, 45, 0.05); width: 100%; transition: border-color 0.6s cubic-bezier(0.33, 1, 0.68, 1); }
.svc-card__desc { color: var(--evergreen); opacity: 0.6; max-width: 17.2222cqw; transition: color 0.6s cubic-bezier(0.33, 1, 0.68, 1); } /* 248 */

.svc-card:hover { background: var(--evergreen); border-color: var(--parchment); }
.svc-card:hover .svc-card__title { color: var(--paper); opacity: 1; }
.svc-card:hover .svc-card__chip { background: var(--mist); }
.svc-card:hover .svc-card__rule { border-top-color: rgba(250, 250, 249, 0.05); }
.svc-card:hover .svc-card__desc { color: var(--paper); }

/* ── 05 About (270:19479) — Evergreen r28 card inset 24 from the page edges. Copy column
   (py24, 560 tall, eyebrow top / heading+body+button bottom) + portrait 560×572 r12.
   Parchment diamond (64) rides the portrait's left edge, vertically centred. ── */
.home-about { padding-inline: 1.6667cqw; --bleed: #FFFFFF; z-index: 2; } /* 24; white band; z lifts the rising card above the next section's bleed */
.home-about__card {
  position: relative; display: flex; align-items: center; gap: 0.8333cqw; /* 12 */
  padding: 1.1111cqw 1.1111cqw 1.1111cqw 2.7778cqw; /* 16 / 16 / 16 / 40 */
  background: var(--evergreen); border-radius: 1.9444cqw; /* 28 */
  overflow: clip;
}
.home-about__copy {
  flex: 1; display: flex; flex-direction: column; justify-content: space-between;
  height: 38.8889cqw; padding-block: 1.6667cqw; /* 560 / 24 */
}
.home-about__eyebrow { color: var(--paper); }
.home-about__body { display: flex; flex-direction: column; align-items: flex-start; gap: 3.3333cqw; } /* 48 */
.home-about__heading { text-wrap: balance; } /* Literata is wider than Sentient — the natural wrap went lopsided (client, 31 Jul) */
.home-about__text { display: flex; flex-direction: column; gap: 1.5972cqw; color: var(--parchment); } /* 23 */
.home-about__heading { max-width: 39.8611cqw; } /* 574 */
.home-about__sub { opacity: 0.75; max-width: 37.6389cqw; } /* 542 */
.home-about__portrait {
  flex-shrink: 0; width: 38.8889cqw; height: 39.7222cqw; /* 560×572 */
  border-radius: var(--r-card); overflow: hidden;
}
.home-about__photo { width: 100%; height: 100%; object-fit: cover; }
/* (Figma has a decorative diamond on the portrait edge at opacity 0 — intentionally not built.) */

/* ── 06 How It Works (270:19493) — heading + Book CTA row, three Mist step cards.
   pt only; the next band supplies the bottom spacing. ── */
.home-how { display: flex; flex-direction: column; gap: 3.8889cqw; padding: var(--section-py) var(--gutter) 0; --bleed: #FFFFFF; z-index: 1; } /* gap 56; white; z keeps rising step cards above the next bleed */
.home-how__header { display: flex; align-items: flex-end; justify-content: space-between; }
.home-how__heading { color: var(--evergreen); max-width: 23.4722cqw; } /* 338 */
.home-how__steps { display: flex; gap: 0.8333cqw; } /* 12 */
.how-step {
  flex: 1; display: flex; flex-direction: column; justify-content: space-between;
  height: 20.8333cqw; padding: 1.6667cqw; /* 300 / 24 */
  background: var(--mist); border-radius: var(--r-card);
}
.how-step__chip {
  display: flex; align-items: center; justify-content: center;
  width: 3.6111cqw; height: 3.6111cqw; border-radius: 0.4167cqw; /* 52 / 6 */
  background: var(--paper); color: var(--evergreen);
}
.how-step__body { display: flex; flex-direction: column; gap: 1.1111cqw; } /* 16 */
.how-step__title { color: rgba(30, 46, 45, 0.8); max-width: 15.625cqw; text-wrap: balance; } /* Evergreen 80%; balance — Literata wraps these now */
.how-step__copy { color: var(--evergreen); opacity: 0.6; max-width: 23.4028cqw; } /* 337 */

/* ── 07 Testimonial (270:19520) — centred quote band on Paper. ── */
.home-quote {
  display: flex; flex-direction: column; align-items: center; gap: 1.6667cqw; /* 24 */
  padding: var(--section-py) var(--gutter); --bleed: #FFFFFF;
}
.home-quote__mark { width: 2.1375cqw; height: 1.6cqw; color: var(--evergreen); } /* 31×23 (−25% per client) */
.home-quote__mark .ds-icon { width: 100%; height: 100%; }
.home-quote__stage { display: flex; flex-direction: column; align-items: center; align-self: stretch; gap: 1.6667cqw; } /* 24 quote→meta */
/* Width is set PER SLIDE by quote_carousel_controller so every review wraps to 3 lines
   on desktop; height locks to the tallest slide — meta/arrows never move. */
.home-quote__text { color: rgba(30, 46, 45, 0.8); text-align: center; max-width: 100%; text-wrap: balance; align-content: center; margin-inline: auto; } /* Evergreen 80% — same as the Statement */
.home-quote { --fill-from: rgba(30, 46, 45, 0.1); --fill-to: rgba(30, 46, 45, 0.8); } /* same from/to as the Statement fill */
.home-quote .fill-word { transition-duration: 0.6s; } /* slower per-word ink than the scroll fill */
.home-quote__meta { display: flex; flex-direction: column; align-items: center; gap: 0.5556cqw; } /* 8 */
.home-quote__stars { display: flex; gap: 0.2778cqw; color: var(--evergreen); } /* 4 */
.home-quote__star { width: 0.9722cqw; height: 0.9722cqw; } /* 14 */
.home-quote__source { color: rgba(35, 33, 32, 0.55); font-size: var(--fs-body); transition: opacity 0.4s ease; } /* 14 (client) */
.home-quote__source.is-swapping { opacity: 0; }
/* Bare arrows (client): no borders, white on the white band, 60% → 100% on hover. */
/* One paper PLATE holds both arrows (client); the buttons themselves are transparent. */
.home-quote__nav { display: flex; gap: 0.2778cqw; padding: 0.2778cqw; margin-top: 0.5556cqw; background: var(--paper); border-radius: 0.5556cqw; } /* 4 / 4 / +8 → 32 below the author */
.home-quote__arrow {
  display: flex; align-items: center; justify-content: center;
  width: 2.7778cqw; height: 2.7778cqw; border-radius: 0.4167cqw; /* 40 / 6 */
  background: transparent; border: 0; color: var(--evergreen); cursor: pointer;
}
.home-quote__arrow-icon { width: 1.1111cqw; height: auto; opacity: 0.6; transition: opacity 0.25s ease; } /* 16 */
.home-quote__arrow:hover .home-quote__arrow-icon { opacity: 1; }
.home-quote__source { color: rgba(35, 33, 32, 0.55); }

/* ── 08 Service Area (270:19524) — Parchment band: copy column (eyebrow top, heading +
   counties bottom) + Cranford map 674×504, r8, sage border. ── */
.home-area {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--section-py) var(--gutter); --bleed: var(--parchment);
}
.home-area__copy {
  display: flex; flex-direction: column; justify-content: space-between; align-self: stretch;
  width: 38.8194cqw; /* 559 */
}
.home-area__eyebrow { color: var(--evergreen); }
.home-area__eyebrow .eyebrow__label { opacity: 0.8; }
.home-area__text { display: flex; flex-direction: column; gap: 2.2222cqw; color: var(--evergreen); } /* 32 */
.home-area__heading { max-width: 34.6528cqw; } /* 499 */
.home-area__sub { opacity: 0.6; }
.home-area__map {
  width: 46.8056cqw; height: 35cqw; flex-shrink: 0; /* 674×504 */
  border-radius: 0.5556cqw; /* 8; no outline (client) */
  overflow: hidden;
}
.home-area__map img { width: 100%; height: 100%; object-fit: cover; }
.home-area__map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ── CTA + Footer (270:19533) — Evergreen band, parchment glow rising from the bottom;
   centred CTA split, then the Sage r28 footer card. Shared across pages. ── */
/* Full-bleed band (gradient + evergreen run to the screen edges); content in a capped inner. */
.cta-footer {
  background:
    linear-gradient(to top, rgba(239, 238, 223, 0.1) 0%, rgba(239, 238, 223, 0) 60.7%),
    var(--evergreen);
}
.cta-footer__cap { max-width: var(--page-max); margin-inline: auto; padding-top: var(--section-py); } /* 120 */
.cta-footer__foot { padding: 0 1.6667cqw 1.6667cqw; } /* 24 side insets on the FULL viewport (uncapped — experiment) */
.cta-split { display: flex; justify-content: center; padding-bottom: var(--section-py); }
.cta-split__inner { display: flex; flex-direction: column; align-items: center; gap: 1.6667cqw; width: 40.9722cqw; } /* 24 / 590 */
.cta-split__diamond { width: 1.9444cqw; height: 1.9444cqw; color: var(--sage); margin-bottom: 0.5556cqw; } /* 28, +8 → the 32 heading gap */
.cta-split__diamond .ds-icon { width: 100%; height: 100%; }
/* ⚠️ No element `opacity` on reveal items: the reveal animates opacity to 1, then the
   cleanup drops it back to the element's own value — a visible dim "flicker" (client
   caught it on the CTA note). Dimming lives in the COLOR's alpha instead. */
.cta-split__heading { color: rgba(250, 250, 249, 0.8); text-align: center; text-wrap: balance; }
.cta-split__accent { color: var(--sage); }
.cta-split__note { color: rgba(239, 238, 223, 0.75); text-align: center; text-wrap: balance; }
.cta-split__row { display: flex; flex-direction: column; align-items: center; gap: 1.25cqw; padding-top: 0.5556cqw; } /* 18 / 8 */
.cta-split__phone {
  color: var(--parchment); font-size: var(--fs-label); line-height: 1.3; text-decoration: none; /* UI/Label 14 */
  transition: opacity 0.2s ease;
}
.cta-split__phone:hover { opacity: 0.7; }

/* Site / Footer (270:19545) — Sage r28 card. */
.site-footer {
  display: flex; flex-direction: column; gap: 9.7222cqw; /* 140 */
  padding: 2.2222cqw 2.7778cqw; /* 32 / 40 */
  background: var(--sage); border-radius: 1.9444cqw; /* 28 */
  overflow: clip; color: var(--evergreen);
}
.site-footer__columns { display: flex; justify-content: space-between; }
.site-footer__col { display: flex; flex-direction: column; gap: 0.8333cqw; width: 12.5cqw; } /* 12 / 180 */
.site-footer__col-title { opacity: 0.4; }
.site-footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.2778cqw; font-size: var(--fs-body); line-height: 1.6; } /* Body/Base 14; +4 gap (lh adds ~8 → ~12 visual) */
.site-footer__link { color: inherit; text-decoration: none; transition: opacity 0.2s ease; }
.site-footer__link:hover { opacity: 0.6; }
.site-footer__bottom { display: flex; flex-direction: column; align-items: center; gap: 2.2222cqw; width: 100%; } /* 32 */
.site-footer__legal { display: flex; align-items: flex-end; justify-content: space-between; width: 100%; }
.site-footer__copyright { display: flex; flex-direction: column; gap: 0.5556cqw; } /* 8 */
.site-footer__fine { opacity: 0.4; max-width: 33.9583cqw; } /* 489 */
.site-footer__badges { display: flex; align-items: stretch; gap: 0.8333cqw; } /* 12 */
.footer-badge { background: var(--parchment); border-radius: var(--r-card); display: flex; align-items: center; }
.footer-badge--awards { gap: 1.1111cqw; padding: 1.1111cqw; } /* 16 */
.footer-badge__pair { display: flex; align-items: center; flex-shrink: 0; }
/* mix-blend darken (as in Figma) sinks the badges' white boxes into the parchment chip. */
.footer-badge__tb-badge { width: 4.0972cqw; height: 3.8889cqw; object-fit: contain; mix-blend-mode: darken; } /* 59×56 */
.footer-badge__tb-text { width: 3.9583cqw; height: 2.9861cqw; object-fit: contain; mix-blend-mode: darken; }  /* 57×43 */
.footer-badge__ap { width: 5.3472cqw; height: 4.1667cqw; object-fit: contain; flex-shrink: 0; mix-blend-mode: darken; } /* 77×60 */
.footer-badge__rule { align-self: stretch; border-left: 1px solid var(--divider); }
.footer-badge__rule--h { border-left: 0; border-top: 1px solid var(--divider); width: 100%; }
.footer-badge--sl {
  flex-direction: column; align-items: stretch; justify-content: space-between;
  padding: 0.8333cqw 0.8333cqw 0.8333cqw 1.1111cqw; /* 12 / 12 / 12 / 16 */
  gap: 0.5556cqw; text-decoration: none;
}
.footer-badge__sl-head { display: flex; align-items: center; justify-content: space-between; gap: 0.8333cqw; }
.footer-badge__sl-name { opacity: 0.6; color: var(--evergreen); }
.footer-badge__sl-chip {
  display: flex; align-items: center; justify-content: center;
  width: 1.6667cqw; height: 1.6667cqw; border-radius: 0.4167cqw; /* 24 / 6 */
  background: var(--sage); color: var(--evergreen);
}
.footer-badge__sl-arrow { width: 0.5556cqw; height: 0.5556cqw; } /* 8 */
.footer-badge__sl-logo { width: 9.375cqw; height: 1.9444cqw; } /* 135×28 */
.site-footer__hairline { width: 100%; border-top: 1px solid var(--divider); }
.site-footer__wordmark { overflow: clip; }
.site-footer__wordmark .marquee__group { gap: 4.4444cqw; padding-right: 4.4444cqw; } /* 64 around the diamond */
.site-footer__wordmark-img { width: 147.3611cqw; height: auto; max-width: none; opacity: 0.35; } /* 2122×182 */
.site-footer__wordmark-diamond { width: 4.1667cqw; height: 4.1667cqw; color: var(--evergreen); opacity: 0.35; flex-shrink: 0; } /* 60 */
.site-footer__wordmark-diamond .ds-icon { width: 100%; height: 100%; }

/* ═══ SERVICES HUB (270:19628) ═══════════════════════════════════════════ */

/* Shared interior-page hero (shared/_page_hero) — 543-tall full-bleed photo band; the H1
   sits bottom-left on the capped grid. Reuses the home-hero language: parallax wrapper,
   photo-settle entrance (gated on decode), progressive blur + soft shades. */
.page-hero {
  position: relative; display: flex; overflow: clip;
  min-height: 37.7083cqw; /* 543 — fixed band (client tried full-screen 29 Jul, reverted) */
  /* --sheet (service pages): the white overview sheet rides up over the photo by the same
     amount per band — the hero grows so the VISIBLE photo matches the hub hero (client). */
  --reveal-base: 0.15s;
}
.page-hero__parallax { position: absolute; left: 0; right: 0; top: -20%; bottom: 0; will-change: transform; }
.page-hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; }
@media (prefers-reduced-motion: no-preference) {
  .reveal-on .page-hero .page-hero__photo { opacity: 0; transform-origin: 50% 0; transform: scale(1.05); transition: opacity 0.9s ease; will-change: transform, opacity; } /* pre-promote the big photo before the settle */
  .reveal-on .page-hero.is-ready .page-hero__photo { opacity: 1; animation: hero-photo-settle 2.8s cubic-bezier(0.22, 1, 0.36, 1) both; }
}
.page-hero__blur {
  position: absolute; inset: 0; pointer-events: none;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  mask-image: linear-gradient(to bottom, transparent 55%, black 92%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 55%, black 92%);
}
.page-hero__shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.15) 5.9%, rgba(0, 0, 0, 0) 35%),
    linear-gradient(to top, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0) 30%);
}
.page-hero__cap {
  position: relative; width: 100%; max-width: var(--page-max); margin-inline: auto;
  display: flex; align-items: flex-end;
  padding: 9.7222cqw var(--gutter) 3.3333cqw; /* 140 / 48 */
}
.page-hero__title { color: var(--paper); }

/* 01 Intro "Where to start" — the Statement skeleton (eyebrow col + ink-fill copy) plus a
   row of anchor jumps aligned under the copy column. */
.svc-intro {
  display: flex; flex-direction: column; gap: 3.3333cqw; /* 48 (client, was 32) */
  padding: 5.5556cqw var(--gutter); /* 80 */
  background: var(--paper);
  --fill-from: rgba(30, 46, 45, 0.1); --fill-to: rgba(30, 46, 45, 0.8);
}
.svc-intro__row { display: flex; gap: 0.8333cqw; } /* 12 */
.svc-intro__eyebrow { width: 30.9028cqw; flex-shrink: 0; color: var(--evergreen); } /* 445 — the Statement col */
.svc-intro__eyebrow .eyebrow__label { opacity: 0.8; }
.svc-intro__copy { flex: 1; color: rgba(30, 46, 45, 0.8); } /* no-JS fallback: fully inked */
.svc-intro .fill-word { transition-duration: 0.6s; } /* timed cascade (auto mode) — testimonial pace */
.svc-intro__anchors { display: flex; gap: 0.2778cqw; margin-left: 31.7361cqw; } /* 4; col + row gap */

/* Anchor jump — .btn base restyled: white plate, label left, chevron right, equal widths. */
.anchor-btn { flex: 1; justify-content: space-between; background: #FFFFFF; color: var(--charcoal); }
.anchor-btn:hover { background: var(--sage); }
.anchor-btn__arrow { width: 0.5556cqw; height: 0.6944cqw; flex-shrink: 0; } /* 8×10 */

/* 02 Intent groups — one white band; label col (396) + the home Card / Service grid. */
.svc-groups { padding: var(--section-py) var(--gutter); --bleed: #FFFFFF; }
.svc-group { display: flex; align-items: flex-start; gap: 4.4444cqw; padding-bottom: 5cqw; scroll-margin-top: 96px; } /* 64 / 72; margin = reduced-motion fallback (Lenis anchors carry the offset otherwise) */
.svc-group:last-child { padding-bottom: 0; }
.svc-group__label {
  width: 27.5cqw; flex-shrink: 0; /* 396 */
  display: flex; flex-direction: column; gap: 1.4583cqw; padding-top: 0.5556cqw; /* 21 (was 32, −⅓) / 8 */
  color: var(--evergreen);
}
.svc-group__label .eyebrow__label { opacity: 0.8; }
.svc-group__desc { color: var(--evergreen); opacity: 0.8; max-width: 18.4722cqw; } /* 266; Evergreen 80% heading rule */
.svc-group__cards { flex: 1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.8333cqw; } /* 12 */

/* ═══ SERVICE DETAIL TEMPLATE (270:20387) ═════════════════════════════════ */

/* page-hero additions: breadcrumb eyebrow above the H1 (service pages) */
.page-hero__stack { display: flex; flex-direction: column; gap: 0.8333cqw; width: 100%; } /* 12 (was 24 — client: eyebrow drifted) */
.page-hero--sheet { min-height: 38.5416cqw; } /* 543 + the sheet's 12 overlap */
/* Services hub hero (family in meadow, 3 Aug): the asset is the photo's full width with a
   20%-of-hero sky headroom baked in for the parallax wrapper — at 1024–1600 it fills the
   box edge-to-edge. On ultrawide the width-fill crops vertically: anchor BOTTOM so the
   family and grass survive and the sky takes the cut. Below 1024 the box turns taller
   than the asset → the crop goes horizontal; the per-band x-focals below keep the family
   dead-center in the frame (the family stands at 51.7% of the asset, so the focal that
   centers them is NOT 50% — it's solved per band from the window width). */
.page-hero--hub .page-hero__photo { object-position: 50% 100%; }
.page-hero__eyebrow { color: var(--parchment); }
.page-hero__eyebrow .eyebrow__label { opacity: 0.8; }

/* 01 Overview sheet — white, rounded top corners riding over the hero photo. */
.svc-sheet {
  --bleed: #FFFFFF;
  position: relative; z-index: 1; margin-top: -0.8333cqw; /* the r12 corners overlap the photo */
  display: flex; flex-direction: column; gap: 2.7778cqw; /* 40 */
  padding: 2.7778cqw var(--gutter) 0; /* 40 */
  border-radius: var(--r-card) var(--r-card) 0 0;
  background: #FFFFFF;
  --fill-from: rgba(30, 46, 45, 0.1); --fill-to: rgba(30, 46, 45, 0.8);
}
.svc-sheet .fill-word { transition-duration: 0.6s; } /* auto-mode cascade */
.svc-sheet__row { display: flex; gap: 0.8333cqw; } /* 12 */
.svc-sheet__side { width: 30.9028cqw; flex-shrink: 0; color: var(--evergreen); } /* 445 — the statement col */
.svc-sheet__side .eyebrow__label { opacity: 0.8; }
.svc-sheet__main { flex: 1; }
.svc-sheet__sub { color: var(--evergreen); opacity: 0.8; max-width: 35.6944cqw; } /* 514 */
.svc-sheet__statement { flex: 1; color: rgba(30, 46, 45, 0.8); }
.svc-sheet__rule { border-top: 1px solid rgba(35, 33, 32, 0.2); width: 100%; margin-bottom: 0.5556cqw; } /* rule→statement row = 48 (gap 40 + 8, Figma 270:20399) */
.svc-sheet__row:last-child .svc-sheet__side { padding-top: 0.4167cqw; } /* 6 — eyebrow col offset (Figma Eyebrow Col pt-6) */

/* 02 Capabilities checklist — paper plates with a white check box. */
.svc-checklist { display: flex; gap: 0.8333cqw; padding: 8.3333cqw var(--gutter) 0; --bleed: #FFFFFF; } /* 12 / 120 */
.svc-checklist__side { width: 30.9028cqw; flex-shrink: 0; padding-top: 0.4167cqw; color: var(--evergreen); }
.svc-checklist__side .eyebrow__label { opacity: 0.8; }
.svc-checklist__items { flex: 1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.8333cqw; } /* 12 */
.svc-check {
  display: flex; align-items: center; gap: 1.25cqw; /* 18 */
  padding: 0.4167cqw; /* 6 */
  background: var(--paper); border-radius: 0.4167cqw; /* 6 */
}
.svc-check__box {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 3.6111cqw; height: 3.6111cqw; border-radius: 0.2778cqw; /* 52 / 4 */
  background: #FFFFFF; color: var(--evergreen);
}
.svc-check__icon { width: 0.8333cqw; height: 0.8333cqw; } /* 12 */
.svc-check__label { font-size: var(--fs-footer-h); line-height: 1.35; color: var(--evergreen); } /* 16 Sentient; full Evergreen (Figma 270:20414) */

/* 03 How-it-works — mist folder-tab cards (title top · hairline + copy bottom). */
.svc-how { display: flex; flex-direction: column; gap: 3.8889cqw; padding: var(--section-py) var(--gutter); --bleed: #FFFFFF; } /* 56 */
.svc-how__heading { color: rgba(30, 46, 45, 0.8); max-width: 31.3194cqw; } /* 451 */
.svc-how__steps { display: flex; gap: 0.8333cqw; } /* 12 */
.svc-step {
  position: relative; flex: 1; display: flex; flex-direction: column; justify-content: space-between;
  height: 19.375cqw; padding: 2.7083cqw 1.6667cqw 1.6667cqw; /* 279 (300 col − 21 tab) / 39 (12 + the 27 bar strip) 24 24 — title lands 60 under the tab top (Figma 270:20447) */
  margin-top: 1.4583cqw; /* the tab rises 21 above the card */
  background: var(--mist); border-radius: 0 var(--r-card) var(--r-card) var(--r-card);
}
/* the folder tab + its concave shoulder */
.svc-step::before {
  content: ""; position: absolute; left: 0; bottom: calc(100% - 1px); /* 1px overlap — a subpixel seam flashed during the reveal */
  width: 8.3333cqw; height: calc(1.4583cqw + 1px); /* 120 wide, 21 above the card */
  background: var(--mist); border-radius: var(--r-card) var(--r-card) 0 0;
}
.svc-step::after {
  content: ""; position: absolute; left: 8.3333cqw; bottom: calc(100% - 1px);
  width: 0.8333cqw; height: calc(0.8333cqw + 1px); /* 12, 1px overlap */
  background: radial-gradient(circle at 100% 0, transparent 0 0.8333cqw, var(--mist) 0.8333cqw);
}
.svc-step__title { color: rgba(30, 46, 45, 0.8); }
.svc-step__foot { display: flex; flex-direction: column; gap: 0.8333cqw; } /* 12 */
.svc-step__rule { border-top: 1px solid rgba(35, 33, 32, 0.15); width: 100%; } /* charcoal 15% (Figma Line asset) */
.svc-step__copy { color: var(--evergreen); opacity: 0.6; max-width: 27.5694cqw; } /* 397 */

/* 04 Mid CTA — REDESIGNED 30 Jul (Figma 388:22348): paper card, no hairline, CTA on a
   white plate (mirrors the header phone plate), HG monogram full-height on the right. */
.svc-midcta { padding: 0.8333cqw var(--gutter) var(--section-py); --bleed: #FFFFFF; } /* 12 top */
.svc-midcta__card {
  position: relative; display: flex; gap: 3.3333cqw; align-items: stretch; /* 48 */
  min-height: 25cqw; padding: 2.2222cqw; /* 360 / 32 */
  background: var(--paper); border-radius: var(--r-card); overflow: clip;
}
.svc-midcta__copy { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 1.6667cqw; }
.svc-midcta__head { display: flex; flex-direction: column; gap: 0.5556cqw; } /* 8 (client tightened from 16, 30 Jul) */
.svc-midcta__heading { color: rgba(30, 46, 45, 0.8); font-weight: 300; } /* Light like all headings — it rides text-statement (Regular) but IS a heading (Anton, 30 Jul) */
.svc-midcta__note { color: var(--ink); opacity: 0.8; max-width: 25.2778cqw; } /* 364 */
.svc-midcta__plate {
  align-self: flex-start; display: flex; align-items: center; gap: 1.25cqw; /* 18 */
  padding: 2px 1.6667cqw 2px 2px; /* 24 right */
  background: #FFFFFF; border-radius: 0.4167cqw; /* 6 */
}
.svc-midcta__phone { color: var(--ink); opacity: 0.7; font-size: var(--fs-label); line-height: 1.3; text-decoration: none; transition: opacity 0.2s ease; }
.svc-midcta__phone:hover { opacity: 0.45; }
.svc-midcta__union { width: 20.5556cqw; height: 20.5556cqw; flex-shrink: 0; align-self: center; } /* 296 = card 360 − 2×32 (Figma h-full square) */

/* 05 FAQ — eyebrow left, rows right (903). */
.svc-faq { display: flex; justify-content: space-between; gap: 0.8333cqw; padding: 0 var(--gutter); --bleed: #FFFFFF; }
.svc-faq__side { color: var(--evergreen); }
.svc-faq__side .eyebrow__label { opacity: 0.8; }
.svc-faq__rows { width: 62.7083cqw; display: flex; flex-direction: column; } /* 903 */
.svc-faq-row { border-top: 1px solid rgba(35, 33, 32, 0.15); }
.svc-faq-row:first-child { border-top: 0; }
.svc-faq-row__head {
  display: flex; align-items: center; justify-content: space-between; gap: 1.6667cqw;
  padding-block: 1.25cqw; /* 18 */
  cursor: pointer; list-style: none;
}
.svc-faq-row__head::-webkit-details-marker { display: none; }
.svc-faq-row__q { color: rgba(30, 46, 45, 0.8); }
.svc-faq-row__chip {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 3.6111cqw; height: 3.6111cqw; border-radius: 0.4167cqw; /* 52 / 6 */
  background: var(--parchment); color: var(--evergreen); /* parchment plate (Figma chip asset #EFEEDF) */
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.faq-plus { position: relative; display: block; width: 14px; height: 14px; }
.faq-plus span { position: absolute; background: currentColor; transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease; }
.faq-plus span:first-child { left: 0; right: 0; top: 6px; height: 2px; }               /* horizontal bar */
.faq-plus span:last-child  { top: 0; bottom: 0; left: 6px; width: 2px; }               /* vertical bar */
details[open] .faq-plus span:last-child { transform: rotate(90deg); opacity: 0; }      /* plus → minus */
.svc-faq-row__a { color: var(--evergreen); opacity: 0.7; max-width: 44cqw; padding: 0 0 calc(1.6667cqw + 16px); } /* +16 under an OPEN answer, every band (client, 30 Jul) */
details[open] .svc-faq-row__a { animation: faq-open 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes faq-open { from { opacity: 0; transform: translateY(-6px); } }
/* browsers that can animate <details> height do it properly */
@supports (interpolate-size: allow-keywords) {
  details.svc-faq-row { interpolate-size: allow-keywords; }
  details.svc-faq-row::details-content {
    height: 0; overflow: clip;
    transition: height 0.4s cubic-bezier(0.22, 1, 0.36, 1), content-visibility 0.4s allow-discrete;
  }
  details.svc-faq-row[open]::details-content { height: auto; }
}

/* 06 Related — the hub group band on white. */
.svc-related { padding: var(--section-py) var(--gutter); --bleed: #FFFFFF; }

/* ═══ INSIGHTS INDEX (270:20591) ═══════════════════════════════════════════ */

.ins-header { display: flex; flex-direction: column; padding: 14.4444cqw var(--gutter) 2.7778cqw; } /* 88 fixed bar + 120 / 40 */
.ins-header__heading { display: flex; flex-direction: column; gap: 1.3889cqw; } /* 20 */
.ins-header__heading .eyebrow__label { opacity: 0.8; }
.ins-header__title { color: var(--evergreen); } /* Figma 270:20593: SOLID evergreen — the 0.8 alpha was wrong (client caught it) */
.ins-header__br { display: none; }
.ins-filters-band { padding: 5.5556cqw var(--gutter) 0; } /* 80 above (client, was 120) */
/* The chips live on ONE scrollable line (client, 30 Jul — they wrapped on tablet). The wrap
   anchors the right-edge fade hinting at more chips; the fade must sit on the NON-scrolling
   box (an ::after inside the scroller would ride away with the content). */
.ins-filters-wrap { position: relative; }
.ins-filters-wrap::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 3.3333cqw; /* 48 */
  background: linear-gradient(to right, transparent, var(--paper)); pointer-events: none;
}
.ins-filters-scroll { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ins-filters-scroll::-webkit-scrollbar { display: none; }
.ins-filters-scroll.is-dragging { cursor: grabbing; user-select: none; }
.ins-filters-scroll.is-dragging .ins-segment { pointer-events: none; } /* no hover flicker mid-drag */
.ins-filters { display: inline-flex; gap: 0.2778cqw; flex-wrap: nowrap; background: #FFFFFF; border-radius: var(--r-btn); } /* 4; WHITE plate under the chips (Figma) */
.ins-filters .ins-segment { white-space: nowrap; flex-shrink: 0; }
.ins-segment {
  display: inline-flex; align-items: center;
  padding: calc(1.1111cqw - 1px) 1.25cqw; /* 16 18 − the 1px border → EXACTLY the .btn height (client, 30 Jul) */
  border: 1px solid transparent; border-radius: var(--r-btn);
  font-family: var(--font-body); font-weight: 500; font-size: var(--fs-label); line-height: 1.2;
  color: var(--charcoal); opacity: 0.35; text-decoration: none;
  transition: opacity 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.ins-segment:hover { opacity: 0.7; }
.ins-segment--on { opacity: 1; background: #FFFFFF; border-color: rgba(35, 33, 32, 0.08); }

/* Featured card — parchment r28: copy left, cover right with the tag chip. */
.ins-featured { padding: 0 1.6667cqw; } /* 24 side insets (footer rhythm) */
.featured-card {
  display: flex; gap: 0.8333cqw; /* 12 */
  padding: 1.1111cqw 1.1111cqw 1.1111cqw 2.7778cqw; /* 16 / left 40 */
  background: var(--parchment); border-radius: 1.9444cqw; /* 28 */
  text-decoration: none; color: var(--charcoal);
  transition: background-color 0.45s cubic-bezier(0.33, 1, 0.68, 1);
}
/* Featured hover = same sage flip as the regular card (Figma 159:4816) — inks unchanged. */
.featured-card:hover { background: var(--sage); }
.featured-card__title, .featured-card__dek, .featured-card__cta { transition: color 0.45s cubic-bezier(0.33, 1, 0.68, 1); }
/* the featured cover's tags sit 12 in (the small cards use 6) */
.featured-card__img .article-card__tags { top: 0.8333cqw; left: 0.8333cqw; } /* 12 */
.featured-card__copy { flex: 1; align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; gap: 2.2222cqw; padding-block: 1.6667cqw; padding-right: 4.4444cqw; } /* 24 / 64; CTA pinned to the card bottom */
.featured-card__head { display: flex; flex-direction: column; gap: 1.1111cqw; } /* 16 */
.featured-card__title { color: rgba(30, 46, 45, 0.8); max-width: 38.8889cqw; text-wrap: balance; line-height: 1.1; } /* 560; Evergreen-80 — the SAME ink as the regular card title (audit, 30 Jul) */
.featured-card__dek { opacity: 0.8; max-width: 33.3333cqw; } /* 480 */
.featured-card__cta {
  display: inline-flex; align-items: center; gap: 0.8333cqw; /* 12 */
  font-family: var(--font-body); font-weight: 500; font-size: var(--fs-label); line-height: 1.2;
  transition: opacity 0.2s ease;
}
.featured-card:hover .featured-card__cta { opacity: 0.6; }
.featured-card__diamond { width: 0.5556cqw; height: 0.5556cqw; color: var(--evergreen); } /* 8 */
.featured-card__img { position: relative; width: 38.8889cqw; height: 25.9028cqw; border-radius: var(--r-card); overflow: clip; flex-shrink: 0; } /* 560×373 */
.featured-card__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.33, 1, 0.68, 1); }
.featured-card:hover .featured-card__img img { transform: scale(1.04); } /* subtler on the big cover */

/* Article card (components/article_card) — parchment r18, p12, IMG r6 + tag chip. */
.ins-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8333cqw; padding: 3.3333cqw var(--gutter) var(--section-py); } /* 12 / 48 */
.ins-grid__empty { grid-column: 1 / -1; color: var(--evergreen); opacity: 0.6; padding-block: 4.1667cqw; }
.article-card {
  display: flex; flex-direction: column; gap: 1.6667cqw; /* 24 */
  padding: 0.8333cqw; /* 12 */
  background: var(--parchment); border-radius: 1.25cqw; /* 18 */
  text-decoration: none; color: var(--charcoal);
  transition: background-color 0.45s cubic-bezier(0.33, 1, 0.68, 1);
}
/* Hover = the DS Card/Article State=Hover variant (Anton's redesign, 30 Jul — Figma
   145:4898): SAGE card, inks stay their default charcoal/evergreen (the old evergreen
   card + parchment inversion is retired), diamond spins 180° like the button. */
.article-card__title, .article-card__meta, .article-card__cta { transition: color 0.45s cubic-bezier(0.33, 1, 0.68, 1), background-color 0.45s cubic-bezier(0.33, 1, 0.68, 1); } /* a notch faster than the 0.6 card standard (client) */
.article-card__diamond, .featured-card__diamond { transition: transform 0.45s cubic-bezier(0.33, 1, 0.68, 1); }
.article-card:hover .article-card__cta { opacity: 1; }
.article-card:hover .article-card__diamond, .featured-card:hover .featured-card__diamond { transform: rotate(180deg); }
.article-card:hover { background: var(--sage); }
.article-card__img { position: relative; display: block; width: 100%; height: 18.3959cqw; border-radius: 0.4167cqw; overflow: clip; } /* 265 / 6 */
.article-card__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.33, 1, 0.68, 1); }
.article-card:hover .article-card__img img { transform: scale(1.05); } /* gentle cover zoom (client) */
.article-card__tags {
  position: absolute; top: 0.5556cqw; left: 0.5556cqw; /* 8 (was 6 — client: +2 off the corner) */
  display: flex; flex-wrap: wrap; gap: 0.2778cqw; /* 4 — up to two chips */
}
.article-card__tag {
  display: inline-flex; align-items: center;
  padding: 0.6944cqw; /* 10 — line-height 1 centres the label optically (was 6 + lh 1.6, label sat high) */
  background: var(--paper); border-radius: var(--r-btn);
  font-family: var(--font-body); font-size: var(--fs-body); line-height: 1; color: var(--evergreen);
}
/* flex:1 + margin-top:auto pin "Read article" to the card's bottom edge — with a short title
   the grid-stretched card otherwise leaves the link hanging mid-card (client, 30 Jul). */
.article-card__text { display: flex; flex-direction: column; flex: 1; gap: 1.6667cqw; padding: 0 0.8333cqw 0.8333cqw; } /* 24 / 12 */
.article-card__top { display: flex; flex-direction: column; gap: 0.8333cqw; } /* 12 */
.article-card__cta { margin-top: auto; }
.article-card__title { color: rgba(30, 46, 45, 0.8); text-wrap: balance; line-height: 1.1; } /* article cards read a notch airier than the 1.0 card class (client, 31 Jul) */
.article-card__meta { font-family: var(--font-body); font-size: var(--fs-caption); line-height: 1.45; color: var(--evergreen); opacity: 0.6; }
.article-card__cta {
  display: inline-flex; align-items: center; gap: 0.8333cqw;
  font-family: var(--font-body); font-weight: 500; font-size: var(--fs-label); line-height: 1.2;
  transition: opacity 0.2s ease;
}
.article-card__diamond { width: 0.5556cqw; height: 0.5556cqw; color: var(--evergreen); }

/* Pagination (Figma Site/Pagination 141:4872) — arrow · pages · arrow on a white plate,
   centred under the grid; 9 cards per page (client, 30 Jul). */
.ins-pagination { display: flex; justify-content: center; padding: 0 var(--gutter) var(--section-py); margin-top: -3.8889cqw; } /* 64 under the last card row (grid pb 120 − 56) */
.ins-pagination__plate { display: flex; align-items: center; gap: 0.2778cqw; background: #FFFFFF; border-radius: var(--r-btn); } /* 4 */
.ins-pagination__page, .ins-pagination__arrow {
  display: flex; align-items: center; justify-content: center;
  width: 3.4028cqw; height: 3.4028cqw; border-radius: var(--r-btn); /* 49 */
  font-family: var(--font-body); font-weight: 500; font-size: var(--fs-label); line-height: 1.2;
  color: var(--charcoal); text-decoration: none; border: 1px solid transparent;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}
a.ins-pagination__page { opacity: 0.35; }
a.ins-pagination__page:hover { opacity: 0.7; }
.ins-pagination__page.is-current { border-color: rgba(35, 33, 32, 0.08); }
.ins-pagination__arrow { opacity: 0.7; }
a.ins-pagination__arrow:hover { opacity: 1; }
.ins-pagination__arrow.is-disabled { opacity: 0.25; }
.ins-pagination__glyph { width: 12px; height: 10px; } /* fixed px (rules §1) */
.ins-pagination__glyph--prev { transform: scaleX(-1); }

/* ═══ INSIGHTS ARTICLE (270:20684) ═════════════════════════════════════════ */

.art-cover { display: flex; flex-direction: column; gap: 3.3333cqw; padding: 11.6667cqw var(--gutter) 1.1111cqw; } /* 48 / 88 fixed bar + 80 / 16 (Figma Cover pb) */
.art-cover__head { display: flex; gap: 0.8333cqw; } /* 12 */
.art-cover__meta { width: 30.9028cqw; flex-shrink: 0; display: flex; flex-direction: column-reverse; justify-content: flex-end; align-items: flex-start; gap: 0.9722cqw; padding-top: 0.5556cqw; } /* 445 / 14; column-REVERSE puts the byline on top (DOM keeps tags first for the tablet split row); flex-END = TOP in a reversed column, so the block top-aligns with the title */
.art-cover__byline { font-size: var(--fs-caption); line-height: 1.45; color: var(--evergreen); opacity: 0.7; } /* 12 (Figma 270:20689) */
.art-cover__tags { display: flex; flex-wrap: wrap; gap: 0.5556cqw; } /* 8 — up to 3 tag chips */
.art-cover__tag { position: static; background: rgba(35, 33, 32, 0.06); } /* UI/Tag on light: charcoal-6% plate (Figma) */
.art-cover__heading { flex: 1; display: flex; flex-direction: column; gap: 1.3889cqw; } /* 20 */
.art-cover__title { color: rgba(30, 46, 45, 0.8); max-width: 54.7917cqw; font-size: 3.6111cqw; text-wrap: balance; line-height: 1.0; } /* 100% — long article titles need more than the 90% H1 ramp (client, 31 Jul) */ /* 789; 52 (Figma 270:20692); balance — no orphan words on long titles */
.art-cover__dek { color: var(--evergreen); opacity: 0.85; max-width: 33.2639cqw; } /* 479 */
.art-cover__img { position: relative; width: 100%; height: 40.8333cqw; border-radius: 1.25cqw; overflow: clip; } /* 588 / r18 (Figma) */
.art-cover__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Body + sticky TOC rail (article_toc_controller builds the list from the h2s). */
.art-body { display: flex; align-items: flex-start; gap: 0.8333cqw; padding: 6.1111cqw var(--gutter) var(--section-py); } /* 12 / 88 */
.article-toc { position: sticky; top: 8.3333cqw; width: 30.9028cqw; flex-shrink: 0; display: flex; flex-direction: column; gap: 1.6667cqw; } /* 445 / 24 */
.article-toc--empty { visibility: hidden; } /* keep the 445 rail as a spacer — the body column stays at the designed offset even when a post has no chapters */
.article-toc__label { font-size: var(--fs-caption); line-height: 1.45; color: var(--charcoal); opacity: 0.6; }
.article-toc__rail { position: relative; width: 20.8333cqw; border-left: 1px solid rgba(35, 33, 32, 0.15); } /* 300; the chapters' shared hairline rail (Figma 270:20698) */
.article-toc__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.article-toc__link {
  /* max 2 lines + ellipsis (Anton, 30 Jul) — long imported chapter titles pushed the
     fixed rail past its height (5-spooky-stories) and hid the last links. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  padding: 0.6944cqw 1.1111cqw; /* 10 16 (Figma Chapter rows) */
  font-family: var(--font-body); font-size: var(--fs-label); line-height: 1.6;
  color: var(--evergreen); opacity: 0.55; text-decoration: none;
  transition: opacity 0.2s ease;
}
.article-toc__link:hover { opacity: 0.8; }
.article-toc__link.is-active { opacity: 1; font-weight: 500; }
.article-toc__indicator {
  position: absolute; left: 0; top: 0; width: 2px; background: var(--evergreen);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), height 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.art-body__content { flex: 1; max-width: 55.5556cqw; } /* 800 */

/* ActionText body typography — the body renders inside a .trix-content wrapper, so the
   selectors must NOT use child combinators (bit us: default trix styles showed through). */
.article-content { color: var(--evergreen); font-size: var(--fs-body-l); line-height: 1.5; } /* the home Statement's leading (client — 1.65 read too airy) */
.article-content p { margin-top: 1.3889cqw; } /* 20 */
.article-content ul, .article-content ol { margin-top: 2.2222cqw; margin-bottom: 2.2222cqw; } /* 32 — a clear step IN and OUT of the list */
.article-content p { opacity: 0.85; }
/* Lead-in paragraph (Figma 270:20708, re-tuned twice 30 Jul per Anton): display type at
   the STATEMENT size (32/27/22 via the band ramp — the halved 16 was indistinguishable
   from body), with the tight 1.4 leading (Figma's 1.5 read loose on long intros). */
.article-content .trix-content > p:first-of-type {
  /* first-of-TYPE, not first-child — some imports open with an <h2>, which made the old
     selector silently never match on those articles */
  font-family: var(--font-display); letter-spacing: var(--track-display);
  font-size: calc(var(--fs-statement) * 0.6667); /* ⅔ of statement ≈ 21/18/15 (Anton: 32 too huge, 16 invisible) */
  line-height: 1.68; color: rgba(30, 46, 45, 0.8); opacity: 1; /* 1.4 +20% (Anton, final lead tune) */
}
.article-content h2 {
  font-family: var(--font-display); letter-spacing: var(--track-display); font-weight: 300; /* Light like all headings (Anton, 30 Jul) */
  font-size: var(--fs-statement); line-height: 1.2; color: rgba(30, 46, 45, 0.8); text-wrap: balance; /* 32; 1.2 = the site's heading rhythm (client, 30 Jul — Figma's 1.5 read loose); no orphan words */
  margin-top: 3.3333cqw; margin-bottom: 1.3889cqw; scroll-margin-top: 120px; /* 48 / 20 */
}
.article-content h2:first-child, .article-content p:first-child { margin-top: 0; }
.article-content blockquote {
  margin: 1.3889cqw 0; padding: 2.5cqw 0; /* 20 / 36 (Figma Pull Quote) */
  border: 0; border-top: 1px solid rgba(35, 33, 32, 0.15); border-bottom: 1px solid rgba(35, 33, 32, 0.15);
  background: none; border-radius: 0;
  font-family: var(--font-display); letter-spacing: var(--track-display);
  font-size: var(--fs-statement); line-height: 1.5; color: rgba(30, 46, 45, 0.8);
}
/* Lists render as hairline rows with the brand diamond as the bullet (client, 29 Jul —
   a deliberate step past the Figma rows). */
/* List rows: hairlines RETIRED (Anton, 30 Jul — "линии раздражают"); rhythm now follows
   the in/out rule: a bigger step INTO the list (its margin-top), a smaller step BETWEEN
   items (row gap). list-style also killed on the LI itself — imported WP markup can carry
   orphan <li> outside any <ul>, which resurrects the UA disc next to our diamond. */
.article-content ul, .article-content ol { list-style: none; padding-left: 0; display: flex; flex-direction: column; gap: 0.8333cqw; /* 12 between items */ }
.article-content li {
  opacity: 0.85; list-style: none;
  padding-left: 19px; text-indent: -19px; /* hanging indent: wrapped lines clear the glyph */
}
.article-content li::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 12px; /* fixed px glyph (rules §1) */
  background: var(--evergreen); transform: rotate(45deg); vertical-align: 0.08em;
}
.article-content a { color: var(--evergreen); text-underline-offset: 3px; }
.article-content a:hover { opacity: 0.7; }

/* Share this — X / Facebook / copy-link chips after a divider (client, 29 Jul). */
.art-share { margin-top: 3.3333cqw; padding-top: 2.2222cqw; border-top: 1px solid rgba(35, 33, 32, 0.15); display: flex; flex-direction: column; gap: 1.1111cqw; } /* 48 / 32 / 16 */
.art-share__label { font-size: var(--fs-caption); line-height: 1.45; color: var(--charcoal); opacity: 0.6; }
.art-share__row { display: flex; gap: 0.5556cqw; } /* 8 */
.art-share__btn {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 3.3333cqw; height: 3.3333cqw; border-radius: var(--r-btn); /* 48 */
  background: #FFFFFF; color: var(--evergreen); border: 0; padding: 0;
  cursor: pointer; text-decoration: none;
  transition: background-color 0.2s ease;
}
.art-share__btn:hover { background: var(--sage); }
.art-share__icon { width: 16px; height: 16px; } /* fixed px glyphs (rules §1) */
.art-share__icon--fb { width: 20px; height: 20px; } /* the "f" is a narrow glyph — bigger box to match X/link optically */
/* copy chip: link glyph swaps to a check for a beat after copying */
.art-share__icon--check { position: absolute; opacity: 0; transition: opacity 0.2s ease; }
.art-share__btn--copy .art-share__icon--link { transition: opacity 0.2s ease; }
.art-share__btn--copy.is-copied .art-share__icon--link { opacity: 0; }
.art-share__btn--copy.is-copied .art-share__icon--check { opacity: 1; }

/* Read more — a white band (Figma 270:20732). */
.art-more { display: flex; flex-direction: column; gap: 3.8889cqw; padding: var(--section-py) var(--gutter); --bleed: #FFFFFF; } /* 56 */
.art-more__header { display: flex; align-items: flex-end; justify-content: space-between; }
.art-more__heading { color: rgba(30, 46, 45, 0.8); }
.art-more__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8333cqw; }

/* ═══ BOOK A CONSULTATION (270:20213) ══════════════════════════════════════ */

.cons { display: flex; align-items: flex-start; justify-content: space-between; gap: 4.4444cqw; padding: 7.7778cqw var(--gutter) var(--section-py); } /* 64 / 88+24; info keeps its own 600 (Figma Main items-start) */
.cons__info { width: 38.8889cqw; min-height: 41.6667cqw; display: flex; flex-direction: column; justify-content: space-between; gap: 4.1667cqw; } /* 560 / 600 — the contact boxes sit at the design depth (Figma Info h600) */
.cons__head { display: flex; flex-direction: column; gap: 2.2222cqw; } /* 32 */
.cons__head .eyebrow__label { opacity: 0.8; }
.cons__title { color: rgba(30, 46, 45, 0.8); max-width: 28.125cqw; } /* 405 */
.cons__sub { color: var(--evergreen); opacity: 0.6; max-width: 29.2361cqw; } /* 421 */
.cons__boxes { display: flex; flex-direction: column; gap: 2.7778cqw; } /* 40 */
.cons__box { display: flex; flex-direction: column; gap: 0.5556cqw; } /* 8 between lines (Figma 270:20225) */
.cons__box-label { font-size: var(--fs-eyebrow, var(--fs-caption)); font-size: var(--fs-caption); line-height: 1.5; letter-spacing: 0.02em; color: var(--evergreen); opacity: 0.6; margin-bottom: 0.2778cqw; } /* +4 → 12 under the label */
.cons__box-line { font-size: var(--fs-footer-h); line-height: 1.2; color: var(--charcoal); }
.cons__box-line a { color: inherit; text-decoration: underline; text-underline-offset: 3px; transition: opacity 0.2s ease; }
.cons__box-line a:hover { opacity: 0.6; }

.cons__card { width: 46.8056cqw; background: #FFFFFF; border-radius: var(--r-card); padding: var(--card-pad); } /* 674 */
.cons__alert {
  margin-bottom: 1.6667cqw; padding: 1.1111cqw 1.25cqw; /* 24 / 16 18 */
  background: var(--parchment); border-radius: 0.4167cqw; /* 6 */
  font-size: var(--fs-body); line-height: 1.6; color: var(--charcoal);
}
.cons__fields { display: flex; flex-direction: column; gap: 1.6667cqw; } /* 24 */
.cons__field { display: flex; flex-direction: column; gap: 0.8333cqw; } /* 12 */
.cons__field:has(.cons__chips) { gap: 1.1111cqw; } /* 16 above the chip rows (Figma) */
.cons__label { font-size: var(--fs-caption); line-height: 1.45; color: var(--charcoal); }
.cons__chips { display: inline-flex; align-self: flex-start; gap: 0.2778cqw; background: var(--paper); border-radius: var(--r-btn); } /* 4 */
.cons__chip input { position: absolute; opacity: 0; pointer-events: none; }
.cons__chip { position: relative; display: inline-flex; cursor: pointer; }
.cons__chip .ins-segment { opacity: 0.35; }
.cons__chip input:checked + .ins-segment { opacity: 1; background: #FFFFFF; border-color: rgba(35, 33, 32, 0.08); }
.cons__chip input:focus-visible + .ins-segment { outline: 2px solid var(--evergreen); outline-offset: 2px; }
.cons__inputs { display: flex; flex-direction: column; gap: 0.8333cqw; } /* 12 */
.cons__row { display: flex; gap: 0.8333cqw; }
/* Cell = input + its inline error caption (red border + message below, standard form UX).
   ⚠️ The row's flex:1 lives on the CELL only — a `.cons__row .cons__input { flex:1 }`
   descendant rule squashed the inputs inside the cell's COLUMN flex (basis 0 beats
   height), the same bug that hit mobile earlier. */
.cons__cell { display: flex; flex-direction: column; gap: 0.4167cqw; } /* 6 */
.cons__row .cons__cell { flex: 1; min-width: 0; }
.cons__input--error, .cons__input--error:focus { border-color: rgba(179, 56, 44, 0.65); }
.cons__error { font-size: var(--fs-caption); line-height: 1.4; color: #B3382C; }
.cons__card { scroll-margin-top: 6.9444cqw; } /* 100 — the 422 re-render scrolls the form under the fixed header */
.cons__input {
  width: 100%; height: 3.75cqw; padding-inline: 1.25cqw; /* 54 / 18 */
  background: var(--paper); border: 1px solid transparent; border-radius: var(--r-btn);
  font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.6; color: var(--charcoal);
  transition: border-color 0.2s ease;
}
.cons__input::placeholder { color: rgba(35, 33, 32, 0.4); }
.cons__input:focus { outline: none; border-color: rgba(35, 33, 32, 0.3); }
.cons__textarea { height: 9.9306cqw; padding-block: 1.25cqw; resize: vertical; } /* 143 */
/* Custom dropdown (dropdown_controller) — trigger mirrors the inputs; the panel is a
   white r12 card with paper-hover options in the site's own style. */
.dropdown { position: relative; }
.dropdown__button {
  display: flex; align-items: center; justify-content: space-between; gap: 1.25cqw;
  width: 100%; height: 3.75cqw; padding-inline: 1.25cqw; /* 54 / 18 */
  background: var(--paper); border: 1px solid transparent; border-radius: var(--r-btn);
  font-family: var(--font-body); font-weight: 500; font-size: var(--fs-label); line-height: 1.2; color: var(--charcoal);
  cursor: pointer; transition: border-color 0.2s ease;
}
.dropdown__button:focus-visible, .is-open .dropdown__button { outline: none; border-color: rgba(35, 33, 32, 0.3); }
/* "Select a service" reads full-strength like a segment label (Figma Form/Select) — no placeholder dimming */
.dropdown__chevron { width: 14px; height: 14px; color: var(--charcoal); flex-shrink: 0; transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); } /* hairline stroke → fixed px (rules §1) */
.is-open .dropdown__chevron { transform: rotate(180deg); }
.dropdown__panel {
  position: absolute; left: 0; right: 0; top: calc(100% + 0.4167cqw); z-index: 20; /* 6 */
  display: flex; flex-direction: column; gap: 2px; padding: 0.4167cqw; /* 6 */
  background: #FFFFFF; border: 1px solid rgba(35, 33, 32, 0.08); border-radius: var(--r-card);
  box-shadow: 0 16px 40px rgba(19, 20, 16, 0.10);
  opacity: 0; transform: translateY(-4px);
  transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.is-open .dropdown__panel { opacity: 1; transform: none; }
.dropdown__option {
  display: block; width: 100%; text-align: left;
  padding: 0.9722cqw 1.25cqw; /* 14 18 */
  background: transparent; border: 0; border-radius: 0.5556cqw; /* 8 */
  font-family: var(--font-body); font-weight: 500; font-size: var(--fs-label); line-height: 1.2; color: var(--charcoal);
  cursor: pointer; transition: background-color 0.2s ease;
}
.dropdown__option:hover, .dropdown__option:focus-visible { background: var(--paper); outline: none; }
.dropdown__option.is-selected { background: var(--sage); }
.cons__rule { border-top: 1px solid rgba(35, 33, 32, 0.1); margin-block: 2.2222cqw; } /* 32; 20% → 10% (client, 30 Jul — вдвое бледнее) */
.cons__submit-row { display: flex; align-items: flex-start; gap: 1.6667cqw; } /* 24 */
.cons__submit { flex-shrink: 0; }
.cons__disclaimer { font-size: var(--fs-caption); line-height: 1.45; color: rgba(35, 33, 32, 0.4); max-width: 22.2222cqw; } /* 320 */

/* ═══ LEGAL + STATUS PAGES (wireframes 3:759/3:794/3:823/3:291/3:843) ═════ */

.legal-page { padding: 13.75cqw var(--gutter) var(--section-py); } /* 88 fixed bar + 110 */
.legal-page__row { display: flex; gap: 0.8333cqw; } /* 12 */
.legal-page__rail { width: 30.9028cqw; flex-shrink: 0; padding-top: 0.6944cqw; color: var(--evergreen); } /* 445 / 10 */
.legal-page__rail .eyebrow__label { opacity: 0.8; }
.legal-page__main { flex: 1; max-width: 55.5556cqw; } /* 800 */
.legal-page__title { color: rgba(30, 46, 45, 0.8); }
.legal-page__prose { display: flex; flex-direction: column; padding-top: 6.1111cqw; } /* 88 = header pb 72 + 16 gap (Figma 270:20811/20818) */
.legal-page__section {
  display: flex; flex-direction: column; gap: 0.8333cqw; padding-block: 1.9444cqw; /* 12 / 28 */
  border-top: 1px solid rgba(35, 33, 32, 0.15); /* section hairlines (Figma 270:20819) */
}
.legal-page__section:last-child { border-bottom: 1px solid rgba(35, 33, 32, 0.15); }
.legal-page__h { color: rgba(30, 46, 45, 0.8); }
.legal-page__p { font-size: var(--fs-body); line-height: 1.6; color: var(--evergreen); } /* Body/Base 14, full ink (Figma) */

/* Thank-you / 404 — centred-column status page. */
.status-page { padding: 15.8333cqw var(--gutter) 8.3333cqw; } /* 88 fixed bar + 140 / 120 */
/* dark variant (Thank You 270:20318 + 404 270:21085): full evergreen band under the dark header */
.status-page--dark { --bleed: var(--evergreen); background: var(--evergreen); color: var(--paper); padding: 15.1389cqw var(--gutter) 10.4167cqw; } /* 88+130 / 150 */
.status-page--dark .eyebrow { color: var(--paper); }
.status-page--dark .eyebrow__diamond { color: var(--sage); } /* sage glyph on dark (Figma asset) */
.status-page--dark .eyebrow__label { opacity: 0.8; }
.status-page--dark .status-page__title { color: var(--paper); }
.status-page__accent { color: var(--sage); }
.status-page__title--404 { max-width: 30.1389cqw; } /* 434 */
.status-page--dark .status-page__p { color: var(--paper); opacity: 0.8; max-width: 31.8056cqw; } /* 458 */
.status-page--dark .status-page__fine { color: var(--paper); opacity: 0.65; }
.status-page--dark .btn--outline { color: var(--paper); border-color: rgba(250, 250, 249, 0.3); }
.status-page--dark .btn--outline:hover { border-color: var(--paper); }
/* dark slim pages: no parchment glow — plain evergreen behind the sage footer card */
.cta-footer--slim { background: var(--evergreen); }
.status-page__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 1.6667cqw; max-width: 50cqw; } /* 24 / 720 */
/* centred pattern (Thank You design 270:20318; 404 follows it) */
.status-page--centered .status-page__inner {
  align-items: center; text-align: center; margin-inline: auto; max-width: 48.6111cqw; /* 700 */
}
.status-page--centered .status-page__p { max-width: 43.0556cqw; } /* 620 */
.status-page--centered .status-page__fine { max-width: 25.9722cqw; } /* 374 */
.status-page__actions { display: flex; align-items: center; gap: 0.2778cqw; padding-top: 0.8333cqw; } /* 4 / 12 (Figma Links pt) */
.status-page__inner .eyebrow__label { opacity: 0.8; }
.status-page__title { color: rgba(30, 46, 45, 0.8); text-wrap: balance; }
.status-page__p { color: var(--evergreen); opacity: 0.75; }
.status-page__p a { color: inherit; }
.status-page__fine { font-size: var(--fs-caption); line-height: 1.45; color: var(--evergreen); opacity: 0.5; max-width: 34.7222cqw; margin-top: 0.2778cqw; } /* 500; +4 → 28 above (Figma) */
.status-page__fine a { color: inherit; }
.status-page__links { display: flex; align-items: center; gap: 2.2222cqw; } /* 32 */
.status-page__link {
  font-family: var(--font-body); font-weight: 500; font-size: var(--fs-label); line-height: 1.3;
  color: var(--evergreen); text-decoration: underline; text-underline-offset: 4px;
  transition: opacity 0.2s ease;
}
.status-page__link:hover { opacity: 0.6; }
.status-page__arrow { display: none; } /* the ↗ pairs read cleaner without on light bg — keep the hook */
.status-page__cta { display: flex; align-items: center; gap: 1.6667cqw; padding-top: 1.1111cqw; } /* 24 / 16 */

/* slim footer band (thank-you / 404): no CTA split — the sage card rides high */
.cta-footer--slim .cta-footer__cap { padding-top: 2.7778cqw; } /* 40 */

/* ═══ ABOUT (270:19746) ═══════════════════════════════════════════════════ */

/* Home · 08 Service Area re-used on About sits on PAPER, not parchment (client/Figma). */
.home-area--paper { background: var(--paper); --bleed: var(--paper); }

/* 01 Hero — evergreen full-bleed band under the dark header; copy left, portrait r12 right. */
.about-hero {
  --bleed: var(--evergreen);
  position: relative; /* anchors .hero-blur-top */
  display: flex; align-items: stretch; gap: 4.4444cqw; /* 64; copy TOP-aligned, photo stretches (client) */
  /* 100svh, but the ceiling is DERIVED FROM THE PHOTO: the band may grow only until the
     portrait (which stretches with it) reaches its max allowed aspect — width × k. Beyond
     that the section locks. One knob: --portrait-max-aspect (baseline box is ~1.02). */
  --portrait-max-aspect: 1.35;
  min-height: min(100vh, calc(38.0556cqw * var(--portrait-max-aspect) + 10.5556cqw));
  min-height: min(100svh, calc(38.0556cqw * var(--portrait-max-aspect) + 10.5556cqw)); /* + top 112 & bottom 40 paddings */
  padding: 7.7778cqw var(--gutter) 2.7778cqw; /* 112 (88 bar + 24) / 40 */
  color: var(--parchment);
}
.about-hero__copy { flex: 1; display: flex; flex-direction: column; gap: 2.2222cqw; } /* 32 */
.about-hero__eyebrow .eyebrow__label { opacity: 0.8; }
.about-hero__text { display: flex; flex-direction: column; gap: 1.6667cqw; } /* 24 */
.about-hero__title { color: var(--sage); max-width: 49cqw; text-wrap: balance; } /* lh comes from the text-page ramp (90%) */ /* 706 (was 616 — Literata needs the extra to keep the designed 2-line break) */
.about-hero__sub { opacity: 0.7; max-width: 28.75cqw; } /* 414 */
.about-hero__sub-br { display: none; } /* shown on tablet only */
.about-hero__portrait { position: relative; width: 38.0556cqw; align-self: stretch; border-radius: var(--r-card); overflow: clip; flex-shrink: 0; } /* 548 wide; height comes ONLY from the band — min-height dropped (client, 30 Jul) */
/* ABSOLUTE — a plain img height:100% inside a stretching flex box silently falls back to
   its intrinsic height and INFLATES the section (bit us: the band ignored every ceiling). */
.about-hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; } /* subject rides HIGH in the box (client, 30 Jul — 15% left a third of wall above his head on laptop-height bands) */

/* 02 Story — two statement-skeleton rows (eyebrow col 445 + copy). */
.about-story {
  display: flex; flex-direction: column; gap: 2.7778cqw; padding: 8.3333cqw var(--gutter) 0; /* 40 / 120 */
  --fill-from: rgba(30, 46, 45, 0.1); --fill-to: rgba(30, 46, 45, 0.8);
}
.about-story .fill-word { transition-duration: 0.6s; } /* timed cascade (auto mode) */
.about-story__row { display: flex; gap: 0.8333cqw; } /* 12 */
.about-story__eyebrow { width: 30.9028cqw; flex-shrink: 0; color: var(--evergreen); } /* 445 */
.about-story__eyebrow .eyebrow__label { opacity: 0.8; }
.about-story__firm { flex: 1; color: rgba(30, 46, 45, 0.8); } /* Evergreen-80 heading rule */
.about-story__bio { flex: 1; font-size: var(--fs-body); line-height: 1.6; color: var(--evergreen); max-width: 50cqw; } /* 720 */

/* 03 Memberships & Recognition — evergreen r28 card, 24 side insets (footer rhythm). */
.about-creds { padding: 8.3333cqw 1.6667cqw 0; } /* 120 / 24 */
.about-creds__card { background: var(--evergreen); border-radius: 1.9444cqw; padding: 1.1111cqw; color: var(--paper); } /* 28 / 16 */
.about-creds__row { display: flex; justify-content: space-between; gap: 3.3333cqw; padding-left: 1.6667cqw; } /* 48 / 24 */
.about-creds__side {
  width: 25cqw; flex-shrink: 0; /* 360 */
  display: flex; flex-direction: column; justify-content: space-between; gap: 1.6667cqw;
  padding-block: 1.6667cqw; /* 24 */
}
.about-creds__side .eyebrow__label { opacity: 0.8; }
.about-creds__fine { font-size: var(--fs-caption); line-height: 1.45; opacity: 0.4; max-width: 23.6111cqw; } /* 12 (client, was 10) / 340 */
.about-creds__cards { width: 62.7083cqw; display: flex; flex-direction: column; gap: 0.8333cqw; } /* 903 / 12 */
.about-creds__rule { border-top: 1px solid rgba(250, 250, 249, 0.05); margin: 0.8333cqw 0 0.8333cqw 1.6667cqw; } /* cream 5% */

/* Award card (components/award_card) — sage plate: white logo box + title/desc column. */
.award-card { display: flex; align-items: stretch; gap: 1.6667cqw; background: var(--sage); border-radius: var(--r-card); padding: 0.8333cqw; } /* 24 (article-card rhythm) / 12 */
.award-card__logo {
  width: 12.5cqw; height: 12.5cqw; flex-shrink: 0; /* 180 */
  display: flex; align-items: center; justify-content: center;
  background: #FFFFFF; border-radius: 0.4167cqw; padding: 1.1111cqw; /* 6 / 16 */
}
.award-card__logo img { mix-blend-mode: darken; }
.award-card__logo--naela img { width: 9.0278cqw; height: auto; } /* 130 */
.award-card__logo--seal img { width: 7.9167cqw; height: auto; }  /* 114 */
.award-card__pair { display: flex; align-items: center; }
.award-card__tb-badge { width: 5cqw; height: auto; }             /* 72 */
.award-card__tb-text { width: 4.8611cqw; height: auto; }         /* 70 */
.award-card__logo--ap img { width: 8.6111cqw; height: auto; }    /* 124 */
.award-card__text { flex: 1; display: flex; flex-direction: column; gap: 0.8333cqw; padding: 0.4167cqw 0.8333cqw 0.8333cqw 0; } /* article card: title→desc 12, px/pb 12 (left inset comes from the 24 gap) */
.award-card__title { color: var(--evergreen); max-width: 24.0278cqw; text-wrap: balance; } /* 346; no orphan words (Literata) */
.award-card__desc { font-size: var(--fs-body); line-height: 1.6; color: var(--charcoal); opacity: 0.6; max-width: 21.8056cqw; } /* 314 */

/* ═══════════════════════════════════════════════════════════════════════════
   ADAPTIVE LAYOUT — TABLET (≤1023, ÷7.68) & MOBILE (≤639, ÷3.75)
   Layout restructures + component geometry per band. Type/spacing tokens switch
   automatically via the --fs- and --gutter band vars above.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  /* TABLET band: components */
  .btn { gap: 1.5625cqw; padding: 1.8229cqw 2.0833cqw; }
  .btn--sm { padding: 1.5625cqw 1.8229cqw; }
  .btn--outline { padding: calc(1.8229cqw - 1px) calc(2.0833cqw - 1px); }
  .btn--outline.btn--sm { padding: calc(1.5625cqw - 1px) calc(1.8229cqw - 1px); }
  .btn__diamond { width: 1.0417cqw; height: 1.0417cqw; }
  .eyebrow { gap: 1.0417cqw; }
  .eyebrow__diamond { width: 1.5625cqw; height: 1.5625cqw; }
  /* header: TABLET reuses the mobile burger + drawer (interim, per client — a dedicated
     tablet/mobile menu design will come later; the inline desktop nav felt cramped here) */
  .site-header__bar { height: 9.375cqw; }
  .site-header--solid .site-header__bar { height: 7.8125cqw; }
  .site-header__logo { height: 4.4271cqw; } /* 34 — bumped per client */
  .site-header__nav, .site-header__right { display: none; }
  .site-header__burger { display: flex; width: 5.7292cqw; height: 5.7292cqw; margin-right: -1.0417cqw; }
  .site-header__burger-lines { width: 24px; height: 10px; }
  .site-header__drawer { padding: 15.625cqw var(--gutter) 4.1667cqw; } /* 120 / 24 / 32 */
  .site-header__drawer-nav { gap: 3.125cqw; transform: translateY(-3.125cqw); } /* 24, nudged 24 up like mobile */
  .site-header__drawer-stamp { width: 80%; margin-inline: auto; } /* −20% on tablet (client) */
  .site-header__drawer-link { font-size: 4.1667cqw; } /* 32 */
  .site-header__drawer-foot { gap: 1.0417cqw; }       /* 8 */
}
@media (max-width: 1023px) {
  /* hero */
  .home-hero__copy { top: 14.3229cqw; width: auto; right: var(--gutter); gap: 3.125cqw; } /* 110 (raised per client) / 24 */
  .home-hero__sub { max-width: 58.5938cqw; }                    /* 450 */
  .home-hero__title { font-size: var(--fs-hero); }              /* the 100px bump is desktop-only */
  .home-hero__cta { bottom: 4.1667cqw; gap: 3.125cqw; }         /* 32 / 24 */
  .home-hero__note { width: auto; }

  /* credential marquee */
  .home-cred { padding-block: 4.1667cqw; }                      /* 32 */
  .cred-card { height: 14.3229cqw; gap: 2.6042cqw; padding: 2.6042cqw; margin-right: 1.5625cqw; } /* 110 / 20 / 20 / 12 */
  .cred-card__seal { width: 8.8542cqw; height: 8.8542cqw; }     /* 68 */
  .cred-card__naela { width: 16.6667cqw; height: 4.3576cqw; }   /* 128×33.5 */
  .cred-card__tb-badge { width: 8.5938cqw; height: 8.2682cqw; } /* 66×63.5 */
  .cred-card__tb-text { width: 8.3333cqw; height: 6.25cqw; }    /* 64×48 */
  .cred-card__ap { width: 11.0677cqw; height: 8.6806cqw; }      /* 85×67 */

}
@media (max-width: 1023px) {
  /* statement — stack: eyebrow above the copy */
  .home-statement { flex-direction: column; gap: 3.125cqw; }    /* 24 */
  .home-statement__eyebrow { width: auto; }

  /* services — header row (heading left, button RIGHT) above a 2-col grid; sticky OFF */
  .home-svc { flex-direction: column; gap: 7.2917cqw; }         /* 56 */
  .home-svc__head { position: static; height: auto; align-self: stretch; flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 4.1667cqw; }
  .home-svc__heading, .home-svc__cta { position: static; }
  .home-svc__cta { flex-shrink: 0; align-self: flex-end; } /* bottom-aligned with the heading block */
  .home-svc__sub { max-width: 55.9896cqw; text-wrap: balance; } /* 430, even 2 lines */
  .home-svc__grid { width: 100%; }
  .svc-card { height: 26.0417cqw; padding: var(--card-pad) 2.3438cqw var(--card-pad) var(--card-pad); } /* 200; pr 18 */
  .svc-card__title { width: 70%; }
  .svc-card__chip { width: 5.2083cqw; height: 5.2083cqw; border-radius: 0.7813cqw; } /* 40 / 6 */
  .svc-card__arrow { width: 1.8229cqw; height: 1.8229cqw; }     /* 14 */
  .svc-card__foot { gap: 1.5625cqw; }
  .svc-card__desc { max-width: 90%; }

}
@media (max-width: 1023px) {
  /* about — card stacks: copy above, portrait below */
  .home-about { padding-inline: var(--gutter); }
  .home-about__card { flex-direction: column; align-items: stretch; gap: 4.1667cqw; padding: 3.125cqw; border-radius: 2.6042cqw; } /* 32 / 24 / 20 */
  .home-about__copy { height: auto; gap: 3.125cqw; padding-block: 1.0417cqw; } /* 24 */
  .home-about__text { gap: 3.2cqw; } /* 12 — title→sub */
  .home-about__heading { max-width: 100%; text-wrap: balance; }
  .home-about__sub { max-width: 74.2188cqw; text-wrap: balance; } /* 570 */
  .home-about__portrait { width: 100%; height: auto; aspect-ratio: 560 / 572; } /* the desktop box's aspect + centred crop (client) */

  /* how it works — heading left + button RIGHT; step cards stacked (client) */
  .home-how { gap: 7.2917cqw; }                                 /* 56 */
  .home-how__header { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 3.125cqw; }
  .home-how__heading { max-width: 46.875cqw; }                  /* 360 */
  .home-how__steps { flex-direction: column; gap: 1.5625cqw; }  /* 12 */
  .how-step { height: auto; padding: var(--card-pad); gap: 5.2083cqw; } /* 40 */
  .how-step__title { max-width: 100%; } /* explicit <br> owns the break */
  .how-step__copy { max-width: 55.9896cqw; text-wrap: balance; } /* 430 — air right, even lines */
  .svc-card__desc { text-wrap: balance; }
  .how-step__chip { width: 6.7708cqw; height: 6.7708cqw; border-radius: 0.7813cqw; } /* 52 / 6 */
  .how-step__body { gap: 1.5625cqw; }

  /* testimonial */
  .home-quote { gap: 3.125cqw; }                                /* 24 */
  .home-quote__stage { gap: 3.125cqw; }                         /* 24 */
  .home-quote__text { max-width: 100%; }
  .home-quote__meta { gap: 1.0417cqw; }
  .home-quote__stars { gap: 0.5208cqw; }
  .home-quote__star { width: 1.8229cqw; height: 1.8229cqw; }
  .home-quote__nav { gap: 0.5208cqw; padding: 0.5208cqw; margin-top: 1.0417cqw; border-radius: 1.0417cqw; } /* 4 / +8 */
  .home-quote__arrow { width: 5.7292cqw; height: 5.7292cqw; border-radius: 0.7813cqw; } /* 44 */
  .home-quote__arrow-icon { width: 2.0833cqw; }
  .home-quote__mark { width: 4.0039cqw; height: 3cqw; }         /* −25% */
  .home-quote__text { max-width: 79.4271cqw; }                  /* 610 */

  /* service area — stack: copy above, map below */
  .home-area { flex-direction: column; align-items: stretch; gap: 7.2917cqw; } /* 56 */
  .home-area__copy { width: 100%; gap: 3.125cqw; } /* 24 */
  .home-area__heading { max-width: 65.1042cqw; text-wrap: balance; } /* 500 */
  .home-area__sub { max-width: 74.2188cqw; text-wrap: balance; }      /* 570 — never full-bleed lines */
  .home-area__map { width: 100%; height: 58.5938cqw; border-radius: 1.0417cqw; } /* 450 / 8 */

  /* cta + footer */
  .cta-split__inner { width: 100%; padding-inline: var(--gutter); gap: 3.125cqw; }
  .cta-split__diamond { width: 3.6458cqw; height: 3.6458cqw; }  /* 28 */
  .cta-split__row { gap: 2.3438cqw; padding-top: 1.0417cqw; }
  .cta-footer__foot { padding: 0 3.125cqw 3.125cqw; }           /* 24 */
  .site-footer { gap: 13.0208cqw; padding: 4.1667cqw 3.125cqw; border-radius: 2.6042cqw; } /* 100 / 32 24 / 20 */
  .site-footer__columns { flex-wrap: wrap; gap: 7.2917cqw 3.125cqw; justify-content: flex-start; } /* 56 / 24 */
  .site-footer__col { width: calc(50% - 1.5625cqw); gap: 1.5625cqw; }
  .site-footer__list { gap: 0.5208cqw; }
  .site-footer__legal { flex-direction: column-reverse; align-items: flex-start; gap: 4.1667cqw; } /* 32; badges first, LEGAL at the bottom (client) */
  .site-footer__fine { max-width: 63.8021cqw; }                 /* 490 */
  .site-footer__badges { gap: 1.5625cqw; }
  .footer-badge--awards { gap: 2.0833cqw; padding: 2.0833cqw; border-radius: 1.5625cqw; }
  .footer-badge__tb-badge { width: 7.6823cqw; height: 7.2917cqw; }  /* 59×56 */
  .footer-badge__tb-text { width: 7.4219cqw; height: 5.599cqw; }    /* 57×43 */
  .footer-badge__ap { width: 10.026cqw; height: 7.8125cqw; }        /* 77×60 */
  .footer-badge--sl { padding: 1.5625cqw 1.5625cqw 1.5625cqw 2.0833cqw; gap: 1.0417cqw; border-radius: 1.5625cqw; }
  .footer-badge__sl-chip { width: 3.125cqw; height: 3.125cqw; border-radius: 0.7813cqw; } /* 24 / 6 */
  .footer-badge__sl-arrow { width: 1.0417cqw; height: 1.0417cqw; }  /* 8 */
  .footer-badge__sl-logo { width: 17.5781cqw; height: 3.6458cqw; }  /* 135×28 */
  .site-footer__wordmark-img { width: 200cqw; opacity: 0.35; }      /* keeps the letters big on small screens */
  .site-footer__wordmark-diamond { width: 5.7292cqw; height: 5.7292cqw; }
  .site-footer__wordmark .marquee__group { gap: 5.7292cqw; padding-right: 5.7292cqw; }

  /* consultation */
  .cons { flex-direction: column; gap: 5.2083cqw; padding-top: 15.625cqw; } /* 40 / 120 */
  .cons__info { width: 100%; min-height: 0; gap: 5.2083cqw; } /* the 600 floor is desktop-only */
  .cons__title { max-width: 58.5938cqw; text-wrap: balance; }   /* 450 */
  .cons__sub { max-width: 74.2188cqw; text-wrap: balance; }     /* 570 */
  .cons__boxes { flex-direction: row; gap: 6.25cqw; }           /* 48 */
  .cons__card { width: 100%; }
  .cons__fields { gap: 3.125cqw; }                              /* 24 */
  .cons__field { gap: 1.5625cqw; }
  /* The base :has(.cons__chips) gap is desktop-cqw (≈8px here) and outranks the plain
     .cons__field rule — re-state 16px in this band's scale or the label glues to the chips. */
  .cons__field:has(.cons__chips) { gap: 2.0833cqw; } /* 16 */
  .cons__inputs { gap: 1.5625cqw; }
  .cons__row { gap: 1.5625cqw; }
  .cons__input { height: 7.0313cqw; padding-inline: 2.3438cqw; } /* 54 / 18 */
  .cons__textarea { height: 18.6198cqw; padding-block: 2.3438cqw; } /* 143 */
  .dropdown__button { height: 7.0313cqw; padding-inline: 2.3438cqw; }
  .dropdown__chevron { width: 1.8229cqw; height: 1.8229cqw; }
  .dropdown__panel { padding: 0.7813cqw; border-radius: 1.5625cqw; }
  .dropdown__option { padding: 1.8229cqw 2.3438cqw; border-radius: 1.0417cqw; }
  .cons__rule { margin-block: 4.1667cqw; }                      /* 32 */
  .cons__disclaimer { max-width: 41.6667cqw; }                  /* 320 */

  /* legal + status */
  .legal-page { padding-top: 15.625cqw; }                       /* 120 */
  .legal-page__row { flex-direction: column; gap: 3.125cqw; }   /* 24 — eyebrow above (statement pattern) */
  .legal-page__rail { width: auto; padding-top: 0; }
  .legal-page__main { max-width: 100%; }
  .legal-page__prose { max-width: 74.2188cqw; padding-top: 6.25cqw; } /* 570 / 48 */
  .legal-page__section { gap: 1.5625cqw; padding-block: 3.6458cqw; } /* 12 / 28 */
  .status-page { padding: 23.4375cqw var(--gutter) 11.4583cqw; } /* 180 / 88 */
  .status-page__inner { max-width: 74.2188cqw; gap: 3.125cqw; }
  .status-page__fine { max-width: 58.5938cqw; }

  /* insights article */
  .art-cover { gap: 4.1667cqw; padding-top: 15.625cqw; padding-bottom: 2.0833cqw; } /* 32 / 120 / 16 */
  .art-cover__head { flex-direction: column-reverse; gap: 3.125cqw; } /* 24 — meta under the heading */
  /* full-width split row: byline LEFT, tags RIGHT (DOM = tags first → row-reverse) */
  .art-cover__meta { width: 100%; flex-direction: row-reverse; justify-content: space-between; align-items: center; gap: 2.0833cqw; padding-top: 0; }
  .art-cover__byline br { display: none; }
  .art-cover__byline-when::before { content: " · "; } /* the hidden <br> needs a separator on one line */
  .art-cover__title { max-width: 100%; text-wrap: balance; font-size: var(--fs-page); } /* back on the band ramp (52 is desktop-only) */
  .art-cover__dek { max-width: 74.2188cqw; text-wrap: balance; }
  .art-cover__img { height: 52.0833cqw; border-radius: 2.3438cqw; } /* 400 / 18 */
  .art-body { flex-direction: column; gap: 6.25cqw; padding-block: 7.2917cqw 11.4583cqw; } /* 48 / 56 / 88 */
  /* the chapter rail rides ABOVE the body on tablet/mobile (client, 30 Jul — was hidden) */
  .article-toc { position: static; width: 100%; gap: 2.0833cqw; }
  .article-toc__rail { width: 100%; }
  .article-toc__link { padding: 1.3021cqw 2.0833cqw; } /* 10 16 — base padding is desktop-cqw (≈8px inset here, labels hugged the rail) */
  .article-toc--empty { display: none; }                        /* no spacer needed in the column flow */
  .art-body__content { max-width: 100%; }
  .article-content p { margin-top: 3.125cqw; } /* 24 */
  .article-content ul, .article-content ol { margin-top: 4.1667cqw; margin-bottom: 4.1667cqw; gap: 1.5625cqw; } /* 32 / 12 */
  .article-content h2 { margin-top: 6.25cqw; }                  /* 48 */
  .article-content blockquote { margin-block: 3.125cqw; padding: 4.1667cqw 0; } /* 24 / 32 */
  .art-share { margin-top: 6.25cqw; padding-top: 4.1667cqw; gap: 2.0833cqw; } /* 48 / 32 / 16 */
  .art-share__row { gap: 1.0417cqw; }
  .art-share__btn { width: 6.25cqw; height: 6.25cqw; }          /* 48 */
  .art-more { gap: 5.2083cqw; }
  .art-more__grid { grid-template-columns: repeat(2, 1fr); gap: 1.5625cqw; }

  /* insights */
  .ins-header { padding: 15.625cqw var(--gutter) 4.1667cqw; }   /* 120 / 32 */
  .ins-filters-band { padding-top: 8.3333cqw; }                 /* 64 */
  .ins-segment { padding: calc(1.8229cqw - 1px) 2.0833cqw; }    /* the .btn's 14/16 − border */
  .ins-featured { padding: 0 3.125cqw; }                        /* 24 */
  .featured-card { flex-direction: column-reverse; padding: 1.5625cqw; border-radius: 2.6042cqw; gap: 2.0833cqw; } /* 12 / 20 / 16 */
  .featured-card__copy { padding: 1.5625cqw 1.5625cqw 2.0833cqw; gap: 4.1667cqw; }
  .featured-card__title { max-width: 100%; text-wrap: balance; }
  .featured-card__dek { max-width: 74.2188cqw; text-wrap: balance; } /* 570 */
  .featured-card__img { width: 100%; height: 52.0833cqw; }      /* 400 */
  .featured-card__diamond { width: 1.0417cqw; height: 1.0417cqw; }
  .ins-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5625cqw; padding-top: 6.25cqw; } /* 12 / 48 */
  .ins-pagination { margin-top: -3.125cqw; }                    /* 64 under the cards (grid pb 88 − 24) */
  .ins-pagination__page, .ins-pagination__arrow { width: 6.3802cqw; height: 6.3802cqw; } /* 49 */
  .article-card { gap: 3.125cqw; padding: 1.5625cqw; border-radius: 2.3438cqw; } /* 24 / 12 / 18 */
  .article-card__img { height: 34.5052cqw; border-radius: 0.7813cqw; } /* 265 */
  .article-card__tags { top: 1.0417cqw; left: 1.0417cqw; } /* 8 — the base offset is desktop-cqw, re-state per band */
  .article-card__tag { padding: 0.7813cqw 1.3021cqw; }
  .article-card__text { gap: 3.125cqw; padding: 0 1.5625cqw 1.5625cqw; }
  .article-card__top { gap: 1.5625cqw; }
  .article-card__cta, .featured-card__cta { gap: 1.5625cqw; } /* 12 — base gap is desktop-cqw (≈6px here) */
  .article-card__diamond { width: 1.0417cqw; height: 1.0417cqw; }
  .featured-card__img .article-card__tags { top: 1.0417cqw; left: 1.0417cqw; }

  /* service detail */
  .page-hero__stack { gap: 0.7813cqw; }                         /* 6 (client: halve it below 1024) */
  .page-hero--sheet { min-height: 48.4375cqw; }                 /* 360 + 12 sheet overlap */
  /* Eyebrow becomes a GLASS CHIP below 1024 (Figma 447:23062 — plain text sank into the
     photos): white 65% + blur, r4, 6/8 padding, evergreen diamond + charcoal label. */
  .page-hero__eyebrow .eyebrow {
    background: rgba(255, 255, 255, 0.65);
    -webkit-backdrop-filter: blur(19px); backdrop-filter: blur(19px);
    border-radius: 4px; padding: 6px 12px 6px 8px; /* extra air on the right — the diamond balances the left (client) */
  }
  .page-hero__eyebrow { color: var(--evergreen); }
  .page-hero__eyebrow .eyebrow__label { color: var(--charcoal); opacity: 1; }
  .home-hero__photo { object-position: 85% 50%; } /* keep the cyclists (right of frame) in the tablet crop */
  .svc-sheet { margin-top: -1.5625cqw; gap: 4.1667cqw; padding-top: 4.1667cqw; } /* 32 */
  .svc-sheet__row { flex-direction: column; gap: 3.125cqw; }    /* 24 */
  .svc-sheet__side { width: auto; }
  .svc-sheet__sub { max-width: 74.2188cqw; text-wrap: balance; } /* 570 */
  .svc-checklist { flex-direction: column; gap: 3.125cqw; padding-top: 11.4583cqw; } /* 24 / 88 */
  .svc-checklist__side { width: auto; padding-top: 0; }
  .svc-check { gap: 2.3438cqw; padding: 0.7813cqw; border-radius: 0.7813cqw; } /* 18 / 6 */
  .svc-check__box { width: 6.7708cqw; height: 6.7708cqw; border-radius: 0.5208cqw; } /* 52 / 4 */
  .svc-check__icon { width: 1.5625cqw; height: 1.5625cqw; }     /* 12 */
  .svc-how { gap: 5.2083cqw; }                                  /* 40 */
  .svc-how__heading { max-width: 58.5938cqw; text-wrap: balance; } /* 450 */
  .svc-how__steps { flex-direction: column; gap: 3.125cqw; }    /* 24 — stacked (home pattern) */
  .svc-step { flex: none; height: 31.25cqw; padding: 1.5625cqw var(--card-pad) var(--card-pad); margin-top: 2.3438cqw; gap: 5.2083cqw; border-radius: 0 1.5625cqw 1.5625cqw 1.5625cqw; } /* tab 18 above; FIXED 240 = the middle card's natural 199 + 20% — all three equal (client, 30 Jul); flex:none — the base flex:1 basis was eating the height */
  .svc-step__title { padding-top: 1.5625cqw; }                  /* +12 over the title (client) */
  .svc-step::before { width: 15.625cqw; height: 2.3438cqw; border-radius: 1.5625cqw 1.5625cqw 0 0; } /* 120 wide, 18 above */
  .svc-step::after { left: 15.625cqw; width: 1.5625cqw; height: 1.5625cqw; background: radial-gradient(circle at 100% 0, transparent 0 1.5625cqw, var(--mist) 1.5625cqw); }
  .svc-step__copy { max-width: 55.9896cqw; text-wrap: balance; } /* 430 */
  .svc-midcta__card { min-height: 0; gap: 5.2083cqw; padding: var(--card-pad); }
  .svc-midcta__copy { gap: 4.1667cqw; }                         /* 32 */
  .svc-midcta__head { gap: 1.0417cqw; }                         /* 8 */
  .svc-midcta__note { max-width: 55.9896cqw; }
  .svc-midcta__plate { border-radius: 0.7813cqw; padding-right: 3.125cqw; } /* 6 / 24 */
  .svc-midcta__union { width: 25cqw; height: 25cqw; }           /* 192 (+20%, client 30 Jul) */
  .svc-faq { flex-direction: column; gap: 3.125cqw; }           /* 24 */
  .svc-faq__rows { width: 100%; }
  .svc-faq-row__chip { width: 5.7292cqw; height: 5.7292cqw; border-radius: 0.7813cqw; } /* 44 / 6 */
  .svc-faq-row__icon { width: 1.8229cqw; height: 1.8229cqw; }
  .svc-faq-row__q { text-wrap: balance; }
  .svc-faq-row__a { max-width: 100%; }

  /* about */
  .about-hero { flex-direction: column; align-items: stretch; gap: 5.2083cqw; padding: 16.6667cqw var(--gutter) 5.2083cqw; min-height: 0; } /* content height — 100svh stretched the portrait absurdly (client) */
  .about-hero__title { max-width: 80.7292cqw; text-wrap: balance; } /* 620 */
  .about-hero__sub { max-width: 100%; text-wrap: initial; }        /* long line + explicit br (client) */
  .about-hero__sub-br { display: inline; }
  .about-hero__portrait { width: 100%; height: auto; flex: none; min-height: 0; aspect-ratio: 560 / 572; } /* the home-About box (client) */
  .about-hero__photo { object-position: 50% 50%; }
  .about-story { gap: 5.2083cqw; padding-top: 11.4583cqw; }         /* 40 / 88 */
  .about-story__row { flex-direction: column; gap: 3.125cqw; }      /* 24 */
  .about-story__eyebrow { width: auto; }
  .about-story__bio { max-width: 74.2188cqw; }                      /* 570 */
  /* dark card <1024: the label rail dissolves — eyebrow keeps its 24 text inset, the fine
     print RE-ORDERS below the cards, cards run edge-close (side inset = the card padding). */
  .about-creds { padding: 11.4583cqw 3.125cqw 5.2083cqw; }          /* 88 / 24 / 40 air under the dark card (client) */
  .about-creds__card { border-radius: 2.6042cqw; padding: 1.5625cqw 1.5625cqw 3.125cqw; } /* 20 / 12, bottom 24 — air under the fine print (client) */
  .about-creds__row { flex-direction: column; gap: 2.0833cqw; padding-inline: 0; } /* 16 label→cards */
  .about-creds__side { display: contents; }
  .about-creds__label { margin: 3.125cqw 0 0 1.5625cqw; } /* 24 air above the word, 12+12 left */
  .about-creds__fine { order: 10; margin: 2.0833cqw 0 0 1.5625cqw; max-width: 58.5938cqw; } /* 16 under the cards / 450 */
  .about-creds__cards { width: 100%; gap: 1.0417cqw; }              /* 8 between cards (client) */
  .about-creds__rule { margin: 3.125cqw 0 0; }                      /* 24 above = 24 below (label's own top margin) — line sits centred */
  .award-card { gap: 3.125cqw; padding: 1.5625cqw; }                /* 24 (article rhythm) / 12 */
  .award-card__logo { width: 18.2292cqw; height: 18.2292cqw; border-radius: 0.7813cqw; padding: 2.0833cqw; } /* 140 / 6 / 16 */
  .award-card__logo--naela img { width: 13.0208cqw; }               /* 100 */
  .award-card__logo--seal img { width: 11.7188cqw; }                /* 90 */
  .award-card__tb-badge { width: 7.8125cqw; }                       /* 60 */
  .award-card__tb-text { width: 7.5521cqw; }                        /* 58 */
  .award-card__logo--ap img { width: 11.7188cqw; }                  /* 90 */
  .award-card__text { gap: 1.5625cqw; padding: 0.7813cqw 1.5625cqw 1.5625cqw 0; } /* title→desc 12; px/pb 12 */
  .award-card__title { max-width: 46.875cqw; text-wrap: balance; }  /* 360 */
  .award-card__desc { max-width: 46.875cqw; text-wrap: balance; }

  /* services hub */
  .page-hero { min-height: 46.875cqw; }                         /* 360 */
  .page-hero--hub .page-hero__photo { object-position: 59% 50%; } /* family dead-center in the frame (client, 3 Aug) */
  .hero-blur-top { height: 11.4583cqw; }                        /* 88 */
  .page-hero__cap { padding: 15.625cqw var(--gutter) 4.1667cqw; } /* 120 / 32 */
  .svc-intro { gap: 5.2083cqw; padding-block: 7.2917cqw; }      /* 40 / 56 */
  .svc-intro__row { flex-direction: column; gap: 3.125cqw; }    /* 24 — eyebrow above copy (statement pattern) */
  .svc-intro__eyebrow { width: auto; }
  .svc-intro__anchors { margin-left: 0; gap: 0.5208cqw; }       /* 4 */
  .anchor-btn__arrow { width: 1.0417cqw; height: 1.3021cqw; }   /* 8×10 */
  .svc-group { flex-direction: column; gap: 4.1667cqw; padding-bottom: 7.2917cqw; } /* 32 / 56 */
  .svc-group__label { width: auto; padding-top: 0; gap: 2.0833cqw; } /* 16 (was 24, −⅓) eyebrow→lead */
  .svc-group__desc { max-width: 46.875cqw; text-wrap: balance; } /* 360 */
  .svc-group__cards { width: 100%; }
}

@media (max-width: 639px) { /* ── MOBILE ── */
  /* components */
  .btn { gap: 3.2cqw; padding: 3.7333cqw 4.2667cqw; }           /* 12 / 14 16 */
  .ins-header__br { display: inline; } /* "What we tell / our clients" wrap (client) */
  .btn--sm { padding: 3.2cqw 3.7333cqw; }
  .btn--outline { padding: calc(3.7333cqw - 1px) calc(4.2667cqw - 1px); }
  .btn--outline.btn--sm { padding: calc(3.2cqw - 1px) calc(3.7333cqw - 1px); }
  .btn__diamond { width: 2.1333cqw; height: 2.1333cqw; }        /* 8 */
  .eyebrow { gap: 2.1333cqw; }
  .eyebrow__diamond { width: 3.2cqw; height: 3.2cqw; }          /* 12 */

  /* header — lockup + burger; nav/phone/CTA live in the drawer */
  .site-header__bar { height: 16cqw; }                          /* 60 */
  .site-header--solid .site-header__bar { height: 14.9333cqw; } /* 56 */
  .site-header__logo { height: 6.9333cqw; }                     /* 26 */
  .site-header__nav, .site-header__right { display: none; }
  .site-header__burger { display: flex; width: 11.7333cqw; height: 11.7333cqw; margin-right: -2.1333cqw; }
  .site-header__burger-lines { width: 22px; height: 10px; }
  .site-header__drawer { padding: 24cqw var(--gutter) 8.5333cqw; } /* 90 / 16 / 32 */
  /* experiment (client): the three links sit dead-centre of the screen, both axes */
  .site-header__drawer-nav { transform: translateY(-6.4cqw); } /* nudged 24 up */
  .site-header__drawer-nav { gap: 6.4cqw; }          /* 24 */
  .site-header__drawer-link { font-size: 7.4667cqw; } /* 28 */
  .site-header__drawer-foot { gap: 2.1333cqw; }       /* 8 */

  /* hero */
  .home-hero__copy { top: 25.6cqw; width: auto; right: var(--gutter); gap: 3.2cqw; } /* 96 / 12 — tighter (client) */
  .home-hero__sub { max-width: 100%; }
  .home-hero__title { font-size: var(--fs-hero); }              /* the 100px bump is desktop-only */
  .home-hero__cta { right: var(--gutter); bottom: 6.4cqw; flex-direction: column; align-items: stretch; gap: 3.2cqw; } /* button on top, note under it */
  .home-hero__cta .btn { width: 100%; justify-content: center; }
  .home-hero__note { width: auto; white-space: nowrap; text-align: center; }
  .home-hero__note-br { display: none; }
  .home-hero__note-sep { display: inline; }
  .home-hero__note { width: auto; }

  /* credential marquee */
  .home-cred { padding-block: 6.4cqw; }                         /* 24 */
  .cred-card { height: 25.6cqw; gap: 4.2667cqw; padding: 4.2667cqw; margin-right: 3.2cqw; } /* 96 / 16 / 16 / 12 */
  .cred-card__seal { width: 14.9333cqw; height: 14.9333cqw; }   /* 56 */
  .cred-card__naela { width: 28cqw; height: 7.3333cqw; }        /* 105×27.5 */
  .cred-card__tb-badge { width: 14.4cqw; height: 13.8667cqw; }  /* 54×52 */
  .cred-card__tb-text { width: 13.8667cqw; height: 10.4cqw; }   /* 52×39 */
  .cred-card__ap { width: 18.6667cqw; height: 14.6667cqw; }     /* 70×55 */

  /* statement */
  .home-statement { flex-direction: column; gap: 4.2667cqw; }   /* 16 */
  .home-statement__eyebrow { width: auto; }

  /* services — single column */
  .home-svc { flex-direction: column; gap: 8.5333cqw; }         /* 32 */
  /* the header block dissolves (display: contents) so the CTA can re-order to the
     SECTION's bottom — the mobile pattern for every section with a header button */
  .home-svc__head { display: contents; }
  .home-svc__heading, .home-svc__cta { position: static; }
  .home-svc__heading { gap: 3.2cqw; } /* 12 — title→sub */
  .home-svc__cta { order: 10; align-self: stretch; }
  .home-svc__cta .btn { width: 100%; justify-content: center; }
  .home-svc__sub { max-width: 100%; text-wrap: pretty; } /* full width on mobile (client) */
  .home-svc__grid { width: 100%; grid-template-columns: 1fr; gap: 3.2cqw; }
  .svc-card { height: auto; min-height: 42.6667cqw; padding: var(--card-pad) 4.2667cqw var(--card-pad) var(--card-pad); gap: 8.5333cqw; } /* 160 / 32 */
  .svc-card__title { width: 75%; }
  .svc-card__chip { width: 10.6667cqw; height: 10.6667cqw; border-radius: 1.6cqw; } /* 40 / 6 */
  .svc-card__arrow { width: 3.7333cqw; height: 3.7333cqw; }     /* 14 */
  .svc-card__foot { gap: 3.2cqw; }
  .svc-card__desc { max-width: 100%; }

  /* about */
  .home-about { padding-inline: var(--gutter); }
  .home-about__card { flex-direction: column; align-items: stretch; gap: 6.4cqw; padding: 5.3333cqw; border-radius: 5.3333cqw; } /* 24 / 20 / 20 */
  .home-about__copy { height: auto; gap: 5.3333cqw; padding-block: 1.0667cqw; } /* 20 */
  .home-about__text { gap: 3.2cqw; } /* 12 — title→sub */
  .home-about__heading { max-width: 100%; text-wrap: balance; }
  .home-about__sub { max-width: 100%; text-wrap: pretty; } /* full width (client) */
  .home-about__portrait { width: 100%; height: auto; aspect-ratio: 560 / 572; } /* same box as desktop (client) */
  .home-about__body { gap: 6.4cqw; }

  /* how it works — column of auto-height cards */
  .home-how { gap: 8.5333cqw; }                                 /* 32 */
  .home-how__header { display: contents; }
  .home-how__header .btn { order: 10; width: 100%; justify-content: center; }
  .home-how__heading { max-width: 100%; }
  .home-how__steps { flex-direction: column; gap: 3.2cqw; }     /* 12 */
  .how-step { height: auto; padding: var(--card-pad); gap: 10.6667cqw; } /* 40 */
  .how-step__chip { width: 12.8cqw; height: 12.8cqw; border-radius: 1.6cqw; } /* 48 / 6 */
  .how-step__body { gap: 3.2cqw; }
  .how-step__title { max-width: 100%; }
  .how-step__copy { max-width: 100%; text-wrap: balance; }
  .svc-card__desc { text-wrap: balance; }

  /* testimonial */
  .home-quote { gap: 6.4cqw; }                                  /* 24 */
  .home-quote__stage { gap: 6.4cqw; }                           /* 24 */
  .home-quote__text { max-width: 100%; }
  .home-quote__meta { gap: 2.1333cqw; }
  .home-quote__stars { gap: 1.0667cqw; }
  .home-quote__star { width: 3.7333cqw; height: 3.7333cqw; }
  .home-quote__nav { gap: 1.0667cqw; padding: 1.0667cqw; margin-top: 2.1333cqw; border-radius: 2.1333cqw; } /* 4 / +8 */
  .home-quote__arrow { width: 11.7333cqw; height: 11.7333cqw; border-radius: 1.6cqw; } /* 44 */
  .home-quote__arrow-icon { width: 4.2667cqw; }
  .home-quote__mark { width: 8.208cqw; height: 6.144cqw; }      /* −25% */
  .home-quote__text { max-width: 100%; }

  /* service area */
  .home-area { flex-direction: column; align-items: stretch; gap: 8.5333cqw; } /* 32 */
  .home-area__copy { width: 100%; gap: 4.2667cqw; } /* 16 */
  .home-area__text { gap: 3.2cqw; } /* 12 — title→sub */
  .home-area__heading { max-width: 100%; text-wrap: balance; }
  .home-area__sub { max-width: 100%; text-wrap: pretty; } /* full width (client) */
  .home-area__map { width: 100%; height: 74.6667cqw; border-radius: 2.1333cqw; } /* 280 / 8 */

  /* cta + footer */
  .cta-split__inner { width: 100%; padding-inline: var(--gutter); gap: 5.3333cqw; }
  .cta-split__diamond { width: 6.4cqw; height: 6.4cqw; }        /* 24 */
  .cta-split__row { gap: 4.2667cqw; padding-top: 2.1333cqw; }
  .cta-footer__foot { padding: 0 4.2667cqw 4.2667cqw; }         /* 16 */
  /* Slim footer (consultation / thank-you / 404): the sage card sat ~10px under the dark
     band's top edge (the 40-desktop cap padding shrinks on this band's scale) — 24px (client). */
  .cta-footer--slim .cta-footer__cap { padding-top: 6.4cqw; }   /* 24 */
  .site-footer { gap: 17.0667cqw; padding: 6.4cqw 5.3333cqw; border-radius: 5.3333cqw; } /* 64 / 24 20 / 20 */
  .site-footer__columns { flex-direction: column; gap: 8.5333cqw; } /* 32 */
  .site-footer__col { width: 100%; gap: 3.2cqw; }
  .site-footer__list { gap: 1.0667cqw; }                        /* 4 */
  .site-footer__legal { flex-direction: column-reverse; align-items: flex-start; gap: 6.4cqw; } /* 24; badges first, LEGAL at the bottom */
  .site-footer__fine { max-width: 100%; }
  .site-footer__badges { flex-wrap: wrap; gap: 3.2cqw; }
  .footer-badge--sl { order: -1; } /* Super Lawyers chip first (client) */
  .footer-badge--awards { gap: 4.2667cqw; padding: 4.2667cqw; border-radius: 3.2cqw; }
  .footer-badge__tb-badge { width: 15.7333cqw; height: 14.9333cqw; }
  .footer-badge__tb-text { width: 15.2cqw; height: 11.4667cqw; }
  .footer-badge__ap { width: 20.5333cqw; height: 16cqw; }
  .footer-badge--sl { padding: 3.2cqw 3.2cqw 3.2cqw 4.2667cqw; gap: 2.1333cqw; border-radius: 3.2cqw; }
  .footer-badge__sl-chip { width: 6.4cqw; height: 6.4cqw; border-radius: 1.6cqw; }
  .footer-badge__sl-arrow { width: 2.1333cqw; height: 2.1333cqw; }
  .footer-badge__sl-logo { width: 36cqw; height: 7.4667cqw; }
  .site-footer__wordmark-img { width: 256cqw; } /* −20% (client) */
  .site-footer__wordmark-diamond { width: 7.68cqw; height: 7.68cqw; }
  .site-footer__wordmark .marquee__group { gap: 7.68cqw; padding-right: 7.68cqw; }

  /* consultation */
  .cons { gap: 8.5333cqw; padding-top: 29.8667cqw; }            /* 32 / 112 */
  .cons__head { gap: 4.2667cqw; }                               /* 16 */
  .cons__title, .cons__sub { max-width: 100%; }
  .cons__sub { text-wrap: pretty; }
  .cons__boxes { flex-direction: column; gap: 6.4cqw; }         /* 24 */
  .cons__card { padding: var(--card-pad); border-radius: 3.2cqw; }
  .cons__fields { gap: 6.4cqw; }                                /* 24 */
  .cons__field { gap: 3.2cqw; }
  /* Same :has re-statement as the tablet band — the desktop-cqw base (≈5px here) wins on
     specificity over the plain .cons__field gap. */
  .cons__field:has(.cons__chips) { gap: 4.2667cqw; } /* 16 */
  .cons__chips { align-self: stretch; }
  .cons__chip { flex: 1; }
  .cons__chip .ins-segment { width: 100%; justify-content: center; }
  .cons__inputs { gap: 3.2cqw; }
  .cons__row { flex-direction: column; gap: 3.2cqw; }
  /* In the stacked column the desktop `flex: 1` (basis 0) wins the main axis over `height`
     and squashes the cells to content height — restore normal sizing. */
  .cons__row .cons__cell { flex: none; }
  .cons__input { height: 14.4cqw; padding-inline: 4.8cqw; }     /* 54 / 18 */
  .cons__textarea { height: 38.1333cqw; padding-block: 4.8cqw; } /* 143 */
  .dropdown__button { height: 14.4cqw; padding-inline: 4.8cqw; }
  .dropdown__chevron { width: 3.7333cqw; height: 3.7333cqw; }
  .dropdown__panel { padding: 1.6cqw; border-radius: 3.2cqw; }
  .dropdown__option { padding: 3.7333cqw 4.8cqw; border-radius: 2.1333cqw; }
  .cons__rule { margin-block: 8.5333cqw; }                      /* 32 */
  .cons__submit-row { flex-direction: column; align-items: stretch; gap: 4.2667cqw; }
  .cons__submit { width: 100%; justify-content: center; }
  .cons__disclaimer { max-width: 100%; text-align: center; }

  /* legal + status */
  .legal-page { padding-top: 29.8667cqw; }                      /* 112 */
  .legal-page__row { gap: 4.2667cqw; }                          /* 16 */
  .legal-page__prose { max-width: 100%; padding-top: 8.5333cqw; } /* 32 */
  .legal-page__section { gap: 3.2cqw; padding-block: 6.4cqw; }  /* 12 / 24 */
  .legal-page__p { text-wrap: pretty; }
  .status-page { padding: 37.3333cqw var(--gutter) 17.0667cqw; } /* 140 / 64 */
  .status-page__inner { max-width: 100%; gap: 4.2667cqw; }      /* 16 */
  .status-page__fine { max-width: 100%; }
  .status-page__links { flex-wrap: wrap; gap: 4.2667cqw; }
  .status-page__actions { flex-direction: column; align-items: stretch; width: 100%; gap: 2.1333cqw; } /* 8 */
  .status-page__actions .btn { width: 100%; justify-content: center; }

  /* insights article */
  .art-cover { gap: 6.4cqw; padding-top: 29.8667cqw; }          /* 24 / 112 */
  .art-cover__head { gap: 4.2667cqw; }                          /* 16 */
  /* Left-aligned stack (client) — the inherited tablet row-REVERSE pushed tag + byline to
     the right edge. DOM order (tags first) reads tag, then byline. */
  .art-cover__meta { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 3.2cqw; }
  .article-toc__link { padding: 2.6667cqw 4.2667cqw; } /* 10 16 — base padding is desktop-cqw (≈4px inset here) */
  .art-cover__heading { gap: 3.2cqw; }                          /* 12 */
  .art-cover__dek { max-width: 100%; text-wrap: pretty; }
  .art-cover__img { height: 64cqw; border-radius: 4.8cqw; }     /* 240 / 18 */
  .art-body { gap: 10.6667cqw; padding-block: 12.8cqw 17.0667cqw; } /* 40 / 48 / 64 */
  .article-toc { gap: 4.2667cqw; }                              /* 16 */
  .article-content p { margin-top: 6.4cqw; } /* 24 */
  .article-content ul, .article-content ol { margin-top: 8.5333cqw; margin-bottom: 8.5333cqw; gap: 3.2cqw; } /* 32 / 12 */
  .article-content h2 { margin-top: 12.8cqw; }                  /* 48 */
  .article-content blockquote { margin-block: 6.4cqw; padding: 7.4667cqw 0; } /* 24 / 28 */
  .art-share { margin-top: 12.8cqw; padding-top: 8.5333cqw; gap: 4.2667cqw; } /* 48 / 32 / 16 */
  .art-share__row { gap: 2.1333cqw; }
  .art-share__btn { width: 12.8cqw; height: 12.8cqw; }          /* 48 */
  /* §1a mobile: heading → cards → button at the very bottom, full width */
  .art-more { gap: 6.4cqw; }
  .art-more__header { display: contents; }
  .art-more__header > div:last-child { order: 10; }
  .art-more__header .btn { width: 100%; justify-content: center; }
  .art-more__grid { grid-template-columns: 1fr; gap: 3.2cqw; }

  /* insights */
  .ins-header { padding: 29.8667cqw var(--gutter) 6.4cqw; }     /* 112 / 24 */
  .ins-filters-band { padding-top: 12.8cqw; }                   /* 48 */
  .ins-header__heading { gap: 3.2cqw; }                         /* 12 */
  .ins-segment { padding: calc(3.7333cqw - 1px) 4.2667cqw; }    /* the .btn's 14/16 − border */
  .ins-featured { padding: 0 4.2667cqw; }                       /* 16 */
  /* Mobile featured = the regular article card, verbatim (client): same padding/radius/
     image-radius/height/gaps/type — the dek is the ONLY thing that sets it apart. */
  .featured-card { padding: 3.2cqw; border-radius: 4.8cqw; gap: 6.4cqw; } /* 12 / 18 / 24 */
  .featured-card__copy { padding: 0 3.2cqw 3.2cqw; gap: 6.4cqw; }
  .featured-card__head { gap: 3.2cqw; } /* 12 — the regular card's title→meta gap */
  .featured-card__dek { max-width: 100%; text-wrap: pretty; }
  .featured-card__img { height: 70.6667cqw; border-radius: 1.6cqw; } /* 265 / 6 */
  .featured-card__diamond { width: 2.1333cqw; height: 2.1333cqw; }
  .ins-grid { grid-template-columns: 1fr; gap: 3.2cqw; padding-top: 8.5333cqw; } /* 12 / 32 */
  .ins-pagination { margin-top: -4.2667cqw; }                   /* 48 under the cards (grid pb 64 − 16) */
  .ins-pagination__page, .ins-pagination__arrow { width: 12.2667cqw; height: 12.2667cqw; } /* 46 */
  .article-card { gap: 6.4cqw; padding: 3.2cqw; border-radius: 4.8cqw; } /* 24 / 12 / 18 */
  .article-card__img { height: 70.6667cqw; border-radius: 1.6cqw; } /* 265 */
  .article-card__tags { top: 2.1333cqw; left: 2.1333cqw; } /* 8 — the base offset is desktop-cqw (≈2px here, chips looked glued) */
  .article-card__tag { padding: 1.6cqw 2.6667cqw; }
  .article-card__text { gap: 6.4cqw; padding: 0 3.2cqw 3.2cqw; }
  .article-card__top { gap: 3.2cqw; }
  .article-card__cta, .featured-card__cta { gap: 3.2cqw; } /* 12 — base gap is desktop-cqw (≈3px here, diamond glued to the label) */
  .article-card__diamond { width: 2.1333cqw; height: 2.1333cqw; }

  /* service detail */
  .page-hero__stack { gap: 4.2667cqw; }                         /* 16 */
  .svc-sheet { margin-top: -3.2cqw; gap: 6.4cqw; padding-top: 6.4cqw; border-radius: 3.2cqw 3.2cqw 0 0; } /* 24 */
  .svc-sheet__row { gap: 4.2667cqw; }                           /* 16 */
  .svc-sheet__sub { max-width: 100%; text-wrap: pretty; }
  /* mobile §1a: content first, Book button drops to the section BOTTOM full width */
  .svc-sheet__row:first-child { flex-direction: column-reverse; }
  .svc-sheet__side .btn { width: 100%; justify-content: center; }
  .svc-checklist { gap: 4.2667cqw; padding-top: 17.0667cqw; }   /* 16 / 64 */
  .svc-checklist__items { grid-template-columns: 1fr; gap: 2.1333cqw; } /* 8 */
  .svc-check { gap: 4.2667cqw; padding: 1.6cqw; border-radius: 1.6cqw; }
  .svc-check__box { width: 12.8cqw; height: 12.8cqw; border-radius: 1.0667cqw; } /* 48 */
  .svc-check__icon { width: 3.2cqw; height: 3.2cqw; }
  .svc-how { gap: 6.4cqw; }                                     /* 24 */
  .svc-how__heading { max-width: 100%; }
  .svc-how__steps { gap: 3.2cqw; }                              /* 12 (was 24 — client: folders too far apart on mobile) */
  .svc-step { height: auto; padding: 3.2cqw var(--card-pad) var(--card-pad); margin-top: 4.8cqw; gap: 10.6667cqw; border-radius: 0 3.2cqw 3.2cqw 3.2cqw; } /* tab 18 above; natural height — mobile folders stay as-is (client: "идеально") */
  .svc-step__title { padding-top: 0; }
  .svc-step::before { width: 32cqw; height: 4.8cqw; border-radius: 3.2cqw 3.2cqw 0 0; } /* 120 wide, 18 above */
  .svc-step::after { left: 32cqw; width: 3.2cqw; height: 3.2cqw; background: radial-gradient(circle at 100% 0, transparent 0 3.2cqw, var(--mist) 3.2cqw); }
  .svc-step__copy { max-width: 100%; text-wrap: balance; }
  .svc-midcta__card { flex-direction: column; gap: 6.4cqw; padding: var(--card-pad); } /* 24 */
  .svc-midcta__copy { display: contents; }                      /* lets the mark slot between the note and the buttons */
  .svc-midcta__head { gap: 2.1333cqw; }                         /* 8 */
  .svc-midcta__note { max-width: 100%; }
  .svc-midcta__union { display: none; }                         /* no mark on mobile (client, 30 Jul — tried between/full-width/80% first) */
  /* §1a: full-width button + phone row of the SAME height, both inside the white plate */
  .svc-midcta__plate { order: 2; flex-direction: column; align-items: stretch; align-self: stretch; gap: 0.5333cqw; padding: 2px; border-radius: 1.6cqw; } /* 2 / 6 */
  .svc-midcta__plate .btn { width: 100%; justify-content: center; }
  .svc-midcta__phone { display: flex; align-items: center; justify-content: center; padding-block: 3.6cqw; } /* row height = the button's (client, 30 Jul) */
  .svc-faq { gap: 4.2667cqw; }                                  /* 16 */
  .svc-faq-row__head { gap: 4.2667cqw; padding-block: 4.2667cqw; }
  .svc-faq-row__chip { width: 10.6667cqw; height: 10.6667cqw; border-radius: 1.6cqw; } /* 40 */
  .svc-faq-row__icon { width: 3.7333cqw; height: 3.7333cqw; }

  /* about */
  .about-hero { min-height: 0; gap: 8.5333cqw; padding: 29.8667cqw var(--gutter) 8.5333cqw; } /* NOT full-screen on mobile (client) */
  .about-hero__text { gap: 3.2cqw; }                                /* 12 — heading→sub rule */
  .about-hero__title { max-width: 100%; }
  .about-hero__sub { max-width: 100%; text-wrap: pretty; }
  .about-hero__sub-br { display: none; } /* the explicit break is TABLET-only (client: mobile wraps are fine) */
  .about-hero__portrait { flex: none; height: auto; aspect-ratio: 560 / 572; min-height: 0; } /* the home-About box (client) */
  .about-hero__photo { object-position: 50% 50%; }
  .about-story { gap: 8.5333cqw; padding-top: 17.0667cqw; }         /* 32 / 64 */
  .about-story__row { gap: 4.2667cqw; }                             /* 16 */
  .about-story__bio { max-width: 100%; }
  .about-creds { padding: 17.0667cqw 4.2667cqw 0; }                 /* 64 / 16 */
  .about-creds__card { border-radius: 5.3333cqw; padding: 3.2cqw 3.2cqw 6.4cqw; } /* 20 / 12, bottom 24 — air UNDER the fine print (client) */
  .about-creds__row { gap: 4.2667cqw; }                             /* 16; contents/order layout inherits from ≤1023 */
  .about-creds__label { margin: 4.2667cqw 0 0 2.1333cqw; }          /* 16 air / 8+12 left */
  .about-creds__fine { margin: 4.2667cqw 0 0 2.1333cqw; max-width: 100%; }
  .about-creds__cards { gap: 2.1333cqw; }                           /* 8 */
  .about-creds__rule { margin: 4.2667cqw 0 0; }                     /* 16 above = 16 below (label margin) — line centred */
  .award-card { flex-direction: column; gap: 4.2667cqw; padding: 3.2cqw; } /* 16 / 12 */
  .award-card__logo { width: 100%; height: 48cqw; border-radius: 1.6cqw; padding: 4.2667cqw; } /* 180 (taller, client) / 6 / 16 */
  .award-card__logo--naela img { width: 37.3333cqw; }               /* 140 (bigger, client) */
  .award-card__logo--seal img { width: 32cqw; }                     /* 120 */
  .award-card__tb-badge { width: 21.3333cqw; }                      /* 80 */
  .award-card__tb-text { width: 20.8cqw; }                          /* 78 */
  .award-card__logo--ap img { width: 32cqw; }                       /* 120 */
  .award-card__text { gap: 3.2cqw; padding: 0 3.2cqw 3.2cqw; }      /* article recipe: image 12 off the card, text 24 (12+12) off the edges */
  .award-card__desc { font-size: var(--fs-caption); line-height: 1.5; } /* smaller on mobile (client) */
  .award-card__title, .award-card__desc { max-width: 100%; }

  /* services hub */
  .page-hero { min-height: 74.6667cqw; }                        /* 280 */
  .page-hero--hub .page-hero__photo { object-position: 53% 50%; } /* family dead-center in the frame (client, 3 Aug) */
  .page-hero--sheet { min-height: 77.8667cqw; }                 /* 280 + 12 sheet overlap */
  .page-hero__stack { gap: 1.6cqw; }                            /* 6 */
  .home-hero__photo { object-position: 88% 50%; }               /* cyclists stay in the narrow mobile crop, text on sky */
  .hero-blur-top { height: 23.4667cqw; }                        /* 88 */
  .page-hero__cap { padding: 24cqw var(--gutter) 6.4cqw; }      /* 90 / 24 */
  .svc-intro { gap: 8.5333cqw; padding-block: 12.8cqw; }        /* 32 / 48 */
  .svc-intro__row { gap: 4.2667cqw; }                           /* 16 */
  .svc-intro__anchors { flex-direction: column; gap: 1.0667cqw; } /* 4 — full-width stack */
  .anchor-btn__arrow { width: 2.1333cqw; height: 2.6667cqw; }   /* 8×10 */
  .svc-group { gap: 6.4cqw; padding-bottom: 12.8cqw; }          /* 24 / 48 */
  .svc-group__label { gap: 2.9333cqw; }                         /* 11 (was 16, −⅓) eyebrow→lead */
  .svc-group__desc { max-width: 100%; text-wrap: balance; }
  .svc-group__cards { grid-template-columns: 1fr; }
}

/* ── Lenis smooth scroll (smooth_scroll controller) — required base CSS ── */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-scrolling iframe { pointer-events: none; }

/* Turbo Drive navigation progress bar — hidden. */
.turbo-progress-bar { display: none; }