/* =============================================================================
   AXIVA V2 CONCEPT — design system (charter 00-art-direction.md is binding)
   Mobile-first. One shared stylesheet; page parts add .p-{slug}-* locally only.
   Sections: 0 reset · 1 tokens · 2 base/type · 3 layout primitives ·
   4 components · 5 motion · 6 responsive · 7 print
   ============================================================================= */

/* 0. RESET ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
/* Standalone document: strip list chrome globally; prose lists opt back in. */
.v2-body ul, .v2-body ol { list-style: none; padding: 0; }
img, svg, picture { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:where(input, button, textarea, select) { font: inherit; }

/* 1. TOKENS ----------------------------------------------------------------- */
:root {
  /* palette (charter §3 v2 — verbatim; var NAMES preserved so parts auto-heal) */
  --paper:    #FFFFFF;
  --paper-2:  #F7FAF9;
  --wash:     #EAF4F4;
  --wash-2:   #F1F7E8;
  --warm:     #F7F4EE;
  --white:    #FFFFFF;
  --ink:      #16302E;
  --ink-2:    #3E5755;
  --muted:    #5F7775;
  --deep:     #143230;
  --deep-2:   #0C2624;
  --serenity: #AFD9DA;
  --trust:    #90B2B2;
  --trust-deep:#3F6360;
  --label:    #3F6360;
  --vitality: #C8DF90;
  --balance:  #B1C185;
  --plum:     #753867;
  --plum-deep:#5C2A51;
  --line:     #DEE9E7;
  --line-dark:#2C4A47;
  --grad-brand: linear-gradient(90deg, #AFD9DA, #C8DF90);

  /* type scale (charter §4 v2; hero stepped down 2026-06-10 so a full hero
     composition clears a MacBook fold) */
  --t-hero: clamp(2.75rem, 5.5vw, 5rem);
  --t-h2:   clamp(2.125rem, 3.8vw, 3.25rem);
  --t-h3:   clamp(1.375rem, 2vw, 1.75rem);
  --t-card: 1.1875rem;
  --t-lead: clamp(1.125rem, 1.5vw, 1.3125rem);
  --t-body: 1.0625rem;
  --t-small: 0.875rem;
  --t-label: 0.75rem;
  --t-mono: 0.75rem;  /* legacy alias retained; mapped to label size */

  /* fonts (charter §4 v2): Europa Bold display / Poppins body / Outfit labels.
     --font-mono is a legacy alias to label — monospace is BANNED. */
  --font-display: europa, "Outfit", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-label: "Outfit", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: var(--font-label);

  /* layout (charter §5) */
  --w-narrow: 760px;
  --w-default: 1200px;
  --w-wide: 1360px;
  --gutter: clamp(20px, 4vw, 48px);
  /* stepped up 2026-06-10: sections breathe more (was 4.5/10vh/8) */
  --sect: clamp(5.5rem, 12vh, 9.5rem);

  --radius-sm: 4px;   /* media (charter §5: imagery reads square-edged) */
  --radius-md: 16px;  /* cards / panels */
  --radius-pill: 999px;

  --shadow-hover: 0 18px 40px -18px rgb(12 38 36 / .18);
  --shadow-mat: 0 24px 60px -36px rgb(12 38 36 / .25);

  --header-h: 76px;

  /* shared film-grain token (charter §7) — single source of truth. New pages
     reference var(--fx-noise); never inline the SVG. (Round-1 pages still carry
     identical scoped copies; harmless — to be swept in the cleanup pass.) */
  --fx-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* motion (charter §7) */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-micro: 200ms;
  --dur-state: 400ms;
  --dur-enter: 650ms;
}

/* 2. BASE / TYPE ------------------------------------------------------------ */
.v2-body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.75;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* film grain — fixed, behind nothing interactive (charter §7) */
.v2-body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.03;
  background-image: var(--fx-noise);  /* shared grain token (see :root) */
}

/* Display = Europa Bold (700 only — the kit ships a single weight). Europa needs
   more line-height than a serif (charter §4 v2). Proper Case default. */
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; color: var(--ink); }
/* SPECIFICITY TRAP: a page-local bare `h1 { font-size: … }` is DEAD CSS here —
   `.v2-body h1` (0,1,1) outranks bare `h1` (0,0,1). Size heroes via --t-hero, or
   override with a selector of >= (0,1,1) declared later (e.g. `.v2-body .p-x h1`).
   (Round-1 WM hero lost an hour to this.) */
.v2-body h1 { font-size: var(--t-hero); line-height: 1.0; letter-spacing: -0.015em; }
.v2-body h2 { font-size: var(--t-h2); line-height: 1.12; letter-spacing: -0.01em; }
.v2-body h3 { font-size: var(--t-h3); line-height: 1.2; }

p { text-wrap: pretty; }
a { text-decoration: none; transition: color var(--dur-micro) var(--ease-out); }
strong, b { font-weight: 600; }

::selection { background: var(--serenity); color: var(--deep); }

/* two-tone headline device (charter §4): one .hl / .hl-plum word per heading */
.hl { color: var(--trust-deep); }
.hl-plum { color: var(--plum); }
.v2-dark .hl, .cta-band .hl, .v2-on-dark .hl { color: var(--serenity); }
.v2-dark .hl-plum, .cta-band .hl-plum, .v2-on-dark .hl-plum { color: var(--serenity); }

/* tracked ALL-CAPS heading utility (<=3 words) */
.caps-heading { text-transform: uppercase; letter-spacing: 0.05em; }

/* numerals */
.tnum, .stat__num, .table-clean, .trust-strip, .v2-mono { font-feature-settings: "tnum" 1, "lnum" 1; }
/* animated counters: tabular figures; v2.js also locks each counter to its
   final rendered width so the layout never shifts mid-count (charter §16.3) */
[data-count] { font-feature-settings: "tnum" 1, "lnum" 1; font-variant-numeric: tabular-nums lining-nums; }

/* THE eyebrow — one rule (charter §4 v2): plain Outfit caps, NO dash ornament */
.eyebrow {
  font-family: var(--font-label);
  font-size: var(--t-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--trust-deep);
  margin: 0 0 1.25rem;
}
/* legacy dash markup heals to nothing — ornament removed per amendment rule 1 */
.eyebrow__dash { display: none !important; }
/* trust-deep is unreadable on deep bands — every on-dark eyebrow goes serenity
   (same voice as the band's data labels, e.g. the WM timeline keys) */
.v2-on-dark .eyebrow,
.eyebrow--on-dark { color: var(--serenity); }
.eyebrow--on-img { color: #FFFFFF; }

/* shared label (was .v2-mono — now Outfit) */
.v2-mono {
  font-family: var(--font-label);
  font-size: var(--t-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
}

/* Outfit caps labels want weight 600 (default 400 reads thin). Heals the many
   legacy label classes that referenced the old mono face without a weight. */
.acc__idx, .evidence-callout__statlabel, .cta-band__locs, .pending-tile__tag,
.toc-rail__title, .toc-rail__link, .toc-mobile > summary, .toc-mobile__list a,
.v2-header__list > li > a, .v2-header__phone, .v2-mobile__idx, .v2-footer__phone-label, .v2-footer__soon,
.v2-footer__tag, .steps__idx-label, .table-clean thead th { font-weight: 600; }
/* tabular numerals for the Outfit data faces */
.v2-footer__phone-num, .v2-mobile__phone, .v2-header__phone, .cta-band__phone { font-feature-settings: "tnum" 1, "lnum" 1; }

/* skip link */
.v2-skip {
  position: absolute;
  left: 12px; top: -60px;
  z-index: 200;
  background: var(--deep);
  color: var(--white);
  padding: 10px 16px;
  border-radius: 999px;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: var(--t-small);
  transition: top var(--dur-state) var(--ease-out);
}
.v2-skip:focus { top: 12px; }

/* 3. LAYOUT PRIMITIVES ------------------------------------------------------ */
.v2-container { width: 100%; max-width: var(--w-default); margin-inline: auto; padding-inline: var(--gutter); }
.v2-container--wide { max-width: var(--w-wide); }
.v2-container--narrow { max-width: var(--w-narrow); }

#v2-main { position: relative; z-index: 2; display: block; }

.v2-section { padding-block: var(--sect); position: relative; }
.v2-section--paper { background: var(--paper); }
.v2-section--paper-2 { background: var(--paper-2); }
.v2-section--wash { background: var(--wash); }
.v2-section--white { background: var(--white); }
.v2-section--tight { padding-block: clamp(3rem, 6vh, 4.5rem); }

/* full-bleed hairline between sections */
.v2-rule { border: 0; border-top: 1px solid var(--line); margin: 0; }
.v2-rule--grad { border: 0; height: 1.5px; background: var(--grad-brand); margin: 0; }

/* signature splits (charter §5) */
.v2-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
@media (min-width: 900px) {
  .v2-split--7-5 { grid-template-columns: 7fr 5fr; }
  .v2-split--5-7 { grid-template-columns: 5fr 7fr; }
  .v2-split--4-8 { grid-template-columns: 4fr 8fr; }
  .v2-split--8-4 { grid-template-columns: 8fr 4fr; }
  .v2-split--6-6 { grid-template-columns: 1fr 1fr; }
}

/* multi-column article prose (Sopris DNA, charter §5) */
.article-cols {
  max-width: 68ch;
}
@media (min-width: 820px) {
  .article-cols--2 {
    max-width: none;
    column-count: 2;
    column-gap: clamp(28px, 4vw, 64px);
    column-rule: 1px solid var(--line);
  }
  .article-cols--2 > * { break-inside: avoid; }
  .article-cols--2 p { margin-bottom: 1.05em; }
  /* fragmentation-safe rhythm: WebKit honors a top margin at the head of a
     new column (Blink truncates it), so column 2 started ~1em low in Safari.
     In 2-col mode ALL vertical rhythm comes from margin-bottom instead. */
  .article-cols--2 p + p { margin-top: 0; }
  .article-cols--2 .span-all { column-span: all; break-inside: avoid; }
}
.article-cols p { font-size: var(--t-body); line-height: 1.75; color: var(--ink-2); orphans: 3; widows: 3; }
.article-cols p + p { margin-top: 1.05em; }

/* lead paragraph */
.v2-lead {
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--ink-2);
  font-weight: 400;
  max-width: 60ch;
}

/* section-head: eyebrow + H2 + optional lead, 7/5 with right meta */
.section-head { display: grid; gap: 1.25rem; margin-bottom: clamp(2.25rem, 4vw, 3.5rem); }
.section-head__lead { margin-top: 0.25rem; }
@media (min-width: 900px) {
  .section-head--split {
    grid-template-columns: 7fr 5fr;
    align-items: end;
    gap: clamp(2rem, 4vw, 3.5rem);
  }
  .section-head__aside { justify-self: end; text-align: right; }
}

/* 4. COMPONENTS ------------------------------------------------------------- */

/* --- buttons (charter §6 v2): pill + Outfit caps label + trailing • dot --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.78125rem; /* 12.5px */
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 1.05rem 1.6rem;
  transition: background var(--dur-state) var(--ease-out),
              color var(--dur-state) var(--ease-out),
              border-color var(--dur-state) var(--ease-out),
              transform var(--dur-micro) var(--ease-out);
  will-change: transform;
}
.btn:active { transform: scale(0.98); }

/* canonical trailing dot on primary/on-dark-primary labels (NOT a dash).
   Hover gives it a transform-only nudge — same 2px language as .btn__circle
   and the tertiary arrow. Never animate the dot's width/margins: the pill
   would resize and bounce its flex siblings (retired P10b dot-slide). */
.btn--primary .btn__label::after,
.v2-on-dark .btn--primary .btn__label::after {
  content: "\2022";
  display: inline-block;
  margin-left: 0.6em;
  opacity: 0.65;
  transition: transform var(--dur-state) var(--ease-out);
}
.btn--primary:hover .btn__label::after { transform: translateX(2px); }

/* legacy nested-arrow circle (still supported; pill+dot is canonical) */
.btn__circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 999px;
  flex: 0 0 auto;
  margin-left: 0.2rem;
  transition: transform var(--dur-state) var(--ease-out), background var(--dur-state) var(--ease-out);
}
.btn__circle svg { transition: transform var(--dur-state) var(--ease-out); }
/* when a circle is present, drop the dot to avoid doubling the affordance */
.btn:has(.btn__circle) .btn__label::after { content: none; }

/* primary: deep bg, white text */
.btn--primary { background: var(--deep); color: var(--white); }
.btn--primary .btn__circle { background: rgb(255 255 255 / 0.12); color: var(--serenity); }
.btn--primary:hover { background: var(--deep-2); color: var(--white); }
.btn--primary:hover .btn__circle { transform: translateX(2px); background: rgb(255 255 255 / 0.18); }

/* secondary: hairline outline pill */
.btn--secondary { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn--secondary .btn__circle { background: var(--paper-2); color: var(--trust-deep); }
.btn--secondary:hover { border-color: var(--trust); color: var(--ink); }
.btn--secondary:hover .btn__circle { transform: translateX(2px); }

/* tertiary: Outfit caps link with gradient underline-wipe */
.btn--tertiary {
  background: none;
  padding: 0.35rem 0;
  border-radius: 0;
  font-family: var(--font-label);
  font-size: var(--t-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink);
  gap: 0.5rem;
  background-image: var(--grad-brand);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1.5px;
  transition: background-size var(--dur-state) var(--ease-out), color var(--dur-state) var(--ease-out);
}
.btn--tertiary:hover { background-size: 100% 1.5px; }
.btn--tertiary::after { content: "\2192"; transition: transform var(--dur-state) var(--ease-out); }
.btn--tertiary:hover::after { transform: translateX(3px); }

/* on-dark variants */
.v2-on-dark .btn--secondary { color: var(--white); border-color: var(--line-dark); }
.v2-on-dark .btn--secondary .btn__circle { background: rgb(255 255 255 / 0.08); color: var(--serenity); }
.v2-on-dark .btn--secondary:hover { border-color: var(--serenity); }
.v2-on-dark .btn--tertiary { color: var(--white); }
.v2-on-dark .btn--primary { background: var(--serenity); color: var(--deep); }
.v2-on-dark .btn--primary .btn__circle { background: rgb(20 50 48 / 0.18); color: var(--deep); }
.v2-on-dark .btn--primary:hover { background: var(--white); }

/* --- trust strip (charter §6) --- */
.trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0;
  align-items: stretch;
}
.trust-strip__item {
  font-family: var(--font-mono);
  font-size: var(--t-small);
  color: var(--ink-2);
  letter-spacing: 0.01em;
  padding: 0.15rem 1rem 0.15rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
/* mobile: dot-prefixed wrapped chips (no left-border seams on wrap) */
.trust-strip__item::before { content: ""; width: 5px; height: 5px; border-radius: 999px; background: var(--trust-deep); flex: 0 0 auto; }
.trust-strip__dot { display: none; }
/* >=640: hairline-separated single row (charter look) */
@media (min-width: 640px) {
  .trust-strip { gap: 0; }
  .trust-strip__item { padding: 0.15rem 1.15rem; border-left: 1px solid var(--line); }
  .trust-strip__item:first-child { border-left: 0; padding-left: 0; }
  .trust-strip__item::before { display: none; }
}
.v2-on-dark .trust-strip__item { color: var(--serenity); border-color: var(--line-dark); }
.v2-on-dark .trust-strip__item::before { background: var(--serenity); }

/* --- stat (charter §6 v2): Europa numerals, Outfit caps label, plum hero variant --- */
.stat { display: grid; gap: 0.45rem; }
.stat__num {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4vw, 4rem);
  line-height: 1;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--ink);
}
.stat__num--plum { color: var(--plum); }
.stat__label { font-family: var(--font-label); font-weight: 600; font-size: var(--t-label); text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); }
.v2-on-dark .stat__num { color: var(--white); }
.v2-on-dark .stat__num--accent { color: var(--serenity); }
.v2-on-dark .stat__label { color: var(--trust); }

/* --- steps: numbered (charter §6 v2): GIANT Europa numeral behind content --- */
.steps { display: grid; gap: 0; counter-reset: step; }
.steps__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  padding: 2rem 0;
  border-top: 1px solid var(--line);
  position: relative;
  align-items: start;
}
.steps__item:last-child { border-bottom: 1px solid var(--line); }
.steps__idx {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3rem, 7vw, 5.5rem);
  line-height: 0.85;
  letter-spacing: -0.03em;
  color: var(--serenity);
  opacity: 0.55;
  font-feature-settings: "tnum" 1, "lnum" 1;
  min-width: 1.6ch;
  padding-top: 0.1rem;
}
.steps__title { font-family: var(--font-display); font-size: var(--t-h3); font-weight: 700; line-height: 1.2; margin-bottom: 0.4rem; padding-top: 0.35rem; }
.steps__body { color: var(--ink-2); max-width: 60ch; }
.v2-on-dark .steps__item, .v2-dark .steps__item { border-color: var(--line-dark); }
.v2-on-dark .steps__idx, .v2-dark .steps__idx { color: var(--serenity); opacity: 0.28; }

/* desktop horizontal timeline variant: giant numeral as section background graphic.
   Title and body live on SUBGRID rows shared across all columns, so every body
   starts on the same line no matter how many lines each title wraps to — and
   short-title columns can never ride up into the numeral watermark (§16.5). */
@media (min-width: 980px) {
  .steps--timeline {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    grid-template-rows: auto auto;
    column-gap: clamp(1.5rem, 3vw, 2.5rem);
    row-gap: 0.4rem;
  }
  .steps--timeline .steps__item {
    grid-template-columns: none;
    grid-template-rows: subgrid;
    grid-row: span 2;
    gap: 0;
    padding: 2.5rem 0 0;
    border-top: 1px solid var(--line);
    border-bottom: 0;
    overflow: hidden;
  }
  /* hoist title+body out of their wrapper into the shared rows */
  .steps--timeline .steps__item > div { display: contents; }
  .steps--timeline .steps__idx {
    position: absolute;
    top: 1.1rem; right: 0.2rem;
    font-size: clamp(5rem, 8vw, 8rem);
    opacity: 0.18;
    z-index: 0;
    pointer-events: none;
  }
  .steps--timeline .steps__title,
  .steps--timeline .steps__body { position: relative; z-index: 1; }
  .steps--timeline .steps__title { padding-top: 0; align-self: start; }
}

/* --- accordion .acc (charter §6) --- */
.acc { border-top: 1px solid var(--line); interpolate-size: allow-keywords; }
.acc__row { border-bottom: 1px solid var(--line); }
/* smooth open/close where ::details-content is supported (Chrome 131+);
   older browsers keep the instant toggle — progressive enhancement */
@media (prefers-reduced-motion: no-preference) {
  .acc__row::details-content {
    height: 0;
    overflow: clip;
    transition: height var(--dur-state) var(--ease-soft),
                content-visibility var(--dur-state) allow-discrete;
  }
  .acc__row[open]::details-content { height: auto; }
}
.acc__row > summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: baseline;
  padding: 1.4rem 0.25rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--t-card);
  color: var(--ink);
  transition: color var(--dur-state) var(--ease-out);
}
.acc__row > summary::-webkit-details-marker { display: none; }
.acc__row > summary:hover { color: var(--trust-deep); }
.acc__idx { font-family: var(--font-mono); font-size: var(--t-mono); color: var(--trust-deep); letter-spacing: 0.12em; transform: translateY(-1px); }
.acc__sign { position: relative; width: 16px; height: 16px; flex: 0 0 auto; align-self: center; }
.acc__sign::before, .acc__sign::after {
  content: ""; position: absolute; background: var(--trust-deep);
  transition: transform var(--dur-state) var(--ease-out), opacity var(--dur-state) var(--ease-out);
}
.acc__sign::before { top: 50%; left: 0; width: 100%; height: 1.5px; transform: translateY(-50%); }
.acc__sign::after  { left: 50%; top: 0; height: 100%; width: 1.5px; transform: translateX(-50%); }
.acc__row[open] .acc__sign::after { transform: translateX(-50%) scaleY(0); opacity: 0; }
.acc__body { padding: 0 0.25rem 1.6rem; color: var(--ink-2); max-width: 68ch; }
.acc__body > *:first-child { margin-top: 0; }
.acc__row[open] > summary { color: var(--ink); }

/* --- clean table (charter §6) --- */
.table-clean__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-clean { width: 100%; border-collapse: collapse; font-size: var(--t-small); min-width: 540px; }
.table-clean caption { text-align: left; margin-bottom: 1rem; }
.table-clean th, .table-clean td { text-align: left; padding: 1rem 1.15rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.table-clean thead th {
  font-family: var(--font-mono); font-size: var(--t-mono); text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--muted); font-weight: 500; border-bottom: 1px solid var(--ink-2);
}
.table-clean tbody th { font-family: var(--font-body); font-weight: 600; color: var(--ink); }
.table-clean .is-axiva { color: var(--ink); }
.table-clean thead th.is-axiva { color: var(--plum); }
.table-clean td.is-axiva { font-weight: 600; }
.table-clean tr:last-child th, .table-clean tr:last-child td { border-bottom: 0; }
/* the Axiva column reads as a continuous serenity band — the quiet "pick me" */
.table-clean th.is-axiva, .table-clean td.is-axiva {
  background: color-mix(in srgb, var(--serenity) 16%, transparent);
}
/* row hover wash (micro): the row you're reading lifts a breath */
.table-clean tbody tr { transition: background var(--dur-micro) var(--ease-out); }
.table-clean tbody tr:hover { background: color-mix(in srgb, var(--serenity) 8%, transparent); }

/* --- pull quote (charter §6 v2): Europa proper case, plum, NO side rules --- */
.pull-quote {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--plum);
  padding: 0;
  margin: clamp(2rem, 4vw, 3rem) 0;
  max-width: 24ch;
}
.pull-quote cite { display: block; margin-top: 1.1rem; font-family: var(--font-label); font-style: normal; font-weight: 600; font-size: var(--t-label); text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); }
.v2-dark .pull-quote, .v2-on-dark .pull-quote { color: var(--serenity); }

/* --- drop cap: NEUTRALIZED (charter §6 v2 — retired with the serifs) --- */
.drop-cap::first-letter { font: inherit; color: inherit; float: none; padding: 0; }

/* --- evidence callout (charter §6) --- */
.evidence-callout {
  background: var(--wash);
  border-radius: var(--radius-md);
  padding: clamp(2rem, 4vw, 3.25rem);
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
@media (min-width: 820px) { .evidence-callout { grid-template-columns: auto 1fr; align-items: center; } }
.evidence-callout__stat { font-family: var(--font-display); font-size: clamp(3rem, 6vw, 5rem); line-height: 0.95; letter-spacing: -0.02em; color: var(--plum); font-weight: 700; font-feature-settings: "tnum" 1, "lnum" 1; }
.evidence-callout__statlabel { font-family: var(--font-label); font-weight: 600; font-size: var(--t-label); text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-2); margin-top: 0.5rem; }
.evidence-callout__statement { font-size: var(--t-lead); line-height: 1.5; color: var(--ink); max-width: 52ch; }
.evidence-callout__statement p { margin-bottom: 1rem; }
/* a wash card on a wash section is invisible — flip the card to white (§16) */
.v2-section--wash .evidence-callout { background: var(--white); }
/* word-stat variant (e.g. "NEJM" as the visual instead of a numeral) */
.evidence-callout__stat--word { letter-spacing: 0.01em; font-size: clamp(2.75rem, 5vw, 4.25rem); }

/* --- expanding rows animate open/close (§16.7) ---
   Progressive enhancement via ::details-content + interpolate-size; browsers
   without support drop the whole rule and open instantly as before. */
:root { interpolate-size: allow-keywords; }
.acc__row::details-content,
.faq-list__row::details-content,
.toc-mobile::details-content {
  height: 0;
  overflow: clip;
  opacity: 0;
  transition: height var(--dur-state) var(--ease-soft),
              opacity var(--dur-state) var(--ease-out),
              content-visibility var(--dur-state) allow-discrete;
}
.acc__row[open]::details-content,
.faq-list__row[open]::details-content,
.toc-mobile[open]::details-content { height: auto; opacity: 1; }

/* --- faq list (charter §6) — details rows --- */
.faq-list { border-top: 1px solid var(--line); }
.faq-list__row { border-bottom: 1px solid var(--line); }
.faq-list__row > summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: baseline;
  padding: 1.35rem 0.25rem;
  font-family: var(--font-body); font-weight: 600; font-size: var(--t-card); color: var(--ink);
  transition: color var(--dur-state) var(--ease-out);
}
.faq-list__row > summary::-webkit-details-marker { display: none; }
.faq-list__row > summary:hover { color: var(--trust-deep); }
.faq-list__row .acc__sign { align-self: center; }
.faq-list__body { padding: 0 0.25rem 1.5rem; color: var(--ink-2); max-width: 68ch; }

/* --- related links (charter §6) — text rows, no cards --- */
.related-links { display: grid; gap: 0; border-top: 1px solid var(--line); }
.related-links__row {
  display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: baseline;
  padding: 1.25rem 0.25rem;
  border-bottom: 1px solid var(--line);
  transition: padding-left var(--dur-state) var(--ease-out);
}
.related-links__row:hover { padding-left: 0.6rem; }
.related-links__title { font-family: var(--font-body); font-weight: 600; font-size: var(--t-card); color: var(--ink); }
.related-links__desc { display: block; font-weight: 400; font-size: var(--t-small); color: var(--muted); margin-top: 0.2rem; max-width: 56ch; }
.related-links__arrow { font-family: var(--font-mono); color: var(--trust-deep); transition: transform var(--dur-state) var(--ease-out); align-self: center; }
.related-links__row:hover .related-links__arrow { transform: translateX(4px); }

/* hairline two-col list (who-it's-for) */
.hairline-cols { display: grid; gap: 0; border-top: 1px solid var(--line); }
@media (min-width: 760px) { .hairline-cols { grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 4vw, 4rem); } }
.hairline-cols__item {
  display: grid; grid-template-columns: auto 1fr; gap: 0.85rem; align-items: start;
  padding: 1.05rem 0.25rem; border-bottom: 1px solid var(--line);
  color: var(--ink-2); font-size: var(--t-body);
}
.hairline-cols__tick { color: var(--trust-deep); transform: translateY(2px); flex: 0 0 auto; }

/* --- cta band (charter §6) --- */
.cta-band { background: var(--deep); color: var(--paper); position: relative; overflow: hidden; }
.cta-band__glow {
  position: absolute; inset: auto -10% -40% auto; width: 60%; aspect-ratio: 1;
  background: radial-gradient(circle, rgb(175 217 218 / 0.18), transparent 65%);
  pointer-events: none;
}
.cta-band__inner { position: relative; display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .cta-band__inner { grid-template-columns: 1.2fr 1fr; align-items: center; gap: clamp(2rem, 5vw, 5rem); } }
.cta-band h2 { color: var(--paper); }
/* leads inside the band must speak the on-dark voice — .v2-lead's default
   ink-2 lands at ~1.8:1 on --deep (WCAG fail) */
.cta-band .v2-lead { color: var(--trust); }
.cta-band__phone {
  font-family: var(--font-mono);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  letter-spacing: 0.02em;
  color: var(--serenity);
  display: inline-flex; align-items: center; gap: 0.6rem;
  transition: color var(--dur-state) var(--ease-out);
}
.cta-band__phone:hover { color: var(--white); }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: 0.5rem; }
.cta-band__locs { font-family: var(--font-mono); font-size: var(--t-mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--trust); margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.1rem; }
.cta-band__locs span { display: inline-flex; align-items: center; gap: 0.45rem; }
.cta-band__locs span::before { content: ""; width: 4px; height: 4px; border-radius: 999px; background: var(--serenity); }

/* --- pull/numbered editorial list (about model) --- */
.num-list { display: grid; gap: 0; counter-reset: nlist; border-top: 1px solid var(--line); }
.num-list__item {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(1rem, 3vw, 2.25rem);
  padding: 1.75rem 0; border-bottom: 1px solid var(--line);
}
.num-list__num { font-family: var(--font-display); font-size: clamp(2.5rem, 4.5vw, 4rem); line-height: 0.85; letter-spacing: -0.03em; color: var(--serenity); opacity: 0.7; font-weight: 700; min-width: 2ch; font-feature-settings: "tnum" 1, "lnum" 1; }
.num-list__title { font-family: var(--font-display); font-size: var(--t-h3); font-weight: 700; margin-bottom: 0.5rem; line-height: 1.2; }
.num-list__body { color: var(--ink-2); max-width: 62ch; }

/* --- photo mat (charter §5: framed print, not glass) --- */
.photo-mat { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 10px; }
.photo-mat--ambient { box-shadow: var(--shadow-mat); }
.photo-mat img { border-radius: var(--radius-sm); width: 100%; height: 100%; object-fit: cover; }
.media-duo img { filter: saturate(0.82) contrast(1.02); }

/* --- media-duo composition --- */
.media-duo { display: grid; gap: 1rem; }
@media (min-width: 760px) { .media-duo--2 { grid-template-columns: 1fr 1fr; } }

/* --- client-data pending tile (about) --- */
.pending-tile {
  border: 1px dashed var(--trust);
  border-radius: var(--radius-md);
  padding: clamp(1.25rem, 3vw, 2rem);
  background: color-mix(in srgb, var(--wash) 55%, transparent);
}
.pending-tile__tag { font-family: var(--font-mono); font-size: var(--t-mono); text-transform: uppercase; letter-spacing: 0.16em; color: var(--plum); display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.6rem; }
.pending-tile__tag::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--plum); }
.pending-tile__body { color: var(--ink-2); font-size: var(--t-small); max-width: 54ch; }

/* --- toc rail (charter §6) --- */
.toc-rail { display: none; }
@media (min-width: 1280px) {
  .toc-rail {
    display: block;
    position: sticky;
    /* +25px clears the veil melt's soft zone — the rail title stays crisp
       while pinned under the floating nav */
    top: calc(var(--header-h) + 2.5rem + 25px);
    align-self: start;
    /* match the first --tight section's padding so the rail title aligns with
       the first eyebrow instead of kissing the hero's bottom edge (§16.4) */
    margin-top: clamp(3rem, 6vh, 4.5rem);
  }
  .toc-rail__title { font-family: var(--font-mono); font-size: var(--t-mono); text-transform: uppercase; letter-spacing: 0.18em; color: var(--muted); margin-bottom: 1.1rem; }
  .toc-rail__list { display: grid; gap: 0.1rem; border-left: 1px solid var(--line); }
  .toc-rail__link {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--t-mono);
    letter-spacing: 0.08em;
    color: var(--muted);
    padding: 0.5rem 0 0.5rem 1rem;
    margin-left: -1px;
    border-left: 1.5px solid transparent;
    transition: color var(--dur-state) var(--ease-out), border-color var(--dur-state) var(--ease-out);
    text-transform: uppercase;
  }
  .toc-rail__link:hover { color: var(--ink-2); }
  .toc-rail__link.is-active { color: var(--ink); border-left-color: var(--trust-deep); }
}

/* mobile "on this page" bar */
.toc-mobile { margin: 0 0 2rem; }
@media (min-width: 1280px) { .toc-mobile { display: none; } }
.toc-mobile > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-family: var(--font-mono); font-size: var(--t-mono); text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ink-2);
  padding: 0.9rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--white);
}
.toc-mobile > summary::-webkit-details-marker { display: none; }
.toc-mobile > summary::after { content: "\002B"; font-size: 1rem; }
.toc-mobile[open] > summary::after { content: "\2212"; }
.toc-mobile__list { display: grid; gap: 0; padding: 0.5rem 0 0; }
.toc-mobile__list a { font-family: var(--font-mono); font-size: var(--t-mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); padding: 0.65rem 1rem; border-bottom: 1px solid var(--line); }
.toc-mobile__list a:last-child { border-bottom: 0; }

/* anchor offset for sticky header */
[data-toc], [id] { scroll-margin-top: calc(var(--header-h) + 3.5rem); } /* floating nav sits ~30px lower */

/* dark band wrapper utility */
.v2-dark { background: var(--deep); color: var(--paper); }
.v2-dark h2, .v2-dark h3 { color: var(--paper); }
.v2-dark .v2-lead { color: var(--serenity); }
.v2-dark .v2-rule { border-color: var(--line-dark); }

/* =====  AURORA atmospheric field (charter §15) — pure-CSS shader look  ===== */
.aurora { position: relative; overflow: hidden; isolation: isolate; }
.aurora__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}
/* light base (white bg, ink text) */
.aurora--light { background: var(--paper); }
.aurora--light .aurora__b1 { width: 52vw; height: 52vw; left: -8%; top: -12%; background: radial-gradient(circle, rgb(175 217 218 / 0.55), transparent 68%); }
.aurora--light .aurora__b2 { width: 46vw; height: 46vw; right: -6%; top: 4%; background: radial-gradient(circle, rgb(200 223 144 / 0.40), transparent 68%); }
.aurora--light .aurora__b3 { width: 40vw; height: 40vw; right: 14%; bottom: -22%; background: radial-gradient(circle, rgb(242 228 194 / 0.30), transparent 70%); }
.aurora--light .aurora__b4 { width: 26vw; height: 26vw; left: 18%; bottom: -10%; background: radial-gradient(circle, rgb(117 56 103 / 0.10), transparent 72%); }
/* deep base (deep bg, white text, lower-alpha glows) */
.aurora--deep { background: var(--deep); color: var(--white); }
.aurora--deep .aurora__b1 { width: 50vw; height: 50vw; left: -6%; top: -10%; background: radial-gradient(circle, rgb(175 217 218 / 0.30), transparent 68%); }
.aurora--deep .aurora__b2 { width: 42vw; height: 42vw; right: -8%; bottom: -18%; background: radial-gradient(circle, rgb(200 223 144 / 0.18), transparent 68%); }
.aurora--deep .aurora__b3 { width: 34vw; height: 34vw; right: 22%; top: -8%; background: radial-gradient(circle, rgb(117 56 103 / 0.22), transparent 72%); }
.aurora--deep h1, .aurora--deep h2, .aurora--deep h3 { color: var(--white); }
.aurora > *:not(.aurora__blob) { position: relative; z-index: 1; }
/* drift — gated by reduced-motion (charter §7) */
@media (prefers-reduced-motion: no-preference) {
  .aurora__b1 { animation: aurora-drift-a 64s ease-in-out infinite alternate; }
  .aurora__b2 { animation: aurora-drift-b 72s ease-in-out infinite alternate; }
  .aurora__b3 { animation: aurora-drift-a 80s ease-in-out infinite alternate; }
}
@keyframes aurora-drift-a { from { transform: translate3d(0,0,0); } to { transform: translate3d(4%, 6%, 0); } }
@keyframes aurora-drift-b { from { transform: translate3d(0,0,0); } to { transform: translate3d(-5%, -4%, 0); } }

/* =====  PROGRESSIVE-BLUR VEIL under the header (charter §15)  =====
   clearpath's exact melt, GRADUATED TO ALL PAGES 2026-06-10 (tuned + tested
   on WM as fx-p10): 220px, 8 slices, pure x2 blur series capped at 20px.
   Masks are trapezoid BANDS on a 12.5% grid that CROSS-FADE — as each
   stronger slice fades in, the weaker one releases (vs the retired veil's
   accumulate-to-top masks). ~2 active slices per pixel: light top haze
   (~22px effective) and cheaper compositing. */
.v2-veil {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 220px;
  z-index: 99; /* just below header (100) */
  pointer-events: none;
  display: none;
  /* no white wash — the veil is purely the blur slices sampling the page */
}
@media (min-width: 768px) { .v2-veil { display: block; } }
html.v2-noveil .v2-veil { display: none !important; }
.v2-veil__layer {
  position: absolute;
  inset: 0;
}
.v2-veil__layer--1 { -webkit-backdrop-filter: blur(0.15625px); backdrop-filter: blur(0.15625px);
  -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 12.5%, #000 25%, transparent 37.5%); mask-image: linear-gradient(to top, transparent 0%, #000 12.5%, #000 25%, transparent 37.5%); }
.v2-veil__layer--2 { -webkit-backdrop-filter: blur(0.3125px); backdrop-filter: blur(0.3125px);
  -webkit-mask-image: linear-gradient(to top, transparent 12.5%, #000 25%, #000 37.5%, transparent 50%); mask-image: linear-gradient(to top, transparent 12.5%, #000 25%, #000 37.5%, transparent 50%); }
.v2-veil__layer--3 { -webkit-backdrop-filter: blur(0.625px); backdrop-filter: blur(0.625px);
  -webkit-mask-image: linear-gradient(to top, transparent 25%, #000 37.5%, #000 50%, transparent 62.5%); mask-image: linear-gradient(to top, transparent 25%, #000 37.5%, #000 50%, transparent 62.5%); }
.v2-veil__layer--4 { -webkit-backdrop-filter: blur(1.25px); backdrop-filter: blur(1.25px);
  -webkit-mask-image: linear-gradient(to top, transparent 37.5%, #000 50%, #000 62.5%, transparent 75%); mask-image: linear-gradient(to top, transparent 37.5%, #000 50%, #000 62.5%, transparent 75%); }
.v2-veil__layer--5 { -webkit-backdrop-filter: blur(2.5px); backdrop-filter: blur(2.5px);
  -webkit-mask-image: linear-gradient(to top, transparent 50%, #000 62.5%, #000 75%, transparent 87.5%); mask-image: linear-gradient(to top, transparent 50%, #000 62.5%, #000 75%, transparent 87.5%); }
.v2-veil__layer--6 { -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  -webkit-mask-image: linear-gradient(to top, transparent 62.5%, #000 75%, #000 87.5%, transparent 100%); mask-image: linear-gradient(to top, transparent 62.5%, #000 75%, #000 87.5%, transparent 100%); }
.v2-veil__layer--7 { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(to top, transparent 75%, #000 87.5%, #000 100%); mask-image: linear-gradient(to top, transparent 75%, #000 87.5%, #000 100%); }
.v2-veil__layer--8 { -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  -webkit-mask-image: linear-gradient(to top, transparent 87.5%, #000 100%); mask-image: linear-gradient(to top, transparent 87.5%, #000 100%); }

/* =====  HEADER  ===== */
/* Chromeless (clearpath grammar): no bar, no border. >=768px the nav floats
   ~30px down; the fixed progressive-blur veil is the only thing between the
   links and the page. Mobile (no veil) keeps glass. */
.v2-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
}
@media (min-width: 768px) {
  .v2-header {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
.v2-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--header-h);
  padding-block: 0.75rem;
  /* full-width: logo hugs the far left, actions the far right */
  max-width: none;
}
@media (min-width: 768px) { .v2-header__inner { padding-top: calc(0.75rem + 30px); } }
.v2-header__logo { display: inline-flex; align-items: center; flex: 0 0 auto; position: relative; }
.v2-header__logo img { width: auto; height: 38px; transition: opacity var(--dur-state) var(--ease-out); }
.v2-header__logo-white { position: absolute; inset: 0; opacity: 0; }

.v2-header__nav { display: none; }
@media (min-width: 1024px) {
  /* right-aligned: links sit with the phone/CTA cluster, not centered */
  .v2-header__nav { display: block; margin-left: auto; margin-right: clamp(0.5rem, 1.5vw, 1.5rem); }
}
/* font-size on the LIST, not just the links: the li line-box strut otherwise
   keeps body-size metrics and baselines the 12px caps ~1px lower than the
   flex-centered phone beside them */
.v2-header__list { display: flex; gap: clamp(1.5rem, 2.5vw, 2.75rem); align-items: center; font-size: var(--t-mono); }
/* top-level links only (> li > a) — dropdown links speak body voice below */
.v2-header__list > li > a {
  /* same voice as .toc-rail__link (label face, size, tracking; weight 600
     arrives via the Outfit caps-label group above) — only the color differs */
  font-family: var(--font-mono); font-size: var(--t-mono);
  color: #7BA1A2; text-transform: uppercase; letter-spacing: 0.08em;
  position: relative; padding: 0.4rem 0;
  display: inline-flex; align-items: center; gap: 0.4rem;
  background-image: var(--grad-brand);
  background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1.5px;
  transition: color var(--dur-state) var(--ease-out), background-size var(--dur-state) var(--ease-out);
}
.v2-header__list > li > a:hover { color: var(--ink); background-size: 100% 1.5px; }

/* --- nav dropdowns (Services / Locations / About — live-site IA parity) --- */
.v2-header__item { position: relative; }
.v2-caret { opacity: 0.7; flex: 0 0 auto; transition: transform var(--dur-state) var(--ease-out); }
.v2-header__item:hover > a .v2-caret,
.v2-header__item:focus-within > a .v2-caret,
.v2-header__item.is-open > a .v2-caret { transform: rotate(180deg); }
/* the link→card gap lives INSIDE the drop (padding-top), so the pointer never
   crosses dead space on the way down */
.v2-drop {
  position: absolute; top: 100%; left: 50%;
  padding-top: 0.85rem;
  transform: translateX(-50%) translateY(6px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur-state) var(--ease-out),
              transform var(--dur-state) var(--ease-out),
              visibility 0s linear var(--dur-state);
  z-index: 5;
}
.v2-header__item:hover > .v2-drop,
.v2-header__item:focus-within > .v2-drop,
.v2-header__item.is-open > .v2-drop {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0s, 0s, 0s;
}
.v2-drop__card {
  min-width: 256px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-mat);
  padding: 0.55rem;
  display: grid; gap: 1px;
}
.v2-drop__card a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.6rem 0.85rem;
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
  transition: background var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.v2-drop__card a:hover { background: color-mix(in srgb, var(--serenity) 14%, transparent); color: var(--ink); }

/* shared coming-soon chip (dropdown + mobile groups; footer keeps its filled one) */
.v2-soon {
  font-family: var(--font-mono); font-size: 0.5625rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em; line-height: 1;
  color: var(--trust-deep);
  border: 1px solid color-mix(in srgb, var(--trust) 55%, transparent);
  padding: 0.22rem 0.5rem; border-radius: 999px; flex: 0 0 auto;
}

.v2-header__actions { display: none; align-items: center; gap: 1.25rem; flex: 0 0 auto; }
@media (min-width: 1024px) { .v2-header__actions { display: flex; } }
/* phone speaks in the nav-link voice (same face/size/tracking; weight 600 via
   the caps group) so the whole right cluster reads as one system on any
   backdrop — the icon rides currentColor with it */
.v2-header__phone {
  font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: 0.08em; color: #7BA1A2;
  display: inline-flex; align-items: center; gap: 0.45rem;
  transition: color var(--dur-state) var(--ease-out);
}
.v2-header__phone:hover { color: var(--ink); }
/* CTA pill in the same voice — nav-scale label, but enough pill height that it
   still reads as kin to the section CTAs (1.05rem block) */
.v2-header__actions .btn { padding: 0.9rem 1.35rem; font-size: var(--t-mono); letter-spacing: 0.08em; }
.v2-header__actions .btn__circle { width: 28px; height: 28px; }

/* on-dark inversion — v2.js flips this while a dark band/section passes under
   the sticky row: links/phone/burger go white. The logo KEEPS its color mark
   (tried the white crossfade 2026-06-10 — the color emblem holds its own on
   the deep bands and keeps the brand present; the white img stays in the
   markup at opacity 0 if we ever want it back). CTA keeps its identity. */
.v2-header--inverse .v2-header__list > li > a { color: rgb(255 255 255 / 0.82); }
.v2-header--inverse .v2-header__list > li > a:hover { color: var(--white); }
/* dropdown cards stay paper-white over dark bands — their links keep ink */
.v2-header--inverse .v2-header__phone { color: rgb(255 255 255 / 0.82); }
.v2-header--inverse .v2-header__phone:hover { color: var(--white); }
.v2-header--inverse .v2-burger__line { background: var(--white); }

/* hero-tinted voice — a section carrying [data-header-tint] (the WM photo
   hero) deepens the floating links + phone from the resting #7BA1A2 to the
   photo's evergreen while the header rides over it (v2.js toggles the class;
   inverse wins when both would apply). CTA pill keeps its identity. */
.v2-header--tint .v2-header__list > li > a,
.v2-header--tint .v2-header__phone { color: rgb(63 99 96); }
.v2-header--tint .v2-header__list > li > a:hover,
.v2-header--tint .v2-header__phone:hover { color: var(--ink); }

/* header entrance — gentle top-down fade, staggered logo -> links -> actions.
   Gated on .v2-js like the reveals: no-JS / reduced-motion / ?reveal=all
   captures get the header instantly. fill backwards hides items through
   their delay; the animation releases to natural styles when done.
   Easing is a soft S-curve on purpose — NOT --ease-out, which front-loads
   ~70% of the fade into the first frames and reads as a flash on solid
   shapes (the logo and the CTA pill). Long durations + 80ms delay steps
   keep neighbouring links overlapping most of their fade. */
@media (prefers-reduced-motion: no-preference) {
  html.v2-js .v2-header__logo,
  html.v2-js .v2-header__list > li,
  html.v2-js .v2-header__phone,
  html.v2-js .v2-header__actions .btn,
  html.v2-js .v2-burger {
    animation: v2-hdr-in 1100ms cubic-bezier(0.45, 0.05, 0.25, 1) backwards;
  }
  html.v2-js .v2-header__logo { animation-duration: 1300ms; }
  /* three grouped links now (Services / Locations / About) */
  html.v2-js .v2-header__list > li:nth-child(1) { animation-delay: 150ms; }
  html.v2-js .v2-header__list > li:nth-child(2) { animation-delay: 240ms; }
  html.v2-js .v2-header__list > li:nth-child(3) { animation-delay: 330ms; }
  html.v2-js .v2-header__phone { animation-delay: 440ms; }
  html.v2-js .v2-header__actions .btn { animation-delay: 530ms; }
  html.v2-js .v2-burger { animation-delay: 150ms; }
}
@keyframes v2-hdr-in {
  from { opacity: 0; transform: translateY(-6px); }
}

/* burger */
.v2-burger { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -8px; }
@media (min-width: 1024px) { .v2-burger { display: none; } }
.v2-burger__box { position: relative; width: 24px; height: 16px; }
.v2-burger__line { position: absolute; left: 0; width: 100%; height: 1.5px; background: var(--ink); transition: transform var(--dur-state) var(--ease-soft), opacity var(--dur-micro) var(--ease-out); }
.v2-burger__line--1 { top: 0; }
.v2-burger__line--2 { top: 50%; transform: translateY(-50%); }
.v2-burger__line--3 { bottom: 0; }
.v2-burger[aria-expanded="true"] .v2-burger__line--1 { top: 50%; transform: translateY(-50%) rotate(45deg); }
.v2-burger[aria-expanded="true"] .v2-burger__line--2 { opacity: 0; }
.v2-burger[aria-expanded="true"] .v2-burger__line--3 { bottom: 50%; transform: translateY(50%) rotate(-45deg); }

/* mobile overlay */
.v2-mobile {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: color-mix(in srgb, var(--paper) 96%, transparent);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  padding: calc(var(--header-h) + 2rem) var(--gutter) 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
  overflow-y: auto; /* grouped nav can run past short viewports */
  opacity: 0;
  transition: opacity var(--dur-state) var(--ease-out);
}
.v2-mobile[hidden] { display: none; }
.v2-mobile.is-open { opacity: 1; }
.v2-mobile__nav > ul { display: grid; gap: 0; }
.v2-mobile__nav li { border-bottom: 1px solid var(--line); opacity: 0; transform: translateY(12px); }
.v2-mobile.is-open .v2-mobile__nav li { opacity: 1; transform: translateY(0); transition: opacity var(--dur-state) var(--ease-out), transform var(--dur-state) var(--ease-out); transition-delay: calc(var(--i) * 55ms); }
.v2-mobile__nav > ul > li > a { display: flex; align-items: baseline; gap: 1rem; padding: 1.1rem 0; font-family: var(--font-display); font-size: clamp(1.75rem, 7vw, 2.5rem); font-weight: 420; color: var(--ink); }
.v2-mobile__idx { font-family: var(--font-mono); font-size: var(--t-mono); color: var(--trust-deep); letter-spacing: 0.1em; }
/* grouped children under each big link (live-site IA) */
.v2-mobile__sub { display: grid; gap: 0 1.5rem; padding: 0 0 1.2rem 2.4rem; }
@media (min-width: 560px) { .v2-mobile__sub { grid-template-columns: 1fr 1fr; } }
.v2-mobile__sub li { border-bottom: 0; }
.v2-mobile__sub a {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.42rem 0;
  font-family: var(--font-body); font-size: 0.95rem; font-weight: 500;
  color: var(--ink-2);
}
.v2-mobile__sub a:hover { color: var(--ink); }
.v2-mobile__foot { display: grid; gap: 1rem; }
.v2-mobile__phone { font-family: var(--font-mono); font-size: 1.25rem; color: var(--ink); letter-spacing: 0.02em; }
.v2-mobile__foot .btn { justify-content: space-between; }

/* =====  FOOTER  ===== */
.v2-footer { background: var(--deep); color: var(--paper); position: relative; padding-top: clamp(3.5rem, 7vh, 6rem); padding-bottom: 2rem; }
.v2-footer__hairline { position: absolute; top: 0; left: 0; right: 0; height: 1.5px; background: var(--grad-brand); }
.v2-footer__inner { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); }
@media (min-width: 860px) { .v2-footer__inner { grid-template-columns: 1fr 1.3fr; } }
.v2-footer__logo { height: 46px; width: auto; margin-bottom: 1.5rem; }
.v2-footer__line { color: var(--serenity); max-width: 42ch; font-size: var(--t-small); line-height: 1.7; }
.v2-footer__phone { display: inline-flex; flex-direction: column; gap: 0.2rem; margin-top: 1.75rem; }
.v2-footer__phone-label { font-family: var(--font-mono); font-size: var(--t-mono); text-transform: uppercase; letter-spacing: 0.16em; color: var(--trust); }
.v2-footer__phone-num { font-family: var(--font-mono); font-size: 1.5rem; color: var(--paper); letter-spacing: 0.02em; transition: color var(--dur-state) var(--ease-out); }
.v2-footer__phone:hover .v2-footer__phone-num { color: var(--serenity); }

.v2-footer__loc-list { display: grid; gap: clamp(1.5rem, 3vw, 2rem); margin-top: 1.5rem; }
@media (min-width: 560px) { .v2-footer__loc-list { grid-template-columns: 1fr 1fr; } }
.v2-footer__loc-city { font-family: var(--font-body); font-weight: 600; font-size: 1rem; color: var(--paper); display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.v2-footer__soon { font-family: var(--font-mono); font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--deep); background: var(--serenity); padding: 0.2rem 0.5rem; border-radius: 999px; }
.v2-footer__loc-addr { color: var(--trust); font-size: var(--t-small); line-height: 1.6; margin-top: 0.4rem; }
.v2-footer__loc-phone { font-family: var(--font-mono); font-size: var(--t-small); color: var(--serenity); margin-top: 0.5rem; display: inline-block; }

.v2-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.5rem; border-top: 1px solid var(--line-dark); }
.v2-footer__copy { font-size: var(--t-small); color: var(--trust); }
.v2-footer__tag { font-family: var(--font-mono); font-size: var(--t-mono); text-transform: uppercase; letter-spacing: 0.18em; color: var(--serenity); }
.v2-footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem; font-size: var(--t-small); }
.v2-footer__legal a { color: var(--trust); transition: color var(--dur-micro) var(--ease-out); }
.v2-footer__legal a:hover { color: var(--white); }
.v2-footer__legal span { color: var(--trust); opacity: 0.45; }

/* =====  A/B TAB (charter §6)  =====
   Demo affordance, deliberately quiet: a vertical spine tab tucked into the
   left viewport edge (~14px showing); hover/focus slides it fully out.
   vertical-rl + rotate(180deg) = bottom-to-top book-spine reading, so the
   border-radius pair below lands on the SCREEN-right (exposed) corners. */
.ab-pill {
  position: fixed;
  left: -20px; /* tuck: box is ~34px wide -> a 14px sliver stays visible */
  bottom: clamp(96px, 18vh, 180px);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  background: var(--deep);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 0.9rem 0.55rem;
  border-radius: 10px 0 0 10px;
  box-shadow: var(--shadow-hover);
  transition: left var(--dur-state) var(--ease-out), background var(--dur-state) var(--ease-out);
}
.ab-pill:hover, .ab-pill:focus-visible { left: 0; background: var(--deep-2); }
.ab-pill__dot { width: 6px; height: 6px; border-radius: 999px; background: var(--serenity); flex: 0 0 auto; }
.ab-pill__arrow { color: var(--serenity); }
@media (max-width: 520px) { .ab-pill__label { display: none; } }

/* =====  MISSING-PART NOTE  ===== */
.v2-missing { padding-block: clamp(5rem, 12vh, 9rem); }
.v2-missing__title { margin: 0.5rem 0 1rem; }
.v2-missing__note { color: var(--ink-2); max-width: 56ch; margin-bottom: 2rem; }
.v2-missing code { font-family: var(--font-mono); font-size: 0.85em; background: var(--paper-2); padding: 0.15em 0.4em; border-radius: var(--radius-sm); }

/* =====  FX EXPERIMENTS (gated by html.fx-*; set by the WM review rig)  =====
   Candidate SYSTEM upgrades being evaluated live (framer-gap-audit P9/P10).
   Inert on every page that doesn't run the rig. Graduate or delete after review. */

/* P9 — two-speed reveal grammar: media dissolves slowly, no translate.
   Applied to every photograph on the page (hero, collage, band, cards) so the
   media/text speed contrast is actually legible. */
html.fx-p9.v2-js .reveal--dissolve[data-reveal] { opacity: 0; transform: none; }
html.fx-p9.v2-js .reveal--dissolve[data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition: opacity 1.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* P10a GRADUATED 2026-06-10: the clearpath melt is now the BASE .v2-veil on
   every page (see the veil block in section §15 above) — the fx-p10 flag is
   inert and kept only so older review links don't error. */

/* (P10b dot-slide retired: animating the dots' max-width/margins resized the
   pill mid-transition and bounced the header nav. The canonical dot now does
   a transform-only hover nudge — see the .btn component block.) */

/* 5. MOTION ----------------------------------------------------------------- */
/* Reveals only hide when JS is present (html.v2-js) AND motion is allowed.
   No-JS / failed-JS / reduced-motion / static screenshots => content visible. */
.v2-js [data-reveal] { opacity: 0; transform: translateY(14px); }
.v2-js [data-reveal].is-in { opacity: 1; transform: none; transition: opacity var(--dur-enter) var(--ease-out), transform var(--dur-enter) var(--ease-out); }
.v2-js [data-reveal="headline"] { filter: blur(6px); }
.v2-js [data-reveal="headline"].is-in { filter: blur(0); transition: opacity var(--dur-enter) var(--ease-out), transform var(--dur-enter) var(--ease-out), filter var(--dur-enter) var(--ease-out); }

/* 6. FOCUS / A11Y ----------------------------------------------------------- */
:where(a, button, summary, input, [tabindex]):focus-visible {
  outline: 2px solid var(--serenity);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.v2-dark :focus-visible, .cta-band :focus-visible, .v2-footer :focus-visible { outline-color: var(--serenity); }
summary:focus-visible { outline-offset: 0; }

/* reduced motion (charter §7) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .v2-js [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }
  .btn:active { transform: none; }
}

/* 7. PRINT ------------------------------------------------------------------ */
@media print {
  .v2-header, .v2-mobile, .ab-pill, .v2-footer__hairline, .toc-rail, .toc-mobile, .v2-burger { display: none !important; }
  .v2-body { background: #fff; color: #000; }
  .v2-body::after { display: none; }
  .v2-section, .v2-dark, .cta-band { background: #fff !important; color: #000 !important; padding-block: 1.5rem; }
  a { color: #000; }
  .btn { border: 1px solid #000; }
}


/* == production content-fixes == */
.p-team-row:hover .p-team-row__media::after,.p-team-row:focus-within .p-team-row__media::after{content:none!important;}
.v2-header--nav-open{z-index:101;}
.v2-header--nav-open .v2-burger__line{background:var(--ink)!important;}
.p-contact-form__status{margin-top:1rem;font-size:var(--t-body);padding:0.85rem 1.1rem;border-radius:var(--radius-sm);}
.p-contact-form__status--ok{background:color-mix(in srgb,var(--vitality) 18%,var(--white));border:1px solid color-mix(in srgb,var(--vitality) 55%,var(--line));color:var(--deep);}
.p-contact-form__status--err{background:color-mix(in srgb,var(--plum) 6%,var(--white));border:1px solid color-mix(in srgb,var(--plum) 30%,var(--line));color:var(--ink);}
.p-contact-form.is-sent .p-contact-grid,.p-contact-form.is-sent .p-contact-form__submit,.p-contact-form.is-sent .cf-hp{display:none;}

/* == production content-fixes: contact rows == */
@media (min-width: 720px){
.p-contact-loc .p-contact-loc__act{display:grid;grid-template-columns:7.5rem 12.5rem;column-gap:1.6rem;align-items:center;justify-self:end;}
.p-contact-loc .p-contact-loc__act .p-contact-loc__phone{justify-self:end;white-space:nowrap;}
.p-contact-loc .p-contact-loc__act .p-contact-loc__dir{justify-self:end;white-space:nowrap;}
}