/* ============================================================
   CARMEL DENTAL CLINIC — Vellimadukunnu, Kozhikode
   Palette derived pixel-exact from the official logo artwork:
     charcoal  #363435  (logo field — 85% of logo canvas)
     gold      #CBA365  (logo core gold / "DENTAL CLINIC" type)
     gold deep #AE7D42  (logo gold shadow)
     gold lite #E6CEA8  (logo gold highlight)
     silver    #ACA9A9  (logo silver shadow)
   Background: pure white, per brand direction.
   ============================================================ */

/* ---------- 0. FONTS ----------
   Self-hosted. These used to come from fonts.googleapis.com, which put a
   render-blocking cross-origin stylesheet in front of every font file: the
   browser could not even discover the woff2 URLs until that round trip came
   back, and the resulting chain was the largest single cost on the page.
   Served from this origin the files are on a connection that is already open,
   and font-display:swap means text paints in the fallback immediately.

   The latin-ext faces cost nothing unless a character in that range is
   actually rendered - the unicode-range keeps them off the wire otherwise.
   Fraunces is variable and its wght axis has been trimmed to the 500-600 the
   stylesheets ask for; opsz is untouched because optical sizing is live.
   Homepage: Poppins 400/500/600/700 plus Fraunces italic. */
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/poppins-normal-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/poppins-normal-400-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/poppins-normal-500-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/poppins-normal-500-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/poppins-normal-600-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/poppins-normal-600-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/poppins-normal-700-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/poppins-normal-700-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:500 600;font-display:swap;src:url("/assets/fonts/fraunces-italic-500-600-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:500 600;font-display:swap;src:url("/assets/fonts/fraunces-italic-500-600-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* Metric-matched fallbacks. font-display:swap paints text in a system font
   first, so if that font sets type at a different size the swap moves the
   layout underneath the reader - a real CLS cost paid to remove a real LCP
   one. These faces re-cut the system font to the same average character width
   and the same ascent, descent and line gap as the webfont it stands in for,
   measured glyph by glyph over a frequency-weighted corpus, so the swap is
   close to invisible and shifts nothing.

   Two per family because the platforms do not share a system font: Arial and
   Georgia exist on Windows, macOS and iOS; Android has Roboto and Noto Serif.
   Each is a separate family so the match is deterministic - a family whose
   local() font is absent is simply skipped, and the next one in the stack
   answers. */
@font-face{font-family:"Poppins Fallback";src:local("Arial");size-adjust:107.03%;ascent-override:98.10%;descent-override:32.70%;line-gap-override:9.34%}
@font-face{font-family:"Poppins Fallback Roboto";src:local("Roboto");size-adjust:108.76%;ascent-override:96.54%;descent-override:32.18%;line-gap-override:9.19%}
@font-face{font-family:"Fraunces Fallback";font-style:italic;src:local("Georgia Italic"),local("Georgia");size-adjust:104.38%;ascent-override:93.69%;descent-override:24.43%;line-gap-override:0%}
@font-face{font-family:"Fraunces Fallback Noto";font-style:italic;src:local("Noto Serif Italic"),local("Noto Serif");size-adjust:98.93%;ascent-override:98.86%;descent-override:25.78%;line-gap-override:0%}


/* ---------- 1. TOKENS ---------- */
:root{
  --white:#FFFFFF;
  --charcoal:#363435;
  --charcoal-900:#1E1D1E;
  --charcoal-800:#252324;
  --charcoal-700:#2A2829;
  --charcoal-500:#4A4749;
  --charcoal-300:#6E6A6C;

  --gold:#CBA365;
  --gold-deep:#AE7D42;
  --gold-dark:#886B47;
  --gold-light:#E6CEA8;
  --gold-ink:#8A6534;          /* AA-contrast gold for small text on white */
  --silver:#ACA9A9;

  --cream:#FAF6EF;
  --cream-2:#F4EDE1;
  --cream-3:#EFE6D6;
  --ink:#232122;
  --muted:#6E6A67;
  --line:#EAE2D5;
  --line-soft:#F1EBE1;

  --grad-gold:linear-gradient(135deg,var(--gold-light) 0%,var(--gold) 38%,var(--gold-deep) 78%,var(--gold-dark) 100%);
  --grad-gold-soft:linear-gradient(120deg,#F6EDDD 0%,#EBD9BC 100%);

  --r-xs:8px; --r-sm:14px; --r-md:20px; --r-lg:28px; --r-xl:36px; --r-2xl:44px; --r-pill:999px;

  --sh-1:0 1px 2px rgba(35,33,34,.05),0 2px 8px rgba(35,33,34,.04);
  --sh-2:0 2px 6px rgba(35,33,34,.05),0 12px 32px -8px rgba(35,33,34,.10);
  --sh-3:0 4px 12px rgba(35,33,34,.06),0 28px 64px -16px rgba(35,33,34,.16);
  --sh-gold:0 10px 34px -12px rgba(174,125,66,.45);

  --ff-sans:"Poppins","Poppins Fallback","Poppins Fallback Roboto",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --ff-serif:"Fraunces","Fraunces Fallback","Fraunces Fallback Noto",Georgia,"Times New Roman",serif;

  --nav-h:64px;
  --pad:clamp(20px,5vw,40px);
  --maxw:1600px;
  /* optical alignment: the logo mark's ink touches its own edge, while text has
     natural side bearing — this nudge puts them on the same optical line. */
  --logo-nudge:clamp(6px,.62vw,13px);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}
@media(min-width:1024px){:root{--nav-h:76px}}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px)}
body{
  font-family:var(--ff-sans);font-size:16px;line-height:1.65;color:var(--ink);
  background:var(--white);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none;padding:0}
:focus-visible{outline:2.5px solid var(--gold-deep);outline-offset:3px;border-radius:4px}
::selection{background:var(--gold);color:var(--charcoal-900)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ---------- 3. LAYOUT ---------- */
.wrap{width:min(100% - (var(--pad)*2),var(--maxw));margin-inline:auto}
.section{padding-block:clamp(64px,9vw,120px);position:relative}
.section--tight{padding-block:clamp(48px,6vw,80px)}
.section--cream{background:var(--cream)}
.grid{display:grid;gap:clamp(24px,4vw,56px)}
@media(min-width:900px){.grid-2{grid-template-columns:1fr 1fr}.grid-2-a{grid-template-columns:1.05fr .95fr}}

/* ---------- 4. TYPE ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:11.5px;font-weight:600;letter-spacing:.20em;text-transform:uppercase;
  color:var(--gold-ink);margin-bottom:18px;
}
.eyebrow::before{content:"";width:26px;height:1.5px;background:var(--grad-gold);border-radius:2px;flex:none}
.eyebrow--light{color:var(--gold-light)}
.h1{font-size:clamp(2.4rem,5.6vw,4.25rem);line-height:1.02;font-weight:700;letter-spacing:-.035em}
.h2{font-size:clamp(2rem,4.4vw,3.35rem);line-height:1.06;font-weight:700;letter-spacing:-.032em}
.h3{font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.22;font-weight:600;letter-spacing:-.02em}
.h4{font-size:1.0625rem;font-weight:600;letter-spacing:-.012em;line-height:1.35}
.lead{font-size:clamp(1rem,1.3vw,1.1875rem);color:var(--muted);line-height:1.75;max-width:52ch}
.body{color:var(--muted);line-height:1.78;max-width:60ch}
.accent{
  font-family:var(--ff-serif);font-style:italic;font-weight:500;
  background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;
  padding-right:.06em;
}
.underline-swash{position:relative;display:inline-block}
.underline-swash svg{position:absolute;left:0;bottom:-.16em;width:100%;height:.34em;overflow:visible}
.underline-swash path{
  fill:none;stroke:#CBA365;stroke-width:7;stroke-linecap:round;
  stroke-dasharray:420;stroke-dashoffset:420;
}
.is-in .underline-swash path{animation:draw 1.1s var(--ease-out) .35s forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* ---------- 5. BUTTONS ---------- */
.btn{
  --bg:var(--charcoal);--fg:#fff;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 30px;border-radius:var(--r-pill);
  font-size:.875rem;font-weight:600;letter-spacing:.005em;
  background:var(--bg);color:var(--fg);isolation:isolate;overflow:hidden;
  transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out),color .3s;
  will-change:transform;box-shadow:var(--sh-1);
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--grad-gold);
  transform:translateY(101%);transition:transform .5s var(--ease-out);
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--sh-gold);color:var(--charcoal-900)}
.btn:hover::before{transform:translateY(0)}
.btn:active{transform:translateY(0) scale(.985)}
.btn svg{width:16px;height:16px;flex:none;transition:transform .4s var(--ease-out)}
.btn:hover svg{transform:translateX(3px)}
.btn--gold{--bg:transparent;--fg:var(--charcoal-900);background:var(--grad-gold);box-shadow:var(--sh-gold)}
.btn--gold::before{background:var(--charcoal)}
.btn--gold:hover{color:#fff}
.btn--ghost{--bg:transparent;--fg:var(--ink);border:1.5px solid var(--line);box-shadow:none}
.btn--ghost:hover{color:var(--charcoal-900);border-color:transparent}
.btn--light{--bg:#fff;--fg:var(--charcoal-900)}
.btn--sm{padding:11px 22px;font-size:.8125rem}
.btn--lg{padding:18px 38px;font-size:.9375rem}
.btn--block{display:flex;width:100%}
.btn{white-space:nowrap}
.btn[disabled]{opacity:.4;pointer-events:none}

/* ---------- 6. NAV ---------- */
.nav{
  position:fixed;inset:0 0 auto;z-index:100;height:var(--nav-h);
  display:flex;align-items:center;
  background:rgba(255,255,255,.72);backdrop-filter:blur(18px) saturate(1.6);
  -webkit-backdrop-filter:blur(18px) saturate(1.6);
  border-bottom:1px solid transparent;transition:.4s var(--ease);
}
.nav.is-stuck{background:rgba(255,255,255,.93);border-bottom-color:var(--line-soft);box-shadow:0 1px 24px -6px rgba(35,33,34,.10)}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav__logo{
  display:flex;align-items:center;gap:11px;flex:none;transition:opacity .3s;
  margin-inline-start:var(--logo-nudge);
}
.nav__logo:hover{opacity:.75}
.nav__logo img{height:clamp(32px,2.5vw,38px);width:auto}
.nav__word{display:none;line-height:1}
@media(min-width:340px){.nav__word{display:block}}
.nav__word b{
  display:block;font-size:1.375rem;font-weight:600;letter-spacing:-.03em;color:var(--charcoal-900);
  line-height:1;margin-bottom:3px;
}
.nav__word em{
  display:block;font-style:normal;font-size:.5rem;font-weight:600;letter-spacing:.3em;
  text-transform:uppercase;color:var(--gold-ink);
}
.nav__links{display:none;gap:4px;align-items:center}
@media(min-width:1024px){.nav__links{display:flex}}
.nav__link{
  position:relative;padding:9px 15px;border-radius:var(--r-pill);
  font-size:.875rem;font-weight:500;color:var(--charcoal-300);transition:color .3s;
}
.nav__link::after{
  content:"";position:absolute;left:15px;right:15px;bottom:4px;height:1.5px;
  background:var(--grad-gold);border-radius:2px;transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--ease-out);
}
.nav__link:hover,.nav__link.is-active{color:var(--charcoal-900)}
.nav__link:hover::after,.nav__link.is-active::after{transform:scaleX(1)}
.nav__cta{display:none;align-items:center;gap:12px}
@media(min-width:768px){.nav__cta{display:flex}}
.nav__call{
  display:none;align-items:center;gap:8px;font-size:.8125rem;font-weight:600;color:var(--charcoal-900);
  padding:9px 15px;border-radius:var(--r-pill);border:1.5px solid var(--line);transition:.3s var(--ease);
}
@media(min-width:1180px){.nav__call{display:inline-flex}}
.nav__call:hover{border-color:var(--gold);background:var(--cream);transform:translateY(-1px)}
.nav__call svg{width:14px;height:14px;color:var(--gold-deep)}
.nav__prog{position:absolute;left:0;bottom:-1px;height:2px;width:100%;transform:scaleX(0);transform-origin:left;background:var(--grad-gold)}

.burger{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-pill);border:1.5px solid var(--line);flex:none;touch-action:manipulation}
@media(min-width:1024px){.burger{display:none}}
.burger span{display:block;width:17px;height:1.8px;background:var(--charcoal);border-radius:2px;transition:.4s var(--ease-out);pointer-events:none}
.burger span+span{margin-top:4.5px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.3px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(.4)}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.3px) rotate(-45deg)}

.drawer{
  position:fixed;inset:var(--nav-h) 0 0;z-index:99;background:var(--white);
  padding:32px var(--pad) 40px;display:flex;flex-direction:column;gap:6px;
  transform:translateY(-8px);opacity:0;pointer-events:none;transition:.4s var(--ease-out);
  overflow-y:auto;
}
.drawer{visibility:hidden}
.drawer.is-open{transform:none;opacity:1;pointer-events:auto;visibility:visible}
@media(min-width:1024px){.drawer{display:none}}
.drawer a{
  padding:15px 4px;font-size:1.375rem;font-weight:600;letter-spacing:-.02em;
  border-bottom:1px solid var(--line-soft);display:flex;justify-content:space-between;align-items:center;
  opacity:0;transform:translateY(10px);
}
.drawer.is-open a{animation:drawIn .5s var(--ease-out) forwards}
@keyframes drawIn{to{opacity:1;transform:none}}
.drawer a span{color:var(--gold);font-size:.8125rem;font-family:var(--ff-serif);font-style:italic}
.drawer__foot{margin-top:auto;padding-top:28px;display:grid;gap:12px}

/* ---------- 7. HERO ----------
   Geometry notes, because this block is easy to break:

   • The cut-out asset (hero-doctors.webp) is cropped hard to its own alpha
     bounds — 1290x1086, AR 1.1878 — so there is no transparent padding inside
     the file. Every pixel of spacing you see is set here, on purpose.
   • Below the two-column breakpoint the photo sits IN FLOW, so the frame height
     is exactly the photo height: no letterboxing, no dead band above the heads.
   • At/above it the grid is given an aspect-ratio, so the row height is a fixed
     fraction of the wrap width. The photo is then sized off that height
     (height:100% + --cut-rise, width:auto), which keeps the side bleed roughly
     constant at every viewport instead of drifting into either a gap or a clip.
------------------------------------------------------------------ */
.hero{padding-top:calc(var(--nav-h) + clamp(10px,3vw,46px));padding-bottom:clamp(18px,3.4vw,44px)}
.hero__grid{display:grid;gap:clamp(14px,2.4vw,24px);grid-template-columns:1fr}

.hero__card{
  position:relative;border-radius:var(--r-2xl);overflow:hidden;
  padding:clamp(22px,5vw,52px);display:flex;flex-direction:column;justify-content:center;
  background:var(--cream);
}
.hero__card::after{
  content:"";position:absolute;right:-90px;bottom:-130px;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(203,163,101,.20),transparent 68%);pointer-events:none;
}
.hero__rings{position:absolute;left:-60px;top:-70px;width:280px;height:280px;opacity:.5;pointer-events:none}
.hero__rings circle{fill:none;stroke:var(--gold);stroke-width:1;opacity:.4}
.hero h1{position:relative;z-index:1;margin-bottom:clamp(16px,1.6vw,22px)}
/* held below the global .h1 ramp: the hero headline lives in a column, not a
   full-width band, so it has to be sized against the column, not the viewport */
.hero .h1{font-size:clamp(2rem,8.2vw,4rem)}
.hero .eyebrow{margin-bottom:12px}
.hero__sub{position:relative;z-index:1;font-size:.9375rem;color:var(--muted);margin-bottom:clamp(22px,2.2vw,30px);max-width:44ch;line-height:1.68}
.hero__acts{
  position:relative;z-index:1;display:grid;gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  margin-bottom:clamp(22px,2.2vw,30px);
}
.hero__acts .btn{width:100%}
.hero__trust{
  position:relative;z-index:1;display:grid;gap:12px 14px;
  grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;
}
/* stars and the figure share one row, so all three trust columns are two rows
   deep and their labels sit on the same baseline */
.hero__rate{display:flex;align-items:center;gap:7px}
.stars{display:flex;gap:2.5px}
.stars svg{width:14px;height:14px;color:var(--gold-deep)}
.hero__trust b{display:block;font-size:.875rem;font-weight:700;letter-spacing:-.01em}
.hero__trust small{font-size:.6875rem;color:var(--muted);display:block;line-height:1.45}
/* rules between the columns instead of separate divider elements, so the three
   figures stay on one 3-column grid at every width */
.hero__trust>div+div{padding-inline-start:14px;border-inline-start:1px solid var(--line)}
/* at phone width each column is ~93px; tightened so no label wraps and all three
   stay exactly two rows deep */
@media(max-width:560px){
  .hero__trust{gap:10px}
  .hero__trust>div+div{padding-inline-start:10px}
  .hero__trust small{font-size:.625rem}
}

/* Phone hero, tuned so the card plus the complete figure block fit one screen.
   The second action stops being a 54px button and becomes an inline link: it is
   the cheapest 60px available and the primary CTA reads stronger on its own. */
@media(max-width:719px){
  .hero__card{padding:20px}
  .hero h1{margin-bottom:12px}
  .hero__sub{font-size:.875rem;line-height:1.55;margin-bottom:18px}
  .hero__acts{grid-template-columns:1fr;gap:0;margin-bottom:18px;align-items:center}
  .hero__acts .btn--lg{padding-block:16px}
  .hero__acts .btn--ghost{
    width:auto;justify-self:start;
    padding:10px 2px;border:0;background:none;box-shadow:none;
    font-size:.8125rem;color:var(--gold-ink);
    border-radius:0;border-bottom:1.5px solid var(--cream-3);
    margin-top:12px;
  }
  .hero__acts .btn--ghost::before{display:none}
  .hero__acts .btn--ghost:hover{color:var(--gold-dark);border-bottom-color:var(--gold);transform:none}
}

/* Short viewports: reclaim height from the card, in order of least value first,
   so the photo can stay full-column-width and stay aligned with the card above it.
   The trust strip goes first because the facts block immediately below restates
   the same three numbers verbatim. */
@media(max-width:719px) and (max-height:819px){
  .hero__trust{display:none}
}
@media(max-width:719px) and (max-height:699px){
  .hero .h1{font-size:clamp(1.75rem,7vw,2rem)}
  .hero__sub{font-size:.8125rem;margin-bottom:14px}
  .hero .eyebrow{margin-bottom:9px;font-size:10.5px}
  .hero__acts .btn--lg{padding-block:14px}
}

/* ---- photo: flow mode (one column) ----
   The frame is capped by a width derived from the viewport HEIGHT, so on a phone
   the whole figure block lands inside the first screen instead of running off the
   bottom. The panel is inset from the frame by exactly --cut-bleed, so it tracks
   the photo at any size and no dark dead space can ever appear beside it. */
.hero__media{
  position:relative;min-width:0;
  --panel-top:clamp(30px,9vw,64px);   /* how much head clears the dark panel */
  --cut-bleed:clamp(10px,4.6vw,34px); /* how far the figures pass the panel edge */
  --cut-rise:0px;
  /* Last-resort cap only. Shrinking the photo also narrows the panel (the panel
     is inset from the frame), which would leave it visibly narrower than the card
     above it — so on short screens we take height out of the CARD first, below,
     and only fall back to this on genuinely small handsets.
     1.1878 is the asset's 1290/1086 ratio, turning leftover height into a width. */
  --cut-cap:max(200px, calc((100svh - 460px) * 1.1878));
  --frame-w:min(100% + var(--cut-bleed) * 2, var(--cut-cap));
}
.hero__frame{
  /* static on purpose: the panel then positions against .hero__media and stays
     the full column width even when --cut-cap shrinks this frame.
     margin-inline:auto CANNOT be used here — an auto margin resolves to 0 once
     the box is wider than its container, which parks the frame at the left edge
     and pushes the figures off the right of the screen. This centres in both
     directions, negative or positive. */
  position:static;min-width:0;
  width:var(--frame-w);
  margin-inline:calc((100% - var(--frame-w)) / 2);
}
.hero__panel{
  position:absolute;left:0;right:0;bottom:0;top:var(--panel-top);
  border-radius:var(--r-2xl);overflow:hidden;
  background:linear-gradient(165deg,var(--charcoal-700) 0%,var(--charcoal) 52%,var(--charcoal-900) 100%);
}
.hero__panel::after{
  content:"";position:absolute;left:50%;top:2%;translate:-50% 0;width:118%;aspect-ratio:1;
  border-radius:50%;background:radial-gradient(circle,rgba(203,163,101,.26) 0%,transparent 62%);
}
/* <picture> exists only to offer AVIF. display:contents keeps it out of the
   box tree, so the image lays out against .hero__frame exactly as it did
   before it had a wrapper - in both the stacked and two-column modes. */
.hero__frame > picture{display:contents}
.hero__cut{
  position:relative;z-index:2;display:block;
  width:100%;max-width:none;height:auto;
  /* tight and low, so it reads as a contact shadow on the panel rather than a
     halo that would smudge the cream card it overlaps at wide widths */
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.34));
  transition:transform .5s var(--ease-out);
}

/* Tablet band: the card is much taller here (full-size headline, trust strip
   still shown), so the leftover-height constant differs from the phone one. */
@media(min-width:720px) and (max-width:1179px){
  .hero__media{--cut-cap:max(320px, calc((100svh - 520px) * 1.1878))}
}

/* ---- photo: two-column mode ---- */
@media(min-width:1180px){
  .hero__grid{
    grid-template-columns:.86fr 1.14fr;
    gap:clamp(18px,1.6vw,26px);
    aspect-ratio:100/47;              /* row height tracks the wrap width */
    align-items:stretch;
  }
  .hero .h1{font-size:clamp(2.1rem,3.6vw,4rem)}
  /* trimmed from btn--lg's 38px so both labels clear their box at the narrower
     two-column card width */
  .hero__acts .btn{padding-inline:clamp(20px,1.7vw,30px)}
  .hero__trust{grid-template-columns:repeat(3,auto);justify-content:start;gap:14px 18px}
  .hero__trust b{font-size:.9375rem}
  .hero__trust small{font-size:.75rem}

  .hero__media{
    --panel-top:clamp(56px,6vw,102px);
    --cut-bleed:clamp(10px,1.15vw,20px);
    --cut-rise:clamp(12px,2vw,32px);
  }
  .hero__frame{position:absolute;inset:0;width:auto;margin-inline:0}
  .hero__cut{
    position:absolute;bottom:0;left:50%;
    translate:-50% 0;
    height:calc(100% + var(--cut-rise));width:auto;
  }
}
@media(min-width:1600px){
  /* the wrap stops growing at --maxw, so the vw-based clamps have to stop too or
     the bleed keeps widening against a fixed column */
  .hero__media{--panel-top:96px;--cut-bleed:18px;--cut-rise:30px}
}

/* ---------- 8. MARQUEE ---------- */
.ticker{
  background:var(--charcoal);border-radius:var(--r-pill);overflow:hidden;
  padding:17px 0;position:relative;cursor:grab;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.ticker:active{cursor:grabbing}
.ticker__track{display:flex;width:max-content;animation:marq 42s linear infinite;will-change:transform}
.ticker:hover .ticker__track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
.ticker__item{
  display:inline-flex;align-items:center;gap:22px;padding:0 22px;flex:none;
  font-size:.8125rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.78);
  white-space:nowrap;transition:color .3s;
}
.ticker__item:hover{color:var(--gold-light)}
.ticker__item::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold);opacity:.8;flex:none}

/* ---------- 9. SECTION HEADS ---------- */
.shead{display:grid;gap:22px;margin-bottom:clamp(38px,5vw,62px);align-items:end}
@media(min-width:900px){.shead--split{grid-template-columns:1.15fr .85fr;gap:48px}}
.shead__t{max-width:20ch}

/* ---------- 9b. AT A GLANCE ----------
   Deliberately plain: four labelled facts, hairline-separated, no icons. It is
   the page's canonical statement of rating / address / hours / contact, so it has
   to read the same to a visitor skimming it and to a crawler parsing it. */
.facts{
  display:grid;gap:0;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--white);overflow:hidden;
}
.facts__i{padding:18px 20px;border-top:1px solid var(--line-soft)}
.facts__i:first-child{border-top:0}
.facts dt{
  font-size:.625rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-ink);margin-bottom:7px;
}
.facts dd{font-size:.8125rem;line-height:1.62;color:var(--muted)}
.facts dd b{font-weight:600;color:var(--ink)}
.facts dd a{border-bottom:1px solid var(--cream-3);transition:border-color .3s}
.facts dd a:hover{border-bottom-color:var(--gold)}
@media(min-width:640px){
  .facts{grid-template-columns:1fr 1fr}
  .facts__i:nth-child(2){border-top:0}
  .facts__i:nth-child(even){border-inline-start:1px solid var(--line-soft)}
}
@media(min-width:1080px){
  .facts{grid-template-columns:repeat(4,1fr)}
  .facts__i{border-top:0;padding:20px 22px}
  .facts__i+.facts__i{border-inline-start:1px solid var(--line-soft)}
}

/* ---------- 10. COLLAGE ---------- */
.collage{position:relative;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:14px}
.collage figure{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--cream-2);box-shadow:var(--sh-1)}
.collage img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease-out)}
.collage figure:hover img{transform:scale(1.06)}
.collage__a{grid-row:span 2;min-height:100%}
.collage__b{aspect-ratio:4/3}
.collage__c{aspect-ratio:4/3.1}
.collage__chip{
  position:absolute;right:-6px;top:38%;z-index:3;
  background:var(--grad-gold);color:var(--charcoal-900);
  border-radius:var(--r-md);padding:14px 18px;box-shadow:var(--sh-gold);
  text-align:center;min-width:118px;
}
.collage__chip b{display:block;font-size:1.5rem;font-weight:700;line-height:1;letter-spacing:-.03em}
.collage__chip small{font-size:.625rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;opacity:.72}
@media(min-width:600px){.collage__chip{right:-14px;padding:16px 22px;min-width:134px}.collage__chip b{font-size:1.75rem}}

.checks{display:grid;gap:13px;margin-top:30px}
.checks li{display:flex;gap:13px;align-items:flex-start;font-size:.9375rem;color:var(--ink);line-height:1.55}
.checks svg{width:20px;height:20px;flex:none;color:var(--gold-deep);margin-top:1px}
.checks b{font-weight:600}

/* ---------- 11. STATS (dark band) ---------- */
.stats{
  background:var(--charcoal);color:#fff;position:relative;overflow:hidden;
  padding-block:clamp(58px,7.5vw,96px);
}
.stats__rings{position:absolute;inset:0;pointer-events:none;opacity:.35}
.stats__rings circle{fill:none;stroke:var(--gold);stroke-width:1}
.stats__head{text-align:center;position:relative;z-index:1;margin-bottom:clamp(34px,4.5vw,52px)}
.stats__head h2{color:#fff}
.stats__head p{color:rgba(255,255,255,.60);max-width:52ch;margin:16px auto 0;font-size:.9375rem}
.stats__grid{position:relative;z-index:1;display:grid;gap:14px;grid-template-columns:repeat(2,1fr)}
@media(min-width:860px){.stats__grid{grid-template-columns:repeat(4,1fr)}}
.stat{
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.10);
  border-radius:var(--r-lg);padding:clamp(20px,2.6vw,30px);
  transition:.5s var(--ease-out);position:relative;overflow:hidden;
}
.stat:hover{transform:translateY(-5px);border-color:rgba(203,163,101,.5);background:rgba(255,255,255,.09)}
.stat b{
  display:block;font-size:clamp(2rem,4vw,2.85rem);font-weight:700;line-height:1;letter-spacing:-.045em;
  background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:9px;font-variant-numeric:tabular-nums;
}
.stat span{font-size:.8125rem;color:rgba(255,255,255,.62);letter-spacing:.04em;line-height:1.45;display:block}

/* ---------- 12. TREATMENT EXPLORER ---------- */
.tx{display:grid;gap:16px;background:var(--cream);border-radius:var(--r-xl);padding:clamp(14px,1.6vw,18px)}
@media(min-width:900px){.tx{grid-template-columns:262px 1fr}}
@media(min-width:1300px){.tx{grid-template-columns:300px 1fr}.tx__img{aspect-ratio:16/5.4}}
.tx__tabs{
  display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);
          mask-image:linear-gradient(90deg,#000 82%,transparent);
}
.tx__tabs::-webkit-scrollbar{display:none}
.tx__tab{scroll-snap-align:start}
@media(min-width:900px){
  .tx__tabs{flex-direction:column;overflow:visible;gap:5px;-webkit-mask-image:none;mask-image:none}
}
.tx__tab{
  position:relative;text-align:left;padding:15px 18px;border-radius:var(--r-sm);
  font-size:.875rem;font-weight:500;color:var(--charcoal-300);white-space:nowrap;flex:none;
  transition:.35s var(--ease);display:flex;align-items:center;gap:11px;width:100%;
}
.tx__tab::before{
  content:"";position:absolute;left:0;top:16%;bottom:16%;width:2.5px;border-radius:3px;
  background:var(--grad-gold);transform:scaleY(0);transition:transform .4s var(--ease-out);
}
.tx__tab:hover{color:var(--charcoal-900);background:rgba(255,255,255,.6)}
.tx__tab[aria-selected="true"]{background:#fff;color:var(--charcoal-900);font-weight:600;box-shadow:var(--sh-1)}
.tx__tab[aria-selected="true"]::before{transform:scaleY(1)}
.tx__tab i{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--cream-2);color:var(--gold-dark);flex:none;transition:.35s}
.tx__tab[aria-selected="true"] i{background:var(--grad-gold);color:var(--charcoal-900)}
.tx__tab i svg{width:14px;height:14px}
.tx__panels{background:#fff;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-1);min-height:440px}
.tx__panel[hidden]{display:none}
.tx__panel{animation:fadeUp .55s var(--ease-out)}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.tx__img{position:relative;aspect-ratio:16/6.4;overflow:hidden;background:var(--cream-2)}
.tx__img img{width:100%;height:100%;object-fit:cover}
.tx__img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(30,29,30,.42))}
.tx__body{padding:clamp(22px,3vw,34px)}
.tx__body h3{margin-bottom:11px}
.tx__body>p{color:var(--muted);font-size:.9375rem;line-height:1.72;margin-bottom:20px;max-width:60ch}
.tx__feats{display:grid;gap:10px;margin-bottom:26px}
@media(min-width:1150px){.tx__feats{grid-template-columns:1fr 1fr;gap:12px 34px}.tx__body>p{max-width:76ch}}
.tx__feats li{display:flex;gap:11px;font-size:.875rem;color:var(--ink);align-items:flex-start}
.tx__feats svg{width:17px;height:17px;color:var(--gold-deep);flex:none;margin-top:2px}
.tx__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-top:22px;border-top:1px solid var(--line-soft)}
.tx__meta{display:flex;gap:26px;flex-wrap:wrap}
.tx__meta small{display:block;font-size:.6875rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);margin-bottom:3px;font-weight:500}
.tx__meta b{font-size:.9375rem;font-weight:600}

/* ---------- 13. BEFORE / AFTER ---------- */
.ba{
  position:relative;border-radius:var(--r-lg);overflow:hidden;user-select:none;touch-action:pan-y;
  box-shadow:var(--sh-2);background:var(--charcoal);cursor:ew-resize;aspect-ratio:1000/624;
}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba__after{clip-path:inset(0 0 0 var(--pos,50%))}
.ba__handle{
  position:absolute;top:0;bottom:0;left:var(--pos,50%);width:3px;background:#fff;
  box-shadow:0 0 0 1px rgba(30,29,30,.14),0 0 24px rgba(0,0,0,.35);pointer-events:none;z-index:2;
}
.ba__knob{
  position:absolute;top:50%;left:50%;translate:-50% -50%;width:46px;height:46px;border-radius:50%;
  background:#fff;display:grid;place-items:center;box-shadow:var(--sh-2);color:var(--charcoal);
}
.ba__knob svg{width:20px;height:20px}
.ba__tag{
  position:absolute;top:14px;z-index:3;padding:6px 13px;border-radius:var(--r-pill);
  font-size:.6875rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  background:rgba(30,29,30,.72);color:#fff;backdrop-filter:blur(8px);pointer-events:none;
}
.ba__tag--l{left:14px}
.ba__tag--r{right:14px;background:var(--grad-gold);color:var(--charcoal-900)}

.ba-wrap{display:grid;gap:18px}
@media(min-width:980px){
  .ba-wrap{grid-template-columns:1.32fr .68fr;align-items:stretch}
  /* drop the ratio in 2-col: a stretched item + aspect-ratio grows its WIDTH and
     overflows the column. Height comes from the row instead; images cover it. */
  .ba{aspect-ratio:auto;min-height:520px;min-width:0}
}
.case{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(24px,3vw,32px);display:flex;flex-direction:column;
}
.case h3{margin-bottom:12px}
.case>p{font-size:.9375rem;color:var(--muted);line-height:1.75;margin-bottom:22px}
.case ul{display:grid;gap:1px;margin-bottom:22px;margin-top:auto}
.case li{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:12px 0;border-top:1px solid var(--line-soft);font-size:.8125rem;
}
.case li:last-child{border-bottom:1px solid var(--line-soft)}
.case li span{color:var(--muted)}
.case li b{font-weight:600;color:var(--ink);text-align:right}

/* ---------- 14. TEAM ---------- */
.team{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.member{
  background:var(--white);border:1px solid var(--line-soft);border-radius:var(--r-lg);overflow:hidden;
  transition:.55s var(--ease-out);
}
.member:hover{transform:translateY(-6px);box-shadow:var(--sh-3);border-color:var(--cream-3)}
.member__ph{position:relative;aspect-ratio:1/1.06;background:var(--cream-2);overflow:hidden}
.member__ph img{width:100%;height:100%;object-fit:cover;object-position:center 18%;transition:transform .9s var(--ease-out)}
.member:hover .member__ph img{transform:scale(1.055)}
.member__ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 58%,rgba(30,29,30,.30))}
.member__tag{
  position:absolute;left:12px;top:12px;z-index:2;padding:5px 11px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.94);font-size:.625rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold-dark);
}
.member__b{padding:20px 20px 22px;text-align:center}
.member__b b{display:block;font-size:1.0625rem;font-weight:600;letter-spacing:-.015em;margin-bottom:4px}
.member__b span{font-size:.8125rem;color:var(--gold-ink);font-weight:500}
.member__b p{font-size:.8125rem;color:var(--muted);margin-top:10px;line-height:1.6}

/* ---------- 15. TESTIMONIALS ---------- */
.tst{position:relative}
.tst__vp{overflow:hidden}
.tst__track{display:flex;gap:16px;transition:transform .65s var(--ease-out);will-change:transform}
.tst__card{
  flex:0 0 100%;background:var(--white);border:1px solid var(--line-soft);
  border-radius:var(--r-lg);padding:clamp(24px,3vw,32px);display:flex;flex-direction:column;gap:18px;
  transition:box-shadow .5s var(--ease-out),border-color .5s var(--ease-out),transform .5s var(--ease-out);
}
@media(min-width:700px){.tst__card{flex:0 0 calc(50% - 8px)}}
@media(min-width:1050px){.tst__card{flex:0 0 calc(33.333% - 11px)}}
@media(min-width:1500px){.tst__card p{font-size:1rem}}
.tst__card:hover{box-shadow:var(--sh-2);border-color:var(--cream-3);transform:translateY(-3px)}
.tst__card p{font-size:.9375rem;line-height:1.78;color:var(--ink);flex:1}
.tst__card{gap:14px}
.tst__by{display:flex;align-items:center;gap:13px;padding-top:16px;border-top:1px solid var(--line-soft)}
.tst__av{
  width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--grad-gold-soft);color:var(--gold-dark);font-weight:700;font-size:.9375rem;
  border:1.5px solid rgba(203,163,101,.4);
}
.tst__by b{display:block;font-size:.875rem;font-weight:600;line-height:1.3}
.tst__by small{font-size:.75rem;color:var(--muted)}
.tst__nav{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:32px}
.tst__dots{display:flex;gap:7px}
.tst__dots button{width:7px;height:7px;border-radius:var(--r-pill);background:var(--line);transition:.4s var(--ease-out)}
.tst__dots button.is-on{width:26px;background:var(--grad-gold)}
.tst__arrows{display:flex;gap:9px}
.arrow{
  width:46px;height:46px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;
  transition:.4s var(--ease-out);color:var(--charcoal);
}
.arrow:hover:not([disabled]){background:var(--charcoal);color:#fff;border-color:var(--charcoal);transform:scale(1.06)}
.arrow[disabled]{opacity:.32;cursor:not-allowed}
.arrow svg{width:17px;height:17px}

/* ---------- 16. CTA BAND ---------- */
.cta{
  position:relative;overflow:hidden;border-radius:var(--r-2xl);text-align:center;
  padding:clamp(46px,7vw,84px) clamp(24px,5vw,64px);
  background:linear-gradient(150deg,var(--charcoal-700),var(--charcoal) 55%,var(--charcoal-900));color:#fff;
}
.cta__rings{position:absolute;inset:0;opacity:.3;pointer-events:none}
.cta__rings circle{fill:none;stroke:var(--gold);stroke-width:1}
.cta h2{color:#fff;max-width:16ch;margin-inline:auto;position:relative;z-index:1}
.cta p{color:rgba(255,255,255,.62);max-width:52ch;margin:20px auto 32px;position:relative;z-index:1;font-size:.9375rem}
.cta__acts{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* ---------- 17. FAQ ---------- */
.faq{display:grid;gap:10px}
.faq__item{border:1px solid var(--line-soft);border-radius:var(--r-md);background:var(--white);overflow:hidden;transition:.4s var(--ease)}
.faq__item.is-open{border-color:var(--cream-3);box-shadow:var(--sh-1);background:var(--cream)}
.faq__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;text-align:left;
  padding:20px 22px;font-size:.9375rem;font-weight:500;line-height:1.5;transition:color .3s;
}
.faq__item.is-open .faq__q{font-weight:600}
.faq__q:hover{color:var(--gold-dark)}
.faq__ic{
  width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;
  border:1.5px solid var(--line);position:relative;transition:.45s var(--ease-out);
}
.faq__item.is-open .faq__ic{background:var(--grad-gold);border-color:transparent;transform:rotate(135deg)}
.faq__ic::before,.faq__ic::after{content:"";position:absolute;background:var(--charcoal);border-radius:2px;transition:.3s}
.faq__ic::before{width:11px;height:1.7px}
.faq__ic::after{width:1.7px;height:11px}
.faq__item.is-open .faq__ic::before,.faq__item.is-open .faq__ic::after{background:var(--charcoal-900)}
.faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease-out)}
.faq__item.is-open .faq__a{grid-template-rows:1fr}
.faq__a>div{overflow:hidden}
.faq__a p{padding:0 22px 22px;font-size:.9375rem;color:var(--muted);line-height:1.75;max-width:66ch}

/* ---------- 18. BOOKING ---------- */
.book{display:grid;gap:clamp(28px,4vw,52px)}
@media(min-width:980px){.book{grid-template-columns:.86fr 1.14fr}}
.contact{display:grid;gap:11px;margin-top:34px}
.contact>a,.contact>div{
  display:flex;align-items:center;gap:15px;padding:15px 17px;border-radius:var(--r-md);
  border:1px solid var(--line-soft);background:var(--white);transition:.4s var(--ease-out);
}
.contact>a>div,.contact>div>div{min-width:0}
.contact a:hover{border-color:var(--gold);transform:translateX(4px);box-shadow:var(--sh-1)}
.contact i{
  display:grid;place-items:center;width:40px;height:40px;border-radius:12px;flex:none;
  background:var(--grad-gold-soft);color:var(--gold-dark);
}
.contact i svg{width:18px;height:18px}
.contact small{display:block;font-size:.6875rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);font-weight:500;margin-bottom:2px}
.contact b{font-size:.875rem;font-weight:600;letter-spacing:-.005em;word-break:break-word}

.wiz{background:var(--cream);border-radius:var(--r-xl);padding:clamp(18px,2.4vw,26px);display:grid;gap:18px}
@media(min-width:720px){.wiz{grid-template-columns:186px 1fr}}
.wiz__steps{
  display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(90deg,#000 84%,transparent);
          mask-image:linear-gradient(90deg,#000 84%,transparent);
}
.wiz__steps::-webkit-scrollbar{display:none}
@media(min-width:720px){
  .wiz__steps{flex-direction:column;gap:2px;overflow:visible;-webkit-mask-image:none;mask-image:none}
}
.wiz__step{
  display:flex;align-items:center;gap:11px;padding:12px 13px;border-radius:var(--r-sm);
  font-size:.8125rem;font-weight:500;color:var(--charcoal-300);white-space:nowrap;flex:none;
  transition:.4s var(--ease);width:100%;text-align:left;
}
.wiz__step i{
  display:grid;place-items:center;width:25px;height:25px;border-radius:50%;flex:none;
  background:#fff;border:1.5px solid var(--line);font-size:.6875rem;font-weight:700;color:var(--muted);
  transition:.4s var(--ease-out);font-style:normal;
}
.wiz__step i svg{width:12px;height:12px}
.wiz__step.is-active{background:#fff;color:var(--charcoal-900);font-weight:600;box-shadow:var(--sh-1)}
.wiz__step.is-active i{background:var(--grad-gold);border-color:transparent;color:var(--charcoal-900)}
.wiz__step.is-done i{background:var(--charcoal);border-color:transparent;color:#fff}
.wiz__pane{background:#fff;border-radius:var(--r-lg);padding:clamp(18px,2.4vw,26px);box-shadow:var(--sh-1);display:flex;flex-direction:column;min-height:430px}
.wiz__pane[hidden]{display:none}
.wiz__pane>h4{margin-bottom:4px}
.wiz__pane>.wiz__hint{font-size:.8125rem;color:var(--muted);margin-bottom:18px}
.wiz__scroll{flex:1;overflow-y:auto;max-height:300px;margin:0 -6px;padding:0 6px;scrollbar-width:thin}
.wiz__scroll::-webkit-scrollbar{width:5px}
.wiz__scroll::-webkit-scrollbar-thumb{background:var(--cream-3);border-radius:9px}

.pills{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px}
.pill{
  padding:7px 14px;border-radius:var(--r-pill);border:1.5px solid var(--line);
  font-size:.75rem;font-weight:500;color:var(--muted);transition:.35s var(--ease);
}
.pill:hover{border-color:var(--gold);color:var(--charcoal-900)}
.pill.is-on{background:var(--charcoal);border-color:var(--charcoal);color:#fff;font-weight:600}

.svc{
  width:100%;display:flex;align-items:center;gap:13px;padding:13px;border-radius:var(--r-sm);
  border:1.5px solid var(--line-soft);margin-bottom:7px;transition:.35s var(--ease);text-align:left;
}
.svc:hover{border-color:var(--gold);background:var(--cream)}
.svc.is-on{border-color:var(--gold-deep);background:var(--cream);box-shadow:0 0 0 3px rgba(203,163,101,.14)}
.svc i{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;flex:none;background:var(--cream-2);color:var(--gold-dark);transition:.35s}
.svc.is-on i{background:var(--grad-gold);color:var(--charcoal-900)}
.svc i svg{width:17px;height:17px}
.svc__t{flex:1;min-width:0}
.svc__t b{display:block;font-size:.875rem;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.svc__t small{font-size:.75rem;color:var(--muted)}
@media(max-width:560px){
  .svc{padding:11px;gap:10px}
  .svc i{width:32px;height:32px;border-radius:10px}
  .svc__t b{font-size:.8125rem}
  .svc__t small{font-size:.6875rem}
  .svc__c{font-size:.625rem;padding:4px 8px}
}
.svc__c{
  font-size:.6875rem;font-weight:600;padding:5px 10px;border-radius:var(--r-pill);flex:none;
  background:var(--cream-2);color:var(--gold-dark);letter-spacing:.03em;
}
.svc.is-on .svc__c{background:var(--charcoal);color:#fff}

.days{display:grid;grid-template-columns:repeat(auto-fill,minmax(66px,1fr));gap:7px;margin-bottom:20px}
.day{
  padding:11px 4px;border-radius:var(--r-sm);border:1.5px solid var(--line-soft);text-align:center;
  transition:.32s var(--ease);
}
.day:hover:not([disabled]){border-color:var(--gold);background:var(--cream)}
.day.is-on{background:var(--charcoal);border-color:var(--charcoal);color:#fff}
.day[disabled]{opacity:.3;cursor:not-allowed;background:var(--cream)}
.day small{display:block;font-size:.625rem;letter-spacing:.08em;text-transform:uppercase;opacity:.68;font-weight:500}
.day b{display:block;font-size:1.0625rem;font-weight:600;line-height:1.25}
.day em{display:block;font-size:.625rem;font-style:normal;opacity:.62}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:7px}
.slot{padding:10px 5px;border-radius:var(--r-sm);border:1.5px solid var(--line-soft);font-size:.8125rem;font-weight:500;transition:.32s var(--ease);font-variant-numeric:tabular-nums}
.slot:hover:not([disabled]){border-color:var(--gold);background:var(--cream)}
.slot.is-on{background:var(--charcoal);border-color:var(--charcoal);color:#fff;font-weight:600}
.slot[disabled]{opacity:.3;cursor:not-allowed}

.field{margin-bottom:14px}
.field label{display:block;font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.field input,.field textarea,.field select{
  width:100%;padding:13px 15px;border-radius:var(--r-sm);border:1.5px solid var(--line);
  background:var(--white);font-size:.9375rem;transition:.3s var(--ease);
}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--gold-deep);box-shadow:0 0 0 3px rgba(203,163,101,.16)}
.field textarea{resize:vertical;min-height:82px;font-family:inherit}
.field.has-err input{border-color:#C0524A;box-shadow:0 0 0 3px rgba(192,82,74,.12)}
.err{display:none;font-size:.75rem;color:#C0524A;margin-top:6px}
.field.has-err .err{display:block}

.summary{display:grid;gap:2px;background:var(--cream);border-radius:var(--r-md);padding:6px;margin-bottom:18px}
.summary div{display:flex;justify-content:space-between;gap:16px;padding:12px 14px;background:#fff;border-radius:10px;font-size:.875rem}
.summary span{color:var(--muted);flex:none}
.summary b{font-weight:600;text-align:right;letter-spacing:-.01em}
.wiz__foot{display:flex;gap:10px;align-items:center;margin-top:20px;padding-top:18px;border-top:1px solid var(--line-soft)}
.wiz__foot .btn{flex:1}
.wiz__note{font-size:.75rem;color:var(--muted);text-align:center;margin-top:12px;line-height:1.6}

/* ---------- 19. LOCATION ---------- */
.loc{display:grid;gap:16px}
@media(min-width:900px){.loc{grid-template-columns:1.25fr .75fr}}
.loc__map{border-radius:var(--r-lg);overflow:hidden;min-height:340px;background:var(--cream-2);border:1px solid var(--line-soft);position:relative}
.loc__map iframe{width:100%;height:100%;min-height:340px;border:0;display:block;filter:grayscale(.28) contrast(1.03)}
.loc__open{
  position:absolute;right:14px;bottom:14px;z-index:2;display:inline-flex;align-items:center;gap:8px;
  padding:11px 17px;border-radius:var(--r-pill);background:var(--charcoal);color:#fff;
  font-size:.8125rem;font-weight:600;box-shadow:var(--sh-2);transition:.4s var(--ease-out);
}
.loc__open:hover{background:var(--gold-deep);transform:translateY(-2px)}
.loc__open svg{width:15px;height:15px}
.hours{background:var(--charcoal);color:#fff;border-radius:var(--r-lg);padding:clamp(24px,3vw,32px);display:flex;flex-direction:column}
.hours h3{color:#fff;margin-bottom:6px}
.hours>p{font-size:.8125rem;color:rgba(255,255,255,.55);margin-bottom:20px}
.hours ul{display:grid;gap:1px;flex:1}
.hours li{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.09);font-size:.875rem}
.hours li span{color:rgba(255,255,255,.62)}
.hours li b{font-weight:500;font-variant-numeric:tabular-nums}
.hours li.is-today span,.hours li.is-today b{color:var(--gold-light);font-weight:600}
.hours li.is-shut b{color:rgba(255,255,255,.38)}
.hours__now{
  display:inline-flex;align-items:center;gap:8px;margin-top:20px;padding:9px 15px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.08);font-size:.75rem;font-weight:600;letter-spacing:.05em;align-self:flex-start;
}
.hours__now i{width:7px;height:7px;border-radius:50%;background:#5BB98C;box-shadow:0 0 0 3px rgba(91,185,140,.22)}
.hours__now.is-shut i{background:var(--silver);box-shadow:0 0 0 3px rgba(172,169,169,.2)}

/* ---------- 20. GALLERY ---------- */
/* 12 tiles: column counts that divide evenly, so the last row is never ragged */
.gal{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:700px){.gal{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.gal{grid-template-columns:repeat(4,1fr)}}
.gal button{position:relative;border-radius:var(--r-md);overflow:hidden;aspect-ratio:1/1.15;background:var(--cream-2)}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .85s var(--ease-out)}
.gal button::after{
  content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(30,29,30,.45),transparent 55%);
  opacity:0;transition:opacity .45s;
}
.gal button:hover img{transform:scale(1.08)}
.gal button:hover::after{opacity:1}
.gal__zoom{
  position:absolute;right:11px;bottom:11px;z-index:2;width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,.94);display:grid;place-items:center;color:var(--charcoal);
  opacity:0;transform:translateY(6px);transition:.4s var(--ease-out);
}
.gal button:hover .gal__zoom{opacity:1;transform:none}
.gal__zoom svg{width:15px;height:15px}

.lb{
  position:fixed;inset:0;z-index:200;background:rgba(24,23,24,.94);backdrop-filter:blur(10px);
  display:grid;place-items:center;padding:clamp(16px,4vw,48px);
  opacity:0;pointer-events:none;transition:opacity .4s var(--ease);
}
.lb{visibility:hidden}
.lb.is-open{opacity:1;pointer-events:auto;visibility:visible}
.lb img{max-width:100%;max-height:82vh;border-radius:var(--r-md);box-shadow:0 40px 90px rgba(0,0,0,.55);transform:scale(.96);transition:transform .45s var(--ease-out)}
.lb.is-open img{transform:none}
.lb__x,.lb__p,.lb__n{
  position:absolute;width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.11);
  color:#fff;display:grid;place-items:center;transition:.35s var(--ease);backdrop-filter:blur(6px);
}
.lb__x:hover,.lb__p:hover,.lb__n:hover{background:var(--grad-gold);color:var(--charcoal-900)}
.lb__x{top:clamp(14px,3vw,28px);right:clamp(14px,3vw,28px)}
.lb__p{left:clamp(10px,2.5vw,32px);top:50%;translate:0 -50%}
.lb__n{right:clamp(10px,2.5vw,32px);top:50%;translate:0 -50%}
.lb svg{width:19px;height:19px}
.lb__cap{position:absolute;bottom:clamp(16px,4vw,34px);left:50%;translate:-50% 0;color:rgba(255,255,255,.7);font-size:.8125rem;letter-spacing:.05em}

/* ---------- 21. FOOTER ---------- */
.foot{background:var(--charcoal);color:#fff;padding-block:clamp(52px,6.5vw,80px) 0;position:relative;overflow:hidden}
.foot__rings{position:absolute;right:-140px;top:-100px;width:460px;height:460px;opacity:.22;pointer-events:none}
.foot__rings circle{fill:none;stroke:var(--gold);stroke-width:1}
.foot__grid{display:grid;gap:38px;position:relative;z-index:1}
@media(min-width:460px) and (max-width:759px){
  .foot__grid{grid-template-columns:1fr 1fr;gap:32px 24px}
  .foot__brand{grid-column:1/-1}
}
@media(min-width:760px){.foot__grid{grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:30px}}
.foot__brand img{width:min(210px,70%);height:auto;margin-bottom:22px}
.foot__brand p{font-size:.875rem;color:rgba(255,255,255,.55);line-height:1.75;max-width:34ch;margin-bottom:22px}
.socials{display:flex;gap:9px}
.socials a{
  width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.16);
  display:grid;place-items:center;color:rgba(255,255,255,.72);transition:.4s var(--ease-out);
}
.socials a:hover{background:var(--grad-gold);color:var(--charcoal-900);border-color:transparent;transform:translateY(-3px)}
.socials svg{width:16px;height:16px}
.foot__h{font-size:.75rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--gold-light);margin-bottom:18px}
.foot li{margin-bottom:11px}
.foot li a,.foot li span{font-size:.875rem;color:rgba(255,255,255,.58);transition:.3s;line-height:1.6;display:inline-block}
.foot li a:hover{color:var(--gold-light);transform:translateX(3px)}
.foot__bar{
  margin-top:clamp(40px,5vw,60px);padding:24px 0;border-top:1px solid rgba(255,255,255,.10);
  display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;align-items:center;
  font-size:.75rem;color:rgba(255,255,255,.62);position:relative;z-index:1;
}
.foot__bar a:hover{color:var(--gold-light)}

/* ---------- 22. FLOAT ACTIONS ---------- */
.fab{position:fixed;right:clamp(14px,2.4vw,26px);bottom:clamp(14px,2.4vw,26px);z-index:90;display:grid;gap:10px;justify-items:end}
.fab__wa{
  display:flex;align-items:center;height:54px;padding:0 17px;border-radius:var(--r-pill);
  background:#25D366;color:#fff;box-shadow:0 10px 30px -8px rgba(37,211,102,.55);
  transition:.45s var(--ease-out);overflow:hidden;max-width:54px;
}
.fab__wa svg{width:22px;height:22px;flex:none}
.fab__wa span{white-space:nowrap;font-size:.8125rem;font-weight:600;opacity:0;margin-left:0;transition:.4s var(--ease-out)}
.fab__wa:hover{max-width:230px;transform:translateY(-2px)}
.fab__wa:hover span{opacity:1;margin-left:11px}
.fab__top{
  width:44px;height:44px;border-radius:50%;background:var(--charcoal);color:#fff;display:grid;place-items:center;
  box-shadow:var(--sh-2);opacity:0;transform:translateY(12px) scale(.85);pointer-events:none;transition:.45s var(--ease-out);
}
.fab__top.is-on{opacity:1;transform:none;pointer-events:auto}
.fab__top:hover{background:var(--gold-deep);transform:translateY(-2px)}
.fab__top svg{width:17px;height:17px}

/* ---------- 23. TOAST ---------- */
.toast{
  position:fixed;left:50%;bottom:26px;translate:-50% 0;z-index:220;
  background:var(--charcoal-900);color:#fff;padding:14px 22px;border-radius:var(--r-pill);
  font-size:.875rem;font-weight:500;box-shadow:var(--sh-3);display:flex;align-items:center;gap:10px;
  opacity:0;transform:translateY(16px);pointer-events:none;transition:.45s var(--ease-out);max-width:calc(100vw - 32px);
}
.toast.is-on{opacity:1;transform:none}
.toast svg{width:17px;height:17px;color:var(--gold);flex:none}

/* ---------- 24. REVEAL ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .85s var(--ease-out),transform .85s var(--ease-out)}
.rv.is-in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}
.rv-d4{transition-delay:.32s}.rv-d5{transition-delay:.40s}.rv-d6{transition-delay:.48s}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}

/* ---------- 25. INTRO ----------
   A curtain, not a loader. It is driven entirely by CSS animations that finish
   in a non-blocking state (opacity 0 / visibility hidden / pointer-events none),
   so a JS failure can never leave the page sealed shut. JS only removes the node
   afterwards and releases the scroll lock. <noscript> kills it outright.

   Sequence (1.55s total):
     0.00  charcoal field, brand mark scales up from 0.88
     0.20  gold hairline draws out from the centre
     0.45  wordmark rises into place
     1.05  curtain splits on the horizontal and clears, top half up / bottom down
------------------------------------------------------------------ */
html.is-intro{overflow:hidden}
html.is-intro body{overflow:hidden}

/* only the inline head script turns this on, so a no-JS visitor never sees it */
.intro{display:none}
html.is-intro .intro{
  position:fixed;inset:0;z-index:300;pointer-events:none;
  display:grid;place-items:center;
}
.intro__half{
  position:absolute;left:0;right:0;height:50.5%;
  /* one viewport-sized gradient, sliced across both halves — anchoring each half
     to its own edge keeps the field continuous, so no seam shows on the split */
  background-image:linear-gradient(168deg,var(--charcoal-700),var(--charcoal) 54%,var(--charcoal-900));
  background-size:100vw 100vh;background-repeat:no-repeat;
  animation:introHalf .72s var(--ease-out) 1.05s forwards;
}
.intro__half--t{top:0;transform-origin:top;background-position:left top}
.intro__half--b{bottom:0;transform-origin:bottom;background-position:left bottom;animation-name:introHalfB}
@keyframes introHalf { to{transform:translateY(-101%)} }
@keyframes introHalfB{ to{transform:translateY(101%)} }

.intro__lock{
  position:relative;z-index:2;display:grid;justify-items:center;gap:20px;
  animation:introOut .34s var(--ease) .92s forwards;
}
@keyframes introOut{ to{opacity:0;transform:translateY(-7px)} }

.intro__mark{
  width:clamp(64px,13vw,94px);height:auto;
  opacity:0;transform:scale(.88);
  animation:introMark .78s var(--ease-out) .06s forwards;
}
@keyframes introMark{ to{opacity:1;transform:none} }

.intro__rule{
  width:clamp(120px,26vw,196px);height:1px;background:var(--grad-gold);
  transform:scaleX(0);animation:introRule .66s var(--ease-out) .2s forwards;
}
@keyframes introRule{ to{transform:scaleX(1)} }

.intro__word{
  display:grid;justify-items:center;gap:7px;text-align:center;
  opacity:0;transform:translateY(9px);
  animation:introWord .62s var(--ease-out) .45s forwards;
}
@keyframes introWord{ to{opacity:1;transform:none} }
.intro__word b{
  font-size:clamp(1.5rem,4.6vw,2.125rem);font-weight:600;letter-spacing:-.028em;color:#fff;line-height:1;
}
.intro__word span{
  font-size:clamp(.5rem,1.5vw,.625rem);font-weight:600;letter-spacing:.34em;text-transform:uppercase;
  color:var(--gold-light);
}

/* the whole overlay stands down on its own, JS or no JS */
.intro{animation:introGone .01s linear 1.78s forwards}
@keyframes introGone{ to{visibility:hidden} }

@media (prefers-reduced-motion:reduce){
  .intro{display:none}
}

/* ---------- 26. RENDER BUDGET ----------
   Everything below the hero is skipped for layout and paint until it comes near
   the viewport. contain-intrinsic-size supplies a placeholder height so the
   scrollbar and anchor offsets stay stable while sections are still skipped.
   Deliberately not applied to .hero, .nav, .drawer, .fab or the intro. */
/* Scoped by hand, not blanket-applied. content-visibility:auto implies paint
   containment, which CLIPS anything hanging outside a section's box — #about is
   excluded because .collage__chip is deliberately offset past its edge. */
@supports (content-visibility: auto) {
  #treatments, #results, #team, #reviews, #clinic, #faq, #book, #visit{
    content-visibility:auto;
    contain-intrinsic-size:auto 1100px;
  }
}

.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}
body.no-scroll{overflow:hidden}