/* ==========================================================================
   Lotus Nail Studio — design tokens
   Values transcribed from "Homepage v2.dc.html" at its default prop values:
   accentColor #A7772B · headerColor #F8F3EA · bandColor #571726
   ctaColor #6B1F32 · awardTintColor #E8D3D6 · awardOpacity 0.35
   The derived tokens (accent-deep, accent-on-dark, cta-accent, award-*) are the
   output of the comp's luminance helpers, resolved once here instead of at runtime.
   ========================================================================== */
:root {
  --ivory:#F8F3EA;
  --white:#FFFFFF;
  --noir:#16120D;
  --body:#4A4136;
  --muted:#736A5C;
  --rule:#E2D8C6;
  --rule-soft:#F0E9DC;
  --shell:#E2D8C6;

  --accent:#A7772B;
  /* Text-weight gold. Darker than --accent so small caps clear AA (5.3:1 on ivory). */
  --accent-deep:#8A5A1E;
  --accent-on-dark:#CFA533;
  --accent-text:#F8F3EA;

  --header-bg:#F8F3EA;
  --header-text:#16120D;
  --header-rule:#E2D8C6;

  --band-bg:#571726;
  --band-text:rgba(248,243,234,0.9);
  --band-rule:rgba(248,243,234,0.14);
  --band-dim:rgba(248,243,234,0.65);

  --cta-bg:#6B1F32;
  --cta-accent:#CFA533;
  --cta-btn-text:#16120D;

  --award-tint:rgba(232,211,214,0.35);
  --award-rule:rgba(22,18,13,0.18);
  --award-label:#8A5A1E;
  --award-title:#16120D;
  --award-body:#4A4136;

  --serif:'Marcellus', Georgia, 'Times New Roman', serif;
  --sans:'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --shell-max:1200px;
  --gutter:clamp(20px, 4vw, 48px);
  --section-y:clamp(44px, 5.6vw, 92px);
}

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

html, body {
  margin:0; padding:0;
  background:var(--ivory);
  scroll-behavior:smooth;
  /* `clip`, not `hidden`: overflow-x:hidden on the root turns it into a scroll
     container, which silently kills position:sticky on the header. `clip` still
     stops a stray wide child from scrolling the page sideways. */
  overflow-x:clip;
}
body {
  font-family:var(--sans);
  color:var(--noir);
}
img { max-width:100%; }
a { color:var(--accent); text-decoration:none; }
a:hover { color:#CFA533; }
::selection { background:#EDC458; color:var(--noir); }

h1, h2, h3, h4, figure, blockquote, p { margin:0; }

/* The comp animates the drawer in; honour reduced-motion. */
@keyframes lotusSlide { from { transform:translateX(100%); } to { transform:translateX(0); } }
@keyframes lotusFade  { from { opacity:0; } to { opacity:1; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

.shell { max-width:var(--shell-max); margin:0 auto; }
.visually-hidden {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link {
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--accent); color:var(--accent-text);
  padding:14px 22px; font-size:12px; letter-spacing:2.5px; text-transform:uppercase; font-weight:700;
}
.skip-link:focus { left:0; color:var(--accent-text); }

:where(a, button):focus-visible {
  outline:2px solid var(--accent);
  outline-offset:3px;
}

/* ==========================================================================
   Shared type + button primitives
   ========================================================================== */
.eyebrow {
  display:flex; align-items:center; gap:14px;
  font-size:11.5px; letter-spacing:4px; text-transform:uppercase;
  color:var(--accent-deep); font-weight:600;
}
.eyebrow__num { font-family:var(--serif); font-size:13px; letter-spacing:3px; color:var(--accent-deep); }
.eyebrow__rule { width:26px; height:1px; background:var(--accent); display:block; }
.eyebrow__rule--long { width:38px; }
/* On the burgundy bands --accent-deep is near-invisible; the comp's
   on-dark gold is the one that clears AA there. */
.eyebrow--on-band, .eyebrow--on-band .eyebrow__num { color:var(--accent-on-dark); }
.eyebrow--on-band .eyebrow__rule { background:var(--accent-on-dark); }

.h-display {
  font-family:var(--serif); font-weight:400;
  font-size:clamp(30px, 4.6vw, 50px); line-height:1.08; letter-spacing:.5px;
  text-wrap:pretty;
}
.h-section {
  font-family:var(--serif); font-weight:400;
  font-size:clamp(24px, 3.6vw, 40px); line-height:1.2; letter-spacing:.5px;
  text-wrap:pretty;
}
.h-card {
  font-family:var(--serif); font-weight:400;
  font-size:clamp(19px, 2vw, 24px); letter-spacing:.5px;
}

.lede { font-size:17px; font-weight:400; line-height:1.75; color:var(--body); text-wrap:pretty; }
.copy { font-size:17px; font-weight:400; line-height:1.85; color:var(--body); text-wrap:pretty; }
.copy--sm { font-size:15px; font-weight:400; line-height:1.75; color:var(--body); text-wrap:pretty; }
.copy--intro { font-size:16px; font-weight:400; line-height:1.8; color:var(--body); text-wrap:pretty; }

.btn {
  display:inline-block;
  background:var(--accent); color:var(--accent-text);
  padding:19px 42px;
  font-size:12.5px; letter-spacing:2.5px; text-transform:uppercase; font-weight:700;
  border:0; cursor:pointer; text-align:center;
}
.btn:hover { background:#8A5A1E; color:var(--accent-text); }
.btn--sm { padding:17px 36px; }
.btn--xs { padding:15px 30px; font-size:11.5px; }

.link-rule {
  font-size:12.5px; letter-spacing:2.5px; text-transform:uppercase; font-weight:600;
  color:var(--noir); border-bottom:1px solid var(--accent); padding-bottom:5px;
}
.link-rule:hover { color:var(--accent-deep); }

.link-more {
  margin-top:auto;
  font-size:11.5px; letter-spacing:2.5px; text-transform:uppercase; font-weight:700;
  color:var(--accent-deep); border-top:1px solid var(--rule); padding-top:18px;
}

.section { padding:var(--section-y) var(--gutter); }
.section--white { background:var(--white); border-top:1px solid var(--rule); }
.section--band { background:var(--band-bg); color:var(--ivory); padding:clamp(50px,7.5vw,120px) var(--gutter); }

.section-head {
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:clamp(24px, 4vw, 56px); margin-bottom:44px; flex-wrap:wrap;
}
.section-head--tight { margin-bottom:40px; }
.section-head p { margin-bottom:8px; max-width:390px; }

/* Anything an in-page link jumps to has to clear the sticky header, or the
   target lands underneath it. */
[id] { scroll-margin-top:112px; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position:sticky; top:0; z-index:50;
  background:var(--header-bg); border-bottom:1px solid var(--header-rule);
}
.site-header__inner {
  max-width:var(--shell-max); margin:0 auto;
  padding:clamp(9px,1.6vw,18px) var(--gutter);
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(8px,1.4vw,20px); flex-wrap:wrap;
}
.site-header__logo {
  width:clamp(130px, 15vw, 176px); height:auto;
  object-fit:contain; object-position:left center; display:block;
}
.nav-desktop {
  display:flex; align-items:center; gap:clamp(14px,2vw,28px);
  flex:1 1 260px; min-width:0; justify-content:flex-end;
}
.nav-desktop nav { display:flex; align-items:center; gap:clamp(14px,2.2vw,38px); min-width:0; }
.nav-desktop a.nav-link {
  color:var(--header-text);
  font-size:12px; letter-spacing:2.5px; text-transform:uppercase; font-weight:600;
  white-space:nowrap; flex-shrink:0;
}
.nav-desktop a.nav-link:hover,
.nav-desktop a.nav-link[aria-current] { color:var(--accent-deep); }
.nav-desktop .btn { flex-shrink:0; white-space:nowrap; padding:13px 22px; font-size:11.5px; letter-spacing:2.2px; }

.nav-compact { display:none; align-items:center; gap:14px; }
.nav-compact__book {
  flex-shrink:0; white-space:nowrap;
  color:var(--header-text); background:transparent; border:1px solid var(--accent);
  padding:13px 20px; font-size:11px; letter-spacing:2.2px; text-transform:uppercase; font-weight:700;
}
.nav-compact__book:hover { color:var(--header-text); background:rgba(167,119,43,.08); }
.nav-toggle {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  width:48px; height:48px; flex-shrink:0;
  background:var(--accent); border:0; border-radius:0; cursor:pointer;
}
.nav-toggle span { display:block; width:20px; height:2px; background:var(--accent-text); }

@media (max-width: 999px) {
  .nav-desktop { display:none; }
  .nav-compact { display:flex; }
}

/* Drawer */
.nav-scrim {
  position:fixed; inset:0; z-index:90;
  background:rgba(22,18,13,.55);
  animation:lotusFade .22s ease-out both;
}
.nav-drawer {
  position:fixed; right:0; top:0; bottom:0; z-index:100;
  width:min(88vw, 360px); overscroll-behavior:contain;
  animation:lotusSlide .28s cubic-bezier(.22,.61,.36,1) both;
  box-shadow:-18px 0 46px rgba(22,18,13,.22);
  background:var(--header-bg);
  padding:24px clamp(22px,5vw,34px);
  display:flex; flex-direction:column; overflow-y:auto;
}
.nav-drawer[hidden], .nav-scrim[hidden] { display:none; }
.nav-drawer__top {
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; margin-bottom:22px;
}
.nav-drawer__top img { width:150px; height:auto; display:block; }
.nav-drawer__close {
  /* 44px square: the glyph is small, the thing you tap should not be. */
  background:transparent; border:0; padding:0;
  width:44px; height:44px; margin:-8px -10px -8px 0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-size:20px; line-height:1;
  color:var(--header-text); cursor:pointer;
}
.nav-drawer nav { display:flex; flex-direction:column; }
/* Styled by class, not `nav a` — a descendant element selector would outrank
   the .btn and .nav-drawer__tel classes further down. */
.nav-drawer__link {
  color:var(--header-text);
  font-size:15px; letter-spacing:2.5px; text-transform:uppercase; font-weight:600;
  padding:16px 0; border-bottom:1px solid var(--header-rule);
}
.nav-drawer__link:hover { color:var(--accent-deep); }
.nav-drawer .btn {
  margin-top:26px; padding:18px 24px; font-size:12.5px;
  letter-spacing:2.5px;
}
.nav-drawer__tel {
  margin-top:20px; font-size:14px; font-weight:300;
  color:var(--header-text); letter-spacing:normal; text-transform:none;
  padding:13px 0;
}
.nav-drawer__tel + .nav-drawer__tel { margin-top:0; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { background:var(--ivory); }
.hero__grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  align-items:stretch;
  min-height:clamp(360px, 44vw, 520px);
}
.hero__copy {
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(36px,4.6vw,68px) clamp(20px,5vw,72px) clamp(36px,4.6vw,68px)
          max(var(--gutter), calc((100vw - var(--shell-max)) / 2));
}
.hero__eyebrow { margin-bottom:22px; }
.hero h1 { margin:0 0 20px; }
.hero__lede { margin:0 0 30px; max-width:430px; }
.hero__actions { display:flex; align-items:center; gap:32px; flex-wrap:wrap; }

.hero__media {
  position:relative; overflow:hidden; background:var(--shell);
  /* Its only child is absolutely positioned, so the cell needs its own
     floor or it collapses once the grid wraps to a single column. */
  min-height:clamp(300px, 70vw, 420px);
}
.hero__media > img {
  position:absolute; left:0; top:0; width:100%; height:100%;
  object-fit:cover; object-position:center 55%;
}

.award {
  position:absolute; left:32px; bottom:32px;
  background:var(--award-tint);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid var(--award-rule);
  padding:20px 28px;
  display:flex; align-items:center; gap:20px;
}
.award img { height:120px; width:auto; flex-shrink:0; }
.award__label {
  font-size:10px; letter-spacing:3px; text-transform:uppercase;
  color:var(--award-label); font-weight:700; margin-bottom:8px;
}
.award__title {
  font-family:var(--serif); font-size:25px; line-height:1.2; letter-spacing:.3px;
  color:var(--award-title); margin-bottom:7px;
}
.award__body { font-size:12.5px; font-weight:300; line-height:1.55; color:var(--award-body); }

@media (max-width: 640px) {
  /* Half-width, left-anchored: a full-bleed panel hid the whole bottom of the
     hero photo, chairs included. */
  .award { left:16px; right:auto; bottom:16px; max-width:66%; padding:13px 15px; gap:11px; }
  .award img { height:74px; }
  .award__label { font-size:10px; letter-spacing:2px; margin-bottom:6px; }
  .award__title { font-size:19px; margin-bottom:5px; }
  .award__body { font-size:11px; line-height:1.5; }
}

/* Touch targets: on phones every control needs a 44px box to hit, not just a
   line of text. Measured on staging — the gift buttons were 29px, the footer
   links 18px. */
@media (max-width: 640px) {
  .amount__btn { min-height:44px; padding:14px 0 6px; }
  .reviews__btn.reviews__btn--play { width:44px; height:44px; }
  .site-footer__text { line-height:1.6; }
  .site-footer__text a { display:inline-block; padding:11px 0; }
  /* Text CTAs carry a rule right under the words, so padding would move the
     rule. Grow the hit box with an invisible overlay instead. */
  .link-rule, .link-more { position:relative; }
  .link-rule::after, .link-more::after {
    content:''; position:absolute; left:0; right:0; top:50%;
    height:44px; transform:translateY(-50%);
  }
  /* Same trick, shorter box. Both of these sit a few px under a line of text
     (the menu price, the related card's copy), so a 44px overlay would reach
     up over that text and make it look tappable when it is not. 34px clears
     the WCAG 2.5.8 minimum of 24 without crossing the line above. */
  .related__cta, .menu-item__book { position:relative; }
  .related__cta::after, .menu-item__book::after {
    content:''; position:absolute; left:0; right:0; top:50%;
    height:34px; transform:translateY(-50%);
  }
  /* These are block or flex items, so padding grows the hit box and a matching
     negative margin puts the layout back exactly where it was. */
  .breadcrumbs a { padding-block:6px; margin-block:-6px; }
  .topics a { padding:3px 4px; margin:-3px -4px; }
  .location__tel, .about__phone-num { display:inline-block; padding-block:6px; margin-block:-6px; }
  /* The contact card's phone number is the only tappable thing in a 43px row
     that already has the height to spare — the link just wasn't claiming it. */
  .studio__row a { display:inline-block; padding-block:12px; margin-block:-12px; }
  /* The padding above already sized these to 48px, but as inline-blocks the
     padded boxes of consecutive links overlapped, so each one was hittable
     only across its ~19px inline box and the strip between two links went to
     whichever came later in the document. As blocks they tile instead of
     overlapping and each owns its full 48px. Same spacing either way. */
  .site-footer__links a { display:block; }
  /* 12px type in the legal bar gives a ~17px line box. Padding plus a matching
     negative margin clears 24px without moving the row. */
  .site-footer__policies a { display:inline-block; padding-block:5px; margin-block:-5px; }
}

/* ==========================================================================
   Info strip
   ========================================================================== */
.strip { background:var(--band-bg); color:var(--ivory); }
.strip__inner {
  max-width:var(--shell-max); margin:0 auto; padding:0 var(--gutter);
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap:48px;
}
.strip__item { padding:26px 0; display:flex; flex-direction:column; gap:7px; }
.strip__label {
  font-size:10.5px; letter-spacing:3px; text-transform:uppercase;
  color:var(--accent-on-dark); font-weight:700;
}
.strip__value { font-size:16px; font-weight:300; color:var(--band-text); }

/* ==========================================================================
   About
   ========================================================================== */
.about__grid {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap:clamp(30px, 6vw, 96px); align-items:center;
}
/* Grid items default to min-width:auto, which floors each track at its
   min-content width and lets a long unwrappable row push the grid past the
   viewport. Every auto-fit column in this theme should be free to shrink. */
.about__grid > *, .cards > *, .why > *, .reviews__grid > *,
.locations > *, .journal__grid > *, .menu-band > * { min-width:0; }
.about__media { position:relative; }
.about__frame {
  position:absolute; left:-22px; top:-22px; right:44px; bottom:44px;
  border:1px solid var(--accent); pointer-events:none;
}
.about__photo {
  position:relative; height:clamp(270px, 40vw, 540px);
  margin-left:22px; overflow:hidden;
}
.about__photo img { width:100%; height:100%; object-fit:cover; object-position:center 30%; display:block; }
/* Mirror of the .team__frame handling: at phone widths the -22px overhang lands
   in the shell gutter, so the frame gets pulled back inside and the photo gives
   up the width instead. It stops 12px short of the shell edge rather than
   sitting on it — hard against the edge it reads as the layout running out of
   room instead of as a deliberate offset.

   The box also stops being a 40vw letterbox. Full-bleed at 328px wide, cover on
   this 1128x1800 portrait showed the ceiling, the wall sign and the top rack,
   with her small and low in the frame. 1128/650 with the window at 52% is the
   band from just above her head to just below her waist. Both numbers are in
   source pixels and scale together, so the framing holds at any phone width —
   change one and recompute the other. */
@media (max-width: 719px) {
  .about__frame { left:12px; top:-16px; right:32px; bottom:32px; }
  .about__photo { margin-left:30px; height:auto; aspect-ratio:1128 / 650; }
  .about__photo img { object-position:center 52%; }
}
.about h2 { margin:0 0 26px; }
.about .eyebrow { margin-bottom:26px; }
.about__copy { margin:0 0 38px; }
.pillars { display:flex; flex-direction:column; gap:22px; margin-bottom:34px; }
.pillar { display:grid; grid-template-columns:40px minmax(0,1fr); gap:20px; align-items:start; }
.pillar__num { font-family:var(--serif); font-size:26px; color:var(--accent); line-height:1; }
.pillar__title { font-size:17px; font-weight:600; margin-bottom:6px; letter-spacing:.2px; }
.pillar__body { font-size:15px; font-weight:300; line-height:1.7; color:var(--body); text-wrap:pretty; }

.about__phones {
  display:flex; flex-wrap:wrap; gap:20px clamp(24px, 4vw, 56px);
  padding-top:32px; border-top:1px solid var(--rule);
}
.about__phone-label {
  font-size:10.5px; letter-spacing:3px; text-transform:uppercase;
  color:var(--accent-deep); font-weight:700; margin-bottom:8px;
}
.about__phone-num { font-family:var(--serif); font-size:21px; color:var(--noir); letter-spacing:.5px; }

/* ==========================================================================
   Service cards
   ========================================================================== */
.cards {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  gap:24px;
}
.card { display:flex; flex-direction:column; min-width:0; }
.card__media {
  /* Ratio rather than a fixed height: a fixed height goes square as soon as the
     column narrows. The comp drew these at 8/7, but that made the photo two
     thirds of the card — 3/2 keeps the crop and gets the name above the fold. */
  position:relative; width:100%; aspect-ratio:3 / 2; min-height:170px;
  overflow:hidden; margin-bottom:20px;
}
.card__media > img { width:100%; height:100%; object-fit:cover; display:block; }
.card__num {
  position:absolute; left:0; top:0;
  background:var(--accent); color:var(--accent-text);
  font-family:var(--serif); font-size:14px; letter-spacing:2px;
  padding:9px 14px; pointer-events:none;
}
.card h3 { margin:0 0 9px; }
.card p { margin:0 0 16px; line-height:1.65; }
.card .link-more { padding-top:14px; }

/* ==========================================================================
   Full menu band
   ========================================================================== */
.menu-band {
  max-width:var(--shell-max); margin:0 auto;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap:clamp(30px, 6vw, 96px); align-items:center;
}
.menu-band__kicker {
  font-size:11.5px; letter-spacing:4px; text-transform:uppercase;
  color:var(--accent-on-dark); font-weight:600; margin-bottom:24px;
}
.menu-band h2 {
  font-family:var(--serif); font-weight:400;
  font-size:clamp(24px, 4vw, 42px); line-height:1.28; letter-spacing:.5px;
  margin:0 0 30px; text-wrap:pretty;
}
.menu-band__list {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap:0 56px;
}
.menu-band__item {
  display:flex; align-items:baseline; gap:12px;
  padding:17px 0; border-bottom:1px solid var(--band-rule);
  font-size:16px; font-weight:300; color:var(--band-text);
}
.menu-band__item::before { content:'\25C6'; color:var(--accent-on-dark); font-size:9px; }

/* ==========================================================================
   Studio landing pages (/shadyside/, /lawrenceville/)
   ========================================================================== */
.loc-hero__address {
  font-style:normal; font-size:16px; font-weight:300; line-height:1.6;
  color:var(--body); margin-bottom:18px;
}
.loc-hero__actions { display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.loc-hero__tel {
  font-size:15px; font-weight:400; color:var(--accent-deep);
  border-bottom:1px solid var(--accent); padding-bottom:3px;
}
/* 44px tap target on the phone link without moving the rule under the digits. */
.loc-hero__tel { position:relative; }
.loc-hero__tel::after { content:''; position:absolute; inset:-13px -6px; }

.loc-map { height:clamp(260px, 34vw, 440px); background:var(--shell); }
.loc-map iframe { width:100%; height:100%; border:0; display:block; filter:grayscale(.35) contrast(1.02); }

.loc-other {
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(20px, 4vw, 48px); flex-wrap:wrap;
  border:1px solid var(--rule); background:var(--white);
  padding:clamp(22px, 3vw, 34px) clamp(20px, 3vw, 36px);
}
.loc-other > * { min-width:0; }
.loc-other__label {
  display:block; margin-bottom:8px;
  font-size:10.5px; letter-spacing:2.5px; text-transform:uppercase;
  font-weight:700; color:var(--accent-deep);
}

/* ==========================================================================
   Gallery
   ========================================================================== */
.gallery {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap:16px;
}
.gallery__cell {
  /* 4/5 matches the restaged studio photos, so no nail gets cropped off. */
  min-width:0; width:100%; aspect-ratio:4 / 5; overflow:hidden;
}
.gallery__cell > img { width:100%; height:100%; object-fit:cover; display:block; }

/* ==========================================================================
   Reviews
   ========================================================================== */
.reviews h2 { margin:0 0 36px; }
.reviews__grid {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  gap:32px;
}

/* Slider. The track is a plain scroll-snap row, so it swipes on touch and tabs
   through on a keyboard whether or not nav.js loaded; the buttons only page it. */
.reviews__slider { position:relative; }
.reviews__track {
  display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 48px) / 3);
  gap:24px; overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scrollbar-width:none; -ms-overflow-style:none;
}
.reviews__track::-webkit-scrollbar { display:none; }
.reviews__track:focus-visible { outline:2px solid var(--accent); outline-offset:6px; }
.reviews__track > .review { scroll-snap-align:start; }

.reviews__nav {
  display:flex; align-items:center; gap:14px;
  margin-top:clamp(28px, 3.4vw, 40px);
}
.reviews__count {
  font-size:10.5px; letter-spacing:2.5px; text-transform:uppercase;
  font-weight:700; color:var(--muted); margin-right:6px;
}
.reviews__btn {
  width:44px; height:44px; flex-shrink:0; cursor:pointer;
  background:transparent; color:var(--accent-deep);
  border:1px solid var(--rule); border-radius:50%;
  font-family:var(--sans); font-size:17px; line-height:1;
  transition:border-color .2s, color .2s, background-color .2s;
}
.reviews__btn:hover:not(:disabled) { border-color:var(--accent); background:var(--ivory); }
.reviews__btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.reviews__btn:disabled { opacity:.3; cursor:default; }

@media (max-width: 900px) {
  .reviews__track { grid-auto-columns:calc((100% - 24px) / 2); }
}
@media (max-width: 620px) {
  .reviews__track { grid-auto-columns:100%; }
  .review:hover { transform:none; }
}
/* A card rather than a column of text: on the ivory band the white ground and
   the hairline give each quote an edge, so the row reads as one row of cards
   instead of three stacks that happen to sit side by side. */
.review {
  position:relative; margin:0; min-width:0; overflow:hidden;
  display:flex; flex-direction:column; gap:14px;
  padding:clamp(22px, 2.2vw, 28px) clamp(20px, 2vw, 26px) clamp(18px, 1.9vw, 22px);
  background:var(--white); border:1px solid var(--rule);
  transition:border-color .25s ease, transform .25s ease;
}
.review:hover { border-color:var(--accent); transform:translateY(-3px); }

/* Oversized closing quote, cropped by the card — decoration, not content. */
.review__mark {
  position:absolute; top:-14px; right:12px; pointer-events:none;
  font-family:var(--serif); font-size:74px; line-height:1;
  color:var(--accent); opacity:.13;
}
.review__stars { color:var(--accent); font-size:12px; letter-spacing:3.5px; }
.review blockquote {
  flex:1; margin:0; font-family:var(--serif); font-size:clamp(16px, 1.2vw, 17.5px);
  line-height:1.55; letter-spacing:.2px; text-wrap:pretty; color:var(--noir);
}
.review figcaption {
  margin-top:auto; padding-top:13px; border-top:1px solid var(--rule-soft);
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
}
.review__name {
  font-size:11.5px; letter-spacing:2.5px; text-transform:uppercase;
  color:var(--accent-deep); font-weight:700;
}
.review__source { font-size:12px; font-weight:300; color:var(--muted); letter-spacing:.2px; }

/* Cards ease in the first time the row is scrolled to, staggered left to right.
   Nothing here runs for a reader who has asked for less motion — the whole block
   is inside the no-preference query, so their cards are simply always visible. */
@media (prefers-reduced-motion: no-preference) {
  .reviews__slider[data-reveal] .review {
    opacity:0; transform:translateY(18px);
    transition:opacity .7s ease, transform .7s ease, border-color .25s ease;
  }
  .reviews__slider[data-reveal].is-in .review { opacity:1; transform:none; }
  .reviews__slider[data-reveal].is-in .review:hover { transform:translateY(-3px); }
  .reviews__slider[data-reveal] .review:nth-child(2) { transition-delay:.09s; }
  .reviews__slider[data-reveal] .review:nth-child(3) { transition-delay:.18s; }
  .reviews__slider[data-reveal] .review:nth-child(n+4) { transition-delay:.27s; }
}

/* Pause control. Quieter than the arrows — it is a safety valve, not a feature. */
.reviews__btn--play {
  width:36px; height:36px; font-size:9px; letter-spacing:1px;
  color:var(--muted); order:-1;
}
.reviews__btn--play:hover:not(:disabled) { color:var(--accent-deep); }
.reviews__btn--play[hidden] { display:none; }

/* Progress bar — shows how far through the set you are at a glance. */
.reviews__progress {
  flex:1; height:1px; background:var(--rule); position:relative; margin-right:8px;
}
.reviews__progress span {
  position:absolute; left:0; top:-1px; height:3px; width:0;
  background:var(--accent); transition:width .3s ease;
}

/* ==========================================================================
   Team
   ========================================================================== */
/* Mirrors the About grid (media one side, copy the other) but flipped, and the
   photo is landscape where About's is portrait, so the two don't read as the
   same section twice. */
.team__grid {
  max-width:var(--shell-max); margin:0 auto;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap:clamp(34px, 6vw, 84px); align-items:center;
}
.team__grid > * { min-width:0; }
.team .eyebrow { margin-bottom:26px; }
.team h2 { margin:0 0 24px; }
.team__copy {
  font-size:17px; font-weight:300; line-height:1.85;
  color:var(--band-text); text-wrap:pretty;
  margin:0 0 34px; max-width:46ch;
}
.team__actions { display:flex; align-items:center; gap:20px 32px; flex-wrap:wrap; }
/* Unused right now. Kept for the "Join our team" link into /jobs/, which was
   pulled from the band but is wanted back later. */
.team__link {
  font-size:12.5px; letter-spacing:2.5px; text-transform:uppercase; font-weight:600;
  color:var(--accent-on-dark); border-bottom:1px solid var(--accent-on-dark);
  padding-bottom:5px;
}
.team__link:hover { color:var(--ivory); border-bottom-color:var(--ivory); }

/* Tighter than the other bands. The menu band's clamp made this section 766px
   tall, which was the tallest thing on the page after the hero. */
.team { padding-block:clamp(40px, 5.2vw, 84px); }

.team__media { position:relative; }
/* Exact mirror of .about__frame / .about__photo, so the overhang past the shell
   edge matches the one on the About section rather than nearly matching it. */
.team__frame {
  position:absolute; right:-22px; top:-22px; left:44px; bottom:44px;
  border:1px solid var(--accent-on-dark); pointer-events:none;
}
.team__photo { position:relative; aspect-ratio:860 / 620; overflow:hidden; margin-right:22px; }
.team__photo img { width:100%; height:100%; object-fit:cover; display:block; }

/* The frame overhangs the media box by 22px, which at phone widths puts it in
   the 20px shell gutter and 2px off the screen. Rather than drop it, pull it
   back inside and let the photo give up the width: right:0 lands the frame's
   right edge on the shell edge and the photo's own 22px margin becomes the
   overhang. Same shape as the desktop version, 22px narrower photo. */
@media (max-width: 719px) {
  .team__frame { right:12px; top:-16px; left:32px; bottom:32px; }
  .team__photo { margin-right:30px; }
  /* Matches the mobile crop the <picture> swaps in. Without this the box stays
     860/620 and the browser covers the portrait file into a letterbox, which is
     the shape the swap exists to get rid of. */
  .team__photo { aspect-ratio:660 / 720; }
}

/* ==========================================================================
   Locations
   ========================================================================== */
/* Narrower than the shell and centred: the exterior photographs are ~3:2, so a
   full-width card gave them a letterbox that cropped the buildings away. A
   narrower card with a taller box lands near the source ratio. */
.locations {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap:26px; max-width:880px; margin-inline:auto;
}
.location {
  border:1px solid var(--rule); padding:0 clamp(24px, 2.6vw, 34px) clamp(24px, 2.6vw, 30px);
  display:flex; flex-direction:column;
}
.location__photo {
  height:clamp(200px, 21vw, 272px); margin:0 clamp(-34px, -2.6vw, -24px) 22px;
  overflow:hidden; background:var(--shell);
}
.location__photo img { width:100%; height:100%; object-fit:cover; display:block; }
.location h3 {
  font-family:var(--serif); font-weight:400;
  font-size:clamp(20px, 2.3vw, 26px); letter-spacing:.5px; margin:0 0 8px;
}
.location__address { font-size:15px; font-weight:300; line-height:1.65; color:var(--body); margin-bottom:18px; }
.location__hours {
  display:flex; flex-direction:column; gap:7px;
  font-size:14.5px; font-weight:300; color:var(--body);
  padding:15px 0; border-top:1px solid var(--rule-soft); border-bottom:1px solid var(--rule-soft);
  margin-bottom:20px;
}
.location__hours div { display:flex; gap:16px; }
.location__hours dt, .location__hours span.label {
  width:92px; flex-shrink:0;
  font-size:10.5px; letter-spacing:2.5px; text-transform:uppercase;
  color:var(--accent-deep); font-weight:700; padding-top:3px;
}
/* Stacked rather than inline: on the narrower card "Book Lawrenceville" plus the
   phone number no longer fit one line, and letting only that card wrap put the
   two buttons at different heights. */
.location__actions {
  display:flex; flex-direction:column; align-items:flex-start; gap:14px; margin-top:auto;
}
.location__tel { font-family:var(--serif); font-size:18px; color:var(--noir); }

@media (max-width: 520px) {
  .location { padding:0 22px 26px; }
  .location__photo { margin:0 -22px 22px; }
}

/* ==========================================================================
   Journal
   ========================================================================== */
.journal h2 { margin:0 0 36px; }
.journal__grid {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  gap:32px;
}
.post-card { display:flex; flex-direction:column; min-width:0; }
.post-card__media { position:relative; height:clamp(170px, 17vw, 220px); margin-bottom:18px; }
.post-card__media > img { width:100%; height:100%; object-fit:cover; display:block; }
.post-card__tag {
  position:absolute; right:0; bottom:0;
  background:var(--accent); color:var(--accent-text);
  font-size:10.5px; letter-spacing:2.5px; text-transform:uppercase; font-weight:700;
  padding:9px 15px; pointer-events:none;
}
.post-card__date {
  font-size:11px; letter-spacing:2.5px; text-transform:uppercase;
  color:var(--accent-deep); font-weight:700; margin-bottom:9px;
}
.post-card h3 {
  font-family:var(--serif); font-weight:400; font-size:21px; line-height:1.32;
  letter-spacing:.3px; margin:0 0 9px; text-wrap:pretty;
}
.post-card h3 a { color:var(--noir); }
.post-card h3 a:hover { color:var(--accent-deep); }
.post-card p { margin:0 0 16px; line-height:1.65; }

/* ==========================================================================
   CTA panel
   ========================================================================== */
.cta-section { padding:32px var(--gutter) 72px; }
.cta {
  position:relative; overflow:hidden;
  background:var(--cta-bg);
  padding:clamp(34px,4.5vw,48px) clamp(24px,4vw,52px);
  /* min() so the 300px track can still shrink on a 320px phone. */
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap:clamp(24px,3vw,48px); align-items:center;
}
.cta__mark {
  position:absolute; right:-70px; top:50%; transform:translateY(-50%);
  width:280px; height:clamp(190px, 22vw, 280px);
  opacity:.07; pointer-events:none;
}
.cta__body { position:relative; min-width:0; }
.cta__kicker {
  font-size:10.5px; letter-spacing:3.5px; text-transform:uppercase;
  color:var(--cta-accent); font-weight:700; margin-bottom:12px;
}
.cta h2 {
  font-family:var(--serif); font-weight:400;
  font-size:clamp(24px, 2.8vw, 30px); line-height:1.28; letter-spacing:.4px;
  margin:0 0 10px; color:var(--ivory); text-wrap:pretty;
}
.cta p {
  font-size:15.5px; font-weight:300; line-height:1.75;
  color:rgba(248,243,234,.72); margin:0; max-width:460px; text-wrap:pretty;
}
.cta__action { position:relative; display:flex; align-items:center; justify-content:flex-end; }
.cta__btn {
  background:var(--cta-accent); color:var(--cta-btn-text);
  padding:17px 40px; font-size:12px; letter-spacing:2.5px;
  text-transform:uppercase; font-weight:700;
}
.cta__btn:hover { background:#EDC458; color:var(--cta-btn-text); }
@media (max-width: 719px) { .cta__action { justify-content:flex-start; } }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background:var(--band-bg); color:var(--band-dim);
  padding:clamp(44px,6vw,80px) var(--gutter) 44px;
}
.site-footer__top {
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:clamp(26px,4.5vw,64px); flex-wrap:wrap;
  padding-bottom:48px; border-bottom:1px solid var(--band-rule);
}
.site-footer__logo { width:210px; }
.site-footer__cols { display:flex; gap:clamp(28px,5vw,80px); flex-wrap:wrap; }
.site-footer__label {
  font-size:10.5px; letter-spacing:3px; text-transform:uppercase;
  color:var(--accent-on-dark); margin-bottom:14px; font-weight:700;
}
.site-footer__text { font-size:14px; font-weight:300; line-height:1.85; }
/* The two nav columns dropped their <br>s so each link can be a block and carry
   a real tap box on a phone (see the touch-target block near the top). Column
   flex with align-items:flex-start keeps each link shrink-to-fit, the way the
   inline version was, so only the hit box changes and not the underline width
   or the line rhythm. */
.site-footer__links { display:flex; flex-direction:column; align-items:flex-start; }
.site-footer a { color:var(--band-dim); }
.site-footer a:hover { color:var(--accent-on-dark); }
.site-footer__legal { display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px 26px; padding-top:26px; font-size:12px; font-weight:300; letter-spacing:1px; }
/* Cancellation and privacy moved down here from the "More" column, which had
   grown to seven links against Services' four and read as a dumping ground.
   Policy links are conventionally in the legal bar anyway. */
.site-footer__policies { display:flex; flex-wrap:wrap; gap:6px 22px; }
.site-footer__credit a { color:inherit; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.28); padding-bottom:1px; transition:border-color .2s ease, color .2s ease; }
.site-footer__credit a:hover, .site-footer__credit a:focus-visible { color:var(--accent-on-dark); border-bottom-color:var(--accent-on-dark); }

/* ==========================================================================
   Image placeholder — stands in for photography we do not have yet.
   Occupies the exact box of the image it replaces so layout is unchanged.
   ========================================================================== */
.img-slot {
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; padding:20px; text-align:center;
  background:
    repeating-linear-gradient(135deg, rgba(167,119,43,.05) 0 12px, transparent 12px 24px),
    var(--shell);
  border:1px dashed rgba(167,119,43,.5);
  color:var(--body);
}
.img-slot--static { position:relative; inset:auto; width:100%; height:100%; }
/* Two classes deep so it outranks any `.wrapper img { width:100% }` rule —
   the placeholder is nested inside media wrappers all over the theme. */
.img-slot .img-slot__mark {
  width:38px; height:38px; opacity:.5; flex-shrink:0;
  object-fit:contain; position:static; inset:auto;
}
.img-slot__label {
  font-size:10.5px; letter-spacing:2.5px; text-transform:uppercase;
  font-weight:700; color:var(--accent-deep);
}
.img-slot__note {
  font-size:12px; font-weight:300; line-height:1.5;
  color:var(--muted); max-width:22ch;
}
.gallery__cell .img-slot { gap:8px; }
.gallery__cell .img-slot .img-slot__mark { width:28px; height:28px; }
.gallery__cell .img-slot__note { display:none; }

/* ==========================================================================
   Interior pages (page.php / single.php / archive)
   ========================================================================== */
.page-hero { background:var(--ivory); padding:clamp(36px,5vw,72px) var(--gutter) 0; }
.breadcrumbs {
  display:flex; align-items:center; gap:11px; margin-bottom:26px;
  font-size:11px; letter-spacing:3px; text-transform:uppercase; font-weight:600;
}
.breadcrumbs span { color:var(--muted); }
.breadcrumbs .sep { color:#B7AB98; }
.page-hero h1 {
  font-family:var(--serif); font-weight:400;
  font-size:clamp(29px, 5vw, 48px); line-height:1.08; letter-spacing:.5px;
  margin:0; text-wrap:pretty;
}
.page-hero__grid {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap:clamp(30px, 6vw, 96px); align-items:end;
  padding-bottom:44px; border-bottom:1px solid var(--rule);
}
/* Title-only page hero — no trailing column, so it needs less bottom room. */
.page-hero__grid--title { padding-bottom:clamp(22px, 3vw, 32px); }

.entry { max-width:760px; margin:0 auto; padding:clamp(40px,6vw,72px) 0; }
.entry p, .entry ul, .entry ol { font-size:17px; font-weight:300; line-height:1.85; color:var(--body); margin:0 0 1.4em; }
.entry h2 { font-family:var(--serif); font-weight:400; font-size:clamp(24px,3.4vw,34px); letter-spacing:.4px; margin:2em 0 .6em; }
.entry h3 { font-family:var(--serif); font-weight:400; font-size:24px; letter-spacing:.3px; margin:1.8em 0 .5em; }
.entry img { height:auto; }
.entry blockquote {
  margin:1.6em 0; padding-left:24px; border-left:2px solid var(--accent);
  font-family:var(--serif); font-size:21px; line-height:1.6;
}
.pagination { display:flex; gap:18px; padding:0 var(--gutter) 80px; max-width:var(--shell-max); margin:0 auto; }
.pagination .page-numbers {
  font-size:12px; letter-spacing:2px; text-transform:uppercase; font-weight:700;
  color:var(--accent-deep);
}
.pagination .page-numbers.current { color:var(--noir); border-bottom:1px solid var(--accent); }


/* ==========================================================================
   Narrow-viewport corrections.
   The comp is authored at 1440px; these keep the same layout honest once the
   auto-fit grids collapse to a single column.
   ========================================================================== */
@media (max-width: 767px) {
  /* Stacked strip items do not need the 48px column gap between them. */
  .strip__inner { gap:0; }
  .strip__item { padding:22px 0; }
  .strip__item + .strip__item { border-top:1px solid var(--band-rule); }

  /* Let the trailing note in a section head take the full width below the title. */
  .section-head { display:block; margin-bottom:40px; }
  .section-head > div { margin-bottom:20px; }
  .section-head p { max-width:none; margin-bottom:0; }
  .section-head .btn,
  .section-head .link-more { margin-bottom:0 !important; }

  .eyebrow { flex-wrap:wrap; gap:10px; }
  .reviews h2, .journal h2 { margin-bottom:40px; }

  /* Two tiles per row reads better than one very wide one. */
  .gallery { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

/* Even on the narrowest phones two 4/5 tiles beat one — six full-width
   portraits made the section scroll forever. */


/* ==========================================================================
   Page hero (interior pages)
   ========================================================================== */
.page-title {
  font-family:var(--serif); font-weight:400;
  font-size:clamp(28px, 4.2vw, 44px); line-height:1.08; letter-spacing:.5px;
  margin:0 0 20px; text-wrap:pretty;
}

/* ==========================================================================
   Service detail hero — full-bleed photo with an overlapping ivory panel
   ========================================================================== */
.svc-hero { background:var(--ivory); }
.svc-hero__photo {
  height:clamp(220px, 30vw, 400px); overflow:hidden; background:var(--shell);
}
.svc-hero__photo img { width:100%; height:100%; object-fit:cover; display:block; }
.svc-hero__shell { padding:0 var(--gutter); }
.svc-hero__panel {
  position:relative;
  margin-top:clamp(-96px, -6vw, -28px);
  margin-left:clamp(-48px, -4vw, -20px);
  background:var(--ivory);
  padding:clamp(22px,3.2vw,42px) clamp(20px,6vw,80px) 8px clamp(20px,4vw,48px);
  max-width:900px;
}
.svc-hero__panel .page-title { margin-bottom:18px; }
.svc-hero__lede { margin:0 0 30px; max-width:520px; }

.svc-strip {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap:clamp(20px,3vw,48px); margin-top:44px; border-top:1px solid var(--rule);
}
.svc-strip--light { margin-top:0; border-top:0; max-width:760px; }
.svc-strip__item { padding:24px 0 0; display:flex; flex-direction:column; gap:7px; }
.svc-strip__label {
  font-size:10.5px; letter-spacing:3px; text-transform:uppercase;
  color:var(--accent-deep); font-weight:700;
}
.svc-strip__value { font-size:16px; font-weight:300; color:var(--body); }

@media (max-width: 767px) {
  .svc-strip { gap:0; }
  .svc-strip__item { padding:18px 0; }
  .svc-strip__item + .svc-strip__item { border-top:1px solid var(--rule); }
}

/* ==========================================================================
   Treatment block
   ========================================================================== */
.h-lead {
  font-family:var(--serif); font-weight:400;
  font-size:clamp(26px, 4vw, 44px); line-height:1.14; letter-spacing:.5px;
  margin:0; text-wrap:pretty;
}
.h-sub {
  font-family:var(--serif); font-weight:400;
  font-size:clamp(22px, 3.2vw, 34px); line-height:1.2; letter-spacing:.5px;
  margin:0; text-wrap:pretty;
}
.treatment__intro {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap:clamp(26px, 5vw, 80px); align-items:start; margin:26px 0 56px;
}
.treatment__intro > * { min-width:0; }
.treatment__paras { display:flex; flex-direction:column; gap:20px; padding-top:6px; }
.treatment__body {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap:clamp(24px, 4vw, 56px); align-items:stretch;
}
.treatment__body > * { min-width:0; }
.treatment__media { position:relative; height:clamp(240px, 32vw, 440px); overflow:hidden; }
.treatment__media img { width:100%; height:100%; object-fit:cover; display:block; }
.treatment__pillars { display:flex; flex-direction:column; justify-content:center; gap:34px; }
.svc-pillar { padding-top:22px; border-top:1px solid var(--accent); }
.svc-pillar__num { font-family:var(--serif); font-size:15px; letter-spacing:2px; color:var(--accent-deep); margin-bottom:14px; }
.svc-pillar__title { font-family:var(--serif); font-size:22px; line-height:1.3; letter-spacing:.3px; margin-bottom:10px; text-wrap:pretty; }
.svc-pillar__body { font-size:15px; font-weight:300; line-height:1.75; color:var(--body); text-wrap:pretty; }

/* ==========================================================================
   Option cards (finishes / levels / overlay types)
   ========================================================================== */
.section-head--options { align-items:flex-end; margin-bottom:32px; }
.opt-cards {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap:28px; margin-bottom:40px;
}
.opt-card { display:flex; flex-direction:column; min-width:0; padding:16px 0 0; border-top:1px solid var(--accent); }
.opt-card__top { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:14px; }
.opt-card__num { font-family:var(--serif); font-size:15px; letter-spacing:2px; color:var(--accent-deep); }
.opt-card__price { font-family:var(--serif); font-size:20px; letter-spacing:.5px; }
.opt-card__media { position:relative; width:100%; height:clamp(190px, 22vw, 290px); overflow:hidden; margin-bottom:20px; }
.opt-card__media > img { width:100%; height:100%; object-fit:cover; display:block; }
.opt-card__name { font-family:var(--serif); font-weight:400; font-size:23px; line-height:1.25; letter-spacing:.5px; margin:0 0 10px; text-wrap:pretty; }
.opt-card p { margin:0 0 20px; }
.opt-card__meta {
  margin-top:auto; padding-top:14px; border-top:1px solid var(--rule);
  font-size:10.5px; letter-spacing:2.5px; text-transform:uppercase;
  color:var(--accent-deep); font-weight:700;
}

.extras {
  display:flex; align-items:center; justify-content:space-between;
  gap:28px; flex-wrap:wrap; padding-top:26px; border-top:1px solid var(--rule);
}
.extras__list { display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.extras__label {
  font-size:10.5px; letter-spacing:3px; text-transform:uppercase;
  color:var(--accent-deep); font-weight:700;
}
.extras__item { display:flex; align-items:baseline; gap:9px; font-size:15px; font-weight:300; color:var(--body); }
.extras__item::before { content:'\25C6'; color:var(--accent); font-size:8px; }
.link-rule--sm { font-size:11.5px; font-weight:700; color:var(--accent-deep); }

/* ==========================================================================
   Steps
   ========================================================================== */
.steps {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap:28px;
}
.step { padding:28px 0 0; border-top:1px solid var(--accent); min-width:0; }
.step--plain { padding-top:24px; }
.step__head { display:flex; align-items:baseline; gap:14px; margin-bottom:14px; }
.step__num { font-family:var(--serif); font-size:clamp(24px, 3.4vw, 38px); line-height:1; color:var(--accent); }
.step__num--sm { font-family:var(--serif); font-size:15px; letter-spacing:2px; color:var(--accent-deep); margin-bottom:14px; }
.step__time { font-size:10.5px; letter-spacing:2.5px; text-transform:uppercase; color:var(--accent-deep); font-weight:700; }
.step__title { font-family:var(--serif); font-weight:400; font-size:clamp(19px, 2.2vw, 24px); letter-spacing:.5px; margin:0 0 12px; }

/* ==========================================================================
   Split (photo + copy)
   ========================================================================== */
.split {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap:clamp(26px, 5vw, 80px); align-items:center;
}
.split--start { align-items:start; }
.split > * { min-width:0; }
.split__media { position:relative; height:clamp(240px, 32vw, 440px); overflow:hidden; background:var(--shell); }
.split__media img { width:100%; height:100%; object-fit:cover; display:block; }

.ticks {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap:0 36px; margin-bottom:36px;
}
.ticks--tight { margin-bottom:26px; }
.tick {
  display:flex; align-items:baseline; gap:12px;
  padding:14px 0; border-bottom:1px solid var(--rule);
  font-size:15px; font-weight:300; color:var(--body);
}
.tick::before { content:'\25C6'; color:var(--accent); font-size:8px; flex-shrink:0; }

/* ==========================================================================
   Related service cards
   ========================================================================== */
.related {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap:28px;
}
.related__card { display:grid; grid-template-columns:200px minmax(0,1fr); border:1px solid var(--rule); min-width:0; }
.related__media { position:relative; min-height:190px; min-width:0; }
/* The media column is stretched by the grid, so the photo is pinned to it
   rather than given a height of its own. */
.related__media > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.related__body { padding:clamp(22px,3vw,32px) clamp(20px,3vw,34px); display:flex; flex-direction:column; min-width:0; }
.related__body p { margin:0 0 20px; }
.related__cta {
  margin-top:auto; font-size:11.5px; letter-spacing:2.5px; text-transform:uppercase;
  font-weight:700; color:var(--accent-deep);
}
@media (max-width: 560px) {
  .related__card { grid-template-columns:1fr; }
  .related__media { height:200px; }
}

/* ==========================================================================
   Services hub
   ========================================================================== */
.hub { display:flex; flex-direction:column; gap:clamp(64px, 8vw, 116px); }
.hub__row {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap:clamp(28px, 4.5vw, 68px); align-items:center; scroll-margin-top:120px;
}
.hub__row > * { min-width:0; }
.hub__row--flip .hub__copy { order:2; }
.hub__row--flip .hub__media { order:1; }
.hub__media { height:clamp(210px, 24vw, 340px); overflow:hidden; background:var(--shell); }
.hub__media img { width:100%; height:100%; object-fit:cover; display:block; }

@media (max-width: 767px) {
  .hub__row--flip .hub__copy,
  .hub__row--flip .hub__media { order:0; }
}

.secondary {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap:clamp(18px, 2.6vw, 30px);
}
.secondary__card {
  display:flex; flex-direction:column; min-width:0;
  padding:24px 0 0; border-top:1px solid var(--accent); color:var(--noir);
}
.secondary__card h3 {
  font-family:var(--serif); font-weight:400; font-size:23px; line-height:1.25;
  letter-spacing:.4px; margin:0 0 10px; text-wrap:pretty;
}
.secondary__card:hover h3 { color:var(--accent-deep); }
.secondary__card--plain:hover h3 { color:var(--noir); }

/* ==========================================================================
   Service menu
   ========================================================================== */
.menu-layout { display:flex; flex-wrap:wrap; gap:clamp(26px, 4.5vw, 72px); align-items:flex-start; }
.menu-rail {
  position:sticky; top:112px; display:flex; flex-direction:column;
  flex:1 1 180px; min-width:0;
}
.menu-rail__head {
  font-size:10.5px; letter-spacing:3px; text-transform:uppercase;
  color:var(--accent-deep); font-weight:700;
  padding-bottom:14px; border-bottom:1px solid var(--accent);
}
.menu-rail__link {
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:13px 0; border-bottom:1px solid var(--rule);
  color:var(--noir); font-size:14.5px; font-weight:400;
}
.menu-rail__link:hover { color:var(--accent-deep); }
.menu-rail__link span { font-size:11px; color:var(--muted); font-weight:300; }
.menu-rail__foot { margin-top:30px; padding-top:22px; border-top:1px solid var(--rule); }

.menu-groups { display:flex; flex-direction:column; gap:clamp(30px, 5vw, 72px); flex:999 1 320px; min-width:0; }
.menu-group { scroll-margin-top:128px; }
.menu-group__head {
  display:flex; align-items:flex-end; justify-content:space-between; gap:36px;
  padding-bottom:20px; border-bottom:1px solid var(--accent);
}
.menu-group__num { font-family:var(--serif); font-size:13px; letter-spacing:3px; color:var(--accent-deep); margin-bottom:10px; }
.menu-group__name {
  font-family:var(--serif); font-weight:400;
  font-size:clamp(22px, 3.2vw, 34px); line-height:1.15; letter-spacing:.5px; margin:0;
}
.menu-group__note {
  font-size:14.5px; font-weight:300; line-height:1.7; color:var(--body);
  margin:0 0 4px; max-width:320px; text-align:right; text-wrap:pretty;
}
.menu-item {
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:28px;
  align-items:start; padding:20px 0; border-bottom:1px solid var(--rule);
}
.menu-item__title { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:6px; }
.menu-item__name { font-family:var(--serif); font-size:20px; letter-spacing:.3px; }
.menu-item__time { font-size:10.5px; letter-spacing:2px; text-transform:uppercase; color:var(--accent-deep); font-weight:700; }
.menu-item__desc { font-size:14.5px; font-weight:300; line-height:1.7; color:var(--body); margin:0; max-width:620px; text-wrap:pretty; }
.menu-item__side { display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.menu-item__price { font-family:var(--serif); font-size:21px; letter-spacing:.5px; white-space:nowrap; }
.menu-item__book { font-size:10px; letter-spacing:2px; text-transform:uppercase; font-weight:700; color:var(--accent-deep); }

.menu-notes { padding:28px 34px; background:var(--white); border:1px solid var(--rule); }
.menu-notes__head { font-size:10.5px; letter-spacing:3px; text-transform:uppercase; color:var(--accent-deep); font-weight:700; margin-bottom:12px; }
.menu-notes__grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap:12px 40px; }
.menu-notes__item { display:flex; align-items:baseline; gap:11px; font-size:14.5px; font-weight:300; line-height:1.7; color:var(--body); }
.menu-notes__item::before { content:'\25C6'; color:var(--accent); font-size:8px; flex-shrink:0; }

@media (max-width: 899px) {
  .menu-rail { position:static; flex-basis:100%; }
  .menu-group__head { display:block; }
  .menu-group__note { text-align:left; max-width:none; margin-top:12px; }
}

/* ==========================================================================
   Book online — studio cards
   ========================================================================== */
.studios {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap:32px; padding-top:44px;
}
.studio { display:flex; flex-direction:column; min-width:0; border:1px solid var(--rule); background:var(--white); }
.studio__photo { height:clamp(180px, 20vw, 260px); overflow:hidden; background:var(--shell); }
.studio__photo img { width:100%; height:100%; object-fit:cover; display:block; }
.studio__body { display:flex; flex-direction:column; flex:1; padding:clamp(26px,3vw,36px) clamp(24px,3vw,40px) clamp(30px,3.4vw,40px); }
/* min-height keeps the two cards' rows on the same line when only one of them
   carries a tag — the pill is 3px taller than the heading's line box. */
.studio__title { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:12px; min-height:31px; }
.studio__title h2 { font-family:var(--serif); font-weight:400; font-size:clamp(21px,2.8vw,30px); letter-spacing:.5px; margin:0; }
/* Baseline alignment drops the pill ~5px below the heading's optical centre,
   because its own baseline sits near its bottom edge. Nudged back up; relative
   offset, so the row's height is unchanged. */
.studio__tag {
  font-size:10px; letter-spacing:2px; text-transform:uppercase; font-weight:700;
  color:var(--accent-deep); border:1px solid var(--accent); padding:5px 10px;
  position:relative; top:-4px;
}
.studio__rows { display:flex; flex-direction:column; margin-bottom:30px; border-top:1px solid var(--rule); }
.studio__row {
  display:flex; align-items:baseline; justify-content:space-between; gap:18px;
  padding:12px 0; border-bottom:1px solid var(--rule);
}
.studio__row span { font-size:10.5px; letter-spacing:2.5px; text-transform:uppercase; color:var(--accent-deep); font-weight:700; }
.studio__row em { font-style:normal; font-size:15px; font-weight:300; color:var(--body); text-align:right; }
.studio__book { margin-top:auto; display:block; padding:18px 28px; }

.def-row {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap:8px 28px; padding:18px 0; border-bottom:1px solid var(--rule);
}
.def-row__label { font-size:10.5px; letter-spacing:2.5px; text-transform:uppercase; color:var(--accent-deep); font-weight:700; padding-top:3px; }
.def-row__body { font-size:15px; font-weight:300; line-height:1.75; color:var(--body); text-wrap:pretty; }
.def-actions { display:flex; align-items:center; gap:26px; flex-wrap:wrap; padding-top:26px; }

/* ==========================================================================
   Gift certificates
   ========================================================================== */
.gift-hero {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap:clamp(28px, 5vw, 80px); align-items:center; padding-bottom:clamp(48px,6vw,88px);
}
.gift-hero > * { min-width:0; }
.gift-hero__kicker {
  font-size:11.5px; letter-spacing:4px; text-transform:uppercase;
  color:var(--accent-deep); font-weight:600; margin-bottom:20px;
}
.gift-card__wrap { position:relative; width:100%; max-width:460px; justify-self:center; }
.gift-card__frame { position:absolute; left:-16px; top:-16px; right:30px; bottom:30px; border:1px solid var(--accent); pointer-events:none; }
.gift-card { position:relative; background:var(--noir); padding:clamp(34px,4vw,48px) clamp(28px,3.4vw,44px) clamp(30px,3.4vw,40px); overflow:hidden; }
.gift-card__mark { position:absolute; right:-70px; bottom:-70px; width:280px; opacity:.09; pointer-events:none; }
.gift-card__inner { position:relative; display:flex; flex-direction:column; }
.gift-card__logo { width:164px; margin-bottom:30px; }
.gift-card__label { font-size:10.5px; letter-spacing:3.5px; text-transform:uppercase; color:var(--accent-on-dark); font-weight:700; margin-bottom:12px; }
.gift-card__amount { font-family:var(--serif); font-size:clamp(32px,6vw,64px); line-height:1; letter-spacing:1px; color:var(--ivory); margin-bottom:24px; }
.gift-card__rule { height:1px; background:rgba(248,243,234,.18); margin-bottom:20px; }
.gift-card__foot { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; }
/* Right-aligned only while the two blocks actually share a row. Once the foot
   wraps, the second block is alone on its line at flex-start, so right-aligning
   its text just ragged-indents the label above the value. */
.gift-card__foot-end { text-align:right; }
.gift-card__small { font-size:9.5px; letter-spacing:2.5px; text-transform:uppercase; color:var(--accent-on-dark); font-weight:700; margin-bottom:6px; }
.gift-card__value { font-size:13.5px; font-weight:300; line-height:1.7; color:rgba(248,243,234,.85); }

@media (max-width: 719px) {
  .gift-card__foot-end { text-align:left; }
  /* Same as .about__frame / .team__frame: the -16px overhang lands in the shell
     gutter, so the frame comes back to the shell edge and the card is inset by
     that much to give it something to overhang. */
  .gift-card__frame { left:10px; top:-12px; right:26px; bottom:26px; }
  .gift-card { margin-left:26px; }
  /* 280px of watermark on a 350px card stops being texture and becomes the
     subject, with the wordmark clipped mid-letter by the card's overflow.
     Scaled back so it sits behind the type the way it does at 460px. */
  .gift-card__mark { width:200px; right:-46px; bottom:-46px; }
}

.amounts {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap:28px; margin-bottom:36px;
}
.amount { display:flex; flex-direction:column; min-width:0; padding:22px 0 0; border-top:1px solid var(--accent); }
.amount__value { font-family:var(--serif); font-size:clamp(26px,4vw,42px); line-height:1; letter-spacing:.5px; margin-bottom:16px; }
.amount__label { font-size:10.5px; letter-spacing:2.5px; text-transform:uppercase; color:var(--accent-deep); font-weight:700; margin-bottom:10px; }
.amount p { margin:0 0 20px; }
.amount__btn {
  margin-top:auto; padding:14px 0 0; background:transparent; border:0;
  border-top:1px solid var(--rule); text-align:left; cursor:pointer;
  font-family:var(--sans); font-size:10.5px; letter-spacing:2.5px;
  text-transform:uppercase; font-weight:700; color:var(--accent-deep);
}

.chooser { position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:24px; }
.chooser[hidden] { display:none; }
.chooser__scrim { position:absolute; inset:0; background:rgba(22,18,13,.72); animation:lotusFade .2s ease-out both; }
.chooser__panel {
  position:relative; width:100%; max-width:800px; max-height:90vh; overflow-y:auto;
  background:var(--ivory); padding:clamp(34px,4vw,52px) clamp(24px,3.4vw,52px) clamp(30px,3.4vw,44px);
}
.chooser__close {
  position:absolute; right:20px; top:18px; background:transparent; border:0; cursor:pointer;
  font-family:var(--sans); font-size:11px; letter-spacing:2.5px; text-transform:uppercase;
  font-weight:700; color:var(--muted);
}
.chooser__step { font-size:11px; letter-spacing:4px; text-transform:uppercase; color:var(--accent-deep); font-weight:700; margin-bottom:14px; }
.chooser h2 { margin-bottom:12px; }
.chooser__options { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap:20px; }
.chooser__option {
  display:flex; flex-direction:column; min-width:0;
  padding:26px 28px 24px; background:var(--white); border:1px solid var(--rule); color:var(--noir);
}
.chooser__option:hover { border-color:var(--accent); color:var(--noir); }
.chooser__name { font-family:var(--serif); font-size:clamp(20px,2.6vw,28px); letter-spacing:.5px; margin-bottom:10px; }
.chooser__hours { font-size:10.5px; letter-spacing:2.5px; text-transform:uppercase; color:var(--accent-deep); font-weight:700; margin:16px 0 22px; }
.chooser__go { margin-top:auto; padding-top:16px; border-top:1px solid var(--rule); font-size:11px; letter-spacing:2.5px; text-transform:uppercase; font-weight:700; color:var(--accent-deep); }

/* ==========================================================================
   Blog index + article
   ========================================================================== */
.topics {
  display:flex; align-items:center; gap:clamp(12px,2vw,24px); flex-wrap:wrap;
  padding:18px 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
.topics__label { font-size:10.5px; letter-spacing:3px; text-transform:uppercase; color:var(--accent-deep); font-weight:700; }
.topics a { font-size:14.5px; font-weight:400; color:var(--noir); }
.topics a:hover, .topics a[aria-current] { color:var(--accent-deep); }

.featured {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap:clamp(26px, 4vw, 56px); align-items:center; color:var(--noir);
}
.featured > * { min-width:0; }
.featured__media { position:relative; height:clamp(260px, 32vw, 420px); overflow:hidden; }
.featured__media img { width:100%; height:100%; object-fit:cover; display:block; }
.featured__meta { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:18px; font-size:10.5px; letter-spacing:2.5px; text-transform:uppercase; font-weight:700; }
.featured__badge { color:var(--accent-text); background:var(--accent); padding:7px 13px; }
.featured__tag { color:var(--accent-deep); }
.featured__date { color:var(--muted); font-weight:400; }
.featured h2 {
  font-family:var(--serif); font-weight:400;
  font-size:clamp(26px, 3.6vw, 40px); line-height:1.18; letter-spacing:.5px;
  margin:0 0 18px; text-wrap:pretty;
}
.featured:hover h2 { color:var(--accent-deep); }
.featured p { margin:0 0 24px; }

.post-grid-head {
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:28px; flex-wrap:wrap; padding-bottom:18px; margin-bottom:clamp(26px,3.4vw,40px);
  border-bottom:1px solid var(--accent);
}

.article { max-width:840px; margin:0 auto; padding:0 var(--gutter); }
.article__lede { font-size:clamp(16px,1.7vw,19px); font-weight:300; line-height:1.7; color:var(--body); margin:0 0 30px; text-wrap:pretty; }
.article__byline {
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding:18px 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
.article__author { display:flex; align-items:center; gap:14px; }
.article__avatar { width:44px; height:44px; overflow:hidden; background:var(--shell); flex-shrink:0; position:relative; }
.article__avatar img { width:100%; height:100%; object-fit:cover; display:block; }
/* The byline is the studio, not a person, so the mark stands in for a face —
   contained and inset rather than cropped to the square. */
.article__avatar img[aria-hidden] { object-fit:contain; padding:7px; }
.article__name { font-size:14.5px; font-weight:600; letter-spacing:.2px; }
.article__date { font-size:12.5px; font-weight:300; color:var(--muted); }
.article__cat {
  font-size:10.5px; letter-spacing:2.5px; text-transform:uppercase;
  color:var(--accent-deep); font-weight:700; border:1px solid var(--accent); padding:7px 13px;
}
.article__lead { max-width:1040px; margin:0 auto; padding:clamp(24px,3.4vw,40px) var(--gutter) 0; }
.article__lead-media { width:100%; height:clamp(240px, 36vw, 500px); position:relative; overflow:hidden; }
.article__lead-media img { width:100%; height:100%; object-fit:cover; display:block; }

.article__body { padding-top:clamp(34px,4.6vw,60px); }
.article__body > p { font-size:clamp(15.5px,1.6vw,17.5px); font-weight:300; line-height:1.85; color:var(--body); margin:0 0 24px; text-wrap:pretty; }
.article__body > p:first-of-type { color:var(--noir); font-size:clamp(16px,1.7vw,18.5px); }
.article__body h2 { font-family:var(--serif); font-weight:400; font-size:clamp(24px,3vw,32px); line-height:1.25; letter-spacing:.4px; margin:2em 0 .6em; text-wrap:pretty; }
.article__body h3 { font-family:var(--serif); font-weight:400; font-size:clamp(19px,2vw,23px); line-height:1.35; letter-spacing:.2px; margin:1.8em 0 .5em; }
.article__body ul, .article__body ol { font-size:clamp(15.5px,1.6vw,17.5px); font-weight:300; line-height:1.85; color:var(--body); margin:0 0 24px; padding-left:1.2em; }
.article__body li { margin-bottom:.5em; }
/* Imported posts carry images at whatever ratio they were uploaded at, which
   reads as noise down a column. Every in-article image is normalised to one
   ratio and the full measure so the page keeps a steady rhythm. */
.article__body figure { margin:36px 0; }
.article__body figure img,
.article__body > p > a > img,
.article__body > p > img,
.article__body > a > img {
  display:block; width:100%; height:auto;
  aspect-ratio:3 / 2; object-fit:cover;
  background:var(--shell);
}
.article__body figcaption {
  font-size:13.5px; font-weight:300; line-height:1.6;
  color:var(--muted); margin-top:12px;
}

/* Two images side by side, sharing the same ratio. */
.article__figures {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap:20px; margin:36px 0;
}
.article__figures figure { margin:0; }

/* A pull-out box for practical checklists inside an article. */
.article__note {
  background:var(--white); border:1px solid var(--rule);
  padding:clamp(22px,3vw,32px) clamp(20px,2.6vw,34px); margin:36px 0;
}
.article__note h3 { margin-top:0 !important; }
.article__note ul { margin-bottom:0 !important; }

/* Simple comparison tables read better with a ruled head. */
.article__body table th {
  font-size:10.5px; letter-spacing:2px; text-transform:uppercase;
  color:var(--accent-deep); font-weight:700; border-bottom:1px solid var(--accent);
}
.article__body blockquote {
  margin:0 0 34px; padding:22px 0 22px 26px; border-left:2px solid var(--accent);
  font-family:var(--serif); font-size:clamp(19px,2.2vw,25px); line-height:1.5;
  letter-spacing:.2px; color:var(--noir); text-wrap:pretty;
}
.article__body a { text-decoration:underline; text-underline-offset:3px; }
.article__body a.btn,
.article__body a.link-rule,
.article__body a.link-more,
.article__body figure a,
.inline-cta a { text-decoration:none; }
.article__body table { width:100%; border-collapse:collapse; margin:1.6em 0; font-size:15px; font-weight:300; }
.article__body th, .article__body td { padding:12px; border-bottom:1px solid var(--rule); text-align:left; }

@media (max-width: 640px) {
  /* Auto layout pushed the last column off the screen — every article table is
     four columns, so fix the widths and let the labels wrap instead. */
  .article__body table { table-layout:fixed; font-size:13.5px; }
  .article__body th, .article__body td { padding:10px 8px; }
  .article__body td { overflow-wrap:anywhere; }
  /* Tighter tracking so a heading like MANICURES stays one word in its column. */
  .article__body th { font-size:9.5px; letter-spacing:.8px; padding-right:14px; }
  .article__body th:first-child, .article__body td:first-child { width:30%; }
}

@media (max-width: 380px) {
  /* Below ~380px the columns are too narrow to wrap without breaking words
     mid-syllable, so the table scrolls sideways in its own box instead. */
  .article__body table { display:block; overflow-x:auto; table-layout:auto; }
  .article__body th, .article__body td { white-space:nowrap; }
  .article__body td { overflow-wrap:normal; }
  .article__body th:first-child, .article__body td:first-child { width:auto; }
}

.inline-cta {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap:clamp(18px,2.6vw,30px); align-items:center;
  padding:clamp(24px,3.4vw,34px) clamp(22px,2.6vw,36px);
  background:var(--white); border:1px solid var(--rule); margin:8px 0 40px;
}
.inline-cta h3 { font-family:var(--serif); font-weight:400; font-size:clamp(20px,2.2vw,25px); line-height:1.3; letter-spacing:.3px; margin:0 0 8px; text-wrap:pretty; }
.inline-cta__actions { display:flex; gap:14px; flex-wrap:wrap; align-items:center; justify-self:end; }
@media (max-width: 620px) { .inline-cta__actions { justify-self:start; } }

.filed { display:flex; align-items:center; gap:18px; flex-wrap:wrap; padding-top:24px; border-top:1px solid var(--rule); }
.filed__label { font-size:10.5px; letter-spacing:2.5px; text-transform:uppercase; color:var(--accent-deep); font-weight:700; }
.filed a { font-size:14.5px; font-weight:300; color:var(--body); }

/* ==========================================================================
   Policy pages
   ========================================================================== */
.glance {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap:clamp(18px,2.6vw,30px);
}
.glance__item { min-width:0; padding:22px 0 0; border-top:1px solid var(--accent); }
.glance__figure { font-family:var(--serif); font-size:clamp(30px,3.6vw,42px); line-height:1; letter-spacing:.5px; margin-bottom:12px; }
.glance__label { font-size:10.5px; letter-spacing:2.5px; text-transform:uppercase; color:var(--accent-deep); font-weight:700; margin-bottom:10px; }

.clause { padding:22px 0; border-bottom:1px solid var(--rule); }
.clause h3 { font-family:var(--serif); font-weight:400; font-size:clamp(20px,2.2vw,24px); line-height:1.3; letter-spacing:.3px; margin:0 0 10px; text-wrap:pretty; }
.clause p { font-size:15px; font-weight:300; line-height:1.8; color:var(--body); margin:0; text-wrap:pretty; }

.doc-layout { display:flex; flex-wrap:wrap; gap:clamp(28px,4.5vw,72px); align-items:flex-start; }
.doc-toc { position:sticky; top:112px; display:flex; flex-direction:column; flex:1 1 180px; min-width:0; }
.doc-toc a { padding:13px 0; border-bottom:1px solid var(--rule); color:var(--noir); font-size:14.5px; font-weight:400; }
.doc-toc a:hover { color:var(--accent-deep); }
.doc-body { min-width:0; flex:999 1 320px; display:flex; flex-direction:column; gap:clamp(30px,4vw,48px); }
.doc-section { scroll-margin-top:128px; }
.doc-section h2 {
  font-family:var(--serif); font-weight:400; font-size:clamp(22px,2.8vw,30px);
  line-height:1.25; letter-spacing:.4px; margin:0 0 16px;
  padding-bottom:14px; border-bottom:1px solid var(--accent); text-wrap:pretty;
}
.doc-section p { font-size:15.5px; font-weight:300; line-height:1.85; color:var(--body); margin:0 0 16px; max-width:760px; text-wrap:pretty; }
.partners { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap:20px; max-width:760px; }
.partners a { display:flex; flex-direction:column; gap:7px; min-width:0; padding:20px 0 0; border-top:1px solid var(--rule); color:var(--noir); }
.partners__name { font-family:var(--serif); font-size:21px; letter-spacing:.3px; }
.partners__label { font-size:13.5px; font-weight:300; color:var(--muted); overflow-wrap:anywhere; }
.partners__go { font-size:10.5px; letter-spacing:2.5px; text-transform:uppercase; font-weight:700; color:var(--accent-deep); margin-top:5px; }

@media (max-width: 899px) {
  .doc-toc { position:static; flex-basis:100%; }
}

/* ==========================================================================
   Book Online — compact.
   The comp sizes this like a landing page, but it is a two-choice router:
   the reader is here to pick a studio and leave. Everything is tightened and
   the photo is reduced to a band so both cards sit in one screen.
   ========================================================================== */
.page-book-online .page-hero { padding-top:clamp(24px, 3vw, 40px); padding-bottom:clamp(40px, 5vw, 72px); }
.page-book-online .page-hero__grid {
  padding-bottom:clamp(20px, 2.6vw, 30px);
  gap:clamp(20px, 3vw, 48px);
  align-items:center;
}
.page-book-online .page-hero .lede { font-size:16px; line-height:1.7; }

/* Narrower than the shell so the interior photograph can be given real height
   without the card turning into a letterbox. Centred, or it hangs off the left
   edge of the shell. */
.page-book-online .studios {
  padding-top:clamp(20px, 2.2vw, 26px); gap:22px;
  max-width:820px; margin-inline:auto;
}
.page-book-online .studio__photo { height:clamp(150px, 16vw, 215px); }
.page-book-online .studio__body {
  padding:clamp(17px, 1.7vw, 22px) clamp(18px, 1.9vw, 26px) clamp(18px, 1.9vw, 22px);
}
.page-book-online .studio__title { margin-bottom:6px; }
.page-book-online .studio__title h2 { font-size:clamp(19px, 1.9vw, 23px); }
.page-book-online .studio__body > .copy--sm { margin-bottom:13px !important; line-height:1.6; }
.page-book-online .studio__rows { margin-bottom:15px; }
.page-book-online .studio__row { padding:7px 0; }
.page-book-online .studio__book { padding:13px 22px; font-size:11.5px; }

/* Two-up on phones. The base .studios auto-fit needs 280px per track, so below
   a ~655px viewport it drops to one column and puts the second studio a full
   screen below the first. This page is a two-choice router, so both options
   have to be visible together. Forced to 1fr 1fr, with every inner value on a
   vw clamp so the cards shrink continuously down to a 320px phone instead of
   snapping at the breakpoint and overflowing.

   Scoped to .page-book-online throughout: .studio__rows / .studio__row /
   .studio__title are shared with the contact page's location cards, which stay
   one-up and full size. */
@media (max-width: 654px) {
  .page-book-online .studios {
    grid-template-columns:1fr 1fr;
    gap:clamp(9px, 2.6vw, 18px);
    padding-top:clamp(16px, 4vw, 26px);
  }
  .page-book-online .studio__photo { height:clamp(78px, 24vw, 150px); }
  .page-book-online .studio__body {
    padding:clamp(11px, 3.2vw, 20px) clamp(10px, 3vw, 20px) clamp(14px, 3.6vw, 22px);
  }
  /* min-height:31px on the base rule is there to line the two headings up when
     only one carries a tag; at this size the pill wraps under the name anyway,
     so it would just add dead space. */
  .page-book-online .studio__title { min-height:0; gap:6px; margin-bottom:5px; }
  .page-book-online .studio__title h2 { font-size:clamp(14px, 4.2vw, 22px); }
  .page-book-online .studio__tag {
    font-size:clamp(7px, 2vw, 9px); letter-spacing:1.2px; padding:2px 5px; top:-2px;
  }
  .page-book-online .studio__body > .copy--sm {
    font-size:clamp(10px, 2.9vw, 13px); margin-bottom:10px !important;
  }
  .page-book-online .studio__rows { margin-bottom:clamp(11px, 3vw, 16px); }
  .page-book-online .studio__row {
    padding:clamp(5px, 1.6vw, 8px) 0; gap:clamp(4px, 1.4vw, 10px);
  }
  /* The uppercase labels are letter-spaced, which costs more width than the
     font-size suggests; the tracking has to come down with it or "MON – SAT"
     alone is wider than half a card. */
  .page-book-online .studio__row span {
    font-size:clamp(7px, 2.05vw, 10px); letter-spacing:clamp(.4px, .28vw, 1.6px);
  }
  .page-book-online .studio__row em { font-size:clamp(9.5px, 2.8vw, 14px); }
  /* Dropped at this size: it is the one row whose value is long enough to wrap
     inside a half-width card, and hours are what the reader is choosing on.
     Targeted by class, not :nth-child, so adding a row above it can't silently
     hide the wrong one. */
  .page-book-online .studio__row--parking { display:none; }
  .page-book-online .studio__book {
    padding:clamp(9px, 2.6vw, 14px) clamp(4px, 1.6vw, 12px);
    font-size:clamp(8px, 2.35vw, 11px); letter-spacing:clamp(.4px, .3vw, 1.6px);
  }
}

/* "Book at Lawrenceville" is 4 characters longer than "Book at Shadyside", which
   is enough to wrap one button to two lines and not the other. Because the
   button is bottom-anchored in an equal-height card, that misaligns the two
   tops. Measured: it wraps at and below 520px and clears at 560px, so the name
   drops out below that and both buttons read "Book →". The heading directly
   above says which studio it is, and aria-label carries the full text. */
@media (max-width: 559px) {
  .page-book-online .studio__book-name { display:none; }
}

/* Below ~430px the "New" pill no longer fits on the same line as
   "Lawrenceville" and drops under it, so that card's address and hours rows sit
   a line lower than Shadyside's and nothing lines up across the pair. Measured
   the inline fit first: it is short by 1.3px at 390 and 16.2px at 320, so
   shrinking the name to claw that back would leave the layout one font fallback
   away from breaking. Reserving the wrapped height on both cards instead — the
   same trick, and the same reason, as the min-height on the base rule. */
@media (max-width: 429px) {
  .page-book-online .studio__title { min-height:clamp(39px, 11.2vw, 44px); align-items:flex-start; }
}

/* The two supporting sections are reference material, not headline content. */
.page-book-online .section { padding-top:clamp(34px, 4vw, 56px); padding-bottom:clamp(34px, 4vw, 56px); }
.page-book-online .treatment__intro { margin:20px 0 32px; }
.page-book-online .steps { gap:24px; }
.page-book-online .step { padding-top:22px; }
.page-book-online .step__title { font-size:clamp(18px, 2vw, 21px); margin-bottom:10px; }
.page-book-online .def-row { padding:14px 0; }
.page-book-online .def-actions { padding-top:20px; }

/* ==========================================================================
   Contact — location cards with maps
   ========================================================================== */
.contact-grid {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap:28px;
}
.contact-card { display:flex; flex-direction:column; min-width:0; border:1px solid var(--rule); background:var(--white); }
.contact-card__map { height:clamp(140px, 13vw, 175px); background:var(--shell); }
.contact-card__map iframe { width:100%; height:100%; border:0; display:block; filter:grayscale(.35) contrast(1.02); }
.contact-card__body { display:flex; flex-direction:column; flex:1; padding:clamp(18px,1.9vw,24px) clamp(18px,2vw,26px) clamp(18px,2vw,24px); }
.contact-card__body h3 { font-family:var(--serif); font-weight:400; font-size:clamp(19px,1.9vw,23px); letter-spacing:.5px; margin:0; }
.contact-card__address { font-style:normal; font-size:15px; font-weight:300; line-height:1.6; color:var(--body); margin-bottom:14px; }
.contact-card__actions { display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-top:auto; }
/* The hours/phone rows are shared with the Book Online cards, which are already
   tuned; tighten them only inside the contact card. */
.contact-card .studio__rows { margin-bottom:18px; }
.contact-card .studio__row { padding:8px 0; }
.contact-card .studio__title { margin-bottom:8px; }

/* ==========================================================================
   Enquiry form
   ========================================================================== */
.enquiry { display:flex; flex-direction:column; gap:18px; }
.enquiry__row { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap:18px; }
.enquiry__hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.field { display:flex; flex-direction:column; gap:8px; min-width:0; }
.field__label {
  font-size:10.5px; letter-spacing:2.5px; text-transform:uppercase;
  color:var(--accent-deep); font-weight:700;
}
.field__label em { font-style:normal; color:var(--muted); font-weight:400; letter-spacing:1.5px; }
.field input, .field textarea, .field select {
  font-family:var(--sans); font-size:15.5px; font-weight:300; color:var(--noir);
  background:var(--ivory); border:1px solid var(--rule); border-radius:0;
  padding:13px 14px; width:100%;
}
.section--white .field input, .section--white .field textarea, .section--white .field select { background-color:var(--ivory); }
.field textarea { resize:vertical; min-height:130px; line-height:1.7; }
/* The select has to be drawn by hand or the browser gives it a rounded, grey,
   system-font control next to the flat inputs. Height is matched to the text
   inputs by using the same font-size and padding, and the chevron is an inline
   SVG in the accent so nothing extra is fetched. */
.field select {
  appearance:none; -webkit-appearance:none; cursor:pointer; line-height:1.3;
  padding-right:42px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%238A5A1E' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center;
}
/* 16px on phones: iOS Safari zooms the whole page when you focus a control
   with a smaller font, and the layout never quite recovers. */
@media (max-width: 640px) {
  .field input, .field textarea, .field select { font-size:16px; }
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline:none; border-color:var(--accent); box-shadow:0 0 0 1px var(--accent);
}
.enquiry .btn { align-self:flex-start; border:0; cursor:pointer; font-family:var(--sans); }

.form-note {
  padding:14px 18px; margin:0 0 20px; font-size:15px; font-weight:300; line-height:1.6;
  border-left:2px solid var(--accent); background:var(--ivory);
}
.form-note--ok { border-left-color:#1a7f37; }
.form-note--bad { border-left-color:#b32d2e; }

/* Editor-inserted media in a post body.
   .article__body styled p/h2/h3/ul but never img, so an image wider than the
   760px column overflowed and was cut. The blog was all-text until 2026-08-27,
   which is why nothing had hit it. */
.article__body img { max-width:100%; height:auto; display:block; }
.article__body figure { margin:36px auto; }
.article__body figure img { margin-inline:auto; border-radius:2px; }
.article__body figcaption,
.article__body .wp-element-caption {
  font-family:var(--sans); font-size:14px; font-weight:300; line-height:1.6;
  color:var(--muted); text-align:center; margin-top:12px;
}

/* "All articles" in the Keep reading header sits directly above the grids own

/* "All articles" in the Keep reading header sits directly above the grid's own
   rule, so .link-rule's border-bottom read as a second stacked line. Scoped to
   this one header - .link-rule keeps its underscore everywhere else, where it
   is the only line present. */
.post-grid-head .link-rule { border-bottom:none; padding-bottom:0; }

/* The rule above normalises in-article photos to 3:2 with object-fit:cover, on
   purpose, so a column of photographs keeps one rhythm. A designed graphic is
   not a photograph: cropping an infographic to 3:2 cuts the top and bottom off
   its own layout. .fig-natural opts a figure out and lets it show at the ratio
   it was drawn at. Use it for diagrams and charts, not for photos. */
.article__body figure.fig-natural img {
  aspect-ratio:auto; object-fit:contain; height:auto; background:none;
}