/* ==========================================================================
   ИТ поддръжка „Спойка“ (демонстрация) — design system.

   Hand-written and self-contained. No external font requests (validate.mjs
   fails any @import or src:url pointing off-origin): the display face is a
   system serif stack and the body face a system sans stack, both with
   Cyrillic coverage for a later mirror.

   THIS SHEET DEFINES ONLY WHAT THE SITE EMITS: every class below is printed
   by `_tools/site.cjs` or listed for page writers in `_tools/PAGES-BRIEF.md`
   §4, plus the few the application's markup borrows (.btn, .table-wrap,
   .two-col, .wrap--narrow). validate.mjs checks the other direction: every
   class a page carries has a rule here or in app.css.

   ------------------------------------------------------------ THE PALETTE

   A COMPANY THAT SELLS CALM: deep slate-navy ink, cream paper, warm brass,
   and slate blue as the second colour — the cream plaster, honey oak,
   slate-blue cable and brass of the pictures. Nothing on this site is a
   sale or an alarm, so the accent is a working colour (links, icons, rules,
   the button on a dark band), never a price cut, and red is kept for a
   refusal and the incident stop.

   --ink      slate navy: the dark bands — the top bar, page headers, the
              hero, the footer and every .section--ink.
   --seal     BRASS, DARK GROUNDS ONLY: links, icons, rules and the primary
              button on ink.
   --seal-dk  dark copper, the light-ground twin: eyebrows, icons, hovers.
   --char-2   slate blue: links on the light grounds.
   --brass    every price on a dark ground; --brass-dk on a light one.
   --cool-lt  the --cool note's ground (information, not money).
   --signal   red: form validation, a refusal and the incident stop, nothing
              else.

   Every text pair here measured 4.5:1 or better, and every button fill and
   icon 3:1 against its ground, before the sheet shipped (_tmp/palette-it.mjs
   reads these tokens and prints each pair; the hero and page-header scrims
   are computed over a WHITE pixel, because the sunlit plaster wall in the
   pictures can be white anywhere behind the text); audit.mjs and
   audit-live.mjs measure the built pages, because a pair nobody listed is
   the pair that fails.

   THE TOKENS app.css AND admin.css READ are all here and keep their names:
   --body --bone --bone-2 --brass-dk --brass-lt --char --char-2 --char-3
   --cool-ink --cool-lt --cool-strong --ink --line --line-2 --muted --paper
   --r --r-lg --sans --seal --seal-dk --seal-lt --serif --shadow --signal
   --signal-lt --urgent-ink --warm-ink --warm-line.

   THE HERO'S TWO CHILDREN ARE BOTH POSITIONED — see .hero-media img, video.
   A poster and a video in normal flow stack, and the clipped hero hides the
   video while every gate reports it playing (house rules §16).
   ========================================================================== */

:root {
  --ink:        #172230;   /* slate navy: the dark bands */
  --char:       #23384f;   /* the primary button on light grounds, the CTA band */
  --char-2:     #2b5175;   /* slate blue: links on light grounds */
  --char-3:     #6b7b8c;
  --seal:       #d9a557;   /* BRASS, dark grounds only */
  --seal-hi:    #f3d6a6;   /* lightened brass: TEXT on the hero and page-header scrims */
  --seal-dk:    #8a5212;   /* dark copper, the light-ground twin */
  --seal-lt:    #f5e6cc;
  --brass:      #f2dbb2;   /* prices on a dark ground */
  --brass-dk:   #7c470c;   /* prices on a light ground */
  --brass-lt:   #fbf3e4;
  --cool-lt:    #e9eff4;   /* the --cool note's ground */
  --signal:     #b3261e;   /* red: validation, a refusal, the incident stop */
  --signal-lt:  #fbe9e6;
  --bone:       #f3eee3;   /* a cream band, a shade under the paper */
  --bone-2:     #e8e0cf;
  --paper:      #fcf9f3;   /* cream paper */
  --line:       #ddd4c2;
  --line-2:     #bcb29e;
  --body:       #19212b;
  --muted:      #4a525d;
  --muted-lt:   #535b66;   /* small labels only */
  --warm-line:  #e3c48f;   /* border of the --warm advice note */
  --warm-ink:   #4a2b07;   /* its text */
  --cool-ink:   #1f3347;   /* the --cool note's text, on --cool-lt */
  --cool-strong:#121f2b;   /* its lead-in */
  --urgent-ink: #7a1e18;
  --on-ink:     rgba(255, 255, 255, .8);    /* body text on ink */
  --on-ink-lo:  rgba(255, 255, 255, .7);    /* small text on ink */
  --on-ink-line:rgba(255, 255, 255, .14);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --wrap: 1200px;
  --r: 4px;
  --r-lg: 8px;
  --shadow: 0 1px 2px rgba(23, 34, 48, .05), 0 8px 24px -12px rgba(23, 34, 48, .2);
  --shadow-lg: 0 2px 4px rgba(23, 34, 48, .06), 0 24px 48px -20px rgba(23, 34, 48, .3);
}

/* ------------------------------------------------------------------ base */

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

/* [hidden] MEANS HIDDEN (house rules §25.9). The UA's `[hidden] { display:
   none }` loses to any class that sets display, and an empty error box and
   a whole form once stayed on screen because of it. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--sans);
  /* 17/16 as a REM, so a reader's own default font size still scales it */
  font-size: 1.0625rem;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
/* AN INLINE ICON MUST BE INLINE (house rules §18): the reset above makes
   every svg a block, and a glyph at the start of a sentence then takes a
   line of its own. `.i` is only ever put on an icon. */
.i { display: inline-block; vertical-align: -.15em; flex: none; }

a { color: var(--char-2); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--seal-dk); }

h1, h2, h3, h4 {
  font-family: var(--serif);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -.012em;
  margin: 0 0 .55em;
}
h1 { font-size: clamp(2.15rem, 4.4vw, 3.4rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.6rem, 2.9vw, 2.35rem); }
h3 { font-size: 1.24rem; }
h4 { font-size: 1.02rem; }
p  { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 1.1em; padding-left: 1.15em; }
li { margin-bottom: .4em; }

/* `strong` darkens body copy on the light grounds, and a hard-coded ink would
   turn it invisible on every dark one. Dark components set --strong. */
strong { color: var(--strong, var(--ink)); font-weight: 650; }
hr { border: 0; border-top: 1px solid var(--line); margin: 3rem 0; }

::selection { background: var(--seal-lt); color: var(--ink); }

:focus-visible { outline: 2px solid var(--seal-dk); outline-offset: 3px; border-radius: 2px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 1.5rem; }
.wrap--narrow { max-width: 760px; }
@media (max-width: 640px) { .wrap { padding-inline: 1rem; } }

/* .sr — VISUALLY HIDDEN, STILL READ ALOUD. Not display:none, which removes
   it from the accessibility tree too. Every scroll box that can hold one is
   `position: relative` (house rules §37.7), or the span escapes it and
   widens the page. */
.sr {
  position: absolute !important;
  width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  --strong: #fff; background: var(--char); color: #fff; padding: .8rem 1.2rem; border-radius: 0 0 var(--r) 0;
}
.skip:focus { left: 0; }

.eyebrow {
  font-family: var(--sans); font-size: .745rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--seal-dk); margin: 0 0 .85rem;
}
.lead { font-size: clamp(1.06rem, 1.5vw, 1.22rem); line-height: 1.62; color: var(--body); }
.muted { color: var(--muted); }
.small { font-size: .86rem; line-height: 1.7; color: var(--muted); }
.small a { color: var(--seal-dk); }
.center { text-align: center; }

/* --------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--sans); font-size: .935rem; font-weight: 600; letter-spacing: .005em;
  padding: .78rem 1.4rem;
  border-radius: var(--r); border: 1px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: background-color .18s, color .18s, border-color .18s, transform .18s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn--lg { padding: .95rem 1.7rem; font-size: .95rem; }
/* A BUTTON MAY WRAP ON A NARROW PHONE (house rules §15): nowrap made a long
   label wider than a 320px screen. Ugly beats broken. */
@media (max-width: 420px) { .btn { white-space: normal; text-align: center; } }

.btn--primary { --strong: #fff; background: var(--char); color: #fff; border-color: var(--char); }
.btn--primary:hover { background: var(--char-2); border-color: var(--char-2); color: #fff; }
.btn--ghost { background: transparent; color: var(--char); border-color: var(--line-2); }
.btn--ghost:hover { background: var(--bone-2); color: var(--char); border-color: var(--char-3); }

/* THE PRIMARY BUTTON ON A DARK GROUND IS BRASS, NOT INK. A dark fill on a
   dark band measures fine as text and reads as a hole in the page. */
.hero .btn--primary, .section--ink .btn--primary, .cta-band .btn--primary, .pagehead .btn--primary {
  --strong: var(--ink); background: var(--seal); color: var(--ink); border-color: var(--seal);
}
.hero .btn--primary:hover, .section--ink .btn--primary:hover, .cta-band .btn--primary:hover, .pagehead .btn--primary:hover {
  background: var(--seal-lt); border-color: var(--seal-lt); color: var(--ink);
}
/* A GHOST BUTTON ON A DARK GROUND IS WHITE (house rules §34.6c). */
.hero .btn--ghost, .section--ink .btn--ghost, .cta-band .btn--ghost, .pagehead .btn--ghost {
  color: #fff; border-color: rgba(255, 255, 255, .45);
}
.hero .btn--ghost:hover, .section--ink .btn--ghost:hover, .cta-band .btn--ghost:hover, .pagehead .btn--ghost:hover {
  background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .7);
}

.btn-row { display: flex; flex-wrap: wrap; gap: .7rem; }
.table-wrap + p, p + .btn-row, .prose + .btn-row { margin-top: 1rem; }

.link-more {
  display: inline-flex; align-items: center; gap: .42rem;
  font-weight: 600; font-size: .93rem; color: var(--char-2); text-decoration: none;
}
.link-more:hover { color: var(--seal-dk); }
.link-more svg { transition: transform .18s; }
.link-more:hover svg { transform: translateX(3px); }

/* ---------------------------------------------------------------- top bar
   WHICH HALF OF THE STRIP SURVIVES A PHONE IS A DECISION (house rules
   §29.8), and here it is the DEMONSTRATION NOTICE: it may wrap but never
   shrink to zero, and the first conversation's line beside it is hidden
   below the breakpoint (it is in the drawer's foot and on the pricing page).
   THE BREAKPOINT IS A FUNCTION OF THE TWO SENTENCES (house rules §12): it was
   measured with these two sentences in system Chrome (_tmp/nav-measure.mjs,
   the top bar band), not inherited. */
.topbar {
  --strong: #fff;
  background: var(--ink); color: rgba(255, 255, 255, .78);
  font-size: .795rem; border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 40px; padding-block: .35rem; }
.topbar-left { display: flex; gap: 1.6rem; list-style: none; margin: 0; padding: 0; flex: 1 1 auto; min-width: 0; }
.topbar-left li { display: flex; align-items: center; gap: .42rem; margin: 0; min-width: 0; }
.topbar-demo span { min-width: 0; }
.topbar-demo svg, .topbar-note svg { color: var(--seal); flex: none; }
.topbar-note { display: flex; align-items: center; gap: .42rem; white-space: nowrap; flex: none; }
.topbar a { color: #fff; text-decoration: none; font-weight: 600; }
.topbar a:hover { color: var(--seal-lt); }
@media (max-width: 1099px) {
  .topbar-note { display: none; }
  .topbar .wrap { justify-content: center; }
  .topbar-left { flex: 1 1 100%; justify-content: center; }
  .topbar-left li { align-items: flex-start; text-align: left; white-space: normal; }
  .topbar-demo svg { margin-top: .22em; }
}

/* ---------------------------------------------------------------- header */

.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(252, 249, 243, .97);
  border-bottom: 1px solid var(--line);
}
/* NO backdrop-filter on the header: it would become the containing block of
   anything fixed inside it. The drawer is outside the header in the markup;
   this keeps it safe if that ever changes. */
.site-header .wrap { display: flex; align-items: center; gap: 1.5rem; min-height: 78px; }

/* A BRAND NAME IS A LAYOUT INPUT: the text may shrink, the mark may not. */
.brand { display: flex; align-items: center; gap: .72rem; text-decoration: none; flex: 0 1 auto; min-width: 0; color: var(--ink); }
.brand-mark { flex: none; color: var(--ink); }
.brand-text { display: flex; flex-direction: column; line-height: 1.16; min-width: 0; }
.brand-name { font-family: var(--serif); font-size: 1.22rem; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.brand-sub { font-size: .705rem; letter-spacing: .085em; text-transform: uppercase; color: var(--muted); margin-top: .22rem; white-space: nowrap; }

.nav { position: relative; display: flex; align-items: center; gap: .2rem; margin-left: auto; }
.nav-drop > button {
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: var(--sans); font-size: .935rem; font-weight: 550;
  color: var(--body); text-decoration: none;
  padding: .62rem .6rem; border-radius: var(--r);
  background: none; border: 0; cursor: pointer; line-height: 1;
  white-space: nowrap;
}
.nav-drop > button:hover { color: var(--char); background: var(--bone-2); }
.nav-drop { position: static; }
.nav-drop > button svg { transition: transform .2s; }
.nav-drop[data-open="true"] > button { color: var(--char); background: var(--bone-2); }
.nav-drop[data-open="true"] > button svg { transform: rotate(180deg); }

/* THE PANEL HANGS FROM THE NAV'S RIGHT EDGE AND GROWS LEFT (house rules
   §12): centred on its own button it runs off the screen the moment there
   are two dropdowns, and the nav sits at the right of the header. A closed
   panel is `visibility: hidden`, which does not remove it from the scroll
   extent — so its width never exceeds the room to its left. */
.nav-panel {
  position: absolute; top: calc(100% + 10px); right: 0; transform: translateY(-6px);
  width: min(46rem, calc(100vw - 3rem));
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 1.6rem 1.6rem 0;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s, transform .18s, visibility .18s;
}
.nav-panel > :last-child { margin-bottom: 0; }
.nav-panel-cols:last-child { padding-bottom: 1.6rem; }
.nav-drop[data-open="true"] .nav-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.nav-panel--single { width: min(26rem, calc(100vw - 3rem)); }
.nav-panel--two { width: min(36rem, calc(100vw - 3rem)); }
.nav-panel-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem 2rem; }
.nav-panel--single .nav-panel-cols { grid-template-columns: minmax(0, 1fr); }
.nav-panel--two .nav-panel-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nav-col-h {
  font-size: .715rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--seal-dk); margin: 0 0 .7rem; padding-bottom: .55rem; border-bottom: 1px solid var(--line);
}
.nav-col a { display: block; font-size: .9rem; color: var(--body); text-decoration: none; padding: .34rem 0; border-radius: 2px; line-height: 1.4; }
.nav-col a:hover { color: var(--char-2); }
.nav-col a[aria-current="page"] { color: var(--char-2); font-weight: 650; }
.nav-col--wide { grid-column: span 2; columns: 2; column-gap: 2rem; }
.nav-col--wide .nav-col-h { column-span: all; }
.nav-col--wide a { break-inside: avoid; }
.nav-panel-foot {
  display: flex; flex-wrap: wrap; gap: .6rem 1.6rem;
  margin: 1.4rem -1.6rem 0; padding: 1rem 1.6rem;
  background: var(--bone); border-top: 1px solid var(--line);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.nav-foot-item { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.nav-foot-item svg { color: var(--seal-dk); }

.header-cta { display: flex; align-items: center; gap: .55rem; flex: none; }
.header-cta .btn { padding: .68rem 1.1rem; font-size: .89rem; }
.burger {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  background: none; border: 1px solid var(--line-2); border-radius: var(--r);
  color: var(--char); cursor: pointer;
}

/* THE DESKTOP BAR FITS FROM 1024px WITH NOTHING WRAPPING: five short
   dropdown labels and one button, measured in system Chrome at 1024, 1100,
   1180, 1280, 1440 and 1680 against a page site.cjs renders in memory
   (_tmp/nav-measure.mjs: every button one line, the CTA inside the content
   edge, the lockup unsqueezed, no sideways scroll, every panel on screen). */
@media (max-width: 1023px) { .nav { display: none; } .burger { display: inline-flex; } .header-cta { margin-left: auto; } }
@media (max-width: 780px) {
  .header-cta .btn { display: none; }
  .site-header .wrap { min-height: 66px; }
  .brand-sub { display: none; }
  .brand-name { font-size: 1.08rem; line-height: 1.14; }
}

/* ---------------------------------------------------------------- drawer
   `overflow: hidden` IS THE LOAD-BEARING DECLARATION (house rules §15): the
   closed panel sits at translateX(100%), past the right edge, and
   `visibility: hidden` does not take it out of the scroll extent. The
   markup ships the drawer `hidden`; site.js removes the attribute to open
   it and puts it back once the close transition has run (§24.1). */
.drawer { position: fixed; inset: 0; z-index: 100; visibility: hidden; overflow: hidden; }
.drawer[data-open="true"] { visibility: visible; }
.drawer-veil { position: absolute; inset: 0; background: rgba(23, 34, 48, .55); opacity: 0; transition: opacity .25s; }
.drawer[data-open="true"] .drawer-veil { opacity: 1; }
.drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(380px, 88vw);
  background: var(--paper);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .28s cubic-bezier(.4, 0, .2, 1);
  overflow-y: auto;
}
.drawer[data-open="true"] .drawer-panel { transform: none; }
.drawer-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--line); flex: none; }
.drawer-close {
  width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--line); border-radius: var(--r); color: var(--char); cursor: pointer;
}
/* The call to action sits OUTSIDE the drawer's <nav>, so `.drawer-sub-nav a`
   cannot out-specify .btn--primary and set ink text on its ink fill. */
.drawer-cta { padding: 1rem 1.25rem 0; flex: none; }
.drawer-cta .btn { width: 100%; }
.drawer-sub-nav { padding: .5rem 1.25rem 1rem; flex: 1; }
.drawer-sub-nav ul { list-style: none; margin: 0; padding: 0; }
.drawer-sub-nav li { margin: 0; }
.drawer-sub-nav a {
  display: block; padding: .55rem 0; text-decoration: none;
  font-size: 1rem; font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--bone-2);
}
.drawer-sub-nav a[aria-current="page"] { color: var(--seal-dk); }
.drawer-sub { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--seal-dk); margin: 1.25rem 0 .35rem; }
.drawer-foot { padding: 1.25rem; border-top: 1px solid var(--line); background: var(--bone); flex: none; font-size: .92rem; }
.drawer-foot p { display: flex; align-items: flex-start; gap: .45rem; margin: 0 0 .5rem; }
.drawer-foot p:last-child { margin: 0; }
.drawer-foot svg { color: var(--seal-dk); margin-top: .25em; }

/* ------------------------------------------------------------------ hero
   (index only: .hero > .hero-media [img.hero-img + video[data-hero]],
   then .wrap.hero-inner, then .hero-stats) */

.hero { --strong: #fff; position: relative; background: var(--ink); color: #fff; overflow: hidden; }
.hero-media { position: absolute; inset: 0; }
/* BOTH CHILDREN ARE POSITIONED (house rules §16): two block children at
   100% stack, and the clipped hero hides the second. The poster stays the
   LCP element and never animates its own opacity. */
.hero-media img, .hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-img { width: 100%; height: 100%; object-fit: cover; }
/* THE SCRIM IS TUNED TO A WHITE PIXEL. The hero is a network closet in a
   former coat cupboard, with a sunlit cream plaster wall across the left
   third where the headline sits — sunlit plaster can be white anywhere
   behind the text, so the scrim assumes a WHITE pixel there: ink at .66
   over pure white is the lightest ground white text still reads on at
   4.5:1. The text column ends at about two thirds of the frame at 1024px,
   where the gradient is still above .7; past it the cupboard shows. Below
   1024px the column is the whole width, so the scrim is even. */
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(23, 34, 48, .9) 0%, rgba(23, 34, 48, .84) 55%, rgba(23, 34, 48, .58) 76%, rgba(23, 34, 48, .26) 100%),
    linear-gradient(to top, rgba(23, 34, 48, .6), transparent 42%);
}
@media (max-width: 1023px) {
  .hero-media::after { background: linear-gradient(to bottom, rgba(23, 34, 48, .84), rgba(23, 34, 48, .9)); }
  /* the phone's cover crop is the middle of the frame: the open network
     cabinet (where the take pushes in) sits at about 70 % of the width */
  .hero-media img, .hero-media video { object-position: 70% 50%; }
}
/* From 1280px the text column ends near the middle of the frame, so the
   scrim lifts sooner and the open cupboard shows on the right. The column's
   own band keeps at least .66. */
@media (min-width: 1280px) {
  .hero-media::after {
    background:
      linear-gradient(100deg, rgba(23, 34, 48, .88) 0%, rgba(23, 34, 48, .8) 44%, rgba(23, 34, 48, .66) 56%, rgba(23, 34, 48, .3) 72%, rgba(23, 34, 48, .08) 100%),
      linear-gradient(to top, rgba(23, 34, 48, .5), transparent 36%);
  }
}
/* PADDING-BLOCK, NOT THE SHORTHAND, and the column pinned to the wrap's own
   left edge (house rules §24.6): the shorthand zeroed the side gutter and
   `margin-inline: auto` centred the column away from the logo. */
.hero-inner {
  position: relative; z-index: 2;
  padding-block: clamp(4rem, 9vw, 7.5rem) clamp(3rem, 6vw, 5rem);
  max-width: 660px;
  margin-inline: max(0px, calc((100% - var(--wrap)) / 2)) auto;
}
.hero h1, .hero h2, .hero h3 { color: #fff; margin-bottom: .5em; }
/* text on the scrim is the LIGHTENED brass (_tmp/palette-it.mjs) */
.hero .eyebrow { color: var(--seal-hi); }
.hero .lead { color: rgba(255, 255, 255, .9); margin-bottom: 2rem; }
.hero .btn-row { margin-bottom: 2.2rem; }
.hero .gen-note { color: rgba(255, 255, 255, .82); }
.hero-meta {
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; gap: .6rem 1.9rem;
  list-style: none; margin: 1.6rem 0 0; padding: 0;
}
.hero-meta li { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: .9rem; color: rgba(255, 255, 255, .88); }
.hero-meta svg { color: var(--seal); }
/* As many columns as there are figures; an opaque ink cell by default so a
   strip dropped on a light section is still legible. */
.hero-stats {
  position: relative; z-index: 2; margin: 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  gap: 1px; background: var(--line-2); border-top: 1px solid var(--line-2);
}
.hero-stats > div { --strong: #fff; background: var(--ink); padding: 1.4rem 1.35rem; }
.hero .hero-stats { background: var(--on-ink-line); border-top-color: var(--on-ink-line); }
.hero .hero-stats > div { background: rgba(23, 34, 48, .9); }
.hero-stats dt { font-family: var(--serif); font-size: 1.6rem; color: var(--seal); line-height: 1.05; margin-bottom: .38rem; }
.hero-stats dd { margin: 0; font-size: .84rem; color: rgba(255, 255, 255, .78); line-height: 1.45; }
@media (max-width: 800px) {
  .hero-stats { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-stats > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* -------------------------------------------------------------- pagehead */

.pagehead {
  --strong: #fff; position: relative; background: var(--ink); color: #fff; overflow: hidden;
  padding: clamp(2.6rem, 5.5vw, 4.4rem) 0 clamp(2.2rem, 4.5vw, 3.4rem);
}
.pagehead-media { position: absolute; inset: 0; }
/* site.js writes --px inline as the page scrolls (±40px at most); the 1.08
   scale keeps the picture's edges outside the header while it drifts. */
.pagehead-media img { --px: 0px; width: 100%; height: 100%; object-fit: cover; transform: translate3d(0, var(--px), 0) scale(1.08); will-change: transform; }
/* The same white-pixel rule as the hero: the heading, the lead and the
   label line sit on ink at .76 or more wherever they reach. */
.pagehead-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(95deg, rgba(23, 34, 48, .94) 0%, rgba(23, 34, 48, .88) 48%, rgba(23, 34, 48, .7) 74%, rgba(23, 34, 48, .48) 100%);
}
@media (max-width: 1023px) { .pagehead-media::after { background: rgba(23, 34, 48, .86); } }
.pagehead .wrap { position: relative; z-index: 2; }
.pagehead h1 { color: #fff; max-width: 22ch; }
.pagehead .lead { color: rgba(255, 255, 255, .88); max-width: 62ch; }
.pagehead .eyebrow { color: var(--seal-hi); }
.pagehead .small, .pagehead .muted { color: rgba(255, 255, 255, .8); }
/* A link in a page header is WHITE and underlined: brass on the scrim where
   the lead ends (.7 over a white pixel) is under 4.5:1, white is not
   (_tmp/palette-it.mjs). */
.pagehead .small a, .pagehead a:not(.btn), .hero a:not(.btn) { color: #fff; text-decoration: underline; }
.pagehead .small a:hover, .pagehead a:not(.btn):hover, .hero a:not(.btn):hover { color: var(--seal-lt); }
.pagehead--plain { background: var(--char); }

.crumbs { margin-bottom: 1.5rem; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; font-size: .8rem; }
.crumbs li { margin: 0; color: rgba(255, 255, 255, .86); }
.crumbs li + li::before { content: "/"; margin-right: .4rem; color: rgba(255, 255, 255, .5); }
.pagehead .crumbs a { color: rgba(255, 255, 255, .9); text-decoration: none; }
.pagehead .crumbs a:hover { color: var(--seal-lt); }

.pagehead-meta { display: flex; flex-wrap: wrap; gap: .55rem 1.5rem; list-style: none; margin: 1.6rem 0 0; padding: 0; }
.pagehead-meta li { display: flex; align-items: center; gap: .45rem; margin: 0; font-size: .875rem; color: rgba(255, 255, 255, .88); }
.pagehead-meta svg { color: var(--seal); }

/* THE LABEL LINE under a header photograph (Регл. (ЕС) 2024/1689, чл. 50). */
.gen-note { display: flex; align-items: flex-start; gap: .4rem; margin: 1.4rem 0 0; font-size: .8rem; line-height: 1.5; color: var(--muted); }
.gen-note svg { margin-top: .15rem; color: var(--seal-dk); }
.pagehead .gen-note { color: rgba(255, 255, 255, .82); }
.pagehead .gen-note svg, .hero .gen-note svg { color: var(--seal); }

/* -------------------------------------------------------------- sections */

.section { padding: clamp(3.2rem, 6.5vw, 5.5rem) 0; }
.section--alt { background: var(--bone); }
.section--tight { padding: clamp(2.4rem, 4.5vw, 3.6rem) 0; }
.section--ink { --strong: #fff; background: var(--ink); color: var(--on-ink); }
.section--ink h2, .section--ink h3 { color: #fff; }
.section--ink a:not(.btn) { color: var(--seal); }
.section--ink a:not(.btn):hover { color: var(--seal-lt); }
.section--ink .eyebrow { color: var(--seal); }
.section--ink .lead { color: rgba(255, 255, 255, .86); }
.section--ink .small, .section--ink .muted { color: var(--on-ink-lo); }

.section-head { max-width: 68ch; margin-bottom: 2.6rem; }
.section-head.center { margin-inline: auto; }
.section-head p:last-child { margin-bottom: 0; }
.section-head--tight { margin: 2.2rem 0 1rem; }
.section-head--tight h3 { font-size: 1.32rem; margin: 0; }
.section-foot { margin: 2.2rem 0 0; }
.section-foot + h3, .section-foot + h2 { margin-top: 2.4rem; }

/* minmax(0, 1fr), NOT 1fr (house rules §12): a 1fr track has a min-content
   minimum, so a table that scrolls inside its own box grows the track and
   the whole page scrolls sideways instead. */
.grid { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); } }

/* ----------------------------------------------------------------- split */

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
/* Centring is right for a picture beside prose and wrong for two columns of
   prose, which read as misaligned: those opt into top alignment. */
.split--top { align-items: start; }
.split--rev .split-media { order: 2; }
.split-media img { width: 100%; height: auto; border-radius: var(--r-lg); }
.split-copy h2 { margin-bottom: .6em; }
@media (max-width: 860px) {
  .split { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .split--rev .split-media { order: 0; }
}
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.4rem); align-items: start; }
.two-col > div > h2 { margin-bottom: .7rem; }
.two-col img { border-radius: var(--r-lg); width: 100%; height: auto; }
@media (max-width: 860px) { .two-col { grid-template-columns: minmax(0, 1fr); } }

/* ----------------------------------------------------------------- cards */

.svc-card {
  display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; color: var(--body); min-width: 0;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.svc-card:hover { border-color: var(--line-2); box-shadow: var(--shadow); transform: translateY(-2px); }
.svc-card-media { display: block; }
.svc-card-media img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.svc-card-body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.svc-card h3 { margin-bottom: .45rem; font-size: 1.14rem; }
.svc-card h3 a { color: var(--ink); text-decoration: none; }
.svc-card h3 a:hover { color: var(--seal-dk); text-decoration: underline; }
.svc-card p { font-size: .92rem; color: var(--muted); margin-bottom: 1rem; }
.svc-card p:last-child { margin-bottom: 0; }
.svc-card .section-foot { margin-top: auto; padding-top: .4rem; }
.svc-card-tag {
  display: flex; align-items: center; gap: .4rem;
  font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--seal-dk); margin: 0 0 .6rem;
}
/* A PRICE TAG IS READ, NOT SHOUTED: a plan's per-person price and its tax
   words in sentence case, the price in the light-ground price colour. */
.svc-card-tag--price { align-items: flex-start; font-size: .84rem; letter-spacing: 0; text-transform: none; font-weight: 600; color: var(--brass-dk); line-height: 1.45; }
.svc-card-tag--price svg { margin-top: .2em; }
.svc-card--plain { background: var(--paper); }
.section--alt .svc-card--plain { background: var(--paper); }

.info-card {
  background: var(--bone); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.7rem;
  min-width: 0; overflow-wrap: anywhere; color: var(--body);
}
.section--alt .info-card { background: var(--paper); }
@media (max-width: 380px) { .info-card { padding: 1.15rem; } }
.info-card + .info-card { margin-top: 1.25rem; }
/* stacked cards are spaced; cards in a grid row share one top line (§36.6) */
.grid > .info-card + .info-card { margin-top: 0; }
.info-card h3 { font-size: 1.1rem; margin-bottom: .7rem; }
.info-card p { font-size: .93rem; }

/* A card's own small heading and its list (S.areaList: "What we would look
   at first" and its three items; S.planCards: the price без ДДС, the ДДС
   and the price с ДДС, and what each includes). */
.card-sub { margin: 1rem 0 .4rem; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--seal-dk); }
.card-list { list-style: none; margin: 0; padding: 0; }
.card-list li { position: relative; margin: 0 0 .35rem; padding-left: 1.1rem; font-size: .9rem; color: var(--body); }
.card-list li::before { content: ""; position: absolute; left: .1rem; top: .62em; width: .4rem; height: .4rem; border-radius: 1px; background: var(--seal-dk); }

/* ------------------------------------------------------------------ team */

.team-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; color: var(--body); min-width: 0; }
.team-photo { display: block; }
.team-photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.team-card-body { padding: 1.35rem 1.45rem 1.6rem; }
.team-card h3 { font-size: 1.1rem; margin-bottom: .18rem; }
.team-role { font-size: .875rem; color: var(--char-2); font-weight: 600; margin: 0 0 .7rem; }
.team-card p { font-size: .93rem; }
.team-card .small { margin: 0 0 .5rem; }
.team-shot { display: flex; align-items: flex-start; gap: .35rem; margin: .8rem 0 0; color: var(--muted-lt); }
.team-shot svg { color: var(--seal-dk); margin-top: .2em; }

/* ----------------------------------------------------------------- lists */

.checklist { list-style: none; margin: 0 0 1.2em; padding: 0; }
.checklist li { display: flex; align-items: flex-start; gap: .6rem; margin-bottom: .6rem; font-size: .96rem; }
.checklist svg { color: var(--seal-dk); margin-top: .3em; }
/* the cross is the refusal red, so the two lists differ by more than a shape */
.checklist--no svg { color: var(--signal); }

.deflist { list-style: none; margin: 0; padding: 0; }
.prose + .deflist, .deflist + .prose { margin-top: 1.8rem; }
.deflist > li { padding: 1.15rem 0; border-bottom: 1px solid var(--line); margin: 0; }
.deflist > li:first-child { padding-top: 0; }
.deflist > li:last-child { border-bottom: 0; padding-bottom: 0; }
.deflist h3 { font-family: var(--sans); font-size: 1rem; font-weight: 650; color: var(--ink); margin-bottom: .3rem; }
.deflist p { font-size: .95rem; color: var(--muted); margin: 0; }

.numbered { list-style: none; counter-reset: step; margin: 0; padding: 0; }
.numbered > li { counter-increment: step; position: relative; padding-left: 3.4rem; margin-bottom: 1.7rem; }
.numbered > li:last-child { margin-bottom: 0; }
.numbered > li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: -.1rem;
  font-family: var(--serif); font-size: 1.35rem; color: var(--seal-dk);
  border-right: 1px solid var(--line); padding-right: .85rem; width: 2.55rem; text-align: right;
}
.numbered h3 { font-size: 1.08rem; margin-bottom: .3rem; }
.numbered p { font-size: .95rem; color: var(--muted); margin: 0; }
/* A preparation list (S.prepList): one plain sentence an item. */
.numbered--plain > li { margin-bottom: 1rem; padding-top: .15rem; }
.numbered--plain > li::before { font-size: 1.1rem; top: .05rem; }
.numbered--plain p { font-size: 1rem; color: var(--body); }

.link-list { list-style: none; margin: 0; padding: 0; }
.link-list li { padding: .7rem 0; border-bottom: 1px solid var(--line); margin: 0; font-size: .95rem; color: var(--muted); }
.link-list li:last-child { border-bottom: 0; }
.link-list .small { display: block; margin-top: .2rem; }

/* A list of sentences, each a statement (a boundary's facts): a mark, not a number. */
.fact-list { list-style: none; margin: 0 0 1.2em; padding: 0; }
.fact-list li { position: relative; margin: 0; padding: .7rem 0 .7rem 1.4rem; border-bottom: 1px solid var(--line); font-size: .97rem; color: var(--body); }
.fact-list li:last-child { border-bottom: 0; }
.fact-list li::before { content: ""; position: absolute; left: .2rem; top: 1.3rem; width: .45rem; height: .45rem; border-radius: 1px; background: var(--seal-dk); }

.chips { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.chips li { margin: 0; font-size: .85rem; color: var(--body); padding: .38rem .8rem; border: 1px solid var(--line-2); border-radius: 999px; background: var(--paper); }
.chips a { color: var(--char-2); text-decoration: none; }
.chips a:hover { color: var(--seal-dk); text-decoration: underline; }

/* ------------------------------------------------------------------- faq */

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
  padding: 1.25rem 0; cursor: pointer; list-style: none;
  font-family: var(--serif); font-size: 1.1rem; font-weight: 600; color: var(--ink); line-height: 1.34;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 11px; height: 11px; margin-top: .42em;
  border-right: 1.5px solid var(--seal-dk); border-bottom: 1.5px solid var(--seal-dk);
  transform: rotate(45deg); transition: transform .2s;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq summary:hover { color: var(--char-2); }
.faq-body { padding: 0 0 1.35rem; max-width: 78ch; }
.faq-body p { font-size: .96rem; color: var(--muted); margin: 0; }

/* ------------------------------------------------------------------ cta */

.cta-band { --strong: #fff; background: var(--char); color: rgba(255, 255, 255, .84); padding: clamp(2.8rem, 5vw, 4rem) 0; }
.cta-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: center; }
.cta-band h2 { color: #fff; margin-bottom: .5em; }
.cta-band .lead { color: rgba(255, 255, 255, .86); max-width: 62ch; margin: 0; }
@media (max-width: 860px) { .cta-inner { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------- advice note
   Four kinds. --warm is a promise the company keeps (the first
   conversation, the agreement that does not renew itself, the handover when
   it ends, paying after the month); --cool is information, on a cool
   gray-blue ground; --warn is the quiet, definite "read this properly" (the
   demonstration, the license line, a sector's own duties, the limits) —
   neutral, because a qualification on every page shown in red would leave
   red meaning nothing; --urgent is the refusal red, and only one standing
   note wears it: S.incidentNote() (stop here: something happening right
   now is not a health check). Every note carries its own light ground, so
   each restates its own text colour and --strong. */
.advice-note {
  --strong: var(--ink);
  display: flex; align-items: flex-start; gap: .65rem;
  background: var(--bone); border: 1px solid var(--line); border-left: 3px solid var(--seal-dk);
  border-radius: var(--r); padding: 1rem 1.2rem;
  font-size: .9rem; color: var(--body); line-height: 1.6;
  margin: 2.4rem 0 0;
}
.advice-note p { margin: 0; min-width: 0; }
.advice-note svg { color: var(--seal-dk); margin-top: .2em; }
.advice-note + .advice-note { margin-top: 1rem; }
.advice-note + .prose, .advice-note + .grid, .advice-note + .fact-list, .advice-note + .checklist, .advice-note + .deflist, .advice-note + .link-list, .prose + .advice-note { margin-top: 1.4rem; }
.advice-note--lead { margin: 0 0 1.8rem; }
.advice-note--warm { background: var(--seal-lt); border-color: var(--warm-line); border-left-color: var(--seal-dk); color: var(--warm-ink); }
.advice-note--cool { --strong: var(--cool-strong); background: var(--cool-lt); border-color: var(--line); border-left-color: var(--char-2); color: var(--cool-ink); }
.advice-note--cool svg { color: var(--char-2); }
.advice-note--warn { background: var(--bone-2); border-color: var(--line-2); border-left-color: var(--ink); color: var(--body); }
.advice-note--warn svg { color: var(--ink); }
.advice-note--urgent { --strong: #5a1611; background: var(--signal-lt); border-color: var(--signal); border-left: 4px solid var(--signal); color: var(--urgent-ink); }
.advice-note--urgent svg { color: var(--signal); }
.advice-note a { color: inherit; font-weight: 600; }

/* ----------------------------------------------------------------- tables
   EVERY TABLE IS INSIDE .table-wrap, which scrolls on a phone rather than
   widening the page, and is `position: relative` so an .sr span inside a
   table cannot escape it (house rules §37.7). A `.num` cell is right-aligned
   and MAY WRAP: a range breaks at its "to" (§37.7). */
.table-wrap { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 1.4rem; }
.table-wrap > table { min-width: 22rem; }
.rate-table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.rate-table caption { caption-side: top; text-align: left; padding-bottom: .7rem; line-height: 1.5; }
.rate-table th, .rate-table td { text-align: left; padding: .62rem .8rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.rate-table th:first-child, .rate-table td:first-child { padding-left: 0; }
.rate-table th:last-child, .rate-table td:last-child { padding-right: 0; }
.rate-table thead th { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-lt); font-weight: 700; border-bottom-color: var(--line-2); vertical-align: bottom; }
.rate-table tbody th { font-weight: 620; color: var(--ink); }
.rate-table td { color: var(--body); font-variant-numeric: tabular-nums; }
.rate-table .num { text-align: right; }
.rate-table td.num { color: var(--brass-dk); font-weight: 650; }
/* A FIGURE COLUMN HAS A FLOOR (house rules §32.4 #3, §37.7): a range may break
   at its "to", never between a figure and its "to". */
.rate-table td.num { min-width: 6.4rem; }
.rate-table tbody tr:last-child th, .rate-table tbody tr:last-child td { border-bottom: 0; }
/* An answer the health check refuses (S.bandsTable): said in words, in the refusal red. */
.rate-table tr.zone-refused th { color: var(--muted); font-weight: 500; }
.rate-table tr.zone-refused td { color: var(--signal); }
/* The head of a row group (S.bandTable: one plan's rows). */
.rate-table tr.rate-group th {
  padding: 1.1rem 0 .5rem; font-family: var(--serif); font-size: 1.02rem; font-weight: 600; line-height: 1.4;
  color: var(--ink); border-bottom: 1px solid var(--line-2); white-space: normal; text-wrap: pretty;
}
.rate-table tbody tr.rate-group:first-child th { padding-top: .4rem; }
/* The tax rule in words (S.extrasTable): a sentence, not a figure. */
.rate-table td.tax-rule { color: var(--muted); font-size: .88rem; }

.hours-table { width: 100%; border-collapse: collapse; font-size: .91rem; }
.hours-table caption { caption-side: top; text-align: left; padding-bottom: .6rem; }
.hours-table th, .hours-table td { text-align: left; padding: .45rem 0; border-bottom: 1px solid var(--line); }
.hours-table th { font-weight: 600; color: var(--ink); }
.hours-table td { color: var(--muted); text-align: right; }
.hours-table tr:last-child th, .hours-table tr:last-child td { border-bottom: 0; }
.hours-table tr[data-today="true"] th, .hours-table tr[data-today="true"] td { color: var(--ink); font-weight: 700; }

/* ------------------------------------------------- the worked example
   S.sampleSummary(): a kicker that says what the card is before anything
   else on it does („пример: обобщение на ИТ преглед“), the
   answers it was computed from (folded), the open line, the areas to talk
   about (.sum-areas, each with its first looks), or the quiet line; the
   sector note and the GDPR note; the plans (.sum-plan: без ДДС, ДДС 20 %,
   с ДДС, .sum-rows); the onboarding, once; the notes from
   the answers (.sum-flags); and the fixed notice. BOTH ENDS OF EVERY RANGE
   ARE IN ONE .num SPAN, at one size. NEVER A SCORE, A
   NUMBER OF POINTS, A COLOUR SCALE OR A RANK: the areas are a plain list in
   the answers' own order, and no area is coloured differently from another.
   `.sum-rows li.sum-total`, never a bare `.sum-total`: the bare class loses
   to `.sum-rows li` (house rules §22). */
.sum {
  --strong: var(--ink);
  border: 1px solid var(--line); border-left: 3px solid var(--brass-dk);
  border-radius: var(--r); background: var(--bone); color: var(--body);
  padding: 1.15rem 1.3rem 1.25rem; margin: 1.6rem 0; min-width: 0;
}
.section--alt .sum { background: var(--paper); }
.grid > .sum { margin: 0; }
.sum-kicker { display: flex; align-items: center; gap: .4rem; margin: 0 0 .45rem; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--seal-dk); }
.sum-h { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .55rem; row-gap: .1rem; margin: 0 0 .6rem; font-family: var(--serif); font-size: 1.12rem; font-weight: 600; color: var(--ink); line-height: 1.3; }
.sum-h .muted { font-family: var(--sans); font-weight: 400; color: var(--muted); }
.sum-answers { margin: 0 0 .8rem; font-size: .86rem; color: var(--muted); }
.sum-answers summary { cursor: pointer; color: var(--char-2); font-weight: 600; list-style-position: inside; }
.sum-answers summary:hover { color: var(--seal-dk); }
.sum-qa { margin: .6rem 0 0; display: grid; gap: .35rem; }
.sum-qa > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .1rem .9rem; padding-bottom: .35rem; border-bottom: 1px dotted var(--line); }
.sum-qa > div:last-child { border-bottom: 0; }
.sum-qa dt { color: var(--muted); }
.sum-qa dd { margin: 0; color: var(--body); }
@media (max-width: 520px) { .sum-qa > div { grid-template-columns: minmax(0, 1fr); } }
/* A part's own heading inside the card, and the sentence under it. */
.sum-sub { margin: 1.05rem 0 .35rem; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.sum-lead { margin: 0 0 .5rem; font-size: .86rem; color: var(--muted); }
/* The areas: a plain list in the answers' own order — a disc, not a number. */
.sum-areas { list-style: none; margin: 0; padding: 0; }
.sum-areas > li { margin: 0 0 .75rem; padding: 0 0 .7rem; border-bottom: 1px dotted var(--line); font-size: .9rem; color: var(--body); }
.sum-areas > li:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.sum-area-name { display: block; margin: 0 0 .2rem; font-weight: 650; color: var(--ink); font-size: .95rem; }
.sum-areas p { margin: 0 0 .35rem; font-size: .88rem; color: var(--body); }
.sum-areas .sum-lead { margin: .35rem 0 .25rem; font-size: .8rem; }
.sum-first { list-style: none; margin: 0; padding: 0; font-size: .86rem; }
.sum-first li { position: relative; margin: 0 0 .25rem; padding-left: 1rem; color: var(--muted); }
.sum-first li::before { content: ""; position: absolute; left: .1rem; top: .62em; width: .36rem; height: .36rem; border-radius: 1px; background: var(--seal-dk); }
.sum-text { margin: 0 0 .5rem; font-size: .88rem; color: var(--body); }
/* One plan inside the card: its name and per-person price, then its lines. */
.sum-plan { margin: 0 0 .9rem; padding: .7rem .85rem .6rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); }
.section--alt .sum-plan { background: var(--bone); }
.sum-plan:last-of-type { margin-bottom: .4rem; }
.sum-plan-h { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .1rem .8rem; margin: 0 0 .25rem; font-weight: 650; color: var(--ink); font-size: .95rem; }
.sum-plan-h span:last-child { font-weight: 600; color: var(--brass-dk); font-size: .86rem; }
.sum-covers { margin: .4rem 0 0; font-size: .8rem; color: var(--muted); }
.sum-rows { list-style: none; margin: 0; padding: 0; font-size: .9rem; }
/* The label and the figure on one line; the label column has a floor so a
   long figure never squeezes it to a letter a line (house rules §32.4 #3). */
.sum-rows li {
  display: grid; grid-template-columns: minmax(7.5rem, 1fr) auto; gap: .1rem 1rem; align-items: baseline;
  padding: .3rem 0; border-bottom: 1px dotted var(--line); margin: 0; color: var(--body);
}
.sum-rows li span:first-child { min-width: 0; overflow-wrap: anywhere; color: var(--body); }
.sum-rows .num { font-variant-numeric: tabular-nums; text-align: right; color: var(--brass-dk); font-weight: 650; white-space: normal; max-width: 15rem; }
.sum-rows li.sum-total { border-bottom: 0; border-top: 1px solid var(--line-2); margin-top: .2rem; padding-top: .45rem; }
.sum-rows li.sum-total span:first-child { font-weight: 650; color: var(--ink); }
.sum-rows li.sum-total .num { color: var(--ink); font-weight: 700; }
@media (max-width: 420px) { .sum-rows li { grid-template-columns: minmax(0, 1fr) auto; } .sum-rows .num { max-width: 10rem; } }
.sum-flags { list-style: none; margin: .2rem 0 0; padding: 0; font-size: .86rem; }
.sum-flags li { display: flex; align-items: flex-start; gap: .45rem; margin: 0 0 .45rem; color: var(--body); }
.sum-flags svg { color: var(--seal-dk); margin-top: .22em; }
.sum-note { margin: .9rem 0 0; padding-top: .7rem; border-top: 1px solid var(--line); font-size: .85rem; color: var(--muted); }

/* ------------------------------------------------------------- pictures
   EVERY PICTURE IS LABELED (Регл. (ЕС) 2024/1689, чл. 50): on the picture (.gen-wrap with a
   .gen-tag), or for a page header and a wide figure in a line beside it. */
.gen-wrap { position: relative; display: block; }
.gen-wrap > img { display: block; width: 100%; height: auto; }
.gen-tag {
  position: absolute; left: .5rem; bottom: .5rem; max-width: calc(100% - 1rem);
  background: rgba(23, 34, 48, .82); color: #fff;
  font-size: .68rem; line-height: 1.35; padding: .22rem .5rem; border-radius: 3px;
}
.figure-wide { margin: 0 0 1.4rem; }
.figure-wide img { width: 100%; height: auto; border-radius: var(--r-lg); }
.figure-wide figcaption { margin-top: .45rem; }
.split-media .gen-wrap img, .two-col .gen-wrap img { border-radius: var(--r-lg); }

/* ------------------------------------------------------------- prose */

.prose { max-width: 74ch; }
.prose h2 { margin-top: 2.6rem; font-size: 1.5rem; }
.prose h3 { margin-top: 1.9rem; font-size: 1.13rem; font-family: var(--sans); font-weight: 650; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: .5em; }
.wrap--narrow + .wrap--narrow > .prose:first-child { margin-top: 1rem; }
.prose + .prose { margin-top: 1.1em; }

/* ---------------------------------------------------------------- 404 */

.err { text-align: center; padding: clamp(4rem, 10vw, 8rem) 0; }
.err-code { font-family: var(--serif); font-size: clamp(4rem, 12vw, 8rem); line-height: 1; color: var(--seal-dk); margin-bottom: .3rem; }

/* ==========================================================================
   THE DARK BAND. A component with its own light ground keeps its own ink
   inside .section--ink (house rules §15, §19, §29.8: a light card under a
   blanket dark-ground rule draws white headings on white paper, and there
   is nothing to see because there is nothing there). Every component that
   sets its own --paper or --bone is listed here: .svc-card, .info-card,
   .team-card, .sum (and .sum-plan inside it), .advice-note (which restates
   its own colours per kind above) and .chips' links. And every component
   that sits directly on the band restates its colours for it.
   ========================================================================== */
.section--ink :is(.svc-card, .info-card, .team-card, .sum) { --strong: var(--ink); color: var(--body); }
.section--ink :is(.svc-card, .info-card, .team-card) :is(h3, h3 a) { color: var(--ink); }
.section--ink :is(.svc-card, .info-card, .team-card, .sum) :is(p, .small, .muted, .sum-note, .sum-answers, .sum-lead, .sum-covers) { color: var(--muted); }
.section--ink :is(.svc-card, .info-card, .team-card, .sum) a:not(.btn) { color: var(--char-2); }
.section--ink :is(.svc-card, .info-card, .team-card, .sum) :is(.svc-card-tag, .sum-kicker, .team-shot svg, .link-more, .card-sub) { color: var(--seal-dk); }
.section--ink .svc-card .svc-card-tag--price { color: var(--brass-dk); }
.section--ink .info-card .card-list li { color: var(--body); }
.section--ink .sum-h, .section--ink .sum .sum-area-name, .section--ink .sum .sum-plan-h, .section--ink .sum p.sum-sub { color: var(--ink); }
.section--ink .sum .sum-areas p, .section--ink .sum p.sum-text { color: var(--body); }
.section--ink .sum .sum-plan-h span:last-child { color: var(--brass-dk); }
.section--ink .sum-rows li span:first-child { color: var(--body); }
.section--ink .sum-rows .num { color: var(--brass-dk); }
.section--ink .sum-rows li.sum-total span:first-child, .section--ink .sum-rows li.sum-total .num { color: var(--ink); }
.section--ink .sum-flags li { color: var(--body); }
.section--ink .team-role { color: var(--char-2); }

.section--ink .checklist svg, .section--ink .numbered > li::before { color: var(--seal); }
.section--ink .numbered > li::before { border-right-color: var(--on-ink-line); }
.section--ink :is(.numbered, .deflist) h3 { color: #fff; }
.section--ink :is(.numbered, .deflist) p, .section--ink .numbered--plain p { color: var(--on-ink); }
.section--ink .deflist > li { border-bottom-color: var(--on-ink-line); }
.section--ink .faq, .section--ink .faq details { border-color: var(--on-ink-line); }
.section--ink .faq summary { color: #fff; }
.section--ink .faq summary::after { border-color: var(--seal); }
.section--ink .faq-body p { color: var(--on-ink); }
.section--ink .link-list li { color: var(--on-ink-lo); border-bottom-color: var(--on-ink-line); }
.section--ink .fact-list li { color: var(--on-ink); border-bottom-color: var(--on-ink-line); }
.section--ink .fact-list li::before { background: var(--seal); }
.section--ink .chips li { border-color: rgba(255, 255, 255, .26); color: var(--on-ink); background: rgba(255, 255, 255, .05); }
.section--ink .chips a { color: var(--seal); }
.section--ink .rate-table thead th { color: var(--on-ink-lo); border-bottom-color: rgba(255, 255, 255, .26); }
.section--ink .rate-table tbody th { color: #fff; }
.section--ink .rate-table td { color: var(--on-ink); }
.section--ink .rate-table td.num { color: var(--brass); }
.section--ink .rate-table td.tax-rule { color: var(--on-ink-lo); }
.section--ink .rate-table th, .section--ink .rate-table td { border-bottom-color: var(--on-ink-line); }
.section--ink .rate-table tr.zone-refused th { color: var(--on-ink-lo); }
.section--ink .rate-table tr.zone-refused td { color: var(--seal); }
.section--ink .rate-table tr.rate-group th { color: #fff; border-bottom-color: rgba(255, 255, 255, .26); }
.section--ink .hours-table th { color: #fff; }
.section--ink .hours-table td { color: var(--on-ink-lo); }
.section--ink .hours-table th, .section--ink .hours-table td { border-bottom-color: var(--on-ink-line); }
.section--ink .hours-table tr[data-today="true"] th, .section--ink .hours-table tr[data-today="true"] td { color: var(--seal); }
.section--ink .gen-note, .section--ink .figure-wide figcaption { color: var(--on-ink-lo); }
.section--ink .gen-note svg { color: var(--seal); }
.section--ink .team-shot { color: var(--muted-lt); }

/* --------------------------------------------------------------- footer */

.site-footer { --strong: #fff; background: var(--ink); color: rgba(255, 255, 255, .74); padding: clamp(3rem, 6vw, 4.5rem) 0 2rem; font-size: .92rem; }
.site-footer .brand, .site-footer .brand-mark, .site-footer .brand-name { color: #fff; }
.site-footer .brand-sub { color: rgba(255, 255, 255, .7); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 2.5rem; padding-bottom: 2.6rem; border-bottom: 1px solid rgba(255, 255, 255, .12); }
@media (max-width: 980px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; } }
@media (max-width: 600px) { .footer-grid { grid-template-columns: minmax(0, 1fr); } }
.footer-brand .brand { margin-bottom: 1.1rem; }
.footer-brand p { font-size: .89rem; color: rgba(255, 255, 255, .72); max-width: 44ch; }
.site-footer h4 { color: #fff; font-family: var(--sans); font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 1rem; }
.site-footer h4 + .hours-table { margin-top: 0; }
.footer-contact h4:not(:first-child) { margin-top: 1.6rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .48rem; font-size: .875rem; }
.site-footer a { color: rgba(255, 255, 255, .78); text-decoration: none; }
.site-footer a:hover { color: var(--seal); }
.footer-contact li { display: flex; align-items: flex-start; gap: .55rem; min-width: 0; overflow-wrap: anywhere; }
.footer-contact svg { color: var(--seal); margin-top: .2em; }
/* THE FOOTER IS A DARK BAND TOO (house rules §19): the hours table's ink
   headings were ink on ink here once, 800 failures in one audit. */
.site-footer .hours-table caption, .site-footer .small { color: rgba(255, 255, 255, .7); }
.site-footer .hours-table th { color: #fff; }
.site-footer .hours-table td { color: rgba(255, 255, 255, .74); }
.site-footer .hours-table th, .site-footer .hours-table td { border-bottom-color: rgba(255, 255, 255, .12); }
.site-footer .hours-table tr[data-today="true"] th, .site-footer .hours-table tr[data-today="true"] td { color: var(--seal); }
.footer-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.6rem 0 1.2rem; font-size: .8rem; color: rgba(255, 255, 255, .7); }
.footer-bar ul { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; }
.footer-bar li { margin: 0; font-size: .8rem; }
.footer-disclaimer {
  display: block; font-size: .8rem; line-height: 1.62; color: rgba(255, 255, 255, .7);
  border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 1.1rem; margin: 0 0 1.1rem; max-width: 100ch;
}
.footer-disclaimer:last-child { margin-bottom: 0; }
.footer-disclaimer svg { color: var(--seal); margin-right: .25rem; }
.footer-disclaimer strong { color: rgba(255, 255, 255, .92); }
.footer-disclaimer a { color: var(--seal); text-decoration: underline; }

/* ------------------------------------------------------------- motion
   site.js adds .rv only to elements BELOW THE FOLD AT LOAD and reveals them
   with a scroll sweep, so nothing above the fold is ever hidden and a failed
   script hides nothing. Transforms and opacity only. Off under reduced
   motion. */
.rv { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
.rv.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  .pagehead-media img { transform: none; }
}

/* ------------------------------------------------------------- printing */

@media print {
  .topbar, .site-header, .drawer, .cta-band, .site-footer, .hero-media, .pagehead-media { display: none !important; }
  .pagehead, .hero { background: none; color: #000; }
  .pagehead h1, .hero h1 { color: #000; }
  body { font-size: 11pt; color: #000; background: #fff; }
  a { text-decoration: none; color: #000; }
  .sum-answers > *:not(summary) { display: block; }
}

/* A grid of cards followed by prose or links in the same section needs the
   section's own rhythm between them (the home page's service bands). */
.grid + .prose, .grid + .link-list, .grid + .section-foot { margin-top: 2.25rem; }
/* A table that follows prose or a split, and prose that follows a table, keep
   the same gap (the pricing page's tables and its worked examples). */
.prose + .table-wrap, .split + .table-wrap, .table-wrap + .prose, .table-wrap + .table-wrap, .advice-note + .table-wrap { margin-top: 2rem; }
.prose + .checklist, .prose + .deflist, .prose + .fact-list { margin-top: .9rem; }