/* ============================================================
   KLINIKA ORJEN — v7
   Rebuilt to the measured design system of aventuradentalarts.com:
   paper #EAE8E8 / ink #14151D / text #424346, Instrument Serif
   display at lh .8 + ls -.03em, Inter Tight UI, sticky scroll
   sequences (hero, solutions, technology), disc-curved footer.
   ============================================================ */

@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/instr-400-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/instr-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url('/assets/fonts/instr-400i-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url('/assets/fonts/instr-400i.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/itight-var-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/itight-var.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --paper:#EAE8E8;
  --paper-2:#F2F1EF;
  --ink:#14151D;
  --ink-2:#1D1F2B;
  --text:#424346;
  --mut:#76777C;
  --hair:#D2D0CE;
  --d-text:#EAE8E8;
  --d-mut:#8C8E99;
  --d-hair:rgba(234,232,232,.16);
  --bone:#E2DFD6;
  --slate:#9BA3B8;
  --slate-d:#4A4F60;
  --serif:'Instrument Serif',Georgia,serif;
  --ui:'Inter Tight',system-ui,sans-serif;
  --ease:cubic-bezier(.22,.8,.26,1);
  --pad:clamp(18px,2.3vw,32px);
  --hd-h:78px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{font-family:var(--ui);font-size:15px;line-height:1.5;color:var(--text);background:var(--paper);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;cursor:pointer;background:none;border:0;color:inherit}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
::selection{background:var(--ink);color:var(--paper)}

.container{width:100%;padding:0 var(--pad);position:relative;z-index:2}
.sect{padding:clamp(64px,7vw,116px) 0;position:relative}
main{position:relative;z-index:2}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 20px;z-index:100}
.skip:focus{left:0}

/* ---------------- type scale (measured off the reference) ---------------- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;letter-spacing:-.03em;line-height:.93}

.d0,.d1,.h-sect,.h5{font-family:var(--serif);font-weight:400}
.d1{font-size:clamp(50px,10.6vw,153px);line-height:.8;letter-spacing:-.03em}
.d0{font-size:clamp(62px,19vw,276px);line-height:.84;letter-spacing:-.04em}
.h-sect{font-size:clamp(34px,5.8vw,83px);line-height:.93;letter-spacing:-.02em}
.h5{font-size:clamp(21px,2.45vw,35px);line-height:.86;letter-spacing:-.03em}
em,.it{font-style:italic}
.lbl{font-family:var(--ui);font-size:12px;font-weight:500;line-height:1.2;color:var(--mut)}
.dark .lbl,.on-dark{color:var(--d-mut)}
.lead{font-size:clamp(15px,1.1vw,16px);line-height:1.55;color:var(--mut);max-width:58ch}
.dark .lead{color:var(--d-mut)}
.eyebrow{font-family:var(--ui);font-size:13px;font-weight:600;color:var(--text);display:flex;align-items:baseline;gap:9px}
.eyebrow i{font-style:normal;font-weight:400;color:var(--mut)}
.dark .eyebrow,.on-dark.eyebrow{color:var(--d-text)}
.dark .eyebrow i,.on-dark.eyebrow i{color:var(--d-mut)}
.dark .h-sect,.dark h1,.dark h2,.dark h3{color:var(--d-text)}

/* ---------------- reveal primitives ---------------- */
.rv{transition:opacity .85s var(--ease),transform .85s var(--ease)}
.js .rv{opacity:0;transform:translateY(26px)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.09s}.rv-d2{transition-delay:.18s}.rv-d3{transition-delay:.27s}.rv-d4{transition-delay:.36s}
/* Images fade in where they already are. This used to be a clip-path wipe plus a
   1.07 scale, and it fired on lazy images that had not decoded yet: the wipe
   opened on an empty box and the photo appeared afterwards, which read as a
   broken image. site.js also holds .in back until the file has actually loaded,
   so the fade always has something to fade. */
.irv{overflow:hidden}
.irv img{transition:opacity .6s var(--ease)}
.js .irv img{opacity:0}
.irv.in img{opacity:1}
.t-rise{overflow:hidden}
.t-rise .tr{display:block;transition:transform 1s var(--ease)}
.js .t-rise .tr{transform:translateY(110%)}
.t-rise.in .tr{transform:none}
.t-rise .tr:nth-child(2){transition-delay:.08s}

/* ---------------- buttons ---------------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--ui);font-weight:700;font-size:14px;letter-spacing:-.02em;padding:16px 26px;border-radius:999px;text-decoration:none;line-height:1;transition:background .3s,color .3s,border-color .3s,transform .4s var(--ease)}
.btn svg{width:13px;height:13px;transition:transform .45s var(--ease)}
.btn:hover svg{transform:rotate(90deg)}
.btn-solid{background:var(--ink);color:var(--paper)}
.btn-solid:hover{background:var(--ink-2);transform:translateY(-2px)}
.btn-line{border:1px solid rgba(66,67,70,.4);color:var(--text)}
.btn-line:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn-paper{background:var(--paper);color:var(--ink)}
.btn-paper:hover{background:#fff;transform:translateY(-2px)}
.btn-line-dark{border:1px solid var(--d-hair);color:var(--d-text)}
.btn-line-dark:hover{background:var(--d-text);color:var(--ink);border-color:var(--d-text)}
.link-arr{display:inline-flex;align-items:center;gap:9px;font-family:var(--ui);font-weight:500;font-size:14px;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px;transition:opacity .3s}
.link-arr svg{width:13px;height:13px;transition:transform .4s var(--ease)}
.link-arr:hover{opacity:.55}
.link-arr:hover svg{transform:translateX(4px)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px}

/* ============================================================
   HEADER
   ============================================================ */
/* translateZ(0) keeps the fixed bar on its own compositor layer. Without it the
   bar is re-rasterised against the scrolling content underneath and Chrome can
   leave faint vertical seams across it - they show up as pale lines through the
   dark CTA pill, which is the only place on the bar dark enough to see them. */
.hd{position:fixed;inset:0 0 auto;z-index:60;transform:translateZ(0);backface-visibility:hidden;transition:background .4s,border-color .4s,opacity .55s var(--ease)}
.hd.scrolled{background:var(--paper);border-bottom:1px solid var(--hair)}
.hd-in{padding:0 var(--pad);height:var(--hd-h);display:flex;align-items:center;gap:clamp(14px,2vw,34px)}
.hd-logo{flex:none;display:flex;align-items:center;text-decoration:none}
.hd-logo .logo-i{height:19px;width:auto}
.hd-logo .logo-l{display:none;filter:invert(1)}
.menu-open .hd .logo-d{display:none}
.menu-open .hd .logo-l{display:block}
.hd-nav{display:flex;gap:clamp(12px,1.5vw,24px)}
.hd-nav a{font-size:14px;font-weight:500;letter-spacing:-.01em;color:var(--text);text-decoration:none;position:relative;padding:5px 0;white-space:nowrap;transition:opacity .3s}
.hd-nav a::after{content:'';position:absolute;left:0;right:100%;bottom:1px;height:1px;background:currentColor;transition:right .35s var(--ease)}
.hd-nav a:hover::after,.hd-nav a.active::after{right:0}
.hd-tel{margin-left:auto;font-size:14px;font-weight:500;color:var(--text);text-decoration:none;white-space:nowrap;transition:opacity .3s,color .4s}
.hd-tel:hover{opacity:.6}
.lang{position:relative}
.lang-btn{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:var(--text);border:1px solid rgba(66,67,70,.3);border-radius:999px;padding:8px 13px;transition:background .3s,color .4s,border-color .4s}
.lang-btn svg{width:10px;height:10px;transition:transform .35s var(--ease)}
.lang.open .lang-btn svg{transform:rotate(180deg)}
.lang-btn:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.lang-menu{position:absolute;top:calc(100% + 9px);right:0;min-width:168px;background:var(--ink);border-radius:14px;padding:7px;opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .3s var(--ease),transform .35s var(--ease);box-shadow:0 24px 50px -18px rgba(0,0,0,.5);z-index:70}
.lang.open .lang-menu{opacity:1;transform:none;pointer-events:auto}
.lang-menu a{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:10px 13px;font-size:12.5px;font-weight:500;color:var(--d-text);text-decoration:none;border-radius:9px;transition:background .25s}
.lang-menu a em{font-style:normal;font-weight:400;font-size:12px;color:var(--d-mut)}
.lang-menu a:hover{background:var(--ink-2)}
.lang-menu a.on::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;order:2}
.hd-cta{flex:none;display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:700;letter-spacing:-.02em;color:var(--text);background:var(--paper-2);padding:13px 20px;border-radius:999px;text-decoration:none;box-shadow:0 3px 16px -8px rgba(0,0,0,.25);transition:background .3s,transform .4s var(--ease)}
.hd-cta svg{width:12px;height:12px;transition:transform .45s var(--ease)}
.hd-cta:hover{background:#fff;transform:translateY(-1px)}
.hd-cta:hover svg{transform:rotate(90deg)}
/* no shadow on the dark pill: a blurred shadow under a 999px radius is drawn as
   nine stretched slices, and those slice edges are the second thing that can
   show as vertical seams inside the pill */
.hd.scrolled .hd-cta{background:var(--ink);color:var(--paper);box-shadow:none}
/* over the dark right half of the hero the top-right controls go light */
.home .hd:not(.scrolled):not(.menu-open) .hd-tel,
.home .hd:not(.scrolled):not(.menu-open) .lang-btn{color:#fff}

/* pages that open on a dark hero need light header chrome until scrolled */
.darkhero .hd:not(.scrolled):not(.menu-open) .logo-d{display:none}
.darkhero .hd:not(.scrolled):not(.menu-open) .logo-l{display:block}
.darkhero .hd:not(.scrolled):not(.menu-open) .hd-nav a{color:var(--d-text)}
.darkhero .hd:not(.scrolled):not(.menu-open) .hd-tel,
.darkhero .hd:not(.scrolled):not(.menu-open) .lang-btn{color:#fff}
.darkhero .hd:not(.scrolled):not(.menu-open) .lang-btn{border-color:rgba(255,255,255,.45)}
.darkhero .hd:not(.scrolled):not(.menu-open) .lang-btn:hover{background:#fff;color:var(--ink);border-color:#fff}
.darkhero .hd:not(.scrolled):not(.menu-open) .hd-burger{border-color:rgba(255,255,255,.42)}
.darkhero .hd:not(.scrolled):not(.menu-open) .hd-burger span{background:var(--d-text)}

.home .hd:not(.scrolled):not(.menu-open) .lang-btn{border-color:rgba(255,255,255,.45)}
.home .hd:not(.scrolled):not(.menu-open) .lang-btn:hover{background:#fff;color:var(--ink);border-color:#fff}
.hd-burger{display:none;flex:none;width:46px;height:46px;margin-left:auto;position:relative;z-index:70;border:1px solid rgba(66,67,70,.3);border-radius:50%}
.hd-burger span{position:absolute;left:13px;right:13px;height:1.5px;background:var(--text);border-radius:2px;transition:transform .4s var(--ease),top .4s var(--ease),background .3s}
.hd-burger span:nth-child(1){top:18px}
.hd-burger span:nth-child(2){top:25px}
.menu-open .hd-burger{border-color:var(--d-hair)}
.menu-open .hd-burger span{background:var(--d-text)}
.menu-open .hd-burger span:nth-child(1){top:21.5px;transform:rotate(45deg)}
.menu-open .hd-burger span:nth-child(2){top:21.5px;transform:rotate(-45deg)}
/* LANDMINE: the header keeps .scrolled while the menu is open. Its paper
   background plus hairline used to paint a light bar across the top of the dark
   overlay, and the close X - which turns light FOR that overlay - landed on it
   light-on-light and became invisible, so the menu could not be closed. The bar
   must go transparent for as long as the overlay is up. */
.menu-open .hd,.menu-open .hd.scrolled{background:transparent;border-bottom-color:transparent}
/* body{overflow:hidden} alone does not stop the page scrolling behind the
   overlay - the document element is the scroller, so it has to be locked too */
.menu-lock,.menu-lock body{overflow:hidden}
@media(max-width:1500px){.hd-nav a:nth-child(6){display:none}}
@media(max-width:1400px){.hd-nav a:nth-child(5){display:none}}
@media(max-width:1300px){.hd-nav a:nth-child(4){display:none}}
@media(max-width:1180px){.hd-nav,.hd-cta,.lang,.hd-tel{display:none}.hd-burger{display:block}}

.mnav{position:fixed;inset:0;z-index:55;background:var(--ink);color:var(--d-text);display:flex;flex-direction:column;padding:100px var(--pad) 38px;opacity:0;pointer-events:none;transition:opacity .45s var(--ease);overflow-y:auto}
.menu-open .mnav{opacity:1;pointer-events:auto}
.mnav-links{display:flex;flex-direction:column}
.mnav-links a{font-family:var(--serif);font-size:clamp(30px,8vw,46px);line-height:1;color:var(--d-text);text-decoration:none;padding:13px 0 11px;border-bottom:1px solid var(--d-hair);display:flex;justify-content:space-between;align-items:center;opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.mnav-links a em{font-family:var(--ui);font-style:normal;font-size:11px;font-weight:500;color:var(--d-mut)}
.menu-open .mnav-links a{opacity:1;transform:none}
.mnav-sub{margin-top:24px;display:flex;flex-wrap:wrap;gap:8px}
.mnav-sub a{font-size:13px;font-weight:500;color:var(--d-mut);text-decoration:none;border:1px solid var(--d-hair);padding:9px 15px;border-radius:999px}
.mnav-lang{margin-top:24px;display:flex;gap:8px}
.mnav-lang a{font-size:12.5px;font-weight:500;color:var(--d-mut);text-decoration:none;border:1px solid var(--d-hair);padding:9px 16px;border-radius:999px}
.mnav-lang a.on{background:var(--d-text);color:var(--ink);border-color:var(--d-text)}
.mnav-foot{margin-top:auto;padding-top:28px;display:flex;flex-direction:column;gap:5px}
.mnav-foot .l{font-size:12px;font-weight:500;color:var(--d-mut);margin-bottom:3px}
.mnav-foot a{color:var(--d-text);text-decoration:none;font-family:var(--serif);font-size:22px}

/* ============================================================
   HERO — sticky sequence (mirrors reference: 2.6 viewports)
   ============================================================ */
.hero{position:relative;background:var(--paper)}
/* --hero-split is the single source of truth for the paper/photo boundary: the
   media panel's left edge, the paper half's right edge AND the clip on the white
   headline copy all read it. They MUST stay welded - if the photo travels left
   while the clip stays at 50%, the white half of the H1 lands on paper and turns
   invisible (that was the v7 failure). JS drives it on scroll; 50% is the rest state. */
.hero-sticky{position:relative;height:100svh;min-height:600px;overflow:hidden;--hero-split:50%}

.hero-left{position:absolute;inset:0 calc(100% - var(--hero-split)) 0 0;background:var(--paper)}
.hero-media{position:absolute;top:0;bottom:0;left:var(--hero-split);width:calc(100% - var(--hero-split));overflow:hidden}
/* The photo is pinned to the RIGHT edge at full viewport width, so the panel
   crops it like a curtain instead of squashing it. The frame moves; the picture
   only ever drifts. That is what makes the split read as one continuous image. */
.hero-media picture{position:absolute;top:0;bottom:0;right:0;width:100vw;display:block}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:50% 32%}
/* ---- HOMEPAGE HERO ENTRANCE -------------------------------------------------
   The hero is choreographed, but every bit of it happens ONCE, on load, and
   nothing is tied to the scroll position. What the owner rejected was the
   scroll-linked version: --hero-split was dragged from 50% to 8% as you
   scrolled, the headline slid and faded with it, and an endless 24s Ken Burns
   loop crept underneath - the layout kept changing shape under the cursor, which
   is what read as unnatural. --hero-split is a fixed 50% now and no script
   touches it, so the composition never moves once it has arrived.

   Order: photo curtain opens outward from the split line (0 to .95s) > headline
   rises word by word (.62s) > header fades in over the settled boundary (.72s) >
   corner copy fades up in sequence (.95s to 1.3s). */
.js .hero-media img{opacity:0;transform:scale(1.06);transition:opacity 1s var(--ease),transform 2.1s var(--ease)}
.loaded .hero-media img{opacity:1;transform:none}
.hero-cue{position:absolute;left:calc(50% + clamp(16px,3vw,44px));top:calc(var(--hd-h) + clamp(16px,3vh,40px));z-index:5;display:flex;align-items:center;gap:11px;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.hero-cue i{width:1px;height:34px;background:rgba(255,255,255,.28);position:relative;overflow:hidden;display:block}
.hero-cue i::after{content:'';position:absolute;left:0;top:-42%;width:100%;height:42%;background:#fff;animation:cueDrip 2.4s var(--ease) infinite}
@keyframes cueDrip{0%{top:-42%}100%{top:108%}}
.js .hero-based,.js .hero-desc,.js .hero-note,.js .hero-cue{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.loaded .hero-based,.loaded .hero-desc,.loaded .hero-note,.loaded .hero-cue{opacity:1;transform:none}
/* these land after the curtain and the headline, so the hero assembles in one
   readable sequence instead of everything arriving at once */
.loaded .hero-cue{transition-delay:.95s}
.loaded .hero-based{transition-delay:1.05s}
.loaded .hero-desc{transition-delay:1.15s}
.loaded .hero-note{transition-delay:1.25s}

/* The curtain, and the header hold that goes with it. Desktop only: under
   1020px the hero is a plain stacked layout with no split to open. */
@media(min-width:1021px){
  /* the photo panel opens from the split line outward to the right edge. The
     photo inside is already in its final position (right-anchored, 100vw), so
     this reveals it rather than sliding it - the picture never moves. */
  .js .home .hero-media{clip-path:inset(0 0 0 0);transition:clip-path 1.05s var(--ease)}
  .js .home:not(.loaded) .hero-media{clip-path:inset(0 100% 0 0)}
  /* LANDMINE: the header spans the boundary and its right-hand chrome (phone,
     language, CTA) is WHITE because it normally sits on the photo. While the
     curtain is still opening that half is paper, so white on paper is invisible.
     Hold the bar back and fade it in as the curtain lands. Do not try to solve
     this by toggling .darkhero. */
  .js .home .hd{transition:opacity .55s var(--ease) .72s,background .4s,border-color .4s}
  .js .home:not(.loaded) .hd{opacity:0;pointer-events:none}
}
.hero-media::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,13,18,.42),rgba(12,13,18,.08) 44%,rgba(12,13,18,.5))}
/* the sliding second-phase line lives inside the media panel */
/* ---- full-bleed film band: white type always sits on dark ---- */
.film{position:relative;height:250vh;background:var(--ink)}
.film-stick{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--ink)}
.film-stick img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.film-stick::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,13,18,.55),rgba(12,13,18,.15) 45%,rgba(12,13,18,.75))}
.film-line{position:absolute;top:46%;left:0;transform:translate(70vw,-50%);white-space:nowrap;color:#F0EFE9;z-index:3;will-change:transform}
.film-line em{font-style:italic}
.film-tips{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(26px,5vh,58px);z-index:3;display:flex;flex-wrap:wrap;gap:10px 30px;font-size:13.5px;font-weight:500;color:rgba(255,255,255,.88)}
.film-lbl{position:absolute;left:var(--pad);top:calc(var(--hd-h) + clamp(14px,3vh,36px));z-index:3;font-size:13px;font-weight:600;color:rgba(255,255,255,.85)}
@media(max-width:1020px){
  .film{height:auto}
  .film-stick{position:relative;height:74svh;min-height:420px}
  .film-line{position:absolute;top:auto;bottom:104px;left:var(--pad);right:var(--pad);transform:none!important;white-space:normal;max-width:11em;font-size:clamp(30px,8.2vw,46px)}
  .film-tips{gap:6px 16px;font-size:12px;bottom:26px}
}
/* the two stacked title copies: dark full + light clipped to the right half */
.hero-t{position:absolute;left:0;right:0;top:50%;transform:translateY(-58%);z-index:4;text-align:center;pointer-events:none;padding:0 16px}
.hero-t .l1,.hero-t .l2{display:block}
/* The two copies take COMPLEMENTARY halves of the same boundary: dark owns the
   paper side, white owns the photo side. They must never overlap - stacking a
   fading white copy on top of a fading dark one turns the headline muddy grey
   as the hero scrolls out. */
.hero-t-dark{color:var(--text);clip-path:inset(0 calc(100% - var(--hero-split)) -30px 0)}
.hero-t-light{color:#fff;clip-path:inset(0 0 -30px var(--hero-split))}
/* The mask is the LINE; the words rise inside it one after another. The line
   itself must not be transformed as well, or the two motions compound. */
.js .hero-t .wr{display:block;overflow:hidden;padding-bottom:.16em;margin-bottom:-.16em}
.js .hero-t .wr>span{display:block}
.js .hero-t .w{display:inline-block;vertical-align:top;transform:translateY(112%);transition:transform 1.15s var(--ease)}
.loaded .hero-t .w{transform:none}
/* word order: Vrhunska, estetska, stomatologija */
.loaded .hero-t .wr:nth-child(1) .w{transition-delay:.62s}
.loaded .hero-t .wr:nth-child(2) .w:nth-of-type(1){transition-delay:.72s}
.loaded .hero-t .wr:nth-child(2) .w:nth-of-type(2){transition-delay:.82s}
.hero-based{position:absolute;left:var(--pad);bottom:clamp(20px,3vw,34px);z-index:5;font-size:12px;line-height:1.45;color:var(--text)}
.hero-based .l{color:var(--mut);display:block;margin-bottom:5px}
.hero-based b{display:block;font-size:15px;font-weight:700}
.hero-based span{color:var(--mut)}
.hero-desc{position:absolute;left:52%;bottom:clamp(20px,3vw,34px);z-index:5;color:#EAE8E8;width:min(20vw,290px)}
.hero-note{position:absolute;right:calc(var(--pad) + 74px);bottom:clamp(22px,3vw,36px);z-index:5;color:#fff;font-size:14px;font-weight:700;letter-spacing:-.02em;text-align:right;width:min(16vw,230px);line-height:1.35}

@media(max-width:1020px){
  .hero-sticky{position:relative;height:auto;min-height:0;overflow:visible;display:flex;flex-direction:column}
  .hero-t{order:1}
  .hero-desc{order:2}
  .hero-media{order:3}
  .hero-based{order:4}
  .hero-runway{display:none}
  .hero-left{display:none}
  .hero-t{position:relative;top:auto;transform:none;text-align:left;padding:calc(var(--hd-h) + 26px) var(--pad) 22px;z-index:4}
  .hero-t-light{display:none}
  /* stacked layout has no split, so the dark copy must show in full */
  .hero-t-dark{clip-path:none}
  .hero-desc{position:relative;left:auto;bottom:auto;width:auto;padding:0 var(--pad) 24px;color:var(--text);max-width:16em}
  .hero-media{position:relative;left:auto;width:100%;height:58svh}
  .hero-cue{display:none}
  .hero-based{position:relative;left:auto;bottom:auto;padding:20px var(--pad) 26px;background:var(--paper)}
  .hero-based b,.hero-based span{display:inline}
  .hero-note{display:none}
}

/* ============================================================
   OUR GOAL — word ink-in
   ============================================================ */
.goal{background:var(--paper);padding:clamp(70px,9vw,150px) 0}
.goal-grid{display:grid;grid-template-columns:.85fr 2.15fr;gap:clamp(26px,4vw,64px);align-items:start}
/* NOT sticky. Pinning this column made the portrait hang at the top of the
   viewport while the headline beside it scrolled past, so the photo appeared to
   slide downward through the section on its own. It now scrolls with everything
   else. */
.goal-side{display:flex;flex-direction:column;gap:22px}
.goal-side .t{font-family:var(--serif);font-size:clamp(26px,3.6vw,52px);line-height:.95;letter-spacing:-.03em;color:var(--text)}
.goal-side img{width:min(280px,100%);aspect-ratio:4/5;object-fit:cover;filter:grayscale(1) contrast(1.04)}
.goal-txt{font-family:var(--serif);font-size:clamp(30px,5.4vw,83px);line-height:.95;letter-spacing:-.025em}
.goal-txt .w{color:rgba(66,67,70,.32);transition:color .3s linear}
.goal-txt .w.on{color:var(--text)}
.goal-cta{margin-top:clamp(28px,3.4vw,50px)}
@media(max-width:900px){
  .goal-grid{grid-template-columns:1fr;gap:30px}
  .goal-side{position:static;flex-direction:row;align-items:center;justify-content:flex-start;gap:20px}
  .goal-side .t{flex:1}
  .goal-side img{width:min(42%,170px);flex:none}
}

/* ============================================================
   SOLUTIONS — dark, pinned slider on desktop / stacked on mobile
   ============================================================ */
.sol{position:relative;background:var(--ink);color:var(--d-text)}
.sol-stick{position:relative}
.sol-media{display:none}
.sol-slide{position:relative}
.sol-slide .ph{position:relative;overflow:hidden;height:54vw;max-height:360px;margin-bottom:0}
.sol-slide .ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.sol-slide .ph::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,21,29,.1) 40%,rgba(20,21,29,.85))}
.sol-title{position:relative;z-index:4;color:#F0EFE9;margin:-1.05em var(--pad) 0;padding:0}
.sol-title .a{display:block;font-style:italic}
.sol-title .b{display:block;padding-left:.55em}
.sol-pane{padding:24px var(--pad) 0}
.sol-pane .lbl{color:var(--d-text);font-weight:600;font-size:13.5px;margin-bottom:18px}
.sol-pane .dsc{font-family:var(--serif);font-size:clamp(21px,1.9vw,28px);font-weight:400;line-height:1.16;letter-spacing:-.02em;color:#fff;margin-bottom:24px;max-width:20ch}
.sol-row{display:flex;gap:18px;align-items:stretch}
.sol-row .sml{width:130px;flex:none;height:auto;align-self:stretch;object-fit:cover;filter:grayscale(1)}
.sol-subs{flex:1;display:flex;flex-direction:column}
.sol-subs a{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:13px 0;border-bottom:1px solid rgba(234,232,232,.22);color:#fff;text-decoration:none;font-size:15px;font-weight:500;transition:padding-left .3s var(--ease),opacity .25s}
.sol-subs a:first-child{border-top:1px solid rgba(234,232,232,.22)}
.sol-subs a svg{width:12px;height:12px;flex:none;color:var(--d-mut);transition:transform .3s var(--ease)}
.sol-subs a:hover{color:#fff;padding-left:6px}
.sol-subs a:hover svg{transform:translate(2px,-2px)}
.sol-more{padding:22px var(--pad) 0}
.sol-slide + .sol-slide{margin-top:46px;padding-top:46px;border-top:1px solid var(--d-hair)}
.sol-nav{display:none}

/* --- desktop: pin the section and cross-fade the slides --- */
@media(min-width:1021px){
  .js .sol.pin{height:calc((var(--n,4) + 1) * 100svh)}
  .js .sol.pin .sol-stick{position:sticky;top:0;height:100svh;overflow:hidden}
  .js .sol.pin .sol-media{display:block;position:absolute;inset:0 50% 0 0;overflow:hidden;z-index:1}
  .js .sol.pin .sol-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1);opacity:0;transform:scale(1.06);transition:opacity .7s var(--ease),transform 1.4s var(--ease)}
  .js .sol.pin .sol-media img.on{opacity:.92;transform:scale(1)}
  .js .sol.pin .sol-media::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,21,29,.18),rgba(20,21,29,.62) 74%,var(--ink))}
  .js .sol.pin .sol-media::before{content:'';position:absolute;left:0;right:0;bottom:0;height:38%;z-index:2;background:linear-gradient(180deg,transparent,rgba(20,21,29,.72))}
  .js .sol.pin .sol-slide{position:absolute;inset:0;margin:0;padding:0;border:0;opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility 0s linear .5s;z-index:2}
  .js .sol.pin .sol-slide.on{opacity:1;visibility:visible;transition:opacity .5s var(--ease),visibility 0s}
  .js .sol.pin .sol-slide .ph{display:none}
  .js .sol.pin .sol-title{position:absolute;left:30%;bottom:clamp(84px,11vh,128px);margin:0;white-space:nowrap}
  .js .sol.pin .sol-pane{position:absolute;right:var(--pad);top:calc(var(--hd-h) + clamp(18px,4vh,54px));width:min(480px,38vw);padding:0}
  .js .sol.pin .sol-more{position:absolute;right:var(--pad);bottom:clamp(20px,4.4vh,50px);padding:0}
  .js .sol.pin .sol-nav{display:flex;position:absolute;left:var(--pad);bottom:clamp(20px,4.4vh,50px);z-index:5;flex-direction:column;gap:3px}
  .js .sol.pin .sol-nav .lbl{color:var(--d-text);font-weight:600;font-size:13px;margin-bottom:7px}
  .js .sol.pin .sol-nav button{text-align:left;font-size:13.5px;font-weight:500;color:var(--d-mut);padding:2px 0;transition:color .3s}
  .js .sol.pin .sol-nav button.on,.js .sol.pin .sol-nav button:hover{color:#fff}
}

/* ============================================================
   BANNER — Savremena stomatologija
   ============================================================ */
.imp{position:relative;background:var(--ink);color:var(--d-text);padding:clamp(70px,9vw,150px) 0 clamp(56px,7vw,108px);overflow:hidden}
.imp-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,5vw,90px);align-items:center}
.imp-ph{position:relative;display:flex;justify-content:center;align-items:center;min-height:clamp(340px,46vw,620px)}
.imp-ph::before{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(112%,560px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(155,163,184,.28),rgba(20,21,29,0) 68%)}
/* The render ships with alpha only on the implant itself. Its original file had a
   baked contact shadow for a LIGHT backdrop; on the dark band that band composited
   as a grey smudge AND drop-shadow cast a second shadow off it, giving a hard blob.
   Shadow is now CSS-only, so it can be tuned and stays soft-edged. */
/* no will-change: the [data-plx] parallax that used to translate this on scroll
   was removed on 2026-08-03, so it holds a compositor layer for nothing */
.imp-obj{position:relative;z-index:2;display:block;width:min(74%,300px)}
.imp-obj img{display:block;width:100%;height:auto;filter:drop-shadow(0 20px 24px rgba(0,0,0,.5))}
.imp-obj::after{content:'';position:absolute;left:50%;bottom:-2.5%;transform:translateX(-50%);width:124%;height:7.5%;border-radius:50%;background:radial-gradient(50% 50% at 50% 50%,rgba(4,5,9,.72),rgba(4,5,9,.34) 44%,rgba(4,5,9,0) 76%);filter:blur(11px);z-index:-1;pointer-events:none}
.imp-ring{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(96%,470px);aspect-ratio:1;border:1px solid rgba(234,232,232,.18);border-radius:50%;pointer-events:none}
.imp-ring::after{content:'';position:absolute;inset:13%;border:1px solid rgba(234,232,232,.1);border-radius:50%}
.imp-copy .lbl{color:var(--d-mut);margin-bottom:16px}
.imp-copy h2{color:#F0EFE9;margin-bottom:20px}
.imp-copy h2 em{font-style:italic}
.imp-copy p{color:var(--d-mut);font-size:16px;line-height:1.55;max-width:52ch;margin-bottom:clamp(26px,3.4vw,44px)}
.imp-rows{display:flex;flex-direction:column;margin-bottom:clamp(26px,3.4vw,44px)}
.imp-row{display:grid;grid-template-columns:auto 1fr minmax(0,17ch);align-items:baseline;gap:clamp(14px,2vw,28px);padding:clamp(12px,1.5vw,20px) 0;border-top:1px solid var(--d-hair)}
.imp-row:last-child{border-bottom:1px solid var(--d-hair)}
.imp-row .n{font-family:var(--ui);font-size:12px;font-weight:500;color:var(--d-mut);flex:none}
.imp-row .t{font-family:var(--serif);font-size:clamp(26px,3.2vw,52px);line-height:1;letter-spacing:-.03em;color:#F0EFE9}
.imp-row .t em{font-style:italic}
.imp-row .d{font-family:var(--ui);font-size:13.5px;color:var(--d-mut);text-align:right;line-height:1.45;text-wrap:balance}
@media(max-width:900px){
  .imp-grid{grid-template-columns:1fr;gap:34px}
  .imp-ph{min-height:300px;order:2}
  .imp-copy{order:1}
  .imp-row .d{display:none}
}
.bnr{background:var(--ink);color:var(--d-text);padding:clamp(64px,8vw,130px) 0;overflow:hidden}
.bnr .lbl{color:var(--d-mut);margin-bottom:clamp(18px,2.4vw,34px);padding:0 var(--pad)}
.bnr-rows{display:flex;flex-direction:column}
.bnr-row{font-family:var(--serif);font-size:clamp(44px,9vw,132px);line-height:1;letter-spacing:-.03em;color:#F0EFE9;padding:clamp(10px,1.4vw,20px) var(--pad);border-top:1px solid var(--d-hair);display:flex;align-items:baseline;gap:18px}
.bnr-row em{font-style:italic}
.bnr-row .n{font-family:var(--ui);font-size:12px;font-weight:500;color:var(--d-mut);letter-spacing:0}

/* ============================================================
   TECHNOLOGY — light pinned index
   ============================================================ */
.tec{background:var(--paper);padding:clamp(60px,7vw,110px) 0 0;position:relative;z-index:2}
.tec-head{padding:0 var(--pad) clamp(10px,1.2vw,20px)}
.tec-head .lbl{margin-bottom:16px}
.tec-head h2{color:var(--text)}
.tec-head h2 em{font-style:italic}
.tec-pin{position:relative}
.js .tec-pin.pin{height:calc(var(--n,4) * 80vh);margin-top:calc(-1 * clamp(40px,8vh,110px))}
.tec-stick{position:relative}
.js .tec-pin.pin .tec-stick{position:sticky;top:0;height:100svh;display:flex;align-items:center;padding-top:var(--hd-h)}
.tec-in{width:100%;display:grid;grid-template-columns:auto 1fr 1.1fr;gap:clamp(22px,4vw,70px);align-items:center;padding:0 var(--pad)}
.tec-count{font-family:var(--serif);font-size:clamp(30px,3.8vw,55px);line-height:.87;letter-spacing:-.03em;display:flex;align-items:baseline;gap:5px;color:var(--text)}
.tec-count .tot{font-size:.42em;color:var(--mut);font-family:var(--ui);font-weight:500;letter-spacing:0}
.tec-ph{position:relative;aspect-ratio:5/6;max-width:450px;width:100%;background:#DAD8D6;overflow:hidden;justify-self:center}
.tec-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s var(--ease)}
.tec-ph img.on{opacity:1}
.tec-list>.lbl{border-bottom:1px solid var(--hair);padding-bottom:13px;margin-bottom:0}
.tec-item{border-bottom:1px solid var(--hair);padding:clamp(13px,1.6vw,22px) 0;cursor:pointer}
.tec-item h3{font-size:clamp(26px,3.2vw,55px);line-height:.95;letter-spacing:-.03em;color:rgba(66,67,70,.5);transition:color .4s}
.tec-item p{max-height:0;overflow:hidden;color:var(--mut);font-size:14px;line-height:1.5;max-width:48ch;transition:max-height .5s var(--ease),padding-top .4s var(--ease)}
.tec-item.on h3{color:var(--text)}
.tec-item.on p{max-height:130px;padding-top:9px}
@media(max-width:1020px){
  .js .tec-pin.pin{height:auto}
  .js .tec-pin.pin .tec-stick{position:static;height:auto;display:block}
  .tec-in{grid-template-columns:1fr;gap:22px}
  .tec-count{display:none}
  .tec-ph{max-width:100%;aspect-ratio:16/10;justify-self:stretch}
  .tec-item h3{color:var(--text);font-size:clamp(28px,7.4vw,42px)}
  .tec-item p{max-height:none;overflow:visible;padding-top:8px}
}

/* ============================================================
   EXPERTS — giant display + team
   ============================================================ */
.exp{background:var(--ink);color:var(--d-text);padding:clamp(70px,8vw,130px) 0 clamp(64px,7vw,110px);overflow:hidden}
.exp-d{padding:0 var(--pad);color:#EAE8E8;margin-bottom:clamp(34px,4.6vw,70px);white-space:nowrap}
.exp-d em{font-style:italic}
.tm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:0 var(--pad)}
.tm-card .ph{overflow:hidden;background:#22242F}
.tm-card img{aspect-ratio:1/1.16;object-fit:cover;object-position:center top;width:100%;filter:grayscale(1) contrast(1.05)}
.tm-meta{padding:14px 2px 0}
.tm-meta .nm{display:block;font-size:20px;font-weight:600;letter-spacing:-.02em;color:var(--text)}
.tm-meta .rl{display:block;font-size:13.5px;color:var(--mut);margin-top:2px}
.exp .tm-meta .nm{color:var(--d-text)}
.exp .tm-meta .rl{color:var(--d-mut)}
.tm-meta .bio{display:block;font-size:13.5px;line-height:1.5;color:var(--d-mut);margin-top:9px;max-width:34ch}
@media(max-width:820px){.tm-grid{grid-template-columns:1fr;max-width:420px}}

/* ============================================================
   WHY — arc + stat circles
   ============================================================ */
.why{background:var(--ink);color:var(--d-text);padding:clamp(60px,7vw,110px) 0 clamp(70px,8vw,130px);overflow:hidden;position:relative}
.why-line{position:relative;text-align:center;padding:0 var(--pad);margin-bottom:clamp(40px,6vw,90px)}
.why-line .lbl{color:var(--d-mut);margin-bottom:clamp(14px,2vw,26px)}
.why-line h2{color:#F0EFE9}
.why-line h2 em{font-style:italic}
.why-arcs{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);width:min(1180px,124vw);aspect-ratio:1;border:1px solid rgba(234,232,232,.11);border-radius:50%;pointer-events:none}
.why-arcs::after{content:'';position:absolute;inset:14%;border:1px solid rgba(234,232,232,.09);border-radius:50%}
.why-circles{position:relative;z-index:2;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:clamp(10px,1.6vw,26px);padding:0 var(--pad)}
.why-c{border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;padding:18px;aspect-ratio:1;flex:none;animation:whyf 8s ease-in-out infinite alternate}
.why-c b{font-family:var(--serif);font-weight:400;font-size:clamp(34px,4.2vw,72px);line-height:.9;letter-spacing:-.03em;display:flex;align-items:baseline}
.why-c b sup{font-size:.48em;transform:translateY(-.55em)}
.why-c>span{font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;line-height:1.35;max-width:13ch}
.why-c1{width:clamp(150px,20vw,290px);background:#9BA3B8;color:#171922;margin-top:calc(-1 * clamp(20px,4vw,66px))}
.why-c2{width:clamp(180px,25vw,350px);background:#DAD5D3;color:#5C5C5C;animation-delay:1.1s;margin-top:clamp(16px,3vw,54px)}
.why-c3{width:clamp(175px,24vw,340px);background:#fff;color:#6A6A6C;animation-delay:2s;margin-top:clamp(6px,1.4vw,24px)}
.why-c4{width:clamp(145px,19vw,265px);background:transparent;border:1px solid #E1DFDA;color:var(--d-text);animation-delay:.6s;margin-top:calc(-1 * clamp(28px,5vw,88px))}
@keyframes whyf{from{transform:translateY(-10px)}to{transform:translateY(12px)}}
@media(max-width:820px){
  .why-circles{gap:12px}
  .why-c{margin-top:0!important;width:min(41vw,210px)!important}
  .why-arcs{display:none}
}

/* ============================================================
   PRE-FOOTER
   ============================================================ */
.pref{background:var(--paper);color:var(--text);padding:clamp(24px,3vw,54px) 0 clamp(120px,14vw,210px);text-align:center;overflow:hidden;border-top:1px solid var(--hair)}
.pref .lbl{color:var(--mut);margin-bottom:18px}
.pref h2{color:var(--text)}
.pref h2 em{font-style:italic}
.pref .btns{margin-top:clamp(28px,3.6vw,50px);display:flex;justify-content:center;flex-wrap:wrap;gap:14px}

/* ============================================================
   BEFORE / AFTER
   ============================================================ */
.ba{position:relative;overflow:hidden;aspect-ratio:1100/577;background:var(--ink);user-select:none;touch-action:pan-y;cursor:ew-resize}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba-after{clip-path:inset(0 0 0 var(--cut,50%))}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--cut,50%);width:0;pointer-events:none}
.ba-handle::before{content:'';position:absolute;top:0;bottom:0;left:-1px;width:2px;background:#fff}
.ba-knob{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;box-shadow:0 8px 26px rgba(0,0,0,.4)}
.ba-knob svg{width:19px;height:19px}
.ba-tag{position:absolute;top:13px;font-size:11px;font-weight:600;letter-spacing:.12em;padding:6px 13px;border-radius:999px;background:rgba(20,21,29,.78);color:var(--d-text)}
.ba-tag.pre{left:13px}
.ba-tag.posle{right:13px;background:#fff;color:var(--ink)}
.ba-wrap{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.ba-wrap .ba-item:first-child{grid-column:span 2}
.ba-cap{margin-top:11px;font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.dark .ba-cap{color:var(--d-mut)}
@media(max-width:760px){.ba-wrap{grid-template-columns:1fr}.ba-wrap .ba-item:first-child{grid-column:span 1}}
.svc-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:clamp(28px,3.6vw,52px)}
.svc-head .h-sect{max-width:20ch;margin-top:12px}

/* ============================================================
   FAQ / REGION / CTA
   ============================================================ */
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(34px,5vw,86px);align-items:start}
.faq-intro .eyebrow{margin-bottom:26px}
.faq-intro .h-sect{margin-bottom:16px;max-width:15ch}
.faq-intro p{color:var(--mut);max-width:42ch;font-size:15px;line-height:1.55}
.faq-list{border-top:1px solid var(--hair)}
.faq-item{border-bottom:1px solid var(--hair)}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;text-align:left;padding:20px 2px;font-family:var(--serif);font-size:clamp(20px,2.1vw,30px);line-height:1.12;letter-spacing:-.02em;color:var(--text);transition:opacity .3s}
.faq-q:hover{opacity:.6}
.faq-item.open .faq-q{opacity:1}
.faq-q .ic{flex:none;width:28px;height:28px;display:grid;place-items:center;transition:transform .45s var(--ease)}
.faq-item.open .faq-q .ic{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .55s var(--ease)}
.faq-a p{padding:0 2px 22px;color:var(--mut);font-size:15px;line-height:1.55;max-width:62ch}
@media(max-width:900px){.faq-grid{grid-template-columns:1fr;gap:34px}}

.rg-inner{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,4.6vw,80px);align-items:center}
.rg-copy .eyebrow{margin-bottom:18px}
.rg-copy .h-sect{margin-bottom:13px;font-size:clamp(28px,3.4vw,52px);max-width:18ch}
.rg-copy p{color:var(--mut);font-size:15px;line-height:1.55;max-width:50ch}
.rg-chips{display:flex;flex-wrap:wrap;gap:9px}
.rg-chips a{font-size:13.5px;font-weight:500;color:var(--text);text-decoration:none;border:1px solid rgba(66,67,70,.26);padding:11px 18px;border-radius:999px;transition:background .3s,color .3s,border-color .3s}
.rg-chips a:hover,.rg-chips a.rg-all{background:var(--ink);color:var(--paper);border-color:var(--ink)}
@media(max-width:860px){.rg-inner{grid-template-columns:1fr;gap:28px}}

.cta{background:var(--paper);color:var(--text);padding:clamp(70px,8vw,130px) 0 clamp(110px,13vw,190px);border-top:1px solid var(--hair)}
.cta .eyebrow{margin-bottom:22px;color:var(--mut)}
.cta .h-sect{max-width:15em;margin-bottom:18px}
.cta .h-sect em{font-style:italic}
.cta p{color:var(--mut);max-width:52ch;margin-bottom:34px;font-size:15px;line-height:1.55}
.cta-btns{display:flex;flex-wrap:wrap;gap:clamp(14px,2.4vw,36px);align-items:center}
.cta-phone{font-family:var(--serif);font-size:clamp(26px,3vw,46px);letter-spacing:-.03em;color:var(--text);text-decoration:none;border-bottom:1px solid rgba(66,67,70,.45);padding-bottom:3px;transition:opacity .3s}
.cta-phone:hover{opacity:.6}

/* ============================================================
   FOOTER — giant disc creates the arched top edge
   ============================================================ */
.ft{position:relative;background:linear-gradient(180deg,#2A2B35,#010203);color:var(--d-text);padding:clamp(120px,15vw,240px) 0 0;z-index:3;
  border-radius:50% 50% 0 0 / clamp(60px,9vw,150px) clamp(60px,9vw,150px) 0 0;
  margin-top:calc(-1 * clamp(50px,7vw,120px))}
.ft>.container{position:relative;z-index:2}
.ft-id{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(28px,3.4vw,44px)}
.ft-id .tag{color:var(--d-mut);font-size:15px;line-height:1.55;max-width:30ch}
.ft-id > a{display:block;line-height:0}
.ft-logo-big{width:min(268px,56vw);height:auto;filter:invert(1)}
.ft-top{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(34px,5vw,86px);align-items:start;padding-bottom:clamp(44px,5.6vw,80px)}
.ft-soc{display:flex;gap:9px}
.ft-soc a{width:50px;height:50px;border:1px solid var(--d-hair);border-radius:50%;display:grid;place-items:center;color:var(--d-text);transition:background .3s,color .3s,border-color .3s,transform .4s var(--ease)}
.ft-soc a svg{width:18px;height:18px}
.ft-soc a:hover{background:#fff;border-color:#fff;color:var(--ink);transform:translateY(-3px)}
.ft-cta h2{font-size:clamp(30px,3.4vw,55px);line-height:1;letter-spacing:-.03em;color:#F0EFE9;margin-bottom:clamp(24px,3vw,40px)}
.ft-cta h2 em{font-style:italic}
.ft-form{position:relative}
.ft-form .row{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:11px}
.ft-form input,.ft-form textarea{font:inherit;font-size:15px;color:var(--d-text);background:rgba(234,232,232,.05);border:1px solid var(--d-hair);border-radius:14px;padding:15px 17px;width:100%;transition:border-color .25s,background .25s}
.ft-form textarea{min-height:92px;resize:none;border-radius:18px}
.ft-form input::placeholder,.ft-form textarea::placeholder{color:var(--d-mut)}
.ft-form input:focus,.ft-form textarea:focus{outline:0;border-color:rgba(234,232,232,.5);background:rgba(234,232,232,.09)}
.ft-form .msgrow{display:flex;gap:12px;align-items:center}
.ft-send{flex:none;width:60px;height:60px;border-radius:50%;background:var(--paper-2);color:var(--ink);display:grid;place-items:center;transition:background .3s,transform .4s var(--ease)}
.ft-send svg{width:19px;height:19px}
.ft-send:hover{background:#fff;transform:translateX(3px)}
.ft-form .fm-hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.ft-ok{display:none;border:1px solid var(--d-hair);border-radius:18px;padding:24px}
.ft-ok h3{font-size:25px;color:#fff;margin-bottom:5px}
.ft-ok p{color:var(--d-mut);font-size:14px}
.ft-form.sent form{display:none}
.ft-form.sent .ft-ok{display:block}
.ft-err{display:none;margin-top:11px;border:1px solid var(--d-hair);color:var(--d-mut);border-radius:12px;padding:11px 15px;font-size:13px}
.ft-err.show{display:block}
.ft-grid{display:grid;grid-template-columns:1fr 1fr 1.35fr;gap:clamp(26px,4.4vw,64px);padding:clamp(32px,4.4vw,56px) 0;border-top:1px solid var(--d-hair)}
.ft h4{font-family:var(--ui);font-size:13px;font-weight:500;color:var(--d-mut);margin-bottom:16px}
.ft ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.ft ul a{color:var(--d-text);text-decoration:none;font-size:15px;font-weight:500;transition:opacity .25s}
.ft ul a:hover{opacity:.6}
.ft-loc .plc{font-size:16px;font-weight:700;color:#fff;text-decoration:underline;text-underline-offset:4px;display:inline-block;margin-bottom:10px}
.ft-loc address{font-style:normal;color:var(--d-mut);font-size:14px;line-height:1.55;margin-bottom:12px;max-width:26ch}
.ft-loc .tel{display:block;font-size:16px;font-weight:700;color:#fff;text-decoration:none;margin-bottom:3px}
.ft-loc .tel:hover{opacity:.7}
.ft-hours{margin-top:14px;list-style:none;display:flex;flex-direction:column;gap:5px}
.ft-hours li{display:flex;gap:12px;font-size:13px}
.ft-hours li span:first-child{min-width:12ch;color:var(--d-mut)}
.ft-hours li span:last-child{color:var(--d-text);font-weight:500}
.ft-mail{color:var(--d-text);text-decoration:none;font-size:14px;display:inline-block;margin-top:11px}
/* the bottom padding keeps the last legal link clear of the floating WhatsApp
   button, which is pinned to the viewport and therefore lands on this row when
   you scroll to the very end of the page */
.ft-bottom{border-top:1px solid var(--d-hair);padding:20px 0 clamp(70px,7vw,92px);display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--d-mut)}
.ft-bottom a{color:var(--d-mut);text-decoration:none}
.ft-bottom a:hover{color:#fff}
.ft-lang{display:flex;gap:4px}
.ft-lang a{font-size:12px;font-weight:500;color:var(--d-mut);text-decoration:none;padding:6px 11px;border:1px solid var(--d-hair);border-radius:999px}
.ft-lang a.on{background:var(--d-text);color:var(--ink);border-color:var(--d-text)}
@media(max-width:980px){
  .ft-top{grid-template-columns:1fr;gap:38px}
  .ft-grid{grid-template-columns:1fr 1fr}
  .ft-loc{grid-column:span 2}
}
@media(max-width:560px){.ft-form .row{grid-template-columns:1fr}.ft-grid{grid-template-columns:1fr}.ft-loc{grid-column:span 1}}
@media(max-width:1180px){.ft{padding-bottom:96px}.ft-form .msgrow{padding-right:56px}}

/* ============================================================
   INNER PAGES
   ============================================================ */
.pg-light{background:var(--paper)}
.sp-hero{background:var(--paper);padding:calc(var(--hd-h) + clamp(26px,4vw,60px)) 0 0}
.sp-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(34px,5vw,86px);align-items:center;padding-bottom:clamp(44px,5.6vw,86px)}
.sp-copy .eyebrow{margin-bottom:22px;color:var(--mut)}
.sp-copy h1{font-size:clamp(40px,5.4vw,88px);line-height:.95;margin-bottom:20px}
.sp-copy h1 em{font-style:italic}
.sp-copy .lead{margin-bottom:30px}
.sp-ph{max-width:500px;justify-self:end;width:100%}
.sp-ph img{aspect-ratio:4/5;object-fit:cover;width:100%}
@media(max-width:900px){.sp-grid{grid-template-columns:1fr;gap:38px;padding-bottom:46px}.sp-ph{justify-self:start;max-width:420px}}

.pg-hero{background:var(--paper);padding:calc(var(--hd-h) + clamp(26px,4vw,56px)) 0 clamp(26px,3.6vw,48px)}
.pg-hero .eyebrow{margin-bottom:20px;color:var(--mut)}
.pg-hero h1{font-size:clamp(40px,5.4vw,88px);line-height:.95;max-width:22ch;margin-bottom:16px}
.pg-hero h1 em{font-style:italic}

.tl{max-width:960px}
.tl-head{margin-bottom:clamp(34px,4.4vw,62px)}
.tl-head .eyebrow{margin-bottom:18px;color:var(--mut)}
.tl-list{position:relative}
.tl-line{position:absolute;left:28px;top:8px;bottom:8px;width:1px;background:var(--hair)}
.tl-line i{position:absolute;left:0;top:0;width:100%;height:var(--p,0%);background:var(--text);transition:height .18s linear}
.tl-step{position:relative;display:grid;grid-template-columns:58px 1fr;gap:clamp(18px,2.8vw,38px);padding:clamp(18px,2.4vw,30px) 0}
.tl-num{position:relative;z-index:2;width:58px;height:58px;border-radius:50%;background:var(--paper);border:1px solid var(--hair);display:grid;place-items:center;font-family:var(--serif);font-size:17px;color:var(--mut);transition:border-color .4s,color .4s,background .4s}
.tl-step.hit .tl-num{border-color:var(--ink);color:var(--paper);background:var(--ink)}
.tl-body{padding-top:7px}
.tl-body h3{font-size:clamp(22px,2vw,32px);margin-bottom:7px}
.tl-body p{color:var(--mut);max-width:60ch;font-size:15px;line-height:1.55}
@media(max-width:640px){.tl-line{left:21px}.tl-step{grid-template-columns:44px 1fr;gap:16px}.tl-num{width:44px;height:44px;font-size:14px}}

.fw{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);background:var(--paper-2)}
.fw-inner{max-width:1080px}
.fw-inner .eyebrow{margin-bottom:18px;color:var(--mut)}
.fw-inner .h-sect{font-size:clamp(26px,3vw,50px);margin-bottom:14px;max-width:24ch}
.fw-inner p{color:var(--mut);font-size:15.5px;line-height:1.6;max-width:72ch}

.tw-hero{background:var(--paper);padding:calc(var(--hd-h) + clamp(24px,3.6vw,52px)) 0 clamp(36px,4.8vw,68px);border-bottom:1px solid var(--hair)}
.tw-hero .eyebrow{margin-bottom:20px;color:var(--mut)}
.tw-hero h1{font-size:clamp(38px,5vw,80px);line-height:.95;margin-bottom:18px;max-width:22ch}
.tw-hero .lead{margin-bottom:28px;max-width:70ch}
.tw-meta{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:32px}
.tw-meta span{font-size:12.5px;font-weight:500;border:1px solid rgba(66,67,70,.26);color:var(--mut);border-radius:999px;padding:9px 16px;display:inline-flex;align-items:center;gap:8px}
.tw-meta svg{width:13px;height:13px;color:var(--text)}
.tw-checks{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tw-checks li{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--hair);background:var(--paper-2);padding:17px 19px;font-size:15px;line-height:1.5}
.tw-checks .ck-ic{flex:none;width:20px;height:20px;color:var(--text);margin-top:2px}
.tw-checks .ck-ic svg{width:100%;height:100%}
.tw-list{list-style:none;border-top:1px solid var(--hair);max-width:900px}
.tw-list li{border-bottom:1px solid var(--hair);padding:15px 2px;font-size:15px;color:var(--mut);line-height:1.55}
.tw-list li a{font-family:var(--serif);font-size:22px;letter-spacing:-.02em;color:var(--text);text-decoration:none}
.tw-list li a:hover{opacity:.6}
.tw-prose p{color:var(--mut);max-width:72ch;margin-bottom:15px;font-size:15.5px;line-height:1.6}
@media(max-width:700px){.tw-checks{grid-template-columns:1fr}}

.ct-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:20px;align-items:start}
.ct-info{display:flex;flex-direction:column;gap:20px}
.ct-card{border:1px solid var(--hair);background:var(--paper-2);padding:clamp(22px,2.4vw,34px)}
.ct-card h3{font-size:clamp(21px,1.9vw,29px);margin-bottom:12px}
.ct-card .big{font-family:var(--serif);font-size:clamp(25px,2.4vw,36px);letter-spacing:-.03em;color:var(--text);text-decoration:none;display:block;line-height:1.2}
.ct-card .big:hover{opacity:.6}
.ct-card p,.ct-card li{color:var(--mut);font-size:14.5px;line-height:1.55}
.ct-card ul{list-style:none;display:flex;flex-direction:column;gap:7px}
.ct-card ul li{display:flex;justify-content:space-between;gap:12px}
.ct-card ul li span:last-child{color:var(--text);font-weight:500}
.ct-dark{background:var(--ink);border-color:var(--ink);color:var(--d-text)}
.ct-dark h3{color:#fff}
.ct-dark p{color:var(--d-mut)}
.ct-dark .big{color:#fff}
.ct-map{overflow:hidden;border:1px solid var(--hair);aspect-ratio:16/7}
@media(max-width:760px){.ct-map{aspect-ratio:4/3}}
.ct-map iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(1) contrast(1.04)}

.fm{border:1px solid var(--hair);background:var(--paper-2);padding:clamp(24px,3vw,44px)}
.fm h2{font-size:clamp(28px,2.8vw,44px);margin-bottom:7px}
.fm form>p{color:var(--mut);font-size:14.5px;line-height:1.55;margin-bottom:24px}
.fm-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fm-field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.fm-field label{font-size:12px;font-weight:500;color:var(--mut)}
.fm-field input,.fm-field select,.fm-field textarea{font:inherit;font-size:16px;color:var(--text);background:var(--paper);border:1px solid var(--hair);border-radius:12px;padding:13px 15px;width:100%;transition:border-color .25s}
.fm-field textarea{min-height:120px;resize:vertical}
.fm-field input:focus,.fm-field select:focus,.fm-field textarea:focus{outline:0;border-color:var(--ink)}
.fm-hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.fm-send{width:100%;justify-content:center;margin-top:5px}
.fm-ok{display:none;text-align:center;padding:40px 10px}
.fm-ok .ic{width:56px;height:56px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;margin:0 auto 18px}
.fm-ok .ic svg{width:26px;height:26px}
.fm-ok h3{font-size:29px;margin-bottom:7px}
.fm-ok p{color:var(--mut);font-size:15px}
.fm.sent form{display:none}
.fm.sent .fm-ok{display:block}
.fm-err{display:none;margin-top:12px;background:#fff;border:1px solid var(--hair);color:var(--text);border-radius:11px;padding:12px 15px;font-size:14px}
.fm-err.show{display:block}
@media(max-width:900px){.ct-grid{grid-template-columns:1fr}}
@media(max-width:560px){.fm-row{grid-template-columns:1fr}}

.gl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.gl-item{position:relative;overflow:hidden;border:0;padding:0;cursor:zoom-in;aspect-ratio:3/2;background:#DAD8D6}
.gl-item img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.gl-item:hover img{transform:scale(1.04)}
.gl-item:nth-child(6n+1){grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
@media(max-width:760px){.gl-grid{grid-template-columns:1fr 1fr}.gl-item:nth-child(6n+1){grid-column:span 2;grid-row:span 1;aspect-ratio:3/2}}
.lb{position:fixed;inset:0;z-index:80;background:rgba(12,13,18,.96);display:none;align-items:center;justify-content:center;padding:5vh 4vw}
.lb.open{display:flex}
.lb img{max-width:100%;max-height:100%}
.lb-x{position:absolute;top:20px;right:20px;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.08);color:#fff;display:grid;place-items:center}
.lb-x:hover{background:#fff;color:var(--ink)}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.07);color:#fff;display:grid;place-items:center}
.lb-nav:hover{background:#fff;color:var(--ink)}
.lb-nav.prev{left:16px}.lb-nav.next{right:16px}
.lb-count{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);font-size:12px;font-weight:500;letter-spacing:.18em;color:var(--d-mut)}

.ph-wrap{background:var(--paper);min-height:60vh;display:flex;align-items:center;padding:calc(var(--hd-h) + 44px) 0 clamp(120px,14vw,200px)}
.ph-box{max-width:740px}
.ph-box .eyebrow{margin-bottom:22px;color:var(--mut)}
.ph-box h1{font-size:clamp(40px,5.4vw,84px);line-height:.95;margin-bottom:18px}
.ph-box h1 em{font-style:italic}
.ph-box p{color:var(--mut);margin-bottom:32px;max-width:54ch;font-size:15.5px;line-height:1.6}
.ph-ctas{display:flex;flex-wrap:wrap;gap:12px}

.stats{padding:0;background:var(--paper)}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--hair)}
.stat{padding:clamp(24px,3.2vw,48px) 30px;border-left:1px solid var(--hair)}
.stat:first-child{border-left:0;padding-left:0}
.stat-num{font-family:var(--serif);font-size:clamp(44px,5vw,83px);line-height:.9;letter-spacing:-.03em;color:var(--text);display:flex;align-items:baseline}
.stat-num sup{font-size:.42em;transform:translateY(-.7em);margin-left:3px}
.stat-label{display:block;margin-top:9px;font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
@media(max-width:760px){.stats-grid{grid-template-columns:1fr}.stat{border-left:0;border-top:1px solid var(--hair);padding:22px 0 18px}.stat:first-child{border-top:0}}

.story-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(34px,5vw,86px);align-items:center}
.story-ph{position:relative;max-width:500px}
.story-ph img{aspect-ratio:4/5;object-fit:cover;width:100%;filter:grayscale(1) contrast(1.04)}
.story-copy .eyebrow{margin-bottom:20px}
.story-copy .h-sect{margin-bottom:20px;max-width:17ch}
.story-copy p{color:var(--mut);margin-bottom:16px;max-width:56ch;font-size:15.5px;line-height:1.6}
.story-copy p strong{color:var(--text);font-weight:600}
@media(max-width:900px){.story-grid{grid-template-columns:1fr;gap:44px}}

.dark{background:var(--ink);color:var(--d-text)}
.tech-head{max-width:940px;margin-bottom:clamp(30px,4vw,58px)}
.tech-head .eyebrow{margin-bottom:20px}
.tech-head .lead{margin-top:16px}
.tech-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.tech-card{border:1px solid var(--d-hair);padding:clamp(24px,2.8vw,40px);transition:border-color .35s,background .4s}
.tech-card:hover{border-color:rgba(234,232,232,.32);background:rgba(234,232,232,.03)}
.tech-card .n{font-family:var(--serif);font-size:15px;color:var(--d-mut);display:block;margin-bottom:14px}
.tech-card h3{font-size:clamp(26px,2.8vw,42px);color:#fff;margin-bottom:11px}
.tech-card p{color:var(--d-mut);font-size:15px;line-height:1.55;max-width:54ch}
@media(max-width:860px){.tech-grid{grid-template-columns:1fr}}
.hr-top{border-top:1px solid var(--hair)}

/* ============================================================
   FAB + COOKIES
   ============================================================ */
.fab{position:fixed;right:clamp(14px,2vw,26px);bottom:clamp(14px,2vw,26px);z-index:58;width:56px;height:56px;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;box-shadow:0 14px 36px -8px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.05);transition:background .3s,color .3s,transform .4s var(--ease)}
.fab svg{width:22px;height:22px}
.fab:hover{background:var(--ink);color:#fff;transform:translateY(-3px)}
/* the phone FAB shares the bottom-right corner with the WhatsApp launcher, so it
   sits one button-height above it */
@media(max-width:1180px){.fab{bottom:calc(clamp(14px,2vw,26px) + 70px)}}
@media(min-width:1181px){.fab{display:none}}

/* ============================================================
   WHATSAPP
   ============================================================ */
/* NEVER put a transform on .wa: it is the fixed-position parent of .wa-pop, and a
   transformed ancestor becomes the containing block for fixed descendants, which
   would re-anchor the panel to this 58px button. Opacity only. */
.wa{position:fixed;right:clamp(14px,2vw,26px);bottom:clamp(14px,2vw,26px);z-index:59}
/* both floating buttons arrive last, after the hero has finished assembling */
.js .fab,.js .wa{opacity:0;transition:opacity .55s var(--ease) 1.35s}
.loaded .fab,.loaded .wa{opacity:1}
/* ...and they stand down together. These MUST stay after the .loaded rule above:
   same specificity, so source order is what decides the tie. */
.menu-open .fab,.menu-open .wa,.wa-open .fab{opacity:0;pointer-events:none;transition-delay:0s}
.wa-btn{position:relative;width:58px;height:58px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;box-shadow:0 16px 38px -10px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.16);transition:background .3s,transform .4s var(--ease)}
.wa-btn svg{width:27px;height:27px}
.wa-btn:hover{background:var(--ink-2);transform:translateY(-3px)}
/* the online dot is the only colour on the launcher - it reads as "someone is
   there" without turning the corner of a monochrome site green */
.wa-btn i{position:absolute;top:3px;right:3px;width:11px;height:11px;border-radius:50%;background:#25D366;border:2px solid var(--ink)}
.wa-btn .ic-x{position:absolute;opacity:0;transform:rotate(-45deg) scale(.7);transition:opacity .3s,transform .4s var(--ease)}
.wa-btn .ic-wa{transition:opacity .3s,transform .4s var(--ease)}
.wa.open .wa-btn .ic-wa{opacity:0;transform:rotate(45deg) scale(.7)}
.wa.open .wa-btn .ic-x{opacity:1;transform:none}
.wa.open .wa-btn i{opacity:0}

/* Fixed to the viewport, not absolute inside .wa, and sized with left/right
   rather than 100vw on narrow screens: 100vw counts the scrollbar, so
   calc(100vw - 24px) was wider than the window and hung off the left edge. */
.wa-pop{position:fixed;right:clamp(14px,2vw,26px);bottom:calc(clamp(14px,2vw,26px) + 72px);width:332px;background:var(--ink);border-radius:20px;overflow:hidden;box-shadow:0 34px 80px -20px rgba(0,0,0,.62),0 0 0 1px rgba(255,255,255,.07);opacity:0;transform:translateY(14px) scale(.96);transform-origin:100% 100%;pointer-events:none;transition:opacity .32s var(--ease),transform .42s var(--ease)}
.wa.open .wa-pop{opacity:1;transform:none;pointer-events:auto}
.wa-head{display:flex;align-items:center;gap:12px;padding:15px 14px 14px 16px}
.wa-av{flex:none;width:42px;height:42px;border-radius:50%;background:var(--paper);display:grid;place-items:center}
.wa-av img{width:26px;height:auto}
.wa-id{min-width:0}
.wa-id b{display:block;font-size:14px;font-weight:600;letter-spacing:-.01em;color:#fff}
/* flex-start, not center: the status line wraps to two lines and a dot centred
   against the block sits beside the second line instead of the first */
.wa-id span{display:flex;align-items:flex-start;gap:7px;font-size:11.5px;line-height:1.4;color:var(--d-mut);margin-top:3px}
.wa-id span::before{content:'';width:6px;height:6px;border-radius:50%;background:#25D366;flex:none;margin-top:5px}
.wa-x{margin-left:auto;flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--d-mut);transition:background .25s,color .25s}
.wa-x:hover{background:rgba(234,232,232,.1);color:#fff}
.wa-x svg{width:15px;height:15px}
.wa-body{padding:16px 16px 18px;background:var(--ink-2);border-top:1px solid var(--d-hair)}
.wa-msg{position:relative;background:#fff;color:var(--text);border-radius:3px 15px 15px 15px;padding:13px 15px;font-size:13.5px;line-height:1.5}
.wa-msg::before{content:'';position:absolute;left:-6px;top:0;border-style:solid;border-width:0 7px 9px 0;border-color:transparent #fff transparent transparent}
.wa-msg b{display:block;font-weight:600;color:var(--ink);margin-bottom:3px}
.wa-foot{padding:0 16px 16px;background:var(--ink-2)}
.wa-go{display:flex;align-items:center;justify-content:center;gap:9px;background:#25D366;color:#0A1E12;font-family:var(--ui);font-size:14px;font-weight:700;letter-spacing:-.02em;line-height:1;padding:14px 18px;border-radius:999px;text-decoration:none;transition:background .3s,transform .4s var(--ease)}
.wa-go:hover{background:#1EBE59;transform:translateY(-1px)}
.wa-go svg{width:17px;height:17px}
.wa-note{text-align:center;font-size:11px;color:var(--d-mut);margin-top:11px}
@media(max-width:404px){.wa-pop{left:clamp(14px,2vw,26px);width:auto}}
.ck{position:fixed;left:clamp(12px,2vw,24px);bottom:clamp(12px,2vw,24px);z-index:59;max-width:min(410px,calc(100vw - 100px));background:#fff;color:var(--text);border-radius:16px;padding:20px 22px;box-shadow:0 30px 70px -18px rgba(0,0,0,.5),0 0 0 1px rgba(0,0,0,.05);opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .5s var(--ease),transform .5s var(--ease)}
.ck.show{opacity:1;transform:none;pointer-events:auto}
/* the cookie card is z-59, above the z-55 overlay, so it has to stand down with
   the two floating buttons while the mobile menu is up - and it reaches into the
   WhatsApp panel's corner on a phone, so it stands down for that too. Both rules
   must sit AFTER .ck.show or they lose the specificity tie to it. */
.menu-open .ck,.wa-open .ck{opacity:0;pointer-events:none}
.ck p{font-size:13px;line-height:1.5;color:var(--mut);margin-bottom:14px}
.ck-btns{display:flex;gap:9px;flex-wrap:wrap}
.ck-btns button{font-size:12.5px;font-weight:600;padding:10px 17px;border-radius:999px;transition:background .3s,color .3s,border-color .3s}
.ck-accept{background:var(--ink);color:#fff}
.ck-min{border:1px solid var(--hair);color:var(--mut)}
.ck-min:hover{color:var(--text);border-color:var(--text)}
@media(max-width:560px){.ck{max-width:calc(100vw - 88px)}}

/* ============================================================
   Reduced motion — degrade to fades, never to a dead page
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .why-c{animation:none}
  .js .rv{transform:none}
  .js .irv img{clip-path:none;transform:none;opacity:0;transition:opacity .7s var(--ease)}
  .irv.in img{opacity:1}
  .js .t-rise .tr{transform:none;opacity:0;transition:opacity .7s var(--ease)}
  .t-rise.in .tr{opacity:1}
  /* no curtain, no word rise, no held-back header: the hero is simply there */
  .js .hero-t .w{transform:none}
  .js .home .hero-media,.js .home:not(.loaded) .hero-media{clip-path:none}
  .js .home:not(.loaded) .hd{opacity:1;pointer-events:auto}
  .js .hero-media img{transform:none}
  .goal-txt .w{color:var(--text)}
  .hero{--hero-vh:1}
  .hero-sticky{position:relative;height:auto;overflow:visible}
  .hero-runway{display:none}
  .js .sol.pin{height:auto!important}
  .js .sol.pin .sol-stick{position:static!important;height:auto!important;overflow:visible!important}
  .js .sol.pin .sol-slide{position:relative!important;inset:auto!important;opacity:1!important;visibility:visible!important}
  .js .sol.pin .sol-slide .ph{display:block!important}
  .js .sol.pin .sol-title{position:relative!important;margin:-1.05em var(--pad) 0!important;white-space:normal!important}
  .js .sol.pin .sol-pane{position:relative!important;right:auto!important;top:auto!important;width:auto!important;padding:24px var(--pad) 0!important}
  .js .sol.pin .sol-more{position:relative!important;right:auto!important;bottom:auto!important;padding:22px var(--pad) 0!important}
  .js .sol.pin .sol-media,.js .sol.pin .sol-nav{display:none!important}
  .js .tec-pin.pin{height:auto}
  .js .tec-pin.pin .tec-stick{position:static;height:auto;display:block}
  .tec-item p{max-height:none;overflow:visible;padding-top:8px}
  .tec-item h3{color:var(--text)}
}


/* ============================================================
   PAGE VARIANTS — each service/town page reads differently
   ============================================================ */
.sp-hero.v-b .sp-grid{grid-template-columns:.95fr 1.05fr}
.sp-hero.v-b .sp-copy{order:2}
.sp-hero.v-b .sp-ph{order:1;justify-self:start}
.sp-hero.v-c .sp-grid{grid-template-columns:1fr;gap:clamp(26px,3.4vw,48px)}
.sp-hero.v-c .sp-copy h1{max-width:16ch}
.sp-hero.v-c .sp-ph{max-width:100%;justify-self:stretch}
.sp-hero.v-c .sp-ph img{aspect-ratio:21/9}
@media(max-width:900px){.sp-hero.v-b .sp-copy{order:1}.sp-hero.v-b .sp-ph{order:2}}

/* a dark proof band, image side alternates per service */
.sv{background:var(--ink);color:var(--d-text);padding:clamp(60px,7vw,110px) 0;overflow:hidden}
.sv-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4.6vw,80px);align-items:center}
.sv.flip .sv-ph{order:2}
.sv-ph{overflow:hidden}
.sv-ph img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:grayscale(1)}
.sv-copy .lbl{color:var(--d-mut);margin-bottom:14px}
.sv-copy h2{color:#F0EFE9;margin-bottom:16px}
.sv-copy h2 em{font-style:italic}
.sv-copy p{color:var(--d-mut);font-size:15.5px;line-height:1.6;max-width:52ch}
@media(max-width:860px){.sv-grid{grid-template-columns:1fr;gap:26px}.sv.flip .sv-ph{order:1}}

/* town pages get a photo strip so they do not read as a text dump */
.tw-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding-top:clamp(26px,3.4vw,44px)}
.tw-strip img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:grayscale(1)}
@media(max-width:700px){.tw-strip{grid-template-columns:1fr 1fr}.tw-strip img:last-child{display:none}}


/* ============================================================
   SERVICE / TOWN PAGE SIGNATURE BLOCKS
   Each page gets a different one so the set does not read as
   one template repeated.
   ============================================================ */

/* dark hero, used by the pages that do not get a light one */
.sp-hero.v-dark{background:var(--ink);color:var(--d-text);position:relative;overflow:hidden;padding:calc(var(--hd-h) + clamp(40px,6vw,90px)) 0 0}
.sp-hero.v-dark .sp-grid{padding-bottom:clamp(48px,6vw,92px)}
.sp-hero.v-dark .eyebrow{color:var(--d-text)}
.sp-hero.v-dark .eyebrow i{color:var(--d-mut)}
.sp-hero.v-dark h1{color:#F0EFE9}
.sp-hero.v-dark .lead{color:var(--d-mut)}
.sp-hero.v-dark .btn-solid{background:var(--paper);color:var(--ink)}
.sp-hero.v-dark .btn-line{border-color:var(--d-hair);color:var(--d-text)}
.sp-hero.v-dark .btn-line:hover{background:var(--d-text);color:var(--ink);border-color:var(--d-text)}
.sp-hero.v-dark .sp-ph img{filter:grayscale(1)}

/* full-bleed quote/statement band */
.qb{position:relative;background:var(--ink);color:var(--d-text);overflow:hidden;padding:clamp(70px,9vw,150px) 0}
.qb-bg{position:absolute;inset:0}
.qb-bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);opacity:.34}
.qb-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,13,18,.6),rgba(12,13,18,.85))}
.qb .container{text-align:center}
.qb .lbl{color:var(--d-mut);margin-bottom:18px}
.qb h2{color:#F0EFE9;max-width:20ch;margin:0 auto}
.qb h2 em{font-style:italic}

/* numbered checklist band */
.cl{background:var(--paper-2);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:clamp(60px,7vw,110px) 0}
.cl-head{margin-bottom:clamp(28px,3.6vw,52px);max-width:44ch}
.cl-head .lbl{margin-bottom:14px}
.cl-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(30px,5vw,80px)}
.cl-item{display:grid;grid-template-columns:auto 1fr;gap:clamp(14px,2vw,26px);align-items:baseline;padding:clamp(15px,1.8vw,24px) 0;border-top:1px solid var(--hair)}
.cl-item .n{font-family:var(--serif);font-size:17px;color:var(--mut)}
.cl-item .t{font-size:15.5px;line-height:1.55;color:var(--text)}
@media(max-width:820px){.cl-grid{grid-template-columns:1fr}}

/* photo strip band */
.gs{background:var(--paper);padding:clamp(56px,7vw,110px) 0}
.gs-head{display:flex;align-items:flex-end;justify-content:space-between;gap:26px;margin-bottom:clamp(22px,3vw,40px)}
.gs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.gs-grid img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:grayscale(1)}
.gs-grid img:first-child{aspect-ratio:4/5}
@media(max-width:760px){.gs-grid{grid-template-columns:1fr 1fr}.gs-grid img:last-child{display:none}}

/* compact before/after pair for the prosthetics page */
.bap{background:var(--paper);padding:clamp(56px,7vw,110px) 0}
.bap-head{margin-bottom:clamp(22px,3vw,40px)}

/* dark town hero */
.tw-hero.v-dark{background:var(--ink);border-bottom:0;color:var(--d-text)}
.tw-hero.v-dark .eyebrow{color:var(--d-text)}
.tw-hero.v-dark .eyebrow i{color:var(--d-mut)}
.tw-hero.v-dark h1{color:#F0EFE9}
.tw-hero.v-dark .lead{color:var(--d-mut)}
.tw-hero.v-dark .tw-meta span{border-color:var(--d-hair);color:var(--d-mut)}
.tw-hero.v-dark .tw-meta svg{color:var(--d-text)}
.tw-hero.v-dark .btn-solid{background:var(--paper);color:var(--ink)}
.tw-hero.v-dark .btn-line{border-color:var(--d-hair);color:var(--d-text)}
.tw-hero.v-dark .btn-line:hover{background:var(--d-text);color:var(--ink);border-color:var(--d-text)}

/* ---------------------------------------------------------- cenovnik
   Real price table. Rows are <th scope="row"> + <td> so the table stays
   readable to screen readers and to Google, and the figures are tabular-lined
   so the column reads as a column rather than ragged text. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.cen-head{padding-top:calc(var(--hd-h) + clamp(46px,6vw,92px));padding-bottom:clamp(30px,4vw,56px)}
.cen-head h1{font-size:clamp(46px,8vw,104px);line-height:.92;letter-spacing:-.03em;margin:14px 0 0}
.cen-head h1 em{font-style:italic}
.cen-lead{margin-top:clamp(18px,2vw,28px);max-width:52ch;font-size:clamp(16px,1.3vw,19px);line-height:1.6;color:var(--mut)}
.cen-body{padding-top:clamp(24px,3vw,44px)}
.cen-grp+.cen-grp{margin-top:clamp(38px,4.6vw,72px)}
.cen-grp-t{font-family:var(--serif);font-size:clamp(24px,2.6vw,40px);line-height:1.05;letter-spacing:-.02em;margin:0 0 clamp(12px,1.4vw,20px)}
.cen-tbl{width:100%;border-collapse:collapse;font-family:var(--ui)}
.cen-tbl caption{text-align:left}
.cen-tbl thead th{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);text-align:left;padding:0 0 11px;border-bottom:1px solid var(--hair)}
.cen-tbl thead th:last-child{text-align:right}
.cen-tbl tbody th{font-size:clamp(15px,1.15vw,17px);font-weight:500;text-align:left;color:var(--text);padding:clamp(14px,1.5vw,19px) 18px clamp(14px,1.5vw,19px) 0;border-bottom:1px solid var(--hair);line-height:1.4}
.cen-tbl tbody td{text-align:right;white-space:nowrap;padding:clamp(14px,1.5vw,19px) 0;border-bottom:1px solid var(--hair);vertical-align:baseline}
.cen-tbl tbody tr:hover th,.cen-tbl tbody tr:hover td{background:var(--paper-2)}
.cen-amt{font-size:clamp(17px,1.5vw,22px);font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.cen-from{font-size:12px;font-weight:500;color:var(--mut);letter-spacing:0}
.cen-cur{font-size:12px;font-weight:600;color:var(--mut);margin-left:3px}
.cen-note{margin-top:clamp(28px,3.4vw,50px);max-width:64ch;font-size:14.5px;line-height:1.65;color:var(--mut);border-top:1px solid var(--hair);padding-top:clamp(18px,2vw,26px)}
@media(max-width:640px){
  .cen-tbl thead{display:none}
  .cen-tbl tbody th,.cen-tbl tbody td{display:block;border-bottom:0;padding:0}
  .cen-tbl tbody tr{display:block;padding:14px 0;border-bottom:1px solid var(--hair)}
  .cen-tbl tbody td{text-align:left;margin-top:5px}
  .cen-tbl tbody tr:hover th,.cen-tbl tbody tr:hover td{background:none}
}

/* "for whom is this" band on service pages whose signature block does not carry it */
.fwb-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(26px,5vw,88px);align-items:start}
.fwb-txt{font-size:clamp(17px,1.55vw,23px);line-height:1.62;color:var(--text);max-width:56ch}
@media(max-width:900px){.fwb-grid{grid-template-columns:1fr;gap:20px}}

/* surgeon authority band (service pages) */
.docb{background:var(--paper-2)}
.docb-grid{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1fr);gap:clamp(24px,4vw,68px);align-items:center;max-width:1010px;margin:0 auto}
.docb-ph{border-radius:14px;overflow:hidden;background:var(--paper)}
.docb-ph img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;filter:grayscale(1)}
.docb-name{font-family:var(--serif);font-size:clamp(30px,3.6vw,54px);line-height:1;letter-spacing:-.03em;margin:12px 0 14px}
.docb-txt{font-size:clamp(16px,1.35vw,20px);line-height:1.6;color:var(--text);max-width:48ch;margin-bottom:20px}
@media(max-width:820px){
  .docb-grid{grid-template-columns:1fr;gap:22px}
  .docb-ph{max-width:230px}
}

/* legal pages: plain reading document, no design theatrics */
.lg-head{padding-top:calc(var(--hd-h) + clamp(46px,6vw,92px));padding-bottom:clamp(24px,3vw,44px)}
.lg-head h1{font-size:clamp(42px,7vw,92px);line-height:.94;letter-spacing:-.03em;margin:14px 0 0}
.lg-head h1 em{font-style:italic}
.lg-lead{margin-top:clamp(16px,2vw,26px);max-width:56ch;font-size:clamp(16px,1.3vw,19px);line-height:1.6;color:var(--mut)}
.lg-body{padding-top:clamp(20px,2.4vw,36px)}
.lg-doc{max-width:74ch}
.lg-sec+.lg-sec{margin-top:clamp(30px,3.4vw,54px)}
.lg-sec h2{font-family:var(--ui);font-size:clamp(17px,1.4vw,21px);font-weight:700;letter-spacing:-.02em;margin:0 0 12px;display:flex;gap:12px;align-items:baseline}
.lg-sec h2 .n{font-size:12px;font-weight:500;color:var(--mut);flex:none}
.lg-sec p{font-size:16px;line-height:1.72;color:var(--text);margin:0 0 12px;max-width:70ch}
.lg-sec p:last-child{margin-bottom:0}
.lg-sec a{color:var(--text);text-decoration:underline;text-underline-offset:3px}
.lg-sec code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;background:var(--paper-2);padding:1px 6px;border-radius:5px}
.lg-upd{margin-top:clamp(34px,4vw,60px);padding-top:16px;border-top:1px solid var(--hair);font-size:13.5px;color:var(--mut)}
.ft-legal{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:flex-end}
@media(max-width:760px){.ft-legal{justify-content:flex-start}}