/* ---------- Design tokens (LOCKED) ---------- */
    :root {
      /* Color */
      --c-ivory: #F6F6F7;
      --c-pearl: #F1F3F3;
      --c-mint:  #D9E9E7;
      --c-stone: #E6ECEC;
      --c-seafoam: #BFE3E0;
      --c-ink: #1A292E;
      --c-slate: #5E6063;
      --c-deep: #0F4F57;
      --c-sea: #2D7F83;
      --c-aqua: #7FC0C4;
      --c-gold: #D8B77C;
      --c-blush: #F3E6E0;
      --c-lavender: #D0D6EA;
      --c-error: #A8423A;
      --c-white: #FFFFFF;
      --c-sea-hover: #276F74;
      --c-deep-2: #103E45;

      /* Sea Teal, darkened just enough for small text on light surfaces.
         --c-sea itself measures 4.34:1 on Ivory and 3.75:1 on Mint, so
         eyebrows and other 11-13px labels set in it miss WCAG AA (4.5:1).
         This variant clears 4.5:1 on Ivory, Pearl, Stone, Mint and white
         while staying visually the same teal. Use it for small text;
         keep --c-sea for fills, rules and larger type. */
      --c-sea-text: #247176;

      /* Soft Gold, darkened for use on light surfaces. --c-gold is 1.91:1 on
         white and 1.77:1 on Ivory, so gold glyphs (the Google rating stars)
         were effectively invisible. This clears 4.51:1 on Ivory and 4.87:1
         on white, so it carries small gold TEXT as well as graphics.
         It is for light surfaces only: on Deep Teal it drops to 1.89:1.
         Keep --c-gold for gold on Deep Teal, where that measures 4.83:1. */
      --c-gold-text: #8F6B2F;

      /* Type */
      --font-display: "Playfair Display", Georgia, serif;
      --font-sans: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;

      /* Spacing scale (8pt) */
      --s-4: 4px;  --s-8: 8px;   --s-12: 12px; --s-16: 16px;
      --s-24: 24px; --s-32: 32px; --s-48: 48px; --s-64: 64px;
      --s-96: 96px; --s-128: 128px; --s-160: 160px;

      /* Motion */
      --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
      --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
      --d-press: 160ms;
      --d-hover: 220ms;
      --d-enter: 280ms;
      --d-hero: 400ms;

      /* Layout */
      --maxw: 1280px;
      --maxw-narrow: 1200px;
      --maxw-cta: 1000px;
    }

    *, *::before, *::after { box-sizing: border-box; }
    /* Sticky header is 44px (top row) + 144px (logo row) tall, so anchor
       targets need that much clearance or they land underneath it. */
    html { scroll-behavior: smooth; scroll-padding-top: 200px; }
    @media (max-width: 1023px) { html { scroll-padding-top: 104px; } }
    body {
      margin: 0;
      background: var(--c-ivory);
      color: var(--c-ink);
      font-family: var(--font-sans);
      font-size: 17px;
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }
    ::selection { background: var(--c-seafoam); color: var(--c-deep); }
    *:focus-visible {
      outline: 3px solid var(--c-deep);
      outline-offset: 3px;
      border-radius: 2px;
    }
    /* Deep Teal surfaces: the default ring is --c-deep on --c-deep, which
       measures 1.00:1 — invisible. Flip it to Ivory (8.54:1) on every
       deep-teal region so keyboard focus stays visible. */
    .footer *:focus-visible,
    .hm-bank *:focus-visible,
    .gc-final *:focus-visible,
    .gc-hero *:focus-visible,
    .pay-consult *:focus-visible,
    .pay-hero *:focus-visible,
    .pr-consult *:focus-visible,
    .pr-section--deep *:focus-visible,
    .shop-hero *:focus-visible,
    .nl-bottom *:focus-visible,
    .au-quote *:focus-visible,
    .closer *:focus-visible {
      outline-color: var(--c-ivory);
    }
    img { max-width: 100%; display: block; }
    a { color: inherit; }

    /* Hover styling on touch devices is handled by gating every
       hover rule behind @media (hover:hover) and (pointer:fine).
       (A previous a:hover{background:inherit} reset here stripped
       the fill off tapped primary buttons — removed.) */

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
      .reveal { opacity: 1 !important; transform: none !important; }
    }

    /* ---------- Skip link ---------- */
    .skip-link {
      position: absolute; left: 8px; top: 8px;
      background: var(--c-deep); color: var(--c-ivory);
      padding: 10px 16px; border-radius: 6px;
      font-family: var(--font-sans); font-weight: 600; font-size: 14px;
      transform: translateY(-200%);
      transition: transform 200ms var(--ease-out);
      z-index: 2000;
      text-decoration: none;
    }
    .skip-link:focus-visible { transform: translateY(0); }

    /* ---------- Reveal animation ---------- */
    .reveal {
      opacity: 0;
      transform: translateY(12px);
      transition:
        opacity var(--d-enter) var(--ease-out),
        transform var(--d-enter) var(--ease-out);
      will-change: opacity, transform;
    }
    .reveal.in { opacity: 1; transform: none; }

    /* ---------- Type helpers ---------- */
    .display { font-family: var(--font-display); font-weight: 400; font-size: 64px; line-height: 1.05; letter-spacing: -0.01em; color: var(--c-deep); margin: 0; }
    .h1 { font-family: var(--font-display); font-weight: 400; font-size: 56px; line-height: 1.1; letter-spacing: -0.005em; color: var(--c-deep); margin: 0; }
    .h2 { font-family: var(--font-display); font-weight: 400; font-size: 40px; line-height: 1.15; color: var(--c-deep); margin: 0; }
    .h3 { font-family: var(--font-sans); font-weight: 600; font-size: 24px; line-height: 1.25; color: var(--c-ink); margin: 0; }
    .lead { font-size: 20px; line-height: 1.55; color: var(--c-slate); margin: 0; max-width: 60ch; }
    .body { font-size: 17px; line-height: 1.65; color: var(--c-ink); margin: 0; max-width: 68ch; }
    .caption { font-size: 14px; line-height: 1.5; color: var(--c-slate); margin: 0; }

    @media (max-width: 767px) {
      .display { font-size: 42px; }
      .h1 { font-size: 38px; }
      .h2 { font-size: 30px; }
      .h3 { font-size: 20px; line-height: 1.3; }
      .lead { font-size: 18px; }
      .body { font-size: 16px; }
      .caption { font-size: 13px; }
    }

    /* ---------- Eyebrow component (E-7) ---------- */
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      font-family: var(--font-sans);
      font-weight: 600;
      font-size: 13px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--c-sea-text);
      line-height: 1.4;
    }
    .eyebrow::before {
      content: "";
      display: inline-block;
      width: 32px; height: 1px;
      background: var(--c-aqua);
    }
    .eyebrow.no-rule::before { display: none; }
    @media (max-width: 767px) { .eyebrow { font-size: 12px; } }

    /* ---------- Buttons ---------- */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-family: var(--font-sans);
      font-weight: 600;
      font-size: 15px;
      letter-spacing: 0.04em;
      line-height: 1;
      white-space: nowrap;
      padding: 16px 24px;
      border-radius: 6px;
      text-decoration: none;
      border: none;
      cursor: pointer;
      touch-action: manipulation;
      transition: transform var(--d-hover) var(--ease-out),
                  box-shadow var(--d-hover) var(--ease-out),
                  background-color var(--d-hover) var(--ease-out),
                  color var(--d-hover) var(--ease-out);
    }
    /* Disabled/submitting buttons must read as unavailable. This lived only
       in Newsletter's page styles, so every other form's submit button
       looked fully enabled while sending. */
    .btn:disabled {
      opacity: 0.7;
      cursor: progress;
    }
    @media (hover: hover) and (pointer: fine) {
      .btn:disabled:hover { transform: none; box-shadow: none; }
    }
    .btn-primary {
      background: var(--c-deep);
      color: var(--c-ivory);
    }
    @media (hover: hover) and (pointer: fine) {
      .btn-primary:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(15,79,87,0.18);
      }
    }
    .btn-primary:active { transform: scale(0.97); transition-duration: var(--d-press); }
    .btn-secondary {
      background: transparent;
      color: var(--c-deep);
      box-shadow: inset 0 0 0 1.5px var(--c-deep);
    }
    @media (hover: hover) and (pointer: fine) {
      .btn-secondary:hover {
        background: var(--c-deep);
        color: var(--c-ivory);
        transform: translateY(-1px);
        box-shadow: inset 0 0 0 1.5px var(--c-deep), 0 4px 12px rgba(15,79,87,0.18);
      }
    }
    .btn-secondary:active { transform: scale(0.97); transition-duration: var(--d-press); }

    /* Deep Teal surfaces: .btn-secondary paints --c-deep text and a
       --c-deep inset ring on a --c-deep background, which measures
       1.00:1 — the button is invisible. Confirmed on /reviews/
       ("Schedule a Consultation") and /new-patient-guide/ (the phone
       number). Flip to Ivory, which measures 8.54:1. Same surface list
       as the focus-ring override above. */
    .footer .btn-secondary,
    .hm-bank .btn-secondary,
    .gc-final .btn-secondary,
    .gc-hero .btn-secondary,
    .pay-consult .btn-secondary,
    .pay-hero .btn-secondary,
    .pr-consult .btn-secondary,
    .pr-section--deep .btn-secondary,
    .shop-hero .btn-secondary,
    .nl-bottom .btn-secondary,
    .au-quote .btn-secondary,
    .ba-cta .btn-secondary,
    .closer .btn-secondary {
      color: var(--c-ivory);
      box-shadow: inset 0 0 0 1.5px var(--c-ivory);
    }
    @media (hover: hover) and (pointer: fine) {
      .footer .btn-secondary:hover,
      .hm-bank .btn-secondary:hover,
      .gc-final .btn-secondary:hover,
      .gc-hero .btn-secondary:hover,
      .pay-consult .btn-secondary:hover,
      .pay-hero .btn-secondary:hover,
      .pr-consult .btn-secondary:hover,
      .pr-section--deep .btn-secondary:hover,
      .shop-hero .btn-secondary:hover,
      .nl-bottom .btn-secondary:hover,
      .au-quote .btn-secondary:hover,
      .ba-cta .btn-secondary:hover,
      .closer .btn-secondary:hover {
        background: var(--c-ivory);
        color: var(--c-deep);
        box-shadow: inset 0 0 0 1.5px var(--c-ivory), 0 4px 12px rgba(0,0,0,0.18);
      }
    }
    @media (max-width: 767px) {
      .btn { font-size: 14px; padding: 15px 20px; }
    }

    /* Tertiary text link */
    .tlink {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: var(--font-sans);
      font-weight: 500;
      font-size: 16px;
      color: var(--c-ink);
      text-decoration: none;
      position: relative;
      padding-bottom: 2px;
    }
    .tlink .arrow { transition: transform 300ms var(--ease-out); }
    .tlink::after {
      content: "";
      position: absolute;
      left: 0; right: auto; bottom: 0;
      width: 100%;
      height: 1px;
      background: var(--c-deep);
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform 300ms var(--ease-out);
    }
    @media (hover: hover) and (pointer: fine) {
      .tlink:hover::after { transform: scaleX(1); }
      .tlink:hover .arrow { transform: translateX(2px); }
    }

    /* ---------- Section frame ---------- */
    .section { width: 100%; }
    .section-inner {
      max-width: var(--maxw);
      margin: 0 auto;
      padding-left: 80px;
      padding-right: 80px;
    }
    @media (max-width: 1023px) { .section-inner { padding-left: 48px; padding-right: 48px; } }
    @media (max-width: 767px)  { .section-inner { padding-left: 24px; padding-right: 24px; } }
    .breathe { padding-top: 128px; padding-bottom: 96px; }
    .pace    { padding-top: 64px;  padding-bottom: 64px; }
    @media (max-width: 767px) {
      .breathe { padding-top: 96px; padding-bottom: 80px; }
      .pace    { padding-top: 48px; padding-bottom: 48px; }
    }

    /* ---------- Announcement strip ---------- */
    .strip {
      background: var(--c-mint);
      min-height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10px 24px;
      gap: 12px;
      color: var(--c-deep);
      font-weight: 600;
      font-size: 14px;
      flex-wrap: wrap;
      text-align: center;
    }
    .strip .badge {
      width: 24px; height: 24px;
      border-radius: 999px;
      background: var(--c-deep);
      color: var(--c-ivory);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-display);
      font-size: 12px;
      flex-shrink: 0;
    }
    /* Image variant — used when the placeholder ★ bullet is
       replaced with the real COVA Best-of-Williamsburg badge. */
    img.strip-badge {
      display: block;
      width: 26px;
      height: 26px;
      object-fit: contain;
      flex-shrink: 0;
    }
    .strip a {
      color: var(--c-deep);
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 3px;
    }
    @media (max-width: 767px) {
      .strip { min-height: 56px; font-size: 13px; }
    }

    /* ---------- Header ---------- */
    .header {
      position: sticky;
      top: 0;
      z-index: 1000;
      background: var(--c-ivory);
      border-bottom: 1px solid var(--c-stone);
      transition: box-shadow 200ms var(--ease-out);
    }
    .header.elevated { box-shadow: 0 1px 2px rgba(15,79,87,0.04); }
    .header-inner {
      max-width: var(--maxw);
      margin: 0 auto;
      height: 96px;
      padding: 0 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }
    @media (max-width: 767px) { .header-inner { height: 72px; padding: 0 20px; } }

    .logo {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
      color: var(--c-deep);
      font-family: var(--font-display);
      font-size: 22px;
      line-height: 1;
      letter-spacing: -0.005em;
    }
    /* Primary logo asset — script wordmark.
       Artwork is ~2.3:1; height sets scale. */
    .logo img.logo-img {
      display: block;
      height: 64px;
      width: auto;
      max-width: none;
    }
    @media (max-width: 767px) {
      .logo img.logo-img { height: 48px; }
    }
    .logo-mark {
      width: 36px; height: 36px;
      border-radius: 999px;
      background: var(--c-deep);
      color: var(--c-ivory);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-display);
      font-size: 18px;
      letter-spacing: 0;
    }
    .logo-sub {
      display: block;
      font-family: var(--font-sans);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--c-slate);
      margin-top: 2px;
      line-height: 1;
    }

    .nav { display: flex; align-items: center; gap: 24px; }
    .nav-item {
      position: relative;
      font-family: var(--font-sans);
      font-weight: 600;
      font-size: 15px;
      color: var(--c-ink);
      text-decoration: none;
      background: none;
      border: none;
      padding: 8px 0;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
    .nav-item::after {
      content: "";
      position: absolute;
      left: 0; right: auto; bottom: 0;
      height: 1px;
      width: 100%;
      background: var(--c-deep);
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform 200ms var(--ease-out);
    }
    @media (hover: hover) and (pointer: fine) {
      .nav-item:hover { color: var(--c-deep); }
      .nav-item:hover::after { transform: scaleX(1); }
    }
    .nav-item .chev {
      transition: transform 200ms var(--ease-out);
    }
    .nav-item[aria-expanded="true"] .chev { transform: rotate(180deg); }

    /* The underline is a hover affordance only — no standing current-page
       underline. The nav marks the current page for assistive tech via
       aria-current, but that carries no visual weight of its own. */
    @media (hover: hover) and (pointer: fine) {
      .nav .nav-item[aria-current="page"]:not(:hover) { color: var(--c-ink); }
    }

    .dropdown {
      position: absolute;
      top: calc(100% + 12px);
      left: -32px;
      background: var(--c-ivory);
      border: 1px solid var(--c-stone);
      border-radius: 8px;
      padding: 24px;
      box-shadow: 0 8px 24px rgba(15,79,87,0.08);
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 32px;
      row-gap: 4px;
      min-width: 440px;
      opacity: 0;
      transform: translateY(-6px);
      pointer-events: none;
      transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
      z-index: 1100;
    }
    /* Invisible bridge across the 12px gap so hover doesn't break when
       moving between the trigger and the open dropdown. */
    .dropdown::before {
      content: "";
      position: absolute;
      top: -12px;
      left: 0;
      right: 0;
      height: 12px;
    }
    .nav-group { position: relative; }
    .nav-group.open .dropdown,
    .nav-group:hover .dropdown { opacity: 1; transform: none; pointer-events: auto; }
    .dropdown a {
      display: block;
      padding: 10px 12px;
      font-family: var(--font-sans);
      font-weight: 400;
      font-size: 15px;
      color: var(--c-ink);
      text-decoration: none;
      border-radius: 4px;
      /* transform, not padding-left — padding triggers layout on every hover. */
      transition: transform 200ms var(--ease-out), color 200ms var(--ease-out), background 200ms var(--ease-out);
    }
    .dropdown a:hover { color: var(--c-deep); transform: translateX(4px); background: rgba(217,233,231,0.4); }
    /* Inside an open dropdown, hover likewise takes over from the standing
       current-page highlight so the highlight follows the cursor. */
    @media (hover: hover) and (pointer: fine) {
      .dropdown:hover a[aria-current="page"]:not(:hover):not([href="/treatments/"]) {
        color: var(--c-ink) !important;
        font-weight: 400 !important;
      }
      .dropdown:hover a[aria-current="page"]:not(:hover)[href="/treatments/"] {
        color: var(--c-ink) !important;
      }
    }
    .dropdown .live { font-size: 12px; color: var(--c-sea-text); margin-left: 6px; font-weight: 600; letter-spacing: 0.12em; }

    /* ---------- Mega dropdown (Our Treatments) ----------
       Two sections (Aesthetics + Functional) side by side with
       small section titles. Wider than the standard dropdown. */
    .dropdown-mega {
      min-width: 520px;
      column-gap: 40px;
      padding: 22px 28px 24px;
    }
    .dropdown-section {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .dropdown-section-title {
      font-family: var(--font-sans);
      font-weight: 700;
      font-size: 11px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--c-deep);
      margin: 4px 12px 10px;
      padding: 2px 0 8px;
      border-bottom: 1px solid var(--c-stone);
      text-decoration: none;
      display: block;
      transition: color 200ms var(--ease-out), border-color 200ms var(--ease-out);
      cursor: pointer;
    }
    a.dropdown-section-title:hover {
      color: var(--c-sea);
      border-bottom-color: var(--c-sea);
    }
    a.dropdown-section-title:focus-visible {
      outline: 2px solid var(--c-deep);
      outline-offset: 3px;
      border-radius: 2px;
    }
    /* "See all treatments →" closes the Aesthetics column — bolded so it
       reads as the catch-all rather than one more treatment in the list. */
    .dropdown-mega .dropdown-section a[href="/treatments/"] { font-weight: 600; }
    /* Prevent text wrapping in any nav link or dropdown item — keeps
       the header on one line. Long copy will still scroll horizontally
       on the dropdown but never wrap awkwardly. */
    .nav-item, .dropdown a, .dropdown-section a { white-space: nowrap; }

    .hamburger {
      display: none;
      background: none;
      border: none;
      cursor: pointer;
      /* 24px icon + 10px each side = 44x44 touch target. */
      padding: 10px;
      color: var(--c-deep);
    }
    .hamburger svg { display: block; }

    @media (max-width: 1023px) {
      .nav { display: none; }
      .hamburger { display: inline-flex; }
    }

    /* Mobile nav overlay */
    .mobile-nav {
      position: fixed;
      inset: 0;
      background: var(--c-ivory);
      z-index: 1500;
      padding: 80px 32px calc(32px + env(safe-area-inset-bottom));
      display: flex;
      flex-direction: column;
      gap: 12px;
      /* The menu is taller than a phone screen once a submenu is open, and
         body scroll is locked while it's up — without this the lower links
         and the Book a Visit button are unreachable. */
      overflow-y: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
      transform: translateX(100%);
      /* Closed, the panel is only moved off-screen — it stays in the DOM.
         visibility:hidden takes it out of the tab order and the
         accessibility tree so it isn't announced as an open dialog full of
         invisible links. Delaying it by the slide duration keeps the
         close animation intact. */
      visibility: hidden;
      transition: transform 280ms var(--ease-out), visibility 0s linear 280ms;
    }
    .mobile-nav.open {
      transform: none;
      visibility: visible;
      transition: transform 280ms var(--ease-out), visibility 0s linear 0s;
    }
    .mobile-nav a, .mobile-nav button {
      font-family: var(--font-sans);
      font-weight: 600;
      font-size: 22px;
      color: var(--c-ink);
      text-decoration: none;
      text-align: left;
      background: none; border: none; padding: 0;
      cursor: pointer;
      touch-action: manipulation;
      /* 44px minimum tap target — the bare line box was ~27px. */
      min-height: 44px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .mobile-nav .close-x {
      position: absolute; top: 16px; right: 16px;
      width: 44px; height: 44px;
      display: inline-flex; align-items: center; justify-content: center;
      color: var(--c-deep);
    }
    .mobile-nav .submenu {
      padding-left: 16px;
      display: flex; flex-direction: column; gap: 4px;
      font-size: 18px;
      color: var(--c-slate);
      font-weight: 400;
    }
    .mobile-nav .submenu a { font-size: 18px; font-weight: 400; }
    .mobile-nav .mobile-cta {
      margin-top: auto;
    }

    /* ---------- Mobile menu social icons ---------- */
    .mobile-socials {
      display: flex;
      align-items: center;
      gap: 24px;
      padding: 24px 0 4px;
      margin-top: 8px;
      border-top: 1px solid var(--c-stone);
    }
    .mobile-socials a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      padding: 0;
      color: var(--c-deep);
      text-decoration: none;
      font-weight: 400;
    }
    .mobile-socials a svg { width: 26px; height: 26px; display: block; }

    /* ---------- Hero ---------- */
    .hero {
      background: var(--c-ivory);
      padding-top: 96px;
      padding-bottom: 96px;
    }
    /* At 1280x800, the most common laptop viewport, 96px of top padding
       pushed the primary CTA below the fold. 64px brings it back up
       without collapsing the hero's breathing room. */
    @media (min-width: 1024px) {
      .hero { padding-top: 64px; }
    }
    @media (max-width: 767px) {
      .hero { padding-top: 64px; padding-bottom: 56px; }
    }
    .hero-grid {
      position: relative;
      display: grid;
      grid-template-columns: 55fr 45fr;
      gap: 64px;
      align-items: center;
    }
    @media (max-width: 1023px) {
      .hero-grid { grid-template-columns: 1fr; gap: 48px; }
    }
    .hero-left { position: relative; padding-left: 48px; }
    @media (max-width: 767px) { .hero-left { padding-left: 24px; } }
    .hero-rule {
      position: absolute;
      left: 0; top: 4px;
      width: 1px;
      height: 100%;
      max-height: 280px;
      background: var(--c-sea);
      opacity: 0.4;
    }
    .hero-eyebrow { margin-bottom: 24px; }
    .hero-headline { margin-bottom: 32px; }
    .hero-headline br + br { line-height: 1.05; }
    .hero-sub { max-width: 52ch; margin-bottom: 32px; }
    .hero-ctas {
      display: flex;
      align-items: center;
      gap: 24px;
      flex-wrap: wrap;
    }
    /* Vertical stack inside hero-ctas: Book a Visit + Buy a Gift Card.
       The "Explore treatments" TLink remains a sibling and sits beside
       the stack on wide viewports, wrapping below on narrow ones. */
    .hero-ctas-stack {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 12px;
    }
    .hero-ctas-stack .btn { width: 100%; justify-content: center; }
    @media (min-width: 640px) {
      .hero-ctas-stack { align-items: flex-start; }
      .hero-ctas-stack .btn { width: auto; }
    }

    /* ---------- Image placeholder (no real images) ---------- */
    .placeholder {
      background:
        repeating-linear-gradient(135deg,
          rgba(15,79,87,0.045) 0 2px,
          transparent 2px 12px),
        linear-gradient(180deg, var(--c-pearl), #ECEFEF);
      border: 1px solid var(--c-stone);
      color: var(--c-slate);
      display: flex;
      align-items: flex-end;
      justify-content: flex-start;
      padding: 16px;
      font-family: "SFMono-Regular", ui-monospace, Menlo, monospace;
      font-size: 11px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      position: relative;
      overflow: hidden;
    }
    .placeholder::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(191,227,224,0.18), transparent 60%);
      pointer-events: none;
    }
    .placeholder.portrait { aspect-ratio: 4/5; border-radius: 4px; }
    .placeholder.card     { aspect-ratio: 3/2; border-radius: 10px 10px 0 0; }
    .placeholder.hero-img { aspect-ratio: 4/5; border-radius: 0; }
    @media (max-width: 1023px) {
      .placeholder.hero-img { aspect-ratio: 16/9; }
    }

    /* ---------- Hero photo (real image, portrait cutout) ---------- */
    .hero-photo-wrap {
      position: relative;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      overflow: visible;
      /* Pull the photo down past the hero's bottom padding so it
         crops into the next section. Negative margin shifts the
         photo without shrinking the surrounding layout box. */
      margin-bottom: -160px;
    }
    @media (max-width: 1023px) {
      .hero-photo-wrap { margin-bottom: -80px; }
    }
    @media (max-width: 767px) {
      .hero-photo-wrap { margin-bottom: 0; }
    }
    .hero-photo {
      display: block;
      height: clamp(640px, 88vh, 880px);
      width: auto;
      max-width: 100%;
      object-fit: contain;
      object-position: bottom center;
    }
    @media (max-width: 1023px) {
      .hero-photo { height: auto; width: 80%; max-width: 480px; }
    }
    @media (max-width: 767px) {
      .hero-photo { width: 100%; }
    }

    /* ---------- Google 5-star trust badge over hero photo ---------- */
    .google-badge {
      position: absolute;
      left: 53px;
      top: auto;
      bottom: 134px; /* anchored to the photo bottom so it stays on
                        the portrait at every clamp() height — the old
                        top:746px fell off the photo on short laptops */
      z-index: 2;
      display: inline-flex;
      align-items: center;
      gap: 12px;
      background: var(--c-white);
      border: 1px solid rgba(15, 79, 87, 0.10);
      border-radius: 999px;
      padding: 10px 18px 10px 14px;
      box-shadow: 0 12px 30px rgba(12, 42, 46, 0.16);
    }
    .google-g { display: inline-flex; flex: none; }
    .google-badge-text { display: flex; flex-direction: column; line-height: 1.1; }
    .google-badge-stars { display: inline-flex; gap: 1px; color: var(--c-gold-text); }
    .google-badge-stars svg { width: 15px; height: 15px; }
    .google-badge-sub {
      font-family: var(--font-sans);
      font-size: 12px;
      color: var(--c-slate);
      margin-top: 3px;
      letter-spacing: 0.01em;
    }
    .google-badge-sub strong { color: var(--c-deep); font-weight: 700; }
    @media (max-width: 1023px) {
      .google-badge { top: auto; bottom: 40px; left: 16px; }
    }
    @media (max-width: 767px) {
      .google-badge { top: auto; bottom: 16px; left: 12px; padding: 8px 14px 8px 12px; }
      .google-badge-stars svg { width: 13px; height: 13px; }
    }

    /* ---------- Trust band ---------- */
    .trust {
      background: var(--c-pearl);
    }
    .trust-grid {
      max-width: var(--maxw-narrow);
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 48px;
      position: relative;
    }
    .trust-cell { text-align: left; }
    .trust-cell .eyebrow { margin-bottom: 12px; }
    .trust-cell p {
      font-size: 16px;
      line-height: 1.5;
      color: var(--c-ink);
      margin: 0;
    }
    .trust-grid > .trust-cell + .trust-cell {
      position: relative;
    }
    .trust-grid > .trust-cell + .trust-cell::before {
      content: "";
      position: absolute;
      left: -24px;
      top: 8px;
      width: 1px;
      height: 32px;
      background: var(--c-stone);
    }
    @media (max-width: 1023px) {
      .trust-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 32px; }
      .trust-grid > .trust-cell + .trust-cell::before { display: none; }
    }
    @media (max-width: 767px) {
      .trust-grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
    }

    /* ---------- Section header (centered) ---------- */
    .section-head { text-align: center; max-width: 700px; margin: 0 auto; }
    .section-head .eyebrow { justify-content: center; margin-bottom: 24px; }
    .section-head .h2 { margin: 0 auto; max-width: 24ch; }
    .section-head .lead { margin: 24px auto 0; max-width: 60ch; }
    .section-head.left { text-align: left; margin-left: 0; }
    .section-head.left .eyebrow { justify-content: flex-start; }
    .section-head.left .h2 { margin: 0; }

    /* ---------- Services cards ---------- */
    .services-grid {
      margin-top: 80px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 48px;
    }
    @media (max-width: 1023px) {
      .services-grid { grid-template-columns: 1fr; gap: 32px; }
    }
    .service-card {
      position: relative;
      display: block;
      border-radius: 16px;
      overflow: hidden;
      text-decoration: none;
      color: inherit;
      min-height: 460px;
      isolation: isolate;
      box-shadow: 0 1px 2px rgba(15,79,87,0.06);
      transition: box-shadow 250ms var(--ease-out),
                  transform 250ms var(--ease-out);
    }
    @media (max-width: 767px) { .service-card { min-height: 400px; } }
    /* ---- media / photo layer ---- */
    .service-card-media {
      position: absolute;
      inset: 0;
      z-index: 0;
      overflow: hidden;
      border-radius: inherit;
      transition: transform 250ms var(--ease-out);
      will-change: transform;
    }
    .service-card-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 30%;
      display: block;
      transform: scale(1.04);
      transition: transform 250ms var(--ease-out);
      will-change: transform;
    }
    .service-card-scrim {
      position: absolute;
      inset: 0;
      background:
        linear-gradient(to top,
          rgba(12,42,46,0.92) 0%,
          rgba(12,42,46,0.72) 26%,
          rgba(12,42,46,0.28) 54%,
          rgba(12,42,46,0.06) 80%,
          rgba(12,42,46,0) 100%);
      transition: opacity 400ms var(--ease-out);
    }
    .service-card .placeholder.card { position: absolute; inset: 0; height: 100%; border-radius: inherit; border: none; }
    /* ---- overlaid text ---- */
    .service-card-body {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      height: 100%;
      min-height: inherit;
      justify-content: flex-end;
      padding: 40px;
      box-sizing: border-box;
    }
    @media (max-width: 767px) { .service-card-body { padding: 28px; } }
    .service-card-body .eyebrow { margin-bottom: 12px; color: var(--c-gold); font-weight: 700; }
    .service-card-body .eyebrow.no-rule::before { background: currentColor; }
    .service-card-body .h3-card { font-family: var(--font-display); font-weight: 400; font-size: 32px; line-height: 1.1; color: var(--c-white); margin: 0 0 14px; }
    .service-card-body > p { font-size: 16px; line-height: 1.6; color: rgba(255,255,255,0.86); margin: 0 0 26px; max-width: 42ch; }
    /* ---- circular arrow CTA ---- */
    .card-cta {
      display: inline-flex;
      align-items: center;
      gap: 16px;
    }
    .card-cta-dot {
      flex: none;
      display: grid;
      place-items: center;
      width: 48px;
      height: 48px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.55);
      color: var(--c-white);
      background: rgba(255,255,255,0.06);
      overflow: hidden;
      transition: background 200ms var(--ease-out),
                  border-color 200ms var(--ease-out),
                  color 200ms var(--ease-out);
    }
    .card-cta-dot .arrow {
      transition: transform 200ms var(--ease-out);
    }
    .card-cta-label {
      font-family: var(--font-display);
      font-size: 17px;
      font-weight: 500;
      color: var(--c-white);
      letter-spacing: 0.01em;
    }
    /* ---- hover / focus animation ---- */
    @media (hover: hover) and (pointer: fine) {
      .service-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 22px 48px rgba(12,42,46,0.28);
      }
      .service-card:hover .service-card-media { transform: scale(1.06); }
      .service-card:hover .service-card-scrim { opacity: 0.94; }
      .service-card:hover .card-cta-dot {
        background: var(--c-seafoam);
        border-color: var(--c-seafoam);
        color: var(--c-deep);
      }
      .service-card:hover .card-cta-dot .arrow { transform: translateX(3px); }
    }
    .service-card:focus-visible {
      outline: 2px solid var(--c-seafoam);
      outline-offset: 3px;
    }
    @media (prefers-reduced-motion: reduce) {
      .service-card-media { transform: none; transition: none; }
      .service-card:hover .service-card-media { transform: none; }
    }

    /* ---------- Signature treatments (PACE, Soft Mint) ---------- */
    .signature {
      background: var(--c-mint);
    }
    .signature-head {
      max-width: var(--maxw);
      margin: 0 auto;
    }
    .signature-head .eyebrow { margin-bottom: 16px; }
    .signature-head .h2 { max-width: 32ch; }
    .sig-scroll-hint {
      display: flex; align-items: center; gap: 6px;
      margin-top: 32px;
      color: var(--c-sea-text);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }
    .sig-row-wrap {
      position: relative;
      margin-top: 16px;
      /* 100% not 100vw — 100vw includes the scrollbar, which knocked the
         row off-axis by the scrollbar width on desktop. */
      margin-left: calc((100% - var(--maxw)) / 2);
      padding-left: 80px;
    }
    @media (max-width: 1280px) {
      .sig-row-wrap { margin-left: 0; padding-left: 80px; }
    }
    @media (max-width: 1023px) { .sig-row-wrap { padding-left: 48px; } }
    @media (max-width: 767px)  { .sig-row-wrap { padding-left: 24px; padding-right: 24px; margin-top: 32px; } }

    .sig-row {
      display: flex;
      gap: 24px;
      overflow-x: auto;
      padding-right: 80px;
      padding-bottom: 24px;
      scroll-snap-type: x mandatory;
      scrollbar-width: thin;
      scrollbar-color: var(--c-sea) transparent;
    }
    .sig-row::-webkit-scrollbar { height: 6px; }
    .sig-row::-webkit-scrollbar-thumb { background: var(--c-sea); border-radius: 999px; opacity: 0.5; }
    .sig-row::-webkit-scrollbar-track { background: transparent; }
    @media (max-width: 767px) {
      .sig-row { flex-direction: column; overflow: visible; padding-right: 0; gap: 16px; }
    }
    .sig-fade {
      pointer-events: none;
      position: absolute;
      top: 0; bottom: 24px; right: 0;
      width: 96px;
      background: linear-gradient(90deg, transparent, var(--c-mint));
    }
    @media (max-width: 767px) { .sig-fade { display: none; } }

    .sig-card {
      flex: 0 0 260px;
      width: 260px;
      height: 360px;
      background: var(--c-pearl);
      border: 1px solid var(--c-stone);
      border-radius: 10px;
      overflow: hidden;
      scroll-snap-align: start;
      display: flex;
      flex-direction: column;
      text-decoration: none;
      color: inherit;
      transition: border-color 250ms var(--ease-out), box-shadow 250ms var(--ease-out), transform 250ms var(--ease-out);
    }
    @media (hover: hover) and (pointer: fine) {
      .sig-card:hover { border-color: var(--c-seafoam); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(15,79,87,0.08); }
    }
    @media (max-width: 767px) { .sig-card { width: 100%; flex: 1 1 auto; height: auto; } }
    .sig-card .placeholder.card { aspect-ratio: 3/2; height: 160px; border: none; border-bottom: 1px solid var(--c-stone); border-radius: 0; }
    .sig-card-img {
      width: 100%;
      height: 180px;
      object-fit: cover;
      object-position: center 30%;
      display: block;
      border-bottom: 1px solid var(--c-stone);
    }
    .sig-card-body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
    .sig-card-body h4 { font-family: var(--font-sans); font-weight: 600; font-size: 20px; color: var(--c-deep); margin: 0 0 8px; line-height: 1.25; }
    .sig-card-body p {
      font-size: 14px;
      line-height: 1.5;
      color: var(--c-slate);
      margin: 0 0 16px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .sig-card .tlink { font-size: 14px; margin-top: auto; }

    /* ---------- Membership teaser ---------- */
    .membership-grid {
      display: grid;
      grid-template-columns: 45fr 55fr;
      gap: 96px;
      align-items: center;
      max-width: var(--maxw-narrow);
      margin: 0 auto;
    }
    @media (max-width: 1023px) {
      .membership-grid { grid-template-columns: 1fr; gap: 56px; }
    }
    .membership-left .h2 { margin-top: 24px; margin-bottom: 24px; }
    .membership-left .body { max-width: 52ch; margin-bottom: 32px; }
    .price-line {
      display: inline-flex; align-items: baseline; gap: 8px;
      margin-top: 16px;
      padding-top: 16px;
      border-top: 1px solid var(--c-stone);
    }
    .price-line .label { font-size: 14px; color: var(--c-slate); }
    .price-line .price { font-family: var(--font-display); font-size: 28px; color: var(--c-deep); }

    .steps {
      display: flex;
      flex-direction: column;
      gap: 32px;
      position: relative;
    }
    .step {
      display: grid;
      grid-template-columns: 40px 1fr;
      gap: 24px;
      align-items: flex-start;
      position: relative;
    }
    .step + .step::before {
      content: "";
      position: absolute;
      left: 20px;
      top: -32px;
      width: 1px;
      height: 32px;
      background: var(--c-stone);
    }
    .step-num {
      width: 40px; height: 40px;
      border-radius: 999px;
      background: var(--c-deep);
      color: var(--c-ivory);
      display: inline-flex; align-items: center; justify-content: center;
      font-family: var(--font-display);
      font-size: 18px;
      line-height: 1;
    }
    .step-title { font-family: var(--font-sans); font-weight: 600; font-size: 18px; color: var(--c-ink); margin: 8px 0 6px; line-height: 1.25; }
    .step-body { font-size: 15px; line-height: 1.6; color: var(--c-slate); margin: 0; max-width: 44ch; }

    /* ---------- Practitioners ---------- */
    .practitioners { background: var(--c-pearl); }
    .practitioners-portraits {
      margin-top: 80px;
      display: flex;
      justify-content: center;
      gap: 32px;
      flex-wrap: wrap;
    }
    @media (max-width: 767px) {
      .practitioners-portraits { gap: 32px; margin-top: 56px; }
    }
    .portrait-card { text-align: center; width: 280px; max-width: 100%; }
    .portrait-card .placeholder.portrait { width: 280px; height: 350px; aspect-ratio: auto; margin: 0 auto; }
    .portrait-card .portrait-img {
      width: 280px;
      height: 350px;
      object-fit: cover;
      object-position: center 20%;
      border-radius: 4px;
      display: block;
      margin: 0 auto;
    }
    @media (max-width: 767px) {
      .portrait-card { width: 80%; }
      .portrait-card .placeholder.portrait { width: 100%; height: auto; aspect-ratio: 4/5; }
      .portrait-card .portrait-img { width: 100%; height: auto; aspect-ratio: 4/5; }
    }
    .portrait-card .pname { font-family: var(--font-sans); font-weight: 600; font-size: 16px; color: var(--c-ink); margin: 16px 0 4px; }
    .portrait-card .ptitle { font-family: var(--font-sans); font-weight: 400; font-size: 14px; color: var(--c-slate); margin: 0; }
    .practitioners-cta { text-align: center; margin-top: 48px; }

    /* ---------- Reviews ---------- */
    .reviews-wrap {
      max-width: var(--maxw-narrow);
      margin: 56px auto 0;
      position: relative;
    }
    .reviews-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }
    @media (max-width: 1023px) { .reviews-row { grid-template-columns: 1fr; } }
    .review-card {
      background: var(--c-pearl);
      border: 1px solid var(--c-stone);
      border-radius: 10px;
      padding: 32px;
      min-height: 280px;
      display: flex;
      flex-direction: column;
    }
    .stars {
      display: inline-flex;
      gap: 2px;
      margin-bottom: 16px;
      color: var(--c-deep);
    }
    .quote {
      font-family: var(--font-sans);
      font-style: italic;
      font-weight: 400;
      font-size: 17px;
      line-height: 1.5;
      color: var(--c-ink);
      margin: 0 0 16px;
      display: -webkit-box;
      -webkit-line-clamp: 6;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .review-attrib { font-family: var(--font-sans); font-weight: 600; font-size: 14px; color: var(--c-deep); margin: auto 0 4px; }
    .review-date { font-size: 13px; color: var(--c-slate); margin: 0; }

    .reviews-controls {
      display: flex; justify-content: center; gap: 16px; margin-top: 32px;
    }
    .rbtn {
      width: 44px; height: 44px;
      border-radius: 999px;
      background: var(--c-ivory);
      /* --c-stone is 1.11:1 on Ivory — the control had no visible boundary.
         Sea Teal gives the 3:1 a UI border needs (4.34:1). */
      border: 1px solid var(--c-sea);
      color: var(--c-deep);
      cursor: pointer;
      touch-action: manipulation;
      display: inline-flex; align-items: center; justify-content: center;
      transition: border-color 200ms var(--ease-out), background 200ms var(--ease-out);
    }
    @media (hover: hover) and (pointer: fine) {
      .rbtn:hover { border-color: var(--c-deep); background: rgba(217,233,231,0.4); }
    }
    .rbtn:disabled { opacity: 0.4; cursor: not-allowed; }
    .reviews-link { text-align: center; margin-top: 32px; }

    /* ---------- Awards strip ---------- */
    .awards { background: var(--c-mint); }
    .awards-inner {
      max-width: 900px; margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 96px;
      align-items: center;
    }
    @media (max-width: 767px) {
      .awards-inner { grid-template-columns: 1fr; gap: 56px; text-align: center; }
    }
    .award {
      display: grid;
      grid-template-columns: 80px 1fr;
      gap: 24px;
      align-items: center;
    }
    @media (max-width: 767px) {
      .award { grid-template-columns: 1fr; justify-items: center; gap: 16px; }
    }
    .award-badge {
      width: 80px; height: 80px;
      border-radius: 999px;
      background: var(--c-ivory);
      border: 1px solid var(--c-seafoam);
      color: var(--c-deep);
      display: inline-flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .award-badge.cova {
      background: var(--c-deep);
      color: var(--c-ivory);
      border-color: var(--c-deep);
      font-family: var(--font-display);
      font-size: 11px;
      letter-spacing: 0.06em;
      flex-direction: column;
      line-height: 1.1;
      text-align: center;
      padding: 8px;
    }
    .award-badge.cova .y { font-family: var(--font-display); font-size: 18px; color: var(--c-gold); }
    /* Image variant for the awards-section COVA badge. Drops the
       circle chrome — the real logo has its own framing. */
    img.award-badge.cova {
      width: 96px;
      height: 96px;
      background: transparent;
      border-radius: 0;
      padding: 0;
      object-fit: contain;
      color: transparent;
    }
    .about-award img.award-badge.cova { width: 112px; height: 112px; }
    /* Image variant for the Chamber of Commerce "2025 Early Stage"
       award — wider aspect, sits in the same .award row but uses
       a rectangular footprint instead of an 80px circle. */
    .award.award-chamber { grid-template-columns: 180px 1fr; }
    .about-award.award-chamber { grid-template-columns: 200px 1fr; }
    @media (max-width: 767px) {
      .award.award-chamber, .about-award.award-chamber { grid-template-columns: 1fr; }
    }
    img.award-badge.chamber {
      width: 180px;
      height: auto;
      background: transparent;
      border: none;
      border-radius: 0;
      padding: 0;
      object-fit: contain;
    }
    .about-award img.award-badge.chamber { width: 200px; }
    .award h3 { font-family: var(--font-sans); font-weight: 600; font-size: 18px; color: var(--c-deep); margin: 0 0 6px; line-height: 1.25; }
    .award p { font-family: var(--font-sans); font-size: 14px; color: var(--c-slate); margin: 0; max-width: 32ch; }

    /* ---------- CTA block ---------- */
    .cta-block {
      background: var(--c-mint);
      text-align: center;
      padding: 128px 96px;
    }
    @media (max-width: 767px) {
      .cta-block { padding: 96px 24px; }
    }
    .cta-block .gold-line {
      width: 40px; height: 2px;
      background: var(--c-gold);
      margin: 0 auto 32px;
    }
    .cta-block .h2 { max-width: 24ch; margin: 0 auto 24px; }
    .cta-block .lead { max-width: 56ch; margin: 0 auto 32px; color: var(--c-ink); }
    .cta-block .cta-sub { margin-top: 16px; }
    .cta-block .cta-sub a { color: var(--c-deep); text-decoration: underline; text-underline-offset: 3px; }

    /* ---------- Footer ---------- */
    .footer { background: var(--c-deep); color: var(--c-ivory); padding: 96px 0 48px; }
    .footer-inner {
      max-width: var(--maxw-narrow);
      margin: 0 auto;
      padding: 0 40px;
      display: grid;
      grid-template-columns: 5fr 3fr 4fr;
      gap: 48px;
    }
    @media (max-width: 1023px) {
      .footer-inner { grid-template-columns: 1fr; }
    }
    @media (max-width: 767px) { .footer-inner { padding: 0 24px; } }

    .footer-brand .footer-logo {
      display: inline-flex; align-items: center; gap: 10px;
      margin-bottom: 32px;
      color: var(--c-ivory);
      font-family: var(--font-display);
      font-size: 22px;
    }
    .footer-brand .footer-logo .logo-mark { background: var(--c-ivory); color: var(--c-deep); }
    .footer-brand .footer-logo img.logo-img {
      display: block;
      height: 96px;
      width: auto;
    }
    @media (max-width: 767px) {
      .footer-brand .footer-logo img.logo-img { height: 72px; }
    }
    .footer-brand p { font-size: 16px; line-height: 1.55; color: var(--c-ivory); max-width: 280px; margin: 0 0 24px; }
    .socials { display: inline-flex; gap: 16px; }
    .socials a {
      display: inline-flex; align-items: center; justify-content: center;
      width: 32px; height: 32px;
      color: var(--c-ivory);
      transition: color 200ms var(--ease-out), transform 200ms var(--ease-out);
    }
    .socials a:hover { color: var(--c-aqua); transform: scale(1.08); }

    .foot-col h4 {
      font-family: var(--font-sans);
      font-weight: 600;
      font-size: 12px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--c-aqua);
      margin: 0 0 16px;
      position: relative;
      padding-bottom: 12px;
    }
    .foot-col h4::after {
      content: ""; position: absolute;
      left: 0; bottom: 0;
      width: 24px; height: 1px;
      background: var(--c-aqua);
    }
    .foot-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
    .foot-col a, .foot-col span {
      font-family: var(--font-sans);
      font-size: 15px;
      color: var(--c-ivory);
      text-decoration: none;
      position: relative;
      display: inline-block;
    }
    .foot-col a::after {
      content: ""; position: absolute; left: 0; bottom: -2px;
      width: 100%; height: 1px; background: var(--c-aqua);
      transform: scaleX(0); transform-origin: left center;
      transition: transform 200ms var(--ease-out);
    }
    .foot-col a:hover { color: var(--c-aqua); }
    .foot-col a:hover::after { transform: scaleX(1); }

    .footer-legal {
      max-width: var(--maxw-narrow);
      margin: 64px auto 0;
      padding: 24px 40px 0;
      border-top: 1px solid rgba(45, 127, 131, 0.3);
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }
    @media (max-width: 767px) { .footer-legal { padding: 24px 24px 0; } }
    .legal-row {
      display: flex; flex-wrap: wrap; gap: 24px;
      font-size: 13px;
      color: rgba(246,246,247,0.7);
    }
    .legal-row a { color: inherit; text-decoration: none; }
    .legal-row a:hover { color: var(--c-aqua); }
    .badge-2026 {
      width: 100px; height: 100px;
      border: 1px solid rgba(216,183,124,0.7);
      border-radius: 999px;
      display: inline-flex; align-items: center; justify-content: center;
      text-align: center;
      font-family: var(--font-display);
      font-size: 11px;
      letter-spacing: 0.08em;
      color: var(--c-gold);
      line-height: 1.2;
      padding: 8px;
      flex-direction: column;
    }
    .badge-2026 .y { font-size: 18px; }
    /* Image variant for the footer COVA Best-of-Williamsburg badge.
       Strips border/padding so the artwork sits flush. */
    img.badge-2026 {
      width: 100px;
      height: auto;
      border: none;
      background: transparent;
      padding: 0;
      display: block;
      object-fit: contain;
    }
    /* Footer awards row — pairs the COVA badge with the Chamber
       of Commerce "2025 Early Stage Small Business of the Year"
       logo. Right-aligned within the legal row on desktop. */
    .footer-awards {
      display: inline-flex;
      align-items: center;
      gap: 24px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }
    .footer-awards img.badge-chamber {
      display: block;
      height: 56px;
      width: auto;
      max-width: 220px;
      object-fit: contain;
    }
    .footer-awards img.badge-2026 { width: 84px; }
    @media (max-width: 767px) {
      .footer-awards { gap: 16px; }
      .footer-awards img.badge-chamber { height: 44px; max-width: 180px; }
      .footer-awards img.badge-2026 { width: 72px; }
    }

    /* ---------- Sticky mobile CTA ---------- */
    .mobile-cta-bar {
      position: fixed;
      left: 0; right: 0;
      bottom: 0;
      z-index: 950;
      background: var(--c-ivory);
      border-top: 1px solid var(--c-stone);
      /* Bottom inset keeps the buttons clear of the iPhone home indicator. */
      padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
      display: none;
      gap: 8px;
      transform: translateY(100%);
      transition: transform 280ms var(--ease-out);
      min-height: 64px;
      align-items: center;
    }
    .mobile-cta-bar.show { transform: none; }
    .mobile-cta-bar .btn { flex: 1; padding: 14px 12px; font-size: 14px; }
    .mobile-cta-bar .btn-primary { flex: 0 0 60%; }
    .mobile-cta-bar .btn-secondary { flex: 0 0 calc(40% - 8px); }
    @media (max-width: 1023px) {
      /* The desktop CTA rail hides below 1024px (it overlapped body
         text on tablets); the sticky bar covers tablet + mobile. */
      .mobile-cta-bar { display: flex; }
      body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
    }

/* Honeypot. Positioned off-screen rather than display:none, because
   some bots skip hidden inputs but not offset ones. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}