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

/* self-hosted webfonts (from spec.meta.design.fontPair — resolve-fonts) */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/open-sans-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: "Open Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/open-sans-400-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/open-sans-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: "Open Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/open-sans-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: "Open Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/open-sans-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: "Open Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/open-sans-600-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/open-sans-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: "Open Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/open-sans-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: "Lora";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/lora-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: "Lora";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/lora-600-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/lora-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: "Lora";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/lora-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: "Lora";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/lora-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: "Lora";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/lora-700-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/lora-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: "Lora";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/lora-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;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/jetbrains-mono-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: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/jetbrains-mono-400-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/jetbrains-mono-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: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/jetbrains-mono-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: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/jetbrains-mono-500-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: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/jetbrains-mono-500-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/jetbrains-mono-500-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: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/jetbrains-mono-500-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: TRATTORIA — restaurants, pizzerias, bistros, wine bars, cafés with seating.
   Warm and earthy: cream paper, terracotta brand, olive and wine notes, a serif display
   face over a clean sans body, medium radii, soft warm shadows. Built for a full-bleed photo hero
   with an overlay, a menu (pricelist) and a gallery; centred navigation.
   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 trattoria` (gate + family audit). */

:root {
  --brand:        #9c3d23;
  --brand-strong: #7a2e19;
  --brand-soft:   #f7e6dc;
  --on-brand:     #ffffff;

  --bg:        #fbf6ef;
  --surface:   #ffffff;
  --surface-2: #f3eadc;
  --surface-low: var(--surface-2);
  --surface-lowest: var(--surface);
  --border:    #e2d4c0;

  --text:        #2a201a;
  --text-muted:  #5c4a3d;
  --text-subtle: #7a6656;

  --ok:     #3f6b22;
  --warn:   #8a4f00;
  --danger: #a8231b;

  --surface-inverse:   #2a1d15;
  --surface-inverse-2: #3a2a1f;
  --on-inverse:        #f8efe4;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
          "Noto Sans", sans-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.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --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);
  --leading-tight: 1.12;
  --leading: 1.65;

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

  --radius: 0.5rem;
  --radius-lg: 0.9rem;
  --radius-full: 999px;

  --shadow-1: 0 1px 2px rgb(80 45 25 / 0.08), 0 2px 6px rgb(80 45 25 / 0.08);
  --shadow-2: 0 10px 28px rgb(80 45 25 / 0.14);
  --shadow-tint: color-mix(in srgb, var(--brand) 6%, transparent);

  --measure: 64ch;
  --container: 1200px;
}


/* per-site design override (from spec.meta.design) */
:root {
  --font: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Lora", Georgia, "Iowan Old Style", "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

/* 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: var(--on-inverse); }

.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: color-mix(in srgb, var(--on-inverse) 82%, transparent); text-decoration: none;
  padding: var(--sp-2) var(--sp-3); border-radius: var(--radius);
  font-size: var(--step--1);
}
.adm-nav a:hover { background: color-mix(in srgb, var(--on-inverse) 10%, transparent); color: var(--on-inverse); }
.adm-out { margin: 0; }
.adm-out .btn { background: color-mix(in srgb, var(--on-inverse) 10%, transparent); border-color: color-mix(in srgb, var(--on-inverse) 20%, transparent); color: var(--on-inverse); }
.adm-out .btn:hover { background: color-mix(in srgb, var(--on-inverse) 20%, transparent); color: var(--on-inverse); }

.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); }
/* 139 (15.10.2026): zero specificity (:where) so the stylist's `.hero-title { color: … }` wins; the old (0,1,1) rule outranked it
   and on an inverted palette (--on-inverse dark) painted a near-black title over the #000 scrim. */
:where(.hero--image, .hero--image .lead, .hero--image h1) { color: var(--on-inverse); }
/* 071 (bundle 074): the hero's children keep the hero's colour at zero specificity too (the 139 pattern), so a stylist's
   rule still wins. The ghost button carries the base's own .btn-ghost colour (0,1,0, --brand), which a zero-specificity
   rule never beats: its hero rule is .hero--image :where(…) (0,1,0, after the base), so the base's loses by order and
   a stylist's .btn-ghost (later) still wins; the border follows its text. */
:where(.hero--image) :where(.hero-title em, .accent, .badges li) { color: var(--on-inverse); }
.hero--image :where(.btn-ghost, .btn--ghost) { color: var(--on-inverse); border-color: currentColor; }

/* 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 */
/* 071 (bundle 074, 17.10.2026): the contact band is the brand surface. The home prints data-surface="brand" on it
   (pages/home.php, the owner's decision of 17.10.2026), so a stylist's rule for plain / tint / inverse never reaches it
   (a café sheet's [data-surface="plain"] background left the on-brand heading unreadable on cream). The brand paint
   applies with no data-surface (v1, an interior page) or data-surface="brand"; a band on another surface would take
   that surface's zero-specificity rules and keep --text.
   :where() keeps .cta's 0,1,0, so a stylist's `.cta h2` still ties and wins by order. Reviewed the same way and
   unchanged: :where(.status--dark), .hero-band and the featured tier paint their text in the rule that paints
   their background, and no data-surface reaches them. */
.cta:where(:not([data-surface]), [data-surface="brand"]) { background: var(--brand); color: var(--on-brand); }
.cta:where(:not([data-surface]), [data-surface="brand"]) h2 { color: var(--on-brand); }
.cta:where(:not([data-surface]), [data-surface="brand"]) 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; }
/* 060 (13.10.2026): the form row under a one-column hero continues the hero's own surface (a designer's dark hero
   with a tinted band under it read as a third colour block before the first section); the form box paints itself. */
.hero-below--form { margin-block-start: var(--sp-7); padding-block: var(--sp-6); background: transparent; color: inherit; }
.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); }
/* 047 (09.10.2026): a services list row with a photo is a real two-column row — the photo 7rem wide (4:3,
   5rem under 36rem), the name over the summary, the price at the end of the first line; the icon gives
   way to the photo. The lively rows recipe (motion.css) lays the same areas out on top. */
.service-photo--row { flex: none; width: 7rem; }
.service-photo--row .service-photo__img { aspect-ratio: 4 / 3; }
.service-photo--side .service-photo__img { aspect-ratio: 4 / 3; }
.card--photo { min-width: 0; }
.service-row--photo {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "photo name price" "photo sum sum";
  align-items: start; column-gap: var(--sp-4); row-gap: var(--sp-1);
}
.service-row--photo > .service-photo { grid-area: photo; align-self: center; }
.service-row--photo > .svc-icon { display: none; }
.service-row--photo > .service-row__name { grid-area: name; font-size: var(--step-0); }
.service-row--photo > .service-row__summary { grid-area: sum; flex: none; }
.service-row--photo > .price { grid-area: price; margin-inline-start: 0; justify-self: end; white-space: nowrap; }
.service-row--photo > .service-row__toggle { grid-area: price; }
@media (max-width: 36rem) { .service-photo--row { width: 5rem; } }
.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 ===== */
/* ===== 019: the header logo (template-owned; img.brand-logo replaces span.brand-mark when the site has a logo) ===== */
.brand > .brand-logo { display: block; flex: none; height: 2.25rem; width: auto; max-width: 10rem; object-fit: contain; }
/* ===== end 019 ===== */
/* ===== 054: one-page sites, the full services, the contact block, the hero ticker, before/after ===== */
/* Identical in blocks.css and ai-fallback.css; tokens only; design.css may restyle every hook. The one-pager's header
   sticks (body.mode-one-page, views/layout.php) and every anchored section clears it; the menu link of the section in
   view carries aria-current="true" (assets/onepage.js). section.services-full (blocks/services_full.php): spreads and
   accordion are <details> rows (all open without JavaScript; ui.js serviceSpreads), alternating sets the photo left
   and right, tabs reuse the 046 tablist. section.contact-block (blocks/contact.php) is the contact page's grid on a
   band or beside its heading. .hero-ticker is one static line until onepage.js adds .is-running (never under reduced
   motion); .ba-figure shows both photos side by side until onepage.js adds .is-live (the after photo clipped at
   --ba-pos, the range below). Nothing here overflows a 390 px viewport. */
body.mode-one-page .site-head { position: sticky; top: 0; z-index: 40; border-block-end: 1px solid var(--border); }
body.mode-one-page main section[id] { scroll-margin-top: 5.5rem; }
body.mode-one-page .nav a[aria-current="true"] { font-weight: 650; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .35em; }
.head-cta { white-space: nowrap; padding: var(--sp-2) var(--sp-4); font-size: var(--step--1); }
@media (max-width: 59.99rem) { .head-cta[href^="tel:"] { display: none; } }

.services-full .lead { margin-block-end: var(--sp-6); }
.svc-spreads, .svc-full-list, .svc-full__gallery, .ba-list, .contact-block .contact-grid { max-width: none; }
.svc-spreads { display: grid; border-block-start: 1px solid var(--border); }
.svc-spread { border-block-end: 1px solid var(--border); }
.svc-spread__head { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-1) var(--sp-4); align-items: baseline; padding-block: var(--sp-5); padding-inline-end: var(--sp-7); cursor: pointer; list-style: none; }
.svc-spread__head::-webkit-details-marker { display: none; }
.svc-spread__head::after { content: ""; position: absolute; inset-inline-end: var(--sp-2); top: 50%; width: .65rem; height: .65rem; border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor; transform: translateY(-75%) rotate(45deg); }
.svc-spread[open] > .svc-spread__head::after { transform: translateY(-25%) rotate(225deg); }
.svc-spread__head:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.svc-spread__index { grid-row: 1 / span 2; font-family: var(--font-display); font-size: var(--step-1); font-variant-numeric: tabular-nums; color: var(--text-muted); }
.svc-spread__name { grid-column: 2; margin: 0; font-size: var(--step-2); overflow-wrap: break-word; }
.svc-spread__tag { grid-column: 2; color: var(--text-muted); }
.svc-spread__body { padding-block-end: var(--sp-6); }
.services-full--accordion .svc-spread__name { font-size: var(--step-1); }
.svc-full-list { display: grid; gap: var(--sp-8); }
.svc-full__name { margin: 0 0 var(--sp-1); font-size: var(--step-2); overflow-wrap: break-word; }
.svc-full__tag { margin: 0 0 var(--sp-4); color: var(--text-muted); }
.svc-full__body { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-4); align-items: start; }
.svc-full__body > * { min-width: 0; margin-block: 0; }
.svc-full__photo { margin: 0; }
.svc-full__img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-lg); }
.svc-full__text { max-width: var(--measure); }
.svc-full__gallery { list-style: none; padding: 0; display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 7rem), 1fr)); }
.svc-full__gallery img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); }
.svc-full__price { font-weight: 700; font-size: var(--step-1); }
.svc-full__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-5); }
@media (min-width: 56rem) {
  .svc-full__body:has(> .svc-full__photo) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: repeat(5, auto) 1fr; column-gap: var(--sp-6); }
  .svc-full__body:has(> .svc-full__photo) > * { grid-column: 2; }
  .svc-full__body:has(> .svc-full__photo) > .svc-full__photo { grid-column: 1; grid-row: 1 / -1; }
  .svc-full--photo-end .svc-full__body:has(> .svc-full__photo) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .svc-full--photo-end .svc-full__body:has(> .svc-full__photo) > * { grid-column: 1; }
  .svc-full--photo-end .svc-full__body:has(> .svc-full__photo) > .svc-full__photo { grid-column: 2; }
}

.contact-block .contact-part > h3 { font-size: var(--step-1); margin-bottom: var(--sp-3); }
.contact-block--band { background: var(--surface-2); }
@media (min-width: 56rem) {
  .contact-block--split .contact-block__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--sp-6); align-items: start; }
  .contact-block--split .contact-head { margin-bottom: 0; }
}

.hero-ticker { display: flex; width: 100%; max-width: 100%; min-width: 0; overflow: hidden; contain: inline-size; margin-bottom: var(--sp-3); }
.hero-ticker__track { display: flex; flex: none; align-items: center; gap: var(--sp-5); margin: 0; padding: 0; padding-inline-end: var(--sp-5); list-style: none; white-space: nowrap; font-size: var(--step--1); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.hero-ticker__item { display: inline-flex; align-items: center; gap: var(--sp-5); }
.hero-ticker__item + .hero-ticker__item::before,
.hero-ticker.is-running .hero-ticker__item::before { content: ""; width: .35em; height: .35em; border-radius: var(--radius-full); background: currentColor; }
.hero-ticker:not(.is-running) .hero-ticker__track { flex: 1 1 auto; flex-wrap: wrap; row-gap: var(--sp-1); white-space: normal; }
.hero-ticker:not(.is-running) .hero-ticker__track[aria-hidden="true"] { display: none; }
.hero-ticker.is-running .hero-ticker__track { animation: hero-ticker 32s linear infinite; }
[dir="rtl"] .hero-ticker.is-running .hero-ticker__track { animation-name: hero-ticker-rtl; }
.hero-ticker.is-running:hover .hero-ticker__track,
.hero-ticker.is-running:focus-within .hero-ticker__track { animation-play-state: paused; }
@keyframes hero-ticker { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@keyframes hero-ticker-rtl { from { transform: translateX(0); } to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .hero-ticker .hero-ticker__track { animation: none; } }

/* 056: a row that does not fill the wrap is centred (two before/after figures sat on the left with an empty right third); auto-fit with a track ceiling, the set centred. */
.ba-list { display: grid; gap: var(--sp-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 28rem)); justify-content: center; }
.ba-item { margin: 0; display: grid; gap: var(--sp-4); align-content: start; min-width: 0; }
.ba-list > .quote { align-self: start; }
.ba-figure { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "lb la" "b a"; gap: var(--sp-2); }
.ba-figure > img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-lg); }
.ba-figure__before { grid-area: b; }
.ba-figure__after { grid-area: a; }
.ba-figure__label { font-size: var(--step--1); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.ba-figure__label--before { grid-area: lb; }
.ba-figure__label--after { grid-area: la; }
.ba-figure__range { grid-area: range; width: 100%; margin: 0; accent-color: var(--brand); }
.ba-figure__range[hidden] { display: none; }
.ba-figure.is-live { grid-template-columns: minmax(0, 1fr); grid-template-areas: "stack" "range"; gap: var(--sp-3); touch-action: pan-y; cursor: ew-resize; -webkit-user-select: none; user-select: none; }
.ba-figure.is-live > img,
.ba-figure.is-live > .ba-figure__label { grid-area: stack; }
.ba-figure.is-live .ba-figure__after { clip-path: inset(0 0 0 var(--ba-pos, 50%)); }
[dir="rtl"] .ba-figure.is-live .ba-figure__after { clip-path: inset(0 var(--ba-pos, 50%) 0 0); }
.ba-figure.is-live::before { content: ""; grid-area: stack; z-index: 1; justify-self: start; width: 3px; margin-inline-start: calc(var(--ba-pos, 50%) - 1.5px); background: var(--surface); box-shadow: 0 0 0 1px var(--border); pointer-events: none; }
.ba-figure.is-live > .ba-figure__label { z-index: 2; align-self: start; margin: var(--sp-3); padding: var(--sp-1) var(--sp-2); border-radius: var(--radius); background: var(--surface-inverse); color: var(--on-inverse); pointer-events: none; }
.ba-figure.is-live > .ba-figure__label--before { justify-self: start; }
.ba-figure.is-live > .ba-figure__label--after { justify-self: end; }
.ba-item__caption { display: grid; gap: var(--sp-2); }
.ba-item__figure { margin: 0; font-family: var(--font-display); font-size: var(--step-3); line-height: 1; color: var(--text); }
.ba-item__caption .quote__author { font-weight: 700; }
.ba-item__caption .quote__context { color: var(--text-muted); font-size: var(--step--1); }
/* ===== end 054 ===== */

/* 051 shop */
/* The public shop (051): the header cart link, the catalogue (/shop, the category tabs, the product cards and the
   placeholder tile), the product page, the cart, the checkout, the order page and the home blocks products and promo.
   Identical in blocks.css and ai-fallback.css; tokens only; design.css may restyle every hook. Touch targets 2.75rem;
   the sale price and the badges read from tokens (--danger, --brand-strong on --brand-soft) that the gate checks. */
.head-cart { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 2.75rem; padding: var(--sp-2) var(--sp-3); color: inherit; text-decoration: none; font-weight: 600; border: 1px solid color-mix(in srgb, currentColor 30%, transparent); border-radius: var(--radius-full); }
.head-cart:hover { border-color: currentColor; }
.head-cart:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.head-cart__count { display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.6rem; padding-inline: var(--sp-1); background: var(--brand); color: var(--on-brand); border-radius: var(--radius-full); font-size: var(--step--1); font-variant-numeric: tabular-nums; }
.head-cart[data-cart-count="0"] .head-cart__count { background: transparent; color: inherit; border: 1px solid currentColor; }
@media (max-width: 75rem) { .head-cart__label { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }
.shop-head { margin-block-end: var(--sp-5); }
.shop-tabs { display: grid; gap: var(--sp-4); }
.shop-tabs__list { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.shop-tabs__list[hidden], .shop-cats[hidden] { display: none; }
.shop-tabs__list [role="tab"] { display: inline-flex; align-items: center; min-height: 2.75rem; 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; }
.shop-tabs__list [role="tab"][aria-selected="true"] { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.shop-tabs__list [role="tab"]:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.shop-cats { margin-block-end: var(--sp-5); }
.shop-cats ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); max-width: none; }
.shop-cats a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: var(--sp-2) var(--sp-4); color: var(--text); text-decoration: none; font-weight: 600; border: 1px solid var(--border); border-radius: var(--radius-full); }
.shop-cats a[aria-current="page"] { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.shop-empty, .cart-empty { color: var(--text-muted); }
.product-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); max-width: none; }
.product-card { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; padding-block-end: var(--sp-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.product-grid .product-card[hidden] { display: none; }
.product-card > :not(.product-card__media) { margin-inline: var(--sp-4); }
.product-card__media { display: block; aspect-ratio: 4 / 3; background: var(--surface-2); text-decoration: none; }
.product-card__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.product-ph { display: grid; place-items: center; width: 100%; height: 100%; aspect-ratio: 4 / 3; background: var(--surface-2); color: var(--text-muted); }
.product-ph__mark { font-family: var(--font-display); font-size: var(--step-4); font-weight: 700; line-height: 1; }
.product-ph--page { border-radius: var(--radius-lg); }
.product-ph--thumb { display: inline-grid; flex: none; width: 4rem; height: 3rem; aspect-ratio: auto; border-radius: var(--radius); }
.product-ph--thumb .product-ph__mark { font-size: var(--step-1); }
.product-card__badges { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-block: var(--sp-2) 0; }
.product-badge { display: inline-block; padding: 0.1rem var(--sp-2); border: 1px solid transparent; border-radius: var(--radius-full); font-size: var(--step--1); font-weight: 700; }
.product-badge--new { background: var(--brand-soft); color: var(--brand-strong); }
.product-badge--sale { background: var(--surface); color: var(--danger); border-color: currentColor; }
.product-card__name { margin-block: var(--sp-2) 0; font-size: var(--step-1); line-height: 1.25; overflow-wrap: anywhere; }
.product-card__name a { color: var(--text); text-decoration: none; }
.product-card__name a:hover { text-decoration: underline; }
.product-card__summary { margin: 0; color: var(--text-muted); font-size: var(--step--1); }
.product-card .price, .product-page .price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2); margin-block: var(--sp-1) 0; padding: 0; background: none; color: var(--text); font-weight: 700; font-size: var(--step-0); border-radius: 0; }
.product-page .price { font-size: var(--step-2); }
.price--sale .price-now { color: var(--danger); }
.price-old { color: var(--text-muted); font-weight: 400; font-size: var(--step--1); }
.add-to-cart { margin-block-start: auto; }
.product-card .add-to-cart { padding-block-start: var(--sp-2); }
.add-to-cart__btn { width: 100%; min-height: 2.75rem; }
.add-to-cart--page { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3); margin-block: var(--sp-5); }
.add-to-cart--page .field { margin: 0; }
.add-to-cart--page input[type="number"] { width: 6rem; }
.add-to-cart--page .add-to-cart__btn { width: auto; flex: 1 1 12rem; }
.product-split { display: grid; gap: var(--sp-6); grid-template-columns: minmax(0, 1fr); align-items: start; }
.product-photos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
.product-photo { margin: 0; min-width: 0; }
.product-photo:first-child { grid-column: 1 / -1; }
.product-photo__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); }
.product-photo__caption { margin: var(--sp-1) 0 0; color: var(--text-muted); font-size: var(--step--1); }
.product-info h1 { margin-block: var(--sp-2); overflow-wrap: anywhere; }
.product-sku, .product-back { margin-block: var(--sp-2) 0; }
.product-body { margin-block-start: var(--sp-6); max-width: var(--measure); }
.product-more { margin-block-start: var(--sp-7); }
.products__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-2) var(--sp-4); margin-block-end: var(--sp-4); }
.products__head h2 { margin: 0; }
.products__all { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 600; }
[data-carousel="products"]:not(.swiper-initialized) .swiper-wrapper { grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
[data-carousel="products"] .product-card { height: auto; }
.promo--band { background: var(--surface-inverse); color: var(--on-inverse); }
.promo--band h2, .promo--band .promo__lead { color: var(--on-inverse); }
.promo--band :focus-visible { outline-color: var(--on-inverse); }
.promo__inner { display: grid; gap: var(--sp-5); align-items: center; }
.promo__text { max-width: var(--measure); }
.promo__lead { font-size: var(--step-1); }
.promo__actions { margin: var(--sp-4) 0 0; }
.promo__media { margin: 0; }
.promo__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); }
.promo--split { background: var(--surface-2); }
.notice { margin: 0 0 var(--sp-4); padding: var(--sp-3) var(--sp-4); background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-inline-start: 4px solid var(--brand); border-radius: var(--radius); }
.notice--dropped, .notice--full, .notice--empty { border-inline-start-color: var(--warn); }
.cart-grid, .checkout-grid { display: grid; gap: var(--sp-6); grid-template-columns: minmax(0, 1fr); align-items: start; }
.cart-default { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.cart-form { position: relative; min-width: 0; }
.cart-lines, .order-lines { width: 100%; border-collapse: collapse; margin-block-end: var(--sp-4); }
.cart-lines th, .cart-lines td, .order-lines th, .order-lines td { padding: var(--sp-3) var(--sp-2); text-align: start; vertical-align: middle; border-bottom: 1px solid var(--border); }
.cart-lines thead th, .order-lines thead th { font-size: var(--step--1); color: var(--text-muted); font-weight: 600; }
.cart-lines tbody th, .order-lines tbody th { font-weight: 600; }
.cart-lines .cart-num, .order-lines .cart-num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cart-line__product { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.cart-line__product a { color: var(--text); overflow-wrap: anywhere; }
.cart-line__img { flex: none; width: 4rem; height: 3rem; object-fit: cover; border-radius: var(--radius); }
.cart-line__qty input { width: 5rem; min-height: 2.75rem; }
.cart-line__remove .btn { min-height: 2.75rem; }
.cart-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-5); }
.cart-actions .btn { min-height: 2.75rem; }
.cart-totals { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-2) var(--sp-4); margin: 0 0 var(--sp-4); }
.cart-totals dt, .cart-totals dd { margin: 0; }
.cart-totals dd { text-align: end; font-variant-numeric: tabular-nums; }
.cart-totals .cart-totals__total { padding-block-start: var(--sp-2); border-top: 1px solid var(--border); font-weight: 700; font-size: var(--step-1); }
.cart-note { margin-block: 0 var(--sp-2); }
.cart-checkout { width: 100%; }
.checkout-part { margin: 0 0 var(--sp-5); padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--radius-lg); min-width: 0; }
.checkout-part legend { padding-inline: var(--sp-2); font-weight: 700; font-size: var(--step-1); }
.checkout-choice .choice { display: flex; align-items: flex-start; gap: var(--sp-3); margin: 0; }
.checkout-choice .choice input[type="radio"] { flex: none; width: 1.25rem; height: 1.25rem; margin-block-start: 0.9rem; accent-color: var(--brand); }
.checkout-choice .choice label { display: block; flex: 1; min-height: 2.75rem; padding-block: var(--sp-3); font-weight: 600; cursor: pointer; }
.choice__hint { display: block; color: var(--text-muted); font-weight: 400; font-size: var(--step--1); }
.checkout-choice .field { margin-block-start: var(--sp-3); }
.field-err { margin: calc(var(--sp-3) * -1) 0 var(--sp-4); }
.checkout-choice .field-err { margin-block: var(--sp-1) var(--sp-2); }
.checkout-submit { width: 100%; }
.checkout-summary h2 { font-size: var(--step-1); margin-block-start: 0; }
.checkout-lines { list-style: none; margin: 0 0 var(--sp-4); padding: 0; display: grid; gap: var(--sp-2); }
.checkout-line { display: flex; justify-content: space-between; gap: var(--sp-3); }
.checkout-line__sum { font-variant-numeric: tabular-nums; white-space: nowrap; }
.order-code code { font-family: var(--font-mono); font-size: var(--step-2); font-weight: 700; letter-spacing: .12em; }
.order-steps { list-style: none; margin: 0 0 var(--sp-5); padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); max-width: none; }
.order-step { padding: var(--sp-2) var(--sp-4); border: 1px solid var(--border); border-radius: var(--radius-full); color: var(--text-muted); font-weight: 600; }
.order-step--done { background: var(--surface-2); color: var(--text); }
.order-step--current { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.order-page[data-status="cancelled"] .order-step--current { background: var(--surface); color: var(--danger); border-color: currentColor; }
.pay-info { margin-block: var(--sp-5); }
.pay-info p { margin-block: 0 var(--sp-2); }
.iban { font-family: var(--font-mono); font-weight: 700; overflow-wrap: anywhere; }
.order-paid { color: var(--ok); }
@media (min-width: 48rem) {
  .promo--split .promo__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .promo--split.promo--noimage .promo__inner { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 56rem) {
  .product-split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}
@media (min-width: 60rem) {
  .cart-grid, .checkout-grid { grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr); }
  .cart-summary, .checkout-summary { position: sticky; top: var(--sp-5); }
}
@media (max-width: 40rem) {
  .cart-lines thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .cart-lines, .cart-lines tbody, .cart-lines tr { display: block; }
  .cart-lines .cart-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-2) var(--sp-3); padding-block: var(--sp-3); border-bottom: 1px solid var(--border); }
  .cart-lines .cart-line > * { display: block; padding: 0; border: 0; }
  .cart-lines .cart-line__product { grid-column: 1 / -1; display: flex; }
  .cart-lines .cart-line .cart-num { text-align: start; }
  .cart-lines td[data-label]::before { content: attr(data-label); display: block; color: var(--text-muted); font-size: var(--step--1); }
  .cart-lines .cart-line__qty { grid-column: 1 / 2; }
  .cart-lines .cart-line__remove { grid-column: 2 / 3; align-self: end; }
}
@media print {
  .shop-tabs__list, .add-to-cart, .head-cart, .cart-actions, .cart-line__remove, .cart-checkout { display: none !important; }
  .product-grid .product-card[hidden] { display: flex !important; }
}
/* end 051 shop */
/* ---------- 024 "Working on it…" (identical in blocks.css and ai-fallback.css). A page whose content is not
   written yet (app/lib/pending.php): section.working-page > div.wrap > h1 + p.working-note. Tokens only. */
.working-page { padding-block: var(--sp-7); }
.working-page h1 { margin-block: 0 var(--sp-3); }
.working-note { margin: 0; color: var(--text-muted); font-size: var(--step-1); }
/* end 024 working */

/* 063: block widths — the first pass of the composition audit (runner/orchestrator/test/p-063-audit.mjs) */
/* Identical in blocks.css and ai-fallback.css; tokens only; design.css may restyle every hook. The 09.10.2026 hand
   fixes are the pattern: a section uses the wrap, a one-child grid collapses to one column, a reading measure stays on
   the text inside its column (a designer's bare-element measure still applies there). Under 56rem everything stacks
   as before. Text-led sections: about-blurb simple, the faq accordion and a services-full row without a photo are an
   editorial split (the heading block in a first column, the body in a second); the contact-cta band, the promo band
   (and a split promo without its photo) and the emergency panel are a row (the copy left, the action right). */
.about-blurb__grid { display: grid; gap: 0 var(--sp-7); align-items: start; }
.about-blurb__body > :first-child { margin-block-start: 0; }
/* 055 (10.10.2026): the panels paint nothing of their own — the section's paint shows through (the template's tint or the designer's: a designer paints `.emergency-cta--inline` red with white text and the contract names no panel, so an opaque panel put white text on white on a live dentist site). */
.emergency-cta__panel { display: grid; gap: var(--sp-3) var(--sp-6); padding: var(--sp-5); border: 1px solid color-mix(in oklab, var(--danger) 30%, var(--surface)); border-inline-start: 4px solid var(--danger); border-radius: var(--radius-lg); }
.emergency-cta__panel > * { margin: 0; }
.emergency-cta--inline .emergency-cta__panel { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-5); flex: 1 1 100%; padding: var(--sp-3) var(--sp-4); }
.cart-empty-panel { display: grid; gap: var(--sp-4); justify-items: start; padding: var(--sp-6); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.cart-empty-panel > * { margin: 0; }
/* block lists span their column whatever a designer's bare ul rule says (the 08.10.2026 guard, two more lists) */
.stat-list, .price-list { max-width: none; }
/* the stats: a value never pushes its column past the wrap (six values at 1280 did) */
/* 057: a designer who makes .stat-list a flex row gets a definite basis — an inline-size container with min-width 0 has no intrinsic width in a flex row and collapsed to its padding (bl-law2-static, 11.10.2026: the three values overlapped) */
.stat-list > .stat { min-width: 0; container-type: inline-size; flex: 1 1 10rem; max-width: 100%; }
/* 056: a number never breaks inside itself ("200+" became "20 / 0+" on a live site); the size follows the container, the line never wraps. */
.stat__value { font-size: clamp(var(--step-1), 24cqi, var(--step-4)); white-space: nowrap; overflow-wrap: normal; }
/* pricelist list: the groups side by side across the wrap; one group runs its rows in columns */
.pricelist--list .price-groups { max-width: none; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); column-gap: var(--sp-7); }
.pricelist--list .price-groups:has(> :only-child) .price-list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); column-gap: var(--sp-7); }
/* the contact-cta band is the wrap again (it was the 46rem .cta-inner), with the body's width cue */
.contact-cta--band .cta-inner { max-width: var(--container); }
:where(body.w-narrow) .contact-cta--band .cta-inner { max-width: 62rem; }
:where(body.w-wide) .contact-cta--band .cta-inner { max-width: 84rem; }
@media (min-width: 48rem) {
  .map--card .map__inner { grid-template-columns: minmax(0, 1fr) auto; }
}
@media (min-width: 56rem) {
  .about-blurb__grid { grid-template-columns: minmax(14rem, 1fr) minmax(0, 2fr); }
  .faq--accordion > .wrap:has(> h2) { display: grid; grid-template-columns: minmax(14rem, 1fr) minmax(0, 2fr); column-gap: var(--sp-7); align-items: start; }
  .faq--accordion > .wrap:has(> h2) > h2 { grid-column: 1; grid-row: 1 / span 2; }
  .faq--accordion > .wrap:has(> h2) > :not(h2) { grid-column: 2; }
  .faq--accordion .faq-items { max-width: none; }
  :is(.svc-full, .svc-tabs__panel:not([hidden])):not(:has(> .svc-full__body > .svc-full__photo)) { display: grid; grid-template-columns: minmax(14rem, 1fr) minmax(0, 2fr); grid-template-rows: auto 1fr; column-gap: var(--sp-7); align-items: start; }
  :is(.svc-full, .svc-tabs__panel):not(:has(> .svc-full__body > .svc-full__photo)) > :is(.svc-full__name, .svc-full__tag) { grid-column: 1; }
  :is(.svc-full, .svc-tabs__panel):not(:has(> .svc-full__body > .svc-full__photo)) > .svc-full__body { grid-column: 2; grid-row: 1 / span 2; }
  .contact-cta--band .cta-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--sp-7); align-items: center; text-align: start; }
  .contact-cta--band .cta-inner > :not(.hero-actions) { grid-column: 1; }
  .contact-cta--band .cta-inner > .hero-actions { grid-column: 2; grid-row: 1 / span 2; justify-content: flex-end; margin: 0; }
  :is(.promo--band, .promo--noimage) .promo__text { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--sp-7); align-items: center; max-width: none; }
  :is(.promo--band, .promo--noimage) .promo__text > :not(.promo__actions) { grid-column: 1; }
  :is(.promo--band, .promo--noimage) .promo__text > .promo__actions { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
  .emergency-cta--banner .emergency-cta__panel { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .emergency-cta--banner .emergency-cta__panel > :not(.hero-actions) { grid-column: 1; }
  .emergency-cta--banner .emergency-cta__panel > .hero-actions { grid-column: 2; grid-row: 1 / span 2; }
  .cart-empty-panel { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}
/* end 063 */
/* 063: the base surface rhythm, designed path (pages/home.php prints data-surface on every home section after the
   hero from the family's theme.json rhythm). Zero specificity, so every design.css rule wins. The inverse slot paints
   as the tint here: a designer's sheet may style that block for a light ground, and the gate checks token pairs,
   not computed colours (the full inverse paint is the fallback path's, blocks.css). */
:where(.section[data-surface="tint"], .section[data-surface="inverse"]) { background: var(--surface-low, var(--surface-2)); } /* 069 E3: the tier token, --surface-2 by default */
/* end 063 surface */
/* ===== 069: block variants batch 1 (bundle 058) ===== */
/* Identical in blocks.css and ai-fallback.css (the one difference, the sticky booking bar's default top, is marked).
   The hooks of views/blocks/status.php, booking_bar.php and comparison.php and of the new variants and fields of the
   existing blocks (templates/t0-vanilla/MANIFEST.md, 069). Paint sits at zero specificity (:where), so a designer's
   design.css always wins; layout and the list guards are plain class rules as in the 063 pass. New cards and panels
   sit on --surface-lowest, new shadows use --shadow-tint (E3; the var() fallbacks keep the sheet whole before a
   tokens.css carries the tiers). Text on a dark surface is --on-inverse, never a literal (053). Tokens only. */

/* the lists that lay out a block span their column whatever a designer's bare ul / ol rule says */
.status__facts, .hero-stats, .hero-proof__faces, .card__tags, .card__metrics, .compare-list, .case-list,
.case-card__metrics, .selector__list, .team-member__creds, .bento, .claim-list, .compare-result { max-width: none; }

/* B3 the accent word (the stylist owns its colour) and B4 the kicker */
:where(em.accent) { font-style: italic; }
.kicker { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2); margin: 0 0 var(--sp-3); }
:where(.kicker) { font-size: var(--step--1); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
:where(.kicker-index) { color: var(--brand); letter-spacing: .04em; }
/* 071 (bundle 074): on this path the inverse slot paints as the tint (above), so its kicker keeps --text-muted; only the
   stats band, which paints --surface-inverse here too, turns it --on-inverse (the fallback path, blocks.css, keeps both). */
:where(.stats--band) :is(.kicker, .kicker-index) { color: var(--on-inverse); }
/* the faq's editorial split (063) keeps the kicker above its heading in the first column */
@media (min-width: 56rem) {
  .faq--accordion > .wrap:has(> h2) > .kicker { grid-column: 1; grid-row: 1; }
  .faq--accordion > .wrap:has(> .kicker) > h2 { grid-row: 2 / span 2; }
}

/* A1 the status strip (outside <main>, before or after the header) and the G1 pulse dot */
:where(.status) { font-size: var(--step--1); line-height: 1.4; }
:where(.status--dark) { background: var(--surface-inverse); color: var(--on-inverse); }
:where(.status--tint) { background: var(--surface-low, var(--surface-2)); color: var(--text); border-block-end: 1px solid var(--border); }
:where(.status--dark) :focus-visible { outline-color: var(--on-inverse); }
.status__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-4); padding-block: var(--sp-2); }
.status__facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); min-width: 0; }
.status__fact { min-width: 0; overflow-wrap: anywhere; }
.status__fact + .status__fact { padding-inline-start: var(--sp-4); }
:where(.status__fact + .status__fact) { border-inline-start: 1px solid color-mix(in srgb, currentColor 35%, transparent); }
.status__link { display: inline-flex; align-items: center; gap: var(--sp-1); margin-inline-start: auto; font-weight: 700; color: inherit; }
:where(.status__link) { text-decoration: underline; text-underline-offset: .2em; }
.pulse-dot { position: relative; display: inline-block; flex: none; width: .55rem; height: .55rem; border-radius: 50%; }
:where(.pulse-dot) { background: var(--ok, var(--brand)); }
.pulse-dot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: inherit; opacity: 0; }

/* A2 the booking bar: a row of selects and the button (band | sticky; numbered steps) */
.booking-bar__form { display: grid; gap: var(--sp-3) var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); align-items: end; max-width: none; }
:where(.booking-bar__form) { padding: var(--sp-4); background: var(--surface-lowest, var(--surface)); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 10px 28px var(--shadow-tint, rgb(0 0 0 / .06)); }
.booking-bar__field { display: grid; gap: var(--sp-1); min-width: 0; }
:where(.booking-bar__label) { font-size: var(--step--1); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
:where(.booking-bar__step) { color: var(--brand); }
.booking-bar__select { display: block; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
:where(.booking-bar__select) { padding: var(--sp-3); font: inherit; color: var(--text); background: var(--surface-lowest, var(--surface)); border: 1px solid var(--border); border-radius: var(--radius); }
.booking-bar__submit { min-height: 2.9rem; width: 100%; background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.booking-bar__submit:hover { background: var(--brand-strong); border-color: var(--brand-strong); color: var(--on-brand); }
.booking-bar--sticky { padding-block: var(--sp-4); }
@media (min-width: 48rem) {
  .booking-bar--sticky { position: sticky; top: var(--bk-top, 0px); z-index: 30; } /* 069: the designed path's header does not stick; ui.js (bookingSticky) writes --bk-top = a sticky header's height */
  :where(body.mode-one-page) .booking-bar--sticky { top: var(--bk-top, 4.5rem); } /* the one-pager's header sticks on both paths */
}
:where(.booking-bar--sticky.is-stuck) .booking-bar__form { box-shadow: 0 14px 36px var(--shadow-tint, rgb(0 0 0 / .1)); }

/* A3 them versus us: pair (two panels) and table (three columns; cards under 40rem) */
.compare-pair { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); align-items: stretch; margin-block-start: var(--sp-5); }
.compare-panel { position: relative; min-width: 0; display: grid; align-content: start; gap: var(--sp-3); padding: var(--sp-6) var(--sp-5) var(--sp-5); }
:where(.compare-panel) { border-radius: var(--radius-lg); }
:where(.compare-panel--them) { background: var(--surface-low, var(--surface-2)); color: var(--text); border: 1px solid var(--border); }
:where(.compare-panel--us) { background: var(--surface-inverse); color: var(--on-inverse); border-block-start: 3px solid var(--brand); box-shadow: 0 16px 40px var(--shadow-tint, rgb(0 0 0 / .08)); }
:where(.compare-panel--us) :is(h3, .compare-item, .compare-icon) { color: var(--on-inverse); }
:where(.compare-panel--us) :focus-visible { outline-color: var(--on-inverse); }
.compare-panel__title { margin: 0; font-size: var(--step-1); }
.compare-ribbon { position: absolute; inset-block-start: 0; inset-inline-end: var(--sp-5); transform: translateY(-50%); padding: var(--sp-1) var(--sp-3); border-radius: var(--radius-full); font-size: var(--step--1); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
:where(.compare-ribbon) { background: var(--brand); color: var(--on-brand); }
.compare-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.compare-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-2); align-items: start; min-width: 0; }
.compare-item > .icon { margin-block-start: .15em; }
:where(.compare-panel--them .compare-icon) { color: var(--text-muted); }
.compare-result { margin: var(--sp-5) 0 0; font-size: var(--step-1); }
:where(.compare-result__label) { font-weight: 800; }
.compare-table-wrap { max-width: 100%; margin-block-start: var(--sp-5); }
.compare-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.compare-table :is(th, td) { padding: var(--sp-3) var(--sp-4); text-align: start; vertical-align: top; }
:where(.compare-table) :is(th, td) { border-block-end: 1px solid var(--border); }
:where(.compare-table thead th) { font-size: var(--step--1); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
:where(.compare-table) .compare-table__us { background: var(--surface-inverse); color: var(--on-inverse); border-block-end-color: color-mix(in srgb, var(--on-inverse) 20%, transparent); }
:where(.compare-table thead) .compare-table__us { border-block-start: 3px solid var(--brand); border-start-start-radius: var(--radius); border-start-end-radius: var(--radius); }
.compare-table__note { display: block; margin-block-start: var(--sp-1); font-size: var(--step--1); }
:where(.compare-table__them .compare-table__note) { color: var(--text-muted); }
@media (max-width: 40rem) {
  .compare-table, .compare-table tbody, .compare-table tr, .compare-table th, .compare-table td { display: block; width: auto; }
  .compare-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .compare-table tr { margin-block-end: var(--sp-4); overflow: hidden; }
  :where(.compare-table tr) { border: 1px solid var(--border); border-radius: var(--radius-lg); }
  .compare-table tbody th { font-size: var(--step-0); }
  .compare-table td::before { content: attr(data-label); display: block; margin-block-end: var(--sp-1); font-size: var(--step--1); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
}

/* B1 the social-proof line and B2 the stat tiles under the hero's buttons (the hero's own text colour) */
.hero-proof { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin-block-start: var(--sp-4); font-size: var(--step--1); }
.hero-proof__faces { list-style: none; margin: 0; padding: 0; display: flex; }
.hero-proof__faces > li + li { margin-inline-start: -.4rem; }
.medallion { display: inline-grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-full); font-weight: 700; font-size: .75rem; line-height: 1; letter-spacing: 0; }
:where(.medallion) { background: var(--brand); color: var(--on-brand); box-shadow: 0 0 0 2px var(--surface); }
.hero-proof__face { display: block; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-full); object-fit: cover; }
:where(.hero-proof__face) { box-shadow: 0 0 0 2px var(--surface); }
.hero-proof__stars { display: inline-flex; gap: 2px; }
.hero-proof__stars .icon { fill: currentColor; }
.hero-proof__value { font-weight: 800; }
.hero-proof__award { font-weight: 700; }
.hero-stats { list-style: none; margin: var(--sp-5) 0 0; padding: var(--sp-4) 0 0; display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr)); }
:where(.hero-stats) { border-block-start: 1px solid color-mix(in srgb, currentColor 24%, transparent); }
.hero-stat { display: grid; gap: var(--sp-1); min-width: 0; }
.hero-stat__value { font-size: var(--step-2); line-height: 1; white-space: nowrap; }
.hero-stat__label { font-size: var(--step--1); }
:is(.hero--centered, .hero--minimal)[data-hero] .hero-proof { justify-content: center; }
:is(.hero--centered, .hero--minimal)[data-hero] .hero-stats { text-align: center; }

/* C1, C2 indexed and priced service cards */
.card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin: 0; }
:where(.card__index) { display: inline-grid; place-items: center; min-width: 2.5rem; padding: var(--sp-1) var(--sp-2); border: 1px solid var(--border); border-radius: var(--radius); font-size: var(--step--1); font-weight: 700; color: var(--text-muted); }
.card .card__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2); margin: 0; }
:where(.card__duration) { font-size: var(--step--1); color: var(--text-muted); }
.card__tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.tag { display: inline-block; padding: 2px var(--sp-2); border-radius: var(--radius-full); font-size: var(--step--1); }
:where(.tag) { background: var(--surface-low, var(--surface-2)); border: 1px solid var(--border); color: var(--text); }
.card .card__ideal { font-size: var(--step--1); }
:where(.card__ideal-label) { font-weight: 700; color: var(--text); }
.card__cta { align-self: flex-start; font-weight: 700; }
:where(.card__cta) { color: var(--brand); text-decoration: underline; text-underline-offset: .2em; }
.card .card__claim, .card .card__metrics { margin: auto 0 0; padding-block-start: var(--sp-3); }
:where(.card__claim, .card__metrics) { border-block-start: 1px solid var(--border); }
.card .card__claim { font-size: var(--step--1); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text); }
.card__metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.card__metric { display: flex; flex-direction: column-reverse; gap: var(--sp-1); min-width: 0; }
.card__metric dt { font-size: var(--step--1); letter-spacing: .08em; text-transform: uppercase; }
:where(.card__metric dt) { color: var(--text-muted); }
.card__metric dd { margin: 0; font-size: var(--step-2); font-weight: 700; line-height: 1; }

/* C9 selector list + detail (services, team): the list left, the chosen item right; one column under 56rem */
.selector { display: grid; gap: var(--sp-5); }
.selector__list { list-style: none; margin: 0; padding: 0; display: grid; align-content: start; }
.selector__item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-3); align-items: baseline; padding: var(--sp-3) var(--sp-2); text-decoration: none; color: inherit; }
:where(.selector__item) { border-block-end: 1px solid var(--border); }
:where(.selector__item[aria-current="true"]) { font-weight: 700; color: var(--brand-strong); }
:where(.selector__index) { font-size: var(--step--1); color: var(--text-muted); }
.selector__name { font-size: var(--step-1); overflow-wrap: break-word; }
.selector__panels { min-width: 0; }
.selector__panel { display: grid; gap: var(--sp-4); align-items: start; min-width: 0; padding: var(--sp-5); }
.selector__panel[hidden] { display: none; }
:where(.selector__panel) { background: var(--surface-lowest, var(--surface)); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 10px 30px var(--shadow-tint, rgb(0 0 0 / .06)); }
.selector__photo { margin: 0; min-width: 0; }
.selector__photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.selector__body > .medallion { width: 5rem; height: 5rem; font-size: var(--step-2); }
.selector__body { display: grid; gap: var(--sp-2); align-content: start; min-width: 0; }
.selector__title { margin: 0; font-size: var(--step-2); }
.selector__summary { margin: 0; }
.selector__meta { margin: 0; }
.selector__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin: var(--sp-2) 0 0; }
@media (min-width: 40rem) { .selector__panel:has(> .selector__photo) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 56rem) { .selector { grid-template-columns: minmax(16rem, 1fr) minmax(0, 2fr); align-items: start; } }

/* C3 the featured pricing tier (pricelist grid with featured, badge or terms: pricelist--tiers) */
.price-item__badge { display: inline-block; padding: 2px var(--sp-3); border-radius: var(--radius-full); font-size: var(--step--1); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
:where(.price-item__badge) { background: var(--brand); color: var(--on-brand); }
:where(.price-item__unit) { font-size: var(--step--1); color: var(--text-muted); }
.price-item__price.price { display: inline; padding: 0; background: none; color: inherit; font-size: inherit; border-radius: 0; }
.price-item__terms { flex-basis: 100%; margin: 0; font-size: var(--step--1); }
:where(.price-item__terms) { color: var(--text-muted); }
.pricelist--tiers .price-groups { grid-template-columns: minmax(0, 1fr); }
.pricelist--tiers .price-group { padding: 0; background: none; border: 0; box-shadow: none; }
.pricelist--tiers .price-list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--sp-5) var(--sp-4); align-items: stretch; padding-block-start: var(--sp-4); }
.pricelist--tiers .price-item { position: relative; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-6) var(--sp-5) var(--sp-5); min-width: 0; }
:where(.pricelist--tiers .price-item) { background: var(--surface-lowest, var(--surface)); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.pricelist--tiers .price-item__badge { position: absolute; inset-block-start: 0; inset-inline-start: var(--sp-5); transform: translateY(-50%); }
.pricelist--tiers .price-item__dots { display: none; }
.pricelist--tiers .price-item__name { font-size: var(--step-1); }
.pricelist--tiers .price-item__price { font-size: var(--step-3); font-weight: 700; line-height: 1.05; }
.pricelist--tiers .price-item__terms { flex-basis: auto; margin-block-start: auto; padding-block-start: var(--sp-3); width: 100%; }
:where(.pricelist--tiers .price-item__terms) { border-block-start: 1px solid var(--border); }
:where(.pricelist--tiers .price-item--featured) { border: 2px solid var(--brand); box-shadow: 0 18px 44px var(--shadow-tint, rgb(0 0 0 / .1)); }
@media (min-width: 48rem) { .pricelist--tiers .price-item--featured { transform: translateY(calc(var(--sp-3) * -1)); } }
:where(.section[data-surface="inverse"] .price-item--featured) {
  background: var(--on-inverse); color: var(--surface-inverse);
  --text: var(--surface-inverse); --text-muted: var(--surface-inverse); --border: color-mix(in srgb, var(--surface-inverse) 20%, transparent);
}

/* C4, C10 people: credentials, availability, the booking link, the quotes variant, the initials medallion */
.team-member__avatar.medallion { width: 5rem; height: 5rem; font-family: var(--font-display); font-weight: 800; font-size: var(--step-2); box-shadow: none; }
.team-member__avatar.medallion { background: var(--brand); color: var(--on-brand); }
.team-member__creds { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); }
.cred { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 2px var(--sp-2); border-radius: var(--radius-full); font-size: var(--step--1); }
:where(.cred) { background: var(--surface-low, var(--surface-2)); border: 1px solid var(--border); color: var(--text); }
:where(.cred-icon) { color: var(--brand); }
.team-member__availability { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-2) 0 0; font-size: var(--step--1); font-weight: 600; }
.team-member__cta { display: inline-block; margin-block-start: var(--sp-2); font-weight: 700; }
:where(.team-member__cta) { color: var(--brand); text-decoration: underline; text-underline-offset: .2em; }
.team--quotes .team-list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
.team-member--quote { grid-template-columns: 6rem minmax(0, 1fr); align-items: start; gap: var(--sp-4); }
.team-member--quote > :is(.team-member__photo, .team-member__avatar) { width: 6rem; height: 6rem; border-radius: var(--radius-full); }
.team-member--quote .team-member__quote { font-size: var(--step-1); }

/* C5 press quotes, the verified tag (every variant), C6 case cards */
.testimonials--press .quote-list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.quote__source { margin: 0; font-size: var(--step--1); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
:where(.quote__source) { color: var(--text-muted); }
.quote--press .quote__text { font-family: var(--font-display); font-style: italic; font-size: var(--step-1); line-height: 1.4; }
.quote__date { margin: 0; font-size: var(--step--1); }
:where(.quote__date) { color: var(--text-muted); }
.quote__verified { display: inline-flex; align-items: center; gap: var(--sp-1); justify-self: start; font-size: var(--step--1); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
:where(.quote__verified) { color: var(--text-muted); }
:where(.verified-icon) { color: var(--ok, var(--brand)); }
.case-list { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); align-items: start; }
.case-card .ba-figure > img { aspect-ratio: 4 / 3; }
.case-card { display: grid; gap: var(--sp-4); align-content: start; min-width: 0; padding: var(--sp-4); }
:where(.case-card) { background: var(--surface-lowest, var(--surface)); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 10px 30px var(--shadow-tint, rgb(0 0 0 / .06)); }
.case-card__photo { margin: 0; min-width: 0; }
.case-card__photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.case-card__body { display: grid; gap: var(--sp-3); align-content: start; min-width: 0; }
.case-card__goal { margin: 0; font-size: var(--step-1); font-weight: 700; }
.case-card__metrics { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 7rem), 1fr)); }
.case-metric { display: grid; gap: var(--sp-1); padding-block-start: var(--sp-2); min-width: 0; }
:where(.case-metric) { border-block-start: 2px solid var(--brand); }
.case-metric__delta { font-size: var(--step-2); line-height: 1; white-space: nowrap; }
.case-metric__label { font-size: var(--step--1); }
:where(.case-metric__label) { color: var(--text-muted); }
.case-card__specs { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); margin: 0; font-size: var(--step--1); }
.case-card__specs > div { display: flex; gap: var(--sp-1); }
:where(.case-card__specs dt) { color: var(--text-muted); }
.case-card__specs dd { margin: 0; font-weight: 700; }
.case-card .quote__by { display: flex; flex-wrap: wrap; gap: 0 var(--sp-2); margin: 0; font-size: var(--step--1); }
:where(.case-card .quote__by) { color: var(--text-muted); }

/* C7 the claims strip (icon + text, hairline dividers, no counter) and C8 the dark stats band */
.claim-list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 0; }
.claim { display: flex; align-items: flex-start; gap: var(--sp-3); min-width: 0; padding: var(--sp-3) var(--sp-4); }
:where(.claim + .claim) { border-inline-start: 1px solid var(--border); }
.claim > .icon { flex: none; }
:where(.claim-icon) { color: var(--brand); }
.claim__value { font-weight: 800; }
.claim__text { font-weight: 600; min-width: 0; overflow-wrap: break-word; }
@media (max-width: 40rem) {
  :where(.claim + .claim) { border-inline-start: 0; border-block-start: 1px solid var(--border); }
  .claim { padding-inline: 0; }
}
:where(.stats--band) {
  background: var(--surface-inverse); color: var(--on-inverse);
  --text: var(--on-inverse); --text-muted: var(--on-inverse); --text-subtle: var(--on-inverse);
  --border: color-mix(in srgb, var(--on-inverse) 24%, transparent);
}
:where(.stats--band) :is(h2, .stat__value, .stat__label, .kicker) { color: var(--on-inverse); }
:where(.stats--band) :focus-visible { outline-color: var(--on-inverse); }
.stats--band .stat-list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 0; }
.stats--band .stat-list > .stat { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-3); padding: var(--sp-3) var(--sp-5); }
:where(.stats--band .stat + .stat) { border-inline-start: 1px solid var(--border); }
@media (max-width: 40rem) { :where(.stats--band .stat + .stat) { border-inline-start: 0; border-block-start: 1px solid var(--border); } }

/* C11 the gallery bento: 8/4 then 4/8 on a 12-column grid, gradient captions, one fact cell; one column under 48rem */
.bento { display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr); }
.bento__cell { position: relative; margin: 0; min-width: 0; overflow: hidden; border-radius: var(--radius-lg); }
:where(.bento__cell) { background: var(--surface-low, var(--surface-2)); }
.bento__cell > .lightbox { display: block; height: 100%; }
.bento__img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.bento__caption { position: absolute; inset-inline: 0; inset-block-end: 0; padding: var(--sp-6) var(--sp-4) var(--sp-3); font-size: var(--step--1); font-weight: 600; }
:where(.bento__caption) { color: var(--on-inverse); background: linear-gradient(to top, color-mix(in srgb, var(--surface-inverse) 86%, transparent), transparent); }
.bento__fact { display: grid; align-content: center; min-width: 0; padding: var(--sp-5); border-radius: var(--radius-lg); }
:where(.bento__fact) { background: var(--surface-inverse); color: var(--on-inverse); }
.bento__fact dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: var(--sp-4); margin: 0; }
.bento__fact dt { font-size: var(--step--1); letter-spacing: .08em; text-transform: uppercase; }
.bento__fact dd { margin: 0; font-size: var(--step-3); font-weight: 700; line-height: 1.1; }
@media (min-width: 48rem) {
  .bento { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: minmax(clamp(14rem, 24vw, 20rem), auto); }
  .bento__cell--wide { grid-column: span 8; }
  .bento__cell--narrow { grid-column: span 4; }
  .bento__fact { grid-column: 1 / -1; }
  /* the photo fills its cell and never sizes the row */
  .bento__cell > :is(.lightbox, .bento__img, .gallery-item__frame) { position: absolute; inset: 0; }
  :where(body.im-framed-caption) .bento__cell > :is(.lightbox, .bento__img, .gallery-item__frame) { inset: var(--sp-3); }
  .bento__img { aspect-ratio: auto; }
}

/* C12 the numbered accordion's CTA row */
div.svc-full__actions { margin-block-start: var(--sp-4); }

/* D1 framed photos with a floating caption card; D2 mono-contrast portraits (the page stays in colour) */
.frame-caption { margin: var(--sp-2) 0 0; font-size: var(--step--1); }
:where(.frame-caption) { color: var(--text-muted); }
:where(body.im-framed-caption) :is(.hero-media, .about-photo, .gallery-item, .bento__cell) { position: relative; padding: var(--sp-3); background: var(--surface-low, var(--surface-2)); border: 1px solid var(--border); border-radius: var(--radius-lg); }
:where(body.im-framed-caption) .frame-caption { position: absolute; inset-inline-start: var(--sp-5); inset-block-end: var(--sp-5); max-width: calc(100% - 2 * var(--sp-5)); margin: 0; padding: var(--sp-2) var(--sp-3); background: var(--surface-lowest, var(--surface)); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 22px var(--shadow-tint, rgb(0 0 0 / .08)); font-weight: 600; }
:where(body.im-mono-contrast) :is(.hero-img, .hero-bg, .team-member__photo, .about-photo__img, .hero-proof__face, .selector__photo img) { filter: grayscale(1) contrast(1.15); }
:where(body.im-mono-contrast) :is(.team-member__photo, .about-photo__img, .hero-img, .selector__photo img) { mask-image: linear-gradient(to bottom, var(--text) 72%, transparent); -webkit-mask-image: linear-gradient(to bottom, var(--text) 72%, transparent); }

/* D3 tinted blobs and D4 grid paper behind the hero and the closing contact band (clipped: no overflow) */
:where(body.dc-blobs, body.dc-grid-paper) :is(.hero, .contact-cta) { position: relative; isolation: isolate; overflow: hidden; }
:where(body.dc-blobs) :is(.hero, .contact-cta)::before { content: ""; position: absolute; inset: -20%; z-index: -1; pointer-events: none; filter: blur(48px); background: radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--brand) 24%, transparent) 0 18%, transparent 34%), radial-gradient(circle at 12% 88%, color-mix(in srgb, var(--brand-soft) 70%, transparent) 0 16%, transparent 32%); }
:where(body.dc-blobs) .contact-cta::before { background: radial-gradient(circle at 82% 18%, color-mix(in srgb, currentColor 16%, transparent) 0 18%, transparent 34%), radial-gradient(circle at 12% 88%, color-mix(in srgb, currentColor 10%, transparent) 0 16%, transparent 32%); }
:where(body.dc-grid-paper) :is(.hero, .contact-cta) { background-image: linear-gradient(color-mix(in srgb, currentColor 8%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, currentColor 8%, transparent) 1px, transparent 1px); background-size: 32px 32px; }

/* D5 offset ink (the press of motion.css collapses it), D6 hairline grid, D7 dashed rules */
:where(body.dc-offset-ink) :is(.btn, .card) { border-color: var(--text); box-shadow: 2px 2px 0 0 var(--text); }
:where(body.dc-offset-ink) .btn { border-width: 2px; }
:where(body.dc-hairline-grid) :is(.cards, .quote-list, .case-list) { gap: 0; padding: 0 1px 1px 0; }
:where(body.dc-hairline-grid) :is(.cards, .quote-list, .case-list) > * { margin: 0 -1px -1px 0; }
:where(body.dc-hairline-grid) :is(.card, .quote, .case-card, .selector__panel, .compare-panel--them, .pricelist--tiers .price-item) { border: 1px solid var(--border); border-radius: 0; box-shadow: none; }
:where(body.dc-dashed-rules) .price-item__dots { border-block-end: 2px dotted color-mix(in srgb, var(--text) 40%, transparent); }
:where(body.dc-dashed-rules) .process--timeline .steps li { border-inline-start-style: dashed; }
:where(body.dc-dashed-rules) .process--numbered .steps li { border-style: dashed; }
:where(body.dc-dashed-rules) :is(.svc-spreads, .hero-stats, .card__claim, .card__metrics, .pricelist--tiers .price-item__terms) { border-block-start-style: dashed; }
:where(body.dc-dashed-rules) :is(.svc-spread, .selector__item, .compare-table th, .compare-table td) { border-block-end-style: dashed; }
:where(body.dc-dashed-rules) :is(.status__fact + .status__fact, .claim + .claim, .stats--band .stat + .stat) { border-inline-start-style: dashed; }

/* E1 the mono role: prices, times, durations, ids, kicker indexes and stat values (this rule comes after every
   other template rule on these selectors; a design.css rule still wins) */
:is(.price, .price-item__price, .stat__value, .hero-stat__value, .kicker-index, .timetable-slot__time, .card__index, .card__duration,
.svc-full__index, .case-metric__delta, .booking-bar__step, .selector__index) { font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); font-variant-numeric: tabular-nums; }
/* ===== end 069 ===== */

/* ===== parts/080-a-first-screen.css (080: a template block partial) ===== */
/* 080 A (block variants batch 2, t2): the configurator (views/blocks/configurator.php), the panels hero and the hero
   asides quiz, choices and kpi (views/blocks/hero.php), the subscribe band (views/blocks/contact_cta.php) and the
   enquiry form's scroll target (views/enquiry_form.php). build-style appends this partial on both paths (after
   blocks.css on the fallback path, after ai-fallback.css on the designed path). Token-only. Every block rule sits at
   zero specificity (:where), so a designer's design.css always wins; where a rule must beat a bare element rule of
   base.css (a, h2, dd) it is :where(<context>) <element>, one element of specificity. The list guards are plain class
   rules as in 069 (a designer's bare ul / ol measure must not narrow a block's list). Text sits only on gated pairs:
   --text on --bg / --surface / --surface-lowest, --on-inverse on --surface-inverse (the summary rescopes the text
   tokens there, as 063's inverse surface does), --on-brand on --brand. Every new control has a :focus-visible ring in
   --brand (--on-inverse on the inverse summary). The dark summary inside a light page carries a 1px --brand top
   hairline. Prices, totals, minutes and figures are in the mono face with tabular figures. One column under 48rem;
   nothing forces a column wider than a 390px screen. The primary buttons carry .btn-call (the template's primary). */

/* the lists that lay out a block span their column whatever a designer's bare ul / ol rule says */
.configurator__options, .configurator__picked, .hero-panel__list, .quiz__options, .choice-cells, .kpi-card__items,
.subscribe__assurances, .hero-panel .pins-legend { max-width: none; }
:where(.configurator__options, .configurator__picked, .hero-panel__list, .quiz__options, .choice-cells, .subscribe__assurances, .hero-panel .pins-legend) { list-style: none; margin: 0; padding: 0; }

/* the enquiry form the configurator's CTA scrolls to clears a sticky header */
:where(form[data-enquiry-form]) { scroll-margin-top: var(--sp-9); }

/* ---------- A1 the configurator ---------- */
:where(.configurator) { min-width: 0; }
:where(.configurator__heading) { margin: 0 0 var(--sp-3); }
:where(.configurator__lead) { max-width: var(--measure); margin: 0 0 var(--sp-6); }
:where(.configurator__form) { display: grid; gap: var(--sp-5); align-items: start; max-width: none; min-width: 0; }
@media (min-width: 48rem) {
  :where(.configurator--split .configurator__form) { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
  :where(.configurator--split .configurator__summary) { position: sticky; top: var(--sp-7); }
}
:where(.configurator__steps) { display: grid; gap: var(--sp-6); min-width: 0; }
:where(.configurator__step) { min-width: 0; margin: 0; padding: 0; border: 0; }
:where(.configurator__step) legend { display: flex; align-items: baseline; gap: var(--sp-3); margin: 0 0 var(--sp-3); padding: 0; font-family: var(--font-display, var(--font)); font-size: var(--step-1); font-weight: 700; color: var(--text); }
:where(.configurator__index) { padding: var(--sp-1) var(--sp-2); border: 1px solid var(--border); border-radius: var(--radius); font-size: var(--step--1); letter-spacing: .08em; }
:where(.configurator__options) { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
:where(.configurator--panel .configurator__options) { grid-template-columns: minmax(0, 1fr); }
:where(.configurator__options > li) { min-width: 0; }

/* A2 the option card: the native input, an optional swatch (svg rect) or thumbnail, the code, name and note, the price
   and the minutes; the Selected state from :has(:checked) (without :has the native input shows the choice) */
:where(.option-card) {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "input code price" "input name price" "input note minutes";
  column-gap: var(--sp-3); align-items: start; box-sizing: border-box; height: 100%; min-width: 0;
  padding: var(--sp-4); background: var(--surface-lowest, var(--surface)); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-lg); cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
:where(.option-card:has(> .option-card__swatch, > .option-card__thumb)) {
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  grid-template-areas: "input swatch code price" "input swatch name price" "input swatch note minutes";
}
:where(.option-card:hover) { border-color: var(--brand); }
:where(.option-card:has(.option-card__input:checked)) { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
:where(.option-card:has(.option-card__input:focus-visible)) { outline: 3px solid var(--brand); outline-offset: 2px; }
:where(.option-card__input) { grid-area: input; width: 1.15rem; height: 1.15rem; margin: var(--sp-1) 0 0; accent-color: var(--brand); }
:where(.option-card__input:focus-visible) { outline: 3px solid var(--brand); outline-offset: 2px; }
:where(.option-card__swatch, .option-card__thumb) { grid-area: swatch; display: block; }
:where(.option-card__swatch) { border-radius: var(--radius); outline: 1px solid var(--border); }
:where(.option-card__thumb) { width: 3rem; height: 3rem; object-fit: cover; border-radius: var(--radius); }
:where(.option-card__code) { grid-area: code; font-size: var(--step--1); letter-spacing: .08em; text-transform: uppercase; }
:where(.option-card__name) { grid-area: name; font-weight: 700; overflow-wrap: anywhere; }
:where(.option-card__note) { grid-area: note; margin-top: var(--sp-1); font-size: var(--step--1); overflow-wrap: anywhere; }
:where(.option-card__price) { grid-area: price; justify-self: end; font-weight: 700; white-space: nowrap; }
:where(.option-card__minutes) { grid-area: minutes; justify-self: end; align-self: end; font-size: var(--step--1); white-space: nowrap; }

/* the summary: a dark panel inside the light section, the 1px brand hairline on top; the text tokens rescoped */
:where(.configurator__summary) {
  display: grid; gap: var(--sp-3); align-content: start; min-width: 0; box-sizing: border-box;
  padding: var(--sp-5); background: var(--surface-inverse); color: var(--on-inverse);
  --text: var(--on-inverse); --text-muted: var(--on-inverse); --text-subtle: var(--on-inverse);
  --border: color-mix(in srgb, var(--on-inverse) 24%, transparent);
  border-top: 1px solid var(--brand); border-radius: var(--radius-lg); box-shadow: var(--shadow-2);
}
:where(.configurator__summary) :is(h3, h4, p, li) { color: var(--on-inverse); }
:where(.configurator__summary) :focus-visible { outline-color: var(--on-inverse); }
:where(.configurator__summary-title) { margin: 0; font-size: var(--step-1); }
:where(.configurator__picked) { display: grid; gap: var(--sp-1); font-size: var(--step--1); }
:where(.configurator__picked > li) { padding-block: var(--sp-1); border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
:where(.configurator__total) { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-3); margin: 0; }
:where(.configurator__total-label) { font-size: var(--step--1); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
:where(.configurator__total-price) { margin-inline-start: auto; font-size: var(--step-2); font-weight: 700; }
:where(.configurator__total-minutes) { font-weight: 700; }
:where(.configurator__total-minutes:empty, .configurator__total-price:empty) { display: none; }
:where(.configurator__cta) { width: 100%; max-width: 100%; white-space: normal; }
:where(.configurator__footnote) { margin: 0; font-size: var(--step--1); }

/* the mono numbers (069 E1's rule for the new hooks) */
:where(.option-card__price, .option-card__minutes, .option-card__code, .configurator__index, .configurator__total-minutes,
.configurator__total-price, .kpi__value, .kpi__delta, .hero-panel .pins-legend__marker, .hero-panel .pin__label) {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); font-variant-numeric: tabular-nums;
}

/* ---------- B1 the panels hero ---------- */
:where(.hero-panels__head) { margin-bottom: var(--sp-6); }
:where(.hero-panels) { display: grid; gap: var(--sp-4); align-items: start; position: relative; z-index: 2; }
@media (min-width: 48rem) { :where(.hero-panels) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { :where(.hero-panels--3) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
:where(.hero-panel) {
  display: grid; gap: var(--sp-4); align-content: start; min-width: 0; box-sizing: border-box;
  padding: var(--sp-5); background: var(--surface); color: var(--text); text-align: start; overflow-wrap: anywhere;
  border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-2);
}
:where(.hero-panel) :is(h2, h3, h4, label, p, dt, dd) { color: var(--text); }
:where(.hero-panel) h2 { margin: 0; font-size: var(--step-1); }
:where(.hero-panel) .hero-actions { margin: 0; }
:where(.hero-panel) .btn { max-width: 100%; white-space: normal; }
:where(.hero-panel) :is(form, .field) { min-width: 0; }
:where(.hero-panel) .field { margin-bottom: var(--sp-3); }
:where(.hero-panel) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { display: block; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
:where(.hero-panel--form) textarea { min-height: 6rem; }
:where(.hero-panel--configurator .configurator__summary) { padding: var(--sp-4); }
:where(.hero-panel--configurator .option-card) { padding: var(--sp-3); }
/* list */
:where(.hero-panel__list) { display: grid; gap: 0; }
:where(.hero-panel__item) { border-top: 1px solid var(--border); }
:where(.hero-panel__item) > :is(a, span:first-child) { display: grid; gap: var(--sp-1); padding-block: var(--sp-3); }
:where(.hero-panel__list) a { color: var(--text); text-decoration: none; }
:where(.hero-panel__list) a:hover .hero-panel__label { text-decoration: underline; text-underline-offset: 3px; }
:where(.hero-panel__list) a:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
:where(.hero-panel__label) { font-weight: 700; }
:where(.hero-panel__text) { font-size: var(--step--1); }
/* image with the pins (an SVG in percent over the photo) and their legend */
:where(.hero-panel--image) { padding: var(--sp-3); }
:where(.hero-panel--image) > h2 { padding: var(--sp-2) var(--sp-2) 0; }
:where(.hero-panel__figure) { position: relative; display: grid; gap: var(--sp-2); margin: 0; }
:where(.hero-panel__media) { position: relative; display: block; overflow: hidden; border-radius: var(--radius); }
:where(.hero-panel__img) { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
:where(.hero-panel__media) .pins { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
:where(.hero-panel__media .pin__dot) { fill: var(--brand); stroke: var(--on-brand); stroke-width: 2; }
:where(.hero-panel__media .pin__label) { fill: var(--on-brand); font-size: var(--step--1); font-weight: 700; }
:where(.hero-panel .pins-legend) { display: grid; gap: var(--sp-2); padding: 0 var(--sp-2) var(--sp-2); font-size: var(--step--1); }
:where(.hero-panel .pins-legend__item) { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--sp-2); align-items: start; }
:where(.hero-panel .pins-legend__marker) { grid-row: span 2; display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: var(--radius-full); background: var(--brand); color: var(--on-brand); font-weight: 700; }
:where(.hero-panel .pins-legend__title, .hero-panel .pins-legend__text) { grid-column: 2; }
:where(.hero-panel--image .frame-caption) { padding-inline: var(--sp-2); }

/* ---------- A3 the hero asides: quiz, choice cells, kpi card ---------- */
:where(.hero-aside) {
  min-width: 0; max-width: 100%; box-sizing: border-box; padding: var(--sp-5); text-align: start; overflow-wrap: anywhere;
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-2);
}
:where(.hero-aside) :is(h2, h3, p, dt, dd) { color: var(--text); }
:where(.hero-split > .hero-aside, .hero-asym > .hero-aside) { align-self: center; }
:where(.hero-below .hero-aside) { max-width: 46rem; }
:where(.hero-aside__heading, .kpi-card__title) { margin: 0 0 var(--sp-3); font-size: var(--step-1); }
:where(.quiz__question) { margin: 0 0 var(--sp-4); font-family: var(--font-display, var(--font)); font-size: var(--step-1); font-weight: 700; }
:where(.quiz__options) { display: grid; gap: var(--sp-2); }
:where(.quiz__options) a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: 2.75rem; box-sizing: border-box;
  padding: var(--sp-3) var(--sp-4); color: var(--text); font-weight: 600; text-decoration: none;
  background: var(--surface-lowest, var(--surface)); border: 1px solid var(--border); border-radius: var(--radius);
}
:where(.quiz__options) a:hover { border-color: var(--brand); }
:where(.quiz__options) a:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
:where(.quiz__arrow) { flex: none; color: var(--brand); }
:where(.choice-cells) { display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.5rem), 1fr)); }
:where(.choice-cell) { min-width: 0; background: var(--surface-lowest, var(--surface)); border: 1px solid var(--border); border-radius: var(--radius); }
:where(.choice-cell, .choice-cells a) { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--sp-2); align-items: center; padding: var(--sp-3); }
:where(.choice-cell:has(> .choice-cell__swatch), .choice-cells a:has(> .choice-cell__swatch)) { grid-template-columns: auto minmax(0, 1fr); }
:where(.choice-cell:has(> a)) { display: block; padding: 0; }
:where(.choice-cells) a { color: var(--text); text-decoration: none; border-radius: var(--radius); }
:where(.choice-cell:has(> a:hover)) { border-color: var(--brand); }
:where(.choice-cells) a:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
:where(.choice-cell__swatch) { grid-row: span 2; border-radius: var(--radius); outline: 1px solid var(--border); }
:where(.choice-cell__label, .choice-cell__note) { grid-column: -2; }
:where(.choice-cell__label) { font-weight: 700; }
:where(.choice-cell__note) { font-size: var(--step--1); }
:where(.kpi-card) { min-width: 0; }
:where(.kpi-card__items) { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 7rem), 1fr)); margin: 0; }
:where(.kpi) { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; padding-block-start: var(--sp-3); border-top: 1px solid var(--border); }
:where(.kpi) dd { margin: 0; }
:where(.kpi__label) { order: 2; font-size: var(--step--1); }
:where(.kpi__value) { order: 1; font-size: var(--step-2); font-weight: 700; line-height: 1.1; }
:where(.kpi__delta) { order: 3; font-size: var(--step--1); }

/* ---------- C9 the subscribe band ---------- */
:where(.subscribe) { display: grid; justify-items: center; gap: var(--sp-3); text-align: center; }
:where(.subscribe) > :is(h2, .kicker) { margin: 0; }
/* the headline sits over a hairline the width of the band (the band reads as a full-width block: 063's fill floor) */
:where(.subscribe > .subscribe__heading) { justify-self: stretch; max-width: none; padding-block-end: var(--sp-3); border-block-end: 1px solid var(--border); }
:where(.subscribe__lead) { max-width: var(--measure); margin: 0; }
:where(.subscribe__form) { display: grid; gap: var(--sp-2); width: min(100%, 36rem); margin-top: var(--sp-3); text-align: start; }
:where(.subscribe__label) { font-size: var(--step--1); font-weight: 600; }
:where(.subscribe__row) { display: flex; flex-wrap: wrap; gap: var(--sp-2); min-width: 0; }
:where(.subscribe__row) input { flex: 1 1 14rem; min-width: 0; box-sizing: border-box; }
:where(.subscribe__row) input:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
:where(.subscribe__submit) { flex: 0 1 auto; max-width: 100%; white-space: normal; }
@media (max-width: 47.99rem) { :where(.subscribe__submit) { flex-basis: 100%; } }
:where(.subscribe__links) { margin: var(--sp-3) 0 0; }
:where(.subscribe__assurances) { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2) var(--sp-5); font-size: var(--step--1); }
:where(.subscribe__assurances) li { display: inline-flex; align-items: center; gap: var(--sp-2); }
:where(.subscribe__check) { flex: none; color: var(--brand); }

/* ===== parts/080-b-editorial.css (080: a template block partial) ===== */
/* 080 (block variants batch 2) — the editorial set: B2 the masthead hero and the compact page masthead, B3 the front
   page, B4 the lead article, D1 roman kickers, D2 the drop cap, D4 the double and ink rules, D5 the column rules and
   C12 the locations (views/blocks/masthead.php, front_page.php, about_blurb.php, views/contact_parts.php,
   views/layout.php). build-style appends this partial on both paths (after blocks.css on the fallback path, after
   ai-fallback.css on the designed path), so a designer's design.css comes after it and wins.
   Paint sits at zero specificity (:where); layout, and a size or margin that must beat an element default of
   components.css (h1-h4, p, hr, blockquote), are plain class rules as in the 063 and 069 passes. Tokens only; text only
   on the gated pairs (--text on the page and section surfaces, --on-inverse on the inverse bands, the hero's colour
   inherited); one column under 48rem. */

/* ---------- B2 the masthead hero (inside .hero: the hero's own surface and text colour, rules in currentColor) */
.hero--masthead[data-hero] { padding-block: var(--sp-6) var(--sp-7); text-align: center; }
.hero--masthead[data-hero] > .wrap { display: grid; gap: 0; }
.masthead__rule { height: 0; margin: 0; border: 0; border-top: 1px solid currentColor; }
.hero--masthead .wrap > .masthead__rule:first-child { border-top-width: 3px; }
.hero--masthead .masthead + .masthead__rule { border-top: 4px double currentColor; }
.hero--masthead .masthead { display: grid; gap: var(--sp-4); align-items: center; padding-block: var(--sp-5); }
.hero--masthead .masthead__center { order: -1; min-width: 0; }
@media (min-width: 48rem) {
  .hero--masthead :is(.masthead--ears-1, .masthead--ears-2) { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr); }
  .hero--masthead .masthead__center { order: 0; grid-column: 2; grid-row: 1; }
  .hero--masthead .masthead__ear--left { grid-column: 1; grid-row: 1; }
  .hero--masthead .masthead__ear--right { grid-column: 3; grid-row: 1; }
}
.hero--masthead[data-hero] .masthead__nameplate {
  margin: 0; font-size: clamp(2.2rem, 1rem + 6.5vw, 5.8rem); line-height: .95; text-wrap: balance; overflow-wrap: break-word;
}
:where(.masthead__nameplate) { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
.masthead__tagline { margin: var(--sp-3) auto 0; max-width: var(--measure); }
:where(.masthead__tagline) { font-size: var(--step-1); font-style: italic; }
.masthead__dateline { list-style: none; padding: 0; margin: var(--sp-3) 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-1) 0; }
.masthead__dateline > li { padding-inline: var(--sp-3); }
:where(.masthead__dateline > li + li) { border-inline-start: 1px solid currentColor; }
:where(.masthead__dateline) { font-size: var(--step--1); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; }
.masthead__ear { display: grid; gap: var(--sp-1); padding: var(--sp-3); max-width: 20rem; margin-inline: auto; }
:where(.masthead__ear) { border: 1px solid currentColor; font-size: var(--step--1); line-height: 1.35; }
:where(.masthead__ear-label) { font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.hero--masthead[data-hero] .hero-actions { justify-content: center; margin-top: var(--sp-5); }
/* the ghost button reads in the hero's own text colour (on-inverse on the default hero), never brand on the dark band */
.hero--masthead .hero-actions .btn-ghost { color: inherit; border-color: currentColor; }
.hero--masthead .hero-actions .btn-ghost:hover { color: var(--brand-strong); }

/* ---------- B2 the compact masthead of an inner page (before <main>, on the page background) */
:where(.masthead--compact) { background: var(--bg); color: var(--text); text-align: center; }
.masthead--compact { padding-block: var(--sp-4) 0; }
.masthead--compact .masthead__rule:first-child { border-top-width: 3px; }
.masthead--compact .masthead__rule:last-child { border-top: 4px double currentColor; margin-top: var(--sp-3); }
.masthead--compact .masthead__nameplate { margin: var(--sp-3) 0 0; font-size: clamp(1.6rem, 1rem + 3vw, 3rem); line-height: 1; }
.masthead--compact .masthead__dateline { margin-top: var(--sp-2); }
/* under a masthead home the inner pages' own header takes the display face and a rule */
:where(body.has-masthead main h1:not(.masthead__nameplate, .hero-title)) {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .02em;
  padding-bottom: var(--sp-3); border-bottom: 3px double currentColor;
}

/* ---------- B3 the front page: 5 / 4 / 3 of 12 columns with 1 px hairline column rules (D5 built in) */
.front-page__grid { display: grid; gap: var(--sp-6); }
.front-page__grid > * { min-width: 0; position: relative; }
/* a phone: stacked, a hairline above every column after the lead */
.front-page__grid > * + * { padding-top: var(--sp-6); }
:where(.front-page__grid > * + *) { border-top: 1px solid var(--border); }
@media (min-width: 48rem) {
  /* the lead across, the list and the sidebar side by side under it */
  .front-page__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-7); }
  .front-page__lead, .front-page[data-cols="2"] .front-page__grid > * { grid-column: 1 / -1; }
  .front-page__list + .front-page__sidebar::before {
    content: ""; position: absolute; inset-block: var(--sp-6) 0; inset-inline-start: calc(var(--sp-7) / -2); border-inline-start: 1px solid var(--border);
  }
}
@media (min-width: 64rem) {
  .front-page__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .front-page__grid > * + * { padding-top: 0; border-top-width: 0; }
  .front-page__grid > * + *::before, .front-page__list + .front-page__sidebar::before {
    content: ""; position: absolute; inset-block: 0; inset-inline-start: calc(var(--sp-7) / -2); border-inline-start: 1px solid var(--border);
  }
  .front-page[data-cols="3"] .front-page__lead { grid-column: span 5; }
  .front-page[data-cols="3"] .front-page__list { grid-column: span 4; }
  .front-page[data-cols="3"] .front-page__sidebar { grid-column: span 3; }
  .front-page[data-cols="2"] .front-page__grid > .front-page__lead { grid-column: span 7; }
  .front-page[data-cols="2"] .front-page__grid > :not(.front-page__lead) { grid-column: span 5; }
  .front-page[data-cols="1"] .front-page__lead { grid-column: 2 / span 10; }
}
.front-page__list-heading { margin: 0 0 var(--sp-2); padding-bottom: var(--sp-2); font-size: var(--step-0); }
:where(.front-page__list-heading) { text-transform: uppercase; letter-spacing: .1em; border-bottom: 2px solid currentColor; }
.front-list { list-style: none; margin: 0; padding: 0; display: grid; }
.front-list__item { display: grid; gap: var(--sp-1); padding-block: var(--sp-3); }
:where(.front-list__item + .front-list__item) { border-top: 1px solid var(--border); }
.front-list__title { margin: 0; font-size: var(--step-1); }
.front-list__text { margin: 0; }
:where(.front-list__meta) { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--step--1); text-transform: uppercase; letter-spacing: .06em; }
.front-page__sidebar { display: grid; gap: var(--sp-3); align-content: start; }
.front-card { display: grid; gap: var(--sp-2); padding: var(--sp-4); }
:where(.front-card) { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); }
.front-card__title { margin: 0; font-size: var(--step-0); }
:where(.front-card__title) { text-transform: uppercase; letter-spacing: .08em; }
.front-card__text { margin: 0; }
:where(.front-card__link) { font-weight: 600; justify-self: start; }
.front-page__lead .lead-article__headline { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem); }

/* ---------- B4 the lead article (about-blurb column, and the front page's first column) */
.about-blurb--column .lead-article { max-width: 50rem; margin-inline: auto; } /* 063: at least 60 % of a 1280 container */
.lead-article__headline { margin: 0 0 var(--sp-2); font-size: clamp(1.7rem, 1.1rem + 2.2vw, 2.8rem); line-height: 1.08; }
:where(.lead-article__headline) { font-family: var(--font-display); }
.lead-article__byline { margin: 0 0 var(--sp-4); }
:where(.lead-article__byline) { font-size: var(--step--1); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.lead-article__body > p { margin: 0 0 var(--sp-3); }
:where(.lead-article__body) { max-width: var(--measure); line-height: 1.65; hyphens: auto; }
:where(.lead-article__body)::after { content: ""; display: block; clear: both; }
.pull-quote { margin: var(--sp-5) 0; padding: var(--sp-1) 0 var(--sp-1) var(--sp-5); }
.pull-quote > p { margin: 0; }
:where(.pull-quote) { border-inline-start: 3px solid var(--brand); font-family: var(--font-display); font-size: var(--step-1); font-style: italic; line-height: 1.35; }
.lead-article__figure { position: relative; margin: var(--sp-5) 0; }
.lead-article__img { display: block; width: 100%; height: auto; object-fit: cover; }
:where(.lead-article__img) { border-radius: var(--radius-lg); }
.lead-article__source { margin: var(--sp-4) 0 0; padding-top: var(--sp-2); }
:where(.lead-article__source) { border-top: 1px solid var(--border); font-size: var(--step--1); font-style: italic; }
.lead-article__more { margin: var(--sp-5) 0 0; }

/* ---------- D2 the drop cap (drop_cap_html prints the span under body.drop-cap only) */
:where(body.drop-cap) .drop-cap {
  float: inline-start; margin: .08em var(--sp-2) 0 0; font-family: var(--font-display); font-size: 3.6em; font-weight: 700; line-height: .82; color: var(--brand);
}
/* an opening „ “ " ' « ( before the letter (p.drop-cap-open) is the paragraph's ::first-letter, floated in the same face
   just before the drop cap, so the pair reads „К over the three lines */
:where(body.drop-cap) .drop-cap-open::first-letter {
  float: inline-start; margin: .08em 0 0; font-family: var(--font-display); font-size: 3.6em; font-weight: 700; line-height: .82; color: var(--brand);
}
:where(body.drop-cap .section[data-surface="inverse"]) .drop-cap,
:where(body.drop-cap .section[data-surface="inverse"]) .drop-cap-open::first-letter { color: var(--on-inverse); }

/* ---------- D1 roman kickers (index_label prints I, II, III under body.kicker-roman) */
:where(body.kicker-roman) .kicker-index { letter-spacing: .12em; font-variant-numeric: normal; }

/* ---------- D4 the double rule and the thick ink rule */
:where(body.dc-double-rule .section + .section) { border-top: 3px double var(--border); }
:where(body.dc-double-rule) :where(.section > .wrap > h2, .about-blurb__head > h2, .contact-head > h2, .stats__heading) { padding-bottom: var(--sp-2); border-bottom: 3px double currentColor; }
:where(body.dc-double-rule) hr:not(.masthead__rule) { border-top: 3px double var(--border); }
:where(body.dc-ink-rule) :where(.section > .wrap > h2, .about-blurb__head > h2, .contact-head > h2, .stats__heading)::after {
  content: ""; display: block; width: 3.5rem; height: 0; margin-top: var(--sp-3); border-top: 4px solid currentColor;
}
:where(body.dc-ink-rule) hr:not(.masthead__rule) { border-top: 4px solid var(--text); }

/* ---------- D5 the column rules: 1 px hairlines between the columns of the cards, the steps and the footer */
@media (min-width: 48rem) {
  :where(body.dc-column-rules) :is(.cards, .steps) { column-gap: 0; margin-inline: calc(-1 * var(--sp-3)); clip-path: inset(-100vmax -100vmax -100vmax 1px); }
  :where(body.dc-column-rules) :is(.cards > .card, .steps > li) {
    border: 0; border-radius: 0; box-shadow: none; background: transparent; padding-inline: var(--sp-3);
    margin-inline-start: -1px; border-inline-start: 1px solid var(--border);
  }
  :where(body.dc-column-rules) .foot-grid { column-gap: 0; margin-inline: calc(-1 * var(--sp-3)); clip-path: inset(-100vmax -100vmax -100vmax 1px); }
  :where(body.dc-column-rules) .foot-grid > * {
    padding-inline: var(--sp-3); margin-inline-start: -1px; border-inline-start: 1px solid color-mix(in srgb, var(--on-inverse) 20%, transparent);
  }
}

/* ---------- C12 the locations: the contact page and block, and the footer */
.contact-locations { margin-top: var(--sp-6); }
.locations { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.location { display: grid; gap: var(--sp-1); align-content: start; padding: var(--sp-4); min-width: 0; }
:where(.location) { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.location__name { margin: 0 0 var(--sp-1); font-size: var(--step-1); }
.location > p { margin: 0; }
:where(.location__phone) { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 600; }
.foot-locations { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: grid; gap: var(--sp-3); }
.foot-location { display: grid; gap: 0; padding-top: var(--sp-3); }
.foot-location > * { display: block; }
:where(.foot-location) { border-top: 1px solid color-mix(in srgb, var(--on-inverse) 18%, transparent); font-size: var(--step--1); }
:where(.foot-location__phone) { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---------- the focus ring of the new links: the brand, the inverse text on the dark bands and the footer */
:where(.front-card__link, .lead-article__more a, .location__phone, .foot-location__phone):focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
:where(.section[data-surface="inverse"], .site-foot) :where(.front-card__link, .lead-article__more a, .location__phone, .foot-location__phone):focus-visible { outline-color: var(--on-inverse); }

/* ===== parts/080-c-cards.css (080: a template block partial) ===== */
/* 080 (block variants batch 2), group C — cards and data: the process meta, phase columns and stepper (C1), the ledger
   table (C2), the case ledger (C3), the metric bars and the range gauge (C4), the four spec rows (C5), the annotated
   figure and its pins (C6), the caption plate (C7), the provenance cards (C8), the policy cards (C10) and the CSS filter
   tabs (C11). build-style appends this partial on both paths (after blocks.css on the fallback path, after
   ai-fallback.css on the designed path; design.css comes after it and wins).
   The 069 pattern: layout on the block's own classes, colours, borders and backgrounds in :where() (zero specificity),
   tokens only, text only on the pairs the AA gate checks (--text on --bg / --surface / --surface-low /
   --surface-lowest, --on-brand on --brand, --on-inverse on an inverse band, which home.php's rhythm rescopes). No
   style attribute anywhere: bars, gauges and pins are SVG percentage attributes. Three rules carry specificity on
   purpose: the counter badge switched off where the step index shows, the filter-tab hide rules (a behaviour, like
   [hidden]) and the block-list guard (max-width: none, as in blocks.css). */

/* ---------- the mono role (I-7): numbers in the mono face with tabular figures ---------- */
:is(td.num, th.num, .step__meta, .step__index, .metric-bar__value, .range-gauge__value, .pins-legend__marker, .pin__label,
.case-ledger__delta) { font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); font-variant-numeric: tabular-nums; }

/* the 069 mono role (blocks.css and ai-fallback.css: ":is(… .kicker-index …)") also matches <body class="… kicker-index">
   (decoration.kickerIndex), which turned every text of such a site mono; the body keeps the text face (a class on
   the body, so it beats the :is() rule; design.css still wins) */
body.kicker-index { font-family: var(--font); font-variant-numeric: normal; }

/* ---------- block lists span their section (the blocks.css guard of 08.10.2026) ---------- */
.stepper, .metric-bars, .range-gauges, .provenance-list, .policy-cards, .pins-legend, .filter-tabs, .ledger__scroll { max-width: none; }

/* ---------- C1 process: the index, the meta footer, the highlight ---------- */
.step__index { display: none; }
.step__meta { margin: var(--sp-3) 0 0; padding-block-start: var(--sp-2); font-size: var(--step--1); letter-spacing: .04em; }
:where(.step__meta) { color: var(--text); border-block-start: 1px solid var(--border); }
.steps > li.step--highlight { box-shadow: 0 10px 30px var(--shadow-tint, color-mix(in srgb, var(--text) 8%, transparent)); }
:where(.steps > li.step--highlight) { background: var(--surface-lowest, var(--surface)); }
.steps > li.step.step--highlight { border-color: var(--brand); border-width: 2px; }
.process--timeline .steps > li.step.step--highlight { border-width: 0 0 0 2px; border-inline-start-color: var(--brand); box-shadow: none; }
/* numbered and timeline: the counter badge stays; under kicker-roman the index (I, II …) takes its place */
:where(body.kicker-roman .process--numbered, body.kicker-roman .process--timeline) .steps > li.step::before { content: none; display: none; }
:where(body.kicker-roman .process--numbered, body.kicker-roman .process--timeline) .steps > li.step > .step__index {
  display: grid; place-items: center; min-width: 2rem; height: 2rem; padding-inline: var(--sp-1); margin-bottom: var(--sp-3);
  border-radius: var(--radius-full); font-weight: 700; font-size: var(--step--1);
}
:where(body.kicker-roman .process--numbered, body.kicker-roman .process--timeline) .step__index { background: var(--brand); color: var(--on-brand); }
:where(body.kicker-roman .process--timeline) .steps > li.step > .step__index { position: absolute; left: -1rem; top: 0; margin-bottom: 0; }

/* phase columns (process columns): one column under 48rem, the steps side by side above */
:where(.process--columns) .steps-wrap { max-width: none; }
.steps.steps--columns { grid-template-columns: minmax(0, 1fr); }
:where(.process--columns) .steps > li.step::before { content: none; display: none; }
.steps--columns > li.step { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.steps--columns .step__index { display: block; font-size: var(--step-3); font-weight: 700; line-height: 1; letter-spacing: -.01em; }
:where(.steps--columns .step__index) { color: var(--text); }
.steps--columns .step__title { display: block; font-size: var(--step-1); line-height: 1.2; }
.steps--columns .step__body { margin: 0; }
.steps--columns .step__meta { margin-block-start: auto; }
@media (min-width: 48rem) {
  .steps.steps--columns { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
  .steps.steps--columns[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps.steps--columns[data-cols="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  .steps.steps--columns[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .steps.steps--columns[data-cols="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .steps.steps--columns[data-cols="6"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .steps.steps--columns[data-cols="7"] { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .steps.steps--columns:is([data-cols="6"], [data-cols="7"]) > li.step { padding: var(--sp-4); }
  .steps.steps--columns:is([data-cols="6"], [data-cols="7"]) .step__index { font-size: var(--step-2); }
}

/* the stepper with stated states (done | active | next: spec content, never live): vertical, a rail from 56rem */
.stepper { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.stepper__step { position: relative; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--sp-4); padding-block-end: var(--sp-5); min-width: 0; }
.stepper__step::after { content: ""; position: absolute; inset-inline-start: calc(1.25rem - 1px); inset-block: 2.75rem var(--sp-1); width: 2px; }
:where(.stepper__step)::after { background: var(--border); }
.stepper__step--done::after { background: var(--brand); }
.stepper__step:last-child { padding-block-end: 0; }
.stepper__step:last-child::after { display: none; }
.stepper .step__index { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-full); font-weight: 700; font-size: var(--step--1); }
:where(.stepper .step__index) { background: var(--surface); color: var(--text); border: 2px solid var(--border); }
:where(.stepper__step--done .step__index) { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
:where(.stepper__step--active .step__index) { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
:where(.stepper > .step--highlight .step__index) { border-color: var(--brand); }
.stepper__body { min-width: 0; padding-block-start: var(--sp-2); }
.stepper .step__title { display: block; font-size: var(--step-1); line-height: 1.25; }
:where(.stepper .step__title) { color: var(--text); }
.stepper .step__body { margin: var(--sp-2) 0 0; }
:where(.stepper .step__body) { color: var(--text); }
.stepper .step__meta { display: inline-block; }
@media (min-width: 56rem) {
  .stepper { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--sp-4); }
  .stepper__step { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); padding-block-end: 0; }
  .stepper__step::after { inset-block: calc(1.25rem - 1px) auto; inset-inline: calc(2.5rem + var(--sp-2)) calc(-1 * var(--sp-2)); width: auto; height: 2px; }
  .stepper__body { padding-block-start: 0; }
}

/* ---------- C2 ledger and C3 case ledger: a real table that scrolls inside its own box ---------- */
.ledger__scroll { position: relative; overflow-x: auto; margin: 0 0 var(--sp-4); } /* positioned: a visually hidden text in a cell stays inside the box */
:where(.ledger__scroll) { border-block-start: 2px solid var(--text); }
.ledger__scroll:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
:where(.section[data-surface="inverse"]) .ledger__scroll:focus-visible { outline-color: var(--on-inverse); }
.ledger__table, .case-ledger { width: 100%; min-width: 34rem; margin: 0; border-collapse: collapse; font-size: var(--step-0); }
.case-ledger { min-width: 44rem; }
.ledger__table :is(th, td), .case-ledger :is(th, td) { padding: var(--sp-3); text-align: start; vertical-align: top; }
:where(.ledger__table, .case-ledger) :is(th, td) { color: var(--text); border-block-end: 1px solid var(--border); }
.ledger__table thead th, .case-ledger thead th { font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); font-size: var(--step--1); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
:where(.ledger__table, .case-ledger) thead th { border-block-end-color: var(--text); }
.ledger__table .num, .case-ledger .num { text-align: end; white-space: nowrap; }
.ledger__footnote { max-width: var(--measure); margin: 0 0 var(--sp-3); font-size: var(--step--1); }
:where(.ledger__footnote) { color: var(--text); }
.ledger__actions { margin: 0; }
.ledger__download { display: inline-flex; align-items: center; min-height: 2.75rem; padding: var(--sp-2) var(--sp-4); border-radius: var(--radius); font-weight: 600; text-decoration: none; color: var(--text); }
:where(.ledger__download) { border: 1px solid var(--text); }
.ledger__download:hover { color: var(--text); text-decoration: underline; }
.ledger__download:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.case-ledger__case { font-weight: 700; min-width: 10rem; }
.case-ledger__case .quote__context { display: block; font-size: var(--step--1); font-weight: 400; }
.case-ledger__case .quote__verified { display: flex; margin-block-start: var(--sp-1); }
.case-ledger__delta strong { display: block; font-size: var(--step-1); line-height: 1.1; }
.case-ledger__metric { display: block; font-family: var(--font); font-size: var(--step--1); white-space: normal; }
.case-ledger__read { font-weight: 600; white-space: nowrap; }

/* ---------- C4 metric bars and the range gauge (SVG; widths and positions are % attributes) ---------- */
.metric-bars, .range-gauges { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
.metric-bar, .range-gauge { display: grid; align-items: center; gap: var(--sp-2) var(--sp-3); min-width: 0; }
.metric-bar { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label value" "track track"; }
.metric-bar__label, .range-gauge__label { grid-area: label; font-weight: 600; min-width: 0; }
.metric-bar__value, .range-gauge__value { grid-area: value; font-weight: 700; white-space: nowrap; }
.metric-bar__track { grid-area: track; display: block; width: 100%; height: .75rem; overflow: visible; }
:where(.metric-bar__rail) { fill: var(--border); }
:where(.metric-bar__fill) { fill: var(--brand); }
.metric-bar__rail, .metric-bar__fill { rx: var(--radius-full); }
.range-gauge { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label value" "rail rail" "norm norm"; }
.range-gauge__rail { grid-area: rail; display: block; width: 100%; height: 1.25rem; overflow: visible; }
:where(.range-gauge__track) { fill: var(--border); }
:where(.range-gauge__range) { fill: color-mix(in oklab, var(--brand) 40%, transparent); }
:where(.range-gauge__marker) { fill: var(--brand); stroke: var(--bg); stroke-width: 2; }
.range-gauge__track, .range-gauge__range { rx: var(--radius-full); }
.range-gauge__norm { grid-area: norm; font-size: var(--step--1); }
:where(.range-gauge__norm, .metric-bar__label, .range-gauge__label) { color: var(--text); }
@media (min-width: 48rem) {
  .metric-bars, .range-gauges { max-width: 52rem; }
  .metric-bar { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr) minmax(4rem, auto); grid-template-areas: "label track value"; }
  .range-gauge { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr) minmax(4rem, auto); grid-template-areas: "label rail value" ". norm ."; }
}

/* ---------- C5 spec rows: an indexed card with three or four metrics lists them as key-value rows ---------- */
.card__metrics:has(> .card__metric:nth-child(3)) { grid-template-columns: minmax(0, 1fr); gap: 0; }
.card__metrics:has(> .card__metric:nth-child(3)) > .card__metric { flex-direction: row; justify-content: space-between; align-items: baseline; gap: var(--sp-3); padding-block: var(--sp-2); }
:where(.card__metrics) > .card__metric + .card__metric { border-block-start: 1px solid var(--border); }
.card__metrics:has(> .card__metric:nth-child(3)) .card__metric dd { font-size: var(--step-0); white-space: nowrap; font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); font-variant-numeric: tabular-nums; }

/* ---------- C6 the annotated figure and the pins (also a hero panel's image) ---------- */
.annotated { margin: 0; display: grid; gap: var(--sp-5); min-width: 0; }
.annotated__media { position: relative; min-width: 0; }
.annotated__img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); }
.pins { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
:where(.pin__dot) { fill: var(--brand); stroke: var(--on-brand); stroke-width: 2; }
.pin__label { font-size: var(--step--1); font-weight: 700; }
:where(.pin__label) { fill: var(--on-brand); }
.annotated__legend { min-width: 0; }
.annotated__legend-title { margin: 0 0 var(--sp-3); font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); font-size: var(--step--1); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.pins-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.pins-legend__item { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 0 var(--sp-3); align-items: start; }
.pins-legend__marker { grid-row: span 2; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--radius-full); font-weight: 700; font-size: var(--step--1); }
:where(.pins-legend__marker) { background: var(--brand); color: var(--on-brand); }
.pins-legend__title { display: block; padding-block-start: var(--sp-1); }
.pins-legend__text { display: block; font-size: var(--step--1); }
:where(.pins-legend__title, .pins-legend__text, .annotated__legend-title, .annotated__caption) { color: var(--text); }
.annotated__caption { margin: var(--sp-4) 0 0; font-size: var(--step--1); }
@media (min-width: 48rem) {
  .annotated--side { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
  .annotated--below .pins-legend { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
}

/* ---------- C7 the caption plate: a small card pinned bottom-left on a photo, the text on a gated surface ---------- */
:where(body.im-caption-plate) :where(.hero-media, .about-photo, .gallery-item, .bento__cell, .hero-panel__figure, .annotated__media) { position: relative; }
:where(body.im-caption-plate) .frame-caption {
  position: absolute; inset-inline-start: var(--sp-3); inset-inline-end: auto; inset-block-end: var(--sp-3);
  max-width: min(20rem, calc(100% - 2 * var(--sp-3))); margin: 0; padding: var(--sp-2) var(--sp-3);
  font-size: var(--step--1); font-weight: 600; line-height: 1.35; border-radius: var(--radius);
  background: color-mix(in oklab, var(--surface) 94%, transparent); color: var(--text);
  border: 1px solid var(--border); box-shadow: 0 6px 18px var(--shadow-tint, color-mix(in srgb, var(--text) 10%, transparent));
  backdrop-filter: blur(6px);
}

/* ---------- C8 provenance cards ---------- */
.provenance-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.provenance-card { position: relative; display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; padding: var(--sp-4); }
:where(.provenance-card) { background: var(--surface-lowest, var(--surface)); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.provenance-card__photo { margin: calc(-1 * var(--sp-4)) calc(-1 * var(--sp-4)) var(--sp-2); }
.provenance-card__photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.provenance-card__badge { align-self: flex-start; padding: var(--sp-1) var(--sp-2); border-radius: var(--radius-full); font-size: var(--step--1); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
:where(.provenance-card__badge) { background: var(--brand); color: var(--on-brand); }
.provenance-card--photo .provenance-card__badge { position: absolute; inset-block-start: var(--sp-3); inset-inline-start: var(--sp-3); max-width: calc(100% - 2 * var(--sp-3)); }
.provenance-card__name { margin: 0; font-size: var(--step-1); }
.provenance-card__latin { margin: 0; font-size: var(--step--1); }
.provenance-card__fact { margin: auto 0 0; padding-block-start: var(--sp-2); font-size: var(--step--1); }
:where(.provenance-card__latin, .provenance-card__fact) { color: var(--text); }
:where(.provenance-card__fact) { border-block-start: 1px solid var(--border); }
.provenance-card > .seal { align-self: flex-end; }

/* the seal's place beside a quote and on a case card (its look is the seal finish's) */
:is(.quote, .case-card__body) > .seal { justify-self: end; align-self: end; }

/* ---------- C10 policy cards: the heading left, the cards right ---------- */
.policy { display: grid; gap: var(--sp-6); }
.policy__head > :last-child { margin-bottom: 0; }
.policy-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.policy-card { display: grid; gap: var(--sp-2); align-content: start; min-width: 0; padding: var(--sp-5); }
:where(.policy-card) { background: var(--surface-lowest, var(--surface)); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-lg); }
:where(.policy-card .icon) { color: var(--brand); }
.policy-card__title { margin: 0; font-size: var(--step-1); }
.policy-card__text { margin: 0; }
@media (min-width: 56rem) { .policy { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: start; } }

/* ---------- C11 filter tabs: CSS radios and :has(), at most six groups and All; without :has() every item shows ---------- */
.filter-tabs { position: relative; display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-5); }
.filter-tabs__input { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; opacity: 0; pointer-events: none; }
.filter-tabs__tab { display: inline-flex; align-items: center; min-height: 2.75rem; padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-full); font-size: var(--step--1); font-weight: 600; cursor: pointer; }
:where(.filter-tabs__tab) { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.filter-tabs__input:checked + .filter-tabs__tab { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.filter-tabs__input:focus-visible + .filter-tabs__tab { outline: 3px solid var(--brand); outline-offset: 2px; }
:where(.section[data-surface="inverse"]) .filter-tabs__input:focus-visible + .filter-tabs__tab { outline-color: var(--on-inverse); }
.filter-tabs:has(> .filter-tabs__input[value="g1"]:checked) ~ * [data-filter-group]:not([data-filter-group="g1"]),
.filter-tabs:has(> .filter-tabs__input[value="g2"]:checked) ~ * [data-filter-group]:not([data-filter-group="g2"]),
.filter-tabs:has(> .filter-tabs__input[value="g3"]:checked) ~ * [data-filter-group]:not([data-filter-group="g3"]),
.filter-tabs:has(> .filter-tabs__input[value="g4"]:checked) ~ * [data-filter-group]:not([data-filter-group="g4"]),
.filter-tabs:has(> .filter-tabs__input[value="g5"]:checked) ~ * [data-filter-group]:not([data-filter-group="g5"]),
.filter-tabs:has(> .filter-tabs__input[value="g6"]:checked) ~ * [data-filter-group]:not([data-filter-group="g6"]) { display: none; }

/* ===== parts/080-d-finish.css (080: a template block partial) ===== */
/* ===== 080 D6-D8: finishes and the dark-panel hairline (bundle 072) =====
   A template block partial (build-style appends parts/*.css after blocks.css on the fallback path and after
   ai-fallback.css on the designed path, before the motion block). Body classes drawn from the design contract
   (imagery.treatment im-arch-frame | im-offset-frame | im-herbarium-inset, decoration.motif dc-bracket-corners |
   dc-ghost-icon; one treatment and one motif per site). Tokens only (no colour literal), every paint rule at the
   specificity of its element list (the body class sits in :where()), so a designer's design.css always wins. No rule
   sets a text colour: every text keeps its gated pair (text on bg / surface tiers, on-brand on brand, on-inverse on
   inverse). Decoration is pseudo-elements and borders only, no image request; nothing moves (motion.css owns motion,
   and every rule here is static, so reduced motion has nothing to stop). */

/* --- D6 arch frame: arch-topped photos (hero, about, team, provenance); the foot keeps the site's radius --- */
:where(body.im-arch-frame) :is(.hero-img, .about-photo__img, .team-member__photo, .provenance-card img, .lead-article__figure img) {
  border-radius: 12rem 12rem var(--radius) var(--radius);
}

/* --- D6 offset outline frame: a 1px brand outline set off down and along, like a misregistered print. The frame
   reserves its own offset (margin), so it never pushes the page wider at 390 px --- */
:where(body.im-offset-frame) :is(.hero-media, .about-photo, .lead-article__figure) {
  position: relative; isolation: isolate;
  margin-inline-end: var(--sp-3); margin-block-end: var(--sp-3);
}
:where(body.im-offset-frame) :is(.hero-media, .about-photo, .lead-article__figure)::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset-block: var(--sp-3) calc(var(--sp-3) * -1); inset-inline: var(--sp-3) calc(var(--sp-3) * -1);
  border: 1px solid var(--brand); border-radius: var(--radius-lg);
}
:where(body.im-offset-frame) :is(.hero-img, .about-photo__img) { position: relative; border-radius: var(--radius-lg); }

/* --- D6 herbarium inset: the photo inset on a paper mat (the soft surface tier) with a thin rule round the picture --- */
:where(body.im-herbarium-inset) :is(.hero-media, .about-photo, .gallery-item, .provenance-card figure, .lead-article__figure) {
  padding: var(--sp-4); background: var(--surface-low, var(--surface-2));
  border: 1px solid var(--border); border-radius: var(--radius);
}
:where(body.im-herbarium-inset) :is(.hero-img, .about-photo__img, .gallery-item__img, .provenance-card img, .lead-article__figure img) {
  border-radius: 0; outline: 1px solid color-mix(in srgb, var(--text) 32%, transparent); outline-offset: 3px;
}
:where(body.im-herbarium-inset) .bento__cell { padding: var(--sp-3); background: var(--surface-low, var(--surface-2)); }
:where(body.im-herbarium-inset) .bento__img { outline: 1px solid color-mix(in srgb, var(--text) 32%, transparent); outline-offset: -4px; }
@media (min-width: 48rem) {
  :where(body.im-herbarium-inset) .bento__cell > :is(.lightbox, .bento__img, .gallery-item__frame) { inset: var(--sp-3); }
}

/* --- D6 bracket corners: two L-shaped brand marks at opposite corners of cards and photos, like crop marks --- */
:where(body.dc-bracket-corners) :is(.card, .about-photo, .hero-media, .gallery-item, .provenance-card, .lead-article__figure) { position: relative; }
:where(body.dc-bracket-corners) :is(.card, .about-photo, .hero-media, .gallery-item, .provenance-card, .lead-article__figure)::before,
:where(body.dc-bracket-corners) :is(.card, .about-photo, .hero-media, .gallery-item, .provenance-card, .lead-article__figure)::after {
  content: ""; position: absolute; z-index: 1; pointer-events: none; inline-size: 1rem; block-size: 1rem;
  border: 0 solid var(--brand);
}
:where(body.dc-bracket-corners) :is(.card, .about-photo, .hero-media, .gallery-item, .provenance-card, .lead-article__figure)::before {
  inset-block-start: 0; inset-inline-start: 0; border-block-start-width: 2px; border-inline-start-width: 2px;
}
:where(body.dc-bracket-corners) :is(.card, .about-photo, .hero-media, .gallery-item, .provenance-card, .lead-article__figure)::after {
  inset-block-end: 0; inset-inline-end: 0; border-block-end-width: 2px; border-inline-end-width: 2px;
}
:where(body.dc-bracket-corners) :is(.card, .provenance-card) { border-color: transparent; box-shadow: none; }

/* --- D6 ghost icon: a large, very faint ring behind each home section's heading; decorative only (never behind body
   text, never information), drawn by CSS (no image), inside the section's own box --- */
:where(body.dc-ghost-icon) :is(main > .section) > .wrap:has(> h2) { position: relative; isolation: isolate; }
:where(body.dc-ghost-icon) :is(main > .section) > .wrap:has(> h2)::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset-block-start: calc(var(--sp-5) * -1); inset-inline-start: 0;
  inline-size: 7rem; block-size: 7rem; border-radius: 50%;
  border: 1.25rem solid color-mix(in srgb, var(--brand) 9%, transparent);
}
:where(body.dc-ghost-icon) :is(main > .section[data-surface="inverse"]) > .wrap:has(> h2)::before {
  border-color: color-mix(in srgb, var(--on-inverse) 10%, transparent);
}

/* --- D8 a dark panel inside a light page carries the accent hairline: 1px of the brand along its top edge (the
   inverse section band of 063's surface rhythm and any 080 panel the renderer marks data-surface="inverse") --- */
:where([data-surface="inverse"], .hero-panel--dark) { border-block-start: 1px solid var(--brand); }

/* --- D8 the focus ring stays the brand: the base ring (base.css / components.css :focus-visible in var(--brand)) on
   the finish frames' links, and the on-inverse ring on a dark panel (the brand may not read on surface-inverse) --- */
:where(body.im-arch-frame, body.im-offset-frame, body.im-herbarium-inset, body.dc-bracket-corners) :is(.hero-media, .about-photo, .gallery-item, .provenance-card, .lead-article__figure) a:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 3px;
}
:where([data-surface="inverse"]:not(.section), .hero-panel--dark) :focus-visible { outline: 2px solid var(--on-inverse); outline-offset: 2px; }

/* --- D3 the seal (seal_html: span.seal > span.seal__text, beside a quote, a case card or a provenance card): a
   circular hairline crest with tracked caps. Zero specificity (a design.css wins), no text colour (the text keeps
   the gated pair of its card; the ring is the text colour), static --- */
:where(.seal) {
  display: inline-flex; align-items: center; justify-content: center; flex: none; box-sizing: border-box;
  inline-size: 5.5rem; block-size: 5.5rem; padding: var(--sp-2);
  border: 1px solid currentColor; border-radius: 50%;
  text-align: center; text-transform: uppercase; letter-spacing: .12em; line-height: 1.2;
  font-size: .625rem; font-weight: 600; overflow-wrap: anywhere;
}
:where(.seal__text) { display: block; max-inline-size: 100%; }

/* ===== 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.
   063: the hero entrance (html.mo-r-entrance, run once on load when the body carries data-motion-entrance="1")
   uses the reveal rules below on the hero's own targets; the var() fallbacks follow the gentle numbers of
   axes.json (640 ms, 24 px, 90 ms stagger, 1.05 zoom, 4 px lift); motion.js writes the level's values.
   069: the pulse ring (2 s) and the press of the offset-ink finish, under html.mo-r-pulse / html.mo-r-press.
   080: four more level recipes (html.mo-r-underline, mo-r-glow, mo-r-compress, mo-r-mosaic; marked on gentle and
   lively): the link underline that grows, the brand glow on cards and option cards, the press compression of
   buttons and option cards, the mosaic zoom of gallery, bento and lead-article photos. */

/* ---------- 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, 640ms) var(--mo-ease, ease-out);
  }
}

/* ---------- reveal: sections and cards rise in once on enter; the hero entrance once on load ---------- */
@media (prefers-reduced-motion: no-preference) {
  :is(html.mo-r-reveal, html.mo-r-entrance) [data-reveal]:not(.is-in) {
    opacity: 0;
    transform: translate3d(0, var(--mo-distance, 24px), 0);
  }
  :is(html.mo-r-reveal, html.mo-r-entrance) [data-reveal]:not([data-reveal="done"]) {
    transition: opacity var(--mo-duration, 640ms) var(--mo-ease, ease-out), transform var(--mo-duration, 640ms) var(--mo-ease, ease-out);
    transition-delay: calc(var(--reveal-i, 0) * var(--mo-stagger, 90ms));
  }
  /* the first frame of a marked element: hidden at once, no fade-out */
  :is(html.mo-r-reveal, html.mo-r-entrance) [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, 4px) * -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.05));
  }
}

/* ---------- 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, 640ms) 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, 640ms) 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, 640ms) 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); }
}

/* ---------- 069: pulse (the status strip's dot, the availability lines) and press (body.dc-offset-ink) ----------
   Level recipes like the entrance: motion.js marks html.mo-r-pulse and html.mo-r-press on gentle and lively (not a
   data-motion-recipes name); minimal loads no script, so the dot stays static and the press stays the base sheet's. */
@keyframes pulse-ring {
  0% { transform: scale(1); opacity: .55; }
  80%, 100% { transform: scale(2.8); opacity: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  html.mo-r-pulse .pulse-dot::after { animation: pulse-ring 2s ease-out infinite; }
  html.mo-r-press body.dc-offset-ink :is(.btn, .card) { transition: transform 120ms ease-out, box-shadow 120ms ease-out; }
  html.mo-r-press body.dc-offset-ink :is(.btn, .card):active { transform: translate(2px, 2px); box-shadow: 0 0 0 0 var(--text); }
}

/* ---------- 080: underline, glow, compress, mosaic (level recipes like 069's pulse and press) ----------
   motion.js marks them on gentle and lively only (minimal loads no script; reduced motion runs nothing). Transitions
   only (a state change the visitor causes, never self-running), tokens only, zero-specificity resting rules. */
@media (prefers-reduced-motion: no-preference) {
  /* underline: the body links' underline sits 2px below the text and grows to 4px and 2px thick on hover/focus */
  :where(html.mo-r-underline) :where(main, .site-foot) :where(a:not(.btn)) {
    transition: text-underline-offset 180ms ease-out, text-decoration-thickness 180ms ease-out, color 160ms ease-out;
  }
  html.mo-r-underline :where(main, .site-foot) a:not(.btn):is(:hover, :focus-visible) {
    text-underline-offset: 4px; text-decoration-thickness: 2px;
  }
  /* the arrow nudge: a ghost button's icon and a "more →" link move 3px along the reading direction */
  :where(html.mo-r-underline) :where(.btn-ghost, .btn--ghost) > :where(svg, .icon) { transition: transform 180ms ease-out; }
  :where(html.mo-r-underline) :where(.card-more a, .svc-full__more) { display: inline-block; transition: transform 180ms ease-out; }
  html.mo-r-underline :is(.btn-ghost, .btn--ghost):is(:hover, :focus-visible) > :is(svg, .icon),
  html.mo-r-underline :is(.card-more a, .svc-full__more):is(:hover, :focus-visible) { transform: translateX(3px); }
  html.mo-r-underline[dir="rtl"] :is(.btn-ghost, .btn--ghost):is(:hover, :focus-visible) > :is(svg, .icon),
  html.mo-r-underline[dir="rtl"] :is(.card-more a, .svc-full__more):is(:hover, :focus-visible) { transform: translateX(-3px); }

  /* glow: the accent border in the brand colour with a soft brand-tinted glow on hover and on the chosen option */
  :where(html.mo-r-glow) :where(.card, .option-card, .choice-cell, .policy-card, .provenance-card) {
    transition: border-color 200ms ease-out, box-shadow 200ms ease-out, transform 200ms ease-out; /* keeps the lift's */
  }
  html.mo-r-glow :is(.card, .option-card, .choice-cell, .policy-card, .provenance-card):hover,
  html.mo-r-glow .option-card:has(input:checked) {
    border-color: var(--brand);
    box-shadow: 0 0 0 1px var(--brand), 0 8px 24px -10px color-mix(in srgb, var(--brand) 45%, transparent);
  }
  /* with the lift recipe on, the lifted card keeps its depth and takes the brand ring and tint */
  html.mo-r-glow.mo-r-lift :is(.card, .service-alt__item, .team-member, .stats--grid .stat):hover {
    box-shadow: 0 0 0 1px var(--brand), 0 10px 28px color-mix(in srgb, var(--brand) 24%, transparent);
  }

  /* compress: buttons and option cards give a little under the press (offset-ink's press, 069, wins on its sites) */
  :where(html.mo-r-compress) :where(.btn, .option-card, .quiz__option) {
    transition: transform 120ms ease-out, background-color .15s ease, border-color .15s ease, box-shadow 200ms ease-out;
  }
  html.mo-r-compress :is(.btn, .option-card, .quiz__option):active { transform: scale(.97); }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  /* mosaic: gallery, bento and lead-article photos zoom a little inside their own frame; the bottom edge stays, so a
     caption under the photo is never covered (the annotated figure and a panel with pins never move: the pins sit on it) */
  html.mo-r-mosaic :is(.gallery-item, .bento__cell, .lead-article__figure) { overflow: hidden; }
  :where(html.mo-r-mosaic) :where(.gallery-item__img, .bento__img, .lead-article__figure img) {
    transform-origin: 50% 100%; transition: transform var(--mo-duration, 640ms) var(--mo-ease, ease-out);
  }
  html.mo-r-mosaic:not(.mo-r-ken-burns) .gallery-item:hover .gallery-item__img,
  html.mo-r-mosaic .bento__cell:hover .bento__img,
  html.mo-r-mosaic .lead-article__figure:hover img { transform: scale(var(--mo-zoom, 1.05)); }
}

/* ---------- 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) ===== */
/* ===== Tokens ===== */
:root{
  --font-display: 'Lora', serif;
  --font: 'Open Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --bg:#fbf6ef;
  --surface:#ffffff;
  --surface-2:#f3eadc;
  --surface-low:#f3eadc;
  --surface-lowest:#ffffff;
  --text:#2a201a;
  --text-muted:#5c4a3d;
  --text-subtle:#7a6656;
  --brand:#9c3d23;
  --brand-strong:#7a2e19;
  --brand-soft:#f7e6dc;
  --on-brand:#ffffff;
  --border:#e2d4c0;
  --danger:#a8231b;
  --ok:#3f6b22;
  --warn:#8a4f00;
  --surface-inverse:#2a1d15;
  --surface-inverse-2:#3a2a1f;
  --on-inverse:#f8efe4;
  --shadow-tint: color-mix(in srgb, var(--brand) 14%, transparent);

  --measure: 64ch;

  --step-1: clamp(0.85rem, 0.8rem + 0.2vw, 0.95rem);
  --step-2: clamp(1rem, 0.95rem + 0.25vw, 1.1rem);
  --step-3: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
  --step-4: clamp(1.7rem, 1.4rem + 1.2vw, 2.4rem);
  --step-5: clamp(2.2rem, 1.7rem + 2vw, 3.2rem);

  --sp-1:.4rem; --sp-2:.75rem; --sp-3:1.2rem; --sp-4:1.75rem;
  --sp-5:2.5rem; --sp-6:3.4rem; --sp-7:4.75rem; --sp-8:6.75rem;

  --radius:.375rem;
  --radius-lg:.625rem;
  --radius-full:999px;
}



/* ===== Base elements ===== */
html{ scroll-behavior:smooth; }
body{
  background:var(--bg);
  color:var(--text);
  font-family: var(--font);
  font-size: var(--step-2);
  line-height:1.6;
}
h1,h2,h3{ font-family: var(--font-display); color:var(--text); font-weight:600; }
.prose, .lead, .section-lead, .about-split > div p, .lead-article__body p{
  max-width: var(--measure);
}
.accent{ font-style:italic; color:var(--brand-strong); }

/* ===== Header ===== */
body.hd-minimal .site-head{
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
}
.site-head .brand-text strong{ font-family:var(--font-display); color:var(--brand-strong); font-size:1.2rem; }
.site-head .brand-text small{ color:var(--text-subtle); }
.brand-mark{
  background: var(--brand);
  color: var(--on-brand);
  border-radius: var(--radius);
  font-family: var(--font-display);
}
.nav a{
  color:var(--text-muted);
  font-weight:600;
  text-decoration:none;
  padding:.3rem .2rem;
}
.nav a[aria-current=page], .nav a:hover{ color:var(--brand); }
.nav-toggle-bars, .nav-toggle{ color:var(--brand-strong);}
.btn-call.head-call{
  background:var(--brand);
  color:var(--on-brand);
  border-radius:var(--radius-full);
  padding:.5rem 1.1rem;
}

/* ===== Hero full ===== */
.hero.hero--full{
  min-height: 78vh;
  display:flex;
  align-items:flex-end;
}
.hero--full .hero-bg{ object-fit:cover; }
.hero--full.hero--image::after{
  background: linear-gradient(to top, rgba(20,12,7,.78) 10%, rgba(20,12,7,.25) 55%, transparent 85%);
}
.hero-inner{
  padding-bottom: var(--sp-6);
  padding-top: var(--sp-4);
  color: var(--on-inverse);}
.hero--full.hero--image .eyebrow{ color: var(--brand-soft); letter-spacing:.1em; text-transform:uppercase; font-size:.85rem; }
.hero-title{
  font-family:var(--font-display);
  font-size: var(--step-5);
  line-height: 1.05;
  max-width: 24ch;
  color: var(--on-inverse);
}
@media (max-width:30rem){
  .hero-title{ font-size: clamp(2rem, 1.6rem + 3vw, 2.6rem); line-height:1.1; }
}
.hero--full.hero--image .lead{ color: var(--on-inverse); max-width: var(--measure); opacity:.95; }
.hero-actions .btn{
  border-radius: var(--radius-full);
  padding:.75rem 1.5rem;
  font-weight:700;
}
.hero-actions .btn-call{ background:var(--brand); color:var(--on-brand); }
.hero-actions .btn-ghost{ color: var(--on-inverse); border:1px solid rgba(248,239,228,.65); background:transparent; }
.hero--full.hero--image .badges li{ color: var(--on-inverse); }

/* ===== Services: selector ===== */
.services.services--selector{ padding-block: var(--sp-7); }
.selector__list{ display:flex; gap: var(--sp-2); flex-wrap:wrap; list-style:none; padding:0; margin:0 0 var(--sp-4); }
.selector__item{
  display:flex; align-items:center; gap:.5rem;
  padding:.6rem 1rem;
  border:1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--text-muted);
  text-decoration:none;
  font-weight:600;
}
.selector__index{ font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-subtle); }
.selector__item[aria-current=true]{
  background: var(--brand);
  color: var(--on-brand);
  border-color: var(--brand);
}
.selector__item[aria-current=true] .selector__index{ color: var(--on-brand); }
.selector__panel{
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  box-shadow: 0 10px 28px var(--shadow-tint);
}
.selector__panel h3{ font-size: var(--step-3); }
.selector__panel .price{ font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--brand-strong); font-weight:700; }

/* ===== Pricelist grid ===== */
.pricelist.pricelist--grid{ background: var(--surface-low); padding-block: var(--sp-7); }
.price-groups{ display:grid; gap: var(--sp-4); }
.price-group{
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
}
.price-group__title{
  font-family: var(--font-display);
  color: var(--brand-strong);
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--sp-2);
  margin-bottom: var(--sp-2);
}
.price-item{
  display:flex; align-items:baseline; gap:.4rem;
  padding: .5rem 0;
}
.price-item__name{ font-weight:600; }
.price-item__dots{
  flex:1;
  border-bottom: 1px dashed var(--border);
  height: .5rem;
  margin:0 .3rem;
}
.price-item__price{ font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--brand-strong); font-weight:700; }
.price-item__desc{ display:block; color: var(--text-subtle); font-size: var(--step-1); }
.pricelist--tiers .price-item--featured{
  background: var(--brand-soft);
  border-radius: var(--radius);
  padding: .6rem .8rem;
  border-top: 1px solid var(--brand);
}
.price-item__badge{
  background: var(--brand);
  color: var(--on-brand);
  border-radius: var(--radius-full);
  font-size:.7rem;
  padding:.1rem .5rem;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.price-item__unit{ color: var(--text-subtle); font-size:.8rem; }
.price-item__terms{ color: var(--text-subtle); font-size: var(--step-1); margin-top:.3rem; }

/* ===== About blurb: column (lead article) ===== */
.about-blurb.about-blurb--column{ padding-block: var(--sp-7); }
.lead-article{ max-width: var(--measure); margin-inline:auto; }
.lead-article__byline{ color: var(--text-subtle); font-size: var(--step-1); margin-bottom: var(--sp-3); }
.lead-article__body p{ margin-bottom: var(--sp-3); }
.pull-quote{
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-3);
  border-left: 3px solid var(--brand);
  padding-left: var(--sp-3);
  color: var(--brand-strong);
  margin: var(--sp-4) 0;
}
.lead-article__figure img{
  border-radius: var(--radius-lg);
  aspect-ratio: 4/3;
  object-fit:cover;
  border: 1px solid var(--border);
}
.lead-article__source{ color: var(--text-subtle); font-style: italic; font-size: var(--step-1); }
.about-blurb .btn-ghost{
  display:inline-block;
  margin-top: var(--sp-3);
  color: var(--brand-strong);
  border:1px solid var(--brand);
  border-radius: var(--radius-full);
  padding:.5rem 1.2rem;
  text-decoration:none;
}

/* ===== Gallery grid ===== */
.gallery.gallery--grid{ background: var(--surface-low); padding-block: var(--sp-7); }
.gallery-list{ display:grid; grid-template-columns: repeat(auto-fit, minmax(14rem,1fr)); gap: var(--sp-3); list-style:none; padding:0; }
.gallery-item__img, .gallery-item__frame{
  width:100%;
  aspect-ratio: 4/3;
  object-fit:cover;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
}
.gallery-item__caption{ color: var(--text-subtle); font-size: var(--step-1); margin-top:.4rem; }

/* ===== Testimonials grid ===== */
.testimonials.testimonials--grid{ padding-block: var(--sp-7); }
.quote-list{ display:grid; grid-template-columns: repeat(auto-fit, minmax(16rem,1fr)); gap: var(--sp-4); }
.quote{
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  box-shadow: 0 8px 20px var(--shadow-tint);
}
.quote__text p{ font-family: var(--font-display); font-size: var(--step-3); color: var(--text); }
.quote__by{ margin-top: var(--sp-2); color: var(--text-subtle); font-size: var(--step-1); }
.quote__author{ font-weight:700; color: var(--text); }
.quote__verified{ text-transform:uppercase; letter-spacing:.08em; font-size:.7rem; color: var(--ok); }

/* ===== Map band ===== */
.map.map--band{
  background: var(--brand-soft);
  padding-block: var(--sp-6);
}
.map__inner{ display:flex; flex-wrap:wrap; gap: var(--sp-4); align-items:center; justify-content:space-between; }
.map__text address.nap{ font-style:normal; color: var(--text); font-weight:600; }
.map__note{ color: var(--text-muted); }
.map__action .btn.directions{
  background: var(--brand);
  color: var(--on-brand);
  border-radius: var(--radius-full);
  padding:.7rem 1.4rem;
  text-decoration:none;
  font-weight:700;
}

/* ===== Contact-cta: subscribe ===== */
.contact-cta.cta[data-surface="brand"]{
  background: var(--brand);
  color: var(--on-brand);
  padding-block: var(--sp-6);
}
.contact-cta.cta h2, .contact-cta.cta p{ color: var(--on-brand); }
.subscribe__form{
  display:flex;
  gap: var(--sp-2);
  flex-wrap:wrap;
  margin-top: var(--sp-3);
}
.subscribe__form input[type=email]{
  flex:1;
  min-width:12rem;
  padding:.7rem 1rem;
  border-radius: var(--radius);
  border:1px solid transparent;
  background: var(--surface);
  color: var(--text);
}
.subscribe__form button{
  background: var(--surface-inverse);
  color: var(--on-inverse);
  border-radius: var(--radius);
  padding:.7rem 1.4rem;
  font-weight:700;
  border:none;
}
.subscribe__assurances{ list-style:none; padding:0; margin-top: var(--sp-2); display:flex; gap: var(--sp-3); flex-wrap:wrap; }
.subscribe__assurances li{ color: var(--on-brand); opacity:.9; font-size: var(--step-1); }

/* ===== Contact page: book ===== */
.contact.contact--book .contact-head h1{ font-size: var(--step-4); }
.contact.contact--book .contact-head .lead{ max-width: var(--measure); color: var(--text-muted); }
.contact-part{
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);}
.contact-part--booking.form-box{ box-shadow: 0 10px 28px var(--shadow-tint);}
.contact-part--phone a, .contact-part--hours td{ color: var(--text);}
.contact-part--hours table.hours th{ color: var(--text-subtle); font-weight:600;}

/* ===== Footer ===== */
.site-foot{
  background: var(--surface-inverse);
  color: var(--on-inverse);
  padding-block: var(--sp-6);
  border-top: 1px solid var(--brand);
}
.site-foot .foot-h{ font-family: var(--font-display); color: var(--on-inverse); border-bottom:1px solid rgba(255,255,255,.15); padding-bottom:.4rem; margin-bottom:.6rem; }
.site-foot .nap, .site-foot .muted{ color: var(--on-inverse); opacity:.85; }
.site-foot .nap a{
  color: var(--on-inverse);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight:600;
}
.site-foot .nap a:hover{ color: var(--brand-soft); }
.site-foot .foot-list a{ color: var(--on-inverse); opacity:.85; text-decoration:none; }
.site-foot .foot-list a:hover{ opacity:1; text-decoration:underline; }
.site-foot .hours td, .site-foot .hours th{ color: var(--on-inverse); opacity:.85; }
.foot-bottom{ color: var(--on-inverse); opacity:.65; font-size: var(--step-1); }

/* ===== Interior primitives ===== */
.section{ padding-block: var(--sp-7); }
@media (max-width: 30rem){ .section{ padding-block: var(--sp-5); } }
.wrap{ width:100%; }
.card{
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-3);
  box-shadow: 0 8px 20px var(--shadow-tint);
}
.box{
  background: var(--surface-low);
  border:1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
}
.crumbs{ color: var(--text-subtle); font-size: var(--step-1); margin-bottom: var(--sp-3); }
.crumbs a{ color: var(--text-muted); }
.btn{
  display:inline-block;
  border-radius: var(--radius-full);
  padding:.65rem 1.3rem;
  font-weight:700;
  text-decoration:none;
}
.btn-call, .btn:not(.btn-ghost){ background: var(--brand); color: var(--on-brand); }
.btn-ghost{ border:1px solid var(--brand); color: var(--brand-strong); background:transparent; }

.working-page{ padding-block: var(--sp-8); text-align:center; }
.working-page h1{ font-size: var(--step-4); color: var(--brand-strong); }
.working-page .working-note{ color: var(--text-muted); max-width: var(--measure); margin-inline:auto; }

/* kicker */
.kicker{ display:flex; align-items:center; gap:.5rem; text-transform:uppercase; letter-spacing:.1em; color: var(--text-subtle); font-size:.8rem; margin-bottom:.5rem; }
.kicker-index{ font-family: var(--font-mono); color: var(--brand); }

/* ===== Motion (gentle) ===== */
@media (prefers-reduced-motion: no-preference){
  [data-reveal]{
    transition: opacity .7s ease, transform .7s ease;
    transition-delay: calc(var(--reveal-i, 0) * 90ms);
  }
  [data-reveal]:not(.is-in){
    transform: translateY(14px);
  }
  [data-reveal].is-in{
    transform: translateY(0);
  }
  .gallery-item__img, .lead-article__figure img{
    transition: transform .8s ease;
  }
  .gallery-item__img:hover, .lead-article__figure img:hover{
    transform: scale(1.04);
  }
  .card, .quote, .price-item--featured{
    transition: transform .3s ease, box-shadow .3s ease;
  }
  .card:hover, .quote:hover{
    transform: translateY(-3px);
  }
  .btn{ transition: transform .2s ease, background .2s ease; }
  .btn:active{ transform: scale(.97); }
}

:focus-visible{
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.site-foot :focus-visible, .hero--full.hero--image :focus-visible{
  outline-color: var(--on-inverse);
}


/* ===== self-hosted fonts win over design.css (spec.meta.design.fontPair / design.json via resolve-fonts) ===== */
:root {
  --font: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Lora", Georgia, "Iowan Old Style", "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

/* ===== readability.css (071: the host's readability patch; layered last) ===== */
/* readability.css — 071: the host's readability patch (readable-text.mjs patchFor after the rendered check). Generated — do not edit.
   build build_mvcnbfdm_j2pksg · 2026-10-17T17:12:13.906Z
   answers:
   [contrast] /@1280 .hero div.wrap.hero-inner p.eyebrow "Спешълти кафене от 2019 г." #f7e6dc on #bb9976 2.18 (need 4.5; stylist rule .hero--full.hero--image .eyebrow; photo worst tenth)
   [contrast] /@1280 .hero div.wrap.hero-inner h1.hero-title em.accent "тихо" #7a2e19 on #5a412a 1.00 (need 3; stylist rule .accent; photo worst tenth)
   [contrast] /@1280 [data-block="map"] div.wrap.map__inner div.map__text p.kicker span.kicker__text "Намерете ни" #7a6656 on #f7e6dc 4.48 (need 4.5; stylist rule .kicker)
   [contrast] /@1280 [data-block="contact-cta"] div.wrap.subscribe ul.subscribe__assurances li "Плащане на място" #fffefd on #fbf6ef 1.07 (need 4.5; stylist rule .subscribe__assurances li)
   [contrast] /services@1280 main section.section div.wrap p.hero-actions a.btn.btn-ghost.btn-lg "Изпрати запитване" #f8efe4 on #fbf6ef 1.06 (need 4.5; stylist rule .hero-actions .btn-ghost)
   [contrast] /services@390 .site-foot div.wrap.foot-grid div p.nap a "0898 000 245" #8b3821 on #2a1d15 2.09 (need 4.5; template rule a) (+1 more page)
*/
[data-hero].hero.hero--image::after { background: color-mix(in oklab, #000 65%, transparent); }
.hero div.wrap.hero-inner h1.hero-title em.accent { color: var(--on-inverse); }
[data-block="map"] div.wrap.map__inner div.map__text p.kicker span.kicker__text { color: var(--text); }
[data-block="contact-cta"] div.wrap.subscribe ul.subscribe__assurances li { color: var(--text); }
main section.section div.wrap p.hero-actions a.btn.btn-ghost.btn-lg { color: var(--text); }
.site-foot div.wrap.foot-grid div p.nap a { color: var(--on-inverse); }