:root{
    --bg: #F5F8FA;
    --bg-alt: #E7EEF3;
    --bg-rgb: 245,248,250;
    --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-alt: #17232E;
    --bg-rgb: 14,22,31;
    --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 term page style.
     uslugi.html pages don't load base.css, so this stylesheet is fully
     self-contained — the photo/gradient are set per-page via --hero-photo /
     --hero-gradient (inline style on the .hero element, same convention as
     base.css uses) so this rule can restyle the layout without every page
     repeating the full gradient in its own markup. */
  .hero{
    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;
  }
  .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;}
  .hero .cta-row{
    position:absolute;left:32px;right:32px;bottom:52px;z-index:4;
    display:flex;align-items:center;gap:14px;flex-wrap:nowrap;margin:0;
  }
  .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;}
  .hero .cta-row .seg{flex:1 1 auto;height:1px;background:rgba(255,255,255,.35);}
  .hero .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;}
  .hero .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;}
  .hero .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);}
  .hero .cta-row .btn.js-open-booking:active{background:rgba(20,90,118,.6);box-shadow:0 0 0 2px rgba(20,90,118,.4);}
  .hero .cta-row .btn.ghost{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.75);color:#fff;flex-shrink:0;}
  .hero .cta-row .btn.ghost:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.9);box-shadow:0 0 0 6px rgba(255,255,255,.14);color:#fff;}
  .hero .cta-row .btn.ghost:active{background:rgba(255,255,255,.22);box-shadow:0 0 0 2px rgba(255,255,255,.22);color:#fff;}
  [data-theme="dark"] .hero .cta-row .btn.js-open-booking{background:rgba(201,162,75,.28);border-color:rgba(201,162,75,.75);}
  [data-theme="dark"] .hero .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"] .hero .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){
    .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{width:100%;justify-content:center;}
  }
  .price-native{padding:48px 0 8px;max-width:560px;}
  .price-native h3{margin:0 0 20px;font-size:22px;}
  .price-row{display:flex;justify-content:space-between;align-items:baseline;padding:14px 0;border-bottom:1px solid rgba(var(--text-rgb),.1);font-size:16px;}
  .price-row span:first-child{color:var(--muted);}
  .price-row span:last-child{font-weight:600;color:var(--text);white-space:nowrap;}
  .btn.ghost:hover{border-color:var(--gold);color:var(--gold);}

  /* 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;}

  .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{
    position:relative;overflow:hidden;
    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);
    text-decoration:none;
  }
  .gallery .shot.has-photo{border-style:solid;border-color:transparent;align-items:flex-end;}
  .gallery .shot-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;}
  .gallery .shot-caption{
    position:relative;z-index:1;width:100%;color:#fff;font-weight:600;line-height:1.4;
    padding:28px 12px 12px;
    background:linear-gradient(180deg,transparent,rgba(15,33,47,.88) 65%);
    border-radius:0 0 var(--radius) var(--radius);
  }

  /* 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);}


  .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. Breadcrumbs
       hidden, buttons stay directly on the photo, no glass, same as
       before. Chevron centered below the heading, pointing right,
       shimmering between transparent and dark navy until tapped; on open
       it stops and flips to point left. Scroll allowed inside the panel. */
    .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;}
  }

  .inline-video{
    max-width:360px;margin:36px 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(--text-rgb),0.1);
  }
  .inline-video p{margin:12px 0 0;font-size:13px;color:rgba(255,255,255,.7);text-align:center;}

  /* 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(--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(--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(--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;
  }

  /* 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;}
  }