/* ============================================================
   VIP Surgery Turkey — shared site stylesheet
   Liquid-glass edition · warm-gold aurora · Sora + Inter
   Loaded by every page AFTER liquid-glass.css (so this :root wins).
   Page-specific bits (if any) go in a small <style> on that page.
   ============================================================ */

/* --- rebrand the kit tokens --- */
:root{
  --lg-accent:#B8935A;         /* warm gold */
  --lg-accent-strong:#9A7642;
  --lg-accent-deep:#7E5F33;
  --lg-ink:#16181B;            /* high-contrast near-black */
  --lg-ink-muted:#575B5D;
  --lg-radius:20px;
  --lg-radius-lg:26px;
  --lg-aurora:
    radial-gradient(900px 620px at 8% -8%, rgba(184,147,90,.22), transparent 60%),
    radial-gradient(1150px 720px at 92% 2%, rgba(210,181,146,.26), transparent 62%),
    radial-gradient(820px 640px at 40% 44%, rgba(223,198,187,.16), transparent 66%),
    radial-gradient(1000px 820px at 86% 98%, rgba(150,168,172,.14), transparent 60%),
    #F6F3EE;
  --gold:#9A7642;
  --gold-soft:#B8935A;
  --navy:#0B1B33;              /* brand navy — dark-mode base (future) */
  --dark:#151719;
  --wa:#25D366;
  --wa-deep:#1EB456;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --head:"Sora","Inter",system-ui,sans-serif;
  --wrap:1180px;
  /* semantic surfaces (flip in dark mode) */
  --lg-menu-bg:#FFFFFF;                 /* mobile drawer: fully opaque (kit default is .98 and page text ghosts through) */
  --surface:rgba(255,255,255,.62);      /* translucent cards (.gcard) */
  --surface-2:rgba(255,255,255,.72);    /* opaque-ish cells (.glance) */
  --surface-ph:rgba(255,255,255,.34);   /* image placeholders */
  --btn2-bg:rgba(255,255,255,.5);
  --btn2-bg-hover:rgba(255,255,255,.7);
  --ph-label:#8f7f66;
  --footer-bg:#111214;
}

/* ---- navy dark theme (owner's brand navy) ---------------------------------
   :root[data-theme='dark'] (0,2,0) beats this file's :root and the kit's
   [data-theme='dark'], so it fully controls. Light mode stays untouched. */
:root[data-theme='dark']{
  --lg-ink:#EAEFF6;
  --lg-ink-muted:#9FADBE;
  --gold:#CBA467;                       /* brightened so gold reads on navy */
  --gold-soft:#DAC191;
  /* deep-navy aurora with a subtle warm-gold pole + cool blue pools */
  --lg-aurora:
    radial-gradient(900px 620px at 8% -8%, rgba(203,164,103,.14), transparent 60%),
    radial-gradient(1150px 720px at 92% 2%, rgba(38,74,132,.42), transparent 62%),
    radial-gradient(820px 640px at 40% 44%, rgba(28,52,96,.34), transparent 66%),
    radial-gradient(1000px 820px at 86% 98%, rgba(52,86,140,.26), transparent 60%),
    #0A1526;
  /* glass strengths — navy tinted */
  --lg-bg:rgba(20,34,56,.55);
  --lg-bg-strong:rgba(26,42,68,.70);
  --lg-bg-solid:rgba(16,28,48,.86);
  --lg-menu-bg:#0C1626;  /* fully opaque (was .98, page text ghosted through the drawer) */
  --lg-edge:rgba(255,255,255,.12);
  --lg-highlight:rgba(255,255,255,.08);
  --lg-shadow:0 12px 40px rgba(0,0,0,.5);
  --lg-line:#26374F;
  --lg-field-bg:rgba(255,255,255,.06);
  --lg-field-edge:rgba(255,255,255,.20);
  --lg-sheen:rgba(255,255,255,.14);
  --lg-sheen-ink:rgba(255,255,255,.08);
  /* semantic surfaces */
  --surface:rgba(24,38,62,.58);
  --surface-2:rgba(26,42,66,.82);
  --surface-ph:rgba(255,255,255,.055);
  --btn2-bg:rgba(255,255,255,.08);
  --btn2-bg-hover:rgba(255,255,255,.15);
  --ph-label:#8EA0B6;
  --footer-bg:#070E19;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);line-height:1.68;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{font-family:var(--head);font-weight:700;line-height:1.08;letter-spacing:-.02em;margin:0}
p{margin:0 0 1em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 22px}
.section{padding:70px 0}
.section h2{font-size:clamp(1.9rem,5vw,3rem)}
.eyebrow{font-size:.72rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);display:inline-flex;align-items:center;gap:.7em}
.eyebrow::before{content:"";width:26px;height:1.5px;background:var(--gold)}
.eyebrow.center{justify-content:center}
.lead{font-size:1.08rem;color:var(--lg-ink-muted);max-width:60ch}
.center{text-align:center;margin-inline:auto}

/* translucent placeholders (no per-card blur) */
.ph{position:relative;background:var(--surface-ph);border:1px solid var(--lg-edge);border-radius:16px;overflow:hidden}
.ph::before{content:"";position:absolute;inset:0;background:
  linear-gradient(135deg,transparent 47%,rgba(154,118,66,.10) 47%,rgba(154,118,66,.10) 53%,transparent 53%),
  radial-gradient(circle at 50% 42%,rgba(154,118,66,.22) 0 8px,transparent 9px)}
/* A frame still waiting for its photo. Anastasia's real cases are still being
   collected, and an empty tile reads as broken, so it says so instead: the block
   keeps the page's weight, and the visitor is told the truth rather than shown a
   missing-image icon. When a real photo lands, the .soon class simply stops
   being applied and this disappears on its own. */
.ph.soon::before{background:
  linear-gradient(135deg,rgba(154,118,66,.05) 0 100%)}
.ph.soon>span{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
  width:86%;text-align:center;font-size:.68rem;letter-spacing:.06em;
  color:var(--ph-label);font-weight:600;opacity:.85;line-height:1.35}
.ph::after{content:attr(data-label);position:absolute;left:10px;bottom:9px;right:10px;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ph-label);font-weight:600}

/* translucent card (frosted look WITHOUT backdrop-filter, so grids stay smooth) */
.gcard{background:var(--surface);border:1px solid var(--lg-edge);border-radius:var(--lg-radius);
  box-shadow:var(--lg-shadow),inset 0 1px 0 var(--lg-highlight)}

/* ---------- buttons (pill, liquid) ---------- */
.btn{display:inline-flex;align-items:center;gap:.55em;font-weight:700;font-size:.95rem;padding:0 22px;height:48px;
  border-radius:999px;border:1px solid transparent;cursor:pointer;text-decoration:none}
.btn-wa{background:linear-gradient(180deg,#2ee06d,#1EB456);color:#fff;border-color:rgba(255,255,255,.3);
  box-shadow:0 8px 20px rgba(37,211,102,.4),inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .16s var(--lg-spring),filter .2s}
.btn-wa:hover{filter:brightness(1.06);transform:translateY(-1px)}
.btn-2{background:var(--btn2-bg);border:1px solid var(--lg-edge);color:var(--lg-ink);font-weight:600;
  box-shadow:inset 0 1px 0 var(--lg-highlight);transition:transform .16s var(--lg-spring),background .2s}
.btn-2:hover{background:var(--btn2-bg-hover);transform:translateY(-1px)}
.wa-ico{width:1.15em;height:1.15em;fill:currentColor;flex:none}

/* ---------- header (floating glass pill) ---------- */
header{position:fixed;top:12px;left:12px;right:12px;z-index:60}
header .bar{max-width:var(--wrap);margin:0 auto;display:flex;align-items:center;justify-content:space-between;
  padding:9px 12px 9px 22px;border-radius:16px;transition:max-width .25s ease}
/* Russian labels are noticeably longer than the English ones, so the bar is allowed to
   grow past the content width (owner ask 2026-07-29): everything stays on one line with
   room to breathe. Page content keeps --wrap; only the header pill expands. */
header .bar{max-width:1340px}  /* both languages: 8 nav links need the room (2026-07-30) */
.brand{font-family:var(--head);font-size:1.18rem;font-weight:800;color:var(--lg-ink);letter-spacing:-.01em;white-space:nowrap}
.brand span{color:var(--gold)}
nav.main{display:none}
nav.main a{font-size:.9rem;font-weight:500;color:var(--lg-ink);padding:.4em 0}
nav.main a:hover{color:var(--gold)}
/* .nav-start intentionally styled like every other nav link (owner call 2026-07-29: no box, no gold) */
.head-right{display:flex;align-items:center;gap:12px}
.lang{display:none;font-size:.8rem;font-weight:600;color:var(--lg-ink-muted)}
.lang b{color:var(--lg-ink)}
.head-wa{display:none;white-space:nowrap}
.ig-head{width:40px;height:40px;border-radius:12px;border:1px solid var(--lg-edge);
  background:var(--btn2-bg);color:var(--gold);
  display:grid;place-items:center;flex:none;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .16s var(--lg-spring)}
.ig-head:hover{background:var(--gold);border-color:var(--gold);color:#fff}
.ig-head svg{width:19px;height:19px;fill:currentColor}
.theme-toggle{width:40px;height:40px;border-radius:12px;border:1px solid var(--lg-edge);background:var(--btn2-bg);
  color:var(--gold);display:grid;place-items:center;cursor:pointer;flex:none;
  transition:background-color .2s ease,transform .16s var(--lg-spring)}
.theme-toggle:hover{background:var(--btn2-bg-hover)}
.theme-toggle svg{width:19px;height:19px}
.theme-toggle .ic-sun{display:none}
:root[data-theme='dark'] .theme-toggle .ic-sun{display:block}
:root[data-theme='dark'] .theme-toggle .ic-moon{display:none}
.burger{display:flex;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.burger span{width:24px;height:2px;background:var(--lg-ink);border-radius:2px}
#nav-toggle{display:none}
#nav-toggle:checked ~ .mobile-nav{transform:translateX(0)}
.mobile-nav{position:fixed;inset:0 0 0 18%;background:var(--lg-menu-bg);z-index:70;transform:translateX(100%);
  transition:transform .3s ease;padding:78px 30px;display:flex;flex-direction:column;gap:2px;box-shadow:var(--lg-menu-shadow)}
.mobile-nav a{color:var(--lg-ink);font-family:var(--head);font-weight:600;font-size:1.35rem;padding:.42em 0;border-bottom:1px solid var(--lg-line)}
.mobile-nav .btn{margin-top:18px}
.mobile-close{position:absolute;top:20px;right:24px;color:var(--lg-ink);font-size:2rem;cursor:pointer;line-height:1}
.lang-m{margin-top:auto;color:var(--lg-ink-muted);font-size:.85rem;letter-spacing:.1em}

/* ---------- home hero (split) ---------- */
.hero{padding-top:104px}
.hero .wrap{display:grid;grid-template-columns:1fr;gap:30px;align-items:center;padding-block:26px 6px}
.hero h1{font-size:clamp(2.5rem,8.5vw,4.4rem);margin:.5em 0 .32em;color:var(--lg-ink)}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero p{font-size:1.12rem;color:var(--lg-ink-muted);max-width:46ch;margin-bottom:1.6em}
.hero-btns{display:flex;flex-wrap:wrap;gap:12px}
.hero-meta{display:flex;flex-wrap:wrap;gap:8px 8px;align-items:center;margin-top:18px;font-size:.85rem;color:var(--lg-ink-muted)}
.hero-meta .dot{width:5px;height:5px;border-radius:50%;background:var(--gold)}
.hero-frame{padding:12px;border-radius:var(--lg-radius-lg);position:relative}
.hero-frame .img{border-radius:16px;height:300px}
.hero-frame .img::after{top:10px;bottom:auto}
.hero-stat{position:absolute;right:16px;bottom:16px;padding:14px 20px;border-radius:16px;display:flex;gap:14px;align-items:center}
.hero-stat b{font-family:var(--head);font-size:1.5rem;color:var(--lg-ink);line-height:1}
.hero-stat span{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--lg-ink-muted)}

/* ---------- sub-page hero (centered) + breadcrumb ---------- */
.page-hero{padding:128px 0 8px;text-align:center}
.page-hero .eyebrow{margin-bottom:16px}
.page-hero h1{font-size:clamp(2.3rem,6.5vw,3.8rem);color:var(--lg-ink);max-width:16ch;margin:0 auto .5em}
.page-hero p{font-size:1.12rem;color:var(--lg-ink-muted);max-width:60ch;margin:0 auto 1.7em}
.page-hero .hero-btns{justify-content:center}
.crumb{display:flex;gap:8px;justify-content:center;font-size:.82rem;color:var(--lg-ink-muted);margin-bottom:22px}
.crumb a:hover{color:var(--gold)}
.crumb span{color:var(--lg-line)}

/* two-column prose panel (e.g. "combining procedures") */
.note-panel{padding:38px 32px;border-radius:var(--lg-radius-lg);max-width:900px;margin:0 auto}
.note-panel h2{font-size:clamp(1.6rem,4vw,2.2rem);margin-bottom:.4em}
.note-panel p{color:var(--lg-ink-muted);margin:0}

/* section prose */
.prose{max-width:64ch;color:var(--lg-ink-muted);font-size:1.06rem}
.prose em{font-style:italic}

/* at-a-glance facts strip (procedure pages) */
.glance{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:1px;background:var(--lg-line);
  border-radius:var(--lg-radius);overflow:hidden;margin-top:14px;box-shadow:var(--lg-shadow)}
.glance .g{background:var(--surface-2);padding:16px 18px}
.glance .g span{display:block;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--lg-ink-muted);margin-bottom:5px}
.glance .g b{font-family:var(--head);font-size:.96rem;color:var(--lg-ink);font-weight:700;line-height:1.25}

/* technique cards */
.tech{display:grid;grid-template-columns:1fr;gap:16px;margin-top:30px}
.tech .t{padding:24px 24px}
.tech .t h3{font-size:1.12rem;color:var(--gold);margin-bottom:.35em}
.tech .t p{margin:0;color:var(--lg-ink-muted);font-size:.96rem}
.tech-note{max-width:66ch;margin:22px auto 0;color:var(--lg-ink-muted)}

/* honest-recovery / checklist bullets */
.checklist{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.checklist li{position:relative;padding-left:28px;color:var(--lg-ink-muted)}
.checklist li::before{content:"";position:absolute;left:2px;top:9px;width:10px;height:10px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 0 4px rgba(154,118,66,.16)}
@media(min-width:760px){ .tech{grid-template-columns:repeat(2,1fr)} }

/* ---------- trust strip ---------- */
.trust{margin-top:34px}
.trust .strip{display:grid;grid-template-columns:1fr 1fr;gap:20px 8px;padding:24px 18px;border-radius:var(--lg-radius)}
.trust .t{text-align:center;position:relative}
.trust .t b{font-family:var(--head);font-size:1.6rem;font-weight:700;display:block;color:var(--lg-ink)}
.trust .t span{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--lg-ink-muted)}

/* ---------- generic grids ---------- */
.cards-3{display:grid;gap:18px;margin-top:38px}
.card{padding:28px 26px}
.card .ic{width:42px;height:42px;margin-bottom:15px;color:var(--gold)}
.card h3{font-size:1.24rem;margin-bottom:.4em;color:var(--lg-ink)}
.card p{color:var(--lg-ink-muted);margin:0;font-size:.97rem}
.card .motto{margin-top:.8em;font-weight:600;color:var(--lg-ink);border-left:2px solid var(--gold);padding-left:12px}

.treat-head{margin-bottom:32px}
.grid-treat{display:grid;grid-template-columns:1fr;gap:16px}
.tcard{overflow:hidden;display:flex;flex-direction:column;cursor:pointer}
.tcard .thumb{height:132px;border-radius:14px;margin:12px 12px 0}
.tcard .body{padding:16px 20px 22px}
.tcard h3{font-size:1.15rem;margin-bottom:.3em;color:var(--lg-ink)}
.tcard p{color:var(--lg-ink-muted);font-size:.9rem;margin:0}
.tcard .go{margin-top:13px;font-size:.76rem;font-weight:700;letter-spacing:.04em;color:var(--gold);text-transform:uppercase;display:inline-flex;gap:.4em}

/* ---------- journey (single glass panel) ---------- */
.journey-panel{padding:44px 30px;border-radius:var(--lg-radius-lg);margin-top:6px}
.journey .eyebrow{margin-bottom:14px}
.steps{display:grid;gap:24px;margin-top:36px}
.step{display:flex;gap:18px;align-items:flex-start}
.step .n{flex:none;width:48px;height:48px;border-radius:13px;background:rgba(154,118,66,.14);border:1px solid rgba(154,118,66,.45);
  display:grid;place-items:center;font-family:var(--head);font-weight:700;font-size:1.2rem;color:var(--gold)}
.step h3{font-size:1.18rem;color:var(--lg-ink);margin-bottom:.25em}
.step p{color:var(--lg-ink-muted);margin:0;font-size:.95rem}
.journey .more{margin-top:32px}
.journey .more a{color:var(--gold);font-weight:600;border-bottom:1px solid var(--gold);padding-bottom:3px}

/* ---------- results (before/after) ---------- */
.ba-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:32px}
.ba{overflow:hidden;padding:0}
.ba .pair{display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:2px;position:relative}
.ba .pair .ph{border-radius:12px;height:190px}
.ba .pair .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:12px}
.ba .pair .ph:has(img)::before{display:none}
.ba .pair .ph:has(img)::after{background:rgba(8,12,20,.62);color:#fff;left:8px;bottom:8px;right:auto;padding:3px 9px;border-radius:7px;letter-spacing:.1em;font-size:.58rem}
/* 18+ sensitive-content gate (intimate before/after) */
.ba .gate{position:absolute;inset:2px;border-radius:12px;z-index:4;display:grid;place-items:center;text-align:center;padding:16px;cursor:pointer;background:rgba(9,15,25,.74);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.ba.revealed .gate{display:none}
.ba .gate-inner{display:grid;gap:7px;justify-items:center;max-width:250px;color:#fff}
.ba .gate-inner svg{width:26px;height:26px;fill:none;stroke:#fff;stroke-width:1.7;opacity:.9}
.ba .gate b{font-family:var(--head);font-size:.98rem;letter-spacing:.03em}
.ba .gate span{font-size:.76rem;line-height:1.45;color:rgba(255,255,255,.82)}
.ba .gate-btn{margin-top:5px;border:1px solid rgba(255,255,255,.55);background:rgba(255,255,255,.14);color:#fff;padding:8px 20px;border-radius:999px;font-weight:600;font-size:.8rem;cursor:pointer;transition:background .2s}
.ba .gate-btn:hover{background:rgba(255,255,255,.26)}
.ba .cap{padding:13px 18px;font-size:.9rem;color:var(--lg-ink-muted)}
.ba .cap b{color:var(--lg-ink);font-weight:600}

/* ---------- reviews ---------- */
.rev-grid{display:grid;grid-template-columns:1fr;gap:18px;margin-top:32px}
.rev{padding:26px 26px}
.stars{color:var(--gold);letter-spacing:2px;font-size:.9rem}
.rev p{font-size:1rem;color:var(--lg-ink);margin:.6em 0 0}
.rev .who{display:flex;align-items:center;gap:12px;margin-top:16px}
.rev .av{width:44px;height:44px;border-radius:50%;flex:none}
.rev .who b{display:block;font-size:.93rem;color:var(--lg-ink)}
.rev .who span{font-size:.82rem;color:var(--lg-ink-muted)}

/* ---------- doctors ---------- */
.doc-grid{display:grid;grid-template-columns:1fr;gap:18px;margin-top:32px}
.doc{overflow:hidden;text-align:center;padding-bottom:24px}
.doc .por{height:210px;border-radius:14px;margin:12px 12px 0}
.doc .por img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;border-radius:inherit;display:block}
.founder-flex{display:flex;flex-direction:column;align-items:center;gap:22px}
.founder-photo{width:min(240px,70%);border-radius:14px;display:block}
@media(min-width:700px){.founder-flex{flex-direction:row;align-items:flex-start;gap:30px}.founder-photo{width:220px;flex:0 0 auto}}
.doc h3{font-size:1.12rem;margin:18px 0 .15em;color:var(--lg-ink)}
.doc .spec{color:var(--gold);font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.doc .cred{color:var(--lg-ink-muted);font-size:.87rem;margin:.5em 22px 0}

/* ---------- faq (glass panel) ---------- */
.faq-panel{max-width:820px;margin:32px auto 0;padding:14px 30px}
details{border-bottom:1px solid var(--lg-line)}
details:last-child{border-bottom:0}
summary{list-style:none;cursor:pointer;padding:22px 44px 22px 2px;position:relative;font-family:var(--head);font-weight:600;font-size:1.08rem;color:var(--lg-ink)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:4px;top:18px;font-size:1.5rem;color:var(--gold);font-weight:400}
details[open] summary::after{content:"−"}
details .ans{padding:0 44px 24px 2px;color:var(--lg-ink-muted);margin-top:-6px}

/* ---------- gallery filter pills ---------- */
.filter-row{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:28px}
.filter-row button{font-family:var(--sans);font-size:.85rem;font-weight:600;padding:9px 16px;border-radius:999px;
  border:1px solid var(--lg-edge);background:var(--btn2-bg);color:var(--lg-ink-muted);cursor:pointer;
  transition:background-color .2s,color .2s,transform .16s var(--lg-spring)}
.filter-row button:hover{color:var(--lg-ink)}
.filter-row button.active{background:linear-gradient(180deg,#B8935A,#9A7642);color:#fff;border-color:transparent}
.ba.hide{display:none}

/* ---------- contact channels + lead form ---------- */
.chan{display:grid;grid-template-columns:1fr;gap:16px;margin-top:32px}
.chan .c{padding:26px 26px}
.chan .c .ic{width:36px;height:36px;color:var(--gold);margin-bottom:12px}
.chan .c h3{font-size:1.12rem;color:var(--lg-ink);margin-bottom:.3em}
.chan .c p{color:var(--lg-ink-muted);font-size:.95rem;margin:0 0 10px}
.chan .c .val{font-weight:600;color:var(--lg-ink)}
.lead-form{max-width:560px;margin:26px auto 0;display:grid;gap:15px;text-align:left}
.lead-form label{display:block;font-size:.82rem;font-weight:600;color:var(--lg-ink);margin-bottom:7px}
.lead-form .lg-field{width:100%;padding:13px 16px;font-family:var(--sans);font-size:1rem}
.lead-form textarea.lg-field{min-height:120px;resize:vertical}
.lead-form .fine{font-size:.8rem;color:var(--lg-ink-muted);text-align:center;margin:2px 0 0}
.lead-form select.lg-field{cursor:pointer}
.lead-form .consent{display:flex;gap:10px;align-items:flex-start;font-size:.82rem;color:var(--lg-ink-muted)}
.lead-form .consent input{margin-top:3px;width:16px;height:16px;flex:none;accent-color:var(--gold);cursor:pointer}
.lead-form .consent a{color:var(--gold);font-weight:600}
.lead-form .form-actions{display:grid;gap:10px}
@media(min-width:560px){.lead-form .form-actions{grid-template-columns:1fr 1fr}}
.map-box{margin-top:26px;padding:34px 26px;border-radius:var(--lg-radius-lg);text-align:center}
.map-box .pin{width:40px;height:40px;color:var(--gold);margin:0 auto 12px}
.map-box .addr{color:var(--lg-ink);font-weight:600;max-width:44ch;margin:0 auto 6px}
@media(min-width:700px){ .chan{grid-template-columns:1fr 1fr} }

/* ---------- final CTA (gold accent glass) ---------- */
.final .panel{text-align:center;padding:64px 30px;border-radius:var(--lg-radius-lg);position:relative;overflow:hidden;
  background:linear-gradient(150deg,#B8935A 0%,#9A7642 55%,#7E5F33 100%);color:#fff;
  box-shadow:0 30px 70px -30px rgba(122,95,51,.7),inset 0 1px 0 rgba(255,255,255,.25)}
.final h2{color:#fff;font-size:clamp(2rem,6vw,3rem);max-width:17ch;margin-inline:auto}
.final p{color:rgba(255,255,255,.9);max-width:52ch;margin:1em auto 1.8em}
.final .panel-alt{margin:1.4em auto 0;font-size:.95rem;color:rgba(255,255,255,.85)}
.final .panel-alt a{color:#fff;text-decoration:underline;font-weight:600}

/* ---------- footer ---------- */
footer{background:var(--footer-bg);color:rgba(255,255,255,.66);font-size:.92rem;margin-top:70px}
footer .top{display:grid;grid-template-columns:1fr;gap:30px;padding:54px 0 36px}
footer .brand{color:#fff;font-size:1.12rem}
footer .tag{margin-top:12px;max-width:34ch;color:rgba(255,255,255,.55)}
footer h4{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-soft);margin:0 0 14px;font-weight:600}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
footer a:hover{color:#fff}
.socials{display:flex;gap:10px;margin-top:16px}
.socials a{width:38px;height:38px;border-radius:11px;border:1px solid rgba(255,255,255,.18);display:grid;place-items:center;color:rgba(255,255,255,.75)}
.socials a:hover{background:var(--gold);border-color:var(--gold);color:#fff}
.socials svg{width:17px;height:17px;fill:currentColor}
/* Social tiles stay uniform in the site's own style (owner 2026-07-18) — no platform
   branding, no gold fill; Instagram's prominence lives in the sticky-header button. */
.socials a{transition:background-color .2s ease,border-color .2s ease,transform .16s var(--lg-spring)}
.socials a:active{transform:scale(.94)}
footer .disc{border-top:1px solid rgba(255,255,255,.1);padding:22px 0;font-size:.78rem;color:rgba(255,255,255,.42);line-height:1.6}
footer .copy{padding-bottom:36px;font-size:.8rem;color:rgba(255,255,255,.5)}

/* ---------- floating whatsapp ---------- */
.fab{position:fixed;right:18px;bottom:18px;z-index:55;display:flex;align-items:center;gap:10px;
  background:linear-gradient(180deg,#2ee06d,#1EB456);color:#fff;padding:13px 17px;border-radius:999px;font-weight:600;font-size:.94rem;
  box-shadow:0 16px 34px -12px rgba(37,211,102,.75);animation:fabin .4s ease .8s both}
.fab svg{width:23px;height:23px;fill:#fff}
.fab .lbl{display:none}
@keyframes fabin{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}

/* ============ responsive ============ */
@media(min-width:560px){
  .trust .strip{grid-template-columns:repeat(4,1fr)}
  .trust .t+.t::before{content:"";position:absolute;left:-4px;top:4px;bottom:4px;width:1px;background:var(--lg-line)}
  .grid-treat{grid-template-columns:1fr 1fr}
  .ba-grid{grid-template-columns:1fr 1fr}
  .rev-grid{grid-template-columns:1fr 1fr}
  .doc-grid{grid-template-columns:repeat(3,1fr)}
  .fab .lbl{display:inline}
  footer .top{grid-template-columns:1.6fr 1fr 1fr 1fr}
}
@media(min-width:900px){
  .section{padding:96px 0}
  nav.main{display:flex;gap:24px;margin-left:18px}
  .head-wa{display:inline-flex}
  .lang{display:block}
  .burger{display:none}
  .cards-3{grid-template-columns:repeat(3,1fr)}
  .grid-treat{grid-template-columns:repeat(4,1fr)}
  .steps{grid-template-columns:1fr 1fr;gap:30px 44px}
  .hero{padding-top:128px}
  .hero .wrap{grid-template-columns:1.05fr .95fr;gap:52px;padding-block:40px 16px}
  .hero-frame .img{height:460px}
  .page-hero{padding-top:150px}
}
@media(max-width:559px){ .brand{font-size:1.05rem} }
/* 900-1150px: the bar holds 7 links + the Get-my-plan pill + lang + buttons — tighten so nothing wraps */
@media(min-width:900px) and (max-width:1149px){
  nav.main{gap:13px;margin-left:16px}
  nav.main a{font-size:.82rem}
  .lang{font-size:.72rem}
  .brand{white-space:nowrap}
}
/* nav links no longer wrap (2026-07-30), so the nav is wider than it used to be at the
   tight band and would otherwise sit flush against the wordmark: keep them apart. */
@media(min-width:900px) and (max-width:1023px){
  nav.main{gap:11px;margin-left:14px}
  nav.main a{font-size:.78rem}
}
/* 900-1023px is the tightest band: the desktop nav, the WhatsApp button and the icon
   buttons all appear at once, and Russian labels are wider than the English ones.
   Squeeze the nav further here (measured: RU overflowed by 10px even before the
   language chip existed). The Instagram button stays, it is an owner decision. */
@media(min-width:900px) and (max-width:1023px){
  nav.main{gap:9px}
  nav.main a{font-size:.77rem}
  .head-right{gap:8px}
  .head-wa{padding:0 15px}
}

/* ===== Guided questionnaire (deliverable 05, /start) ===== */
.q-wrap{max-width:640px;margin:0 auto}
.q-card{padding:34px 30px;border-radius:var(--lg-radius-lg)}
.q-progress{height:4px;border-radius:99px;background:var(--lg-line);overflow:hidden;margin-bottom:26px}
.q-progress i{display:block;height:100%;background:var(--gold);border-radius:99px;transition:width .35s cubic-bezier(.22,1,.36,1)}
.q-step{animation:qIn .35s cubic-bezier(.22,1,.36,1)}
@keyframes qIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.q-kicker{font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.q-q{font-family:var(--head);font-size:clamp(1.35rem,4vw,1.7rem);font-weight:700;color:var(--lg-ink);line-height:1.25;margin:0 0 8px}
.q-hint{color:var(--lg-ink-muted);font-size:.95rem;line-height:1.6;margin:0 0 22px}
.q-hint b{color:var(--lg-ink)}
.q-opts{display:grid;gap:10px}
.q-opt{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;text-align:left;
  padding:15px 18px;border-radius:14px;border:1px solid var(--lg-edge);background:var(--btn2-bg);
  font-family:var(--head);font-weight:600;font-size:1rem;color:var(--lg-ink);cursor:pointer;
  transition:border-color .2s,background .2s,transform .15s}
.q-opt:hover{border-color:var(--gold);background:var(--btn2-bg-hover)}
.q-opt:active{transform:scale(.985)}
.q-opt span{color:var(--gold);font-size:1.1rem;line-height:1}
.q-field{width:100%;padding:14px 16px;border-radius:14px;border:1px solid var(--lg-edge);
  background:var(--surface-2);color:var(--lg-ink);font-family:var(--sans);font-size:1rem}
.q-field:focus{outline:none;border-color:var(--gold)}
textarea.q-field{min-height:110px;resize:vertical;line-height:1.6}
.q-actions{display:flex;gap:10px;align-items:center;margin-top:20px;flex-wrap:wrap}
.q-back{background:none;border:0;color:var(--lg-ink-muted);font-family:var(--sans);font-size:.9rem;
  cursor:pointer;padding:8px 4px}
.q-back:hover{color:var(--gold)}
.q-skip{margin-left:auto}
.q-consent{display:flex;gap:12px;align-items:flex-start;font-size:.9rem;color:var(--lg-ink-muted);
  line-height:1.55;cursor:pointer;margin-top:6px}
.q-consent input{margin-top:3px;width:18px;height:18px;accent-color:var(--gold);flex:none}
.q-summary{background:var(--surface-2);border:1px solid var(--lg-line);border-radius:14px;padding:16px 18px;
  margin:18px 0;font-size:.92rem;line-height:1.85;color:var(--lg-ink-muted)}
.q-summary b{color:var(--lg-ink);font-weight:600}
.q-private{display:flex;gap:9px;align-items:flex-start;font-size:.82rem;color:var(--lg-ink-muted);
  line-height:1.55;margin-top:18px}
.q-private svg{width:15px;height:15px;fill:var(--gold);flex:none;margin-top:2px}
.q-escape{text-align:center;margin-top:20px;font-size:.88rem;color:var(--lg-ink-muted)}
.q-escape a{color:var(--gold);font-weight:600}
@media(max-width:559px){
  .q-card{padding:22px 17px}
  .q-opt{padding:15px 16px;font-size:.95rem}
  /* Phones: the intro must not push the first answer below the fold. Desktop keeps
     the full hero, which reads well there. Measured before: first option at 833px on
     an 812px screen, so nothing was tappable on arrival. */
  .q-hero{padding-top:84px;padding-bottom:0}
  .q-hero h1{font-size:1.5rem;line-height:1.2;margin-bottom:.35em}
  .q-hero p{font-size:.9rem;line-height:1.5;max-width:34ch;margin-left:auto;margin-right:auto}
  .q-hero .crumb{margin-bottom:14px}
  .q-hero .eyebrow{font-size:.62rem}
  .q-progress{margin-bottom:18px}
  .q-card .q-q{font-size:1.22rem;line-height:1.3}  /* beats .section h2 */
  .q-hint{font-size:.88rem;margin-bottom:18px}
  .q-kicker{font-size:.62rem;margin-bottom:7px}
  .q-private{font-size:.78rem}
}

/* ===== Blog (deliverable-4 drafts, review mockup) ===== */
.draft-note{max-width:860px;margin:0 auto;padding:12px 20px;border:1px solid rgba(154,118,66,.45);border-radius:14px;font-size:.85rem;color:var(--lg-ink-muted);display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.draft-note b{color:var(--gold);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.article{max-width:860px;margin:0 auto;padding:46px 48px}
.article h2{font-size:clamp(1.35rem,3vw,1.7rem);margin:1.6em 0 .55em}
.article h2:first-of-type{margin-top:0}
.article h3{font-size:1.08rem;margin:1.5em 0 .45em}
.article p{color:var(--lg-ink-muted);margin:0 0 1em;font-size:1.03rem;line-height:1.75}
/* Cookie consent. Deliberately quiet: a strip at the bottom, not a wall over the
   page. Both buttons are the same size and weight, because making "no" harder
   than "yes" is the pattern regulators single out. */
.consent{position:fixed;left:12px;right:12px;bottom:12px;z-index:120;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  max-width:820px;margin:0 auto;padding:14px 18px;
  background:var(--lg-menu-bg);border:1px solid var(--lg-edge);border-radius:16px;
  box-shadow:0 8px 34px rgba(11,27,51,.16);
  animation:consent-in .28s ease both}
@keyframes consent-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.consent.gone{opacity:0;transform:translateY(12px);transition:opacity .25s,transform .25s}
.consent p{margin:0;flex:1 1 320px;font-size:.88rem;line-height:1.5;color:var(--lg-ink-muted)}
.consent p a{color:var(--gold);text-decoration:underline}
.consent-btns{display:flex;gap:8px;flex:0 0 auto}
.consent-btns button{font:inherit;font-size:.88rem;font-weight:600;cursor:pointer;
  padding:10px 16px;min-height:44px;border-radius:10px;border:1px solid var(--lg-edge);
  background:transparent;color:var(--lg-ink)}
.consent-btns button:hover{border-color:var(--gold-soft)}
.consent-yes{background:var(--gold);border-color:var(--gold);color:#fff}
.consent-yes:hover{background:var(--gold-soft);border-color:var(--gold-soft)}
@media(max-width:600px){
  .consent{left:8px;right:8px;bottom:8px;padding:13px 15px;gap:11px}
  .consent p{flex:1 1 100%;font-size:.84rem}
  .consent-btns{width:100%}
  .consent-btns button{flex:1 1 0}
}
@media(prefers-reduced-motion:reduce){.consent{animation:none}}

/* A photo inside a blog post. Long posts are a wall of text on a phone, and a
   picture every few paragraphs is what makes them readable. Bleeds slightly wider
   than the text column on desktop so it reads as a break, not an interruption. */
.article figure.post-photo{margin:1.9em 0;padding:0}
.article figure.post-photo img{width:100%;height:auto;display:block;border-radius:16px;
  border:1px solid var(--lg-edge);background:var(--surface-ph)}
.article figure.post-photo figcaption{margin-top:.6em;font-size:.86rem;line-height:1.5;
  color:var(--ph-label);text-align:center}
@media(min-width:1000px){.article figure.post-photo{margin-left:-40px;margin-right:-40px}}
.article ul{margin:0 0 1.2em;padding-left:1.2em;display:grid;gap:.55em}
.article li{color:var(--lg-ink-muted);line-height:1.65}
.article li strong,.article p strong{color:var(--lg-ink)}
.story-ph{border:1.5px dashed rgba(154,118,66,.55);border-radius:14px;padding:18px 22px;margin:1.5em 0;font-size:.92rem;color:var(--lg-ink-muted)}
.story-ph b{display:block;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.story-real{border:1.5px solid rgba(154,118,66,.4);border-radius:14px;padding:20px 24px;margin:1.5em 0;line-height:1.75;color:var(--lg-ink-muted)}
.story-real b{display:block;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.post-meta{display:flex;gap:8px;justify-content:center;font-size:.8rem;color:var(--lg-ink-muted);margin-top:14px;flex-wrap:wrap}
.blog-grid .cat{font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:9px;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.blog-grid .cat span{color:var(--lg-ink-muted);letter-spacing:.05em;font-weight:500}
.blog-grid .tcard .body{padding:20px 22px 24px}
.blog-grid .tcard h3{font-size:1.08rem;line-height:1.35}
.blog-grid .tcard p{margin-top:.45em}
@media(max-width:720px){ .article{padding:34px 24px} }

/* ===== Mobile design pass (2026-07-20) ===== */
/* Menu drawer: the WhatsApp button is a real pill again — the generic drawer-link
   rule was blowing up its font, stripping side padding and adding an underline. */
.mobile-nav a.btn{font-size:.94rem;font-family:inherit;padding:0 20px;height:50px;border-bottom:0;align-self:flex-start;white-space:nowrap}
/* …and the language-switch links in the drawer stay small inline text, not menu items */
.mobile-nav .lang-m a{font-size:inherit;font-family:inherit;padding:0;border-bottom:0;display:inline}
/* Phones: the menu goes full-screen (no page strip peeking through on the left)
   and the WhatsApp button becomes a full-width, taller CTA — it was overflowing
   the 82%-wide drawer on narrower phones (RU label needs 232px). */
@media(max-width:559px){
  .mobile-nav{inset:0;padding:84px 34px}
  .mobile-nav a.btn{align-self:stretch;justify-content:center;height:54px;font-size:1rem}
  .brand{white-space:nowrap}
}
/* Narrow phones (≤399px): brand stays on one line in the sticky bar */
@media(max-width:399px){ .brand{font-size:.95rem} }
/* Phones: hero call-to-action buttons go full-width and bigger (owner request) —
   the primary WhatsApp button is the site's main conversion action. */
@media(max-width:559px){
  .hero-btns .btn{width:100%;justify-content:center}
  .hero-btns .btn-wa{height:auto;min-height:56px;font-size:1.06rem;padding:13px 24px;line-height:1.3;text-align:center}
}
/* Long words (mostly Russian) must never poke out of headings on phones:
   break as a safety net, and hyphenate properly on RU pages. */
@media(max-width:559px){
  h1,h2,h3,summary{overflow-wrap:break-word}
  html[lang="ru"] h1,html[lang="ru"] h2,html[lang="ru"] h3,html[lang="ru"] summary{hyphens:auto}
}
/* White CTA button inside the gold panel (was inline-styled on every page; the
   fixed 54px height made long RU labels overflow the pill when they wrapped). */
.btn-panel{background:#fff;color:#7E5F33;font-size:1.05rem;height:54px;padding:0 26px}
@media(max-width:559px){
  .btn-panel{height:auto;min-height:54px;padding:12px 22px;font-size:.98rem;line-height:1.35;text-align:center}
}
/* Phones: footer content is centred (owner request) */
@media(max-width:699px){
  footer .top{text-align:center}
  footer .top img{margin-left:auto;margin-right:auto}
  footer .tag{margin-left:auto;margin-right:auto}
  footer .socials{justify-content:center}
  footer .disc,footer .copy{text-align:center}
}

/* Homepage only: the 8 treatment tiles become compact 2-up cards on phones,
   halving the scroll. Descriptions stay on the pillar hubs, which keep the
   detailed single-column cards. */
@media(max-width:559px){
  #treatments .grid-treat{grid-template-columns:1fr 1fr;gap:12px}
  #treatments .tcard .thumb{height:76px;margin:8px 8px 0}
  #treatments .tcard .body{padding:12px 14px 16px}
  #treatments .tcard h3{font-size:.98rem;margin-bottom:.15em}
  #treatments .tcard p{display:none}
  #treatments .tcard .go{margin-top:7px;font-size:.68rem}
}

/* ---- WhatsApp router modal (injected on every page by theme.js; owner-approved 2026-07-29).
   Routes price-askers straight to WhatsApp and offers serious patients the questionnaire. ---- */
.wa-modal-overlay{position:fixed;inset:0;z-index:200;display:none;place-items:center;padding:20px;background:rgba(9,15,25,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.wa-modal-overlay.open{display:grid}
.wa-modal{position:relative;max-width:430px;width:100%;background:#FFFFFF;color:var(--lg-ink);border:1px solid var(--lg-edge);border-radius:22px;padding:30px 26px 26px;box-shadow:0 30px 80px rgba(9,15,25,.35)}
:root[data-theme='dark'] .wa-modal{background:#0C1626}
.wa-modal h3{font-family:var(--head);font-size:1.25rem;margin:0 0 10px;padding-right:30px;color:var(--lg-ink)}
.wa-modal p{font-size:.92rem;line-height:1.55;color:var(--lg-ink-muted);margin:0 0 18px}
.wa-modal .wa-modal-btns{display:grid;gap:10px}
.wa-modal .wa-modal-btns .btn{width:100%;justify-content:center;min-height:52px;height:auto;padding-top:12px;padding-bottom:12px;text-align:center;line-height:1.3}
.wa-modal .btn-gold{background:linear-gradient(180deg,#B08A50,#9A7642);color:#fff;border:1px solid rgba(255,255,255,.28)}
:root[data-theme='dark'] .wa-modal .btn-gold{background:linear-gradient(180deg,#D9B87E,#CBA467);color:#0C1626}
.wa-modal .wa-modal-note{font-size:.78rem;color:var(--lg-ink-muted);text-align:center;margin:12px 0 0}
.wa-modal-close{position:absolute;top:14px;right:18px;border:none;background:none;font-size:1.5rem;line-height:1;color:var(--lg-ink-muted);cursor:pointer;padding:4px}

/* ---- Language chip (owner-approved 2026-07-29): replaces the "EN · RU · AR" text row
   with a compact dropdown, freeing ~70px in the header bar. Built by theme.js. ---- */
.lang-chip{position:relative;flex:none}
.lang-chip-btn{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 12px;border-radius:12px;border:1px solid var(--lg-edge);background:var(--btn2-bg);color:var(--lg-ink);font-family:inherit;font-size:.8rem;font-weight:700;letter-spacing:.04em;cursor:pointer;transition:background-color .2s ease,transform .16s var(--lg-spring)}
.lang-chip-btn:hover{background:var(--btn2-bg-hover,var(--btn2-bg))}
.lang-chip-btn .car{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--gold);transition:transform .2s ease}
.lang-chip.open .lang-chip-btn .car{transform:rotate(180deg)}
.lang-chip-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:150px;background:#FFFFFF;border:1px solid var(--lg-edge);border-radius:14px;padding:6px;box-shadow:0 18px 44px rgba(9,15,25,.22);display:none;z-index:60}
:root[data-theme='dark'] .lang-chip-menu{background:#0C1626}
.lang-chip.open .lang-chip-menu{display:block}
.lang-chip-menu a,.lang-chip-menu span{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 12px;border-radius:9px;font-size:.8rem;font-weight:600;color:var(--lg-ink);text-decoration:none}
.lang-chip-menu a:hover{background:var(--btn2-bg)}
.lang-chip-menu .cur{color:var(--gold)}
.lang-chip-menu .soon{color:var(--lg-ink-muted);cursor:default}
.lang-chip-menu .soon i{font-style:normal;font-size:.62rem;border:1px solid var(--lg-edge);border-radius:99px;padding:2px 7px}
/* the chip replaces the desktop text switcher; mobile drawer keeps its own .lang-m row */
.head-right .lang:has(.lang-chip){display:block;font-size:inherit}
/* 900-1199px is the known tight range (7 nav links + buttons, wider Russian labels):
   the chip drops its caret and becomes a 40px square, matching the icon-button family. */
@media (max-width:1199px){
  .lang-chip-btn{width:40px;padding:0;justify-content:center;gap:0;font-size:.76rem}
  .lang-chip-btn .car{display:none}
}

/* ---- Language-switch cross-fade (deliverable 13, owner-approved 2026-07-29).
   Cross-document View Transitions: the browser cross-fades the outgoing page into its
   translated twin. Scoped to LANGUAGE switches only by theme.js (other navigations call
   skipTransition), so normal browsing stays instant. Firefox ignores this and uses the
   JS fallback below. The header pill is excluded so it stays visually anchored. ---- */
@view-transition{navigation:auto}
/* Page-to-page: fast and near-invisible on purpose. Content lifts out, the new page drifts
   up into place. Ceremony is reserved for the language switch (the glass veil further down);
   using it for ordinary clicks would make browsing feel like a slideshow. */
::view-transition-old(root){animation:vst-out .18s ease both}
::view-transition-new(root){animation:vst-in .26s cubic-bezier(.22,.61,.36,1) both}
@keyframes vst-out{to{opacity:0;transform:translateY(-6px)}}
@keyframes vst-in{from{opacity:0;transform:translateY(10px)}}
header .bar{view-transition-name:vst-header}
/* The header keeps its own snapshot so it stays anchored while the page swaps, but the two
   snapshots must NOT both sit at full opacity or the bar visibly doubles (the Russian bar is
   wider, so you saw two headers at once). Old one leaves fast, new one arrives right after. */
::view-transition-old(vst-header){animation:vst-head-out .14s ease both}
::view-transition-new(vst-header){animation:vst-head-in .24s ease .07s both}
@keyframes vst-head-out{to{opacity:0}}
@keyframes vst-head-in{from{opacity:0}}
/* fallback path for browsers without View Transitions */
body.vst-leaving{opacity:0;filter:blur(6px);transition:opacity .18s ease,filter .18s ease}
body.vst-entering{animation:vst-fade-in .34s ease both}
@keyframes vst-fade-in{from{opacity:0;filter:blur(6px)}to{opacity:1;filter:blur(0)}}
body.vst-leaving header .bar,body.vst-entering header .bar{opacity:1;filter:none}
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  body.vst-leaving,body.vst-entering{opacity:1;filter:none;animation:none;transition:none}
}

/* ---- Glass veil for LANGUAGE switches (deliverable 13b, owner-approved 2026-07-29).
   A frosted panel rises, the logo fades in, the language changes behind it, the veil melts
   away. Theme-aware. The logo URL is resolved relative to THIS stylesheet, so one path works
   from every page depth, including /ru/blog/. Raised and cleared by theme.js. ---- */
html.vst-veil::after{
  content:"";position:fixed;inset:0;z-index:300;pointer-events:none;
  background:rgba(246,243,238,.72) url("assets/logo.png") center center / 180px auto no-repeat;
  backdrop-filter:blur(22px) saturate(120%);-webkit-backdrop-filter:blur(22px) saturate(120%);
  opacity:0;transition:opacity .34s ease}
:root[data-theme='dark'].vst-veil::after{background-color:rgba(10,21,38,.78)}
html.vst-veil-on::after{opacity:1;animation:vst-logo-breathe 1.2s ease-in-out both}
@keyframes vst-logo-breathe{from{background-size:168px auto}to{background-size:184px auto}}
@media (prefers-reduced-motion:reduce){
  html.vst-veil::after{display:none}
}

/* ---- Tile panel for treatments awaiting their own photograph (2026-07-30).
   Deliberate brand-tinted panel rather than a borrowed image from another procedure:
   duplicated photos read as a mistake, this reads as design. To wire a real photo later,
   swap class="thumb tint" for the usual inline background and drop the class. ---- */
.tcard .thumb.tint{position:relative;overflow:hidden;
  background:linear-gradient(135deg,rgba(184,147,90,.30),rgba(154,118,66,.12) 46%,rgba(255,255,255,0) 72%),var(--surface-2)}
.tcard .thumb.tint::before{content:"";position:absolute;left:-18%;right:-18%;top:52%;height:150%;border-radius:50%;
  border:1px solid rgba(154,118,66,.34);border-bottom-color:transparent}
.tcard .thumb.tint::after{content:"";position:absolute;left:50%;top:38%;width:26px;height:26px;margin-left:-13px;
  border-left:1.5px solid var(--gold);border-top:1.5px solid var(--gold);transform:rotate(45deg);opacity:.5}
:root[data-theme='dark'] .tcard .thumb.tint{background:linear-gradient(135deg,rgba(203,164,103,.22),rgba(203,164,103,.07) 46%,rgba(255,255,255,0) 72%),var(--surface-2)}

/* ---- Blog in the desktop bar only where it genuinely fits (2026-07-30, blogs approved).
   Eight links do not fit between 900 and 1149px, especially with the longer Russian labels
   (measured: needs 569px, has 362px), and forcing them wraps every label onto two lines.
   Blog is secondary navigation, so below 1150px it lives in the mobile drawer and the
   footer, which carry it at every width. ---- */
nav.main .nav-blog{display:none}
@media(min-width:1150px){ nav.main .nav-blog{display:inline} }
nav.main a{white-space:nowrap}

/* ---- Section links under a hub grid (2026-07-31, owner call).
   Some treatments are sections of a bigger page, not pages of their own (the facelift
   variations, MIA). A full photo tile promises a page and delivers an anchor jump, and six
   near-identical photos read as a bug, so they are presented as a compact link row instead. */
.tvars{margin-top:22px;padding:16px 20px;border-radius:16px;background:var(--surface);border:1px solid var(--lg-edge);
  font-size:.88rem;color:var(--lg-ink-muted);text-align:center}
.tvars b{color:var(--lg-ink);font-family:var(--head);font-weight:600}
.tvars a{display:inline-block;margin:4px 3px 0;padding:5px 13px;border-radius:999px;border:1px solid var(--lg-edge);
  color:var(--lg-ink);font-weight:600;font-size:.82rem;transition:background .2s,border-color .2s,color .2s}
.tvars a:hover{background:var(--gold);border-color:var(--gold);color:#fff}

/* ---- Wide "hub" card: a treatment whose variations are sections of its own page
   (owner call 2026-07-31: the variations must sit BESIDE the card, not as a stray row
   underneath, so it is obvious what they belong to). Uses <details> so it needs no JS. ---- */
.tcard-wide{overflow:visible;cursor:default;display:grid;grid-template-columns:1fr;gap:0}
.tcard-wide .tw-main{display:flex;flex-direction:column;color:inherit;text-decoration:none;cursor:pointer}
.tcard-wide .tw-main .thumb{height:132px;border-radius:14px;margin:12px 12px 0}
.tcard-wide .tw-side{border-top:1px solid var(--lg-edge);padding:14px 18px 16px}
.tcard-wide .tw-side summary .car{width:0;height:0;flex:none;border-left:5px solid transparent;border-right:5px solid transparent;
  border-top:6px solid currentColor;transition:transform .2s ease}
.tcard-wide .tw-side[open] summary .car{transform:rotate(180deg)}
.tcard-wide .tw-list{display:grid;gap:8px;margin-top:12px}
.tcard-wide .tw-list a{display:block;padding:10px 13px;border-radius:12px;border:1px solid var(--lg-edge);
  background:var(--btn2-bg);font-size:.83rem;font-weight:600;color:var(--lg-ink);
  transition:background .2s,border-color .2s,color .2s,transform .16s var(--lg-spring)}
.tcard-wide .tw-list a span{display:block;font-weight:400;font-size:.76rem;color:var(--lg-ink-muted);margin-top:2px}
.tcard-wide .tw-list a:hover{background:var(--gold);border-color:var(--gold);color:#fff;transform:translateY(-1px)}
.tcard-wide .tw-list a:hover span{color:rgba(255,255,255,.85)}
@media(min-width:700px){
  /* two columns wide, sections sit to the RIGHT of the photo and text */
  .tcard-wide{grid-column:span 2;grid-template-columns:1.05fr .95fr}
  .tcard-wide .tw-side{border-top:0;border-left:1px solid var(--lg-edge);display:flex;flex-direction:column;justify-content:flex-start;padding:24px 20px 18px}
}

/* sections button: gold sheen sweeps across on hover, gold fill when open */



/* sections toggle: plain text, no button chrome (owner call 2026-07-31) */
.tcard-wide .tw-side summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:0;border:0;
  font-family:var(--head);font-weight:600;font-size:.84rem;color:var(--lg-ink-muted);
  transition:color .2s ease}
.tcard-wide .tw-side summary::-webkit-details-marker{display:none}
.tcard-wide .tw-side summary::marker{content:""}
.tcard-wide .tw-side summary::after{content:none}
.tcard-wide .tw-side summary:hover{color:var(--gold)}
.tcard-wide .tw-side[open] summary{color:var(--lg-ink)}

/* ---- Header opacity (owner report 2026-07-31: page headings ghost through the bar).
   The kit's .lg-deck is 52% opaque, which is fine for cards floating over quiet areas but
   not for a fixed bar that large bold headings scroll underneath. Raised to 86%: still glass,
   no text bleeding through. ---- */
header .bar{background-color:rgba(255,255,255,.86)}
:root[data-theme='dark'] header .bar{background-color:rgba(12,22,38,.88)}