/* ===================================================================
   MANA WELLNESS & AESTHETICS — DESIGN TOKENS
   Denville, NJ
   -------------------------------------------------------------------
   Direction: luxury light. Gold on ivory.

   The ground is near-white and stays near-white. Weight comes from
   type, space and hairlines — not from filled boxes or shadows. The
   gold is the logo's gold and appears sparingly: it marks the booking
   path, the eyebrows, and the rules. Everywhere else is ink on ivory.

   Link this before any page stylesheet. If you find yourself writing a
   raw hex or px value downstream, it belongs here instead.
   =================================================================== */

/* -------------------------------------------------------------------
   1. TYPEFACES  —  SELF-HOSTED
   Newsreader — display. Optical-size serif, low stroke contrast, open
                counters. Headings, pull quotes and the dictionary
                entry. Never body copy.
   Karla      — body + utility. Grotesque with slightly odd terminals;
                warm, and highly legible at small sizes. Wide-tracked
                in caps for eyebrows and nav; plain for copy.

   Both come from the logo kit, whose own guidelines page is set in
   them, and Karla was the body face of this site's first design
   system too.

   SERVED FROM THIS DOMAIN, not Google's CDN. The previous @import cost
   a DNS lookup and TLS handshake to two extra hosts, and @import is
   the worst way to do it: the browser cannot even discover the font
   request until this stylesheet has downloaded and parsed. It was also
   a third-party dependency that saw every visitor to pages describing
   medical treatment.

   NO OPTICAL-SIZE AXIS. Newsreader ships an opsz axis and it is a real
   refinement, but it is not a free one: latin measured 272KB with it
   and 120KB without. 152KB on every visit is too much to pay for it
   here, where a good share of traffic is a phone in a waiting room.
   If you ever add it back, re-request with `opsz,wght@6..72,300..400`
   and restore `font-optical-sizing: auto` in BASE.

   Only latin and latin-ext are shipped; Google's vietnamese subset was
   dropped. latin-ext is what carries the macron in Alle and the acute
   in Juvederm, so it is not optional.

   Weight ranges match what the site actually uses and nothing more:
   Newsreader 300-400, Karla 300-500.

   THE SCALE IN SECTION 5 IS TUNED TO THESE TWO. Newsreader has a far
   larger x-height and much lower contrast than Cormorant Garamond, so
   it reads roughly a size larger at the same px — the display steps
   are set smaller to compensate, and the tight leading Cormorant
   needed has been relaxed. Swapping the family without retuning that
   section will look wrong.
   ------------------------------------------------------------------- */

@font-face {
  font-family: 'Karla';
  font-style: italic;
  font-weight: 300 500;
  font-display: swap;
  src: url('../fonts/karla-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Karla';
  font-style: italic;
  font-weight: 300 500;
  font-display: swap;
  src: url('../fonts/karla-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('../fonts/karla-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('../fonts/karla-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 300 400;
  font-display: swap;
  src: url('../fonts/newsreader-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 300 400;
  font-display: swap;
  src: url('../fonts/newsreader-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300 400;
  font-display: swap;
  src: url('../fonts/newsreader-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300 400;
  font-display: swap;
  src: url('../fonts/newsreader-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {

  /* -----------------------------------------------------------------
     2. COLOR — RAW PALETTE
     Taken from the logo kit (reference/mana-logo-kit/index.html), which is
     the authority. The gold is sampled from the source artwork; the two
     text tints are the same hue at values that clear AA. Do not re-sample
     these from a screenshot — earlier values here were eyeballed and were
     roughly a hue off.
     ----------------------------------------------------------------- */
  --mana-ink:        #161410;  /* kit "ink" — all primary text */
  --mana-ink-soft:   #5E584D;  /* kit "muted" — secondary text, captions */
  --mana-ivory:      #FDFCFA;  /* kit "bone" — page ground */
  --mana-black:      #0B0B0B;  /* kit black — the one inverse band */
  --mana-alabaster:  #F7F4EE;  /* raised surfaces, cards */
  --mana-parchment:  #F1ECE3;  /* sunk surfaces — footer, utility bar */
  --mana-sand:       #E2DCD0;  /* kit "line" — hairlines, dividers, slots */

  --mana-gold:          #AC8400;  /* THE logo gold. Fills and rules only. */
  --mana-gold-deep:     #8F6E00;  /* gold text on light — 4.66:1, AA */
  --mana-gold-on-dark:  #997500;  /* gold text on dark — 4.59:1, AA */

  /* Feedback — muted, never shouting over the palette */
  --mana-alert:      #8A4B32;

  /* -----------------------------------------------------------------
     3. COLOR — SEMANTIC ROLES
     Reference these in components, never the raw palette above.

     Measured contrast (WCAG 2.1), all against ivory/bone unless stated:
       ink ................ 17.9:1  AAA
       ink-soft ...........  6.9:1  AA
       gold-deep ..........  4.66:1 AA   — smallest safe gold for text
       gold-on-dark .......  4.59:1 AA   — on #0B0B0B, for the dark band
       gold ...............  3.38:1 LOGO ONLY — never body text, never a
                                    control border that carries meaning
       ink on gold ........  5.31:1 AA   — the primary button
       sand ...............  1.2:1  DECORATIVE ONLY

     The rule that matters: --mana-gold is the logo's gold. It fills and
     divides; it never spells anything. Text that needs to look gold uses
     --mana-gold-deep on light, --mana-gold-on-dark on the inverse band.
     ----------------------------------------------------------------- */
  --surface-page:     var(--mana-ivory);
  --surface-raised:   var(--mana-alabaster);
  --surface-sunk:     var(--mana-parchment);
  --surface-inverse:  var(--mana-black);    /* at most once per page */
  --surface-accent:   var(--mana-gold);

  --text-primary:     var(--mana-ink);
  --text-secondary:   var(--mana-ink-soft);
  --text-accent:      var(--mana-gold-deep);
  --text-on-dark:     var(--mana-ivory);
  --text-on-accent:   var(--mana-ink);      /* ink on gold, not white */

  --border-hairline:  var(--mana-sand);
  --border-strong:    var(--mana-ink);
  --border-accent:    var(--mana-gold);

  /* -----------------------------------------------------------------
     4. PILLAR ACCENTS — RETIRED
     Five muted jewel tones used to tint each outcome pillar. They are
     gone. Two reasons, and the second is the real one:

     1. At 1px on bone they did not read as color. Four of the five
        looked simply black next to the gold one, so the system read as
        a bug rather than as wayfinding.
     2. The brand has exactly one accent. The logo kit is explicit —
        one color per placement — and five competing tints were never
        part of it, they were invented here.

     Pillars are told apart by their number and their name, which was
     always doing the actual work. Everything now uses the gold.
     ----------------------------------------------------------------- */

  /* -----------------------------------------------------------------
     5. TYPE SCALE
     Fluid, clamped, and tuned to Newsreader + Karla specifically.

     Display steps are set roughly 18% smaller than the previous
     Cormorant scale: Newsreader's x-height is far larger, so it reads
     a size bigger at identical px and the old values shouted.

     Body copy never drops below 17px — the audience skews 40+. Karla
     carries a generous x-height, so 17px here reads larger than 17px
     of Jost did.
     ----------------------------------------------------------------- */
  --font-display: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --font-body:    'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --step--1: clamp(0.8125rem, 0.79rem + 0.11vw, 0.875rem);
  --step-0:  clamp(1.0625rem, 1.03rem + 0.16vw, 1.1875rem);
  --step-1:  clamp(1.2rem, 1.14rem + 0.3vw, 1.4rem);
  --step-2:  clamp(1.5rem, 1.35rem + 0.72vw, 2.05rem);
  --step-3:  clamp(1.95rem, 1.7rem + 1.25vw, 2.85rem);
  --step-4:  clamp(2.4rem, 1.95rem + 2.25vw, 3.9rem);
  --step-5:  clamp(2.85rem, 2.1rem + 3.7vw, 5.25rem);

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;

  /* Newsreader sets on a bigger body than Cormorant, so display lines
     need air between them where Cormorant needed them almost touching. */
  --leading-tight:  1.1;    /* display */
  --leading-snug:   1.34;   /* subheads, standfirsts */
  --leading-normal: 1.65;   /* body */

  /* Newsreader is far less extended than Cormorant and needs almost no
     negative tracking; Karla's caps are wider than Jost's, so the
     all-caps tracking comes down a notch to match. */
  --tracking-tight:  -0.008em;
  --tracking-normal:  0;
  --tracking-wide:    0.155em;  /* eyebrows, nav, small caps */
  --tracking-widest:  0.3em;

  --measure: 66ch;  /* max line length for body copy */

  /* -----------------------------------------------------------------
     6. SPACE
     4px base, t-shirt named so page code reads as intent. A light
     layout lives or dies on the large end of this scale — when in
     doubt, go up one step.
     ----------------------------------------------------------------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6.5rem;
  --space-3xl: 10rem;

  /* Was clamp(4rem, 2.5rem + 8vw, 9rem) → 288px between one section's last line
     and the next one's first, then clamp(…, 5.5rem) → 176px. Still too much:
     on a laptop the about page spent its whole first screen on a heading and
     put the team photo below the fold. Now 128px between sections, which is
     enough for the surface change on a band to register and no more. */
  --section-y:   clamp(2rem, 1.4rem + 2.8vw, 4rem);
  --gutter:      clamp(1.5rem, 0.75rem + 3vw, 4rem);
  --content-max: 78rem;
  --prose-max:   40rem;

  /* -----------------------------------------------------------------
     7. SHAPE
     Almost no radius. Sharp corners read as clinical and expensive;
     rounded ones read as an app. The pill is reserved for buttons.
     ----------------------------------------------------------------- */
  --radius-s:  1px;
  --radius-m:  2px;
  --radius-l:  3px;
  --radius-pill: 999px;

  /* A deliberate exception to the rule above, and the only one. A face is not
     a UI surface: the sharp 4:5 crop read as an ID badge, which is the wrong
     register for the one part of the site asking you to trust a person. Large
     enough to be unmistakably intentional, well short of the circle that would
     turn a portrait into an avatar. Portraits only — do not reuse it on cards
     or panels, or the site starts reading as an app, which is exactly what the
     scale above exists to prevent. */
  --radius-portrait: 14px;

  --hairline: 1px solid var(--border-hairline);
  --hairline-gold: 1px solid var(--mana-gold);

  /* Shadows are nearly absent by design. On an ivory ground a shadow
     reads as dirt. Use the hairline instead; reach for --shadow-lift
     only on something genuinely floating. */
  --shadow-lift: 0 12px 40px rgba(31, 29, 26, 0.07);
  --shadow-menu: 0 16px 48px rgba(31, 29, 26, 0.10);

  /* -----------------------------------------------------------------
     8. MOTION
     Slow enough to feel considered, short enough not to delay someone
     trying to book. Nothing bounces.
     ----------------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
  --duration-fast: 160ms;
  --duration-base: 280ms;
  --duration-slow: 520ms;

  /* -----------------------------------------------------------------
     9. LAYERS
     ----------------------------------------------------------------- */
  --z-base:    0;
  --z-raised:  10;
  --z-sticky:  100;
  --z-header:  200;
  --z-overlay: 300;
  --z-modal:   400;
}


/* ===================================================================
   BASE
   =================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* No font-optical-sizing here: the self-hosted Newsreader is built
     without the opsz axis, so the property would do nothing. See the
     note in section 1 for what that bought and what it cost. */
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-m);
  text-wrap: balance;
}

h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); line-height: var(--leading-snug); }
h4 { font-size: var(--step-1); line-height: var(--leading-snug); font-weight: var(--weight-regular); }

p { margin: 0 0 var(--space-m); max-width: var(--measure); }

/* Links carry the gold underline, not gold text — at body size the
   underline is the affordance and the ink keeps the contrast. */
a {
  color: var(--text-primary);
  text-decoration-line: underline;
  text-decoration-color: var(--mana-gold);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: text-decoration-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}
a:hover { color: var(--text-accent); text-decoration-color: var(--mana-gold-deep); }

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

strong, b { font-weight: var(--weight-medium); }

/* Visible, high-contrast keyboard focus. Do not remove. */
:focus-visible {
  outline: 2px solid var(--mana-gold-deep);
  outline-offset: 3px;
  border-radius: var(--radius-s);
}

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

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


/* ===================================================================
   UTILITIES
   =================================================================== */

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

.u-prose   { max-width: var(--prose-max); }
.u-section { padding-block: var(--section-y); }
.u-center  { text-align: center; }
.u-center p, .u-center .standfirst { margin-inline: auto; }

.u-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}


/* ===================================================================
   COMPONENTS
   =================================================================== */

/* --- Eyebrow -------------------------------------------------------
   Small tracked label above a heading. Says where you are; never
   repeats the heading beneath it. */
.c-eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-accent);
  margin-bottom: var(--space-s);
}

/* Centered variant draws a short gold rule beneath itself. */
.c-eyebrow--marked::after {
  content: '';
  display: block;
  width: 2.5rem;
  height: 1px;
  background: var(--mana-gold);
  margin: var(--space-s) auto 0;
}

/* --- Rules ---------------------------------------------------------
   A weighted hairline that carries the gold on the left third only.
   Reads as a measure mark rather than a flourish, and replaces the
   ornamental logo-divider every med spa template ships with. */
.c-rule {
  border: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    var(--mana-gold) 0 5rem,
    var(--border-hairline) 5rem 100%
  );
  margin: var(--space-l) 0;
}

.c-rule--short {
  width: 3rem;
  background: var(--mana-gold);
  margin: var(--space-m) 0;
}

/* --- Buttons -------------------------------------------------------
   Two only. Primary is the booking path; secondary is everything else.
   Never more than one primary visible at a time.

   The primary is gold with ink on top (6.8:1), not white on gold —
   white on this gold fails contrast and reads cheap besides. */
.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  line-height: 1.25;
  padding: var(--space-s) var(--space-l);
  border: 1px solid transparent;
  border-radius: var(--radius-s);
  cursor: pointer;
  text-decoration: none;
  /* Labels wrap rather than overflow. With nowrap, "Read reviews on Google"
     rendered 310px wide inside a 272px column on a 320px screen and pushed the
     homepage into horizontal scroll. At any normal width these never wrap, so
     this costs nothing and removes a whole class of narrow-screen breakage.

     No text-wrap: balance here. Balance evens out line lengths, which on a
     button that comfortably fits one line will happily split it into two —
     "BOOK A / CONSULTATION" in the footer, in a column with room to spare. */
  text-align: center;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}

.c-btn--primary {
  background: var(--mana-gold);
  color: var(--text-on-accent);
  border-color: var(--mana-gold);
}
.c-btn--primary:hover,
.c-btn--primary:focus-visible {
  background: var(--mana-ink);
  border-color: var(--mana-ink);
  color: var(--text-on-dark);
}

.c-btn--secondary {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--mana-ink);
}
.c-btn--secondary:hover,
.c-btn--secondary:focus-visible {
  background: var(--mana-ink);
  color: var(--text-on-dark);
}

/* Ghost — for tertiary actions inside an already-busy band. */
.c-btn--ghost {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-hairline);
}
.c-btn--ghost:hover,
.c-btn--ghost:focus-visible { border-color: var(--mana-ink); }

.c-btn--small { padding: var(--space-2xs) var(--space-m); letter-spacing: 0.12em; }

/* On the ink band, invert. */
.band--inverse .c-btn--secondary { color: var(--text-on-dark); border-color: var(--mana-ivory); }
.band--inverse .c-btn--secondary:hover { background: var(--mana-ivory); color: var(--mana-ink); }

/* --- Pillar card ---------------------------------------------------
   One per outcome pillar. The rule above the name carries the pillar
   tint, so the color is doing navigational work rather than
   ornamenting. No fill, no shadow — hairlines only. */
.c-pillar {
  display: flex;
  flex-direction: column;
  position: relative;
  padding: var(--space-l) 0 0;
  border-top: 1px solid var(--mana-gold);
  text-decoration: none;
  color: inherit;
  transition: border-width var(--duration-base) var(--ease-out);
}
.c-pillar::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: -1px;
  height: 1px;
  background: var(--mana-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-slow) var(--ease-out);
}
.c-pillar:hover::after,
.c-pillar:focus-visible::after { transform: scaleX(1); }

.c-pillar__index {
  font-family: var(--font-body);
  font-size: var(--step--1);
  letter-spacing: var(--tracking-wide);
  color: var(--text-accent);
  margin-bottom: var(--space-s);
}
.c-pillar__name {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: var(--weight-light);
  margin: 0 0 var(--space-2xs);
}
.c-pillar__desc {
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  margin: 0 0 var(--space-m);
}
.c-pillar__list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-m);
  font-size: var(--step--1);
  color: var(--text-secondary);
  flex: 1;
}
.c-pillar__list li { padding: var(--space-3xs) 0; }
.c-pillar__more {
  font-size: var(--step--1);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-primary);
}
.c-pillar__more::after {
  content: '\2192';
  display: inline-block;
  margin-left: 0.5em;
  transition: transform var(--duration-base) var(--ease-out);
}
.c-pillar:hover .c-pillar__more::after { transform: translateX(0.25em); }

/* The provider card that used to live here is gone. The team page is built
   from .roster in site.css — editorial rows, not a grid of large portraits.
   Credentials still lead, which is the point: they are the practice's
   strongest asset and they belong above the photograph, not beneath it. */

/* --- Testimonial ---------------------------------------------------
   USE ONLY WITH VERIFIED, ATTRIBUTED REVIEWS. If there is no real
   quote, omit the component rather than fill it. */
.c-quote { margin: 0; max-width: 34ch; }
.c-quote__text {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: var(--weight-light);
  line-height: var(--leading-snug);
  font-style: italic;
  margin: 0 0 var(--space-m);
}
.c-quote__text::before { content: '\201C'; color: var(--mana-gold); }
.c-quote__text::after  { content: '\201D'; color: var(--mana-gold); }
.c-quote__source {
  font-size: var(--step--1);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-secondary);
  font-style: normal;
}

/* --- Disclosure block ----------------------------------------------
   Deposit policy, results-vary language, medical disclaimers. Surfaced
   plainly and early — never buried at page bottom. */
.c-disclosure {
  border-top: var(--hairline-gold);
  padding-top: var(--space-m);
  /* One step up from fine print. At --step--1 a full-width line ran to about
     180 characters, so the text had to be capped and then stopped halfway
     under a full-width rule. At this size the same width lands near 100, which
     reads, fills the band, and suits an audience skewing past 40 besides. */
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--text-secondary);
  /* The rule spans the full section — a gold hairline that stops at 40% reads
     as a mistake next to full-width content above it. The measure constraint
     belongs on the paragraph, so the line length stays readable underneath. */
  max-width: none;
}
.c-disclosure strong { color: var(--text-primary); font-weight: var(--weight-medium); }
/* Fine print sets in columns rather than one short line under a full-width
   rule. Capping the paragraph at the measure left the gold rule running the
   whole section with the text stopping halfway, which read as unfinished.
   Letting it simply run full width would be worse — 170-odd characters a line
   at this size and the eye loses its place coming back.

   `columns` takes a minimum column WIDTH, so this splits into two only when
   there is room for two comfortable measures, and stays single-column on a
   phone. No breakpoint needed. */
/* Runs the full width of its section, matching the rule above it. Columns were
   tried first and were wrong for this: these blocks are two or three lines, so
   balancing them across two columns stranded a single word ("anything.") alone
   in column two. */
.c-disclosure p { max-width: none; }

/* --- Form ----------------------------------------------------------
   Labels are always visible. Placeholders are examples, never labels. */
.c-field { display: flex; flex-direction: column; gap: var(--space-2xs); margin-bottom: var(--space-m); }
.c-field__label {
  font-size: var(--step--1);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.c-field__hint { font-size: var(--step--1); color: var(--text-secondary); }
.c-input {
  font-family: var(--font-body);
  font-size: var(--step-0);
  padding: var(--space-xs) 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--mana-sand);
  border-radius: 0;
  color: var(--text-primary);
  transition: border-color var(--duration-fast) var(--ease-out);
}
.c-input:hover { border-bottom-color: var(--mana-ink-soft); }
.c-input:focus { border-bottom-color: var(--mana-gold); outline-offset: 4px; }

/* --- Booking bar (signature) ---------------------------------------
   The single booking path. The old site offered three competing
   systems (Podium, Jane, RepeatMD) with no hierarchy; this exists so
   there is exactly one primary action on every page. Rewards logins
   live in the footer, not here. */
.c-bookbar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  padding: var(--space-xs) var(--gutter);
  background: rgba(253, 252, 250, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--text-primary);
  border-top: 1px solid var(--mana-gold);
  transition: transform var(--duration-base) var(--ease-out),
              opacity var(--duration-fast) var(--ease-out);
}
/* Progressive enhancement: the bar is visible by default and only tucked away
   once JS confirms it can bring it back. Without script it simply stays put,
   which is the behavior that matters. */
.js .c-bookbar[data-tucked="true"] {
  transform: translateY(110%);
  opacity: 0;
  pointer-events: none;
}
.c-bookbar__label {
  font-size: var(--step--1);
  line-height: var(--leading-snug);
  margin: 0;
  max-width: none;
  color: var(--text-secondary);
  /* A flex item defaults to min-width:auto and refuses to shrink below its
     content, which pushed the bar a few pixels past the viewport. */
  min-width: 0;
}
.c-bookbar__label strong {
  display: block;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-primary);
  white-space: nowrap;
}
/* Two lengths of the same message. Below 34rem the full sentence wrapped to
   five lines and crushed the button down to a sliver, which defeats the point
   of a booking bar. */
.c-bookbar__short { display: none; }
@media (max-width: 33.99rem) {
  .c-bookbar__detail { display: none; }
  .c-bookbar__short { display: block; }
  .c-bookbar { gap: var(--space-s); }
  .c-bookbar .c-btn { flex: none; }
}
/* HIDDEN ON DESKTOP. From 64rem the masthead carries its own booking button
   and is itself sticky, so keeping this bar as well put a third copy of the
   same call to action on screen at once and took a strip of every viewport to
   do it. Below 64rem the masthead button is folded into the hamburger, which
   is where a persistent bar actually earns its keep. */
@media (min-width: 64rem) {
  .c-bookbar { display: none; }
}

/* --- Inline icon ---------------------------------------------------
   Sized in ems so it tracks the text it sits beside, and drawn in
   currentColor so it inherits link color and hover states. Always
   paired with a visible label — see the note in _includes/footer.html. */
.c-icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  display: block;
}