/* =========================================================================
   SYNERGY HEALTH — Medspa
   Design system: Identity Kit v1.2 — light-dominant editorial clinical
   Brand: Meridian Navy #16283F + Champagne #A8874F on Alabaster #FAF8F5.
   Type: Cormorant Garamond (28px+) / Inter / IBM Plex Mono. Radius 2px.
   Authored bespoke — no framework, no build step.
   ========================================================================= */

/* ------------------------------ Tokens ---------------------------------- */
:root {
  /* ---- Brand primaries (Identity Kit v1.2) ---- */
  --navy:        #16283F;   /* Meridian Navy — dominant brand color */
  --clinic-blue: #26456B;   /* Supporting primary / hover */
  --brand-ink:   #0B1622;   /* Deepest value — hero grounds */

  /* ---- Champagne ---- */
  --champagne:       #A8874F;  /* DECORATIVE ONLY — rules, marks, 24px+ */
  --champagne-deep:  #7A6034;  /* Text-safe champagne on light grounds */
  --champagne-light: #D6C09A;  /* Champagne on navy grounds */

  /* ---- Accent ---- */
  --eucalyptus: #4E7A6A;    /* Regenerative + wellness. Under 8%. */

  /* ---- Neutrals ---- */
  --alabaster: #FAF8F5;
  --bone:      #F1EDE7;
  --mist:      #D9D4CC;
  --slate:     #2B3340;  /* darkened 2026-09-11: solid readable body copy, was #5A6474 */

  /* =====================================================================
     LEGACY TOKEN BRIDGE
     The stylesheet below was authored against a dark/red system. Rather
     than rewrite 700 lines of selectors, the old token names are re-pointed
     at brand values. Default ground is now LIGHT (Alabaster); the `.on-navy`
     scope further down re-points the same names for navy grounds, so every
     existing rule inverts correctly with no selector changes.
     ===================================================================== */

  /* Accent slots (were red) */
  --red:        var(--navy);            /* primary solid — always white text */
  --red-bright: var(--champagne-deep);  /* text-safe accent / hover */
  --red-deep:   var(--brand-ink);
  --red-glow:   rgba(22, 40, 63, .28);

  /* Ground slots (were near-black) — now the light canvas */
  --ink:        var(--alabaster);
  --ink-800:    var(--bone);
  --ink-700:    #E7E2DA;
  --surface:    #FFFFFF;
  --surface-2:  var(--bone);
  --hairline:   rgba(11, 22, 34, .10);
  --hairline-2: rgba(11, 22, 34, .17);

  /* Inverted-section slots (were the white break sections) */
  --cream:      #FFFFFF;
  --cream-2:    var(--bone);
  --cream-line: rgba(11, 22, 34, .12);

  /* Text slots */
  --on-dark:        var(--brand-ink);
  --on-dark-muted:  var(--slate);
  --on-dark-faint:  #8A929E;
  --on-light:       var(--brand-ink);
  --on-light-muted: var(--slate);

  /* Type — Fraunces 28px+ ONLY, Plus Jakarta Sans below, Plex Mono for data.
     Swapped 2026-09-04 from Cormorant Garamond + Inter: that exact pairing is
     one of the most common AI-template "elegant wellness" defaults, and Inter
     specifically reads as the generic neo-grotesk default at this point. */
  --serif: "Spectral", Georgia, "Times New Roman", serif;
  --sans:  "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Spacing scale (spacious / density 3) */
  --s-1: .5rem;  --s-2: 1rem;  --s-3: 1.5rem;  --s-4: 2rem;
  --s-5: 3rem;   --s-6: 4rem;  --s-7: 6rem;     --s-8: 8rem;

  --container: 1240px;

  /* Brand foundation: 2px radius everywhere */
  --radius:    2px;
  --radius-sm: 2px;
  --radius-lg: 2px;

  --shadow:      0 12px 32px -20px rgba(11, 22, 34, .35);
  --shadow-red:  0 14px 34px -18px rgba(22, 40, 63, .40);

  --ease: cubic-bezier(.16,1,.3,1);          /* expo.out */
  --ease-in: cubic-bezier(.7,0,.84,0);
  --dur: .5s;

  --nav-h: 76px;
}

/* ------------------------------ Reset ----------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

body {
  font-family: var(--sans);
  background: var(--ink);
  color: var(--on-dark);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; color: inherit; background: none; border: none; }
:focus-visible { outline: 2px solid var(--red-bright); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--red); color: #fff; }

/* ---------------------------- Utilities --------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 3rem); }
.section { padding-block: clamp(4rem, 9vw, 8rem); position: relative; }
.eyebrow {
  font-family: var(--sans);
  font-size: .74rem; font-weight: 600;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--red-bright);
  display: inline-flex; align-items: center; gap: .7rem;
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--red); display: inline-block; }
.eyebrow.center::after { content: ""; width: 26px; height: 1px; background: var(--red); display: inline-block; }
.eyebrow.on-light { color: var(--red); }

/* Base heading rule. The 28px Cormorant threshold is enforced in the brand
   activation layer at the foot of this file. */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; line-height: 1.14; letter-spacing: .003em; }
.display { font-size: clamp(2.6rem, 6.4vw, 5.1rem); font-weight: 400; }
/* On narrow phones the 2.6rem floor is too large for "Feel unmistakably you."
   to fit on one line, which breaks the intentional 2-line hero into 3. Scale
   it down further below 480px so both lines stay on their own single line. */
@media (max-width: 480px){
  .hero h1.display { font-size: clamp(1.85rem, 8.6vw, 2.3rem); }
}
.h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); }
.h3 { font-size: clamp(1.35rem, 2.2vw, 1.7rem); }
.lede { font-size: clamp(1.05rem, 1.5vw, 1.28rem); color: var(--on-dark-muted); max-width: 56ch; }
.serif-em { font-style: italic; color: var(--red-bright); } /* Cormorant italic carries emphasis */

.section-head { max-width: 760px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head .h2 { margin-top: 1rem; }
.section-head p { margin-top: 1.1rem; color: var(--on-dark-muted); font-size: 1.08rem; }

/* Light section variants */
.section--light { background: var(--cream); color: var(--on-light); }
.section--light .lede,
.section--light .section-head p { color: var(--on-light-muted); }
.section--light h1,.section--light h2,.section--light h3 { color: var(--on-light); }

/* ---------------------------- Buttons ----------------------------------- */
.btn {
  --btn-bg: var(--red); --btn-fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 52px; padding: 0 1.7rem;
  background: var(--btn-bg); color: var(--btn-fg);
  border-radius: var(--radius); font-weight: 600; font-size: .98rem; letter-spacing: .01em;
  white-space: nowrap;
  position: relative; isolation: isolate;
  transition: transform .18s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
  will-change: transform;
}
.btn svg { width: 18px; height: 18px; }
.btn:hover { background: var(--red-bright); box-shadow: var(--shadow-red); transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--on-dark);
  border: 1px solid var(--hairline-2);
}
.btn--ghost:hover { --btn-bg: rgba(11,22,34,.05); box-shadow: none; border-color: var(--on-dark-muted); }
.btn--light { --btn-bg: var(--ink); --btn-fg: var(--cream); }
.btn--light:hover { --btn-bg: #000; box-shadow: 0 18px 40px -18px rgba(0,0,0,.5); }
.btn--on-light-ghost { --btn-bg: transparent; --btn-fg: var(--on-light); border: 1px solid var(--cream-line); }
.btn--on-light-ghost:hover { --btn-bg: rgba(20,16,12,.05); box-shadow: none; }
.btn--block { width: 100%; }
.btn--lg { min-height: 58px; padding: 0 2.1rem; font-size: 1.02rem; }

.link-arrow { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--red-bright); font-size: .95rem; }
.link-arrow svg { width: 17px; height: 17px; transition: transform .25s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }
.section--light .link-arrow { color: var(--red); }

/* ------------------------- Ambient / glow ------------------------------- */
.glow { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5; pointer-events: none; z-index: 0; }
.glow--red { background: radial-gradient(circle, var(--red-glow), transparent 68%); }
@keyframes drift {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(3%, -4%) scale(1.08); }
}
.glow--anim { animation: drift 14s ease-in-out infinite; }

/* ------------------------------ Topbar ---------------------------------- */
.topbar {
  background: linear-gradient(90deg, var(--red-deep), var(--red));
  color: #fff; font-size: .82rem; letter-spacing: .02em;
}
.topbar .container { display: flex; align-items: center; justify-content: center; gap: 1.4rem; min-height: 40px; text-align: center; }
.topbar strong { font-weight: 700; }
.topbar a { text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.topbar .tb-sep { opacity: .55; }
@media (max-width: 720px){ .topbar .tb-hide { display: none; } }

/* ------------------------------ Header ---------------------------------- */
.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(250,248,245,.82);
  backdrop-filter: saturate(140%) blur(16px);
  -webkit-backdrop-filter: saturate(140%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.header.scrolled { background: rgba(250,248,245,.95); border-bottom-color: var(--hairline); box-shadow: 0 10px 30px -20px rgba(0,0,0,.8); }
.nav { display: flex; align-items: center; justify-content: space-between; min-height: var(--nav-h); gap: 1.5rem; }
.brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.brand img { height: 40px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 2rem; list-style: none; padding: 0; }
.nav-links a {
  font-size: .95rem; font-weight: 500; color: var(--on-dark-muted);
  position: relative; padding: .4rem 0; transition: color .2s var(--ease);
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0;
  background: var(--red); transition: width .28s var(--ease);
}
.nav-links a:hover, .nav-links a.active { color: var(--on-dark); }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
.nav-cta { display: flex; align-items: center; gap: .9rem; }
.nav-phone { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .92rem; color: var(--on-dark); }
.nav-phone svg { width: 16px; height: 16px; color: var(--red-bright); }

.nav-toggle { display: none; width: 46px; height: 46px; border-radius: var(--radius); border: 1px solid var(--hairline-2); align-items: center; justify-content: center; }
.nav-toggle span { position: relative; width: 20px; height: 2px; background: var(--on-dark); border-radius: 2px; transition: transform .3s var(--ease), opacity .2s; }
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--on-dark); border-radius: 2px; transition: transform .3s var(--ease); }
.nav-toggle span::before { top: -6px; } .nav-toggle span::after { top: 6px; }
body.menu-open .nav-toggle span { background: transparent; }
body.menu-open .nav-toggle span::before { transform: translateY(6px) rotate(45deg); }
body.menu-open .nav-toggle span::after { transform: translateY(-6px) rotate(-45deg); }

/* --------------------------- Mobile menu -------------------------------- */
.mobile-menu {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(22,40,63,.985); backdrop-filter: blur(10px);
  transform: translateX(100%); transition: transform .4s var(--ease);
  display: flex; flex-direction: column; justify-content: flex-start;
  padding: 118px clamp(1.5rem,6vw,3rem) 2.5rem;   /* clear the fixed header */
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  visibility: hidden;
}
body.menu-open .mobile-menu { transform: translateX(0); visibility: visible; }
.mobile-menu a { font-family: var(--serif); font-size: 1.6rem; padding: .5rem 0; color: var(--on-dark); border-bottom: 1px solid var(--hairline); }
.mobile-menu a.btn { border-bottom: 0; margin-top: 1.6rem; flex-shrink: 0; }

/* ------------------------------ Hero ------------------------------------ */
.hero { position: relative; overflow: hidden; padding-top: clamp(3rem, 8vw, 6rem); padding-bottom: clamp(3rem, 7vw, 6rem); min-height: 480px; }
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg .glow-1 { width: 640px; height: 640px; top: -180px; right: -120px; }
.hero-bg .glow-2 { width: 520px; height: 520px; bottom: -220px; left: -160px; opacity: .35; }
.hero-bg::after { /* fine grain + vignette */
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 70% 0%, rgba(22,40,63,.06), transparent 55%),
    radial-gradient(90% 90% at 50% 120%, rgba(0,0,0,.7), transparent 60%);
}
.hero-lion {
  position: absolute; right: -4%; top: 50%; transform: translateY(-50%);
  width: min(52vw, 720px); opacity: .05; z-index: 0; pointer-events: none;
  filter: grayscale(.2);
}
.hero-inner { position: relative; z-index: 2; max-width: 900px; }
.hero .eyebrow { margin-bottom: 1.6rem; }
.hero h1 { margin-bottom: 1.6rem; }
.hero h1 .line { display: block; }
.hero .lede { font-size: clamp(1.1rem, 1.7vw, 1.35rem); margin-bottom: 2.4rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.hero-note { display: inline-flex; align-items: center; gap: .55rem; color: var(--on-dark-faint); font-size: .9rem; margin-left: .3rem; }
.hero-note svg { width: 16px; height: 16px; color: var(--red-bright); }

.hero-stats { display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 5vw, 3.5rem); margin-top: clamp(3rem, 6vw, 4.5rem); position: relative; z-index: 2; padding-top: 2.2rem; border-top: 1px solid var(--hairline); }
.stat .num { font-family: var(--serif); font-size: clamp(2rem, 3.4vw, 2.9rem); font-weight: 400; color: var(--text-hi); line-height: 1; }
.stat .num .u { color: var(--red-bright); }
.stat .lbl { font-size: .86rem; color: var(--on-dark-muted); margin-top: .5rem; letter-spacing: .02em; }

/* --------------------------- Marquee strip ------------------------------ */
.marquee { border-block: 1px solid var(--hairline); background: var(--ink-800); overflow: hidden; }
.marquee-track { display: flex; gap: 3.5rem; align-items: center; padding-block: 1.05rem; width: max-content; animation: scroll-x 34s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes scroll-x { to { transform: translateX(-50%); } }
.marquee-item { display: inline-flex; align-items: center; gap: .7rem; color: var(--on-dark-muted); font-size: .84rem; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.marquee-item svg { width: 16px; height: 16px; color: var(--red-bright); }
@media (prefers-reduced-motion: reduce){ .marquee-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; } }

/* --------------------------- Treatments --------------------------------- */
.treat-tabs { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 2.5rem; }
.treat-tab {
  padding: .7rem 1.3rem; border-radius: var(--radius); border: 1px solid var(--hairline-2);
  color: var(--on-dark-muted); font-weight: 600; font-size: .92rem; transition: all .25s var(--ease);
}
.treat-tab[aria-selected="true"] { background: var(--red); color: #fff; border-color: var(--red); box-shadow: var(--shadow-red); }
.treat-tab:hover:not([aria-selected="true"]) { color: var(--on-dark); border-color: var(--on-dark-muted); }

.treat-grid { display: flex; flex-wrap: wrap; gap: 1.3rem; justify-content: center; }
.treat-panel[hidden] { display: none; }
.treat-card {
  background: linear-gradient(180deg, var(--surface), var(--ink-800));
  border: 1px solid var(--hairline); border-radius: var(--radius);
  padding: 1.9rem 1.7rem; position: relative; overflow: hidden;
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
  display: flex; flex-direction: column; min-height: 260px;
  flex: 0 1 calc(33.333% - .867rem); box-sizing: border-box;
}
.treat-card::before {
  content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0;
  background: radial-gradient(120% 120% at 100% 0%, rgba(168,135,79,.14), transparent 60%);
  transition: opacity .35s var(--ease);
}
.treat-card:hover { transform: translateY(-6px); border-color: rgba(168,135,79,.55); box-shadow: var(--shadow); }
.treat-card:hover::before { opacity: 1; }
.treat-card > * { position: relative; z-index: 1; }
.treat-ico { width: 224px; height: 224px; border-radius: var(--radius); display: block; overflow: hidden; background: rgba(168,135,79,.14); color: var(--red-bright); margin-bottom: 1.3rem; border: 1px solid rgba(168,135,79,.4); }
.treat-ico svg { width: 96px; height: 96px; }
img.treat-ico { object-fit: cover; object-position: center; }
@media (max-width: 1024px){
  .treat-ico { width: 184px; height: 184px; }
}
@media (max-width: 560px){
  .treat-ico { width: 148px; height: 148px; }
}
.treat-card h3 { font-size: 1.35rem; margin-bottom: .5rem; }
.treat-card p { color: var(--on-dark-muted); font-size: .96rem; flex-grow: 1; }
.treat-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--hairline); }
.treat-price { font-family: var(--serif); font-size: 1.1rem; color: var(--text-hi); }
.treat-price span { font-size: .78rem; color: var(--on-dark-faint); font-family: var(--sans); }
.treat-card .link-arrow { font-size: .88rem; }

/* --------------------------- Feature (visualizer) ----------------------- */
.feature { position: relative; overflow: hidden; }
.feature-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.feature-panel {
  position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/3.4;
  background: radial-gradient(120% 120% at 20% 10%, #F1EDE7, var(--ink-800) 70%);
  border: 1px solid var(--hairline); box-shadow: var(--shadow);
  display: grid; place-items: center;
}
.feature-panel .glow { width: 340px; height: 340px; top: 20%; left: 30%; opacity: .5; }
.feature-face { position: relative; z-index: 2; text-align: center; padding: 2rem; }
.feature-face .ring { width: 128px; height: 128px; border-radius: 50%; margin: 0 auto 1.4rem; display: grid; place-items: center; background: rgba(168,135,79,.12); border: 1px solid rgba(168,135,79,.55); color: var(--red-bright); }
.feature-face .ring svg { width: 54px; height: 54px; }
.feature-face h4 { font-family: var(--serif); font-size: 1.5rem; color: var(--text-hi); margin-bottom: .4rem; }
.feature-face p { color: var(--on-dark-muted); font-size: .95rem; max-width: 30ch; margin-inline: auto; }
.feature-scan { position: absolute; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--red-bright), transparent); top: 0; opacity: .8; animation: scan 3.6s var(--ease) infinite; z-index: 3; }
@keyframes scan { 0%,100% { top: 8%; opacity: 0; } 20% { opacity: .9; } 50% { top: 92%; opacity: .9; } 80% { opacity: 0; } }
.feature ul { list-style: none; padding: 0; margin: 1.8rem 0 2.2rem; display: grid; gap: 1rem; }
.feature li { display: flex; gap: .9rem; align-items: flex-start; }
.feature li .tick { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: rgba(168,135,79,.14); color: var(--red-bright); display: grid; place-items: center; margin-top: 2px; }
.feature li .tick svg { width: 15px; height: 15px; }
.feature li b { color: var(--on-dark); font-weight: 600; }
.feature li span { color: var(--on-dark-muted); }

/* ---------------------------- Before/After ------------------------------ */
.ba-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4rem); align-items: center; }
.ba {
  position: relative; aspect-ratio: 4/3; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--cream-line); user-select: none; box-shadow: var(--shadow); cursor: ew-resize;
  touch-action: none; /* the slider owns horizontal drag on touch; without this, a finger-drag also scrolls the page */
}
.ba-img { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; }
.ba-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.ba-after  { background: linear-gradient(135deg, #16283F, #16283F); }
.ba-before { background: linear-gradient(135deg, #FAF8F5, #D9D4CC); color: #0B1622; clip-path: inset(0 50% 0 0); }
.ba-tag { position: absolute; top: 14px; padding: .35rem .8rem; border-radius: var(--radius); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; background: rgba(0,0,0,.55); color: #fff; }
.ba-before .ba-tag { left: 14px; background: rgba(255,255,255,.7); color: #0B1622; }
.ba-after  .ba-tag { right: 14px; }
.ba-label { font-family: var(--serif); font-size: 1.6rem; opacity: .8; }
.ba-handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: #fff; z-index: 4; transform: translateX(-1px); }
.ba-knob { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 44px; height: 44px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 6px 20px rgba(0,0,0,.35); color: var(--red); z-index: 5; }
.ba-knob svg { width: 22px; height: 22px; }
.ba-note { font-size: .82rem; color: var(--on-light-muted); margin-top: 1rem; display: flex; align-items: center; gap: .5rem; }
.treat-disclaimer { font-size: .85rem; color: var(--on-dark-muted); margin: 1.6rem auto 0; max-width: 74ch; text-align: center; line-height: 1.6; }
.section--alt .treat-disclaimer, .section--light .treat-disclaimer { color: var(--on-light-muted); }
.treat-note { display: block; margin-top: .3rem; font-size: .82rem; color: var(--on-dark-muted); font-style: normal; }
.section--alt .treat-note, .section--light .treat-note { color: var(--on-light-muted); }
.approval-flag { display: inline-block; margin: .3rem 0 1rem; padding: .35rem .7rem; font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #7A4A00; background: #FBEBD0; border: 1px solid #E8C88E; border-radius: 3px; }
.legal-body h2 { font-size: 1.3rem; margin: 2.2rem 0 .8rem; color: var(--on-light); }
.legal-body h2:first-child { margin-top: 0; }
.legal-body h3 { font-size: 1.05rem; margin: 1.4rem 0 .6rem; color: var(--on-light); }
.legal-body p, .legal-body li { color: var(--on-light-muted); font-size: .98rem; line-height: 1.7; margin-bottom: .8rem; }
.legal-body ul { padding-left: 1.3rem; margin-bottom: 1rem; }
.legal-body li { margin-bottom: .5rem; }
.legal-updated { font-size: .85rem; color: var(--on-light-muted); margin-bottom: 2rem; font-family: var(--mono); text-transform: uppercase; letter-spacing: .04em; }
.ba-note svg { width: 15px; height: 15px; color: var(--red); flex-shrink: 0; }

/* ------------------------------ About ----------------------------------- */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem,6vw,5rem); align-items: center; }
.about-media { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 5/6; background: radial-gradient(120% 100% at 30% 10%, #F1EDE7, var(--ink) 75%); border: 1px solid var(--hairline); display: grid; place-items: center; box-shadow: var(--shadow); }
.about-media img { width: 62%; opacity: .9; }
.about-badge { position: absolute; bottom: 22px; left: 22px; right: 22px; background: rgba(22,40,63,.86); backdrop-filter: blur(8px); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 1.1rem 1.3rem; display: flex; align-items: center; gap: 1rem; }
.about-badge .b-num { font-family: var(--serif); font-size: 2rem; color: var(--red-bright); font-weight: 400; line-height: 1; }
.about-badge .b-txt { font-size: .86rem; color: var(--on-dark-muted); }
.about-list { display: grid; gap: 1.3rem; margin-top: 2rem; }
.about-list li { display: flex; gap: 1rem; align-items: flex-start; list-style: none; }
.about-list .tick { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; }
.about-list .tick svg { width: 16px; height: 16px; }
.about-list b { display: block; color: var(--on-light); font-family: var(--serif); font-size: 1.15rem; }
.about-list span { color: var(--on-light-muted); font-size: .96rem; }

/* --------------------------- Memberships -------------------------------- */
.plans { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.4rem; align-items: start; }
.plan { background: linear-gradient(180deg, var(--surface), var(--ink-800)); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: 2.2rem 1.9rem; position: relative; transition: transform .35s var(--ease), border-color .35s var(--ease); }
.plan:hover { transform: translateY(-6px); }
.plan--featured { border-color: rgba(168,135,79,.65); box-shadow: var(--shadow-red); }
.plan-flag { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--red); color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: .35rem .9rem; border-radius: var(--radius); }
.plan h3 { font-size: 1.5rem; margin-bottom: .3rem; }
.plan .tier-sub { color: var(--on-dark-muted); font-size: .9rem; margin-bottom: 1.4rem; }
.plan .price { font-family: var(--serif); font-size: 2.8rem; font-weight: 400; color: var(--text-hi); line-height: 1; }
.plan .price sub { font-size: .9rem; color: var(--on-dark-faint); font-family: var(--sans); vertical-align: baseline; }
.plan ul { list-style: none; padding: 0; margin: 1.7rem 0; display: grid; gap: .85rem; }
.plan li { display: flex; gap: .7rem; align-items: flex-start; color: var(--on-dark-muted); font-size: .94rem; }
.plan li svg { width: 18px; height: 18px; color: var(--red-bright); flex-shrink: 0; margin-top: 2px; }

/* --------------------------- Testimonials ------------------------------- */
.tstm { position: relative; }
.tstm-stage { max-width: 860px; margin-inline: auto; text-align: center; position: relative; min-height: 260px; }
.tstm-slide { position: absolute; inset: 0; opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); pointer-events: none; }
.tstm-slide.active { opacity: 1; transform: none; position: relative; pointer-events: auto; }
.tstm-stars { display: inline-flex; gap: .25rem; color: var(--red-bright); margin-bottom: 1.4rem; }
.tstm-stars svg { width: 20px; height: 20px; }
.tstm-quote { font-family: var(--serif); font-size: clamp(1.4rem, 2.7vw, 2.05rem); line-height: 1.5; color: var(--text-hi); font-weight: 400; }
.tstm-who { margin-top: 1.6rem; font-weight: 600; letter-spacing: .04em; }
.tstm-who span { color: var(--on-dark-muted); font-weight: 400; display: block; font-size: .88rem; letter-spacing: .1em; text-transform: uppercase; margin-top: .3rem; }
.tstm-dots { display: flex; justify-content: center; gap: .6rem; margin-top: 2.2rem; }
.tstm-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--hairline-2); transition: all .3s var(--ease); }
.tstm-dot.active { background: var(--red); width: 26px; border-radius: var(--radius); }

/* ------------------------------- FAQ ------------------------------------ */
.faq { max-width: 820px; margin-inline: auto; }
.faq-item { border-bottom: 1px solid var(--cream-line); }
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; text-align: left; padding: 1.5rem 0; font-family: var(--serif); font-size: clamp(1.1rem,1.8vw,1.35rem); color: var(--on-light); }
.faq-q .pm { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--cream-line); display: grid; place-items: center; color: var(--red); transition: transform .3s var(--ease), background .3s, color .3s; }
.faq-q .pm svg { width: 18px; height: 18px; }
.faq-item.open .pm { background: var(--red); color: #fff; border-color: var(--red); transform: rotate(180deg); }
.faq-a { overflow: hidden; max-height: 0; transition: max-height .4s var(--ease); }
.faq-a p { padding: 0 0 1.5rem; color: var(--on-light-muted); max-width: 68ch; }

/* ------------------------------ Contact --------------------------------- */
.contact-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem,5vw,4rem); align-items: stretch; }
.contact-info { display: grid; align-content: start; gap: 1.6rem; }
.info-row { display: flex; gap: 1rem; align-items: flex-start; }
.info-row .ico { flex-shrink: 0; width: 58px; height: 58px; border-radius: var(--radius); background: rgba(168,135,79,.14); color: var(--red-bright); display: grid; place-items: center; }
.info-row .ico svg { width: 27px; height: 27px; }
.info-row h4 { font-family: var(--sans); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-faint); font-weight: 600; margin-bottom: .3rem; }
.info-row p, .info-row a { color: var(--on-dark); font-size: 1.02rem; }
.info-row a:hover { color: var(--red-bright); }
.hours { margin-top: .4rem; border-top: 1px solid var(--hairline); padding-top: 1.6rem; display: grid; gap: .6rem; }
.hours-row { display: flex; justify-content: space-between; font-size: .95rem; color: var(--on-dark-muted); }
.hours-row b { color: var(--on-dark); font-weight: 600; }

.form-card { background: linear-gradient(180deg, var(--surface), var(--ink-800)); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: clamp(1.6rem, 3vw, 2.4rem); box-shadow: var(--shadow); }
.form-card h3 { font-size: 1.6rem; margin-bottom: 1.6rem; }
.field { margin-bottom: 1.15rem; }
.field label { display: block; font-size: .82rem; font-weight: 600; letter-spacing: .04em; margin-bottom: .5rem; color: var(--on-dark-muted); }
.field label .req { color: var(--red-bright); }
.field input, .field select, .field textarea {
  width: 100%; background: var(--ink); border: 1px solid var(--hairline-2); border-radius: var(--radius);
  padding: .85rem 1rem; color: var(--on-dark); font: inherit; font-size: .98rem; min-height: 50px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea { min-height: 110px; resize: vertical; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a7a199' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; }
.field input::placeholder, .field textarea::placeholder { color: var(--on-dark-faint); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(22,40,63,.18); }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: #B23B3B; }
.field .err { color: #B23B3B; font-size: .8rem; margin-top: .4rem; display: none; }
.field.invalid .err { display: block; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-note { font-size: .8rem; color: var(--on-dark-faint); margin-top: 1rem; text-align: center; }
.form-success { display: none; text-align: center; padding: 2rem 1rem; }
.form-success.show { display: block; }
.form-success .ok { width: 66px; height: 66px; border-radius: 50%; background: rgba(168,135,79,.14); color: var(--red-bright); display: grid; place-items: center; margin: 0 auto 1.2rem; }
.form-success .ok svg { width: 32px; height: 32px; }
.form-success h3 { margin-bottom: .5rem; }
.form-success p { color: var(--on-dark-muted); }

/* ------------------------------- CTA band ------------------------------- */
.cta-band { position: relative; overflow: hidden; text-align: center; }
.cta-band .glow { width: 560px; height: 560px; top: -40%; left: 50%; transform: translateX(-50%); opacity: .4; }
.cta-band h2 { position: relative; z-index: 2; max-width: 18ch; margin: 0 auto 1.4rem; }
.cta-band p { position: relative; z-index: 2; color: var(--on-dark-muted); max-width: 52ch; margin: 0 auto 2.2rem; font-size: 1.1rem; }
.cta-actions { position: relative; z-index: 2; display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ------------------------------- Footer --------------------------------- */
.footer { background: var(--ink-800); border-top: 1px solid var(--hairline); padding-top: clamp(3.5rem,6vw,5rem); }
.footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2.5rem; padding-bottom: 3rem; }
.footer-brand img { height: 46px; margin-bottom: 1.3rem; }
.footer-brand p { color: rgba(255,255,255,.88); font-size: .95rem; max-width: 34ch; }
.footer-social { display: flex; gap: .7rem; margin-top: 1.5rem; }
.footer-social a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--hairline-2); display: grid; place-items: center; color: #fff; transition: all .25s var(--ease); }
.footer-social a:hover { background: var(--red); color: #fff; border-color: var(--red); transform: translateY(-2px); }
.footer-social svg { width: 18px; height: 18px; }
.footer-col h5 { font-family: var(--sans); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: #fff; margin-bottom: 1.2rem; font-weight: 600; }
.footer-col ul { list-style: none; padding: 0; display: grid; gap: .75rem; }
.footer-col a { color: rgba(255,255,255,.88); font-size: .95rem; transition: color .2s; }
.footer-col a:hover { color: var(--red-bright); }
.footer-bottom { border-top: 1px solid var(--hairline); padding-block: 1.6rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.footer-bottom small { color: rgba(255,255,255,.75); font-size: .82rem; }
.footer-disclaimer { color: rgba(255,255,255,.65); font-size: .78rem; line-height: 1.6; padding-bottom: 1.6rem; max-width: 90ch; }

/* --------------------------- Reveal on scroll --------------------------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; } .reveal.d4 { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce){ .reveal { opacity: 1; transform: none; } }

/* =========================================================================
   REFORMAT — editorial layout to mirror the reference site
   (hero + palette unchanged; sci-fi glow/scan removed outside hero)
   ========================================================================= */

/* Skip link */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--red); color: #fff; padding: .8rem 1.2rem; border-radius: 0 0 var(--radius) 0; font-weight: 600; }
.skip-link:focus { left: 0; }

/* Refined photographic placeholders (art-directed empty states) */
.ph {
  position: relative; overflow: hidden; display: block;
  border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  background:
    linear-gradient(215deg, rgba(168,135,79,.14), transparent 46%),
    repeating-linear-gradient(135deg, rgba(11,22,34,.025) 0 2px, transparent 2px 9px),
    radial-gradient(120% 100% at 28% 12%, #F1EDE7, #E2DCD2 74%);
}
.ph::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--red), transparent); }
.ph .ph-cat {
  position: absolute; left: 1.4rem; bottom: 1.5rem; z-index: 2;
  font-family: var(--serif); font-size: clamp(1.3rem, 2.2vw, 1.9rem);
  color: rgba(11,22,34,.62); letter-spacing: .01em;
}
.ph .ph-cat::before { content: ""; display: block; width: 34px; height: 2px; background: var(--red); margin-bottom: .8rem; }
.ph .ph-note {
  position: absolute; top: 1rem; right: 1rem; z-index: 2;
  font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--on-dark-faint);
  border: 1px solid var(--hairline-2); padding: .32rem .62rem; border-radius: var(--radius);
}
.ph--portrait { aspect-ratio: 4 / 4.3; }
.ph--about    { aspect-ratio: 5 / 6; }
.ph--about .ph-cat { display: none; }
.ph--svc      { aspect-ratio: 4 / 5; border-radius: var(--radius); margin-bottom: 1.4rem; }

/* Feature / approach block */
.feature-list { list-style: none; padding: 0; margin: 1.8rem 0 2.2rem; display: grid; gap: 1rem; }
.feature-list li { display: flex; gap: .9rem; align-items: flex-start; }
.feature-list .tick { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: rgba(168,135,79,.14); color: var(--red-bright); display: grid; place-items: center; margin-top: 2px; }
.feature-list .tick svg { width: 15px; height: 15px; }
.feature-list b { color: var(--on-dark); font-weight: 600; }
.feature-list span { color: var(--on-dark-muted); }

/* Services — categorized like the reference */
.svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; }
.svc-list { list-style: none; padding: 0; margin: 0; }
.svc-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .9rem 0; border-bottom: 1px solid var(--hairline);
  color: var(--on-dark); font-weight: 500; font-size: 1rem;
  transition: color .2s var(--ease), padding-left .2s var(--ease);
}
.svc-list li:first-child a { border-top: 1px solid var(--hairline); }
.svc-list a:hover { color: var(--red-bright); padding-left: .35rem; }
.svc-list em { font-style: normal; color: var(--on-dark-muted); font-size: .84rem; white-space: nowrap; }
.svc-list a:hover em { color: var(--red-bright); }
.svc-cta { text-align: center; margin-top: clamp(2.5rem, 5vw, 3.5rem); }

/* Mini stats (light before/after column) */
.mini-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-bottom: 1.8rem; }
.ms-num { font-family: var(--serif); font-size: 2.2rem; color: var(--red); font-weight: 400; line-height: 1; }
.ms-lbl { color: var(--on-light-muted); font-size: .92rem; margin-top: .35rem; }

/* About badge now sits inside the placeholder figure */
.ph--about .about-badge { position: absolute; bottom: 20px; left: 20px; right: 20px; margin: 0; }

/* Kill any ambient glow / scanner outside the hero */
.cta-band .glow, .feature .glow, .feature-scan { display: none !important; }
.cta-band { text-align: center; }

@media (max-width: 1024px){
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .svc-grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   MULTI-PAGE — dropdown nav, interior page heroes, page components
   ========================================================================= */

/* Nav fit + dropdowns */
.nav-links { gap: 1.1rem; }
.nav-links a { font-size: .9rem; white-space: nowrap; }
.nav-phone { white-space: nowrap; }
/* logo height is set once in the brand activation layer below */
.nav-links .has-dd { position: relative; }
.nav-links .has-dd > a { display: inline-flex; align-items: center; gap: .3rem; }
.nav-links .cx { width: 13px; height: 13px; opacity: .65; transition: transform .2s var(--ease); }
.has-dd:hover .cx, .has-dd:focus-within .cx { transform: rotate(180deg); }
.dd {
  position: absolute; top: calc(100% + 12px); left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 210px; background: rgba(255,255,255,.98);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--hairline); border-radius: var(--radius); padding: .5rem;
  display: grid; gap: 2px; opacity: 0; visibility: hidden;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
  box-shadow: var(--shadow); z-index: 120;
}
.dd::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
.has-dd:hover .dd, .has-dd:focus-within .dd { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.dd a { display: block; padding: .6rem .85rem; border-radius: var(--radius); font-size: .9rem; color: var(--on-dark-muted); font-weight: 500; white-space: nowrap; }
.dd a::after { content: none; }
.dd a:hover { background: rgba(11,22,34,.05); color: var(--on-dark); }
.mobile-menu nav { display: flex; flex-direction: column; }

/* earlier switch to hamburger so the 9-item nav never wraps/overflows */
@media (max-width: 1300px){
  .nav-links, .nav-phone { display: none; }
  .nav-toggle { display: inline-flex; }
}

/* Interior page hero / banner */
.page-hero { position: relative; overflow: hidden; padding: clamp(3rem,7vw,5.5rem) 0 clamp(2.4rem,5vw,3.6rem); border-bottom: 1px solid var(--hairline); min-height: 440px; }
.page-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(90% 130% at 88% -25%, rgba(168,135,79,.14), transparent 60%); }
.page-hero .container { position: relative; z-index: 2; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; font-size: .82rem; color: var(--on-dark-faint); margin-bottom: 1.1rem; letter-spacing: .02em; }
.breadcrumb a { color: var(--on-dark-muted); }
.breadcrumb a:hover { color: var(--red-bright); }
.breadcrumb .sep { opacity: .5; }
.page-hero h1 { font-size: clamp(2.3rem, 5.2vw, 3.9rem); max-width: 18ch; }
.page-hero .lead { color: var(--on-dark-muted); max-width: 62ch; margin-top: 1.1rem; font-size: 1.1rem; }

/* Rich text helpers */
.rich { max-width: 68ch; }
.rich p { color: var(--on-dark-muted); margin-bottom: 1.1rem; }
.rich h3 { font-size: 1.5rem; margin: 2rem 0 .8rem; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4.5rem); align-items: center; }
@media (max-width: 900px){ .two-col { grid-template-columns: 1fr; } }

/* Team grid */
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); gap: 1.6rem; }
.team-card .ph { aspect-ratio: 4/5; margin-bottom: 1rem; }
.team-card .ph-img { object-position: center top; } /* heads sit near the top of these headshots; crop excess from the bottom, never the top */
.team-card h4 { font-family: var(--serif); font-size: 1.25rem; }
.team-card .role { color: var(--red-bright); font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; margin-top: .3rem; }
.team-card p { color: var(--on-dark-muted); font-size: .93rem; margin-top: .6rem; }

/* Value cards */
.value-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.4rem; }
@media (max-width: 860px){ .value-grid { grid-template-columns: 1fr; } }
.value-card { background: linear-gradient(180deg, var(--surface), var(--ink-800)); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 1.9rem 1.7rem; }
.value-card .ico { width: 224px; height: 224px; border-radius: var(--radius); display: block; overflow: hidden; background: rgba(168,135,79,.14); color: var(--red-bright); margin-bottom: 1.2rem; border: 1px solid rgba(168,135,79,.4); }
.value-card .ico svg { width: 29px; height: 29px; }
.value-card .ico img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
@media (max-width: 1024px){
  .value-card .ico { width: 184px; height: 184px; }
}
@media (max-width: 560px){
  .value-card .ico { width: 148px; height: 148px; }
}
.value-card h4 { font-family: var(--serif); font-size: 1.3rem; margin-bottom: .5rem; }
.value-card p { color: var(--on-dark-muted); font-size: .95rem; }

/* Gallery grid */
.gallery-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.3rem; }
@media (max-width: 900px){ .gallery-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .gallery-grid { grid-template-columns: 1fr; } }
.gcard { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--hairline); }
.gcard .ph { aspect-ratio: 1/1; border-radius: 0; border: 0; box-shadow: none; }
.gcard .cap { padding: 1rem 1.2rem; background: var(--ink-800); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.gcard .cap b { font-family: var(--serif); font-weight: 400; font-size: 1.05rem; }
.gcard .cap span { font-size: .8rem; color: var(--on-dark-faint); }

/* Shop grid */
.shop-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.4rem; }
@media (max-width: 1024px){ .shop-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px){ .shop-grid { grid-template-columns: 1fr; } }
.product { background: linear-gradient(180deg, var(--surface), var(--ink-800)); border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; transition: transform .3s var(--ease), border-color .3s var(--ease); }
.product:hover { transform: translateY(-5px); border-color: rgba(168,135,79,.55); }
.product .ph { aspect-ratio: 1/1; border-radius: 0; border: 0; box-shadow: none; }
.product .pinfo { padding: 1.2rem 1.3rem 1.5rem; }
.product .cat { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--red-bright); }
.product h4 { font-family: var(--serif); font-size: 1.2rem; margin: .4rem 0 .7rem; }
.product .prow { display: flex; align-items: center; justify-content: space-between; }
.product .price { font-family: var(--serif); font-size: 1.25rem; color: var(--text-hi); }

/* Events list */
.events-list { display: grid; gap: 1.2rem; }
.event { display: grid; grid-template-columns: auto 1fr auto; gap: 1.6rem; align-items: center; background: linear-gradient(180deg, var(--surface), var(--ink-800)); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 1.6rem 1.8rem; }
.event .date { text-align: center; min-width: 74px; border-right: 1px solid var(--hairline); padding-right: 1.4rem; }
.event .date .m { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--red-bright); }
.event .date .d { font-family: var(--serif); font-size: 2.2rem; line-height: 1; color: var(--text-hi); }
.event h4 { font-family: var(--serif); font-size: 1.3rem; margin-bottom: .3rem; }
.event p { color: var(--on-dark-muted); font-size: .95rem; }
.event .tag { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-faint); }
@media (max-width: 720px){ .event { grid-template-columns: 1fr; } .event .date { display: flex; gap: 1rem; align-items: baseline; border-right: 0; border-bottom: 1px solid var(--hairline); padding: 0 0 1rem; } .event .link-arrow { justify-self: start; } }

/* Locations */
.loc-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.6rem; }
@media (max-width: 860px){ .loc-grid { grid-template-columns: 1fr; } }
.loc { background: linear-gradient(180deg, var(--surface), var(--ink-800)); border: 1px solid var(--hairline); border-radius: var(--radius-lg); overflow: hidden; }
.loc .ph { aspect-ratio: 16/8; border-radius: 0; border: 0; box-shadow: none; }
.loc .linfo { padding: 1.7rem 1.8rem; }
.loc h3 { font-size: 1.5rem; margin-bottom: .8rem; }
.loc .lrow { display: flex; gap: .7rem; align-items: flex-start; color: var(--on-dark-muted); font-size: .95rem; margin-bottom: .6rem; }
.loc .lrow svg { width: 22px; height: 22px; color: var(--red-bright); flex-shrink: 0; margin-top: 3px; }
.loc .loc-cta { margin-top: 1.2rem; display: flex; gap: .8rem; flex-wrap: wrap; }

/* Resources / blog */
.post-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
@media (max-width: 900px){ .post-grid { grid-template-columns: 1fr; } }
.post { border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; background: var(--ink-800); transition: transform .3s var(--ease), border-color .3s var(--ease); }
.post:hover { transform: translateY(-5px); border-color: rgba(168,135,79,.55); }
.post .ph { aspect-ratio: 16/10; border-radius: 0; border: 0; box-shadow: none; }
.post .pbody { padding: 1.4rem 1.5rem 1.7rem; }
.post .cat { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--red-bright); }
.post h4 { font-family: var(--serif); font-size: 1.3rem; margin: .5rem 0 .6rem; line-height: 1.25; }
.post p { color: var(--on-dark-muted); font-size: .93rem; }

/* Simple map placeholder */
.map-ph { aspect-ratio: 16/9; }

/* Section intro helper on dark interior sections */
.section--alt { background: var(--ink-800); }

/* =========================================================================
   POLISH PASS
   ========================================================================= */

/* Anchor targets clear the sticky header when linked to (#skin, #faq, …) */
main [id] { scroll-margin-top: 104px; }

/* Faint lion watermark on interior page heroes — brand continuity with home */
.page-hero::after {
  content: ""; position: absolute; right: -2%; top: 50%; transform: translateY(-50%);
  width: min(38vw, 440px); aspect-ratio: 524 / 440;
  background: url("../img/brand/mark-reversed.svg") no-repeat center / contain;
  opacity: .05; z-index: 0; pointer-events: none;
}
@media (max-width: 860px){ .page-hero::after { right: -22%; width: 82vw; opacity: .04; } }

/* Interior page-hero proportions */
.page-hero .lead { margin-top: 1rem; }
.page-hero h1 { text-wrap: balance; }

/* Gallery cards get the same lift as other cards */
.gcard { transition: transform .3s var(--ease), border-color .3s var(--ease); }
.gcard:hover { transform: translateY(-4px); border-color: rgba(168,135,79,.55); }

/* Make placeholder figures read clearly as interactive where they wrap links */
a > .ph { cursor: pointer; transition: border-color .3s var(--ease); }
a:hover > .ph { border-color: rgba(168,135,79,.6); }

/* Balance long headings site-wide; keep body measure comfortable */
h1, h2 { text-wrap: balance; }

/* Tighten the very top of interior pages a touch on large screens */
@media (min-width: 1024px){ .page-hero { padding-top: 4.5rem; } }

/* Focus-visible polish for dropdown + mobile menu links */
.dd a:focus-visible, .mobile-menu a:focus-visible { outline-offset: 2px; }

/* Prevent the CTA band's stray global glow rule from ever showing on interior pages */
.page-hero + .section .glow, .cta-band .glow { display: none !important; }

/* ------------------------------ Responsive ------------------------------ */
@media (max-width: 1024px){
  .plans { grid-template-columns: repeat(2, 1fr); }
  .treat-card { flex-basis: calc(50% - .65rem); }
  .feature-grid, .ba-wrap, .about-grid, .contact-grid { grid-template-columns: 1fr; }
  .about-media { aspect-ratio: 16/12; max-width: 560px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 860px){
  .nav-links, .nav-phone { display: none; }
  .nav-toggle { display: inline-flex; }
  /* The header "Book Now" pill has no room next to the hamburger at phone
     widths and was pushing the toggle button off-screen entirely, making
     the menu impossible to open. The mobile menu itself already has its
     own full-width "Book Now" button, so hide the header one here. */
  .nav-cta > a.btn { display: none; }
  .plans { grid-template-columns: 1fr; }
  .treat-card { flex-basis: 100%; }
  .hero-lion { opacity: .04; width: 90vw; right: -20%; }
  .form-row { grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  body { font-size: 16px; }
  .btn { width: 100%; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-note { justify-content: center; margin: .4rem 0 0; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
}

/* =========================================================================
   BRAND ACTIVATION LAYER — Synergy Health Identity Kit v1.2
   Light-dominant ground (Alabaster 60%) · Meridian Navy (30%) ·
   Champagne (8%) · Eucalyptus (2%). Radius 2px. Cormorant 28px+ only.
   ========================================================================= */

/* ----------------------------- Webfonts --------------------------------- */
/* Spectral is self-hosted so the wordmark voice never falls back. Real italic
   cuts are included (not just synthesized slant) — .serif-em, .tstm-quote and
   .pullquote em all set font-style:italic on the serif face, and Spectral's
   italic is a genuinely different, more expressive drawing, not a fake skew.
   Swapped 2026-09-04: the previous serif, Fraunces, has a "wonky" display
   personality with curled f/j terminals that read as too artsy; Spectral is
   a calmer, conventional book-weight serif with no such letter quirks. */
@font-face {
  font-family: "Spectral"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("../fonts/spectral-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Spectral"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("../fonts/spectral-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Spectral"; font-style: italic; font-weight: 400;
  font-display: swap; src: url("../fonts/spectral-latin-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Spectral"; font-style: italic; font-weight: 500;
  font-display: swap; src: url("../fonts/spectral-latin-500-italic.woff2") format("woff2");
}

@font-face {
  font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("../fonts/plus-jakarta-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("../fonts/plus-jakarta-sans-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("../fonts/plus-jakarta-sans-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 700;
  font-display: swap; src: url("../fonts/plus-jakarta-sans-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
}

:root { --text-hi: var(--brand-ink); }

/* ======================= NAVY GROUND SCOPE ===============================
   Re-points the same token names for navy grounds, so every rule authored
   against the original dark system inverts correctly with no selector edits.
   ======================================================================== */
.on-navy,
.topbar,
.hero,
.cta-band,
.footer,
.page-hero,
.mobile-menu,
.section--navy {
  --ink:            var(--brand-ink);
  --ink-800:        var(--navy);
  --ink-700:        #1D3350;
  --surface:        #1D3350;
  --surface-2:      var(--navy);
  --hairline:       rgba(250,248,245,.13);
  --hairline-2:     rgba(250,248,245,.22);
  --cream-line:     rgba(250,248,245,.16);
  --on-dark:        var(--alabaster);
  --on-dark-muted:  #F2F0EA;  /* brightened 2026-09-24: was #B7C1CE (too dim against photo heroes/navy grounds), now reads clearly as near-white secondary copy */
  --on-dark-faint:  #8593A4;
  --on-light:       var(--alabaster);
  --on-light-muted: #B7C1CE;
  --text-hi:        var(--alabaster);
  --red:            var(--champagne);
  --red-bright:     var(--champagne-light);
  --shadow:         0 14px 36px -22px rgba(0,0,0,.6);
  background: var(--navy);
  color: var(--alabaster);
}
.hero, .cta-band { background: var(--brand-ink); }
.section--navy h1, .section--navy h2, .section--navy h3,
.hero h1, .cta-band h2, .page-hero h1 { color: var(--alabaster); }

/* Champagne cannot carry white text — on navy the solid button flips to
   champagne with ink type (7.0:1), which is the brand-correct pairing. */
.on-navy .btn, .hero .btn, .cta-band .btn, .footer .btn, .page-hero .btn,
.mobile-menu .btn, .section--navy .btn { --btn-bg: var(--champagne); --btn-fg: var(--brand-ink); }
.on-navy .btn:hover, .hero .btn:hover, .cta-band .btn:hover, .footer .btn:hover,
.mobile-menu .btn:hover, .section--navy .btn:hover { background: var(--champagne-light); }
.on-navy .btn--ghost, .hero .btn--ghost, .cta-band .btn--ghost, .page-hero .btn--ghost,
.mobile-menu .btn--ghost { --btn-bg: transparent; --btn-fg: var(--alabaster); }

/* --------------------------- Light chrome ------------------------------- */
/* The header now sits on the light canvas; logo switches to the color mark. */
.header { border-bottom: 1px solid var(--hairline); }
.header.scrolled { box-shadow: 0 8px 24px -20px rgba(11,22,34,.45); }
.nav-links a::after { background: var(--champagne); }
.nav-phone svg { color: var(--champagne-deep); }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { background: var(--brand-ink); }
.dd { box-shadow: 0 18px 40px -26px rgba(11,22,34,.5); border-color: var(--mist); }

.topbar { background: var(--navy); color: var(--alabaster); }
.topbar a { color: var(--champagne-light); }

/* The mobile menu keeps its navy ground, so its toggle stays light. */
body.menu-open .nav-toggle span::before,
body.menu-open .nav-toggle span::after { background: var(--alabaster); }

/* ------------------------- Section grounds ------------------------------ */
.section--alt   { background: var(--bone); }
.section--light { background: #FFFFFF; }   /* was the dark-site's light break */

/* ========================= TYPOGRAPHY RULE ===============================
   Cormorant Garamond at 28px and above ONLY. Anything that renders smaller
   is Inter. Numerals, prices, eyebrows and data are IBM Plex Mono.
   ======================================================================== */
h1, h2, .display, .h2, .page-hero h1, .tstm-quote, .ba-label {
  font-family: var(--serif); font-weight: 500; letter-spacing: -.006em;
}
.display { font-weight: 500; }
.tstm-quote { font-weight: 400; font-style: italic; }

/* Sub-28px headings → Inter 600 */
h3, h4, .h3,
.treat-card h3, .plan h3, .loc h3, .form-card h3, .rich h3, .faq-q,
.team-card h4, .value-card h4, .post h4, .product h4, .event h4,
.feature-face h4, .about-list b, .gcard .cap b, .mobile-menu a {
  font-family: var(--sans); font-weight: 600; letter-spacing: -.005em; line-height: 1.32;
}
.mobile-menu a { font-size: 1.15rem; font-weight: 500; }
.mobile-menu a.btn { font-weight: 600; }

/* Data, numerals and prices → IBM Plex Mono */
.stat .num, .plan .price, .ms-num, .event .date .d, .about-badge .b-num,
.treat-price, .product .price {
  font-family: var(--mono); font-weight: 400; font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.plan .price sub, .treat-price span { font-family: var(--sans); }

/* Eyebrows, labels and metadata → IBM Plex Mono, uppercase, wide */
.eyebrow, .team-card .role, .product .cat, .post .cat, .footer-col h5,
.info-row h4, .ba-tag, .event .date .m, .ph .ph-note, .tstm-who span,
.gcard .cap span, .field label {
  font-family: var(--mono); font-weight: 500; letter-spacing: .20em; text-transform: uppercase;
}
.info-row h4, .footer-col h5 { font-weight: 500; }
.field label { letter-spacing: .12em; font-size: .7rem; }

/* Champagne is decorative — text-sized accents use the deep, AA-safe tone. */
.eyebrow { color: var(--champagne-deep); }
.eyebrow::before, .eyebrow.center::after { background: var(--champagne); }
.on-navy .eyebrow, .hero .eyebrow, .cta-band .eyebrow,
.page-hero .eyebrow, .section--navy .eyebrow { color: var(--champagne-light); }
.serif-em { color: var(--champagne-deep); font-style: italic; }
.hero .serif-em, .cta-band .serif-em, .page-hero .serif-em,
.section--navy .serif-em { color: var(--champagne-light); }

/* ---------------------------- Brand marks ------------------------------- */
/* Header lockup. The site's copies of the horizontal SVGs are trimmed to their
   ink bounds (see README), so this height IS the visible logo height and the
   mark's left edge lands exactly on the container line. */
.nav .brand img, .brand img { height: 40px; width: auto; }
.footer-brand img { height: 44px; margin-bottom: 1.4rem; }

/* Working mark replaces the retired lion emblem as the ambient watermark. */
.hero-lion {
  width: min(30vw, 380px); opacity: .10; right: 2%;
  filter: none;
}
/* On mobile the hero-actions buttons stack across this same area, and
   "See what we help with" is a transparent/ghost button — so the watermark
   was showing straight through it instead of sitting quietly behind the
   headline like it does on desktop. Simplest fix, per the user: just hide
   it below the point the nav itself switches to mobile (860px), rather
   than trying to re-tune its size/position to dodge the buttons. (Note:
   an earlier `@media (max-width: 860px)` rule further up this file tried
   to shrink/fade .hero-lion for mobile, but this later unconditional block
   overrides it at every width — that rule is now dead code, superseded by
   this one.) */
@media (max-width: 860px){
  .hero-lion { display: none; }
}
.page-hero::after {
  background: url("../img/brand/mark-reversed.svg") no-repeat center / contain;
  width: min(24vw, 260px); aspect-ratio: 1 / 1; opacity: .09; right: 3%;
}
.page-hero::before { background: none; }
.hero-bg::after {
  background: radial-gradient(120% 80% at 70% 0%, rgba(38,69,107,.45), transparent 58%);
}
.glow--red { background: radial-gradient(circle, rgba(38,69,107,.5), transparent 68%); }
.about-media img { width: 58%; opacity: 1; }

/* --------------------------- Squared surfaces --------------------------- */
.btn, .treat-tab, .plan-flag, .ba-tag, .ph .ph-note { border-radius: var(--radius); }
.tstm-dot { border-radius: 50%; }
.tstm-dot.active { border-radius: var(--radius); }
.treat-ico, .value-card .ico, .info-row .ico, .nav-toggle { border-radius: var(--radius); }
.field input, .field select, .field textarea { border-radius: var(--radius); }

/* Cards on the light canvas read as paper, not glass. */
.treat-card, .plan, .value-card, .product, .event, .loc, .post, .form-card {
  background: #FFFFFF; border-color: var(--mist);
}
.section--light .treat-card, .section--light .plan, .section--light .value-card,
.section--light .product, .section--light .event, .section--light .loc,
.section--light .post { background: var(--alabaster); }
.treat-card:hover, .product:hover, .post:hover, .gcard:hover,
a:hover > .ph { border-color: var(--champagne); }
.plan--featured { border-color: var(--champagne); box-shadow: var(--shadow-red); }

/* Placeholder figures — stone, not obsidian. */
.ph {
  background:
    linear-gradient(215deg, rgba(168,135,79,.16), transparent 46%),
    repeating-linear-gradient(135deg, rgba(11,22,34,.025) 0 2px, transparent 2px 9px),
    radial-gradient(120% 100% at 28% 12%, var(--bone), #E2DCD2 74%);
  border-color: var(--mist);
}
.ph::after { background: linear-gradient(90deg, var(--champagne), transparent); }
.ph .ph-cat { color: rgba(11,22,34,.6); }
.ph .ph-cat::before { background: var(--champagne); }
.on-navy .ph, .page-hero .ph {
  background: radial-gradient(120% 100% at 28% 12%, #1D3350, var(--brand-ink) 74%);
  border-color: rgba(250,248,245,.14);
}

/* Eucalyptus — reserved for the regenerative / wellness tracks (under 2%). */
.treat-tab[data-track="wellness"][aria-selected="true"],
.treat-tab[data-track="regenerative"][aria-selected="true"] {
  background: var(--eucalyptus); border-color: var(--eucalyptus);
}

/* Before/after panels rebuilt in brand values */
.ba-after  { background: linear-gradient(135deg, var(--navy), var(--brand-ink)); }
.ba-before { background: linear-gradient(135deg, var(--alabaster), var(--mist)); color: var(--brand-ink); }
.ba-before .ba-tag { background: rgba(250,248,245,.85); color: var(--brand-ink); }
.ba-knob { color: var(--navy); }

/* Focus ring in brand values */
:focus-visible { outline: 2px solid var(--champagne-deep); outline-offset: 3px; border-radius: var(--radius); }
::selection { background: var(--navy); color: var(--alabaster); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--navy); box-shadow: 0 0 0 3px rgba(22,40,63,.16);
}

/* Footer sits on navy; its social chips pick up champagne on hover. */
.footer-social a:hover { background: var(--champagne); color: var(--brand-ink); border-color: var(--champagne); }

/* Semantic interface colors — never brand accents. */
:root { --alert: #B23B3B; --confirm: #2E6B4F; --caution: #8A5A00; }
.field label .req { color: var(--alert); }
.form-success .ok { background: rgba(78,122,106,.14); color: var(--eucalyptus); }

/* =========================================================================
   FOUR-PILLAR SYSTEM + EDITORIAL RHYTHM
   The pillar device is the brand's organising idea, so it also supplies the
   page's structural language: a champagne rule above, mist rules between.
   ========================================================================= */

.pillar-ico svg { height: 72px; width: auto; display: block; color: var(--navy); }
.on-navy .pillar-ico svg, .section--navy .pillar-ico svg,
.page-hero .pillar-ico svg { color: var(--champagne-light); }

/* --- Home: the pillar band ---------------------------------------------- */
.pillar-row {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--champagne);
}
.pillar { padding: 2.4rem 1.9rem 0 0; }
.pillar + .pillar { padding-left: 1.9rem; border-left: 1px solid var(--hairline); }
.pillar-n {
  font-family: var(--mono); font-size: .7rem; font-weight: 500;
  letter-spacing: .2em; color: var(--champagne-deep);
  display: block; margin-bottom: 1.5rem;
}
.pillar .pillar-ico { display: block; margin-bottom: 1.4rem; }
.pillar h3 { font-size: 1.15rem; margin-bottom: .55rem; }
.pillar p { color: var(--on-dark-muted); font-size: .95rem; margin-bottom: 1.1rem; }
.pillar .link-arrow { font-size: .86rem; }

@media (max-width: 900px){
  .pillar-row { grid-template-columns: 1fr 1fr; }
  .pillar:nth-child(3) { border-left: 0; padding-left: 0; }
  .pillar:nth-child(n+3) { border-top: 1px solid var(--hairline); margin-top: .5rem; }
}
@media (max-width: 560px){
  .pillar-row { grid-template-columns: 1fr; }
  .pillar { padding: 2rem 0 0; border-left: 0 !important; padding-left: 0 !important; }
  .pillar + .pillar { border-top: 1px solid var(--hairline); }
  .pillar-n { margin-bottom: 1rem; }
  .pillar-ico svg { height: 58px; }
}

/* --- Services: pillar mark sits beside the section head ------------------ */
.section-head.has-pillar { display: grid; grid-template-columns: auto 1fr; gap: 1.8rem; align-items: start; max-width: 900px; }
.section-head.has-pillar > .pillar-ico { margin-top: -.55rem; }
.pillar-ico--head svg { height: 80px; }
@media (max-width: 700px){
  .section-head.has-pillar { grid-template-columns: 1fr; gap: 1.1rem; }
  .pillar-ico--head svg { height: 60px; }
}

/* --- Services hero: pillar chips ---------------------------------------- */
.hero-chips { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.9rem; }
.hero-chips .btn { min-height: 42px; padding: 0 1.1rem; font-size: .88rem; }

/* --- Full-bleed navy pull-quote: the rhythm break ------------------------ */
.pullquote { text-align: center; padding-block: clamp(3.5rem, 7vw, 5.5rem); }
.pullquote blockquote { margin-inline: auto; }
/* The measure must be constrained on the element that CARRIES the display
   size — `ch` on the blockquote resolves against body font-size and collapses
   the quote into a narrow column. */
.pullquote p {
  font-family: var(--serif); font-weight: 500; font-size: clamp(1.9rem, 4.2vw, 3rem);
  line-height: 1.22; color: var(--alabaster); text-wrap: balance;
  max-width: 22ch; margin-inline: auto;
}
.pullquote em { font-style: italic; color: var(--champagne-light); }
.pullquote .pq-rule { width: 34px; height: 1px; background: var(--champagne); margin: 0 auto 1.9rem; }

/* --- Champagne hairline system ------------------------------------------ */
/* A section head on the light canvas gets a hairline above it, so sections
   read as a sequence rather than as repeated centred blocks. */
.section-head:not(.center):not(.has-pillar) { position: relative; }
.svc-grid { border-top: 1px solid var(--hairline); padding-top: 2.4rem; }

/* --- Placeholder figures: stop them dominating the page ------------------
   Until real photography exists, empty panels should hold their place
   without owning the page. Portrait 4:4.3 -> 4:3.2, about 5:6 -> 5:4.4. */
.ph--portrait { aspect-ratio: 4 / 3.2; }
.ph--about    { aspect-ratio: 5 / 4.4; }
.ph--svc      { aspect-ratio: 4 / 3.4; }
.ph--banner   { aspect-ratio: 21 / 8; border-radius: var(--radius); }
/* membership_banner.jpg is a 3:2 landscape cropped into a very wide 21:8 (16:9
   on mobile) banner — both women's faces sit in the top quarter of the source,
   so keep the crop window pinned to the top rather than centered. */
.ph--banner .ph-img { object-position: center top; }
.team-card .ph { aspect-ratio: 4 / 4.2; }

/* Section heads: left is the default voice; centring is now a deliberate
   accent used once or twice per page rather than the house style. */
.section-head { max-width: 760px; }
.section-head.center { max-width: 720px; }

/* Hero stats: flex-wrap produced a ragged 1/2/1 stack on phones because the
   four figures have different natural widths. Grid them instead. */
@media (max-width: 700px){
  .hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 1.2rem; }
}
@media (max-width: 380px){
  .hero-stats { grid-template-columns: 1fr; }
}

/* Plain-English label beneath each pillar name, so a first-time visitor knows
   what "Peptides" or "Regenerative" actually means for them. */
.pillar-sub {
  display: block; font-family: var(--mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--champagne-deep);
  margin: -.2rem 0 .7rem;
}
.on-navy .pillar-sub, .section--navy .pillar-sub { color: var(--champagne-light); }

/* Services dropdown carries the same plain-English second line. */
.dd--rich { min-width: 264px; }
.dd--rich a { line-height: 1.3; padding: .62rem .85rem; }
.dd--rich a span {
  display: block; font-family: var(--mono); font-size: .64rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-faint);
  margin-top: .22rem;
}
.dd--rich a:hover span { color: var(--champagne-deep); }

/* Pillar cards: rewritten copy varies in length, so let the description grow
   and keep every "See what's involved" link on one baseline. */
.pillar { display: flex; flex-direction: column; }
.pillar p { flex-grow: 1; }
.pillar .link-arrow { align-self: flex-start; }

/* =========================================================================
   VISUAL ELEVATION PASS — 2026-09-03
   No real photography exists yet. Rather than leave empty boxes that say
   "Photo," every placeholder now carries the brand's own working-tier ring
   mark as a deliberate watermark device, plus a richer layered ground — so
   the site reads as intentional art direction, not an unfinished build.
   Swap in real photography behind the same .ph markup any time; nothing
   below needs to change when that happens.
   ========================================================================= */

.ph {
  background:
    radial-gradient(60% 55% at 78% 8%, rgba(168,135,79,.16), transparent 60%),
    radial-gradient(70% 60% at 8% 100%, rgba(22,40,63,.07), transparent 62%),
    linear-gradient(215deg, rgba(168,135,79,.14), transparent 46%),
    repeating-linear-gradient(135deg, rgba(11,22,34,.025) 0 2px, transparent 2px 9px),
    radial-gradient(120% 100% at 28% 12%, var(--bone), #E2DCD2 74%);
}
.on-navy .ph, .page-hero .ph {
  background:
    radial-gradient(60% 55% at 78% 8%, rgba(214,192,154,.10), transparent 60%),
    radial-gradient(120% 100% at 28% 12%, #1D3350, var(--brand-ink) 74%);
}
/* Brand ring mark, centered and faint, standing in for photography. */
.ph::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: url("../img/brand/mark-navy.svg") no-repeat center / 42% auto;
  opacity: .10; transform: scale(1);
  transition: opacity .5s var(--ease), transform .6s var(--ease);
}
.on-navy .ph::before, .page-hero .ph::before {
  background-image: url("../img/brand/mark-champagne-on-navy.svg");
  opacity: .16;
}
a:hover > .ph::before, .team-card:hover .ph::before, .product:hover .ph::before,
.post:hover .ph::before, .gcard:hover .ph::before, .loc:hover .ph::before,
.ph--about:hover::before {
  opacity: .2; transform: scale(1.06);
}
/* Category caption + badge sit above the watermark layer. */
.ph .ph-cat, .ph .ph-note, .about-badge { position: relative; z-index: 2; }
/* "Photo" / "Map" tells read as an unfinished build, not a design choice. */
.ph .ph-note { display: none; }

/* Restrained color variety across the four-pillar placeholder set, so the
   home services teaser doesn't read as four identical gray boxes. */
.ph--tint-navy {
  background:
    radial-gradient(60% 55% at 78% 8%, rgba(38,69,107,.22), transparent 60%),
    radial-gradient(70% 60% at 8% 100%, rgba(11,22,34,.10), transparent 62%),
    repeating-linear-gradient(135deg, rgba(11,22,34,.03) 0 2px, transparent 2px 9px),
    radial-gradient(120% 100% at 28% 12%, var(--bone), #E2DCD2 74%);
}
.ph--tint-eucalyptus {
  background:
    radial-gradient(60% 55% at 78% 8%, rgba(78,122,106,.20), transparent 60%),
    radial-gradient(70% 60% at 8% 100%, rgba(22,40,63,.06), transparent 62%),
    repeating-linear-gradient(135deg, rgba(11,22,34,.025) 0 2px, transparent 2px 9px),
    radial-gradient(120% 100% at 28% 12%, var(--bone), #E2DCD2 74%);
}

/* Sticky mobile booking bar removed 2026-09 per client feedback (felt
   clunky/distracting scrolling with the page). Booking on mobile now goes
   through the header "Book Now"-in-menu flow and in-page CTAs only. */
@media (max-width: 720px){
  .ph--banner { aspect-ratio: 16 / 9; }
  .ph--banner .ph-img { object-position: center top; }
}

/* Treatment-card icons: several source cards had a bare <path> with no
   wrapping <svg class="treat-ico">, so nothing rendered inside the 46px
   champagne badge. Markup now wraps every icon correctly; no CSS change
   needed beyond ensuring the badge never collapses in a flex layout. */
.treat-ico { flex-shrink: 0; }

/* =========================================================================
   REAL PHOTOGRAPHY LAYER — 2026-09-03
   .ph--photo marks a placeholder that now holds a real <img class="ph-img">
   (free, commercially-licensed stock photography — see /assets/img/stock/
   README for sources). The watermark + gradient ground stay defined on
   .ph for any figure that still has no photo; .ph--photo simply suppresses
   them and lets the image show through, so a slot can be swapped back to
   "no photo yet" by removing the class and the <img>, no other CSS change.
   ========================================================================= */
.ph-img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center;
}
.ph--photo::before { display: none; } /* no watermark once a real photo is in place */
.ph--photo { background: var(--bone); } /* neutral fill while the image decodes */
.ph--photo .ph-cat {
  /* Caption reads as a photo credit plate now, not a category label floating
     on bare gradient — give it a scrim so it stays legible over any photo. */
  left: 0; bottom: 0; right: 0; padding: 2.2rem 1.4rem 1.1rem;
  background: linear-gradient(0deg, rgba(11,22,34,.62), transparent);
  color: #fff;
}
.ph--photo .ph-cat::before { background: var(--champagne-light); }
.on-navy .ph--photo .ph-cat, .page-hero .ph--photo .ph-cat { color: #fff; }

/* =========================================================================
   HERO / PAGE-HERO PHOTOGRAPHY LAYER — visual-story pass
   Full-bleed background photo behind every hero/page-hero, dimmed with a
   navy scrim so headline, eyebrow and body text stay legible (AA contrast)
   against any photo. Sits behind the existing glow/vignette/watermark
   decoration (unchanged), which now layers on top of the photo instead of
   bare navy. Add with: <div class="hero-photo" aria-hidden="true"><img
   class="hero-photo-img" src="..." alt=""></div> as the FIRST child of
   .hero, or class="page-hero-photo" as the first child of .page-hero.
   ========================================================================= */
.hero-photo, .page-hero-photo { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-photo-img, .page-hero-photo-img {
  width: 100%; height: 100%; object-fit: cover; object-position: center; display: block;
}
.hero-photo::after, .page-hero-photo::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(11,17,26,.95) 0%, rgba(11,17,26,.74) 36%, rgba(11,17,26,.42) 62%, rgba(11,17,26,.16) 100%),
    linear-gradient(0deg, var(--ink-800) 0%, rgba(22,40,63,.35) 26%, transparent 55%),
    radial-gradient(90% 130% at 88% -25%, rgba(168,135,79,.16), transparent 60%);
}
.hero-photo-img, .page-hero-photo-img { opacity: .9; }

/* Some hero source photos have subjects positioned close to the top edge
   of the frame already (near-zero headroom). At wide viewports the
   .page-hero container gets much wider relative to its (largely fixed)
   height, so object-fit:cover's default center crop eats further into
   the top of the image and slices through heads/faces. Anchoring these
   specific photos to the top means cover only ever crops from the
   bottom (background), never the top (subjects), at any viewport width. */
.page-hero-photo-img--top, .hero-photo-img--top { object-position: center top; }
/* hero_memberships.jpg is a tall portrait with the subject's face roughly
   28-41% down the frame (not near the top edge like the other hero photos),
   so plain "top" cropping would miss it entirely — this pins the crop
   window to her face instead. Verified against a live render at 1920px
   and 2560px viewport widths (2026-09-24): 34% keeps her full smiling
   face in frame at both. */
.page-hero-photo-img--membership { object-position: center 34%; }

/* svc_ivtherapy.jpg (Trinity "Also Available" photo) is also a tall portrait
   in a wide landscape .ph slot; default center crop showed only her raised
   gloved hands and the IV bag, missing her face entirely. Tuned to bring
   her face/mask into frame. */
.ph-img--trinity-ivtherapy { object-position: center 30%; }


/* Placeholder-logo treatment for a .ph figure slot (e.g. about.html Our
   Story photo) standing in until real photography is ready. The supplied
   logo file is a flat asset with its own white ground baked in (not a
   transparent watermark mark), so it fills the frame the same way a real
   photo would rather than floating over the .ph art-directed background. */
.ph--logo { background: #fff; }
.ph--logo::before { display: none; } /* no watermark under a real logo image */
.ph--logo .ph-logo-img {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%; object-fit: contain; padding: 8%;
}
@media (max-width: 720px) {
  .hero-photo::after, .page-hero-photo::after {
    background:
      linear-gradient(180deg, rgba(11,17,26,.72) 0%, rgba(11,17,26,.88) 55%, var(--ink-800) 100%),
      radial-gradient(90% 130% at 88% -25%, rgba(168,135,79,.14), transparent 60%);
  }
}