/* ============================================================
   DENTASPOT — design tokens
   Palette is grounded in the subject: surgical drape green as the
   ground, enamel/bone as the page, departure-board amber as the
   single accent. The site is about a flight to a clinic, so the
   accent comes from airport signage rather than from medicine.
   ============================================================ */
:root{
  --ink:#0F1D19;
  --ink-2:#172B25;
  --ink-3:#20392F;
  --bone:#F4F1E9;      /* light text on dark surfaces */
  --bone-2:#E8E3D6;
  --paper:#DEEFDD;     /* light SURFACE colour — pale sections, cards */
  --paper-2:#CBE0CA;   /* hairlines and dividers on paper */
  --paper-ink:#2A3D35;  /* body text on paper */
  --paper-mute:#5A6E66; /* secondary text on paper */
  --amber-ink:#8A6114;  /* amber that passes contrast ON paper */
  --mist:#8FA79D;
  --amber:#E9B14C;
  --clay:#C4674A;

  --fg:var(--bone);
  --bg:var(--ink);

  --display:"Archivo",system-ui,sans-serif;
  --body:"Instrument Sans",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;

  --gut:clamp(20px,4.5vw,72px);
  --maxw:1440px;
  --navh:74px;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--fg);
  font-family:var(--body);font-size:17px;line-height:1.55;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img,svg,video,canvas{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit;background:none;border:none}
button{cursor:pointer}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:2px}

/* ---------- type scale ---------- */
.h-xl,.h-lg,.h-md,.h-sm{
  font-family:var(--display);font-weight:600;
  line-height:.94;letter-spacing:-.035em;text-wrap:balance;
}
.h-xl{font-size:clamp(3rem,9.4vw,8.75rem);font-stretch:112%}
.h-lg{font-size:clamp(2.35rem,5.6vw,4.85rem);font-stretch:108%}
.h-md{font-size:clamp(1.65rem,3.1vw,2.65rem);letter-spacing:-.025em}
.h-sm{font-size:clamp(1.15rem,1.7vw,1.4rem);letter-spacing:-.015em;line-height:1.15}

.eyebrow{
  font-family:var(--mono);font-size:.7rem;font-weight:500;
  letter-spacing:.19em;text-transform:uppercase;color:var(--mist);
}
.lede{font-size:clamp(1.05rem,1.55vw,1.3rem);line-height:1.5;color:#CBD8D2;max-width:56ch}
.muted{color:var(--mist)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:clamp(72px,11vw,150px);position:relative}
.section--pale{background:var(--paper);color:var(--ink)}
/* Any light surface, not just .section--pale — .book uses the same paper
   background and was inheriting the dark-surface text colours. */
.section--pale .lede,.book .lede,.story .lede{color:var(--paper-mute)}
.section--pale .eyebrow,.book .eyebrow,.story .eyebrow{color:var(--paper-mute)}
.section--pale .muted,.book .muted{color:var(--paper-mute)}
.section--pale p,.book > .wrap > .sec-head p{color:inherit}
.rule{height:1px;background:currentColor;opacity:.16;border:0}

.grid{display:grid;gap:clamp(24px,3.2vw,52px)}
.sec-head{
  display:grid;grid-template-columns:minmax(0,1fr);gap:20px;
  margin-bottom:clamp(38px,5.5vw,76px);
}
@media(min-width:900px){
  .sec-head{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:end;gap:48px}
}
.sec-head__tag{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.sec-head__tag::after{content:"";flex:1;height:1px;background:currentColor;opacity:.2}

/* ---------- buttons ---------- */
.btn{
  --btn-fg:var(--ink);--btn-bg:var(--amber);
  position:relative;display:inline-flex;align-items:center;gap:12px;
  padding:15px 28px;border-radius:100px;overflow:hidden;isolation:isolate;
  font-family:var(--display);font-weight:600;font-size:.95rem;font-stretch:106%;
  letter-spacing:-.005em;color:var(--btn-fg);background:var(--btn-bg);
  transition:transform .5s var(--ease),color .35s var(--ease);
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--ink-2);
  transform:translateY(101%);transition:transform .5s var(--ease);
}
.btn:hover{color:var(--bone);transform:translateY(-2px)}
.btn:hover::before{transform:translateY(0)}
.btn__dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.btn--ghost{--btn-bg:transparent;--btn-fg:currentColor;box-shadow:inset 0 0 0 1px currentColor}
.btn--ghost::before{background:var(--amber)}
.btn--ghost:hover{color:var(--ink)}
.btn--lg{padding:19px 36px;font-size:1.05rem}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;inset:0 0 auto;z-index:80;
  transition:transform .55s var(--ease),background .4s linear,border-color .4s linear;
  border-bottom:1px solid transparent;
}
/* Over a bright hero photo the transparent nav fails contrast, so it carries
   its own fading scrim until it goes solid on scroll. */
.nav::before{
  content:"";position:absolute;inset:0 0 auto;height:132px;z-index:-1;
  background:linear-gradient(180deg,rgba(15,29,25,.82),transparent);
  opacity:1;transition:opacity .4s linear;pointer-events:none;
}
.nav--stuck::before{opacity:0}
.nav--stuck{background:rgba(15,29,25,.86);backdrop-filter:blur(16px);border-bottom-color:rgba(244,241,233,.11)}

/* The homepage hero is paper-light, where the cream logo and nav links would
   disappear. Rather than recolour the logo, the bar carries its own ink
   surface from the first frame — the logo stays exactly as it is everywhere
   else on the site. */
.nav--solid{background:rgba(15,29,25,.92);backdrop-filter:blur(16px);border-bottom-color:rgba(244,241,233,.11)}
.nav--solid::before{opacity:0}
.nav--hidden{transform:translateY(-102%)}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:74px}
/* Wordmark is type only. "Dent" sits at normal weight, "Spot" goes heavy —
   the join is the mark, so it survives at any size without an icon. */
.brand{
  display:inline-flex;align-items:baseline;
  font-family:var(--display);font-size:1.3rem;
  font-weight:400;font-stretch:106%;letter-spacing:-.045em;
  line-height:1;white-space:nowrap;
}
.brand b{font-weight:800;letter-spacing:-.05em}
.brand i{
  font-style:normal;color:var(--amber);
  margin-left:.09em;transition:transform .5s var(--ease);
  display:inline-block;transform-origin:center bottom;
}
.brand:hover i{transform:translateY(-.14em)}
.section--pale .brand i{color:var(--clay)}

.nav__links{display:none;gap:6px}
@media(min-width:1060px){.nav__links{display:flex}}
.nav__link{
  position:relative;padding:9px 15px;border-radius:100px;font-size:.9rem;
  color:#C0CFC9;transition:color .3s var(--ease);
}
.nav__link::after{
  content:"";position:absolute;left:15px;right:15px;bottom:5px;height:1px;
  background:var(--amber);transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease);
}
.nav__link:hover,.nav__link[aria-current="true"]{color:var(--bone)}
.nav__link:hover::after,.nav__link[aria-current="true"]::after{transform:scaleX(1)}
.nav__right{display:flex;align-items:center;gap:12px}
.nav__cta{display:none}
@media(min-width:700px){.nav__cta{display:inline-flex}}

/* No ring — just the bars. The 46px box stays for the touch target even
   though nothing is drawn around it. */
.burger{width:46px;height:46px;display:grid;place-items:center;justify-items:end;background:none}
@media(min-width:1060px){.burger{display:none}}
.burger span{display:block;width:23px;height:2px;border-radius:2px;background:currentColor;transition:transform .4s var(--ease),opacity .25s linear}
.burger span+span{margin-top:6px}
/* 2px bar + 6px gap = 8px centre-to-centre, so the cross must travel 8px —
   any other value leaves the X off-centre. */
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

.drawer{
  position:fixed;inset:0;z-index:79;background:var(--ink);
  padding:104px var(--gut) 40px;display:flex;flex-direction:column;justify-content:space-between;
  clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease);
  visibility:hidden;
}
.drawer[data-open="true"]{clip-path:inset(0 0 0 0);visibility:visible}
.drawer__link{
  display:block;font-family:var(--display);font-weight:600;font-stretch:110%;
  font-size:clamp(2rem,8vw,3.4rem);letter-spacing:-.035em;line-height:1.08;
  padding-block:7px;opacity:0;transform:translateY(26px);clip-path:inset(0 0 100% 0);
}
.drawer[data-open="true"] .drawer__link{
  animation:drawer-in .8s var(--ease) forwards;animation-delay:calc(var(--i)*55ms + 140ms);
}
@keyframes drawer-in{to{opacity:1;transform:none;clip-path:inset(0 0 -20% 0)}}

/* ---------- scroll progress ---------- */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;transform-origin:left;transform:scaleX(0);background:var(--amber);z-index:90}

/* ============================================================
   HERO — light, with an image corridor
   ============================================================ */
/* Two rails of cards ride from far behind the screen toward the viewer.
   Perspective does the work of two animations at once: as a card's z grows
   it gets bigger AND its screen x sweeps out from the vanishing point,
   because the projection scales position and size by the same factor.
   Every length is cqw — a percentage of the container width — so the
   corridor keeps its proportions at any size.

   Geometry is tuned so a card reaches full size just as its inner edge
   touches the frame: the lateral spread and the growth rate are coupled, so
   spreading the rails wider (or growing cards faster) throws the largest
   cards off-screen before you ever see them. */
.hero--stream{
  position:relative;min-height:100svh;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-bottom:clamp(28px,4vw,54px);
  background:
    radial-gradient(78% 62% at 50% 34%,#EAF6E9 0%,var(--paper) 56%,#CDE3CC 100%);
  color:var(--ink);
  container-type:inline-size;
}

/* Starts below the fixed nav — the bar is opaque (the cream logo needs an
   ink surface), so anything under it is simply hidden. */
.hero__stage{position:absolute;inset:74px 0 0;z-index:0;pointer-events:none}
.stream{
  position:absolute;inset:0;
  perspective:30cqw;
  perspective-origin:64% 48%;
  transform-style:preserve-3d;
}
.stream__card{
  position:absolute;left:64%;top:48%;
  width:18cqw;height:25cqw;
  margin-left:-9cqw;margin-top:-12.5cqw;
  border-radius:.9cqw;overflow:hidden;
  backface-visibility:hidden;
  box-shadow:0 1.2cqw 3cqw rgba(15,29,25,.16);
  animation-duration:18s;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
}
.stream__card img{width:100%;height:100%;object-fit:cover;display:block}
.stream__card--r{animation-name:stream-r}
.stream__card--l{animation-name:stream-l}

@keyframes stream-r{0.00%{transform:translate3d(-6.00cqw,0,-77.14cqw) rotateY(-3.00deg)}4.17%{transform:translate3d(-1.97cqw,0,-70.31cqw) rotateY(-3.46deg)}8.33%{transform:translate3d(1.82cqw,0,-63.92cqw) rotateY(-3.92deg)}12.50%{transform:translate3d(5.37cqw,0,-57.94cqw) rotateY(-4.38deg)}16.67%{transform:translate3d(8.70cqw,0,-52.33cqw) rotateY(-4.83deg)}20.83%{transform:translate3d(11.80cqw,0,-47.08cqw) rotateY(-5.29deg)}25.00%{transform:translate3d(14.68cqw,0,-42.17cqw) rotateY(-5.75deg)}29.17%{transform:translate3d(17.34cqw,0,-37.57cqw) rotateY(-6.21deg)}33.33%{transform:translate3d(19.80cqw,0,-33.27cqw) rotateY(-6.67deg)}37.50%{transform:translate3d(22.05cqw,0,-29.23cqw) rotateY(-7.12deg)}41.67%{transform:translate3d(24.10cqw,0,-25.46cqw) rotateY(-7.58deg)}45.83%{transform:translate3d(25.95cqw,0,-21.92cqw) rotateY(-8.04deg)}50.00%{transform:translate3d(27.61cqw,0,-18.62cqw) rotateY(-8.50deg)}54.17%{transform:translate3d(29.09cqw,0,-15.52cqw) rotateY(-8.96deg)}58.33%{transform:translate3d(30.40cqw,0,-12.62cqw) rotateY(-9.42deg)}62.50%{transform:translate3d(31.53cqw,0,-9.90cqw) rotateY(-9.88deg)}66.67%{transform:translate3d(32.50cqw,0,-7.36cqw) rotateY(-10.33deg)}70.83%{transform:translate3d(33.31cqw,0,-4.98cqw) rotateY(-10.79deg)}75.00%{transform:translate3d(33.98cqw,0,-2.75cqw) rotateY(-11.25deg)}79.17%{transform:translate3d(34.51cqw,0,-0.66cqw) rotateY(-11.71deg)}83.33%{transform:translate3d(34.91cqw,0,1.29cqw) rotateY(-12.17deg)}87.50%{transform:translate3d(35.19cqw,0,3.12cqw) rotateY(-12.62deg)}91.67%{transform:translate3d(35.36cqw,0,4.84cqw) rotateY(-13.08deg)}95.83%{transform:translate3d(35.45cqw,0,6.44cqw) rotateY(-13.54deg)}100.00%{transform:translate3d(35.47cqw,0,7.94cqw) rotateY(-14.00deg)}}
@keyframes stream-l{0.00%{transform:translate3d(6.00cqw,0,-77.14cqw) rotateY(3.00deg)}4.17%{transform:translate3d(1.97cqw,0,-70.31cqw) rotateY(3.46deg)}8.33%{transform:translate3d(-1.82cqw,0,-63.92cqw) rotateY(3.92deg)}12.50%{transform:translate3d(-5.37cqw,0,-57.94cqw) rotateY(4.38deg)}16.67%{transform:translate3d(-8.70cqw,0,-52.33cqw) rotateY(4.83deg)}20.83%{transform:translate3d(-11.80cqw,0,-47.08cqw) rotateY(5.29deg)}25.00%{transform:translate3d(-14.68cqw,0,-42.17cqw) rotateY(5.75deg)}29.17%{transform:translate3d(-17.34cqw,0,-37.57cqw) rotateY(6.21deg)}33.33%{transform:translate3d(-19.80cqw,0,-33.27cqw) rotateY(6.67deg)}37.50%{transform:translate3d(-22.05cqw,0,-29.23cqw) rotateY(7.12deg)}41.67%{transform:translate3d(-24.10cqw,0,-25.46cqw) rotateY(7.58deg)}45.83%{transform:translate3d(-25.95cqw,0,-21.92cqw) rotateY(8.04deg)}50.00%{transform:translate3d(-27.61cqw,0,-18.62cqw) rotateY(8.50deg)}54.17%{transform:translate3d(-29.09cqw,0,-15.52cqw) rotateY(8.96deg)}58.33%{transform:translate3d(-30.40cqw,0,-12.62cqw) rotateY(9.42deg)}62.50%{transform:translate3d(-31.53cqw,0,-9.90cqw) rotateY(9.88deg)}66.67%{transform:translate3d(-32.50cqw,0,-7.36cqw) rotateY(10.33deg)}70.83%{transform:translate3d(-33.31cqw,0,-4.98cqw) rotateY(10.79deg)}75.00%{transform:translate3d(-33.98cqw,0,-2.75cqw) rotateY(11.25deg)}79.17%{transform:translate3d(-34.51cqw,0,-0.66cqw) rotateY(11.71deg)}83.33%{transform:translate3d(-34.91cqw,0,1.29cqw) rotateY(12.17deg)}87.50%{transform:translate3d(-35.19cqw,0,3.12cqw) rotateY(12.62deg)}91.67%{transform:translate3d(-35.36cqw,0,4.84cqw) rotateY(13.08deg)}95.83%{transform:translate3d(-35.45cqw,0,6.44cqw) rotateY(13.54deg)}100.00%{transform:translate3d(-35.47cqw,0,7.94cqw) rotateY(14.00deg)}}

/* The veil is what makes the copy readable without dimming the corridor into
   mud: heavy at the bottom-left where the text sits, clear through the upper
   middle where the cards are most legible. */
.hero__veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  /* Holds >=.90 across the whole copy column — measured, not guessed: below
     that a dark card passing behind the lede drops it under 4.5:1. */
  background:
    linear-gradient(100deg,
      rgba(222,239,221,.97) 0%,
      rgba(222,239,221,.95) 40%,
      rgba(222,239,221,.91) 52%,
      rgba(222,239,221,.44) 68%,
      rgba(222,239,221,.06) 88%),
    linear-gradient(180deg,
      rgba(222,239,221,.26) 0%,
      rgba(222,239,221,0) 24%,
      rgba(222,239,221,.28) 58%,
      rgba(222,239,221,.70) 84%,
      rgba(222,239,221,.85) 100%);
}

.hero__in{position:relative;z-index:2;width:100%}
/* padding-top clears the fixed nav; margin-bottom:auto pushes the rest to the
   bottom of the flex column */
.hero__in{padding-top:132px}
/* the corridor is clipped, but the copy must never be — if the viewport is
   short the hero grows instead of hiding the headline behind the nav */
.hero--stream{min-height:max(100svh,640px)}
/* Both the eyebrow and the foot start at opacity:0 and depend on this. It was
   lost with an earlier hero rewrite, which left everything but the headline
   invisible — keep it adjacent to its only two users. */
@keyframes fade-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.hero h1{margin-block:26px 0}
.hero--stream h1{max-width:min(15ch,54vw)}

/* Per-line mask reveal for the headline. The mask box must sit below the
   baseline or descenders — and the amber highlight — get sliced off; the
   start offset is 132% so the line still begins clear of the taller box. */
.reveal-line{display:block;overflow:hidden;padding-bottom:.22em;margin-bottom:-.22em}
.reveal-line>span{
  display:block;transform:translateY(132%);
  animation:line-up 1.05s var(--ease) forwards;
  animation-delay:calc(var(--i)*95ms + 350ms);
}
@keyframes line-up{to{transform:none}}
/* Letters only, in the brand amber, as requested. Note this measures about
   1.6:1 against the paper background — well under the 3:1 WCAG asks for
   large text. If you want it legible without changing the design, #A5761A
   is the nearest amber that passes at 3.4:1. */
.hero--stream h1 em{font-style:normal;color:var(--amber)}
.hero__foot{
  display:grid;gap:clamp(24px,3vw,34px);margin-top:clamp(28px,4vw,46px);
  max-width:min(54ch,50vw);
  opacity:0;animation:fade-up 1s var(--ease) .95s forwards;
}
.hero--stream .lede{color:#455A51;max-width:46ch}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.hero__stats{display:flex;gap:clamp(22px,3.4vw,48px);flex-wrap:wrap}
.stat__n{font-family:var(--display);font-weight:700;font-stretch:110%;font-size:clamp(1.9rem,3.2vw,2.9rem);line-height:1;letter-spacing:-.03em}
.stat__l{font-family:var(--mono);font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;color:var(--mist);margin-top:9px;max-width:15ch}
.hero--stream .stat__n{color:var(--ink)}
.hero--stream .stat__l{color:#4C6058}

/* buttons on paper */
.hero--stream .btn--ghost{--btn-fg:var(--ink);box-shadow:inset 0 0 0 1px rgba(15,29,25,.35)}
.hero--stream .btn--ghost::before{background:var(--ink)}
.hero--stream .btn--ghost:hover{color:var(--bone);box-shadow:inset 0 0 0 1px transparent}

/* On a phone the hero grows to fit its copy, so any % position resolves
   against a box far taller than the viewport — which is how the corridor
   ended up sitting behind the eyebrow. The band is pinned in px instead,
   and the copy is offset by exactly that height. */
@media(max-width:880px){
  .hero{--band:min(46vw,44vh)}
  .hero__stage{top:74px;height:var(--band);bottom:auto;overflow:hidden}
  /* Cards are sized in cqw, so on a narrow screen they come out physically
     small. Scaling the whole corridor keeps the geometry intact and makes
     each picture large enough to actually read. */
  .stream{perspective-origin:50% 50%}
  .stream__card{left:50%;top:50%}
  /* fades the band into the paper instead of cutting it off square */
  .hero__veil{
    background:linear-gradient(180deg,
      rgba(222,239,221,.55) 0%,
      rgba(222,239,221,.05) 26%,
      rgba(222,239,221,.05) 62%,
      rgba(222,239,221,.72) 88%,
      rgba(222,239,221,1) 100%);
  }
  .hero__in{padding-top:calc(74px + var(--band) + 26px)}
  .hero--stream h1{max-width:none}
  .hero__foot{max-width:none}
}
@media(max-width:640px){
  /* Cards are sized in cqw, so on a phone they come out physically small.
     Scaling the whole corridor keeps the geometry intact and makes each
     picture large enough to read. Phones only — at tablet widths the scaled
     card is taller than the band and would be clipped. */
  .hero{--band:min(56vw,40vh)}
  .stream{transform:scale(1.34);transform-origin:50% 50%}
  /* No override of padding-top here — the 880px rule already offsets the copy
     by the exact height of the corridor band. A smaller value at this width
     pulled the copy back up under the cards. */
  .hero__stats{gap:18px 26px}
  .stat{flex:1 1 40%;min-width:118px}
  .hero__actions .btn{flex:1 1 auto;justify-content:center}
}

/* Pausing rather than disabling keeps the corridor whole: every card is
   already dropped mid-flight by its negative delay, so it freezes as a
   finished still instead of collapsing onto the axis. */
/* landscape phones: the band is capped by height, so the corridor scales down
   to stay inside it rather than being cut off */
@media(max-width:880px) and (max-height:520px){
  .stream{transform:scale(.58);transform-origin:50% 50%}
}

@media(prefers-reduced-motion:reduce){
  .stream__card{animation-play-state:paused}
}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee{border-block:1px solid rgba(244,241,233,.14);padding-block:20px;overflow:hidden;background:var(--ink-2)}
.marquee__set{display:flex}
.marquee__track{display:flex;width:max-content;animation:marq 42s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
.marquee__item{display:flex;align-items:center;gap:16px;padding-inline:26px;font-family:var(--display);font-weight:500;font-stretch:104%;font-size:1.02rem;color:#BDCCC6;white-space:nowrap}
.marquee__item svg{flex:none;opacity:.6}

/* ============================================================
   GAP — the price comparison
   ============================================================ */
.gap-grid{display:grid;gap:0;border-top:1px solid rgba(15,29,25,.16)}
.gap-row{
  display:grid;grid-template-columns:minmax(0,1fr);gap:6px 24px;
  padding-block:22px;border-bottom:1px solid rgba(15,29,25,.16);
  align-items:baseline;
}
@media(min-width:760px){
  .gap-row{grid-template-columns:minmax(0,2.1fr) repeat(3,minmax(0,1fr)) minmax(0,.9fr);gap:24px}
}
.gap-row--head{padding-block:14px;border-bottom-width:1px}
.gap-row--head span{font-family:var(--mono);font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;color:var(--paper-mute)}
.gap-row__name{font-family:var(--display);font-weight:600;font-stretch:106%;font-size:1.12rem;letter-spacing:-.02em}
.gap-cell{font-family:var(--mono);font-size:1rem;font-variant-numeric:tabular-nums}
.gap-cell[data-k]::before{content:attr(data-k) " ";font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-mute)}
@media(min-width:760px){.gap-cell[data-k]::before{content:none}}

/* Below 760px the grid is one column, so the header row degenerates into a
   stack of stray labels — and it's redundant there anyway, since each cell
   prints its own US/TR/MX prefix. Drop it and set the three prices side by
   side with the label above each figure. */
@media(max-width:759px){
  .gap-row--head{display:none}
  .gap-row{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:14px;column-gap:14px}
  .gap-row__name,.gap-save{grid-column:1 / -1}
  .gap-cell[data-k]::before{display:block;margin-bottom:4px}
  .gap-cell{font-size:.94rem}
}
.gap-cell--us{color:#8B9A93;text-decoration:line-through;text-decoration-thickness:1px}
.gap-save{
  justify-self:start;font-family:var(--mono);font-size:.76rem;font-weight:500;
  padding:5px 11px;border-radius:100px;background:var(--ink);color:var(--amber);
}
.gap-note{margin-top:24px;font-size:.86rem;color:var(--paper-mute);max-width:70ch}

/* ============================================================
   THE ROUTE — signature scroll element
   ============================================================ */
/* overflow-x:clip, NOT overflow:hidden — the latter makes this element a
   scroll container, which silently disables position:sticky on the rail. */
.route{background:var(--ink-2);overflow-x:clip}
.route__body{display:grid;gap:clamp(18px,4vw,60px)}
@media(min-width:1000px){.route__body{grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:clamp(40px,5vw,90px)}}

/* Sticky on every screen. Below 1000px the rail turns horizontal and pins
   under the nav as a solid full-bleed bar — a fading background lets the
   step text scroll through it and collide with the labels. */
.route__rail{
  position:sticky;top:var(--navh);z-index:20;align-self:start;
  transition:top .55s var(--ease);
  margin:0 calc(-1 * var(--gut)) 16px;
  padding:8px var(--gut) 10px;
  background:var(--ink-2);
  border-bottom:1px solid rgba(244,241,233,.13);
  box-shadow:0 14px 22px -14px rgba(0,0,0,.55);
}
.route__rail .route__svg{height:auto}
@media(min-width:1000px){
  .route__rail{
    top:118px;height:min(520px,62vh);
    margin:0;padding:0;background:none;border:0;box-shadow:none;
  }
  .route__rail .route__svg{height:100%}
}
.route__svg{width:100%;height:100%;overflow:visible}
.route__path{fill:none;stroke:rgba(244,241,233,.17);stroke-width:1.4}
.route__path--live{stroke:var(--amber);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* No transition on either of these: they are driven directly by scroll position,
   and a time-based transition makes them lag behind the finger on momentum
   scroll. Smoothing is done per-frame in JS instead. */
.route__plane{will-change:transform}
.route__node circle{transition:r .45s var(--ease),fill .45s var(--ease),opacity .45s var(--ease)}
.route__node.is-on circle.dot{r:6.5;fill:var(--amber)}
.route__node.is-on circle.halo{opacity:.24}
.route__node text{font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;fill:var(--mist);transition:fill .4s var(--ease)}
@media(max-width:999px){.route__node text{font-size:7px;letter-spacing:.08em}}
.route__node.is-on text{fill:var(--bone)}

.route__steps{display:grid;gap:clamp(16px,2.4vw,26px)}
.step{
  padding:clamp(24px,3vw,38px);border-radius:22px;
  background:rgba(244,241,233,.035);box-shadow:inset 0 0 0 1px rgba(244,241,233,.09);
  transition:background .6s var(--ease),box-shadow .6s var(--ease),transform .6s var(--ease);
}
.step.is-on{background:rgba(244,241,233,.075);box-shadow:inset 0 0 0 1px rgba(233,177,76,.4)}
.step__k{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.step__n{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;color:var(--amber)}
.step__k .rule{flex:1}
.step__t{font-family:var(--display);font-weight:600;font-stretch:106%;font-size:clamp(1.25rem,2.1vw,1.7rem);letter-spacing:-.025em;margin-bottom:10px}
.step p{color:#BDCCC6;max-width:58ch}
.step__meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.chip{font-family:var(--mono);font-size:.68rem;letter-spacing:.09em;padding:5px 11px;border-radius:100px;box-shadow:inset 0 0 0 1px rgba(244,241,233,.2);color:#BDCCC6}

/* ============================================================
   CLINICS CAROUSEL
   ============================================================ */
.car{position:relative;--slide-gap:clamp(14px,2.2vw,26px)}
/* Gutter lives as slide padding, not flex gap: each slide stays exactly 100%
   of the track, so the -i*100% translate needs no gap compensation. The
   negative margin on the viewport pulls the outer half-gutters back so a
   resting card still sits flush with the section edges. */
.car__view{
  overflow:hidden;cursor:grab;
  margin-inline:calc(var(--slide-gap) / -2);
}
.car__view:active{cursor:grabbing}
.car__view.is-dragging{cursor:grabbing;user-select:none;-webkit-user-select:none}
.car__track{display:flex;transition:transform .85s var(--ease)}
/* display:flex so the card stretches to the track's height. Without it each
   .clinic sizes to its own copy, and cards with shorter descriptions end
   short of the tallest one — which reads as a ragged bottom edge mid-swipe. */
.car__slide{flex:0 0 100%;min-width:0;padding-inline:calc(var(--slide-gap) / 2);display:flex}
/* radius moves off the viewport and onto the card, or it would clip the
   gutter rather than the card */
.clinic{display:grid;gap:0;width:100%;background:var(--ink-2);color:var(--bone);border-radius:24px;overflow:hidden}
@media(min-width:880px){.clinic{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}}
.clinic__vis{position:relative;min-height:290px;overflow:hidden;background:var(--ink-3)}
.clinic__vis::after{content:"";position:absolute;inset:0;background:linear-gradient(210deg,rgba(233,177,76,.2),transparent 58%)}
.clinic__vis svg{position:absolute;inset:0;width:100%;height:100%}
.clinic__vis img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--ease)}
.clinic--link:hover .clinic__vis img{transform:scale(1.045)}
/* single-column card below 880px: the visual should not eat half the screen */
@media(max-width:879px){
  .clinic{grid-template-rows:auto 1fr}
  .clinic__vis{min-height:0;aspect-ratio:16/10}
}
.clinic__flag{position:absolute;top:20px;left:20px;z-index:2;display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;padding:7px 14px;border-radius:100px;background:rgba(15,29,25,.7);backdrop-filter:blur(8px)}
.clinic__body{padding:clamp(26px,3.2vw,44px);display:flex;flex-direction:column;gap:16px;justify-content:center}
.clinic__name{font-family:var(--display);font-weight:600;font-stretch:108%;font-size:clamp(1.5rem,2.6vw,2.15rem);letter-spacing:-.03em;line-height:1.05}
.clinic__facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px;margin-top:4px}
.clinic__fact dt{font-family:var(--mono);font-size:.63rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mist);margin-bottom:5px}
.clinic__fact dd{font-size:.96rem}
.clinic__accred{display:flex;flex-wrap:wrap;gap:7px;margin-top:2px}

.car__bar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:26px;flex-wrap:wrap}
.car__dots{display:flex;gap:9px;flex:1;max-width:340px}
.car__dot{flex:1;height:3px;border-radius:100px;background:rgba(244,241,233,.2);overflow:hidden;position:relative}
.section--pale .car__dot{background:rgba(15,29,25,.15)}
.car__dot i{position:absolute;inset:0;transform-origin:left;transform:scaleX(0);background:var(--amber);display:block}
.car__dot.is-on i{animation:dot-fill var(--dur) linear forwards}
@keyframes dot-fill{to{transform:scaleX(1)}}
.car__nav{display:flex;gap:9px}
.car__btn{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1px currentColor;transition:background .35s var(--ease),color .35s var(--ease)}
.car__btn:hover{background:var(--amber);color:var(--ink);box-shadow:none}

/* ============================================================
   TREATMENTS
   ============================================================ */
.treat{border-top:1px solid rgba(15,29,25,.16)}
.treat__row{
  position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:20px;align-items:start;padding-block:clamp(20px,2.6vw,30px);
  border-bottom:1px solid rgba(15,29,25,.16);transition:color .45s var(--ease);
}
/* key and price sit on the name's line rather than centring against the
   now-taller stacked cell */
.treat__k,.treat__from{padding-top:.42em}
.treat__row::before{content:"";position:absolute;inset:-1px -20px;background:var(--ink);z-index:-1;transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--ease);border-radius:4px}
.treat__row:hover{color:var(--bone)}
.treat__row:hover::before{transform:scaleY(1)}
.treat__row:hover .treat__k{color:var(--amber)}
.treat__k{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;color:var(--paper-mute);transition:color .4s var(--ease)}
/* Both are inline spans, so the list margin-top was inert —
   name and sub-list ran together with no break. block makes them stack. */
.treat__name{display:block;font-family:var(--display);font-weight:600;font-stretch:106%;font-size:clamp(1.2rem,2.4vw,1.85rem);letter-spacing:-.028em;line-height:1.12}
.treat__list{display:block;font-size:.9rem;opacity:.72;margin-top:9px;max-width:74ch;line-height:1.45}
.treat__from{font-family:var(--mono);font-size:.88rem;white-space:nowrap}

/* Below 720px three columns leave the sub-list a few words wide. Drop the
   price to its own row under the name instead. */
@media(max-width:720px){
  .treat__row{grid-template-columns:auto minmax(0,1fr);align-items:start;row-gap:12px}
  .treat__k{padding-top:.35em}
  .treat__from{grid-column:2;justify-self:start}
}
.treat__from b{font-weight:500;color:var(--amber)}

/* ============================================================
   ESTIMATOR
   ============================================================ */
.est{display:grid;gap:clamp(26px,3.4vw,52px)}
@media(min-width:960px){.est{grid-template-columns:minmax(0,1fr) minmax(0,.85fr)}}
.est__panel{padding:clamp(24px,3vw,38px);border-radius:24px;background:rgba(244,241,233,.04);box-shadow:inset 0 0 0 1px rgba(244,241,233,.1)}
.field{margin-bottom:22px}
.field:last-child{margin-bottom:0}
.field__l{display:block;font-family:var(--body);font-weight:600;
  font-size:1rem;letter-spacing:0;text-transform:none;
  color:var(--bone);margin-bottom:13px;line-height:1.35}
@media(min-width:700px){.field__l{font-size:1.06rem}}
.field__h{margin:10px 0 0;font-size:.86rem;line-height:1.5;color:var(--mist)}
.opts{display:flex;flex-wrap:wrap;gap:9px}
.opt{position:relative}
.opt input{position:absolute;opacity:0;inset:0;cursor:pointer}
.opt span{display:block;padding:11px 17px;border-radius:100px;font-size:.9rem;box-shadow:inset 0 0 0 1px rgba(244,241,233,.22);transition:all .35s var(--ease)}
.opt input:checked+span{background:var(--amber);color:var(--ink);box-shadow:none;font-weight:600}
.opt input:focus-visible+span{outline:2px solid var(--amber);outline-offset:3px}
.sel{width:100%;padding:14px 16px;border-radius:14px;box-shadow:inset 0 0 0 1px rgba(244,241,233,.22);background:var(--ink);appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%238FA79D' stroke-width='1.6'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center}
.range{width:100%;-webkit-appearance:none;height:3px;border-radius:3px;background:rgba(244,241,233,.22);margin-top:6px}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--amber);cursor:pointer;border:none}
.range::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--amber);cursor:pointer;border:none}

.quote{padding:clamp(26px,3.2vw,40px);border-radius:24px;background:var(--amber);color:var(--ink);position:sticky;top:118px;align-self:start}
.quote__k{font-family:var(--mono);font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;opacity:.7}
.quote__n{font-family:var(--display);font-weight:700;font-stretch:112%;font-size:clamp(2.6rem,6vw,4.2rem);line-height:.94;letter-spacing:-.04em;margin-block:10px 4px}
.quote__vs{font-family:var(--mono);font-size:.92rem;opacity:.72}
.quote__break{margin-top:22px;padding-top:20px;border-top:1px solid rgba(15,29,25,.22);display:grid;gap:10px}
.quote__line{display:flex;justify-content:space-between;gap:16px;font-size:.9rem}
.quote__line span:last-child{font-family:var(--mono);font-variant-numeric:tabular-nums}
.quote__foot{margin-top:22px;font-size:.78rem;line-height:1.45;opacity:.72}

/* ============================================================
   STORIES
   ============================================================ */
/* Marquee rail. Full-bleed past the gutters so the alpha mask fades against
   the screen edges rather than mid-column. Spacing lives on the cards as
   margin, NOT as flex gap: with `gap`, the duplicated set is one gap short of
   a clean half-width and the -50% loop jumps every cycle. */
.stories{
  position:relative;overflow:hidden;
  margin-inline:calc(-1 * var(--gut));
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 11%,#000 89%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 11%,#000 89%,transparent 100%);
}
.stories__track{
  display:flex;align-items:stretch;width:max-content;
  animation:stories-marq 74s linear infinite;will-change:transform;
}
.stories:hover .stories__track,
.stories:focus-within .stories__track{animation-play-state:paused}
@keyframes stories-marq{to{transform:translate3d(-50%,0,0)}}
.story{
  flex:0 0 clamp(266px,72vw,384px);
  margin-right:clamp(16px,2vw,26px);
  padding:clamp(24px,2.8vw,34px);border-radius:22px;
  box-shadow:inset 0 0 0 1px rgba(15,29,25,.16);
  display:flex;flex-direction:column;gap:16px;background:var(--paper);
}
.story__q{font-family:var(--display);font-weight:500;font-stretch:104%;font-size:clamp(1.05rem,1.7vw,1.24rem);line-height:1.32;letter-spacing:-.02em}
.story__who{margin-top:auto;padding-top:16px;border-top:1px solid rgba(15,29,25,.16);display:flex;align-items:center;gap:12px}
.story__av{width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--ink);color:var(--amber);font-family:var(--mono);font-size:.78rem}
.story__n{font-weight:600;font-size:.92rem;line-height:1.2}
.story__m{font-family:var(--mono);font-size:.68rem;color:var(--paper-mute);letter-spacing:.06em}
.stars{display:flex;gap:2px;color:var(--clay)}

/* ============================================================
   FAQ
   ============================================================ */
.faq{border-top:1px solid rgba(244,241,233,.16);max-width:960px}
.faq__i{border-bottom:1px solid rgba(244,241,233,.16)}
.faq__q{width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding-block:clamp(20px,2.4vw,28px);text-align:left;font-family:var(--display);font-weight:600;font-stretch:104%;font-size:clamp(1.05rem,1.9vw,1.38rem);letter-spacing:-.022em;transition:color .35s var(--ease)}
.faq__q:hover{color:var(--amber)}
.faq__ic{flex:none;width:26px;height:26px;position:relative;margin-top:3px}
.faq__ic::before,.faq__ic::after{content:"";position:absolute;inset:50% 0 auto;height:1.5px;background:currentColor;transition:transform .45s var(--ease)}
.faq__ic::after{transform:rotate(90deg)}
.faq__i[data-open="true"] .faq__ic::after{transform:rotate(0)}
.faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.faq__i[data-open="true"] .faq__a{grid-template-rows:1fr}
.faq__a>div{overflow:hidden}
.faq__a p{padding-bottom:26px;color:#BDCCC6;max-width:70ch}

/* ============================================================
   BOOKING
   ============================================================ */
.book{background:var(--paper);color:var(--ink)}
.book__shell{display:grid;gap:clamp(28px,3.6vw,56px)}
@media(min-width:1000px){.book__shell{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}}
.book__form{padding:clamp(26px,3.2vw,44px);border-radius:26px;background:var(--ink);color:var(--bone)}
.steps-bar{display:flex;gap:7px;margin-bottom:28px}
.steps-bar i{flex:1;height:3px;border-radius:3px;background:rgba(244,241,233,.2);transition:background .45s var(--ease)}
.steps-bar i.is-on{background:var(--amber)}
.pane{display:none}
.pane.is-on{display:block;animation:pane-in .5s var(--ease)}
@keyframes pane-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.pane__t{font-family:var(--display);font-weight:600;font-stretch:106%;font-size:1.4rem;letter-spacing:-.028em;margin-bottom:6px}
.pane__s{color:var(--mist);font-size:.92rem;margin-bottom:24px}
.inp{width:100%;padding:14px 16px;border-radius:14px;box-shadow:inset 0 0 0 1px rgba(244,241,233,.22);background:transparent;transition:box-shadow .3s var(--ease)}
.inp::placeholder{color:#5F736B}
.inp:focus{box-shadow:inset 0 0 0 1.5px var(--amber);outline:none}
.inp[aria-invalid="true"]{box-shadow:inset 0 0 0 1.5px var(--clay)}
.two{display:grid;gap:14px}
@media(min-width:560px){.two{grid-template-columns:1fr 1fr}}
.err{display:block;color:var(--clay);font-size:.78rem;margin-top:7px;min-height:1em}
.pane__nav{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap}
.done{text-align:left;padding-block:14px}
.done__ic{width:56px;height:56px;border-radius:50%;background:var(--amber);color:var(--ink);display:grid;place-items:center;margin-bottom:20px}
.done__ic svg{stroke-dasharray:28;stroke-dashoffset:28;animation:tick .6s var(--ease) .2s forwards}
@keyframes tick{to{stroke-dashoffset:0}}
.recap{margin-top:22px;padding:18px 20px;border-radius:16px;background:rgba(244,241,233,.05);
  box-shadow:inset 0 0 0 1px rgba(244,241,233,.09)}
.sum__line{margin:0;font-size:1.02rem;font-weight:600;color:var(--bone);line-height:1.4}
.sum__reach{margin:8px 0 0;font-size:.92rem;color:var(--mist);line-height:1.5}
.sum__reach b{color:var(--bone);font-weight:600}
.btn--wa{background:#25D366;color:#0F1D19;gap:9px}
.btn--wa:hover{background:#1FBE5B}

.book__aside{display:flex;flex-direction:column;gap:26px}
.assure{display:grid;gap:14px}
.assure__i{display:flex;gap:14px;align-items:flex-start}
.assure__ic{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--ink);color:var(--amber)}
.assure__t{font-weight:600;font-size:.98rem;margin-bottom:2px}
.assure__d{font-size:.88rem;color:var(--paper-mute)}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{background:var(--ink);padding-top:clamp(60px,7vw,96px);overflow:hidden}
.foot__grid{display:grid;gap:clamp(28px,3.4vw,44px)}
@media(min-width:820px){.foot__grid{grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr))}}
.foot__h{font-family:var(--mono);font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;color:var(--mist);margin-bottom:16px}
.foot__l{display:block;padding-block:5px;color:#BDCCC6;transition:color .3s var(--ease),transform .35s var(--ease)}
.foot__l:hover{color:var(--amber);transform:translateX(4px)}
/* Fitted to the container by textLength rather than a vw font-size, so it
   lands exactly on the gutters at every width instead of bleeding off-screen. */
.foot__word{
  display:block;width:100%;margin-top:clamp(46px,6vw,86px);
  user-select:none;pointer-events:none;
  clip-path:inset(0 0 100% 0);transition:clip-path 1.1s var(--ease);
}
.foot__word.is-in{clip-path:inset(0 0 0 0)}
.foot__word svg{display:block;width:100%;height:auto;overflow:visible}
.foot__word text{
  font-family:var(--display);font-weight:800;
  fill:rgba(244,241,233,.075);
  transform:translateY(var(--lift,0px));transition:transform .6s var(--ease);
}
.foot__legal{display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between;padding-block:26px;border-top:1px solid rgba(244,241,233,.14);margin-top:clamp(26px,3vw,40px);font-size:.8rem;color:var(--paper-mute)}

/* ============================================================
   PORTED INTERACTIONS
   1. Lerped "DRAG" cursor + inertia slider (T.Ricks menu+slider)
   2. Cursor-tracked preview stack on a category list (MinimalGoods)
   3. Full-bleed menu with per-line clip reveal
   ============================================================ */

/* --- 1. drag cursor --- */
.dragcur{position:fixed;top:0;left:0;z-index:70;pointer-events:none;will-change:transform}
.dragcur span{
  display:grid;place-items:center;width:98px;height:98px;border-radius:50%;
  background:var(--amber);color:var(--ink);
  font-family:var(--mono);font-size:.63rem;letter-spacing:.2em;
  transform:translate(-50%,-50%) scale(0);
  transition:transform .55s var(--ease);
}
.dragcur.is-on span{transform:translate(-50%,-50%) scale(1)}
.dragcur.is-grab span{transform:translate(-50%,-50%) scale(.78)}
@media(hover:none),(pointer:coarse){.dragcur{display:none}}
.car__view{touch-action:pan-y}
@media(hover:hover){.car__view.has-cur{cursor:none}}

/* --- 2. treatment preview stack --- */
.treat-prev{
  position:fixed;top:0;left:0;z-index:60;width:270px;height:330px;
  pointer-events:none;will-change:transform;
}
.treat-prev__i{
  position:absolute;inset:0;border-radius:16px;overflow:hidden;
  transform:translate(-50%,-50%) scale(.86) rotate(var(--r,0deg));
  opacity:0;transition:opacity .45s var(--ease),transform .6s var(--ease);
  box-shadow:0 26px 60px rgba(15,29,25,.34);
}
.treat-prev__i.is-on{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(var(--r,0deg))}
.treat-prev__i svg{width:100%;height:100%}
.treat-prev__l{
  position:absolute;left:16px;bottom:14px;z-index:2;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bone);
}
@media(hover:none),(pointer:coarse),(max-width:900px){.treat-prev{display:none}}

/* --- 3. menu overlay --- */
.drawer__meta{display:flex;flex-wrap:wrap;gap:10px 28px;align-items:center;justify-content:space-between}
.drawer__link{position:relative;width:max-content;max-width:100%}
.drawer__link::after{
  content:"";position:absolute;left:0;right:0;bottom:.16em;height:2px;background:var(--amber);
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease);
}
.drawer__link:hover::after{transform:scaleX(1)}
.drawer__link em{
  font-style:normal;font-family:var(--mono);font-size:.7rem;font-weight:400;
  letter-spacing:.16em;color:var(--mist);vertical-align:super;margin-left:.5em;
}

[data-rv]{opacity:0;transform:translateY(30px);transition:opacity .95s var(--ease),transform .95s var(--ease);transition-delay:var(--rvd,0ms)}
[data-rv].is-in{opacity:1;transform:none}
[data-rv="mask"]{clip-path:inset(0 0 100% 0);transform:none;transition:clip-path 1.05s var(--ease),opacity .5s linear}
[data-rv="mask"].is-in{clip-path:inset(0 0 0 0)}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  [data-rv]{opacity:1;transform:none;clip-path:none}
  .stories{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .stories__track{animation:none!important;transform:none!important}
  .reveal-line>span{transform:none}
}

/* ============================================================
   SUBPAGE COMPONENTS
   ============================================================ */
.phero{position:relative;padding-top:clamp(122px,15vw,190px);padding-bottom:clamp(38px,5vw,66px);overflow-x:clip}
.phero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(62% 58% at 78% 8%,rgba(233,177,76,.20),transparent 66%),linear-gradient(170deg,#132420,#0F1D19 62%)}
.phero__in{display:grid;gap:22px}
@media(min-width:940px){.phero__in{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:end;gap:52px}}
.crumb{display:flex;gap:9px;align-items:center;font-family:var(--mono);font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;color:var(--mist);margin-bottom:18px}
.crumb a:hover{color:var(--amber)}

.cards{display:grid;gap:clamp(16px,2.2vw,26px)}
@media(min-width:700px){.cards--2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:900px){.cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.card{padding:clamp(24px,2.8vw,34px);border-radius:22px;box-shadow:inset 0 0 0 1px rgba(244,241,233,.12);display:flex;flex-direction:column;gap:13px}
.section--pale .card{box-shadow:inset 0 0 0 1px rgba(15,29,25,.16)}
.card__k{font-family:var(--mono);font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:var(--amber)}
.card__t{font-family:var(--display);font-weight:600;font-stretch:106%;font-size:clamp(1.15rem,1.9vw,1.42rem);letter-spacing:-.025em;line-height:1.15}
.card p{font-size:.94rem;color:#BDCCC6}
.section--pale .card p{color:var(--paper-mute)}

/* treatment detail rows */
.tgroup{border-top:1px solid rgba(15,29,25,.16);margin-top:clamp(30px,4vw,52px)}
.tgroup__head{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:baseline;justify-content:space-between;padding-block:clamp(20px,2.6vw,30px)}
.tgroup__n{font-family:var(--display);font-weight:700;font-stretch:108%;font-size:clamp(1.5rem,3vw,2.2rem);letter-spacing:-.03em}
.titem{display:grid;gap:6px 24px;padding-block:20px;border-top:1px solid rgba(15,29,25,.12);align-items:baseline}
@media(min-width:760px){.titem{grid-template-columns:minmax(0,1.5fr) minmax(0,2fr) auto}}
.titem__n{font-weight:600;font-size:1.04rem}
.titem__d{font-size:.9rem;color:var(--paper-mute);line-height:1.45}
.titem__p{font-family:var(--mono);font-size:.92rem;white-space:nowrap;color:var(--ink)}
.titem__p b{font-weight:500}

/* location cards */
.loc{display:grid;gap:0;border-radius:22px;overflow:hidden;background:var(--ink-2)}
@media(min-width:820px){.loc{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}}
.loc__vis{position:relative;min-height:0;aspect-ratio:16/10;background:var(--ink-3)}
@media(min-width:820px){.loc__vis{aspect-ratio:auto}}
.loc__vis svg{position:absolute;inset:0;width:100%;height:100%}
.loc__tag{position:absolute;top:16px;left:16px;z-index:2;font-family:var(--mono);font-size:.64rem;letter-spacing:.15em;text-transform:uppercase;padding:6px 12px;border-radius:100px;background:rgba(15,29,25,.72);backdrop-filter:blur(8px)}
.loc__body{padding:clamp(24px,3vw,38px);display:flex;flex-direction:column;gap:14px;justify-content:center}
.loc__facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 20px}
.loc__facts dt{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mist);margin-bottom:4px}
.loc__facts dd{font-size:.94rem}

/* blog */
.posts{display:grid;gap:clamp(18px,2.4vw,28px)}
@media(min-width:820px){.posts{grid-template-columns:repeat(3,minmax(0,1fr))}}
.post{display:flex;flex-direction:column;border-radius:22px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(15,29,25,.16);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.post:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px rgba(15,29,25,.3)}
.post__vis{position:relative;aspect-ratio:16/9;background:var(--ink-3)}
.post__vis svg{position:absolute;inset:0;width:100%;height:100%}
.post__body{padding:clamp(20px,2.4vw,28px);display:flex;flex-direction:column;gap:11px;flex:1}
.post__meta{display:flex;flex-wrap:wrap;gap:8px 14px;font-family:var(--mono);font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:var(--paper-mute)}
.post__t{font-family:var(--display);font-weight:600;font-stretch:106%;font-size:1.16rem;letter-spacing:-.025em;line-height:1.2}
.post__x{font-size:.92rem;color:var(--paper-mute);line-height:1.5}
.post__more{margin-top:auto;padding-top:12px;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--clay)}

/* values */
.vals{display:grid;gap:1px;background:rgba(244,241,233,.14);border:1px solid rgba(244,241,233,.14);border-radius:22px;overflow:hidden}
@media(min-width:640px){.vals{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.vals{grid-template-columns:repeat(3,minmax(0,1fr))}}
.val{background:var(--ink);padding:clamp(24px,2.8vw,34px);display:flex;flex-direction:column;gap:11px}
.val__ic{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:rgba(233,177,76,.14);color:var(--amber)}
.val__t{font-family:var(--display);font-weight:600;font-stretch:106%;font-size:1.1rem;letter-spacing:-.02em}
.val p{font-size:.92rem;color:#BDCCC6}

/* contact */
.cform{display:grid;gap:clamp(26px,3.4vw,52px)}
@media(min-width:1000px){.cform{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}
.cpanel{padding:clamp(26px,3.2vw,44px);border-radius:26px;background:var(--ink);color:var(--bone)}
.cways{display:grid;gap:16px}
.cway{display:flex;gap:14px;align-items:flex-start;padding-bottom:16px;border-bottom:1px solid rgba(15,29,25,.16)}
.cway:last-child{border-bottom:0}
.cway__ic{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--ink);color:var(--amber)}
.cway__t{font-weight:600;font-size:.98rem;margin-bottom:3px}
.cway__d{font-size:.89rem;color:var(--paper-mute);line-height:1.45}

/* ============================================================
   SAME-DAY IMPLANTS
   ============================================================ */
.sameday{background:var(--ink-2);position:relative;overflow-x:clip}
.sameday__in{display:grid;gap:clamp(28px,4vw,64px)}
@media(min-width:1000px){.sameday__in{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center}}
.sameday__badge{display:inline-flex;align-items:center;gap:10px;padding:8px 16px;border-radius:100px;background:rgba(233,177,76,.14);color:var(--amber);font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:20px}
.sameday__badge i{width:7px;height:7px;border-radius:50%;background:currentColor;animation:sd-pulse 2.4s var(--ease-io) infinite}
@keyframes sd-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}

/* two-phase timeline: day 0 and month 3 */
.sdline{display:grid;gap:0;margin-top:clamp(24px,3vw,36px)}
.sdstep{position:relative;padding:0 0 26px 34px}
.sdstep:last-child{padding-bottom:0}
.sdstep::before{content:"";position:absolute;left:8px;top:20px;bottom:-4px;width:1px;background:rgba(244,241,233,.2)}
.sdstep:last-child::before{display:none}
.sdstep__dot{position:absolute;left:0;top:5px;width:17px;height:17px;border-radius:50%;display:grid;place-items:center;background:var(--amber);color:var(--ink)}
.sdstep__dot svg{width:9px;height:9px}
.sdstep__k{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--amber);margin-bottom:6px}
.sdstep__t{font-family:var(--display);font-weight:600;font-stretch:106%;font-size:clamp(1.08rem,1.7vw,1.28rem);letter-spacing:-.022em;margin-bottom:7px}
.sdstep p{font-size:.94rem;color:#BDCCC6;max-width:52ch}

/* comparison: conventional vs same-day */
.sdvs{border-radius:24px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(244,241,233,.12)}
.sdvs__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1px;background:rgba(244,241,233,.12)}
.sdvs__c{background:var(--ink-2);padding:clamp(18px,2.2vw,26px)}
.sdvs__c--hi{background:rgba(233,177,76,.07)}
.sdvs__h{font-family:var(--mono);font-size:.63rem;letter-spacing:.15em;text-transform:uppercase;color:var(--mist);margin-bottom:9px}
.sdvs__c--hi .sdvs__h{color:var(--amber)}
.sdvs__v{font-family:var(--display);font-weight:600;font-stretch:106%;font-size:clamp(1.02rem,1.6vw,1.2rem);letter-spacing:-.02em;line-height:1.2}
.sdvs__n{font-size:.86rem;color:#9DB0A9;margin-top:6px;line-height:1.4}
.sdnote{margin-top:20px;font-size:.84rem;color:var(--mist);max-width:66ch;line-height:1.5}


/* Amber at 1.6:1 on paper is unreadable at small sizes. Any amber text that
   lands on a light surface uses the darkened variant instead. */
.section--pale .card__k,
.section--pale .post__more,
.section--pale .mega__all,
.book .card__k,
.ccard .post__more,
.section--pale .crumb a:hover,
.section--pale .faq__q:hover,
.section--pale .treat__from b{color:var(--amber-ink)}
.section--pale .titem--link:hover .titem__n{color:var(--amber-ink)}

/* ============================================================
   MEGA MENU — plain text, no thumbnails
   ============================================================ */
.nav__link--has{display:flex;align-items:center;gap:7px;font:inherit;font-size:.9rem;color:#C0CFC9}
.nav__link--has svg{transition:transform .35s var(--ease);opacity:.7}
.nav__link--has[aria-expanded="true"] svg{transform:rotate(180deg)}
.mega{
  position:absolute;left:0;right:0;top:100%;z-index:70;
  background:var(--ink-2);border-top:1px solid rgba(244,241,233,.12);
  border-bottom:1px solid rgba(244,241,233,.12);
  clip-path:inset(0 0 100% 0);transition:clip-path .5s var(--ease);
  visibility:hidden;
}
.mega[data-open="true"]{clip-path:inset(0 0 0 0);visibility:visible}
.mega__in{display:grid;gap:clamp(20px,2.6vw,40px);padding-block:clamp(26px,3vw,40px)}
@media(min-width:1060px){.mega__in{grid-template-columns:repeat(5,minmax(0,1fr))}}
.mega__col{display:flex;flex-direction:column;gap:3px;min-width:0}
.mega__col--cta{gap:12px}
.mega__h{font-family:var(--mono);font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mist);margin-bottom:10px}
.mega__l{
  display:block;padding:6px 0;font-size:.9rem;color:#CBD8D2;line-height:1.3;
  position:relative;transition:color .3s var(--ease),transform .35s var(--ease);
}
.mega__l:hover{color:var(--amber);transform:translateX(4px)}
.mega__p{font-size:.86rem;color:#9DB0A9;line-height:1.45}
.mega__all{font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--amber)}
@media(max-width:1059px){.mega{display:none}}

/* drawer sub-lists */
.drawer__d{overflow:hidden}
.drawer__d summary{list-style:none;cursor:pointer}
.drawer__d summary::-webkit-details-marker{display:none}
.drawer__subs{display:flex;flex-direction:column;gap:2px;padding:8px 0 16px 2px}
.drawer__sub{font-size:.95rem;color:#BDCCC6;padding:5px 0}
.drawer__sub:hover{color:var(--amber)}
.drawer__sub--all{color:var(--amber);font-family:var(--mono);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;margin-top:8px}
.drawer{overflow-y:auto}

/* ============================================================
   ARTICLE / DETAIL PAGE
   ============================================================ */
.art{display:grid;gap:clamp(28px,3.6vw,58px)}
@media(min-width:960px){.art{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);align-items:start}}
.art__body{max-width:70ch;min-width:0}
.art__lead{font-size:clamp(1.06rem,1.5vw,1.22rem);line-height:1.55;color:#CBD8D2}
.art__h{font-family:var(--display);font-weight:600;font-stretch:106%;font-size:clamp(1.24rem,2vw,1.6rem);letter-spacing:-.025em;margin:clamp(28px,3.4vw,44px) 0 14px}
.art__body p{color:#BDCCC6;line-height:1.62;margin-bottom:14px}

.proc{display:grid;gap:0;counter-reset:s}
.proc__s{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;padding:18px 0;border-top:1px solid rgba(244,241,233,.12)}
.proc__s:last-child{border-bottom:1px solid rgba(244,241,233,.12)}
.proc__n{font-family:var(--mono);font-size:.72rem;letter-spacing:.13em;color:var(--amber);padding-top:3px}
.proc__t{font-family:var(--display);font-weight:600;font-stretch:104%;font-size:1.04rem;letter-spacing:-.02em;margin-bottom:6px}
.proc p{margin-bottom:0}

.art__side{position:static}
@media(min-width:960px){.art__side{position:sticky;top:calc(var(--navh) + 34px)}}
.facts{border-radius:20px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(244,241,233,.14)}
.facts__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:14px;padding:13px 18px;border-bottom:1px solid rgba(244,241,233,.1);align-items:baseline}
.facts__row:last-child{border-bottom:0}
.facts__row span{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mist)}
.facts__row b{font-weight:500;font-size:.94rem;line-height:1.35}
.facts__note{font-size:.79rem;color:var(--mist);line-height:1.5;margin-top:14px}
.rel{margin-top:26px;padding-top:20px;border-top:1px solid rgba(244,241,233,.14)}
.rel__h{font-family:var(--mono);font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mist);margin-bottom:10px}
.rel__l{display:flex;justify-content:space-between;gap:14px;padding:8px 0;font-size:.92rem;color:#CBD8D2;border-bottom:1px solid rgba(244,241,233,.08);transition:color .3s var(--ease)}
.rel__l:last-child{border-bottom:0}
.rel__l span{font-family:var(--mono);font-size:.78rem;color:var(--mist);white-space:nowrap}
.rel__l:hover{color:var(--amber)}

/* linked treatment rows */
.titem--link{transition:color .35s var(--ease)}
.titem--link:hover{color:var(--clay)}
.titem--link:hover .titem__n{text-decoration:underline;text-underline-offset:3px}
.ccard{text-decoration:none}
.ccard:hover .card__t{color:var(--clay)}

/* ============================================================
   ARTICLE EXTRAS — TOC, lists, tables, callouts
   ============================================================ */
.art__date{font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--mist);margin-top:20px}
.toc{min-width:0;padding:20px 22px;border-radius:18px;box-shadow:inset 0 0 0 1px rgba(244,241,233,.14);margin-bottom:clamp(24px,3vw,38px);display:flex;flex-direction:column;gap:3px}
.toc__h{font-family:var(--mono);font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mist);margin-bottom:8px}
.toc a{min-width:0;overflow-wrap:anywhere;font-size:.92rem;color:#CBD8D2;padding:4px 0;transition:color .3s var(--ease),transform .3s var(--ease)}
.toc a:hover{color:var(--amber);transform:translateX(3px)}

.art__body h2[id]{scroll-margin-top:calc(var(--navh) + 24px)}
.art__ul{display:grid;gap:9px;margin:4px 0 16px;padding-left:2px}
.art__ul li{position:relative;padding-left:20px;color:#BDCCC6;line-height:1.6}
.art__ul li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--amber)}

.art__note{margin:18px 0;padding:18px 20px;border-radius:16px;background:rgba(233,177,76,.08);box-shadow:inset 0 0 0 1px rgba(233,177,76,.24)}
.art__note p{margin:0;color:#D6E0DB}
.art__note--legal{background:rgba(244,241,233,.04);box-shadow:inset 0 0 0 1px rgba(244,241,233,.12);margin-top:clamp(28px,3.4vw,44px)}
.art__note--legal p{color:var(--mist);font-size:.86rem}

.art__tw{overflow-x:auto;margin:6px 0 18px;border-radius:16px;box-shadow:inset 0 0 0 1px rgba(244,241,233,.14)}
.art__t{width:100%;border-collapse:collapse;min-width:440px}
.art__t th,.art__t td{text-align:left;padding:12px 16px;border-bottom:1px solid rgba(244,241,233,.1);font-size:.9rem;vertical-align:top}
.art__t th{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mist);background:rgba(244,241,233,.04)}
.art__t td{color:#BDCCC6}
.art__t td:first-child{color:var(--bone);font-weight:500}
.art__t tr:last-child td{border-bottom:0}

.art__body .faq{border-top:1px solid rgba(244,241,233,.16)}
.art__body a{color:var(--amber);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.art__body a:hover{color:var(--bone)}
.toc a,.art__body .faq a{text-decoration:none}

/* ============================================================
   TAP-FIRST FORM + LINKED CLINIC SLIDES
   ============================================================ */
/* Wrapping options so every choice is a full tap target, min 44px tall. */
.opts--grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:9px}
.opts--grid .opt span{
  display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:46px;padding:11px 14px;line-height:1.2;
}
.opt input:checked+span{transform:translateY(-1px)}
.opt span{transition:background .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease)}

/* consent row: the whole row is tappable, not just the box */
.opt--check{display:flex;align-items:flex-start;gap:11px;margin-top:20px;cursor:pointer;position:static}
.opt--check input{
  position:static;opacity:1;width:20px;height:20px;flex:none;margin-top:1px;
  accent-color:var(--amber);cursor:pointer;
}
.opt--check span{
  display:inline;padding:0;box-shadow:none;min-height:0;
  font-size:.88rem;line-height:1.45;color:#BDCCC6;text-align:left;
}
.opt--check input:checked+span{transform:none;background:none;color:#BDCCC6;font-weight:400}

.inp{min-height:52px}

/* carousel slides are links now */
/* No color:inherit here — it would override .clinic{color:var(--bone)}
   and the card would inherit the pale section's dark ink. */
.clinic--link{text-decoration:none;color:var(--bone);transition:box-shadow .45s var(--ease)}
.clinic--link:hover{box-shadow:inset 0 0 0 1px rgba(233,177,76,.45)}
.clinic--link:hover .clinic__name{color:var(--amber)}
.clinic__name{transition:color .35s var(--ease)}
.clinic__more{
  margin-top:4px;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--amber);
  transition:transform .35s var(--ease);
}
.clinic--link:hover .clinic__more{transform:translateX(4px)}

/* ============================================================
   LEGAL PAGES
   ============================================================ */
/* Unfilled placeholders must be impossible to miss before publication. */
.ph{
  background:rgba(196,103,74,.16);color:var(--clay);
  padding:1px 7px;border-radius:5px;
  font-family:var(--mono);font-size:.78em;letter-spacing:.06em;
  box-shadow:inset 0 0 0 1px rgba(196,103,74,.45);
}
.section--pale .ph,.book .ph{background:rgba(196,103,74,.14);color:#8E3F27;box-shadow:inset 0 0 0 1px rgba(196,103,74,.4)}

/* footer legal row */
.foot__legal{align-items:center}
.foot__links{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center}
.foot__links a{color:#6E827A;transition:color .3s var(--ease)}
.foot__links a:hover{color:var(--amber)}
.foot__links span{opacity:.4}

/* ============================================================
   SMILE GALLERY
   ============================================================ */
.gal{background:var(--ink-2);overflow-x:clip}
.gal__grid{display:grid;gap:clamp(28px,4vw,64px);align-items:center}
@media(min-width:1000px){.gal__grid{grid-template-columns:minmax(0,.85fr) minmax(0,1fr)}}

.gal__nav{display:flex;align-items:center;gap:12px;margin-top:clamp(24px,3vw,36px)}
.gal__count{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;color:var(--mist);margin-left:6px}
.gal__note{margin-top:20px;font-size:.79rem;line-height:1.5;color:var(--mist);max-width:46ch}

.gal__side{min-width:0}
.gal__stage{min-width:0}
.gal__view{overflow:hidden;border-radius:22px;cursor:grab;background:var(--ink-3)}
.gal__view:active{cursor:grabbing}
.gal__view.is-dragging{cursor:grabbing;user-select:none;-webkit-user-select:none}
.gal__track{display:flex;transition:transform .8s var(--ease);will-change:transform}
.gal__slide{flex:0 0 100%;min-width:0;display:flex;flex-direction:column}
/* ---- before/after wipe ----
   The two photos are stacked and the top one is clipped by inset(). A real
   <input type=range> sits on top invisibly, so the control is keyboard
   accessible and announced without reimplementing any of that in JS. */
.ba{position:relative;aspect-ratio:var(--ratio,1065/432);overflow:hidden;background:var(--ink-3);touch-action:pan-y;isolation:isolate}
.ba__layer{position:absolute;inset:0}
.ba__layer img{width:100%;height:100%;object-fit:cover;display:block;user-select:none;-webkit-user-drag:none}
.ba__layer--after{z-index:1}
.ba__layer--before{z-index:2;clip-path:inset(0 calc(100% - var(--x,50%)) 0 0)}

.ba__handle{
  position:absolute;top:0;bottom:0;left:var(--x,50%);width:2px;
  background:var(--bone);transform:translateX(-1px);
  box-shadow:0 0 0 1px rgba(15,29,25,.25),0 0 22px rgba(15,29,25,.45);
  pointer-events:none;z-index:3;
}
.ba__grip{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:var(--bone);color:var(--ink);
  box-shadow:0 6px 20px rgba(15,29,25,.4);
  transition:transform .35s var(--ease),background .3s var(--ease);
}
.ba:hover .ba__grip{transform:translate(-50%,-50%) scale(1.06)}
.ba.is-dragging .ba__grip{transform:translate(-50%,-50%) scale(.94);background:var(--amber)}

.ba__tag{
  position:absolute;top:14px;z-index:2;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  padding:6px 12px;border-radius:100px;background:rgba(15,29,25,.68);color:var(--bone);
  backdrop-filter:blur(6px);pointer-events:none;
  transition:opacity .35s var(--ease);
}
.ba__tag--b{left:14px}
.ba__tag--a{right:14px}

/* the range input is the actual control; it is invisible but focusable */
.ba__range{
  position:absolute;inset:0;width:100%;height:100%;margin:0;z-index:4;
  -webkit-appearance:none;appearance:none;background:transparent;cursor:ew-resize;
}
.ba__range::-webkit-slider-thumb{-webkit-appearance:none;width:46px;height:46px;border-radius:50%;background:transparent;cursor:ew-resize}
.ba__range::-moz-range-thumb{width:46px;height:46px;border:0;border-radius:50%;background:transparent;cursor:ew-resize}
.ba__range:focus-visible{outline:none}
.ba__range:focus-visible~.ba__handle .ba__grip{outline:3px solid var(--amber);outline-offset:3px}

@media(prefers-reduced-motion:reduce){.ba__grip{transition:none}}

.gal__cap{
  display:flex;flex-direction:column;gap:7px;
  padding:clamp(16px,2vw,22px) clamp(18px,2.2vw,24px);
  background:rgba(15,29,25,.55);
}
.gal__t{font-family:var(--display);font-weight:600;font-stretch:106%;font-size:clamp(1.05rem,1.7vw,1.24rem);letter-spacing:-.022em}
.gal__b{font-size:.9rem;color:#BDCCC6;line-height:1.5;max-width:56ch}
.gal__l{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--amber);margin-top:3px;width:max-content;
  transition:transform .35s var(--ease);
}
.gal__l:hover{transform:translateX(4px)}

.gal__dots{display:flex;gap:9px;margin-top:18px}
.gal__dot{flex:1;height:3px;border-radius:100px;background:rgba(244,241,233,.2);position:relative;overflow:hidden;padding:0;border:0;cursor:pointer}
.gal__dot i{position:absolute;inset:0;transform-origin:left;transform:scaleX(0);background:var(--amber);display:block;transition:transform .5s var(--ease)}
.gal__dot.is-on i{transform:scaleX(1)}


/* ============================================================
   CLINIC IMAGERY
   ============================================================ */
.cbanner{
  position:relative;border-radius:22px;overflow:hidden;
  aspect-ratio:16/10;margin-bottom:clamp(22px,3vw,34px);
  background:var(--ink-3);
}
.cbanner img{width:100%;height:100%;object-fit:cover;display:block}
.cbanner figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:26px 18px 12px;
  background:linear-gradient(180deg,transparent,rgba(15,29,25,.82));
  font-family:var(--mono);font-size:.62rem;letter-spacing:.13em;
  text-transform:uppercase;color:#BDCCC6;
}

/* thumbnail on the clinics index cards */
.ccard{padding:0;overflow:hidden}
.ccard__vis{aspect-ratio:16/10;overflow:hidden;background:var(--ink-3)}
.ccard__vis img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s var(--ease)}
.ccard:hover .ccard__vis img{transform:scale(1.04)}
.ccard__body{display:flex;flex-direction:column;gap:13px;padding:clamp(20px,2.4vw,28px);flex:1}

/* clinic card meta — country / city / treatment / typical cost */
.cmeta{margin:14px 0 0;display:grid;gap:0;border-top:1px solid rgba(244,241,233,.12)}
.cmeta__r{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:7px 0;border-bottom:1px solid rgba(244,241,233,.08)}
.cmeta__r dt{font-family:var(--mono,ui-monospace,monospace);font-size:.62rem;letter-spacing:.09em;
  text-transform:uppercase;color:#8FA49D;white-space:nowrap;flex:none}
.cmeta__r dd{margin:0;text-align:right;font-size:.84rem;line-height:1.35;color:#DCE6E2}
.cmeta__r--cost dd{color:var(--amber);font-weight:600}

/* article + treatment hero imagery */
.cbanner--wide{aspect-ratio:16/9}
.post__vis img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s var(--ease)}
.post:hover .post__vis img{transform:scale(1.04)}


/* ============================================================
   WHATSAPP WIDGET
   Floating launcher + small panel. Sits under the nav (80) and
   under the mobile drawer (79) so it never fights them.
   Number lives in one place: data-wa-number on the widget root.
   ============================================================ */
.wa{position:fixed;right:clamp(14px,2.2vw,26px);bottom:clamp(14px,2.2vw,26px);z-index:75}
@media(prefers-reduced-motion:no-preference){
  .wa{animation:waIn .5s var(--ease-io) .9s both}
}
@keyframes waIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.wa__btn{
  width:56px;height:56px;border-radius:50%;border:0;cursor:pointer;
  display:grid;place-items:center;margin-left:auto;
  background:#25D366;color:#0F1D19;
  box-shadow:0 10px 26px rgba(15,29,25,.28);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.wa__btn:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 14px 32px rgba(15,29,25,.34)}
.wa__btn:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.wa__btn svg{width:30px;height:30px;display:block}
.wa__btn .wa__x{display:none}
.wa[data-open="true"] .wa__btn .wa__x{display:block}
.wa[data-open="true"] .wa__btn .wa__logo{display:none}

.wa__dot{
  position:absolute;top:-2px;right:-2px;width:13px;height:13px;border-radius:50%;
  background:var(--amber);box-shadow:0 0 0 2.5px var(--paper);
}
.wa[data-open="true"] .wa__dot{display:none}

.wa__panel{
  position:absolute;right:0;bottom:70px;width:min(320px,calc(100vw - 32px));
  background:var(--ink-2);color:var(--bone);
  border-radius:18px;overflow:hidden;
  box-shadow:0 18px 46px rgba(15,29,25,.4);
  opacity:0;visibility:hidden;transform:translateY(10px) scale(.97);transform-origin:100% 100%;
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
}
.wa[data-open="true"] .wa__panel{opacity:1;visibility:visible;transform:none}
@media(prefers-reduced-motion:reduce){.wa__panel{transition:none}}

.wa__head{padding:16px 18px 14px;background:#128C7E;color:#fff;display:flex;gap:11px;align-items:center}
.wa__av{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.18);display:grid;place-items:center;flex:none}
.wa__av svg{width:21px;height:21px}
.wa__who{font-weight:600;font-size:.92rem;line-height:1.2}
.wa__stat{font-size:.7rem;opacity:.85;margin-top:2px;display:flex;align-items:center;gap:5px}
.wa__live{width:6px;height:6px;border-radius:50%;background:#8DF0A8;flex:none}

.wa__body{padding:18px}
.wa__bubble{
  background:var(--ink-3);border-radius:4px 14px 14px 14px;padding:12px 14px;
  font-size:.88rem;line-height:1.55;color:var(--bone);
}
.wa__note{margin:11px 0 0;font-size:.72rem;line-height:1.5;color:var(--mist)}
.wa__go{
  margin-top:14px;width:100%;display:flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 16px;border-radius:999px;background:#25D366;color:#0F1D19;
  font-weight:600;font-size:.9rem;text-decoration:none;
  transition:transform .3s var(--ease),filter .3s var(--ease);
}
.wa__go:hover{transform:translateY(-1px);filter:brightness(1.06)}
.wa__go svg{width:18px;height:18px}

/* submission failure notice — only shown if send.php could not deliver */
.formfail{margin:14px 0 0;padding:12px 14px;border-radius:12px;
  background:rgba(196,103,74,.14);box-shadow:inset 0 0 0 1px rgba(196,103,74,.4);
  color:#F0C9BC;font-size:.9rem;line-height:1.5}

/* registered address in the footer */
.foot__addr{display:block;margin-top:14px;font-style:normal;
  font-size:.82rem;line-height:1.6;color:var(--mist)}