@import url("fonts.css");

/* ============================================================
   Emerald Aesthetics
   Register: editorial luxury, clinical calm.
   60 bone / 30 emerald / 10 jade.
   ============================================================ */

:root{
  --bone:      #f6f3ec;
  --bone-2:    #eee8db;
  --bone-3:    #e4dccb;
  --emerald:   #0e3a31;
  --emerald-2: #08251f;
  --jade:      #4f8f79;   /* accent: large text, rules, UI only (3.4:1 on bone) */
  --jade-lt:   #8fc3ae;   /* accent on dark (6.3:1 on emerald) */
  --ink:       #17211e;
  --muted:     #5c6b65;   /* 5.1:1 on bone */
  --gold:      #9c7735;   /* 3.4:1 on the bone-2 review cards; #a8813f fell under 3:1 */

  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 40px; --s6: 64px; --s7: 96px; --s8: 144px;

  --r-sm: 3px; --r-md: 6px; --r-pill: 999px;

  --shell: min(1520px, 92vw);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bone);
  color:var(--ink);
  font-family:'Switzer',ui-sans-serif,sans-serif;
  font-size:clamp(16px,1.02vw,18px);
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
h1,h2,h3,h4{ margin:0; font-family:'Gambetta',Georgia,serif; font-weight:500; letter-spacing:-.015em; line-height:1.04; }
p{ margin:0; }
a{ color:inherit; }
em{ font-style:italic; }

::selection{ background:var(--emerald); color:var(--bone); }

:focus-visible{
  outline:2px solid var(--jade);
  outline-offset:3px;
  border-radius:var(--r-sm);
}

.shell{ width:var(--shell); margin-inline:auto; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* display type ---------------------------------------------- */
/* sized so the longest hero line ("That is the point.") clears the copy
   column at every width instead of wrapping to five lines */
.d1{ font-size:clamp(2.7rem,6.4vw,6.8rem); }
.d2{ font-size:clamp(2.2rem,4.4vw,4.4rem); }
.d3{ font-size:clamp(1.6rem,2.3vw,2.5rem); line-height:1.14; }
.lede{ font-size:clamp(1.05rem,1.25vw,1.35rem); line-height:1.55; color:var(--muted); max-width:56ch; }

/* ── reveal system ───────────────────────────────────────────
   `.rv` is the observed hook; JS adds `.in`. The visual treatment is
   opt-in per section so the page does not fade-up uniformly, which reads
   as slow. Variants cancel the base fade at higher specificity.
   Deliberately NOT disabled under prefers-reduced-motion, and there is a
   failsafe in site.js that reveals everything regardless. ───────────── */
.rv{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.rv.in{ opacity:1; transform:none; }
.rv.rv-head,.rv.rv-stag{ opacity:1; transform:none; transition:none; }

/* headings wipe up line by line, echoing the hero */
.rv-head h2 .ln{ display:block; overflow:hidden; padding-bottom:.1em; margin-bottom:-.1em; padding-right:.06em; margin-right:-.06em; }
.rv-head h2 .ln > *{ display:block; transform:translateY(115%); transition:transform .95s cubic-bezier(.19,1,.22,1); }
.rv-head.in h2 .ln > *{ transform:none; }
.rv-head h2 .ln:nth-child(2) > *{ transition-delay:.09s; }
.rv-head h2 .ln:nth-child(3) > *{ transition-delay:.18s; }
.rv-head .lede{ opacity:0; transform:translateY(16px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.rv-head.in .lede{ opacity:1; transform:none; transition-delay:.26s; }

/* children cascade; --d is set per child in site.js and capped */
.rv-stag > *{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .75s var(--ease); }
.rv-stag.in > *{ opacity:1; transform:none; }
.rv-stag.rv-x > *{ transform:translateX(34px); }
.rv-stag.rv-zoom > *{ transform:translateY(20px) scale(.975); }
.rv-stag.in.rv-x > *,.rv-stag.in.rv-zoom > *{ transform:none; }

.rv-pop{ opacity:0; transform:scale(.93); transition:opacity .7s var(--ease), transform 1s cubic-bezier(.19,1,.22,1); }
.rv-pop.in{ opacity:1; transform:none; }

/* ============================ NAV ============================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  padding:18px 0;
  transition:background .35s var(--ease), padding .35s var(--ease), box-shadow .35s var(--ease);
}
.nav.stuck{ background:rgba(246,243,236,.94); backdrop-filter:blur(10px); padding:10px 0; box-shadow:0 1px 0 rgba(14,58,49,.10); }
.nav__in{ display:flex; align-items:center; gap:var(--s4); }
.nav__logo img{ height:56px; width:auto; transition:height .35s var(--ease); }
.nav.stuck .nav__logo img{ height:44px; }
.nav__links{ display:flex; gap:28px; margin-left:auto; align-items:center; }
/* Hover rolls the label up and its twin in from below, inside a mask.
   Replaces a left-to-right underline sweep, which is a component-kit
   default. Same masking idea as the hero lines and the section headings,
   so the nav belongs to the same system rather than borrowing an effect.
   The twin is a real aria-hidden element, not generated content, so the
   link is not announced twice. */
.nav__links a{
  position:relative; display:inline-block; overflow:hidden;
  line-height:1.5; padding:5px 0;
  text-decoration:none; font-size:.9rem; font-weight:500; letter-spacing:.01em;
  color:var(--ink);
}
.nav__links a > span{
  display:block;
  transition:transform .44s cubic-bezier(.19,1,.22,1);
}
.nav__links a .dup{
  position:absolute; left:0; top:5px; width:100%;
  transform:translateY(105%); color:var(--jade);
}
.nav__links a:hover > span,
.nav__links a:focus-visible > span{ transform:translateY(-105%); }
.nav__links a:hover .dup,
.nav__links a:focus-visible .dup{ transform:translateY(0); }
.nav__tel{ font-size:.9rem; font-weight:600; text-decoration:none; white-space:nowrap; }
.nav__tel:hover{ color:var(--jade); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:'Switzer',sans-serif; font-size:.92rem; font-weight:600; letter-spacing:.01em;
  padding:14px 26px; min-height:48px; border-radius:var(--r-pill);
  text-decoration:none; border:1px solid transparent; cursor:pointer;
  transition:background .14s var(--ease), color .14s var(--ease), border-color .14s var(--ease), transform .14s var(--ease);
}
.btn--solid{ background:var(--emerald); color:var(--bone); }
.btn--solid:hover{ background:var(--jade); transform:translateY(-1px); }
.btn--solid:active{ transform:translateY(0); }
.btn--ghost{ border-color:rgba(14,58,49,.28); color:var(--emerald); background:transparent; }
.btn--ghost:hover{ border-color:var(--emerald); background:var(--emerald); color:var(--bone); }
.btn--light{ background:var(--bone); color:var(--emerald); }
.btn--light:hover{ background:var(--jade-lt); }
.btn--lg{ padding:18px 34px; font-size:1rem; min-height:58px; }

.burger{ display:none; margin-left:auto; width:48px; height:48px; border:0; background:none; cursor:pointer; padding:12px; }
.burger span{ display:block; height:1.5px; background:var(--ink); margin:5px 0; transition:transform .3s var(--ease), opacity .3s var(--ease); }
.burger.open span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

.drawer{
  position:fixed; inset:0; z-index:55; background:var(--emerald); color:var(--bone);
  display:flex; flex-direction:column; justify-content:center; gap:var(--s2);
  padding:0 7vw; opacity:0; pointer-events:none; transition:opacity .3s var(--ease);
}
.drawer.open{ opacity:1; pointer-events:auto; }
.drawer a{ font-family:'Gambetta',serif; font-size:clamp(1.9rem,7vw,3rem); text-decoration:none; }
.drawer a:hover{ color:var(--jade-lt); }
.drawer .btn{ align-self:flex-start; margin-top:var(--s3); }

/* ============================ HERO ============================ */
.hero{ position:relative; padding:clamp(120px,15vh,190px) 0 0; overflow:hidden; }
.hero__grid{ display:grid; grid-template-columns:1.18fr .82fr; gap:clamp(24px,4vw,72px); align-items:end; }
.hero__copy{ padding-bottom:clamp(40px,6vw,96px); }
.hero h1{ margin-bottom:var(--s3); }
.hero h1 em{ color:var(--jade); display:block; }
.hero .lede{ margin-bottom:var(--s5); max-width:50ch; }
.hero__cta{ display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; }
.hero__or{ font-size:.95rem; color:var(--muted); }
.hero__or a{ color:var(--emerald); font-weight:600; text-decoration:none; border-bottom:1px solid rgba(14,58,49,.3); }
.hero__or a:hover{ color:var(--jade); border-color:var(--jade); }

/* owners photo sits inside an arch of emerald */
.hero__art{ position:relative; align-self:end; }
.hero__arch{
  position:relative; background:var(--emerald);
  border-radius:min(300px,26vw) min(300px,26vw) 0 0;
  aspect-ratio:1/1.06; display:flex; align-items:flex-end; justify-content:center;
  overflow:hidden;
}
/* the source cutout is chopped mid-forearm at 83.8% of its height, so the
   figures are seated flush to the arch floor and the last 16.2% of empty
   alpha is pushed below it. A short vignette softens that hard crop line. */
.hero__arch::after{
  content:''; position:absolute; inset:auto 0 0 0; height:17%;
  background:linear-gradient(to top,rgba(8,37,31,.92),rgba(8,37,31,0));
}
.hero__arch img{
  position:absolute; left:50%; bottom:-21.1%; transform:translateX(-50%);
  width:138%; height:auto; max-width:none; filter:saturate(1.03);
}

.stars{ display:inline-flex; gap:2px; color:var(--gold); font-size:.95rem; letter-spacing:1px; }

/* ---- hero entrance -------------------------------------------------
   The one big choreographed moment on the page: three headline lines
   wipe up in sequence, then the lede and CTA, with the portrait rising
   and settling out of a slight overscale. Transform/opacity only, and
   deliberately not gated on prefers-reduced-motion. site.js adds .in on
   load and has a failsafe so nothing can stay stuck at opacity 0. */
.hero h1 .ln{
  display:block; overflow:hidden;
  padding-bottom:.10em; margin-bottom:-.10em;   /* room for descenders */
  padding-right:.06em; margin-right:-.06em;     /* room for italic overhang */
}
.hero h1 .ln > *{
  display:block;
  transform:translateY(115%);
  transition:transform 1.05s cubic-bezier(.19,1,.22,1);
}
.hero.in h1 .ln > *{ transform:none; }
.hero h1 .ln:nth-child(1) > *{ transition-delay:.10s; }
.hero h1 .ln:nth-child(2) > *{ transition-delay:.20s; }
.hero h1 .ln:nth-child(3) > *{ transition-delay:.30s; }

/* scoped to .hero: .hero__cta is reused in the booking success panel and
   an unscoped rule left it stuck at opacity 0 there */
.hero .lede,.hero .hero__cta{
  opacity:0; transform:translateY(20px);
  transition:opacity .85s var(--ease), transform .85s var(--ease);
}
.hero.in .lede{ opacity:1; transform:none; transition-delay:.46s; }
.hero.in .hero__cta{ opacity:1; transform:none; transition-delay:.58s; }

.hero__art{ opacity:0; transform:translateY(34px); transition:opacity 1.1s var(--ease), transform 1.2s var(--ease); }
.hero.in .hero__art{ opacity:1; transform:none; transition-delay:.16s; }

/* parallax lives on the pan wrapper so it never fights the reveal scale */
.hero__pan{ position:absolute; inset:0; will-change:transform; }
.hero__arch img{ transform:translateX(-50%) scale(1.09); transition:transform 1.9s cubic-bezier(.19,1,.22,1); }
.hero.in .hero__arch img{ transform:translateX(-50%) scale(1); transition-delay:.16s; }

.nav{ opacity:0; transform:translateY(-10px); transition:opacity .7s var(--ease), transform .7s var(--ease), background .35s var(--ease), padding .35s var(--ease), box-shadow .35s var(--ease); }
.nav.ready{ opacity:1; transform:none; }

/* ================== GOOGLE REVIEW MARQUEE ==================
   Real reviews pulled from the Google Business Profile: avatar, name,
   date, rating, excerpt. Replaces a generic brand-name ticker. */
.grev{ background:var(--bone-2); padding:clamp(34px,4vw,58px) 0 clamp(38px,4.4vw,64px); overflow:hidden; }
.grev__head{
  display:flex; align-items:center; gap:clamp(12px,1.5vw,22px); flex-wrap:wrap;
  margin-bottom:clamp(22px,2.4vw,34px);
}
.glogo{ display:block; width:26px; height:26px; flex:none; }
.glogo--sm{ width:19px; height:19px; }
.glogo--lg{ width:34px; height:34px; }
.grev__score{ display:flex; align-items:center; gap:9px; }
.grev__score b{ font-family:'Gambetta',serif; font-size:1.65rem; font-weight:600; color:var(--emerald); }
.grev__meta{ font-size:.95rem; color:var(--muted); }
.grev__all{
  margin-left:auto; font-size:.92rem; font-weight:600; color:var(--emerald);
  text-decoration:none; border-bottom:1px solid rgba(14,58,49,.3); padding-bottom:2px;
  transition:color .14s var(--ease), border-color .14s var(--ease);
}
.grev__all:hover{ color:var(--jade); border-color:var(--jade); }

.grev__track{ display:flex; width:max-content; animation:slide 92s linear infinite; }
.grev__track:hover,.grev__track:focus-within{ animation-play-state:paused; }
.grev__grp{ display:flex; flex-shrink:0; gap:clamp(12px,1.2vw,20px); padding-right:clamp(12px,1.2vw,20px); }
@keyframes slide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

.grc{
  width:clamp(285px,23vw,352px); flex:none; background:#fff; border-radius:var(--r-md);
  padding:clamp(20px,1.7vw,26px); text-decoration:none; color:var(--ink);
  display:flex; flex-direction:column; gap:11px;
  box-shadow:inset 0 0 0 1px rgba(14,58,49,.07);
  transition:transform .22s var(--ease), box-shadow .22s var(--ease);
}
.grc:hover{ transform:translateY(-3px); box-shadow:inset 0 0 0 1px rgba(14,58,49,.16); }
.grc__top{ display:flex; align-items:center; gap:11px; }
.grc__av{ width:42px; height:42px; border-radius:50%; object-fit:cover; flex:none; background:var(--bone-3); }
.grc__id{ min-width:0; }
.grc__n{ font-weight:600; font-size:.95rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.grc__d{ font-size:.78rem; color:var(--muted); }
.grc__top .glogo{ margin-left:auto; }
.grc__t{
  font-size:.93rem; line-height:1.55; color:#33413c;
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
}

/* ==================== STOREFRONT BAND ==================== */
.store{ position:relative; background:var(--emerald); color:var(--bone); overflow:hidden; }
.store__grid{ display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:clamp(30px,4.5vw,80px); }
.store__copy{ padding:clamp(70px,8vw,120px) 0; }
.store__copy h2{ margin-bottom:var(--s3); }
.store__copy h2 em{ color:var(--jade-lt); }
.store__copy p{ color:rgba(246,243,236,.74); font-size:clamp(1.02rem,1.2vw,1.2rem); line-height:1.6; max-width:46ch; margin-bottom:var(--s5); }
.store__cta{ display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; }
.store__ph{ position:relative; align-self:stretch; min-height:340px; }
.store__ph img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* ======================== SECTIONS ======================== */
.sec{ padding:clamp(80px,10vw,150px) 0; }
.sec__head{ max-width:60ch; margin-bottom:clamp(40px,5vw,76px); }
.sec__head h2{ margin-bottom:var(--s3); }
.sec__head h2 em{ color:var(--jade); }

/* ------- treatments: asymmetric mosaic, mixed sizes -------- */
/* Row-track mosaic rather than per-tile aspect ratios: tiles vary in size
   deliberately but every band still resolves flush, no ragged edges. */
.mosaic{
  display:grid; grid-template-columns:repeat(6,1fr);
  grid-auto-rows:clamp(108px,12.4vw,176px); gap:clamp(12px,1.1vw,20px);
}
.tile{
  position:relative; overflow:hidden; border-radius:var(--r-md);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(22px,2.2vw,38px); text-decoration:none; color:var(--bone);
  min-height:200px; isolation:isolate;
}
.tile img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2;
  transition:transform 1.1s var(--ease);
}
.tile::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to top,rgba(8,37,31,.88) 0%,rgba(8,37,31,.42) 52%,rgba(8,37,31,.12) 100%);
}
.tile:hover img{ transform:scale(1.05); }
.tile--solid{ background:var(--emerald); }
.tile--solid::before{ background:none; }
.tile--solid:hover{ background:var(--emerald-2); }
/* deeper than --jade so the small print on this tile clears 4.5:1 on bone
   (--jade itself is only 3.4:1, fine for display type but not body copy) */
/* Product tile: the bottle is a cut-out on pale stock, so instead of a dark
   scrim it sits to the right at true proportions with the copy to its left. */
/* tile background is sampled from the product shot's own backdrop (#eeefea)
   so the image's rectangle is invisible and it reads as a cut-out */
.tile--light{ color:var(--ink); background:#eeefea; }
/* width:auto collapses to 0 on an abs-positioned replaced element with
   left:auto, so the intrinsic ratio is pinned explicitly */
.tile--light img{
  object-fit:contain; object-position:right bottom;
  left:auto; right:clamp(16px,2.2vw,40px); top:auto; bottom:-9%;
  height:118%; width:auto; aspect-ratio:300/780;
}
.tile--light:hover img{ transform:scale(1.04); }
.tile--light::before{ background:none; }
/* .tile p is declared later at equal specificity, so this needs the extra
   class to actually cap the copy short of the bottle */
.tile.tile--light h3,.tile.tile--light p{ max-width:60%; }
.tile--light p{ color:var(--muted); }
.tile--light .tile__list{ color:var(--emerald); }
.tile--light .tile__go{ border-color:rgba(14,58,49,.32); color:var(--emerald); }
.tile--light:hover .tile__go{ background:var(--emerald); color:var(--bone); border-color:var(--emerald); }

.tile--jade{ background:#3f7563; }
.tile--jade::before{ background:none; }
.tile--jade:hover{ background:#376655; }

.tile h3{ font-size:clamp(1.5rem,2.2vw,2.35rem); margin-bottom:10px; }
.tile--hero h3{ font-size:clamp(2rem,3.4vw,3.4rem); }
.tile p{ font-size:.95rem; color:rgba(246,243,236,.82); max-width:44ch; }
.tile__list{ margin-top:14px; font-size:.85rem; color:var(--jade-lt); letter-spacing:.01em; }
.tile--jade .tile__list{ color:rgba(246,243,236,.9); }
.tile__go{
  position:absolute; top:clamp(20px,2vw,32px); right:clamp(20px,2vw,32px);
  width:38px; height:38px; border-radius:50%; border:1px solid rgba(246,243,236,.4);
  display:grid; place-items:center; font-size:1rem;
  transition:background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.tile:hover .tile__go{ background:var(--bone); color:var(--emerald); border-color:var(--bone); }

.t-inject { grid-column:span 4; grid-row:span 3; }
.t-resurf { grid-column:span 2; grid-row:span 3; }
.t-body   { grid-column:span 2; grid-row:span 2; }
.t-rejuv  { grid-column:span 2; grid-row:span 2; }
.t-weight { grid-column:span 2; grid-row:span 2; }
.t-skin   { grid-column:span 3; grid-row:span 2; }
.t-lash   { grid-column:span 3; grid-row:span 2; }

/* --------------- providers: portrait rail ------------------ */
.rail{ display:flex; gap:clamp(14px,1.4vw,26px); overflow-x:auto; padding-bottom:var(--s3); scroll-snap-type:x mandatory; scrollbar-width:thin; }
.rail::-webkit-scrollbar{ height:4px; }
.rail::-webkit-scrollbar-thumb{ background:rgba(14,58,49,.28); border-radius:2px; }
.person{ flex:0 0 clamp(215px,17vw,278px); scroll-snap-align:start; }
/* Headshots are a mix of transparent PNG cutouts and JPEGs shot on white,
   so the tile is white to match both. (mix-blend-mode:multiply blanked the
   images entirely here, the blend group resolved against an empty backdrop.) */
.person__ph{
  background:#fff; border-radius:var(--r-md); overflow:hidden;
  aspect-ratio:4/5; margin-bottom:var(--s2);
  box-shadow:inset 0 0 0 1px rgba(14,58,49,.08);
}
.person__ph img{
  width:100%; height:100%; object-fit:cover; object-position:top center;
  transition:transform .5s var(--ease);
}
.person:hover .person__ph img{ transform:scale(1.04); }
.person h3{ font-size:1.25rem; margin-bottom:2px; }
.person span{ font-size:.83rem; color:var(--muted); letter-spacing:.02em; }
.rail__hint{ font-size:.85rem; color:var(--muted); margin-top:var(--s2); }

/* ------------- results: before / after slider -------------- */
.results{ background:var(--emerald); color:var(--bone); }
.results .sec__head h2 em{ color:var(--jade-lt); }
.results .lede{ color:rgba(246,243,236,.72); }
.ba__row{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,1.8vw,30px); }
.ba{ }
/* square to match the source photographs, which already carry their own
   burned-in Before / After labels in the bottom corners */
.ba__fig{
  position:relative; aspect-ratio:1/1; overflow:hidden; border-radius:var(--r-md);
  background:var(--emerald-2); touch-action:none; cursor:ew-resize; user-select:none;
}
.ba__fig img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ba__after{ clip-path:inset(0 0 0 var(--pos,50%)); }
.ba__handle{
  position:absolute; top:0; bottom:0; left:var(--pos,50%); width:2px; background:var(--bone);
  transform:translateX(-1px); pointer-events:none;
}
.ba__handle::after{
  content:''; position:absolute; top:50%; left:50%; width:44px; height:44px;
  transform:translate(-50%,-50%); border-radius:50%; background:var(--bone);
  box-shadow:0 2px 14px rgba(0,0,0,.28);
}
.ba__handle::before{
  content:'‹ ›'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  z-index:2; color:var(--emerald); font-size:1rem; letter-spacing:1px; font-weight:700;
}
.ba h3{ font-size:1.2rem; margin:var(--s2) 0 3px; }
.ba p{ font-size:.86rem; color:rgba(246,243,236,.62); }
.disclaim{ margin-top:var(--s5); font-size:.82rem; color:rgba(246,243,236,.55); max-width:70ch; }

/* -------------------- reviews ------------------------------ */
.rev__lead{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,90px); align-items:center; margin-bottom:clamp(50px,6vw,90px); }
.rev__score{ }
.rev__score .num{ font-family:'Gambetta',serif; font-size:clamp(4.5rem,11vw,10rem); line-height:.86; color:var(--emerald); font-weight:600; }
/* color restated: the sibling `.rev__score p` rule outranks bare `.stars` */
.rev__score .stars{ font-size:1.5rem; margin:var(--s2) 0 10px; display:flex; color:var(--gold); }
.rev__score p{ color:var(--muted); font-size:1rem; }
.rev__score a{ color:var(--emerald); font-weight:600; }
/* Two source chips. The BBB one is a plain wordmark, NOT the official BBB
   seal: that seal is for accredited businesses and this practice is A+
   rated but not accredited, so using it would imply something untrue. */
.rev__srcs{ display:flex; gap:clamp(10px,1.1vw,16px); flex-wrap:wrap; margin:var(--s3) 0 var(--s3); }
.src{
  display:flex; align-items:center; gap:11px;
  padding:11px 18px 11px 13px; border-radius:var(--r-pill);
  background:var(--bone-2); text-decoration:none; color:var(--ink);
  font-size:.95rem; font-weight:400;
  transition:background .16s var(--ease), transform .16s var(--ease);
}
.src:hover{ background:var(--bone-3); transform:translateY(-2px); }
.src b{ font-weight:600; }
.bbb{
  display:grid; place-items:center; width:34px; height:34px; flex:none;
  border-radius:5px; background:#005a8c; color:#fff;
  font-size:.66rem; font-weight:700; letter-spacing:.02em;
}
.quote{ font-family:'Gambetta',serif; font-size:clamp(1.45rem,2.5vw,2.6rem); line-height:1.24; font-style:italic; color:var(--emerald); }
.quote + .who{ margin-top:var(--s3); font-size:.9rem; color:var(--muted); font-style:normal; }
.who b{ color:var(--ink); font-weight:600; }

/* Two columns creeping in opposite directions inside a fixed, masked frame.
   Replaces a nine-card masonry that ran the height of the viewport twice. */
.revcols{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,1.5vw,22px);
  height:clamp(430px,44vw,560px); overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 8%,#000 92%,transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 8%,#000 92%,transparent 100%);
}
.revcol{ overflow:hidden; }
.revcol__track{ display:grid; gap:clamp(14px,1.5vw,22px); animation:vscroll 54s linear infinite; }
.revcol--down .revcol__track{ animation-direction:reverse; }
.revcols:hover .revcol__track,.revcols:focus-within .revcol__track{ animation-play-state:paused; }
@keyframes vscroll{ from{ transform:translateY(0); } to{ transform:translateY(-50%); } }

.card{
  background:var(--bone-2); border-radius:var(--r-md); padding:clamp(20px,1.8vw,28px);
  transition:background .25s var(--ease), transform .25s var(--ease);
}
.card:hover{ background:var(--bone-3); transform:translateY(-2px); }
.card .stars{ margin-bottom:12px; display:flex; }
.card p{ font-size:.96rem; line-height:1.58; }
.card .who{ margin-top:var(--s2); font-size:.85rem; color:var(--muted); }

/* ------------- statement band (one line) ------------------- */
.say{ background:var(--emerald); color:var(--bone); text-align:center; padding:clamp(90px,12vw,180px) 0; }
.say p{
  font-family:'Gambetta',serif; font-weight:400; font-style:italic;
  font-size:clamp(1.75rem,4.1vw,4rem); line-height:1.16; max-width:20ch; margin:0 auto;
}
.say .sig{ margin-top:clamp(28px,3.5vw,52px); font-family:'Switzer',sans-serif; font-style:normal; font-size:.92rem; color:var(--jade-lt); letter-spacing:.03em; max-width:none; }

/* ================= CONCERN TO TREATMENT ==================== */
.match{ background:var(--bone-2); }
.match__grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(28px,4vw,72px); align-items:start; }
.match__chips{ display:flex; flex-wrap:wrap; gap:9px; }
.chip{
  font-family:'Switzer',sans-serif; font-size:.95rem; font-weight:500; color:var(--emerald);
  background:transparent; border:1px solid rgba(14,58,49,.24); border-radius:var(--r-pill);
  padding:11px 18px; min-height:44px; cursor:pointer;
  transition:background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.chip:hover{ border-color:var(--emerald); background:rgba(14,58,49,.06); }
.chip[aria-selected="true"]{ background:var(--emerald); border-color:var(--emerald); color:var(--bone); }

.match__out{ background:var(--bone); border-radius:var(--r-md); padding:clamp(26px,2.6vw,42px); min-height:270px; }
.match__out h3{ font-size:clamp(1.35rem,1.9vw,1.9rem); margin-bottom:12px; }
.match__why{ color:var(--muted); margin-bottom:var(--s3); max-width:48ch; }
.match__rx{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:var(--s4); }
.match__rx span{
  font-size:.88rem; font-weight:500; color:var(--emerald);
  background:rgba(79,143,121,.14); border-radius:var(--r-pill); padding:7px 14px;
}
.match__note{ font-size:.84rem; color:var(--muted); margin-top:var(--s3); }
.match__fade{ animation:mfade .34s var(--ease); }
@keyframes mfade{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

/* ==================== BOOKING FLOW ========================= */
.bk__steps{ display:flex; gap:0; list-style:none; margin:0 0 var(--s5); padding:0; counter-reset:s; }
.bk__steps li{
  flex:1; font-size:.8rem; font-weight:600; letter-spacing:.01em; color:var(--muted);
  padding-top:13px; border-top:2px solid rgba(14,58,49,.15);
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.bk__steps li.on{ color:var(--emerald); border-top-color:var(--emerald); }
.bk__steps li.done{ color:var(--jade); border-top-color:var(--jade); }

.bk__pane{ border:0; margin:0; padding:0; display:none; }
.bk__pane.is-on{ display:block; animation:mfade .3s var(--ease); }
.bk__pane legend{
  font-family:'Gambetta',serif; font-size:clamp(1.4rem,2vw,2rem); line-height:1.14;
  color:var(--ink); margin-bottom:var(--s3); padding:0;
}
.bk__hint{ font-size:.92rem; color:var(--muted); margin:-8px 0 var(--s3); max-width:46ch; }

.opts{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.opt{
  text-align:left; font-family:'Switzer',sans-serif; cursor:pointer;
  background:rgba(255,255,255,.7); border:1px solid rgba(14,58,49,.18); border-radius:var(--r-md);
  padding:15px 17px; min-height:64px; color:var(--ink);
  transition:border-color .15s var(--ease), background .15s var(--ease), transform .15s var(--ease);
}
.opt:hover{ border-color:var(--jade); transform:translateY(-1px); }
.opt[aria-pressed="true"]{ border-color:var(--emerald); background:var(--emerald); color:var(--bone); }
.opt b{ display:block; font-size:1rem; font-weight:600; }
.opt small{ display:block; font-size:.82rem; opacity:.72; margin-top:3px; }

.picks{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.pick{
  cursor:pointer; background:rgba(255,255,255,.7); border:1px solid rgba(14,58,49,.18);
  border-radius:var(--r-md); padding:12px; text-align:center; color:var(--ink);
  font-family:'Switzer',sans-serif;
  transition:border-color .15s var(--ease), background .15s var(--ease), transform .15s var(--ease);
}
.pick:hover{ border-color:var(--jade); transform:translateY(-1px); }
.pick[aria-pressed="true"]{ border-color:var(--emerald); background:var(--emerald); color:var(--bone); }
.pick img{ width:100%; aspect-ratio:1/1; object-fit:cover; object-position:top center; border-radius:50%; background:#fff; margin-bottom:9px; }
.pick .any{ display:grid; place-items:center; aspect-ratio:1/1; border-radius:50%; background:var(--bone-3); color:var(--emerald); font-family:'Gambetta',serif; font-size:1.5rem; margin-bottom:9px; }
.pick[aria-pressed="true"] .any{ background:var(--jade-lt); }
.pick b{ display:block; font-size:.88rem; font-weight:600; }
.pick small{ display:block; font-size:.75rem; opacity:.7; }

.bk__when{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); }
.slots{ display:flex; flex-wrap:wrap; gap:8px; }

.bk__sum{ background:rgba(255,255,255,.6); border-radius:var(--r-md); padding:18px 20px; margin-bottom:var(--s3); }
.bk__sum dl{ display:grid; grid-template-columns:auto 1fr; gap:6px var(--s3); margin:0; font-size:.93rem; }
.bk__sum dt{ color:var(--muted); }
.bk__sum dd{ margin:0; font-weight:500; }

.bk__nav{ display:flex; align-items:center; gap:var(--s2); margin-top:var(--s5); flex-wrap:wrap; }
.bk__nav .btn[hidden]{ display:none; }

.bk__done{ animation:mfade .4s var(--ease); }
.bk__done h3{ font-size:clamp(1.6rem,2.4vw,2.4rem); margin-bottom:var(--s2); }
.bk__done p{ color:var(--muted); max-width:48ch; margin-bottom:var(--s3); }
.bk__tick{
  width:52px; height:52px; border-radius:50%; background:var(--emerald); color:var(--bone);
  display:grid; place-items:center; font-size:1.4rem; margin-bottom:var(--s3);
}

/* --------------------- booking ----------------------------- */
.book{ position:relative; background:var(--bone-2); padding:clamp(80px,9vw,140px) 0; }
.book__grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(34px,5vw,88px); align-items:start; }
.book .field input,.book .field select,.book .field textarea{ background:rgba(255,255,255,.86); }

/* landscape crop keeps the right column close in height to the form column,
   framed on the sign and doorway rather than the full portrait frontage */
.visit__shop{ margin:var(--s5) 0 0; }
.visit__shop img{
  width:100%; aspect-ratio:3/2; object-fit:cover; object-position:center 30%;
  border-radius:var(--r-md); display:block;
}
.visit__shop figcaption{ margin-top:11px; font-size:.86rem; color:var(--muted); }

.form{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s2) var(--s2); }
.field{ display:flex; flex-direction:column; gap:7px; }
.field--full{ grid-column:1/-1; }
.field label{ font-size:.88rem; font-weight:500; color:var(--muted); }
.field input,.field select,.field textarea{
  font-family:'Switzer',sans-serif; font-size:1rem; color:var(--ink);
  background:rgba(255,255,255,.72); border:1px solid rgba(14,58,49,.22);
  border-radius:var(--r-sm); padding:14px 16px; min-height:52px; width:100%;
  transition:border-color .14s var(--ease), background .14s var(--ease);
}
.field textarea{ min-height:104px; resize:vertical; }
.field select{ appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%230e3a31' stroke-width='1.5'/></svg>"); background-repeat:no-repeat; background-position:right 16px center; padding-right:42px; }
.field input:hover,.field select:hover,.field textarea:hover{ border-color:rgba(14,58,49,.42); }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--jade); background:#fff; box-shadow:0 0 0 3px rgba(79,143,121,.16); }
.field input::placeholder,.field textarea::placeholder{ color:#9aa5a0; }
.form__foot{ grid-column:1/-1; display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; margin-top:var(--s1); }
.form__note{ font-size:.83rem; color:var(--muted); max-width:38ch; }
.form__msg{ grid-column:1/-1; font-size:.92rem; padding:14px 16px; border-radius:var(--r-sm); display:none; }
.form__msg.ok{ display:block; background:rgba(79,143,121,.14); color:#2f6d57; border:1px solid rgba(79,143,121,.4); }
.form__msg.err{ display:block; background:rgba(168,60,45,.10); color:#9a3b2c; border:1px solid rgba(168,60,45,.35); }

/* No stacked micro-labels here: the phone, address and hours identify
   themselves, so scale and spacing do the work a tag row would have done. */
.visit__tel{ font-family:'Gambetta',serif; font-size:clamp(2rem,3.1vw,3rem); line-height:1; margin-bottom:var(--s2); }
.visit__tel a{ color:var(--emerald); text-decoration:none; transition:color .14s var(--ease); }
.visit__tel a:hover{ color:var(--jade); }
.visit__line{ font-size:1rem; color:var(--muted); max-width:38ch; margin-bottom:var(--s3); }
.visit__addr{ font-family:'Gambetta',serif; font-size:1.4rem; line-height:1.3; margin:var(--s5) 0 var(--s3); }
.visit__addr a{ color:var(--ink); text-decoration:none; border-bottom:1px solid rgba(14,58,49,.25); transition:color .14s var(--ease), border-color .14s var(--ease); }
.visit__addr a:hover{ color:var(--jade); border-color:var(--jade); }
.visit__line a{ color:var(--emerald); font-weight:500; text-decoration:none; border-bottom:1px solid rgba(14,58,49,.28); }
.visit__line a:hover{ color:var(--jade); border-color:var(--jade); }
.hours{ display:grid; grid-template-columns:auto 1fr; gap:5px var(--s3); font-size:1.02rem; margin-bottom:var(--s4); }
.hours span:nth-child(even){ color:var(--muted); }

/* ---------------------- footer ----------------------------- */
.foot{ background:var(--emerald-2); color:var(--bone); padding:clamp(60px,7vw,100px) 0 var(--s4); }
.foot__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:clamp(28px,3.5vw,60px); padding-bottom:var(--s6); }
.foot__logo{ height:46px; width:auto; margin-bottom:var(--s3); filter:brightness(0) invert(1) opacity(.94); }
.foot p{ font-size:.92rem; color:rgba(246,243,236,.62); max-width:34ch; }
.foot h4{ font-family:'Switzer',sans-serif; font-size:.78rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--jade-lt); margin-bottom:var(--s2); }
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.foot ul a{ font-size:.94rem; text-decoration:none; color:rgba(246,243,236,.78); transition:color .14s var(--ease); }
.foot ul a:hover{ color:var(--bone); }
.foot__social{ display:flex; gap:var(--s2); margin-top:var(--s3); }
.foot__social a{
  width:42px; height:42px; border-radius:50%; border:1px solid rgba(246,243,236,.24);
  display:grid; place-items:center; text-decoration:none;
  color:rgba(246,243,236,.82);
  transition:background .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease), transform .16s var(--ease);
}
.foot__social a:hover{ background:var(--bone); color:var(--emerald-2); border-color:var(--bone); transform:translateY(-2px); }
.foot__social svg{ width:19px; height:19px; display:block; fill:currentColor; }
.foot__base{
  border-top:1px solid rgba(246,243,236,.14); padding-top:var(--s3);
  display:flex; justify-content:space-between; gap:var(--s3); flex-wrap:wrap;
  font-size:.8rem; color:rgba(246,243,236,.5);
}

/* -------------- sticky mobile action bar ------------------- */
.dock{
  position:fixed; left:0; right:0; bottom:0; z-index:70; display:none;
  background:rgba(246,243,236,.97); backdrop-filter:blur(10px);
  box-shadow:0 -1px 0 rgba(14,58,49,.12); padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  gap:10px;
}
.dock .btn{ flex:1; padding:13px 12px; min-height:50px; }

/* ======================= RESPONSIVE ======================= */
@media (max-width:1180px){
  .foot__grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:1000px){
  .nav__links{ display:none; }
  .nav__tel{ display:none; }
  .nav .btn{ display:none; }
  .burger{ display:block; }
  .hero__grid{ grid-template-columns:1fr; }
  .hero__copy{ padding-bottom:var(--s4); }
  .hero__art{ max-width:520px; margin-inline:auto; width:100%; }
  .book__grid{ grid-template-columns:1fr; }
  .rev__lead{ grid-template-columns:1fr; gap:var(--s5); }
  .match__grid{ grid-template-columns:1fr; gap:var(--s4); }
  .picks{ grid-template-columns:repeat(3,1fr); }
  .store__grid{ grid-template-columns:1fr; gap:0; }
  .store__copy{ padding:clamp(56px,8vw,80px) 0 clamp(40px,5vw,56px); }
  .store__ph{ min-height:300px; margin:0 calc((100vw - var(--shell)) / -2); }
  .ba__row{ grid-template-columns:1fr; max-width:480px; }
  /* fixed row tracks would clip the longer tile copy at these widths,
     so tiles size to their content instead */
  .mosaic{ grid-auto-rows:auto; }
  .tile{ min-height:300px; }
  .t-inject{ grid-column:span 6; grid-row:auto; min-height:400px; }
  .t-resurf,.t-body,.t-rejuv,.t-weight{ grid-column:span 3; grid-row:auto; }
  .t-skin,.t-lash{ grid-column:span 6; grid-row:auto; min-height:250px; }
}
@media (max-width:720px){
  :root{ --shell:min(1520px,90vw); }
  .dock{ display:flex; }
  body{ padding-bottom:74px; }
  .grev__all{ margin-left:0; }
  /* one column on a phone: two would be too narrow to read at speed */
  .revcols{ grid-template-columns:1fr; height:clamp(400px,110vw,470px); }
  .revcol--down{ display:none; }
  .opts{ grid-template-columns:1fr; }
  .picks{ grid-template-columns:repeat(2,1fr); }
  .bk__when{ grid-template-columns:1fr; }
  .bk__steps li{ font-size:.72rem; }
  .bk__nav .btn{ flex:1; }
  .foot__grid{ grid-template-columns:1fr; gap:var(--s5); }
  .form{ grid-template-columns:1fr; }
  .t-inject{ grid-row:auto; min-height:360px; }
  .t-resurf,.t-body,.t-rejuv,.t-weight,.t-skin,.t-lash{ grid-column:span 6; grid-row:auto; }
  /* smaller bottle plus a tighter column so the copy clears it on a phone */
  .tile--light img{ height:86%; bottom:-4%; }
  .tile.tile--light h3,.tile.tile--light p{ max-width:56%; }
  .hero__arch{ border-radius:min(230px,42vw) min(230px,42vw) 0 0; }
  .ba__row{ max-width:none; }
}