/* ============================================================
   Esthetic Dent — Design System
   Slice 1: tokens + reset + components for the homepage rebuild
   ============================================================ */

/* ───── Design tokens ───────────────────────────────────────── */
:root {
    /* Typography */
    --font-display: 'Manrope', system-ui, sans-serif;
    --font-body: 'Manrope', system-ui, sans-serif;
    --fs-h1: clamp(34px, 4.8vw, 60px);
    --fs-h2: clamp(24px, 2.8vw, 40px);
    --fs-h3: 20px;
    --fs-body: 16px;
    --fs-small: 14px;
    --fs-eyebrow: 12px;
    /* Color (restrained, single teal accent preserved) */
    --c-ink: #1A1A1A;
    --c-ink-2: #595959;
    --c-ink-3: #9A9A9A;
    --c-line: #E4E4E6;
    --c-line-strong: #C7C9D0;  /* defined-but-soft border for secondary buttons */
    --c-bg: #F3F4F5;          /* airy neutral base (grey enough that the white decor shapes read) */
    --c-bg-alt: #EAECEF;      /* subtle alternating band for premium rhythm */
    --c-bg-soft: #FAFBFC;     /* lighter neutral tint for panels */
    --c-card: #FFFFFF;
    --c-accent: #38BF72;
    --c-accent-dk: #1D8A48;
    --c-accent-soft: #EBF9F1;
    --c-dark: #141414;
    /* Spacing — 8px rhythm */
    --s-1: 8px;
    --s-2: 16px;
    --s-3: 24px;
    --s-4: 32px;
    --s-5: 48px;
    --s-6: 64px;
    --s-7: 96px;
    --s-8: 128px;
    /* Radius / layout */
    --r-card: 14px;
    --r-pill: 999px;
    --container: 1280px;
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* ───── Base reset ──────────────────────────────────────────── */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

body {
    font-family: var(--font-body);
    background-color: var(--c-bg);
    color: var(--c-ink);
    font-weight: 400;
    font-size: var(--fs-body);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    position: relative;
    /* Decorative blobs deliberately bleed past the viewport edges; clip the
       horizontal overflow so they never spawn a scrollbar. `clip` (not
       `hidden`) avoids creating a scroll container, so the sticky header
       and any sticky UI keep working. */
    overflow-x: clip;
}

/* ═══ Decorative cloud shapes ═══════════════════════════════════════
   The real production asset — bg-blob.svg, a soft WHITE three-lobe
   cloud/bubble — art-directed as an editorial layer that guides the eye down
   the page. It reads only on the grey background (invisible on white cards,
   images and dark sections, by design). Each is a pseudo-element behind the
   content (z-index:-1).

   Art direction (NOT even spacing, NOT a grid):
     • Large accents live in the genuinely EMPTY grey bands (above the doctors
       band, above the big CTA, the certificates gutter, the price-rail foot)
       so the page never feels unfinished.
     • Two places per long page use an OVERLAPPING pair (a large + a medium
       crossing it ~20%) for depth. Never overlap more than two.
     • Some content-dense bands are left intentionally clean for rhythm.
     • Sizes: medium 240–340, large 380–520, one extra-large 560–650. Mostly
       medium. No tiny bubbles. Opacity is kept high (.78–.92) so the shapes
       register subconsciously instead of dissolving into a faint stain.
     • Never behind a heading, paragraph, price, button, face, card or form —
       they frame content from the gutters and the empty bands. */
.trust-band::before,
.about::before,
.services::after,
.cases::before,
.doctors-block::before,
.certificates::before,
.cta-strip::before,
.cta-strip::after,
.svc-split-hero::after,
.svc-text-hero::after,
.section[data-doctors-service]::before,
.faq-list::after,
.cta-card-section::before,
.cases-section-compact::before,
.page-hero::before,
.contact-info::before,
.contact-grid::before,
.contact-grid::after,
.price-section::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
    background: url(../../images/decor/bg-blob.svg) center / contain no-repeat;
    opacity: .85;                /* strong enough to register; per-instance below */
}

/* Hosts must establish a stacking context (position:relative; z-index:0) so
   the z-index:-1 shape paints above the host's own (opaque) background yet
   still below its content. `.section` bands already get this further down;
   these extra hosts need it explicitly. */
.trust-band,
.svc-split-hero,
.svc-text-hero,
.page-hero,
.contact-grid,
.contact-info,
.faq-list,
.price-section { position: relative; z-index: 0; }

/* ══ Placement doctrine ══════════════════════════════════════════════
   Every shape lives in EMPTY PAGE BACKGROUND only — the side gutters
   (outside the 1280px content column) and the large empty bands (below the
   hero, above the doctors row, above the CTA, the certificates/FAQ right
   half, the strip before the footer). Each is pushed far enough past a
   viewport edge that its visible mass sits in that empty space and keeps
   clear of every card, photo, slider, CTA, form and text block. They are a
   vertical composition down the page — not decorations bolted onto sections.
   ──────────────────────────────────────────────────────────────────── */

/* ── HOMEPAGE — composed top→bottom, 8 accents, empty space only ── */
/* Hero area: a large accent in the grey stats band just under the hero photo,
   bleeding off the right edge (never over the photo or the nav). */
.trust-band::before  { top: -40px;    right: -360px; width: 520px; height: 455px; opacity: .8;  transform: rotate(-10deg); }
/* Gap above About: a medium drifting in from the left gutter. */
.about::before       { top: -150px;   left: -300px;  width: 400px; height: 350px; opacity: .82; transform: rotate(-14deg); }
/* Empty band below the services grid (left gutter). */
.services::after     { bottom: -30px;  left: -280px;  width: 380px; height: 330px; opacity: .82; transform: rotate(-8deg); }
/* Gap before the works gallery (left gutter). */
.cases::before       { top: -120px;   left: -280px;  width: 360px; height: 315px; opacity: .8;  transform: rotate(-10deg); }
/* The big empty band above the doctors row — the XL accent, high-left, clear
   of the heading below and the face cards. */
.doctors-block::before { top: -330px; left: -360px;  width: 600px; height: 520px; opacity: .86; transform: rotate(8deg); }
/* Certificates: the empty right half beside the left-aligned intro. */
.certificates::before { top: -30px;   right: -300px; width: 460px; height: 400px; opacity: .84; transform: rotate(12deg); }
/* CTA: large accent in the tall empty band above the card (right); a medium in
   the empty strip before the footer (left). */
.cta-strip::after    { top: -50px;    right: -300px; width: 480px; height: 420px; opacity: .85; transform: rotate(-8deg); }
.cta-strip::before   { bottom: -200px; left: -300px; width: 360px; height: 315px; opacity: .8;  transform: rotate(10deg); }

/* ── SERVICE PAGES (shared template) — 4 accents, empty space only ── */
/* Empty gap below the hero (left gutter; the hero photo is on the right). */
.svc-split-hero::after  { bottom: -220px; left: -340px; width: 460px; height: 400px; opacity: .84; transform: rotate(-8deg); }
/* FAQ: pushed deep into the empty right half so it keeps clear of the accordion. */
.faq-list::after { top: 2%; right: -520px; width: 440px; height: 385px; opacity: .82; transform: rotate(11deg); }
/* Doctors band: far into the right gutter, clear of the centred face cards. */
.section[data-doctors-service]::before { top: -90px; right: -400px; width: 440px; height: 385px; opacity: .84; transform: rotate(-12deg); }
/* Text-hero variant pages reuse the hero-foot accent. */
.svc-text-hero::after  { bottom: -210px; left: -340px; width: 440px; height: 385px; opacity: .84; transform: rotate(-8deg); }
/* Bonus hosts on some pages (gutters only). */
.cases-section-compact::before { top: -30px; left: -280px; width: 340px; height: 300px; opacity: .8; transform: rotate(8deg); }
.cta-card-section::before      { bottom: -60px; right: -300px; width: 340px; height: 300px; opacity: .8; transform: rotate(-12deg); }

/* ── CONTACTS (short) — 4 accents ── */
.page-hero::before   { top: -60px;   right: -300px;  width: 360px; height: 315px; opacity: .82; transform: rotate(-12deg); }
.contact-info::before { top: 40px;    left: -300px;  width: 340px; height: 300px; opacity: .8;  transform: rotate(-14deg); }
.contact-grid::before { bottom: -180px; left: -300px; width: 460px; height: 400px; opacity: .84; transform: rotate(9deg); }
.contact-grid::after  { top: -70px;   right: -300px;  width: 340px; height: 300px; opacity: .8;  transform: rotate(-16deg); }

/* ── PRICES (long) — the rail is wall-to-wall white cards, so the only empty
   background is the hero gutter (shared .page-hero::before) and the strip
   before the footer. Two clean accents, no card contact. ── */
.price-section::after  { bottom: -180px; left: -320px; width: 460px; height: 400px; opacity: .84; transform: rotate(12deg); }

/* ─────────────────────────────────────────────────────────────────────
   MOBILE (≤900px) — same vertical rhythm, fewer shapes. Single column has no
   side gutters, so accents bleed just off a corner into the top/bottom empty
   bands. overflow-x:clip on <body> guarantees no horizontal scroll.
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .services::after,
    .cases::before,
    .cta-strip::after,
    .faq-list::after,
    .cases-section-compact::before,
    .cta-card-section::before,
    .contact-info::before,
    .contact-grid::after { display: none; }

    /* Homepage — hero band, gap above About, the doctors band, before footer. */
    .trust-band::before  { top: -30px;  right: -150px; width: 250px; height: 220px; opacity: .78; }
    .about::before       { top: -80px;  left: -150px;  width: 250px; height: 220px; opacity: .78; transform: rotate(-16deg); }
    .doctors-block::before { top: -140px; left: -160px; width: 300px; height: 260px; opacity: .8; transform: rotate(8deg); }
    .certificates::before { top: -20px; right: -150px; width: 250px; height: 220px; opacity: .78; transform: rotate(12deg); }
    .cta-strip::before   { bottom: -120px; left: -150px; width: 260px; height: 225px; opacity: .78; transform: rotate(10deg); }

    /* Service — empty gap below hero + doctors band. */
    .svc-split-hero::after  { bottom: -120px; left: -150px; width: 290px; height: 255px; opacity: .8; }
    .svc-text-hero::after   { bottom: -120px; left: -150px; width: 290px; height: 255px; opacity: .8; }
    .section[data-doctors-service]::before { top: -60px; right: -150px; width: 270px; height: 235px; opacity: .78; }

    /* Contacts — hero + before-footer. */
    .page-hero::before   { top: -40px; right: -150px; width: 250px; height: 220px; opacity: .78; }
    .contact-grid::before { bottom: -120px; left: -150px; width: 280px; height: 245px; opacity: .78; }

    /* Prices — before-footer strip. */
    .price-section::after  { bottom: -130px; left: -150px; width: 280px; height: 245px; opacity: .78; }
}

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

a {
    color: inherit;
    text-decoration: none;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
    color: inherit;
}

ul {
    list-style: none;
}

input {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

/* ───── Layout helpers ──────────────────────────────────────── */
.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 32px;
}

.eyebrow {
    font-family: var(--font-body);
    font-size: var(--fs-eyebrow);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--c-ink-2);
}

.section {
    padding: var(--s-7) 0;
}

/* Sections are transparent so the page-wide blob backdrop (the body::before
   fixed field + body::after scrolling field) shows through and reads as one
   cohesive canvas across every page. */
.section,
.about,
.cases,
.doctors-block,
.certificates,
.ratings,
.technology,
.pediatric,
.cta-strip,
.cta-card-section {
    position: relative;
    z-index: 0;
}
.section > .container,
.about > .container,
.cases > .container,
.doctors-block > .container,
.certificates > .container,
.ratings > .container,
.technology > .container,
.pediatric > .container {
    position: relative;
    z-index: 1;
}

.section-head {
    margin-bottom: var(--s-5);
}

.section-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-h2);
    line-height: 1.1;
    color: var(--c-ink);
    letter-spacing: -0.02em;
}

.section-sub {
    margin-top: var(--s-2);
    max-width: 600px;
    color: var(--c-ink-2);
    font-size: 15px;
    line-height: 1.65;
}

/* ───── Buttons ─────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 26px;
    min-height: 46px;              /* comfortable, consistent touch target */
    border-radius: var(--r-pill);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease,
                box-shadow .2s ease, transform .15s ease;
    border: 1.5px solid transparent;
    white-space: nowrap;
}
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

.btn-primary {
    background: var(--c-accent);
    color: #fff;
    box-shadow: 0 2px 10px rgba(56, 191, 114, .22);
}
.btn-primary:hover {
    background: var(--c-accent-dk);
    box-shadow: 0 5px 18px rgba(56, 191, 114, .30);
    transform: translateY(-1px);
}

.btn-dark {
    background: var(--c-dark);
    color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .16);
}
.btn-dark:hover {
    background: var(--c-ink);
    box-shadow: 0 5px 18px rgba(0, 0, 0, .22);
    transform: translateY(-1px);
}

/* Secondary — refined outline: a defined-but-soft border with a clear,
   on-brand hover. Elegant and easy to notice, never heavy. */
.btn-ghost {
    background: transparent;
    color: var(--c-ink);
    border: 1.5px solid var(--c-line-strong);
}
.btn-ghost:hover {
    border-color: var(--c-accent);
    color: var(--c-accent-dk);
    background: var(--c-accent-soft);
    transform: translateY(-1px);
}

.btn-inverse {
    background: #fff;
    color: var(--c-ink);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}
.btn-inverse:hover {
    background: var(--c-accent-soft);
    color: var(--c-accent-dk);
    transform: translateY(-1px);
}

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--c-ink);
    border-bottom: 1px solid transparent;
    transition: color .2s, border-color .2s;
}
.link-arrow:hover {
    color: var(--c-accent-dk);
    border-color: var(--c-accent-dk);
}

/* ───── Topbar ──────────────────────────────────────────────── */
.topbar {
    background: var(--c-dark);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    padding: 10px 0;
}
.topbar-inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    text-align: center;
}
.topbar a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    padding-bottom: 1px;
}
.topbar a:hover { border-color: #fff; }

/* ───── Header ──────────────────────────────────────────────── */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: #fff;
    border-bottom: 1px solid var(--c-line);
}

/* ───── Services nav dropdown (abcclinic mega-menu) ──────────── */
.site-nav a.has-dropdown {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}
.site-nav a.has-dropdown::after {
    content: '';
    width: 8px;
    height: 8px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .2s;
}
.site-nav a.has-dropdown.open::after {
    transform: rotate(-135deg) translate(-2px, -2px);
}

/* ── Services dropdown: compact floating panel ───────── */
.nav-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    width: 740px;
    max-width: calc(100vw - 48px);
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: 20px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, .10), 0 2px 8px rgba(0, 0, 0, .04);
    display: none;
    max-height: calc(100vh - 160px);
    overflow: hidden;
    z-index: 49;
}
.nav-dropdown.open { display: block; }
.nav-dropdown-inner {
    padding: 0;
}
/* Neutralize .container centering/padding inside the compact dropdown */
.nav-dropdown .container {
    max-width: none;
    margin: 0;
    padding: 0;
    width: 100%;
}
/* Desktop only — revert to full-width drawer on mobile */
@media (max-width: 767px) {
    .nav-dropdown {
        left: 0;
        right: 0;
        top: 100%;
        transform: none;
        width: auto;
        max-width: none;
        border-radius: 0;
        border-left: none;
        border-right: none;
        border-top: 1px solid var(--c-line);
        box-shadow: 0 4px 12px rgba(0,0,0,.06);
        overflow-y: auto;
    }
}

.header-meta {
    border-bottom: 1px solid var(--c-line);
}
.header-meta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    padding: 10px 0;
    font-size: 13px;
    color: var(--c-ink-2);
    flex-wrap: wrap;
}
.header-meta a { color: var(--c-ink-2); transition: color .2s; }
.header-meta a:hover { color: var(--c-accent-dk); }
.header-meta-left,
.header-meta-right {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    flex-wrap: wrap;
}

/* ── Header schedule ─────────────────────────────────── */
.header-schedule {
    display: flex;
    align-items: center;
    gap: 6px;
}
.header-schedule-icon {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    stroke: var(--c-ink-3);
    opacity: 0.7;
}
.header-schedule-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.25;
}
.header-schedule-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--c-ink-3);
}
.header-schedule-hours {
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-size: 12px;
    font-weight: 500;
    color: var(--c-ink);
}

/* ── Schedule rows (shared two-line schedule) ────────── */
/* One row per line: day label + time, so weekday/weekend
   schedules never render as one long inline sentence. */
.sched-row {
    display: flex;
    gap: 6px;
    white-space: nowrap;
    line-height: 1.3;
}
.sched-row .sched-day { color: var(--c-ink-2); }
.sched-row .sched-time { font-weight: 600; color: inherit; }
.sched-label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--c-ink-3);
    margin-bottom: 2px;
}

.header-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    padding: 18px 0;
}

.brand {
    display: inline-flex;
    align-items: center;
}
.brand img {
    height: 46px;
    width: auto;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: var(--s-4);
}
.site-nav a {
    font-size: 15px;
    font-weight: 500;
    color: var(--c-ink);
    transition: color .2s;
}
.site-nav a:hover { color: var(--c-accent-dk); }

.header-cta { display: inline-flex; }

.nav-toggle {
    display: none;
    width: 44px;
    height: 44px;
    border-radius: var(--r-pill);
    border: 1px solid var(--c-line);
    align-items: center;
    justify-content: center;
}
.nav-toggle span {
    position: relative;
    display: block;
    width: 18px;
    height: 2px;
    background: var(--c-ink);
}
.nav-toggle span::before,
.nav-toggle span::after {
    content: '';
    position: absolute;
    left: 0;
    width: 18px;
    height: 2px;
    background: var(--c-ink);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }

/* Animated ☰ → ✕ transition */
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
    transition: transform .22s ease, top .22s ease, background .12s;
}
.nav-toggle.open span { background: transparent; }
.nav-toggle.open span::before { top: 0; transform: rotate(45deg); }
.nav-toggle.open span::after  { top: 0; transform: rotate(-45deg); }

/* ───── Mobile nav backdrop ──────────────────────────────────── */
.nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.38);
    z-index: 48;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.nav-backdrop.open { display: block; }

/* ───── Mobile branch pill (JS-injected into .header-main) ──── */
.mobile-branch-pill {
    display: none;
}

/* ───── Branch selector bottom sheet ────────────────────────── */
.branch-sheet-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.42);
    z-index: 210; /* above the mobile nav drawer (200) so it layers on top */
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.branch-sheet-backdrop.open { display: block; }

.branch-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 211;
    background: #fff;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -4px 40px rgba(0,0,0,.14);
    padding: 0 20px;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
    transform: translateY(100%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    pointer-events: none;
    visibility: hidden;
}
.branch-sheet.open {
    transform: translateY(0);
    pointer-events: all;
    visibility: visible;
}
.branch-sheet__handle {
    width: 36px; height: 4px;
    background: var(--c-line);
    border-radius: 2px;
    margin: 12px auto 20px;
}
.branch-sheet__title {
    font-size: 11px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--c-ink-3);
    margin-bottom: 10px;
}
.branch-sheet__opt {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 13px 14px;
    border-radius: 14px;
    border: 1.5px solid var(--c-line);
    background: #fff;
    font-family: var(--font-body);
    text-align: left;
    margin-bottom: 8px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.branch-sheet__opt:last-child { margin-bottom: 0; }
.branch-sheet__opt.active {
    border-color: var(--c-accent-dk);
    background: var(--c-accent-soft);
}
.branch-sheet__opt:not(.active):hover { border-color: var(--c-accent); background: var(--c-bg); }
.branch-sheet__icon {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--c-accent-soft);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.branch-sheet__opt.active .branch-sheet__icon { background: var(--c-accent-dk); }
.branch-sheet__icon svg { width: 16px; height: 16px; fill: var(--c-accent-dk); }
.branch-sheet__opt.active .branch-sheet__icon svg { fill: #fff; }
.branch-sheet__body { flex: 1; min-width: 0; }
.branch-sheet__city { font-size: 15px; font-weight: 700; color: var(--c-ink); line-height: 1.2; }
.branch-sheet__opt.active .branch-sheet__city { color: var(--c-accent-dk); }
.branch-sheet__addr { font-size: 12px; font-weight: 500; color: var(--c-ink-2); margin-top: 2px; }
.branch-sheet__opt.active .branch-sheet__addr { color: var(--c-accent-dk); opacity: .75; }
.branch-sheet__check { width: 20px; height: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.branch-sheet__check svg { width: 20px; height: 20px; stroke: var(--c-accent-dk); stroke-width: 2.5; fill: none; opacity: 0; }
.branch-sheet__opt.active .branch-sheet__check svg { opacity: 1; }

/* ───── Branch-availability guard ───────────────────────────── */
/* When the current service isn't offered in the selected branch, hide the whole
   page body and show one clean panel. Keep chrome (header/topbar/footer) and any
   overlays (nav drawer, branch sheet, modals) so navigation still works. */
body.svc-branch-blocked > *:not(header):not(footer):not(script):not(style):not(#svc-branch-guard):not(.topbar):not(.mobile-nav):not(.nav-backdrop):not(.branch-sheet):not(.branch-sheet-backdrop):not(.modal-backdrop) {
    display: none !important;
}
#svc-branch-guard {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 62vh;
    padding: var(--s-7) var(--s-4);
    background:
        radial-gradient(120% 90% at 50% -10%, var(--c-accent-soft) 0%, transparent 60%),
        var(--c-bg);
}
.svc-guard-inner {
    max-width: 560px;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-3);
}
.svc-guard-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: var(--c-accent-dk);
    box-shadow: 0 8px 26px -10px rgba(20, 60, 90, .35);
    margin-bottom: var(--s-1);
}
.svc-guard-icon svg { width: 28px; height: 28px; }
.svc-guard-eyebrow {
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--c-accent-dk);
}
.svc-guard-title {
    font-size: clamp(24px, 4vw, 34px);
    font-weight: 800;
    line-height: 1.2;
    color: var(--c-ink);
    margin: 0;
}
.svc-guard-desc {
    font-size: 16px;
    line-height: 1.65;
    color: var(--c-ink-2);
    margin: 0;
    max-width: 46ch;
}
.svc-guard-desc strong { color: var(--c-ink); font-weight: 700; }
.svc-guard-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    justify-content: center;
    margin-top: var(--s-3);
}
.svc-guard-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 22px;
    border-radius: 12px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
    text-decoration: none;
    min-height: 50px;
}
.svc-guard-btn svg { width: 18px; height: 18px; }
.svc-guard-btn--primary {
    background: var(--c-accent-dk);
    color: #fff;
    box-shadow: 0 12px 26px -12px rgba(20, 90, 70, .55);
}
.svc-guard-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -12px rgba(20, 90, 70, .6); }
.svc-guard-btn--ghost {
    background: #fff;
    color: var(--c-ink);
    border-color: var(--c-line);
}
.svc-guard-btn--ghost:hover { border-color: var(--c-accent); color: var(--c-accent-dk); }
@media (max-width: 560px) {
    #svc-branch-guard { min-height: 68vh; padding: var(--s-6) var(--s-4); }
    .svc-guard-actions { flex-direction: column; align-self: stretch; }
    .svc-guard-btn { justify-content: center; width: 100%; }
}

/* ───── Hero ────────────────────────────────────────────────── */
.hero {
    position: relative;
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--s-7) 32px;
    background: #111 url('../../img/hero-bg-large.webp') center/cover no-repeat;
    color: #fff;
    text-align: center;
    overflow: hidden;
}
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.38);
    z-index: 0;
}
.hero-inner {
    position: relative;
    z-index: 1;
    max-width: 880px;
}
.hero-eyebrow {
    color: rgba(255, 255, 255, 0.78);
    margin-bottom: var(--s-3);
}
.hero-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--fs-h1);
    line-height: 1.06;
    letter-spacing: -0.025em;
    margin-bottom: var(--s-3);
}
.hero-sub {
    font-size: 17px;
    color: rgba(255, 255, 255, 0.82);
    margin-bottom: var(--s-5);
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}
.hero-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    flex-wrap: wrap;
    justify-content: center;
}
.hero-actions .link-arrow {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.4);
}
.hero-actions .link-arrow:hover {
    color: #fff;
    border-color: #fff;
}

/* ───── Search (under hero) ─────────────────────────────────── */
.search-band {
    background: #fff;
    border-bottom: 1px solid var(--c-line);
    padding: var(--s-4) 0;
}
.search-wrap {
    position: relative;
    max-width: 640px;
    margin: 0 auto;
}
.search-box {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--c-bg);
    border: 1px solid var(--c-line);
    border-radius: var(--r-pill);
    padding: 12px 20px;
}
.search-box svg {
    width: 18px;
    height: 18px;
    color: var(--c-ink-3);
    flex-shrink: 0;
}
.search-box input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 15px;
}
.search-box input::placeholder { color: var(--c-ink-3); }

.search-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--r-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    z-index: 30;
    max-height: 360px;
    overflow-y: auto;
}
.search-dropdown.show { display: block; }
.search-result {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 12px 20px;
    cursor: pointer;
    border-bottom: 1px solid var(--c-line);
    transition: background .15s;
}
.search-result:last-child { border-bottom: none; }
.search-result:hover { background: var(--c-bg); }
.search-result-name {
    font-size: 14px;
    color: var(--c-ink);
}
.search-result-cat {
    font-size: 12px;
    color: var(--c-ink-3);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.search-result-empty {
    padding: 16px 20px;
    font-size: 14px;
    color: var(--c-ink-2);
    text-align: center;
}

/* ───── Trust band (5 stats) ────────────────────────────────── */
.trust-band {
    background: transparent;
    border-top: 1px solid var(--c-line);
    border-bottom: 1px solid var(--c-line);
    padding: var(--s-6) 0;
}
.trust-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--s-4);
    text-align: center;
}
.trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 0 var(--s-2);
    border-right: 1px solid var(--c-line);
}
.trust-item:last-child { border-right: none; }
.trust-num {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 32px;
    line-height: 1;
    color: var(--c-ink);
}
.trust-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-ink-2);
}

/* ───── О клинике ────────────────────────────────────────────── */
.about {
    padding: var(--s-7) 0;
}
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: var(--s-6);
    align-items: stretch;
}
.about-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--s-3);
    max-width: 560px;
}
.about-text .section-title {
    margin-bottom: var(--s-1);
}
.about-text p {
    color: var(--c-ink-2);
    font-size: 16px;
    line-height: 1.7;
}
.about-actions {
    margin-top: var(--s-3);
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    flex-wrap: wrap;
}
/* Full-height landscape image, framed as a premium anchor with a soft accent
   panel peeking behind it (replaces the detached background blob). */
.about-media {
    position: relative;
    align-self: stretch;
    min-height: 500px;
}
.about-media::before {
    content: "";
    position: absolute;
    inset: 30px -18px -18px 40px;
    background: var(--c-accent-soft);
    border-radius: 24px;
    z-index: 0;
}
.about-media img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 38%;
    border-radius: 20px;
    box-shadow: 0 28px 56px -26px rgba(18, 42, 66, .42);
    display: block;
}

/* ───── Services grid (4×2) ─────────────────────────────────── */
.services .section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--s-4);
    flex-wrap: wrap;
}
.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-3);
}
.service-card {
    background: var(--c-card);
    border: 1px solid var(--c-line);
    border-radius: var(--r-card);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow .2s, transform .2s, border-color .2s;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    color: inherit;
    width: 100%;
    padding: 0;
}
.service-card:hover {
    box-shadow: var(--shadow-card);
    transform: translateY(-2px);
    border-color: var(--c-accent);
}
.service-card:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 2px;
}
.service-icon {
    aspect-ratio: 4 / 3;
    background: var(--c-accent-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-accent-dk);
    border-bottom: 1px solid var(--c-line);
}
.service-icon svg {
    width: 64px;
    height: 64px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.service-body {
    padding: var(--s-3);
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}
.service-tag {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--c-accent-dk);
    text-transform: uppercase;
}
.service-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 22px;
    line-height: 1.2;
    color: var(--c-ink);
}
.service-desc {
    font-size: 14px;
    color: var(--c-ink-2);
    line-height: 1.5;
    flex: 1;
}
.service-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 14px;
    color: var(--c-ink);
    margin-top: var(--s-1);
}
.service-link:hover { color: var(--c-accent-dk); }
.service-card:hover .service-link { color: var(--c-accent-dk); }

.services-footer {
    margin-top: var(--s-5);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--s-3);
    flex-wrap: wrap;
}
.slider-controls { display: flex; gap: 10px; }
.slider-btn {
    width: 44px;
    height: 44px;
    border-radius: var(--r-pill);
    border: 1px solid var(--c-line);
    background: #fff;
    font-size: 18px;
    color: var(--c-ink);
    transition: background .2s, border-color .2s, color .2s;
}
.slider-btn:hover {
    background: var(--c-ink);
    border-color: var(--c-ink);
    color: #fff;
}

.services-slider {
    overflow: hidden;
}
.services-track {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-3);
    transition: transform .4s ease;
}

/* ───── Services mega-menu list (abcclinic style) ────────────── */
.services-megamenu {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-5);
}
.services-col {
    display: flex;
    flex-direction: column;
    gap: var(--s-5);
}
.services-cat {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.services-cat-title {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 16px;
    line-height: 1.3;
    color: var(--c-ink);
    text-align: left;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: color .2s;
    width: fit-content;
}
.services-cat-title:hover { color: var(--c-accent-dk); }
.services-cat-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 2px;
}
.services-cat-list button,
.services-cat-list a {
    text-align: left;
    color: var(--c-ink-2);
    font-size: 14px;
    line-height: 1.5;
    padding: 2px 0;
    transition: color .2s;
    cursor: pointer;
    background: none;
    border: none;
    font-family: inherit;
    width: fit-content;
    display: block;
    text-decoration: none;
}
.services-cat-list button:hover,
.services-cat-list a:hover { color: var(--c-accent-dk); }

/* Pediatric sub-brand panel (last column) */
.services-pediatric {
    background: var(--c-accent-soft);
    border-radius: var(--r-card);
    padding: var(--s-4);
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    cursor: pointer;
    transition: background .2s, transform .2s;
    text-align: left;
    align-self: start;
    border: none;
    font-family: inherit;
    color: inherit;
    width: 100%;
}
.services-pediatric:hover {
    background: #DDEDE9;
    transform: translateY(-2px);
}
.services-pediatric-icon {
    width: 56px;
    height: 56px;
    color: var(--c-accent-dk);
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    margin-bottom: var(--s-1);
}
.services-pediatric-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-accent-dk);
}
.services-pediatric-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 20px;
    color: var(--c-ink);
    line-height: 1.15;
}
.services-pediatric-desc {
    font-size: 14px;
    color: var(--c-ink-2);
    line-height: 1.5;
}
.services-pediatric-link {
    margin-top: var(--s-1);
    font-weight: 600;
    color: var(--c-accent-dk);
    font-size: 14px;
}

/* ───── Pediatric panel ─────────────────────────────────────── */
.pediatric {
    padding: var(--s-7) 0;
}
.pediatric-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    background: var(--c-accent-soft);
    border-radius: var(--r-card);
    overflow: hidden;
    border: 1px solid var(--c-line);
}
.pediatric-text {
    padding: var(--s-6) var(--s-5);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--s-3);
}
.pediatric-eyebrow {
    color: var(--c-accent-dk);
}
.pediatric-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(24px, 2.8vw, 38px);
    line-height: 1.1;
    color: var(--c-ink);
}
.pediatric-text p {
    font-size: 16px;
    color: var(--c-ink-2);
    max-width: 460px;
}
.pediatric-actions {
    margin-top: var(--s-2);
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    flex-wrap: wrap;
}
.pediatric-media {
    background: var(--c-accent-soft) center/cover no-repeat;
    min-height: 420px;
}

/* ───── Cases — premium carousel ─────────────────────────────── */

/* Filter pills */
.cases-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: var(--s-4);
}
.cases-filter {
    padding: 7px 18px;
    border-radius: var(--r-pill);
    border: 1.5px solid var(--c-line-strong);
    background: var(--c-card);
    font-size: 13px;
    font-weight: 600;
    color: var(--c-ink-2);
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
    white-space: nowrap;
}
.cases-filter:hover {
    border-color: var(--c-accent);
    color: var(--c-accent-dk);
    background: var(--c-accent-soft);
}
.cases-filter.is-active {
    background: var(--c-ink);
    color: #fff;
    border-color: var(--c-ink);
}

/* Carousel wrapper + nav arrows */
.cases-carousel-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}
.cases-carousel {
    flex: 1;
    display: flex;
    gap: var(--s-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px; /* don't clip hover shadow */
}
.cases-carousel::-webkit-scrollbar { display: none; }
.cases-carousel .case-card-v2 {
    flex: 0 0 380px;
    scroll-snap-align: start;
    cursor: pointer;
}
.cases-nav {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--c-card);
    border: 1px solid var(--c-line);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-ink-2);
    cursor: pointer;
    transition: background .2s, border-color .2s, color .2s;
}
.cases-nav:hover { background: var(--c-bg); border-color: var(--c-ink); color: var(--c-ink); }

/* Service-page compact grid (unchanged) */
.cases-grid-v2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-4);
    align-items: start;
}
.cases-grid-v2 .case-card-v2 { cursor: pointer; }

/* ── Before / after: two static images side by side ─────────────────── */
.case-ba {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 10px 10px 0;      /* consistent spacing; images sit inside the card */
}
.case-ba-item {
    position: relative;
    margin: 0;
    aspect-ratio: 4 / 5;       /* both panels equal size */
    border-radius: 12px;
    overflow: hidden;
    background: var(--c-bg);
}
.case-ba-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    -webkit-user-drag: none;
}
/* small До / После badge, top-left of each image */
.case-ba-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    margin: 0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    line-height: 1;
    color: rgba(255, 255, 255, .95);
    background: rgba(20, 20, 20, .5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 5px 10px;
    border-radius: var(--r-pill);
    pointer-events: none;
}

/* Card */
.case-card-v2 {
    background: var(--c-card);
    border-radius: var(--r-card);
    border: 1px solid var(--c-line);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow .22s ease, transform .22s ease;
}
.case-card-v2:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 36px rgba(0,0,0,.09);
}

/* Compact card body */
.case-card-body {
    padding: 16px 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    cursor: pointer;
}
.case-card-body:hover .case-card-title { color: var(--c-accent-dk); }

/* Category chip — sits above the title, off the photo */
.case-card-cat {
    align-self: flex-start;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    line-height: 1;
    color: var(--c-accent-dk);
    background: var(--c-accent-soft);
    padding: 5px 11px;
    border-radius: var(--r-pill);
}

.case-card-title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--c-ink);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .15s;
}
.case-card-result {
    font-size: 13px;
    color: var(--c-ink-2);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── PSR and meta: used only inside the case detail modal ── */
.case-badge {
    display: inline-flex;
    align-self: flex-start;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--c-accent-dk);
    background: var(--c-accent-soft);
    border-radius: var(--r-pill);
    padding: 4px 12px;
}
.case-psr {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.case-psr-item {
    background: var(--c-bg);
    border-radius: 10px;
    padding: 11px 13px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.case-psr-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--c-ink-3);
}
.case-psr-text {
    font-size: 13px;
    color: var(--c-ink);
    line-height: 1.5;
    font-weight: 500;
}

/* Section variant: compact grid (service pages) */
.cases-section-compact .cases-grid-v2 {
    grid-template-columns: repeat(2, 1fr);
}

/* ───── Case detail modal ────────────────────────────────────── */
.case-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(10,10,10,.78);
    z-index: 9000;
    align-items: center;
    justify-content: center;
    padding: var(--s-4);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.case-modal.open { display: flex; }
.case-modal-inner {
    position: relative;
    background: var(--c-card);
    border-radius: var(--r-card);
    width: 100%;
    max-width: 880px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    box-shadow: 0 24px 80px rgba(0,0,0,.5);
    max-height: calc(100vh - 80px);
}
.case-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 20;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid rgba(0,0,0,.14);
    background: var(--c-bg);
    color: var(--c-ink);
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
}
.case-modal-close:hover { background: var(--c-line); }
.case-modal-media { position: relative; min-height: 300px; }
/* In the modal the two images fill the media column, edge-to-edge */
.case-modal-media .case-ba--modal {
    height: 100%;
    padding: 0;
    gap: 3px;
    border-radius: var(--r-card) 0 0 var(--r-card);
    overflow: hidden;
}
.case-modal-media .case-ba--modal .case-ba-item {
    aspect-ratio: auto;
    height: 100%;
    min-height: 300px;
    border-radius: 0;
}
.case-modal-detail {
    padding: 32px 30px 30px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
}
.case-modal-title {
    font-size: 19px;
    font-weight: 800;
    line-height: 1.3;
    color: var(--c-ink);
    margin: 0;
}
.case-modal-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.case-modal-meta-item {
    font-size: 12px;
    color: var(--c-ink-2);
    font-weight: 500;
    background: var(--c-bg);
    padding: 3px 10px;
    border-radius: var(--r-pill);
    border: 1px solid var(--c-line);
}
.case-modal-cta { align-self: flex-start; margin-top: auto; }

/* ───── Doctors block (featured + 3) ────────────────────────── */
.doctors-block .section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--s-4);
    flex-wrap: wrap;
}
.doctors-carousel {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin-bottom: var(--s-4);
}
.doctors-nav {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--c-card);
    border: 1px solid var(--c-line);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-ink-2);
    cursor: pointer;
    transition: background .2s, border-color .2s, color .2s;
}
.doctors-nav:hover { background: var(--c-bg); border-color: var(--c-ink); color: var(--c-ink); }
.doctor-spec {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-accent-dk);
}
.doctor-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 26px;
    line-height: 1.15;
    color: var(--c-ink);
}
.doctor-exp {
    color: var(--c-ink-2);
    font-size: 14px;
}
.doctor-bio {
    color: var(--c-ink-2);
    font-size: 15px;
    line-height: 1.6;
    margin-top: var(--s-1);
}
.doctor-cta {
    margin-top: var(--s-3);
    align-self: flex-start;
}

/* ── Doctor certificates carousel ───────────────────── */
.cert-carousel {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin-top: var(--s-4);
}
.cert-nav {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--c-card);
    border: 1px solid var(--c-line);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-ink-2);
    cursor: pointer;
    transition: background .2s, border-color .2s, color .2s;
}
.cert-nav:hover { background: var(--c-bg); border-color: var(--c-ink); color: var(--c-ink); }
.cert-slider {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.cert-slider::-webkit-scrollbar { display: none; }
.cert-track {
    display: flex;
    gap: var(--s-3);
    padding: 6px 2px;
}
.cert-card {
    flex: 0 0 300px;
    scroll-snap-align: start;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: #f3f2ef;
    border: 1px solid var(--c-line);
    border-radius: var(--r-card);
    overflow: hidden;
}
.cert-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 3px;
    box-shadow: 0 3px 14px rgba(0,0,0,.14);
}

@media (max-width: 768px) {
    .cert-nav { display: none; }
    .cert-card { flex: 0 0 80vw; max-width: 340px; height: 300px; }
}

.doctors-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-3);
}
.doctor-card {
    flex: 0 0 300px;
    scroll-snap-align: start;
    background: var(--c-card);
    border: 1px solid var(--c-line);
    border-radius: var(--r-card);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.doctor-card .doctor-media {
    aspect-ratio: 3 / 4;
    /* Photos are uniform 3:4 head-and-shoulders crops (face ~30% from the top);
       "center 15%" keeps the face in frame for the square / 16:10 variants too. */
    background: var(--c-accent-soft) center 15%/cover no-repeat;
}
.doctor-card-body {
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}
.doctor-card-body .doctor-name {
    font-size: 18px;
    font-weight: 700;
}
.doctor-card-body .doctor-bio {
    font-size: 14px;
    margin-top: 0;
}
.doctor-card-body .doctor-cta {
    margin-top: auto;
    align-self: flex-start;
}

/* Service-page doctor grid */
.doctors-page-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-3);
}
.doctor-card--page {
    flex: none;
    width: 100%;
}
.doctor-card--page .doctor-media {
    aspect-ratio: 3 / 4;
    background-position: center 15%;
}
.doctor-card-body .doctor-bio {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Specialist cards (compact, implant pages) ─────── */
.specialist-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-3);
}
.specialist-card {
    background: var(--c-card);
    border: 1px solid var(--c-line);
    border-radius: var(--r-card);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.specialist-photo {
    aspect-ratio: 1 / 1;
    background: var(--c-accent-soft) center 15% / cover no-repeat;
}
.specialist-body {
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
}
.specialist-spec {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--c-accent-dk);
    line-height: 1.4;
}
.specialist-name {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--c-ink);
    line-height: 1.35;
    margin-top: 3px;
}
.specialist-exp {
    font-size: 0.78rem;
    color: var(--c-muted);
    margin-top: 1px;
}
.specialist-actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    flex-wrap: wrap;
}
.specialist-btn-more {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--c-ink);
    background: none;
    border: 1.5px solid var(--c-line-strong);
    border-radius: var(--r-pill);
    padding: 6px 14px;
    cursor: pointer;
    transition: border-color .18s ease, color .18s ease, background .18s ease;
    line-height: 1;
}
.specialist-btn-more:hover {
    border-color: var(--c-accent);
    color: var(--c-accent-dk);
    background: var(--c-accent-soft);
}
.specialist-btn-book {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--c-accent-dk);
    background: var(--c-accent-soft);
    border: none;
    border-radius: var(--r-pill);
    padding: 6px 13px;
    cursor: pointer;
    text-decoration: none;
    transition: opacity .15s;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}
.specialist-btn-book:hover { opacity: .8; }

/* ── Doctor detail modal ────────────────────────────── */
.dr-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10,10,10,.52);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--s-4);
    backdrop-filter: blur(2px);
}
.dr-modal-box {
    background: var(--c-card);
    border-radius: var(--r-card);
    max-width: 480px;
    width: 100%;
    box-shadow: 0 24px 64px rgba(0,0,0,.18);
    overflow: hidden;
}
.dr-modal-head {
    display: flex;
    gap: var(--s-3);
    padding: var(--s-4);
    align-items: flex-start;
    border-bottom: 1px solid var(--c-line);
}
.dr-modal-photo {
    width: 76px;
    height: 76px;
    border-radius: 10px;
    background: var(--c-accent-soft) center 15% / cover no-repeat;
    flex-shrink: 0;
}
.dr-modal-meta { flex: 1; min-width: 0; }
.dr-modal-spec {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-accent-dk);
    margin-bottom: 5px;
}
.dr-modal-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--c-ink);
    line-height: 1.3;
    margin-bottom: 4px;
}
.dr-modal-exp {
    font-size: 0.8rem;
    color: var(--c-muted);
}
.dr-modal-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: var(--c-bg);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--c-muted);
    transition: background .15s;
}
.dr-modal-close:hover { background: var(--c-line); }
.dr-modal-close svg { width: 16px; height: 16px; }
.dr-modal-body {
    padding: var(--s-4);
}
.dr-modal-bio {
    font-size: 0.9rem;
    color: var(--c-ink-2, #444);
    line-height: 1.7;
    margin-bottom: var(--s-4);
}

.doctors-slider {
    flex: 1;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.doctors-slider::-webkit-scrollbar { display: none; }
.doctors-track {
    display: flex;
    gap: var(--s-3);
}

/* ───── Technology numbered block ───────────────────────────── */
.tech-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-4);
    margin-top: var(--s-3);
}
.tech-item {
    border-top: 1px solid var(--c-line);
    padding-top: var(--s-3);
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}
.tech-num {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 44px;
    line-height: 1;
    color: var(--c-accent);
}
.tech-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 22px;
    line-height: 1.2;
    color: var(--c-ink);
}
.tech-desc {
    font-size: 15px;
    color: var(--c-ink-2);
    line-height: 1.6;
}

/* ───── Ratings strip ───────────────────────────────────────── */
.ratings {
    position: relative;
    z-index: 0;
    background: transparent;
    padding: var(--s-6) 0;
}
.ratings-head {
    text-align: center;
    margin-bottom: var(--s-4);
}
.ratings-head .eyebrow { color: var(--c-accent-dk); }
.ratings-title { font-size: 32px; }
.ratings-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-3);
}
.rating-card {
    background: var(--c-card);
    border: 1px solid var(--c-line);
    border-radius: var(--r-card);
    padding: var(--s-4);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.rating-source {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-ink-2);
}
.rating-score {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 44px;
    line-height: 1;
    color: var(--c-ink);
}
.rating-note {
    font-size: 13px;
    color: var(--c-ink-3);
}

/* ───── Inverse CTA strip ───────────────────────────────────── */
.cta-strip {
    background: transparent;
    padding: var(--s-7) 0;
}
.cta-strip-inner {
    background: var(--c-card);
    border-radius: var(--r-card);
    border: 1px solid var(--c-line);
    padding: var(--s-6);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--s-5);
    flex-wrap: wrap;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.04);
}
.cta-strip-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(20px, 2vw, 30px);
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--c-ink);
    max-width: 560px;
}
.cta-strip-sub {
    color: var(--c-ink-2);
    font-size: 15px;
    margin-top: 8px;
    max-width: 480px;
}

/* ───── Footer ──────────────────────────────────────────────── */
.site-footer {
    background: #fff;
    border-top: 1px solid var(--c-line);
    padding: var(--s-6) 0 var(--s-4);
    /* Own stacking layer above the page sections: a decorative cloud bleeding
       down from the section above (e.g. .cta-strip::before on phones) must slide
       under the footer's background, never over its text. */
    position: relative;
    z-index: 1;
}
/* Service card offered only in another branch (syncServiceCards): the price
   slot says where it is instead of "—", the card steps back visually. */
/* A card whose service is in no branch's price list — card classes set
   display:flex/grid, which would otherwise override the hidden attribute. */
[data-svc][hidden] { display: none !important; }
/* "Есть на Темирбаева →": switches the site to the other branch of this city. */
.svc-switch-link {
    font: inherit; font-weight: 600; color: var(--c-accent-dk);
    background: none; border: 0; padding: 0; cursor: pointer;
    text-decoration: underline; text-underline-offset: 3px; text-align: left;
}
.svc-switch-link:hover { color: var(--c-ink); }
.svc-switch-link:focus-visible { outline: 2px solid var(--c-accent-dk); outline-offset: 2px; border-radius: 2px; }
.svc-elsewhere [data-svc-price] {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--c-ink-3);
    letter-spacing: 0;
}
.svc-elsewhere img,
.svc-elsewhere [class*="-img"] { filter: grayscale(.55); opacity: .75; }
/* Same for the dark footer used on contacts / prices (plain <footer>). */
body > footer { position: relative; z-index: 1; }
.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1.2fr;
    gap: var(--s-5);
    margin-bottom: var(--s-5);
}
.footer-brand {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 28px;
    color: var(--c-ink);
    margin-bottom: var(--s-2);
}
.footer-brand .accent { color: var(--c-accent); }
.footer-text {
    color: var(--c-ink-2);
    font-size: 14px;
    line-height: 1.6;
    max-width: 380px;
}
.footer-col h4 {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--c-ink);
    margin-bottom: var(--s-2);
}
.footer-col ul li { margin-bottom: 8px; }
.footer-col a {
    font-size: 14px;
    color: var(--c-ink-2);
    transition: color .2s;
}
.footer-col a:hover { color: var(--c-accent-dk); }
.footer-contact {
    font-size: 14px;
    color: var(--c-ink-2);
    line-height: 1.7;
}
.footer-contact strong {
    color: var(--c-ink);
    font-weight: 600;
    display: block;
    margin-bottom: 4px;
}
.footer-contact [data-city-schedule] {
    display: inline-block;
    margin: 2px 0 6px;
    font-size: 13px;
}
.footer-contact [data-city-schedule] .sched-row { gap: 6px; }
.footer-contact [data-city-schedule] .sched-time { color: var(--c-ink); }
.footer-contact a {
    color: var(--c-ink);
    border-bottom: 1px solid var(--c-line);
    padding-bottom: 1px;
}
.footer-contact a:hover { border-color: var(--c-accent-dk); }

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--s-3);
    padding-top: var(--s-3);
    border-top: 1px solid var(--c-line);
    font-size: 13px;
    color: var(--c-ink-3);
    flex-wrap: wrap;
}

/* ───── Sticky mobile CTA ───────────────────────────────────── */
.mobile-cta {
    display: none;
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 40;
    background: var(--c-accent);
    color: #fff;
    padding: 14px 20px;
    border-radius: var(--r-pill);
    text-align: center;
    font-weight: 600;
    box-shadow: var(--shadow-card);
}

/* ───── Modals ──────────────────────────────────────────────── */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: var(--s-3);
    overflow-y: auto;
}
.modal-backdrop.open { display: flex; }

.modal,
.all-services-modal,
.all-doctors-modal {
    position: relative;
    background: #fff;
    border-radius: var(--r-card);
    width: 100%;
    max-width: 920px;
    max-height: 92vh;
    overflow-y: auto;
}
.modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 40px;
    height: 40px;
    border-radius: var(--r-pill);
    background: #fff;
    border: 1px solid var(--c-line);
    font-size: 22px;
    line-height: 1;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal-close:hover { background: var(--c-bg); }

/* Case modal */
.modal-imgs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    background: var(--c-line);
}
.modal-img-half {
    aspect-ratio: 4 / 3;
    background: var(--c-bg) center/cover no-repeat;
    position: relative;
}
.modal-img-label {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 6px 14px;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.92);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-ink);
}
.modal-img-label.after {
    background: var(--c-accent);
    color: #fff;
}
.modal-body {
    padding: var(--s-5);
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}
.modal-tag {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-accent-dk);
}
.modal-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.2;
    color: var(--c-ink);
}
.modal-text {
    color: var(--c-ink-2);
    font-size: 15px;
    line-height: 1.6;
}
.modal-list {
    margin-top: var(--s-1);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px var(--s-3);
}
.modal-list li {
    position: relative;
    padding-left: 22px;
    font-size: 14px;
    color: var(--c-ink-2);
}
.modal-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    width: 12px;
    height: 1px;
    background: var(--c-accent);
}
.modal-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-3);
    padding-top: var(--s-3);
    margin-top: var(--s-2);
    border-top: 1px solid var(--c-line);
}
.modal-meta-item .lbl {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-ink-3);
    margin-bottom: 4px;
}
.modal-meta-item .val {
    font-size: 14px;
    color: var(--c-ink);
    font-weight: 500;
}
.modal-cta {
    margin-top: var(--s-3);
    align-self: flex-start;
}
.modal-cta-arrow { display: inline-block; }

/* All services modal */
.all-services-modal {
    max-width: 880px;
    padding: var(--s-5);
}
.all-services-modal h2 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 32px;
    line-height: 1.15;
    color: var(--c-ink);
}
.all-services-modal .subtitle {
    color: var(--c-ink-2);
    font-size: 15px;
    margin-top: var(--s-1);
    margin-bottom: var(--s-3);
}
.all-services-search {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--c-bg);
    border: 1px solid var(--c-line);
    border-radius: var(--r-pill);
    padding: 12px 18px;
    margin-bottom: var(--s-4);
}
.all-services-search svg { width: 18px; height: 18px; color: var(--c-ink-3); }
.all-services-search input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 15px;
}
.svc-cat {
    margin-bottom: var(--s-4);
}
.svc-cat h3 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 17px;
    color: var(--c-ink);
    margin-bottom: var(--s-2);
    padding-bottom: var(--s-1);
    border-bottom: 1px solid var(--c-line);
}
.svc-list li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--s-3);
    padding: 10px 0;
    border-bottom: 1px dotted var(--c-line);
}
.svc-list li:last-child { border-bottom: none; }
.svc-list li.svc-link { padding: 0; }
.svc-row-link {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--s-3);
    padding: 10px 0;
    color: inherit;
    text-decoration: none;
    transition: color .2s;
}
.svc-row-link:hover .svc-name { color: var(--c-accent-dk); }
.svc-row-link::after {
    content: '→';
    align-self: center;
    color: var(--c-ink-3);
    font-size: 16px;
    transition: transform .2s, color .2s;
    margin-left: -8px;
}
.svc-row-link:hover::after { color: var(--c-accent-dk); transform: translateX(2px); }
.svc-name {
    font-size: 14px;
    color: var(--c-ink);
    flex: 1;
}
.svc-price {
    font-size: 14px;
    font-weight: 600;
    color: var(--c-accent-dk);
    white-space: nowrap;
}
.svc-empty {
    display: none;
    padding: var(--s-4);
    text-align: center;
    color: var(--c-ink-2);
}
.svc-empty.show { display: block; }

.branch-only-label {
    font-size: 11px;
    color: var(--c-ink-3);
    margin-top: 2px;
    letter-spacing: 0.01em;
}

/* All doctors modal */
.all-doctors-modal {
    padding: var(--s-5);
}
.all-doctors-modal h2 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 32px;
    line-height: 1.15;
    color: var(--c-ink);
}
.all-doctors-modal .subtitle {
    color: var(--c-ink-2);
    font-size: 15px;
    margin-top: var(--s-1);
    margin-bottom: var(--s-4);
}
.doctors-grid-modal {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}
.doc-row {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: var(--s-3);
    padding: var(--s-2);
    border: 1px solid var(--c-line);
    border-radius: var(--r-card);
}
.doc-row-img {
    aspect-ratio: 1 / 1;
    background-size: cover;
    background-position: center 15%;
    border-radius: var(--r-card);
    background-color: var(--c-accent-soft);
}
.doc-row-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--s-1) 0;
}
.doc-row-spec {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-accent-dk);
}
.doc-row-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 19px;
    color: var(--c-ink);
}
.doc-row-exp {
    font-size: 13px;
    color: var(--c-ink-2);
}
.doc-row-bio {
    font-size: 14px;
    color: var(--c-ink-2);
    line-height: 1.55;
    margin-top: 4px;
}

/* ───── Service detail page ─────────────────────────────────── */
.service-hero {
    min-height: 64vh;
    background: #111 center/cover no-repeat;
}
.service-hero--no-img {
    background: linear-gradient(135deg, #141414 0%, #1c2b1c 100%);
}
.service-hero-eyebrow {
    color: rgba(255, 255, 255, 0.78);
    margin-bottom: var(--s-3);
}
.service-hero-sub {
    color: rgba(255, 255, 255, 0.85);
    font-size: 18px;
    max-width: 660px;
    margin: 0 auto var(--s-3);
}
.service-hero-price {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    margin: var(--s-2) auto var(--s-4);
    padding: 12px 24px;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.service-hero-price strong {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 26px;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1;
}

.btn-whatsapp {
    background: #25D366;
    color: #fff;
}
.btn-whatsapp:hover { background: #1FB755; }
.btn-whatsapp svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

/* Section intro / "What is" */
.service-intro-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: var(--s-6);
    align-items: center;
}
.service-intro-text .lead {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.35;
    color: var(--c-ink);
    margin-top: var(--s-2);
    margin-bottom: var(--s-3);
}
.service-intro-text p {
    color: var(--c-ink-2);
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: var(--s-2);
}
.service-intro-media {
    aspect-ratio: 4 / 5;
    border-radius: var(--r-card);
    background: var(--c-accent-soft) center/cover no-repeat;
    min-height: 420px;
}

/* Indications / Contraindications */
.ind-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-3);
}
.ind-card {
    background: var(--c-card);
    border: 1px solid var(--c-line);
    border-radius: var(--r-card);
    padding: var(--s-5);
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}
.ind-card--pos { border-top: 3px solid var(--c-accent); }
.ind-card--neg { border-top: 3px solid var(--c-ink-3); }
.ind-card h3 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 24px;
    color: var(--c-ink);
    line-height: 1.2;
}
.ind-card-desc {
    color: var(--c-ink-2);
    font-size: 14px;
}
.ind-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: var(--s-2);
}
.ind-list li {
    position: relative;
    padding-left: 28px;
    color: var(--c-ink-2);
    font-size: 15px;
    line-height: 1.55;
}
.ind-card--pos .ind-list li::before {
    content: '';
    position: absolute;
    left: 3px;
    top: 5px;
    width: 14px;
    height: 8px;
    border-left: 2px solid var(--c-accent);
    border-bottom: 2px solid var(--c-accent);
    transform: rotate(-45deg);
}
.ind-card--neg .ind-list li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 11px;
    width: 12px;
    height: 2px;
    background: var(--c-ink-3);
    border-radius: 1px;
}

/* 4 stages */
.stages-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-3);
}
.stage-card {
    display: flex;
    flex-direction: column;
    background: var(--c-card);
    border: 1px solid var(--c-line);
    border-radius: var(--r-card);
    overflow: hidden;
    transition: box-shadow .2s, transform .2s, border-color .2s;
}
.stage-card:hover {
    box-shadow: var(--shadow-card);
    transform: translateY(-2px);
    border-color: var(--c-accent);
}
.stage-media {
    aspect-ratio: 4 / 3;
    background: var(--c-accent-soft) center/cover no-repeat;
}
.stage-body {
    padding: var(--s-3);
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}
.stage-num {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--c-accent-dk);
}
.stage-num strong {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 28px;
    line-height: 1;
    color: var(--c-accent);
    display: block;
    margin-top: 4px;
    letter-spacing: 0;
}
.stage-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 18px;
    line-height: 1.25;
    color: var(--c-ink);
    margin-top: var(--s-1);
}
.stage-desc {
    font-size: 14px;
    color: var(--c-ink-2);
    line-height: 1.6;
    margin-top: 4px;
}

/* Benefits */
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-3);
}
.benefit-card {
    background: var(--c-card);
    border: 1px solid var(--c-line);
    border-radius: var(--r-card);
    padding: var(--s-4);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.benefit-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--r-pill);
    background: var(--c-accent-soft);
    color: var(--c-accent-dk);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--s-1);
}
.benefit-icon svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.benefit-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 18px;
    line-height: 1.25;
    color: var(--c-ink);
}
.benefit-desc {
    font-size: 14px;
    color: var(--c-ink-2);
    line-height: 1.55;
}

/* FAQ */
.faq-list {
    border-top: 1px solid var(--c-line);
    max-width: 880px;
}
.faq-item {
    border-bottom: 1px solid var(--c-line);
}
.faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: var(--s-3) 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 17px;
    color: var(--c-ink);
    line-height: 1.4;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: '+';
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 24px;
    line-height: 1;
    color: var(--c-ink-2);
    width: 36px;
    height: 36px;
    border-radius: var(--r-pill);
    border: 1px solid var(--c-line);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s, color .2s, border-color .2s;
    flex-shrink: 0;
}
.faq-item summary:hover::after {
    border-color: var(--c-ink);
}
.faq-item[open] summary::after {
    content: '−';
    background: var(--c-ink);
    color: #fff;
    border-color: var(--c-ink);
}
.faq-answer {
    padding: 0 56px var(--s-3) 0;
    color: var(--c-ink-2);
    font-size: 15px;
    line-height: 1.7;
}

/* Final CTA — WhatsApp */
.final-cta {
    background: var(--c-dark);
    color: #fff;
    padding: var(--s-7) 0;
}
.final-cta-inner {
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-3);
}
.final-cta-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(24px, 2.8vw, 40px);
    line-height: 1.15;
    color: #fff;
}
.final-cta-sub {
    color: rgba(255, 255, 255, 0.72);
    font-size: 16px;
    max-width: 540px;
}
.final-cta-trust {
    margin-top: var(--s-2);
    color: rgba(255, 255, 255, 0.55);
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ───── City switcher (shared) ──────────────────────────────── */
.city-switcher {
    display: inline-flex;
    gap: 3px;
    background: var(--c-bg);
    border: 1px solid var(--c-line);
    border-radius: var(--r-pill);
    padding: 3px;
}
.city-btn {
    padding: 6px 18px;
    border-radius: var(--r-pill);
    font-size: 13px;
    font-weight: 600;
    color: var(--c-ink-2);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background .15s, color .15s, box-shadow .15s;
    white-space: nowrap;
}
.city-btn.active {
    background: #fff;
    color: var(--c-ink);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.city-btn:not(.active):hover { color: var(--c-ink); }

/* ───── City switcher in header meta bar ────────────────────── */
.city-switcher--hdr {
    background: transparent;
    border: 1.5px solid var(--c-line);
}
.city-switcher--hdr .city-btn {
    padding: 4px 14px;
    font-size: 12px;
}
.city-switcher--hdr .city-btn.active {
    background: var(--c-ink);
    color: #fff;
    box-shadow: none;
}

/* Mobile nav city row */
.nav-city-row {
    display: none;
    padding: 12px 20px;
    border-bottom: 1px solid var(--c-line);
}
.site-nav.open .nav-city-row { display: flex; justify-content: center; }

/* City switcher in service hero */
.service-hero-city {
    margin: var(--s-1) auto var(--s-3);
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.35);
}
.service-hero-city .city-btn { color: rgba(255,255,255,0.75); }
.service-hero-city .city-btn.active {
    background: rgba(255,255,255,0.22);
    color: #fff;
    box-shadow: none;
}
.service-hero-city .city-btn:not(.active):hover { color: #fff; }

/* ───── City dropdown ────────────────────────────────────────── */
.city-drop {
    position: relative;
    display: inline-block;
}
.city-drop__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px 7px 10px;
    border-radius: var(--r-pill);
    border: 1.5px solid var(--c-line);
    background: #fff;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--c-ink);
    cursor: pointer;
    transition: border-color .2s, color .2s, background .2s;
    white-space: nowrap;
    line-height: 1;
}
.city-drop__btn:hover {
    border-color: var(--c-accent);
    color: var(--c-accent-dk);
}
.city-drop.open .city-drop__btn {
    border-color: var(--c-accent);
    color: var(--c-accent-dk);
}
.city-drop__pin {
    width: 13px;
    height: 13px;
    color: var(--c-accent);
    flex-shrink: 0;
}
.city-drop__arrow {
    width: 11px;
    height: 11px;
    color: var(--c-ink-3);
    transition: transform .2s;
    flex-shrink: 0;
}
.city-drop.open .city-drop__arrow { transform: rotate(180deg); }
.city-drop__menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 130px;
    background: #fff;
    border-radius: 14px;
    border: 1.5px solid var(--c-line);
    box-shadow: 0 8px 24px rgba(0,0,0,0.10);
    list-style: none;
    padding: 5px;
    z-index: 300;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity .18s, transform .18s;
}
.city-drop.open .city-drop__menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
}
.city-drop__menu li {
    padding: 9px 12px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s, color .15s;
    color: var(--c-ink);
}
.city-drop__menu li:hover {
    background: var(--c-accent-soft);
    color: var(--c-accent-dk);
}
.city-drop__menu li.active {
    color: var(--c-accent-dk);
    font-weight: 700;
}
.city-drop__menu li.active::before { content: '✓\00a0'; }

/* City drop on dark/hero background */
.city-drop--hero .city-drop__btn {
    border-color: rgba(255,255,255,0.35);
    background: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.9);
}
.city-drop--hero .city-drop__btn:hover,
.city-drop--hero.open .city-drop__btn {
    border-color: rgba(255,255,255,0.65);
    color: #fff;
    background: rgba(255,255,255,0.22);
}
.city-drop--hero .city-drop__pin { color: rgba(255,255,255,0.75); }
.city-drop--hero .city-drop__arrow { color: rgba(255,255,255,0.5); }
.city-drop--hero .city-drop__menu {
    background: #222;
    border-color: rgba(255,255,255,0.12);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
}
.city-drop--hero.open .city-drop__menu {
    transform: translateX(-50%) translateY(0);
}
.city-drop--hero .city-drop__menu li { color: rgba(255,255,255,0.85); }
.city-drop--hero .city-drop__menu li:hover {
    background: rgba(26,148,133,0.3);
    color: #fff;
}
.city-drop--hero .city-drop__menu li.active { color: #2DB6A4; }

/* ───── Professional Cleaning hero — price block ────────────── */
.svc-price-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin: var(--s-5) auto var(--s-1);
}
.svc-price-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}
.svc-price-value {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(32px, 4vw, 46px);
    line-height: 1;
    color: #fff;
    letter-spacing: -0.01em;
}
/* City switcher sits just below the price, inside the block */
.svc-price-block .service-hero-city {
    margin: var(--s-2) auto 0;
}
/* CTA gets generous top margin for clear visual separation */
.svc-hero-actions {
    margin-top: var(--s-4);
}

/* ───── Split hero (service pages: text left / photo right) ─── */
.svc-split-hero {
    background: var(--c-card);
    padding: var(--s-7) 0;
}
.svc-split-hero-inner {
    display: grid;
    grid-template-columns: 45fr 55fr;
    gap: var(--s-6);
    align-items: center;
}
.svc-split-hero-text {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}
.svc-split-hero-eyebrow {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--c-accent-dk);
}
.svc-split-hero-title {
    font-size: clamp(26px, 3.2vw, 46px);
    font-weight: 800;
    color: var(--c-ink);
    line-height: 1.15;
    margin: 0;
}
.svc-split-hero-sub {
    font-size: 1rem;
    color: var(--c-ink-2);
    line-height: 1.7;
    margin: 0;
    max-width: 42ch;
}
.svc-split-hero-price {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--s-3) 0;
    border-top: 1px solid var(--c-line);
    border-bottom: 1px solid var(--c-line);
}
.svc-split-hero-price-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--c-ink-3);
}
.svc-split-hero-price-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--c-ink);
    line-height: 1.1;
}
.svc-split-hero-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--s-2);
}
.svc-split-hero-img {
    border-radius: var(--r-card);
    overflow: hidden;
    box-shadow: 0 4px 40px rgba(0,0,0,.10);
}
.svc-split-hero-img img {
    width: 100%;
    height: auto;
    display: block;
}
.svc-split-hero-img.is-illustration {
    background: var(--c-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    box-shadow: 0 2px 20px rgba(0,0,0,.07);
}
.svc-split-hero-img.is-illustration img {
    width: auto;
    max-width: 100%;
    height: auto;
    padding: var(--s-5);
    object-fit: contain;
}

/* kst-1 implant notice */
.implant-kst1-notice {
    background: var(--c-accent-soft);
    border: 1px solid #B2DFC5;
    border-radius: var(--r-card);
    padding: var(--s-3) var(--s-4);
}
.implant-kst1-notice-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--c-accent-dk);
    margin-bottom: 6px;
}
.implant-kst1-notice-desc {
    font-size: 13px;
    color: var(--c-ink-2);
    line-height: 1.55;
}
.implant-kst1-notice-actions {
    margin-top: var(--s-2);
    display: flex;
    gap: var(--s-2);
    flex-wrap: wrap;
}
.kst1-switch-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    background: var(--c-accent-dk);
    color: #fff;
    border: none;
    border-radius: var(--r-pill);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
    line-height: 1;
    transition: opacity .15s;
}
.kst1-switch-btn:hover { opacity: .85; }
.kst1-wa-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    background: #25D366;
    color: #fff;
    border-radius: var(--r-pill);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    line-height: 1;
    transition: opacity .15s;
}
.kst1-wa-link:hover { opacity: .85; }

/* Comparison illustration */
.comparison-illustration {
    margin-top: var(--s-5);
    background: var(--c-card);
    border: 1px solid var(--c-line);
    border-radius: var(--r-card);
    padding: var(--s-4);
    text-align: center;
}
.comparison-illustration img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}
.comparison-illustration-caption {
    font-size: 12px;
    color: var(--c-ink-3);
    margin-top: var(--s-2);
    line-height: 1.4;
}

/* ───── Category direct-link in megamenu ────────────────────── */
.services-cat-min-price {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--c-accent-dk);
    margin-top: 4px;
}
.services-cat-title--link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--c-ink);
    text-decoration: none;
    transition: color .2s;
}
.services-cat-title--nav {
    cursor: default;
    pointer-events: none;
}
.services-cat-title--link::after {
    content: '→';
    font-size: 14px;
    opacity: 0.5;
    transition: opacity .2s, transform .2s;
}
.services-cat-title--link:hover { color: var(--c-accent-dk); }
.services-cat-title--link:hover::after { opacity: 1; transform: translateX(3px); }

/* ───── Professional Cleaning — options section ─────────────── */
.clean-options-section {
    background: var(--c-card);
    border-bottom: 1px solid var(--c-line);
}
.clean-options-lead {
    font-size: 16px;
    color: var(--c-ink-2);
    margin-top: var(--s-2);
    margin-bottom: var(--s-4);
    max-width: 600px;
}
.clean-options-empty {
    font-size: 15px;
    color: var(--c-ink-2);
}
.clean-options-table {
    border-top: 1px solid var(--c-line);
}
.clean-option-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--s-4);
    padding: var(--s-3) 0;
    border-bottom: 1px dashed var(--c-line);
}
.clean-option-row:last-child { border-bottom: none; }
.clean-option-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.clean-option-name {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 20px;
    color: var(--c-ink);
    line-height: 1.2;
}
.clean-option-desc {
    font-size: 14px;
    color: var(--c-ink-2);
    line-height: 1.5;
}
.clean-option-price {
    font-size: 18px;
    font-weight: 600;
    color: var(--c-accent-dk);
    white-space: nowrap;
    flex-shrink: 0;
}

/* CTA block after options */
.clean-options-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    flex-wrap: wrap;
    margin-top: var(--s-5);
    padding: var(--s-4) var(--s-4);
    background: var(--c-bg);
    border: 1px solid var(--c-line);
    border-radius: var(--r-card);
}
.clean-options-cta-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.clean-options-cta-text strong {
    font-size: 16px;
    color: var(--c-ink);
    font-weight: 600;
}
.clean-options-cta-text span {
    font-size: 14px;
    color: var(--c-ink-2);
}

/* Stages grid with 3 columns (Kostanay) */
.stages-grid--3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 768px) {
    .city-switcher--hdr .city-btn { padding: 4px 12px; font-size: 12px; }
    .clean-option-row { flex-direction: column; align-items: flex-start; gap: var(--s-1); }
    .clean-option-price { font-size: 16px; color: var(--c-accent-dk); }
    .clean-options-cta { flex-direction: column; align-items: flex-start; }
    .stages-grid--3 { grid-template-columns: 1fr; }
}
@media (max-width: 1024px) {
    .stages-grid--3 { grid-template-columns: repeat(3, 1fr); }
}

/* ───── Responsive ──────────────────────────────────────────── */
@media (max-width: 1280px) {
    .container { padding: 0 28px; }
}

@media (max-width: 1024px) {
    .section { padding: var(--s-6) 0; }
    .cases-carousel .case-card-v2 { flex: 0 0 340px; }
    .cases-grid-v2 { grid-template-columns: repeat(2, 1fr); }
    .services-grid,
    .services-track {
        grid-template-columns: repeat(2, 1fr);
    }
    .services-megamenu {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--s-4);
    }
    .doctors-grid,
    .doctors-page-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .specialist-grid { grid-template-columns: repeat(2, 1fr); }
    .doctor-card { flex: 0 0 260px; }
    .tech-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .ratings-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .trust-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: var(--s-2);
    }
    .trust-num { font-size: 28px; }
    /* Stack early: a narrow 2-col column would crop the landscape photo into a
       portrait strip. Below 1024 the image goes full-width on top, landscape. */
    .about-grid { grid-template-columns: 1fr; gap: var(--s-5); align-items: start; }
    .about-text { max-width: none; justify-content: flex-start; }
    .about-media { min-height: 0; order: -1; }
    .about-media img { aspect-ratio: 16 / 10; height: auto; object-position: center 34%; border-radius: 18px; }
    .about-media::before { inset: 20px -14px -14px 28px; border-radius: 20px; }
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--s-4);
    }
    .stages-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .service-intro-grid {
        gap: var(--s-4);
    }
    .service-intro-media {
        min-height: 360px;
    }
}

@media (max-width: 768px) {
    .container { padding: 0 20px; }
    .section { padding: var(--s-5) 0; }
    .hero { min-height: 70vh; padding: var(--s-6) 20px; }
    .header-meta-inner { font-size: 12px; gap: var(--s-2); }
    .header-meta-left,
    .header-meta-right { gap: var(--s-2); }
    /* Mobile branch pill */
    .mobile-branch-pill {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 7px 10px 7px 9px;
        border-radius: 999px;
        border: 1.5px solid var(--c-line);
        background: var(--c-bg);
        font-family: var(--font-body);
        font-size: 13px;
        font-weight: 700;
        color: var(--c-ink);
        cursor: pointer;
        white-space: nowrap;
        transition: border-color .15s, background .15s, color .15s;
        flex: 0 1 auto;
        min-width: 0;
        max-width: 180px;
    }
    .mobile-branch-pill:hover,
    .mobile-branch-pill:focus-visible {
        border-color: var(--c-accent);
        color: var(--c-accent-dk);
        outline: none;
    }
    .mobile-branch-pill__pin {
        width: 14px; height: 14px;
        color: var(--c-accent);
        flex-shrink: 0;
    }
    .mobile-branch-pill__label {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        flex-shrink: 1;
    }
    .mobile-branch-pill__chev {
        width: 10px; height: 10px;
        color: var(--c-ink-3);
        flex-shrink: 0;
    }

    /* Mobile header: topbar hidden, meta hidden, logo | pill | toggle only */
    .topbar { display: none; }
    .header-meta { display: none; }
    .site-nav { display: none !important; }
    .nav-dropdown { display: none !important; }
    .nav-toggle { display: inline-flex; }
    .header-cta { display: none; }
    .header-main { padding: 14px 0; }
    .brand img { height: 44px; }

    .trust-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--s-3);
    }
    .trust-item {
        border-right: none;
        border-bottom: 1px solid var(--c-line);
        padding-bottom: var(--s-3);
    }
    .trust-item:last-child,
    .trust-item:nth-last-child(2) { border-bottom: none; }

    .services-grid,
    .services-track,
    .doctors-grid {
        grid-template-columns: 1fr;
    }
    .services-megamenu { grid-template-columns: 1fr; }
    .services-col { gap: var(--s-4); }
    .cases-grid { grid-template-columns: 1fr; }
    .cases-grid-v2 { grid-template-columns: 1fr; }
    .cases-section-compact .cases-grid-v2 { grid-template-columns: 1fr; }
    /* Stack cases vertically on phones so a horizontal drag on the reveal
       slider never fights with swiping a horizontal carousel. */
    .cases-nav { display: none; }
    .cases-carousel {
        flex-direction: column;
        overflow-x: visible;
        scroll-snap-type: none;
    }
    .cases-carousel .case-card-v2 { flex: 0 0 auto; width: 100%; }
    .case-modal-inner { grid-template-columns: 1fr; max-height: 92vh; overflow-y: auto; }
    .case-modal-media .case-ba--modal { border-radius: var(--r-card) var(--r-card) 0 0; }
    .case-modal-media .case-ba--modal .case-ba-item { aspect-ratio: 3 / 4; height: auto; min-height: 0; }
    .case-modal-detail { padding: 22px 20px 24px; max-height: none; }

    .tech-grid { grid-template-columns: 1fr; }
    .ratings-grid { grid-template-columns: 1fr 1fr; }
    .doctors-nav { display: none; }
    .doctor-card { flex: 0 0 80vw; }
    .doctors-page-grid { grid-template-columns: 1fr; }
    .specialist-grid { grid-template-columns: repeat(2, 1fr); }
    .dr-modal-overlay { padding: var(--s-3); }

    .pediatric-panel {
        grid-template-columns: 1fr;
    }
    .pediatric-text { padding: var(--s-5) var(--s-3); }
    .pediatric-media { min-height: 280px; order: -1; }

    .about-grid {
        grid-template-columns: 1fr;
        gap: var(--s-4);
    }
    .about-media { min-height: 0; order: -1; }
    .about-media img { aspect-ratio: 3 / 2; }

    .service-intro-grid { grid-template-columns: 1fr; }
    .service-intro-media { aspect-ratio: 4 / 3; min-height: 240px; order: -1; }
    .ind-grid { grid-template-columns: 1fr; }
    .stages-grid { grid-template-columns: 1fr; }
    .benefits-grid { grid-template-columns: 1fr 1fr; }
    .ind-card { padding: var(--s-4); }
    .faq-answer { padding-right: 0; }

    .modal-imgs { grid-template-columns: 1fr; }
    .modal-body { padding: var(--s-3); }
    .modal-list { grid-template-columns: 1fr; }
    .modal-meta { grid-template-columns: 1fr; gap: var(--s-2); }

    .all-services-modal,
    .all-doctors-modal { padding: var(--s-3); }
    .doc-row {
        grid-template-columns: 100px 1fr;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }
    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .cta-strip-inner {
        flex-direction: column;
        align-items: flex-start;
        padding: var(--s-5) var(--s-4);
    }

    .mobile-cta { display: block; }
    body { padding-bottom: 84px; }

    /* ══════════ Mobile UX polish ══════════════════════════════════ */

    /* Section rhythm & hierarchy */
    .section-head { margin-bottom: var(--s-4); gap: 6px; }
    .section-title { font-size: clamp(23px, 6.2vw, 30px); line-height: 1.2; }
    .section-sub { font-size: 15px; line-height: 1.62; }
    .eyebrow { font-size: 11.5px; letter-spacing: .14em; }

    /* Generous, thumb-friendly primary actions */
    .btn { min-height: 46px; }
    .services-footer .btn { width: 100%; }

    /* — Doctors: compact horizontal carousel, one-hand swipe — */
    .doctors-slider { scroll-padding-left: 20px; }
    .doctors-track { gap: var(--s-3); padding: 2px 0 8px; }
    .doctor-card { flex: 0 0 76vw; scroll-snap-align: center; border-radius: 18px; }
    .doctor-card .doctor-media { aspect-ratio: 1 / 1; }
    .doctors-track .doctor-card-body { padding: 15px 17px 17px; gap: 5px; }
    .doctors-track .doctor-card-body .doctor-name { font-size: 17px; }
    .doctors-track .doctor-card-body .doctor-bio {
        -webkit-line-clamp: 2; font-size: 13.5px; color: var(--c-ink-3);
    }

    /* — Services: collapsible accordion to cut clutter — */
    #services-megamenu { gap: 0; }
    #services-megamenu .services-col { gap: 0; }
    #services-megamenu .services-cat {
        gap: 0;
        border-bottom: 1px solid var(--c-line);
    }
    #services-megamenu .services-col:first-child .services-cat:first-child {
        border-top: 1px solid var(--c-line);
    }
    #services-megamenu .services-cat-title {
        width: 100%;
        display: flex; align-items: center; justify-content: space-between;
        min-height: 54px; padding: 14px 2px; font-size: 16px;
    }
    /* chevron only on collapsible (non-navigating) titles */
    #services-megamenu .services-cat-title--nav::after,
    #services-megamenu button.services-cat-title::after {
        content: ''; flex: none; width: 8px; height: 8px; margin-left: 12px;
        border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
        transform: rotate(45deg); transition: transform .25s; opacity: .4;
    }
    #services-megamenu .services-cat.open > .services-cat-title--nav::after,
    #services-megamenu .services-cat.open > button.services-cat-title::after {
        transform: rotate(-135deg); opacity: .65;
    }
    #services-megamenu .services-cat-list {
        max-height: 0; overflow: hidden; margin: 0;
        transition: max-height .3s ease;
    }
    #services-megamenu .services-cat.open .services-cat-list {
        max-height: 720px; padding: 0 0 12px;
    }
    #services-megamenu .services-cat-list a,
    #services-megamenu .services-cat-list button {
        padding: 10px 2px; font-size: 15px; color: var(--c-ink-2); width: 100%;
    }
}

@media (max-width: 480px) {
    .container { padding: 0 16px; }
    .topbar { font-size: 12px; }
    .header-meta-left, .header-meta-right { display: none; }
    .header-meta-inner { justify-content: center; padding: 7px 0; }
    .header-schedule-hours { font-size: 13px; }
    .hero { min-height: 60vh; padding: var(--s-5) 16px; }
    .hero-sub { font-size: 16px; }
    .section-title { font-size: 30px; }
    /* Compact 2×2 stat grid instead of a tall single-column stack */
    .trust-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-4) var(--s-3); }
    .trust-item { border: none; padding: 0; }
    .trust-num { font-size: 26px; }
    .ratings-grid { grid-template-columns: 1fr; }
    .doc-row {
        grid-template-columns: 1fr;
    }
    .doc-row-img { aspect-ratio: 16 / 10; }
    .tech-num { font-size: 44px; }
    .services-footer { justify-content: center; }
    .benefits-grid { grid-template-columns: 1fr; }
    .service-hero-price { padding: 10px 18px; font-size: 12px; }
    .service-hero-price strong { font-size: 22px; }
}

/* ═══════════════════════════════════════════════════════
   Interactive services mega-menu
   18% categories │ 22% pages │ 60% preview
   ═══════════════════════════════════════════════════════ */

.nav-dropdown-inner:has(.mega-nav) { padding: 0; }
.nav-dropdown-inner--mega { padding: 0; }

/* ── Shell ────────────────────────────────────────────── */
.mega-nav {
    display: flex;
    min-height: 360px;
    max-height: calc(100vh - 140px);
}

/* ── Col 1 · 200px · categories ──────────────────────── */
.mega-sidebar {
    width: 200px;
    flex-shrink: 0;
    border-right: 1px solid var(--c-line);
    padding: 18px 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.mega-cat-btn {
    display: block;
    width: 100%;
    text-align: left;
    padding: 9px 18px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    color: var(--c-ink-2);
    background: none;
    border: none;
    border-right: 2px solid transparent;
    cursor: pointer;
    transition: color .13s, background .13s;
    line-height: 1.35;
}
.mega-cat-btn:hover { color: var(--c-ink); background: var(--c-bg); }
.mega-cat-btn.is-active {
    color: var(--c-ink);
    font-weight: 700;
    background: var(--c-accent-soft);
    border-right-color: var(--c-accent);
}

/* ── Col 2 · 240px · pages list ──────────────────────── */
.mega-pages-col {
    width: 240px;
    flex-shrink: 0;
    border-right: 1px solid var(--c-line);
    padding: 20px 0;
    overflow-y: auto;
}
.mega-pages-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--c-ink-3);
    padding: 0 20px 10px;
    display: block;
}
.mega-pages-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.mega-page-link {
    display: block;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    color: var(--c-ink-2);
    text-decoration: none;
    transition: color .12s, background .12s, padding-left .12s;
    border-left: 2px solid transparent;
    margin-left: -1px;
}
.mega-page-link:hover,
.mega-page-link.is-active {
    color: var(--c-ink);
    font-weight: 600;
    background: var(--c-bg);
    border-left-color: var(--c-accent);
    padding-left: 22px;
}

/* ── Col 3 · compact preview card · fixed width ──────── */
.mega-preview-col {
    width: 300px;
    flex-shrink: 0;
    border-left: 1px solid var(--c-line);
    padding: 20px;
    overflow-y: auto;
}
.mega-preview-wrap {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Thumbnail image */
.mega-preview-img {
    height: 130px;
    border-radius: 12px;
    background: linear-gradient(135deg, #141414 0%, #1a2c1a 100%);
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

/* Compact placeholder when no photo exists */
.mega-preview-img--empty {
    background: linear-gradient(135deg, #111d11 0%, #162814 100%);
}

/* Price */
.mega-preview-price {
    font-size: 18px;
    font-weight: 800;
    color: var(--c-ink);
    letter-spacing: -.02em;
    line-height: 1;
}

/* Facts — single column list */
.mega-preview-facts {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mega-preview-fact {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--c-ink-2);
    line-height: 1.4;
}
.mega-preview-fact svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    stroke: var(--c-accent);
    margin-top: 1px;
}

/* CTA button */
.mega-preview-cta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 700;
    color: var(--c-accent-dk);
    background: var(--c-accent-soft);
    border-radius: 8px;
    text-decoration: none;
    transition: background .13s, gap .13s;
    width: fit-content;
}
.mega-preview-cta:hover { background: #c8edd9; gap: 8px; }

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 960px) {
    .mega-preview-col { display: none; }
    .mega-pages-col { width: auto; max-width: none; flex: 1; }
}
@media (max-width: 767px) {
    .mega-nav { flex-direction: column; min-height: auto; }
    .mega-sidebar {
        width: 100%;
        min-width: 0;
        max-width: none;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        border-right: none;
        border-bottom: 1px solid var(--c-line);
        padding: 0;
        gap: 0;
    }
    .mega-cat-btn {
        flex-shrink: 0;
        padding: 10px 14px;
        white-space: nowrap;
        border-right: none;
        border-bottom: 2px solid transparent;
    }
    .mega-cat-btn.is-active { border-right: none; border-bottom-color: var(--c-accent); }
    .mega-pages-col { width: 100%; max-width: none; border-right: none; }
    .mega-page-link { border-left: none; }
    .mega-page-link.is-active { border-left: none; padding-left: 20px; }
}
@media (max-width: 900px) {
    .svc-split-hero { padding: var(--s-6) 0; }
    .svc-split-hero-inner { grid-template-columns: 1fr; gap: var(--s-5); }
    .svc-split-hero-sub { max-width: none; }
    .svc-split-hero-img.is-illustration { min-height: 160px; }
}
@media (max-width: 600px) {
    .svc-split-hero { padding: var(--s-5) 0; }
    .svc-split-hero-price-value { font-size: 1.6rem; }
    .svc-split-hero-actions { flex-direction: column; }
    .implant-kst1-notice-actions { flex-direction: column; }
    .kst1-switch-btn, .kst1-wa-link { justify-content: center; }
}

/* ═══════════════════════════════════════════════════════
   Mobile fullscreen nav drawer
   ═══════════════════════════════════════════════════════ */

.mobile-nav { display: none; }

@media (max-width: 768px) {
    /* Drawer */
    .mobile-nav {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 200;
        background: #fff;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        transform: translateX(100%);
        transition: transform .3s cubic-bezier(.33,1,.68,1);
        pointer-events: none;
        visibility: hidden;
    }
    .mobile-nav.open {
        transform: translateX(0);
        pointer-events: all;
        visibility: visible;
    }

    /* Inner flex column fills full height */
    .mobile-nav__inner {
        display: flex;
        flex-direction: column;
        min-height: 100%;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    /* Sticky branch bar at top */
    .mobile-nav__branch-bar {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 14px 16px;
        border-bottom: 1px solid var(--c-line);
        background: var(--c-accent-soft);
        position: sticky;
        top: 0;
        z-index: 1;
    }
    .mobile-nav__branch-pin {
        width: 34px; height: 34px;
        flex-shrink: 0;
        background: var(--c-accent);
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
    }
    .mobile-nav__branch-pin svg { width: 16px; height: 16px; fill: #fff; }
    .mobile-nav__branch-info { flex: 1; min-width: 0; }
    .mobile-nav__branch-name {
        font-size: 15px; font-weight: 800;
        color: var(--c-accent-dk);
        line-height: 1.2;
    }
    .mobile-nav__branch-detail {
        font-size: 11px; font-weight: 500;
        color: var(--c-ink-2);
        margin-top: 3px;
        display: flex; flex-direction: column; gap: 1px;
    }
    .mobile-nav__branch-detail .sched-row { gap: 5px; }
    .mobile-nav__branch-detail .sched-day { color: var(--c-ink-2); }
    .mobile-nav__branch-detail .sched-time { color: var(--c-ink); }
    .mobile-nav__change {
        flex-shrink: 0;
        font-size: 11px; font-weight: 700;
        color: var(--c-accent-dk);
        background: #fff;
        border: 1.5px solid var(--c-accent);
        border-radius: 999px;
        padding: 5px 10px;
        cursor: pointer;
        white-space: nowrap;
        font-family: var(--font-body);
    }
    .mobile-nav__close {
        flex-shrink: 0;
        width: 34px; height: 34px;
        border-radius: 50%;
        border: 1.5px solid rgba(0,0,0,.12);
        background: #fff;
        display: flex; align-items: center; justify-content: center;
        cursor: pointer;
    }
    .mobile-nav__close svg {
        width: 16px; height: 16px;
        stroke: var(--c-ink); fill: none;
        stroke-width: 2.5; stroke-linecap: round;
    }

    /* Main nav links */
    .mobile-nav__links {
        padding: 6px 0;
        border-bottom: 1px solid var(--c-line);
    }
    .mobile-nav__link {
        display: flex; align-items: center; justify-content: space-between;
        padding: 14px 20px;
        font-size: 16px; font-weight: 600;
        color: var(--c-ink);
        text-decoration: none;
        border-bottom: 1px solid var(--c-line);
        font-family: var(--font-body);
    }
    .mobile-nav__link:last-child { border-bottom: none; }
    .mobile-nav__link:active { background: var(--c-bg); }
    .mobile-nav__link-arrow {
        width: 16px; height: 16px;
        stroke: var(--c-ink-3); fill: none;
        stroke-width: 2.5; stroke-linecap: round;
        flex-shrink: 0;
    }

    /* "Услуги" section label */
    .mobile-nav__sep {
        padding: 14px 20px 6px;
        font-size: 11px; font-weight: 700;
        letter-spacing: .1em; text-transform: uppercase;
        color: var(--c-ink-3);
    }

    /* Accordion categories */
    .mn-cat { border-bottom: 1px solid var(--c-line); }
    .mn-cat__hdr {
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        width: 100%; padding: 14px 20px;
        font-size: 15px; font-weight: 600; color: var(--c-ink);
        background: none; border: none; cursor: pointer; text-align: left;
        font-family: var(--font-body);
        -webkit-tap-highlight-color: transparent;
    }
    .mn-cat__hdr:active { background: var(--c-bg); }
    .mn-cat__chev {
        flex-shrink: 0;
        stroke: var(--c-ink-3); fill: none;
        stroke-width: 2.5; stroke-linecap: round;
        transition: transform .2s ease;
    }
    .mn-cat.open .mn-cat__chev { transform: rotate(90deg); }
    .mn-cat__list {
        list-style: none; margin: 0; padding: 0;
        overflow: hidden; max-height: 0;
        transition: max-height .28s ease;
    }
    .mn-cat.open .mn-cat__list { max-height: 800px; }
    .mn-cat__link {
        display: flex; align-items: center; gap: 10px;
        padding: 12px 20px 12px 44px;
        font-size: 14px; font-weight: 500; color: var(--c-ink-2);
        text-decoration: none;
        border-top: 1px solid var(--c-line);
        font-family: var(--font-body);
        -webkit-tap-highlight-color: transparent;
    }
    .mn-cat__link::before {
        content: '';
        width: 5px; height: 5px; border-radius: 50%;
        background: var(--c-accent); flex-shrink: 0;
        margin-left: -18px;
    }
    .mn-cat__link:active { background: var(--c-accent-soft); color: var(--c-accent-dk); }

    /* CTA row pinned at bottom */
    .mobile-nav__cta {
        margin-top: auto;
        padding: 16px 20px;
        border-top: 1px solid var(--c-line);
        display: flex; gap: 10px;
    }
    .mobile-nav__cta-call,
    .mobile-nav__cta-wa {
        flex: 1; justify-content: center;
        display: inline-flex; align-items: center; gap: 8px;
        padding: 13px 10px;
        border-radius: var(--r-pill);
        font-size: 14px; font-weight: 700;
        font-family: var(--font-body);
        text-decoration: none; cursor: pointer;
        border: none;
        white-space: nowrap;
    }
    .mobile-nav__cta-call {
        background: var(--c-accent); color: #fff;
    }
    .mobile-nav__cta-call:active { background: var(--c-accent-dk); }
    .mobile-nav__cta-wa {
        background: #25D366; color: #fff;
    }
    .mobile-nav__cta-wa:active { background: #1da952; }
}

/* «Работы» links point at the home works block — hidden when the branch has none (main.js renderAllCases) */
html.no-cases a[href$="#cases"],
html.no-cases li:has(> a[href$="#cases"]) { display: none !important; }

/* ───── Horizontal rail (service pages: «Специалисты», «Наши работы») ─────
   main.js enhanceRail(): swipe / trackpad / mouse drag, arrows on desktop,
   progress bar; cards snap to the start. */
.h-rail-wrap { position: relative; }
.h-rail {
    display: flex !important;
    gap: 20px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* room for card shadows / hover lift inside the scroller */
    padding: 10px 6px 26px;
    margin: -10px -6px -26px;
    scroll-padding-inline: 6px;
    outline: none;
    cursor: grab;
}
.h-rail::-webkit-scrollbar { display: none; }
.h-rail.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; }
.h-rail.is-dragging > * { pointer-events: none; }
.h-rail > * {
    /* desktop: a part of the next card peeks out, so it is obvious the row scrolls;
       with few cards they fill the row like the old grid */
    flex: 1 0 var(--rail-card);
    max-width: var(--rail-max);
    width: auto;
    min-width: 0;
    scroll-snap-align: start;
}
.h-rail { --rail-card: calc((100% - 40px) / 3.3); --rail-max: calc((100% - 40px) / 3); }
.h-rail.specialist-grid,
.h-rail.process-grid { --rail-card: calc((100% - 60px) / 4.3); --rail-max: calc((100% - 60px) / 4); }
.h-rail.cases-grid-v2 { --rail-card: calc((100% - 20px) / 2.2); --rail-max: calc((100% - 20px) / 2); align-items: stretch; }
.h-rail-wrap.is-static .h-rail { cursor: auto; }

/* depth: the cards sit above the page instead of lying flat on it */
.h-rail .doctor-card,
.h-rail .specialist-card,
.h-rail .case-card-v2 {
    border-color: rgba(20, 30, 40, 0.06);
    box-shadow: 0 1px 2px rgba(20, 30, 40, 0.04), 0 12px 32px -14px rgba(20, 30, 40, 0.22);
    transition: transform .25s ease, box-shadow .25s ease;
}
@media (hover: hover) {
    .h-rail .doctor-card:hover,
    .h-rail .specialist-card:hover,
    .h-rail .case-card-v2:hover {
        transform: translateY(-4px);
        box-shadow: 0 2px 4px rgba(20, 30, 40, 0.05), 0 22px 44px -16px rgba(20, 30, 40, 0.30);
    }
}

.h-rail .doctor-card .doctor-media { aspect-ratio: 4 / 5; }

.h-rail-btn {
    position: absolute;
    top: 42%;
    z-index: 3;
    width: 48px;
    height: 48px;
    margin-top: -24px;
    border-radius: 50%;
    border: 1px solid var(--c-line);
    background: var(--c-card);
    color: var(--c-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 8px 24px -8px rgba(20, 30, 40, 0.28);
    transition: opacity .2s, transform .2s, background .2s, color .2s;
}
.h-rail-btn:hover { background: var(--c-accent, #2bb673); border-color: transparent; color: #fff; }
.h-rail-prev { left: -24px; }
.h-rail-next { right: -24px; }
.h-rail-next svg { transform: rotate(180deg); }
.h-rail-btn:disabled { opacity: 0; pointer-events: none; transform: scale(.85); }

.h-rail-progress {
    height: 3px;
    max-width: 220px;
    margin: 18px auto 0;
    border-radius: 3px;
    background: var(--c-line);
    overflow: hidden;
}
.h-rail-progress span {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: var(--c-ink);
    transition: transform .15s linear;
}
.h-rail-wrap.is-static .h-rail-btn,
.h-rail-wrap.is-static .h-rail-progress { display: none; }

@media (max-width: 1100px) {
    .h-rail-prev { left: 4px; }
    .h-rail-next { right: 4px; }
    .h-rail { --rail-card: calc((100% - 20px) / 2.3); --rail-max: calc((100% - 20px) / 2); }
    .h-rail.specialist-grid,
    .h-rail.process-grid { --rail-card: calc((100% - 40px) / 3.3); --rail-max: calc((100% - 40px) / 3); }
    .h-rail.cases-grid-v2 { --rail-card: 78%; --rail-max: 78%; }
}
@media (max-width: 768px) {
    /* full-bleed on phones: the next card peeks in from the screen edge */
    .h-rail {
        --gutter: 20px;
        gap: 14px;
        margin-inline: calc(-1 * var(--gutter));
        padding-inline: var(--gutter);
        scroll-padding-inline: var(--gutter);
        cursor: auto;
    }
    .h-rail > * { flex: 0 0 78vw; max-width: 340px; }
    .h-rail.specialist-grid > *,
    .h-rail.process-grid > * { flex-basis: 62vw; max-width: 280px; }
    .h-rail.cases-grid-v2 > * { flex-basis: 86vw; max-width: 460px; }
    .h-rail-btn { display: none; }
}
@media (max-width: 480px) {
    .h-rail { --gutter: 16px; }
}

/* ───── Promos («Акции») & news («Новости») — main.js renderPosts() ───── */
html.no-promos a[href$="promotions.html"],
html.no-promos li:has(> a[href$="promotions.html"]),
html.no-news a[href$="news.html"],
html.no-news li:has(> a[href$="news.html"]) { display: none !important; }

.posts-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }
.posts-all { font-weight: 600; font-size: 15px; color: var(--c-accent-dk); white-space: nowrap; }
.posts-all:hover { color: var(--c-ink); }
.posts-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); align-items: start; }
.posts-list { display: flex; flex-direction: column; gap: var(--s-3); max-width: 920px; }

.post-card {
    background: var(--c-card);
    border: 1px solid rgba(20, 30, 40, 0.06);
    border-radius: var(--r-card);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 2px rgba(20, 30, 40, 0.04), 0 12px 32px -14px rgba(20, 30, 40, 0.22);
}
.h-rail .post-card { align-self: stretch; }
.post-media {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--c-accent-soft) center / cover no-repeat;
    flex: none;
}
.post-media--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--c-accent-soft) 0%, #ffffff 100%);
}
.post-media-mark { font-weight: 800; font-size: 46px; letter-spacing: -0.02em; color: var(--c-accent-dk); }
.post-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 6px 12px;
    border-radius: var(--r-pill);
    background: var(--c-accent);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.35);
}
.post-body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 0; }
.post-period { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--c-accent-dk); }
.post-period svg { width: 16px; height: 16px; flex: none; }
.post-title { font-weight: 700; font-size: 19px; line-height: 1.3; color: var(--c-ink); }
.post-text { color: var(--c-ink-2); font-size: 15px; line-height: 1.6; max-height: calc(1.6em * 3); overflow: hidden;
    -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.post-text p + p { margin-top: 0.7em; }
.post-card.is-open .post-text { max-height: none; -webkit-mask-image: none; mask-image: none; }
.post-more {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--c-accent-dk);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.post-more::after { content: ''; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
.post-card.is-open .post-more::after { transform: rotate(-135deg) translate(-2px, 0); }
.post-more[hidden] { display: none; }
.post-cta { margin-top: auto; align-self: flex-start; }
.post-body > .post-title:last-child, .post-body > .post-more + .post-cta { margin-top: auto; }
.post-date { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--c-line); font-size: 13px; color: var(--c-ink-3); }

/* news page: picture on the left */
.posts-list .post-card--news { flex-direction: row; }
.posts-list .post-card--news .post-media { width: 300px; aspect-ratio: auto; min-height: 220px; }
.posts-list .post-card--news .post-text { max-height: calc(1.6em * 4); }
.posts-list .post-card--news.is-open .post-text { max-height: none; }

/* promotions.html / news.html */
.posts-page { padding-top: var(--s-6); }
.posts-crumbs { font-size: 14px; color: var(--c-ink-3); margin-bottom: 14px; }
.posts-crumbs a { color: var(--c-ink-3); }
.posts-crumbs a:hover { color: var(--c-accent-dk); }
.posts-page h1 { margin-bottom: 10px; }
.posts-page .section-head { margin-bottom: var(--s-5); }
.posts-empty {
    text-align: center;
    padding: 48px 24px;
    border: 1px dashed var(--c-line);
    border-radius: var(--r-card);
    background: var(--c-card);
    color: var(--c-ink-2);
    max-width: 920px;
}
.posts-empty[hidden] { display: none; }
.posts-empty .btn { margin-top: 18px; }

@media (max-width: 1024px) {
    .posts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    .posts-grid { grid-template-columns: 1fr; }
    .posts-list .post-card--news { flex-direction: column; }
    .posts-list .post-card--news .post-media { width: auto; aspect-ratio: 16 / 10; min-height: 0; }
    .post-body { padding: 18px 18px 20px; }
    .post-title { font-size: 18px; }
}
@media (min-width: 1025px) and (max-width: 1360px) {
    .site-nav { gap: 22px; }
    .site-nav a { font-size: 14.5px; }
}