/* chadaev.ai v3 design system: "Claude A" (design/claude-a).
   IBM Plex Sans on white, a petrol accent for actions and links, grey panels for the
   commercial blocks (prices, the form, notes) and one dark band per page for evidence
   (the home proof strip, deliverables on service pages, the case summary).
   Two splits carry every two-column block: 1/3 + 2/3 (a title or label column and the
   content column, x=552 at 1440) and 2/3 + 1/3 (main copy and an aside, x=936).
   Desktop first, breakpoints at 1100, 860 and 600 px as in the approved mockup. */

/* ---------- font: IBM Plex Sans, self-hosted (SIL OFL, static/fonts/OFL.txt) ---------- */
@font-face {
  font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("/static/fonts/plex-sans-cyrillic-ext.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: "IBM Plex Sans"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("/static/fonts/plex-sans-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("/static/fonts/plex-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("/static/fonts/plex-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ink: #12161d;
  --text: #2b313b;          /* long reading text (articles, cases) */
  --muted: #4a5260;
  --faint: #6b7380;
  --accent: #0b6770;        /* petrol: actions, links, markers */
  --accent-hover: #08525a;
  --accent-soft: #e5eff0;
  --panel: #f2f4f6;
  --panel-2: #e7eaee;
  --line: #dce0e5;
  --field: #8b939f;         /* input borders: 3:1 on white */
  --paper: #fff;
  --dark: #14181e;
  --dark-2: #1c2129;
  --dark-line: #2c333d;
  --dark-text: #e8ecef;
  --dark-muted: #aeb7c2;
  --accent-on-dark: #7cc7cd;
  --error: #b42318;

  --font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --container: 1200px;
  --gutter: 32px;
  --gap: 48px;              /* gap of both splits */
  --section: 76px;
  --header-h: 72px;
  --radius: 8px;
  --radius-sm: 4px;
  --measure: 700px;         /* reading column */
  --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.4 6.4 11.6 13 4.6' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
@media (max-width: 1100px) { :root { --gutter: 26px; } }
@media (max-width: 860px) { :root { --gap: 28px; --section: 60px; --header-h: 66px; } }
@media (max-width: 600px) { :root { --gutter: 20px; --section: 52px; --header-h: 64px; } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 24px); }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  /* the footer sits at the bottom of the window on short pages (404) */
  display: flex; flex-direction: column; min-height: 100vh;
}
main { flex: 1 0 auto; }
body.menu-open { overflow: hidden; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { color: var(--accent-hover); }
h1, h2, h3, h4 { margin: 0; color: var(--ink); font-weight: 500; }
p, figure, blockquote, dl, dd { margin: 0; }
p + p { margin-top: 16px; }
ul, ol { margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: 2px; }
.band :focus-visible, .proof :focus-visible, .cta-inline :focus-visible { outline-color: var(--accent-on-dark); }
::selection { background: var(--accent-soft); color: var(--ink); }
[hidden] { display: none !important; }
.sr-only, .hp-field { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 1000; padding: 12px 20px; background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-sm); transform: translateY(-200%); }
.skip-link:focus { transform: none; }
.arrow { font-family: Arial, sans-serif; }   /* the arrow is not in the Plex subsets: one glyph everywhere */

/* ---------- type ---------- */
.nobr { white-space: nowrap; }
.display, .h1, .h2, .h3 { font-weight: 500; color: var(--ink); text-wrap: balance; }
.display { font-size: 60px; line-height: 1.05; letter-spacing: -0.025em; }
.h1 { font-size: 46px; line-height: 1.1; letter-spacing: -0.022em; }
.h2 { font-size: 34px; line-height: 1.18; letter-spacing: -0.015em; }
.h3 { font-size: 23px; line-height: 1.3; letter-spacing: -0.025em; }
.lead { font-size: 18px; line-height: 1.65; color: var(--muted); }
.lead p + p { margin-top: 14px; }
/* a quiet label above a heading: client of a case, topic of an article */
.eyebrow { font-size: 15px; line-height: 1.5; color: var(--muted); }
.label-accent { font-size: 15px; line-height: 1.5; color: var(--accent); }
.case-title, .svc-title, .post-title, .step-title, .feature h3, .faq summary, .t-what, .prose h2, .prose h3, .callout .k, .case-takeaway .k { text-wrap: balance; }
/* paragraphs avoid a lone last word where the browser can */
.lead, .hero-detail, .prose p, .feature p, .case-summary, .case-result-label, .case-kpi .k, .cred-label, .svc-text, .post-desc, .step-text, .faq .answer p, .t-desc, .csb-item p { text-wrap: pretty; }

/* ---------- layout ---------- */
.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.section-head { margin-bottom: 36px; }
.section-head .lead { max-width: 590px; }
.section-head > .h2 + .lead { margin-top: 16px; }
/* Both splits sit on one grid of thirds with the same gap, so their lines meet across blocks:
   1/3 + 2/3, the title column and the content column (lead, FAQ, reading text), x=536 at 1440 */
.section-head.split, .split-13 { display: grid; grid-template-columns: minmax(0, calc((100% - 2 * var(--gap)) / 3)) minmax(0, 1fr); column-gap: var(--gap); align-items: start; }
.section-head.split > .h2 + .lead { margin-top: 0; }
/* 2/3 + 1/3: main copy and an aside (hero portrait, case result, service terms), x=952 at 1440 */
.split-21 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, calc((100% - 2 * var(--gap)) / 3)); column-gap: var(--gap); align-items: start; }
.section-more { margin-top: 18px; }

/* ---------- buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 12px 22px; border: 1px solid transparent; border-radius: var(--radius-sm);
  font-size: 15px; font-weight: 500; line-height: 1.35; text-align: center; text-decoration: none;
  transition: background-color .15s, color .15s, border-color .15s;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); color: #fff; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--panel); color: var(--ink); }
.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { background: var(--panel-2); color: var(--ink); }
.btn-sm { min-height: 44px; padding: 10px 17px; font-size: 14px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .65; cursor: progress; }
/* one underline under the text and the arrow, as in the mockup; the padding makes a 44px target */
.link-arrow { display: inline-block; padding-block: 10px; color: var(--accent); font-size: 16px; font-weight: 500; line-height: 1.5; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.link-arrow:hover { color: var(--accent-hover); }
.tag { display: inline-block; padding: 3px 8px; border-radius: 3px; background: var(--panel); color: var(--muted); font-size: 13px; line-height: 1.5; white-space: nowrap; }
a.tag { text-decoration: none; transition: background-color .15s, color .15s; }
a.tag:hover { background: var(--panel-2); color: var(--accent); }

/* ---------- lists with marks ---------- */
.check-list, .cross-list, .dot-list { list-style: none; display: grid; gap: 14px; }
.check-list li { position: relative; padding-left: 26px; }
.check-list li::before {
  content: ""; position: absolute; left: 0; top: 0.3em; top: calc(0.5lh - 8px); width: 16px; height: 16px;
  background: var(--accent); -webkit-mask: var(--check) center / contain no-repeat; mask: var(--check) center / contain no-repeat;
}
.dot-list li, .cross-list li { position: relative; padding-left: 20px; }
.dot-list li::before, .cross-list li::before { content: ""; position: absolute; left: 1px; top: calc(0.5lh - 3px); width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.cross-list li::before { background: var(--faint); }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 100; background: var(--paper); border-bottom: 1px solid transparent; transition: border-color .2s; }
.site-header.is-scrolled { border-bottom-color: var(--line); }
.header-inner { display: flex; align-items: center; gap: 32px; min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: 11px; flex-shrink: 0; min-width: 0; color: var(--ink); text-decoration: none; }
.brand:hover { color: var(--ink); }
.brand-mark { width: 38px; height: 38px; flex: none; border-radius: 50%; object-fit: cover; object-position: 50% 23%; background: var(--panel); }
.brand-text { display: grid; min-width: 0; }
.brand-name { font-size: 15px; font-weight: 600; line-height: 1.4; white-space: nowrap; }
.brand-role { font-size: 12px; line-height: 1.5; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.main-nav { margin-left: auto; }
.nav-list { display: flex; align-items: center; gap: 25px; list-style: none; }
.nav-item { position: relative; }
.nav-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: var(--ink); font-size: 14px; line-height: 1.4; text-decoration: none; white-space: nowrap; }
.nav-link:hover, .nav-trigger[aria-expanded="true"] { color: var(--accent); }
/* current section: accent text with a 2px accent rule at the bottom of the link box */
.nav-link[aria-current="page"], .nav-trigger.is-current { color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }
.chev { margin-left: 6px; transition: transform .15s; }
.nav-trigger[aria-expanded="true"] .chev { transform: rotate(180deg); }
.nav-menu { position: absolute; top: calc(100% + 14px); left: -24px; width: 400px; padding: 12px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 18px 50px rgba(18, 22, 29, .09); }
.nav-menu ul { list-style: none; }
.nav-menu a { display: grid; gap: 3px; padding: 12px 14px; border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; }
.nav-menu a:hover, .nav-menu a[aria-current="page"] { background: var(--panel); color: var(--ink); }
.nav-menu a[aria-current="page"] .menu-title { color: var(--accent); }
.menu-title { font-size: 15px; font-weight: 500; line-height: 1.4; }
.menu-desc { font-size: 13px; line-height: 1.45; color: var(--muted); }
.header-actions { display: flex; align-items: center; gap: 12px; }
.lang-switch { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--muted); font-size: 13px; font-weight: 500; text-decoration: none; }
.lang-switch:hover { color: var(--ink); border-color: var(--ink); }
.menu-toggle { display: none; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); }
.menu-icon { position: relative; display: block; width: 22px; height: 8px; }
.menu-icon span { position: absolute; left: 0; right: 0; height: 1.5px; background: var(--ink); transition: transform .2s, top .2s; }
.menu-icon span:first-child { top: 0; }
.menu-icon span:last-child { top: 6.5px; }
.menu-toggle[aria-expanded="true"] .menu-icon span { top: 3.25px; }
.menu-toggle[aria-expanded="true"] .menu-icon span:first-child { transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-icon span:last-child { transform: rotate(-45deg); }
.mobile-menu { position: fixed; inset: var(--header-h) 0 0; overflow-y: auto; overscroll-behavior: contain; background: var(--paper); border-top: 1px solid var(--line); padding: 20px 0 48px; }
.mobile-label { font-size: 14px; color: var(--muted); margin-bottom: 4px; }
.mobile-services, .mobile-nav { list-style: none; }
.mobile-services a, .mobile-nav a { display: block; padding: 11px 0; color: var(--ink); text-decoration: none; }
.mobile-services a { font-size: 17px; }
.mobile-nav { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.mobile-nav a { font-size: 20px; font-weight: 500; letter-spacing: -0.01em; }
.mobile-services a[aria-current="page"], .mobile-nav a[aria-current="page"] { color: var(--accent); }
.mobile-contacts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; }

/* ---------- breadcrumbs ---------- */
.crumbs { padding-top: 28px; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--line); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent); text-decoration: underline; }
.crumbs [aria-current] { color: var(--ink); }

/* ---------- home hero ---------- */
.hero { padding-top: 48px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, calc((100% - 2 * var(--gap)) / 3)); column-gap: var(--gap); row-gap: 20px; align-items: start; }
.hero-copy { grid-column: 1; grid-row: 1; }
.hero-intro { margin-top: 24px; max-width: 620px; font-size: 21px; line-height: 1.5; color: var(--ink); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.hero-note { margin-top: 15px; font-size: 15px; line-height: 1.55; color: var(--ink); }
.hero-portrait { grid-column: 2; grid-row: 1 / span 2; width: 100%; max-width: 384px; margin: 8px 0 0 auto; }
.hero-portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 0; border-radius: var(--radius); background: var(--panel); }
.hero-portrait figcaption { margin-top: 14px; font-size: 15px; line-height: 1.5; }
.hero-portrait strong, .hero-portrait figcaption span { display: block; }
.hero-portrait strong { font-weight: 500; }
.hero-portrait figcaption span { margin-top: 3px; color: var(--muted); text-wrap: balance; }
.hero-detail { grid-column: 1; grid-row: 2; max-width: 690px; font-size: 18px; line-height: 1.6; color: var(--muted); }

/* ---------- proof band (home): clients and four figures on dark ---------- */
.proof { margin-top: 48px; padding-block: 42px 46px; background: var(--dark); color: var(--dark-text); }
/* three columns of the grid of thirds: the top figure sits on the aside line */
.proof-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 35px var(--gap); }
.clients { grid-column: 1 / span 2; grid-row: 1; display: grid; align-content: start; gap: 13px; }
.clients-label { font-size: 17px; color: var(--dark-muted); }
.clients-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 9px 24px; }
.client { font-size: 17px; font-weight: 500; line-height: 1.45; color: #fff; }
.cred { min-width: 0; }
.cred.is-featured { grid-column: 3; grid-row: 1; }
.cred-value { font-size: 33px; font-weight: 400; line-height: 1.15; letter-spacing: -0.02em; color: #fff; }
.cred.is-featured .cred-value { font-size: 54px; line-height: 1; letter-spacing: -0.035em; }
.cred-label { margin-top: 12px; max-width: 340px; font-size: 14px; line-height: 1.55; color: var(--dark-muted); }

/* ---------- services (rows) ---------- */
.svc-list { list-style: none; }
.svc-row + .svc-row { border-top: 1px solid var(--line); }
.svc-link { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; padding-block: 29px; color: inherit; text-decoration: none; }
.svc-link:hover { color: inherit; }
.svc-title { max-width: 380px; font-size: 24px; font-weight: 500; line-height: 1.3; letter-spacing: -0.02em; color: var(--ink); transition: color .15s; }
.svc-link:hover .svc-title, .svc-link:focus-visible .svc-title { color: var(--accent); }
.svc-body { display: block; }
.svc-text { display: block; font-size: 18px; line-height: 1.6; color: var(--muted); }
.svc-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.svc-more { display: inline-block; margin-top: 14px; font-size: 15px; color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.svc-link:hover .svc-more, .svc-link:focus-visible .svc-more { text-decoration: none; }
.svc-secondary { margin-top: 24px; font-size: 15px; color: var(--muted); }

/* ---------- case rows: the story on the left, the result on the aside line ---------- */
.case-grid { display: grid; }
.case-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, calc((100% - 2 * var(--gap)) / 3)); column-gap: var(--gap); padding-block: 32px; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; min-width: 0; }
.case-card:first-child { padding-top: 8px; }
.case-card:hover { color: inherit; }
.case-meta { grid-column: 1; grid-row: 1; display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.case-status { color: var(--ink); }
.case-body { grid-column: 1; grid-row: 2; }
.case-title { max-width: 690px; margin-top: 13px; font-size: 24px; font-weight: 500; line-height: 1.3; letter-spacing: -0.03em; color: var(--ink); }
.case-card:hover .case-title { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.case-summary { max-width: 690px; margin-top: 14px; font-size: 17px; line-height: 1.65; color: var(--muted); }
.case-result { grid-column: 2; grid-row: 1 / span 2; align-self: start; display: grid; gap: 10px; }
.case-result-value::first-letter, .case-kpi .v::first-letter { text-transform: uppercase; }
.case-result-value { font-size: 34px; font-weight: 400; line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
.case-result-label { max-width: 430px; font-size: 15px; line-height: 1.5; color: var(--muted); }
.read { display: inline-flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 15px; font-weight: 500; color: var(--accent); }
.read .arrow { transition: transform .15s; }
.case-card:hover .read .arrow { transform: translateX(3px); }

/* ---------- features: title and text, no tiles ---------- */
.feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 64px; }
.feature h3 { font-size: 23px; line-height: 1.3; letter-spacing: -0.025em; }
.feature p { margin-top: 14px; font-size: 17px; line-height: 1.65; color: var(--muted); }
.feature p a { color: var(--accent); }

/* ---------- steps: home pricing and service formats in a grey panel, process on a rule ---------- */
.steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.steps.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.steps.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.step { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 28px 22px; }
.step + .step { border-left: 1px solid var(--line); }
.step-num { margin-bottom: 18px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.step-title { font-size: 23px; font-weight: 500; line-height: 1.3; letter-spacing: -0.025em; color: var(--ink); }
.step-text { flex: 1; margin-top: 16px; font-size: 16px; line-height: 1.65; color: var(--muted); }
.step-budget { display: grid; align-content: start; gap: 7px; margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.4; color: var(--muted); }
.step-budget strong { font-size: 25px; font-weight: 500; line-height: 1.25; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
.step-term { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-top: 12px; font-size: 13px; line-height: 1.4; color: var(--muted); }
.step-term strong { font-size: 15px; font-weight: 400; color: var(--ink); }
.steps-panel { padding: 0 8px; background: var(--panel); border-radius: var(--radius); }
/* the main format: an accent rule along the top of its column */
.steps-panel .step.is-main { box-shadow: inset 0 3px 0 var(--accent); }
.steps-line { border-top: 1px solid var(--line); }
.steps-line .step:first-child { padding-left: 0; }
.steps-line .step:last-child { padding-right: 0; }
/* number, title, text, budget and term are rows shared across a row of steps, so the texts, the
   budget rules and the terms line up whatever wraps (rows-N = the step's parts) */
@supports (grid-template-rows: subgrid) {
  .steps .step { display: grid; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
  .steps.rows-3 .step { grid-row: span 3; }
  .steps.rows-4 .step { grid-row: span 4; }
  .steps.rows-5 .step { grid-row: span 5; }
  .step-text { flex: none; }
}
.price-note { max-width: 880px; margin-top: 24px; font-size: 14px; line-height: 1.65; color: var(--muted); }
.price-note strong { color: var(--ink); font-weight: 500; }

/* ---------- about block (home) ---------- */
.about-grid { display: grid; grid-template-columns: minmax(0, calc((100% - 2 * var(--gap)) / 3)) minmax(0, 1fr); column-gap: var(--gap); align-items: center; }
.about-photo img { width: 100%; max-width: 300px; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 0; border-radius: var(--radius); background: var(--panel); }
.about-copy .lead { margin-top: 16px; }
.about-copy .section-more { margin-top: 28px; }

/* ---------- fit: two columns on a rule ---------- */
.fit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.fit-col { padding-top: 28px; border-top: 1px solid var(--line); }
.fit-col .h3 { margin-bottom: 20px; }
.fit-col li { font-size: 16px; line-height: 1.6; color: var(--muted); }
.fit-col > p { margin-bottom: 18px; font-size: 16px; color: var(--muted); }

/* ---------- article rows ---------- */
.post-list { list-style: none; }
.post-item + .post-item { border-top: 1px solid var(--line); }
.post-item a { display: grid; grid-template-columns: 160px minmax(0, 1fr); column-gap: 40px; padding: 24px 0; color: inherit; text-decoration: none; }
.post-item a:hover { color: inherit; }
.post-topic { grid-column: 1; grid-row: 1 / span 2; font-size: 15px; line-height: 1.6; color: var(--accent); }
.post-title { grid-column: 2; grid-row: 1; font-size: 24px; font-weight: 500; line-height: 1.35; letter-spacing: -0.02em; color: var(--ink); }
.post-desc { grid-column: 2; grid-row: 2; margin-top: 9px; font-size: 17px; line-height: 1.6; color: var(--muted); }
.post-side { grid-column: 1; grid-row: 1 / span 2; display: grid; align-content: start; gap: 4px; }
.post-side .post-topic { grid-row: auto; }
.post-meta { font-size: 14px; line-height: 1.5; color: var(--muted); }
.post-item a:hover .post-title { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }

/* ---------- FAQ ---------- */
.faq-grid { display: grid; grid-template-columns: minmax(0, calc((100% - 2 * var(--gap)) / 3)) minmax(0, 1fr); column-gap: var(--gap); }
.faq-grid > .h2 { align-self: start; position: sticky; top: calc(var(--header-h) + 40px); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { position: relative; padding: 22px 40px 22px 0; font-size: 17px; font-weight: 500; line-height: 1.5; list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 2px; top: 17px; font-size: 24px; font-weight: 400; line-height: 1.3; color: var(--accent); }
.faq details[open] summary::after { content: "\2212"; }
.faq summary:hover { color: var(--accent); }
.faq .answer { padding: 0 28px 23px 0; font-size: 16px; line-height: 1.7; color: var(--muted); }
.faq .answer p + p { margin-top: 12px; }

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
.contact-intro .lead { margin-top: 22px; font-size: 19px; }
.contact-promises { max-width: 460px; margin-top: 30px; font-size: 16px; color: var(--muted); }
.contact-person { display: flex; align-items: center; gap: 15px; margin-top: 32px; }
.contact-person img { width: 54px; height: 54px; flex: none; border-radius: 50%; object-fit: cover; background: var(--panel); }
.contact-person-name { font-size: 15px; font-weight: 500; }
.contact-person-links { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; font-size: 15px; }
.contact-person-links span { color: var(--faint); }
.contact-form-wrap { padding: 32px; background: var(--panel); border-radius: var(--radius); }
.contact-form { display: grid; gap: 19px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 8px; min-width: 0; }
.field label { font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--ink); }
.opt { margin-left: 8px; font-size: 12px; font-weight: 400; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; min-width: 0; min-height: 48px; padding: 12px 13px; border: 1px solid var(--field); border-radius: var(--radius-sm);
  background: var(--paper); color: var(--ink); font-size: 16px; line-height: 1.4; transition: border-color .15s, box-shadow .15s;
}
.field textarea { min-height: 132px; max-height: 28rem; resize: vertical; field-sizing: content; }
/* Keep the complete example readable in browsers without intrinsic textarea sizing. */
@supports not (field-sizing: content) {
  .field textarea { min-height: 220px; }
  @media (max-width: 380px) { .field textarea { min-height: 320px; } }
}
.field select { appearance: none; -webkit-appearance: none; padding-right: 40px; background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5 6 8l4-3.5' fill='none' stroke='%2312161d' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 15px center; }
.field input[type="file"] { min-height: 0; padding: 10px; font-size: 14px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(11, 103, 112, .18); }
.field [aria-invalid="true"], .field [aria-invalid="true"]:focus { border-color: var(--error); box-shadow: 0 0 0 3px rgba(180, 35, 24, .14); }
::placeholder { color: var(--faint); opacity: 1; }
.field-more summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--accent); font-size: 15px; list-style: none; cursor: pointer; }
.field-more summary::-webkit-details-marker { display: none; }
.field-more summary::before { content: "+"; display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid currentColor; border-radius: 50%; font-size: 15px; line-height: 1; }
.field-more[open] summary::before { content: "\2212"; }
.field-more[open] summary { margin-bottom: 12px; }
.field-more .field + .field { margin-top: 18px; }
.hint { font-size: 13px; line-height: 1.5; color: var(--muted); }
.form-status:empty { display: none; }
.form-status { padding: 12px 14px; border-radius: var(--radius-sm); background: var(--paper); font-size: 15px; }
.form-status.is-error { background: #fdecea; color: #8a1c1c; }
.form-legal { font-size: 13px; line-height: 1.55; color: var(--muted); }
.form-legal a { color: inherit; }
.form-success { padding: 8px 0; }
.form-success:focus { outline: none; }
.form-success .label-accent { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; color: var(--accent); font-weight: 500; }
.form-success .label-accent::before { content: ""; width: 18px; height: 18px; background: var(--accent); -webkit-mask: var(--check) center / contain no-repeat; mask: var(--check) center / contain no-repeat; }
.form-success .h3 { margin-bottom: 12px; }
.form-success p { color: var(--muted); }
.form-success p + p { margin-top: 14px; }

/* ---------- inner page heads ---------- */
.page-head { padding: 24px 0 56px; }
.page-head .lead { margin-top: 20px; max-width: 720px; font-size: 20px; line-height: 1.55; }
.page-head-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.page-head-note { margin-top: 15px; font-size: 15px; line-height: 1.55; color: var(--ink); }
/* catalogs: a large title on the left, the lead on the content line, as the home section heads */
.head-split .lead { margin-top: 8px; max-width: 640px; }
.head-split .filters { margin-top: 26px; }

/* service hero: copy and the terms panel on the aside line */
.svc-hero .h1 { max-width: 760px; }
.svc-passport { padding: 24px 24px 8px; background: var(--panel); border-radius: var(--radius); }
.svc-passport-person { display: flex; align-items: center; gap: 13px; padding-bottom: 18px; }
.svc-passport-person img { width: 48px; height: 48px; flex: none; border-radius: 50%; object-fit: cover; object-position: 50% 23%; background: var(--panel-2); }
.svc-passport .name { font-size: 15px; font-weight: 500; line-height: 1.4; }
.svc-passport .role { margin-top: 2px; font-size: 13px; line-height: 1.45; color: var(--muted); }
.svc-fact { padding: 14px 0 16px; border-top: 1px solid var(--line); }
.svc-fact dt { font-size: 13px; line-height: 1.4; color: var(--muted); }
.svc-fact dd { margin-top: 5px; font-size: 15px; line-height: 1.45; color: var(--ink); }
.svc-fact dd.is-figure { font-size: 25px; font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; }
.svc-fact dd.svc-fact-note { margin-top: 4px; font-size: 14px; color: var(--muted); }

/* ---------- dark band ---------- */
.band { background: var(--dark); color: var(--dark-text); }
.band .h2, .band .h3, .band h3 { color: #fff; }
.band .lead, .band p { color: var(--dark-muted); }
.band a:not(.btn) { color: #fff; }
.band .check-list li { color: var(--dark-text); }
.band .check-list li::before { background: var(--accent-on-dark); }
.band-split .lead { margin-top: 16px; max-width: 340px; }
.band-split .check-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px var(--gap); font-size: 17px; line-height: 1.6; }
.band .fit-col { border-top-color: var(--dark-line); }
.band .case-card { border-bottom-color: var(--dark-line); }
.band :is(.case-title, .case-result-value) { color: #fff; }
.band :is(.case-meta, .case-result-label) { color: var(--dark-muted); }
.band .case-status { color: var(--dark-text); }
.band .read, .band a.link-arrow, .band .case-card:hover .case-title { color: var(--accent-on-dark); }
.band .fit-col li { color: var(--dark-text); }
.band .fit-col > p { color: var(--dark-muted); }

/* ---------- case page ---------- */
.case-head { padding: 24px 0 0; }
.case-head .case-meta { margin-bottom: 14px; }
.case-head .lead { margin-top: 20px; max-width: 720px; font-size: 20px; line-height: 1.55; }
/* the result, as on the case card: a large figure on the aside line, its label under it */
.case-kpi { padding-top: 6px; }
.case-kpi .v { display: block; font-size: 44px; font-weight: 400; line-height: 1.1; letter-spacing: -0.025em; color: var(--ink); text-wrap: balance; }
.case-kpi .v.is-words { font-size: 36px; line-height: 1.15; letter-spacing: -0.02em; }
.case-kpi .k { display: block; margin-top: 12px; max-width: 360px; font-size: 16px; line-height: 1.5; color: var(--muted); }
.case-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px var(--gap); margin-top: 44px; border-top: 1px solid var(--line); }
.case-facts.facts-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.case-facts.facts-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.case-facts.facts-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.case-fact { padding: 18px 0 0; min-width: 0; }
.case-fact dt { font-size: 13px; line-height: 1.4; color: var(--muted); }
.case-fact dd { margin-top: 6px; font-size: 16px; font-weight: 500; line-height: 1.45; color: var(--ink); overflow-wrap: break-word; }
/* problem, work and result on the dark band */
.case-band { margin-top: 56px; padding-block: 48px 52px; }
.csb-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px var(--gap); }
.csb-item .k { display: block; margin-bottom: 12px; font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--dark-muted); }
.csb-item p { font-size: 17px; line-height: 1.6; color: var(--dark-text); }
.csb-item.result .k { color: var(--accent-on-dark); }
.csb-item.result p { color: #fff; }
.case-diagram { margin-top: 56px; padding: 32px; background: var(--panel); border-radius: var(--radius); }
.case-diagram svg { width: 100%; height: auto; }
.case-diagram figcaption { margin-top: 18px; max-width: 760px; font-size: 14px; line-height: 1.55; color: var(--muted); }
.diagram-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.diagram-scroll svg { max-width: 960px; margin-inline: auto; }
.diagram-hint { display: none; }
.case-takeaway { max-width: var(--measure); margin-top: 48px; padding: 28px 32px; background: var(--panel); border-radius: var(--radius); }
.case-takeaway .k { display: block; margin-bottom: 14px; font-size: 20px; font-weight: 500; line-height: 1.35; color: var(--ink); }
.case-takeaway li { font-size: 16px; line-height: 1.6; color: var(--text); }
.takeaway-list ul { list-style: none; display: grid; gap: 10px; }
.takeaway-list li { position: relative; padding-left: 20px; }
.takeaway-list li::before { content: ""; position: absolute; left: 1px; top: calc(0.5lh - 3px); width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.related { padding-top: 0; }
.related .section-head { padding-top: 48px; border-top: 1px solid var(--line); }
.meta-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 28px; }
.meta-label { margin-right: 4px; font-size: 14px; color: var(--muted); }

/* ---------- reading pages: articles, cases, how-i-work, privacy ---------- */
.article-head { padding: 24px 0 48px; }
.article-head .h1 { overflow-wrap: anywhere; }
.article-head .lead { margin-top: 20px; max-width: var(--measure); font-size: 20px; line-height: 1.55; }
.article-side { padding-top: 10px; }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 26px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.article-meta > * { white-space: nowrap; }
.article-meta img { width: 32px; height: 32px; margin-right: -10px; border-radius: 50%; object-fit: cover; object-position: 50% 23%; background: var(--panel); }
.article-meta .who { color: var(--ink); font-weight: 500; }
.article-layout { position: relative; display: grid; grid-template-columns: minmax(0, calc((100% - 2 * var(--gap)) / 3)) minmax(0, 1fr); column-gap: var(--gap); padding-top: 48px; padding-bottom: var(--section); }
/* the rule between the head and the text spans the content edges, not the gutters; none right
   under the dark summary band of a case, which already ends the head */
.article-layout::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); border-top: 1px solid var(--line); }
.case-band + .article-layout::before { content: none; }
.case-page .article-layout { margin-top: 0; padding-top: 56px; }
.article-layout > :last-child { grid-column: 2; min-width: 0; }
.toc { position: sticky; top: calc(var(--header-h) + 32px); align-self: start; max-height: calc(100vh - var(--header-h) - 64px); overflow-y: auto; overscroll-behavior: contain; padding-right: 24px; }
.toc p { margin-bottom: 12px; font-size: 13px; font-weight: 500; color: var(--muted); }
.toc ol { list-style: none; display: grid; gap: 2px; border-left: 1px solid var(--line); }
.toc a { display: block; margin-left: -1px; padding: 6px 0 6px 16px; border-left: 2px solid transparent; font-size: 14px; line-height: 1.45; color: var(--muted); text-decoration: none; transition: color .15s, border-color .15s; }
.toc a:hover { color: var(--ink); border-left-color: var(--line); }
.toc a[aria-current="true"] { color: var(--ink); border-left-color: var(--accent); }
.toc a:focus-visible { outline-offset: -3px; }

/* prose */
.prose { max-width: var(--measure); font-size: 18px; line-height: 1.7; color: var(--text); }
.prose > * + * { margin-top: 20px; }
.prose p + p { margin-top: 20px; }
.prose h2 { margin-top: 56px; font-size: 30px; font-weight: 500; line-height: 1.22; letter-spacing: -0.015em; color: var(--ink); }
.prose h3 { margin-top: 36px; font-size: 22px; font-weight: 500; line-height: 1.35; letter-spacing: -0.01em; color: var(--ink); }
.prose h2, .prose h3 { overflow-wrap: anywhere; }
.prose h2 + *, .prose h3 + * { margin-top: 14px; }
.prose > :first-child { margin-top: 0; }
/* Legacy fragment aliases have no visible content and must not add a heading gap. */
.prose > :nth-child(1 of :not(.heading-anchor)) { margin-top: 0; }
.prose strong { font-weight: 600; color: var(--ink); }
.prose a:not(.btn) { color: var(--accent); }
.prose a:not(.btn):hover { color: var(--accent-hover); }
.prose .btn { text-decoration: none; }
.prose ul, .prose ol { display: grid; gap: 10px; padding-left: 24px; }
.prose li::marker { color: var(--accent); }
.prose ol > li::marker { font-weight: 500; }
.prose li > ul, .prose li > ol { margin-top: 10px; }
.prose blockquote { padding: 4px 0 4px 22px; border-left: 3px solid var(--accent); font-size: 20px; line-height: 1.55; color: var(--ink); }
.prose blockquote p + p { margin-top: 10px; }
.prose code { padding: 1px 5px; border-radius: 3px; background: var(--panel); font-family: var(--mono); font-size: 15px; }
.prose hr { margin: 44px 0; border: 0; border-top: 1px solid var(--line); }
/* a run-in stage name ("1. Созвон, 30-40 минут, без оплаты.") reads as a small heading */
.page-page .prose p > strong:first-child { display: block; margin-bottom: 6px; font-size: 20px; font-weight: 500; line-height: 1.4; }
.prose-legal { font-size: 17px; }
.prose-legal h2 { margin-top: 44px; font-size: 22px; line-height: 1.35; }
.prose .privacy-actions { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--line); }
@media (min-width: 861px) {
  .prose-legal ul:has(> li:nth-child(10)) { display: block; columns: 2 14rem; column-gap: 48px; }
  .prose-legal ul:has(> li:nth-child(10)) > li { break-inside: avoid; }
  .prose-legal ul:has(> li:nth-child(10)) > li + li { margin-top: 10px; }
}

/* tables */
.table-wrap { margin: 28px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.md-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.md-table th, .md-table td { padding: 12px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.md-table th { background: var(--panel); font-size: 13px; font-weight: 500; color: var(--muted); }
.md-table td:first-child { font-weight: 500; color: var(--ink); }
.md-table tr:last-child td { border-bottom: 0; }
@media (min-width: 861px) { .md-table { min-width: 0; } }
.table-wrap.fade-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
.table-wrap.fade-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px); mask-image: linear-gradient(90deg, transparent, #000 48px); }
.table-wrap.fade-l.fade-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent); }
.table-scroll { display: none; }

/* callouts */
.callout { padding: 28px 32px; background: var(--panel); border-radius: var(--radius); }
.callout .k { display: block; font-size: 20px; font-weight: 500; line-height: 1.35; color: var(--ink); }
.callout p { color: var(--muted); }
/* cases page note: the title in the 1/3 column, the text on the content line */
.callout.note { display: grid; grid-template-columns: minmax(0, calc((100% - 2 * var(--gap)) / 3)) minmax(0, 1fr); column-gap: var(--gap); margin-top: 48px; padding: 32px 0; }
.callout.note .k { padding-left: 32px; }
.callout.note > :not(.k) { max-width: 640px; padding-right: 32px; font-size: 17px; }

/* inline CTA and author */
.cta-inline { display: grid; gap: 14px; justify-items: start; max-width: var(--measure); margin-top: 48px; padding: 32px; background: var(--dark); border-radius: var(--radius); color: var(--dark-text); }
.cta-inline .h3 { color: #fff; }
.cta-inline p { color: var(--dark-muted); }
.cta-inline .btn { margin-top: 6px; }
.author-box { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 18px; max-width: var(--measure); margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line); }
.author-box img { grid-row: 1 / span 3; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: 50% 23%; background: var(--panel); }
.author-box > :not(img) { grid-column: 2; }
.author-box .name { font-size: 16px; font-weight: 500; }
.author-box .bio { margin-top: 4px; font-size: 15px; line-height: 1.6; color: var(--muted); }
.author-box .links { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 10px; font-size: 15px; }
.author-box + .cta-inline { margin-top: 28px; }

/* ---------- catalogs ---------- */
.legacy-anchor { display: block; height: 0; }
.insights-list { padding-top: 0; }
.insights-list .post-list { border-top: 1px solid var(--line); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filter { display: inline-flex; align-items: center; min-height: 40px; max-width: 100%; padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); font-size: 14px; text-decoration: none; white-space: normal; transition: border-color .15s, color .15s; }
.filter:hover { border-color: var(--ink); color: var(--ink); }
.filter .n { flex: none; margin-left: 8px; color: var(--muted); }
.filter.is-current { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.filter.is-current .n { color: inherit; }

/* Catalogs stay finite; their pages are ordinary links, including without JS. */
.catalog-summary { margin-bottom: 24px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.catalog-summary strong { color: var(--ink); font-weight: 500; }
.catalog-results > .container > .catalog-summary { margin-bottom: 0; }
.catalog-results .cases-group { padding-block: 32px 48px; }
.catalog-end { padding-bottom: var(--section); }
.catalog-end .callout.note { margin-top: 40px; }
.pagination { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 28px; border-top: 1px solid var(--line); }
.post-list + .pagination { margin-top: 32px; }
.pagination-status { flex-shrink: 0; font-size: 14px; color: var(--muted); }
.pagination-status strong { color: var(--ink); font-weight: 500; }
.pagination-controls { display: flex; align-items: center; gap: 20px; }
.pagination-pages { list-style: none; display: flex; align-items: center; gap: 6px; padding: 0; margin: 0; }
.pagination-mobile { display: none; }
.pagination-number, .pagination-step { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); font-size: 14px; font-variant-numeric: tabular-nums; line-height: 1.4; text-decoration: none; }
.pagination-number:hover, .pagination-step[href]:hover { border-color: var(--accent); color: var(--accent); }
.pagination-number.is-current { color: #fff; background: var(--accent); border-color: var(--accent); font-weight: 500; }
.pagination-step.is-disabled { opacity: .45; }
.pagination-gap { display: inline-flex; min-width: 18px; align-items: center; justify-content: center; color: var(--muted); }
@media (max-width: 860px) {
  .pagination { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; justify-items: center; gap: 16px; }
  .pagination-controls { gap: 12px; }
}
@media (max-width: 768px) {
  .pagination-controls { display: grid; grid-template-columns: 1fr 1fr; width: 100%; gap: 16px 12px; }
  .pagination-desktop { display: none; }
  .pagination-mobile { display: flex; grid-column: 1 / -1; grid-row: 1; justify-content: center; }
  .pagination-step { grid-row: 2; }
}
@media (max-width: 600px) {
  .catalog-results .cases-group { padding-block: 28px 40px; }
  .catalog-summary { font-size: 13px; }
  .pagination { padding-top: 24px; }
  .pagination-number { padding-inline: 10px; }
}

/* ---------- about page ---------- */
.about-head .about-grid { align-items: start; }
.about-head .about-photo img { max-width: 340px; }
.about-head .lead { margin-top: 22px; font-size: 19px; }
.about-head .lead p:first-child { color: var(--ink); }
.cols-2 { display: grid; grid-template-columns: minmax(0, calc((100% - 2 * var(--gap)) / 3)) minmax(0, 1fr); column-gap: var(--gap); }
.cols-2 > .h2 { align-self: start; position: sticky; top: calc(var(--header-h) + 40px); }
.timeline { list-style: none; border-top: 1px solid var(--line); }
.timeline li { display: grid; grid-template-columns: 150px minmax(0, 1fr); column-gap: 32px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.t-when { grid-column: 1; grid-row: 1 / span 2; font-size: 15px; line-height: 1.5; color: var(--accent); padding-top: 3px; }
.t-what { grid-column: 2; font-size: 21px; font-weight: 500; line-height: 1.35; letter-spacing: -0.01em; color: var(--ink); }
.t-desc { grid-column: 2; margin-top: 8px; font-size: 16px; line-height: 1.65; color: var(--muted); }
.t-desc a { color: var(--accent); }

/* ---------- 404 ---------- */
.not-found { padding: 56px 0 var(--section); }
.not-found-code { font-size: 120px; font-weight: 500; line-height: 1; letter-spacing: -0.04em; color: var(--panel-2); }
.not-found .h1 { margin-top: 20px; }
.not-found .lead { margin-top: 18px; max-width: 620px; }
.not-found-links { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 32px; margin-top: 28px; }

/* ---------- footer ---------- */
.site-footer { margin-top: 32px; padding: 54px 0 24px; background: var(--panel); }
.footer-grid { display: grid; grid-template-columns: 1.2fr 1fr .85fr 1fr; gap: 36px; }
.footer-note, .footer-legal { max-width: 280px; margin-top: 17px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.footer-title { margin-bottom: 15px; font-size: 14px; font-weight: 500; }
.footer-col ul { list-style: none; display: grid; gap: 10px; font-size: 14px; line-height: 1.45; }
.footer-col a { color: var(--ink); text-decoration: none; }
.footer-col a:hover { color: var(--accent); text-decoration: underline; }
.footer-settings { appearance: none; border: 0; padding: 0; background: none; color: var(--ink); font: inherit; cursor: pointer; text-align: left; }
.footer-settings:hover, .footer-settings:focus-visible { color: var(--accent); text-decoration: underline; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin-top: 42px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }

/* ---------- optional analytics: a non-modal card with equally prominent choices ---------- */
body.cookie-open { padding-bottom: var(--cookie-space, 140px); }
html { scroll-padding-bottom: calc(var(--cookie-space, 0px) + 16px); }
.cookie-bar { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 120; width: 380px; max-width: calc(100vw - 32px); max-height: calc(100dvh - var(--header-h) - 48px); overflow: auto; padding: 12px 14px; background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 6px 22px rgba(18, 22, 29, .1); font-size: 13px; line-height: 1.45; }
.cookie-bar p { margin: 0; }
.cookie-bar a { color: var(--accent); text-underline-offset: 3px; white-space: nowrap; }
.cookie-bar .cookie-state { margin-top: 8px; font-size: 13px; }
.cookie-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.cookie-choice { appearance: none; min-height: 44px; padding: 9px 10px; border: 1px solid var(--accent); border-radius: var(--radius-sm); background: var(--paper); color: var(--accent); font: inherit; font-weight: 500; line-height: 1.25; cursor: pointer; }
.cookie-choice:hover { background: var(--accent-soft); }
.cookie-choice:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* EN needs an explicit choice: emphasize the notice without favoring either button. */
.cookie-bar--opt-in { width: 460px; padding: 16px 18px; border-color: #a3c3c6; border-top: 3px solid var(--accent); background: var(--accent-soft); box-shadow: 0 8px 28px rgba(18, 22, 29, .16); font-size: 14px; }
.cookie-title { margin: 0 0 4px; font-size: 16px; font-weight: 600; line-height: 1.25; }
.cookie-bar--opt-in .cookie-actions { margin-top: 12px; }
.menu-open .cookie-bar { visibility: hidden; pointer-events: none; }

/* ---------- sticky contact bar on phones ---------- */
.mobile-contact { display: none; }

/* ---------- diagrams (inline SVG in case studies) ---------- */
.dg { font-family: var(--font); }
.dg text { font-family: var(--font); font-size: 13px; fill: var(--text); }
.dg .tt { font-size: 14px; font-weight: 500; fill: var(--ink); }
.dg .tm { font-size: 11px; font-weight: 500; letter-spacing: .04em; fill: var(--muted); }
.dg .ts { font-size: 12px; fill: var(--muted); }
.dg .box { fill: var(--paper); stroke: var(--line); stroke-width: 1; }
.dg .box-accent { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.25; }
.dg .box-dark { fill: var(--dark); stroke: var(--dark); }
.dg .box-dark + text, .dg .on-dark { fill: var(--dark-text); }
.dg .on-dark-muted { fill: var(--dark-muted); }
.dg .ln { stroke: var(--ink); stroke-width: 1.25; fill: none; }
.dg .ln-muted { stroke: var(--faint); stroke-width: 1.25; fill: none; stroke-dasharray: 4 4; }
.dg .ln-accent { stroke: var(--accent); stroke-width: 1.5; fill: none; }
.dg .dot { fill: var(--accent); }
.dg .arrow { fill: var(--ink); }
.dg .arrow-muted { fill: var(--faint); }
.dg .arrow-accent { fill: var(--accent); }

/* =====================================================================
   up to 1100px: a narrower desktop
   ===================================================================== */
@media (max-width: 1100px) {
  .header-inner { gap: 20px; }
  .brand-role { display: none; }
  .nav-list { gap: 19px; }
  .display { font-size: 49px; }
  .h1 { font-size: 42px; }
  .hero-intro { font-size: 20px; }
  .hero-detail { font-size: 17px; }
  .proof-grid { gap: 30px 35px; }
  .client { font-size: 16px; }
  .step { padding-inline: 17px; }
  .step-title { font-size: 21px; }
  .step-budget strong { font-size: 22px; }
  .contact-grid { gap: 40px; }
  .contact-form-wrap { padding: 26px; }
  .case-kpi .v { font-size: 38px; }
  .case-kpi .v.is-words { font-size: 32px; }
  .case-facts.facts-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1.1fr 1fr .8fr 1fr; gap: 28px; }
}

/* =====================================================================
   up to 860px: tablets, the header menu becomes a panel
   ===================================================================== */
@media (max-width: 860px) {
  .main-nav, .header-cta { display: none; }
  .header-actions { margin-left: auto; gap: 10px; }
  .menu-toggle { display: grid; }
  .brand-role { display: block; font-size: 12px; }
  .display { font-size: 42px; }
  .h1 { font-size: 36px; }
  .h2 { font-size: 30px; }
  .section-head.split, .split-13, .split-21, .faq-grid, .cols-2, .article-layout { grid-template-columns: minmax(0, 1fr); row-gap: 18px; }
  .section-head .lead { max-width: 720px; }
  .faq-grid > .h2, .cols-2 > .h2 { position: static; }
  .faq-grid > .h2, .cols-2 > .h2 { margin-bottom: 8px; }

  .hero { padding-top: 35px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr) 240px; column-gap: 26px; }
  .hero-intro { font-size: 18px; }
  .hero-detail { font-size: 16px; }
  .hero-note { font-size: 14px; }
  .hero-actions .btn { padding-inline: 18px; font-size: 14px; }

  .proof-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
  .cred.is-featured .cred-value { font-size: 42px; }
  .cred-value { font-size: 29px; }
  .clients-list { gap: 8px 20px; }
  .client { font-size: 15px; }

  .svc-link { grid-template-columns: 1fr 1.2fr; gap: 28px; }
  .svc-text { font-size: 17px; }
  .case-card { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); column-gap: 30px; }
  .case-result-value { font-size: 30px; }
  .feature-grid { gap: 32px 40px; }

  .steps, .steps.cols-3 { grid-template-columns: 1fr 1fr; }
  .steps .step:nth-child(2n + 1) { border-left: 0; }
  .steps .step:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .steps-line .step { padding-inline: 0 22px; }
  .steps-line .step:nth-child(2n) { padding-inline: 22px 0; }

  .about-grid { grid-template-columns: 220px minmax(0, 1fr); column-gap: 35px; }
  .fit-grid { gap: 20px; }
  .post-item a { grid-template-columns: 120px minmax(0, 1fr); column-gap: 24px; }
  .contact-grid { grid-template-columns: 1fr; gap: 32px; }
  .contact-intro .lead, .contact-form-wrap { max-width: 680px; }
  .contact-promises { display: none; }
  .contact-person { margin-top: 22px; }

  .page-head { padding-bottom: 44px; }
  .page-head .lead, .case-head .lead, .article-head .lead { font-size: 18px; }
  .head-split .lead { margin-top: 0; }
  .svc-hero { row-gap: 32px; }
  .svc-passport { max-width: 560px; }
  .svc-facts { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
  .case-kpi { margin-top: 28px; padding: 4px 0 4px 20px; border-left: 2px solid var(--accent); }
  .case-facts, .case-facts.facts-3, .case-facts.facts-5 { grid-template-columns: 1fr 1fr; }
  .case-band { margin-top: 44px; }
  .csb-grid { grid-template-columns: 1fr; gap: 24px; }
  .band-split .check-list { grid-template-columns: 1fr; }
  .band-split .lead { max-width: 640px; }
  .case-diagram { margin-top: 44px; padding: 24px; }
  .diagram-scroll svg { min-width: 880px; }
  .diagram-scroll { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .diagram-hint { display: block; margin-top: 10px; font-size: 13px; color: var(--muted); }
  .toc { display: none; }
  .article-layout > :last-child { grid-column: 1; }
  .article-side { padding-top: 0; }
  .article-head .lead { margin-top: 16px; }
  .callout.note { grid-template-columns: 1fr; row-gap: 10px; padding: 26px; }
  .callout.note .k, .callout.note > :not(.k) { padding-inline: 0; }
  .about-head .about-photo img { max-width: 220px; }
  .timeline li { grid-template-columns: 120px minmax(0, 1fr); column-gap: 20px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .site-footer { padding-top: 44px; }
}

/* =====================================================================
   up to 600px: phones
   ===================================================================== */
@media (max-width: 600px) {
  body { font-size: 16px; }
  .header-inner { gap: 8px; }
  /* the role line is 10px as in the mockup; the brand may shrink so a longer line ends with an ellipsis */
  .brand { gap: 9px; flex-shrink: 1; }
  .brand-mark { width: 34px; height: 34px; }
  .brand-name { font-size: 14px; }
  .brand-role { font-size: 10px; }
  .header-actions { gap: 8px; }
  .display { font-size: 35px; line-height: 1.1; letter-spacing: -0.025em; text-wrap: pretty; }
  .h1 { font-size: 30px; line-height: 1.15; }
  .h2 { font-size: 28px; line-height: 1.2; }
  .h3 { font-size: 21px; }
  .lead { font-size: 17px; }
  .section-head { margin-bottom: 28px; }
  .section-head.split { row-gap: 14px; }

  /* home: evidence before the services, as in the mockup */
  .page-home main { display: flex; flex-direction: column; }
  .page-home .hero { order: 0; }
  .page-home .proof { order: 1; }
  .page-home #cases { order: 2; }
  .page-home #services { order: 3; }
  .page-home #approach { order: 4; }
  .page-home #pricing { order: 5; }
  .page-home #about { order: 6; }
  .page-home #fit { order: 7; }
  .page-home #insights { order: 8; }
  .page-home #faq { order: 9; }
  .page-home #contact { order: 10; }

  .hero { padding-top: 27px; }
  .hero-grid { grid-template-columns: 1fr; row-gap: 23px; }
  .hero-intro { margin-top: 20px; font-size: 18px; }
  .hero-actions { display: grid; grid-template-columns: 1.1fr 1fr; gap: 10px; margin-top: 22px; }
  .hero-actions .btn { min-height: 48px; padding-inline: 10px; font-size: 13px; white-space: nowrap; }
  .hero-note { font-size: 13px; line-height: 1.5; margin-top: 13px; }
  .hero-portrait { grid-column: 1; grid-row: 2; display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 20px; max-width: 100%; margin: 0; }
  .hero-portrait img { width: 96px; height: 120px; border-radius: 6px; }
  .hero-portrait figcaption { margin-top: 0; font-size: 14px; max-width: 220px; }
  .hero-detail { grid-row: 3; font-size: 16px; }

  .proof { margin-top: 34px; padding-block: 29px 34px; }
  .proof-grid { grid-template-columns: 1fr 1fr; gap: 28px 24px; }
  .clients { grid-column: 1 / -1; }
  .clients-label { font-size: 15px; }
  .clients-list { gap: 10px 20px; }
  .client { font-size: 15px; line-height: 1.5; }
  .cred.is-featured { grid-column: 1 / -1; grid-row: 2; }
  .cred.is-featured, .cred.is-wide { display: grid; grid-template-columns: 1fr 1.2fr; gap: 20px; align-items: start; }
  .cred.is-featured .cred-label, .cred.is-wide .cred-label { margin-top: 0; }
  .cred.is-wide { grid-column: 1 / -1; }
  .cred.is-featured .cred-value { font-size: 40px; }
  .cred-value { font-size: 28px; line-height: 1.2; }
  .cred-label { margin-top: 9px; font-size: 13px; }

  .svc-link { grid-template-columns: 1fr; gap: 13px; padding-block: 26px; }
  .svc-title { font-size: 22px; }
  .svc-text { font-size: 17px; }
  .tag { font-size: 12px; }
  .svc-secondary { font-size: 14px; line-height: 1.6; }

  .case-card { display: flex; flex-direction: column; padding-block: 28px; }
  .case-card:first-child { padding-top: 4px; }
  .case-meta { gap: 4px 18px; font-size: 13px; }
  .case-title { margin-top: 12px; font-size: 22px; }
  .case-summary { font-size: 16px; }
  .case-result { margin-top: 22px; gap: 8px; }
  .case-result-value { font-size: 28px; }
  .case-result-label { font-size: 14px; }
  .read { margin-top: 6px; }

  .feature-grid { grid-template-columns: 1fr; gap: 28px; }
  .feature h3 { font-size: 21px; }
  .feature p { margin-top: 10px; font-size: 16px; }

  .steps, .steps.cols-3, .steps.cols-2 { grid-template-columns: 1fr; }
  .steps .step, .steps .step + .step { padding: 26px 0; border-left: 0; border-top: 1px solid var(--line); }
  .steps .step:first-child { border-top: 0; }
  .steps-panel { padding: 0 22px; }
  .steps-line .step:first-child { border-top: 0; }
  .step-num { margin-bottom: 12px; }
  .step-title { font-size: 22px; }
  .step-budget { margin-top: 22px; padding-top: 18px; }
  .step-budget strong { font-size: 24px; }
  .price-note { font-size: 14px; }

  .about-grid { grid-template-columns: 1fr; row-gap: 24px; }
  .about-photo img { max-width: 180px; aspect-ratio: 4 / 4.5; }
  .fit-grid { grid-template-columns: 1fr; gap: 12px; }
  .fit-col { padding-top: 24px; }
  .post-item a { grid-template-columns: 1fr; row-gap: 8px; padding: 22px 0; }
  .post-topic, .post-title, .post-desc, .post-side { grid-column: 1; grid-row: auto; }
  .post-side { display: flex; flex-wrap: wrap; gap: 2px 14px; }
  .post-title { font-size: 21px; }
  .post-desc { margin-top: 0; font-size: 16px; }
  .post-topic { font-size: 14px; }

  .faq summary { padding-block: 18px; font-size: 16px; }
  .faq summary::after { top: 13px; }
  .faq .answer { padding-right: 0; font-size: 16px; }

  .contact-intro .lead { margin-top: 16px; font-size: 17px; }
  .contact-person img { width: 48px; height: 48px; }
  .contact-person { align-items: flex-start; }
  .contact-person-links { align-items: center; gap: 10px 16px; margin-top: 8px; font-size: 15px; }
  /* messengers as outlined buttons side by side, the email under them */
  .contact-person-links a:not(.contact-email) { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; border: 1px solid var(--accent); border-radius: var(--radius-sm); font-weight: 500; text-decoration: none; }
  .contact-person-links .contact-email { flex-basis: 100%; display: inline-block; padding: 6px 0; }
  .contact-person-links span { display: none; }
  .contact-form-wrap { padding: 24px 20px; }
  .field-row { grid-template-columns: 1fr; gap: 19px; }

  .crumbs { padding-top: 14px; }
  .crumbs li { display: none; }
  .crumbs li:nth-last-child(2) { display: block; }
  .crumbs li:nth-last-child(2)::before { display: none; }
  .crumbs a { display: inline-block; padding-block: 10px; }
  .crumbs li:nth-last-child(2) a::before { content: "\2190"; margin-right: 6px; font-family: Arial, sans-serif; }
  .page-head { padding: 10px 0 36px; }
  .page-head .lead, .case-head .lead, .article-head .lead { font-size: 17px; }
  .page-head-actions { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .page-head-actions .btn { width: 100%; }
  .filter { min-height: 44px; }
  .svc-passport { padding: 20px 20px 4px; }
  .svc-facts { grid-template-columns: 1fr; }
  .svc-fact { display: grid; grid-template-columns: 118px minmax(0, 1fr); column-gap: 14px; align-items: baseline; padding: 12px 0; }
  .svc-fact dd { margin-top: 0; }
  .svc-fact dd.svc-fact-note { grid-column: 2; margin-top: 2px; }
  .svc-fact dd.is-figure { font-size: 21px; }
  .case-head { padding-top: 10px; }
  .case-kpi .v, .case-kpi .v.is-words { font-size: 28px; }
  .case-facts, .case-facts.facts-2, .case-facts.facts-3, .case-facts.facts-5 { grid-template-columns: 1fr; row-gap: 0; margin-top: 32px; }
  .case-fact { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 14px; align-items: baseline; padding: 12px 0; }
  .case-fact + .case-fact { border-top: 1px solid var(--line); }
  .case-fact dd { margin-top: 0; font-size: 15px; }
  .case-band { margin-top: 36px; padding-block: 36px 40px; }
  .meta-label { flex-basis: 100%; }
  .csb-item p { font-size: 16px; }
  .case-diagram { margin-top: 36px; margin-inline: calc(var(--gutter) * -1); padding: 22px var(--gutter); border-radius: 0; }
  .case-takeaway, .callout { padding: 24px 20px; }
  .article-head { padding: 10px 0 32px; }
  .article-meta { gap: 6px 16px; margin-top: 20px; font-size: 13px; }
  .article-layout { padding-top: 32px; }
  .case-page .article-layout { padding-top: 40px; }
  .prose { font-size: 17px; line-height: 1.7; }
  .prose h2 { margin-top: 44px; font-size: 25px; }
  .prose h3 { margin-top: 30px; font-size: 20px; }
  .prose blockquote { font-size: 18px; }
  .table-wrap { margin-inline: calc(var(--gutter) * -1); border-inline: 0; border-radius: 0; }
  .table-wrap:not(.is-measured) { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
  .table-wrap.is-scrollable { margin-bottom: 10px; }
  .table-scroll { display: block; height: 2px; margin: 0 0 28px; border-radius: 1px; background: var(--line); overflow: hidden; }
  .table-scroll[hidden] { display: none; }
  .table-scroll > span { display: block; height: 100%; background: var(--muted); }
  .cta-inline { padding: 26px 22px; }
  .author-box { grid-template-columns: 52px minmax(0, 1fr); column-gap: 14px; }
  .author-box img { width: 52px; height: 52px; }
  .about-head .about-photo img { max-width: 140px; aspect-ratio: 1; object-position: 50% 15%; }
  .timeline li { grid-template-columns: 1fr; row-gap: 4px; padding: 20px 0; }
  .t-when, .t-what, .t-desc { grid-column: 1; grid-row: auto; }
  .t-when { padding-top: 0; }
  .t-what { font-size: 19px; }
  .t-desc { margin-top: 4px; font-size: 15px; }
  .not-found-code { font-size: 88px; }

  .site-footer { margin-top: 24px; padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
  .page-nocontact .site-footer { padding-bottom: 28px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px 24px; }
  .footer-about, .footer-col:last-child { grid-column: 1 / -1; }
  .footer-note, .footer-legal { max-width: 100%; }
  .footer-col ul { gap: 0; }
  .footer-col a { display: inline-block; padding: 9px 0; }
  .footer-settings { padding: 9px 0; }
  .footer-bottom { font-size: 12px; }


}


@media (max-width: 860px) {
  .mobile-contact { position: fixed; z-index: 90; left: max(12px, calc((100vw - 560px) / 2)); right: max(12px, calc((100vw - 560px) / 2)); bottom: calc(12px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: 1fr 108px; gap: 6px; padding: 6px; background: var(--paper); border: 1px solid var(--line); border-radius: 7px; box-shadow: 0 6px 25px rgba(18, 22, 29, .1); transform: translateY(160%); visibility: hidden; transition: transform .2s, visibility 0s .2s; }
  .mobile-contact.is-visible { transform: none; visibility: visible; transition: transform .2s; }
  .mobile-contact a { display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; text-align: center; text-decoration: none; }
  .mobile-contact a:first-child { background: var(--accent); color: #fff; }
  .mobile-contact a:last-child { color: var(--accent); }
  .menu-open .mobile-contact { display: none; }
  body.cookie-open .mobile-contact { bottom: calc(var(--cookie-space, 0px) + env(safe-area-inset-bottom)); }
}
@media (max-width: 600px) {
  .cookie-bar { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); width: auto; max-width: none; padding: 10px 12px; }
}

@media (max-width: 380px) {
  .display { font-size: 31px; }
  .brand-name { white-space: normal; }
  .brand-role { display: none; }
  .hero-actions { grid-template-columns: 1fr; }
  .cred-value { font-size: 24px; }
  .cred.is-featured .cred-value { font-size: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media print {
  .site-header, .site-footer, .contact-section, .cookie-bar, .toc, .mobile-contact, .table-scroll { display: none !important; }
  .band, .proof { background: #fff; color: var(--ink); }
  .table-wrap { -webkit-mask-image: none !important; mask-image: none !important; }
}