/* ==========================================================================
   Кинезитерапия Монтана — дизайн системата.

   Hand-written, self-contained. No external font requests: validate.mjs fails
   the build on any @import or src:url pointing off-origin, so the display face
   is a system serif stack and the body face a system sans stack.

   Palette: deep plum ink, warm caramel accent, warm ivory paper.
   ========================================================================== */

:root {
  --ink:        #1d2138;   /* deep indigo — the dark ground */
  --espresso:   #262c4a;
  --espresso-2: #333b60;
  --espresso-3: #4a5580;
  --brass:      #5fa992;   /* jade — the accent, 5.7:1 on --ink */
  --brass-dk:   #2f6d5b;   /* the accent for links on light, 5.5:1 on --bone */
  --brass-lt:   #d6e9e1;
  --clay:       #a8503a;   /* urgent only — red-flag strips, cancel actions */
  --clay-lt:    #f6e3dd;
  --bone:       #f7f6f3;
  --bone-2:     #edece8;
  --paper:      #ffffff;
  --line:       #e3e1dc;
  --line-2:     #c6c3bd;
  --body:       #43454f;   /* 8.7:1 on --bone */
  --muted:      #666a78;   /* 4.9:1 on --bone */
  --muted-lt:   #5f6373;   /* 6.0:1 on white, 5.6:1 on --bone, 4.8:1 on --brass-lt */

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --wrap: 1200px;
  --r: 4px;
  --r-lg: 8px;
  --shadow: 0 1px 2px rgba(29, 33, 56, .04), 0 8px 24px -12px rgba(29, 33, 56, .18);
  --shadow-lg: 0 2px 4px rgba(29, 33, 56, .05), 0 24px 48px -20px rgba(29, 33, 56, .28);
}

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

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

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

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

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

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

/* `strong` darkens body copy on the light surfaces that make up most of the
   site, but a hard-coded ink here repaints it INVISIBLE on every dark surface —
   that is exactly how the topbar's "24-hour emergency line" ended up at a
   contrast ratio of 1.00, ink on ink. Dark components set --strong instead of
   each needing its own override, so a new one inherits the right behaviour. */
strong { color: var(--strong, var(--ink)); font-weight: 650; }
hr { border: 0; border-top: 1px solid var(--line); margin: 3rem 0; }

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

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

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

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

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

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

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--sans); font-size: .935rem; font-weight: 600; letter-spacing: .005em;
  padding: .78rem 1.4rem;
  border-radius: var(--r);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s, color .18s, border-color .18s, transform .18s;
  white-space: normal;
}
.btn:active { transform: translateY(1px); }

.btn--primary { --strong: #fff; background: var(--espresso); color: #fff; border-color: var(--espresso); }
.btn--primary:hover { background: var(--espresso-2); border-color: var(--espresso-2); color: #fff; }

.btn--ghost { background: transparent; color: var(--espresso); border-color: var(--line-2); }
.btn--ghost:hover { background: var(--bone-2); color: var(--espresso); border-color: var(--espresso-3); }

.btn--brass { background: var(--brass); color: var(--ink); border-color: var(--brass); }
.btn--brass:hover { background: var(--brass-lt); border-color: var(--brass-lt); color: var(--ink); }

.btn--light { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.34); }
.btn--light:hover { background: rgba(255,255,255,.2); color: #fff; border-color: rgba(255,255,255,.6); }

.btn-row { display: flex; flex-wrap: wrap; gap: .7rem; }

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

/* ---------------------------------------------------------------- topbar */

.topbar {
  --strong: #fff;
  background: var(--ink);
  color: rgba(255,255,255,.72);
  font-size: .795rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 40px; }
.topbar-left { display: flex; gap: 1.6rem; list-style: none; margin: 0; padding: 0; }
.topbar-left li { display: flex; align-items: center; gap: .42rem; margin: 0; }
.topbar-left svg { color: var(--brass); flex: none; }
.topbar-note { display: flex; align-items: center; gap: .42rem; white-space: nowrap; }
.topbar-note svg { color: var(--brass); }
.topbar a { color: #fff; text-decoration: none; font-weight: 600; }
.topbar a:hover { color: var(--brass-lt); }

@media (max-width: 900px) { .topbar-hide-sm { display: none; } }
@media (max-width: 560px) {
  .topbar-left li span { display: none; }
  .topbar .wrap { justify-content: center; }
  .topbar-left { display: none; }

  /* The note is nowrap on desktop so the icon, the promise and the phone
     number stay on one line. On a 390px phone that same string is 416px wide
     and pushes the whole document 13px sideways — a horizontal scroll on every
     page of the site, caused entirely by the header strip. Let it wrap and
     centre instead of trimming the copy to fit: the next edit to this sentence
     would otherwise silently reintroduce the overflow. */
  .topbar-note {
    white-space: normal;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    row-gap: .15rem;
  }
}

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

.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; gap: 1.5rem; min-height: 78px; }

.brand { display: flex; align-items: center; gap: .72rem; text-decoration: none; flex: 0 1 auto; min-width: 0; }
.brand-mark { border-radius: 9px; flex: none; }
.brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.16; }
.brand-name {
  font-family: var(--serif); font-size: 1.16rem; font-weight: 600;
  color: var(--ink); letter-spacing: -.01em;
  /* THE NAME NEVER WRAPS. Making .brand shrinkable (flex: 0 1 auto + min-width:0)
     fixes the burger being pushed off-screen at 320px, but it also lets the flex
     algorithm squeeze the lockup a couple of pixels at DESKTOP width — measured
     230.4px of column for a 232.8px name at 1440px, which broke the brand onto
     two lines. Both name forms are measured to fit their own range, so nowrap is
     safe here and the shrinking still protects the burger. */
  white-space: nowrap;
}
.brand-sub {
  font-size: .705rem; letter-spacing: .085em; text-transform: uppercase;
  color: var(--muted); margin-top: .22rem;
}

.nav { display: flex; align-items: center; gap: .2rem; margin-left: auto; }
.nav > a, .nav-drop > button {
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: var(--sans); font-size: .935rem; font-weight: 550;
  color: var(--body); text-decoration: none;
  padding: .62rem .7rem; border-radius: var(--r);
  background: none; border: 0; cursor: pointer; line-height: 1;
  /* the brand lockup is wide enough here that a two-word label wraps mid-item
     at 1440 without this — the nav must shrink before a label breaks */
  white-space: nowrap;
}
.nav > a:hover, .nav-drop > button:hover { color: var(--espresso); background: var(--bone-2); }
.nav > a[aria-current="page"] { color: var(--espresso); font-weight: 650; }

.nav-drop { position: relative; }
.nav-drop > button svg { transition: transform .2s; }
.nav-drop[data-open="true"] > button { color: var(--espresso); background: var(--bone-2); }
.nav-drop[data-open="true"] > button svg { transform: rotate(180deg); }

.nav-panel {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(-6px);
  width: min(860px, calc(100vw - 3rem));
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 1.6rem 1.6rem 0;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s, transform .18s, visibility .18s;
}
.nav-drop[data-open="true"] .nav-panel {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.nav-panel-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem 2rem; }
.nav-col-h {
  font-size: .715rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brass-dk); margin: 0 0 .7rem; padding-bottom: .55rem;
  border-bottom: 1px solid var(--line);
}
.nav-col a {
  display: block; font-size: .9rem; color: var(--body); text-decoration: none;
  padding: .34rem 0; border-radius: 2px;
}
.nav-col a:hover { color: var(--espresso); }
.nav-col a[aria-current="page"] { color: var(--espresso); font-weight: 650; }
.nav-panel-foot {
  display: flex; flex-wrap: wrap; gap: 1.4rem;
  margin: 1.4rem -1.6rem 0; padding: 1rem 1.6rem;
  background: var(--bone); border-top: 1px solid var(--line);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}

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

/* ИЗМЕРЕН, НЕ ПРЕПИСАН. При 1440px българският хедър иска
   285,9 (лого) + 550,8 (навигация) + 271,8 (бутони) + 48 (падинг) = 1156,5px,
   а навигацията се връщаше при 1121px — лента на преливане от 1121 до 1156.
   Английският иска само 1046,9px и затова 1120 му стигаше: българските
   етикети са системно по-широки при равна дължина (находка на демо 14).
   Прагът е вдигнат на 1220 с 64px запас. */
@media (max-width: 1220px) { .nav { display: none; } .burger { display: inline-flex; } }
@media (max-width: 780px) {
  .header-cta .btn--ghost, .header-cta .btn--primary { display: none; }
  .site-header .wrap { min-height: 66px; }
  .brand-sub { display: none; }
}

/* ---------------------------------------------------------------- drawer */

.drawer { position: fixed; inset: 0; z-index: 100; visibility: hidden; }
.drawer[data-open="true"] { visibility: visible; }
.drawer-veil {
  position: absolute; inset: 0; background: rgba(29, 33, 56,.5);
  opacity: 0; transition: opacity .25s;
}
.drawer[data-open="true"] .drawer-veil { opacity: 1; }
.drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(380px, 88vw);
  background: var(--paper);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .28s cubic-bezier(.4,0,.2,1);
  overflow-y: auto;
}
.drawer[data-open="true"] .drawer-panel { transform: none; }
.drawer-top {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--line); flex: none;
}
.drawer-close {
  width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--line); border-radius: var(--r);
  color: var(--espresso); cursor: pointer;
}
.drawer nav { padding: 1rem 1.25rem; flex: 1; }
.drawer nav a {
  display: block; padding: .58rem 0; text-decoration: none;
  font-size: 1.02rem; font-weight: 600; color: var(--ink);
  border-bottom: 1px solid var(--bone-2);
}
.drawer nav a.sub { font-size: .93rem; font-weight: 500; color: var(--body); padding-left: .1rem; }
.drawer-sub {
  font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brass-dk); margin: 1.25rem 0 .35rem;
}
.drawer-foot { padding: 1.25rem; border-top: 1px solid var(--line); background: var(--bone); flex: none; }
.drawer-foot p { display: flex; align-items: center; gap: .4rem; margin: 0; }
.drawer-foot svg { color: var(--brass-dk); }

/* ------------------------------------------------------------------ hero */

.hero { --strong: #fff; position: relative; background: var(--ink); color: #fff; overflow: hidden; }
.hero-media { position: absolute; inset: 0; }
.hero-media img, .hero-media video {
  width: 100%; height: 100%; object-fit: cover;
}
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(29, 33, 56,.94) 0%, rgba(29, 33, 56,.86) 38%, rgba(29, 33, 56,.42) 72%, rgba(29, 33, 56,.3) 100%),
    linear-gradient(to top, rgba(29, 33, 56,.7), transparent 45%);
}
.hero-inner {
  position: relative; z-index: 2;
  padding: clamp(4rem, 9vw, 7.5rem) 0 clamp(3rem, 6vw, 5rem);
  max-width: 660px;
}
.hero h1 { color: #fff; margin-bottom: .5em; }
.hero .eyebrow { color: var(--brass); }
.hero .lead { color: rgba(255,255,255,.84); margin-bottom: 2rem; }
.hero .btn-row { margin-bottom: 2.6rem; }

/* Default to an OPAQUE dark cell so the block is legible wherever it is used.
   The hero overrides to a translucent cell so the video shows through — the
   translucency only composites to something readable over a dark surface, and
   a stat block dropped onto a light section inherited it and went to 1.14:1
   before this was split. Any new usage now gets the safe version. */
.hero-stats {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; background: var(--line-2);
  border-top: 1px solid var(--line-2);
}
.hero-stats div { --strong: #fff; background: var(--ink); padding: 1.4rem 1.35rem; }
.hero .hero-stats { background: rgba(255,255,255,.14); border-top-color: rgba(255,255,255,.14); }
.hero .hero-stats div { background: rgba(29, 33, 56,.55); }
.hero-stats dt {
  font-family: var(--serif); font-size: 1.75rem; color: var(--brass);
  line-height: 1; margin-bottom: .38rem;
}
.hero-stats dd {
  margin: 0; font-size: .82rem; color: rgba(255,255,255,.72); line-height: 1.42;
}
@media (max-width: 800px) { .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

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

.pagehead {
  --strong: #fff; position: relative; background: var(--ink); color: #fff; overflow: hidden;
  padding: clamp(2.6rem, 5.5vw, 4.4rem) 0 clamp(2.2rem, 4.5vw, 3.4rem);
}
.pagehead-media { position: absolute; inset: 0; }
.pagehead-media img { width: 100%; height: 100%; object-fit: cover; }
.pagehead-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(95deg, rgba(29, 33, 56,.95) 0%, rgba(29, 33, 56,.88) 42%, rgba(29, 33, 56,.55) 100%);
}
.pagehead .wrap { position: relative; z-index: 2; }
.pagehead h1 { color: #fff; max-width: 20ch; }
.pagehead .lead { color: rgba(255,255,255,.82); max-width: 62ch; }
.pagehead .eyebrow { color: var(--brass); }
.pagehead--plain { background: var(--espresso); }

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

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

/* The same inline icon-and-label list, on the hero's dark ground. The hero
   markup uses <ul><li>icon + <span>label</span></li></ul>, so the list marker
   has to be cleared explicitly — a bare <ul> inside .hero-inner otherwise
   inherits the prose bullet and stacks the icon above the text. */
.hero-meta {
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; gap: .6rem 1.9rem;
  list-style: none; margin: 2rem 0 0; padding: 0;
}
.hero-meta li {
  display: flex; align-items: center; gap: .5rem; margin: 0;
  font-size: .9rem; color: rgba(255,255,255,.86);
}
.hero-meta svg { color: var(--brass); flex: none; }

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

.section { padding: clamp(3.2rem, 6.5vw, 5.5rem) 0; }
.section--alt { background: var(--bone); }
.section--tight { padding: clamp(2.4rem, 4.5vw, 3.6rem) 0; }
.section--ink { --strong: #fff; background: var(--ink); color: rgba(255,255,255,.78); }
.section--ink h2, .section--ink h3 { color: #fff; }
.section--ink .eyebrow { color: var(--brass); }
.section--ink .lead { color: rgba(255,255,255,.8); }

.section-head { max-width: 68ch; margin-bottom: 2.6rem; }
.section-head.center { margin-inline: auto; }
.section-head p:last-child { margin-bottom: 0; }

.grid { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); } }

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

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.7rem;
}
.section--alt .card { background: var(--paper); }

.svc-card {
  display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; text-decoration: none; color: inherit;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.svc-card:hover { border-color: var(--line-2); box-shadow: var(--shadow); transform: translateY(-2px); color: inherit; }
.svc-card img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.svc-card-body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.svc-card h3 { margin-bottom: .45rem; font-size: 1.14rem; }
.svc-card p { font-size: .92rem; color: var(--muted); margin-bottom: 1.1rem; }
.svc-card .link-more { margin-top: auto; }
.svc-card-tag {
  font-size: .68rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--brass-dk); margin-bottom: .55rem;
}

.promise {
  display: flex; flex-direction: column; gap: .85rem;
}
.promise-ic {
  width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--bone-2); color: var(--espresso); flex: none;
  border: 1px solid var(--line);
}
.section--ink .promise-ic { background: rgba(224,168,98,.14); border-color: rgba(224,168,98,.3); color: var(--brass); }
.promise h3 { font-size: 1.06rem; margin-bottom: .3rem; }
.promise p { font-size: .92rem; color: var(--muted); margin: 0; }
.section--ink .promise p { color: rgba(255,255,255,.68); }

.ind-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--paper);
}
.ind-card img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.ind-card-body { padding: 1.3rem 1.4rem 1.5rem; }
.ind-card h3 { font-size: 1.08rem; margin-bottom: .4rem; }
.ind-card p { font-size: .9rem; color: var(--muted); margin: 0; }

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

.team-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
}
.team-card img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.team-card-body { padding: 1.35rem 1.45rem 1.6rem; }
.team-card h3 { font-size: 1.1rem; margin-bottom: .18rem; }
.team-role { font-size: .875rem; color: var(--espresso-2); font-weight: 600; margin: 0 0 .1rem; }
.team-creds {
  font-size: .715rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--brass-dk); font-weight: 700; margin: 0 0 .9rem;
}
.team-card p.bio { font-size: .91rem; color: var(--muted); margin-bottom: 1rem; }
.team-focus { list-style: none; margin: 0 0 .9rem; padding: 0; }
.team-focus li {
  display: flex; align-items: flex-start; gap: .45rem;
  font-size: .855rem; color: var(--body); margin-bottom: .3rem;
}
.team-focus svg { color: var(--brass-dk); flex: none; margin-top: .28em; }
.team-langs {
  font-size: .8rem; color: var(--muted); padding-top: .85rem; border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: .42rem; margin: 0;
}
.team-langs svg { color: var(--brass-dk); flex: none; }

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

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.split--rev .split-media { order: 2; }
.split-media img { width: 100%; height: auto; border-radius: var(--r-lg); }
.split-copy h2 { margin-bottom: .6em; }
@media (max-width: 860px) {
  .split { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .split--rev .split-media { order: 0; }
}

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

.checklist { list-style: none; margin: 0 0 1.2em; padding: 0; }
.checklist li {
  display: flex; align-items: flex-start; gap: .6rem;
  margin-bottom: .6rem; font-size: .96rem;
}
.checklist svg { color: var(--brass-dk); flex: none; margin-top: .3em; }
.section--ink .checklist svg { color: var(--brass); }

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

.numbered { list-style: none; counter-reset: step; margin: 0; padding: 0; }
.numbered > li {
  counter-increment: step;
  position: relative; padding-left: 3.4rem; margin-bottom: 1.7rem;
}
.numbered > li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: -.1rem;
  font-family: var(--serif); font-size: 1.35rem; color: var(--brass-dk);
  border-right: 1px solid var(--line); padding-right: .85rem; width: 2.55rem; text-align: right;
}
.numbered h3 { font-size: 1.08rem; margin-bottom: .3rem; }
.numbered p { font-size: .93rem; color: var(--muted); margin: 0; }

/* ------------------------------------------------------------------ menu */

.menu { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); overflow: hidden; }
.menu-head { padding: 1.6rem 1.8rem; background: var(--bone); border-bottom: 1px solid var(--line); }
.menu-head h2 { font-size: 1.4rem; margin-bottom: .3rem; }
.menu-head p { font-size: .875rem; color: var(--muted); margin: 0; }
.menu-list { list-style: none; margin: 0; padding: 0 1.8rem; }
.menu-list li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem;
  padding: 1.1rem 0; border-bottom: 1px solid var(--bone-2); margin: 0;
}
.menu-list li:last-child { border-bottom: 0; }
.menu-item h3 { font-family: var(--sans); font-size: .99rem; font-weight: 650; margin-bottom: .18rem; }
.menu-item p { font-size: .875rem; color: var(--muted); margin: 0; }
.menu-price {
  font-family: var(--serif); font-size: 1.06rem; color: var(--espresso); font-weight: 600;
  white-space: nowrap; flex: none;
}
@media (max-width: 560px) {
  .menu-head, .menu-list { padding-inline: 1.25rem; }
  .menu-list li { flex-direction: column; gap: .3rem; }
}

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

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

/* --------------------------------------------------------------- voices */

.voice {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 1.9rem 2rem;
  display: flex; flex-direction: column;
}
.voice-ic { color: var(--brass); margin-bottom: .85rem; }
/* the takeaway line, then the quote itself set off by a brass rule — a heading
   here competed with the quote for the same job */
.voice-what {
  font-family: var(--serif); font-size: 1.17rem; font-weight: 600; line-height: 1.3;
  color: var(--ink); margin: 0 0 1rem;
}
.voice blockquote { margin: 0 0 1.4rem; padding-left: 1.15rem; border-left: 2px solid var(--brass-lt); }
.voice blockquote p { font-size: .965rem; color: var(--muted); margin: 0; }
.voice figcaption { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--line); }
.voice cite {
  font-style: normal; font-size: .81rem; font-weight: 650;
  letter-spacing: .045em; color: var(--espresso-2);
}
@media (max-width: 560px) { .voice { padding: 1.5rem 1.4rem; } }

/* -------------------------------------------------------------- calendar */

.cal { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.cal li {
  display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 1.5rem;
  padding: 1.25rem 0; border-bottom: 1px solid var(--line); margin: 0;
}
.cal .cal-when {
  font-family: var(--serif); font-size: 1.1rem; color: var(--espresso); font-weight: 600;
}
.cal p { font-size: .95rem; color: var(--muted); margin: 0; }
@media (max-width: 700px) { .cal li { grid-template-columns: minmax(0, 1fr); gap: .3rem; } }

/* --------------------------------------------------------------- gallery */

.gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.gallery img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--r); }
.gallery figure { margin: 0; }
.gallery figcaption { font-size: .8rem; color: var(--muted); margin-top: .5rem; }
@media (max-width: 900px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------- areas */

.chips { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.chips li {
  margin: 0; font-size: .85rem; color: var(--body);
  padding: .38rem .8rem; border: 1px solid var(--line-2); border-radius: 999px; background: var(--paper);
}
.section--ink .chips li { border-color: rgba(255,255,255,.22); color: rgba(255,255,255,.82); background: rgba(255,255,255,.05); }

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

.cta-band { --strong: #fff; background: var(--espresso); color: rgba(255,255,255,.82); padding: clamp(2.8rem, 5vw, 4rem) 0; }
.cta-inner {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: center;
}
.cta-band h2 { color: #fff; margin-bottom: .5em; }
.cta-band .eyebrow { color: var(--brass); }
.cta-band .lead { color: rgba(255,255,255,.8); max-width: 62ch; margin: 0; }
.cta-band .btn--primary { background: var(--brass); color: var(--ink); border-color: var(--brass); }
.cta-band .btn--primary:hover { background: var(--brass-lt); border-color: var(--brass-lt); }
.hero .btn--ghost, .section--ink .btn--ghost, .pagehead .btn--ghost {
  color: #fff; border-color: rgba(255,255,255,.36);
}
.hero .btn--ghost:hover, .section--ink .btn--ghost:hover, .pagehead .btn--ghost:hover {
  background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.6);
}
.cta-band .btn--ghost { color: #fff; border-color: rgba(255,255,255,.36); }
.cta-band .btn--ghost:hover { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.6); }
@media (max-width: 860px) { .cta-inner { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------- advice note */

.advice-note {
  display: flex; align-items: flex-start; gap: .65rem;
  background: var(--bone); border: 1px solid var(--line); border-left: 3px solid var(--brass);
  border-radius: var(--r); padding: 1rem 1.2rem;
  font-size: .855rem; color: var(--muted); line-height: 1.58;
  margin: 2.4rem 0 0;
}
.advice-note svg { color: var(--brass-dk); flex: none; margin-top: .2em; }
/* The handling and safety note. Same shape, warmer ground — it is a promise
   rather than a caveat, and it should not read like small print. */
.advice-note--warm { background: var(--brass-lt); border-color: #e8cfae; border-left-color: var(--brass-dk); color: #5a4632; }
.advice-note--warm strong { color: var(--ink); }
.advice-note + .advice-note { margin-top: 1rem; }

/* ----------------------------------------------------------- contact */

.contact-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }

.form { display: grid; gap: 1.1rem; }
.form .row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.1rem; }
@media (max-width: 560px) { .form .row { grid-template-columns: minmax(0, 1fr); } }
.form label { display: block; font-size: .85rem; font-weight: 650; color: var(--ink); margin-bottom: .38rem; }
.form input, .form select, .form textarea {
  width: 100%; font-family: var(--sans); font-size: .96rem; color: var(--body);
  padding: .72rem .85rem;
  background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--r);
}
.form textarea { min-height: 140px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none; border-color: var(--espresso-3); box-shadow: 0 0 0 3px rgba(77,56,86,.12);
}
.form .check { display: flex; align-items: flex-start; gap: .6rem; font-size: .87rem; color: var(--muted); }
.form .check input { width: auto; margin-top: .25em; flex: none; }
.form .hint { font-size: .81rem; color: var(--muted); margin: 0; }

.info-card {
  background: var(--bone); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.7rem;
}
.info-card + .info-card { margin-top: 1.25rem; }
.info-card h3 { font-size: 1.1rem; margin-bottom: .9rem; }
.info-list { list-style: none; margin: 0; padding: 0; }
.info-list li {
  display: flex; align-items: flex-start; gap: .65rem; margin-bottom: .8rem; font-size: .93rem;
}
.info-list li:last-child { margin-bottom: 0; }
.info-list svg { color: var(--brass-dk); flex: none; margin-top: .22em; }
.info-list a { color: var(--espresso-2); }

.hours-table { width: 100%; border-collapse: collapse; font-size: .91rem; }
.hours-table th, .hours-table td { text-align: left; padding: .45rem 0; border-bottom: 1px solid var(--line); }
.hours-table th { font-weight: 600; color: var(--ink); }
.hours-table td { color: var(--muted); text-align: right; }
.hours-table tr:last-child th, .hours-table tr:last-child td { border-bottom: 0; }

/* The two-column opening-hours table right-aligns its single value column, which
   is right for "Monday .... 5:00 am - 10:00 pm" and wrong for the five-column
   class timetable, where it pushed every class name up against the next column.
   A multi-column table reads as a grid, so everything goes left and only the
   trailing numeric column stays right. */
.timetable td, .timetable th { text-align: left; padding-right: 1.2rem; vertical-align: top; }
.timetable td:last-child, .timetable th:last-child { text-align: right; padding-right: 0; }
.timetable thead th {
  font-size: .74rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); font-weight: 700; border-bottom-color: var(--line-2);
}
.timetable tbody th { white-space: nowrap; font-variant-numeric: tabular-nums; }
.timetable tbody td { color: var(--body); }
.timetable tbody td:nth-child(3), .timetable tbody td:nth-child(4) { color: var(--muted); }
@media (max-width: 640px) {
  .timetable { font-size: .84rem; }
  .timetable td, .timetable th { padding-right: .7rem; }
  .timetable td:nth-child(4), .timetable th:nth-child(4) { display: none; }
}

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

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

/* ---------------------------------------------------------------- error */

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

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

.site-footer { --strong: #fff; background: var(--ink); color: rgba(255,255,255,.68); padding: clamp(3rem, 6vw, 4.5rem) 0 2rem; font-size: .92rem; }
.site-footer .brand-name { color: #fff; }
.site-footer .brand-sub { color: rgba(255,255,255,.5); }
.footer-grid {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 2.5rem;
  padding-bottom: 2.6rem; border-bottom: 1px solid rgba(255,255,255,.12);
}
@media (max-width: 980px) { .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; } }
@media (max-width: 600px) { .footer-grid { grid-template-columns: minmax(0, 1fr); } }

.footer-brand .brand { margin-bottom: 1.1rem; }
.footer-brand p { font-size: .89rem; color: rgba(255,255,255,.6); max-width: 42ch; }
.footer-langs { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 1.1rem 0 0; padding: 0; }
.footer-langs li {
  margin: 0; font-size: .74rem; letter-spacing: .04em;
  padding: .22rem .6rem; border: 1px solid rgba(255,255,255,.16); border-radius: 999px;
  color: rgba(255,255,255,.62);
}
.site-footer h4 {
  color: #fff; font-family: var(--sans); font-size: .74rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; margin-bottom: 1rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .48rem; font-size: .875rem; }
.site-footer a { color: rgba(255,255,255,.68); text-decoration: none; }
.site-footer a:hover { color: var(--brass); }
.footer-contact li { display: flex; align-items: flex-start; gap: .55rem; }
.footer-contact svg { color: var(--brass); flex: none; margin-top: .2em; }

.footer-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.6rem 0 1.2rem; font-size: .8rem; color: rgba(255,255,255,.5);
}
.footer-bar ul { display: flex; flex-wrap: wrap; gap: 1.1rem; }
.footer-bar li { margin: 0; font-size: .8rem; }

.footer-disclaimer {
  font-size: .785rem; line-height: 1.6; color: rgba(255,255,255,.44);
  border-top: 1px solid rgba(255,255,255,.1); padding-top: 1.2rem; margin: 0; max-width: 100ch;
}
.footer-disclaimer strong { color: rgba(255,255,255,.72); }

/* ----------------------------------------------- maintenance plan cards */

.plans {
  display: grid; gap: 1.5rem; align-items: start;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 980px) { .plans { grid-template-columns: minmax(0, 1fr); max-width: 34rem; margin-inline: auto; } }

.plan {
  position: relative; display: flex; flex-direction: column; height: 100%;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 2rem 1.7rem 1.8rem; box-shadow: var(--shadow);
}
.plan--featured {
  /* the flag floats above the top edge, so no extra padding is needed here —
     matching padding keeps the three price baselines on one line */
  border-color: var(--espresso); box-shadow: var(--shadow-lg);
}
.plan-flag {
  position: absolute; top: -.75rem; left: 1.7rem;
  background: var(--brass); color: var(--ink);
  font-family: var(--sans); font-size: .7rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  padding: .3rem .7rem; border-radius: 2px; margin: 0;
}
.plan h3 { font-size: 1.42rem; margin-bottom: .35rem; }

.plan-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; margin: 0 0 .9rem; }
.plan-price strong {
  font-family: var(--serif); font-size: 2.5rem; font-weight: 600;
  color: var(--ink); letter-spacing: -.02em; line-height: 1;
}
.plan-price span { font-size: .84rem; color: var(--muted); }

.plan-blurb { font-size: .93rem; color: var(--body); margin: 0 0 1.3rem; }

.plan-list { list-style: none; margin: 0 0 1.3rem; padding: 0; border-top: 1px solid var(--line); }
.plan-list li {
  display: flex; gap: .6rem; align-items: flex-start; margin: 0;
  padding: .62rem 0; border-bottom: 1px solid var(--line); font-size: .89rem; line-height: 1.5;
}
.plan-list svg { color: var(--brass-dk); flex: none; margin-top: .18em; }

.plan-best { font-size: .82rem; color: var(--muted); margin: 0 0 1.3rem; }
.plan-best strong { color: var(--body); }
.plan .btn { margin-top: auto; width: 100%; justify-content: center; }

/* ------------------------------------------------------- emergency strip */

.emerg {
  display: flex; gap: .8rem; align-items: flex-start;
  background: #fbf0e2; border: 1px solid var(--brass-lt); border-left: 3px solid var(--brass);
  border-radius: var(--r); padding: .95rem 1.15rem; margin: 0 0 2rem;
}
.emerg svg { color: var(--brass-dk); flex: none; margin-top: .18em; }
.emerg p { margin: 0; font-size: .93rem; line-height: 1.55; }
.emerg strong { color: var(--ink); }
.emerg a { font-weight: 600; white-space: nowrap; }

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

@media print {
  .topbar, .site-header, .drawer, .cta-band, .site-footer, .hero-media { display: none !important; }
  body { font-size: 11pt; color: #000; }
  a { text-decoration: none; color: #000; }
}

/* ==========================================================================
   THE BOOKING APPLICATION
   /appointments.html — provider picker, month calendar, slot grid, form.
   Everything here is progressive: the page ships a real noscript fallback
   pointing at the telephone number, and the calendar only appears once the
   availability API has answered.
   ========================================================================== */

.booking { margin: 3rem 0 0; }

.booking-steps {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden; margin-bottom: 2.2rem;
}
.booking-step {
  background: var(--paper); padding: .95rem 1.1rem;
  display: flex; gap: .7rem; align-items: center;
}
.booking-step[data-on="true"] { background: var(--ink); }
.booking-step[data-on="true"] .booking-step-n { background: var(--brass); color: var(--ink); }
.booking-step[data-on="true"] .booking-step-t { color: #fff; }
.booking-step-n {
  flex: 0 0 auto; width: 1.55rem; height: 1.55rem; border-radius: 50%;
  background: var(--bone-2); color: var(--muted);
  font: 700 .78rem/1.55rem var(--sans); text-align: center;
}
.booking-step-t { font: 600 .86rem/1.3 var(--sans); color: var(--body); letter-spacing: -.01em; }
@media (max-width: 780px) {
  .booking-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.booking-panel {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 1.9rem; box-shadow: var(--shadow);
}
.booking-panel + .booking-panel { margin-top: 1.6rem; }
.booking-panel > h2 {
  font: 600 1.32rem/1.25 var(--serif); color: var(--ink);
  margin: 0 0 .4rem; letter-spacing: -.01em;
}
.booking-panel > p.hint { color: var(--muted); font-size: .95rem; margin: 0 0 1.4rem; line-height: 1.65; }

/* ------------------------------------------------------------- providers */

.docs { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: .9rem; }
.doc {
  display: flex; gap: .85rem; text-align: left; align-items: flex-start;
  background: var(--paper); border: 1.5px solid var(--line);
  border-radius: var(--r-lg); padding: .95rem; cursor: pointer;
  font: inherit; color: inherit; transition: border-color .14s, box-shadow .14s, background .14s;
}
.doc:hover { border-color: var(--line-2); }
.doc[aria-pressed="true"] {
  border-color: var(--brass-dk); background: var(--brass-lt);
  box-shadow: 0 0 0 1px var(--brass-dk);
}
.doc img {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%;
  object-fit: cover; background: var(--bone-2);
}
.doc-b { min-width: 0; }
.doc-n { display: block; font: 600 .96rem/1.25 var(--sans); color: var(--ink); }
.doc-s { display: block; font-size: .8rem; color: var(--muted); margin-top: .15rem; line-height: 1.45; }
.doc-r { display: block; font-size: .74rem; color: var(--muted-lt); margin-top: .3rem;
         text-transform: uppercase; letter-spacing: .08em; }
/* The pressed card swaps to a jade ground, under which --muted falls to
   4.26:1 and --muted-lt to 3.98:1. Live audit, /appointments.html. */
.doc[aria-pressed="true"] .doc-s,
.doc[aria-pressed="true"] .doc-r { color: #4d5262; }
.doc-mark {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%;
  background: var(--ink); color: var(--brass); display: grid; place-items: center;
}

/* -------------------------------------------------------------- calendar */

.cal-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 1rem;
}
.cal-title { font: 600 1.02rem/1 var(--sans); color: var(--ink); }
.cal-nav { display: flex; gap: .4rem; }
.cal-nav button {
  width: 2.1rem; height: 2.1rem; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--paper); color: var(--body);
  display: grid; place-items: center; cursor: pointer;
}
.cal-nav button:hover:not(:disabled) { border-color: var(--line-2); background: var(--bone); }
.cal-nav button:disabled { opacity: .35; cursor: not-allowed; }
.cal-nav button.prev svg { transform: rotate(90deg); }
.cal-nav button.next svg { transform: rotate(-90deg); }

.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .35rem; }
.cal-dow {
  text-align: center; font: 700 .68rem/2 var(--sans); color: var(--muted-lt);
  text-transform: uppercase; letter-spacing: .09em;
}
.cal-day {
  /* Square, but capped: at 1440px a seven-column grid inside the panel makes a
     1:1 cell about 120px tall, which turns a month into a wall. The cap keeps
     the calendar compact on desktop and lets it stay square on a phone, where
     the column is narrow enough that the ratio wins. */
  aspect-ratio: 1 / 1; max-height: 4.4rem;
  border-radius: var(--r); border: 1px solid transparent;
  background: var(--bone); color: var(--muted-lt); font: 500 .92rem/1 var(--sans);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .18rem; cursor: default; padding: 0;
}
.cal-day[data-free="1"] {
  background: var(--paper); border-color: var(--line-2); color: var(--ink);
  cursor: pointer; font-weight: 600;
}
.cal-day[data-free="1"]:hover { border-color: var(--brass-dk); background: var(--brass-lt); }
.cal-day[aria-pressed="true"] {
  background: var(--ink); border-color: var(--ink); color: #fff;
}
.cal-day[aria-pressed="true"] .cal-dot { background: var(--brass); }
.cal-day.empty { background: transparent; }
.cal-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--brass-dk); }
.cal-day[data-free="0"] .cal-dot { visibility: hidden; }

.cal-key {
  display: flex; flex-wrap: wrap; gap: 1.1rem; margin-top: 1rem;
  font-size: .8rem; color: var(--muted);
}
.cal-key span { display: inline-flex; align-items: center; gap: .4rem; }
.cal-key i { width: .8rem; height: .8rem; border-radius: 3px; display: inline-block; }
.cal-key .k-free { background: var(--paper); border: 1px solid var(--line-2); }
.cal-key .k-none { background: var(--bone); }
.cal-key .k-sel { background: var(--ink); }

/* ----------------------------------------------------------------- slots */

.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(122px, 1fr)); gap: .55rem; }
.slot {
  border: 1.5px solid var(--line); background: var(--paper); border-radius: var(--r);
  padding: .72rem .5rem; cursor: pointer; text-align: center;
  font: 600 .95rem/1.2 var(--sans); color: var(--ink); transition: border-color .14s, background .14s;
}
.slot small { display: block; font: 500 .72rem/1.4 var(--sans); color: var(--muted); margin-top: .18rem; }
.slot:hover { border-color: var(--brass-dk); background: var(--brass-lt); }
.slot[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.slot[aria-pressed="true"] small { color: var(--brass); }

.slots-empty {
  border: 1px dashed var(--line-2); border-radius: var(--r-lg);
  padding: 1.6rem; text-align: center; color: var(--muted); font-size: .95rem;
}

/* ------------------------------------------------------------------ form */

.bk-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.1rem; }
@media (max-width: 700px) { .bk-grid { grid-template-columns: minmax(0, 1fr); } }
.bk-field { display: flex; flex-direction: column; gap: .38rem; }
.bk-field.full { grid-column: 1 / -1; }
.bk-field label { font: 600 .84rem/1.3 var(--sans); color: var(--ink); }
.bk-field label .req { color: var(--clay); }
.bk-field input, .bk-field select, .bk-field textarea {
  font: 400 .97rem/1.45 var(--sans); color: var(--body);
  border: 1.5px solid var(--line); border-radius: var(--r);
  padding: .68rem .8rem; background: var(--paper); width: 100%;
}
.bk-field textarea { min-height: 6.5rem; resize: vertical; }
.bk-field input:focus, .bk-field select:focus, .bk-field textarea:focus {
  outline: none; border-color: var(--brass-dk); box-shadow: 0 0 0 3px var(--brass-lt);
}
.bk-field[data-bad="1"] input, .bk-field[data-bad="1"] select, .bk-field[data-bad="1"] textarea {
  border-color: var(--clay);
}
.bk-err { font-size: .8rem; color: var(--clay); }
.bk-check { display: flex; gap: .6rem; align-items: flex-start; font-size: .9rem; line-height: 1.6; color: var(--body); }
.bk-check input { margin-top: .25rem; width: 1rem; height: 1rem; flex: 0 0 auto; accent-color: var(--brass-dk); }
.bk-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.bk-summary {
  background: var(--bone); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 1.1rem 1.3rem; margin-bottom: 1.5rem;
}
.bk-summary dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .45rem 1.2rem; margin: 0; }
.bk-summary dt {
  font: 700 .7rem/1.6 var(--sans); color: var(--muted-lt);
  text-transform: uppercase; letter-spacing: .09em;
}
.bk-summary dd { margin: 0; font: 600 .96rem/1.6 var(--sans); color: var(--ink); }

.bk-note { font-size: .86rem; color: var(--muted); line-height: 1.7; margin: 1.2rem 0 0; }
.bk-actions { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin-top: 1.6rem; }

/* ------------------------------------------------------------ done / err */

.bk-done { text-align: center; padding: 1rem 0 .4rem; }
.bk-done .tick {
  width: 3.4rem; height: 3.4rem; border-radius: 50%; margin: 0 auto 1.2rem;
  background: var(--brass-lt); color: var(--brass-dk); display: grid; place-items: center;
}
.bk-done h2 { font: 600 1.5rem/1.25 var(--serif); color: var(--ink); margin: 0 0 .6rem; }
.bk-done p { color: var(--muted); line-height: 1.7; max-width: 46ch; margin: 0 auto 1rem; }
.bk-ref {
  display: inline-block; font: 700 .82rem/1 var(--sans); letter-spacing: .1em;
  background: var(--bone-2); color: var(--ink); padding: .55rem .9rem; border-radius: var(--r);
}
.bk-alert {
  border-left: 3px solid var(--clay); background: var(--clay-lt);
  padding: .9rem 1.1rem; border-radius: 0 var(--r) var(--r) 0;
  font-size: .92rem; line-height: 1.65; color: #6d2f1f; margin-bottom: 1.3rem;
}
.bk-spin { text-align: center; padding: 2.4rem 0; color: var(--muted); font-size: .93rem; }
.bk-spin::before {
  content: ""; display: block; width: 1.6rem; height: 1.6rem; margin: 0 auto .9rem;
  border: 2px solid var(--line-2); border-top-color: var(--brass-dk);
  border-radius: 50%; animation: bkspin .7s linear infinite;
}
@keyframes bkspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .bk-spin::before { animation: none; } }

.is-hidden { display: none !important; }

/* ------------------------------------------- confirm.php landing page --- */

.result-card {
  max-width: 640px; margin: 0 auto; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 2.6rem 2.2rem; box-shadow: var(--shadow); text-align: center;
}
.result-card .tick, .result-card .cross {
  width: 3.6rem; height: 3.6rem; border-radius: 50%; margin: 0 auto 1.4rem;
  display: grid; place-items: center;
}
.result-card .tick { background: var(--brass-lt); color: var(--brass-dk); }
.result-card .cross { background: var(--clay-lt); color: var(--clay); }
.result-card h1 { font: 600 1.65rem/1.25 var(--serif); color: var(--ink); margin: 0 0 .7rem; }
.result-card > p { color: var(--muted); line-height: 1.75; margin: 0 auto 1.6rem; max-width: 48ch; }
.result-card .bk-summary { text-align: left; margin: 1.8rem 0 0; }

/* THE PARTNER TO minmax(0, 1fr) — demo 13 found that minmax on its own just
   moves the overflow from the grid to the cell. `overflow-wrap: break-word`
   does NOT work here: it never reduces min-content width. `anywhere` does. */
.grid-2 > *, .grid-3 > *, .grid-4 > *, .split > *, .footer-grid > *,
.hero-stats > *, .gallery > *, .cta-inner > *, .contact-grid > *,
.form .row > *, .booking-steps > *, .cal li > *, .nav-panel-cols > *,
.docs > *, .plans > *, .slots > * {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* THE BRAND-NAME SWAP — measured, not guessed.
   Available width for .brand-name is (viewport - 160.28px) up to 780px, where
   the header CTA buttons hide; above 780 it is (viewport - 470.75px), tightest
   at 781px = 310.25px.
   „Кинезитерапия Монтана" measures 232.8 / 241.5 / 247.6px in Palatino /
   Noto Serif / Georgia, so it needs a 408px viewport and OVERFLOWS at 360, 375
   and 390. The short „Кинезитерапия" is 144.7 / 150.7 / 155.0px and fits even
   at 320px (159.72px available, 4.7px slack).
   The swap is set at 480px, comfortably clear of the 408px true threshold. */
.brand-name-short { display: none; }
@media (max-width: 480px) {
  .brand-name-full  { display: none; }
  .brand-name-short { display: inline; }
}