/* ==== 00-tokens.css ==== */
/* =========================================================================
   Translation Works — Version B "Signature"
   00 · Fonts + design tokens
   ========================================================================= */

/* ---- Inter (variable 100–900), split by script --------------------------------------- */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/inter-cyrillic-wght-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/inter-cyrillic-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/inter-greek-wght-normal.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url("fonts/inter-latin-wght-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url("fonts/inter-latin-ext-wght-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---- Instrument Serif (accent words, italic) ---------------------------------------- */
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/instrument-serif-latin-400-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/instrument-serif-latin-ext-400-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/instrument-serif-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/instrument-serif-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2C60-2C7F, U+A720-A7FF; }

/* ---- JetBrains Mono (technical labels) ---------------------------------------------- */
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url("fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url("fonts/jetbrains-mono-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2C60-2C7F, U+A720-A7FF; }

/* ---- Tokens ---------------------------------------------------------------------------- */
:root {
  /* Colour primitives (--c-black, --c-ink-1…4, --c-white, --c-paper(-2), --c-text(-2/-3), --c-on-dark(-2/-3),
     --c-accent + --c-on-accent + --c-accent-050…900, --c-danger…) are GENERATED per palette by src/lib/palettes.mjs
     ("two greys + one colour") and injected right after this file. Never hard-code a colour: use these. */

  /* Gradients — one hue only (accent ramp), so every palette still reads as a single colour */
  --grad-brand: linear-gradient(100deg, var(--c-accent-400) 0%, var(--c-accent-300) 55%, var(--c-accent-200) 100%);
  --grad-brand-deep: linear-gradient(120deg, var(--c-accent) 0%, var(--c-accent-400) 55%, var(--c-accent-300) 100%);
  --grad-text-dark: linear-gradient(180deg, var(--c-white) 20%, var(--c-accent-200) 100%);
  --grad-fill: linear-gradient(140deg, var(--c-fill-a), var(--c-fill-b) 55%, var(--c-fill-c)); /* solid accent surfaces; text = --c-on-accent */

  /* Type */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Hiragino Sans", "Microsoft YaHei", "Noto Sans Arabic", "Noto Sans Devanagari", sans-serif;
  --font-serif: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --fs-display-xl: clamp(3.25rem, 1.2rem + 8.4vw, 10rem);    /* 52 → 160 */
  --fs-display-lg: clamp(2.75rem, 1.35rem + 5.6vw, 7.25rem); /* 44 → 116 */
  --fs-display-md: clamp(2.25rem, 1.35rem + 3.6vw, 5rem);    /* 36 → 80 */
  --fs-h-xl: clamp(2.5rem, 1.3rem + 4.8vw, 6rem);            /* 40 → 96 */
  --fs-h-lg: clamp(2.125rem, 1.3rem + 3.3vw, 4.5rem);        /* 34 → 72 */
  --fs-h-md: clamp(1.75rem, 1.2rem + 2.1vw, 3.125rem);       /* 28 → 50 */
  --fs-h-sm: clamp(1.25rem, 1.1rem + 0.55vw, 1.625rem);      /* 20 → 26 */
  --fs-h-xs: 1.1875rem;                                      /* 19 */
  --fs-lede: clamp(1.1875rem, 1.04rem + 0.6vw, 1.5rem);      /* 19 → 24 */
  --fs-body-lg: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);  /* 17 → 19 */
  --fs-body: 1.0625rem;                                      /* 17 */
  --fs-small: 0.9375rem;                                     /* 15 */
  --fs-xs: 0.8125rem;                                        /* 13 */
  --fs-mono: 0.75rem;                                        /* 12 */

  --lh-display: 0.98;
  --lh-tight: 1.06;
  --lh-snug: 1.2;
  --lh-body: 1.55;
  --lh-prose: 1.72;
  --ls-display: -0.05em;
  --ls-h: -0.035em;
  --ls-tight: -0.018em;
  --ls-mono: 0.14em;
  --fw-display: 650;
  --fw-h: 640;

  /* Space */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 6rem;
  --space-11: 8rem;
  --section-y: clamp(4.5rem, 2.5rem + 7vw, 9.5rem);
  --section-y-sm: clamp(3.5rem, 2rem + 5vw, 6.5rem);
  --gutter: clamp(1rem, 0.35rem + 2.8vw, 2.75rem);
  --gap: clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
  --container: 1280px;
  --container-wide: 1560px;
  --container-narrow: 780px;
  --header-h: 64px;

  /* Radii */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-xl: clamp(24px, 1rem + 1.4vw, 36px);
  --r-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.04), 0 12px 32px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 30px 80px -20px rgba(0, 0, 0, 0.28);
  --shadow-glow: 0 0 0 1px color-mix(in srgb, var(--c-accent-400) 28%, transparent), 0 20px 60px -20px color-mix(in srgb, var(--c-accent) 65%, transparent);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-1: 0.15s;
  --dur-2: 0.3s;
  --dur-3: 0.6s;
  --dur-4: 1s;

  /* Layers */
  --z-header: 100;
  --z-mmenu: 95;
  --z-mobile-cta: 90;
  --z-cookie: 130;
  --z-veil: 200;
}

@media (min-width: 1080px) {
  :root { --header-h: 72px; }
}

/* ---- Theme scopes: components read these, sections set them --------------------------- */
:root,
[data-theme="light"] {
  --bg: var(--c-white);
  --surface: var(--c-paper);
  --surface-2: var(--c-white);
  --surface-hover: var(--c-surface-hover-light);
  --fg: var(--c-text);
  --fg-2: var(--c-text-2);
  --fg-3: var(--c-text-3);
  --border: color-mix(in srgb, var(--c-text) 11%, transparent);
  --border-strong: color-mix(in srgb, var(--c-text) 22%, transparent);
  --accent: var(--c-accent-600);
  --accent-strong: var(--c-accent-700);
  --accent-soft: var(--c-accent-050);
  --focus: var(--c-accent-600);
  --danger: var(--c-danger);
  --field-bg: var(--c-white);
  --field-border: var(--c-field-border);
  color-scheme: light;
}
.section--grey {
  --bg: var(--c-paper);
  --surface: var(--c-white);
  --surface-2: var(--c-paper);
  --surface-hover: var(--c-surface-hover-grey);
  --border: color-mix(in srgb, var(--c-text) 9%, transparent);
}
[data-theme="dark"] {
  --bg: var(--c-black);
  --surface: var(--c-ink-2);
  --surface-2: var(--c-ink-3);
  --surface-hover: var(--c-ink-3);
  --fg: var(--c-on-dark);
  --fg-2: var(--c-on-dark-2);
  --fg-3: var(--c-on-dark-3);
  --border: color-mix(in srgb, var(--c-white) 10%, transparent);
  --border-strong: color-mix(in srgb, var(--c-white) 21%, transparent);
  --accent: var(--c-accent-400);
  --accent-strong: var(--c-accent-300);
  --accent-soft: color-mix(in srgb, var(--c-accent-400) 14%, transparent);
  --focus: var(--c-accent-400);
  --danger: var(--c-danger-dark);
  --field-bg: color-mix(in srgb, var(--c-white) 5%, transparent);
  --field-border: color-mix(in srgb, var(--c-white) 34%, transparent);
  color-scheme: dark;
}

/* ==== generated: src/lib/palettes.mjs (two greys + one colour) ==== */
:root {
  --c-black: #e5eae9;
  --c-ink-1: #eef2f1;
  --c-ink-2: #f5f7f7;
  --c-ink-3: #f9fbfa;
  --c-ink-4: #bcc1c1;
  --c-shade: #616566;
  --c-white: #fbfcfc;
  --c-paper: #f1f4f3;
  --c-paper-2: #ebefee;
  --c-text: #1a1e1f;
  --c-text-2: #505354;
  --c-text-3: #626566;
  --c-on-dark: #1a1e1f;
  --c-on-dark-2: #505354;
  --c-on-dark-3: #626566;
  --c-field-border: #7d8080;
  --c-surface-hover-light: #f1f4f3;
  --c-surface-hover-grey: #f7f9f8;
  --c-accent: #0b7a72;
  --c-on-accent: #fbfcfc;
  --c-fill-a: #0c6059;
  --c-fill-b: #0b7a72;
  --c-fill-c: #329289;
  --c-accent-050: #e8f2f1;
  --c-accent-100: #d7e9e7;
  --c-accent-200: #03524c;
  --c-accent-300: #035f58;
  --c-accent-400: #0b6b63;
  --c-accent-500: #0b736b;
  --c-accent-600: #08736a;
  --c-accent-700: #066059;
  --c-accent-900: #043632;
  --c-danger: #c3282e;
  --c-danger-dark: #c3282e;
  --c-danger-050: #f7ebec;
  --c-page: #fbfcfc;
  --c-accent-tint: #cfdfdd;
}

/* ==== 05-base.css ==== */
/* 05 · Reset + base typography + utilities */

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--c-black);
  scroll-padding-top: calc(var(--header-h) + 24px);
}
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-feature-settings: "cv11", "ss01", "ss03";
  font-optical-sizing: auto;
  color: var(--fg);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
main { display: block; background: var(--c-black); }
main:focus { outline: none; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
ol[class], ul[class] { list-style: none; padding: 0; }
img, picture, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
picture { background: var(--img-color, transparent); }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration-thickness: 0.06em; text-underline-offset: 0.18em; }
address { font-style: normal; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }
::selection { background: color-mix(in srgb, var(--c-accent-400) 35%, transparent); color: inherit; }

h1, h2, h3, h4 {
  font-weight: var(--fw-h);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-snug);
  text-wrap: balance;
}
p { text-wrap: pretty; }
strong, b { font-weight: 640; }

/* Expressive serif accent — any <em> inside a headline, or .serif anywhere */
.serif,
h1 em, h2 em, .h-xl em, .h-lg em, .h-md em, .display em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  padding-right: 0;
  margin-right: -0.02em; /* no visible gap before trailing punctuation ("global.") */
}
[data-theme="dark"] h1 em, [data-theme="dark"] h2 em, [data-theme="dark"] .serif { color: var(--c-accent-300); }

/* Display/heading scale utilities */
.display-xl { font-size: var(--fs-display-xl); }
.display-lg { font-size: var(--fs-display-lg); }
.display-md { font-size: var(--fs-display-md); }
.display-xl, .display-lg, .display-md {
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
}
.h-xl, .h-lg, .h-md { font-weight: var(--fw-h); letter-spacing: var(--ls-h); line-height: var(--lh-tight); }
.h-xl { font-size: var(--fs-h-xl); }
.h-lg { font-size: var(--fs-h-lg); }
.h-md { font-size: var(--fs-h-md); line-height: 1.1; }
.h-sm { font-size: var(--fs-h-sm); letter-spacing: -0.022em; line-height: 1.2; }
.lede { font-size: var(--fs-lede); line-height: 1.45; color: var(--fg-2); letter-spacing: -0.012em; }
.mono { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0.08em; }
.text-grad {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Focus — visible, consistent, theme aware */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}
:focus:not(:focus-visible) { outline: none; }

/* Icons — sized by their width/height attributes */
.icon { flex: none; }

/* Utilities */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed;
  top: 12px; left: 12px;
  z-index: 1000;
  padding: 12px 20px;
  border-radius: var(--r-pill);
  background: var(--c-white);
  color: var(--c-text);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--dur-2) var(--ease-out);
}
.skip-link:focus { transform: none; }
.stretched::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.img-missing { display: block; width: 100%; aspect-ratio: 4 / 3; background: linear-gradient(135deg, var(--c-ink-3), var(--c-ink-1)); }
.nowrap, .nobr { white-space: nowrap; }

code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  padding: 0.12em 0.4em;
  border-radius: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
}

/* ==== 10-layout.css ==== */
/* 10 · Layout primitives: containers, section shells, grids, bento */

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide { max-width: calc(var(--container-wide) + 2 * var(--gutter)); }
.container--narrow { max-width: calc(var(--container-narrow) + 2 * var(--gutter)); }

/* Section shells — theme sets the custom properties (see 00-tokens) */
.section {
  position: relative;
  padding-block: var(--section-y);
  background: var(--bg);
  color: var(--fg);
  isolation: isolate;
}
.section--flush { padding-top: 0; }
.section--tight { padding-block: var(--section-y-sm); }
.section--dark { background: var(--c-black); }
.section--light { background: var(--c-white); }
.section--grey { background: var(--c-paper); }
.section--aurora { background: var(--c-black); overflow: hidden; }
/* A soft divider when two different light tones meet is unnecessary; dark → light needs none either. */

/* Generic grids */
.grid { display: grid; gap: var(--gap); }
.grid-2 { display: grid; gap: var(--gap); }
.grid-3 { display: grid; gap: var(--gap); }
.grid-4 { display: grid; gap: var(--gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1040px) {
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Vertical rhythm helper */
.stack > * + * { margin-top: var(--stack, 1rem); }

/* Bento — 6-column grid; cells span by count */
.bento {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.bento > * { grid-column: span 6; }
@media (min-width: 680px) {
  .bento > * { grid-column: span 3; }
  .bento--1 > *, .bento--3 > :first-child, .bento--5 > :first-child { grid-column: span 6; }
}
@media (min-width: 1000px) {
  .bento--3 > *, .bento--3 > :first-child { grid-column: span 2; }
  .bento--5 > :nth-child(-n + 2) { grid-column: span 3; }
  .bento--5 > :nth-child(n + 3) { grid-column: span 2; }
  .bento--6 > * { grid-column: span 2; }
  .bento--4 > * { grid-column: span 3; }
  .bento > .span-2 { grid-column: span 2; }
  .bento > .span-3 { grid-column: span 3; }
  .bento > .span-4 { grid-column: span 4; }
  .bento > .span-6 { grid-column: span 6; }
}

/* ==== 20-components.css ==== */
/* 20 · Components: buttons, links, eyebrow + section head, tiles, badges/chips, lists,
        accordion, tabs/segmented, breadcrumbs, table, prose, switch, aurora, misc. */

/* ---------- Buttons ---------- */
.btn {
  --btn-h: 48px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: var(--btn-h);
  padding: 0 1.5rem;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.012em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out),
    border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-3) var(--ease-out), scale 0.3s var(--ease-out);
}
.btn__icon { transition: transform var(--dur-3) var(--ease-out); }
.btn:hover .btn__icon { transform: translateX(3px); }
.btn:active { scale: 0.98; }
.btn--sm { --btn-h: 40px; padding: 0 1.05rem; font-size: 0.9375rem; gap: 0.4rem; }
.btn--lg { --btn-h: 56px; padding: 0 1.85rem; font-size: 1.0625rem; }
.btn--block { width: 100%; }

.btn--primary {
  background: var(--c-accent);
  color: var(--c-on-accent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--c-white) 22%, transparent), 0 10px 28px -10px color-mix(in srgb, var(--c-accent) 75%, transparent);
}
.btn--primary:hover {
  background: var(--c-fill-a);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--c-white) 22%, transparent), 0 16px 40px -10px color-mix(in srgb, var(--c-accent) 90%, transparent), 0 0 0 4px color-mix(in srgb, var(--c-accent-400) 16%, transparent);
}
.btn--secondary {
  background: transparent;
  color: var(--fg);
  border-color: var(--border-strong);
}
.btn--secondary:hover { background: var(--surface); border-color: var(--fg-3); }
[data-theme="dark"] .btn--secondary { background: color-mix(in srgb, var(--c-white) 6%, transparent); border-color: color-mix(in srgb, var(--c-white) 18%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
[data-theme="dark"] .btn--secondary:hover { background: color-mix(in srgb, var(--c-white) 12%, transparent); border-color: color-mix(in srgb, var(--c-white) 32%, transparent); }
.btn--ghost { background: transparent; color: var(--fg); }
.btn--ghost:hover { background: var(--surface); }
.btn--light { background: var(--c-white); color: var(--c-black); box-shadow: 0 12px 34px -12px color-mix(in srgb, var(--c-white) 45%, transparent); }
.btn--light:hover { background: var(--c-accent-050); }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--r-pill);
  color: var(--fg);
  transition: background-color var(--dur-2);
}
.icon-btn:hover { background: var(--surface); }

/* ---------- Text link with chevron ---------- */
.link-chevron {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  letter-spacing: -0.01em;
}
.link-chevron .icon { transition: transform var(--dur-3) var(--ease-out); }
.link-chevron:hover span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.link-chevron:hover .icon { transform: translateX(3px); }

/* ---------- Eyebrow + section head ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before {
  content: "";
  width: 1.25rem; height: 1px;
  background: currentColor;
  opacity: 0.7;
}
[data-theme="dark"] .eyebrow { color: var(--c-accent-400); }
.eyebrow .icon { margin-right: -0.2rem; }
.shead { max-width: 52rem; margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.shead--center { margin-inline: auto; text-align: center; }
.shead--center .shead__title { margin-inline: auto; }
.shead--center .shead__intro { margin-inline: auto; }
.shead__eyebrow { margin-bottom: 1.1rem; }
.shead__title { max-width: 20ch; font-weight: var(--fw-h); letter-spacing: var(--ls-h); line-height: var(--lh-tight); }
.shead__title.h-md { max-width: 24ch; }
.shead__intro { margin-top: 1.25rem; max-width: 42rem; font-size: var(--fs-lede); line-height: 1.45; color: var(--fg-2); letter-spacing: -0.012em; }
.shead__title.h-lg { font-size: var(--fs-h-lg); }
.shead__title.h-md { font-size: var(--fs-h-md); }
.shead__title.h-xl { font-size: var(--fs-h-xl); }

/* ---------- Icon badge ---------- */
.icon-badge {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 52px; height: 52px;
  border-radius: 16px;
  color: var(--c-accent-600);
  background: linear-gradient(140deg, var(--c-accent-050), var(--c-accent-100));
  border: 1px solid color-mix(in srgb, var(--c-accent) 12%, transparent);
}
[data-theme="dark"] .icon-badge {
  color: var(--c-accent-300);
  background: linear-gradient(140deg, color-mix(in srgb, var(--c-accent) 28%, transparent), color-mix(in srgb, var(--c-accent-300) 14%, transparent));
  border-color: color-mix(in srgb, var(--c-white) 10%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--c-white) 8%, transparent);
}
.icon-badge--sm { width: 40px; height: 40px; border-radius: 12px; }
.icon-badge--sm .icon { width: 20px; height: 20px; }

/* ---------- Tiles / cards ---------- */
.tiles {
  display: grid;
  gap: var(--gap);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px) {
  .tiles--n2, .tiles--n3, .tiles--n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1040px) {
  .tiles--n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1180px) {
  .tiles--n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.6s var(--ease-out), border-color var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out), background-color var(--dur-3);
}
.tile--link:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: var(--shadow-md); }
[data-theme="dark"] .tile--link:hover { box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8), 0 0 0 1px color-mix(in srgb, var(--c-accent-400) 18%, transparent); }
.tile:has(.tile__link:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
.tile__link { color: inherit; text-decoration: none; }
.tile__link:focus-visible { outline: none; }
.tile__link::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; }
.tile__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--surface-2);
}
.tile__media picture, .tile__img { width: 100%; height: 100%; }
.tile__img { object-fit: cover; transition: transform 1.2s var(--ease-out); }
.tile--link:hover .tile__img { transform: scale(1.05); }
.tile__media--mono {
  display: grid;
  place-items: center;
  color: color-mix(in srgb, var(--c-white) 92%, transparent);
  background: radial-gradient(80% 90% at 15% 10%, color-mix(in srgb, var(--c-accent) 85%, transparent), transparent 60%), radial-gradient(70% 80% at 95% 100%, color-mix(in srgb, var(--c-accent-300) 55%, transparent), transparent 60%), var(--c-ink-1);
}
.tile__media--mono svg { width: 64px; height: 64px; transition: transform 1s var(--ease-out); }
.tile--link:hover .tile__media--mono svg { transform: scale(1.08); }
.tile__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  flex: 1;
  padding: clamp(1.4rem, 1rem + 1.2vw, 2rem);
}
.tile__body > .icon-badge { margin-bottom: 0.6rem; }
.tile__eyebrow { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--fg-3); }
.tile__meta { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; font-size: var(--fs-xs); color: var(--fg-3); font-weight: 500; }
.tile__meta > * + *::before { content: "·"; margin-right: 1rem; margin-left: -0.5rem; }
.tile__title { font-size: var(--fs-h-sm); font-weight: 640; letter-spacing: -0.022em; line-height: 1.2; }
.tile__text { color: var(--fg-2); font-size: var(--fs-body); line-height: 1.55; }
.tile__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  margin-top: auto;
  padding-top: 0.6rem;
  color: var(--accent);
  font-weight: 600;
  font-size: var(--fs-small);
}
.tile__cta .icon { transition: transform var(--dur-3) var(--ease-out); }
.tile--link:hover .tile__cta .icon { transform: translateX(4px); }
.tiles--article .tile__title { font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.45rem); }

/* Cursor-follow glow (desktop; JS sets --mx/--my) */
[data-glow] { --mx: 50%; --my: 0%; }
[data-glow]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(420px circle at var(--mx) var(--my), color-mix(in srgb, var(--c-accent-400) 16%, transparent), transparent 60%);
  transition: opacity 0.5s var(--ease-out);
}
[data-theme="light"] [data-glow]::before { background: radial-gradient(420px circle at var(--mx) var(--my), color-mix(in srgb, var(--c-accent) 8%, transparent), transparent 60%); }
@media (hover: hover) and (pointer: fine) {
  [data-glow]:hover::before { opacity: 1; }
}

/* ---------- Chips, pills, badges ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 30px;
  padding: 0 0.8rem;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: var(--fs-xs);
  font-weight: 550;
  color: var(--fg);
}
.chip--mono { font-family: var(--font-mono); letter-spacing: 0.06em; }
.chip--accent { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 0.55rem;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-accent-600);
  background: color-mix(in srgb, var(--c-accent-300) 16%, transparent);
  vertical-align: middle;
}
[data-theme="dark"] .badge { color: var(--c-accent-200); }
.pill-cloud { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.pill {
  display: inline-flex;
  align-items: center;
  padding: 0.6rem 1.1rem;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  font-weight: 550;
  font-size: var(--fs-small);
  transition: border-color var(--dur-2), background-color var(--dur-2);
}
.pill:hover { border-color: var(--border-strong); }

/* ---------- Lists ---------- */
.checklist {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}
.checklist--2col { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); }
.checklist__item {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1.15rem 1.25rem;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
  font-weight: 520;
  line-height: 1.45;
}
.checklist__mark {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 26px; height: 26px;
  margin-top: -1px;
  border-radius: 50%;
  color: var(--c-on-accent);
  background: var(--grad-fill);
}
.numlist { display: grid; gap: 0; counter-reset: n; }
.numlist__item {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: 1rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--border);
  font-size: var(--fs-body-lg);
}
.numlist__n { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--accent); padding-top: 0.15rem; }
.bullets { padding-left: 1.2rem; display: grid; gap: 0.5rem; color: var(--fg-2); }
.bullets li::marker { color: var(--accent); }
@media (min-width: 760px) { .bullets { columns: 2; column-gap: 3rem; display: block; } .bullets li { margin-bottom: 0.5rem; break-inside: avoid; } }

/* ---------- Accordion (details/summary) ---------- */
.accordion { border-top: 1px solid var(--border); }
.acc { border-bottom: 1px solid var(--border); }
.acc__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.4rem 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-body-lg);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.35;
  border-radius: 6px;
}
.acc__q::-webkit-details-marker { display: none; }
.acc__q::marker { content: ""; }
.acc__q:hover { color: var(--accent); }
.acc__icon {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--fg);
  transition: transform 0.5s var(--ease-out), background-color var(--dur-2);
}
.acc[open] .acc__icon { transform: rotate(45deg); background: var(--accent-soft); color: var(--accent); }
.acc__a { overflow: hidden; }
.acc__inner { padding: 0 3.5rem 1.6rem 0; color: var(--fg-2); max-width: 64ch; }
.acc__inner p + p { margin-top: 0.8rem; }
.acc__inner a { color: var(--accent); }

/* ---------- Tabs / segmented control ---------- */
.segmented {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  max-width: 100%;
  overflow-x: auto;
}
.segmented__btn {
  min-height: 44px;
  padding: 0 1.25rem;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--fg-2);
  white-space: nowrap;
  transition: background-color var(--dur-2), color var(--dur-2), box-shadow var(--dur-2);
}
.segmented__btn:hover { color: var(--fg); }
.segmented__btn[aria-selected="true"] { background: var(--surface-2); color: var(--fg); box-shadow: var(--shadow-sm); }
[data-theme="dark"] .segmented__btn[aria-selected="true"] { background: color-mix(in srgb, var(--c-white) 12%, transparent); box-shadow: none; }
[role="tabpanel"]:focus-visible { outline-offset: 8px; }

/* ---------- Breadcrumbs ---------- */
.crumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; font-size: var(--fs-xs); font-weight: 500; }
.crumbs__item { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--fg-3); }
.crumbs a { color: var(--fg-2); text-decoration: none; padding: 0.35rem 0; }
.crumbs a:hover { color: var(--fg); text-decoration: underline; }
.crumbs [aria-current] { color: var(--fg-3); }
.crumbs__sep { opacity: 0.6; }

/* ---------- Table ---------- */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin: 1.75rem 0;
  -webkit-overflow-scrolling: touch;
}
.table { width: 100%; min-width: 560px; font-size: var(--fs-small); line-height: 1.5; }
.table th, .table td { padding: 0.9rem 1.1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
.table thead th { background: var(--surface); font-weight: 650; font-size: var(--fs-xs); letter-spacing: 0.02em; color: var(--fg); }
.table tbody tr:last-child td { border-bottom: 0; }

/* ---------- Prose (article/legal body) ---------- */
.prose {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-prose);
  color: var(--fg);
  max-width: 70ch;
  margin-inline: auto;
}
.prose > * + * { margin-top: 1.15em; }
.prose h2 { margin-top: 2.2em; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); line-height: 1.18; letter-spacing: -0.028em; scroll-margin-top: calc(var(--header-h) + 24px); }
.prose h3 { margin-top: 1.8em; font-size: clamp(1.25rem, 1.15rem + 0.4vw, 1.45rem); line-height: 1.25; letter-spacing: -0.02em; scroll-margin-top: calc(var(--header-h) + 24px); }
.prose h2 + *, .prose h3 + * { margin-top: 0.7em; }
.prose > :first-child { margin-top: 0; }
.prose a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.prose a:hover { text-decoration-thickness: 2px; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 0.45em; }
.prose li::marker { color: var(--accent); }
.prose ol li::marker { font-family: var(--font-mono); font-size: 0.85em; }
.prose blockquote {
  margin-inline: 0;
  padding: 0.2em 0 0.2em 1.2em;
  border-left: 3px solid;
  border-image: var(--grad-brand-deep) 1;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.45em;
  line-height: 1.35;
}
.prose strong { color: var(--fg); }
.prose em { font-style: italic; }
.rt-figure { margin-block: 2em; }
.rt-figure picture, .rt-figure img { border-radius: var(--r-md); width: 100%; }
.rt-figure--small { max-width: 340px; }
@media (min-width: 760px) {
  .rt-figure--small { float: right; width: 42%; margin: 0.4em 0 1em 2em; }
  .prose h2, .prose h3 { clear: both; }
}
.prose--legal { font-size: var(--fs-body); line-height: 1.7; }
.prose--legal h2 { font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.7rem); }

/* ---------- Switch ---------- */
.switch { position: relative; display: inline-flex; flex: none; width: 50px; height: 30px; cursor: pointer; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: inherit; z-index: 1; }
.switch__track {
  position: absolute;
  inset: 0;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--c-text-3) 36%, transparent);
  transition: background-color var(--dur-2);
}
.switch__thumb {
  position: absolute;
  top: 3px; left: 3px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--c-white);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transition: transform 0.4s var(--ease-out);
}
.switch input:checked + .switch__track { background: var(--c-accent-600); }
[data-theme="dark"] .switch input:checked + .switch__track { background: var(--c-accent); }
.switch input:checked + .switch__track .switch__thumb { transform: translateX(20px); }
.switch input:disabled { cursor: not-allowed; }
.switch input:disabled + .switch__track { opacity: 0.55; }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--focus); outline-offset: 3px; }

/* ---------- Search input ---------- */
.search-input { position: relative; display: flex; align-items: center; }
.search-input > .icon { position: absolute; left: 1.15rem; color: var(--fg-3); pointer-events: none; }
.search-input .input { padding-left: 3.1rem; }
.search-input--sm > .icon { left: 0.9rem; }
.search-input--sm .input { padding-left: 2.5rem; }

/* ---------- Flag ---------- */
.flag { display: inline-block; flex: none; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-white) 14%, transparent); background: none; }
.flag picture { background: none; }
.flag__img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Byline ---------- */
.byline { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; color: var(--fg-2); font-size: var(--fs-small); font-weight: 500; }
.byline__item { display: inline-flex; align-items: center; gap: 0.45rem; }
.byline__item--muted { color: var(--fg-3); }

/* ---------- Aurora (animated gradient light) ---------- */
.aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; }
.aurora span {
  position: absolute;
  width: 70vmax; height: 70vmax;
  border-radius: 50%;
  opacity: 0.55;
  will-change: transform;
}
.aurora span:nth-child(1) { left: -20vmax; top: -30vmax; background: radial-gradient(closest-side, color-mix(in srgb, var(--c-accent) 85%, transparent), color-mix(in srgb, var(--c-accent) 0%, transparent) 70%); animation: aurora-a 22s var(--ease-in-out) infinite alternate; }
.aurora span:nth-child(2) { right: -25vmax; top: -20vmax; background: radial-gradient(closest-side, color-mix(in srgb, var(--c-accent-400) 60%, transparent), color-mix(in srgb, var(--c-accent-400) 0%, transparent) 70%); animation: aurora-b 26s var(--ease-in-out) infinite alternate; }
.aurora span:nth-child(3) { left: 15%; bottom: -45vmax; background: radial-gradient(closest-side, color-mix(in srgb, var(--c-accent-300) 55%, transparent), color-mix(in srgb, var(--c-accent-300) 0%, transparent) 70%); animation: aurora-c 30s var(--ease-in-out) infinite alternate; }
@keyframes aurora-a { to { transform: translate3d(12vmax, 8vmax, 0) scale(1.1); } }
@keyframes aurora-b { to { transform: translate3d(-14vmax, 10vmax, 0) scale(0.92); } }
@keyframes aurora-c { to { transform: translate3d(10vmax, -8vmax, 0) scale(1.15); } }

/* Orphan-free spans (see blocks/cards.mjs spanClasses) */
@media (min-width: 640px) and (max-width: 1039.98px) {
  .tiles--n3 > .tile--span2, .tiles--n2 > .tile--span2 { grid-column: span 2; }
}
@media (min-width: 1040px) {
  .tiles--n3 > .tile--span3 { grid-column: span 2; }
}
@media (min-width: 640px) {
  .tiles--image .tile__media, .tiles--article .tile__media { aspect-ratio: auto; height: clamp(190px, 9rem + 6vw, 260px); }
}

/* ==== 25-forms.css ==== */
/* 25 · Form controls: inputs, textarea, select, typeahead, multi-select chips, radio/checkbox,
        drop zone + file list, inline errors, error summary, success state. */

.form { position: relative; }
.form__grid { display: grid; gap: 1.25rem 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field--full { grid-column: 1 / -1; }
.field { position: relative; min-width: 0; }
.field__set { border: 0; padding: 0; margin: 0; min-width: 0; }
.field__label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg);
}
legend.field__label { padding: 0; }
.field__req { color: var(--danger); margin-left: 0.2rem; font-weight: 700; }
.field__help { margin-top: 0.45rem; font-size: var(--fs-xs); color: var(--fg-2); line-height: 1.45; }
legend + .field__help { margin: -0.2rem 0 0.75rem; }
.field__error {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  margin-top: 0.5rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--danger);
}
.field__error .icon { margin-top: 1px; }
.field__count { position: absolute; right: 0; top: 0.1rem; font-family: var(--font-mono); font-size: 0.6875rem; color: var(--fg-3); }

.input {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 0 1rem;
  border: 1px solid var(--field-border);
  border-radius: var(--r-sm);
  background: var(--field-bg);
  color: var(--fg);
  font-size: 1rem;
  line-height: 1.4;
  transition: border-color var(--dur-2), box-shadow var(--dur-2), background-color var(--dur-2);
  -webkit-appearance: none;
  appearance: none;
}
.input::placeholder { color: var(--fg-3); opacity: 1; }
.input:hover { border-color: var(--fg-2); }
.input:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-accent) 18%, transparent); }
[data-theme="dark"] .input:focus { border-color: var(--c-accent-400); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-accent-400) 22%, transparent); }
.input[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-danger) 12%, transparent); }
.input--sm { min-height: 44px; font-size: var(--fs-small); }
.input--search { min-height: 58px; border-radius: var(--r-pill); font-size: 1.0625rem; }
.textarea { min-height: 150px; padding: 0.9rem 1rem; resize: vertical; }
input[type="number"].input { -moz-appearance: textfield; }
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

/* Native select, styled */
.select { position: relative; }
.select .input { padding-right: 2.8rem; cursor: pointer; text-overflow: ellipsis; }
.select__chev { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--fg-2); }
.select option { color: var(--c-text); background: var(--c-white); }

/* Radio / checkbox as pills */
.choices { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.choice {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 48px;
  padding: 0.6rem 1.15rem 0.6rem 0.9rem;
  border: 1px solid var(--field-border);
  border-radius: var(--r-pill);
  background: var(--field-bg);
  cursor: pointer;
  font-weight: 550;
  transition: border-color var(--dur-2), background-color var(--dur-2), box-shadow var(--dur-2);
}
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice__mark {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid var(--fg-3);
  color: var(--c-on-accent);
  transition: border-color var(--dur-2), background-color var(--dur-2), box-shadow var(--dur-2);
}
.choice--check .choice__mark { border-radius: 6px; }
.choice__mark .icon { opacity: 0; transform: scale(0.6); transition: opacity var(--dur-2), transform 0.4s var(--ease-spring); }
.choice:hover { border-color: var(--fg-2); }
.choice:has(input:checked) { border-color: var(--c-accent); background: var(--accent-soft); }
.choice input:checked + .choice__mark { border-color: var(--c-accent); background: var(--c-accent); box-shadow: inset 0 0 0 3px var(--field-bg); }
.choice--check input:checked + .choice__mark { box-shadow: none; }
.choice input:checked + .choice__mark .icon { opacity: 1; transform: none; }
.choice:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
.choice--check:not(.field__set .choice) { border-radius: var(--r-sm); }

/* Multi-select chips */
.multi { display: grid; gap: 0.75rem; padding: 1rem; border: 1px solid var(--field-border); border-radius: var(--r-md); background: var(--field-bg); }
.multi:focus-within { border-color: var(--c-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-accent) 14%, transparent); }
.field__set[aria-invalid="true"] .multi { border-color: var(--danger); }
.multi__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; min-height: 32px; align-items: center; }
.multi__none { font-size: var(--fs-xs); color: var(--fg-3); }
.multi__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  height: 32px;
  padding: 0 0.35rem 0 0.8rem;
  border-radius: var(--r-pill);
  background: var(--c-accent);
  color: var(--c-on-accent);
  font-size: var(--fs-xs);
  font-weight: 600;
  animation: chip-in 0.35s var(--ease-spring);
}
.multi__chip button { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: var(--c-on-accent); }
.multi__chip button:hover { background: color-mix(in srgb, var(--c-white) 20%, transparent); }
@keyframes chip-in { from { transform: scale(0.7); opacity: 0; } }
.multi__opts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr));
  gap: 0.4rem;
  max-height: 264px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px;
}
.multi__opt {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0.45rem 0.8rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  font-size: var(--fs-small);
  cursor: pointer;
  transition: background-color var(--dur-1), border-color var(--dur-1);
}
.multi__opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.multi__opt:hover { background: var(--surface); }
.multi__opt:has(input:checked) { background: var(--accent-soft); border-color: var(--c-accent); color: var(--accent); font-weight: 600; }
.multi__opt:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 1px; }
.multi__empty { font-size: var(--fs-xs); color: var(--fg-3); }

/* Drop zone */
.dropzone { position: relative; }
.dropzone__input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.dropzone__ui {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  padding: 2.2rem 1.5rem;
  border: 1.5px dashed var(--field-border);
  border-radius: var(--r-lg);
  background: var(--field-bg);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--dur-2), background-color var(--dur-2), transform 0.4s var(--ease-out);
}
.dropzone__ui:hover { border-color: var(--c-accent); }
.dropzone.is-dragover .dropzone__ui { border-color: var(--c-accent); background: var(--accent-soft); transform: scale(1.01); }
.dropzone__input:focus-visible + .dropzone__ui { outline: 2px solid var(--focus); outline-offset: 3px; }
.dropzone__icon {
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  margin-bottom: 0.25rem;
  border-radius: 50%;
  color: var(--accent);
  background: var(--accent-soft);
}
.dropzone__title { font-weight: 600; }
.dropzone__browse { color: var(--accent); text-decoration: underline; text-underline-offset: 0.2em; }
.dropzone__hint { font-size: var(--fs-xs); color: var(--fg-2); max-width: 46ch; }
.field[aria-invalid="true"] .dropzone__ui, .dropzone__input[aria-invalid="true"] + .dropzone__ui { border-color: var(--danger); }
.filelist { display: grid; gap: 0.5rem; margin-top: 0.75rem; }
.filelist:empty { display: none; }
.file-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.6rem 0.6rem 0.85rem;
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  animation: chip-in 0.35s var(--ease-out);
}
.file-item__icon { color: var(--accent); }
.file-item__name { flex: 1; min-width: 0; font-size: var(--fs-small); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-item__size { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--fg-3); }
.file-item__remove { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--fg-2); }
.file-item__remove:hover { background: var(--surface-hover); color: var(--danger); }

/* Groups, footer, summary */
.form__group { border: 0; padding: 0; margin: 0 0 2.25rem; min-width: 0; }
.form__group + .form__group { padding-top: 2.25rem; border-top: 1px solid var(--border); }
.form__legend {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0;
  margin-bottom: 1.25rem;
  font-size: var(--fs-h-xs);
  font-weight: 650;
  letter-spacing: -0.02em;
}
.form__legend-n {
  display: inline-grid;
  place-items: center;
  height: 26px;
  padding: 0 0.55rem;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--accent);
  background: var(--accent-soft);
}
.form__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.form__note { flex: 1 1 18rem; font-size: var(--fs-xs); color: var(--fg-2); }
.form__note a { color: var(--accent); }
.form__summary {
  margin-bottom: 1.75rem;
  padding: 1.1rem 1.25rem;
  border-radius: var(--r-sm);
  border-left: 4px solid var(--danger);
  background: var(--c-danger-050);
  color: color-mix(in srgb, var(--c-danger) 62%, var(--c-black));
}
[data-theme="dark"] .form__summary { background: color-mix(in srgb, var(--c-danger-dark) 10%, transparent); color: var(--fg); }
.form__summary:focus { outline: 2px solid var(--danger); outline-offset: 2px; }
.form__summary-title { font-weight: 700; margin-bottom: 0.35rem; }
.form__summary ul { padding-left: 1.1rem; display: grid; gap: 0.2rem; }
.form__summary a { color: inherit; font-weight: 600; }
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form.is-sending [type="submit"] { opacity: 0.7; pointer-events: none; }

/* Success state */
.form-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.75rem;
  padding: clamp(2rem, 5vw, 3.5rem) 1rem;
  animation: success-in 0.8s var(--ease-out);
}
.form-success:focus { outline: none; }
.form-success__icon {
  display: grid;
  place-items: center;
  width: 76px; height: 76px;
  margin-bottom: 0.5rem;
  border-radius: 50%;
  color: var(--c-on-accent);
  background: var(--grad-fill);
  box-shadow: 0 18px 40px -14px color-mix(in srgb, var(--c-accent) 70%, transparent);
}
.form-success__title { font-size: var(--fs-h-sm); letter-spacing: -0.025em; }
.form-success__text { color: var(--fg-2); max-width: 40ch; }
.form-success__demo {
  margin: 0.5rem 0 0.75rem;
  padding: 0.6rem 1rem;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px dashed var(--border-strong);
  font-size: var(--fs-xs);
  color: var(--fg-2);
}
.form-success__demo a { color: var(--accent); }
@keyframes success-in { from { opacity: 0; transform: translateY(16px) scale(0.98); } }

/* ==== 30-chrome.css ==== */
/* 30 · Global chrome: logo, header + mega-menu, mobile menu, footer, cookie consent,
        page-transition veil, mobile CTA bar, reading progress. */

/* ---------- Logo ---------- */
.logo { display: inline-flex; align-items: center; gap: 0.6rem; color: currentColor; }
.logo__mono { width: 38px; height: 38px; flex: none; }
.logo__word {
  display: flex;
  flex-direction: row;
  font-size: 0.875rem;
  font-weight: 650;
  line-height: 0.98;
  letter-spacing: 0.005em;
}
.logo__word span:last-child { letter-spacing: 0.012em; }
.brand { display: inline-flex; align-items: center; color: inherit; text-decoration: none; min-height: 44px; border-radius: 10px; }
/* First-visit monogram draw-on (JS adds .logo-draw on <html>) */
.logo-draw .site-header .logo__ring { stroke-dasharray: 1; stroke-dashoffset: 1; animation: logo-ring 1.1s var(--ease-out) 0.15s forwards; }
.logo-draw .site-header .logo__t, .logo-draw .site-header .logo__w { opacity: 0; animation: logo-fade 0.6s var(--ease-out) forwards; }
.logo-draw .site-header .logo__t { animation-delay: 0.55s; }
.logo-draw .site-header .logo__w { animation-delay: 0.7s; }
@keyframes logo-ring { to { stroke-dashoffset: 0; } }
@keyframes logo-fade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-header);
  height: var(--header-h);
  color: var(--c-on-dark);
  transition: background-color 0.4s var(--ease-out), border-color 0.4s, transform 0.5s var(--ease-out), color 0.3s;
  border-bottom: 1px solid transparent;
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--c-black) 72%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
}
.site-header.is-scrolled { border-bottom-color: color-mix(in srgb, var(--c-white) 8%, transparent); }
.site-header.is-scrolled::before,
.site-header.has-mega::before { opacity: 1; }
.site-header.has-mega::before { background: color-mix(in srgb, var(--c-ink-1) 90%, transparent); }
.site-header__bar { display: flex; align-items: center; height: 100%; gap: 1rem; }
.site-header .brand { margin-right: auto; }

/* Over light sections (JS sets data-on from the section under the header) */
.site-header[data-on="light"]:not(.has-mega):not(.menu-open) { color: var(--c-text); }
.site-header[data-on="light"]:not(.has-mega):not(.menu-open)::before { background: color-mix(in srgb, var(--c-white) 80%, transparent); }
.site-header[data-on="light"].is-scrolled:not(.has-mega):not(.menu-open) { border-bottom-color: rgba(0, 0, 0, 0.08); }
.site-header[data-on="light"]:not(.has-mega):not(.menu-open) .nav__link { color: var(--c-text-2); }
.site-header[data-on="light"]:not(.has-mega):not(.menu-open) .nav__link:hover { color: var(--c-text); background: rgba(0, 0, 0, 0.05); }
.site-header[data-on="light"]:not(.has-mega):not(.menu-open) .nav__item.is-current > .nav__link { color: var(--c-text); }
.site-header[data-on="light"]:not(.has-mega):not(.menu-open) .nav__item.is-current > .nav__link::after { background: var(--c-accent); box-shadow: none; }
.site-header[data-on="light"]:not(.has-mega):not(.menu-open) .menu-toggle:hover { background: rgba(0, 0, 0, 0.06); }
.site-header[data-on="light"] .header-cta { box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--c-accent) 60%, transparent); }

/* Light-hero pages can opt into dark ink at the top (template: headerTheme: 'light') */
body[data-header-theme="light"] .site-header:not(.is-scrolled):not(.has-mega):not(.menu-open) { color: var(--c-text); }
body[data-header-theme="light"] .site-header:not(.is-scrolled):not(.has-mega):not(.menu-open) .nav__link { color: var(--c-text-2); }

.nav { display: none; }
.nav__list { display: flex; align-items: center; gap: 0.15rem; }
.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  height: 40px;
  padding: 0 0.8rem;
  border-radius: var(--r-pill);
  color: var(--c-on-dark-2);
  font-size: 0.9rem;
  font-weight: 520;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-2), background-color var(--dur-2);
}
.nav__link:hover, .nav__item.is-open > .nav__link { color: var(--c-white); background: color-mix(in srgb, var(--c-white) 7%, transparent); }
.nav__item.is-current > .nav__link { color: var(--c-white); }
.nav__item.is-current > .nav__link::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 3px;
  width: 4px; height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--c-accent-400);
  box-shadow: 0 0 10px var(--c-accent-400);
}
.has-mega > .nav__link::after { margin-left: -9px !important; }
.nav__chev { opacity: 0.7; transition: transform 0.4s var(--ease-out); }
.nav__item.is-open .nav__chev { transform: rotate(180deg); }
.header-actions { display: flex; align-items: center; gap: 0.5rem; }
.header-cta { --btn-h: 38px; padding: 0 1rem; font-size: 0.875rem; }

@media (min-width: 1080px) {
  .nav { display: block; }
  .menu-toggle { display: none !important; }
  .nav__item--minor { display: none; }
}
@media (min-width: 1280px) {
  .nav__item--minor { display: block; }
}

/* Menu toggle (two bars → X) */
.menu-toggle {
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  color: inherit;
}
.menu-toggle:hover { background: color-mix(in srgb, var(--c-white) 8%, transparent); }
.menu-toggle__bars { position: relative; width: 20px; height: 12px; }
.menu-toggle__bars span {
  position: absolute;
  left: 0; right: 0;
  height: 1.75px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.45s var(--ease-out), top 0.45s var(--ease-out);
}
.menu-toggle__bars span:first-child { top: 1px; }
.menu-toggle__bars span:last-child { top: 9px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:first-child { top: 5px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:last-child { top: 5px; transform: rotate(-45deg); }

/* ---------- Mega menu ---------- */
.mega {
  position: fixed;
  top: var(--header-h);
  left: 0; right: 0;
  padding: 2.5rem 0 3rem;
  background: color-mix(in srgb, var(--c-ink-1) 90%, transparent);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  border-bottom: 1px solid color-mix(in srgb, var(--c-white) 8%, transparent);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.7);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.35s var(--ease-out), transform 0.5s var(--ease-out), visibility 0s linear 0.35s;
}
.nav__item.is-open > .mega { opacity: 1; visibility: visible; transform: none; transition: opacity 0.35s var(--ease-out), transform 0.5s var(--ease-out), visibility 0s; }
.mega__inner { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: clamp(2rem, 4vw, 5rem); }
.mega__eyebrow { font-size: 1.75rem; font-weight: 650; letter-spacing: -0.03em; color: var(--c-white); }
.mega__text { margin: 0.6rem 0 1.25rem; color: var(--c-on-dark-2); font-size: var(--fs-small); line-height: 1.5; }
.mega .link-chevron { color: var(--c-accent-400); font-size: var(--fs-small); }
.mega__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; }
.mega__grid--lang { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mega__link {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-height: 64px;
  padding: 0.8rem 0.9rem;
  border-radius: 14px;
  color: var(--c-white);
  text-decoration: none;
  transition: background-color var(--dur-2);
}
.mega__link:hover, .mega__link.is-current { background: color-mix(in srgb, var(--c-white) 7%, transparent); }
.mega__txt { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.mega__label { font-weight: 600; font-size: 0.95rem; letter-spacing: -0.01em; }
.mega__desc { font-size: var(--fs-xs); color: var(--c-on-dark-2); line-height: 1.4; }
.mega__link .icon-badge { color: var(--c-accent-300); background: linear-gradient(140deg, color-mix(in srgb, var(--c-accent) 30%, transparent), color-mix(in srgb, var(--c-accent-300) 14%, transparent)); border-color: color-mix(in srgb, var(--c-white) 10%, transparent); }
.nav__item.is-open .mega__grid li { animation: mega-in 0.5s var(--ease-out) both; }
.nav__item.is-open .mega__grid li:nth-child(2) { animation-delay: 0.03s; }
.nav__item.is-open .mega__grid li:nth-child(3) { animation-delay: 0.06s; }
.nav__item.is-open .mega__grid li:nth-child(4) { animation-delay: 0.09s; }
.nav__item.is-open .mega__grid li:nth-child(5) { animation-delay: 0.12s; }
.nav__item.is-open .mega__grid li:nth-child(6) { animation-delay: 0.15s; }
.nav__item.is-open .mega__grid li:nth-child(7) { animation-delay: 0.18s; }
.nav__item.is-open .mega__grid li:nth-child(8) { animation-delay: 0.21s; }
@keyframes mega-in { from { opacity: 0; transform: translateY(6px); } }
.mega-backdrop {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: -2;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease-out), visibility 0s linear 0.35s;
}
.site-header.has-mega .mega-backdrop { opacity: 1; visibility: visible; transition: opacity 0.35s var(--ease-out); }

/* ---------- Mobile menu ---------- */
.mmenu {
  position: fixed;
  inset: 0;
  z-index: var(--z-mmenu);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--c-black);
  color: var(--c-on-dark);
  padding-top: calc(var(--header-h) + 1rem);
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
}
.mmenu.is-open { opacity: 1; }
.mmenu__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(60% 40% at 90% 0%, color-mix(in srgb, var(--c-accent) 35%, transparent), transparent 70%), radial-gradient(50% 35% at 0% 100%, color-mix(in srgb, var(--c-accent-300) 20%, transparent), transparent 70%);
}
.mmenu__inner { position: relative; display: flex; flex-direction: column; min-height: calc(100% - 1rem); padding-bottom: 2rem; }
.mmenu__list { display: grid; }
.mmenu__item {
  border-bottom: 1px solid color-mix(in srgb, var(--c-white) 8%, transparent);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-out);
  transition-delay: calc(0.04s * var(--i, 0) + 0.08s);
}
.mmenu.is-open .mmenu__item { opacity: 1; transform: none; }
.mmenu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 64px;
  font-size: clamp(1.6rem, 1.2rem + 2vw, 2.25rem);
  font-weight: 620;
  letter-spacing: -0.03em;
  color: var(--c-white);
  text-decoration: none;
  text-align: left;
}
.mmenu__item.is-current > .mmenu__link { color: var(--c-accent-300); }
.mmenu__plus { color: var(--c-on-dark-2); transition: transform 0.45s var(--ease-out); }
.mmenu__link[aria-expanded="true"] .mmenu__plus { transform: rotate(45deg); }
.mmenu__sub { display: grid; padding: 0 0 1.1rem; }
.mmenu__sublink {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  color: var(--c-on-dark-2);
  font-size: 1.0625rem;
  font-weight: 520;
  text-decoration: none;
}
.mmenu__sublink:hover, .mmenu__sublink[aria-current] { color: var(--c-white); }
.mmenu__sublink--all { color: var(--c-accent-400); }
.mmenu__foot { margin-top: auto; padding-top: 2rem; display: grid; gap: 1.25rem; }
.mmenu__cta { width: 100%; }
.mmenu__contact { display: grid; gap: 0.25rem; }
.mmenu__contact a { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 44px; color: var(--c-on-dark-2); text-decoration: none; }
.site-header.menu-open::before { opacity: 0; }
.site-header.menu-open { border-bottom-color: transparent; }
html.menu-locked, html.menu-locked body { overflow: hidden; }
@media (min-width: 1080px) { .mmenu { display: none !important; } }

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--c-black);
  color: var(--c-on-dark);
  padding: clamp(3.5rem, 2.5rem + 4vw, 6rem) 0 2rem;
  border-top: 1px solid color-mix(in srgb, var(--c-white) 7%, transparent);
}
.site-footer__glow {
  position: absolute;
  inset: auto -10% -40% -10%;
  height: 80%;
  z-index: -1;
  background: radial-gradient(50% 60% at 20% 100%, color-mix(in srgb, var(--c-accent) 28%, transparent), transparent 70%), radial-gradient(40% 50% at 85% 100%, color-mix(in srgb, var(--c-accent-300) 16%, transparent), transparent 70%);
  pointer-events: none;
}
.footer-hero {
  display: grid;
  gap: 2rem;
  align-items: end;
  padding-bottom: clamp(2.5rem, 1.75rem + 3vw, 4rem);
  border-bottom: 1px solid color-mix(in srgb, var(--c-white) 8%, transparent);
}
/* Quiet sign-off (the page's own CTA panel is the closer; no repeated buttons here) */
@media (min-width: 960px) { .footer-hero { grid-template-columns: auto minmax(0, 1fr); gap: 4rem; } .footer-hero__text { justify-self: end; text-align: right; } }
.footer-hero__title {
  font-size: var(--fs-h-lg);
  font-weight: 650;
  letter-spacing: -0.05em;
  line-height: 0.95;
  max-width: 13ch;
  text-wrap: balance;
}
.footer-hero__title .serif { color: var(--c-accent-300); }
.footer-hero__text { color: var(--c-on-dark-2); font-size: var(--fs-body); max-width: 36ch; }
.footer-grid {
  display: grid;
  gap: 3rem;
  padding: clamp(3rem, 2rem + 3vw, 4.5rem) 0;
}
@media (min-width: 1100px) { .footer-grid { grid-template-columns: minmax(260px, 340px) 1fr; gap: 5rem; } }
.footer-brand .brand { margin-bottom: 1.25rem; }
.footer-brand__desc { color: var(--c-on-dark-2); font-size: var(--fs-small); max-width: 36ch; }
.footer-contact { display: grid; gap: 0.1rem; margin-top: 1.25rem; }
.footer-contact a { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 40px; color: var(--c-on-dark); text-decoration: none; font-size: var(--fs-small); font-weight: 500; }
.footer-contact a:hover { color: var(--c-accent-300); }
.footer-contact .icon { color: var(--c-on-dark-3); }
.footer-socials { display: flex; gap: 0.5rem; margin-top: 1rem; }
.social {
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--c-white) 14%, transparent);
  color: var(--c-on-dark);
  transition: background-color var(--dur-2), border-color var(--dur-2), transform 0.4s var(--ease-out);
}
.social:hover { background: color-mix(in srgb, var(--c-white) 8%, transparent); border-color: color-mix(in srgb, var(--c-white) 30%, transparent); transform: translateY(-2px); }
.footer-nav { display: grid; gap: 2.25rem 1.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) { .footer-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .footer-nav { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.footer-col__title { margin-bottom: 0.9rem; font-family: var(--font-mono); font-size: var(--fs-mono); font-weight: 500; letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--c-on-dark-3); }
.footer-col__title a { color: inherit; text-decoration: none; }
.footer-col__title a:hover { color: var(--c-white); }
.footer-col__list { display: grid; gap: 0.05rem; }
.footer-col__list a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  color: var(--c-on-dark-2);
  font-size: var(--fs-small);
  text-decoration: none;
  transition: color var(--dur-2);
}
.footer-col__list a:hover { color: var(--c-white); }
.footer-meta {
  display: grid;
  gap: 2rem;
  padding: 2.25rem 0;
  border-top: 1px solid color-mix(in srgb, var(--c-white) 8%, transparent);
}
@media (min-width: 960px) { .footer-meta { grid-template-columns: 1fr auto; align-items: center; } }
/* Where we work: UK-based, remote with clients everywhere */
.footer-where { display: flex; align-items: center; gap: 0.9rem; }
.footer-where__ico {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--c-white) 12%, transparent);
  background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--c-accent-400) 28%, transparent), color-mix(in srgb, var(--c-white) 3%, transparent) 70%);
  color: var(--c-accent-400);
}
.footer-where__txt { display: grid; gap: 0.15rem; color: var(--c-on-dark-2); font-size: var(--fs-xs); line-height: 1.5; }
.footer-where__k { color: var(--c-on-dark); font-size: var(--fs-small); font-weight: 650; letter-spacing: -0.01em; }
.footer-certs { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.footer-cert {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  height: 44px;
  padding: 0 0.9rem 0 0.35rem;
  border-radius: var(--r-pill);
  border: 1px solid color-mix(in srgb, var(--c-white) 10%, transparent);
  background: color-mix(in srgb, var(--c-white) 4%, transparent);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-on-dark);
}
.footer-cert picture { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; background: var(--c-white); }
.footer-cert__img { width: 100%; height: 100%; object-fit: contain; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid color-mix(in srgb, var(--c-white) 8%, transparent);
  font-size: var(--fs-xs);
  color: var(--c-on-dark-3);
}
.footer-bottom__links { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; }
.footer-bottom__links a { display: inline-flex; align-items: center; min-height: 36px; color: var(--c-on-dark-2); text-decoration: none; }
.footer-bottom__links a:hover { color: var(--c-white); text-decoration: underline; }

/* ---------- Cookie consent ---------- */
.cookie {
  position: fixed;
  left: 12px; right: 12px; bottom: 12px;
  z-index: var(--z-cookie);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.75rem 0.7rem;
  padding: 0.95rem 1rem calc(0.95rem + env(safe-area-inset-bottom));
  border-radius: 22px;
  background: color-mix(in srgb, var(--c-ink-2) 88%, transparent);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  border: 1px solid color-mix(in srgb, var(--c-white) 10%, transparent);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6);
  color: var(--c-on-dark);
  animation: cookie-in 0.7s var(--ease-out) both;
}
@keyframes cookie-in { from { opacity: 0; transform: translateY(24px) scale(0.98); } }
.cookie.is-leaving { opacity: 0; transform: translateY(16px); transition: opacity 0.3s, transform 0.4s var(--ease-out); }
.cookie__icon { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: color-mix(in srgb, var(--c-white) 6%, transparent); color: var(--c-accent-300); align-self: start; }
.cookie__text { font-size: var(--fs-xs); line-height: 1.5; color: var(--c-on-dark-2); }
.cookie__text a { color: var(--c-accent-400); white-space: nowrap; }
.cookie__actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 0.5rem; }
.cookie__btn { --btn-h: 44px; width: 100%; justify-content: center; }
.cookie__custom { min-height: 44px; padding: 0 0.6rem; border: 0; background: none; color: var(--c-accent-400); font: inherit; font-size: var(--fs-small); font-weight: 600; cursor: pointer; border-radius: 10px; }
.cookie__custom:hover { color: var(--c-white); text-decoration: underline; }
@media (min-width: 1024px) {
  .cookie {
    left: 50%; right: auto; bottom: 24px;
    width: min(880px, calc(100vw - 48px));
    transform: translateX(-50%);
    grid-template-columns: auto 1fr auto;
    gap: 1rem;
    padding: 0.7rem 0.75rem 0.7rem 1rem;
    border-radius: 999px;
    animation-name: cookie-in-c;
  }
  @keyframes cookie-in-c { from { opacity: 0; transform: translate(-50%, 24px) scale(0.98); } }
  .cookie.is-leaving { transform: translate(-50%, 16px); }
  .cookie__icon { align-self: center; }
  .cookie__actions { grid-column: auto; display: flex; gap: 0.4rem; }
  .cookie__btn { width: auto; min-width: 7.5rem; --btn-h: 44px; }
}

.cookie-dialog {
  width: min(640px, calc(100vw - 24px));
  max-height: min(86vh, 860px);
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--c-white) 10%, transparent);
  border-radius: 26px;
  background: var(--c-ink-1);
  color: var(--c-on-dark);
  box-shadow: 0 40px 120px -20px rgba(0, 0, 0, 0.7);
  overflow: hidden;
}
.cookie-dialog[open] { display: flex; animation: dialog-in 0.5s var(--ease-out); }
.cookie-dialog::backdrop { background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
@keyframes dialog-in { from { opacity: 0; transform: translateY(20px) scale(0.98); } }
.cookie-dialog__inner { --bg: var(--c-ink-1); width: 100%; overflow-y: auto; overscroll-behavior: contain; padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); }
.cookie-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.5rem; }
.cookie-dialog__title { font-size: 1.5rem; letter-spacing: -0.025em; }
.cookie-dialog__intro { color: var(--c-on-dark-2); font-size: var(--fs-small); margin-bottom: 1.25rem; }
.cookie-dialog__cats { display: grid; gap: 0.75rem; }
.cookie-cat { padding: 1.1rem 1.2rem; border-radius: 18px; background: var(--c-ink-2); border: 1px solid color-mix(in srgb, var(--c-white) 7%, transparent); }
.cookie-cat__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.cookie-cat__name { font-size: 1.0625rem; letter-spacing: -0.015em; display: flex; align-items: center; gap: 0.5rem; }
.cookie-cat__desc { margin-top: 0.4rem; color: var(--c-on-dark-2); font-size: var(--fs-xs); }
.cookie-cat__more { margin-top: 0.6rem; font-size: var(--fs-xs); }
.cookie-cat__more summary { display: inline-flex; align-items: center; gap: 0.3rem; min-height: 36px; cursor: pointer; color: var(--c-accent-400); font-weight: 600; list-style: none; }
.cookie-cat__more summary::-webkit-details-marker { display: none; }
.cookie-cat__more[open] summary .icon { transform: rotate(180deg); }
.cookie-svc { margin-top: 0.5rem; padding-top: 0.6rem; border-top: 1px solid color-mix(in srgb, var(--c-white) 7%, transparent); }
.cookie-svc__name { font-weight: 600; color: var(--c-white); }
.cookie-svc__desc { color: var(--c-on-dark-2); margin: 0.15rem 0 0.4rem; }
.cookie-svc__cookies { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.cookie-svc__cookies code { font-size: 0.6875rem; background: color-mix(in srgb, var(--c-white) 6%, transparent); border-color: color-mix(in srgb, var(--c-white) 8%, transparent); color: var(--c-on-dark-2); }
.cookie-dialog__links { display: flex; flex-wrap: wrap; gap: 0.25rem 0.6rem; margin: 1.25rem 0; font-size: var(--fs-xs); color: var(--c-on-dark-3); }
.cookie-dialog__links a { color: var(--c-accent-400); }
.cookie-dialog__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; }
.cookie-dialog__status { min-height: 1.5em; margin-top: 0.75rem; text-align: right; font-size: var(--fs-xs); color: var(--c-accent-200); font-weight: 600; }

/* ---------- Page transition veil ---------- */
.veil {
  position: fixed;
  inset: 0;
  z-index: var(--z-veil);
  pointer-events: none;
  opacity: 0;
  background: color-mix(in srgb, var(--c-black) 60%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: opacity 0.3s var(--ease-out);
}
.veil.is-active { opacity: 1; pointer-events: auto; }

/* ---------- Mobile CTA bar ---------- */
.mobile-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-mobile-cta);
  display: flex;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem calc(0.6rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--c-black) 82%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid color-mix(in srgb, var(--c-white) 8%, transparent);
  transform: translateY(110%);
  /* hidden = off-screen AND out of the tab order (visibility flips after the slide-out) */
  visibility: hidden;
  transition: transform 0.5s var(--ease-out), visibility 0s linear 0.5s;
}
.mobile-cta .btn { flex: 1; --btn-h: 46px; }
.mobile-cta.is-visible { transform: none; visibility: visible; transition: transform 0.5s var(--ease-out), visibility 0s; }
.has-cookie-banner .mobile-cta { transform: translateY(110%); visibility: hidden; }
@media (min-width: 768px) { .mobile-cta { display: none; } }
@media (max-width: 767.98px) {
  body:has(.mobile-cta) .site-footer { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
  /* WCAG 2.4.11: keyboard focus scrolled into view must clear the fixed quick-action bar */
  html:has(.mobile-cta.is-visible) { scroll-padding-bottom: calc(5rem + env(safe-area-inset-bottom)); }
}

/* ---------- Reading progress ---------- */
.reading-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; overflow: hidden; opacity: 0; transition: opacity 0.3s; pointer-events: none; }
.has-reading-progress .reading-progress { opacity: 1; }
.reading-progress span { display: block; height: 100%; background: var(--grad-brand-deep); transform-origin: 0 50%; transform: scaleX(var(--progress, 0)); }

/* ==== 35-motion.css ==== */
/* 35 · Motion states. Hidden-until-revealed states ONLY apply when <html> has .motion
        (no reduced-motion preference) AND .tw-ready (JS booted). Without JS or with
        reduced motion everything is static and fully visible. */

/* Lenis (vendored lenis.css) */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* Scroll reveals (IntersectionObserver-driven, see 10-motion.js) */
.motion.tw-ready [data-reveal] {
  transition: opacity 0.9s var(--ease-out), transform 1.1s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.motion.tw-ready [data-reveal]:not(.is-in) { opacity: 0; transform: translate3d(0, 32px, 0); }
.motion.tw-ready [data-reveal="fade"]:not(.is-in) { transform: none; }
.motion.tw-ready [data-reveal="scale"]:not(.is-in) { transform: scale(0.96); }

/* Headline split reveals: hero headline hidden until GSAP splits it (failsafe after 2.6s) */
.motion:not(.tw-ready):not(.tw-failsafe) [data-split="hero"] { opacity: 0; }
.split-line { display: block; }
/* SplitText line masks (class = linesClass + '-mask'): extra room below for descenders during the reveal */
[data-split] .split-mask-line-mask { padding-bottom: 0.12em; margin-bottom: -0.12em; }

/* Page enter */
@keyframes page-in { from { opacity: 0; } }
.motion body { animation: page-in 0.45s var(--ease-out) both; }

/* Hero frame / parallax images: GPU hints only while animating */
[data-hero-frame], [data-parallax] { will-change: auto; }

/* Count-up numbers keep width stable */
[data-count] { font-variant-numeric: tabular-nums; }

/* Reduced motion: kill non-essential animation everywhere */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .aurora span { animation: none !important; }
  .hero__img, .split__frame picture { transform: none !important; inset: 0 !important; }
}

/* ==== 40-blocks.css ==== */
/* 40 · Default block renderers + default template (hero, summary, related). */

/* ---------- Hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--c-black);
  color: var(--c-on-dark);
  padding-top: calc(var(--header-h) + clamp(1.5rem, 1rem + 3vw, 4rem));
  padding-bottom: clamp(3rem, 2rem + 4vw, 6rem);
}
.hero .aurora span { opacity: 0.32; }
.hero--plain { min-height: min(78svh, 760px); display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: clamp(3.5rem, 2rem + 5vw, 7rem); }
.hero--plain .aurora span { opacity: 0.5; }
.hero__grid-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, var(--c-white) 7.5%, transparent) 1px, transparent 1.2px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(80% 70% at 70% 20%, #000 0%, transparent 75%);
  mask-image: radial-gradient(80% 70% at 70% 20%, #000 0%, transparent 75%);
}
.hero__inner { position: relative; }
.hero__crumbs { margin-bottom: clamp(2rem, 1rem + 4vw, 4.5rem); }
.hero__crumbs a { color: var(--c-on-dark-2); }
.hero__eyebrow { margin-bottom: 1.4rem; }
.hero__title {
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
  color: var(--c-white);
  text-wrap: balance;
}
.hero__title--xl { font-size: var(--fs-display-xl); max-width: 12ch; }
.hero__title--lg { font-size: var(--fs-display-lg); max-width: 15ch; }
.hero__title--md { font-size: var(--fs-display-md); max-width: 20ch; }
.hero__title em { color: var(--c-accent-300); }
.hero__row {
  display: grid;
  gap: 1.75rem;
  margin-top: clamp(1.5rem, 1rem + 2vw, 2.75rem);
}
@media (min-width: 980px) {
  .hero__row { grid-template-columns: minmax(0, 38rem) auto; align-items: end; justify-content: space-between; column-gap: 4rem; }
  .hero__row > .byline { grid-column: 1; }
  .hero__ctas { grid-column: 2; grid-row: 1 / span 2; justify-content: flex-end; }
}
@media (max-width: 639.98px) { .hero__ctas .btn { flex: 1 1 auto; } }
.hero__lede { font-size: var(--fs-lede); line-height: 1.45; color: var(--c-on-dark-2); letter-spacing: -0.012em; max-width: 38rem; }
.hero__media { margin-top: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.hero__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-xl);
  border: 1px solid color-mix(in srgb, var(--c-white) 8%, transparent);
  box-shadow: 0 50px 120px -50px color-mix(in srgb, var(--c-accent) 55%, transparent);
  background: var(--c-ink-2);
  transform-origin: 50% 0%;
}
@media (min-width: 640px) { .hero__frame { aspect-ratio: 16 / 9; } }
@media (min-width: 1100px) { .hero__frame { aspect-ratio: 21 / 9; } }
.hero__frame picture { position: absolute; inset: 0; }
.hero__img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transform-origin: 50% 50%; }
.hero__frame-shade { position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--c-black) 0%, transparent) 55%, color-mix(in srgb, var(--c-black) 45%, transparent) 100%); pointer-events: none; }

/* Hero highlights (home.hero.slides rendered as a static strip — no auto-rotation) */
.hero__slides { margin-top: var(--gap); }
.hero__slides-list { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .hero__slides-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .hero__slides-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hero__slide {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.4rem 1.4rem 1.25rem;
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--c-white) 3.5%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-white) 8%, transparent);
  overflow: hidden;
  isolation: isolate;
  transition: border-color var(--dur-3), background-color var(--dur-3);
}
.hero__slide > * { position: relative; z-index: 1; }
.hero__slide:hover { border-color: color-mix(in srgb, var(--c-white) 18%, transparent); background: color-mix(in srgb, var(--c-white) 5%, transparent); }
.hero__slide-n { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--c-accent-400); letter-spacing: 0.1em; }
.hero__slide-eyebrow { font-size: var(--fs-xs); color: var(--c-on-dark-3); font-weight: 550; }
.hero__slide-title { font-size: 1.0625rem; font-weight: 620; letter-spacing: -0.015em; line-height: 1.3; color: var(--c-white); margin-bottom: 0.4rem; }
.hero__slide .link-chevron { margin-top: auto; font-size: var(--fs-small); }
.hero__slide .stretched::after { border-radius: var(--r-lg); }

/* ---------- Summary ("In short") ---------- */
.summary { padding-block: clamp(3.5rem, 2rem + 5vw, 7rem); }
.hero + .summary { padding-top: clamp(2rem, 1rem + 3vw, 4rem); }
.summary__grid { display: grid; gap: 1.25rem; }
.summary__label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 32px;
  align-self: start;
  justify-self: start;
  padding: 0 0.85rem;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
}
.summary__text {
  font-size: var(--fs-lede);
  font-weight: 480;
  line-height: 1.5;
  letter-spacing: -0.012em;
  color: var(--fg-2);
  max-width: 60ch;
  text-wrap: pretty;
}
/* quiet variant (contact, quote): the hero already answers the question — the GEO summary stays, muted */
.summary--quiet { padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.summary--quiet .summary__text { font-size: var(--fs-body-lg); max-width: 70ch; }
.summary__text strong { font-weight: 680; }
.summary__text .hl-word { transition: color 0.6s var(--ease-out); }
.motion .summary__text[data-highlight-ready] .hl-word { color: var(--c-ink-4); }
.motion .summary__text[data-highlight-ready] .hl-word.is-lit { color: inherit; }
[data-theme="light"] .motion .summary__text[data-highlight-ready] .hl-word { color: color-mix(in srgb, var(--c-text) 24%, var(--c-white)); }

/* ---------- Prose block ---------- */
.prose-block { display: grid; gap: 1.5rem 4rem; }
@media (min-width: 980px) {
  .prose-block { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .prose-block__aside .shead { position: sticky; top: calc(var(--header-h) + 2.5rem); margin-bottom: 0; }
}
.prose-block__body { font-size: var(--fs-body-lg); line-height: 1.7; color: var(--fg-2); max-width: 62ch; }
.prose-block__body p + p { margin-top: 1.1em; }
.prose-block__body strong { color: var(--fg); }
.prose-block__body a { color: var(--accent); }
.prose-block--solo { display: block; }
.prose-block--solo .prose-block__body { margin-inline: auto; max-width: 70ch; }
.prose-block__body p:first-child { font-size: 1.12em; color: var(--fg); line-height: 1.6; }

/* ---------- List block ---------- */
.list-block .shead { margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }

/* ---------- Split ---------- */
.split { display: grid; gap: clamp(2rem, 1rem + 4vw, 6rem); align-items: center; }
@media (min-width: 960px) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split--reverse .split__media { order: 2; }
  .split--noimage { grid-template-columns: minmax(0, 1fr); max-width: 52rem; }
}
.split__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 5 / 4;
  border-radius: var(--r-xl);
  background: var(--surface);
}
.split__frame picture { position: absolute; inset: -8% 0; }
.split__img { width: 100%; height: 100%; object-fit: cover; }
.split__body .shead { margin-bottom: 1.5rem; }
.split__text { font-size: var(--fs-body-lg); line-height: 1.68; color: var(--fg-2); max-width: 56ch; }
.split__text p + p { margin-top: 1em; }
.split__text strong { color: var(--fg); }
.split__text a { color: var(--accent); }
.split__cta { margin-top: 1.75rem; }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 1rem; }
@media (min-width: 900px) {
  .stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.stat { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 0.6rem; padding-left: clamp(0.9rem, 0.5rem + 1vw, 1.75rem); border-left: 1px solid var(--border); }
.stat__dd { margin: 0; }
.stat__value {
  display: block;
  font-size: clamp(2.75rem, 1.4rem + 4.8vw, 6.25rem);
  font-weight: 650;
  letter-spacing: -0.055em;
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
  background: var(--grad-text-dark);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
[data-theme="light"] .stat__value { background: linear-gradient(180deg, var(--c-text) 30%, var(--c-accent-600)); -webkit-background-clip: text; background-clip: text; }
.stat__label { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); font-weight: 500; }
/* three stats never leave an orphan row on phones: one compact row of three */
@media (max-width: 899.98px) {
  .stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem 0.5rem; }
  .stats--3 .stat { padding-left: 0.75rem; }
  .stats--3 .stat__value { font-size: clamp(1.9rem, 0.9rem + 4.4vw, 3rem); }
}

/* ---------- Features (bento) ---------- */
.feature {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.6rem, 1rem + 1.8vw, 2.6rem);
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
  isolation: isolate;
}
.feature > * { position: relative; z-index: 1; }
.feature__icon {
  display: grid;
  place-items: center;
  width: 60px; height: 60px;
  margin-bottom: 1.25rem;
  border-radius: 18px;
  color: var(--c-on-accent);
  background: var(--grad-fill);
  box-shadow: 0 16px 36px -14px color-mix(in srgb, var(--c-accent) 80%, transparent), inset 0 1px 0 color-mix(in srgb, var(--c-white) 35%, transparent);
}
.feature::after {
  content: "";
  position: absolute;
  inset: -40% -20% auto auto;
  width: 70%; aspect-ratio: 1;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c-accent) 22%, transparent), transparent 70%);
  pointer-events: none;
}
[data-theme="light"] .feature::after { background: radial-gradient(closest-side, color-mix(in srgb, var(--c-accent-400) 18%, transparent), transparent 70%); }
.feature__title { font-size: clamp(1.4rem, 1.15rem + 0.9vw, 2rem); letter-spacing: -0.03em; line-height: 1.1; }
.feature__text { margin-top: 0.75rem; color: var(--fg-2); max-width: 46ch; }
[data-theme="light"] .feature { background: var(--surface); }
/* phones: compact rows (icon left, copy right) instead of tall stacked cards */
@media (max-width: 767.98px) {
  .bento:has(> .feature) { gap: 0.75rem; }
  .feature { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 1rem; padding: 1.25rem; border-radius: var(--r-lg); }
  .feature__icon { grid-row: span 2; width: 44px; height: 44px; margin: 0; border-radius: 13px; }
  .feature__icon .icon { width: 20px; height: 20px; }
  .feature__title { font-size: 1.1875rem; align-self: center; }
  .feature__text { grid-column: 2; margin-top: 0.35rem; font-size: var(--fs-small); }
}

/* ---------- Steps ---------- */
.steps { position: relative; display: grid; gap: 2.25rem; counter-reset: step; }
.steps__line { position: absolute; left: 21px; top: 22px; bottom: 22px; width: 1px; background: var(--border-strong); }
.steps__line span { position: absolute; inset: 0; background: var(--grad-brand-deep); transform-origin: 50% 0; transform: scaleY(0); transition: transform 1.8s var(--ease-out) 0.2s; }
.steps.is-in .steps__line span, html:not(.motion) .steps__line span, .tw-failsafe .steps__line span { transform: none; }
.step { position: relative; padding-left: 4.25rem; }
.step__n {
  position: absolute;
  left: 0; top: 0;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent);
}
.step__title { font-size: var(--fs-h-sm); letter-spacing: -0.025em; padding-top: 0.45rem; }
.step__text { margin-top: 0.6rem; color: var(--fg-2); max-width: 40ch; }
@media (min-width: 980px) {
  .steps { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 2rem; }
  .steps--3 { --cols: 3; } .steps--2 { --cols: 2; } .steps--5 { --cols: 5; }
  .steps__line { left: 22px; right: 22px; top: 22px; bottom: auto; width: auto; height: 1px; }
  .steps__line span { transform-origin: 0 50%; transform: scaleX(0); }
  .step { padding-left: 0; padding-top: 4.5rem; }
  .step__title { padding-top: 0; }
}

/* ---------- Pricing ---------- */
.pricing { display: grid; gap: var(--gap); }
@media (min-width: 1000px) { .pricing { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; } }
.price {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.6rem, 1rem + 1.6vw, 2.4rem);
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
  isolation: isolate;
}
.price > * { position: relative; z-index: 1; }
.price--feature {
  border-color: transparent;
  background: linear-gradient(var(--c-ink-2), var(--c-ink-2)) padding-box, linear-gradient(150deg, color-mix(in srgb, var(--c-accent-400) 90%, transparent), color-mix(in srgb, var(--c-accent) 40%, transparent) 40%, color-mix(in srgb, var(--c-accent-300) 80%, transparent)) border-box;
  box-shadow: 0 40px 100px -40px color-mix(in srgb, var(--c-accent) 70%, transparent);
}
[data-theme="light"] .price--feature { background: linear-gradient(var(--c-white), var(--c-white)) padding-box, var(--grad-brand-deep) border-box; }
.price__tier { font-size: 1.5rem; letter-spacing: -0.03em; }
.price__text { margin-top: 0.35rem; color: var(--fg-2); font-size: var(--fs-small); min-height: 2.9em; }
.price__amount { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.35rem; margin: 1.75rem 0 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border); }
.price__from { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--fg-3); }
.price__num { font-size: clamp(2.75rem, 2rem + 2.4vw, 3.75rem); font-weight: 650; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.price--feature .price__num { background: var(--grad-text-dark); -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-theme="light"] .price--feature .price__num, .section--light .price--feature .price__num, .section--grey .price--feature .price__num { background: linear-gradient(120deg, var(--c-accent-700) 0%, var(--c-accent-600) 55%, var(--c-accent-600) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.price__unit { color: var(--fg-2); font-weight: 500; }
.price__list { display: grid; gap: 0.7rem; margin-bottom: 2rem; font-size: var(--fs-small); color: var(--fg-2); }
.price__list li { display: flex; gap: 0.6rem; align-items: flex-start; line-height: 1.45; }
.price__list .icon { margin-top: 2px; color: var(--c-accent-300); }
[data-theme="light"] .price__list .icon { color: var(--c-accent-600); }
.price__cta { margin-top: auto; }
.pricing__note {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  max-width: 54rem;
  margin: 2rem auto 0;
  padding: 1rem 1.25rem;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  color: var(--fg-2);
  font-size: var(--fs-small);
}
.pricing__note .icon { color: var(--accent); margin-top: 1px; }

/* ---------- Languages: featured tiles ---------- */
.lang-grid { display: grid; gap: var(--gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1000px) { .lang-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lang-tile { position: relative; border-radius: var(--r-lg); overflow: hidden; isolation: isolate; }
.lang-tile__link { position: relative; display: block; aspect-ratio: 3 / 4; color: var(--c-white); text-decoration: none; border-radius: inherit; }
@media (min-width: 1000px) { .lang-tile__link { aspect-ratio: 4 / 5; } }
.lang-tile__media, .lang-tile__media picture { position: absolute; inset: 0; }
.lang-tile__img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.4s var(--ease-out), filter 0.8s; filter: saturate(0.9); }
.lang-tile__link:hover .lang-tile__img { transform: scale(1.09); filter: saturate(1.1); }
.lang-tile__shade { position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--c-black) 35%, transparent) 0%, color-mix(in srgb, var(--c-black) 0%, transparent) 30%, color-mix(in srgb, var(--c-black) 15%, transparent) 55%, color-mix(in srgb, var(--c-black) 88%, transparent) 100%); }
.lang-tile__code {
  position: absolute;
  top: clamp(0.75rem, 0.5rem + 0.8vw, 1.25rem);
  left: clamp(0.75rem, 0.5rem + 0.8vw, 1.25rem);
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  height: 28px;
  padding: 0 0.7rem;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--c-black) 45%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid color-mix(in srgb, var(--c-white) 16%, transparent);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.lang-tile__code span { color: var(--c-accent-300); }
.lang-tile__body { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(1rem, 0.6rem + 1.2vw, 1.6rem); display: flex; flex-direction: column; gap: 0.3rem; }
.lang-tile__native { font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.6rem); font-weight: 650; letter-spacing: -0.04em; line-height: 1; }
.lang-tile__name { display: inline-flex; align-items: center; gap: 0.35rem; font-size: var(--fs-small); color: color-mix(in srgb, var(--c-white) 78%, transparent); font-weight: 500; }
.lang-tile__arrow { transition: transform 0.5s var(--ease-out); }
.lang-tile__link:hover .lang-tile__arrow { transform: translate(3px, -3px); }

/* ---------- Languages: searchable directory ---------- */
.lang-dir__bar { display: grid; gap: 1rem; align-items: center; margin-bottom: 2rem; }
@media (min-width: 760px) { .lang-dir__bar { grid-template-columns: minmax(0, 32rem) auto; justify-content: space-between; } }
.lang-dir__count { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0.06em; color: var(--fg-2); }
.lang-dir__list { columns: 2 150px; column-gap: 1.5rem; }
@media (min-width: 760px) { .lang-dir__list { columns: 4 180px; } }
@media (min-width: 1200px) { .lang-dir__list { columns: 5 180px; } }
.lang-dir__item { break-inside: avoid; padding: 0.42rem 0; font-size: var(--fs-small); color: var(--fg); border-bottom: 1px solid var(--border); }
.lang-dir__item--main a { display: flex; justify-content: space-between; gap: 0.5rem; color: var(--accent); font-weight: 650; text-decoration: none; }
.lang-dir__item--main a:hover { text-decoration: underline; }
.lang-dir__native { color: var(--fg-3); font-weight: 500; }
.lang-dir__item mark { background: color-mix(in srgb, var(--c-accent) 16%, transparent); color: inherit; border-radius: 3px; }
.lang-dir__empty { margin-top: 1rem; color: var(--fg-2); }
.lang-dir.is-collapsed .lang-dir__wrap {
  max-height: 26rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent);
  mask-image: linear-gradient(180deg, #000 60%, transparent);
}
.lang-dir__more { margin-top: 1.5rem; }
.lang-dir__more .icon { transition: transform 0.4s var(--ease-out); }
.lang-dir__more[aria-expanded="true"] .icon { transform: rotate(180deg); }
.lang-dir__empty a { color: var(--accent); }

/* ---------- Logos: clients + certifications ---------- */
.clients { display: grid; gap: 0.6rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .clients { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .clients { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.client {
  display: grid;
  place-items: center;
  height: clamp(96px, 70px + 4vw, 132px);
  padding: 1rem;
  border-radius: var(--r-md);
  background: var(--surface);
}
.client__logo { display: block; background: none; }
.client__logo img { height: var(--h, 40px); width: auto; max-width: 100%; opacity: 0.72; transition: opacity var(--dur-3); }
.client:hover .client__logo img { opacity: 1; }
[data-theme="dark"] .client__logo img { filter: invert(1); opacity: 0.75; }
.certs { display: grid; gap: var(--gap); }
@media (min-width: 900px) { .certs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cert {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
}
.cert > * { position: relative; z-index: 1; }
.cert__badge {
  display: grid;
  place-items: center;
  flex: none;
  width: 92px; height: 92px;
  padding: 8px;
  border-radius: 20px;
  background: var(--c-white);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 14px 40px -12px color-mix(in srgb, var(--c-accent-400) 55%, transparent);
}
.cert__badge picture { background: none; }
.cert__img { width: 100%; height: 100%; max-height: 76px; object-fit: contain; }
.cert__body { display: flex; flex-direction: column; gap: 0.25rem; }
.cert__name { font-size: 1.1875rem; font-weight: 650; letter-spacing: -0.02em; }
.cert__detail { font-size: var(--fs-small); color: var(--fg-2); line-height: 1.45; }

/* ---------- Pull quote ---------- */
.pull-quote { text-align: center; }
.pull-quote__mark { margin: 0 auto 1.5rem; color: var(--accent); opacity: 0.8; }
.pull-quote__text { margin: 0; font-family: var(--font-serif); font-style: italic; font-size: clamp(2rem, 1.2rem + 3vw, 3.75rem); line-height: 1.12; letter-spacing: -0.015em; }
.pull-quote__cite { margin-top: 1.5rem; font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--fg-3); }

/* =========================================================================================
   Key facts panel (<dl>) — blocks/keyfacts.mjs, used on every page type except home (bespoke spec sheet)
   ========================================================================================= */
.in-kf {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(1.5rem, 1rem + 2.6vw, 3.75rem);
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}
[data-theme="dark"] .in-kf { background: linear-gradient(165deg, var(--c-ink-2), var(--c-ink-1)); box-shadow: 0 40px 100px -50px color-mix(in srgb, var(--c-accent) 45%, transparent); }
.in-kf__line { position: absolute; left: 0; right: 0; top: 0; height: 3px; pointer-events: none; background: var(--grad-brand-deep); opacity: 0.9; }
.in-kf__head { display: grid; gap: 0.9rem 2rem; align-items: end; padding-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); border-bottom: 1px solid var(--border-strong); }
@media (min-width: 760px) { .in-kf__head { grid-template-columns: minmax(0, 1fr) auto; } .in-kf__eyebrow { grid-column: 1 / -1; } }
.in-kf__eyebrow::before { display: none; }
.in-kf__title { max-width: 22ch; }
.in-kf__count { justify-self: start; }
.in-kf__grid { display: grid; column-gap: clamp(1.5rem, 1rem + 2.5vw, 4rem); }
@media (min-width: 760px) {
  .in-kf__grid--c2, .in-kf__grid--c3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .in-kf__grid--c2.in-kf__grid--odd > :last-child { grid-column: 1 / -1; }
}
@media (min-width: 1100px) { .in-kf__grid--c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.in-kf__row { padding: 1.25rem 0 1.35rem; border-bottom: 1px solid var(--border); }
.in-kf__dt { display: flex; align-items: center; gap: 0.55rem; font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); }
.in-kf__dt .icon { flex: none; color: var(--accent); }
.in-kf__dd { margin: 0.55rem 0 0; font-size: 1.0625rem; font-weight: 560; letter-spacing: -0.014em; line-height: 1.45; color: var(--fg); }
.in-kf__dd a { color: var(--accent); }

/* =========================================================================================
   FAQ — blocks/faq.mjs (sticky aside + help card + numbered accordion); articles use a narrow variant
   ========================================================================================= */
.in-faq { display: grid; gap: 2.5rem 5rem; }
@media (min-width: 1000px) {
  .in-faq { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .in-faq__aside { position: sticky; top: calc(var(--header-h) + 56px + 2.5rem); align-self: start; }
}
.in-faq__head { margin-bottom: 2rem; }
.in-faq__count { margin-top: 1.25rem; }
.in-faq__help { position: relative; padding: 1.5rem 1.6rem; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); max-width: 26rem; }
.in-faq__help-title { font-size: 1.0625rem; font-weight: 650; letter-spacing: -0.016em; }
.in-faq__help-text { margin-top: 0.3rem; color: var(--fg-2); font-size: var(--fs-small); }
.in-faq__help-actions { display: grid; margin-top: 0.85rem; }
.in-faq__help-btn { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 44px; color: var(--accent); font-weight: 600; font-size: var(--fs-small); text-decoration: none; border-top: 1px solid var(--border); overflow-wrap: anywhere; }
.in-faq__help-btn:hover span { text-decoration: underline; text-underline-offset: 0.2em; }
.in-faq .accordion { counter-reset: q; border-top: 1px solid var(--border-strong); }
.in-faq .acc__q { justify-content: flex-start; gap: 1rem; padding: 1.45rem 0; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); }
.in-faq .acc__q::before { counter-increment: q; content: counter(q, decimal-leading-zero); flex: none; width: 2rem; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.06em; color: var(--accent); }
.in-faq .acc__q > span:first-child { flex: 1; }
.in-faq .acc__inner { padding: 0 3.5rem 1.6rem 3rem; }
@media (max-width: 639.98px) { .in-faq .acc__inner { padding: 0 0 1.4rem 3rem; } }

/* ---------- CTA panel ---------- */
.cta-panel {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(3.5rem, 2rem + 7vw, 8.5rem) clamp(1.25rem, 0.5rem + 4vw, 5rem);
  border-radius: clamp(24px, 1rem + 2vw, 44px);
  background: var(--c-ink-1);
  border: 1px solid color-mix(in srgb, var(--c-white) 8%, transparent);
  text-align: center;
  color: var(--c-white);
}
.cta-panel .aurora span { opacity: 0.75; }
.cta-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(color-mix(in srgb, var(--c-white) 8%, transparent) 1px, transparent 1.2px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent 80%);
  mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent 80%);
}
.cta-panel__inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
.cta-panel__title { max-width: 18ch; font-size: var(--fs-h-lg); letter-spacing: -0.04em; line-height: 1.02; }
.cta-panel__text { max-width: 40rem; font-size: var(--fs-lede); color: color-mix(in srgb, var(--c-white) 78%, transparent); line-height: 1.45; }
.cta-panel .btn-row { justify-content: center; margin-top: 0.75rem; }

/* ---------- Figure ---------- */
.figure__frame { border-radius: var(--r-xl); overflow: hidden; }
.figure__img { width: 100%; }
.figure__cap { margin-top: 1rem; text-align: center; font-size: var(--fs-small); color: var(--fg-2); }

/* Form layouts live with the form kit in 80-conversion.css (.tf-block, .tf-card, .tf-points). */

/* ---------- Related ---------- */
.related .shead { margin-bottom: 2.5rem; }
.tile--related .tile__title { font-size: 1.3rem; }
.tile--related .tile__text { font-size: var(--fs-small); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- 404 ---------- */
.hero--404 .hero__title { font-size: var(--fs-display-xl); max-width: none; }
.hero--404 .lost-word { padding-right: 0; }

/* ---------- Values bento ("Fast. Reliable. Affordable." — blocks/_bento.mjs) ---------- */
.vx__title {
  text-align: center;
  font-size: clamp(2.9rem, 0.8rem + 7.4vw, 9rem);
  font-weight: 650;
  letter-spacing: -0.058em;
  line-height: 0.95;
  margin-bottom: clamp(2.5rem, 2rem + 3vw, 5rem);
}
.vx__hw { display: inline-block; }
.vx__hw:nth-child(2) { background: linear-gradient(100deg, var(--accent-strong), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 0.04em; }
.vx__hw:nth-child(3) { background: linear-gradient(100deg, var(--accent), var(--accent-strong)); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 0.04em; }
.motion.tw-ready .vx__title:not(.is-in) .vx__hw { opacity: 0; transform: translateY(0.3em); }
.motion .vx__title .vx__hw { transition: opacity 1s var(--ease-out), transform 1.2s var(--ease-out); transition-delay: calc(var(--i) * 0.12s); }
.motion.tw-ready .vx__title[data-reveal]:not(.is-in) { opacity: 1; transform: none; }

.vx__grid { display: grid; gap: var(--gap); grid-template-columns: repeat(6, minmax(0, 1fr)); }
.vx-tile {
  color: var(--fg);
  position: relative;
  grid-column: span 6;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
  border-radius: var(--r-xl);
  background: var(--c-white);
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
}
.vx-tile__body { display: grid; gap: 0.75rem; align-content: start; }
.vx-tile__title { display: flex; align-items: center; gap: 0.6rem; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.4rem); font-weight: 650; letter-spacing: -0.04em; line-height: 1; }
.vx-tile__title .icon { color: var(--c-accent-600); flex: none; }
.vx-tile__text { color: var(--fg-2); line-height: 1.55; max-width: 44ch; }
.vx-tile__visual { position: relative; margin-top: auto; }
@media (min-width: 760px) {
  .vx-tile--fast { grid-column: span 6; }
  .vx-tile--reliable, .vx-tile--afford, .vx-tile--langs { grid-column: span 3; }
  .vx-tile--langs { grid-column: span 6; }
}
@media (min-width: 1100px) {
  .vx-tile--fast { grid-column: span 4; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2rem; }
  .vx-tile--fast .vx-tile__visual { margin-top: 0; align-self: center; }
  .vx-tile--reliable { grid-column: span 2; grid-row: span 2; }
  .vx-tile--afford { grid-column: span 2; }
  .vx-tile--langs { grid-column: span 2; }
}
/* dial */
.vx-tile--fast .vx-tile__visual { width: clamp(180px, 22vw, 260px); aspect-ratio: 1; margin-inline: auto; }
.vx-dial { width: 100%; height: 100%; overflow: visible; }
.vx-dial__ticks line { stroke: rgba(0, 0, 0, 0.16); stroke-width: 1.5; }
.vx-dial__track { fill: none; stroke: var(--c-paper-2); stroke-width: 10; }
.vx-dial__arc { fill: none; stroke: var(--c-accent); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 100px 100px; }
.vx-dial__hand line { stroke: var(--c-text); stroke-width: 3; stroke-linecap: round; }
.vx-dial__hand circle { fill: var(--c-text); }
.vx-dial__hand { transform-origin: 100px 100px; transform: rotate(360deg); }
.motion.tw-ready .vx-tile--fast:not(.is-in) .vx-dial__arc { stroke-dashoffset: 1; }
.motion.tw-ready .vx-tile--fast:not(.is-in) .vx-dial__hand { transform: rotate(0deg); }
.motion .vx-dial__arc { transition: stroke-dashoffset 2.4s var(--ease-in-out) 0.3s; }
.motion .vx-dial__hand { transition: transform 2.4s var(--ease-in-out) 0.3s; }
.vx-dial__label { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 0.2rem; }
.vx-dial__big { font-size: clamp(1.8rem, 1.2rem + 1.4vw, 2.6rem); font-weight: 650; letter-spacing: -0.04em; line-height: 1; padding-top: 2.6rem; }
.vx-dial__label .mono { color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.625rem; }
/* shield */
.vx-tile--reliable .vx-tile__visual { flex: 1; display: grid; place-content: center; justify-items: center; gap: 1.75rem; padding-block: 1.5rem; }
.vx-tile--reliable .vx-tile__visual::before {
  content: "";
  position: absolute;
  left: 50%; top: 42%;
  width: 260px; height: 260px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c-accent-400) 28%, transparent), color-mix(in srgb, var(--c-accent-300) 12%, transparent) 55%, color-mix(in srgb, var(--c-white) 0%, transparent) 100%);
  z-index: -1;
}
.vx-tile--reliable .vx-tile__visual::after {
  content: "";
  position: absolute;
  left: 50%; top: 42%;
  width: 230px; height: 230px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px dashed color-mix(in srgb, var(--c-accent) 22%, transparent);
  z-index: -1;
}
@media (min-width: 1100px) { .vx-tile--reliable .vx-shield { width: 170px; } }
.vx-shield { width: clamp(110px, 12vw, 150px); height: auto; overflow: visible; filter: drop-shadow(0 20px 30px color-mix(in srgb, var(--c-accent) 30%, transparent)); }
.vx-shield__body { fill: url(#vxg); }
.vx-shield__check { fill: none; stroke: var(--c-on-accent); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.motion.tw-ready .vx-tile--reliable:not(.is-in) .vx-shield__check { stroke-dashoffset: 1; }
.motion .vx-shield__check { transition: stroke-dashoffset 1s var(--ease-out) 0.6s; }
.motion.tw-ready .vx-tile--reliable:not(.is-in) .vx-shield { transform: scale(0.85); opacity: 0; }
.motion .vx-shield { transition: transform 1.2s var(--ease-spring) 0.15s, opacity 0.8s var(--ease-out) 0.15s; }
.vx-certs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; }
.vx-certs li { padding: 0.45rem 0.7rem; border-radius: var(--r-pill); background: var(--c-paper); color: var(--c-text-2); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; }
/* coins */
.vx-tile--afford .vx-tile__visual { display: flex; align-items: flex-end; gap: 1.5rem; min-height: 132px; }
.vx-coins { position: relative; width: 112px; height: 120px; flex: none; }
.vx-coins span {
  position: absolute;
  left: 0;
  bottom: calc(var(--i) * 15px);
  width: 112px;
  height: 34px;
  border-radius: 50%;
  background: var(--c-white);
  border: 2px solid var(--c-accent-600);
}
.vx-coins span::after { content: ""; position: absolute; inset: 6px 18px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--c-accent-600) 35%, transparent); }
.vx-coins span:last-child { border-color: var(--c-accent); }
.vx-coins span:last-child::after { border-color: color-mix(in srgb, var(--c-accent) 35%, transparent); }
.motion.tw-ready .vx-tile--afford:not(.is-in) .vx-coins span { transform: translateY(-80px); opacity: 0; }
.motion .vx-coins span { transition: transform 0.9s var(--ease-spring), opacity 0.4s var(--ease-out); transition-delay: calc(0.3s + var(--i) * 0.12s); }
.vx-coins__label { display: grid; gap: 0.4rem; }
.vx-coins__label .mono { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--c-text-2); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.6875rem; }
.vx-coins__label .mono::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c-accent-300); }
/* language codes (dark tile) */
.vx-tile--langs { background: var(--c-black); color: var(--c-on-dark); --fg-2: var(--c-on-dark-2); }
.vx-tile--langs .vx-tile__visual { margin-top: auto; }
.vx-tile--langs .vx-tile__visual { margin-inline: calc(clamp(1.5rem, 1rem + 1.6vw, 2.5rem) * -1); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.vx-codes { display: grid; gap: 0.6rem; }
.vx-codes__row { display: flex; gap: 0.6rem; width: max-content; will-change: transform; }
.vx-codes__row[data-dir="-1"] { transform: translateX(-30%); }
.vx-codes__row span { display: inline-grid; place-items: center; min-width: 3.4rem; height: 2.5rem; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--c-white) 10%, transparent); font-family: var(--font-mono); font-size: 0.875rem; letter-spacing: 0.08em; color: var(--c-on-dark-3); }
.vx-codes__row span:nth-child(7n + 3) { color: var(--c-black); background: var(--c-accent-400); border-color: transparent; }
.vx-codes__row span:nth-child(11n + 6) { color: var(--c-black); background: var(--c-accent-300); border-color: transparent; }
.vx-tile__big { font-size: clamp(3rem, 2rem + 3vw, 4.75rem); font-weight: 650; letter-spacing: -0.055em; line-height: 0.9; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Section + context: tiles are white cards on grey; on a white section they become paper cards */
.vx-sec { padding-bottom: var(--section-y-sm); }
.vx__intro { max-width: 40rem; margin: calc(clamp(2.5rem, 2rem + 3vw, 5rem) * -0.6) auto clamp(2rem, 1.5rem + 2vw, 3.5rem); text-align: center; font-size: var(--fs-lede); color: var(--fg-2); }
.section--light .vx-tile:not(.vx-tile--langs) { background: var(--c-paper); }
.section--dark .vx-tile:not(.vx-tile--langs) { box-shadow: none; }

/* Split section head: eyebrow + short title left, intro right (heads with an intro) */
.shead--split .shead__intro p + p { margin-top: 0.6em; }
.shead__lead { color: var(--fg); font-weight: 560; }
@media (min-width: 1000px) {
  .shead--split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2rem, 1rem + 3vw, 5rem); align-items: end; max-width: none; }
  .shead--split .shead__eyebrow, .shead--split .shead__title { grid-column: 1; }
  .shead--split .shead__intro { grid-column: 2; grid-row: 1 / span 2; align-self: end; margin-top: 0; }
}

/* ==== 50-home.css ==== */
/* 50-home.css — OWNED BY THE HOME AGENT. Every rule is scoped under .page-home.
   Sections: hx (hero) · mf (manifesto) · sx (stats) · svc (services stack) · lx/lsx (languages + search)
   · af (any field) · sec (sectors, horizontal) · vx (values bento) · ex/calc (estimator) · hw (how it works)
   · tx (trust) · kf (key facts) · fq (faq) · cx (aurora contact).
   Motion-only states are gated by html.motion (no reduced-motion preference) and/or JS-added classes. */

.page-home { background: var(--c-black); }
.page-home main { background: var(--c-black); }

/* =============================================================== 1 · HERO */
.page-home .hx {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--c-black);
  color: var(--fg);
  overflow: hidden;
  isolation: isolate;
}
.page-home .hx__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.page-home .hx__glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 55% at 74% 50%, color-mix(in srgb, var(--c-accent) 26%, transparent), color-mix(in srgb, var(--c-accent) 0%, transparent) 70%),
    radial-gradient(40% 40% at 90% 88%, color-mix(in srgb, var(--c-accent-300) 14%, transparent), color-mix(in srgb, var(--c-accent-300) 0%, transparent) 70%),
    radial-gradient(50% 50% at 10% 0%, color-mix(in srgb, var(--c-accent-400) 8%, transparent), color-mix(in srgb, var(--c-accent-400) 0%, transparent) 70%);
}
.page-home .hx__globe {
  position: absolute;
  top: 50%;
  right: -8vw;
  width: min(66vw, 122vh);
  aspect-ratio: 1;
  transform: translateY(-47%);
}
.page-home .hx__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* static, JS-free planet light (sits under the canvas) */
.page-home .hx__globe-fallback {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, color-mix(in srgb, var(--c-accent-400) 16%, transparent), color-mix(in srgb, var(--c-accent) 6%, transparent) 45%, color-mix(in srgb, var(--c-black) 0%, transparent) 70%);
  box-shadow: 0 0 120px 10px color-mix(in srgb, var(--c-accent) 12%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--c-accent-300) 10%, transparent);
}
.page-home .hx__vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--c-black) 92%, transparent) 0%, color-mix(in srgb, var(--c-black) 55%, transparent) 34%, color-mix(in srgb, var(--c-black) 0%, transparent) 62%),
    linear-gradient(0deg, var(--c-black) 0%, color-mix(in srgb, var(--c-black) 0%, transparent) 26%);
}
.page-home .hx__inner {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-top: calc(var(--header-h) + clamp(2rem, 7vh, 5.5rem));
  padding-bottom: clamp(1.25rem, 3vh, 2.25rem);
}
.page-home .hx__copy { max-width: 64rem; }
.page-home .hx__eyebrow { margin-bottom: clamp(0.75rem, 1.6vh, 1.25rem); }
.page-home .hx__word {
  font-size: clamp(3.4rem, 0.6rem + 9.6vw, 10.5rem);
  font-weight: 650;
  letter-spacing: -0.055em;
  line-height: 1;
  height: 1.14em;
  white-space: nowrap;
  margin-left: -0.05em;
  contain: layout style;
}
.page-home .hx__word-txt {
  display: inline-block;
  padding: 0.2em 0.06em 0.12em 0.02em;
  margin-top: -0.2em; /* room above the cap height so diacritics (Ü, É, Ç) are painted by the clip-text gradient */
  background: linear-gradient(180deg, var(--c-white) 35%, var(--c-accent-200) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-kerning: normal;
}
.page-home .hx__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.7rem;
  min-height: 1.6rem;
  margin-top: clamp(0.25rem, 1vh, 0.75rem);
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.6875rem;
}
.page-home .hx__code {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.55rem;
  border-radius: 6px;
  color: var(--c-black);
  background: var(--grad-brand);
  font-weight: 600;
  letter-spacing: 0.08em;
}
.page-home .hx__sep { width: 1.5rem; height: 1px; background: color-mix(in srgb, var(--c-white) 25%, transparent); }
.page-home .hx__dot { opacity: 0.5; }
.page-home .hx__coord { color: var(--c-accent-400); opacity: 0.9; }
.page-home .hx__meta.is-swap > * { animation: hx-meta 0.6s var(--ease-out) both; }
@keyframes hx-meta { from { opacity: 0; transform: translateY(6px); } }

.page-home .hx__title {
  margin-top: clamp(1.25rem, 3.2vh, 2.25rem);
  max-width: 19ch;
  font-size: clamp(1.75rem, 0.95rem + 2.3vw, 3.25rem);
  font-weight: 620;
  letter-spacing: -0.035em;
  line-height: 1.06;
  color: var(--c-on-dark);
}
.page-home .hx__grad {
  background: linear-gradient(100deg, var(--c-accent-300) 0%, var(--c-accent-400) 40%, var(--c-accent-300) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.page-home .hx__lede {
  margin-top: clamp(0.9rem, 2vh, 1.4rem);
  max-width: 36rem;
  font-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.25rem);
  line-height: 1.5;
  color: var(--fg-2);
  letter-spacing: -0.01em;
}
.page-home .hx__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-top: clamp(1.4rem, 3.4vh, 2.4rem);
}
.page-home .hx__cta-main .btn__icon { transition: transform 0.6s var(--ease-out); }
.page-home .hx__cta-main:hover .btn__icon { transform: translateY(3px); }
.page-home .hx__cta-link { margin-left: 0.5rem; color: var(--c-on-dark); }
.page-home .hx__cta-link .icon { color: var(--c-accent-400); }

/* foot: the four original slider messages + controls */
.page-home .hx__foot {
  margin-top: auto;
  padding-top: clamp(2rem, 6vh, 4rem);
  display: grid;
  gap: 1rem 2.5rem;
  align-items: end;
}
@media (min-width: 1100px) { .page-home .hx__foot { grid-template-columns: minmax(0, 1fr) auto; } }
.page-home .hx__slides {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
}
.page-home .hx-slide {
  position: relative;
  padding-top: 1rem;
  min-width: 0;
}
.page-home .hx-slide::before,
.page-home .hx-slide::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: color-mix(in srgb, var(--c-white) 14%, transparent);
}
.page-home .hx-slide::after {
  background: var(--grad-brand);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.8s var(--ease-out);
}
.page-home .hx-slide:hover::after,
.page-home .hx-slide:focus-within::after { transform: scaleX(1); }
.page-home .hx-slide__n { position: absolute; top: 1rem; right: 0; color: var(--fg-3); font-size: 0.6875rem; }
.page-home .hx-slide__eyebrow { font-size: 0.8125rem; color: var(--fg-3); font-weight: 500; padding-right: 2rem; }
.page-home .hx-slide__title {
  margin-top: 0.3rem;
  font-size: 0.9375rem;
  line-height: 1.35;
  color: var(--fg);
  font-weight: 560;
  letter-spacing: -0.012em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.page-home .hx-slide__cta { margin-top: 0.55rem; font-size: 0.875rem; }
.page-home .hx__controls { display: flex; align-items: center; gap: 1rem; justify-content: space-between; }
.page-home .hx__cue {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 44px;
  color: var(--fg-3);
  text-decoration: none;
  text-transform: uppercase;
}
.page-home .hx__cue:hover { color: var(--fg); }
.page-home .hx__cue-line {
  position: relative;
  width: 1px;
  height: 36px;
  background: color-mix(in srgb, var(--c-white) 16%, transparent);
  overflow: hidden;
}
.page-home .hx__cue-line::after {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 1px; height: 14px;
  background: var(--c-accent-400);
}
.motion .page-home .hx__cue-line::after { animation: hx-cue 2.2s var(--ease-in-out) infinite; }
@keyframes hx-cue { 0% { transform: translateY(-14px); } 70%, 100% { transform: translateY(36px); } }
.page-home .hx__pause {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0 0.95rem 0 0.4rem;
  border-radius: var(--r-pill);
  border: 1px solid color-mix(in srgb, var(--c-white) 14%, transparent);
  background: color-mix(in srgb, var(--c-white) 4%, transparent);
  color: var(--fg-2);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: border-color var(--dur-2), color var(--dur-2), background-color var(--dur-2);
}
.page-home .hx__pause[hidden] { display: none; }
.page-home .hx__pause:hover { color: var(--fg); border-color: color-mix(in srgb, var(--c-white) 30%, transparent); }
.page-home .hx__pause-ico { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: color-mix(in srgb, var(--c-white) 8%, transparent); }
.page-home .hx__pause-ico .icon { grid-area: 1 / 1; }
.page-home .hx__pause .icon:last-child { opacity: 0; }
.page-home .hx__pause[aria-pressed="true"] .icon:first-child { opacity: 0; }
.page-home .hx__pause[aria-pressed="true"] .icon:last-child { opacity: 1; }
.page-home .hx__pause-n { font-variant-numeric: tabular-nums; letter-spacing: 0.1em; }

/* intro choreography — pure CSS so it never depends on JS (no flash, no failsafe needed) */
.motion .page-home .hx-in { animation: hx-in 1.2s var(--ease-out) both; animation-delay: calc(0.12s + var(--o, 0) * 0.085s); }
.motion .page-home .hx__word.hx-in { animation-name: hx-in-word; animation-duration: 1.5s; }
.motion .page-home .hx__globe { animation: hx-globe 2.4s var(--ease-out) 0.1s both; }
@keyframes hx-in { from { opacity: 0; transform: translate3d(0, 28px, 0); } }
@keyframes hx-in-word { from { transform: translate3d(0, 0.18em, 0) scale(0.98); filter: blur(10px); } }
@keyframes hx-globe { from { opacity: 0; transform: translateY(-44%) scale(0.94); } }

/* hero: tablet + mobile */
@media (max-width: 1099px) {
  .page-home .hx__slides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 1rem; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .page-home .hx__slides::-webkit-scrollbar { display: none; }
  .page-home .hx-slide { flex: 0 0 min(76vw, 300px); scroll-snap-align: start; }
}
@media (max-width: 899px) {
  .page-home .hx__globe {
    top: calc(var(--header-h) - 12vw);
    right: auto;
    left: 50%;
    width: min(132vw, 640px);
    transform: translateX(-38%);
  }
  @keyframes hx-globe { from { opacity: 0; transform: translateX(-38%) scale(0.94); } }
  .page-home .hx__vignette {
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--c-black) 0%, transparent) 0%, color-mix(in srgb, var(--c-black) 0%, transparent) 26%, color-mix(in srgb, var(--c-black) 78%, transparent) 48%, var(--c-black) 72%),
      linear-gradient(90deg, color-mix(in srgb, var(--c-black) 50%, transparent), color-mix(in srgb, var(--c-black) 0%, transparent) 60%);
  }
  .page-home .hx__inner { padding-top: calc(var(--header-h) + min(44vw, 260px)); }
  .page-home .hx__glow {
    background:
      radial-gradient(70% 40% at 60% 22%, color-mix(in srgb, var(--c-accent) 30%, transparent), color-mix(in srgb, var(--c-accent) 0%, transparent) 70%),
      radial-gradient(50% 30% at 90% 40%, color-mix(in srgb, var(--c-accent-300) 12%, transparent), color-mix(in srgb, var(--c-accent-300) 0%, transparent) 70%);
  }
}
@media (max-width: 559px) {
  .page-home .hx__ctas .btn { width: 100%; }
  .page-home .hx__cta-link { margin-left: 0; }
  .page-home .hx__title { max-width: 16ch; }
  .page-home .hx__meta .hx__coord { flex-basis: 100%; }
}

/* ========================================================== 2 · MANIFESTO */
.page-home .mf { position: relative; background: var(--c-black); color: var(--fg); }
.page-home .mf__pin {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: calc(var(--header-h) + 1.5rem) clamp(2rem, 5vh, 3.5rem);
  overflow: hidden;
}
.page-home .mf__glow {
  position: absolute;
  inset: auto -10% -40% -10%;
  height: 70%;
  background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--c-accent) 22%, transparent), color-mix(in srgb, var(--c-accent) 0%, transparent) 70%);
  pointer-events: none;
  opacity: 0.8;
}
.page-home .mf__inner { position: relative; display: grid; gap: clamp(1.75rem, 5vh, 3.5rem); width: 100%; }
.page-home .mf__head { display: grid; gap: 0.9rem; }
@media (min-width: 900px) {
  .page-home .mf__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: baseline; }
}
.page-home .mf__title {
  font-size: var(--fs-h-sm);
  font-weight: 560;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--fg-2);
  max-width: 30ch;
}
.page-home .mf__stage { position: relative; }
.page-home .mf__text {
  font-size: min(clamp(1.6rem, 0.8rem + 2.75vw, 3.75rem), 6.3svh);
  font-weight: 600;
  letter-spacing: -0.034em;
  line-height: 1.14;
  color: var(--c-on-dark);
  max-width: 30em;
  text-wrap: pretty;
}
.page-home .mf__num {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.page-home .mf__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  height: 1.55em;
  padding: 0 0.7em;
  margin: 0 0.12em;
  vertical-align: 0.32em;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.42em;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--c-on-dark);
  background: linear-gradient(var(--c-ink-2), var(--c-ink-2)) padding-box, var(--grad-brand) border-box;
  border: 1px solid transparent;
  box-shadow: 0 0 24px -6px color-mix(in srgb, var(--c-accent-400) 55%, transparent);
  white-space: nowrap;
}
.page-home .mf__pill [data-t]::before { content: attr(data-t); }
.page-home .mf__pill-arrow { color: var(--c-accent-400); }
.page-home .mf__pill-to { display: inline-block; min-width: 1.3em; color: var(--c-accent-200); }
.page-home .mf__final {
  margin-top: clamp(2rem, 6vh, 4rem);
  font-size: min(clamp(2.4rem, 0.9rem + 5.2vw, 7.25rem), 11svh);
  font-weight: 650;
  letter-spacing: -0.05em;
  line-height: 1;
  max-width: 13em;
  color: var(--c-on-dark);
  text-wrap: balance;
}
.page-home .mf__never {
  font-size: 1.08em;
  letter-spacing: -0.02em;
  padding-right: 0.08em;
  background: linear-gradient(100deg, var(--c-accent-300), var(--c-accent-400) 45%, var(--c-accent-300));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.page-home .mf__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
.page-home .mf__progress { display: none; position: relative; width: min(220px, 40vw); height: 2px; border-radius: 2px; background: color-mix(in srgb, var(--c-white) 12%, transparent); overflow: hidden; }
.page-home .mf__progress span { position: absolute; inset: 0; background: var(--grad-brand); transform: scaleX(0); transform-origin: 0 50%; }
/* pinned (JS + motion): the two statements share one stage */
.page-home .mf.is-pinned .mf__progress { display: block; }
.page-home .mf.is-pinned .mf__stage { display: grid; align-items: center; }
.page-home .mf.is-pinned .mf__text,
.page-home .mf.is-pinned .mf__final { grid-area: 1 / 1; margin: 0; }
.page-home .mf.is-pinned .mf__final { justify-self: start; }

/* ============================================================== 3 · STATS */
.page-home .sx { padding-top: clamp(2.5rem, 1rem + 5vw, 6rem); }
.page-home .sx::before {
  content: "";
  position: absolute;
  left: 50%; top: 0;
  width: min(1100px, 90vw);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, color-mix(in srgb, var(--c-accent-400) 0%, transparent), color-mix(in srgb, var(--c-accent-400) 45%, transparent), color-mix(in srgb, var(--c-accent-300) 45%, transparent), color-mix(in srgb, var(--c-accent-300) 0%, transparent));
}
.page-home .sx__summary { display: grid; gap: 1rem; margin-bottom: clamp(3rem, 2rem + 4vw, 6rem); }
@media (min-width: 900px) { .page-home .sx__summary { grid-template-columns: minmax(160px, 3fr) 9fr; gap: 3rem; } }
.page-home .sx__label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  align-self: start;
  padding-top: 0.55rem;
  color: var(--c-accent-400);
  text-transform: uppercase;
  letter-spacing: var(--ls-mono);
}
.page-home .sx__text {
  font-size: clamp(1.3rem, 1rem + 1.05vw, 2.1rem);
  line-height: 1.32;
  letter-spacing: -0.024em;
  font-weight: 520;
  color: var(--c-on-dark);
  max-width: 40ch;
}
.page-home .sx__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem 1rem; }
@media (min-width: 900px) { .page-home .sx__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; } }
.page-home .sx__stat { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 0.6rem; padding-top: 1.25rem; border-top: 1px solid color-mix(in srgb, var(--c-white) 12%, transparent); }
@media (min-width: 900px) {
  .page-home .sx__stat { padding: 1.25rem 1.5rem 0 0; }
  .page-home .sx__stat + .sx__stat { padding-left: 1.5rem; border-left: 1px solid color-mix(in srgb, var(--c-white) 8%, transparent); }
}
.page-home .sx__v { margin: 0; }
.page-home .sx__v .stat__value {
  display: block;
  font-size: clamp(2.9rem, 1.3rem + 5vw, 6.75rem);
  font-weight: 650;
  letter-spacing: -0.055em;
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, var(--c-white) 30%, var(--c-accent-300) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
}
.page-home .sx__k { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); }

/* =========================================================== 4 · SERVICES */
.page-home .svc__head .shead:not(.shead--split) { max-width: 56rem; }
.page-home .svc__stack { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); }
.motion .page-home .svc__item { position: sticky; top: calc(var(--header-h) + 1.25rem + var(--i) * 1.1rem); }
/* keyboard focus inside a stacked card lifts it above the cards that slide over it (WCAG 2.4.11) */
.motion .page-home .svc__item:has(:focus-visible) { z-index: 3; }
.page-home .svc__item:has(:focus-visible) .svc-card__dim { opacity: 0 !important; }
.page-home .svc-card {
  position: relative;
  display: grid;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--c-white);
  color: var(--fg);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03), 0 40px 80px -40px rgba(0, 0, 0, 0.35);
  transform-origin: 50% 0;
  isolation: isolate;
}
.page-home .svc-card--1 { background: var(--c-ink-1); }
.page-home .svc-card--2 { background: linear-gradient(135deg, var(--c-fill-a) 0%, var(--c-accent) 55%, var(--c-fill-a) 100%); color: var(--c-on-accent); --fg: var(--c-on-accent); --fg-2: var(--c-on-accent); --fg-3: var(--c-on-accent); --accent: var(--c-on-accent); --border-strong: color-mix(in srgb, var(--c-on-accent) 45%, transparent); --focus: var(--c-on-accent); }
.page-home .svc-card--2 .icon-badge { color: var(--c-on-accent); background: color-mix(in srgb, var(--c-on-accent) 12%, transparent); border-color: color-mix(in srgb, var(--c-on-accent) 24%, transparent); }
.page-home .svc-card--2 .btn--secondary { color: var(--c-on-accent); background: color-mix(in srgb, var(--c-on-accent) 8%, transparent); border-color: color-mix(in srgb, var(--c-on-accent) 45%, transparent); }
@media (min-width: 900px) {
  .page-home .svc-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); min-height: min(600px, calc(100svh - var(--header-h) - 6rem)); }
}
.page-home .svc-card__body { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; padding: clamp(1.5rem, 0.8rem + 2.8vw, 3.75rem); }
.page-home .svc-card__n { display: flex; gap: 0.5rem; color: var(--fg); font-size: 0.75rem; letter-spacing: 0.14em; }
.page-home .svc-card__of { color: var(--fg-3); }
.page-home .svc-card--2 .svc-card__of { color: var(--c-on-accent); }
.page-home .svc-card__copy { display: grid; gap: 1.1rem; justify-items: start; }
.page-home .svc-card__title { font-size: clamp(2.5rem, 1.2rem + 4vw, 5.25rem); font-weight: 650; letter-spacing: -0.05em; line-height: 0.98; margin-top: 0.5rem; }
.page-home .svc-card__text { font-size: var(--fs-body-lg); line-height: 1.55; color: var(--fg-2); max-width: 34ch; }
.page-home .svc-card__btn { align-self: flex-start; }
.page-home .svc-card__media { position: relative; min-height: clamp(220px, 52vw, 340px); overflow: hidden; }
@media (min-width: 900px) { .page-home .svc-card__media { min-height: 0; margin: 0.75rem; border-radius: calc(var(--r-xl) - 0.6rem); } }
.page-home .svc-card__media picture, .page-home .svc-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-home .svc-card__img { transition: transform 1.6s var(--ease-out); }
.page-home .svc-card:hover .svc-card__img { transform: scale(1.04); }
.page-home .svc-card__dim { position: absolute; inset: 0; z-index: 2; background: var(--c-black); opacity: 0; pointer-events: none; }
@media (max-width: 899px) {
  .page-home .svc-card { grid-template-rows: auto auto; }
  .page-home .svc-card__media { order: -1; }
  .page-home .svc-card__body { gap: 1.25rem; }
  .motion .page-home .svc__item { top: calc(var(--header-h) + 0.75rem + var(--i) * 0.75rem); }
}

/* ========================================================== 5 · LANGUAGES */
.page-home .lx { overflow: hidden; }
.page-home .lx__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem 3rem; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.page-home .lx__head .shead { margin-bottom: 0; }
.page-home .lx__nav { display: flex; gap: 0.6rem; }
.page-home .lx__btn {
  display: inline-grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  color: var(--fg);
  border: 1px solid color-mix(in srgb, var(--c-white) 16%, transparent);
  background: color-mix(in srgb, var(--c-white) 5%, transparent);
  transition: background-color var(--dur-2), border-color var(--dur-2), opacity var(--dur-2);
}
.page-home .lx__btn:hover { background: color-mix(in srgb, var(--c-white) 12%, transparent); border-color: color-mix(in srgb, var(--c-white) 32%, transparent); }
.page-home .lx__btn:disabled { opacity: 0.35; cursor: default; }
.page-home .lx__gallery { position: relative; }
.page-home .lx__track {
  list-style: none;
  margin: 0;
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-block: 0.25rem 0.5rem;
  padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2));
  scroll-padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2));
  cursor: grab;
}
.page-home .lx__track::-webkit-scrollbar { display: none; }
.page-home .lx__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.page-home .lx__track.is-dragging a { pointer-events: none; }
.page-home .lx__track .lang-tile { flex: 0 0 clamp(250px, 72vw, 360px); scroll-snap-align: start; }
@media (min-width: 1000px) { .page-home .lx__track .lang-tile { flex-basis: clamp(280px, 24vw, 370px); } }
.page-home .lx__track .lang-tile__link { aspect-ratio: 3 / 4; }
.page-home .lx__track img { -webkit-user-drag: none; user-select: none; }
.page-home .lx__track .lang-tile__native { font-size: clamp(2rem, 1.3rem + 1.6vw, 2.9rem); }
.page-home .lx__progress { position: relative; height: 2px; margin-top: 1.75rem; background: color-mix(in srgb, var(--c-white) 10%, transparent); border-radius: 2px; overflow: hidden; }
.page-home .lx__progress span { position: absolute; inset: 0; background: var(--grad-brand); transform-origin: 0 50%; transform: scaleX(0.35); }

/* live language search */
.page-home .lsx {
  position: relative;
  display: grid;
  gap: 2rem 4rem;
  margin-top: clamp(3.5rem, 2rem + 4vw, 6rem);
  padding: clamp(1.5rem, 1rem + 2.5vw, 3.5rem);
  border-radius: var(--r-xl);
  border: 1px solid color-mix(in srgb, var(--c-white) 10%, transparent);
  background:
    radial-gradient(70% 120% at 0% 0%, color-mix(in srgb, var(--c-accent) 16%, transparent), color-mix(in srgb, var(--c-accent) 0%, transparent) 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--c-white) 4.5%, transparent), color-mix(in srgb, var(--c-white) 1.5%, transparent));
}
@media (min-width: 1000px) { .page-home .lsx { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
.page-home .lsx__title { font-size: var(--fs-h-md); font-weight: 640; letter-spacing: -0.035em; line-height: 1.08; }
.page-home .lsx__title span { display: block; color: var(--fg-3); }
.page-home .lsx__text { margin-top: 1rem; color: var(--fg-2); max-width: 32ch; }
.page-home .lsx__field .input { min-height: 60px; font-size: 1.125rem; border-radius: var(--r-pill); }
.page-home .lsx__count { margin: 1rem 0 1.25rem; color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.12em; }
.page-home .lsx__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.page-home .lsx__chip > span, .page-home .lsx__chip > a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 40px;
  padding: 0.45rem 0.9rem;
  border-radius: var(--r-pill);
  border: 1px solid color-mix(in srgb, var(--c-white) 10%, transparent);
  background: color-mix(in srgb, var(--c-white) 4%, transparent);
  font-size: 0.9375rem;
  color: var(--fg);
  text-decoration: none;
}
.page-home .lsx__chip--main > a { border-color: color-mix(in srgb, var(--c-accent-400) 45%, transparent); background: color-mix(in srgb, var(--c-accent-400) 10%, transparent); transition: background-color var(--dur-2), border-color var(--dur-2); }
.page-home .lsx__chip--main > a:hover { background: color-mix(in srgb, var(--c-accent-400) 20%, transparent); border-color: var(--c-accent-400); }
.page-home .lsx__native { color: var(--fg-2); font-size: 0.875rem; }
.page-home .lsx__chip--main .icon { color: var(--c-accent-400); }
.page-home .lsx__chip mark { background: none; color: var(--c-accent-300); text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
.page-home .lsx.is-collapsed .lsx__chip:not([data-pop]) { display: none; }
.page-home .lsx__more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  margin-top: 1rem;
  padding: 0 0.25rem;
  color: var(--c-accent-400);
  font-weight: 600;
}
.page-home .lsx__more[hidden] { display: none; }
.page-home .lsx__more[aria-expanded="true"] .icon { transform: rotate(180deg); }
.page-home .lsx__empty { margin-top: 0.5rem; color: var(--fg-2); }
.page-home .lsx__empty a { color: var(--c-accent-400); }

/* ========================================================== 6 · ANY FIELD */
.page-home .af__grid { display: grid; gap: clamp(2.5rem, 2rem + 3vw, 6rem); align-items: center; }
@media (min-width: 960px) { .page-home .af__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.page-home .af__copy { display: grid; gap: 1.25rem; justify-items: start; }
.page-home .af__title { max-width: 14ch; }
.page-home .af__title em { color: var(--c-accent-600); }
.page-home .af__text { font-size: var(--fs-body-lg); color: var(--fg-2); max-width: 38ch; line-height: 1.6; }
.page-home .af__media { position: relative; width: 100%; max-width: 34rem; margin-inline: auto; aspect-ratio: 4 / 3; /* 900px original: keep it near 2x-sharp */ border-radius: var(--r-xl); overflow: hidden; background: var(--c-paper); }
.page-home .af__media picture { position: absolute; inset: -6% 0; display: block; }
.page-home .af__img { width: 100%; height: 100%; object-fit: cover; }
.page-home .af__tags { position: absolute; left: 1rem; bottom: 1rem; right: 1rem; display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }
.page-home .af__tags li {
  padding: 0.5rem 0.8rem;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--c-white) 82%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--c-text);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: 0 6px 20px -8px rgba(0, 0, 0, 0.25);
}

/* ============================================================ 7 · SECTORS */
.page-home .sec { position: relative; background: var(--c-black); color: var(--fg); }
.page-home .sec__pin { position: relative; padding-block: var(--section-y); }
.page-home .sec__rail {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.page-home .sec__hint { display: none; }
.page-home .sec__meter { display: none; }
.page-home .sec__track { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap); }
@media (min-width: 700px) { .page-home .sec__track { grid-template-columns: repeat(2, minmax(0, 1fr)); } .page-home .sec-card:first-child { grid-column: span 2; } }
@media (min-width: 1100px) {
  .page-home .sec__track { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .page-home .sec-card { grid-column: span 2; }
  .page-home .sec-card:nth-child(-n + 2), .page-home .sec-card:nth-child(n + 6) { grid-column: span 3; }
}
.page-home .sec-card__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-ink-1);
  border: 1px solid color-mix(in srgb, var(--c-white) 7%, transparent);
  isolation: isolate;
}
.page-home .sec-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.page-home .sec-card__media picture, .page-home .sec-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-home .sec-card__img { transition: transform 1.4s var(--ease-out); }
.page-home .sec-card__inner:hover .sec-card__img { transform: scale(1.05); }
.page-home .sec-card__shade { position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--c-black) 0%, transparent) 40%, color-mix(in srgb, var(--c-ink-1) 90%, transparent) 100%); }
.page-home .sec-card__body { position: relative; display: grid; gap: 0.6rem; padding: clamp(1.25rem, 1rem + 1vw, 2rem); padding-top: 0.5rem; }
.page-home .sec-card__n { position: absolute; top: -2.25rem; right: clamp(1.25rem, 1rem + 1vw, 2rem); color: var(--c-white); font-size: 0.6875rem; letter-spacing: 0.14em; }
.page-home .sec-card__n span { opacity: 0.6; }
.page-home .sec-card__icon { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-top: -1.9rem; border-radius: 14px; color: var(--c-on-accent); background: var(--grad-fill); box-shadow: 0 10px 30px -10px color-mix(in srgb, var(--c-accent) 80%, transparent); }
.page-home .sec-card__title { font-size: clamp(1.4rem, 1.15rem + 0.8vw, 1.9rem); font-weight: 640; letter-spacing: -0.03em; line-height: 1.1; margin-top: 0.4rem; }
.page-home .sec-card__link { color: inherit; text-decoration: none; }
.page-home .sec-card__link::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: var(--r-lg); }
.page-home .sec-card__link:focus-visible { outline: none; }
.page-home .sec-card__link:focus-visible::after { outline: 2px solid var(--c-accent-400); outline-offset: -2px; }
.page-home .sec-card__text { color: var(--fg-2); font-size: var(--fs-small); line-height: 1.55; max-width: 40ch; }
.page-home .sec-card__cta { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.4rem; color: var(--c-accent-400); font-weight: 600; font-size: var(--fs-small); }
.page-home .sec-card__cta .icon { transition: transform 0.5s var(--ease-out); }
.page-home .sec-card__inner:hover .sec-card__cta .icon { transform: translateX(4px); }
/* horizontal mode (desktop, motion, JS) */
.page-home .sec.is-h .sec__pin { height: 100vh; height: 100svh; padding: calc(var(--header-h) + 1rem) 0 2.25rem; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.page-home .sec.is-h .sec__rail {
  display: flex;
  align-items: stretch;
  gap: clamp(1rem, 1.5vw, 1.5rem);
  width: max-content;
  max-width: none;
  margin: 0;
  padding-left: max(var(--gutter), calc((100vw - var(--container)) / 2));
  padding-right: max(var(--gutter), calc((100vw - var(--container)) / 2));
  will-change: transform;
}
.page-home .sec.is-h .sec__head { flex: 0 0 min(32rem, 36vw); margin: 0 clamp(1rem, 3vw, 3rem) 0 0; display: flex; flex-direction: column; justify-content: center; }
.page-home .sec.is-h .sec__hint { display: inline-flex; align-items: center; gap: 0.75rem; margin-top: 2.25rem; color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.14em; }
.page-home .sec__hint-line { width: 3rem; height: 1px; background: var(--grad-brand); }
.page-home .sec.is-h .sec__track { display: flex; gap: clamp(1rem, 1.5vw, 1.5rem); }
.page-home .sec.is-h .sec-card { flex: 0 0 auto; width: clamp(360px, 30vw, 480px); height: min(64svh, 600px); }
.page-home .sec.is-h .sec-card__inner { border-radius: var(--r-xl); }
.page-home .sec.is-h .sec-card__media { position: absolute; inset: 0; aspect-ratio: auto; }
.page-home .sec.is-h .sec-card__shade { background: linear-gradient(180deg, color-mix(in srgb, var(--c-black) 25%, transparent) 0%, color-mix(in srgb, var(--c-black) 0%, transparent) 30%, color-mix(in srgb, var(--c-black) 35%, transparent) 55%, color-mix(in srgb, var(--c-black) 94%, transparent) 100%); }
.page-home .sec.is-h .sec-card__body { margin-top: auto; padding: 2rem; }
.page-home .sec.is-h .sec-card__n { position: absolute; top: auto; bottom: calc(100% + 0.5rem); }
.page-home .sec.is-h .sec-card__icon { margin-top: 0; }
.page-home .sec.is-h .sec-card__text { color: color-mix(in srgb, var(--c-white) 82%, transparent); }
.page-home .sec.is-h .sec-card__n { display: none; }
.page-home .sec.is-h .sec__meter { display: flex; align-items: center; gap: 1rem; margin-top: 1.75rem; color: var(--fg-3); }
.page-home .sec.is-h .sec__head { flex-basis: min(38rem, 40vw); }
.page-home .sec.is-h .sec__head .shead__title { font-size: clamp(2.5rem, 1rem + 3vw, 3.75rem); max-width: none; }
/* closing tile: resolves the horizontal sequence */
.page-home .sec-all { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.75rem; height: 100%; min-height: 220px; padding: 2rem; border-radius: var(--r-xl); border: 1px solid color-mix(in srgb, var(--c-white) 12%, transparent); background: radial-gradient(90% 70% at 80% 10%, color-mix(in srgb, var(--c-accent) 35%, transparent), transparent 70%), var(--c-ink-1); color: var(--c-white); text-decoration: none; transition: border-color var(--dur-2), background-color var(--dur-2); }
.page-home .sec-all:hover { border-color: var(--c-accent-400); }
.page-home .sec-all__icon { position: absolute; top: 2rem; left: 2rem; display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--grad-fill); color: var(--c-on-accent); transition: transform 0.6s var(--ease-out); }
.page-home .sec-all:hover .sec-all__icon { transform: rotate(45deg); }
.page-home .sec-all__kicker { color: var(--c-on-dark-2); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.75rem; }
.page-home .sec-all__title { font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem); font-weight: 650; letter-spacing: -0.035em; line-height: 1.05; }
.page-home .sec__track > .sec-card--all { grid-column: 1 / -1; }
.page-home .sec.is-h .sec-card--all { width: clamp(260px, 20vw, 320px); }
.page-home .sec__bar { position: relative; flex: 1; max-width: 280px; height: 2px; background: color-mix(in srgb, var(--c-white) 12%, transparent); border-radius: 2px; overflow: hidden; }
.page-home .sec__bar span { position: absolute; inset: 0; background: var(--grad-brand); transform: scaleX(0); transform-origin: 0 50%; }

/* ============================================================== 8 · VALUES */
/* =========================================================== 9 · ESTIMATE */
.page-home .ex { overflow: hidden; }
.page-home .ex__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(45% 50% at 85% 20%, color-mix(in srgb, var(--c-accent) 24%, transparent), color-mix(in srgb, var(--c-accent) 0%, transparent) 70%),
    radial-gradient(40% 40% at 10% 90%, color-mix(in srgb, var(--c-accent-300) 12%, transparent), color-mix(in srgb, var(--c-accent-300) 0%, transparent) 70%);
}
.page-home .ex__intro { position: relative; display: grid; gap: 1.75rem 4rem; align-items: end; margin-bottom: clamp(2.5rem, 2rem + 2.5vw, 4.5rem); }
@media (min-width: 1000px) { .page-home .ex__intro { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.page-home .ex__intro .shead { margin-bottom: 0; }
.page-home .ex__intro .shead__title { max-width: 15ch; }
.page-home .ex__lede { font-size: var(--fs-body-lg); line-height: 1.55; color: var(--fg-2); margin-bottom: 1.25rem; }
.page-home .ex__points { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; font-size: var(--fs-small); }
.page-home .ex__points li { display: flex; gap: 0.8rem; align-items: flex-start; color: var(--fg-2); }
.page-home .ex__points .icon { flex: none; margin-top: 0.2rem; color: var(--c-accent-400); }
.page-home .calc {
  position: relative;
  display: grid;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, color-mix(in srgb, var(--c-ink-3) 92%, transparent), color-mix(in srgb, var(--c-ink-1) 96%, transparent));
  border: 1px solid color-mix(in srgb, var(--c-white) 10%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-accent-400) 6%, transparent), 0 50px 120px -40px color-mix(in srgb, var(--c-accent) 55%, transparent), inset 0 1px 0 color-mix(in srgb, var(--c-white) 6%, transparent);
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}
.page-home .calc__inputs, .page-home .calc__summary { display: grid; gap: 1.6rem; align-content: start; padding: clamp(1.25rem, 0.8rem + 2vw, 2.5rem); min-width: 0; }
.page-home .calc__summary {
  position: relative;
  align-content: space-between;
  background:
    radial-gradient(120% 70% at 100% 0%, color-mix(in srgb, var(--c-accent) 38%, transparent), color-mix(in srgb, var(--c-accent) 0%, transparent) 60%),
    radial-gradient(90% 60% at 0% 100%, color-mix(in srgb, var(--c-accent-300) 16%, transparent), color-mix(in srgb, var(--c-accent-300) 0%, transparent) 60%),
    color-mix(in srgb, var(--c-white) 2.5%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--c-white) 8%, transparent);
}
@media (min-width: 1000px) {
  .page-home .calc { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .page-home .calc__summary { border-top: 0; border-left: 1px solid color-mix(in srgb, var(--c-white) 8%, transparent); }
}
.page-home .calc__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.page-home .calc__title { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 1.1875rem; font-weight: 620; letter-spacing: -0.02em; }
.page-home .calc__title .icon { color: var(--c-accent-400); }
.page-home .calc__badge { color: var(--fg-3); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.14em; }
.page-home .calc__label { display: block; margin-bottom: 0.55rem; font-size: var(--fs-small); font-weight: 560; color: var(--fg-2); }
.page-home .calc__pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 0.6rem; }
.page-home .calc__swap { display: inline-grid; place-items: center; width: 44px; height: 48px; border-radius: 50%; color: var(--c-accent-400); transition: background-color var(--dur-2), transform 0.5s var(--ease-out); }
.page-home .calc__swap:hover { background: color-mix(in srgb, var(--c-white) 8%, transparent); }
.page-home .calc__swap.is-swapped { transform: rotate(180deg); }
.page-home .calc__words-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.page-home .calc__words-top .calc__label { margin: 0; }
.page-home .calc__num { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--fg-3); font-size: var(--fs-small); }
.page-home .calc__num .input { width: 8.5rem; min-height: 48px; text-align: right; font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.page-home .calc__range {
  --p: 33.3%;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 44px;
  margin: 0.6rem 0 0;
  background: transparent;
  cursor: pointer;
}
.page-home .calc__range::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--c-accent), var(--c-accent-400) calc(var(--p) * 0.7), var(--c-accent-300) var(--p), color-mix(in srgb, var(--c-white) 12%, transparent) var(--p)); }
.page-home .calc__range::-moz-range-track { height: 6px; border-radius: 6px; background: color-mix(in srgb, var(--c-white) 12%, transparent); }
.page-home .calc__range::-moz-range-progress { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--c-accent), var(--c-accent-300)); }
.page-home .calc__range::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -10px; border-radius: 50%; background: var(--c-white); border: 0; box-shadow: 0 0 0 6px color-mix(in srgb, var(--c-accent-400) 22%, transparent), 0 6px 18px rgba(0, 0, 0, 0.5); transition: box-shadow var(--dur-2); }
.page-home .calc__range::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: var(--c-white); border: 0; box-shadow: 0 0 0 6px color-mix(in srgb, var(--c-accent-400) 22%, transparent), 0 6px 18px rgba(0, 0, 0, 0.5); }
.page-home .calc__range:hover::-webkit-slider-thumb { box-shadow: 0 0 0 9px color-mix(in srgb, var(--c-accent-400) 28%, transparent), 0 6px 18px rgba(0, 0, 0, 0.5); }
.page-home .calc__range:focus-visible { outline: none; }
.page-home .calc__range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--c-black), 0 0 0 5px var(--c-accent-400); }
.page-home .calc__scale { display: flex; justify-content: space-between; color: var(--fg-3); font-size: 0.6875rem; letter-spacing: 0.08em; padding-inline: 4px; }
.page-home .calc__tiers { border: 0; padding: 0; margin: 0; min-width: 0; }
.page-home .calc__tier-grid { display: grid; gap: 0.6rem; }
@media (min-width: 640px) { .page-home .calc__tier-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.page-home .calc__amount-wrap { display: block; }
.page-home .tier { position: relative; display: block; cursor: pointer; }
.page-home .tier input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.page-home .tier__box {
  display: grid;
  gap: 0.45rem;
  height: 100%;
  padding: 1rem 1.05rem;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--c-white) 12%, transparent);
  background: color-mix(in srgb, var(--c-white) 3%, transparent);
  transition: border-color var(--dur-2), background-color var(--dur-2), box-shadow var(--dur-3);
}
.page-home .tier:hover .tier__box { border-color: color-mix(in srgb, var(--c-white) 28%, transparent); }
.page-home .tier input:checked + .tier__box { border-color: var(--c-accent-400); background: color-mix(in srgb, var(--c-accent-400) 10%, transparent); box-shadow: 0 0 0 1px var(--c-accent-400), 0 18px 40px -20px color-mix(in srgb, var(--c-accent) 80%, transparent); }
.page-home .tier input:focus-visible + .tier__box { outline: 2px solid var(--c-accent-400); outline-offset: 3px; }
.page-home .tier__top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 0.5rem; }
@media (min-width: 640px) { .page-home .tier__top { display: grid; justify-content: start; } }
.page-home .tier__name { font-weight: 640; font-size: 1.0625rem; letter-spacing: -0.015em; }
.page-home .tier__price { color: var(--c-accent-400); font-size: 0.75rem; letter-spacing: 0.02em; }
.page-home .tier__text { color: var(--fg-2); font-size: 0.875rem; line-height: 1.45; }
.page-home .calc__more { margin-top: -0.75rem; }
.page-home .calc__more-sum {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  color: var(--c-accent-400);
  font-size: var(--fs-small);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.page-home .calc__more-sum::-webkit-details-marker { display: none; }
.page-home .calc__more-sum .icon { transition: transform var(--dur-3) var(--ease-out); }
.page-home .calc__more[open] .calc__more-sum .icon { transform: rotate(180deg); }
.page-home .calc__egs { margin-top: 0.4rem; }
.page-home .calc[data-tier] .calc__eg { display: none; }
.page-home .calc[data-tier="Standard"] .calc__eg[data-eg="Standard"],
.page-home .calc[data-tier="Premium"] .calc__eg[data-eg="Premium"],
.page-home .calc[data-tier="Elite"] .calc__eg[data-eg="Elite"] { display: block; }
.page-home .calc__eg { padding: 1rem 1.1rem; border-radius: 16px; background: color-mix(in srgb, var(--c-white) 3%, transparent); border: 1px dashed color-mix(in srgb, var(--c-white) 10%, transparent); }
.page-home .calc__eg + .calc__eg { margin-top: 0.6rem; }
.page-home .calc__eg-title { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 0.7rem; }
.page-home .calc__eg ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem 1.5rem; }
@media (min-width: 640px) { .page-home .calc__eg ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.page-home .calc__eg li { display: flex; gap: 0.5rem; font-size: 0.875rem; line-height: 1.45; color: var(--fg-2); }
.page-home .calc__eg .icon { flex: none; margin-top: 0.2rem; color: var(--c-accent-300); }
.page-home .calc__result { padding-top: 0.25rem; }
.page-home .calc__out { display: grid; gap: 0.35rem; }
.page-home .calc__from { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-2); }
.page-home .calc__amount {
  display: block;
  font-size: clamp(3rem, 1.6rem + 4.6vw, 5.75rem);
  font-weight: 650;
  letter-spacing: -0.055em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, var(--c-white) 30%, var(--c-accent-200) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-bottom: 0.06em;
}
.page-home .calc__formula { margin-top: 0.6rem; color: var(--fg-3); font-size: 0.75rem; letter-spacing: 0.06em; }
.page-home .calc__note { display: flex; gap: 0.7rem; align-items: flex-start; padding: 1rem 1.1rem; border-radius: 16px; background: color-mix(in srgb, var(--c-accent-400) 8%, transparent); border: 1px solid color-mix(in srgb, var(--c-accent-400) 20%, transparent); color: var(--fg-2); font-size: 0.875rem; line-height: 1.5; }
.page-home .calc__note .icon { flex: none; margin-top: 0.1rem; color: var(--c-accent-400); }
.page-home .calc__cta { display: grid; gap: 0.8rem; justify-items: start; }
@media (min-width: 1000px) { .page-home .calc__cta .btn { width: 100%; } .page-home .calc__cta { justify-items: stretch; text-align: center; } }
.page-home .calc__cta-note { color: var(--fg-3); font-size: var(--fs-small); }
@media (max-width: 559px) {
  .page-home .calc__pair { grid-template-columns: minmax(0, 1fr); }
  .page-home .calc__swap { justify-self: center; transform: rotate(90deg); height: 44px; }
  .page-home .calc__swap.is-swapped { transform: rotate(270deg); }
  .page-home .calc__cta .btn { width: 100%; }
}

/* ======================================================== 10 · HOW IT WORKS */
.page-home .hw__wrap { position: relative; }
.page-home .hw__svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.page-home .hw__track { fill: none; stroke: var(--c-paper-2); stroke-width: 2; stroke-dasharray: 2 8; stroke-linecap: round; }
.page-home .hw__path { fill: none; stroke: url(#hw-grad); stroke-width: 3; stroke-linecap: round; }
.page-home .hw__head { fill: var(--c-white); stroke: var(--c-accent); stroke-width: 3; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--c-accent) 60%, transparent)); }
.page-home .hw__list { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 2.5rem; }
.page-home .hw__step { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 1.25rem; row-gap: 0.4rem; align-content: start; }
.page-home .hw__node {
  grid-row: span 3;
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--c-white);
  border: 1px solid var(--border-strong);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--fg-2);
  transition: background 0.6s var(--ease-out), color 0.6s var(--ease-out), border-color 0.6s, box-shadow 0.8s var(--ease-out), transform 0.8s var(--ease-spring);
}
.page-home .hw__step.is-on .hw__node,
.page-home .hw:not(.is-live) .hw__node { background: var(--grad-fill); color: var(--c-on-accent); border-color: transparent; box-shadow: 0 14px 34px -12px color-mix(in srgb, var(--c-accent) 70%, transparent); }
.page-home .hw__step.is-on .hw__node { transform: scale(1.06); }
.page-home .hw__k { color: var(--accent); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.6875rem; padding-top: 0.35rem; }
.page-home .hw__title { font-size: var(--fs-h-sm); font-weight: 640; letter-spacing: -0.025em; line-height: 1.2; }
.page-home .hw__text { color: var(--fg-2); line-height: 1.6; max-width: 36ch; }
@media (min-width: 960px) {
  .page-home .hw__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5rem; }
  .page-home .hw__step { grid-template-columns: minmax(0, 1fr); row-gap: 0.6rem; }
  .page-home .hw__node { grid-row: auto; margin-bottom: 1.75rem; }
}
.page-home .hw__cta { margin-top: clamp(3rem, 2rem + 3vw, 5rem); display: flex; justify-content: center; }

/* ================================================================ 11 · TRUST */
.page-home .tx { overflow: hidden; }
.page-home .tx__head { text-align: center; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.page-home .tx__title { font-size: var(--fs-h-md); font-weight: 640; letter-spacing: -0.035em; line-height: 1.1; }
.page-home .tx__sub { margin-top: 0.75rem; color: var(--fg-2); }
.page-home .tx__marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.page-home .tx__track { display: flex; width: max-content; }
.page-home .tx__group { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; }
.page-home .tx__logo { display: grid; place-items: center; height: clamp(84px, 70px + 2vw, 112px); padding-inline: clamp(1.75rem, 1rem + 2.4vw, 3.5rem); }
.page-home .tx__logo-pic { display: block; }
.page-home .tx__logo img { height: var(--h, 40px); width: auto; filter: invert(1) brightness(1.1); opacity: 0.62; transition: opacity var(--dur-3); }
.page-home .tx__logo:hover img { opacity: 1; }
.motion .page-home .tx__track { animation: tx-marquee 46s linear infinite; }
.page-home .tx__marquee:hover .tx__track,
.page-home .tx__marquee:focus-within .tx__track,
.page-home .tx__marquee.is-paused .tx__track { animation-play-state: paused; }
@keyframes tx-marquee { to { transform: translate3d(-50%, 0, 0); } }
.page-home .tx__ctrl { display: none; justify-content: center; margin-top: 1rem; }
.motion.js .page-home .tx__ctrl { display: flex; }
.page-home .tx__toggle { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0 1rem; border-radius: var(--r-pill); color: var(--fg-3); font-size: var(--fs-xs); border: 1px solid color-mix(in srgb, var(--c-white) 12%, transparent); transition: color var(--dur-2), border-color var(--dur-2); }
.page-home .tx__toggle:hover { color: var(--fg); border-color: color-mix(in srgb, var(--c-white) 30%, transparent); }
.page-home .tx__toggle .icon:nth-child(2) { display: none; }
.page-home .tx__toggle[aria-pressed="true"] .icon:nth-child(1) { display: none; }
.page-home .tx__toggle[aria-pressed="true"] .icon:nth-child(2) { display: inline-block; }
html:not(.motion) .page-home .tx__group[aria-hidden="true"] { display: none; }
html:not(.motion) .page-home .tx__track { width: auto; justify-content: center; }
html:not(.motion) .page-home .tx__group { flex-wrap: wrap; justify-content: center; max-width: 1200px; margin-inline: auto; }
html:not(.motion) .page-home .tx__marquee { -webkit-mask-image: none; mask-image: none; }
.page-home .tx__certs { margin-top: clamp(4rem, 3rem + 4vw, 7rem); padding-top: clamp(3rem, 2rem + 3vw, 5rem); border-top: 1px solid color-mix(in srgb, var(--c-white) 8%, transparent); }
.page-home .tx__certs-title { text-align: center; font-size: var(--fs-h-md); font-weight: 640; letter-spacing: -0.035em; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }
.page-home .tx__cert-list { list-style: none; margin: 0; padding: 0; }
.page-home .tx__cert-list .cert { box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-accent-400) 8%, transparent), 0 30px 70px -40px color-mix(in srgb, var(--c-accent) 70%, transparent); }

/* ============================================================ 12 · KEY FACTS */
.page-home .kf__foot { display: flex; gap: 0.6rem; align-items: flex-start; max-width: 60rem; margin-top: 1.25rem; font-size: var(--fs-xs); color: var(--fg-2); line-height: 1.5; }
.page-home .kf__foot .icon { flex: none; margin-top: 0.1rem; color: var(--accent); }

/* ================================================================== 13 · FAQ */

/* ========================================================== 14 · CONTACT CTA */
.page-home .cx { overflow: hidden; padding-block: clamp(5rem, 3rem + 8vw, 11rem); }
.page-home .cx { background: var(--c-shade); }
.page-home .cx__aurora span { opacity: 1; }
.page-home .cx__aurora span:nth-child(1) { left: -15vmax; top: -30vmax; background: radial-gradient(closest-side, var(--c-accent), color-mix(in srgb, var(--c-accent) 0%, transparent) 72%); }
.page-home .cx__aurora span:nth-child(2) { right: -20vmax; top: -10vmax; background: radial-gradient(closest-side, color-mix(in srgb, var(--c-accent-400) 85%, transparent), color-mix(in srgb, var(--c-accent-400) 0%, transparent) 72%); }
.page-home .cx__aurora span:nth-child(3) { left: 20%; bottom: -40vmax; background: radial-gradient(closest-side, color-mix(in srgb, var(--c-accent-300) 85%, transparent), color-mix(in srgb, var(--c-accent-300) 0%, transparent) 72%); }
.page-home .cx__ribbon {
  position: absolute;
  left: 50%; top: 50%;
  width: 150vmax; height: 150vmax;
  margin: -75vmax 0 0 -75vmax;
  z-index: -1;
  pointer-events: none;
  background: conic-gradient(from 210deg at 50% 50%, color-mix(in srgb, var(--c-accent) 0%, transparent) 0deg, color-mix(in srgb, var(--c-accent-400) 32%, transparent) 50deg, color-mix(in srgb, var(--c-accent-300) 26%, transparent) 95deg, color-mix(in srgb, var(--c-accent) 0%, transparent) 150deg, color-mix(in srgb, var(--c-accent) 34%, transparent) 230deg, color-mix(in srgb, var(--c-accent-400) 0%, transparent) 300deg);
  filter: blur(60px);
  opacity: 0.9;
}
.motion .page-home .cx__ribbon { animation: cx-spin 60s linear infinite; }
@keyframes cx-spin { to { transform: rotate(360deg); } }
.page-home .cx::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, var(--c-white) 9%, transparent) 1px, transparent 1.2px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(80% 70% at 50% 40%, #000, transparent);
  mask-image: radial-gradient(80% 70% at 50% 40%, #000, transparent);
}
.page-home .cx__grain {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c-shade) 0%, transparent) 60%, color-mix(in srgb, var(--c-black) 85%, transparent) 100%), linear-gradient(90deg, color-mix(in srgb, var(--c-shade) 45%, transparent) 0%, color-mix(in srgb, var(--c-shade) 0%, transparent) 55%);
}
.page-home .cx__grid { position: relative; display: grid; gap: clamp(2.5rem, 2rem + 3vw, 5rem); align-items: center; }
@media (min-width: 1100px) { .page-home .cx__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }
.page-home .cx__copy { display: grid; gap: 1.5rem; justify-items: start; }
.page-home .cx__title { font-size: clamp(2.6rem, 1.2rem + 4.4vw, 5.75rem); font-weight: 650; letter-spacing: -0.05em; line-height: 0.98; max-width: 13ch; }
.page-home .cx__title em { color: var(--c-accent-300); }
.page-home .cx__intro { font-size: var(--fs-lede); line-height: 1.45; color: color-mix(in srgb, var(--c-white) 82%, transparent); max-width: 34rem; }
.page-home .cx__intro a { color: var(--c-white); }
.page-home .cx__points { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.9rem 2rem; width: 100%; }
@media (min-width: 640px) { .page-home .cx__points { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.page-home .cx__points li, .page-home .cx__points a { display: flex; gap: 0.85rem; align-items: flex-start; color: var(--c-white); text-decoration: none; font-size: var(--fs-small); line-height: 1.45; }
.page-home .cx__points a:hover .cx__k + * , .page-home .cx__points a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.page-home .cx__ico { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: color-mix(in srgb, var(--c-white) 10%, transparent); border: 1px solid color-mix(in srgb, var(--c-white) 16%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.page-home .cx__k { display: block; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: color-mix(in srgb, var(--c-white) 72%, transparent); margin-bottom: 0.15rem; }
.page-home .cx__ctas { margin-top: 0.5rem; }
.page-home .cx__card {
  position: relative;
  padding: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
  border-radius: var(--r-xl);
  background: var(--c-white);
  color: var(--c-text);
  box-shadow: 0 60px 120px -40px rgba(0, 0, 0, 0.6), 0 0 0 1px color-mix(in srgb, var(--c-white) 40%, transparent);
}
.page-home .cx__card-title { font-size: var(--fs-h-sm); font-weight: 640; letter-spacing: -0.025em; margin-bottom: 1.25rem; }
.page-home .cx__card .form__footer { flex-wrap: wrap; }

/* ===================================================== reduced motion extras */
@media (prefers-reduced-motion: reduce) {
  .page-home .hx-in, .page-home .hx__globe { animation: none !important; }
  .page-home .tx__track { animation: none !important; }
  .page-home .cx__ribbon { animation: none !important; }
}

/* ==== 60-inner.css ==== */
/* 60-inner.css — OWNED BY THE INNER AGENT (hub, service, language, sector, about).
   Components are prefixed .in- (markup from templates/service.mjs kit); overrides of shared blocks are
   scoped under .in-page (body class set by the inner templates). */

/* =========================================================================================
   Small shared atoms
   ========================================================================================= */
.in-code {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  height: 26px;
  padding: 0 0.7rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-strong);
  background: color-mix(in srgb, var(--fg) 6%, transparent);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.in-code > span { color: var(--accent); }
.in-flag { width: var(--flag, 32px); height: var(--flag, 32px); box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-white) 22%, transparent), 0 6px 16px -6px rgba(0, 0, 0, 0.6); }
.in-lede { font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.45rem); line-height: 1.38; color: var(--fg); font-weight: 600; letter-spacing: -0.02em; }
.in-lede + p { margin-top: 1.1em; }
.in-page .shead__title em, .in-page .h-md em { color: var(--accent); }
html:has(.in-lnav) { scroll-padding-top: calc(var(--header-h) + 76px); }

/* =========================================================================================
   Heroes
   ========================================================================================= */
.in-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--c-black);
  color: var(--c-on-dark);
  padding-top: calc(var(--header-h) + clamp(1.25rem, 0.75rem + 2vw, 2.5rem));
  padding-bottom: clamp(3rem, 2rem + 4vw, 6rem);
}
.in-hero .aurora span { opacity: 0.34; }
.in-hero__dots {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, var(--c-white) 7%, transparent) 1px, transparent 1.2px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(80% 70% at 70% 15%, #000 0%, transparent 75%);
  mask-image: radial-gradient(80% 70% at 70% 15%, #000 0%, transparent 75%);
}
.in-hero__inner { position: relative; z-index: 1; }
.in-hero .in-hero__crumbs { margin-bottom: clamp(2rem, 1rem + 4vw, 4.5rem); }
.in-hero__crumbs a { color: var(--c-on-dark-2); }
.in-hero__crumbs [aria-current] { color: var(--c-on-dark-2); }
.in-hero__kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--c-accent-400);
}
.in-hero__kicker .icon-badge { color: var(--c-accent-300); }
.in-hero__title {
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
  color: var(--c-white);
  text-wrap: balance;
}
.in-hero__title--xl { font-size: var(--fs-display-xl); }
.in-hero__title--lg { font-size: var(--fs-display-lg); }
.in-hero__title--md { font-size: var(--fs-display-md); }
.in-hero__title em { padding-right: 0; margin-right: -0.02em; }
.in-hero__lede { font-size: var(--fs-lede); line-height: 1.45; color: var(--c-on-dark-2); letter-spacing: -0.012em; max-width: 38rem; }
.in-hero__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem; margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
@media (min-width: 980px) {
  .in-hero__row { grid-template-columns: minmax(0, 36rem) auto; align-items: end; justify-content: space-between; column-gap: 4rem; }
}
@media (max-width: 639.98px) { .in-hero__ctas .btn { flex: 1 1 auto; } }
.in-hero__copy--center { display: flex; flex-direction: column; align-items: center; text-align: center; }
.in-hero__copy--center .in-hero__kicker { justify-content: center; }
.in-hero__copy--center .in-hero__lede { margin-top: clamp(1.25rem, 1rem + 1vw, 2rem); margin-inline: auto; }
.in-hero .in-hero__ctas { grid-column: auto; grid-row: auto; justify-content: flex-start; }
.in-hero .in-hero__ctas--center { justify-content: center; margin-top: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem); }
@media (min-width: 980px) { .in-hero .in-hero__row .in-hero__ctas { justify-content: flex-end; } }

/* frames (product / index / statement) */
.in-hero__media { margin-top: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.in-hero__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-xl);
  border: 1px solid color-mix(in srgb, var(--c-white) 8%, transparent);
  box-shadow: 0 50px 120px -50px color-mix(in srgb, var(--c-accent) 55%, transparent);
  background: var(--c-ink-2);
  transform-origin: 50% 0%;
}
@media (min-width: 640px) { .in-hero__frame { aspect-ratio: 16 / 9; } }
@media (min-width: 1100px) { .in-hero__frame { aspect-ratio: 21 / 9; } .in-hero__frame--letterbox { aspect-ratio: 3 / 1; } }
.in-hero__frame picture { position: absolute; inset: 0; }
.in-hero__frame-img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); }
.in-hero__frame-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, color-mix(in srgb, var(--c-black) 0%, transparent) 45%, color-mix(in srgb, var(--c-black) 55%, transparent) 100%); }
.in-hero__frame--letterbox .in-hero__frame-img { filter: saturate(1.15) brightness(1.12) contrast(1.05); }
.in-hero__frame--letterbox .in-hero__frame-shade { background: linear-gradient(180deg, color-mix(in srgb, var(--c-black) 0%, transparent) 60%, color-mix(in srgb, var(--c-black) 35%, transparent) 100%); }
.in-hero__chips {
  position: absolute;
  left: clamp(0.75rem, 0.4rem + 1.5vw, 2rem);
  right: clamp(0.75rem, 0.4rem + 1.5vw, 2rem);
  bottom: clamp(0.75rem, 0.4rem + 1.5vw, 2rem);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.in-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 40px;
  padding: 0 1rem;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--c-ink-1) 55%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid color-mix(in srgb, var(--c-white) 16%, transparent);
  color: var(--c-white);
  font-size: var(--fs-small);
  font-weight: 560;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.in-chip .icon { color: var(--c-accent-300); }
@media (max-width: 639.98px) {
  .in-chip { height: 32px; padding: 0 0.75rem; font-size: 0.8125rem; }
  .in-hero__chips .in-chip:nth-child(n + 3) { display: none; }
}

/* --- city (language pages) --- */
.in-hero--city {
  display: flex;
  flex-direction: column;
  min-height: max(640px, min(100svh, 1040px));
  padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}
.in-hero--city .in-hero__inner { flex: 1; display: flex; flex-direction: column; }
.in-hero--city .in-hero__copy { margin-top: auto; }
.in-hero__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: var(--c-ink-1); }
.in-hero__bg-inner, .in-hero__bg picture { position: absolute; inset: 0; }
.in-hero__bg-inner { transform-origin: 60% 40%; }
.in-hero__img { width: 100%; height: 100%; object-fit: cover; }
.in-hero__bg--none { background: radial-gradient(70% 60% at 75% 20%, color-mix(in srgb, var(--c-accent) 45%, transparent), transparent 70%), radial-gradient(50% 50% at 10% 90%, color-mix(in srgb, var(--c-accent-300) 25%, transparent), transparent 70%), var(--c-black); }
.in-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--c-black) 80%, transparent) 0, color-mix(in srgb, var(--c-black) 60%, transparent) 150px, color-mix(in srgb, var(--c-black) 22%, transparent) 260px, color-mix(in srgb, var(--c-black) 0%, transparent) 340px),
    linear-gradient(0deg, var(--c-black) 0%, color-mix(in srgb, var(--c-black) 88%, transparent) 20%, color-mix(in srgb, var(--c-black) 40%, transparent) 50%, color-mix(in srgb, var(--c-black) 0%, transparent) 72%),
    linear-gradient(90deg, color-mix(in srgb, var(--c-black) 72%, transparent) 0%, color-mix(in srgb, var(--c-black) 22%, transparent) 48%, color-mix(in srgb, var(--c-black) 0%, transparent) 72%);
}
.in-hero__native {
  display: block;
  width: fit-content;
  margin: 0 0 0.04em -0.05em;
  padding: 0 0.1em 0.06em 0.02em;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(4.25rem, 1.4rem + 11.5vw, 13rem);
  line-height: 0.92;
  letter-spacing: -0.025em;
  background: linear-gradient(180deg, var(--c-white) 25%, var(--c-accent-300) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  white-space: nowrap;
}
.in-hero--city .in-hero__title { font-size: var(--fs-display-md); max-width: 16ch; }
.in-hero--city .in-hero__kicker { color: var(--c-white); }
.in-hero__kicker-txt { color: var(--c-on-dark); }
.in-hero--city .in-code { border-color: color-mix(in srgb, var(--c-white) 22%, transparent); background: color-mix(in srgb, var(--c-black) 60%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--c-white); }
.in-hero--city .in-code > span { color: var(--c-accent-300); }
.in-hero__cue--unused {
  position: absolute;
  left: 50%;
  bottom: 1.1rem;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-on-dark-3);
}
.in-hero__cue i { position: relative; display: block; width: 1px; height: 34px; overflow: hidden; background: color-mix(in srgb, var(--c-white) 16%, transparent); }
.in-hero__cue i::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 100%; background: var(--c-accent-400); animation: in-cue 2.2s var(--ease-in-out) infinite; }
@keyframes in-cue { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }
@media (min-width: 1100px) and (min-height: 760px) { .in-hero__cue--unused { display: flex; } }

/* --- product (service pages) --- */
.in-hero--product .in-hero__title { max-width: 13ch; }

/* --- editorial (sector pages) --- */
.in-hero__grid { display: grid; gap: clamp(2rem, 1rem + 3vw, 4rem); }
@media (min-width: 1000px) {
  .in-hero--editorial .in-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; }
}
.in-hero--editorial .in-hero__title { max-width: 12ch; }
.in-hero--editorial .in-hero__title--md { max-width: 15ch; }
.in-hero--editorial .in-hero__lede { margin-top: clamp(1.25rem, 1rem + 1vw, 2rem); }
.in-hero--editorial .in-hero__ctas { margin-top: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem); }
.in-hero__portrait {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-xl);
  border: 1px solid color-mix(in srgb, var(--c-white) 10%, transparent);
  box-shadow: 0 60px 120px -60px color-mix(in srgb, var(--c-accent) 65%, transparent);
  background: var(--c-ink-2);
  transform-origin: 50% 50%;
}
@media (min-width: 1000px) { .in-hero__portrait { aspect-ratio: 4 / 5; max-height: calc(100svh - var(--header-h) - 7rem); width: 100%; justify-self: end; } }
.in-hero__portrait picture { position: absolute; inset: 0; }
.in-hero__portrait-img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); }
.in-hero__portrait::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, color-mix(in srgb, var(--c-black) 25%, transparent), color-mix(in srgb, var(--c-black) 0%, transparent) 30%, color-mix(in srgb, var(--c-black) 0%, transparent) 70%, color-mix(in srgb, var(--c-black) 35%, transparent)); }
.in-hero__portrait-tag { position: absolute; top: 1rem; right: 1rem; z-index: 1; color: var(--c-white); border-color: color-mix(in srgb, var(--c-white) 22%, transparent); background: color-mix(in srgb, var(--c-black) 45%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
/* intentional no-photo variant */
.in-hero__emblem { position: relative; display: grid; place-items: center; aspect-ratio: 1; width: min(100%, 440px); justify-self: center; }
.in-hero__emblem-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--c-accent-300) 22%, transparent); background: radial-gradient(closest-side, color-mix(in srgb, var(--c-accent) 22%, transparent), transparent 70%); }
.in-hero__emblem-ring--2 { inset: 18%; border-color: color-mix(in srgb, var(--c-accent-200) 25%, transparent); background: none; }
.in-hero__emblem-core { position: relative; display: grid; place-items: center; width: 42%; aspect-ratio: 1; border-radius: 32%; color: var(--c-on-accent); background: var(--grad-fill); box-shadow: 0 40px 90px -30px color-mix(in srgb, var(--c-accent) 90%, transparent), inset 0 1px 0 color-mix(in srgb, var(--c-white) 35%, transparent); }

/* --- index (services & sectors hubs) --- */
@media (min-width: 1000px) {
  .in-hero--index .in-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: end; column-gap: clamp(3rem, 2rem + 3vw, 6rem); }
}
.in-hero--index .in-hero__title { max-width: 17ch; font-size: min(var(--fs-display-lg), 5.5rem); }
.in-hero--index .in-hero__lede { margin-top: clamp(1.25rem, 1rem + 1vw, 2rem); }
.in-hero--index .in-hero__ctas { margin-top: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem); }
.in-index__head { display: block; margin-bottom: 0.75rem; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-on-dark-3); border: 0; background: none; padding: 0; height: auto; }
.in-index__list { border-top: 1px solid color-mix(in srgb, var(--c-white) 14%, transparent); }
.in-index__link {
  display: grid;
  grid-template-columns: 2rem auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.85rem;
  min-height: 56px;
  padding: 0.55rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--c-white) 10%, transparent);
  color: var(--c-white);
  text-decoration: none;
  font-size: 1.0625rem;
  font-weight: 560;
  letter-spacing: -0.015em;
}
.in-index__n { font-family: var(--font-mono); font-size: 0.75rem; color: var(--c-on-dark-3); }
.in-index__icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; color: var(--c-accent-300); background: color-mix(in srgb, var(--c-white) 6%, transparent); border: 1px solid color-mix(in srgb, var(--c-white) 10%, transparent); }
.in-index__arrow { color: var(--c-on-dark-3); transition: transform var(--dur-3) var(--ease-out), color var(--dur-2); }
.in-index__link:hover .in-index__label { color: var(--c-accent-300); }
.in-index__link:hover .in-index__arrow { color: var(--c-accent-400); transform: translateX(4px); }

/* --- marquee (languages hub, intentional no-photo variant) --- */
.in-hero--marquee { padding-bottom: 0; }
.in-hero__ghost { position: absolute; inset: 0; z-index: -2; opacity: 0.16; filter: contrast(1.05); -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 35%, #000 55%, transparent 90%); mask-image: linear-gradient(180deg, transparent 0%, #000 35%, #000 55%, transparent 90%); }
.in-hero__ghost picture { position: absolute; inset: 0; }
.in-hero__ghost-img { width: 100%; height: 100%; object-fit: cover; }
.in-hero--marquee .in-hero__title { max-width: 11ch; }
.in-hero__actions { display: flex; flex-direction: column; gap: 1rem; align-items: stretch; }
@media (min-width: 980px) { .in-hero__actions { align-items: flex-end; } .in-hero__actions .btn-row { justify-content: flex-end; } }
.in-hero__search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: min(100%, 30rem);
  height: 60px;
  padding: 0 0.4rem 0 1.15rem;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--c-white) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-white) 20%, transparent);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  color: var(--c-on-dark-2);
  transition: border-color var(--dur-2), box-shadow var(--dur-2), background-color var(--dur-2);
}
.in-hero__search:focus-within { border-color: var(--c-accent-400); background: color-mix(in srgb, var(--c-white) 11%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-accent-400) 25%, transparent); }
.in-hero__search .icon { flex: none; }
.in-hero__search-input { flex: 1; width: 100%; min-width: 0; height: 100%; padding: 0; border: 0; outline: none; background: none; color: var(--c-white); font-size: 1.0625rem; }
.in-hero__search-input:focus-visible { outline: none; }
.in-hero__search-input::placeholder { color: var(--c-on-dark-3); }
.in-hero__search-input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.in-hero__search-go { display: inline-flex; align-items: center; gap: 0.4rem; flex: none; height: 48px; padding: 0 1.15rem; border-radius: var(--r-pill); background: var(--c-accent); color: var(--c-on-accent); font-weight: 600; font-size: 0.9375rem; transition: background-color var(--dur-2); }
.in-hero__search-go:hover { background: var(--c-fill-a); }
.in-marquee { position: relative; margin-top: clamp(3rem, 2rem + 4vw, 6rem); padding-bottom: clamp(3rem, 2rem + 3vw, 4.5rem); }
.in-marquee__rows { display: grid; gap: 0.15em; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.in-marquee__row { overflow: hidden; }
.in-marquee__track { display: flex; width: max-content; animation: in-marq 70s linear infinite; will-change: transform; }
.in-marquee__row--2 .in-marquee__track { animation-direction: reverse; animation-duration: 85s; }
.in-marquee__row--3 .in-marquee__track { animation-duration: 100s; }
.in-marquee__seq { display: flex; align-items: center; flex: none; }
.in-marquee__w { padding: 0 0.04em; font-size: clamp(2.25rem, 1.1rem + 4.6vw, 6rem); font-weight: 620; letter-spacing: -0.035em; line-height: 1.22; color: color-mix(in srgb, var(--c-white) 16%, transparent); white-space: nowrap; }
.in-marquee__row--2 .in-marquee__w { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; color: color-mix(in srgb, var(--c-accent-300) 42%, transparent); }
.in-marquee__row--3 .in-marquee__w { color: color-mix(in srgb, var(--c-white) 9%, transparent); }
.in-marquee__dot { flex: none; width: 0.16em; height: 0.16em; margin-inline: 0.42em; border-radius: 50%; background: color-mix(in srgb, var(--c-accent-400) 45%, transparent); font-size: clamp(2.25rem, 1.1rem + 4.6vw, 6rem); }
@keyframes in-marq { to { transform: translate3d(-50%, 0, 0); } }
.in-marquee.is-paused .in-marquee__track, .in-marquee.is-offscreen .in-marquee__track { animation-play-state: paused; }
.in-marquee__toggle {
  position: absolute;
  right: var(--gutter);
  bottom: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0 1rem;
  border-radius: var(--r-pill);
  border: 1px solid color-mix(in srgb, var(--c-white) 16%, transparent);
  background: color-mix(in srgb, var(--c-ink-1) 60%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--c-on-dark-2);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.in-marquee__toggle:hover { color: var(--c-white); border-color: color-mix(in srgb, var(--c-white) 30%, transparent); }
.in-marquee__i-play { display: none; }
.in-marquee.is-paused .in-marquee__i-play { display: block; }
.in-marquee.is-paused .in-marquee__i-pause { display: none; }
html:not(.js) .in-marquee__toggle { display: none; }

/* --- statement (about) --- */
.in-hero--statement .in-hero__title { max-width: 12ch; }

/* =========================================================================================
   Local nav (sticky, scroll-spy)
   ========================================================================================= */
.in-lnav {
  position: sticky;
  top: var(--header-h);
  z-index: 80;
  color: var(--fg);
}
.in-lnav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--c-ink-1) 78%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-block: 1px solid var(--border);
  transition: background-color 0.4s var(--ease-out);
}
.in-lnav[data-theme="light"]::before { background: color-mix(in srgb, var(--c-white) 86%, transparent); }
.in-lnav__inner { display: flex; align-items: center; gap: clamp(0.75rem, 0.5rem + 1.5vw, 2rem); height: 56px; }
.in-lnav__title { display: inline-flex; align-items: center; gap: 0.55rem; flex: none; min-height: 44px; color: var(--fg); font-weight: 650; font-size: 1.0625rem; letter-spacing: -0.022em; text-decoration: none; white-space: nowrap; }
.in-lnav__title .in-flag { box-shadow: 0 0 0 1px var(--border-strong); }
.in-lnav__icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; color: var(--c-on-accent); background: var(--grad-fill); }
.in-lnav__scroller { position: relative; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.in-lnav__scroller::-webkit-scrollbar { display: none; }
.in-lnav__list { display: flex; width: max-content; margin-left: auto; gap: 0.1rem; }
.in-lnav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 0.8rem;
  color: var(--fg-2);
  font-size: 0.8125rem;
  font-weight: 560;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-2);
}
.in-lnav__link::before { content: ""; position: absolute; inset: 6px 0; z-index: -1; border-radius: var(--r-pill); background: color-mix(in srgb, var(--fg) 9%, transparent); opacity: 0; transform: scale(0.85); transition: opacity var(--dur-2), transform 0.4s var(--ease-out); }
.in-lnav__link:hover { color: var(--fg); }
.in-lnav__link.is-active { color: var(--fg); }
.in-lnav__link.is-active::before { opacity: 1; transform: none; }
.in-lnav__link:focus-visible { outline-offset: -4px; border-radius: var(--r-pill); }
.in-lnav__cta { flex: none; }
.in-lnav__cta.btn--sm { --btn-h: 34px; padding: 0 0.95rem; font-size: 0.8125rem; }
@media (max-width: 767.98px) {
  .in-lnav__cta { display: none; }
  .in-lnav__inner { height: 52px; padding-right: 0; }
  .in-lnav__title { font-size: 0.9375rem; }
  .in-lnav__scroller { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 28px), transparent); }
  .in-lnav .in-lnav__list { padding: 0 1.5rem 0 0.5rem; }
}
@media (max-width: 479.98px) { .in-lnav__title > span:not(.in-flag):not(.in-lnav__icon):not(.sr-only) { display: none; } }

/* =========================================================================================
   In short (answer-first panel)
   ========================================================================================= */
.in-short-sec { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5.5rem); }
.in-short {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  gap: clamp(2rem, 1rem + 3vw, 4.5rem);
  padding: clamp(1.6rem, 1rem + 3vw, 4.25rem);
  border-radius: var(--r-xl);
  border: 1px solid var(--border);
  background: linear-gradient(160deg, color-mix(in srgb, var(--c-white) 6.5%, transparent), color-mix(in srgb, var(--c-white) 1.5%, transparent) 55%, color-mix(in srgb, var(--c-white) 3%, transparent));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--c-white) 6%, transparent);
}
[data-theme="light"] .in-short { background: var(--surface); box-shadow: none; }
.in-short__glow { position: absolute; z-index: -1; left: -12%; top: -55%; width: 62%; aspect-ratio: 1; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, color-mix(in srgb, var(--c-accent) 32%, transparent), transparent 70%); }
.in-short__glow::after { content: ""; position: absolute; left: 120%; top: 90%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--c-accent-300) 14%, transparent), transparent 70%); }
@media (min-width: 1000px) { .in-short--aside { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.in-short__label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 32px;
  padding: 0 0.85rem;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  justify-self: start;
}
.in-short__text {
  margin-top: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);
  font-size: var(--fs-lede);
  font-weight: 480;
  line-height: 1.5;
  letter-spacing: -0.012em;
  color: var(--fg-2);
  max-width: 60ch;
  text-wrap: pretty;
}
.in-short--aside .in-short__text { max-width: 46ch; }
/* single column: chip above the text (no lonely left column) */
.in-short__text strong { font-weight: 680; }
.in-short__text .hl-word { transition: color 0.6s var(--ease-out); }
.motion .in-short__text[data-highlight-ready] .hl-word { color: color-mix(in srgb, var(--c-white) 20%, transparent); }
.motion [data-theme="light"] .in-short__text[data-highlight-ready] .hl-word { color: color-mix(in srgb, var(--c-text) 24%, var(--c-white)); }
.motion .in-short__text[data-highlight-ready] .hl-word.is-lit { color: inherit; }
.in-short__links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: clamp(1.75rem, 1.25rem + 1.5vw, 2.75rem); }
.in-short__link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0 1.1rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-strong);
  background: color-mix(in srgb, var(--fg) 4%, transparent);
  color: var(--fg);
  font-size: var(--fs-small);
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--dur-2), border-color var(--dur-2);
}
.in-short__link .icon { color: var(--accent); transition: transform var(--dur-3) var(--ease-out); }
.in-short__link:hover { background: color-mix(in srgb, var(--fg) 10%, transparent); border-color: var(--fg-3); }
.in-short__link:hover .icon { transform: translateY(2px); }
.in-short__aside { padding-top: clamp(1.5rem, 1rem + 1vw, 2rem); border-top: 1px solid var(--border); }
@media (min-width: 1000px) { .in-short__aside { padding: 0 0 0 clamp(2rem, 1rem + 3vw, 4rem); border-top: 0; border-left: 1px solid var(--border); } }
.in-glance { scroll-margin-top: calc(var(--header-h) + 80px); }
.in-glance__title { font-size: var(--fs-h-xs); font-weight: 650; letter-spacing: -0.02em; line-height: 1.25; margin-bottom: 0.75rem; }
.in-glance__list { display: grid; }
.in-glance__item { display: flex; align-items: flex-start; gap: 0.8rem; padding: 0.85rem 0; border-top: 1px solid var(--border); color: var(--fg-2); line-height: 1.45; }
.in-glance__item:first-child { border-top: 0; }
.in-glance__mark { flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; color: var(--c-on-accent); background: var(--grad-fill); box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--c-accent) 70%, transparent); }

/* Key facts panel (.in-kf) and FAQ (.in-faq) now live in 40-blocks.css: they are the site-wide renderers. */

/* =========================================================================================
   Check lists
   ========================================================================================= */
.in-checks-sec { display: grid; gap: 0 4rem; }
@media (min-width: 1000px) {
  .in-checks-sec:not(.in-checks-sec--solo) { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; }
  .in-checks-sec .in-checks-sec__head { position: sticky; top: calc(var(--header-h) + 56px + 2.5rem); }
}
.in-checks-sec .shead { margin-bottom: 2rem; }
.in-checks { display: grid; column-gap: 2.25rem; border-top: 1px solid var(--border-strong); }
.in-checks--short { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.in-checks--mid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.in-checks--long { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.in-checks__item { display: flex; align-items: flex-start; gap: 0.85rem; padding: 1.1rem 0; border-bottom: 1px solid var(--border); font-weight: 540; line-height: 1.42; color: var(--fg); }
.in-checks__mark { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: var(--c-on-accent); background: var(--grad-fill); box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--c-accent) 60%, transparent); }
.in-checks__item--muted { color: var(--fg-2); font-weight: 500; }
.in-checks__item--muted .in-checks__mark { color: var(--fg-2); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border-strong); }
.in-checks__txt a { color: var(--accent); }

/* =========================================================================================
   Split
   ========================================================================================= */
.in-split { display: grid; gap: clamp(2rem, 1rem + 4vw, 6rem); align-items: center; }
@media (min-width: 960px) {
  .in-split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .in-split--reverse .in-split__media { order: 2; }
  .in-split--long { align-items: start; }
  .in-split--long .in-split__media { position: sticky; top: calc(var(--header-h) + 56px + 2rem); }
  .in-split--noimage { grid-template-columns: minmax(0, 1fr); max-width: 52rem; }
}
.in-split__frame { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--r-xl); background: var(--surface); }
@media (min-width: 960px) { .in-split__frame { aspect-ratio: 5 / 4; } .in-split--long .in-split__frame { aspect-ratio: 4 / 5; max-height: calc(100svh - var(--header-h) - 8rem); width: 100%; } }
.in-split__frame picture { position: absolute; inset: -8% 0; }
.in-split__img { width: 100%; height: 100%; object-fit: cover; }
.in-split__n { position: absolute; top: 1rem; left: 1rem; color: var(--c-white); border-color: color-mix(in srgb, var(--c-white) 25%, transparent); background: color-mix(in srgb, var(--c-black) 40%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.in-split__body .shead { margin-bottom: 1.75rem; }
.in-split__text { font-size: var(--fs-body-lg); line-height: 1.7; color: var(--fg-2); max-width: 58ch; }
.in-split__text p + p { margin-top: 1em; }
.in-split__text .in-lede + p { margin-top: 1.1em; }
.in-split__text strong { color: var(--fg); }
.in-split__text a { color: var(--accent); }
.in-split__cta { margin-top: 2rem; }
@media (min-width: 960px) { .in-split--landscape .in-split__frame { aspect-ratio: 4 / 3; } }
.in-split--landscape .in-split__img { filter: saturate(0.88) contrast(1.02); }
.in-split__lede { margin-top: 1rem; font-size: var(--fs-h-sm); line-height: 1.35; letter-spacing: -0.015em; color: var(--fg-2); max-width: 30ch; }
/* Transcription visual: animated waveform on a dark card */
.in-split__frame--visual { background: var(--c-black); }
.in-wave { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(1.25rem, 0.8rem + 1.6vw, 2rem); color: var(--c-on-dark); background: radial-gradient(120% 90% at 85% 0%, color-mix(in srgb, var(--c-accent) 35%, transparent), transparent 60%), radial-gradient(90% 70% at 0% 100%, color-mix(in srgb, var(--c-accent-300) 18%, transparent), transparent 60%), var(--c-ink-1); }
.in-wave__glow { position: absolute; inset: 30% 10%; background: radial-gradient(closest-side, color-mix(in srgb, var(--c-accent-400) 22%, transparent), transparent); filter: blur(20px); pointer-events: none; }
.in-wave__top { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; }
.in-wave__icon { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--grad-fill); color: var(--c-on-accent); margin-right: auto; }
.in-wave__top .in-code { color: var(--c-on-dark-2); border-color: color-mix(in srgb, var(--c-white) 18%, transparent); }
.in-wave__bars { position: relative; display: flex; align-items: center; gap: clamp(2px, 0.35vw, 5px); height: 42%; }
.in-wave__bars span { flex: 1; height: var(--h); border-radius: 99px; background: linear-gradient(180deg, var(--c-accent-300), var(--c-accent) 55%, var(--c-accent-300)); transform-origin: 50% 50%; }
.motion .is-in .in-wave__bars span { animation: in-wave 1.3s var(--ease-in-out) var(--d) 3 alternate both; }
@keyframes in-wave { from { transform: scaleY(0.35); opacity: 0.7; } to { transform: scaleY(1); opacity: 1; } }
.in-wave__speakers { position: relative; display: flex; flex-wrap: wrap; gap: 0.4rem; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-on-dark-2); }
.in-wave__speakers li { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.7rem; border-radius: 99px; border: 1px solid color-mix(in srgb, var(--c-white) 14%, transparent); background: color-mix(in srgb, var(--c-white) 4%, transparent); }
.in-wave__speakers span { width: 6px; height: 6px; border-radius: 50%; background: var(--c-accent-300); }
.in-wave__speakers li:nth-child(2) span { background: var(--c-accent-400); }
.in-wave__speakers li:nth-child(3) span { background: var(--c-accent); }
.in-split__frame--visual .in-split__n { top: auto; bottom: 1rem; left: auto; right: 1rem; display: none; }
@media (prefers-reduced-motion: reduce) { .in-wave__bars span { animation: none; } }

/* =========================================================================================
   Image cards, spec grid, value cards
   ========================================================================================= */
.in-icards { display: grid; gap: var(--gap); }
@media (min-width: 700px) { .in-icards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .in-icards--n3 > :first-child { grid-column: span 2; } }
@media (min-width: 1040px) {
  .in-icards--n3, .in-icards--n6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .in-icards--n3 > :first-child { grid-column: auto; }
  .in-icards--n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.in-icard {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  isolation: isolate;
  background: var(--surface);
  border: 1px solid var(--border);
  transition: transform 0.6s var(--ease-out), border-color var(--dur-3), box-shadow var(--dur-3);
}
.in-icard > * { position: relative; z-index: 1; }
.in-icard--link:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: var(--shadow-md); }
[data-theme="dark"] .in-icard--link:hover { box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8), 0 0 0 1px color-mix(in srgb, var(--c-accent-400) 20%, transparent); }
.in-icard:has(.in-icard__link:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
.in-icard__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-2); }
@media (min-width: 700px) and (max-width: 1039.98px) { .in-icards--n3 > :first-child .in-icard__media { aspect-ratio: 21 / 9; } }
.in-icard__media picture { position: absolute; inset: 0; }
.in-icard__img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.in-icard--link:hover .in-icard__img { transform: scale(1.05); }
.in-icard__shade { position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--c-black) 42%, transparent), color-mix(in srgb, var(--c-black) 0%, transparent) 42%); }
.in-icard__n { position: absolute; top: 1rem; left: 1rem; color: var(--c-white); border-color: color-mix(in srgb, var(--c-white) 25%, transparent); background: color-mix(in srgb, var(--c-black) 35%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.in-icard__icon { position: absolute; top: 0.85rem; right: 0.85rem; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: var(--c-white); background: color-mix(in srgb, var(--c-black) 40%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid color-mix(in srgb, var(--c-white) 20%, transparent); }
.in-icard__body { display: flex; flex-direction: column; gap: 0.6rem; flex: 1; padding: clamp(1.35rem, 1rem + 1vw, 1.9rem); }
.in-icard__title { font-size: var(--fs-h-sm); font-weight: 650; letter-spacing: -0.024em; line-height: 1.2; }
.in-icard__link { color: inherit; text-decoration: none; }
.in-icard__link:focus-visible { outline: none; }
.in-icard__link::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.in-icard__text { color: var(--fg-2); line-height: 1.55; }
.in-icard__cta { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: auto; padding-top: 0.6rem; color: var(--accent); font-weight: 600; font-size: var(--fs-small); }
.in-icard__cta .icon { transition: transform var(--dur-3) var(--ease-out); }
.in-icard--link:hover .in-icard__cta .icon { transform: translateX(4px); }
.in-icards--compact .in-icard__title { font-size: 1.25rem; }
.in-icards--compact .in-icard__text { font-size: var(--fs-small); }

.in-spec { display: grid; gap: 1px; grid-template-columns: minmax(0, 1fr); background: var(--border); border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; }
@media (min-width: 640px) {
  .in-spec { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 640px) and (max-width: 1039.98px) {
  .in-spec--n3 > :last-child, .in-spec--n5 > :last-child, .in-spec--n7 > :last-child { grid-column: span 2; }
}
@media (min-width: 1040px) {
  .in-spec--n3, .in-spec--n6, .in-spec--n9 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .in-spec--n4, .in-spec--n8, .in-spec--n7 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .in-spec--n7 > :first-child { grid-column: span 2; }
  .in-spec--n5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .in-spec--n5 > :nth-child(-n + 2) { grid-column: span 3; }
  .in-spec--n5 > :nth-child(n + 3) { grid-column: span 2; }
}
.in-spec__item {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem) clamp(1.5rem, 1rem + 1.5vw, 2.25rem) clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
  background: var(--bg);
  transition: background-color 0.4s var(--ease-out);
}
.in-spec__item > * { position: relative; z-index: 1; }
.in-spec__icon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 15px;
  color: var(--c-accent-600);
  background: linear-gradient(140deg, var(--c-accent-050), var(--c-accent-100));
  border: 1px solid color-mix(in srgb, var(--c-accent) 12%, transparent);
}
[data-theme="dark"] .in-spec__icon { color: var(--c-accent-300); background: linear-gradient(140deg, color-mix(in srgb, var(--c-accent) 32%, transparent), color-mix(in srgb, var(--c-accent-300) 14%, transparent)); border-color: color-mix(in srgb, var(--c-white) 10%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--c-white) 8%, transparent); }
.in-spec__title { margin-top: 0.85rem; font-size: 1.1875rem; font-weight: 650; letter-spacing: -0.02em; line-height: 1.25; }
.in-spec__text { color: var(--fg-2); line-height: 1.55; font-size: 0.96875rem; }
.in-spec__link { color: inherit; text-decoration: none; }
.in-spec__link:focus-visible { outline: none; }
.in-spec__link::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.in-spec__item:has(.in-spec__link:focus-visible) { outline: 2px solid var(--focus); outline-offset: -4px; }
.in-spec__item--link:hover { background: var(--surface); }
.in-spec__more { position: absolute; top: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); right: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); color: var(--fg-3); transition: transform var(--dur-3) var(--ease-out), color var(--dur-2); }
.in-spec__item--link:hover .in-spec__more { color: var(--accent); transform: translate(3px, -3px); }
.in-spec__go { display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.35rem; color: var(--accent); font-weight: 600; font-size: var(--fs-small); }
.in-spec__item--link:hover .in-spec__go .icon { transform: translateX(3px); }
.in-spec__go .icon { transition: transform var(--dur-3) var(--ease-out); }
/* phones: compact list rows (icon left, title + text right, hairline dividers) */
@media (max-width: 767.98px) {
  .in-spec__item { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 1rem; row-gap: 0.3rem; padding: 1.25rem 1.25rem 1.35rem; }
  .in-spec__icon { grid-row: span 3; width: 40px; height: 40px; border-radius: 12px; }
  .in-spec__icon .icon { width: 19px; height: 19px; }
  .in-spec__title { margin-top: 0; align-self: center; font-size: 1.0625rem; }
  .in-spec__text { grid-column: 2; font-size: var(--fs-small); }
  .in-spec__go { grid-column: 2; }
  .in-spec__more { top: 1.2rem; right: 1.1rem; }
}

.in-values { display: grid; gap: var(--gap); }
@media (min-width: 900px) { .in-values { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.in-value { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--border); }
.in-value > * { position: relative; z-index: 1; }
.in-value__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.in-value__media picture { position: absolute; inset: 0; }
.in-value__img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out); }
.in-value:hover .in-value__img { transform: scale(1.04); }
.in-value__shade { position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--c-black) 0%, transparent) 55%, color-mix(in srgb, var(--c-black) 18%, transparent)); }
.in-value__body { position: relative; padding: 0 clamp(1.5rem, 1rem + 1.5vw, 2.25rem) clamp(1.5rem, 1rem + 1.5vw, 2.25rem); }
.in-value__icon { position: relative; display: grid; place-items: center; width: 56px; height: 56px; margin-top: -28px; border-radius: 18px; color: var(--c-on-accent); background: var(--grad-fill); box-shadow: 0 16px 36px -14px color-mix(in srgb, var(--c-accent) 80%, transparent), inset 0 1px 0 color-mix(in srgb, var(--c-white) 35%, transparent); }
.in-value__title { margin-top: 1.25rem; font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.5rem); font-weight: 650; letter-spacing: -0.045em; line-height: 1; }
.in-value__dot { color: var(--c-accent-600); }
[data-theme="dark"] .in-value__dot { color: var(--c-accent-300); }
.in-value__text { margin-top: 0.9rem; color: var(--fg-2); line-height: 1.6; }

/* =========================================================================================
   Languages hub: featured gallery, chips, note, variants, finder
   ========================================================================================= */
.in-langs { display: grid; gap: var(--gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1000px) { .in-langs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.in-lang__link { position: relative; isolation: isolate; display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--r-lg); color: var(--c-white); text-decoration: none; background: var(--c-ink-2); }
.in-lang__media, .in-lang__media picture { position: absolute; inset: 0; }
.in-lang__img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); filter: saturate(0.92); transition: transform 1.4s var(--ease-out), filter 0.8s; }
.in-lang__link:hover .in-lang__img { transform: scale(1.08); filter: saturate(1.08); }
.in-lang__shade { position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--c-black) 50%, transparent) 0%, color-mix(in srgb, var(--c-black) 0%, transparent) 28%, color-mix(in srgb, var(--c-black) 10%, transparent) 50%, color-mix(in srgb, var(--c-black) 90%, transparent) 100%); }
.in-lang__top { position: absolute; top: clamp(0.7rem, 0.5rem + 0.8vw, 1.15rem); left: clamp(0.7rem, 0.5rem + 0.8vw, 1.15rem); right: clamp(0.7rem, 0.5rem + 0.8vw, 1.15rem); display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.in-lang__top .in-code { color: var(--c-white); border-color: color-mix(in srgb, var(--c-white) 24%, transparent); background: color-mix(in srgb, var(--c-black) 60%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.in-lang__body { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 0.35rem; padding: clamp(1rem, 0.6rem + 1.2vw, 1.6rem); }
.in-lang__native { font-family: var(--font-serif); font-style: italic; font-size: clamp(2rem, 1.2rem + 2.6vw, 3.5rem); line-height: 0.95; letter-spacing: -0.015em; }
.in-lang__name { display: inline-flex; align-items: center; gap: 0.35rem; font-size: var(--fs-small); font-weight: 550; color: color-mix(in srgb, var(--c-white) 82%, transparent); }
.in-lang__name .icon { transition: transform 0.5s var(--ease-out); }
.in-lang__link:hover .in-lang__name .icon { transform: translate(3px, -3px); }
@media (max-width: 479.98px) { .in-lang__top .in-code { display: none; } }

.in-chips2 { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.in-chip2:not(.in-chip2--main), .in-chip2--main > a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0.62rem 1.1rem;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  line-height: 1.2;
}
.in-chip2__name { font-weight: 600; letter-spacing: -0.012em; }
.in-chip2__native { color: var(--fg-3); font-size: 0.9375rem; }
.in-chip2--main > a { color: var(--fg); text-decoration: none; border-color: transparent; background: linear-gradient(var(--bg), var(--bg)) padding-box, var(--grad-brand-deep) border-box; transition: transform 0.4s var(--ease-out), box-shadow 0.4s; }
.in-chip2--main > a:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--c-accent) 60%, transparent); }
.in-chip2--main .in-chip2__name { color: var(--accent); }
.in-chips-sec__key { display: flex; align-items: center; gap: 0.6rem; margin-top: 1.5rem; color: var(--fg-2); font-size: var(--fs-small); }
.in-chip2__swatch { width: 30px; height: 16px; border-radius: var(--r-pill); border: 1.5px solid transparent; background: linear-gradient(var(--bg), var(--bg)) padding-box, var(--grad-brand-deep) border-box; }
.in-note { display: flex; align-items: flex-start; gap: 1.25rem; max-width: 54rem; margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); padding: clamp(1.25rem, 1rem + 1.2vw, 2.25rem); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); scroll-margin-top: calc(var(--header-h) + 80px); }
.in-note__icon { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; color: var(--c-on-accent); background: var(--grad-fill); }
.in-note__title { font-size: var(--fs-h-sm); letter-spacing: -0.024em; margin-bottom: 0.4rem; }
.in-note__body p { color: var(--fg-2); }
.in-note__body a { color: var(--accent); font-weight: 600; }

.in-variants { display: grid; gap: var(--gap); }
@media (min-width: 760px) { .in-variants { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.in-variant { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.1rem; padding: clamp(1.25rem, 1rem + 1.2vw, 2.25rem); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); }
.in-variant > * { position: relative; z-index: 1; }
.in-variant__n { align-self: start; }
.in-variant__txt { font-size: clamp(1.15rem, 1rem + 0.55vw, 1.55rem); font-weight: 620; letter-spacing: -0.022em; line-height: 1.25; }
.in-variant__vs { margin: 0 0.3em; font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 1.12em; color: var(--accent); }
.in-variant__a--soft { color: var(--fg-2); }
.in-variant__mark { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: var(--c-on-accent); background: var(--grad-fill); }
.in-variants__why { margin-top: clamp(1.75rem, 1.25rem + 1.5vw, 2.75rem); max-width: 62ch; font-size: var(--fs-body-lg); line-height: 1.7; color: var(--fg-2); }

/* language finder */
.in-finder { position: relative; scroll-margin-top: calc(var(--header-h) + 80px); }
html:not(.js) .in-finder__controls { display: none; }
.in-finder__controls { position: relative; z-index: 5; padding-bottom: 1.25rem; margin-bottom: 1.75rem; border-bottom: 1px solid var(--border-strong); }
@media (min-width: 900px) and (min-height: 700px) {
  .in-finder__controls { position: sticky; top: calc(var(--header-h) + 56px); padding-top: 1rem; margin-top: -1rem; background: color-mix(in srgb, var(--c-white) 90%, transparent); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); }
}
.in-finder__top { display: grid; gap: 0.9rem; }
@media (min-width: 900px) { .in-finder__top { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }
.in-finder__search {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: 60px;
  padding: 0 0.45rem 0 1.25rem;
  border-radius: var(--r-pill);
  background: var(--c-white);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-sm);
  color: var(--fg-3);
  transition: border-color var(--dur-2), box-shadow var(--dur-2);
}
.in-finder__search:focus-within { border-color: var(--c-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-accent) 16%, transparent), var(--shadow-sm); }
.in-finder__search .icon { flex: none; }
.in-finder__input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: none; background: none; color: var(--fg); font-size: 1.0625rem; }
.in-finder__input:focus-visible { outline: none; }
.in-finder__input::placeholder { color: var(--fg-3); }
.in-finder__input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.in-finder__kbd { display: grid; place-items: center; min-width: 26px; height: 26px; margin-right: 0.6rem; border-radius: 7px; border: 1px solid var(--border-strong); font-family: var(--font-mono); font-size: 0.75rem; color: var(--fg-3); }
@media (hover: none) { .in-finder__kbd { display: none; } }
.in-finder.has-query .in-finder__kbd { display: none; }
.in-finder__clear { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; color: var(--fg-2); background: var(--c-paper); transition: background-color var(--dur-2); }
.in-finder__clear[hidden] { display: none; }
.in-finder__clear:hover { background: var(--c-paper-2); color: var(--fg); }
.in-finder__filters { display: flex; flex-wrap: wrap; gap: 3px; padding: 4px; border-radius: 26px; background: rgba(0, 0, 0, 0.055); justify-self: start; }
.in-finder__filter { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px; padding: 0 1rem; border-radius: var(--r-pill); color: var(--fg-2); font-size: var(--fs-small); font-weight: 600; transition: background-color var(--dur-2), color var(--dur-2), box-shadow var(--dur-2); }
.in-finder__filter:hover { color: var(--fg); }
.in-finder__filter[aria-pressed="true"] { background: var(--c-white); color: var(--fg); box-shadow: var(--shadow-sm); }
.in-finder__fn { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--fg-2); } /* fg-3 on the tinted pill track fell to 4.1:1 */
.in-finder__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; margin-top: 1rem; }
.in-finder__az { display: flex; flex-wrap: wrap; gap: 2px; }
.in-finder__az-btn { position: relative; display: grid; place-items: center; min-width: 32px; height: 34px; padding: 0 0.35rem; border-radius: 8px; font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; color: var(--fg-2); transition: background-color var(--dur-2), color var(--dur-2), opacity var(--dur-2); }
.in-finder__az-btn--all { padding: 0 0.7rem; font-family: var(--font-sans); font-size: var(--fs-xs); }
.in-finder__az-btn:hover:not(:disabled) { background: rgba(0, 0, 0, 0.06); color: var(--fg); }
.in-finder__az-btn[aria-pressed="true"] { background: var(--c-accent); color: var(--c-on-accent); }
.in-finder__az-btn:disabled { opacity: 0.28; cursor: default; }
.in-finder__az-btn.is-empty:not([aria-pressed="true"]) { opacity: 0.35; }
.in-finder__count { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; color: var(--fg-2); white-space: nowrap; }
@media (max-width: 899.98px) {
  .in-finder__az { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); width: calc(100% + 2 * var(--gutter)); }
  .in-finder__az::-webkit-scrollbar { display: none; }
  .in-finder__az-btn { flex: none; min-width: 40px; height: 44px; }
  .in-finder__filters { width: 100%; }
  .in-finder__filter { flex: 1 1 auto; justify-content: center; padding: 0 0.75rem; }
}
.in-finder__results { position: relative; columns: 1; column-gap: clamp(1.5rem, 1rem + 2vw, 3rem); }
@media (min-width: 560px) { .in-finder__results { columns: 2; } }
@media (min-width: 900px) { .in-finder__results { columns: 3; } }
@media (min-width: 1240px) { .in-finder__results { columns: 4; } }
.in-finder__group { margin-bottom: 1.75rem; }
.in-finder.is-collapsed .in-finder__results { max-height: 30rem; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }
.in-finder__morewrap { display: flex; justify-content: center; margin-top: 0.5rem; }
.in-finder__morewrap[hidden] { display: none; }
.in-finder__more .btn__icon { transition: transform 0.4s var(--ease-out); }
.in-finder__more[aria-expanded="true"] .btn__icon { transform: rotate(180deg); }
@media (min-width: 480px) and (max-width: 559.98px) { .in-finder__results { columns: 2; } .in-finder__item:not(.in-finder__item--main) .in-finder__native { display: none; } }
.in-finder__group[hidden] { display: none; }
.in-finder__letter { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 0.35rem; border-bottom: 1px solid var(--border-strong); font-size: 1.75rem; font-weight: 650; letter-spacing: -0.04em; line-height: 1.1; color: var(--accent); break-after: avoid; }
.in-finder__item { display: flex; align-items: center; gap: 0.5rem; min-height: 40px; padding: 0.4rem 0; border-bottom: 1px solid var(--border); font-size: 0.96875rem; line-height: 1.3; break-inside: avoid; }
.in-finder__item[hidden] { display: none; }
.in-finder__item--main a { display: flex; align-items: center; gap: 0.5rem; width: 100%; min-height: 40px; margin: -0.4rem 0; padding: 0.4rem 0; color: var(--accent); font-weight: 650; text-decoration: none; }
.in-finder__item--main a:hover .in-finder__name { text-decoration: underline; text-underline-offset: 0.18em; }
.in-finder__native { margin-left: auto; color: var(--fg-3); font-size: 0.875rem; font-weight: 500; text-align: right; }
.in-finder__item--main .in-finder__native::after { content: "↗"; margin-left: 0.4rem; color: var(--accent); }
.in-finder__daily { display: inline-block; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--c-accent-300); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent-300) 18%, transparent); }
.in-finder mark { padding: 0 1px; border-radius: 3px; background: color-mix(in srgb, var(--c-accent) 18%, transparent); color: inherit; }
.in-finder__empty { padding: clamp(1.5rem, 1rem + 2vw, 3rem); border-radius: var(--r-lg); background: var(--c-white); border: 1px solid var(--border); text-align: center; color: var(--fg-2); }
.in-finder__empty[hidden] { display: none; }
.in-finder__empty-title { margin-bottom: 0.4rem; font-size: var(--fs-h-sm); font-weight: 650; letter-spacing: -0.022em; color: var(--fg); }
.in-finder__empty a { color: var(--accent); font-weight: 600; }
.in-finder__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 1rem; font-size: var(--fs-xs); color: var(--fg-2); }
.in-finder__legend-sep { color: var(--fg-3); }
.in-finder__legend-main { display: inline-block; width: 14px; height: 3px; border-radius: 2px; background: var(--accent); }

/* =========================================================================================
   Sectors hub: statement + mosaic
   ========================================================================================= */
.in-statement { max-width: 64rem; }
.in-statement__text { font-size: clamp(1.5rem, 1.05rem + 1.8vw, 2.75rem); font-weight: 600; line-height: 1.2; letter-spacing: -0.032em; color: var(--fg); text-wrap: pretty; }
.in-statement__text::before { content: "“"; display: block; height: 0.55em; font-family: var(--font-serif); font-size: 2.2em; line-height: 1; color: var(--accent); }
.in-mosaic { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); grid-auto-rows: minmax(clamp(320px, 20vw + 180px, 420px), auto); }
@media (min-width: 640px) { .in-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); } .in-mosaic__item--1 { grid-column: span 2; } }
@media (min-width: 1000px) {
  .in-mosaic--n7 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .in-mosaic--n7 .in-mosaic__item--7 { grid-column: span 2; }
}
.in-mosaic__item { display: flex; }
.in-mosaic__card { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; width: 100%; border-radius: var(--r-xl); background: var(--c-ink-2); border: 1px solid color-mix(in srgb, var(--c-white) 8%, transparent); color: var(--c-white); transition: border-color var(--dur-3); }
.in-mosaic__card:hover { border-color: color-mix(in srgb, var(--c-accent-300) 35%, transparent); }
.in-mosaic__card:has(.in-mosaic__link:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
.in-mosaic__media, .in-mosaic__media picture { position: absolute; inset: 0; z-index: -2; }
.in-mosaic__media picture { inset: -6% 0; }
.in-mosaic__img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.4s var(--ease-out); }
.in-mosaic__card:hover .in-mosaic__img { transform: scale(1.07); }
.in-mosaic__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, color-mix(in srgb, var(--c-black) 50%, transparent) 0%, color-mix(in srgb, var(--c-black) 0%, transparent) 30%, color-mix(in srgb, var(--c-black) 25%, transparent) 52%, color-mix(in srgb, var(--c-black) 92%, transparent) 100%); }
.in-mosaic__top { display: flex; align-items: center; justify-content: space-between; padding: clamp(1rem, 0.75rem + 1vw, 1.5rem); }
.in-mosaic__top .in-code { color: var(--c-white); border-color: color-mix(in srgb, var(--c-white) 24%, transparent); background: color-mix(in srgb, var(--c-black) 60%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.in-mosaic__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; color: var(--c-white); background: color-mix(in srgb, var(--c-black) 38%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid color-mix(in srgb, var(--c-white) 20%, transparent); }
.in-mosaic__body { padding: clamp(2.5rem, 2rem + 2vw, 4rem) clamp(1.25rem, 1rem + 1vw, 2rem) clamp(1.25rem, 1rem + 1vw, 2rem); background: linear-gradient(180deg, color-mix(in srgb, var(--c-black) 0%, transparent) 0%, color-mix(in srgb, var(--c-black) 72%, transparent) clamp(2rem, 1.5rem + 2vw, 3.5rem), color-mix(in srgb, var(--c-black) 90%, transparent) 100%); }
.in-mosaic__title { font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.4rem); font-weight: 650; letter-spacing: -0.038em; line-height: 1.04; }
.in-mosaic__link { color: inherit; text-decoration: none; }
.in-mosaic__link:focus-visible { outline: none; }
.in-mosaic__link::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.in-mosaic__text { margin-top: 0.55rem; max-width: 46ch; color: color-mix(in srgb, var(--c-white) 80%, transparent); font-size: var(--fs-small); line-height: 1.5; }
.in-mosaic__go { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.9rem; color: var(--c-accent-300); font-weight: 600; font-size: var(--fs-small); }
.in-mosaic__go .icon { transition: transform var(--dur-3) var(--ease-out); }
.in-mosaic__card:hover .in-mosaic__go .icon { transform: translateX(4px); }

/* =========================================================================================
   About: manifesto
   ========================================================================================= */
.in-manifesto { display: grid; gap: 2rem 5rem; }
@media (min-width: 1000px) { .in-manifesto { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; } }
.in-manifesto__head .eyebrow { margin-bottom: 1.25rem; }
.in-manifesto__title { max-width: 13ch; font-size: var(--fs-h-xl); font-weight: 650; letter-spacing: -0.048em; line-height: 0.98; text-wrap: balance; }
.in-manifesto__body { font-size: var(--fs-body-lg); line-height: 1.72; color: var(--fg-2); max-width: 52ch; }
.in-manifesto__body p + p { margin-top: 1em; }
.in-manifesto__body strong { color: var(--fg); }

/* =========================================================================================
   Rails (sibling languages / sectors), services row, related
   ========================================================================================= */
.in-rail__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.25rem 2rem; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }
.in-rail__head .shead { margin-bottom: 0; }
.in-rail__side { display: flex; align-items: center; gap: 0.75rem; }
.in-rail__next { display: inline-flex; align-items: center; gap: 0.55rem; min-height: 44px; padding: 0 1.1rem; border-radius: var(--r-pill); border: 1px solid var(--border-strong); color: var(--fg); font-weight: 600; font-size: var(--fs-small); text-decoration: none; transition: background-color var(--dur-2); }
.in-rail__next:hover { background: color-mix(in srgb, var(--fg) 8%, transparent); }
.in-rail__next-k { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); }
.in-rail__next .icon { color: var(--accent); }
.in-rail__ctrls { display: flex; gap: 0.5rem; }
html:not(.js) .in-rail__ctrls { display: none; }
.in-rail__btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border-strong); color: var(--fg); transition: background-color var(--dur-2), opacity var(--dur-2); }
.in-rail__btn:hover:not(:disabled) { background: color-mix(in srgb, var(--fg) 8%, transparent); }
.in-rail__btn:disabled { opacity: 0.3; cursor: default; }
@media (max-width: 639.98px) { .in-rail__ctrls { display: none; } }
.in-rail { position: relative; }
.in-rail .in-rail__track {
  --rail-pad: max(var(--gutter), calc((100% - var(--container)) / 2));
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  padding: 0.25rem var(--rail-pad) 1.25rem;
  scroll-padding-inline: var(--rail-pad);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.in-rail__track::-webkit-scrollbar { display: none; }
.in-rail__track::after { content: ""; flex: 0 0 1px; }
.in-rtile-li { flex: 0 0 clamp(210px, 14vw + 130px, 300px); scroll-snap-align: start; }
.in-rtile { position: relative; isolation: isolate; display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--r-lg); color: var(--c-white); text-decoration: none; background: var(--c-ink-2); }
.in-rtile__media, .in-rtile__media picture { position: absolute; inset: 0; z-index: -2; }
.in-rtile__img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.3s var(--ease-out); }
.in-rtile:hover .in-rtile__img { transform: scale(1.08); }
.in-rtile__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, color-mix(in srgb, var(--c-black) 50%, transparent) 0%, color-mix(in srgb, var(--c-black) 0%, transparent) 30%, color-mix(in srgb, var(--c-black) 12%, transparent) 52%, color-mix(in srgb, var(--c-black) 90%, transparent) 100%); }
.in-rtile__top { position: absolute; top: 0.9rem; left: 0.9rem; right: 0.9rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; }
.in-rtile__top .in-code { color: var(--c-white); border-color: color-mix(in srgb, var(--c-white) 24%, transparent); background: color-mix(in srgb, var(--c-black) 60%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.in-rtile__badge { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: var(--c-white); background: color-mix(in srgb, var(--c-black) 38%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid color-mix(in srgb, var(--c-white) 20%, transparent); }
.in-rtile__here { display: inline-flex; align-items: center; height: 24px; padding: 0 0.6rem; border-radius: var(--r-pill); background: var(--c-accent-400); color: var(--c-black); font-family: var(--font-mono); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.in-rtile__body { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 0.35rem; padding: 1.15rem; }
.in-rtile__title { font-size: clamp(1.45rem, 1.15rem + 0.9vw, 1.9rem); font-weight: 650; letter-spacing: -0.035em; line-height: 1.02; }
#more-languages .in-rtile__title { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: clamp(1.9rem, 1.4rem + 1.4vw, 2.6rem); letter-spacing: -0.01em; }
.in-rtile__sub { display: inline-flex; align-items: center; gap: 0.3rem; color: color-mix(in srgb, var(--c-white) 80%, transparent); font-size: var(--fs-small); font-weight: 550; }
.in-rtile.is-current::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px var(--c-accent-400); pointer-events: none; }
.in-rtile.is-current .in-rtile__img { filter: saturate(0.7) brightness(0.8); }
.in-rail__after { margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }

.in-svcs { display: grid; gap: var(--gap); }
@media (min-width: 900px) { .in-svcs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.in-svc__link { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: space-between; min-height: clamp(380px, 22vw + 160px, 480px); overflow: hidden; border-radius: var(--r-xl); color: var(--c-white); text-decoration: none; background: var(--c-ink-2); }
.in-svc__media, .in-svc__media picture { position: absolute; inset: 0; z-index: -2; }
.in-svc__media picture { inset: -6% 0; }
.in-svc__img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.3s var(--ease-out); }
.in-svc__link:hover .in-svc__img { transform: scale(1.07); }
.in-svc__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, color-mix(in srgb, var(--c-black) 50%, transparent) 0%, color-mix(in srgb, var(--c-black) 0%, transparent) 22%, color-mix(in srgb, var(--c-black) 50%, transparent) 46%, color-mix(in srgb, var(--c-black) 90%, transparent) 66%, color-mix(in srgb, var(--c-black) 97%, transparent) 100%); }
.in-svc__top { display: flex; align-items: center; gap: 0.5rem; padding: 1.15rem; }
.in-svc__top .in-code { color: var(--c-white); border-color: color-mix(in srgb, var(--c-white) 24%, transparent); background: color-mix(in srgb, var(--c-black) 60%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.in-svc__body { display: flex; flex-direction: column; padding: clamp(1.25rem, 1rem + 1vw, 2rem); }
.in-svc__title { font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); font-weight: 650; letter-spacing: -0.04em; line-height: 1; }
.in-svc__text { margin-top: 0.7rem; max-width: 42ch; color: color-mix(in srgb, var(--c-white) 80%, transparent); font-size: var(--fs-small); line-height: 1.5; }
.in-svc__go { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 1rem; color: var(--c-accent-300); font-weight: 600; font-size: var(--fs-small); }
.in-svc__go .icon { transition: transform var(--dur-3) var(--ease-out); }
.in-svc__link:hover .in-svc__go .icon { transform: translateX(4px); }
.in-svc.is-current .in-svc__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px var(--c-accent-400); pointer-events: none; }
.in-svcs__after { display: flex; justify-content: center; margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem); }

.in-rel { display: grid; gap: var(--gap); }
@media (min-width: 640px) { .in-rel { grid-template-columns: repeat(2, minmax(0, 1fr)); } .in-rel--n3 > :first-child, .in-rel--n5 > :first-child { grid-column: span 2; } }
@media (min-width: 1100px) {
  .in-rel--n3, .in-rel--n6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .in-rel--n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .in-rel--n5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .in-rel--n3 > :first-child { grid-column: auto; }
  /* 5 related pages: 2 + 3 rows instead of five cramped columns */
  .in-rel--n5 > * { grid-column: span 2; }
  .in-rel--n5 > :nth-child(-n+2) { grid-column: span 3; }
}
.in-rel__item { display: flex; }
.in-rel__card { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 0.35rem; width: 100%; padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); color: var(--fg); text-decoration: none; transition: transform 0.6s var(--ease-out), border-color var(--dur-3), box-shadow var(--dur-3); }
.in-rel__card > * { position: relative; z-index: 1; }
.in-rel__card:hover { transform: translateY(-3px); border-color: var(--border-strong); box-shadow: var(--shadow-md); }
[data-theme="dark"] .in-rel__card:hover { box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8), 0 0 0 1px color-mix(in srgb, var(--c-accent-400) 20%, transparent); }
.in-rel__icon { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 1.4rem; border-radius: 12px; color: var(--c-accent-600); background: linear-gradient(140deg, var(--c-accent-050), var(--c-accent-100)); }
[data-theme="dark"] .in-rel__icon { color: var(--c-accent-300); background: linear-gradient(140deg, color-mix(in srgb, var(--c-accent) 30%, transparent), color-mix(in srgb, var(--c-accent-300) 14%, transparent)); }
.in-rel__eyebrow { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); }
.in-rel__title { font-size: 1.25rem; font-weight: 650; letter-spacing: -0.024em; line-height: 1.2; }
.in-rel__text { color: var(--fg-2); font-size: var(--fs-small); line-height: 1.5; }
.in-rel__go { margin-top: auto; padding-top: 1rem; color: var(--accent); }
.in-rel__go .icon { transition: transform var(--dur-3) var(--ease-out); }
.in-rel__card:hover .in-rel__go .icon { transform: translateX(4px); }

/* =========================================================================================
   Shared-block polish on inner pages
   ========================================================================================= */
.in-page .in-block--keyfacts, .in-page .block--keyfacts { scroll-margin-top: calc(var(--header-h) + 64px); }
.in-page .section[id] { scroll-margin-top: calc(var(--header-h) + 56px); }
.in-page .block--stats .stats { margin-top: 0; }
.in-page .block--features .feature { min-height: clamp(220px, 14vw + 120px, 320px); }

/* =========================================================================================
   Reduced motion
   ========================================================================================= */
@media (prefers-reduced-motion: reduce) {
  .in-split__frame picture { inset: 0 !important; transform: none !important; }
  .in-hero__frame-img, .in-hero__portrait-img { transform: none !important; }
  .in-marquee__track { animation: none !important; }
  .in-marquee__toggle { display: none; }
  .in-hero__cue i::after { animation: none; }
}

/* In-short: language mini card in the side column */
.in-short__side { display: contents; }
.in-short__meta { display: none; } /* the hero already shows the flag / native name */
.in-langcard { display: grid; justify-items: start; gap: 0.9rem; }
.in-langcard__native { font-family: var(--font-serif); font-style: italic; font-size: clamp(2.25rem, 1.6rem + 2vw, 3.5rem); line-height: 0.95; letter-spacing: -0.01em; color: var(--fg); background: linear-gradient(180deg, var(--c-white) 30%, var(--c-accent-300)); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 0.08em; }
@media (max-width: 899.98px) { .in-langcard { grid-template-columns: auto 1fr; align-items: center; } .in-langcard .in-code { grid-column: 1 / -1; } .in-langcard__native { font-size: 2rem; } .in-short__meta { display: none; } }

/* ==== 70-longform.css ==== */
/* 70-longform.css — OWNED BY THE LONGFORM AGENT (articles-index, article, legal, privacy-center, 404 look).
   Long-form pages use the LIGHT theme for readability. Everything is scoped under .lf-* classes or
   page body classes (.page-article, .page-articles-index, .page-legal, .page-privacy-center, .page-404). */

/* =========================================================================================
   0 · Long-form tokens
   ========================================================================================= */
.is-longform main { background: var(--c-white); }
.is-longform {
  --lf-col: 44rem;                                   /* reading column (~70 characters at 20px) */
  --lf-gap: clamp(2.5rem, 1rem + 3.4vw, 5rem);
  --lf-ink: var(--c-text);
  --lf-ink-2: var(--c-text-2);
  --lf-ink-3: var(--c-text-3);
  --lf-line: rgba(0, 0, 0, 0.08);
  --lf-line-2: rgba(0, 0, 0, 0.14);
  --lf-paper: var(--c-on-dark);
  --lf-radius: clamp(20px, 0.9rem + 0.8vw, 28px);
}

/* Eyebrow + labels -------------------------------------------------------------------------- */
.lf-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--c-accent-600);
}
.lf-eyebrow::before {
  content: "";
  width: 1.25rem; height: 1px;
  background: currentColor;
  opacity: 0.7;
}
.lf-eyebrow__link { color: inherit; text-decoration: none; }
.lf-eyebrow__link:hover { text-decoration: underline; text-underline-offset: 0.25em; }
.lf-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--c-accent-600);
}
.lf-label .icon { color: var(--c-accent); }

/* Avatar (initials — no invented photos) ---------------------------------------------------- */
.lf-avatar {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  color: var(--c-on-accent);
  font-size: 0.875rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  background: radial-gradient(120% 120% at 20% 10%, var(--c-fill-b) 0%, var(--c-fill-a) 100%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--c-white) 30%, transparent), 0 6px 16px -6px color-mix(in srgb, var(--c-accent) 60%, transparent);
}
.lf-avatar--xs { width: 24px; height: 24px; font-size: 0.5625rem; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--c-white) 30%, transparent); }
.lf-avatar--lg { width: 56px; height: 56px; font-size: 1rem; }

/* =========================================================================================
   1 · Hero (light)
   ========================================================================================= */
.lf-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--c-white);
  color: var(--lf-ink);
  padding-top: calc(var(--header-h) + clamp(1.25rem, 0.5rem + 3vw, 3.5rem));
  padding-bottom: clamp(2.5rem, 1.5rem + 3.5vw, 5rem);
}
.lf-hero__glow { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.lf-hero__glow span { position: absolute; border-radius: 50%; will-change: transform; }
.lf-hero__glow span:nth-child(1) {
  width: 70vmax; height: 70vmax;
  right: -28vmax; top: -46vmax;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c-accent-400) 26%, transparent), color-mix(in srgb, var(--c-accent-400) 0%, transparent) 72%);
  animation: lf-drift-a 24s var(--ease-in-out) infinite alternate;
}
.lf-hero__glow span:nth-child(2) {
  width: 46vmax; height: 46vmax;
  right: 6vmax; top: -30vmax;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c-accent-300) 18%, transparent), color-mix(in srgb, var(--c-accent-300) 0%, transparent) 72%);
  animation: lf-drift-b 30s var(--ease-in-out) infinite alternate;
}
@keyframes lf-drift-a { to { transform: translate3d(-6vmax, 4vmax, 0) scale(1.08); } }
@keyframes lf-drift-b { to { transform: translate3d(5vmax, 3vmax, 0) scale(0.94); } }
.lf-hero__grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgba(0, 0, 0, 0.075) 1px, transparent 1.25px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(60% 70% at 85% 0%, #000 0%, transparent 72%);
  mask-image: radial-gradient(60% 70% at 85% 0%, #000 0%, transparent 72%);
}
.lf-crumbs { margin-bottom: clamp(1.5rem, 1rem + 2.2vw, 2.75rem); }
.lf-crumbs .crumbs__list { color: var(--lf-ink-3); }
.lf-crumbs a { color: var(--lf-ink-2); }
@media (max-width: 639.98px) {
  .lf-crumbs .crumbs__item:nth-child(n+3):last-child { display: none; }
  .lf-crumbs .crumbs__item:nth-child(n+2):nth-last-child(2):not(:first-child) .crumbs__sep { display: none; }
}
.lf-crumbs [aria-current] { display: inline-block; max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.lf-hero .lf-eyebrow { margin-bottom: clamp(1.1rem, 0.8rem + 1vw, 1.6rem); }
.lf-hero__title {
  font-size: clamp(2.5rem, 1.55rem + 3.7vw, 5rem);           /* 40 → 80 */
  font-weight: var(--fw-display);
  letter-spacing: -0.045em;
  line-height: 1.02;
  color: var(--lf-ink);
  max-width: 17ch;
  text-wrap: balance;
}
.lf-hero__title--long { font-size: clamp(2.125rem, 1.45rem + 2.7vw, 4rem); max-width: 22ch; letter-spacing: -0.04em; line-height: 1.04; }
.lf-hero__title em { color: var(--c-accent-600); }
.lf-hero__dek {
  margin-top: clamp(1.25rem, 1rem + 1vw, 1.9rem);
  max-width: 40rem;
  font-size: clamp(1.1875rem, 1.06rem + 0.5vw, 1.5rem);
  line-height: 1.45;
  letter-spacing: -0.014em;
  color: var(--lf-ink-2);
  text-wrap: pretty;
}

/* Article hero aligns its copy with the reading column (desktop) */
@media (min-width: 1200px) {
  .lf-layout,
  .lf-hero--article .lf-hero__inner,
  .lf-hero--legal .lf-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--lf-col) minmax(0, 1fr);
    column-gap: var(--lf-gap);
  }
  .lf-hero--article .lf-hero__copy,
  .lf-hero--legal .lf-hero__copy { grid-column: 2 / 4; }
}
@media (max-width: 1199.98px) {
  .lf-hero--article .lf-hero__copy,
  .lf-hero--legal .lf-hero__copy { max-width: var(--lf-col); margin-inline: auto; }
}

/* Byline ------------------------------------------------------------------------------------- */
.lf-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  max-width: var(--lf-col);
  margin-top: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem);
  padding-top: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
  border-top: 1px solid var(--lf-line);
}
.lf-byline__author { display: flex; align-items: center; gap: 0.9rem; min-width: 0; }
.lf-byline__name { font-size: 1rem; font-weight: 500; color: var(--lf-ink-2); line-height: 1.3; }
.lf-byline__name span { color: var(--lf-ink); font-weight: 640; }
.lf-byline__dates { display: flex; flex-wrap: wrap; column-gap: 0; row-gap: 0.15rem; margin-top: 0.2rem; font-size: 0.875rem; color: var(--lf-ink-3); line-height: 1.4; }
.lf-byline__dates > span + span::before { content: "·"; margin: 0 0.55em; color: var(--lf-ink-3); }

/* Share -------------------------------------------------------------------------------------- */
.lf-share { position: relative; display: flex; align-items: center; gap: 0.75rem; }
.lf-share__label { font-size: 0.875rem; font-weight: 600; color: var(--lf-ink-2); }
.lf-share__list { display: flex; align-items: center; gap: 0.4rem; }
.lf-share__btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  color: var(--lf-ink);
  background: var(--c-white);
  border: 1px solid var(--lf-line-2);
  transition: background-color var(--dur-2), border-color var(--dur-2), color var(--dur-2), transform 0.4s var(--ease-out);
}
.lf-share__btn:hover { background: var(--lf-paper); border-color: rgba(0, 0, 0, 0.24); transform: translateY(-1px); }
.lf-share__btn .lf-share__ic-ok { position: absolute; opacity: 0; transform: scale(0.6); transition: opacity 0.3s, transform 0.4s var(--ease-spring); color: var(--c-accent-600); }
.lf-share__btn .lf-share__ic-link { transition: opacity 0.3s, transform 0.4s var(--ease-out); }
.lf-share__btn.is-copied { border-color: color-mix(in srgb, var(--c-accent-600) 45%, transparent); background: color-mix(in srgb, var(--c-accent-300) 12%, transparent); }
.lf-share__btn.is-copied .lf-share__ic-ok { opacity: 1; transform: none; }
.lf-share__btn.is-copied .lf-share__ic-link { opacity: 0; transform: scale(0.6); }
.lf-share__status:empty { display: none; }
.lf-share__status {
  position: absolute;
  right: 0; bottom: calc(100% + 10px);
  padding: 0.4rem 0.75rem;
  border-radius: var(--r-pill);
  background: var(--lf-ink);
  color: var(--c-white);
  font-size: 0.8125rem;
  font-weight: 550;
  white-space: nowrap;
  box-shadow: var(--shadow-md);
  animation: lf-pop 0.45s var(--ease-out);
  pointer-events: none;
}
@keyframes lf-pop { from { opacity: 0; transform: translateY(4px); } }

/* Featured image ---------------------------------------------------------------------------- */
.lf-feature { max-width: calc(75rem + 2 * var(--gutter)); margin-top: clamp(2rem, 1.5rem + 2.4vw, 3.75rem); }
.lf-feature__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  border-radius: var(--lf-radius);
  background: var(--lf-paper);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 50px 90px -50px color-mix(in srgb, var(--c-accent-900) 45%, transparent);
  transform-origin: 50% 0%;
}
@media (min-width: 760px) { .lf-feature__frame { aspect-ratio: 16 / 9; } }
@media (min-width: 1100px) { .lf-feature__frame { aspect-ratio: 2 / 1; } }
.lf-feature__frame picture { position: absolute; inset: 0; }
.lf-feature__img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transform-origin: 50% 50%; }
.lf-feature__cap { margin: 0.9rem auto 0; max-width: var(--lf-col); font-size: 0.875rem; line-height: 1.45; color: var(--lf-ink-3); }
.lf-feature__cap::before { content: ""; display: inline-block; width: 1.25rem; height: 1px; margin-right: 0.6rem; vertical-align: middle; background: var(--lf-line-2); }

/* =========================================================================================
   2 · Reading layout: rail + column
   ========================================================================================= */
.lf-article-body { position: relative; background: var(--c-white); color: var(--lf-ink); padding: clamp(2.5rem, 1.5rem + 3.5vw, 5.5rem) 0 clamp(4rem, 3rem + 4vw, 7.5rem); }
.lf-main { width: 100%; max-width: var(--lf-col); margin-inline: auto; min-width: 0; }
.lf-rail { display: none; }
@media (min-width: 1200px) {
  .lf-rail { display: block; grid-column: 1; grid-row: 1; justify-self: end; align-self: start; position: sticky; top: calc(var(--header-h) + 2.25rem); width: min(15rem, 100%); }
  .lf-main { grid-column: 2; grid-row: 1; margin: 0; }
}
/* Legal docs: the outline is useful on small screens too (collapsible, above the text) */
@media (max-width: 1199.98px) {
  .lf-rail--legal { display: block; max-width: var(--lf-col); margin: 0 auto clamp(1.75rem, 1rem + 2vw, 2.5rem); }
  .lf-rail--legal .lf-help { display: none; }
}

/* Outline / TOC ----------------------------------------------------------------------------- */
.lf-toc { position: relative; }
.lf-toc__summary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 52px;
  padding: 0 1.1rem;
  border-radius: 16px;
  background: var(--lf-paper);
  cursor: pointer;
  list-style: none;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--lf-ink);
}
.lf-toc__summary::-webkit-details-marker { display: none; }
.lf-toc__summary::marker { content: ""; }
.lf-toc__summary .icon { color: var(--c-accent-600); }
.lf-toc__count { margin-left: 0.15rem; padding: 0.1rem 0.45rem; border-radius: var(--r-pill); background: var(--c-white); font-family: var(--font-mono); font-size: 0.6875rem; color: var(--lf-ink-3); }
.lf-toc__chev { margin-left: auto; transition: transform 0.4s var(--ease-out); color: var(--lf-ink-3); }
.lf-toc[open] .lf-toc__chev { transform: rotate(180deg); }
.lf-toc__nav { position: relative; padding: 1rem 0 0.25rem; }
.lf-toc__list { position: relative; display: grid; gap: 0.1rem; }
.lf-toc__link {
  display: flex;
  gap: 0.6rem;
  padding: 0.4rem 0.25rem 0.4rem 1.1rem;
  border-radius: 8px;
  font-size: 0.875rem;
  line-height: 1.35;
  color: var(--lf-ink-3);
  text-decoration: none;
  transition: color var(--dur-2);
}
.lf-toc__link:hover { color: var(--lf-ink); }
.lf-toc__link.is-active { color: var(--lf-ink); font-weight: 600; }
.lf-toc__n { flex: none; min-width: 1.4em; font-family: var(--font-mono); font-size: 0.75rem; padding-top: 0.12em; color: var(--c-accent-600); opacity: 0.85; }
.lf-toc__item--h3 .lf-toc__link { padding-left: 1.85rem; font-size: 0.85rem; }
.lf-toc__track { position: absolute; left: 0; top: 1rem; bottom: 0.25rem; width: 2px; border-radius: 2px; background: var(--lf-line); overflow: hidden; }
.lf-toc__track span { position: absolute; inset: 0; background: linear-gradient(180deg, var(--c-accent), var(--c-accent-400) 60%, var(--c-accent-300)); transform-origin: 50% 0; transform: scaleY(var(--p, 0)); }
@media (max-width: 1199.98px) {
  .lf-toc__track { display: none; }
  .lf-toc__nav { padding: 0.5rem 0.25rem 0.25rem; }
  .lf-toc__link { padding-left: 0.85rem; min-height: 44px; align-items: center; }
  .lf-toc__item--h3 .lf-toc__link { padding-left: 1.6rem; }
}
@media (min-width: 1200px) {
  .lf-toc__summary { min-height: 0; padding: 0; background: none; cursor: default; pointer-events: none; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--lf-ink-3); }
  .lf-toc__summary .icon:first-child, .lf-toc__chev { display: none; }
  .lf-toc__count { background: var(--lf-paper); }
  .lf-toc::details-content { content-visibility: visible; display: block; }
  .lf-toc__list { max-height: calc(100vh - var(--header-h) - 8rem); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
  .lf-toc__list::-webkit-scrollbar { display: none; }
  .lf-rail--legal .lf-toc__list { max-height: calc(100vh - var(--header-h) - 21rem); }
  .lf-toc__list.is-clipped { -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent); mask-image: linear-gradient(180deg, #000 82%, transparent); }
  .lf-toc__list.is-clipped.is-scrolled { -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 82%, transparent); mask-image: linear-gradient(180deg, transparent, #000 12%, #000 82%, transparent); }
  .lf-toc__list.is-clipped.is-end { -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%); mask-image: linear-gradient(180deg, transparent, #000 12%); }
}
@media (min-width: 1200px) and (max-height: 760px) {
  .lf-rail--legal .lf-help { display: none; }
  .lf-rail--legal .lf-toc__list { max-height: calc(100vh - var(--header-h) - 9rem); }
}

/* =========================================================================================
   3 · "In short" + Key takeaways (digest)
   ========================================================================================= */
.lf-digest {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  border-radius: var(--lf-radius);
  background: var(--lf-paper);
  margin-bottom: clamp(2.75rem, 2rem + 2.5vw, 4rem);
}
.lf-digest::before {
  content: "";
  position: absolute;
  right: -18%; top: -55%;
  z-index: -1;
  width: 70%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c-accent-400) 22%, transparent), transparent 72%);
}
.lf-digest::after {
  content: "";
  position: absolute;
  left: 0; top: 0; right: 0;
  height: 3px;
  background: var(--grad-brand-deep);
  opacity: 0.85;
}
.lf-short__text {
  margin-top: 0.9rem;
  font-size: clamp(1.1875rem, 1.07rem + 0.5vw, 1.5rem);
  font-weight: 540;
  line-height: 1.38;
  letter-spacing: -0.02em;
  color: var(--lf-ink);
  text-wrap: pretty;
}
.lf-short__text .hl-word { transition: color 0.6s var(--ease-out); }
.motion .lf-short__text[data-highlight-ready] .hl-word { color: color-mix(in srgb, var(--c-text) 26%, var(--c-white)); }
.motion .lf-short__text[data-highlight-ready] .hl-word.is-lit { color: inherit; }
.lf-digest__take { margin-top: clamp(1.5rem, 1rem + 1.6vw, 2.25rem); padding-top: clamp(1.5rem, 1rem + 1.6vw, 2.25rem); border-top: 1px solid var(--lf-line-2); }
.lf-digest__intro { margin-top: 0.75rem; color: var(--lf-ink-2); }
.lf-digest__list { margin-top: 0.6rem; counter-reset: none; }
.lf-digest__item {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  gap: 0.25rem;
  padding: 0.85rem 0;
  font-size: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  line-height: 1.55;
  color: var(--lf-ink);
}
.lf-digest__item + .lf-digest__item { border-top: 1px solid var(--lf-line); }
.lf-digest__item:last-child { padding-bottom: 0; }
.lf-digest__n { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.06em; color: var(--c-accent-600); padding-top: 0.28rem; }

/* "In short" callout / band (index, legal, privacy centre) */
.lf-short { position: relative; }
.lf-short--legal {
  padding: clamp(1.25rem, 1rem + 1.2vw, 2rem);
  border-radius: var(--lf-radius);
  background: var(--lf-paper);
  margin-bottom: clamp(2.5rem, 2rem + 2vw, 3.5rem);
}
.lf-short--legal .lf-short__text { font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem); font-weight: 520; line-height: 1.5; letter-spacing: -0.014em; }
.lf-band { background: var(--c-white); color: var(--lf-ink); }
.lf-short--band {
  display: grid;
  gap: 1rem;
  padding: clamp(2rem, 1.5rem + 2vw, 3.25rem) 0 clamp(1rem, 0.5rem + 2vw, 2.5rem);
  border-top: 1px solid var(--lf-line);
}
.lf-short--band .lf-label { align-self: start; justify-self: start; }
.lf-short--band .lf-short__text { margin-top: 0; max-width: 46rem; font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem); line-height: 1.3; letter-spacing: -0.024em; font-weight: 550; }
@media (min-width: 900px) {
  .lf-short--band { grid-template-columns: minmax(180px, 3fr) 9fr; gap: 3rem; }
  .lf-short--band .lf-label { padding-top: 0.65rem; }
}

/* =========================================================================================
   4 · Article typography
   ========================================================================================= */
.lf-prose {
  max-width: none;
  margin: 0;
  font-size: clamp(1.125rem, 1.03rem + 0.32vw, 1.25rem);   /* 18 → 20 */
  line-height: 1.72;
  letter-spacing: -0.006em;
  color: var(--c-text);
  font-feature-settings: "cv11", "ss01", "ss03", "kern";
}
.lf-prose > * + * { margin-top: 1.15em; }
.lf-prose > p:first-child { font-size: 1.16em; line-height: 1.56; letter-spacing: -0.014em; color: var(--lf-ink); }
.lf-prose h2 {
  margin-top: 2.3em;
  font-size: clamp(1.5rem, 1.18rem + 1.15vw, 2.125rem);
  font-weight: 650;
  line-height: 1.16;
  letter-spacing: -0.032em;
  color: var(--lf-ink);
}
.lf-prose h3 { margin-top: 1.9em; font-size: clamp(1.2rem, 1.1rem + 0.45vw, 1.45rem); font-weight: 640; line-height: 1.28; letter-spacing: -0.022em; color: var(--lf-ink); }
.lf-prose h2 + *, .lf-prose h3 + * { margin-top: 0.65em; }
.lf-prose h2 + h3 { margin-top: 1.1em; }
.lf-prose h2, .lf-prose h3 { clear: none; }
.lf-prose a { color: var(--c-accent-600); text-decoration-line: underline; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, var(--c-accent-600) 38%, transparent); text-underline-offset: 0.22em; transition: text-decoration-color var(--dur-2); }
.lf-prose a:hover { text-decoration-color: currentColor; }
.lf-prose strong { color: var(--lf-ink); font-weight: 650; }
.lf-prose em { color: inherit; }
.lf-prose ul { padding-left: 1.25em; }
.lf-prose ul li { padding-left: 0.3em; }
.lf-prose ul li::marker { content: "—  "; color: var(--c-accent); font-weight: 600; }
.lf-prose li + li { margin-top: 0.5em; }
.lf-prose ol { list-style: none; padding: 0; counter-reset: lf-ol; }
.lf-prose ol > li { position: relative; padding-left: 2.6em; counter-increment: lf-ol; }
.lf-prose ol > li::before {
  content: counter(lf-ol);
  position: absolute;
  left: 0; top: 0.18em;
  display: grid;
  place-items: center;
  width: 1.65em; height: 1.65em;
  border-radius: 50%;
  background: var(--c-accent-050);
  color: var(--c-accent-700);
  font-family: var(--font-mono);
  font-size: 0.78em;
  font-weight: 600;
}
.lf-prose blockquote { font-size: 1.35em; }

/* Figures: numbered panel with caption (small original images are never upscaled beyond 300px) */
.lf-prose .rt-figure.lf-fig {
  float: none;
  width: auto;
  max-width: none;
  margin: 2.1em 0;
  display: flex;
  justify-content: center;
  padding: 0;
  background: none;
}
.lf-fig__media { width: 100%; }
.lf-fig__media picture, .lf-fig__media img { display: block; border-radius: 14px; width: 100%; height: auto; }

/* Pull quote (verbatim line from the article; decorative duplicate) */
.lf-prose .lf-pull {
  position: relative;
  margin: 2.6em 0;
  padding: 0.2em 0 0.2em clamp(1.25rem, 0.8rem + 1.6vw, 2.25rem);
}
.lf-pull::before {
  content: "";
  position: absolute;
  left: 0; top: 0.35em; bottom: 0.35em;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--c-accent), var(--c-accent-400) 55%, var(--c-accent-300));
}
.lf-pull__mark {
  display: block;
  height: 0.5em;
  font-family: var(--font-serif);
  font-size: 4.5rem;
  line-height: 0.9;
  background: var(--grad-brand-deep);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lf-pull__text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.75rem, 1.25rem + 1.75vw, 2.75rem);
  line-height: 1.14;
  letter-spacing: -0.012em;
  color: var(--lf-ink);
  text-wrap: balance;
}
@media (min-width: 1200px) {
  .lf-prose .lf-pull { margin-right: calc(-1 * var(--lf-gap) - 6rem); }
}

/* In-article FAQ ---------------------------------------------------------------------------- */
.lf-faq { margin-top: clamp(3.5rem, 2.5rem + 3vw, 5.5rem); padding-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); border-top: 1px solid var(--lf-line-2); }
.lf-faq__title { margin: 0.9rem 0 1.5rem; font-size: clamp(1.75rem, 1.35rem + 1.4vw, 2.5rem); font-weight: 650; letter-spacing: -0.035em; line-height: 1.1; color: var(--lf-ink); }
.lf-faq .acc__q { font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem); padding: 1.25rem 0; }
.lf-faq .acc__inner { padding-right: clamp(0.5rem, 4vw, 3.5rem); font-size: 1.0625rem; line-height: 1.65; color: var(--lf-ink-2); }
.lf-faq__more { margin-top: 1.5rem; font-size: 0.9375rem; color: var(--lf-ink-2); }
.lf-faq__more a { color: var(--c-accent-600); font-weight: 600; }

/* Article footer ---------------------------------------------------------------------------- */
.lf-end { margin-top: clamp(3rem, 2.5rem + 2vw, 4.5rem); }
.lf-end__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem 2rem; padding-top: 1.75rem; border-top: 1px solid var(--lf-line-2); }
.lf-end__label { margin-bottom: 0.75rem; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--lf-ink-3); }
.lf-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.lf-tag {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 0.95rem;
  border-radius: var(--r-pill);
  background: var(--lf-paper);
  color: var(--lf-ink);
  font-size: 0.875rem;
  font-weight: 550;
  text-decoration: none;
  transition: background-color var(--dur-2), color var(--dur-2);
}
.lf-tag:hover { background: var(--c-accent-050); color: var(--c-accent-700); }
@media (pointer: coarse) { .lf-tag { min-height: 44px; } }
.lf-share--end { flex-wrap: wrap; }
.lf-author-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem 1.1rem;
  margin-top: 1.75rem;
  padding: clamp(1.1rem, 0.9rem + 1vw, 1.6rem);
  border-radius: var(--lf-radius);
  background: var(--lf-paper);
}
.lf-author-card__k { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--lf-ink-3); }
.lf-author-card__name { margin-top: 0.2rem; font-size: 1.125rem; font-weight: 650; letter-spacing: -0.018em; color: var(--lf-ink); }
.lf-author-card__name span { font-weight: 500; color: var(--lf-ink-2); }
.lf-author-card__dates { margin-top: 0.15rem; font-size: 0.875rem; color: var(--lf-ink-3); }
.lf-author-card__all { grid-column: 1 / -1; justify-self: start; min-height: 44px; color: var(--c-accent-600); }
@media (min-width: 700px) {
  .lf-author-card { grid-template-columns: auto minmax(0, 1fr) auto; }
  .lf-author-card__all { grid-column: auto; justify-self: end; }
}

/* End CTA: dark aurora panel on the light page */
.lf-cta { background: var(--c-white); padding-top: 0; padding-bottom: clamp(3.5rem, 2.5rem + 4vw, 7rem); }
.lf-hero--article { padding-bottom: clamp(1.5rem, 1rem + 2vw, 3rem); }
.lf-cta .cta-panel__text { color: color-mix(in srgb, var(--c-white) 80%, transparent); }

/* =========================================================================================
   5 · Cards, grids, "keep reading"
   ========================================================================================= */
.lf-card { position: relative; display: flex; flex-direction: column; gap: 1.15rem; min-width: 0; color: var(--lf-ink); }
.lf-card__media { position: relative; overflow: hidden; aspect-ratio: 3 / 2; border-radius: calc(var(--lf-radius) - 2px); background: var(--c-paper-2); isolation: isolate; }
.lf-card__media picture { position: absolute; inset: 0; }
.lf-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out); }
.lf-card:hover .lf-card__img { transform: scale(1.045); }
.lf-card__media--brand {
  display: grid;
  place-items: center;
  color: var(--c-white);
  background:
    radial-gradient(70% 90% at 12% 0%, color-mix(in srgb, var(--c-accent) 85%, transparent), transparent 62%),
    radial-gradient(60% 80% at 100% 100%, color-mix(in srgb, var(--c-accent-300) 50%, transparent), transparent 60%),
    var(--c-ink-1);
}
.lf-card__media--brand::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(color-mix(in srgb, var(--c-white) 12%, transparent) 1px, transparent 1.3px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent 85%);
  mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent 85%);
}
.lf-card__glyph {
  position: relative;
  display: grid;
  place-items: center;
  width: 84px; height: 84px;
  border-radius: 24px;
  background: color-mix(in srgb, var(--c-white) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-white) 16%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--c-white) 14%, transparent), 0 20px 40px -20px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 1s var(--ease-out);
}
.lf-card:hover .lf-card__glyph { transform: scale(1.06) rotate(-3deg); }
.lf-card__badge { position: absolute; left: 0.9rem; top: 0.9rem; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: var(--c-white); background: color-mix(in srgb, var(--c-black) 45%, transparent); border: 1px solid color-mix(in srgb, var(--c-white) 22%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.lf-card__body { display: flex; flex-direction: column; gap: 0.6rem; }
.lf-card__label { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.875rem; font-weight: 600; color: var(--c-accent-600); }
.lf-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.55rem; font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lf-ink-3); }
.lf-card__topic { color: var(--c-accent-600); }
.lf-card__dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.6; }
.lf-card__title { font-size: clamp(1.2rem, 1.1rem + 0.4vw, 1.4rem); font-weight: 640; line-height: 1.22; letter-spacing: -0.022em; text-wrap: balance; }
.lf-card__link {
  color: inherit;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat;
  transition: background-size 0.6s var(--ease-out);
}
.lf-card__link::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: var(--lf-radius); }
.lf-card:hover .lf-card__link { background-size: 100% 1.5px; }
.lf-card__link:focus-visible { outline: none; }
.lf-card:has(.lf-card__link:focus-visible) { outline: 2px solid var(--focus); outline-offset: 6px; border-radius: var(--lf-radius); }
.lf-card__text { font-size: 1rem; line-height: 1.55; color: var(--lf-ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lf-card__by { display: inline-flex; align-items: center; gap: 0.55rem; margin-top: 0.25rem; font-size: 0.875rem; font-weight: 550; color: var(--lf-ink-2); }

.lf-grid { display: grid; gap: clamp(2.5rem, 2rem + 1.6vw, 3.5rem) clamp(1rem, 0.6rem + 1.4vw, 2rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) {
  .lf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lf-grid--n1 { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 640px) and (max-width: 1039.98px) {
  .lf-grid--n3 > :first-child, .lf-grid--index > .lf-span-pair { grid-column: span 2; }
  .lf-grid--n3 > :first-child .lf-card__media, .lf-grid--index > .lf-span-pair .lf-card__media { aspect-ratio: 2 / 1; }
}
@media (min-width: 1040px) {
  .lf-grid--n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lf-grid--index { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .lf-grid--index > .lf-card { grid-column: span 2; }
  .lf-grid--index > .lf-span-wide { grid-column: span 3; }
  .lf-grid--index > .lf-span-wide .lf-card__media { aspect-ratio: 16 / 9; }
  .lf-grid--index > .lf-span-wide .lf-card__title { font-size: clamp(1.4rem, 1.1rem + 0.6vw, 1.75rem); letter-spacing: -0.028em; }
}
/* single related card → horizontal */
@media (min-width: 760px) {
  .lf-grid--n1 > .lf-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 2.5rem; }
}

.lf-more { color: var(--lf-ink); }
.lf-more__head { display: flex; flex-direction: column; gap: 0.9rem; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }
.lf-more__title { font-size: var(--fs-h-md); font-weight: 650; letter-spacing: -0.04em; line-height: 1.05; max-width: 20ch; }
.lf-more__sub { margin: clamp(3.5rem, 2.5rem + 3vw, 5rem) 0 clamp(1.5rem, 1rem + 1vw, 2rem); padding-top: clamp(1.75rem, 1.5rem + 1vw, 2.5rem); border-top: 1px solid var(--lf-line-2); font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--lf-ink-3); }

/* Previous / next */
.lf-pager { display: grid; gap: var(--gap); }
@media (min-width: 860px) { .lf-pager { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lf-pager__card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: 132px;
  padding: 0.9rem 1.5rem 0.9rem 0.9rem;
  border-radius: var(--lf-radius);
  background: var(--c-white);
  color: var(--lf-ink);
  text-decoration: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04);
  transition: transform 0.6s var(--ease-out), box-shadow var(--dur-3) var(--ease-out);
}
.lf-pager__card:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), var(--shadow-md); }
.lf-pager__card--next { flex-direction: row-reverse; text-align: right; padding: 0.9rem 0.9rem 0.9rem 1.5rem; }

.lf-pager__thumb { position: relative; flex: none; width: clamp(92px, 70px + 6vw, 148px); aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background: var(--c-paper-2); }
.lf-pager__thumb picture { position: absolute; inset: 0; }
.lf-pager__img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.lf-pager__card:hover .lf-pager__img { transform: scale(1.06); }
.lf-pager__copy { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.lf-pager__thumb--brand { display: grid; place-items: center; color: var(--c-white); background: radial-gradient(80% 100% at 10% 0%, color-mix(in srgb, var(--c-accent) 90%, transparent), transparent 62%), radial-gradient(70% 90% at 100% 100%, color-mix(in srgb, var(--c-accent-300) 55%, transparent), transparent 60%), var(--c-ink-1); }
.lf-pager__dir { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8125rem; font-weight: 600; color: var(--c-accent-600); }
.lf-pager__card--next .lf-pager__dir { justify-content: flex-end; }
.lf-pager__dir .icon { transition: transform 0.5s var(--ease-out); }
.lf-pager__card--prev:hover .lf-pager__dir .icon { transform: translateX(-3px); }
.lf-pager__card--next:hover .lf-pager__dir .icon { transform: translateX(3px); }
.lf-pager__title { font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); font-weight: 640; letter-spacing: -0.02em; line-height: 1.25; text-wrap: balance; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lf-pager__date { font-size: 0.8125rem; color: var(--lf-ink-3); }
@media (max-width: 479.98px) {
  .lf-pager__card, .lf-pager__card--next { flex-direction: row; text-align: left; padding: 0.75rem 1rem 0.75rem 0.75rem; }
  .lf-pager__card--next .lf-pager__dir { justify-content: flex-start; }
}

/* =========================================================================================
   6 · Articles index
   ========================================================================================= */
.lf-hero--index .lf-hero__inner { display: grid; gap: 2.5rem; align-items: end; }
@media (min-width: 1000px) { .lf-hero--index .lf-hero__inner { grid-template-columns: minmax(0, 1fr) auto; } }
.lf-hero--index .lf-hero__title { font-size: clamp(3rem, 1.4rem + 6.6vw, 8.5rem); letter-spacing: -0.052em; line-height: 0.96; max-width: 11ch; }
.lf-hero--index .lf-hero__dek { max-width: 36rem; }
.lf-index-stats { display: flex; gap: clamp(1.5rem, 1rem + 2vw, 3rem); padding-bottom: 0.4rem; }
.lf-index-stats > div { display: flex; flex-direction: column-reverse; gap: 0.35rem; padding-left: 1.1rem; border-left: 1px solid var(--lf-line-2); }
.lf-index-stats dt { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--lf-ink-3); }
.lf-index-stats dd { margin: 0; font-size: clamp(2rem, 1.4rem + 2vw, 3.25rem); font-weight: 650; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; background: linear-gradient(180deg, var(--lf-ink) 35%, var(--c-accent-600)); -webkit-background-clip: text; background-clip: text; color: transparent; }

.lf-index { padding-top: clamp(1rem, 0.5rem + 2vw, 2.5rem); }
/* Featured latest article */
.lf-feat { position: relative; display: grid; gap: clamp(1.5rem, 1rem + 2vw, 2.25rem); align-items: center; color: var(--lf-ink); }
@media (min-width: 1000px) { .lf-feat { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2.5rem, 1rem + 4vw, 5rem); } }
.lf-feat__media { position: relative; overflow: hidden; aspect-ratio: 3 / 2; border-radius: var(--lf-radius); background: var(--c-paper-2); box-shadow: 0 50px 90px -55px color-mix(in srgb, var(--c-accent-900) 55%, transparent); }
@media (min-width: 1000px) { .lf-feat__media { aspect-ratio: 4 / 3; } }
.lf-feat__media picture { position: absolute; inset: 0; }
.lf-feat__img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease-out); }
.lf-feat:hover .lf-feat__img { transform: scale(1.035); }
.lf-feat__body { display: flex; flex-direction: column; gap: 1rem; }
.lf-feat__badge { display: inline-flex; align-items: center; gap: 0.55rem; align-self: flex-start; height: 32px; padding: 0 0.85rem 0 0.7rem; border-radius: var(--r-pill); background: color-mix(in srgb, var(--c-accent-300) 14%, transparent); color: var(--c-accent-600); font-size: 0.8125rem; font-weight: 650; }
.lf-pulse { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--c-accent-300); }
.lf-pulse::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--c-accent-300); opacity: 0; animation: lf-ping 2.4s var(--ease-out) infinite; }
@keyframes lf-ping { 0% { transform: scale(0.5); opacity: 0.8; } 100% { transform: scale(1.8); opacity: 0; } }
.lf-feat__title { font-size: clamp(1.9rem, 1.3rem + 2.1vw, 3.25rem); font-weight: 650; letter-spacing: -0.04em; line-height: 1.04; text-wrap: balance; }
.lf-feat:hover .lf-card__link { background-size: 100% 2px; }
.lf-feat .lf-card__link { background-size: 0 2px; }
.lf-feat .lf-card__link::after { border-radius: var(--lf-radius); }
.lf-feat:has(.lf-card__link:focus-visible) { outline: 2px solid var(--focus); outline-offset: 8px; border-radius: var(--lf-radius); }
.lf-feat__text { font-size: var(--fs-lede); line-height: 1.5; letter-spacing: -0.012em; color: var(--lf-ink-2); max-width: 34rem; }
.lf-feat__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; margin-top: 0.75rem; padding-top: 1.25rem; border-top: 1px solid var(--lf-line); }
.lf-feat__foot .lf-card__by { margin: 0; }
.lf-feat__cta { display: inline-flex; align-items: center; gap: 0.5rem; height: 48px; padding: 0 1.4rem; border-radius: var(--r-pill); background: var(--lf-ink); color: var(--c-white); font-size: 0.9375rem; font-weight: 600; transition: background-color var(--dur-2), gap 0.5s var(--ease-out); }
.lf-feat:hover .lf-feat__cta { background: var(--c-accent); color: var(--c-on-accent); gap: 0.75rem; }

/* Filter bar */
.lf-filter { margin: clamp(4rem, 3rem + 4vw, 7rem) 0 clamp(2rem, 1.5rem + 1.5vw, 3rem); padding-top: clamp(2rem, 1.5rem + 1.5vw, 3rem); border-top: 1px solid var(--lf-line-2); }
.lf-filter__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.25rem 2rem; margin-bottom: 1.5rem; }
.lf-filter__titles { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1.1rem; }
.lf-filter__title { font-size: var(--fs-h-md); font-weight: 650; letter-spacing: -0.04em; line-height: 1.05; color: var(--lf-ink); }
.lf-filter__count { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lf-ink-3); }
.lf-filter .lf-chips { display: flex; gap: 0.5rem; min-width: 0; }
@media (max-width: 1039.98px) {
  .lf-filter .lf-chips {
    overflow-x: auto;
    margin-inline: calc(-1 * var(--gutter));
    padding: 2px var(--gutter);
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - var(--gutter) - 24px), transparent);
    mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - var(--gutter) - 24px), transparent);
  }
  .lf-chips::-webkit-scrollbar { display: none; }
}
@media (min-width: 1040px) { .lf-filter .lf-chips { flex-wrap: wrap; } }
.lf-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0 0.95rem;
  border-radius: var(--r-pill);
  background: var(--c-white);
  border: 1px solid var(--lf-line-2);
  color: var(--lf-ink-2);
  font-size: 0.875rem;
  font-weight: 560;
  white-space: nowrap;
  transition: background-color var(--dur-2), color var(--dur-2), border-color var(--dur-2);
}
.lf-chip:hover { border-color: rgba(0, 0, 0, 0.28); color: var(--lf-ink); }
.lf-chip[aria-pressed="true"] { background: var(--lf-ink); border-color: var(--lf-ink); color: var(--c-white); }
.lf-chip__n { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--lf-ink-3); }
.lf-chip[aria-pressed="true"] .lf-chip__n { color: color-mix(in srgb, var(--c-white) 72%, transparent); }
html.no-js .lf-filter .lf-chips, html.no-js .lf-search { display: none; }
.lf-chip--tag { gap: 0.4rem; }
.lf-search { position: relative; display: flex; align-items: center; flex: none; width: 100%; }
@media (min-width: 700px) { .lf-search { width: 20rem; } }
.lf-search > .icon { position: absolute; left: 1rem; color: var(--lf-ink-3); pointer-events: none; }
.lf-search__input {
  width: 100%;
  height: 48px;
  padding: 0 2.75rem 0 2.85rem;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  background: var(--lf-paper);
  color: var(--lf-ink);
  font-size: 1rem;
  transition: background-color var(--dur-2), border-color var(--dur-2), box-shadow var(--dur-2);
}
.lf-search__input::placeholder { color: var(--lf-ink-3); }
.lf-search__input:hover { background: var(--c-surface-hover-light); }
.lf-search__input:focus { outline: none; background: var(--c-white); border-color: var(--c-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-accent) 15%, transparent); }
.lf-search__input::-webkit-search-cancel-button { cursor: pointer; }
.lf-search__kbd { position: absolute; right: 0.85rem; display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 0.35rem; border-radius: 6px; border: 1px solid var(--lf-line-2); background: var(--c-white); font-family: var(--font-mono); font-size: 0.75rem; color: var(--lf-ink-3); pointer-events: none; transition: opacity var(--dur-2); }
.lf-search__input:focus ~ .lf-search__kbd, .lf-search__input:not(:placeholder-shown) ~ .lf-search__kbd { opacity: 0; }
@media (hover: none) { .lf-search__kbd { display: none; } }
.lf-grid--index .lf-card mark { background: color-mix(in srgb, var(--c-accent) 14%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.lf-grid--index .lf-card.is-entering { animation: lf-card-in 0.7s var(--ease-out) both; animation-delay: var(--d, 0ms); }
@keyframes lf-card-in { from { opacity: 0; transform: translateY(14px); } }
.lf-empty { display: grid; justify-items: center; gap: 0.6rem; padding: clamp(3rem, 2rem + 4vw, 5rem) 1.5rem; border-radius: var(--lf-radius); border: 1px dashed var(--lf-line-2); text-align: center; color: var(--lf-ink); }
.lf-empty__title { font-size: 1.375rem; font-weight: 650; letter-spacing: -0.02em; }
.lf-empty__text { color: var(--lf-ink-2); }
.lf-empty__text a { color: var(--c-accent-600); }
.lf-empty .btn { margin-top: 0.75rem; }
.page-articles-index .lf-cta { padding-top: clamp(1rem, 2vw, 2rem); }

/* =========================================================================================
   7 · Legal documents
   ========================================================================================= */
.lf-hero--legal .lf-hero__title { font-size: clamp(2.75rem, 1.5rem + 5vw, 6.25rem); letter-spacing: -0.05em; line-height: 0.98; }
.lf-docmeta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 1.5rem;
  margin-top: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem);
  padding-top: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
  border-top: 1px solid var(--lf-line);
}
@media (min-width: 760px) { .lf-docmeta { display: flex; flex-wrap: wrap; column-gap: clamp(2rem, 1rem + 3vw, 3.5rem); } }
.lf-docmeta__row { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
@media (max-width: 759.98px) { .lf-docmeta__row:last-child:nth-child(odd), .lf-docmeta__row:has(a) { grid-column: 1 / -1; } }
.lf-hero--legal { padding-bottom: clamp(1.5rem, 1rem + 2vw, 3rem); }
.lf-docmeta dt { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--lf-ink-3); }
.lf-docmeta dd { margin: 0; font-size: 1rem; font-weight: 600; letter-spacing: -0.012em; color: var(--lf-ink); overflow-wrap: anywhere; }
.lf-docmeta dd a { color: var(--c-accent-600); text-decoration: none; }
.lf-docmeta dd a:hover { text-decoration: underline; }

.lf-legal {
  max-width: none;
  margin: 0;
  font-size: clamp(1.0625rem, 1.02rem + 0.18vw, 1.15rem);
  line-height: 1.75;
  color: var(--c-text);
}
.lf-legal > * + * { margin-top: 1em; }
.lf-legal h2 {
  margin-top: 2.6em;
  padding-top: 1.6em;
  border-top: 1px solid var(--lf-line);
  font-size: clamp(1.375rem, 1.15rem + 0.8vw, 1.875rem);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--lf-ink);
}
.lf-legal > h2:first-child, .lf-legal > .lf-note + p + h2:nth-child(3) { margin-top: 0; }
.lf-legal > h2:first-child { padding-top: 0; border-top: 0; }
.lf-legal h3 { margin-top: 1.9em; font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.3rem); font-weight: 640; letter-spacing: -0.02em; line-height: 1.35; color: var(--lf-ink); }
.lf-legal h2 + *, .lf-legal h3 + * { margin-top: 0.7em; }
.lf-hnum { display: block; margin-bottom: 0.55rem; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.12em; color: var(--c-accent-600); }
.lf-legal h3 .lf-hnum { display: inline; margin: 0 0.35em 0 0; font-size: 0.8em; letter-spacing: 0.04em; }
.lf-legal a { color: var(--c-accent-600); text-decoration-line: underline; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, var(--c-accent-600) 35%, transparent); text-underline-offset: 0.2em; overflow-wrap: anywhere; word-break: break-word; }
.lf-legal a:hover { text-decoration-color: currentColor; }
.lf-legal strong { color: var(--lf-ink); }
.lf-clause { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 0.5rem; }
.lf-clause__n { font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 500; line-height: 1.75rem; padding-top: 0.08em; color: var(--lf-ink-3); font-variant-numeric: tabular-nums; }
.lf-clause--sub { grid-template-columns: 2.25rem minmax(0, 1fr); margin-left: 3.5rem; }
.lf-clause + .lf-clause--sub, .lf-clause--sub + .lf-clause--sub { margin-top: 0.5em; }
@media (max-width: 559.98px) {
  .lf-clause { grid-template-columns: 2.5rem minmax(0, 1fr); gap: 0.25rem; }
  .lf-clause--sub { margin-left: 2.75rem; grid-template-columns: 2rem minmax(0, 1fr); }
}
.lf-note { position: relative; padding: 1rem 1.25rem 1rem 3.1rem; border-radius: 16px; background: var(--c-accent-050); color: var(--lf-ink-2); font-size: 0.95em; line-height: 1.6; }
.lf-note::before { content: "i"; position: absolute; left: 1.1rem; top: 1.15rem; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--c-accent); color: var(--c-on-accent); font-family: var(--font-serif); font-style: italic; font-size: 0.9rem; line-height: 1; }

/* Readable tables (stack into labelled cards on small screens) */
.lf-legal .table-wrap { margin: 1.75rem 0; border-radius: var(--lf-radius); border-color: var(--lf-line-2); background: var(--c-white); }
.lf-table { min-width: 0; font-size: 0.9375rem; line-height: 1.55; }
.lf-table th { background: var(--lf-paper); font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lf-ink-3); padding: 1rem 1.25rem; }
.lf-table td { padding: 1.15rem 1.25rem; color: var(--lf-ink-2); }
.lf-table td:first-child { color: var(--lf-ink); white-space: nowrap; }
.lf-table td strong { color: var(--lf-ink); }
.lf-cookies { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.lf-cookies code { font-size: 0.75rem; padding: 0.2em 0.5em; border-radius: 6px; background: var(--lf-paper); border: 1px solid var(--lf-line); color: var(--lf-ink); white-space: nowrap; }
@media (max-width: 759.98px) {
  .lf-legal .table-wrap { overflow: visible; border: 0; background: none; border-radius: 0; }
  .lf-table, .lf-table tbody, .lf-table tr, .lf-table td { display: block; width: 100%; }
  .lf-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .lf-table tr { padding: 0.5rem 1.1rem; border-radius: var(--lf-radius); border: 1px solid var(--lf-line-2); background: var(--c-white); }
  .lf-table tr + tr { margin-top: 0.75rem; }
  .lf-table td { padding: 0.75rem 0; border-bottom: 1px solid var(--lf-line); white-space: normal; }
  .lf-table tbody tr td:last-child { border-bottom: 0; }
  .lf-table td::before { content: attr(data-label); display: block; margin-bottom: 0.3rem; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lf-ink-3); }
  .lf-table td:first-child { font-size: 1.0625rem; }
}

/* Rail help card + document end */
.lf-help { margin-top: 2rem; padding: 1.25rem; border-radius: 20px; background: var(--lf-paper); }
.lf-help__title { font-size: 0.9375rem; font-weight: 650; letter-spacing: -0.012em; color: var(--lf-ink); }
.lf-help__text { margin: 0.3rem 0 1rem; font-size: 0.875rem; line-height: 1.45; color: var(--lf-ink-2); }
.lf-help .btn { width: 100%; }
.lf-docend { margin-top: clamp(3rem, 2.5rem + 2vw, 4.5rem); display: grid; gap: 1.5rem; }
.lf-docend__card { display: flex; gap: 1.1rem; align-items: flex-start; padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); border-radius: var(--lf-radius); background: var(--lf-paper); }
.lf-docend__title { font-size: 1.125rem; font-weight: 650; letter-spacing: -0.018em; color: var(--lf-ink); }
.lf-docend__text { margin-top: 0.3rem; color: var(--lf-ink-2); line-height: 1.55; }
.lf-docend__text a { color: var(--c-accent-600); font-weight: 600; overflow-wrap: anywhere; }
.lf-docend__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding-top: 1.5rem; border-top: 1px solid var(--lf-line-2); }
.lf-docend__rev { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.9375rem; color: var(--lf-ink-2); }
.lf-docend__rev .icon { color: var(--c-accent-600); }

/* Policy cards */
.lf-docs { display: grid; gap: var(--gap); }
@media (min-width: 760px) { .lf-docs--n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lf-docs--n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lf-doc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: clamp(1.4rem, 1.1rem + 1vw, 2rem);
  border-radius: var(--lf-radius);
  background: var(--c-white);
  color: var(--lf-ink);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04);
  transition: transform 0.6s var(--ease-out), box-shadow var(--dur-3) var(--ease-out);
}
.section--light .lf-doc-card { background: var(--lf-paper); box-shadow: none; }
.lf-doc-card:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), var(--shadow-md); }
.section--light .lf-doc-card:hover { background: var(--c-white); }
.lf-doc-card__icon {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 48px; height: 48px;
  margin-bottom: 0.6rem;
  border-radius: 14px;
  color: var(--c-accent-600);
  background: linear-gradient(140deg, var(--c-accent-050), var(--c-accent-100));
  border: 1px solid color-mix(in srgb, var(--c-accent) 12%, transparent);
}
.lf-doc-card__title { font-size: 1.375rem; font-weight: 650; letter-spacing: -0.025em; line-height: 1.2; }
.lf-doc-card__title .lf-card__link::after { border-radius: var(--lf-radius); }
.lf-doc-card:hover .lf-card__link { background-size: 100% 1.5px; }
.lf-doc-card:has(.lf-card__link:focus-visible) { outline: 2px solid var(--focus); outline-offset: 4px; }
.lf-doc-card__text { font-size: 0.9375rem; line-height: 1.55; color: var(--lf-ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lf-doc-card__meta { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; margin-top: auto; padding-top: 0.75rem; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lf-ink-3); }
.lf-doc-card__go { position: absolute; top: clamp(1.4rem, 1.1rem + 1vw, 2rem); right: clamp(1.4rem, 1.1rem + 1vw, 2rem); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--lf-line-2); color: var(--lf-ink); transition: transform 0.5s var(--ease-out), background-color var(--dur-2), color var(--dur-2), border-color var(--dur-2); }
.lf-doc-card:hover .lf-doc-card__go { transform: translateX(3px); background: var(--lf-ink); border-color: var(--lf-ink); color: var(--c-white); }

/* =========================================================================================
   8 · Privacy Centre
   ========================================================================================= */
.lf-hero--pc .lf-hero__inner { display: grid; gap: clamp(2.5rem, 1.5rem + 3vw, 4rem); align-items: center; }
@media (min-width: 1000px) { .lf-hero--pc .lf-hero__inner { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }
.lf-hero--pc .lf-hero__title { font-size: clamp(3rem, 1.5rem + 6vw, 7.5rem); letter-spacing: -0.052em; line-height: 0.96; max-width: 9ch; }
.lf-hero__ctas { margin-top: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem); }
@media (max-width: 559.98px) { .lf-hero__ctas .btn { flex: 1 1 100%; } }
.lf-pc-hero__frame { position: relative; overflow: hidden; aspect-ratio: 5 / 4; border-radius: var(--lf-radius); background: var(--c-paper-2); box-shadow: 0 50px 90px -50px color-mix(in srgb, var(--c-accent-900) 50%, transparent); transform-origin: 50% 50%; }
.lf-pc-hero__frame picture { position: absolute; inset: 0; }
.lf-pc-hero__img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); }
.lf-pc-hero__lock { position: absolute; left: 1rem; bottom: 1rem; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: var(--c-white); background: color-mix(in srgb, var(--c-black) 45%, transparent); border: 1px solid color-mix(in srgb, var(--c-white) 25%, transparent); backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%); }
.lf-band--pc .lf-short--band { border-top: 0; padding-top: clamp(0.5rem, 1vw, 1rem); }

.lf-sechead { max-width: 46rem; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.25rem); display: flex; flex-direction: column; gap: 0.9rem; }
.lf-sechead__title { font-size: var(--fs-h-md); font-weight: 650; letter-spacing: -0.04em; line-height: 1.05; color: var(--lf-ink); }
.lf-sechead__intro { font-size: var(--fs-lede); color: var(--lf-ink-2); line-height: 1.45; }
.lf-sechead--tight { margin-bottom: 0; }

.lf-pc-options { padding-top: clamp(2rem, 1rem + 3vw, 4rem); }
.lf-pc-grid { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) {
  .lf-pc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lf-pc-grid--n7 > :last-child, .lf-pc-grid--n5 > :last-child, .lf-pc-grid--n3 > :last-child { grid-column: span 2; }
}
@media (min-width: 1080px) {
  .lf-pc-grid--n7 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lf-pc-grid--n7 > :last-child { grid-column: auto; }
  .lf-pc-grid--n7 > .lf-pc-card--settings { grid-column: span 2; }
}
.lf-pc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-height: clamp(220px, 180px + 4vw, 270px);
  padding: clamp(1.4rem, 1.1rem + 0.9vw, 1.9rem);
  border-radius: var(--lf-radius);
  background: var(--lf-paper);
  color: var(--lf-ink);
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.6s var(--ease-out), box-shadow var(--dur-3) var(--ease-out), background-color var(--dur-3);
}
.lf-pc-card > * { position: relative; z-index: 1; }
.lf-pc-card:hover { transform: translateY(-4px); background: var(--c-white); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), var(--shadow-md); }
.lf-pc-card__icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: auto; border-radius: 14px; background: var(--c-white); color: var(--c-accent-600); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 8px 20px -10px color-mix(in srgb, var(--c-accent) 45%, transparent); }
.lf-pc-card__title { margin-top: 1.75rem; font-size: 1.3rem; font-weight: 650; letter-spacing: -0.024em; line-height: 1.2; }
.lf-pc-card__title .lf-card__link::after { border-radius: var(--lf-radius); }
.lf-pc-card:hover .lf-card__link { background-size: 100% 1.5px; }
.lf-pc-card:has(.lf-card__link:focus-visible) { outline: 2px solid var(--focus); outline-offset: 4px; }
.lf-pc-card__text { font-size: 0.9375rem; line-height: 1.5; color: var(--lf-ink-2); }
.lf-pc-card__cta { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.4rem; font-size: 0.875rem; font-weight: 600; color: var(--c-accent-600); }
.lf-pc-card__cta .icon { transition: transform 0.5s var(--ease-out); }
.lf-pc-card:hover .lf-pc-card__cta .icon { transform: translateX(4px); }
/* The actionable card: dark glass with brand light */
.lf-pc-card--settings { background: var(--c-ink-1); color: var(--c-white); }
.lf-pc-card--settings::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(70% 90% at 100% 0%, color-mix(in srgb, var(--c-accent) 60%, transparent), transparent 62%), radial-gradient(60% 80% at 0% 100%, color-mix(in srgb, var(--c-accent-300) 32%, transparent), transparent 60%);
  opacity: 1;
}
.lf-pc-card--settings:hover { background: var(--c-ink-1); box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--c-accent) 70%, transparent); }
.lf-pc-card--settings .lf-pc-card__icon { background: color-mix(in srgb, var(--c-white) 10%, transparent); color: var(--c-white); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-white) 16%, transparent); }
.lf-pc-card--settings .lf-pc-card__text { color: color-mix(in srgb, var(--c-white) 78%, transparent); }
.lf-pc-card--settings .lf-pc-card__cta { color: var(--c-accent-300); }
.lf-pc-card--settings:has(.lf-card__link:focus-visible) { outline-color: var(--c-accent); }
.lf-consent { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; }
.lf-consent > div { display: inline-flex; align-items: center; gap: 0.45rem; height: 30px; padding: 0 0.7rem; border-radius: var(--r-pill); background: color-mix(in srgb, var(--c-white) 8%, transparent); border: 1px solid color-mix(in srgb, var(--c-white) 12%, transparent); font-size: 0.8125rem; }
.lf-consent dt { color: color-mix(in srgb, var(--c-white) 70%, transparent); }
.lf-consent dd { margin: 0; font-weight: 650; color: var(--c-white); }
.lf-consent dd::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 0.4rem; border-radius: 50%; background: color-mix(in srgb, var(--c-white) 40%, transparent); vertical-align: 0.1em; }
.lf-consent dd.is-on::before { background: var(--c-accent-300); box-shadow: 0 0 8px var(--c-accent-300); }

.lf-pc-requests__grid { display: grid; gap: 2rem clamp(3rem, 2rem + 4vw, 6rem); }
@media (min-width: 1000px) { .lf-pc-requests__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.lf-pc-requests__body { font-size: var(--fs-body-lg); line-height: 1.7; color: var(--lf-ink-2); max-width: 40rem; }
.lf-pc-requests__body p + p { margin-top: 1em; }
.lf-pc-requests__body p:first-child { font-size: 1.15em; line-height: 1.55; color: var(--lf-ink); letter-spacing: -0.012em; }
.lf-pc-requests__body p a { color: var(--c-accent-600); font-weight: 550; }
.lf-pc-requests__rights { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.75rem 0; }
.lf-pc-requests__rights span { display: inline-flex; align-items: center; gap: 0.45rem; height: 36px; padding: 0 0.9rem; border-radius: var(--r-pill); background: var(--c-white); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06); font-size: 0.875rem; font-weight: 600; color: var(--lf-ink); }
.section--light .lf-pc-requests__rights span { background: var(--lf-paper); box-shadow: none; }
.lf-pc-requests__rights .icon { color: var(--c-accent-600); }
@media (max-width: 559.98px) { .lf-pc-requests__body .btn-row .btn { flex: 1 1 100%; } }

.lf-legal--wide > h2:first-child { font-size: var(--fs-h-md); letter-spacing: -0.04em; line-height: 1.05; }
.lf-legal--wide > p { max-width: 44rem; color: var(--lf-ink-2); font-size: var(--fs-body-lg); }
.lf-pc-cookies .table-wrap { margin-top: clamp(1.75rem, 1.5rem + 1vw, 2.5rem); }
@media (min-width: 760px) {
  .lf-pc-cookies .lf-table td:nth-child(1) { width: 12%; }
  .lf-pc-cookies .lf-table td:nth-child(2) { width: 26%; }
  .lf-pc-cookies .lf-table td:nth-child(3) { width: 30%; }
}
.lf-pc-cookies__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: 1.5rem; color: var(--lf-ink-2); font-size: 0.9375rem; }

/* =========================================================================================
   9 · 404 (built by the foundation's default template — styled here)
   ========================================================================================= */
.page-404 .hero--404 { min-height: min(86svh, 820px); }
.page-404 .hero--404::after {
  content: "404" / "";
  position: absolute;
  z-index: -1;
  right: var(--gutter);
  top: 50%;
  transform: translateY(-60%);
  font-size: clamp(10rem, 3rem + 24vw, 30rem);
  font-weight: 700;
  letter-spacing: -0.07em;
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--c-accent-300) 16%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--c-accent-400) 10%, transparent), color-mix(in srgb, var(--c-accent-300) 2%, transparent) 70%);
  -webkit-background-clip: text;
  background-clip: text;
  pointer-events: none;
  user-select: none;
}
.page-404 .hero--404 .hero__eyebrow { font-variant-numeric: tabular-nums; }
.page-404 .hero--404 + .section { padding-bottom: clamp(4rem, 3rem + 4vw, 7rem); }
.page-404 .hero--404 + .section .tile { background: color-mix(in srgb, var(--c-white) 3%, transparent); }
.page-404 .hero--404 + .section .tile--link:hover { background: color-mix(in srgb, var(--c-white) 5.5%, transparent); }
@media (max-width: 639.98px) { .page-404 .hero--404::after { top: 18%; transform: none; } }

/* =========================================================================================
   10 · Motion states (hidden-until-revealed only with .motion; reduced motion = static)
   ========================================================================================= */
.motion:not(.tw-ready):not(.tw-failsafe) [data-lf-intro],
.motion:not(.tw-ready):not(.tw-failsafe) .lf-crumbs,
.motion:not(.tw-ready):not(.tw-failsafe) [data-lf-intro-media] { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .lf-hero__glow span, .lf-pulse::after { animation: none !important; }
  .lf-feature__img, .lf-pc-hero__img { transform: none !important; }
  .lf-card:hover .lf-card__img, .lf-feat:hover .lf-feat__img, .lf-pager__card:hover .lf-pager__img { transform: none; }
}

@media (max-width: 639.98px) {
  .lf-pc-card { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 1rem; row-gap: 0.35rem; min-height: 0; padding: 1.25rem; align-content: start; }
  .lf-pc-card > * { grid-column: 2; }
  .lf-pc-card__icon { grid-column: 1; grid-row: 1 / span 3; margin: 0; }
  .lf-pc-card__title { margin-top: 0.15rem; font-size: 1.15rem; }
  .lf-consent { grid-column: 1 / -1; }
  .lf-pc-card--settings .lf-pc-card__cta { grid-column: 1 / -1; }
}

/* =========================================================================================
   11 · Print (articles + legal documents print as clean documents)
   ========================================================================================= */
@media print {
  .is-longform .site-header, .is-longform .site-footer, .is-longform .mobile-cta, .is-longform .cookie, .is-longform .veil,
  .is-longform .skip-link, .lf-rail, .lf-share, .lf-cta, .lf-more, .lf-hero__glow, .lf-hero__grid, .lf-filter, .lf-pull, .lf-docend__row { display: none !important; }
  .is-longform main, .lf-hero, .lf-article-body { background: var(--c-white) !important; padding: 0 !important; }
  .lf-hero { padding-bottom: 1rem !important; }
  .lf-hero__title { font-size: 28pt !important; max-width: none; }
  .lf-feature__frame { box-shadow: none; aspect-ratio: 2 / 1; }
  .lf-feature__img { transform: none !important; }
  .lf-main, .lf-prose, .lf-legal { max-width: none; font-size: 11pt; line-height: 1.55; color: #000; }
  .lf-digest, .lf-short--legal, .lf-author-card, .lf-docend__card { background: none; border: 1px solid var(--c-field-border); }
  .lf-prose a[href^="http"]::after, .lf-legal a[href^="http"]::after { content: ""; }
  .lf-legal h2, .lf-prose h2 { break-after: avoid; }
  .lf-fig, .lf-table tr { break-inside: avoid; }
  .motion [data-reveal], [data-lf-intro], .lf-crumbs { opacity: 1 !important; transform: none !important; }
}

/* ==== 80-conversion.css ==== */
/* 80-conversion.css — OWNED BY THE CONVERSION AGENT.
   1. Form kit (.tf*) — used by every form block on the site (form:contact / form:quote / form:careers renderers)
   2. Instant estimator (.est*)
   3. Quote page (.conv--quote)      4. Contact page (.conv--contact)      5. Careers page (.conv--careers)
   Theme-aware: everything reads the section theme variables (--fg, --field-bg, --border …). */

/* =============================================================================================
   1 · FORM KIT
   ============================================================================================= */
[data-theme="light"], :root {
  --tf-card-bg: var(--c-white);
  --tf-card-border: rgba(0, 0, 0, 0.07);
  --tf-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 40px 90px -50px color-mix(in srgb, var(--c-shade) 32%, transparent);
  --tf-pop-bg: var(--c-white);
  --tf-ring: color-mix(in srgb, var(--c-accent) 18%, transparent);
  --tf-fill: var(--c-on-dark);
}
[data-theme="dark"] {
  --tf-card-bg: linear-gradient(180deg, color-mix(in srgb, var(--c-white) 5.5%, transparent), color-mix(in srgb, var(--c-white) 2.5%, transparent));
  --tf-card-border: color-mix(in srgb, var(--c-white) 10%, transparent);
  --tf-card-shadow: 0 50px 120px -60px color-mix(in srgb, var(--c-accent) 55%, transparent);
  --tf-pop-bg: var(--c-ink-2);
  --tf-ring: color-mix(in srgb, var(--c-accent-400) 24%, transparent);
  --tf-fill: color-mix(in srgb, var(--c-white) 4%, transparent);
}
.section--light .tf-card { --tf-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 30px 70px -45px color-mix(in srgb, var(--c-shade) 30%, transparent); border-color: rgba(0, 0, 0, 0.09); }

/* ---- Block layouts ---- */
.tf-block--split { display: grid; gap: clamp(2rem, 1rem + 3vw, 3.5rem) 5rem; }
@media (min-width: 1000px) {
  .tf-block--split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .tf-block--split .tf-block__aside { position: sticky; top: calc(var(--header-h) + 2.5rem); }
}
.tf-block--stack { max-width: 900px; margin-inline: auto; }
@media (max-width: 999.98px) {
  .tf-block--split { gap: 1.75rem; }
  .tf-block--split > .tf-block__aside { display: contents; }
  .tf-block--split .tf-head { order: 1; margin-bottom: 0; }
  .tf-block--split .qsum { order: 2; margin-bottom: 0; }
  .tf-block--split > .tf-card { order: 3; }
  .tf-block--split .tf-points, .tf-block--split .tf-aside__more { order: 4; }
  .tf-block--split .tf-aside__more { margin-top: -0.5rem; }
}
.tf-block--stack .tf-head { text-align: center; margin-inline: auto; }

/* ---- Aside head ---- */
.tf-head { margin-bottom: clamp(1.75rem, 1rem + 2vw, 2.5rem); max-width: 34rem; }
.tf-head__eyebrow { margin-bottom: 1.1rem; }
.tf-head__title {
  font-size: clamp(2.125rem, 1.35rem + 2.6vw, 3.6rem);
  font-weight: var(--fw-h);
  letter-spacing: -0.04em;
  line-height: 1.02;
  text-wrap: balance;
  max-width: 14ch;
}
.tf-head__title--long { font-size: clamp(1.75rem, 1.25rem + 1.55vw, 2.6rem); line-height: 1.08; letter-spacing: -0.032em; max-width: 21ch; }
.tf-head__title em { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; color: var(--accent); }
.tf-head__intro { margin-top: 1.1rem; font-size: var(--fs-body-lg); line-height: 1.55; color: var(--fg-2); max-width: 32rem; }
.tf-aside__more { margin-top: 1.5rem; }

/* ---- Contact points ---- */
.tf-points { display: grid; border-top: 1px solid var(--border); }
.tf-point {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 72px;
  padding: 0.85rem 0.25rem 0.85rem 0;
  border-bottom: 1px solid var(--border);
  color: var(--fg);
  text-decoration: none;
  transition: color var(--dur-2);
}
a.tf-point:hover { color: var(--accent); }
.tf-point__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px; height: 44px;
  border-radius: 14px;
  color: var(--accent);
  background: var(--tf-card-bg);
  border: 1px solid var(--tf-card-border);
  box-shadow: 0 6px 16px -10px color-mix(in srgb, var(--c-shade) 35%, transparent);
}
.tf-point__txt { display: grid; gap: 0.15rem; min-width: 0; }
.tf-point__k { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); }
.tf-point__v { font-weight: 600; letter-spacing: -0.012em; overflow-wrap: anywhere; }
.tf-point__go { margin-left: auto; flex: none; color: var(--fg-3); opacity: 0; transform: translate(-4px, 4px); transition: opacity var(--dur-2), transform var(--dur-3) var(--ease-out); }
a.tf-point:hover .tf-point__go, a.tf-point:focus-visible .tf-point__go { opacity: 1; transform: none; color: var(--accent); }
.tf-points--compact .tf-point { min-height: 60px; padding-block: 0.6rem; }
@media (max-width: 639.98px) {
  .tf-point { min-height: 64px; }
  .tf-point__go { opacity: 1; transform: none; }
}

/* ---- Card ---- */
.tf-card {
  position: relative;
  padding: clamp(1.25rem, 0.45rem + 3vw, 3rem);
  border-radius: clamp(22px, 0.9rem + 1vw, 32px);
  background: var(--tf-card-bg);
  border: 1px solid var(--tf-card-border);
  box-shadow: var(--tf-card-shadow);
}
.tf-card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c-accent) 55%, transparent), color-mix(in srgb, var(--c-accent-300) 55%, transparent), transparent);
  pointer-events: none;
}
[data-theme="dark"] .tf-card { backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
[data-theme="dark"] .tf-card::before { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c-accent-400) 80%, transparent), color-mix(in srgb, var(--c-accent-300) 70%, transparent), transparent); }

/* ---- Error summary ---- */
.tf .form__summary { border-left: 0; border-radius: 16px; padding: 1.1rem 1.25rem 1.15rem; background: var(--c-danger-050); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-danger) 25%, transparent); }
[data-theme="dark"] .tf .form__summary { background: color-mix(in srgb, var(--c-danger-dark) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-danger-dark) 30%, transparent); }
.tf .form__summary:focus { outline: none; }
.tf .form__summary:focus-visible { outline: 2px solid var(--danger); outline-offset: 3px; }
.tf .form__summary-title { display: flex; align-items: center; gap: 0.5rem; }
.tf .form__summary ul { margin-top: 0.4rem; }

/* ---- Grid & groups ---- */
.tf .tf-grid { gap: 1rem; }
.tf-group { margin: 0 0 2rem; }
.tf-group + .tf-group { padding-top: 2rem; border-top: 1px solid var(--border); }
.tf-group > legend { float: left; width: 100%; }
.tf-group > legend + * { clear: both; }
.tf .tf-group__legend {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  font-size: 1.0625rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.tf .form__legend-n { height: 24px; padding: 0 0.5rem; font-size: 0.6875rem; }
.tf-group__note { margin: -0.6rem 0 1.25rem; font-size: var(--fs-small); color: var(--fg-2); }

/* ---- Field + floating label ---- */
.tf-field { min-width: 0; }
.tf-control { position: relative; }
.tf .tf-input {
  height: 60px;
  min-height: 60px;
  padding: 1.55rem 1rem 0.45rem;
  border-radius: 14px;
  font-size: 1.0625rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  transition: border-color var(--dur-2), box-shadow var(--dur-2), background-color var(--dur-2), padding var(--dur-2);
}
.tf .tf-input:hover { border-color: var(--fg-2); }
.tf .tf-input:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 4px var(--tf-ring); }
[data-theme="dark"] .tf .tf-input:focus { border-color: var(--c-accent-400); }
.tf .tf-input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px var(--c-accent-050) inset; -webkit-text-fill-color: var(--fg); }
.tf-label.field__label {
  position: absolute;
  z-index: 1;
  left: calc(1rem + 1px);
  top: 0;
  display: flex;
  align-items: center;
  height: 60px;
  max-width: calc(100% - 2.4rem);
  margin: 0;
  overflow: hidden;
  font-size: 1.0625rem;
  font-weight: 450;
  letter-spacing: -0.01em;
  color: var(--fg-3);
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
  transform-origin: 0 50%;
  transition: transform 0.32s var(--ease-out), color var(--dur-2), font-weight var(--dur-2);
}
.tf-label .field__req { margin-left: 0.15rem; }
.tf-control:has(> .tf-input:focus) > .tf-label,
.tf-control:has(> :is(input, textarea).tf-input:not(:placeholder-shown)) > .tf-label,
.tf-label.tf-label--float {
  transform: translateY(-0.72rem) scale(0.76);
  max-width: calc((100% - 2.4rem) / 0.76);
  color: var(--fg-2);
  font-weight: 560;
}
.tf-control:has(> .tf-input:focus) > .tf-label { color: var(--accent); }
.est .tf-control:has(> .tf-input:focus) > .tf-label { color: var(--c-accent-300); }
.has-error .tf-control > .tf-label { color: var(--danger); }
.tf .has-error .tf-input, .tf .tf-input[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-danger) 10%, transparent); }
.tf .field__help { margin-top: 0.45rem; padding-left: 0.1rem; }
.tf .field__error { padding-left: 0.1rem; }
.tf-field.is-valid .tf-control::after {
  content: "";
  position: absolute;
  right: 1rem;
  top: 30px;
  width: 18px; height: 18px;
  margin-top: -9px;
  border-radius: 50%;
  background: var(--c-accent-600) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat;
  animation: tf-pop 0.45s var(--ease-spring);
  pointer-events: none;
}
[data-theme="dark"] .tf-field.is-valid .tf-control::after { background-color: var(--c-accent-600); }
.tf-field.is-valid .tf-control--area::after, .tf-field.is-valid .tf-combo::after, .tf-field.is-valid .tf-control--select::after { display: none; }
@keyframes tf-pop { from { transform: scale(0.4); opacity: 0; } }

/* Prefix (£) */
.tf-prefix { position: absolute; left: calc(1rem + 1px); top: 1.55rem; z-index: 1; font-size: 1.0625rem; line-height: 1.6; color: var(--fg-2); opacity: 0; transition: opacity var(--dur-2); pointer-events: none; }
.tf-control--prefix:has(> .tf-input:focus) > .tf-prefix, .tf-control--prefix:has(> input.tf-input:not(:placeholder-shown)) > .tf-prefix { opacity: 1; }
.tf .tf-control--prefix:has(> .tf-input:focus) > .tf-input, .tf .tf-control--prefix:has(> input.tf-input:not(:placeholder-shown)) > .tf-input { padding-left: 1.85rem; }

/* Textarea */
.tf .tf-control--area .tf-input { height: auto; min-height: 168px; padding-top: 1.9rem; padding-bottom: 2rem; resize: vertical; line-height: 1.5; }
.tf-control--area > .tf-label.field__label { height: auto; top: 1.15rem; }
.tf-control--area:has(> .tf-input:focus) > .tf-label, .tf-control--area:has(> .tf-input:not(:placeholder-shown)) > .tf-label { transform: translateY(-0.6rem) scale(0.76); }
.tf .tf-count { position: absolute; top: auto; right: 0.9rem; bottom: 0.7rem; font-family: var(--font-mono); font-size: 0.6875rem; color: var(--fg-3); pointer-events: none; }

/* Select (native — enhanced to a searchable combobox by JS when long) */
.tf .tf-select { padding-right: 2.8rem; cursor: pointer; text-overflow: ellipsis; }
.tf .tf-select:has(option[value=""]:checked) { color: var(--fg-3); }
.tf-chev { position: absolute; right: 1rem; top: 30px; transform: translateY(-50%); color: var(--fg-2); pointer-events: none; transition: transform var(--dur-3) var(--ease-out); }
.tf-combo.is-open .tf-chev { transform: translateY(-50%) rotate(180deg); }
.tf-select.is-enhanced { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0 !important; opacity: 0; pointer-events: none; }

/* ---- Combobox (type-ahead) ---- */
.tf-combo .tf-input { padding-right: 2.8rem; }
.tf-combo__toggle {
  position: absolute;
  right: 0.35rem;
  top: 8px;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  color: var(--fg-2);
}
.tf-combo__toggle:hover { color: var(--fg); background: var(--surface); }
.tf-combo__toggle .icon { transition: transform var(--dur-3) var(--ease-out); }
.tf-combo.is-open .tf-combo__toggle .icon { transform: rotate(180deg); }
.tf-combo__list {
  position: absolute;
  z-index: 40;
  left: 0; right: 0;
  top: calc(100% + 8px);
  max-height: min(320px, 46vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px;
  border-radius: 16px;
  background: var(--tf-pop-bg);
  border: 1px solid var(--border-strong);
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.32), 0 4px 12px rgba(0, 0, 0, 0.06);
  animation: tf-pop-in 0.22s var(--ease-out);
}
[data-theme="dark"] .tf-combo__list { box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8); }
@keyframes tf-pop-in { from { opacity: 0; transform: translateY(-6px) scale(0.985); } }
.tf-combo__opt {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 44px;
  padding: 0.45rem 0.7rem;
  border-radius: 10px;
  font-size: var(--fs-small);
  color: var(--fg);
  cursor: pointer;
  scroll-margin: 6px;
}
.tf-combo__opt.is-active { background: var(--accent-soft); }
.tf-combo__code {
  display: inline-grid;
  place-items: center;
  flex: none;
  min-width: 34px;
  height: 22px;
  padding: 0 0.35rem;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--fg-2);
  background: var(--tf-fill);
  border: 1px solid var(--border);
}
.tf-combo__opt.is-active .tf-combo__code { color: var(--accent); border-color: transparent; background: var(--tf-card-bg); }
.tf-combo__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tf-combo__name mark { background: none; color: var(--accent); font-weight: 700; }
.tf-combo__native { flex: none; color: var(--fg-3); font-size: var(--fs-xs); }
.tf-combo__tick { flex: none; color: var(--accent); }
.tf-combo__empty, .tf-combo__hint { padding: 0.7rem 0.75rem; font-size: var(--fs-xs); color: var(--fg-2); }
.tf-combo__hint { border-top: 1px solid var(--border); margin-top: 4px; }

/* Language pair + swap */
.tf-pair { display: grid; gap: 0.75rem; grid-template-columns: minmax(0, 1fr); position: relative; }
@media (min-width: 640px) {
  .tf-pair { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: 0.6rem; }
}
.tf-swap {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  margin-top: 8px;
  border-radius: 50%;
  color: var(--accent);
  background: var(--tf-card-bg);
  border: 1px solid var(--border-strong);
  box-shadow: 0 6px 16px -10px rgba(0, 0, 0, 0.4);
  transition: transform 0.5s var(--ease-out), background-color var(--dur-2), border-color var(--dur-2);
}
[data-theme="dark"] .tf-swap { background: var(--c-ink-3); }
.tf-swap:hover { border-color: var(--accent); }
.tf-swap.is-spun { transform: rotate(180deg); }
@media (max-width: 639.98px) {
  .tf-pair { gap: 1rem; }
  .tf-pair .tf-swap { display: none; }
}

.tf-field--solo > .tf-legend { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- Choices (radio / checkbox pills) ---- */
.tf-legend.field__label { margin-bottom: 0.7rem; font-size: var(--fs-small); font-weight: 600; color: var(--fg); }
.tf-set legend + .field__help { margin: -0.35rem 0 0.8rem; }
.tf .choice { min-height: 52px; padding: 0.6rem 1.2rem 0.6rem 0.95rem; border-color: var(--field-border); }
.tf .choice:has(input:checked) { border-color: var(--c-accent); box-shadow: 0 0 0 1px var(--c-accent) inset; }
[data-theme="dark"] .tf .choice:has(input:checked) { border-color: var(--c-accent-400); box-shadow: 0 0 0 1px var(--c-accent-400) inset; }
.tf-choices + .field__help { margin-top: 0.6rem; }

/* ---- Multi-select chips ---- */
.tf .tf-multi { display: block; padding: 0; gap: 0; border-radius: 16px; overflow: hidden; }
.tf-multi__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; padding: 0.75rem; }
.tf-multi__search { flex: 1 1 14rem; }
.tf-multi__search .input { min-height: 44px; border-radius: 12px; border-color: var(--border-strong); background: var(--tf-fill); }
.tf-multi__count { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.06em; color: var(--fg-2); white-space: nowrap; }
.tf-multi__count span { color: var(--fg); font-weight: 700; }
.tf-multi__clear { min-height: 36px; padding: 0 0.75rem; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600; color: var(--accent); }
.tf-multi__clear:hover { background: var(--accent-soft); }
.tf .tf-multi__chips { padding: 0 0.75rem 0.75rem; min-height: 0; gap: 0.4rem; }
.tf .tf-multi__chips .multi__none { font-size: var(--fs-xs); color: var(--fg-3); padding: 0.3rem 0.1rem; }
.tf .multi__chip { height: 32px; padding: 0 0.3rem 0 0.75rem; background: linear-gradient(135deg, var(--c-fill-a), var(--c-accent)); box-shadow: 0 6px 14px -8px color-mix(in srgb, var(--c-accent) 90%, transparent); }
.tf .tf-multi__opts { max-height: 300px; padding: 0.75rem; border-top: 1px solid var(--border); background: var(--tf-fill); gap: 0.35rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 176px), 1fr)); }
.tf .multi__opt { gap: 0.6rem; min-height: 44px; padding: 0.4rem 0.7rem; border-radius: 10px; background: var(--field-bg); border-color: var(--border); line-height: 1.3; overflow-wrap: anywhere; min-width: 0; }
@media (max-width: 559.98px) { .tf .tf-multi__opts { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0.5rem; } .tf .multi__opt { font-size: var(--fs-xs); padding: 0.4rem 0.55rem; gap: 0.45rem; } }
[data-theme="light"] .tf .multi__opt { background: var(--c-white); }
.multi__tick { display: inline-grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--fg-3); color: var(--c-on-accent); transition: background-color var(--dur-1), border-color var(--dur-1); }
.multi__tick .icon { opacity: 0; transform: scale(0.5); transition: opacity var(--dur-1), transform 0.3s var(--ease-spring); }
.multi__opt:has(input:checked) .multi__tick { background: var(--c-accent); border-color: var(--c-accent); }
.multi__opt:has(input:checked) .multi__tick .icon { opacity: 1; transform: none; }
.tf .multi__empty { padding: 0.75rem; }
.tf .field__set[aria-invalid="true"] .multi { border-color: var(--danger); }

/* ---- Drop zone + file list ---- */
.tf-drop { position: relative; }
.tf-drop__input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
html:not(.js) .tf-drop__input { position: static; width: 100%; height: auto; margin-top: 0.75rem; opacity: 1; overflow: visible; }
.tf-drop__ui {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  min-height: 104px;
  padding: 1.25rem 1.4rem;
  border: 1.5px dashed var(--field-border);
  border-radius: 18px;
  background: var(--field-bg);
  cursor: pointer;
  transition: border-color var(--dur-2), background-color var(--dur-2), transform 0.5s var(--ease-out), box-shadow var(--dur-2);
}
.tf-drop__ui:hover { border-color: var(--c-accent); background: var(--accent-soft); }
.tf-drop.is-dragover .tf-drop__ui { border-style: solid; border-color: var(--c-accent); background: var(--accent-soft); transform: scale(1.012); box-shadow: 0 0 0 4px var(--tf-ring); }
.tf-drop__input:focus-visible + .tf-drop__ui { outline: 2px solid var(--focus); outline-offset: 3px; }
.tf-drop__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 56px; height: 56px;
  border-radius: 16px;
  color: var(--c-on-accent);
  background: var(--grad-fill);
  box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--c-accent) 90%, transparent), inset 0 1px 0 color-mix(in srgb, var(--c-white) 30%, transparent);
  transition: transform 0.5s var(--ease-spring);
}
.tf-drop.is-dragover .tf-drop__icon, .tf-drop__ui:hover .tf-drop__icon { transform: translateY(-3px); }
.tf-drop__text { display: grid; gap: 0.25rem; min-width: 0; }
.tf-drop__title { font-weight: 600; letter-spacing: -0.012em; color: var(--fg); }
.tf-drop__browse { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.tf-drop__hint { font-size: var(--fs-xs); color: var(--fg-2); line-height: 1.45; }
.has-error .tf-drop__ui { border-color: var(--danger); }
.tf-drop__notice { display: flex; gap: 0.5rem; align-items: flex-start; margin-top: 0.6rem; font-size: var(--fs-xs); font-weight: 600; color: var(--danger); }
.tf-files { display: grid; gap: 0.5rem; margin-top: 0.75rem; }
.tf-files:empty { display: none; }
.tf-file {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.55rem 0.55rem 0.55rem 0.65rem;
  border-radius: 14px;
  background: var(--tf-fill);
  border: 1px solid var(--border);
  animation: tf-file-in 0.45s var(--ease-out);
}
@keyframes tf-file-in { from { opacity: 0; transform: translateY(-6px); } }
.tf-file__ext {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 40px; height: 44px;
  border-radius: 9px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--c-on-accent);
  background: var(--c-accent);
}
.tf-file__meta { display: grid; gap: 0.1rem; flex: 1; min-width: 0; }
.tf-file__name { font-size: var(--fs-small); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tf-file__size { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--fg-3); }
.tf-file__remove { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; color: var(--fg-2); transition: background-color var(--dur-1), color var(--dur-1); }
.tf-file__remove:hover { background: var(--surface-hover); color: var(--danger); }
.tf-files__total { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.04em; color: var(--fg-2); padding: 0.2rem 0.2rem 0; }

/* ---- Footer & submit ---- */
.tf .tf-footer { margin-top: 0.5rem; padding-top: 1.75rem; gap: 1rem 2rem; }
.tf-group:last-of-type { margin-bottom: 1.5rem; }
.tf .tf-note { line-height: 1.6; }
.tf-submit { min-width: 11rem; }
.tf-submit__icon { position: relative; display: inline-grid; place-items: center; width: 18px; height: 18px; }
.tf-spinner { position: absolute; inset: 0; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--c-white) 35%, transparent); border-top-color: var(--c-white); opacity: 0; }
.tf.is-sending .tf-submit .btn__icon { opacity: 0; }
.tf.is-sending .tf-spinner { opacity: 1; animation: tf-spin 0.7s linear infinite; }
@keyframes tf-spin { to { transform: rotate(360deg); } }
@media (max-width: 639.98px) {
  .tf .tf-footer { flex-direction: column-reverse; align-items: stretch; }
  .tf .tf-note { flex: none; }
  .tf-submit { width: 100%; }
}

/* ---- Success ---- */
.tf-success { padding: clamp(1.5rem, 1rem + 3vw, 3rem) 0.5rem; gap: 0.9rem; }
.tf-success__icon {
  display: grid;
  place-items: center;
  width: 84px; height: 84px;
  margin-bottom: 0.5rem;
  border-radius: 50%;
  color: var(--c-on-accent);
  background: var(--grad-fill);
  box-shadow: 0 24px 50px -18px color-mix(in srgb, var(--c-accent) 80%, transparent), inset 0 1px 0 color-mix(in srgb, var(--c-white) 35%, transparent);
  animation: tf-success-pop 0.8s var(--ease-spring);
}
.tf-success__tick { stroke-dasharray: 24; stroke-dashoffset: 24; animation: tf-tick 0.6s var(--ease-out) 0.35s forwards; }
@keyframes tf-tick { to { stroke-dashoffset: 0; } }
@keyframes tf-success-pop { from { transform: scale(0.5); opacity: 0; } }
.tf-success__title { font-size: clamp(1.4rem, 1.15rem + 0.9vw, 1.9rem); letter-spacing: -0.03em; line-height: 1.15; max-width: 22ch; text-wrap: balance; }
.tf-success__text { color: var(--fg-2); max-width: 42ch; font-size: var(--fs-body-lg); }
.tf-recap { display: grid; width: 100%; max-width: 30rem; margin: 0.5rem 0; padding: 0.4rem 1.1rem; border-radius: 16px; background: var(--tf-fill); border: 1px solid var(--border); text-align: left; }
.tf-recap > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.65rem 0; border-bottom: 1px solid var(--border); font-size: var(--fs-small); }
.tf-recap > div:last-child { border-bottom: 0; }
.tf-recap dt { color: var(--fg-2); }
.tf-recap dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.tf-success__demo { display: inline-flex; align-items: flex-start; gap: 0.5rem; text-align: left; }
.tf-success__demo .icon { flex: none; margin-top: 1px; color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .tf-success__tick { stroke-dashoffset: 0; animation: none; } }

/* "Add another language" reveal buttons */
.tf-more-btn {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 52px;
  padding: 0 1rem;
  border: 1.5px dashed var(--border-strong);
  border-radius: 14px;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--accent);
  transition: border-color var(--dur-2), background-color var(--dur-2);
}
.tf-more-btn:hover { border-color: var(--accent); background: var(--accent-soft); }
.tf-more-btn .icon { flex: none; }
.tf-field.is-collapsed { display: none; }
.tf-field.is-revealed { animation: tf-file-in 0.5s var(--ease-out); }

/* Language columns (careers) */
.tf-langcols { display: grid; gap: 1.25rem; margin: 1rem 0; padding: 1.25rem; border-radius: 18px; background: var(--tf-fill); border: 1px solid var(--border); }
.tf-langcol { display: grid; gap: 0.75rem; align-content: start; min-width: 0; }
.tf-langcol__k { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-2); }
.tf-langcols__arrow { display: none; }
@media (max-width: 639.98px) { .tf-langcols { padding: 0.25rem 0 0.5rem; background: none; border: 0; border-radius: 0; } }
@media (min-width: 760px) {
  .tf-langcols { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 0.75rem; }
  .tf-langcols__arrow { display: grid; place-items: center; width: 36px; height: 36px; margin-top: 2.15rem; border-radius: 50%; color: var(--accent); background: var(--tf-card-bg); border: 1px solid var(--border); }
}

/* =============================================================================================
   2 · INSTANT ESTIMATOR
   ============================================================================================= */
.est {
  position: relative;
  isolation: isolate;
  padding: clamp(1.25rem, 0.4rem + 2.8vw, 3rem);
  border-radius: clamp(24px, 1rem + 1.6vw, 40px);
  background: linear-gradient(180deg, color-mix(in srgb, var(--c-white) 7%, transparent), color-mix(in srgb, var(--c-white) 2%, transparent) 60%);
  border: 1px solid color-mix(in srgb, var(--c-white) 11%, transparent);
  box-shadow: 0 40px 90px -60px color-mix(in srgb, var(--c-accent) 70%, transparent), inset 0 1px 0 color-mix(in srgb, var(--c-white) 9%, transparent);
  backdrop-filter: blur(26px) saturate(150%);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  color: var(--fg);
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}
.est__glow { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; pointer-events: none; }
.est__glow::before { content: ""; position: absolute; width: 60%; aspect-ratio: 1; left: -18%; top: -55%; background: radial-gradient(closest-side, color-mix(in srgb, var(--c-accent) 38%, transparent), transparent 70%); }
.est__glow::after { content: ""; position: absolute; width: 50%; aspect-ratio: 1; right: 10%; bottom: -60%; background: radial-gradient(closest-side, color-mix(in srgb, var(--c-accent-300) 16%, transparent), transparent 70%); }
.est__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.75rem 2rem; margin-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }
.est__eyebrow { display: inline-flex; align-items: center; gap: 0.85rem; font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--c-accent-400); margin-bottom: 0.6rem; width: 100%; }
.est__dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--c-accent-300); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-accent-300) 18%, transparent); }
.est__dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--c-accent-300); animation: est-ping 2.4s var(--ease-out) infinite; }
@keyframes est-ping { from { transform: scale(0.6); opacity: 0.9; } to { transform: scale(2.4); opacity: 0; } }
.est__title { font-size: clamp(1.6rem, 1.15rem + 1.6vw, 2.6rem); font-weight: var(--fw-h); letter-spacing: -0.038em; line-height: 1.05; color: var(--c-white); }
.est__grid { display: grid; gap: clamp(1.75rem, 1rem + 2vw, 2.5rem); }
@media (min-width: 1040px) { .est__grid { grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr); align-items: stretch; } }
.est__inputs { display: grid; gap: clamp(1.5rem, 1rem + 1vw, 2rem); align-content: start; min-width: 0; }
.est__step { margin: 0; padding: 0; border: 0; min-width: 0; }
.est__label { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 0.85rem; padding: 0; font-size: var(--fs-small); font-weight: 600; letter-spacing: -0.01em; color: var(--c-white); }
.est__n { display: inline-grid; place-items: center; height: 22px; padding: 0 0.45rem; border-radius: var(--r-pill); font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.08em; color: var(--c-accent-300); background: color-mix(in srgb, var(--c-accent-400) 14%, transparent); }
.est__pair { display: grid; gap: 0.6rem; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; }
.est .tf-input { height: 60px; min-height: 60px; padding: 1.55rem 1rem 0.45rem; border-radius: 14px; font-size: 1.0625rem; background: color-mix(in srgb, var(--c-white) 5%, transparent); border: 1px solid color-mix(in srgb, var(--c-white) 24%, transparent); color: var(--c-white); }
.est .tf-input:hover { border-color: color-mix(in srgb, var(--c-white) 45%, transparent); }
.est .tf-input:focus { outline: none; border-color: var(--c-accent-400); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-accent-400) 24%, transparent); }
.est .tf-combo .tf-input { padding-right: 2.8rem; }
.est__swap { margin-top: 8px; }

.est__words { display: grid; gap: 1rem 1.5rem; grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 560px) { .est__words { grid-template-columns: auto minmax(0, 1fr); } }
.est__count {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 64px;
  padding: 0 1.1rem;
  border-radius: 16px;
  background: color-mix(in srgb, var(--c-white) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-white) 24%, transparent);
  transition: border-color var(--dur-2), box-shadow var(--dur-2);
}
.est__count:focus-within { border-color: var(--c-accent-400); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-accent-400) 24%, transparent); }
.est__num { width: 7.2ch; min-width: 0; border: 0; padding: 0; background: transparent; color: var(--c-white); font-size: 1.6rem; font-weight: 650; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.est__num::-webkit-inner-spin-button, .est__num::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.est__num:focus { outline: none; }
.est__unit { color: var(--c-on-dark-2); font-size: var(--fs-small); }
.est__slider { position: relative; padding-top: 0.25rem; min-width: 0; }
.est__range { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; --p: 37%; }
.est__range:focus { outline: none; }
.est__range::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--c-accent), var(--c-accent-400) calc(var(--p) * 0.7), var(--c-accent-300) var(--p), color-mix(in srgb, var(--c-white) 14%, transparent) var(--p)); }
.est__range::-moz-range-track { height: 6px; border-radius: 6px; background: color-mix(in srgb, var(--c-white) 14%, transparent); }
.est__range::-moz-range-progress { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--c-accent), var(--c-accent-400), var(--c-accent-300)); }
.est__range::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -11px; border-radius: 50%; background: var(--c-white); border: 0; box-shadow: 0 0 0 6px color-mix(in srgb, var(--c-accent-400) 22%, transparent), 0 6px 18px rgba(0, 0, 0, 0.5); transition: box-shadow var(--dur-2), transform var(--dur-2) var(--ease-out); }
.est__range::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; background: var(--c-white); border: 0; box-shadow: 0 0 0 6px color-mix(in srgb, var(--c-accent-400) 22%, transparent), 0 6px 18px rgba(0, 0, 0, 0.5); }
.est__range:hover::-webkit-slider-thumb { transform: scale(1.06); }
.est__range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--c-black), 0 0 0 6px var(--c-accent-400), 0 6px 18px rgba(0, 0, 0, 0.5); }
.est__range:active::-webkit-slider-thumb { transform: scale(1.12); }
.est__ticks { position: relative; height: 16px; margin: -4px 14px 0; }
.est__ticks span { position: absolute; top: 0; transform: translateX(-50%); font-family: var(--font-mono); font-size: 0.6875rem; color: var(--c-on-dark-3); white-space: nowrap; }
.est__ticks span:first-child { transform: none; margin-left: -14px; }
.est__ticks span:last-child { transform: translateX(-100%); margin-left: 14px; }

.est__tiers { display: grid; gap: 0.6rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .est__tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.est-tier {
  position: relative;
  display: grid;
  gap: 0.3rem;
  align-content: start;
  padding: 1rem 1.05rem 1.1rem;
  border-radius: 18px;
  background: color-mix(in srgb, var(--c-white) 3.5%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-white) 13%, transparent);
  cursor: pointer;
  transition: border-color var(--dur-2), background-color var(--dur-3), box-shadow var(--dur-3), transform 0.5s var(--ease-out);
}
.est-tier:hover { border-color: color-mix(in srgb, var(--c-white) 30%, transparent); background: color-mix(in srgb, var(--c-white) 6%, transparent); }
.est-tier input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.est-tier:has(input:focus-visible) { outline: 2px solid var(--c-accent-400); outline-offset: 3px; }
.est-tier:has(input:checked) {
  border-color: color-mix(in srgb, var(--c-accent-300) 75%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--c-accent) 42%, transparent), color-mix(in srgb, var(--c-accent) 8%, transparent) 70%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-accent-300) 55%, transparent), 0 24px 50px -24px color-mix(in srgb, var(--c-accent) 90%, transparent);
}
.est-tier__top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.est-tier__name { font-weight: 650; letter-spacing: -0.015em; color: var(--c-white); }
.est-tier__radio { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--c-white) 40%, transparent); transition: border-color var(--dur-2), box-shadow var(--dur-2), background-color var(--dur-2); }
.est-tier:has(input:checked) .est-tier__radio { border-color: var(--c-white); background: var(--c-white); box-shadow: inset 0 0 0 4px var(--c-accent); }
.est-tier__price { font-size: 1.3rem; font-weight: 650; letter-spacing: -0.03em; color: var(--c-white); font-variant-numeric: tabular-nums; }
.est-tier__from { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-on-dark-2); font-weight: 500; margin-right: 0.15rem; }
.est-tier__unit { font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0; color: var(--c-on-dark-2); margin-left: 0.2rem; }
.est-tier__text { font-size: var(--fs-xs); line-height: 1.45; color: var(--c-on-dark-2); }
.est-tier:has(input:checked) .est-tier__text { color: color-mix(in srgb, var(--c-white) 82%, transparent); }
.est__examples { margin-top: 0.9rem; font-size: var(--fs-xs); line-height: 1.5; color: var(--c-on-dark-2); }
.est__examples-k { color: var(--c-on-dark-3); font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; margin-right: 0.25rem; }
.est__examples-more { color: var(--c-accent-400); font-weight: 600; white-space: nowrap; }

.est__result {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(1.4rem, 1rem + 1.4vw, 2.25rem);
  border-radius: clamp(20px, 0.9rem + 1vw, 28px);
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--c-accent) 50%, transparent), transparent 62%),
    radial-gradient(90% 70% at 0% 100%, color-mix(in srgb, var(--c-accent-300) 20%, transparent), transparent 60%),
    var(--c-ink-1);
  border: 1px solid color-mix(in srgb, var(--c-white) 12%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--c-white) 8%, transparent);
}
.est__result::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(color-mix(in srgb, var(--c-white) 9%, transparent) 1px, transparent 1.2px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(80% 70% at 85% 10%, #000, transparent 75%);
  mask-image: radial-gradient(80% 70% at 85% 10%, #000, transparent 75%);
}
.est__result-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.est__result-k { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--c-on-dark-2); }
.est__chip { display: inline-flex; align-items: center; gap: 0.4rem; height: 30px; padding: 0 0.75rem; border-radius: var(--r-pill); font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; color: var(--c-white); background: color-mix(in srgb, var(--c-white) 8%, transparent); border: 1px solid color-mix(in srgb, var(--c-white) 14%, transparent); }
.est__chip span { color: var(--c-accent-300); }
.est__price { display: flex; flex-direction: column; gap: 0.25rem; margin: auto 0 0.6rem; padding-top: clamp(1.75rem, 1rem + 3vw, 3.5rem); }
.est__from { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--c-on-dark-2); }
.est__amount {
  display: block;
  font-size: clamp(3.75rem, 2.2rem + 5.4vw, 7.25rem);
  font-weight: 650;
  letter-spacing: -0.06em;
  line-height: 0.92;
  font-variant-numeric: tabular-nums;
  padding-bottom: 0.06em;
  background: linear-gradient(180deg, var(--c-white) 30%, var(--c-accent-200) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transform-origin: 0 80%;
}
.est__calc { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.02em; color: var(--c-on-dark-2); line-height: 1.5; }
.est__ctas { margin: 1.5rem 0 1.25rem; }
.est__go { --btn-h: 58px; }
.est__note { display: flex; gap: 0.6rem; align-items: flex-start; padding-top: 1.1rem; border-top: 1px solid color-mix(in srgb, var(--c-white) 10%, transparent); font-size: var(--fs-xs); line-height: 1.55; color: color-mix(in srgb, var(--c-white) 74%, transparent); }
.est__note .icon { flex: none; margin-top: 1px; color: var(--c-accent-400); }
@media (max-width: 639.98px) {
  .est__pair { grid-template-columns: minmax(0, 1fr); gap: 0; position: relative; }
  .est__pair > .tf-field:first-child { margin-bottom: 1.25rem; }
  .est__swap { position: absolute; left: 50%; top: calc(60px + 0.625rem); margin: -22px 0 0 -22px; transform: rotate(90deg); background: var(--c-ink-3); }
  .est__swap.is-spun { transform: rotate(270deg); }
  .est-tier { grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; }
  .est-tier__top { grid-column: 1; }
  .est-tier__price { grid-column: 2; grid-row: 1; justify-self: end; font-size: 1.1rem; }
  .est-tier__text { grid-column: 1 / -1; }
  .est-tier__top .est-tier__radio { order: -1; }
  .est-tier__top { justify-content: flex-start; gap: 0.65rem; }
}

/* =============================================================================================
   3 · QUOTE PAGE
   ============================================================================================= */
.hero--quote { padding-bottom: clamp(4rem, 2rem + 6vw, 8.5rem); }
.qhero { display: grid; gap: 1.5rem 4rem; }
@media (min-width: 1000px) { .qhero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; } }
.qhero__title { font-size: clamp(3.25rem, 1.3rem + 7vw, 9rem); max-width: 9ch; }
.qhero__title em { padding-right: 0; margin-right: -0.02em; }
.qhero__lede { max-width: 32rem; }
.qhero__ctas { margin-top: 1.75rem; justify-content: flex-start; }
.hsplit .hsplit__ctas { justify-content: flex-start; }
@media (max-width: 639.98px) { .qhero__ctas .btn { flex: 1 1 100%; } }
.qhero__facts { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; margin-top: clamp(1.75rem, 1.25rem + 1.2vw, 2.5rem); font-size: var(--fs-small); color: var(--c-on-dark-2); }
.qhero__facts li { display: inline-flex; align-items: center; gap: 0.55rem; }
.qhero__facts .icon { color: var(--c-accent-400); }
.qhero__est { margin-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }

/* Packages */
.qpkgs-section .shead { margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.qpkgs { display: grid; gap: var(--gap); }
@media (min-width: 1000px) { .qpkgs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.qpkg {
  --tier: var(--c-accent-400);
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, color-mix(in srgb, var(--c-white) 6%, transparent), color-mix(in srgb, var(--c-white) 2%, transparent));
  border: 1px solid color-mix(in srgb, var(--c-white) 9%, transparent);
  overflow: hidden;
  isolation: isolate;
  transition: border-color var(--dur-3), box-shadow var(--dur-3) var(--ease-out), transform 0.6s var(--ease-out);
}
.qpkg:nth-child(2) { --tier: var(--c-accent-500); }
.qpkg:nth-child(3) { --tier: var(--c-accent-300); }
.qpkg > * { position: relative; z-index: 1; }
.qpkg__shine { position: absolute; inset: 0 0 auto; height: 160px; z-index: 0; pointer-events: none; background: radial-gradient(80% 100% at 20% 0%, color-mix(in srgb, var(--tier) 28%, transparent), transparent 70%); }
.qpkg__shine::before { content: ""; position: absolute; top: 0; left: 1.5rem; right: 1.5rem; height: 1px; background: linear-gradient(90deg, transparent, var(--tier), transparent); opacity: 0.9; }
.qpkg.is-selected { border-color: color-mix(in srgb, var(--c-accent-300) 60%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-accent-300) 35%, transparent), 0 50px 110px -50px color-mix(in srgb, var(--c-accent) 85%, transparent); }
.qpkg__idx { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-height: 26px; font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0.1em; color: var(--c-on-dark-2); }
.qpkg__selected { display: inline-flex; align-items: center; gap: 0.35rem; height: 26px; padding: 0 0.65rem; border-radius: var(--r-pill); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-black); background: var(--c-accent-300); opacity: 0; transform: translateY(4px); transition: opacity var(--dur-3), transform var(--dur-3) var(--ease-out); }
.qpkg.is-selected .qpkg__selected { opacity: 1; transform: none; }
.qpkg__tier { margin-top: 1.4rem; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.15rem); font-weight: 650; letter-spacing: -0.04em; line-height: 1.05; color: var(--c-white); }
.qpkg__text { margin-top: 0.5rem; color: var(--c-on-dark-2); font-size: var(--fs-small); line-height: 1.5; min-height: 3em; }
.qpkg__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.2rem 0.55rem; margin: 1.75rem 0 1.6rem; }
.qpkg__from { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--c-on-dark-3); }
.qpkg__num { font-size: clamp(3rem, 2.2rem + 2.6vw, 4.5rem); font-weight: 650; letter-spacing: -0.055em; line-height: 0.95; font-variant-numeric: tabular-nums; background: linear-gradient(180deg, var(--c-white) 35%, color-mix(in srgb, var(--tier) 55%, var(--c-white))); -webkit-background-clip: text; background-clip: text; color: transparent; }
.qpkg__unit { color: var(--c-on-dark-2); font-size: var(--fs-small); }
.qpkg__cta { margin-bottom: 1.9rem; }
.qpkg__k { padding-top: 1.5rem; margin-bottom: 1rem; border-top: 1px solid color-mix(in srgb, var(--c-white) 9%, transparent); font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-on-dark-3); }
.qpkg__list { display: grid; gap: 0.8rem; font-size: var(--fs-small); line-height: 1.5; color: color-mix(in srgb, var(--c-white) 80%, transparent); }
.qpkg__list li { display: flex; gap: 0.7rem; align-items: flex-start; }
.qpkg__list .icon { flex: none; margin-top: 3px; color: color-mix(in srgb, var(--tier) 70%, var(--c-white)); }
.qpkgs__note { max-width: 62rem; margin-top: clamp(1.75rem, 1rem + 2vw, 2.75rem); }
.qpkgs__note strong { color: var(--fg); }

/* How it works */
.qsteps { display: grid; gap: clamp(2.5rem, 1.5rem + 4vw, 6rem); align-items: center; }
@media (min-width: 1000px) { .qsteps { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.qsteps__frame { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--r-xl); background: var(--surface); box-shadow: 0 40px 90px -50px color-mix(in srgb, var(--c-shade) 45%, transparent); }
@media (min-width: 1000px) { .qsteps__frame { aspect-ratio: 1 / 1; } }
.qsteps__frame picture { position: absolute; inset: 0; }
.qsteps__img { width: 100%; height: 100%; object-fit: cover; object-position: 58% 40%; transition: transform 1.6s var(--ease-out); }
.motion .qsteps__media:not(.is-in) .qsteps__img { transform: scale(1.08); }
.qsteps__body .shead { margin-bottom: 2.25rem; }
.qsteps__list { position: relative; display: grid; gap: 2rem; }
.qsteps__line { position: absolute; left: 22px; top: 24px; bottom: 24px; width: 1px; background: var(--border-strong); }
.qsteps__line span { position: absolute; inset: 0; background: var(--grad-brand-deep); transform-origin: 50% 0; transform: scaleY(0); transition: transform 1.6s var(--ease-out) 0.2s; }
.qsteps__list.is-in .qsteps__line span, html:not(.motion) .qsteps__line span, .tw-failsafe .qsteps__line span { transform: none; }
.qstep { position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 1.4rem; }
.qstep__n { position: relative; z-index: 1; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--bg); border: 1px solid var(--border-strong); font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 600; color: var(--accent); }
.qstep__title { padding-top: 0.6rem; font-size: var(--fs-h-sm); letter-spacing: -0.025em; line-height: 1.2; }
.qstep__text { margin-top: 0.5rem; color: var(--fg-2); max-width: 46ch; }
.qsteps__cta { margin-top: 2.25rem; padding-left: calc(46px + 1.4rem); }

.qsteps--solo { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) {
  .qsteps--solo .qsteps__body .shead { max-width: 44rem; }
  .qsteps--solo .qsteps__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
  .qsteps--solo .qsteps__line { left: 23px; right: 23px; top: 22px; bottom: auto; width: auto; height: 1px; grid-column: 1 / -1; }
  .qsteps--solo .qsteps__line span { transform-origin: 0 50%; transform: scaleX(0); }
  .qsteps--solo .qsteps__list.is-in .qsteps__line span, html:not(.motion) .qsteps--solo .qsteps__line span, .tw-failsafe .qsteps--solo .qsteps__line span { transform: none; }
  .qsteps--solo .qstep { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .qsteps--solo .qstep__title { padding-top: 0; }
  .qsteps--solo .qsteps__cta { padding-left: 0; }
}

/* "Your estimate" card beside the form */
.qsum {
  position: relative;
  margin-bottom: 1.75rem;
  padding: 1.35rem 1.4rem 1.4rem;
  border-radius: 22px;
  background: var(--tf-card-bg);
  border: 1px solid var(--tf-card-border);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 24px 60px -40px color-mix(in srgb, var(--c-shade) 40%, transparent);
  overflow: hidden;
}
.qsum::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad-brand-deep); }
.qsum__k { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.qsum__empty p { margin-top: 0.75rem; color: var(--fg-2); font-size: var(--fs-small); line-height: 1.55; }
.qsum__empty a { color: var(--accent); font-weight: 600; }
.qsum__price { display: flex; align-items: baseline; gap: 0.5rem; margin-top: 0.9rem; }
.qsum__from { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); }
.qsum__amount { font-size: clamp(2.25rem, 1.8rem + 1.4vw, 3rem); font-weight: 650; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; background: linear-gradient(180deg, var(--c-text) 30%, var(--c-accent-600)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.qsum__meta { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.85rem; }
.qsum__meta li { display: inline-flex; align-items: center; height: 28px; padding: 0 0.7rem; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600; background: var(--tf-fill); border: 1px solid var(--border); }
.qsum__meta li:empty { display: none; }
.qsum__note { display: flex; gap: 0.5rem; align-items: flex-start; margin-top: 1rem; font-size: var(--fs-xs); line-height: 1.5; color: var(--fg-2); }
.qsum__note .icon { flex: none; margin-top: 1px; color: var(--accent); }
.qsum__edit { margin-top: 0.85rem; font-size: var(--fs-small); }
.qsum.is-updated { animation: qsum-flash 0.9s var(--ease-out); }
@keyframes qsum-flash { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-accent) 40%, transparent), 0 24px 60px -40px color-mix(in srgb, var(--c-shade) 40%, transparent); } 100% { box-shadow: 0 0 0 14px color-mix(in srgb, var(--c-accent) 0%, transparent), 0 24px 60px -40px color-mix(in srgb, var(--c-shade) 40%, transparent); } }

/* Key facts + pricing note */
.qfacts__note { margin: 1.5rem 0 0; max-width: none; }

/* =============================================================================================
   4 · SPLIT HERO (contact + careers) and CONTACT PAGE
   ============================================================================================= */
.hero--split { padding-bottom: clamp(3.5rem, 2rem + 5vw, 7rem); }
/* soft hand-off from the aurora hero into the next dark stage (no hard edge) */
.hero--split::after, .hero--quote::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; height: clamp(120px, 18vh, 220px); background: linear-gradient(180deg, color-mix(in srgb, var(--c-black) 0%, transparent), var(--c-black)); pointer-events: none; }
.hsplit { display: grid; gap: clamp(2.5rem, 1.5rem + 3vw, 3.5rem) 4.5rem; }
@media (min-width: 1000px) { .hsplit { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); align-items: end; } }
.hsplit__title { text-wrap: balance; }
.hsplit__title--md { font-size: clamp(2.5rem, 1.3rem + 3.9vw, 5.25rem); max-width: 15ch; letter-spacing: -0.048em; line-height: 1; }
.hsplit__title--lg { font-size: clamp(3rem, 1.3rem + 5.6vw, 7rem); max-width: 12ch; }
.hsplit__title--xl { font-size: clamp(3.5rem, 1.3rem + 7.6vw, 9.5rem); max-width: 8ch; }
.hsplit__lede { margin-top: clamp(1.4rem, 1rem + 1.2vw, 2.25rem); max-width: 34rem; }
.hsplit__ctas { margin-top: clamp(1.5rem, 1rem + 1.2vw, 2.25rem); }
@media (max-width: 639.98px) { .hsplit__ctas .btn { flex: 1 1 100%; } }

/* Fire away — contact cards in the hero */
.fire__title { margin-bottom: 1rem; font-size: var(--fs-small); font-weight: 600; letter-spacing: -0.005em; color: var(--c-on-dark-2); }
.fire__list { display: grid; gap: 0.6rem; }
.ccard {
  position: relative;
  border-radius: 22px;
  background: color-mix(in srgb, var(--c-white) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-white) 10%, transparent);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  overflow: hidden;
  isolation: isolate;
  transition: border-color var(--dur-3), background-color var(--dur-3), transform 0.6s var(--ease-out);
}
.ccard:hover { border-color: color-mix(in srgb, var(--c-white) 22%, transparent); background: color-mix(in srgb, var(--c-white) 8%, transparent); }
.ccard:has(.ccard__link:focus-visible) { outline: 2px solid var(--c-accent-400); outline-offset: 3px; }
.ccard__link { position: relative; z-index: 1; display: flex; align-items: center; gap: 1rem; min-height: 84px; padding: 1rem 4.25rem 1rem 1rem; color: var(--c-white); text-decoration: none; border-radius: inherit; }
.ccard__link:focus-visible { outline: none; }
.ccard__icon { display: grid; place-items: center; flex: none; width: 50px; height: 50px; border-radius: 15px; color: var(--c-on-accent); background: var(--grad-fill); box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--c-accent) 90%, transparent), inset 0 1px 0 color-mix(in srgb, var(--c-white) 30%, transparent); }
.ccard__txt { display: grid; gap: 0.2rem; min-width: 0; }
.ccard__k { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-on-dark-3); }
.ccard__v { font-size: clamp(1.0625rem, 0.95rem + 0.45vw, 1.3rem); font-weight: 620; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.ccard__go { margin-left: auto; flex: none; color: var(--c-accent-400); opacity: 0; transform: translate(-6px, 6px); transition: opacity var(--dur-2), transform var(--dur-3) var(--ease-out); }
.ccard:hover .ccard__go, .ccard__link:focus-visible .ccard__go { opacity: 1; transform: none; }
.ccard__copy { position: absolute; z-index: 2; right: 0.85rem; top: 50%; display: grid; place-items: center; width: 44px; height: 44px; margin-top: -22px; border-radius: 14px; color: var(--c-on-dark-2); border: 1px solid color-mix(in srgb, var(--c-white) 12%, transparent); transition: background-color var(--dur-2), color var(--dur-2); }
.ccard__copy:hover { background: color-mix(in srgb, var(--c-white) 10%, transparent); color: var(--c-white); }
.ccard__copied { position: absolute; right: calc(100% + 0.5rem); top: 50%; transform: translate(6px, -50%); padding: 0.3rem 0.6rem; border-radius: 8px; font-size: 0.75rem; font-weight: 600; color: var(--c-black); background: var(--c-accent-200); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--dur-2), transform var(--dur-3) var(--ease-out); }
.ccard__copy.is-copied { color: var(--c-accent-200); }
.ccard__copy.is-copied .ccard__copied { opacity: 1; transform: translate(0, -50%); }
@media (hover: hover) { .ccard__link { padding-right: 6.5rem; } .ccard__go { position: absolute; right: 4.4rem; } }
@media (max-width: 479.98px) {
  .ccard__copy { display: none; }
  .ccard__link { padding-right: 1rem; min-height: 76px; }
  .ccard__go { opacity: 1; transform: none; }
  .ccard__icon { width: 44px; height: 44px; border-radius: 13px; }
  .ccard__v { font-size: 1.0625rem; }
}

/* Contact form section aside visual */
.cform-visual { position: relative; margin-top: 0.5rem; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 16 / 10; background: var(--c-paper-2); box-shadow: 0 30px 70px -40px color-mix(in srgb, var(--c-shade) 45%, transparent); }
.cform-visual picture, .cform-visual__img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 999.98px) { .cform-visual { display: none; } }

/* =============================================================================================
   5 · CAREERS PAGE
   ============================================================================================= */
.chero__media { margin: 0; }
.chero__frame { position: relative; overflow: hidden; aspect-ratio: 1 / 1; border-radius: var(--r-xl); border: 1px solid color-mix(in srgb, var(--c-white) 10%, transparent); background: var(--c-ink-2); box-shadow: 0 60px 120px -60px color-mix(in srgb, var(--c-accent) 70%, transparent); }
@media (min-width: 1000px) { .chero__frame { aspect-ratio: 5 / 5.2; } }
.chero__frame picture { position: absolute; inset: 0; }
.chero__img { width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; }
.chero__frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--c-black) 0%, transparent) 60%, color-mix(in srgb, var(--c-black) 35%, transparent)); pointer-events: none; }
@media (max-width: 999.98px) { .chero__frame { aspect-ratio: 1 / 1; max-height: 520px; width: 100%; } }

.cteams .shead { margin-bottom: clamp(2rem, 1.25rem + 2vw, 3rem); }
.ctabs__list { display: grid; gap: 0.75rem; max-width: 1040px; margin: 0 auto clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
@media (min-width: 720px) { .ctabs__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ctab {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  width: 100%;
  padding: 1.35rem 3.75rem 1.4rem 1.35rem;
  border-radius: 24px;
  text-align: left;
  background: color-mix(in srgb, var(--c-white) 55%, transparent);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: var(--fg);
  transition: background-color var(--dur-3), border-color var(--dur-3), box-shadow var(--dur-3) var(--ease-out), transform 0.5s var(--ease-out);
}
.ctab:hover { background: color-mix(in srgb, var(--c-white) 85%, transparent); border-color: rgba(0, 0, 0, 0.14); }
.ctab[aria-selected="true"] { background: var(--c-white); border-color: transparent; box-shadow: 0 0 0 2px var(--c-accent), 0 30px 70px -36px color-mix(in srgb, var(--c-accent) 55%, transparent); }
.ctab:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.ctab__icon { display: grid; place-items: center; flex: none; width: 50px; height: 50px; border-radius: 15px; color: var(--c-accent-600); background: linear-gradient(140deg, var(--c-accent-050), var(--c-accent-100)); border: 1px solid color-mix(in srgb, var(--c-accent) 12%, transparent); transition: background var(--dur-3), color var(--dur-3); }
.ctab[aria-selected="true"] .ctab__icon { color: var(--c-on-accent); background: var(--grad-fill); border-color: transparent; box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--c-accent) 90%, transparent); }
.ctab__body { display: grid; gap: 0.35rem; min-width: 0; }
.ctab__title { font-size: 1.25rem; font-weight: 650; letter-spacing: -0.025em; line-height: 1.2; }
.ctab__text { font-size: var(--fs-small); line-height: 1.5; color: var(--fg-2); }
.ctab__meta { margin-top: 0.3rem; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.06em; color: var(--fg-3); }
.ctab__check { position: absolute; top: 1.25rem; right: 1.25rem; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--border-strong); color: var(--c-on-accent); transition: background-color var(--dur-2), border-color var(--dur-2); }
.ctab__check .icon { opacity: 0; transform: scale(0.5); transition: opacity var(--dur-2), transform 0.35s var(--ease-spring); }
.ctab[aria-selected="true"] .ctab__check { background: var(--c-accent); border-color: var(--c-accent); }
.ctab[aria-selected="true"] .ctab__check .icon { opacity: 1; transform: none; }
.js .ctabs:not(.is-ready) .ctabs__panel + .ctabs__panel { display: none; }
.ctabs__panel { scroll-margin-top: calc(var(--header-h) + 1rem); }
.ctabs__panel:focus { outline: none; }
.ctabs__panel.is-entering { animation: ctab-in 0.6s var(--ease-out); }
@keyframes ctab-in { from { opacity: 0; transform: translateY(14px); } }
html:not(.js) .ctabs__panel + .ctabs__panel, .ctabs:not(.is-ready) .ctabs__panel + .ctabs__panel { margin-top: 4rem; }

.cform { display: grid; gap: 1.5rem; }
@media (min-width: 1100px) { .cform { grid-template-columns: 270px minmax(0, 1fr); gap: 3.5rem; align-items: start; } }
.cform__rail { display: none; }
@media (min-width: 1100px) { .cform__rail { display: block; position: sticky; top: calc(var(--header-h) + 2rem); } }
.cform__main { min-width: 0; }
.cform__head { margin-bottom: 1.5rem; }
.cform__title { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem); font-weight: var(--fw-h); letter-spacing: -0.04em; line-height: 1.05; }
.cform__intro { margin-top: 0.6rem; color: var(--fg-2); font-size: var(--fs-body-lg); }

.cprog { padding: 1.5rem; border-radius: 22px; background: var(--c-white); border: 1px solid rgba(0, 0, 0, 0.06); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 24px 60px -40px color-mix(in srgb, var(--c-shade) 35%, transparent); }
.cprog__k { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); }
.cprog__count { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.35rem; margin-top: 0.75rem; }
.cprog__done { font-size: 2.75rem; font-weight: 650; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.cprog__of { font-size: 1.1rem; font-weight: 600; color: var(--fg-2); letter-spacing: -0.02em; }
.cprog__lbl { flex-basis: 100%; margin-top: 0.3rem; font-size: var(--fs-xs); color: var(--fg-2); }
.cprog__bar { position: relative; height: 6px; margin-top: 1rem; border-radius: 6px; background: var(--c-paper-2); overflow: hidden; }
.cprog__bar span { position: absolute; inset: 0; border-radius: inherit; background: var(--grad-brand-deep); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); transition: transform 0.7s var(--ease-out); }
.cprog__steps { display: grid; gap: 0.15rem; margin: 1.25rem -0.6rem 0; }
.cprog__step { display: flex; align-items: center; gap: 0.7rem; min-height: 44px; padding: 0.4rem 0.6rem; border-radius: 12px; color: var(--fg-2); text-decoration: none; font-size: var(--fs-small); font-weight: 550; transition: background-color var(--dur-2), color var(--dur-2); }
.cprog__step:hover { background: var(--c-paper); color: var(--fg); }
.cprog__step.is-current { background: var(--c-accent-050); color: var(--fg); }
.cprog__n { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--fg-3); }
.cprog__step.is-current .cprog__n { color: var(--accent); }
.cprog__name { flex: 1; min-width: 0; line-height: 1.3; }
.cprog__state { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--fg-3); white-space: nowrap; }
.cprog__step.is-done .cprog__state { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 0; color: var(--c-white); background: var(--c-accent-600) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.cprog__help { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border); font-size: var(--fs-xs); color: var(--fg-2); line-height: 1.5; }
.cprog__help a { color: var(--accent); font-weight: 600; overflow-wrap: anywhere; }
.cprog.is-complete .cprog__done { color: var(--c-accent-600); }

.cprog-mini { position: sticky; top: var(--header-h); z-index: 5; margin: 0 calc(-1 * var(--gutter)) 1rem; padding: 0.7rem var(--gutter) 0.8rem; background: color-mix(in srgb, var(--c-white) 86%, transparent); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); border-bottom: 1px solid rgba(0, 0, 0, 0.06); }
@media (min-width: 1100px) { .cprog-mini { display: none; } }
.cprog-mini__row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: var(--fs-xs); }
.cprog-mini__group { font-weight: 650; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cprog-mini__count { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--fg-2); white-space: nowrap; }
.cprog-mini .cprog__bar { margin-top: 0.5rem; height: 4px; }

/* =============================================================================================
   6 · Reduced motion
   ============================================================================================= */
@media (prefers-reduced-motion: reduce) {
  .est__dot::after { animation: none !important; opacity: 0.6; }
  .tf-label.field__label, .tf-drop__ui, .est-tier, .qpkg { transition: none !important; }
}

/* Contact · "How we can help" spec list */
.chelp { display: grid; gap: clamp(2rem, 1rem + 3vw, 4rem) 5rem; }
@media (min-width: 1000px) { .chelp { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } .chelp__head .shead { margin-bottom: 0; position: sticky; top: calc(var(--header-h) + 2.5rem); } }
.chelp__list { display: grid; column-gap: 2.5rem; border-top: 1px solid var(--border-strong); }
@media (min-width: 700px) { .chelp__list { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; } }
.chelp__item { display: flex; align-items: center; gap: 1rem; min-height: 76px; padding: 1rem 0; border-bottom: 1px solid var(--border); font-size: var(--fs-body-lg); font-weight: 560; letter-spacing: -0.015em; line-height: 1.35; }
.chelp__n { flex: none; width: 2rem; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; color: var(--fg-3); }
.chelp__txt { flex: 1; min-width: 0; }
.chelp__mark { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; color: var(--c-on-accent); background: var(--grad-fill); box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--c-accent) 90%, transparent); }

/* Combobox labels never run under the toggle button */
.tf-combo > .tf-label.field__label { max-width: calc(100% - 4.1rem); }
.tf-combo:has(> .tf-input:focus) > .tf-label, .tf-combo:has(> :is(input, textarea).tf-input:not(:placeholder-shown)) > .tf-label { max-width: calc((100% - 4.1rem) / 0.76); }
@media (max-width: 559.98px) {
  .est__num { flex: 1; width: auto; }
}
@media (max-width: 399.98px) {
  .ccard__go { display: none; }
  .ccard__v { font-size: 1rem; }
  .ccard__link { gap: 0.85rem; padding-left: 0.85rem; }
}

/* ==== 90-palette.css ==== */
/* =========================================================================
   90 · Palettes — photo treatment + demo palette switcher
   Colour tokens themselves are generated per palette by src/lib/palettes.mjs (injected after 00-tokens.css).
   ========================================================================= */

/* ---- Photo treatment ---------------------------------------------------------------------------
   data-photos="mono" (default): photographs are rendered in greyscale so every page reads as
   "two greys + one colour"; the accent stays the only chroma on screen. The filter sits on <picture>
   (not the <img>), so the images' own saturate/brightness/hover filters still compose underneath.
   Flags, certification marks and client logos are identity marks and keep their own treatment. */
html[data-photos="mono"] picture:not(:has(.flag__img, .cert__img, .footer-cert__img, .client__logo)) {
  filter: grayscale(1) contrast(1.04);
}
html[data-photos="mono"] .flag__img { filter: grayscale(1) contrast(1.1); }

/* ---- Demo palette switcher (rendered in demo builds only; never in BUILD_MODE=prod) ------------- */
.pal {
  /* slim tab on the right edge, vertically centred: never covers CTAs, the cookie banner or the mobile CTA bar */
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: calc(var(--z-cookie) - 1);
  font-family: var(--font-sans);
  color: var(--fg);
}
.pal__toggle {
  display: grid; place-items: center; gap: 0.45rem;
  width: 44px; min-height: 44px; padding: 0.7rem 0 0.75rem;
  border-radius: 14px 0 0 14px;
  border: 1px solid var(--border-strong); border-right: 0;
  background: color-mix(in srgb, var(--c-black) 88%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--c-shade) 70%, transparent);
  color: var(--fg-2);
  font-family: var(--font-mono); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--dur-2), color var(--dur-2), width var(--dur-2) var(--ease-out);
}
.pal__toggle-label { writing-mode: vertical-rl; transform: rotate(180deg); line-height: 1; }
.pal__toggle:hover, .pal.is-open .pal__toggle { border-color: var(--accent); color: var(--fg); }
.pal__toggle:focus-visible, .pal__opt input:focus-visible + .pal__sw, .pal__seg input:focus-visible + span {
  outline: 2px solid var(--focus); outline-offset: 3px;
}
.pal__sw {
  display: inline-flex; flex: none;
  width: 42px; height: 22px;
  border-radius: var(--r-pill);
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--border-strong);
}
.pal__sw i { flex: 1; }
.pal__sw i:nth-child(1) { background: var(--sw-d, var(--c-black)); }
.pal__sw i:nth-child(2) { background: var(--sw-l, var(--c-white)); }
.pal__sw i:nth-child(3) { background: var(--sw-a, var(--c-accent)); }
.pal__sw--current { flex-direction: column; width: 18px; height: 42px; }

.pal__panel {
  position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%);
  width: min(300px, calc(100vw - 72px));
  max-height: calc(100svh - 24px); overflow: auto;
  padding: 1rem;
  border-radius: var(--r-md);
  border: 1px solid var(--border-strong);
  background: color-mix(in srgb, var(--c-ink-1) 94%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: 0 30px 70px -20px color-mix(in srgb, var(--c-shade) 80%, transparent);
}
.pal__panel[hidden] { display: none; }
.pal__title {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  margin: 0 0 0.6rem;
  font-size: var(--fs-small); font-weight: 650; letter-spacing: -0.01em;
}
.pal__demo, .pal__legend {
  font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500;
  letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--fg-3);
}
.pal__set { margin: 0; padding: 0; border: 0; min-width: 0; }
.pal__opt {
  position: relative;
  display: flex; align-items: center; gap: 0.75rem;
  min-height: 44px; padding: 0.3rem 0.5rem;
  border-radius: var(--r-xs);
  font-size: var(--fs-small);
  color: var(--fg-2);
  cursor: pointer;
  transition: background-color var(--dur-1), color var(--dur-1);
}
.pal__opt:hover { background: var(--surface-hover); color: var(--fg); }
.pal__opt input, .pal__seg input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.pal__opt:has(input:checked) { color: var(--fg); background: var(--surface); }
.pal__opt:has(input:checked)::after {
  content: ""; margin-left: auto;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
}
.pal__set--photos { margin-top: 0.8rem; padding-top: 0.8rem; border-top: 1px solid var(--border); }
/* palettes grouped by mode: "Dark" (dark stages) and "Light" (light-grey stages, see 95-light.css) */
.pal__set--dark .pal__legend, .pal__set--light .pal__legend { float: none; display: block; margin: 0 0 0.25rem; padding: 0 0.5rem; }
.pal__set--light { margin-top: 0.6rem; }
.pal__legend { float: left; margin: 0 0 0.5rem; padding: 0; }
.pal__seg {
  clear: both;
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  padding: 4px; border-radius: var(--r-pill);
  background: var(--surface);
}
.pal__seg label { position: relative; display: block; cursor: pointer; }
.pal__seg span {
  display: grid; place-items: center;
  min-height: 44px; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 600; color: var(--fg-2);
  transition: background-color var(--dur-1), color var(--dur-1);
}
.pal__seg input:checked + span { background: var(--c-accent); color: var(--c-on-accent); }
/* one-line hint under the Photos toggle: most photos sit below the first screen, so the switch can look inert */
.pal__hint { margin: 0.45rem 0 0; padding: 0 0.5rem; font-size: 0.75rem; line-height: 1.4; color: var(--fg-3); }
/* light palettes: stage · page white · accent with a thin ink outline (a dark middle band made them read as dark) */
.pal__sw--light { box-shadow: 0 0 0 1px color-mix(in srgb, var(--sw-ink, var(--c-text)) 38%, transparent); }
html[data-mode="light"] .pal__sw--current i:nth-child(2) { background: var(--c-page); }
html[data-mode="light"] .pal__sw--current { box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-text) 38%, transparent); }

/* Below 1440px the content column runs to within 44px of the right edge, so a right-edge tab would sit over the ends
   of text lines. There the switcher becomes a 44px round button in the bottom-right corner (phones: above the
   quick-action bar) with the panel opening upwards; it steps aside while the mobile menu is open, and the footer gets
   enough bottom padding for its last row to clear the button. At 1440px+ it is the slim right-edge tab. */
@media (max-width: 1439.98px) {
  .pal { top: auto; bottom: calc(1rem + env(safe-area-inset-bottom)); right: 16px; transform: none; }
  .pal__toggle { width: 44px; height: 44px; padding: 0; border-radius: 50%; border-right: 1px solid var(--border-strong); }
  .pal__toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .pal__sw--current { flex-direction: row; width: 24px; height: 24px; border-radius: 50%; }
  .pal__panel { top: auto; bottom: calc(100% + 10px); right: 0; transform: none; width: min(300px, calc(100vw - 24px)); max-height: calc(100svh - 6rem); }
  body:has(.site-header.menu-open) .pal { visibility: hidden; }
  body:has(.pal) .site-footer { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom)); }
}
@media (max-width: 767.98px) {
  .pal { bottom: calc(4.9rem + env(safe-area-inset-bottom)); right: 12px; }
  .pal__panel { max-height: calc(100svh - 11rem); }
  /* the last footer row must clear the button as well as the quick-action bar */
  body:has(.pal) .site-footer { padding-bottom: calc(8.5rem + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .pal__toggle, .pal__opt, .pal__seg span { transition: none; }
}
@media print { .pal { display: none; } }

/* ==== 95-light.css ==== */
/* =========================================================================
   95 · Light mode — html[data-mode="light"] (light-* palettes, src/lib/palettes.mjs)
   The same site with no dark stage anywhere: light-grey stages, near-white reading sections, dark ink type, one accent.

   How it works (see DESIGN.md › Modes):
   1. The light palettes re-map the stage tokens: --c-black = the light-grey stage, --c-ink-1…3 = lighter cards on it,
      --c-on-dark(-2/-3) = ink greys, --c-accent-400/300/200 = deep accent text, --c-shade = a soft grey for shadows.
      Every component that was written for "dark stage" therefore turns light without per-component colour rules.
   2. --c-white is the one overloaded primitive (light section background AND "text on dark"). Inside stage scopes
      (data-theme="dark", the header, overlays on photos) it is swapped to ink; nested data-theme="light" scopes get
      the page white back (--c-page).
   3. What is left below is light-specific polish: black shadows/scrims become soft greys, additive glows become
      gentle accent tints, photo overlays become light frosted washes, and a few elements that need a different
      treatment on light (aurora, hero overlays, the language search, sliders).
   Every rule is scoped by html[data-mode="light"], so the dark palettes are untouched.
   ========================================================================= */

/* ---- 1 · root ----------------------------------------------------------------------------------------- */
html[data-mode="light"] {
  color-scheme: light;
  --grad-text-dark: linear-gradient(180deg, var(--c-on-dark) 20%, var(--c-accent-200) 100%);
  --shadow-sm: 0 1px 2px color-mix(in srgb, var(--c-shade) 10%, transparent), 0 2px 8px color-mix(in srgb, var(--c-shade) 7%, transparent);
  --shadow-md: 0 2px 6px color-mix(in srgb, var(--c-shade) 7%, transparent), 0 12px 32px color-mix(in srgb, var(--c-shade) 11%, transparent);
  --shadow-lg: 0 30px 80px -24px color-mix(in srgb, var(--c-shade) 34%, transparent);
  --shadow-glow: 0 0 0 1px color-mix(in srgb, var(--c-accent) 18%, transparent), 0 20px 50px -24px color-mix(in srgb, var(--c-accent) 40%, transparent);
  --lt-card-shadow: 0 1px 2px color-mix(in srgb, var(--c-shade) 10%, transparent), 0 18px 44px -26px color-mix(in srgb, var(--c-shade) 34%, transparent);
  --lt-card-shadow-hover: 0 1px 2px color-mix(in srgb, var(--c-shade) 10%, transparent), 0 30px 60px -30px color-mix(in srgb, var(--c-shade) 42%, transparent), 0 0 0 1px color-mix(in srgb, var(--c-accent) 18%, transparent);
  --lt-scrim: color-mix(in srgb, var(--c-shade) 11%, transparent);
  --lt-glow: 1; /* strength of atmospheric accent glows (light-crimson halves it: crimson glows turn pink on porcelain) */
}
html[data-palette="light-crimson"] { --lt-glow: 0.5; }

/* ---- 2 · stage scopes: --c-white becomes ink; nested light scopes get the page white back ----------------- */
html[data-mode="light"] :is([data-theme="dark"], .site-header, .veil, .mega-backdrop) {
  --c-white: var(--c-on-dark);
  --field-bg: var(--c-page);
  --field-border: var(--c-field-border);
  color-scheme: light;
}
html[data-mode="light"] [data-theme="light"],
html[data-mode="light"] .site-header[data-on="light"]:not(.has-mega):not(.menu-open) {
  --c-white: var(--c-page);
}
/* overlays that sit on photos / stage-tinted cards inside light sections carry their own "text on dark" colours */
html[data-mode="light"] :is(.lang-tile__link, .in-lang__link, .in-rtile, .in-svc__link, .in-mosaic__card, .in-icard__n,
  .in-icard__icon, .in-split__n, .in-hero__portrait-tag, .lf-card__badge, .lf-pc-hero__lock, .lf-pc-card--settings,
  .in-wave, .vx-tile--langs) {
  --c-white: var(--c-on-dark);
}

/* accent chips on the stage: a tint LIGHTER than the stage, so accent text on it keeps (and gains) contrast */
html[data-mode="light"] [data-theme="dark"] { --accent-soft: color-mix(in srgb, var(--c-accent) 7%, var(--c-ink-3)); }

/* tints mixed from the (now deep) stage accents would darken light chips: use the light accent tint instead */
html[data-mode="light"] .lf-feat__badge { background: var(--c-accent-050); }
html[data-mode="light"] ::selection { background: color-mix(in srgb, var(--c-accent) 22%, transparent); }

/* ---- 3 · tokens that pointed at the light "text on dark" grey to get a pale fill on light sections ---------- */
html[data-mode="light"], html[data-mode="light"] [data-theme="light"] { --tf-fill: var(--c-paper); }
html[data-mode="light"] .is-longform { --lf-paper: var(--c-paper); --lf-line: color-mix(in srgb, var(--c-text) 9%, transparent); --lf-line-2: color-mix(in srgb, var(--c-text) 15%, transparent); }

/* ---- 4 · shadows, scrims and glows: soft greys instead of black halos --------------------------------------- */
html[data-mode="light"] [data-theme="dark"] .tile--link:hover,
html[data-mode="light"] [data-theme="dark"] .in-icard--link:hover,
html[data-mode="light"] [data-theme="dark"] .in-rel__card:hover { box-shadow: var(--lt-card-shadow-hover); }
html[data-mode="light"] .mega { box-shadow: 0 40px 80px -40px color-mix(in srgb, var(--c-shade) 40%, transparent); background: color-mix(in srgb, var(--c-ink-3) 94%, transparent); }
html[data-mode="light"] .mega-backdrop { background: var(--lt-scrim); -webkit-backdrop-filter: blur(10px) saturate(1.1); backdrop-filter: blur(10px) saturate(1.1); }
html[data-mode="light"] .cookie { background: color-mix(in srgb, var(--c-ink-3) 90%, transparent); box-shadow: 0 30px 80px -24px color-mix(in srgb, var(--c-shade) 45%, transparent), 0 0 0 1px color-mix(in srgb, var(--c-text) 6%, transparent); }
html[data-mode="light"] .cookie-dialog { background: var(--c-page); box-shadow: 0 40px 120px -30px color-mix(in srgb, var(--c-shade) 55%, transparent); }
html[data-mode="light"] .cookie-dialog__inner { --bg: var(--c-page); }
html[data-mode="light"] .cookie-cat { background: var(--c-paper); }
html[data-mode="light"] .cookie-dialog::backdrop { background: color-mix(in srgb, var(--c-shade) 34%, transparent); }
html[data-mode="light"] [data-theme="dark"] .tf-combo__list { box-shadow: 0 30px 70px -24px color-mix(in srgb, var(--c-shade) 45%, transparent), 0 4px 12px color-mix(in srgb, var(--c-shade) 10%, transparent); }
html[data-mode="light"] .in-flag { box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-text) 12%, transparent), 0 6px 14px -8px color-mix(in srgb, var(--c-shade) 50%, transparent); }
html[data-mode="light"] :is(.lf-feature__frame, .lf-feat__media, .lf-pc-hero__frame) { box-shadow: 0 1px 0 color-mix(in srgb, var(--c-shade) 8%, transparent), 0 50px 90px -50px color-mix(in srgb, var(--c-shade) 45%, transparent); }
html[data-mode="light"] .lf-card__badge { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--c-page) 60%, transparent), 0 14px 30px -18px color-mix(in srgb, var(--c-shade) 50%, transparent); }

/* buttons: the top highlight is page-white (it read "white" on the stage), glows are softer */
html[data-mode="light"] .btn--primary { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--c-page) 24%, transparent), 0 10px 26px -12px color-mix(in srgb, var(--c-accent) 60%, transparent); }
html[data-mode="light"] .btn--primary:hover { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--c-page) 24%, transparent), 0 16px 36px -12px color-mix(in srgb, var(--c-accent) 70%, transparent), 0 0 0 4px color-mix(in srgb, var(--c-accent) 14%, transparent); }
/* amber: a bright fill on light greys gets a hairline bronze edge so the button shape reads */
html[data-palette="light-amber"] .btn--primary { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-accent-600) 38%, transparent), inset 0 1px 0 color-mix(in srgb, var(--c-page) 30%, transparent), 0 10px 26px -12px color-mix(in srgb, var(--c-accent-600) 45%, transparent); }
html[data-palette="light-amber"] .btn--primary:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-accent-600) 50%, transparent), 0 16px 36px -12px color-mix(in srgb, var(--c-accent-600) 50%, transparent), 0 0 0 4px color-mix(in srgb, var(--c-accent) 22%, transparent); }
/* the "light" pill (the white primary on the dark stage) becomes the accent primary on the light stage: a black ink pill
   next to accent buttons read as a second, competing primary style */
html[data-mode="light"] [data-theme="dark"] .btn--light { background: var(--c-accent); color: var(--c-on-accent); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--c-page) 24%, transparent), 0 10px 26px -12px color-mix(in srgb, var(--c-accent) 60%, transparent); }
html[data-mode="light"] [data-theme="dark"] .btn--light:hover { background: var(--c-fill-a); }
html[data-palette="light-amber"] [data-theme="dark"] .btn--light { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-accent-600) 38%, transparent), inset 0 1px 0 color-mix(in srgb, var(--c-page) 30%, transparent), 0 10px 26px -12px color-mix(in srgb, var(--c-accent-600) 45%, transparent); }

/* range sliders: a white thumb with a soft shadow and an accent ring (was a white dot on the dark stage) */
html[data-mode="light"] .est__range::-webkit-slider-thumb,
html[data-mode="light"] .page-home .calc__range::-webkit-slider-thumb { background: var(--c-page); box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-text) 14%, transparent), 0 0 0 6px color-mix(in srgb, var(--c-accent) 18%, transparent), 0 4px 12px color-mix(in srgb, var(--c-shade) 35%, transparent); }
html[data-mode="light"] .est__range::-moz-range-thumb,
html[data-mode="light"] .page-home .calc__range::-moz-range-thumb { background: var(--c-page); box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-text) 14%, transparent), 0 0 0 6px color-mix(in srgb, var(--c-accent) 18%, transparent), 0 4px 12px color-mix(in srgb, var(--c-shade) 35%, transparent); }
html[data-mode="light"] .est__range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--c-page), 0 0 0 5px var(--c-accent-400), 0 4px 12px color-mix(in srgb, var(--c-shade) 35%, transparent); }
html[data-mode="light"] .page-home .calc__range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--c-page), 0 0 0 5px var(--c-accent-400); }

/* ---- 5 · aurora: from luminous blobs on black to a soft accent-tinted daylight wash ------------------------- */
html[data-mode="light"] .aurora span:nth-child(1) { background: radial-gradient(closest-side, color-mix(in srgb, var(--c-accent) 26%, transparent), color-mix(in srgb, var(--c-accent) 0%, transparent) 70%); }
html[data-mode="light"] .aurora span:nth-child(2) { background: radial-gradient(closest-side, color-mix(in srgb, var(--c-accent-tint) 90%, transparent), color-mix(in srgb, var(--c-accent-tint) 0%, transparent) 70%); }
html[data-mode="light"] .aurora span:nth-child(3) { background: radial-gradient(closest-side, color-mix(in srgb, var(--c-accent) 14%, transparent), color-mix(in srgb, var(--c-accent) 0%, transparent) 70%); }

/* ---- 6 · logos: dark marks on light (they were inverted to white for the dark stage) ------------------------ */
html[data-mode="light"] [data-theme="dark"] .client__logo img { filter: grayscale(1); opacity: 0.7; }
html[data-mode="light"] .page-home .tx__logo img { filter: grayscale(1) contrast(1.05); opacity: 0.66; }
html[data-mode="light"] .page-home .tx__logo:hover img { opacity: 1; }

/* ---- 7 · home: final CTA — a light stage with a soft accent-tinted gradient instead of the dark aurora ------ */
html[data-mode="light"] .page-home .cx { background: linear-gradient(180deg, var(--c-black), color-mix(in srgb, var(--c-black) 70%, var(--c-page))); }
html[data-mode="light"] .page-home .cx__aurora span:nth-child(1) { background: radial-gradient(closest-side, color-mix(in srgb, var(--c-accent) 30%, transparent), color-mix(in srgb, var(--c-accent) 0%, transparent) 72%); }
html[data-mode="light"] .page-home .cx__aurora span:nth-child(2) { background: radial-gradient(closest-side, color-mix(in srgb, var(--c-accent-tint) 95%, transparent), color-mix(in srgb, var(--c-accent-tint) 0%, transparent) 72%); }
html[data-mode="light"] .page-home .cx__aurora span:nth-child(3) { background: radial-gradient(closest-side, color-mix(in srgb, var(--c-accent) 16%, transparent), color-mix(in srgb, var(--c-accent) 0%, transparent) 72%); }
html[data-mode="light"] .page-home .cx__ribbon { opacity: 0.35; }
html[data-mode="light"] .page-home .cx__grain { background: linear-gradient(180deg, color-mix(in srgb, var(--c-page) 0%, transparent) 55%, color-mix(in srgb, var(--c-page) 70%, transparent) 100%), linear-gradient(90deg, color-mix(in srgb, var(--c-page) 55%, transparent) 0%, color-mix(in srgb, var(--c-page) 0%, transparent) 60%); }
html[data-mode="light"] .page-home .cx__intro, html[data-mode="light"] .page-home .cx__k { color: var(--c-on-dark-2); }
html[data-mode="light"] .page-home .cx__ico { background: color-mix(in srgb, var(--c-page) 70%, transparent); border-color: color-mix(in srgb, var(--c-text) 10%, transparent); color: var(--c-accent-400); }
html[data-mode="light"] .page-home .cx__card { box-shadow: 0 50px 110px -50px color-mix(in srgb, var(--c-shade) 55%, transparent), 0 0 0 1px color-mix(in srgb, var(--c-text) 6%, transparent); }

/* ---- 8 · home: sectors journey — photo on top, a flush light caption plate below ---------------------------- */
html[data-mode="light"] .page-home .sec-card__inner { border-color: color-mix(in srgb, var(--c-text) 7%, transparent); box-shadow: var(--lt-card-shadow); }
html[data-mode="light"] .page-home .sec.is-h .sec-card__shade { background: linear-gradient(180deg, color-mix(in srgb, var(--c-black) 18%, transparent) 0%, color-mix(in srgb, var(--c-black) 0%, transparent) 30%); }
/* flush with the card (no inset rim of photo around it, which framed dark photos in black), clipped by the card radius */
html[data-mode="light"] .page-home .sec.is-h .sec-card__body {
  margin: auto 0 0;
  padding: 1.5rem 1.75rem 1.75rem;
  border-radius: 0;
  border-top: 1px solid color-mix(in srgb, var(--c-text) 8%, transparent);
  background: color-mix(in srgb, var(--c-page) 95%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.1); backdrop-filter: blur(18px) saturate(1.1);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--c-page) 80%, transparent) inset;
}
/* the photo fades out underneath the plate, so no dark photo pixels show through the anti-aliased rounded corners */
html[data-mode="light"] .page-home .sec.is-h .sec-card__media { -webkit-mask-image: linear-gradient(180deg, #000 68%, transparent 86%); mask-image: linear-gradient(180deg, #000 68%, transparent 86%); }
html[data-mode="light"] .page-home .sec.is-h .sec-card__icon { margin-top: -2.9rem; }
html[data-mode="light"] .page-home .sec.is-h .sec-card__text { color: var(--c-text-2); }
html[data-mode="light"] .page-home .sec-all { background: radial-gradient(90% 70% at 80% 10%, color-mix(in srgb, var(--c-accent) 16%, transparent), transparent 70%), var(--c-ink-2); box-shadow: var(--lt-card-shadow); }

/* ---- 9 · photo tiles with text at the bottom: the photo stays at full contrast above, the caption sits on a solid
   page-white plate below with a short feather (dissolving dark night-skyline photos into light grey looked fogged) -- */
html[data-mode="light"] :is(.lang-tile__shade, .in-lang__shade, .in-rtile__shade, .in-mosaic__shade, .in-svc__shade) {
  background: linear-gradient(180deg, color-mix(in srgb, var(--c-black) 26%, transparent) 0%, color-mix(in srgb, var(--c-black) 0%, transparent) 22%);
}
html[data-mode="light"] :is(.lang-tile__body, .in-lang__body, .in-rtile__body, .in-mosaic__body, .in-svc__body) {
  --lt-feather: 16px;
  padding-top: calc(var(--lt-feather) + 0.85rem);
  background: linear-gradient(180deg, color-mix(in srgb, var(--c-page) 0%, transparent) 0, var(--c-page) var(--lt-feather));
}
html[data-mode="light"] .in-mosaic__body { padding-top: calc(var(--lt-feather) + 1rem); }
html[data-mode="light"] :is(.lang-tile__name, .in-lang__name, .in-rtile__sub, .in-svc__text, .in-mosaic__text) { color: var(--c-text-2); }
html[data-mode="light"] :is(.lang-tile, .in-lang__link, .in-rtile, .in-svc__link, .in-mosaic__card) { box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-text) 7%, transparent); }

/* ---- 10 · identity marks: certification badges + footer cert chips sit on white (the overloaded --c-white is ink
   inside stage scopes, which framed every badge in a near-black tile) ------------------------------------------ */
html[data-mode="light"] .cert__badge { background: #fff; box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-text) 8%, transparent), var(--lt-card-shadow); }
html[data-mode="light"] .footer-cert picture { background: #fff; box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-text) 8%, transparent); }

/* ---- 11 · home manifesto: the accent glow fades out before the pin's clip edge (it left a hard seam on light) ---- */
html[data-mode="light"] .page-home .mf__glow {
  opacity: calc(0.5 * var(--lt-glow));
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 92%); mask-image: linear-gradient(180deg, #000 30%, transparent 92%);
}

/* ---- 12 · atmospheric accent glows: additive blobs that glowed on black read as watercolour stains on light grey.
   Cut to ~40 % and replace accent underglows beneath photos with the neutral card shadow. ----------------------- */
html[data-mode="light"] :is(.in-short__glow, .in-wave__glow),
html[data-mode="light"] .feature::after,
html[data-mode="light"] .lf-digest::before { opacity: calc(0.42 * var(--lt-glow)); }
html[data-mode="light"] .lf-pc-card--settings::after { opacity: calc(0.4 * var(--lt-glow)); }
html[data-mode="light"] .lf-pc-card--settings:hover { box-shadow: var(--lt-card-shadow-hover); }
html[data-mode="light"] :is(.in-hero__frame, .in-hero__portrait) { box-shadow: var(--lt-card-shadow); }
html[data-mode="light"] .page-home .hx__glow,
html[data-mode="light"] .aurora,
html[data-mode="light"] .page-home .cx__aurora { opacity: var(--lt-glow); }

/* ---- 13 · neutral info notes: an accent-tinted note read as an error alert (crimson accent ≈ error red) ----------- */
html[data-mode="light"] .pricing__note { background: color-mix(in srgb, var(--c-text) 4%, transparent); border: 1px solid color-mix(in srgb, var(--c-text) 8%, transparent); }
html[data-mode="light"] .pricing__note .icon { color: var(--fg-2); }

/* ---- 14 · light-crimson: fewer solid crimson fills (icon tiles and check discs become porcelain with a crimson glyph) */
html[data-palette="light-crimson"] :is(.ccard__icon, .feature__icon, .in-note__icon) {
  color: var(--c-accent-600); background: var(--c-paper);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-text) 9%, transparent), 0 8px 18px -12px color-mix(in srgb, var(--c-shade) 45%, transparent);
}
html[data-palette="light-crimson"] [data-theme="dark"] :is(.ccard__icon, .feature__icon) { background: var(--c-page); }
html[data-palette="light-crimson"] :is(.chelp__mark, .in-checks__mark, .in-glance__mark) {
  color: var(--c-accent-600); background: transparent;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c-accent-600) 55%, transparent);
}

/* ---- 15 · light-amber: display numerals and headline words in solid ink (ink→bronze gradients read khaki);
   saffron carries the accent as marks instead — a saffron underline under the accent words --------------------- */
html[data-palette="light-amber"] { --grad-text-dark: linear-gradient(var(--c-on-dark), var(--c-on-dark)); }
html[data-palette="light-amber"] :is(.page-home .hx__word-txt, .page-home .sx__v .stat__value, .page-home .calc__amount, .in-hero__native, .stat__value, .price--feature .price__num) {
  background: linear-gradient(var(--c-text), var(--c-text)); -webkit-background-clip: text; background-clip: text;
}
html[data-palette="light-amber"] :is(.page-home .hx__grad, .vx__hw:nth-child(2), .vx__hw:nth-child(3)) {
  background: none; color: var(--c-text); -webkit-text-fill-color: currentColor;
  text-decoration: underline; text-decoration-color: var(--c-accent); text-decoration-thickness: 0.08em; text-underline-offset: 0.12em; text-decoration-skip-ink: none;
}

/* ---- 16 · leftover black shadows → soft greys from --c-shade ------------------------------------------------- */
html[data-mode="light"] .page-home .svc-card { box-shadow: 0 1px 0 color-mix(in srgb, var(--c-shade) 6%, transparent), 0 40px 80px -40px color-mix(in srgb, var(--c-shade) 34%, transparent); }
html[data-mode="light"] .tf-swap { box-shadow: 0 6px 16px -10px color-mix(in srgb, var(--c-shade) 40%, transparent); }
html[data-mode="light"] .page-home .tx__cert-list .cert { box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-text) 4%, transparent), var(--lt-card-shadow); }
html[data-mode="light"] .price--feature { box-shadow: var(--lt-card-shadow), 0 40px 90px -50px color-mix(in srgb, var(--c-accent) calc(40% * var(--lt-glow)), transparent); }
html[data-mode="light"] .qpkg.is-selected { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-accent-300) 35%, transparent), var(--lt-card-shadow), 0 40px 90px -50px color-mix(in srgb, var(--c-accent) calc(40% * var(--lt-glow)), transparent); }

/* ==== 99-client-2026-10.css ==== */
/* 99 · Client change list of 2026-10-15 (loaded last; overrides the design system on purpose).
   1. Typography: exactly two font sizes on the whole site — one big (page + section headings) and one small
      (everything else). Hierarchy below the section heading comes from weight and colour, not size.
   2. Running text is justified (left and right edges aligned), with hyphenation so lines don't open gaps.
   3. Sectors + languages photos: greyscale, fading to colour as a card reaches the centre (--gs set by 50-home.js).
   4. Trust (logos + certifications) now follows the hero: tighter spacing so it reads as one band. */

:root {
  --tw-fs-big: clamp(1.875rem, 1.3rem + 2.2vw, 3rem);   /* 30 → 48 */
  --tw-fs-small: 1rem;                                  /* 16 */
}

/* ---------- 1 · two sizes ---------- */
html body,
/* the homepage globe hero keeps its original type scale (client request 2026-10-15): it is excluded throughout */
html body *:not(svg):not(svg *):not(.hx, .hx *) { font-size: var(--tw-fs-small) !important; }
html body .hx { font-size: var(--fs-body) !important; } /* the base size the hero had before (17px) */

/* headings that are UI labels (footer columns, cookie dialog, menus, article cards) stay small */
html body :is(h1, h2, .sec-all__title, .cx__title, .footer-hero__title):not(
  .footer-col__title, .cookie-dialog__title, .lf-label, .lf-card h2, .mega h2, .mmenu h2, .site-footer h2, .sr-only, .hx *
),
html body :is(h1, h2, .sec-all__title, .cx__title, .footer-hero__title):not(
  .footer-col__title, .cookie-dialog__title, .lf-label, .lf-card h2, .mega h2, .mmenu h2, .site-footer h2, .hx *
) :is(em, span, a, strong, div):not(.sr-only) {
  font-size: var(--tw-fs-big) !important;
}
html body :is(h1, h2, .sec-all__title, .cx__title):not(.footer-col__title, .site-footer h2, .lf-card h2, .hx *) { line-height: 1.12; }
/* small-size headings keep a clear hierarchy through weight */
html body :is(h3, h4, h5, h6):not(.hx *) { font-weight: 650; line-height: 1.35; }

/* ---------- 2 · justified text ---------- */
/* Client 2026-10-17: justified "as much as possible" but never with big gaps, and NEVER a hyphenated word.
   Text starts left-aligned; js/95-justify.js sets [data-tw-just] on running-text blocks whose line is wide enough
   (>= 30em) to justify evenly. Narrow columns (cards, side panels, phones) stay left-aligned so no gaps open up. */
:where(p, li, dd, blockquote, figcaption, .prose, .lf-body) { text-align: start; text-wrap: pretty; }
:where([data-tw-just]) { text-align: justify; text-justify: inter-word; }
html, html body, html body * { -webkit-hyphens: none !important; hyphens: none !important; }
/* headings are never justified, even when they sit inside a justified list item (cards are <li>) */
:where(li, p, dd, blockquote) :where(h1, h2, h3, h4, h5, h6) { text-align: start; }
/* centred heads stay centred; UI rows (nav, buttons, chips, footer, forms) are not running text */
:where(.shead--center, .center, [class*="--center"], .hw__cta, .cx__ctas) :where(p, li) { text-align: center; }
:where(nav, .site-header, .site-footer, .footer-col__list, .btn, .chip, .lsx__list, .mono, label, legend, .tf-points, .footer-contact, .footer-socials, .qhero__facts, .in-short__links, .sec__meter) :where(p, li),
:where(nav, .site-header, .site-footer) * { text-align: start; }

/* ---------- 3 · services, sectors + languages: grey → colour on scroll ---------- */
html[data-photos] .sec-card .sec-card__media picture,
html[data-photos] .sec-card .sec-card__media img,
html[data-photos] .svc-card .svc-card__media picture,
html[data-photos] .svc-card .svc-card__media img {
  filter: grayscale(var(--gs, 1)) contrast(1.04);
  transition: filter 0.35s linear;
}
html[data-photos] .sec-card .sec-card__media :is(picture, img) { transition-duration: 0.6s; transition-timing-function: ease; }
@media (prefers-reduced-motion: reduce) {
  html[data-photos] :is(.sec-card .sec-card__media, .svc-card .svc-card__media) :is(picture, img) { transition: none; }
}
.sec-card__code { display: inline-block; margin-bottom: 0.5rem; color: var(--c-accent); letter-spacing: 0.08em; }
.sec-card__native { font-weight: 450; color: var(--c-on-dark-2); }
.lx--search { padding-top: clamp(2rem, 4vw, 3.5rem); }

/* ---------- 4 · trust band right after the hero ---------- */
.page-home .tx { padding-block: clamp(3rem, 6vw, 5rem); }
.page-home .tx__head { text-align: center; margin-inline: auto; max-width: 46rem; }
.page-home .tx__head :where(p) { text-align: center; }
.page-home .tx__certs { margin-top: clamp(2.5rem, 5vw, 4rem); text-align: center; }
.page-home .tx__certs-title { margin-bottom: 1.5rem; }
.page-home .tx__cert-list { justify-content: center; }

/* ---------- 5 · contact by email only: the email card that replaces every contact form ---------- */
.mailcard { display: grid; gap: 0.75rem; justify-items: start; }
.cx__card .mailcard { padding: clamp(0.25rem, 1vw, 0.75rem); }
.mailcard__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--c-accent-050); color: var(--c-accent); }
.mailcard__k { font-weight: 650; margin-top: 0.25rem; }
.mailcard__addr a { font-weight: 650; color: var(--c-accent-600); text-decoration: none; overflow-wrap: anywhere; }
.mailcard__addr a:hover { text-decoration: underline; }
.mailcard__text { color: var(--c-text-2); max-width: 34rem; }
.mailcard__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.5rem; }

/* ---------- 6 · service card titles use the big size (client: titles were hard to tell apart) ---------- */
html body.page-home .svc-card__title { font-size: var(--tw-fs-big) !important; line-height: 1.1; letter-spacing: -0.015em; font-weight: 650; margin-block: 0.25rem 0.5rem; overflow-wrap: break-word; }

/* ---------- 7 · five-card grids (services hub after Interpreting + Custom were added) ----------
   phone: one column · tablet: 2 + 2 + the fifth spanning the row with a wide photo · desktop: 2 wide + 3 */
@media (min-width: 700px) and (max-width: 1039.98px) {
  .in-icards--n5 > :last-child { grid-column: span 2; }
  .in-icards--n5 > :last-child .in-icard__media { aspect-ratio: 21 / 9; }
}
@media (min-width: 1040px) {
  .in-icards--n5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .in-icards--n5 > :nth-child(-n + 2) { grid-column: span 3; }
  .in-icards--n5 > :nth-child(n + 3) { grid-column: span 2; }
}

/* "More ways to speak your customer's language" rail with five services: 3 on the first row, 2 wider below */
@media (min-width: 1040px) {
  .in-svcs-sec :has(> .in-svc:nth-child(5):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
  .in-svcs-sec .in-svc:nth-child(-n + 3):nth-last-child(n + 3) { grid-column: span 2; }
  .in-svcs-sec .in-svc:nth-child(4):nth-last-child(2), .in-svcs-sec .in-svc:nth-child(5):last-child { grid-column: span 3; }
}
/* every card's white text panel starts at the same height (text length and the missing "Explore" link on the
   current card used to shift it); the link sits at the bottom of the panel */
.in-svcs-sec .in-svc__body { min-height: 15.5rem; justify-content: flex-start; }
.in-svcs-sec .in-svc__go { margin-top: auto; padding-top: 1rem; }

/* ---------- 8 · /sectors mosaic with eight industries ----------
   tablet: wide first card, 3 rows of 2, wide last card · desktop: [wide + 1] then two rows of 3 */
@media (min-width: 640px) and (max-width: 999.98px) { .in-mosaic--n8 .in-mosaic__item--8 { grid-column: span 2; } }
@media (min-width: 1000px) {
  .in-mosaic--n8 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .in-mosaic--n8 .in-mosaic__item--1 { grid-column: span 2; }
}