/* ==========================================================================
   Treasure Valley Water Solutions
   components.css :: header, mega menu, ADA widget, hero, accordion gallery,
   stats, reviews, forms, footer, floating mobile dock
   ========================================================================== */

/* --------------------------------------------------------------------------
   01 :: Header shell
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-2) var(--ease-soft),
              background-color var(--dur-2) var(--ease-soft),
              box-shadow var(--dur-2) var(--ease-soft);
}
.site-header.is-stuck {
  border-bottom-color: var(--border);
  box-shadow: 0 6px 24px rgba(6, 42, 60, .06);
}
html[data-contrast="high"] .site-header { background: #fff; border-bottom: 2px solid #000; }

.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 2.5vw, 2.5rem);
  min-height: var(--header-h);
}

.brand { display: inline-flex; align-items: center; flex: none; }
.brand-img {
  /* Grows with the header. --header-h scales on the same viewport curve but a
     step ahead, so the bar always clears the logo plus a little breathing
     room, and the hero fold math (which subtracts --header-h) stays exact. */
  /* Mobile floor stays at 52px: the phone header row has four controls beside
     the logo and a wider mark pushes them a hair past the screen edge. Desktop
     is where the "a lot bigger" lives (up to 96px). */
  height: clamp(52px, 6.4vw, 96px);
  width: auto;
  transition: transform var(--dur-2) var(--ease-spring);
}
.brand:hover .brand-img { transform: scale(1.03); }

/* --------------------------------------------------------------------------
   02 :: Primary navigation and mega menu
   -------------------------------------------------------------------------- */

.nav-primary { display: flex; align-items: center; gap: clamp(.4rem, 1.4vw, 1.5rem); }

.nav-item { position: relative; }

/* Mega panels anchor to the header, not to their own nav item. Anchoring to
   the item pushes a 1080px panel off the left edge of the viewport, because
   the item sits near the start of the bar. The sticky header already creates
   a containing block, so going static here centres the panel on the page. */
.nav-item.has-mega { position: static; }

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: .38em;
  padding: .7rem .55rem;
  font-weight: 600;
  font-size: calc(.98rem * var(--type-scale));
  color: var(--navy-900);
  border-radius: var(--r-xs);
  white-space: nowrap;
  transition: color var(--dur-1) var(--ease-soft);
}
.nav-link::after {
  content: "";
  position: absolute;
  left: .55rem; right: .55rem; bottom: .35rem;
  height: 2px;
  border-radius: 2px;
  background: var(--green-500);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--dur-2) var(--ease-out);
}
.nav-link:hover, .nav-item.is-open .nav-link { color: var(--teal-600); }
.nav-link:hover::after, .nav-item.is-open .nav-link::after { transform: scaleX(1); }
.nav-link[aria-current="page"] { color: var(--teal-600); }
.nav-link[aria-current="page"]::after { transform: scaleX(1); background: var(--sun-500); }

.nav-caret {
  width: .72em; height: .72em;
  transition: transform var(--dur-2) var(--ease-out);
}
.nav-item.is-open .nav-caret { transform: rotate(180deg); }

/* The mega panel. Anchored to the header, full bleed, rich media inside. */
.mega {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translate(-50%, -10px);
  width: min(94vw, 1080px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-4);
  padding: clamp(1.4rem, 2.4vw, 2.2rem);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-2) var(--ease-soft),
              transform var(--dur-2) var(--ease-out),
              visibility 0s linear var(--dur-2);
}
.nav-item.is-open .mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
  transition: opacity var(--dur-2) var(--ease-soft),
              transform var(--dur-2) var(--ease-out),
              visibility 0s;
}

.mega-grid {
  display: grid;
  grid-template-columns: 1.15fr 1.15fr .95fr;
  gap: clamp(1.2rem, 2.2vw, 2.2rem);
}
@media (max-width: 1080px) { .mega-grid { grid-template-columns: 1fr 1fr; } }

.mega-col > * + * { margin-top: .55rem; }

.mega-heading {
  font-family: var(--font-body);
  font-size: calc(.74rem * var(--type-scale));
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: .9rem;
}

.mega-link {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: .68rem .75rem;
  border-radius: var(--r-sm);
  transition: background-color var(--dur-1) var(--ease-soft), transform var(--dur-1) var(--ease-out);
}
.mega-link:hover { background: var(--aqua-50); transform: translateX(3px); }
.mega-link .icon-tile { width: 2.35rem; height: 2.35rem; border-radius: 8px; }
.mega-link .icon-tile svg { width: 1.15rem; height: 1.15rem; }
.mega-link > span { min-width: 0; }
.mega-link-title { display: block; font-weight: 700; color: var(--navy-900); font-size: calc(.97rem * var(--type-scale)); line-height: 1.3; }
.mega-link-desc { display: block; font-size: calc(.84rem * var(--type-scale)); color: var(--text-soft); line-height: 1.45; margin-top: .15rem; }

/* Featured promo card inside the mega menu */
.mega-feature {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  min-height: 250px;
  display: flex;
  align-items: flex-end;
  padding: 1.35rem;
  color: #fff;
  isolation: isolate;
}
.mega-feature img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 1s var(--ease-out);
}
.mega-feature::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,42,60,.15), rgba(6,42,60,.88));
  z-index: -1;
}
.mega-feature:hover img { transform: scale(1.07); }
.mega-feature h4 { color: #fff; margin-bottom: .3rem; }
.mega-feature p { font-size: calc(.87rem * var(--type-scale)); color: var(--aqua-200); margin-bottom: .8rem; }
@media (max-width: 1080px) { .mega-feature { grid-column: 1 / -1; min-height: 190px; } }

/* --------------------------------------------------------------------------
   03 :: Header utilities, translate and accessibility triggers
   -------------------------------------------------------------------------- */

.header-tools { display: flex; align-items: center; gap: .55rem; flex: none; }

.tool-btn {
  width: 2.65rem;
  height: 2.65rem;
  display: grid;
  place-items: center;
  border-radius: var(--r-round);
  border: 1px solid var(--border);
  color: var(--navy-800);
  background: var(--surface);
  transition: background-color var(--dur-1) var(--ease-soft),
              color var(--dur-1) var(--ease-soft),
              border-color var(--dur-1) var(--ease-soft),
              transform var(--dur-2) var(--ease-spring);
}
.tool-btn svg { width: 1.15rem; height: 1.15rem; }
.tool-btn:hover { background: var(--navy-900); color: #fff; border-color: var(--navy-900); transform: translateY(-2px); }

.header-phone {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 800;
  font-size: calc(1rem * var(--type-scale));
  color: var(--royal-500);   /* royal phone, as the old site header had it */
  white-space: nowrap;
  padding: .5rem .35rem;
}
.header-phone svg { width: 1.05rem; height: 1.05rem; color: var(--royal-500); }
.header-phone:hover { color: var(--royal-700); }

/* The header "Free water test" button is solid royal, echoing the old site's
   header button, rather than the baby blue the page buttons use. It sits in a
   busy white bar and the stronger blue holds its own there. */
.nav-cta { --btn-bg: var(--royal-500); --btn-ink: #fff; border-color: var(--royal-500); }
.nav-cta::before { background: var(--royal-700); }
.nav-cta:hover { border-color: var(--royal-700); }

/* Google Translate, restyled so the stock widget matches the site */
.translate-shell { position: relative; }
.translate-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 232px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-3);
  padding: .6rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--dur-2) var(--ease-soft), transform var(--dur-2) var(--ease-out), visibility 0s linear var(--dur-2);
  z-index: 60;
}
.translate-shell.is-open .translate-menu {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity var(--dur-2) var(--ease-soft), transform var(--dur-2) var(--ease-out), visibility 0s;
}
.translate-title {
  font-size: calc(.72rem * var(--type-scale));
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-mute);
  padding: .4rem .55rem .55rem;
}
.lang-btn {
  display: flex;
  width: 100%;
  align-items: center;
  gap: .6rem;
  padding: .58rem .55rem;
  border-radius: var(--r-xs);
  font-size: calc(.92rem * var(--type-scale));
  font-weight: 600;
  color: var(--navy-900);
  text-align: left;
  transition: background-color var(--dur-1) var(--ease-soft);
}
.lang-btn:hover { background: var(--aqua-50); }
.lang-btn[aria-pressed="true"] { background: var(--green-100); color: var(--green-800); }
.lang-flag { font-size: 1.05rem; line-height: 1; }

/* Hide the stock Google chrome, we drive it through our own controls */
#google_translate_element { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.goog-te-banner-frame, .skiptranslate iframe { display: none !important; }
body { top: 0 !important; }

/* --------------------------------------------------------------------------
   04 :: Mobile navigation drawer
   -------------------------------------------------------------------------- */

.nav-toggle { display: none; }

.drawer {
  position: fixed;
  inset: 0;
  z-index: 600;
  background: var(--surface);
  padding: calc(var(--header-h) + 1rem) var(--gutter) calc(7rem + var(--safe-b));
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-1.5%);
  transition: opacity var(--dur-2) var(--ease-soft), transform var(--dur-2) var(--ease-out), visibility 0s linear var(--dur-2);
}
.drawer.is-open {
  opacity: 1; visibility: visible; pointer-events: auto; transform: none;
  transition: opacity var(--dur-2) var(--ease-soft), transform var(--dur-2) var(--ease-out), visibility 0s;
}

.drawer-group + .drawer-group { margin-top: .4rem; border-top: 1px solid var(--line-2); padding-top: .4rem; }

.drawer-top {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem .2rem;
  font-family: var(--font-display);
  font-size: calc(1.5rem * var(--type-scale));
  font-weight: 600;
  color: var(--navy-900);
  text-align: left;
}
.drawer-top svg { width: 1.1rem; height: 1.1rem; color: var(--text-mute); transition: transform var(--dur-2) var(--ease-out); }
.drawer-group.is-open .drawer-top svg { transform: rotate(45deg); }

.drawer-sub {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-2) var(--ease-out);
}
.drawer-group.is-open .drawer-sub { grid-template-rows: 1fr; }
.drawer-sub > div { overflow: hidden; }
.drawer-sub a {
  display: block;
  padding: .7rem .2rem .7rem 1rem;
  border-left: 2px solid var(--line);
  color: var(--text-soft);
  font-weight: 600;
  font-size: calc(1rem * var(--type-scale));
}
.drawer-sub a:hover { color: var(--teal-600); border-left-color: var(--green-500); }

@media (max-width: 1080px) {
  .nav-primary, .header-phone { display: none; }
  .nav-toggle {
    display: grid;
    place-items: center;
    width: 2.9rem; height: 2.9rem;
    border-radius: var(--r-round);
    border: 1px solid var(--border);
    color: var(--navy-900);
  }
  .nav-toggle svg { width: 1.3rem; height: 1.3rem; }
  .nav-toggle .ico-x { display: none; }
  .nav-toggle[aria-expanded="true"] .ico-x { display: block; }
  .nav-toggle[aria-expanded="true"] .ico-bars { display: none; }
}

/* --------------------------------------------------------------------------
   05 :: ADA accessibility widget
   -------------------------------------------------------------------------- */

.ada-launcher {
  position: fixed;
  right: calc(1rem + var(--safe-r));
  bottom: calc(1rem + var(--safe-b));
  z-index: 700;
  width: 3.4rem; height: 3.4rem;
  display: grid;
  place-items: center;
  border-radius: var(--r-round);
  background: var(--navy-800);
  color: #fff;
  box-shadow: var(--sh-3);
  transition: transform var(--dur-2) var(--ease-spring), background-color var(--dur-1) var(--ease-soft);
}
.ada-launcher:hover { transform: scale(1.07); background: var(--teal-600); }
.ada-launcher svg { width: 1.6rem; height: 1.6rem; }

@media (max-width: 760px) {
  .ada-launcher { bottom: calc(5.6rem + var(--safe-b)); width: 3rem; height: 3rem; }
  .ada-launcher svg { width: 1.35rem; height: 1.35rem; }
}

.ada-panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 800;
  width: min(92vw, 380px);
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: var(--sh-4);
  padding: 1.5rem 1.35rem calc(2rem + var(--safe-b));
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(103%);
  visibility: hidden;
  transition: transform var(--dur-2) var(--ease-out), visibility 0s linear var(--dur-2);
}
.ada-panel.is-open {
  transform: none; visibility: visible;
  transition: transform var(--dur-2) var(--ease-out), visibility 0s;
}

.ada-scrim {
  position: fixed;
  inset: 0;
  z-index: 799;
  background: rgba(4, 26, 38, .45);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-2) var(--ease-soft), visibility 0s linear var(--dur-2);
}
.ada-scrim.is-open { opacity: 1; visibility: visible; transition: opacity var(--dur-2) var(--ease-soft), visibility 0s; }

.ada-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.1rem;
}
.ada-head h2 { font-size: calc(1.35rem * var(--type-scale)); }
.ada-head p { font-size: calc(.85rem * var(--type-scale)); color: var(--text-soft); margin: .3rem 0 0; }

.ada-section + .ada-section { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--line-2); }
.ada-section h3 {
  font-family: var(--font-body);
  font-size: calc(.74rem * var(--type-scale));
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: .8rem;
}

.ada-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .72rem 0;
}
.ada-row-label { display: block; font-weight: 600; font-size: calc(.96rem * var(--type-scale)); }
.ada-row-note { display: block; font-size: calc(.8rem * var(--type-scale)); color: var(--text-mute); margin-top: .1rem; }

/* Accessible switch built from a real button */
.switch {
  position: relative;
  width: 3.1rem; height: 1.75rem;
  border-radius: var(--r-round);
  background: var(--line);
  flex: none;
  transition: background-color var(--dur-2) var(--ease-soft);
}
.switch::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 1.35rem; height: 1.35rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--sh-1);
  transition: transform var(--dur-2) var(--ease-spring);
}
.switch[aria-pressed="true"] { background: var(--green-600); }
.switch[aria-pressed="true"]::after { transform: translateX(1.35rem); }

/* Segmented stepper for text size */
.stepper {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  border: 1px solid var(--border);
  border-radius: var(--r-round);
  padding: .25rem;
}
.stepper button {
  width: 2rem; height: 2rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  color: var(--navy-900);
  transition: background-color var(--dur-1) var(--ease-soft);
}
.stepper button:hover { background: var(--aqua-50); }
.stepper output {
  min-width: 3.1rem;
  text-align: center;
  font-size: calc(.85rem * var(--type-scale));
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ada-reset {
  width: 100%;
  margin-top: 1.4rem;
  padding: .85rem;
  border-radius: var(--r-round);
  border: 1px solid var(--border);
  font-weight: 700;
  font-size: calc(.92rem * var(--type-scale));
  color: var(--navy-900);
  transition: background-color var(--dur-1) var(--ease-soft);
}
.ada-reset:hover { background: var(--aqua-50); }

.ada-statement {
  margin-top: 1.1rem;
  font-size: calc(.82rem * var(--type-scale));
  color: var(--text-soft);
  text-align: center;
}
.ada-statement a { color: var(--teal-600); text-decoration: underline; text-underline-offset: .15em; }

/* --------------------------------------------------------------------------
   06 :: Floating mobile dock, anchored above the home indicator
   -------------------------------------------------------------------------- */

.mobile-dock {
  display: none;
  position: fixed;
  left: calc(.65rem + var(--safe-l));
  right: calc(.65rem + var(--safe-r));
  bottom: calc(.65rem + var(--safe-b));
  z-index: 690;
  padding: .4rem;
  border-radius: var(--r-round);
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--border);
  box-shadow: 0 10px 34px rgba(6, 42, 60, .18);
}
.dock-inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem; }

.dock-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .22rem;
  min-height: 3.35rem;
  padding: .35rem .2rem;
  border-radius: var(--r-round);
  font-size: calc(.72rem * var(--type-scale));
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--navy-900);
  transition: background-color var(--dur-1) var(--ease-soft), color var(--dur-1) var(--ease-soft);
}
.dock-item svg { width: 1.25rem; height: 1.25rem; }
.dock-item:active { background: var(--aqua-50); }
/* The phone dock's book button matches the page buttons: baby blue needs the
   navy label, not white. */
.dock-item.is-primary { background: var(--aqua-300); color: var(--navy-900); }
.dock-item.is-primary:active { background: var(--navy-800); color: #fff; }

@media (max-width: 760px) {
  .mobile-dock { display: block; }
  body { padding-bottom: 5.2rem; }
}

/* --------------------------------------------------------------------------
   07 :: Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  /* Tight enough that headline, lede, actions, stats and media all land
     inside the first viewport on a 900px laptop screen. */
  padding-block: clamp(1.3rem, 1.8vw, 1.8rem) clamp(1.3rem, 2vw, 1.9rem);
  overflow: hidden;
}
.hero .stack-lg { --flow: 1.35rem; }

/* Short laptop screens: scale the headline and media down so the whole hero,
   stats included, still clears the fold. */
@media (min-width: 981px) and (max-height: 850px) {
  /* .hero prefix keeps these ahead of the base rules in the cascade, which
     appear later in this file at equal specificity. */
  .hero .hero-title { font-size: calc(3.55rem * var(--type-scale)); }
  .hero .hero-media-main { max-height: 52vh; }
  .hero .lede { font-size: calc(1.05rem * var(--type-scale)); }
}
.hero::before {
  content: "";
  position: absolute;
  top: -25%; right: -12%;
  width: 62vw; height: 62vw;
  max-width: 900px; max-height: 900px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(79,182,214,.24), rgba(39,167,118,.12) 45%, transparent 68%);
  pointer-events: none;
  z-index: 0;
}
.hero > * { position: relative; z-index: 1; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  gap: clamp(1.8rem, 4vw, 4.2rem);
  align-items: center;
}
@media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; } }

.hero-title {
  margin-bottom: 1.1rem;
  /* Slightly below the global h1 ceiling so two lines plus the rest of the
     column stay above the fold. */
  font-size: calc(clamp(2.4rem, 5.6vw, 5rem) * var(--type-scale));
}

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.2rem, 3vw, 2.8rem);
  margin-top: clamp(1.2rem, 2.4vw, 1.9rem);
  padding-top: clamp(1rem, 2vw, 1.5rem);
  border-top: 1px solid var(--border);
}
.hero-stat-num {
  display: block;
  font-family: var(--font-display);
  font-size: calc(clamp(1.75rem, 3vw, 2.5rem) * var(--type-scale));
  font-weight: 600;
  line-height: 1;
  color: var(--navy-900);
  letter-spacing: -.03em;
}
.hero-stat-label {
  display: block;
  margin-top: .3rem;
  font-size: calc(.83rem * var(--type-scale));
  color: var(--text-soft);
  max-width: 17ch;
  line-height: 1.4;
}

/* Stacked hero media, deliberately asymmetric */
.hero-media { position: relative; }
.hero-media-main {
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  /* The media column is what used to push the hero past the fold. Cap it to
     the viewport; object-fit absorbs the ratio change. */
  max-height: min(59vh, 580px);
  box-shadow: var(--sh-3);
}
.hero-media-main img { width: 100%; height: 100%; object-fit: cover; }

.hero-media-float {
  position: absolute;
  left: -8%;
  bottom: 7%;
  width: 46%;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 1;
  border: 6px solid var(--surface);
  box-shadow: var(--sh-3);
}
.hero-media-float img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 620px) { .hero-media-float { width: 52%; left: -4%; } }

.hero-chip {
  position: absolute;
  top: 6%;
  right: -6%;
  background: var(--surface);
  border-radius: var(--r-md);
  box-shadow: var(--sh-3);
  padding: .85rem 1.15rem;
  display: flex;
  align-items: center;
  gap: .7rem;
  max-width: 15rem;
}
.hero-chip .icon-tile { width: 2.3rem; height: 2.3rem; }
.hero-chip .icon-tile svg { width: 1.15rem; height: 1.15rem; }
.hero-chip-text { display: block; font-size: calc(.83rem * var(--type-scale)); font-weight: 700; line-height: 1.3; color: var(--navy-900); }
.hero-chip-sub { display: block; font-size: calc(.74rem * var(--type-scale)); color: var(--text-mute); font-weight: 500; }
@media (max-width: 620px) { .hero-chip { right: 0; padding: .65rem .85rem; max-width: 12rem; } }

/* --------------------------------------------------------------------------
   08 :: Marquee ticker
   -------------------------------------------------------------------------- */

.marquee {
  overflow: hidden;
  /* Sits clear of the hero stats above it rather than crowding them */
  margin-top: clamp(2rem, 4vw, 3.5rem);
  padding-block: clamp(1rem, 2vw, 1.6rem);
  border-block: 1px solid var(--border);
  background: var(--surface);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: clamp(1.6rem, 3vw, 3.2rem);
  animation: marquee-x 34s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-display);
  font-size: calc(clamp(1rem, 1.5vw, 1.25rem) * var(--type-scale));
  font-weight: 500;
  color: var(--navy-800);
  white-space: nowrap;
}
.marquee-item svg { width: 1em; height: 1em; color: var(--green-500); flex: none; }
.marquee-dot { width: .42rem; height: .42rem; border-radius: 50%; background: var(--sun-500); flex: none; }

/* --------------------------------------------------------------------------
   09 :: Horizontal accordion gallery
   Panels collapse to a slim teaser and expand on hover or tap. On narrow
   screens the row becomes a vertical stack so nothing is ever cut off.
   -------------------------------------------------------------------------- */

.acc-gallery {
  display: flex;
  gap: .7rem;
  height: clamp(420px, 58vh, 620px);
  width: 100%;
}

.acc-panel {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--navy-900);
  cursor: pointer;
  isolation: isolate;
  transition: flex-grow var(--dur-3) var(--ease-out);
}
.acc-panel.is-active { flex-grow: 5.2; cursor: default; }

.acc-panel img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform var(--dur-4) var(--ease-out), filter var(--dur-3) var(--ease-soft);
  transform: scale(1.06);
  filter: saturate(.75) brightness(.72);
}
.acc-panel.is-active img { transform: scale(1); filter: saturate(1) brightness(.86); }

.acc-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(185deg, rgba(4,26,38,.16) 8%, rgba(4,26,38,.82) 84%);
  transition: opacity var(--dur-3) var(--ease-soft);
}

/* Collapsed state: vertical label pinned to the bottom */
.acc-teaser {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.3rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  transition: opacity var(--dur-2) var(--ease-soft);
}
.acc-panel.is-active .acc-teaser { opacity: 0; pointer-events: none; }

.acc-index {
  font-family: var(--font-mono);
  font-size: calc(.76rem * var(--type-scale));
  color: var(--sun-500);
  letter-spacing: .12em;
}
.acc-vertical {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-display);
  font-size: calc(clamp(1rem, 1.35vw, 1.28rem) * var(--type-scale));
  font-weight: 600;
  color: #fff;
  letter-spacing: .01em;
  white-space: nowrap;
  text-shadow: 0 2px 14px rgba(4,26,38,.5);
}

/* Expanded state */
.acc-body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: clamp(1.4rem, 2.6vw, 2.4rem);
  color: #fff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-3) var(--ease-soft) .1s, transform var(--dur-3) var(--ease-out) .1s;
  max-width: 42rem;
}
.acc-panel.is-active .acc-body { opacity: 1; transform: none; }
.acc-body h3 { color: #fff; margin-bottom: .55rem; }
.acc-body p {
  color: var(--aqua-200);
  font-size: calc(.97rem * var(--type-scale));
  line-height: 1.6;
  margin-bottom: 1rem;
  max-width: 46ch;
}
.acc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.1rem;
}
.acc-tag {
  padding: .34em .85em;
  border-radius: var(--r-round);
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  font-size: calc(.76rem * var(--type-scale));
  font-weight: 600;
  color: #fff;
}

@media (max-width: 860px) {
  .acc-gallery { flex-direction: column; height: auto; gap: .8rem; }
  .acc-panel { flex: none; height: 128px; transition: height var(--dur-3) var(--ease-out); }
  .acc-panel.is-active { height: 400px; }
  .acc-teaser { flex-direction: row; align-items: center; justify-content: flex-start; gap: .9rem; }
  .acc-vertical { writing-mode: horizontal-tb; transform: none; }
  .acc-body { position: absolute; }
}

/* --------------------------------------------------------------------------
   10 :: Symptom / feature tiles with imagery
   -------------------------------------------------------------------------- */

.tile {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--sh-1);
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-soft);
}
.tile:hover { transform: translateY(-6px); box-shadow: var(--sh-3); }
.tile-media { aspect-ratio: 16 / 10; overflow: hidden; }
.tile-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.tile:hover .tile-media img { transform: scale(1.07); }
.tile-body { padding: clamp(1.15rem, 2vw, 1.6rem); }
.tile-body h3 { font-size: calc(1.2rem * var(--type-scale)); margin-bottom: .45rem; }
.tile-body p { font-size: calc(.94rem * var(--type-scale)); color: var(--text-soft); margin: 0; }
.tile-kicker {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--font-mono);
  font-size: calc(.72rem * var(--type-scale));
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--green-700);
  margin-bottom: .55rem;
}

/* --------------------------------------------------------------------------
   11 :: Stats, tables and data modules
   -------------------------------------------------------------------------- */

.stat-card {
  padding: clamp(1.3rem, 2.4vw, 2rem);
  border-radius: var(--r-md);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  transition: transform var(--dur-2) var(--ease-spring),
              background-color var(--dur-2) var(--ease-soft),
              border-color var(--dur-2) var(--ease-soft),
              box-shadow var(--dur-2) var(--ease-soft);
}
/* Hover: rise hard, darken the surface, let the gold numeral carry the glow */
.stat-card:hover {
  transform: translateY(-14px);
  background: rgba(4, 26, 38, .68);
  border-color: rgba(245, 195, 59, .5);
  box-shadow: 0 22px 48px rgba(4, 26, 38, .5);
}
.bg-bone .stat-card, .bg-mist .stat-card { background: var(--surface); border-color: var(--border); box-shadow: var(--sh-1); }
.bg-bone .stat-card:hover, .bg-mist .stat-card:hover {
  background: var(--aqua-100);
  border-color: var(--teal-600);
  box-shadow: var(--sh-3);
}

.stat-num {
  display: block;
  font-family: var(--font-display);
  font-size: calc(clamp(2.4rem, 5vw, 3.9rem) * var(--type-scale));
  font-weight: 600;
  line-height: .95;
  letter-spacing: -.04em;
  color: var(--sun-500);
  font-variant-numeric: tabular-nums;
}
.bg-bone .stat-num, .bg-mist .stat-num { color: var(--teal-600); }
.stat-label {
  margin-top: .7rem;
  font-size: calc(.92rem * var(--type-scale));
  line-height: 1.5;
  color: var(--aqua-200);
}
.bg-bone .stat-label, .bg-mist .stat-label { color: var(--text-soft); }

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--sh-2);
  -webkit-overflow-scrolling: touch;
}
.data-table { min-width: 560px; font-size: calc(.95rem * var(--type-scale)); }
.data-table th, .data-table td { padding: .8rem 1rem; text-align: left; border-bottom: 1px solid var(--line-2); }
/* Navy header band so the table reads as its own object on any section
   background, tinted or white. */
.data-table thead th {
  background: var(--navy-800);
  font-family: var(--font-body);
  font-size: calc(.76rem * var(--type-scale));
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  border-bottom: 0;
}
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr { transition: background-color var(--dur-1) var(--ease-soft); }
.data-table tbody tr:hover { background: var(--aqua-50); }
.data-table caption { caption-side: bottom; padding: .9rem 1.15rem; text-align: left; font-size: calc(.82rem * var(--type-scale)); color: var(--text-mute); }

.pill {
  display: inline-block;
  padding: .3em .8em;
  border-radius: var(--r-round);
  font-size: calc(.78rem * var(--type-scale));
  font-weight: 700;
  white-space: nowrap;
}
.pill-ok { background: var(--green-100); color: var(--green-800); }
.pill-warn { background: var(--sun-100); color: var(--sun-600); }
.pill-high { background: #FBE3E3; color: #9C2020; }

/* Editorial call-out, one of the required high utility modules */
.callout {
  position: relative;
  border-radius: var(--r-md);
  padding: clamp(1.2rem, 2.2vw, 1.8rem) clamp(1.3rem, 2.4vw, 2rem);
  background: var(--aqua-50);
  border-left: 4px solid var(--aqua-500);
}
.callout h4 { margin-bottom: .4rem; }
.callout p:last-child { margin-bottom: 0; }
.callout-green { background: var(--green-100); border-left-color: var(--green-600); }
.callout-sun { background: var(--sun-100); border-left-color: var(--sun-500); }
.callout-kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: calc(.72rem * var(--type-scale));
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: .45rem;
}

/* Field notes blockquote */
.field-note {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: clamp(1.3rem, 2.4vw, 2rem);
  background: var(--surface);
  box-shadow: var(--sh-1);
}
.field-note blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: calc(clamp(1.1rem, 1.7vw, 1.4rem) * var(--type-scale));
  line-height: 1.45;
  color: var(--navy-900);
}
.field-note figcaption {
  margin-top: .9rem;
  font-size: calc(.85rem * var(--type-scale));
  color: var(--text-mute);
  font-weight: 600;
}

/* Decision matrix: If / Then cards in a two-up grid. Each situation reads as
   its own diagnosis card instead of a row in a ledger. */
.matrix {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: clamp(.9rem, 1.8vw, 1.4rem);
}
.matrix-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .55rem;
  padding: clamp(1.2rem, 2.2vw, 1.7rem);
  border: 1px solid var(--border);
  border-top: 4px solid var(--aqua-500);
  border-radius: var(--r-md);
  background: linear-gradient(160deg, var(--aqua-100), var(--surface) 60%);
  box-shadow: var(--sh-1);
  font-size: calc(.95rem * var(--type-scale));
  transition: transform var(--dur-2) var(--ease-spring),
              box-shadow var(--dur-2) var(--ease-soft),
              border-color var(--dur-2) var(--ease-soft);
}
.matrix-row:hover {
  transform: translateY(-7px);
  box-shadow: var(--sh-3);
  border-color: var(--aqua-500);
  background: linear-gradient(160deg, var(--aqua-100), var(--aqua-100) 40%, var(--surface));
}
.matrix-row:hover > span:first-child { color: var(--navy-800); }
.matrix-row > span:first-child {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: calc(1.14rem * var(--type-scale));
  line-height: 1.25;
  color: var(--navy-900);
}
.matrix-row > span:first-child::before {
  content: "If";
  display: block;
  font-family: var(--font-mono);
  font-size: calc(.68rem * var(--type-scale));
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--teal-600);
  margin-bottom: .3rem;
}
.matrix-arrow { display: none; }
.matrix-row > span:last-child { color: var(--text-soft); line-height: 1.55; }
.matrix-row > span:last-child::before {
  content: "Then";
  display: block;
  font-family: var(--font-mono);
  font-size: calc(.68rem * var(--type-scale));
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--teal-600);
  margin-bottom: .3rem;
  padding-top: .45rem;
  border-top: 1px dashed var(--aqua-300);
  width: 100%;
}

/* --------------------------------------------------------------------------
   12 :: Process steps
   -------------------------------------------------------------------------- */

.steps { counter-reset: step; display: grid; gap: clamp(1rem, 2vw, 1.8rem); }

/* A block that follows a card grid needs its own air, otherwise it sits
   flush against the cards above it. */
.steps + .callout,
.auto-grid + .callout,
.grid12 + .callout,
.table-scroll + .callout {
  margin-top: clamp(1.8rem, 3.5vw, 3rem);
}

.step {
  position: relative;
  padding: clamp(1.3rem, 2.4vw, 2rem);
  border: 1px solid var(--aqua-200);
  border-radius: var(--r-md);
  background: linear-gradient(155deg, var(--aqua-100), var(--aqua-50) 55%, var(--surface));
  overflow: hidden;
  transition: transform var(--dur-2) var(--ease-spring),
              box-shadow var(--dur-2) var(--ease-soft),
              border-color var(--dur-2) var(--ease-soft);
}
.step:hover {
  transform: translateY(-9px);
  box-shadow: var(--sh-3);
  border-color: var(--green-500);
}
.step::before {
  counter-increment: step;
  content: "0" counter(step);
  position: absolute;
  top: .5rem; right: 1rem;
  font-family: var(--font-display);
  font-size: calc(clamp(3rem, 6vw, 4.6rem) * var(--type-scale));
  font-weight: 600;
  line-height: 1;
  color: var(--green-100);
  pointer-events: none;
  transform-origin: top right;
  transition: color var(--dur-2) var(--ease-soft), transform var(--dur-3) var(--ease-spring);
}
.step:hover::before {
  color: var(--green-300);
  transform: scale(1.14) translateX(-2px);
}
.step h3 {
  position: relative;
  margin-bottom: .5rem;
  font-size: calc(1.2rem * var(--type-scale));
  transition: color var(--dur-1) var(--ease-soft);
}
.step:hover h3 { color: var(--green-700); }
.step p { position: relative; margin: 0; color: var(--text-soft); font-size: calc(.94rem * var(--type-scale)); }

/* --------------------------------------------------------------------------
   13 :: Reviews
   -------------------------------------------------------------------------- */

.rating-block { display: flex; align-items: center; gap: 1rem; }
.rating-score {
  font-family: var(--font-display);
  font-size: calc(3rem * var(--type-scale));
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--navy-900);
}
.stars { display: inline-flex; gap: 2px; }
.stars svg { width: 1.15rem; height: 1.15rem; color: var(--sun-500); }
.rating-meta { font-size: calc(.9rem * var(--type-scale)); color: var(--text-soft); }

.review-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(1.3rem, 2.3vw, 1.9rem);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--sh-1);
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-soft);
}
.review-card:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.review-text {
  flex: 1;
  font-family: var(--font-display);
  font-size: calc(1.06rem * var(--type-scale));
  line-height: 1.55;
  color: var(--navy-900);
  margin: .9rem 0 1.2rem;
}
.review-who { display: flex; align-items: center; gap: .8rem; }
.review-avatar {
  width: 2.7rem; height: 2.7rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--aqua-100);
  color: var(--navy-800);
  font-weight: 800;
  font-size: calc(.92rem * var(--type-scale));
  flex: none;
}
.review-name { display: block; font-weight: 700; font-size: calc(.95rem * var(--type-scale)); line-height: 1.25; }
.review-src { display: block; font-size: calc(.8rem * var(--type-scale)); color: var(--text-mute); }
.reviews-loading { padding: 2rem; text-align: center; color: var(--text-mute); grid-column: 1 / -1; }

/* --------------------------------------------------------------------------
   14 :: FAQ accordion
   -------------------------------------------------------------------------- */

.faq { border-top: 1px solid var(--border); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-q {
  display: flex;
  width: 100%;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1.1rem, 2vw, 1.6rem) 0;
  text-align: left;
  font-family: var(--font-display);
  font-size: calc(clamp(1.08rem, 1.55vw, 1.3rem) * var(--type-scale));
  font-weight: 600;
  color: var(--navy-900);
  transition: color var(--dur-1) var(--ease-soft);
}
.faq-q:hover { color: var(--teal-600); }
.faq-icon {
  position: relative;
  width: 1.5rem; height: 1.5rem;
  flex: none;
  margin-top: .2rem;
}
.faq-icon::before, .faq-icon::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 1rem; height: 2px;
  background: var(--green-600);
  transform: translate(-50%, -50%);
  transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-soft);
}
.faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item.is-open .faq-icon::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }

.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-2) var(--ease-out);
}
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }
.faq-a p {
  padding-bottom: clamp(1.1rem, 2vw, 1.6rem);
  color: var(--text-soft);
  max-width: 72ch;
}

/* --------------------------------------------------------------------------
   15 :: Forms
   -------------------------------------------------------------------------- */

.field { margin-bottom: 1.05rem; }
.field label {
  display: block;
  margin-bottom: .42rem;
  font-weight: 700;
  font-size: calc(.9rem * var(--type-scale));
  color: var(--navy-900);
}
.field .req { color: #B02525; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: .92rem 1.05rem;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: calc(1rem * var(--type-scale));
  transition: border-color var(--dur-1) var(--ease-soft), box-shadow var(--dur-1) var(--ease-soft);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--aqua-500);
  box-shadow: 0 0 0 4px var(--aqua-100);
}
.field textarea { min-height: 130px; resize: vertical; }
.field-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.05rem; }
@media (max-width: 560px) { .field-2 { grid-template-columns: 1fr; } }
.field-hint { margin-top: .35rem; font-size: calc(.8rem * var(--type-scale)); color: var(--text-mute); }

.check-row { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: 1.2rem; }
.check-row input { width: 1.25rem; height: 1.25rem; flex: none; margin-top: .18rem; accent-color: var(--green-600); }
.check-row label { font-weight: 500; font-size: calc(.86rem * var(--type-scale)); color: var(--text-soft); margin: 0; line-height: 1.5; }

.form-status {
  display: none;
  padding: 1rem 1.15rem;
  border-radius: var(--r-sm);
  margin-bottom: 1.1rem;
  font-size: calc(.94rem * var(--type-scale));
}
.form-status.is-on { display: block; }
.form-status.is-ok { background: var(--green-100); color: var(--green-800); border: 1px solid var(--green-500); }
.form-status.is-bad { background: #FBE3E3; color: #9C2020; border: 1px solid #E4A5A5; }

.booking-slot { min-height: 600px; border-radius: var(--r-md); overflow: hidden; }
.booking-placeholder {
  min-height: 380px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 2rem;
  background: var(--aqua-50);
  border: 2px dashed var(--aqua-400);
  border-radius: var(--r-md);
}
.booking-placeholder svg { width: 2.8rem; height: 2.8rem; color: var(--aqua-500); margin: 0 auto 1rem; }
.booking-placeholder code {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: .1rem .45rem;
  font-family: var(--font-mono);
  font-size: .88em;
  color: var(--teal-600);
}

/* Contact rail */
.contact-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-soft);
}
.contact-item:hover { transform: translateX(4px); box-shadow: var(--sh-2); }
.contact-item h3 { font-size: calc(1rem * var(--type-scale)); margin-bottom: .18rem; }
.contact-item p { font-size: calc(.93rem * var(--type-scale)); color: var(--text-soft); margin: 0; }
.contact-item a { font-weight: 700; color: var(--teal-600); }

/* --------------------------------------------------------------------------
   16 :: CTA band
   -------------------------------------------------------------------------- */

.cta-band {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 4vw, 4rem);
  background: linear-gradient(140deg, var(--navy-800), var(--navy-950));
  color: #fff;
  text-align: center;
  isolation: isolate;
}
.cta-band::before {
  content: "";
  position: absolute;
  top: -40%; left: 50%;
  width: 120%; height: 180%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 30%, rgba(39,167,118,.34), transparent 58%);
  z-index: -1;
  pointer-events: none;
}
.cta-band h2 { color: #fff; }
.cta-band .lede { color: var(--aqua-200); margin-inline: auto; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 2rem; }

/* --------------------------------------------------------------------------
   17 :: Footer
   -------------------------------------------------------------------------- */

.site-footer { background: var(--navy-950); color: var(--aqua-200); padding-top: clamp(3rem, 6vw, 5rem); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr 1.3fr;
  gap: clamp(1.6rem, 3vw, 3rem);
  padding-bottom: clamp(2rem, 4vw, 3.4rem);
}
@media (max-width: 1080px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

.site-footer h4 {
  color: #fff;
  font-family: var(--font-body);
  font-size: calc(.75rem * var(--type-scale));
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}
.site-footer li { margin-bottom: .62rem; }
.site-footer a { color: var(--aqua-200); font-size: calc(.94rem * var(--type-scale)); transition: color var(--dur-1) var(--ease-soft); }
.site-footer a:hover { color: var(--sun-500); }
.site-footer p { font-size: calc(.94rem * var(--type-scale)); color: var(--aqua-200); }

.footer-brand-img { height: 62px; width: auto; margin-bottom: 1.1rem; }

.social-row { display: flex; gap: .65rem; margin-top: 1.2rem; }
.social-row a {
  width: 2.6rem; height: 2.6rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.09);
  color: #fff;
  transition: background-color var(--dur-1) var(--ease-soft), transform var(--dur-2) var(--ease-spring);
}
.social-row a:hover { background: var(--green-600); transform: translateY(-3px); }
.social-row svg { width: 1.15rem; height: 1.15rem; }

.footer-base {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 1.6rem;
  align-items: center;
  justify-content: space-between;
  padding-block: 1.4rem calc(1.6rem + var(--safe-b));
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: calc(.85rem * var(--type-scale));
  color: var(--aqua-200);
}
.footer-legal { display: flex; flex-wrap: wrap; gap: 1.1rem; }
.footer-base p { font-size: calc(.85rem * var(--type-scale)); margin: 0; }

/* --------------------------------------------------------------------------
   18 :: Breadcrumbs and page headers
   -------------------------------------------------------------------------- */

.page-head {
  position: relative;
  padding-block: clamp(2.6rem, 5.5vw, 5rem);
  background: linear-gradient(170deg, var(--aqua-50), var(--surface) 78%);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.page-head::before {
  content: "";
  position: absolute;
  top: -60%; right: -10%;
  width: 46vw; height: 46vw;
  max-width: 620px; max-height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(79,182,214,.2), transparent 66%);
  pointer-events: none;
}
.page-head > * { position: relative; }

.crumbs { display: flex; flex-wrap: wrap; gap: .45rem; font-size: calc(.84rem * var(--type-scale)); color: var(--text-mute); margin-bottom: 1.1rem; }
.crumbs li { display: flex; align-items: center; gap: .45rem; }
.crumbs li + li::before { content: "/"; color: var(--line); }
.crumbs a:hover { color: var(--teal-600); }

/* --------------------------------------------------------------------------
   19 :: Google reviews widget
   Summary bar with the live rating, then a horizontal rail of review cards.
   -------------------------------------------------------------------------- */

/* Scoped to :root as well as .gr, because the summary bar renders into a
   separate container that sits outside the .gr wrapper. Keeping these on .gr
   alone left the summary stars falling back to the inherited text colour. */
:root, .gr {
  --gr-gold: #FBBC05;
  --gr-blue: #4285F4;
  --gr-green: #34A853;
  --gr-red: #EA4335;
}

/* Summary bar */
.gr-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  margin-bottom: clamp(1.4rem, 2.6vw, 2.2rem);
}

.gr-ident { display: flex; align-items: center; gap: var(--s4); min-width: 0; }

.gr-glyph {
  width: 4.15rem;
  height: 4.15rem;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--sh-1);
}
.gr-glyph svg { width: 2.05rem; height: 2.05rem; }

.gr-headline { display: flex; align-items: center; flex-wrap: wrap; gap: .55rem .7rem; }

.gr-score {
  font-family: var(--font-display);
  font-size: calc(2.1rem * var(--type-scale));
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--navy-900);
  font-variant-numeric: tabular-nums;
}

.gr-stars { display: inline-flex; gap: 1px; }
.gr-stars svg { width: 1.35rem; height: 1.35rem; color: var(--gr-gold); }

.gr-badge {
  display: inline-flex;
  align-items: center;
  padding: .42em .82em;
  border-radius: var(--r-xs);
  background: var(--green-600);
  color: #fff;
  font-size: calc(.76rem * var(--type-scale));
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  line-height: 1;
}

.gr-count {
  margin-top: .6rem;
  font-size: calc(.95rem * var(--type-scale));
  color: var(--text-soft);
}
.gr-count strong { color: var(--navy-900); font-weight: 700; }

.gr-all {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  flex: none;
  padding: .95rem 1.35rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  font-weight: 700;
  font-size: calc(.97rem * var(--type-scale));
  color: var(--navy-900);
  box-shadow: var(--sh-1);
  transition: transform var(--dur-2) var(--ease-spring),
              box-shadow var(--dur-2) var(--ease-soft),
              border-color var(--dur-1) var(--ease-soft);
}
.gr-all:hover { transform: translateY(-2px); box-shadow: var(--sh-2); border-color: var(--aqua-400); }
.gr-all svg { width: .95rem; height: .95rem; }

/* Horizontal rail of cards */
.gr-rail-wrap { position: relative; }

.gr-rail {
  display: flex;
  gap: var(--s5);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: .35rem .35rem 1.1rem;
  margin-inline: -.35rem;
}
.gr-rail::-webkit-scrollbar { display: none; }

.gr-card {
  flex: 0 0 clamp(260px, 27vw, 320px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  padding: clamp(1.15rem, 2vw, 1.5rem);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--sh-1);
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-soft);
}
.gr-card:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }

.gr-head { display: flex; align-items: flex-start; gap: .8rem; margin-bottom: .95rem; }

.gr-avatar {
  width: 2.85rem;
  height: 2.85rem;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
  font-size: calc(1.12rem * var(--type-scale));
  line-height: 1;
}

.gr-who { flex: 1; min-width: 0; }
.gr-name {
  display: block;
  font-weight: 700;
  font-size: calc(1.02rem * var(--type-scale));
  line-height: 1.25;
  color: var(--navy-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gr-meta {
  display: block;
  margin-top: .15rem;
  font-size: calc(.83rem * var(--type-scale));
  color: var(--text-mute);
}
.gr-mark { width: 1.35rem; height: 1.35rem; flex: none; }

.gr-card .gr-stars { margin-bottom: .75rem; }
.gr-card .gr-stars svg { width: 1.12rem; height: 1.12rem; }

.gr-text {
  font-size: calc(.99rem * var(--type-scale));
  line-height: 1.58;
  color: var(--text-soft);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Rail arrows, desktop only */
.gr-nav {
  position: absolute;
  top: 42%;
  z-index: 3;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--navy-900);
  box-shadow: var(--sh-2);
  transition: opacity var(--dur-1) var(--ease-soft), transform var(--dur-2) var(--ease-spring);
}
.gr-nav:hover { transform: scale(1.08); }
.gr-nav[disabled] { opacity: 0; pointer-events: none; }
.gr-nav svg { width: 1.15rem; height: 1.15rem; }
.gr-prev { left: -1.35rem; }
.gr-next { right: -1.35rem; }

@media (max-width: 900px) { .gr-nav { display: none; } }
@media (max-width: 560px) {
  .gr-bar { flex-direction: column; align-items: flex-start; }
  .gr-card { flex-basis: 84vw; }
}

.gr-loading { padding: 2rem 0; color: var(--text-mute); }

/* --------------------------------------------------------------------------
   20 :: Photo-backed dark section
   Layers a niche photograph under the deep navy so the stats band reads as
   water, not a flat colour. The gradient keeps the white text at AA contrast
   no matter what the image does.
   -------------------------------------------------------------------------- */

.bg-photo {
  background-image:
    linear-gradient(160deg, rgba(4, 26, 38, .93) 12%, rgba(8, 65, 92, .86) 60%, rgba(4, 26, 38, .94)),
    url('https://images.unsplash.com/photo-1512138664757-360e0aad5132?auto=format&fit=crop&w=2000&q=70');
  background-size: cover;
  background-position: center;
}
html[data-contrast="high"] .bg-photo { background-image: none; background-color: #001622; }

/* --------------------------------------------------------------------------
   21 :: Symptom index
   Editorial numbered rows in place of a uniform card grid. Each row: index
   numeral, kicker and copy, thumbnail. Hover slides the row, deepens the
   numeral and zooms the photo.
   -------------------------------------------------------------------------- */

.sym-list { border-top: 1px solid var(--border); }
@media (min-width: 1100px) {
  .sym-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(2rem, 4vw, 4rem);
  }
  /* In the two column index the thumbnails would squeeze the copy into tall
     narrow rows; the numeral and kicker carry the scanning job instead. */
  .sym-list .sym-thumb { display: none; }
  .sym-list .sym-row { grid-template-columns: 4.5rem minmax(0, 1fr); }
}

.sym-row {
  position: relative;
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) clamp(150px, 13vw, 220px);
  gap: clamp(1.2rem, 2.6vw, 2.8rem);
  align-items: center;
  padding: clamp(.9rem, 1.6vw, 1.3rem) clamp(.4rem, 1vw, 1rem);
  border-bottom: 1px solid var(--border);
  transition: background-color var(--dur-2) var(--ease-soft),
              padding-left var(--dur-2) var(--ease-out),
              border-color var(--dur-2) var(--ease-soft),
              box-shadow var(--dur-2) var(--ease-soft),
              transform var(--dur-2) var(--ease-spring);
}
.sym-row {
  border-left: 3px solid transparent;
  border-radius: var(--r-md);
}
.sym-row:hover {
  background: var(--green-100);
  border-left-color: var(--green-600);
  padding-left: clamp(1rem, 2vw, 1.8rem);
  box-shadow: var(--sh-2);
  transform: translateY(-3px);
}

.sym-num {
  font-family: var(--font-display);
  font-size: calc(clamp(2.2rem, 3.6vw, 3.2rem) * var(--type-scale));
  font-weight: 600;
  line-height: 1;
  color: var(--green-300);
  font-variant-numeric: tabular-nums;
  transition: color var(--dur-2) var(--ease-soft), transform var(--dur-2) var(--ease-spring);
}
.sym-row:hover .sym-num { color: var(--green-600); transform: translateX(4px) scale(1.06); }

.sym-kicker {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-mono);
  font-size: calc(.72rem * var(--type-scale));
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--green-700);
  margin-bottom: .5rem;
}
.sym-row h3 {
  font-size: calc(clamp(1.2rem, 1.8vw, 1.5rem) * var(--type-scale));
  margin-bottom: .55rem;
  transition: color var(--dur-1) var(--ease-soft);
}
.sym-row:hover h3 { color: var(--green-800); }
.sym-row .sym-kicker { transition: color var(--dur-1) var(--ease-soft); }
.sym-row:hover .sym-kicker { color: var(--green-800); }
.sym-row:hover .sym-num { color: var(--green-700); }
.sym-row > div > p:last-child {
  margin: 0;
  color: var(--text-soft);
  font-size: calc(.93rem * var(--type-scale));
  line-height: 1.55;
  max-width: 58ch;
}

.sym-thumb {
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 16 / 11;
  box-shadow: var(--sh-1);
  transition: box-shadow var(--dur-2) var(--ease-soft), transform var(--dur-2) var(--ease-out);
}
.sym-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-4) var(--ease-out);
}
.sym-row:hover .sym-thumb { box-shadow: var(--sh-3); transform: rotate(-1deg); }
.sym-row:hover .sym-thumb img { transform: scale(1.09); }

@media (max-width: 820px) {
  .sym-row { grid-template-columns: 3rem minmax(0, 1fr); }
  .sym-thumb { grid-column: 2; }
}

/* Stacked blocks inside a grid column need their own rhythm; without this a
   media block and the table beneath it sit flush against each other. */
.grid12 > div > .media + .table-scroll,
.grid12 > div > .media + .callout,
.grid12 > div > .table-scroll + .callout,
.grid12 > div > * + .table-scroll,
.grid12 > div > * + .media {
  margin-top: clamp(1.4rem, 2.6vw, 2.2rem);
}

/* --------------------------------------------------------------------------
   22 :: Column rhythm, step scale, FAQ scale, CTA edges
   -------------------------------------------------------------------------- */

/* Blocks stacked inside a grid column need separation from the prose above
   them. Without this a callout sits flush against the last paragraph. */
.grid12 > div > * + .callout,
.grid12 > div > * + .field-note,
.grid12 > div > * + .matrix,
.grid12 > div > * + .steps {
  margin-top: clamp(1.5rem, 2.8vw, 2.4rem);
}

/* A heading followed straight by body copy inside a column, where there is no
   .section-head wrapper to supply the gap. */
.grid12 > div > h2 + p,
.grid12 > div > h2 + .lede,
.grid12 > div > h1 + p {
  margin-top: clamp(1rem, 1.8vw, 1.5rem);
}

/* Step cards, scaled up: more padding, larger type, bigger ghost numeral */
.steps { gap: clamp(1.1rem, 2.2vw, 2rem); }
.step { padding: clamp(1.7rem, 3vw, 2.6rem); }
.step h3 {
  font-size: calc(clamp(1.28rem, 1.9vw, 1.55rem) * var(--type-scale));
  margin-bottom: .7rem;
}
.step p { font-size: calc(1.02rem * var(--type-scale)); line-height: 1.62; }
.step::before {
  font-size: calc(clamp(3.6rem, 7vw, 5.6rem) * var(--type-scale));
  top: .6rem;
  right: 1.2rem;
}

/* FAQ scaled up to match the wider container it now sits in */
.faq-q { font-size: calc(clamp(1.15rem, 1.75vw, 1.45rem) * var(--type-scale)); }
.faq-a p { font-size: calc(1.02rem * var(--type-scale)); max-width: 88ch; }

/* Sharp edges on the closing call to action */
.cta-band { border-radius: 0; }

/* Interior page headings sit in a 7 of 12 column, not full bleed, so the
   full-width h1 scale overflows them into three and four lines. */
.page-head h1 { font-size: calc(clamp(2.2rem, 4.4vw, 4rem) * var(--type-scale)); }
.page-head .lede { margin-top: clamp(1rem, 1.8vw, 1.5rem); }

/* --------------------------------------------------------------------------
   23 :: Universal heading rhythm and page-head hero treatment
   -------------------------------------------------------------------------- */

/* Any heading followed straight by body copy needs a gap. Section heads get
   theirs from .section-head, but headings sitting loose in a column or prose
   block had none, which is why copy kept crowding the heading above it. */
h1 + p, h2 + p, h3 + p, h4 + p,
h1 + .lede, h2 + .lede, h3 + .lede,
h1 + ul, h2 + ul, h3 + ul,
h1 + .table-scroll, h2 + .table-scroll, h3 + .table-scroll,
h1 + .callout, h2 + .callout, h3 + .callout,
h1 + .matrix, h2 + .matrix, h3 + .matrix,
h1 + .field-note, h2 + .field-note, h3 + .field-note,
h1 + .auto-grid, h2 + .auto-grid, h3 + .auto-grid {
  margin-top: clamp(.85rem, 1.6vw, 1.35rem);
}
h2 + .table-scroll, h2 + .callout, h2 + .matrix, h2 + .field-note {
  margin-top: clamp(1.3rem, 2.4vw, 2rem);
}

/* Page heads: centred, over a photograph, with the copy held to a readable
   measure so a wide container does not stretch the lede.

   --hero-photo is set per page in a style attribute. A relative url() inside a
   custom property resolves against the stylesheet that CONSUMES it, not the
   page, so a local hero must be written as ../images/... to land next to this
   file rather than inside /css/. Writing images/... silently 404s. Keeping it
   relative rather than root absolute is what lets the site preview from a
   subdirectory as well as from the domain root. */
.page-head.is-hero {
  background-image:
    /* Lighter scrim so the photograph reads through. Kept opaque enough that
       the navy heading and slate body copy stay above AA contrast against the
       brightest part of the image. */
    linear-gradient(180deg, rgba(246, 250, 252, .64), rgba(239, 248, 251, .56)),
    var(--hero-photo);
  background-size: cover;
  background-position: center;
  text-align: center;
  padding-block: clamp(3rem, 6vw, 5.5rem);
}
.page-head.is-hero .crumbs { justify-content: center; }
.page-head.is-hero .eyebrow::before { display: none; }
.page-head.is-hero h1 { margin-inline: auto; }
.page-head.is-hero .lede { margin-inline: auto; max-width: 62ch; }
.page-head.is-hero .cluster { justify-content: center; }
.page-head.is-hero .credit { text-align: center; }
html[data-contrast="high"] .page-head.is-hero { background-image: none; }

/* Reverse pyramid: a trailing short row centres under the full row above it */
.matrix { justify-content: center; }
.matrix-row:nth-last-child(1):nth-child(3n + 1),
.matrix-row:nth-last-child(2):nth-child(3n + 1) { grid-column: auto; }
@media (min-width: 1100px) {
  .matrix { grid-template-columns: repeat(6, 1fr); }
  .matrix-row { grid-column: span 2; }
  /* five items: last two centre by starting one column in */
  .matrix-row:nth-child(4):nth-last-child(2) { grid-column: 2 / span 2; }
  .matrix-row:nth-child(5):nth-last-child(1) { grid-column: 4 / span 2; }
}

/* Centre a button cluster that follows a callout */
.callout + .cluster, .callout .cluster.is-centered { justify-content: center; }

/* --------------------------------------------------------------------------
   24 :: Column alignment, centred sections, tinted cards, full bleed CTA
   -------------------------------------------------------------------------- */

/* Grid columns start at the same baseline instead of stretching, so a heading
   and the image beside it line up at the top of the row. */
.grid12 { align-items: start; }

/* Media paired with copy in a two column row sits flush with the heading */
.grid12 > div > .media:first-child,
.grid12 > div > figure.media:first-child { margin-top: 0; }

/* Centred section variant: heading, lede and the block beneath all centre */
.section-centered { text-align: center; }
.section-centered .section-head { margin-inline: auto; }
.section-centered .eyebrow::before { display: none; }
.section-centered .lede { margin-inline: auto; }
.section-centered .faq,
.section-centered .matrix,
.section-centered .panel,
.section-centered .auto-grid { text-align: left; margin-inline: auto; }
.section-centered .faq { max-width: 1000px; }
.section-centered .cluster { justify-content: center; }
.section-centered .credit { text-align: center; }

/* Panels that read as a pair of options, tinted navy */
.panel-navy {
  background: linear-gradient(158deg, var(--navy-800), var(--navy-950));
  border-color: var(--navy-700);
  color: var(--aqua-100);
}
.panel-navy h3, .panel-navy h4 { color: #fff; }
.panel-navy p { color: var(--aqua-200); }
.panel-navy a { color: var(--sun-500); }

/* Testimonial cards in the soft brand blue */
.quote-card-blue {
  background: linear-gradient(158deg, var(--aqua-100), var(--aqua-50));
  border-color: var(--aqua-200);
}

/* Reviews rail centred, cards a touch larger */
.gr-rail { justify-content: center; }
.gr-card { flex-basis: clamp(290px, 30vw, 370px); }
.gr-text { font-size: calc(1.05rem * var(--type-scale)); }
.gr-name { font-size: calc(1.08rem * var(--type-scale)); }
.gr-avatar { width: 3.1rem; height: 3.1rem; font-size: calc(1.2rem * var(--type-scale)); }
.gr-bar { justify-content: center; text-align: left; }
@media (min-width: 900px) { .gr-bar { justify-content: space-between; } }

/* The closing CTA runs the full width of its section, edge to edge */
.cta-band { border-radius: 0; }
.section-flush { padding-block: 0; }
.section-flush > .wrap { max-width: none; padding-inline: 0; }

/* --------------------------------------------------------------------------
   25 :: Symptom numerals, larger reviews, tightened rhythm
   -------------------------------------------------------------------------- */

/* Numerals rest blue and turn green under the cursor */
.sym-num { color: var(--aqua-400); }
.sym-row:hover .sym-num { color: var(--green-600); }

/* Reviews a step larger again */
.gr-card { flex-basis: clamp(310px, 32vw, 400px); padding: clamp(1.4rem, 2.4vw, 1.9rem); }
.gr-text { font-size: calc(1.12rem * var(--type-scale)); line-height: 1.6; }
.gr-name { font-size: calc(1.14rem * var(--type-scale)); }
.gr-meta { font-size: calc(.9rem * var(--type-scale)); }
.gr-avatar { width: 3.4rem; height: 3.4rem; font-size: calc(1.3rem * var(--type-scale)); }
.gr-card .gr-stars svg { width: 1.28rem; height: 1.28rem; }
.gr-score { font-size: calc(2.5rem * var(--type-scale)); }
.gr-glyph { width: 4.6rem; height: 4.6rem; }
.gr-glyph svg { width: 2.3rem; height: 2.3rem; }

/* The marquee now lives inside the hero, so it needs no outer separation */
.hero .marquee {
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  margin-inline: calc(var(--gutter) * -1);
  border-bottom: 0;
  background: transparent;
}

/* Booking columns start at the top of the section rather than drifting down */
.booking-grid { align-items: start; }
.booking-grid > div > .panel:first-child { margin-top: 0; }

/* Action row that follows a callout, centred under it */
.callout + .cluster {
  justify-content: center;
  margin-top: clamp(1.2rem, 2.2vw, 1.8rem);
}

/* --------------------------------------------------------------------------
   26 :: Service area row, copy and image finishing together
   -------------------------------------------------------------------------- */

/* Columns stretch here (overriding the global start alignment) and the media
   fills its column, so the picture ends level with the copy beside it however
   long that copy runs. */
.grid12.row-match { align-items: stretch; }
.grid12.row-match > div { display: flex; flex-direction: column; }
.grid12.row-match .media {
  flex: 1;
  min-height: 340px;
  aspect-ratio: auto;
}
.grid12.row-match .media img { height: 100%; object-fit: cover; }

/* Copy set a step larger so the column carries more weight */
.is-service-area .col-l7 > p {
  font-size: calc(1.14rem * var(--type-scale));
  line-height: 1.7;
}

/* Hero copy column takes more width so the two headline lines can hold a
   confident size instead of being shrunk to fit a narrow column. */
@media (min-width: 981px) {
  .hero-grid { grid-template-columns: minmax(0, 1.28fr) minmax(0, .72fr); }
}
/* Lines are sized by the fitter, so they must not wrap on their own. Only
   applied above the single column breakpoint: on a phone the fitter hits its
   minimum size and nowrap would push the grid column past the screen edge,
   where overflow-x hidden silently clips the headline. */
@media (min-width: 981px) {
  .hero-title .split-line {
    white-space: nowrap;
    /* the rise animation clips this box, so give the last glyph room */
    padding-right: .06em;
    overflow: visible;
  }
}
@media (max-width: 980px) {
  /* No !important, so the JS fitter's inline size wins. This clamp is only the
     fallback when scripting is off; it is sized to hold the two written lines
     on a typical phone rather than the larger size that wrapped to four. */
  .hero-title { font-size: calc(clamp(1.4rem, 5.6vw, 2.2rem) * var(--type-scale)); }
  .hero-title .split-line { white-space: normal; }
}

/* --------------------------------------------------------------------------
   27 :: Rail centring that cannot clip, and blue-at-rest kickers
   -------------------------------------------------------------------------- */

/* Plain "center" on an overflowing scroll container spills equally in both
   directions, but scrollLeft starts at 0, so the overflow on the left can
   never be scrolled back to and the first card is permanently unreadable.
   "safe center" centres only while everything fits and falls back to
   flex-start the moment it does not. */
.gr-rail {
  justify-content: flex-start;
  justify-content: safe center;
}

/* Section kickers rest blue and pick up green with the row, matching the
   numerals beside them. */
.sym-kicker { color: var(--aqua-500); }
.sym-row:hover .sym-kicker { color: var(--green-700); }

/* --------------------------------------------------------------------------
   28 :: Hero media filling the section, blue symptom section
   -------------------------------------------------------------------------- */

/* The media column stretches to the height of the copy beside it, so the
   picture fills the hero rather than floating in it. */
@media (min-width: 981px) {
  .hero-grid { align-items: stretch; }
  .hero-media { display: flex; flex-direction: column; justify-content: center; height: 100%; }
  .hero-media-main { flex: 1; max-height: none; aspect-ratio: auto; min-height: 380px; }
  .hero-media-main img { height: 100%; object-fit: cover; }
}

/* The symptom section reads blue as a surface. The numerals and labels sit
   on top of it, so they carry the brand green rather than blue on blue. */
.sym-section { background: linear-gradient(180deg, var(--aqua-100), var(--aqua-50) 70%); }
.sym-section .sym-row { border-bottom-color: rgba(8, 65, 92, .12); }
.sym-section .sym-list { border-top-color: rgba(8, 65, 92, .12); }
.sym-num { color: var(--green-600); }
.sym-kicker { color: var(--green-700); }
.sym-row:hover .sym-num { color: var(--green-800); }
.sym-row:hover .sym-kicker { color: var(--green-800); }
.sym-section .sym-row:hover { background: rgba(255, 255, 255, .75); }

/* With a lighter scrim the photograph shows through, so hero body copy moves
   from slate to navy. Measured against the darkest pixels of the background
   image, slate fell to 3.37:1 (under the 4.5:1 AA floor) while navy holds
   5.77:1, so the picture gets to be visible without costing readability. */
.page-head.is-hero .lede { color: var(--navy-900); }
.page-head.is-hero .credit { color: var(--navy-800); }
.page-head.is-hero .crumbs { color: var(--navy-800); }
.page-head.is-hero .crumbs a { color: var(--navy-800); }

/* --------------------------------------------------------------------------
   29 :: Column alignment against headings, callout separation, media centring
   -------------------------------------------------------------------------- */

/* Where a column opens with a small overline number, the media beside it
   otherwise aligns to that number rather than to the heading. Nudge it down
   so picture and title start on the same line. */
.grid12 > div > .overline-num + h2,
.grid12 > div > .overline-num + h3 { margin-top: .35rem; }

.row-align-heading > div > .media,
.row-align-heading > div > .field-note,
.row-align-heading > div > .callout,
.row-align-heading > div > .panel,
.row-align-heading > div > figure {
  margin-top: clamp(1.2rem, 2vw, 2rem);   /* fallback before JS measures */
}
/* the copy column keeps its own top edge */
.row-align-heading > div.prose > :first-child,
.row-align-heading > div > .eyebrow:first-child,
.row-align-heading > div > .overline-num:first-child { margin-top: 0; }

/* Stacked blocks must never butt against each other. Covers callout pairs and
   the more common case of a card grid followed by a callout block. */
.callout + .callout,
.callout + .field-note,
.field-note + .callout,
.steps + .stack-lg,
.auto-grid + .stack-lg,
.grid12 + .stack-lg,
.steps + .callout,
.auto-grid + .callout {
  margin-top: clamp(1.8rem, 3.2vw, 2.8rem);
}

/* A media block on a dark band, centred with a little breathing room above */
.bg-deep .media,
.bg-photo .media {
  margin-inline: auto;
  margin-top: clamp(1.4rem, 3vw, 2.6rem);
}

/* --------------------------------------------------------------------------
   30 :: Author credibility card
   A single horizontal card: portrait left, credentials right. Replaces a
   12 column grid squeezed inside a 74 character reading width, which left the
   image cramped, the name broken across two lines and the buttons colliding.
   -------------------------------------------------------------------------- */

.author-card {
  display: grid;
  grid-template-columns: clamp(220px, 26%, 300px) minmax(0, 1fr);
  gap: clamp(1.6rem, 3.5vw, 3rem);
  align-items: start;
  max-width: 1040px;
  margin-inline: auto;
  padding: clamp(1.6rem, 3.5vw, 2.8rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
}

.author-media {
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 1;
  background: var(--aqua-50);
}
.author-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease-out);
}
.author-card:hover .author-media img { transform: scale(1.05); }

.author-body > * + * { margin-top: 1rem; }
.author-body h2 {
  font-size: calc(clamp(1.9rem, 3vw, 2.5rem) * var(--type-scale));
  margin-top: .45rem;
}
.author-role {
  font-weight: 700;
  color: var(--navy-900);
  font-size: calc(1.02rem * var(--type-scale));
}
.author-body p { color: var(--text-soft); }
.author-verify { margin-top: 1.2rem; }

.author-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  margin-top: 1.5rem;
}

@media (max-width: 720px) {
  .author-card { grid-template-columns: 1fr; }
  .author-media { max-width: 240px; }
}

/* --------------------------------------------------------------------------
   31 :: Hero owns the first screen
   The hero fills the viewport below the sticky header so the next section
   never peeks above the fold. svh is used first because mobile browser chrome
   makes vh overshoot; vh stays as the fallback for older engines.
   -------------------------------------------------------------------------- */

.hero {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
}
/* Keep this as a grid. Setting display:flex here overrode .hero-grid and
   collapsed the two column hero into a single tall stack. */
.hero > .wrap.hero-grid {
  flex: 1;
  align-content: center;
}
/* the ticker sits on the fold line, closing the section */
.hero .marquee { margin-top: auto; }

/* --------------------------------------------------------------------------
   32 :: Booking grid, calendar first
   The calendar column leads in source order so it also comes first on a
   phone, but a right hand column written before a left hand one gets pushed
   onto a second row by grid auto placement: the cursor has already moved
   past column eight, so column one reads as a step backwards. Pinning the
   form to row one places it explicitly and leaves the cursor alone.
   -------------------------------------------------------------------------- */

.grid12.cols-swapped > .col-l7 { grid-row: 1; }

/* Below the two column breakpoint everything is full width, so a pinned row
   would stack the two columns on top of each other. */
@media (max-width: 900px) {
  .grid12.cols-swapped > .col-l7 { grid-row: auto; }
}

/* --------------------------------------------------------------------------
   33 :: Bright photograph variant for the accordion
   Most of the gallery photographs are dark enough that the shared scrim
   carries the caption. A very light one does not: the salt tablets average
   237 of 255, which left the body copy at 3.96:1 against the brightest
   strip of the image, under the 4.5:1 AA floor. Measured against the actual
   composited pixels, the pair below puts the body copy at 5.16:1 and the
   heading at 6.35:1 while keeping the photograph recognisably bright.
   -------------------------------------------------------------------------- */

.acc-panel.is-bright.is-active img { filter: saturate(1) brightness(.78); }
.acc-panel.is-bright::after {
  background: linear-gradient(185deg, rgba(4,26,38,.24) 8%, rgba(4,26,38,.86) 84%);
}

/* --------------------------------------------------------------------------
   34 :: Book page, the booking card rises into the hero
   The card is the whole point of the page, so it starts inside the hero
   photograph rather than below it. Two halves to this: the hero gives up its
   right hand side so the centred headline stops colliding with the card, and
   the card carries a negative top margin so it overlaps upward while still
   pushing the rest of the column down normally.

   Desktop only. Below the two column breakpoint the card is full width and
   simply follows the hero, so any lift would drag it over the headline.
   -------------------------------------------------------------------------- */

@media (min-width: 901px) {
  .page-head.has-aside { text-align: left; }
  .page-head.has-aside .crumbs { justify-content: flex-start; }
  .page-head.has-aside .section-head { max-width: 54%; margin-inline: 0; }
  .page-head.has-aside h1,
  .page-head.has-aside .lede { margin-inline: 0; }
  .page-head.has-aside .cluster { justify-content: flex-start; }

  /* The hero already supplies the breathing room above the card. */
  .booking-lift { padding-top: 0; }
  .booking-lift .col-r5 {
    margin-top: var(--card-lift, -22rem);
    position: relative;
    z-index: 2;
  }
}

/* --------------------------------------------------------------------------
   35 :: Flat tint hero
   A photograph behind a card this large fought with it. On a flat tint the
   white booking card reads as raised, and the headline no longer needs the
   scrim that was there to hold it above AA against the brightest part of
   the image.
   -------------------------------------------------------------------------- */

.page-head.is-hero.is-tint {
  background-image: linear-gradient(170deg, var(--aqua-100), var(--aqua-50) 72%);
}

/* --------------------------------------------------------------------------
   36 :: Tinted page
   The booking page runs light blue end to end rather than alternating white
   and tinted bands. Sections carry no background of their own unless they ask
   for one, so colouring the body is enough for most of them; the two that do
   ask are brought onto the same tint below. The closing CTA band keeps its
   navy, since that is a block on the page rather than the page itself.
   -------------------------------------------------------------------------- */

body.page-tinted { background: var(--aqua-50); }
body.page-tinted .bg-bone { background: var(--aqua-50); }

/* The hero already ends on this exact tint, so a rule line between it and
   the section below would read as a seam in one continuous field. */
body.page-tinted .page-head.is-tint { border-bottom: 0; }

/* --------------------------------------------------------------------------
   37 :: Buttons inside a tinted callout
   The pale button works against white but loses its edge on a tint: baby
   blue measures 1.55:1 against the green callout and 1.65:1 against the
   yellow one, under the 3:1 a control needs in order to read as a control.
   Inside a callout the primary button goes solid navy, which is the colour
   its own hover state already uses, so nothing new enters the palette.

   The ghost button beside it was worse. Its default outline is the standard
   border grey, which against the green tint measured 1.09:1 and was
   effectively invisible. It gets a teal outline here, 5.16:1 at worst.
   -------------------------------------------------------------------------- */

.callout .btn:not(.btn-ghost):not(.btn-light):not(.btn-outline-light) {
  --btn-bg: var(--navy-800);
  --btn-ink: #fff;
  border-color: var(--navy-800);
}
/* Hover has to go somewhere darker, since the resting state is already the
   navy the shared hover fill uses. */
.callout .btn:not(.btn-ghost):not(.btn-light):not(.btn-outline-light)::before {
  background: var(--navy-950);
}

.callout .btn-ghost { border-color: var(--teal-600); }


/* --------------------------------------------------------------------------
   38 :: Team grid
   Portrait cards for the five people. Photos are supplied at 4:5 and are
   cropped to the face, so the card locks that ratio and lets object-fit do
   the rest rather than letting a tall phone photo stretch a row.
   -------------------------------------------------------------------------- */

/* Six tracks rather than three, so a card can start on a half column and the
   short trailing row can centre itself under the full row above. */
.team-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(1.2rem, 2.4vw, 2.1rem);
  margin-top: clamp(1.6rem, 3vw, 2.6rem);
}
.team-card { grid-column: span 2; }

/* Reverse pyramid: three across the top, and the last two centred beneath
   them rather than left over against the gutter. */
.team-card:nth-child(4):nth-last-child(2) { grid-column: 2 / span 2; }

@media (max-width: 980px) {
  .team-grid { grid-template-columns: repeat(4, 1fr); }
  .team-card { grid-column: span 2; }
  /* Two per row now, so it is the fifth card that is left alone. */
  .team-card:nth-child(4):nth-last-child(2) { grid-column: auto / span 2; }
  .team-card:nth-child(5):nth-last-child(1) { grid-column: 2 / span 2; }
}
@media (max-width: 560px) {
  .team-grid { grid-template-columns: 1fr; }
  .team-card,
  .team-card:nth-child(4):nth-last-child(2),
  .team-card:nth-child(5):nth-last-child(1) { grid-column: auto; }
}

.team-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--sh-1);
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-soft);
}
.team-card:hover { transform: translateY(-6px); box-shadow: var(--sh-3); }

.team-card picture { display: block; }
.team-card img {
  width: 100%;
  aspect-ratio: 4 / 5;
  height: auto;
  object-fit: cover;
  object-position: 50% 22%;   /* faces sit high in the frame */
  display: block;
  background: var(--bone);
  transition: transform 1s var(--ease-out);
}
.team-card:hover img { transform: scale(1.04); }

/* Bios differ in length, so the body has to grow into the leftover card
   height. Without this the tinted owner panels stop short and leave a white
   band under the shorter bio. */
.team-body { padding: clamp(1.15rem, 2vw, 1.5rem); flex: 1; }
.team-body h3 { font-size: calc(1.24rem * var(--type-scale)); margin-bottom: .2rem; }
.team-body p { font-size: calc(.94rem * var(--type-scale)); color: var(--text-soft); margin: 0; }

.team-role {
  font-family: var(--font-body);
  font-size: calc(.76rem * var(--type-scale)) !important;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teal-600) !important;
  margin-bottom: .8rem !important;
}

/* The owners lead the page, so their two cards carry a warmer ground than the
   three service cards that follow. */
.team-card:nth-child(-n+2) .team-body { background: var(--bone); }


/* --------------------------------------------------------------------------
   39 :: Breathing room the rhythm system was missing
   Section 23 gives every heading a gap before the copy that FOLLOWS it, but
   nothing gave a gap before a heading that follows a block, and the small
   print under a button row had no top margin at all. Both showed up as text
   pressed hard against the thing above it.
   -------------------------------------------------------------------------- */

/* Small print under a button row, in the light hero and the dark CTA band. */
.cluster + .credit,
.cta-actions + .credit {
  margin-top: clamp(1.3rem, 2.6vw, 2.1rem);
}

/* A heading that follows a block needs more room than one following a
   paragraph, because the block already carries its own visual weight. */
.table-scroll + h2, .table-scroll + h3,
.callout + h2,      .callout + h3,
.matrix + h2,       .matrix + h3,
.field-note + h2,   .field-note + h3,
.team-grid + h2,    .team-grid + h3,
.auto-grid + h2,    .auto-grid + h3,
.media + h2,        .media + h3 {
  margin-top: clamp(2.2rem, 4vw, 3.4rem);
}

/* And the grid itself should not butt straight into whatever follows it. */
.team-grid + * { margin-top: clamp(2.2rem, 4vw, 3.4rem); }