/* Meliora Novotech — site styles.
   All sizes are in rem so the accessibility panel's text size setting scales the whole page.
   Colors are tokens so the high-contrast preference can swap them in one place. */

:root {
  --ink: #15173f;          /* wordmark navy */
  --ink-soft: #2a2d5c;
  --muted: #4a4f68;        /* 8.2:1 on white */
  --brand: #2557b4;        /* 6.3:1 on white */
  --brand-strong: #1c4592;
  --cyan: #38b6e6;         /* decorative only */
  --paper: #f6f8fc;
  --surface: #ffffff;
  --tint: #eaf1fb;
  --line: #d8dfeb;
  --night: #11133a;
  --night-ink: #e9edfb;
  --night-muted: #b9c0dc;  /* 9.5:1 on --night */
  --night-line: #2c3068;
  --ok: #17663a;
  --error: #b3261e;
  --focus: #2557b4;
  --gradient: linear-gradient(135deg, #38b6e6 0%, #2557b4 100%);
  --button: #2557b4;            /* white text on it: 6.3:1 */
  --button-hover: #1c4592;
  --field-border: #8d95ad;
  --card-hover-border: #b9c6dd;
  --ring: #b9c6dd;
  --accent-text: linear-gradient(135deg, #1a7fb5 0%, #2557b4 70%);  /* every point ≥ 4.4:1 on the page */
  --radius: 1rem;
  --radius-sm: .5rem;
  --shadow: 0 1px 2px rgb(21 23 63 / .06), 0 .75rem 2rem -1rem rgb(21 23 63 / .25);
  --container: 75rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --a11y-text-scale: 1;
  color-scheme: light;
}

/* Dark theme. Selected by theme.js (Light / Dark / System) via html[data-theme]. All text pairs ≥ 4.5:1. */
html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #eef0fa;
  --ink-soft: #d3d7ee;
  --muted: #aab1d0;
  --brand: #8ab4ff;
  --brand-strong: #b8d0ff;
  --button: #3b6fd4;            /* white text on it: 4.8:1 */
  --button-hover: #2c5bb8;
  --paper: #0b0d22;
  --surface: #151838;
  --tint: #1d2250;
  --line: #2f3566;
  --field-border: #7d86a8;
  --card-hover-border: #4a5390;
  --ring: #3a4178;
  --night: #06071a;
  --night-ink: #e9edfb;
  --night-muted: #b9c0dc;
  --night-line: #262a55;
  --ok: #6fd49a;
  --error: #ff8a80;
  --focus: #8ab4ff;
  --accent-text: linear-gradient(135deg, #6cd0f5 0%, #8ab4ff 70%);
}

/* Logo: dark wordmark on light themes, white wordmark on dark. */
.logo-on-dark { display: none; }
html[data-theme="dark"] .logo-on-light { display: none; }
html[data-theme="dark"] .logo-on-dark { display: block; }

/* Theme switch (Light / Dark / System) */
.theme-switch { display: inline-flex; padding: .2rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); align-self: flex-start; }
.theme-switch button {
  display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0; margin: 0 .075rem; overflow: hidden;
  border: 0; border-radius: 50%; background: none; color: var(--muted);
  transition: width .2s, margin .2s, opacity .2s;
}
/* Collapsed: only the current choice shows. Hover or keyboard focus opens all three.
   It stays open in the phone menu and when "Highlight links & fields" is on. */
.theme-switch:not(:hover):not(:focus-within) button[aria-pressed="false"] { width: 0; margin: 0; opacity: 0; pointer-events: none; }
#navigation.open .theme-switch button[aria-pressed="false"], html.a11y-links .theme-switch button[aria-pressed="false"] { width: 2rem; margin: 0 .075rem; opacity: 1; pointer-events: auto; }
.theme-switch button:hover { color: var(--ink); background: var(--tint); }
.theme-switch button[aria-pressed="true"] { background: var(--button); color: #fff; }
.theme-switch svg { width: 1rem; height: 1rem; }
.header-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; min-width: 0; }

/* ---------- reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  font-size: calc(100% * var(--a11y-text-scale));
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Hebrew", "Noto Sans Arabic", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--brand); text-underline-offset: .2em; }
a:hover { color: var(--brand-strong); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
h1, h2, h3 { line-height: 1.12; letter-spacing: -.02em; margin: 0 0 1rem; color: var(--ink); overflow-wrap: break-word; }
h1 { font-size: clamp(2.5rem, 5.5vw, 4.25rem); font-weight: 750; letter-spacing: -.035em; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); font-weight: 720; letter-spacing: -.03em; }
h3 { font-size: 1.3rem; font-weight: 680; }
p { margin: 0 0 1rem; }
ul, ol { margin: 0; padding: 0; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
[tabindex="-1"]:focus { outline: none; }
[tabindex="-1"]:focus-visible { outline: 3px solid var(--focus); }

.container { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; }
/* Layout breakpoints are container queries on these regions. Their em units follow the root font size,
   so the accessibility menu's text size behaves like browser zoom (the layout reflows instead of overflowing). */
.header, main, .footer { container-type: inline-size; }
.service-grid > li, .steps > li, .principles > li, .hero-grid > *, .approach-grid > *, .contact-grid > *, .form-row > *, .section-head > *, .footer-main > *, .careers-card > * { min-width: 0; }
h1, h2, h3, p, li, a { overflow-wrap: break-word; }
h1 { hyphens: auto; }
.visually-hidden { 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 {
  position: absolute; inset-inline-start: 1rem; top: -10rem; z-index: 100;
  background: var(--button); color: #fff; padding: .75rem 1.25rem; border-radius: var(--radius-sm);
  font-weight: 650; text-decoration: none;
}
.skip:focus { top: 1rem; color: #fff; }

/* ---------- buttons & links ---------- */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 3rem; padding: .75rem 1.4rem; border-radius: 999px;
  border: 2px solid var(--button); background: var(--button); color: #fff;
  font-weight: 650; font-size: 1rem; line-height: 1.2; text-decoration: none; max-width: 100%; text-align: center;
  transition: background-color .2s, border-color .2s, transform .2s;
}
.button:hover { background: var(--button-hover); border-color: var(--button-hover); color: #fff; }
.button:active { transform: translateY(1px); }
.button.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.button.ghost:hover { border-color: var(--ink); background: var(--surface); color: var(--ink); }
.button.light { background: #fff; border-color: #fff; color: #15173f; }
.button.light:hover { background: #eaf1fb; border-color: #eaf1fb; color: #15173f; }
.button:disabled { background: #8a90a8; border-color: #8a90a8; color: #fff; }
.arrow { display: inline-block; transition: transform .2s; }
a:hover .arrow, button:hover .arrow { transform: translateX(.2rem); }
[dir="rtl"] .arrow { transform: scaleX(-1); }
[dir="rtl"] a:hover .arrow { transform: scaleX(-1) translateX(.2rem); }

.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--brand); margin-bottom: 1rem;
}
.eyebrow::before { content: ""; width: 1.5rem; height: 2px; background: var(--gradient); border-radius: 2px; }

/* ---------- header ---------- */
.header {
  position: sticky; top: 0; z-index: 20;
  background: var(--surface);
  border-bottom: 1px solid transparent; transition: border-color .2s;
}
.header.scrolled { border-bottom-color: var(--line); }
.header-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; min-height: 4.5rem; padding-block: .5rem; }
.brand { display: inline-flex; min-width: 0; border-radius: var(--radius-sm); }
.brand img { width: 10.5rem; max-width: 100%; }
.menu-toggle {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: .5rem 1rem;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-weight: 600;
}
.menu-icon { width: 1.1rem; height: .8rem; position: relative; border-block: 2px solid currentColor; }
.menu-icon::after { content: ""; position: absolute; inset-inline: 0; top: 50%; height: 2px; margin-top: -1px; background: currentColor; }
#navigation { display: none; }
#navigation.open {
  display: flex; flex-direction: column; gap: .25rem;
  position: absolute; inset-inline: 0; top: 100%;
  padding: 1rem var(--gutter) 1.5rem; background: var(--surface); border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow);
}
#navigation a { padding: .7rem .25rem; color: var(--ink); text-decoration: none; font-weight: 600; border-radius: var(--radius-sm); }
#navigation a:hover { color: var(--brand); }
#navigation a.button { color: #fff; margin-top: .5rem; padding-inline: 1.4rem; }
#navigation .theme-switch { margin-block: .5rem 0; }
@container (min-width: 60em) {
  .menu-toggle { display: none; }
  #navigation, #navigation.open {
    display: flex; flex-direction: row; align-items: center; gap: 1.75rem;
    position: static; padding: 0; background: none; border: 0; box-shadow: none;
  }
  #navigation a.button { margin: 0 0 0 .5rem; }
  #navigation .theme-switch { margin: 0; align-self: center; }
}

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; padding-block: clamp(3rem, 7vw, 6rem) clamp(3rem, 6vw, 5rem); }
.hero::before {
  content: ""; position: absolute; inset: -20% -10% auto auto; width: 55rem; height: 55rem; z-index: -1;
  background: radial-gradient(closest-side, rgb(56 182 230 / .18), transparent 70%);
}
.hero-grid { display: grid; gap: 3rem; align-items: center; }
@container (min-width: 60em) { .hero-grid { grid-template-columns: 1.1fr .9fr; } }
.hero h1 .accent { /* darker start than --gradient: every point stays ≥ 4.4:1 */ background: var(--accent-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-lead { font-size: clamp(1.125rem, 1.6vw, 1.3rem); color: var(--muted); max-width: 36rem; margin-bottom: 2rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.hero-visual { position: relative; max-width: 32rem; width: 100%; margin-inline: auto; }
.hero-visual svg { width: 100%; }
.hero-visual .flow { stroke-dasharray: 6 8; animation: flow 2.8s linear infinite; }
.hero-visual .pulse { transform-origin: 240px 210px; transform-box: view-box; animation: pulse 2.8s ease-in-out infinite; }
@keyframes flow { from { stroke-dashoffset: 140; } to { stroke-dashoffset: 0; } }
@keyframes pulse { 0%, 100% { opacity: .15; transform: scale(.92); } 50% { opacity: .35; transform: scale(1.04); } }
.hero-visual.paused .flow, .hero-visual.paused .pulse { animation-play-state: paused; }
/* Pause control: anything that moves for more than 5 seconds needs one (WCAG 2.2.2).
   Icon only; the label shows as a tooltip on hover or keyboard focus, and permanently when
   "Highlight links & fields" is on. The label stays in the accessibility tree at all times. */
.motion-toggle {
  position: absolute; bottom: 8%; right: 2%;
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0;
  border: 1px solid var(--field-border); border-radius: 50%; background: var(--surface); color: var(--ink);
}
.motion-toggle:hover { border-color: var(--ink); }
.motion-toggle svg { width: .8rem; height: .8rem; }
.motion-toggle .icon-play, .hero-visual.paused .motion-toggle .icon-pause { display: none; }
.hero-visual.paused .motion-toggle .icon-play { display: block; }
.motion-label {
  position: absolute; bottom: calc(100% + .5rem); right: 0;
  padding: .35rem .7rem; border-radius: .4rem; background: #15173f; color: #fff; border: 1px solid var(--line);
  font-size: .875rem; font-weight: 600; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .15s;
}
.motion-toggle:hover .motion-label, .motion-toggle:focus-visible .motion-label, html.a11y-links .motion-label { opacity: 1; pointer-events: auto; }
.motion-toggle.tip-dismissed .motion-label { opacity: 0; pointer-events: none; }
html.a11y-contrast .motion-toggle { border: 2px solid #000; }
html.a11y-contrast .motion-label { background: #000; border: 2px solid #fff; }
@media (prefers-reduced-motion: reduce) { .hero-visual .flow, .hero-visual .pulse { animation: none; } .motion-toggle { display: none; } }
html.a11y-motion-off .motion-toggle { display: none; }

.audience { margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.5rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; }
.audience p { margin: 0; font-weight: 600; color: var(--muted); }
.audience ul { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; }
.audience li { padding: .35rem .9rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: .9375rem; font-weight: 600; }

/* ---------- sections ---------- */
.section { padding-block: clamp(4rem, 9vw, 7rem); }
.section-head { display: grid; gap: 1rem 3rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
@container (min-width: 60em) { .section-head { grid-template-columns: 1fr 1fr; align-items: end; } }
.section-head p { color: var(--muted); font-size: 1.125rem; max-width: 34rem; }

/* approach */
.approach { background: var(--surface); border-block: 1px solid var(--line); }
.approach-grid { display: grid; gap: 2.5rem; }
@container (min-width: 60em) { .approach-grid { grid-template-columns: .9fr 1.1fr; gap: 5rem; } }
.lead { font-size: clamp(1.25rem, 2vw, 1.5rem); color: var(--ink); font-weight: 560; line-height: 1.45; }
.approach-copy > p:not(.lead) { color: var(--muted); }
.principles { list-style: none; display: grid; gap: 1rem; margin-top: 2rem; }
@container (min-width: 40em) { .principles { grid-template-columns: repeat(3, 1fr); } }
.principles li { padding: 1.25rem; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--line); }
.principles strong { display: block; margin-bottom: .35rem; color: var(--ink); }
.principles span { color: var(--muted); font-size: .9375rem; }

/* services */
.service-grid { list-style: none; display: grid; gap: 1.25rem; }
@container (min-width: 60em) { .service-grid { grid-template-columns: repeat(3, 1fr); } }
.service-card {
  position: relative; display: flex; flex-direction: column; height: 100%;
  padding: clamp(1.25rem, 6cqi, 2rem); border-radius: var(--radius); background: var(--surface);
  border: 1px solid var(--line); box-shadow: var(--shadow);
  transition: transform .2s, border-color .2s;
}
.service-card:hover { transform: translateY(-3px); border-color: var(--card-hover-border); }
.service-icon {
  display: grid; place-items: center; width: 3.25rem; height: 3.25rem; margin-bottom: 1.5rem;
  border-radius: .9rem; background: var(--tint); color: var(--brand);
}
.service-icon svg { width: 1.75rem; height: 1.75rem; }
.service-card > p { color: var(--muted); }
.service-card ul { list-style: none; display: grid; gap: .5rem; margin: .5rem 0 1.75rem; }
.service-card li { position: relative; padding-inline-start: 1.5rem; font-size: .975rem; }
.service-card li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .55em; width: .55rem; height: .55rem;
  border-radius: 2px; background: var(--gradient); transform: rotate(45deg);
}
.service-link { margin-top: auto; font-weight: 650; text-decoration: none; display: inline-flex; gap: .4rem; align-items: center; }
.service-link:hover { text-decoration: underline; }

/* security & privacy */
.security { background: var(--surface); border-block: 1px solid var(--line); }
.security .service-card { background: var(--paper); box-shadow: none; }
.security-principles { margin-top: 1.5rem; }
.security-principles li { background: var(--surface); }
.security-cta { margin: 2rem 0 0; }

/* process */
.process { background: var(--night); color: var(--night-ink); }
.process h2, .process h3 { color: #fff; }
.process .eyebrow { color: #8fd3f2; }
.process .section-head p { color: var(--night-muted); }
.steps { list-style: none; display: grid; gap: 1.25rem; counter-reset: step; }
@container (min-width: 40em) { .steps { grid-template-columns: repeat(2, 1fr); } }
@container (min-width: 64em) { .steps { grid-template-columns: repeat(4, 1fr); } }
.steps li { padding: 1.75rem; border: 1px solid var(--night-line); border-radius: var(--radius); background: rgb(255 255 255 / .03); }
.steps li::before {
  counter-increment: step; content: "0" counter(step);
  display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; margin-bottom: 1.25rem;
  border-radius: 50%; background: var(--gradient); color: #fff; font-weight: 700; font-size: .9rem;
}
.steps p { color: var(--night-muted); margin: 0; }

/* careers */
.careers { padding-block: clamp(3rem, 6vw, 4.5rem); }
.careers-card {
  display: grid; gap: 1.5rem; align-items: center; padding: clamp(2rem, 5vw, 3rem);
  border-radius: calc(var(--radius) * 1.5); color: #fff;
  /* darker stops than --gradient so white body text stays ≥ 4.5:1 */
  background: linear-gradient(135deg, #1f6fb0 0%, #1c4592 100%);
}
@container (min-width: 50em) { .careers-card { grid-template-columns: 1fr auto; } }
.careers-card h2 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.25rem); }
.careers-card p { margin: 0; color: #fff; max-width: 38rem; }
.careers-card .eyebrow { color: #fff; }
.careers-card .eyebrow::before { background: #fff; }

/* contact */
.contact-grid { display: grid; gap: 3rem; }
@container (min-width: 60em) { .contact-grid { grid-template-columns: .85fr 1.15fr; gap: 4rem; } }
.contact-intro { color: var(--muted); font-size: 1.125rem; }
.contact-details { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-top: 2rem; }
.contact-details a { overflow-wrap: anywhere; }
.contact-details li { display: grid; gap: .1rem; }
.contact-details .label { font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.contact-details a, .contact-details span.value { font-size: 1.125rem; font-weight: 600; color: var(--ink); text-decoration: none; }
.contact-details a:hover { color: var(--brand); text-decoration: underline; }

.form-card { padding: clamp(1.5rem, 4vw, 2.5rem); border-radius: calc(var(--radius) * 1.25); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.form-row { display: grid; gap: 0 1.25rem; }
@container (min-width: 40em) { .form-row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: .35rem; margin-bottom: 1.25rem; }
.field label { font-weight: 650; }
.field .hint { font-weight: 500; color: var(--muted); font-size: .875rem; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 3rem; padding: .7rem .9rem;
  border: 1.5px solid var(--field-border); border-radius: var(--radius-sm); background: var(--surface);
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink-soft); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
.field [aria-invalid="true"] { border-color: var(--error); border-width: 2px; }
.field-error { color: var(--error); font-size: .9375rem; font-weight: 600; margin: 0; }
.field-error:empty { display: none; }
.field-error::before { content: "⚠ "; }
.honeypot { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-privacy { font-size: .9375rem; color: var(--muted); }
.inline-button { padding: 0; border: 0; background: none; color: var(--brand); font-weight: 650; text-decoration: underline; text-underline-offset: .2em; }
#turnstile { margin-block: .5rem 1rem; min-height: 4.1rem; }
.form-status { margin: 0 0 .75rem; font-weight: 600; color: var(--muted); }
.form-status:empty { display: none; }
.form-status.success { color: var(--ok); }
.form-status.error { color: var(--error); }
.submit { width: 100%; }
@container (min-width: 40em) { .submit { width: auto; } }

/* ---------- footer ---------- */
.footer { background: var(--night); color: var(--night-ink); padding-block: 3.5rem 2rem; }
.footer a, .footer button { color: var(--night-ink); }
.footer-main { display: grid; gap: 2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--night-line); }
@container (min-width: 50em) { .footer-main { grid-template-columns: 1fr auto; align-items: center; } }
.footer .brand img { width: 10rem; }
.footer-tagline { margin: .75rem 0 0; color: var(--night-muted); }
.footer-nav { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.footer-nav a { text-decoration: none; font-weight: 600; }
.footer-nav a:hover { text-decoration: underline; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-top: 1.5rem; color: var(--night-muted); font-size: .9375rem; }
.footer-links { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.footer-links a, .footer-links button { background: none; border: 0; padding: 0; color: var(--night-ink); text-decoration: underline; text-underline-offset: .2em; font-size: inherit; }
.footer :focus-visible { outline-color: #8fd3f2; }

/* ---------- dialogs (privacy) ---------- */
dialog.sheet {
  width: min(40rem, 100% - 2rem); max-height: min(85dvh, 50rem); padding: 0;
  border: 0; border-radius: var(--radius); background: var(--surface); color: var(--ink);
  box-shadow: 0 2rem 4rem -1rem rgb(17 19 58 / .45);
}
dialog.sheet::backdrop { background: rgb(17 19 58 / .55); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: inherit; }
.sheet-head h2 { font-size: 1.4rem; margin: 0; }
.sheet-body { padding: 1.5rem; }
.sheet-body p { color: var(--muted); }
.icon-button {
  display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; flex-shrink: 0;
  border: 1px solid var(--line); border-radius: 50%; background: var(--surface); font-size: 1.4rem; line-height: 1;
}
.icon-button:hover { border-color: var(--ink); }
body.dialog-open { overflow: hidden; }

/* ---------- statement pages ---------- */
.doc { padding-block: clamp(3rem, 6vw, 5rem); }
.doc-inner { max-width: 48rem; }
.doc h1 { font-size: clamp(2.2rem, 4.5vw, 3.25rem); }
.doc h2 { font-size: clamp(1.4rem, 2.4vw, 1.75rem); margin-top: 2.75rem; }
.doc p, .doc li { color: var(--ink-soft); }
.doc ul { padding-inline-start: 1.25rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; }
.doc li a { overflow-wrap: anywhere; }
.doc .meta { color: var(--muted); font-weight: 600; }
.doc .table-wrap { overflow-x: auto; margin-block: 1rem; border-radius: var(--radius-sm); }
.doc table { min-width: 22rem; border-collapse: collapse; width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.doc th, .doc td { text-align: start; padding: .7rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.doc th { background: var(--tint); font-weight: 700; }
.doc kbd, .a11y-panel kbd {
  display: inline-block; min-width: 1.6em; padding: .1em .45em; border: 1px solid #9aa2b8; border-bottom-width: 2px;
  border-radius: .35em; background: var(--surface); font: 600 .875em/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-align: center; color: var(--ink);
}
.doc .lang-switch { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.doc-header-link { font-weight: 600; text-decoration: none; }
.doc-header-link:hover { text-decoration: underline; }

/* Hero illustration colors follow the theme */
.hero-visual .ring { stroke: var(--ring); }
.hero-visual .node { fill: var(--surface); stroke: var(--line); }
.hero-visual .labels { fill: var(--ink); }

/* Accessibility panel: site-specific additions for High contrast and Highlight links & fields */
.footer { padding-bottom: 5rem; }
html.a11y-contrast .logo-on-dark { display: none; }
html.a11y-contrast .logo-on-light { display: block; }
html.a11y-contrast .hero::before { display: none; }
html.a11y-contrast .header { background: #fff; backdrop-filter: none; border-bottom: 2px solid #000; }
html.a11y-contrast .hero h1 .accent { background: none; color: var(--brand); -webkit-text-fill-color: currentColor; }
html.a11y-contrast .careers-card { background: #000; border: 2px solid #000; }
html.a11y-contrast .service-card, html.a11y-contrast .principles li, html.a11y-contrast .form-card, html.a11y-contrast .audience li { border: 2px solid #000; }
html.a11y-contrast .service-card li::before, html.a11y-contrast .eyebrow::before { background: #000; }
html.a11y-contrast .process .eyebrow, html.a11y-contrast .careers-card .eyebrow { color: #fff; }
html.a11y-contrast .careers-card .eyebrow::before, html.a11y-contrast .process .eyebrow::before { background: #fff; }
html.a11y-contrast .steps li { border: 2px solid #fff; background: #000; }
html.a11y-contrast .steps li::before { background: #fff; color: #000; }
html.a11y-contrast .footer :focus-visible, html.a11y-contrast .process :focus-visible { outline-color: #ffd400; }
html.a11y-contrast .field input, html.a11y-contrast .field select, html.a11y-contrast .field textarea { border: 2px solid #000; }
html.a11y-contrast .service-icon { border: 1.5px solid #000; }
html.a11y-contrast .button.ghost { border-color: #000; }
html.a11y-contrast .button.light { background: #fff; color: #000; border-color: #fff; }
html.a11y-links .field input, html.a11y-links .field select, html.a11y-links .field textarea { border: 2px solid var(--ink) !important; }