/* Local-only font faces. Paths are relative to this exported css/web.css. */
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/web/archivo-700.woff2?v=__ITHAKA_VERSION__') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/web/archivo-800.woff2?v=__ITHAKA_VERSION__') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Public Sans';
  src: url('../fonts/web/publicsans-400.woff2?v=__ITHAKA_VERSION__') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Public Sans';
  src: url('../fonts/web/publicsans-600.woff2?v=__ITHAKA_VERSION__') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/web/plexmono-400.woff2?v=__ITHAKA_VERSION__') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/web/plexmono-500.woff2?v=__ITHAKA_VERSION__') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/web/plexmono-600.woff2?v=__ITHAKA_VERSION__') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   ITHAKA — MONOCHROME / NAVY / DARK YELLOW
   --------------------------------------------------------------------------
   Colour has exactly three jobs and never more:
     ink   — navy-black. All type and all rules. Replaces black entirely.
     navy  — true structural navy. Institutional marks only.
     mark  — dark yellow. Marks MOVEMENT. Always a fill under ink type,
             never type on white (that direction fails contrast at 2.9:1).
   ========================================================================== */

:root {
  /* — type ————————————————————————————————————————————————— */
  --f-display: 'Archivo', -apple-system, BlinkMacSystemFont, sans-serif;
  --f-body:    'Public Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --f-data:    'IBM Plex Mono', ui-monospace, monospace;

  /* — colour ————————————————————————————————————————————————— */
  --paper:      #FFFFFF;
  --paper-2:    #F6F7F9;   /* recessed panels                        */
  --ink:        #101A2E;   /* 17.4:1 on paper — all type, all rules  */
  --ink-2:      #3E4A61;   /*  8.9:1 — secondary prose               */
  --ink-3:      #6B7689;   /*  4.6:1 — metadata, still AA            */
  --rule:       #101A2E;
  --rule-faint: #D8DCE3;

  --navy:       #1B3A6B;   /* 11.3:1 on paper                        */
  --mark:       #D99C00;   /* fill only — ink on mark = 7.2:1        */
  --mark-ink:   #8A6200;   /* 5.5:1 — the rare case yellow is type   */
  --on-ink:     #FFFFFF;

  /* — metrics ———————————————————————————————————————————————— */
  --wrap:  1180px;
  --gutter: 28px;
  --hair:  1px;
  --sec-y: clamp(72px, 9vw, 128px);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t:    0.2s var(--ease);
}

/* Same system, navy ground. Exploration only: index.html?theme=inverse */
[data-theme="inverse"] {
  --paper:      #0C1526;
  --paper-2:    #14203A;
  --ink:        #F2F5FA;
  --ink-2:      #A9B4C7;
  --ink-3:      #7E8CA3;   /* 4.9:1 on this ground */
  --rule:       #F2F5FA;
  --rule-faint: #2A3A58;
  --navy:       #9FB8E0;
  --mark:       #E8B10A;
  --mark-ink:   #E8B10A;
  --on-ink:     #0C1526;
}

/* ==========================================================================
   RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
em { font-style: italic; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--mark-ink);
  outline-offset: 3px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--gutter); top: -100px; z-index: 999;
  background: var(--ink); color: var(--on-ink);
  padding: 12px 20px; font-weight: 600; text-decoration: none;
  transition: top var(--t);
}
.skip-link:focus { top: 12px; }

/* ==========================================================================
   LAYOUT PRIMITIVES
   Everything on the page aligns to the left edge of .wrap. No exceptions —
   that single rule is what makes a document read as a document.
   ========================================================================== */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

section {
  padding-block: var(--sec-y);
  border-top: var(--hair) solid var(--rule);
  scroll-margin-top: 84px;
}
.hero { border-top: 0; }

/* ==========================================================================
   TYPE SCALE
   ========================================================================== */
h1, h2, h3 {
  font-family: var(--f-display);
  font-weight: 800;
  letter-spacing: -0.028em;
  line-height: 1.06;
}

h1 { font-size: clamp(2.5rem, 4.6vw, 3.9rem); }

h2 {
  font-size: clamp(1.85rem, 3vw, 2.55rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
}

h3 {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.lead {
  font-size: clamp(1.05rem, 1.35vw, 1.18rem);
  line-height: 1.62;
  color: var(--ink-2);
  max-width: 62ch;
}

.eyebrow {
  font-family: var(--f-data);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.sec-head { margin-bottom: clamp(40px, 5vw, 64px); }
.sec-head .eyebrow { margin-bottom: 14px; }
.sec-head h2 { margin-bottom: 18px; max-width: 20ch; }

.footnote {
  font-family: var(--f-data);
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--ink-3);
  margin-top: 28px;
}
.fn-ref { color: inherit; text-decoration: none; border-bottom: var(--hair) solid currentColor; }

/* ==========================================================================
   THE MARK — yellow only ever means "this moved"
   ========================================================================== */
.mark {
  font-family: var(--f-data);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background-image: linear-gradient(var(--mark), var(--mark));
  background-repeat: no-repeat;
  background-position: 0 58%;
  background-size: 100% 1.15em;
  padding-inline: 0.22em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* .mark is data/mono; .highlighter preserves copy typography for one short
   movement phrase. */
.highlighter {
  font-family: inherit;
  font-weight: inherit;
  font-variant-numeric: inherit;
  color: var(--ink);
  background-image: linear-gradient(var(--mark), var(--mark));
  background-repeat: no-repeat;
  background-position: 0 61%;
  background-size: 100% 0.92em;
  padding-inline: 0.07em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ==========================================================================
   BUTTONS
   .nav-cta is given the same specificity as .nav-list a so colour can't be
   stolen back by the nav's own link rule.
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 14px 26px;
  border: var(--hair) solid var(--ink);
  border-radius: 0;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t), color var(--t), transform var(--t), box-shadow var(--t);
}

.btn-primary,
.nav .btn-primary {
  background: var(--ink);
  color: var(--on-ink);
  box-shadow: 4px 4px 0 var(--mark);
}
.btn-primary:hover,
.nav .btn-primary:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--mark);
}
.btn-primary:active,
.nav .btn-primary:active {
  transform: translate(0, 0);
  box-shadow: 2px 2px 0 var(--mark);
}

.btn-quiet,
.nav .btn-quiet {
  background: transparent;
  color: var(--ink);
}
.btn-quiet::after { content: "→"; font-family: var(--f-data); }
.btn-quiet:hover { background: var(--paper-2); }

.btn-sm { padding: 10px 18px; font-size: 0.875rem; }

.actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }

/* ==========================================================================
   HEADER / NAV
   ========================================================================== */
.site-head {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
  border-bottom: var(--hair) solid var(--rule);
}

.head-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 72px;
}

.brand {
  display: inline-flex;
  align-items: center;
  /* The lockup gap is 0.48 x cap height, the width of the mark's own counter
     (see brand/build.py GAP_RATIO). Measured optically, mark edge to the I stem,
     so subtract the I's left sidebearing: 0.48*15.5 - 75/686*15.5 = 5.75px. */
  gap: 5.75px;
  text-decoration: none;
  flex-shrink: 0;
}
.brand-name {
  font-family: var(--f-display);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}
/* Mark height is Archivo's cap height at 1.35rem (cap ratio 0.714 x 21.6px),
   so the mark and the wordmark share a top and a baseline. */
.brand-mark {
  display: block;
  height: 15.5px;
  width: auto;
  flex-shrink: 0;
}
[data-theme="inverse"] .brand-mark {
  content: url('../assets/mark-reverse.svg?v=__ITHAKA_VERSION__');
}
.nav { display: flex; align-items: center; gap: 32px; }

.nav-list {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
}
.nav-list a {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  padding-block: 6px;
  border-bottom: 2px solid transparent;
  transition: color var(--t), border-color var(--t);
}
.nav-list a:hover { color: var(--ink); border-bottom-color: var(--mark); }
.nav-list a[aria-current="true"] { color: var(--ink); border-bottom-color: var(--mark); }

/* Language selector. Mono, uppercase, tiny — structural notation, not a control
   panel. No flags (Portuguese has two of them) and no globe icon. The current
   language carries the same yellow underline the current nav item does, so the
   two states are learned once. Lives outside .nav-list, so `.nav-list a` (0-1-1)
   can't reach it — see the note above .btn. */
.lang {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--f-data);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
}
.lang a,
.lang span[aria-current] {
  padding-block: 6px;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--t), border-color var(--t);
}
.lang a { color: var(--ink-3); }
.lang a:hover { color: var(--ink); border-bottom-color: var(--mark); }
.lang span[aria-current] { color: var(--ink); border-bottom-color: var(--mark); }
.lang-sep { color: var(--rule); }

.foot-lang { font-size: 0.72rem; }
.foot-lang a,
.foot-lang span[aria-current] { padding-block: 0; }

.nav-toggle {
  display: none;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: var(--hair) solid var(--ink);
  color: var(--ink);
  font-family: var(--f-data);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 9px 14px;
  cursor: pointer;
}
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block; width: 16px; height: 2px;
  background: currentColor;
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before,
.nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -5px; }
.nav-toggle-bars::after  { top: 5px; }

/* ==========================================================================
   HERO — one statement, set full width. The title page of the document.
   ========================================================================== */
.hero { padding-block: clamp(72px, 10vw, 132px) clamp(80px, 11vw, 148px); }

/* The measure sets the shape; `balance` stops the last line orphaning a word.
   It matters most in PT, which runs longer and breaks more raggedly than the
   English at the same measure. Unsupported browsers just wrap normally. */
.hero-claim h1 {
  font-size: clamp(2.6rem, 6.4vw, 5rem);
  max-width: 17ch;
  margin-bottom: 32px;
  text-wrap: balance;
}
.hero-claim .lead { max-width: 58ch; }

/* ==========================================================================
   WHY NOW — the 88/12 split, drawn to scale
   ========================================================================== */
.split { margin: 0; }
.split-cap { margin-bottom: 20px; }

/* The two ends, each anchored over its own segment of the bar. */
.split-ends {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 10px;
}

.split-bar {
  display: flex;
  height: 52px;
  border: var(--hair) solid var(--ink);
}
.split-seg-passive {
  flex: 88;
  background:
    repeating-linear-gradient(-45deg,
      var(--rule-faint) 0 1px, transparent 1px 7px);
}
.split-seg-marked {
  flex: 12;
  background: var(--mark);
  border-left: var(--hair) solid var(--ink);
}

/* The argument: everything above is a starting point and a destination,
   and the arrow between them is what Ithaka sells. */
.split-move {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
}
.split-move-label {
  font-family: var(--f-data);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.split-move-rule {
  flex: 1;
  height: var(--hair);
  background: var(--ink);
}
.split-move-arrow {
  width: 0;
  height: 0;
  margin-left: -14px;
  border-left: 9px solid var(--ink);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

.split-legend {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 56px);
  margin-top: 40px;
}
.split-item p { color: var(--ink-2); font-size: 0.97rem; max-width: 46ch; }
.split-pct {
  font-family: var(--f-display);
  font-size: clamp(2.4rem, 4.5vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}
.split-pct .mark { background-size: 100% 0.82em; background-position: 0 62%; }
.split-item h3 { margin-bottom: 10px; }

/* The marked legend item is the destination the 12% names. Yellow is the only
   thing that ties them together — the bar's proportions put the 12% segment at
   the far right, nowhere near the column that explains it. So the mark carries
   the link: three yellow things on this side of the figure, none on the other.
   The heading keeps display type; only the fill is borrowed from .mark. */
.split-item-marked h3 .mark {
  font-family: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  background-size: 100% 0.9em;
  background-position: 0 64%;
}

/* ==========================================================================
   APPROACH — three steps
   ========================================================================== */
.spine {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  list-style: none;
  border-top: 2px solid var(--rule);
}
.spine-step {
  padding: 30px 32px 40px 0;
  border-right: var(--hair) solid var(--rule-faint);
}
.spine-step:first-child { padding-left: 0; }
.spine-step:not(:first-child) { padding-left: 32px; }
.spine-step:last-child { border-right: 0; padding-right: 0; }

.step-no {
  font-family: var(--f-data);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 20px;
}
.spine-step h3 { margin-bottom: 12px; }
.spine-step p { color: var(--ink-2); font-size: 0.97rem; }

/* Mandate shapes. Deliberately NOT a second three-column grid: repeating the
   spine's form directly under the spine is the uniformity the copy rules warn
   about. Stacked at one measure, on the same left edge. */
/* The rule runs the full column width so it stacks cleanly under the spine's
   own rule; only the prose is held to a reading measure. */
.mandates {
  margin-top: clamp(48px, 6vw, 72px);
  padding-top: 28px;
  border-top: 2px solid var(--rule);
}
.mandates > * { max-width: 72ch; }
.mandates .eyebrow { margin-bottom: clamp(26px, 3vw, 34px); }

.mandate + .mandate { margin-top: 26px; }
.mandate h3 {
  font-size: 1.12rem;
  line-height: 1.3;
  margin-bottom: 8px;
}
.mandate p { color: var(--ink-2); font-size: 0.97rem; }

/* ==========================================================================
   WHO WE SERVE — two doors, equal weight, both with a way through
   ========================================================================== */
.doors {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 40px);
}
.door {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border: var(--hair) solid var(--ink);
  border-top: 4px solid var(--navy);
  padding: clamp(28px, 3vw, 40px);
}
.door h3 { font-size: clamp(1.3rem, 1.9vw, 1.6rem); margin-bottom: 16px; }
.door > p { color: var(--ink-2); margin-bottom: 24px; }

.door-note {
  border-top: var(--hair) solid var(--rule-faint);
  padding-top: 16px;
  margin-bottom: 28px;
}
.door-note dt {
  font-family: var(--f-data);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px;
}
.door-note dd { font-size: 0.94rem; color: var(--ink-2); }

.door-cta {
  margin-top: auto;
  font-family: var(--f-data);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 2px solid var(--mark);
  padding-bottom: 2px;
}
.door-cta::after { content: " →"; }
.door-cta:hover { background: var(--mark); }

/* ==========================================================================
   TRACK RECORD — the operating years, inside Team
   These are roles Ricardo held, not mandates Ithaka ran. That is why the block
   lives under the bio and why the role sits on the same row as the company:
   the attribution has to be unmissable at a glance. One metric per role — the
   case-record form these came from is in git history if it's ever wanted back.
   ========================================================================== */
.track {
  margin-top: clamp(44px, 5vw, 60px);
  max-width: 900px;
}
.track .eyebrow { margin-bottom: 16px; }

.track-list { border-top: 2px solid var(--rule); }

.track-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 6px clamp(24px, 3vw, 44px);
  align-items: baseline;
  padding: 16px 0;
  border-bottom: var(--hair) solid var(--rule-faint);
}

.track-co { font-weight: 600; }
.track-role {
  display: block;
  font-family: var(--f-data);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 3px;
}

.track-metric {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
}
.track-label {
  flex: 0 0 clamp(150px, 17vw, 200px);
  font-size: 0.94rem;
  color: var(--ink-2);
}

/* The consulting years carry real figures, but they were advice, not owned
   outcomes — so they sit outside the marked column deliberately. */
.prior {
  margin-top: clamp(40px, 5vw, 56px);
  padding-top: 24px;
  border-top: var(--hair) solid var(--rule-faint);
  max-width: 74ch;
}
.prior .eyebrow { margin-bottom: 10px; }
.prior p { font-size: 0.97rem; color: var(--ink-2); }
.prior strong {
  font-family: var(--f-data);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* ==========================================================================
   TEAM
   ========================================================================== */
.bio { max-width: 68ch; }
.bio h3 { margin-bottom: 20px; }
.bio-role {
  display: block;
  font-family: var(--f-data);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 8px;
}
.bio p { color: var(--ink-2); margin-bottom: 18px; }
.bio-note { margin-top: 32px; margin-bottom: 0; }

/* ==========================================================================
   START — three ways to reach a person, as full-width records
   ========================================================================== */
.contact { list-style: none; border-top: 2px solid var(--rule); }

.contact a {
  display: flex;
  align-items: baseline;
  gap: clamp(16px, 4vw, 48px);
  padding: clamp(20px, 2.4vw, 28px) 0;
  border-bottom: var(--hair) solid var(--rule-faint);
  text-decoration: none;
  transition: background-color var(--t), padding-inline var(--t);
}
.contact a:hover {
  background: var(--paper-2);
  padding-inline: 16px;
}

.contact-label {
  flex: 0 0 clamp(96px, 12vw, 160px);
  font-family: var(--f-data);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.contact-value {
  font-family: var(--f-display);
  font-size: clamp(1.15rem, 2.2vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  word-break: break-word;
}

.contact a::after {
  content: "→";
  margin-left: auto;
  font-family: var(--f-data);
  font-size: 1.1rem;
  color: var(--ink-3);
  transition: color var(--t), transform var(--t);
}
.contact a:hover::after { color: var(--ink); transform: translateX(4px); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-foot {
  border-top: var(--hair) solid var(--rule);
  padding-block: 48px;
}
.foot-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px 32px;
}
.foot-brand {
  font-family: var(--f-display);
  font-weight: 800;
  letter-spacing: 0.02em;
}
.foot-legal {
  margin-left: auto;
  font-family: var(--f-data);
  font-size: 0.75rem;
  color: var(--ink-3);
}

/* ==========================================================================
   MOTION — one orchestrated moment: the mark wipes in under the number
   --------------------------------------------------------------------------
   Everything below is opt-in. The resting state of the page IS the finished
   state, so no-JS and reduced-motion visitors are never left with a hidden
   element — and no override can lose a specificity fight to a hiding rule.
   JS adds [data-anim] to <html> only when motion is welcome.
   ========================================================================== */
[data-anim] .reveal .mark { background-size: 0% 1.15em; }

[data-anim] .reveal.is-in .mark {
  background-size: 100% 1.15em;
  transition: background-size 0.55s var(--ease);
}

[data-anim] .split-bar.reveal .split-seg-marked {
  transform: scaleX(0);
  transform-origin: left;
}
[data-anim] .split-bar.is-in .split-seg-marked {
  transform: scaleX(1);
  transition: transform 0.6s var(--ease) 0.1s;
}

/* No stagger rule here any more: each track row carries one metric and is its
   own .reveal, so the column staggers itself as the rows scroll into view. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .btn-primary:hover,
  .nav .btn-primary:hover { transform: none; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* — nav collapses well before it can overflow ——————————————————— */
@media (max-width: 1020px) {
  .nav-toggle { display: inline-flex; }

  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: var(--hair) solid var(--rule);
    padding: 8px var(--gutter) 24px;
  }
  .site-head[data-open="true"] .nav { display: flex; }
  .site-head { position: sticky; }
  .head-inner { position: relative; }

  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list a {
    display: block;
    padding-block: 14px;
    font-size: 1.05rem;
    border-bottom: var(--hair) solid var(--rule-faint);
  }
  .nav-list a:hover { border-bottom-color: var(--mark); }
  .nav-cta { margin-top: 24px; justify-content: center; }
  .nav .lang { margin-top: 18px; justify-content: flex-start; }
}

@media (max-width: 900px) {
  .hero-claim h1 { max-width: 18ch; }

  .spine { grid-template-columns: minmax(0, 1fr); }
  .spine-step {
    padding: 26px 0 30px;
    border-right: 0;
    border-bottom: var(--hair) solid var(--rule-faint);
  }
  .spine-step:not(:first-child) { padding-left: 0; }
  .spine-step:last-child { border-bottom: 0; }

  .doors { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .split-legend { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .foot-legal { margin-left: 0; }

  /* Label above value — the row can't hold both side by side. */
  .contact a { flex-wrap: wrap; gap: 4px 16px; }
  .contact-label { flex: 0 0 100%; }
  .contact a::after { margin-left: auto; }

  /* Track rows stack: company and role, then metric label over value. */
  .track-row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .track-label { flex: 0 0 100%; }

  /* The mandate descriptions get their own line off the heading. */
  .mandate h3 { font-size: 1.05rem; }
}