:root{
    --bg: #F5F8FA;
    --bg-rgb: 245,248,250;
    --bg-alt: #E7EEF3;
    --text: #0F212F;
    --text-rgb: 15,33,47;
    --text-muted: #4C6579;
    --wood: #0e2540;
    --wood-deep: #081420;
    --brand-navy: #12283F;
    --navy: #0e2540;
    --navy-2: #163457;
    --petrol: #1c5c72;
    --petrol-light: #2c7e97;
    --tooth-blue: #588cb4;
    --ivory: #f8f6f1;
    --gold: #c9a24b;
    --ink: #12203a;
    --ink-rgb: 18,32,58;
    --paper: #ffffff;
    --paper-rgb: 255,255,255;
    --muted: #5c6b81;
    --radius: 4px;
    --img-dim: 1;
    /* accent/divider: readable on LIGHT backgrounds (cards, sections) */
    --accent: #145a76;
    --divider: rgba(14,37,64,.14);
  }
  [data-theme="dark"]{
    --bg: #0E161F;
    --bg-rgb: 14,22,31;
    --bg-alt: #17232E;
    --text: #E7EFF4;
    --text-rgb: 231,239,244;
    --text-muted: #9AB0BF;
    --wood: #7FB4DA;
    --wood-deep: #588CB4;
    --ivory: #0a1729;
    --paper: #0f2038;
    --ink: #eef2f7;
    --ink-rgb: 238,242,247;
    --paper-rgb: 15,32,56;
    --muted: #9fb0c6;
    --navy-2: #0d1e35;
    --img-dim: 0.7;
    /* on dark backgrounds, gold reads better than petrol */
    --accent: var(--gold);
    --divider: rgba(201,162,75,.3);
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
  a,button,input,textarea,select,.btn{-webkit-tap-highlight-color:transparent;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    font-family:'Inter',sans-serif;
    line-height:1.5;
    background:var(--ivory);
    color:var(--ink);
    transition:background .3s ease,color .3s ease;
  }
  h1,h2,h3,h4,.serif{
    font-family:'Inter',sans-serif;
    font-weight:600;
    letter-spacing:.01em;
  }
  a{color:inherit;text-decoration:none;}
  /* Inline cross-reference links inside body copy (e.g. "подробнее — на
     странице «О клинике»") inherit plain text color from the reset above
     and give no visual cue they're clickable. Scoped to <section> so it
     only reaches body-copy links — nav and footer links live outside any
     <section> and already have their own explicit styling, untouched here.
     var(--accent) already flips per light/dark theme, so this needs no
     separate dark-mode rule. */
  section p a{
    color:var(--accent);
    transition:text-shadow .25s ease;
  }
  section p a:hover,section p a:focus-visible{
    text-shadow:0.3px 0 currentColor,-0.3px 0 currentColor;
  }
  img{max-width:100%;display:block;filter:brightness(var(--img-dim));transition:filter .3s ease;}
  .wrap{max-width:1180px;margin:0 auto;padding:0 32px;}
  .eyebrow{
    text-transform:uppercase;
    letter-spacing:.18em;
    font-size:12px;
    color:var(--accent);
    font-weight:700;
  }
  .hero .eyebrow{color:var(--gold);}

  /* HERO — full-bleed photo style, matching homepage */
  .hero{
    /* Per-page photo/gradient are set via --hero-photo / --hero-gradient
       (inline style on the .hero element) so this shared rule can restyle
       the layout (e.g. the mobile stacked layout below) without every page
       having to repeat the full gradient in its own markup. */
    background:var(--hero-gradient, linear-gradient(100deg,
      rgba(14,37,64,.88) 0%,
      rgba(14,37,64,.66) 38%,
      rgba(14,37,64,.28) 68%,
      rgba(14,37,64,.08) 100%
    )), var(--hero-photo, url('/img/hero-reception.jpg')) center/cover no-repeat, var(--navy-2);
    color:#f2f0e8;
    padding:150px 0 140px;
    min-height:736px;
    position:relative;
    overflow:hidden;
  }
  /* Guarantees the bottom cta-row stays readable even over a bright photo —
     the diagonal gradient above only darkens left-to-right, not the bottom
     edge specifically. */
  .hero::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:220px;
    background:linear-gradient(0deg, rgba(14,37,64,.7) 0%, rgba(14,37,64,0) 100%);
    z-index:1;pointer-events:none;
  }
  .hero .wrap{display:block;}
  .hero h1{font-size:clamp(36px,5vw,58px);line-height:1.08;margin:0;max-width:560px;}
  .hero p.lead{color:#cdd8e6;font-size:17px;line-height:1.6;max-width:460px;margin-top:20px;}
  .hero h1, .hero p.lead, .hero .crumbs-inline{text-shadow:0 2px 16px rgba(0,0,0,.45);position:relative;z-index:2;}
  .hero .crumbs-inline{color:#cdd8e6;}
  .hero .crumbs-inline a{color:#cdd8e6;}
  .price-tag{
    display:inline-flex;align-items:baseline;gap:8px;
    margin:26px 0 30px;padding:14px 20px;
    border:1px solid rgba(201,162,75,.4);border-radius:var(--radius);
    background:rgba(255,255,255,.03);
  }
  .price-tag .num{font-family:'Inter',sans-serif;font-size:30px;color:var(--gold);}
  .price-tag .cur{font-size:14px;color:#cdd8e6;}
  .cta-row{
    position:absolute;left:32px;right:32px;bottom:52px;z-index:4;
    display:flex;align-items:center;gap:14px;flex-wrap:nowrap;
  }
  .cta-row .seg{flex:1 1 auto;height:1px;background:rgba(255,255,255,.35);}
  .cta-row .btn{border-radius:14px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);gap:8px;transition:background .25s ease, border-color .25s ease, box-shadow .3s ease;}
  .cta-row .btn.js-open-booking{background:rgba(20,90,118,.35);border:1px solid rgba(20,90,118,.7);color:#fff;flex-shrink:0;}
  .cta-row .btn.js-open-booking:hover{background:rgba(20,90,118,.48);border-color:rgba(20,90,118,1);box-shadow:0 0 0 6px rgba(20,90,118,.28);}
  .cta-row .btn.js-open-booking:active{background:rgba(20,90,118,.6);box-shadow:0 0 0 2px rgba(20,90,118,.4);}
  .btn.primary{background:rgba(201,162,75,.22);border:1px solid rgba(201,162,75,.65);color:var(--navy);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background .25s ease, border-color .25s ease, box-shadow .3s ease;}
  .btn.primary:hover{background:rgba(201,162,75,.34);border-color:rgba(201,162,75,.9);box-shadow:0 0 0 6px rgba(201,162,75,.18);}
  .btn.primary:active{background:rgba(201,162,75,.44);box-shadow:0 0 0 2px rgba(201,162,75,.26);}
  [data-theme="dark"] .btn.primary{color:#fff;}
  .btn.ghost{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.35);color:#f2f0e8;flex-shrink:0;}
  .btn.ghost:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.65);box-shadow:0 0 0 6px rgba(255,255,255,.14);color:#fff;}
  .btn.ghost:active{background:rgba(255,255,255,.2);box-shadow:0 0 0 2px rgba(255,255,255,.22);color:#fff;}
  [data-theme="dark"] .cta-row .btn.js-open-booking{background:rgba(201,162,75,.28);border-color:rgba(201,162,75,.75);}
  [data-theme="dark"] .cta-row .btn.js-open-booking:hover{background:rgba(201,162,75,.4);border-color:rgba(201,162,75,1);box-shadow:0 0 0 6px rgba(201,162,75,.28);}
  [data-theme="dark"] .cta-row .btn.js-open-booking:active{background:rgba(201,162,75,.52);box-shadow:0 0 0 2px rgba(201,162,75,.36);}
  @media(max-width:860px){
    .cta-row{position:absolute;left:18px;right:18px;bottom:22px;top:auto;margin-top:0;flex-wrap:wrap;row-gap:10px;}
    .cta-row .seg{display:none;}
    .cta-row .btn{width:100%;justify-content:center;}
  }

  /* Signature: starry sparkle field behind tooth glyph */
  .signature{
    position:relative;aspect-ratio:1/1;max-width:340px;justify-self:center;
  }
  .signature svg.field{position:absolute;inset:0;width:100%;height:100%;z-index:1;}
  @media (prefers-reduced-motion: reduce){ .signature svg.field animate{ }}
  .signature svg.tooth-layer{
    position:relative;z-index:2;width:62%;margin:19% auto;display:block;
    filter:drop-shadow(0 0 18px rgba(232,200,116,.35)) drop-shadow(0 12px 30px rgba(0,0,0,.35));
  }

  /* SECTIONS */
  section{padding:72px 0;}
  section.alt{background:var(--paper);}
  .section-head{max-width:60ch;margin-bottom:36px;}
  .section-head h2{font-size:clamp(26px,3vw,36px);margin:8px 0 12px;}
  .section-head p{color:var(--muted);line-height:1.6;}

  .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
  .card{
    background:var(--paper);border:1px solid var(--divider);
    border-radius:var(--radius);padding:26px;
  }
  .card h3{font-size:20px;margin:0 0 10px;}
  .card p{color:var(--muted);font-size:15px;line-height:1.55;margin:0;}

  .komfort-groups{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
  .komfort-group{
    background:var(--bg);border:1px solid var(--divider);
    border-radius:var(--radius);padding:24px;
  }
  .komfort-group h3{font-size:16px;margin:0 0 14px;color:var(--accent);}
  .komfort-group ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;}
  .komfort-group li{
    font-size:14.5px;line-height:1.5;color:var(--text);
    padding-left:20px;position:relative;
  }
  .komfort-group li::before{
    content:'';position:absolute;left:0;top:7px;width:8px;height:8px;
    border-radius:50%;background:var(--gold);
  }
  @media(max-width:860px){
    .komfort-groups{grid-template-columns:1fr;}
  }

  .steps{counter-reset:step;list-style:none;padding:0;margin:0;display:grid;gap:22px;}
  .steps li{
    display:grid;grid-template-columns:44px 1fr;gap:18px;align-items:start;
    padding-bottom:22px;border-bottom:1px solid var(--divider);
  }
  .steps li:last-child{border-bottom:none;padding-bottom:0;}
  .steps li::before{
    counter-increment:step;content:counter(step);
    font-family:'Inter',sans-serif;font-weight:700;font-size:17px;line-height:1;color:var(--accent);
    border:1px solid var(--accent);border-radius:50%;box-sizing:border-box;
    width:44px;height:44px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;text-align:center;
  }
  .steps h4{margin:0 0 4px;font-family:'Inter',sans-serif;font-size:16px;font-weight:700;}
  .steps p{margin:0;color:var(--muted);font-size:15px;line-height:1.55;}

  /* Doctor */
  .doctor{
    display:grid;grid-template-columns:220px 1fr;gap:36px;align-items:center;
    background:var(--navy);color:#f2f0e8;border-radius:var(--radius);
    padding:36px;
  }
  .doctor .photo{
    width:220px;height:220px;border-radius:50%;
    background:var(--navy-2);
    display:flex;align-items:center;justify-content:center;
    color:#7c8ba3;font-size:13px;text-align:center;border:1px solid rgba(201,162,75,.35);
  }
  .doctor h3{font-size:26px;margin:0 0 6px;color:#fff;}
  .doctor .role{color:var(--gold);font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px;}
  .doctor p{color:#cdd8e6;line-height:1.6;font-size:15px;max-width:56ch;}
  .doctor .tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;}
  .doctor .tags span{
    font-size:12px;border:1px solid rgba(201,162,75,.4);border-radius:999px;
    padding:5px 12px;color:#e8e3d6;
  }

  /* Before/after */
  .gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
  .gallery .shot{
    aspect-ratio:4/3;background:var(--navy-2);border-radius:var(--radius);
    display:flex;align-items:center;justify-content:center;
    color:var(--muted);font-size:13px;text-align:center;padding:12px;
    border:1px dashed rgba(201,162,75,.35);
  }

  /* FAQ accordion — matches homepage style */
  .faq{max-width:800px;}
  .faq details{
    border-bottom:1px solid var(--divider);
    padding:18px 0;
  }
  .faq summary{
    cursor:pointer;font-weight:600;font-size:16px;
    display:flex;justify-content:space-between;align-items:center;
    list-style:none;
  }
  .faq summary::-webkit-details-marker{display:none;}
  .faq summary::after{content:"+";font-size:20px;color:var(--accent);}
  .faq details[open] summary::after{content:"–";}
  .faq p{color:var(--muted);margin:12px 0 0;line-height:1.6;font-size:15px;}

  /* Local SEO strip */
  .locality{
    background:var(--ivory);border-top:1px solid var(--divider);
    border-bottom:1px solid var(--divider);
    padding:28px 0;font-size:14px;color:var(--muted);
  }
  .locality strong{color:var(--ink);}

  footer.site{background:var(--navy);color:#cdd8e6;padding:40px 0;font-size:14px;}
  footer.site a{color:#cdd8e6;text-decoration:none;}
  footer.site a:hover{color:var(--gold);}

  @media (max-width:860px){
    .hero .wrap{grid-template-columns:1fr;}
    .signature{margin-top:20px;}
    .grid-3{grid-template-columns:1fr;}
    .doctor{grid-template-columns:1fr;text-align:center;}
    .doctor .photo{margin:0 auto;}
    .doctor .tags{justify-content:center;}
    .gallery{grid-template-columns:1fr 1fr;}
  }

  .hero-photo-zoom{
    display:block;position:relative;border-radius:var(--radius);overflow:hidden;
    aspect-ratio:4/5;background:var(--navy-2);cursor:pointer;
  }
  .hero-photo-zoom img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;display:block;}
  .hero-photo-zoom-ph{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;
    color:rgba(242,240,232,.5);font-size:14px;padding:20px;transition:transform .5s ease;
  }
  .hero-photo-zoom:hover img,.hero-photo-zoom:hover .hero-photo-zoom-ph{transform:scale(1.05);}

  
  /* Glass button — rose-gold ring, blue icon (currentColor via the SVG's own
     stroke/fill), frosted translucent backdrop. Blue reuses the same
     tooth-blue family as the language pill (#3f7ba3 / #79aed1) for
     consistency across the site's floating UI. */
  .mobile-multi-btn button{
    width:56px;height:56px;border-radius:50%;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,.55);
    border:1.5px solid #c9a08a;
    backdrop-filter:blur(14px) saturate(180%);
    -webkit-backdrop-filter:blur(14px) saturate(180%);
    color:#3f7ba3;
    box-shadow:0 10px 28px rgba(var(--text-rgb),0.2), inset 0 1px 0 rgba(255,255,255,.5);
    transition:background .25s ease, border-color .25s ease, box-shadow .3s ease, transform .25s ease, color .25s ease;
  }
  [data-theme="dark"] .mobile-multi-btn button{
    background:rgba(20,31,46,.55);
    border-color:#d9a79b;
    color:#79aed1;
    box-shadow:0 10px 28px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.08);
  }
  /* Hover — same language as the header's "Записаться" button
     (.btn:hover further down: darken/intensify + a small lift), adapted to
     this button's glass/rose-gold palette. */
  .mobile-multi-btn button:hover{
    background:rgba(255,255,255,.75);
    border-color:#dba996;
    color:#2c5f80;
    box-shadow:0 0 0 6px rgba(201,160,138,.22), 0 14px 32px rgba(var(--text-rgb),0.26);
    transform:translateY(-2px);
  }
  [data-theme="dark"] .mobile-multi-btn button:hover{
    background:rgba(20,31,46,.72);
    border-color:#e6bdae;
    color:#9cc4e0;
    box-shadow:0 0 0 6px rgba(217,167,150,.24), 0 14px 32px rgba(0,0,0,.5);
  }
  @media(prefers-reduced-motion:reduce){.mobile-multi-btn button{transition:none;}}
  .mobile-multi-btn .mm-panel{
    position:absolute;right:0;bottom:calc(100% + 14px);background:var(--paper);
    border:1px solid var(--divider);border-radius:var(--radius);
    box-shadow:0 20px 50px rgba(var(--ink-rgb),0.18);
    padding:22px;min-width:240px;display:flex;flex-direction:column;align-items:center;text-align:center;z-index:120;
    opacity:0;pointer-events:none;transform:translateY(10px) scale(0.94);transform-origin:bottom right;
    transition:opacity .3s cubic-bezier(.34,1.56,.64,1), transform .3s cubic-bezier(.34,1.56,.64,1);
  }
  .mobile-multi-btn .mm-panel.open{opacity:1;pointer-events:auto;transform:translateY(0) scale(1);}
  .mm-panel-label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-top:12px;}
  .mm-panel-num{font-size:18px;font-weight:700;color:var(--ink);margin-top:2px;}
  .mm-panel-link{margin-top:16px;padding-top:14px;border-top:1px solid var(--divider);width:100%;font-size:13px;font-weight:600;color:var(--accent);}

  /* Mobile floating quick-action panel — "Записаться на визит" glass button (light/dark aware via var(--accent)) */
  .mm-panel .btn.js-open-booking{
    border-radius:14px;
    background:rgba(20,90,118,.12);
    border:1px solid rgba(20,90,118,.4);
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    color:var(--accent);
    transition:background .25s ease, border-color .25s ease, box-shadow .3s ease;
  }
  .mm-panel .btn.js-open-booking:hover{background:rgba(20,90,118,.18);border-color:rgba(20,90,118,.65);box-shadow:0 0 0 6px rgba(20,90,118,.15);}
  .mm-panel .btn.js-open-booking:active{background:rgba(20,90,118,.28);box-shadow:0 0 0 2px rgba(20,90,118,.22);}
  [data-theme="dark"] .mm-panel .btn.js-open-booking{background:rgba(201,162,75,.14);border-color:rgba(201,162,75,.45);}
  [data-theme="dark"] .mm-panel .btn.js-open-booking:hover{background:rgba(201,162,75,.22);border-color:rgba(201,162,75,.75);box-shadow:0 0 0 6px rgba(201,162,75,.18);}
  [data-theme="dark"] .mm-panel .btn.js-open-booking:active{background:rgba(201,162,75,.32);box-shadow:0 0 0 2px rgba(201,162,75,.26);}

  /* Lightbox — shared by doctor photo carousels */
  .lightbox{
    position:fixed;inset:0;background:rgba(10,20,30,.94);z-index:300;
    display:none;align-items:center;justify-content:center;
  }
  .lightbox.open{display:flex;}
  .lightbox-stage{position:relative;max-width:min(900px,92vw);max-height:82vh;display:flex;flex-direction:column;align-items:center;}
  .lightbox-stage img{max-width:100%;max-height:80vh;object-fit:contain;border-radius:8px;}
  .lightbox-counter{color:rgba(255,255,255,.6);font-size:13px;margin-top:10px;}
  .lightbox-close{position:absolute;top:20px;right:24px;background:none;border:none;color:#fff;font-size:26px;cursor:pointer;z-index:2;}
  .lightbox-nav{
    position:fixed;top:50%;transform:translateY(-50%);z-index:2;
    width:52px;height:52px;border-radius:50%;flex-shrink:0;
    background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);
    color:#fff;font-size:26px;line-height:1;cursor:pointer;user-select:none;
    display:flex;align-items:center;justify-content:center;
  }
  .lightbox-nav:hover{background:rgba(255,255,255,.2);}
  .lightbox-nav.prev{left:24px;}
  .lightbox-nav.next{right:24px;}
  @media(max-width:600px){
    .lightbox-nav{width:40px;height:40px;font-size:20px;}
    .lightbox-nav.prev{left:8px;}
    .lightbox-nav.next{right:8px;}
    .lightbox-close{top:14px;right:14px;font-size:22px;}
  }
  .doc-g-thumb{cursor:pointer;}
  .case-tag{color:var(--gold);font-size:15px;font-weight:700;letter-spacing:.02em;margin:14px 0 0;list-style:none;padding:0;}
  .case-tag li{padding:3px 0;}

  /* Booking modal — shared across all pages */
  .booking-modal{position:fixed;inset:0;z-index:400;display:none;align-items:center;justify-content:center;padding:20px;}
  .booking-modal.open{display:flex;}
  .booking-backdrop{position:absolute;inset:0;background:rgba(10,20,30,.55);}
  .booking-card{
    position:relative;background:var(--bg);border-radius:var(--radius);
    padding:34px 30px;max-width:400px;width:100%;box-shadow:0 30px 70px rgba(0,0,0,.3);
  }
  .booking-card h3{margin:0 0 8px;font-size:22px;}
  .booking-sub{color:var(--text-muted);font-size:14px;margin:0 0 20px;line-height:1.5;}
  #bookingForm{display:flex;flex-direction:column;gap:14px;}
  #bookingForm label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--text-muted);}
  #bookingForm input, #bookingForm textarea{
    font-family:'Inter',sans-serif;font-size:15px;color:var(--text);
    border:1px solid rgba(var(--text-rgb),0.18);border-radius:8px;padding:10px 12px;
    background:var(--bg-alt);resize:vertical;
  }
  #bookingForm input:focus, #bookingForm textarea:focus{outline:2px solid var(--wood);outline-offset:1px;}
  .booking-close{
    position:absolute;top:16px;right:16px;background:none;border:none;
    font-size:18px;color:var(--text-muted);cursor:pointer;padding:4px;
  }
  .booking-check{
    width:52px;height:52px;border-radius:50%;background:var(--wood);color:#fff;
    display:flex;align-items:center;justify-content:center;font-size:24px;margin:0 auto 16px;
  }
  .doc-gallery-strip{
    display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;padding:4px 4px 8px;scrollbar-width:none;
  }
  .doc-gallery-strip::-webkit-scrollbar{display:none;}
  .doc-g-thumb{
    flex:0 0 auto;height:320px;scroll-snap-align:start;border-radius:var(--radius);
    overflow:hidden;position:relative;box-shadow:0 10px 24px rgba(var(--text-rgb),0.12);
  }
  .doc-g-thumb img{height:100%;width:auto;object-fit:cover;display:block;}
  @media(max-width:600px){
    .doc-gallery-strip{gap:10px;}
    /* Unify with the homepage's photo-strip thumbnails (.g-thumb) — same
       radius family as the other photo containers on mobile. */
    .doc-g-thumb{height:220px;border-radius:18px;}
  }


  .crumbs-inline{font-size:13px;color:var(--muted);margin-bottom:24px;}
  .crumb-active{color:#c9a24b;}
  .crumbs-inline a{color:var(--muted);text-decoration:none;}
  .crumbs-inline a:hover{color:#c9a24b;}

  header{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(var(--bg-rgb),0.85);backdrop-filter:blur(8px);}
  nav.wrap{height:88px;display:flex;align-items:center;gap:28px;}
  .logo{font-family:'Inter',sans-serif;font-size:22px;font-weight:300;flex-shrink:0;white-space:nowrap;}
  .navlinks{display:flex;gap:22px;font-size:14px;font-weight:600;letter-spacing:.02em;color:var(--text-muted);}
  .navlinks a{white-space:nowrap;}
  .navlinks a:hover{color:var(--wood-deep);}
  .nav-highlight{color:var(--wood-deep) !important;font-weight:700;}

  .nav-works-btn{
    position:relative;padding:8px 18px;border-radius:999px;border:1.5px solid rgba(201,162,75,.45);
    color:var(--wood-deep);font-weight:700;font-size:13px;white-space:nowrap;
    transition:border-color .3s ease, box-shadow .3s ease, transform .2s ease;
  }
  .nav-works-btn:hover{
    border-color:var(--wood);box-shadow:0 0 0 4px rgba(201,162,75,.14);transform:translateY(-1px);
  }
  @media(max-width:860px){.nav-works-btn{display:none;}}

  .mobile-multi-btn{
    display:block;position:fixed;right:18px;bottom:74px;z-index:150;
  }
  @media(max-width:860px){
    #navBookingBtn{display:none;}
  }
  header:has(.mobile-menu.open) + .mobile-multi-btn{display:none;}

  .phone-dropdown{position:relative;}
  .phone-btn{
    width:38px;height:38px;border-radius:50%;border:1px solid rgba(var(--text-rgb),0.18);
    background:none;color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer;
  }
  .phone-btn:hover{border-color:var(--wood);color:var(--wood);}
  .phone-panel{
    position:absolute;top:calc(100% + 12px);right:0;background:var(--bg);
    border:1px solid rgba(var(--text-rgb),0.12);border-radius:var(--radius);
    box-shadow:0 20px 50px rgba(var(--text-rgb),0.18);
    padding:22px;min-width:240px;display:flex;flex-direction:column;align-items:center;text-align:center;z-index:120;
    opacity:0;pointer-events:none;transform:translateY(10px) scale(0.94);transform-origin:top right;
    transition:opacity .3s cubic-bezier(.34,1.56,.64,1), transform .3s cubic-bezier(.34,1.56,.64,1);
  }
  .phone-panel.open{opacity:1;pointer-events:auto;transform:translateY(0) scale(1);}
  .phone-panel-label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-top:12px;}
  .phone-panel-num{font-size:18px;font-weight:700;color:var(--text);margin-top:2px;}
  .phone-panel-link{margin-top:16px;padding-top:14px;border-top:1px solid rgba(var(--text-rgb),0.1);width:100%;font-size:13px;font-weight:600;color:var(--wood);}
  @media(max-width:860px){.phone-dropdown{display:none;}}
  .navcta{display:flex;align-items:center;gap:20px;margin-left:auto;}
  .langs{display:none;gap:4px;font-size:11px;font-weight:600;}

  /* language dropdown — outlined, transparent */
  .lang-dropdown{position:relative;display:block;flex-shrink:0;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;}
  .lang-current{
    display:flex;align-items:center;justify-content:center;
    background:transparent;
    border:1.5px solid #588cb4;border-radius:17px;
    height:34px;padding:0 12px;
    font-size:12px;font-weight:600;color:var(--text);cursor:pointer;
    position:relative;z-index:2;
    transition:border-color .2s ease, background .2s ease, color .15s ease, border-radius .2s ease, width .42s cubic-bezier(.34,1.15,.4,1);
  }
  /* Hover glass only for real pointer devices — on touch, :hover can get
     "stuck" after a tap (no mouse to move away), which fought with the open
     state below on some Android browsers. */
  @media (hover:hover) and (pointer:fine){
    .lang-current:hover{
      background:rgba(255,255,255,.55);
      backdrop-filter:blur(18px) saturate(180%);
      -webkit-backdrop-filter:blur(18px) saturate(180%);
    }
  }
  [data-theme="dark"] .lang-current{
    border-color:#588cb4;
  }
  @media (hover:hover) and (pointer:fine){
    [data-theme="dark"] .lang-current:hover{background:rgba(20,31,46,.5);}
  }
  /* Fade the closed pill's own "RU" label + arrow (both use currentColor) while
     open — the panel's background is transparent by design, so without this the
     menu's first ("RU") row shows straight through and doubles up with the pill's
     own label sitting on top of it at the same 34px slot. */
  /* Drop the pill's own bottom edge while open — flat, square bottom corners
     with no border-bottom color — so it merges straight into the menu panel
     below instead of showing a seam line where pill meets panel. Some mobile
     browsers (e.g. Samsung Internet) don't composite a backdrop-filter panel
     correctly underneath another positioned element stacked above it — even
     a transparent one — and render that overlapped strip as a flat, unblurred
     tint instead of matching the rest of the panel. Dropping the pill behind
     the menu in stacking order (z-index below the menu's, pointer-events off)
     removes it from that compositing stack entirely, so the menu's own glass
     panel renders as one uniform surface top to bottom with nothing layered
     above it to interfere. Taps on this now-inert top slot simply fall
     through to the menu's own "current" button underneath, which is already
     a no-op (you're already on this language). */
  .lang-dropdown.open .lang-current{
    border-color:#3f7ba3;border-bottom-color:transparent;
    border-bottom-left-radius:0;border-bottom-right-radius:0;
    background:transparent !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
    color:transparent;z-index:0;pointer-events:none;
  }
  [data-theme="dark"] .lang-dropdown.open .lang-current{border-color:#79aed1;border-bottom-color:transparent;background:transparent !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;color:transparent;}
  .lang-current-label{display:flex;align-items:center;transition:opacity .15s ease;}

  /* Same border-radius (17px) and border color/width as .lang-current so the
     panel reads as one continuous outline flowing out of the pill, not a
     separate shape — a plain 999px radius on this much taller box would clamp
     to a wider corner curve than the pill's and visibly stick out past it. */
  .lang-menu{
    position:absolute;top:0;left:0;width:100%;height:34px;
    background:rgba(255,255,255,.55);
    -webkit-backdrop-filter:blur(18px) saturate(180%);
    backdrop-filter:blur(18px) saturate(180%);
    border:1.5px solid #3f7ba3;border-radius:17px;
    box-shadow:0 16px 34px rgba(var(--text-rgb),.16), inset 0 1px 0 rgba(255,255,255,.5);
    overflow:hidden;display:flex;flex-direction:column;padding:3px;
    opacity:0;transform:scaleY(.4);transform-origin:top center;
    pointer-events:none;z-index:1;
    transition:opacity .26s cubic-bezier(.4,0,.2,1), transform .34s cubic-bezier(.34,1.1,.4,1), height .34s cubic-bezier(.34,1.1,.4,1);
  }
  [data-theme="dark"] .lang-menu{
    background:rgba(20,31,46,.5);border-color:#79aed1;
    box-shadow:0 16px 34px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
  }
  .lang-dropdown.open .lang-menu{opacity:1;transform:scaleY(1);pointer-events:auto;height:122px;}
  .lang-menu button{
    height:34px;display:flex;align-items:center;justify-content:center;flex-shrink:0;
    background:none;border:none;border-radius:999px;
    font-size:12px;font-weight:700;color:var(--text-muted);cursor:pointer;
    transition:background .15s ease,color .15s ease;
  }
  [data-theme="dark"] .lang-menu button{color:rgba(255,255,255,.55);}
  .lang-menu button:hover{background:rgba(201,162,75,.14);color:var(--text);}
  [data-theme="dark"] .lang-menu button:hover{background:rgba(255,255,255,.08);color:#fff;}
  /* The pill sits at z-index:2 directly on top of the menu's first 34px row
     (its own resting position), so whichever button lands in that row is
     unreachable by click/tap — the pill physically blocks it. Forcing the
     "current" button to the top of the stack with order:-1 puts the one
     genuinely no-op button (you're already on this language) under the pill
     instead of whatever happens to be first in RU/UA/EN markup order — so
     every real destination stays clickable, on every language page. */
  .lang-menu button.current{color:var(--gold);order:-1;}

  /* hamburger */
  .menu-toggle{
    display:none;background:none;border:none;cursor:pointer;padding:4px;
    color:var(--text);align-items:center;justify-content:center;
  }

  /* mobile dropdown panel */
  .mobile-menu{
    position:absolute;top:100%;left:0;right:0;
    display:flex;flex-direction:column;background:var(--bg);
    border-top:1px solid rgba(var(--text-rgb),0.1);
    padding:8px 24px 20px;
    opacity:0;pointer-events:none;transform:translateY(-8px) scale(0.98);transform-origin:top center;
    transition:opacity .3s cubic-bezier(.34,1.56,.64,1), transform .3s cubic-bezier(.34,1.56,.64,1);
  }
  .mobile-menu.open{opacity:1;pointer-events:auto;transform:translateY(0) scale(1);}
  .mobile-menu a{
    padding:14px 2px;font-size:15.5px;color:var(--text);
    border-bottom:1px solid rgba(var(--text-rgb),0.08);
  }
  .mobile-menu .mobile-langs{display:flex;gap:8px;margin-top:16px;}
  .nav-works-dot{
    display:flex;align-items:center;gap:8px;
    margin-top:10px;padding-top:22px !important;
    border-top:1px solid rgba(var(--text-rgb),0.14) !important;
  }
  .nav-works-dot::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--wood);flex-shrink:0;}
  .mobile-menu .mobile-langs button{
    flex:1;padding:9px;border-radius:8px;border:1px solid rgba(var(--text-rgb),0.15);
    background:none;font-size:13px;font-weight:600;color:var(--text);cursor:pointer;
  }
  .mobile-menu .mobile-langs button.active{background:var(--wood);color:#fff;border-color:var(--wood);}

  @media(max-width:860px){
    .langs{display:none;}
    .lang-dropdown{display:block;}
    .menu-toggle{display:flex;}
  }
  .langbtn{padding:4px 8px;border:1px solid rgba(var(--text-rgb),0.35);border-radius:20px;opacity:.85;background:none;cursor:pointer;color:var(--text);}
  .langbtn.active{opacity:1;background:var(--text);color:var(--bg);border-color:var(--text);}
  .theme-toggle{
    display:flex;align-items:center;justify-content:center;
    width:34px;height:34px;border-radius:50%;
    border:1px solid rgba(var(--text-rgb),0.15);background:none;color:var(--text);
    cursor:pointer;transition:background .2s, color .2s;
  }
  .theme-toggle:hover{background:rgba(var(--text-rgb),0.08);}
  [data-theme="dark"] .hero-photo img,
  [data-theme="dark"] .g-item img{
    filter:brightness(0.7);
  }
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--wood);color:#fff;height:46px;padding:0 26px;line-height:1;border-radius:40px;font-size:14px;font-weight:600;border:none;cursor:pointer;transition:background .25s, transform .25s;box-sizing:border-box;}
  .btn:hover{background:var(--wood-deep);transform:translateY(-1px);}
  .btn-outline{background:transparent;border:1px solid var(--text);color:var(--text);}
  .btn-outline:hover{background:var(--text);color:var(--bg);}
  .hero .btn-outline{border-color:rgba(255,255,255,.75);color:#fff;}
  .hero .btn-outline:hover{background:#fff;color:var(--brand-navy);}
  a:focus-visible, button:focus-visible, input:focus-visible{outline:2px solid var(--wood-deep);outline-offset:3px;}
  @media(max-width:860px){.navlinks{display:none;}}
  .wrap{width:100%;}
  @keyframes chevronShimmer{
    0%,100%{border-right-color:rgba(255,255,255,.22);border-bottom-color:rgba(255,255,255,.22);}
    50%{border-right-color:#0e2540;border-bottom-color:#0e2540;}
  }
  @media(max-width:860px){
    nav.wrap{gap:16px;}
    /* Heading stays a fixed-width column on the left; the lead panel is a
       second flex item that opens out to the right of it (was: stacked
       below, full-width). Breadcrumbs hidden on mobile (crumbs reachable
       on desktop; not worth the vertical space here). Chevron sits
       centered below the heading, pointing right (toward where the panel
       will open), shimmering between transparent and dark navy until
       tapped; on open it stops and flips to point left. Scroll allowed
       inside the panel if the text runs longer than its capped height. */
    .hero{
      padding:88px 0 90px;min-height:0;height:460px;
      background:
        radial-gradient(ellipse 75% 75% at 0% 0%, rgba(14,37,64,.8) 0%, rgba(14,37,64,.4) 60%, rgba(14,37,64,0) 100%),
        var(--hero-photo, url('/img/hero-reception.jpg')) center/cover no-repeat,
        var(--navy-2) !important;
    }
    .hero .wrap{display:flex;flex-wrap:wrap;align-items:flex-start;}
    .hero .crumbs-inline{display:none;}
    .hero h1{
      display:block;flex:0 0 170px;width:170px;max-width:170px;text-align:left;
      font-size:24px;line-height:1.24;margin:22px 0 0;
      color:#f2f0e8;text-shadow:0 2px 16px rgba(0,0,0,.5);
      cursor:pointer;
    }
    .hero h1::after{
      content:"";display:block;width:9px;height:9px;margin:10px auto 0;
      border-right:2px solid rgba(255,255,255,.22);border-bottom:2px solid rgba(255,255,255,.22);
      transform:rotate(-45deg);transition:transform .25s ease;
      animation:chevronShimmer 2.2s ease-in-out infinite;
    }
    .hero h1.lead-open::after{
      transform:rotate(135deg);animation:none;
      border-right-color:rgba(255,255,255,.85);border-bottom-color:rgba(255,255,255,.85);
    }
    .hero p.lead{
      flex:0 0 auto;width:0;max-width:0;margin:22px 0 0 0;text-align:left;
      font-size:13px;line-height:1.45;
      color:#f8fafc;text-shadow:0 1px 3px rgba(0,0,0,.35);
      max-height:220px;opacity:0;overflow:hidden;
      padding:0;border-radius:12px;
      background:rgba(255,255,255,0);
      border:1px solid rgba(255,255,255,0);
      backdrop-filter:blur(0px);-webkit-backdrop-filter:blur(0px);
      transform:translateX(-6px);
      transition:
        width .4s cubic-bezier(.16,1,.3,1),
        max-width .4s cubic-bezier(.16,1,.3,1),
        margin-left .4s cubic-bezier(.16,1,.3,1),
        padding .4s cubic-bezier(.16,1,.3,1),
        opacity .3s ease,
        transform .4s cubic-bezier(.34,1.56,.64,1),
        background-color .4s ease,
        border-color .4s ease,
        backdrop-filter .4s ease;
    }
    .hero p.lead.lead-open{
      width:172px;max-width:172px;margin:22px 0 0 14px;
      opacity:1;
      padding:10px 12px;
      background:rgba(255,255,255,.14);
      border-color:rgba(255,255,255,.35);
      backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
      transform:translateX(0);
      overflow-y:auto;overflow-x:hidden;
    }
    .hero .cta-row{
      position:absolute;left:18px;right:18px;bottom:22px;top:auto;margin-top:0;
      flex-wrap:wrap;row-gap:10px;
    }
    .hero .cta-row .seg{display:none;}
    .hero .cta-row .btn{padding:0 18px;height:40px;font-size:13px;width:auto;justify-content:center;}
    .hero .cta-row .btn:only-of-type{width:100%;}
    .wrap{padding:0 12px 0 14px;}
    .logo{font-size:16px;gap:6px !important;}
    .logo img.brand-mark{height:40px;}
    .navcta{gap:8px;margin-left:auto;}
    .langs{gap:2px;}
    .langbtn{padding:2px 5px;font-size:9px;}
    .theme-toggle{width:42px;height:42px;}
    .theme-toggle svg{width:21px;height:21px;}
    .menu-toggle svg{width:27px;height:27px;}
  }

  /* Patient case modal — dynamic states set only via JS, must stay even if unused in static markup */
  .patient-modal-overlay.open{display:flex;}
  .pm-thumb{width:42px;height:42px;border-radius:7px;overflow:hidden;border:2px solid rgba(255,255,255,.5);padding:0;cursor:pointer;flex-shrink:0;background:none;}
  .pm-thumb.active{border-color:var(--wood);}
  .pm-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
  .pm-progress span.done::after{width:100%;}

  /* Doctor / staff cards — used on /vrachi/ and /o-klinike/ */
  .doc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;margin-top:56px;}
  .doc-card{
    background:var(--paper);border:1px solid var(--divider);border-radius:var(--radius);
    padding:26px;display:flex;flex-direction:column;gap:12px;text-decoration:none;color:inherit;
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .doc-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(14,37,64,.12);}
  .doc-card .photo-slot{
    width:100%;aspect-ratio:3/4;border-radius:4px;background:var(--navy-2);
    border:1px solid rgba(201,162,75,.3);display:flex;align-items:center;justify-content:center;
    text-align:center;color:#9fb0c6;font-size:12.5px;line-height:1.5;padding:12px;
  }
  .doc-card h3{margin:0;font-size:20px;}
  .doc-card .role{color:var(--accent);font-size:13px;text-transform:uppercase;letter-spacing:.05em;font-weight:700;}
  .doc-card p{margin:0;color:var(--muted);font-size:14px;line-height:1.5;}
  .doc-card.soon{opacity:.6;border-style:dashed;}
  .doc-card .badge{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);font-weight:700;}
  @media(max-width:500px){.doc-grid{grid-template-columns:1fr;}}

  /* Patient case viewer (before/after slider) — used on /raboty/patient-*.html */

  .cases-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px;margin-top:8px;}
  .case-card{
    position:relative;aspect-ratio:4/5;border-radius:var(--radius);overflow:hidden;
    display:block;text-decoration:none;color:inherit;
    border:1px solid var(--divider);background:var(--paper);
  }
  .case-card.soon{opacity:.55;border-style:dashed;pointer-events:none;}
  .case-photo-main{
    position:absolute;inset:0;background:var(--navy-2);color:rgba(242,240,232,.5);
    display:flex;align-items:center;justify-content:center;text-align:center;
    font-size:12.5px;line-height:1.5;padding:16px;
  }
  .case-before-thumbs{position:absolute;left:12px;bottom:12px;display:flex;gap:6px;z-index:2;}
  .case-before-thumb{
    width:38px;height:38px;border-radius:6px;overflow:hidden;border:2px solid rgba(242,240,232,.85);
    background:var(--navy);color:rgba(242,240,232,.5);font-size:8px;
    display:flex;align-items:center;justify-content:center;
  }
  .case-info{position:absolute;top:14px;left:14px;z-index:2;color:#f2f0e8;}
  .case-info h3{margin:0 0 2px;font-size:16px;color:#f2f0e8;}
  .case-info p{margin:0;font-size:12px;color:rgba(242,240,232,.85);max-width:80%;}
  .case-card .badge{position:absolute;top:14px;right:14px;z-index:2;}

  .case-nav{
    position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;
    background:var(--paper);border:1px solid var(--divider);cursor:pointer;font-size:20px;color:var(--ink);
    display:flex;align-items:center;justify-content:center;z-index:3;
  }
  .case-nav.prev{left:12px;} .case-nav.next{right:12px;}

  /* Case-page photo gallery — the same modal-carousel component used for the
     patient popups on the homepage / "Наши работы" (real thumbnails, pinch
     zoom, swipe-to-navigate, "before" photo shown as a corner badge on its
     paired "after" photo instead of its own slide), just embedded directly
     in the page instead of opening as an overlay — this page IS the case
     view, so there's nothing to pop over. See buildSlides()/pmRender() in
     index.html for the overlay version this mirrors. */
  .case-gallery{max-width:640px;margin:0 auto;}
  .case-gallery-photo{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/5;background:var(--navy-2);}
  .case-gallery-photo #cgMain{
    width:100%;height:100%;object-fit:cover;display:block;
    touch-action:none;cursor:zoom-in;transform-origin:center center;will-change:transform;
    -webkit-user-drag:none;user-select:none;-webkit-user-select:none;
  }
  .case-gallery-photo.zoomed #cgMain{cursor:grab;}
  .case-gallery-photo.zoomed #cgMain:active{cursor:grabbing;}
  .case-gallery-photo.dragging #cgMain{transition:none !important;}
  .cg-zoom-hint{
    position:absolute;bottom:14px;left:50%;transform:translateX(-50%);z-index:3;
    background:rgba(0,0,0,.5);color:#fff;font-size:11.5px;padding:5px 12px;border-radius:20px;
    pointer-events:none;opacity:0;transition:opacity .3s ease;white-space:nowrap;
  }
  .case-gallery-photo:not(.zoomed):hover .cg-zoom-hint{opacity:1;}
  @media(hover:none){.cg-zoom-hint{display:none;}}
  .case-gallery-photo::before{
    content:"";position:absolute;top:0;left:0;right:0;height:70px;z-index:1;pointer-events:none;
    background:linear-gradient(180deg, rgba(0,0,0,.35), transparent);
  }
  .cg-progress{position:absolute;top:0;left:0;right:0;display:flex;gap:4px;padding:10px 12px;z-index:4;}
  .cg-progress span{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.35);overflow:hidden;}
  .cg-progress span::after{content:"";display:block;height:100%;width:0;background:#fff;}
  .cg-progress span.done::after{width:100%;}
  .cg-progress span.active::after{width:100%;}
  .case-gallery-nav{
    position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.45);border:none;color:#fff;
    width:36px;height:36px;border-radius:50%;font-size:19px;cursor:pointer;z-index:4;
    display:flex;align-items:center;justify-content:center;
  }
  .case-gallery-nav.prev{left:12px;}
  .case-gallery-nav.next{right:12px;}
  .case-gallery-counter{
    position:absolute;top:14px;right:14px;color:#fff;font-size:12px;z-index:4;
    background:rgba(0,0,0,.45);padding:4px 10px;border-radius:20px;
  }
  /* Mobile-only: visible zoom affordance (pinch/double-tap zoom already
     works everywhere via the script below; this is the discoverable entry
     point on phones, where there's no hover to reveal the text hint). */
  .cg-zoom-btn{display:none;}
  .cg-before-badge{
    display:none;position:absolute;bottom:14px;right:14px;width:130px;height:130px;border-radius:14px;
    overflow:hidden;border:2px solid #fff;box-shadow:0 6px 18px rgba(0,0,0,.45);z-index:4;
  }
  .cg-before-badge.show{display:block;}
  .cg-before-badge img{width:100%;height:100%;object-fit:cover;display:block;}
  .cg-before-badge span{
    position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,.55);color:#fff;
    font-size:10px;text-align:center;padding:3px 0;text-transform:uppercase;letter-spacing:.04em;
  }
  .case-gallery-thumbs{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:16px;}
  .cg-thumb{width:52px;height:52px;border-radius:9px;overflow:hidden;border:2px solid var(--divider);padding:0;cursor:pointer;flex-shrink:0;background:none;}
  .cg-thumb.active{border-color:var(--accent);}
  .cg-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
  .cg-dots{display:none;justify-content:center;gap:6px;margin-top:16px;}
  .cg-dot{width:6px;height:6px;border-radius:50%;background:var(--divider);border:none;padding:0;cursor:pointer;}
  .cg-dot.active{background:var(--accent);width:16px;border-radius:3px;}
  @media(max-width:600px){
    .cg-zoom-btn{
      display:flex;align-items:center;justify-content:center;
      position:absolute;bottom:12px;left:12px;width:38px;height:38px;border-radius:50%;
      background:rgba(255,255,255,.92);border:none;box-shadow:0 4px 12px rgba(0,0,0,.25);
      color:#0e2540;z-index:4;
    }
    .cg-before-badge{width:96px;height:96px;bottom:10px;right:10px;}
    .cg-before-badge span{font-size:9px;}
    .case-gallery-thumbs{display:none;}
    .cg-dots{display:flex;}
  }

  /* Inline supplementary video (e.g. procedure clips) */
  .inline-video{
    max-width:360px;margin:32px auto 0;padding:20px;
    background:linear-gradient(160deg,#0e2540 0%,#122c4a 100%);
    border-radius:calc(var(--radius) + 10px);
    box-shadow:0 14px 34px rgba(14,37,64,0.28);
  }
  .inline-video video{
    width:100%;aspect-ratio:9/16;object-fit:cover;display:block;
    border-radius:var(--radius);background:#000;box-shadow:0 10px 26px rgba(var(--ink-rgb),0.1);
  }
  .inline-video p{margin:12px 0 0;font-size:13px;color:rgba(255,255,255,.7);text-align:center;}

  /* Auto-language banner — shown once per browser session when the page
     language was picked automatically (by device/browser language, not by
     an explicit click on the RU/UA/EN pill). On the /ua/ mirror it's purely
     informational (no way back to RU offered here — the pill in the header
     already does that). On the RU pages it also offers a one-click way to
     view the Ukrainian version, for visitors whose device language is
     Ukrainian-adjacent (see the shared script for the exact condition).
     Never shown once a real language choice is stored. */
  .lang-auto-banner{
    display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
    background:#0e2540;color:#fff;
    padding:0 40px;font-size:13px;line-height:1.4;text-align:center;
    position:relative;z-index:200;
    max-height:0;opacity:0;overflow:hidden;pointer-events:none;
    transform:translateY(-6px);
    transition:
      max-height .4s cubic-bezier(.16,1,.3,1),
      opacity .3s ease,
      padding .4s cubic-bezier(.16,1,.3,1),
      transform .4s cubic-bezier(.16,1,.3,1);
  }
  .lang-auto-banner.show{
    max-height:80px;opacity:1;padding:10px 40px;pointer-events:auto;
    transform:translateY(0);
  }
  .lang-auto-banner-switch{
    background:none;border:1px solid rgba(255,255,255,.5);color:#fff;
    border-radius:999px;padding:4px 12px;font-size:12px;font-weight:600;cursor:pointer;
    transition:background .15s ease,border-color .15s ease;flex-shrink:0;
  }
  .lang-auto-banner-switch:hover{background:rgba(255,255,255,.12);border-color:#fff;}
  .lang-auto-banner-close{
    background:none;border:none;color:rgba(255,255,255,.6);font-size:15px;cursor:pointer;
    position:absolute;right:12px;top:50%;transform:translateY(-50%);
    width:24px;height:24px;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  }
  .lang-auto-banner-close:hover{color:#fff;}
  @media(max-width:600px){
    .lang-auto-banner{font-size:12px;}
    .lang-auto-banner.show{padding:10px 40px 10px 14px;}
  }