/* ============================================================================
   ROARK ORTHODONTICS — COLORS & TYPE
   Franklin, TN · "Modern Southern charm, understated vintage sophistication"

   SOURCE OF TRUTH (all values verified against the live site, not invented):
     roarkortho.com/wp-content/themes/jupiterx-child/assets/css/style.css
       -> the client's own documented brand spec:
          CLIENT COLORS   Blue #003d69 · Dark Blue #002946 · Pink #C7A4A1
          GLOBAL ROLES    Primary #003D69 · Secondary #002946
                          Text #FFF · Accent #C7A4A1
          GRAYS           #fff #eee #ddd #aaa #888 #6a6a6a #444 #222 #000
          FONTS           Playfair Display + Montserrat   (see BODY note below)
     .../css/forms.css   -> 2px #C7A4A1 input borders, #003d69 input text,
                            border-radius .8rem, transparent fills
     .../css/header.css  -> 8rem header, .5s ease transitions, #c7a4a1 hover
     .../css/footer.css  -> #c7a4a1 footer ground

   Everything below either IS one of those values verbatim, or is a warm
   neutral EXTENSION sampled from the practice's own photography.

   ⚠ ONE DELIBERATE DEPARTURE FROM THE LIVE SITE'S STACK:
     The site sets body copy in Montserrat. The client has since chosen
     LORA for the body face instead — a warm reading serif with genuine
     400–700 weight coverage. That change flows through --font-body.
     Everything else here remains the site's own documented spec.
   ========================================================================= */

/* Fonts are self-hosted and declared here directly, so this file resolves from
   ANY folder depth (root, preview/, ui_kits/website/). Paths are relative to
   this file. fonts.css carries the same declarations for use on its own. */

/* DISPLAY — Playfair Display, variable 400–700 */
@font-face {
  font-family: 'Playfair Display'; font-style: normal; font-weight: 400 700;
  font-display: swap; src: url('/static/fonts/playfair-display-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display'; font-style: italic; font-weight: 400 700;
  font-display: swap; src: url('/static/fonts/playfair-display-latin-italic.woff2') format('woff2');
}

/* BODY — Lora. Variable 400–700 with a true italic, so the full weight
   range below is real rather than synthesised. */
@font-face {
  font-family: 'Lora'; font-style: normal; font-weight: 400 700;
  font-display: swap; src: url('/static/fonts/lora-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Lora'; font-style: italic; font-weight: 400 700;
  font-display: swap; src: url('/static/fonts/lora-latin-italic.woff2') format('woff2');
}

:root {
  /* ── BRAND PRIMITIVES (verbatim from the site's stylesheet) ─────────── */
  --roark-blue:        #003d69;  /* "Blue"        — PRIMARY    */
  --roark-blue-deep:   #002946;  /* "Dark Blue"   — SECONDARY  */
  --roark-pink:        #c7a4a1;  /* "Pink"        — ACCENT     */

  /* ── NAVY SCALE (tints/shades of #003d69, hue-locked) ───────────────── */
  --navy-900: #001a2d;
  --navy-800: #002946;  /* == secondary, verbatim */
  --navy-700: #00304f;
  --navy-600: #003d69;  /* == primary, verbatim   */
  --navy-500: #1a5a86;
  --navy-400: #4f7fa3;
  --navy-300: #86a7c0;
  --navy-200: #bdd0de;
  --navy-100: #e4ecf2;
  --navy-050: #f2f7fa;

  /* ── ROSE SCALE (tints/shades of #c7a4a1, hue-locked) ───────────────── */
  --rose-900: #6b4a47;
  --rose-800: #8c625e;
  --rose-700: #a87b77;
  --roark-rose-600: #c7a4a1; /* == accent, verbatim */
  --rose-500: #d3b6b3;
  --rose-400: #dfc8c6;
  --rose-300: #ead9d8;
  --rose-200: #f1e6e5;
  --rose-100: #f7f0ef;
  --rose-050: #fbf7f7;

  /* ── WARM NEUTRALS (extension — sampled from the practice's photography:
        blush walls, dark wood floors, cream trim) ─────────────────────── */
  --paper:      #fdfaf7;  /* page ground — warm, never pure #fff */
  --cream:      #f7f1ea;  /* alternating section ground */
  --sand:       #ece0d4;  /* dividers, quiet fills */
  --clay:       #d9c6b4;  /* subtle borders on warm grounds */
  --stone:      #b3a89d;  /* muted meta text, disabled */

  --white: #ffffff;       /* reserved: text ON navy/rose, cards on paper */

  /* ── INK (verbatim grays, re-pointed to warm-leaning roles) ──────────── */
  --ink-900: #222222;  /* headings                    (site gray #222) */
  --ink-800: #444444;  /* strong body                 (site gray #444) */
  --ink-700: #5c5c5c;  /* body copy                   (site gray #6a6a6a) */
  --ink-600: #6f6f6f;  /* secondary / meta            (site gray #888) */
  --ink-500: #707070;  /* placeholders                (site gray #aaa) */
  --ink-300: #dddddd;  /* hairline borders            (site gray #ddd) */
  --ink-200: #eeeeee;  /* fills                       (site gray #eee) */

  /* ── SEMANTIC COLOR ROLES ───────────────────────────────────────────── */
  --c-primary:        var(--navy-600);
  --c-primary-hover:  var(--navy-800);
  --c-primary-press:  var(--navy-900);
  --c-secondary:      var(--navy-800);
  --c-accent:         var(--roark-rose-600);
  --c-accent-soft:    var(--rose-200);
  --c-accent-hover:   var(--rose-700);
  --c-accent-ink:     var(--rose-900);   /* rose readable as TEXT */

  --c-bg:            var(--paper);
  --c-bg-alt:        var(--cream);
  --c-bg-deep:       var(--navy-800);
  --c-bg-accent:     var(--roark-rose-600);

  --c-surface:       var(--white);
  --c-border:        var(--clay);
  --c-border-hair:   var(--ink-300);
  --c-border-strong: var(--roark-rose-600); /* forms use a 2px rose border */

  --c-text:      var(--ink-700);
  --c-heading:   var(--navy-600);
  --c-meta:      var(--ink-600);
  --c-on-deep:   var(--white);
  --c-on-accent: var(--white);
  --c-link:      var(--navy-600);
  --c-link-hover:var(--roark-rose-600);
  --c-focus:     var(--roark-rose-600);

  --c-success: #4a7c59;
  --c-warning: #b08245;
  --c-error:   #a4453c;   /* warm, never fire-engine */

  /* ── TYPE FAMILIES ─────────────────────────────────────────────────── */
  /* Both families are serifs. Playfair Display is high-contrast and editorial;
     Lora is a warm, even reading serif. The contrast comes from texture rather
     than from serif-vs-sans, which lands on "historic downtown" at the cost of
     the contemporary-sans counterweight. If a sans is ever needed for dense UI
     (tables, data), introduce one as a THIRD family deliberately rather than by
     accident. */
  --font-display: 'Playfair Display', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-body:    'Lora', 'Iowan Old Style', Georgia, 'Times New Roman', serif;

  /* ── TYPE SCALE (16px root; site heading sizes preserved) ───────────── */
  --fs-display-1: 4.5rem;    /* 72px — hero display            */
  --fs-display-2: 3.5rem;    /* 56px — page hero               */
  --fs-h1:        3rem;      /* 48px — site value, verbatim    */
  --fs-h2:        2.25rem;   /* 36px == WP "large" preset      */
  --fs-h3:        1.75rem;   /* 28px == site .card-title       */
  --fs-h4:        1.5rem;    /* 24px == site value, verbatim   */
  --fs-h5:        1.25rem;   /* 20px == WP "medium" preset     */
  --fs-lead:      1.25rem;   /* 20px — intro paragraphs        */
  --fs-body:      1.125rem;  /* 18px — site submit btn size    */
  --fs-body-sm:   1rem;      /* 16px — site base form size     */
  --fs-caption:   0.9375rem; /* 15px — up 1px: serif needs it  */
  --fs-eyebrow:   0.875rem;  /* 14px — up 1px: serif needs it  */

  --lh-display: 1.12;
  --lh-heading: 1.3;    /* site value, verbatim */
  --lh-body:    1.6;    /* site value, verbatim */
  --lh-tight:   1.4;

  /* ── WEIGHTS ───────────────────────────────────────────────────────── */
  /* Lora is variable across 400–700, so the whole scale is real. */
  --fw-body:        400;  /* running body copy        */
  --fw-body-medium: 500;  /* labels, nav — real       */
  --fw-body-bold:   600;  /* buttons, eyebrows        */
  --fw-body-black:  700;  /* rare emphasis            */
  --fw-display-light: 400;/* large display type       */
  --fw-display:       500;/* headings                 */
  --fw-display-bold:  700;

  /* Generic aliases used by older markup. */
  --fw-light:  400;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi:   600;
  --fw-bold:   700;

  --ls-none:  0;
  --ls-tight: -0.01em;
  --ls-label: 0.14em;   /* uppercase eyebrow tracking */
  --ls-btn:   0.08em;

  /* ── SPACING (1rem / 16px base) ────────────────────────────────────── */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 2.5rem;   --sp-8: 3rem;
  --sp-9: 4rem;     --sp-10: 5rem;    --sp-11: 6rem;    --sp-12: 8rem;

  /* ── RADIUS (site values: buttons 2px, inputs .8rem, pills 9999px) ─── */
  --r-none: 0;
  --r-xs:   2px;
  --r-sm:   0.375rem;
  --r-md:   0.8rem;   /* inputs, verbatim */
  --r-lg:   1.25rem;
  --r-pill: 9999px;

  /* ── BORDERS (the brand's primary visual device) ───────────────────── */
  --bw-hair:   1px;
  --bw-field:  2px;   /* inputs, verbatim */
  --bw-accent: 3px;
  --b-hair:  var(--bw-hair) solid var(--c-border-hair);
  --b-warm:  var(--bw-hair) solid var(--c-border);
  --b-field: var(--bw-field) solid var(--c-border-strong);

  /* ── ELEVATION (restrained, warm-tinted — the brand leans on borders) ─ */
  --shadow-xs: 0 1px 2px rgba(0, 41, 70, 0.05);
  --shadow-sm: 0 2px 8px rgba(0, 41, 70, 0.06);
  --shadow-md: 0 6px 24px rgba(0, 41, 70, 0.08);
  --shadow-lg: 0 16px 48px rgba(0, 41, 70, 0.10);
  --shadow-inset-flat: inset 0 0 5px var(--ink-200); /* site form focus */

  /* ── MOTION (site uses a uniform .5s color/ease transition) ────────── */
  --dur-fast: 150ms;
  --dur:      250ms;
  --dur-slow: 500ms;
  --ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --ease-warm: cubic-bezier(0.22, 0.61, 0.36, 1);
  --tr-color:  color var(--dur-slow) ease-in-out;
  --tr-all:    all var(--dur-slow) var(--ease);

  /* ── LAYOUT ────────────────────────────────────────────────────────── */
  --w-narrow: 46rem;
  --w-text:   64rem;
  --w-page:   78rem;
  --w-wide:   90rem;
  --gutter:   clamp(1.25rem, 4vw, 3rem);
  --header-h: 8rem;   /* site value, verbatim */
  --header-h-scrolled: 6rem;
}

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

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

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

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Lora has genuine 400–700 coverage, but disabling synthesis guards against
     any faux-bold if a weight outside that range is ever requested. */
  font-synthesis: none;
}

/* ============================================================================
   SEMANTIC TYPE
   ========================================================================= */

h1, h2, h3, .h1, .h2, .h3,
.h-display-1, .h-display-2, .h-h4, .h-h5 {
  font-family: var(--font-display);
  color: var(--c-heading);
  font-weight: var(--fw-display);
  line-height: var(--lh-heading);
  margin: 0 0 var(--sp-4);
  text-wrap: pretty;
}

.h-display-1, h1.h-display-1 {
  font-size: var(--fs-display-1); line-height: var(--lh-display);
  letter-spacing: var(--ls-tight); font-weight: var(--fw-display-light);
}
.h-display-2 {
  font-size: var(--fs-display-2); line-height: var(--lh-display);
  letter-spacing: var(--ls-tight);
}
h1, .h1 { font-size: var(--fs-h1); }
h2, .h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); }
.h-h4  { font-size: var(--fs-h4); font-weight: var(--fw-display); }
.h-h5  { font-size: var(--fs-h5); font-weight: var(--fw-display); }

/* Section head is often a serif question-CTA ("We can't wait to meet you!") */
.h-section {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  color: var(--c-heading);
  font-weight: var(--fw-display);
  line-height: var(--lh-heading);
  text-wrap: balance;
}

/* Eyebrow — the brand's small uppercase tracked label.
   Set in the BODY serif, tracked wide: a serif label reads warmer and more
   considered than a corporate sans would, which suits this brand. */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-body-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-accent-ink);
  line-height: var(--lh-tight);
  display: block;
  margin: 0 0 var(--sp-3);
}
.eyebrow--navy { color: var(--navy-600); }

p, .p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text);
  margin: 0 0 var(--sp-4);
  text-wrap: pretty;
}

/* Small supporting text. Captions sit a touch larger than a sans would need,
   because a serif at 14px is less comfortable than a geometric at the same
   size. */
.caption, .p-caption { font-size: var(--fs-caption); }
.lead, .p-lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--ink-800);
}
.caption, .p-caption {
  font-size: var(--fs-caption);
  color: var(--c-meta);
  line-height: var(--lh-tight);
}
.serif-italic { font-family: var(--font-display); font-style: italic; }
.text-accent-ink { color: var(--c-accent-ink); }
.mono {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  font-size: var(--fs-caption);
}

a { color: var(--c-link); text-decoration: none; transition: var(--tr-color); }
a:hover { color: var(--c-link-hover); }

:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
}

/* ============================================================================
   IN-USE UTILITIES (kept small on purpose — this is a foundation, not a kit)
   ========================================================================= */

/* The brand's signature rule — the rose underline beneath the wordmark,
   reused as a divider / accent under headings. */
.rose-rule {
  display: block; width: 3.5rem; height: 3px;
  background: var(--roark-rose-600); border: 0; margin: var(--sp-4) 0;
}

.on-deep { color: var(--c-on-deep); }
.on-deep h1, .on-deep h2, .on-deep h3, .on-deep .h-section { color: var(--white); }
.on-deep p { color: rgba(255, 255, 255, 0.88); }
.on-deep .eyebrow { color: var(--rose-400); }


/* ============================================================================
   LOGO COLOURWAYS — the supplied 1200×483 lockup, three prepared variants.

   The rose rule is part of the mark, so the logo is NEVER recoloured with a
   filter and NEVER sits on a plate or box. Instead each ground gets a variant
   of the real artwork with its colours swapped:
     roark-logo.png            navy lettering + rose rule   → light grounds
     roark-logo-reverse.png    paper lettering + ROSE rule  → navy / dark grounds
     roark-logo-on-rose.png    white lettering + pale rule  → the rose footer
   Same letterforms, same lockup, both colours intact everywhere.

   Sizing: set a width, never a height — the aspect ratio is 2.484:1.
   ========================================================================= */
.logo-img { display: block; height: auto; }

/* ═══════════ STRUCTURAL LAYER — ported from design site.css ═══════════ */

/* ============================================================================
   ROARK ORTHODONTICS — UPGRADED SITE STYLESHEET
   Structural / technical layer ONLY. Every colour, font, radius and shadow
   value is inherited from ../../colors_and_type.css — the verified brand tokens.
   Nothing in this file introduces a new brand colour or typeface.

   Contents
     1.  Base + layout helpers
     2.  Header / nav / mobile nav
     3.  Buttons, eyebrows, misc type
     4.  Hero + interior page banner
     5.  PATHWAY CARDS            (dual-demographic split)
     6.  WAVEORTHO EMBED          (responsive widget host + modal)
     7.  STICKY MOBILE CTA        (conversion defence)
     8.  GEO FOOTER               (NAP · map embed · service proximity)
     9.  PPC LANDING PAGE SHELL   (ad-specific, nav-free)
     10. Blog (index + article)
     11. Gallery / before-after comparison
     12. Utilities (sr-only, lazy-map facade, CWV)
     13. Responsive
   ========================================================================= */

/* ── 1. BASE + LAYOUT ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* Guard: nothing in this build may create horizontal scroll (mobile iframe cut-off) */
html, body { overflow-x: clip; max-width: 100%; }

body {
  margin: 0;
  background: var(--paper);
  font-family: var(--font-body);
  color: var(--c-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  /* leaves room for the sticky mobile CTA so it never covers page content */
  padding-bottom: var(--sticky-cta-h, 0px);
}
img, svg, video, iframe { max-width: 100%; }
img { display: block; }

.wrap { width: 100%; max-width: var(--w-page); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-wide { max-width: var(--w-wide); }
.wrap-text { max-width: var(--w-text); }
.wrap-narrow { max-width: var(--w-narrow); }
.center { text-align: center; }
.center .wrap-narrow, .center .wrap-text { margin-left: auto; margin-right: auto; }

.sec { padding: var(--sp-11) 0; }
.sec-sm { padding: var(--sp-9) 0; }
.sec-xs { padding: var(--sp-8) 0; }
.sec-lg { padding: var(--sp-12) 0; }
.sec--paper { background: var(--paper); }
.sec--cream { background: var(--cream); }
.sec--white { background: var(--white); }
.sec--navy  { background: var(--navy-800); }
.sec--rose  { background: var(--roark-pink); }
.sec--tint  { background: var(--rose-050); }
.sec--hair { border-top: var(--b-warm); }

/* Below-fold sections skip layout/paint until scrolled near — Core Web Vitals */
.cv { content-visibility: auto; contain-intrinsic-size: auto 60rem; }

/* ── 2. HEADER / NAV ──────────────────────────────────────────────────── */
.hdr { position: fixed; inset: 0 0 auto 0; z-index: 60; }
.hdr__top {
  background: var(--navy-700); color: rgba(255,255,255,.93);
  font-size: var(--fs-caption); letter-spacing: .02em;
  transition: max-height var(--dur-slow) var(--ease), opacity var(--dur-slow) var(--ease);
  max-height: 4rem; overflow: hidden;
}
.hdr__top-in {
  display: flex; flex-wrap: wrap; gap: var(--sp-6);
  align-items: center; justify-content: center;
  padding: .7rem 0; min-height: 2.5rem;
}
.hdr__top-in span { display: inline-flex; align-items: center; gap: .5rem; }
.hdr__top-in a { color: inherit; }
.hdr__top-in svg { width: .75rem; height: .75rem; fill: var(--rose-300); flex: none; }

.hdr__bar {
  background: transparent; border-bottom: 1px solid transparent;
  transition: background var(--dur-slow) var(--ease), border-color var(--dur-slow) var(--ease);
}
.hdr__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-5); min-height: var(--header-h);
  transition: min-height var(--dur-fast) var(--ease);
}
.hdr--solid .hdr__top { max-height: 0; opacity: 0; }
.hdr--solid .hdr__bar { background: rgba(255,255,255,.97); border-bottom-color: var(--clay); }
.hdr--solid .hdr__in { min-height: var(--header-h-scrolled); }

.logo-link { display: block; flex: none; position: relative; text-decoration: none; }
.logo-link .logo-img { display: block; transition: width var(--dur-slow) var(--ease), opacity .3s var(--ease); }
.logo-link .logo-img:first-child { position: absolute; inset: 0; opacity: 1; }
.logo-link .logo-img:last-child  { position: relative; opacity: 0; }
.hdr--solid .logo-link .logo-img:first-child { opacity: 0; }
.hdr--solid .logo-link .logo-img:last-child  { opacity: 1; }

.nav { display: flex; align-items: center; gap: var(--sp-6); }
.nav a {
  font-size: var(--fs-caption); font-weight: var(--fw-body-medium);
  letter-spacing: .05em; color: var(--white); cursor: pointer;
  padding: .5rem 0; position: relative; white-space: nowrap;
  text-decoration: none; transition: var(--tr-color);
}
.hdr--solid .nav a { color: var(--navy-600); }
.nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 2px; background: var(--roark-pink); transition: right var(--dur-slow) var(--ease);
}
.nav a:hover { color: var(--roark-pink); }
.nav a:hover::after, .nav a.is-active::after { right: 0; }
.nav a.is-active { color: var(--roark-pink); }
.hdr__cta { display: inline-flex; }

.burger { display: none; background: transparent; border: 0; cursor: pointer; padding: .5rem; color: var(--white); }
.hdr--solid .burger { color: var(--navy-600); }
.burger svg { width: 1.35rem; height: 1.35rem; fill: currentColor; }

.mnav {
  position: fixed; inset: 0; z-index: 90; background: var(--navy-800);
  display: flex; flex-direction: column; padding: var(--sp-6) var(--gutter);
  transform: translateY(-100%); transition: transform var(--dur-slow) var(--ease);
  overflow-y: auto;
}
.mnav.is-open { transform: translateY(0); }
.mnav__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-7); }
.mnav__x { background: none; border: 0; cursor: pointer; color: var(--white); padding: .5rem; }
.mnav__x svg { width: 1.4rem; height: 1.4rem; fill: currentColor; }
.mnav a.mnav__link {
  font-family: var(--font-display); font-size: var(--fs-h3); color: var(--white);
  padding: var(--sp-4) 0; border-bottom: 1px solid rgba(255,255,255,.14);
  text-decoration: none; cursor: pointer;
}
.mnav a.mnav__link:hover { color: var(--rose-400); }
.mnav .btn { margin-top: var(--sp-6); justify-content: center; }

/* ── 3. BUTTONS / TYPE BITS ───────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font-family: var(--font-body); font-size: var(--fs-caption);
  font-weight: var(--fw-semi); letter-spacing: var(--ls-btn);
  text-transform: uppercase; text-decoration: none;
  border: 1px solid transparent; border-radius: var(--r-xs);
  padding: .9rem 1.9rem; cursor: pointer;
  transition: var(--tr-all); white-space: nowrap;
}
.btn svg { width: .8rem; height: .8rem; fill: currentColor; flex: none; }
.btn--pri { background: var(--navy-600); color: var(--white); }
.btn--pri:hover { background: var(--navy-800); color: var(--white); }
.btn--rose { background: var(--roark-pink); color: var(--white); }
.btn--rose:hover { background: var(--rose-700); color: var(--white); }
.btn--out { background: transparent; border-color: rgba(255,255,255,.55); color: var(--white); }
.btn--out:hover { background: rgba(255,255,255,.14); border-color: var(--white); color: var(--white); }
.btn--out-ink { background: transparent; border-color: var(--clay); color: var(--navy-600); }
.btn--out-ink:hover { background: var(--rose-100); border-color: var(--roark-pink); color: var(--navy-600); }
.btn--white { background: var(--white); color: var(--navy-600); }
.btn--white:hover { background: var(--rose-100); color: var(--navy-600); }
.btn--sm { padding: .7rem 1.35rem; font-size: var(--fs-eyebrow); }
.btn--lg { padding: 1.1rem 2.4rem; font-size: var(--fs-body-sm); }
.btn--block { width: 100%; }

.eb {
  display: block; font-family: var(--font-body); font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semi); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--rose-800); margin-bottom: var(--sp-4);
}
.eb--light { color: var(--rose-400); }
.on-navy { color: var(--white); }
.on-navy h1, .on-navy h2, .on-navy h3, .on-navy h4 { color: var(--white); }
.on-navy p, .on-navy li { color: rgba(255,255,255,.88); }
.on-navy .eb { color: var(--rose-400); }
.on-navy a { color: var(--white); }
.on-rose h1, .on-rose h2, .on-rose h3, .on-rose h4 { color: var(--white); }
.on-rose p, .on-rose li { color: rgba(255,255,255,.92); }
.on-rose .eb { color: rgba(255,255,255,.9); }

.h-display { font-family: var(--font-display); font-weight: var(--fw-display-light);
             letter-spacing: var(--ls-tight); line-height: var(--lh-display); }
.h-section { font-family: var(--font-display); font-size: var(--fs-h2);
             color: var(--c-heading); font-weight: var(--fw-display);
             line-height: var(--lh-heading); text-wrap: balance; }
.lead { font-size: var(--fs-lead); line-height: var(--lh-body); color: var(--ink-800); }
.rose-rule { width: 3.5rem; height: 3px; background: var(--roark-pink);
             border: 0; margin: var(--sp-5) 0; }
.center .rose-rule { margin-left: auto; margin-right: auto; }
.muted { color: var(--ink-600); }

/* check list — the brand's FA check glyph, no hand-drawn iconography */
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.ticks li { display: flex; gap: .7rem; align-items: flex-start;
            font-size: var(--fs-body-sm); color: var(--ink-700); }
.ticks svg { width: .85rem; height: .85rem; fill: var(--roark-pink);
             flex: none; margin-top: .45rem; }
.on-navy .ticks li { color: rgba(255,255,255,.9); }
.on-navy .ticks svg { fill: var(--rose-400); }

/* ── GRID / FLEX OVERFLOW GUARD ────────────────────────────────────────────
   A 1fr grid track defaults to minmax(auto, 1fr), and that `auto` floor is the
   item's MIN-CONTENT size. An image with an intrinsic width plus an
   aspect-ratio (or a long unbreakable string) therefore blows the track wider
   than the viewport — and the page-wide `overflow-x: clip` would then HIDE the
   overflow instead of revealing it, silently CUTTING OFF TEXT on mobile.
   min-width: 0 restores the intended shrink-to-fit behaviour. This is the single
   most important rule for keeping content intact on a narrow screen. */
.split > *, .grid-2 > *, .grid-3 > *, .grid-4 > *, .path > *,
.posts > *, .lp__grid > *, .ftr__grid > *, .mas > *,
.lp__trustgrid > *, .creds > *, .path__body > * { min-width: 0; }
.split__media, .split__media img, .card__img, .card__img img,
.path__media, .path__media img, .post__img, .post__img img,
.mas img, .ba, .frame-rose { min-width: 0; max-width: 100%; }
.split__media img, .card__img img, .path__media img, .post__img img { width: 100%; }

/* ── 4. HERO + PAGE BANNER ────────────────────────────────────────────── */
.hero {
  position: relative; min-height: 44rem; display: flex; align-items: center;
  padding: calc(var(--header-h) + var(--sp-11)) 0 var(--sp-11); overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(0,41,70,.82) 0%, rgba(0,41,70,.6) 42%, rgba(0,41,70,.18) 78%);
}
.hero__in { position: relative; z-index: 2; max-width: 40rem; }
.hero h1 {
  font-family: var(--font-display); font-weight: var(--fw-normal);
  font-size: var(--fs-display-2); line-height: var(--lh-display);
  letter-spacing: var(--ls-tight); color: var(--white);
  margin: 0 0 var(--sp-5); text-wrap: balance;
}
.hero h1 em { font-style: italic; color: var(--rose-400); }
.hero p { font-size: var(--fs-lead); color: rgba(255,255,255,.9); max-width: 32rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-7); }

.pbanner {
  position: relative; min-height: 26rem; display: flex; align-items: flex-end;
  padding: calc(var(--header-h) + var(--sp-9)) 0 var(--sp-9); overflow: hidden;
}
.pbanner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pbanner::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,41,70,.45) 0%, rgba(0,41,70,.78) 100%);
}
.pbanner__in { position: relative; z-index: 2; }
.pbanner h1 { font-family: var(--font-display); font-weight: var(--fw-normal);
              font-size: var(--fs-h1); color: var(--white); margin: 0 0 var(--sp-3);
              line-height: var(--lh-heading); text-wrap: balance; }
.pbanner p { color: rgba(255,255,255,.9); max-width: 46rem; margin: 0; }

/* breadcrumbs — visible trail + BreadcrumbList schema source of truth */
/* Default styling is for light grounds (cream / paper): every text colour here
   clears 4.5:1 against #f7f1ea — links #444 (8.7:1), current page #6a6a6a (4.8:1).
   The dark photo banner overrides below restore the white ramp. */
.crumbs { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
          font-size: var(--fs-eyebrow); letter-spacing: .06em; text-transform: uppercase;
          color: var(--ink-700); margin-bottom: var(--sp-4); }
.crumbs a { color: var(--ink-800); text-decoration: none; }
.crumbs a:hover { color: var(--c-accent-ink); }
.crumbs span[aria-hidden] { color: var(--ink-700); }

.pbanner .crumbs { color: rgba(255,255,255,.75); }
.pbanner .crumbs a { color: rgba(255,255,255,.85); }
.pbanner .crumbs a:hover { color: var(--rose-300); }
.pbanner .crumbs span[aria-hidden] { color: rgba(255,255,255,.45); }

/* ── 5. PATHWAY CARDS (dual-demographic split) ────────────────────────── */
/* Sits immediately below the hero — the first thing under the fold.
   Two equal, clearly-labelled doors: parents → kids; adults → aligners. */
.path { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-7); }

.path__card {
  position: relative; display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--clay);
  border-radius: var(--r-md); overflow: hidden; text-decoration: none;
  transition: border-color var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease);
}
.path__card:hover { border-color: var(--roark-pink); box-shadow: var(--shadow-md); }

.path__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--sand); }
.path__media img { width: 100%; height: 100%; object-fit: cover;
                   transition: transform 1s var(--ease-warm); }
.path__card:hover .path__media img { transform: scale(1.06); }
.path__tag {
  position: absolute; left: var(--sp-5); bottom: var(--sp-5); z-index: 2;
  font-size: var(--fs-eyebrow); font-weight: var(--fw-semi); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--white);
  background: rgba(0,41,70,.86); padding: .45rem .9rem; border-radius: var(--r-xs);
}
.path__body { padding: var(--sp-7) var(--sp-7) var(--sp-6); display: flex;
              flex-direction: column; flex: 1; }
.path__body h2 {
  font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--fw-medium);
  color: var(--navy-600); margin: 0 0 var(--sp-3); line-height: var(--lh-heading);
}
.path__body p { font-size: var(--fs-body-sm); margin: 0 0 var(--sp-5); }
.path__body .ticks { margin-bottom: var(--sp-6); }
.path__go {
  margin-top: auto; display: inline-flex; align-items: center; gap: .7rem;
  font-size: var(--fs-eyebrow); font-weight: var(--fw-semi); letter-spacing: .12em;
  text-transform: uppercase; color: var(--navy-600);
}
.path__go svg { width: .75rem; height: .75rem; fill: currentColor;
                transition: transform var(--dur) var(--ease); }
.path__card:hover .path__go { color: var(--rose-800); }
.path__card:hover .path__go svg { transform: translateX(4px); }
.path__card--kids { border-top: 3px solid var(--roark-pink); }
.path__card--adults { border-top: 3px solid var(--navy-600); }

/* ── 6. WAVEORTHO WIDGET HOST ─────────────────────────────────────────── */
/* Vendor-agnostic, overflow-proof host. The script adapter in site.js mounts
   the widget here, or swaps in the vendor's own <iframe>. */
.wave {
  background: var(--white); border: 1px solid var(--clay);
  border-radius: var(--r-md); overflow: hidden; width: 100%; max-width: 100%;
  display: flex; flex-direction: column;
}
.wave__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap; padding: var(--sp-4) var(--sp-6);
  background: var(--cream); border-bottom: 1px solid var(--clay);
}
.wave__badge { display: inline-flex; align-items: center; gap: .55rem;
               font-size: var(--fs-eyebrow); letter-spacing: .06em;
               text-transform: uppercase; font-weight: var(--fw-semi); color: var(--navy-600); }
.wave__badge i { width: .5rem; height: .5rem; border-radius: 50%;
                 background: var(--c-success); flex: none; }
.wave__host { position: relative; width: 100%; max-width: 100%; min-width: 0; }
.wave__host iframe { display: block; width: 100%; max-width: 100%; border: 0;
                     background: var(--paper); }
.wave__fallback { padding: var(--sp-6); }

/* The scheduler books the new patient exam and nothing else — so the panel
   states the one visit up front instead of asking the visitor to compare. */
.wave__exam {
  background: var(--cream); border: 1px solid var(--clay);
  border-top: 3px solid var(--roark-pink);
  border-radius: var(--r-sm); padding: var(--sp-5) var(--sp-5) var(--sp-4);
  margin-bottom: var(--sp-6);
}
.wave__exam h3 { font-size: var(--fs-h5); margin: .35rem 0 .3rem; }
.wave__exam__meta {
  margin: 0 0 .85rem; font-size: var(--fs-eyebrow); font-weight: var(--fw-semi);
  letter-spacing: .04em; color: var(--rose-800);
}
.wave__exam p { margin: 0; font-size: var(--fs-caption); color: var(--ink-700); }
.wave__exam__inc {
  list-style: none; margin: var(--sp-4) 0 0; padding: var(--sp-4) 0 0;
  border-top: 1px solid var(--clay); display: grid; gap: .5rem;
}
.wave__exam__inc li {
  display: flex; gap: .6rem; align-items: flex-start;
  font-size: var(--fs-caption); color: var(--ink-800); line-height: 1.45;
}
.wave__exam__inc svg { width: .7rem; height: .7rem; flex: none; margin-top: .35rem; fill: var(--roark-pink); }

.wave__formtitle { font-size: var(--fs-h5); margin: 0 0 .4rem; }
.wave__lede { margin: 0 0 var(--sp-5); font-size: var(--fs-caption); color: var(--ink-700); }

/* the host column is narrow on the book page — stack the paired fields */
.wave__fallback .form__row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
.wave__fallback .form { gap: var(--sp-4); display: grid; }
.wave__fallback .form__note { margin-top: .25rem; }

/* ── scheduler confirmation ─────────────────────────────────────────── */
.wave__fallback .done { text-align: center; padding: var(--sp-4) 0; }
.wave__fallback .done__ic {
  width: 3.5rem; height: 3.5rem; border-radius: 50%; margin: 0 auto var(--sp-4);
  display: flex; align-items: center; justify-content: center;
  background: var(--rose-100); border: 1px solid var(--roark-pink); color: var(--rose-800);
  animation: bk-pop .6s var(--ease-warm);
}
.wave__fallback .done h3 { font-size: var(--fs-h4); margin: 0 0 .6rem; }
.wave__fallback .done > p { font-size: var(--fs-caption); color: var(--ink-700); margin: 0 auto var(--sp-5); max-width: 30rem; }
.wave__fallback .done__rows {
  text-align: left; border: 1px solid var(--clay); border-radius: var(--r-sm);
  background: var(--white); margin-bottom: var(--sp-5); overflow: hidden;
}
.wave__fallback .done__row {
  display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--sp-4);
  padding: .7rem var(--sp-4); border-bottom: 1px solid var(--sand);
  font-size: var(--fs-eyebrow);
}
.wave__fallback .done__row:last-child { border-bottom: 0; }
.wave__fallback .done__row span { color: var(--ink-600); }
.wave__fallback .done__row b { color: var(--navy-600); font-weight: var(--fw-semi); text-align: right; }
@keyframes bk-pop { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.06); } 100% { transform: none; opacity: 1; } }
/* honest notice shown until the vendor snippet is pasted in */
.wave__note {
  margin: 0; padding: var(--sp-4) var(--sp-6);
  background: var(--rose-050); border-top: 1px solid var(--clay);
  font-size: var(--fs-eyebrow); color: var(--ink-700); line-height: 1.55;
}

/* modal host for the sticky mobile CTA */
.wave-modal {
  position: fixed; inset: 0; z-index: 120; display: none;
  align-items: flex-end; justify-content: center;
  background: rgba(0,41,70,.55); backdrop-filter: blur(2px);
}
.wave-modal.is-open { display: flex; }
.wave-modal__panel {
  width: 100%; max-width: 44rem; max-height: 92vh; overflow-y: auto;
  background: var(--paper); border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: var(--shadow-lg); animation: sheet-up var(--dur-slow) var(--ease-warm);
}
@keyframes sheet-up { from { transform: translateY(3rem); opacity: 0; } to { transform: none; opacity: 1; } }
.wave-modal__top {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center;
  justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5); background: var(--navy-800); color: var(--white);
}
.wave-modal__top b { font-family: var(--font-display); font-weight: var(--fw-medium);
                     font-size: var(--fs-h5); }
.wave-modal__top button { background: none; border: 0; color: var(--white);
                          cursor: pointer; padding: .4rem; }
.wave-modal__top svg { width: 1.2rem; height: 1.2rem; fill: currentColor; }
.wave-modal__body { padding: var(--sp-5); }

/* ── 7. STICKY MOBILE CTA ─────────────────────────────────────────────── */
.sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
  display: none; gap: .6rem; align-items: stretch;
  padding: .7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom, 0px));
  background: rgba(255,255,255,.98); border-top: 1px solid var(--clay);
  box-shadow: 0 -6px 24px rgba(0,41,70,.08);
}
.sticky .btn { flex: 1; padding: .95rem 1rem; font-size: var(--fs-eyebrow); }
.sticky__call {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 3.4rem; border: 1px solid var(--clay); border-radius: var(--r-xs);
  background: var(--white); color: var(--navy-600); text-decoration: none;
  transition: var(--tr-all);
}
.sticky__call:hover { border-color: var(--roark-pink); background: var(--rose-100); }
.sticky__call svg { width: 1rem; height: 1rem; fill: currentColor; }

/* inline CTA band reused on silo + landing pages */
.ctaband { display: flex; flex-wrap: wrap; gap: var(--sp-4);
           align-items: center; justify-content: space-between; }

/* ── 8. GEO FOOTER ────────────────────────────────────────────────────── */
.ftr { background: var(--roark-pink); color: var(--white); padding: var(--sp-10) 0 var(--sp-5); }
.ftr a { color: var(--white); text-decoration: none; }
.ftr a:hover { color: var(--rose-200); }
.ftr__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.5fr; gap: var(--sp-8); }
.ftr__logo { display: block; margin-bottom: var(--sp-5); }
.ftr h5 { font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: var(--fw-semi);
          letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--white);
          margin: 0 0 var(--sp-4); opacity: .95; }
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.ftr li { font-size: var(--fs-body-sm); }
.ftr p { font-size: var(--fs-body-sm); color: rgba(255,255,255,.92); margin: 0 0 var(--sp-4); }
.ftr__social { display: flex; gap: .75rem; margin-top: var(--sp-4); }
.ftr__social a { width: 2.4rem; height: 2.4rem; border-radius: 50%;
                 border: 1px solid rgba(255,255,255,.5); display: flex;
                 align-items: center; justify-content: center; transition: var(--tr-all); }
.ftr__social a:hover { background: var(--white); color: var(--rose-800); border-color: var(--white); }
.ftr__social svg { width: 1rem; height: 1rem; fill: currentColor; }

/* NAP block — machine-readable, mirrors the Google Business Profile exactly */
.nap { font-style: normal; display: grid; gap: .35rem; }
.nap b { font-family: var(--font-display); font-weight: var(--fw-medium);
         font-size: var(--fs-body-sm); }
.nap address { font-style: normal; }

/* click-to-load map facade: zero third-party JS/bytes until intent */
.mapfacade {
  position: relative; width: 100%; aspect-ratio: 16 / 10; border: 0;
  border-radius: var(--r-md); overflow: hidden; background: var(--cream);
  background-image: repeating-linear-gradient(135deg,
    rgba(199,164,161,.22) 0 10px, rgba(199,164,161,0) 10px 20px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .6rem; text-align: center; padding: var(--sp-5); cursor: pointer;
  color: var(--navy-600); font-family: var(--font-body); transition: var(--tr-all);
}
.mapfacade:hover { border-color: var(--roark-pink); background-color: var(--rose-050); }
.mapfacade svg { width: 1.9rem; height: 1.9rem; fill: var(--roark-pink); }
.mapfacade b { font-family: var(--font-display); font-size: var(--fs-h5); font-weight: var(--fw-medium); }
.mapfacade span { font-size: var(--fs-eyebrow); color: var(--ink-700); max-width: 26ch; line-height: 1.5; }
.mapfacade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* service proximity block — hyper-local internal linking */
.prox { margin-top: var(--sp-8); padding-top: var(--sp-6);
        border-top: 1px solid rgba(255,255,255,.3); }
.prox h5 { margin-bottom: var(--sp-3); }
.prox__cities { display: flex; flex-wrap: wrap; gap: .45rem .9rem; margin-bottom: var(--sp-5); }
.prox__cities a {
  font-size: var(--fs-caption); border-bottom: 1px solid rgba(255,255,255,.4);
  padding-bottom: 1px;
}
.prox__cities a:hover { border-bottom-color: var(--white); }
.prox p { max-width: 62rem; }
.ftr__base {
  margin-top: var(--sp-7); padding-top: var(--sp-5);
  border-top: 1px solid rgba(255,255,255,.3);
  display: flex; justify-content: space-between; gap: var(--sp-5); flex-wrap: wrap;
  font-size: var(--fs-caption); color: rgba(255,255,255,.88);
}

/* ── 9. PPC LANDING PAGE SHELL ────────────────────────────────────────── */
/* No main nav, no social. One job: get the visitor into the scheduler. */
.lphdr {
  background: var(--white); border-bottom: 1px solid var(--clay);
  padding: var(--sp-4) 0;
}
.lphdr__in { display: flex; align-items: center; justify-content: space-between;
             gap: var(--sp-4); flex-wrap: wrap; }
.lphdr__tell { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; }
.lphdr__tell a { font-size: var(--fs-body-sm); font-weight: var(--fw-semi);
                 color: var(--navy-600); text-decoration: none;
                 display: inline-flex; align-items: center; gap: .5rem; }
.lphdr__tell svg { width: .9rem; height: .9rem; fill: var(--roark-pink); }
.lphdr__hrs { font-size: var(--fs-eyebrow); color: var(--ink-600); letter-spacing: .04em; }

.lp { padding-top: 0; }
.lp__hero { background: var(--navy-800); color: var(--white); padding: var(--sp-10) 0; }
.lp__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: var(--sp-9); align-items: start; }
.lp h1 { font-family: var(--font-display); font-weight: var(--fw-normal);
         font-size: var(--fs-h1); line-height: var(--lh-display);
         color: var(--white); margin: 0 0 var(--sp-4); text-wrap: balance; }
.lp__sub { font-size: var(--fs-lead); color: rgba(255,255,255,.9); margin: 0 0 var(--sp-6); }
.lp__promise { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); margin-bottom: var(--sp-6); }
.lp__promise span { display: inline-flex; align-items: center; gap: .55rem;
                    font-size: var(--fs-body-sm); color: rgba(255,255,255,.92); }
.lp__promise svg { width: .8rem; height: .8rem; fill: var(--rose-400); flex: none; }
.lp__trust { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5);
             padding-top: var(--sp-5); border-top: 1px solid rgba(255,255,255,.25);
             font-size: var(--fs-caption); color: rgba(255,255,255,.82); }
.lp__card { background: var(--paper); border-radius: var(--r-md);
            box-shadow: var(--shadow-lg); overflow: hidden; }
.lp__cardhd { padding: var(--sp-5) var(--sp-6); border-bottom: 1px solid var(--clay);
              background: var(--white); }
.lp__cardhd h2 { font-family: var(--font-display); font-size: var(--fs-h4);
                 font-weight: var(--fw-medium); color: var(--navy-600); margin: 0 0 .35rem; }
.lp__cardhd p { font-size: var(--fs-caption); color: var(--ink-700); margin: 0; }

.lp__truststrip { background: var(--cream); border-top: 1px solid var(--clay);
                  border-bottom: 1px solid var(--clay); padding: var(--sp-6) 0; }
.lp__trustgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.lp__trustgrid h3 { font-family: var(--font-display); font-size: var(--fs-h5);
                    font-weight: var(--fw-medium); color: var(--navy-600);
                    margin: 0 0 .4rem; }
.lp__trustgrid p { font-size: var(--fs-caption); margin: 0; }
.lp__trustic { width: 2.4rem; height: 2.4rem; border-radius: 50%;
               background: var(--rose-100); color: var(--rose-800);
               display: flex; align-items: center; justify-content: center;
               margin-bottom: var(--sp-3); }
.lp__trustic svg { width: .95rem; height: .95rem; fill: currentColor; }

/* the dynamic copy slots — visible only with ?edit=1 */
.editbar {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 200;
  background: var(--navy-800); color: var(--white); border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5); box-shadow: var(--shadow-lg);
  font-size: var(--fs-eyebrow); max-width: 24rem; display: none;
}
.editbar.is-on { display: block; }
.editbar b { display: block; font-family: var(--font-display); font-size: var(--fs-h5);
             font-weight: var(--fw-medium); margin-bottom: .4rem; }
.editbar code { font-family: ui-monospace, Menlo, monospace; color: var(--rose-300); }
[data-copy].is-editing { outline: 2px dashed var(--roark-pink); outline-offset: 3px; }
slotmark { display: none; }

/* ── 10. BLOG ─────────────────────────────────────────────────────────── */
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-7); }
.post {
  display: flex; flex-direction: column; background: var(--white);
  border: 1px solid var(--clay); border-radius: var(--r-md); overflow: hidden;
  text-decoration: none; transition: border-color var(--dur-slow) var(--ease),
  box-shadow var(--dur-slow) var(--ease);
}
.post:hover { border-color: var(--roark-pink); box-shadow: var(--shadow-md); }
.post__img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--sand); }
.post__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-warm); }
.post:hover .post__img img { transform: scale(1.06); }
.post__body { padding: var(--sp-6); display: flex; flex-direction: column; flex: 1; }
.post__meta { font-size: var(--fs-eyebrow); letter-spacing: .1em; text-transform: uppercase;
              color: var(--rose-800); font-weight: var(--fw-semi); margin-bottom: .7rem; }
.post__body h3 { font-family: var(--font-display); font-size: var(--fs-h4);
                 font-weight: var(--fw-medium); color: var(--navy-600);
                 margin: 0 0 var(--sp-3); line-height: var(--lh-heading); }
.post__body p { font-size: var(--fs-body-sm); margin: 0 0 var(--sp-5); flex: 1; }
.post__more { display: inline-flex; align-items: center; gap: .6rem;
              font-size: var(--fs-eyebrow); font-weight: var(--fw-semi);
              letter-spacing: .12em; text-transform: uppercase; color: var(--navy-600); }
.post__more svg { width: .7rem; height: .7rem; fill: currentColor; }

.article { max-width: var(--w-text); margin: 0 auto; }
.article > p, .article > ul, .article > ol, .article > blockquote { font-size: var(--fs-body); }
.article h2 { font-family: var(--font-display); font-size: var(--fs-h3);
              font-weight: var(--fw-medium); color: var(--navy-600);
              margin: var(--sp-9) 0 var(--sp-4); line-height: var(--lh-heading); }
.article h3 { font-family: var(--font-display); font-size: var(--fs-h4);
              font-weight: var(--fw-medium); color: var(--navy-600);
              margin: var(--sp-7) 0 var(--sp-3); }
.article ul, .article ol { padding-left: 1.4rem; color: var(--ink-700); }
.article li { margin-bottom: .5rem; }
.article figure { margin: var(--sp-8) 0; }
.article figure img { width: 100%; border-radius: var(--r-xs); }
.article figcaption { font-size: var(--fs-caption); color: var(--ink-600);
                      margin-top: var(--sp-3); }
/* Data tables need their own contained scroller. Note this is DIFFERENT from
   page-level horizontal scroll: the overflow stays inside the table box, so the
   page never scrolls sideways and nothing outside the table is clipped. */
.tw { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tw .article, .tw table { margin: 0; }
.article table { width: 100%; border-collapse: collapse; margin: var(--sp-7) 0;
                 font-size: var(--fs-body-sm); }
.article th, .article td { text-align: left; padding: var(--sp-4);
                           border-bottom: 1px solid var(--clay); }
.article th { font-family: var(--font-body); font-weight: var(--fw-semi);
              color: var(--navy-600); background: var(--cream);
              font-size: var(--fs-caption); letter-spacing: .04em;
              text-transform: uppercase; }
.article td b { color: var(--navy-600); }
.callout {
  background: var(--rose-050); border-left: 3px solid var(--roark-pink);
  padding: var(--sp-5) var(--sp-6); margin: var(--sp-7) 0; border-radius: var(--r-xs);
}
.callout p { margin: 0; font-size: var(--fs-body-sm); }
.callout b { color: var(--navy-600); }

.toc { background: var(--cream); border: 1px solid var(--clay);
       border-radius: var(--r-md); padding: var(--sp-6); margin: var(--sp-8) 0; }
.toc h2 { font-family: var(--font-body); font-size: var(--fs-eyebrow);
          font-weight: var(--fw-semi); letter-spacing: var(--ls-label);
          text-transform: uppercase; color: var(--navy-600); margin: 0 0 var(--sp-4); }
.toc ol { margin: 0; padding-left: 1.3rem; display: grid; gap: .55rem; }
.toc a { font-size: var(--fs-body-sm); color: var(--navy-600); }
.toc a:hover { color: var(--rose-800); }

/* ── 11. GALLERY / BEFORE-AFTER ──────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-7); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-10); align-items: center; }
.split--media-left { grid-template-columns: 1fr 1.1fr; }
.split--media-left .split__media { order: -1; }
.split__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-xs); }
.frame-rose { position: relative; }
.frame-rose::before { content: ""; position: absolute; inset: -14px 14px 14px -14px;
                      border: 2px solid var(--roark-pink); border-radius: var(--r-xs);
                      pointer-events: none; z-index: 0; }
.frame-rose img { position: relative; z-index: 1; }

.card { background: var(--white); border: 1px solid var(--clay);
        border-radius: var(--r-md); overflow: hidden; display: flex;
        flex-direction: column; transition: border-color var(--dur-slow) var(--ease),
        box-shadow var(--dur-slow) var(--ease); }
.card:hover { border-color: var(--roark-pink); box-shadow: var(--shadow-md); }
.card__img { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: var(--sand); }
.card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-warm); }
.card:hover .card__img img { transform: scale(1.06); }
.card__body { padding: var(--sp-6); display: flex; flex-direction: column; flex: 1; }
.card__body h3 { font-family: var(--font-display); font-size: var(--fs-h3);
                 font-weight: var(--fw-medium); color: var(--navy-600);
                 margin: 0 0 var(--sp-3); line-height: var(--lh-heading); }
.card__body p { font-size: var(--fs-body-sm); margin: 0 0 var(--sp-5); flex: 1; }
.card--accent { border-top: 3px solid var(--roark-pink); }

.mas { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.mas figure { margin: 0; overflow: hidden; background: var(--sand); aspect-ratio: 4 / 3; }
.mas figure.tall { grid-row: span 2; aspect-ratio: 3 / 4.05; }
.mas img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-warm); }
.mas figure:hover img { transform: scale(1.07); }
.mas figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: var(--sp-5);
  background: linear-gradient(0deg, rgba(0,41,70,.82), transparent);
  color: var(--white); font-size: var(--fs-caption);
}
.mas figure { position: relative; }

/* before/after slider — drag/keyboard, built on two stacked images */
.ba {
  position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: var(--r-xs); background: var(--sand); user-select: none;
  touch-action: pan-y;
}
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba__after { clip-path: inset(0 0 0 var(--split, 50%)); }
.ba__handle {
  position: absolute; top: 0; bottom: 0; left: var(--split, 50%); width: 2px;
  background: var(--white); z-index: 3; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(0,41,70,.25);
}
.ba__knob {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--white);
  color: var(--navy-600); display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
}
.ba__knob svg { width: .9rem; height: .9rem; fill: currentColor; }
.ba__lbl {
  position: absolute; bottom: var(--sp-4); z-index: 3;
  font-size: var(--fs-eyebrow); font-weight: var(--fw-semi); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--white); background: rgba(0,41,70,.82);
  padding: .35rem .75rem; border-radius: var(--r-xs);
}
.ba__lbl--l { left: var(--sp-4); }
.ba__lbl--r { right: var(--sp-4); }
.ba__range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0;
             cursor: ew-resize; margin: 0; z-index: 4; }

/* striped placeholder — the system's honest stand-in, never a hand-drawn image */
.ph {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .5rem; text-align: center; padding: var(--sp-5); color: var(--ink-600);
  background-color: var(--cream);
  background-image: repeating-linear-gradient(135deg,
    rgba(199,164,161,.22) 0 10px, rgba(199,164,161,0) 10px 20px);
  border: 1px solid var(--clay); border-radius: var(--r-xs); width: 100%; height: 100%;
}
.ph b { font-family: var(--font-display); font-size: var(--fs-h5);
        font-weight: var(--fw-medium); color: var(--navy-600); }
.ph span { font-family: ui-monospace, Menlo, monospace; font-size: var(--fs-caption);
           max-width: 28ch; line-height: 1.55; }

/* FAQ */
.faq { display: grid; gap: var(--sp-3); }
.faq details {
  background: var(--white); border: 1px solid var(--clay);
  border-radius: var(--r-md); overflow: hidden;
}
.faq summary {
  list-style: none; cursor: pointer; padding: var(--sp-5) var(--sp-6);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  font-family: var(--font-display); font-size: var(--fs-h5); font-weight: var(--fw-medium);
  color: var(--navy-600); transition: border-color var(--dur-slow) var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--rose-800); }
.faq summary svg { width: .85rem; height: .85rem; fill: var(--roark-pink);
                   flex: none; transition: transform var(--dur) var(--ease); }
.faq details[open] summary svg { transform: rotate(180deg); }
.faq__a { padding: 0 var(--sp-6) var(--sp-6); font-size: var(--fs-body-sm);
          color: var(--ink-700); }
.faq__a p:last-child { margin-bottom: 0; }

/* credentials / hours (reused) */
.creds { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
.cred { background: var(--white); border: 1px solid var(--clay);
        padding: var(--sp-5) var(--sp-4); text-align: center; }
.cred b { display: block; font-family: var(--font-display); font-size: var(--fs-h4);
          font-weight: var(--fw-display); color: var(--navy-600);
          line-height: 1.2; margin-bottom: .25rem; }
.cred span { font-size: var(--fs-caption); letter-spacing: .08em;
             text-transform: uppercase; color: var(--ink-600); }
.hours { list-style: none; margin: 0; padding: 0; }
.hours li { display: flex; justify-content: space-between; gap: var(--sp-4);
            padding: .55rem 0; border-bottom: 1px solid var(--sand);
            font-size: var(--fs-body-sm); color: var(--ink-700); }
.hours li:last-child { border-bottom: 0; }
.hours li b { color: var(--navy-600); font-weight: var(--fw-semi); }
.hours li.closed { color: var(--ink-500); }

/* form */
.form { display: grid; gap: var(--sp-5); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.field { display: flex; flex-direction: column; gap: .5rem; }
.field label { font-size: var(--fs-caption); font-weight: var(--fw-semi);
               color: var(--navy-600); letter-spacing: .02em; }
.field input, .field select, .field textarea {
  font-family: var(--font-body); font-size: var(--fs-body-sm); color: var(--navy-600);
  background: transparent; border: var(--b-field); border-radius: var(--r-md);
  padding: .8rem 1rem; width: 100%; transition: box-shadow var(--dur) var(--ease);
}
.field textarea { resize: vertical; min-height: 6rem; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-500); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; box-shadow: var(--shadow-inset-flat); }
.field__hint { font-size: var(--fs-eyebrow); color: var(--ink-600); }
.field--err input, .field--err textarea { border-color: var(--c-error); }
.field--err .field__hint { color: var(--c-error); }
.form__note { font-size: var(--fs-eyebrow); color: var(--ink-600); line-height: 1.5; }
.consent { display: flex; gap: .7rem; align-items: flex-start;
           font-size: var(--fs-eyebrow); color: var(--ink-700); line-height: 1.5; }
.consent input { width: 1.1rem; height: 1.1rem; flex: none; margin-top: .15rem;
                 accent-color: var(--navy-600); }

/* ── 12. UTILITIES ────────────────────────────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.reveal { opacity: 0; transform: translateY(18px); }
.reveal.is-in { opacity: 1; transform: none;
                transition: opacity .7s var(--ease-warm), transform .7s var(--ease-warm); }
.skip {
  position: absolute; left: 50%; top: -4rem; transform: translateX(-50%); z-index: 200;
  background: var(--navy-600); color: var(--white); padding: .8rem 1.4rem;
  border-radius: 0 0 var(--r-md) var(--r-md); font-size: var(--fs-caption);
  text-decoration: none; transition: top var(--dur) var(--ease);
}
.skip:focus { top: 0; }

/* ── KEYBOARD FOCUS ─────────────────────────────────────────────────────
   :focus-visible only, so a mouse click never draws a ring. The rose accent
   is too low-contrast on paper for a 2px ring, so the ring is navy with a
   rose halo — visible on paper, cream, navy and rose grounds alike. */
:focus-visible {
  outline: 2px solid var(--navy-600);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
.on-navy :focus-visible, .on-rose :focus-visible, .ftr :focus-visible,
.hdr :focus-visible, .mnav :focus-visible, .hero :focus-visible {
  outline-color: var(--white);
  box-shadow: 0 0 0 4px rgba(199,164,161,.65);
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--navy-600); outline-offset: 1px;
}
.speednote { font-family: ui-monospace, Menlo, monospace; font-size: var(--fs-eyebrow);
             color: var(--ink-600); }
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ── 13. RESPONSIVE ───────────────────────────────────────────────────── */
@media (max-width: 1320px) { .nav { gap: var(--sp-5); } }
@media (max-width: 1180px) { .nav { gap: var(--sp-4); } .nav a { font-size: var(--fs-eyebrow); } }
@media (max-width: 1080px) {
  .ftr__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-7); }
  .grid-4, .creds { grid-template-columns: repeat(2, 1fr); }
  .posts { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1000px) {
  .nav, .hdr__cta { display: none; }
  .burger { display: block; }
  .split, .split--media-left { grid-template-columns: 1fr; gap: var(--sp-7); }
  .split--media-left .split__media { order: 0; }
  .grid-2 { grid-template-columns: 1fr; }
  .mas { grid-template-columns: repeat(2, 1fr); }
  .mas figure.tall { grid-row: auto; aspect-ratio: 4 / 3; }
  .path { grid-template-columns: 1fr; gap: var(--sp-6); }
  .lp__grid { grid-template-columns: 1fr; gap: var(--sp-7); }
  .lp__trustgrid { grid-template-columns: 1fr; gap: var(--sp-5); }
  .hdr__top-in { gap: var(--sp-4); font-size: var(--fs-eyebrow); }
}
/* the sticky CTA appears exactly where the header nav disappears */
@media (max-width: 1000px) {
  .sticky { display: flex; }
  body { --sticky-cta-h: 5rem; }
}
@media (max-width: 768px) {
  .posts { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .sec { padding: var(--sp-9) 0; }
  .sec-lg { padding: var(--sp-10) 0; }
  .hero { min-height: 34rem; padding-top: calc(var(--header-h) + var(--sp-8)); }
  .pbanner { min-height: 22rem; }
  .hero h1, .pbanner h1 { font-size: var(--fs-h1); }
  .ftr__grid { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
  .creds { grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
  .hdr__top { display: none; }
  .path__body { padding: var(--sp-6); }
  .lp__hero { padding: var(--sp-8) 0; }
  .wave-modal__panel { max-height: 94vh; }
  /* Buttons must never push past the viewport edge. A long label on a 320px
     screen would otherwise sit outside the page and get clipped. */
  .btn { padding: .85rem 1.3rem; }
  .btn--lg { padding: .95rem 1.6rem; }
  .sticky .btn { padding: .95rem .8rem; font-size: var(--fs-eyebrow); }
  .article table { font-size: var(--fs-caption); }
  .article th, .article td { padding: var(--sp-3); }
}
@media (max-width: 360px) {
  .btn { font-size: var(--fs-eyebrow); padding: .8rem 1rem; letter-spacing: .06em; }
  .sticky .btn { padding: .9rem .6rem; }
  .sticky__call { width: 3rem; }
}
@media (max-width: 420px) {
  .logo-link .logo-img { width: 8.5rem !important; }
  .lphdr__hrs { display: none; }
}

/* ============================================================================
   PROJECT ADDITIONS — not in the handoff's stylesheet
   ========================================================================= */

/* The handoff toggles states with the `hidden` attribute, but several of those
   elements also carry an author `display` rule (.form is display:grid,
   .bk-shell is display:grid). Author declarations outrank the UA sheet's
   [hidden] rule regardless of specificity, so without this the form never
   hides behind its success state. This makes `hidden` authoritative. */
[hidden] { display: none !important; }

/* Form success/confirm blocks need a sensible left-aligned default in the
   booking flow, where they are not inside .wave__fallback. */
.bk-done .done, .wave__fallback .done { text-align: center; }

/* Inline field errors inside the booking flow reuse the site's .field styles. */
.field .field__hint { display: block; }

/* Form-level failure (as opposed to a per-field validation error). Used when
   the enquiry could not be stored, so the visitor is told to phone instead of
   being shown a false confirmation. */
.form__alert {
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--c-error);
  border-left-width: 3px;
  border-radius: var(--r-sm);
  background: var(--rose-050);
  color: var(--c-error);
  font-size: var(--fs-eyebrow);
  line-height: 1.5;
}
.form__alert a { color: inherit; font-weight: var(--fw-semi); }

/* ── FOUNDER BAND: credential cards ──────────────────────────────────────
   The handoff's founder band emits `.stat-row` / `.stat`, which the design
   never styles — no rule for either exists in site.css, so the prototype fell
   back to plain inline text. They are rebuilt here as bordered cards, which
   makes the responsive behaviour ours to define.

   Three cards across a ~440px column leave ~126px of text each, but
   "BOARD CERTIFIED" set at 15px/0.08em needs ~162px — so a 3-up row can never
   hold these labels on a phone. These rules belong in the stylesheet (they
   were previously an inline style on the element, which outranks any media
   query and so pinned the row to 3 columns at problem sizes). */
.creds--founder {
  margin-top: var(--sp-5);
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}
.creds--founder .cred {
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--sp-5) var(--sp-3);
}

@media (max-width: 640px) {
  /* Two readable columns; the third card spans the row so the grid never
     leaves an orphaned half-width card. */
  .creds--founder { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
  .creds--founder .cred { padding: var(--sp-4) var(--sp-3); }
  .creds--founder .cred:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .creds--founder .cred b { font-size: var(--fs-h5); }
  .creds--founder .cred span { font-size: var(--fs-eyebrow); letter-spacing: .06em; }
}
@media (max-width: 430px) {
  /* Below ~430px two columns squeeze "OPENED ON MAIN ST" (159px at the
     caption size) into 145px of text box, so the row collapses to one card per
     line — set as a compact row (value left, label right) rather than three
     tall centred blocks, which would push the photo far down the page. */
  .creds--founder { grid-template-columns: 1fr; }
  .creds--founder .cred:last-child:nth-child(odd) { grid-column: auto; }
  .creds--founder .cred {
    flex-direction: row; align-items: baseline; justify-content: space-between;
    gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); text-align: left;
  }
  .creds--founder .cred b { margin-bottom: 0; }
  .creds--founder .cred span { white-space: nowrap; }
}

/* ── FIXED HEADER: opaque, and no ghosting ───────────────────────────────
   .97 white let the section underneath read through the bar, which is what
   made body copy appear to bleed behind the mark. Solid, and it fades in on
   the fast curve instead of the 500ms one. */
.hdr--solid .hdr__bar {
  background: var(--white);
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.hdr--solid { box-shadow: 0 1px 0 rgba(0, 41, 70, .06); }

@media (max-width: 1000px) {
  /* Below the nav breakpoint the bar carries only a mark and a burger, so it
     is always solid. That removes the scroll listener from the equation
     entirely: the transparent-until-you-scroll state (which is only worth it
     over the hero photograph) can no longer leave section text showing behind
     the bar. Desktop keeps the transparent-over-hero behaviour. */
  .hdr .hdr__bar { background: var(--white); border-bottom-color: var(--clay); }
  .hdr, .hdr--solid { box-shadow: 0 1px 0 rgba(0, 41, 70, .06); }
  .hdr .burger { color: var(--navy-600); }
  .hdr .logo-link .logo-img:first-child { opacity: 0; }
  .hdr .logo-link .logo-img:last-child  { opacity: 1; }

  /* The 8rem bar exists to clear a full desktop nav plus the Book Now button.
     Those are hidden here, so shrink the bar — and because .hero and .pbanner
     pad off --header-h, they follow automatically instead of leaving a dead
     gap under the fixed header. */
  :root { --header-h: 6rem; --header-h-scrolled: 5rem; }
}
@media (max-width: 640px) {
  :root { --header-h: 5rem; --header-h-scrolled: 5rem; }
  .hdr__top-in { padding: .55rem 0; }
}

/* ── ANCHOR OFFSET ───────────────────────────────────────────────────────
   The header is fixed, so following #about (or a footer deep link) parked the
   eyebrow and the h2 underneath the bar. Reserve the bar's height instead. */
:root { --hdr-anchor: 6rem; }
@media (max-width: 1000px) { :root { --hdr-anchor: 5rem; } }
[id] { scroll-margin-top: calc(var(--hdr-anchor) + var(--sp-4)); }

/* ── INLINE CODE IN PROSE ────────────────────────────────────────────────
   Used by the privacy policy to name storage keys (roark-booking-v1 and
   friends). Those names are literal identifiers, so they must not be
   re-flowed or confused with prose — hence a monospace face at a size that
   still sits on the Lora baseline. Colour is deliberately the body ink, not
   an accent: this is a reference, not a link. */
.article code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .875em;
  color: var(--navy-600);
  background: var(--cream);
  border: 1px solid var(--clay);
  border-radius: 3px;
  padding: .1em .35em;
  white-space: nowrap;
}
/* A whole address (roarkortho.com/?consent=1) is 25 monospace characters —
   fine at 360px, tight at 320px. Let it break there rather than push the
   paragraph wider than the screen. */
@media (max-width: 430px) {
  .article code { white-space: normal; overflow-wrap: anywhere; }
}