@charset "utf-8";
/* Assembled: direction "counsel" tokens + design override + minimal base + ai-fallback + AI design.css + font tokens; dark-mode stripped (light-only). Generated — do not edit. */

/* self-hosted webfonts (from spec.meta.design.fontPair — resolve-fonts) */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/montserrat-400-cyrillic-ext.woff2) format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/montserrat-400-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/montserrat-400-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/montserrat-400-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/montserrat-600-cyrillic-ext.woff2) format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/montserrat-600-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/montserrat-600-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/montserrat-600-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/cormorant-600-cyrillic-ext.woff2) format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Cormorant";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/cormorant-600-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Cormorant";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/cormorant-600-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cormorant";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/cormorant-600-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/cormorant-700-cyrillic-ext.woff2) format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Cormorant";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/cormorant-700-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Cormorant";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/cormorant-700-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cormorant";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/cormorant-700-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Family: COUNSEL — lawyers, notaries, accountants, consultants, insurance, architects.
   Restrained and editorial: warm paper, near-black ink, an oxblood brand used sparingly,
   a serif for headings and body, square corners, almost no shadow, a narrow reading column.
   Built for a minimal type-only hero and a stats strip.
   Light only (generated sites ship light; build-style strips any dark block). Token VALUES are the
   family default; the model's design.css tunes them per site and build-style re-runs the gate.
   Contrast: WCAG AA, checked by `build-style.mjs --check counsel` (gate + family audit). */

:root {
  --brand:        #7a2232;
  --brand-strong: #5c1925;
  --brand-soft:   #f4e8ea;
  --on-brand:     #ffffff;

  --bg:        #f4f1ea;
  --surface:   #ffffff;
  --surface-2: #f1efe9;
  --border:    #dcd8cd;

  --text:        #1b1d22;
  --text-muted:  #4b4f58;
  --text-subtle: #6a6e77;

  --ok:     #2c6a3f;
  --warn:   #7f4f05;
  --danger: #a3201c;

  --surface-inverse:   #151a24;
  --surface-inverse-2: #222a38;
  --on-inverse:        #eef0f4;

  --font: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", "Noto Serif", serif;
  --font-display: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", "Noto Serif", serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --step--1: clamp(0.85rem, 0.82rem + 0.12vw, 0.92rem);
  --step-0:  clamp(1.03rem, 0.99rem + 0.2vw, 1.12rem);
  --step-1:  clamp(1.2rem, 1.1rem + 0.45vw, 1.45rem);
  --step-2:  clamp(1.42rem, 1.25rem + 0.8vw, 1.9rem);
  --step-3:  clamp(1.75rem, 1.4rem + 1.6vw, 2.7rem);
  --step-4:  clamp(2.2rem, 1.5rem + 3.2vw, 4.2rem);
  --leading-tight: 1.15;
  --leading: 1.7;

  --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem;
  --sp-4: 1rem;    --sp-5: 1.5rem;  --sp-6: 2rem;
  --sp-7: 3rem; --sp-8: 4.25rem; --sp-9: 6rem;

  --radius: 0;
  --radius-lg: 2px;
  --radius-full: 999px;

  --shadow-1: 0 1px 0 rgb(27 29 34 / 0.06);
  --shadow-2: 0 2px 8px rgb(27 29 34 / 0.06);

  --measure: 62ch;
  --container: 1040px;
}


/* per-site design override (from spec.meta.design) */
:root {
  --brand: #1c2b4a;
  --brand-strong: #16223b;
  --brand-soft: #dfe1e6;
  --on-brand: #ffffff;
  --radius: 3px;
  --radius-lg: 5px;
  --radius-full: 6px;
  --sp-7: 4.5rem;
  --sp-8: 6.5rem;
  --font: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Cormorant", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* base.css — FUNCTIONAL layer for the AI-design (L2) path: reset, layout
   skeleton, buttons, forms, messages, admin panel/tables, interior-page prose +
   data primitives (box/facts/hours), the sticky call-bar, and motion/print. NO
   opinionated public component look — that is owned by the AI design.css (with
   ai-fallback.css as a neutral safety net). Extracted verbatim from components.css
   so the admin panel + contact form behave identically. Reads only tokens. */

/* ---------- 2. Основа ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: var(--leading);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: var(--leading-tight);
  margin: 0 0 var(--sp-4);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h1 { font-size: var(--step-3); }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); }
h4 { font-size: var(--step-0); }

p, ul, ol, dl, table, address, figure { margin: 0 0 var(--sp-4); }
p:last-child, ul:last-child, ol:last-child, table:last-child { margin-bottom: 0; }
address { font-style: normal; }

a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--brand-strong); }

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

hr { border: 0; border-top: 1px solid var(--border); margin: var(--sp-6) 0; }

strong { font-weight: 650; }
small, .small { font-size: var(--step--1); }
.muted { color: var(--text-muted); }
.mono { font-family: var(--font-mono); font-size: 0.92em; }
.center { text-align: center; }
.big { font-size: var(--step-1); }

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

/* ---------- 3. Скелет ---------- */
.wrap, .container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-4);
}
@media (min-width: 40rem) { .wrap, .container { padding-inline: var(--sp-5); } }

.section { padding-block: var(--sp-7); }
@media (min-width: 48rem) { .section { padding-block: var(--sp-8); } }
.section-alt, .section--tinted { background: var(--surface-2); }
.section-lead { max-width: var(--measure); color: var(--text-muted); font-size: var(--step-1); }

.narrow { max-width: 46rem; margin-inline: auto; }
.stack > * + * { margin-top: var(--sp-4); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }

.skip, .skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--brand); color: var(--on-brand);
  padding: var(--sp-3) var(--sp-4); border-radius: 0 0 var(--radius) 0;
}
.skip:focus, .skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ---------- 5. Бутони ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface); color: var(--text);
  font: inherit; font-weight: 600; line-height: 1.25;
  text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, transform .1s ease;
}
.btn:hover { background: var(--surface-2); color: var(--text); }
.btn:active { transform: translateY(1px); }
.btn svg { flex: none; }

.btn-call, .btn--primary {
  background: var(--brand); border-color: var(--brand); color: var(--on-brand);
  box-shadow: var(--shadow-1);
}
.btn-call:hover, .btn--primary:hover {
  background: var(--brand-strong); border-color: var(--brand-strong); color: var(--on-brand);
}
.btn-ghost, .btn--ghost {
  background: transparent; border-color: currentColor; color: var(--brand);
}
.btn-ghost:hover, .btn--ghost:hover { background: var(--brand-soft); color: var(--brand-strong); }
.btn-danger, .btn--danger {
  background: transparent; border-color: var(--danger); color: var(--danger);
}
.btn-danger:hover, .btn--danger:hover { background: var(--danger); color: #fff; }
.btn-lg, .btn--lg { padding: var(--sp-4) var(--sp-6); font-size: var(--step-1); }
.btn-small { padding: var(--sp-2) var(--sp-3); font-size: var(--step--1); }

.site-head .btn-ghost { color: #fff; }

.box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-1);
}
.box h2, .box h3 { font-size: var(--step-1); margin-bottom: var(--sp-3); }
.box h3 + table, .box h3 + p { margin-top: 0; }
.box > * + h3 { margin-top: var(--sp-5); }

@media (min-width: 56rem) {
  .sticky { position: sticky; top: 6rem; align-self: start; }
}

.facts { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-2) var(--sp-4); margin: 0; }
.facts dt { color: var(--text-subtle); font-size: var(--step--1); }
.facts dd { margin: 0; }

.hours { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.hours th, .hours td { text-align: left; padding: var(--sp-2) 0; border-bottom: 1px solid var(--border); }
.hours th { font-weight: 500; color: var(--text-muted); }
.hours td { text-align: right; font-variant-numeric: tabular-nums; }
.hours tr:last-child th, .hours tr:last-child td { border-bottom: 0; }

.emergency {
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  border-left: 3px solid var(--danger);
  padding: var(--sp-3) var(--sp-4);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--step--1);
  margin-top: var(--sp-4);
}
.nap { line-height: 1.8; }
.phone-big { font-size: var(--step-2); font-weight: 700; margin-block: var(--sp-4); }
.phone-big a { text-decoration: none; }
.phone-big a:hover { text-decoration: underline; }
.phone-big--nodata { font-size: var(--step-0); }
/* ---------- 11. Път, текст, призив ---------- */
.crumbs {
  padding-block: var(--sp-4) 0;
  font-size: var(--step--1); color: var(--text-subtle);
}
.crumbs a { color: var(--text-muted); }

/* Списъкът, който rich() произвежда от редове с „- “. */
.list { padding-left: 1.25em; }
.list li { color: var(--text-muted); }
.list li + li { margin-top: var(--sp-2); }

.prose { max-width: var(--measure); }
.prose h2 { margin-top: var(--sp-6); }
.prose h3 { margin-top: var(--sp-5); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: var(--sp-2); }
.prose > p, .prose li { color: var(--text-muted); }
.prose .lead, .prose strong { color: var(--text); }
/* ---------- 12. Форми ---------- */
.field { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.field label, .field__label { font-weight: 600; font-size: var(--step--1); }
.req { color: var(--danger); }

input[type="text"], input[type="tel"], input[type="email"], input[type="password"],
input[type="number"], input[type="time"], input[type="url"], select, textarea,
.field__input {
  width: 100%; font: inherit; color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-3);
  min-height: 2.75rem;
}
textarea { min-height: 8rem; resize: vertical; line-height: var(--leading); }
select { appearance: none; padding-right: var(--sp-6); background-image: none; }
input:hover, select:hover, textarea:hover { border-color: var(--text-subtle); }
input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] {
  border-color: var(--danger); background: color-mix(in srgb, var(--danger) 6%, var(--bg));
}
input::placeholder, textarea::placeholder { color: var(--text-subtle); }

.err, .field__error { color: var(--danger); font-size: var(--step--1); font-weight: 600; }
.hint, .field__hint { color: var(--text-subtle); font-size: var(--step--1); }

.field-check { grid-template-columns: 1fr; }
.field-check label {
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3);
  align-items: start; font-weight: 400; font-size: var(--step--1);
  line-height: var(--leading);
}
.field-check input[type="checkbox"] { width: 1.15rem; height: 1.15rem; margin-top: 0.2rem; accent-color: var(--brand); }

.prefix { display: flex; align-items: center; gap: var(--sp-2); }
.prefix span { color: var(--text-subtle); font-size: var(--step--1); white-space: nowrap; }

/* Приманка за ботове. CSP не позволява вграден стил, затова е тук. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-box { align-self: start; }
.form-narrow { max-width: 34rem; }
.form-wide { max-width: 60rem; }
.form-wide:has(#f-is_company:not(:checked)) [data-company-fields] { display: none; }
.company-fields { border: 0; margin: 0; padding: 0; min-width: 0; }
.consent-text { color: var(--text-muted); font-size: var(--step--1); }

.hours-edit { display: grid; gap: var(--sp-4); }
.hours-edit fieldset {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--sp-4); margin: 0;
  display: grid; gap: var(--sp-3);
}
.hours-edit legend { font-weight: 650; padding-inline: var(--sp-2); }
@media (min-width: 46rem) {
  .hours-edit fieldset { grid-template-columns: repeat(4, 1fr); align-items: end; }
}
.danger-form {
  margin-top: var(--sp-6); padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
}

/* ---------- 13. Съобщения, етикети ---------- */
.alert {
  border: 1px solid var(--border); border-left-width: 4px;
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-2);
  margin-bottom: var(--sp-5);
}
.alert-good, .alert--ok {
  border-left-color: var(--ok); color: var(--ok);
  background: color-mix(in srgb, var(--ok) 8%, var(--surface));
}
.alert-bad, .alert--danger {
  border-left-color: var(--danger); color: var(--danger);
  background: color-mix(in srgb, var(--danger) 8%, var(--surface));
}
.alert--warn {
  border-left-color: var(--warn); color: var(--warn);
  background: color-mix(in srgb, var(--warn) 8%, var(--surface));
}
.msg { margin-bottom: var(--sp-4); }
.locked { color: var(--danger); font-weight: 600; }

.pill {
  display: inline-block; padding: 0.1rem var(--sp-3);
  border-radius: var(--radius-full);
  font-size: var(--step--1); font-weight: 650; white-space: nowrap;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-muted);
}
.pill-new { background: var(--brand-soft); color: var(--brand-strong); border-color: transparent; }
.pill-in_progress {
  background: color-mix(in srgb, var(--warn) 14%, var(--surface)); color: var(--warn);
  border-color: transparent;
}
.pill-done {
  background: color-mix(in srgb, var(--ok) 14%, var(--surface)); color: var(--ok);
  border-color: transparent;
}
.pill-spam {
  background: color-mix(in srgb, var(--danger) 12%, var(--surface)); color: var(--danger);
  border-color: transparent;
}

.filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.chip {
  display: inline-block; padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--border); border-radius: var(--radius-full);
  background: var(--surface); color: var(--text-muted);
  text-decoration: none; font-size: var(--step--1); font-weight: 600;
}
.chip:hover { border-color: var(--brand); color: var(--brand); }
.chip-on {
  background: var(--brand); border-color: var(--brand); color: var(--on-brand);
}
.chip-on:hover { color: var(--on-brand); }

/* ---------- 14. Таблици и плочки (администрация) ---------- */
.grid, .table {
  width: 100%; border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  margin-bottom: var(--sp-5);
  font-size: var(--step--1);
  display: block; overflow-x: auto;
}
.grid thead, .table thead { background: var(--surface-2); }
.grid th, .grid td, .table th, .table td {
  text-align: left; padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.grid th { font-weight: 650; white-space: nowrap; }
.grid tbody tr:last-child th, .grid tbody tr:last-child td { border-bottom: 0; }
.grid tbody tr:hover { background: var(--surface-2); }
.row-bad { background: color-mix(in srgb, var(--danger) 7%, transparent); }
.row-bad:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); }

.tiles {
  display: grid; gap: var(--sp-4); margin-bottom: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
}
.tile {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 4px solid var(--brand);
  border-radius: var(--radius); padding: var(--sp-4);
  color: inherit; text-decoration: none;
  display: grid; gap: var(--sp-1);
}
.tile:hover { background: var(--surface-2); color: inherit; }
.tile strong { font-size: var(--step-2); line-height: 1; }
.tile span { color: var(--text-muted); font-size: var(--step--1); }

/* Постоянен бутон за обаждане, само на телефон. */
.call-bar {
  position: fixed; inset: auto 0 0 0; z-index: 50;
  display: block; text-align: center;
  background: var(--brand); color: var(--on-brand);
  padding: var(--sp-4); font-weight: 700; text-decoration: none;
  box-shadow: 0 -2px 10px rgb(0 0 0 / 0.18);
}
.call-bar:hover { background: var(--brand-strong); color: var(--on-brand); }
@media (min-width: 60rem) { .call-bar { display: none; } }
@media (max-width: 59.99rem) { body { padding-bottom: 4rem; } }
/* ---------- 16. Администрация ---------- */
body.admin { background: var(--surface-2); }
.adm-head { background: var(--surface-inverse); color: var(--on-inverse); }
.adm-head-inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  padding-block: var(--sp-3);
}
.adm-brand {
  color: inherit; text-decoration: none; font-weight: 700; margin-right: auto;
}
.adm-nav { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.adm-nav a {
  color: rgb(255 255 255 / 0.82); text-decoration: none;
  padding: var(--sp-2) var(--sp-3); border-radius: var(--radius);
  font-size: var(--step--1);
}
.adm-nav a:hover { background: rgb(255 255 255 / 0.1); color: #fff; }
.adm-out { margin: 0; }
.adm-out .btn { background: rgb(255 255 255 / 0.1); border-color: rgb(255 255 255 / 0.2); color: #fff; }
.adm-out .btn:hover { background: rgb(255 255 255 / 0.2); color: #fff; }

.adm-main {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  margin-block: var(--sp-5);
  max-width: var(--container);
}
.adm-main h1 { font-size: var(--step-2); }
.adm-main h2 { font-size: var(--step-1); margin-top: var(--sp-6); }
.adm-main h2:first-of-type { margin-top: var(--sp-4); }
.adm-main h3 { font-size: var(--step-0); margin-top: var(--sp-5); }
.adm-foot { padding-bottom: var(--sp-6); }

.login-page { display: grid; place-items: center; min-height: 70vh; padding: var(--sp-5); }
.login-card {
  width: 100%; max-width: 26rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--sp-6);
  box-shadow: var(--shadow-2);
}
.login-card h1 { font-size: var(--step-2); }

/* ---------- 16b. Photos in the admin (027): the photo form under a service, the Gallery screen and
   the About photo (identical in components.css and base.css) ---------- */
.photos-box { margin-block: var(--sp-6); }
.photos-form h3 { margin-top: var(--sp-4); }
.photo-lead { margin-bottom: var(--sp-4); }
.photo-thumb {
  display: block; width: 7.5rem; height: 5rem; object-fit: cover;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2);
}
.photo-thumb--empty { display: grid; place-items: center; padding: var(--sp-1); text-align: center; color: var(--text-muted); }
.photos-grid td { vertical-align: middle; }
.photos-grid input[type="text"] { min-width: 10rem; }
.photo-order { width: 5.5rem; }

/* ---------- 16a. Languages (011): switcher, admin language tabs, legal review notice ---------- */
/* Header language switcher (sites with two or more languages):
   nav.lang-switch > ul > li > a[hreflang][aria-current] */
.lang-switch ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.lang-switch a {
  display: inline-block; padding: var(--sp-1) var(--sp-2);
  border: 1px solid var(--border); border-radius: var(--radius);
  font-size: var(--step--1); font-weight: 600; text-decoration: none; color: inherit;
}
.lang-switch a:hover { border-color: var(--brand); }
.lang-switch a[aria-current] { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
/* Admin: one tab per language above a translatable field
   (.lang-tabs or [role=tablist][data-i18n-field] > [role=tab][aria-selected]) */
.lang-tabs, [role="tablist"][data-i18n-field] {
  display: flex; flex-wrap: wrap; gap: var(--sp-1);
  margin-bottom: var(--sp-2); border-bottom: 1px solid var(--border);
}
.lang-tabs [role="tab"], [role="tablist"][data-i18n-field] [role="tab"] {
  appearance: none; font: inherit; font-size: var(--step--1); font-weight: 600; cursor: pointer;
  padding: var(--sp-2) var(--sp-3); margin-bottom: -1px;
  background: transparent; color: var(--text-muted);
  border: 1px solid transparent; border-radius: var(--radius) var(--radius) 0 0;
}
.lang-tabs [role="tab"][aria-selected="true"], [role="tablist"][data-i18n-field] [role="tab"][aria-selected="true"] {
  background: var(--surface); color: var(--text); border-color: var(--border); border-bottom-color: var(--surface);
}
[role="tabpanel"][hidden] { display: none; }
/* Notice on a legal page the owner has not reviewed yet (non-Bulgarian legal text) */
.review-notice {
  border: 1px solid var(--border); border-left: 4px solid var(--warn);
  border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-5);
  background: color-mix(in srgb, var(--warn) 8%, var(--surface)); color: var(--text);
  font-size: var(--step--1);
}

/* ---------- 17. Движение и печат ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
}

@media print {
  .site-head, .call-bar, .nav-toggle, .cta, .site-foot .foot-list, .skip { display: none; }
  body { background: #fff; color: #000; padding-bottom: 0; }
  a { text-decoration: underline; }
}

/* ai-fallback.css — a NEUTRAL, unopinionated baseline for the public components, loaded
   in the AI-design (L2) path BEFORE the AI's design.css. It guarantees a working, legible
   page even if the AI under-styles something (nav toggles, hero has rhythm, cards form a
   grid, the CTA reads, the footer lays out). The AI's design.css loads after and overrides
   all of this — this file is the safety net, not the look. Token-only. */

/* header + nav (functional: mobile toggle, desktop row) */
.site-head { padding-block: var(--sp-3); border-bottom: 1px solid var(--border); background: var(--surface); }
.head-inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.brand { display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; color: inherit; margin-right: auto; }
.brand-mark { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; flex: none; border-radius: var(--radius); background: var(--brand); color: var(--on-brand); font-family: var(--font-display); font-weight: 800; }
.brand-text { display: grid; line-height: 1.2; }
.brand-text small { color: var(--text-muted); font-size: var(--step--1); }
.nav-toggle { display: inline-flex; align-items: center; gap: var(--sp-2); background: var(--surface-2); color: inherit; border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-2) var(--sp-3); font: inherit; font-size: var(--step--1); cursor: pointer; }
.nav-toggle-bars { width: 1.05rem; height: 2px; background: currentColor; position: relative; display: block; }
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; }
.nav-toggle-bars::before { top: -5px; } .nav-toggle-bars::after { top: 5px; }
.nav { display: none; flex-basis: 100%; }
.nav-toggle[aria-expanded="true"] + .nav { display: block; }
.nav ul { list-style: none; margin: 0; padding: var(--sp-2) 0; display: grid; gap: 1px; }
.nav a { display: block; padding: var(--sp-3) var(--sp-2); color: inherit; text-decoration: none; }
.nav a[aria-current="page"] { font-weight: 650; color: var(--brand); }
.head-call { display: none; }
@media (min-width: 60rem) {
  .nav-toggle { display: none; }
  .nav { display: block; flex-basis: auto; }
  .nav ul { display: flex; gap: var(--sp-2); padding: 0; }
  .head-call { display: inline-flex; }
}

/* hero */
.hero { padding-block: var(--sp-7); }
.hero-inner { max-width: 54rem; }
.hero h1 { font-size: var(--step-4); }
.eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: var(--step--1); font-weight: 700; color: var(--brand); margin-bottom: var(--sp-3); }
.lead { font-size: var(--step-1); max-width: var(--measure); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }
.badges { list-style: none; padding: 0; margin-top: var(--sp-5); display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.hero--image { position: relative; isolation: isolate; }
.hero--image .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero--image::after { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in oklab, #000 55%, transparent); }
.hero--image, .hero--image .lead, .hero--image h1 { color: #fff; }

/* cards / services / steps */
.cards { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); }
.card p { color: var(--text-muted); }
.section-lead { max-width: var(--measure); color: var(--text-muted); }
.steps { list-style: none; counter-reset: s; padding: 0; margin: 0; display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.steps li { counter-increment: s; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-5); }
.steps li::before { content: counter(s); display: inline-grid; place-items: center; width: 2rem; height: 2rem; margin-bottom: var(--sp-3); border-radius: 50%; background: var(--brand); color: var(--on-brand); font-weight: 700; }

/* about split */
.about-split, .article-split, .contact-split, .two-col { display: grid; gap: var(--sp-6); }
@media (min-width: 56rem) { .about-split { grid-template-columns: 1.4fr 1fr; } .article-split { grid-template-columns: minmax(0, 1fr) minmax(20rem, 24rem); } .contact-split, .two-col { grid-template-columns: 1fr 1fr; } }
/* Bundle 039 (08.10.2026): the service page is an article beside a sticky call box on a designed site too — this
   sheet had the about and contact splits but not the article split, so the box dropped under the article and the
   page read as a half-width column. The box and the sticky placement come with it (components.css has the same). */
/* Bundle 042 → 043 (09.10.2026): the article page uses the wrap. 042 bounded the article column at 46rem and centred
   the pair, which the owner read as "narrow in the middle": the interior pages align with the breadcrumb on the
   left and use the width the wrap gives them. The article now fills the first column, the box grows from 20rem to
   24rem, and .article-split > .prose lifts the reading measure (the column is the measure; a designer's
   bare-element measure still applies inside). Seen live on a fitness build at 1440 under the "wide" width cue. */
.article-split > .prose { max-width: none; }
/* Bundle 043: the template owns the card grid. A designer's ".cards { repeat(auto-fill, …) }" left empty tracks beside
   three cards on a wide wrap and the index read as three narrow cards on the left; auto-fit stretches the cards
   over the row. A lone card keeps a card's width. (0,2,0) beats the designer's class rule whatever the order. */
/* Bundle 045: (0,3,0) — a designer's ".services--grid .cards" (0,2,0, later in the sheet) beat the 043 rule on the home
   page; the home programs sat left in three narrow cards again. */
.section .wrap > .cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.section .wrap > .cards:has(> :only-child) { grid-template-columns: minmax(0, 32rem); }
/* Bundle 043: the FAQ page's list spans the wrap and runs in two columns from 56rem (it was the reading measure on
   the left with the action row centred under it). The home block keeps its own variants. */
.wrap > .faq-list { max-width: none; }
@media (min-width: 56rem) { .wrap > .faq-list { grid-template-columns: 1fr 1fr; align-items: start; } }
/* Bundle 043: a designer's large uppercase title in a card or over the article broke mid-word ("PERFORMANC / E",
   the base's overflow-wrap: break-word as the last resort); hyphenation comes first, the emergency break stays. */
.wrap > .cards .card :is(h2, h3), .article-split > .prose > h1 { hyphens: auto; overflow-wrap: break-word; }
.box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-5); }
.box h2, .box h3 { font-size: var(--step-1); margin-bottom: var(--sp-3); }
.box > * + h3 { margin-top: var(--sp-5); }
@media (min-width: 56rem) { .sticky { position: sticky; top: 6rem; align-self: start; } }
/* Bundle 039: the closing action row of an index page (services, faq) sits centred under the grid; the hero's own
   row (inside .hero-inner) and the contact band keep their rules. */
.section > .wrap > .hero-actions { justify-content: center; margin-inline: auto; }

/* faq (accordion) */
:where(div).faq { display: grid; gap: var(--sp-2); max-width: var(--measure); }
.faq details { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); }
.faq summary { cursor: pointer; font-weight: 600; }
.faq details > *:not(summary) { color: var(--text-muted); margin-top: var(--sp-2); }

/* gallery */
:where(ul).gallery { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.gallery-item__img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius-lg); }
.gallery-item__frame { display: grid; place-items: center; aspect-ratio: 4/3; padding: var(--sp-4); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg); color: var(--text-muted); text-align: center; }

/* CTA band */
.cta { background: var(--brand); color: var(--on-brand); }
.cta h2 { color: var(--on-brand); }
.cta p { color: color-mix(in srgb, var(--on-brand) 85%, transparent); }
.cta-inner { max-width: 46rem; }

/* footer */
.site-foot { background: var(--surface-2); padding-block: var(--sp-7) var(--sp-5); margin-top: var(--sp-8); border-top: 1px solid var(--border); }
.foot-grid { display: grid; gap: var(--sp-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.foot-h { font-size: var(--step-0); text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: var(--sp-3); }
.foot-list { list-style: none; padding: 0; display: grid; gap: var(--sp-2); }
.foot-bottom { margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--border); }

/* ============================================================================
   011 — v2 block variants (sites with settings.family set). Structure only, token-only:
   every v2 block root carries data-hero / data-block, so nothing here reaches the v1
   markup. The model's design.css adds colour, type and detail on top.
   Kept identical in blocks.css (deterministic path) and ai-fallback.css (AI path).
   ============================================================================ */

/* ---------- v2 heroes: section.hero.hero--<v>[data-hero] ---------- */
.hero[data-hero] { position: relative; isolation: isolate; overflow: hidden; }
.hero-media { margin: 0; }
.hero-img { display: block; width: 100%; height: auto; object-fit: cover; border-radius: var(--radius-lg); }
.hero-card__label { margin: 0; font-size: var(--step--1); text-transform: uppercase; letter-spacing: .06em; opacity: .8; }
/* full — the photo behind the text under a scrim, tall, text at the foot */
.hero--full[data-hero] { min-height: min(78vh, 46rem); display: grid; align-items: end; }
.hero--full[data-hero] .hero-inner { padding-block: var(--sp-8) var(--sp-7); }
/* left — editorial: big type, a thin rule, a wide photo strip below */
.hero--left[data-hero] .hero-inner { max-width: var(--container); margin-inline: auto; text-align: left; }
.hero--left[data-hero] .hero-title { font-size: clamp(2.6rem, 7vw, 5.2rem); line-height: 1.02; max-width: 18ch; }
.hero-rule { border: 0; border-top: 1px solid currentColor; opacity: .4; width: min(12rem, 40%); margin: var(--sp-5) 0; }
.hero-strip { margin: var(--sp-6) 0 0; }
.hero-strip .hero-img { aspect-ratio: 21 / 9; }
/* split — text left, a calm photo (or a contact card) right */
.hero-split { display: grid; gap: var(--sp-6); align-items: center; }
.hero-split .hero-inner { max-width: none; }
.hero-side .hero-img { aspect-ratio: 4 / 3; }
.hero-card { display: grid; gap: var(--sp-2); padding: var(--sp-5); border-radius: var(--radius-lg); background: var(--surface); color: var(--text); box-shadow: var(--shadow-2); }
.hero-card .phone-big { margin-block: 0 var(--sp-3); }
@media (min-width: 56rem) { .hero-split { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } }
/* minimal — type only, a narrow centred column */
.hero--minimal[data-hero] .hero-inner { max-width: 52rem; margin-inline: auto; text-align: center; }
.hero--minimal[data-hero] .hero-title { font-size: clamp(2.4rem, 6vw, 4.4rem); line-height: 1.05; }
.hero--minimal[data-hero] .hero-actions, .hero--minimal[data-hero] .badges { justify-content: center; }
/* banded — a coloured band, then a strip with the area served / urgent note */
.hero--banded[data-hero] { padding: 0; }
.hero-band { background: var(--brand); color: var(--on-brand); padding-block: var(--sp-7) var(--sp-8); }
.hero-band .hero-title, .hero-band .lead, .hero-band .eyebrow { color: var(--on-brand); }
.hero-below { background: var(--surface-2); color: var(--text); padding-block: var(--sp-4); }
.hero-below__inner { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-6); }
.hero-below p { margin: 0; }
.hero-below__note { font-weight: 600; }
/* asymmetric — offset text, an offset photo, compact */
.hero-asym { display: grid; gap: var(--sp-6); align-items: center; }
.hero-asym .hero-inner { max-width: 40rem; margin: 0; text-align: left; }
.hero-offset .hero-img { aspect-ratio: 3 / 4; }
@media (min-width: 56rem) {
  .hero-asym { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .hero-asym .hero-inner { padding-inline-start: min(6vw, 5rem); }
  .hero-offset { margin-block-start: var(--sp-8); }
}
/* centered — centred text, rounded shapes, a round photo */
.hero--centered[data-hero] .hero-inner { margin-inline: auto; text-align: center; }
.hero--centered[data-hero] .hero-actions, .hero--centered[data-hero] .badges { justify-content: center; }
.hero-shape { position: absolute; z-index: -1; border-radius: var(--radius-full); background: var(--brand-soft); opacity: .7; pointer-events: none; }
.hero-shape--a { width: 16rem; height: 16rem; inset-block-start: -5rem; inset-inline-start: -5rem; }
.hero-shape--b { width: 10rem; height: 10rem; inset-block-end: -3rem; inset-inline-end: 8%; }
.hero-round { width: min(22rem, 72%); margin: var(--sp-6) auto 0; }
.hero-round .hero-img { aspect-ratio: 1; border-radius: var(--radius-full); }
/* showcase — the product photo first, text and picks beside it */
.hero-showcase { display: grid; gap: var(--sp-6); align-items: center; }
.hero-showcase .hero-inner { max-width: none; }
.hero--showcase[data-hero] .hero-title { font-size: clamp(2rem, 1.2rem + 2.2vw, 3.1rem); line-height: 1.08; }
.hero--showcase[data-hero] .hero-picks { margin-top: var(--sp-4); }
.hero-product .hero-img { aspect-ratio: 1; }
.hero-picks { list-style: none; padding: 0; margin: var(--sp-5) 0 0; display: grid; gap: var(--sp-2); }
.hero-picks li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-2) var(--sp-4); padding-block: var(--sp-2); border-top: 1px solid color-mix(in oklab, currentColor 22%, transparent); }
.hero-picks a { color: inherit; font-weight: 600; }
@media (min-width: 56rem) { .hero-showcase { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
/* 016 — the hero aside (content.aside) and base rules for all eight heroes, so a hero switched
   after the designer ran still lays out on any family: grid children never force a column wider
   than the viewport, long words wrap, the form stacks under 56rem. Token-only. */
.hero[data-hero] .hero-title { overflow-wrap: break-word; }
.hero[data-hero] .hero-inner { min-width: 0; }
.hero-split > *, .hero-asym > *, .hero-showcase > * { min-width: 0; }
/* 019: one child only (no figure, card or form beside the text): the text takes the whole width, not half */
.hero-split:has(> :only-child), .hero-asym:has(> :only-child), .hero-showcase:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
.hero-asym:has(> :only-child) .hero-inner { max-width: none; }
.hero-media, .hero-img { max-width: 100%; }
/* the image as a strip under the text column (split / asymmetric with the form) */
.hero-inner > .hero-strip { margin: var(--sp-5) 0 0; }
.hero-inner > .hero-strip .hero-img { aspect-ratio: 16 / 9; }
/* the enquiry form aside: a surface box with its own text colour on any hero band */
.hero-form { min-width: 0; max-width: 100%; padding: var(--sp-5); border-radius: var(--radius-lg); background: var(--surface); color: var(--text); border: 1px solid var(--border); box-shadow: var(--shadow-2); text-align: start; overflow-wrap: anywhere; }
.hero .hero-form h2, .hero .hero-form label, .hero .hero-form p { color: var(--text); }
.hero .hero-form h2 { font-size: var(--step-1); margin: 0 0 var(--sp-4); }
.hero .hero-form .muted { color: var(--text-muted); }
.hero .hero-form a { color: var(--brand); }
.hero .hero-form .err, .hero .hero-form .req { color: var(--danger); }
.hero-form form, .hero-form .field { min-width: 0; }
.hero-form :is(input:not([type="checkbox"]), select, textarea) { display: block; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
.hero-form textarea { min-height: 6rem; }
.hero-form .btn { max-width: 100%; white-space: normal; }
.hero-split > .hero-form { align-self: center; }
/* the form strip under a one-column hero (full, left, minimal, banded, centered, showcase) */
.hero[data-hero-aside="form"]:not(.hero--split):not(.hero--asymmetric) { padding-block-end: 0; }
.hero-below--form { margin-block-start: var(--sp-7); padding-block: var(--sp-6); background: var(--surface-2); color: var(--text); }
.hero--banded[data-hero] .hero-below--form, .hero--full[data-hero] > .hero-below--form { margin-block-start: 0; }
.hero--full[data-hero] > .hero-below--form { align-self: stretch; }
.hero-below--form .hero-form { max-width: 46rem; }
.hero--centered[data-hero] .hero-below--form .hero-form, .hero--minimal[data-hero] .hero-below--form .hero-form { margin-inline: auto; }
@media (min-width: 56rem) {
  .hero-asym > .hero-form { margin-block-start: var(--sp-8); }
}

/* ---------- v2 section roots: section.<type>.<type>--<variant>[data-block] ---------- */
/* .faq / .gallery are also the class of the v1 inner lists; a v2 root keeps section flow */
.faq[data-block], .gallery[data-block] { display: block; max-width: none; columns: auto; list-style: none; }

/* services — grid (the .cards grid), list (rows), alternating (numbered zig-zag) */
.service-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.service-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-4); padding: var(--sp-3) var(--sp-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.service-row--urgent { border-inline-start: 4px solid var(--danger); }
.service-row__name { font-weight: 600; text-decoration: none; }
.service-row__summary { flex: 1 1 14rem; color: var(--text-muted); font-size: var(--step--1); }
.service-row .price { margin-inline-start: auto; }
.service-alt { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-6); }
.service-alt__item { display: grid; gap: var(--sp-3) var(--sp-6); align-items: start; }
.service-alt__num { font-family: var(--font-display); font-size: var(--step-4); font-weight: 800; line-height: 1; color: var(--brand); }
.service-alt__body h3 { margin-bottom: var(--sp-2); }
.service-alt__body h3 a { color: inherit; text-decoration: none; }
.service-alt__body p { color: var(--text-muted); }
@media (min-width: 48rem) {
  .service-alt__item { grid-template-columns: 6rem minmax(0, 1fr); }
  .service-alt__item:nth-child(even) { grid-template-columns: minmax(0, 1fr) 6rem; }
  .service-alt__item:nth-child(even) .service-alt__num { order: 2; text-align: end; }
}

/* gallery — grid, masonry, strip (one scrolling row) */
.gallery-list { list-style: none; margin: 0; padding: 0; }
/* Block lists span their section (08.10.2026): a design.css reading measure on bare elements
   ("p, ul, ol { max-width: var(--measure) }" — one designer did) must not narrow the lists that lay out a block.
   A class selector beats a bare element whatever the order; a designer's own class rule still wins over this. */
.steps, .gallery-list, .cards, .service-rows, .service-alt, .price-groups, .quote-list, .team-list, .timetable-grid,
.stats--grid, .stats--strip, .contact-cta__grid, .hero-actions { max-width: none; }
.gallery--grid .gallery-list { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.gallery--masonry .gallery-list { columns: 16rem 3; column-gap: var(--sp-4); }
.gallery--strip .gallery-list { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(14rem, 22rem); gap: var(--sp-4); overflow-x: auto; scroll-snap-type: x mandatory; padding-block-end: var(--sp-3); }
.gallery--strip .gallery-item { scroll-snap-align: start; }
.gallery-list .gallery-item { display: flex; flex-direction: column; gap: var(--sp-2); }
.gallery-list .gallery-item__img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); }
.gallery--masonry .gallery-list .gallery-item__img { aspect-ratio: auto; height: auto; }

/* faq — accordion (one column), two-col */
.faq-items { display: grid; gap: var(--sp-2); max-width: var(--measure); margin-block-end: var(--sp-5); }
.faq-items details { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); }
.faq-items summary { cursor: pointer; font-weight: 600; }
.faq--two-col .faq-items { max-width: none; }
@media (min-width: 48rem) { .faq--two-col .faq-items { grid-template-columns: 1fr 1fr; align-items: start; } }

/* contact-cta — band (centred), split (copy + details card) */
.contact-cta--band .cta-inner { margin-inline: auto; text-align: center; }
.contact-cta--band .hero-actions { justify-content: center; }
.contact-cta__grid { display: grid; gap: var(--sp-6); }
.contact-cta--split .box { color: var(--text); }
@media (min-width: 56rem) { .contact-cta__grid { grid-template-columns: 1.5fr 1fr; align-items: center; } }

/* pricelist — list (rows with a dotted leader), grid (one card per group) */
.price-groups { display: grid; gap: var(--sp-6); }
.pricelist--grid .price-groups { gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.pricelist--list .price-groups { max-width: 48rem; }
.price-group__title { font-size: var(--step-1); margin-bottom: var(--sp-3); }
.price-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.price-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--sp-2); }
.price-item__name { font-weight: 600; }
.price-item__dots { flex: 1 1 2rem; border-bottom: 1px dotted var(--border); transform: translateY(-.3em); }
.price-item__price { font-weight: 700; font-variant-numeric: tabular-nums; }
.price-item__desc { flex-basis: 100%; color: var(--text-muted); font-size: var(--step--1); }

/* team — grid (cards), list (rows) */
.team-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-5); }
.team--grid .team-list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.team-member { display: grid; gap: var(--sp-3); align-content: start; }
.team--list .team-member { grid-template-columns: 5rem minmax(0, 1fr); align-items: start; }
.team-member__photo { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-lg); }
.team--list .team-member__photo { border-radius: var(--radius-full); }
.team-member__avatar { display: grid; place-items: center; width: 5rem; height: 5rem; border-radius: var(--radius-full); background: var(--brand-soft); color: var(--brand-strong); font-family: var(--font-display); font-weight: 800; font-size: var(--step-2); }
.team-member__name { margin: 0; font-size: var(--step-1); }
.team-member__role { margin: 0; color: var(--text-muted); font-weight: 600; }
.team-member__bio { margin: var(--sp-2) 0 0; color: var(--text-muted); }

/* testimonials — grid (quote cards), single (one large quote per row) */
.quote-list { display: grid; gap: var(--sp-5); }
.testimonials--grid .quote-list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.testimonials--single .quote-list { max-width: 48rem; margin-inline: auto; }
.quote { margin: 0; display: grid; gap: var(--sp-3); padding: var(--sp-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.quote__text { margin: 0; }
.testimonials--single .quote__text { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.3; }
.quote__by { display: flex; flex-wrap: wrap; gap: 0 var(--sp-2); font-size: var(--step--1); color: var(--text-muted); }
.quote__author { font-weight: 700; color: var(--text); }

/* stats — strip (one row), grid (tiles) */
.stat-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); }
.stat { display: grid; gap: var(--sp-1); }
.stats--grid .stat { padding: var(--sp-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.stats--strip .stat { border-inline-start: 3px solid var(--brand); padding-inline-start: var(--sp-4); }
.stat__value { font-family: var(--font-display); font-size: var(--step-4); line-height: 1; }
.stat__label { color: var(--text-muted); }

/* map — the directions block: band (address + button in a row), card */
.map--band { background: var(--surface-2); }
.map__inner { display: grid; gap: var(--sp-4) var(--sp-6); align-items: center; }
.map__inner .nap { margin-bottom: var(--sp-3); }
.map__note { color: var(--text-muted); }
.map__action { margin: 0; }
.map--card .map__inner { max-width: 40rem; }
@media (min-width: 48rem) { .map--band .map__inner { grid-template-columns: minmax(0, 1fr) auto; } }

/* ---------- v2 contact page: section.contact.contact--<kind>[data-contact-kind] ---------- */
.contact-head { margin-bottom: var(--sp-6); }
.contact-grid { display: grid; gap: var(--sp-5) var(--sp-6); align-items: start; }
.contact-part > h2 { font-size: var(--step-1); margin-bottom: var(--sp-3); }
.contact-part .phone-big { margin-block: 0 var(--sp-3); }
.contact-part--directions { margin: 0; }
.contact-directions { margin-top: var(--sp-3); }
.contact--call .contact-part--phone .phone-big { font-size: var(--step-4); }
@media (min-width: 56rem) {
  .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-contact-part="address"] { grid-area: address; }
  [data-contact-part="directions"] { grid-area: directions; }
  [data-contact-part="hours"] { grid-area: hours; }
  [data-contact-part="phone"] { grid-area: phone; }
  [data-contact-part="areas"] { grid-area: areas; }
  [data-contact-part="form"] { grid-area: form; }
  [data-contact-part="booking"] { grid-area: booking; }
  .contact--visit .contact-grid { grid-template-areas: "address hours" "directions phone" "form form"; }
  .contact--call .contact-grid { grid-template-areas: "phone hours" "phone areas" "form form"; }
  .contact--book .contact-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "booking phone" "booking hours"; }
  .contact--write .contact-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "form phone" "form hours"; }
}

/* ---------- 027 photos: the service lead and gallery, the services-list thumbnail, the About photo,
   and the contact icons (identical in blocks.css and ai-fallback.css). Tokens only; a photo slot
   without a file is a frame with its description, like the gallery's. ---------- */
.svc-lead { margin: var(--sp-5) 0; }
.svc-lead__img, .about-photo__img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--radius-lg); background: var(--surface-2);
}
.svc-lead__frame, .about-photo__frame, .svc-gallery__frame {
  display: grid; place-items: center; text-align: center;
  aspect-ratio: 3 / 2; padding: var(--sp-4);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg);
  color: var(--text-muted); font-size: var(--step--1); overflow: hidden;
}
.svc-gallery {
  list-style: none; margin: var(--sp-5) 0; padding: 0;
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
}
.svc-gallery__item { margin: 0; display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.svc-gallery__img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius); background: var(--surface-2);
}
.svc-gallery__frame { aspect-ratio: 4 / 3; border-radius: var(--radius); }
.svc-gallery__caption { margin: 0; font-size: var(--step--1); color: var(--text-muted); }
.card-thumb { display: block; margin-bottom: var(--sp-3); border-radius: var(--radius); overflow: hidden; }
.card-thumb img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--surface-2); }
.about-photo { margin: 0 0 var(--sp-5); }
.about-photo figcaption { margin-top: var(--sp-2); font-size: var(--step--1); color: var(--text-muted); }
.ci {
  display: inline-block; flex: none; width: 1.1em; height: 1.1em;
  margin-inline-end: .4em; vertical-align: -0.15em;
}
.btn .ci { margin-inline-end: 0; }

/* ---------- 018 design contract: body-class hooks (identical in blocks.css and ai-fallback.css).
   The body classes come from design.json v2 (deriveBodyClasses). The class part sits inside :where(), so
   it adds no specificity: design.css wins wherever it sets the same property, and a free axis change
   (navigation, spacing) still shows on a design.css that does not. The two "off" switches hide their
   element outright: the contract, not the stylesheet, decides whether the call button and bar exist. */
:where(body.hd-classic) .head-inner { justify-content: flex-start; text-align: start; }
:where(body.hd-centered) .head-inner { justify-content: center; text-align: center; }
:where(body.hd-centered) .brand { margin-inline: auto; }
:where(body.hd-minimal) .site-head { padding-block: var(--sp-2); border-bottom-color: transparent; }
:where(body.hd-minimal) .brand-text { font-family: var(--font-display); font-size: var(--step-1); }
:where(body.hd-minimal) .brand-text small { display: none; }
:where(body.nav-left) .head-inner .nav { margin-right: auto; }
:where(body.nav-center) .head-inner .nav { margin-inline: auto; }
:where(body.nav-right) .head-inner .nav { margin-left: auto; }
:where(body.w-narrow) .wrap { max-width: 62rem; }
:where(body.w-standard) .wrap { max-width: var(--container); }
:where(body.w-wide) .wrap { max-width: 84rem; }
:where(body.rh-tight) .section { padding-block: clamp(1.4rem, 4vw, 2.8rem); }
:where(body.rh-airy) .section { padding-block: clamp(3rem, 8vw, 7rem); }
:where(body.rh-alt) .section:nth-of-type(even) { padding-block: clamp(1.4rem, 4vw, 2.8rem); }
:where(body.rh-alt) .section:nth-of-type(odd) { padding-block: clamp(3rem, 8vw, 6rem); }
:where(body.no-head-call) .head-call { display: none !important; }
:where(body.no-call-bar) .call-bar { display: none !important; }
body:where(.no-call-bar) { padding-bottom: 0; }
:where(body.no-icons) .ci { display: none !important; }

/* ---------- 037 home services photos (identical in blocks.css and ai-fallback.css). A service with a lead
   photo shows it as figure.service-photo, the first child of its item; a service without one has no figure
   and no modifier. grid: on top of the card (3/2); list: a small square at the row start; alternating: beside
   the number and body (about 5/12 of the row from 56rem, sides alternating), stacked above when narrower.
   Tokens only; design.css may restyle every hook. .example-value (the catalogue example contact values) has
   no base rule: it looks like the real value. */
.service-photo { margin: 0; min-width: 0; border-radius: var(--radius); overflow: hidden; background: var(--surface-2); }
.service-photo__img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.service-photo--card { margin-block-end: var(--sp-1); }
.service-photo--row { flex: none; width: 4rem; }
.service-photo--row .service-photo__img { aspect-ratio: 1 / 1; }
.service-photo--side .service-photo__img { aspect-ratio: 4 / 3; }
.card--photo { min-width: 0; }
.service-row--photo { align-items: center; }
.service-alt__item--photo > .service-photo--side { grid-column: 1 / -1; }
@media (min-width: 56rem) {
  .service-alt__item.service-alt__item--photo { align-items: center; }
  .service-alt__item--photo > .service-photo--side { grid-column: auto; }
  .service-alt__item.service-alt__item--photo-start { grid-template-columns: minmax(0, 5fr) 6rem minmax(0, 7fr); }
  .service-alt__item.service-alt__item--photo-end { grid-template-columns: minmax(0, 7fr) 6rem minmax(0, 5fr); }
  .service-alt__item--photo-end > .service-photo--side { order: 3; }
}

/* ---------- 039 team quotes, the team page and the weekly timetable (identical in blocks.css and
   ai-fallback.css). The home team block shows a member's quote (blockquote.team-member__quote) and, when
   the team page is on and there are more than four members, p.team-all; the /team page (.team-page,
   ul.team-list--page) shows every member with the bio. The timetable: table = seven columns from 56rem (the
   short day name, every day, an empty one says so), one column per day below it (the full day name, the
   empty days hidden); days = one card per day with sessions. Tokens only; design.css may restyle every
   hook. The 038 width guard above lists .timetable-grid: a reading measure never narrows the week. */
.team-member__quote { margin: var(--sp-2) 0 0; padding-inline-start: var(--sp-3); border-inline-start: 3px solid var(--border); color: var(--text); font-family: var(--font-display); font-style: italic; }
.team-member__quote p { margin: 0; }
.team-all { margin: var(--sp-5) 0 0; }
.team-page .team-list { margin-top: var(--sp-5); }
.team-list.team-list--page { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.team-list--page .team-member__bio { display: block; }
/* Bundle 044 (09.10.2026): the team page is a grid, so every member shares one box. A designer's stacked-list
   rules (".team-member { padding: var(--sp-5) 0 }" with ".team-member:first-child { padding-top: 0 }") reached the
   page grid and the first portrait sat higher than the other three. (0,3,0) beats the first-child rule. */
.team-page .team-list--page > .team-member { padding-block-start: 0; }
.timetable-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); min-width: 0; }
.timetable-day { min-width: 0; }
.timetable-day__name { margin: 0 0 var(--sp-2); font-size: var(--step-1); }
.timetable-day__short { display: none; text-decoration: none; }
.timetable-slots { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.timetable-slot { min-width: 0; overflow-wrap: anywhere; }
.timetable-slot__time { font-weight: 700; font-variant-numeric: tabular-nums; }
.timetable-slot__who { color: var(--text-muted); }
.timetable-day__none { margin: 0; color: var(--text-muted); }
.timetable--table .timetable-day--empty { display: none; }
.timetable--days .timetable-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.timetable--days .timetable-day { padding: var(--sp-4); background: var(--surface); border-radius: var(--radius); }
.timetable-note { margin: var(--sp-4) 0 0; color: var(--text-muted); }
.schedule-page > .timetable { padding-block: var(--sp-4) 0; }
@media (min-width: 56rem) {
  .timetable--table .timetable-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--sp-3); }
  .timetable--table .timetable-day--empty { display: block; }
  .timetable--table .timetable-day__short { display: inline; }
  .timetable--table .timetable-day__full { display: none; }
  .timetable--table .timetable-slot { padding-block-start: var(--sp-2); border-top: 1px solid var(--border); }
  .timetable--table .timetable-slot > span { display: block; }
  .timetable--table .timetable-slot > .timetable-slot__sep { display: none; }
}

/* ===== 046: library hooks and no-JS fallbacks ===== */
/* The vendored libraries (templates/t0-vanilla/vendor.json) and their recipes (assets/carousel.js, lightbox.js,
   ui.js, smooth.js). Identical in blocks.css and ai-fallback.css; tokens only; design.css may restyle every hook.
   Every block is complete without JavaScript: a carousel is its grid until Swiper adds .swiper-initialized (the
   core rules below set .swiper-wrapper to flex, so the fallback carries a real (0,3,0)), the
   tabs are every panel under a hidden tablist, the filter bar stays hidden, the lightbox link opens the file.
   Swiper ships only its pagination sheet (vendor.json): its core sheet declares the swiper-icons font as a data: URI
   that the CSP (font-src 'self') reports as soon as the sheet loads, so the core layout Swiper needs (horizontal,
   no CSS mode, no 3D) is written here, the arrows are placed here and the a11y live region is hidden here. */
.swiper { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; z-index: 1; display: block; }
.swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: flex; transition-property: transform; transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial); box-sizing: content-box; }
.swiper-android .swiper-slide, .swiper-ios .swiper-slide, .swiper-wrapper { transform: translate3d(0px, 0, 0); }
.swiper-horizontal { touch-action: pan-y; }
.swiper-slide { flex-shrink: 0; width: 100%; height: 100%; position: relative; transition-property: transform; display: block; }
.swiper-slide-invisible-blank { visibility: hidden; }
.swiper-backface-hidden .swiper-slide { transform: translateZ(0); backface-visibility: hidden; }
[data-carousel] { --swiper-theme-color: var(--brand); --swiper-pagination-bullet-inactive-color: var(--text-muted); --swiper-navigation-size: 2.75rem; }
[data-carousel]:not(.swiper-initialized) .swiper-wrapper { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); height: auto; transform: none; }
[data-carousel="testimonials"]:not(.swiper-initialized) .swiper-wrapper { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
[data-carousel="team"]:not(.swiper-initialized) .swiper-wrapper { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
[data-carousel]:not(.swiper-initialized) .swiper-slide { width: auto; height: auto; }
[data-carousel]:not(.swiper-initialized) .swiper-pagination,
[data-carousel]:not(.swiper-initialized) .carousel__prev,
[data-carousel]:not(.swiper-initialized) .carousel__next,
[data-carousel] .carousel__prev[hidden],
[data-carousel] .carousel__next[hidden] { display: none; }
[data-carousel].swiper-initialized { padding-block-end: var(--sp-6); }
[data-carousel].swiper-initialized .swiper-wrapper { display: flex; gap: 0; }
[data-carousel].swiper-initialized .swiper-slide { height: auto; }
[data-carousel] .carousel__prev,
[data-carousel] .carousel__next { position: absolute; top: var(--swiper-navigation-top-offset, 50%); z-index: 10; display: flex; align-items: center; justify-content: center; width: var(--swiper-navigation-size); height: var(--swiper-navigation-size); margin-block-start: calc(var(--swiper-navigation-size) / -2 - var(--sp-3)); padding: 0; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-full); box-shadow: var(--shadow-1); cursor: pointer; }
[data-carousel] .carousel__prev { inset-inline-start: var(--swiper-navigation-sides-offset, var(--sp-2)); inset-inline-end: auto; }
[data-carousel] .carousel__next { inset-inline-end: var(--swiper-navigation-sides-offset, var(--sp-2)); inset-inline-start: auto; }
[data-carousel].swiper-rtl .carousel__prev .icon,
[data-carousel].swiper-rtl .carousel__next .icon { transform: scaleX(-1); }
[data-carousel] .carousel__prev::after,
[data-carousel] .carousel__next::after { content: none; }
[data-carousel] .swiper-button-disabled { opacity: .4; cursor: auto; pointer-events: none; }
[data-carousel] .carousel__prev.swiper-button-lock,
[data-carousel] .carousel__next.swiper-button-lock { display: none; }
[data-carousel] .swiper-notification { position: absolute; inset-inline-start: 0; top: 0; pointer-events: none; opacity: 0; z-index: -1000; }
[data-carousel] .swiper-pagination-bullet { width: .6rem; height: .6rem; }
.icon { display: inline-block; flex: none; width: 1.25em; height: 1.25em; vertical-align: -0.25em; }
.svc-icon { margin-inline-end: .4em; }
.carousel__prev .icon,
.carousel__next .icon { width: 1.25rem; height: 1.25rem; }
.svc-tabs { display: grid; gap: var(--sp-4); }
.svc-tabs__list { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.svc-tabs__list[hidden] { display: none; }
.svc-tabs__list [role="tab"],
.gallery-filter button { display: inline-flex; align-items: center; padding: var(--sp-2) var(--sp-4); font: inherit; font-weight: 600; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-full); cursor: pointer; }
.svc-tabs__list [role="tab"][aria-selected="true"],
.gallery-filter button[aria-pressed="true"] { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.svc-tabs__list [role="tab"]:focus-visible,
.gallery-filter button:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.svc-tabs__panel { min-width: 0; }
.svc-tabs__panel[hidden] { display: none; }
.gallery-filter { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-block-end: var(--sp-4); }
.gallery-filter[hidden] { display: none; }
.gallery-list .gallery-item[hidden] { display: none; }
.lightbox { display: block; color: inherit; border-radius: var(--radius-lg); cursor: zoom-in; }
.lightbox:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.lightbox > img { display: block; }
.pswp { --pswp-bg: var(--surface-inverse); --pswp-icon-color: var(--on-inverse); --pswp-icon-color-secondary: var(--surface-inverse); --pswp-error-text-color: var(--on-inverse); }
@media print {
  [data-carousel] .swiper-wrapper { display: grid !important; gap: var(--sp-4) !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; transform: none !important; }
  [data-carousel] .swiper-slide { width: auto !important; margin: 0 !important; }
  [data-carousel] .swiper-pagination, [data-carousel] .carousel__prev, [data-carousel] .carousel__next,
  .svc-tabs__list, .gallery-filter { display: none !important; }
  .svc-tabs__panel[hidden] { display: flex !important; }
  .gallery-list .gallery-item[hidden] { display: flex !important; }
}
/* ===== end 046 ===== */

/* ===== motion.css (040: the motion layer of the template) ===== */
/* motion.css — the motion layer of the template (040, bundle 041). build-style puts it into style.css
   after the base (base.css + ai-fallback.css, or components.css + blocks.css) and before design.css.
   The level is the body class mo-minimal | mo-gentle | mo-lively; assets/motion.js runs the recipes on
   gentle and lively and marks each one on <html> as mo-r-<recipe>. Every moving rule sits under
   prefers-reduced-motion: no-preference and behind an html.mo-r-* class (hover rules also under
   hover: hover), so a page without the script, under reduced motion or in print is complete and static.
   Tokens only (no colour literal); design.css may add on top, within the level. */

/* ---------- minimal: colour and shadow transitions on hover and focus, no transform ---------- */
@media (prefers-reduced-motion: no-preference) {
  :where(body.mo-minimal) :where(a, .btn, button, .card) {
    transition: color 160ms ease-out, background-color 160ms ease-out, border-color 160ms ease-out, box-shadow 160ms ease-out;
  }
}

/* ---------- lift, zoom: the resting transitions (zero specificity: design.css wins) ---------- */
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  :where(html.mo-r-lift) :where(.card, .service-alt__item, .team-member, .stats--grid .stat) {
    transition: transform 200ms ease-out, box-shadow 200ms ease-out;
  }
  :where(html.mo-r-zoom) :where(.service-photo, .about-photo) img,
  :where(html.mo-r-zoom) .gallery-item__img {
    transition: transform var(--mo-duration, 480ms) var(--mo-ease, ease-out);
  }
}

/* ---------- reveal: sections and cards rise in once on enter (motion.js marks them) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.mo-r-reveal [data-reveal]:not(.is-in) {
    opacity: 0;
    transform: translate3d(0, var(--mo-distance, 12px), 0);
  }
  html.mo-r-reveal [data-reveal]:not([data-reveal="done"]) {
    transition: opacity var(--mo-duration, 480ms) var(--mo-ease, ease-out), transform var(--mo-duration, 480ms) var(--mo-ease, ease-out);
    transition-delay: calc(var(--reveal-i, 0) * var(--mo-stagger, 60ms));
  }
  /* the first frame of a marked element: hidden at once, no fade-out */
  html.mo-r-reveal [data-reveal="hold"]:not(.is-in) { transition: none; }
}

/* ---------- lift and zoom on hover ---------- */
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  html.mo-r-lift :is(.card, .service-alt__item, .team-member, .stats--grid .stat):hover {
    transform: translateY(calc(var(--mo-lift, 2px) * -1));
    box-shadow: var(--shadow-2, 0 10px 28px color-mix(in srgb, var(--text) 14%, transparent));
  }
  html.mo-r-zoom :is(.service-photo, .about-photo),
  html.mo-r-zoom .gallery-item { overflow: hidden; }
  html.mo-r-zoom .about-photo,
  html.mo-r-zoom .about-photo img,
  html.mo-r-zoom .gallery-item__img { transform-origin: 50% 100%; } /* the caption below is never covered */
  html.mo-r-zoom :is(.service-photo, .about-photo):hover img,
  html.mo-r-zoom:not(.mo-r-ken-burns) .gallery-item:hover .gallery-item__img {
    transform: scale(var(--mo-zoom, 1.03));
  }
}

/* ---------- lively: the hero breath (a slow scale, clipped by its frame) ---------- */
@keyframes mo-breath {
  from { transform: scale(1); }
  to { transform: scale(1.04); }
}
@media (prefers-reduced-motion: no-preference) {
  html.mo-r-breath .hero-media,
  html.mo-r-breath .hero--image { overflow: hidden; }
  html.mo-r-breath .hero-media { overflow: hidden; }
  html.mo-r-breath :is(.hero-media img, img.hero-bg) {
    animation: mo-breath var(--mo-breath, 14000ms) ease-in-out infinite alternate;
  }
}

/* ---------- lively: Ken Burns on gallery hover (nothing at rest; the bottom edge stays) ---------- */
@keyframes mo-kenburns {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to { transform: scale(1.08) translate3d(-2%, 0, 0); }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  html.mo-r-ken-burns .gallery-item { overflow: hidden; }
  html.mo-r-ken-burns .gallery-item__img { transform-origin: 50% 100%; }
  html.mo-r-ken-burns .gallery-item:hover .gallery-item__img {
    animation: mo-kenburns var(--mo-kenburns, 6000ms) ease-in-out forwards;
  }
}

/* ---------- lively: service rows open their summary on hover, focus or the toggle ---------- */
.service-row__toggle[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  html.mo-r-rows .service-row[data-rows] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "name price toggle" "sum sum sum";
    grid-template-rows: auto 0fr;
    align-items: center;
    row-gap: 0;
  }
  /* the open/close transition once the row is not (or no longer) a pending reveal target */
  html.mo-r-rows .service-row[data-rows]:is(:not([data-reveal]), [data-reveal="done"]) {
    transition: grid-template-rows var(--mo-duration, 520ms) var(--mo-ease, ease-out);
  }
  html.mo-r-rows .service-row--photo[data-rows] {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-areas: "photo name price toggle" "photo sum sum sum";
  }
  html.mo-r-rows .service-row[data-rows] > .service-photo { grid-area: photo; }
  html.mo-r-rows .service-row[data-rows] > .service-row__name { grid-area: name; }
  html.mo-r-rows .service-row[data-rows] > .price { grid-area: price; }
  html.mo-r-rows .service-row[data-rows] > .service-row__toggle { grid-area: toggle; }
  html.mo-r-rows .service-row[data-rows] > .service-row__summary {
    grid-area: sum; align-self: stretch; overflow: hidden; min-height: 0; padding-block-start: 0;
    transition: padding-block-start var(--mo-duration, 520ms) var(--mo-ease, ease-out);
  }
  html.mo-r-rows .service-row[data-rows]:focus-within,
  html.mo-r-rows .service-row[data-rows].is-open { grid-template-rows: auto 1fr; }
  html.mo-r-rows .service-row[data-rows]:focus-within > .service-row__summary,
  html.mo-r-rows .service-row[data-rows].is-open > .service-row__summary { padding-block-start: var(--sp-2, .5rem); }
  html.mo-r-rows .service-row__toggle:not([hidden]) {
    display: inline-grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; padding: 0; margin: 0;
    border: 1px solid var(--border); border-radius: var(--radius, 6px); background: transparent; color: inherit;
    cursor: pointer;
  }
  html.mo-r-rows .service-row__toggle::before {
    content: ""; inline-size: .5rem; block-size: .5rem;
    border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform var(--mo-duration, 520ms) var(--mo-ease, ease-out);
  }
  html.mo-r-rows .service-row__toggle[aria-expanded="true"]::before { transform: translateY(2px) rotate(-135deg); }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  html.mo-r-rows .service-row[data-rows]:hover { grid-template-rows: auto 1fr; }
  html.mo-r-rows .service-row[data-rows]:hover > .service-row__summary { padding-block-start: var(--sp-2, .5rem); }
}

/* ---------- print and reduced motion: everything visible, rows open, nothing moves ---------- */
@media print {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .service-row[data-rows] { grid-template-rows: auto 1fr !important; }
  *, *::before, *::after { animation: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .service-row[data-rows] { grid-template-rows: auto 1fr !important; }
  *, *::before, *::after { animation: none !important; }
}

/* ===== AI-authored design.css (per-site visual system) ===== */

/* ================================================================
   Design: Адвокатско дружество „Меридиан“
   Family: counsel  |  Preset: slate-ledger  |  Accent: #1c2b4a
   Body: nav-center hd-minimal w-narrow rh-airy dc-rules im-framed mo-gentle
   Fonts: Cormorant (display) + Montserrat (body)
   ================================================================ */

:root {
  /* Palette — slate-ledger tuned for warmth and authority */
  --brand:        #1c2b4a;
  --brand-strong: #141f36;
  --brand-soft:   #e2e6ed;
  --on-brand:     #ffffff;

  --bg:        #f6f7f9;
  --surface:   #ffffff;
  --surface-2: #e8ecf1;
  --border:    #c5d0dc;

  --text:        #1a2028;
  --text-muted:  #47525e;
  --text-subtle: #657080;

  --danger: #a61e1a;
  --ok:     #2a6f3b;
  --warn:   #8a5a10;

  --surface-inverse:   #0f141c;
  --surface-inverse-2: #1a2330;
  --on-inverse:        #e2e8f0;

  /* Typography */
  --font-display: "Cormorant", Georgia, "Noto Serif", serif;
  --font:         "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --step--1: clamp(0.85rem, 0.82rem + 0.15vw, 0.95rem);
  --step-0:  clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --step-1:  clamp(1.22rem, 1.1rem + 0.55vw, 1.55rem);
  --step-2:  clamp(1.5rem, 1.25rem + 1.1vw, 2.2rem);
  --step-3:  clamp(1.85rem, 1.4rem + 2vw, 3.1rem);
  --step-4:  clamp(2.3rem, 1.5rem + 3.6vw, 4.6rem);
  --step-5:  clamp(2.8rem, 1.6rem + 5vw, 5.5rem);

  --leading-tight: 1.15;
  --leading: 1.7;

  /* Spacing */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 4.5rem;
  --sp-8: 6.5rem;
  --sp-9: 8rem;

  /* Radius — sharp */
  --radius: 3px;
  --radius-lg: 5px;
  --radius-full: 6px;

  /* Shadows — whisper-quiet */
  --shadow-1: 0 1px 0 rgb(20 31 54 / 0.05);
  --shadow-2: 0 4px 12px rgb(20 31 54 / 0.06);

  /* Measure & container */
  --measure: 60ch;
  --container: 980px;

  /* Library tokens */
  --swiper-theme-color: var(--brand);
}

/* Dark mode */


/* ================================================================
   Base
   ================================================================ */

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: var(--leading);
  color: var(--text);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: var(--brand-soft);
  color: var(--brand-strong);
}

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

a {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

a:hover {
  color: var(--brand-strong);
}

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

svg.icon,
svg.ci {
  width: 1.25em;
  height: 1.25em;
  color: currentColor;
  flex-shrink: 0;
}

/* ================================================================
   Typography
   ================================================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--leading-tight);
  color: var(--text);
  overflow-wrap: anywhere;
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
h5 { font-size: var(--step-0); }
h6 { font-size: var(--step--1); }

.eyebrow {
  font-family: var(--font);
  font-size: var(--step--1);
  font-weight: 500;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--sp-3);
}

.lead,
.section-lead {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--text-muted);
  max-width: var(--measure);
}

.prose {
  max-width: var(--measure);
}

.prose p,
.prose li {
  margin-bottom: var(--sp-4);
}

.prose h2,
.prose h3 {
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-3);
}

.muted {
  color: var(--text-muted);
}

.small {
  font-size: var(--step--1);
}

/* ================================================================
   Buttons
   ================================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0.85em 1.6em;
  font-family: var(--font);
  font-size: var(--step--1);
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  background: var(--brand);
  color: var(--on-brand);
}

.btn:hover {
  background: var(--brand-strong);
  color: var(--on-brand);
}

.btn-ghost {
  background: transparent;
  color: var(--brand);
  border-color: var(--brand);
}

.btn-ghost:hover {
  background: var(--brand-soft);
  color: var(--brand-strong);
}

.directions {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}

.directions:hover {
  background: var(--surface-2);
  color: var(--text);
}

/* ================================================================
   Header
   ================================================================ */

.site-head {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: var(--sp-4) 0;
}

.head-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.hd-minimal .brand {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 400;
  color: var(--text);
  text-decoration: none;
  line-height: 1.1;
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-2);
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6em;
  height: 1.6em;
  background: var(--brand);
  color: var(--on-brand);
  font-family: var(--font-display);
  font-size: 0.7em;
  font-weight: 400;
  border-radius: var(--radius);
  flex-shrink: 0;
}

.brand-text strong {
  font-weight: 400;
}

.brand-text small {
  display: block;
  font-family: var(--font);
  font-size: 0.45em;
  color: var(--text-muted);
  margin-top: 0.2em;
}

.nav {
  font-size: var(--step--1);
  font-weight: 500;}

.nav a {
  color: var(--text-muted);
  text-decoration: none;
  padding: 0.4em 0.6em;
}

.nav a:hover,
.nav a[aria-current="page"] {
  color: var(--text);
}

.nav-toggle {
  color: var(--text);
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-2);}

.nav-toggle-bars {
  display: block;
  width: 1.5rem;
  height: 2px;
  background: currentColor;
  position: relative;
}

.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
}

.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after  { top: 6px; }

.head-call {
  flex-shrink: 0;
}

.lang-switch {
  font-size: var(--step--1);
  font-weight: 500;
}

.lang-switch a {
  color: var(--text-muted);
  text-decoration: none;
  padding: 0.2em 0.4em;
}

.lang-switch a[aria-current] {
  color: var(--text);
  font-weight: 600;
}

/* ================================================================
   Hero — showcase
   ================================================================ */

.hero {
  background: var(--bg);
  padding: var(--sp-7) 0;
  position: relative;
}

.hero--showcase .hero-showcase {
  display: grid;
  gap: var(--sp-6);
  align-items: center;
}

@media (min-width: 60rem) {
  .hero--showcase .hero-showcase {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-8);
  }
}

.hero-inner {
  position: relative;
  z-index: 2;
}

.hero-title {
  font-size: var(--step-4);
  font-weight: 400;
  line-height: 1.05;
  margin-bottom: var(--sp-4);
  overflow-wrap: anywhere;
}

.hero--showcase .lead {
  font-size: var(--step-1);
  color: var(--text-muted);
  margin-bottom: var(--sp-5);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}

.badges {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.badges > li {
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--text-muted);
  background: var(--surface-2);
  padding: 0.35em 0.8em;
  border-radius: var(--radius);
}

.hero-media {
  margin: 0;
}

.hero-product img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.im-framed .hero-product img {
  border: 1px solid var(--border);
  padding: var(--sp-2);
  background: var(--surface);
}

.hero-picks {
  list-style: none;
  padding: 0;
  margin-top: var(--sp-5);
}

.hero-picks > li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--step-0);
}

.hero-picks a {
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
}

.hero-picks .price {
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--brand);
  flex-shrink: 0;
}

/* Hero form (aside) */
.hero-form {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: var(--sp-6);
  border-radius: var(--radius);
}

.hero-form h2 {
  font-size: var(--step-2);
  margin-bottom: var(--sp-4);
}

.hero-below--form {
  padding-top: var(--sp-6);
}

/* ================================================================
   Sections & the rules motif
   ================================================================ */

.section {
  padding: var(--sp-7) 0;
  position: relative;
}

.dc-rules .section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(var(--measure), 100% - var(--sp-8));
  height: 1px;
  background: var(--border);
}

.dc-rules .section:first-of-type::before {
  display: none;
}

.section-alt {
  background: var(--surface-2);
}

.section h2 {
  margin-bottom: var(--sp-3);
}

.section-lead {
  margin-bottom: var(--sp-6);
}

/* ================================================================
   Services — list
   ================================================================ */

.services--list .service-rows {
  list-style: none;
  padding: 0;
}

.service-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--border);
}

.service-row__name {
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--text);
  text-decoration: none;
  font-weight: 400;
  flex: 1 1 auto;
}

.service-row__summary {
  font-size: var(--step-0);
  color: var(--text-muted);
  flex: 1 1 100%;
}

.service-row .price {
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--brand);
  flex-shrink: 0;
}

.service-row--urgent {
  background: var(--brand-soft);
}

.service-row--urgent .service-row__name {
  color: var(--brand-strong);
}

.svc-icon {
  color: var(--brand);
  margin-right: var(--sp-2);
}

/* Service photo variants */
.service-photo--row {
  width: 4rem;
  height: 4rem;
  flex-shrink: 0;
  margin-right: var(--sp-4);
}

.service-photo--row img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid var(--border);
}

.service-photo--card {
  margin: calc(-1 * var(--sp-4)) calc(-1 * var(--sp-4)) var(--sp-4);
}

.service-photo--card img {
  width: 100%;
  height: auto;
  display: block;
}

/* ================================================================
   Process — numbered
   ================================================================ */

.process--numbered .steps-wrap {
  position: relative;
}

.process--numbered .steps {
  list-style: none;
  padding: 0;
  counter-reset: step;
}

.process--numbered .steps > li {
  position: relative;
  padding-left: 3.5rem;
  padding-bottom: var(--sp-6);
}

.process--numbered .steps > li::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-display);
  font-size: var(--step-2);
  color: var(--brand);
  line-height: 1;
  font-weight: 400;
}

.process--numbered .steps > li:last-child {
  padding-bottom: 0;
}

/* ================================================================
   About-blurb — simple
   ================================================================ */

.about-blurb--simple .narrow.prose {
  max-width: var(--measure);
  margin: 0 auto;
}

.about-blurb--simple .btn {
  margin-top: var(--sp-5);
}

/* ================================================================
   FAQ — two-col
   ================================================================ */

.faq--two-col .faq-items {
  columns: 1;
  gap: var(--sp-5);
}

@media (min-width: 52rem) {
  .faq--two-col .faq-items {
    columns: 2;
  }
}

.faq-items details {
  break-inside: avoid;
  margin-bottom: var(--sp-3);
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
}

.faq-items summary {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 400;
  padding: var(--sp-4) var(--sp-5);
  cursor: pointer;
  color: var(--text);
  list-style: none;
  position: relative;
}

.faq-items summary::-webkit-details-marker {
  display: none;
}

.faq-items summary::after {
  content: "+";
  position: absolute;
  right: var(--sp-4);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font);
  font-size: var(--step-2);
  color: var(--brand);
  line-height: 1;
}

.faq-items details[open] summary::after {
  content: "\2013";
}

.faq-items details p {
  padding: 0 var(--sp-5) var(--sp-4);
  margin: 0;
  color: var(--text-muted);
  max-width: var(--measure);
}

.faq--two-col .btn {
  margin-top: var(--sp-5);
}

/* ================================================================
   Emergency CTA — banner
   ================================================================ */

.emergency-cta--banner {
  background: var(--brand);
  color: var(--on-brand);
  padding: var(--sp-6) 0;
  text-align: center;
}

.emergency-cta--banner h2 {
  color: var(--on-brand);
  font-size: var(--step-2);
  margin-bottom: var(--sp-3);
}

.emergency-cta--banner .lead {
  color: var(--on-brand);
  opacity: 0.9;
  margin: 0 auto var(--sp-5);
}

.emergency-cta--banner .btn-ghost {
  background: transparent;
  color: var(--on-brand);
  border-color: var(--on-brand);
}

.emergency-cta--banner .btn-ghost:hover {
  background: rgb(255 255 255 / 0.1);
}

/* ================================================================
   Contact CTA — band
   ================================================================ */

.contact-cta--band {
  background: var(--surface-2);
  padding: var(--sp-7) 0;
}

.cta-inner {
  text-align: center;
}

.cta-inner h2 {
  margin-bottom: var(--sp-3);
}

.cta-inner .lead {
  margin: 0 auto var(--sp-5);
}

/* ================================================================
   Gallery — grid
   ================================================================ */

.gallery--grid .gallery-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.gallery-item {
  position: relative;
}

.gallery-item__img {
  width: 100%;
  height: auto;
  display: block;
}

.im-framed .gallery-item__img {
  border: 1px solid var(--border);
  padding: var(--sp-2);
  background: var(--surface);
}

.gallery-item__caption {
  font-size: var(--step--1);
  color: var(--text-muted);
  margin-top: var(--sp-2);
}

.gallery-item__frame {
  aspect-ratio: 4 / 3;
  background: var(--surface-2);
  border: 1px solid var(--border);
}

/* Gallery filter */
.gallery-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}

.gallery-filter button {
  font-family: var(--font);
  font-size: var(--step--1);
  font-weight: 500;
  padding: 0.5em 1em;
  background: var(--surface);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
}

.gallery-filter button[aria-pressed="true"] {
  background: var(--brand);
  color: var(--on-brand);
  border-color: var(--brand);
}

/* ================================================================
   Pricelist — list
   ================================================================ */

.pricelist--list .price-groups {
  display: grid;
  gap: var(--sp-6);
}

.price-group {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-5);
}

.price-group__title {
  font-family: var(--font-display);
  font-size: var(--step-2);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border);
}

.price-list {
  list-style: none;
  padding: 0;
}

.price-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2);
  padding: var(--sp-3) 0;
  border-bottom: 1px dashed var(--border);
}

.price-item:last-child {
  border-bottom: none;
}

.price-item__name {
  flex: 1 1 auto;
  font-weight: 500;
}

.price-item__dots {
  flex: 1 1 auto;
  border-bottom: 1px dotted var(--border);
  min-width: 2rem;
  height: 0.6em;
}

.price-item__price {
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--brand);
  flex-shrink: 0;
}

.price-item__desc {
  width: 100%;
  font-size: var(--step--1);
  color: var(--text-muted);
}

/* ================================================================
   Team — list
   ================================================================ */

.team--list .team-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--sp-5);
}

.team-member {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-5);
}

.team-member__photo {
  width: 5.5rem;
  height: 5.5rem;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--border);
}

.im-framed .team-member__photo {
  padding: var(--sp-1);
  background: var(--bg);
}

.team-member__avatar {
  width: 5.5rem;
  height: 5.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-soft);
  color: var(--brand);
  font-family: var(--font-display);
  font-size: var(--step-2);
  flex-shrink: 0;
  border-radius: var(--radius);
}

.team-member__name {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 400;
  margin-bottom: var(--sp-1);
}

.team-member__role {
  font-size: var(--step--1);
  color: var(--text-muted);
  margin-bottom: var(--sp-2);
}

.team-member__quote {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--text-muted);
  line-height: 1.5;
}

.team-member__quote p {
  margin: 0;
}

.team-all {
  margin-top: var(--sp-5);
}

/* ================================================================
   Testimonials — grid
   ================================================================ */

.testimonials--grid .quote-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.quote {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
}

.quote__text {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-style: italic;
  line-height: 1.45;
  margin-bottom: var(--sp-4);
  flex: 1 1 auto;
}

.quote__text p {
  margin: 0;
}

.quote__by {
  font-size: var(--step--1);
  color: var(--text-muted);
}

.quote__author {
  font-weight: 500;
  color: var(--text);
}

/* ================================================================
   Stats — grid
   ================================================================ */

.stats--grid .stat-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}

.stat {
  text-align: center;
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.stat__value {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 400;
  color: var(--brand);
  line-height: 1.1;
  display: block;
  margin-bottom: var(--sp-2);
}

.stat__label {
  font-size: var(--step--1);
  color: var(--text-muted);
}

/* ================================================================
   Map — band
   ================================================================ */

.map--band {
  background: var(--surface-2);
  padding: var(--sp-7) 0;
}

.map__inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  align-items: flex-start;
}

.map__text h2 {
  margin-bottom: var(--sp-3);
}

.map__text address.nap {
  font-style: normal;
  color: var(--text-muted);
  margin-bottom: var(--sp-3);
  line-height: 1.6;
}

.map__note {
  color: var(--text-muted);
  margin-bottom: var(--sp-4);
  max-width: var(--measure);
}

/* ================================================================
   Contact page — write
   ================================================================ */

.contact--write {
  padding: var(--sp-7) 0;
}

.contact-head {
  margin-bottom: var(--sp-6);
}

.contact-head h1 {
  margin-bottom: var(--sp-3);
}

.contact-head .lead {
  max-width: var(--measure);
}

.contact-part {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-5);}

.contact-part h2 {
  font-size: var(--step-1);
  margin-bottom: var(--sp-4);}

.contact-part--form {
  background: var(--surface);}

.form-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-5);
}

.facts {
  list-style: none;
  padding: 0;
}

.facts dt {
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--text-muted);
  margin-top: var(--sp-4);
}

.facts dd {
  margin: var(--sp-1) 0 0;
  color: var(--text);
}

.phone-big {
  font-family: var(--font-display);
  font-size: var(--step-2);
  color: var(--brand);
  margin-bottom: var(--sp-2);
}

.contact-email {
  color: var(--text-muted);
}

.hours {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step-0);
}

.hours th,
.hours td {
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.hours th {
  font-weight: 500;
  color: var(--text-muted);
  width: 40%;
}

.example-value {
  color: var(--text-muted);
  font-style: italic;
}

/* ================================================================
   Footer
   ================================================================ */

.site-foot {
  background: var(--surface-inverse);
  color: var(--on-inverse);
  margin-top: var(--sp-8);
  padding: var(--sp-8) 0 var(--sp-5);
}

.foot-grid {
  display: grid;
  gap: var(--sp-6);
}

@media (min-width: 48rem) {
  .foot-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  .foot-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.foot-h {
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--on-inverse);
  margin-bottom: var(--sp-3);
  font-weight: 400;
}

.foot-list {
  list-style: none;
  padding: 0;
}

.foot-list li {
  margin-bottom: var(--sp-2);
}

.foot-list a {
  color: var(--on-inverse);
  opacity: 0.75;
  text-decoration: none;
}

.foot-list a:hover {
  opacity: 1;
  text-decoration: underline;
}

.foot-bottom {
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--surface-inverse-2);
}

.foot-bottom p {
  color: var(--on-inverse);
  opacity: 0.6;
  margin: 0;
}

.site-foot .hours th,
.site-foot .hours td {
  border-color: var(--surface-inverse-2);
  color: var(--on-inverse);
  opacity: 0.85;
}

.site-foot .nap {
  color: var(--on-inverse);
  opacity: 0.85;
  line-height: 1.6;
}

/* ================================================================
   Mobile call bar
   ================================================================ */

.call-bar {
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--brand);
  color: var(--on-brand);
  padding: var(--sp-3) var(--sp-4);
  text-align: center;
  font-weight: 500;
  text-decoration: none;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);}

.call-bar:hover {
  background: var(--brand-strong);
  color: var(--on-brand);}

/* ================================================================
   Interior primitives
   ================================================================ */

.cards {
  list-style: none;
  padding: 0;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-5);
}

.card h3 {
  font-size: var(--step-1);
  margin-bottom: var(--sp-2);
}

.card h3 a {
  color: var(--text);
  text-decoration: none;
}

.card h3 a:hover {
  color: var(--brand);
}

.card p {
  color: var(--text-muted);
  margin-bottom: var(--sp-3);
}

.card .price {
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--brand);
}

.card-more {
  font-size: var(--step--1);
  font-weight: 500;
}

.box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-5);
}

.crumbs {
  font-size: var(--step--1);
  color: var(--text-muted);
  margin-bottom: var(--sp-4);
}

.crumbs a {
  color: var(--text-muted);
  text-decoration: none;
}

.crumbs a:hover {
  color: var(--text);
  text-decoration: underline;
}

.review-notice {
  background: var(--brand-soft);
  color: var(--brand-strong);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-4);
  font-size: var(--step--1);
}

/* ================================================================
   Carousels / Swiper
   ================================================================ */

.carousel {
  position: relative;
}

.swiper-slide {
  height: auto;
}

.swiper-pagination {
  position: relative;
  margin-top: var(--sp-4);
}

.swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: var(--text-muted);
  opacity: 0.35;
  border-radius: var(--radius-full);
}

.swiper-pagination-bullet-active {
  background: var(--brand);
  opacity: 1;
}

.carousel__prev,
.carousel__next {
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  color: var(--brand);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
}

.carousel__prev:hover,
.carousel__next:hover {
  background: var(--brand);
  color: var(--on-brand);
  border-color: var(--brand);
}

/* ================================================================
   PhotoSwipe
   ================================================================ */

.pswp__bg {
  background: var(--surface-inverse);
}

.pswp__button {
  color: var(--on-inverse);
}

.pswp__caption__center {
  color: var(--on-inverse);
  font-size: var(--step-0);
}

/* ================================================================
   Alpine / Tabs / Filter
   ================================================================ */

.svc-tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--sp-3);
}

.svc-tabs [role="tab"] {
  font-family: var(--font);
  font-size: var(--step--1);
  font-weight: 500;
  padding: 0.6em 1.2em;
  background: transparent;
  color: var(--text-muted);
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
}

.svc-tabs [role="tab"][aria-selected="true"] {
  background: var(--brand);
  color: var(--on-brand);
  border-color: var(--brand);
}

.svc-tabs__panel {
  padding: var(--sp-4) 0;
}

.svc-tabs__panel[hidden] {
  display: none;
}

/* ================================================================
   Timetable (interior pages)
   ================================================================ */

.timetable-day {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-4);
}

.timetable-day__name {
  font-family: var(--font-display);
  font-size: var(--step-1);
  margin-bottom: var(--sp-3);
  font-weight: 400;
}

.timetable-day__short {
  text-decoration: none;
}

.timetable-slots {
  list-style: none;
  padding: 0;
}

.timetable-slot {
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-3);
  align-items: baseline;
}

.timetable-slot:last-child {
  border-bottom: none;
}

.timetable-slot__time {
  font-weight: 500;
  color: var(--text-muted);
  font-size: var(--step--1);
}

.timetable-slot__title {
  color: var(--text);
  font-weight: 500;
}

.timetable-slot__who {
  color: var(--text-muted);
  font-size: var(--step--1);
}

.timetable-slot__member {
  color: var(--brand);
  text-decoration: none;
}

.timetable-slot__member:hover {
  text-decoration: underline;
}

.timetable-day--empty {
  opacity: 0.55;
}

.timetable-day__none {
  color: var(--text-muted);
  font-size: var(--step--1);
}

/* ================================================================
   Team page
   ================================================================ */

.team-page {
  padding: var(--sp-7) 0;
}

.team-page .team-list--page {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--sp-5);
}

.team-page .team-member__bio {
  color: var(--text-muted);
  margin-top: var(--sp-3);
  line-height: var(--leading);
}

/* ================================================================
   Schedule page
   ================================================================ */

.schedule-page {
  padding: var(--sp-7) 0;
}

.schedule-page .timetable-grid {
  margin-top: var(--sp-5);
}

.timetable-note {
  max-width: var(--measure);
  margin-top: var(--sp-5);
  color: var(--text-muted);
}

/* ================================================================
   FAQ page list
   ================================================================ */

.faq-list {
  list-style: none;
  padding: 0;
}

.faq-list details {
  border-bottom: 1px solid var(--border);
  padding: var(--sp-4) 0;
}

.faq-list summary {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 400;
  cursor: pointer;
  color: var(--text);
  list-style: none;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list p {
  color: var(--text-muted);
  max-width: var(--measure);
  margin: var(--sp-3) 0 0;
}

/* ================================================================
   Hero card (aside)
   ================================================================ */

.hero-card {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: var(--sp-5);
  border-radius: var(--radius);
}

.hero-card__label {
  font-size: var(--step--1);
  color: var(--text-muted);
  margin-bottom: var(--sp-2);
}

/* ================================================================
   Article split (interior pages)
   ================================================================ */

.article-split {
  gap: var(--sp-6);
}

/* ================================================================
   Motion — gentle (hover only, no self-running animations)
   ================================================================ */

@media (prefers-reduced-motion: no-preference) {
  .btn,
  a,
  .nav a,
  .foot-list a {
    transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, transform 200ms ease;
  }

  .card,
  .quote,
  .team-member,
  .price-group,
  .stat,
  .gallery-item {
    transition: transform 300ms ease, box-shadow 300ms ease;
  }

  .card:hover,
  .quote:hover,
  .price-group:hover,
  .stat:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-2);
  }

  .gallery-item:hover {
    transform: translateY(-2px);
  }

  .service-row {
    transition: background-color 200ms ease;
  }

  .service-row:hover {
    background-color: var(--surface-2);
  }

  .hero-media img,
  .gallery-item__img,
  .team-member__photo {
    transition: transform 500ms ease;
  }

  a:hover .hero-media img,
  a:hover .gallery-item__img,
  .team-member:hover .team-member__photo {
    transform: scale(1.03);
  }

  .btn:hover {
    transform: translateY(-1px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  a,
  .card,
  .quote,
  .team-member,
  .price-group,
  .stat,
  .gallery-item,
  .service-row,
  .hero-media img,
  .gallery-item__img,
  .team-member__photo {
    transition: none !important;
    transform: none !important;
  }
}

/* ================================================================
   Reduced motion blanket
   ================================================================ */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}


/* ===== self-hosted fonts win over design.css (spec.meta.design.fontPair / design.json via resolve-fonts) ===== */
:root {
  --font: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Cormorant", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}