/* ==========================================================================
   Amanyr — site.css · v4 · brand-guidelines.md 2026-07
   Palette: Papier/Jet (light) · Anthracite/Ivoire (dark) · Or poli = the one
   decision signal per view (8% rule); bronze family carries the warmth.
   Figures in IBM Plex Mono, display in Newsreader, body in Inter,
   wordmark in Presa UltraLight subset.
   ========================================================================== */

@font-face {
  font-family: "Presa Sub";
  src: url(data:font/woff2;base64,d09GMgABAAAAAAjcABIAAAAAEyAAAAh9AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAG1AcGgZgFotgAFAIIgmCcxEQCogkh1ISgUABNgIkAxgLDgAEIAWEfgcgDIImG4YRVQd6jwPgnWIU/18mmGO48oK+K8ApkctEL2u8QBhDFOLu/JwvFF7DKbyqnSz4hy+mxdRoyslO5MCsPfOh9/zvDAI1hdIUSfp6H6D22lmbXc+K/BTD8/zPsfs3NDEyZw2zRCQUT+Kni5VIS6tIJdrpo7RlXhXAz7+ddpr6fqSzAvHgyOvUDujtOL8GKmjlLZgDenvOLwiTWK42dYhov1ebzYbsBDXwqTU2joWJMff5XoBIExRBmIBTBWBZYcuuskbW3/9vmrgojt7HEBt7f/saIABd2Tzkduv99oCKAxD9QQDkZvt9lG5ISzhKomLiEMkkz7Dc0GtZVj4b7wSAVRW8AAmvHqGnADgNnkv+2C4AWjiXCGjf538+aPh0dAx1DWH1bFheb4pzjf30Q1kGeO4GkfQRMP2pRoBTKfnRIEboNAw6JgOL6cZY+bKJi5FgkxQnJUFa0s1I5SNLTpq8DI4sBTlcebfIyVuJsgIVLp4ivhKBsltVkZKXOAmApAgpUdJiNiOep6yE5shLUpACkgaWsYhsHlA5xcDlIRQgQVBgS0PSYqDKwsHg4QgIRKSVUGnIaFVQMWhYijhKeFsmpFYhapUaiTqZBsU2qam0aLQV6Shpl54yfRU7UE1pqMZInbGGTphqMtOyc+0UFjosdVnp6ZqNPlsDuzNMTjfCMMY0UQvbFMfMuuY2JONZ4FsSWGnI3toebJJK2ALYAdKBGAqDMC3KSgJjg3MguJA8paD5lhEkxgrh7OEdEBxVRAJYGZiIAkIFo0HQoWpgwqwFT8hG4CBxUXho9W2ASSCJJYUjjSdDIEvUnM2T4iuQKVIIqZRolOlUGFIt99SY1Fk02DQ5RFxinrTKXW0+HQFdSXpS9KUZyMiw3DGSZSzHRJ6pAjNFdy6MbcFSiZUyaxU2qmzV3J16LHsOGhw1OYk4i7louVftmG7cdXjo8tTjpc/bwP0YxvDlZ8TfGN6ADqAukJ4L60eHgBqAGYIbQRhb0iQaylRpGDNYczgLeEsrWEUlWquEbINii2qHZm91hygMRzWxnLCdcVxwXa3nFpnvTgDQkAhIDCIB2xQSSQYlh2lBCadC2BoZUYOiRfPA6JMXljfOfvARfAn8iPz1T9uXAhTAAGkMAbh176pTUVTDoFFhIgANA8KfET0B0TC6BQSgAgCAo9Ja5HXq5yorKHH1GpTXwwFAwLwdAe1w+i5CzggFiY4XaG8fhIZdbzFfgKx6XsfO7U2yVT5AV8MDyz4+gq16nU1W6xydrobeKTzes90pyWZvp623a/IaxL7fZvtTwoVeE2MnOz92j5/4zXroBg5sH4Zr5gvw3pT7Nj4Z8XbpR3eJZdF/dcel1b7kVVnL8PTIdPOodrdZbw9d3/c6mk8MT5dCuzAQhtY+2W8MZg7fOe9clAF5OetW+wpjFOrZMsKXU6T5qt88ilbdU6qheJLAE3mjBLn1IYF+x1mtQxk6arhGOCrpdMO+4rk/dPO17fMFtNU+a39Hu+TzP3I+AEZFxZFEYABABgAmQAFMAPYHAAAH+gUgKIKgU4qiWSlb39XYWd/lnXdGFszunUU7hpLB9R02obpkTOhbbr+pMU11tsOe0k76LlwJOzcK3Dihb2JefgPr1Bef/MdR3ROvENtYD7z++D3k6Owldzz0kG5y8uGs9WFLn17Ys//Dlt0VJz4wa/8t1i8742cndJ+M6mfcRv9vM5UD7iyfJD+sn/TojNKrklNwC1fVL9l2WeryIHH5RaUn86mb+ceYt/m2xw4/Mly7b1gfcZ8z5vx/1pXvbTz/+xu6ix0t9XW1Ym5dV3fly9+uaCcAIJANAXScCGDhzIMA7O0wLAwwX/AwNJSOrzwECUCmk6sXLRaIbfSy7kFw2vDKaga031LYsJbLNNwbUKmRoYqRa75QgDcCdk+gGwL6VIQDzrcoJzjqMV/OV9SMu9n8MCQa2WM5IZNWIaDnbClPKpKgm2FiMWJFKNWzGgH5N9polnBvEX+FSRvepmRm0Rl7qBJfQnyYePdFlNLHUbXkQBKIkx+8TUPCR3D8BAd9bvjQOBzNLmS19EgoO8vBcrJcLDfLg/KifCg/yl+HHr/sqv2fGu7bWM8CTvMgLOrwBpBZGzFFOLgoIDdrK9pg6rfFhIALPe7qz1T7n10TAogLDzH5M5arFJ7H8jRZ8hMFko0A+91cDCAHUCdVSVK4quiaJOdeWjQ0WYECU/eJ1+pYhqJqch3bVDVdqRO3VN1QJxOWloybKTsLpqWOlYkbln2rWD5pxuJm0nYzcUhqr5YoZe1EKpZNevl4KmPnM76TSLeo42RqxVT2EcX8nErGcdMVd0E1V4x+q2ppSc0p+/laZcUs16sWZgVr5pWqLcV5tbalwax53tK5fata5i+asWoRCIDA599CwZb2ut9Uh/0AwIsn42oAXvp/nE+jXsoOBqChAIAAO49259aNtODfCSA+P5JcfoUeRf/SU9BfvsmqreowNBCA7AAcABAAoAPFPgEAoNgE8wZkRAN0CNVEq79qKubnauaa4npurJa0l+jbk20o3yk6Ofu48rk8d0CaKQPAIFAowPABNDzs+XRAm+7qzndk+wJKetfREsFcBLy6IC1uf5sz35ttD2I6OYD6shBAtbfPuBlykyIbxD7zyWaB9JR/1QFje3dXutYS/i9Vx0hdT91MWQukqKsNohoYsLke9nTXhV2cMhSnq0PCXWOn13NH0DXZhKfd+E6OABQE4QuOKe59ynennv32yR49mn0zvi5JV0ZDzKejiGd7toC5HkIo6Ap5CGpVHn/EY25zvM2tAqgrcnOaV+6n67PeIoGM3Jyh6yTTd22bs/Qfj/nE+Jd4HHG2A21+vzntrjlm6CSuR765NPWTZCJuqnjnnniIjVBWBPBXBgAA) format("woff2");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --bg: #F4F2EE;            /* Papier */
  --surface: #FDFCF8;
  --surface-2: #EFECE5;
  --ink: #2E3138;           /* Jet */
  --ink-2: color-mix(in srgb, #2E3138 82%, #F4F2EE);  /* secondary text — real color, not opacity */
  --muted: #5E646C;         /* Acier, darkened for AA: 5.3:1 on Papier, 5.1:1 on the beige band, 4.7:1 on the bronze band at 11px */
  --muted-soft: #8F959E;    /* true tertiary de-emphasis only */
  --bronze: #8A6A2F;
  --bronze-2: #B08D4C;      /* quiet structural marks — depth inside the accent family */
  --gold: #EF9F27;          /* Or poli — the decision signal, max 8% */
  --gold-ink: #633806;      /* Bronze profond — ink on gold */
  --hairline: rgba(99, 56, 6, 0.15);          /* warm rules on warm paper */
  --hairline-strong: rgba(99, 56, 6, 0.34);
  --ghost: rgba(46, 49, 56, 0.06);
  --warm: color-mix(in srgb, #EF9F27 7%, #F4F2EE);
  --warm-card: color-mix(in srgb, #EF9F27 4%, #FBFAF6);
  --bronze-band: color-mix(in srgb, #B08D4C 14%, #F4F2EE);
  --beige-band: #EFECE5;
  --slide-shadow: 0 24px 60px -24px rgba(56, 44, 24, 0.42), 0 6px 16px -8px rgba(56, 44, 24, 0.22);
  --card-shadow: 0 18px 44px -28px rgba(56, 44, 24, 0.38);
  --card-rest: 0 1px 0 rgba(46, 49, 56, 0.04), 0 12px 32px -26px rgba(56, 44, 24, 0.4);
  --track-label: 0.16em;    /* one tracking for every uppercase micro label */
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --presa: "Presa Sub", "Presa UltraLight ANTIPIXEL.COM.AR", var(--sans);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #1F2227;
    --surface: #23262C;      /* Anthracite */
    --surface-2: #2A2E35;
    --ink: #F2EFE8;          /* Ivoire */
    --ink-2: color-mix(in srgb, #F2EFE8 80%, #1F2227);
    --muted: #8F959E;
    --muted-soft: #7A8089;
    --bronze: #B08D4C;
    --bronze-2: #B08D4C;
    --hairline: rgba(242, 239, 232, 0.14);
    --hairline-strong: rgba(242, 239, 232, 0.3);
    --ghost: rgba(242, 239, 232, 0.055);
    --warm: color-mix(in srgb, #EF9F27 11%, #1F2227);
    --warm-card: color-mix(in srgb, #EF9F27 5%, #23262C);
    --bronze-band: color-mix(in srgb, #B08D4C 18%, #1F2227);
    --beige-band: #282C34;
    --slide-shadow: 0 26px 60px -22px rgba(0, 0, 0, 0.65), 0 6px 18px -8px rgba(0, 0, 0, 0.45);
    --card-shadow: 0 18px 44px -28px rgba(0, 0, 0, 0.6);
    --card-rest: 0 1px 0 rgba(0, 0, 0, 0.2), 0 12px 32px -26px rgba(0, 0, 0, 0.55);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1F2227;
  --surface: #23262C;
  --surface-2: #2A2E35;
  --ink: #F2EFE8;
  --ink-2: color-mix(in srgb, #F2EFE8 80%, #1F2227);
  --muted: #8F959E;
  --muted-soft: #7A8089;
  --bronze: #B08D4C;
  --bronze-2: #B08D4C;
  --hairline: rgba(242, 239, 232, 0.14);
  --hairline-strong: rgba(242, 239, 232, 0.3);
  --ghost: rgba(242, 239, 232, 0.055);
  --warm: color-mix(in srgb, #EF9F27 11%, #1F2227);
  --warm-card: color-mix(in srgb, #EF9F27 5%, #23262C);
  --bronze-band: color-mix(in srgb, #B08D4C 18%, #1F2227);
  --beige-band: #282C34;
  --slide-shadow: 0 26px 60px -22px rgba(0, 0, 0, 0.65), 0 6px 18px -8px rgba(0, 0, 0, 0.45);
  --card-shadow: 0 18px 44px -28px rgba(0, 0, 0, 0.6);
  --card-rest: 0 1px 0 rgba(0, 0, 0, 0.2), 0 12px 32px -26px rgba(0, 0, 0, 0.55);
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { font-size: clamp(16px, 15px + 0.3vw, 19px); scroll-padding-top: 96px; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: vt-out 0.18s ease both; }
  ::view-transition-new(root) { animation: vt-in 0.26s ease both; }
  @keyframes vt-out { to { opacity: 0; } }
  @keyframes vt-in { from { opacity: 0; transform: translateY(6px); } }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.92rem;
  line-height: 1.6;
}
/* thin light-on-dark text only; light-mode ink keeps full subpixel weight */
.band-dark, .slide, .panel-gold .btn-gold { -webkit-font-smoothing: antialiased; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body { -webkit-font-smoothing: antialiased; }
}
:root[data-theme="dark"] body { -webkit-font-smoothing: antialiased; }
p, li { text-wrap: pretty; }
::selection { background: color-mix(in srgb, var(--bronze) 24%, var(--bg)); color: var(--ink); }
.panel-gold ::selection { background: #633806; color: #F7E9CE; }
a, button, summary { -webkit-tap-highlight-color: transparent; }
/* one focus ring for the whole site (components may re-tune offset) */
:focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; }
.panel-gold :focus-visible { outline-color: #633806; }
/* paper grain — under the content (wrap is z2, header z100), over the band fills */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.5'/></svg>");
  opacity: 0.06;
}
a { color: inherit; }
img, svg { max-width: 100%; }
@media print {
  [data-reveal], [data-reveal-stagger] > *, .eyebrow::after,
  .line-journey .lj-path, .line-journey .lj-label, .line-journey .lj-node,
  .line-journey .lj-dot, .chain .ck-ring, .chain .ck-text { opacity: 1 !important; transform: none !important; animation: none !important; }
  body::after, .spine, .deco-line, .grid-paper, .menu-btn, .skip-link { display: none !important; }
  header.site { position: static; }
  .band-dark, .slide { --ink: #2E3138; color: #2E3138; }
}
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 clamp(24px, 4.5vw, 56px); position: relative; z-index: 2; }
.mono-label {
  font-family: var(--sans);
  font-size: 0.63rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.fig { font-variant-numeric: tabular-nums; }
.skip-link {
  position: absolute; left: -9999px; top: 12px;
  background: var(--ink); color: var(--bg);
  font-family: var(--sans); font-size: 0.72rem; letter-spacing: var(--track-label); text-transform: uppercase;
  padding: 10px 16px; border-radius: 3px; z-index: 200; text-decoration: none;
}
.skip-link:focus-visible { left: 12px; }

/* ---------- bands: full-bleed section grounds ---------- */
.band { position: relative; }
/* light grounds shift by tone with a soft self-shadow at the top edge, so
   each seam reads as a plane change — gradients, never hairlines, so nothing
   crosses the scroll line in the gutter */
.band-warm { background: linear-gradient(180deg, color-mix(in srgb, #2E3138 3%, var(--warm)), var(--warm) 120px); }
.band-bronze { background: linear-gradient(180deg, color-mix(in srgb, #2E3138 3%, var(--bronze-band)), var(--bronze-band) 120px); }
.band-beige { background: linear-gradient(180deg, color-mix(in srgb, #2E3138 3.5%, var(--beige-band)), var(--beige-band) 120px); }
.band-dark {
  /* interior light: a faint warm cast from above stages the slide */
  background: radial-gradient(110% 60% at 60% 0%, color-mix(in srgb, #B08D4C 6%, #23262C), #23262C 62%);
  --bg: #23262C;
  --surface: #2A2E35;
  --surface-2: #31353D;
  --ink: #F2EFE8;
  --ink-2: color-mix(in srgb, #F2EFE8 80%, #23262C);
  --muted: #8F959E;
  --muted-soft: #7A8089;
  --bronze: #B08D4C;
  --bronze-2: #B08D4C;
  --hairline: rgba(242, 239, 232, 0.14);
  --hairline-strong: rgba(242, 239, 232, 0.3);
  --ghost: rgba(242, 239, 232, 0.05);
  --warm-card: color-mix(in srgb, #EF9F27 6%, #2A2E35);
  --card-shadow: 0 18px 44px -28px rgba(0, 0, 0, 0.6);
  --card-rest: 0 1px 0 rgba(0, 0, 0, 0.2), 0 12px 32px -26px rgba(0, 0, 0, 0.55);
  color: var(--ink);
}
/* dark mode: the statement band becomes a darker well instead of vanishing */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .band-dark {
    background: radial-gradient(110% 60% at 60% 0%, color-mix(in srgb, #B08D4C 5%, #171A1E), #171A1E 62%);
    --bg: #171A1E;
    --surface: #23262C;
    --surface-2: #2A2E35;
  }
}
:root[data-theme="dark"] .band-dark {
  background: radial-gradient(110% 60% at 60% 0%, color-mix(in srgb, #B08D4C 5%, #171A1E), #171A1E 62%);
  --bg: #171A1E;
  --surface: #23262C;
  --surface-2: #2A2E35;
}

/* ---------- reveal on scroll ---------- */
@media (prefers-reduced-motion: no-preference) {
  html:where(.js) [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity 0.3s var(--ease-soft), transform 0.3s var(--ease-soft); }
  html:where(.js) h2[data-reveal], html:where(.js) .lede[data-reveal] { opacity: 1; transform: none; }
  [data-reveal].is-in { opacity: 1; transform: none; }
  html:where(.js) [data-reveal-stagger] > * { opacity: 0; transform: translateY(12px); transition: opacity 0.3s var(--ease-soft), transform 0.3s var(--ease-soft); }
  [data-reveal-stagger].is-in > * { opacity: 1; transform: none; }
  [data-reveal-stagger].is-in > *:nth-child(2) { transition-delay: 0.05s; }
  [data-reveal-stagger].is-in > *:nth-child(3) { transition-delay: 0.1s; }
  [data-reveal-stagger].is-in > *:nth-child(4) { transition-delay: 0.15s; }
  [data-reveal-stagger].is-in > *:nth-child(5) { transition-delay: 0.15s; }
  [data-reveal-stagger].is-in > *:nth-child(6) { transition-delay: 0.15s; }
  /* the accent flash: bronze-edged cards land with a brief gold edge that settles */
  [data-reveal-stagger].is-in .pain { animation: accent-settle 1.6s ease 0.25s backwards; }
  @keyframes accent-settle { from { border-left-color: var(--bronze-2); } to { border-left-color: var(--bronze); } }
}

/* ---------- header ---------- */
header.site {
  position: sticky; top: 0; z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease, background 0.25s ease;
}
header.site.is-scrolled {
  border-bottom-color: var(--hairline);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
header.site .bar {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  /* the chrome is a full-width bar with its own consistent gutter — wide
     enough for the whole nav, and never touching the screen edge */
  max-width: 1200px;
  padding: 18px clamp(24px, 4.5vw, 56px);
}
nav.site-nav a { white-space: nowrap; }
.lockup { display: flex; flex: none; align-items: center; gap: 16px; text-decoration: none; }
.lockup svg { display: block; height: 38px; width: auto; color: var(--ink); }
.wordmark {
  font-family: var(--presa);
  font-weight: 200;
  font-size: 1.1rem;
  letter-spacing: 0.34em;
  text-indent: 0.02em;
  color: var(--ink);
  transform: translateY(1px);
  white-space: nowrap;
}
nav.site-nav { display: flex; gap: 32px; align-items: center; }
nav.site-nav a {
  font-family: var(--sans);
  font-size: 0.64rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
  transition: color 0.18s ease;
  position: relative;
  padding-bottom: 3px;
}
nav.site-nav a:hover, nav.site-nav a:focus-visible { color: var(--ink); }
/* a bronze dot between the sections of the nav, same ink as the current-page underline (not before the first, the call, or the language menu) */
nav.site-nav > a:not(:first-child):not(.nav-cta)::before,
nav.site-nav > .nav-menu::before {
  content: ""; position: absolute; left: -17.5px; top: 50%; width: 3px; height: 3px; margin-top: -2.5px;
  border-radius: 50%; background: var(--bronze);
}
@media (max-width: 1240px) { nav.site-nav > a:not(:first-child):not(.nav-cta)::before, nav.site-nav > .nav-menu::before { left: -13.5px; } }
nav.site-nav a[aria-current="page"] { color: var(--ink); }
nav.site-nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; bottom: -4px;
  width: 100%; height: 2px; background: var(--bronze);
}
nav.site-nav a.nav-cta {
  color: var(--gold-ink);
  background: var(--gold);
  border-radius: 3px;
  padding: 9px 14px;
  box-shadow: inset 0 0 0 1px transparent;
  transition: filter 0.18s ease, background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
nav.site-nav a.nav-cta:hover, nav.site-nav a.nav-cta:focus-visible { filter: brightness(0.94); color: var(--gold-ink); }
nav.site-nav a.nav-cta::after { display: none; }
/* one gold decision per viewport: while the hero's own gold button is on screen
   the bar's CTA is an outline; it turns gold the moment the hero button scrolls away */
header.site.cta-quiet nav.site-nav a.nav-cta {
  background: transparent; color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--hairline-strong);
}
header.site.cta-quiet nav.site-nav a.nav-cta:hover,
header.site.cta-quiet nav.site-nav a.nav-cta:focus-visible {
  filter: none; color: var(--ink); background: var(--warm-card);
  box-shadow: inset 0 0 0 1px var(--bronze);
}
.lang-switch { border-left: 1px solid var(--hairline); padding-left: 20px; }
.lang-switch + .lang-switch { border-left: none; padding-left: 0; }
/* language menu: a globe in the bar, the languages only in the dropdown */
.lang-menu { position: relative; }
nav.site-nav .lang-menu { border-left: 1px solid var(--hairline); padding-left: 20px; }
.lang-menu > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center;
  padding: 13px; margin: -13px; /* 41px hit area around the 15px glyph */
  color: var(--muted); transition: color 0.18s ease;
}
.lang-menu > summary::-webkit-details-marker { display: none; }
.lang-menu > summary svg { width: 15px; height: 15px; display: block; transform: translateY(2px); }
.lang-menu > summary:hover, .lang-menu > summary:focus-visible,
.lang-menu[open] > summary { color: var(--ink); }
.lang-menu .lang-panel {
  position: absolute; top: calc(100% + 12px); right: -10px; z-index: 40;
  min-width: 136px; padding: 6px;
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: 6px; box-shadow: var(--card-shadow);
}
nav.site-nav .lang-panel a, footer.site .lang-panel a { display: block; padding: 9px 12px 9px; border-radius: 4px; }
nav.site-nav .lang-panel a:hover, nav.site-nav .lang-panel a:focus-visible,
footer.site .lang-panel a:hover, footer.site .lang-panel a:focus-visible { background: var(--warm-card); color: var(--ink); }
nav.site-nav .lang-panel a.is-current, footer.site .lang-panel a.is-current { color: var(--ink); }
nav.site-nav .lang-panel a.is-current::after, footer.site .lang-panel a.is-current::after {
  content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--bronze); margin-left: 8px; vertical-align: 1px;
  position: static;
}
/* in the footer the menu opens upward — the page ends just below it */
footer.site .lang-menu .lang-panel { top: auto; bottom: calc(100% + 12px); right: auto; left: -10px; }

/* mobile menu */
.menu-btn {
  display: none;
  background: none; border: 1px solid var(--hairline); border-radius: 3px;
  color: var(--ink); font-family: var(--sans); font-size: 0.68rem;
  letter-spacing: var(--track-label); text-transform: uppercase;
  min-height: 40px; padding: 10px 15px; cursor: pointer;
}
/* mid widths: keep the full nav, tighter — FR/IT labels are the longest */
@media (max-width: 1240px) {
  nav.site-nav { gap: 24px; }
  nav.site-nav a.nav-cta { padding: 9px 12px; }
}
@media (max-width: 960px) {
  .menu-btn { display: inline-block; }
  nav.site-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--hairline);
    padding: 8px clamp(24px, 5vw, 60px) 18px;
    display: none;
  }
  nav.site-nav.is-open { display: flex; }
  nav.site-nav a { padding: 12px 0 6px; font-size: 0.72rem; }
  nav.site-nav a[aria-current="page"]::after { bottom: 0; width: 28px; }
  nav.site-nav > a::before, nav.site-nav > .nav-menu::before { display: none; }
  nav.site-nav a.nav-cta { margin-top: 12px; padding: 12px 18px; }
  .lang-switch { border-left: none; padding-left: 0; }
  /* in the collapsed menu the language list expands in place, no floating panel */
  nav.site-nav .lang-menu { border-left: none; padding: 12px 0 6px; }
  nav.site-nav .lang-menu .lang-panel {
    position: static; min-width: 0; margin-top: 6px; padding: 0;
    background: none; border: none; box-shadow: none;
  }
  nav.site-nav .lang-panel a { padding: 8px 0; }
  nav.site-nav .lang-panel a:hover { background: none; }
}

/* ---------- the scroll line: draws itself down the page as you scroll ----
   Injected by site.js. Document-anchored in the empty LEFT margin, outside
   the content column, so it never overlaps anything. Faint track previews
   the path; the fill draws down to the reader; the gold point rides the tip. */
.spine {
  position: absolute;
  width: 1px;
  z-index: 1;
  pointer-events: none;
  display: none;
}
@media (min-width: 1000px) { .spine { display: block; } }
.spine .track { position: absolute; inset: 0; width: 1px; background: var(--hairline); opacity: 0.7; }
.spine .fill {
  position: absolute; top: 0; left: 0; width: 1px; height: 0%;
  background: linear-gradient(to bottom, var(--bronze) 60%, var(--gold));
}
.spine .dot {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 18%, transparent);
  transition: opacity 0.3s ease;
}

/* ---------- hero ---------- */
.hero-band { position: relative; overflow: hidden; }
/* warm glow where the line lands — layered, origin above the band so the
   light flows down through the (transparent) header instead of starting
   in a hard seam below it */
.hero-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(40% 42% at 80% -14%, color-mix(in srgb, #EF9F27 11%, transparent), transparent 70%),
    radial-gradient(80% 70% at 76% -10%, color-mix(in srgb, #B08D4C 7%, transparent), transparent 85%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero-band::before {
    background:
      radial-gradient(40% 42% at 80% -14%, color-mix(in srgb, #EF9F27 12%, transparent), transparent 70%),
      radial-gradient(80% 70% at 76% -10%, color-mix(in srgb, #B08D4C 7%, transparent), transparent 85%);
  }
}
:root[data-theme="dark"] .hero-band::before {
  background:
    radial-gradient(40% 42% at 80% -14%, color-mix(in srgb, #EF9F27 12%, transparent), transparent 70%),
    radial-gradient(80% 70% at 76% -10%, color-mix(in srgb, #B08D4C 7%, transparent), transparent 85%);
}
/* chart gridlines, not graph paper: warm bronze levels, held to the
   line's quadrant so they read as chart scaffolding, not lined paper */
.hero-band .grid-paper {
  position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(color-mix(in srgb, var(--bronze) 24%, transparent) 1px, transparent 1px);
  background-size: 100% 56px;
  opacity: 0.4;
  -webkit-mask-image: radial-gradient(62% 95% at 84% 0%, black 0%, transparent 68%);
  mask-image: radial-gradient(62% 95% at 84% 0%, black 0%, transparent 68%);
}
.hero-band .deco-line {
  position: absolute; right: -16px; top: 12px;
  width: min(44vw, 560px);
  pointer-events: none;
  color: var(--bronze);
  /* the tail fades out before it reaches the hero copy */
  -webkit-mask-image: linear-gradient(to top right, transparent 4%, black 30%);
  mask-image: linear-gradient(to top right, transparent 4%, black 30%);
}
@media (max-width: 760px) { .hero-band .deco-line { display: none; } }
/* the chart draws itself once and holds — the line terminates, it doesn't
   erase itself; only the gold point keeps a quiet pulse */
@media (prefers-reduced-motion: no-preference) {
  .deco-line .dl-path {
    stroke-dasharray: 1; stroke-dashoffset: 1;
    animation: draw 1.6s var(--ease-out) 0.4s forwards;
  }
  .deco-line .dl-dot {
    transform: scale(0); transform-origin: center; transform-box: fill-box;
    animation: land 0.45s var(--ease-out) 1.9s forwards;
  }
  .deco-line .dl-halo { animation: halo-pulse 3.2s ease-in-out 2.6s infinite; }
}
.deco-line .dl-halo {
  fill: none; stroke: var(--gold); stroke-width: 1.5;
  opacity: 0; transform-origin: center; transform-box: fill-box;
}
/* quiet chart furniture: mono axis label + right-edge ticks */
.deco-line .dl-tick { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; fill: var(--muted); }
.deco-line .dl-axis line { stroke: color-mix(in srgb, var(--bronze) 40%, transparent); stroke-width: 1; }
/* room under the header scales with the screen: ~15% of the viewport height, between 80 and 180px */
.hero { position: relative; padding: clamp(80px, 15vh, 180px) 0 44px; }
.hero .eyebrow { color: var(--bronze); margin: 0 0 18px; display: block; }
h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.55rem, 3vw, 2.15rem);
  line-height: 1.12;
  letter-spacing: -0.014em;
  text-wrap: balance;
  max-width: 33ch;
  margin: 0 0 18px;
}
/* home hero stays a two-line balanced headline in both languages */
.hero h1 { max-width: 20ch; }
.hero .sub {
  max-width: 76ch;
  font-size: 0.98rem;
  color: var(--ink-2);
  margin: 0 0 28px;
}
.cta-row { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.btn-gold {
  display: inline-block;
  background: var(--gold);
  color: var(--gold-ink);
  font-family: var(--sans);
  font-size: 0.76rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  text-decoration: none;
  padding: 15px 26px;
  border-radius: 3px;
  transition: filter 0.18s ease, transform 0.18s var(--ease-out), box-shadow 0.3s ease;
}
.btn-gold:hover, .btn-gold:focus-visible {
  filter: brightness(0.95);
  transform: translateY(-1px);
  box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--gold) 55%, transparent);
}
.btn-gold:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.btn-line {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.76rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  /* solid ground: the hero chart passes behind this button */
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: 3px;
  padding: 14px 24px;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s var(--ease-out);
}
.btn-line:hover, .btn-line:focus-visible { border-color: var(--bronze); background: var(--warm-card); transform: translateY(-1px); }
button.btn-gold { border: 0; cursor: pointer; appearance: none; }
.btn-gold:active { transform: translateY(0); filter: brightness(0.9); box-shadow: 0 4px 12px -8px color-mix(in srgb, var(--gold) 55%, transparent); transition-duration: 0.06s; }
.btn-line:active, nav.site-nav a.nav-cta:active { transform: translateY(0); transition-duration: 0.06s; }
.svc:active, .note:active, .pain:active, .guardrail:active, .deliv:active, .sprint-card:active { transform: translateY(-1px); }

/* the travelling-line link: line grows, terminates in a gold point */
.link-arrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--bronze);
  text-decoration: none;
}
/* fixed-width track: the line fills toward the gold point without moving
   the label, so the hover reads identically wherever it appears */
.link-arrow .line {
  display: inline-block; position: relative;
  width: 44px; height: 1px; flex: none;
}
.link-arrow .line::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 26px; background: currentColor;
  transition: width 0.25s var(--ease-out);
}
.link-arrow .line::after {
  content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%) scale(0);
  width: 6px; height: 6px; border-radius: 50%; background: var(--gold);
  transition: transform 0.25s var(--ease-out);
}
.link-arrow:hover, .link-arrow:focus-visible { color: var(--ink); }
.link-arrow:hover .line::before, .link-arrow:focus-visible .line::before { width: 100%; }
.link-arrow:hover .line::after, .link-arrow:focus-visible .line::after { transform: translateY(-50%) scale(1); }

/* hero entrance + mark self-draw */
@media (prefers-reduced-motion: no-preference) {
  .hero > * { animation: rise 0.7s var(--ease-out) both; }
  .hero > *:nth-child(2) { animation-delay: 0.08s; }
  .hero > *:nth-child(3) { animation-delay: 0.16s; }
  .hero > *:nth-child(4) { animation-delay: 0.24s; }
  .hero > *:nth-child(5) { animation-delay: 0.32s; }
  @keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
  .draw-mark path {
    stroke-dasharray: 1; stroke-dashoffset: 1;
    animation: draw 1.1s var(--ease-out) 0.15s forwards;
  }
  .draw-mark circle {
    transform-origin: center; transform-box: fill-box;
    transform: scale(0);
    animation: land 0.4s var(--ease-out) 1.05s forwards;
  }
  @keyframes draw { to { stroke-dashoffset: 0; } }
  @keyframes land { from { transform: scale(0); } 60% { transform: scale(1.25); } to { transform: scale(1); } }
}

/* ---------- chapters ---------- */
section.chapter { position: relative; padding: 48px 0 42px; }
.eyebrow { display: block; color: var(--bronze); margin-bottom: 18px; }
/* colored draw: a bronze rule extends under each eyebrow as it enters */
.eyebrow::after {
  content: ""; display: block;
  width: 40px; height: 2px;
  background: linear-gradient(90deg, var(--bronze), var(--gold));
  margin-top: 12px;
}
@media (prefers-reduced-motion: no-preference) {
  html:where(.js) .eyebrow::after { transform: scaleX(0); transform-origin: left; transition: transform 0.7s var(--ease-out) 0.15s; }
  .is-in .eyebrow::after, .eyebrow.is-in::after { transform: scaleX(1); }
}
h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.18rem, 2vw, 1.45rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
  max-width: 50ch;
  margin: 0 0 13px;
}
h3 { font-family: var(--serif); font-weight: 500; text-wrap: balance; }
.lede { max-width: 66ch; font-size: 0.88rem; color: var(--ink-2); margin: 0 0 24px; }

/* ---------- problem: four icons on one line, quote under each ---------- */
.pain-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 26px;
}
@media (max-width: 920px) { .pain-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .pain-grid { grid-template-columns: 1fr; } }
.pain .p-icon {
  display: block; width: 26px; height: 26px;
  color: var(--bronze);
  margin-bottom: 11px;
}
.pain {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-left-color: var(--bronze); /* the bronze edge the reveal lands on stays (2026-10-07) */
  border-radius: 6px;
  box-shadow: var(--card-rest);
  padding: 16px 18px;
  transition: transform 0.25s var(--ease-out), border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.pain:hover { transform: translateY(-2px); border-color: var(--bronze); background: var(--warm-card); box-shadow: var(--card-shadow); }
.pain .p-tag {
  font-family: var(--sans); font-size: 0.6rem; letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--bronze);
  display: block; margin-bottom: 7px;
}
.pain p { font-family: var(--serif); font-size: 0.88rem; line-height: 1.5; margin: 0; }
.pain-verdict { max-width: 66ch; font-size: 0.88rem; margin: 0; }
/* the problem chapter breathes more than the others */
.problem-chapter { padding: 72px 0 64px; }
.problem-chapter h2 { margin-bottom: 18px; }
.problem-chapter .lede { margin-bottom: 36px; }
.problem-chapter .pain-grid { gap: 24px; margin-bottom: 40px; }
.problem-chapter .pain { padding: 24px 24px 26px; }
.problem-chapter .pain .p-icon { margin-bottom: 16px; }
.problem-chapter .pain .p-tag { margin-bottom: 10px; }
.problem-chapter .pain p { line-height: 1.6; }
.problem-chapter .pain-verdict { margin-bottom: 22px; }
@media (max-width: 720px) {
  .problem-chapter { padding: 56px 0 48px; }
  .problem-chapter .pain-grid { gap: 18px; margin-bottom: 32px; }
}

/* ---------- method / the line diagram ---------- */
.thesis-quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.05rem, 1.9vw, 1.3rem);
  line-height: 1.4;
  max-width: 46ch;
  text-wrap: balance;
  margin: 0 0 32px;
}
.line-journey { margin: 0 0 36px; }
.line-journey svg { display: block; width: 100%; height: auto; overflow: visible; }
.line-journey .lj-label {
  font-family: var(--sans); font-size: 11px; letter-spacing: 2.4px;
  text-transform: uppercase; fill: var(--muted);
}
.line-journey .lj-label.is-ink { fill: var(--ink); }
/* stroke color lives on the SVG (bronze→gold gradient): the line warms as it climbs */
.line-journey .lj-path { opacity: 0.9; }
.line-journey .lj-node { fill: var(--bg); stroke: var(--bronze); stroke-width: 1.5; }
.line-journey .j-ghost { stroke: var(--ink); opacity: 0.035; }
@media (prefers-reduced-motion: no-preference) {
  html:where(.js) .line-journey .lj-path { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .line-journey.is-in .lj-path { animation: draw 1.4s var(--ease-out) 0.1s forwards; }
  html:where(.js) .line-journey .j-ghost { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .line-journey.is-in .j-ghost { animation: draw 2.2s var(--ease-out) 0.4s forwards; }
  html:where(.js) .line-journey .lj-dot { transform: scale(0); transform-origin: center; transform-box: fill-box; }
  .line-journey.is-in .lj-dot { animation: land 0.45s var(--ease-out) 1.35s forwards; }
  html:where(.js) .line-journey .lj-label, html:where(.js) .line-journey .lj-node { opacity: 0; transition: opacity 0.5s ease; }
  .line-journey.is-in .lj-label { opacity: 1; }
  .line-journey.is-in .lj-label:not(.is-ink) { opacity: 0.9; }
  .line-journey.is-in .lj-node { opacity: 1; }
  .line-journey.is-in .lj-label:nth-of-type(1), .line-journey.is-in .jstep:nth-of-type(1) .lj-label { transition-delay: 0.3s; }
  .line-journey.is-in .lj-label:nth-of-type(2), .line-journey.is-in .jstep:nth-of-type(2) .lj-label { transition-delay: 0.6s; }
  .line-journey.is-in .lj-label:nth-of-type(3), .line-journey.is-in .jstep:nth-of-type(3) .lj-label { transition-delay: 0.9s; }
  .line-journey.is-in .lj-label:nth-of-type(4), .line-journey.is-in .jstep:nth-of-type(4) .lj-label { transition-delay: 1.2s; }
  .line-journey.is-in .jstep:nth-of-type(5) .lj-label { transition-delay: 1.5s; }
  .line-journey .j-halo { animation: halo-pulse 2.6s ease-in-out 2s infinite; }
  @keyframes halo-pulse {
    0%, 100% { opacity: 0; transform: scale(0.6); }
    45% { opacity: 0.35; transform: scale(1); }
  }
}
.line-journey .j-halo { fill: none; stroke: var(--gold); stroke-width: 1.5; opacity: 0; transform-origin: center; transform-box: fill-box; }

/* interactive journey (method page): hover or tap a step for its caption */
.journey .jstep { cursor: pointer; outline: none; }
.journey .j-hit { fill: transparent; pointer-events: all; }
.journey .jstep .lj-label { transition: fill 0.2s ease, opacity 0.5s ease; }
.journey .jstep .lj-node { transition: transform 0.25s var(--ease-out), fill 0.2s ease, stroke 0.2s ease, opacity 0.5s ease; transform-origin: center; transform-box: fill-box; }
.journey .jstep:hover .lj-node, .journey .jstep:focus-visible .lj-node, .journey .jstep.is-active .lj-node {
  transform: scale(1.55); fill: var(--gold); stroke: var(--gold);
}
.journey .jstep:hover .lj-label, .journey .jstep:focus-visible .lj-label, .journey .jstep.is-active .lj-label { fill: var(--ink); }
.journey .jstep:focus-visible .lj-node { stroke: var(--ink); }
.journey-cap {
  display: flex; align-items: baseline; gap: 18px;
  border-left: 2px solid var(--gold);
  background: var(--warm-card);
  border-radius: 0 6px 6px 0;
  padding: 16px 22px;
  margin: 8px 0 0;
  min-height: 58px;
}
@media (max-width: 640px) { .journey-cap { flex-direction: column; gap: 6px; } }
.journey-cap .jc-tag { color: var(--bronze); flex: none; }
.journey-cap .jc-text { margin: 0; font-size: 0.85rem; opacity: 0.9; max-width: 62ch; transition: opacity 0.2s ease; }
.journey-cap.is-switching .jc-text { opacity: 0; }
.method-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px 22px; }
@supports (grid-template-rows: subgrid) {
  .method-grid > div { display: grid; grid-template-rows: subgrid; grid-row: span 3; align-content: start; }
}
@media (max-width: 860px) { .method-grid { grid-template-columns: 1fr; gap: 22px; } }
.method-grid h3 { font-size: 1.05rem; margin: 10px 0 7px; }
.method-grid .m-tag { color: var(--bronze); font-family: var(--sans); font-size: 0.64rem; letter-spacing: var(--track-label); text-transform: uppercase; }
.method-grid p { font-size: 0.86rem; color: var(--ink-2); margin: 0; max-width: 46ch; }

/* safeguards list (method page) */
.guardrails { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 820px) { .guardrails { grid-template-columns: 1fr; } }
.guardrail {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  box-shadow: var(--card-rest);
  padding: 18px 20px;
  transition: transform 0.25s var(--ease-out), border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.guardrail:hover { transform: translateY(-2px); border-color: var(--bronze); background: var(--warm-card); box-shadow: var(--card-shadow); }
.guardrail .g-no { font-family: var(--sans); font-size: 0.62rem; letter-spacing: var(--track-label); color: var(--bronze); text-transform: uppercase; display: block; margin-bottom: 9px; }
.guardrail h3 { font-size: 1.05rem; margin: 0 0 7px; }
.guardrail p { font-size: 0.86rem; color: var(--ink-2); margin: 0; }

/* ---------- services: columns on desktop, easy to compare ---------- */
.svc-list {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 16px;
  margin-bottom: 22px; align-items: stretch;
}
@media (max-width: 1080px) { .svc-list { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
.svc {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  box-shadow: var(--card-rest);
  padding: 20px 20px 18px;
  text-decoration: none;
  transition: transform 0.28s var(--ease-out), border-color 0.28s ease, box-shadow 0.28s ease, background 0.28s ease;
}
/* hover: quiet lift, no tilt — the card warms up so you can see which
   product you're reading, border and shadow firm up */
.svc:hover { transform: translateY(-2px); border-color: var(--bronze); background: var(--warm-card); box-shadow: var(--card-shadow); }
/* services page (2026-10-07): the whole card opens its use case. The See use cases link stretches over the card,
   so the card keeps the same hover lift as on the home page */
.svc-list.is-static .svc .s-case::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.svc-list.is-static .svc .s-case:focus-visible { outline: none; }
.svc-list.is-static .svc .s-case:focus-visible::after { outline: 2px solid var(--bronze); outline-offset: -2px; border-radius: 6px; }
.svc-list.is-static .svc:hover .s-case, .svc-list.is-static .svc:focus-within .s-case { color: var(--ink); }
.svc-list.is-static .svc:hover .s-case .line::before, .svc-list.is-static .svc:focus-within .s-case .line::before { width: 100%; }
.svc-list.is-static .svc:hover .s-case .line::after, .svc-list.is-static .svc:focus-within .s-case .line::after { transform: translateY(-50%) scale(1); }
.svc .s-case { margin-top: auto; padding-top: 14px; }
/* home: the whole card is the link. The title link stretches over the card; the Explore arrow is decoration */
.svc-list:not(.is-static) .svc h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.svc-list:not(.is-static) .svc h3 a:focus-visible::after { outline: 2px solid var(--bronze); outline-offset: -2px; border-radius: 6px; }
.svc-list:not(.is-static) .svc h3 a:focus-visible { outline: none; }
/* services: a card reached from the home page sits under the fixed header */
.svc[id] { scroll-margin-top: 110px; }
.svc .s-no { font-family: var(--sans); font-size: 0.6rem; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--bronze); margin-bottom: 12px; }
.svc h3 { font-size: 1.15rem; line-height: 1.2; margin: 0 0 8px; }
/* one line under the name saying what the product is for — the offers must
   read as different jobs, not three variants of the same card */
.svc .s-what { font-size: 0.82rem; line-height: 1.5; color: var(--ink-2); margin: 0 0 12px; }
/* spec rows: one fact per line, same label order in every card, so the eye
   compares across columns — price with price, duration with duration */
.svc .s-row { display: block; padding: 8px 0 9px; border-top: 1px solid var(--hairline); }
.svc .s-k { display: block; font-family: var(--sans); font-size: 0.7rem; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.svc .s-v { display: block; font-family: var(--mono); font-size: 0.72rem; line-height: 1.45; color: var(--ink); }
.svc .s-row.is-price .s-v { font-size: 0.84rem; font-weight: 500; }
.svc .s-list { list-style: none; margin: 0 0 4px; padding: 12px 0 0; border-top: 1px solid var(--hairline); }
.svc .s-list li { position: relative; padding-left: 14px; font-size: 0.82rem; line-height: 1.5; color: var(--ink-2); margin: 0 0 7px; }
.svc .s-list li::before { content: "•"; position: absolute; left: 1px; top: 0; color: var(--bronze); }
/* card CTA: plain label + arrow (no line track), the arrow nudges on hover */
.svc .link-arrow { padding-top: 12px; margin-top: auto; white-space: nowrap; }
.svc:hover .link-arrow, .svc:focus-within .link-arrow { color: var(--ink); }
.svc:hover .link-arrow .line::before, .svc:focus-within .link-arrow .line::before { width: 100%; }
.svc:hover .link-arrow .line::after, .svc:focus-within .link-arrow .line::after { transform: translateY(-50%) scale(1); }
/* the card is an article; its title carries the link, stretched over the whole card */
.svc h3 a { color: inherit; text-decoration: none; }
.svc h3 a::after { content: ""; position: absolute; inset: 0; border-radius: 6px; }
.svc h3 a:focus-visible { outline: none; }
.svc:focus-within { transform: translateY(-2px); border-color: var(--bronze); background: var(--warm-card); box-shadow: var(--card-shadow); outline: 2px solid var(--bronze); outline-offset: 3px; }
/* the three cards share row tracks (subgrid): each spec row is its own track,
   so the hairlines and bullet blocks sit at the same height in all three */
@supports (grid-template-rows: subgrid) {
  .svc { display: grid; grid-template-rows: subgrid; grid-row: span 7; }
}
@media (max-width: 820px) {
  .svc-list { grid-template-columns: 1fr; gap: 16px; }
  .svc { display: flex; flex-direction: column; }
}
.offer-rule { font-family: var(--sans); font-size: 0.72rem; color: var(--muted); margin: 0; max-width: 72ch; line-height: 1.8; }
.price-note { font-size: 0.72rem; color: var(--muted); margin: 0 0 22px; max-width: 70ch; line-height: 1.7; }

/* ---------- specimen (slide) + tabs ---------- */
.spec-tabs { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.spec-tabs button {
  font-family: var(--sans); font-size: 0.7rem; letter-spacing: var(--track-label); text-transform: uppercase;
  background: none; border: 1px solid var(--hairline); border-radius: 3px;
  color: var(--muted); padding: 10px 15px; cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.spec-tabs button:hover { color: var(--ink); border-color: var(--hairline-strong); }
.spec-tabs button[aria-selected="true"] { color: var(--gold-ink); border-color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, transparent); }
.band-dark .spec-tabs button[aria-selected="true"] { color: #F2EFE8; }
.spec-panel[hidden] { display: none; }
/* one-line explanation of the selected format, between the tabs and the page */
.spec-expl { font-size: 0.88rem; line-height: 1.6; color: var(--ink-2); margin: 0 0 16px; max-width: 66ch; }
/* the deliverable that never ships as a page — bridges into the team section */
.training-note { font-family: var(--serif); font-size: 0.92rem; line-height: 1.55; color: var(--ink-2); margin: 26px 0 0; max-width: 62ch; }
@media (prefers-reduced-motion: no-preference) {
  .spec-panel { animation: spec-in 0.4s var(--ease-out); }
  @keyframes spec-in { from { opacity: 0; transform: translateY(10px); } }
}

.slide {
  background: #23262C;
  color: #F2EFE8;
  border-radius: 6px;
  box-shadow: var(--slide-shadow);
  padding: 28px 32px 26px;
  max-width: 860px;
}
.band-dark .slide { border: 1px solid rgba(242, 239, 232, 0.12); background: #1F2227; }
@media (max-width: 640px) { .slide { padding: 28px 24px 26px; } }
.slide .slide-top {
  display: flex; justify-content: space-between; gap: 16px;
  font-family: var(--sans); font-size: 0.62rem; letter-spacing: var(--track-label);
  text-transform: uppercase; color: #8F959E; margin-bottom: 24px;
}
.slide h3, .slide .slide-h {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.15rem, 2.2vw, 1.4rem); line-height: 1.2;
  color: #F2EFE8; margin: 0 0 12px; max-width: 28ch;
}
.slide .slide-body { font-size: 0.86rem; color: #F2EFE8; opacity: 0.82; max-width: 62ch; margin: 0 0 20px; }
.slide .decision {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 24px; flex-wrap: wrap;
  border-top: 1px solid rgba(242, 239, 232, 0.16); padding-top: 22px;
}
.slide .decision .label {
  font-family: var(--sans); font-size: 0.62rem; letter-spacing: var(--track-label);
  text-transform: uppercase; color: #8F959E; display: block; margin-bottom: 8px;
}
.slide .decision .action { font-size: 0.93rem; max-width: 52ch; margin: 0; }
.slide .decision .worth { font-family: var(--mono); font-size: 1.2rem; color: #EF9F27; white-space: nowrap; }
.slide .decision .worth small {
  display: block; font-size: 0.6rem; letter-spacing: var(--track-label);
  text-transform: uppercase; color: #8F959E; margin-top: 4px;
}
.slide .kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
@media (max-width: 640px) { .slide .kpi-grid { grid-template-columns: 1fr 1fr; } }
.slide .kpi .v { font-family: var(--mono); font-size: clamp(1.05rem, 2.2vw, 1.4rem); }
.slide .kpi .v.is-gold { color: #EF9F27; }
.slide .kpi .k {
  font-family: var(--sans); font-size: 0.62rem; letter-spacing: var(--track-label);
  text-transform: uppercase; color: #8F959E; margin-top: 6px; line-height: 1.6;
}
.slide table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.slide table th {
  font-family: var(--sans); font-size: 0.62rem; letter-spacing: var(--track-label); text-transform: uppercase;
  color: #8F959E; font-weight: 400; text-align: left; padding: 0 14px 10px 0;
  border-bottom: 1px solid rgba(242, 239, 232, 0.16);
}
.slide table td { padding: 12px 14px 12px 0; border-bottom: 1px solid rgba(242, 239, 232, 0.09); vertical-align: top; }
.slide table tr:last-child td { border-bottom: none; }
.slide table .fig { color: #F2EFE8; }
.slide table .is-gold { color: #EF9F27; }
.slide .src { font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.08em; color: #8F959E; margin: 20px 0 0; }
.slide-caption {
  font-family: var(--sans); font-size: 0.68rem; line-height: 1.7;
  color: var(--muted); max-width: 66ch; margin: 16px 0 0;
}
.slide-wide { overflow-x: auto; scrollbar-width: thin; scrollbar-color: rgba(242, 239, 232, 0.28) transparent; }
.slide-wide::-webkit-scrollbar { height: 6px; }
.slide-wide::-webkit-scrollbar-thumb { background: rgba(242, 239, 232, 0.28); border-radius: 3px; }

/* ---------- founder / team ---------- */
.founder-card {
  display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: start;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 6px;
  box-shadow: var(--card-rest);
  padding: 32px 36px; max-width: 1040px;
}
.founder-card + .founder-card { margin-top: 22px; }
@media (max-width: 620px) { .founder-card { grid-template-columns: 1fr; gap: 20px; padding: 26px 24px; } }
.founder-mark svg { display: block; height: 60px; width: auto; color: var(--ink); }
.founder-card .name { font-family: var(--serif); font-size: 1.25rem; line-height: 1.2; }
.founder-card .role {
  font-family: var(--sans); font-size: 0.66rem; letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--bronze); margin: 8px 0 15px;
}
.founder-card p { font-size: 0.88rem; color: var(--ink-2); margin: 0 0 12px; max-width: 64ch; }
.founder-card p:last-of-type { margin-bottom: 18px; }
.founder-links { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.li-link {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--sans); font-size: 0.7rem;
  letter-spacing: var(--track-label); text-transform: uppercase;
  text-decoration: none; color: var(--muted);
  transition: color 0.18s ease;
}
.li-link svg { width: 15px; height: 15px; display: block; }
.li-link:hover, .li-link:focus-visible { color: var(--bronze); }

.principles { list-style: none; margin: 0; padding: 0; max-width: 940px; }
.principles li {
  position: relative; padding: 15px 0 15px 32px;
  border-bottom: 1px solid var(--hairline);
}
.principles li:first-child { border-top: 1px solid var(--hairline); }
.principles li::before {
  content: ""; position: absolute; left: 4px; top: 31px;
  width: 16px; height: 1px; background: var(--bronze-2);
}
.principles h3 { font-size: 1.05rem; margin: 0 0 5px; }
.principles p { font-size: 0.86rem; color: var(--ink-2); margin: 0; max-width: 66ch; }

/* ---------- FAQ ---------- */
.faq { max-width: 990px; }
.faq details { border-bottom: 1px solid var(--hairline); }
.faq details:first-of-type { border-top: 1px solid var(--hairline); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
  padding: 15px 2px;
  font-family: var(--serif); font-size: 0.98rem; line-height: 1.35;
  transition: color 0.18s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; width: 11px; height: 11px; flex: none; align-self: center;
  background:
    linear-gradient(var(--bronze) 0 0) center / 11px 1.5px no-repeat,
    linear-gradient(var(--bronze) 0 0) center / 1.5px 11px no-repeat;
  transition: transform 0.3s var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover, .faq summary:focus-visible { color: var(--bronze); }
.faq .answer { padding: 0 2px 24px; }
@media (prefers-reduced-motion: no-preference) {
  .faq details[open] .answer { animation: faq-open 0.35s var(--ease-soft); }
  @keyframes faq-open { from { opacity: 0; transform: translateY(-6px); } }
}
.faq .answer p { margin: 0 0 11px; max-width: 68ch; font-size: 0.88rem; color: var(--ink-2); }
/* answers as short bullets: a bronze dash per line, like the use-case stories */
.faq .answer ul { list-style: none; margin: 4px 0 0; padding: 0; max-width: 68ch; }
.faq .answer li { position: relative; padding-left: 16px; font-size: 0.88rem; line-height: 1.5; color: var(--ink-2); margin: 0 0 7px; }
.faq .answer li::before { content: ""; position: absolute; left: 0; top: 0.68em; width: 6px; height: 1px; background: var(--bronze); }
.faq .answer p:last-child { margin-bottom: 0; }

/* ---------- field notes / blog ---------- */
.notes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 20px; }
@media (max-width: 860px) { .notes-grid { grid-template-columns: 1fr; } }
.note {
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 6px;
  box-shadow: var(--card-rest);
  padding: 20px 20px 18px; display: flex; flex-direction: column; gap: 9px;
  text-decoration: none;
  transition: transform 0.25s var(--ease-out), border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.note:hover { transform: translateY(-2px); border-color: var(--bronze); background: var(--warm-card); box-shadow: var(--card-shadow); }
.note .n-tag { font-family: var(--sans); font-size: 0.62rem; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--bronze); }
.note h3 { font-size: 1.05rem; line-height: 1.3; margin: 0; }
.note p { font-size: 0.86rem; color: var(--ink-2); margin: 0; }
.note .n-meta { font-family: var(--sans); font-size: 0.62rem; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); margin-top: auto; padding-top: 8px; }
.notes-foot { font-family: var(--sans); font-size: 0.7rem; color: var(--muted); margin: 0; }
.notes-foot a { color: var(--bronze); text-decoration: none; }
.notes-foot a:hover { text-decoration: underline; }

/* article */
.article { max-width: 800px; padding: clamp(48px, 8vh, 76px) 0 40px; }
.article .a-meta {
  display: flex; gap: 10px 26px; flex-wrap: wrap;
  font-family: var(--sans); font-size: 0.66rem; letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--muted);
  margin: 22px 0 0;
}
.article .a-meta .tag { color: var(--bronze); }
.article-body { max-width: 800px; padding-bottom: 40px; }
.article-body p { font-size: 0.94rem; line-height: 1.7; margin: 0 0 18px; color: var(--ink-2); max-width: 68ch; }
.article-body h2 {
  font-size: 1.25rem; margin: 36px 0 12px; max-width: none;
}
.article-body ul, .article-body ol { margin: 0 0 22px; padding-left: 22px; }
.article-body ul li::marker { color: var(--bronze); }
.article-body ol li::marker { font-family: var(--mono); font-size: 0.85em; color: var(--bronze); }
.article-body li { font-size: 0.95rem; line-height: 1.68; margin-bottom: 7px; color: var(--ink-2); max-width: 66ch; }
.article-body .pull {
  border-left: 2px solid var(--gold);
  background: var(--warm-card);
  border-radius: 0 6px 6px 0;
  padding: 16px 22px;
  font-family: var(--serif); font-size: 1.05rem; line-height: 1.5;
  margin: 26px 0;
}
.article-body .chartbox { margin: 32px 0; }
.article-foot {
  border-top: 1px solid var(--hairline);
  padding: 26px 0 0; margin-top: 16px;
  display: flex; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; align-items: center;
}
.article-foot .byline { font-family: var(--sans); font-size: 0.68rem; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); line-height: 1.9; }

/* ---------- use cases ---------- */
.case {
  border: 1px solid var(--hairline);
  border-radius: 6px;
  background: var(--surface);
  box-shadow: var(--card-rest);
  padding: 26px 30px;
  margin-bottom: 18px;
}
@media (max-width: 640px) { .case { padding: 26px 22px; } }
.case .c-strip {
  display: flex; justify-content: space-between; gap: 10px 24px; flex-wrap: wrap;
  font-family: var(--sans); font-size: 0.62rem; letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--muted); margin-bottom: 20px;
}
.case .c-strip .sector { color: var(--bronze); }
.case h3 { font-size: clamp(1.12rem, 2vw, 1.32rem); line-height: 1.24; margin: 0 0 18px; max-width: 38ch; }
.case .c-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 40px; margin-bottom: 26px; }
@media (max-width: 760px) { .case .c-cols { grid-template-columns: 1fr; } }
.case .c-cols h4 {
  font-family: var(--sans); font-weight: 400; font-size: 0.64rem; letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--bronze); margin: 0 0 10px;
}
.case .c-cols p { font-size: 0.86rem; color: var(--ink-2); margin: 0; max-width: 60ch; }
.case .c-outcome {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 20px 32px; flex-wrap: wrap;
  border-top: 1px solid var(--hairline); padding-top: 22px;
}
.case .c-outcome .decision-line { font-family: var(--serif); font-size: 0.98rem; line-height: 1.45; max-width: 58ch; margin: 0; }
.case .c-outcome .worth { font-family: var(--mono); font-size: 1.15rem; color: var(--gold-ink); white-space: nowrap; }
.band-dark .case .c-outcome .worth, [data-theme="dark"] .case .c-outcome .worth { color: var(--gold); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .case .c-outcome .worth { color: var(--gold); } }
.case .c-outcome .worth small { display: block; font-size: 0.58rem; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.cases-note {
  font-family: var(--sans); font-size: 0.7rem; line-height: 1.8;
  color: var(--muted);
  border-left: 2px solid var(--bronze);
  padding: 4px 0 4px 20px;
  margin: 36px 0 0;
}

/* cases v4: result tiles side by side; the number and the client are the first thing read.
   Without JS every story panel shows below the tiles, laid out as four numbered steps; with JS see v5 below. */
.case-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
@media (max-width: 1100px) { .case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } }
@media (max-width: 700px) { .case-grid { grid-template-columns: 1fr; } }
/* the engagement switch above the tiles, built like a phone app's bottom bar: four icons with their label
   in one rounded, darker track that reads as a control; the active one takes the accent, inside a pill
   outline that slides to it. The script sets --x/--w from the pressed option; without JS the switch is hidden and every tile shows. */
/* the use-cases chapter sits close under the hero subtitle: the pill is the next thing to read */
.cases-chapter { padding-top: 8px; }
.case-switch {
  position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 6px; border-radius: 999px; overflow: hidden;
  background: rgba(46, 49, 56, 0.07); box-shadow: inset 0 1px 0 rgba(46, 49, 56, 0.06);
  margin: 0 0 26px;
  --cs-accent: var(--bronze); --cs-bar: var(--gold);
}
[data-theme="dark"] .case-switch { background: rgba(0, 0, 0, 0.3); box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.35); --cs-accent: var(--gold); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .case-switch { background: rgba(0, 0, 0, 0.3); box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.35); --cs-accent: var(--gold); }
}
html:not(.js) .case-switch { display: none; }
.case-switch .cs-ind {
  position: absolute; left: 0; top: 6px; bottom: 6px; border-radius: 999px;
  width: var(--w, 0px); transform: translateX(var(--x, 0px));
  border: 1px solid var(--cs-bar); pointer-events: none;
}
.case-switch.is-ready .cs-ind { transition: transform 0.5s var(--ease-out), width 0.5s var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .case-switch.is-ready .cs-ind { transition: none; } }
.case-switch .cs-opt {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  background: none; border: 0; border-radius: 999px; cursor: pointer; padding: 12px 8px 16px;
  font-family: var(--sans); font-size: 0.74rem; letter-spacing: 0.02em; line-height: 1.2; color: var(--muted);
  transition: color 0.3s var(--ease-out);
}
.case-switch .cs-opt svg {
  width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.4s var(--ease-out);
}
.case-switch .cs-opt:hover { color: var(--ink); }
.case-switch .cs-opt[aria-pressed="true"] { color: var(--cs-accent); font-weight: 500; }
.case-switch .cs-opt[aria-pressed="true"] svg { stroke-width: 2.2; transform: translateY(-1px) scale(1.06); }
.case-switch .cs-opt:focus-visible { outline: 2px solid var(--cs-accent); outline-offset: -2px; }
@media (max-width: 560px) {
  .case-switch .cs-opt { font-size: 0.66rem; letter-spacing: 0.01em; padding: 11px 4px 14px; gap: 6px; }
  .case-switch .cs-opt svg { width: 22px; height: 22px; }
}
/* with the switch on, the grid always has three columns, so a tile keeps the same width whether its tab shows one, two or three */
.case-card[hidden] { display: none; }
/* the whole tile toggles its story (2026-10-07); the story text keeps a normal cursor */
.case-card { cursor: pointer; }
.case-card .case-detail { cursor: auto; }
.case-grid[data-count] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .case-grid[data-count] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .case-grid[data-count] { grid-template-columns: 1fr; } }
.case-card { margin: 0; padding: 24px 24px 20px; display: flex; flex-direction: column; min-height: var(--case-h, auto); /* --case-h and --ph0..3: tile and part heights measured by the script, so every tile's parts line up */ transition: border-color 0.25s var(--ease-out); }
@media (max-width: 640px) { .case-card { padding: 24px 22px 20px; } }
.case-card.is-open { border-color: var(--hairline-strong); }
.case-card .c-head { margin: 0 0 32px; text-align: center; min-height: var(--ph0, auto); }
.case-card .c-head.has-logo { margin-bottom: 32px; }
/* client logo, centred at the top of the card, masked in ink like the logo bands; when a card has one, the name below is for screen readers */
.case-card .c-logo {
  /* every logo is centred in the same 36px slot, whatever its own height, so the subtitles below line up across tiles */
  display: block; height: var(--h, 22px); width: calc(var(--h, 22px) * var(--ar, 3)); max-width: 100%;
  margin: calc(30px + (36px - var(--h, 22px)) / 2) auto calc(34px + (36px - var(--h, 22px)) / 2);
  background: var(--ink); opacity: 0.9;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-position: center; mask-position: center;
}
.case-card .c-head.has-logo .client { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.case-card .client {
  font-family: var(--sans); font-weight: 600; font-size: 0.78rem; letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--ink); line-height: 1.3; margin: 0; max-width: none;
}
.case-card .sector {
  font-family: var(--sans); font-size: 0.62rem; letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--bronze); margin: 6px 0 0; line-height: 1.6;
}
/* the 8% rule: one gold element per card, the headline result */
.case-card .hero-kpi { margin: 0 0 14px; min-height: var(--ph1, auto); text-align: center; }
.case-card .hero-kpi .v {
  font-family: var(--mono); font-size: clamp(2rem, 2.7vw, 2.7rem); line-height: 1; letter-spacing: -0.02em;
  color: var(--gold-ink); white-space: nowrap;
}
@media (min-width: 1101px) { .case-card .hero-kpi .v { font-size: clamp(1.7rem, 2.25vw, 2.25rem); } }
/* a headline figure made of words rather than a number: smaller, and allowed to wrap, so it stays inside the tile */
.case-card .hero-kpi .v.is-words { font-size: clamp(1.3rem, 1.7vw, 1.7rem); white-space: normal; line-height: 1.15; letter-spacing: -0.01em; }
.band-dark .case-card .hero-kpi .v, [data-theme="dark"] .case-card .hero-kpi .v { color: var(--gold); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .case-card .hero-kpi .v { color: var(--gold); } }
.case-card .hero-kpi .k {
  font-family: var(--sans); font-weight: 500; font-size: 0.6rem; letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--muted); margin-top: 9px; line-height: 1.6;
}
.case-card .one { font-family: var(--serif); font-size: 0.96rem; line-height: 1.45; color: var(--ink); margin: 0 0 18px; max-width: 46ch; min-height: var(--ph2, auto); }
/* secondary figures: one per line, value then label, so the column reads as a table */
.case-card .kpis {
  display: grid; grid-template-columns: 1fr; gap: 9px; align-content: start;
  border-top: 1px solid var(--hairline); padding-top: 14px; margin-bottom: 18px; min-height: var(--ph3, auto);
}
.case-card .kpis > div { display: grid; grid-template-columns: minmax(3.4em, auto) 1fr; gap: 12px; align-items: baseline; }
.case-card .kpis .v { font-family: var(--mono); font-size: 0.92rem; line-height: 1.2; color: var(--ink); white-space: nowrap; }
.case-card .kpis .k {
  font-family: var(--sans); font-weight: 500; font-size: 0.56rem; letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--muted); line-height: 1.55;
}
.case-card .case-toggle { margin-top: auto; background: none; border: 0; padding: 0; cursor: pointer; white-space: nowrap; }
@media (min-width: 1101px) { .case-card .case-toggle .line { width: 30px; } .case-card .case-toggle .line::before { width: 18px; } }
.case-card .case-toggle .t-close { display: none; }
.case-card .case-toggle[aria-expanded="true"] .t-open { display: none; }
.case-card .case-toggle[aria-expanded="true"] .t-close { display: inline; }
.case-card .case-toggle[aria-expanded="true"] .line::before { width: 100%; }
.case-card .case-toggle[aria-expanded="true"] .line::after { transform: translateY(-50%) scale(1); }
html:not(.js) .case-card .case-toggle { display: none; }
/* the story panel: full row width, under the tile's row */
.case-detail {
  grid-column: 1 / -1;
  border: 1px solid var(--hairline-strong); border-radius: 6px; background: var(--surface); box-shadow: var(--card-rest);
  padding: 22px 28px 24px; margin: 2px 0 6px;
}
@media (max-width: 640px) { .case-detail { padding: 20px 22px 22px; } }
html.js .case-detail:not(.is-open) { display: none; }
.case-detail .cd-head {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 0 0 20px;
  font-family: var(--sans); font-size: 0.62rem; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted);
}
.case-detail .cd-client { font-weight: 600; color: var(--ink); font-size: 0.78rem; }
.case-detail .cd-title::before { content: "\2014"; margin-right: 14px; color: var(--bronze); }
.case-detail .c-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 32px; counter-reset: cstep; }
@media (max-width: 1100px) { .case-detail .c-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .case-detail .c-steps { grid-template-columns: 1fr; gap: 20px; } }
.case-detail .c-step { counter-increment: cstep; }
.case-detail .c-step h4 {
  font-family: var(--sans); font-weight: 500; font-size: 0.62rem; letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--bronze); margin: 0 0 10px; padding-bottom: 8px;
  border-bottom: 1px solid var(--hairline);
}
.case-detail .c-step h4::before { content: counter(cstep, decimal-leading-zero) "\2002"; font-family: var(--mono); color: var(--muted); }
.case-detail .c-step p { font-size: 0.84rem; line-height: 1.6; color: var(--ink-2); margin: 0; max-width: 40ch; }
.case-detail .c-step p.decision-line { font-family: var(--serif); font-size: 0.98rem; line-height: 1.42; color: var(--ink); }
.case-detail .c-step .did { list-style: none; margin: 0; padding: 0; }
.case-detail .c-step .did li { position: relative; padding-left: 16px; font-size: 0.84rem; line-height: 1.55; color: var(--ink-2); margin: 0 0 6px; max-width: 40ch; }
.case-detail .c-step .did li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 6px; height: 1px; background: var(--bronze); }
/* the decision keeps the serif voice of the old decision line, as bullets */
.case-detail .c-step .did.decision li { font-family: var(--serif); font-size: 0.98rem; line-height: 1.42; color: var(--ink); padding-left: 18px; }
.case-detail .c-step .did.decision li::before { top: 0.7em; width: 8px; background: var(--gold); }
/* cases v5: the opened tile grows over its row. It keeps its grid cell, so the other tiles stay where they
   are; the script sets width, left and height inline so the tile covers the whole row and pads the grid
   below for the overflow. Its numbers keep the left column; the story, moved inside the tile, takes the
   right one and its steps fade in one after another once the tile has grown. */
.case-card.is-open {
  position: relative; z-index: 3; display: grid; grid-template-columns: minmax(240px, 30%) minmax(0, 1fr);
  grid-template-rows: auto auto auto auto 1fr; column-gap: 44px; overflow: hidden;
  border-color: var(--hairline-strong); box-shadow: var(--card-shadow);
}
.case-card.is-open > * { grid-column: 1; }
.case-card.is-open > .case-toggle { align-self: end; }
.case-card.is-open > .case-detail {
  grid-column: 2; grid-row: 1 / span 5;
  border: 0; border-left: 1px solid var(--hairline); border-radius: 0; background: none; box-shadow: none;
  padding: 2px 0 0 44px; margin: 0;
}
.case-card.is-open > .case-detail .c-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.case-card.is-growing {
  transition: width 0.8s var(--ease-soft), height 0.8s var(--ease-soft), left 0.8s var(--ease-soft),
    box-shadow 0.8s ease, border-color 0.8s ease;
}
.case-grid.has-open { transition: padding-bottom 0.8s var(--ease-soft); }
.case-card.is-open > .case-detail .cd-head,
.case-card.is-open > .case-detail .c-step,
.case-card.is-open > .case-detail .cd-head { animation-delay: 0.45s; }
.case-card.is-open > .case-detail .c-step:nth-child(1) { animation-delay: 0.55s; }
.case-card.is-open > .case-detail .c-step:nth-child(2) { animation-delay: 0.65s; }
.case-card.is-open > .case-detail .c-step:nth-child(3) { animation-delay: 0.75s; }
.case-card.is-open > .case-detail .c-step:nth-child(4) { animation-delay: 0.85s; }
@keyframes case-step-in { to { opacity: 1; transform: none; } }
/* closing: the story fades first, then the tile shrinks back into its cell */
.case-card.is-closing > .case-detail { opacity: 0; transition: opacity 0.25s ease; }
@media (prefers-reduced-motion: reduce) {
  .case-card.is-growing, .case-grid.has-open, .case-card.is-closing > .case-detail { transition: none; }
  .case-card.is-open > .case-detail .cd-head, .case-card.is-open > .case-detail .c-step { animation: none; opacity: 1; transform: none; }
}
@media (max-width: 700px) {
  .case-card.is-open { grid-template-columns: 1fr; grid-template-rows: auto; }
  .case-card.is-open > .case-detail { grid-column: 1; grid-row: auto; border-left: 0; border-top: 1px solid var(--hairline); padding: 20px 0 0; margin-top: 18px; }
  .case-card.is-open > .case-detail .c-steps { grid-template-columns: 1fr; }
}
}

/* ---------- contact ---------- */
.contact { padding: 26px 0 90px; text-align: center; }
.contact h2 { margin-left: auto; margin-right: auto; }
.contact .sub { max-width: 58ch; font-size: 0.88rem; margin: 0 auto 24px; }
.contact .cta-row { justify-content: center; }
/* ---------- footer ---------- */
/* slim: one brand line, one wrapping row of links */
footer.site {
  border-top: 1px solid var(--hairline);
  padding: 26px 0 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 28px;
}
footer.site .f-brand { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
footer.site .f-brand .wordmark { font-size: 0.7rem; opacity: 0.75; }
footer.site .f-brand p {
  font-family: var(--sans); font-size: 0.58rem; letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--muted);
  margin: 0; line-height: 1.9;
}
footer.site nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
footer.site nav a {
  font-family: var(--sans); font-size: 0.6rem; letter-spacing: var(--track-label);
  text-transform: uppercase; color: color-mix(in srgb, var(--ink) 74%, var(--bg)); text-decoration: none;
}
footer.site nav a:hover, footer.site nav a:focus-visible { color: var(--bronze); }
footer.site nav a.f-li { display: inline-flex; align-items: center; padding: 13px; margin: -13px; }
footer.site nav a.f-li svg { width: 14px; height: 14px; display: block; }

/* ==========================================================================
   Detail pages
   ========================================================================== */
.page-hero { position: relative; padding: clamp(64px, 12vh, 140px) 0 36px; }
/* quiet version of the hero ground so money pages open with the same light.
   The box extends past the viewport and the glow has fixed radii, so its
   fade always completes before any visible edge — no seams on any ground */
.page-hero::before {
  content: ""; position: absolute; inset: -120px -50vw 20% -50vw; pointer-events: none; z-index: -1;
  background: radial-gradient(640px 460px at 72% -60px, color-mix(in srgb, #EF9F27 9%, transparent), transparent 72%);
}
/* hub pages already carry the hero-band glow — don't double it */
.hero-band .page-hero::before { display: none; }
.page-hero .eyebrow { color: var(--bronze); margin: 0 0 18px; display: block; }
.page-hero h1 { font-size: clamp(1.4rem, 2.6vw, 1.8rem); max-width: 33ch; }
.page-hero .sub { max-width: 64ch; font-size: 0.89rem; color: var(--ink-2); margin: 0 0 24px; }
/* wide variant: the use-cases hero runs the title on one line and lets the sub breathe */
.page-hero.is-wide h1 { max-width: 60ch; }
.page-hero.is-wide .sub { max-width: 88ch; }
.fact-strip {
  display: flex; gap: 0; flex-wrap: wrap;
  border: 1px solid var(--hairline); border-radius: 6px;
  background: var(--surface);
  box-shadow: var(--card-rest);
  margin-bottom: 8px; overflow: hidden;
}
.fact-strip .fact { flex: 1 1 150px; padding: 14px 18px; border-right: 1px solid var(--hairline); }
.fact-strip .fact:last-child { border-right: none; }
@media (max-width: 720px) { .fact-strip .fact { flex-basis: 100%; border-right: none; border-bottom: 1px solid var(--hairline); } .fact-strip .fact:last-child { border-bottom: none; } }
.fact-strip .v { font-family: var(--mono); font-size: 0.92rem; }
/* deliberate 8%-rule restraint: the accent fact is bronze, never a second gold */
.fact-strip .v.is-accent { color: var(--bronze); }
.fact-strip .k {
  font-family: var(--sans); font-size: 0.62rem; letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--muted); margin-top: 7px;
}

/* symptoms */
.symptoms { list-style: none; margin: 0; padding: 0; max-width: 920px; }
.symptoms li {
  position: relative; padding: 13px 0 13px 30px;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--serif); font-size: 0.97rem; line-height: 1.45;
}
.symptoms li:first-child { border-top: 1px solid var(--hairline); }
.symptoms li::before {
  content: ""; position: absolute; left: 4px; top: 22px;
  width: 14px; height: 1px; background: var(--bronze-2);
}
.symptoms .aside { font-family: var(--sans); font-size: 0.82rem; opacity: 0.75; display: block; margin-top: 5px; }

/* timeline (weeks / cadence) */
.timeline { position: relative; margin: 12px 0 0; padding: 0; list-style: none; }
.timeline::before {
  content: ""; position: absolute; left: 5px; top: 10px; bottom: 10px;
  width: 1px; background: var(--bronze-2); opacity: 0.6;
}
.timeline li { position: relative; padding: 0 0 28px 40px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: ""; position: absolute; left: 2px; top: 7px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--bronze);
}
.timeline li.is-terminus::before {
  background: var(--gold); border-color: var(--gold); width: 9px; height: 9px; left: 1px;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--gold) 16%, transparent);
}
.timeline .t-tag {
  font-family: var(--sans); font-size: 0.62rem; letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--bronze); display: block; margin-bottom: 8px;
}
.timeline h3 { font-size: 1.1rem; margin: 0 0 6px; }
.timeline p { font-size: 0.87rem; color: var(--ink-2); margin: 0; max-width: 66ch; }

/* deliverables list */
.deliv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 820px) { .deliv-grid { grid-template-columns: 1fr; } }
.deliv {
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 6px;
  box-shadow: var(--card-rest);
  padding: 18px 20px;
  transition: transform 0.25s var(--ease-out), border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.deliv:hover { transform: translateY(-2px); border-color: var(--bronze); background: var(--warm-card); box-shadow: var(--card-shadow); }
.deliv .d-tag { font-family: var(--sans); font-size: 0.6rem; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--bronze); display: block; margin-bottom: 9px; }
.deliv h3 { font-size: 1.05rem; margin: 0 0 7px; }
.deliv p { font-size: 0.86rem; color: var(--ink-2); margin: 0; }

/* sprint menu (detail) */
.sprint-cards { display: flex; flex-direction: column; gap: 18px; }
.sprint-card {
  display: grid; grid-template-columns: 1fr auto; gap: 14px 30px;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 6px;
  box-shadow: var(--card-rest);
  padding: 20px 24px;
  transition: transform 0.25s var(--ease-out), border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.sprint-card:hover { transform: translateY(-2px); border-color: var(--bronze); background: var(--warm-card); box-shadow: var(--card-shadow); }
@media (max-width: 760px) { .sprint-card { grid-template-columns: 1fr; } }
.sprint-card h3 { font-size: 1.1rem; margin: 0 0 8px; }
.sprint-card .s-dur { font-family: var(--sans); font-size: 0.72rem; color: var(--bronze); white-space: nowrap; padding-top: 10px; }
.sprint-card p { font-size: 0.86rem; color: var(--ink-2); margin: 0 0 11px; max-width: 66ch; }
.sprint-card .ships { font-family: var(--sans); font-size: 0.7rem; line-height: 1.9; color: var(--muted); margin: 0; }
.sprint-card .ships strong { color: var(--ink); font-weight: 400; }

/* pricing model steps */
/* the handover as a process: four steps on one rail, read left to right, ending in the gold point
   (the team owns it). Under 860px the rail turns vertical, like the timeline. */
.handover { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; }
.handover li { position: relative; padding-top: 28px; }
.handover li::before { content: ""; position: absolute; left: 0; right: -32px; top: 4px; height: 1px; background: var(--bronze-2); opacity: 0.6; }
.handover li:last-child::before { display: none; }
.handover li::after { content: ""; position: absolute; left: 0; top: 1px; width: 7px; height: 7px; border-radius: 50%; background: var(--warm); border: 1px solid var(--bronze); }
.handover li.is-terminus::after { background: var(--gold); border-color: var(--gold); width: 9px; height: 9px; top: 0; box-shadow: 0 0 0 5px color-mix(in srgb, var(--gold) 16%, transparent); }
.handover .t-tag { font-family: var(--sans); font-size: 0.62rem; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--bronze); display: block; margin-bottom: 8px; }
.handover h3 { font-size: 1rem; margin: 0 0 6px; }
.handover li.is-terminus h3 { color: var(--gold-ink); }
[data-theme="dark"] .handover li.is-terminus h3 { color: var(--gold); }
.handover p { font-size: 0.84rem; line-height: 1.5; color: var(--ink-2); margin: 0; max-width: 30ch; }
@media (max-width: 860px) {
  .handover { grid-template-columns: 1fr; gap: 0; }
  .handover li { padding: 0 0 26px 36px; }
  .handover li::before { left: 3px; right: auto; top: 10px; bottom: -6px; width: 1px; height: auto; }
  .handover li::after { left: 0; top: 5px; }
  .handover li.is-terminus::after { left: -1px; top: 4px; }
  .handover p { max-width: 60ch; }
}
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
/* four pricing notes (services page): two by two rather than three plus one */
.steps:has(> div:nth-child(4)) { grid-template-columns: repeat(2, 1fr); }
@supports (grid-template-rows: subgrid) {
  .steps > div { display: grid; grid-template-rows: subgrid; grid-row: span 2; align-content: start; }
}
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }
.steps > div { position: relative; padding-top: 18px; }
.steps > div::before {
  counter-increment: step; content: "0" counter(step);
  position: absolute; top: -10px; left: 0;
  font-family: var(--mono); font-size: 1.55rem;
  color: color-mix(in srgb, var(--bronze) 35%, transparent);
}
.steps h3 { font-size: 1.05rem; margin: 0 0 7px; }
.steps p { font-size: 0.86rem; color: var(--ink-2); margin: 0; max-width: 48ch; }
.pricing-verdict {
  border-left: 2px solid var(--gold);
  background: var(--warm-card);
  border-radius: 0 6px 6px 0;
  padding: 18px 26px;
  font-family: var(--serif); font-size: 1.16rem; line-height: 1.48;
  max-width: 64ch; margin: 40px 0 0;
}

/* inline chart specimens */
.chartbox {
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 6px;
  box-shadow: var(--card-rest);
  padding: 28px 30px 22px; max-width: 1060px;
}
@media (max-width: 640px) { .chartbox { padding: 20px 18px 16px; } }
.chartbox .c-title { font-family: var(--sans); font-weight: 600; font-size: 0.99rem; margin: 0 0 4px; }
.chartbox .c-sub { font-family: var(--sans); font-size: 0.78rem; color: var(--muted); margin: 0 0 16px; }
.chartbox svg { display: block; width: 100%; height: auto; }
.chartbox .c-src { font-family: var(--sans); font-size: 0.6rem; letter-spacing: 0.06em; color: var(--muted); margin: 12px 0 0; }
.chart-ink { fill: var(--ink); }
.chart-muted { fill: var(--muted); }
.chart-grid-line { stroke: var(--muted); opacity: 0.2; }
/* family comes from the typography-discipline block: figures are mono */
.chart-axis { fill: var(--muted); font-size: 10.5px; }
.chart-lbl { font-size: 10.5px; }

/* CTA band on detail pages */
.cta-band { padding: 68px 0 88px; text-align: center; }
.cta-band h2 { margin-left: auto; margin-right: auto; }
.cta-band .sub { max-width: 58ch; font-size: 0.92rem; margin: 0 auto 28px; }
.cta-band .cta-row { justify-content: center; }

/* ---------- the gold panel: the page's decision moment ----------
   Or poli ground, Bronze profond ink (brand on-gold pairing). One per page. */
.panel-gold {
  color-scheme: light;
  background: linear-gradient(165deg, #F4AB3B 0%, #EF9F27 45%, #E79318 100%);
  color: #633806;
  --ink: #633806;
  --muted: #633806;
  --bronze: #633806;
  --gold: #EF9F27;
  --hairline: rgba(99, 56, 6, 0.28);
  --hairline-strong: rgba(99, 56, 6, 0.5);
  --ghost: rgba(99, 56, 6, 0.1);
  --warm-card: color-mix(in srgb, #FFFFFF 16%, #EF9F27);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 34px 80px -34px color-mix(in srgb, #B06D0E 70%, transparent);
}
.cta-band.panel-gold, .contact.panel-gold {
  padding: clamp(32px, 4.5vw, 46px) clamp(24px, 4vw, 48px) clamp(34px, 5vw, 50px);
  margin: 44px 0 72px;
}
.panel-gold .eyebrow { color: #633806; }
.panel-gold .sub, .panel-gold .sub-note { color: #633806; opacity: 1; }
.panel-gold .eyebrow::after { background: #633806; }
.panel-gold .btn-gold { background: #2E3138; color: #F2EFE8; }
.panel-gold .btn-gold:hover, .panel-gold .btn-gold:focus-visible {
  filter: brightness(1.12);
  box-shadow: 0 12px 32px -12px rgba(35, 38, 44, 0.55);
}
.panel-gold .btn-gold:focus-visible { outline-color: #633806; }
.panel-gold .btn-line { color: #633806; border-color: rgba(99, 56, 6, 0.5); background: transparent; }
.panel-gold .btn-line:hover, .panel-gold .btn-line:focus-visible { border-color: #633806; background: var(--warm-card); }
.panel-gold .link-arrow { color: #633806; }
.panel-gold .link-arrow:hover, .panel-gold .link-arrow:focus-visible { color: #2E3138; }
.panel-gold .link-arrow .line::after { background: #2E3138; }
/* newsletter subscribe (blog panel) */
.subscribe-form { display: flex; gap: 10px; justify-content: center; max-width: 440px; margin: 0 auto; }
@media (max-width: 520px) { .subscribe-form { flex-direction: column; } }
.subscribe-form input[type="email"] {
  flex: 1; min-width: 0;
  background: #FBFAF6; color: #2E3138;
  border: none; border-radius: 3px;
  font-family: var(--sans); font-size: 0.9rem;
  padding: 13px 15px;
}
.subscribe-form input[type="email"]::placeholder { color: #8F959E; }
.subscribe-form input[type="email"]:focus-visible { outline: 2px solid #633806; outline-offset: 1px; }
.subscribe-form .btn-gold { flex: none; }
.sub-thanks { font-family: var(--serif); font-size: 1.05rem; margin: 6px 0; }
.sub-note { font-size: 0.72rem; color: var(--muted); margin: 16px 0 0; }

/* ==========================================================================
   Form — book a call
   ========================================================================== */
.form-wrap { max-width: 920px; }
.call-form fieldset { border: none; margin: 0 0 8px; padding: 32px 0; border-top: 1px solid var(--hairline); }
.call-form legend { float: left; width: 100%; }
.call-form legend + * { clear: both; }
.call-form legend, .call-form .q {
  font-family: var(--serif); font-size: 1.13rem; line-height: 1.4;
  padding: 0 0 15px; margin: 0;
}
.call-form legend .opt, .call-form .q .opt { font-family: var(--sans); font-size: 0.6rem; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); margin-left: 10px; }
.id-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 17px 22px; }
@media (max-width: 640px) { .id-grid { grid-template-columns: 1fr; } }
.field label {
  display: block;
  font-family: var(--sans); font-size: 0.62rem; letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--muted); margin-bottom: 8px;
}
.field input[type="text"], .field input[type="email"], .call-form textarea {
  width: 100%;
  background: #FFFFFF;
  border: 1px solid var(--hairline-strong);
  border-radius: 3px;
  color: var(--ink);
  font-family: var(--sans); font-size: 0.94rem;
  padding: 12px 14px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .field input[type="text"],
  :root:not([data-theme="light"]) .field input[type="email"],
  :root:not([data-theme="light"]) .call-form textarea { background: var(--surface-2); }
}
:root[data-theme="dark"] .field input[type="text"],
:root[data-theme="dark"] .field input[type="email"],
:root[data-theme="dark"] .call-form textarea { background: var(--surface-2); }
.call-form ::placeholder { color: var(--muted-soft); }
.field input:focus-visible, .call-form textarea:focus-visible {
  outline: none; border-color: var(--bronze);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bronze) 22%, transparent);
}
.call-form textarea { min-height: 106px; resize: vertical; }
.choice { display: flex; flex-direction: column; gap: 10px; }
.choice label {
  display: flex; align-items: baseline; gap: 14px;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 6px;
  padding: 13px 16px; cursor: pointer; font-size: 0.92rem;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.choice label:hover { border-color: var(--bronze); background: var(--warm-card); }
.choice input {
  appearance: none; -webkit-appearance: none;
  flex: none; transform: translateY(2px);
  width: 16px; height: 16px; margin: 0;
  border: 1px solid var(--hairline-strong); border-radius: 50%;
  background: var(--surface);
  transition: border-color 0.18s ease, background 0.18s ease;
}
.choice input[type="checkbox"] { border-radius: 4px; }
.choice input:checked { border-color: var(--bronze); }
.choice input[type="radio"]:checked { background: radial-gradient(circle, var(--bronze) 0 4px, transparent 4.5px); }
.choice input[type="checkbox"]:checked {
  background: var(--bronze) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M3 7.4 L6 10.2 L11 4.4' fill='none' stroke='%23FDFCF8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/12px no-repeat;
}
.choice label:has(input:checked) { border-color: var(--bronze); background: var(--warm-card); }
.choice label:has(input:focus-visible) { outline: 2px solid var(--bronze); outline-offset: 1px; }
.form-foot { padding: 28px 0 0; border-top: 1px solid var(--hairline); }
.form-foot .privacy { font-family: var(--sans); font-size: 0.66rem; line-height: 1.8; color: var(--muted); margin: 18px 0 0; max-width: 62ch; }
.form-alt { font-size: 0.89rem; color: var(--ink-2); margin: 26px 0 0; }
.form-alt a { color: var(--bronze); }
.form-thanks {
  border: 1px solid var(--hairline); border-left: 2px solid var(--gold);
  border-radius: 0 6px 6px 0;
  background: var(--warm-card); padding: 32px 34px; max-width: 760px;
}
.form-thanks h2 { font-size: 1.5rem; margin: 0 0 12px; }
.form-thanks p { margin: 0 0 10px; max-width: 60ch; color: var(--ink-2); }
.form-thanks p:last-child { margin: 0; }
/* book-a-call: the Cal.com month view sits right under the hero */
.cal-wrap { margin-top: 8px; }
.cal-embed { min-height: 560px; }
.cal-embed iframe { color-scheme: dark; }
.cal-fallback { margin: 14px 0 0; font-size: 0.89rem; line-height: 1.6; color: var(--ink-2); }
.cal-fallback a { color: var(--bronze); }
.form-error, .sub-error {
  font-size: 0.89rem; line-height: 1.6; color: var(--ink-2);
  border-left: 2px solid var(--bronze); padding-left: 12px;
  margin: 18px 0 0; max-width: 60ch; outline: none;
}
.form-error a, .sub-error a { color: var(--bronze); }
.sub-error { margin-top: 12px; }
/* honeypot field: off-screen for people, present for bots */
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* no-JS round trip: the worker sends the visitor back to #sent or #error */
#sent:target, #error:target { display: block !important; }
.form-wrap:has(#sent:target) form.call-form { display: none; }
[hidden] { display: none !important; }

/* ==========================================================================
   Legal
   ========================================================================== */
.page-hero.is-404 { min-height: 60vh; }
.legal { max-width: 860px; padding: clamp(44px, 7vh, 72px) 0 84px; }
.legal h1 { font-size: clamp(1.8rem, 4vw, 2.5rem); }
.legal h2 { font-size: 1.26rem; margin-top: 40px; }
.legal p { max-width: 68ch; color: var(--ink-2); }
.legal .kv { font-family: var(--sans); font-size: 0.82rem; line-height: 2.1; }


/* ==========================================================================
   Typography discipline (identity v2): Newsreader = headlines, Inter = body
   and every UI label, IBM Plex Mono = figures and data ONLY.
   ========================================================================== */
.fig, .fact-strip .v, .slide .kpi .v, .slide .decision .worth,
.case .c-outcome .worth, .slide .src, .chartbox .c-src, .chart-axis, .chart-lbl,
.legal .kv, .svc .s-v, .sprint-card .s-dur,
.steps > div::before, .slide table .fig {
  font-family: var(--mono);
}
/* small uppercase labels need a touch of weight in Inter */
.mono-label, nav.site-nav a, .menu-btn, .btn-gold, .btn-line, .link-arrow,
.p-tag, .s-no, .s-k, .m-tag, .g-no, .n-tag, .t-tag, .d-tag,
.c-strip, .case-card .sector, .a-meta, .slide-top, .slide .decision .label, .slide .kpi .k,
.slide table th, .fact-strip .k, .founder-card .role, .li-link,
.spec-tabs button, .skip-link, .field label, .call-form legend .opt, .call-form .q .opt,
.lj-label, .byline, .journey-cap .jc-tag {
  font-weight: 500;
}

/* ---------- v6: specimen-first hero ---------- */
.hero-spec { margin: 34px 0 26px; max-width: 800px; }
.hero-spec .slide-caption { max-width: 60ch; }

/* ---------- v6: creed folded into the hero — tagline leads, centered ---------- */
.hero-creed {
  margin: 104px auto 0; padding-top: 56px; border-top: 1px solid var(--hairline);
  max-width: 62ch; text-align: center;
}
.hero-creed .tagline {
  display: inline-block; font-family: var(--serif); font-style: italic;
  font-size: clamp(1.1rem, 2vw, 1.35rem); line-height: 1.3; color: var(--ink);
  border-bottom: 1px solid var(--bronze); padding-bottom: 6px; margin: 0 0 14px;
}
/* body face (Inter) for the paragraph: only the tagline stays in serif */
.hero-creed p {
  font-family: var(--sans); font-size: 0.9rem; line-height: 1.6;
  color: var(--ink-2); margin: 0;
}
.hero-creed p strong { font-weight: 500; color: var(--ink); }

/* ---------- v6: the creed (enemy block + tagline) ---------- */
.creed { max-width: 700px; }
.creed .big {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
  line-height: 1.28;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
  text-wrap: balance;
}
.creed p { color: var(--ink-2); max-width: 58ch; }
.creed .tagline {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--gold-ink);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 3px;
  margin-top: 14px;
}
.band-dark .creed .tagline { color: #EF9F27; }

/* ---------- v6: coverage-note rows ---------- */
.note-rows { list-style: none; margin: 16px 0 0; padding: 0; border-top: 1px solid rgba(242,239,232,0.14); }
.note-rows li { display: grid; grid-template-columns: 110px 1fr; gap: 14px; padding: 9px 0; border-bottom: 1px solid rgba(242,239,232,0.09); }
.note-rows .k { font-family: var(--sans); font-size: 0.62rem; letter-spacing: var(--track-label); text-transform: uppercase; color: rgba(242,239,232,0.55); padding-top: 2px; }
.note-rows .v { font-size: 0.82rem; line-height: 1.55; color: #F2EFE8; }
.note-rows .v.fig { font-family: var(--mono); }
@media (max-width: 560px) { .note-rows li { grid-template-columns: 1fr; gap: 3px; } }

/* ---------- v6: method changelog ---------- */
.changelog { list-style: none; margin: 0; padding: 0; max-width: 800px; }
.changelog li { display: grid; grid-template-columns: 96px 1fr; gap: 18px; padding: 15px 0; border-bottom: 1px solid var(--hairline); }
.changelog .d { font-family: var(--mono); font-size: 0.74rem; color: var(--bronze); padding-top: 2px; white-space: nowrap; }
.changelog .e h3 { font-size: 0.95rem; margin: 0 0 5px; }
.changelog .e p { font-size: 0.84rem; color: var(--ink-2); margin: 0; max-width: 62ch; }
@media (max-width: 560px) { .changelog li { grid-template-columns: 1fr; gap: 4px; } }

/* ---------- v6: door policy ---------- */
.fit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 1060px; }
@media (max-width: 720px) { .fit-grid { grid-template-columns: 1fr; } }
.fit-col h3 { font-size: 0.95rem; margin: 0 0 10px; }
.fit-col ul { list-style: none; margin: 0; padding: 0; }
.fit-col li { position: relative; font-size: 0.86rem; color: var(--ink-2); line-height: 1.6; padding: 7px 0 7px 24px; }
.fit-col li::before { content: ""; position: absolute; left: 2px; top: 16px; width: 10px; height: 1.5px; background: var(--bronze); }
.fit-col.is-not li::before { background: var(--muted); }

/* ---------- v6: compact rule / instrument index ---------- */
.rule-list { list-style: none; margin: 0; padding: 0; max-width: 990px; border-top: 1px solid var(--hairline); }
.rule-list li { display: grid; grid-template-columns: 118px 1fr; gap: 18px; padding: 11px 0; border-bottom: 1px solid var(--hairline); }
.rule-list .k {
  font-family: var(--sans); font-size: 0.62rem; letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--bronze); padding-top: 3px;
}
.rule-list h3 { font-family: var(--serif); font-weight: 500; font-size: 0.92rem; margin: 0 0 2px; }
.rule-list p { font-size: 0.8rem; line-height: 1.55; color: var(--ink-2); margin: 0; max-width: 72ch; }
.band-dark .rule-list, .band-dark .rule-list li { border-color: rgba(242,239,232,0.12); }
.band-dark .rule-list h3 { color: #F2EFE8; }
.band-dark .rule-list p { color: rgba(242,239,232,0.72); }
@media (max-width: 560px) { .rule-list li { grid-template-columns: 1fr; gap: 3px; } }

/* ---------- v6: the eight rules as an interactive board ----------
   Tiles show number + title only; the shared caption underneath shows what
   the hovered/tapped rule forbids. Reuses the .journey caption behaviour
   from site.js — no extra script. */
.rules-board { max-width: 1090px; }
.rb-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 860px) { .rb-grid { grid-template-columns: repeat(2, 1fr); } }
.rb-grid .jstep {
  appearance: none; font: inherit; color: inherit; text-align: left; cursor: pointer;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 6px;
  box-shadow: var(--card-rest); padding: 13px 14px 14px;
  transition: transform 0.25s var(--ease-out), border-color 0.25s ease,
              background 0.25s ease, box-shadow 0.25s ease;
}
.rb-grid .jstep .no {
  display: block; font-family: var(--sans); font-size: 0.6rem;
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--bronze); margin-bottom: 7px;
}
.rb-grid .jstep .t {
  display: block; font-family: var(--serif); font-weight: 500;
  font-size: 0.88rem; line-height: 1.3; text-wrap: balance;
}
.rb-grid .jstep:hover, .rb-grid .jstep:focus-visible, .rb-grid .jstep.is-active {
  transform: translateY(-2px); border-color: var(--bronze);
  background: var(--warm-card); box-shadow: var(--card-shadow);
}
.rb-grid .jstep:focus-visible { outline: 2px solid var(--bronze); outline-offset: 2px; }
.rules-board .journey-cap { margin-top: 14px; }

/* ---------- services band on the homepage: fits one laptop viewport ---------- */
.svc-band { padding-top: 56px; padding-bottom: 56px; }
.svc-band .lede { margin-bottom: 28px; }
.svc-band .svc-list { margin-bottom: 24px; gap: 0 24px; }
.svc-band .svc { padding: 26px 24px 22px; }
.svc-band .svc .s-no { margin-bottom: 14px; }
.svc-band .svc h3 { margin-bottom: 10px; }
.svc-band .svc .s-what { margin-bottom: 16px; }
.svc-band .svc .s-row { padding: 10px 0 11px; }
.svc-band .svc .s-list { padding-top: 14px; }
.svc-band .svc .s-list li { margin-bottom: 8px; }
.svc-band .svc .link-arrow { padding-top: 16px; }
.svc-band .price-note { margin-bottom: 12px; }
@media (max-width: 820px) { .svc-band .svc-list { gap: 20px; } }
.tailor-line {
  font-family: var(--serif); font-size: 0.92rem; line-height: 1.5; color: var(--ink-2);
  margin: 16px 0 0; padding-top: 16px; border-top: 1px solid var(--hairline);
}
.tailor-line .link-arrow { margin-left: 10px; vertical-align: baseline; }
/* ---------- v6: tailor-made CTA under the service columns ---------- */
.tailor-cta {
  margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--hairline);
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px 28px; flex-wrap: wrap;
}
.tailor-cta p {
  font-family: var(--serif); font-size: 0.95rem; line-height: 1.5;
  color: var(--ink-2); margin: 0; max-width: 56ch;
}
.tailor-cta .btn-line { flex: none; }

/* ---------- v6: optional call-form questions, collapsed ---------- */
.form-more { border-top: 1px solid var(--hairline); }
.form-more > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: baseline; gap: 14px;
  padding: 22px 2px;
  font-family: var(--serif); font-size: 0.98rem; line-height: 1.35;
  transition: color 0.18s ease;
}
.form-more > summary::-webkit-details-marker { display: none; }
.form-more > summary .opt {
  font-family: var(--sans); font-size: 0.6rem; letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--muted); margin-left: auto; font-weight: 500;
}
.form-more > summary::after {
  content: ""; width: 11px; height: 11px; flex: none; align-self: center;
  background:
    linear-gradient(var(--bronze) 0 0) center / 11px 1.5px no-repeat,
    linear-gradient(var(--bronze) 0 0) center / 1.5px 11px no-repeat;
  transition: transform 0.3s var(--ease-out);
}
.form-more[open] > summary::after { transform: rotate(45deg); }
.form-more > summary:hover, .form-more > summary:focus-visible { color: var(--bronze); }
.form-more fieldset:first-of-type { border-top: none; padding-top: 4px; }

/* ---------- v6: ledger ---------- */
.ledger-note { font-family: var(--sans); font-size: 0.7rem; line-height: 1.8; color: var(--muted); border-left: 2px solid var(--gold); padding: 4px 0 4px 20px; max-width: 70ch; margin: 26px 0 0; }

/* ---------- team duo: two equal profile cards ----------
   Photo card with a name plate, one serif sentence, three proof rows,
   and the LinkedIn link. No expander: nobody opened it. */
.team-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; max-width: 1090px; align-items: start; }
@media (max-width: 760px) { .team-duo { grid-template-columns: 1fr; } }
.member {
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 12px;
  padding: 26px 28px 22px; box-shadow: var(--card-rest);
}
.mem-photo {
  position: relative; width: min(224px, 100%); aspect-ratio: 3 / 4;
  border-radius: 12px; overflow: hidden; border: 1px solid var(--hairline);
  box-shadow: var(--card-shadow); margin: 0 0 18px;
}
.mem-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.04); }
.tp-plate {
  position: absolute; left: 0; right: 0; bottom: 0; display: block;
  padding: 46px 16px 13px;
  background: linear-gradient(to top, rgba(20, 17, 12, 0.85), rgba(20, 17, 12, 0.5) 55%, transparent);
}
.tp-name { display: block; font-family: var(--serif); font-size: 1.06rem; line-height: 1.2; color: #F2EFE8; }
.tp-role { display: block; margin-top: 5px; font-family: var(--sans); font-size: 0.56rem; letter-spacing: var(--track-label); text-transform: uppercase; color: #D9B577; }
.mem-sum { font-family: var(--serif); font-size: 0.97rem; line-height: 1.5; color: var(--ink); margin: 0 0 14px; max-width: 56ch; }
.mem-facts { list-style: none; margin: 0 0 18px; padding: 0; border-top: 1px solid var(--hairline); }
.mem-facts li { display: block; padding: 10px 2px 11px; border-bottom: 1px solid var(--hairline); }
.mem-facts .k { display: block; font-family: var(--sans); font-size: 0.6rem; font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); line-height: 1.4; margin-bottom: 3px; }
.mem-facts .v { display: block; font-size: 0.84rem; line-height: 1.5; color: var(--ink); }
.mem-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.mem-facts .is-edu .v { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-height: 26px; }
.mem-facts .is-edu .v .edu-deg { color: var(--ink); }
.mem-school { display: block; height: var(--h, 20px); width: calc(var(--h, 20px) * var(--ar, 4)); background: var(--muted); opacity: 0.8;
  -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }

/* ---------- team: the philosophy + where we learned the trade ---------- */
.philo { max-width: 66ch; }
.philo p { font-size: 0.95rem; line-height: 1.65; color: var(--ink-2); margin: 0 0 16px; }
.philo p:last-child { margin-bottom: 0; }
.logo-strip { --ls-gap: clamp(36px, 4.6vw, 64px); margin-top: 40px; padding: 24px 0 36px; border-top: 1px solid var(--hairline); }
.ls-label { display: block; margin-bottom: 40px; font-family: var(--sans); font-size: 0.6rem; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--bronze); }
.ls-track { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ls-track + .ls-track { margin-top: 40px; }
/* site.js wraps each row in a belt of four copies; the belt slides by two copies, so the loop has no seam */
.ls-belt { display: flex; width: max-content; }
.ls-row { display: flex; align-items: center; flex: 0 0 auto; gap: var(--ls-gap); list-style: none; margin: 0; padding: 6px calc(var(--ls-gap) / 2); }
.ls-row li { flex: 0 0 auto; display: flex; align-items: center; }
/* each logo is a single-colour silhouette: the SVG is used as a mask over the ink colour */
.lg { display: block; width: min(var(--w, 300px), calc(36px * var(--s, 1) * var(--ar, 3))); aspect-ratio: var(--ar, 3); background: var(--ink); opacity: 0.62;
  -webkit-mask-size: contain; -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; mask-size: contain; mask-position: center; mask-repeat: no-repeat; transition: opacity 0.25s ease; }
.logo-strip:hover .lg { opacity: 0.92; }
@media (prefers-reduced-motion: no-preference) {
  .ls-track[data-dir="rtl"] .ls-belt { animation: ls-scroll-left 55s linear infinite; }
  .ls-track[data-dir="ltr"] .ls-belt { animation: ls-scroll-right 55s linear infinite; }
}
@keyframes ls-scroll-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes ls-scroll-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
/* no belt (reduced motion, or no script): the row wraps and sits still */
.ls-track > .ls-row { flex-wrap: wrap; gap: 22px 48px; padding: 6px 0; }
@media (prefers-reduced-motion: reduce) { .ls-track { -webkit-mask-image: none; mask-image: none; } }
/* phones: smaller logos and a tighter gap, so a band shows three or four at a time instead of one cut in half */
@media (max-width: 720px) { .logo-strip { --ls-gap: 26px; } .lg { width: min(132px, calc(20px * var(--ar, 3))); } .ls-track + .ls-track { margin-top: 22px; } }
/* home: the same bands as their own chapter between the mission and the problem */
.logo-strip.is-standalone { margin-top: 0; padding: 0; border-top: 0; }
.logo-strip.is-standalone .ls-label { margin-bottom: 72px; }
@media (max-width: 720px) { .logo-strip.is-standalone .ls-label { margin-bottom: 48px; } }
/* the logo bands on the home page breathe: more room above and below than a plain chapter */
.logo-chapter { padding: 84px 0 80px; }
/* under the bands: one line and one link to the use cases, where the experience shows */
.ls-cta { margin: 56px 0 0; text-align: center; font-family: var(--serif); font-size: 0.92rem; line-height: 1.5; color: var(--ink-2); }
.ls-cta .link-arrow { display: inline-flex; }
@media (max-width: 720px) { .ls-cta { margin-top: 40px; } }
/* the four qualities: four columns separated by hairlines, each a bronze tile icon
   with the title beside it and the line below. Separate things, kept apart. */
.qualities { display: grid; grid-template-columns: repeat(4, 1fr); margin: 40px 0 44px; }
.quality { position: relative; padding: 4px 28px 4px 0; }
.quality + .quality { padding-left: 28px; border-left: 1px solid var(--hairline); }
.quality .q-node { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.quality .q-icon {
  flex: none; display: block; box-sizing: border-box; width: 46px; height: 46px; padding: 11px; border-radius: 10px;
  color: var(--bronze); background: color-mix(in srgb, var(--bronze) 12%, transparent);
  transition: background 0.25s ease, transform 0.35s var(--ease-out);
}
.quality:hover .q-icon { background: color-mix(in srgb, var(--bronze) 22%, transparent); transform: translateY(-2px); }
.quality .q-text { max-width: 30ch; }
.quality .q-tag { display: block; font-family: var(--serif); font-size: 1.3rem; line-height: 1.15; color: var(--ink); margin-bottom: 8px; }
.quality p { font-family: var(--sans); font-size: 0.88rem; line-height: 1.55; color: var(--ink-2); margin: 0; }
@media (max-width: 920px) {
  .qualities { grid-template-columns: 1fr 1fr; row-gap: 30px; margin: 30px 0 36px; }
  .quality { padding: 0 24px 0 0; }
  .quality + .quality { padding-left: 0; border-left: 0; }
  .quality:nth-child(even) { padding: 0 0 0 24px; border-left: 1px solid var(--hairline); }
  .quality .q-text { max-width: none; }
}
@media (max-width: 540px) {
  .qualities { grid-template-columns: 1fr; row-gap: 24px; }
  .quality, .quality:nth-child(even) { padding: 0; border-left: 0; }
}
.method-grid.is-single { grid-template-columns: minmax(0, 560px); }


/* ---------- technology dropdown (header) ---------- */
nav.site-nav .nav-menu { position: relative; display: flex; align-items: center; gap: 4px; }
nav.site-nav .nav-menu-link { white-space: nowrap; }
/* the label is a toggle, not a link: the hub page is hidden, only the stack pages are reachable */
nav.site-nav button.nav-menu-link {
  font-family: var(--sans); font-size: 0.64rem; letter-spacing: var(--track-label); text-transform: uppercase;
  line-height: inherit; color: var(--muted); background: none; border: 0; margin: 0; padding: 0 0 3px;
  cursor: pointer; position: relative; transition: color 0.18s ease;
}
nav.site-nav button.nav-menu-link:hover, nav.site-nav button.nav-menu-link:focus-visible { color: var(--ink); }
nav.site-nav .nav-menu-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin: -4px -6px -4px -2px; padding: 0;
  background: none; border: 0; cursor: pointer; color: var(--muted); transition: color 0.18s ease;
}
nav.site-nav .nav-menu-btn::after {
  content: ""; width: 5px; height: 5px;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform 0.2s ease;
}
nav.site-nav .nav-menu.is-open .nav-menu-btn::after { transform: translateY(1px) rotate(225deg); }
nav.site-nav .nav-menu-btn:hover, nav.site-nav .nav-menu-btn:focus-visible,
nav.site-nav .nav-menu.is-open .nav-menu-btn, nav.site-nav .nav-menu.is-open .nav-menu-link,
nav.site-nav .nav-menu.is-current .nav-menu-link { color: var(--ink); }
nav.site-nav .nav-menu.is-current .nav-menu-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--bronze); display: block;
}
nav.site-nav .nav-menu:not(.is-open) .nav-panel { display: none; }
nav.site-nav .nav-panel {
  position: absolute; top: calc(100% + 12px); left: -10px; z-index: 40; width: max-content; padding: 6px;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 6px; box-shadow: var(--card-shadow);
}
/* one link per page; the tools it covers on a second, quieter line */
nav.site-nav .nav-panel .nav-name { display: block; }
nav.site-nav .nav-panel .nav-tools {
  display: block; margin-top: 3px; font-size: 0.7rem; letter-spacing: 0.01em;
  text-transform: none; color: var(--muted); white-space: normal; max-width: 240px;
}
nav.site-nav .nav-panel a[aria-current="page"] .nav-name::after {
  content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--bronze); margin-left: 8px; vertical-align: 1px;
}
nav.site-nav .nav-panel a { display: block; padding: 9px 12px; border-radius: 4px; white-space: nowrap; }
nav.site-nav .nav-panel a:hover,
nav.site-nav .nav-panel a:focus-visible { background: var(--warm-card); color: var(--ink); }
nav.site-nav .nav-panel a.is-all { color: var(--ink); border-bottom: 1px solid var(--hairline); border-radius: 4px 4px 0 0; margin-bottom: 4px; }
nav.site-nav .nav-panel a[aria-current="page"] { color: var(--ink); }
nav.site-nav .nav-panel a[aria-current="page"]::after { display: none; }
@media (max-width: 960px) {
  nav.site-nav .nav-menu { flex-wrap: wrap; gap: 0 10px; padding: 0; }
  nav.site-nav .nav-menu-btn { width: 40px; height: 40px; margin: 0; }
  nav.site-nav button.nav-menu-link { padding: 12px 0 6px; font-size: 0.72rem; }
  nav.site-nav .nav-menu.is-current .nav-menu-link::after { bottom: 0; right: auto; width: 28px; }
  nav.site-nav .nav-menu .nav-panel { flex-basis: 100%; }
  nav.site-nav .nav-menu .nav-panel { position: static; min-width: 0; margin-top: 6px; padding: 0 0 0 14px; background: none; border: none; box-shadow: none; }
  nav.site-nav .nav-panel a { padding: 8px 0; }
  nav.site-nav .nav-panel a:hover { background: none; }
  nav.site-nav .nav-panel a.is-all { border-bottom: none; margin-bottom: 0; }
  nav.site-nav .nav-panel .nav-tools { font-size: 0.7rem; max-width: none; }
}

/* technology hub: rule-list titles are links; the label column carries the tool names */
.rule-list.is-links li { grid-template-columns: 152px 1fr; }
@media (max-width: 560px) { .rule-list.is-links li { grid-template-columns: 1fr; } }
.rule-list.is-links h3 a { color: inherit; text-decoration: none; transition: color 0.18s ease; }
.rule-list.is-links h3 a:hover,
.rule-list.is-links h3 a:focus-visible { color: var(--bronze); }
.rule-list.is-links h3 a::after { content: " \2192"; color: var(--bronze); opacity: 0; transition: opacity 0.18s ease; }
.rule-list.is-links li:hover h3 a::after,
.rule-list.is-links h3 a:focus-visible::after { opacity: 1; }

/* ---------- v6.1: our mission — three interlocking links ----------
   Data · Data-driven decisions · Business. The outer links sit apart; the
   gold link forms in the gap and draws them in until all three interlock.
   Geometry and motion in site.js (the chain block); text in real pixels. */
.mission-chapter { padding-bottom: 48px; }
.mission-chapter h2 { margin-bottom: 0; }
.chain { margin: 12px 0 0; position: relative; }
/* the mission statement sits under the chain, centred like the figure */
.mission-text { max-width: none; margin: 28px 0 0; font-size: 0.95rem; line-height: 1.65; color: var(--ink-2); }
.mission-text p { margin: 0; text-align: justify; hyphens: auto; }
/* the four commitments: a quadrant. Two columns, two rows, hairlines between the
   cells, a bronze tile icon beside each line (same tile as the team qualities). */
.mission-list { list-style: none; max-width: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; }
.mission-list li { display: flex; align-items: center; gap: 16px; padding: 22px 28px; }
.mission-list li:nth-child(odd) { padding-left: 0; }
.mission-list li:nth-child(even) { border-left: 1px solid var(--hairline); }
.mission-list li:nth-child(n+3) { border-top: 1px solid var(--hairline); }
.mission-list .ml-icon {
  flex: none; display: block; box-sizing: border-box; width: 46px; height: 46px; padding: 11px; border-radius: 10px;
  color: var(--bronze); background: color-mix(in srgb, var(--bronze) 12%, transparent);
  transition: background 0.25s ease, transform 0.35s var(--ease-out);
}
.mission-list li:hover .ml-icon { background: color-mix(in srgb, var(--bronze) 22%, transparent); transform: translateY(-2px); }
.mission-list span { font-family: var(--serif); font-size: 1.04rem; line-height: 1.35; color: var(--ink); }
@media (max-width: 540px) {
  .mission-list { grid-template-columns: 1fr; }
  .mission-list li, .mission-list li:nth-child(odd) { padding: 16px 0; }
  .mission-list li:nth-child(even) { border-left: 0; }
  .mission-list li + li { border-top: 1px solid var(--hairline); }
}
.ck-stage { position: relative; height: 290px; }
.ck-svg { display: block; overflow: visible; width: 100%; height: 100%; }
.ck-ring { fill: none; stroke: var(--ink); stroke-width: 3px; }
.ck-ring.is-gold { stroke: var(--gold); stroke-width: 4px; }
.ck-fill { fill: color-mix(in srgb, var(--gold) 7%, transparent); stroke: none; pointer-events: none; }
/* depth: each link on top carries a page-coloured halo that cuts the link beneath */
.ck-ring.ck-under { stroke: var(--bg); fill: none; }
.ck-run { fill: none; stroke: #FFE9B8; stroke-width: 4px; stroke-linecap: round; opacity: 0; }
.ck-run-glow { fill: none; stroke: var(--gold); stroke-width: 14px; stroke-linecap: round; opacity: 0; }
.ck-t1 { font-family: var(--sans); font-size: 17px; letter-spacing: var(--track-label); text-transform: uppercase; fill: var(--ink); }
.ck-t2 { font-family: var(--sans); font-size: 22px; letter-spacing: var(--track-label); text-transform: uppercase; fill: var(--ink); }
html[lang="fr"] .ck-t2 { font-size: 18px; } /* "fondées sur les données" is the longest line */
.ck-t2c { font-family: var(--sans); font-size: 12px; letter-spacing: var(--track-label); text-transform: uppercase; fill: var(--bronze); }
.ck-text { text-anchor: middle; pointer-events: none; }
@media (max-width: 720px) {
  .ck-stage { height: 400px; }
  .ck-t1 { font-size: 15px; }
  .ck-t2 { font-size: 17px; }
  html[lang="fr"] .ck-t2 { font-size: 14px; }
}