/* Clinic site kit. Palette and fonts are variables: a client site changes them in one place.
   Fonts (self-hosted, SIL OFL 1.1, see fonts/OFL-*.txt): Geologica for headings, Golos Text for text.
   Design plan: cool porcelain ground, graphite ink, ONE action colour (gum), and ONE dark place: the radiograph panel around the tooth chart. */
@font-face { font-family: "Geologica"; src: url("/agency/fonts/geologica-cyrillic.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Geologica"; src: url("/agency/fonts/geologica-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; 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: "Geologica"; src: url("/agency/fonts/geologica-latin-ext.woff2") format("woff2"); font-weight: 100 900; font-display: swap; 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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Golos Text"; src: url("/agency/fonts/golos-cyrillic.woff2") format("woff2"); font-weight: 400 900; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Golos Text"; src: url("/agency/fonts/golos-latin.woff2") format("woff2"); font-weight: 400 900; font-display: swap; 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: "Golos Text"; src: url("/agency/fonts/golos-latin-ext.woff2") format("woff2"); font-weight: 400 900; font-display: swap; 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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  color-scheme: light;
  --porcelain: #F2F6F8;
  --enamel: #FFFFFF;
  --graphite: #12222D;
  --slate: #4A5D69;
  --line: #D3DEE5;
  --line-strong: #6E808C;
  --gum: #C93A57;
  --gum-dark: #A82C46;
  --gum-soft: #FBE7EC;
  --gum-light: #FF8FA3;
  --xray-bg: #0A1A24;
  --xray-tooth: #A8E0EE;
  --xray-dim: #7FA9B8;
  --xray-text: #DCEFF5;
  --ok: #16794C;
  --focus: #12222D;
  --font-head: "Geologica", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 92px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body.clinic { margin: 0; background: var(--porcelain); color: var(--graphite); font: 400 1.0625rem/1.6 var(--font-body); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--font-head); text-wrap: balance; overflow-wrap: break-word; }
p, li { text-wrap: pretty; }
.wrap { max-width: 1200px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 32px); }
.num { font-variant-numeric: tabular-nums; }
h1 { margin: 0 0 20px; font-size: clamp(2.1rem, 1rem + 2.4vw, 3.2rem); font-weight: 650; line-height: 1.05; letter-spacing: -0.03em; overflow-wrap: normal; }
h1 .sub { display: block; margin-top: 14px; font: 500 clamp(1.15rem, 1rem + 0.6vw, 1.45rem)/1.35 var(--font-body); letter-spacing: -0.005em; color: var(--slate); }
h2 { margin: 0 0 16px; font-size: clamp(1.65rem, 1.1rem + 2vw, 2.6rem); font-weight: 650; line-height: 1.1; letter-spacing: -0.022em; }
h3 { margin: 0 0 6px; font-size: 1.25rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
.lead { max-width: 60ch; margin: 0 0 24px; font-size: 1.2rem; line-height: 1.55; color: var(--slate); }
.muted { color: var(--slate); }
.note { margin: 24px 0 0; font-size: 0.92rem; color: var(--slate); max-width: 70ch; }
section { padding-block: clamp(56px, 7vw, 96px); }
.band-white { background: var(--enamel); }

/* controls */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border: 2px solid var(--gum); border-radius: 12px; background: var(--gum); color: #fff; font: 600 1rem var(--font-body); text-decoration: none; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease; }
.btn:hover { background: var(--gum-dark); border-color: var(--gum-dark); }
.btn:active { transform: scale(0.97); }
.btn-ghost { background: transparent; color: var(--graphite); border-color: var(--graphite); }
.btn-ghost:hover { background: var(--graphite); border-color: var(--graphite); color: #fff; }
.btn-sm { min-height: 44px; padding: 0 18px; }
.btn:disabled { opacity: 0.6; cursor: progress; }
.link { display: inline-flex; align-items: center; min-height: 44px; color: var(--gum-dark); font-weight: 600; text-underline-offset: 3px; }
.link:hover { color: var(--gum); }
.link { min-width: 44px; }

/* top strips and header */
.demo-strip { padding: 10px 16px; background: var(--graphite); color: #DCEBF2; font-size: 0.92rem; text-align: center; }
.demo-strip p { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 18px; max-width: 1200px; margin: 0 auto; }
.demo-strip a { color: #fff; text-underline-offset: 3px; }
.strip-cta { font-weight: 600; }
.statusbar { margin: 0; padding: 8px 16px; border-bottom: 1px solid var(--line); background: var(--porcelain); color: var(--slate); font-size: 0.92rem; text-align: center; }
.statusbar .dot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--ok); }
.statusbar.closed .dot { background: var(--line-strong); }
.site-head { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--line); background: var(--enamel); }
.head-row { display: flex; align-items: center; gap: 20px; min-height: 68px; }
.logo { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; color: var(--graphite); font: 700 1.3rem/1 var(--font-head); letter-spacing: -0.02em; text-decoration: none; }
.logo small { display: block; margin-bottom: 3px; color: var(--slate); font: 500 0.7rem/1 var(--font-body); letter-spacing: 0.02em; }
.logo svg { color: var(--gum); flex: none; }
.main-nav { display: flex; gap: 22px; }
.main-nav a, .head-phone { display: inline-flex; align-items: center; min-height: 44px; }
.logo { min-height: 44px; }
.main-nav a, .menu nav a { color: var(--graphite); font-weight: 500; text-decoration: none; }
.main-nav a:hover, .menu nav a:hover { color: var(--gum-dark); text-decoration: underline; text-underline-offset: 4px; }
.head-phone { font-weight: 600; text-decoration: none; white-space: nowrap; }
.menu { position: relative; display: none; }
.menu summary { display: grid; place-items: center; width: 44px; height: 44px; list-style: none; cursor: pointer; border-radius: 10px; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary span, .menu summary span::before, .menu summary span::after { display: block; width: 22px; height: 2px; background: var(--graphite); content: ""; }
.menu summary span { position: relative; }
.menu summary span::before { position: absolute; top: -7px; }
.menu summary span::after { position: absolute; top: 7px; }
.menu nav { position: absolute; right: 0; top: 52px; display: grid; gap: 4px; min-width: 240px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--enamel); box-shadow: 0 18px 40px -18px rgba(18, 34, 45, 0.4); }
.menu nav a { padding: 12px; border-radius: 8px; }

/* hero */
.hero { padding-block: clamp(32px, 5vw, 64px) clamp(48px, 6vw, 88px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 32px; }
.facts { margin: 0; border-top: 1px solid var(--line-strong); }
.facts div { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.facts dt { color: var(--slate); font-size: 0.92rem; }
.facts dd { margin: 0; font-weight: 500; }

/* radiograph panel with the tooth chart */
.panel { padding: clamp(18px, 2.4vw, 28px); border-radius: 28px; background: var(--xray-bg); color: var(--xray-text); }
.panel :focus-visible { outline-color: #fff; }
.panel-head h2 { margin: 0 0 6px; color: #fff; font-size: 1.35rem; letter-spacing: -0.01em; }
.panel-head .hint { margin: 0 0 14px; color: var(--xray-dim); font-size: 0.95rem; }
.sides { display: none; gap: 8px; margin: 0 0 8px; }
.sides button { flex: 1; min-height: 44px; border: 1.5px solid rgba(168, 224, 238, 0.4); border-radius: 10px; background: transparent; color: var(--xray-text); font: 500 0.95rem var(--font-body); cursor: pointer; }
.sides button[aria-pressed="true"] { border-color: var(--xray-tooth); background: rgba(168, 224, 238, 0.14); color: #fff; }
.chart { display: block; width: 100%; height: auto; }
.chart .mid { stroke: var(--xray-dim); stroke-opacity: 0.4; stroke-dasharray: 3 6; }
.chart .side-label { fill: var(--xray-dim); font: 500 13px var(--font-body); }
.tooth { cursor: pointer; outline: none; }
.tooth .hit { fill: transparent; stroke: none; }
.tooth .crown { fill: rgba(168, 224, 238, 0.09); stroke: var(--xray-tooth); stroke-width: 1.6; stroke-linejoin: round; transition: fill 0.15s ease; }
.tooth .root { fill: none; stroke: var(--xray-tooth); stroke-opacity: 0.4; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.tooth .num { fill: var(--xray-dim); font: 500 13px var(--font-body); text-anchor: middle; font-variant-numeric: tabular-nums; }
.tooth:hover .crown { fill: rgba(168, 224, 238, 0.24); }
.tooth:focus-visible .hit { fill: rgba(255, 255, 255, 0.07); stroke: #fff; stroke-width: 2; stroke-dasharray: 4 3; rx: 6; }
.tooth[aria-pressed="true"] .crown { fill: var(--gum-light); stroke: #fff; }
.tooth[aria-pressed="true"] .num { fill: #fff; font-weight: 700; }
.picked { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; min-height: 44px; margin: 6px 0 10px; }
.picked p { margin: 0; color: var(--xray-text); font-size: 0.95rem; }
.picked .ghost { min-height: 44px; padding: 0 14px; border: 1.5px solid rgba(168, 224, 238, 0.4); border-radius: 10px; background: transparent; color: var(--xray-text); font: 500 0.92rem var(--font-body); cursor: pointer; }
.picked .ghost[aria-pressed="true"] { border-color: var(--xray-tooth); background: rgba(168, 224, 238, 0.14); color: #fff; }
.panel .q { margin: 8px 0; color: var(--xray-dim); font-size: 0.95rem; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 44px; padding: 0 16px; border: 1.5px solid rgba(168, 224, 238, 0.45); border-radius: 999px; background: transparent; color: var(--xray-text); font: 500 0.95rem var(--font-body); cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease; }
.chip:hover { border-color: var(--xray-tooth); }
.chip:active { transform: scale(0.97); }
.chip[aria-pressed="true"] { border-color: var(--gum-light); background: var(--gum-light); color: var(--xray-bg); font-weight: 600; }
.result { margin-top: 16px; padding: 20px; border-radius: 16px; background: var(--enamel); color: var(--graphite); }
.result.empty { background: transparent; padding: 4px 0 0; color: var(--xray-dim); font-size: 0.95rem; }
.result h3 { margin: 0 0 4px; font-size: 1.3rem; }
.result .price { margin: 0 0 2px; font: 700 1.9rem/1.1 var(--font-head); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.result .price small { display: block; margin-top: 4px; color: var(--slate); font: 400 0.9rem var(--font-body); letter-spacing: 0; }
.result .visit { margin: 8px 0 12px; color: var(--slate); }
.result .urgent { display: inline-block; margin: 0 0 8px; padding: 3px 10px; border-radius: 999px; background: var(--gum-soft); color: var(--gum-dark); font-size: 0.85rem; font-weight: 600; }
.result ul { margin: 0 0 16px; padding: 0; list-style: none; }
.result li { position: relative; padding: 3px 0 3px 24px; }
.result li::before { content: ""; position: absolute; left: 3px; top: 0.72em; width: 6px; height: 11px; border: solid var(--ok); border-width: 0 2.5px 2.5px 0; transform: translateY(-50%) rotate(45deg); }
.result .fine { margin: 12px 0 0; color: var(--slate); font-size: 0.85rem; }
.result .btn { width: 100%; }
.plain { width: 100%; border-collapse: collapse; color: var(--xray-text); font-size: 0.95rem; }
.plain th, .plain td { padding: 8px 6px; border-bottom: 1px solid rgba(168, 224, 238, 0.2); text-align: left; font-weight: 400; }

/* visit steps: a real sequence, so numbered */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 32px; margin: 36px 0 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { position: relative; padding-top: 64px; counter-increment: step; }
.steps li::before { content: counter(step); position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 44px; height: 44px; border: 2px solid var(--graphite); border-radius: 50%; background: var(--enamel); font: 650 1.1rem var(--font-head); }
.steps li::after { content: ""; position: absolute; top: 21px; left: 56px; right: -20px; height: 2px; background: var(--line); }
.steps li:last-child::after { display: none; }
.steps p { margin: 0 0 8px; color: var(--slate); }
.steps .step-time { color: var(--graphite); font-size: 0.92rem; font-weight: 500; }

/* prices */
.sec-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 48px; align-items: end; margin-bottom: 28px; }
.sec-head h2 { margin: 0; }
.sec-head .lead { margin: 0; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.filters .chip { border-color: var(--line-strong); color: var(--graphite); }
.filters .chip:hover { border-color: var(--graphite); }
.filters .chip[aria-pressed="true"] { border-color: var(--graphite); background: var(--graphite); color: #fff; }
.price-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 56px; align-items: start; }
.price-table { width: 100%; border-collapse: collapse; }
.price-table[hidden] { display: none; }
.price-table caption { padding-bottom: 8px; border-bottom: 2px solid var(--graphite); text-align: left; font: 650 1.2rem var(--font-head); letter-spacing: -0.01em; }
.price-table tr { border-bottom: 1px solid var(--line); }
.price-table th { padding: 12px 12px 12px 0; text-align: left; font-weight: 500; }
.price-table th small { display: block; margin-top: 2px; color: var(--slate); font-size: 0.85rem; font-weight: 400; }
.price-table td { padding: 12px 0; }
.price-table td.num { padding-left: 12px; text-align: right; font-weight: 600; white-space: nowrap; }
.price-table td.act { padding-left: 16px; text-align: right; white-space: nowrap; }

/* written estimate */
.est-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.sheet { padding: clamp(20px, 3vw, 32px); border: 1px solid var(--line); border-top: 6px dotted var(--line); border-radius: 6px; background: var(--enamel); box-shadow: 0 26px 40px -30px rgba(18, 34, 45, 0.45); }
.band-white .sheet { background: var(--porcelain); }
.sheet header p { margin: 4px 0 0; color: var(--slate); font-size: 0.92rem; overflow-wrap: anywhere; }
.sheet ul { margin: 20px 0; padding: 0; list-style: none; }
.sheet li { display: flex; align-items: baseline; gap: 8px; padding: 8px 0; }
.sheet .dots { flex: 1; min-width: 12px; border-bottom: 2px dotted var(--line-strong); transform: translateY(-4px); }
.sheet .total { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 12px; padding-top: 12px; border-top: 2px solid var(--graphite); font: 650 1.3rem var(--font-head); }
.sheet .small { margin: 0 0 16px; color: var(--slate); font-size: 0.9rem; }
.sheet .sign { margin: 0; color: var(--slate); }

/* doctors */
.roster { margin: 0; padding: 0; border-top: 2px solid var(--graphite); list-style: none; }
.roster li { display: grid; grid-template-columns: 56px minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1.2fr) auto; gap: 8px 24px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--line); }
.roster h3 { margin: 0; }
.roster p { margin: 0; }
.roster .who p { color: var(--slate); }
.roster .days small { display: block; color: var(--slate); font-size: 0.82rem; }
.shade { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(18, 34, 45, 0.16); font: 650 1rem var(--font-head); }
.s-A1 { background: #F3E9D2; } .s-A2 { background: #EADBB8; } .s-B1 { background: #F1EBD9; } .s-C2 { background: #D8C9AB; }

/* working with fear */
.comfort { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 5vw, 64px); margin: 28px 0 0; padding: 0; list-style: none; }
.comfort li { padding: 26px 0; border-top: 1px solid var(--line-strong); }
.comfort h3 { margin-bottom: 8px; font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem); }
.comfort p { margin: 0; color: var(--slate); max-width: 46ch; }

/* booking form */
.book-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.reasons { margin: 0; padding: 0; list-style: none; }
.reasons li { position: relative; padding: 6px 0 6px 30px; }
.reasons li::before { content: ""; position: absolute; left: 6px; top: 0.85em; width: 7px; height: 13px; border: solid var(--ok); border-width: 0 3px 3px 0; transform: translateY(-50%) rotate(45deg); }
.form { display: grid; gap: 18px; }
.field { margin: 0; padding: 0; border: 0; min-width: 0; }
.field label, .field legend { display: block; margin-bottom: 6px; padding: 0; font-weight: 600; }
input[type="text"], input[type="tel"], input:not([type]), select, textarea { width: 100%; min-height: 52px; padding: 12px 14px; border: 1.5px solid var(--line-strong); border-radius: 10px; background: var(--enamel); color: var(--graphite); font: inherit; font-size: 1rem; }
textarea { resize: vertical; }
.field.invalid input, .field.invalid select { border-color: var(--gum-dark); }
.err { min-height: 0; margin: 6px 0 0; color: var(--gum-dark); font-size: 0.92rem; font-weight: 500; }
.err:empty { display: none; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { position: relative; }
.pill input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pill span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--line-strong); border-radius: 999px; background: var(--enamel); font-weight: 500; }
.pill input:checked + span { border-color: var(--graphite); background: var(--graphite); color: #fff; }
.pill input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 3px; }
.field .check { display: flex; gap: 12px; align-items: flex-start; font-weight: 400; }
.check input { flex: none; width: 24px; height: 24px; margin: 1px 0 0; accent-color: var(--gum); }
.done { padding: 20px; border: 1.5px solid var(--ok); border-radius: 10px; background: #F0FAF5; }
.done h3 { margin: 0 0 6px; color: var(--ok); }
.done p { margin: 0 0 10px; }
.done .fine { color: var(--slate); font-size: 0.92rem; }
.done .btn { margin: 4px 8px 0 0; }
.form.sent > .field, .form.sent > #book-submit { display: none; }
.peek { margin-top: 14px; padding: 14px 16px; border-radius: 16px; background: #182533; color: #E9F1F5; font-size: 0.93rem; line-height: 1.5; }
.peek b { display: block; margin-bottom: 6px; color: #fff; }
.peek span { color: #9FB4C2; }

/* contacts, faq, footer */
.contact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px clamp(24px, 4vw, 56px); margin-top: 28px; }
.contact-grid p { margin: 0 0 8px; }
.contact-grid .links { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.tel { font: 650 1.5rem var(--font-head); letter-spacing: -0.01em; text-decoration: none; }
.hours { width: 100%; border-collapse: collapse; }
.hours th, .hours td { padding: 8px 0; border-bottom: 1px solid var(--line); text-align: left; font-weight: 500; }
.hours td { text-align: right; font-variant-numeric: tabular-nums; }
.faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 2px solid var(--graphite); }
.faq summary { position: relative; display: flex; align-items: center; min-height: 64px; padding: 14px 48px 14px 0; font: 600 1.1rem/1.3 var(--font-head); list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 10px; height: 10px; border: solid var(--graphite); border-width: 0 2px 2px 0; transform: translateY(-70%) rotate(45deg); transition: transform 0.2s var(--ease); }
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details p { margin: 0 0 18px; color: var(--slate); max-width: 62ch; }
.contra { padding: 18px 0; border-top: 1px solid var(--line); background: var(--enamel); }
.contra p { margin: 0; font-weight: 600; }
.site-foot { padding: 32px 0 40px; background: var(--graphite); color: #C6D5DD; font-size: 0.92rem; }
.site-foot a { color: #fff; }
.foot-row { display: grid; gap: 6px; }
.foot-row p { margin: 0; }
.mobile-bar { display: none; }

/* responsive */
@media (max-width: 1080px) {
  .main-nav { display: none; }
  .menu { display: block; }
}
@media (max-width: 900px) {
  .hero-grid, .est-grid, .book-grid, .faq-grid, .sec-head { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .steps li { padding: 0 0 28px 64px; }
  .steps li::after { top: 46px; bottom: 0; left: 21px; right: auto; width: 2px; height: auto; }
  .price-list, .comfort, .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .roster li { grid-template-columns: 56px minmax(0, 1fr); }
  .roster .exp, .roster .days, .roster .link { grid-column: 2; }
  .head-phone { display: none; }
}
@media (max-width: 640px) { .sides { display: flex; } }
@media (max-width: 600px) {
  body.clinic { font-size: 1rem; padding-bottom: 76px; }
  .lead { font-size: 1.08rem; }
  .facts div { grid-template-columns: 1fr; gap: 2px; }
  .demo-strip { text-align: left; }
  .demo-strip p { justify-content: flex-start; }
  .demo-strip .strip-sub, .demo-strip .strip-how { display: none; }
  .statusbar { font-size: 0.85rem; }
  .price-table, .price-table tbody { display: block; }
  .price-table caption { display: block; }
  .price-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: baseline; padding: 12px 0; }
  .price-table th, .price-table td, .price-table td.num { padding: 0; }
  .price-table td.act { grid-column: 1 / -1; padding: 0; text-align: left; }
  .mobile-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--enamel); }
  .mobile-bar .btn { flex: 1; padding: 0 10px; font-size: 0.95rem; }
  .site-head .btn-sm { display: none; }
}

/* one orchestrated moment: the chart is drawn once on load */
@media (prefers-reduced-motion: no-preference) {
  .chart.intro .crown { stroke-dasharray: 1; animation: lt-draw 0.9s var(--ease) both; }
  .chart.intro .root { animation: lt-fade 0.9s ease both; }
  .chart.intro .d0 .crown { animation-delay: 0.000s; }
  .chart.intro .d1 .crown { animation-delay: 0.035s; }
  .chart.intro .d2 .crown { animation-delay: 0.070s; }
  .chart.intro .d3 .crown { animation-delay: 0.105s; }
  .chart.intro .d4 .crown { animation-delay: 0.140s; }
  .chart.intro .d5 .crown { animation-delay: 0.175s; }
  .chart.intro .d6 .crown { animation-delay: 0.210s; }
  .chart.intro .d7 .crown { animation-delay: 0.245s; }
  .chart.intro .d8 .crown { animation-delay: 0.280s; }
  .chart.intro .d9 .crown { animation-delay: 0.315s; }
  .chart.intro .d10 .crown { animation-delay: 0.350s; }
  .chart.intro .d11 .crown { animation-delay: 0.385s; }
  .chart.intro .d12 .crown { animation-delay: 0.420s; }
  .chart.intro .d13 .crown { animation-delay: 0.455s; }
  .chart.intro .d14 .crown { animation-delay: 0.490s; }
  .chart.intro .d15 .crown { animation-delay: 0.525s; }
}
@keyframes lt-draw { from { stroke-dashoffset: 1; fill-opacity: 0; } to { stroke-dashoffset: 0; } }
@keyframes lt-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* touch: text links get a 44 px hit area without changing the layout of the text around them */
@media (pointer: coarse), (max-width: 900px) {
  .demo-strip a, .contact-grid p > a, .site-foot a, .tel { display: inline-flex; align-items: center; min-height: 44px; }
  .demo-strip p { gap: 0 18px; }
  .site-foot .foot-row { gap: 0; }
}
.demo-strip a, .contact-grid p > a, .site-foot a, .tel { padding-block: 4px; }