/* Dobrozub — shared design tokens. Loaded before each page's own <style>,
   so inline/page CSS keeps final say. Additive only — safe to include on
   every page without changing existing look. */
:root{
  --bg:#191917;
  --surface:#1e1e1e;
  --card:#262523;
  --gold:#d1b463;
  --cream:#f5db94;
  --teal:#254145;
  --sage:#a7ab9c;
  --text:#f4f2ec;
  --muted:rgba(244,242,236,.55);
  --border:rgba(255,255,255,.08);
  --light:#f5f3ef;
  --dark-text:#1e1e1e;
  --ink:#1a1714;
  --page:#f5f3ef;
}

a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:4px;
}

#grain{
  position:fixed;
  inset:0;
  z-index:250;
  pointer-events:none;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Spacing scale ── */
:root{
  --space-1:8px;
  --space-2:16px;
  --space-3:24px;
  --space-4:32px;
  --space-5:48px;
  --space-6:64px;
  --space-7:96px;
  --space-8:140px;
}

/* ── Shared component styles (deduped from service pages) ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* overflow-x:clip on body alone doesn't stop position:fixed/transformed
   descendants (e.g. the [data-rv] scroll-reveal system's pre-animation
   translateX(±40px) offset) from widening document.documentElement's own
   scrollWidth — it has to be set on html itself to actually contain them. */
html{scroll-behavior:smooth;overflow-x:clip}
body{font-family:'Montserrat',system-ui,sans-serif;background:transparent;color:#1a1714;overflow-x:clip;-webkit-font-smoothing:antialiased;touch-action:manipulation}
@keyframes raySpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes hs-flicker{0%,100%{opacity:.6}50%{opacity:1}}
@keyframes ambDrift{0%{transform:translate(0,0) scale(1) rotate(0deg)}33%{transform:translate(9%,-12%) scale(1.25) rotate(14deg)}66%{transform:translate(-11%,9%) scale(.85) rotate(-12deg)}100%{transform:translate(0,0) scale(1) rotate(0deg)}}
@keyframes ambMorph{0%,100%{border-radius:42% 58% 65% 35%/45% 40% 60% 55%}25%{border-radius:60% 40% 35% 65%/55% 65% 35% 45%}50%{border-radius:35% 65% 55% 45%/40% 55% 45% 60%}75%{border-radius:55% 45% 40% 60%/60% 40% 55% 45%}}
#ambientBg{position:fixed;inset:0;z-index:-1;overflow:hidden;background:#f6f4ef;pointer-events:none}
#ambientBg .amb-1{top:-10%;left:8%;width:46vw;height:46vw;max-width:640px;max-height:640px;background:radial-gradient(circle,rgba(37,65,69,.32) 0%,rgba(37,65,69,.13) 45%,transparent 72%)}
#ambientBg .amb-2{bottom:-14%;right:4%;width:40vw;height:40vw;max-width:560px;max-height:560px;background:radial-gradient(circle,rgba(209,180,99,.3) 0%,rgba(209,180,99,.12) 45%,transparent 72%);animation-delay:-8s,-4s}
#ambientBg .amb-3{top:36%;right:26%;width:26vw;height:26vw;max-width:380px;max-height:380px;background:radial-gradient(circle,rgba(209,180,99,.24) 0%,transparent 70%);animation-delay:-15s,-10s}
#ambientBg .amb-lines{position:absolute;left:50%;top:46%;width:2400px;height:2400px;transform:translate(-50%,-50%)}
@media(prefers-reduced-motion:reduce){#ambientBg .amb-blob,#ambientBg .amb-lines *{animation:none}}
a{color:inherit;text-decoration:none}
::selection{background:#d1b463;color:#1a1714}
@keyframes pulseDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}}
@keyframes spotlight{0%,100%{transform:translate(-12%,-8%) scale(1)}50%{transform:translate(12%,8%) scale(1.15)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.word>span{display:inline-block;transform:translateY(110%);transition:transform 1s cubic-bezier(.19,1,.22,1)}
.heroReady .word>span{transform:none}
.fl{color:rgba(240,236,227,.4);font-size:13px;transition:color .25s;line-height:1.7}
.fl:hover{color:rgba(240,236,227,.9)}
.soc{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.5);transition:all .3s}
.soc:hover{background:rgba(255,255,255,.1);color:#fff;transform:translateY(-3px)}
.navlink{font-size:14px;color:rgba(255,255,255,.6);letter-spacing:.01em;transition:color .25s;position:relative}
.navlink:hover{color:#fff}
.navlink::after{content:'';position:absolute;left:0;bottom:-6px;height:1px;width:0;background:#d1b463;transition:width .35s cubic-bezier(.19,1,.22,1)}
.navlink:hover::after{width:100%}
input.finput:focus{border-color:rgba(255,255,255,.4)!important;outline:none}
.magnetic{will-change:transform}
.magnetic:active{transform:scale(.94)!important;transition:transform .1s ease!important}
.soc:active{transform:scale(.9)!important}
.btn-gold{position:relative;overflow:hidden}
.btn-gold::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);background-size:200% 100%;animation:shimmer 4.5s ease-in-out infinite}
.m-tog{display:none;flex-direction:column;gap:5px;padding:8px;cursor:pointer;background:none;border:none;margin-left:12px}
.m-tog span{display:block;width:22px;height:1.5px;background:#fff}
.m-tog span:last-child{width:14px}
#mob{display:none;position:fixed;inset:0;background:#14130f;z-index:400;flex-direction:column;padding:0 28px;overflow-y:auto}
#mob.open{display:flex}
#mob .mob-top{display:flex;align-items:center;justify-content:space-between;height:72px;border-bottom:1px solid rgba(255,255,255,.08);flex-shrink:0}
#mob .mob-top span{font-size:17px;font-weight:700;letter-spacing:.18em;color:#fff}
#mob .mob-close{font-size:24px;color:#fff;line-height:1;padding:8px;background:none;border:none;cursor:pointer}
#mob nav{display:flex;flex-direction:column;margin-top:8px}
#mob nav a{padding:18px 0;font-size:16px;color:rgba(240,236,227,.8);border-bottom:1px solid rgba(255,255,255,.08);text-decoration:none}
#mob .mob-cta{margin-top:28px;margin-bottom:40px;display:flex;justify-content:center;gap:10px;padding:15px 24px;background:#fff;color:#111;border-radius:100px;font-size:14px;font-weight:600;text-decoration:none}

/* Section-header rows across the site use inline `justify-content:space-between`
   (title on the left, a CTA/link on the right) with no flex-wrap set. On narrow
   viewports the two items get crushed into each other instead of dropping to a
   second line — this is a global, mobile-only safety net for that pattern.
   flex-wrap only kicks in once content actually overflows a row, so this cannot
   change how any row that already fits on one line looks. */
@media(max-width:640px){
  [style*="justify-content:space-between"]{flex-wrap:wrap;row-gap:14px}
  /* Breadcrumb row (#bc, shared by 17 service/journal pages) is a centered
     nowrap flex row — a longer trail ("Головна / Послуги / Баланс обличчя
     · MODJAW") overflows both edges on a phone since nothing lets it wrap. */
  #bc{flex-wrap:wrap;row-gap:6px}
  /* "Philosophy + price" dark card, shared by 11 service pages, kept its
     desktop 56px side padding on mobile — combined with the price row's
     two large clamp() numbers + a "≈ $X" USD note in a nowrap flex row,
     the total width blew past the card and got silently clipped (not even
     scrollable) since it's not the kind of overflow that widens the page. */
  [style*="padding:54px 56px"]{padding:32px 20px!important}
  [style*="align-items:baseline;gap:9px"]{flex-wrap:wrap;row-gap:6px}
  /* "Why Priority Service" dark rounded card: its own inline `padding:72px 80px
     80px` overrides the section's .hpad class (inline always wins over a class),
     so the 80px side padding never shrank on mobile like every other section's
     does — on a 375px phone that left ~215px of usable width before the inner
     content even started wrapping. */
  [style*="padding:72px 80px 80px"]{padding:56px 24px 64px!important}
}

/* Mobile/touch: kill decorative motion sitewide.
   Every @keyframes animation on this site (spotlight glows, pulsing dots,
   floating icons, shimmer sweeps, marquee tickers, orbiting particles…) is
   pure ambient flourish — none of it is load-bearing for content or
   usability, since scroll-reveal and the mobile menu are driven by
   `transition` + JS class toggles, not `animation`. Freezing everything to
   its static base state removes a real, constant GPU/CPU cost on weaker
   phones and gives the page a calmer, more static feel on small screens —
   the trade a lot of premium sites make deliberately on mobile.
   Large blurred ambient-glow blobs (radial/conic gradients behind content,
   pointer-events:none) are hidden outright rather than just frozen, since a
   big static filter:blur() layer is still expensive to composite even when
   not animating. The `;filter:blur(` prefix deliberately excludes
   `backdrop-filter:blur(...)`, which is real frosted-glass styling on actual
   buttons/play-icons, not decoration — those must stay visible. */
/* Footer's 3-column grid is unclassed inline CSS on ~39 pages (.footer-g
   below is dead CSS for markup that no longer has that class). With no
   mobile override, at least one column refuses to shrink below its content's
   natural width, which forces the WHOLE PAGE ~120px wider than the screen —
   not just a clipped footer, but real page-wide horizontal scroll, which is
   also why position:fixed elements (header, back-to-top) appeared to sit
   off to the side requiring a horizontal swipe to reach. */
@media(max-width:900px){
  [style*="grid-template-columns:1fr 1fr 1fr"]{grid-template-columns:1fr 1fr!important}
}
@media(max-width:600px){
  [style*="grid-template-columns:1fr 1fr 1fr"]{grid-template-columns:1fr!important}
}
/* Unclassed `repeat(3,1fr)` grids (mostly the "Читайте також" related-
   articles block, copy-pasted across 36 pages) never had any mobile
   override at all — 3 equal columns squeezed into a phone screen. */
@media(max-width:700px){
  [style*="grid-template-columns:repeat(3,1fr)"]{grid-template-columns:1fr!important}
}
/* Same story for 4- and 5-equal-column grids (numbered benefit cards,
   audience cards, etc.) — squeezing 4-5 columns into a phone screen
   truncates every card's text to a sliver. */
@media(max-width:900px){
  [style*="grid-template-columns:repeat(4,1fr)"],[style*="grid-template-columns:repeat(5,1fr)"]{grid-template-columns:1fr 1fr!important}
}
@media(max-width:600px){
  [style*="grid-template-columns:repeat(4,1fr)"],[style*="grid-template-columns:repeat(5,1fr)"]{grid-template-columns:1fr!important}
}
/* Hero/intro "text + card" split (heading or paragraph beside a quote/media
   card) used on Priority Service, MODJAW, Лікування уві сні — same missing-
   mobile-override story, both columns hold full sentences so 1.1fr/.9fr on
   a phone leaves ~half the already-narrow column for each. */
@media(max-width:820px){
  .grid2,[style*="grid-template-columns:1.1fr .9fr"],[style*="grid-template-columns:.85fr 1.15fr"]{grid-template-columns:1fr!important}
  /* Grid items default to min-width:auto, so a long unbroken uppercase word
     (e.g. Priority Service's h1 "НАДВАЖЛИВИЙ") still forces the now-1fr
     track wider than the viewport instead of wrapping — pushes the heading
     past the section's right padding and makes the whole hero read as
     lopsided/uneven. min-width:0 lets the track (and the text inside it)
     actually shrink to the available width so normal word-wrap kicks in. */
  [style*="grid-template-columns:1.1fr .9fr"]>*,[style*="grid-template-columns:.85fr 1.15fr"]>*{min-width:0}
}
@media(max-width:820px),(hover:none) and (pointer:coarse){
  *{animation:none!important}
  [style*=";filter:blur("]{display:none!important}
  /* The brand-strip ticker (infinite horizontal scroll of partner/service
     names) is a functional, always-moving marquee, not decoration — freezing
     it like the rest just makes it look broken. Targeted via its existing
     data-pause-offscreen attribute rather than an inline animation: string
     match, since browsers reserialize the `animation` shorthand (reordering
     the animation-name to the end), so a "animation:ticker" substring match
     never actually matches the live DOM. */
  [data-pause-offscreen]{animation:ticker 38s linear infinite!important}
  /* Same story for the "Обладнання" equipment-badge marquee (.eq-row) used
     on 15 pages — also functional, not decorative, and also frozen by the
     blanket kill above. */
  [style*="animation:marquee 26s linear infinite"]{animation:marquee 26s linear infinite!important}
  [style*="animation:marquee 34s linear infinite"]{animation:marquee 34s linear infinite!important}
  [style*="animation:marqueeRev 30s linear infinite"]{animation:marqueeRev 30s linear infinite!important}
  /* "Результати наших клієнтів" review-card marquee (Вирівнювання) — same
     .marq/.marq-track pattern as the equipment badges above, but a 46s
     duration that wasn't in this list yet, so it was still getting frozen.
     Frozen also looked visually broken (not just static): .marq's edge mask
     (linear-gradient fade at 6%/94%) is tuned for a strip that's always
     mid-scroll, so a stopped strip showed its first card partly faded out
     by the mask instead of sitting fully visible — read as "crooked". */
  [style*="animation:marquee 46s linear infinite"]{animation:marquee 46s linear infinite!important}
  /* Two-row "Чому обирають Dobrozub" benefit marquee (Вініри). Same functional-not-
     decorative story, but more severe when frozen: .whyMarq has no overflow:hidden
     and no manual scroll fallback, so killing the animation doesn't just freeze the
     strip mid-scroll — it leaves ~10 of the 12-14 benefit pills in each row
     permanently unreachable, off to the right past the viewport edge. */
  [style*="animation:whyMarqL 42s linear infinite"]{animation:whyMarqL 42s linear infinite!important}
  [style*="animation:whyMarqR 46s linear infinite"]{animation:whyMarqR 46s linear infinite!important}
}

/* Before/after drag-slider strip (Вирівнювання, Професійна гігієна, Реставрації) */
.ba-strip{display:flex;gap:20px;overflow-x:auto;justify-content:center;padding:2px 2px 12px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.ba-strip::-webkit-scrollbar{height:4px}
.ba-strip::-webkit-scrollbar-track{background:rgba(255,255,255,.06);border-radius:10px}
.ba-strip::-webkit-scrollbar-thumb{background:rgba(209,180,99,.45);border-radius:10px}
.ba-card{flex:1 1 260px;max-width:380px;scroll-snap-align:start}
.ba-slider{position:relative;width:100%;aspect-ratio:4/5;border-radius:14px;overflow:hidden;background:#000;touch-action:pan-y;--p:50%}
.ba-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;-webkit-user-drag:none}
.ba-before{clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--p);pointer-events:none;transform:translateX(-50%);z-index:2}
.ba-handle::before{content:'';position:absolute;top:0;bottom:0;left:50%;width:2px;background:rgba(255,255,255,.9);transform:translateX(-50%);box-shadow:0 0 8px rgba(0,0,0,.4)}
.ba-handle::after{content:'⇔';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:30px;height:30px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;color:#1a1714;box-shadow:0 4px 14px rgba(0,0,0,.4)}
input.ba-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;z-index:3}
.ba-tag{position:absolute;top:9px;font-size:9px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:#fff;background:rgba(20,17,12,.55);padding:4px 9px;border-radius:100px;z-index:2;pointer-events:none}
.ba-tag-l{left:9px}
.ba-tag-r{right:9px;background:#d1b463;color:#1a1714}
.ba-cap{margin-top:9px;font-size:11.5px;letter-spacing:.04em;color:rgba(244,242,236,.5);text-align:center}
@media(max-width:640px){.ba-card{flex:0 0 300px;max-width:none}.ba-strip{justify-content:flex-start}}
/* Hero tag/badge strip (#heroMarkers, 6 service pages incl. MODJAW, Реставрації) is
   a centered nowrap row that's wider than its content needs on desktop, but on a
   phone the pills overflow the viewport — centering then clips both the first and
   last pill instead of the strip reading as a normal scrollable chip row. */
@media(max-width:640px){#heroMarkers{justify-content:flex-start!important}}

/* Case-photo lightbox gallery (Реставрації) */
.gal-strip{display:flex;gap:12px;overflow-x:auto;padding:2px 2px 12px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.gal-strip::-webkit-scrollbar{height:4px}
.gal-strip::-webkit-scrollbar-track{background:rgba(255,255,255,.06);border-radius:10px}
.gal-strip::-webkit-scrollbar-thumb{background:rgba(209,180,99,.45);border-radius:10px}
.gal-thumb{flex:0 0 168px;scroll-snap-align:start;position:relative;aspect-ratio:3/4;border-radius:12px;overflow:hidden;cursor:zoom-in;background:#000;border:1px solid rgba(255,255,255,.07);transition:transform .3s cubic-bezier(.22,1,.36,1),border-color .3s}
.gal-thumb:hover{transform:translateY(-3px);border-color:rgba(209,180,99,.35)}
.gal-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.gal-thumb:hover img{transform:scale(1.05)}
.gal-thumb::after{content:'';position:absolute;right:8px;bottom:8px;width:26px;height:26px;border-radius:50%;background:rgba(20,17,12,.55) url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2214%22 height=%2214%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22white%22 stroke-width=%222%22><circle cx=%2211%22 cy=%2211%22 r=%228%22/><path d=%22m21 21-4.3-4.3%22/><path d=%22M11 8v6M8 11h6%22/></svg>') center/14px no-repeat}
/* .gal-strip is only used by the "Кейси наших пацієнтів" case gallery on
   Реставрації — shrinking cards to 132px on mobile (below the 168px desktop
   default) left them reading as tiny thumbnails when they're meant to be the
   page's proof-of-work showcase. Sized up well past the desktop default
   instead, since a phone only shows one card at a time anyway. */
@media(max-width:640px){.gal-thumb{flex-basis:240px}}
.gal-box{position:fixed;inset:0;background:rgba(10,9,7,.94);z-index:900;display:none;align-items:center;justify-content:center;padding:64px 24px}
.gal-box.open{display:flex}
.gal-box img{max-width:min(880px,92vw);max-height:82vh;object-fit:contain;border-radius:8px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.gal-close,.gal-prev,.gal-next{position:absolute;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .25s}
.gal-close:hover,.gal-prev:hover,.gal-next:hover{background:rgba(255,255,255,.18)}
.gal-close{top:22px;right:22px;width:40px;height:40px;font-size:18px}
.gal-prev,.gal-next{top:50%;transform:translateY(-50%);width:46px;height:46px}
.gal-prev{left:16px}
.gal-next{right:16px}
.gal-count{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);font-size:12px;letter-spacing:.1em;color:rgba(244,242,236,.55)}
@media(max-width:640px){.gal-prev,.gal-next{width:38px;height:38px}.gal-prev{left:6px}.gal-next{right:6px}}