/* ─── LEGACY TOKEN ALIAS / APP LAYER ──────────────────────────
 * Canonical tokens + @font-face now live in css/tokens.css (linked
 * before this file). This block (a) bridges the legacy token names
 * used across this stylesheet's ~418 var(--legacy) call sites onto
 * the canonical spine, and (b) holds app/layout tokens that are not
 * brand tokens. Every value is pixel-identical to the pre-refactor
 * cascade. Call-site renaming + alpha consolidation are later passes.
 * ──────────────────────────────────────────────────────────────── */
:root {
  /* Font tokens — kept literal: the canonical spine drops the
     'Garamond' / 'DM Sans' fallbacks; the webfont loads so this is
     visually identical, but kept exact to honour the no-change gate. */
  --font-display: 'EB Garamond', Garamond, Georgia, serif;
  --font-body:    'Space Grotesk', 'DM Sans', system-ui, sans-serif;

  /* Palette → canonical */
  --uguisu:  var(--color-olive);
  --spring:  var(--color-spring);
  --peach:   var(--color-peach);
  --gold:    var(--color-gold);
  --rawsilk: var(--color-raw-silk);
  --dark:    var(--color-charcoal);
  --mid:     var(--color-mid);

  /* Identical-value semantic tokens (--fg-secondary --fg-tertiary
     --bg-surface --shadow-md --border-light --border-medium
     --ease-out --ease-in-out --duration-*) are inherited unchanged
     from css/tokens.css — same values, no re-declaration needed. */

  /* App / layout tokens (no brand equivalent) */
  --nav-h: 64px;
  --radius: var(--radius-md);                  /* 8px */
  --measure: 62ch;
  --measure-narrow: 48ch;
  /* Container caps — §5 tail. Three rungs replace the ad-hoc widths.
     --w-default is canonical; --max-w kept as a back-compat alias. */
  --w-narrow:  720px;
  --w-default: 1180px;
  --w-wide:    1320px;
  --max-w: var(--w-default);
  --eyebrow-size: var(--text-2xs);
  --eyebrow-tracking: var(--tracking-widest);

  /* ─── SECTION & HEADING RHYTHM — single source of truth ───────────────
     Every section's vertical spine and every heading's spacing derive
     from these tokens. Reconciled to the value the pages were actually
     rendering (the old clamp(72,9vw,128) was overridden site-wide by a
     duplicated inline !important block, now deleted). To change global
     rhythm, change it HERE — never re-declare padding on a section,
     component, page, or inline style. */
  --section-y:   clamp(56px, 6.5vw, 96px);
  --section-pad: var(--section-y) var(--space-8);   /* 32px sides */
  --rhythm-eyebrow-title: var(--space-5);           /* 20px */
  --rhythm-title-body:    var(--space-5);           /* 20px */
  --rhythm-body-block:    var(--space-8);           /* 32px */
  --h1-mb:        var(--space-8);                   /* 32px */
  --h2-mb:        var(--space-5);                   /* 20px */
  --h3-mb:        var(--space-3);                   /* 12px */
  --eyebrow-mb:   var(--space-5);                   /* 20px — the ONE eyebrow→title gap */
  --subline-size: clamp(20px, 2.4vw, 28px);

  /* Audience accent — professional default (individual overrides in
     the [data-audience="individual"] block below). */
  --accent:       var(--color-olive);          /* #5E6B22 */
  --accent-light: var(--color-spring);         /* #A8C060 */
  --page-bg:      var(--color-raw-silk);       /* #F2EAD8 */
  --hero-bg:      var(--color-raw-silk);       /* #F2EAD8 */

  /* Rules / on-dark — alpha consolidation deferred to colour pass. */
  --tonal-silk:  var(--color-tonal-silk);      /* #EFE6D2 */
  --rule:        var(--border-light);          /* var(--olive-border) */
  --rule-strong: var(--border-medium);         /* var(--olive-border-strong) */
  --on-dark-1:   var(--color-raw-silk);        /* #F2EAD8 */
  --on-dark-2:   rgba(242, 234, 216, 0.78);
  --on-dark-3:   rgba(242, 234, 216, 0.78);
}

[data-audience="individual"] {
  --accent:       #E0A07A;
  --accent-light: #EEC0A4;
  --page-bg:      #F9F2E8;
  --hero-bg:      #F9F2E8;
}

/* ─── RESET ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--rawsilk);
  color: var(--dark);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

/* ─── UTILITIES ───────────────────────────────────────────── */
.container { max-width: var(--w-default); margin: 0 auto; padding: 0 32px; }

.label {
  font-family: var(--font-body);
  font-size: var(--eyebrow-size);
  font-weight: 500;
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--uguisu);
  display: inline-block;
  margin-bottom: var(--eyebrow-mb);
}
[data-audience="individual"] .label { color: var(--accent); }

/* ─── HEADING SYSTEM — one readable scale, site-wide ──────────────────
   Every heading is Space Grotesk Medium at one section-opener scale.
   The SINGLE exception is .hero-signature — the homepage hero "PerenOS,
   the operating system…" line — the one full-EB-Garamond-italic moment
   on the site. Garamond otherwise appears ONLY as the italic
   .headline-secondary accent clause (single-clause doses, never a whole
   headline). To restyle a level, change it HERE — never per
   page/component/inline. Figure/diagram titles are a separate locked
   family (Space Grotesk Medium upright) — see .ppl-title. */
h1, h2, h2.declarative {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 500;
  line-height: var(--leading-snug);
  font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl));
  letter-spacing: var(--tracking-snug);
  margin-bottom: var(--h2-mb);
}
/* The one full-Garamond signature: homepage hero line only.
   The line break is hard-coded as a <br> in the markup ("PerenOS, the
   operating system" / "for climate-adaptive landscapes") and
   white-space: nowrap on the H1 prevents either half from wrapping
   inside itself — so the layout is EXACTLY 2 lines, full font-size,
   regardless of any inherited column constraint. The clamp pushes the
   size up to text-7xl (72px) at desktop for the "glorious" register
   this single hero line deserves. The phone override below drops
   nowrap so super-narrow viewports can wrap if they have to. */
h1.hero-signature {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  line-height: 1.04;
  font-size: clamp(var(--text-3xl), 5.4vw, var(--text-7xl));
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--h1-mb);
  white-space: nowrap;
}
@media (max-width: 760px) {
  h1.hero-signature {
    white-space: normal;
    font-size: clamp(var(--text-2xl), 7.5vw, var(--text-4xl));
  }
}
/* .page-title removed (2026-05-21): the H1/H2 system was unified so H1 is
   reserved for the hero signature line only ("PerenOS, the operating
   system for climate-adaptive landscapes."). Every other heading is a
   plain h2 — including page openers. The Garamond italic accent now
   sits MID-LINE as an em.headline-secondary key phrase inside the h2,
   rather than as a whole-line page-title above a separate lede. */
.page-lede {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 400;
  color: var(--fg-secondary);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  letter-spacing: var(--tracking-normal);
  margin-top: 14px;
  margin-bottom: var(--h1-mb);
  max-width: 52ch;
}
[data-audience="individual"] .page-lede { color: var(--accent); }
h3 {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 500;
  line-height: var(--leading-snug);
  font-size: clamp(var(--text-base), 2vw, var(--text-2xl));
  letter-spacing: var(--tracking-normal);
  margin-bottom: var(--h3-mb);
}
h4 {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 500;
  line-height: var(--leading-snug);
  font-size: var(--text-base);
}

/* Secondary clause of a section heading — ONE canonical treatment:
   italic EB Garamond accent in olive (pro) / peach (individual via
   data-audience). Renders INLINE so it can sit as the key phrase
   anywhere mid-line in an h2 — beginning, middle, or trailing clause.
   Editorial decision per H2; the CSS rule is one. Use a literal <br>
   inside the h2 if a forced line break is desired. */
em.headline-secondary,
.headline-secondary {
  color: var(--color-olive);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  /* Optical compensation: EB Garamond italic has a markedly smaller
     x-height than Space Grotesk Medium, so at equal computed font-size
     the italic clause reads ~12-15% smaller. Bumping to 1.16em brings
     the two faces to the same optical height inside a single line of
     mixed H2 type. Don't touch line-height — that's set by the H2. */
  font-size: 1.16em;
  line-height: inherit;
  letter-spacing: var(--tracking-snug);
}
[data-audience="individual"] em.headline-secondary,
[data-audience="individual"] .headline-secondary { color: var(--accent); }

p { margin-bottom: 1.25em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
a { color: var(--uguisu); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; transition: text-decoration-color var(--duration-fast, 150ms) var(--ease-out, ease); }
/* Audit 02: hover/focus lift is a 2px spring under-stroke (links that set
   their own text-decoration:none — nav, buttons, pills — are unaffected). */
a:hover, a:focus-visible { text-decoration-color: var(--color-spring); text-decoration-thickness: 2px; }
strong { font-weight: 600; }

/* ─── SKIP LINK (a11y) ────────────────────────────────────── */
.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1000;
  padding: 10px 18px;
  background: var(--rawsilk);
  color: var(--dark);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  border-radius: 4px;
  transform: translateY(-200%);
  transition: transform 150ms var(--ease-out);
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--uguisu);
  outline-offset: 2px;
}
#main:focus { outline: none; }

/* ─── A11Y FOCUS RINGS ────────────────────────────────────── */
/* On-dark nav controls — light ring for contrast on charcoal */
nav a:focus-visible,
#nav-cta-btn:focus-visible,
.nav-burger:focus-visible,
.lang-dd-toggle:focus-visible,
.lang-dd-opt:focus-visible,
.nav-dd-label:focus-visible,
.nav-dd-caret-btn:focus-visible {
  outline: 2px solid var(--rawsilk);
  outline-offset: 2px;
}
/* On-light controls — olive ring */
.tab-btn:focus-visible,
.pressure-header:focus-visible,
.signal-pill:focus-visible {
  outline: 2px solid var(--uguisu);
  outline-offset: 2px;
}

/* ─── BUTTONS ─────────────────────────────────────────────── */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-normal);
  padding: 12px 22px;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--duration-normal) var(--ease-out), color var(--duration-normal) var(--ease-out), border-color var(--duration-normal) var(--ease-out);
  border: 1.5px solid transparent;
  white-space: nowrap;
}
.btn--primary { background: var(--uguisu); color: var(--rawsilk); border-color: var(--uguisu); }
.btn--primary:hover { background: var(--color-olive-pressed); border-color: var(--color-olive-pressed); color: var(--rawsilk); }
[data-audience="individual"] .btn--primary { background: var(--accent); border-color: var(--accent); }
[data-audience="individual"] .btn--primary:hover { background: var(--color-peach-dark); border-color: var(--color-peach-dark); }
.btn--ghost { background: transparent; color: var(--uguisu); border-color: var(--uguisu); }
.btn--ghost:hover { background: var(--olive-tint); color: var(--color-olive-pressed); border-color: var(--color-olive-pressed); }
[data-audience="individual"] .btn--ghost { color: var(--accent); border-color: var(--accent); }
[data-audience="individual"] .btn--ghost:hover { background: transparent; color: var(--color-peach-dark); border-color: var(--color-peach-dark); }
.btn--quiet { background: transparent; color: var(--uguisu); border-color: transparent; padding: 8px 12px; }
.btn--quiet:hover { color: var(--color-olive-pressed); text-decoration: underline; }
[data-audience="individual"] .btn--quiet { color: var(--accent); }
[data-audience="individual"] .btn--quiet:hover { color: var(--color-peach-dark); text-decoration: underline; }

/* ─── NAV ─────────────────────────────────────────────────── */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  border-left: 5px solid var(--uguisu);
}
body.nav-locked { overflow: hidden; }

.nav-top {
  background: var(--dark);
  padding: 0 32px;
  height: 64px;
  display: flex;
  align-items: center;
  transition: padding 300ms var(--ease-in-out), height 300ms var(--ease-in-out);
}

nav.scrolled .nav-top { height: 56px; }
nav.scrolled { border-bottom: 1px solid rgba(168,192,96,0.15); }

/* Wordmark */
.nav-wordmark {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-decoration: none;
  cursor: pointer;
  flex-shrink: 0;
}

.nav-logo-top {
  display: flex;
  align-items: baseline;
  gap: 0;
}

.nav-wm-peren {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 32px;
  color: var(--peach);
  letter-spacing: -0.02em;
  line-height: 1;
  transition: font-size 300ms var(--ease-in-out);
}
.nav-wm-os {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 20px;
  color: var(--spring);
  letter-spacing: 0.02em;
  line-height: 1;
  transition: font-size 300ms var(--ease-in-out);
}

nav.scrolled .nav-wm-peren { font-size: 24px; }
nav.scrolled .nav-wm-os    { font-size: 16px; }

/* Dots — footer only, kept in HTML there */
.nav-wm-dots { display: flex; gap: 5px; align-items: center; margin-left: 10px; }
.nav-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.nav-dot--olive  { background: var(--color-olive); }
.nav-dot--spring { background: var(--color-spring); }
.nav-dot--peach  { background: var(--color-peach); }
.nav-dot--gold   { background: var(--color-gold); }
.nav-dot--silk   { background: var(--color-raw-silk); }

/* Controls — About · EN ▾ · Book a call live here. The `gap`
   token is the single source of truth for spacing between the
   three children, so they're evenly distributed; never add
   margin-{left,right} to one item alone. */
.nav-controls { display: flex; align-items: center; gap: 20px; margin-left: auto; }

nav a, .lang-dd-toggle, .lang-dd-opt, .nav-dd-label, .nav-dd-opt { text-decoration: none; }

/* ─── Language dropdown ───────────────────────────────────────────
   Replaces the EN/FR button pair. GROWTH: a new language is one more
   <li role="option" data-lang="xx"> in the menu markup — no CSS or JS
   change. */
.lang-dd { position: relative; }
.lang-dd-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  padding: 6px 10px;
  border: 1px solid var(--on-dark-hairline);
  background: transparent;
  color: var(--on-dark-2);
  cursor: pointer;
  border-radius: 4px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  transition: color 150ms, border-color 150ms;
}
.lang-dd-toggle:hover { color: var(--rawsilk); border-color: var(--on-dark-line); }
.lang-dd-caret { width: 9px; height: 9px; transition: transform 150ms var(--ease-out); }
.lang-dd[data-open="true"] .lang-dd-caret { transform: rotate(180deg); }
.lang-dd-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 160px;
  list-style: none;
  margin: 0;
  padding: 6px;
  background: var(--dark);
  border: 1px solid var(--on-dark-line);
  border-radius: 6px;
  box-shadow: var(--shadow-lg);
  display: none;
  z-index: 1100;
}
.lang-dd[data-open="true"] .lang-dd-menu { display: block; }
.lang-dd-menu li { margin: 0; }
.lang-dd-opt {
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  padding: 9px 12px;
  border: none;
  background: transparent;
  color: var(--on-dark-2);
  cursor: pointer;
  border-radius: 4px;
  transition: background 150ms, color 150ms;
}
.lang-dd-opt:hover { background: var(--on-dark-hairline); color: var(--rawsilk); }
.lang-dd-opt[aria-selected="true"] { color: var(--spring); }

/* ─── Audience dropdowns ─────────────────────────────────────────
   Two audience triggers (Professionals / Individuals) live in
   .nav-primary. Each trigger is split into two interactive
   elements that visually read as one unit:

     .nav-dd-label     — a real <a> that navigates to the audience
                          landing page (index.html, individual.html)
     .nav-dd-caret-btn — a small <button> that toggles the menu

   The split lets desktop users hover-open the menu while click
   navigates, and gives touch users a discrete caret target that
   opens the menu without forcing navigation. GROWTH: a third
   audience is one more .nav-dd block — no CSS change. */
.nav-dd { position: relative; display: inline-flex; align-items: center; gap: 2px; }
.nav-dd-label {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 0.01em;
  color: var(--on-dark-2);
  padding: 6px 1px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 150ms var(--ease-out), border-color 150ms var(--ease-out);
}
.nav-dd-label:hover { color: var(--rawsilk); }
.nav-dd-caret-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--on-dark-2);
  padding: 6px 4px;
  cursor: pointer;
  transition: color 150ms var(--ease-out);
}
.nav-dd-caret-btn:hover { color: var(--rawsilk); }
.nav-dd-caret { width: 9px; height: 9px; transition: transform 150ms var(--ease-out); }
.nav-dd[data-open="true"] .nav-dd-caret,
.nav-dd-caret-btn[aria-expanded="true"] .nav-dd-caret { transform: rotate(180deg); }

/* Active state — current audience highlights the LABEL via the
   html element's data-audience attr. Caret follows the colour but
   not the underline (the underline is a destination cue and the
   caret is a control, not a destination). About is a separate
   link and never lights up either trigger. */
[data-audience="professional"] #nav-dd-pro-label,
[data-audience="individual"]   #nav-dd-ind-label {
  color: var(--rawsilk);
  font-weight: 500;
  border-bottom-color: var(--color-spring);
}
[data-audience="professional"] #nav-dd-pro .nav-dd-caret-btn,
[data-audience="individual"]   #nav-dd-ind .nav-dd-caret-btn {
  color: var(--rawsilk);
}
nav.scrolled .nav-dd-label,
nav.scrolled .nav-dd-caret-btn { color: var(--on-dark-body, rgba(242,234,216,.78)); }
nav.scrolled [data-audience="professional"] #nav-dd-pro-label,
nav.scrolled [data-audience="individual"]   #nav-dd-ind-label,
nav.scrolled [data-audience="professional"] #nav-dd-pro .nav-dd-caret-btn,
nav.scrolled [data-audience="individual"]   #nav-dd-ind .nav-dd-caret-btn,
nav.scrolled .nav-dd-label:hover,
nav.scrolled .nav-dd-caret-btn:hover { color: var(--rawsilk); }

.nav-dd-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 200px;
  list-style: none;
  margin: 0;
  padding: 6px;
  background: var(--dark);
  border: 1px solid var(--on-dark-line);
  border-radius: 6px;
  box-shadow: var(--shadow-lg);
  display: none;
  z-index: 1100;
}
/* Invisible hover-bridge across the 6px visual gap between the
   toggle and the menu. Without this, moving the cursor from the
   toggle down to a menu item passes through a dead zone where
   neither element is :hover'd and the menu collapses before the
   user can click an item. The bridge fills the gap plus 1px of
   slack into the toggle so there's no boundary-pixel dropout. */
.nav-dd-menu::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 0;
  right: 0;
  height: 7px;
  background: transparent;
}
.nav-dd[data-open="true"] .nav-dd-menu { display: block; }
/* Desktop: hover anywhere on the .nav-dd opens the menu too — JS
   still handles click/keyboard for touch and a11y. */
@media (hover: hover) and (pointer: fine) {
  .nav-dd:hover .nav-dd-menu { display: block; }
  .nav-dd:hover .nav-dd-caret { transform: rotate(180deg); }
}
.nav-dd-menu li { margin: 0; }
.nav-dd-opt {
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  padding: 9px 12px;
  border: none;
  background: transparent;
  color: var(--on-dark-2);
  cursor: pointer;
  border-radius: 4px;
  transition: background 150ms, color 150ms;
}
.nav-dd-opt:hover { background: var(--on-dark-hairline); color: var(--rawsilk); }
.nav-dd-opt[aria-current="page"] { color: var(--spring); }

/* ─── About — utility-cluster link ───────────────────────────────
   About lives in .nav-controls alongside EN + the CTA, not in
   .nav-primary with the audience dropdowns. It's a company-level
   destination, not a product nav target, so it gets a quieter
   visual treatment: smaller font, no spring-underline active
   state. aria-current="page" still set on /about for assistive
   tech, and CSS lightens the colour as the only visual cue. */
.nav-about,
.nav-research {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--on-dark-2);
  text-decoration: none;
  padding: 6px 4px;
  transition: color 150ms var(--ease-out);
}
.nav-about:hover,
.nav-research:hover { color: var(--rawsilk); }
.nav-about[aria-current="page"],
.nav-research[aria-current="page"] { color: var(--rawsilk); }
nav.scrolled .nav-about,
nav.scrolled .nav-research { color: var(--on-dark-body, rgba(242,234,216,.78)); }
nav.scrolled .nav-about:hover,
nav.scrolled .nav-research:hover,
nav.scrolled .nav-about[aria-current="page"],
nav.scrolled .nav-research[aria-current="page"] { color: var(--rawsilk); }

/* ─── Phone hamburger (3 lines) ───────────────────────────────────
   Hidden on desktop; the ≤760 block turns it on and routes the whole
   nav (links + audience + language + CTA) through the toggled panel. */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 10px;
  border: none;
  background: transparent;
  cursor: pointer;
}
.nav-burger span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--on-dark-1);
  border-radius: 2px;
  transition: transform 200ms var(--ease-out), opacity 150ms var(--ease-out);
}
nav.nav-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
nav.nav-open .nav-burger span:nth-child(2) { opacity: 0; }
nav.nav-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Nav CTA */
.nav-cta { flex-shrink: 0; }
.nav-cta .btn {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-normal);
}
.nav-cta .btn--primary { background: var(--uguisu); border-color: var(--uguisu); color: var(--rawsilk); }
.nav-cta .btn--primary:hover { background: var(--color-olive-pressed); border-color: var(--color-olive-pressed); color: var(--rawsilk); }

/* ─── Header rail ─────────────────────────────────────────────────
   Single-row dark nav (.nav-top): wordmark · audience dropdowns +
   About · EN/FR + CTA. The old .nav-sub audience-toggle row was
   collapsed into the Professionals/Individuals dropdowns in May
   2026 — one row, two menus, one shared About link. */
.nav-primary {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.2vw, 32px);
  margin: 0 auto;
  padding: 0 24px;
  font-family: var(--font-body);
}
.nav-primary .nav-page-link {
  font-size: 14px;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--on-dark-2);
  padding: 6px 1px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 150ms var(--ease-out), border-color 150ms var(--ease-out);
}
.nav-primary .nav-page-link:hover { color: var(--rawsilk); }
.nav-primary .nav-page-link.active {
  color: var(--rawsilk);
  font-weight: 500;
  border-bottom-color: var(--color-spring);
}

/* ─── PHONE NAV — hamburger panel (≤760) ──────────────────────────
   The compact bar shows wordmark + 3-line burger only. Tapping it
   opens a stacked panel carrying the full nav: section links, the
   audience toggle, the language dropdown and the CTA. One systemic
   block — a new nav control inherits the panel layout, no new rule. */
@media (max-width: 760px) {
  nav { position: fixed; }
  .nav-top { height: 56px; padding: 0 16px; }
  .nav-burger { display: flex; }

  /* Collapsed: everything but the bar is hidden */
  .nav-primary, .nav-controls { display: none; }

  /* Open: the nav grows into a full-width dark sheet. Cap it at the
     dynamic viewport height and scroll internally — without this the
     bottom items (language dropdown when expanded, Contact us CTA) fall
     below the fold on shorter phones with no way to reach them. dvh
     accounts for mobile browser chrome; vh is the fallback. */
  nav.nav-open {
    max-height: 100vh;
    max-height: 100dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  nav.nav-open .nav-top { height: auto; flex-wrap: wrap; padding-bottom: 14px; }
  nav.nav-open .nav-primary {
    display: flex; order: 3;
    flex-direction: column; align-items: stretch;
    width: 100%; gap: 0;
    margin: 10px 0 0; padding: 8px 0 0;
    border-top: 1px solid var(--on-dark-hairline);
  }
  nav.nav-open .nav-primary .nav-page-link {
    padding: 14px 2px;
    border-bottom: none;
    border-left: 3px solid transparent;
    padding-left: 12px;
  }
  nav.nav-open .nav-primary .nav-page-link.active {
    border-bottom: none;
    border-left-color: var(--color-spring);
  }
  /* Dropdowns flatten into labelled sections in the burger panel —
     the audience LABEL still navigates to the audience landing
     page (so users can tap "PROFESSIONALS" to reach Platform); it
     just looks like a section heading. The caret button is hidden
     because the menu is always-open in the burger panel.
     Both labels stay bright (not just the active audience) and carry
     their brand-colour underline — real users on phone were missing
     the Individual section entirely when the heading sat in a muted
     gray on dark. Spring = Professionals, Peach = Individuals. */
  nav.nav-open .nav-dd { display: block; width: 100%; }
  nav.nav-open .nav-dd-label {
    display: inline-block;
    width: auto;
    padding: 0 2px 6px 0;
    margin: 14px 0 6px 12px;
    border-bottom: 2px solid transparent;
    color: var(--rawsilk);
    font-size: 13px;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    font-weight: 600;
  }
  nav.nav-open #nav-dd-pro-label { border-bottom-color: var(--color-spring); }
  nav.nav-open #nav-dd-ind-label { border-bottom-color: var(--color-peach); }
  nav.nav-open .nav-dd-caret-btn { display: none; }
  nav.nav-open .nav-dd-menu {
    display: block;
    position: static;
    min-width: 0;
    margin: 0 0 6px;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
  }
  nav.nav-open .nav-dd-opt {
    padding: 12px 12px 12px 24px;
    border-left: 3px solid transparent;
    border-radius: 0;
    font-size: 14px;
    /* Tap-target rule centres dropdown items on phones via
       justify-content; in the stacked burger panel we want
       left-aligned indented links instead. */
    justify-content: flex-start;
  }
  nav.nav-open .nav-dd-opt[aria-current="page"] {
    border-left-color: var(--color-spring);
    color: var(--rawsilk);
  }
  nav.nav-open .nav-controls {
    display: flex; order: 4;
    flex-direction: column; align-items: stretch;
    width: 100%; gap: 14px; margin: 14px 0 0;
  }
  /* About reads as a primary destination on phones (the only one
     not behind a dropdown), so it adopts the .nav-page-link
     burger-row styling rather than its quiet desktop treatment. */
  nav.nav-open .nav-about,
  nav.nav-open .nav-research {
    padding: 14px 2px 14px 12px;
    border-left: 3px solid transparent;
    font-size: 14px;
    letter-spacing: 0;
  }
  nav.nav-open .nav-about[aria-current="page"],
  nav.nav-open .nav-research[aria-current="page"] {
    border-left-color: var(--color-spring);
    color: var(--rawsilk);
  }
  nav.nav-open .lang-dd { margin: 0; }
  nav.nav-open .lang-dd-menu { position: static; min-width: 0; margin-top: 6px; }
  nav.nav-open .nav-cta { width: 100%; }
  nav.nav-open .nav-cta .btn { display: block; text-align: center; }

  /* Compact fixed bar reclaims its offset (it was dropped only for the
     old in-flow multi-row header). */
  .page-offset { padding-top: 56px; }
}