/* ==========================================================================
   JD Aesthetics — Centereach, NY
   Art direction: clinical restraint. Warm bone paper, near-black ink,
   one bronze accent used as hairline + mark only. Type-led, photo-sparing
   (the practice has three usable studio frames — we lean on typography
   rather than pad the page with stock).
   ========================================================================== */

:root {
  /* ---- layer 1: primitives ------------------------------------------------
     Raw values. Nothing outside this block should reference them directly. */
  --c-bone-50:    #FFFDF9;
  --c-bone-100:   #F6F2EA;
  --c-bone-200:   #EFE9DD;
  --c-bone-300:   #E8E1D4;
  --c-bone-400:   #DDD5C6;
  --c-champagne:  #E5D9C4;   /* the practice's own accent */
  --c-champagne-rgb: 229 217 196;
  --c-bronze-600: #7E603B;   /* deep sibling of the champagne, 5.2:1 on bone-100 */
  --c-clay-600:   #6B6559;   /* 5.3:1 on bone-100 — AA at label sizes */
  --c-clay-800:   #4A463C;
  --c-ink-900:    #17150F;
  /* channel forms of the two colours that need alpha variants, so the
     translucent values stay tied to the palette instead of duplicating it */
  --c-ink-900-rgb:  23 21 15;
  --c-bone-100-rgb: 246 242 234;
  --c-grey-500:   #8E9095;   /* the grey seamless in their photography */
  --c-danger:     #9C2B1E;

  --dur-1: .15s;   /* colour / opacity        */
  --dur-2: .25s;   /* small UI                */
  --dur-3: .35s;   /* medium UI               */
  --dur-4: .7s;    /* section reveal          */
  --ease-out:  cubic-bezier(.2, .7, .3, 1);
  --ease-std:  ease;

  --z-mbar:    80;
  --z-header:  90;
  --z-dialog: 120;
  --z-lightbox: 140;
  --z-skip:   200;
  --z-local-base:   1;   /* in-section stacking, not the global ladder */
  --z-local-raised: 2;

  /* ---- layer 2: semantic --------------------------------------------------
     What the value means. Components reference these, never the primitives. */
  --ink:        var(--c-ink-900);
  --ink-soft:   var(--c-clay-800);
  --ink-mute:   var(--c-clay-600);
  --paper:      var(--c-bone-100);
  --paper-warm: var(--c-bone-200);
  --surface:    var(--c-bone-50);
  --line:       var(--c-bone-400);
  --line-soft:  var(--c-bone-300);
  --accent:     var(--c-bronze-600);
  --accent-lt:  var(--c-champagne);
  --studio:     var(--c-grey-500);
  --danger:     var(--c-danger);

  --font-display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --font-sans: "Jost", "Futura", "Avenir Next", -apple-system, sans-serif;

  --step--1: clamp(0.78rem, 0.76rem + 0.1vw, 0.84rem);
  --step-0:  clamp(1.0rem, 0.97rem + 0.16vw, 1.09rem);
  --step-1:  clamp(1.2rem, 1.12rem + 0.4vw, 1.44rem);
  --step-2:  clamp(1.55rem, 1.35rem + 1.0vw, 2.2rem);
  --step-3:  clamp(2.1rem, 1.6rem + 2.4vw, 3.6rem);
  /* display sits clear of the ladder at every width so something always
     reads as display, not just as "the biggest heading" */
  --step-4:  clamp(3.4rem, 1.9rem + 6.2vw, 6.4rem);

  --gutter: clamp(1.25rem, 5vw, 5.5rem);
  --rhythm: clamp(4rem, 9vw, 8.5rem);
  --maxw: 1420px;

  /* ---- layer 3: component -------------------------------------------------
     Per-component decisions, so a component can move without touching the
     semantic layer. */
  --btn-bg:        var(--ink);
  --btn-fg:        var(--paper);
  --rule-hairline: var(--line-soft);
  --rule-strong:   var(--line);
  --field-bg:      var(--paper);
  --field-border:  var(--line);
  --marker:        var(--accent);   /* the row hairline that draws in on hover */
  --social-bg:     var(--paper);
  --social-fg:     var(--ink);
  --social-bg-hover: var(--accent-lt);
}

/* The site commits to one light treatment on purpose. Declaring it stops the
   UA inverting form controls for dark-OS users — the booking dialog inputs and
   the contact form were the visible casualties. */
html { color-scheme: light; }

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1.1em; max-width: 62ch; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

::selection { background: var(--ink); color: var(--paper); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- primitives ----------------------------------------------------------- */

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

.eyebrow {
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-weight: 500;
  color: var(--ink-mute);
  margin: 0 0 1.4rem;
  display: block;
}
.eyebrow--accent { color: var(--accent); }

.lede { font-size: var(--step-1); line-height: 1.5; color: var(--ink-soft); max-width: 46ch; }

.rule { border: 0; border-top: 1px solid var(--rule-strong); margin: 0; }

.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--paper);
  padding: .8rem 1.2rem; z-index: var(--z-skip); font-size: var(--step--1);
  text-transform: uppercase; letter-spacing: .14em;
}
.skip:focus { left: var(--gutter); top: .6rem; }

/* --- buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 500;
  padding: 1.05rem 1.9rem;
  border: 1px solid var(--btn-bg);
  background: var(--btn-bg);
  color: var(--btn-fg);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-3) var(--ease-std), color var(--dur-3) var(--ease-std), border-color var(--dur-3) var(--ease-std);
}
.btn:hover { background: transparent; color: var(--ink); }

.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }

.btn--onDark { border-color: var(--paper); background: var(--paper); color: var(--ink); }
.btn--onDark:hover { background: transparent; color: var(--paper); }

.btn--sm { padding: .7rem 1.25rem; letter-spacing: .16em; }

/* underline link with a bronze hairline that draws in */
.ulink {
  text-decoration: none;
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 500;
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--line);
  transition: border-color var(--dur-3) var(--ease-std), color var(--dur-3) var(--ease-std);
  display: inline-block;
}
.ulink:hover { border-color: var(--accent); color: var(--accent); }

/* --- header --------------------------------------------------------------- */

.hdr {
  position: sticky; top: 0; z-index: var(--z-header);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-3) var(--ease-std), background var(--dur-3) var(--ease-std);
}
.hdr[data-scrolled="true"] { border-bottom-color: var(--line-soft); }

.hdr__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 84px;
}

/* The practice's own JD monogram lockup, trimmed to its bounding box. */
.wordmark { display: inline-flex; align-items: center; text-decoration: none; }
.wordmark img { height: 50px; width: auto; }
@media (max-width: 560px) { .wordmark img { height: 42px; } }

.nav { display: flex; align-items: center; gap: clamp(1.2rem, 2.4vw, 2.4rem); }
.nav a {
  text-decoration: none;
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: .17em;
  font-weight: 500;
  color: var(--ink-soft);
  position: relative;
  padding: .2rem 0;
  transition: color var(--dur-2) var(--ease-std);
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px; background: var(--marker);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-3) var(--ease-out);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }

.nav__cta { margin-left: .4rem; }

.burger {
  display: none; background: none; border: 0; cursor: pointer;
  padding: .6rem; margin-right: -.6rem;
}
.burger span {
  display: block; width: 24px; height: 1px; background: var(--ink);
  transition: transform var(--dur-3) var(--ease-std), opacity var(--dur-1) var(--ease-std);
}
.burger span + span { margin-top: 6px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  .burger { display: block; }
  .nav {
    position: fixed; inset: 84px 0 auto 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--line);
    padding: 1rem var(--gutter) 2rem;
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: opacity var(--dur-2) var(--ease-std), transform var(--dur-2) var(--ease-std);
  }
  .nav[data-open="true"] { opacity: 1; transform: none; pointer-events: auto; }
  .nav a { font-size: var(--step-0); padding: 1rem 0; width: 100%; border-bottom: 1px solid var(--rule-hairline); }
  .nav a::after { display: none; }
  .nav__cta { margin: 1.4rem 0 0; width: 100%; justify-content: center; }
}

/* --- hero ----------------------------------------------------------------- */

.hero { position: relative; background: var(--studio); overflow: hidden; }
.hero__media { position: absolute; inset: 0; }
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* She is composited at full size in the asset now, so no CSS zoom — the
     browser is no longer scaling a small crop up. */
  object-position: 62% 28%;
}
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg,
    rgb(var(--c-ink-900-rgb) / .80) 0%, rgb(var(--c-ink-900-rgb) / .62) 34%,
    rgb(var(--c-ink-900-rgb) / .20) 58%, rgb(var(--c-ink-900-rgb) / 0) 76%);
}
.hero__in {
  /* local stacking only — sits above .hero__media, not on the global ladder */
  position: relative; z-index: var(--z-local-base);
  min-height: clamp(560px, 84svh, 820px);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-block: clamp(5rem, 12vh, 8rem) clamp(2.4rem, 5vh, 4rem);
  color: var(--paper);
}
.hero .eyebrow { color: var(--accent-lt); margin-bottom: 1.8rem; }
.hero h1 {
  font-size: var(--step-4);
  line-height: .96;
  max-width: 15ch;
  margin-bottom: 1.8rem;
}
.hero__sub {
  font-size: var(--step-1); line-height: 1.5;
  color: rgb(var(--c-bone-100-rgb) / .86); max-width: 44ch; margin-bottom: 2.4rem;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: .9rem 1.1rem; align-items: center; }
.hero__actions .ulink { color: var(--paper); border-color: rgb(var(--c-bone-100-rgb) / .4); }
.hero__actions .ulink:hover { color: var(--accent-lt); border-color: var(--accent-lt); }

/* Below the nav breakpoint the hero stays a full-bleed overlay — text sits
   on the photo like desktop — but the crop goes portrait so a narrow window
   doesn't shrink her to a sliver, and the bottom gradient runs harder so the
   type never fights the photograph for contrast.

   This MUST use the same 900px breakpoint as the burger and the sticky action
   bar (see git history: disagreeing breakpoints broke the tablet hero). */
@media (max-width: 900px) {
  .hero { background: var(--ink); }
  .hero__media img {
    aspect-ratio: 3 / 4;
    object-position: 68% 4%;
  }
  .hero__media::after {
    background: linear-gradient(180deg,
      rgb(var(--c-ink-900-rgb) / 0) 38%, rgb(var(--c-ink-900-rgb) / .58) 66%, rgb(var(--c-ink-900-rgb) / .92) 100%);
  }
  .hero__in {
    min-height: clamp(520px, 92svh, 760px);
    padding-block: clamp(4rem, 10vh, 6rem) 2.4rem;
  }
  .hero h1 { max-width: none; font-size: var(--step-4); }
  .hero__sub { max-width: none; font-size: var(--step-0); }
}
@media (max-width: 560px) {
  .hero__media img { aspect-ratio: 3 / 4; object-position: 74% 2%; }
  .hero h1 { font-size: var(--step-3); }
}

/* --- generic section ------------------------------------------------------ */

.sec { padding-block: var(--rhythm); }
.sec--tight { padding-block: calc(var(--rhythm) * .62); }
.sec--dark { background: var(--ink); color: var(--paper); }
.sec--dark .eyebrow { color: var(--accent-lt); }
.sec--dark .lede { color: rgb(var(--c-bone-100-rgb) / .72); }
.sec--dark .rule { border-color: rgb(var(--c-bone-100-rgb) / .16); }
.sec--warm { background: var(--paper-warm); }

/* asymmetric two-column: label rail + content */
.rail {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
@media (max-width: 860px) { .rail { grid-template-columns: 1fr; gap: 2rem; } }

.sechead h2 { font-size: var(--step-3); max-width: 18ch; }
.sechead__note { margin-top: 1.4rem; font-size: var(--step--1); color: var(--ink-mute); max-width: 34ch; }

/* Tablet: once .rail drops to a single column the heading is short and the
   note sits under it, leaving the right half of the row empty. Set the two
   side by side instead — headline beside copy, not above it. */
@media (min-width: 620px) and (max-width: 860px) {
  .sechead {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 2.75rem);
    align-items: start;
  }
  .sechead h2 { max-width: none; }
  .sechead__note { margin-top: .35rem; max-width: none; }
}

/* --- treatment list (editorial rows, not cards) --------------------------- */

.tgroup + .tgroup { margin-top: clamp(2.6rem, 5vw, 4rem); }
.tgroup__h {
  display: flex; align-items: baseline; gap: 1rem;
  font-size: var(--step--1); text-transform: uppercase; letter-spacing: .2em;
  color: var(--accent); font-weight: 500;
  padding-bottom: .9rem; border-bottom: 1px solid var(--line);
  margin-bottom: .2rem;
}
.tgroup__h span:last-child { margin-left: auto; color: var(--ink-mute); letter-spacing: .12em; }

.trow {
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .4rem 2rem;
  align-items: baseline;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--rule-hairline);
  text-decoration: none;
  position: relative;
}
button.trow { cursor: pointer; }
button.trow::before {
  content: ""; position: absolute; left: 0; top: 50%; width: .55rem; height: 1px;
  background: var(--marker);
  transform: translateY(-50%) scaleX(0); transform-origin: left;
  transition: transform var(--dur-3) var(--ease-out);
}
button.trow:hover::before { transform: translateY(-50%) scaleX(1); }
/* the shift is a transform on the text, not padding on the row — the price
   column stays put and nothing relayouts on hover */
button.trow .trow__name,
button.trow .trow__meta,
button.trow .trow__tags {
  transition: transform var(--dur-3) var(--ease-out);
}
button.trow:hover .trow__name,
button.trow:hover .trow__meta,
button.trow:hover .trow__tags { transform: translateX(.9rem); }
.trow__name { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.15; }
.trow__price { font-size: var(--step--1); letter-spacing: .08em; white-space: nowrap; color: var(--ink); font-variant-numeric: tabular-nums; }
.trow__meta {
  grid-column: 1 / -1;
  font-size: var(--step--1); color: var(--ink-mute);
  max-width: 68ch; line-height: 1.6;
}
@media (max-width: 560px) {
  .trow { grid-template-columns: 1fr; }
  .trow__price { color: var(--accent); }
}

/* --- statement (big type moment) ------------------------------------------ */

.statement p, .statement h2 {
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1.12;
  letter-spacing: -0.015em;
  max-width: 24ch;
}
.statement__foot {
  margin-top: clamp(2rem, 4vw, 3rem);
  display: flex; flex-wrap: wrap; gap: 1.4rem 2.6rem; align-items: center;
}

/* --- founder -------------------------------------------------------------- */

.founder { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); align-items: end; }
.founder__fig { margin: 0; position: relative; }
.founder__fig img { width: 100%; filter: grayscale(1) contrast(1.04); }
.founder__fig figcaption {
  margin-top: 1rem; font-size: var(--step--1); letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-mute);
}
.founder__body { padding-bottom: clamp(0rem, 3vw, 2.5rem); }
.founder__body h2 { font-size: var(--step-3); margin-bottom: 1.6rem; max-width: 16ch; }
.terms { list-style: none; margin: 2rem 0 0; padding: 0; border-top: 1px solid var(--rule-strong); }
.terms li {
  display: grid; grid-template-columns: 9.5rem 1fr; gap: 1.4rem;
  padding: .95rem 0; border-bottom: 1px solid var(--rule-hairline);
  font-size: var(--step--1);
}
.terms dt, .terms b { text-transform: uppercase; letter-spacing: .15em; color: var(--ink-mute); font-weight: 500; }
.terms span:last-child { color: var(--ink-soft); font-size: var(--step-0); }
@media (max-width: 860px) {
  .founder { grid-template-columns: 1fr; }
  .founder__fig { max-width: 340px; }
  .terms li { grid-template-columns: 1fr; gap: .2rem; }
}

/* --- reviews -------------------------------------------------------------- */

.score { display: flex; align-items: flex-start; gap: clamp(1.4rem, 3vw, 2.6rem); flex-wrap: wrap; }
.score__num {
  font-variant-numeric: tabular-nums;
  font-family: var(--font-display);
  font-size: clamp(5rem, 14vw, 11rem);
  line-height: .8; letter-spacing: -0.04em;
}
.score__side { padding-top: .6rem; }
.stars { display: flex; gap: .3rem; margin-bottom: .8rem; }
.stars svg { width: 17px; height: 17px; fill: var(--accent-lt); }
.sec--dark .score__side p { color: rgb(var(--c-bone-100-rgb) / .72); }

.themes { list-style: none; margin: 0; padding: 0; }
.themes li { padding: 1.15rem 0; border-top: 1px solid rgb(var(--c-bone-100-rgb) / .16); }
.themes li:last-child { border-bottom: 1px solid rgb(var(--c-bone-100-rgb) / .16); }
.themes b {
  display: block; font-family: var(--font-display); font-weight: 400;
  font-size: var(--step-1); margin-bottom: .25rem;
}
.themes span { color: rgb(var(--c-bone-100-rgb) / .66); font-size: var(--step--1); line-height: 1.6; }

/* --- steps ---------------------------------------------------------------- */

.steps { counter-reset: s; list-style: none; margin: 0; padding: 0; }
.steps li {
  counter-increment: s;
  display: grid; grid-template-columns: 4.5rem 1fr; gap: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(1.6rem, 3vw, 2.2rem) 0;
  border-top: 1px solid var(--rule-strong);
}
.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps li::before {
  content: counter(s, decimal-leading-zero);
  font-family: var(--font-display); font-size: var(--step-2);
  color: var(--accent); line-height: 1;
}
.sec--dark .steps li::before { color: var(--accent-lt); }
.steps h3 { font-size: var(--step-1); margin-bottom: .5rem; }
.steps p { color: var(--ink-soft); font-size: var(--step-0); }
@media (max-width: 560px) { .steps li { grid-template-columns: 1fr; gap: .6rem; } }

/* --- visit ---------------------------------------------------------------- */

.visit { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (max-width: 860px) { .visit { grid-template-columns: 1fr; } }

.dl { margin: 0; }
.dl div { padding: 1.1rem 0; border-bottom: 1px solid var(--rule-hairline); }
.dl div:first-child { border-top: 1px solid var(--rule-strong); }
.dl dt {
  font-size: var(--step--1); text-transform: uppercase; letter-spacing: .16em;
  color: var(--ink-mute); margin-bottom: .35rem;
}
.dl dd { margin: 0; font-size: var(--step-0); }
.dl a { text-decoration: none; border-bottom: 1px solid var(--line); }
.dl a:hover { border-bottom-color: var(--accent); color: var(--accent); }

.map {
  border: 1px solid var(--line); filter: grayscale(1) contrast(1.05);
  width: 100%; aspect-ratio: 16 / 11; background: var(--paper-warm);
}
@media (max-width: 560px) { .map { aspect-ratio: 4 / 3; } }

.callout {
  border-left: 2px solid var(--accent);
  padding: .2rem 0 .2rem 1.3rem;
  font-size: var(--step--1);
  color: var(--ink-soft);
  margin-top: 1.8rem;
}

/* --- FAQ / accordion ------------------------------------------------------ */

.faq { border-top: 1px solid var(--rule-strong); }
.faq details { border-bottom: 1px solid var(--rule-hairline); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: baseline; justify-content: space-between; gap: 2rem;
  padding: 1.5rem 0;
  font-family: var(--font-display); font-size: var(--step-1); line-height: 1.25;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 12px; height: 12px; margin-top: .35rem;
  background:
    linear-gradient(var(--ink), var(--ink)) center/12px 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) center/1px 12px no-repeat;
  transition: transform var(--dur-3) var(--ease-std);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details[open] summary { color: var(--accent); }
.faq__body { padding: 0 0 1.7rem; max-width: 68ch; color: var(--ink-soft); }

/* --- page head (interior pages) ------------------------------------------- */

.phead { padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(2.5rem, 5vw, 4rem); border-bottom: 1px solid var(--line); }
.phead h1 { font-size: var(--step-4); line-height: .98; max-width: 14ch; margin-bottom: 1.6rem; }
.phead .lede { max-width: 52ch; }

.crumbs { font-size: var(--step--1); text-transform: uppercase; letter-spacing: .18em; color: var(--ink-mute); margin-bottom: 2rem; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--accent); }

/* --- footer --------------------------------------------------------------- */

.ftr { background: var(--ink); color: var(--paper); padding-block: clamp(3.5rem, 7vw, 6rem) 2.5rem; }
.ftr__top { display: grid; grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2fr)); gap: 2.5rem clamp(1.5rem, 4vw, 3.5rem); }
.ftr h2 { font-size: var(--step-2); max-width: 14ch; margin-bottom: 1.5rem; }
.ftr h3 {
  font-family: var(--font-sans); font-size: var(--step--1); text-transform: uppercase;
  letter-spacing: .2em; color: rgb(var(--c-bone-100-rgb) / .5); margin-bottom: 1.1rem; font-weight: 500;
}
.ftr ul { list-style: none; margin: 0; padding: 0; }
.ftr li { margin-bottom: .7rem; }
.ftr a { text-decoration: none; color: rgb(var(--c-bone-100-rgb) / .82); transition: color var(--dur-2) var(--ease-std); }
.ftr a:hover { color: var(--accent-lt); }
.ftr__bottom {
  margin-top: clamp(3rem, 6vw, 5rem); padding-top: 1.6rem;
  border-top: 1px solid rgb(var(--c-bone-100-rgb) / .15);
  display: flex; flex-wrap: wrap; gap: .8rem 2rem; justify-content: space-between;
  font-size: var(--step--1); color: rgb(var(--c-bone-100-rgb) / .5);
}
.ftr__disclaimer { max-width: 58ch; margin-top: 1.2rem; font-size: var(--step--1); color: rgb(var(--c-bone-100-rgb) / .45); line-height: 1.6; }
@media (max-width: 860px) { .ftr__top { grid-template-columns: 1fr 1fr; } .ftr h2 { grid-column: 1 / -1; } }

/* --- mobile sticky action bar --------------------------------------------- */

.mbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-mbar);
  display: none; gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--rule-strong);
  padding-bottom: env(safe-area-inset-bottom);
}
.mbar a, .mbar button {
  flex: 1; border: 0; cursor: pointer;
  background: var(--paper); color: var(--ink);
  font-family: var(--font-sans); font-size: var(--step--1);
  text-transform: uppercase; letter-spacing: .16em; font-weight: 500;
  padding: 1.05rem .5rem; text-align: center; text-decoration: none;
  min-height: 52px; display: flex; align-items: center; justify-content: center;
}
.mbar button { background: var(--ink); color: var(--paper); }
/* Same 900px breakpoint as the burger and the stacked hero — these three
   define "mobile chrome" together and must not drift apart. */
@media (max-width: 900px) {
  .mbar { display: flex; }
  body { padding-bottom: 54px; }
}

/* --- booking dialog ------------------------------------------------------- */

.bk[hidden] { display: none; }
.bk {
  position: fixed; inset: 0; z-index: var(--z-dialog);
  display: flex; align-items: flex-end; justify-content: center;
  background: rgb(var(--c-ink-900-rgb) / .55);
  backdrop-filter: blur(3px);
  animation: fade var(--dur-2) var(--ease-std);
}
@media (min-width: 760px) { .bk { align-items: center; padding: 1.5rem; } }
@keyframes fade { from { opacity: 0; } }

.bk__panel {
  background: var(--surface);
  width: min(720px, 100%);
  max-height: min(92svh, 860px);
  display: flex; flex-direction: column;
  border: 1px solid var(--line);
  animation: rise .35s var(--ease-out);
}
@keyframes rise { from { transform: translateY(18px); opacity: 0; } }

.bk__hd {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 1.4rem clamp(1.2rem, 3vw, 2.2rem) 1.1rem;
  border-bottom: 1px solid var(--rule-hairline);
}
.bk__hd h2 { font-size: var(--step-2); }
.bk__step { font-size: var(--step--1); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-mute); margin-top: .4rem; display: block; }
.bk__x { background: none; border: 0; cursor: pointer; font-size: var(--step-2); line-height: 1; padding: .3rem .5rem; margin: -.3rem -.5rem 0 0; color: var(--ink-mute); }
.bk__x:hover { color: var(--ink); }

.bk__body { overflow-y: auto; padding: clamp(1.2rem, 3vw, 2rem) clamp(1.2rem, 3vw, 2.2rem); flex: 1; }
.bk__ft {
  border-top: 1px solid var(--line-soft);
  padding: 1rem clamp(1.2rem, 3vw, 2.2rem);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: var(--paper-warm);
}
.bk__ft small { font-size: var(--step--1); color: var(--ink-mute); line-height: 1.4; }

.bk__prog { display: flex; gap: 4px; padding: 0 clamp(1.2rem, 3vw, 2.2rem) 0; }
.bk__prog i { flex: 1; height: 2px; background: var(--line); transition: background var(--dur-3) var(--ease-std); }
.bk__prog i[data-on] { background: var(--accent); }

.opt {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: none; border: 1px solid var(--line); font: inherit; color: inherit;
  padding: .95rem 1.1rem; margin-bottom: .55rem;
  transition: border-color var(--dur-1) var(--ease-std), background var(--dur-1) var(--ease-std);
}
.opt:hover { border-color: var(--ink); background: var(--paper); }
.opt[aria-pressed="true"] { border-color: var(--accent); background: var(--paper-warm); }
.opt__top { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.opt__name { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.2; }
.opt__price { font-size: var(--step--1); white-space: nowrap; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.opt__meta { font-size: var(--step--1); color: var(--ink-mute); margin-top: .2rem; }

.bk__catlabel {
  font-size: var(--step--1); text-transform: uppercase; letter-spacing: .2em;
  color: var(--accent); margin: 1.6rem 0 .8rem;
}
.bk__catlabel:first-child { margin-top: 0; }

.days { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .8rem; margin-bottom: 1.2rem; scrollbar-width: thin; }
.day {
  flex: none; cursor: pointer; background: none; border: 1px solid var(--line);
  font: inherit; color: inherit; padding: .7rem .9rem; min-width: 74px; text-align: center;
  transition: border-color var(--dur-1) var(--ease-std), background var(--dur-1) var(--ease-std);
}
.day:hover { border-color: var(--ink); }
.day[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.day small { display: block; font-size: var(--step--1); text-transform: uppercase; letter-spacing: .14em; opacity: .7; }
.day b { display: block; font-family: var(--font-display); font-weight: 400; font-size: var(--step-1); line-height: 1.3; }

.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .5rem; }
.slot {
  cursor: pointer; background: none; border: 1px solid var(--line); font: inherit; color: inherit;
  padding: .7rem .4rem; text-align: center; font-size: var(--step--1); letter-spacing: .06em;
  transition: border-color var(--dur-1) var(--ease-std), background var(--dur-1) var(--ease-std);
}
.slot:hover { border-color: var(--ink); }
.slot[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.fld { margin-bottom: 1.1rem; }
.fld label { display: block; font-size: var(--step--1); text-transform: uppercase; letter-spacing: .16em; color: var(--ink-mute); margin-bottom: .45rem; }
.fld input, .fld textarea, .fld select {
  width: 100%; font: inherit; color: var(--ink);
  background: var(--field-bg); border: 1px solid var(--field-border);
  padding: .8rem .9rem; border-radius: 0;
}
.fld input:focus, .fld textarea:focus, .fld select:focus { border-color: var(--accent); outline-offset: 0; }
.fld textarea { min-height: 92px; resize: vertical; }
.fld--half { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 520px) { .fld--half { grid-template-columns: 1fr; } }
.err { color: var(--danger); font-size: var(--step--1); margin-top: .35rem; display: none; }
[data-invalid] .err { display: block; }
[data-invalid] input, [data-invalid] textarea { border-color: var(--danger); }

.summ { border: 1px solid var(--line); padding: 1.2rem; margin-bottom: 1.3rem; background: var(--paper); }
.summ div { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--rule-hairline); font-size: var(--step--1); }
.summ div:last-child { border-bottom: 0; }
.summ dt, .summ span:first-child { color: var(--ink-mute); text-transform: uppercase; letter-spacing: .14em; }
.summ b { font-weight: 500; }

.done { text-align: center; padding: 1.5rem 0 .5rem; }
.done__mark { width: 54px; height: 54px; margin: 0 auto 1.4rem; border: 1px solid var(--accent); border-radius: 50%; display: grid; place-items: center; }
.done__mark svg { width: 22px; height: 22px; stroke: var(--accent); fill: none; stroke-width: 1.4; }
.done h3 { font-size: var(--step-2); margin-bottom: .8rem; }
.done p { margin-inline: auto; }

.demo-note {
  margin-top: 1.6rem; padding: .85rem 1rem;
  background: var(--paper-warm); border: 1px dashed var(--line);
  font-size: var(--step--1); color: var(--ink-mute); line-height: 1.55;
}

/* --- reveal on scroll ----------------------------------------------------- */

[data-reveal] { opacity: 0; transform: translateY(14px); }
[data-reveal].is-in { opacity: 1; transform: none; transition: opacity var(--dur-4) var(--ease-std), transform .7s var(--ease-out); }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; } }

/* --- misc ----------------------------------------------------------------- */

.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.filterbar { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.filterbar button {
  cursor: pointer; background: none; border: 1px solid var(--line); font: inherit;
  font-size: var(--step--1); text-transform: uppercase; letter-spacing: .15em;
  padding: .6rem 1.05rem; color: var(--ink-soft);
  transition: border-color var(--dur-1) var(--ease-std), color var(--dur-1) var(--ease-std), background var(--dur-1) var(--ease-std);
}
.filterbar button:hover { border-color: var(--ink); color: var(--ink); }
.filterbar button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* --- signature list (homepage) --------------------------------------------
   Six services, name + price, then "view all". The full menu is a page, not
   a homepage section. */

.srow {
  width: 100%; text-align: left; font: inherit; color: inherit;
  background: none; border: 0; border-bottom: 1px solid var(--rule-hairline);
  display: grid; grid-template-columns: minmax(0,1fr) auto;
  gap: .15rem 2rem; align-items: baseline;
  padding: 1.15rem 0; cursor: pointer; position: relative;
}
.srow::before {
  content: ""; position: absolute; left: 0; top: 50%; width: .55rem; height: 1px;
  background: var(--marker);
  transform: translateY(-50%) scaleX(0); transform-origin: left;
  transition: transform var(--dur-3) var(--ease-out);
}
.srow:hover::before { transform: translateY(-50%) scaleX(1); }
.srow__name, .srow__note { transition: transform var(--dur-3) var(--ease-out); }
.srow:hover .srow__name,
.srow:hover .srow__note { transform: translateX(.9rem); }
.srow:first-child { border-top: 1px solid var(--rule-strong); }
.srow__name { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.1; }
.srow__price { font-size: var(--step-0); white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.srow__note { grid-column: 1; font-size: var(--step--1); color: var(--ink-mute); }
@media (max-width: 560px) {
  .srow { grid-template-columns: 1fr; }
  .srow__price { color: var(--accent); text-align: left; }
}

/* --- results page ---------------------------------------------------------
   Photography leads; the caption says three things and gets out of the way. */

.result { margin: 0 0 clamp(3rem, 6vw, 5rem); max-width: 880px; }
.result__view {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  cursor: zoom-in; position: relative;
}
.result__view img { width: 100%; height: auto; }
.result__view::after {
  content: ""; position: absolute; inset: 0;
  box-shadow: inset 0 0 0 1px rgb(var(--c-ink-900-rgb) / .08);
  transition: box-shadow var(--dur-3) var(--ease-std);
}
.result__view:hover::after { box-shadow: inset 0 0 0 1px rgb(var(--c-ink-900-rgb) / .28); }
.result__cap {
  display: grid; grid-template-columns: minmax(0,3fr) minmax(0,7fr);
  gap: clamp(1rem, 3vw, 3rem);
  padding-top: 1.4rem; margin-top: 1.4rem;
  border-top: 1px solid var(--rule-strong);
}
.result__span { font-size: var(--step-0); margin: 0; }
.result__cap blockquote {
  margin: 0; font-family: var(--font-display);
  font-size: var(--step-1); line-height: 1.45; max-width: 54ch;
}
.result__tx {
  margin: .9rem 0 0; font-size: var(--step--1);
  text-transform: uppercase; letter-spacing: .16em; color: var(--ink-mute);
}
@media (max-width: 700px) { .result__cap { grid-template-columns: 1fr; gap: .8rem; } }

/* --- lightbox ------------------------------------------------------------- */

.lbox {
  position: fixed; inset: 0; z-index: var(--z-lightbox);
  display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgb(var(--c-ink-900-rgb) / .94);
  cursor: zoom-out; animation: fade var(--dur-1) var(--ease-std);
}
.lbox img { max-width: 100%; max-height: 92svh; width: auto; height: auto; }
.lbox__x {
  position: absolute; top: 1rem; right: 1.2rem;
  background: none; border: 0; cursor: pointer;
  color: var(--paper); font-size: var(--step-2); line-height: 1; padding: .4rem .6rem;
}

/* --- social icons + footer mark ------------------------------------------- */

/* Solid filled circles with the glyph knocked out — the treatment the
   practice already used on its own site. No box, no outline. */
.social { display: flex; gap: .7rem; align-items: center; margin-top: 1.8rem; }
/* The glyph colour is pinned on both states. `.ftr a:hover` sets
   color: var(--accent-lt) at (0,2,1) and would otherwise win here, painting
   the glyph the same champagne as the hovered circle — the icon vanishes.
   Scoping these under .ftr takes them to (0,3,1) so the contrast holds. */
.social a,
.ftr .social a {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border: 0; border-radius: 50%;
  background: var(--social-bg);
  color: var(--social-fg);
  transition: background var(--dur-2) var(--ease-std), transform var(--dur-2) var(--ease-std);
}
.social a:hover,
.ftr .social a:hover {
  background: var(--social-bg-hover);
  color: var(--social-fg);      /* must be restated — see note above */
  transform: translateY(-2px);
}
.social svg { width: 19px; height: 19px; fill: currentColor; }

.ftr__mark { display: inline-block; margin-bottom: 1.8rem; }
.ftr__mark img { height: 54px; width: auto; }
.ftr__tel { font-size: var(--step-1); letter-spacing: .01em; }

.ulink--onDark { color: var(--accent-lt); border-color: rgb(var(--c-champagne-rgb) / .4); }
.ulink--onDark:hover { color: var(--paper); border-color: var(--paper); }

/* The pricing statement is the one section that does not use the label+content
   rail. It sits as a single measured column so the page has at least one
   different shape in it. */
.statement--wide p { max-width: 26ch; }
.statement--wide .statement__foot { margin-top: clamp(2rem, 4vw, 2.8rem); }
@media (max-width: 700px) { .statement--wide p { max-width: none; } }

/* Practitioner attribution. Name, role in plain words, post-nominals —
   three lines of descending emphasis. No labels, no rules, no grid: the
   pattern every well-designed practice in this category uses. */
.byline {
  margin: clamp(2rem, 4vw, 2.8rem) 0 0;
  max-width: none;
  display: block;
}
/* .founder__fig figcaption is (0,1,1); match it so the byline keeps its own
   sentence-case treatment when it is used as a photo caption. */
.founder__fig figcaption.byline {
  text-transform: none;
  letter-spacing: normal;
  color: var(--ink);
  font-size: var(--step-0);
  margin-top: 1.1rem;
}
.byline span { display: block; }
.byline__name {
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.2;
}
.byline__role {
  color: var(--ink-soft);
  margin-top: .25rem;
}
.byline__post {
  font-size: var(--step--1);
  color: var(--ink-mute);
  margin-top: .35rem;
}

/* --- layered founder portrait ---------------------------------------------
   The background is removed (Vision foreground mask) so Jessica can stand
   across two section edges at once — rising into the warm band above and
   settling into the dark band below. She is the only element on the site
   allowed to cross a section edge; that restraint is what keeps it reading
   as depth rather than as a pasted-on cutout.

   She sits right so the type has the left column to itself, and so her rise
   happens over the empty half of the pricing statement above. */

/* local stacking only: the portrait must paint over the section that follows */
#jessica { position: relative; z-index: var(--z-local-raised); }
#jessica + .sec { position: relative; z-index: var(--z-local-base); }

.founder--layered {
  align-items: end;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  /* --rise: how far she breaks the top edge, over a LIGHT ground, so the
     overlap is plainly visible — this is where the dimensionality reads.
     --cross: how far her base carries past the bottom edge. Her dress is
     near-black and so is the band below, so the flat bottom of the cutout
     disappears once it is inside that band — the blend is the two blacks
     meeting, not a fade. Keep this small: just enough to bury the cut. */
  --rise: 88px;
  --cross: 124px;
}
.founder--layered .founder__fig {
  order: 2;                                   /* she sits right, type sits left */
  margin-top: calc(-1 * var(--rise));
  margin-bottom: calc(-1 * var(--rhythm) - var(--cross) + 14px);
  max-width: none;
}
/* Type rides to the top of the row so there is open space beneath it before
   the next section, and her figure is the only thing occupying that space. */
.founder--layered .founder__body { order: 1; align-self: start; padding-bottom: 0; }

.founder--layered .founder__fig img {
  filter: none;                 /* the cutout is the one colour moment */
  width: 100%;
  max-width: 440px;
  margin-inline: auto 0;
  display: block;
  /* Her dress photographs darker than --ink, so the flat bottom of the cutout
     shows as a slightly-too-dark rectangle sitting on the band. Feather just
     the last few pixels — long enough to kill the cut, short enough that she
     still reads as standing on the section rather than fading out of it. */
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent 100%);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent 100%);
}

@media (max-width: 640px) {
  /* Phones only — tablets keep the desktop two-column layout below.
     Heading above, full width, single column — then her photo, sized like
     it always was, its dress still bleeding into the dark band after it. */
  .founder--layered { --cross: 46px; grid-template-columns: 1fr; }
  .founder--layered .founder__fig {
    order: 2; margin-top: 0;
    margin-bottom: calc(-1 * var(--rhythm) - var(--cross) + 14px);
  }
  .founder--layered .founder__body { order: 1; }
  .founder--layered .founder__body h2 { max-width: none; }
  .founder--layered .founder__fig img {
    max-width: 300px;
    margin-inline: auto;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent 100%);
            mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent 100%);
  }
}

.visit__addr { font-size: var(--step-1); line-height: 1.5; margin: 0; }

/* Results page: the array is client-managed, so an empty list is a real state. */
.result__empty {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-mute);
  max-width: 46ch;
  padding: clamp(2rem, 5vw, 3.5rem) 0;
  border-top: 1px solid var(--rule-strong);
}

/* The map is a third-party embed; give it a ground so it is a deliberate
   placeholder rather than a white hole while Google responds. */
.map {
  background:
    repeating-linear-gradient(45deg,
      var(--paper-warm) 0 12px, var(--paper) 12px 24px);
}

.score__count {
  font-size: var(--step--1);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

/* --- Google rating (footer, every page) -----------------------------------
   A verified third-party signal, so it earns the champagne. Sits above the
   social row and links to the business listing by CID, which is stable in a
   way a search-query URL is not. */
.grating {
  display: inline-flex; align-items: baseline; gap: .6rem;
  text-decoration: none;
  margin-top: 1.8rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-2) var(--ease-std);
}
.grating:hover { border-bottom-color: var(--accent-lt); }
.grating__stars { display: inline-flex; gap: .18rem; align-self: center; }
.grating__stars svg { width: 14px; height: 14px; fill: var(--accent-lt); }
.grating__num {
  font-family: var(--font-display);
  font-size: var(--step-1); line-height: 1;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}
.grating__meta {
  font-size: var(--step--1);
  text-transform: uppercase; letter-spacing: .16em;
  color: rgb(var(--c-bone-100-rgb) / .62);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 560px) {
  .grating { flex-wrap: wrap; gap: .4rem .6rem; }
}

/* --- FAQ permalinks -------------------------------------------------------- */

.faq summary { justify-content: flex-start; }
.faq__q { flex: 1 1 auto; }
.faq__perma {
  flex: none; align-self: center;
  font-family: var(--font-sans); font-size: var(--step--1);
  color: var(--ink-mute); text-decoration: none;
  opacity: 0; transition: opacity var(--dur-2) var(--ease-std), color var(--dur-2) var(--ease-std);
}
.faq details:hover .faq__perma,
.faq summary:focus-within .faq__perma,
.faq__perma:focus-visible { opacity: 1; }
.faq__perma:hover { color: var(--accent); }
.faq details { scroll-margin-top: 5rem; }
@media (hover: none) { .faq__perma { opacity: 1; } }