:root{
  --bg:#f3f1ec; --paper:#f8f7f3; --ink:#171717; --muted:#6f716f; --line:#d9d7d1;
  --red:#d71920; --blue:#123f7a; --dark:#171817; --radius:24px; --shell:min(1440px, calc(100vw - 48px));
}
*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter Tight,Manrope,Arial,sans-serif;line-height:1.45;-webkit-font-smoothing:antialiased} body.no-scroll{overflow:hidden}
a{color:inherit;text-decoration:none} img,video{max-width:100%;display:block} button{font:inherit}
.shell{width:var(--shell);margin:0 auto}.narrow{max-width:920px}.section{padding:120px 0}.section-dark{background:var(--dark);color:#fff}.light{color:#fff}.light-soft{color:#c7c8c4}.muted{color:var(--muted)}
.eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--blue)}.eyebrow.light{color:#dadbd7}.display{font-size:clamp(48px,7vw,118px);line-height:.9;letter-spacing:-.055em;margin:18px 0 34px;font-weight:900;text-transform:uppercase}.display em,h1 em{font-style:normal;color:var(--red)}
.lead{font-size:clamp(22px,2.1vw,34px);max-width:950px}.button{border:0;border-radius:999px;padding:15px 22px;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.button-dark{background:var(--ink);color:#fff}.button-light{background:#fff;color:var(--ink)}.text-link{font-weight:800;border-bottom:1px solid currentColor}.link-button{background:none;border:0;padding:0;font-weight:800;cursor:pointer;text-align:left}
.site-header{position:fixed;z-index:60;top:0;left:0;right:0;padding:18px 0;transition:.3s ease}.site-header.is-scrolled{background:rgba(248,247,243,.92);backdrop-filter:blur(16px);box-shadow:0 1px 0 rgba(0,0,0,.07)}.header-inner{display:grid;grid-template-columns:220px 1fr auto;gap:24px;align-items:center}.brand img{max-height:58px;width:auto}.site-nav{display:flex;justify-content:center;gap:28px;font-size:14px;font-weight:700}.menu-toggle{display:none;border:0;background:none;font-weight:800}
.hero{min-height:100svh;position:relative;display:flex;align-items:flex-end;overflow:hidden}.hero-media{position:absolute;inset:0}.hero-media video{width:100%;height:100%;object-fit:cover}.hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.22),rgba(0,0,0,.72))}.hero .media-placeholder{height:100%;border-radius:0;background:radial-gradient(circle at 70% 20%,#3c4654,transparent 35%),linear-gradient(145deg,#0f1318,#272c31)}.hero-content{position:relative;z-index:2;padding:180px 0 80px}.hero h1{font-size:clamp(58px,9vw,150px);line-height:.82;letter-spacing:-.065em;margin:24px 0 30px;font-weight:900}.hero p{font-size:clamp(18px,1.6vw,26px);max-width:820px;color:#dedfdb}.hero-actions{display:flex;gap:24px;align-items:center;margin-top:32px}
.media-placeholder{background:linear-gradient(135deg,#d9d8d3,#b8bbb9);display:grid;place-items:center;min-height:320px;border-radius:var(--radius);overflow:hidden}.media-placeholder span{font-size:11px;letter-spacing:.14em;font-weight:800;opacity:.55}.dark-placeholder{background:linear-gradient(135deg,#242524,#363836)}.tall{min-height:630px}
.split-large{display:grid;grid-template-columns:1fr 3fr;gap:60px}.section-head{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;margin-bottom:50px}.section-head .display{max-width:950px}.direction-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.direction-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}.direction-card .card-media{border-radius:0;min-height:430px}.card-body{padding:28px}.card-body h3{font-size:clamp(28px,3vw,50px);line-height:1;letter-spacing:-.035em;margin:14px 0}.card-body a{font-weight:900}.direction-soon{grid-column:1/-1;min-height:260px;display:flex;align-items:flex-end;background:#ebe9e3}
.feature-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:70px;align-items:center}.feature-grid-reverse .feature-copy{order:2}.feature-grid-reverse .feature-media{order:1}.feature-copy p{font-size:20px;max-width:680px}.feature-media video{border-radius:var(--radius);width:100%;max-height:760px;object-fit:cover;background:#000}
.section-process{background:#eceae5}.steps{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);margin-top:60px}.step{padding:28px 22px 22px 0;border-right:1px solid var(--line)}.step span{color:var(--red);font-size:13px;font-weight:900}.step h3{font-size:24px;margin:40px 0 12px}.step p{font-size:15px;color:var(--muted)}
.route{display:flex;align-items:center;gap:18px;font-size:clamp(18px,2.2vw,34px);font-weight:900;letter-spacing:-.03em;margin:34px 0}.route i{height:3px;flex:1;background:linear-gradient(90deg,var(--blue),var(--red));border-radius:999px}.experience-grid{display:grid;grid-template-columns:2fr 1fr;gap:70px;align-items:end}.collage{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:260px 260px;gap:18px;margin-top:50px}.collage>div:first-child{grid-row:1/3}.collage>div:last-child{grid-column:2/4}.collage .media-placeholder{min-height:0;height:100%}
.legal-strip{background:#e9e7e1}.legal-grid{display:grid;grid-template-columns:1fr 3fr;gap:60px}.legal-grid p{font-size:18px;max-width:1000px}.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px}.faq-list details{border-top:1px solid var(--line);padding:22px 0}.faq-list details:last-child{border-bottom:1px solid var(--line)}.faq-list summary{font-size:20px;font-weight:850;cursor:pointer}.faq-list p{color:var(--muted)}.final-cta{text-align:left}.final-cta .display{max-width:1100px}
.site-footer{background:#111;color:#d7d8d4;padding:48px 0}.footer-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:40px}.footer-brand{font-size:26px;font-weight:900}.footer-brand span{color:var(--red)}.footer-links,.footer-contact-mini{display:flex;flex-direction:column;gap:10px;font-size:14px}
.contact-panel{position:fixed;z-index:100;inset:0;pointer-events:none;opacity:0;transition:.25s ease}.contact-panel.is-open{opacity:1;pointer-events:auto}.contact-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(5px)}.contact-dialog{position:absolute;right:24px;top:24px;bottom:24px;width:min(520px,calc(100vw - 48px));background:var(--paper);border-radius:28px;padding:38px;transform:translateX(30px);transition:.25s ease;overflow:auto}.contact-panel.is-open .contact-dialog{transform:none}.close-x{position:absolute;right:24px;top:18px;border:0;background:none;font-size:32px;cursor:pointer}.contact-dialog h2{font-size:48px;line-height:.95;letter-spacing:-.05em;margin:20px 0 34px}.contact-list{display:flex;flex-direction:column}.contact-list a,.contact-static{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding:18px 0;font-weight:850}.contact-static span{color:var(--muted);font-weight:600}.page-content{padding-top:170px}.prose{font-size:18px}.prose p{max-width:820px}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}.reveal.is-visible{opacity:1;transform:none}
@media(max-width:980px){
  :root{--shell:min(100% - 28px, 900px)}.section{padding:84px 0}.header-inner{grid-template-columns:1fr auto}.site-nav{position:absolute;left:14px;right:14px;top:82px;display:none;flex-direction:column;background:var(--paper);padding:20px;border-radius:20px;box-shadow:0 16px 40px rgba(0,0,0,.12)}.site-nav.is-open{display:flex}.menu-toggle{display:block}.header-inner>.button{display:none}.split-large,.feature-grid,.experience-grid,.legal-grid,.faq-grid{grid-template-columns:1fr}.feature-grid-reverse .feature-copy,.feature-grid-reverse .feature-media{order:initial}.direction-grid{grid-template-columns:1fr}.direction-soon{grid-column:auto}.steps{grid-template-columns:1fr}.step{border-right:0;border-bottom:1px solid var(--line);padding:24px 0}.step h3{margin:14px 0 8px}.route{flex-direction:column;align-items:flex-start}.route i{width:3px;height:38px;flex:none;background:linear-gradient(var(--blue),var(--red));margin-left:8px}.collage{grid-template-columns:1fr 1fr;grid-template-rows:240px 240px}.collage>div:first-child{grid-row:auto}.collage>div:last-child{grid-column:auto}.footer-grid{grid-template-columns:1fr}.hero-content{padding-bottom:52px}.hero-actions{align-items:flex-start;flex-direction:column}.tall{min-height:420px}}
@media(max-width:620px){.hero h1{font-size:clamp(50px,16vw,86px)}.display{font-size:clamp(42px,14vw,72px)}.brand img{max-height:46px}.direction-card .card-media{min-height:320px}.collage{display:grid;grid-template-columns:1fr;grid-template-rows:none}.collage .media-placeholder{height:260px}.contact-dialog{right:10px;top:10px;bottom:10px;width:calc(100vw - 20px);padding:28px 22px}.contact-dialog h2{font-size:38px}}


/* ===== V0.2 visual alignment fixes ===== */
.display,
.hero h1{
  text-wrap:balance;
  overflow-wrap:normal;
  word-break:normal;
}
.display{
  font-size:clamp(46px,6.1vw,98px);
  line-height:.96;
  letter-spacing:-.045em;
  margin:18px 0 34px;
}
.hero h1{
  max-width:1320px;
  font-size:clamp(56px,7.2vw,118px);
  line-height:.93;
  letter-spacing:-.05em;
}
.site-header{
  background:rgba(248,247,243,.94);
  backdrop-filter:blur(16px);
  box-shadow:0 1px 0 rgba(0,0,0,.06);
  padding:10px 0;
}
.admin-bar .site-header{top:32px}
.header-inner{grid-template-columns:180px 1fr auto;min-height:66px}
.brand{display:inline-flex;align-items:center;width:max-content}
.brand img,.custom-logo{display:block;max-height:62px;width:auto;max-width:160px;object-fit:contain;background:transparent!important}
.site-nav{color:var(--ink)}
.site-header .button-dark{background:var(--ink);color:#fff}
.hero-content{padding-top:190px}
.section-head{
  display:grid;
  grid-template-columns:minmax(180px,.55fr) minmax(0,1.45fr);
  gap:56px;
  align-items:start;
}
.section-head .display{margin:0;max-width:1000px;justify-self:end;width:100%}
.direction-card .card-media{min-height:420px}
.media-photo{border-radius:var(--radius);overflow:hidden;background:#d5d4cf}
.card-media.media-photo{border-radius:0}
.media-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.direction-card:hover .media-photo img{transform:scale(1.025)}
.collage .media-photo{height:100%;min-height:0}
.final-cta{
  background:var(--paper);
  color:var(--ink);
  border-top:1px solid var(--line);
}
.final-cta .display{max-width:980px}
.site-footer{
  background:var(--bg);
  color:var(--ink);
  border-top:1px solid var(--line);
  padding:42px 0 48px;
}
.footer-grid{align-items:start}
.footer-logo{width:150px;height:auto;display:block;margin-bottom:14px}
.footer-tagline{margin:0;color:var(--muted)}
.footer-links,.footer-contact-mini{color:var(--muted)}
.footer-links a:hover,.footer-contact-mini a:hover,.footer-contact-mini button:hover{color:var(--ink)}
.footer-contact-mini .link-button{color:var(--ink)}
@media(max-width:980px){
  .admin-bar .site-header{top:46px}
  .section-head{grid-template-columns:1fr;gap:22px}
  .section-head .display{justify-self:start}
  .hero h1{font-size:clamp(52px,12vw,92px);line-height:.95}
  .display{font-size:clamp(44px,10vw,78px);line-height:.98}
}
@media(max-width:782px){.admin-bar .site-header{top:46px}}
@media(max-width:620px){
  .hero h1{font-size:clamp(44px,13.2vw,72px);line-height:.97;letter-spacing:-.045em}
  .display{font-size:clamp(40px,11.8vw,64px);line-height:.99;letter-spacing:-.04em}
  .header-inner{grid-template-columns:1fr auto;min-height:58px}
  .brand img,.custom-logo{max-height:52px;max-width:132px}
  .site-header{padding:8px 0}
}

/* ===== V0.3 directions title spacing fix ===== */
#directions .section-head .display{
  line-height:1.08;
}
#directions .section-head .display em{
  display:inline-block;
  margin-top:.04em;
}
@media(max-width:980px){
  #directions .section-head .display{line-height:1.08}
}
@media(max-width:620px){
  #directions .section-head .display{line-height:1.10}
}

/* ===== V0.4 contacts & QR ===== */
.contact-intro{margin:-18px 0 26px;color:var(--muted);max-width:390px}
.contact-list a,.contact-list .contact-channel{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;border:0;border-top:1px solid var(--line);padding:17px 0;background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.contact-list a>span:first-child,.contact-list .contact-channel>span:first-child{display:flex;flex-direction:column;gap:2px}
.contact-list strong{font-size:17px;line-height:1.15}
.contact-list small{font-size:12px;font-weight:650;color:var(--muted);letter-spacing:.01em}
.contact-qr-panel{margin-top:18px;padding:16px;border:1px solid var(--line);border-radius:20px;background:#fff;display:grid;grid-template-columns:1fr 178px;gap:20px;align-items:center}
.contact-qr-panel[hidden]{display:none}
.contact-qr-panel img{width:178px;max-height:240px;object-fit:cover;border-radius:14px;border:1px solid #ecebe6}
.qr-copy{display:flex;flex-direction:column;gap:8px}.qr-copy strong{font-size:18px}.qr-copy span{color:var(--muted);font-size:13px}
.telegram-qr-details{margin-top:18px;border-top:1px solid var(--line);padding-top:16px}
.telegram-qr-details summary{cursor:pointer;font-size:13px;font-weight:800;color:var(--muted)}
.telegram-qr-details img{margin-top:14px;width:220px;max-height:300px;object-fit:cover;border-radius:16px;border:1px solid var(--line)}
.footer-social-mini{display:flex;flex-wrap:wrap;gap:8px 14px;margin:3px 0 4px;font-size:12px;font-weight:800;color:var(--ink)}
.footer-social-mini .link-button{font-size:12px}
@media(max-width:620px){
  .contact-qr-panel{grid-template-columns:1fr;gap:14px}
  .contact-qr-panel img{width:100%;max-width:240px;max-height:320px}
}

/* ===== V0.5 motion polish ===== */
:root{
  --motion-soft:cubic-bezier(.22,1,.36,1);
  --motion-ui:cubic-bezier(.2,.8,.2,1);
}

/* Contact drawer: softer, layered entrance instead of a hard slide */
.contact-panel{
  opacity:1;
  visibility:hidden;
  pointer-events:none;
  transition:visibility 0s linear .58s;
}
.contact-panel.is-open{
  visibility:visible;
  pointer-events:auto;
  transition-delay:0s;
}
.contact-backdrop{
  opacity:0;
  background:rgba(13,15,17,.34);
  -webkit-backdrop-filter:blur(0px);
  backdrop-filter:blur(0px);
  transition:
    opacity .52s var(--motion-ui),
    -webkit-backdrop-filter .65s var(--motion-soft),
    backdrop-filter .65s var(--motion-soft);
}
.contact-panel.is-open .contact-backdrop{
  opacity:1;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
.contact-dialog{
  opacity:0;
  transform:translate3d(56px,0,0) scale(.985);
  transform-origin:100% 50%;
  box-shadow:-22px 0 70px rgba(20,22,24,.08);
  will-change:transform,opacity;
  transition:
    transform .64s var(--motion-soft),
    opacity .36s ease;
}
.contact-panel.is-open .contact-dialog{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
  transition-delay:.04s,0s;
}

/* Content inside the panel arrives a fraction later */
.contact-dialog > .eyebrow,
.contact-dialog > h2,
.contact-dialog > .contact-intro,
.contact-dialog > .contact-list,
.contact-dialog > .contact-qr-panel,
.contact-dialog > .telegram-qr-details{
  opacity:0;
  transform:translate3d(0,12px,0);
  transition:opacity .5s ease,transform .62s var(--motion-soft);
}
.contact-panel.is-open .contact-dialog > .eyebrow{opacity:1;transform:none;transition-delay:.16s}
.contact-panel.is-open .contact-dialog > h2{opacity:1;transform:none;transition-delay:.19s}
.contact-panel.is-open .contact-dialog > .contact-intro{opacity:1;transform:none;transition-delay:.22s}
.contact-panel.is-open .contact-dialog > .contact-list{opacity:1;transform:none;transition-delay:.25s}
.contact-panel.is-open .contact-dialog > .contact-qr-panel,
.contact-panel.is-open .contact-dialog > .telegram-qr-details{opacity:1;transform:none;transition-delay:.28s}

/* Contact rows: restrained micro-interaction */
.contact-list a,.contact-list .contact-channel{
  transition:
    padding-left .38s var(--motion-soft),
    padding-right .38s var(--motion-soft),
    background-color .3s ease,
    color .3s ease;
}
.contact-list a:hover,.contact-list .contact-channel:hover{
  padding-left:8px;
  padding-right:8px;
  background:rgba(18,63,122,.035);
}
.contact-list a>span:last-child,.contact-list .contact-channel>span:last-child{
  transition:transform .38s var(--motion-soft),opacity .3s ease;
}
.contact-list a:hover>span:last-child,.contact-list .contact-channel:hover>span:last-child{
  transform:translate3d(3px,0,0);
}
.close-x{
  transition:transform .42s var(--motion-soft),opacity .28s ease;
}
.close-x:hover{transform:rotate(6deg) scale(1.06);opacity:.72}

/* Site-wide reveals made less mechanical */
.reveal{
  opacity:0;
  transform:translate3d(0,16px,0);
  transition:
    opacity .82s ease,
    transform .96s var(--motion-soft);
}
.reveal.is-visible{opacity:1;transform:translate3d(0,0,0)}

.button,.text-link,.link-button,.site-nav a{
  transition:transform .35s var(--motion-soft),opacity .28s ease,background-color .28s ease,color .28s ease;
}
.button:hover{transform:translate3d(0,-2px,0)}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}

/* ===== V0.6 medical advertising warnings ===== */
.medical-warning{
  margin-top:28px;
  padding:18px 22px;
  border:1px solid rgba(23,23,23,.13);
  border-radius:16px;
  background:#ebe9e3;
  color:var(--ink);
  font-size:16px;
  line-height:1.45;
}
.medical-warning strong{font-weight:900}
.medical-warning.compact{
  margin:24px 0 26px;
  padding:14px 17px;
  max-width:680px;
  font-size:15px;
  border-radius:14px;
}
.medical-warning.on-dark{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.16);
  color:#f2f2ef;
}
.legal-warning-line{
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid rgba(23,23,23,.14);
  color:var(--ink);
}
@media(max-width:620px){
  .medical-warning{font-size:14px;padding:15px 16px;border-radius:14px}
  .medical-warning.compact{font-size:14px;margin:20px 0 22px}
}


/* ===== V0.7 mobile motion refinement ===== */
@media(max-width:980px){
  /* Mobile navigation: animate instead of switching display on/off */
  .site-nav{
    display:flex;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translate3d(0,-10px,0) scale(.985);
    transform-origin:50% 0;
    transition:
      opacity .34s ease,
      transform .46s var(--motion-soft),
      visibility 0s linear .46s;
  }
  .site-nav.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translate3d(0,0,0) scale(1);
    transition-delay:0s;
  }
  .site-nav a{
    opacity:0;
    transform:translate3d(0,-6px,0);
    transition:opacity .32s ease,transform .44s var(--motion-soft);
  }
  .site-nav.is-open a{opacity:1;transform:none}
  .site-nav.is-open a:nth-child(1){transition-delay:.06s}
  .site-nav.is-open a:nth-child(2){transition-delay:.09s}
  .site-nav.is-open a:nth-child(3){transition-delay:.12s}
  .site-nav.is-open a:nth-child(4){transition-delay:.15s}
  .site-nav.is-open a:nth-child(5){transition-delay:.18s}

  /* Softer scroll reveals on touch screens */
  .reveal{
    opacity:0;
    transform:translate3d(0,20px,0) scale(.998);
    transition:
      opacity .72s ease,
      transform .92s cubic-bezier(.16,1,.3,1);
    will-change:transform,opacity;
  }
  .reveal.is-visible{opacity:1;transform:translate3d(0,0,0) scale(1)}

  .media-photo img,
  .feature-media video{
    transition:transform 1.05s cubic-bezier(.16,1,.3,1),opacity .7s ease;
  }
}

@media(max-width:620px){
  /* On phones the contact module behaves like a soft bottom sheet,
     not a hard drawer flying in from the side. */
  .contact-panel{transition:visibility 0s linear .72s}
  .contact-panel.is-open{transition-delay:0s}
  .contact-backdrop{
    background:rgba(12,14,16,.30);
    transition:
      opacity .58s ease,
      -webkit-backdrop-filter .72s cubic-bezier(.16,1,.3,1),
      backdrop-filter .72s cubic-bezier(.16,1,.3,1);
  }
  .contact-panel.is-open .contact-backdrop{
    -webkit-backdrop-filter:blur(7px);
    backdrop-filter:blur(7px);
  }
  .contact-dialog{
    left:8px;
    right:8px;
    top:auto;
    bottom:8px;
    width:auto;
    max-height:calc(100svh - 16px);
    border-radius:28px;
    padding:30px 22px 24px;
    opacity:0;
    transform:translate3d(0,34px,0) scale(.992);
    transform-origin:50% 100%;
    box-shadow:0 -18px 70px rgba(20,22,24,.10);
    transition:
      transform .72s cubic-bezier(.16,1,.3,1),
      opacity .42s ease;
  }
  .contact-dialog::before{
    content:"";
    position:absolute;
    top:10px;
    left:50%;
    width:42px;
    height:4px;
    border-radius:999px;
    background:rgba(23,23,23,.14);
    transform:translateX(-50%);
  }
  .contact-panel.is-open .contact-dialog{
    opacity:1;
    transform:translate3d(0,0,0) scale(1);
    transition-delay:.025s,0s;
  }
  .contact-dialog > .eyebrow,
  .contact-dialog > h2,
  .contact-dialog > .contact-intro,
  .contact-dialog > .contact-list,
  .contact-dialog > .contact-qr-panel,
  .contact-dialog > .telegram-qr-details{
    transform:translate3d(0,9px,0);
    transition:opacity .46s ease,transform .66s cubic-bezier(.16,1,.3,1);
  }
  .contact-panel.is-open .contact-dialog > .eyebrow{transition-delay:.13s}
  .contact-panel.is-open .contact-dialog > h2{transition-delay:.16s}
  .contact-panel.is-open .contact-dialog > .contact-intro{transition-delay:.19s}
  .contact-panel.is-open .contact-dialog > .contact-list{transition-delay:.22s}
  .contact-panel.is-open .contact-dialog > .contact-qr-panel,
  .contact-panel.is-open .contact-dialog > .telegram-qr-details{transition-delay:.25s}

  /* Slightly calmer touch feedback; hover offsets feel abrupt on phones. */
  .button:active{transform:scale(.985)}
  .contact-list a:hover,.contact-list .contact-channel:hover{
    padding-left:0;
    padding-right:0;
    background:transparent;
  }
  .contact-list a:active,.contact-list .contact-channel:active{
    opacity:.64;
    transform:scale(.995);
  }

  /* The hero should arrive deliberately on first load. */
  body:not(.vmt-ready) .hero-content{
    opacity:0;
    transform:translate3d(0,14px,0);
  }
  .hero-content{
    transition:opacity .78s ease,transform .96s cubic-bezier(.16,1,.3,1);
  }
  body.vmt-ready .hero-content{
    opacity:1;
    transform:translate3d(0,0,0);
  }
}


/* ===== V0.8 tactile mobile motion + refined menu ===== */
section,[id]{scroll-margin-top:105px}

@media(max-width:980px){
  .menu-toggle{
    display:inline-flex;
    align-items:center;
    gap:9px;
    min-height:40px;
    padding:9px 13px;
    border:1px solid rgba(23,23,23,.12);
    border-radius:999px;
    background:rgba(248,247,243,.72);
    color:var(--ink)!important;
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
    font-size:13px;
    font-weight:800;
    letter-spacing:.01em;
    box-shadow:0 5px 18px rgba(18,20,22,.035);
    transition:
      transform .42s cubic-bezier(.16,1,.3,1),
      background-color .42s ease,
      border-color .42s ease,
      box-shadow .42s ease;
  }
  .menu-toggle:active{transform:scale(.975)}
  .menu-icon{width:17px;height:12px;position:relative;display:inline-block;flex:none}
  .menu-icon i{
    position:absolute;
    left:0;
    width:17px;
    height:1.5px;
    border-radius:99px;
    background:currentColor;
    transform-origin:center;
    transition:transform .56s cubic-bezier(.16,1,.3,1),top .56s cubic-bezier(.16,1,.3,1);
  }
  .menu-icon i:first-child{top:3px}
  .menu-icon i:last-child{top:9px}
  .menu-toggle.is-open .menu-icon i:first-child{top:6px;transform:rotate(45deg)}
  .menu-toggle.is-open .menu-icon i:last-child{top:6px;transform:rotate(-45deg)}

  .site-nav{
    left:14px;
    right:14px;
    top:88px;
    padding:22px 20px;
    gap:0;
    border:1px solid rgba(23,23,23,.08);
    border-radius:24px;
    background:rgba(248,247,243,.94);
    -webkit-backdrop-filter:blur(22px) saturate(1.08);
    backdrop-filter:blur(22px) saturate(1.08);
    box-shadow:0 22px 70px rgba(17,20,23,.09);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translate3d(0,-7px,0) scale(.994);
    transform-origin:80% 0;
    transition:
      opacity .52s ease,
      transform .72s cubic-bezier(.16,1,.3,1),
      visibility 0s linear .72s;
  }
  .site-nav.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translate3d(0,0,0) scale(1);
    transition-delay:0s;
  }
  .site-nav a{
    padding:15px 2px;
    border-bottom:1px solid rgba(23,23,23,.08);
    opacity:0;
    transform:translate3d(0,7px,0);
    transition:
      opacity .5s ease,
      transform .70s cubic-bezier(.16,1,.3,1),
      color .28s ease;
  }
  .site-nav a:last-child{border-bottom:0}
  .site-nav.is-open a{opacity:1;transform:translate3d(0,0,0)}
  .site-nav.is-open a:nth-child(1){transition-delay:.10s}
  .site-nav.is-open a:nth-child(2){transition-delay:.14s}
  .site-nav.is-open a:nth-child(3){transition-delay:.18s}
  .site-nav.is-open a:nth-child(4){transition-delay:.22s}
  .site-nav.is-open a:nth-child(5){transition-delay:.26s}

  .reveal{
    transform:translate3d(0,12px,0);
    transition:
      opacity 1.02s cubic-bezier(.25,.1,.25,1),
      transform 1.16s cubic-bezier(.16,1,.3,1);
  }
}

@media(max-width:620px){
  /* Less travel, more easing: the contact sheet should feel like it settles into place. */
  .contact-panel{transition:visibility 0s linear .94s}
  .contact-panel.is-open{transition-delay:0s}
  .contact-backdrop{
    background:rgba(12,14,16,.26);
    transition:
      opacity .72s cubic-bezier(.25,.1,.25,1),
      -webkit-backdrop-filter .92s cubic-bezier(.16,1,.3,1),
      backdrop-filter .92s cubic-bezier(.16,1,.3,1);
  }
  .contact-panel.is-open .contact-backdrop{
    -webkit-backdrop-filter:blur(9px);
    backdrop-filter:blur(9px);
  }
  .contact-dialog{
    bottom:8px;
    opacity:0;
    transform:translate3d(0,18px,0) scale(.995);
    box-shadow:0 -14px 56px rgba(20,22,24,.075);
    transition:
      transform .94s cubic-bezier(.16,1,.3,1),
      opacity .62s cubic-bezier(.25,.1,.25,1);
  }
  .contact-panel.is-open .contact-dialog{
    opacity:1;
    transform:translate3d(0,0,0) scale(1);
    transition-delay:.035s,0s;
  }
  .contact-dialog > .eyebrow,
  .contact-dialog > h2,
  .contact-dialog > .contact-intro,
  .contact-dialog > .contact-list,
  .contact-dialog > .contact-qr-panel,
  .contact-dialog > .telegram-qr-details{
    transform:translate3d(0,6px,0);
    transition:
      opacity .62s cubic-bezier(.25,.1,.25,1),
      transform .82s cubic-bezier(.16,1,.3,1);
  }
  .contact-panel.is-open .contact-dialog > .eyebrow{transition-delay:.18s}
  .contact-panel.is-open .contact-dialog > h2{transition-delay:.23s}
  .contact-panel.is-open .contact-dialog > .contact-intro{transition-delay:.28s}
  .contact-panel.is-open .contact-dialog > .contact-list{transition-delay:.33s}
  .contact-panel.is-open .contact-dialog > .contact-qr-panel,
  .contact-panel.is-open .contact-dialog > .telegram-qr-details{transition-delay:.38s}

  .header-inner{gap:10px}
  .brand img,.custom-logo{max-height:52px;max-width:140px}
  .menu-toggle{margin-left:auto}
}

/* ===== V0.9 black glass controls + diagonal specular sweep ===== */
.close-x{
  color:var(--ink)!important;
  -webkit-text-fill-color:var(--ink)!important;
  opacity:1;
}
.close-x:hover{color:var(--ink)!important;opacity:.68}

/* Dark controls share one restrained glassy highlight language. */
.button-dark,
.menu-toggle{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.button-dark::after,
.menu-toggle::after{
  content:"";
  position:absolute;
  z-index:2;
  pointer-events:none;
  top:-55%;
  bottom:-55%;
  width:42%;
  right:-72%;
  transform:skewX(-22deg);
  background:linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.025) 20%,
    rgba(255,255,255,.16) 44%,
    rgba(255,255,255,.42) 50%,
    rgba(255,255,255,.13) 58%,
    rgba(255,255,255,0) 100%
  );
  filter:blur(.25px);
  opacity:.82;
  animation:vmtGlassSweep 5.4s cubic-bezier(.2,.7,.2,1) infinite;
}
@keyframes vmtGlassSweep{
  0%,58%{right:-72%;opacity:0}
  61%{opacity:.76}
  76%{right:132%;opacity:.92}
  79%,100%{right:132%;opacity:0}
}

/* Tablet / mobile menu is a black premium pill, not a blue text control. */
@media(max-width:980px){
  .menu-toggle{
    background:#171717!important;
    color:#fff!important;
    -webkit-text-fill-color:#fff!important;
    border-color:#171717!important;
    box-shadow:
      0 8px 24px rgba(17,17,17,.12),
      inset 0 1px 0 rgba(255,255,255,.10),
      inset 0 -1px 0 rgba(0,0,0,.22);
  }
  .menu-toggle:hover{
    background:#0f0f0f!important;
    border-color:#0f0f0f!important;
    box-shadow:
      0 10px 30px rgba(17,17,17,.16),
      inset 0 1px 0 rgba(255,255,255,.12),
      inset 0 -1px 0 rgba(0,0,0,.25);
  }
  .menu-toggle.is-open{
    background:#171717!important;
    color:#fff!important;
  }
}

/* Desktop gets the same quiet specular sweep on the primary black CTA. */
@media(min-width:981px){
  .site-header .button-dark{
    box-shadow:
      0 7px 22px rgba(17,17,17,.08),
      inset 0 1px 0 rgba(255,255,255,.09),
      inset 0 -1px 0 rgba(0,0,0,.22);
  }
}

@media(prefers-reduced-motion:reduce){
  .button-dark::after,
  .menu-toggle::after{animation:none;display:none}
}

/* v1.0 — clinic pages and dentistry clinic listing */
.clinic-listing{padding-top:64px}.clinic-listing-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:30px}.clinic-listing-head h3{font-size:clamp(42px,5vw,76px);line-height:.92;letter-spacing:-.055em;margin:0}.clinic-listing-head h3 em{font-style:normal;color:var(--red)}.clinic-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.clinic-card{display:block;color:inherit;text-decoration:none;border:1px solid rgba(20,20,20,.12);border-radius:30px;overflow:hidden;background:#f7f5f1;transition:transform .65s cubic-bezier(.16,1,.3,1),box-shadow .65s cubic-bezier(.16,1,.3,1)}.clinic-card:hover{transform:translateY(-6px);box-shadow:0 22px 60px rgba(0,0,0,.10)}.clinic-card-media{aspect-ratio:16/9;overflow:hidden;background:#d7d6d3}.clinic-card-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s cubic-bezier(.16,1,.3,1)}.clinic-card:hover .clinic-card-media img{transform:scale(1.025)}.clinic-card-copy{padding:28px 30px 32px}.clinic-card-copy h4{font-size:clamp(30px,3vw,46px);line-height:.96;letter-spacing:-.045em;margin:12px 0 14px}.clinic-card-copy p{max-width:650px;color:var(--muted);font-size:17px;line-height:1.55}.clinic-card-copy>span{display:inline-block;margin-top:14px;font-weight:750}
.clinic-hero{position:relative;min-height:74vh;display:flex;align-items:flex-end;background:#f4f1ec;overflow:hidden}.clinic-hero.has-image{color:#fff}.clinic-hero-media{position:absolute;inset:0}.clinic-hero-media img{width:100%;height:100%;object-fit:cover;display:block}.clinic-hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.12) 0%,rgba(0,0,0,.22) 38%,rgba(0,0,0,.70) 100%)}.clinic-hero-content{position:relative;z-index:2;padding-top:180px;padding-bottom:70px}.clinic-hero h1{max-width:1150px;margin:18px 0 22px;font-size:clamp(64px,8.2vw,138px);line-height:.86;letter-spacing:-.065em;text-transform:uppercase}.clinic-lead{max-width:840px;font-size:clamp(20px,2vw,30px);line-height:1.35;margin:0 0 28px;color:inherit}.clinic-content-section{background:#f4f1ec}.clinic-content-grid{display:grid;grid-template-columns:minmax(220px,.65fr) minmax(0,1.6fr);gap:80px;align-items:start}.clinic-side{position:sticky;top:120px}.clinic-side-item{padding:20px 0;border-bottom:1px solid rgba(20,20,20,.14);display:grid;gap:4px}.clinic-side-item span{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}.clinic-side-item strong{font-size:22px}.clinic-side-note{margin-top:24px;color:var(--muted);font-size:15px;line-height:1.55}.clinic-prose{max-width:none}.clinic-prose h2{font-size:clamp(40px,5vw,74px);line-height:.95;letter-spacing:-.05em;margin:0 0 28px}.clinic-prose h3{font-size:clamp(28px,3vw,44px);line-height:1;letter-spacing:-.035em;margin:58px 0 22px}.clinic-prose p{font-size:clamp(18px,1.5vw,23px);line-height:1.55}.clinic-prose ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 24px;padding:0;margin:24px 0 48px;list-style:none}.clinic-prose li{padding:16px 0;border-bottom:1px solid rgba(20,20,20,.12);font-size:18px}.clinic-prose .wp-block-gallery.vmt-clinic-gallery{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px!important;margin:50px 0!important}.clinic-prose .wp-block-gallery.vmt-clinic-gallery figure.wp-block-image{width:auto!important;margin:0!important;aspect-ratio:4/3;overflow:hidden;border-radius:24px}.clinic-prose .wp-block-gallery.vmt-clinic-gallery figure.wp-block-image:first-child{grid-column:1/-1;aspect-ratio:16/8}.clinic-prose .wp-block-gallery.vmt-clinic-gallery img{width:100%!important;height:100%!important;object-fit:cover!important}.clinic-prose .wp-block-image.vmt-wide-image img,.clinic-prose .vmt-wide-image img{width:100%;border-radius:28px}.clinic-prose .wp-block-video{margin:50px 0}.clinic-prose .wp-block-video video{width:100%;border-radius:28px;background:#111}.clinic-legal{background:#fff;border-top:1px solid rgba(20,20,20,.12)}
@media(max-width:820px){.clinic-listing{padding-top:42px}.clinic-listing-head{display:block}.clinic-listing-head h3{margin-top:14px}.clinic-card-grid{grid-template-columns:1fr}.clinic-card{border-radius:22px}.clinic-card-copy{padding:22px}.clinic-hero{min-height:68svh}.clinic-hero-content{padding-top:140px;padding-bottom:44px}.clinic-hero h1{font-size:clamp(52px,14vw,86px);line-height:.88}.clinic-content-grid{grid-template-columns:1fr;gap:34px}.clinic-side{position:static}.clinic-prose ul{grid-template-columns:1fr}.clinic-prose .wp-block-gallery.vmt-clinic-gallery{grid-template-columns:1fr!important;gap:12px!important}.clinic-prose .wp-block-gallery.vmt-clinic-gallery figure.wp-block-image:first-child{grid-column:auto;aspect-ratio:4/3}.clinic-prose .wp-block-gallery.vmt-clinic-gallery figure.wp-block-image{border-radius:18px}}

/* ===== v1.1 — clinic mobile polish ===== */
@media(max-width:820px){
  body{overflow-x:hidden}

  /* The clinic hero keeps the cinematic image, but the copy must breathe on a phone. */
  .clinic-hero{
    min-height:auto;
    align-items:stretch;
  }
  .clinic-hero-media img{
    object-position:48% center;
  }
  .clinic-hero-shade{
    background:linear-gradient(180deg,rgba(0,0,0,.18) 0%,rgba(0,0,0,.28) 34%,rgba(0,0,0,.78) 100%);
  }
  .clinic-hero-content{
    min-height:min(760px,calc(100svh - 72px));
    padding-top:150px;
    padding-bottom:44px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
  }
  .clinic-hero .eyebrow{
    font-size:10px;
    letter-spacing:.15em;
    line-height:1.35;
  }
  .clinic-hero h1{
    width:100%;
    max-width:100%;
    margin:14px 0 20px;
    font-size:clamp(38px,10.5vw,52px);
    line-height:.94;
    letter-spacing:-.045em;
    text-wrap:balance;
    overflow-wrap:normal;
    word-break:normal;
    hyphens:none;
  }
  .clinic-lead{
    width:100%;
    max-width:100%;
    margin:0 0 24px;
    font-size:clamp(17px,4.6vw,20px);
    line-height:1.42;
    text-wrap:pretty;
  }
  .clinic-hero .button{
    align-self:flex-start;
    padding:14px 20px;
    font-size:15px;
  }

  /* Compact the information block so the page starts immediately after the hero. */
  .clinic-content-section.section{
    padding:56px 0 72px;
  }
  .clinic-content-grid{
    grid-template-columns:1fr;
    gap:38px;
  }
  .clinic-side{
    position:static;
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:18px;
    row-gap:0;
    padding:0;
  }
  .clinic-side>.eyebrow,
  .clinic-side-note{
    grid-column:1/-1;
  }
  .clinic-side>.eyebrow{margin-bottom:8px}
  .clinic-side-item{
    padding:14px 0;
  }
  .clinic-side-item span{font-size:10px}
  .clinic-side-item strong{font-size:18px}
  .clinic-side-note{
    margin-top:16px;
    padding-top:16px;
    border-top:1px solid rgba(20,20,20,.12);
    font-size:13px;
    line-height:1.5;
  }

  .clinic-prose h2{
    margin:0 0 20px;
    font-size:clamp(36px,10.5vw,48px);
    line-height:.96;
    letter-spacing:-.045em;
    text-wrap:balance;
  }
  .clinic-prose h3{
    margin:42px 0 16px;
    font-size:clamp(27px,7.5vw,34px);
    line-height:1;
    letter-spacing:-.035em;
  }
  .clinic-prose p{
    font-size:17px;
    line-height:1.52;
  }
  .clinic-prose ul{
    grid-template-columns:1fr;
    gap:0;
    margin:18px 0 34px;
  }
  .clinic-prose li{
    padding:13px 0;
    font-size:16px;
  }
  .clinic-prose .wp-block-gallery.vmt-clinic-gallery{
    grid-template-columns:1fr!important;
    gap:12px!important;
    margin:34px 0!important;
  }
  .clinic-prose .wp-block-gallery.vmt-clinic-gallery figure.wp-block-image,
  .clinic-prose .wp-block-gallery.vmt-clinic-gallery figure.wp-block-image:first-child{
    grid-column:auto;
    aspect-ratio:4/3;
    border-radius:16px;
  }
  .clinic-prose .wp-block-image img{
    border-radius:16px;
  }
  .clinic-prose .wp-block-video{margin:34px 0}
  .clinic-prose .wp-block-video video{border-radius:16px}

  .clinic-legal.section{
    padding:56px 0 62px;
  }
  .clinic-legal .legal-grid{
    grid-template-columns:1fr;
    gap:18px;
  }
  .clinic-legal .legal-grid p{
    font-size:15px;
    line-height:1.55;
  }
}

@media(max-width:420px){
  .clinic-hero-content{
    min-height:min(720px,calc(100svh - 68px));
    padding-top:132px;
    padding-bottom:38px;
  }
  .clinic-hero h1{
    font-size:clamp(37px,10.3vw,44px);
    line-height:.95;
    letter-spacing:-.04em;
  }
  .clinic-lead{
    font-size:17px;
    line-height:1.4;
  }
  .clinic-content-section.section{padding-top:48px}
  .clinic-side{column-gap:14px}
}


/* ===== v1.2 — desktop header structure fix after custom logo replacement ===== */
@media(min-width:981px){
  .site-header{padding:8px 0}
  .header-inner{
    display:grid;
    grid-template-columns:120px minmax(0,1fr) auto;
    gap:28px;
    align-items:center;
    min-height:88px;
  }
  .brand{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    width:120px;
    min-width:120px;
  }
  .brand>a,
  .brand .custom-logo-link{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    width:max-content;
    line-height:0;
  }
  .brand img,
  .brand .custom-logo{
    display:block;
    height:88px;
    width:auto;
    max-height:88px;
    max-width:108px;
    object-fit:contain;
    background:transparent!important;
  }
  .site-nav{
    display:flex;
    align-items:center;
    justify-content:center;
    justify-self:center;
    gap:28px;
    min-width:0;
    white-space:nowrap;
  }
  .site-header .contact-open{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    justify-self:end;
    width:auto;
    min-width:max-content;
    white-space:nowrap;
    margin:0;
  }
}

@media(min-width:981px) and (max-width:1180px){
  .header-inner{grid-template-columns:104px minmax(0,1fr) auto;gap:18px}
  .brand{width:104px;min-width:104px}
  .brand img,.brand .custom-logo{height:76px;max-height:76px;max-width:94px}
  .site-nav{gap:18px;font-size:13px}
  .site-header .contact-open{padding-left:20px;padding-right:20px}
}

@media(max-width:980px){
  .brand>a,.brand .custom-logo-link{display:flex;align-items:center;line-height:0}
  .brand img,.brand .custom-logo{height:56px;width:auto;max-height:56px;max-width:76px;object-fit:contain}
}


/* ===== V1.5 final CTA contact card ===== */
.final-cta-grid{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(420px,.92fr);
  gap:clamp(54px,7vw,110px);
  align-items:center;
}
.final-cta-copy .display{max-width:820px}
.final-cta-copy .muted{max-width:620px;font-size:16px;margin:0 0 18px}
.quick-contact-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:32px;
  padding:clamp(28px,3.2vw,46px);
  box-shadow:0 18px 60px rgba(23,23,23,.055);
}
.quick-contact-card h3{
  margin:14px 0 30px;
  font-size:clamp(30px,3vw,50px);
  line-height:.96;
  letter-spacing:-.045em;
}
.quick-contact-channels{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.quick-contact-channels a,
.quick-contact-channels button{
  min-height:66px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--paper);
  color:var(--ink);
  padding:0 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  font:inherit;
  font-weight:850;
  cursor:pointer;
  text-align:left;
  transition:transform .24s ease,background .24s ease,border-color .24s ease;
}
.quick-contact-channels a:hover,
.quick-contact-channels button:hover{
  transform:translateY(-2px);
  background:#fff;
  border-color:#c8c6bf;
}
.quick-contact-channels b{font-size:14px}
.quick-contact-phones{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-top:26px;
  padding-top:24px;
  border-top:1px solid var(--line);
}
.quick-contact-phones a{display:flex;flex-direction:column;gap:4px}
.quick-contact-phones small{font-size:10px;letter-spacing:.13em;color:var(--muted);font-weight:800}
.quick-contact-phones strong{font-size:17px;letter-spacing:-.015em}
.quick-contact-note{
  margin:24px 0 0;
  padding-top:22px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:13px;
  line-height:1.55;
  max-width:560px;
}
@media(max-width:980px){
  .final-cta-grid{grid-template-columns:1fr;gap:44px}
  .quick-contact-card{max-width:720px}
}
@media(max-width:620px){
  .quick-contact-card{border-radius:24px;padding:24px 20px}
  .quick-contact-card h3{font-size:clamp(28px,9vw,42px)}
  .quick-contact-channels{grid-template-columns:1fr}
  .quick-contact-phones{grid-template-columns:1fr;gap:14px}
}


/* ===== V1.6 — graphite palette, red CTA language, horizontal brand lockup ===== */
:root{
  --red:#e22a29;
  --dark:#1c2028;
}
.section-dark{background:var(--dark)}
.dark-placeholder{background:linear-gradient(135deg,#252c33,#1c2028)}

/* Header: the icon is the mark; the name now lives next to it, not microscopically below it. */
.site-header,
.site-header.is-scrolled{
  background:rgba(243,244,244,.95);
}
.brand{width:auto!important;min-width:0!important}
.brand-home{
  display:inline-flex;
  align-items:center;
  gap:12px;
  width:max-content;
  line-height:1;
}
.brand-mark{
  width:64px!important;
  height:64px!important;
  max-width:64px!important;
  max-height:64px!important;
  object-fit:contain;
  flex:none;
}
.brand-wordmark{
  display:inline-block;
  white-space:nowrap;
  font-size:20px;
  line-height:1;
  letter-spacing:-.035em;
  font-weight:950;
  color:var(--ink);
}
.brand-wordmark em{font-style:normal;color:var(--red)}

@media(min-width:1181px){
  .header-inner{
    grid-template-columns:290px minmax(0,1fr) 230px;
    gap:24px;
  }
  .brand{justify-content:flex-start}
  .site-header .contact-open{justify-self:end}
}
@media(min-width:981px) and (max-width:1180px){
  .header-inner{grid-template-columns:230px minmax(0,1fr) 200px;gap:16px}
  .brand-mark{width:54px!important;height:54px!important;max-width:54px!important;max-height:54px!important}
  .brand-wordmark{font-size:16px}
  .site-nav{gap:15px;font-size:12.5px}
}
@media(max-width:980px){
  .brand-home{gap:8px}
  .brand-mark{width:48px!important;height:48px!important;max-width:48px!important;max-height:48px!important}
  .brand-wordmark{font-size:14px;letter-spacing:-.025em}
}
@media(max-width:420px){
  .brand-wordmark{font-size:12px}
  .brand-mark{width:44px!important;height:44px!important;max-width:44px!important;max-height:44px!important}
}

/* Primary CTA: old-site red pill language, with a dedicated circular arrow. */
.button{
  gap:12px;
  min-height:52px;
  padding:9px 10px 9px 21px;
}
.button-arrow{
  width:34px;
  height:34px;
  border-radius:999px;
  display:grid;
  place-items:center;
  flex:none;
  font-size:15px;
  font-weight:900;
  line-height:1;
  transition:transform .38s var(--motion-soft),background-color .28s ease;
}
.button:hover .button-arrow{transform:translate3d(2px,-1px,0)}
.button-dark,
.site-header .button-dark{
  background:var(--red)!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  border:1px solid var(--red)!important;
  box-shadow:0 8px 24px rgba(226,42,41,.16),inset 0 1px 0 rgba(255,255,255,.14)!important;
}
.button-dark:hover,
.site-header .button-dark:hover{background:#cf201f!important;border-color:#cf201f!important}
.button-dark .button-arrow{background:rgba(255,255,255,.17);color:#fff}
.button-light{
  background:#fff;
  color:var(--ink);
  border:1px solid rgba(255,255,255,.82);
  box-shadow:0 8px 24px rgba(0,0,0,.08);
}
.button-light .button-arrow{background:var(--red);color:#fff}

/* Keep the red primary CTA glint, now warmer and subtler. */
.button-dark::after{
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.02) 22%,rgba(255,255,255,.14) 44%,rgba(255,255,255,.34) 50%,rgba(255,255,255,.10) 58%,rgba(255,255,255,0) 100%);
}

/* Contact card echoes the old UI without bringing the form back. */
.quick-contact-card{box-shadow:0 18px 60px rgba(28,32,40,.07)}
.quick-contact-channels a,
.quick-contact-channels button{background:#f6f6f4}
.quick-contact-channels b{
  width:30px;
  height:30px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:var(--red);
  color:#fff;
  font-size:12px;
  line-height:1;
}
.quick-contact-channels a:hover,
.quick-contact-channels button:hover{border-color:rgba(226,42,41,.38)}

/* FAQ: a little blue, a red directional tick, and no browser-default black triangle. */
.faq-list summary{
  list-style:none;
  display:flex;
  align-items:center;
  gap:14px;
  color:var(--ink);
  transition:color .28s ease;
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::before{
  content:"";
  width:9px;
  height:9px;
  flex:none;
  border-right:2px solid var(--red);
  border-bottom:2px solid var(--red);
  transform:rotate(-45deg);
  transition:transform .38s var(--motion-soft),border-color .28s ease;
}
.faq-list details[open] summary{color:var(--blue)}
.faq-list details[open] summary::before{transform:rotate(45deg)}
.faq-list details:hover summary{color:var(--blue)}

/* Footer uses the same legal, flag-free brand lockup. */
.footer-brand-lockup{display:inline-flex;align-items:center;gap:12px;margin-bottom:12px}
.footer-brand-mark{width:68px;height:68px;object-fit:contain;flex:none}
.footer-brand-wordmark{font-size:20px;line-height:1;font-weight:950;letter-spacing:-.035em;color:var(--ink);white-space:nowrap}
.footer-brand-wordmark em{font-style:normal;color:var(--red)}
@media(max-width:620px){
  .footer-brand-mark{width:58px;height:58px}
  .footer-brand-wordmark{font-size:17px}
}


/* ===== V1.7 — responsive clinic titles for long partner names ===== */
/* Short clinic names keep the original oversized editorial treatment.
   Longer names step down automatically so no word can escape the hero. */
.clinic-hero.title-long h1{
  max-width:min(1240px,100%);
  font-size:clamp(58px,6.6vw,108px);
  line-height:.9;
  letter-spacing:-.055em;
}
.clinic-hero.title-xlong h1{
  max-width:min(1320px,100%);
  font-size:clamp(50px,5.75vw,92px);
  line-height:.92;
  letter-spacing:-.05em;
  text-wrap:balance;
}
.clinic-hero h1{
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
}
/* Give long clinic leads a little more horizontal room without affecting short pages. */
.clinic-hero.title-long .clinic-lead,
.clinic-hero.title-xlong .clinic-lead{max-width:900px}

@media(max-width:1180px){
  .clinic-hero.title-long h1{font-size:clamp(52px,7vw,82px)}
  .clinic-hero.title-xlong h1{font-size:clamp(46px,6.25vw,72px)}
}
@media(max-width:820px){
  .clinic-hero.title-long h1,
  .clinic-hero.title-xlong h1{
    max-width:100%;
    font-size:clamp(34px,8.7vw,48px);
    line-height:.96;
    letter-spacing:-.04em;
  }
  .clinic-hero.title-long .clinic-lead,
  .clinic-hero.title-xlong .clinic-lead{
    max-width:100%;
    font-size:clamp(16px,4.25vw,19px);
  }
}
@media(max-width:420px){
  .clinic-hero.title-long h1,
  .clinic-hero.title-xlong h1{
    font-size:clamp(31px,8.2vw,38px);
    line-height:.97;
  }
}

/* ===== V1.8 — mobile-first polish: red menu, clean vector arrows, compact direction media, visible Telegram QR ===== */
.hero-route-word{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}

/* No emoji arrows anywhere in primary CTA controls. The arrow is drawn in CSS. */
.button-arrow{
  position:relative;
  overflow:visible;
  font-size:0!important;
}
.button-arrow::before{
  content:"";
  position:absolute;
  width:9px;
  height:9px;
  top:9px;
  right:9px;
  border-top:2px solid currentColor;
  border-right:2px solid currentColor;
  border-radius:.5px;
}
.button-arrow::after{
  content:"";
  position:absolute;
  width:13px;
  height:2px;
  left:9px;
  bottom:11px;
  border-radius:999px;
  background:currentColor;
  transform:rotate(-45deg);
  transform-origin:center;
}

/* Small external-link icon for contact rows/card, also CSS-drawn to avoid iOS emoji rendering. */
.quick-contact-icon,
.contact-icon{
  position:relative;
  display:grid;
  place-items:center;
  flex:none;
}
.quick-contact-icon--arrow{
  width:30px;
  height:30px;
  border-radius:999px;
  background:var(--red);
  color:#fff;
}
.quick-contact-icon--arrow::before,
.contact-icon--external::before{
  content:"";
  position:absolute;
  width:8px;
  height:8px;
  top:7px;
  right:7px;
  border-top:2px solid currentColor;
  border-right:2px solid currentColor;
}
.quick-contact-icon--arrow::after,
.contact-icon--external::after{
  content:"";
  position:absolute;
  width:11px;
  height:2px;
  left:7px;
  bottom:9px;
  border-radius:999px;
  background:currentColor;
  transform:rotate(-45deg);
}
.quick-contact-icon--qr,
.contact-qr-badge{
  width:30px;
  height:30px;
  border-radius:999px;
  display:grid;
  place-items:center;
  flex:none;
  background:var(--red);
  color:#fff;
  font-size:11px;
  font-weight:900;
  line-height:1;
}
.contact-icon--external{
  width:30px;
  height:30px;
  border-radius:999px;
  background:var(--red);
  color:#fff;
}
.contact-icon--forward{
  width:30px;
  height:30px;
  border-radius:999px;
  background:#f0efeb;
  color:var(--ink);
}
.contact-icon--forward::before{
  content:"";
  width:10px;
  height:2px;
  background:currentColor;
  border-radius:999px;
}
.contact-icon--forward::after{
  content:"";
  position:absolute;
  width:6px;
  height:6px;
  border-top:2px solid currentColor;
  border-right:2px solid currentColor;
  transform:rotate(45deg);
  right:8px;
}

.quick-contact-card h3 em{
  color:var(--red);
  font-style:normal;
}

/* Mobile menu belongs to the same red CTA language as the rest of the site. */
@media(max-width:980px){
  .menu-toggle,
  .menu-toggle:hover,
  .menu-toggle.is-open{
    background:var(--red)!important;
    border-color:var(--red)!important;
    color:#fff!important;
    -webkit-text-fill-color:#fff!important;
    box-shadow:
      0 9px 28px rgba(226,42,41,.20),
      inset 0 1px 0 rgba(255,255,255,.16),
      inset 0 -1px 0 rgba(145,16,16,.18)!important;
  }
}

/* On phones the direction photo is one clean 16:9 frame. No minimum-height grey filler. */
@media(max-width:620px){
  #directions .direction-card .card-media{
    min-height:0!important;
    height:auto!important;
    aspect-ratio:16/9;
  }
  #directions .direction-card .card-media.media-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
  }
  #directions .direction-card .card-body{
    padding:24px 22px 28px;
  }

  /* Keep CTA circles proportional and crisp on iOS. */
  .button-arrow{
    width:34px;
    height:34px;
  }
  .button-arrow::before{top:9px;right:9px}
  .button-arrow::after{left:9px;bottom:11px}

  .quick-contact-card h3{
    line-height:.94;
  }
}

/* ===== V1.9 — clinic editorial alignment fix =====
   Gutenberg may keep paragraph blocks on its own constrained content width.
   Clinic copy must share one clean left edge with H2/H3 and the media below. */
.clinic-prose > p,
.clinic-prose > .wp-block-paragraph,
.clinic-prose h2 + p,
.clinic-prose h3 + p{
  margin-left:0!important;
  margin-right:0!important;
  padding-left:0!important;
  text-indent:0!important;
  width:100%!important;
  max-width:100%!important;
}

/* Also neutralise a constrained/group wrapper if Gutenberg inserted one
   around a text block, without disturbing image sizing or vertical rhythm. */
.clinic-prose > .wp-block-group.is-layout-constrained > :where(p,.wp-block-paragraph,h2,h3){
  margin-left:0!important;
  margin-right:0!important;
  padding-left:0!important;
  max-width:100%!important;
}

@media(max-width:820px){
  .clinic-prose > p,
  .clinic-prose > .wp-block-paragraph,
  .clinic-prose h2 + p,
  .clinic-prose h3 + p{
    width:100%!important;
    max-width:100%!important;
  }
}

/* ===== V1.10 — hard reset for Gutenberg constrained text on clinic pages =====
   v1.9 already targeted direct paragraphs; this also removes WordPress block-theme
   content-width centering from nested paragraph/group wrappers. */
.clinic-prose > :where(p,.wp-block-paragraph,.wp-block-group,.wp-block-columns),
.clinic-prose :where(.wp-block-group,.wp-block-group__inner-container,.wp-block-column) > :where(p,.wp-block-paragraph){
  margin-left:0!important;
  margin-right:0!important;
  padding-left:0!important;
  padding-right:0!important;
  text-indent:0!important;
  max-width:none!important;
  width:100%!important;
}

/* WordPress global styles may apply auto inline margins to constrained blocks.
   On clinic prose, editorial copy must use the same left edge as headings/media. */
.clinic-prose.is-layout-constrained > :where(p,.wp-block-paragraph),
.clinic-prose .is-layout-constrained > :where(p,.wp-block-paragraph){
  margin-inline:0!important;
  max-width:none!important;
  width:100%!important;
}


/* ===== V1.11 — clinic content rail hard alignment =====
   Some Gutenberg blocks can arrive wrapped in a constrained layout container.
   The clinic editorial column must use one shared left edge for headings, copy and media. */
.single-vmt_clinic .clinic-prose{
  --vmt-clinic-rail:100%;
}
.single-vmt_clinic .clinic-prose > *{
  margin-inline-start:0!important;
  margin-inline-end:0!important;
}
.single-vmt_clinic .clinic-prose :where(
  p,
  .wp-block-paragraph,
  .wp-block-group,
  .wp-block-group__inner-container,
  .wp-block-columns,
  .wp-block-column,
  .is-layout-constrained,
  .is-layout-flow,
  .is-layout-flex
){
  margin-inline-start:0!important;
  margin-inline-end:0!important;
  padding-inline-start:0!important;
  padding-inline-end:0!important;
  max-width:none!important;
}
.single-vmt_clinic .clinic-prose :where(p,.wp-block-paragraph){
  width:100%!important;
  max-width:100%!important;
  text-indent:0!important;
}
/* WordPress global layout rules often use auto margins on constrained children. */
.single-vmt_clinic .clinic-prose :where(.is-layout-constrained,.wp-block-group__inner-container) > *{
  margin-left:0!important;
  margin-right:0!important;
  max-width:none!important;
}


/* ===== V1.12 — direction cards: image flush to content =====
   The old min-height on .card-media was taller than the rendered image,
   exposing the grey media background as a horizontal strip. Use one
   deterministic 16:9 frame on desktop and mobile so the photo meets the
   content panel with no filler gap. */
#directions .direction-card .card-media.media-photo{
  min-height:0!important;
  height:auto!important;
  aspect-ratio:16/9;
  overflow:hidden;
  line-height:0;
  background:var(--paper)!important;
}
#directions .direction-card .card-media.media-photo img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-height:100%;
  margin:0!important;
  object-fit:cover;
}
#directions .direction-card .card-body{
  margin-top:0!important;
}
@media(max-width:620px){
  #directions .direction-card .card-media.media-photo{
    min-height:0!important;
    height:auto!important;
    aspect-ratio:16/9;
  }
}


/* ===== V1.13 — partner aesthetic medicine clinics on homepage =====
   Published clinics tagged “Косметология и эстетическая медицина” are shown
   directly inside the dark cosmetology section. The cards stay warm/light so
   the section reads as a premium editorial catalogue rather than a medical list. */
#cosmetology .clinic-listing--dark{
  margin-top:86px;
  padding-top:62px;
  border-top:1px solid rgba(255,255,255,.16);
}
#cosmetology .clinic-listing--dark .clinic-listing-head h3{
  color:#fff;
}
#cosmetology .clinic-listing--dark .clinic-listing-head h3 em{
  color:var(--red);
}
#cosmetology .clinic-listing--dark .clinic-card{
  color:var(--ink);
  background:#f7f5f1;
  border-color:rgba(255,255,255,.14);
  box-shadow:0 18px 48px rgba(0,0,0,.12);
}
#cosmetology .clinic-listing--dark .clinic-card:hover{
  box-shadow:0 28px 68px rgba(0,0,0,.24);
}
#cosmetology .clinic-listing--dark .clinic-card-copy p{
  color:var(--muted);
}
#cosmetology .clinic-listing--dark .clinic-card-copy>span{
  color:var(--ink);
}
@media(max-width:820px){
  #cosmetology .clinic-listing--dark{
    margin-top:58px;
    padding-top:42px;
  }
  #cosmetology .clinic-listing--dark .clinic-listing-head{
    margin-bottom:24px;
  }
  #cosmetology .clinic-listing--dark .clinic-listing-head h3{
    font-size:clamp(40px,12vw,62px);
    line-height:.94;
  }
}


/* ===== V1.14 — orthopedics & recovery direction =====
   Adds the third live medical direction, keeps the future sanatorium card as
   the fourth item, and gives orthopedics its own editorial section. */
#directions .direction-soon{
  grid-column:auto;
}
.section-orthopedics{
  background:#eeece6;
}
.section-orthopedics .orthopedics-intro{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);
  gap:72px;
  align-items:end;
}
.section-orthopedics .orthopedics-intro .display{
  margin-bottom:0;
}
.section-orthopedics .orthopedics-copy p{
  margin-top:0;
  font-size:20px;
  line-height:1.55;
  max-width:620px;
}
.section-orthopedics .clinic-listing--ortho{
  margin-top:86px;
  padding-top:62px;
  border-top:1px solid rgba(20,20,20,.14);
}
.section-orthopedics .clinic-card-grid--single .clinic-card{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  align-items:stretch;
}
.section-orthopedics .clinic-card-grid--single .clinic-card-media{
  aspect-ratio:auto;
  min-height:390px;
}
.section-orthopedics .clinic-card-grid--single .clinic-card-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:44px 46px;
}
.section-orthopedics .clinic-card-grid--single .clinic-card-copy h4{
  font-size:clamp(38px,4vw,62px);
}
@media(max-width:820px){
  .section-orthopedics .orthopedics-intro{
    grid-template-columns:1fr;
    gap:30px;
  }
  .section-orthopedics .orthopedics-copy p{
    font-size:18px;
  }
  .section-orthopedics .clinic-listing--ortho{
    margin-top:58px;
    padding-top:42px;
  }
  .section-orthopedics .clinic-listing-head h3{
    font-size:clamp(40px,12vw,62px);
    line-height:.94;
  }
  .section-orthopedics .clinic-card-grid--single .clinic-card{
    display:block;
  }
  .section-orthopedics .clinic-card-grid--single .clinic-card-media{
    aspect-ratio:16/9;
    min-height:0;
  }
  .section-orthopedics .clinic-card-grid--single .clinic-card-copy{
    padding:22px;
  }
  .section-orthopedics .clinic-card-grid--single .clinic-card-copy h4{
    font-size:clamp(30px,9vw,46px);
  }
}

/* ===== V1.15 — orthopedic direction reliability + intentional SOON card ===== */
#directions .direction-soon{
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  align-items:stretch;
  min-height:0;
  background:#e8e5df;
  overflow:hidden;
}
#directions .direction-soon .soon-visual{
  min-height:260px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:30px;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(circle at 84% 18%, rgba(226,42,41,.10), transparent 26%),
    linear-gradient(135deg, rgba(18,63,122,.07), transparent 52%),
    #e8e5df;
}
#directions .direction-soon .soon-visual span{
  display:block;
  font-size:clamp(74px,9vw,150px);
  line-height:.78;
  letter-spacing:-.07em;
  font-weight:900;
  color:rgba(28,32,40,.14);
  transform:translateY(-.02em);
  user-select:none;
}
#directions .direction-soon .card-body{
  align-self:end;
}
@media(max-width:620px){
  #directions .direction-soon .soon-visual{
    min-height:0;
    aspect-ratio:16/9;
    padding:20px;
  }
  #directions .direction-soon .soon-visual span{
    font-size:clamp(62px,23vw,110px);
  }
}

/* ===== V1.16 — direct orthopedics navigation + hard mobile containment =====
   Orthopedics no longer has a duplicate intermediate homepage catalogue.
   The direction card goes straight to the published clinic page. On clinic
   pages, Gutenberg wide/full alignment and long Russian headings are clamped
   to the real mobile viewport so nothing can drift outside the screen. */

/* Defensive sizing for every clinic layout rail. */
.single-vmt_clinic,
.single-vmt_clinic main,
.single-vmt_clinic .clinic-hero,
.single-vmt_clinic .clinic-content-section,
.single-vmt_clinic .clinic-content-grid,
.single-vmt_clinic .clinic-prose,
.single-vmt_clinic .clinic-prose > *,
.single-vmt_clinic .clinic-prose figure,
.single-vmt_clinic .clinic-prose .wp-block-image,
.single-vmt_clinic .clinic-prose .wp-block-group,
.single-vmt_clinic .clinic-prose .wp-block-columns,
.single-vmt_clinic .clinic-prose .wp-block-column{
  min-width:0;
  max-width:100%;
}

.single-vmt_clinic .clinic-prose :where(.alignwide,.alignfull),
.single-vmt_clinic .clinic-prose figure.wp-block-image{
  width:100%!important;
  max-width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
  inset-inline:auto!important;
}
.single-vmt_clinic .clinic-prose figure.wp-block-image img,
.single-vmt_clinic .clinic-prose .wp-block-image img{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  height:auto!important;
  margin:0!important;
}

@media(max-width:820px){
  html,body{max-width:100%;overflow-x:clip}
  .single-vmt_clinic main{overflow-x:clip}
  .single-vmt_clinic .shell{
    width:calc(100% - 28px)!important;
    max-width:calc(100% - 28px)!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  .single-vmt_clinic .clinic-content-grid{
    width:100%;
    max-width:100%;
    overflow:visible;
  }

  /* Long orthopedic wording must fit even on 360–390 px phones without
     splitting a word outside the viewport. */
  .single-vmt_clinic .clinic-hero h1,
  .single-vmt_clinic .clinic-hero.title-long h1,
  .single-vmt_clinic .clinic-hero.title-xlong h1{
    font-size:clamp(32px,8.7vw,42px)!important;
    line-height:.97!important;
    letter-spacing:-.042em!important;
    max-width:100%!important;
  }
  .single-vmt_clinic .clinic-lead,
  .single-vmt_clinic .clinic-hero.title-long .clinic-lead,
  .single-vmt_clinic .clinic-hero.title-xlong .clinic-lead{
    font-size:clamp(16px,4.2vw,18px)!important;
    line-height:1.43!important;
    max-width:100%!important;
  }
  .single-vmt_clinic .clinic-prose h2{
    font-size:clamp(31px,8.2vw,40px)!important;
    line-height:.98!important;
    letter-spacing:-.042em!important;
    max-width:100%!important;
    text-wrap:balance;
  }
  .single-vmt_clinic .clinic-prose h3{
    font-size:clamp(26px,6.8vw,33px)!important;
    line-height:1.02!important;
    max-width:100%!important;
    text-wrap:balance;
  }
  .single-vmt_clinic .clinic-prose p,
  .single-vmt_clinic .clinic-prose li{
    overflow-wrap:break-word;
    word-break:normal;
  }
  .single-vmt_clinic .clinic-prose figure.wp-block-image{
    overflow:hidden;
    border-radius:16px;
  }
  .single-vmt_clinic .clinic-prose figure.wp-block-image img{
    border-radius:16px;
  }
}

@media(max-width:390px){
  .single-vmt_clinic .shell{
    width:calc(100% - 24px)!important;
    max-width:calc(100% - 24px)!important;
  }
  .single-vmt_clinic .clinic-hero h1,
  .single-vmt_clinic .clinic-hero.title-long h1,
  .single-vmt_clinic .clinic-hero.title-xlong h1{
    font-size:clamp(30px,8.5vw,34px)!important;
  }
  .single-vmt_clinic .clinic-prose h2{
    font-size:clamp(29px,7.9vw,33px)!important;
  }
}


/* ===== v1.17 — persistent quick contact dock ===== */
.vmt-contact-dock{
  position:fixed;
  z-index:96; /* above page/header, below the existing contact panel (100) */
  right:24px;
  bottom:24px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px;
  background:rgba(248,247,243,.94);
  border:1px solid rgba(23,23,23,.10);
  border-radius:22px;
  box-shadow:0 18px 50px rgba(18,63,122,.16);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
}
.vmt-contact-dock__action{
  min-height:52px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  border:0;
  border-radius:15px;
  padding:0 18px;
  font-size:15px;
  line-height:1;
  font-weight:900;
  letter-spacing:-.01em;
  cursor:pointer;
  white-space:nowrap;
  transition:transform .25s var(--motion-ui),box-shadow .25s ease,background-color .25s ease;
}
.vmt-contact-dock__action:hover{transform:translateY(-1px)}
.vmt-contact-dock__action:focus-visible{outline:3px solid rgba(18,63,122,.26);outline-offset:3px}
.vmt-contact-dock__action--call{
  color:var(--blue);
  background:#fff;
  box-shadow:inset 0 0 0 1px rgba(18,63,122,.12);
}
.vmt-contact-dock__action--write{
  color:#fff;
  background:linear-gradient(110deg,var(--blue) 0%,#2f6dbe 48%,var(--red) 100%);
  box-shadow:0 10px 24px rgba(18,63,122,.16);
}
.vmt-contact-dock__icon{width:20px;height:20px;flex:0 0 20px}

/* Keep the last content/footer controls clear of the fixed dock on small screens. */
@media(max-width:980px){
  body{padding-bottom:calc(82px + env(safe-area-inset-bottom,0px))}
  .vmt-contact-dock{
    left:10px;
    right:10px;
    bottom:max(10px,env(safe-area-inset-bottom));
    width:auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    padding:7px;
    border-radius:20px;
    box-shadow:0 14px 42px rgba(18,63,122,.18);
  }
  .vmt-contact-dock__action{
    width:100%;
    min-height:56px;
    padding:0 14px;
    font-size:16px;
    border-radius:14px;
  }
}
@media(max-width:380px){
  .vmt-contact-dock{left:8px;right:8px;gap:6px;padding:6px}
  .vmt-contact-dock__action{min-height:54px;font-size:15px;padding:0 10px}
  .vmt-contact-dock__icon{width:19px;height:19px;flex-basis:19px}
}
@media(prefers-reduced-motion:reduce){
  .vmt-contact-dock__action{transition:none}
}