/* ==========================================================================
   Dental Club Karadjovi — Design System
   Palette and tokens from Brand Asset Pack v1.0 (03-colour/tokens.css)
   Display face: Chamola is unlicensed for web — Cormorant Garamond is the
   approved digital substitute (SIL OFL, full Cyrillic). Text: Montserrat.
   Mobile-first. No scroll hijacking. Motion is progressive enhancement.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  /* Brand palette — Brand Asset Pack v1.0 */
  --copper:#70543F;
  --hazel:#E2CBAA;
  --peach:#F1EAE2;
  --white:#FFFFFF;
  --espresso:#3E2E24;
  --cocoa:#5B473C;
  --clay:#8E7460;
  --stone:#998C84;
  --sand:#EFDFC8;
  --linen:#F8F4EF;
  --ink:#1F1A17;

  --success:#4F6B4A; --success-bg:#EDF1EA;
  --attention:#B4832E; --attention-bg:#FAF1DF;
  --error:#A4483C; --error-bg:#F8EAE7;
  --info:#4A6470; --info-bg:#EBF0F2;

  /* Spacing scale */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  /* Type */
  --font-display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --font-text:"Montserrat","Segoe UI",Roboto,system-ui,sans-serif;

  /* Fluid type scale — mobile first, clamped */
  --t-hero:clamp(2.15rem,1.35rem + 4vw,5rem);
  --t-h1:clamp(1.8rem,1.25rem + 2.8vw,3.5rem);
  --t-h2:clamp(1.45rem,1.12rem + 1.7vw,2.5rem);
  --t-h3:clamp(1.25rem,1.08rem + 0.8vw,1.6rem);
  --t-h4:clamp(1.05rem,1rem + 0.3vw,1.2rem);
  --t-body:clamp(1rem,0.97rem + 0.15vw,1.075rem);
  --t-lead:clamp(1.02rem,.96rem + .35vw,1.22rem);
  --t-small:0.875rem;
  --t-micro:0.75rem;

  /* Layout */
  --container:1240px;
  --container-narrow:760px;
  --gutter:20px;
  --radius:0px;
  --border:1px solid rgba(112,84,63,.18);
  --border-strong:1px solid rgba(112,84,63,.34);

  /* Motion */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out-expo:cubic-bezier(.16,1,.3,1);
  --dur-fast:160ms;
  --dur:240ms;
  --dur-slow:640ms;
  --dur-scene:900ms;

  --shadow:0 2px 12px rgba(62,46,36,.10);
  --shadow-lg:0 18px 60px -20px rgba(62,46,36,.32);
  --focus:0 0 0 3px rgba(112,84,63,.28), 0 0 0 1px var(--copper);

  --header-h:64px;
  --sticky-cta-h:0px;
}
@media (min-width:1024px){ :root{ --gutter:32px; --header-h:84px; } }

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  font-family:var(--font-text);
  font-size:var(--t-body);
  line-height:1.68;
  color:var(--espresso);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,h5{margin:0;font-weight:400;line-height:1.1;letter-spacing:-.01em}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em;padding-left:1.15em}
hr{border:0;border-top:var(--border);margin:var(--s7) 0}
:focus-visible{outline:none;box-shadow:var(--focus)}
::selection{background:var(--hazel);color:var(--espresso)}

/* ---------- 3. Typography ---------- */
.display,h1,h2,h3{font-family:var(--font-display)}
h1{font-size:var(--t-h1)}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3);letter-spacing:0}
h4{font-family:var(--font-text);font-size:var(--t-h4);font-weight:600;letter-spacing:.01em}
.hero-type{font-size:var(--t-hero);line-height:.98;letter-spacing:-.025em}
.lead{font-size:var(--t-lead);line-height:1.6;color:#4A392E}
.eyebrow{
  font-family:var(--font-text);font-size:var(--t-micro);font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--clay);
  display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s4);
}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--hazel);flex:none}
.eyebrow--plain::before{display:none}
.muted{color:var(--stone)}
.small{font-size:var(--t-small)}
.micro{font-size:var(--t-micro)}
.serif-num{font-family:var(--font-display);font-size:clamp(2.4rem,1.6rem + 3vw,3.9rem);line-height:1;color:var(--copper)}

/* ---------- 4. Layout ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.container--narrow{max-width:var(--container-narrow)}
.section{padding-block:var(--s8)}
@media (min-width:768px){.section{padding-block:var(--s9)}}
@media (min-width:1280px){.section{padding-block:var(--s10)}}
.section--tight{padding-block:var(--s7)}
.bg-peach{background:var(--peach)}
.bg-linen{background:var(--linen)}
.bg-sand{background:var(--sand)}
.bg-espresso{background:var(--espresso);color:var(--peach)}
.bg-espresso h1,.bg-espresso h2,.bg-espresso h3{color:var(--white)}
.bg-espresso .lead{color:#F1EAE2}
.bg-espresso .eyebrow{color:var(--hazel)}
.bg-copper{background:var(--copper);color:var(--white)}
.bg-copper h2,.bg-copper h3{color:var(--white)}
.bg-copper .lead{color:#FFFFFF}
.bg-copper .eyebrow{color:var(--hazel)}

.grid{display:grid;gap:var(--s5)}
@media (min-width:768px){
  .grid-2{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1024px){
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .grid-4{grid-template-columns:repeat(4,1fr)}
  .grid-gap-lg{gap:var(--s7)}
}
.split{display:grid;gap:var(--s6);align-items:center}
@media (min-width:900px){
  .split{grid-template-columns:1fr 1fr;gap:var(--s8)}
  .split--wide-left{grid-template-columns:1.15fr .85fr}
  .split--wide-right{grid-template-columns:.85fr 1.15fr}
  .split--sticky > .split__sticky{position:sticky;top:calc(var(--header-h) + var(--s6))}
}
.stack > * + *{margin-top:var(--s4)}
.stack-lg > * + *{margin-top:var(--s6)}
.center{text-align:center}
.measure{max-width:64ch}
.measure-tight{max-width:52ch}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}

/* ---------- 5. Buttons ---------- */
.btn{
  --btn-bg:var(--copper);--btn-fg:var(--white);--btn-bd:var(--copper);
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  gap:var(--s3);min-height:52px;padding:var(--s3) var(--s6);
  font-family:var(--font-text);font-size:.83rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;text-align:center;
  color:var(--btn-fg);background:transparent;border:1px solid var(--btn-bd);
  border-radius:var(--radius);cursor:pointer;overflow:hidden;isolation:isolate;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--btn-bg);
  transform:scaleY(1);transform-origin:bottom;
  transition:transform var(--dur-slow) var(--ease-out-expo);
}
.btn__arrow{display:inline-block;transition:transform var(--dur) var(--ease);flex:none}
@media (hover:hover){
  .btn:hover::before{transform:scaleY(0)}
  .btn:hover{color:var(--copper);border-color:var(--copper)}
  .btn:hover .btn__arrow{transform:translateX(5px)}
}
.btn:active{transform:translateY(1px)}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--copper);--btn-bd:rgba(112,84,63,.42)}
.btn--ghost::before{transform:scaleY(0)}
@media (hover:hover){
  .btn--ghost:hover::before{transform:scaleY(1);background:var(--copper)}
  .btn--ghost:hover{color:var(--white);border-color:var(--copper)}
}
.btn--light{--btn-bg:var(--white);--btn-fg:var(--espresso);--btn-bd:var(--white)}
@media (hover:hover){.btn--light:hover{color:var(--white);border-color:var(--white)}}
.btn--onDark{--btn-bg:var(--hazel);--btn-fg:var(--espresso);--btn-bd:var(--hazel)}
@media (hover:hover){.btn--onDark:hover{color:var(--hazel)}}
.btn--sm{min-height:42px;padding:var(--s2) var(--s5);font-size:.74rem}
.btn--full{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s3)}
@media (max-width:479px){.btn-row .btn{width:100%}}

.link-arrow{
  display:inline-flex;align-items:center;gap:var(--s2);
  font-weight:600;font-size:.85rem;letter-spacing:.06em;color:var(--copper);
  border-bottom:1px solid rgba(112,84,63,.3);padding-bottom:3px;
  transition:border-color var(--dur) var(--ease),gap var(--dur) var(--ease);
}
@media (hover:hover){.link-arrow:hover{border-color:var(--copper);gap:var(--s3)}}

/* ---------- 6. Header ---------- */
.skip-link{
  position:absolute;left:var(--s4);top:-100px;z-index:1000;
  background:var(--espresso);color:var(--white);padding:var(--s3) var(--s5);
  transition:top var(--dur) var(--ease);
}
.skip-link:focus{top:var(--s4)}

.header{
  position:fixed;top:0;left:0;right:0;z-index:900;height:var(--header-h);
  display:flex;align-items:center;
  background:rgba(255,255,255,0);
  border-bottom:1px solid transparent;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),
             backdrop-filter var(--dur) var(--ease);
}
.header.is-solid,.header.is-open{
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  backdrop-filter:saturate(150%) blur(14px);
  border-bottom-color:rgba(112,84,63,.14);
}
.header__inner{
  width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s5);
}
.header__logo{display:flex;align-items:center;flex:none}
.header__logo img{height:34px;width:auto}
@media (min-width:1024px){.header__logo img{height:44px}}
.header__nav{display:none}
@media (min-width:1100px){
  .header__nav{display:flex;align-items:center;gap:var(--s6)}
}
.navitem{position:relative}
.navitem__link{
  display:inline-flex;align-items:center;gap:6px;padding:var(--s3) 0;
  font-size:.78rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--espresso);white-space:nowrap;
}
.navitem__link::after{
  content:"";position:absolute;left:0;bottom:10px;height:1px;width:100%;
  background:var(--copper);transform:scaleX(0);transform-origin:right;
  transition:transform var(--dur-slow) var(--ease-out-expo);
}
.navitem:hover .navitem__link::after,
.navitem__link:focus-visible::after,
.navitem__link[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.navitem__caret{width:9px;height:9px;transition:transform var(--dur) var(--ease)}
.navitem:hover .navitem__caret,.navitem.is-open .navitem__caret{transform:rotate(180deg)}

/* Mega menu with preview panel */
.mega{
  position:absolute;top:100%;left:50%;transform:translate(-50%,10px);
  width:min(920px,92vw);background:var(--white);border:var(--border);
  box-shadow:var(--shadow-lg);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur);
}
.navitem:hover .mega,.navitem.is-open .mega,.mega:focus-within{
  opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)
}
.mega__grid{display:grid;grid-template-columns:1.25fr .75fr}
.mega__list{padding:var(--s6);display:grid;grid-template-columns:1fr 1fr;gap:2px}
.mega__link{
  display:block;padding:var(--s3) var(--s4);border-left:2px solid transparent;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.mega__link:hover,.mega__link:focus-visible{background:var(--linen);border-left-color:var(--copper)}
.mega__link strong{display:block;font-family:var(--font-display);font-size:1.08rem;font-weight:500;line-height:1.25}
.mega__link span{display:block;font-size:.73rem;color:var(--stone);margin-top:2px;line-height:1.4}
.mega__preview{position:relative;background:var(--peach);overflow:hidden;min-height:270px}
.mega__preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity var(--dur-slow) var(--ease)}
.mega__preview img.is-active{opacity:1}
.mega__preview figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:var(--s5);
  background:linear-gradient(to top,rgba(62,46,36,.86),transparent);
  color:var(--white);font-size:.8rem;line-height:1.4;
}

.header__actions{display:flex;align-items:center;gap:var(--s3);flex:none}

/* Language selector */
.lang{position:relative}
.lang__toggle{
  display:inline-flex;align-items:center;gap:6px;background:none;border:1px solid rgba(112,84,63,.24);
  padding:9px var(--s3);font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  cursor:pointer;transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.lang__toggle:hover{border-color:var(--copper);background:var(--linen)}
.lang__menu{
  position:absolute;right:0;top:calc(100% + 8px);min-width:184px;background:var(--white);
  border:var(--border);box-shadow:var(--shadow-lg);padding:var(--s2);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur);
  z-index:20;
}
.lang.is-open .lang__menu{opacity:1;visibility:visible;transform:translateY(0)}
.lang__item{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding:var(--s3) var(--s4);font-size:.82rem;transition:background var(--dur) var(--ease);
}
.lang__item:hover,.lang__item:focus-visible{background:var(--linen)}
.lang__item[aria-current="true"]{color:var(--copper);font-weight:600}
.lang__item code{font-size:.68rem;letter-spacing:.1em;color:var(--stone);text-transform:uppercase}

.burger{
  display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:46px;height:46px;padding:0 11px;background:none;border:0;cursor:pointer;
}
@media (min-width:1100px){.burger{display:none}}
.burger span{display:block;height:1.5px;width:100%;background:var(--espresso);transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease)}
.header.is-open .burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.header.is-open .burger span:nth-child(2){opacity:0}
.header.is-open .burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* Mobile drawer */
.drawer{
  position:fixed;inset:var(--header-h) 0 0;z-index:880;background:var(--white);
  overflow-y:auto;overscroll-behavior:contain;
  padding:var(--s5) 0 calc(var(--s9) + env(safe-area-inset-bottom, 0px));
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur);
}
.header.is-open ~ .drawer{opacity:1;visibility:visible;transform:translateY(0)}
@media (min-width:1100px){.drawer{display:none}}
.drawer__group{border-bottom:var(--border)}
.drawer__toggle{
  display:flex;width:100%;align-items:center;justify-content:space-between;gap:var(--s4);
  padding:var(--s5) 0;background:none;border:0;text-align:left;cursor:pointer;
  font-family:var(--font-display);font-size:1.35rem;
}
.drawer__toggle svg{width:14px;height:14px;flex:none;transition:transform var(--dur) var(--ease)}
.drawer__toggle[aria-expanded="true"] svg{transform:rotate(45deg)}
.drawer__panel{display:none;padding-bottom:var(--s5)}
.drawer__panel.is-open{display:block}
.drawer__sublink{display:block;padding:var(--s3) 0 var(--s3) var(--s4);border-left:1px solid var(--hazel);font-size:.95rem}
.drawer__link{display:block;padding:var(--s5) 0;font-family:var(--font-display);font-size:1.35rem;border-bottom:var(--border)}
.drawer__foot{padding-top:var(--s6);display:grid;gap:var(--s3)}

/* Sticky mobile booking bar */
.stickybar{
  position:fixed;left:0;right:0;bottom:0;z-index:870;
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:rgba(112,84,63,.2);
  padding-bottom:env(safe-area-inset-bottom, 0px);
  transform:translateY(110%);transition:transform var(--dur-slow) var(--ease-out-expo);
}
.stickybar.is-visible{transform:translateY(0)}
@media (min-width:1100px){.stickybar{display:none}}
.stickybar a{
  display:flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:56px;padding:var(--s3);background:var(--white);
  font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--espresso);
}
.stickybar a.is-primary{background:var(--copper);color:var(--white)}
.stickybar svg{width:15px;height:15px;flex:none}

/* ---------- 7. Hero / cinematic scenes ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--espresso)}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media img,.hero__media video{width:100%;height:100%;object-fit:cover}
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(31,26,23,.55) 0%,rgba(31,26,23,.22) 34%,rgba(31,26,23,.72) 72%,rgba(31,26,23,.94) 100%);
}
.hero__inner{position:relative;z-index:2;width:100%;padding-block:var(--s8) var(--s7);color:var(--white)}
.hero__inner .eyebrow{color:var(--hazel)}
.hero h1{color:var(--white);max-width:14ch}
.hero__lead{color:#FFFFFF;max-width:42ch;font-size:clamp(1rem,.95rem + .3vw,1.18rem);margin-top:var(--s4);text-shadow:0 1px 12px rgba(31,26,23,.4)}
.hero__actions{margin-top:var(--s5)}
.hero__facts{
  margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid rgba(255,255,255,.22);
  display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s5);
}
@media (min-width:768px){.hero__facts{grid-template-columns:repeat(4,1fr)}}
.hero__fact dt{font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--hazel);margin-bottom:6px}
.hero__fact dd{margin:0;font-family:var(--font-display);font-size:1.5rem;color:var(--white);line-height:1.15}
.hero__scroll{
  position:absolute;right:var(--gutter);bottom:var(--s6);z-index:3;
  display:none;writing-mode:vertical-rl;font-size:var(--t-micro);
  letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.6);
}
@media (min-width:1024px){.hero__scroll{display:block}}
.hero__scroll::after{content:"";display:block;width:1px;height:52px;margin:var(--s3) auto 0;background:linear-gradient(rgba(255,255,255,.6),transparent)}

/* Scene: crossfade stack */
.xfade{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--peach)}
@media (min-width:900px){.xfade{aspect-ratio:3/4}}
.xfade__layer{position:absolute;inset:0;opacity:0;transition:opacity var(--dur-scene) var(--ease)}
.xfade__layer img{width:100%;height:100%;object-fit:cover}
.xfade__layer.is-active{opacity:1}
.xfade__steps{counter-reset:step}
.xfade__step{
  padding:var(--s5) 0 var(--s5) var(--s6);border-left:1px solid rgba(112,84,63,.18);
  position:relative;cursor:pointer;transition:border-color var(--dur) var(--ease);
}
.xfade__step::before{
  counter-increment:step;content:counter(step,decimal-leading-zero);
  position:absolute;left:calc(-1 * var(--s6));transform:translateX(-2px);
  width:calc(var(--s6) - 4px);text-align:right;
  font-size:var(--t-micro);letter-spacing:.14em;color:var(--stone);
}
.xfade__step::after{
  content:"";position:absolute;left:-1px;top:0;bottom:0;width:2px;background:var(--copper);
  transform:scaleY(0);transform-origin:top;transition:transform var(--dur-slow) var(--ease-out-expo);
}
.xfade__step.is-active::after{transform:scaleY(1)}
.xfade__step h3{font-size:1.28rem;transition:color var(--dur) var(--ease)}
.xfade__step p{margin:var(--s2) 0 0;font-size:.94rem;color:var(--stone);max-width:44ch}
.xfade__step.is-active p{color:var(--cocoa)}

/* ---------- 8. Cards ---------- */
.card{
  position:relative;display:flex;flex-direction:column;background:var(--white);
  border:var(--border);overflow:hidden;height:100%;
  transition:border-color var(--dur) var(--ease),transform var(--dur-slow) var(--ease-out-expo),box-shadow var(--dur-slow) var(--ease);
}
@media (hover:hover){
  .card:hover{border-color:rgba(112,84,63,.45);transform:translateY(-4px);box-shadow:var(--shadow-lg)}
  .card:hover .card__img img{transform:scale(1.05)}
  .card:hover .card__more{gap:var(--s3)}
}
.card:focus-within{border-color:var(--copper)}
.card__img{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--peach);flex:none}
.card__img img{width:100%;height:100%;object-fit:cover;transition:transform 900ms var(--ease-out-expo)}
.card__body{padding:var(--s5);display:flex;flex-direction:column;flex:1}
.card h3{font-size:1.32rem;margin-bottom:var(--s3)}
.card p{font-size:.93rem;color:#6E5F55;margin-bottom:var(--s5)}
.card__more{
  margin-top:auto;display:inline-flex;align-items:center;gap:var(--s2);
  font-size:.75rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--copper);
  transition:gap var(--dur) var(--ease);
}
.card__link::after{content:"";position:absolute;inset:0}
.card__price{
  display:inline-block;margin-bottom:var(--s3);padding:4px var(--s3);
  background:var(--sand);font-size:var(--t-micro);font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--cocoa);
}

/* ---------- 9. Evidence, stats, tables ---------- */
.evidence{
  border-left:2px solid var(--hazel);padding:var(--s5) 0 var(--s5) var(--s5);
  background:linear-gradient(90deg,rgba(226,203,170,.16),transparent 70%);
}
.evidence__figure{font-family:var(--font-display);font-size:clamp(2.6rem,1.8rem + 3.4vw,4.2rem);line-height:1;color:var(--copper)}
.evidence__label{margin-top:var(--s3);font-size:.95rem;color:var(--cocoa);max-width:42ch}
.evidence__src{margin-top:var(--s3);font-size:var(--t-micro);color:var(--stone);line-height:1.5}
.evidence__src a{border-bottom:1px solid rgba(153,140,132,.5)}

.statrow{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s6) var(--s5)}
@media (min-width:900px){.statrow{grid-template-columns:repeat(4,1fr)}}
.stat dt{font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--clay);margin-bottom:var(--s2)}
.stat dd{margin:0;font-family:var(--font-display);font-size:clamp(1.9rem,1.3rem + 2.2vw,2.9rem);line-height:1;color:var(--copper)}
.stat p{margin:var(--s2) 0 0;font-size:.8rem;color:var(--stone);line-height:1.45}

.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:var(--border)}
table{width:100%;border-collapse:collapse;font-size:.92rem;min-width:520px}
caption{text-align:left;padding:var(--s4) var(--s5);font-size:.85rem;color:var(--stone);border-bottom:var(--border)}
th,td{padding:var(--s4) var(--s5);text-align:left;border-bottom:1px solid rgba(112,84,63,.1)}
thead th{
  background:var(--espresso);color:var(--white);font-size:var(--t-micro);
  font-weight:600;letter-spacing:.12em;text-transform:uppercase;
}
tbody tr:last-child td{border-bottom:0}
tbody tr:nth-child(even){background:rgba(248,244,239,.7)}
td.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:600;color:var(--copper)}
.price-group th{background:var(--sand);color:var(--cocoa);font-family:var(--font-display);font-size:1.05rem;letter-spacing:0;text-transform:none;font-weight:500}

/* ---------- 10. Accordion / FAQ ---------- */
.acc{border-top:var(--border)}
.acc__item{border-bottom:var(--border)}
.acc__btn{
  display:flex;width:100%;align-items:flex-start;justify-content:space-between;gap:var(--s5);
  padding:var(--s5) 0;background:none;border:0;cursor:pointer;text-align:left;
  font-family:var(--font-display);font-size:1.2rem;line-height:1.32;color:var(--espresso);
  transition:color var(--dur) var(--ease);
}
.acc__btn:hover{color:var(--copper)}
.acc__icon{position:relative;width:16px;height:16px;flex:none;margin-top:6px}
.acc__icon::before,.acc__icon::after{
  content:"";position:absolute;left:0;top:50%;width:16px;height:1.5px;background:var(--copper);
  transition:transform var(--dur-slow) var(--ease-out-expo);
}
.acc__icon::after{transform:rotate(90deg)}
.acc__btn[aria-expanded="true"] .acc__icon::after{transform:rotate(0)}
.acc__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur-slow) var(--ease-out-expo)}
.acc__panel[data-open="true"]{grid-template-rows:1fr}
.acc__inner{overflow:hidden}
.acc__inner > div{padding-bottom:var(--s5);max-width:70ch;color:var(--cocoa)}

/* ---------- 11. Reviews ---------- */
.reviews{overflow:hidden;position:relative}
.reviews::before,.reviews::after{
  content:"";position:absolute;top:0;bottom:0;width:64px;z-index:2;pointer-events:none;
}
.reviews::before{left:0;background:linear-gradient(90deg,var(--peach),transparent)}
.reviews::after{right:0;background:linear-gradient(270deg,var(--peach),transparent)}
.reviews__track{
  display:flex;gap:var(--s5);width:max-content;
  animation:marquee 66s linear infinite;
}
.reviews[data-paused="true"] .reviews__track{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .reviews__track{animation:none;overflow-x:auto;width:auto;scroll-snap-type:x mandatory;padding-bottom:var(--s4)}
  .review{scroll-snap-align:start}
}
.review{
  flex:0 0 300px;background:var(--white);border:var(--border);padding:var(--s5);
  display:flex;flex-direction:column;gap:var(--s3);
}
@media (min-width:768px){.review{flex-basis:352px}}
.review__stars{color:var(--attention);letter-spacing:.16em;font-size:.9rem}
.review__text{font-size:.93rem;color:var(--cocoa);line-height:1.6;flex:1}
.review__meta{display:flex;align-items:center;gap:var(--s3);font-size:.8rem;color:var(--stone);border-top:var(--border);padding-top:var(--s3)}
.review__avatar{
  width:34px;height:34px;border-radius:50%;background:var(--sand);flex:none;
  display:grid;place-items:center;font-weight:700;color:var(--copper);font-size:.85rem;
}
.reviews__ctrl{
  display:inline-flex;align-items:center;gap:var(--s2);background:var(--white);
  border:var(--border);padding:8px var(--s4);font-size:var(--t-micro);
  letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
}
.reviews__ctrl:hover{border-color:var(--copper);color:var(--copper)}

/* ---------- 12. Forms ---------- */
.field{position:relative;margin-bottom:var(--s5)}
.field label{display:block;font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--clay);margin-bottom:var(--s2)}
.field .req{color:var(--error)}
.field input,.field select,.field textarea{
  width:100%;padding:var(--s4);background:var(--white);
  border:1px solid rgba(112,84,63,.28);border-radius:0;font-size:1rem;
  transition:border-color var(--dur) var(--ease);
}
.field textarea{min-height:132px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--copper);box-shadow:0 0 0 3px rgba(112,84,63,.14)
}
.field input:user-invalid,.field textarea:user-invalid{border-color:var(--error)}
.field__hint{margin-top:var(--s2);font-size:var(--t-micro);color:var(--stone)}
.field__err{display:none;margin-top:var(--s2);font-size:var(--t-micro);color:var(--error)}
.field.has-error .field__err{display:block}
.check{display:flex;gap:var(--s3);align-items:flex-start;font-size:.82rem;color:var(--cocoa);line-height:1.5}
.check input{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--copper)}
.check a{border-bottom:1px solid var(--hazel)}
.form-note{font-size:var(--t-micro);color:var(--stone);line-height:1.55}
.form-status{display:none;padding:var(--s5);margin-top:var(--s5);border-left:2px solid var(--success);background:var(--success-bg);font-size:.92rem}
.form-status.is-visible{display:block}
.form-status.is-error{border-color:var(--error);background:var(--error-bg)}

/* ---------- 13. Doctors ---------- */
.doctor{position:relative;background:var(--white);border:var(--border);overflow:hidden;height:100%;display:flex;flex-direction:column}
.doctor__img{aspect-ratio:3/4;overflow:hidden;background:var(--peach)}
.doctor__img img{width:100%;height:100%;object-fit:cover;transition:transform 900ms var(--ease-out-expo)}
@media (hover:hover){.doctor:hover .doctor__img img{transform:scale(1.04)}}
.doctor__body{padding:var(--s5);flex:1;display:flex;flex-direction:column}
.doctor__role{font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--clay);margin-bottom:var(--s2)}
.doctor h3{font-size:1.36rem}
.doctor__spec{margin-top:var(--s3);font-size:.9rem;color:var(--cocoa)}
.doctor__creds{margin:var(--s4) 0 var(--s5);padding:0;list-style:none;font-size:.82rem;color:var(--stone);display:grid;gap:6px}
.doctor__creds li{padding-left:var(--s4);position:relative;line-height:1.5}
.doctor__creds li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:1px;background:var(--hazel)}

/* ---------- 14. Bylines, breadcrumbs, misc ---------- */
.byline{
  display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);align-items:center;
  padding:var(--s4) 0;border-block:var(--border);font-size:.8rem;color:var(--stone);
}
.byline strong{color:var(--cocoa);font-weight:600}
.crumbs{font-size:var(--t-micro);color:var(--stone);letter-spacing:.05em;padding-block:var(--s5) 0}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s2)}
.crumbs li:not(:last-child)::after{content:"/";margin-left:var(--s2);color:var(--hazel)}
.crumbs a:hover{color:var(--copper)}

.pagehead{padding-top:calc(var(--header-h) + var(--s6));padding-bottom:var(--s7);background:var(--peach)}
.pagehead h1{max-width:20ch;margin-top:var(--s4)}
.pagehead .lead{margin-top:var(--s5);max-width:58ch}

.prose{max-width:70ch}
.prose h2{margin-top:var(--s8);margin-bottom:var(--s4)}
.prose h3{margin-top:var(--s6);margin-bottom:var(--s3)}
.prose ul li,.prose ol li{margin-bottom:var(--s2)}
.prose > :first-child{margin-top:0}

.pill{display:inline-block;padding:5px var(--s4);border:1px solid var(--hazel);font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--cocoa)}
.note{border-left:2px solid var(--info);background:var(--info-bg);padding:var(--s5);font-size:.92rem;color:var(--cocoa)}
.note--warn{border-color:var(--attention);background:var(--attention-bg)}
.note strong{display:block;margin-bottom:var(--s2);color:var(--espresso)}

.cta-band{position:relative;overflow:hidden}
.cta-band__inner{position:relative;z-index:2;text-align:center;max-width:56ch;margin-inline:auto}
.cta-band__mark{
  position:absolute;right:-6%;bottom:-22%;width:min(460px,58vw);opacity:.07;z-index:1;pointer-events:none;
}

.footer{background:var(--espresso);color:#E9DFD3;padding-block:var(--s8) var(--s6);font-size:.9rem}
.footer a:hover{color:var(--hazel)}
.footer h4{color:var(--white);font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;margin-bottom:var(--s4);font-weight:600}
.footer__grid{display:grid;gap:var(--s7)}
@media (min-width:768px){.footer__grid{grid-template-columns:1.4fr 1fr 1fr 1.2fr}}
.footer__logo{height:44px;width:auto;margin-bottom:var(--s5)}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3)}
.footer__hours{display:grid;gap:6px;font-size:.86rem}
.footer__hours div{display:flex;justify-content:space-between;gap:var(--s4);max-width:280px}
.footer__hours span:last-child{color:var(--white)}
.footer__bottom{
  margin-top:var(--s8);padding-top:var(--s5);border-top:1px solid rgba(241,234,226,.14);
  display:flex;flex-wrap:wrap;gap:var(--s4) var(--s6);justify-content:space-between;font-size:var(--t-micro);
}
.footer__social{display:flex;gap:var(--s4)}
.footer__social a{display:grid;place-items:center;width:38px;height:38px;border:1px solid rgba(241,234,226,.22);transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.footer__social a:hover{border-color:var(--hazel);background:rgba(226,203,170,.1)}
.footer__social svg{width:16px;height:16px}

/* ---------- 15. Cookie consent ---------- */
.consent{
  position:fixed;left:var(--s4);right:var(--s4);bottom:var(--s4);z-index:960;
  max-width:520px;background:var(--white);border:var(--border-strong);box-shadow:var(--shadow-lg);
  padding:var(--s5);font-size:.86rem;line-height:1.6;
  transform:translateY(140%);transition:transform var(--dur-slow) var(--ease-out-expo);
}
.consent.is-visible{transform:translateY(0)}
@media (min-width:1100px){.consent{left:var(--s6);bottom:var(--s6);right:auto}}
.consent h4{margin-bottom:var(--s3)}
.consent__actions{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s5)}

/* ---------- 16. Motion utilities (progressive enhancement) ---------- */
[data-reveal]{opacity:1;transform:none}
.js [data-reveal]{opacity:0;transform:translateY(14px);
  transition:opacity 460ms var(--ease-out-expo),transform 560ms var(--ease-out-expo)}
.js [data-reveal].is-in{opacity:1;transform:none}
.js [data-reveal="mask"]{transform:none;opacity:1}
.js [data-reveal="mask"]>*{clip-path:inset(0 0 100% 0);transition:clip-path 1s var(--ease-out-expo)}
.js [data-reveal="mask"].is-in>*{clip-path:inset(0 0 0 0)}
.js [data-reveal-stagger] > *{opacity:0;transform:translateY(12px);
  transition:opacity 420ms var(--ease-out-expo),transform 520ms var(--ease-out-expo)}
.js [data-reveal-stagger].is-in > *{opacity:1;transform:none}
.js [data-reveal-stagger].is-in > *:nth-child(2){transition-delay:60ms}
.js [data-reveal-stagger].is-in > *:nth-child(3){transition-delay:120ms}
.js [data-reveal-stagger].is-in > *:nth-child(4){transition-delay:180ms}
.js [data-reveal-stagger].is-in > *:nth-child(5){transition-delay:240ms}
.js [data-reveal-stagger].is-in > *:nth-child(6){transition-delay:300ms}
.js [data-parallax]{will-change:transform}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .js [data-reveal],.js [data-reveal-stagger] > *{opacity:1 !important;transform:none !important}
  .js [data-reveal="mask"]>*{clip-path:none !important}
  .scene__track{height:auto}
  .scene__pin{position:static;height:auto;padding-block:var(--s8)}
  .scene__frame{width:100% !important;height:auto !important;aspect-ratio:16/10}
  .scene__caption{position:static;margin-top:var(--s6);padding-inline:0}
  .hero{min-height:auto;padding-top:var(--header-h)}
  .stickybar{transform:translateY(0)}
}

/* ---------- 17. Print & utilities ---------- */
.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.no-js-only{display:none}
html:not(.js) .no-js-only{display:block}
html:not(.js) .js-only{display:none}
@media print{
  .header,.stickybar,.consent,.drawer,.footer__social{display:none}
  body{color:#000;background:#fff}
}

/* ---------- 18. Header over a dark hero -----------------------------------
   On pages that open with a full-bleed hero the header sits on the image and
   must invert. It returns to the solid light treatment the moment the user
   scrolls, so contrast is never in doubt against the page background. */
.header__logo-light{display:none}
.header--onHero:not(.is-solid):not(.is-open) .header__logo-dark{display:none}
.header--onHero:not(.is-solid):not(.is-open) .header__logo-light{display:block}
.header--onHero:not(.is-solid):not(.is-open) .navitem__link{color:var(--white)}
.header--onHero:not(.is-solid):not(.is-open) .navitem__link::after{background:var(--hazel)}
.header--onHero:not(.is-solid):not(.is-open) .lang__toggle{color:var(--white);border-color:rgba(255,255,255,.4)}
.header--onHero:not(.is-solid):not(.is-open) .lang__toggle:hover{background:rgba(255,255,255,.12);border-color:var(--white)}
.header--onHero:not(.is-solid):not(.is-open) .burger span{background:var(--white)}

/* ---------- 19. Blog article components -----------------------------------
   The answer box and the takeaways list are the AI-extraction surfaces. They
   are marked up as `speakable` in the Article schema, so they must stay first
   in the document after the byline and must never be collapsed behind JS. */
.answer-box{
  border-left:2px solid var(--copper);background:var(--sand);
  padding:var(--s6);margin-bottom:var(--s7);
}
.answer-box .eyebrow{margin-bottom:var(--s3);color:var(--copper)}
.answer-box__text{
  margin:0;font-family:var(--font-display);font-size:clamp(1.2rem,1.05rem + .7vw,1.55rem);
  line-height:1.45;color:var(--espresso);
}
.takeaways{border:var(--border);padding:var(--s6);background:var(--linen)}
.takeaways ul{margin:var(--s4) 0 0;padding:0;list-style:none;display:grid;gap:var(--s3)}
.takeaways li{position:relative;padding-left:var(--s6);line-height:1.6;font-size:.98rem}
.takeaways li::before{
  content:"";position:absolute;left:0;top:.66em;width:14px;height:1px;background:var(--copper);
}
.inline-cta{
  margin-top:var(--s8);padding:var(--s6);background:var(--peach);
  border-top:2px solid var(--copper);
}
.inline-cta p{margin:var(--s3) 0 var(--s5);color:var(--cocoa);max-width:56ch}

/* ---------- 20. FAQ hub navigation ---------------------------------------- */
.faq-nav{margin-top:var(--s6);border-top:var(--border)}
.faq-nav ul{list-style:none;margin:0;padding:0}
.faq-nav li{border-bottom:var(--border)}
.faq-nav a{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);
  padding:var(--s3) 0;font-size:.92rem;color:var(--cocoa);
  transition:color var(--dur) var(--ease),padding-left var(--dur) var(--ease);
}
.faq-nav a span{font-size:var(--t-micro);color:var(--stone);font-variant-numeric:tabular-nums}
@media (hover:hover){.faq-nav a:hover{color:var(--copper);padding-left:var(--s2)}}

/* ==========================================================================
   21. HOMEPAGE v2 — cinematic layer
   ========================================================================== */

/* Ken Burns: slow drift on the hero plate. GPU-composited, pauses for
   reduced motion. */
.hero__media--kenburns img{
  animation:kenburns 26s var(--ease) both alternate infinite;
  transform-origin:56% 42%;
}
@keyframes kenburns{
  from{transform:scale(1.02) translate3d(0,0,0)}
  to{transform:scale(1.12) translate3d(-1.6%,1.2%,0)}
}

/* Hero title: cinematic rise on load — solid text, motion only. */
.hero__title{overflow:hidden}
.hero__title span{display:block;transform:translateY(112%);animation:heroRise 650ms 100ms var(--ease-out-expo) forwards}
@keyframes heroRise{to{transform:translateY(0)}}
.hero__eyebrow{animation:heroFadeIn 700ms 60ms var(--ease) both}
.hero--clean .hero__lead{animation:heroFadeIn 700ms 420ms var(--ease) both}
.hero--clean .hero__actions{animation:heroFadeIn 700ms 620ms var(--ease) both}
@keyframes heroFadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (max-width:767px){
  .hero{min-height:92svh}
  .hero__inner{padding-block:var(--s7) calc(var(--s7) + 60px)}
}

/* Slogan marquee — alive, continuous, zero transparency. */
.marquee{
  overflow:hidden;background:var(--copper);color:var(--white);
  border-block:1px solid rgba(255,255,255,.14);
}
.marquee__track{
  display:flex;align-items:center;gap:var(--s6);width:max-content;
  padding-block:14px;
  font-family:var(--font-display);font-size:clamp(1.05rem,1rem + .5vw,1.45rem);
  letter-spacing:.02em;white-space:nowrap;
  animation:marqueeSlide 34s linear infinite;
}
.marquee__track i{font-style:normal;color:var(--hazel);margin-inline:var(--s3)}
@keyframes marqueeSlide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee__track{animation:none}}

/* Free implant consultation band */
.freeband{
  position:relative;overflow:hidden;background:
    radial-gradient(120% 140% at 82% -20%,#8A6A50 0%,var(--copper) 46%,#5C4433 100%);
  color:var(--white);padding-block:var(--s9);text-align:center;
}
@media (min-width:1024px){.freeband{padding-block:var(--s10)}}
.freeband__glow{
  position:absolute;inset:auto -20% -60% -20%;height:120%;pointer-events:none;
  background:radial-gradient(52% 52% at 50% 100%,rgba(226,203,170,.34),transparent 70%);
}
.freeband__mark{position:absolute;right:-7%;top:-18%;width:min(480px,52vw);opacity:.1;pointer-events:none}
.freeband__inner{position:relative;z-index:2;max-width:820px}
.freeband__eyebrow{justify-content:center;color:var(--hazel)}
.freeband__title{color:var(--white);font-size:clamp(1.7rem,1.3rem + 2.4vw,3.1rem);max-width:22ch;margin-inline:auto}
.freeband__lead{color:#F7F1E8;max-width:52ch;margin:var(--s5) auto var(--s6);font-size:clamp(1rem,.96rem + .3vw,1.18rem)}

/* Results counters */
.results{
  display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s7) var(--s5);
  margin:var(--s8) 0 0;padding:0;
}
@media (min-width:900px){.results{grid-template-columns:repeat(4,1fr)}}
.results__item{border-top:2px solid var(--hazel);padding-top:var(--s5)}
.results__item dd{
  margin:0;font-family:var(--font-display);
  font-size:clamp(2.5rem,1.7rem + 3.6vw,4.4rem);line-height:1;color:var(--copper);
  font-variant-numeric:tabular-nums;
}
.results__item dt{margin-top:var(--s3);font-size:.9rem;color:#5C4E44;line-height:1.45}

/* Value cards */
.value{border-top:1px solid rgba(112,84,63,.22);padding-top:var(--s5)}

/* Compact byline */
.byline--compact{
  display:block;border:0;padding:0;margin:0;
  font-size:.82rem;color:#7B6C61;
}

/* Evidence sources tucked away */
.evidence__details{margin-top:var(--s3)}
.evidence__details summary{
  cursor:pointer;font-size:var(--t-micro);letter-spacing:.08em;text-transform:uppercase;
  color:#8A7B70;list-style:none;display:inline-flex;align-items:center;gap:6px;
}
.evidence__details summary::-webkit-details-marker{display:none}
.evidence__details summary::after{content:"+";font-size:.9rem;color:var(--copper)}
.evidence__details[open] summary::after{content:"–"}
.evidence__details .evidence__src{margin-top:var(--s2)}

/* ==========================================================================
   22. Mobile polish — the phone is the primary device
   ========================================================================== */
@media (max-width:767px){
  .section{padding-block:var(--s7)}
  .pagehead{padding-top:calc(var(--header-h) + var(--s5));padding-bottom:var(--s6)}
  .pagehead .lead{font-size:1rem}
  .split{gap:var(--s5)}
  .grid{gap:var(--s4)}
  .card__body{padding:var(--s4)}
  .card h3{font-size:1.18rem}
  .doctor__body{padding:var(--s4)}
  .btn{min-height:50px;padding:var(--s3) var(--s5);font-size:.78rem}
  .stat dd{font-size:2rem}
  .eyebrow{font-size:.68rem;letter-spacing:.18em}
  .table-wrap table{font-size:.86rem}
  th,td{padding:var(--s3) var(--s4)}
  .acc__btn{font-size:1.06rem;padding:var(--s4) 0}
  .answer-box{padding:var(--s5)}
  .answer-box__text{font-size:1.12rem}
  .takeaways{padding:var(--s5)}
  .inline-cta{padding:var(--s5)}
  .footer{font-size:.86rem}
  .footer__grid{gap:var(--s6)}
  .xfade{aspect-ratio:4/3}
  .xfade__step{padding:var(--s4) 0 var(--s4) var(--s5)}
  .xfade__step p{font-size:.88rem}
  .scene__track{height:220vh}
  .marquee__track{padding-block:11px}
  .results{gap:var(--s6) var(--s4)}
  .mega{display:none}
}
/* Larger touch targets for the sticky bar; keep it clear of content */
@media (max-width:1099px){
  body{padding-bottom:calc(56px + env(safe-area-inset-bottom, 0px))}
}

/* Compact consent sheet on mobile — never dominates the screen */
@media (max-width:767px){
  .consent{left:var(--s3);right:var(--s3);bottom:var(--s3);padding:var(--s4);font-size:.8rem;line-height:1.5;max-width:none}
  .consent h4{font-size:.9rem;margin-bottom:var(--s2)}
  .consent__actions{margin-top:var(--s4);gap:var(--s2)}
  .consent__actions .btn{min-height:44px;padding:var(--s2) var(--s4);font-size:.72rem;flex:1}
}

/* ---------- 23. Homepage gallery strip + hero team framing ---------------- */
.hero__teamimg{object-position:50% 24%}
@media (max-width:760px){.hero__teamimg{object-position:50% 0}}

.gallery{margin-top:var(--s7);overflow:hidden}
.gallery__track{
  display:flex;gap:var(--s4);width:max-content;
  animation:marqueeSlide 52s linear infinite;
}
.gallery:hover .gallery__track{animation-play-state:paused}
.gallery__cell{
  margin:0;flex:0 0 232px;overflow:hidden;
}
@media (min-width:768px){.gallery__cell{flex-basis:296px}}
.gallery__cell img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/4;
  transition:transform 800ms var(--ease-out-expo)}
@media (hover:hover){.gallery__cell:hover img{transform:scale(1.05)}}
@media (prefers-reduced-motion:reduce){
  .gallery__track{animation:none;overflow-x:auto;width:auto}
}

.mission__img{aspect-ratio:4/5;object-fit:cover;width:100%}

/* ==========================================================================
   §24. MOLTEN ATELIER — Brand System v2 re-skin (Bible III, 08.2026)
   Dark-luxe: vault/espresso grounds alternating with linen exhales,
   glass panels over photography, foil display type, grain, emboss monogram.
   Mobile-first: base styles compose the phone; min-width queries enhance.
   ========================================================================== */
:root{
  --vault:#171210;
  --vault2:#221A15;
  --molten:#C79A62;
  --foil:linear-gradient(105deg,#8A6A52 0%,#C79A62 30%,#EFDFC8 52%,#C79A62 72%,#8A6A52 100%);
  --glass-tint:rgba(23,18,16,.60);
  --glass-line:rgba(226,203,170,.30);
  --radius-glass:26px;
  --shadow-lift:0 24px 60px -24px rgba(23,18,16,.45);
}

/* --- grain (data-URI noise, GPU-cheap, once per surface) --- */
.grain{position:relative}
.grain::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.55'/></svg>")}

/* --- dark section grounds --- */
.section--vault{background:var(--vault) url('/img/tex/vault.jpg') center/cover no-repeat;color:var(--peach)}
.section--espresso{background:linear-gradient(rgba(34,26,21,.78),rgba(34,26,21,.86)),url('/img/tex/emboss.jpg') center/cover no-repeat var(--vault2);color:var(--peach)}
.section--vault h2,.section--espresso h2,.section--vault h3,.section--espresso h3{color:var(--peach)}
.section--vault .eyebrow,.section--espresso .eyebrow{color:var(--hazel)}
.section--vault .eyebrow::before,.section--espresso .eyebrow::before{background:var(--molten)}
.section--vault .lead,.section--espresso .lead{color:rgba(241,234,226,.82)}

/* --- foil display text --- */
.foil,.results dd{background:var(--foil);-webkit-background-clip:text;background-clip:text;color:transparent}
@supports not (background-clip:text){.foil,.results dd{color:var(--hazel)}}

/* --- glass panel utility --- */
.glass{background:var(--glass-tint);border:1px solid var(--glass-line);border-radius:var(--radius-glass);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.glass{background:rgba(23,18,16,.82)}}

/* --- HERO: vault scrim, chips, foil title --- */
.hero--clean .hero__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(23,18,16,.42) 0%,rgba(23,18,16,.18) 34%,rgba(23,18,16,.36) 62%,rgba(23,18,16,.88) 100%)}
.hero--clean .hero__inner{background:none}
.hero__title{color:var(--peach)}
.hero__title span{background:var(--foil);-webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:220% 100%;background-position:18% 0}
@supports not (background-clip:text){.hero__title span{color:var(--hazel)}}
@media (prefers-reduced-motion:no-preference){
  .hero__title span{animation:heroRise 650ms 100ms var(--ease-out-expo) forwards,foilsweep 9s var(--ease) 1s infinite alternate}
  @keyframes foilsweep{from{background-position:12% 0}to{background-position:78% 0}}
}
.hero__eyebrow{color:var(--hazel)}
.hero__lead{color:rgba(248,244,239,.92)}

/* --- RESULTS: dark proof scene --- */
.results-scene{position:relative;overflow:hidden}
.results-scene::before{content:"";position:absolute;inset:-8% -20%;background:url('/img/tex/arc-halo.jpg') center/cover no-repeat;opacity:.5;pointer-events:none}
.results-scene .container{position:relative;z-index:1}
.results{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4)}
.results__item{background:rgba(23,18,16,.55);border:1px solid var(--glass-line);border-radius:var(--radius-glass);
  padding:var(--s5) var(--s4);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.results dd{font-family:var(--font-display);font-weight:600;font-size:clamp(2.3rem,1.6rem + 4vw,4.2rem);line-height:1}
.results dt{margin-top:var(--s2);font-size:.8rem;letter-spacing:.05em;color:rgba(241,234,226,.75);text-transform:uppercase}
.results-note{margin-top:var(--s5);font-size:.72rem;letter-spacing:.04em;color:rgba(241,234,226,.55)}
@media (min-width:820px){.results{grid-template-columns:repeat(4,1fr);gap:var(--s5)}.results__item{padding:var(--s6) var(--s5)}}

/* --- DOCTORS: dark gallery of plates --- */
.doctors-dark .doctor{background:rgba(34,26,21,.66);border:1px solid var(--glass-line);border-radius:var(--radius-glass);
  overflow:hidden;box-shadow:var(--shadow-lift)}
.doctors-dark .doctor__img{border-radius:0}
.doctors-dark .doctor__img img{transition:transform 1.2s var(--ease-out-expo)}
.doctors-dark .doctor:hover .doctor__img img{transform:scale(1.045)}
.doctors-dark .doctor__body{padding:var(--s5)}
.doctors-dark .doctor__role{color:var(--molten)}
.doctors-dark .doctor__body h3{color:var(--peach)}
.doctors-dark .doctor__spec{color:rgba(241,234,226,.78)}
.doctors-dark .link-arrow{color:var(--hazel)}

/* --- MARQUEE: vault + foil words --- */
.marquee{background:var(--vault);border-block:1px solid rgba(226,203,170,.14)}
.marquee__track span{background:var(--foil);-webkit-background-clip:text;background-clip:text;color:transparent}
@supports not (background-clip:text){.marquee__track span{color:var(--hazel)}}
.marquee__track i{color:rgba(199,154,98,.6)}

/* --- VALUES: five medallions --- */
.grid-5{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4)}
@media (min-width:900px){.grid-5{grid-template-columns:repeat(5,1fr);gap:var(--s5)}}
.value{border-top:2px solid var(--molten);padding-top:var(--s4)}
.value .serif-num{background:var(--foil);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:1.6rem}
@supports not (background-clip:text){.value .serif-num{color:var(--molten)}}

/* --- FREEBAND: photography + glass --- */
.freeband{position:relative;isolation:isolate;background:var(--vault2);overflow:hidden}
.freeband::before{content:"";position:absolute;inset:0;background:url('/img/home/banner-team.jpg') center 30%/cover no-repeat;opacity:.5;z-index:-2}
.freeband::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,18,16,.86),rgba(23,18,16,.55) 45%,rgba(23,18,16,.9));z-index:-1}
.freeband__glow{display:none}
.freeband__inner{position:relative;padding-block:var(--s9);max-width:820px;margin-inline:auto;text-align:center}
.freeband__inner{background:rgba(23,18,16,.5);border:1px solid var(--glass-line);border-radius:var(--radius-glass);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);padding:var(--s7) var(--s5)}
.freeband__title{background:var(--foil);-webkit-background-clip:text;background-clip:text;color:transparent}
@supports not (background-clip:text){.freeband__title{color:var(--hazel)}}
@media (min-width:820px){.freeband__inner{padding:var(--s8) var(--s8)}}

/* --- CARDS: hairline lift --- */
.card{border-radius:var(--radius-glass);overflow:hidden;border:1px solid rgba(112,84,63,.16);background:var(--white);
  transition:transform .45s var(--ease-out-expo)}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift)}
.card__img img{transition:transform 1.1s var(--ease-out-expo)}
.card:hover .card__img img{transform:scale(1.05)}

/* --- SCENE + CTA BAND + FOOTER --- */
.cta-band{background:linear-gradient(rgba(23,18,16,.72),rgba(23,18,16,.84)),url('/img/tex/emboss.jpg') center/cover no-repeat var(--vault2)}
.cta-band__motto{font-family:var(--font-display);font-style:italic;font-weight:600;
  font-size:clamp(1.3rem,1.1rem + 1.4vw,2rem);margin-top:var(--s4);
  background:var(--foil);-webkit-background-clip:text;background-clip:text;color:transparent}
@supports not (background-clip:text){.cta-band__motto{color:var(--hazel)}}
.footer{position:relative;background:var(--vault)}
.footer::before{content:"";position:absolute;inset:0;background:url('/img/tex/emboss.jpg') center/cover no-repeat;opacity:.28;pointer-events:none}
.footer>*{position:relative}

/* --- BUTTONS: gold gradient primary on dark --- */

.btn--onDark{background:linear-gradient(120deg,#8A6A52,#C79A62 45%,#D9B37E);color:var(--vault);border:0;font-weight:600}

/* --- GALLERY strip: taller, rounded, hairline --- */
.gallery__cell{border-radius:18px;overflow:hidden;border:1px solid rgba(112,84,63,.2)}

/* --- section rhythm helpers --- */
.bg-vault-photo{position:relative;isolation:isolate;color:var(--peach)}
.bg-vault-photo>.bgimg{position:absolute;inset:0;z-index:-2}
.bg-vault-photo>.bgimg img{width:100%;height:100%;object-fit:cover}
.bg-vault-photo::after{content:"";position:absolute;inset:0;background:rgba(23,18,16,.72);z-index:-1}

/* --- service page diagram figure --- */
.diagram-figure{margin-top:var(--s6);border-radius:var(--radius-glass);overflow:hidden;border:1px solid rgba(112,84,63,.2);box-shadow:var(--shadow-lift)}
.diagram-figure img{width:100%;height:auto;display:block}

/* --- blog imagery --- */
.post-card__img{aspect-ratio:16/9;overflow:hidden;border-radius:14px;margin-bottom:var(--s4);border:1px solid rgba(112,84,63,.16)}
.post-card__img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease-out-expo)}
.post-card:hover .post-card__img img{transform:scale(1.05)}
.post-hero-img{aspect-ratio:16/9;overflow:hidden;border-radius:var(--radius-glass);margin:var(--s6) 0;border:1px solid rgba(112,84,63,.18)}
.post-hero-img img{width:100%;height:100%;object-fit:cover}

/* --- mobile polish for the dark scenes --- */
@media (max-width:640px){
  .hero__chips span{font-size:.72rem;padding:8px 12px}
  .results dd{font-size:clamp(2.1rem,1.4rem + 6vw,3rem)}
  .freeband__inner{margin-inline:var(--gutter)}
}

@media (prefers-reduced-motion:reduce){
  .hero__title span{animation:none;transform:none}
}

/* §24b. pagehead hero line + contact order */
.pagehead__heroline{font-family:var(--font-display);font-weight:600;font-style:italic;
  font-size:clamp(1.45rem,1.15rem + 1.8vw,2.3rem);line-height:1.15;margin-top:var(--s3)}
.doctors-dark .doctor__creds{color:rgba(241,234,226,.72)}
.doctors-dark .doctor__creds li::before{background:var(--molten)}

/* ==========================================================================
   §25. ATELIER FX — multi-layer fluid atmosphere
   Drifting molten mist, light beams, conic rings, glass depth, pointer glow.
   All layers are transform/opacity/filter only (GPU-composited), decorative
   (aria-hidden), collapse under prefers-reduced-motion, and thin out on
   small screens. Mobile composes first; desktop adds richness.
   ========================================================================== */

/* --- layer scaffold --- */
.fx{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.fx ~ .container,.fx ~ .hero__inner{position:relative;z-index:2}
.fx__blob{position:absolute;border-radius:50%;filter:blur(64px);opacity:.55;will-change:transform;mix-blend-mode:screen}
.fx__blob--1{width:56vmax;height:56vmax;left:-18vmax;top:-14vmax;
  background:radial-gradient(circle at 35% 35%,rgba(199,154,98,.50),rgba(199,154,98,0) 62%);
  animation:fxDrift1 26s ease-in-out infinite alternate}
.fx__blob--2{width:48vmax;height:48vmax;right:-16vmax;top:16%;
  background:radial-gradient(circle at 60% 40%,rgba(226,203,170,.38),rgba(226,203,170,0) 60%);
  animation:fxDrift2 34s ease-in-out infinite alternate}
.fx__blob--3{width:42vmax;height:42vmax;left:20%;bottom:-22vmax;
  background:radial-gradient(circle at 50% 50%,rgba(138,106,82,.45),rgba(138,106,82,0) 65%);
  animation:fxDrift3 40s ease-in-out infinite alternate}
@keyframes fxDrift1{to{transform:translate(9vmax,6vmax) scale(1.12)}}
@keyframes fxDrift2{to{transform:translate(-7vmax,-5vmax) scale(1.08)}}
@keyframes fxDrift3{to{transform:translate(6vmax,-8vmax) scale(1.15)}}

/* fog sheet — slow horizontal drift */
.fx__fog{position:absolute;inset:-10% -30%;opacity:.5;will-change:transform;
  background:
    radial-gradient(42% 34% at 22% 64%,rgba(239,223,200,.10),transparent 70%),
    radial-gradient(36% 30% at 74% 28%,rgba(226,203,170,.08),transparent 70%),
    radial-gradient(30% 26% at 55% 80%,rgba(199,154,98,.07),transparent 70%);
  animation:fxFog 46s ease-in-out infinite alternate}
@keyframes fxFog{to{transform:translateX(6%) translateY(-2%)}}

/* light beam sweep */
.fx__beam{position:absolute;inset:-20%;will-change:transform;
  background:linear-gradient(115deg,transparent 42%,rgba(239,223,200,.09) 50%,transparent 58%);
  animation:fxBeam 16s var(--ease) infinite alternate}
@keyframes fxBeam{from{transform:translateX(-10%)}to{transform:translateX(10%)}}

/* conic hairline rings */
.fx__ring{position:absolute;left:50%;top:50%;width:min(78vmin,720px);aspect-ratio:1;border-radius:50%;
  transform:translate(-50%,-50%);opacity:.8;will-change:transform;
  background:conic-gradient(from 20deg,transparent 0 68%,rgba(199,154,98,.4) 82%,transparent 94%);
  -webkit-mask:radial-gradient(closest-side,transparent calc(100% - 2px),#000 calc(100% - 1px));
  mask:radial-gradient(closest-side,transparent calc(100% - 2px),#000 calc(100% - 1px));
  animation:fxSpin 46s linear infinite}
.fx__ring--2{width:min(56vmin,520px);animation-duration:64s;animation-direction:reverse;opacity:.55}
@keyframes fxSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* pointer-reactive glow (set via JS on dark scenes, desktop only) */
.fx__glow{position:absolute;inset:0;opacity:0;transition:opacity .5s var(--ease);
  background:radial-gradient(460px circle at var(--gx,50%) var(--gy,50%),rgba(226,203,170,.12),transparent 65%)}
.fx-glow-on .fx__glow{opacity:1}

/* light variant for bright sections */
.fx--light .fx__blob{mix-blend-mode:normal;opacity:.35;filter:blur(70px)}
.fx--light .fx__blob--1{background:radial-gradient(circle at 35% 35%,rgba(226,203,170,.55),rgba(226,203,170,0) 62%)}
.fx--light .fx__blob--2{background:radial-gradient(circle at 60% 40%,rgba(199,154,98,.30),rgba(199,154,98,0) 60%)}
.fx--light .fx__beam{background:linear-gradient(115deg,transparent 44%,rgba(255,255,255,.35) 50%,transparent 56%)}

/* --- pagehead: layered light atmosphere on every inner page --- */
.pagehead{position:relative;overflow:hidden;
  background:linear-gradient(180deg,#F8F3EB 0%,var(--peach) 58%,#EFE6D9 100%)}
.pagehead::after{content:"";position:absolute;right:-18%;top:-40%;width:60vmin;height:60vmin;opacity:.5;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,rgba(226,203,170,.5),transparent 66%)}
.pagehead .container{position:relative;z-index:2}

/* --- hero seam: fade into the vault results scene --- */
.hero--clean::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:140px;z-index:3;pointer-events:none;
  background:linear-gradient(180deg,rgba(23,18,16,0),var(--vault))}
.results-scene{background-color:var(--vault)}

/* --- marquee edge masks --- */
.marquee{-webkit-mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}

/* --- glass-light cards on bright sections --- */
.card{background:rgba(255,255,255,.66);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.card:hover{box-shadow:0 34px 90px -34px rgba(112,84,63,.5),0 18px 50px -24px rgba(199,154,98,.35)}

/* --- CTA button shine sweep --- */
.btn--onDark{position:relative;overflow:hidden}
.btn--onDark::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.4) 50%,transparent 68%);
  transform:translateX(-140%)}
.btn--onDark:hover::after{transform:translateX(140%);transition:transform .9s var(--ease)}

/* --- doctor / glass card inner hairline depth --- */
.doctors-dark .doctor{position:relative}
.doctors-dark .doctor::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(239,223,200,.16),inset 0 -1px 0 rgba(0,0,0,.35)}
.results__item{position:relative}
.results__item::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(239,223,200,.14)}

/* --- freeband ring placement --- */
.freeband .fx__ring{top:46%}

/* --- perf & motion guards --- */
@media (max-width:640px){
  .fx__blob{filter:blur(46px)}
  .fx__blob--3{display:none}
  .fx__ring{width:88vmin}
}
@media (prefers-reduced-motion:reduce){
  .fx__blob,.fx__beam,.fx__fog,.fx__ring{animation:none}
  .btn--onDark::after{display:none}
}
.section--fx{position:relative;overflow:hidden}

/* ==========================================================================
   §26. v7 refinement — owner review 24.08 (evening)
   Smaller type, tighter rhythm, compact chrome, correct hero art direction.
   ========================================================================== */

/* --- global type scale down + tighter leading --- */
:root{
  --t-hero:clamp(1.9rem,1.2rem + 3.4vw,4.2rem);
  --t-h1:clamp(1.6rem,1.15rem + 2.2vw,3rem);
  --t-h2:clamp(1.3rem,1.05rem + 1.4vw,2.15rem);
  --t-h3:clamp(1.15rem,1.02rem + 0.6vw,1.45rem);
  --t-body:clamp(.95rem,.93rem + .1vw,1rem);
  --t-lead:clamp(.98rem,.94rem + .25vw,1.12rem);
}
body{line-height:1.55}
.lead{line-height:1.55}
.prose p{line-height:1.6}
.stack .lead{font-size:var(--t-lead)}
h2{line-height:1.12}
.hero__lead{font-size:clamp(.95rem,.9rem + .3vw,1.1rem);line-height:1.5}

/* --- pagehead: compact, useful, no dead air --- */
.pagehead{padding-top:calc(var(--header-h) + var(--s4));padding-bottom:var(--s5)}
.pagehead h1{margin-top:var(--s2)}
.pagehead .lead{margin-top:var(--s3);max-width:60ch;font-size:var(--t-lead)}
.pagehead__heroline{font-size:clamp(1.2rem,1.05rem + 1vw,1.7rem);margin-top:var(--s2)}
.crumbs{font-size:.68rem;letter-spacing:.02em;opacity:.75}
.crumbs ol{display:flex;flex-wrap:wrap;gap:6px}
.section--tight[style*="padding-top:var(--s6)"]{padding-top:var(--s4) !important}

/* --- mobile hero: whole team visible, text below the faces, no dead gap --- */
.hero--clean{min-height:auto}
@media (max-width:760px){
  .hero--clean{display:block;background:var(--vault)}
  .hero--clean .hero__media{position:relative;inset:auto;width:100%;aspect-ratio:1080/620;margin-top:var(--header-h)}
  .hero--clean .hero__media img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
  .hero--clean .hero__media::after{background:linear-gradient(180deg,rgba(23,18,16,0) 55%,rgba(23,18,16,.45) 82%,var(--vault) 100%)}
  .hero--clean .hero__inner{padding-top:var(--s2);padding-bottom:var(--s6)}
}
.hero--clean .hero__inner{padding-bottom:var(--s6)}
.hero--clean .hero__media::after{
  background:linear-gradient(180deg,rgba(23,18,16,.28) 0%,rgba(23,18,16,.04) 26%,rgba(23,18,16,.30) 48%,rgba(23,18,16,.85) 74%,var(--vault) 100%)}
.hero--clean::after{height:60px}
.hero__chips{margin-top:var(--s4)}
.hero__actions{margin-top:var(--s4)}
@media (min-width:761px){
  .hero--clean{min-height:92svh;display:flex;align-items:flex-end}
  .hero--clean .hero__inner{padding-top:calc(var(--header-h) + var(--s8))}
}
/* results follows hero tightly */
.results-scene{padding-block:var(--s7)}
@media (min-width:768px){.results-scene{padding-block:var(--s8)}}

/* --- values: six numbered one-liners, alternating grounds --- */
.values-list{list-style:none;margin:0;padding:0;border:1px solid rgba(112,84,63,.16);border-radius:18px;overflow:hidden}
.values-list__row{
  display:grid;grid-template-columns:auto 1fr;gap:2px var(--s4);align-items:baseline;
  padding:12px var(--s4);border-top:1px solid rgba(112,84,63,.14)}
.values-list__row:first-child{border-top:0}
.values-list__row:nth-child(odd){background:var(--linen)}
.values-list__row:nth-child(even){background:var(--sand)}
.values-list__num{grid-row:1 / span 2;font-family:var(--font-display);font-weight:600;font-size:1.25rem;
  background:var(--foil);-webkit-background-clip:text;background-clip:text;color:transparent;min-width:2ch}
@supports not (background-clip:text){.values-list__num{color:var(--copper)}}
.values-list__name{font-family:var(--font-text);font-weight:600;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--clay)}
.values-list__line{font-family:var(--font-display);font-weight:600;font-size:clamp(1.02rem,.98rem + .5vw,1.35rem);line-height:1.2;color:var(--espresso)}
@media (min-width:760px){
  .values-list__row{grid-template-columns:3rem 12rem 1fr;align-items:center;padding:13px var(--s5)}
  .values-list__num{grid-row:auto}
}

/* --- CTA buttons: dimensional, moving glare --- */
.btn--onDark{
  background:linear-gradient(160deg,#D9B37E 0%,#C79A62 38%,#8A6A52 100%);
  box-shadow:0 14px 34px -14px rgba(199,154,98,.55),inset 0 1px 0 rgba(255,255,255,.45),inset 0 -2px 6px rgba(90,62,40,.35);
  text-shadow:0 1px 0 rgba(255,255,255,.25)}
.btn--onDark::after{
  transform:translateX(-160%) skewX(-18deg);
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.5) 46%,rgba(255,255,255,.16) 52%,transparent 66%)}
@media (prefers-reduced-motion:no-preference){
  .btn--onDark::after{animation:btnGlare 4.6s var(--ease) 1.2s infinite}
  @keyframes btnGlare{0%{transform:translateX(-160%) skewX(-18deg)}38%,100%{transform:translateX(180%) skewX(-18deg)}}
}
.btn--onDark:hover{filter:brightness(1.08)}
/* secondary: solid glass, no backdrop dependency, readable everywhere */

.btn--light{
  background:rgba(23,18,16,.62);color:#F8F4EF;border:1px solid rgba(226,203,170,.6);
  box-shadow:inset 0 1px 0 rgba(248,244,239,.12),0 10px 26px -14px rgba(0,0,0,.5)}

/* --- freeband: centered panel, tight --- */
.freeband__inner{margin-inline:auto !important;width:min(100%,820px);text-align:center}
.freeband__inner .btn-row{justify-content:center}
@media (max-width:640px){
  .freeband{padding-inline:var(--gutter)}
  .freeband .container.freeband__inner{padding:var(--s6) var(--s4)}
}

/* --- drawer: compact rows --- */
.drawer{font-size:.95rem}
.drawer__toggle{padding-block:11px;font-size:1.02rem}
.drawer__panel{padding-bottom:var(--s3)}
.drawer__panel a{padding-block:7px;font-size:.92rem}
.drawer a{min-height:40px}
.drawer .drawer__group > a{padding-block:11px;font-size:1.02rem}

/* --- section rhythm slightly tighter on phones --- */
@media (max-width:640px){
  .section{padding-block:var(--s7)}
  .section--tight{padding-block:var(--s6)}
  .pagehead{padding-top:calc(var(--header-h) + var(--s3));padding-bottom:var(--s4)}
}

/* --- service detail strip --- */
.svc-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);margin-top:var(--s6)}
.svc-strip figure{margin:0;border-radius:14px;overflow:hidden;border:1px solid rgba(112,84,63,.18);aspect-ratio:4/3}
.svc-strip img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease-out-expo)}
.svc-strip figure:hover img{transform:scale(1.05)}
@media (max-width:640px){.svc-strip{grid-template-columns:repeat(3,1fr);gap:var(--s2)}}
.drawer__grouplabel{font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--clay);margin:var(--s4) 0 var(--s2)}
.drawer__grouplabel:first-child{margin-top:var(--s2)}

/* §27. Button fill fix — the base .btn paints its fill via ::before (var-driven),
   which was covering the v2 gradient/glass backgrounds. Kill it for the two
   dark-scene variants and pin their colors through every state. */
.btn--onDark::before,.btn--light::before{display:none}
.btn--onDark{color:var(--vault)}
.btn--onDark:hover{color:var(--vault);border-color:transparent}
.btn--light{color:#F8F4EF}
.btn--light:hover{color:#fff;border-color:rgba(226,203,170,.85);background:rgba(23,18,16,.8)}
/* §27b. compact drawer rows (owner: menu too wide/spaced) */
.drawer__link{padding:12px 0;font-size:1.12rem}
.drawer__toggle{padding-block:12px;font-family:var(--font-display);font-size:1.12rem;font-weight:500}
.drawer__sublink{padding:6px 0 6px var(--s4);font-size:.9rem}
.drawer__foot{padding-top:var(--s5)}
.drawer .container{padding-top:var(--s2)}


/* §28. audit fixes */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.linklike{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}
.footer__h4{font-family:var(--font-text);font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--hazel);margin-bottom:var(--s4)}
.consent__title{font-weight:600;font-size:1.02rem;margin-bottom:var(--s3)}
input,select,textarea,button{font-size:max(1rem,16px)}
.btn,.btn--sm{font-size:.83rem}
.btn{font-size:max(.83rem, 13px)}

/* ==========================================================================
   §29. v8 — Atelier hero, animated values, richer pages, 4-action ribbon,
   dimensional pill buttons, micro breadcrumbs, fluid blog, de-yellowed light.
   ========================================================================== */

/* --- de-yellow the light rhythm --- */
.values-list__row:nth-child(even){background:#F3EFE9}
.freeband::after{background:linear-gradient(180deg,rgba(20,16,14,.88),rgba(20,16,14,.55) 45%,rgba(20,16,14,.9))}
.pagehead{background:linear-gradient(180deg,#F9F6F1 0%,#F3EEE8 100%)}

/* --- ATELIER HERO --- */
.hero--atelier{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;
  background:radial-gradient(120% 90% at 70% 10%,#2A211B 0%,var(--vault) 55%,#120E0C 100%)}
.hero--atelier .hero__inner{position:relative;z-index:4;width:100%;padding-block:calc(var(--header-h) + var(--s6)) var(--s8)}
.hero--atelier .hero__title{max-width:12ch}
.hero--atelier .hero__eyebrow{color:var(--hazel)}
.atelier{position:absolute;inset:0;z-index:1;pointer-events:none}
.at-card{position:absolute;margin:0;overflow:hidden;border-radius:22px;border:1px solid rgba(226,203,170,.32);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.65),inset 0 1px 0 rgba(239,223,200,.18);
  will-change:transform;transform:translateZ(0)}
.at-card img{width:100%;height:100%;object-fit:cover;display:block}
.at-card::after{content:"";position:absolute;inset:0;background:linear-gradient(200deg,rgba(23,18,16,0) 55%,rgba(23,18,16,.38));pointer-events:none}
.at-card--clinic{right:6%;top:12%;width:min(30vw,430px);aspect-ratio:4/5;
  border-radius:200px 200px 26px 26px;animation:atFloat1 9s ease-in-out infinite alternate}
.at-card--p1{right:31%;top:44%;width:min(15vw,215px);aspect-ratio:3/4;animation:atFloat2 8s ease-in-out infinite alternate}
.at-card--p2{right:3%;bottom:6%;width:min(13vw,185px);aspect-ratio:3/4;animation:atFloat3 10s ease-in-out infinite alternate}
.at-card--p3{right:24%;top:9%;width:min(11vw,160px);aspect-ratio:3/4;animation:atFloat2 11s ease-in-out infinite alternate-reverse}
.at-card--obj{left:4%;bottom:8%;width:min(15vw,210px);aspect-ratio:4/3;opacity:.9;animation:atFloat3 12s ease-in-out infinite alternate-reverse}
@keyframes atFloat1{from{transform:translateY(-8px) rotate(-.5deg)}to{transform:translateY(10px) rotate(.6deg)}}
@keyframes atFloat2{from{transform:translateY(-10px) rotate(1deg)}to{transform:translateY(8px) rotate(-1deg)}}
@keyframes atFloat3{from{transform:translateY(-6px)}to{transform:translateY(12px)}}
@media (max-width:1100px){.at-card--p3{display:none}}
@media (max-width:760px){
  .hero--atelier{min-height:auto;display:block}
  .hero--atelier .hero__inner{padding:calc(var(--header-h) + 8px) 0 var(--s6);text-align:left}
  .atelier{position:relative;inset:auto;height:300px;margin-top:calc(var(--header-h) + 6px);pointer-events:none}
  .hero--atelier .hero__inner{padding-top:var(--s4)}
  .at-card--clinic{right:auto;left:50%;top:0;transform:translateX(-50%);width:min(62vw,240px);border-radius:120px 120px 20px 20px;animation:atFloat3 9s ease-in-out infinite alternate}
  .at-card--p1{right:2%;top:24%;width:110px}
  .at-card--p2{left:2%;right:auto;top:30%;bottom:auto;width:100px}
  .at-card--p3{display:block;right:auto;left:14%;top:2%;width:76px;opacity:.95}
  .at-card--obj{display:none}
}
@media (prefers-reduced-motion:reduce){.at-card{animation:none !important}}

/* --- animated values --- */
.values-list__row{position:relative;overflow:hidden;transition:background .4s var(--ease)}
.values-list__row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--foil-solid,#C79A62);
  transform:scaleY(0);transform-origin:top;transition:transform .6s var(--ease-out-expo)}
.js [data-reveal-stagger].is-in .values-list__row::before,.values-list.is-in .values-list__row::before{transform:scaleY(1)}
.values-list__row::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 30%,rgba(199,154,98,.12) 50%,transparent 70%);transform:translateX(-120%)}
@media (hover:hover){
  .values-list__row:hover{background:#EFE8DE}
  .values-list__row:hover::after{transform:translateX(120%);transition:transform .9s var(--ease)}
  .values-list__row:hover .values-list__num{filter:brightness(1.2)}
}

/* --- service page: underlay text sections + inline figures + mid CTA --- */
.section--underlay{position:relative;isolation:isolate}
.section--underlay .underlay{position:absolute;inset:0;z-index:-1;opacity:.09}
.section--underlay .underlay img{width:100%;height:100%;object-fit:cover;filter:saturate(.9)}
.section--underlay::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(248,244,239,.9),rgba(248,244,239,.55))}
.prose-figure{margin:var(--s6) 0 0;border-radius:var(--radius-glass);overflow:hidden;border:1px solid rgba(112,84,63,.18);box-shadow:var(--shadow-lift)}
.prose-figure img{width:100%;height:auto;display:block}
.cta-inline{background:var(--vault) url('/img/tex/emboss.jpg') center/cover;border-block:1px solid rgba(226,203,170,.16)}
.cta-inline__row{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center;justify-content:space-between;padding-block:var(--s5)}
.cta-inline__t{font-family:var(--font-display);font-style:italic;font-weight:600;font-size:clamp(1.1rem,1rem + .8vw,1.5rem);
  background:var(--foil);-webkit-background-clip:text;background-clip:text;color:transparent;margin:0}
@supports not (background-clip:text){.cta-inline__t{color:var(--hazel)}}

/* --- sticky ribbon: 4 actions --- */
.stickybar--4{grid-template-columns:repeat(4,1fr)}
.stickybar--4 a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:8px 2px calc(8px + env(safe-area-inset-bottom, 0px));font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;
  background:rgba(23,18,16,.96);color:var(--peach);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.stickybar--4 a:active{background:#2A211B}
.sticky-ico{display:grid;place-items:center;width:26px;height:26px}
.sticky-ico svg{width:20px;height:20px}
.stickybar--4 .sticky-call .sticky-ico{position:relative}
@media (prefers-reduced-motion:no-preference){
  .stickybar--4 .sticky-call .sticky-ico::after{content:"";position:absolute;inset:-4px;border-radius:50%;
    border:1px solid rgba(199,154,98,.7);animation:stickyPulse 2.4s ease-out infinite}
  @keyframes stickyPulse{0%{transform:scale(.7);opacity:.9}70%{transform:scale(1.25);opacity:0}100%{opacity:0}}
}

/* --- buttons: dimensional pills everywhere --- */
.btn{border-radius:999px;overflow:hidden}
.btn::before{border-radius:inherit}
.btn:not(.btn--ghost):not(.btn--light):not(.btn--onDark){
  border:0;background:linear-gradient(165deg,#8A6A52 0%,#70543F 55%,#5B473C 100%);color:#F8F4EF;
  box-shadow:0 12px 28px -12px rgba(91,71,60,.55),inset 0 1px 0 rgba(248,244,239,.22),inset 0 -2px 6px rgba(31,26,23,.35)}
.btn:not(.btn--ghost):not(.btn--light):not(.btn--onDark)::before{display:none}
.btn:not(.btn--ghost):not(.btn--light):not(.btn--onDark)::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.35) 50%,transparent 68%);transform:translateX(-150%) skewX(-16deg)}
@media (hover:hover){
  .btn:not(.btn--ghost):not(.btn--light):not(.btn--onDark):hover{color:#fff;filter:brightness(1.07);transform:translateY(-1px)}
  .btn:not(.btn--ghost):not(.btn--light):not(.btn--onDark):hover::after{transform:translateX(150%) skewX(-16deg);transition:transform .8s var(--ease)}
}
.btn--ghost{border-radius:999px}
.btn--sm{border-radius:999px}

/* --- pagehead micro crumbs --- */
.crumbs{font-size:.62rem;opacity:.6;margin-bottom:2px}
.pagehead{padding-top:calc(var(--header-h) + 10px);padding-bottom:var(--s4)}
.pagehead h1{margin-top:4px}
.crumbs--onDark{color:rgba(241,234,226,.8)}
.crumbs--onDark a{color:inherit}

/* --- nav dropdown (Цени) --- */
.navitem--has-drop{position:relative}
.navdrop{position:absolute;top:100%;left:50%;transform:translate(-50%,6px);min-width:230px;padding:10px;
  background:rgba(23,18,16,.94);border:1px solid rgba(226,203,170,.25);border-radius:16px;
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  opacity:0;visibility:hidden;transition:opacity .25s var(--ease),transform .25s var(--ease)}
.navitem--has-drop:hover .navdrop,.navitem--has-drop:focus-within .navdrop{opacity:1;visibility:visible;transform:translate(-50%,0)}
.navdrop a{display:block;padding:9px 12px;border-radius:10px;color:var(--peach);font-size:.82rem}
.navdrop a:hover{background:rgba(226,203,170,.14);color:#fff}
.header:not(.header--onHero):not(.is-scrolled) .navdrop{background:rgba(255,255,255,.96);border-color:rgba(112,84,63,.2)}
.header:not(.header--onHero):not(.is-scrolled) .navdrop a{color:var(--espresso)}
.header:not(.header--onHero):not(.is-scrolled) .navdrop a:hover{background:rgba(112,84,63,.08);color:var(--copper)}

/* --- blog hero + grid + search --- */
.bloghero{position:relative;overflow:hidden;padding:calc(var(--header-h) + var(--s6)) 0 var(--s7);color:var(--peach)}
.bloghero__title{font-family:var(--font-display);font-weight:600;font-size:clamp(2rem,1.4rem + 3vw,3.6rem);line-height:1.02;max-width:16ch}
.bloghero__lead{color:rgba(241,234,226,.85);max-width:56ch;margin-top:var(--s3);font-size:var(--t-lead)}
.blogsearch{position:relative;max-width:560px;margin-top:var(--s5);display:flex;align-items:center;gap:10px;
  background:rgba(23,18,16,.55);border:1px solid rgba(226,203,170,.35);border-radius:999px;padding:4px 8px 4px 18px;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.blogsearch svg{width:18px;height:18px;color:var(--hazel);flex:none}
.blogsearch input{flex:1;background:none;border:0;outline:none;color:#F8F4EF;font:inherit;font-size:1rem;padding:12px 6px;min-width:0}
.blogsearch input::placeholder{color:rgba(241,234,226,.55)}
.blogsearch:focus-within{border-color:var(--molten);box-shadow:0 0 0 4px rgba(199,154,98,.18)}
.blogchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s4)}
.blogchip{padding:8px 14px;border-radius:999px;border:1px solid rgba(226,203,170,.35);color:var(--hazel);font-size:.72rem;
  letter-spacing:.08em;text-transform:uppercase}
.blogchip:hover{background:rgba(226,203,170,.14);color:#fff}
.card__img--sm{aspect-ratio:16/9}
.post-card__lead{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:.88rem}
.blog-grid{gap:var(--s4)}
.blog-empty{margin-top:var(--s6);color:var(--stone);font-size:1rem}
.post-card.is-hidden{display:none}
.blogcluster.is-hidden{display:none}

/* --- article: progress bar + flow --- */
.readbar{position:fixed;top:0;left:0;height:3px;width:100%;z-index:1000;transform-origin:left;transform:scaleX(0);
  background:linear-gradient(90deg,#8A6A52,#C79A62,#EFDFC8);pointer-events:none}
article .answer-box{border-radius:var(--radius-glass);border:1px solid rgba(112,84,63,.2);box-shadow:var(--shadow-lift)}

/* --- bio blocks on team page --- */
.bio-portrait{margin:var(--s5) 0 0;border-radius:var(--radius-glass);overflow:hidden;border:1px solid rgba(112,84,63,.2);max-width:340px;box-shadow:var(--shadow-lift)}
.bio-portrait img{width:100%;height:auto;display:block}
.bio-facts{margin-top:var(--s4);background:var(--linen);border:1px solid rgba(112,84,63,.16);border-radius:18px;padding:var(--s4) var(--s5)}
.bio-facts__t{font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--clay);margin-bottom:var(--s2)}
.bio-facts ul{margin:0;padding-left:1.1em}
.bio-facts li{margin:4px 0;font-size:.92rem}
.bio-quote{margin:var(--s4) 0 0;padding:var(--s4) var(--s5);border-left:3px solid var(--molten);
  font-family:var(--font-display);font-style:italic;font-size:1.08rem;color:var(--cocoa);background:#F6F1EA;border-radius:0 16px 16px 0}

/* --- about extras --- */
.about-core__card{padding:var(--s5)}
.about-core__t{font-size:.7rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--molten);margin-bottom:var(--s2)}
.about-core__x{color:rgba(248,244,239,.92);font-size:.98rem;line-height:1.55}
.about-promise{margin-top:var(--s5);padding:var(--s5) var(--s6);text-align:center}
.about-promise__x{font-family:var(--font-display);font-weight:600;font-style:italic;font-size:clamp(1.2rem,1.05rem + 1.2vw,1.9rem)}
.manifesto{max-width:760px;text-align:center}
.manifesto__l{font-family:var(--font-display);font-size:clamp(1.15rem,1.02rem + 1vw,1.7rem);color:var(--peach);margin:10px 0;line-height:1.35}
.manifesto__end{font-family:var(--font-display);font-weight:700;font-size:clamp(1.4rem,1.2rem + 1.6vw,2.3rem);margin-top:var(--s5)}
.about-faces{display:grid;grid-template-columns:1fr;gap:var(--s6);margin-top:var(--s5)}
@media (min-width:560px){.about-faces{grid-template-columns:repeat(3,1fr);gap:var(--s4)}}
.about-face{margin:0;aspect-ratio:auto}
.about-face img{width:100%;aspect-ratio:3/4;height:auto;object-fit:cover;border-radius:18px;border:1px solid rgba(112,84,63,.18);transition:transform .9s var(--ease-out-expo)}
.about-face:hover img{transform:scale(1.05)}
.about-wide{margin:var(--s4) 0 0;border-radius:var(--radius-glass);overflow:hidden;border:1px solid rgba(112,84,63,.2)}
.about-wide img{width:100%;height:auto;display:block}
.at-card--trio{left:4%;bottom:8%;width:min(24vw,340px);aspect-ratio:16/9;animation:atFloat3 12s ease-in-out infinite alternate-reverse}
@media (max-width:1100px){.at-card--trio{width:30vw}}
@media (max-width:760px){.at-card--trio{display:none}}

/* =============================================================================
   §30 · v9 — scene hero, Google reviews, real-photo strip
   ========================================================================== */

/* ---- hero scene ---- */
.hero--scene{position:relative;background:#14100C;color:var(--peach,#F1EAE2);overflow:hidden;isolation:isolate}
.hero--scene .hero__scene{position:absolute;inset:0;z-index:0}
.hero--scene .hero__scene img{width:100%;height:100%;object-fit:cover;object-position:right center;display:block}
@media (prefers-reduced-motion:no-preference){
  .hero--scene .hero__scene img{animation:sceneDrift 16s ease-in-out infinite alternate;transform-origin:54% 34%}
  @keyframes sceneDrift{from{transform:scale(1)}to{transform:scale(1.03)}}
}
.hero--scene::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(20,16,12,.9) 0%,rgba(20,16,12,.6) 26%,rgba(20,16,12,0) 54%)}
.hero--scene .fx{z-index:1}
.hero--scene .hero__inner{position:relative;z-index:2;display:flex;align-items:center;min-height:min(92vh,880px);padding:calc(var(--headerH,72px) + var(--s7)) 0 var(--s8)}
.hero--scene .hero__title{max-width:13ch;filter:drop-shadow(0 2px 18px rgba(20,16,12,.6))}
.hero__sub{margin:var(--s4) 0 0;max-width:34ch;font-size:var(--t-lead,1.05rem);color:color-mix(in srgb,var(--peach,#F1EAE2) 82%,transparent);text-wrap:balance}
.hero--scene .hero__actions{margin-top:var(--s6)}
.hero__proof{display:inline-flex;align-items:center;gap:.55em;margin-top:var(--s5);font-size:.82rem;letter-spacing:.02em;color:var(--hazel,#E2CBAA);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--hazel,#E2CBAA) 35%,transparent);padding-bottom:.2em;transition:border-color .25s,color .25s}
.hero__proof:hover{color:#fff;border-color:var(--hazel,#E2CBAA)}
.hero__stars{color:var(--molten,#C79A62);letter-spacing:.14em;font-size:.9em}
@media (max-width:760px){
  .hero--scene{display:block}
  .hero--scene .hero__scene{position:relative;inset:auto;display:block}
  .hero--scene .hero__scene::after{content:"";position:absolute;left:0;right:0;bottom:0;height:110px;pointer-events:none;
    background:linear-gradient(180deg,transparent,rgba(20,16,12,.92))}
  .hero--scene .hero__scene img{aspect-ratio:1080/1350;height:auto;object-position:center top}
  .hero--scene .hero__inner{min-height:0;padding:var(--s2) 0 var(--s7);margin-top:calc(-1*var(--s7));text-align:left}
  .hero--scene .hero__title{max-width:none}
  .hero__sub{max-width:none}
  .hero--scene .fx{display:none}
  .hero--scene::before{display:none}
}

/* ---- google reviews (live) ---- */
.grev-head{margin-bottom:var(--s5)}
.grev-links{display:flex;flex-wrap:wrap;gap:var(--s4) var(--s7);align-items:center}
/* click-to-load Google Maps facade — no third-party request before activation */
.map-facade{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--s4);min-height:420px;padding:var(--s7);background:linear-gradient(160deg,var(--peach,#F1EAE2),var(--linen,#F7F3EC))}
.map-facade__addr{margin:0;font-family:var(--serif);font-size:var(--t-h4);color:var(--brown,#5B473C)}
.map-facade__note{margin:0;font-size:.88rem;max-width:52ch;color:color-mix(in srgb,var(--brown,#5B473C) 72%,transparent)}
.map-facade__row{display:flex;flex-wrap:wrap;gap:var(--s4) var(--s6);align-items:center}
.map-facade iframe{width:100%;height:420px;border:0;display:block}
.grev-chip{display:inline-flex;align-items:center;gap:.6em;margin:0;padding:.55em 1em;border-radius:999px;background:#fff;border:1px solid color-mix(in srgb,var(--brown,#5B473C) 14%,transparent);box-shadow:0 10px 30px -18px rgba(64,42,20,.45);font-size:.86rem;color:var(--brown,#5B473C)}
.grev-chip strong{font-weight:600}
.grev-note{color:color-mix(in srgb,var(--brown,#5B473C) 55%,transparent);font-size:.92em}
.grev-g{flex:none}
.review__time{display:block;font-size:.78em;color:color-mix(in srgb,var(--brown,#5B473C) 55%,transparent);margin-top:.25em}
.review__more{align-self:center;flex:none;display:inline-flex;align-items:center}
[data-gbp].is-live .review{min-width:min(340px,78vw)}

/* ---- real-photo strip ---- */
.real-strip{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4)}
.real-strip__cell{margin:0;border-radius:var(--r-lg,26px);overflow:hidden;position:relative;box-shadow:0 18px 44px -26px rgba(50,35,20,.5)}
.real-strip__cell img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/5;transition:transform .8s cubic-bezier(.2,.6,.2,1)}
.real-strip__cell--wide{grid-column:1/-1}
.real-strip__cell--wide img{aspect-ratio:3/2}
.real-strip__cell:hover img{transform:scale(1.035)}
@media (min-width:761px){
  .real-strip{grid-template-columns:repeat(3,1fr)}
  .real-strip__cell--wide{grid-column:span 2}
}
.contact-photo{margin:0 0 var(--s5);border-radius:var(--r-lg,26px);overflow:hidden}
.contact-photo img{display:block;width:100%;height:auto}

/* =============================================================================
   §31 · v9.1 — floating glass action dock (replaces the flat 4-button ribbon)
   ========================================================================== */
.stickybar--4{
  left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom, 0px));
  gap:0;padding-bottom:0;border-radius:22px;overflow:hidden;
  background:linear-gradient(180deg,rgba(38,29,23,.86),rgba(22,17,13,.92));
  -webkit-backdrop-filter:blur(18px) saturate(1.25);backdrop-filter:blur(18px) saturate(1.25);
  border:1px solid rgba(226,203,170,.22);
  box-shadow:0 18px 44px -14px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.07);
}
.stickybar--4::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(120% 90% at 50% -30%,rgba(199,154,98,.16),transparent 60%)}
.stickybar--4 a{
  position:relative;background:transparent;color:var(--hazel);
  gap:5px;padding:9px 2px 8px;font-size:.56rem;letter-spacing:.09em;font-weight:600;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  transition:transform .25s var(--ease-out-expo,cubic-bezier(.19,1,.22,1))}
.stickybar--4 a + a::before{content:"";position:absolute;left:0;top:22%;bottom:22%;width:1px;
  background:linear-gradient(180deg,transparent,rgba(226,203,170,.18),transparent)}
.stickybar--4 a:active{background:transparent;transform:translateY(1px) scale(.96)}
.stickybar--4 .sticky-ico{
  width:38px;height:38px;border-radius:50%;
  background:linear-gradient(160deg,rgba(226,203,170,.14),rgba(226,203,170,.04));
  border:1px solid rgba(226,203,170,.30);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 4px 10px -6px rgba(0,0,0,.6);
}
.stickybar--4 .sticky-ico svg{width:17px;height:17px}
.stickybar--4 .sticky-call .sticky-ico{
  background:linear-gradient(160deg,#D9AC72 0%,#C79A62 45%,#9E7444 100%);
  border-color:rgba(255,232,200,.55);color:#241A12;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 6px 16px -6px rgba(199,154,98,.55);
}
.stickybar--4 .sticky-call{color:var(--peach)}
@media (prefers-reduced-motion:no-preference){
  .stickybar--4 .sticky-call .sticky-ico::after{inset:-5px;border-width:1.5px}
  .stickybar--4 .sticky-ico{transition:transform .3s var(--ease-out-expo,cubic-bezier(.19,1,.22,1))}
  .stickybar--4 a:hover .sticky-ico{transform:translateY(-2px)}
  .stickybar--4::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    background:linear-gradient(115deg,transparent 30%,rgba(255,240,220,.07) 46%,rgba(255,240,220,.12) 50%,rgba(255,240,220,.07) 54%,transparent 70%);
    background-size:260% 100%;animation:dockGlare 5.6s ease-in-out infinite}
  @keyframes dockGlare{0%,55%{background-position:130% 0}100%{background-position:-60% 0}}
}

/* §31b — icon-only dock */
.stickybar--icons a{padding:10px 2px;gap:0}
.stickybar--icons .sticky-ico{width:46px;height:46px}
.stickybar--icons .sticky-ico svg{width:21px;height:21px}

/* =============================================================================
   §32 · final hero — owner photography, split layout (no overlay on faces)
   ========================================================================== */
@media (min-width:761px){
  /* Split hero, container-aligned (04.09.2026): text sits on the SAME centered
     container grid as the header and every section (owner: hero text must align
     with the page). The photo is absolutely positioned and bleeds to the right
     viewport edge; its left seam tracks the container so text and seam stay
     aligned at every width. */
  .hero--scene{display:block;position:relative}
  .hero--scene::before{display:none}
  .hero--scene .hero__scene{position:absolute;top:0;bottom:0;right:0;
    left:clamp(46%, calc((100% - var(--container)) / 2 + var(--container) * 0.46), 54%)}
  .hero--scene .hero__scene::before{content:"";position:absolute;top:0;bottom:0;left:0;width:160px;z-index:1;pointer-events:none;
    background:linear-gradient(90deg,#14100C 0%,rgba(20,16,12,.55) 45%,transparent 100%)}
  .hero--scene .hero__scene::after{content:"";position:absolute;left:0;right:0;bottom:0;height:70px;z-index:1;pointer-events:none;
    background:linear-gradient(180deg,transparent,rgba(20,16,12,.55))}
  .hero--scene .hero__scene img{object-position:72% center}
  .hero--scene .hero__inner{min-height:min(92vh,880px)}
  .hero--scene .hero__inner .container > *{max-width:min(calc(var(--container) * 0.46 - var(--gutter) * 2), calc(46% - var(--gutter)))}
  .hero--scene .fx{right:50%}
}

/* §33 — reviews gallery page */
.review-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:var(--s5);margin-top:var(--s6)}
.review-gallery .review{width:auto;max-width:none;height:100%}
/* §34 — about faces: clickable cards with names */
.about-face__link{display:block;color:inherit;text-decoration:none}
.about-face__name{display:block;padding:var(--s4) 2px 0;font-family:var(--serif);font-size:1.15rem;color:var(--brown,#5B473C)}
.about-face__role{display:block;margin-top:2px;font-family:var(--sans);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:color-mix(in srgb,var(--brown,#5B473C) 62%,transparent)}
@media (hover:hover){.about-face__link:hover .about-face__name{color:var(--copper,#C79A62)}.about-face__link:hover img{filter:brightness(1.04)}}
.doctor-page__photo img{aspect-ratio:720/960;object-fit:cover}