/* FUNSTOM redesign — shared styles for every page.
   Tokens follow the FUNSTOM style guide: white page, one blue for actions, heavy caps headings,
   straight-cornered cards and photos, 6px buttons and fields. Colours, fonts, radii and shadows
   are used only through these variables. */
@font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 400; src: url(fonts/inter-cyrillic-400-normal.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 400; src: url(fonts/inter-latin-400-normal.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+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 500; src: url(fonts/inter-cyrillic-500-normal.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 500; src: url(fonts/inter-latin-500-normal.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+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 700; src: url(fonts/inter-cyrillic-700-normal.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 700; src: url(fonts/inter-latin-700-normal.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+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 800; src: url(fonts/inter-cyrillic-800-normal.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 800; src: url(fonts/inter-latin-800-normal.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+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* Brand */
  --c-primary: #0A6CF5;          /* the only colour for actions */
  --c-primary-hover: #0858CC;
  --c-primary-active: #0749A8;
  --c-on-primary: #FFFFFF;       /* text on --c-primary */
  --c-logo: #1A63E6;
  --c-accent-yellow: #FFEB00;    /* only over dark photos with --overlay-dark */
  --c-aqua: #A3E0F3;             /* booking banner */
  --c-cyan-50: #E8F7FC;          /* service card tint */

  /* Third-party brands: only on their own buttons and icons */
  --c-max: #5B3FC7;
  --c-telegram: #3A8EDB;
  --c-vk: #0066DD;           /* VK blue, darkened to 5.3:1 under white text (#0077FF gives 4.1:1) */
  --c-play-from: #FF5A00;
  --c-play-to: #E63B0F;
  --c-star: #F7B500;

  /* Background and text */
  --c-bg: #FFFFFF;
  --c-bg-soft: #F3F6F6;          /* reviews, open FAQ, tinted bands */
  --c-heading: #111111;
  --c-hero-heading: #3A3A3A;     /* first-screen H1 only */
  --c-text: #1A1A1A;
  --c-text-2: #6E6E6E;           /* leads, descriptions */
  --c-text-3: #767676;           /* small print, AA contrast on white */
  --c-placeholder: #A0A0A0;
  --c-border: #E3E6E8;
  --c-border-strong: #CFCFCF;
  --overlay-dark: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.65) 100%);
  --overlay-strong: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.78) 100%); /* promo text over light photos */
  --overlay-play: linear-gradient(135deg, var(--c-play-from), var(--c-play-to));
  --bg-lowpoly: url("/upload/Image/bgvr1.jpg");      /* low-poly texture from the live site */
  --bg-lowpoly-plan: url("/upload/Image/bgplan.jpg"); /* booking banner texture */

  /* Typography */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --fs-h1: clamp(36px, 5.2vw, 64px);
  --fs-lead: clamp(20px, 2.6vw, 32px);
  --fs-h2: clamp(26px, 3vw, 36px);
  --fs-h3: clamp(22px, 2.3vw, 28px);
  --fs-h4: clamp(20px, 2vw, 24px);
  --fs-body: clamp(16px, 1.5vw, 18px);
  --fs-small: 14px;
  --lh-tight: 1.05;
  --lh-heading: 1.2;
  --lh-body: 1.55;
  --ls-heading: -0.01em;

  /* Shape and spacing */
  --container: 1200px;
  --pad-x: clamp(16px, 4vw, 32px);
  --gutter: clamp(16px, 3.5vw, 48px);
  --section-y: clamp(64px, 9vw, 112px);
  --card-pad: clamp(20px, 2.5vw, 32px);
  --btn-h: 56px;
  --btn-h-sm: 48px;
  --radius-btn: 6px;             /* buttons and fields */
  --radius-card: 0;              /* cards and photos: straight corners */
  --shadow-card: 0 10px 30px rgba(0,0,0,.08);   /* doctor cards only */
  --shadow-header: 0 4px 20px rgba(0,0,0,.08);  /* sticky header only */
  --focus-ring: 0 0 0 3px rgba(10,108,245,.35);
  --t-fast: 160ms ease;
  --scrim: rgba(0,0,0,.5);
  --hero-banner-bg: linear-gradient(180deg, #E8EDF1 0%, #DFE4E8 100%); /* matches the team photo background */       /* dimmed page under the dialog and the sent notice */
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } }
body {
  margin: 0; background: var(--c-bg); color: var(--c-text);
  font: 400 var(--fs-body)/var(--lh-body) var(--font);
  -webkit-font-smoothing: antialiased; text-align: left;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--c-bg); }
h1, h2, h3, h4 { font-family: var(--font); line-height: var(--lh-heading); margin: 0; text-wrap: balance; letter-spacing: var(--ls-heading); color: var(--c-heading); }
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); font-weight: 800; text-transform: uppercase; }
h2 { font-size: var(--fs-h2); font-weight: 800; text-transform: uppercase; }
h3 { font-size: var(--fs-h3); line-height: 1.15; font-weight: 700; color: var(--c-text); }
h4 { font-size: var(--fs-h4); line-height: 1.3; font-weight: 500; color: var(--c-text); }
small, .small { font-size: var(--fs-small); line-height: 1.4; color: var(--c-text-3); }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-btn); }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 20; background: var(--c-primary); color: var(--c-on-primary); padding: 10px 16px; border-radius: var(--radius-btn); }
.skip:focus { left: max(16px, env(safe-area-inset-left, 0px)); top: calc(env(safe-area-inset-top, 0px) + 8px); }

.wrap {
  max-width: var(--container); margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.eyebrow { font: 700 var(--fs-small)/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--c-primary); }


/* Hero */
.hero { padding-block: clamp(40px, 7vw, 88px) 0; }
.hero-grid { display: grid; grid-template-columns: 1.25fr .9fr; gap: clamp(28px, 5vw, 64px); align-items: end; }
.hero h1 { font-size: var(--fs-h1); font-weight: 800; margin-top: 18px; }
.hero h1 em { font-style: normal; color: var(--c-primary); }
.hero h1 .kicker { display: block; font: 700 var(--fs-h4)/1.3 var(--font); letter-spacing: 0; color: var(--c-text-2); margin-bottom: 14px; }
.hero .lead { margin-top: 22px; font-size: var(--fs-h4); color: var(--c-text-2); max-width: 34ch; }
.hero .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.facts { display: grid; gap: 0; border-top: 1px solid var(--c-border); margin: 0; }
.facts div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--c-border); }
.facts dt { color: var(--c-text-2); }
.facts dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; } }

/* Tooth formula */
.formula { margin-top: clamp(40px, 6vw, 72px); padding-block: 28px 32px; border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); }
.formula-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; align-items: baseline; margin-bottom: 18px; }
.formula-head p { color: var(--c-text-2); font-size: var(--fs-body); }
.jaw-scroll { overflow-x: auto; padding-bottom: 6px; }
/* min-height reserves the row before the script fills it, so the page does not jump (CLS) */
.jaw { display: grid; grid-template-columns: repeat(16, minmax(34px, 1fr)); gap: 6px; min-width: 620px; min-height: 54px; }
.jaw + .jaw { margin-top: 6px; }
.jaw.upper { padding-bottom: 6px; border-bottom: 1.5px dashed var(--c-border); min-height: 61.5px; }
.tooth {
  appearance: none; border: 1.5px solid var(--c-border); background: var(--c-bg-soft); color: var(--c-text-2);
  font: 700 var(--fs-small)/1 var(--font); height: 54px; border-radius: var(--radius-btn); cursor: pointer;
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px;
  transition: background .18s, color .18s, border-color .18s, transform .18s;
}
.jaw.lower .tooth { border-radius: var(--radius-btn); align-items: flex-start; padding: 8px 0 0; }
.tooth:hover { border-color: var(--c-primary); color: var(--c-text); transform: translateY(-2px); }
.tooth[aria-pressed="true"] { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-on-primary); }
.tooth.mid { margin-left: 10px; }
.tooth-out { margin-top: 16px; min-height: 3.2em; display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; align-items: baseline; }
.tooth-out b { font: 800 var(--fs-h3)/1 var(--font); color: var(--c-primary); grid-row: span 2; }
.tooth-out span { color: var(--c-text-2); font-size: var(--fs-body); }

/* Sections */
section.block { padding-block: clamp(56px, 8vw, 104px); }
section.block.tight { padding-top: 0; }
.sec-head { display: grid; grid-template-columns: 1fr 1.3fr; gap: 16px 48px; align-items: end; margin-bottom: 40px; }
.sec-head p { color: var(--c-text-2); max-width: 52ch; }
.h2 { font-size: var(--fs-h2); font-weight: 700; margin-top: 12px; }
@media (max-width: 760px) { .sec-head { grid-template-columns: 1fr; } }

/* Services: price-list rows rather than cards */
.services { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 48px; }
.svc { display: grid; grid-template-columns: 1fr auto; gap: 6px 20px; padding: 22px 0; border-top: 1px solid var(--c-border); min-width: 0; }
.svc h3 { font-size: var(--fs-h4); font-weight: 700; }
.svc .price { font: 700 var(--fs-body)/1.6 var(--font); white-space: nowrap; font-variant-numeric: tabular-nums; }
.svc p { grid-column: 1 / -1; color: var(--c-text-2); font-size: var(--fs-body); }
.svc .tags { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.svc .more { grid-column: 1 / -1; justify-self: start; color: var(--c-primary); font-weight: 700; font-size: var(--fs-body); text-underline-offset: 3px; }
.tag { font-size: var(--fs-small); padding: 4px 10px; border-radius: var(--radius-btn); background: var(--c-bg); border: 1px solid var(--c-border); color: var(--c-text-2); }
@media (max-width: 760px) { .services { grid-template-columns: 1fr; } }
.note { margin-top: 18px; color: var(--c-text-2); font-size: var(--fs-small); }

/* Approach band */
.band { background: var(--c-bg-soft); color: var(--c-text); }
.band .sec-head p { color: var(--c-text-2); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; counter-reset: s; }
.steps li { counter-increment: s; border-top: 2px solid var(--c-primary); padding-top: 18px; min-width: 0; }
.steps li::before { content: "Этап " counter(s); display: block; font: 700 var(--fs-small)/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--c-primary); margin-bottom: 14px; }
.steps h3 { font-size: var(--fs-body); font-weight: 700; margin-bottom: 10px; }
.steps p { color: var(--c-text-2); font-size: var(--fs-body); }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

/* Kids */
.kids { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.kids-card { background: var(--c-cyan-50); border-radius: var(--radius-card); padding: clamp(24px, 4vw, 44px); display: grid; gap: 18px; }
.kids-card .big { font: 800 clamp(3.5rem, 10vw, 6rem)/.9 var(--font); color: var(--c-primary); }
.kids-card .big small { font-size: .3em; font-weight: 700; display: block; margin-top: 10px; color: var(--c-text); line-height: 1.3; }
.kids ul { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.kids li { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--c-border); }
.kids li b { font: 700 var(--fs-body)/1.6 var(--font); white-space: nowrap; }
.kids .more { display: inline-block; margin-top: 18px; color: var(--c-primary); font-weight: 700; text-underline-offset: 3px; }
@media (max-width: 860px) { .kids { grid-template-columns: 1fr; } }

/* Doctors */
.docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 20px; }
.doc { display: grid; gap: 10px; align-content: start; }
.avatar {
  aspect-ratio: 4 / 5; max-width: 100%; border-radius: var(--radius-card); background: var(--c-bg); border: 1px solid var(--c-border);
  display: grid; place-items: center; font: 800 2.2rem/1 var(--font); color: var(--c-primary);
}
.doc h3 { font: 700 var(--fs-body)/1.3 var(--font); }
.doc h3 a { text-decoration: none; }
.doc h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.doc p { color: var(--c-text-2); font-size: var(--fs-body); }
.doc .exp { font: 500 var(--fs-small)/1.3 var(--font); color: var(--c-text); }


/* Booking + contacts */
.book { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); }
form.card { background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius-card); padding: clamp(20px, 4vw, 36px); display: grid; gap: 16px; }
form.card h2 { font-size: var(--fs-h3); font-weight: 700; margin-top: 10px; }
label { display: grid; gap: 6px; font-size: var(--fs-small); font-weight: 500; color: var(--c-text-2); }
input, select, textarea {
  font: 400 var(--fs-body)/1.4 var(--font); color: var(--c-text); background: var(--c-bg); border: 1px solid var(--c-border);
  border-radius: var(--radius-btn); padding: 12px 14px; width: 100%; min-height: 48px;
}
textarea { min-height: 90px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--c-primary); outline-offset: 1px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 520px) { .row2 { grid-template-columns: 1fr; } }
.form-msg { font-size: var(--fs-body); color: var(--c-text); background: var(--c-cyan-50); padding: 12px 14px; border-radius: var(--radius-btn); }
.contacts { display: grid; gap: 26px; align-content: start; font-style: normal; }
.contacts dl { margin: 0; display: grid; gap: 18px; }
.contacts dt { font: 700 var(--fs-small)/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--c-text-2); margin-bottom: 6px; }
.contacts dd { margin: 0; font-size: var(--fs-h4); font-weight: 500; }
.contacts .num { font: 700 var(--fs-h3)/1.1 var(--font); text-decoration: none; }
.contacts .map { font-size: var(--fs-body); color: var(--c-primary); }
.copy { margin-left: 10px; font: 500 var(--fs-small)/1 var(--font); padding: 6px 10px; border-radius: var(--radius-btn); border: 1px solid var(--c-border); background: transparent; color: var(--c-text-2); cursor: pointer; vertical-align: middle; }
.hours { display: grid; grid-template-columns: auto 1fr; gap: 4px 20px; font-variant-numeric: tabular-nums; }


@keyframes rise { from { transform: translateY(14px); opacity: .001; } to { transform: none; opacity: 1; } }
.hero h1, .hero .lead, .hero .actions { animation: rise .7s cubic-bezier(.2,.7,.2,1) both; }
.hero .lead { animation-delay: .08s; } .hero .actions { animation-delay: .16s; }

/* ---------- Inner pages ---------- */
.crumbs { padding-top: 22px; font-size: var(--fs-small); color: var(--c-text-2); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; }
.crumbs li + li::before { content: "/"; margin: 0 10px; color: var(--c-border); }
.crumbs a { color: var(--c-text-2); text-underline-offset: 3px; }
.crumbs [aria-current] { color: var(--c-text); }

.page-hero { padding-block: clamp(28px, 5vw, 56px) clamp(36px, 5vw, 64px); border-bottom: 1px solid var(--c-border); }
.page-hero .hero-grid { align-items: start; }
.page-hero h1 { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 800; margin-top: 16px; }
.page-hero .lead { margin-top: 20px; font-size: var(--fs-h4); color: var(--c-text-2); max-width: 46ch; }
.page-hero .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.from { display: inline-flex; align-items: baseline; gap: 10px; margin-top: 22px; padding: 10px 16px; border-radius: var(--radius-card); background: var(--c-cyan-50); }
.from span { color: var(--c-text-2); font-size: var(--fs-body); }
.from b { font: 800 var(--fs-h3)/1 var(--font); color: var(--c-primary); font-variant-numeric: tabular-nums; }

.split { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
@media (max-width: 860px) { .split { grid-template-columns: minmax(0, 1fr); } }
.prose { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 66ch; }
.prose h2 { font-size: var(--fs-h3); font-weight: 700; margin-top: 18px; }
.prose h3 { font: 700 var(--fs-h4)/1.3 var(--font); margin-top: 10px; }
.prose p, .prose li { color: var(--c-text); }
.prose ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
.aside { display: grid; gap: 20px; position: sticky; top: calc(env(safe-area-inset-top, 0px) + 96px); }
@media (max-width: 860px) { .aside { position: static; } }
.panel { background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius-card); padding: 22px; display: grid; gap: 12px; }
.panel h2, .panel h3 { font: 700 var(--fs-body)/1.3 var(--font); }
.panel p { color: var(--c-text-2); font-size: var(--fs-body); }

/* Price rows (service pages and the price list) */
.prices { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.prices caption { text-align: left; font: 700 var(--fs-h4)/1.3 var(--font); padding: 0 0 12px; }
.prices th, .prices td { text-align: left; padding: 12px 0; border-top: 1px solid var(--c-border); vertical-align: top; }
.prices th { font-weight: 400; padding-right: 20px; }
.prices td { font: 700 var(--fs-body)/1.5 var(--font); white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.prices .code { display: block; font: 500 var(--fs-small)/1.4 var(--font); color: var(--c-text-2); margin-top: 2px; }
.prices tr.group th { padding-top: 26px; font: 700 var(--fs-small)/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--c-primary); border-top: 0; }
.table-scroll { overflow-x: auto; }
/* Comparison tables inside article text */
.cmp { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.cmp caption { text-align: left; font: 700 var(--fs-h4)/1.3 var(--font); padding: 0 0 10px; }
.cmp th, .cmp td { text-align: left; vertical-align: top; padding: 10px 14px 10px 0; border-top: 1px solid var(--c-border); }
.cmp thead th { border-top: 0; font: 700 var(--fs-small)/1.3 var(--font); color: var(--c-text-2); }
.cmp tbody th { font-weight: 700; }

/* About page: service groups with chips */
.prose .about-groups { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.about-groups .chips { margin-top: 8px; }
.prose .about-groups li { display: flex; flex-wrap: wrap; gap: 8px; }
.prose .about-groups li > b { flex-basis: 100%; }

/* Price list page */
.price-tools { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 26px; }
.price-tools label { flex: 1 1 280px; }
.price-tools input { font-size: var(--fs-body); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font: 500 var(--fs-small)/1 var(--font); padding: 9px 14px; border-radius: var(--radius-btn); border: 1px solid var(--c-border); background: var(--c-bg); color: var(--c-text); text-decoration: none; }
.chip:hover { border-color: var(--c-primary); }
.price-sec { scroll-margin-top: 120px; }
.price-sec + .price-sec { margin-top: 44px; }
.price-sec > h2 { font-size: var(--fs-h3); font-weight: 700; margin-bottom: 8px; }
.empty { color: var(--c-text-2); padding: 24px 0; }

/* Doctors with photos */
.doc .photo { aspect-ratio: 4 / 5; max-width: 100%; width: 100%; object-fit: cover; object-position: top; border-radius: var(--radius-card); background: var(--c-bg); border: 1px solid var(--c-border); display: block; }
.doc .rating { font: 500 var(--fs-small)/1.3 var(--font); color: var(--c-text-2); }
.profile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: clamp(28px, 5vw, 64px); align-items: start; }
.profile .photo { aspect-ratio: 4 / 5; width: 100%; max-width: 100%; object-fit: cover; object-position: top; border-radius: var(--radius-card); background: var(--c-bg); border: 1px solid var(--c-border); }
@media (max-width: 760px) { .profile { grid-template-columns: 1fr; } .profile .photo { max-width: 300px; } .profile-pic { order: -1; } }
/* Doctor page: the card (name, facts, buttons) is the hero, the rest of the profile follows in its own section */
section.block.doctor-hero { padding-bottom: 0; }
section.block.doctor-about { padding-top: clamp(24px, 3vw, 40px); }
.doctor-about .prose > h2:first-child { margin-top: 0; }
.creds { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
/* Doctor profiles on review platforms: name + one-line platform description */
.prose .profiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.prose .profiles li { margin: 0; padding: 0; }
.prose .profiles li::before { content: none; }
.profiles a { display: grid; gap: 4px; align-content: start; height: 100%; box-sizing: border-box; padding: 14px 16px; border: 1px solid var(--c-border); border-radius: var(--radius-card); background: var(--c-bg); color: var(--c-text); text-decoration: none; }
.profiles a:hover { border-color: var(--c-primary); }
.profiles b { font: 700 var(--fs-body)/1.3 var(--font); color: var(--c-primary); }
.profiles span { font-size: var(--fs-small); line-height: 1.4; color: var(--c-text-2); }
.profiles .score { font: 600 var(--fs-small)/1.4 var(--font); font-style: normal; color: var(--c-text); }
.profiles .score::before { content: "★ "; color: var(--c-star); }
.leave-label { align-self: center; color: var(--c-text-2); font-size: var(--fs-small); width: 100%; }
.more-reviews { margin-top: 24px; }
.more-reviews > summary { list-style: none; cursor: pointer; }
.more-reviews > summary::-webkit-details-marker { display: none; }
.more-reviews[open] > summary { display: none; }
.creds li { padding: 12px 0; border-top: 1px solid var(--c-border); font-size: var(--fs-body); }
details.more-block { border-top: 1px solid var(--c-border); padding: 16px 0; }
details.more-block summary { cursor: pointer; font: 700 var(--fs-h4)/1.3 var(--font); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
details.more-block summary::after { content: "+"; font-family: var(--font); color: var(--c-primary); }
details.more-block[open] summary::after { content: "−"; }
details.more-block summary::-webkit-details-marker { display: none; }
details.more-block > :not(summary) { margin-top: 12px; }

/* Service catalogue */
.groups { display: grid; gap: clamp(40px, 6vw, 64px); }
.group-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; align-items: baseline; margin-bottom: 8px; }
.group-head h2 { font-size: var(--fs-h3); font-weight: 700; }
.group-head p { color: var(--c-text-2); max-width: 52ch; }
.svc h3 a { text-decoration: none; }
.svc h3 a:hover { text-decoration: underline; text-decoration-color: var(--c-primary); text-underline-offset: 4px; }

.links { display: flex; flex-wrap: wrap; gap: 8px; }

/* Promotions */
.promos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.promo { border: 1px solid var(--c-border); background: var(--c-bg); border-radius: var(--radius-card); padding: clamp(20px, 3vw, 32px); display: grid; gap: 10px; align-content: start; }
.promo b { font: 800 clamp(2.4rem, 6vw, 3.6rem)/1 var(--font); color: var(--c-primary); }
.promo h3 { font: 700 var(--fs-h4)/1.3 var(--font); }
.promo p { color: var(--c-text-2); }
@media (max-width: 760px) { .promos { grid-template-columns: 1fr; } }

/* Reviews */
.reviews { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 48px; }
.review { margin: 0; padding: 22px 0; border-top: 1px solid var(--c-border); display: grid; gap: 10px; min-width: 0; }
.review blockquote { margin: 0; }
.review figcaption { font-size: var(--fs-small); color: var(--c-text-2); display: flex; flex-wrap: wrap; gap: 4px 12px; }
.review figcaption b { color: var(--c-text); font-weight: 700; }
.stars { color: var(--c-primary); letter-spacing: .1em; font-size: var(--fs-body); }
@media (max-width: 760px) { .reviews { grid-template-columns: 1fr; } }

.panel .phone { font: 700 var(--fs-body)/1.4 var(--font); text-decoration: none; }
.profile .facts { margin-top: 8px; }
.profile .actions { display: flex; flex-wrap: wrap; gap: 12px; }
.book > * { min-width: 0; }
@media (max-width: 860px) { .book { grid-template-columns: 1fr; } }
.contacts dd { overflow-wrap: anywhere; }
.docs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .docs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .docs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
.doc > a:first-child { display: block; }
.doc .avatar, .profile .avatar { width: 100%; }
.profile .avatar { border-radius: var(--radius-card); font-size: 4rem; }

/* Phone: call and booking stay at hand at the bottom of the screen */
.mbar { display: none; }
@media (max-width: 520px) {
  .mbar {
    /* Две равные половины; главная «Позвонить» (синяя) справа, под большим пальцем правой руки */
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9;
    padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    background: color-mix(in srgb, var(--c-bg) 92%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--c-border);
  }
  .mbar .btn { justify-content: center; }
  /* Кнопки первого экрана и карточки врача дублировали бы нижнюю панель — на телефоне их нет */
  .hero .actions, .doctor-hero .profile .actions { display: none; }
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}
h1, h2 { overflow-wrap: break-word; hyphens: auto; }
h3 { overflow-wrap: break-word; }
@media (max-width: 520px) {
  .page-hero h1, .profile h1 { font-size: clamp(1.55rem, 7vw, 2rem) !important; }
  .h2 { font-size: clamp(1.5rem, 6.6vw, 1.9rem); }
}
/* Clinic photos are square: keep them square so faces are not cropped */
.doc .photo, .doc .avatar { aspect-ratio: 1 / 1; height: auto; object-position: center top; }
.doc > a:first-child { text-decoration: none; }
.profile .photo, .profile .avatar { aspect-ratio: 1 / 1; height: auto; }
@media (max-width: 420px) { .svc { grid-template-columns: 1fr; } .svc .price { grid-row: 2; } }


/* Cases (/keys/): before-and-after cards and photo pairs */
.cases { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 20px; }
@media (max-width: 960px) { .cases { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .cases { grid-template-columns: 1fr; } }
.case { display: grid; gap: 8px; align-content: start; min-width: 0; }
.case > a:first-child { display: block; text-decoration: none; }
.case img { display: block; width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; border-radius: var(--radius-btn); background: var(--c-bg-soft); }
.case h2, .case h3 { font: 700 var(--fs-body)/1.3 var(--font); }
.case h2 a, .case h3 a { text-decoration: none; }
.case h2 a:hover, .case h3 a:hover { color: var(--c-primary); }
.case p { color: var(--c-text-2); font-size: var(--fs-body); }
.case .eyebrow { font-size: var(--fs-small); }
.page-hero .chips { margin-top: 20px; }
.case-body { display: grid; gap: 40px; }
.case-step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 24px 40px; align-items: start; }
@media (max-width: 860px) { .case-step { grid-template-columns: 1fr; } }
.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px; }
.shot { margin: 0; position: relative; }
.shot a { display: block; }
.shot img { display: block; width: 100%; height: auto; border-radius: var(--radius-btn); background: var(--c-bg-soft); }
.shot figcaption { position: absolute; left: 10px; top: 10px; font: 700 var(--fs-small)/1 var(--font); text-transform: uppercase; letter-spacing: .08em;
  background: var(--c-primary); color: var(--c-on-primary); padding: 6px 9px; border-radius: var(--radius-btn); }

/* Reviews page: rating on each portal */
.portals { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-block: 24px; }
.portal { display: grid; gap: 10px; justify-items: center; padding: 16px; border-radius: var(--radius-btn); background: var(--c-bg); text-decoration: none; border: 1px solid var(--c-border); }
.portal img { width: 100%; height: auto; max-width: 180px; }
.portal:hover { border-color: var(--c-primary); }
.portal b { font: 800 var(--fs-h3)/1 var(--font); color: var(--c-text); }
.portal b::before { content: "★★★★★ "; color: var(--c-star); font-size: .7em; vertical-align: .15em; }
/* Text for screen readers only */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.portal span { font-size: var(--fs-small); color: var(--c-text-2); }
.review figcaption a { color: var(--c-primary); text-underline-offset: 3px; }
/* A tinted band always needs its top padding, and so does the section right after it */
section.block.tight.band, section.band + section.block.tight { padding-top: clamp(56px, 8vw, 104px); }

/* Equipment (/equipment/): photos beside the description of each device */
.equips { display: grid; gap: clamp(36px, 5vw, 56px); }
.equip { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 24px 40px; align-items: start; scroll-margin-top: 110px; }
.equip--text { grid-template-columns: minmax(0, 1fr); }
.equip--text .prose { max-width: 80ch; }
.equip .shots { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
.equip .shot img { aspect-ratio: 4 / 3; object-fit: cover; }
.equip .shot:first-child { grid-column: 1 / -1; }
.equip .prose h3 { font: 700 var(--fs-h3)/1.2 var(--font); margin: 0; }
.equip .prose h4 { font: 700 var(--fs-body)/1.35 var(--font); margin: 6px 0 0; }
.equip .links { margin-top: 6px; }
@media (max-width: 860px) { .equip { grid-template-columns: 1fr; } }

/* Documents (/documents/) */
.doc-groups { display: grid; gap: clamp(32px, 5vw, 48px); }
.doc-group { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 12px 48px; align-items: start; }
.doc-group > h2 { font: 700 var(--fs-h4)/1.3 var(--font); padding-top: 14px; }
@media (max-width: 760px) { .doc-group { grid-template-columns: 1fr; } }
.files { list-style: none; margin: 0; padding: 0; display: grid; }
.files li { border-top: 1px solid var(--c-border); }
.files li:last-child { border-bottom: 1px solid var(--c-border); }
.files a { display: flex; gap: 14px; align-items: baseline; padding: 14px 0; text-decoration: none; }
.files a:hover { color: var(--c-primary); }
.files .ext { flex: none; min-width: 44px; text-align: center; font: 700 var(--fs-small)/1 var(--font); letter-spacing: .06em; padding: 5px 6px;
  border-radius: var(--radius-btn); background: var(--c-cyan-50); color: var(--c-primary-hover); }
.orgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.orgs .panel { gap: 6px; }
.orgs .panel p { overflow-wrap: anywhere; }
.page-hero .facts dd { max-width: 34ch; }

/* Articles (/articles/<slug>/) */
.article-img { width: 100%; height: auto; border-radius: var(--radius-btn); background: var(--c-bg-soft); }
.article h2 { font-size: var(--fs-h4); }

/* ======================================================================
   Style-guide components. Everything above is layout; these rules give
   buttons, fields, cards, header, footer, booking banner and FAQ their look.
   ====================================================================== */

/* Buttons: one solid blue, Regular 18px, 6px corners, no shadow or lift */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: var(--btn-h); padding: 0 30px; border-radius: var(--radius-btn);
  border: 1px solid var(--c-primary); background: var(--c-bg); color: var(--c-primary);
  font: 400 18px/1.2 var(--font); text-decoration: none; text-align: center; cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.btn:hover { background: var(--c-cyan-50); }
.btn--accent { background: var(--c-primary); color: var(--c-on-primary); border-color: transparent; }
.btn--accent:hover { background: var(--c-primary-hover); }
.btn--accent:active { background: var(--c-primary-active); }
.btn--sm, .svc .price, .from { min-height: var(--btn-h-sm); padding: 0 20px; }
.btn:focus-visible { box-shadow: var(--focus-ring); }

/* Fields: white, 1px border, button height */
input, select, textarea {
  font: 400 var(--fs-body)/1.4 var(--font); color: var(--c-text); background: var(--c-bg);
  border: 1px solid var(--c-border); border-radius: var(--radius-btn); padding: 0 16px; min-height: var(--btn-h);
}
textarea { padding-block: 14px; min-height: 110px; }
input::placeholder, textarea::placeholder { color: var(--c-placeholder); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--c-primary); box-shadow: var(--focus-ring); }
label { font-size: var(--fs-small); font-weight: 500; color: var(--c-text); }

/* Header: logo, address, phone with hours, booking button; the menu bar below scrolls away */
header.top {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 9; background: var(--c-bg);
  transition: box-shadow var(--t-fast);
}
header.top.is-stuck { box-shadow: var(--shadow-header); }
.top .wrap { display: flex; align-items: center; gap: 12px 32px; min-height: 84px; }
.logo { display: block; flex-shrink: 0; }
.logo img { display: block; height: 44px; width: auto; }
@media (max-width: 520px) { .logo img { height: 34px; } }
.top-addr { font-size: var(--fs-small); line-height: 1.4; color: var(--c-text); margin-left: auto; }
.top-call { display: grid; gap: 2px; }
.top .phone { font: 700 20px/1.1 var(--font); color: var(--c-heading); text-decoration: none; white-space: nowrap; }
.top-call small { white-space: nowrap; }
.top .btn { white-space: nowrap; text-transform: lowercase; }
nav.menu { border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); background: var(--c-bg); }
nav.menu .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 20px; min-height: 56px; align-items: center; }
nav.menu a { font: 700 16px/1.2 var(--font); color: var(--c-heading); text-decoration: none; white-space: nowrap; padding-block: 12px; }
/* Yandex rating in the header: fills the space left of the phone where the address does not fit */
.top-rate { display: none; gap: 2px; text-decoration: none; color: var(--c-text); white-space: nowrap; }
.top-rate b { font: 700 20px/1.1 var(--font); color: var(--c-heading); }
.top-rate b span { color: var(--c-star); }
.top-rate small { font-size: var(--fs-small); color: var(--c-text-2); }
nav.menu a:hover, nav.menu a[aria-current] { color: var(--c-primary); }

/* Section heading: centred H2 caps, centred subtitle */
.sec-head { display: grid; justify-items: center; text-align: center; gap: 24px; grid-template-columns: 1fr; margin-bottom: 44px; }
.sec-head > div { display: grid; justify-items: center; gap: 12px; }
.sec-head p { color: var(--c-text); max-width: 64ch; }
.h2 { font-size: var(--fs-h2); font-weight: 800; margin-top: 0; }
.eyebrow { font: 500 var(--fs-small)/1.2 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--c-primary); }
section.block { padding-block: var(--section-y); }
.band { background: var(--c-bg-soft); }

/* Service cards: cyan tint fading to white toward the top-left corner */
.services { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--gutter); }
.svc {
  grid-template-columns: 1fr; align-content: start; gap: 12px; padding: var(--card-pad); border: 0;
  border-radius: var(--radius-card); background: linear-gradient(135deg, var(--c-bg) 0%, var(--c-cyan-50) 70%);
}
.svc h3 { font-size: var(--fs-h3); line-height: 1.15; font-weight: 700; hyphens: auto; overflow-wrap: break-word; }
.svc .price {
  display: inline-flex; align-items: center; justify-self: start; grid-row: auto; border-radius: var(--radius-btn);
  background: var(--c-primary); color: var(--c-on-primary); font: 400 18px/1 var(--font); white-space: nowrap;
}
.svc p { color: var(--c-text-2); }
.tag, .chip { border-radius: var(--radius-btn); background: var(--c-bg); border: 1px solid var(--c-border); color: var(--c-primary); text-decoration: none; }
.tag { font-size: var(--fs-small); padding: 6px 10px; }
.chip:hover, .tag:hover { border-color: var(--c-primary); }
.from { display: inline-flex; align-items: center; gap: 10px; border-radius: var(--radius-btn); background: var(--c-primary); }
.from span, .from b { color: var(--c-on-primary); }
.from b { font: 700 var(--fs-h4)/1 var(--font); }

/* Doctor cards: soft background, shadow, name on two lines */
.docs { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--gutter); }
.doc { display: grid; grid-template-rows: auto 1fr; gap: 0; background: var(--c-bg-soft) var(--bg-lowpoly) center / cover; /* low-poly texture under the transparent photo, as on the live site */ box-shadow: var(--shadow-card); border-radius: var(--radius-card); min-width: 0; }
.doc-pic { display: block; text-decoration: none; }
.doc .photo, .doc .avatar { width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: cover; object-position: center top; border: 0; border-radius: var(--radius-card) var(--radius-card) 0 0; background: none; display: block; }
.doc .avatar { display: grid; place-items: center; }
/* Photos are cut off at the right edge with the doctor right of centre (head at ~62% of the width on every photo):
   on the doctor card and the doctor page the photo is shifted left so the face is centred on the texture,
   and the cut-off shoulder fades into it */
.doc, .profile-pic { overflow: hidden; }
.doc .photo, .profile-pic .photo { transform: translateX(-12%); -webkit-mask-image: linear-gradient(to left, transparent, #000 10%); mask-image: linear-gradient(to left, transparent, #000 10%); }
.profile-pic { border-radius: var(--radius-card); background: var(--c-bg-soft) var(--bg-lowpoly) center / cover; }
.profile .profile-pic .photo { display: block; max-width: 100%; border-radius: 0; background: none; }
/* One column (phones, narrow tablets): the texture spans the content width and the photo sits in its centre */
@media (max-width: 760px) {
  .profile-pic { display: flex; justify-content: center; }
  .profile .profile-pic .photo { width: min(100%, 340px); max-width: none; }
}
/* PC: the wide banner photo spans the whole hero (clinic behind, doctor on the right, shoulders whole) and the card sits
   over its light left part, as on the old site. The hero grows with the card, the photo covers it.
   Below 1200px the card gets smaller type instead of moving off the photo. */
@media (min-width: 761px) {
  section.doctor-hero.has-wide { position: relative; isolation: isolate; overflow: hidden; margin-top: 8px; padding-block: clamp(40px, 4vw, 64px); min-height: clamp(480px, 33vw, 626px); display: flex; align-items: center; box-sizing: border-box; }
  .doctor-hero.has-wide .wrap { width: 100%; }
  .doctor-hero.has-wide .profile { grid-template-columns: minmax(0, 680px); }
  .doctor-hero.has-wide .profile-pic { position: absolute; inset: 0; z-index: -1; border-radius: 0; background: none; }
  .doctor-hero.has-wide .profile-pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgb(255 255 255 / .82), rgb(255 255 255 / .55) 38%, transparent 58%); }
  .doctor-hero.has-wide .profile-pic picture { display: contents; }
  .doctor-hero.has-wide .profile-pic .photo { width: 100%; height: 100%; max-width: none; aspect-ratio: auto; object-fit: cover; object-position: right top; border: 0; border-radius: 0; transform: none; -webkit-mask-image: none; mask-image: none; }
}
/* PC/tablet with an ordinary portrait (square, e.g. uploaded in the admin): the photo stands at the right edge of the hero,
   full height, on a background of the photo's own corner colour (--hero-bg, set by build.py) so its edges disappear;
   a transparent cut-out gets the low-poly texture instead. */
@media (min-width: 761px) {
  section.doctor-hero.has-portrait { margin-top: 8px; padding-block: 0; min-height: clamp(380px, 32vw, 560px); display: flex; background: var(--c-bg-soft) var(--bg-lowpoly) center / cover; }
  section.doctor-hero.has-portrait[style] { background: var(--hero-bg); }
  .doctor-hero.has-portrait .wrap { width: 100%; }
  .doctor-hero.has-portrait .profile { grid-template-columns: minmax(0, 1fr) minmax(0, 44%); align-items: stretch; gap: 24px; }
  .doctor-hero.has-portrait .profile-card { align-self: center; padding-block: clamp(32px, 4vw, 64px); }
  .doctor-hero.has-portrait .profile-pic { position: relative; border-radius: 0; background: none; }
  .doctor-hero.has-portrait .profile-pic picture { display: contents; }
  .doctor-hero.has-portrait .profile-pic .photo { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; aspect-ratio: auto; object-fit: contain; object-position: right bottom; border: 0; border-radius: 0; background: none; transform: none; --fade-x: linear-gradient(to right, transparent, #000 12%, #000 90%, transparent); --fade-y: linear-gradient(transparent, #000 12%);
    -webkit-mask-image: var(--fade-x), var(--fade-y); -webkit-mask-composite: source-in; mask-image: var(--fade-x), var(--fade-y); mask-composite: intersect; }
}
/* Phones: an opaque portrait sits on its own background colour, unshifted, instead of the cut-out's texture and fade */
@media (max-width: 760px) {
  .doctor-hero.has-portrait[style] .profile-pic { background: var(--hero-bg); }
  .doctor-hero.has-portrait[style] .profile-pic .photo { transform: none; -webkit-mask-image: none; mask-image: none; }
}
@media (min-width: 761px) and (max-width: 1199px) {
  /* Tablets and small laptops: the same photo with a smaller card, so the hero stays low and the card keeps clear of the doctor */
  section.doctor-hero.has-wide { min-height: 0; padding-block: 40px; }
  .doctor-hero.has-wide .profile { grid-template-columns: minmax(0, 50%); }
  section.doctor-hero.has-portrait { min-height: 0; }
  .doctor-hero.has-portrait .profile-card { padding-block: 28px; }
  .doctor-hero.has-portrait .profile-pic { min-height: 240px; }
  .doctor-hero:is(.has-wide, .has-portrait) .profile-card { gap: 0; }
  .doctor-hero:is(.has-wide, .has-portrait) .eyebrow { font-size: 12px; }
  .doctor-hero:is(.has-wide, .has-portrait) .profile h1 { font-size: clamp(24px, 3.1vw, 34px); margin-block: 8px 12px; }
  .doctor-hero:is(.has-wide, .has-portrait) .profile .facts { margin-top: 0; font-size: 14px; }
  .doctor-hero:is(.has-wide, .has-portrait) .facts div { padding: 8px 0; gap: 12px; }
  .doctor-hero:is(.has-wide, .has-portrait) .profile .actions { margin-top: 14px; gap: 8px; }
  .doctor-hero:is(.has-wide, .has-portrait) .actions .btn { min-height: 44px; padding-inline: 18px; font-size: 15px; }
}
/* Колонка: кнопки прижаты к низу, поэтому в ряду карточек они на одной линии при ФИО разной длины */
.doc-body { display: flex; flex-direction: column; gap: 8px; padding: var(--card-pad); }
.doc-body > .rating { align-self: flex-start; }
.doc h2, .doc h3 { font: 700 var(--fs-h3)/1.15 var(--font); letter-spacing: var(--ls-heading); text-transform: none; color: var(--c-text); hyphens: auto; overflow-wrap: break-word; }
.doc h2 a, .doc h3 a { text-decoration: none; color: inherit; }
.doc h2 a:hover, .doc h3 a:hover { color: var(--c-primary); }
.doc p { color: var(--c-text-2); font-size: var(--fs-body); }
.doc .exp { font: 700 var(--fs-body)/1.4 var(--font); color: var(--c-text); }
.doc .rating { font: 400 var(--fs-body)/1.4 var(--font); color: var(--c-primary); text-decoration: none; }
.doc .rating span { color: var(--c-star); }
.doc .rating:hover { text-decoration: underline; }
.doc-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: auto; padding-top: 8px; max-width: 420px; }
.doc-actions .btn { padding-inline: 8px; font-size: 16px; white-space: nowrap; }
.avatar { display: grid; place-items: center; font: 800 var(--fs-h1)/1 var(--font); color: var(--c-primary); }

/* Promotions */
.promos { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: var(--gutter); }
.promo { border: 0; background: var(--c-bg-soft); border-radius: var(--radius-card); padding: var(--card-pad); }
.promo b { font: 800 var(--fs-h1)/1 var(--font); color: var(--c-primary); }
.promo h3 { font-size: var(--fs-h3); }
.promo p { color: var(--c-text-2); }

/* Cases: 2:3 portrait on black, name in yellow caps over a dark fade */
.cases { gap: var(--gutter); }
.case { display: grid; gap: 12px; align-content: start; min-width: 0; }
.case-pic { position: relative; background: var(--c-heading); }
.case-pic img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: var(--radius-card); }
.case-pic::after { content: ""; position: absolute; inset: 0; background: var(--overlay-dark); pointer-events: none; }
.case-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 20px; display: grid; gap: 4px; }
.case-cap h2, .case-cap h3 { font: 500 21px/1.2 var(--font); text-transform: uppercase; color: var(--c-accent-yellow); }
.case-cap a { color: inherit; text-decoration: none; }
.case-cap a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.case-cap a:focus-visible { box-shadow: none; }
.case-cap a:focus-visible::after { box-shadow: inset var(--focus-ring); }
.case-cap span { color: var(--c-on-primary); font-size: var(--fs-small); }
.case p { color: var(--c-text-2); font-size: var(--fs-small); }

/* Reviews: white cards on the soft background, two per row */
#reviews, .reviews-page { background: var(--c-bg-soft); }
section.block.tight#reviews { padding-top: var(--section-y); }
.reviews { gap: var(--gutter); }
.review { background: var(--c-bg); padding: var(--card-pad); border: 0; border-radius: var(--radius-card); }
.stars { color: var(--c-star); }

/* FAQ: full-width rows, question left, "+" right, open row on the soft background */
.faq { display: grid; border-top: 1px solid var(--c-border); }
.faq details { border-bottom: 1px solid var(--c-border); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 22px 20px; font: 400 var(--fs-h4)/1.3 var(--font); color: var(--c-text);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 300 32px/1 var(--font); color: var(--c-primary); flex: none; transition: transform var(--t-fast); }
.faq details[open] { background: var(--c-bg-soft); }
.faq details[open] summary { font-weight: 700; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 20px 22px; color: var(--c-text); max-width: 80ch; }

/* Booking banner: aqua, form and contacts in two columns */
section.booking { background: var(--c-aqua); }
section.block.tight.band + section.booking, section.booking { padding-block: var(--section-y); }
.booking .book { gap: var(--gutter); }
.booking form.card { background: transparent; border: 0; padding: 0; gap: 16px; }
.booking form.card h2 { font-size: var(--fs-h2); margin-top: 8px; }
.booking .eyebrow, .booking label, .booking .note, .booking .note a { color: var(--c-text); }
.contacts { background: var(--c-bg); border: 1px solid var(--c-border-strong); border-radius: var(--radius-card); padding: var(--card-pad); }
.contacts dt { font: 400 16px/1.3 var(--font); letter-spacing: 0; text-transform: none; color: var(--c-text-2); margin-bottom: 4px; }
.contacts dd { font: 700 20px/1.35 var(--font); color: var(--c-text); }
.contacts .num { font: 700 var(--fs-h3)/1.1 var(--font); color: var(--c-heading); }
.contacts .map { font-size: var(--fs-body); font-weight: 400; color: var(--c-primary); }
.copy { font: 400 var(--fs-small)/1 var(--font); min-height: 32px; padding: 0 12px; border-radius: var(--radius-btn); border: 1px solid var(--c-border); background: var(--c-bg); color: var(--c-text-2); }
.form-msg { background: var(--c-bg); border-radius: var(--radius-btn); }

/* Panels on inner pages */
.panel, .kids-card { background: var(--c-bg-soft); border: 0; border-radius: var(--radius-card); padding: var(--card-pad); }

/* "Show all" links: grey plate with a dotted line across the block */
.more, .svc .more, .kids .more { color: var(--c-primary); }

/* Footer: logo with disclaimer, two link columns, contacts */
footer { background: var(--c-bg-soft); padding-block: 56px 32px; color: var(--c-text-2); font-size: var(--fs-small); }
footer .wrap { display: grid; gap: 32px; }
footer .cols { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: 32px var(--gutter); }
.foot-brand { display: grid; gap: 16px; align-content: start; }
footer h2 { font: 700 16px/1.2 var(--font); letter-spacing: 0; text-transform: none; color: var(--c-heading); margin-bottom: 14px; }
footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
footer ul a { color: var(--c-text-2); text-decoration: none; font-size: var(--fs-body); display: inline-block; padding: 2px 0; }  /* 24 px высоты: минимум WCAG 2.2 для нажатия */
footer ul a:hover { color: var(--c-primary); }
footer address { font-style: normal; display: grid; gap: 8px; color: var(--c-text); font-size: var(--fs-body); }
footer address a { color: var(--c-text); text-decoration: none; }
footer .foot-phone { font: 700 20px/1.2 var(--font); color: var(--c-heading); }
footer .legal { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; border-top: 1px solid var(--c-border); padding-top: 20px; color: var(--c-text-2); }
footer .legal a { color: var(--c-text-2); }
@media (max-width: 1023px) { footer .cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) { footer .cols { grid-template-columns: 1fr; } }

/* ---------- Home page ---------- */
.hero { padding-block: 0; background: var(--c-bg); }
.hero-banner { display: flex; flex-direction: column; }
.hero-banner .wrap { padding-block: clamp(40px, 6vw, 80px) 0; }
.hero-grid { grid-template-columns: minmax(0, 1fr); }
/* Team photo. On phones it goes under the buttons, cropped to the team; on wider screens it is the banner
   behind the text, centred at the bottom like on the old site, with the faded office on the left under the text */
.hero-team { order: 2; width: 100%; height: auto; aspect-ratio: 973 / 626; object-fit: cover; object-position: 100% 100%; margin-top: 32px; }
@media (min-width: 861px) {
  .hero-banner { position: relative; min-height: clamp(490px, 42vw, 626px); justify-content: center; }
  .hero-banner .wrap { position: relative; width: 100%; padding-block: 56px; }
  .hero-banner .hero-grid > div { max-width: 42%; }
  /* Smaller heading and lead keep the banner about as tall as the photo, so it is not zoomed in */
  .hero .hero-banner h1 { font-size: clamp(1.75rem, 2.6vw, 2.75rem); max-width: 17ch; }
  .hero .hero-banner .lead { font-size: var(--fs-body); max-width: 40ch; margin-top: 16px; }
  /* Компактный первый экран: высота баннера не больше фото коллектива (58vw · 626/973), иначе над фото пустая полоса */
  .hero-banner .wrap { padding-block: 40px; }
  .hero-banner { min-height: clamp(420px, 37.3vw, 626px); }
  .hero-banner .hero-grid > div { max-width: 46%; }
  .hero .hero-banner .actions { margin-top: 24px; }
  .hero-banner .award--hero { margin-top: 20px; }
  .hero h1 .kicker { white-space: nowrap; }
  /* The team keeps its whole width at the bottom right: at most 58% of the screen, at most the banner height.
     The edges fade into the banner colour, which matches the photo background */
  .hero-banner { background: var(--hero-banner-bg); }
  .hero-team { position: absolute; right: 0; bottom: 0; width: auto; height: min(100%, 58vw * 626 / 973); margin: 0;
    -webkit-mask-image: linear-gradient(to right, transparent, black 12%), linear-gradient(to bottom, transparent, black 10%);
    -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, black 12%), linear-gradient(to bottom, transparent, black 10%);
    mask-composite: intersect; }
}
}
.hero h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); font-weight: 800; color: var(--c-hero-heading); max-width: 18ch; margin-top: 16px; }
.hero h1 em { font-style: normal; color: var(--c-primary); }
/* Название и город остаются в H1 для поиска, но одной строкой мелкого надзаголовка: первый экран ниже */
.hero h1 .kicker { font: 600 var(--fs-small)/1.3 var(--font); text-transform: uppercase; letter-spacing: .08em; color: var(--c-text-2); margin-bottom: 14px; }
.hero .lead { font-size: var(--fs-lead); line-height: 1.3; color: var(--c-text-2); max-width: 40ch; margin-top: 24px; }
.hero .actions { margin-top: 32px; }
/* Две короткие кнопки одинаковой ширины в один ряд на любом экране */
.hero .actions .btn { min-width: 160px; }
@media (max-width: 599px) {
  .hero .actions { flex-wrap: nowrap; align-self: stretch; }
  .hero .actions .btn { flex: 1; min-width: 0; padding-inline: 12px; }
}
/* Телефон: меньше воздуха между шапкой, текстом и фото, чтобы фото коллектива целиком влезало
   над нижней панелью на первом экране (iPhone 15 Pro Max в Safari) */
@media (max-width: 520px) {
  .hero-banner .wrap { padding-top: 22px; }
  .hero .hero-banner h1 { margin-top: 0; }
  .hero .hero-banner .lead { margin-top: 16px; }
  .hero-banner .hero-team { margin-top: 22px; }
}
.ico { flex: none; color: var(--c-primary); }

/* Number strip under the first screen: six items, dotted vertical dividers */
.facts.strip {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; margin: clamp(40px, 6vw, 64px) 0 0;
  border: 0; padding-block: 28px; border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border);
}
.facts.strip div { display: grid; align-content: start; gap: 6px; padding: 0 20px; border: 0; border-left: 2px dotted var(--c-border-strong); }
.facts.strip div:first-child { border-left: 0; padding-left: 0; }
.facts.strip dt { display: grid; gap: 12px; color: var(--c-text-2); font-size: var(--fs-small); line-height: 1.4; }
.facts.strip dd { text-align: left; font: 700 var(--fs-body)/1.3 var(--font); color: var(--c-text); }
.facts.strip .ico { width: 36px; height: 36px; }
@media (max-width: 1023px) {
  .facts.strip { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; }
  .facts.strip div:nth-child(3n + 1) { border-left: 0; padding-left: 0; }
}
@media (max-width: 767px) {
  .facts.strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts.strip div { padding: 0 12px; }
  .facts.strip div:nth-child(3n + 1) { border-left: 2px dotted var(--c-border-strong); padding-left: 12px; }
  .facts.strip div:nth-child(2n + 1) { border-left: 0; padding-left: 0; }
}

/* Tooth formula */
.formula { border-top: 0; }
.tooth { border-radius: var(--radius-btn); background: var(--c-bg); font: 500 var(--fs-small)/1 var(--font); }
.tooth:hover { transform: none; }
.tooth-out b { font: 800 var(--fs-h3)/1 var(--font); }

/* Treatment steps: four columns on the soft band */
.steps { gap: var(--gutter); }
.steps li { border-top: 2px solid var(--c-primary); }
.steps li::before { font: 500 var(--fs-small)/1 var(--font); letter-spacing: .08em; color: var(--c-text-2); }
.steps h3 { font: 500 var(--fs-h4)/1.3 var(--font); }
.steps p { color: var(--c-text-2); }

/* Kids */
.kids-card .big { font: 800 clamp(64px, 9vw, 96px)/.9 var(--font); color: var(--c-primary); }
.kids-card .big small { font-size: var(--fs-h4); font-weight: 700; color: var(--c-text); }
.kids li b { font: 700 var(--fs-body)/1.5 var(--font); }
.kids .sec-like, .kids .h2 { text-align: left; }

/* Ratings above the reviews */

/* Labels above H2: grey caps, not a second accent colour */
.eyebrow { color: var(--c-text-2); }
footer .small, footer .legal, footer .legal a { color: var(--c-text-2); }

/* ---------- Inner pages ---------- */
.page-hero { background: var(--c-bg); border-bottom: 1px solid var(--c-border); }
.page-hero h1 { font-size: var(--fs-h1); margin-top: 12px; }
.page-hero .lead { font-size: var(--fs-h4); line-height: 1.4; color: var(--c-text-2); }
.page-hero .facts div { border-color: var(--c-border); }
.crumbs { font-size: var(--fs-small); }
.crumbs li + li::before { color: var(--c-border-strong); }
.profile .photo, .profile .avatar { border: 0; border-radius: var(--radius-card); background: var(--c-bg-soft) var(--bg-lowpoly) center / cover; }
.profile h1 { font-size: clamp(32px, 4.4vw, 52px); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.actions--after { margin-top: 32px; }
.price-list { padding-top: 36px; }
.price-chips { margin-bottom: 36px; }
.sub-h2 { margin: 48px 0 16px; font-size: var(--fs-h4); text-align: left; }
.prose h2 { font-size: var(--fs-h3); line-height: 1.2; margin-top: 18px; }
.prose h3 { font: 700 var(--fs-h4)/1.3 var(--font); }
.article .prose h2 { font-size: var(--fs-h4); }
.article .prose h3, .equip .prose h4 { font: 500 var(--fs-h4)/1.3 var(--font); }
.panel h2, .panel h3 { font: 700 16px/1.3 var(--font); text-transform: uppercase; letter-spacing: .02em; color: var(--c-heading); }
.panel .phone { font: 700 20px/1.3 var(--font); color: var(--c-heading); }
.prices caption, .group-head h2, .price-sec > h2, .doc-group > h2 { text-align: left; }
.prices td { font: 700 var(--fs-body)/1.5 var(--font); }
.prices .code { font: 400 var(--fs-small)/1.4 var(--font); color: var(--c-text-2); }
.prices tr.group th { font: 700 var(--fs-small)/1.2 var(--font); color: var(--c-primary); }
.portal { border-radius: var(--radius-card); border: 0; background: var(--c-bg-soft); }
.portal b { font: 800 var(--fs-h3)/1 var(--font); }
.files .ext { font: 700 12px/1 var(--font); border-radius: var(--radius-btn); }
.equip .shot img, .shot img, .article-img { border-radius: var(--radius-card); }
.equip .prose h3 { font: 700 var(--fs-h3)/1.2 var(--font); text-transform: none; }
.shot figcaption { font: 500 var(--fs-small)/1 var(--font); border-radius: var(--radius-btn); }

/* ---------- Blocks from the guideline (phase 4.5) ---------- */
/* Socials: filled circles in the platform colour */
.soc { display: inline-flex; gap: 8px; }
.soc a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--c-on-primary); text-decoration: none; }
.soc b { font: 800 13px/1 var(--font); }
.soc-vk { background: var(--c-vk); }
.soc-max { background: linear-gradient(135deg, #3b6cf6, var(--c-max) 50%, #9a3fc8); } /* the Max logo gradient, as on the old site */
.soc-tg { background: var(--c-telegram); }
.soc a:hover { filter: brightness(1.1); }
/* Messenger booking buttons */
/* Две кнопки одной ширины и высоты в один ряд, как нижняя панель телефона */
.msgr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 440px; }
.msgr .btn { padding-inline: 12px; }
@media (max-width: 380px) { .msgr .btn { font-size: 17px; gap: 8px; } .msgr .msgr-ico { width: 30px; height: 30px; } }
.btn--max, .btn--tg, .btn--vk { color: var(--c-on-primary); border-color: transparent; gap: 10px; font-weight: 700; font-size: 19px; } /* large text: white on Telegram blue passes 3:1 */
.btn--max { background: var(--c-max); }
.btn--tg { background: var(--c-telegram); }
.btn--vk { background: var(--c-vk); }
.btn--max:hover, .btn--tg:hover, .btn--vk:hover { filter: brightness(1.1); }
.btn--max:hover { background: var(--c-max); }
.btn--tg:hover { background: var(--c-telegram); }
.btn--vk:hover { background: var(--c-vk); }
.contacts-msgr { display: grid; gap: 14px; }
.contacts-msgr h3 { font-size: var(--fs-h4); }
/* Header extras: phone icon and burger appear on small screens (phase 5) */
.top-tel, .burger { display: none; }
.burger { background: none; border: 0; padding: 8px; color: var(--c-heading); cursor: pointer; border-radius: var(--radius-btn); }
.top-tel { color: var(--c-primary); padding: 8px; }

/* Why patients choose us: 4 columns with line icons */
.why { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); }
.why li { display: grid; gap: 14px; align-content: start; justify-items: center; text-align: center; }
.why .ico { color: var(--c-primary); }
.why h3 { font-size: var(--fs-h4); }
.why p { color: var(--c-text-2); }

/* About: video and text in two columns */
.about { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); align-items: center; }
.about-video { position: relative; background: var(--c-heading); }
.about-video video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.about-text { display: grid; gap: 16px; }
.about-text p { color: var(--c-text-2); }
.play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 56px; height: 56px; border-radius: 50%; background: var(--overlay-play); color: var(--c-on-primary); display: grid; place-items: center; pointer-events: none; transition: opacity var(--t-fast); }
.play .ico { fill: currentColor; translate: 2px 0; }
.is-playing .play { opacity: 0; }

/* Promo cards over a photo */
.promo { position: relative; overflow: hidden; display: grid; }
.promo--pic { min-height: 360px; padding: 0; background: var(--c-heading); align-content: end; }
.promo--pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.promo--pic::after { content: ""; position: absolute; inset: 0; background: var(--overlay-strong); }
.promo-body { display: grid; gap: 8px; }
.promo--pic .promo-body { position: relative; z-index: 1; padding: var(--card-pad); }
.promo--pic h3 { color: var(--c-accent-yellow); text-transform: uppercase; }
.promo--pic p { color: var(--c-on-primary); }
.promo--pic b { color: var(--c-on-primary); }

/* Advantages: low-poly cards joined by "+" */
section.lowpoly { background: var(--c-bg-soft) var(--bg-lowpoly) center / cover; }
.adv { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; counter-reset: adv; }
.adv li { position: relative; aspect-ratio: 4 / 5; background: var(--c-bg); padding: var(--card-pad); display: grid; gap: 12px; align-content: center; text-align: center; }
.adv li + li::before { content: "+"; position: absolute; left: -32px; top: 50%; translate: 0 -50%; font: 800 32px/1 var(--font); color: var(--c-primary); }
.adv h3 { font-size: var(--fs-h4); }
.adv p { color: var(--c-text-2); font-size: var(--fs-small); }

/* Equipment: three square photos and a "see all" plate */
.eq-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; gap: var(--gutter); }
.eq-card { display: grid; gap: 12px; text-decoration: none; color: var(--c-text); font-weight: 700; }
.eq-card img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block; background: var(--c-bg-soft); }
.eq-card:hover span { color: var(--c-primary); }
.eq-more { aspect-ratio: 1 / 1; display: grid; place-content: center; justify-items: center; gap: 12px; padding: var(--card-pad); text-align: center; background: var(--c-primary); color: var(--c-on-primary); text-decoration: none; font: 700 var(--fs-h4)/1.3 var(--font); }
.eq-more:hover { background: var(--c-primary-hover); }

/* Carousels: scroll-snap track with round arrows */
.carousel { position: relative; }
#videos .actions--after { justify-content: center; }
.track { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.track::-webkit-scrollbar { display: none; }
.track > li { scroll-snap-align: start; position: relative; }
.track--2 { grid-auto-columns: calc((100% - 24px) / 2); }
.track--5 { grid-auto-columns: calc((100% - 4 * 24px) / 5); }
.track--2 img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.track--5 video { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; background: var(--c-heading); }
.vid { position: relative; }
.vid-name { margin-top: 12px; font: 600 var(--fs-body)/1.35 var(--font); color: var(--c-heading); }
/* Расшифровка видео из субтитров (.vtt): свёрнута, текст доступен поисковикам и тем, кто не может слушать */
details.transcript { margin-top: 8px; }
details.transcript summary { cursor: pointer; color: var(--c-primary); font-weight: 600; }
details.transcript p { margin-top: 8px; color: var(--c-text-2); max-height: 16em; overflow-y: auto; }
.track--docs { grid-auto-columns: calc((100% - 3 * 24px) / 4); }
.track--docs a { display: grid; place-items: center; height: 100%; aspect-ratio: 4 / 3; padding: 12px; background: var(--c-bg-soft); border: 1px solid var(--c-border); border-radius: var(--radius-card); cursor: zoom-in; }
.track--docs img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
.track--docs a:hover { border-color: var(--c-primary); }
.arrow { position: absolute; top: 50%; translate: 0 -50%; width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--c-bg); color: var(--c-heading); box-shadow: var(--shadow-header); display: grid; place-items: center; cursor: pointer; }
.arrow:hover { color: var(--c-primary); }
.arrow:disabled { opacity: .4; cursor: default; }
.arrow.prev { left: -24px; } .arrow.next { right: -24px; }

/* Services catalogue: photo on top of the card */
.svc--pic .svc-pic { width: calc(100% + 2 * var(--card-pad)); margin: calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)) 8px; height: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block; }

/* Booking banner texture */
section.booking { background: var(--c-aqua) var(--bg-lowpoly-plan) center / cover; }

/* Map on /kontakty/ */
.map-wrap { line-height: 0; }
.map-frame { display: block; width: 100%; height: clamp(320px, 33vw, 480px); border: 0; }
/* На телефоне вместо виджета Яндекса (около 3 МБ и сторонние cookie) картинка карты; виджет грузится по нажатию.
   На компьютере site.js ставит виджет сразу */
.map-wrap { scroll-margin-top: 96px; }
.map-facade { position: relative; display: block; height: clamp(320px, 33vw, 480px); overflow: hidden; background: var(--c-bg-soft); }
.map-facade img { display: block; width: 100%; height: 100%; object-fit: cover; }
.map-facade .map-cta { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); white-space: nowrap; line-height: 1.2; }
.addr { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; }
.addr:hover { color: var(--c-primary); }
picture { display: contents; }

/* Callback dialog */
.modal { border: 0; padding: 0; max-width: min(480px, calc(100% - 32px)); width: 100%; border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.modal::backdrop { background: var(--scrim); }
.modal-box { position: relative; display: grid; gap: 16px; padding: 40px var(--card-pad) var(--card-pad); }
.modal-box h2 { font-size: var(--fs-h3); }
.modal-box label { display: grid; gap: 6px; }
.modal-box .small a { color: var(--c-primary); }
.modal-x { position: absolute; right: 8px; top: 8px; background: none; border: 0; padding: 8px; cursor: pointer; color: var(--c-text-2); }

/* Document viewer: full-screen scan, arrows and swipe between scans, tap to see it at full size */
.zoom { border: 0; padding: 0; margin: 0; width: 100%; height: 100%; max-width: none; max-height: none; background: #10151d; color: #fff; overflow: hidden; }
.zoom::backdrop { background: rgba(15, 20, 28, .94); }
.zoom-stage { position: absolute; inset: 56px 0 0; overflow: auto; display: grid; place-items: center; overscroll-behavior: contain; touch-action: pan-x pan-y pinch-zoom; }
.zoom-stage img { max-width: calc(100% - 24px); max-height: calc(100% - 16px); width: auto; height: auto; background: #fff; cursor: zoom-in; }
.zoom.is-big .zoom-stage { place-items: start; }
.zoom.is-big .zoom-stage img { max-width: none; max-height: none; width: min(1600px, 220vw); cursor: zoom-out; }
.zoom-bar { position: absolute; left: 0; right: 0; top: 0; height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 8px 0 16px; font-size: var(--fs-small); }
.zoom-x { background: none; border: 0; color: inherit; padding: 12px; cursor: pointer; }
.zoom .arrow { z-index: 1; display: grid; }
@media (max-width: 767px) { .zoom .arrow { top: auto; bottom: 16px; translate: none; } }
.zoom .arrow.prev { left: 12px; } .zoom .arrow.next { right: 12px; }
.zoom.is-big .arrow { display: none; }

/* Cookie banner */
.cookie { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 30; max-width: 720px; margin: 0 auto; background: var(--c-bg); box-shadow: var(--shadow-header); padding: 16px 20px; display: flex; gap: 16px; align-items: center; font-size: var(--fs-small); }
.cookie[hidden] { display: none; }
.cookie a { color: var(--c-primary); }

/* Back to top */
.to-top { position: fixed; right: 16px; bottom: 16px; z-index: 25; width: 48px; height: 48px; border-radius: 50%; background: var(--c-primary); color: var(--c-on-primary); display: grid; place-items: center; opacity: 0; visibility: hidden; transition: opacity var(--t-fast); }
.to-top.is-shown { opacity: 1; visibility: visible; }
.to-top .ico { color: inherit; }

@media (max-width: 1023px) {
  .why, .adv { grid-template-columns: repeat(2, 1fr); }
  .adv li:nth-child(odd)::before { display: none; }
  .eq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .track--5 { grid-auto-columns: calc((100% - 2 * 24px) / 3); }
  .track--docs { grid-auto-columns: calc((100% - 2 * 24px) / 3); }
  .about { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .why, .adv { grid-template-columns: 1fr; }
  .adv li { aspect-ratio: auto; }
  .adv li::before { display: none; }
  .track--2 { grid-auto-columns: 85%; }
  .track--docs { grid-auto-columns: 75%; }
  .case-pic img { aspect-ratio: 4 / 5; }
  .track--5 { grid-auto-columns: 60%; }
  .arrow { display: none; }
  .cookie { flex-direction: column; align-items: stretch; }
}
@media (max-width: 1279px) {
  .arrow.prev { left: 8px; } .arrow.next { right: 8px; }
  .top .top-addr { display: none; }
  .top-rate { display: grid; margin-left: auto; }
  .top .wrap { gap: 12px 20px; }
  nav.menu .wrap { gap: 4px 14px; }
  nav.menu a { font-size: 15px; }
}
/* Header on tablets and phones: logo, phone icon and burger; the menu opens below */
@media (max-width: 1023px) {
  .top .wrap { min-height: 64px; gap: 8px; }
  .top .top-call, .top > .wrap > .btn, .top .soc { display: none; }
  .top-tel { display: grid; margin-left: auto; }
  .burger { display: grid; }
  /* Tablets have room for the phone number and messengers, wider ones also for the rating */
  @media (min-width: 680px) {
    .top .wrap { gap: 16px; }
    .top .top-call, .top .soc { display: grid; }
    .top .soc { display: inline-flex; }
    .top-tel { display: none; }
    .top .top-call { margin-left: auto; }
  }
  @media (min-width: 680px) and (max-width: 859px) { .top-rate { display: none; } }
  @media (min-width: 680px) and (max-width: 759px) { .top-call small { display: none; } }
  @media (min-width: 860px) { .top .top-call { margin-left: 0; } }
  @media (max-width: 679px) { .top-rate { display: none; } }
  nav.menu { display: none; }
  nav.menu.is-open { display: block; position: fixed; left: 0; right: 0; z-index: 20; max-height: calc(100dvh - 64px); overflow-y: auto; box-shadow: var(--shadow-header); }
  .burger[aria-expanded="true"] { color: var(--c-primary); background: var(--c-cyan-50); }
  nav.menu .wrap { flex-direction: column; align-items: stretch; gap: 0; }
  nav.menu a { border-bottom: 1px solid var(--c-border); }
}
@media (max-width: 520px) { .cookie, .to-top { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } }
/* Inline links in cards get a 44px hit area without moving the layout */
.doc .rating, .review figcaption a { padding-block: 11px; margin-block: -11px; }

/* Price search: result counter replaces the section chips while typing */
.price-chips[hidden] { display: none; }
.found { font-weight: 700; color: var(--c-text); margin-block: 16px; }
/* Honeypot field for bots, hidden from people and screen readers */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
/* Sent request: the confirmation stands out so the cleared form does not look like a failure */
.form-msg.is-done { background: var(--c-primary); color: var(--c-on-primary); font-weight: 700; padding: 16px 18px; }
/* Sent notice: shown over the dimmed page for 2 seconds, then fades out by itself */
.sent { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 16px; background: var(--scrim); opacity: 0; visibility: hidden; transition: opacity var(--t-fast), visibility var(--t-fast); }
.sent.is-shown { opacity: 1; visibility: visible; }
.sent p { max-width: 480px; margin: 0; padding: 24px 28px; border-radius: var(--radius-btn); background: var(--c-primary); color: var(--c-on-primary); font: 700 var(--fs-h4)/1.4 var(--font); box-shadow: var(--shadow-card); }

/* Типовая смета на курс ортодонтического лечения: несколько вариантов в колонках */
.estimate thead th, .estimate thead td { font: 700 var(--fs-small)/1.3 var(--font); color: var(--c-text-2); text-align: right; padding: 0 0 10px 16px; border-top: 0; white-space: normal; vertical-align: bottom; }
.estimate td { padding-left: 16px; }
.estimate td .code { text-align: right; }
.estimate tfoot th, .estimate tfoot td { font-weight: 800; border-top: 2px solid var(--c-text); }
@media (max-width: 520px) { .estimate { font-size: var(--fs-small); } .estimate th { padding-right: 8px; } .estimate td { padding-left: 8px; } }

/* Квиз подбора способа исправления прикуса */
.quiz fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.quiz legend { font-weight: 700; margin-bottom: 10px; padding: 0; }
.quiz .opt { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid var(--c-border); border-radius: var(--radius-btn); cursor: pointer; font-weight: 400; }
.quiz .opt:has(input:checked) { border-color: var(--c-primary); background: var(--c-cyan-50); }
.quiz .opt input { accent-color: var(--c-primary); margin: 0; width: 18px; height: 18px; min-height: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; flex: none; }
.quiz-rec[hidden] { display: none; }
.quiz-rec { background: var(--c-bg-soft); border-radius: var(--radius-card); padding: 16px 18px; display: grid; gap: 8px; }
.quiz-rec p { color: var(--c-text-2); margin: 0; }

/* Награда «Хорошее место» (clinic.json → awards): знак Яндекс Карт, как в карточке клиники */
:root { --c-gold: #C9972E; --c-gold-ink: #7A5710; --c-gold-50: #FBF5E6; }
.award { display: inline-flex; align-items: center; gap: 12px; padding: 8px 18px 8px 12px; background: var(--c-bg); border: 1px solid rgba(201,151,46,.45);
  color: var(--c-text); text-decoration: none; max-width: 100%; }
a.award:hover { border-color: var(--c-gold); }
a.award:hover .award-txt b { color: var(--c-gold-ink); }
.award-mark { flex: none; width: 31px; height: auto; filter: drop-shadow(0 1px 2px rgba(0,0,0,.12)); }
.award-txt { display: grid; gap: 2px; min-width: 0; }
.award-txt b { font: 700 17px/1.2 var(--font); color: var(--c-heading); }
.award-txt small { font-size: var(--fs-small); line-height: 1.3; color: var(--c-text-2); }
.award--hero { margin-top: 28px; box-shadow: 0 6px 20px rgba(122,87,16,.10); animation: rise .7s .24s cubic-bezier(.2,.7,.2,1) both; }
.award--foot { background: var(--c-bg); justify-self: start; }
/* Знак приходит в <picture> (webp); при picture { display: contents } <source> иначе занимает ячейку сетки */
.award source, .award-card source, .top-rate--award source { display: none; }
.award-card { display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 4vw, 40px); align-items: center; margin-block: 24px;
  padding: clamp(20px, 3vw, 32px); background: var(--c-gold-50); border-left: 4px solid var(--c-gold); }
.award-medal { width: clamp(88px, 9vw, 112px); height: auto; filter: drop-shadow(0 4px 10px rgba(0,0,0,.10)); }
.award-body { display: grid; gap: 10px; justify-items: start; }
.award-body h2, .award-body h3 { font: 700 var(--fs-h4)/1.25 var(--font); text-transform: none; letter-spacing: 0; color: var(--c-heading); }
.award-streak { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 3px 10px; font: 700 14px/1.3 var(--font); background: var(--c-gold-ink); color: #fff; }
.award-body .nowrap { white-space: nowrap; }
.award-body p { color: var(--c-text-2); max-width: 62ch; margin: 0; }
.award-body a { font-weight: 600; }
/* В шапке: знак слева, рейтинг и название награды справа; на широких экранах рядом с адресом */
.top-rate--award { grid-template-columns: auto auto; column-gap: 10px; row-gap: 0; align-items: center; justify-content: start; }
.top-rate--award .top-award { grid-row: 1 / 4; width: 22px; height: auto; filter: drop-shadow(0 1px 2px rgba(0,0,0,.15)); }
.top-rate--award small { color: var(--c-gold-ink); font-weight: 600; line-height: 1.25; }
.top-rate--award .top-award-streak { color: var(--c-text-2); font-weight: 500; }
@media (min-width: 1280px) { .top-rate--award { display: grid; } }
/* Адрес есть на первом экране и в подвале, а рядом с наградой ему в шапке не хватает места */
.top:has(.top-rate--award) .top-addr { display: none; }
.top-rate--award { margin-left: auto; }
@media (max-width: 1279px) {
  .top-rate--award { column-gap: 8px; }
  .top-rate--award small { font-size: 13px; }
  .top:has(.top-rate--award) .wrap { column-gap: 14px; }
}
/* На телефоне знак с рейтингом стоит в липкой шапке между логотипом и кнопкой звонка, поэтому виден всегда,
   а значок на первом экране не повторяем */
@media (max-width: 679px) {
  .top .top-rate--award { display: grid; column-gap: 6px; margin-left: auto; }
  .top-rate--award .top-award { width: 18px; }
  .top-rate--award b { font-size: 15px; }
  .top-rate--award small { font-size: 11px; line-height: 1.2; }
  .top:has(.top-rate--award) .top-tel { margin-left: 4px; }
  .award--hero { display: none; }
}
@media (max-width: 439px) { .top:has(.top-rate--award) .logo img { height: 28px; } .top:has(.top-rate--award) .wrap { gap: 4px; } }
@media (max-width: 379px) {
  .top:has(.top-rate--award) .logo img { height: 25px; }
  .top-rate--award { grid-template-columns: auto; }
  .top-rate--award .top-award { display: none; }
}
/* 320px phones: logo, rating, phone and menu were ~24px wider than the screen; the bottom bar's «Записаться» too */
@media (max-width: 340px) {
  .top:has(.top-rate--award) .logo img { height: 21px; }
  .top:has(.top-rate--award) .top-tel { margin-left: 0; }
  .mbar .btn { padding-inline: 8px; }
}
/* На телефоне первый экран кончается на кнопках: значок поднимаем над заголовком, чтобы его было видно сразу */
@media (max-width: 860px) {
  .hero-grid > div { display: flex; flex-direction: column; align-items: flex-start; }
  .award--hero { order: -1; margin: 0 0 20px; }
}
@media (max-width: 599px) {
  .award-card { grid-template-columns: 1fr; justify-items: center; text-align: center; border-left: 0; border-top: 4px solid var(--c-gold); }
  .award-body { justify-items: center; }
  .award-txt b { font-size: 16px; }
}
/* Вертикальный планшет: значок «Хорошее место» не над заголовком, а в одном ряду с кнопками */
@media (min-width: 680px) and (max-width: 860px) {
  .hero-grid > div { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 24px; }
  .hero-grid > div > :not(.actions):not(.award--hero) { flex-basis: 100%; }
  /* Значок той же высоты, что кнопки рядом */
  .hero .award--hero { order: 0; margin: 32px 0 0; box-sizing: border-box; height: var(--btn-h); padding-block: 0; padding-inline: 12px 16px; gap: 10px; align-items: center; }
  .hero .award--hero .award-mark { width: 22px; }
  .hero .award--hero .award-txt { gap: 0; }
  .hero .award--hero .award-txt b { font-size: 15px; }
  .hero .award--hero .award-txt small { font-size: 12px; line-height: 1.2; }
}
/* Узкая карточка врача (телефон 320, три колонки на 1024): кнопки остаются в ряд, текст мельче */
.doc-body { container-type: inline-size; }
@container (max-width: 300px) { .doc-actions .btn { font-size: 14px; padding-inline: 4px; } .doc-actions { gap: 8px; } }
#cases { scroll-margin-top: 96px; }
/* Врач временно не принимает: плашка в визитке на его странице (страница закрыта от индекса) */
.away { margin: 14px 0 0; padding: 12px 14px; border-radius: var(--radius-card); background: var(--c-bg-soft); border-left: 4px solid var(--c-primary); color: var(--c-text); font-size: var(--fs-small); line-height: 1.45; }

/* Home: category title links to its group on /services/ */
.svc h3 a.svc-cat { color: inherit; text-decoration: none; }
.svc h3 a.svc-cat span { color: var(--c-primary); transition: margin-left .15s; }
.svc h3 a.svc-cat:hover { color: var(--c-primary); text-decoration: underline; text-decoration-color: var(--c-primary); text-underline-offset: 4px; }
.svc h3 a.svc-cat:hover span { margin-left: 4px; }
.group-head h2[id] { scroll-margin-top: 110px; }

/* Mobile: a pair of buttons sits in one row, equal width (same rule as the home hero) */
.m-only { display: none; }
@media (max-width: 599px) {
  .m-hide { display: none; }
  .m-only { display: inline; }
  .actions:has(> .btn:first-child:nth-last-child(2)) { flex-wrap: nowrap; gap: 8px; align-self: stretch; }
  .actions:has(> .btn:first-child:nth-last-child(2)) > .btn { flex: 1 1 0; min-width: 0; padding-inline: 10px; font-size: 16px; }
  /* «Оставьте отзыв о враче:» label on its own line, the two platform buttons in one row below it */
  .actions:has(> .leave-label + .btn:nth-last-child(2)) > .leave-label { flex-basis: 100%; }
  .actions:has(> .leave-label + .btn:nth-last-child(2)) { gap: 8px; }
  .actions:has(> .leave-label + .btn:nth-last-child(2)) > .btn { flex: 1 1 0; min-width: 0; padding-inline: 10px; font-size: 16px; }
}
@media (max-width: 360px) {
  .actions:has(> .btn:first-child:nth-last-child(2)) > .btn,
  .actions:has(> .leave-label + .btn:nth-last-child(2)) > .btn { font-size: 15px; padding-inline: 6px; }
}