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

/* self-hosted webfonts (from spec.meta.design.fontPair — resolve-fonts) */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/dm-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: "DM Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/dm-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: "DM Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/dm-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: "DM Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/dm-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: "DM Serif Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/dm-serif-display-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: "DM Serif Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/dm-serif-display-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;
}
/* Family: ATELIER — hair and beauty salons, nails, spas, florists, photographers, crafts.
   Soft and editorial: ivory paper, a plum brand with a blush tint, a high-contrast didone
   display over a quiet sans, hairline rules and near-square corners, airy spacing. Built for a
   left-aligned editorial hero with big type and a thin rule, and a masonry gallery.
   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 atelier` (gate + family audit). */

:root {
  --brand:        #7b3f61;
  --brand-strong: #5e2f4a;
  --brand-soft:   #f5e9ef;
  --on-brand:     #ffffff;

  --bg:        #f7f0ea;
  --surface:   #ffffff;
  --surface-2: #f5eee9;
  --border:    #e9dcd5;

  --text:        #2b2228;
  --text-muted:  #5e5059;
  --text-subtle: #7c6d76;

  --ok:     #2f6b45;
  --warn:   #85520a;
  --danger: #a52a2a;

  --surface-inverse:   #2a1f26;
  --surface-inverse-2: #3b2d36;
  --on-inverse:        #f7eef2;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
          "Noto Sans", sans-serif;
  --font-display: "Bodoni 72", Didot, "Iowan Old Style", Georgia, "Noto Serif", serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --step--1: clamp(0.82rem, 0.8rem + 0.12vw, 0.88rem);
  --step-0:  clamp(1rem, 0.97rem + 0.18vw, 1.08rem);
  --step-1:  clamp(1.2rem, 1.08rem + 0.55vw, 1.5rem);
  --step-2:  clamp(1.55rem, 1.25rem + 1.3vw, 2.35rem);
  --step-3:  clamp(2rem, 1.45rem + 2.6vw, 3.5rem);
  --step-4:  clamp(2.5rem, 1.55rem + 4.4vw, 5.2rem);
  --leading-tight: 1.08;
  --leading: 1.75;

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

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

  --shadow-1: 0 1px 0 rgb(43 34 40 / 0.06);
  --shadow-2: 0 12px 32px rgb(43 34 40 / 0.08);

  --measure: 60ch;
  --container: 1180px;
}


/* per-site design override (from spec.meta.design) */
:root {
  --brand: #d7263d;
  --brand-strong: #ac1e31;
  --brand-soft: #f9e1e4;
  --on-brand: #ffffff;
  --radius: 3px;
  --radius-lg: 5px;
  --radius-full: 6px;
  --sp-7: 4.5rem;
  --sp-8: 6.5rem;
  --font: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "DM Serif Display", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ===== AI-authored design.css (per-site visual system) ===== */
/* Nora Albrecht Studio — print-monograph visual system
   Hazard-yellow world, flat surfaces, sharp corners, bold editorial rules.
   High-contrast type-led finish for a graphic-design portfolio. */

/* ---------- Palette & tokens ---------- */
:root {
  --brand:        #d7263d;
  --brand-strong: #ac1e31;
  --brand-soft:   #f9e1e4;
  --on-brand:     #ffffff;

  --bg:        #fffdf2;
  --surface:   #ffffff;
  --surface-2: #fff3bf;
  --border:    #ffeb96;

  --text:        #23221f;
  --text-muted:  #5b5953;
  --text-subtle: #74736c;

  --ok:     #2a6f3b;
  --warn:   #955104;
  --danger: #ad231f;

  --surface-inverse:   #171717;
  --surface-inverse-2: #262626;
  --on-inverse:        #f6f5ee;

  --font-display: "DM Serif Display", serif;
  --font:         "DM Sans", sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --step--1: clamp(0.85rem, 0.82rem + 0.15vw, 0.95rem);
  --step-0:  clamp(1rem, 0.95rem + 0.25vw, 1.15rem);
  --step-1:  clamp(1.3rem, 1.12rem + 0.8vw, 1.75rem);
  --step-2:  clamp(1.7rem, 1.3rem + 1.8vw, 2.8rem);
  --step-3:  clamp(2.2rem, 1.5rem + 3.2vw, 4.2rem);
  --step-4:  clamp(2.8rem, 1.6rem + 5.6vw, 6.4rem);
  --step-5:  clamp(3.5rem, 1.8rem + 8vw, 8rem);

  --leading-tight: 1.05;
  --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: 6rem;

  --radius:      3px;
  --radius-lg:   5px;
  --radius-full: 6px;

  --measure:     65ch;
  --container:   1200px;

  --shadow-1: 0 1px 0 rgb(35 34 31 / 0.06);
  --shadow-2: 0 8px 24px rgb(35 34 31 / 0.08);
}



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

/* ---------- Header ---------- */
.site-head {
  padding-top: var(--sp-5);
  padding-bottom: var(--sp-5);
  background: transparent;
}

.brand {
  text-decoration: none;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
}

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

.brand-text strong {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 400;
  line-height: var(--leading-tight);
  display: block;
}

.brand-text small {
  font-size: var(--step--1);
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.hd-minimal .brand-text strong {
  font-size: var(--step-3);
}

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

.nav a {
  color: var(--text-muted);
  text-decoration: none;
  padding: 0.35em 0;
  transition: color 0.2s ease;
}

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

.nav a[aria-current="page"] {
  border-bottom: 2px solid var(--text);
}

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

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

.lang-switch a[aria-current] {
  color: var(--text);
  font-weight: 500;
  border-bottom: 2px solid var(--text);
}

.head-call {
  margin-left: var(--sp-4);
}

.nav-toggle {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-3);
  cursor: pointer;}

.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  background: var(--text);
}

/* ---------- Hero (shared) ---------- */
.hero {
  padding-top: var(--sp-8);
  padding-bottom: var(--sp-8);
  border-bottom: 2px solid var(--text);
}

.hero-title {
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 400;
  line-height: var(--leading-tight);
  color: var(--text);
  overflow-wrap: anywhere;
}

.hero--split .hero-title,
.hero--left .hero-title {
  font-size: var(--step-5);
}

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

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

.hero-rule {
  border: none;
  border-top: 2px solid var(--text);
  margin: var(--sp-5) 0;
  width: 4rem;
}

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

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

.badges li {
  font-size: var(--step--1);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  border: 1px solid var(--border);
  padding: 0.4em 0.8em;
  border-radius: var(--radius);
}

/* Hero media framing */
.hero-media {
  margin: 0;
}

.im-framed .hero-img,
.im-framed .hero-media.hero-side .hero-img {
  border: 1px solid var(--border);
  padding: var(--sp-2);
  background: var(--surface);
  display: block;
  width: 100%;
}

.hero--split .hero-media.hero-side {
  border: 1px solid var(--border);
  padding: var(--sp-3);
  background: var(--surface);
}

.hero--left .hero-media.hero-strip {
  margin-top: var(--sp-7);
  border: 1px solid var(--border);
  padding: var(--sp-3);
  background: var(--surface);
}

.hero--asymmetric .hero-media.hero-offset {
  border: 1px solid var(--border);
  padding: var(--sp-3);
  background: var(--surface);
}

.hero--centered .hero-media.hero-round {
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--border);
  padding: var(--sp-2);
  background: var(--surface);
}

.hero--centered .hero-shape {
  background: var(--surface-2);
  opacity: 0.4;
}

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

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

.hero--showcase .hero-picks a {
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--text);
  text-decoration: none;
}

.hero--showcase .hero-picks a:hover,
.hero--showcase .hero-picks a:focus {
  color: var(--brand);
}

.hero--showcase .hero-picks .price {
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
}

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

.hero-form h2 {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 400;
  margin-bottom: var(--sp-5);
}

.hero-card__label {
  font-size: var(--step--1);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.phone-big {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 400;
  color: var(--text);
}

/* Hero banded */
.hero-band {
  background: var(--surface-2);
  padding-top: var(--sp-8);
  padding-bottom: var(--sp-8);
}

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

.hero-below__area {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 400;
}

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

/* ---------- Sections ---------- */
.section {
  padding-top: var(--sp-8);
  padding-bottom: var(--sp-8);
  border-top: 1px solid var(--border);
}

.section:first-of-type,
.hero + .section {
  border-top: none;
}

.section h2 {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 400;
  line-height: var(--leading-tight);
  margin-bottom: var(--sp-5);
}

.section-lead {
  font-size: var(--step-1);
  color: var(--text-muted);
  max-width: var(--measure);
  margin-bottom: var(--sp-6);
}

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

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9em 1.6em;
  font-family: var(--font);
  font-size: var(--step--1);
  font-weight: 500;
  text-decoration: none;
  line-height: 1.2;
  border: 2px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
}

.btn-call {
  background: var(--brand);
  color: var(--on-brand);
  border-color: var(--brand);
}

.btn-call:hover,
.btn-call:focus {
  background: var(--brand-strong);
  border-color: var(--brand-strong);
}

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

.btn-ghost:hover,
.btn-ghost:focus {
  background: var(--text);
  color: var(--bg);
}

/* ---------- Services ---------- */
.services--list .service-rows {
  list-style: none;
  padding: 0;
  margin: 0;
}

.services--list .service-row {
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--border);
}

.services--list .service-row__name {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 400;
  color: var(--text);
  text-decoration: none;
  display: block;
}

.services--list .service-row__name:hover,
.services--list .service-row__name:focus {
  color: var(--brand);
}

.services--list .service-row__summary {
  display: block;
  margin-top: var(--sp-2);
  color: var(--text-muted);
  max-width: var(--measure);
}

.services--list .price {
  display: block;
  margin-top: var(--sp-3);
  font-size: var(--step--1);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

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

.service-row__toggle {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-3);
  font-family: var(--font);
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  margin-top: var(--sp-3);
}

.service-row__toggle:hover,
.service-row__toggle:focus {
  color: var(--text);
  border-color: var(--text);
}

/* Service photos */
.service-photo--card {
  margin: calc(-1 * var(--sp-5)) calc(-1 * var(--sp-5)) var(--sp-5);
  overflow: hidden;
}

.service-photo--card .service-photo__img {
  display: block;
  width: 100%;
}

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

.service-photo--row .service-photo__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.service-photo--side {
  margin-bottom: var(--sp-4);
}

.service-photo--side .service-photo__img {
  display: block;
  width: 100%;
}

.im-framed .service-photo__img {
  border: 1px solid var(--border);
  padding: var(--sp-1);
  background: var(--surface);
}

.im-framed .service-photo--card .service-photo__img {
  padding: var(--sp-2);
}

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

.services--grid .card h3 {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 400;
  margin-bottom: var(--sp-3);
}

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

.services--grid .card h3 a:hover,
.services--grid .card h3 a:focus {
  color: var(--brand);
}

.services--grid .card p {
  color: var(--text-muted);
}

.services--grid .price {
  margin-top: var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 400;
  color: var(--text);
}

.services--grid .card-more {
  margin-top: var(--sp-3);
  font-size: var(--step--1);
  font-weight: 500;
}

/* Services alternating */
.services--alternating .service-alt {
  list-style: none;
  padding: 0;
  counter-reset: service;
}

.services--alternating .service-alt__item {
  padding: var(--sp-6) 0;
  border-bottom: 1px solid var(--border);
}

.services--alternating .service-alt__num {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 400;
  line-height: 1;
  color: var(--brand);
  display: block;
  margin-bottom: var(--sp-3);
}

.services--alternating .service-alt__body h3 {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 400;
  margin-bottom: var(--sp-2);
}

.services--alternating .service-alt__body p {
  color: var(--text-muted);
  max-width: var(--measure);
}

/* ---------- Gallery ---------- */
.gallery-list {
  list-style: none;
  padding: 0;
}

.gallery--masonry .gallery-item {
  break-inside: avoid;
  margin-bottom: var(--sp-4);
}

.gallery--masonry .gallery-item__frame {
  background: var(--surface-2);
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
}

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

.gallery--grid .gallery-item {
  border: 1px solid var(--border);
  padding: var(--sp-2);
  background: var(--surface);
  border-radius: var(--radius);
}

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

.gallery--strip .gallery-list {
  gap: var(--sp-4);
  padding-bottom: var(--sp-4);
  scrollbar-width: thin;
}

.gallery--strip .gallery-item {
  flex-shrink: 0;
  width: 70vw;
  max-width: 24rem;
  border: 1px solid var(--border);
  padding: var(--sp-2);
  background: var(--surface);
  border-radius: var(--radius);
}

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

/* ---------- About blurb ---------- */
.about-blurb--split .box {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: var(--sp-6);
  border-radius: var(--radius);
}

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

/* ---------- Process ---------- */
.process--numbered .steps,
.process--timeline .steps {
  list-style: none;
  padding: 0;
  counter-reset: step;
}

.process--numbered .steps > li {
  position: relative;
  padding-left: 4.5rem;
  padding-top: var(--sp-5);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--border);
}

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

.process--numbered .steps h3 {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 400;
  margin-bottom: var(--sp-2);
}

.process--numbered .steps p {
  color: var(--text-muted);
  max-width: var(--measure);
}

.process--timeline .steps > li {
  position: relative;
  padding-left: 2rem;
  padding-bottom: var(--sp-6);
  border-left: 2px solid var(--border);
}

.process--timeline .steps > li:last-child {
  border-left-color: transparent;
}

.process--timeline .steps > li::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 0.4em;
  width: 8px;
  height: 8px;
  background: var(--brand);
  border-radius: 50%;
}

.process--timeline .steps h3 {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 400;
  margin-bottom: var(--sp-2);
}

.process--timeline .steps p {
  color: var(--text-muted);
  max-width: var(--measure);
}

/* ---------- FAQ ---------- */
.faq-list,
.faq--accordion .faq-items,
.faq--two-col .faq-items {
  list-style: none;
  padding: 0;
}

.faq-list details,
.faq--accordion details,
.faq--two-col details {
  border-bottom: 1px solid var(--border);
}

.faq-list summary,
.faq--accordion summary,
.faq--two-col summary {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 400;
  padding: var(--sp-4) 0;
  cursor: pointer;
  color: var(--text);
}

.faq-list details p,
.faq--accordion details p,
.faq--two-col details p {
  padding-bottom: var(--sp-4);
  color: var(--text-muted);
  max-width: var(--measure);
}

/* ---------- Emergency CTA ---------- */
.emergency-cta--inline {
  padding-top: var(--sp-7);
  padding-bottom: var(--sp-7);
}

.emergency-cta--banner {
  background: var(--brand);
  color: var(--on-brand);
  padding-top: var(--sp-7);
  padding-bottom: var(--sp-7);
}

.emergency-cta--banner h2,
.emergency-cta--banner .lead {
  color: var(--on-brand);
}

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

.emergency-cta--banner .btn-ghost:hover,
.emergency-cta--banner .btn-ghost:focus {
  background: var(--on-brand);
  color: var(--brand);
}

/* ---------- Contact CTA ---------- */
.contact-cta--band {
  background: var(--surface-2);
}

.contact-cta--split {
  background: var(--surface-2);
}

.contact-cta--split .box {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: var(--sp-6);
  border-radius: var(--radius);
}

/* ---------- Pricelist ---------- */
.pricelist--list .price-group {
  margin-bottom: var(--sp-7);
}

.pricelist--list .price-group__title {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 400;
  margin-bottom: var(--sp-5);
}

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

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

.price-item__name {
  font-weight: 500;
}

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

.price-item__price {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--text);
  white-space: nowrap;
}

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

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

/* ---------- Team ---------- */
.team--grid .team-list {
  list-style: none;
  padding: 0;
}

.team-member {
  text-align: center;
}

.team-member__photo,
.team-member__avatar {
  width: 100%;
  max-width: 12rem;
  aspect-ratio: 1/1;
  object-fit: cover;
  margin: 0 auto var(--sp-4);
  display: block;
}

.team-member__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--text);
  color: var(--bg);
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 400;
}

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

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

.team-member__role {
  font-size: var(--step--1);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: var(--sp-1);
}

.team-member__quote {
  margin-top: var(--sp-3);
  font-style: italic;
  color: var(--text-muted);
  font-size: var(--step-0);
}

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

.team--list .team-member {
  display: flex;
  gap: var(--sp-5);
  padding: var(--sp-6) 0;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.team--list .team-member__photo,
.team--list .team-member__avatar {
  flex-shrink: 0;
  width: 6rem;
  height: 6rem;
  margin: 0;
}

.team-list--page .team-member {
  padding: var(--sp-6) 0;
  border-bottom: 1px solid var(--border);
}

.team-member__bio {
  margin-top: var(--sp-4);
  color: var(--text-muted);
  max-width: var(--measure);
}

.team-all a {
  color: var(--brand);
  font-weight: 500;
}

/* ---------- Testimonials ---------- */
.testimonials--single .quote {
  margin: 0;
}

.testimonials--single .quote__text {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 400;
  line-height: 1.15;
  color: var(--text);
}

.testimonials--single .quote__text p {
  margin: 0;
}

.testimonials--single .quote__by {
  margin-top: var(--sp-6);
  font-size: var(--step-0);
  color: var(--text-muted);
}

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

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

.testimonials--grid .quote-list {
  list-style: none;
  padding: 0;
}

.testimonials--grid .quote {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: var(--sp-6);
  border-radius: var(--radius);
}

.testimonials--grid .quote__text {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 400;
  line-height: 1.25;
  color: var(--text);
}

.testimonials--grid .quote__by {
  margin-top: var(--sp-4);
  font-size: var(--step--1);
  color: var(--text-muted);
}

/* ---------- Stats ---------- */
.stats--strip .stat-list {
  list-style: none;
  padding: 0;
}

.stat__value {
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 400;
  line-height: 1;
  color: var(--text);
}

.stat__label {
  display: block;
  margin-top: var(--sp-3);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.stats--grid .stat-list {
  list-style: none;
  padding: 0;
}

.stats--grid .stat {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: var(--sp-6);
  border-radius: var(--radius);
}

/* ---------- Map ---------- */
.map--band {
  background: var(--surface-2);
}

.map--band .map__inner {
  padding-top: var(--sp-7);
  padding-bottom: var(--sp-7);
}

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

.map__text h2 {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 400;
}

.nap {
  font-style: normal;
  color: var(--text-muted);
}

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

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

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

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

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

.timetable-slot {
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border);
}

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

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

.timetable-slot__title {
  display: block;
  font-weight: 500;
  margin-top: 0.2em;
}

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

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

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

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

/* ---------- Contact page ---------- */
.contact-head {
  margin-bottom: var(--sp-8);
}

.contact-head h1 {
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 400;
  line-height: var(--leading-tight);
}

.contact-part {
  padding: var(--sp-5) 0;}

.contact-part h2 {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 400;
  margin-bottom: var(--sp-4);}

.contact-email a,
.contact-part a {
  color: var(--brand);
  text-decoration: none;}

.contact-email a:hover,
.contact-part a:hover,
.contact-email a:focus,
.contact-part a:focus {
  text-decoration: underline;}

.example-value {
  color: inherit;
  font-style: italic;
}

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

.form-box h2 {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 400;
  margin-bottom: var(--sp-5);
}

/* ---------- Footer ---------- */
.site-foot {
  padding-top: var(--sp-8);
  padding-bottom: var(--sp-8);
  border-top: 2px solid var(--text);
  background: var(--surface);
}

.foot-h {
  font-family: var(--font);
  font-size: var(--step--1);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: var(--sp-4);
}

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

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

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

.foot-list a:hover,
.foot-list a:focus {
  color: var(--brand);
}

.hours {
  width: 100%;
  border-collapse: collapse;
}

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

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

.foot-bottom {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
}

.foot-bottom p {
  font-size: var(--step--1);
  color: var(--text-subtle);
}

/* ---------- Call bar ---------- */
.call-bar {
  background: var(--brand);
  color: var(--on-brand);
  padding: var(--sp-4);
  font-weight: 500;
  text-decoration: none;
  text-align: center;}

/* ---------- Utilities ---------- */
.narrow {
  max-width: var(--measure);
  margin-left: auto;
  margin-right: auto;
}

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

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

.emergency {
  color: var(--brand);
  font-weight: 500;
}

/* ---------- Interior primitives ---------- */
.prose h2 {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 400;
  line-height: var(--leading-tight);
  margin-top: var(--sp-7);
  margin-bottom: var(--sp-4);
}

.prose h3 {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 400;
  line-height: var(--leading-tight);
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-3);
}

.prose h4 {
  font-family: var(--font);
  font-size: var(--step-1);
  font-weight: 500;
  margin-top: var(--sp-5);
  margin-bottom: var(--sp-2);
}

.prose p {
  margin-bottom: var(--sp-4);
  max-width: var(--measure);
}

.prose ul,
.prose ol {
  margin-bottom: var(--sp-4);
  padding-left: var(--sp-6);
}

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

.prose blockquote {
  border-left: 3px solid var(--brand);
  padding-left: var(--sp-5);
  margin: var(--sp-6) 0;
  color: var(--text-muted);
  font-style: italic;
}

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

.facts dt {
  font-size: var(--step--1);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-top: var(--sp-5);
}

.facts dd {
  font-size: var(--step-1);
  color: var(--text);
  margin-top: var(--sp-1);
}

.facts dd + dt {
  margin-top: var(--sp-5);
}

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

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

.crumbs a:hover,
.crumbs a:focus {
  color: var(--brand);
}

.review-notice {
  background: var(--surface-2);
  border-left: 4px solid var(--brand);
  padding: var(--sp-5);
  font-size: var(--step-0);
  color: var(--text);
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* ---------- Motion (gentle) ---------- */
@media (prefers-reduced-motion: no-preference) {
  a,
  .btn {
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, transform 0.25s ease;
  }

  .btn:hover,
  .btn:focus {
    transform: translateY(-2px);
  }

  .gallery-item__img,
  .hero-img,
  .team-member__photo,
  .service-photo__img {
    transition: transform 0.5s ease;
  }

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

  .service-row,
  .price-item {
    transition: background-color 0.2s ease;
  }

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

  .card {
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
  }

  .card:hover {
    border-color: var(--text-subtle);
  }

  .team-member__avatar {
    transition: background-color 0.2s ease;
  }

  .team-member:hover .team-member__avatar {
    background-color: var(--brand);
    color: var(--on-brand);
  }
}


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