/* ============================================================
   RIDGEVIEW DENTAL · "The Eight-Minute Practice"
   A panicked family gives a dental site eight minutes.
   Every design decision on this page answers to that clock.

   Registers:
   · Fraunces        the practice's voice (display, quotes)
   · Instrument Sans the explanation (body, UI)
   · IBM Plex Mono   the record (prices, dates, fine print,
                     license numbers, the minute meter)
   Color rule: coral appears ONLY on things you can act on.
   ============================================================ */

:root{
  --porcelain:#FAF7F1;
  --porcelain-deep:#F3EEE5;
  --mist:#EAF1ED;
  --mist-deep:#DFEAE4;
  --ink:#0B3634;
  --ink-soft:#164A46;
  --ink-deepest:#062421;
  --pine:#14544E;
  --teal:#177E70;
  --teal-bright:#2BA491;
  --coral:#E76F51;
  --coral-deep:#C6532F;
  --coral-soft:#F5B8A5;
  --paper:#FFFFFF;
  --body:#3D5551;
  --body-faint:#6B807B;
  --hairline:rgba(11,54,52,0.14);
  --hairline-soft:rgba(11,54,52,0.08);
  --hairline-light:rgba(250,247,241,0.16);
  --shadow-soft:0 2px 18px rgba(11,54,52,0.06);
  --shadow-lift:0 18px 44px rgba(11,54,52,0.12);

  --font-display:'Fraunces',Georgia,serif;
  --font-body:'Instrument Sans',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;

  --fs-hero:clamp(2.9rem,7vw,6rem);
  --fs-h2:clamp(2.1rem,4.2vw,3.5rem);
  --fs-h3:clamp(1.2rem,1.7vw,1.45rem);
  --fs-body:1.0625rem;
  --fs-small:0.9rem;
  --fs-mono:0.78rem;
  --fs-eyebrow:0.72rem;

  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --ease-soft:cubic-bezier(0.33,1,0.68,1);
  --dur-slow:1.1s;
  --dur-med:0.85s;

  --space-section:clamp(4.25rem,8vw,6.5rem);
  --gutter:clamp(1.25rem,4.5vw,4rem);
  --max:1280px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--ink)}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.75;
  color:var(--body);
  background:var(--porcelain);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.menu-open{overflow:hidden}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:420;
  font-variation-settings:'opsz' 100;
  line-height:1.06;
  color:var(--ink);
  margin:0;
  letter-spacing:-0.01em;
}
p{margin:0}
a{color:inherit;text-decoration:none}
/* height:auto is load-bearing. Every img here carries width/height attributes for CLS,
   and those map to presentational height. A used height defeats aspect-ratio entirely
   (it only applies when one axis is auto), so a rule like .hours__photo img{aspect-ratio:16/8.5}
   was silently ignored and the office front rendered 350x1067 on a phone: 78% of the
   building cropped away by object-fit. Declare it once here, not per figure. */
img{max-width:100%;height:auto;display:block}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;background:none;border:none;cursor:pointer;color:inherit;padding:0}

::selection{background:var(--teal);color:var(--porcelain)}

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

.skip-link{
  position:fixed;top:-4rem;left:1rem;z-index:200;
  background:var(--ink);color:var(--porcelain);
  padding:0.6rem 1.2rem;border-radius:0 0 10px 10px;
  font-size:var(--fs-small);transition:top 0.25s var(--ease-out);
}
.skip-link:focus{top:0}

/* Grain: the porcelain has a tooth to it */
body::after{
  content:"";position:fixed;inset:0;z-index:90;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity:0.03;
}

.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}

.eyebrow{
  font-family:var(--font-mono);
  font-size:var(--fs-eyebrow);
  letter-spacing:0.22em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--teal);
  display:flex;align-items:center;gap:0.7rem;
}
.eyebrow::before{content:"";width:1.6rem;height:1px;background:var(--teal);flex:none}
.eyebrow--center{justify-content:center}
.eyebrow--center::after{content:"";width:1.6rem;height:1px;background:var(--teal);flex:none}
.on-ink .eyebrow{color:var(--teal-bright)}
.on-ink .eyebrow::before,.on-ink .eyebrow::after{background:var(--teal-bright)}

.mono{font-family:var(--font-mono);font-size:var(--fs-mono);letter-spacing:0.06em}

/* ---------- Buttons: coral means you can act right now ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:0.6rem;
  border-radius:999px;
  padding:1rem 2.1rem;
  font-family:var(--font-body);font-size:0.95rem;font-weight:600;letter-spacing:0.02em;
  cursor:pointer;white-space:nowrap;
  position:relative;overflow:hidden;
  transition:transform 0.45s var(--ease-out),box-shadow 0.45s var(--ease-out),background 0.3s ease,color 0.3s ease,border-color 0.3s ease;
}
.btn-coral{background:var(--coral);color:#FFF8F4}
.btn-coral::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:var(--coral-deep);
  transform:translateY(101%);transition:transform 0.5s var(--ease-out);
}
.btn-coral:hover::before{transform:translateY(0)}
.btn-coral>*{position:relative;z-index:1}
.btn-coral:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(199,83,47,0.28)}
.btn-coral .btn-arrow{transition:transform 0.45s var(--ease-out)}
.btn-coral:hover .btn-arrow{transform:translateX(4px)}
.btn-quiet{
  background:transparent;color:var(--ink);
  border:1px solid var(--hairline);
}
.btn-quiet:hover{border-color:var(--ink);transform:translateY(-2px)}
.on-ink .btn-quiet{color:var(--porcelain);border-color:var(--hairline-light)}
.on-ink .btn-quiet:hover{border-color:var(--porcelain)}

/* ============================================================
   CURTAIN · the one orchestrated load moment
   ============================================================ */
.curtain{
  position:fixed;inset:0;z-index:120;
  background:var(--ink);
  display:flex;align-items:center;justify-content:center;
  transform:translateY(0);
}
.curtain__mark{
  font-family:var(--font-display);font-size:clamp(1.4rem,3vw,2rem);
  color:var(--porcelain);letter-spacing:0.01em;
  display:flex;align-items:baseline;gap:0.9rem;
  opacity:0;transform:translateY(14px);
}
.curtain__mark .logo__mark{width:44px;height:44px}
.curtain__mark .mono{color:var(--teal-bright);font-size:0.7rem}
html.js .curtain__mark{animation:curtainMark 1.05s var(--ease-out) 0.1s forwards}
@keyframes curtainMark{to{opacity:1;transform:translateY(0)}}
.curtain.is-done{transform:translateY(-100%);transition:transform 0.95s var(--ease-out)}
.curtain.is-gone{display:none}
html.no-js .curtain{display:none}

/* ============================================================
   EMERGENCY BAND · the promise, first thing on the page
   ============================================================ */
.emergency{
  background:var(--ink);color:rgba(250,247,241,0.88);
  position:relative;z-index:60;
}
.emergency__inner{
  max-width:var(--max);margin:0 auto;padding:0.62rem var(--gutter);
  display:flex;align-items:center;justify-content:center;gap:0.9rem;flex-wrap:wrap;
  font-size:0.84rem;letter-spacing:0.01em;
}
.emergency__dot{
  width:8px;height:8px;border-radius:50%;background:var(--coral);flex:none;
  box-shadow:0 0 0 0 rgba(231,111,81,0.5);
}
html.js .emergency__dot{animation:pulse 2.6s ease-out infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(231,111,81,0.5)}
  70%{box-shadow:0 0 0 9px rgba(231,111,81,0)}
  100%{box-shadow:0 0 0 0 rgba(231,111,81,0)}
}
.emergency strong{color:var(--porcelain);font-weight:600}
.emergency a{
  color:var(--coral-soft);font-weight:600;
  border-bottom:1px solid rgba(245,184,165,0.4);
  transition:color 0.25s ease,border-color 0.25s ease;
}
.emergency a:hover{color:#FFD9CC;border-color:#FFD9CC}
.emergency__sep{opacity:0.35}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:sticky;top:0;z-index:80;
  background:transparent;
  transition:background 0.4s ease,box-shadow 0.4s ease,backdrop-filter 0.4s ease;
}
.nav.is-scrolled{
  background:rgba(250,247,241,0.86);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--hairline-soft);
}
.nav__inner{
  max-width:var(--max);margin:0 auto;
  padding:1.05rem var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
}
.logo{
  font-family:var(--font-display);font-size:1.28rem;color:var(--ink);
  letter-spacing:-0.005em;display:flex;align-items:baseline;gap:0.55rem;flex:none;
}
.logo .mono{color:var(--teal);font-size:0.62rem;letter-spacing:0.2em}
.logo__mark{width:30px;height:30px;flex:none;align-self:center;display:block}
.nav__links{display:flex;align-items:center;gap:1.9rem}
.nav__links a{
  font-size:0.88rem;font-weight:500;color:var(--ink-soft);
  position:relative;padding:0.2rem 0;
}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--teal);transform:scaleX(0);transform-origin:right;
  transition:transform 0.45s var(--ease-out);
}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav__cta{display:flex;align-items:center;gap:0.9rem}
.nav__cta .btn{padding:0.72rem 1.5rem;font-size:0.88rem}
.nav__login{font-size:0.88rem;font-weight:500;color:var(--ink-soft)}
.nav__login:hover{color:var(--ink)}

.nav__burger{
  display:none;flex-direction:column;gap:5px;padding:0.5rem;
}
.nav__burger span{width:22px;height:1.5px;background:var(--ink);transition:transform 0.4s var(--ease-out),opacity 0.3s ease}

/* Mobile menu overlay */
.menu{
  position:fixed;inset:0;z-index:110;background:var(--ink);
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--gutter);
  visibility:hidden;opacity:0;transition:opacity 0.5s var(--ease-out),visibility 0s linear 0.5s;
  /* A CENTRED FLEX COLUMN THAT OUTGROWS ITS BOX OVERFLOWS IN BOTH DIRECTIONS, AND THE
     TOP HALF IS UNREACHABLE. Eight links at clamp(2rem,9vw,3.2rem) plus the foot come
     to 553px, so on ANY phone in landscape (390 tall) 163px of the menu sat above the
     viewport with no way to scroll to it, and a tap on CLOSE landed on "03 Smile Plan".
     Same on a 320x568 iPhone SE, and worse in Spanish, whose longer labels pushed the
     first link 30px off the top. `safe center` falls back to flex-start the moment the
     content does not fit, so nothing is ever pushed off the top edge; a browser too old
     for the keyword drops the whole declaration and behaves exactly as it does today. */
  overflow-y:auto;overscroll-behavior:contain;
  justify-content:safe center;
}
/* Close comes FIRST in the DOM, so a later sibling paints over it. It is the one
   control that must win the hit test no matter what overlaps it. */
.menu__close{z-index:2}
.menu.is-open{visibility:visible;opacity:1;transition:opacity 0.5s var(--ease-out)}
.menu__close{
  position:absolute;top:1.2rem;right:1.4rem;color:var(--porcelain);
  font-family:var(--font-mono);font-size:0.8rem;letter-spacing:0.18em;padding:0.6rem;
}
.menu__links{display:flex;flex-direction:column;gap:0.4rem}
.menu__links a{
  font-family:var(--font-display);font-size:clamp(2rem,9vw,3.2rem);
  color:var(--porcelain);line-height:1.25;
  display:flex;align-items:baseline;gap:1rem;
  opacity:0;transform:translateY(22px);
  transition:opacity 0.6s var(--ease-out),transform 0.6s var(--ease-out);
}
.menu__links a .mono{color:var(--teal-bright);font-size:0.72rem}
.menu.is-open .menu__links a{opacity:1;transform:translateY(0)}
.menu__foot{
  margin-top:3rem;display:flex;flex-direction:column;gap:0.5rem;
  color:rgba(250,247,241,0.6);font-size:0.9rem;
  opacity:0;transition:opacity 0.7s ease 0.35s;
}
.menu.is-open .menu__foot{opacity:1}
.menu__foot a{color:var(--coral-soft);font-weight:600}
/* Short viewport, which in practice means any phone turned sideways: size the menu to
   the height it actually has rather than to the width. MUST STAY BELOW the base rules
   above, since a media query adds no specificity and a later declaration would win. */
@media (max-height:680px){
  .menu{padding-top:calc(var(--gutter) + 2.4rem)}
  .menu__links{gap:0.15rem}
  .menu__links a{font-size:clamp(1.3rem,5.2vh,2.1rem)}
  .menu__foot{margin-top:1.4rem;font-size:0.82rem}
}

/* ============================================================
   THE MINUTE METER · signature element
   ============================================================ */
.meter{
  position:fixed;left:clamp(0.9rem,2vw,1.6rem);bottom:clamp(1rem,3vh,1.6rem);z-index:70;
  display:flex;flex-direction:column;gap:0.5rem;
  font-family:var(--font-mono);font-size:0.62rem;letter-spacing:0.14em;
  color:var(--body-faint);
  pointer-events:none;
  background:rgba(250,247,241,0.9);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid var(--hairline-soft);
  border-radius:14px;
  padding:0.75rem 0.95rem 0.8rem;
  box-shadow:var(--shadow-soft);
  opacity:0;transform:translateY(10px);
  transition:opacity 0.5s cubic-bezier(0.22,1,0.36,1),transform 0.5s cubic-bezier(0.22,1,0.36,1);
}
.meter.is-live{opacity:1;transform:none}
.meter__label{text-transform:uppercase;color:var(--pine)}
.meter__track{
  width:88px;height:2px;background:rgba(11,54,52,0.16);
  position:relative;border-radius:2px;overflow:hidden;
}
.meter__fill{
  position:absolute;inset:0;background:var(--teal);
  transform:scaleX(0);transform-origin:left;border-radius:2px;
}
.meter__time{font-variant-numeric:tabular-nums;color:var(--ink-soft)}
.meter.is-done .meter__fill{background:var(--coral)}
.meter.is-done .meter__time{color:var(--coral-deep)}
@media (max-width:900px){.meter{display:none}}
html.no-js .meter{display:none}

/* ============================================================
   REVEAL SYSTEM
   ============================================================ */
html.js [data-reveal]{opacity:0;transform:translateY(34px);transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out)}
html.js [data-reveal].is-in{opacity:1;transform:translateY(0)}
html.js [data-reveal-stagger]>*{opacity:0;transform:translateY(30px);transition:opacity var(--dur-med) var(--ease-out),transform var(--dur-med) var(--ease-out)}
html.js [data-reveal-stagger].is-in>*{opacity:1;transform:translateY(0)}
html.js [data-reveal-stagger].is-in>*:nth-child(1){transition-delay:0.05s}
html.js [data-reveal-stagger].is-in>*:nth-child(2){transition-delay:0.16s}
html.js [data-reveal-stagger].is-in>*:nth-child(3){transition-delay:0.27s}
html.js [data-reveal-stagger].is-in>*:nth-child(4){transition-delay:0.38s}
html.js [data-reveal-stagger].is-in>*:nth-child(5){transition-delay:0.49s}
html.js [data-reveal-stagger].is-in>*:nth-child(6){transition-delay:0.6s}
html.js [data-reveal-stagger].is-in>*:nth-child(7){transition-delay:0.71s}
html.js [data-reveal-stagger].is-in>*:nth-child(8){transition-delay:0.82s}
html.js [data-reveal-stagger].is-in>*:nth-child(9){transition-delay:0.93s}
html.js [data-reveal-stagger].is-in>*:nth-child(10){transition-delay:1.04s}
html.js [data-reveal-stagger].is-in>*:nth-child(11){transition-delay:1.15s}
html.js [data-reveal-stagger].is-in>*:nth-child(12){transition-delay:1.26s}

/* Per-letter split text */
.split .w{
  display:inline-block;white-space:nowrap;vertical-align:top;
  overflow:hidden;
  padding:0.09em 0.03em 0.16em;margin:-0.09em -0.03em -0.16em;
}
html.js .split .l{
  display:inline-block;
  transform:translateY(115%);
  transition:transform 0.9s var(--ease-out);
}
html.js .split.is-in .l{transform:translateY(0)}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;overflow:clip}
.hero__grid{
  max-width:var(--max);margin:0 auto;
  padding:clamp(2.5rem,6vh,5rem) var(--gutter) clamp(3.5rem,8vh,6rem);
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(2rem,5vw,5rem);align-items:center;
}
.hero__eyebrow{margin-bottom:1.6rem}
.hero h1{font-size:var(--fs-hero);max-width:12ch}
.hero h1 em{font-style:italic;font-weight:400;color:var(--pine)}
.hero__sub{
  margin-top:1.8rem;max-width:46ch;font-size:1.1rem;line-height:1.8;
}
.hero__cta{margin-top:2.4rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.hero__trust{
  margin-top:2.6rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--body-faint);
}
.hero__trust .tsep{color:var(--teal);font-size:0.6rem}

.hero__media{position:relative}
.hero__arch{
  position:relative;overflow:hidden;
  border-radius:999px 999px 26px 26px;
  aspect-ratio:4/5.1;
  background:var(--mist-deep);
  box-shadow:var(--shadow-lift);
}
html.js .hero__arch{clip-path:inset(0 0 100% 0 round 999px 999px 26px 26px)}
html.js .hero__arch.is-open{
  clip-path:inset(0 0 0 0 round 999px 999px 26px 26px);
  transition:clip-path 1.3s var(--ease-out) 0.55s;
}
.hero__arch img{width:100%;height:112%;object-fit:cover;object-position:center 20%}
.hero__chip{
  position:absolute;left:-1.4rem;bottom:2.2rem;z-index:2;
  background:var(--paper);border:1px solid var(--hairline);
  border-radius:14px;box-shadow:var(--shadow-lift);
  padding:0.9rem 1.15rem;
  display:flex;align-items:center;gap:0.9rem;
  transition:transform 0.5s var(--ease-out),box-shadow 0.5s var(--ease-out);
}
.hero__chip:hover{transform:translateY(-4px)}
.hero__chip-price{
  font-family:var(--font-display);font-size:1.7rem;color:var(--coral-deep);
  line-height:1;
}
.hero__chip-copy{display:flex;flex-direction:column;gap:0.15rem}
.hero__chip-copy .mono{font-size:0.6rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--teal)}
.hero__chip-copy strong{font-size:0.85rem;color:var(--ink);font-weight:600;line-height:1.3}

/* ============================================================
   MARQUEE TRUST BAND
   ============================================================ */
.band{
  background:var(--mist);border-top:1px solid var(--hairline-soft);border-bottom:1px solid var(--hairline-soft);
  overflow:hidden;padding:1.15rem 0;
}
.band__track{display:flex;width:max-content;gap:3.2rem;padding-right:3.2rem}
html.js .band__track{animation:drift 44s linear infinite}
@keyframes drift{to{transform:translateX(-50%)}}
.band__item{
  display:flex;align-items:center;gap:3.2rem;flex:none;
  font-family:var(--font-mono);font-size:0.74rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--pine);
  white-space:nowrap;
}
.band__item .bsep{color:var(--coral);font-size:0.62rem}

/* ============================================================
   SECTION SCAFFOLD
   ============================================================ */
.section{padding:var(--space-section) 0;position:relative;overflow:clip}
.section + .section{padding-top:calc(var(--space-section)*0.6)}
.section--mist{
  background:
    radial-gradient(1000px 620px at 84% -10%, rgba(23,126,112,0.10), transparent 62%),
    radial-gradient(820px 520px at 2% 108%, rgba(231,111,81,0.055), transparent 58%),
    var(--mist);
}
.section--ink{
  background:
    radial-gradient(1200px 700px at 78% -12%, rgba(43,164,145,0.17), transparent 64%),
    radial-gradient(1000px 620px at -8% 112%, rgba(23,126,112,0.13), transparent 60%),
    var(--ink);
  color:rgba(250,247,241,0.82);
}

/* ============================================================
   TEXTURE · three living weathers, one botanical language.
   Two drifting layers per section (near + far, counter-moving)
   over a static atmospheric wash. Transform-only, composite-cheap.
   ============================================================ */
:root{
  --tex-porcelain:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600' viewBox='0 0 600 600' fill='none' stroke='%230B3634' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'><path d='M96 150c10-20 8-44 2-64'/><path d='M97 122c-10-4-19 0-22 8 8 3 17-1 22-8Z'/><path d='M95 103c9-6 10-15 6-21-7 3-10 13-6 21Z'/><path d='M99 138c-8-1-14 3-15 9 6 1 12-3 15-9Z'/><path d='M330 322c-8-18-6-40-1-58'/><path d='M329 296c10-4 18 0 21 8-8 3-16-1-21-8Z'/><path d='M331 278c-9-6-10-15-6-21 7 3 10 13 6 21Z'/><path d='M394 428v-44a33 33 0 0 1 66 0v44'/><path d='M406 428v-40a21 21 0 0 1 42 0v40'/><path d='M418 428v-36a9 9 0 0 1 18 0v36' stroke-dasharray='1 7'/><g stroke-width='0.8' transform='translate(190 468) scale(1.4)'><path d='M18 13c-1.8 0-3 1.1-5.2 1.1S9.4 13 7.6 13C4 13 1.8 15.9 1.8 19.5c0 5.4 2.2 6.9 3 13.6.3 2.4 3.5 2.5 4 .1.7-3.6 1.3-5.8 3.9-5.8s3.2 2.2 3.9 5.8c.5 2.4 3.7 2.3 4-.1.8-6.7 3-8.2 3-13.6 0-3.6-2.2-6.5-5.8-6.5Z'/></g><path d='M258 74l4 9 9 4-9 4-4 9-4-9-9-4 9-4Z'/><path d='M448 158l3 7 7 3-7 3-3 7-3-7-7-3 7-3Z'/><path d='M120 388l3 7 7 3-7 3-3 7-3-7-7-3 7-3Z'/><path d='M530 60l4 9 9 4-9 4-4 9-4-9-9-4 9-4Z'/><path d='M60 540l3 6 6 3-6 3-3 6-3-6-6-3 6-3Z'/><path d='M424 252c16 14 48 14 64 0'/><path d='M20 250a190 190 0 0 1 150-90' stroke-dasharray='1 9'/><path d='M380 560a200 200 0 0 1 190-105' stroke-dasharray='1 9'/><g opacity='0.5'><circle cx='500' cy='350' r='1.8'/><circle cx='60' cy='60' r='1.8'/><circle cx='300' cy='200' r='1.8'/><circle cx='220' cy='560' r='1.8'/><path d='M200 30l2.5 5.5 5.5 2.5-5.5 2.5-2.5 5.5-2.5-5.5-5.5-2.5 5.5-2.5Z'/><path d='M520 500c-9-3-17 0-20 7 7 3 15-1 20-7Z'/><path d='M40 470c12 10 36 10 48 0'/></g></svg>");
  --tex-mist:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='520' height='520' viewBox='0 0 520 520' fill='none' stroke='%23177E70' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'><path d='M84 214v-52a38 38 0 0 1 76 0v52'/><path d='M98 214v-50a24 24 0 0 1 48 0v50'/><path d='M112 214v-46a10 10 0 0 1 20 0v46' stroke-dasharray='1 7'/><path d='M300 420v-26a19 19 0 0 1 38 0v26'/><path d='M308 420v-22a11 11 0 0 1 22 0v22'/><path d='M350 352c8-16 6-34 1-50'/><path d='M351 330c-9-4-17 0-20 7 7 3 15-1 20-7Z'/><path d='M349 313c8-5 9-13 5-19-6 3-9 12-5 19Z'/><g stroke-width='0.9' transform='translate(170 40) scale(1.2)'><path d='M18 13c-1.8 0-3 1.1-5.2 1.1S9.4 13 7.6 13C4 13 1.8 15.9 1.8 19.5c0 5.4 2.2 6.9 3 13.6.3 2.4 3.5 2.5 4 .1.7-3.6 1.3-5.8 3.9-5.8s3.2 2.2 3.9 5.8c.5 2.4 3.7 2.3 4-.1.8-6.7 3-8.2 3-13.6 0-3.6-2.2-6.5-5.8-6.5Z'/></g><path d='M330 96l4 9 9 4-9 4-4 9-4-9-9-4 9-4Z'/><path d='M60 300l4 8 8 4-8 4-4 8-4-8-8-4 8-4Z'/><path d='M470 200l3 6 6 3-6 3-3 6-3-6-6-3 6-3Z'/><path d='M400 470c13 11 39 11 52 0'/><path d='M30 420a170 170 0 0 1 120-80' stroke-dasharray='1 8'/><path d='M240 30a160 160 0 0 1 140 90' stroke-dasharray='1 8'/><g opacity='0.5'><circle cx='440' cy='60' r='1.6'/><circle cx='140' cy='300' r='1.6'/><circle cx='260' cy='250' r='1.6'/><circle cx='60' cy='140' r='1.6'/><path d='M240 480l2.5 5 5 2.5-5 2.5-2.5 5-2.5-5-5-2.5 5-2.5Z'/><path d='M470 400c-8-3-15 0-18 6 6 3 13-1 18-6Z'/></g></svg>");
  --tex-ink:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600' viewBox='0 0 600 600' fill='none' stroke='%23FAF7F1' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'><path d='M110 90l5 11 11 5-11 5-5 11-5-11-11-5 11-5Z'/><path d='M400 70l3 8 8 3-8 3-3 8-3-8-8-3 8-3Z'/><path d='M470 300l4 9 9 4-9 4-4 9-4-9-9-4 9-4Z'/><path d='M60 340l3 7 7 3-7 3-3 7-3-7-7-3 7-3Z'/><path d='M300 460l3 8 8 3-8 3-3 8-3-8-8-3 8-3Z'/><path d='M540 480l4 9 9 4-9 4-4 9-4-9-9-4 9-4Z'/><path d='M200 220l3 6 6 3-6 3-3 6-3-6-6-3 6-3Z'/><path d='M210 250v-34a26 26 0 0 1 52 0v34'/><path d='M220 250v-30a16 16 0 0 1 32 0v30' stroke-dasharray='1 6'/><path d='M40 240a210 210 0 0 1 180-120' stroke-dasharray='1 10'/><path d='M260 500a190 190 0 0 1 200-60' stroke-dasharray='1 10'/><path d='M64 520l34-20'/><path d='M104 494l2.5 5 5 2.5-5 2.5-2.5 5-2.5-5-5-2.5 5-2.5Z'/><path d='M360 380c14 12 44 12 58 0'/><g stroke-width='0.95' transform='translate(480 520) scale(1.1)'><path d='M18 13c-1.8 0-3 1.1-5.2 1.1S9.4 13 7.6 13C4 13 1.8 15.9 1.8 19.5c0 5.4 2.2 6.9 3 13.6.3 2.4 3.5 2.5 4 .1.7-3.6 1.3-5.8 3.9-5.8s3.2 2.2 3.9 5.8c.5 2.4 3.7 2.3 4-.1.8-6.7 3-8.2 3-13.6 0-3.6-2.2-6.5-5.8-6.5Z'/></g><g opacity='0.55'><circle cx='500' cy='120' r='1.4'/><circle cx='80' cy='150' r='1.4'/><circle cx='350' cy='250' r='1.4'/><circle cx='180' cy='420' r='1.4'/><circle cx='560' cy='320' r='1.4'/><circle cx='260' cy='60' r='1.4'/><path d='M121 101L194 220' stroke-dasharray='2 8'/><path d='M410 81L466 296' stroke-dasharray='2 8'/></g></svg>");
}
.section::before,.hero::before{
  content:"";position:absolute;inset:-160px;z-index:0;pointer-events:none;
  background-image:var(--tex-porcelain);background-size:560px 560px;background-repeat:repeat;
  opacity:0.09;
  animation:texDrift 80s ease-in-out infinite alternate;
}
.section::after,.hero::after{
  content:"";position:absolute;inset:-220px;z-index:0;pointer-events:none;
  background-image:var(--tex-porcelain);background-size:950px 950px;background-repeat:repeat;
  opacity:0.05;
  animation:texDriftFar 130s ease-in-out infinite alternate;
}
.section--mist::before{background-image:var(--tex-mist);background-size:500px 500px;opacity:0.13}
.section--mist::after{background-image:var(--tex-mist);background-size:860px 860px;opacity:0.07}
.section--ink::before{background-image:var(--tex-ink);background-size:560px 560px;opacity:0.11;animation-duration:110s}
.section--ink::after{background-image:var(--tex-ink);background-size:960px 960px;opacity:0.06;animation-duration:160s}
.section > *,.hero > *{position:relative;z-index:1}
@keyframes texDrift{
  from{transform:translate3d(0,0,0) rotate(0deg)}
  to{transform:translate3d(-74px,-54px,0) rotate(0.6deg)}
}
@keyframes texDriftFar{
  from{transform:translate3d(0,0,0) rotate(0deg)}
  to{transform:translate3d(58px,46px,0) rotate(-0.5deg)}
}
.section--ink h2,.section--ink h3{color:var(--porcelain)}
.section-head{max-width:760px;margin-bottom:clamp(2.2rem,4vw,3.2rem)}
.section-head--center{margin-left:auto;margin-right:auto;text-align:center}
.section-head .eyebrow{margin-bottom:1.4rem}
.section-head h2{font-size:var(--fs-h2)}
.section-head h2 em{font-style:italic;font-weight:400;color:var(--pine)}
.section--ink .section-head h2 em{color:var(--teal-bright)}
.section-head p{margin-top:1.3rem;font-size:1.02rem;max-width:58ch}
.section-head--center p{margin-left:auto;margin-right:auto}

/* ============================================================
   SERVICES
   ============================================================ */
.services__grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;
}
.service{
  background:var(--paper);border:1px solid var(--hairline-soft);
  border-radius:22px;padding:2.2rem 2rem 2.1rem;
  position:relative;overflow:hidden;
  transition:transform 0.55s var(--ease-out),box-shadow 0.55s var(--ease-out),border-color 0.4s ease;
}
.service:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift);border-color:transparent}
.service__figure{
  position:relative;border-radius:999px 999px 14px 14px;overflow:hidden;
  aspect-ratio:5/6;margin-bottom:1.5rem;background:var(--mist-deep);
}
.service__figure img{
  width:100%;height:100%;object-fit:cover;object-position:center 22%;
  transition:transform 0.9s var(--ease-out);
}
.service:hover .service__figure img{transform:scale(1.045)}
.service__tile{
  position:absolute;right:0.85rem;bottom:0.85rem;z-index:1;
  width:56px;height:68px;border-radius:999px 999px 10px 10px;
  background:rgba(250,247,241,0.92);border:1px solid var(--hairline-soft);
  display:flex;align-items:center;justify-content:center;
  color:var(--teal);
  transition:background 0.45s ease,color 0.45s ease,transform 0.55s var(--ease-out);
}
.service__tile svg{width:30px;height:30px;display:block}
.service:hover .service__tile{background:var(--ink);color:var(--teal-bright);transform:translateY(-3px)}
.service h3{font-size:var(--fs-h3);margin-bottom:0.7rem}
.service p{font-size:0.95rem;line-height:1.7}
.service__hint{
  margin-top:1.4rem;font-family:var(--font-mono);font-size:0.64rem;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--body-faint);
  display:flex;align-items:center;gap:0.5rem;
}
.service__hint::before{content:"";width:1.1rem;height:1px;background:var(--coral);opacity:0.7}

/* ============================================================
   SPECIALS · receipts
   ============================================================ */
.specials__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;align-items:stretch}
.receipt{
  background:var(--paper);border-radius:6px 6px 18px 18px;
  border:1px solid var(--hairline-soft);
  display:flex;flex-direction:column;
  position:relative;
  box-shadow:var(--shadow-soft);
  transition:transform 0.55s var(--ease-out),box-shadow 0.55s var(--ease-out);
}
.receipt:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift)}
.receipt::before{ /* perforated top edge */
  content:"";position:absolute;top:-1px;left:10px;right:10px;height:7px;
  background-image:radial-gradient(circle at 4px 0px,var(--mist) 3.5px,transparent 4px);
  background-size:14px 7px;background-repeat:repeat-x;
}
.receipt__tag{
  font-family:var(--font-mono);font-size:0.64rem;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--pine);
  padding:1.35rem 1.8rem 0;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
}
.receipt__tag .receipt__no{color:var(--body-faint)}
.receipt--featured .receipt__tag{color:var(--coral-deep)}
.receipt__price{
  font-family:var(--font-display);font-size:clamp(3.2rem,4.5vw,4.3rem);color:var(--ink);
  line-height:1;padding:1.1rem 1.8rem 0;
}
.receipt__price sup{font-size:0.4em;top:-0.9em;position:relative;color:var(--teal)}
.receipt h3{font-size:1.22rem;padding:0.7rem 1.8rem 0}
.receipt__desc{font-size:0.92rem;line-height:1.7;padding:0.8rem 1.8rem 0}
.receipt__rule{
  margin:1.4rem 1.8rem 0;border:0;border-top:1px dashed var(--hairline);
}
.receipt__fine{
  font-family:var(--font-mono);font-size:0.67rem;line-height:1.75;letter-spacing:0.02em;
  color:var(--body-faint);
  padding:1rem 1.8rem 1.4rem;
  flex:1;
}
.receipt__cta{
  margin:0 1.35rem 1.35rem;
  display:flex;align-items:center;justify-content:center;gap:0.5rem;
  border-radius:999px;padding:0.9rem 1rem;
  font-size:0.9rem;font-weight:600;
  background:var(--ink);color:var(--porcelain);
  transition:background 0.3s ease,transform 0.45s var(--ease-out);
}
.receipt__cta:hover{background:var(--ink-soft);transform:translateY(-2px)}
.receipt--featured .receipt__cta{background:var(--coral);color:#FFF8F4}
.receipt--featured .receipt__cta:hover{background:var(--coral-deep)}
.receipt__stamp{
  position:absolute;top:5.2rem;right:1.2rem;
  font-family:var(--font-mono);font-size:0.56rem;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--coral-deep);border:1.5px solid currentColor;border-radius:6px;
  padding:0.4rem 0.6rem;line-height:1.4;text-align:center;
  transform:rotate(7deg) scale(0.8);opacity:0;
  transition:opacity 0.4s ease,transform 0.5s var(--ease-out);
  pointer-events:none;
}
.receipt:hover .receipt__stamp{opacity:0.85;transform:rotate(-4deg) scale(1)}
.specials__foot{
  margin-top:2.6rem;text-align:center;font-size:0.95rem;color:var(--body-faint);
}
.specials__foot a{color:var(--teal);font-weight:600;border-bottom:1px solid rgba(23,126,112,0.35)}
.specials__foot a:hover{color:var(--pine)}

/* ============================================================
   MEMBERSHIP · ink
   ============================================================ */
.membership__grid{
  display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);
  gap:clamp(2.5rem,6vw,6rem);align-items:center;
}
.membership__price{
  display:flex;align-items:baseline;gap:1rem;margin-top:2.2rem;
}
.membership__amount{
  font-family:var(--font-display);font-size:clamp(4rem,7vw,6rem);color:var(--porcelain);line-height:1;
}
.membership__amount sup{font-size:0.35em;top:-1.4em;position:relative;color:var(--teal-bright)}
.membership__per{font-family:var(--font-mono);font-size:0.74rem;letter-spacing:0.14em;text-transform:uppercase;color:rgba(250,247,241,0.55)}
.membership__alt{
  margin-top:1rem;font-family:var(--font-mono);font-size:0.74rem;letter-spacing:0.08em;color:var(--teal-bright);
}
.membership__cta{margin-top:2.2rem;display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
.membership__fine{margin-top:1.6rem;font-size:0.88rem;color:rgba(250,247,241,0.55);max-width:44ch;line-height:1.75}

.included{
  background:var(--porcelain);border-radius:24px;
  padding:clamp(1.8rem,3vw,2.6rem);
  color:var(--body);
  box-shadow:0 30px 70px rgba(0,0,0,0.35);
}
.included h3{font-size:1.05rem;font-family:var(--font-mono);font-weight:500;letter-spacing:0.2em;text-transform:uppercase;color:var(--pine);margin-bottom:1.4rem}
.included li{
  display:flex;gap:1rem;align-items:flex-start;
  padding:0.85rem 0;border-bottom:1px dashed var(--hairline);
  font-size:0.95rem;line-height:1.6;
}
.included li:last-child{border-bottom:0}
.included__check{
  flex:none;width:1.35rem;height:1.35rem;border-radius:50%;
  background:var(--mist);color:var(--teal);
  display:flex;align-items:center;justify-content:center;
  font-size:0.7rem;margin-top:0.15rem;
}
.included li strong{color:var(--ink);font-weight:600}

/* ============================================================
   MOMENT · full-bleed quote
   ============================================================ */
.moment{
  position:relative;overflow:hidden;
  min-height:72vh;display:flex;align-items:center;
}
.moment__photo{position:absolute;inset:-12% 0;z-index:0}
.moment__photo img{width:100%;height:100%;object-fit:cover}
.moment::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(6,36,33,0.82),rgba(6,36,33,0.55) 45%,rgba(6,36,33,0.85));
}
.moment__inner{
  position:relative;z-index:2;max-width:880px;margin:0 auto;
  padding:6rem var(--gutter);text-align:center;
}
.moment__quote{
  font-family:var(--font-display);font-style:italic;font-weight:400;
  font-size:clamp(1.7rem,3.6vw,2.9rem);line-height:1.35;color:var(--porcelain);
}
.moment__attr{
  margin-top:2rem;font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--teal-bright);
}

/* ============================================================
   FIRST VISIT · the drawn path
   ============================================================ */
.visit__steps{
  display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;
  position:relative;padding-top:2.6rem;
}
.visit__line{
  position:absolute;top:0;left:0;right:0;height:2px;background:rgba(11,54,52,0.1);
  border-radius:2px;overflow:hidden;
}
.visit__line-fill{
  position:absolute;inset:0;background:linear-gradient(90deg,var(--teal),var(--teal-bright));
  transform:scaleX(0);transform-origin:left;border-radius:2px;
}
html.no-js .visit__line-fill{transform:scaleX(1)}
.step__no{
  font-family:var(--font-mono);font-size:0.66rem;letter-spacing:0.18em;color:var(--teal);
  display:flex;align-items:center;gap:0.7rem;margin-bottom:1.1rem;
}
.step__dot{
  width:11px;height:11px;border-radius:50%;
  border:2px solid var(--teal);background:var(--porcelain);
  position:absolute;top:-4.5px;
  transition:background 0.4s ease;
}
html.js .step.is-passed .step__dot{background:var(--teal)}
html.no-js .step__dot{background:var(--teal)}
.step{position:relative}
.step h3{font-size:1.18rem;margin-bottom:0.6rem;max-width:16ch}
.step p{font-size:0.93rem;line-height:1.7;max-width:30ch}
.visit__promise{
  margin-top:3.4rem;
  font-family:var(--font-mono);font-size:0.74rem;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--pine);display:flex;align-items:center;gap:0.8rem;
}
.visit__promise::before{content:"";width:2rem;height:1px;background:var(--coral)}

/* ============================================================
   WHY
   ============================================================ */
.why__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2.5rem,6vw,6rem)}
.why__item{
  display:flex;gap:1.6rem;padding:1.9rem 0;border-top:1px solid var(--hairline);
}
.why__item:last-child{border-bottom:1px solid var(--hairline)}
.why__glyph{flex:none;color:var(--coral);font-size:0.85rem;margin-top:0.5rem}
.why__item h3{font-size:1.3rem;margin-bottom:0.55rem}
.why__item p{font-size:0.96rem;line-height:1.75;max-width:52ch}

/* ============================================================
   DOCTOR
   ============================================================ */
.doctor__grid{
  display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);
  gap:clamp(2.5rem,6vw,6rem);align-items:center;
}
.doctor__bio{margin-top:1.6rem;font-size:1rem;line-height:1.85;max-width:52ch}
.doctor__creds{
  margin-top:2rem;display:flex;flex-wrap:wrap;gap:0.7rem;
}
.doctor__cred{
  font-family:var(--font-mono);font-size:0.66rem;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--pine);background:var(--mist);border:1px solid var(--hairline-soft);
  border-radius:999px;padding:0.45rem 0.95rem;
}
.doctor__media{position:relative}
.doctor__arch{
  overflow:hidden;border-radius:999px 999px 26px 26px;
  aspect-ratio:4/5.2;background:var(--mist-deep);box-shadow:var(--shadow-lift);
}
.doctor__arch img{width:100%;height:112%;object-fit:cover;object-position:center 15%}
.doctor__quote{
  margin-top:1.8rem;
  font-family:var(--font-display);font-style:italic;font-size:1.12rem;line-height:1.6;color:var(--ink-soft);
}
.doctor__sig{
  margin-top:0.9rem;font-family:var(--font-mono);font-size:0.68rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--teal);
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.stories__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.story{
  background:var(--paper);border:1px solid var(--hairline-soft);border-radius:22px;
  padding:2.3rem 2.1rem 2rem;position:relative;
  display:flex;flex-direction:column;
  transition:transform 0.55s var(--ease-out),box-shadow 0.55s var(--ease-out);
}
.story:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift)}
.story::before{
  content:"\201C";
  font-family:var(--font-display);font-size:4.6rem;line-height:0.6;
  color:var(--mist-deep);
  display:block;margin-bottom:1.2rem;
}
.story q{
  quotes:none;font-size:0.99rem;line-height:1.8;color:var(--body);flex:1;
}
.story__meta{
  margin-top:1.7rem;padding-top:1.3rem;border-top:1px dashed var(--hairline);
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
}
.story__who{font-size:0.86rem;font-weight:600;color:var(--ink)}
.story__who span{display:block;font-weight:400;color:var(--body-faint);font-size:0.78rem;margin-top:0.15rem}
.story__stars{color:var(--coral);font-size:0.68rem;letter-spacing:0.28em;white-space:nowrap}

/* ============================================================
   GALLERY
   ============================================================ */
.gallery__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.case{
  background:var(--paper);border:1px solid var(--hairline-soft);border-radius:22px;overflow:hidden;
  transition:transform 0.55s var(--ease-out),box-shadow 0.55s var(--ease-out);
}
.case:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift)}
.case__photo{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--mist-deep)}
.case__photo img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s var(--ease-out);
}
.case:hover .case__photo img{transform:scale(1.05)}
.case__label{
  position:absolute;left:1rem;bottom:1rem;
  font-family:var(--font-mono);font-size:0.6rem;letter-spacing:0.16em;text-transform:uppercase;
  background:rgba(6,36,33,0.72);color:var(--porcelain);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border-radius:999px;padding:0.4rem 0.85rem;
}
.case__body{padding:1.7rem 1.8rem 1.8rem}
.case__body h3{font-size:1.18rem;margin-bottom:0.6rem}
.case__body p{font-size:0.92rem;line-height:1.7}
.case__meta{
  margin-top:1.2rem;font-family:var(--font-mono);font-size:0.64rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--body-faint);
}
.gallery__foot{margin-top:2.4rem;text-align:center;font-size:0.92rem;color:var(--body-faint)}

/* ============================================================
   TOUR · the paired ledger
   ============================================================ */
.tour__photo{
  overflow:hidden;border-radius:26px;aspect-ratio:21/9;
  margin-bottom:clamp(2.8rem,5vw,4.5rem);box-shadow:var(--shadow-lift);
  position:relative;
}
.tour__photo img{width:100%;height:114%;object-fit:cover}
.tour__strip{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;
  margin-bottom:clamp(2.8rem,5vw,4.5rem);
}
.tour__strip figure{margin:0}
.tour__strip img{
  width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:18px;
  box-shadow:var(--shadow-soft);display:block;
}
.tour__strip figcaption{
  margin-top:0.85rem;
  font-family:var(--font-mono);font-size:0.66rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--pine);
}
@media (max-width:700px){.tour__strip{grid-template-columns:1fr;gap:1.8rem}}
.ledger{border-top:1px solid var(--hairline)}
.ledger__heads{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);
  padding:1.6rem 0 0.4rem;
}
.ledger__heads h3{
  font-family:var(--font-mono);font-weight:500;font-size:0.72rem;letter-spacing:0.24em;text-transform:uppercase;color:var(--pine);
  display:flex;align-items:center;gap:0.7rem;
}
.ledger__heads h3::before{content:"◆";color:var(--coral);font-size:0.6rem}
.ledger__row{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);
  padding:1.7rem 0;border-bottom:1px solid var(--hairline-soft);
  position:relative;
}
.ledger__row::after{
  content:"";position:absolute;top:15%;bottom:15%;left:50%;width:1px;
  background:var(--hairline-soft);transform:translateX(-50%);
}
.ledger__cell strong{display:block;font-family:var(--font-display);font-weight:480;font-size:1.12rem;color:var(--ink);margin-bottom:0.35rem}
.ledger__cell p{font-size:0.92rem;line-height:1.7;max-width:50ch}
.tour__note{
  margin-top:2.4rem;
  font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--body-faint);
  display:flex;align-items:center;gap:0.8rem;
}
.tour__note::before{content:"";width:2rem;height:1px;background:var(--teal)}

/* ============================================================
   HYGIENE TEAM
   ============================================================ */
.team__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.teammate{
  background:var(--paper);border:1px solid var(--hairline-soft);border-radius:22px;
  padding:2.2rem 2rem;
  transition:transform 0.55s var(--ease-out),box-shadow 0.55s var(--ease-out);
}
.teammate:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift)}
.teammate__photo{
  width:100%;aspect-ratio:4/5;border-radius:999px 999px 16px 16px;
  overflow:hidden;margin-bottom:1.6rem;
}
.teammate__photo img{width:100%;height:100%;object-fit:cover;object-position:center 18%}
.teammate h3{font-size:1.2rem;margin-bottom:0.3rem}
.teammate__role{
  font-family:var(--font-mono);font-size:0.64rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--teal);
  margin-bottom:1rem;
}
.teammate p{font-size:0.93rem;line-height:1.72}

/* ============================================================
   FINANCING · ink
   ============================================================ */
.financing__grid{
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(2.5rem,6vw,6rem);align-items:center;
}
.financing__copy p{margin-top:1.3rem;font-size:1rem;line-height:1.8;max-width:54ch;color:rgba(250,247,241,0.75)}
.financing__lenders{
  margin-top:2.2rem;display:flex;flex-wrap:wrap;gap:0.7rem;
}
.lender{
  font-family:var(--font-mono);font-size:0.66rem;letter-spacing:0.14em;text-transform:uppercase;
  color:rgba(250,247,241,0.85);border:1px solid var(--hairline-light);
  border-radius:999px;padding:0.5rem 1rem;
}
.lender--hot{color:var(--coral-soft);border-color:rgba(245,184,165,0.45)}
.fin-card{
  background:var(--coral);border-radius:24px;color:#FFF8F4;
  padding:clamp(1.8rem,3vw,2.6rem);
  box-shadow:0 30px 70px rgba(0,0,0,0.35);
  position:relative;overflow:hidden;
}
.fin-card::after{
  content:"";position:absolute;top:-40%;right:-25%;width:70%;aspect-ratio:1;
  border-radius:50%;background:rgba(255,255,255,0.09);
}
.fin-card__tag{font-family:var(--font-mono);font-size:0.62rem;letter-spacing:0.2em;text-transform:uppercase;color:rgba(255,248,244,0.75);margin-bottom:1rem}
.fin-card h3{color:#FFF8F4;font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.15}
.fin-card__math{
  margin:1.4rem 0 0;font-family:var(--font-mono);font-size:0.78rem;line-height:2.1;letter-spacing:0.02em;
  color:rgba(255,248,244,0.92);
  border-top:1px dashed rgba(255,248,244,0.4);padding-top:1.2rem;
}
.fin-card__math strong{font-weight:500;color:#FFF}
.fin-card p{margin-top:1.1rem;font-size:0.9rem;line-height:1.7;color:rgba(255,248,244,0.85)}
.fin-card .btn{margin-top:1.7rem;background:#FFF8F4;color:var(--coral-deep)}
.fin-card .btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,0,0,0.2)}

/* ============================================================
   INSURANCE
   ============================================================ */
.insurance__grid{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:clamp(2.5rem,6vw,6rem);
}
.insurance__copy p{margin-top:1.3rem;font-size:1rem;line-height:1.8;max-width:48ch}
.insurance__aside{
  margin-top:1.8rem;
  font-family:var(--font-mono);font-size:0.74rem;line-height:1.9;letter-spacing:0.04em;color:var(--pine);
  border-left:2px solid var(--teal);padding-left:1.1rem;
}
.pills{display:flex;flex-wrap:wrap;gap:0.7rem}
.pill{
  font-size:0.86rem;font-weight:500;color:var(--pine);
  background:var(--paper);border:1px solid var(--hairline);
  border-radius:999px;padding:0.55rem 1.15rem;
  transition:transform 0.4s var(--ease-out),background 0.3s ease,color 0.3s ease,border-color 0.3s ease;
}
.pill:hover{background:var(--ink);color:var(--porcelain);border-color:var(--ink);transform:translateY(-2px)}
.insurance__note{
  margin-top:1.8rem;font-size:0.92rem;line-height:1.75;color:var(--body-faint);max-width:52ch;
}

/* ============================================================
   CONTACT STRIP
   ============================================================ */
.reach__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.reach{
  background:var(--paper);border:1px solid var(--hairline-soft);border-radius:22px;
  padding:2.2rem 2rem;display:flex;flex-direction:column;
  transition:transform 0.55s var(--ease-out),box-shadow 0.55s var(--ease-out);
}
.reach:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift)}
.reach__label{
  font-family:var(--font-mono);font-size:0.64rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--teal);
  margin-bottom:1rem;display:flex;align-items:center;gap:0.6rem;
}
.reach__label::before{content:"◆";color:var(--coral);font-size:0.55rem}
.reach h3{font-size:1.35rem;margin-bottom:0.7rem}
.reach p{font-size:0.92rem;line-height:1.7;flex:1}
.reach__action{
  margin-top:1.6rem;align-self:flex-start;
  font-size:0.9rem;font-weight:600;color:var(--coral-deep);
  display:inline-flex;align-items:center;gap:0.45rem;
  border-bottom:1px solid rgba(198,83,47,0.35);padding-bottom:0.15rem;
  transition:gap 0.35s var(--ease-out),color 0.3s ease;
}
.reach__action:hover{gap:0.75rem;color:var(--coral)}

/* ============================================================
   CTA · minute eight
   ============================================================ */
.cta{position:relative;overflow:hidden;text-align:center}
.cta::before{
  content:"";position:absolute;left:50%;top:-32%;transform:translateX(-50%);
  width:min(120vw,1400px);aspect-ratio:2/1;
  border-radius:0 0 999px 999px;
  background:radial-gradient(ellipse at center top,rgba(43,164,145,0.16),transparent 70%);
  pointer-events:none;
}
.cta__inner{position:relative;max-width:860px;margin:0 auto;padding:0 var(--gutter)}
.cta__minute{
  font-family:var(--font-mono);font-size:0.7rem;letter-spacing:0.24em;text-transform:uppercase;
  color:var(--teal-bright);margin-bottom:1.8rem;
  display:flex;align-items:center;justify-content:center;gap:0.9rem;
}
.cta__minute::before,.cta__minute::after{content:"";width:2.2rem;height:1px;background:rgba(43,164,145,0.5)}
.cta h2{font-size:clamp(2.4rem,5.5vw,4.4rem);max-width:16ch;margin:0 auto}
.cta h2 em{font-style:italic;font-weight:400;color:var(--teal-bright)}
.cta__sub{margin:1.8rem auto 0;max-width:52ch;font-size:1.02rem;line-height:1.8;color:rgba(250,247,241,0.72)}
.cta__actions{margin-top:2.6rem;display:flex;align-items:center;justify-content:center;gap:1.1rem;flex-wrap:wrap}
.cta__meta{
  margin-top:2.4rem;font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.1em;
  color:rgba(250,247,241,0.5);
}
.cta__meta a{color:rgba(250,247,241,0.8);border-bottom:1px solid rgba(250,247,241,0.3)}
.cta__meta a:hover{color:var(--porcelain)}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{
  background:var(--ink-deepest);color:rgba(250,247,241,0.6);
  /* covers the overscroll bounce at the page floor */
  box-shadow:0 50vh 0 50vh var(--ink-deepest);
}
.footer__grid{
  max-width:var(--max);margin:0 auto;
  padding:clamp(3.5rem,6vw,5.5rem) var(--gutter) 3rem;
  display:grid;grid-template-columns:2fr 1fr 1.2fr 1fr;gap:clamp(2rem,4vw,4rem);
}
.footer .logo{color:var(--porcelain)}
.footer__tag{margin-top:1rem;font-size:0.9rem;line-height:1.7;max-width:26ch}
.footer h4{
  font-family:var(--font-mono);font-weight:500;font-size:0.64rem;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--teal-bright);margin-bottom:1.2rem;
}
.footer__list{display:flex;flex-direction:column;gap:0.55rem;font-size:0.9rem}
.footer__list a{transition:color 0.25s ease}
.footer__list a:hover{color:var(--porcelain)}
.footer__credit{margin-top:1.6rem;font-size:0.82rem}
.footer__credit a{color:var(--teal-bright);border-bottom:1px solid rgba(43,164,145,0.35)}
.footer__credit a:hover{color:var(--porcelain);border-color:var(--porcelain)}
.footer__compliance{
  border-top:1px solid rgba(250,247,241,0.1);
  max-width:var(--max);margin:0 auto;
  padding:1.6rem var(--gutter);
  display:flex;flex-wrap:wrap;gap:0.5rem 1.2rem;justify-content:center;
  font-family:var(--font-mono);font-size:0.62rem;letter-spacing:0.1em;text-transform:uppercase;
  color:rgba(250,247,241,0.45);
}
.footer__compliance .csep{color:var(--teal-bright);opacity:0.6}
.footer__bottom{
  border-top:1px solid rgba(250,247,241,0.1);
  max-width:var(--max);margin:0 auto;
  padding:1.4rem var(--gutter) 2rem;
  display:flex;flex-wrap:wrap;gap:0.6rem 2rem;justify-content:space-between;
  font-size:0.78rem;color:rgba(250,247,241,0.4);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* THE NAV COLLAPSES WHEN IT STOPS FITTING, WHICH IS NOT WHERE IT USED TO.
   The burger took over at 1020, but the full nav (seven links, the login, the
   booking button) already overflows below about 1090, so the page carried a
   horizontal scrollbar through that whole band and had shipped that way.
   Measured across 320 to 1300 in 10px steps rather than guessed: 1030 to 1090
   overflowed here, and 1030 to 1120 on the Spanish edition, whose nav labels
   are longer and which also carries the language control. 1140 clears both
   with margin, and it is ONE number on purpose: a per-edition breakpoint would
   have to be re-derived every time a nav item is added, in two places.
   Kept separate from the 1020 block below because that one is about the hero
   grid, and the two have no reason to move together. */
@media (max-width:1140px){
  .nav__links{display:none}
  .nav__login{display:none}
  .nav__burger{display:flex}
}
@media (max-width:1020px){
  .hero__grid{grid-template-columns:1fr;gap:3rem}
  .hero h1{max-width:14ch}
  .hero__media{max-width:460px}
  .hero__chip{left:0.6rem}
  .services__grid,.specials__grid,.stories__grid,.gallery__grid,.team__grid,.reach__grid{grid-template-columns:1fr 1fr}
  .membership__grid,.doctor__grid,.financing__grid,.insurance__grid,.why__grid{grid-template-columns:1fr}
  .visit__steps{grid-template-columns:1fr 1fr;gap:2.6rem 2rem;padding-top:0}
  .visit__line{display:none}
  .step__dot{position:static;width:9px;height:9px}
  .tour__photo{aspect-ratio:16/9}
}
@media (max-width:640px){
  .nav__inner{gap:0.75rem;padding:0.85rem var(--gutter)}
  .logo{font-size:1.05rem}
  .logo__mark{width:26px;height:26px}
  .logo .mono{display:none}
  .nav__cta{gap:0.4rem}
  .nav__cta .btn{padding:0.55rem 1rem;font-size:0.78rem}
  .nav__burger{padding:0.4rem}
  .services__grid,.specials__grid,.stories__grid,.gallery__grid,.team__grid,.reach__grid,.visit__steps{grid-template-columns:1fr}
  .ledger__heads{grid-template-columns:1fr;gap:0.4rem;padding-bottom:0.8rem}
  .ledger__heads h3:last-child{display:none}
  .ledger__row{grid-template-columns:1fr;gap:1.4rem}
  .ledger__row::after{display:none}
  .ledger__cell--comfort{padding-left:1.1rem;border-left:2px solid var(--mist-deep)}
  .hero h1{font-size:clamp(2.7rem,12vw,3.4rem)}
  .emergency__inner{font-size:0.78rem;gap:0.55rem}
  .emergency__hide-sm{display:none}
  .tour__photo{aspect-ratio:4/3}
  .moment{min-height:60vh}
  .footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:420px){
  .footer__grid{grid-template-columns:1fr}
  .nav__inner{gap:0.6rem}
  .logo{font-size:0.98rem;gap:0.45rem}
  .logo__mark{width:24px;height:24px}
  .nav__cta{gap:0.35rem}
  .nav__cta .btn{padding:0.55rem 0.85rem;font-size:0.76rem}
}
/* Below ~370 the wordmark plus the booking button plus the burger simply do not
   fit between the gutters, and the page took a horizontal scrollbar rather than
   the nav giving anything up. Measured, not guessed: at 320 the lockup wanted
   159px and the CTA cluster 180px inside a 320 viewport. This tier shrinks the
   three things that can shrink; nothing is hidden, because the wordmark IS the
   home link and the button IS the conversion. */
@media (max-width:380px){
  .nav__inner{gap:0.45rem;padding-left:0.85rem;padding-right:0.85rem}
  .logo{font-size:0.84rem;gap:0.34rem}
  .logo__mark{width:21px;height:21px}
  .logo .mono{display:none}
  .nav__cta .btn{padding:0.5rem 0.7rem;font-size:0.7rem}
  .nav__burger{padding:0.3rem}
  .nav__burger span{width:18px}
}

/* ============================================================
   TOUCH TARGETS · a finger is not a cursor
   The nav shrinks its controls at 640/420/380 to keep the bar from overflowing,
   which is right, and it left the burger at 28x24 and the emergency call link at
   116x23. Both are under the 44px iOS / 48dp Android floor, and the emergency
   number is the single most important thing to hit on a phone.
   The hit area is grown with an overlay rather than with padding ON PURPOSE:
   padding would re-open the nav-width problem those tiers exist to close, and
   would move the design. Nothing here changes a rendered pixel.
   ============================================================ */
@media (hover:none),(max-width:900px){
  .nav__burger,.emergency a,.reach__action,.menu__foot a{position:relative}
  /* The overlay grows the hit area VERTICALLY ONLY, and takes its width from the
     control (left:0;right:0). No min-width: on an absolutely positioned box with
     both edges anchored, a min-width wider than the control is resolved by
     ignoring `right`, so it grows rightward off screen. A first pass gave the
     burger a centred 48px and put 6px of document overflow on a 320 screen, where
     the nav is already at its limit. Every control here is comfortably over 24px
     wide already; height was the half that was failing. */
  .nav__burger::after,.emergency a::after,.reach__action::after,.menu__foot a::after{
    content:"";position:absolute;left:0;right:0;top:50%;
    transform:translateY(-50%);height:44px;
  }
  /* The booking CTA cannot take an overlay: .btn is overflow:hidden so the coral
     wipe stays inside the pill, and an overlay would be clipped with it. It takes
     real height instead. Horizontal padding is untouched, so the nav width tiers
     at 640/420/380 still hold. */
  .nav__cta .btn{min-height:44px}
}

/* ============================================================
   REDUCED MOTION · everything lands, nothing moves
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .curtain{display:none}
  html.js .emergency__dot{animation:none}
  html.js .band__track{animation:none;flex-wrap:wrap;width:auto}
  html.js [data-reveal],html.js [data-reveal-stagger]>*{opacity:1;transform:none;transition:none}
  html.js .split .l{transform:none;transition:none}
  html.js .hero__arch{clip-path:none;transition:none}
  .meter{display:none}
  .visit__line-fill{transform:scaleX(1);transition:none}
  html.js .step .step__dot{background:var(--teal)}
  *,*::before,*::after{transition-duration:0.01ms !important;animation-duration:0.01ms !important;animation-iteration-count:1 !important}
}


/* The multi-page CSS below reaches for one body tone the single-file source
   never declared, because that source does not use it. An undeclared custom
   property is invalid at computed-value time, so every one of those rules was
   silently INHERITING its parent's color instead of stepping down from it: the
   quietest possible failure, since the text stays legible and only the
   hierarchy is lost. It sits between --body (#3D5551) and --body-faint
   (#6B807B), which is the step those rules were written for. The build's token
   guard is what makes this class of bug loud from here on. */
:root{ --body-soft:#546B66; }

/* ============================================================
   LANGUAGE · the toggle and the offer
   The site has promised "Hablamos Espanol" in its footer since it was built.
   These two controls are what make that promise reachable rather than
   decorative. Set in the mono register, because the language you are reading
   is a fact about the page, the same family as a price or a licence number.
   ============================================================ */
/* ONE control, not two halves. The old pill split into a filled EN and an
   outlined ES, and flush halves read as "ENES" before the divider registers.
   A single padded link cannot produce that collision at any size. */
.langswap{
  display:inline-flex;align-items:center;gap:0.42rem;
  font-family:var(--font-mono);font-size:0.7rem;font-weight:500;
  letter-spacing:0.06em;line-height:1;white-space:nowrap;
  color:var(--ink-soft);
  padding:0.4rem 0.66rem;
  border:1px solid var(--hairline);border-radius:999px;
  flex:none;
  transition:background 0.3s ease,color 0.3s ease,border-color 0.3s ease;
}
.langswap:hover,.langswap:focus-visible{background:var(--teal);color:var(--porcelain);border-color:var(--teal)}
/* em-sized so the globe tracks the label at every breakpoint instead of
   needing its own override in each media block */
.langswap__globe{width:0.95em;height:0.95em;flex:none;opacity:0.75}
.langswap:hover .langswap__globe,.langswap:focus-visible .langswap__globe{opacity:1}

/* the mobile menu sits on ink, so the control inverts there */
.menu__lang{
  margin-top:1.4rem;opacity:0;transition:opacity 0.6s ease 0.5s;
}
.menu.is-open .menu__lang{opacity:1}
.menu__lang .langswap{border-color:rgba(250,247,241,0.28);color:rgba(250,247,241,0.82)}
.menu__lang .langswap:hover,.menu__lang .langswap:focus-visible{background:var(--coral);color:var(--porcelain);border-color:var(--coral)}

/* the portals carry it in their demonstration ribbon */
.pp-ribbon__lang{display:inline-flex;margin-left:auto}

/* The offer. Never a redirect: a Spanish-language browser is told the page
   exists and handed the link. Hidden until the script decides it applies, so a
   visitor whose browser is not Spanish never sees it at all. */
.langoffer{
  position:fixed;left:50%;bottom:1.1rem;transform:translateX(-50%);
  z-index:120;display:flex;align-items:center;gap:0.9rem;
  max-width:min(30rem,calc(100vw - 2rem));
  padding:0.7rem 0.8rem 0.7rem 1.1rem;
  background:var(--ink);color:var(--porcelain);
  border-radius:999px;box-shadow:0 12px 34px rgba(11,54,52,0.28);
  font-size:0.86rem;line-height:1.35;
  opacity:0;transition:opacity 0.5s ease,transform 0.5s var(--ease-out);
}
.langoffer[hidden]{display:none}
.langoffer.is-in{opacity:1}
.langoffer__text{margin:0}
.langoffer__text a{color:var(--coral-soft);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.langoffer__text a:hover{color:var(--porcelain)}
.langoffer__close{
  flex:none;width:1.7rem;height:1.7rem;border-radius:50%;
  display:grid;place-items:center;font-size:0.8rem;
  color:rgba(250,247,241,0.7);background:rgba(250,247,241,0.1);
  transition:background 0.3s ease,color 0.3s ease;
}
.langoffer__close:hover{background:rgba(250,247,241,0.2);color:var(--porcelain)}

@media (prefers-reduced-motion: reduce){
  .langoffer{transition:none}
}
@media (max-width:900px){
  /* the nav hides the login link at this width; the language control stays,
     because it is the only way a Spanish reader gets to their edition */
  .langswap--nav{font-size:0.66rem;padding:0.34rem 0.54rem;gap:0.34rem}
}
/* The nav control steps aside before it can push the row off screen. It hid at
   420, but the collapsed nav (lockup + booking button + burger) plus this
   control already overflows below about 490, so 430 to 480 took a horizontal
   scrollbar. Measured in 10px steps: EN overflowed 430 to 480, ES 430 to 440.
   Nothing is lost at these widths, because the mobile menu carries its own
   copy of the control, which is where a phone reader looks for it anyway. */
@media (max-width:500px){
  .langswap--nav{display:none}
}


/* ============================================================
   MULTI-PAGE ADDITIONS
   ============================================================ */

/* page head */
.page-head{
  padding:clamp(7rem,13vh,8.75rem) 0 clamp(1.2rem,2.5vw,2rem);
  background:var(--porcelain);position:relative;overflow:clip;
}
.page-head::before{
  content:"";position:absolute;inset:-160px;z-index:0;pointer-events:none;
  background-image:var(--tex-porcelain);background-size:560px 560px;background-repeat:repeat;
  opacity:0.09;animation:texDrift 80s ease-in-out infinite alternate;
}
.page-head::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  right:clamp(1rem,6vw,7rem);bottom:-12%;
  width:clamp(240px,30vw,420px);aspect-ratio:44/46;
  background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='440' height='460' viewBox='0 0 440 460' fill='none' stroke='%230B3634' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M60 460V190a160 160 0 0 1 320 0v270'/><path d='M120 460V196a100 100 0 0 1 200 0v264'/><path d='M180 460V206a40 40 0 0 1 80 0v254' stroke-dasharray='1 9'/><path d='M84 120c12-24 10-52 3-76'/><path d='M86 88c-12-5-23 0-27 9 10 4 21-1 27-9Z'/><path d='M84 64c11-7 12-18 7-25-8 4-12 16-7 25Z'/><path d='M366 84l5 11 11 5-11 5-5 11-5-11-11-5 11-5Z'/><path d='M40 320l4 9 9 4-9 4-4 9-4-9-9-4 9-4Z'/></svg>") no-repeat center/contain;
  opacity:0.12;
  animation:headFloat 11s ease-in-out infinite alternate;
}
@keyframes headFloat{from{transform:translateY(0)}to{transform:translateY(-14px)}}
.page-head > *{position:relative;z-index:1}
.page-head + .section{padding-top:clamp(2.75rem,6vh,4rem)}
@media (max-width:1000px){.page-head::after{display:none}}
.page-head h1{
  font-family:var(--font-display);font-weight:400;letter-spacing:-0.02em;
  font-size:clamp(2.6rem,6vw,4.4rem);line-height:1.04;color:var(--ink);
  max-width:18ch;
}
.page-head h1 em{font-style:italic;color:var(--pine)}
.page-head__sub{margin-top:1.4rem;max-width:56ch;font-size:1.02rem;line-height:1.75;color:var(--body-soft)}
.nav__links a[aria-current="page"]{color:var(--pine);font-weight:600}
.menu__links a[aria-current="page"]{color:var(--coral)}

/* chairs board */
.chairs__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(2.5rem,6vw,5.5rem);align-items:center}
.chairs__intro h2{font-size:var(--fs-h2);margin:1.4rem 0 1.1rem}
.chairs__intro p{max-width:46ch}
.chairs__fine{margin-top:1.4rem;font-size:0.66rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--body-faint)}
.chairs__board{
  background:var(--paper);border:1px solid var(--hairline-soft);border-radius:20px;
  padding:1.7rem 1.8rem 1.4rem;box-shadow:var(--shadow-soft);
}
.chairs__board-label{
  display:flex;align-items:center;gap:0.6rem;
  font-size:0.66rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--pine);
  padding-bottom:1rem;border-bottom:1px solid var(--hairline-soft);
}
.chairs__dot{width:8px;height:8px;border-radius:50%;background:var(--teal);animation:chairPulse 2.2s ease-in-out infinite}
@keyframes chairPulse{0%,100%{opacity:1}50%{opacity:0.35}}
html.js .emergency__dot{}
.chairs__list{list-style:none;margin:0;padding:0}
.chairs__list li{border-bottom:1px dashed var(--hairline);padding:0.95rem 0}
.chairs__list li:last-child{border-bottom:0}
.chair-slot{display:flex;align-items:baseline;gap:0.9rem;flex-wrap:wrap}
.chair-slot__time{font-family:var(--font-mono);font-size:1.06rem;color:var(--ink);white-space:nowrap}
.chair-slot__meta{flex:1;min-width:11rem;font-size:0.86rem;color:var(--body-soft)}
.chair-slot__meta strong{display:block;font-weight:600;color:var(--ink);font-size:0.9rem}
.chair-slot__ago{font-family:var(--font-mono);font-size:0.62rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--body-faint)}
.chair-slot__claim{
  font-family:var(--font-mono);font-size:0.68rem;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--coral-deep);text-decoration:none;white-space:nowrap;
  border-bottom:1px solid rgba(231,111,81,0.4);padding-bottom:2px;
}
.chair-slot__claim:hover{border-bottom-color:var(--coral-deep)}
/* Touch targets for the surfaces authored here. Same rule and same reason as the
   block in the single-file source: an overlay, so the hit area reaches 44px
   without moving anything. The claim link measured 64x22 and the menu language
   switcher 92x26. The li carries 0.95rem of padding either side, so a 44px
   overlay stays inside its own row and cannot steal the row above or below. */
@media (hover:none),(max-width:900px){
  .chair-slot__claim,.langswap,.pp-ribbon a,.pp-out{position:relative}
  .chair-slot__claim::after,.langswap::after,.pp-ribbon a::after,.pp-out::after{
    content:"";position:absolute;left:0;right:0;top:50%;
    transform:translateY(-50%);height:44px;
  }
}
.chairs__none{font-size:0.9rem;color:var(--body-soft);padding:0.95rem 0}
.chairs__day{font-family:var(--font-mono);font-size:0.62rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--body-faint);padding:0.9rem 0 0.2rem}
.chairs__loading{font-size:0.7rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--body-faint);padding:0.9rem 0}
/* 0.62rem is 9.9px. It reads as a fine-print stamp on a desktop card and as
   unreadable on a phone, and these two lines carry the freshness of the offer and
   the day it belongs to. The 0.64rem mono eyebrows elsewhere are left alone: that
   is the clinical-receipt register the whole site is set in, and 10.2px uppercase
   with this tracking still reads.
   THIS BLOCK MUST STAY BELOW BOTH BASE RULES. A media query adds no specificity,
   so when it sat above .chairs__day that later declaration simply won and the
   rule was inert while looking correct. */
@media (max-width:640px){.chair-slot__ago,.chairs__day{font-size:0.7rem}}
@media (max-width:900px){.chairs__grid{grid-template-columns:1fr;gap:2.2rem}}

/* the straight answer */
.answer__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(2.2rem,5vw,4.5rem);align-items:start;max-width:1080px;margin:0 auto}
.answer__field{margin-bottom:1.5rem}
.answer__field label{
  display:block;font-size:0.64rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--pine);
  margin-bottom:0.55rem;
}
.answer__field select{
  width:100%;appearance:none;-webkit-appearance:none;
  font-family:var(--font-mono);font-size:0.86rem;color:var(--ink);
  background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230B3634' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 1.1rem center;
  border:1px solid var(--hairline);border-radius:12px;
  padding:0.95rem 2.6rem 0.95rem 1.1rem;cursor:pointer;
}
.answer__field select:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
/* iOS Safari ZOOMS THE PAGE when a form control under 16px takes focus, and it does
   not zoom back out. These two selects are the whole instrument on this page, so
   the cost of the smaller type is that the visitor's first interaction leaves them
   scrolled sideways on a page that fit a moment earlier. 16px on phones. */
@media (max-width:900px){.answer__field select{font-size:16px}}
.answer__note{font-size:0.88rem;line-height:1.7;color:var(--body-soft);max-width:44ch}
.answer__note--promise{
  margin-top:0.9rem;padding-top:0.9rem;border-top:1px solid var(--hairline-soft);
  font-family:var(--font-display);font-style:italic;color:var(--pine);font-size:0.98rem;
}
.answer__receipt{
  background:var(--paper);border:1px solid var(--hairline-soft);border-radius:6px 6px 18px 18px;
  padding:1.9rem 1.9rem 1.6rem;box-shadow:var(--shadow-lift);
  font-family:var(--font-mono);position:relative;
}
.answer__receipt::before{
  content:"";position:absolute;top:-1px;left:0;right:0;height:10px;
  background-image:radial-gradient(circle at 6px -2px, transparent 6px, var(--porcelain) 6.5px);
  background-size:14px 10px;background-repeat:repeat-x;
}
.receipt__brand{display:flex;justify-content:space-between;font-size:0.64rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--pine);padding-bottom:1.1rem;border-bottom:1px solid var(--hairline)}
.receipt__line{display:flex;justify-content:space-between;gap:1.2rem;align-items:baseline;padding:0.8rem 0;border-bottom:1px dashed var(--hairline-soft);font-size:0.82rem;color:var(--body-soft)}
.receipt__line strong{color:var(--ink);font-weight:500}
.receipt__line .num{white-space:nowrap;color:var(--ink)}
.receipt__line--total{border-bottom:0;padding-top:1rem}
.receipt__line--total strong{font-size:0.94rem}
.receipt__line--total .num{font-size:1.28rem;color:var(--coral-deep)}
.receipt__caveat{font-size:0.7rem;line-height:1.65;color:var(--body-faint);margin-top:0.5rem}
.receipt__caveat + .receipt__caveat{margin-top:0.35rem}
.receipt__foot{
  margin-top:1.2rem;padding-top:1rem;border-top:1px solid var(--hairline);
  font-size:0.7rem;line-height:1.7;letter-spacing:0.04em;color:var(--pine);text-transform:uppercase;
}
@media (max-width:900px){.answer__grid{grid-template-columns:1fr}}

/* answer teaser (home, on ink) */
.tease__grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(2.5rem,6vw,5.5rem);align-items:center}
.tease__sub{margin-top:1.1rem;max-width:48ch;line-height:1.75}
.btn-quiet--ink{border-color:rgba(250,247,241,0.35);color:var(--porcelain)}
.btn-quiet--ink:hover{border-color:var(--porcelain)}
.tease__receipt{
  background:var(--porcelain);border-radius:6px 6px 16px 16px;padding:1.7rem 1.7rem 1.4rem;
  color:var(--ink);box-shadow:0 24px 60px rgba(0,0,0,0.35);
  transform:rotate(1.2deg);
}
.tease__row{display:flex;justify-content:space-between;gap:1rem;font-size:0.74rem;padding:0.6rem 0;border-bottom:1px dashed var(--hairline)}
.tease__row span:last-child{white-space:nowrap}
.tease__row--total{border-bottom:0;font-size:0.86rem;color:var(--coral-deep)}
.tease__foot{font-size:0.6rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--body-faint);margin-top:0.9rem}
@media (max-width:900px){.tease__grid{grid-template-columns:1fr}}

/* services priced rows */
.svc-rows{max-width:840px;margin:0 auto}
.svc-row{
  display:flex;align-items:baseline;gap:1rem;
  padding:1.15rem 0.4rem;border-bottom:1px solid var(--hairline-soft);
  text-decoration:none;transition:background 0.35s ease,padding 0.35s ease;
}
.svc-row:hover{background:rgba(23,126,112,0.05);padding-left:0.9rem}
.svc-row__name{font-family:var(--font-display);font-size:1.12rem;color:var(--ink);white-space:nowrap}
.svc-row__dots{flex:1;border-bottom:1px dotted var(--hairline);transform:translateY(-4px)}
.svc-row__price{font-size:0.84rem;color:var(--pine);white-space:nowrap}
.svc-row__go{color:var(--coral-deep);font-size:0.9rem}
.svc-rows__foot{margin-top:2rem;text-align:center;font-size:0.92rem;color:var(--body-faint)}
.svc-rows__foot a{color:var(--coral-deep);text-decoration:none}
@media (max-width:640px){
  .svc-row{flex-wrap:wrap;gap:0.3rem 1rem}
  .svc-row__name{white-space:normal;width:100%}
  .svc-row__dots{display:none}
}

/* plan math */
.math__grid{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;max-width:920px;margin:0 auto}
.math__card{background:var(--paper);border:1px solid var(--hairline-soft);border-radius:20px;padding:2rem 2rem 1.7rem;box-shadow:var(--shadow-soft)}
.math__card--plan{border-color:rgba(23,126,112,0.35);position:relative}
.math__label{font-size:0.64rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--pine);margin-bottom:1.1rem}
.math__lines{list-style:none;margin:0;padding:0}
.math__lines li{display:flex;justify-content:space-between;gap:1rem;font-size:0.8rem;color:var(--body-soft);padding:0.65rem 0;border-bottom:1px dashed var(--hairline-soft)}
.math__lines li span:last-child{white-space:nowrap;color:var(--ink)}
.math__lines .math__total{border-bottom:0;padding-top:0.9rem;font-size:0.88rem}
.math__lines .math__total span:last-child{color:var(--coral-deep);font-size:1.05rem}
.math__kicker{margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--hairline-soft);font-size:0.9rem;line-height:1.65;color:var(--body-soft)}
.math__kicker .mono{color:var(--pine)}
.math__foot{margin-top:2.2rem;text-align:center;font-size:0.92rem;color:var(--body-faint)}
.math__foot a{color:var(--coral-deep);text-decoration:none}
@media (max-width:760px){.math__grid{grid-template-columns:1fr}}

/* first visit prep */
.prep__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;max-width:1020px;margin:0 auto}
.prep{background:var(--paper);border:1px solid var(--hairline-soft);border-radius:20px;padding:1.9rem 1.8rem}
.prep__num{display:block;font-size:0.68rem;letter-spacing:0.2em;color:var(--coral-deep);margin-bottom:0.9rem}
.prep h3{font-size:1.12rem;margin-bottom:0.5rem}
.prep p{font-size:0.9rem;line-height:1.7}
.prep__foot{margin-top:2rem;text-align:center;font-size:0.92rem;color:var(--body-faint)}
.prep__foot a{color:var(--coral-deep);text-decoration:none}
@media (max-width:800px){.prep__grid{grid-template-columns:1fr}}

/* hours + address */
.hours__grid{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;max-width:920px;margin:0 auto}
.hours__card{background:var(--paper);border:1px solid var(--hairline-soft);border-radius:20px;padding:2.1rem 2.1rem 1.9rem;box-shadow:var(--shadow-soft)}
.hours__card h2{font-family:var(--font-display)}
.hours__card h2 em{font-style:italic;color:var(--pine)}
.hours__list{list-style:none;margin:0 0 1.1rem;padding:0}
.hours__list li{display:flex;justify-content:space-between;font-size:0.8rem;color:var(--body-soft);padding:0.6rem 0;border-bottom:1px dashed var(--hairline-soft)}
.hours__list li span:last-child{color:var(--ink)}
.hours__note{font-size:0.88rem;line-height:1.7;color:var(--body-faint)}
.hours__addr{font-style:normal;font-size:1rem;line-height:1.7;color:var(--ink);margin-bottom:1rem}
.hours__actions{margin-top:1.1rem;line-height:2.4}
.hours__photo{max-width:920px;margin:1.6rem auto 0}
.hours__photo img{
  display:block;width:100%;aspect-ratio:16/8.5;object-fit:cover;object-position:center 22%;
  border-radius:20px;box-shadow:var(--shadow-soft);
}
.hours__photo figcaption{
  margin-top:0.8rem;font-size:0.64rem;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--body-faint);text-align:center;
}
@media (max-width:760px){
  .hours__grid{grid-template-columns:1fr}
  /* the source is 3:2, so a phone shows the whole facade and the sign rather than a
     letterbox slice of it. The desktop 16:8.5 band is a composition choice that only
     works when the box is wide. */
  .hours__photo img{aspect-ratio:3/2;object-position:center 50%;border-radius:16px}
}

/* the mill, office-only */
.mill__grid{
  display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);
  gap:clamp(2.5rem,6vw,5.5rem);align-items:center;
}
.mill__photo{position:relative;border-radius:999px 999px 20px 20px;overflow:hidden;background:var(--mist-deep)}
.mill__photo img{display:block;width:100%;aspect-ratio:4/4.6;object-fit:cover}
.mill__photo figcaption{
  position:absolute;left:1rem;bottom:1rem;
  background:rgba(11,54,52,0.82);color:var(--porcelain);
  font-size:0.62rem;letter-spacing:0.16em;text-transform:uppercase;
  padding:0.5rem 0.85rem;border-radius:999px;
}
.mill__copy .eyebrow{margin-bottom:1.3rem}
.mill__copy p{margin-top:1.2rem;max-width:52ch}
.mill__note{
  font-size:0.72rem;line-height:1.8;letter-spacing:0.06em;color:var(--body-faint);
  border-left:2px solid var(--coral);padding-left:1rem;
}
@media (max-width:900px){.mill__grid{grid-template-columns:1fr}.mill__photo img{aspect-ratio:3/2}}