/* ============================================================
   Soothing Dental - homepage v2 stylesheet
   Composed from 8 locked v2 mockups. Single source of truth.
   ============================================================ */

/* ============================================================
   TOKENS + RESET
   ============================================================ */
:root {
  --serif: 'IBM Plex Serif', Georgia, serif;
  --sans:  'Inter Tight', system-ui, sans-serif;

  --c-foam:        #EFE8DE;   /* page ground - sand-forward (was near-white #F4F1EC) */
  --c-warmth:      #DBD5D2;
  --c-warmth-deep: #C9C0BC;
  --c-aqua:        #C6CFCF;
  --c-sand:        #D6C7BD;
  --c-sand-deep:   #CBB6A3;   /* deeper sand - grounds + glass tints */
  --c-pearl:       #E3E5E8;
  --c-water:       #A6C8CD;   /* saturated sea-glass accent - the "touch of blue" */
  /* DECORATION ONLY - hairlines, borders, dots, outlines. Measured at 2.4:1 to
     2.9:1 as type on our sand and sea-glass grounds, so it must never be used
     as a text colour. Use --c-water-ink for that. */
  --c-water-deep:  #5F8E95;
  /* Sea-glass for TYPE. Same hue read, dark enough to clear 4.5:1 on every
     ground in the palette (measured 5.3:1 to 5.7:1). */
  --c-water-ink:   #35565C;
  --c-ink:    #2A2E2C;
  /* Deepened again 2026-08: #576B68 measured 4.0:1 to 4.3:1 on the glass cards
     and the contact panel, under the 4.5:1 AA floor for normal text. This
     clears 5.1:1 on the same surfaces. Matters here - the practice sees a lot
     of elderly patients. */
  --c-ink-2:  #4A5C59;
  --c-ink-3:  #74736D;        /* deepened for contrast (was #8A8985) */
  /* The same tertiary tone, for TEXT only. Measured in the browser on
     2026-10-04, #74736D came out between 3.0:1 and 4.45:1 behind every piece
     of text that used it (the open or closed status, "(every other week)",
     the form note, the menu group labels, the footer Friday line): all under
     the 4.5:1 AA floor. This clears it on every surface, 4.6:1 on the bluest
     menu ground and 5.2:1 or more elsewhere. Hairlines, dots and underline
     tints keep --c-ink-3, so nothing but the lettering changes. */
  --c-ink-3-text: #55544F;
  --c-line:   rgba(42, 46, 44, 0.12);

  --glass-warmth: rgba(198, 187, 179, 0.82);
  --glass-warmth-bg: rgba(198, 187, 179, 0.82);
  --glass-water:  rgba(176, 201, 204, 0.80);  /* sea-glass header/call-bar - lives on the water zone */
  --glass-edge:   rgba(255, 255, 255, 0.66);
  --glass-blur:   18px;
  --glass-shadow:      rgba(120, 96, 76, 0.30);  /* warm sand-tint - replaces black drops */
  --glass-shadow-soft: rgba(120, 96, 76, 0.18);

  --gutter: clamp(1.25rem, 0.5rem + 3vw, 2.5rem);
  --container-wide: 1400px;
  --container-mid:  1200px;   /* interior-page width (service pages, contact) */
  /* Horizontal inset that places full-bleed content on the --container-mid
     content edges, matching the service pages' max-width:1200 + gutter box. */
  --inset-mid: calc(max(0px, (100vw - var(--container-mid)) / 2) + var(--gutter));
  --r-pill: 9999px;
  --r-sm: 6px;

  --header-h: 76px;
  --header-h-mobile: 76px;
  --header-h-desktop: 130px;

  --t-fast: 200ms cubic-bezier(0.16, 1, 0.3, 1);
  --t-base: 280ms cubic-bezier(0.16, 1, 0.3, 1);
  --t-slow: 360ms cubic-bezier(0.16, 1, 0.3, 1);
}
@media (min-width: 1100px) { :root { --header-h: 130px; } }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Sand base on <html> stops body-background propagation to the canvas, so the
   body wash maps to full PAGE height (not the viewport) - the beach scrolls. */
html { -webkit-font-smoothing: antialiased; background-color: #DDCDBB; }
/* The header is sticky and, on phones, the call bar is fixed to the bottom.
   Without this, anything the browser scrolls into view for you (the target of
   the skip link, the next Tab stop, a #request link) can land underneath one
   of them: measured 2026-10-04, the first link after "Skip to main content"
   sat hidden behind the header on every interior page. */
html { scroll-padding-top: calc(var(--header-h) + 1rem); scroll-padding-bottom: 70px; }
@media (min-width: 880px) { html { scroll-padding-bottom: 0; } }
body {
  font-family: var(--sans);
  color: var(--c-ink);
  /* Abstract beach wash, top -> bottom. Recolored to the client's own Canva
     palette (Alex, 6/22): pale PEARL sky (#E3E5E8) at the very top, easing into
     her MUTED aqua (#C6CFCF) - not the brighter/cleaner sea-glass that read as
     "too blue" - then warm grey into SAND (#D6C7BD), which prevails through the
     long body and into the footer. Three soft colors up top, not a blue sky.
     Keeps the beach-as-you-scroll movement; never a photo. */
  background-color: #DECFBE;
  background-image: linear-gradient(180deg,
    #E4E5E5 0%,    /* pearl sky - her #E3E5E8 */
    #C6CFCF 8%,    /* muted aqua water - her #C6CFCF, low-saturation */
    #D6D3CB 16%,   /* aqua folding into warm grey - her #DBD5D2 */
    #DFD6C8 27%,   /* sand arriving - her #D6C7BD */
    #ECE5D8 38%,   /* warm foam-sand */
    #E6DBCB 52%,   /* sand */
    #E2D3C2 66%,   /* sand, deeper */
    #E9DFD2 84%,   /* sand */
    #F1EBE1 100%); /* foam settle */
  background-repeat: no-repeat;
  background-size: 100% 100%;
  min-height: 100vh;
  overflow-x: hidden;
}
/* Film grain over the whole page. A fixed, ultra-low-opacity fractal-noise
   layer gives the flat gradient fields "tooth" so long scrolls read as soft
   paper, not banded color. Sits above section fills but below the header/menu
   (higher z-index) and never intercepts clicks. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

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

/* Modern scrollbar - a slim sea-glass pill, replaces the default OS bar.
   Applies site-wide and inside the mobile menu's scroll area. */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(111, 154, 161, 0.55) transparent;
}
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(111, 154, 161, 0.50);
  border-radius: 9999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
@media (hover: hover) {
  ::-webkit-scrollbar-thumb:hover { background: rgba(95, 142, 149, 0.78); background-clip: padding-box; }
}

/* Visually-hidden helper */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* Skip link */
.skip-to-content {
  position: absolute;
  left: 8px; top: 8px;
  padding: 13px 18px;
  background: var(--c-ink);
  color: #fff;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 500;
  border-radius: var(--r-sm);
  transform: translateY(-200%);
  transition: transform var(--t-fast);
  z-index: 1000;
}
.skip-to-content:focus { transform: translateY(0); }

/* ============================================================
   SHARED COMPONENT CLASSES
   ============================================================ */

.btn-glass-primary {
  display: inline-flex; align-items: center; gap: 0.55em;
  padding: 0.95em 1.6em;
  font-family: var(--sans); font-size: 0.9375rem; font-weight: 500;
  color: var(--c-ink); border-radius: var(--r-pill);
  background:
    radial-gradient(ellipse 110% 90% at 50% 15%, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.55) 35%, rgba(255,255,255,0.20) 70%, rgba(255,255,255,0.38) 100%),
    linear-gradient(160deg, rgba(214,199,189,0.45), rgba(201,192,188,0.60));
  border: 1px solid rgba(255,255,255,0.88);
  box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 16px 34px -13px var(--glass-shadow);
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-glass-primary svg { width: 18px; height: 18px; flex-shrink: 0; }

.btn-glass,
.site-form .InputfieldSubmit button {
  display: inline-flex; align-items: center; gap: 0.55em;
  padding: 0.95em 1.6em;
  font-family: var(--sans); font-size: 0.9375rem; font-weight: 500;
  color: var(--c-ink); border-radius: var(--r-pill);
  background:
    radial-gradient(ellipse 110% 90% at 50% 15%, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.55) 35%, rgba(255,255,255,0.20) 70%, rgba(255,255,255,0.38) 100%),
    linear-gradient(160deg, rgba(214,199,189,0.45), rgba(201,192,188,0.60));
  border: 1px solid rgba(255,255,255,0.88);
  box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 16px 34px -13px var(--glass-shadow);
}
.btn-glass svg,
.site-form .InputfieldSubmit button svg { width: 18px; height: 18px; flex-shrink: 0; }

.link-italic {
  position: relative;
  display: inline-flex; align-items: center;
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: 1.0625rem;
  color: var(--c-ink);
  padding: 0.7em 0.1em 0.55em;
  min-height: 44px;
  background-image: linear-gradient(var(--c-ink), var(--c-ink)), linear-gradient(var(--c-ink-3), var(--c-ink-3));
  background-size: 0% 1px, 100% 1px;
  background-position: 0 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 360ms cubic-bezier(0.16, 1, 0.3, 1), color 200ms ease;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .link-italic:hover { background-size: 100% 1px, 100% 1px; }
}
@media (hover: hover) {
  .link-italic:hover { color: var(--c-ink); }
}

/* ============================================================
   HEADER C4c
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 100;
  /* Glassmorphic bar: bright top sheen + a water gradient with real depth
     (deeper sea-glass at the left, behind the logo, so the white lockup pops;
     clearing to light toward the nav). Thick-glass lift via inset highlight
     + soft undershadow. */
  /* Per client (Alex, 6/24, "Header: Tucked Bloom"): sand carried ALL the way
     across, not clearing to white on the right. The opaque hero background now
     sits behind the sticky bar at the top of the page, so there's no blue page
     wash to bleed up through the glass. The only blue is the sea-glass hairline
     at the bottom. */
  background:
    linear-gradient(180deg, rgba(255,255,255,0.52) 0%, rgba(255,255,255,0.12) 26%, rgba(255,255,255,0) 52%),
    linear-gradient(100deg, rgba(209,194,184,0.95) 0%, rgba(212,197,187,0.93) 50%, rgba(217,203,193,0.90) 100%);
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  border-bottom: 1px solid rgba(95,142,149,0.45);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.90),
    inset 0 -1px 0 rgba(42,46,44,0.06),
    0 12px 34px -14px var(--glass-shadow-soft);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header { background: var(--c-warmth-deep); }
}
.site-header__inner {
  width: 100%; max-width: var(--container-wide);
  margin-inline: auto; padding-inline: var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  min-height: 60px; padding-block: 10px; gap: 1rem;
}
.site-header__logo {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 7px 0;
}
.site-header__lockup--stacked { display: none; }
.site-header__lockup--compressed { display: inline-flex; align-items: center; }
.site-header__lockup--compressed svg,
.site-header__lockup--compressed img { height: 38px; width: auto; }

.right-column { display: none; }

.mobile-actions { display: inline-flex; align-items: center; gap: 0.25rem; }
.mobile-call {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--c-ink); border-radius: 6px;
  transition: color 200ms ease, transform 200ms ease;
}
.mobile-call svg { width: 22px; height: 22px; }
.mobile-call:active { transform: scale(0.94); }
@media (hover: hover) {
  .mobile-call:hover { color: var(--c-ink-2); }
}

.hamburger {
  width: 44px; height: 44px;
  display: inline-flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 5px; border-radius: 6px;
  color: var(--c-ink);
}
/* 2px (whole number) avoids sub-pixel rendering variance between lines.
   Previously 1.5px which can rasterize unevenly. */
.hamburger__line { width: 22px; height: 2px; background: currentColor; border-radius: 1px; transition: transform var(--t-base), opacity var(--t-base); }
.hamburger[aria-expanded="true"] .hamburger__line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] .hamburger__line:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] .hamburger__line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (min-width: 1100px) {
  /* Desktop: sand pools on the left under the stacked logo, clears to white
     across the nav side. White side kept opaque so the blue page wash behind
     can't bleed up through the glass. Blue is only the bottom hairline (6/22). */
  .site-header {
    background:
      linear-gradient(180deg, rgba(255,255,255,0.60) 0%, rgba(255,255,255,0.10) 30%, rgba(255,255,255,0) 60%),
      linear-gradient(100deg, rgba(214,199,189,0.86) 0%, rgba(220,207,197,0.78) 30%, rgba(244,241,236,0.80) 62%, rgba(255,255,255,0.88) 100%);
  }
  .site-header__inner { min-height: 130px; padding-block: 16px; align-items: stretch; gap: 2.5rem; }
  .site-header__lockup--compressed { display: none; }
  .site-header__logo {
    display: inline-flex; align-items: center;
    padding: 0 2.5rem 0 0;
    border-right: 1px solid rgba(42, 46, 44, 0.15);
  }
  .site-header__lockup--stacked { display: inline-flex; align-items: center; }
  .site-header__lockup--stacked svg,
  .site-header__lockup--stacked img { height: 96px; width: auto; }
  .right-column {
    display: flex; flex-direction: column;
    justify-content: space-between; align-items: flex-end;
    margin-inline-start: auto; padding-block: 0.1rem;
    text-align: right; gap: 0.6rem;
  }
  .right-column__top { display: flex; align-items: center; gap: 1.5rem; flex-wrap: nowrap; }

  /* Status block - leads the top row in the locked sketch R direction */
  .status {
    display: inline-flex; align-items: center; gap: 0.65em;
    font-family: var(--serif); font-weight: 400;
    font-size: 0.9375rem; color: var(--c-ink); line-height: 1;
  }
  .status__dot {
    position: relative;
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--c-ink-2);
    box-shadow: 0 0 0 2px rgba(107,122,120,0.22);
    flex-shrink: 0;
  }
  @media (prefers-reduced-motion: no-preference) {
    .status__dot::after {
      content: ""; position: absolute;
      inset: -4px; border-radius: 50%;
      background: rgba(107,122,120,0.45);
      animation: status-dot-pulse 2.4s ease-out infinite;
      z-index: -1;
    }
  }
  @keyframes status-dot-pulse {
    0%   { transform: scale(0.7); opacity: 0.85; }
    100% { transform: scale(1.9); opacity: 0; }
  }
  .status--closed .status__dot { background: var(--c-ink-3); box-shadow: 0 0 0 2px rgba(138,137,133,0.20); }
  .status--closed .status__dot::after { display: none; }
  .status__main { font-family: var(--serif); font-weight: 400; }
  .status__main strong { font-weight: 500; color: var(--c-ink); }
  .status__location {
    display: inline-flex; align-items: center; gap: 0.4em;
    font-family: var(--serif); font-weight: 400;
    font-size: 0.9375rem; line-height: 1; color: var(--c-ink);
    letter-spacing: 0;
    text-decoration: none;
    transition: color 200ms ease;
  }
  .status__location:hover { color: var(--c-ink-2); text-decoration: underline; text-underline-offset: 0.2em; }
  .status__pin { width: 14px; height: 14px; color: var(--c-ink-2); flex-shrink: 0; }
  .status__location:hover .status__pin { color: var(--c-ink); }

  .right-column__phone {
    font-family: var(--serif); font-weight: 400;
    font-size: clamp(1.375rem, 1rem + 0.6vw, 1.625rem);
    color: var(--c-ink); line-height: 1; letter-spacing: -0.01em;
    padding: 0.1em 0.05em;
    display: inline-flex; align-items: center; gap: 0.45em;
  }
  .right-column__phone svg { width: 20px; height: 20px; flex-shrink: 0; }
  .right-column__phone:hover { text-decoration: underline; text-underline-offset: 0.2em; }
  .right-column__cta {
    position: relative; overflow: hidden;
    display: inline-flex; align-items: center; gap: 0.5em;
    padding: 0.6em 1.2em;
    font-family: var(--sans); font-size: 0.875rem; font-weight: 500;
    color: var(--c-ink); border-radius: var(--r-pill);
    background:
      radial-gradient(ellipse 110% 90% at 50% 15%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.50) 35%, rgba(255,255,255,0.20) 70%, rgba(255,255,255,0.34) 100%),
      linear-gradient(160deg, rgba(214,199,189,0.40), rgba(201,192,188,0.55));
    border: 1px solid rgba(255,255,255,0.85);
    box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 14px 28px -13px var(--glass-shadow);
    transition:
      transform 280ms cubic-bezier(0.16, 1, 0.3, 1),
      box-shadow 280ms ease;
  }
  /* Diagonal sheen sweep - the "premium glass" touch.
     Starts off-screen left, transitions across the pill on hover. */
  .right-column__cta::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(
      115deg,
      transparent 30%,
      rgba(255,255,255,0.50) 48%,
      rgba(255,255,255,0.50) 52%,
      transparent 70%
    );
    transform: translateX(-110%);
    transition: transform 720ms cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
  }
  .right-column__cta > * { position: relative; z-index: 1; }
  .right-column__cta svg {
    width: 16px; height: 16px; flex-shrink: 0;
    transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  @media (hover: hover) {
    .right-column__cta:hover {
      transform: translateY(-2px);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,1.0),
        0 22px 42px -15px var(--glass-shadow);
    }
    .right-column__cta:hover::before { transform: translateX(110%); }
    .right-column__cta:hover svg { transform: translateY(-1px); }
  }
  .right-column__cta:active {
    transform: translateY(0);
    transition-duration: 100ms;
  }
  .right-column__cta:focus-visible {
    outline: 2px solid var(--c-ink);
    outline-offset: 3px;
  }
  @media (prefers-reduced-motion: reduce) {
    .right-column__cta,
    .right-column__cta::before,
    .right-column__cta svg { transition: none !important; }
    .right-column__cta:hover { transform: none; }
    .right-column__cta:hover::before { transform: translateX(-110%); }
  }
  .right-column__bottom { display: flex; align-items: center; gap: 1rem; }
  .right-column__nav-list {
    display: flex; align-items: center;
    gap: clamp(0.5rem, 0.2rem + 0.5vw, 0.95rem);
  }
  .right-column__nav a {
    position: relative;
    font-family: var(--sans);
    font-size: 0.9375rem; font-weight: 500; color: var(--c-ink);
    padding: 0.55em 0.95em;
    display: inline-flex; align-items: center; gap: 0.35em;
    transition: opacity 200ms;
  }
  /* Underline reveal on hover/focus */
  .right-column__nav > .right-column__nav-list > li > a::after {
    content: ""; position: absolute;
    left: 0.95em; right: 0.95em; bottom: 0.4em;
    height: 1px; background: var(--c-ink);
    transform: scaleX(0); transform-origin: center;
    transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .right-column__nav > .right-column__nav-list > li:hover > a::after,
  .right-column__nav a:focus-visible::after { transform: scaleX(1); }
  /* Dim non-focused nav items when hovering within the list */
  .right-column__nav-list:hover > li > a { opacity: 0.55; }
  .right-column__nav-list:hover > li:hover > a { opacity: 1; }

  /* 1100 to 1199px (an iPad in landscape, a laptop at 125% scaling): the row
     needed about 90px more than it had, so "New Patients", "Gentle Dentistry"
     and the Schedule button each broke onto two lines. Tighter gaps here keep
     it to one line; the block after this one puts the full spacing back from
     1200px, where nothing changes (measured 2026-10-04). */
  .site-header__inner { gap: 1.5rem; }
  .site-header__logo { padding-right: 1.5rem; }
  .right-column__nav-list > li > a { padding-inline: 0.6em; white-space: nowrap; }
  .right-column__nav > .right-column__nav-list > li > a::after { left: 0.6em; right: 0.6em; }
  .right-column__cta { white-space: nowrap; }

  /* Caret on items with dropdowns */
  .right-column__nav a.has-sub .caret {
    width: 5px; height: 5px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    opacity: 0.5;
    display: inline-block;
    transition: transform 240ms, opacity 200ms;
  }
  .right-column__nav-list > li:hover > a.has-sub .caret,
  .right-column__nav-list > li:focus-within > a.has-sub .caret {
    transform: translateY(0) rotate(225deg);
    opacity: 0.85;
  }

  /* DROPDOWNS - vertical card list with stagger slide-in */
  .has-dropdown { position: relative; }
  .right-column__nav-list > .has-dropdown {
    /* Invisible hover bridge so the cursor can travel from the nav
       link into the dropdown without the dropdown closing. */
    padding-bottom: 20px;
    margin-bottom: -20px;
  }
  .dropdown {
    position: absolute;
    top: calc(100% - 2px); left: 0; right: auto;
    width: max-content;
    max-width: 380px;
    /* Sea-glass at the top continues the header bar it hangs from, easing into
       bright foam glass below - reads as an extension of the glass header. */
    background: linear-gradient(180deg, rgba(176,201,204,0.90) 0%, rgba(214,228,229,0.92) 26%, rgba(244,241,236,0.96) 100%);
    backdrop-filter: blur(24px) saturate(1.4);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    border: 1px solid rgba(255,255,255,0.62);
    border-top: 0;
    border-radius: 0 0 18px 18px;
    box-shadow: 0 32px 64px -26px var(--glass-shadow);
    padding: 0.85rem;
    opacity: 0; visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 260ms ease, transform 260ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 260ms;
    z-index: 90; pointer-events: none;
    text-align: left;
  }
  .has-dropdown:hover .dropdown,
  .has-dropdown:focus-within .dropdown,
  /* Touch screens never fire :hover, so main.js marks the tapped parent and
     this opens it (Alex could not reach Gallery on a tablet, 9/28). */
  .has-dropdown.is-tap-open .dropdown,
  .dropdown:hover {
    opacity: 1; visibility: visible; transform: translateY(0);
    transition: opacity 260ms ease, transform 260ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 0s;
    pointer-events: auto;
  }
  .dropdown__list { display: flex; flex-direction: column; gap: 2px; }
  .right-column__nav .dropdown__list a {
    display: flex; align-items: center; gap: 0.85em;
    padding: 0.85em 1em;
    border-radius: 12px;
    transition: background 200ms;
    opacity: 0;
    transform: translateY(6px);
  }
  .right-column__nav .dropdown__list a::after { display: none; } /* no underline reveal inside the card */
  /* Safety net: the rows start at opacity 0 and are revealed by the animation
     below, which is keyed on hover/focus. A tap-opened menu on a hover-less
     device fires neither, so without this the card opens EMPTY (Alex, 9/28).
     This sets the end state outright; the animation still runs for mouse users. */
  .has-dropdown.is-tap-open .dropdown__list a { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: no-preference) {
    .has-dropdown:hover .dropdown__list a,
    .has-dropdown:focus-within .dropdown__list a,
    .has-dropdown.is-tap-open .dropdown__list a {
      animation: dropdown-row-in 360ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
    .has-dropdown:hover .dropdown__list a:nth-child(1),
    .has-dropdown:focus-within .dropdown__list a:nth-child(1),
    .has-dropdown.is-tap-open .dropdown__list a:nth-child(1) { animation-delay: 60ms; }
    .has-dropdown:hover .dropdown__list a:nth-child(2),
    .has-dropdown:focus-within .dropdown__list a:nth-child(2),
    .has-dropdown.is-tap-open .dropdown__list a:nth-child(2) { animation-delay: 110ms; }
    .has-dropdown:hover .dropdown__list a:nth-child(3),
    .has-dropdown:focus-within .dropdown__list a:nth-child(3),
    .has-dropdown.is-tap-open .dropdown__list a:nth-child(3) { animation-delay: 160ms; }
    .has-dropdown:hover .dropdown__list a:nth-child(4),
    .has-dropdown:focus-within .dropdown__list a:nth-child(4),
    .has-dropdown.is-tap-open .dropdown__list a:nth-child(4) { animation-delay: 210ms; }
    .has-dropdown:hover .dropdown__list a:nth-child(5),
    .has-dropdown:focus-within .dropdown__list a:nth-child(5),
    .has-dropdown.is-tap-open .dropdown__list a:nth-child(5) { animation-delay: 260ms; }
    .has-dropdown:hover .dropdown__list a:nth-child(6),
    .has-dropdown:focus-within .dropdown__list a:nth-child(6),
    .has-dropdown.is-tap-open .dropdown__list a:nth-child(6) { animation-delay: 310ms; }
  }
  /* With motion reduced there is no reveal animation, so the rows must simply
     be visible. This rule used the selector `.dropdown__list a`, which is
     weaker than the `.right-column__nav .dropdown__list a` rule above that
     hides them, so it never applied: on any computer with animations turned
     off (Alex's own PC is one) the About menu opened as an empty card, by
     mouse and by keyboard. Same selector now, so it wins (2026-10-04). */
  @media (prefers-reduced-motion: reduce) {
    .right-column__nav .dropdown__list a { opacity: 1; transform: none; }
  }
  @keyframes dropdown-row-in {
    to { opacity: 1; transform: translateY(0); }
  }
  .right-column__nav .dropdown__list a:hover {
    background:
      radial-gradient(ellipse 80% 80% at 0% 50%, rgba(166,200,205,0.34), transparent 70%),
      rgba(255,255,255,0.50);
  }
  .dropdown__icon {
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background:
      radial-gradient(circle at 35% 25%, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.45) 50%, rgba(255,255,255,0.20) 100%),
      linear-gradient(165deg, rgba(214,199,189,0.45), rgba(201,192,188,0.60));
    border: 1px solid rgba(255,255,255,0.75);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
    flex-shrink: 0;
  }
  .dropdown__list a:hover .dropdown__icon {
    background:
      radial-gradient(circle at 35% 25%, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.45) 50%, rgba(255,255,255,0.20) 100%),
      linear-gradient(165deg, rgba(166,200,205,0.62), rgba(149,189,195,0.82));
  }
  .dropdown__icon svg { width: 18px; height: 18px; color: var(--c-ink); }
  .dropdown__text { display: flex; flex-direction: column; min-width: 0; }
  .dropdown__text strong {
    font-family: var(--sans); font-size: 0.9375rem; font-weight: 500;
    color: var(--c-ink); letter-spacing: 0.005em;
    white-space: nowrap;
  }
  .dropdown__text small {
    font-family: var(--serif); font-style: normal; font-weight: 300;
    font-size: 0.8125rem; color: var(--c-ink-3-text);
    margin-top: 0.2em;
  }
  .dropdown__footer {
    border-top: 1px solid rgba(42,46,44,0.10);
    margin-top: 0.5rem; padding: 0.85em 1em 0.35em;
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.75rem;
    font-family: var(--serif); font-style: italic; font-weight: 300;
    font-size: 0.8125rem; color: var(--c-ink-2);
  }
  .right-column__nav .dropdown__footer a {
    color: var(--c-ink); font-family: var(--sans); font-style: normal;
    font-weight: 500; font-size: 0.8125rem;
    display: inline-flex; align-items: center; gap: 0.3em;
    border-bottom: 1px solid currentColor; padding: 0 0 1px 0;
    border-radius: 0;
  }
  .right-column__nav .dropdown__footer a::after { display: none; }

  /* MEGA SERVICES DROPDOWN - three category columns of real service links.
     Inherits the base left-anchored positioning (left:0), so it sits flush at
     the header bottom via the <li>'s padding-bottom hover bridge, reads as
     connected to its trigger, and grows rightward to stay on-screen. The width
     clamp is a viewport safety net for the narrowest laptop widths. */
  .dropdown--mega {
    max-width: none;
    width: min(640px, calc(100vw - 2 * var(--gutter)));
  }
  .dropdown__groups {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.25rem 1.25rem;
  }
  .dropdown__group { display: flex; flex-direction: column; gap: 1px; }
  .dropdown__group-label {
    font-family: var(--sans);
    font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--c-ink-3-text);
    padding: 0.4em 0.7em; margin-bottom: 0.1rem;
  }
  .right-column__nav .dropdown--mega .dropdown__svc {
    display: block;
    padding: 0.5em 0.7em;
    border-radius: 10px;
    font-family: var(--sans); font-size: 0.875rem; font-weight: 500;
    color: var(--c-ink);
    transition: background 200ms;
  }
  .right-column__nav .dropdown--mega .dropdown__svc::after { display: none; }
  .right-column__nav .dropdown--mega .dropdown__svc:hover {
    background:
      radial-gradient(ellipse 80% 80% at 0% 50%, rgba(166,200,205,0.34), transparent 70%),
      rgba(255,255,255,0.50);
  }
  /* Scoped under .dropdown__footer to outrank the footer text-link rule
     above (which would otherwise flatten the pill to border-radius:0 with an
     ink underline via higher specificity). */
  .right-column__nav .dropdown__footer .dropdown__urgent {
    color: var(--c-ink); font-family: var(--sans); font-weight: 500; font-size: 0.8125rem;
    display: inline-flex; align-items: center; gap: 0.45em;
    padding: 0.45em 0.9em; border-radius: var(--r-pill);
    /* True glass: translucent fill lets the blur refract the warmth panel
       behind it; the corner radial is a low-opacity dusty-rose urgency tint
       (warm, not red) so the pill reads as an alert without leaving the
       glass/white system. */
    background:
      linear-gradient(180deg, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0.12) 48%, rgba(255,255,255,0.04) 100%),
      radial-gradient(130% 150% at 0% 0%, rgba(214,150,126,0.26), transparent 62%),
      rgba(255,255,255,0.12);
    -webkit-backdrop-filter: blur(14px) saturate(1.5);
            backdrop-filter: blur(14px) saturate(1.5);
    border: 1px solid rgba(255,255,255,0.65);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.95),
      inset 0 -1px 1px rgba(214,150,126,0.20),
      0 4px 12px -6px rgba(42,46,44,0.22);
    transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 200ms, background 200ms;
  }
  .right-column__nav .dropdown__footer .dropdown__urgent svg { width: 15px; height: 15px; flex-shrink: 0; color: #B96A4E; }
  @media (hover: hover) {
    .right-column__nav .dropdown__footer .dropdown__urgent:hover {
      transform: translateY(-1px);
      background:
        linear-gradient(180deg, rgba(255,255,255,0.50) 0%, rgba(255,255,255,0.16) 48%, rgba(255,255,255,0.06) 100%),
        radial-gradient(130% 150% at 0% 0%, rgba(214,150,126,0.34), transparent 62%),
        rgba(255,255,255,0.16);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,1),
        inset 0 -1px 1px rgba(214,150,126,0.26),
        0 10px 20px -8px rgba(42,46,44,0.28);
    }
  }

  /* When a dropdown is open, dim the other nav items beyond the
     baseline hover-dim so the focused dropdown stands out. */
  .site-header:has(.has-dropdown:hover, .has-dropdown:focus-within, .has-dropdown.is-tap-open) {
    border-bottom-color: transparent;
  }

  .mobile-actions { display: none; }
}

/* From 1200px the header has room for its full spacing again. These four lines
   put back exactly what the compact 1100 to 1199px rules above reduced. */
@media (min-width: 1200px) {
  .site-header__inner { gap: 2.5rem; }
  .site-header__logo { padding-right: 2.5rem; }
  .right-column__nav-list > li > a { padding-inline: 0.95em; }
  .right-column__nav > .right-column__nav-list > li > a::after { left: 0.95em; right: 0.95em; }
}

/* ============================================================
   MOBILE MENU - Concierge Rows (full-screen, slide up from bottom)
   Approved sketch: mobile-menu-b-concierge-rows.html (locked).
   Lockup and hamburger/X stay anchored to the closed-state header.
   ============================================================ */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 99;
  /* Per client (6/22): drop most of the blue. The panel now fades from creamy
     beige at the top to near-white at the bottom, with only a faint sea-glass
     hint glowing in the top-right corner - not blue-to-white. Text stays dark
     ink on light. */
  background: var(--c-foam);
  background-image:
    radial-gradient(110% 55% at 100% 0%, rgba(166,200,205,0.18) 0%, transparent 55%),
    radial-gradient(120% 70% at 0% 100%, rgba(203,182,163,0.30) 0%, transparent 58%),
    linear-gradient(180deg,
      #E6DDD0 0%,
      #ECE5DA 35%,
      #F2EDE5 70%,
      #F8F5F0 100%);
  display: flex; flex-direction: column;
  padding-top: calc(var(--header-h-mobile) - 14px);
  transform: translateY(100%);
  visibility: hidden;
  transition: transform 540ms cubic-bezier(.22,.61,.36,1), visibility 0s linear 540ms;
  overflow: hidden;
}
.mobile-menu::before {
  content: ""; position: absolute; right: -12%; top: 18%;
  width: min(380px, 90vw); aspect-ratio: 1; opacity: .05;
  background: url('../images/lotus-glass.svg') center/contain no-repeat;
  pointer-events: none;
}
.mobile-menu.is-open {
  transform: translateY(0);
  visibility: visible;
  transition: transform 540ms cubic-bezier(.22,.61,.36,1), visibility 0s linear 0s;
}
.mobile-menu__scroll {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  padding-inline: var(--gutter);
  padding-top: .15rem;
  padding-bottom: 140px;
  -webkit-overflow-scrolling: touch;
}
body.menu-open { overflow: hidden; }

/* Nav rows */
.mobile-menu__nav { display: flex; flex-direction: column; }
.mobile-menu__item {
  border-top: 1px solid var(--c-line);
  opacity: 0; transform: translateY(14px);
  transition: opacity 540ms ease, transform 540ms cubic-bezier(.22,.61,.36,1);
}
.mobile-menu__item:last-of-type { border-bottom: 1px solid var(--c-line); }
.mobile-menu.is-open .mobile-menu__item { opacity: 1; transform: translateY(0); }
.mobile-menu.is-open .mobile-menu__item:nth-child(1) { transition-delay: 200ms; }
.mobile-menu.is-open .mobile-menu__item:nth-child(2) { transition-delay: 260ms; }
.mobile-menu.is-open .mobile-menu__item:nth-child(3) { transition-delay: 320ms; }
.mobile-menu.is-open .mobile-menu__item:nth-child(4) { transition-delay: 380ms; }
.mobile-menu.is-open .mobile-menu__item:nth-child(5) { transition-delay: 440ms; }

.mobile-menu__row {
  display: grid; grid-template-columns: 1fr 22px;
  align-items: center; gap: .85rem;
  width: 100%; text-align: left;
  padding: .85rem 0;
  color: var(--c-ink);
  background: none; border: 0;
  font: inherit; cursor: pointer;
}
.mobile-menu__label-wrap { display: flex; flex-direction: column; gap: .25rem; }
.mobile-menu__label {
  font-family: var(--serif); font-weight: 300;
  font-size: 1.55rem; line-height: 1; letter-spacing: -0.01em;
  color: var(--c-ink);
}
.mobile-menu__sub-label {
  font-family: var(--sans); font-weight: 400;
  font-size: .98rem; color: var(--c-ink-2);
  letter-spacing: .005em; line-height: 1.25;
}
.mobile-menu__chev {
  width: 22px; height: 22px; color: var(--c-ink-2);
  transition: transform 320ms cubic-bezier(.65,.05,.36,1), color 220ms ease;
}
.mobile-menu__item.is-leaf .mobile-menu__chev { transform: rotate(-45deg); }
.mobile-menu__item.is-open .mobile-menu__chev { transform: rotate(90deg); color: var(--c-ink); }

.mobile-menu__sub {
  /* visibility, not just max-height: a collapsed submenu with height 0 still
     keeps its links in the tab order, so keyboard users were tabbing into
     invisible items inside the open menu (9/29 audit). It flips back on the
     moment the panel opens, and off only after the collapse finishes. */
  max-height: 0; overflow: hidden; visibility: hidden;
  transition: max-height 420ms cubic-bezier(.22,.61,.36,1), visibility 0s 420ms;
}
.mobile-menu__item.is-open .mobile-menu__sub {
  /* A fallback only: main.js sets the exact height when a list opens. At
     720px the Services list (17 rows, about 800px) was cut off, so Botox was
     half hidden and the last link could not be seen at all. */
  max-height: 1100px; visibility: visible;
  transition: max-height 420ms cubic-bezier(.22,.61,.36,1), visibility 0s 0s;
}
.mobile-menu__sub-list {
  padding: .25rem 0 1.5rem 0;
  display: flex; flex-direction: column; gap: .1rem;
  list-style: none;
}
.mobile-menu__sub-list a {
  display: flex; align-items: center; gap: .7rem;
  font-family: var(--serif); font-weight: 400;
  font-size: 1.0625rem; color: var(--c-ink);
  padding: .55rem 0; min-height: 44px;
  text-decoration: none;
}
.mobile-menu__sub-list a::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-ink); flex-shrink: 0;
}

/* Status strip */
.mobile-menu__strip {
  margin-top: 1.1rem;
  display: flex; align-items: center; gap: .65rem;
  padding: .7rem .9rem;
  background: linear-gradient(180deg, rgba(244,241,236,0.42), rgba(244,241,236,0.18));
  border: 1px solid var(--glass-edge);
  border-radius: 12px;
  font-family: var(--sans); font-size: .88rem; font-weight: 500;
  color: var(--c-ink-2); letter-spacing: .02em;
  opacity: 0; transform: translateY(8px);
  transition: opacity 520ms ease 500ms, transform 520ms ease 500ms;
}
.mobile-menu.is-open .mobile-menu__strip { opacity: 1; transform: translateY(0); }
.mobile-menu__strip strong { color: var(--c-ink); font-weight: 600; }
.mobile-menu__strip-city { margin-left: auto; color: var(--c-ink-3-text); }
.mobile-menu__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-ink-2);
  box-shadow: 0 0 0 2px rgba(107,122,120,0.22);
  position: relative; flex-shrink: 0;
}
.mobile-menu__dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1px solid var(--c-ink-2); opacity: .4;
  animation: mm-dot-pulse 2.2s ease-out infinite;
}
.mobile-menu__strip.is-closed .mobile-menu__dot { background: var(--c-ink-3); box-shadow: 0 0 0 2px rgba(138,137,133,0.20); }
.mobile-menu__strip.is-closed .mobile-menu__dot::after { display: none; }
@keyframes mm-dot-pulse {
  0%   { transform: scale(.6); opacity: .5; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* Glass tiles: Call + Directions */
.mobile-menu__tiles {
  margin-top: .75rem;
  display: grid; grid-template-columns: 1fr 1fr; gap: .75rem;
  opacity: 0; transform: translateY(14px);
  transition: opacity 600ms ease 540ms, transform 600ms ease 540ms;
}
.mobile-menu.is-open .mobile-menu__tiles { opacity: 1; transform: translateY(0); }
.mobile-menu__tile {
  display: flex; flex-direction: column; gap: .4rem;
  padding: .85rem; min-height: 96px;
  background: linear-gradient(180deg, rgba(244,241,236,0.55), rgba(244,241,236,0.25));
  border: 1px solid var(--glass-edge);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 12px 26px -20px rgba(42,46,44,.25);
  color: var(--c-ink); text-decoration: none;
}
.mobile-menu__tile-coin {
  width: 36px; height: 36px; border-radius: 50%;
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.45) 45%, rgba(255,255,255,0.15) 100%),
    linear-gradient(165deg, rgba(166,200,205,0.70), rgba(149,189,195,0.88));
  border: 1px solid rgba(255,255,255,0.78);
  display: flex; align-items: center; justify-content: center;
  color: var(--c-ink);
}
.mobile-menu__tile-coin svg { width: 18px; height: 18px; }
.mobile-menu__tile-kicker {
  font-family: var(--sans); font-weight: 500;
  font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-ink-3-text); margin-top: auto;
}
.mobile-menu__tile-val {
  font-family: var(--serif); font-weight: 300;
  font-size: 1.05rem; color: var(--c-ink); line-height: 1.15;
}

/* Sticky CTA dock */
.mobile-menu__dock {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1rem var(--gutter) calc(.85rem + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(244,241,236,0) 0%, var(--c-foam) 55%);
  pointer-events: none;
}
.mobile-menu__dock > * { pointer-events: auto; }
.mobile-menu__cta {
  display: flex; align-items: center; justify-content: center; gap: .65rem;
  width: 100%; min-height: 60px;
  border-radius: 9999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(214,199,189,0.85) 100%);
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.75), 0 18px 40px -16px rgba(42,46,44,0.40);
  font-family: var(--sans); font-weight: 500; font-size: 1.0625rem;
  color: var(--c-ink); text-decoration: none;
  opacity: 0; transform: translateY(20px);
  transition: opacity 560ms ease 620ms, transform 560ms cubic-bezier(.22,.61,.36,1) 620ms;
}
.mobile-menu.is-open .mobile-menu__cta { opacity: 1; transform: translateY(0); }
.mobile-menu__cta svg { width: 18px; height: 18px; }

@media (prefers-reduced-motion: reduce) {
  .mobile-menu, .mobile-menu *, .mobile-menu::before {
    transition: none !important;
    animation: none !important;
  }
}

@media (min-width: 1100px) {
  .mobile-menu { display: none; }
}

/* ============================================================
   HERO - "Tucked Bloom" combination (client-approved 6/24)
   Larger glass lotus tucked behind the headline; "Open Crown" cream/beige
   background (no blue); framed glass slideshow (frosted thick-white-stroke
   frame + angled second card + slow shimmer + indicator dots). Stacked on
   mobile; 47/53 split with a hairline divider at >=980px.
   ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
  /* Trimmed 9/27 with the landscape slideshow: the tall portrait frame used to
     fill this, and at the old height the section read as half empty. */
  min-height: clamp(520px, 68vh, 680px);
  padding-block: clamp(3rem, 2rem + 4vw, 5.5rem);
  /* The slideshow dots hang below the photo, outside the grid, and their tap
     targets are 44px tall. On phones that left them almost touching the next
     section, so the bottom padding carries the extra here and gives it back at
     the desktop layout, where the dots sit inside the section anyway. */
  padding-bottom: calc(clamp(3rem, 2rem + 4vw, 5.5rem) + 1.5rem);
  /* Open Crown: opaque cream touching the header (covers the body's blue wash
     at the very top - Alex's "no blue" hero) easing into a soft warm beige.
     Per Alex (6/29): more saturated, like the Tucked Bloom mockup, with real
     contrast on the right. So the old near-white wash over the right is gone;
     instead a deeper warm-sand pool sits behind the slideshow (right-center)
     and the soft light is pulled to the LEFT, behind the type. */
  background:
    /* deeper sand pooled on the right, behind the slideshow -> the white glass
       frame and photos now pop against a saturated field */
    radial-gradient(82% 96% at 93% 44%,
      rgba(207,185,151,0.62) 0%, rgba(212,193,164,0.26) 46%, transparent 72%),
    /* gentle light meeting the sand header, kept to the left/top behind the type */
    radial-gradient(78% 62% at 16% 2%,
      rgba(255,252,246,0.55) 0%, transparent 52%),
    linear-gradient(180deg,
      #F7ECDA 0%,
      #EBDABF 32%,
      #E4D1B5 64%,
      #E7DBC8 100%);
}
.hero__grid {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.75rem;
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* --- type column --- */
.hero__type { position: relative; isolation: isolate; }
.hero__eyebrow {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: 1rem; color: var(--c-ink-2);
  display: inline-flex; align-items: center; gap: 0.6em;
  margin-bottom: clamp(1.4rem, 1.1rem + 1vw, 2.1rem);
}
.hero__eyebrow::before { content: ""; width: 34px; height: 1px; background: var(--c-ink-3); }
.hero__title {
  font-family: var(--serif); font-weight: 300;
  line-height: 0.99; letter-spacing: -0.02em; color: var(--c-ink);
}
.hero__title-1, .hero__title-mid, .hero__title-2 { display: block; }
.hero__title-1 { font-size: clamp(2.5rem, 4.7vw, 4.7rem); }
.hero__title-mid { font-style: italic; margin-left: 0.3em; font-size: clamp(2.5rem, 4.7vw, 4.7rem); }
.hero__title-2 { position: relative; font-style: italic; margin-left: 0.65em; font-size: clamp(2.6rem, 5vw, 5rem); }
.hero__title-2-inner { position: relative; display: inline-block; white-space: nowrap; }
.hero__title-2-inner::after {
  content: ""; position: absolute;
  left: 0.04em; right: 0.5em; bottom: -0.1em; height: 2px;
  background: linear-gradient(90deg, var(--c-ink), var(--c-ink-3));
  opacity: 0.5;
  transform: scaleX(0); transform-origin: left center;
}
@media (prefers-reduced-motion: no-preference) {
  .hero__title-2-inner::after { animation: underline-in 1.6s 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__title-2-inner::after { transform: scaleX(1); }
}
@keyframes underline-in { to { transform: scaleX(1); } }
.hero__sub {
  margin-top: clamp(2.4rem, 1.8rem + 1.6vw, 3.4rem);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.6; color: var(--c-ink-2); max-width: 42ch;
}
.hero__sub strong { color: var(--c-ink); font-weight: 500; }
.hero__ctas {
  margin-top: clamp(2rem, 1.5rem + 1.4vw, 2.8rem);
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem;
}
@media (prefers-reduced-motion: no-preference) {
  .hero__ctas .btn-glass-primary { animation: gentle-float 4.5s ease-in-out 1.2s infinite; }
  .hero__ctas .btn-glass-primary:hover {
    transform: translateY(-3px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 24px 46px -15px var(--glass-shadow);
    animation-play-state: paused;
  }
}
@keyframes gentle-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
/* type sits above the tucked lotus */
.hero__eyebrow, .hero__title, .hero__sub, .hero__ctas { position: relative; z-index: 1; }

/* --- larger glass lotus, tucked behind the headline (right) --- */
.hero__lotus {
  position: relative; display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.hero__lotus::before {
  content: ""; position: absolute; inset: -48% -42%; border-radius: 50%; z-index: -1;
  /* Mobile: a brighter, more defined warm-white halo so the glass lotus pops
     instead of getting lost in the cream background fade. Desktop resets this
     to the softer halo below. */
  background: radial-gradient(ellipse at 50% 46%,
    rgba(255,253,249,0.82) 0%,
    rgba(255,251,245,0.46) 26%,
    rgba(255,250,243,0.18) 48%,
    rgba(255,250,243,0.05) 68%,
    transparent 82%);
}
.hero__watermark {
  width: 100%; height: auto;
  /* deeper, layered shadow defines the petal silhouette against the cream so the
     glass lotus reads instead of dissolving into the light field */
  filter:
    drop-shadow(0 20px 38px rgba(104,78,56,0.42))
    drop-shadow(0 6px 12px rgba(120,96,76,0.30))
    drop-shadow(0 1px 2px rgba(255,255,255,0.6));
}
.hero__type .hero__lotus {
  position: absolute; z-index: -1;
  /* nestled beside the headline (tucked behind it on the right), echoing the
     desktop placement - not floating up by the eyebrow */
  top: 8%; right: -4%; width: clamp(150px, 46%, 230px); opacity: 0.97;
}

/* --- slideshow stage (frame + second card behind) --- */
.hero__stage { position: relative; isolation: isolate; margin-top: 0.75rem; }
.hero__stage::before {
  content: ""; position: absolute; z-index: -1; inset: -9% -7%; border-radius: 40px;
  background: radial-gradient(ellipse at 54% 46%,
    rgba(255,252,247,0.5) 0%, rgba(255,250,243,0.2) 42%, rgba(255,250,243,0.05) 64%, transparent 82%);
}
/* The glass frame that used to wrap the slideshow was removed 9/27 at Alex's
   request ("eliminate the frame"). The photo now carries the service tiles'
   lift instead, which is the treatment she pointed at. */
/* real, clickable slideshow dots beneath the photo (built by main.js) */
.hero__dots {
  /* gap 0: each dot is a 44px tap target (below), which already leaves plenty
     of visual space around the 8px dot itself. At 320px six 44px targets plus
     gaps would have run past the content width. */
  position: absolute; left: 0; right: 0; bottom: -2.9rem; z-index: 4;
  display: flex; justify-content: center; align-items: center; gap: 0;
}
.hero__dot {
  /* 44px is the tap-target floor in docs/responsive.md; the visible dot stays
     8px and is centred by the ::before below. */
  position: relative; width: 44px; height: 44px; padding: 0;
  border: 0; background: transparent; cursor: pointer; appearance: none;
}
.hero__dot::before {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(116,115,109,0.42);
  transition: background 240ms ease, transform 240ms ease;
}
.hero__dot.is-active::before { background: var(--c-ink); transform: scale(1.25); }
@media (hover: hover) { .hero__dot:hover::before { background: var(--c-ink-2); } }
.hero__dot:focus-visible { outline: none; }
.hero__dot:focus-visible::before { box-shadow: 0 0 0 2px var(--c-bg, #fff), 0 0 0 4px var(--c-ink); }

/* prev / next arrows over the photo (built by main.js). Kept clearly visible at
   rest so the navigation is discoverable - Alex couldn't tell it was interactive,
   so these don't hide until hover; they just brighten + lift on hover. */
.hero__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; border-radius: 50%;
  color: var(--c-ink); cursor: pointer; appearance: none;
  background: radial-gradient(ellipse 110% 90% at 50% 15%,
    rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.58) 55%, rgba(255,255,255,0.34) 100%);
  border: 1px solid rgba(255,255,255,0.85);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 14px 26px -13px var(--glass-shadow);
  opacity: 0.92;
  transition: opacity 240ms ease, transform 240ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 240ms ease;
}
.hero__nav--prev { left: 0.8rem; }
.hero__nav--next { right: 0.8rem; }
.hero__nav svg { width: 20px; height: 20px; }
@media (hover: hover) {
  .hero__nav:hover {
    opacity: 1;
    transform: translateY(-50%) scale(1.07);
    box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 18px 32px -14px rgba(42,46,44,0.30);
  }
}
.hero__nav:focus-visible {
  opacity: 1; outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 0 0 3px rgba(42,46,44,0.55);
}
/* the carousel region itself shouldn't show a focus ring, only its controls do */
.hero__shot:focus { outline: none; }
.hero__shot:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 3px; }
/* Landscape 3:2 (9/27), the native shape of every slide, so nothing is cropped.
   Borderless now, and lifted the way the service tiles are: bright white
   hairline, inset top highlight, long soft warm shadow. */
.hero__shot {
  position: relative; aspect-ratio: 3/2; border-radius: 22px; overflow: hidden;
  width: 100%;
  border: 1px solid rgba(255,255,255,0.85);
  box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 22px 42px -20px var(--glass-shadow);
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 320ms;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .hero__shot:hover {
    transform: translateY(-4px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 32px 50px -20px var(--glass-shadow);
  }
}
.hero__shot img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  /* keep the photo crisp - the glass is implied by highlights, not blur */
  filter: brightness(1.03) contrast(1.03) saturate(1.02);
}
.hero__slides { position: absolute; inset: 0; }
/* JS slideshow: every slide is stacked; the active one fades in over the rest.
   main.js drives .is-active on a timer and on arrow/dot clicks. */
.hero__slide { opacity: 0; transition: opacity 900ms cubic-bezier(0.4, 0, 0.2, 1); }
.hero__slide.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero__slide { transition: none; }
}
/* glass surface over the sharp photo: top-corner gloss + a bright top highlight */
.hero__shot::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  background:
    radial-gradient(140% 82% at 84% -12%, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.12) 32%, transparent 56%),
    linear-gradient(168deg, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0.1) 14%, transparent 32%);
}
/* soft specular shimmer that drifts slowly across to sell the glass */
.hero__shot::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  background: linear-gradient(116deg, transparent 33%, rgba(255,255,255,0) 41%, rgba(255,255,255,0.34) 49%, rgba(255,255,255,0.06) 56%, transparent 66%);
  background-size: 260% 100%; background-position: 135% 0;
}
@media (prefers-reduced-motion: no-preference) {
  .hero__shot::after { animation: hero-glint 16s ease-in-out 2s infinite; }
}
@keyframes hero-glint { 0%, 16% { background-position: 135% 0; } 58%, 100% { background-position: -35% 0; } }
.hero__photo-caption {
  position: absolute; z-index: 3;
  bottom: 1.1rem; left: 1.1rem;
  display: inline-flex; align-items: center; gap: 0.5em;
  min-height: 44px;
  padding: 0.5em 1em 0.5em 0.85em;
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: 0.9rem; color: var(--c-ink);
  border-radius: var(--r-pill);
  background: radial-gradient(ellipse 110% 90% at 50% 15%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.50) 55%, rgba(255,255,255,0.30) 100%);
  border: 1px solid rgba(255,255,255,0.85);
  backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 14px 26px -13px var(--glass-shadow);
  text-decoration: none;
  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 280ms ease;
}
@media (hover: hover) {
  .hero__photo-caption:hover {
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 18px 32px -14px rgba(42,46,44,0.30);
  }
  .hero__photo-caption:hover svg { opacity: 1; }
}
.hero__photo-caption svg { width: 14px; height: 14px; opacity: 0.7; transition: opacity 200ms ease; }

/* --- hairline-and-lotus divider between type and slideshow (desktop only) ---
   Same mark as the trust and doctor sections, at Alex's request (9/27). */
.hero__rule { display: none; }
/* Heavier than the trust/doctor copies of this mark: those sit on white glass
   panels, while this one sits on the hero's cream field, where the white glass
   at 0.5 all but disappeared. A warm shadow gives it an edge to read against. */
.hero__rule img {
  width: 38px; height: 38px; opacity: 0.9;
  filter: drop-shadow(0 4px 9px rgba(120,96,76,0.38));
}

@media (min-width: 980px) {
  .hero { padding-bottom: clamp(3rem, 2rem + 4vw, 5.5rem); }
  .hero__grid {
    /* Alex, 9/27: make the type side a little smaller and the slideshow side
       bigger (was 55fr / 45fr). */
    grid-template-columns: 45fr minmax(1.75rem, 4vw) 55fr;
    align-items: center; gap: 0;
  }
  .hero__type { padding-right: clamp(1rem, 2vw, 2rem); }
  /* lotus grown large and tucked behind the headline on the right */
  .hero__type .hero__lotus { top: -14%; right: 0; width: clamp(300px, 30vw, 430px); }
  /* desktop keeps the softer halo (the large lotus already reads on the Open
     Crown background; the brighter mobile halo would be too much at this size) */
  .hero__lotus::before {
    /* tight, faint warm glow right at the petals only - just enough lift for the
       glass. The contrast comes from the deeper overall field + the petal shadow,
       NOT a darkened ring (which read as a big disc). */
    background: radial-gradient(ellipse at 50% 46%,
      rgba(255,252,247,0.30) 0%,
      rgba(255,251,245,0.10) 34%,
      transparent 56%);
  }
  .hero__rule {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    align-self: stretch; gap: 1rem;
  }
  .hero__rule::before, .hero__rule::after {
    content: ""; display: block; flex: 1; width: 1px;
    background: linear-gradient(180deg, transparent, rgba(42,46,44,0.15), transparent);
  }
  .hero__stage { margin-top: 0; }
}

/* ============================================================
   TRUST T3 - Asymmetric spread
   ============================================================ */
.trust {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: clamp(5rem, 3rem + 5vw, 8rem);
  /* Warm transition out of the hero: carry the hero's base cream (#E7DBC8) down
     through the top of this section and fade it out, so the body wash's cool
     pearl/aqua band (which the opaque hero sits over) never shows as a grayish-
     blue seam right under the hero. By the time it clears, the wash is warm sand. */
  background: linear-gradient(180deg,
    #E7DBC8 0%,
    rgba(231, 219, 200, 0.92) 90px,
    rgba(231, 219, 200, 0.50) 240px,
    rgba(231, 219, 200, 0) 460px);
}
.trust::before {
  content: "";
  position: absolute; left: 50%; top: 0;
  transform: translateX(-50%);
  width: min(var(--container-wide), 100% - var(--gutter) * 2);
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(42,46,44,0.12) 50%, transparent 100%);
  z-index: 1;
}
.trust__anchor-lotus {
  position: absolute;
  top: 6%; left: -8%;
  width: clamp(360px, 50vw, 700px);
  height: auto;
  opacity: 0.05;
  pointer-events: none;
  z-index: 1;
}
.trust__inner {
  position: relative; z-index: 2;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.trust__eyebrow {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: 1.0625rem;
  color: var(--c-ink-2);
  display: inline-flex; align-items: baseline; gap: 0.7em;
  margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
}
.trust__eyebrow::before {
  content: ""; display: inline-block;
  width: 40px; height: 1px;
  background: var(--c-ink-3);
  align-self: center;
}
.trust__spread {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(3rem, 2rem + 3vw, 5rem);
}
.trust__feature { max-width: 720px; position: relative; }
.trust__feature-num {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: clamp(7rem, 16vw, 13rem);
  height: clamp(7rem, 16vw, 13rem);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.55) 40%, rgba(255,255,255,0.20) 80%, rgba(255,255,255,0.40) 100%),
    linear-gradient(165deg, rgba(203,182,163,0.62), rgba(201,192,188,0.78));
  border: 1px solid rgba(255,255,255,0.90);
  box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 30px 60px -22px var(--glass-shadow);
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(2.75rem, 1.5rem + 4vw, 5rem);
  color: var(--c-ink);
  letter-spacing: -0.04em;
  margin-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
}
.trust__feature-lede {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(2rem, 1.25rem + 3vw, 3.75rem);
  line-height: 1.05; letter-spacing: -0.022em;
  color: var(--c-ink);
  max-width: 18ch;
  margin-bottom: clamp(1.25rem, 1rem + 1vw, 2rem);
}
.trust__feature-lede em { font-style: italic; }
.trust__feature-lede .accent {
  background: linear-gradient(95deg, var(--c-ink) 0%, var(--c-ink) 55%, rgba(107,122,120,0.85) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.trust__feature-tail {
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.6;
  color: var(--c-ink-2);
  max-width: 44ch;
}
.trust__divider, .dr__divider, .team-profile__divider { display: none; }
.trust__supports {
  display: flex; flex-direction: column;
  gap: clamp(1.5rem, 1rem + 1vw, 2rem);
}
.trust__support {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1rem, 0.5rem + 1vw, 1.75rem);
  align-items: start;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem) clamp(1rem, 0.5rem + 1vw, 1.5rem);
  border-radius: 16px;
  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1), background 280ms;
  opacity: 0;
  transform: translateY(12px);
}
@media (prefers-reduced-motion: no-preference) {
  .trust__support { animation: support-in 700ms cubic-bezier(0.16, 1, 0.3, 1) forwards; }
  .trust__support:nth-child(1) { animation-delay: 0.15s; }
  .trust__support:nth-child(2) { animation-delay: 0.30s; }
  .trust__support:nth-child(3) { animation-delay: 0.45s; }
  .trust__support:hover {
    background: rgba(255,255,255,0.32);
    transform: translateX(3px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .trust__support { opacity: 1; transform: none; }
}
@keyframes support-in {
  to { opacity: 1; transform: translateY(0); }
}
.trust__support-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: clamp(56px, 5.4vw, 76px);
  height: clamp(56px, 5.4vw, 76px);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,0.90) 0%, rgba(255,255,255,0.45) 40%, rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.35) 100%),
    linear-gradient(165deg, rgba(166,200,205,0.78), rgba(149,189,195,0.92));
  border: 1px solid rgba(255,255,255,0.88);
  box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 10px 20px -9px var(--glass-shadow);
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.125rem, 0.6rem + 1vw, 1.5rem);
  color: var(--c-ink);
  letter-spacing: -0.02em;
  flex-shrink: 0;
}
/* Cadence: subtle descent across the three supports so the column
   doesn't read as a stamped repeat. Coin shrinks, surface alternates,
   lede steps down. */
.trust__support:nth-child(2) .trust__support-num {
  width: clamp(52px, 5vw, 70px); height: clamp(52px, 5vw, 70px);
  font-size: clamp(1.0625rem, 0.55rem + 1vw, 1.4375rem);
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,0.90) 0%, rgba(255,255,255,0.45) 40%, rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.35) 100%),
    linear-gradient(165deg, rgba(214,199,189,0.70), rgba(214,199,189,0.85));
}
.trust__support:nth-child(3) .trust__support-num {
  width: clamp(48px, 4.6vw, 64px); height: clamp(48px, 4.6vw, 64px);
  font-size: clamp(1rem, 0.5rem + 0.85vw, 1.3125rem);
}
.trust__support-body { padding-top: 0.15rem; }
.trust__support-lede {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(1.3125rem, 1rem + 1.1vw, 1.8125rem);
  line-height: 1.2;
  color: var(--c-ink);
  margin-bottom: 0.4em;
}
.trust__support:nth-child(2) .trust__support-lede {
  font-size: clamp(1.25rem, 1rem + 1vw, 1.6875rem);
}
.trust__support:nth-child(3) .trust__support-lede {
  font-size: clamp(1.1875rem, 1rem + 0.85vw, 1.5625rem);
}
.trust__support-tail {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--c-ink-2);
  max-width: 42ch;
}
@media (min-width: 900px) {
  .trust__spread {
    grid-template-columns: 1.05fr auto 1fr;
    gap: clamp(2.5rem, 2rem + 2vw, 4rem);
    align-items: start;
  }
  /* .dr__divider is the same mark, repeated beside her portrait at Alex's
     request, so the two stay identical by sharing these rules. */
  .trust__divider, .dr__divider, .team-profile__divider {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    align-self: stretch;
    gap: 1rem;
    padding-top: clamp(4rem, 2rem + 4vw, 6rem);
  }
  .trust__divider::before, .trust__divider::after,
  .dr__divider::before, .dr__divider::after,
  .team-profile__divider::before, .team-profile__divider::after {
    content: ""; display: block;
    flex: 1; width: 1px;
    background: linear-gradient(180deg, transparent, rgba(42,46,44,0.15), transparent);
  }
  .trust__divider img, .dr__divider img, .team-profile__divider img {
    width: 32px; height: 32px;
    opacity: 0.5;
    filter: drop-shadow(0 4px 8px rgba(255,255,255,0.4));
  }
}
@media (min-width: 1100px) {
  /* Break the supports' shared left edge so the column reads as
     editorial rhythm, not a stamped list. Uses margin so it composes
     with the support-in animation's transform without overriding it. */
  .trust__support:nth-child(2) { margin-left: clamp(0.5rem, 1.5vw, 1.75rem); }
  .trust__support:nth-child(3) { margin-left: clamp(1rem, 3vw, 3.25rem); }
}

/* ============================================================
   SERVICES S1 chips
   ============================================================ */
.services {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: clamp(5rem, 3rem + 5vw, 8rem);
  /* Raised foam-glass shelf: a brighter white plane that feathers in and out of
     the sand wash, so the page reads sand -> foam -> sand (light rhythm, never dark). */
  background: linear-gradient(180deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.40) 12%,
    rgba(255,255,255,0.44) 88%,
    rgba(255,255,255,0) 100%);
}
.services::before {
  content: "";
  position: absolute; left: 50%; top: 0;
  transform: translateX(-50%);
  width: min(var(--container-wide), 100% - var(--gutter) * 2);
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(42,46,44,0.12) 50%, transparent 100%);
  z-index: 1;
}
.services__inner {
  position: relative; z-index: 2;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.services__head { margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); max-width: 56rem; }
.services__eyebrow {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: 1.0625rem;
  color: var(--c-ink-2);
  display: inline-flex; align-items: baseline; gap: 0.7em;
  margin-bottom: 1.25rem;
}
.services__eyebrow::before {
  content: ""; display: inline-block;
  width: 40px; height: 1px;
  background: var(--c-ink-3);
  align-self: center;
}
.services__title {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
  line-height: 1.05; letter-spacing: -0.02em;
  color: var(--c-ink);
}
.services__title em { font-style: italic; }
.services__title-1, .services__title-2 { display: block; }
.services__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.25rem, 1rem + 1vw, 1.75rem);
}
.bucket {
  position: relative;
  padding: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
  border-radius: 22px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255,255,255,0.85), transparent 70%),
    linear-gradient(160deg, rgba(255,255,255,0.55), rgba(203,182,163,0.58));
  backdrop-filter: blur(20px) saturate(1.35);
  -webkit-backdrop-filter: blur(20px) saturate(1.35);
  border: 1px solid rgba(255,255,255,0.85);
  box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 22px 42px -20px var(--glass-shadow);
  display: flex; flex-direction: column;
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 320ms;
}
.bucket:nth-child(2) {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255,255,255,0.85), transparent 70%),
    linear-gradient(160deg, rgba(255,255,255,0.55), rgba(166,200,205,0.50));
}
.bucket:nth-child(3) {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255,255,255,0.85), transparent 70%),
    linear-gradient(160deg, rgba(255,255,255,0.55), rgba(203,182,163,0.58));
}
.bucket:nth-child(4) {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255,255,255,0.85), transparent 70%),
    linear-gradient(160deg, rgba(255,255,255,0.55), rgba(166,200,205,0.50));
}
@media (prefers-reduced-motion: no-preference) {
  .bucket:hover {
    transform: translateY(-4px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 32px 50px -20px var(--glass-shadow);
  }
}
.bucket__icon {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.55) 40%, rgba(255,255,255,0.20) 80%, rgba(255,255,255,0.40) 100%),
    linear-gradient(165deg, rgba(214,199,189,0.45), rgba(201,192,188,0.65));
  border: 1px solid rgba(255,255,255,0.75);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 8px 14px -8px rgba(42,46,44,0.22);
  color: var(--c-ink);
  margin-bottom: clamp(1rem, 0.75rem + 0.75vw, 1.5rem);
}
.bucket__icon svg { width: 22px; height: 22px; }
/* Tone-match the icon coin and chips to the bucket surface so
   warmth/aqua buckets read as a single material, not mismatched. */
.bucket:nth-child(2n) .bucket__icon {
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.55) 40%, rgba(255,255,255,0.20) 80%, rgba(255,255,255,0.40) 100%),
    linear-gradient(165deg, rgba(166,200,205,0.60), rgba(149,189,195,0.82));
}
.bucket:nth-child(2n) .bucket__list a {
  background:
    radial-gradient(ellipse 110% 90% at 50% 15%, rgba(255,255,255,0.90) 0%, rgba(255,255,255,0.45) 50%, rgba(255,255,255,0.28) 100%),
    linear-gradient(160deg, rgba(166,200,205,0.34), rgba(149,189,195,0.54));
}
.bucket__cat {
  font-family: var(--sans);
  font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--c-ink-2);
  font-weight: 500;
  margin-bottom: 0.5rem;
}
.bucket__lede {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(1.5rem, 1rem + 1.5vw, 2rem);
  line-height: 1.1;
  color: var(--c-ink);
  margin-bottom: clamp(1rem, 0.75rem + 0.75vw, 1.5rem);
  max-width: 18ch;
}
.bucket__list {
  padding-top: 1rem;
  border-top: 1px solid rgba(42,46,44,0.10);
  display: flex; flex-wrap: wrap; gap: 0.5rem;
}
.bucket__list a {
  display: inline-flex; align-items: center; gap: 0.4em;
  padding: 0.65em 1.1em;
  min-height: 44px;
  font-size: 1rem;
  color: var(--c-ink);
  border-radius: var(--r-pill);
  background:
    radial-gradient(ellipse 110% 90% at 50% 15%, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.40) 50%, rgba(255,255,255,0.25) 100%),
    linear-gradient(160deg, rgba(214,199,189,0.30), rgba(201,192,188,0.40));
  border: 1px solid rgba(255,255,255,0.65);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 4px 10px -5px rgba(42,46,44,0.14);
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 240ms;
}
.bucket__list a::after {
  content: "\2192";
  font-family: var(--sans);
  opacity: 0.55;
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1), opacity 240ms;
}
@media (prefers-reduced-motion: no-preference) {
  .bucket__list a:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 12px 20px -8px rgba(42,46,44,0.22);
  }
  .bucket__list a:hover::after { transform: translateX(3px); opacity: 1; }
}
.services__footer {
  margin-top: clamp(2.5rem, 1.5rem + 2vw, 4rem);
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(1rem, 0.75rem + 1vw, 1.5rem);
  text-align: center;
}
.services__emergency {
  display: inline-flex; align-items: center; gap: 0.5em;
  min-height: 44px;
  padding: 0.5em 1.2em;
  font-family: var(--sans); font-size: 1rem; font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--c-ink);
  border-radius: var(--r-pill);
  background: linear-gradient(160deg, rgba(214,199,189,0.42), rgba(201,192,188,0.58));
  border: 1px solid rgba(255,255,255,0.70);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 6px 14px -8px rgba(42,46,44,0.18);
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 240ms;
}
.services__emergency svg { width: 17px; height: 17px; flex-shrink: 0; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .services__emergency:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 14px 24px -10px rgba(42,46,44,0.24);
  }
}
.services__all {
  display: inline-flex; align-items: center;
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: 1.1875rem;
  color: var(--c-ink);
  padding: 0.55em 0.1em 0.4em;
  min-height: 44px;
  background-image: linear-gradient(var(--c-ink), var(--c-ink)), linear-gradient(var(--c-ink-3), var(--c-ink-3));
  background-size: 0% 1px, 100% 1px;
  background-position: 0 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 360ms cubic-bezier(0.16, 1, 0.3, 1);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .services__all:hover { background-size: 100% 1px, 100% 1px; }
}
@media (min-width: 700px) { .services__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) {
  .services__grid {
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
  }
  /* Valley stagger: the middle bucket settles below the two outer ones. */
  .bucket:nth-child(2) { margin-top: 2.75rem; }
  .bucket:nth-child(3) { margin-top: 0; }
}

/* ============================================================
   DR. CUTTER DC1 hybrid
   ============================================================ */
.dr {
  position: relative; isolation: isolate; overflow: visible;
  padding-top: clamp(5rem, 3rem + 5vw, 8rem);
  padding-bottom: clamp(5rem, 3rem + 5vw, 8rem);
  /* A faint sun-glint on the sand - her phrase "the reflection of the sun on the
     sand." One soft warm highlight, top-right, behind the portrait. */
  background: radial-gradient(ellipse 48% 42% at 84% 14%,
    rgba(255,251,242,0.60), rgba(255,251,242,0.18) 42%, transparent 64%);
}
/* Section-break: the same single hairline as every other section seam
   (.trust / .services / .voices / .cta). */
.dr::before {
  content: "";
  position: absolute; left: 50%; top: 0;
  transform: translateX(-50%);
  width: min(var(--container-wide), 100% - var(--gutter) * 2);
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(42,46,44,0.12) 50%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}
.dr__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 1.5rem + 2vw, 3rem);
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.dr__eyebrow {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: 1.0625rem;
  color: var(--c-ink-2);
  display: inline-flex; align-items: baseline; gap: 0.7em;
  margin-bottom: 1.25rem;
}
.dr__eyebrow::before {
  content: ""; display: inline-block;
  width: 40px; height: 1px;
  background: var(--c-ink-3);
  align-self: center;
}
.dr__name {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
  line-height: 1.05; letter-spacing: -0.022em;
  color: var(--c-ink);
  margin-bottom: 0.4em;
}
.dr__name em { font-style: italic; color: var(--c-ink-2); }
.dr__role {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: 1rem;
  color: var(--c-ink-3-text);
  margin-bottom: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
}
.dr__bio {
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.65;
  color: var(--c-ink-2);
  max-width: 48ch;
}
.dr__bio p + p { margin-top: 1em; }
.dr__bio strong { color: var(--c-ink); font-weight: 500; }
.dr__pullquote {
  position: relative;
  margin-top: clamp(2.5rem, 1.5rem + 2vw, 3.5rem);
  padding-left: 1.5rem;
  /* wider so the quote settles to ~3-4 lines instead of wrapping to six */
  max-width: 60ch;
}
.dr__pullquote::before {
  content: "";
  position: absolute; top: 0.25em; bottom: 0.25em; left: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--c-ink) 0%, var(--c-ink-2) 60%, transparent 100%);
}
.dr__pullquote p {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(1.375rem, 1rem + 1.5vw, 1.875rem);
  line-height: 1.25; letter-spacing: -0.005em;
  color: var(--c-ink);
}
/* The whole photo, never cropped (Alex, 9/10): no imposed aspect-ratio or
   height cap, so the frame is simply the image at its own 2:3. */
/* Lifted like the service tiles (Alex, 9/27: make her photo "pop" the way the
   tiles do), which is the same treatment the hero slideshow now carries. */
.dr__photo {
  position: relative;
  margin-inline: 0;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.85);
  box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 22px 42px -20px var(--glass-shadow);
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 320ms;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .dr__photo:hover {
    transform: translateY(-4px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 32px 50px -20px var(--glass-shadow);
  }
}
.dr__photo img { display: block; width: 100%; height: auto; }
@media (min-width: 900px) {
  .dr__grid {
    /* the divider takes an auto track, so the gap now appears twice; it is
       trimmed from the old two-column value to keep the same overall air */
    grid-template-columns: 1.4fr auto 1fr;
    gap: clamp(1.5rem, 0.5rem + 2.5vw, 3.25rem);
    align-items: start;
  }
  .dr__type { padding-block: clamp(1.5rem, 1rem + 1vw, 2.5rem); }
  .dr__divider { padding-top: clamp(1.5rem, 1rem + 1vw, 2.5rem); }
  .dr__photo {
    margin-top: clamp(1.5rem, 1rem + 1vw, 2.5rem);
    width: 100%;
    max-width: 600px;
  }
}

/* ============================================================
   VOICES V8
   ============================================================ */
.voices {
  position: relative; isolation: isolate;
  padding-block: clamp(5rem, 3rem + 5vw, 8rem);
  /* Tide band: the water that opens the page returns once, low and soft, before
     the sand footer - a feathered sea-glass plane that breaks the taupe run. */
  background: linear-gradient(180deg,
    rgba(199,219,220,0) 0%,
    rgba(201,221,222,0.55) 15%,
    rgba(214,228,229,0.50) 85%,
    rgba(199,219,220,0) 100%);
}
.voices::before {
  content: "";
  position: absolute; left: 50%; top: 0;
  transform: translateX(-50%);
  width: min(var(--container-wide), 100% - var(--gutter) * 2);
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(42,46,44,0.12) 50%, transparent 100%);
  z-index: 1;
}
.voices__inner {
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
  text-align: center;
}
.voices__eyebrow {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: 1.0625rem;
  color: var(--c-ink-2);
  margin-bottom: clamp(1.5rem, 1rem + 1vw, 2.5rem);
}
.voices__quote {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(2rem, 1.25rem + 3.5vw, 4.5rem);
  line-height: 1.1; letter-spacing: -0.018em;
  color: var(--c-ink);
  max-width: 22ch;
  margin: 0 auto clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
}
.voices__stars {
  font-size: clamp(1.25rem, 1rem + 0.75vw, 1.625rem);
  color: var(--c-ink-2); letter-spacing: 0.06em;
  margin-bottom: 0.5rem;
}
.voices__cite {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: 1.0625rem;
  color: var(--c-ink-2);
}
.voices__stats {
  margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem);
  display: inline-flex; align-items: baseline; gap: 1rem;
  padding: 0.85em 1.5em;
  border-radius: var(--r-pill);
  background:
    radial-gradient(ellipse 110% 90% at 50% 15%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.50) 50%, rgba(255,255,255,0.30) 100%),
    linear-gradient(160deg, rgba(203,182,163,0.42), rgba(201,192,188,0.58));
  border: 1px solid rgba(255,255,255,0.85);
  box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 14px 26px -13px var(--glass-shadow);
}
.voices__stats-score {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.875rem, 1.25rem + 1.25vw, 2.375rem);
  color: var(--c-ink); letter-spacing: -0.025em;
  line-height: 1;
}
.voices__stats-meta {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: 1rem; color: var(--c-ink-2);
}
.marquee {
  margin-top: clamp(3rem, 2rem + 3vw, 5rem);
  position: relative;
  overflow: hidden;
  padding-block: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.marquee__track {
  display: flex; gap: 1rem;
  width: max-content;
}
/* The second run of chips exists only so the loop has no seam. It is hidden
   from screen readers (the first run is read once) and is laid out as if the
   wrapper were not there. */
.marquee__dup { display: contents; }
@media (prefers-reduced-motion: no-preference) {
  .marquee__track { animation: marquee 60s linear infinite; }
  .marquee:hover .marquee__track { animation-play-state: paused; }
}
/* With motion reduced the strip does not move, and it used to sit frozen with
   only the first three reviews in view and the fourth cut in half. Here the
   five reviews wrap into rows instead, each one whole. */
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .marquee__track { width: auto; flex-wrap: wrap; justify-content: center; padding-inline: var(--gutter); }
  /* A chip may fold its name under its quote on a narrow phone, so the longest
     one still fits the screen instead of pushing the page sideways. */
  .marquee__chip { white-space: normal; flex-wrap: wrap; justify-content: center; max-width: 100%; row-gap: 0.25em; }
  .marquee__chip-name, .marquee__chip-stars { white-space: nowrap; flex-shrink: 0; }
  .marquee__dup { display: none; }
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.marquee__chip {
  display: inline-flex; align-items: center; gap: 0.85em;
  padding: 0.75em 1.25em;
  border-radius: var(--r-pill);
  background:
    radial-gradient(ellipse 110% 90% at 50% 15%, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.48) 50%, rgba(255,255,255,0.30) 100%),
    linear-gradient(160deg, rgba(255,255,255,0.55), rgba(203,182,163,0.52));
  border: 1px solid rgba(255,255,255,0.82);
  box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 6px 14px -5px var(--glass-shadow-soft);
  white-space: nowrap;
}
.marquee__chip:nth-child(2n) {
  background:
    radial-gradient(ellipse 110% 90% at 50% 15%, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.48) 50%, rgba(255,255,255,0.30) 100%),
    linear-gradient(160deg, rgba(255,255,255,0.55), rgba(166,200,205,0.50));
}
.marquee__chip-stars { font-size: 0.75rem; color: var(--c-ink-2); letter-spacing: 0.05em; }
.marquee__chip-text {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: 1rem; color: var(--c-ink);
}
.marquee__chip-name {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: 0.875rem; color: var(--c-ink-3-text);
  padding-left: 0.5em; border-left: 1px solid rgba(42,46,44,0.20);
  margin-left: 0.25em;
}
/* Motion reduced, on a phone: the name folds onto its own line under the quote,
   where the divider would only lead an otherwise centered line. */
@media (prefers-reduced-motion: reduce) {
  .marquee__chip-name { padding-left: 0; border-left: 0; margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 520px) {
  .marquee__chip-name { padding-left: 0.5em; border-left: 1px solid rgba(42,46,44,0.20); margin-left: 0.25em; }
}
.voices__readall {
  display: inline-flex; align-items: center;
  margin-top: clamp(2rem, 1.5rem + 1.5vw, 2.75rem);
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: 1.0625rem;
  color: var(--c-ink);
  padding: 0.7em 0.1em 0.55em;
  min-height: 44px;
  background-image: linear-gradient(var(--c-ink), var(--c-ink)), linear-gradient(var(--c-ink-3), var(--c-ink-3));
  background-size: 0% 1px, 100% 1px;
  background-position: 0 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 360ms cubic-bezier(0.16, 1, 0.3, 1);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .voices__readall:hover { background-size: 100% 1px, 100% 1px; }
}

/* ============================================================
   CTA C2
   ============================================================ */
.cta {
  position: relative; isolation: isolate;
  padding-block: clamp(5rem, 3rem + 5vw, 8rem);
  background: transparent; /* float on the body beach wash */
}
.cta::before {
  content: "";
  position: absolute; left: 50%; top: 0;
  transform: translateX(-50%);
  width: min(var(--container-wide), 100% - var(--gutter) * 2);
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(42,46,44,0.12) 50%, transparent 100%);
  z-index: 1;
}
.cta__inner {
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  align-items: center;
}
.cta__copy { max-width: 32rem; }
.cta__eyebrow {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: 1.0625rem;
  color: var(--c-ink-2);
  display: inline-flex; align-items: baseline; gap: 0.7em;
  margin-bottom: 1.25rem;
}
.cta__eyebrow::before {
  content: ""; display: inline-block;
  width: 40px; height: 1px;
  background: var(--c-ink-3);
  align-self: center;
}
.cta__h2 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(2.25rem, 1.5rem + 3vw, 4rem);
  line-height: 1.0; letter-spacing: -0.025em;
  color: var(--c-ink);
  margin-bottom: clamp(1.25rem, 1rem + 1vw, 1.75rem);
}
.cta__h2 em { font-style: italic; }
.cta__sub {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem);
  line-height: 1.45;
  color: var(--c-ink-2);
  margin-bottom: clamp(2rem, 1.5rem + 1.5vw, 2.75rem);
}
.cta__actions {
  display: flex; flex-wrap: wrap;
  align-items: center; gap: 1.5rem;
}
.cta__phone {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: 1.25rem;
  color: var(--c-ink);
  padding: 0.6em 0.1em 0.45em;
  min-height: 44px;
  background-image: linear-gradient(var(--c-ink), var(--c-ink)), linear-gradient(var(--c-ink-3), var(--c-ink-3));
  background-size: 0% 1px, 100% 1px;
  background-position: 0 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 360ms cubic-bezier(0.16, 1, 0.3, 1);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .cta__phone:hover { background-size: 100% 1px, 100% 1px; }
  .cta__phone:hover svg { opacity: 1; }
}
.cta__phone svg { width: 20px; height: 20px; opacity: 0.7; transition: opacity 240ms ease; }
.info-card {
  padding: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
  border-radius: 22px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255,255,255,0.88), transparent 70%),
    linear-gradient(160deg, rgba(255,255,255,0.58), rgba(203,182,163,0.60));
  backdrop-filter: blur(20px) saturate(1.35);
  -webkit-backdrop-filter: blur(20px) saturate(1.35);
  border: 1px solid rgba(255,255,255,0.85);
  box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 24px 46px -20px var(--glass-shadow);
  position: relative;
  overflow: hidden;
}
.info-card::before {
  content: ""; position: absolute;
  bottom: -15%; right: -12%;
  width: 65%; aspect-ratio: 1;
  background:
    radial-gradient(circle at 50% 50%, rgba(214,199,189,0.45) 0%, transparent 65%),
    url('../images/lotus-glass.svg') no-repeat center / 72%;
  opacity: 0.55;
  pointer-events: none;
  filter: drop-shadow(0 4px 12px rgba(255,255,255,0.4));
}
.info-card > * { position: relative; }
.info-card__title {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: 1.5rem;
  color: var(--c-ink);
  margin-bottom: 1.25rem;
}
.info-row {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85em;
  padding-block: 0.85rem;
  align-items: start;
}
.info-row + .info-row::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 55%;
  height: 1px;
  background: linear-gradient(90deg, rgba(42,46,44,0.14) 0%, rgba(42,46,44,0.14) 70%, transparent 100%);
}
.info-row:first-of-type { padding-top: 0; }
.info-row__coin {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.55) 40%, rgba(255,255,255,0.20) 80%, rgba(255,255,255,0.40) 100%),
    linear-gradient(165deg, rgba(214,199,189,0.45), rgba(201,192,188,0.65));
  border: 1px solid rgba(255,255,255,0.75);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 6px 12px -6px rgba(42,46,44,0.18);
  flex-shrink: 0;
}
.info-row__coin svg { width: 18px; height: 18px; color: var(--c-ink); }
.info-row__body {
  padding-top: 0.15em;
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: 1.0625rem;
  color: var(--c-ink-2);
}
.info-row__body strong { display: block; color: var(--c-ink); font-weight: 400; font-style: normal; }
.info-row__body a { display: inline-block; transition: text-decoration-color 200ms; }
.info-row__body a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
@media (min-width: 900px) {
  .cta__inner { grid-template-columns: 1.15fr 1fr; }
}

/* Compact CTA - interior pages drop the info card (it duplicates the footer)
   and keep just the conversion beat, centered as a deliberate closing moment. */
.cta--compact .cta__inner {
  grid-template-columns: 1fr;
  max-width: 46rem;
  justify-items: center;
  text-align: center;
}
.cta--compact .cta__copy { max-width: 40rem; }
.cta--compact .cta__eyebrow { justify-content: center; }
.cta--compact .cta__actions { justify-content: center; }

/* ============================================================
   FOOTER F4
   ============================================================ */
.site-footer {
  position: relative; isolation: isolate; overflow: hidden;
  /* A full-height footer wash: strong foam-white at the top carrying well down,
     resolving into warm cream at the base. White-to-cream only - no blue. */
  background: linear-gradient(180deg,
    rgba(255,255,255,0.64) 0%,
    rgba(255,255,255,0.44) 22%,
    rgba(250,244,236,0.36) 50%,
    rgba(244,237,228,0.38) 76%,
    rgba(236,226,212,0.42) 100%);
  color: var(--c-ink);
}
/* Mobile-first: the lotus blooms larger and lower so the tall, narrow footer
   still feels like a designed room rather than a stack of text. */
.site-footer::before {
  content: ""; position: absolute;
  bottom: -2%; right: -8%;
  width: 70%; aspect-ratio: 1;
  /* Lotus sits ON TOP; a soft aqua glow angled up from the bottom-right corner
     sits BEHIND it (layer order matters - earlier layers paint on top). No white
     core, so the glass reads as glass instead of a glowing blob. */
  background:
    url('../images/lotus-glass.svg') no-repeat center / 64%,
    linear-gradient(315deg,
      rgba(176,201,204,0.50) 0%,
      rgba(176,201,204,0.20) 38%,
      transparent 66%);
  opacity: 0.9;
  pointer-events: none;
  z-index: 0;
}
@media (min-width: 960px) {
  .site-footer::before {
    bottom: -8%; right: -3%;
    width: 40%;
    opacity: 0.92;
  }
}
.site-footer__inner {
  position: relative; z-index: 1;
  max-width: var(--container-wide); margin-inline: auto;
  padding: clamp(3.5rem, 2.5rem + 3vw, 5.5rem) var(--gutter) clamp(2.5rem, 2rem + 2vw, 3.5rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 2rem + 2vw, 4rem);
}
/* Identity panel: a frosted warmth/sea-glass card so the WHITE-glass lockup
   has a colored backdrop to read against (matching the brand-sheet Warmth tile)
   while the footer overall stays light and calm. */
.f-brand {
  position: relative;
  padding: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
  border-radius: 22px;
  background:
    radial-gradient(ellipse 90% 60% at 28% 12%, rgba(255,255,255,0.40), transparent 65%),
    linear-gradient(155deg, rgba(166,200,205,0.62), rgba(201,192,188,0.92));
  border: 1px solid rgba(255,255,255,0.60);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 22px 44px -22px var(--glass-shadow);
  -webkit-backdrop-filter: blur(10px) saturate(1.25);
  backdrop-filter: blur(10px) saturate(1.25);
}
.f-lede__lockup { display: inline-block; margin-bottom: clamp(1.25rem, 1rem + 1vw, 2rem); }
.f-lede__lockup svg,
.f-lede__lockup img { height: clamp(120px, 14vw, 180px); width: auto; }
.f-lede__closer {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
  line-height: 1.05; letter-spacing: -0.02em;
  color: var(--c-ink);
  margin-bottom: clamp(1rem, 0.75rem + 0.75vw, 1.5rem);
  max-width: 16ch;
}
/* The tagline echo, now on the light sand footer: "done differently"
   lifts in deep sea-glass - the touch of blue against the sand. */
.f-lede__closer em { font-style: italic; color: var(--c-water-ink); }
.f-lede__city {
  font-family: var(--serif); font-weight: 300;
  /* Not --c-ink-3: that tertiary ink is built for the light page ground and
     measures 2.84:1 here, because this line sits on the mid-tone glass panel
     rather than on foam. --c-ink-2 still only reaches 4.26:1 on the same
     pixels, so this steps one further. Pre-existing, caught in the 2026-08
     contrast pass. */
  font-size: 1rem; color: #3F4F4C;
}
.f-col__heading {
  font-family: var(--serif); font-weight: 300;
  font-size: 0.875rem;
  color: var(--c-water-ink); /* deep sea-glass label */
  letter-spacing: 0.02em;
  margin-bottom: 0.85rem;
  display: inline-flex; align-items: baseline; gap: 0.6em;
}
.f-col__heading::before {
  content: ""; display: inline-block;
  width: 24px; height: 1px;
  background: rgba(95, 142, 149, 0.55); /* sea-glass hairline */
  align-self: center;
}
.f-contact { display: flex; flex-direction: column; gap: 0.45em; align-items: flex-start; }
.f-contact a {
  position: relative;
  display: inline-block;
  font-family: var(--serif); font-weight: 300;
  font-size: 1.0625rem; color: var(--c-ink); line-height: 1.4;
  padding: 0.5em 0;
  min-height: 44px;
  transition: color 200ms;
}
.f-contact a::after {
  content: ""; position: absolute;
  left: 0; right: 0; bottom: 0.45em;
  height: 1px; background: var(--c-water-deep); /* sea-glass */
  transform: scaleX(0); transform-origin: left;
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
.f-contact a strong { font-weight: 500; color: var(--c-ink); }
.f-contact a:hover { color: var(--c-water-ink); }
.f-contact a:hover::after,
.f-contact a:focus-visible::after { transform: scaleX(1); }
/* Mobile-first: hours read as two columns of dotted-leader rows, matching Explore. */
.f-hours {
  list-style: none; margin: 0; padding: 0;
  /* One column on the narrowest screens: at 320px (an iPhone in Display Zoom,
     which older patients use) two columns needed 312px of a 280px box, so the
     right-hand times ran off the edge. Two columns from 360px, as before. */
  display: grid; grid-template-columns: 1fr;
  gap: 0.15em clamp(1rem, 0.5rem + 2vw, 1.75rem);
}
@media (min-width: 360px) { .f-hours { grid-template-columns: 1fr 1fr; } }
.f-hrow {
  display: flex; align-items: baseline; gap: 0.5em;
  font-family: var(--serif); font-weight: 300;
  font-size: 1rem; line-height: 1.5;
  padding: 0.3em 0;
}
.f-hrow__day { color: var(--c-ink-2); white-space: nowrap; }
.f-hrow__dots {
  flex: 1 1 auto;
  align-self: center;
  height: 0;
  border-bottom: 1px dotted rgba(42,46,44,0.28);
  transform: translateY(0.1em);
}
.f-hrow__time { color: var(--c-ink); white-space: nowrap; }
.f-hours__fri {
  /* 16px on phones: this is body copy, and the practice sees a lot of older
     patients (docs/responsive.md sets 16px as the mobile floor). It drops back
     to a footnote size once there is room, at 768px. */
  margin-top: 0.75em;
  font-family: var(--sans); font-weight: 400;
  font-size: 1rem; letter-spacing: 0.01em;
  color: var(--c-ink-3-text);
}
@media (min-width: 768px) { .f-hours__fri { font-size: 0.8125rem; } }
/* Mobile-first: Explore reads as a designed 2-column block, not a tall wrap. */
.f-nav-list {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0.1em clamp(1rem, 0.5rem + 2vw, 1.75rem);
  align-items: start;
}
.f-nav-list a {
  position: relative;
  display: inline-flex; align-items: center;
  font-family: var(--serif); font-weight: 300;
  font-size: 1rem; color: var(--c-ink);
  padding: 0.55em 0;
  min-height: 44px;
  transition: color 200ms;
}
.f-nav-list a::after {
  content: ""; position: absolute;
  left: 0; right: 0; bottom: 0.5em;
  height: 1px; background: var(--c-water-deep); /* sea-glass */
  transform: scaleX(0); transform-origin: left;
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
.f-nav-list a:hover { color: var(--c-water-ink); }
.f-nav-list a:hover::after,
.f-nav-list a:focus-visible::after { transform: scaleX(1); }
/* Connect / social */
.f-social {
  display: flex; flex-wrap: wrap; gap: 0.6rem;
  list-style: none; margin: 0 0 1.1rem; padding: 0;
}
.f-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  color: var(--c-ink);
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.45) 45%, rgba(255,255,255,0.18) 100%),
    rgba(255,255,255,0.28);
  border: 1px solid rgba(255,255,255,0.80);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 6px 14px -8px var(--glass-shadow-soft);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: color 200ms, background-color 200ms, border-color 200ms, transform 200ms;
}
@media (hover: hover) {
  .f-social a:hover {
    color: var(--c-water-ink);
    border-color: rgba(95, 142, 149, 0.55); /* sea-glass */
    transform: translateY(-2px);
  }
}
.f-social a:focus-visible {
  outline: 2px solid var(--c-water-deep); outline-offset: 2px;
}
.f-review {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-family: var(--serif); font-weight: 300;
  font-size: 1rem; color: var(--c-ink);
  min-height: 44px;
  transition: color 200ms, gap 200ms;
}
.f-review svg { flex: none; }
@media (hover: hover) {
  .f-review:hover { color: var(--c-water-ink); gap: 0.65em; }
}

.f-base {
  position: relative; z-index: 1;
  border-top: 1px solid rgba(42, 46, 44, 0.14);
}
.f-base__inner {
  max-width: var(--container-wide); margin-inline: auto;
  padding: 1.25rem var(--gutter);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
}
.f-copy {
  font-family: var(--serif); font-weight: 300;
  font-size: 1rem; color: var(--c-ink-2);
}
.f-copy a {
  display: inline-flex; align-items: center;
  border-bottom: 1px solid currentColor;
  padding: 0.7em 0.25em 0.55em;
  min-height: 44px;
}
.bsllc {
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.85em 0.95em 0.85em 0.75em;
  min-height: 44px;
  position: relative; overflow: hidden;
  border-radius: var(--r-pill);
  /* Glassmorphic chip - lighter sea-glass frost, same family as the footer
     identity panel, kept a touch deeper at the base so the white studio mark
     still reads. Specular top edge + fine light border. */
  background:
    linear-gradient(180deg, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0.10) 48%, rgba(255,255,255,0.02) 100%),
    linear-gradient(155deg, rgba(170,202,206,0.72), rgba(118,158,164,0.90));
  border: 1px solid rgba(255,255,255,0.58);
  color: #fff;
  font-family: var(--sans);
  font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  backdrop-filter: blur(10px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.65), 0 10px 22px -10px var(--glass-shadow);
  transition: transform 220ms cubic-bezier(0.16,1,0.3,1), box-shadow 220ms ease;
}
/* Diagonal sheen sweep on hover - the same touch as the header Schedule CTA. */
.bsllc::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.55) 48%, rgba(255,255,255,0.55) 52%, transparent 70%);
  transform: translateX(-110%);
  transition: transform 720ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.bsllc > * { position: relative; z-index: 1; }
@media (hover: hover) {
  .bsllc:hover {
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.75), 0 16px 28px -12px var(--glass-shadow);
  }
  .bsllc:hover::before { transform: translateX(110%); }
}
.bsllc__mark { width: 20px; height: 20px; }
.bsllc__mark svg,
.bsllc__mark img { width: 100%; height: 100%; }
.f-connect { margin-top: clamp(1.75rem, 1.25rem + 1.5vw, 2.75rem); }

/* Mobile: give the stacked directory blocks real breathing room. */
.f-directory { display: grid; gap: clamp(1.75rem, 1.25rem + 1.5vw, 2.75rem); }

/* Two balanced columns: Visit + Hours stack on the left, Explore on the right.
   Stacking the short blocks keeps both columns near-equal height, so there's
   no dead vertical void beneath them. */
@media (min-width: 640px) {
  .f-directory {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "visit explore"
      "hours explore";
    column-gap: clamp(1.5rem, 1rem + 2vw, 3rem);
    row-gap: clamp(1.75rem, 1.25rem + 1.5vw, 2.75rem);
    align-items: start;
  }
  .f-visit     { grid-area: visit; }
  .f-hours-col { grid-area: hours; }
  .f-nav       { grid-area: explore; }
  /* Explore gets its own column here, so it reads as a single clean list. */
  .f-nav-list { grid-template-columns: 1fr; }
  /* Hours has a half-width column now, so one clean dotted-leader column reads best. */
  .f-hours { grid-template-columns: 1fr; }
}

/* Desktop: identity anchor beside the directory, divided by a hairline. */
@media (min-width: 960px) {
  .site-footer__inner {
    grid-template-columns: minmax(260px, 0.95fr) minmax(0, 1.5fr);
    gap: clamp(2.5rem, 1.5rem + 3vw, 5rem);
    align-items: stretch;
  }
  .f-directory {
    border-left: 1px solid rgba(42, 46, 44, 0.14);
    padding-left: clamp(2rem, 1rem + 3vw, 4.5rem);
  }
}

/* ============================================================
   STICKY MOBILE CALL BAR (hidden on desktop)
   ============================================================ */
.call-bar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 90;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: var(--glass-water);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border-top: 1px solid var(--c-line);
  box-shadow: 0 -8px 24px -12px rgba(42, 46, 44, 0.18);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .call-bar { background: var(--c-warmth-deep); }
}
.call-bar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 54px;
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--c-ink);
}
.call-bar__btn--schedule {
  background: var(--c-ink);
  color: #fff;
}
.call-bar__icon svg { display: block; }
@media (max-width: 879px) {
  body { padding-bottom: 54px; }
}
@media (min-width: 880px) {
  .call-bar { display: none; }
}

/* ============================================================
   BACK TO TOP - glass disc, readable on light + dark
   ============================================================ */
.back-to-top {
  position: fixed;
  right: clamp(1rem, 0.5rem + 1.5vw, 1.75rem);
  bottom: clamp(1rem, 0.5rem + 1.5vw, 1.75rem);
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.55);
  border-radius: 50%;
  cursor: pointer;
  color: var(--c-ink);
  /* Glass: warm cream tint heavy enough to read on dark, transparent enough
     to feel like glass on cream. Specular highlight + soft drop. */
  background:
    radial-gradient(circle at 32% 24%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.55) 38%, rgba(255,255,255,0.18) 78%, rgba(255,255,255,0.32) 100%),
    linear-gradient(160deg, rgba(219,213,210,0.78), rgba(201,192,188,0.92));
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -1px 0 rgba(42,46,44,0.08),
    0 10px 22px -10px rgba(42,46,44,0.45),
    0 2px 6px rgba(42,46,44,0.18);
  /* Visibility transitions */
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition:
    opacity 320ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 320ms cubic-bezier(0.16, 1, 0.3, 1),
    background 320ms ease;
  z-index: 60;
}
.back-to-top[hidden] { display: none; }
.back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.back-to-top__icon {
  width: 22px;
  height: 22px;
  transition: transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
}
.back-to-top:focus-visible {
  outline: 2px solid var(--c-ink);
  outline-offset: 3px;
}
@media (hover: hover) {
  .back-to-top:hover {
    background:
      radial-gradient(circle at 32% 24%, rgba(255,255,255,1) 0%, rgba(255,255,255,0.7) 38%, rgba(255,255,255,0.28) 78%, rgba(255,255,255,0.45) 100%),
      linear-gradient(160deg, rgba(219,213,210,0.90), rgba(201,192,188,1));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,1),
      inset 0 -1px 0 rgba(42,46,44,0.10),
      0 16px 32px -12px rgba(42,46,44,0.55),
      0 3px 8px rgba(42,46,44,0.22);
  }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .back-to-top:hover { transform: translateY(-3px); }
  .back-to-top:hover .back-to-top__icon { transform: translateY(-2px); }
  .back-to-top:active { transform: translateY(-1px); transition-duration: 120ms; }
}
/* Mobile call-bar is fixed at the bottom: float the BTT above it. */
@media (max-width: 879px) {
  .back-to-top { bottom: calc(54px + 0.75rem); }
}

/* ============================================================
   DEVICE NOTE: confirms ?internal=on / ?internal=off, the link
   that marks a browser as the practice's own for Google Analytics
   (_init.php). Only Ben, Alex and the staff ever see it.
   ============================================================ */
/* DOMINANT MOMENT: the sea-glass dot, the header status light's twin (.device-note__dot) */
.device-note {
  position: fixed;
  left: var(--gutter);
  right: var(--gutter);
  bottom: calc(54px + 0.75rem + env(safe-area-inset-bottom, 0px)); /* above the mobile call bar */
  z-index: 95;
  max-width: 34rem;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.25rem 0.25rem 0.25rem 1.1rem;
  border: 1px solid var(--glass-edge);
  border-radius: 1.25rem;
  color: var(--c-ink);
  background:
    linear-gradient(160deg, rgba(255,255,255,0.28), rgba(255,255,255,0) 60%),
    var(--glass-warmth);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 14px 28px -14px var(--glass-shadow),
    0 2px 6px var(--glass-shadow-soft);
}
.device-note[hidden] { display: none; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .device-note { background: var(--c-warmth-deep); }
}
.device-note__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--c-water-deep);
  box-shadow: 0 0 0 2px rgba(95,142,149,0.22);
}
.device-note__text {
  margin: 0;
  padding-block: 0.6rem;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 1.4;
}
.device-note__text strong { font-weight: 500; }
.device-note__close {
  margin-inline-start: auto;
  flex-shrink: 0;
  min-width: 48px;
  min-height: 48px;
  padding-inline: 0.9rem;
  border: 0;
  border-radius: 1rem;
  background: transparent;
  color: var(--c-ink);
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.device-note__close:focus-visible {
  outline: 2px solid var(--c-ink);
  outline-offset: 2px;
}
@media (hover: hover) {
  .device-note__close:hover { background: rgba(255,255,255,0.45); }
}
@media (prefers-reduced-motion: no-preference) {
  .device-note { animation: device-note-in 360ms cubic-bezier(0.16, 1, 0.3, 1) both; }
  .device-note__close { transition: background var(--t-fast), transform var(--t-fast); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .device-note__close:hover { transform: translateY(-1px); }
}
@keyframes device-note-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@media (min-width: 880px) {
  .device-note { bottom: clamp(1rem, 0.5rem + 1.5vw, 1.75rem); }
}

/* ============================================================
   INNER PAGES - basic-page template (title area + prose)
   Used by About, Services hub, New Patients, Gentle Dentistry,
   Reviews, Gallery, Chairside, Privacy, and stub pages.
   ============================================================ */
.container {
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: 768px; }

.page-hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: clamp(2.75rem, 1.5rem + 6vw, 6rem);
  background:
    radial-gradient(ellipse 80% 60% at 100% 0%, rgba(214,199,189,0.40), transparent 65%),
    radial-gradient(ellipse 60% 50% at 0% 100%, rgba(198,207,207,0.22), transparent 70%);
  border-bottom: 1px solid var(--c-line);
}
.page-hero::before {
  content: ""; position: absolute;
  top: -28%; right: -10%;
  width: 46%; aspect-ratio: 1;
  background:
    radial-gradient(circle at 50% 50%, rgba(214,199,189,0.35) 0%, transparent 62%),
    url('../images/lotus-glass.svg') no-repeat center / 70%;
  opacity: 0.40;
  pointer-events: none;
  z-index: -1;
}
.page-hero__inner { position: relative; }
.page-hero__kicker {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: 1rem; color: var(--c-ink-2);
  margin-bottom: clamp(0.75rem, 0.5rem + 0.6vw, 1rem);
  display: inline-flex; align-items: center; gap: 0.6em;
}
.page-hero__kicker::before {
  content: ""; display: inline-block;
  width: 32px; height: 1px; background: var(--c-ink-3);
}

.breadcrumb { margin-bottom: clamp(1.25rem, 1rem + 1vw, 2rem); }
.breadcrumb__list {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5em;
  font-family: var(--sans); font-size: 0.8125rem; letter-spacing: 0.01em;
  color: var(--c-ink-3-text);
  /* Counter the link padding below so the row keeps its visual height. */
  margin-block: -0.875rem;
}
.breadcrumb__item { display: inline-flex; align-items: center; gap: 0.5em; }
.breadcrumb__item + .breadcrumb__item::before {
  content: "/"; color: var(--c-ink-3-text); opacity: 0.55;
}
.breadcrumb__link {
  color: var(--c-ink-2); transition: color 200ms ease;
  /* Expand tap area to the 44px floor without enlarging the visible text. */
  display: inline-block; padding-block: 0.875rem;
}
@media (hover: hover) { .breadcrumb__link:hover { color: var(--c-ink); } }
.breadcrumb__item[aria-current="page"] { color: var(--c-ink); }

.page-hero__title {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(2.25rem, 1.5rem + 3.5vw, 4rem);
  line-height: 1.05; letter-spacing: -0.022em;
  color: var(--c-ink);
  max-width: 20ch;
}
.page-hero__summary {
  margin-top: clamp(1rem, 0.75rem + 1vw, 1.5rem);
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
  line-height: 1.45; color: var(--c-ink-2);
  max-width: 52ch;
}

.page-content { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }
/* The body HTML is rendered inside .container--narrow, so a DIRECT-child owl on
   .page-content only ever matched the container itself and the prose got no
   flow spacing whatsoever - every paragraph sat flush against the heading above
   it. Scoped to the container's children instead. The h2/h3 rules below carry
   one extra element in the selector so they still out-specify this.

   Team bio pages are the other shape: there .page-content is on the prose
   wrapper itself (.team-profile__bio) with no .container inside it, so the
   container-scoped selectors matched nothing and a bio rendered as one
   undifferentiated block. Both shapes are named in each :is() below. */
:is(.page-content .container, .page-content.team-profile__bio) > * + * { margin-top: 1.25em; }
.page-content p,
.page-content ul,
.page-content ol {
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.7; color: var(--c-ink-2);
}
/* Opening paragraph reads as a lede: larger, calmer, ink-darker.
   Only when the body actually opens on a paragraph, not a heading. */
.page-content .container--narrow > p:first-child {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
  line-height: 1.5; color: var(--c-ink);
}
.page-content strong { color: var(--c-ink); font-weight: 500; }
:is(.page-content .container, .page-content.team-profile__bio) h2 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  line-height: 1.15; letter-spacing: -0.02em; color: var(--c-ink);
  margin-top: 1.8em;
}
:is(.page-content .container, .page-content.team-profile__bio) h3 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  line-height: 1.2; color: var(--c-ink);
  margin-top: 1.6em;
}
/* A bio opens on its heading, so that first h2 must not inherit the 1.8em of
   air the rule above gives every mid-page heading. */
:is(.page-content .container, .page-content.team-profile__bio) > :is(h2, h3):first-child { margin-top: 0; }
.page-content ul { list-style: disc; padding-left: 1.25em; }
.page-content ol { list-style: decimal; padding-left: 1.25em; }
.page-content li + li { margin-top: 0.4em; }
.page-content a {
  color: var(--c-ink);
  text-decoration: underline; text-underline-offset: 0.18em;
  text-decoration-color: var(--c-ink-3-text);
  transition: text-decoration-color 200ms ease;
}
@media (hover: hover) { .page-content a:hover { text-decoration-color: var(--c-ink); } }

/* ============================================================
   TEAM MEMBER PROFILE (bio pages)
   ============================================================ */
.team-profile { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
.team-profile__grid { display: grid; gap: clamp(2rem, 1.5rem + 3vw, 4rem); align-items: start; }
/* Same fine white edge and lift as the homepage portrait and the service
   tiles (Alex, 9/28: it should match everywhere else). */
.team-profile__photo-frame {
  position: relative;
  border-radius: 22px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.85);
  box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 22px 42px -20px var(--glass-shadow);
}
/* .page-content is doing double duty here: on a service page it is the section
   and its padding-block is the section's air, but on a bio it is the inner prose
   column, where that same padding just knocks the heading out of line with the
   top of the portrait beside it. */
.page-content.team-profile__bio { padding-block: 0; }
.team-profile__photo { width: 100%; height: auto; }
.team-profile__photo-accent { display: none; }
.team-profile__quote {
  margin: clamp(1.5rem, 1rem + 2vw, 2.25rem) 0 0;
  padding-left: 1rem; border-left: 2px solid var(--c-sand);
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  line-height: 1.5; color: var(--c-ink-2);
}
.team-profile__cta {
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
  padding-top: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  border-top: 1px solid var(--c-line);
}
.team-profile__cta-text {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem);
  line-height: 1.25; letter-spacing: -0.01em;
  color: var(--c-ink); margin-bottom: 1.25rem; max-width: 24ch;
}
.team-profile__cta-sub {
  margin-top: 1rem;
  font-family: var(--sans); font-size: 0.9375rem; color: var(--c-ink-2);
}
.team-profile__cta-sub a {
  color: var(--c-ink); text-decoration: underline;
  text-underline-offset: 0.18em; text-decoration-color: var(--c-ink-3-text);
}
@media (min-width: 768px) {
  .team-profile__grid {
    /* Portrait beside the bio. Two tracks, not three: the lotus divider is
       display: none below 900px, and while this rule gave it a track anyway
       the bio landed in that auto track, took the whole row, and the
       portrait's column collapsed to nothing. That was every width from 768
       to 899 (an iPad held upright) from 9/28 until 2026-10-12. */
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
    gap: clamp(1.75rem, 1rem + 2.5vw, 3rem);
  }
  .team-profile__photo { display: block; }
}
@media (min-width: 900px) {
  .team-profile__grid {
    /* Alex, 9/27 and again 10/11: her portrait here is to be the size of the
       homepage one, with the lotus divider beside it. The homepage portrait is
       500px wide at a 1440 viewport. 1.06fr against 1fr, with the divider's
       auto track between them, lands this one at 500px from 1280 up
       (measured). */
    grid-template-columns: minmax(0, 1.06fr) auto minmax(0, 1fr);
  }
}
/* The portrait rides along while you read the bio, on a screen tall enough to
   show all of it with the pull quote under it: the header, the 500 x 750
   portrait and the quote come to about 1030px. This works because the grid is
   align-items: start, so the column is its own height rather than stretched to
   the row, which is what gives sticky something to travel in.

   On a shorter screen it simply scrolls with the page. Until 2026-10-12 the
   portrait was instead made SMALLER to fit the height of the window, which is
   why it came out near 440px on an ordinary desktop and Alex asked twice for
   it to match the homepage. She does not want her photos cropped either
   (9/10), so a short screen gets the whole portrait at full size, unpinned. */
@media (min-width: 768px) and (min-height: 1040px) {
  .team-profile__photo-col {
    position: sticky;
    top: calc(var(--header-h) + 1.5rem);
  }
}

/* ============================================================
   SERVICE DETAIL (service template)
   Interior weight of the homepage glass/serif language.
   Flow: hero -> body + sticky rail -> comfort -> related -> CTA.
   ============================================================ */
.svc-hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: clamp(2rem, 1.25rem + 4vw, 4.5rem);
  /* Open Crown cream -> warm sand, matching the homepage hero, now with a
     sea-glass bloom behind the lotus on the right. This is the footer brand
     panel's move (.f-brand blends rgba(166,200,205,..) into sand inside ONE
     element), which is the treatment Alex singled out. The bloom sits on the
     lotus side, so the headline column stays on light cream and its contrast
     is untouched.
     Supersedes the earlier "blue never as a field here" rule: that is exactly
     what she pushed back on. */
  background:
    radial-gradient(78% 60% at 15% 0%, rgba(255, 252, 246, 0.55) 0%, transparent 54%),
    radial-gradient(66% 82% at 88% 22%, rgba(166, 200, 205, 0.52) 0%, transparent 68%),
    radial-gradient(80% 86% at 96% 28%, rgba(207, 185, 151, 0.30) 0%, transparent 72%),
    linear-gradient(180deg, #F7ECDA 0%, #EFE2CC 46%, #EBE1D0 100%);
}
/* Feather the hero's bottom into the body beach-wash instead of a hard 1px
   rule - the cream field dissolves so the hero->body transition is seamless. */
.svc-hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: clamp(60px, 8vw, 120px);
  background: linear-gradient(180deg, rgba(235, 225, 208, 0) 0%, rgba(239, 232, 222, 0.85) 100%);
  pointer-events: none;
  z-index: 0;
}
.svc-hero__inner {
  position: relative; z-index: 1;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.svc-hero__grid { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 3rem); }
.svc-hero__cat {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--sans);
  font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--c-water-ink); /* sea-glass label, as in .f-col__heading */
  margin-bottom: clamp(1rem, 0.75rem + 1vw, 1.5rem);
}
.svc-hero__cat-coin {
  width: 34px; height: 34px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  /* Sea-glass accent coin - the "touch of blue" the client wants, kept small. */
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.5) 42%, rgba(255, 255, 255, 0.2) 82%, rgba(255, 255, 255, 0.4) 100%),
    linear-gradient(165deg, rgba(166, 200, 205, 0.6), rgba(149, 189, 195, 0.82));
  border: 1px solid rgba(255, 255, 255, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 6px 12px -7px rgba(42, 46, 44, 0.22);
  color: var(--c-ink);
}
.svc-hero__cat-coin svg { width: 17px; height: 17px; }
.svc-hero__title {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(2.4rem, 1.6rem + 3.8vw, 4.25rem);
  line-height: 1.02; letter-spacing: -0.024em;
  color: var(--c-ink);
  max-width: 16ch;
}
.svc-hero__lede {
  margin-top: clamp(1rem, 0.75rem + 1vw, 1.6rem);
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.7rem);
  line-height: 1.42; color: var(--c-ink-2);
  max-width: 32ch;
}
.svc-hero__ctas {
  margin-top: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
}
.svc-hero__call {
  display: inline-flex; align-items: center; gap: 0.5em;
  min-height: 44px; padding: 0.6em 1.2em;
  font-family: var(--sans); font-size: 0.9375rem; font-weight: 500;
  color: var(--c-ink); border-radius: var(--r-pill);
  background: linear-gradient(160deg, rgba(214, 199, 189, 0.34), rgba(201, 192, 188, 0.5));
  border: 1px solid rgba(255, 255, 255, 0.66);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.svc-hero__call svg { width: 17px; height: 17px; flex-shrink: 0; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .svc-hero__call:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 12px 20px -10px rgba(42, 46, 44, 0.22); }
}
/* Large glass lotus filling the hero's right side - same popping treatment as
   the homepage hero: a warm-white halo behind it and layered warm drop-shadows
   so the petals read against the cream instead of dissolving into it. */
.svc-hero__aside { display: flex; align-items: center; justify-content: center; }
.svc-hero__lotus {
  position: relative; pointer-events: none;
  width: clamp(240px, 64vw, 380px);
  margin-block: clamp(0.5rem, 0.25rem + 1.5vw, 1.25rem);
  display: flex; align-items: center; justify-content: center;
}
.svc-hero__lotus::before {
  content: ""; position: absolute; inset: -42% -38%; border-radius: 50%; z-index: -1;
  background: radial-gradient(ellipse at 50% 46%,
    rgba(255, 253, 249, 0.82) 0%,
    rgba(255, 251, 245, 0.46) 26%,
    rgba(255, 250, 243, 0.18) 48%,
    rgba(255, 250, 243, 0.05) 68%,
    transparent 82%);
}
.svc-hero__watermark {
  width: 100%; height: auto;
  filter:
    drop-shadow(0 20px 38px rgba(104, 78, 56, 0.42))
    drop-shadow(0 6px 12px rgba(120, 96, 76, 0.30))
    drop-shadow(0 1px 2px rgba(255, 255, 255, 0.6));
}
.svc-hero__photo {
  border-radius: 20px; overflow: hidden;
  box-shadow: 0 30px 56px -28px rgba(42, 46, 44, 0.34);
}
.svc-hero__photo img { width: 100%; height: 100%; object-fit: cover; }

/* Section dividers ------------------------------------------
   Now that the section backgrounds transition softly, each service-page
   section carries a centered hairline at its top edge that fades out at both
   ends - the same divider used above the CTA - to clearly mark the divides.
   One line per boundary (the CTA supplies its own via .cta::before). */
.svc-body::before,
.svc-comfort::before,
.svc-faq::before,
.svc-related::before,
.svc-group::before,
.svc-emergency::before {
  content: "";
  position: absolute; left: 50%; top: 0;
  transform: translateX(-50%);
  width: min(var(--container-wide), 100% - var(--gutter) * 2);
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(42,46,44,0.12) 50%, transparent 100%);
  z-index: 1;
}

/* Body + sticky conversion rail ----------------------------- */
.svc-body { position: relative; }
.svc-body__inner {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: clamp(2.5rem, 1.75rem + 3vw, 4.5rem);
  display: grid; gap: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}
.service-prose > * + * { margin-top: 1.2em; }
.service-prose p,
.service-prose ul,
.service-prose ol {
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.72; color: var(--c-ink-2);
}
.service-prose > p:first-child {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.55rem);
  line-height: 1.5; color: var(--c-ink);
}
.service-prose strong { color: var(--c-ink); font-weight: 500; }
.service-prose h2 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
  line-height: 1.15; letter-spacing: -0.02em; color: var(--c-ink);
  margin-top: 1.9em;
}
.service-prose h3 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.55rem);
  line-height: 1.2; color: var(--c-ink);
  margin-top: 1.6em;
}
.service-prose ul { list-style: disc; padding-left: 1.25em; }
.service-prose ol { list-style: decimal; padding-left: 1.25em; }
.service-prose li + li { margin-top: 0.4em; }
.service-prose a {
  color: var(--c-ink);
  text-decoration: underline; text-underline-offset: 0.18em;
  text-decoration-color: var(--c-ink-3-text);
  transition: text-decoration-color var(--t-fast);
}
@media (hover: hover) { .service-prose a:hover { text-decoration-color: var(--c-ink); } }

.svc-rail__card {
  position: relative;
  padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  border-radius: 22px;
  background:
    radial-gradient(ellipse 80% 55% at 50% 0%, rgba(255, 255, 255, 0.85), transparent 70%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.55), rgba(166, 200, 205, 0.5));
  backdrop-filter: blur(20px) saturate(1.35);
  -webkit-backdrop-filter: blur(20px) saturate(1.35);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 22px 42px -20px var(--glass-shadow);
}
.svc-rail__eyebrow {
  font-family: var(--sans);
  font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--c-ink-2);
  margin-bottom: 0.75rem;
}
.svc-rail__line {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.6rem);
  line-height: 1.2; letter-spacing: -0.01em; color: var(--c-ink);
  margin-bottom: clamp(1.25rem, 1rem + 1vw, 1.75rem);
}
.svc-rail__line em { font-style: italic; }
.svc-rail__cta { width: 100%; justify-content: center; }
.svc-rail__call {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  width: 100%; min-height: 44px; margin-top: 0.75rem;
  font-family: var(--sans); font-size: 0.9375rem; font-weight: 500;
  color: var(--c-ink); border-radius: var(--r-pill);
  border: 1px solid rgba(42, 46, 44, 0.16);
  transition: background var(--t-fast);
}
.svc-rail__call svg { width: 17px; height: 17px; flex-shrink: 0; }
@media (hover: hover) { .svc-rail__call:hover { background: rgba(255, 255, 255, 0.4); } }
.svc-rail__meet {
  margin-top: 1rem;
  justify-content: center; width: 100%;
  font-size: 1rem;
}

/* Comfort / reassurance strip ------------------------------- */
.svc-comfort {
  position: relative; overflow: hidden;
  padding-block: clamp(3rem, 2rem + 4vw, 5.5rem);
  /* The brand-promise moment now carries the tide band, the same feathered
     sea-glass plane the homepage uses for .voices. Detail pages otherwise run
     body -> comfort -> FAQ as one long sand stretch through the middle of the
     page, which is what Alex meant by "all is sand".
     The old second radial used rgba(239,232,222,..), which IS --c-foam, the
     body ground, so it painted nothing at all - the same no-op that flattened
     .svc-group. A warm sand pool stays in the top corner so the band still
     belongs to the beach palette. */
  background:
    radial-gradient(58% 78% at 14% 6%, rgba(214, 199, 189, 0.34) 0%, rgba(214, 199, 189, 0) 62%),
    linear-gradient(180deg,
      rgba(201, 221, 222, 0) 0%,
      rgba(201, 221, 222, 0.50) 16%,
      rgba(214, 228, 229, 0.44) 84%,
      rgba(201, 221, 222, 0) 100%);
}
.svc-comfort__inner {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid; gap: clamp(1.75rem, 1.25rem + 2vw, 3rem);
}
.svc-comfort__eyebrow,
.svc-related__eyebrow {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: 1.0625rem; color: var(--c-ink-2);
  display: inline-flex; align-items: center; gap: 0.7em;
  margin-bottom: 1rem;
}
/* Sea-glass hairlines, lifted from .f-col__heading::before in the footer -
   the part of the page Alex singled out as having "all the colors". These
   were neutral grey, which is a big part of why the service pages read as
   sand-only even where the layout was fine. */
.svc-comfort__eyebrow::before,
.svc-related__eyebrow::before {
  content: ""; display: inline-block;
  width: 38px; height: 1px; background: rgba(95, 142, 149, 0.55);
}
.svc-comfort__title,
.svc-related__title {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3rem);
  line-height: 1.05; letter-spacing: -0.02em; color: var(--c-ink);
  max-width: 18ch;
}
.svc-comfort__title em,
.svc-related__title em { font-style: italic; }
.svc-comfort__list { display: grid; gap: clamp(1.25rem, 1rem + 1vw, 1.75rem); }
.svc-comfort__item {
  display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start;
  padding-top: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border-top: 1px solid var(--c-line);
}
.svc-comfort__coin {
  width: 48px; height: 48px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.5) 42%, rgba(255, 255, 255, 0.2) 82%, rgba(255, 255, 255, 0.4) 100%),
    linear-gradient(165deg, rgba(214, 199, 189, 0.45), rgba(201, 192, 188, 0.65));
  border: 1px solid rgba(255, 255, 255, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 8px 14px -8px rgba(42, 46, 44, 0.2);
  color: var(--c-ink);
}
.svc-comfort__coin svg { width: 24px; height: 24px; }
.svc-comfort__item-title {
  font-family: var(--sans); font-weight: 600; font-size: 1.0625rem;
  color: var(--c-ink); margin-bottom: 0.3rem;
}
.svc-comfort__item-copy {
  font-size: 1rem; line-height: 1.6; color: var(--c-ink-2);
  max-width: 42ch;
}

/* FAQ accordion --------------------------------------------- */
.svc-faq { position: relative; padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }
.svc-faq__inner { max-width: 880px; margin-inline: auto; padding-inline: var(--gutter); }
.svc-faq__head { margin-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }
.svc-faq__eyebrow {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: 1.0625rem; color: var(--c-ink-2);
  display: inline-flex; align-items: center; gap: 0.7em;
  margin-bottom: 1rem;
}
.svc-faq__eyebrow::before { content: ""; display: inline-block; width: 38px; height: 1px; background: rgba(95, 142, 149, 0.55); }
.svc-faq__title {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3rem);
  line-height: 1.05; letter-spacing: -0.02em; color: var(--c-ink);
}
.svc-faq__title em { font-style: italic; }
.svc-faq__list { border-top: 1px solid var(--c-line); }
.svc-faq__item { border-bottom: 1px solid var(--c-line); }
.svc-faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
  padding-block: clamp(1.1rem, 0.9rem + 0.6vw, 1.5rem);
  cursor: pointer; list-style: none;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.45rem);
  line-height: 1.3; color: var(--c-ink);
  min-height: 44px;
  transition: color var(--t-fast);
}
.svc-faq__q::-webkit-details-marker { display: none; }
@media (hover: hover) { .svc-faq__q:hover { color: var(--c-water-ink); } }
.svc-faq__chev {
  flex-shrink: 0; width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: linear-gradient(160deg, rgba(214, 199, 189, 0.4), rgba(201, 192, 188, 0.55));
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  color: var(--c-ink);
  transition: transform var(--t-base), background var(--t-base);
}
.svc-faq__chev svg { width: 15px; height: 15px; }
.svc-faq__item[open] .svc-faq__chev {
  transform: rotate(180deg);
  background: linear-gradient(160deg, rgba(166, 200, 205, 0.5), rgba(149, 189, 195, 0.66));
}
.svc-faq__a { padding-bottom: clamp(1.1rem, 0.9rem + 0.6vw, 1.6rem); max-width: 64ch; }
.svc-faq__a p {
  font-size: clamp(1rem, 0.97rem + 0.2vw, 1.0938rem);
  line-height: 1.7; color: var(--c-ink-2);
}
@media (prefers-reduced-motion: no-preference) {
  .svc-faq__item[open] .svc-faq__a { animation: faq-reveal 320ms cubic-bezier(0.16, 1, 0.3, 1); }
}
@keyframes faq-reveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* Related services ------------------------------------------ */
.svc-related {
  position: relative; overflow: hidden;
  padding-block: clamp(3rem, 2rem + 4vw, 5.5rem);
  /* Mirror of the comfort glows so consecutive sections feather into each
     other: muted aqua pool top-right, foam pool bottom-left. */
  background:
    radial-gradient(60% 80% at 88% 4%, rgba(198, 207, 207, 0.34) 0%, rgba(198, 207, 207, 0) 60%),
    radial-gradient(64% 82% at 8% 98%, rgba(239, 232, 222, 0.60) 0%, rgba(239, 232, 222, 0) 60%);
}
.svc-related__inner {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.svc-related__head { margin-bottom: clamp(2rem, 1.5rem + 1.5vw, 3rem); }
.svc-related__grid {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(1rem, 0.75rem + 1vw, 1.5rem);
}
.svc-card { display: flex; }
.svc-card__link {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; width: 100%;
  padding: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
  border-radius: 20px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255, 255, 255, 0.82), transparent 72%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.5), rgba(203, 182, 163, 0.5));
  border: 1px solid rgba(255, 255, 255, 0.82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 18px 36px -20px var(--glass-shadow);
  transition: transform var(--t-base), box-shadow var(--t-base);
}
@media (prefers-reduced-motion: no-preference) {
  .svc-card__link:hover {
    transform: translateY(-4px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 30px 48px -22px var(--glass-shadow);
  }
}
.svc-card__coin {
  width: 44px; height: 44px; margin-bottom: 1rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.5) 42%, rgba(255, 255, 255, 0.2) 82%, rgba(255, 255, 255, 0.4) 100%),
    linear-gradient(165deg, rgba(214, 199, 189, 0.45), rgba(201, 192, 188, 0.65));
  border: 1px solid rgba(255, 255, 255, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 8px 14px -8px rgba(42, 46, 44, 0.2);
  color: var(--c-ink);
}
.svc-card__coin svg { width: 22px; height: 22px; }

/* ---- Colour in the components, not just the ground ----------------------
   The homepage bucket grid alternates warm sand glass and sea glass card by
   card (.bucket:nth-child(2n)), and that grid is what Alex means by "all the
   colors". Every service card here was the same warm sand, so the pages read
   as one long taupe run no matter what the section background did. Same
   alternation, applied to .svc-card list items so it covers BOTH the landing
   group grids and the related-services grid on detail pages. */
.svc-card:nth-child(2n) .svc-card__link {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255, 255, 255, 0.82), transparent 72%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.5), rgba(166, 200, 205, 0.52));
}
.svc-card:nth-child(2n) .svc-card__coin {
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.5) 42%, rgba(255, 255, 255, 0.2) 82%, rgba(255, 255, 255, 0.4) 100%),
    linear-gradient(165deg, rgba(166, 200, 205, 0.6), rgba(149, 189, 195, 0.82));
}
/* On the water band the tints swap, so the alternation stays legible against
   a sea-glass ground instead of the blue cards dissolving into it. */
.svc-group--alt .svc-card:nth-child(2n) .svc-card__link {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255, 255, 255, 0.82), transparent 72%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.5), rgba(203, 182, 163, 0.5));
}
.svc-group--alt .svc-card:nth-child(2n) .svc-card__coin {
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.5) 42%, rgba(255, 255, 255, 0.2) 82%, rgba(255, 255, 255, 0.4) 100%),
    linear-gradient(165deg, rgba(214, 199, 189, 0.45), rgba(201, 192, 188, 0.65));
}
.svc-group--alt .svc-card:nth-child(2n+1) .svc-card__link {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255, 255, 255, 0.82), transparent 72%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.5), rgba(166, 200, 205, 0.52));
}
.svc-group--alt .svc-card:nth-child(2n+1) .svc-card__coin {
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.5) 42%, rgba(255, 255, 255, 0.2) 82%, rgba(255, 255, 255, 0.4) 100%),
    linear-gradient(165deg, rgba(166, 200, 205, 0.6), rgba(149, 189, 195, 0.82));
}

/* The "Learn more" cue picks up the footer's link-hover sea glass. */
@media (hover: hover) {
  .svc-card__link:hover .svc-card__go { color: var(--c-water-ink); }
}
.svc-card__name {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  line-height: 1.15; letter-spacing: -0.01em; color: var(--c-ink);
}
.svc-card__blurb {
  margin-top: 0.6rem;
  font-size: 0.9875rem; line-height: 1.55; color: var(--c-ink-2);
}
.svc-card__go {
  margin-top: auto; padding-top: 1.25rem;
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: 1.0625rem; color: var(--c-ink);
}

@media (min-width: 600px) {
  .svc-related__grid { grid-template-columns: repeat(2, 1fr); }
  /* Two-up: a gentle diagonal so the pair never sits on one baseline. */
  .svc-related__grid > :nth-child(2n+1) { transform: translateY(-0.85rem); }
  .svc-related__grid > :nth-child(2n)   { transform: translateY(0.85rem); }
}
@media (min-width: 760px) {
  .svc-comfort__inner { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr); align-items: start; }
  .svc-comfort__head { padding-top: clamp(1.25rem, 1rem + 1vw, 1.75rem); }
}
@media (min-width: 880px) {
  .svc-hero__grid {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(1.5rem, 0.5rem + 2vw, 3rem);
  }
  /* Enormous lotus: it fills the right column, runs taller than the type so the
     hero sizes to IT (touching top and bottom), and bleeds off the right edge -
     the dominant glass moment the homepage hero has. */
  .svc-hero__aside { justify-content: flex-end; overflow: visible; }
  .svc-hero__lotus {
    width: min(124%, 600px);
    margin-block: 0;
    margin-right: clamp(-3.5rem, -1rem - 2.5vw, -1rem);
  }
}
@media (min-width: 960px) {
  .svc-body__inner {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.85fr);
    align-items: start;
  }
  .svc-rail { position: sticky; top: calc(var(--header-h) + 1rem); }
  .svc-related__grid { grid-template-columns: repeat(3, 1fr); }
  /* Three-up arc stagger: outer columns lift, middle settles - the premium
     valley rhythm. translateY keeps the grid rows intact, so unlike margin-top
     it never reflows the next row awkwardly. */
  .svc-related__grid > :nth-child(3n+1) { transform: translateY(-1.4rem); }
  .svc-related__grid > :nth-child(3n+2) { transform: translateY(0.8rem); }
  .svc-related__grid > :nth-child(3n+3) { transform: translateY(-1.4rem); }
}

/* ============================================================
   SERVICES LANDING (services template)
   ============================================================ */
/* Care group sections - asymmetric head-left + service-card grid. */
.svc-group {
  position: relative;
  padding-block: clamp(2.5rem, 1.75rem + 3vw, 4.5rem);
  /* Every group carries soft tidal glows; consecutive groups mirror on
     opposite corners so their transparent edges meet at the boundary and
     feather - no alternating shelf/flat banding. Base: warm sand top-left,
     light shell bottom-right.
     The lift colour must be lighter than --c-foam (the body ground) or the
     radial is a no-op and the band collapses to body-plus-sand, which is what
     made the whole landing read as one heavy taupe slab. */
  background:
    radial-gradient(52% 76% at 10% 8%, rgba(214, 199, 189, 0.26) 0%, rgba(214, 199, 189, 0) 62%),
    radial-gradient(58% 80% at 92% 94%, rgba(252, 250, 246, 0.75) 0%, rgba(252, 250, 246, 0) 62%);
}
/* Alt groups: a full tide band, not a corner glow. This is the same feathered
   sea-glass plane the homepage uses for .voices, so the services scroll picks
   up the sand -> water -> sand rhythm rather than reading as one long taupe
   run. A sand radial stays in the low corner so the band still sits in the
   beach palette instead of floating free of it. */
.svc-group--alt {
  background:
    radial-gradient(60% 82% at 8% 96%, rgba(214, 199, 189, 0.34) 0%, rgba(214, 199, 189, 0) 60%),
    linear-gradient(180deg,
      rgba(201, 221, 222, 0) 0%,
      rgba(201, 221, 222, 0.58) 14%,
      rgba(214, 228, 229, 0.52) 86%,
      rgba(201, 221, 222, 0) 100%);
}
.svc-group__inner {
  max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter);
  display: grid; gap: clamp(1.75rem, 1.25rem + 2vw, 3rem);
}
.svc-group__coin {
  width: 56px; height: 56px; margin-bottom: 1.1rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.5) 42%, rgba(255, 255, 255, 0.2) 82%, rgba(255, 255, 255, 0.4) 100%),
    linear-gradient(165deg, rgba(214, 199, 189, 0.45), rgba(201, 192, 188, 0.65));
  border: 1px solid rgba(255, 255, 255, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 10px 18px -10px rgba(42, 46, 44, 0.22);
  color: var(--c-ink);
}
.svc-group--alt .svc-group__coin {
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.5) 42%, rgba(255, 255, 255, 0.2) 82%, rgba(255, 255, 255, 0.4) 100%),
    linear-gradient(165deg, rgba(166, 200, 205, 0.6), rgba(149, 189, 195, 0.82));
}
.svc-group__coin svg { width: 28px; height: 28px; }
.svc-group__title {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.9rem, 1.4rem + 2vw, 2.75rem);
  line-height: 1.04; letter-spacing: -0.02em; color: var(--c-ink);
  max-width: 14ch;
}
/* The group lede is this page's equivalent of the footer's "done differently"
   italic, which lifts in deep sea-glass against the sand. Same move: it puts
   colour into the type at the head of every group rather than leaving all the
   blue trapped in one section background. */
.svc-group__lede {
  margin-top: 0.6rem;
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.6rem);
  line-height: 1.25; color: var(--c-water-ink);
}
.svc-group__grid { display: grid; grid-template-columns: 1fr; gap: clamp(1rem, 0.75rem + 1vw, 1.5rem); }

@media (min-width: 560px) {
  .svc-group__grid { grid-template-columns: repeat(2, 1fr); }
  .svc-group__grid > :nth-child(2n+1) { transform: translateY(-0.6rem); }
  .svc-group__grid > :nth-child(2n)   { transform: translateY(0.6rem); }
}
@media (min-width: 920px) {
  .svc-group__inner {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.75fr);
    align-items: start;
  }
  .svc-group__head { position: sticky; top: calc(var(--header-h) + 1.25rem); }
}

/* Emergency callout */
.svc-emergency { position: relative; padding-block: clamp(2.5rem, 1.75rem + 3vw, 4.5rem); }
.svc-emergency__inner {
  max-width: 1000px; margin-inline: auto;
  margin-left: max(var(--gutter), calc(50% - 500px)); margin-right: max(var(--gutter), calc(50% - 500px));
  display: grid; gap: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  padding: clamp(1.75rem, 1.25rem + 2vw, 3rem);
  border-radius: 24px;
  background:
    radial-gradient(ellipse 90% 70% at 0% 0%, rgba(255, 255, 255, 0.7), transparent 70%),
    linear-gradient(155deg, rgba(255, 255, 255, 0.5), rgba(166, 200, 205, 0.55));
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, 0.82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 26px 48px -24px var(--glass-shadow);
}
.svc-emergency__coin {
  width: 56px; height: 56px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.5) 42%, rgba(255, 255, 255, 0.2) 82%, rgba(255, 255, 255, 0.4) 100%),
    linear-gradient(165deg, rgba(166, 200, 205, 0.62), rgba(149, 189, 195, 0.84));
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 10px 18px -10px rgba(42, 46, 44, 0.22);
  color: var(--c-ink);
}
.svc-emergency__coin svg { width: 30px; height: 30px; }
.svc-emergency__title {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.6rem, 1.25rem + 1.6vw, 2.35rem);
  line-height: 1.08; letter-spacing: -0.02em; color: var(--c-ink);
}
.svc-emergency__title em { font-style: italic; }
.svc-emergency__copy {
  margin-top: 0.85rem;
  font-size: clamp(1rem, 0.97rem + 0.2vw, 1.0938rem);
  line-height: 1.65; color: var(--c-ink-2); max-width: 56ch;
}
.svc-emergency__ctas {
  margin-top: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  display: flex; flex-wrap: wrap; align-items: center; gap: clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
}
@media (min-width: 680px) {
  .svc-emergency__inner { grid-template-columns: auto 1fr; align-items: start; }
}

/* ============================================================
   CONTACT (contact template)
   Inherits svc-hero + glass info-card + soft glow/divider language.
   ============================================================ */
/* Front-desk console: a full-bleed two-panel layout for form/utility pages,
   distinct from the editorial interior hero. Left = a branded "place" panel
   (deeper sand wash + glass lotus, headline, live status, NAP, hours). Right =
   the form on a lighter foam surface. No stacked hero; the form is present from
   the top. Reusable for New Patients and other form-first pages. */
.contact-console { position: relative; }
.contact-console__inner { display: grid; grid-template-columns: 1fr; }
@media (min-width: 920px) {
  .contact-console__inner {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    align-items: stretch;
  }
}

/* Left brand panel: full-bleed background, content aligned to the container.
   Sea-glass wash that rhymes with the footer lockup, with a warm sand bloom
   held in the low corner so the panel still belongs to the beach palette.
   (Was a warm cream-to-sand wash; Alex asked for colour here, 2026-08.)
   The gradient runs lightest at the top left, where the heading and contact
   lines sit, so text contrast improves at every stop versus the old sand. */
.contact-console__brand {
  position: relative; overflow: hidden;
  background:
    radial-gradient(78% 62% at 12% 6%, rgba(255, 255, 253, 0.55) 0%, rgba(255, 255, 253, 0) 56%),
    radial-gradient(84% 78% at 98% 94%, rgba(207, 185, 151, 0.34) 0%, rgba(207, 185, 151, 0) 70%),
    linear-gradient(158deg, #E8F2F1 0%, #D3E3E5 50%, #BCD5DA 100%);
  padding-block: clamp(2.25rem, 1.5rem + 4vw, 4rem);
  padding-inline: clamp(1.25rem, 0.75rem + 2vw, 2.5rem);
  /* mobile: reserve room below the content so the lotus sits under the hours
     (not on top of them), bleeding off the bottom */
  padding-bottom: clamp(190px, 52vw, 260px);
}
@media (min-width: 920px) {
  .contact-console__brand {
    padding-left: var(--inset-mid);
    padding-right: clamp(2rem, 1rem + 3vw, 4rem);
    padding-bottom: clamp(2.25rem, 1.5rem + 4vw, 4rem);
  }
}
.contact-console__brand-inner { position: relative; z-index: 1; max-width: 33rem; }
@media (min-width: 920px) { .contact-console__brand-inner { max-width: 40rem; } }
.contact-console__title {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(2.2rem, 1.5rem + 3.2vw, 3.6rem);
  line-height: 1.0; letter-spacing: -0.02em; color: var(--c-ink); margin-top: 0.5rem;
}
.contact-console__title em { font-style: italic; }
.contact-console__line { margin-top: 0.75rem; color: var(--c-ink-2); font-size: 1.05rem; line-height: 1.5; max-width: 34ch; }
.contact-console__status { margin-top: 1.5rem; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.55em; }

/* Details: contact rows on the left, weekly hours on the right (stacked on
   mobile). Sits above the lotus watermark. */
.contact-console__details { position: relative; z-index: 1; margin-top: 1.6rem; display: grid; gap: 1.4rem; }
.contact-console__contacts { display: grid; gap: 0.85rem; align-content: start; }
.contact-console__contacts li { display: grid; grid-template-columns: auto 1fr; gap: 0.85rem; align-items: center; }
.contact-console__contacts a { line-height: 1.35; color: var(--c-ink-2); font-size: 0.95rem; }
.contact-console__contacts strong { display: block; color: var(--c-ink); font-weight: 600; font-size: 1rem; }
/* mobile: hours below the contacts, divided by a hairline */
.contact-console__details .contact-hours { margin-top: 0; padding-top: 1.2rem; border-top: 1px solid rgba(42, 46, 44, 0.14); }

/* Was 920px. The brand panel is only half the screen from 920px, and between
   there and about 1180px it is too narrow for two columns: the hours ran past
   the panel's edge and were clipped (on a tablet in landscape the Friday time
   read "8 AM to"). Until 1180px the hours stay under the contact rows, as they
   do on a phone (measured 2026-10-04: no overflow from 1180px up). */
@media (min-width: 1180px) {
  .contact-console__details {
    grid-template-columns: auto auto;
    justify-content: space-between;
    gap: clamp(1.5rem, 0.5rem + 2vw, 3rem);
    align-items: start;
  }
  /* desktop: hours to the RIGHT of the contacts, divided by a vertical hairline */
  .contact-console__details .contact-hours {
    margin-top: 0; padding-top: 0; border-top: 0;
    padding-left: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
    border-left: 1px solid rgba(42, 46, 44, 0.14);
  }
  /* In this narrower column "Friday (every other week)" plus its time is about
     10px wider than the column at every desktop width, so the Friday time
     stuck out past the six above and below it. Here the note hangs under
     "Friday" instead: the row's first line is then built exactly like the
     others (same leader, same right edge). Under 1180px the row has room and
     the note stays beside the day, as approved. */
  .contact-hours__row.has-note { padding-bottom: 1.15em; }
  .contact-hours__row.has-note dt { position: relative; }
  .contact-hours__row.has-note .contact-hours__alt {
    position: absolute; top: 100%; left: 0;
    white-space: nowrap; line-height: 1.35;
  }
}

/* Large lotus watermark: centered under the content, bleeding ~6% off the
   panel bottom (clipped by the panel's overflow:hidden). Artwork only - the
   SVG carries its own glass shading, so no stacked CSS drop-shadows. */
.contact-console__lotus {
  position: absolute; z-index: 0; pointer-events: none; user-select: none;
  bottom: -6%; left: var(--inset-mid); right: clamp(2rem, 1rem + 3vw, 4rem);
  margin-inline: auto;
  width: clamp(230px, 66%, 320px); height: auto; opacity: 0.6;
}
/* 920 to 1179px: the hours sit under the contact rows here (see the two-column
   rule above), so the watermark is kept small enough to stay below them rather
   than behind the last two rows. The full-size mark returns at 1180px, where
   the hours move beside the contacts and the space under them is free. */
@media (min-width: 920px) {
  .contact-console__lotus { width: clamp(150px, 15vw, 170px); opacity: 0.72; }
}
@media (min-width: 1180px) {
  .contact-console__lotus { width: clamp(300px, 26vw, 440px); }
  /* Same width the column had before 2026-10-04, when the over-long Friday row
     set it, so the dotted leaders keep their length. */
  .contact-hours__list { min-width: 14.5rem; }
}
.contact-form__nowrap { white-space: nowrap; }

/* Right form panel: lighter surface, content aligned to the container. */
.contact-console__panel {
  position: relative;
  background:
    radial-gradient(70% 60% at 90% 4%, rgba(239, 232, 222, 0.7) 0%, rgba(239, 232, 222, 0) 60%),
    linear-gradient(160deg, #F4EDE2 0%, #EFE7DB 100%);
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  padding-inline: clamp(1.25rem, 0.75rem + 2vw, 2.5rem);
}
@media (min-width: 920px) {
  .contact-console__panel {
    padding-right: var(--inset-mid);
    padding-left: clamp(2rem, 1rem + 3vw, 4rem);
    box-shadow: -28px 0 60px -40px rgba(42, 46, 44, 0.35);
    display: flex; flex-direction: column; justify-content: center; align-items: flex-end;
  }
  /* Right-align the form so its right edge meets the container edge, mirroring
     the brand panel content hugging the left. Both then line up with the map. */
  .contact-console__panel > * { width: 100%; max-width: 34rem; margin-inline-start: auto; }
}

/* Form head + copy */
.contact-form-head { margin-bottom: 1.5rem; }
.contact-form__eyebrow {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: 1.0625rem; color: var(--c-ink-2); margin-bottom: 0.5rem;
}
.contact-form__title {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.6rem, 1.3rem + 1.5vw, 2.4rem);
  line-height: 1.08; letter-spacing: -0.02em; color: var(--c-ink);
}
.contact-form__sub { margin-top: 0.6rem; color: var(--c-ink-2); font-size: 1rem; line-height: 1.55; max-width: 40ch; }
/* .FormBuilderErrors is what FormBuilder prints above the form when a
   submission needs another look. */
.contact-form__error,
.FormBuilderErrors .error {
  background: rgba(203, 84, 74, 0.10); border: 1px solid rgba(203, 84, 74, 0.32);
  color: #8A3128; padding: 0.7rem 0.9rem; border-radius: 10px;
  margin-bottom: 1rem; font-size: 0.92rem; line-height: 1.45;
}

/* Fields. The form is printed by FormBuilder (embed C, framework "Basic",
   its own stylesheet not loaded), so these rules are written for its markup:
     form.site-form > div.Inputfields > div.Inputfield.Inputfield_NAME
       > label.InputfieldHeader + div.InputfieldContent > input
   The class site-form is added by site/templates/FormBuilder/hooks.php. Until
   2026-10-05 the same declarations hung on a hand-written .field wrapper;
   nothing about how the form looks was meant to change. */
.site-form .Inputfields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 1rem; }
.site-form .Inputfield { display: block; min-width: 0; margin-bottom: 1.1rem; }
.site-form .InputfieldHeader { display: block; font-size: 0.9rem; font-weight: 600; color: var(--c-ink); margin-bottom: 0.4rem; }
/* The star on a required field and the lighter "(optional)". FormBuilder
   does not print either; hooks.php adds them to the label. */
.field__req { color: var(--c-water-ink); }
.field__opt { font-weight: 400; color: var(--c-ink-3-text); }
.site-form .InputfieldContent input,
.site-form .InputfieldContent textarea {
  width: 100%; font: inherit; color: var(--c-ink);
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(42, 46, 44, 0.2);
  border-radius: 10px;
  padding: 0.8rem 0.95rem;
  box-shadow: inset 0 1px 2px rgba(42, 46, 44, 0.05);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.site-form .InputfieldContent textarea { resize: vertical; min-height: 7rem; }
.site-form .InputfieldContent input::placeholder,
.site-form .InputfieldContent textarea::placeholder { color: var(--c-ink-3-text); }
.site-form .InputfieldContent input:focus-visible,
.site-form .InputfieldContent textarea:focus-visible {
  /* The same ink ring every other control on the site shows. It used to be
     transparent, which left a 1px border change at about 3:1 as the only
     sign of keyboard focus, on the one form the site has. */
  outline: 2px solid var(--c-ink); outline-offset: 2px;
  border-color: var(--c-water-deep);
  box-shadow: 0 0 0 3px rgba(95, 142, 149, 0.20);
  background: rgba(255, 255, 255, 0.72);
}
/* Phone and email share a row from 480px; every other field takes the full width. */
@media (min-width: 480px) {
  .site-form .Inputfields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-form .Inputfield { grid-column: 1 / -1; }
  .site-form .Inputfield_phone,
  .site-form .Inputfield_email { grid-column: auto; }
}
/* The honeypot. FormBuilder prints it as an ordinary field (and renames its
   wrapper id), so it is taken off screen by class. Not display:none, which
   some bots look for. hooks.php removes it from the tab order and hides it
   from screen readers. */
.site-form .Inputfield_sd_hold,
.site-form [data-trap] { position: absolute; left: -9999px; width: 1px; height: 1px; margin: 0; overflow: hidden; }
/* The reassurance line and the button. In the grid the gaps do not collapse
   the way they did as plain paragraphs, so the spacing is set on the inner
   elements and the two wrappers add none. */
.site-form .InputfieldMarkup,
.site-form .InputfieldSubmit { margin-bottom: 0; }
/* FormBuilder prints an empty stand-in label for a field that has none. */
.site-form .InputfieldHeaderHidden { display: none; }
.contact-form__note { font-size: 0.82rem; color: var(--c-ink-3-text); margin: 0 0 1.1rem; }
.site-form .InputfieldSubmit button { margin-top: 0.25rem; }
/* A field FormBuilder has flagged, and what it says about it. */
.site-form .InputfieldStateError .InputfieldContent input,
.site-form .InputfieldStateError .InputfieldContent textarea { border-color: rgba(203, 84, 74, 0.6); }
.site-form .input-error { margin-top: 0.4rem; font-size: 0.86rem; line-height: 1.45; color: #8A3128; }

/* Success state */
.contact-thanks {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.6), rgba(214, 199, 189, 0.28));
  border: 1px solid var(--glass-edge); border-radius: 18px;
  padding: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 20px 40px -24px rgba(42, 46, 44, 0.28);
}
.contact-thanks__coin {
  width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; color: var(--c-ink);
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.5) 42%, rgba(255, 255, 255, 0.2) 82%, rgba(255, 255, 255, 0.4) 100%),
    linear-gradient(165deg, rgba(166, 200, 205, 0.6), rgba(149, 189, 195, 0.82));
  border: 1px solid rgba(255, 255, 255, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 10px 18px -10px rgba(42, 46, 44, 0.22);
}
.contact-thanks__coin svg { width: 26px; height: 26px; }
.contact-thanks__title {
  font-family: var(--serif); font-weight: 300; line-height: 1.1;
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); color: var(--c-ink); margin: 1rem 0 0.6rem;
}
.contact-thanks__copy { color: var(--c-ink-2); line-height: 1.6; }
.contact-thanks__copy a { color: var(--c-water-ink); font-weight: 600; }
.contact-form__error a { color: inherit; font-weight: 600; text-decoration: underline; }

/* Info card tweaks + hours */
.contact-info-card { width: 100%; }
.contact-hours { margin-top: 1.35rem; padding-top: 1.35rem; border-top: 1px solid var(--c-line); }
.contact-hours__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.55em; margin-bottom: 0.85rem; }
.contact-status { display: inline-flex; align-items: center; gap: 0.5em; font-weight: 600; font-size: 0.92rem; }
.contact-status__dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.contact-status.is-open { color: var(--c-water-ink); }
.contact-status.is-open .contact-status__dot { background: var(--c-water-deep); box-shadow: 0 0 0 3px rgba(95, 142, 149, 0.18); }
.contact-status.is-closed { color: var(--c-ink-3-text); }
.contact-status.is-closed .contact-status__dot { background: var(--c-ink-3); }
.contact-hours__sub { color: var(--c-ink-3-text); font-size: 0.85rem; }
.contact-hours__list { display: grid; gap: 0.4rem; }
.contact-hours__row { display: flex; align-items: baseline; gap: 0.65rem; font-size: 0.92rem; color: var(--c-ink-2); }
.contact-hours__row dt { color: var(--c-ink-2); flex: 0 0 auto; }
/* Dotted leader tying each day to its time so the rows read as one line. */
.contact-hours__leader {
  flex: 1 1 auto; min-width: 0; align-self: center;
  border-bottom: 1px dotted rgba(42, 46, 44, 0.28);
  transform: translateY(-0.15em);
}
.contact-hours__row dd { flex: 0 0 auto; white-space: nowrap; }
.contact-hours__row.is-today { font-weight: 600; }
.contact-hours__row.is-today dt,
.contact-hours__row.is-today dd { color: var(--c-ink); }
.contact-hours__alt { color: var(--c-ink-3-text); font-size: 0.82em; font-style: italic; }

/* Map band */
.contact-map { position: relative; padding-block: clamp(1rem, 0.5rem + 2vw, 2rem) clamp(3rem, 2rem + 4vw, 5rem); }
/* Match the console's outer content edges exactly (same inset formula), so the
   map's left edge lines up with the brand panel and its right edge with the
   form. */
.contact-map__frame { padding-inline: var(--inset-mid); }
.contact-map__frame iframe {
  display: block; width: 100%; border: 0; border-radius: 18px;
  box-shadow: 0 30px 56px -28px rgba(42, 46, 44, 0.30);
  filter: saturate(0.92);
}

/* ============================================================
   REVIEWS (reviews template)
   ============================================================ */
/* Alex wanted one page that lets patients read reviews, leave one, and be
   gently guided on what to write, so "go to our site and click Reviews" is a
   complete instruction at the front desk. The panel carries the sea-glass /
   sand blend used by the footer lockup, so the page reads as part of the set. */
.rev-leave {
  position: relative;
  padding-block: clamp(2.5rem, 1.75rem + 3vw, 4.5rem);
  background:
    radial-gradient(58% 78% at 12% 8%, rgba(214, 199, 189, 0.30) 0%, rgba(214, 199, 189, 0) 62%),
    linear-gradient(180deg,
      rgba(201, 221, 222, 0) 0%,
      rgba(201, 221, 222, 0.46) 16%,
      rgba(214, 228, 229, 0.40) 84%,
      rgba(201, 221, 222, 0) 100%);
}
.rev-leave__inner {
  max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter);
  display: grid; gap: clamp(1.5rem, 1rem + 2vw, 2.75rem);
}
/* Asymmetric on desktop: the ask gets more room than the guidance. */
@media (min-width: 900px) {
  .rev-leave__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: start; }
}

.rev-leave__panel {
  position: relative;
  padding: clamp(1.75rem, 1.25rem + 1.5vw, 2.75rem);
  border-radius: 22px;
  background:
    radial-gradient(ellipse 90% 60% at 28% 12%, rgba(255, 255, 255, 0.42), transparent 65%),
    linear-gradient(155deg, rgba(166, 200, 205, 0.58), rgba(201, 192, 188, 0.90));
  border: 1px solid rgba(255, 255, 255, 0.60);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 22px 44px -22px var(--glass-shadow);
  -webkit-backdrop-filter: blur(10px) saturate(1.25);
  backdrop-filter: blur(10px) saturate(1.25);
}
.rev-leave__eyebrow {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: 1.0625rem; color: var(--c-ink-2);
  display: inline-flex; align-items: center; gap: 0.7em;
}
.rev-leave__eyebrow::before {
  content: ""; display: inline-block;
  width: 34px; height: 1px; background: rgba(95, 142, 149, 0.55);
}
.rev-leave__title {
  margin-top: 0.6rem;
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.9rem, 1.4rem + 2vw, 2.75rem);
  line-height: 1.05; letter-spacing: -0.02em; color: var(--c-ink);
}
.rev-leave__title em { font-style: italic; color: var(--c-water-ink); }
/* Deeper than --c-ink-2, which measures 4.3:1 and 4.2:1 on this panel and misses
   the 4.5:1 AA floor. The panel is a mid-tone glass rather than the light page
   ground, so secondary ink has to step down here - the same adjustment the
   footer lockup needs for .f-lede__city. */
.rev-leave__lede {
  margin-top: 0.85rem; max-width: 40ch;
  font-size: 1.05rem; line-height: 1.6; color: #3F4F4C;
}
.rev-leave__cta { margin-top: clamp(1.25rem, 1rem + 1vw, 1.75rem); }
.rev-leave__note {
  margin-top: 1rem; max-width: 44ch;
  font-size: 0.9rem; line-height: 1.5; color: #3F4F4C;
}

.rev-prompts { padding-top: clamp(0.5rem, 0.25rem + 1vw, 1.25rem); }
.rev-prompts__eyebrow {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: 1.0625rem; color: var(--c-ink-2);
  display: inline-flex; align-items: center; gap: 0.7em;
  margin-bottom: clamp(1rem, 0.75rem + 0.75vw, 1.5rem);
}
.rev-prompts__eyebrow::before {
  content: ""; display: inline-block;
  width: 34px; height: 1px; background: rgba(95, 142, 149, 0.55);
}
.rev-prompts__list { display: grid; gap: clamp(1.1rem, 0.9rem + 0.6vw, 1.6rem); }
.rev-prompt { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
.rev-prompt__num {
  font-family: var(--sans);
  font-size: 11px; font-weight: 500; letter-spacing: 0.16em;
  color: var(--c-water-ink);
  padding-top: 0.35em;
}
.rev-prompt__title {
  font-family: var(--serif); font-weight: 400;
  font-size: 1.1875rem; line-height: 1.2; color: var(--c-ink);
}
.rev-prompt__copy {
  margin-top: 0.35rem;
  font-size: 0.9875rem; line-height: 1.55; color: var(--c-ink-2);
}
.rev-prompts__foot {
  margin-top: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  padding-top: 1rem; border-top: 1px solid var(--c-line);
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: 1.05rem; line-height: 1.5; color: var(--c-ink-2);
}

/* ============================================================
   GALLERY (gallery template)
   Alex's office photography, 2026-09-01.

   Column masonry rather than a tile grid. Her set is seven portrait and seven
   landscape frames; equal tiles would either letterbox half of them or crop the
   rooms out of the tall ones, and a row of identical rectangles is the exact
   pattern every other dental site in Plymouth already uses. Letting each frame
   keep its own shape is what makes it read as a photographer's set.
   ============================================================ */
.gal {
  padding-block: 0 clamp(3.5rem, 2.5rem + 4vw, 6rem);
}
.gal__grid {
  columns: 1;
  column-gap: clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
}
@media (min-width: 620px)  { .gal__grid { columns: 2; } }
@media (min-width: 1040px) { .gal__grid { columns: 3; } }

.gal__item {
  margin: 0 0 clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
  /* Without this a figure can be split across two columns mid-image. */
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}

/* The tile is a button: it opens the lightbox rather than navigating. Reset the
   UA button chrome, keep a real focus ring (never outline:none bare). */
.gal__trigger {
  display: block; width: 100%;
  padding: 0; border: 0; background: none;
  cursor: zoom-in;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 18px 36px -22px var(--glass-shadow);
  transition: box-shadow 300ms ease, transform 300ms ease;
}
.gal__trigger:focus-visible {
  outline: 2px solid var(--c-water-ink);
  outline-offset: 3px;
}
.gal__trigger img {
  display: block; width: 100%; height: auto;
  border-radius: inherit;
  transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* A hairline of glass over the photo, so the tiles sit in the same material
   language as the hero frame instead of reading as bare rectangles. */
.gal__trigger::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--glass-edge);
}
@media (hover: hover) {
  .gal__trigger:hover { box-shadow: 0 26px 48px -20px var(--glass-shadow); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .gal__trigger:hover { transform: translateY(-3px); }
  .gal__trigger:hover img { transform: scale(1.035); }
}

/* ---- lightbox ---------------------------------------------------------- */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  padding: clamp(1rem, 0.5rem + 3vw, 3rem);
}
.lightbox[hidden] { display: none; }
.lightbox__backdrop {
  position: absolute; inset: 0;
  background: rgba(30, 28, 26, 0.82);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.lightbox__panel {
  position: relative;
  max-width: min(1100px, 100%);
  display: flex; flex-direction: column; align-items: center; gap: 0.85rem;
}
.lightbox__img {
  display: block;
  max-width: 100%;
  /* The height once left room for a caption under the tallest portrait
     frames. The caption is gone (2026-10-11); the height is kept so the
     photo sits where it always has, clear of the close button. */
  max-height: calc(100vh - 9rem);
  width: auto; height: auto;
  border-radius: 12px;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.7);
}
.lightbox__btn {
  position: absolute;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;   /* touch target floor */
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: #fff; cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease;
}
.lightbox__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (hover: hover) {
  .lightbox__btn:hover {
    background: rgba(255, 255, 255, 0.26);
    border-color: rgba(255, 255, 255, 0.55);
  }
}
.lightbox__btn--close { top: -14px; right: -14px; }
.lightbox__btn--prev  { left: -14px;  top: 50%; transform: translateY(-50%); }
.lightbox__btn--next  { right: -14px; top: 50%; transform: translateY(-50%); }

/* On narrow screens the side buttons would hang off the viewport, so they drop
   to the bottom corners of the frame instead. */
@media (max-width: 719px) {
  .lightbox__btn--prev  { left: 6px;  top: auto; bottom: 56px; transform: none; }
  .lightbox__btn--next  { right: 6px; top: auto; bottom: 56px; transform: none; }
  .lightbox__btn--close { top: -8px; right: -4px; }
}

@media (prefers-reduced-motion: no-preference) {
  .lightbox__img { animation: lightbox-in 260ms cubic-bezier(0.4, 0, 0.2, 1); }
}
@keyframes lightbox-in {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}

/* Stop the page behind the lightbox scrolling under it. */
body.has-lightbox { overflow: hidden; }


/* ============================================================
   PRINT (added 2026-10-04)
   ============================================================ */
/* There were no print rules at all, so a printed page was the phone layout
   with the "Call now / Schedule" bar repeated across every sheet and no
   practice name on it: the logo is white glass, and browsers leave background
   colours and images out when printing. People do print the contact page for
   the address and hours. This hides what is only useful on a screen, names
   the practice in plain ink, and keeps the address, phone and hours. */
@media print {
  body { background: #fff; padding-bottom: 0; }

  body::after,
  .skip-to-content, .mobile-actions, .mobile-menu, .status,
  .right-column__nav, .right-column__cta,
  .call-bar, .back-to-top,
  .hero__nav, .hero__dots, .hero__photo-caption, .hero__lotus, .hero__rule,
  .svc-hero__lotus, .trust__anchor-lotus, .contact-console__lotus,
  .trust__divider, .dr__divider, .team-profile__divider,
  .marquee, .contact-map, .lightbox,
  .f-brand, .f-nav, .f-base { display: none !important; }

  /* The header becomes one line of text at the top of the first sheet. */
  .site-header { position: static; background: none; border: 0; }
  .site-header__lockup { display: none !important; }
  .site-header__logo::after {
    content: "Soothing Dental";
    font-family: var(--serif); font-size: 18pt; font-weight: 400; color: #000;
  }

  /* Glass and glow are screen effects. */
  * {
    box-shadow: none !important; text-shadow: none !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }

  /* Text painted with a gradient prints as nothing without its background. */
  .trust__feature-lede .accent {
    background: none; color: var(--c-ink); -webkit-text-fill-color: currentColor;
  }

  /* Say where a link goes when it leaves the site. */
  .page-content a[href^="http"]::after,
  .service-prose a[href^="http"]::after {
    content: " (" attr(href) ")"; font-size: 0.85em; word-break: break-all;
  }

  /* A form cannot be filled in on paper, and the space kept under the hours
     for the watermark is not needed without the watermark. */
  .contact-console__panel { display: none !important; }
  .contact-console__brand { padding-bottom: 1rem; }

  h1, h2, h3 { break-after: avoid; }
  img, figure, .gal__item, .svc-faq__item, .contact-hours__row { break-inside: avoid; }
}