@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:block;src:url(/assets/fonts/manrope-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:block;src:url(/assets/fonts/manrope-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:block;src:url(/assets/fonts/manrope-latin-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:'Manrope';font-style:normal;font-weight:200 800;font-display:block;src:url(/assets/fonts/manrope-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Sora';font-style:normal;font-weight:100 800;font-display:block;src:url(/assets/fonts/sora-latin-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:'Sora';font-style:normal;font-weight:100 800;font-display:block;src:url(/assets/fonts/sora-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{--navy:#0b3267;--deep:#092959;--aqua:#4ed9cd;--ink:#18334e;--muted:#627280;--line:#dce6eb}*{box-sizing:border-box}.icon-arrow{width:1.05em;height:1.05em;display:inline-block;vertical-align:-.08em}img{-webkit-user-select:none;user-select:none;-webkit-user-drag:none;user-drag:none;-webkit-touch-callout:none}html{zoom:var(--page-zoom,1);scroll-behavior:smooth;scroll-padding-top:110px;font-variant-emoji:text;overflow-x:clip;background:#092959}body{overflow-x:clip}body{margin:0;font-family:Manrope,Arial,sans-serif;color:var(--ink);font-size:16px;line-height:1.7;background:#fff}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}a,button{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:3px solid #15b4a6;outline-offset:5px}.wrap{width:min(1240px,calc(100% - 96px));margin:auto}.topbar{background:var(--deep);color:#c8d7e8;font-size:12px;letter-spacing:.025em}.topbar .wrap{display:flex;justify-content:space-between;padding-block:9px}header{position:sticky;top:0;z-index:30;background:#fff;border-bottom:1px solid #e9eef2}.header{height:98px;display:flex;align-items:center;justify-content:space-between;gap:32px}.brand{display:flex;align-items:center;gap:10px;font-size:23px;font-weight:800;letter-spacing:.015em;white-space:nowrap;font-family:Sora,Manrope,Arial,sans-serif}.brand-icon{font-size:38px;line-height:1;position:relative;letter-spacing:-4px}.brand-icon span{font-size:19px;position:absolute;right:-9px;top:-5px;color:#1ebfaf}.brand-icon{margin-right:9px}nav.desktop{display:flex;gap:29px;font-size:14px;font-weight:650}nav a:where(.can-hover *):hover,nav a.active{color:#159e94}.controls{display:flex;align-items:center;gap:25px}.language{border:0;background:none;color:var(--navy);font-size:13px;font-weight:800;padding:10px 0;white-space:nowrap}.language span{font-weight:500;color:#8794a2}.button{display:inline-flex;align-items:center;justify-content:center;gap:28px;background:var(--aqua);color:#073e4b;border-radius:5px;padding:17px 25px;font-weight:750;font-size:14px;transition:background .2s,transform .2s}.button span:last-child{display:inline-block;transform:translateY(0px);transition:translate .3s cubic-bezier(.2,.65,.3,1)}.button:is(:where(.can-hover *):hover,.is-tapped) span:last-child,.button:focus-visible span:last-child{translate:3px -3px}.button:is(:where(.can-hover *):hover,.is-tapped){background:#71e8dd;transform:translateY(-2px)}.button.small{padding:13px 18px;gap:12px}.hero{background:var(--navy);color:#fff;position:relative;overflow:hidden}.hero-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:55px;position:relative;min-height:640px;align-items:center}.hero-copy{padding:60px 0 85px;position:relative}.eyebrow{text-transform:uppercase;letter-spacing:.15em;font-size:13px;font-weight:800;margin:0 0 23px;color:#107773}.hero .eyebrow{color:#8ce6e0;font-size:12px;letter-spacing:.13em}h1{font-size:clamp(36px,4vw,58px);line-height:1.18;font-weight:550;letter-spacing:-.04em;margin:0 0 25px}h1 em{font-style:normal;color:#73e1d6}h2{font-size:clamp(30px,3vw,42px);line-height:1.25;letter-spacing:-.035em;font-weight:600;margin:0 0 24px}h3{font-size:21px;line-height:1.35;letter-spacing:-.025em;font-weight:650}.hero-intro{color:#c0d1e6;max-width:440px;font-size:16px;line-height:1.9;margin:0 0 32px}.hero-actions{display:flex;align-items:center;gap:25px}.hero-link{font-size:13px;color:#e2edf8;border-bottom:1px solid #5a799c;padding-bottom:4px}.hero-note{display:flex;gap:12px;align-items:center;font-size:12px;color:#afc6de;margin-top:55px}.hero .nzok-badge{margin-top:40px}.hero-note span{color:var(--aqua);font-size:22px}.portrait{height:100%;position:relative;display:flex;align-items:flex-end;justify-content:center}.portrait img{position:relative;width:110%;height:auto;max-height:615px;object-fit:contain;object-position:bottom;z-index:2;display:block}.portrait-disc{position:absolute;bottom:12px;width:490px;height:490px;border-radius:50%;background:linear-gradient(140deg,#194b82,#0d3c74);border:1px solid #37609455}.portrait-disc:after{content:'';position:absolute;inset:-37px;border:1px solid #5878a12b;border-radius:50%}.doctor-label{position:absolute;bottom:42px;left:6px;z-index:3;display:flex;align-items:center;gap:13px;background:#fff;padding:17px 26px 17px 18px;border-radius:7px;box-shadow:0 8px 28px #03214b40;color:var(--ink)}.doctor-label strong{font-size:15px;display:block}.doctor-label div>span{font-size:11px;color:var(--muted);display:block}.cross{background:#e0f7f3;color:#1aaf9f;border-radius:50%;width:40px;height:40px;text-align:center;font-size:29px;line-height:36px}.hero-orbit{position:absolute;width:600px;height:600px;border:1px solid #ffffff06;border-radius:50%;right:-340px;top:-260px;box-shadow:0 0 0 100px #ffffff02,0 0 0 200px #ffffff02}.hero-bottom{border-top:1px solid #ffffff13;display:flex;justify-content:space-between;align-items:center;padding:16px 48px;color:#a2b9d2;font-size:9px;letter-spacing:.13em}.hero-bottom a{font-size:21px;line-height:1}.about{display:grid;grid-template-columns:1fr 1fr;gap:100px;padding-block:100px}.about p:not(.eyebrow){margin-top:0;color:#62778b;font-size:16px;line-height:1.95}.signature{font-size:22px;font-weight:650;letter-spacing:-.04em;margin-top:24px}.muted{color:var(--muted);font-size:14px}.services{padding:85px 0 95px;background:#f4f8fb}.section-head{display:flex;align-items:center;justify-content:space-between;gap:30px}.section-head h2{margin-bottom:15px}.text-link{font-size:14px;color:#107773;border-bottom:1px solid #99c8c5;white-space:nowrap;padding-bottom:5px}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:35px}.service-card{position:relative;background:#fff;padding:30px;border:1px solid #e3ebf0;border-radius:7px;transition:transform .2s,border .2s}.service-card:is(:where(.can-hover *):hover,.is-tapped){transform:translateY(-5px);border-color:#65c9c1}.card-top{display:flex;justify-content:space-between;align-items:center;color:#93a4b2;font-size:12px}.service-symbol{font-size:36px;color:#18a699;font-weight:400}.service-card p{color:#768694;font-size:14px;line-height:1.9;max-width:270px;margin-bottom:35px}.card-arrow{color:#a9b8c2;font-size:19px;display:block;text-align:right}.clinic{display:grid;grid-template-columns:1.1fr 1fr;gap:85px;align-items:center;padding-block:95px}.clinic p:not(.eyebrow){color:#71818e}.clinic-placeholder{min-height:340px;display:flex;align-items:center;justify-content:center;flex-direction:column;background:#eef4f7;border:1px solid #e3ecef;border-radius:8px;text-align:center;padding:25px}.clinic-placeholder>span{font-size:100px;color:#c9d9e2;line-height:1.3;font-weight:750}.clinic-placeholder p{font-size:13px}.contact{background:var(--deep);color:white;padding:65px 0}.contact .eyebrow{color:var(--aqua)}.contact-heading{display:flex;justify-content:space-between;gap:50px;align-items:center}.contact-heading>p{color:#a7bdd5;max-width:290px;font-size:14px}.contact-grid{border-top:1px solid #ffffff20;display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px;padding-top:30px;margin-top:12px}.contact-grid span{color:#83a0c0;font-size:12px}.contact-grid p{font-size:14px;margin:6px 0}.footer{display:flex;justify-content:space-between;align-items:center;gap:25px;padding-block:30px}.footer .brand{font-size:19px}.footer>span{font-size:11px;color:#8292a0}.price-hero{background:var(--navy);color:white;padding:75px 0}.price-hero h1{max-width:800px}.price-hero .eyebrow{color:var(--aqua)}.price-hero p:last-child{color:#bdcfe1;max-width:650px}.price-content{padding-block:65px 85px}table{width:100%;border-collapse:collapse;margin-bottom:24px}th{text-align:left;font-size:13px;color:#5b6b78;padding:15px 20px;border-bottom:1px solid var(--line)}td{padding:24px 20px;border-bottom:1px solid var(--line);font-size:16px}td:last-child,th:last-child{text-align:right;white-space:nowrap}td:last-child{color:#5b6b78;font-size:14px}.row-number{color:#5b6b78;font-size:12px;margin-right:28px}.price-content .text-link{display:inline-block;margin-top:25px}.burger,.drawer,.backdrop{display:none}.skip{position:fixed;top:-100px;background:white;color:var(--navy);z-index:100;padding:10px}.skip:focus{top:0}
/* Large desktops (after nebesno.dk and Kvorum). Sizes are in px, so past ~1800px wide (a 24-inch iMac is 2240,
   a 27-inch 5K iMac 2560) the page stopped growing and sat as an island. `zoom` on <html> scales every page at once;
   media queries still see the real width. vh/svh/dvh are scaled by zoom too, so full-height rules divide by it. */
@media(min-width:1800px){:root{--page-zoom:1.15}}
@media(min-width:2200px){:root{--page-zoom:1.3}}
@media(min-width:1500px){.hero-grid{min-height:700px}.portrait img{max-height:660px}}
@media(max-width:1100px){.wrap{width:calc(100% - 56px)}nav.desktop{gap:18px}.controls{gap:15px}.header{gap:20px}.brand{font-size:20px}.hero-grid{gap:28px;min-height:590px}.hero-actions{gap:15px}.hero-link{font-size:11px}.portrait-disc{width:390px;height:390px}.doctor-label{left:0}.about{gap:60px}.hero .eyebrow{font-size:11px}}
@media(max-width:900px){.desktop,nav.desktop{display:none!important}.header{height:78px}.topbar{display:none}.burger{display:flex;align-items:center;gap:12px;border:0;border-radius:7px;background:#eaf4f7;color:var(--navy);padding:11px 14px;font-size:13px;font-weight:650}.burger i{width:18px;height:12px;border-block:1.5px solid currentColor;position:relative}.burger i:after{content:'';position:absolute;left:0;right:0;top:4px;border-top:1.5px solid currentColor}.drawer{display:flex;flex-direction:column;justify-content:space-between;position:fixed;z-index:25;top:78px;right:0;bottom:0;width:min(80%,360px);padding:30px 27px;background:white;transform:translateX(calc(100% + 60px));transition:transform .4s cubic-bezier(.2,.7,.2,1);box-shadow:-18px 0 0 #2d729b,-36px 0 0 #53a1b9,-54px 0 0 #91c8d2;visibility:hidden}.drawer-links{display:flex;flex-direction:column}.drawer-links a{padding:18px 0;font-size:17px}.drawer-bottom{display:grid;gap:22px}.drawer-bottom .language{text-align:left}.backdrop{display:block;position:fixed;inset:78px 0 0;z-index:24;background:#08285566;backdrop-filter:blur(7px);opacity:0;visibility:hidden;transition:.3s}.menu-open{overflow:hidden}.menu-open .drawer{transform:translateX(0);visibility:visible}.menu-open .backdrop{visibility:visible;opacity:1}.menu-open .burger i{border:0}.menu-open .burger i:before,.menu-open .burger i:after{content:'';position:absolute;top:5px;left:0;width:18px;border-top:1.5px solid;transform:rotate(45deg)}.menu-open .burger i:after{transform:rotate(-45deg)}.hero-grid{gap:15px;min-height:540px}.hero-copy{padding-block:55px}.hero-actions{flex-direction:column;align-items:flex-start;gap:19px}.hero-note,.hero .nzok-badge{margin-top:27px}.hero h1{font-size:39px}.hero-intro{font-size:14px}.portrait img{width:125%;max-width:490px}.portrait-disc{width:340px;height:340px}.doctor-label{padding:13px;bottom:28px;gap:9px}.doctor-label strong{font-size:13px}.doctor-label div>span{font-size:10px}.cross{width:30px;height:30px;line-height:28px;font-size:24px}.about{gap:40px;padding-block:65px}.service-grid{gap:14px}.service-card{padding:22px}.service-card h3{font-size:18px}.clinic{gap:35px}.contact-heading{gap:30px}}
@media(max-width:600px){.wrap{width:calc(100% - 40px)}.header{gap:12px}.brand{font-size:18px;gap:7px}.brand-icon{font-size:30px}.brand-icon span{font-size:15px}.controls{gap:17px}.controls>.language{font-size:11px}.burger{padding:10px}.burger>span{display:none}.hero-grid{display:flex;flex-direction:column-reverse;gap:0;min-height:0}.hero-copy{padding:45px 0 25px;width:100%}.hero .eyebrow{font-size:11px;letter-spacing:.09em;margin-bottom:20px}.hero h1{font-size:39px;line-height:1.2;margin-bottom:20px}.hero-intro{font-size:14px;line-height:1.8;max-width:360px}.hero-actions{flex-direction:row;align-items:center;gap:28px}.hero-actions .button{font-size:13px;padding:14px 19px;gap:15px}.hero-link{font-size:11px}.hero-note{font-size:11px;margin-top:24px}.portrait{width:100%;height:370px;margin-top:5px}.portrait img{width:355px;max-height:380px;max-width:none}.portrait-disc{width:310px;height:310px;bottom:-30px}.doctor-label{bottom:24px;left:0;padding:12px 18px 12px 12px}.hero-bottom{padding:14px 20px}.hero-bottom>span:last-child{display:none}.about{grid-template-columns:1fr;gap:9px;padding-block:55px}.about h2{max-width:300px}.eyebrow{font-size:12px;margin-bottom:16px}.about p:not(.eyebrow){font-size:15px}.signature{font-size:20px}.section-head{display:block}.section-head .text-link{display:inline-block;margin-bottom:8px}.services{padding-block:55px}.service-grid{grid-template-columns:1fr;gap:15px;margin-top:25px}.service-card{padding:24px}.service-card h3{font-size:22px;margin-block:13px}.service-card p{max-width:none;margin-bottom:10px}.card-arrow{position:absolute;right:25px;bottom:18px}.service-card p{padding-right:25px}.clinic{grid-template-columns:1fr;gap:35px;padding-block:55px}.clinic-placeholder{min-height:270px;order:2}.clinic h2{max-width:300px}.contact{padding-block:48px}.contact-heading{display:block}.contact-heading>p{max-width:none}.contact-grid{grid-template-columns:1fr;gap:22px;margin-top:30px}.contact h2{font-size:32px}.footer{flex-wrap:wrap;gap:12px}.footer .brand{width:100%}.footer>span{font-size:10px}.price-hero{padding:50px 0}.price-hero h1{font-size:39px}.price-content{padding-block:35px 55px}th,td{padding:19px 6px}td{font-size:14px}td:last-child{font-size:12px}.row-number{display:none}}


/* Supplied clinic identity, matched to the reference header. */
.header .brand{gap:18px;color:#30365f;font-family:Sora,Manrope,Arial,sans-serif;font-size:30px;font-weight:700;letter-spacing:0;line-height:1.15}
.brand-logo{width:76px;height:76px;object-fit:contain;flex-shrink:0;display:block}
.header{gap:24px}
nav.desktop{gap:22px}
.controls{gap:18px}
@media(max-width:1200px) and (min-width:901px){.header .brand{font-size:24px;gap:12px}.brand-logo{width:62px;height:62px}nav.desktop{gap:16px}.header{gap:16px}.controls{gap:12px}.button.small{padding:12px 14px}}
@media(max-width:900px){.header .brand{font-size:27px;gap:14px}.brand-logo{width:62px;height:62px}}
@media(max-width:600px){.header .brand{font-size:21px;gap:9px}.brand-logo{width:48px;height:48px}.header{gap:10px}.controls{gap:12px}}
@media(max-width:370px){.header .brand{font-size:18px;gap:6px}.brand-logo{width:42px;height:42px}.controls{gap:8px}}

/* Reveal each block once as it enters the viewport. */
.scroll-reveal{opacity:0;translate:0 24px;transition:opacity .7s ease,translate .7s cubic-bezier(.2,.65,.3,1);transition-delay:var(--reveal-delay,0ms)}
.scroll-reveal.is-revealed,.scroll-reveal:focus-within{opacity:1;translate:0 0}

@media print{.scroll-reveal{opacity:1;translate:none}}
/* Keep hover movement independent of the scroll-reveal transition. */
.service-card,.service-card.scroll-reveal{transition:opacity .7s ease var(--reveal-delay,0ms),translate .7s cubic-bezier(.2,.65,.3,1) var(--reveal-delay,0ms),transform .32s cubic-bezier(.2,.65,.3,1),box-shadow .32s ease,border-color .32s ease}
.service-card:is(:where(.can-hover *):hover,.is-tapped),.service-card:focus-visible{transform:translateY(-6px);box-shadow:0 14px 30px #163c6012;border-color:#65c9c1}


/* Match the desktop link treatment from the local nebesno navigation. */
@media(min-width:901px){
  nav.desktop a{position:relative;padding:4px 0;color:var(--ink)}
  nav.desktop a::after{content:'';position:absolute;left:0;bottom:-2px;width:0;height:2px;background:#159e94;border-radius:2px}nav.desktop.nav-ready a{transition:color .2s}nav.desktop.nav-ready a::after{transition:width .25s ease}
  nav.desktop a:hover,nav.desktop a:focus-visible,nav.desktop a.active{color:#0f8077}
  nav.desktop a:hover::after,nav.desktop a:focus-visible::after,nav.desktop a.active::after{width:100%}
}

/* Keep every service arrow on one shared baseline. */
.service-card{padding-bottom:72px}
.service-card .card-arrow{position:absolute;right:30px;bottom:25px;line-height:1;text-align:initial}
@media(max-width:600px){.service-card{padding-bottom:58px}.service-card .card-arrow{right:25px;bottom:18px}}

/* Give the portrait a clean lower edge; cover artwork that extends below it. */
.hero-bottom{position:relative;z-index:4;background:#061d3f;border-top-color:#ffffff18}

/* Lighter utility strip above the main navigation. */
.topbar{background:#eaf5f5;color:#356b72;border-bottom:1px solid #d9ebec}
.topbar .wrap{font-weight:600}

/* Softer, pill-shaped calls to action and doctor identification. */
.button{border-radius:999px}
.doctor-label{border-radius:999px}

/* Compact language capsule, adapted from nebesno's nav language control. */
.language{isolation:isolate;position:relative;display:inline-flex;align-items:center;justify-content:center;width:62px;height:26px;padding:2px;border:1px solid #173b5221;border-radius:999px;background:#173b520a;color:#70818d;font-size:11px;font-weight:800;letter-spacing:.02em;line-height:1;transition:border-color .18s ease}
.language::before{content:'';position:absolute;z-index:-1;top:2px;left:2px;width:28px;height:20px;border-radius:999px;background:linear-gradient(180deg,#4ed9cd,#24b8ad);box-shadow:0 1px 4px #159e9466;transform:translateX(0);transition:transform .3s cubic-bezier(.4,0,.2,1)}
.language[aria-label="Превключи на български"]::before{transform:translateX(28px)}
.language:is(:where(.can-hover *):hover,.is-tapped){border-color:#159e9466}
.language .language-option{position:relative;width:28px;color:#70818d;font-weight:700;text-align:center}
.language[aria-label="Switch to English"] .language-option:first-child,
.language[aria-label="Превключи на български"] .language-option:last-child{color:#fff}
.drawer-bottom .language{width:62px;text-align:center;justify-self:start}

/* Desktop spacing and separators matched to nebesno's navigation row. */
@media(min-width:901px){
  .header{justify-content:flex-start}
  .header>.brand{margin-right:auto}
  nav.desktop{gap:24px;white-space:nowrap}
  .controls{gap:24px;margin-left:0}
  .controls::before{content:'';width:1px;height:24px;background:#00000014;flex:0 0 1px}
  .controls .button.small{position:relative;margin-left:25px;padding-inline:24px}
  .controls .button.small::before{content:'';position:absolute;left:-25px;top:50%;width:1px;height:24px;background:#00000014;transform:translateY(-50%)}
}
@media(min-width:901px) and (max-width:1100px){
  nav.desktop{gap:12px}
  .controls{gap:12px;margin-left:0}
  .controls .button.small{margin-left:13px;padding-inline:14px}
  .controls .button.small::before{left:-13px}
}

/* Full-screen language wash, using nebesno's timings in Kirovdent colors. */
#kirov-lang-veil{position:fixed;inset:0;z-index:99999;pointer-events:none;opacity:0;background:linear-gradient(135deg,#4ed9cd,#0b356e)}

/* Balanced desktop brand proportions. */
@media(min-width:901px){
  .header{height:88px}
  .header .brand{gap:14px;font-size:24px}
  .brand-logo{width:58px;height:58px}
}

/* Continue the contact area into a grounded, dark footer. */
footer{background:#071f43;color:#fff;border-top:1px solid #ffffff18}
.footer .brand{color:#fff}
.footer>span{color:#9fb3c9}

/* Keep the booking arrow visually connected to its label. */
.hero-actions .button{gap:12px}

/* Slow ambient movement for the hero's circular artwork. */
@keyframes portrait-ring-breathe{
  0%,100%{transform:scale(.98);opacity:.5}
  50%{transform:scale(1.02);opacity:.85}
}
@keyframes portrait-disc-float{
  0%,100%{transform:translate3d(0,0,0) scale(.99);filter:saturate(.96)}
  50%{transform:translate3d(0,-6px,0) scale(1.01);filter:saturate(1.06)}
}
@keyframes hero-orbit-drift{
  0%,100%{transform:translate3d(0,0,0) scale(.985);opacity:.75}
  50%{transform:translate3d(-20px,16px,0) scale(1.025);opacity:1}
}
/* On a phone the disc and its orbit fill the screen's width, so the same swell reads much bigger: breathe less. */
@keyframes portrait-ring-breathe-sm{
  0%,100%{transform:scale(.99);opacity:.5}
  50%{transform:scale(1.01);opacity:.85}
}
@keyframes portrait-disc-float-sm{
  0%,100%{transform:translate3d(0,0,0) scale(.996);filter:saturate(.96)}
  50%{transform:translate3d(0,-4px,0) scale(1.004);filter:saturate(1.06)}
}
.portrait-disc:after{transform-origin:center;will-change:transform,opacity;animation:portrait-ring-breathe 6.5s ease-in-out infinite}
.portrait-disc{transform-origin:center;will-change:transform,filter;animation:portrait-disc-float 8s ease-in-out infinite}
.hero-orbit{transform-origin:center;will-change:transform,opacity;animation:hero-orbit-drift 14s ease-in-out infinite}
@media(max-width:900px){.portrait-disc{animation-name:portrait-disc-float-sm}.portrait-disc:after{animation-name:portrait-ring-breathe-sm}}


/* Preserve the full Menu/Close label at the narrowest window size. */
@media(max-width:330px){
  .header .brand{gap:0;flex:0 0 auto}
  .header .brand>span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .brand-logo{width:42px;height:42px}
  .controls{margin-left:auto}
}

/* Footer social links. */
.footer-social{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.footer-social a{display:grid;place-items:center;width:38px;height:38px;border:1px solid #ffffff24;border-radius:50%;color:#b9ccdf;background:#ffffff08;transition:color .22s ease,background .22s ease,border-color .22s ease,transform .22s cubic-bezier(.2,.65,.3,1)}
.footer-social a:is(:where(.can-hover *):hover,.is-tapped),.footer-social a:focus-visible{color:#073e4b;background:var(--aqua);border-color:var(--aqua);transform:translateY(-3px)}
.footer-social svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.footer-social .social-fill,.footer-social .social-dot{fill:currentColor;stroke:none}
@media(max-width:600px){.footer-social{width:100%;order:3;margin-top:8px}.footer-social a{width:40px;height:40px}}


/* Staggered first-paint entrance for navigation, text and hero artwork. */
body.page-enter:not(.prices-page):not(.content-page) .topbar{opacity:0;transform:translateY(-10px)}
/* The hero photo is the page's largest paint, so it does not wait for app.js: it shows through the lang-pending cover and
   fades in by CSS from first paint. Its name card holds text, so it still waits for the fonts and arrives with the copy. */
html.lang-pending .hero .portrait{visibility:visible}
html.lang-pending .hero .doctor-label{visibility:hidden}
/* The photo and the disc fade and rise on their own rather than as one .portrait group: a fading ancestor stops the
   name card's backdrop blur from reaching the photo until the entrance ends. Rise uses translate/scale so it stacks
   with the disc's float transform. The disc's list stays fixed (float first) so its float never restarts. */
body.page-enter .portrait>img{animation:portrait-fade .68s ease .11s both,portrait-rise .82s cubic-bezier(.16,1,.3,1) .11s both}
.portrait>.portrait-disc{animation:portrait-disc-float 8s ease-in-out infinite,portrait-fade .68s ease .11s both,portrait-rise .82s cubic-bezier(.16,1,.3,1) .11s both}
@media(max-width:900px){.portrait>.portrait-disc{animation-name:portrait-disc-float-sm,portrait-fade,portrait-rise}}
@keyframes portrait-fade{from{opacity:.01}}
@keyframes portrait-rise{from{translate:0 18px;scale:.985}}
body.page-enter .hero .doctor-label{opacity:0;transform:translateY(12px)}
body.page-enter.page-enter-ready .hero .doctor-label{opacity:1;transform:translateY(0);transition:opacity .68s ease .11s,transform .82s cubic-bezier(.16,1,.3,1) .11s}
body.page-enter .hero-copy>.eyebrow,body.page-enter .hero-copy>h1,body.page-enter .hero-intro,body.page-enter .hero-actions,body.page-enter .hero-note,body.page-enter .hero-bottom>*{opacity:0;transform:translateY(18px)}
body.page-enter .price-hero .eyebrow,body.page-enter .price-hero h1,body.page-enter .price-hero .wrap>p:last-child{opacity:0;transform:translateY(18px)}
body.page-enter.page-enter-ready:not(.prices-page):not(.content-page) .topbar,body.page-enter.page-enter-ready .hero-copy>.eyebrow,body.page-enter.page-enter-ready .hero-copy>h1,body.page-enter.page-enter-ready .hero-intro,body.page-enter.page-enter-ready .hero-actions,body.page-enter.page-enter-ready .hero-note,body.page-enter.page-enter-ready .hero-bottom>*,body.page-enter.page-enter-ready .price-hero .eyebrow,body.page-enter.page-enter-ready .price-hero h1,body.page-enter.page-enter-ready .price-hero .wrap>p:last-child{opacity:1;transform:translateY(0) scale(1);transition:opacity .68s ease,transform .82s cubic-bezier(.16,1,.3,1)}

body.page-enter.page-enter-ready .hero-copy>.eyebrow,body.page-enter.page-enter-ready .price-hero .eyebrow{transition-delay:.14s}
body.page-enter.page-enter-ready .hero-copy>h1,body.page-enter.page-enter-ready .price-hero h1{transition-delay:.22s}
body.page-enter.page-enter-ready .hero-intro,body.page-enter.page-enter-ready .price-hero .wrap>p:last-child{transition-delay:.3s}
body.page-enter.page-enter-ready .hero-actions{transition-delay:.38s}
body.page-enter.page-enter-ready .hero-note{transition-delay:.46s}
body.page-enter.page-enter-ready .hero-bottom>*{transition-delay:.22s}


/* Give the light content bands clearer rhythm and less empty white space. */
.about{position:relative;padding-block:78px;background:#f1f8f7;box-shadow:0 0 0 100vmax #f1f8f7;clip-path:inset(0 -100vmax)}
.about:before{content:'';position:absolute;z-index:1;top:0;left:50%;width:100vw;height:30px;pointer-events:none;transform:translateX(-50%);box-shadow:inset 0 18px 24px -20px #03173380}
.about>div:last-child{padding-left:46px;border-left:1px solid #cfe4e2}
.services{padding-block:72px 84px;background:#eaf2f6;border-top:1px solid #dce9ed}
.service-card{box-shadow:0 8px 28px #123c5d0a}
@media(max-width:600px){.about{padding-block:50px}.about>div:last-child{padding-left:0;border-left:0}.services{padding-block:50px 58px}}

/* Complete staggered entrance for the pricing page. */
body.prices-page.page-enter .price-content thead,body.prices-page.page-enter .price-content tbody tr,body.prices-page.page-enter .price-content>.muted,body.prices-page.page-enter .price-content>.text-link{opacity:0;transform:translateY(14px)}
body.prices-page.page-enter.page-enter-ready .price-content thead,body.prices-page.page-enter.page-enter-ready .price-content tbody tr,body.prices-page.page-enter.page-enter-ready .price-content>.muted,body.prices-page.page-enter.page-enter-ready .price-content>.text-link{opacity:1;transform:translateY(0);transition:opacity .58s ease,transform .72s cubic-bezier(.16,1,.3,1)}
body.prices-page.page-enter.page-enter-ready .price-content thead{transition-delay:.36s}
body.prices-page.page-enter.page-enter-ready .price-content tbody tr:nth-child(1){transition-delay:.42s}
body.prices-page.page-enter.page-enter-ready .price-content tbody tr:nth-child(2){transition-delay:.48s}
body.prices-page.page-enter.page-enter-ready .price-content tbody tr:nth-child(3){transition-delay:.54s}
body.prices-page.page-enter.page-enter-ready .price-content tbody tr:nth-child(4){transition-delay:.6s}
body.prices-page.page-enter.page-enter-ready .price-content tbody tr:nth-child(5){transition-delay:.66s}
body.prices-page.page-enter.page-enter-ready .price-content tbody tr:nth-child(6){transition-delay:.72s}
body.prices-page.page-enter.page-enter-ready .price-content>.muted{transition-delay:.78s}
body.prices-page.page-enter.page-enter-ready .price-content>.text-link{transition-delay:.84s}


/* Blog and gallery page foundations. */
.content-hero h1{max-width:820px}
.price-hero{height:360px;padding:0;display:flex;align-items:center}
.editorial-content,.gallery-content{padding:78px 0 88px;background:#eef5f6}
.content-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.content-card{position:relative;min-height:330px;padding:32px;background:#fff;border:1px solid #dce8eb;border-radius:18px;box-shadow:0 10px 34px #123c5d0b;transition:transform .32s cubic-bezier(.2,.65,.3,1),box-shadow .32s ease,border-color .32s ease}.blog-post-image{width:calc(100% + 64px);margin:-32px -32px 20px;max-height:220px;object-fit:cover;display:block;border-radius:18px 18px 0 0}.blog-post-body p{color:#62778b;font-size:14px;line-height:1.85;margin:0 0 14px}.blog-post-body p:last-child{margin-bottom:0}
.content-card:is(:where(.can-hover *):hover,.is-tapped){transform:translateY(-6px);border-color:#6fc9c3;box-shadow:0 18px 38px #123c5d16}
.content-card-top{display:flex;justify-content:space-between;color:#5b6b78;font-size:11px;font-weight:750;letter-spacing:.1em}
.content-card-top span:first-child{color:#107773}
.content-card h2{font-size:26px;margin:60px 0 18px}
.content-card p{color:#5b6b78;font-size:14px;line-height:1.85}
.content-arrow{position:absolute;right:30px;bottom:25px;color:#a9b8c2;font-size:19px}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.gallery-card{position:relative;display:grid;place-items:center;aspect-ratio:4/3;overflow:hidden;border:1px solid #d9e7eb;border-radius:18px;background:linear-gradient(145deg,#e3f2f1,#dce9f1);color:#6d8793;transition:transform .32s cubic-bezier(.2,.65,.3,1),box-shadow .32s ease}.gallery-photo{display:block;margin:0;padding:0;aspect-ratio:4/5;border:0;box-shadow:0 1px 2px #123c5d1f,0 3px 8px #123c5d17,0 14px 30px #123c5d1a}.gallery-photo img{width:100%;height:100%;object-fit:cover;display:block}.gallery-photo figcaption{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;background:linear-gradient(to top,#0b326799,transparent);color:#fff;font-size:13px;text-align:left;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;line-height:1.45}
.gallery-card:nth-child(2),.gallery-card:nth-child(5){background:linear-gradient(145deg,#edf3f8,#d9ecea)}
.gallery-card:nth-child(3),.gallery-card:nth-child(4){background:linear-gradient(145deg,#e5eef5,#e7f5f2)}
.gallery-photo::after{content:"";position:absolute;inset:-10% -60%;z-index:1;pointer-events:none;background:linear-gradient(105deg,transparent 34%,#ffffff14 42%,#ffffff3d 50%,#ffffff14 58%,transparent 66%);opacity:0;transform:translateX(-70%);transition:opacity .3s ease,transform 0s linear .3s}.gallery-photo:is(:where(.can-hover *):hover,.is-tapped)::after{opacity:1;transform:translateX(70%);transition:opacity .4s ease,transform 1.6s cubic-bezier(.45,0,.25,1)}.gallery-photo figcaption{z-index:2}@media (prefers-reduced-motion:reduce){.gallery-photo::after{display:none}}
.gallery-mark{font-size:64px;font-weight:300;color:#65bbb5;line-height:1}
.gallery-number{position:absolute;top:20px;right:22px;color:#78909d;font-size:11px}
.gallery-card p{position:absolute;left:24px;bottom:17px;margin:0;font-size:12px}
body.content-page.page-enter .content-card,body.content-page.page-enter .gallery-card{opacity:0;transform:translateY(18px)}
body.content-page.page-enter.page-enter-ready .content-card,body.content-page.page-enter.page-enter-ready .gallery-card{opacity:1;transform:translateY(0);transition:opacity .62s ease,transform .78s cubic-bezier(.16,1,.3,1)}
body.content-page.page-enter.page-enter-ready :is(.content-card,.gallery-card):nth-child(1){transition-delay:.36s}
body.content-page.page-enter.page-enter-ready :is(.content-card,.gallery-card):nth-child(2){transition-delay:.43s}
body.content-page.page-enter.page-enter-ready :is(.content-card,.gallery-card):nth-child(3){transition-delay:.5s}
body.content-page.page-enter.page-enter-ready :is(.content-card,.gallery-card):nth-child(4){transition-delay:.57s}
body.content-page.page-enter.page-enter-ready :is(.content-card,.gallery-card):nth-child(5){transition-delay:.64s}
body.content-page.page-enter.page-enter-ready :is(.content-card,.gallery-card):nth-child(6){transition-delay:.71s}
@media(min-width:901px) and (max-width:1180px){.header .brand>span{display:none}nav.desktop{gap:11px;font-size:13px}.controls{gap:10px}.controls .button.small{margin-left:10px;padding-inline:14px}.controls .button.small::before{left:-10px}}
@media(max-width:800px){.content-grid,.gallery-grid{grid-template-columns:1fr 1fr}.content-card{min-height:300px}}
@media(max-width:600px){.price-hero{height:290px;padding:0}.editorial-content,.gallery-content{padding:48px 0 58px}.content-grid,.gallery-grid{grid-template-columns:1fr}.content-card{min-height:280px;padding:26px}.content-card h2{font-size:23px;margin-top:45px}.gallery-card{border-radius:14px}}


/* Contact detail icon labels. */
.contact-label{display:flex;align-items:center;gap:8px}
.contact-label b{display:inline-flex;color:var(--aqua);line-height:1}.contact-label svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* A more cohesive contact and footer composition. */
.contact-heading{display:block}
.contact-heading>p{max-width:560px;margin:0;color:#a7bdd5}
.contact-grid{border-top:0;grid-template-columns:repeat(3,1fr);gap:16px;padding-top:0;margin-top:34px}
.contact-card{position:relative;display:block;min-height:118px;padding:21px 23px;border:1px solid #ffffff14;border-radius:14px;background:#ffffff08;color:inherit;transition:transform .25s cubic-bezier(.2,.65,.3,1),background .25s ease,border-color .25s ease,box-shadow .25s ease}.contact-card:is(:where(.can-hover *):hover,.is-tapped),.contact-card:focus-visible{transform:translateY(-4px);background:#ffffff0d;border-color:#4ed9cd66;box-shadow:0 14px 30px #031b3a30}.contact-card::after{content:'';position:absolute;right:20px;top:17px;width:14px;height:14px;background-color:#ffffff5c;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 21 18 6M11 6h7v7' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") no-repeat center/contain;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 21 18 6M11 6h7v7' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") no-repeat center/contain;opacity:.6;transition:transform .25s ease,opacity .25s ease,background-color .25s ease}.contact-card:is(:where(.can-hover *):hover,.is-tapped)::after,.contact-card:focus-visible::after{transform:translate(2px,-2px);opacity:1;background-color:#4ed9cd}
.contact-grid p{margin:11px 0 0;font-size:15px}
.footer{padding-block:24px}
@media(max-width:600px){.contact-heading>p{margin-top:0}.contact-grid{grid-template-columns:1fr;gap:12px;margin-top:28px}.contact-card{min-height:0}.footer{padding-block:22px}}

/* Symmetrical footer alignment. */
.footer{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.footer>span{text-align:center}
.footer>span:first-child{text-align:left}
.footer>span:last-child{text-align:right}
@media(max-width:600px){.footer{grid-template-columns:1fr;justify-items:center;gap:15px;text-align:center}.footer>span:first-child,.footer>span:last-child{text-align:center}.footer-social{width:auto;order:0;margin-top:0}}

/* Let the homepage hero occupy the full desktop viewport below the header. */
@media(min-width:901px){
  .hero{display:flex;min-height:calc(100vh / var(--page-zoom,1) - 89px);min-height:calc(100dvh / var(--page-zoom,1) - 89px);flex-direction:column}
  .hero-grid{flex:1;min-height:0}
}
@media(min-width:901px) and (max-width:1180px){
  .hero{min-height:calc(100vh - 87px);min-height:calc(100dvh - 87px)}
}
@media(min-width:1181px) and (min-height:820px){
  .hero-copy{transform:translateY(-42px)}
  .portrait img{width:118%;max-height:min(720px,calc(100svh / var(--page-zoom,1) - 205px));transform:scale(1.08);transform-origin:center bottom}
  .portrait-disc{width:530px;height:530px}
}

/* Superdoc review marquee. */
.reviews{padding:78px 0 86px;overflow:hidden;background:#f7fbfb;border-top:1px solid #dce9ed}
.reviews-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:34px}
.reviews-head h2{margin-bottom:10px}
.reviews-head>div>p:last-child{max-width:650px;margin:0;color:#71818e}
.reviews-head .text-link{flex:0 0 auto;margin-bottom:4px}
.reviews-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.reviews-track{display:flex;width:max-content;gap:0;will-change:transform;backface-visibility:hidden;animation:reviews-scroll 52s linear infinite}
.reviews-group{display:flex;gap:22px;padding-right:22px}
.review-card{width:clamp(390px,38vw,570px);padding:27px 29px;background:#fff;border:1px solid #dce7ea;border-radius:18px;box-shadow:0 10px 34px #123c5d0b}
.review-top{display:flex;align-items:center;justify-content:space-between;gap:20px}
.review-top strong{font-size:18px;color:var(--navy)}
.review-top time{font-size:13px;color:#71859c;white-space:nowrap}
.review-text{min-height:54px;margin:22px 0;font-size:17px;line-height:1.6;color:#233b55}
.review-card:not(:has(.review-text)) .review-ratings{margin-top:35px}
.review-ratings{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding-top:18px;border-top:1px solid #e4ecef}
.review-ratings span{display:block;margin-bottom:5px;color:#71818e;font-size:11px;line-height:1.35}
.review-ratings b{display:block;color:#efb000;font-size:17px;line-height:1;letter-spacing:1px;white-space:nowrap}
/* The rating stars are drawn from a star with softly rounded points (a text ★ cannot be rounded); the ★ text stays
   for copy/paste and the aria-label still reads "five stars". */
.review-ratings b{width:calc(5 * 1em);height:1em;color:transparent;overflow:hidden;background:#efb000;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2.6 2.1 18.8 18.8'%3E%3Cpath d='M12 3.2l2.6 5.6 6.1.7-4.5 4.2 1.2 6L12 16.8l-5.4 2.9 1.2-6-4.5-4.2 6.1-.7z' fill='%23000' stroke='%23000' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0/1em 1em repeat-x;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2.6 2.1 18.8 18.8'%3E%3Cpath d='M12 3.2l2.6 5.6 6.1.7-4.5 4.2 1.2 6L12 16.8l-5.4 2.9 1.2-6-4.5-4.2 6.1-.7z' fill='%23000' stroke='%23000' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0/1em 1em repeat-x}
@keyframes reviews-scroll{to{transform:translate3d(-50%,0,0)}}
@media(max-width:700px){
  .reviews{padding:52px 0 58px}
  .reviews-head{display:block;margin-bottom:27px}
  .reviews-head .text-link{display:inline-block;margin-top:20px}
  .reviews-marquee{-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
  .review-card{width:84vw;max-width:430px;padding:23px}
  .review-text{font-size:15px}
  .review-ratings{gap:9px}
  .review-ratings span{font-size:10px}
  .review-ratings b{font-size:14px;letter-spacing:0}
}


/* Desktop back-to-top control. */
.back-to-top{display:none}
@media(min-width:901px){
  .back-to-top{position:fixed;z-index:24;left:28px;bottom:28px;display:grid;place-items:center;width:48px;height:48px;padding:0;border:1px solid #d9e7eb;border-radius:50%;background:#fff;color:var(--navy);box-shadow:0 10px 28px #071f4330;opacity:0;pointer-events:none;transform:translateY(12px);transition:opacity .22s ease,transform .3s cubic-bezier(.2,.65,.3,1),background .2s ease,color .2s ease,border-color .2s ease}
  .back-to-top.is-visible{opacity:1;pointer-events:auto;transform:translateY(0)}
  .back-to-top:is(:where(.can-hover *):hover,.is-tapped),.back-to-top:focus-visible{background:var(--aqua);color:#073e4b;border-color:var(--aqua);transform:translateY(-3px)}
  .back-to-top svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
}


/* Distinct service destinations on the price page. */
.price-content tbody tr[id]{scroll-margin-top:150px}
.price-content tbody tr[id] td{transition:background .35s ease,color .35s ease}
.price-content tbody tr[id]:target td{background:#e8f7f5;color:#0b5d61}
.price-link{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:10px;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:color .3s ease,background-size .4s ease}
.price-link>span{display:inline-flex;font-size:.8em;color:#107773;opacity:.55;transition:opacity .3s ease,transform .3s ease}
.price-link:is(:where(.can-hover *):hover,:focus-visible){color:#0b5d61;background-size:calc(100% - 1.8em) 1px}
.price-link:is(:where(.can-hover *):hover,:focus-visible)>span{opacity:1;transform:translate(2px,-2px)}

/* Dedicated contact page with an embedded clinic map. */
.contact-page-content{padding:78px 0 88px;background:#eef5f6}
.contact-page-layout{display:grid;grid-template-columns:.88fr 1.12fr;gap:54px;align-items:start}
.contact-page-intro{max-width:530px;margin:-8px 0 30px;color:#5b6b78}
.contact-page-cards{display:grid;gap:12px}
.contact-page-card{position:relative;display:block;padding:20px 52px 20px 21px;border:1px solid #d9e7eb;border-radius:14px;background:#fff;box-shadow:0 8px 26px #123c5d0a;transition:transform .25s cubic-bezier(.2,.65,.3,1),border-color .25s ease,box-shadow .25s ease}
.contact-page-card:is(:where(.can-hover *):hover,.is-tapped),.contact-page-card:focus-visible{transform:translateY(-3px);border-color:#66c9c1;box-shadow:0 14px 30px #123c5d16}
.contact-page-card .contact-label{color:#5b6b78;font-size:12px}
.contact-page-card strong{display:block;margin-top:9px;color:var(--navy);font-size:15px;line-height:1.6}
.contact-page-arrow{position:absolute;right:20px;top:50%;color:#a9b8c2;font-size:16px;transform:translateY(-50%)}
.map-card{position:relative;min-height:520px;overflow:hidden;border:1px solid #d6e4e8;border-radius:18px;background:#dfecef;box-shadow:0 16px 42px #123c5d18}
.map-card iframe{display:block;width:100%;height:520px;border:0}
@media(max-width:900px){.contact-page-layout{grid-template-columns:1fr;gap:34px}.map-card,.map-card iframe{min-height:420px;height:420px}}
@media(max-width:600px){.contact-page-content{padding:50px 0 58px}.map-card,.map-card iframe{min-height:340px;height:340px}.map-card{border-radius:14px}.contact-page-card{padding:18px 48px 18px 18px}}

/* Contact page entrance sequence */
body.contact-page.page-enter .contact-page-layout>div:first-child>.eyebrow,
body.contact-page.page-enter .contact-page-layout>div:first-child>h2,
body.contact-page.page-enter .contact-page-intro,
body.contact-page.page-enter .contact-page-card,
body.contact-page.page-enter .map-card{opacity:0;transform:translateY(18px)}
body.contact-page.page-enter.page-enter-ready .contact-page-layout>div:first-child>.eyebrow,
body.contact-page.page-enter.page-enter-ready .contact-page-layout>div:first-child>h2,
body.contact-page.page-enter.page-enter-ready .contact-page-intro,
body.contact-page.page-enter.page-enter-ready .contact-page-card,
body.contact-page.page-enter.page-enter-ready .map-card{opacity:1;transform:translateY(0);transition:opacity .62s ease,transform .78s cubic-bezier(.16,1,.3,1)}
body.contact-page.page-enter.page-enter-ready .contact-page-layout>div:first-child>.eyebrow{transition-delay:.34s}
body.contact-page.page-enter.page-enter-ready .contact-page-layout>div:first-child>h2{transition-delay:.4s}
body.contact-page.page-enter.page-enter-ready .contact-page-intro{transition-delay:.46s}
body.contact-page.page-enter.page-enter-ready .contact-page-card:nth-child(1){transition-delay:.52s}
body.contact-page.page-enter.page-enter-ready .contact-page-card:nth-child(2){transition-delay:.58s}
body.contact-page.page-enter.page-enter-ready .contact-page-card:nth-child(3){transition-delay:.64s}
body.contact-page.page-enter.page-enter-ready .map-card{transition-delay:.46s}


/* Refined framing bars */
.topbar{background:#dff2f1;color:#2b6870;border-bottom-color:#cce6e5}
.hero-bottom{background:#08254d;color:#abc0d5;border-top-color:#ffffff1c}
.hero-bottom a{color:#bdd2e5}

/* Hero scroll cue interaction */
.hero-bottom a{display:inline-flex;transition:color .2s ease}
.hero-bottom a:is(:where(.can-hover *):hover,.is-tapped),.hero-bottom a:focus-visible{color:#fff;animation:hero-arrow-bob .7s ease-in-out infinite alternate}
@keyframes hero-arrow-bob{to{transform:translateY(5px)}}


/* Mobile reviews: show complete cards and use swipe navigation. */
@media(max-width:700px){
  .reviews{padding:46px 0 54px}
  .reviews-head{margin-bottom:24px}
  .reviews-head h2{font-size:clamp(30px,9vw,38px)}
  .reviews-marquee{overflow-x:auto;padding-inline:20px;scroll-snap-type:x mandatory;scroll-padding-inline:20px;-webkit-overflow-scrolling:touch;-webkit-mask-image:none;mask-image:none;scrollbar-width:none}
  .reviews-marquee::-webkit-scrollbar{display:none}
  .reviews-track{animation:none;will-change:auto;gap:0}
  .reviews-group{gap:14px;padding-right:14px}
  .reviews-group[aria-hidden="true"]{display:none}
  .review-card{flex:0 0 calc(100vw - 40px);width:calc(100vw - 40px);max-width:none;padding:22px 20px;scroll-snap-align:center}
  .review-top{align-items:flex-start;gap:12px}
  .review-text{min-height:0;margin:18px 0;font-size:15px;line-height:1.55}
  .review-ratings{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;padding-top:16px}
  .review-ratings span{font-size:9px}
  .review-ratings b{font-size:13px;letter-spacing:-.25px}
}
@media(max-width:700px){.reviews-group[aria-hidden="true"]{display:flex}}


/* Compact mobile introduction. */
@media(max-width:600px){
  .about{gap:20px;padding-block:44px}
  .about h2{max-width:330px;margin:0;font-size:32px;line-height:1.16}
  .about>div:last-child{padding-left:18px;border-left:2px solid #65d4ca}
  .about p:not(.eyebrow){margin:0;font-size:14px;line-height:1.72}
  .about .signature{margin-top:18px;font-size:18px;line-height:1.35}
  .about .muted{font-size:12px;line-height:1.5}
}
.signature::before{content:"— ";color:#25aaa0;font-weight:500}

/* Softer alternating surfaces reduce large white fields. */
body{background:#edf4f5}
header{background:#fbfdfd}
.about{background:#e8f4f2;box-shadow:0 0 0 100vmax #e8f4f2}
.services{background:#dfecef;border-top-color:#cfe0e4}
.service-card{background:#f7fbfb;border-color:#d2e2e6}
.reviews{background:#eaf3f3;border-top-color:#d2e3e4}
.review-card{background:#f8fbfb;border-color:#cfdee2}
.clinic{background:#f1f6f6;box-shadow:0 0 0 100vmax #f1f6f6;clip-path:inset(0 -100vmax)}
.clinic-placeholder{background:#dfeaec;border-color:#d1e0e3}
.price-content{position:relative;background:#f3f7f8;box-shadow:0 0 0 100vmax #f3f7f8;clip-path:inset(0 -100vmax)}
.editorial-content,.gallery-content,.contact-page-content{background:#e7f0f2}
.content-card,.contact-page-card{background:#f8fbfb;border-color:#cfdee2}

/* Mobile footer reading order. */
@media(max-width:600px){
  footer .footer{flex-direction:column;flex-wrap:nowrap;justify-content:center;text-align:center;padding-block:28px 22px}
  footer .footer-social{order:1}
  footer .footer>span:last-child{order:2;margin-top:6px}
  footer .footer>span:first-child{order:3;margin-top:8px}
}

/* Simplified footer without the repeated doctor name. */
@media(min-width:601px){
  footer .footer{display:grid;grid-template-columns:1fr auto 1fr}
  footer .footer>span:first-child{justify-self:start}
  footer .footer-social{grid-column:3;justify-self:end}
}
@media(max-width:600px){
  footer .footer-social{order:1;margin-top:0}
  footer .footer>span:first-child,footer .footer>span:last-child{order:2;margin-top:8px}
}
@media(max-width:600px){footer .footer-social{justify-content:flex-end}}

/* Large language control directly beneath the mobile navigation links. */
@media(max-width:900px){
  .drawer-language-row{display:flex;align-items:center;margin-top:2px}
  .drawer-language{justify-content:flex-start;width:auto;height:auto;padding:17px 16px;border:0;background:none;gap:13px;font-size:16px;letter-spacing:0}
  .drawer-language::before{display:none}
  .drawer-language .language-option{width:auto;font-size:16px;font-weight:600;color:#82929e}
  .drawer-language .language-option:first-child::after{content:'/';margin-left:13px;color:#b3c0c7;font-weight:400}
  .drawer-language[aria-label="Switch to English"] .language-option:first-child,
  .drawer-language[aria-label="Превключи на български"] .language-option:last-child{color:#159e94}
  .drawer-bottom{padding-top:20px}
  .drawer-bottom .button{width:100%;justify-content:center;gap:14px}
}

/* A restrained emphasis when navigation lands on the About section. */
@keyframes about-text-bounce{
  0%,100%{transform:translateY(0)}
  45%{transform:translateY(-4px)}
}
.about.about-bounce>div{animation:about-text-bounce .48s cubic-bezier(.33,1,.68,1) both}
.about.about-bounce>div+div{animation-delay:.04s}


/* Keep the language control neutral until the saved locale has been applied. */
.language[aria-label="Switch language"]{visibility:hidden}
.language:not(.language-ready)::before{transition:none}

/* Navy testimonial field for stronger rhythm and contrast. */
.reviews{background:#123d68;border-top-color:#28537d}
.reviews .eyebrow{color:#78ddd6}
.reviews-head h2{color:#f7fbff}
.reviews-head>div>p:last-child{color:#b9cadb}
.reviews-head .text-link{color:#7fe0d9;border-bottom-color:#69aaa8}
.reviews-head .text-link:is(:where(.can-hover *):hover,.is-tapped),.reviews-head .text-link:focus-visible{color:#a5f2ec;border-bottom-color:#a5f2ec}
.review-card{background:#f3f8f9;border-color:#c4d5da;box-shadow:0 14px 38px #041d3940}

/* A leading clone keeps the previous mobile review visible at the loop seam. */
.reviews-mobile-leading{display:none}
@media(max-width:700px){.reviews-mobile-leading{display:flex}}

/* Tablet navigation uses the roomy menu without changing the page layout. */
@media(min-width:901px) and (max-width:1180px){
  .desktop,nav.desktop{display:none!important}
  .header{height:86px}
  .header .brand>span{display:inline}
}
@media(max-width:1180px){
  .drawer-language-row{display:flex;align-items:center;margin-top:2px}
  .drawer-language{justify-content:flex-start;width:auto;height:auto;padding:17px 16px;border:0;background:none;gap:13px;font-size:16px;letter-spacing:0}
  .drawer-language::before{display:none}
  .drawer-language .language-option{width:auto;font-size:16px;font-weight:600;color:#82929e}
  .drawer-language .language-option:first-child::after{content:'/';margin-left:13px;color:#b3c0c7;font-weight:400}
  .drawer-language[aria-label="Switch to English"] .language-option:first-child,
  .drawer-language[aria-label="Превключи на български"] .language-option:last-child{color:#159e94}
  .drawer-bottom{padding-top:20px}
  .drawer-bottom .button{width:100%;justify-content:center;gap:14px}
}

/* Stable intermediate layout for narrow desktop and tablet windows. */
@media(min-width:601px) and (max-width:900px){
  .hero-grid{display:flex;flex-direction:column-reverse;gap:0;min-height:0}
  .hero-copy{width:100%;padding:58px 0 36px}
  .hero h1{max-width:680px;font-size:clamp(44px,7vw,52px);line-height:1.16}
  .hero-intro{max-width:620px;font-size:15px}
  .hero-actions{flex-direction:row;align-items:center;gap:30px}
  .hero-link{font-size:13px}
  .hero-note,.hero .nzok-badge{margin-top:32px}
  .portrait{width:100%;height:460px;margin-top:0}
  .portrait img{width:470px;max-width:90%;max-height:480px}
  .portrait-disc{width:410px;height:410px;bottom:-28px}
  .doctor-label{bottom:28px;left:0}
  .hero-bottom{padding:15px 28px}
  .about{grid-template-columns:1fr;gap:24px;padding-block:68px}
  .about h2{max-width:560px;margin-bottom:0}
  .about>div:last-child{max-width:680px;padding-left:22px;border-left:2px solid #65d4ca}
  .service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .service-card:last-child{grid-column:1/-1}
  .clinic{grid-template-columns:1fr;gap:38px}
  .clinic-placeholder{order:2}
  .contact-heading{display:block}
  .contact-heading>p{max-width:580px;margin-top:0}
}

/* Dedicated About page. */
.about-more{display:table;margin-top:22px}
.about-page-content{padding:82px 0 92px;background:#e7f0f2}
.about-page-intro{display:grid;grid-template-columns:.9fr 1.1fr;gap:78px;align-items:center}
.about-page-portrait{position:relative;min-height:540px;overflow:hidden;border-radius:22px;background:#123d68;border:1px solid #28537d;box-shadow:0 20px 50px #08294d26}
.about-page-disc{position:absolute;left:50%;bottom:-80px;width:470px;height:470px;border-radius:50%;background:#22588a;border:1px solid #ffffff18;transform:translateX(-50%);box-shadow:0 0 0 45px #ffffff08}
.about-page-portrait img{position:absolute;z-index:1;left:50%;bottom:0;width:auto;height:515px;max-width:94%;object-fit:contain;object-position:center bottom;transform:translateX(-50%)}
.about-page-copy>p:not(.eyebrow){max-width:620px;color:#566775;font-size:17px;line-height:1.95}
.about-page-copy .signature{margin-top:30px}
.about-values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:34px}
.about-value-card{position:relative;min-height:220px;padding:28px;border:1px solid #cadde1;border-radius:16px;background:#f5f9f9;box-shadow:0 10px 30px #123c5d0c}
.about-value-card>span{color:#159e94;font-size:12px;font-weight:750;letter-spacing:.08em}
.about-value-card h3{margin:35px 0 12px;color:var(--navy)}
.about-value-card p{margin:0;color:#6b7f8f;font-size:14px;line-height:1.8}
@media(max-width:900px){
  .about-page-content{padding:62px 0 72px}
  .about-page-intro{grid-template-columns:1fr;gap:42px}
  .about-page-portrait{min-height:470px}
  .about-page-portrait img{height:455px}
  .about-page-disc{width:410px;height:410px}
  .about-values{grid-template-columns:1fr}
  .about-value-card{min-height:0}
  .about-value-card h3{margin-top:22px}
}
@media(max-width:600px){
  .about-page-content{padding:46px 0 56px}
  .about-page-intro{gap:32px}
  .about-page-portrait{min-height:390px;border-radius:16px}
  .about-page-portrait img{height:380px}
  .about-page-disc{width:330px;height:330px;bottom:-55px}
  .about-page-copy>p:not(.eyebrow){font-size:15px;line-height:1.8}
  .about-values{margin-top:26px;gap:13px}
  .about-value-card{padding:23px}
}

/* Slow concentric motion behind the About portrait. */
.about-page-disc{will-change:transform,box-shadow;animation:about-disc-breathe 8s ease-in-out infinite}
.about-page-disc::after{content:'';position:absolute;inset:-46px;border:1px solid #ffffff1a;border-radius:50%;animation:about-ring-breathe 10s ease-in-out infinite}
@keyframes about-disc-breathe{
  0%,100%{transform:translateX(-50%) scale(.99);box-shadow:0 0 0 44px #ffffff07}
  50%{transform:translateX(-50%) scale(1.01);box-shadow:0 0 0 50px #ffffff0a}
}
@keyframes about-ring-breathe{
  0%,100%{opacity:.5;transform:scale(.985)}
  50%{opacity:.85;transform:scale(1.015)}
}
@keyframes about-disc-breathe-sm{
  0%,100%{transform:translateX(-50%) scale(.996);box-shadow:0 0 0 44px #ffffff07}
  50%{transform:translateX(-50%) scale(1.004);box-shadow:0 0 0 48px #ffffff0a}
}
@media(max-width:900px){.about-page-disc{animation-name:about-disc-breathe-sm}}


/* Expanded About page sections. */
.about-detail-section{padding-top:82px}
.about-detail-section+.about-detail-section{margin-top:82px;border-top:1px solid #c9dcdf}
.about-section-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.72fr);column-gap:70px;align-items:end;margin-bottom:30px}
.about-section-head .eyebrow{grid-column:1/-1}
.about-section-head h2{margin:0}
.about-section-head>p:last-child:not(.eyebrow){margin:0;color:#687e8e;line-height:1.8}
.about-credentials{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.about-credential-card{min-height:210px;padding:28px;border:1px dashed #a9c5ca;border-radius:16px;background:#edf4f5}
.about-credential-card>span,.about-interest-card>span{color:#159e94;font-size:12px;font-weight:750;letter-spacing:.08em}
.about-credential-card h3{margin:35px 0 12px;color:var(--navy)}
.about-credential-card p,.about-interest-card p{margin:0;color:#718493;font-size:14px;line-height:1.8}
.about-detail-section .about-values{width:100%;margin-top:0}
.about-interests{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.about-interest-card{display:flex;gap:22px;min-height:145px;padding:25px;border:1px solid #cadde1;border-radius:16px;background:#f5f9f9}
.about-interest-card h3{margin:0 0 10px;color:var(--navy);font-size:18px}
@media(max-width:900px){
  .about-detail-section{padding-top:62px}
  .about-detail-section+.about-detail-section{margin-top:62px}
  .about-section-head{grid-template-columns:1fr;gap:8px}
  .about-section-head .eyebrow{grid-column:auto}
  .about-section-head>p:last-child:not(.eyebrow){max-width:650px;margin-top:4px}
  .about-interests{grid-template-columns:1fr}
}
@media(max-width:600px){
  .about-detail-section{padding-top:48px}
  .about-detail-section+.about-detail-section{margin-top:48px}
  .about-section-head{margin-bottom:22px}
  .about-section-head h2{font-size:31px}
  .about-credentials{grid-template-columns:1fr;gap:13px}
  .about-credential-card{min-height:0;padding:23px}
  .about-credential-card h3{margin-top:22px}
  .about-interest-card{min-height:0;padding:22px}
}

/* One unified contact and booking conclusion. */
.contact-actions{display:flex;align-items:center;justify-content:flex-end;gap:28px}
.contact-actions>p{max-width:290px;margin:0;color:#a7bdd5;font-size:14px}
.contact-book{flex:0 0 auto;min-width:154px}
@media(max-width:820px){
  .contact-actions{justify-content:flex-start;flex-wrap:wrap;margin-top:20px}
  .contact-actions>p{max-width:540px}
}
@media(max-width:600px){
  .contact-actions{display:grid;gap:20px}
  .contact-book{width:100%}
}

/* Tighter editorial grouping for About details and the closing contact block. */
.about-section-head{display:block;max-width:850px;margin-bottom:30px}
.about-section-head .eyebrow{margin-bottom:18px}
.about-section-head h2{margin:0 0 13px}
.about-section-head>p:last-child:not(.eyebrow){max-width:680px;margin:0;color:#687e8e;line-height:1.75}
.about-credential-card{min-height:170px;padding:25px 28px}
.about-credential-card h3{margin:24px 0 8px}
.about-interest-card{min-height:118px;padding:22px 24px;align-items:flex-start}
.about-interest-card h3{font-size:17px}
.contact-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:48px}
.contact-heading>div{max-width:760px}
.contact-heading h2{margin-bottom:12px}
.contact-intro{max-width:620px;margin:0;color:#a7bdd5;font-size:14px}
.contact-book{align-self:end;min-width:170px;gap:14px}
@media(max-width:820px){
  .contact-heading{display:block}
  .contact-book{width:auto;margin-top:24px}
}
@media(max-width:600px){
  .about-section-head{margin-bottom:22px}
  .about-credential-card{min-height:0;padding:22px}
  .about-interest-card{padding:20px}
  .contact-book{width:100%}
}

/* Verified professional details on the About page. */
.about-credential-summary{display:grid;gap:14px}
.about-credential-summary .about-credential-card{min-height:0}
.about-qualification-card{min-height:0}
.about-qualification-card ul{margin:0;padding-left:20px;color:#607989;font-size:14px;line-height:1.65}
.about-qualification-card li+li{margin-top:8px}
@media(max-width:900px){
  .about-credentials{grid-template-columns:1fr}
}

/* A clearer handoff from the shared page header into the biography. */
.about-page-content{padding-top:64px}
.about-page-copy h2{margin-bottom:4px}
.about-role{display:block;margin-bottom:24px;color:#718493;font-size:14px}
@media(max-width:600px){
  .about-page-content{padding-top:42px}
}

/* Add contrast and structure to the text-heavy About content. */
.about-page-copy{position:relative;padding:40px 42px;background:#f8fbfc;border:1px solid #cbdfe3;border-radius:22px;box-shadow:0 18px 44px #123c5d12;overflow:hidden}
.about-page-copy::before{content:'';position:absolute;left:0;top:0;width:100%;height:4px;background:linear-gradient(90deg,#4ed9cd,#159e94)}
.about-role{display:inline-flex;margin:0 0 25px;padding:7px 12px;border-radius:999px;background:#dcf5f2;color:#107773;font-size:12px;font-weight:700}
.about-credential-summary .about-credential-card{border-style:solid;background:#f8fbfc;box-shadow:0 10px 30px #123c5d0b}
.about-credential-summary .about-credential-card:nth-child(2){background:#e3f4f2;border-color:#b9ddd9}
.about-credential-summary .about-credential-card:nth-child(3){background:#edf2f8;border-color:#ccdae7}
.about-qualification-card{background:#123d68;border:1px solid #28577f;box-shadow:0 18px 42px #0b315124}
.about-qualification-card>span{color:#6be1d7}
.about-qualification-card h3{color:#fff}
.about-qualification-card ul{color:#d4e2ed}
@media(max-width:600px){
  .about-page-copy{padding:27px 24px;border-radius:18px}
}

/* Use the site's standard first-paint entrance for the About portrait and copy. */
body.about-page.page-enter .about-page-portrait,
body.about-page.page-enter .about-page-copy{opacity:0;transform:translateY(18px) scale(.985)}
body.about-page.page-enter.page-enter-ready .about-page-portrait,
body.about-page.page-enter.page-enter-ready .about-page-copy{opacity:1;transform:translateY(0) scale(1);transition:opacity .68s ease,transform .82s cubic-bezier(.16,1,.3,1);transition-delay:.11s}


/* Carry the About page's color hierarchy through the remaining card groups. */
.about-value-card{overflow:hidden;border-style:solid}
.about-value-card::before{content:'';position:absolute;left:0;top:0;width:100%;height:4px;background:#4ed9cd}
.about-value-card:nth-child(1){background:#f8fbfc}
.about-value-card:nth-child(2){background:#e3f4f2;border-color:#b9ddd9}
.about-value-card:nth-child(2)::before{background:#22b9ad}
.about-value-card:nth-child(3){background:#edf2f8;border-color:#ccdae7}
.about-value-card:nth-child(3)::before{background:#2d729b}
.about-interest-card{border-style:solid;box-shadow:0 14px 34px #123c5d12}
.about-interest-card:nth-child(1){background:#123d68;border-color:#28577f}
.about-interest-card:nth-child(2){background:#174d76;border-color:#2b638c}
.about-interest-card:nth-child(3){background:#176b70;border-color:#2b8587}
.about-interest-card h3{color:#fff}
.about-interest-card p{color:#d4e2ed}
.about-interest-card>span{color:#6be1d7}

/* Give the homepage service cards the same controlled color rhythm. */
.service-card{overflow:hidden;border-style:solid}
.service-card::before{content:'';position:absolute;left:0;top:0;width:100%;height:4px;background:#4ed9cd}
.service-card:nth-child(1){background:#f8fbfc}
.service-card:nth-child(2){background:#e3f4f2;border-color:#b9ddd9}
.service-card:nth-child(2)::before{background:#22b9ad}
.service-card:nth-child(3){background:#123d68;border-color:#28577f;box-shadow:0 16px 36px #123c5d1c}
.service-card:nth-child(3)::before{background:#6be1d7}
.service-card:nth-child(3) h3{color:#fff}
.service-card:nth-child(3) p{color:#d4e2ed}
.service-card:nth-child(3) .card-top{color:#a8bfd3}
.service-card:nth-child(3) .service-symbol{color:#6be1d7}

/* Distinguish the three contact actions while keeping them easy to scan. */
.contact-page-card:nth-child(1){background:#edf2f8;border-color:#cbd9e6}
.contact-page-card:nth-child(2){background:#123d68;border-color:#28577f;box-shadow:0 14px 34px #123c5d1a}
.contact-page-card:nth-child(3){background:#e3f4f2;border-color:#b9ddd9}
.contact-page-card .contact-label{gap:11px}
.contact-page-card .contact-label b{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:#d9f3f0;color:#149d93;flex:0 0 34px}
.contact-page-card:nth-child(1) .contact-label b{background:#dce8f2;color:#2d729b}
.contact-page-card:nth-child(2) .contact-label{color:#b8ccdd}
.contact-page-card:nth-child(2) .contact-label b{background:#ffffff16;color:#6be1d7}
.contact-page-card:nth-child(2) strong{color:#fff}
.contact-page-card:nth-child(2):is(:where(.can-hover *):hover,.is-tapped),
.contact-page-card:nth-child(2):focus-visible{border-color:#6be1d7;box-shadow:0 18px 38px #123c5d2b}

/* Keep contact actions cohesive; color identifies them without competing with the content. */
.contact-page-card:nth-child(1),
.contact-page-card:nth-child(2),
.contact-page-card:nth-child(3){background:#f8fbfc;border-color:#cbdfe3;box-shadow:0 10px 28px #123c5d0d;overflow:hidden}
.contact-page-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:#2d729b}
.contact-page-card:nth-child(2)::before{background:#22b9ad}
.contact-page-card:nth-child(3)::before{background:#4b819f}
.contact-page-card:nth-child(1) .contact-label b{background:#e1ebf4;color:#2d729b}
.contact-page-card:nth-child(2) .contact-label,
.contact-page-card:nth-child(3) .contact-label{color:#5b6b78}
.contact-page-card:nth-child(2) .contact-label b{background:#dcf5f2;color:#159e94}
.contact-page-card:nth-child(3) .contact-label b{background:#e2edf3;color:#397896}
.contact-page-card:nth-child(2) strong{color:var(--navy)}
.contact-page-card:nth-child(1):is(:where(.can-hover *):hover,.is-tapped),
.contact-page-card:nth-child(1):focus-visible{border-color:#78a8c6}
.contact-page-card:nth-child(2):is(:where(.can-hover *):hover,.is-tapped),
.contact-page-card:nth-child(2):focus-visible{border-color:#66c9c1;box-shadow:0 14px 30px #123c5d16}
.contact-page-card:nth-child(3):is(:where(.can-hover *):hover,.is-tapped),
.contact-page-card:nth-child(3):focus-visible{border-color:#7aabc0}

/* Match the homepage's soft depth at the bottom of every navy page banner. */
.price-hero{position:relative;z-index:1;box-shadow:0 18px 24px -20px #03173380}

/* Use the same number-and-heading row in both About card groups. */
.about-value-card{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:20px;align-content:start;min-height:180px}
.about-value-card>span{grid-column:1;grid-row:1;padding-top:3px}
.about-value-card h3{grid-column:2;grid-row:1;margin:0 0 10px}
.about-value-card p{grid-column:2;grid-row:2}
@media(max-width:600px){
  .about-value-card{min-height:0;column-gap:16px}
}

/* Remove desktop separators as soon as the header switches to its menu layout. */
@media(max-width:1180px){
  .controls::before,
  .controls .button.small::before{display:none}
}

/* Align professional-background numbers with their headings. */
.about-credential-card{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:20px;align-content:start;min-height:0}
.about-credential-card>span{grid-column:1;grid-row:1;padding-top:3px}
.about-credential-card h3{grid-column:2;grid-row:1;margin:0 0 10px}
.about-credential-card>p,
.about-credential-card>ul{grid-column:2;grid-row:2}
@media(max-width:600px){
  .about-credential-card{column-gap:16px}
}

/* A focused booking conclusion for the Contact page. */
.booking-band{padding:58px 0;background:var(--navy);border-top:1px solid #ffffff14}
.booking-band .contact-heading>div{max-width:700px}
.booking-band .contact-intro{max-width:540px}
@media(max-width:600px){
  .booking-band{padding:48px 0}
}

/* Ambient circular artwork shared by every inner-page navy header. */
.price-hero{overflow:hidden;isolation:isolate}
.price-hero>.wrap{position:relative;z-index:2}
.price-hero::before,
.price-hero::after{content:'';position:absolute;z-index:1;border-radius:50%;pointer-events:none;will-change:transform,opacity}
.price-hero::before{width:430px;height:430px;right:-105px;top:-220px;border:1px solid #ffffff0d;box-shadow:0 0 0 82px #ffffff04,0 0 0 164px #ffffff025;animation:inner-header-orbit 13s ease-in-out infinite;animation-delay:var(--inner-orbit-phase,0s)}
.price-hero::after{width:235px;height:235px;right:24%;bottom:-185px;border:1px solid #6be1d71a;box-shadow:0 0 0 58px #6be1d708;animation:inner-header-ring 10s ease-in-out infinite;animation-delay:var(--inner-ring-phase,0s)}
@keyframes inner-header-orbit{
  0%,100%{transform:translate3d(0,0,0) scale(.97);opacity:.7}
  50%{transform:translate3d(-24px,18px,0) scale(1.04);opacity:1}
}
@keyframes inner-header-ring{
  0%,100%{transform:translate3d(0,0,0) scale(.96);opacity:.55}
  50%{transform:translate3d(18px,-12px,0) scale(1.06);opacity:.95}
}
@media(max-width:600px){
  .price-hero::before{width:320px;height:320px;right:-170px;top:-150px}
  .price-hero::after{width:180px;height:180px;right:8%;bottom:-145px}
}


/* A calmer, card-based About preview on small screens. */
.about>div.about-preview{max-width:none;padding-left:0;border-left:0}
.about-preview-card{position:relative;padding:34px 38px 32px;overflow:hidden;background:#f8fbfc;border:1px solid #cbdfe3;border-radius:20px;box-shadow:0 16px 38px #123c5d10}
.about-preview-card::before{content:'';position:absolute;left:0;top:0;width:100%;height:4px;background:linear-gradient(90deg,#4ed9cd,#159e94)}
.about-preview-card .signature{margin-top:22px}
.about-preview-card .signature::before{content:none}
.about-preview-card .muted{display:block;margin-top:4px}
.about-preview .about-more{margin:20px 0 0 3px}
.about{grid-template-columns:1fr 1.15fr;align-items:start;gap:48px;padding-block:64px}
.about>div:first-child{padding-top:34px}
.about>div:first-child h2{max-width:440px;margin-bottom:0}
.about>div:first-child::after{content:none}
.about-preview-card .about-more{display:table;margin:25px 0 0}
@media(max-width:820px){
  .about{grid-template-columns:1fr;align-items:start}
  .about>div:first-child{padding-top:0}
}
@media(max-width:600px){
  .about{gap:17px}
  .about h2{max-width:300px;font-size:30px;line-height:1.18}
  .about-preview-card{padding:25px 23px 23px;border-radius:18px;box-shadow:0 14px 34px #123c5d10}
  .about-preview-card .signature{margin-top:19px;font-size:18px}
  .about-preview-card .muted{margin-top:3px}
  .about-preview-card .about-more{margin:20px 0 0}
}

/* Keep secondary section actions in the same left-aligned reading flow. */
.section-head{display:block}
.section-head h2{margin-bottom:12px}
.section-head .muted{margin:0}
.services-link{display:table;margin-top:18px}
.reviews-head{display:block;align-items:initial}
.reviews-head>div>p:last-of-type{max-width:650px;margin:0;color:#b9cadb}
.reviews-head .text-link{display:inline-block;margin:20px 0 0}
.text-link:is(:where(.can-hover *):hover,.is-tapped),.text-link:focus-visible{color:#0c6e6c;border-bottom-color:currentColor}
.reviews-head .text-link:is(:where(.can-hover *):hover,.is-tapped),.reviews-head .text-link:focus-visible{color:#a5f2ec;border-bottom-color:currentColor}

/* One smooth interaction language for links and buttons sitewide. */
.text-link,.hero-link{display:inline-block;transition:color .32s ease,border-color .32s ease}
.hero-link:is(:where(.can-hover *):hover,.is-tapped),.hero-link:focus-visible{color:#fff;border-bottom-color:#86ddd6}
.button{translate:0 0;transition:background-color .28s ease,color .28s ease,box-shadow .34s ease,translate .34s cubic-bezier(.2,.65,.3,1)}
.button:is(:where(.can-hover *):hover,.is-tapped),.button:focus-visible{transform:none;translate:0 -3px;box-shadow:0 12px 28px #03214b2e}
.button:where(.can-hover *):active{translate:0 -1px;box-shadow:0 6px 16px #03214b24}
.service-card .card-arrow,.content-card .content-arrow,.contact-page-arrow{transition:color .26s ease,translate .34s cubic-bezier(.2,.65,.3,1),opacity .26s ease}
.service-card:is(:where(.can-hover *):hover,.is-tapped) .card-arrow,.service-card:focus-visible .card-arrow,.content-card:is(:where(.can-hover *):hover,.is-tapped) .content-arrow,.content-card:focus-visible .content-arrow,.contact-page-card:is(:where(.can-hover *):hover,.is-tapped) .contact-page-arrow,.contact-page-card:focus-visible .contact-page-arrow{translate:3px -3px;color:#159e94}
.service-card:nth-child(3):is(:where(.can-hover *):hover,.is-tapped) .card-arrow,.service-card:nth-child(3):focus-visible .card-arrow{color:#6be1d7}

/* Give the doctor a little more presence in the mobile hero. */
@media(max-width:600px){
  .portrait{height:395px}
  .portrait img{width:min(390px,110vw);max-height:415px;transform:none}
  .portrait-disc{width:335px;height:335px;bottom:-20px}
  .doctor-label{bottom:28px}
}

/* Consent controls: optional third-party content stays blocked until accepted. */
.cookie-consent{position:fixed;z-index:60;left:50%;bottom:22px;width:min(760px,calc(100% - 32px));transform:translateX(-50%);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;padding:22px 24px;border:1px solid #c8dce0;border-radius:18px;background:#f9fcfc;color:var(--ink);box-shadow:0 20px 60px #041b3b38}
.cookie-consent[hidden],.map-consent[hidden]{display:none}
.cookie-consent strong{display:block;margin-bottom:5px;font-size:17px}
.cookie-consent p{max-width:520px;margin:0;color:#5b7082;font-size:12px;line-height:1.65}
.cookie-actions{display:flex;gap:10px;align-items:center}
.cookie-actions button,.map-consent button{min-height:42px;padding:10px 16px;border:1px solid #b8d1d3;border-radius:999px;background:#fff;color:#155e63;font-weight:700;font-size:12px;transition:background-color .26s ease,border-color .26s ease,color .26s ease,box-shadow .26s ease}
.cookie-actions button:is(:where(.can-hover *):hover,.is-tapped),.cookie-actions button:focus-visible,.map-consent button:is(:where(.can-hover *):hover,.is-tapped),.map-consent button:focus-visible{background:#e4f7f5;border-color:#65cfc6;color:#084c51;box-shadow:0 7px 18px #123c5d14}
.cookie-actions .cookie-accept{background:var(--aqua);border-color:var(--aqua);color:#073e4b}
.cookie-actions .cookie-accept:is(:where(.can-hover *):hover,.is-tapped),.cookie-actions .cookie-accept:focus-visible{background:#71e8dd;border-color:#71e8dd}
.cookie-settings{justify-self:center;display:inline-flex;align-items:center;gap:7px;border:0;background:none;color:#a9bfd4;padding:3px 0;font-size:11px;transition:color .26s ease}
.cookie-settings svg{width:16px;height:16px;flex:0 0 16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cookie-settings svg circle{fill:currentColor;stroke:none}
.cookie-settings:is(:where(.can-hover *):hover,.is-tapped),.cookie-settings:focus-visible{color:#73e1d6}
.map-consent{position:absolute;z-index:2;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:36px;text-align:center;background:linear-gradient(145deg,#e5f1f1,#d7e7eb);color:var(--ink)}
.map-consent strong{font-size:20px}
.map-consent p{max-width:330px;margin:8px 0 20px;color:#667d8c;font-size:13px}
@media(max-width:700px){
  .cookie-consent{grid-template-columns:1fr;gap:16px;bottom:12px;padding:19px;border-radius:15px}
  .cookie-actions{display:grid;grid-template-columns:1fr 1fr}
  .cookie-actions button{width:100%;padding-inline:12px}
  .cookie-settings{order:2}
  .footer-social{order:3}
}
@media(max-width:390px){.cookie-actions{grid-template-columns:1fr}.cookie-consent p{font-size:11px}}

/* Keep the homepage hero balanced across viewport widths and heights. */
@media(min-width:901px){
  .hero{min-height:max(680px,calc(100svh / var(--page-zoom,1) - 89px))}
  .hero-copy{padding-block:clamp(44px,calc(6.5svh / var(--page-zoom,1)),64px) clamp(52px,calc(8svh / var(--page-zoom,1)),78px)}
  .portrait img{max-height:min(640px,calc(100svh / var(--page-zoom,1) - 160px))}
}
/* Tall screens scale the portrait up 1.08 from its bottom edge, so leave that much headroom under the header. */
@media(min-width:1181px) and (min-height:820px){
  .portrait img{max-height:min(640px,calc(100svh / var(--page-zoom,1) - 220px))}
}
@media(min-width:901px) and (max-width:1180px){
  .hero{min-height:max(650px,calc(100svh - 87px))}
  .portrait img{max-height:min(600px,calc(100svh - 155px))}
}
/* Phones and tablets size the hero from --vh-stable (app.js): 1svh until the width changes. The Google iOS app resizes its
   web view as its toolbars slide, so svh itself changed mid-scroll and the portrait grew and shrank. */
:root{--vh-stable:1svh}
/* 821–900px used to squeeze the hero into two columns; it now stacks like the 601–900px tablet layout. */
@media(min-width:601px) and (max-width:900px){
  .hero-copy{padding:clamp(38px,calc(5 * var(--vh-stable)),50px) 0 24px}
  .hero .eyebrow{margin-bottom:17px}
  .hero h1{margin-bottom:18px}
  .hero-intro{margin-bottom:24px;line-height:1.75}
  .hero-note,.hero .nzok-badge{margin-top:24px}
  /* As on desktop and phones, the photo is about 1.25 times the disc's height (it stands 34px taller than its box),
     so his head rises above the disc instead of sitting small inside it. The orbit's top drawings rise about 1.18
     disc widths above the disc's bottom, so the margin keeps them clear of the buttons above. */
  .portrait{--disc:clamp(315px,52vw,400px);--ph:calc(var(--disc) * 1.25 - 34px);height:var(--ph);margin-top:max(48px,calc(var(--disc) * 1.18 - var(--ph)))}
  .portrait img{width:auto;height:calc(100% + 34px);max-width:90vw;max-height:none}
  .portrait-disc{width:var(--disc);height:var(--disc)}
}
@media(max-width:600px){
  .hero-copy{padding:clamp(26px,calc(4 * var(--vh-stable)),34px) 0 12px}
  .hero .eyebrow{margin-bottom:14px}
  .hero h1{font-size:clamp(34px,9vw,38px);line-height:1.16;margin-bottom:16px}
  .hero-intro{margin-bottom:20px;font-size:13.5px;line-height:1.68}
  .hero-actions{gap:clamp(16px,5vw,26px)}
  .hero-actions .button{padding:13px 18px}
  .hero-note,.hero .nzok-badge{margin-top:30px}
  /* The orbit's top drawings (floating included) rise about 1.2 disc widths above the disc's bottom, which sits 24px
     below the portrait. The disc is capped so they stay clear of the buttons when a short screen shrinks the portrait. */
  .portrait{--ph:clamp(330px,calc(44 * var(--vh-stable)),410px);--gap:70px;height:var(--ph);margin-top:var(--gap)}
  .portrait img{width:auto;height:calc(100% + 48px);max-width:100vw;max-height:none;transform:none}
  .portrait-disc{--disc:min(clamp(300px,86vw,380px),calc((var(--gap) + var(--ph) + 26px) / 1.2));width:var(--disc);height:var(--disc);bottom:-24px}
  .doctor-label{bottom:16px}
  .hero-bottom{padding-block:12px}
}
@media(max-width:600px) and (max-height:740px){
  .hero-copy{padding-top:22px}
  .hero .eyebrow{margin-bottom:11px}
  .hero h1{font-size:33px;margin-bottom:13px}
  .hero-intro{margin-bottom:16px;font-size:13px}
  .hero-note,.hero .nzok-badge{margin-top:24px}
  .portrait{--ph:285px;--gap:58px}
}

/* Content patched in from the CMS after first paint fades in instead of popping. */
.cms-fade-in{animation:cms-fade-in .5s ease both}@keyframes cms-fade-in{from{opacity:0}to{opacity:1}}
/* Home clinic section: storefront photo in place of the placeholder. */
.clinic-photo{margin:0;overflow:hidden;border:1px solid #d1e0e3;border-radius:18px;box-shadow:0 18px 40px -18px rgba(11,50,103,.28);background:#dfeaec;aspect-ratio:1400/1029}
.clinic-photo img{display:block;width:100%;height:100%;object-fit:cover}
.clinic-media{position:relative}
@media(max-width:900px){.clinic-media{order:2}}
.clinic-photo{position:relative}
.clinic-photo::before,.clinic-photo::after{content:'';position:absolute;pointer-events:none;z-index:1}
/* Glass sheen: a wide, slowly drifting wash of cool and warm light. */
.clinic-photo::before{inset:0;background:linear-gradient(125deg,rgba(78,217,205,.22) 0%,transparent 35%,rgba(255,236,210,.18) 65%,rgba(11,50,103,.18) 100%);background-size:220% 220%;mix-blend-mode:soft-light;animation:clinic-sheen 12s ease-in-out infinite alternate}
@keyframes clinic-sheen{from{background-position:0% 0%}to{background-position:100% 100%}}
/* Moving reflection: bright core with iridescent aqua and warm fringes. */
.clinic-photo::after{inset:0;background:linear-gradient(110deg,transparent 38%,rgba(255,255,255,.08) 43%,rgba(255,255,255,.32) 48%,rgba(255,255,255,.44) 50%,rgba(255,255,255,.19) 53%,rgba(255,255,255,.05) 57%,transparent 62%) 100% 0/300% 100% no-repeat;mix-blend-mode:soft-light;animation:clinic-shine 6s cubic-bezier(.45,0,.55,1) infinite;transition:opacity .6s ease .5s}
@keyframes clinic-shine{0%{background-position:100% 0}75%,100%{background-position:0% 0}}

.clinic-photo img{transform:translateZ(0);backface-visibility:hidden;animation:clinic-zoom 18s cubic-bezier(.37,0,.63,1) infinite alternate;will-change:transform}
@keyframes clinic-zoom{from{transform:translateZ(0) scale(1)}to{transform:translateZ(0) scale(1.07)}}

/* Global cursor-following ring (fine pointers only; created in app.js). */
.cursor-ring{position:fixed;top:0;left:0;width:36px;height:36px;border:1.5px solid #fff;border-radius:50%;mix-blend-mode:difference;pointer-events:none;z-index:2147483000;opacity:0;transition:opacity .25s ease;will-change:transform}
.cursor-ring.is-visible{opacity:.72}
.cursor-dot{position:fixed;top:-3px;left:-3px;width:6px;height:6px;background:#fff;border-radius:50%;mix-blend-mode:difference;pointer-events:none;z-index:2147483001;opacity:0;transition:opacity .25s ease;will-change:transform}
.cursor-dot.is-visible{opacity:1}
html.cursor-dot-on,html.cursor-dot-on *{cursor:none!important}
/* Hover tilt: the card leans toward the cursor and the reflection strip tracks it. */
/* Tilt easing is done in app.js (per-frame --rx/--ry), so the transforms here have no transition. */
.clinic-photo{transform:perspective(1000px) rotateX(calc(var(--rx,0)*1deg)) rotateY(calc(var(--ry,0)*1deg));transition:box-shadow .6s ease}
.clinic-photo{isolation:isolate}
/* Hover reflection: strip angle and position are driven from app.js (--ga, --bp) and eased there, so it glides instead of snapping. */
.clinic-glare{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(var(--ga,110deg),transparent 38%,rgba(255,255,255,.08) 43%,rgba(255,255,255,.32) 48%,rgba(255,255,255,.44) 50%,rgba(255,255,255,.19) 53%,rgba(255,255,255,.05) 57%,transparent 62%) var(--bp,100%) 0/300% 100% no-repeat;mix-blend-mode:soft-light;opacity:0;transition:opacity .9s ease}
.clinic-photo.is-tilting .clinic-glare{opacity:1;transition:none}
.clinic-photo.is-tilting::after{opacity:0;animation:none;transition:none}

/* Clinic photo brand grade: lifted colour, navy base gradient, turquoise corner glow, soft vignette, address tag. */
.clinic-photo img{filter:contrast(1.06) saturate(1.08)}
.clinic-tint{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top,rgba(9,41,89,.5) 0%,rgba(9,41,89,.18) 28%,transparent 55%),radial-gradient(ellipse 60% 55% at 100% 0%,rgba(78,217,205,.16),transparent 70%),radial-gradient(ellipse 85% 85% at 50% 45%,transparent 60%,rgba(9,41,89,.22) 100%)}
.clinic p.clinic-tag{position:absolute;left:20px;bottom:18px;z-index:3;display:flex;align-items:center;gap:8px;margin:0;padding:8px 14px 8px 11px;border-radius:999px;background:rgba(9,41,89,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.16);color:#fff;font-size:13px;font-weight:650;letter-spacing:.01em;line-height:1.2;text-shadow:0 1px 2px rgba(0,0,0,.25)}
.clinic-tag svg{width:16px;height:16px;flex:none;color:var(--aqua)}
/* The address pill lets the pointer through to the photo, so the photo's tilt and glare keep following the cursor
   over it instead of resetting. */
.clinic p.clinic-tag{pointer-events:none}
@media(max-width:600px){.clinic p.clinic-tag{left:12px;bottom:12px;font-size:12px;padding:7px 12px 7px 9px}}
/* Keep button text colour on hover inside menus (overrides the generic nav link hover). */
nav a.button:is(:where(.can-hover *):hover,.is-tapped),nav a.button:focus-visible,nav a.button.active{color:#073e4b}
/* Service cards: match the 18px rounding used on the gallery and clinic photo cards. */
.service-card{border-radius:18px}
/* Safari drops overflow+border-radius clipping for composited children (the zooming image and blended layers under a
   3D transform), so the card is clipped with a mask instead. A mask also clips box-shadow, so the shadow is drawn by
   the wrapper's ::before, which tilts in step via the inherited --rx/--ry. */
.clinic-photo,.clinic-photo.is-tilting{box-shadow:none;-webkit-mask-image:-webkit-radial-gradient(#fff,#000);mask-image:radial-gradient(#fff,#000)}
.clinic-media{isolation:isolate}
/* Shadow caster: tilts exactly like the card, so no flat rectangle peeks out from behind it. */
.clinic-media::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:18px;pointer-events:none;transform:perspective(1000px) rotateX(calc(var(--rx,0)*1deg)) rotateY(calc(var(--ry,0)*1deg));box-shadow:calc(var(--ry,0)*-1.6px) calc(18px + var(--rx,0)*1.6px) 40px -18px rgba(11,50,103,.3)}
/* Card outline drawn ON TOP, tilting in step. In Safari the zooming image is not clipped to the padding box, so it
   covers the card's own border and the mask leaves a hard, aliased edge; this ring restores the soft light rim. */
.clinic-photo,.clinic-photo.is-tilting{border-color:transparent}
.clinic-media::after{content:'';position:absolute;inset:0;z-index:2;border-radius:18px;border:1px solid rgba(209,224,227,.9);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);pointer-events:none;transform:perspective(1000px) rotateX(calc(var(--rx,0)*1deg)) rotateY(calc(var(--ry,0)*1deg))}
/* Middle service card: soft turquoise with a deeper turquoise strip (light → turquoise → navy across the row). */
.service-card:nth-child(2){background:#6fe0d6;border-color:#5ccfc5;box-shadow:0 16px 36px #0e6b6414}
.service-card:nth-child(2)::before{background:#1fa89d}
.service-card:nth-child(2) h3{color:#073e4b}
.service-card:nth-child(2) p{color:#0d4f5b}
.service-card:nth-child(2) .card-top{color:#1f5a73}
.service-card:nth-child(2) .service-symbol,.service-card:nth-child(2) .card-arrow{color:#123d68}
.service-card:nth-child(2):is(:where(.can-hover *):hover,.is-tapped),.service-card:nth-child(2):focus-visible{border-color:#1fa89d}
.service-card:nth-child(2):is(:where(.can-hover *):hover,.is-tapped) .card-arrow,.service-card:nth-child(2):focus-visible .card-arrow{color:#123d68}
/* Foldables (e.g. iPhone Fold inner screen): split the hero along the hinge when the browser exposes viewport segments. */
@media(horizontal-viewport-segments:2){
  .hero-grid{grid-template-columns:calc(env(viewport-segment-right 0 0) - (100vw - 100%)/2) 1fr;column-gap:calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0) + 28px)}
}


/* ── Mobile menu (formerly staggered-menu.css). Kept in this file so Safari never paints the header
   between two stylesheets on a refresh, which flashed the burger as a grey box and nudged the logo. ── */
/* Menu declarations ported from nebesno css/nav.css and css/system.css. */
  .burger {
    display: none;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    background: none; border: none;
    
    min-height: 44px;
    padding: 8px 10px; cursor: pointer;
    color: oklch(33% 0.024 276);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1;
    position: relative;
    border-radius: 8px;
    transition: background .2s ease, color .2s ease, transform .15s ease;
    
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
  }
  .burger:where(.can-hover *):hover {
    background: oklch(53.6% 0.145 276 / 0.08);
    color: var(--accent-solid);
  }
  .burger:where(.can-hover *):active { transform: scale(0.92); }
  .burger.open {
    background: oklch(53.6% 0.145 276 / 0.1);
    color: var(--accent-solid);
  }
  
  .sm-prelayers, .sm-backdrop { display: none; }

  
  
  .sm-toggle-textWrap,
  .sm-icon { pointer-events: none; }

  .sm-toggle-textWrap { display: none; }
  .sm-toggle-textInner {
    display: flex;
    flex-direction: column;
    line-height: 1;
    transition: none;
  }
  .sm-toggle-line { display: block; height: 1em; line-height: 1; }
  .sm-icon {
    position: relative;
    width: 1.7em; height: 1.15em;
    flex: 0 0 1.7em;
  }
  .sm-icon-line {
    position: absolute;
    left: 0;
    width: 100%; height: 3px;
    background: currentColor;
    border-radius: 2px;
    transition: transform .35s cubic-bezier(0.16, 1, 0.3, 1), opacity .2s ease, top .35s cubic-bezier(0.16, 1, 0.3, 1), bottom .35s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .sm-icon-line-1 { top: 0; }
  .sm-icon-line-2 { top: 50%; left: auto; right: 0; width: 65%; transform: translateY(-50%); }
  .sm-icon-line-3 { bottom: 0; }

  .burger.open .sm-icon-line-1 { top: 50%; transform: translateY(-50%) rotate(45deg); }
  .burger.open .sm-icon-line-2 { opacity: 0; }
  .burger.open .sm-icon-line-3 { bottom: 50%; transform: translateY(50%) rotate(-45deg); }

@keyframes sm-row-in{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:1180px){
:root{--sm-w:min(84vw,380px);--sm-h:calc(100dvh - var(--sm-top,79px));--accent-solid:#287d8a;--safe-r:env(safe-area-inset-right,0px);--safe-b:env(safe-area-inset-bottom,0px)}
  .sm-prelayers {
    display: block;
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  .sm-prelayer {
    position: fixed;
    top: var(--sm-top, 68px);
    right: 0;
    width: var(--sm-w);
    height: var(--sm-h);
    z-index: 190;
    
    transform: translateX(calc(100% + 80px));
    
    will-change: transform;
    visibility: hidden;
    transition: transform .22s cubic-bezier(0.4, 0, 1, 1),
                visibility 0s linear .22s;
  }
  .sm-prelayer:nth-child(1) { background: oklch(70% 0.084 276); }
  .sm-prelayer:nth-child(2) { background: var(--accent-solid); }
  html.sm-open .sm-prelayer {
    transform: translateX(0);
    visibility: visible;
    
    transition: transform .40s cubic-bezier(0.32, 0.08, 0.24, 1) calc(var(--sm-i, 0) * 38ms),
                visibility 0s;
  }

  
  .sm-backdrop {
    display: block;
    position: fixed;
    top: var(--sm-top, 68px);
    left: 0;
    right: 0;
    height: var(--sm-h);
    background: oklch(20% 0.02 276 / 0.42);
    
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 180;
    
    touch-action: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .20s ease, visibility 0s linear .20s;
  }
  html.sm-open .sm-backdrop {
    opacity: 1;
    visibility: visible;
    transition: opacity .30s ease, visibility 0s;
  }

  
  html.sm-open {
    touch-action: none;
    overscroll-behavior: none;
  }

  
  .drawer {
    display: flex;
    flex-direction: column;
    
    align-items: stretch;
    gap: 0;
    
    position: fixed;
    top: var(--sm-top, 68px);
    left: auto;
    right: 0;
    width: var(--sm-w);
    height: var(--sm-h);
    background: #ffffff;
    
    border-radius: 0;
    box-shadow: -18px 0 60px oklch(0% 0 0 / 0.18), -4px 0 16px oklch(0% 0 0 / 0.07);
    
    clip-path: inset(0 -100px -100px -100px);
    z-index: 200;
    
    padding: 0 var(--safe-r) calc(24px + var(--safe-b)) 0;
    
    overflow: hidden;
    pointer-events: none;
    
    transform: translateX(calc(100% + 80px));
    will-change: transform;
    visibility: hidden;
    
    transition: transform .22s cubic-bezier(0.4, 0, 1, 1),
                visibility 0s linear .22s;
  }
  .drawer.open {
    pointer-events: auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(0);
    visibility: visible;
    
    transition: transform .44s cubic-bezier(0.32, 0.08, 0.24, 1) .07s,
                visibility 0s;
  }

  
  /* Every row fades in on open, the links, the language toggle and the booking button alike: a soft
     0.6s ease with a slight rise and grow. A short, sharp fade made the rows snap in. The stagger is
     kept tight so the last row, the booking button, still starts early and lands with the rest. */
  .drawer.open > * {
    animation: sm-row-in .6s cubic-bezier(0.35, 0, 0.25, 1) both;
    
    animation-delay: calc(170ms + var(--sm-i, 0) * 12ms);
  }
.burger{display:flex}.burger .sm-icon{display:block}
body.menu-open{overflow:visible}.backdrop{display:none!important}
.drawer{padding:20px 20px calc(24px + var(--safe-b));bottom:auto;justify-content:flex-start}
.drawer-links{display:contents}.drawer>a{padding:17px 16px;font-size:16px;font-weight:550;border-radius:12px}.drawer>a:is(:where(.can-hover *):hover,.is-tapped){background:#edf6f7}
/* The page you are on, as in the desktop nav: teal text, here on the same light tint the links show when tapped. */
.drawer>a.active{background:#edf6f7;color:#159e94}
.drawer-bottom{margin-top:auto;padding:24px 16px 0;gap:20px}
/* Accent line along the top of the sheet, as on digitalsky.dk. Declared on the sheet itself rather than
   gated on .open, so it slides in and out with the sheet instead of blinking away before it has left. */
.drawer::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,rgba(40,125,138,.75) 0%,transparent 100%);pointer-events:none}
.sm-prelayer:nth-child(1){background:#8cc2c9}.sm-prelayer:nth-child(2){background:#287d8a}
.controls>.language{display:none}.header .brand{flex-shrink:1;min-width:0}
.burger{flex-shrink:0;color:#287d8a;font-size:14px;padding:8px 10px}
.menu-open .drawer{transition:transform .44s cubic-bezier(.32,.08,.24,1) .07s,visibility 0s}
}
html.sm-resizing .drawer,html.sm-resizing .drawer *,html.sm-resizing .sm-prelayer,html.sm-resizing .sm-backdrop{transition:none!important}

@media(max-width:1180px){.drawer{z-index:200}.menu-open .drawer{box-shadow:-18px 0 60px #0000002e,-4px 0 16px #00000012}.burger{background:none}.burger.open{background:#287d8a18}}

/* Safari could flash the parked sheet (a white rectangle) or play its slide while the page was still
   loading. Keep the sheet and its layers out of rendering until staggered-menu.js marks the page ready. */
html:not(.sm-ready) .drawer,html:not(.sm-ready) .sm-prelayers,html:not(.sm-ready) .sm-backdrop{display:none!important}

/* iPhone Safari faded the burger in from its built-in button look (grey box, black lines) on the first
   frame of every load. Keep the burger's transitions off until staggered-menu.js marks the page ready. */
html:not(.sm-ready) .burger,html:not(.sm-ready) .burger *{transition:none!important}
.nzok-badge{display:inline-flex;align-items:center;gap:13px;margin-top:26px;padding:7px 18px 7px 7px;border-radius:999px;background:#fff;border:1px solid #cbdfe3;box-shadow:0 10px 26px #123c5d0f;line-height:1.3}
.nzok-logo{display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1px #e3ebef}
.nzok-logo img{display:block;width:30px;height:auto}
.nzok-text{display:flex;flex-direction:column;gap:2px}
.nzok-text strong{font-size:14px;font-weight:750;color:var(--ink)}
.nzok-text span{font-size:11px;color:#718493}
.hero .nzok-badge{background:#ffffff0d;border-color:#ffffff1f;box-shadow:none}
.hero .nzok-text strong{color:#fff}
.hero .nzok-text span{color:#afc6de}
.hero .nzok-logo{box-shadow:none}
@media(max-width:600px){.nzok-badge{gap:11px;padding-right:15px}.nzok-logo{width:40px;height:40px}.nzok-logo img{width:26px}.nzok-text strong{font-size:13px}.nzok-text span{font-size:10px}}
body.page-enter .hero .nzok-badge,body.about-page.page-enter .about-page-copy .nzok-badge:not(.scroll-reveal){opacity:0;transform:translateY(18px)}
body.page-enter.page-enter-ready .hero .nzok-badge,body.about-page.page-enter.page-enter-ready .about-page-copy .nzok-badge:not(.scroll-reveal){opacity:1;transform:translateY(0);transition:opacity .68s ease,transform .82s cubic-bezier(.16,1,.3,1)}
body.page-enter.page-enter-ready .hero .nzok-badge{transition-delay:.46s}
body.about-page.page-enter.page-enter-ready .about-page-copy .nzok-badge:not(.scroll-reveal){transition-delay:.42s}

/* Developer credit beneath the footer row. */
footer .footer>.footer-credit{grid-column:1/-1;justify-self:center;text-align:center;font-size:10px;letter-spacing:.04em;color:#6f89a6;margin-top:-6px}
@media(max-width:600px){footer .footer>.footer-credit{order:4;margin-top:2px}}

/* Opening hours: a slim full-width band under the contact cards and the map. */
.contact-hours{position:relative;display:flex;align-items:center;gap:28px;margin-top:28px;padding:20px 24px 20px 25px;border:1px solid #cbdfe3;border-radius:14px;background:#f8fbfc;box-shadow:0 10px 28px #123c5d0d;overflow:hidden}
.contact-hours::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:#22b9ad}
.contact-hours .contact-label{flex:0 0 auto;gap:11px;color:#5b6b78;font-size:12px}
.contact-hours .contact-label b{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:#dcf5f2;color:#159e94;flex:0 0 34px}
.contact-hours-list{display:flex;flex:1;margin:0;justify-content:flex-end}
.contact-hours-list>div{padding:0 28px;border-left:1px solid #d6e4e8}
.contact-hours-list>div:last-child{padding-right:4px}
.contact-hours-list dt{color:#5b6b78;font-size:12px}
.contact-hours-list dd{margin:4px 0 0;color:var(--navy);font-size:15px;font-weight:700}
body.contact-page.page-enter .contact-hours{opacity:0;transform:translateY(18px)}
body.contact-page.page-enter.page-enter-ready .contact-hours{opacity:1;transform:translateY(0);transition:opacity .62s ease,transform .78s cubic-bezier(.16,1,.3,1);transition-delay:.7s}
@media(max-width:600px){
  .contact-hours{flex-direction:column;align-items:stretch;gap:16px;margin-top:22px;padding:18px 18px 18px 19px}
  .contact-hours-list{justify-content:flex-start}
  .contact-hours-list>div{flex:1;padding:0 0 0 16px}
  .contact-hours-list>div:first-child{padding-left:0;border-left:0}
}

/* Keep the scroll reveal on the contact cards; their own hover transition otherwise replaces it. */
.contact-card.scroll-reveal{transition:opacity .7s ease var(--reveal-delay,0ms),translate .7s cubic-bezier(.2,.65,.3,1) var(--reveal-delay,0ms),transform .25s cubic-bezier(.2,.65,.3,1),background .25s ease,border-color .25s ease,box-shadow .25s ease}
/* Prices rows for the service card the visitor tapped on the home page: a soft aqua wash that fades in and out. */
body[data-flash-service=prevention] tr[data-service=prevention] td,body[data-flash-service=treatment] tr[data-service=treatment] td,body[data-flash-service=aesthetic] tr[data-service=aesthetic] td{animation:price-row-flash 2.4s ease-in-out .35s both}
@keyframes price-row-flash{0%,100%{background:transparent}30%,65%{background:#4ed9cd2e}}
/* Gallery lightbox: same dim and blur as the mobile menu backdrop (.sm-backdrop). */
.gallery-photo{cursor:pointer}
.gallery-photo:focus-visible{outline:2px solid #24b8ad;outline-offset:3px}
.lightbox{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:72px 20px 28px;background:oklch(20% 0.02 276 / 0.42);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);touch-action:none;opacity:0;visibility:hidden;transition:opacity .45s ease .15s,visibility 0s linear .65s}
.lightbox.is-open{opacity:1;visibility:visible;transition:opacity .35s ease,visibility 0s}
.lightbox-figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:16px;max-width:100%}
.lightbox-figure img{display:block;width:auto;height:auto;max-width:min(100%,1100px);max-height:calc(100vh / var(--page-zoom,1) - 170px);max-height:calc(100dvh / var(--page-zoom,1) - 170px);border-radius:18px;box-shadow:0 24px 60px #03173359;transform-origin:center;will-change:transform,opacity}
.lightbox-figure figcaption{max-width:60ch;color:#fff;font-size:15px;line-height:1.45;text-align:center;text-shadow:0 1px 10px #0317338c;opacity:0;transition:opacity .3s ease}
.lightbox.is-open .lightbox-figure figcaption{opacity:1;transition:opacity .5s ease .25s}
.lightbox-figure figcaption:empty{display:none}
/* Keep the lightbox and its caption on their own layers for good, with fixed text smoothing. Otherwise the browser
   redraws the caption differently once the fade ends, and the text visibly dims or shifts colour. */
.lightbox{will-change:opacity}
.lightbox-figure figcaption{will-change:opacity;transform:translateZ(0);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.lightbox-close{position:absolute;top:max(18px,env(safe-area-inset-top));right:18px;display:grid;place-items:center;width:46px;height:46px;padding:0;border:1px solid #ffffff4d;border-radius:50%;background:#ffffff1f;color:#fff;font:300 30px/1 inherit;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.lightbox-close svg{width:22px;height:22px;transition:transform .42s cubic-bezier(.45,0,.25,1)}
/* Hover brightens the button and turns the × a quarter; closing (any way) lights it up and spins the × as the lightbox fades. */
.lightbox-close{transition:background .35s ease-in-out,border-color .35s ease-in-out,box-shadow .35s ease-in-out}
.can-hover .lightbox-close:hover{background:#ffffff3d;border-color:#ffffffa6;box-shadow:0 0 18px #ffffff33}
.can-hover .lightbox-close:hover svg{transform:rotate(90deg)}
.lightbox-close.is-closing{background:#ffffff59;border-color:#fff;box-shadow:0 0 22px #ffffff4d}
.lightbox-close.is-closing svg,.can-hover .lightbox-close.is-closing:hover svg{transform:rotate(180deg)}
.lightbox-close:focus-visible{outline:2px solid #fff;outline-offset:3px}
/* Over a photo (in the grid or the lightbox) the difference-blended ring turns grey, and blend modes cannot animate,
   so a second circle (.cursor-halo) cross-fades in instead: a frosted navy disc with a white edge and soft glow.
   Over grid photos it also shows a "+" (the photo opens in the lightbox). */
.cursor-ring{transition:opacity .4s ease-in-out}
.cursor-ring.on-photo.is-visible{opacity:0}
.cursor-halo{position:fixed;top:0;left:0;width:36px;height:36px;border:1.5px solid #fff;border-radius:50%;background:#0b326773;box-shadow:0 0 0 1px #0b32678c,0 0 16px 3px #ffffff80;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);pointer-events:none;z-index:2147483000;opacity:0;transition:opacity .4s ease-in-out;will-change:transform}
.cursor-halo.on-photo.is-visible{opacity:1}
.cursor-halo::before,.cursor-halo::after{content:"";position:absolute;top:50%;left:50%;width:14px;height:1.5px;margin:-.75px 0 0 -7px;background:#fff;border-radius:1px;box-shadow:0 0 4px #0b326799;opacity:0;transform:scale(.4);transition:opacity .35s ease-in-out,transform .35s ease-in-out}
.cursor-halo::after{transform:rotate(90deg) scale(.4)}
.cursor-halo.is-view::before{opacity:1;transform:scale(1)}
.cursor-halo.is-view::after{opacity:1;transform:rotate(90deg) scale(1)}
.cursor-dot{transition:opacity .35s ease-in-out}
/* The dot is difference-blended too and greys out over the halo, so over photos it hands over to a solid white
   dot inside the halo, which in turn gives way to the "+" over grid photos. */
.cursor-dot.on-photo.is-visible{opacity:0}
.cursor-halo i{position:absolute;top:50%;left:50%;width:6px;height:6px;margin:-3px 0 0 -3px;background:#fff;border-radius:50%;box-shadow:0 0 4px #0b3267b3;transition:opacity .35s ease-in-out}
.cursor-halo.is-view i,.cursor-halo.is-close i{opacity:0}
/* Inside the open lightbox a click anywhere closes it, so the halo's lines turn into an "x"; from a grid photo's
   "+" that is a 45° turn. */
.cursor-halo.is-close::before{opacity:1;transform:rotate(45deg) scale(1)}
.cursor-halo.is-close::after{opacity:1;transform:rotate(135deg) scale(1)}
/* Gallery photos fade in as they scroll into view: a soft rise from slightly blurred to sharp. The card's own
   transform/shadow transition used to replace the reveal's, so they popped in; this keeps both. Photos in the
   same row start one after another. */
.gallery-card.scroll-reveal{filter:blur(6px);transition:opacity .6s ease-in-out var(--reveal-delay,0ms),translate .7s cubic-bezier(.2,.65,.3,1) var(--reveal-delay,0ms),filter .6s ease-in-out var(--reveal-delay,0ms),transform .32s cubic-bezier(.2,.65,.3,1),box-shadow .32s ease}
.gallery-card.scroll-reveal.is-revealed{filter:none}
@media(min-width:801px){.gallery-card:nth-child(3n+2){--reveal-delay:90ms}.gallery-card:nth-child(3n){--reveal-delay:180ms}}
@media(max-width:800px){.gallery-card:nth-child(2n){--reveal-delay:90ms}}
@media(prefers-reduced-motion:reduce){.gallery-card.scroll-reveal{filter:none;translate:0 0;transition:opacity .6s ease}}
/* A closing lightbox lets the pointer through at once, so the cursor re-check lands on the photo underneath. */
.lightbox:not(.is-open){pointer-events:none}
/* With a mouse the cursor itself shows the "x" and a click anywhere closes, so the button only appears for keyboard use. */
@media(hover:hover) and (pointer:fine){.lightbox-close:not(:focus-visible){opacity:0;pointer-events:none}}
/* Phones: two columns of photos. Tapping opens the lightbox, so the grid is a preview; captions would crowd the
   narrow cards and show under the photo in the lightbox instead. */
@media(max-width:600px){.gallery-grid{grid-template-columns:1fr 1fr;gap:12px}.gallery-photo{border-radius:14px}.gallery-photo figcaption{display:none}}
/* Blank photo-shaped cards while the gallery list loads, gently pulsing. */
.gallery-loading{aspect-ratio:4/5;animation:gallery-loading 1.6s ease-in-out infinite}
.gallery-loading:nth-child(3n+2){animation-delay:.2s}.gallery-loading:nth-child(3n){animation-delay:.4s}
@keyframes gallery-loading{0%,100%{opacity:1}50%{opacity:.55}}
@media(prefers-reduced-motion:reduce){.gallery-loading{animation:none}}
/* Price rows and blog cards stay hidden until the CMS answers, so sample content never flashes before real content. */
.cms-pending{visibility:hidden}
/* Each photo (and its caption) fades in once it and every photo before it has loaded; see galleryFlush in app.js. */
.gallery-photo img,.gallery-photo figcaption{opacity:0;transition:opacity .5s ease-in-out}
.gallery-photo.is-shown img,.gallery-photo.is-shown figcaption{opacity:1}
/* A faint dark inner hairline frames each photo (it replaces the card's light border, which vanished on the pale page);
   it gives light photos a crisp edge and all but disappears on darker ones. */
.gallery-photo::before{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;box-shadow:inset 0 0 0 1px #0b326712;pointer-events:none}
@media(max-width:600px){.gallery-photo{box-shadow:0 1px 2px #123c5d24,0 2px 6px #123c5d1a,0 8px 18px #123c5d17}}

/* Drawn page scrollbar (end of app.js). The native one is hidden; this one shows only while the page scrolls or the
   mouse is at the right edge. Toggling a native scrollbar's colour restyles <html> and stutters; this only changes its
   own opacity/transform. Below the custom cursor (2147483000). Mouse devices only; inner scroll areas keep theirs. */
html{scrollbar-width:none}
html::-webkit-scrollbar{display:none}
.site-scrollbar{position:fixed;z-index:2147482990;top:0;right:0;bottom:0;width:14px;opacity:0;transition:opacity .4s ease}
.site-scrollbar.is-visible,.site-scrollbar:hover,.site-scrollbar.is-dragging{opacity:1;transition-duration:.15s}
.site-scrollbar__thumb{position:absolute;top:0;right:3px;width:5px;min-height:40px;border-radius:5px;background:rgba(40,125,138,.45);will-change:transform;transition:width .2s ease,background-color .2s ease}
.site-scrollbar:hover .site-scrollbar__thumb,.site-scrollbar.is-dragging .site-scrollbar__thumb{width:8px;background:rgba(40,125,138,.75)}
@media not ((hover:hover) and (pointer:fine)){.site-scrollbar{display:none}}

/* Phone portrait cover. The media query owns visibility, so Android never gets a resized frame where
   promoted buttons or animated layers can show through. Overscan covers iOS's temporary old viewport. */
.orientation-prompt {
  position: fixed; inset: -100vmax; z-index: 2147483647;
  width: auto; height: auto; max-width: none; max-height: none; margin: 0;
  display: none; place-content: center; justify-items: center; gap: 24px;
  padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right))
    max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  border: 0; background: var(--deep); color: #fff; text-align: center; font-family: Manrope, Arial, sans-serif;
  touch-action: none; overscroll-behavior: none; isolation: isolate; contain: strict;
}
.orientation-prompt__icon { display: block; width: 80px; height: 80px; color: var(--aqua); }
.orientation-prompt__phone { transform-origin: 32px 32px; animation: phone-turn 4s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
.orientation-prompt__title { font-size: clamp(26px, 4vw, 36px); margin: 0; line-height: 1.25; font-weight: 600; letter-spacing: -0.035em; outline: none; }
.orientation-prompt__copy { margin: 12px 0 0; max-width: 32rem; font-size: 16px; line-height: 1.6; color: #cfdae8; }
@keyframes phone-turn {
  0%, 10%, 90%, 100% { transform: rotate(-90deg); }
  40%, 60% { transform: rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
  .orientation-prompt__phone { animation: none; }
}
@media (orientation: landscape) and (hover: none) and (pointer: coarse) and (max-height: 600px) {
  html, body { background: var(--deep) !important; overscroll-behavior: none; touch-action: none; }
  body > :not(.orientation-prompt) { visibility: hidden !important; transition: none !important; animation: none !important; }
  .orientation-prompt { display: grid; }
}

.service-detail{padding:70px 0 80px;background:#fff}
.service-article{max-width:760px}
.service-article h2{font-size:clamp(24px,2.2vw,30px);margin:42px 0 14px}
.service-article h2:first-child{margin-top:0}
.service-article p{color:#4f6476;font-size:16px;line-height:1.9;margin:0 0 14px}
.service-article p a{color:#107773;border-bottom:1px solid #99c8c5}
.service-actions{display:flex;align-items:center;flex-wrap:wrap;gap:28px;margin:44px 0 24px}
.service-note{max-width:620px;line-height:1.8}
.service-links .content-card{min-height:250px;display:block}
.service-links .content-card h3{font-size:23px;margin:46px 0 12px}
@media(max-width:600px){.service-detail{padding:42px 0 50px}.service-article p{font-size:15px}.service-actions{gap:20px}.service-links .content-card{min-height:0;padding-bottom:56px}.service-links .content-card h3{margin-top:32px}}
.service-art-svg{display:block;width:100%;max-width:420px;height:auto;overflow:visible;fill:none;stroke:#0b3267;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.service-art-svg .sa-disc{fill:#eef5f6;stroke:#dce8eb;stroke-width:1}
.service-art-svg .sa-ticks{stroke:#4ed9cd;stroke-width:5;stroke-dasharray:0 1;stroke-opacity:.45;transform-box:view-box;transform-origin:240px 220px;animation:sa-turn 240s linear infinite}
.service-art-svg .sa-in{stroke-opacity:.42}
.service-art-svg .sa-accent{stroke:#159e94}
.service-art-svg .sa-fill{stroke:none}
.service-art-svg .sa-eye{fill:#0b3267}
/* Each stroke has pathLength=1. With a 1/1 dash pattern offset by 1, zero-length dashes sat on every path's start and
   end, and their round caps showed as dots before the draw-in began. A gap longer than the path, starting just past it,
   keeps the undrawn stroke fully clear. */
.service-art-svg .d{stroke-dasharray:1 2;stroke-dashoffset:1.02;animation:sa-draw .9s cubic-bezier(.35,0,.25,1) .3s forwards}
.service-art-svg .sa-2 .d{animation-delay:.6s}
.service-art-svg .sa-3 .d{animation-delay:.9s}
.service-art-svg .sa-eye.d{fill-opacity:0;animation:sa-draw .9s cubic-bezier(.35,0,.25,1) .6s forwards,sa-fill-in .6s ease 1.1s forwards}
@keyframes sa-draw{to{stroke-dashoffset:0}}
@keyframes sa-fill-in{to{fill-opacity:1}}
@keyframes sa-turn{to{transform:rotate(360deg)}}
/* One slow movement each, starting once the drawing is done. */
.sa-twinkle{transform-box:fill-box;transform-origin:center;animation:sa-twinkle 3.2s ease-in-out 2.4s infinite alternate backwards}
@keyframes sa-twinkle{from{opacity:1}to{opacity:.35}}
.sa-rock{transform-box:view-box;transform-origin:420px 305px;animation:sa-rock 4s cubic-bezier(.35,0,.25,1) 2.4s infinite alternate backwards}
@keyframes sa-rock{from{transform:rotate(0)}to{transform:rotate(-7deg)}}
.sa-glint{stroke:#4ed9cd;stroke-width:3;opacity:0;animation:sa-glint 4s ease-in-out 2.4s infinite backwards}
@keyframes sa-glint{0%,100%{opacity:0}50%{opacity:1}}
.sa-bubble{fill:none;stroke:#4ed9cd;stroke-width:1.6;opacity:0;transform-box:fill-box;animation:sa-rise 3.6s ease-out 2.4s infinite backwards}
.sa-bubble:nth-child(2){animation-delay:3.4s}.sa-bubble:nth-child(3){animation-delay:4.4s}
@keyframes sa-rise{0%{opacity:0;transform:translateY(0)}20%{opacity:1}100%{opacity:0;transform:translateY(-46px)}}
/* The glow fades in once the tooth around it is drawn; holding its first frame (12%) through the delay left a faint
   shape floating before the outline existed. */
.sa-glow{fill:#4ed9cd;opacity:0;animation:sa-glow-in .6s ease 1.5s backwards,sa-glow 4.4s ease-in-out 2.4s infinite}
@keyframes sa-glow-in{from{opacity:0}to{opacity:.12}}
@keyframes sa-glow{0%,100%{opacity:.12}50%{opacity:.6}}
.sa-beam{opacity:0;animation:sa-beam 4.4s ease-in-out 2.4s infinite backwards}
.sa-beam .d{stroke-dashoffset:0;animation:none;stroke-dasharray:.06 .05}
@keyframes sa-beam{0%,15%,85%,100%{opacity:0}40%,60%{opacity:1}}
.sa-pulse{stroke:#4ed9cd;stroke-width:4.2;stroke-dasharray:.1 .9;stroke-dashoffset:1.1;opacity:0;animation:sa-pulse 3.6s linear 2.4s infinite backwards}
.sa-pulse-2{animation-delay:3.2s}
@keyframes sa-pulse{0%{stroke-dashoffset:1.1;opacity:0}10%{opacity:1}85%{opacity:1}100%{stroke-dashoffset:0;opacity:0}}
.sa-bob{transform-box:view-box;animation:sa-bob 3.2s cubic-bezier(.35,0,.25,1) 2.4s infinite alternate backwards}
@keyframes sa-bob{from{transform:translateY(0)}to{transform:translateY(-8px)}}
.sa-seat{transform-box:view-box;animation:sa-seat 5s cubic-bezier(.35,0,.25,1) 2.4s infinite backwards}
.sa-seat-bridge{animation-name:sa-seat-bridge}
@keyframes sa-seat{0%,100%{transform:translateY(0)}40%,70%{transform:translateY(46px)}}
@keyframes sa-seat-bridge{0%,100%{transform:translateY(0)}40%,70%{transform:translateY(30px)}}
.sa-rays{transform-box:view-box;transform-origin:240px 220px;animation:sa-turn 60s linear infinite}
/* Only the crown, and only a white glow that brightens and fades (a see-through yellow turned grey over the
   navy), so the tooth weighs about the same as the line drawings; the shade guide beside it shows the colours. */
.sa-shade{animation:sa-shade 5s ease-in-out 2.4s infinite alternate backwards;fill:#fff;fill-opacity:.06}
@keyframes sa-shade{from{fill-opacity:.06}to{fill-opacity:.36}}
.sa-gum{fill:#4ed9cd;fill-opacity:.14}
.sa-lift{transform-box:view-box;animation:sa-lift 5s cubic-bezier(.35,0,.25,1) 2.4s infinite backwards}
@keyframes sa-lift{0%,20%,100%{transform:translateY(0)}55%,70%{transform:translateY(-34px)}}
.sa-lip{fill:#4ed9cd;fill-opacity:.12}
.sa-plump{transform-box:view-box;transform-origin:240px 230px;animation:sa-plump 4s cubic-bezier(.35,0,.25,1) 2.4s infinite alternate backwards}
@keyframes sa-plump{from{transform:scale(1)}to{transform:scale(1.04)}}
@media(prefers-reduced-motion:reduce){.service-art-svg *{animation:none!important}.service-art-svg .d{stroke-dashoffset:0}.service-art-svg .sa-pulse,.service-art-svg .sa-glint,.service-art-svg .sa-bubble,.service-art-svg .sa-beam{opacity:0}.service-art-svg .sa-eye{fill-opacity:1}}
/* The drawing sits in the navy header in light lines, as on Kvorum. */
.service-hero-art{position:absolute;z-index:1;top:50%;right:calc((100% - min(1240px,100% - 96px))/2);width:min(340px,30vw);translate:0 -50%;opacity:.5;pointer-events:none}
.service-hero-art .service-art-svg{stroke:#d9e6f4;stroke-width:3;max-width:none}
.service-hero-art .sa-disc{fill:#ffffff06;stroke:#ffffff1f}
.service-hero-art .sa-accent{stroke:#4ed9cd}
.service-hero-art .sa-eye{fill:#d9e6f4}
.service-hero-art .sa-in{stroke-opacity:.5}
@media(max-width:1000px){.service-hero-art{right:3%;width:300px;opacity:.38}}
@media(max-width:600px){.service-hero-art{right:-24vw;width:76vw;opacity:.3}}
/* Movements for the other pages' header drawings. */
.sa-swing{transform-box:view-box;transform-origin:346px 328px;animation:sa-swing 3.6s cubic-bezier(.35,0,.25,1) 2.4s infinite alternate backwards}
@keyframes sa-swing{from{transform:rotate(-4deg)}to{transform:rotate(6deg)}}
.sa-flip{transform-box:view-box;transform-origin:240px 220px;animation:sa-flip 7s cubic-bezier(.35,0,.25,1) 2.6s infinite backwards}
@keyframes sa-flip{0%,30%{transform:scaleX(1)}55%,80%{transform:scaleX(-1)}100%{transform:scaleX(1)}}
.sa-page{fill:#0b3267}
.sa-open{transform-box:view-box;transform-origin:240px 370px;animation:sa-open-l 4s cubic-bezier(.45,0,.55,1) 2.4s infinite alternate backwards}
.sa-open-r{animation-name:sa-open-r}
@keyframes sa-open-l{from{transform:rotate(0)}to{transform:rotate(-5deg)}}
@keyframes sa-open-r{from{transform:rotate(0)}to{transform:rotate(5deg)}}
.sa-focus{transform-box:view-box;transform-origin:240px 220px;animation:sa-focus 5s cubic-bezier(.35,0,.25,1) 2.4s infinite backwards}
@keyframes sa-focus{0%,100%{transform:scale(1)}40%{transform:scale(1.12)}60%{transform:scale(.97)}75%{transform:scale(1)}}
/* No backwards fill: it held the first ripple frame (90% opacity) through the 2.4s delay, a ready-made ring before anything moved. */
.sa-wave{fill:none;stroke:#4ed9cd;stroke-width:1.6;opacity:0;transform-box:fill-box;transform-origin:center;animation:sa-wave 3.6s ease-out 2.4s infinite}
.sa-wave-2{animation-delay:4.2s}
@keyframes sa-wave{0%{opacity:.9;transform:scale(.6)}100%{opacity:0;transform:scale(2.4)}}
.sa-pulse-ecg{animation-duration:2.8s}
@media(min-width:1001px){.service-hero h1,.service-hero p{max-width:calc(100% - min(340px,30vw) - 50px)}.service-hero-art .sa-disc{fill:none;stroke:none}}
@media(prefers-reduced-motion:reduce){.sa-wave{opacity:0}}
/* The header's drifting rings, re-centred on the drawing as halos, and the small ring moved under the text. */
.service-hero{--art-w:min(340px,30vw);--art-r:calc((100% - min(1240px,100% - 96px))/2);--halo:430px}
.service-hero::before{width:var(--halo);height:var(--halo);top:calc(50% - var(--halo)/2);right:calc(var(--art-r) + var(--art-w)/2 - var(--halo)/2)}
.service-hero::after{right:46%}
@media(max-width:1000px){.service-hero{--art-w:300px;--art-r:3%;--halo:380px}}
/* Up to 1000px the small ring sits left of the halo around the drawing. The halo reaches 1.04x its radius plus a 24px
   drift; the small ring reaches 1.06x its radius plus its 58px band and an 18px drift. The ring stops just short. */
@media(max-width:1000px){.service-hero::after{right:calc(var(--art-r) + var(--art-w) / 2 + var(--halo) * .52 + 120px)!important}}
/* On phones the halo keeps the desktop/tablet proportion (~1.3x the dotted circle). At 300px it sat right on the
   285px dotted circle and read as a second ring. */
@media(max-width:600px){.service-hero{--art-w:76vw;--art-r:-24vw;--halo:96vw}.service-hero::before{top:calc(50% - var(--halo)/2);right:calc(var(--art-r) + var(--art-w)/2 - var(--halo)/2)}.service-hero::after{right:48%}}
/* Service page sections as cards, in the About page's colours. */
.service-detail{background:#eef5f6}
.service-article{max-width:none}
.topic-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.topic-cards.is-odd>.topic-card:last-child{grid-column:1/-1}
.topic-card{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:20px;align-content:start;padding:28px;border:1px solid #d5e3e8;border-radius:16px;background:#f8fbfc;box-shadow:0 10px 30px #123c5d0b}
.topic-card>span{grid-column:1;grid-row:1;padding-top:6px;color:#159e94;font-size:12px;font-weight:750;letter-spacing:.08em}
.topic-card h2{grid-column:2;grid-row:1;margin:0 0 10px;color:var(--navy);font-size:24px;line-height:1.3}
.topic-card-text{grid-column:2;grid-row:2}
.service-article .topic-card p{margin:0 0 10px;color:#5f7484;font-size:15px;line-height:1.8}
.service-article .topic-card p:last-child{margin-bottom:0}
.topic-card-aqua{background:#e3f4f2;border-color:#b9ddd9}
.topic-card-blue{background:#edf2f8;border-color:#ccdae7}
.topic-card-navy{background:#123d68;border-color:#28577f;box-shadow:0 18px 42px #0b315124}
.topic-card-navy>span{color:#6be1d7}
.topic-card-navy h2{color:#fff}
.service-article .topic-card-navy p{color:#d4e2ed}
.service-article .topic-card-navy p a{color:#6be1d7;border-color:#6be1d766}
@media(max-width:800px){.topic-cards{grid-template-columns:1fr;gap:13px}.topic-card{padding:23px;column-gap:16px}.topic-card h2{font-size:21px}}
/* Side by side, the photo card matches the text card's height so their edges line up. */
.about-page-intro{align-items:stretch}
/* Service link cards in the light tones of the section cards, staggered so no column is one colour; no navy, so no service stands out. */
.service-links .content-card.link-card-aqua{background:#e3f4f2;border-color:#b9ddd9}
.service-links .content-card.link-card-blue{background:#edf2f8;border-color:#ccdae7}
/* Each service card carries its header drawing, small and still, cropped to the drawing without its disc, so the
   cards are easier to tell apart; the fills that hide lines behind a shape match each card's background. */
.content-card-art{display:block;width:92px;margin:22px 0 0 -8px;line-height:0}
.content-card-art .service-art-svg{stroke-width:4.2}
.content-card-art .service-art-svg *{animation:none!important}
.content-card-art .service-art-svg .d{stroke-dashoffset:0}
.content-card-art .service-art-svg :is(.sa-disc,.sa-ticks,.sa-pulse,.sa-glint,.sa-bubble,.sa-beam){display:none}
.content-card-art .service-art-svg .sa-eye{fill-opacity:1}
.content-card-art .service-art-svg .sa-solid{fill:var(--card-bg,#fff)}
.service-links .content-card{--card-bg:#f8fbfb}
.service-links .content-card.link-card-aqua{--card-bg:#e3f4f2}
.service-links .content-card.link-card-blue{--card-bg:#edf2f8}
.service-links .content-card .content-card-art+h3{margin-top:18px}
/* Detail layers of the remastered drawings: thin detail lines, highlights on enamel and glass, navy fills
   that hide what is drawn behind a shape, and small dots and tints that fade in once the lines are drawn. */
.service-art-svg .sa-fine{stroke-width:1.5}
.service-art-svg .sa-hl{stroke:#fff;stroke-opacity:.9;stroke-width:2.2}
.service-art-svg .sa-solid{fill:#0b3267;stroke:none}
/* Each icon's solid backing fades in with its own lines (same group delays and length as the draw-in). Shown from the
   first frame, it read as a faint shadow and cut gaps in the dotted ring before the icon existed. */
.service-art-svg .sa-solid{opacity:0;animation:sa-solid-in .9s ease .3s forwards}
.service-art-svg .sa-2 .sa-solid{animation-delay:.6s}
.service-art-svg .sa-3 .sa-solid{animation-delay:.9s}
@keyframes sa-solid-in{to{opacity:1}}
.content-card-art .service-art-svg .sa-solid{opacity:1;animation:none}
@media(prefers-reduced-motion:reduce){.service-art-svg .sa-solid{opacity:1}}
.service-art-svg .sa-dot{fill:#d9e6f4;fill-opacity:.55;stroke:none;opacity:0;animation:sa-fade .9s ease 1.7s forwards}
.service-art-svg .sa-cheek{fill:#4ed9cd;fill-opacity:.28;stroke:none;opacity:0;animation:sa-fade .9s ease 1.7s forwards}
.service-art-svg .sa-tab{stroke:none;opacity:0;animation:sa-fade .9s ease 1.9s forwards}
.service-art-svg .sa-glintdot{fill:#0b3267;stroke:none;opacity:0;animation:sa-fade .6s ease 2.1s forwards}
@keyframes sa-fade{to{opacity:1}}
@media(prefers-reduced-motion:reduce){.service-art-svg .sa-dot,.service-art-svg .sa-cheek,.service-art-svg .sa-tab,.service-art-svg .sa-glintdot{opacity:1}}
/* The home page's orbit of drawings around the portrait disc (kirovHomeArt in service-art.js). The SVG is drawn
   in the disc's own units, so its line widths are set per screen size to land near the inner pages' 2px. */
/* The orbit drawings used to be dimmed with opacity:.6, which also left each icon's navy backing 40% see-through, so
   the disc's breathing ring showed inside the heart and tooth. They are now drawn at full opacity with every colour
   pre-mixed with the background at the same strength (--art-a over --art-bg), which looks the same over the navy and
   lets the backings cover what is behind them. z-index lifts them over the ::after ring. */
.hero-orbit-art{position:absolute;inset:-34%;z-index:1;pointer-events:none;--art-a:60%;--art-bg:#0b3267;--sw:1.2;--swf:.7;--swh:1;--dot:2.4}
.hero-orbit-art .service-art-svg{width:100%;height:100%;max-width:none;stroke:color-mix(in srgb,#d9e6f4 var(--art-a),var(--art-bg));stroke-width:var(--sw)}
.hero-orbit-art .sa-fine{stroke-width:var(--swf)}
.hero-orbit-art .sa-hl{stroke-width:var(--swh);stroke:color-mix(in srgb,#fff var(--art-a),var(--art-bg))}
.hero-orbit-art .sa-accent,.hero-orbit-art .sa-ticks,.hero-orbit-art .sa-pulse{stroke:color-mix(in srgb,#4ed9cd var(--art-a),var(--art-bg))}
.hero-orbit-art .sa-in{stroke-opacity:.5}
.hero-orbit-art .sa-ticks{stroke-width:var(--dot);stroke-opacity:.5;transform-origin:240px 240px}
.hero-orbit-art .sa-pulse{stroke-width:calc(var(--sw) * 1.9)}
.home-item{transform-box:view-box;animation:home-float 3.4s cubic-bezier(.35,0,.25,1) 2.4s infinite alternate backwards}
.home-item-2{animation-delay:3s}.home-item-3{animation-delay:2.7s}.home-item-4{animation-delay:3.3s}
@keyframes home-float{from{transform:translateY(0)}to{transform:translateY(-5px)}}
@media(max-width:900px){.hero-orbit-art{--sw:1.8;--swf:1;--swh:1.4;--dot:3;--art-a:55%}}
@media(prefers-reduced-motion:reduce){.home-item{animation:none}}
/* Between the phone layout and ~990px the text column starts right where the heart sits, so it steps aside. */
/* Small drawings on the home page's service cards (kirovCardArt), coloured for each card: navy lines on the
   white and aqua cards, light lines on the navy one; the fills that hide lines behind a shape match the card. */
.service-symbol .card-art{display:block;width:100px;height:100px;max-width:none;overflow:visible;stroke:#0b3267;stroke-width:2.6}
.service-symbol .card-art .sa-fine{stroke-width:1.3}
.service-symbol .card-art .sa-in{stroke-opacity:.45}
.service-symbol .card-art .sa-accent{stroke:#159e94}
.service-symbol .card-art .sa-solid{fill:#f8fbfc}
.service-symbol .card-art .sa-hl{stroke:#4ed9cd;stroke-opacity:.8;stroke-width:1.6}
.service-symbol .card-art .sa-pulse{stroke-width:3.4}
.service-card:nth-child(2) .card-art .sa-solid{fill:#6fe0d6}
.service-card:nth-child(2) .card-art .sa-accent{stroke:#0b5f59}
.service-card:nth-child(2) .card-art .sa-hl{stroke:#fff}
.service-card:nth-child(2) .card-art .sa-pulse{stroke:#0b3267}
.service-card:nth-child(3) .card-art{stroke:#d9e6f4}
.service-card:nth-child(3) .card-art .sa-solid{fill:#123d68}
.service-card:nth-child(3) .card-art .sa-accent{stroke:#6be1d7}
.service-card:nth-child(3) .card-art .sa-hl{stroke:#fff}
.service-symbol:has(.card-art){line-height:0}
.card-float{transform-box:view-box;animation:home-float 3.4s cubic-bezier(.35,0,.25,1) 2.4s infinite alternate backwards}
.service-card:nth-child(2) .card-float{animation-delay:2.8s}.service-card:nth-child(3) .card-float{animation-delay:3.2s}
.card-mirror{transform-box:view-box;transform-origin:117px 68px;animation:card-mirror 3.6s cubic-bezier(.45,0,.55,1) 2.4s infinite alternate backwards}
@keyframes card-mirror{from{transform:rotate(-5deg)}to{transform:rotate(9deg)}}
.service-symbol .card-art .card-filling{stroke:none;fill:#0b5f59;fill-opacity:0;animation:card-filling 4.4s ease-in-out 2.4s infinite alternate backwards}
@keyframes card-filling{from{fill-opacity:0}to{fill-opacity:.55}}
.card-shine{transform-box:fill-box;transform-origin:center;animation:card-shine 3.2s cubic-bezier(.45,0,.55,1) 2.4s infinite alternate backwards}
@keyframes card-shine{from{transform:scale(.8) rotate(0)}to{transform:scale(1.15) rotate(25deg)}}
.card-rays{animation:card-rays 3.2s ease-in-out 2.4s infinite alternate backwards}
@keyframes card-rays{from{opacity:.35}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.card-float,.card-mirror,.card-shine,.card-rays,.service-symbol .card-art .card-filling{animation:none}}
/* The same orbit on the About page's portrait card, whose background is a lighter navy. */
.about-page-disc .hero-orbit-art{--art-bg:#123d68}
.about-page-disc .hero-orbit-art .sa-solid{fill:#123d68}
/* The NZOK badge sits inside д-р Киров's name card at the bottom of the home portrait, after a thin divider. */
.doctor-label .label-divider{flex:none;width:1px;align-self:stretch;margin:2px 4px;background:#dce6eb}
/* From 901 to 1180px the column's width, not the window's height, limits the photo, so a full-height hero only
   left an empty band above him on tall windows: here the hero fits its content instead, as desktop's does. */
@media(min-width:901px) and (max-width:1180px){.hero{min-height:0}.hero-grid{flex:none;min-height:0;padding-top:clamp(36px,5vw,56px)}}
/* The name card keeps each line whole; in the narrower two-column widths it tightens instead of wrapping. */
.doctor-label strong,.doctor-label div>span,.hero .doctor-label .nzok-text strong{white-space:nowrap}
@media(min-width:901px) and (max-width:1180px){.doctor-label{gap:10px;padding:12px 18px 12px 12px}.doctor-label .cross{flex:none;width:34px;height:34px;line-height:32px;font-size:26px}.doctor-label strong,.hero .doctor-label .nzok-text strong{font-size:13px}.doctor-label div>span{font-size:10px}.doctor-label .nzok-badge>.nzok-logo{width:32px;height:32px}.doctor-label .nzok-logo img{width:20px}.hero .doctor-label .nzok-badge{gap:8px}}
.hero .doctor-label .nzok-badge{margin:0;padding:0;gap:10px;background:none;border:0;box-shadow:none;border-radius:0}
.doctor-label .nzok-badge>.nzok-logo{display:grid;width:38px;height:38px;box-shadow:inset 0 0 0 1px #e3ebef}
.doctor-label .nzok-logo img{width:24px}
.doctor-label .nzok-badge>.nzok-text{display:flex}
.hero .doctor-label .nzok-text strong{color:var(--ink)}
.hero .doctor-label .nzok-text span{color:var(--muted);font-size:11px}
/* The NZOK line under "Works with the NHIF" shows at every width; on narrow cards it may wrap to two lines. */
.hero .doctor-label .nzok-text>span{white-space:normal;line-height:1.35}
@media(max-width:1300px){.hero .doctor-label .nzok-text>span{font-size:10px}}
.doctor-label .cross{flex:none}
/* On phones the card tightens and both small grey lines may wrap; up to 430px the decorative + steps out so the titles fit. */
@media(max-width:600px){.doctor-label{gap:8px;padding:10px 14px 10px 10px}.doctor-label div>span{white-space:normal;line-height:1.35}.doctor-label>div{min-width:0}.doctor-label .label-divider{margin:2px 0}}
@media(min-width:901px) and (max-width:1180px){.doctor-label div>span{white-space:normal;line-height:1.35}.doctor-label>div{min-width:0}}
@media(max-width:374px){.doctor-label{gap:5px;padding:10px 10px 10px 12px}.doctor-label strong,.hero .doctor-label .nzok-text strong{font-size:12px}.doctor-label .nzok-badge>.nzok-logo{width:28px;height:28px}.doctor-label .nzok-logo img{width:18px}.hero .doctor-label .nzok-badge{gap:6px}}
@media(max-width:430px){.doctor-label .cross{display:none}}
@media(max-width:340px){.doctor-label strong,.hero .doctor-label .nzok-text strong{font-size:11px}}
@media(max-width:600px){.doctor-label .nzok-badge>.nzok-logo{width:32px;height:32px}.doctor-label .nzok-logo img{width:20px}.hero .doctor-label .nzok-badge{gap:8px}.doctor-label .label-divider{margin:2px 2px}}
/* д-р Киров's name card as frosted glass: a translucent white with the portrait blurred behind it. */
.doctor-label{background:#ffffffb8;-webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);border:1px solid #ffffff8c;box-shadow:0 8px 28px #03214b38,inset 0 1px 0 #ffffffa6}
.doctor-label .label-divider{background:#0b32672e}
/* Side by side, the hero text keeps clear of the orbit drawings beside the portrait. */
@media(min-width:901px){.hero-copy{padding-left:clamp(16px,3.4vw,48px)}}
/* Side by side, the hero spans the header's edges evenly: the text block ends at the right edge (its longest line
   meets the line the Book button ends on), and the photo group moves right just enough that the leftmost drawing
   (the tooth, about .578 disc widths left of the disc's centre) starts at the left edge, where the logo starts.
   --dw mirrors the disc's width (490px, or 530px on windows at least 820px tall). */
@media(min-width:901px){.hero-copy{justify-self:end;width:fit-content;max-width:100%}}
/* Only from 1181px: in the tighter 901-1180px layout the nudge would push the heart into the text. */
@media(min-width:1181px){.hero .portrait{--dw:490px;translate:max(0px,calc(var(--dw) * .578 - 50%)) 0}}
@media(min-width:1181px) and (min-height:820px){.hero .portrait{--dw:530px}}
/* From 1181px the text block fills its column instead of hugging the right edge: the headline scales with the
   column's width (cqw) so its longest line reaches the header's right edge, separately for the longer Bulgarian
   headline and the shorter English one, and the intro grows with it. */
@media(min-width:1181px){
  .hero-copy{justify-self:stretch;width:auto;container-type:inline-size}
  .hero h1{font-size:min(calc(100cqw / 9.1),72px)}
  html[lang=en] .hero h1{font-size:min(calc(100cqw / 7.65),80px)}
  .hero-intro{font-size:min(calc(100cqw / 30),19px);max-width:none}
}
/* With the larger 530px disc (windows 820px+ tall) the heart reaches into the text column at 1181-1260px; extra
   padding there keeps the text at least ~24px clear of it. */
@media(min-width:1181px) and (min-height:820px){.hero-copy{padding-left:calc(clamp(16px,3.4vw,48px) + max(0px,41px - (100vw - 1181px) * .52))}}
/* The strip under the hero lines up with the same edges as the header and the hero. */
@media(min-width:901px){.hero-bottom{padding-inline:calc((100% - min(1240px,100% - 96px)) / 2)}}
@media(min-width:901px) and (max-width:1100px){.hero-bottom{padding-inline:28px}}
/* The name card is centred under д-р Киров now that it carries the NZOK badge too. */
.hero .doctor-label{left:0;right:0;margin-inline:auto;width:max-content;max-width:100%}
/* Inside the name card the NZOK badge arrives with the card, not with its old entrance as a separate pill. */
.hero .doctor-label .nzok-badge{opacity:1!important;transform:none!important;transition:none!important;animation:none!important}
/* Up to 520px the whole card shrinks with the screen (every size follows --fs, the small grey line's size) so both halves stay on one line, nothing wrapping, the + included; the card may reach 10px from the screen edges. */
@media(max-width:520px){
  .hero .doctor-label{--fs:min(10px,calc((100vw - 24px) / 38.6));left:-10px;right:-10px;max-width:none;gap:calc(var(--fs) * .7);padding:calc(var(--fs) * .9) calc(var(--fs) * 1.3)}
  .hero .doctor-label span.cross{display:block;flex:none;width:calc(var(--fs) * 3);height:calc(var(--fs) * 3);background-size:calc(var(--fs) * 1.2) 2px,2px calc(var(--fs) * 1.2),auto}
  .hero .doctor-label .label-divider{margin:2px 0}
  .hero .doctor-label .nzok-badge{gap:calc(var(--fs) * .7)}
  .hero .doctor-label .nzok-badge>.nzok-logo{width:calc(var(--fs) * 3);height:calc(var(--fs) * 3)}
  .hero .doctor-label .nzok-logo img{width:calc(var(--fs) * 1.9)}
  .hero .doctor-label strong,.hero .doctor-label .nzok-text strong{font-size:calc(var(--fs) * 1.3)}
  .hero .doctor-label div>span,.hero .doctor-label .nzok-text>span{white-space:nowrap;font-size:var(--fs)}
  /* The English lines are shorter, so they keep a larger size for longer. */
  html[lang=en] .hero .doctor-label{--fs:min(10px,calc((100vw - 24px) / 38.4))}
}
/* The dotted rings' turn starts from a shared clock (--dots-phase, set in app.js), in step across pages. */
.service-art-svg .sa-ticks{animation-delay:var(--dots-phase,0s)}
/* Sora covers Latin only, so the Bulgarian brand name is set in Manrope either way. Naming Sora first still made
   Chrome download it for the line metrics, 34 KB that competed with the hero photo on every Bulgarian page. */
html[lang=bg] .brand{font-family:Manrope,Arial,sans-serif}
/* The "+" glyph sits on font metrics, which Safari and Chrome round differently, so it drifted off-centre in its
   circle. Hide the glyph and draw the cross with two centred bars instead; 12px x 2px in even-sized circles stays crisp. */
.cross,.doctor-label .cross{font-size:0;background:linear-gradient(#1aaf9f 0 0) 50%/12px 2px no-repeat,linear-gradient(#1aaf9f 0 0) 50%/2px 12px no-repeat,#e0f7f3}
/* The hero name card in the share images' pill style: see-through glass with white text over the photo. A faint text
   shadow keeps the lines readable where his arms show through. */
.hero .doctor-label{background:linear-gradient(180deg,#ffffff33,#ffffff1a);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);border:1px solid #ffffff38;box-shadow:0 10px 28px #03214b55,inset 0 1px 0 #ffffff4d,inset 0 -1px 0 #ffffff14;color:#fff}
.hero .doctor-label strong,.hero .doctor-label .nzok-text strong{color:#fff;text-shadow:0 1px 3px #03214b80}
.hero .doctor-label div>span,.hero .doctor-label .nzok-text span{color:#d5e2ef;text-shadow:0 1px 2px #03214b80}
.hero .doctor-label .label-divider{background:#ffffff33}
.hero .doctor-label .cross{background:linear-gradient(#73e1d6 0 0) 50%/12px 2px no-repeat,linear-gradient(#73e1d6 0 0) 50%/2px 12px no-repeat,#4ed9cd26}