/* main.css */
/* ============================================================
   IKAR LIQUID FERTILIZERS — core stylesheet
   Mirrors preview/index-v4.html (the design source of truth).
   Assembled from the prototype's four cascaded <style> blocks:
     Block A — ikar-main-css        (tokens, base, header, hero, line-card, footer, §14 WP extensions)
     Block B — ikar-preview-v2-overrides (ornaments, prominent certs, motion + stagger layer)
     Block C — ikar-v4-css          (fhero, field-card, fstat, callouts, catalog-modal, catalog-form)
     Block D — theme-only extensions (catalog-gate-trigger, packaging — no prototype equivalent)
   Loaded before partials.css; together they are one clean cascade.

   Design law (CLAUDE.md kill-list): no agri-SaaS, no gradient-blob heroes,
   no glassmorphism (single scoped exception: v4 hero molecule bubbles),
   no rainbow palette (one product-line accent per region), cream ground
   (never pure white), editorial restraint. Radii via --radius-* tokens;
   spacing on the 8px --s-* scale; motion transform/opacity only, honoring
   prefers-reduced-motion. Do not hardcode new colour/spacing/radius literals.
   ============================================================ */

/* ----------------------------------------------------------------
   1. TOKENS
   ---------------------------------------------------------------- */
:root {
  /* Color */
  --cream-ground: #EFEDE6;
  --cream-card:   #FAF9F4;
  --navy:         #1F3A6E;
  --deep-ink:     #0F1A33;
  --cream-on-navy:#EFEDE6;
  --rule:         rgba(15, 26, 51, 0.12);
  --rule-strong:  rgba(15, 26, 51, 0.24);
  --rule-on-navy: rgba(239, 237, 230, 0.18);
  /* Sampled from the brand wheat-field artwork. Decorative ornaments only
     (aria-hidden, never text) — exempt from the 4.5:1 contrast rule. */
  --wheat-silver: #B7C4CE;
  /* Watermark paint — the Icarus figure's own pale blue, kept as its
     source colour and taken down with opacity, not saturation. */
  --watermark-blue: #85B4DC;

  /* Six product line colors */
  --line-add-value: #F39200;
  --line-physio:    #6FA84A;
  --line-correct:   #1F3A6E;
  --line-intense:   #C0272D;
  --line-assist:    #503383;
  --line-improve:   #4D5C66;

  /* Type families.
     Display was Century Gothic — a Monotype face we never loaded, so it only
     rendered on machines that happened to own it and fell through to a
     different fallback everywhere else. Jost is the geometric grotesque we
     already downloaded for the v4 hero title; leading with it makes display
     type identical on every device. The old stack stays as a load-failure
     fallback only. */
  --font-display: 'Jost', 'Century Gothic', 'CenturyGothic', 'URW Gothic', 'ITC Avant Garde Gothic', 'Avant Garde', 'Futura', sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale (clamp for breathing across breakpoints).
     Calibrated so each token reaches its DIRECTION.md ceiling at ~1440px desktop. */
  --display-xl: clamp(2.75rem, 8.4vw + 0.5rem, 6rem);      /* hits 96px ≈ 1048px */
  --display-l:  clamp(1.625rem, 3vw + 0.35rem, 2.375rem);  /* h2 / section openers — 2026-08: ceiling 44 -> 38px */
  --display-m:  clamp(1.75rem, 3.9vw + 0.25rem, 3.5rem);   /* hits 56px ≈ 1413px */
  --display-s:  clamp(1.375rem, 2.5vw + 0.25rem, 2.25rem); /* hits 36px ≈ 1412px */
  --body-l:     clamp(1.0625rem, 1.05vw + 0.85rem, 1.25rem);
  --body-m:     1rem;
  --body-s:     0.875rem;
  --mono-m:     1rem;
  --ui:         0.8125rem;

  --leading-tight: 1.04;
  --leading-snug:  1.18;
  --leading-body:  1.55;
  --leading-loose: 1.7;

  --track-tight:   -0.02em;
  --track-snug:    -0.01em;
  --track-ui:      0.02em;
  --track-eyebrow: 0.18em;

  /* Space (8px base) */
  --s-1: 8px;  --s-2: 16px; --s-3: 24px; --s-4: 32px;
  --s-5: 48px; --s-6: 64px; --s-7: 96px; --s-8: 128px;

  /* Layout */
  --gutter:      clamp(24px, 8vw, 128px);
  --max-content: 1280px;
  --measure:     64ch;
  /* Wider than --measure specifically for the research-article head/body —
     70ch keeps long-form trial narrative from feeling clipped at the
     standard 64ch reading measure used elsewhere. */
  --measure-article: 70ch;

  /* Radius — v4 polish: soft rounded rectangles, not pills */
  --radius-btn:  12px;
  --radius-chip: 12px;
  --radius-card: 16px;

  /* Motion */
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast:  150ms;
  --dur-fade:  420ms;
}

/* ----------------------------------------------------------------
   2. RESET / BASE
   ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--cream-ground);
  color: var(--deep-ink);
  font-family: var(--font-body);
  font-size: var(--body-m);
  font-weight: 400;
  line-height: var(--leading-body);
  font-kerning: normal;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1, 'ss01' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
a:hover { opacity: 0.72; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

blockquote, figure, dl, dd, ol, ul { margin: 0; padding: 0; }
ol, ul { list-style: none; }

h1, h2, h3, h4 { margin: 0; font-weight: 400; }

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

/* ----------------------------------------------------------------
   3. UTILITIES
   ---------------------------------------------------------------- */
.container {
  width: 100%;
  /* Gutters live outside the 1280px content max — content is 1280px wide
     (per DIRECTION.md), the gutter is the margin to the viewport edge. */
  max-width: calc(var(--max-content) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.serif { font-family: var(--font-display); }
.mono  {
  font-family: var(--font-mono);
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  letter-spacing: 0;
}

.italic { font-style: italic; }

.eyebrow {
  font-size: var(--ui);
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  /* Ambient eyebrows sit quieter than headlines; line-colored eyebrows
     (e.g., physio) override per-section. Alpha 0.7 (not 0.6) is the floor
     that clears WCAG AA 4.5:1 on both cream-ground and cream-card — 0.6
     computed to 4.34:1, a real failure at this 13px size. */
  color: rgba(15, 26, 51, 0.7);
  margin: 0 0 var(--s-3);
}

.display-xl {
  font-family: var(--font-display);
  font-size: var(--display-xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--track-tight);
  color: var(--deep-ink);
  font-weight: 400;
}
.display-l {
  font-family: var(--font-display);
  font-size: var(--display-l);
  line-height: var(--leading-snug);
  letter-spacing: var(--track-snug);
  color: var(--deep-ink);
  font-weight: 400;
}
.display-m {
  font-family: var(--font-display);
  font-size: var(--display-m);
  line-height: var(--leading-snug);
  letter-spacing: var(--track-snug);
  color: var(--deep-ink);
  font-weight: 400;
}
.display-s {
  font-family: var(--font-display);
  font-size: var(--display-s);
  line-height: var(--leading-snug);
  letter-spacing: 0;
  color: var(--deep-ink);
  font-weight: 500;
}

.visually-hidden,
/* WP core's the_posts_pagination() hardcodes this class name for its own
   offscreen heading — alias it to the same treatment rather than leaving
   it unstyled (it would otherwise render as a plain visible heading). */
.screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* WP core pagination (the_posts_pagination()) — .archive-pagination is our
   wrapper div; .nav-links/.page-numbers are WP's own markup, currently
   latent (only one item exists per archive today) but styled now so it
   isn't bare browser defaults the moment a second page exists. */
.archive-pagination .nav-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-6);
  font-family: var(--font-mono);
  font-size: var(--body-s);
}
.archive-pagination .page-numbers {
  color: rgba(15, 26, 51, 0.7);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.archive-pagination a.page-numbers:hover,
.archive-pagination a.page-numbers:focus-visible {
  color: var(--deep-ink);
  border-bottom-color: var(--rule-strong);
}
.archive-pagination .page-numbers.current {
  color: var(--deep-ink);
  font-weight: 500;
}
.archive-pagination .page-numbers.dots { color: rgba(15, 26, 51, 0.4); }

:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
  border-radius: 1px;
}

/* ----------------------------------------------------------------
   4. SECTION BASE
   ---------------------------------------------------------------- */
.section {
  /* DIRECTION.md vertical rhythm: sections in multiples of 64–128px.
     Ceiling lowered 128 -> 88 in the 2026-08 client review ("viskas smarkiai
     perdidinta" — everything is heavily oversized). This is the single change
     that tightens the whole site's vertical rhythm, and it is also what brings
     the product-lines heading above the fold on the homepage. Sections that
     need extra air do it via section-specific padding below — never above 88. */
  padding-block: clamp(56px, 6vw, 88px);
  position: relative;
  /* Hash-anchored jumps land below the sticky pill nav (80px + padding) */
  scroll-margin-top: clamp(96px, 10vw, 120px);
}
.section + .section { border-top: 1px solid var(--rule); }
.section--proof + .section,
.section--proof { border-top: 0; }

/* Single-column opener. This was a two-column grid with an explanatory lede
   bottom-aligned in a 36ch right column; the 2026-08 client review asked for
   that right column gone on EVERY page, so the title now runs full width and
   .section-header__lede has no markup left anywhere in the theme. The rule is
   kept below for any editor-authored markup that still carries the class. */
.section-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  column-gap: var(--s-6);
  row-gap: var(--s-3);
  /* 64 -> 44 ceiling, same "oversized" note as .section above. */
  margin-bottom: clamp(32px, 3.2vw, 44px);
}
.section-header__lead {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.section-header__title {
  /* 20ch was tuned against the old 1fr/36ch split. With the right column gone
     the title has the full measure, so give it room before it wraps. */
  max-width: 28ch;
  margin: 0;
}
.section-header__sub {
  grid-column: 1 / -1;
  margin: var(--s-3) 0 0;
  color: var(--navy);
  max-width: 30ch;
}
.section-header__lede {
  max-width: 42ch;
  font-size: var(--body-l);
  color: rgba(15, 26, 51, 0.78);
  margin: 0;
}

/* Reduced vertical rhythm for short/utility sections that don't warrant
   the full 128px ceiling (e.g. the line-page "Application & compatibility"
   strip, which is often just a lede + a link to the catalog). */
.section--tight {
  padding-block: clamp(32px, 5vw, 64px);
}

/* ----------------------------------------------------------------
   5. HEADER
   ---------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              -webkit-backdrop-filter var(--dur-fast) var(--ease),
              backdrop-filter var(--dur-fast) var(--ease);
}
.site-header.is-stuck {
  background: color-mix(in srgb, var(--cream-card) 82%, transparent);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: var(--rule);
}
/* Browsers without backdrop-filter fall back to a near-opaque cream bar so
   nav text never shows through scrolling content below. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-header.is-stuck { background: color-mix(in srgb, var(--cream-card) 97%, var(--cream-ground)); }
}
.site-header__inner {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: var(--s-4);
  height: 84px;
}
.brand { display: inline-flex; align-items: center; }
.brand img { height: 66px; width: auto; display: block; }

.site-nav { font-size: var(--ui); justify-self: center; }

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  justify-self: end;
}
.site-header__lang {
  font-size: var(--ui);
  letter-spacing: var(--track-ui);
  color: var(--deep-ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.site-header__lang:hover { opacity: 0.72; }

.site-nav__toggle {
  display: none;
  width: 40px; height: 40px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.site-nav__toggle-bar {
  display: block;
  width: 22px; height: 1.5px;
  background: var(--deep-ink);
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar:first-child {
  transform: translateY(3px) rotate(45deg);
}
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar:last-child {
  transform: translateY(-3px) rotate(-45deg);
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  letter-spacing: var(--track-ui);
}
.site-nav__list a {
  text-decoration: none;
  color: var(--deep-ink);
  padding: var(--s-1) 0;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.site-nav__list a:hover { opacity: 1; border-bottom-color: var(--deep-ink); }

/* Catalogue CTA lives only inside the mobile drawer (the bar version is hidden
   on mobile to keep the row clear); desktop keeps it in .site-header__actions. */
.site-nav__drawer-cta { display: none; }

/* ----------------------------------------------------------------
   6. HERO — full editorial spread
   ---------------------------------------------------------------- */
.section--hero {
  /* Sticky header sits directly above — keep only a modest top breath so the
     headline starts near the fold; the dek still earns room below. */
  padding-block: clamp(20px, 2.5vw, 36px) clamp(12px, 1.5vw, 18px);
  overflow: hidden;
}
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: clamp(48px, 6vw, 96px);
}

.hero__eyebrow {
  /* color inherits from .eyebrow base — kept consistent across the page */
  margin: 0 0 var(--s-4);
}
.hero__headline {
  margin: 0;
  max-width: 14ch;
  /* Reduce from display-xl so the plant photograph earns equal weight */
  font-size: clamp(3rem, 6.4vw, 5.5rem);
  line-height: 0.98;
}
.hero__headline em {
  font-style: italic;
  color: var(--deep-ink);
}

.hero__figure {
  width: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero__figure img {
  width: 100%;
  /* Hero plant scales generously on desktop per DIRECTION.md
     ("Hero can break to full-width photograph"). Native asset is 1024×768
     so we cap near native width on the largest desktop. */
  max-width: clamp(360px, 56vw, 880px);
  height: auto;
  display: block;
}

.hero__sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--display-m);
  line-height: 1.18;
  color: var(--navy);
  max-width: 22ch;
  margin: 0;
  justify-self: end;
  text-align: right;
}

.hero__dek {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  column-gap: clamp(48px, 6vw, 96px);
  align-items: start;
  border-top: 1px solid var(--rule);
  padding-top: var(--s-6);
}
.hero__dek p {
  font-size: var(--body-l);
  line-height: var(--leading-loose);
  color: rgba(15, 26, 51, 0.82);
  margin: 0;
  max-width: 38ch;
}
.hero__dek-divider {
  width: 1px;
  align-self: stretch;
  background: var(--rule);
  padding: 0;
  margin: 0;
  display: block;
}

/* ----------------------------------------------------------------
   7. PROOF / POSITIONING
   ---------------------------------------------------------------- */
.section--proof {
  background: var(--navy);
  color: var(--cream-on-navy);
  /* Compact metrics band under the hero (quote removed). Balanced vertical
     padding so the stats sit centred in the navy band rather than clinging
     to the top edge with a void beneath. Tightened in the 2026-08 review —
     this band is the last thing between the hero and the product lines. */
  padding-block: clamp(20px, 2vw, 28px);
}
.section--proof .container { color: var(--cream-on-navy); }

.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 2.6vw, 44px);
}
.stat {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.stat__num {
  font-size: clamp(2.125rem, 3.1vw, 3.125rem);
  font-weight: 500;
  color: var(--cream-on-navy);
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  line-height: 1;
}
.stat__label {
  font-size: var(--ui);
  color: rgba(239, 237, 230, 0.78);
  letter-spacing: var(--track-ui);
  margin: 0;
  line-height: 1.4;
  max-width: 18ch;
}

/* ----------------------------------------------------------------
   8. PHYSIO — foregrounded family
   ---------------------------------------------------------------- */
.section--physio {
  padding-block: clamp(56px, 5vw, 88px); /* 128 -> 88, 2026-08 'everything is oversized' */
}
.physio {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  column-gap: clamp(48px, 6vw, 112px);
  row-gap: clamp(64px, 7vw, 96px);
  align-items: start;
}
.physio__intro { display: contents; }
.physio__eyebrow {
  color: var(--line-physio);
  margin: 0 0 var(--s-4);
  grid-column: 1;
}
.physio__headline {
  grid-column: 1;
  max-width: 18ch;
  margin: 0;
  color: var(--deep-ink);
}
.physio__sub {
  grid-column: 1;
  color: var(--line-physio);
  max-width: 22ch;
  margin: var(--s-4) 0 0;
  line-height: 1.18;
}

.physio__figure {
  grid-column: 2;
  grid-row: 1 / span 4;
  position: relative;
  background: transparent;
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(32px, 4vw, 64px);
}
.physio__icon-lg {
  /* Per DIRECTION rule 2 (six product-line identity rules): icons used
     "at large display scale on the line's hero." Sized to fill the bento. */
  width: clamp(160px, 22vw, 320px);
  height: auto;
  display: block;
}

.physio__claims {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin-top: var(--s-6);
}
.physio__claims li {
  padding: clamp(28px, 3vw, 40px) clamp(20px, 2.4vw, 32px);
  border-right: 1px solid var(--rule);
  display: grid;
  gap: var(--s-2);
}
.physio__claims li:last-child { border-right: 0; }
.physio__claim-num {
  font-size: clamp(1.5rem, 2.4vw, 2.25rem);
  color: var(--line-physio);
  font-weight: 500;
  line-height: 1.05;
}
.physio__claim-label {
  font-family: var(--font-mono);
  font-size: var(--ui);
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  color: rgba(15, 26, 51, 0.6);
}
.physio__claim-dek {
  font-size: var(--body-s);
  color: rgba(15, 26, 51, 0.74);
  line-height: 1.5;
  margin: 0;
}

/* ----------------------------------------------------------------
   8b. SIX-LINE GRID — editorial cards with real production icons
   ---------------------------------------------------------------- */
.section--lines {
  padding-block: clamp(56px, 5vw, 88px); /* 128 -> 88, 2026-08 'everything is oversized' */
  background: var(--cream-ground);
}
/* Compact tiles — all six product lines fit one row; the full description is
   revealed as a drop-down panel on hover/focus (client asked for much smaller
   boxes). Collapses to 3 columns, then one per row on phones. */
.lines-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(12px, 1.2vw, 18px);
  margin-top: clamp(40px, 4.5vw, 64px);
}
.line-card {
  position: relative;
  background: var(--cream-card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
}
/* The always-visible face reads like a specimen cell in a catalogue index:
   the accent index number and the brand mark sit in opposite top corners, the
   family name and a one-word discipline label anchor the bottom. No hollow
   centre — the full science thesis is the hover/focus panel below. Focusing
   the face opens that panel via :focus-within, so it works for keyboards. */
.line-card__face {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-3);
  height: 100%;
  min-height: clamp(134px, 12vw, 158px);
  padding: clamp(15px, 1.4vw, 19px);
  text-decoration: none;
  color: inherit;
}
.line-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-2);
}
/* Colour lives here — one accent per family, expressed as an index numeral
   rather than a decorative edge-bar. Deepened toward ink so warm accents
   (orange, green) stay legible on cream while keeping their hue identity. */
.line-card__index {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 0.85vw + 1.05rem, 1.85rem);
  font-weight: 500;
  line-height: 0.85;
  letter-spacing: -0.02em;
  color: color-mix(in oklab, var(--card-accent, var(--navy)) 74%, var(--deep-ink));
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}
.line-card__icon {
  width: clamp(28px, 2.2vw, 34px);
  height: auto;
  flex: none;
}
.line-card__body {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-2);
}
.line-card__text { min-width: 0; }
.line-card__name {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.55vw + 0.82rem, 1.3rem);
  line-height: 1.05;
  margin: 0;
  color: var(--deep-ink);
  font-weight: 500;
  letter-spacing: -0.015em;
}
.line-card__label {
  display: block;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(15, 26, 51, 0.66); /* ≥4.5:1 on cream for this small label */
  white-space: nowrap;
}
.line-card__more {
  flex: none;
  color: color-mix(in oklab, var(--card-accent, var(--navy)) 74%, var(--deep-ink));
  font-size: 1.05rem;
  line-height: 1;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
}
.line-card:hover .line-card__more,
.line-card:focus-within .line-card__more { opacity: 1; }
/* Description panel — now ALWAYS visible, in flow.
   It used to be an absolutely-positioned panel revealed on hover/focus. The
   2026-08 client review asked for no text that appears on mouseover
   ("nereikia kad uzvedant pelyte jau ismeta dali teksto"), so the thesis is
   simply part of the card. That does make the cards taller again — it
   reverses the earlier "smaller boxes" request, which is called out in the
   reply to the client. */
.line-card__thesis {
  margin: 0 clamp(15px, 1.4vw, 19px);
  padding: var(--s-2) 0 clamp(15px, 1.4vw, 19px);
  border-top: 1px solid var(--rule);
  font-size: var(--body-s);
  line-height: 1.5;
  color: rgba(15, 26, 51, 0.82);
}
.line-card[data-line="add-value"] { --card-accent: var(--line-add-value); }
.line-card[data-line="physio"]    { --card-accent: var(--line-physio); }
.line-card[data-line="correct"]   { --card-accent: var(--line-correct); }
.line-card[data-line="intense"]   { --card-accent: var(--line-intense); }
.line-card[data-line="assist"]    { --card-accent: var(--line-assist); }
.line-card[data-line="improve"]   { --card-accent: var(--line-improve); }
/* The former @media (hover:none) branch that inlined the thesis on touch is
   gone — inline is now the treatment on every device, so there is nothing
   left to override. The face no longer needs a fixed height either. */
.line-card__face { height: auto; min-height: 0; }
/* (reduced-motion override for .line-card__thesis retired with its transform) */

/* ----------------------------------------------------------------
   9. RESEARCH
   ---------------------------------------------------------------- */
.section--research {
  background: var(--cream-ground);
  padding-block: clamp(56px, 5vw, 88px); /* 128 -> 88, 2026-08 'everything is oversized' */
}
.research-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  margin-top: var(--s-6);
}
.research-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.research-card__figure {
  aspect-ratio: 4 / 3;
  background: var(--cream-card);
  overflow: hidden;
  margin: 0 0 var(--s-3);
}
.research-card__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.byline {
  font-size: var(--ui);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  /* See .eyebrow — 0.7 is the AA-safe floor on cream, not 0.6. */
  color: rgba(15, 26, 51, 0.7);
  margin: 0;
}
.research-card__title {
  margin: 0;
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.22;
  color: var(--deep-ink);
  max-width: 28ch;
}
.research-card__dek {
  margin: 0;
  font-size: var(--body-l);
  line-height: var(--leading-loose);
  color: rgba(15, 26, 51, 0.74);
  max-width: 42ch;
}
.link-arrow {
  font-size: var(--ui);
  letter-spacing: var(--track-ui);
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid var(--navy);
  align-self: flex-start;
  padding-bottom: 2px;
  margin-top: var(--s-2);
}
.link-arrow:hover { opacity: 1; color: var(--deep-ink); border-color: var(--deep-ink); }

/* ----------------------------------------------------------------
   10. CERTIFICATIONS
   ---------------------------------------------------------------- */
.section--certs {
  padding-block: clamp(72px, 8vw, 112px);
}
.certs__eyebrow {
  text-align: center;
  margin-bottom: var(--s-6);
}
.cert-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  justify-items: center;
  gap: var(--s-5);
  padding: var(--s-5) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.cert-strip__item {
  display: flex; align-items: center; justify-content: center;
}
.cert-strip__item img {
  height: 56px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: grayscale(0.2);
  opacity: 0.92;
  transition: filter var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.cert-strip__item:hover img { filter: grayscale(0); opacity: 1; }

.certs__note {
  text-align: center;
  margin-top: var(--s-5);
  color: rgba(15, 26, 51, 0.6);
  font-size: var(--body-s);
  max-width: 56ch;
  margin-inline: auto;
}

/* ----------------------------------------------------------------
   11. FOOTER
   ---------------------------------------------------------------- */
.site-footer {
  background: var(--navy);
  color: var(--cream-on-navy);
  padding-block: clamp(96px, 10vw, 144px) var(--s-5);
  scroll-margin-top: clamp(96px, 10vw, 120px);
}

.founder-quote {
  color: var(--cream-on-navy);
  max-width: 40ch;
  font-style: italic;
  /* Footer quote, not a headline — modest size so it reads as a closing
     voice, not a hero statement (the display-m class in the markup would
     otherwise render it ~37px). */
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.35;
  letter-spacing: 0;
  /* No border-bottom here: the quote is only 36ch wide, so a bottom rule
     spanned just part of the footer width (an off-looking partial line) and
     duplicated the divider the column top-rules already provide. Keep a
     single margin gap; the .site-footer__col top borders are the divider. */
  margin-bottom: clamp(56px, 7vw, 96px);
}
.founder-quote__cite {
  display: block;
  margin-top: var(--s-4);
  font-style: normal;
}
.founder-quote__name {
  display: block;
  font-family: var(--font-display);
  font-size: var(--body-l);
  color: var(--cream-on-navy);
  font-style: normal;
}
.founder-quote__role {
  display: block;
  margin-top: 4px;
  font-size: var(--ui);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: rgba(239, 237, 230, 0.6);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(32px, 4vw, 64px);
  margin-bottom: clamp(64px, 7vw, 96px);
}
.site-footer__col {
  border-top: 1px solid var(--rule-on-navy);
  padding-top: var(--s-3);
}
.site-footer__col .eyebrow {
  /* color intentionally NOT set here: partials/eyebrow.php's `color: 'cream'`
     branch renders an inline style attribute, which always wins over any
     external rule regardless of specificity — the actual color is fixed at
     its source in that partial (see the 0.75-alpha fix there). */
  margin-bottom: var(--s-3);
}
.site-footer__address {
  font-style: normal;
  font-size: var(--body-m);
  line-height: 1.7;
  color: rgba(239, 237, 230, 0.85);
}
.site-footer__address a { color: var(--cream-on-navy); }
.site-footer__links {
  display: flex; flex-direction: column;
  gap: var(--s-1);
  font-size: var(--body-m);
}
.site-footer__links a {
  color: rgba(239, 237, 230, 0.85);
  text-decoration: none;
}
.site-footer__links a:hover { color: var(--cream-on-navy); opacity: 1; }
.site-footer__catalog-note {
  font-size: var(--body-s);
  line-height: 1.6;
  color: rgba(239, 237, 230, 0.74);
  margin: 0 0 var(--s-3);
  max-width: 32ch;
}
.site-footer__catalog-cta {
  font-size: var(--ui);
  letter-spacing: var(--track-ui);
  color: var(--cream-on-navy);
  text-decoration: none;
  border-bottom: 1px solid rgba(239, 237, 230, 0.5);
  padding-bottom: 2px;
}
.site-footer__catalog-cta:hover { opacity: 1; border-color: var(--cream-on-navy); }
.site-footer__certs-text {
  font-size: var(--body-s);
  line-height: 1.7;
  color: rgba(239, 237, 230, 0.78);
  margin: 0;
}

.site-footer__legal {
  border-top: 1px solid var(--rule-on-navy);
  padding-top: var(--s-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
}
.site-footer__legal small {
  font-size: var(--ui);
  letter-spacing: var(--track-ui);
  color: rgba(239, 237, 230, 0.72);
}
.site-footer__legal a {
  color: rgba(239, 237, 230, 0.78);
  text-decoration: none;
}
.site-footer__legal a:hover { color: var(--cream-on-navy); opacity: 1; }
.site-footer__brand img {
  height: 44px; width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

/* ----------------------------------------------------------------
   12. MOTION (fade-in, restrained)
   Content is visible by default so the page never appears broken
   if JS or the IntersectionObserver fails. The .fade-in / is-visible
   hooks remain available for opt-in child animations (ornaments,
   section-bar, stat numbers) without hiding the section itself.
   ---------------------------------------------------------------- */
.fade-in { transition: opacity var(--dur-fade) var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .fade-in { opacity: 1; transition: none !important; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ----------------------------------------------------------------
   13. RESPONSIVE
   ---------------------------------------------------------------- */
@media (max-width: 1024px) {
  .lines-grid { grid-template-columns: repeat(3, 1fr); }
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: 0; }
}

@media (max-width: 820px) {
  .site-header__inner { display: flex; column-gap: var(--s-3); }
  .brand { margin-right: auto; }
  .site-nav { position: static; justify-self: auto; }
  .site-header__lang { display: none; }
  /* Bar catalogue button steps aside on mobile — it reappears in the drawer.
     Extra specificity beats the v4 .site-header__actions .cta--primary rule. */
  .site-header__inner .site-header__actions .cta--primary { display: none; }
  .site-nav__toggle { display: flex; }
  /* The drawer <ul> is a DESCENDANT of .site-header, so its z-index
     competes with its siblings inside the header's stacking context —
     not with the header itself. Lift the brand and the toggle above the
     drawer (40) or the panel paints over its own close button. */
  .site-header .brand,
  .site-header .site-nav__toggle {
    position: relative;
    z-index: 60;
  }
  /* CRITICAL: the stuck header's backdrop-filter makes the header the
     CONTAINING BLOCK for the fixed drawer (per spec filter/backdrop-
     filter do that) — scrolled pages then squeeze "inset: 0" into the
     71px header box and page content paints through. While the drawer
     is open the panel covers everything anyway, so drop the glass. */
  body.has-nav-open .site-header.is-stuck {
    background: transparent;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    border-bottom-color: transparent;
  }
  /* Full-screen takeover (redesign 2026-07-21 — the old right-anchored
     dropdown card read as broken on phones). Fixed panel; the lifted
     brand + close toggle above stay in place; hairline-separated rows,
     left-aligned, CTA pinned to the bottom. */
  .site-nav__list {
    position: fixed;
    inset: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--cream-ground);
    border: 0;
    border-radius: 0;
    padding: calc(84px + env(safe-area-inset-top, 0px)) clamp(20px, 6vw, 40px) calc(var(--s-5) + env(safe-area-inset-bottom, 0px));
    min-width: 0;
    z-index: 40;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .site-nav__list > li {
    border-top: 1px solid var(--rule);
  }
  .site-nav__list > li:first-child { border-top: 0; }
  .site-nav__list > li > a {
    display: block;
    font-family: var(--font-display);
    font-size: 1.375rem;
    padding: var(--s-3) 0;
    border-bottom: 0;
  }
  /* Hiding the nav list behind the toggle is a JS-only enhancement — `.is-open`
     is only ever added by header.js's click handler. Without the `.js` scope
     here, `display: none` would apply unconditionally below 820px, making the
     entire primary nav unreachable for no-JS users on mobile/tablet. */
  .js .site-nav__list { display: none; }
  .site-nav__list.is-open { display: flex; }
  /* CTA pins to the bottom of the takeover when the list is shorter than
     the viewport, flows naturally when it scrolls. */
  .site-nav__list > li.site-nav__drawer-cta {
    display: block;
    width: 100%;
    margin-top: auto;
    padding-top: var(--s-5);
    border-top: 0;
  }
  .site-nav__drawer-cta a.cta--primary {
    display: inline-flex;
    width: 100%;
    justify-content: center;
    padding: 12px var(--s-4);
    color: var(--cream-ground);
    border-bottom: 0;
  }

  .hero__sub { justify-self: start; text-align: left; }
  .hero__dek {
    grid-template-columns: 1fr;
    row-gap: var(--s-4);
  }
  .hero__dek-divider { display: none; }
  .hero__dek p { max-width: 56ch; }

  /* .section-header is single-column at every width now — see §3. */

  .physio { grid-template-columns: 1fr; }
  .physio__intro { display: contents; }
  .physio__figure {
    grid-column: 1;
    grid-row: auto;
    aspect-ratio: 5 / 4;
    margin-top: var(--s-3);
  }

  .research-grid { grid-template-columns: 1fr; gap: clamp(48px, 7vw, 80px); }

  .cert-strip { grid-template-columns: repeat(2, 1fr); gap: var(--s-5); }
  .cert-strip__item img { height: 48px; }

  .site-footer__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .lines-grid { grid-template-columns: 1fr; }
  .physio__claims { grid-template-columns: 1fr; }
  .physio__claims li { border-right: 0; border-bottom: 1px solid var(--rule); }
  .physio__claims li:last-child { border-bottom: 0; }

  /* Hero headline measure (14ch) is built for desktop typography; below 600px
     it forces awkward 4-line wraps. Let the headline run to viewport edge. */
  .hero__headline { max-width: none; }
}

@media (max-width: 480px) {
  :root { --gutter: 24px; }

  .site-header__inner { height: 70px; }
  .brand img { height: 48px; }

  .section { padding-block: clamp(56px, 12vw, 80px); }

  .hero__sub { font-size: 1.5rem; }
  .hero__figure { aspect-ratio: 4 / 5; }

  .stat-strip { grid-template-columns: 1fr; }
  .stat { border-right: 0 !important; padding-block: var(--s-4); }

  .cert-strip { gap: var(--s-4) var(--s-2); }
  .cert-strip__item img { height: 40px; }

  .site-footer__grid { grid-template-columns: 1fr; }

  .site-footer__legal { flex-direction: column-reverse; align-items: flex-start; gap: var(--s-3); }
}

/* ============================================================
   14. WP TEMPLATE EXTENSIONS — components introduced by the
       WordPress port that did not exist in /design/v2/. These
       follow the same vocabulary as the locked v2 styles
       (cream ground, navy chrome, generous negative space,
       editorial restraint). Components teammate may absorb any
       of these into /partials/ at any time.
   ============================================================ */

/* ----- Buttons + CTA strip ----- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  font-family: var(--font-body);
  font-size: var(--ui);
  font-weight: 500;
  letter-spacing: var(--track-ui);
  padding: 14px 24px;
  border-radius: var(--radius-btn);
  border: 1px solid transparent;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
  cursor: pointer;
}
.button--primary {
  background: var(--navy);
  color: var(--cream-ground);
  border-color: var(--navy);
}
.button--primary:hover {
  background: var(--deep-ink);
  border-color: var(--deep-ink);
  opacity: 1;
}
.button--ghost {
  background: transparent;
  color: var(--navy);
  border-color: var(--navy);
}
.button--ghost:hover {
  background: var(--navy);
  color: var(--cream-ground);
  opacity: 1;
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-5);
  margin-top: var(--s-5);
}
/* Closing CTA strips carry a heading and a button row — the full 128px
   section rhythm leaves them floating in air. Tightened once here rather
   than in each of the six templates that use the class. */
.section--cta { padding-block: clamp(48px, 6vw, 88px); }
.cta-strip {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: end;
  gap: var(--s-5);
}
.cta-strip__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  align-items: center;
}
@media (max-width: 820px) {
  .cta-strip { grid-template-columns: 1fr; }
}

/* ----- Physio CTA + research more link ----- */
.physio__cta {
  grid-column: 1 / -1;
  margin-top: var(--s-4);
}
.research__more {
  margin-top: var(--s-5);
}

/* ----- For partners strip (new homepage section) ----- */
.section--partners {
  background: var(--cream-ground);
}
/* The invitation reads as a contained card on the cream ground, borrowing the
   card vocabulary so the B2B ask carries the weight the rest of the page does. */
.partners {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: end;
  gap: clamp(40px, 5vw, 88px);
  background: var(--cream-card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  padding: clamp(40px, 5vw, 64px);
  box-shadow: 0 24px 56px -40px rgba(15, 26, 51, 0.20);
}
.partners__headline {
  margin: var(--s-2) 0 0;
  max-width: 22ch;
  color: var(--deep-ink);
}
.partners__dek {
  font-size: var(--body-l);
  color: rgba(15, 26, 51, 0.78);
  margin: 0 0 var(--s-4);
  max-width: 36ch;
}
.partners__cta { margin-top: var(--s-1); }
@media (max-width: 820px) {
  .partners {
    grid-template-columns: 1fr;
    align-items: start;
    padding: clamp(28px, 7vw, 48px);
  }
}

/* ----- About: timeline, commitments, value grid, offices ----- */
.commitments {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
  margin-top: var(--s-6);
  counter-reset: commitment;
}
.commitments__item {
  display: grid;
  gap: var(--s-2);
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
  counter-increment: commitment;
}
/* Zero-padded index — quiet mono ordinal above each headline. */
.commitments__item::before {
  content: counter(commitment, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--ui);
  letter-spacing: var(--track-eyebrow);
  color: rgba(15, 26, 51, 0.7);
}
.commitments__headline {
  font-family: var(--font-display);
  font-size: var(--display-s);
  line-height: 1.18;
  color: var(--deep-ink);
}
.commitments__dek {
  font-size: var(--body-m);
  line-height: 1.6;
  color: rgba(15, 26, 51, 0.78);
  margin: 0;
}
@media (max-width: 820px) {
  .commitments { grid-template-columns: 1fr; }
}

/* Vertical timeline — a single spine with a node per milestone. Each item
   draws its own connector segment down to the next (so the spine self-
   terminates at the last node); the dot sits on the spine's centre line. */
.timeline {
  list-style: none;
  margin: var(--s-6) 0 0;
  padding: 0;
  max-width: 72ch;
}
.timeline__item {
  position: relative;
  padding-left: var(--s-5);
  padding-bottom: var(--s-6);
  display: grid;
  gap: var(--s-2);
}
.timeline__item:last-child { padding-bottom: 0; }
/* Node dot */
.timeline__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--cream-ground);
  border: 2px solid var(--navy);
  z-index: 1;
}
/* Connector down to the next node (hidden on the last item) */
.timeline__item::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 20px;
  bottom: 0;
  width: 2px;
  background: var(--rule-strong);
}
.timeline__item:last-child::after { display: none; }
.timeline__year {
  font-size: var(--ui);
  letter-spacing: var(--track-eyebrow);
  color: var(--navy);
}
.timeline__title { margin: 0; }
.timeline__dek {
  font-size: var(--body-m);
  line-height: 1.55;
  color: rgba(15, 26, 51, 0.74);
  margin: 0;
  max-width: 60ch;
}
/* Single chronological column.
   This was `columns: 2`, which reads DOWN the left column and then jumps back
   to the top for the right one. The director hit exactly that in the 2026-08
   review: "paskaitau 2013, tada iki 2019, tada skrolinu i virsu ieskot 2020?"
   A history has one correct reading order, so the two-column trick is gone and
   the connector spine (.timeline__item::after, disabled in column mode because
   a segment cannot span column boxes) is back. The 2016 rebase also cut the
   list from 12 entries to 10, so the height argument for columns is weaker. */
.timeline--columns {
  max-width: 70ch;
}
@media (prefers-reduced-motion: no-preference) {
  /* Milestone entrance — a low fade + rise, 70ms staggered down the spine
     when the section scrolls into view. Base state (above) keeps items
     fully visible. The pre-reveal hidden state is scoped to `.js` (added by
     main.js) — without it, `.fade-in:not(.is-visible)` matches unconditionally
     (is-visible is JS-only) and, being higher-specificity than the plain
     visible rule, would hide every milestone permanently for no-JS/reduced-
     motion-unaware users. Same fix applied to the team-grid's pre-existing
     reveal, which had the identical latent bug. */
  .section--timeline.fade-in .timeline__item {
    transition: opacity var(--dur-fade) var(--ease), transform var(--dur-fade) var(--ease);
  }
  .js .section--timeline.fade-in:not(.is-visible) .timeline__item {
    opacity: 0;
    transform: translateY(10px);
  }
  .section--timeline.fade-in .timeline__item:nth-child(1) { transition-delay:   0ms; }
  .section--timeline.fade-in .timeline__item:nth-child(2) { transition-delay:  70ms; }
  .section--timeline.fade-in .timeline__item:nth-child(3) { transition-delay: 140ms; }
  .section--timeline.fade-in .timeline__item:nth-child(4) { transition-delay: 210ms; }
  .section--timeline.fade-in .timeline__item:nth-child(5) { transition-delay: 280ms; }
  .section--timeline.fade-in .timeline__item:nth-child(6) { transition-delay: 350ms; }
  .section--timeline.fade-in .timeline__item:nth-child(7) { transition-delay: 420ms; }
  .section--timeline.fade-in .timeline__item:nth-child(8) { transition-delay: 490ms; }
  .section--timeline.fade-in .timeline__item:nth-child(9) { transition-delay: 560ms; }
  .section--timeline.fade-in .timeline__item:nth-child(10) { transition-delay: 630ms; }
  .section--timeline.fade-in .timeline__item:nth-child(11) { transition-delay: 700ms; }
  .section--timeline.fade-in .timeline__item:nth-child(12) { transition-delay: 770ms; }
}

.value-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: var(--s-6);
}
.value-grid--six { grid-template-columns: repeat(3, 1fr); }
.value-card {
  background: var(--cream-ground);
  padding: clamp(28px, 3vw, 48px);
  display: grid;
  gap: var(--s-2);
}
.value-card__headline { margin: 0; }
.value-card__dek {
  font-size: var(--body-m);
  line-height: 1.6;
  color: rgba(15, 26, 51, 0.78);
  margin: 0;
}
/* Zero-padded mono ordinal per card, the same quiet index as the who-section
   commitments strip. Shared by the About "values" grid and the Distributors
   "why partner" six-pack; other value-grids stay unnumbered. */
.section--values .value-grid,
.section--distributors-why .value-grid { counter-reset: value-card; }
.section--values .value-card,
.section--distributors-why .value-card { counter-increment: value-card; }
.section--values .value-card::before,
.section--distributors-why .value-card::before {
  content: counter(value-card, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--ui);
  letter-spacing: var(--track-eyebrow);
  color: rgba(15, 26, 51, 0.7);
}
@media (max-width: 1024px) {
  .value-grid--six { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .value-grid, .value-grid--six { grid-template-columns: 1fr; }
}

.offices {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-6);
  margin-top: var(--s-5);
}
.offices__item { font-style: normal; }
.offices__item .body-l { margin-top: var(--s-2); }
@media (max-width: 600px) {
  .offices { grid-template-columns: 1fr; }
}

/* Factory aerial — the labs section's single photograph (or video). Fixed
   5:2 crop keeps the band shallow and consistent across breakpoints; mono
   caption reads as a plate label. */
.labs-figure { margin: var(--s-6) 0 0; }
/* The labs section is header + one wide figure; the default s-6 gap on top
   of the section rhythm reads as a hole. The stem ornament occupies the
   header's right margin, so the figure can sit closer. */
.section--labs .labs-figure { margin-top: var(--s-5); }
.labs-figure img,
.labs-figure video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 2;
  object-fit: cover;
  border: 1px solid var(--rule);
}
/* Cream under a video so the plate holds its shape while the poster loads,
   and while native controls fade in over a letterboxed first frame. */
.labs-figure video { background: var(--cream-card); }
.labs-figure figcaption {
  margin-top: var(--s-2);
  font-size: var(--ui);
  color: rgba(15, 26, 51, 0.7);
}

/* ----- Products page line blocks (full-width) ----- */
.section--lines-full { padding-block: 0; }

/* ----- Single product line ----- */
.line-hero {
  /* Typographic header — no imagery. Accent name + thesis + a thin meta line. */
  max-width: 68ch;
}
.line-hero__eyebrow {
  /* Darkened accent for AA on cream (raw orange/green fail 4.5:1). */
  color: color-mix(in oklab, var(--line-accent, var(--navy)) 55%, var(--deep-ink));
  margin: 0 0 var(--s-3);
}
.line-hero__name {
  margin: 0;
  /* Large accent heading: 65% mix clears 3:1 for every line while keeping identity. */
  color: color-mix(in oklab, var(--line-accent, var(--navy)) 65%, var(--deep-ink));
  max-width: 16ch;
}
.line-hero__thesis {
  margin: var(--s-4) 0 0;
  font-size: var(--body-l);
  line-height: var(--leading-body);
  color: var(--deep-ink);
  max-width: 48ch;
}
.line-hero__meta {
  margin: var(--s-4) 0 0;
  font-size: var(--ui);
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
  color: rgba(15, 26, 51, 0.6);
}

/* Hero panel — tints the hero into a bordered card and pairs the
   typographic header with the line's icon at large display scale
   (DIRECTION.md six-line rule 2). Panel tint/border stay at low,
   WCAG-safe alpha on non-text surfaces only; the eyebrow/name
   color-mixes above are untouched. Two columns at desktop (text left,
   icon right); one column @820 with the icon shrunk and moved above
   the text via `order` (the icon is aria-hidden, so visual reordering
   doesn't affect reading order). */
.line-hero--panel {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-6);
  background: color-mix(in srgb, var(--line-accent, var(--navy)) 6%, var(--cream-card));
  border: 1px solid color-mix(in srgb, var(--line-accent, var(--navy)) 28%, transparent);
  border-radius: var(--radius-card);
  padding: clamp(32px, 4vw, 64px) clamp(32px, 5vw, 96px);
}
.line-hero__main { min-width: 0; }
.line-hero__crumb {
  margin: 0 0 var(--s-4);
}
.line-hero__icon {
  width: clamp(120px, 14vw, 220px);
  height: clamp(120px, 14vw, 220px);
  object-fit: contain;
  justify-self: end;
}
@media (max-width: 820px) {
  .line-hero--panel {
    grid-template-columns: 1fr;
    justify-items: start;
    padding: var(--s-5);
  }
  .line-hero__icon {
    order: -1;
    width: clamp(64px, 18vw, 96px);
    height: clamp(64px, 18vw, 96px);
    margin-bottom: var(--s-2);
  }
}

/* Prev/next line nav — sibling navigation in ikar_product_lines()
   registry order, wrapping at both ends. A slim strip, not a full
   .section: the hairline top border stands in for the `.section +
   .section` divider. Dots carry the raw sibling color (non-text, so
   the one-accent-per-region rule doesn't apply); the labels stay ink,
   never the accent. */
.line-adjacent {
  border-top: 1px solid var(--rule);
}
.line-adjacent__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-5);
}
.line-adjacent__link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 44px;
  color: var(--deep-ink);
  text-decoration: none;
}
.line-adjacent__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--dot, var(--navy));
  flex-shrink: 0;
}
.line-adjacent__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.line-adjacent__text--next { align-items: flex-end; }
.line-adjacent__gloss {
  font-size: var(--body-s);
  /* 0.7 is the documented AA floor on cream — see .eyebrow. */
  color: rgba(15, 26, 51, 0.7);
}
.line-adjacent__name {
  font-size: var(--ui);
  letter-spacing: var(--track-ui);
  color: var(--deep-ink);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur-fast) var(--ease);
}
.line-adjacent__link:hover .line-adjacent__name,
.line-adjacent__link:focus-visible .line-adjacent__name {
  text-decoration-color: currentColor;
}
@media (max-width: 480px) {
  .line-adjacent__inner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-4);
  }
  .line-adjacent__link--next {
    flex-direction: row-reverse;
    justify-content: flex-end;
  }
  .line-adjacent__text--next { align-items: flex-start; }
}

/* ----- Single research article ----- */
.research-article__head {
  /* These wrappers are .container (gutter padding on each side). Fold the
     gutters into the cap so the reading column measures --measure-article,
     not measure-minus-two-gutters (cf. .container--narrow). */
  max-width: calc(var(--measure-article) + var(--gutter) * 2);
  margin-inline: auto;
}
.research-article__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
.research-article__line-mark {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
}
.research-article__title {
  max-width: 24ch;
  margin: var(--s-3) 0 var(--s-4);
}
.research-article__byline {
  color: rgba(15, 26, 51, 0.6);
}
.research-article__lead {
  margin-top: var(--s-4);
  color: rgba(15, 26, 51, 0.85);
  max-width: 56ch;
}

/* Trial passport — head strip of trial_meta label/value rows + the
   headline key result. Sits between the hero and the featured image;
   stays within the article measure like the rest of the column. */
.trial-passport {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--s-3);
  max-width: var(--measure-article);
  margin-inline: auto;
  padding-block: var(--s-3);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.trial-passport__cell {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.trial-passport__cell dt {
  font-size: var(--ui);
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  color: rgba(15, 26, 51, 0.55);
}
.trial-passport__cell dd {
  margin: 0;
  color: var(--deep-ink);
}
.trial-passport__cell--result dd {
  font-size: var(--body-l);
  font-weight: 500;
  font-feature-settings: 'tnum' 1;
}
.research-article__figure {
  margin: 0;
  padding-block: clamp(32px, 4vw, 64px);
  background: var(--cream-card);
}
.research-article__figure img {
  /* Cropped to the article's own reading measure (--measure, matching
     .research-article__body) rather than stretched to --max-content — source
     photos here are modest stock stills, not wide banner photography; uncapped
     width upscaled them 2x+ into a blurry, oversized band. object-fit: cover
     matches the .research-card__figure convention used elsewhere for
     photographic content of unknown aspect ratio. */
  display: block;
  width: 100%;
  max-width: var(--measure);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin-inline: auto;
}
.research-article__body {
  /* Same gutter-fold as __head so body text matches the head/passport width. */
  max-width: calc(var(--measure-article) + var(--gutter) * 2);
  margin-inline: auto;
}
.research-article__body .entry-content {
  font-size: var(--body-l);
  line-height: var(--leading-loose);
  color: rgba(15, 26, 51, 0.85);
}
.research-article__body .entry-content > * + * { margin-top: var(--s-4); }
/* Body headings — the_content() renders raw h2/h3 with only the global
   reset (margin:0, font-weight:400) applied, so without this they fall
   back to plain browser defaults. h2 mirrors .display-s + .serif for
   section openers ("What we measured", "Results", …); h3 stays sans,
   sized off --body-l, for lighter sub-breaks. */
.research-article__body .entry-content h2 {
  font-family: var(--font-display);
  font-size: var(--display-s);
  line-height: var(--leading-snug);
  color: var(--deep-ink);
  font-weight: 500;
  margin-top: var(--s-6);
  margin-bottom: var(--s-3);
}
.research-article__body .entry-content h3 {
  font-size: var(--body-l);
  font-weight: 500;
  margin-top: var(--s-5);
}
.research-article__body table {
  width: 100%;
  font-family: var(--font-mono);
  font-size: var(--body-s);
  border-collapse: collapse;
}
.research-article__body th,
.research-article__body td {
  border-bottom: 1px solid var(--rule);
  padding: var(--s-2) var(--s-3);
  text-align: left;
}
/* Standfirst — opens the article body (was .research-article__pullquote, a
   .display-m block dumped after the body; see single-research.php). Sized
   below the h1 deliberately: it introduces the piece, it is not the headline. */
.research-article__standfirst {
  margin: 0 0 var(--s-5);
  padding-left: var(--s-4);
  border-left: 2px solid var(--line-accent, var(--navy));
  color: var(--deep-ink);
  max-width: 52ch;
  font-style: normal;
}
.methods-note {
  background: var(--cream-card);
  border: 1px solid var(--rule);
  padding: clamp(24px, 3vw, 40px);
  max-width: 56ch;
  margin-inline: auto;
}
.methods-note .body-m {
  margin: var(--s-2) 0 0;
  font-size: var(--body-s);
  line-height: 1.6;
  color: rgba(15, 26, 51, 0.8);
}

/* Related section layout — evidence-ledger rows stacked above the
   related-line-card (not the old side-by-side .research-grid; that class
   stays reserved for the editorial-card grids elsewhere). */
.research-article__related-grid {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  margin-top: var(--s-6);
}
.related-line-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  max-width: 48ch;
  background: var(--cream-card);
  border: 1px solid var(--rule);
  padding: clamp(28px, 3vw, 40px);
  text-decoration: none;
  color: inherit;
  transition: background var(--dur-fast) var(--ease);
}
.related-line-card:hover { background: var(--cream-ground); opacity: 1; }
.related-line-card__icon { width: 64px; height: auto; }
.related-line-card__name {
  margin: var(--s-2) 0 0;
  color: var(--line-accent, var(--deep-ink));
}
.related-line-card__thesis {
  font-size: var(--body-m);
  line-height: 1.6;
  color: rgba(15, 26, 51, 0.78);
}

/* ----- Contact / Distributors form + inboxes + people ----- */
.contact-form {
  display: grid;
  gap: var(--s-3);
  max-width: var(--measure);
  margin-top: var(--s-5);
}
/* /contact/ form + rail: two columns (form | contact details), collapsing to
   one column at 820px. The rail reuses the .contact-inbox-list and
   .contact-block__address styles from partials.css. */
.contact-form-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
  margin-top: var(--s-5);
}
.contact-form-layout .contact-form {
  max-width: none;
  margin-top: 0;
}
/* The rail beside the form was removed in the 2026-08 review (item 7) — the
   address and inboxes live in the blue footer only. Without a second column
   the form would otherwise stretch to the full container measure. */
.contact-form-layout--single {
  grid-template-columns: minmax(0, 1fr);
  max-width: 62rem;
}
.contact-rail {
  display: grid;
  gap: clamp(28px, 3.2vw, 44px);
}
.contact-rail__group { display: grid; gap: var(--s-2); }
@media (max-width: 820px) {
  .contact-form-layout { grid-template-columns: 1fr; }
}
.contact-form__row { display: grid; gap: var(--s-1); }
.contact-form__row label {
  font-size: var(--ui);
  letter-spacing: var(--track-ui);
  color: rgba(15, 26, 51, 0.7);
}
.contact-form__row input,
.contact-form__row select,
.contact-form__row textarea {
  font: inherit;
  background: var(--cream-card);
  border: 1px solid var(--rule);
  padding: 12px 16px;
  /* border-radius intentionally omitted: the higher-specificity
     `.contact-form .wpcf7-form input...` mapping below always wins and sets
     var(--radius-btn) — the 2px this rule used to declare never rendered. */
  color: var(--deep-ink);
}
.contact-form__row input:focus-visible,
.contact-form__row select:focus-visible,
.contact-form__row textarea:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}
.contact-form__row--message textarea { min-height: 168px; resize: vertical; }
.contact-form__row--consent label {
  display: flex; gap: var(--s-2); align-items: flex-start;
  font-size: var(--body-s);
  color: rgba(15, 26, 51, 0.78);
}
.contact-form__hp { position: absolute; left: -10000px; }

.inboxes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: var(--s-5);
}
.inbox {
  background: var(--cream-ground);
  padding: clamp(20px, 2.5vw, 32px);
  display: grid; gap: var(--s-1);
}
.inbox__label {
  font-size: var(--ui);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: rgba(15, 26, 51, 0.6);
}
.inbox__email {
  font-size: var(--body-l);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2px;
  width: max-content;
  max-width: 100%;
}
.inbox__role {
  font-size: var(--body-s);
  color: rgba(15, 26, 51, 0.6);
}
@media (max-width: 600px) { .inboxes { grid-template-columns: 1fr; } }

/* ----- Distributors: pathways, countries ----- */
.pathways {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: var(--s-6);
}
.pathway {
  background: var(--cream-ground);
  padding: clamp(28px, 3vw, 56px);
  display: grid;
  gap: var(--s-3);
}
.pathway h3 { margin: 0; }
@media (max-width: 820px) { .pathways { grid-template-columns: 1fr; } }

.countries {
  display: grid;
  gap: var(--s-4);
  margin-top: var(--s-5);
}
/* Prose stays at a readable measure; the atlas spread runs full width. */
.countries__lede,
.countries__upcoming,
.countries__footnote { max-width: var(--measure); }

/* "Where we work" atlas — the world map beside the active-markets index, two
   columns on desktop so the map stays prominent without stacking a full
   country list beneath it (that stack was ~400px taller). One column @820. */
.countries__atlas {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: var(--s-5);
  align-items: center;
}
@media (max-width: 820px) {
  .countries__atlas { grid-template-columns: 1fr; gap: var(--s-4); }
}

/* World map — the inlined assets/world-map.svg, styled from here because the
   asset ships styleless (renders black as an <img>). Faint-ink landmasses,
   navy distribution dots, and a Lithuania origin marker whose ring inherits
   currentColor. One navy accent — the countries are not rainbowed. It fills
   its atlas column (no cap) so it scales with the layout. */
.world-map {
  width: 100%;
  margin: 0;
  color: var(--navy);
}
/* Uncapped, the inlined atlas grows with its column and drags the whole
   band tall. The svg is width:100%/height:auto, so capping the width
   shrinks the height proportionally — no distortion. */
.countries__atlas .world-map {
  max-width: 660px;
  margin-inline: auto;
}
.world-map svg { width: 100%; height: auto; display: block; }
.world-map__country { fill: rgba(15, 26, 51, 0.10); }
.world-map__dot { fill: var(--navy); }

/* Active-markets index — a small mono list in newspaper columns under a
   hairline label. Distinct question from the upcoming-markets chips below
   (ships-today vs recruiting-next). */
.countries__index-label {
  margin: 0 0 var(--s-2);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--rule);
  font-size: var(--ui);
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
  color: rgba(15, 26, 51, 0.5);
}
.countries__index {
  columns: 2;
  column-gap: var(--s-5);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--ui);
  letter-spacing: var(--track-ui);
  color: rgba(15, 26, 51, 0.7);
}
.countries__index li {
  break-inside: avoid;
  padding-block: 5px;
}
@media (max-width: 820px) { .countries__index { columns: 3; } }
@media (max-width: 600px) { .countries__index { columns: 2; } }
@media (max-width: 480px) { .countries__index { columns: 1; } }

.countries__upcoming {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
  font-size: var(--ui);
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
}
.countries__upcoming li {
  background: var(--cream-card);
  border: 1px solid var(--rule);
  padding: 6px 14px;
  border-radius: var(--radius-chip);
}
.distributors-close {
  text-align: center;
  padding-block: var(--s-3);
}

/* Distributors regional-manager directory: a denser 5-across team grid so the
   ten-person roster reads as two compact rows instead of the old ~2,500px
   stack. Desktop-only override, page-scoped via the template body class — the
   shared /contact/ grid keeps its 4-across cards and the partial is untouched.
   Below 1025px the base .people breakpoints (3 / 2 / 1) take over. */
@media (min-width: 1025px) {
  .page-template-page-distributors .section--team .people {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* ----- Legal pages (privacy / imprint) ----- */
.container--narrow {
  max-width: calc(var(--measure) + var(--gutter) * 2);
}
.legal-body { display: grid; gap: var(--s-5); }
.legal-section { display: grid; gap: var(--s-3); }
.legal-section h2 { margin: 0; }
.legal-section__body {
  font-size: var(--body-l);
  line-height: var(--leading-loose);
  color: rgba(15, 26, 51, 0.85);
}
.imprint {
  display: grid; gap: 0;
  border-top: 1px solid var(--rule);
}
.imprint__row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--rule);
}
.imprint__row dt {
  font-size: var(--ui);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: rgba(15, 26, 51, 0.6);
}
.imprint__row dd { margin: 0; font-size: var(--body-l); }
.imprint__certs { display: grid; gap: var(--s-2); margin-top: var(--s-3); }
@media (max-width: 600px) {
  .imprint__row { grid-template-columns: 1fr; gap: var(--s-1); }
}

/* ----- Research empty state ----- */
.research-empty {
  display: grid;
  gap: var(--s-3);
  max-width: 56ch;
  padding-block: var(--s-6);
}
.research-empty .display-s { color: var(--deep-ink); }

/* ----- Skip link ----- */
.visually-hidden:focus-visible {
  position: fixed;
  top: var(--s-2);
  left: var(--s-2);
  width: auto;
  height: auto;
  margin: 0;
  padding: var(--s-2) var(--s-3);
  background: var(--navy);
  color: var(--cream-ground);
  border-radius: 2px;
  clip: auto;
  z-index: 100;
}



/* ============================================================
   BLOCK B — prototype ikar-preview-v2-overrides
   (hero composition override, ornaments as inline data-URI masks,
   .ornament-clip, prominent certifications, hero-scroll motion,
   --line-physio-deep / --ease-* / --dur-* tokens, motion + stagger
   layer, cta--outline / crop-chip focus rings, text-wrap:balance.)
   ============================================================ */

/* preview v2 — hero composition override
   Asymmetric editorial spread: plant photograph in a dedicated right
   column, vertically centered against the headline. Headline spans both
   columns at higher z-index so it visually overlaps the image. The sub /
   dek / CTAs sit underneath in their own rows, full-width.
   Everything else inherits from main.css §6 unchanged. */
.hero {
  grid-template-columns: minmax(0, 1fr) clamp(360px, 42vw, 600px);
  grid-template-rows: auto auto auto auto;
  column-gap: 0;
  align-items: center;
}
.hero__type {
  grid-column: 1 / -1;
  grid-row: 1;
  z-index: 2;
  align-self: center;
}
.hero__figure {
  grid-column: 2;
  grid-row: 1;
  z-index: 1;
  align-self: center;
  justify-self: center;
  width: 100%;
  margin: 0;
  pointer-events: none; /* the photo is decorative */
}
.hero__figure img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}
.hero__sub  { grid-column: 1 / -1; grid-row: 2; }
.hero__dek  { grid-column: 1 / -1; grid-row: 3; }
.hero__ctas { grid-column: 1 / -1; grid-row: 4; }

/* Mobile / narrow viewports — fall back to the stacked composition so
   the plant doesn't crowd the headline. */
@media (max-width: 820px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero__type, .hero__figure, .hero__sub, .hero__dek, .hero__ctas {
    grid-column: 1;
    grid-row: auto;
  }
  .hero__figure {
    width: 70%;
    max-width: 480px;
    margin: 0 auto;
    pointer-events: auto;
  }
}

/* preview v2 — hero stats scattered around the plant + scroll motion.
   Per client: percentage tiles float as annotations around the plant
   figure (not a structured strip below the dek), each drifting at a
   different rate so the constellation feels alive on scroll. Plant gets
   a stronger parallax. transform/opacity only, GPU-accelerated,
   prefers-reduced-motion respected. JS sets --scroll-y in px. */
.hero__figure { position: relative; overflow: visible; }
.hero__figure img { will-change: transform;
                    transform: translate3d(0, calc(var(--scroll-y, 0px) * -0.10), 0); }

.hero__stats--scatter {
  position: absolute;
  inset: 0;
  margin: 0; padding: 0; border: 0;
  pointer-events: none;
  z-index: 3;          /* above the headline (z=2) so stats stay legible
                          if they extend left into the headline column */
}
.hero__stats--scatter .hero__stat {
  position: absolute;
  background: var(--cream-card);
  border: 1px solid var(--rule);
  padding: 12px 16px;
  display: grid;
  gap: 4px;
  white-space: nowrap;
  pointer-events: auto;
  will-change: transform;
  box-shadow: 0 8px 24px -16px rgba(15, 26, 51, 0.18);
}
.hero__stats--scatter .hero__stat-num {
  margin: 0;
  font-size: 1.125rem;
  color: var(--line-physio);
  font-weight: 500;
  line-height: 1.1;
}
.hero__stats--scatter .hero__stat-label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  color: rgba(15, 26, 51, 0.6);
}

/* Scatter positions — one stat upper-left of plant (cream space above
   leaves), one mid-right (extends into the page gutter), one bottom-
   center (below the root system). Mirrors the red-circle reference. */
.hero__stats--scatter .hero__stat[data-drift="1"] {
  top: 4%; left: -10%;
  transform: translate3d(0, calc(var(--scroll-y, 0px) * -0.04), 0);
}
.hero__stats--scatter .hero__stat[data-drift="2"] {
  top: 50%; right: -14%;
  transform: translate3d(0, calc(var(--scroll-y, 0px) * -0.08), 0);
}
.hero__stats--scatter .hero__stat[data-drift="3"] {
  bottom: 6%; left: 22%;
  transform: translate3d(0, calc(var(--scroll-y, 0px) * -0.14), 0);
}

@media (prefers-reduced-motion: reduce) {
  .hero__figure img,
  .hero__stats--scatter .hero__stat { transform: none !important; }
}

/* Mobile / narrow — collapse the scatter into a clean vertical strip
   below the plant. No floating, no overlap, no scroll motion needed
   beyond the page scroll. */
@media (max-width: 820px) {
  .hero__stats--scatter {
    position: static;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-2);
    margin-top: var(--s-3);
    pointer-events: auto;
  }
  .hero__stats--scatter .hero__stat {
    position: static;
    transform: none;
  }
}

/* preview v2 — prominent certifications (homepage trust seal) */
.section--certs--prominent .certs__eyebrow { margin-bottom: var(--s-7); }
.section--certs--prominent .cert-strip {
  gap: clamp(16px, 1.8vw, 24px);
  padding: 0;
  border: 0;
}
.section--certs--prominent .cert-strip__item {
  width: 100%;
  min-height: clamp(128px, 14vw, 176px);
  padding: clamp(24px, 3vw, 40px);
  background: var(--cream-card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  transition: border-color var(--dur-state) var(--ease-smooth),
              box-shadow var(--dur-state) var(--ease-smooth);
}
.section--certs--prominent .cert-strip__item:hover,
.section--certs--prominent .cert-strip__item:focus-within {
  border-color: var(--rule-strong);
  box-shadow: 0 16px 36px -24px rgba(15, 26, 51, 0.20);
}
.section--certs--prominent .cert-strip__item img {
  height: clamp(56px, 7vw, 84px);
  filter: none;
  opacity: 0.92;
}
.section--certs--prominent .cert-strip__item:hover img,
.section--certs--prominent .cert-strip__item:focus-within img {
  opacity: 1;
}
@media (max-width: 820px) {
  .section--certs--prominent .cert-strip__item img { height: 64px; }
}
@media (max-width: 480px) {
  .section--certs--prominent .cert-strip__item { min-height: 112px; padding: var(--s-4); }
  .section--certs--prominent .cert-strip__item img { height: 52px; }
}

/* ============================================================
   Polish & micro-interaction layer (post-review iteration)
   - Contrast: deeper Physio green on stat numerics (2.7→5:1)
   - Touch targets: ≥44pt on links / CTAs / mobile burger
   - Typography: stat label readable on mobile
   - Hierarchy: section dividers visible (--rule-strong)
   - Mobile: plant photo stays in-gutter
   - Footer: founder role label meets WCAG-AA
   - Hero stat tiles: --rule-strong border for chip definition
   ============================================================ */

:root {
  --line-physio-deep: #3F7A22;
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  /* Material standard curve — natural deceleration, no initial pop.
     Use for hover/press/focus state transitions where the existing
     --ease (0.22, 0.61, 0.36, 1) feels snappy. */
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-state: 240ms;
  --dur-press: 120ms;
}

/* Contrast: deepen Physio green for stat numerics */
.hero__stats--scatter .hero__stat-num { color: var(--line-physio-deep); }

/* Touch targets ≥44pt */
.cta--primary,
.cta--secondary,
.link-arrow {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}
.site-nav__list a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding-block: 8px;
}
.site-nav__toggle {
  min-width: 48px;
  min-height: 48px;
}

/* Stat label readable on mobile, stronger color */
.hero__stats--scatter .hero__stat-label {
  font-size: 0.8125rem;
  color: rgba(15, 26, 51, 0.72);
}
@media (max-width: 480px) {
  .hero__stats--scatter .hero__stat-label { font-size: 0.875rem; }
}

/* Section dividers — visible rhythm cue */
.section + .section { border-top-color: var(--rule-strong); }

/* Plant figure clamp on narrow viewports */
@media (max-width: 820px) {
  .hero__figure {
    width: min(70%, calc(100vw - var(--gutter) * 2));
  }
}

/* Founder role label contrast 4.49→5.4:1 */
.founder-quote__role { color: rgba(239, 237, 230, 0.72); }

/* Hero stat tile borders — visible chip definition */
.hero__stats--scatter .hero__stat { border-color: var(--rule-strong); }

/* ============================================================
   Motion layer — purposeful transitions per `animate` skill.
   Editorial restraint: hover lifts ≤2px, transitions 150–300ms,
   ease-out-quint for entrances. Reduced-motion strips everything.
   ============================================================ */

/* Card hover lift — line cards.
   240ms / ease-smooth chosen over 150ms / --ease so the lift settles
   in instead of snapping. 3px gives the lift presence without scaling. */
.line-card {
  transition: background var(--dur-state) var(--ease-smooth),
              transform var(--dur-state) var(--ease-smooth),
              box-shadow var(--dur-state) var(--ease-smooth),
              border-color var(--dur-state) var(--ease-smooth);
}
.line-card:hover,
.line-card:focus-within {
  transform: translate3d(0, -3px, 0);
  box-shadow: 0 16px 36px -20px rgba(15, 26, 51, 0.20);
  border-color: var(--rule-strong);
}

/* CTA press + focus-visible — 120ms gives crisp acknowledgement
   without feeling abrupt. */
.cta--primary,
.cta--secondary,
.link-arrow {
  transition: color var(--dur-state) var(--ease-smooth),
              opacity var(--dur-state) var(--ease-smooth),
              transform var(--dur-press) var(--ease-smooth);
}
.cta--primary:active,
.cta--secondary:active,
.link-arrow:active {
  transform: translateY(1px);
}
.cta--primary:focus-visible,
.cta--secondary:focus-visible,
.link-arrow:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Rounded controls get a focus ring whose corners match the 12px button radius */
.cta--outline:focus-visible,
.crop-chip:focus-visible,
.field-card__loc:focus-visible,
.site-header__actions .cta--primary:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
  border-radius: var(--radius-btn);
}
/* Display headings balance their line breaks at every width */
.fhero__title,
.partners__headline,
.founder-quote { text-wrap: balance; }

/* Cert logo subtle lift in the prominent strip */
.section--certs--prominent .cert-strip__item img {
  transition: transform 280ms var(--ease-out-quint),
              filter var(--dur-state) var(--ease-smooth),
              opacity var(--dur-state) var(--ease-smooth);
}
/* tile owns the hover lift now; logo no longer translates */

/* Hero stat tile shadow on hover (transform owned by scroll motion).
   280ms shadow + smooth border so the tile lift reads as one gesture. */
.hero__stats--scatter .hero__stat {
  transition: box-shadow 280ms var(--ease-smooth),
              border-color var(--dur-state) var(--ease-smooth);
}
.hero__stats--scatter .hero__stat:hover,
.hero__stats--scatter .hero__stat:focus-within {
  box-shadow: 0 18px 44px -20px rgba(15, 26, 51, 0.28);
  border-color: rgba(15, 26, 51, 0.36);
}

/* Scroll-entry stagger — uses @keyframes so it doesn't compete with
   .line-card transition shorthands (which own hover).
   Items default visible; .stagger-item is added by JS at runtime, so
   no-JS users always see content. */
@keyframes ikar-stagger-in {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
  to   { opacity: 1; transform: none; }
}
.stagger-item { opacity: 0; will-change: transform, opacity; }
.stagger-item.is-in {
  animation: ikar-stagger-in 720ms var(--ease-out-quint) both;
  animation-delay: calc(min(var(--stagger-index, 0), 6) * 80ms);
}

/* Reduced motion — strip all hover/press/stagger transforms */
@media (prefers-reduced-motion: reduce) {
  .line-card,
  .cta--primary,
  .cta--secondary,
  .link-arrow,
  .hero__stats--scatter .hero__stat,
  .section--certs--prominent .cert-strip__item img {
    transform: none !important;
  }
  .stagger-item,
  .stagger-item.is-in {
    opacity: 1 !important;
    animation: none !important;
  }
}

/* ============================================================
   V3 ADDITIONS — Origin section, brand ornaments, hero motion
   Appended for the v3 homepage variant. Anything below this
   marker is new to v3; v2 (the unchanged baseline) does not
   carry these rules.
   ============================================================ */

/* ----- Brand ornaments (wing, tree, wheat, section-bar) ----- */
.section-bar {
  position: absolute;
  top: 0;
  left: var(--gutter);
  width: 96px;
  height: 2px;
  background: var(--section-accent, var(--navy));
  pointer-events: none;
}
.section--lines    { --section-accent: var(--navy); }
.section--partners { --section-accent: var(--navy); }
.section--team     { --section-accent: var(--navy); }
.section--form     { --section-accent: var(--navy); }

.ornament {
  position: absolute;
  pointer-events: none;
  display: block;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: center;
          mask-position: center;
}
/* ----- Brand artwork masks -----
   Built by bin/build-brand-ornaments.sh from the client artwork in
   discovery/brand-assets/ (the 7500x12000 sources stay out of the theme).
   Only the alpha channel is used: .ornament paints the silhouette with
   `background-color: currentColor`, so every ornament recolours per host
   section — navy on cream, cream on the navy bands.

   Facing is load-bearing. Right-anchored placements take LEFT-facing art
   so the canopy sweeps into the content rather than off the page:
     --tree-cherry, --tree-rasp-l   face left   -> anchor right
     --tree-rasp-r                  faces right -> anchor left
     --field-l / --field-r          wheat fields, tallest ears left / right
     --stems, --stem-wheat          thin-line verticals; always repainted
                                    navy, since their source green/orange
                                    would break one-accent-per-region

   Filenames carry -v1 because mask URLs sit inside this stylesheet and so
   bypass ikar_asset_version()'s filemtime cache-busting. On re-export bump
   the suffix here and in the build script together. */
.ornament--tree-cherry {
  aspect-ratio: 813 / 1200;
  color: var(--navy);
  -webkit-mask-image: url("../ornaments/tree-cherry-v1.png");
          mask-image: url("../ornaments/tree-cherry-v1.png");
}
.ornament--tree-rasp-l {
  aspect-ratio: 734 / 1200;
  color: var(--navy);
  -webkit-mask-image: url("../ornaments/tree-rasp-left-v1.png");
          mask-image: url("../ornaments/tree-rasp-left-v1.png");
}
/* Registered for future left-anchored placements. An unreferenced mask is
   never fetched, so it costs nothing until a section opts in. */
.ornament--tree-rasp-r {
  aspect-ratio: 661 / 1200;
  color: var(--navy);
  -webkit-mask-image: url("../ornaments/tree-rasp-right-v1.png");
          mask-image: url("../ornaments/tree-rasp-right-v1.png");
}
.ornament--field-l {
  aspect-ratio: 871 / 1200;
  color: var(--wheat-silver);
  -webkit-mask-image: url("../ornaments/wheat-field-left-v1.png");
          mask-image: url("../ornaments/wheat-field-left-v1.png");
}
.ornament--field-r {
  aspect-ratio: 855 / 1200;
  color: var(--wheat-silver);
  -webkit-mask-image: url("../ornaments/wheat-field-right-v1.png");
          mask-image: url("../ornaments/wheat-field-right-v1.png");
}
.ornament--stems {
  aspect-ratio: 508 / 1200;
  color: var(--navy);
  -webkit-mask-image: url("../ornaments/stems-thin-v1.png");
          mask-image: url("../ornaments/stems-thin-v1.png");
}
.ornament--stem-wheat {
  aspect-ratio: 442 / 1200;
  color: var(--navy);
  -webkit-mask-image: url("../ornaments/stem-wheat-thin-v1.png");
          mask-image: url("../ornaments/stem-wheat-thin-v1.png");
}

/* Footer needs containment so the tree ornaments anchor inside */
.site-footer { position: relative; overflow: hidden; overflow: clip; }

/* ----- Host-section containment ----- */
/* Ensure every section that hosts an ornament clips it. .section already has position:relative. */
.section--hero,
.section--lines,
.section--proof,
.section--partners,
.section--certs { overflow: hidden; overflow: clip; }

/* Lines — wheat field along the bottom-right, standing on the section rule.
   The section itself does NOT clip (so the hover thesis panel can overflow
   downward as a pop-over); the field is clipped by its own inset wrapper. */
.section--lines { overflow: visible; }
.section--lines .ornament-clip {
  position: absolute;
  inset: 0;
  overflow: hidden; overflow: clip;
  pointer-events: none;
  z-index: 0;
}
.section--lines .container { position: relative; z-index: 1; }
.section--lines .ornament--field-r {
  right: -1%; bottom: 0;
  width: clamp(240px, 28vw, 440px);
  opacity: 0.55;
  z-index: 0;
  transform: translateY(6%);
}

/* Proof — raspberry tree on the navy band. The band is a short stat strip,
   so the ornament is anchored by its TOP: the canopy fills the strip and
   the trunk falls away below the clip. (Bottom-anchoring would show only
   the bare trunk.) Cream at a whisper so the stats keep their contrast —
   this is the quietest ornament on the site. */
.section--proof .ornament--tree-rasp-l {
  top: 0; bottom: auto;
  right: -1%;
  width: clamp(240px, 26vw, 400px);
  color: var(--cream-on-navy);
  opacity: 0.09;
  z-index: 0;
  transform: translateY(-6%);
}
.section--proof .container { position: relative; z-index: 1; }

/* Partners — cherry tree as a corner watermark beside the partner card */
.section--partners .ornament--tree-cherry {
  right: 0; bottom: 0;
  width: clamp(240px, 26vw, 420px);
  opacity: 0.12;
  z-index: 0;
  transform: translate(6%, 4%);
}

/* Certs — wheat field planted on the bottom edge of the section, tallest
   ears at the left gutter. Stalk bases sit exactly on the bottom rule and
   the heads point up into the section; no rotation, so they read as
   "standing up". */
.section--certs .ornament--field-l {
  right: auto;
  left: var(--gutter);
  top: auto;
  bottom: 0;
  width: clamp(200px, 22vw, 360px);
  opacity: 0.55;
  transform: translateY(4%);
}

/* Footer tree — single anchor on the right of the navy band */
.site-footer .ornament--tree-rasp-l {
  top: 4%; right: 1%;
  width: clamp(200px, 18vw, 320px);
  color: var(--cream-on-navy);
  opacity: 0.10;
  transform: none;
}

/* ----- Interior-page ornaments -----
   One quiet edge accent per interior page, reusing the homepage masks at
   low opacity. Each host section clips its own ornament and lifts its
   content above it (z-index) so nothing overlaps text or triggers
   horizontal scroll. Navy on cream, mirroring the homepage chrome. */

/* About — thin-line wheat stem standing in the right margin of the
   Factory & labs header, filling the void beside the short lede.
   Line art needs more opacity than a solid silhouette to register. */
.section--labs { overflow: hidden; overflow: clip; }
.section--labs .ornament--stem-wheat {
  top: 2%; bottom: auto; right: 2%; left: auto;
  width: clamp(80px, 8vw, 130px);
  opacity: 0.30;
  color: var(--navy);
  z-index: 0;
  transform: none;
}
.section--labs .container { position: relative; z-index: 1; }

/* Distributors — raspberry tree as a corner watermark on the closing
   signoff, echoing the homepage "become a partner" region. Sized against
   the tightened (section--tight) padding, not the full 128px rhythm. */
.section--distributors-close { overflow: hidden; overflow: clip; }
.section--distributors-close .ornament--tree-rasp-l {
  right: 0; bottom: 0;
  width: clamp(170px, 18vw, 280px);
  opacity: 0.10;
  color: var(--navy);
  z-index: 0;
  transform: translate(8%, 22%);
}
.section--distributors-close .container { position: relative; z-index: 1; }

/* Science archive — thin-line stems planted on the hero's bottom edge,
   standing in the gap the two-column .section-header opens up between a
   short title and its lede. Reusable pattern for any short-title header:
   absolute --stems, left ~55%, bottom 0, opacity <= 0.16. */
.section--research-hero { overflow: hidden; overflow: clip; }
.section--research-hero .ornament--stems {
  left: 56%; right: auto;
  bottom: 0;
  width: clamp(110px, 11vw, 170px);
  opacity: 0.16;
  color: var(--navy);
  z-index: 0;
  transform: none;
}
.section--research-hero .container { position: relative; z-index: 1; }

/* At <=820px the section headers stack into a single full-width column
   (see the .section-header 1fr rule), leaving no clear side margin for
   these edge ornaments — they would fall behind body text. Drop them there;
   the section-bar signature still renders at every width. */
@media (max-width: 820px) {
  .section--labs .ornament--stem-wheat,
  .section--distributors-close .ornament--tree-rasp-l,
  .section--research-hero .ornament--stems { display: none; }
}

/* The wheat fields are wide by nature — at phone widths they would run
   the whole viewport and read as noise rather than ground. */
@media (max-width: 600px) {
  .section--lines .ornament--field-r,
  .section--certs .ornament--field-l {
    width: clamp(160px, 40vw, 220px);
    opacity: 0.45;
  }
}

/* ----- Site watermark (partials/site-watermark.php) -----
   The Icarus figure as an underpainting behind the page. FIXED to the
   viewport (client decision 2026-07-20: "scroll with view") — the figure
   holds its place while content slides over it, showing through in the
   cream stretches and disappearing behind opaque grounds (navy proof
   band, partners card, footer) without any per-section handling.
   z-index:-1 paints it above the body's cream canvas but under every
   section. Static — nothing animates, so reduced-motion needs nothing.

   The wrapper clips its own right-hand bleed: widening the body's
   overflow would break the sticky header, so containment lives here. */
.site-watermark {
  position: fixed;
  inset: 0;
  overflow: hidden; overflow: clip;
  pointer-events: none;
  z-index: -1;
}
.site-watermark::before {
  content: "";
  position: absolute;
  /* Sized against the VIEWPORT so the whole figure stays in frame while
     it tracks the view — at full-bleed the wing crosshatch reads as
     abstract streaks instead of the Icarus mark. Kept to the right half,
     clear of left-aligned headings. */
  top: 50%;
  right: -4vw;
  height: min(86vh, 1200px);
  aspect-ratio: 1123 / 1600;
  transform: translateY(-50%);
  background-color: var(--watermark-blue);
  opacity: 0.10;
  -webkit-mask-image: url("../ornaments/icarus-watermark-v1.png");
          mask-image: url("../ornaments/icarus-watermark-v1.png");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: top right;
          mask-position: top right;
}
/* Phones: same treatment, gentler footprint — a near-full-height figure
   behind a single text column reads as noise rather than ground. */
@media (max-width: 600px) {
  .site-watermark::before { height: min(60vh, 700px); }
}

/* Decoration is screen-only — it wastes ink and muddies text in print. */
@media print {
  .ornament,
  .ornament-clip,
  .site-watermark { display: none; }
}

/* ----- Hero motion — layered "soil-to-leaves" system -----
   Composes with the existing scroll parallax on the img
   (translate3d via --scroll-y) by wrapping the img in
   .hero__img-anim and animating the wrapper, not the img.
   z-stack:
     z1  glow + stem-light (soft cues, behind plant)
     z2  img wrapper (breathes) + leaves + soil (textural)
     z3  hero__stats--scatter (existing — must remain readable) */

.hero__figure { position: relative; overflow: visible; }

.hero__img-anim {
  display: block;
  position: relative;
  z-index: 2;
  width: 100%;
  margin-inline: auto;
  max-width: clamp(360px, 44vw, 520px);
  aspect-ratio: 1024 / 1536;
  animation: hero-breathe 7s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
  transform-origin: 50% 70%;
  will-change: transform;
}
.hero__img-anim img {
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

@keyframes hero-breathe {
  0%, 100% { transform: translateY(0)    scale(1);     }
  50%      { transform: translateY(-4px) scale(1.006); }
}

.hero__glow {
  position: absolute; left: 50%; bottom: 6%;
  width: 38%; aspect-ratio: 3 / 1;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center,
    color-mix(in oklab, var(--line-physio) 65%, white) 0%,
    transparent 70%);
  filter: blur(28px);
  animation: hero-glow-pulse 7s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes hero-glow-pulse {
  0%, 100% { opacity: 0.30; transform: translateX(-50%) scale(1);    }
  50%      { opacity: 0.55; transform: translateX(-50%) scale(1.08); }
}

.hero__stem-light {
  position: absolute; left: 50%; top: 38%;
  width: 6%; height: 30%;
  transform: translateX(-50%);
  background: linear-gradient(to bottom,
    transparent 0%,
    color-mix(in oklab, var(--cream-card) 80%, white) 50%,
    transparent 100%);
  filter: blur(6px);
  mix-blend-mode: soft-light;
  animation: hero-stem-light 7s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes hero-stem-light {
  0%, 100% { opacity: 0; }
  40%, 60% { opacity: 0.24; }
}

.hero__leaves {
  position: absolute; inset: 4% 6% auto auto;
  width: 56%; height: 48%;
  pointer-events: none;
  color: var(--line-physio);
  z-index: 2;
}
.hero__leaf {
  fill: currentColor;
  opacity: 0.32;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes hero-leaf-drift-a {
  0%, 100% { transform: translate(0, 0)       rotate(0deg);  opacity: 0.32; }
  50%      { transform: translate(2px, -3px)  rotate(3deg);  opacity: 0.42; }
}
@keyframes hero-leaf-drift-b {
  0%, 100% { transform: translate(0, 0)        rotate(0deg);  opacity: 0.28; }
  50%      { transform: translate(-2px, -4px)  rotate(-3deg); opacity: 0.38; }
}
.hero__leaf--1 { animation: hero-leaf-drift-a 11s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite; }
.hero__leaf--2 { animation: hero-leaf-drift-b 13s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite; animation-delay: -2s; }
.hero__leaf--3 { animation: hero-leaf-drift-a 12s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite; animation-delay: -5s; }
.hero__leaf--4 { animation: hero-leaf-drift-b 14s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite; animation-delay: -8s; }

.hero__soil {
  position: absolute; left: 12%; right: 12%; bottom: 4%;
  height: 8%;
  pointer-events: none;
  color: #5C4033;   /* dark loam — NOT moss (per client) */
  z-index: 2;
}
.hero__grain {
  fill: currentColor;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes hero-grain {
  0%, 100% { opacity: 0.20; transform: translateY(0); }
  50%      { opacity: 0.42; transform: translateY(-1px); }
}
.hero__grain--1 { animation: hero-grain  9s ease-in-out infinite; }
.hero__grain--2 { animation: hero-grain 10s ease-in-out infinite; animation-delay: -1s; }
.hero__grain--3 { animation: hero-grain  8s ease-in-out infinite; animation-delay: -3s; }
.hero__grain--4 { animation: hero-grain 11s ease-in-out infinite; animation-delay: -5s; }
.hero__grain--5 { animation: hero-grain  9s ease-in-out infinite; animation-delay: -2s; }
.hero__grain--6 { animation: hero-grain 12s ease-in-out infinite; animation-delay: -6s; }

@media (prefers-reduced-motion: reduce) {
  .hero__img-anim,
  .hero__glow,
  .hero__stem-light,
  .hero__leaf,
  .hero__grain { animation: none; }
  .hero__glow       { opacity: 0.35; }
  .hero__stem-light { opacity: 0.12; }
  .hero__leaf       { opacity: 0.30; }
  .hero__grain      { opacity: 0.28; }
}

/* =================================================================
   Phase 4 — Animate pass
   - section-bar draws in
   - ornaments fade in (preserving per-variant opacity)
   - proof-strip stats settle into place
   - primary CTA hover shadow
   ================================================================= */
@media (prefers-reduced-motion: no-preference) {
  /* Section-bar draws from left when the parent enters the viewport */
  .fade-in .section-bar {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1.6s cubic-bezier(0.22, 0.61, 0.36, 1) 200ms;
  }
  .fade-in.is-visible .section-bar { transform: scaleX(1); }

  /* Ornaments are visible from page load; only animate transform changes (e.g. hover). */
  .ornament { transition: opacity 900ms cubic-bezier(0.22, 0.61, 0.36, 1); }

  /* Proof-strip stat numbers: ink settling into the page */
  .section--proof.fade-in .stat__num {
    transition: opacity 600ms var(--ease) 300ms, letter-spacing 600ms var(--ease) 300ms;
  }
  /* Scoped to `.js` for the same reason as the timeline and team reveals
     above: `.is-visible` is JS-only, so without the scope this rule matches
     unconditionally and hides every proof figure permanently for no-JS users. */
  .js .section--proof.fade-in:not(.is-visible) .stat__num {
    opacity: 0;
    letter-spacing: 0.04em;
  }

  /* Primary CTA gains weight on hover (no transform, no scale) */
  .cta--primary {
    transition: background-color var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease),
                opacity var(--dur-fast) var(--ease),
                box-shadow 220ms var(--ease);
  }
  .cta--primary:hover { box-shadow: 0 6px 16px rgba(15, 26, 51, 0.12); }

  /* ===== Motion pass 2 — focused micro-interactions ===== */

  /* 1. Universal link-arrow nudge — the "→" travels 4px to the right
     on hover. Single rule, applies to every .link-arrow and hero CTA. */
  .link-arrow [aria-hidden],
  .cta--secondary [aria-hidden] {
    display: inline-block;
    transition: transform 220ms var(--ease-out-quint, cubic-bezier(0.22, 1, 0.36, 1));
    will-change: transform;
  }
  .link-arrow:hover [aria-hidden],
  .link-arrow:focus-visible [aria-hidden],
  .cta--secondary:hover [aria-hidden],
  .cta--secondary:focus-visible [aria-hidden] {
    transform: translateX(4px);
  }

  /* 2. Product-line card hover — the accent "→" fades in and travels a few
     px to the right, echoing the universal link-arrow nudge. Motion only;
     the fade itself lives in the component and survives reduced-motion. */
  .line-card__more {
    transform: translateX(-4px);
    transition: opacity var(--dur-fast) var(--ease),
                transform 220ms var(--ease-out-quint, cubic-bezier(0.22, 1, 0.36, 1));
  }
  .line-card:hover .line-card__more,
  .line-card:focus-within .line-card__more { transform: none; }

  /* 5. Cert logo invitational hover — full-colour logos sit at 0.78
     opacity, lift to 1.0 on hover. Subtle invitation to look closer. */
  .cert-strip__item img {
    opacity: 0.78;
    transition: opacity 220ms var(--ease-out-quint, cubic-bezier(0.22, 1, 0.36, 1));
  }
  .cert-strip__item:hover img,
  .cert-strip__item:focus-within img { opacity: 1; }
}


/* ============================================================
   BLOCK C — prototype ikar-v4-css
   (mockup-faithful field-hero, "In the field now" BBCH widget,
   fstat strip, hero callouts, catalog-modal + catalog-form.
   One scoped glass treatment — the hero molecule bubbles — is
   the single sanctioned glassmorphism exception per CLAUDE.md.)
   ============================================================ */

/* ============================================================
   IKAR v4 — mockup-faithful hero + "In the field now" widget.
   Appended block; reuses the v3 token system (cream ground,
   navy chrome, six product-line colours). One scoped glass
   treatment (the hero molecule bubbles) is sanctioned for v4.
   ============================================================ */
.site-header__actions .cta--primary { display:inline-flex; align-items:center; gap:7px; }
.cta__dl, .cta__lead { display:block; }

/* hero shell
   2026-08 client review, item 19. Three changes work together so that the
   product-lines section clears the fold at 1440x900:
     1. the "stage" column (plant illustration) is gone — two columns now;
     2. the BBCH card is materially wider, so its four crop chips sit on one
        row instead of wrapping to two;
     3. `align-items:start` everywhere. It used to be `center` at >=1080, which
        meant that when the BBCH card grew or shrank on a crop switch the whole
        row re-centred and the hero text visibly jumped. The client asked for a
        fixed top with any slack at the bottom — this is half of that fix, the
        other half is the min-height on .field-card__families below. */
.section--fieldhero { overflow: visible; }
.fhero { display:grid; grid-template-columns:1fr; grid-template-areas:"text" "card" "stats"; gap:clamp(28px,4vw,44px); align-items:start; }
.fhero__text  { grid-area:text; }
.field-card   { grid-area:card; }
.fhero__stats { grid-area:stats; }
@media (min-width:760px) {
  .fhero { grid-template-columns:minmax(0,1fr) clamp(330px,42%,430px);
    grid-template-areas:"text card" "stats stats";
    column-gap:clamp(28px,4vw,56px); row-gap:clamp(24px,3vw,40px); }
}
@media (min-width:1080px) {
  /* Stats move INTO the left column, under the text, rather than spanning
     full width below both. The BBCH card is much taller than the copy, so the
     text column had ~220px of dead space beside it; filling that with the
     stat strip removes a whole grid row and is most of what gets the product
     lines above the fold. The card spans both rows. */
  .fhero { grid-template-columns:minmax(0,1fr) clamp(400px,34vw,480px);
    grid-template-areas:"text card" "stats card";
    grid-template-rows:auto 1fr;
    column-gap:clamp(32px,4vw,64px); row-gap:clamp(16px,1.8vw,24px);
    align-items:start; }
  .fhero__stats { align-self:end; }
}

/* hero text — no longer capped at 31rem; with the illustration column gone the
   copy and CTAs spread horizontally, as the client marked up. */
.fhero__text { align-self:start; max-width:46rem; }
.fhero__eyebrow { color:var(--navy); margin:0 0 var(--s-2); }
/* Jost now IS --font-display (see §1 Tokens), so this no longer overrides the
   family — the hero title just carries a heavier weight than the display scale. */
.fhero__title { margin:0; color:var(--navy); font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.9rem,2.9vw,2.65rem); line-height:1.06; letter-spacing:-0.018em; }
.fhero__sub { margin:var(--s-2) 0 0; max-width:52ch; font-size:var(--body-l);
  line-height:var(--leading-body); color:rgba(15,26,51,0.74); }
.fhero__ctas { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2) var(--s-3); margin-top:var(--s-3); }
.fhero__ctas .cta--large { padding:var(--s-3) var(--s-4); }
.cta--outline { background:transparent; color:var(--navy); padding:var(--s-2) var(--s-4);
  border-radius:var(--radius-btn); border:1px solid var(--navy); }
.cta--outline:hover { border-color:var(--navy); background:color-mix(in srgb, var(--navy) 5%, transparent); color:var(--navy); opacity:1; }

/* stage: plant + bubbles + callouts — REMOVED (2026-08 client review, item 19)
   .fhero__stage / .fhero__plant / .fhero__callouts / .callout* all went with
   the hero illustration. This was also the single sanctioned glassmorphism
   exception in the design contract; with the artwork gone the site now has
   no glass treatment at all. assets/hero-plant-molecule.png is unreferenced. */

/* field card (BBCH widget) */
.field-card { align-self:start; background:var(--cream-card); border:1px solid var(--rule);
  border-radius:var(--radius-card); padding:clamp(13px,1.1vw,16px);
  box-shadow:0 20px 50px -26px rgba(15,26,51,0.30), 0 1px 0 rgba(15,26,51,0.04);
  display:flex; flex-direction:column; gap:var(--s-2); }
.field-card__head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.field-card__eyebrow { margin:0; font-size:var(--ui); letter-spacing:var(--track-eyebrow);
  text-transform:uppercase; color:var(--navy); }
.field-card__live { display:inline-block; margin-left:7px; font-family:var(--font-body); font-size:0.56rem;
  font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--cream-ground);
  background:var(--line-physio); padding:2px 7px; border-radius:var(--radius-btn); vertical-align:middle; }
.field-card__live[hidden] { display:none; }
.field-card__loc { display:inline-flex; align-items:center; gap:5px; font-family:var(--font-body);
  font-size:0.7rem; letter-spacing:0.02em; color:var(--navy); border:1px solid var(--rule);
  border-radius:var(--radius-btn); padding:7px 11px; min-height:34px; background:transparent;
  transition:background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); }
.field-card__loc:hover { background:color-mix(in srgb, var(--navy) 6%, transparent); border-color:var(--rule-strong); }
.field-card__loc[aria-busy="true"] { opacity:.6; cursor:progress; }
.field-card__loc-icon { flex:none; }
.field-card__loc-label { white-space:nowrap; }
.field-card__crops { display:flex; flex-wrap:wrap; gap:8px; }
.crop-chip { font-family:var(--font-body); font-size:0.7rem; letter-spacing:0.01em; padding:8px 12px; min-height:36px; display:inline-flex; align-items:center;
  border-radius:var(--radius-chip); border:1px solid var(--rule); color:rgba(15,26,51,0.66); background:transparent;
  transition:background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.crop-chip:hover { border-color:var(--rule-strong); color:var(--deep-ink); }
.crop-chip.is-active { background:var(--navy); border-color:var(--navy); color:var(--cream-ground); }
.field-card__msg { margin:0; font-size:0.72rem; line-height:1.4; color:var(--line-intense); }
.field-card__body { border-top:1px solid var(--rule); padding-top:10px; }
.field-card__period { margin:0; font-family:var(--font-display);
  font-size:clamp(1.15rem,1.4vw,1.4rem); line-height:1.15; color:var(--deep-ink); }
.field-card__region { color:rgba(15,26,51,0.66); }
.field-card__stage-label { margin:9px 0 2px; font-size:var(--body-s); color:rgba(15,26,51,0.66); }
.field-card__bbch { margin:0; font-size:1.15rem; font-weight:500; color:var(--navy); letter-spacing:0; }
.field-card__stage { margin:3px 0 0; font-family:var(--font-display); font-size:1.05rem; color:var(--deep-ink); }
.field-card__note { margin:5px 0 0; font-size:var(--body-s); line-height:1.45; color:rgba(15,26,51,0.62); }
.field-card__families-label { margin:9px 0 4px; font-size:var(--ui);
  letter-spacing:var(--track-eyebrow); text-transform:uppercase; color:rgba(15,26,51,0.66); }
/* Two columns, and a reserved height for the tallest list the widget can ever
   render (6 rows — the `ALL` family set in bbch-field-card.js, so 3 grid rows).
   Two things are going on:
     - Reserving the height stops the card growing and shrinking on every crop
       switch, which used to move the card's top edge and re-lay-out the hero
       beside it. The client was explicit: top stays put, slack at the BOTTOM.
     - Two columns exploit the width the card just gained and save ~130px of
       height, which is what gets the product lines above the fold. */
.field-card__families { display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:8px; row-gap:0;
  --fc-row:40px; min-height:calc(3 * var(--fc-row) + 2px); align-content:start; }
.fc-family { display:block; min-width:0; }
.fc-family:nth-child(n+3) { border-top:1px solid rgba(15,26,51,0.08); }
.fc-family--empty { grid-column:1 / -1; }
.fc-family__link { display:flex; align-items:center; gap:9px; padding:5px 6px; border-radius:11px;
  min-height:40px; box-sizing:border-box; text-decoration:none; color:inherit;
  transition:background var(--dur-fast) var(--ease); }
.fc-family__link:hover { background:rgba(15,26,51,0.04); }
.fc-family__link:focus-visible { background:rgba(15,26,51,0.06); outline:2px solid var(--navy); outline-offset:1px; }
/* faint chevron on the right signals each row is a link */
.fc-family__link::after { content:""; flex:none; width:7px; height:7px; margin-left:4px;
  border-top:1.5px solid rgba(15,26,51,0.32); border-right:1.5px solid rgba(15,26,51,0.32);
  transform:rotate(45deg);
  transition:transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.fc-family__link:hover::after, .fc-family__link:focus-visible::after { border-color:var(--fam); }
.fc-family__link:hover::after { transform:translateX(2px) rotate(45deg); }
/* Icons are self-contained colored tiles — show them bare (no extra frame). */
.fc-family__icon { flex:none; width:28px; height:28px; display:flex;
  align-items:center; justify-content:center; }
.fc-family__icon img { width:28px; height:28px; display:block; object-fit:contain; }
.fc-family__name { font-size:var(--body-s); color:var(--deep-ink); flex:1; min-width:0; }
.fc-family--empty { font-size:var(--body-s); color:rgba(15,26,51,0.66); padding:6px 0; }
.field-card__footrow { display:flex; align-items:flex-end; justify-content:space-between; gap:10px;
  border-top:1px solid var(--rule); padding-top:var(--s-2); }
.field-card__foot { margin:0; font-size:0.68rem; line-height:1.4; color:rgba(15,26,51,0.74); }
.field-card__reset { flex:none; font-family:var(--font-body); font-size:0.68rem; color:var(--navy);
  border-bottom:1px solid var(--rule-strong); padding:4px 2px; min-height:26px; background:none; }
.field-card__reset:hover { color:var(--deep-ink); border-color:var(--deep-ink); }

/* hero stat strip — count-agnostic since the country tile moved out (it now
   lives only in the proof band below), so this must not hardcode 4 columns. */
.fhero__stats { display:grid; grid-auto-flow:column; grid-auto-columns:1fr; margin:0;
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.fstat { display:flex; align-items:center; gap:var(--s-2);
  padding:clamp(12px,1.5vw,18px) clamp(12px,1.4vw,22px); border-right:1px solid var(--rule); }
.fstat:last-child { border-right:0; }
.fstat__icon { flex:none; color:var(--navy); }
.fstat__icon svg { display:block; width:30px; height:30px; }
.fstat__text { display:flex; flex-direction:column; }
.fstat__num { font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.3rem,1.8vw,1.95rem); line-height:1.04; color:var(--deep-ink); }
.fstat__label { font-size:var(--body-s); line-height:1.25; color:rgba(15,26,51,0.62); }

/* responsive */
@media (max-width:759px) {
  /* Stat strip stacks two-up on phones. grid-auto-flow:column from the base
     rule has to be reset to row here or the tiles stay on one line. */
  .fhero__stats { grid-auto-flow:row; grid-template-columns:repeat(2,1fr); }
  .fstat:nth-child(2n) { border-right:0; }
  .fstat:nth-child(n+3) { border-top:1px solid var(--rule); }
}
@media (max-width:460px) {
  .fhero__stats { grid-template-columns:1fr; }
  .fstat { border-right:0; }
  .fstat:not(:first-child) { border-top:1px solid var(--rule); }
}

/* ============================================================
   Catalogue 2026 email-gate modal. Opened by [data-catalog-trigger];
   scrim + centred panel; reuses the .field-card floating shadow and the
   .contact-form field conventions. z-index above the header (50) and
   skip-link (100). */
.catalog-modal { position:fixed; inset:0; z-index:200; display:flex;
  align-items:center; justify-content:center; padding:var(--s-3); }
.catalog-modal[hidden] { display:none; }
.catalog-modal__scrim { position:absolute; inset:0; background:rgba(15,26,51,0.55);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
.catalog-modal__panel { position:relative; z-index:1; width:min(440px,100%);
  max-height:calc(100vh - 2 * var(--s-3)); overflow:auto;
  background:var(--cream-card); border:1px solid var(--rule); border-radius:var(--radius-card);
  box-shadow:0 20px 50px -26px rgba(15,26,51,0.30), 0 1px 0 rgba(15,26,51,0.04);
  padding:clamp(24px,3vw,36px); }
.catalog-modal__close { position:absolute; top:12px; right:12px; display:inline-flex;
  align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%;
  border:1px solid transparent; background:transparent; color:var(--navy); cursor:pointer;
  transition:background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.catalog-modal__close:hover { background:color-mix(in srgb, var(--navy) 6%, transparent);
  border-color:var(--rule); }
.catalog-modal__close:focus-visible { outline:2px solid var(--navy); outline-offset:2px; }
.catalog-modal__eyebrow { margin:0 0 var(--s-2); color:var(--navy); }
.catalog-modal__title { margin:0; color:var(--navy); font-size:clamp(1.5rem,2.4vw,2rem);
  line-height:1.08; letter-spacing:-0.018em; }
.catalog-modal__lede { margin:var(--s-2) 0 var(--s-4); font-size:var(--body-s);
  line-height:1.5; color:rgba(15,26,51,0.74); }
.catalog-form { display:grid; gap:var(--s-3); }
.catalog-form[hidden] { display:none; }
.catalog-form__row { display:grid; gap:var(--s-1); }
.catalog-form__row label { font-size:var(--ui); letter-spacing:var(--track-ui);
  color:rgba(15,26,51,0.7); }
.catalog-form__row input { font:inherit; background:var(--cream-ground); border:1px solid var(--rule);
  padding:12px 16px; border-radius:var(--radius-btn); color:var(--deep-ink); width:100%; }
.catalog-form__row input:focus-visible { outline:2px solid var(--navy); outline-offset:2px;
  border-color:var(--rule-strong); }
.catalog-form__submit { width:100%; justify-content:center; }
.catalog-form__hp { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.catalog-form__note { margin:0; font-size:0.72rem; line-height:1.4; color:rgba(15,26,51,0.6); }
.catalog-modal__success { display:flex; align-items:center; gap:var(--s-2); margin:0;
  font-size:var(--body-m); line-height:1.4; color:var(--deep-ink); }
.catalog-modal__success[hidden] { display:none; }
.catalog-modal__success-icon { flex:none; display:inline-flex; align-items:center;
  justify-content:center; width:34px; height:34px; border-radius:50%; color:var(--line-physio);
  background:color-mix(in srgb, var(--line-physio) 14%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  .catalog-modal:not([hidden]) .catalog-modal__scrim { animation:catalog-fade var(--dur-fade) var(--ease); }
  .catalog-modal:not([hidden]) .catalog-modal__panel { animation:catalog-rise var(--dur-fade) var(--ease); }
  @keyframes catalog-fade { from { opacity:0; } to { opacity:1; } }
  @keyframes catalog-rise { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
}


/* ============================================================
   BLOCK C (tail) — Contact Form 7 → v4 look mapping
   CF7 wraps every field in <span class="wpcf7-form-control-wrap">
   and renders its own <input>/<select>/<textarea>/<submit>. These
   id/class-scoped rules map that markup onto the native v4 form
   look (.catalog-form / .contact-form / .catalogs-form), using only
   existing tokens. Scoped by #id / .class so specificity beats
   CF7's own low-specificity stylesheet regardless of load order.
   ============================================================ */

/* ---- Catalogue modal form (mirrors .catalog-form) ---- */
#catalog-modal .wpcf7-form {
  display: grid;
  gap: var(--s-3);
}
#catalog-modal .wpcf7-form > p { margin: 0; }
#catalog-modal .wpcf7-form-control-wrap { display: block; }
#catalog-modal .wpcf7-form label {
  display: grid;
  gap: var(--s-1);
  font-size: var(--ui);
  letter-spacing: var(--track-ui);
  color: rgba(15, 26, 51, 0.7);
}
#catalog-modal .wpcf7-form input[type="email"],
#catalog-modal .wpcf7-form input[type="text"],
#catalog-modal .wpcf7-form select {
  font: inherit;
  background: var(--cream-ground);
  border: 1px solid var(--rule);
  padding: 12px 16px;
  border-radius: var(--radius-btn);
  color: var(--deep-ink);
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
}
#catalog-modal .wpcf7-form input[type="email"]:focus-visible,
#catalog-modal .wpcf7-form input[type="text"]:focus-visible,
#catalog-modal .wpcf7-form select:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
  border-color: var(--rule-strong);
}
/* GDPR acceptance row — quiet consent line, not a labelled field. */
#catalog-modal .wpcf7-acceptance .wpcf7-list-item { margin: 0; }
#catalog-modal .wpcf7-acceptance .wpcf7-list-item label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-2);
  align-items: start;
  font-size: var(--body-s);
  letter-spacing: 0;
  color: rgba(15, 26, 51, 0.78);
}
#catalog-modal .wpcf7-acceptance input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--navy);
  flex: none;
}
/* Submit → .cta.cta--primary.cta--large, full-width + centered. */
#catalog-modal .wpcf7-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--body-m);
  letter-spacing: var(--track-ui);
  text-decoration: none;
  padding: var(--s-3) var(--s-5);
  border-radius: var(--radius-btn);
  background: var(--navy);
  color: var(--cream-ground);
  border: 1px solid var(--navy);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              opacity var(--dur-fast) var(--ease);
}
#catalog-modal .wpcf7-submit:hover {
  background: var(--deep-ink);
  border-color: var(--deep-ink);
  opacity: 1;
}
#catalog-modal .wpcf7-submit:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
}
#catalog-modal .wpcf7-submit[disabled] { opacity: 0.6; cursor: progress; }
/* Feedback → quiet note, no red box border (we show our own success). */
#catalog-modal .wpcf7-response-output {
  margin: var(--s-2) 0 0;
  padding: 0;
  border: 0;
  font-size: 0.72rem;
  line-height: 1.4;
  color: rgba(15, 26, 51, 0.6);
}
#catalog-modal .wpcf7-not-valid-tip {
  font-size: var(--body-s);
  color: var(--line-intense);
}
#catalog-modal .wpcf7-form input[aria-invalid="true"],
#catalog-modal .wpcf7-form select[aria-invalid="true"] {
  border-color: var(--line-intense);
}
/* We surface success via our own #catalog-success panel — hide CF7's spinner. */
#catalog-modal .wpcf7-spinner { display: none; }

/* ---- Catalogs fallback page + Contact page forms (native look) ----
   Same mapping scoped to .catalogs-form / .contact-form so their CF7
   forms render like the theme's own rows (grid rows, cream inputs,
   pill submit). */
.catalogs-form .wpcf7-form,
.contact-form .wpcf7-form {
  display: grid;
  gap: var(--s-3);
  max-width: var(--measure);
}
.catalogs-form .wpcf7-form > p,
.contact-form .wpcf7-form > p { margin: 0; }
.catalogs-form .wpcf7-form-control-wrap,
.contact-form .wpcf7-form-control-wrap { display: block; }
.catalogs-form .wpcf7-form label,
.contact-form .wpcf7-form label {
  display: grid;
  gap: var(--s-1);
  font-size: var(--ui);
  letter-spacing: var(--track-ui);
  color: rgba(15, 26, 51, 0.7);
}
.catalogs-form .wpcf7-form input[type="email"],
.catalogs-form .wpcf7-form input[type="text"],
.catalogs-form .wpcf7-form select,
.catalogs-form .wpcf7-form textarea,
.contact-form .wpcf7-form input[type="email"],
.contact-form .wpcf7-form input[type="text"],
.contact-form .wpcf7-form select,
.contact-form .wpcf7-form textarea {
  font: inherit;
  background: var(--cream-card);
  border: 1px solid var(--rule);
  padding: 12px 16px;
  border-radius: var(--radius-btn);
  color: var(--deep-ink);
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
}
.catalogs-form .wpcf7-form textarea,
.contact-form .wpcf7-form textarea { min-height: 168px; resize: vertical; }
.catalogs-form .wpcf7-form input[type="email"]:focus-visible,
.catalogs-form .wpcf7-form input[type="text"]:focus-visible,
.catalogs-form .wpcf7-form select:focus-visible,
.catalogs-form .wpcf7-form textarea:focus-visible,
.contact-form .wpcf7-form input[type="email"]:focus-visible,
.contact-form .wpcf7-form input[type="text"]:focus-visible,
.contact-form .wpcf7-form select:focus-visible,
.contact-form .wpcf7-form textarea:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
  border-color: var(--rule-strong);
}
.catalogs-form .wpcf7-acceptance .wpcf7-list-item,
.contact-form .wpcf7-acceptance .wpcf7-list-item { margin: 0; }
.catalogs-form .wpcf7-acceptance .wpcf7-list-item label,
.contact-form .wpcf7-acceptance .wpcf7-list-item label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-2);
  align-items: start;
  font-size: var(--body-s);
  letter-spacing: 0;
  color: rgba(15, 26, 51, 0.78);
}
.catalogs-form .wpcf7-acceptance input[type="checkbox"],
.contact-form .wpcf7-acceptance input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--navy);
  flex: none;
}
.catalogs-form .wpcf7-submit,
.contact-form .wpcf7-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  font-family: var(--font-body);
  font-size: var(--body-m);
  letter-spacing: var(--track-ui);
  text-decoration: none;
  padding: var(--s-3) var(--s-5);
  border-radius: var(--radius-btn);
  background: var(--navy);
  color: var(--cream-ground);
  border: 1px solid var(--navy);
  cursor: pointer;
  align-self: start;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              opacity var(--dur-fast) var(--ease);
}
.catalogs-form .wpcf7-submit:hover,
.contact-form .wpcf7-submit:hover {
  background: var(--deep-ink);
  border-color: var(--deep-ink);
  opacity: 1;
}
.catalogs-form .wpcf7-submit:focus-visible,
.contact-form .wpcf7-submit:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
}
.catalogs-form .wpcf7-response-output,
.contact-form .wpcf7-response-output {
  margin: var(--s-2) 0 0;
  padding: var(--s-2) var(--s-3);
  border: 0;
  border-left: 2px solid var(--rule-strong);
  font-size: var(--body-s);
  line-height: 1.5;
  color: rgba(15, 26, 51, 0.78);
}
.catalogs-form .wpcf7-not-valid-tip,
.contact-form .wpcf7-not-valid-tip {
  font-size: var(--body-s);
  color: var(--line-intense);
}
.catalogs-form .wpcf7-form input[aria-invalid="true"],
.catalogs-form .wpcf7-form select[aria-invalid="true"],
.catalogs-form .wpcf7-form textarea[aria-invalid="true"],
.contact-form .wpcf7-form input[aria-invalid="true"],
.contact-form .wpcf7-form select[aria-invalid="true"],
.contact-form .wpcf7-form textarea[aria-invalid="true"] {
  border-color: var(--line-intense);
}
.catalogs-form .wpcf7-spinner,
.contact-form .wpcf7-spinner {
  margin: 0 0 0 var(--s-2);
}

/* Distributor inquiry — two-column split. The seeded CF7 markup wraps each
   field in <label class="contact-form__row"> inside an auto-<p>; those short
   rows pack into two columns while the wide controls (message, consent,
   submit, response output, honeypot) span the full width via :has(). One
   column at 820px. Structure is untouched — this is layout only. */
.contact-form--split { max-width: none; }
.contact-form--split .wpcf7-form {
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4) var(--s-5);
  max-width: none;
}
.contact-form--split .wpcf7-form > p:has(textarea),
.contact-form--split .wpcf7-form > p:has(.wpcf7-acceptance),
.contact-form--split .wpcf7-form > p:has(.wpcf7-submit),
.contact-form--split .wpcf7-form > p:has(.ikar-hp),
.contact-form--split .wpcf7-form > .wpcf7-response-output {
  grid-column: 1 / -1;
}
@media (max-width: 820px) {
  .contact-form--split .wpcf7-form { grid-template-columns: 1fr; }
}


/* ============================================================
   BLOCK D — theme-only extension components
   Components the WordPress theme needs that have NO equivalent in
   any prototype <style> block (proto-main §14 already carries the
   rest of the WP-extension vocabulary: buttons, line-block,
   product-cards, forms, legal/imprint, timeline, value-grid,
   pathways, countries, research-article, etc.). These two groups
   are additive, token-based, and follow the same v4 vocabulary.
   Pill radii tokenized to --radius-* to match v4 (CLAUDE.md law).
   ============================================================ */

/* ----- Catalog gate trigger (link variant) -----
   No-JS fallback links to /catalogs/ that ALSO carry
   data-catalog-trigger so the modal can intercept them. */
.catalog-gate-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-size: var(--ui);
  letter-spacing: var(--track-ui);
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid var(--navy);
  padding-bottom: 2px;
}
.catalog-gate-trigger:hover {
  color: var(--deep-ink);
  border-color: var(--deep-ink);
  opacity: 1;
}
.catalog-gate-trigger--primary {
  /* When the trigger is the dominant CTA on the section, lift it to button. */
  border: 1px solid var(--navy);
  border-radius: var(--radius-btn);
  padding: 14px 24px;
  background: var(--navy);
  color: var(--cream-ground);
}
.catalog-gate-trigger--primary:hover {
  background: var(--deep-ink);
  border-color: var(--deep-ink);
  color: var(--cream-ground);
}

/* ----- Packaging grid — sub-block inside Product lines ----- */
.packaging      { margin-top: clamp(56px, 6vw, 88px); }
.packaging .eyebrow { margin-bottom: var(--s-3); }
.packaging-grid { display: grid; grid-template-columns: repeat(4, 1fr);
                  gap: clamp(16px, 2vw, 32px); margin: 0; padding: 0;
                  list-style: none; }
.packaging-tile { background: var(--cream-card);
                  border: 1px solid var(--rule);
                  padding: clamp(20px, 2.4vw, 32px);
                  display: grid;
                  grid-template-rows: 1fr auto auto;
                  gap: var(--s-2);
                  align-items: end; text-align: center; }
.packaging-tile img { max-height: clamp(140px, 16vw, 220px);
                      width: auto; margin: 0 auto;
                      object-fit: contain; }
.packaging-tile__name { margin: 0; font-weight: 500; color: var(--deep-ink); }
.packaging-tile__vol  { margin: 0; font-size: var(--body-s); color: var(--navy); }
@media (max-width: 820px) { .packaging-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .packaging-grid { grid-template-columns: 1fr; } }

/* ============================================================
   ROUND 2 — Products index cards (page-products.php)
   Imagery-forward editorial index: one card per product line, real
   bottle photo, mono index numeral + one-word label, serif name (NOT
   accent-tinted — kills rainbow), thesis, arrow CTA. Accent is supplied
   per card via inline `--line-accent` and used ONLY as: index numeral
   tint, media bottom rule, CTA tint, hover border — name stays ink.
   Token-only; motion (lift) gated under no-preference. ============ */
.line-index-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.2vw, 32px);
  margin-top: clamp(40px, 4.5vw, 64px);
}
.line-index-card {
  /* Compact card (client pick 2026-07-20, option B): no media box — the
     line icon sits as a small chip beside the number, homepage-card
     style. Accent = the 2px top rule. */
  background: var(--cream-card);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--line-accent, var(--navy));
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.line-index-card__face {
  display: block;
  height: 100%;
  text-decoration: none;
  color: inherit;
}
.line-index-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  height: 100%;
  padding: clamp(20px, 2.4vw, 28px) clamp(20px, 2.4vw, 32px) clamp(24px, 2.6vw, 32px);
}
.line-index-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-2);
}
.line-index-card__icon {
  width: clamp(40px, 3.4vw, 48px);
  height: auto;
  flex: none;
}
.line-index-card__eyebrow {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  margin: 0;
}
.line-index-card__index {
  font-family: var(--font-mono);
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  color: color-mix(in oklab, var(--line-accent, var(--navy)) 55%, var(--deep-ink));
}
.line-index-card__label {
  font-family: var(--font-mono);
  color: rgba(15, 26, 51, 0.6);
}
.line-index-card__name {
  margin: 0;
  color: var(--deep-ink);
}
.line-index-card__thesis {
  margin: 0;
  color: rgba(15, 26, 51, 0.78);
  max-width: 42ch;
}
.line-index-card__cta {
  margin-top: auto;
  color: color-mix(in oklab, var(--line-accent, var(--navy)) 55%, var(--deep-ink));
  border-bottom-color: color-mix(in srgb, var(--line-accent, var(--navy)) 45%, transparent);
}
.line-index-card:hover,
.line-index-card:focus-within {
  border-color: color-mix(in srgb, var(--line-accent, var(--navy)) 40%, var(--rule));
  /* Keep the accent top rule at full strength — the shorthand above
     would otherwise mute it too. */
  border-top-color: var(--line-accent, var(--navy));
}
@media (prefers-reduced-motion: no-preference) {
  .line-index-card:hover { transform: translateY(-2px); }
}
@media (max-width: 1024px) {
  .line-index-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .line-index-grid { grid-template-columns: 1fr; }
}

/* Hero "spectrum" row (page-products.php opener) — a quiet six-dot signature
   of the line taxonomy, rendered just after the intro lede. Decorative only
   (aria-hidden in markup). Spans the full section-header grid the same way
   .section-header__sub does, so it isn't trapped in the narrow lead column. */
.line-index-spectrum {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: var(--s-3) 0 0;
}
.line-index-spectrum span {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--dot);
}
.line-index-spectrum::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rule);
  align-self: center;
}

/* ============================================================
   ROUND 2 — Line-page product grid + detail modal
   (single-product_line.php). Replaces the retired .product-entry
   inline rows. Each product is a card; "View details" opens a shared
   overlay whose content is the card's <details>.product-detail node,
   moved in by product-modal.js. No-JS users open the <details> inline.
   Accent flows from the article-level --line-accent. Token-only; lift
   + modal rise gated under no-preference. ======================== */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 1.8vw, 28px);
  margin-top: clamp(40px, 4.5vw, 64px);
}
.product-card {
  display: flex;
  flex-direction: column;
  background: var(--cream-card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.product-card__media {
  margin: 0;
  aspect-ratio: 4 / 5;
  background: var(--cream-ground);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 2vw, 28px);
  border-bottom: 1px solid var(--rule);
  /* .product-card is a column flexbox and grid rows stretch to the tallest
     card, so without this the media well grew past its 4:5 ratio by however
     much body copy the neighbouring cards had — illustrations then rendered
     at a different size in every row. Pin the well; let the body absorb the
     slack instead. */
  flex: none;
}
/* Fill the well rather than rendering at intrinsic size. The source
   illustrations range from 0.44 to 1.33 aspect, so `width/height:auto` let
   each one land at a different visual size — the "different sized images
   everywhere" the client flagged. object-fit:contain keeps every illustration
   whole while normalising the box it occupies. */
.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.product-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: clamp(16px, 2vw, 24px);
  flex: 1;
}
.product-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2);
  /* Flex items default to min-width:auto (= min-content). Without this the
     <h3> refuses to shrink below its longest word and overflows the card,
     which `overflow:hidden` on .product-card then shears — the clipped
     "Mendeleniur" in the client's 2026-08 video. */
  min-width: 0;
}
.product-card__name {
  margin: 0;
  color: var(--deep-ink);
  min-width: 0;
  /* Product names are unbreakable single words (Mendelenium, PerfectStick).
     Let them wrap rather than overflow; the page-scale --display-s (up to
     36px) is also far too large for a card in a 4-column grid. */
  font-size: clamp(1.25rem, 1.1vw + 0.7rem, 1.625rem);
  line-height: 1.12;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.product-card__badge {
  font-family: var(--font-mono);
  font-size: var(--body-s);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 6px 10px;
  border-radius: var(--radius-chip);
  border: 1px solid color-mix(in srgb, var(--line-accent, var(--navy)) 28%, transparent);
  color: color-mix(in oklab, var(--line-accent, var(--navy)) 55%, var(--deep-ink));
  background: color-mix(in srgb, var(--line-accent, var(--navy)) 8%, transparent);
  white-space: nowrap;
}
.product-card__tagline {
  margin: 0;
  font-size: var(--body-m);
  color: color-mix(in oklab, var(--line-accent, var(--navy)) 55%, var(--deep-ink));
  max-width: 38ch;
}
.product-card__highlight {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--body-s);
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  color: rgba(15, 26, 51, 0.78);
}
.product-card__packaging {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.product-card__pack {
  font-family: var(--font-mono);
  font-size: var(--body-s);
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  padding: 4px 10px;
  border-radius: var(--radius-chip);
  border: 1px solid var(--rule);
  color: rgba(15, 26, 51, 0.66);
}
.product-card--soon { opacity: 0.92; }
.product-card:hover,
.product-card:focus-within {
  border-color: color-mix(in srgb, var(--line-accent, var(--navy)) 40%, var(--rule));
}
@media (prefers-reduced-motion: no-preference) {
  .product-card:hover { transform: translateY(-2px); }
}
@media (max-width: 1200px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .product-grid { grid-template-columns: 1fr; }
}

/* Product-detail modal removed — line-page product cards no longer expose a
   "View details" overlay; full specs live in the printable catalog. The
   viewer below is images only, and keeps that decision intact. */

/* ----- Product illustration hover-swap + lightbox -----
   Cards show mode-of-action illustrations (transparent PNGs on the cream
   media well). The face image is wrapped in a link to the full artwork —
   that link is the whole feature with JS off; product-gallery.js upgrades
   it to the viewer. */
.product-card__media { position: relative; }
/* Absolutely positioned so the illustration can never contribute to layout
   height. In flow, the img's `height:100%` resolved against an indefinite
   parent and fell back to intrinsic aspect, which let a tall portrait
   (Mendelenium, 698x1113) stretch the well from 351px to 416px and defeat
   `aspect-ratio: 4/5`. `inset` matches .product-card__media's padding, since
   absolute positioning resolves against the padding box. */
.product-card__media-link {
  position: absolute;
  inset: clamp(16px, 2vw, 28px);
  /* width/height stay auto so the insets size the box — do not reinstate the
     100% pair that used to live here, it re-inflates the link past the well. */
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: 0;
}
.product-card__media-hover {
  position: absolute;
  inset: 0;
  margin: auto;
  opacity: 0;
  pointer-events: none;
}
/* The swap is an enhancement, not the content: gate it on a real hover
   pointer AND motion tolerance. Touch and reduced-motion users get a
   stable face image and reach every illustration through the viewer.
   Scoped to --swap (set only when a second illustration exists) — an
   unscoped face-fade would blank single-illustration cards on hover. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .product-card__media--swap .product-card__media-face,
  .product-card__media--swap .product-card__media-hover { transition: opacity var(--dur-fade) var(--ease); }
  .product-card:hover .product-card__media--swap .product-card__media-hover,
  .product-card:focus-within .product-card__media--swap .product-card__media-hover { opacity: 1; }
  .product-card:hover .product-card__media--swap .product-card__media-face,
  .product-card:focus-within .product-card__media--swap .product-card__media-face { opacity: 0; }
}
.product-card__media-count {
  position: absolute;
  right: var(--s-1);
  bottom: var(--s-1);
  min-width: 22px;
  padding: 2px 6px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--cream-card);
  font-size: 11px;
  line-height: 1.4;
  text-align: center;
  color: var(--deep-ink);
  opacity: 0.75;
}

.product-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 3vw, 40px);
}
.product-lightbox[hidden] { display: none; }
.product-lightbox__scrim {
  position: absolute;
  inset: 0;
  background: rgba(15, 26, 51, 0.72);
}
.product-lightbox__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  width: min(960px, 100%);
  max-height: 100%;
  padding: clamp(16px, 2.5vw, 28px);
  background: var(--cream-card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
}
@media (prefers-reduced-motion: no-preference) {
  .product-lightbox__panel { animation: lightbox-rise var(--dur-fade) var(--ease) both; }
}
@keyframes lightbox-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.product-lightbox__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
}
.product-lightbox__title {
  margin: 0;
  font-size: var(--ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(15, 26, 51, 0.7);
}
.product-lightbox__close {
  flex: none;
  width: 44px;
  height: 44px;
  font-size: 24px;
  line-height: 1;
  color: var(--deep-ink);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 999px;
  cursor: pointer;
}
.product-lightbox__close:hover { border-color: var(--rule-strong); }
.product-lightbox__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 0;
}
.product-lightbox__image {
  flex: 1 1 auto;
  min-height: 0;
  max-width: 100%;
  max-height: min(68vh, 640px);
  width: auto;
  height: auto;
  object-fit: contain;
}
.product-lightbox__nav {
  flex: none;
  width: 44px;
  height: 44px;
  font-size: 18px;
  color: var(--deep-ink);
  background: var(--cream-ground);
  border: 1px solid var(--rule);
  border-radius: 999px;
  cursor: pointer;
}
.product-lightbox__nav:hover { border-color: var(--rule-strong); }
.product-lightbox__nav[hidden] { display: none; }
.product-lightbox__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  justify-content: center;
}
.product-lightbox__thumbs[hidden] { display: none; }
.product-lightbox__thumb {
  width: 56px;
  height: 56px;
  padding: 4px;
  background: var(--cream-ground);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm, 4px);
  cursor: pointer;
}
.product-lightbox__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.product-lightbox__thumb[aria-current="true"] {
  border-color: var(--line-accent, var(--navy));
  box-shadow: inset 0 0 0 1px var(--line-accent, var(--navy));
}
@media (max-width: 600px) {
  .product-lightbox__nav { width: 40px; height: 40px; }
  .product-lightbox__image { max-height: 56vh; }
}

/* ----------------------------------------------------------------
   EVIDENCE LEDGER — homepage Research section (v4)
   Replaces the retired v2/v3 editorial-card research block with a
   compact, data-first journal index: hairline-separated rows, each a
   single link (one tab stop). Row anatomy: line-accent mark · serif
   title + mono trial-meta · headline key result · year · arrow. A
   quieter --pending variant carries the empty state. Section target
   ~550–620px tall with one post + the pending row.
   ---------------------------------------------------------------- */
.evidence-ledger {
  list-style: none;
  margin: var(--s-5) 0 0;
  padding: 0;
  border-bottom: 1px solid var(--rule);
}
.evidence-ledger__row {
  border-top: 1px solid var(--rule);
}

/* Row link — the whole row is one tab stop. */
.evidence-ledger__link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: var(--s-5);
  align-items: center;
  padding: var(--s-4) var(--s-2);
  color: inherit;
  text-decoration: none;
}
.evidence-ledger__link:hover,
.evidence-ledger__link:focus-visible {
  background: var(--cream-card);
}
/* Inset ring — a full-width row reads cleaner hugged inside than with
   the global +3px offset overhanging the hairlines. */
.evidence-ledger__link:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: -2px;
}

/* Line-accent mark — 10px dot; accent arrives inline as --row-accent. */
.evidence-ledger__mark {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--row-accent, var(--navy));
  flex-shrink: 0;
}
.evidence-ledger__mark--pending {
  background: transparent;
  border: 1.5px solid rgba(15, 26, 51, 0.35);
}

/* Body — serif title over mono meta. */
.evidence-ledger__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  min-width: 0;
}
.evidence-ledger__title {
  font-family: var(--font-display);
  font-size: var(--body-l);
  line-height: var(--leading-snug);
  color: var(--deep-ink);
}
.evidence-ledger__meta {
  font-family: var(--font-mono);
  font-size: var(--body-s);
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  /* 0.7 is the documented AA floor on cream — see .eyebrow. */
  color: rgba(15, 26, 51, 0.7);
}
.evidence-ledger__meta a {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.evidence-ledger__meta a:hover {
  color: var(--deep-ink);
}

/* Right cluster — key result, year, arrow. */
.evidence-ledger__end {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  flex-shrink: 0;
}
.evidence-ledger__result {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
}
.evidence-ledger__result-num {
  font-family: var(--font-mono);
  font-size: var(--body-l);
  font-weight: 500;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  /* The figure is ink, never the raw line accent. */
  color: var(--deep-ink);
  white-space: nowrap;
}
.evidence-ledger__result-label {
  max-width: 16ch;
  font-size: var(--body-s);
  line-height: var(--leading-snug);
  color: rgba(15, 26, 51, 0.7);
}
.evidence-ledger__year {
  font-family: var(--font-mono);
  font-size: var(--body-s);
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  color: rgba(15, 26, 51, 0.7);
}
.evidence-ledger__arrow {
  color: var(--navy);
  font-size: var(--body-l);
  line-height: 1;
}

/* Pending row — static, quieter, plain (not serif). */
.evidence-ledger__pending {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--s-5);
  align-items: center;
  padding: var(--s-4) var(--s-2);
}
.evidence-ledger__row--pending .evidence-ledger__title {
  font-family: var(--font-body);
  font-size: var(--body-m);
  line-height: var(--leading-body);
  color: rgba(15, 26, 51, 0.7);
}

/* Arrow nudge — 4px on row hover; transform/opacity only, GPU-safe,
   fully gated behind reduced-motion (matches the file's motion passes). */
@media (prefers-reduced-motion: no-preference) {
  .evidence-ledger__arrow {
    display: inline-block;
    transition: transform var(--dur-fast) var(--ease);
    will-change: transform;
  }
  .evidence-ledger__link:hover .evidence-ledger__arrow,
  .evidence-ledger__link:focus-visible .evidence-ledger__arrow {
    transform: translateX(4px);
  }
}

/* @992 — stack: mark + title, then meta, then the result/year/arrow
   cluster beneath the body, with the result gloss under its figure.
   992px is a deliberate component-scoped breakpoint (client request,
   2026-07-20) outside the site's 1024/820/600/480 set: between ~992 and
   820 the one-row grid cramps the title against the result cluster. */
@media (max-width: 992px) {
  .evidence-ledger__link {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    row-gap: var(--s-2);
    column-gap: var(--s-3);
  }
  .evidence-ledger__end {
    grid-column: 2;
    flex-wrap: wrap;
    gap: var(--s-3);
  }
  .evidence-ledger__result {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
}

/* ============================================================
   ROUND 3 — ARCHIVE LEAD + ARCHIVE GRID (Package 5: Science + News
   archive layouts — archive-research.php / index.php). Appended-only
   block per the multi-agent edit rule for this file: nothing above
   this point was touched; an override for an existing selector, if
   ever needed, belongs here rather than at its original rule.

   .archive-lead — featured-post treatment for the newest post on page
   1 of /science/ and /news/ (both templates peel the first post off
   the main loop and render it here; every later page — or a page with
   no posts — degrades to the plain ledger/grid, no lead). Two-column
   grid (text + 4:3 photo) only when a thumbnail exists — the :has()
   gate mirrors .founder-letter's technique above — so there is no
   empty second track when the figure is omitted. Text column reuses
   .research-card__title-link (ink colour + hover underline, and the
   sitewide :focus-visible ring with no per-component override — this
   file's one existing convention) plus the shared .eyebrow / .byline /
   .link-arrow components already in the cascade, per CLAUDE.md "reuse
   the token system + components." Tokens only — no new colour/spacing
   literals.
   ---------------------------------------------------------------- */
.archive-lead {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-5);
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--rule);
}
.archive-lead:has(.archive-lead__figure) {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: center;
}
.archive-lead__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);
}
/* Base .eyebrow carries its own bottom margin (§3 UTILITIES) — reset
   to 0 so the flex .archive-lead__body gap is the only space. */
.archive-lead__eyebrow { margin: 0; }
.archive-lead__mark {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: var(--s-1);
  vertical-align: middle;
  transform: translateY(-1px);
}
/* .display-m (up to 56px) made this bigger than the page h1; .display-s caps
   it at 38px so the index reads as an index. */
.archive-lead__title { max-width: 30ch; margin: 0; }
.archive-lead__dek {
  margin: 0;
  font-size: var(--body-l);
  line-height: var(--leading-loose);
  color: rgba(15, 26, 51, 0.74);
  max-width: 46ch;
}
.archive-lead__figure {
  aspect-ratio: 4 / 3;
  margin: 0;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--cream-card);
}
.archive-lead__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* @820 — collapse to one column; when a figure exists it moves above
   the text (photo-first, matching the editorial-card convention). */
@media (max-width: 820px) {
  .archive-lead:has(.archive-lead__figure) {
    grid-template-columns: minmax(0, 1fr);
  }
  .archive-lead__figure { order: -1; }
}
@media (max-width: 600px) {
  .archive-lead { gap: var(--s-4); padding-block: var(--s-4); }
}

/* .research-grid--archive — was a phantom class (no rule at all),
   silently inheriting §9's homepage 2-col .research-grid. /science/
   and /news/ archives want a denser 3-up grid than the homepage;
   single-research.php's "Related" grid (plain .research-grid, no
   modifier) is untouched by this. */
.research-grid--archive {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1024px) {
  .research-grid--archive { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .research-grid--archive { grid-template-columns: 1fr; }
}

/* ============================================================
   COOKIE NOTICE (2026-08 client review, item 20)
   Informational, not a consent gate — see partials/cookie-notice.php.
   Bottom-anchored cream card on the cream ground, hairline rule, no
   overlay and no scroll lock: it must never block reading the page.
   ============================================================ */
.cookie-notice {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 60;
  background: var(--cream-card);
  border-top: 1px solid var(--rule-strong);
  box-shadow: 0 -18px 40px -30px rgba(15, 26, 51, 0.45);
  opacity: 0;
  transform: translateY(100%);
  transition: opacity var(--dur-fade) var(--ease), transform var(--dur-fade) var(--ease);
}
.cookie-notice.is-visible { opacity: 1; transform: none; }
.cookie-notice__inner {
  max-width: calc(var(--max-content) + var(--gutter) * 2);
  margin-inline: auto;
  padding: var(--s-3) var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3) var(--s-4);
  flex-wrap: wrap;
}
.cookie-notice__text {
  margin: 0;
  font-size: var(--body-s);
  line-height: var(--leading-body);
  color: rgba(15, 26, 51, 0.82);
  max-width: 74ch;
}
.cookie-notice__link { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }
.cookie-notice__ok { flex: none; }
@media (max-width: 600px) {
  .cookie-notice__inner { flex-direction: column; align-items: flex-start; }
  .cookie-notice__ok { width: 100%; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .cookie-notice { transition: opacity var(--dur-fade) linear; transform: none; }
}
/* The notice is chrome, not content — never print it. */
@media print { .cookie-notice { display: none !important; } }