/* self-hosted fonts (Geist and Geist Mono, SIL Open Font License, files under /assets/fonts) */
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 300 800; font-display: swap; src: url(/assets/fonts/Geist-300-800-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 300 800; font-display: swap; src: url(/assets/fonts/Geist-300-800-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Geist Mono is one variable file per range (wght axis 100-900); 400 and 500 are instances of it. */
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400 500; font-display: swap; src: url(/assets/fonts/GeistMono-400-500-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400 500; font-display: swap; src: url(/assets/fonts/GeistMono-400-500-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* end fonts */
/* ===================================================================
   HIELUX ADVISORY — site.css v3.1 · Carbon
   Ink and paper. Photography and charts are the only colour.
   One family: Geist for everything, Geist Mono for data. Quiet scale.
   =================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  --ink: #141414;
  --ink-2: #3A3A3A;
  --ink-3: #6B6B69;
  --line: #E3E3E0;
  --line-2: #C9C9C6;
  --field-line: #8C8C89;
  --paper: #F7F7F5;
  --paper-2: #EFEFEC;
  --white: #FFFFFF;

  /* data palette: the only colour the brand uses, and only in charts */
  --data-1: #1F5E9E;
  --data-2: #C89B3C;
  --data-3: #B5B5B2;
  --data-4: #6B9AC4;
  --data-neg: #B8412E;
  --data-1-soft: rgba(31, 94, 158, 0.12);

  --font-display: 'Geist', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-body: 'Geist', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: 'Geist Mono', 'SF Mono', Menlo, Consolas, monospace;

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --container: 1240px;
  --gutter: clamp(20px, 4vw, 48px);
  --prose: 62ch;
  --nav-h: 60px;

  --bg: var(--white);
  --bg-2: var(--paper);
  --fg: var(--ink);
  --fg-2: var(--ink-2);
  --fg-3: var(--ink-3);
  --rule: var(--line);
  --rule-2: var(--line-2);
}
.on-dark, [data-theme="dark"] {
  --bg: var(--ink);
  --bg-2: #1E1E1D;
  --fg: #F3F3F1;
  --fg-2: rgba(243, 243, 241, 0.82);
  --fg-3: rgba(243, 243, 241, 0.6);
  --rule: rgba(243, 243, 241, 0.16);
  --rule-2: rgba(243, 243, 241, 0.32);
  --data-3: rgba(243, 243, 241, 0.35);
  --data-1-soft: rgba(107, 154, 196, 0.2);
  color: var(--fg);
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* the header is sticky, so anchors and focus targets have to clear it */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 16px); }
html:focus-within { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--data-1); outline-offset: 3px; }
/* the blue ring falls below 3:1 on the dark surfaces, so those get the paper colour instead */
/* a modal is not on this list: its scrim is dark but every control sits on the white card */
.on-dark :focus-visible, .hero :focus-visible, .page-hero :focus-visible, .cta :focus-visible, .footer :focus-visible, .nav-mega-card :focus-visible, .thesis :focus-visible, .identity-strip :focus-visible, .lang-hint :focus-visible { outline-color: #F3F3F1; }
.skip-link { position: absolute; left: 8px; top: -60px; z-index: 1000; background: var(--ink); color: #fff; padding: 10px 14px; font-size: 14px; }
.skip-link:focus { top: 8px; }
#main:focus { outline: none; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.container--narrow > * { max-width: 880px; }
/* prose pages keep the site's left rail; the measure is set on the children, not the container */
.container--prose { max-width: var(--container); }
.container--prose > * { max-width: 800px; }
.container--prose > .lead { max-width: var(--prose); }
hr { border: 0; border-top: 1px solid var(--rule); margin: 32px 0; }

/* ---------- 3. Type: quiet scale ---------- */
h1, h2, h3, .h1 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.022em;
  margin: 0 0 0.45em;
  text-wrap: balance;
}
h1, .h1 { font-size: clamp(32px, 4vw, 56px); line-height: 1.04; letter-spacing: -0.028em; }
h2 { font-size: clamp(26px, 2.8vw, 38px); }
h3 { font-size: clamp(19px, 1.6vw, 23px); line-height: 1.2; letter-spacing: -0.012em; }
h4 { font-family: var(--font-body); font-weight: 600; font-size: 16px; margin: 0 0 0.4em; }
p { margin: 0 0 1em; }
.lead { font-size: clamp(16.5px, 1.25vw, 18.5px); line-height: 1.5; color: var(--fg-2); max-width: var(--prose); }
.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin: 0 0 12px;
}
.eyebrow--light { color: rgba(255, 255, 255, 0.78); }
.mono { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.02em; }
.muted { color: var(--fg-3); }
.small { font-size: 14px; }
strong, b { font-weight: 600; }
ul, ol { padding-left: 1.2em; margin: 0 0 1em; }
li { margin: 0 0 0.35em; }
.link-list { list-style: none; padding: 0; margin: 20px 0 0; max-width: var(--prose); }
.link-list li { border-top: 1px solid var(--rule); padding: 12px 0; margin: 0; }
.link-list li:last-child { border-bottom: 1px solid var(--rule); }
.link-list a { text-decoration: none; font-weight: 500; }
.link-list a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 4. Buttons & links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 20px;
  border: 1px solid transparent;
  font-family: var(--font-body); font-weight: 500; font-size: 14.5px; line-height: 1; letter-spacing: -0.005em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.25s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-primary:hover { background: #000; border-color: #000; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-ghost-light { background: rgba(255, 255, 255, 0.06); color: #fff; border-color: rgba(255, 255, 255, 0.55); backdrop-filter: blur(4px); }
.btn-ghost-light:hover { background: rgba(255, 255, 255, 0.14); border-color: #fff; }
.btn-sm { padding: 10px 14px; font-size: 13.5px; }
.btn-lg { padding: 15px 24px; font-size: 15px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: default; transform: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.arrow-link { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 500; font-size: 15px; }
.arrow-link::after { content: ""; width: 7px; height: 7px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); transition: transform 0.2s var(--ease); }
.arrow-link:hover::after { transform: translateX(3px) rotate(45deg); }

/* ---------- 5. Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav-inner { position: static; display: flex; align-items: center; justify-content: space-between; height: var(--nav-h); gap: 24px; }
.nav-logo, .footer-mark { display: inline-flex; align-items: center; text-decoration: none; color: var(--ink); }
.nav-logo svg { height: 18px; width: auto; display: block; }
.footer-mark { color: #fff; }
.footer-mark svg { height: 42px; width: auto; display: block; }
.nav-menu { display: flex; align-items: center; gap: 22px; flex: 1; justify-content: flex-end; }
.nav-list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav-item { margin: 0; position: relative; }
.nav-link {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 11px; background: none; border: 0; font: inherit; font-size: 14px; font-weight: 500; letter-spacing: -0.005em;
  color: var(--ink-2); text-decoration: none; cursor: pointer;
}
.nav-link:hover, .nav-link.is-current { color: var(--ink); }
.nav-link.is-current { box-shadow: inset 0 -1.5px 0 var(--ink); }
.nav-caret { width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: 0.6; transition: transform 0.2s; }
.nav-item.open .nav-caret { transform: translateY(1px) rotate(225deg); }
.nav-panel {
  position: absolute; left: 0; top: calc(100% + 6px); min-width: 300px;
  background: #fff; border: 1px solid var(--line); box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.35);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity 0.16s var(--ease), transform 0.16s var(--ease), visibility 0s linear 0.16s;
}
.nav-item.open > .nav-panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@media (hover: hover) and (min-width: 1024px) { .nav-item:not(.was-closed):hover > .nav-panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } }
.nav-panel-list { list-style: none; margin: 0; padding: 8px; }
.nav-panel-list li { margin: 0; }
.nav-panel-list a { display: block; padding: 9px 12px; text-decoration: none; font-size: 14px; font-weight: 500; color: var(--ink-2); }
.nav-panel-list a:hover, .nav-panel-list a[aria-current="page"] { background: var(--paper); color: var(--ink); }
/* Full-width panels: solid white, edge to edge, over a scrim that dims the page so they read against strong photography. */
.nav-item.has-mega { position: static; }
.nav-mega {
  left: 0; right: 0; top: 100%; min-width: 0; padding: 0;
  border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  box-shadow: 0 32px 56px -32px rgba(0, 0, 0, 0.45);
  transform: translateY(-6px);
}
.nav-mega-inner { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 0 48px; padding-top: 26px; padding-bottom: 28px; align-items: stretch; }
.nav-mega-label { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); margin: 0 0 10px; }
.nav-mega-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 32px; }
.nav-mega-list li { margin: 0; }
.nav-mega-list a { display: block; padding: 10px 12px; margin: 0 -12px; text-decoration: none; color: var(--ink); transition: background 0.15s; }
.nav-mega-list a:hover, .nav-mega-list a[aria-current="page"] { background: var(--paper); }
.nav-mega-title { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.nav-mega-desc { display: block; font-size: 13px; line-height: 1.45; color: var(--fg-3); margin-top: 3px; }
.nav-mega-all { grid-column: 1 / -1; border-top: 1px solid var(--line); margin-top: 10px; padding-top: 6px; display: flex; gap: 24px; }
.nav-mega-all a { display: inline-block; margin: 0; padding: 8px 0; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.nav-mega-all a:hover { background: none; color: var(--ink); }
.nav-mega-countries { grid-column: 1 / -1; border-top: 1px solid var(--line); margin-top: 12px; padding-top: 12px; }
.nav-mega-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 6px; }
.nav-mega-chips li { margin: 0; }
.nav-mega-list .nav-mega-chips a { display: inline-block; padding: 6px 10px; margin: 0; font-size: 13.5px; font-weight: 500; border: 1px solid var(--line); }
.nav-mega-list .nav-mega-chips a:hover, .nav-mega-list .nav-mega-chips a[aria-current="page"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.nav-mega-aside { border-left: 1px solid var(--line); padding-left: 40px; display: flex; flex-direction: column; justify-content: center; gap: 14px; font-size: 14px; line-height: 1.5; color: var(--fg-2); }
.nav-mega-aside p { margin: 0; }
.nav-mega-aside .btn { align-self: flex-start; }
/* the only flex item in the nav row that can shrink, so without this a long language
   label in another translation squeezes the globe to a 3px dot */
.nav-globe { margin-right: 6px; opacity: 0.75; flex: 0 0 auto; }
.nav-lang-name { display: none; }
.nav-scrim { position: fixed; inset: 0; z-index: 99; background: rgba(20, 20, 20, 0.55); opacity: 0; pointer-events: none; transition: opacity 0.18s var(--ease); }
.nav:has(.has-mega.open) + .nav-scrim { opacity: 1; pointer-events: auto; }
.nav:has(.has-mega.open) { background: #fff; }
@media (hover: hover) and (min-width: 1024px) {
  .nav:has(.has-mega:not(.was-closed):hover) + .nav-scrim { opacity: 1; pointer-events: auto; }
  .nav:has(.has-mega:not(.was-closed):hover) { background: #fff; }
}
.nav-ctas { display: flex; gap: 16px; align-items: center; }
.nav-call { font-size: 14px; font-weight: 500; text-decoration: none; color: var(--ink-2); }
.nav-call:hover { color: var(--ink); }
.nav-toggle { display: none; background: none; border: 1px solid var(--line-2); padding: 9px 12px; font: inherit; font-size: 13px; font-weight: 500; color: var(--ink); cursor: pointer; align-items: center; gap: 10px; }
.nav-toggle-bars { display: inline-flex; flex-direction: column; gap: 4px; width: 18px; }
.nav-toggle-bars i { display: block; height: 1.5px; background: currentColor; transition: transform 0.2s; }
.nav.open .nav-toggle-bars i:first-child { transform: translateY(2.75px) rotate(45deg); }
.nav.open .nav-toggle-bars i:last-child { transform: translateY(-2.75px) rotate(-45deg); }

/* ---------- 6. Photography ---------- */
.photo { position: relative; margin: 0; overflow: hidden; background: var(--ink); }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 20, 20, 0.18) 0%, rgba(20, 20, 20, 0.38) 50%, rgba(20, 20, 20, 0.78) 100%); pointer-events: none; }
.photo--fill { position: absolute; inset: 0; z-index: 0; }

/* ---------- 7. Screens ---------- */
.screen { padding: clamp(48px, 6vw, 88px) 0; position: relative; }
.screen--mist { background: var(--paper); }
.screen--tight { padding: clamp(36px, 4.5vw, 60px) 0; position: relative; }
/* two untinted tight screens in a row are one stretch of paper: one gap between them, not two */
.screen--tight:not(.screen--mist) + .screen--tight:not(.screen--mist) { padding-top: 0; }
.screen-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px clamp(24px, 4vw, 64px); align-items: end; margin-bottom: clamp(24px, 3vw, 40px); }
.screen-head h2 { margin: 0; }
.screen-head p { margin: 0; font-size: 16.5px; line-height: 1.5; color: var(--fg-2); max-width: 48ch; }

/* ---------- 8. Hero ---------- */
.hero { position: relative; color: #fff; min-height: clamp(520px, 78vh, 820px); display: flex; flex-direction: column; justify-content: flex-end; }
.hero .photo::after { background: linear-gradient(180deg, rgba(20, 20, 20, 0.18) 0%, rgba(20, 20, 20, 0.55) 45%, rgba(20, 20, 20, 0.88) 100%); }
.hero-inner { position: relative; z-index: 1; padding-top: clamp(80px, 12vw, 160px); padding-bottom: clamp(36px, 4vw, 56px); }
.hero h1 { color: #fff; max-width: 15ch; margin-bottom: 18px; font-size: clamp(34px, 4.4vw, 62px); }
.hero-sub { font-size: clamp(16.5px, 1.35vw, 19px); line-height: 1.5; color: rgba(255, 255, 255, 0.9); max-width: 46ch; margin: 0 0 26px; }
.hero .btn-primary { background: #fff; color: var(--ink); border-color: #fff; }
.hero .btn-primary:hover { background: var(--paper); border-color: var(--paper); }
.hero-strip { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px 28px; padding-top: 16px; padding-bottom: 20px; border-top: 1px solid rgba(255, 255, 255, 0.22); font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.75); }
.hero-strip span { display: inline-flex; align-items: center; gap: 10px; }
.hero-strip span::before { content: ""; width: 5px; height: 5px; background: #fff; }

/* ---------- 9. Tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.tile { display: flex; flex-direction: column; justify-content: flex-start; gap: 12px; min-height: 200px; padding: 22px 22px 20px; background: #fff; text-decoration: none; transition: background 0.2s, color 0.2s; }
.tile-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.22; letter-spacing: -0.015em; text-wrap: balance; }
.tile-link { margin-top: auto; padding-top: 16px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
.tile-text { font-size: 14px; line-height: 1.5; color: var(--fg-2); margin-top: 0; }
.tiles--detailed .tile { gap: 12px; }
/* the three kinds of work on the home page: one row of three (13 October 2026) */
.tiles--detailed { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tile:hover { background: var(--ink); color: #fff; }
.tile:hover .tile-text { color: rgba(255, 255, 255, 0.78); }
.tile:hover .tile-link { color: rgba(255, 255, 255, 0.7); }
.tiles-note { margin: 16px 0 0; font-size: 15px; color: var(--fg-2); }

/* ---------- 10. Thesis ---------- */
.thesis { position: relative; color: #fff; padding: clamp(56px, 8vw, 112px) 0; }
.thesis .photo img { filter: brightness(0.72) saturate(0.9); }
.thesis .photo::after { background: linear-gradient(90deg, rgba(20, 20, 20, 0.9) 0%, rgba(20, 20, 20, 0.8) 55%, rgba(20, 20, 20, 0.66) 100%); }
.thesis-inner { position: relative; z-index: 1; }
.thesis-row { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 14px clamp(24px, 5vw, 80px); align-items: baseline; padding: 22px 0; border-top: 1px solid rgba(255, 255, 255, 0.22); }
.thesis-row:last-of-type { border-bottom: 1px solid rgba(255, 255, 255, 0.22); }
.thesis-word { font-family: var(--font-display); font-weight: 600; font-size: clamp(30px, 3.8vw, 56px); line-height: 1; letter-spacing: -0.03em; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); }
.thesis-line { font-size: clamp(15.5px, 1.25vw, 18px); font-weight: 500; line-height: 1.5; color: #fff; max-width: 44ch; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
.thesis-foot { margin-top: 24px; }

/* ---------- 11. Proof ---------- */
/* The results board on the home page: single figures that slide past. The track holds the list twice, so
   moving it by half its width loops without a seam. It stops on hover or focus, and stands still (one copy,
   wrapped) for anyone who asks for less motion and in print. */
.results { margin: 0; border: 1px solid var(--line); background: var(--white); }
.results-head { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; padding: 22px 24px 18px; }
.results-tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); white-space: nowrap; }
.results-board { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.results-track { display: flex; width: max-content; will-change: transform; animation: results-slide 36s linear infinite; }
.results-board:hover .results-track, .results-board:focus .results-track { animation-play-state: paused; }
.results-item { flex: none; width: 360px; padding: 28px 24px 26px; border-right: 1px solid var(--line); }
.results-value { font-family: var(--font-mono); font-size: clamp(36px, 3.6vw, 50px); letter-spacing: -0.04em; line-height: 1; margin: 0 0 12px; }
.results-label { font-size: 14.5px; line-height: 1.4; color: var(--fg-2); margin: 0; max-width: 30ch; }
.results figcaption { font-size: 13px; line-height: 1.5; color: var(--fg-2); padding: 16px 24px 18px; max-width: 96ch; }
@keyframes results-slide { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@media (max-width: 640px) {
  .results-head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .results-item { width: 280px; }
}
@media (prefers-reduced-motion: reduce), print {
  .results-track { animation: none; width: auto; flex-wrap: wrap; }
  .results-item[aria-hidden="true"] { display: none; }
  .results-item { width: 50%; }
}
.chart-svg .bracket { stroke: var(--fg); stroke-width: 1.25; }
.chart-svg .annot { font-family: var(--font-mono); font-size: 12.5px; fill: var(--fg); font-weight: 500; }

/* ---------- 12. CTA ---------- */
.cta { position: relative; color: #fff; padding: clamp(72px, 10vw, 128px) 0; text-align: center; }
.cta .photo::after { background: rgba(20, 20, 20, 0.72); }
.cta-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.cta h2 { color: #fff; max-width: 16ch; }
.cta p { font-size: clamp(16px, 1.3vw, 18px); color: rgba(255, 255, 255, 0.88); max-width: 46ch; margin: 0 0 26px; }
.cta .btn-row { justify-content: center; }
.cta-steps { list-style: none; margin: 40px 0 0; padding: 22px 0 0; border-top: 1px solid rgba(255, 255, 255, 0.22); display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 32px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.8); }
.cta-steps li { margin: 0; }
.cta-steps b { color: #fff; font-weight: 600; margin-right: 8px; }
.eyebrow--sentence { text-transform: none; letter-spacing: 0.01em; font-size: 12.5px; }
.next-list { list-style: none; counter-reset: next; margin: 0; padding: 0; display: grid; gap: 12px; }
.next-list li { position: relative; padding-left: 34px; margin: 0; font-size: 15px; line-height: 1.5; color: var(--fg-2); }
.next-list li::before { counter-increment: next; content: "0" counter(next); position: absolute; left: 0; top: 3px; font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-3); }
.next-list b { color: var(--ink); font-weight: 600; }
.quote-include li { font-size: 14.5px; }
.cta .btn-primary { background: #fff; color: var(--ink); border-color: #fff; }
.cta .btn-primary:hover { background: var(--paper); border-color: var(--paper); }

/* ---------- 13. Footer ---------- */
.footer { background: var(--ink); color: rgba(243, 243, 241, 0.78); padding: clamp(36px, 5vw, 56px) 0 24px; font-size: 14px; }
.footer-top { display: flex; flex-wrap: wrap; gap: 12px 32px; align-items: center; justify-content: space-between; padding-bottom: 24px; border-bottom: 1px solid rgba(243, 243, 241, 0.16); }
.footer-line { margin: 0; color: rgba(243, 243, 241, 0.7); }
.footer-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px clamp(20px, 3vw, 48px); padding: 28px 0; }
.footer-col-label { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(243, 243, 241, 0.55); margin-bottom: 12px; }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin: 0 0 7px; }
.footer-col a { color: rgba(243, 243, 241, 0.8); text-decoration: none; }
.footer-col a:hover { color: #fff; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 16px; border-top: 1px solid rgba(243, 243, 241, 0.16); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.03em; color: rgba(243, 243, 241, 0.55); }
.footer-bottom a { color: inherit; text-decoration: none; }
.footer-bottom a:hover { color: #fff; }

/* ---------- 14. Inner page primitives ---------- */
.page-hero { position: relative; color: #fff; min-height: clamp(300px, 42vh, 480px); display: flex; align-items: flex-end; }
/* the first stop is the scrim the breadcrumbs sit on; from 50% down the ramp is unchanged, so the h1 band keeps its weight */
.page-hero .photo::after { background: linear-gradient(180deg, rgba(20, 20, 20, 0.56) 0%, rgba(20, 20, 20, 0.45) 30%, rgba(20, 20, 20, 0.52) 50%, rgba(20, 20, 20, 0.84) 100%); }
.page-hero-inner { position: relative; z-index: 1; padding-top: clamp(64px, 9vw, 120px); padding-bottom: clamp(28px, 4vw, 44px); }
.page-hero h1 { color: #fff; max-width: 18ch; font-size: clamp(30px, 3.8vw, 54px); }
.page-hero .lead { color: rgba(255, 255, 255, 0.86); }
.page-hero .eyebrow { color: rgba(255, 255, 255, 0.75); }
.page-head { padding: clamp(48px, 6vw, 88px) 0 clamp(24px, 3vw, 40px); }
.page-head h1 { max-width: 20ch; }
.breadcrumbs { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-wrap: wrap; gap: 6px 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); }
.breadcrumbs li { margin: 0; }
.breadcrumbs li + li::before { content: "/"; margin-right: 10px; opacity: 0.5; }
.breadcrumbs a { text-decoration: none; }
.page-hero .breadcrumbs { color: #fff; }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.split--even { grid-template-columns: 1fr 1fr; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2.5vw, 28px); }
/* the eyebrow and the paragraph sit on rows the four blocks share, so a two-line eyebrow (German,
   French, Italian, Dutch, Polish, Portuguese) lifts the whole row instead of pushing its own
   paragraph 14px below the other three. Same technique as .chooser-item.
   row-gap 0: the eyebrow's own 10px bottom margin already sets the gap. */
.grid-4 > .block { display: grid; grid-template-rows: subgrid; grid-row: span 2; align-content: start; row-gap: 0; }
.block { border-top: 1px solid var(--ink); padding-top: 16px; }
.block .eyebrow { margin-bottom: 10px; }
.block h3 { margin-bottom: 10px; }
.block p, .block li { color: var(--fg-2); font-size: 15px; }
/* only plain lists take the bullet indent: .check-list, .depth, .drivers and .fact-lines zero it themselves */
.block ul:not([class]) { padding-left: 1.1em; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.card { background: #fff; padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; }
.card h3 { margin: 0; font-size: 19px; }
.card p { margin: 0; color: var(--fg-2); font-size: 14.5px; flex: 1; }
.card .eyebrow { margin: 0; }
a.card:hover { background: var(--paper); }
.check-list { list-style: none; padding: 0; margin: 0 0 1em; }
.check-list li { position: relative; padding-left: 24px; margin: 0 0 8px; }
.check-list li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 10px; height: 5px; border-left: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: translateY(-2px) rotate(-45deg); }
.x-list li::before { border: 0; width: 10px; height: 1.5px; background: var(--line-2); transform: none; top: 0.72em; }
.outcome { background: var(--ink); color: #fff; padding: 24px 26px; }
.outcome .eyebrow { color: rgba(255, 255, 255, 0.6); margin-bottom: 8px; }
.outcome p { margin: 0; color: #fff; font-family: var(--font-display); font-weight: 600; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.2; letter-spacing: -0.02em; }

/* story + lists side by side, then a two-cell band: outcome and the entry service */
.band { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.band-outcome { background: var(--ink); color: #fff; padding: 28px 30px; }
.band-outcome .eyebrow { color: rgba(255, 255, 255, 0.6); margin-bottom: 10px; }
.band-outcome p { margin: 0; color: #fff; font-family: var(--font-display); font-weight: 600; font-size: clamp(22px, 2vw, 30px); line-height: 1.15; letter-spacing: -0.025em; max-width: 22ch; }
.band-card { background: #fff; padding: 26px 28px 24px; text-decoration: none; display: flex; flex-direction: column; gap: 6px; }
.band-card .eyebrow { margin-bottom: 4px; }
.band-card-title { font-family: var(--font-display); font-weight: 600; font-size: 22px; letter-spacing: -0.02em; line-height: 1.15; }
.band-card-text { font-size: 15px; color: var(--fg-2); }
.band-card .arrow-link { margin-top: 12px; font-size: 14.5px; }
.band-card:hover .band-card-title { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- 14b. Service chooser, deliverable document, run list ---------- */
.chooser { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
/* subgrid so the four lines of every card sit on the same baselines across the row (as .market does) */
/* the last card carries no meta line: it still spans four rows, because the row it does not fill
   would otherwise show the grid's own line colour as a grey slab under the card */
.chooser-item { background: #fff; padding: 24px 24px 22px; display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 8px; text-decoration: none; min-height: 210px; transition: background 0.2s, color 0.2s; }
.chooser-when { font-size: 14px; color: var(--fg-3); line-height: 1.4; }
.chooser-name { font-family: var(--font-display); font-weight: 600; font-size: 22px; letter-spacing: -0.02em; line-height: 1.15; margin-top: 2px; }
.chooser-text { font-size: 15px; color: var(--fg-2); }
.chooser-meta { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); margin-top: 6px; }
.chooser-item:hover { background: var(--paper); }
.chooser-item--ink { background: var(--ink); color: #fff; }
.chooser-item--ink .chooser-when, .chooser-item--ink .chooser-text, .chooser-item--ink .chooser-meta { color: rgba(255, 255, 255, 0.75); }
.chooser-item--ink:hover { background: #000; }
.doc { background: var(--ink); color: #fff; padding: 26px 28px 24px; display: flex; flex-direction: column; gap: 4px; background-image: linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px); background-size: 40px 40px; }
.run { list-style: none; padding: 0; margin: 0; counter-reset: run; border-top: 1px solid var(--rule-2); }
.run li { counter-increment: run; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--rule); margin: 0; font-size: 15px; }
.run li::before { content: counter(run, decimal-leading-zero); font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-3); padding-top: 3px; grid-row: 1 / span 2; }
.run b { display: block; font-weight: 600; grid-column: 2; }
.run span { color: var(--fg-2); font-size: 14.5px; grid-column: 2; }
.currency-switch { display: inline-flex; border: 1px solid var(--line-2); }
.currency-switch button { background: none; border: 0; border-right: 1px solid var(--line-2); padding: 8px 13px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--fg-2); cursor: pointer; }
.currency-switch button:last-child { border-right: 0; }
.currency-switch button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.price { font-family: var(--font-display); font-weight: 600; font-size: 19px; letter-spacing: -0.02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.answer { border-left: 3px solid var(--ink); background: var(--paper); padding: 16px 20px; margin: 22px 0 32px; font-size: 17px; line-height: 1.5; max-width: var(--prose); }
.answer p:last-child { margin: 0; }
.answer .eyebrow { margin-bottom: 8px; }
.article-body { font-size: 16.5px; line-height: 1.62; }
.article-body > * { max-width: var(--prose); }
.article-body h2 { font-size: clamp(22px, 2.2vw, 28px); margin: 1.7em 0 0.5em; }
.article-body h3 { font-size: 19px; margin: 1.5em 0 0.4em; }
.article-body p { margin: 0 0 1.1em; }
.article-body ul, .article-body ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.article-body li { margin-bottom: 0.45em; }
.article-body figure, .article-body .table-wrap, .article-body .photo { max-width: none; }
.article-body blockquote { margin: 1.4em 0; padding: 0 0 0 18px; border-left: 2px solid var(--ink); font-family: var(--font-display); font-weight: 500; font-size: 20px; line-height: 1.35; letter-spacing: -0.015em; }
.related { border-top: 1px solid var(--ink); margin-top: 44px; padding-top: 20px; }
.related h2 { font-size: 24px; margin: 0 0 14px; }
.faq { margin-top: 0; }
.split .faq, .split .related { margin-top: 0; }
.related { padding-top: 0; border-top: 0; }
.split--even > .related { border-top: 0; padding-top: 0; }
.faq-title { font-size: 24px; margin-bottom: 14px; }
.faq-list { border-top: 1px solid var(--rule-2); }
.faq-item { border-bottom: 1px solid var(--rule); }
.faq-item summary { cursor: pointer; list-style: none; padding: 14px 40px 14px 0; font-family: var(--font-display); font-weight: 600; font-size: 17px; line-height: 1.3; letter-spacing: -0.012em; position: relative; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-family: var(--font-mono); font-size: 18px; color: var(--fg-3); }
.faq-item[open] summary::after { content: "–"; }
.faq-a { padding: 0 0 16px; color: var(--fg-2); max-width: var(--prose); font-size: 15.5px; }
.faq-a p:last-child { margin: 0; }

/* ---------- 17. Charts ---------- */
figure.chart { margin: 0; padding: 20px 20px 14px; border: 1px solid var(--rule); background: var(--bg); }
.article-body figure.chart { margin: 28px 0; }
figure.chart .figure-head { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; margin-bottom: 10px; }
figure.chart .figure-title { font-family: var(--font-display); font-weight: 600; font-size: 16.5px; line-height: 1.25; margin: 0; letter-spacing: -0.012em; }
figure.chart .figure-tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); white-space: nowrap; }
figure.chart figcaption { font-size: 13px; color: var(--fg-2); margin-top: 10px; line-height: 1.5; }
/* charts are drawn at 760px; letting them scale up past that makes the labels larger than the title */
figure.chart .chart-svg { width: 100%; max-width: 760px; height: auto; margin-inline: auto; }
.chart-svg text { font-family: var(--font-body); font-size: 13px; fill: var(--fg-2); }
.chart-svg .tick, .chart-svg .legend, .chart-svg .note { font-family: var(--font-mono); font-size: 11.5px; fill: var(--fg-3); }
.chart-svg .note { font-size: 11px; }
.chart-svg .val { font-family: var(--font-mono); font-size: 12.5px; fill: var(--fg); font-weight: 500; }
.chart-svg .cat { font-size: 12.5px; fill: var(--fg-2); }
.chart-svg .grid { stroke: var(--rule); stroke-width: 1; }
.chart-svg .connector { stroke: var(--fg-3); stroke-width: 1; stroke-dasharray: 3 3; }
.chart-svg .bar-base { fill: var(--data-1); }
.chart-svg .bar-add { fill: var(--data-2); }
.chart-svg .bar-total { fill: var(--fg); }
.chart-svg .bar-market { fill: var(--data-3); }
.chart-svg .track { fill: var(--data-1-soft); }
.chart-svg .range { fill: var(--data-1-soft); stroke: var(--data-1); stroke-width: 1; }
.chart-svg .mark { stroke: var(--data-2); stroke-width: 3; }
.chart-svg .seg-0 { fill: var(--data-1); } .chart-svg .seg-1 { fill: var(--data-2); }
.chart-svg .cell { stroke: var(--bg); stroke-width: 1; }
.chart-svg .cell-0 { fill: rgba(31, 94, 158, 0.06); stroke: var(--line); stroke-width: 1; } .chart-svg .cell-1 { fill: rgba(31, 94, 158, 0.2); } .chart-svg .cell-2 { fill: var(--data-1); opacity: 0.55; } .chart-svg .cell-3 { fill: var(--data-1); }

/* ---------- 18. Forms ---------- */
.form { display: grid; gap: 16px; max-width: 620px; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field { display: grid; gap: 6px; align-content: start; }
.field label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-2); }
.field .hint { font-size: 12.5px; color: var(--fg-3); }
.field input, .field select, .field textarea { width: 100%; padding: 12px 13px; border: 1px solid var(--field-line); background: #fff; color: var(--ink); font: inherit; font-size: 16px; border-radius: 0; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(31, 94, 158, 0.35); }
.field textarea { min-height: 120px; resize: vertical; }
.field .req-mark { color: var(--data-neg); }
.form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-status { font-size: 14px; margin: 0; min-height: 1.4em; }
.form-status.ok { color: var(--ink); font-weight: 600; }
.form-status.err { color: var(--data-neg); }
.form-fine { font-size: 12.5px; color: var(--fg-3); margin: 0; }
.modal { position: fixed; inset: 0; z-index: 500; display: none; align-items: center; justify-content: center; background: rgba(20, 20, 20, 0.82); padding: 20px; }
.modal.open { display: flex; }
.modal-card { background: #fff; color: var(--ink); max-width: 440px; width: 100%; padding: 30px 28px 24px; position: relative; }
.modal-x { position: absolute; top: 8px; right: 10px; background: none; border: 0; font-size: 26px; line-height: 1; padding: 8px 12px; cursor: pointer; color: var(--fg-3); }
@media (max-width: 880px), (pointer: coarse) { .modal { overflow-y: auto; align-items: flex-start; padding: 20px 16px 40px; } .modal-card { margin: auto; } }
/* see §29 for .modal-card--wide, which gives up its own scroller on phones so the dialog scrolls as one */

/* ---------- 19. Tables ---------- */
.table-wrap { overflow-x: auto; margin: 0 0 1.4em; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
th, td { text-align: left; vertical-align: top; padding: 11px 14px 11px 0; border-bottom: 1px solid var(--rule); }
thead th { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); font-weight: 500; border-bottom: 1px solid var(--ink); }
th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; padding-right: 14px; }
tbody th { font-weight: 600; }
.map-table th[scope="row"] a, .map-table td a { text-decoration: none; font-weight: 600; }
.map-table th[scope="row"] a:hover, .map-table td a:hover { text-decoration: underline; }
.map-table td:last-child { color: var(--fg-2); font-size: 14px; }
.map-table .price { font-size: 17px; }
.block .chart-svg { margin-top: 6px; }
.link-row { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.link-row li { margin: 0; }
.link-row a { text-decoration: none; font-weight: 500; border-bottom: 1px solid var(--line-2); padding-bottom: 2px; }
.link-row a:hover { border-color: var(--ink); }
.compare { width: 100%; border-collapse: collapse; font-size: 15px; }
.compare th, .compare td { padding: 14px 16px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.compare thead th { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); font-weight: 500; border-bottom: 1px solid var(--ink); }
.compare th[scope="row"] { font-weight: 600; width: 22%; }
.compare td { color: var(--fg-2); }
.compare .yes { color: var(--ink); font-weight: 600; }
.compare .no { color: var(--fg-3); }
.compare .hl { background: var(--paper-2); }
.source { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); margin: -0.8em 0 1.6em; } .pt-0 { padding-top: 0 !important; }
.article-body > h2:first-child { margin-top: 0; }
.notfound { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px clamp(32px, 6vw, 96px); align-items: start; }
.notfound .link-list { margin-top: 0; max-width: none; }
.notfound-code { font-family: var(--font-mono); font-size: 96px; line-height: 1; letter-spacing: -0.04em; color: var(--line); margin: 0 0 8px; }
@media (max-width: 800px) { .notfound { grid-template-columns: 1fr; gap: 32px; } .notfound-code { font-size: 64px; } }
.mt-1 { margin-top: 12px; } .mt-2 { margin-top: 24px; } .mt-3 { margin-top: 40px; }
.notice { font-size: 13px; color: var(--fg-3); }
.lc-row { display: grid; grid-template-columns: 220px 1fr 110px; gap: 14px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--rule); font-size: 14px; }
.lc-bar { height: 12px; background: var(--data-1-soft); position: relative; }
.lc-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--data-1); }
.lc-val { font-family: var(--font-mono); font-size: 12.5px; text-align: right; font-variant-numeric: tabular-nums; }
.lc-total { font-weight: 600; border-bottom: 1px solid var(--ink); }
.lc-note { font-size: 13.5px; color: var(--fg-2); margin-top: 12px; }

/* ---------- 20b. Languages ---------- */
.nav-lang .nav-link { padding-left: 8px; padding-right: 8px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; }
.nav-lang { margin-left: 6px; }
.nav-panel--lang { min-width: 180px; }
/* the panel hangs from the header's bottom edge, like the mega panels, not from the link's own box */
@media (min-width: 1024px) {
  .nav-item.nav-lang { position: static; }
  /* right edge on the container's, so it lines up with the button it drops from */
  .nav-panel--lang { left: auto; right: calc((100% - min(var(--container), 100%)) / 2 + var(--gutter)); top: 100%; }
}
.nav-panel--lang a[aria-current="page"] { font-weight: 600; }
.footer-langs { padding: 22px 0 6px; border-top: 1px solid rgba(255, 255, 255, 0.12); margin-top: 28px; }
.footer-langs ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.footer-langs li { margin: 0; }
.footer-langs a { color: rgba(255, 255, 255, 0.72); text-decoration: none; font-size: 14px; }
.footer-langs a:hover, .footer-langs a[aria-current="page"] { color: #fff; }
html[lang="ja"] body, html[lang="ja"] h1, html[lang="ja"] h2, html[lang="ja"] h3, html[lang="ja"] .btn { font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", "Noto Sans JP", sans-serif; }
html[lang="ko"] body, html[lang="ko"] h1, html[lang="ko"] h2, html[lang="ko"] h3, html[lang="ko"] .btn { font-family: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif; }
html[lang^="zh"] body, html[lang^="zh"] h1, html[lang^="zh"] h2, html[lang^="zh"] h3, html[lang^="zh"] .btn { font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif; }
html[lang="ja"] h1, html[lang="ko"] h1, html[lang^="zh"] h1, html[lang="ja"] h2, html[lang="ko"] h2, html[lang^="zh"] h2, html[lang="ja"] h3, html[lang="ko"] h3, html[lang^="zh"] h3 { letter-spacing: 0; line-height: 1.25; }
html[lang="ja"] .thesis-word, html[lang="ko"] .thesis-word, html[lang^="zh"] .thesis-word { letter-spacing: 0; }
html[lang="ja"] .eyebrow, html[lang="ko"] .eyebrow, html[lang^="zh"] .eyebrow, html[lang="ja"] .tile-link, html[lang="ko"] .tile-link, html[lang^="zh"] .tile-link { letter-spacing: 0.04em; }
/* CJK line breaking: headings break only at spaces, punctuation or explicit zero-width spaces; body text wraps freely */
html[lang="ja"] h1, html[lang="ja"] h2, html[lang="ja"] h3, html[lang="ja"] .tile-title, html[lang="ja"] .chooser-name, html[lang="ja"] .band-card-title, html[lang="ja"] .thesis-line, html[lang="ja"] .btn,
html[lang="ko"] h1, html[lang="ko"] h2, html[lang="ko"] h3, html[lang="ko"] .tile-title, html[lang="ko"] .chooser-name, html[lang="ko"] .band-card-title, html[lang="ko"] .thesis-line, html[lang="ko"] .btn,
html[lang^="zh"] h1, html[lang^="zh"] h2, html[lang^="zh"] h3, html[lang^="zh"] .tile-title, html[lang^="zh"] .chooser-name, html[lang^="zh"] .band-card-title, html[lang^="zh"] .thesis-line, html[lang^="zh"] .btn { word-break: keep-all; overflow-wrap: anywhere; line-break: strict; }
html[lang="ko"] body { word-break: keep-all; overflow-wrap: anywhere; }

.nav-link { white-space: nowrap; }
.lang-hint { background: var(--ink); color: #fff; font-size: 14px; }
.lang-hint .container { display: flex; align-items: center; justify-content: center; gap: 18px; padding-top: 9px; padding-bottom: 9px; flex-wrap: wrap; }
.lang-hint a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.lang-hint button { background: none; border: 1px solid rgba(255, 255, 255, 0.4); color: #fff; font: inherit; font-size: 12px; padding: 4px 10px; cursor: pointer; }
.lang-hint button:hover { border-color: #fff; }
@media (min-width: 1024px) and (max-width: 1320px) {
  .nav-menu { gap: 10px; }
  .nav-list { gap: 0; }
  .nav-link { padding: 9px 7px; font-size: 13.5px; }
  .nav-call { display: none; }
  .nav-ctas .btn-sm { padding: 10px 12px; font-size: 13px; }
}

.formats { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.formats li { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); margin: 0; }
.formats b { font-weight: 600; }
.formats span { color: var(--fg-2); }
.tailored { border: 1px solid var(--line-2); padding: 20px 22px; background: var(--paper); }
.tailored .check-list { margin-bottom: 10px; }
.hero-figure .price { font-family: var(--font-mono); }
/* the fee is a figure, not a price tag: it takes the figure's size rather than .price's 19px */
.hero-figure-value .price { font-size: inherit; letter-spacing: inherit; line-height: inherit; }
.hero-figure .currency-switch { margin-top: 4px; }

.hero-fact-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px clamp(32px, 5vw, 72px); align-items: start; }
.fact-card { margin: 0; border: 1px solid var(--line-2); background: var(--paper); padding: 6px 22px; }
.fact-card > div { padding: 14px 0; border-bottom: 1px solid var(--line); }
.fact-card > div:last-child { border-bottom: 0; }
.fact-card dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 6px; }
.fact-card dd { margin: 0; font-size: 15px; color: var(--ink); }
.fact-note { margin: 10px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--fg-3); }
.fact-lines { list-style: none; margin: 0; padding: 0; }
.fact-lines li { display: flex; justify-content: space-between; gap: 16px; margin: 0; padding: 3px 0; font-size: 14.5px; }
.fact-lines li span:last-child { font-family: var(--font-mono); font-size: 13px; color: var(--fg-2); white-space: nowrap; }
.identity-strip { background: var(--ink); color: #fff; }
.identity-strip-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 16px; padding-bottom: 16px; flex-wrap: wrap; }
.identity-strip p { margin: 0; font-size: 15px; color: rgba(255, 255, 255, 0.9); max-width: 78ch; }
.identity-strip .arrow-link { color: #fff; white-space: nowrap; }

/* ---------- 21. Responsive ---------- */
@media (max-width: 1100px) {
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* five tiles in threes leave a hole in the last row: the fifth takes the two remaining columns */
  .tiles > .tile:nth-child(5):last-child { grid-column: span 2; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .nav-toggle { display: inline-flex; }
  .nav-menu {
    position: fixed; left: 0; right: 0; top: var(--nav-h); bottom: 0;
    background: #fff; flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 0; padding: 8px var(--gutter) 40px; overflow-y: auto; display: none; border-top: 1px solid var(--line);
  }
  /* backdrop-filter would make the fixed menu position relative to the header; drop it while the menu is open */
  .nav.open { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; }
  .nav.open .nav-menu { display: flex; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-item { border-bottom: 1px solid var(--line); }
  .nav-link { width: 100%; justify-content: space-between; padding: 15px 0; font-size: 17px; }
  .nav-link.is-current { box-shadow: none; text-decoration: underline; text-underline-offset: 4px; }
  .nav-panel { position: static; min-width: 0; opacity: 1; visibility: visible; transform: none; border: 0; box-shadow: none; display: none; }
  .nav-item.open > .nav-panel { display: block; }
  .nav-panel-list { padding: 0 0 12px; }
  .nav-mega { position: static; box-shadow: none; border: 0; transform: none; }
  .nav-mega-inner { display: block; padding: 0 0 12px; }
  .nav-mega-label, .nav-mega-desc, .nav-mega-aside { display: none; }
  .nav-mega-list { display: block; }
  .nav-mega-list a { display: block; padding: 9px 0; margin: 0; }
  .nav-mega-list a:hover, .nav-mega-list a[aria-current="page"] { background: none; }
  .nav-mega-title { font-size: 15.5px; font-weight: 500; }
  .nav-mega-countries { border: 0; margin: 0; padding: 0 0 4px 12px; }
  .nav-mega-chips { display: block; }
  .nav-mega-list .nav-mega-chips a { display: block; border: 0; padding: 8px 0; font-size: 14.5px; }
  .nav-mega-list .nav-mega-chips a:hover, .nav-mega-list .nav-mega-chips a[aria-current="page"] { background: none; color: var(--ink); }
  .nav-mega-all { border: 0; margin: 0; padding: 0; display: block; }
  .nav-mega-all a { padding: 9px 0; }
  .nav-scrim { display: none; }
  .nav-panel-list a { padding: 9px 0; font-size: 15.5px; }
  .nav-ctas { flex-direction: column; align-items: stretch; margin-top: 20px; gap: 12px; }
  .nav-lang { margin-left: 0; }
  .nav-lang .nav-link { justify-content: flex-start; gap: 10px; }
  .nav-lang .nav-lang-code { display: none; }
  .nav-lang .nav-lang-name { display: inline; }
  .nav-lang .nav-caret { margin-left: auto; }
  .nav-lang .nav-link { font-family: var(--font-body); font-size: 17px; letter-spacing: 0; }
  .nav-ctas .btn { width: 100%; padding: 15px; font-size: 15.5px; }
  .nav-call { text-align: center; padding: 8px; }
  .screen-head, .split, .thesis-row, .band { grid-template-columns: 1fr; }
  .chooser { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .thesis-row { gap: 8px; }
}
@media (max-width: 720px) {
  figure.chart { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* the drawing width: shrinking it below that takes the labels down to 8px and it still scrolls */
  figure.chart .chart-svg { min-width: 760px; }
  .map-table, .map-table tbody { display: block; }
  .map-table thead { display: none; }
  .map-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
  .map-table th, .map-table td { display: block; border: 0; padding: 0; text-align: left; }
  .map-table th[scope="row"] { grid-column: 1 / -1; }
  .map-table td:nth-child(2) { grid-column: 1; grid-row: 2; font-weight: 600; }
  .map-table td:nth-child(3) { grid-column: 1 / -1; grid-row: 3; font-size: 13px; color: var(--fg-3); }
  .map-table td:nth-child(4) { grid-column: 2; grid-row: 2; text-align: right; }
  .map-table td:nth-child(5) { grid-column: 1 / -1; grid-row: 4; }
  .map-table--3 td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .map-table--3 td:nth-child(3) { grid-column: 1 / -1; grid-row: 3; font-size: 14px; color: var(--fg-2); }
  .formats li { grid-template-columns: 1fr; gap: 4px; }
  .compare, .compare tbody, .compare tr, .compare td, .compare th[scope="row"] { display: block; }
  .compare thead { display: none; }
  .compare tr { padding: 14px 0; border-bottom: 1px solid var(--rule); }
  .compare th[scope="row"] { width: auto; padding: 0 0 8px; border: 0; }
  .compare td { padding: 4px 0; border: 0; display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 10px; }
  .compare td::before { content: attr(data-label); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); padding-top: 3px; }
  .compare td.hl { background: none; }
  .quote-split aside { display: contents; }
  .quote-split #quote-result { order: -1; margin-bottom: 8px; }
  .quote-split .quote-next, .quote-split .quote-include { display: none; }
  .tiles, .cards, .grid-4, .form-row, .chooser { grid-template-columns: 1fr; }
  /* one track here, so the span-2 rule at 1100 would open a second, implicit one and
     leave tiles 1-4 in two ragged columns: reset it with the columns it was written for */
  .tiles > .tile:nth-child(5):last-child { grid-column: auto; }
  .tile { min-height: 0; gap: 20px; }
  .hero { min-height: clamp(480px, 74vh, 700px); }
  .hero h1 { max-width: none; }
  .hero-strip { gap: 6px 18px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-mark svg { height: 36px; }
  .cta .btn-row .btn { width: 100%; }
  .lc-row { grid-template-columns: 1fr; gap: 6px; }
  .lc-val { text-align: left; }
  /* the total has no bar, so in a single column its empty slot reads as a missing line */
  .lc-total .lc-bar { display: none; }
}

/* ---------- 22. Print ---------- */
@media print {
  .nav, .footer, .cta, .skip-link, .nav-ctas, .photo, .lang-hint { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  a { text-decoration: none; color: inherit; }
  .screen { padding: 18pt 0; }
  figure.chart { break-inside: avoid; border-color: #999; }
  .print-only { display: block !important; }
  /* The dark bands are dark only because of the photograph behind them, and .photo is hidden above, so on paper they print as ink on white; every other fill is forced through even when the print dialog's background graphics box is off. */
  *, *::before, *::after { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  .hero, .page-hero, .thesis, .cta, .identity-strip, .on-dark { background: #fff !important; }
  .hero, .page-hero { min-height: 0 !important; }
  .hero, .hero *, .page-hero, .page-hero *, .thesis, .thesis *, .cta, .cta *, .identity-strip, .identity-strip *, .on-dark, .on-dark * { color: var(--ink) !important; border-color: var(--line-2) !important; text-shadow: none !important; }
  .hero-strip span::before { background: var(--ink) !important; }
  /* A closed <details> hides its answer in a pseudo-element, not in .faq-a, and the +/- is a screen affordance. */
  .faq-item summary::after { content: none !important; }
  .faq-item::details-content { content-visibility: visible !important; }
  /* The landed-cost calculator is a live form: print the result table, not the empty boxes or the instruction to type in them. */
  #landed-form, #calculator .screen-head p { display: none !important; }
  #calculator .split { display: block !important; }
}
.print-only { display: none; }

/* ---------- 23. Page devices: paper heroes, numerals, opening figures, route maps, stamps ---------- */
.hero-paper { padding: clamp(40px, 5vw, 72px) 0 clamp(28px, 4vw, 48px); border-bottom: 1px solid var(--line); background: var(--white); }
.hero-paper-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px clamp(32px, 6vw, 96px); align-items: end; }
.hero-num-block { display: flex; flex-direction: column; line-height: 1; }
.hero-num { font-family: var(--font-mono); font-weight: 500; font-size: clamp(96px, 16vw, 200px); letter-spacing: -0.06em; line-height: 0.85; color: var(--ink); }
.hero-num-of { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); margin-top: 14px; }
.hero-paper-text h1 { max-width: 20ch; }
.hero-paper-grid--figure { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; }
.hero-figure { display: grid; gap: 8px; border-left: 1px solid var(--ink); padding-left: 24px; }
.hero-figure-value { font-family: var(--font-mono); font-size: clamp(48px, 7vw, 88px); letter-spacing: -0.04em; line-height: 0.95; }
.hero-figure-label { font-size: 15px; color: var(--fg-2); max-width: 36ch; }
.hero-figure-note { font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-3); letter-spacing: 0.03em; }
/* The fees page opens with its two fees in one column: how an engagement is priced, then the day rate. */
.fee-schedule { margin: 0; border-left: 1px solid var(--ink); padding-left: 24px; }
.fee-row { display: grid; gap: 8px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.fee-row:first-child { padding-top: 0; }
.fee-row:last-child { border-bottom: 0; padding-bottom: 0; }
.fee-row dt { font-size: 15px; color: var(--fg-2); }
.fee-row dd { margin: 0; }
.fee-words { font-family: var(--font-display); font-weight: 600; font-size: clamp(22px, 2.4vw, 32px); letter-spacing: -0.02em; line-height: 1.1; }
.fee-figure { font-family: var(--font-mono); font-size: clamp(40px, 5vw, 64px); letter-spacing: -0.04em; line-height: 0.95; }
.fee-figure .price { font-family: var(--font-mono); font-size: inherit; letter-spacing: inherit; line-height: inherit; }
.way h3 .price { font-size: inherit; letter-spacing: inherit; }
.fee-note { font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-3); letter-spacing: 0.03em; }
.figure-row { border-bottom: 1px solid var(--line); background: var(--white); }
.figure-row-inner { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px clamp(32px, 6vw, 96px); align-items: center; padding-top: 28px; padding-bottom: 28px; }
.figure-value { font-family: var(--font-mono); font-size: clamp(56px, 9vw, 120px); letter-spacing: -0.05em; line-height: 0.9; white-space: nowrap; }
.figure-unit { font-size: 0.28em; letter-spacing: 0.02em; color: var(--fg-3); margin-left: 6px; }
.figure-label { font-size: clamp(16px, 1.3vw, 19px); font-weight: 500; margin: 0 0 6px; max-width: 40ch; letter-spacing: -0.01em; }
.figure-note { font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-3); margin: 0; letter-spacing: 0.03em; }
/* The day's price inside a card's small line on the home page takes that line's own type. */
.chooser-meta .price { font: inherit; letter-spacing: inherit; }
.doc { position: relative; }
@media (max-width: 800px) {
  .hero-paper-grid, .hero-paper-grid--figure, .hero-fact-grid, .figure-row-inner { grid-template-columns: 1fr; }
  .hero-num { font-size: 80px; }
  .figure-value { font-size: 56px; white-space: normal; }
  .hero-figure, .fee-schedule { border-left: 0; padding-left: 0; border-top: 1px solid var(--ink); padding-top: 16px; }
}

/* ---------- 24. About: why, creed, day, ledgers, firm card ---------- */
.page-hero--tall { min-height: clamp(360px, 54vh, 580px); }
.creed-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.creed-row { display: grid; grid-template-columns: 64px minmax(0, 6fr) minmax(0, 5fr); gap: 10px clamp(20px, 3vw, 48px); align-items: baseline; padding: 22px 0; margin: 0; border-bottom: 1px solid var(--line-2); }
.creed-num { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.06em; color: var(--fg-3); }
.creed-h { margin: 0; font-size: clamp(20px, 2vw, 28px); line-height: 1.15; letter-spacing: -0.02em; max-width: 22ch; }
.creed-p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--fg-2); max-width: 48ch; }
.day-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px clamp(32px, 5vw, 72px); align-items: start; border-top: 1px solid var(--ink); padding-top: 28px; }
/* Without JavaScript the clock, the date and the city times are never filled in, so those go and
   the paragraph beside them stays. The label belongs to the clock, so it goes with it, and the
   grid drops to the one column that still has content. */
html:not(.js) .day-now > .day-group-label, html:not(.js) .day-clock, html:not(.js) .day-date, html:not(.js) .day-groups { display: none; }
html:not(.js) .day-grid { grid-template-columns: minmax(0, 1fr); }
html:not(.js) .day-text { margin-top: 0; }
.day-now { display: grid; gap: 6px; align-content: start; }
.day-group-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
.day-clock { font-family: var(--font-mono); font-size: clamp(64px, 10vw, 136px); letter-spacing: -0.05em; line-height: 0.9; font-variant-numeric: tabular-nums; color: var(--ink); min-height: 0.9em; }
.day-date { font-family: var(--font-mono); font-size: 13px; color: var(--fg-2); letter-spacing: 0.02em; margin-top: 6px; }
.day-groups { display: grid; gap: 18px; }
.day-group { border-top: 1px solid var(--line); padding-top: 12px; }
.day-group:first-child { border-top: 0; padding-top: 0; }
.day-cities { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.day-city { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: 12px; margin: 0; font-size: 15.5px; }
.day-city time { font-family: var(--font-mono); font-size: 14px; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.day-dot { width: 8px; height: 8px; border: 1px solid var(--ink); border-radius: 50%; display: inline-block; box-sizing: border-box; flex-shrink: 0; }
.day-legend .day-dot { margin-top: 5px; }
.day-dot.is-open { background: var(--ink); }
.day-legend { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 0; font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-3); letter-spacing: 0.03em; }
.firm-card { margin-top: 14px; }
.firm-card dd.mono { font-family: var(--font-mono); }
.firm-card .fact-lines a { text-decoration: none; color: var(--ink); }
.firm-card .fact-lines a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 800px) {
  .day-grid { grid-template-columns: 1fr; }
  .creed-row { grid-template-columns: 40px minmax(0, 1fr); }
  .creed-p { grid-column: 2; }
  .day-clock { font-size: clamp(56px, 18vw, 96px); }
}

.band-outcome .arrow-link { margin-top: 14px; }

/* ---------- 25. Mega panels: numbered hairline tiles, dark card asides, staggered entrance ---------- */
.nav-mega-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.nav-mega--guides .nav-mega-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nav-mega-list > li { background: #fff; }
.nav-mega-list > li:not(.nav-mega-all):not(.nav-mega-countries) > a { display: flex; flex-direction: column; gap: 4px; height: 100%; min-height: 112px; padding: 16px 18px 15px; margin: 0; transition: background 0.18s var(--ease), color 0.18s var(--ease); }
.nav-mega-all > a { display: inline-block; height: auto; min-height: 0; padding: 2px 0; margin: 0; }
.nav-mega-list > li:not(.nav-mega-all):not(.nav-mega-countries) > a:hover, .nav-mega-list > li:not(.nav-mega-all):not(.nav-mega-countries) > a[aria-current="page"] { background: var(--ink); color: #fff; }
.nav-mega-num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--fg-3); margin-bottom: 6px; }
.nav-mega-list > li > a:hover .nav-mega-num, .nav-mega-list > li > a:hover .nav-mega-desc,
.nav-mega-list > li > a[aria-current="page"] .nav-mega-num, .nav-mega-list > li > a[aria-current="page"] .nav-mega-desc { color: rgba(255, 255, 255, 0.72); }
.nav-mega-all { grid-column: auto; border: 0; margin: 0; padding: 16px 18px 15px; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 6px; }
.nav-mega-all a { padding: 2px 0; }
.nav-mega-all a:hover { text-decoration: underline; text-underline-offset: 3px; }
.nav-mega-countries { grid-column: 1 / -1; border: 0; margin: 0; padding: 14px 18px; }
.nav-mega-list .nav-mega-chips a { background: #fff; min-height: 0; }
.nav-mega-aside { justify-content: center; }
.nav-mega-card { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 24px; background: var(--ink); color: #fff; background-image: linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px); background-size: 22px 22px; }
.nav-mega-card p { margin: 0; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, 0.84); }
.nav-mega-card-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.65); }
.nav-mega-card .btn-primary { background: #fff; color: var(--ink); border-color: #fff; align-self: flex-start; margin-top: 6px; }
.nav-mega-card .btn-primary:hover { background: var(--paper); border-color: var(--paper); }
@media (min-width: 1024px) {
  .nav-mega-list > li, .nav-mega-card { opacity: 0; transform: translateY(6px); transition: opacity 0.28s var(--ease), transform 0.28s var(--ease); transition-delay: calc(var(--i, 0) * 28ms); }
  .nav-mega-card { transition-delay: 160ms; }
  .nav-item.open .nav-mega-list > li, .nav-item.open .nav-mega-card { opacity: 1; transform: none; }
}
@media (hover: hover) and (min-width: 1024px) {
  .nav-item:hover .nav-mega-list > li, .nav-item:hover .nav-mega-card { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .nav-mega-list > li, .nav-mega-card { transition: none; } }
@media (max-width: 1023px) {
  .nav-mega-list { display: block; background: none; border: 0; }
  .nav-mega-list > li { background: none; }
  .nav-mega-list > li > a { display: block; min-height: 0; padding: 9px 0; }
  .nav-mega-list > li > a:hover, .nav-mega-list > li > a[aria-current="page"] { background: none; color: var(--ink); }
  .nav-mega-num { display: none; }
  .nav-mega-all { background: none; padding: 0; display: block; }
  .nav-mega-countries { background: none; padding: 0 0 4px 12px; }
}

/* ---------- 26. Capability pages: questions, approach, what you receive ---------- */
.questions { list-style: none; margin: 12px 0 0; padding: 0; border-top: 1px solid var(--ink); counter-reset: q; }
.questions li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: 14px 0; margin: 0; border-bottom: 1px solid var(--line-2); font-size: 16px; line-height: 1.45; color: var(--ink); }
.questions li::before { content: counter(q, decimal-leading-zero); counter-increment: q; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--fg-3); padding-top: 3px; }
.approach p { font-size: 16px; line-height: 1.55; color: var(--fg-2); max-width: 60ch; }
.approach p:first-of-type { margin-top: 10px; }
.hold { border-top: 1px solid var(--ink); padding-top: 14px; }
.hold > p { font-size: clamp(18px, 1.45vw, 21px); line-height: 1.35; letter-spacing: -0.01em; margin: 8px 0 0; max-width: 40ch; }
.hold .eyebrow.mt-2 { display: block; }
.report-contents { list-style: none; margin: 10px 0 0; padding: 0; columns: 2; column-gap: 28px; }
.report-contents li { break-inside: avoid; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; padding: 7px 0; margin: 0; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.4; color: var(--fg-2); }
.report-contents li span:first-child { font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-3); padding-top: 2px; }
.hold .arrow-link { display: inline-flex; margin-top: 14px; }
@media (max-width: 800px) { .report-contents { columns: 1; } }

/* ---------- 27. The chart band that closes a situation page ---------- */
.evidence { border-top: 1px solid var(--ink); padding-top: 16px; }
.evidence .chart { margin: 0; }
.notfor { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line-2); }
.notfor p { margin: 6px 0 0; font-size: 15px; line-height: 1.5; color: var(--fg-2); max-width: 46ch; }

/* ---------- 28. Situation pages: each problem beside its response ---------- */
.pairs { border-top: 1px solid var(--ink); }
.pairs-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 clamp(24px, 4vw, 64px); padding: 12px 0 8px; }
.pairs-head .eyebrow { margin: 0; }
.pair { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 6px clamp(24px, 4vw, 64px); padding: 16px 0; margin: 0; border-top: 1px solid var(--line-2); align-items: start; }
.pair p { margin: 0; font-size: 16px; line-height: 1.5; position: relative; }
.pair-problem { color: var(--fg-2); padding-left: 22px; }
.pair-problem::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 10px; height: 1.5px; background: var(--line-2); }
.pair-response { color: var(--ink); padding-left: 24px; }
.pair-response::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 10px; height: 5px; border-left: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: rotate(-45deg); }
.figure-text .eyebrow { margin-bottom: 6px; }
@media (max-width: 800px) {
  .pairs-head { grid-template-columns: 1fr; }
  .pairs-head .eyebrow:last-child { display: none; }
  .pair { grid-template-columns: 1fr; gap: 8px; }
}

/* ---------- 29. About: company details pop-up ---------- */
.modal-card--wide { max-width: 640px; max-height: calc(100vh - 40px); overflow: auto; }
/* on phones the overlay itself scrolls (see §18), so a second scroller inside it cuts the card mid-sentence */
@media (max-width: 880px), (pointer: coarse) { .modal-card--wide { max-height: none; overflow: visible; } }
.modal-h { font-size: 22px; letter-spacing: -0.01em; margin: 6px 0 14px; }
.firm-card--plain { margin-top: 0; }
.modal--doc .eyebrow.mt-2 { display: block; }
html:not(.js) #disclosure { display: block; position: static; background: none; padding: 24px 0 0; }
html:not(.js) #disclosure .modal-card { max-width: none; padding: 0; }
html:not(.js) #disclosure .modal-x { display: none; }
.modal-sub { margin: -8px 0 14px; font-size: 14px; color: var(--fg-3); }

/* ---------- 30. Navigation: six links, one button ---------- */
@media (min-width: 1024px) { .nav-call { display: none; } .nav-mega--guides .nav-mega-inner { grid-template-columns: minmax(0, 1fr); } .nav-mega--guides .nav-mega-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1023px) {
  .nav-mega-list > li:not(.nav-mega-all):not(.nav-mega-countries) > a { display: block; height: auto; min-height: 0; padding: 9px 0; }
  .nav-mega-list > li:not(.nav-mega-all):not(.nav-mega-countries) > a:hover, .nav-mega-list > li:not(.nav-mega-all):not(.nav-mega-countries) > a[aria-current="page"] { background: none; color: var(--ink); }
}

/* ---------- 31. Depth rows, steps over a photo, dark card ---------- */
.depth { list-style: none; margin: 0; padding: 0; }
.depth li { display: grid; grid-template-columns: minmax(0, 1fr) 52px 10ch; gap: 10px; align-items: center; margin: 0; padding: 4px 0; font-size: 14px; }
.depth-bar { display: inline-flex; gap: 3px; }
.depth-bar i { display: block; width: 14px; height: 6px; background: var(--line); }
.depth-bar i.on { background: var(--data-1); }
.depth-level { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.03em; color: var(--fg-3); text-align: right; }
.thesis--steps { padding: clamp(40px, 5.5vw, 72px) 0; }
.thesis--steps .eyebrow { display: block; margin-bottom: 10px; }
.thesis--steps .thesis-row { grid-template-columns: 120px minmax(0, 1fr); }
.thesis-word--num { font-family: var(--font-mono); font-weight: 500; letter-spacing: -0.04em; }
.card-dark { display: flex; flex-direction: column; gap: 12px; padding: 22px 24px 24px; background: var(--ink); color: #fff; background-image: linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px); background-size: 22px 22px; }
.card-dark-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.65); }
.next-list--dark li { color: rgba(255, 255, 255, 0.82); }
.next-list--dark li::before { color: rgba(255, 255, 255, 0.55); }
.next-list--dark b { color: #fff; }
@media (max-width: 800px) { .thesis--steps .thesis-row { grid-template-columns: 64px minmax(0, 1fr); } }

/* ---------- 32. Country pages: three-column rows that fill ---------- */
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); align-items: stretch; }
.trio .block p { font-size: 15px; color: var(--fg-2); }
.trio .depth { margin-top: 4px; }
.trio .fact-note { margin-top: 10px; }
.outcome--trio p { font-size: clamp(17px, 1.35vw, 20px); }
/* three columns squeeze the depth rows onto two and three lines well before 900 */
@media (max-width: 1100px) { .trio { grid-template-columns: 1fr; } }
.depth li { max-width: 460px; }

/* ---------- 33. Buyer markets on the sourcing hub ---------- */
.markets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.market { background: #fff; padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 6px; }
.market-code { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--fg-3); }
.market h3 { margin: 0 0 6px; font-size: 19px; letter-spacing: -0.01em; }
.market-facts { margin: 0; display: grid; gap: 10px; }
.market-facts div { margin: 0; }
.market-facts dt { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 3px; }
.market-facts dd { margin: 0; font-size: 14px; line-height: 1.45; color: var(--fg-2); }
.market-detail { display: grid; gap: 0; }
.market-detail-row { padding: 16px 0; border-top: 1px solid var(--line-2); }
.market-detail-row:first-child { border-top: 0; padding-top: 4px; }
.market-detail-row h3 { margin: 0 0 8px; font-size: 17px; }
@media (max-width: 1000px) { .markets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .markets { grid-template-columns: 1fr; } }

/* ---------- 34. Five-port comparison and market links ---------- */
.markets-links { display: flex; flex-wrap: wrap; gap: 10px 32px; margin-top: 18px; }
.ports-india { margin: 16px 0 0; font-size: 15px; line-height: 1.5; color: var(--fg-2); max-width: 70ch; }

/* ---------- 35. Sources disclosure ---------- */
.sources { margin: 14px 0 0; border-top: 1px solid var(--line); }
.sources summary { cursor: pointer; padding: 12px 0; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); list-style: none; display: flex; align-items: center; gap: 10px; }
.sources summary::-webkit-details-marker { display: none; }
.sources summary::before { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform 0.2s var(--ease); }
.sources[open] summary::before { transform: rotate(45deg); }
.sources ul { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.sources li { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--fg-2); max-width: 90ch; }

/* ---------- 36. Pre-launch audit fixes ---------- */
.hero > .container, .page-hero > .container { width: 100%; }
.hero-strip { color: #fff; }
.page-hero .eyebrow { color: #fff; }
.page-hero .breadcrumbs { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); }
.breadcrumbs li { white-space: nowrap; }
html[lang="ja"] .hero h1, html[lang="ko"] .hero h1, html[lang^="zh"] .hero h1 { max-width: 24ch; }
.nav-mega-list > li.nav-mega-all, .nav-mega-list > li.nav-mega-countries { background: var(--paper-2); }
/* the "all situations" cell holds one link: centred it reads as a cell, at the foot it reads as an empty tile */
.nav-mega-list > li.nav-mega-all { justify-content: center; }
.nav-mega-aside { justify-content: flex-start; padding-top: 21px; }
/* the aside's rule stopped at the foot of the panel rather than at the foot of its card */
.nav-mega-inner { align-items: start; }
@media (min-width: 801px) { .figure-row-inner { grid-template-columns: minmax(max-content, 5fr) minmax(0, 7fr); } }
.figure-unit { margin-left: 0.28em; }
.lc-total .lc-bar { background: none; }
.form-row { grid-template-rows: auto auto auto; row-gap: 0; }
.form-row > .field { grid-row: span 3; grid-template-rows: subgrid; row-gap: 6px; }
.drivers { columns: 2; column-gap: 32px; }
.drivers li { break-inside: avoid; }
.market { display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 6px; align-content: start; }
.market > .market-facts { display: contents; }
html:not(.js) .modal:target { display: flex; }
.day-text { margin: 18px 0 0; font-size: 15px; line-height: 1.5; color: var(--fg-2); max-width: 40ch; }
.firm-card .arrow-link { font-size: 14px; }
@media (min-width: 900px) { .cta-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); justify-content: stretch; } .cta-steps li { text-align: left; } }
@media (max-width: 899px) { .cta-steps { display: grid; grid-template-columns: 1fr; justify-items: start; text-align: left; gap: 8px; } }
@media (max-width: 720px) {
  .btn-row .btn { width: 100%; }
  .drivers { columns: 1; }
}
/* drop the deepest crumb on phones, but never leave a lone "Home" on a two-level page */
@media (max-width: 520px) { .btn { white-space: normal; text-align: center; } .breadcrumbs li:last-child:not(:nth-child(2)) { display: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }
.photo picture { display: contents; }
@media (max-width: 720px) { .form-row { row-gap: 16px; } }
@media (max-width: 1023px) { .nav-mega-list > li.nav-mega-all, .nav-mega-list > li.nav-mega-countries { background: none; } }

/* ---------- 37. Confirmation review ---------- */
.cta-steps li { text-wrap: balance; }
@media (max-width: 720px) {
  figure.chart .figure-head { flex-direction: column; align-items: flex-start; gap: 6px; }
  figure.chart .figure-tag { white-space: normal; }
}
.fact-col .fact-note { margin: 10px 0 0; }

/* ---------- 38. CJK headings ---------- */
html[lang="ja"] .hero h1, html[lang="ko"] .hero h1, html[lang^="zh"] .hero h1 { max-width: 30ch; }
html[lang="ja"] .page-hero h1, html[lang="ko"] .page-hero h1, html[lang^="zh"] .page-hero h1 { max-width: 30ch; }
html[lang="ja"] .page-head h1, html[lang="ko"] .page-head h1, html[lang^="zh"] .page-head h1 { max-width: 34ch; }
html[lang="ja"] h1, html[lang="ja"] h2, html[lang="ja"] h3, html[lang="ja"] .tile-title, html[lang="ja"] .band-card-title { word-break: auto-phrase; }
html[lang^="zh"] h1, html[lang^="zh"] h2, html[lang^="zh"] h3, html[lang^="zh"] .tile-title, html[lang^="zh"] .band-card-title { word-break: normal; }

/* ---------- 39. Mobile review ---------- */
/* The chart scroll cue. An absolutely positioned overlay is laid out against the padding box of
   its own scroll container, so it travelled with the drawing and struck a white band across the
   bars. Two background layers instead: a shading pinned to the right edge (scroll), and under it
   a solid slab of the figure's own background that rides the content (local) and lands exactly on
   the shading at the end of the scroll. A chart that does not overflow scrolls to its end at rest,
   so the cue never appears over a drawing that fits. Behind the drawing, never over it. */
@media (max-width: 720px) {
  figure.chart {
    background-image: linear-gradient(90deg, var(--bg), var(--bg)), linear-gradient(90deg, rgba(20, 20, 20, 0), rgba(20, 20, 20, 0.14));
    background-position: right center;
    background-size: 44px 100%, 36px 100%;
    background-repeat: no-repeat;
    background-attachment: local, scroll;
  }
}
/* the step numeral is a column of its own, so a wrapped step lines up under its text, not under
   the numeral. Every width: in four columns the steps wrap in English too. */
.cta-steps li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; align-items: baseline; }
.cta-steps li b { margin-right: 0; }
@media (max-width: 1023px) {
  /* the panel is a flat list here, so the country chips have to follow the item they belong to
     rather than the position they hold in the desktop grid. Ordered, not moved: the markup and
     the desktop panel stay as they are. */
  .nav-mega--guides .nav-mega-list { display: flex; flex-direction: column; }
  .nav-mega--guides .nav-mega-list > li:nth-child(1) { order: 1; }
  .nav-mega--guides .nav-mega-list > li:nth-child(2) { order: 2; }
  .nav-mega--guides .nav-mega-list > li.nav-mega-countries { order: 3; }
  .nav-mega--guides .nav-mega-list > li:nth-child(3) { order: 4; }
  /* the last row of a panel is its sixth destination, not a caption closing the list */
  .nav-mega-all a { font-family: var(--font-body); font-size: 15.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink); }
}

/* ---------- The second line of work and the articles (30 September 2026) ---------- */
/* the two doors in the home page hero: one per line of work, the same size, so neither hides */
.hero-doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 780px; margin: 0 0 26px; }
.hero-door { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 20px; border: 1px solid rgba(255, 255, 255, 0.6); background: rgba(20, 20, 20, 0.42); color: #fff; text-decoration: none; transition: background 0.2s var(--ease), color 0.2s var(--ease); }
.hero-door-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-family: var(--font-display); font-weight: 600; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.2; letter-spacing: -0.02em; }
.hero-door-title::after { content: ""; flex: none; width: 8px; height: 8px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); }
.hero-door-text { font-size: 14.5px; line-height: 1.45; color: rgba(255, 255, 255, 0.86); }
.hero-door:hover { background: #fff; color: var(--ink); }
.hero-door:hover .hero-door-text { color: var(--fg-2); }
@media (max-width: 720px) { .hero-doors { grid-template-columns: 1fr; } }
/* the card in the Situations panel holds two buttons, one per line of work */
.nav-mega-card .btn-primary + .btn-primary { margin-top: 0; }
/* four tiles: four columns, then two by two, so no row is left with a hole */
.tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .tiles--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .tiles--4 { grid-template-columns: 1fr; } }
/* the Guides panel with two destinations (every language but English, which has the articles as a third): one row of two, the country chips below */
@media (min-width: 1024px) { .nav-mega--guides .nav-mega-list--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* articles */
.article-head h1 { max-width: 26ch; }
.article-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.article-list li { margin: 0; border-bottom: 1px solid var(--line); }
.article-list a { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 6px clamp(24px, 4vw, 64px); padding: 24px 0; text-decoration: none; }
.article-list-date { grid-row: 1 / span 3; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); padding-top: 6px; }
.article-list-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(20px, 1.9vw, 26px); line-height: 1.2; letter-spacing: -0.02em; max-width: 30ch; }
.article-list-text { font-size: 15.5px; line-height: 1.5; color: var(--fg-2); max-width: var(--prose); }
.article-list .arrow-link { margin-top: 6px; font-size: 14.5px; }
.article-list a:hover .article-list-title { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 720px) { .article-list a { grid-template-columns: 1fr; } .article-list-date { grid-row: auto; padding-top: 0; } }
.article-body table { width: 100%; border-collapse: collapse; margin: 0 0 1.4em; font-size: 15.5px; }
.article-body th, .article-body td { text-align: left; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--line); }
.article-body thead th { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); font-weight: 400; border-bottom: 1px solid var(--ink); }
.article-sources { font-size: 14.5px; color: var(--fg-2); }
/* A field that takes the whole row of a two-column form row (the market choice of the landed-cost calculator). */
.field--wide { grid-column: 1 / -1; }

/* ---------- New model, 4 October 2026: the fee cards, the free price check block, larger first button ---------- */
.btn-xl { padding: 18px 30px; font-size: 17px; font-weight: 600; }
.hero-cta { margin: 0 0 26px; }
.page-hero .btn-primary { background: #fff; color: var(--ink); border-color: #fff; }
.page-hero .btn-primary:hover { background: var(--paper); border-color: var(--paper); }
.fee-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(28px, 4vw, 48px); }
.fee-card { display: flex; flex-direction: column; gap: 14px; padding: 28px 28px 30px; background: #fff; border: 1px solid var(--line-2); }
.fee-card-label { font-size: 15px; font-weight: 500; color: var(--fg-2); }
.fee-card-figure { font-family: var(--font-display); font-weight: 600; font-size: clamp(40px, 4.4vw, 60px); letter-spacing: -0.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.fee-card-figure .price { font: inherit; letter-spacing: inherit; }
.fee-card-note { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--fg-2); }
.fee-card .btn { align-self: flex-start; margin-top: auto; }
.fee-card--ink { background: var(--ink); border-color: var(--ink); color: #fff; }
.fee-card--ink .fee-card-label, .fee-card--ink .fee-card-note { color: rgba(255, 255, 255, 0.82); }
.fee-card--ink .btn-primary, .check-card .btn-primary { background: #fff; color: var(--ink); border-color: #fff; }
.fee-card--ink .btn-primary:hover, .check-card .btn-primary:hover { background: var(--paper); border-color: var(--paper); }
.check-card { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding: clamp(28px, 4.5vw, 60px); background: var(--ink); color: #fff; }
.check-card h2 { color: #fff; font-size: clamp(34px, 4.4vw, 58px); margin: 10px 0 14px; }
.check-card-main p { font-size: clamp(16.5px, 1.35vw, 19px); line-height: 1.5; color: rgba(255, 255, 255, 0.88); max-width: 46ch; margin: 0 0 26px; }
.check-card-steps { list-style: none; margin: 0; padding: 0; display: grid; }
.check-card-steps li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 16px 0; border-top: 1px solid rgba(255, 255, 255, 0.22); }
.check-card-steps li:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.22); }
.check-card-steps span { font-family: var(--font-mono); font-size: 12px; color: rgba(255, 255, 255, 0.6); padding-top: 3px; }
.check-card-steps p { margin: 0; font-size: 15.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.86); }
.check-card-steps b { color: #fff; font-weight: 600; }
@media (max-width: 900px) {
  .fee-cards, .check-card { grid-template-columns: 1fr; }
}
/* the hub: the free check across the top, then the three kinds of work in one row (13 October 2026) */
@media (min-width: 901px) {
  .chooser--hub { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .chooser--hub .chooser-item--ink { grid-column: 1 / -1; min-height: 0; }
}
.chooser--hub .chooser-item--ink .chooser-name { font-size: clamp(26px, 3vw, 38px); }

/* ---------- The working top of a page: a price check field and the results as bars, on ink (4 October 2026) ---------- */
.work-hero { background-color: var(--ink); color: #fff; background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px); background-size: 56px 56px; background-position: center top; }
.work-hero-inner { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: center; padding-top: clamp(36px, 5vw, 72px); padding-bottom: clamp(40px, 6vw, 84px); }
.work-hero .breadcrumbs { color: rgba(255, 255, 255, 0.8); }
.work-hero h1 { color: #fff; font-size: clamp(32px, 4vw, 56px); max-width: 18ch; margin-bottom: 16px; }
.work-hero .lead { color: rgba(255, 255, 255, 0.86); max-width: 46ch; margin: 0; }
.work-hero :focus-visible { outline-color: #fff; }
.hero-check { display: flex; align-items: stretch; max-width: 540px; margin-top: 28px; background: #fff; border: 1px solid #fff; }
.hero-check input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; padding: 17px 18px; font: inherit; font-size: 16.5px; color: var(--ink); }
.hero-check input::placeholder { color: #6b6b68; }
.hero-check input:focus { outline: none; }
.hero-check:focus-within { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35); }
.hero-check button { flex: none; margin: 5px; padding: 0 22px; border: 0; background: var(--ink); color: #fff; font: inherit; font-size: 15px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background 0.15s; }
.hero-check button:hover { background: #000; }
.hero-check-hint { margin: 12px 0 0; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.03em; color: rgba(255, 255, 255, 0.62); }
.gap-chart { margin: 0; }
.gap-head { display: grid; gap: 12px; margin-bottom: 14px; }
.gap-legend { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 13.5px; color: rgba(255, 255, 255, 0.8); }
.gap-key { display: inline-flex; align-items: center; gap: 9px; }
.gap-key::before { content: ""; width: 22px; height: 10px; border: 1px solid rgba(255, 255, 255, 0.75); }
.gap-key--today::before { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0 1.5px, transparent 1.5px 5px); }
.gap-key--found::before { background: #fff; }
.gap-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 20px; align-items: center; padding: 15px 0; border-top: 1px solid rgba(255, 255, 255, 0.2); }
.gap-bar { position: relative; height: 28px; border: 1px solid rgba(255, 255, 255, 0.75); background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.34) 0 1.5px, transparent 1.5px 7px); }
.gap-bar i { position: absolute; top: -1px; bottom: -1px; left: -1px; width: var(--w); background: #fff; animation: gap-in 1.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: calc(0.3s + var(--d, 0s)); }
@keyframes gap-in { from { width: calc(100% + 2px); } to { width: var(--w); } }
.gap-num { margin: 0; min-width: 7.5ch; text-align: right; font-family: var(--font-display); font-weight: 600; font-size: clamp(20px, 2vw, 27px); letter-spacing: -0.02em; line-height: 1.1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.gap-num small { display: block; margin-top: 3px; font-family: var(--font-mono); font-weight: 400; font-size: 11.5px; letter-spacing: 0.03em; color: rgba(255, 255, 255, 0.65); }
.gap-chart figcaption { padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.2); font-size: 12.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.6); }
@media (max-width: 900px) {
  .work-hero-inner { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .hero-check { flex-direction: column; }
  .hero-check button { padding: 14px 22px; }
}
@media (prefers-reduced-motion: reduce) { .gap-bar i { animation: none; } }
@media print { .work-hero { background: #fff !important; color: var(--ink) !important; } .hero-check, .hero-check-hint { display: none !important; } }

/* ---------- What the firm works on, as examples (one site for every product, 4 October 2026) ---------- */
.products-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.products-strip-inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px clamp(24px, 4vw, 64px); align-items: center; }
.products-strip h2 { font-size: clamp(22px, 2.2vw, 30px); margin: 0 0 8px; }
.products-strip p { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--fg-2); max-width: 46ch; }
.product-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.product-chips li { margin: 0; padding: 8px 14px; border: 1px solid var(--line-2); background: #fff; font-size: 14.5px; }
@media (max-width: 900px) { .products-strip-inner { grid-template-columns: 1fr; } }

/* ---------- One visual language: ink, a fine grid, drawings from the firm's own numbers (4 October 2026) ---------- */
.work-hero--home .work-hero-inner { padding-top: clamp(48px, 7vw, 104px); padding-bottom: clamp(48px, 7vw, 104px); }
.work-hero--home h1 { font-size: clamp(36px, 4.8vw, 66px); max-width: 15ch; }
.work-hero .eyebrow { display: block; margin-bottom: 14px; }
.work-hero .btn-primary { background: #fff; color: var(--ink); border-color: #fff; }
.work-hero .btn-primary:hover { background: var(--paper); border-color: var(--paper); }
/* pricing: the three cards on ink; the free check is the white one */
.work-hero--plain { padding-bottom: clamp(40px, 5vw, 72px); border-bottom: 0; }
.work-hero .fee-card { background: rgba(20, 20, 20, 0.6); border-color: rgba(255, 255, 255, 0.4); color: #fff; }
.work-hero .fee-card-label, .work-hero .fee-card-note { color: rgba(255, 255, 255, 0.82); }
.work-hero .fee-card--ink { background: #fff; border-color: #fff; color: var(--ink); }
.work-hero .fee-card--ink .fee-card-label, .work-hero .fee-card--ink .fee-card-note { color: var(--fg-2); }
.work-hero .fee-card--ink .btn-primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.work-hero .fee-card--ink .btn-primary:hover { background: #000; border-color: #000; }
/* pricing: the worked example drawn, who keeps what of the saving */
.split-chart { margin: 0; border-top: 1px solid var(--ink); padding-top: 16px; }
.split-legend { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-bottom: 8px; font-size: 13.5px; color: var(--fg-2); }
.split-key { display: inline-flex; align-items: center; gap: 8px; }
.split-key::before { content: ""; width: 20px; height: 10px; border: 1px solid var(--ink); }
.split-key--keep::before, .split-seg--keep { background: var(--ink); }
.split-key--share::before, .split-seg--share { background: repeating-linear-gradient(135deg, rgba(20, 20, 20, 0.7) 0 1.5px, transparent 1.5px 5px); }
.split-key--fee::before, .split-seg--fee { background: #fff; }
.split-row { display: grid; gap: 8px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.split-label { font-family: var(--font-display); font-weight: 600; font-size: 17px; letter-spacing: -0.01em; }
.split-bar { display: flex; height: 34px; border: 1px solid var(--ink); transform-origin: left; animation: dg-grow 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.split-seg { display: block; min-width: 0; }
.split-seg + .split-seg { border-left: 1px solid var(--ink); }
.split-num { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em; color: var(--fg-2); }
/* the four pages: a drawing of the work */
.diagram { margin: 0; }
.diagram figcaption { padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.2); font-size: 12.5px; color: rgba(255, 255, 255, 0.6); }
.dg-row { display: grid; gap: 8px; padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, 0.2); }
.dg-label { font-size: 14.5px; line-height: 1.4; color: rgba(255, 255, 255, 0.88); }
.dg-bar { height: 26px; width: var(--w); background: #fff; transform-origin: left; animation: dg-grow 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: calc(0.2s + var(--d, 0s)); }
.dg-bar--hatch { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0 1.5px, transparent 1.5px 7px); border: 1px solid rgba(255, 255, 255, 0.75); }
@keyframes dg-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.dg-stack { display: flex; width: var(--w); height: 34px; border: 1px solid rgba(255, 255, 255, 0.75); transform-origin: left; animation: dg-grow 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s both; }
.dg-part { display: flex; align-items: center; min-width: 0; padding: 0 8px; overflow: hidden; white-space: nowrap; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; }
.dg-part--price { background: #fff; color: var(--ink); }
.dg-part--freight { background: rgba(255, 255, 255, 0.6); color: var(--ink); }
.dg-part--duty { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.45) 0 1.5px, transparent 1.5px 6px); color: #fff; text-shadow: 0 0 4px var(--ink), 0 0 4px var(--ink); }
.dg-checks { list-style: none; margin: 0; padding: 0; }
.dg-checks li { position: relative; display: grid; gap: 3px; margin: 0; padding: 14px 0 14px 40px; border-top: 1px solid rgba(255, 255, 255, 0.2); animation: dg-fade 0.6s ease both; animation-delay: calc(0.2s + var(--d, 0s)); }
.dg-checks li::before { content: ""; position: absolute; left: 0; top: 16px; width: 22px; height: 22px; background: #fff; }
.dg-checks li::after { content: ""; position: absolute; left: 6px; top: 22px; width: 10px; height: 5px; border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(-45deg); }
.dg-checks b { font-weight: 600; color: #fff; }
.dg-checks span { font-size: 14.5px; color: rgba(255, 255, 255, 0.78); }
@keyframes dg-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .dg-bar, .dg-stack, .dg-checks li, .split-bar { animation: none; } }
/* the menu panel: three pages in one row (13 October 2026), the two links in one row under them (no empty cell) */
@media (min-width: 1024px) {
  .nav-mega-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nav-mega-list > li.nav-mega-all { grid-column: 1 / -1; flex-direction: row; justify-content: flex-start; align-items: center; gap: 28px; padding: 12px 18px; }
}

/* ---------- The whole site in one language: the route map, the track, the closing band, the results card (4 October 2026) ---------- */
.ink-grid { background-color: var(--ink); color: #fff; background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px); background-size: 56px 56px; background-position: center top; }
.work-hero--plain h1 { max-width: 20ch; }
.work-hero--about h1 { font-size: clamp(30px, 3.4vw, 48px); max-width: 20ch; }
/* the route map */
.route-map { margin: 0; }
.route-map svg { display: block; width: 100%; height: auto; overflow: visible; }
.rm-grid line { stroke: rgba(255, 255, 255, 0.09); stroke-width: 0.6; }
.rm-arcs path { fill: none; stroke: rgba(255, 255, 255, 0.55); stroke-width: 0.9; stroke-dasharray: 3 5; animation: rm-flow 2.4s linear infinite; animation-delay: var(--d, 0s); }
@keyframes rm-flow { to { stroke-dashoffset: -32; } }
.rm-land path { fill: none; stroke: rgba(255, 255, 255, 0.4); stroke-width: 0.9; }
.rm-points circle { fill: #fff; }
.rm-ports rect { fill: var(--ink); stroke: #fff; stroke-width: 1.4; }
.route-map text { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.04em; text-transform: uppercase; fill: rgba(255, 255, 255, 0.85); }
.rm-ports text { fill: #fff; font-weight: 500; }
.rm-hub rect { fill: #fff; }
.rm-hub text { fill: #fff; font-weight: 500; }
.rm-pulse { fill: none; stroke: rgba(255, 255, 255, 0.7); stroke-width: 1; transform-box: fill-box; transform-origin: center; animation: rm-pulse 2.6s ease-out infinite; }
@keyframes rm-pulse { from { transform: scale(0.5); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }
.route-map figcaption { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.2); font-size: 12.5px; color: rgba(255, 255, 255, 0.62); }
@media (prefers-reduced-motion: reduce) { .rm-arcs path, .rm-pulse { animation: none; } }
/* home: Find, Check, Negotiate beside the map */
.thesis-map-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.thesis--map .thesis-row { grid-template-columns: 1fr; gap: 8px; padding: 18px 0; }
.thesis--map .thesis-word { font-size: clamp(26px, 2.8vw, 40px); text-shadow: none; }
.thesis--map .thesis-line { text-shadow: none; font-weight: 400; color: rgba(255, 255, 255, 0.88); }
/* the closing band */
.cta.ink-grid { padding: clamp(56px, 8vw, 104px) 0; }
.cta .hero-check { width: 100%; margin-top: 0; text-align: left; }
/* pricing: how it starts, as a track */
.steps-band { padding: clamp(44px, 6vw, 80px) 0; }
.stepper { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stepper li { position: relative; margin: 0; padding: 26px 24px 0 0; border-top: 1px solid rgba(255, 255, 255, 0.4); animation: dg-fade 0.6s ease both; animation-delay: calc(0.1s + var(--d, 0s)); }
.stepper li::before { content: ""; position: absolute; left: 0; top: -6px; width: 11px; height: 11px; background: #fff; }
.stepper-num { display: block; margin-bottom: 10px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.6); }
.stepper b { display: block; margin-bottom: 6px; font-family: var(--font-display); font-weight: 600; font-size: clamp(18px, 1.6vw, 22px); letter-spacing: -0.015em; line-height: 1.2; }
.stepper p { margin: 0; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, 0.8); }
/* the results card on the four pages */
.proof-card { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding: clamp(28px, 4.5vw, 60px); }
.proof-card h2 { color: #fff; margin: 10px 0 14px; }
.proof-card-text p { margin: 0 0 10px; font-size: 15.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.86); max-width: 44ch; }
.proof-card-text .proof-card-note { font-size: 12.5px; color: rgba(255, 255, 255, 0.6); }
.proof-card :focus-visible, .ink-grid :focus-visible { outline-color: #fff; }
@media (max-width: 900px) {
  .thesis-map-grid, .proof-card { grid-template-columns: 1fr; }
  .stepper { grid-template-columns: 1fr 1fr; row-gap: 28px; }
}
@media (max-width: 520px) { .stepper { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .stepper li { animation: none; } }
@media print { .ink-grid { background: #fff !important; color: var(--ink) !important; } }

/* A short note under a call button (Canadian French: calls are held in English). */
.call-note { margin: 10px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--fg-3); }
.cta .call-note { color: rgba(255, 255, 255, 0.78); margin-bottom: 0; }