/* =========================================================================
   OKTUM design system
   Tokens extracted from the minut.com Webflow mirror, see docs/design-system.md
   Markup is ours; nothing here is copied from the source bundle.

   NOTE: numbers are data, not decoration. Bodoni Moda draws "1" as a bare
   vertical with hairline serifs, so at any size it reads as a capital I and
   "150 000 RUB" looks like "I50 000 RUB". Prices, stats and counters therefore
   use Figtree with tabular figures. The serif is reserved for headings and for
   decorative digits that are never followed by text.
   ========================================================================= */

/* --- 1. Tokens ------------------------------------------------------- */

:root {
  /* colour */
  --bg: #fbf9f7;
  --bg-dark: #1c1a27;
  --accent: #f9c200;
  --accent-soft: #fde8a6;
  --ink: #1c1a27;
  --ink-2: #6b6a73;
  --ink-3: #a4a3ab;
  /* secondary ink as it has to read on --band: 4.75:1, where --ink-2 gives
     3.28:1 and would fail the body-text contrast bar */
  --ink-2-band: #52525c;
  --band: #bbcddf;
  --band-2: #dce7f1;
  --navy: #1f3a63;
  --line: #e8e5e1;
  --line-dark: rgba(255, 255, 255, 0.16);
  --white: #fff;

  /* type */
  --f-display: "Bodoni Moda", "Playfair Display", Georgia, "Times New Roman", serif;
  --f-text: "Figtree", "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --t-h1: clamp(38px, 5vw, 62px);
  --t-h2: clamp(32px, 4vw, 56px);
  --t-h3: clamp(24px, 2.2vw, 32px);
  --t-h4: 20px;
  --t-lead: clamp(17px, 1.4vw, 20px);
  --t-body: clamp(16px, 1.15vw, 17px);
  --t-small: 15px;
  --t-label: 13px;

  /* space */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;
  --s-11: 160px;

  /* shape */
  --container: 1170px;
  --gutter: 24px;
  --section: var(--s-11);
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 9999px;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --nav-h: 70px;
}

/* --- 2. Reset -------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--t-body) / 1.62 var(--f-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

/* Inline sprite symbols carry no intrinsic size, so without this they fall back
   to the SVG default and balloon — a 16px arrow in a button becomes 300px.
   Component rules below override where a larger icon is wanted. */
.icon { width: 18px; height: 18px; flex: none; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--ink); }

button { font: inherit; color: inherit; cursor: pointer; }

ul, ol { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }

hr { height: 1px; border: 0; background: var(--line); }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 3px;
}
.on-dark :focus-visible,
.footer :focus-visible { outline-color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- 3. Typography --------------------------------------------------- */

.h1, .h2, .h3 {
  font-family: var(--f-display);
  font-weight: 400;
  text-wrap: balance;
}

.h1 {
  font-size: var(--t-h1);
  line-height: 1.06;
  font-variation-settings: "opsz" 48;
  letter-spacing: -0.01em;
}

.h2 {
  font-size: var(--t-h2);
  line-height: 1.1;
  font-variation-settings: "opsz" 44;
}

.h3 {
  font-size: var(--t-h3);
  line-height: 1.15;
  font-variation-settings: "opsz" 28;
}

.h4 {
  font-size: var(--t-h4);
  font-weight: 600;
  line-height: 1.4;
}

.lead {
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--ink-2);
}

.body { font-size: var(--t-body); }

.small {
  font-size: var(--t-small);
  line-height: 1.5;
}

.label {
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.num {
  font-family: var(--f-text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  line-height: 1;
  letter-spacing: -0.02em;
}

/* serif digits, only where no text follows the number */
.num--serif {
  font-family: var(--f-display);
  font-weight: 400;
  font-variation-settings: "opsz" 60;
  font-variant-numeric: normal;
  font-feature-settings: normal;
  letter-spacing: -0.01em;
}

.stats-unit {
  font: 500 clamp(19px, 2.3vw, 30px) / 1 var(--f-text);
  margin-left: 8px;
}

/* Pull-quote headings carry numbers ("через 30 секунд"), and Bodoni Moda's
   "3" reads as a colon at display size. Quotes are text, not decoration —
   they use the text face at a display weight. */
.quote-lead {
  font: 300 clamp(26px, 2.9vw, 40px) / 1.24 var(--f-text);
  letter-spacing: -0.015em;
  margin-top: var(--s-4);
}

/* tall media slot used by the case-study pages */
.case-media {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  min-height: 420px;
}
.case-media img,
.case-media .media-placeholder {
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
  aspect-ratio: auto;
  border-radius: 0;
}

/* Dark panels and the steel-blue band are both non-#fbf9f7 surfaces, so the
   secondary ink has to be re-picked for them: --ink-2 gives 5.08:1 on the
   page and only 3.28:1 on the band, which fails the 4.5:1 body-text bar.
   --ink-2-on-band is the same hue at the lightness that clears 4.5:1. */
.on-dark { color: var(--white); }
.on-dark .lead,
.on-dark .body,
.on-dark .small,
.section--dark .lead,
.section--dark .body,
.section--dark .small,
.section--dark .card__text,
.section--dark .step p { color: rgba(255, 255, 255, 0.78); }
.on-dark .label,
.section--dark .label { color: var(--accent); }
.on-dark hr,
.section--dark hr { background: var(--line-dark); }

.section--band { --ink-2: var(--ink-2-band); --ink-3: var(--ink-2-band); }

.measure { max-width: 62ch; }
.measure-sm { max-width: 46ch; }

/* --- 4. Layout ------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow { max-width: 880px; }

.section { padding-block: var(--section); }
.section--tight { padding-block: var(--s-9) var(--s-8); }
.section--dark { background: var(--bg-dark); color: var(--white); }
.section--band { background: var(--band); }
.section--accent { background: var(--accent); }

.section-head { text-align: center; margin-bottom: var(--s-8); }
.section-head .label { display: block; margin-bottom: var(--s-4); }
.section-head .h2 { margin-bottom: var(--s-5); }
.section-head .lead { max-width: 620px; margin-inline: auto; }
.section-head--start { text-align: left; }
.section-head--start .lead { margin-inline: 0; }

.grid { display: grid; gap: var(--s-6); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-9);
  align-items: center;
}

.stack { display: grid; gap: var(--s-4); }
.stack--lg { gap: var(--s-6); }

/* --- 5. Buttons ------------------------------------------------------ */

/* 48px is the touch minimum the legacy plan asked for (plans/legacy-migration-map.md
   row 5) and the size --s-7 already names. A button shorter than that is a
   mis-tap on a phone, so the floor lives on .btn itself and every modifier
   inherits it instead of lowering it. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 26px;
  border: 1.5px solid transparent;
  border-radius: var(--r-pill);
  background: var(--bg-dark);
  color: var(--white);
  font: 500 15px / 1 var(--f-text);
  white-space: nowrap;
  transition: background 140ms var(--ease), color 140ms var(--ease),
    border-color 140ms var(--ease), transform 140ms var(--ease);
}
.btn:hover { background: #2f2c40; color: var(--white); }

.btn--light {
  background: var(--white);
  color: var(--ink);
  border-color: var(--ink);
}
.btn--light:hover { background: var(--ink); color: var(--white); }

.btn--yellow {
  background: var(--accent);
  color: var(--ink);
}
.btn--yellow:hover { background: #ffcf14; color: var(--ink); }

.btn--ghost {
  background: transparent;
  color: var(--white);
  border-color: var(--line-dark);
}
.btn--ghost:hover { background: rgba(255, 255, 255, 0.1); color: var(--white); }

.btn--light.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn--light.btn--ghost:hover { background: var(--ink); color: var(--white); }

/* --sm drops the type and the padding, not the hit area: 34px was the old
   floor and it is below the 48px touch minimum. */
.btn--sm { min-height: 48px; padding: 0 18px; font-size: 14px; }
.btn--lg { min-height: 48px; padding: 0 34px; font-size: 16px; }
.btn--block { width: 100%; }

.btn__arrow { transition: transform 140ms var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
}

/* --- 6. Header ------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(251, 249, 247, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 160ms var(--ease);
}
.header.is-stuck { border-bottom-color: var(--line); }

.header__inner {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  height: var(--nav-h);
}

.logo {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font: 700 21px / 1 var(--f-text);
  letter-spacing: 0.14em;
  color: var(--navy);
  flex: none;
}
.logo span { font-weight: 500; opacity: 0.75; }
.logo:hover { color: var(--navy); }

.nav { display: flex; align-items: center; gap: var(--s-6); margin-right: auto; }

.nav__link {
  position: relative;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  padding-block: var(--s-2);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 2px;
  background: var(--accent);
  transition: right 180ms var(--ease);
}
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { right: 0; }

.nav__actions { display: flex; align-items: center; gap: var(--s-3); flex: none; }
.header__phone { font-size: 15px; font-weight: 600; white-space: nowrap; }
.header__phone:hover { color: var(--ink); }

.burger {
  display: none;
  width: 48px;
  height: 48px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--white);
  padding: 0;
  place-items: center;
}
.burger svg { width: 18px; height: 18px; }

.nav-drawer {
  display: none;
  border-top: 1px solid var(--line);
  padding: var(--s-5) var(--gutter) var(--s-6);
  background: var(--bg);
}
.nav-drawer a {
  display: block;
  padding: var(--s-3) 0;
  font-size: 18px;
  border-bottom: 1px solid var(--line);
}
/* The drawer styles every child as a full-width row with no side padding,
   which strips the pill's own padding and leaves the label flush against the
   edge. Only the padding is restored; the button stays full width. */
.nav-drawer .btn {
  margin-top: var(--s-5);
  width: 100%;
  padding-inline: 26px;
  border-bottom: 0;
}

body.is-locked { overflow: hidden; }

/* --- 7. Media -------------------------------------------------------- */

.ring {
  position: relative;
  display: inline-grid;
  place-items: center;
  padding: 24px;
  border-radius: 50%;
}
.ring::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 3px solid var(--accent);
  border-radius: 50%;
}
/* picture is a transparent wrapper: the img keeps the ring's own geometry */
.ring > picture { display: contents; }
.ring > img,
.ring > picture > img,
.ring > .media-placeholder {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
}
.ring > .media-placeholder { background: var(--band-2); }

.ring--sm { padding: 14px; }
.ring--sm::before { border-width: 2px; }

.arch {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-sm);
}

.oval {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 1 / 1.15;
  object-fit: cover;
  border-radius: 50%;
  margin-inline: auto;
}

.media-placeholder {
  display: grid;
  place-items: center;
  gap: var(--s-3);
  aspect-ratio: 4 / 3;
  border-radius: var(--r-sm);
  background: var(--band-2);
  color: var(--ink-2);
  font: 600 13px / 1 var(--f-text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  padding: var(--s-4);
}

/* --- 8. Cards -------------------------------------------------------- */

.card-grid { display: grid; gap: var(--s-7) var(--s-6); }
.card-grid--3 { grid-template-columns: repeat(3, 1fr); }

.card { display: grid; gap: var(--s-4); align-content: start; }
.card__text { margin: 0; color: var(--ink-2); }

.icon-circle {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--white);
  border: 1.5px solid var(--line);
  color: var(--ink);
  flex: none;
  transition: background 160ms var(--ease), border-color 160ms var(--ease),
    color 160ms var(--ease);
}
.icon-circle svg { width: 34px; height: 34px; }
.icon-circle--sm { width: 32px; height: 32px; }
.icon-circle--sm svg { width: 16px; height: 16px; }
.icon-circle--accent { background: var(--accent); border-color: var(--accent); }

.card--pain { gap: var(--s-4); padding-top: var(--s-5); }
.card--pain h3 { font-family: var(--f-text); font-size: 19px; font-weight: 600; }
.card--pain p { color: var(--ink-2); margin: 0; }

/* checklist rows, icon + label, used on light and dark */
.checklist { display: grid; gap: var(--s-4); }
.checklist__item { display: flex; align-items: center; gap: var(--s-4); }
.checklist__item span:last-child { font-size: var(--t-small); font-weight: 500; }
.on-dark .checklist__item span:last-child { color: rgba(255, 255, 255, 0.9); }

/* --- 9. Hero --------------------------------------------------------- */

.hero { padding-block: var(--s-9) var(--s-10); position: relative; }
.hero__inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--s-8);
  align-items: center;
}
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 7px 16px 7px 12px;
  border-radius: var(--r-pill);
  background: var(--accent);
  font-size: var(--t-small);
  font-weight: 600;
  margin-bottom: var(--s-5);
}
.hero__badge .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink);
}
.hero__title { margin-bottom: var(--s-5); max-width: 15ch; }
.hero__lead { max-width: 46ch; margin-bottom: var(--s-6); }
.hero .btn-row { margin-bottom: var(--s-7); }

.hero__media { display: grid; justify-items: center; }
.hero__media .ring {
  width: min(100%, 460px);
  padding: 8px;
  border: 5px solid var(--accent);
  background: var(--bg-dark);
}
.hero__media .ring::before { display: none; }
.hero__media .ring > img,
.hero__media .ring > picture > img,
.hero__media .ring > .media-placeholder {
  border-radius: 50%;
  object-fit: cover;
}

.stats-inline {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: var(--s-7);
  justify-content: start;
}
.stats-inline .num { font-size: 34px; }
.stats-inline .small { color: var(--ink-2); }

/* --- 10. Trust strip ------------------------------------------------- */

.trust { padding-block: var(--s-8); border-block: 1px solid var(--line); }
.trust__title { text-align: center; margin-bottom: var(--s-6); }
/* The district abbreviations are real links, so they carry link-weight
   contrast: --ink-2 at 5.08:1. --ink-3 (2.38:1) would be decorative, and
   this is not. */
.trust__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3) var(--s-7);
  color: var(--ink-2);
}
.trust__row span,
.trust__row a {
  font: 600 19px / 1 var(--f-text);
  letter-spacing: 0.06em;
  transition: color 140ms var(--ease);
}
.trust__row a:hover { color: var(--ink); }

/* --- 11. Solution switcher (icon circles + copy) --------------------- */

.sol-tabs { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.sol-tabs__btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border: 1px solid var(--line-dark);
  border-radius: 50%;
  background: var(--bg-dark);
  color: rgba(255, 255, 255, 0.72);
  cursor: pointer;
  transition: background 140ms var(--ease), color 140ms var(--ease),
    border-color 140ms var(--ease);
}
.sol-tabs__btn svg { width: 26px; height: 26px; }
.sol-tabs__btn:hover { color: var(--white); }
.sol-tabs__btn[aria-selected="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink);
}
/* yellow dot above the active tab — minut.com home-tab-link::before */
.sol-tabs__dot {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  transition: opacity 100ms;
}
.sol-tabs__btn[aria-selected="true"] .sol-tabs__dot { opacity: 1; }

/* photo circle: one container, all photos stacked, active one is opaque —
   minut.com div-block-734 (5px accent ring) + .home-tab-image opacity swap */
.sol-media {
  position: relative;
  width: min(100%, 420px);
  margin: 0 auto;
}
.sol-media__stack {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  padding: 8px;
  border-radius: 50%;
  border: 5px solid var(--accent);
}
.sol-media__stack::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: var(--bg-dark);
}
.sol-media__photo {
  position: absolute;
  inset: 8px;
  overflow: hidden;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 200ms var(--ease);
}
.sol-media__photo.is-active { opacity: 1; }
.sol-media__photo img,
.sol-media__photo .media-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.sol-media__photo .media-placeholder {
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--band-2);
}
/* floating device badge at the top edge of the ring — minut.com
   .home-tab-icon-rotator: absolute, stacked, inactive rotated -30 deg */
.sol-media__rotator {
  position: absolute;
  inset: 8px;
  pointer-events: none;
}
.sol-media__badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--accent);
  border: 4px solid var(--bg-dark);
  opacity: 0;
  transition: transform 300ms var(--ease), opacity 300ms var(--ease);
}
.sol-media__badge svg { width: 30px; height: 30px; }
.sol-media__badge.is-active {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg);
}
.sol-media__badge:not(.is-active) {
  transform: translate(-50%, -50%) rotate(-30deg);
}

.switcher { display: grid; gap: var(--s-6); align-content: start; }
.switcher__nav { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.switcher__btn {
  border: 0;
  background: none;
  padding: 0;
  border-radius: 50%;
}
.switcher__btn .icon-circle { cursor: pointer; }
.switcher__btn[aria-selected="true"] .icon-circle {
  background: var(--accent);
  border-color: var(--accent);
}
.switcher__title { margin-bottom: var(--s-4); }
.switcher__text { color: rgba(255, 255, 255, 0.78); max-width: 44ch; margin-bottom: var(--s-5); }
.switcher__panel[hidden] { display: none; }

/* --- 12. Tabs -------------------------------------------------------- */

.tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-6);
  border-bottom: 1px solid var(--line);
}
.tabs__btn {
  border: 0;
  background: none;
  padding: 0 0 var(--s-4);
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  font: 600 16px / 1.3 var(--f-text);
  color: var(--ink-2);
  text-align: left;
  transition: color 140ms var(--ease), border-color 140ms var(--ease);
}
.tabs__btn[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.tabs__btn:hover { color: var(--ink); }

/* --- 13. Steps ------------------------------------------------------- */

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-7); }
.step { display: grid; gap: var(--s-3); align-content: start; }
.step__num {
  font: 600 15px / 1 var(--f-text);
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--ink);
  margin-bottom: var(--s-2);
}
.step p { color: var(--ink-2); margin: 0; }

/* --- 14. Stats band -------------------------------------------------- */

.stats-band { padding-block: var(--s-9); }
.stats-band__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  text-align: center;
}
.stats-band__cell { padding-inline: var(--s-5); }
.stats-band__cell + .stats-band__cell { border-left: 1px solid var(--line-dark); }
.stats-band__cell .num { font-size: clamp(44px, 5vw, 68px); display: inline-block; }
.stats-band__cell .small { display: block; color: rgba(255, 255, 255, 0.78); }

/* --- 15. Testimonial ------------------------------------------------- */

.dots { display: flex; gap: var(--s-2); margin-bottom: var(--s-6); }
.dots button {
  width: 11px;
  height: 11px;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid var(--navy);
  background: transparent;
}
.dots button[aria-current="true"] { background: var(--navy); }

.quote-card {
  display: grid;
  grid-template-columns: 45% 1fr;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-dark);
  color: var(--white);
  min-height: 460px;
}
.quote-card__media { position: relative; overflow: hidden; }
.quote-card__media img,
.quote-card__media .media-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: auto;
  border-top-right-radius: 140px;
}
.quote-card__body {
  padding: var(--s-9) var(--s-8);
  display: grid;
  gap: var(--s-5);
  align-content: center;
  justify-items: start;
}
.quote-card__mark {
  font: 600 15px / 1 var(--f-text);
  padding: 8px 14px;
  border-radius: var(--r-xs);
  background: var(--white);
  color: var(--ink);
  letter-spacing: 0.02em;
}
.quote-card blockquote {
  font-size: 19px;
  font-weight: 500;
  line-height: 1.5;
  margin: 0;
  max-width: 40ch;
}
.quote-card__who { font-size: var(--t-small); color: rgba(255, 255, 255, 0.7); }
.quote-card[hidden] { display: none; }

/* --- 16. Pricing ----------------------------------------------------- */

.pricing { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-6); }
.price-card {
  display: grid;
  gap: var(--s-5);
  align-content: start;
  padding: var(--s-7);
  border-radius: var(--r-lg);
  background: var(--white);
  border: 1px solid var(--line);
}
.price-card--accent { border-color: var(--accent); border-width: 2px; }
.price-card__head { display: grid; gap: var(--s-2); }
.price-card__name { font: 400 30px / 1.1 var(--f-display); font-variation-settings: "opsz" 28; }
.price-card__tag {
  justify-self: start;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: var(--accent);
  font-size: 13px;
  font-weight: 600;
}
.price-card__price { display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; }
.price-card__price .num { font-size: 44px; }
.price-card__list { display: grid; gap: var(--s-3); }
.price-card__list li { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--t-small); }
.price-card__list svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--ink); }

/* The tariff comparison table under the two cards. Same tokens as the cards
   above, so it reads as part of them: the header band is --bg-dark, the row
   labels are left and quiet, the marks are centred. */
.price-table { width: 100%; border-collapse: collapse; }
.price-table th,
.price-table td { padding: var(--s-4) var(--s-5); text-align: left; vertical-align: top; }
.price-table thead th {
  background: var(--bg-dark);
  color: var(--white);
  font-weight: 600;
  vertical-align: bottom;
}
.price-table tbody th { font-weight: 500; font-size: var(--t-small); }
.price-table td { text-align: center; border-left: 1px solid var(--line); }
.price-table tbody tr + tr th,
.price-table tbody tr + tr td { border-top: 1px solid var(--line); }

/* --- 17. CTA band ---------------------------------------------------- */

.cta-band {
  position: relative;
  isolation: isolate;
  padding-block: var(--s-10);
  text-align: center;
  color: var(--white);
  background: var(--bg-dark);
}
.cta-band__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cta-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(28, 26, 39, 0.74);
}
.cta-band .h2 { max-width: 22ch; margin-inline: auto; margin-bottom: var(--s-5); }
.cta-band .lead { color: rgba(255, 255, 255, 0.84); max-width: 52ch; margin-inline: auto; }
.cta-band .btn-row { justify-content: center; margin-top: var(--s-7); }

/* --- 18. Forms ------------------------------------------------------- */

.form-card {
  display: grid;
  gap: var(--s-4);
  padding: var(--s-7);
  border-radius: var(--r-lg);
  background: var(--white);
  border: 1px solid var(--line);
}
.field { display: grid; gap: 6px; }
.field > label { font-size: var(--t-small); font-weight: 600; }
/* 48px for the same reason as .btn: it is the floor for a finger on a phone,
   and the form is where the finger spends most of its time. */
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-xs);
  background: var(--white);
  font: 400 15px / 1.4 var(--f-text);
  color: var(--ink);
  transition: border-color 140ms var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--ink);
}
.field textarea { min-height: 96px; resize: vertical; }
.field--error input, .field--error select, .field--error textarea { border-color: #c0392b; }
.field__error { font-size: 13px; color: #c0392b; }
.consent { font-size: 13px; color: var(--ink-2); display: flex; gap: 10px; align-items: flex-start; }
.consent input { width: 18px; height: 18px; min-height: 0; margin-top: 2px; flex: none; }
.form-note { font-size: 13px; color: var(--ink-2); }
.form-ok {
  padding: var(--s-5);
  border-radius: var(--r-md);
  background: #edf5ee;
  border: 1px solid #d2e6d3;
  font-size: var(--t-small);
}
.form-error { font-size: 13px; color: #c72a2a; font-weight: 500; text-align: center; }

/* form field helpers */
.required-star { color: #e02f2f; font-weight: 700; margin-left: 4px; }
.optional-tag { color: var(--ink-3); font-weight: 400; font-size: 0.8em; margin-left: 6px; }
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* extended section (collapsible details) */
.extended-section { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.extended-summary {
  display: flex; align-items: center; gap: 0.5rem;
  padding: var(--s-4) var(--s-5); cursor: pointer;
  font-size: 14px; font-weight: 500; color: var(--ink-2);
  background: rgba(0, 0, 0, 0.02); list-style: none;
  transition: background 140ms; user-select: none;
}
.extended-summary::-webkit-details-marker { display: none; }
.extended-summary::marker { display: none; content: ''; }
.extended-summary .icon { width: 16px; height: 16px; flex: none; transition: transform 180ms var(--ease); }
.extended-section[open] .extended-summary .icon { transform: rotate(180deg); }
.extended-summary:hover { background: rgba(0, 0, 0, 0.04); }
.extended-body { padding: 0.5rem var(--s-5) var(--s-5); display: grid; gap: var(--s-4); }
.extended-body .field:last-child { margin-bottom: 0; }

/* photo upload zone */
.photo-upload-zone {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.5rem; padding: var(--s-5);
  border: 2px dashed var(--line); border-radius: var(--r-md);
  cursor: pointer; color: var(--ink-3); font-size: 13px; text-align: center;
  transition: border-color 140ms, color 140ms;
}
.photo-upload-zone .icon { width: 28px; height: 28px; }
/* The zone is a click target only when a script is there to forward the click
   to the input. Without one the input itself has to be on screen — it carries
   its own control and the <label for="f-photos"> above already points at it. */
.photo-upload-input { display: none; }
.no-js .photo-upload-input { display: block; }
.photo-upload-zone:hover { border-color: var(--accent); color: var(--accent); }
.photo-upload-zone.dragover { border-color: var(--accent); background: rgba(255, 170, 0, 0.05); color: var(--accent); }
.photo-preview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; margin-top: 8px; }
.photo-preview-item { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); }
.photo-preview-item img { width: 100%; height: 100%; object-fit: cover; }
.photo-preview-remove {
  position: absolute; top: 4px; right: 4px;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(0,0,0,0.55); color: white;
  border: 0; cursor: pointer; font-size: 14px; line-height: 1;
  display: grid; place-items: center;
}
.photo-count-hint { font-size: 12px; color: var(--ink-3); margin-top: 4px; }

/* --- 19. FAQ --------------------------------------------------------- */

.faq { display: grid; gap: 0; max-width: 780px; margin-inline: auto; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item:first-child { border-top: 1px solid var(--line); }
.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  padding: var(--s-5) 0;
  background: none;
  border: 0;
  text-align: left;
  font: 500 19px / 1.4 var(--f-text);
}
.faq__q svg { width: 16px; height: 16px; flex: none; transition: transform 180ms var(--ease); }
.faq__q[aria-expanded="true"] svg { transform: rotate(45deg); }
.faq__a { padding-bottom: var(--s-5); }
.faq__a p { margin: 0; color: var(--ink-2); max-width: 68ch; }
.faq__a[hidden] { display: none; }

/* --- 20. Footer ------------------------------------------------------ */

.footer { background: var(--bg); padding-block: var(--s-9) var(--s-6); border-top: 1px solid var(--line); }
.footer__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.35fr;
  gap: var(--s-7);
}
.footer__col h4 { font-size: var(--t-small); font-weight: 600; margin: 0 0 var(--s-4); }
.footer__col h4:not(:first-child) { margin-top: var(--s-7); }
.footer__col li + li { margin-top: 10px; }
.footer__col a, .footer__col span { font-size: var(--t-small); color: var(--ink-2); }
.footer__col a:hover { color: var(--ink); }

.footer__cta {
  padding: var(--s-7);
  border-radius: var(--r-lg);
  background: var(--accent);
  display: grid;
  gap: var(--s-4);
  align-content: start;
  align-self: start;
}
.footer__cta .h3 { font-size: 25px; line-height: 1.2; font-variation-settings: "opsz" 26; }
.footer__cta .small { color: rgba(28, 26, 39, 0.72); }
.footer__cta .form-card { background: transparent; border: 0; padding: 0; gap: var(--s-3); }

.footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line);
}
.footer__bar + .footer__bar { margin-top: var(--s-5); padding-top: 0; border-top: 0; }
.footer__copy { font-size: 14px; color: var(--ink-2); }
.footer__copy a:hover { color: var(--ink); }
.footer__social { display: flex; gap: var(--s-3); }
.footer__social a {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
}
.footer__social a:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }
.footer__social svg { width: 17px; height: 17px; }

/* --- 21. Legal prose -------------------------------------------------- */

/* The legal documents are numbered clauses: a heading, then paragraphs.
   The numbering lives in the copy, so the styles only set rhythm. */
.prose { max-width: 760px; }
.prose p { color: var(--ink-2); }
.prose p + p { margin-top: var(--s-3); }
.prose__h {
  margin-top: var(--s-8);
  margin-bottom: var(--s-4);
  font-family: var(--f-text);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.35;
}
.prose__list {
  display: grid;
  gap: var(--s-2);
  margin-block: var(--s-3);
  padding-left: var(--s-5);
  list-style: disc;
}
.prose__list li { color: var(--ink-2); }
.prose a { color: var(--ink); border-bottom: 1px solid var(--line); }
.prose a:hover { border-bottom-color: var(--ink); }

/* --- 22. Utilities --------------------------------------------------- */

.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;
}
.text-center { text-align: center; }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }
.mt-8 { margin-top: var(--s-8); }
.mb-4 { margin-bottom: var(--s-4); }
.mb-5 { margin-bottom: var(--s-5); }
.mb-6 { margin-bottom: var(--s-6); }
.mb-7 { margin-bottom: var(--s-7); }
.mb-8 { margin-bottom: var(--s-8); }
.no-wrap { white-space: nowrap; }

.link-underline {
  font-weight: 600;
  font-size: var(--t-small);
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 2px;
}
.link-underline:hover { opacity: 0.7; }

/* --- 23. Reveal on scroll -------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* --- 24. Home page blocks --------------------------------------------- */

/* Geography marquee. Two identical tracks scroll side by side; the second is a
   decorative duplicate, so it carries plain text instead of focusable links.
   Edge fade is a mask, not a gradient overlay, so it never traps a click. */
.marquee {
  display: flex;
  overflow: hidden;
  gap: var(--s-8);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee__track {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--s-8);
  margin: 0;
  padding: 0;
  list-style: none;
  animation: marquee-scroll 46s linear infinite;
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }
.marquee__item a,
.marquee__item span {
  font: 600 19px / 1 var(--f-text);
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: var(--ink-2);
  transition: color 140ms var(--ease);
  padding-block: var(--s-4);
}
.marquee__item a { display: inline-block; }
.marquee__item a:hover { color: var(--ink); }

/* Solutions: circular tab switcher on the left, photo circle on the right. */
.sol-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: var(--s-8);
  align-items: start;
}
.tabs--dark { border-bottom-color: var(--line-dark); }
.tabs--dark .tabs__btn {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  color: rgba(255, 255, 255, 0.72);
}
.tabs--dark .tabs__btn svg { width: 20px; height: 20px; flex: none; }
.tabs--dark .tabs__btn:hover,
.tabs--dark .tabs__btn[aria-selected="true"] { color: var(--white); }

.tab-panel { padding-top: var(--s-8); }
.tab-panel[hidden] { display: none; }
.tab-panel .h3 { margin-bottom: var(--s-4); }
.tab-panel p { max-width: 52ch; margin-bottom: var(--s-5); }
.tab-panel .link-underline { display: inline-block; color: var(--white); }

/* Audience: three scenarios behind a segmented control. */
.seg-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
  margin-bottom: var(--s-8);
}
.seg-tabs__btn {
  padding: var(--s-3) 0;
  border: 0;
  border-bottom: 2px solid var(--line);
  border-radius: 0;
  background: none;
  font: 600 16px / 1.2 var(--f-text);
  color: var(--ink-2);
  text-align: center;
  transition: color 140ms var(--ease), border-color 140ms var(--ease);
}
.seg-tabs__btn:hover { color: var(--ink); }
.seg-tabs__btn[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }

.seg-panel[hidden] { display: none; }
.seg-panel__grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--s-8);
  align-items: start;
}
.seg-panel__title {
  font-family: var(--f-display);
  font-size: clamp(34px, 3.4vw, 52px);
  font-weight: 400;
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: var(--s-4);
}
.seg-panel__sub { margin-bottom: var(--s-6); }

.chev-list { display: grid; gap: var(--s-3); margin-bottom: var(--s-7); }
.chev-list li {
  position: relative;
  padding-left: var(--s-6);
  font-size: var(--t-body);
  color: var(--ink-2);
}
.chev-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 9px;
  height: 9px;
  border-top: 2px solid var(--accent);
  border-right: 2px solid var(--accent);
  transform: rotate(45deg);
}

.feature-boxes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4);
}
.feature-box {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: var(--s-3);
  aspect-ratio: 1;
  padding: var(--s-5) var(--s-3);
  border-radius: var(--r-md);
  background: var(--white);
  border: 1px solid var(--line);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
  color: var(--ink-2);
}
.feature-box svg { width: 34px; height: 34px; flex: none; color: var(--ink); }

/* The photo the testimonial sits on. */
.aud-media {
  position: relative;
  aspect-ratio: 1 / 1.05;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--band-2);
}
.aud-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mini-case {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(88%, 420px);
  display: grid;
  gap: var(--s-3);
  padding: var(--s-6);
  border-radius: var(--r-md);
  background: var(--white);
  color: var(--ink);
}
.mini-case__stars { display: flex; align-items: center; gap: 4px; margin: 0; }
.mini-case__stars svg { width: 16px; height: 16px; color: var(--ink); }
.mini-case__score { font-size: 13px; color: var(--ink-2); margin-left: var(--s-2); }
.mini-case__label {
  margin: 0;
  justify-self: start;
  padding: 6px 13px;
  border-radius: var(--r-xs);
  background: var(--accent);
  color: var(--ink);
  font: 600 14px / 1.2 var(--f-text);
}
.mini-case__quote {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
}
.mini-case__name { margin: 0; font-weight: 600; color: var(--ink); }
.mini-case__role { margin: 0; font-size: 14px; color: var(--ink-2); }

/* Privacy: what the system does, the shield, what it does not do. */
.privacy {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--s-8);
  align-items: center;
}
.privacy__list { display: grid; gap: var(--s-4); margin: 0; padding: 0; list-style: none; }
.privacy__list li {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--t-body);
  color: var(--ink-2);
}
.privacy__media {
  position: relative;
  width: 400px;
  aspect-ratio: 1;
  padding: 0;
  border-radius: 50%;
  overflow: hidden;
}
.privacy__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.privacy__media .media-placeholder {
  background: var(--band-2);
  height: 100%;
  aspect-ratio: auto;
}

/* Cases. --ink-2 resolves to --ink-2-band on .section--band, which is the
   value that clears 4.5:1 on the blue. */
.review-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
}
.review {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 0;
  padding: 0;
  border-radius: var(--r-lg);
  background: var(--white);
  border: 1px solid var(--line);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}
.review__media {
  overflow: hidden;
}
.review__media img,
.review__media .media-placeholder {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  display: block;
}
.review__media .media-placeholder { background: var(--band-2); }
.review__body {
  padding: var(--s-7) var(--s-7);
  display: grid;
  gap: var(--s-4);
  align-content: start;
}
.review__quote {
  margin: 0;
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--ink);
}
.review__meta { display: grid; gap: 2px; }
.review__name { margin: 0; font-weight: 600; font-size: var(--t-body); }
.review__role { margin: 0; font-size: 14px; color: var(--ink-2); }
.review__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--navy);
}
.review__link svg { width: 16px; height: 16px; }
.review:hover .review__link { color: var(--ink); }
.review__more { justify-content: center; margin-top: var(--s-8); }

/* --- 25. Responsive -------------------------------------------------- */

@media (max-width: 1100px) {
  :root { --section: var(--s-10); }
  .nav { gap: var(--s-5); }
  .header__phone { display: none; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 960px) {
  :root { --section: 80px; --gutter: 20px; }

  .nav, .nav__actions { display: none; }
  .burger { display: grid; }
  .nav-drawer[data-open="true"] { display: block; }

  .hero { padding-block: var(--s-8) var(--s-9); }
  .hero__inner { grid-template-columns: 1fr; gap: var(--s-7); }
  .hero__title { max-width: none; }
  .hero__media { order: -1; }
  .hero__media .ring { width: min(100%, 360px); }

  .split { grid-template-columns: 1fr; gap: var(--s-7); }

  .card-grid--3, .steps, .pricing, .grid--4 { grid-template-columns: 1fr; }
  .grid--2, .grid--3 { grid-template-columns: 1fr; }

  .tabs { grid-template-columns: repeat(2, 1fr); gap: var(--s-5); }

  .quote-card { grid-template-columns: 1fr; min-height: 0; }
  .quote-card__media { aspect-ratio: 4 / 3; }
  .quote-card__media img,
  .quote-card__media .media-placeholder { border-top-right-radius: 100px; }
  .quote-card__body { padding: var(--s-7) var(--s-6); }

  .stats-band__row { grid-template-columns: 1fr; gap: var(--s-7); }
  .stats-band__cell + .stats-band__cell {
    border-left: 0;
    border-top: 1px solid var(--line-dark);
    padding-top: var(--s-7);
  }

  .sol-grid,
  .seg-panel__grid { grid-template-columns: 1fr; gap: var(--s-7); }
  .feature-boxes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .review-grid { grid-template-columns: 1fr; }
  .review { grid-template-columns: 1fr; }
  .review__media img, .review__media .media-placeholder { min-height: 240px; }
  .privacy { grid-template-columns: 1fr; gap: var(--s-7); justify-items: center; }
  .privacy__media { width: 280px; }
}

@media (max-width: 640px) {
  :root { --gutter: 16px; }

  .stats-inline { grid-template-columns: 1fr 1fr; gap: var(--s-5); }
  .stats-inline .num { font-size: 30px; }

  .footer__grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .footer__bar { flex-direction: column; align-items: flex-start; }

  .btn { width: 100%; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .hero .btn-row .btn,
  .cta-band .btn-row .btn { width: auto; align-self: flex-start; }

  .tabs { grid-template-columns: 1fr; }

  .sol-tabs { gap: var(--s-2); }
  .sol-tabs__btn { width: 60px; height: 60px; }
  .sol-media { width: min(100%, 320px); }
  .sol-media__badge { width: 56px; height: 56px; border-width: 3px; }
  .sol-media__badge svg { width: 24px; height: 24px; }

  .switcher__nav { gap: var(--s-2); }
  .icon-circle { width: 68px; height: 68px; }
  .icon-circle svg { width: 26px; height: 26px; }

  .price-card, .form-card { padding: var(--s-6); }

  .seg-tabs__btn { width: 100%; font-size: 14px; }
  .feature-boxes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .marquee__item a, .marquee__item span { font-size: 17px; }
}

/* The marquee is decoration around a list of links. When the motion is off —
   or when the viewport is too narrow for it to read as motion — it becomes a
   plain wrapped list, and the duplicate track is dropped. */
@media (prefers-reduced-motion: reduce) {
  .marquee {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s-4) var(--s-6);
    -webkit-mask-image: none;
            mask-image: none;
  }
  /* flex: 0 0 auto would size the track to max-content — one line, never
     wrapping — so the basis has to be released for the wrap to take. */
  .marquee__track {
    animation: none;
    flex: 1 1 100%;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: var(--s-4);
  }
  .marquee__track[aria-hidden="true"] { display: none; }
}

/* --- 26. Cookie banner ------------------------------------------------ */

/* No page carries this markup: cookie-banner.js appends it to <body> when it
   finds no stored answer, and removes it again once the visitor picks one.
   It is a region, not a dialog — nothing here takes or holds focus. */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60; /* clears the sticky header (z-index 50) */
  background: var(--white);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px rgba(28, 26, 39, 0.12);
  transition: opacity 400ms var(--ease), transform 400ms var(--ease);
}
.cookie-banner.is-hidden {
  opacity: 0;
  transform: translateY(100%);
  pointer-events: none;
}

.cookie-banner__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4) var(--s-6);
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--s-4) var(--gutter);
}

.cookie-banner__text { flex: 1 1 320px; min-width: 0; }
.cookie-banner__text p {
  margin: 0 0 var(--s-1);
  font-size: var(--t-small);
  color: var(--ink-2);
}
.cookie-banner__text p:first-child {
  margin-bottom: var(--s-2);
  color: var(--ink);
  font-size: var(--t-body);
  font-weight: 600;
}
.cookie-banner__text p:last-child { margin-bottom: 0; }
.cookie-banner__text a {
  color: var(--ink);
  font-weight: 600;
  border-bottom: 1px solid currentColor;
  /* The link is the one thing a visitor may act on inside the banner: it
     must not break between its two words. */
  white-space: nowrap;
}
.cookie-banner__text a:hover { opacity: 0.7; }

.cookie-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  flex: none;
}

@media (max-width: 640px) {
  /* .btn goes width:100% at this width; inside the banner the pair should
     share the row instead of stacking into two full-width bars. */
  .cookie-banner__actions { width: 100%; }
  .cookie-banner__actions .btn { flex: 1 1 auto; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .cookie-banner { transition: none; }
}

/* --- 27. Print ---------------------------------------------------------
   Ported from the old tree's css/main.css:421 and adapted to this
   vocabulary — the old tree had .navbar/.mobile-menu-btn/.contact-form/footer,
   here they are .header/.burger/.form-card/.footer. Nothing below applies to
   screen: every rule is inside @media print. That tree was deleted from this
   repo on 2026-10-16 — read the original in git history with
   `git show c116f6f:vendor/oktum_dev/css/main.css`. */

@media print {
  /* Ink-light reset. The dark and accent bands exist to carry white text on
     screen; printed as-is they become ink-heavy slabs, so they flip back to
     paper and take dark text with them. */
  body {
    background: #fff;
    color: #000;
  }
  .section--dark,
  .section--accent,
  .section--band,
  .stats-band,
  .hero__media .ring,
  .footer,
  .footer__cta,
  .price-card--accent {
    background: #fff !important;
    color: #000 !important;
  }

  /* Links stay legible rather than printing their hrefs: the site is
     internal-link heavy and " (/url)" after every link is unreadable noise. */
  a { color: #000; }
  .footer__col a, .footer__col span { color: #333; }

  /* Reveal-on-scroll starts every .reveal at opacity:0 and only un-hides it
     when IntersectionObserver fires. Nothing scrolls in print, so without
     this the whole lower half of the page prints blank. */
  .reveal { opacity: 1 !important; transform: none !important; }

  /* Chrome: nav, drawer, burger, cookie banner and every call to action.
     .form-card is the lead form — its inputs would print as empty grey boxes,
     so it is hidden too; the .footer__cta heading and copy around it survive. */
  .nav,
  .nav-drawer,
  .burger,
  .nav__actions .btn,
  .btn,
  .cookie-banner,
  .marquee,
  .dots,
  .sol-tabs,
  .switcher__nav,
  .form-card {
    display: none !important;
  }

  /* The header keeps its logo and phone line — the printed page has to carry
     the number — but loses the sticky offset and the backdrop blur. */
  .header {
    position: static;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid #ccc;
  }
  .header__phone { color: #000; font-weight: 600; }

  /* Collapsed content: the FAQ, the switcher and the testimonial carousel all
     park their inactive panels on [hidden]. With the controls hidden, revealing
     the content is the only way it survives on paper. */
  .faq__a[hidden],
  .switcher__panel[hidden],
  .quote-card[hidden] {
    display: block !important;
  }

  /* Vertical rhythm and page breaks. The hero heading is targeted as .hero h1
     rather than .hero__title because the generated service pages carry
     class="h1" and never .hero__title. Full .section bands are deliberately
     left breakable — forcing avoid on a block taller than the sheet only
     produces white gaps. */
  .hero { min-height: auto; padding-block: var(--s-7); }
  .hero h1 { font-size: 2rem; color: #000; }
  .section { padding-block: var(--s-7); }
  .card,
  .price-card,
  .quote-card,
  .faq__item,
  .step {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  @page { margin: 2cm; }
}

/* --- 28. Without JavaScript --------------------------------------------
   Progressive enhancement. Every page ships class="no-js" on <html>; a one-line
   inline script in the head removes it before the first paint (build-pages.mjs
   and src/index.html), so everything below applies only when scripting is off
   and never flashes on the way in.

   The rule of thumb: a control that exists to be driven by a script is hidden
   rather than left dead, and content a script would have revealed is shown
   instead of staying at opacity 0. */

.no-js .reveal { opacity: 1; transform: none; }

/* Parked content. The tabbed blocks, the FAQ and the testimonial carousel mark
   their inactive panels [hidden] and a script un-hides them; with no script to
   do that, all of them are shown. The tab strips and the carousel dots go the
   other way — they are controls with no handler, the same call the print sheet
   makes for the same reason. */
.no-js .faq__a[hidden],
.no-js .switcher__panel[hidden],
.no-js .tab-panel[hidden],
.no-js .seg-panel[hidden],
.no-js .quote-card[hidden] { display: block; }

.no-js .tabs,
.no-js .seg-tabs,
.no-js .sol-tabs,
.no-js .switcher__nav,
.no-js .dots { display: none; }

/* The solutions circle on the homepage stacks four photos and swaps them when
   the tab strip above changes. With no tab strip and nothing to drive it, the
   circle keeps the photo the script would have selected first — the lock — and
   the four badges that mirror the tab strip are dropped. */
.no-js .sol-media__photo { opacity: 0; }
.no-js .sol-media__photo:first-child { opacity: 1; }
.no-js .sol-media__rotator { display: none; }

@media (max-width: 960px) {
  /* The drawer is not a drawer without a script — it is the navigation. So the
     burger, which has no handler to call, goes away, and the list is laid out
     as a wrapping row of the same links the desktop nav shows. */
  .no-js .burger { display: none; }

  /* The expanded list is taller than a phone viewport; sticky would pin most
     of the screen to the header. */
  .no-js .header { position: static; }

  .no-js .nav-drawer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--s-5);
  }
  .no-js .nav-drawer a { border-bottom: 0; }
  .no-js .nav-drawer .btn { flex: none; }
}