/* Geist, the font of every Flexlab screen (ENGINEERING.md §7), served from this site like the other
   vendored files. One variable file covers every weight. The version is in the name because
   assets/ is cached for a year. SIL Open Font License: assets/fonts/geist-LICENSE.txt. */
@font-face {
  font-family: "Geist";
  src: url("assets/fonts/geist-1.7.2.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --crimson: #a0142f;
  --crimson-dark: #5d1024;
  --ink: #24191b;
  --cream: #fff5e8;
  --paper: #fbeddc;
  --linen: #ead8c3;
  --rose: #deb1ad;
  --taupe: #b99378;
  --white: #fffaf2;
  --shadow: 0 24px 70px rgba(36, 25, 27, 0.14);
  --soft-shadow: 0 14px 40px rgba(36, 25, 27, 0.09);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --max: 1180px;
  --header-h: 80px;
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html {
  overflow-x: clip;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  max-width: 100%;
  overflow-x: clip;
  background:
    radial-gradient(circle at 18% 4%, rgba(222, 177, 173, 0.34), transparent 28rem),
    linear-gradient(180deg, var(--cream), var(--paper) 46rem, var(--cream));
  color: var(--ink);
  font-family:
    Geist, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -3;
  background:
    linear-gradient(120deg, transparent 0 42%, rgba(160, 20, 47, 0.045) 48%, transparent 54% 100%),
    radial-gradient(
      circle at var(--page-accent-x, 20%) 18%,
      rgba(222, 177, 173, 0.22),
      transparent 20rem
    );
  content: "";
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select {
  font: inherit;
}

.shell {
  width: min(var(--max), calc(100% - 2rem));
  margin-inline: auto;
}

.ambient-motion {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
}

.ambient-orb,
.ambient-line {
  position: absolute;
  display: block;
}

.ambient-orb {
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(222, 177, 173, 0.34),
    rgba(160, 20, 47, 0.08),
    transparent 66%
  );
  filter: blur(0.5px);
  animation: ambientDrift 18s var(--ease) infinite alternate;
}

.orb-one {
  top: 12%;
  left: -8rem;
  width: 22rem;
  height: 22rem;
}

.orb-two {
  right: -9rem;
  bottom: 4%;
  width: 28rem;
  height: 28rem;
  animation-delay: -7s;
}

.orb-three {
  top: 45%;
  left: 52%;
  width: 16rem;
  height: 16rem;
  animation-delay: -12s;
}

.ambient-line {
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(160, 20, 47, 0.24), transparent);
  animation: lineGlide 11s var(--ease) infinite alternate;
}

.line-one {
  top: 28%;
  left: 8%;
  width: 24rem;
  transform: rotate(-8deg);
}

.line-two {
  right: 6%;
  bottom: 22%;
  width: 19rem;
  transform: rotate(13deg);
  animation-delay: -5s;
}

@keyframes ambientDrift {
  from {
    transform: translate3d(-1rem, 0, 0) scale(0.96);
  }

  to {
    transform: translate3d(2rem, -1.4rem, 0) scale(1.06);
  }
}

@keyframes lineGlide {
  from {
    opacity: 0.18;
    translate: -1rem 0;
  }

  to {
    opacity: 0.5;
    translate: 2.4rem 0;
  }
}

.skip-link {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 100;
  transform: translateY(-160%);
  border-radius: 8px;
  background: var(--ink);
  color: var(--cream);
  padding: 0.75rem 1rem;
  transition: transform 220ms var(--ease);
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid rgba(160, 20, 47, 0.11);
  background: rgba(255, 245, 232, 0.86);
  backdrop-filter: blur(18px);
  transition:
    box-shadow 300ms var(--ease),
    background 300ms var(--ease);
}

.site-header.is-scrolled {
  background: rgba(255, 245, 232, 0.96);
  box-shadow: 0 12px 38px rgba(36, 25, 27, 0.08);
}

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

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--crimson);
  font-weight: 850;
  white-space: nowrap;
}

.brand-text {
  --brand-word-width: 12rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.22rem;
  width: var(--brand-word-width);
  min-height: 4.75rem;
  line-height: 1;
}

.brand-title {
  display: block;
  width: 100%;
  color: var(--crimson-dark);
  font-size: 1.42rem;
  font-weight: 900;
  letter-spacing: 0.29em;
  line-height: 0.92;
  margin-right: -0.29em;
  text-transform: uppercase;
}

.brand-title-accent {
  color: var(--rose);
}

.brand-subtitle {
  display: block;
  width: 100%;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 850;
  letter-spacing: 0.22em;
  line-height: 1;
  -webkit-text-stroke: 0.07rem var(--crimson);
  paint-order: stroke fill;
  text-shadow:
    0 1px 0 var(--crimson),
    0 2px 6px rgba(93, 16, 36, 0.78);
  text-transform: uppercase;
}

.brand-mark {
  display: block;
  height: 5.4375rem;
  width: auto;
  object-fit: contain;
}

.nav-links {
  display: flex;
  gap: clamp(0.8rem, 2vw, 1.6rem);
  color: rgba(36, 25, 27, 0.72);
  font-size: 0.94rem;
  font-weight: 760;
}

.nav-links a {
  position: relative;
  padding: 0.4rem 0;
}

.nav-links a::after {
  position: absolute;
  right: 0;
  bottom: 0.12rem;
  left: 0;
  height: 2px;
  border-radius: 999px;
  background: var(--crimson);
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 240ms var(--ease);
}

.nav-links a:hover::after,
.nav-links a:focus-visible::after {
  transform: scaleX(1);
}

/* Buttons are the staff app's (shadcn, ENGINEERING.md §7): 40px, 10px corners, medium weight, a
   colour change on hover and a 3px ring on focus. The same look on every Flexlab screen. */
.nav-cta,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-height: 2.5rem;
  border: 1px solid transparent;
  border-radius: 0.625rem;
  padding: 0 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 150ms ease,
    box-shadow 150ms ease;
}

.nav-cta,
.primary {
  background: var(--crimson);
  color: var(--white);
}

/* Hidden until book.js finds Book a Visit switched on (flags.js), so prod never shows it while
   it is off, even for a moment (user, 2026-10-01). */
html:not([data-booking]) [data-book-open] {
  display: none;
}

.nav-cta:hover,
.primary:hover {
  background: rgba(160, 20, 47, 0.8);
}

/* Not yet usable, like Send request before an intake choice is picked (2026-10-01). */
.button:disabled {
  opacity: 0.5;
  cursor: default;
}

.primary:disabled:hover {
  background: var(--crimson);
}

/* The staff app's outline button: a hairline, the page's own ground, ink text. */
.secondary {
  border-color: var(--linen);
  background: var(--cream);
  color: var(--ink);
}

.secondary:hover {
  background: var(--paper);
}

.nav-cta:focus-visible,
.button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(160, 20, 47, 0.5);
}

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(20rem, 1fr);
  align-items: center;
  gap: clamp(2rem, 7vw, 6rem);
  min-height: calc(100vh - var(--header-h));
  /* min-height already reserves close to a full viewport; a large symmetric pad on top
     of that is what opened the gap before the next section. */
  padding: clamp(3rem, 5vw, 4.5rem) 0 clamp(1.5rem, 2.5vw, 2.5rem);
}

.hero::before {
  position: absolute;
  top: 18%;
  left: 44%;
  width: min(38rem, 46vw);
  height: min(38rem, 46vw);
  border: 1px solid rgba(160, 20, 47, 0.08);
  border-radius: 50%;
  content: "";
  transform: translateY(var(--section-shift, 0px)) rotate(var(--section-rotate, 0deg));
  animation: slowOrbit 14s linear infinite;
  pointer-events: none;
}

.hero-copy,
.hero-media,
.section-heading,
.path-card,
.quote-card {
  translate: 0 var(--scroll-shift, 0px);
  rotate: var(--scroll-rotate, 0deg);
  will-change: translate, rotate;
}

.eyebrow {
  margin: 0 0 0.9rem;
  color: var(--crimson);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.hero-title,
.section-heading h2 {
  margin: 0;
  color: var(--crimson-dark);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 0.96;
}

.hero-title {
  max-width: 12ch;
  font-size: clamp(3.25rem, 6.4vw, 6.25rem);
}

.word {
  display: inline-block;
  opacity: 0;
  transform: translateY(36px);
  transition:
    opacity 400ms var(--ease),
    transform 400ms var(--ease);
  transition-delay: var(--word-delay, 0ms);
}

.is-visible .word {
  opacity: 1;
  transform: translateY(0);
}

.hero-lede,
.section-intro {
  max-width: 42rem;
  color: rgba(36, 25, 27, 0.72);
  font-size: clamp(1.04rem, 1.7vw, 1.2rem);
}

.hero-lede {
  margin: 1.35rem 0 0;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 2rem;
}

.hero-media {
  position: relative;
  min-height: 38rem;
}

.hero-figure-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: min(44rem, calc(100vh - 8rem));
}

.figure-frame {
  position: relative;
  height: min(72vh, 43rem);
  min-height: 34rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 86%,
    rgba(0, 0, 0, 0.72) 92%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 86%,
    rgba(0, 0, 0, 0.72) 92%,
    transparent 100%
  );
}

.anatomy-figure {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  width: min(84%, 31rem);
  height: auto;
  max-width: none;
  filter: drop-shadow(0 2rem 2.2rem rgba(93, 16, 36, 0.18))
    drop-shadow(0 0.35rem 0.35rem rgba(36, 25, 27, 0.1));
  transform: translate3d(-50%, 0, 0);
}

.clinic-room {
  position: absolute;
  inset: 2rem 0 0;
  border: 1px solid rgba(160, 20, 47, 0.14);
  border-radius: 8px;
  background:
    linear-gradient(130deg, rgba(255, 250, 242, 0.96), rgba(251, 237, 220, 0.88)), var(--paper);
  box-shadow: var(--shadow);
  overflow: hidden;
  transform: translateY(var(--room-shift, 0px));
}

.clinic-room::before {
  position: absolute;
  inset: -40% auto auto -30%;
  width: 60%;
  height: 170%;
  background: linear-gradient(90deg, transparent, rgba(255, 250, 242, 0.38), transparent);
  content: "";
  transform: rotate(18deg);
  animation: roomSweep 7s var(--ease) infinite;
}

.window-light {
  position: absolute;
  inset: 0 0 auto auto;
  width: 56%;
  height: 58%;
  background: linear-gradient(135deg, rgba(255, 250, 242, 0.9), rgba(234, 216, 195, 0.34));
  clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 82%);
  animation: windowGlow 6.5s var(--ease) infinite alternate;
}

.wall-sign {
  position: absolute;
  display: grid;
  gap: 0.2rem;
  top: 2rem;
  left: 2rem;
  color: var(--crimson);
  line-height: 1;
}

.wall-sign .wall-name {
  font-size: clamp(1.15rem, 2vw, 1.8rem);
  font-weight: 900;
  letter-spacing: 0.18em;
}

.wall-accent {
  color: var(--rose);
}

.wall-sign small {
  color: #fff;
  font-size: clamp(0.48rem, 0.75vw, 0.68rem);
  font-weight: 850;
  letter-spacing: 0.28em;
  -webkit-text-stroke: 0.07rem var(--crimson);
  paint-order: stroke fill;
  text-shadow:
    0 1px 0 var(--crimson),
    0 2px 6px rgba(93, 16, 36, 0.78);
  text-transform: uppercase;
}

.treatment-table {
  position: absolute;
  right: 13%;
  bottom: 26%;
  width: 56%;
  height: 3rem;
  border-radius: 8px;
  background: var(--crimson-dark);
  box-shadow:
    0 2.7rem 0 -1.7rem rgba(36, 25, 27, 0.58),
    0 4rem 0 -3.1rem var(--taupe);
  animation: tableSettle 5.5s var(--ease) infinite alternate;
}

.floor-line {
  position: absolute;
  right: 6%;
  bottom: 18%;
  left: 8%;
  height: 1px;
  background: rgba(36, 25, 27, 0.14);
  transform: rotate(-7deg);
  transform-origin: right;
  animation: floorTrace 4.8s var(--ease) infinite alternate;
}

.floor-b {
  bottom: 9%;
  transform: rotate(5deg);
}

.band {
  position: absolute;
  border: 0.45rem solid var(--crimson);
  border-radius: 50%;
  opacity: 0.72;
  animation: bandPulse 4.2s var(--ease) infinite;
}

.band-one {
  right: 18%;
  bottom: 38%;
  width: 7rem;
  height: 7rem;
}

.band-two {
  right: 10%;
  bottom: 45%;
  width: 4rem;
  height: 4rem;
  border-color: var(--rose);
  animation-delay: -1.4s;
}

.therapy-ball {
  position: absolute;
  left: 12%;
  bottom: 18%;
  width: 8.5rem;
  height: 8.5rem;
  border-radius: 50%;
  background: linear-gradient(120deg, rgba(255, 250, 242, 0.26), transparent 46%), var(--rose);
  animation: ballFloat 5.8s var(--ease) infinite alternate;
}

.tool-tray {
  position: absolute;
  left: 14%;
  bottom: 47%;
  width: 8rem;
  height: 1.2rem;
  border-radius: 999px;
  background: var(--taupe);
  box-shadow: 0 1.4rem 0 -0.45rem rgba(160, 20, 47, 0.5);
  animation: traySlide 6s var(--ease) infinite alternate;
}

.media-card {
  position: absolute;
  width: min(15rem, 46vw);
  border: 1px solid rgba(160, 20, 47, 0.13);
  border-radius: 8px;
  background: rgba(255, 250, 242, 0.88);
  padding: 1rem;
  box-shadow: var(--soft-shadow);
  animation: cardFloat 6s var(--ease) infinite alternate;
}

.media-card span {
  display: block;
  color: var(--crimson);
  font-size: 2.2rem;
  font-weight: 900;
  line-height: 1;
}

.media-card p {
  margin: 0.5rem 0 0;
  color: rgba(36, 25, 27, 0.72);
}

.card-top {
  top: 0;
  right: 5%;
}

.card-bottom {
  bottom: 1rem;
  left: -1rem;
  animation-delay: -2.2s;
}

.trust-strip {
  padding: 1rem 0;
  background: var(--crimson-dark);
  color: var(--cream);
  overflow: hidden;
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
}

.trust-item {
  position: relative;
  min-height: 5rem;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(255, 245, 232, 0.08);
  color: rgba(255, 245, 232, 0.9);
  font-weight: 850;
  overflow: hidden;
}

.trust-item::before {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent, rgba(255, 245, 232, 0.13), transparent);
  content: "";
  translate: -130% 0;
  animation: itemSweep 5.5s var(--ease) infinite;
  animation-delay: var(--reveal-delay, 0ms);
}

.section {
  padding: clamp(5rem, 10vw, 8rem) 0;
}

.section-heading {
  margin-bottom: clamp(2rem, 5vw, 4.5rem);
}

.section-heading h2 {
  max-width: 13ch;
  font-size: clamp(2.35rem, 5vw, 5rem);
}

.section-intro {
  margin: 1.1rem 0 0;
}

.method {
  --section-progress: 0;
  background:
    radial-gradient(circle at 84% 22%, rgba(222, 177, 173, 0.28), transparent 26rem), var(--cream);
}

.method-layout {
  display: grid;
  grid-template-columns: minmax(18rem, 0.82fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
}

.method-sticky {
  position: sticky;
  top: 7rem;
  display: grid;
  gap: 1rem;
  align-self: start;
}

.path-card {
  border: 1px solid rgba(160, 20, 47, 0.16);
  border-radius: 8px;
  background: rgba(255, 250, 242, 0.8);
  padding: clamp(1.2rem, 3vw, 2rem);
  box-shadow: var(--soft-shadow);
  outline: 0 solid rgba(160, 20, 47, 0);
  transition:
    outline 260ms var(--ease),
    transform 260ms var(--ease);
}

.path-meter {
  height: 0.5rem;
  margin-bottom: 1.5rem;
  border-radius: 999px;
  background: rgba(160, 20, 47, 0.14);
  overflow: hidden;
}

.path-meter span {
  display: block;
  width: var(--path-progress-pct, 0%);
  height: 100%;
  background: linear-gradient(90deg, var(--crimson), var(--rose));
  transition: width 80ms linear;
}

.path-card h3 {
  margin: 0;
  color: var(--crimson-dark);
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  line-height: 1.02;
}

.path-card p {
  margin: 1rem 0 0;
  color: rgba(36, 25, 27, 0.7);
}

.method-tracking {
  border: 1px solid rgba(160, 20, 47, 0.14);
  border-radius: 8px;
  background: rgba(255, 250, 242, 0.78);
  padding: clamp(1.2rem, 2.5vw, 1.7rem);
  box-shadow: var(--soft-shadow);
}

.method-tracking .eyebrow {
  margin-bottom: 0.55rem;
}

.method-tracking h3 {
  margin: 0 0 1rem;
  color: var(--crimson-dark);
  font-size: clamp(1.35rem, 2.2vw, 1.8rem);
  line-height: 1.15;
}

.tracking-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tracking-list li {
  display: grid;
  grid-template-columns: 5.6rem minmax(0, 1fr);
  gap: 0.75rem;
  border-top: 1px solid rgba(160, 20, 47, 0.12);
  padding: 0.8rem 0;
}

.tracking-list strong {
  color: var(--crimson-dark);
  font-size: 0.9rem;
}

.tracking-list span {
  color: rgba(36, 25, 27, 0.68);
  font-size: 0.9rem;
}

.method-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.method-step,
.service-card,
.insurance-card,
.quote-card {
  border: 1px solid rgba(160, 20, 47, 0.14);
  border-radius: 8px;
  background: rgba(255, 250, 242, 0.78);
  box-shadow: var(--soft-shadow);
}

.method-step {
  min-height: 15rem;
  padding: 1.25rem;
  translate: var(--step-offset, 0px) 0;
  scale: var(--step-scale, 0.985);
  transition:
    border-color 240ms var(--ease),
    translate 240ms var(--ease),
    scale 240ms var(--ease),
    box-shadow 240ms var(--ease);
}

.method-step.is-active {
  border-color: rgba(160, 20, 47, 0.48);
  box-shadow: 0 18px 48px rgba(160, 20, 47, 0.13);
}

.method-step span,
.service-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  background: var(--crimson);
  color: var(--cream);
  font-size: 0.82rem;
  font-weight: 900;
}

.method-step h3,
.service-card h3 {
  margin: 1.1rem 0 0.45rem;
  color: var(--crimson-dark);
  font-size: 1.45rem;
  line-height: 1.12;
}

.method-step p,
.service-card p,
.quote-card p,
.site-footer p {
  margin: 0;
  color: rgba(36, 25, 27, 0.7);
}

.services {
  background: var(--paper);
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.service-card {
  position: relative;
  min-height: 17rem;
  padding: 1.25rem;
  overflow: hidden;
  translate: 0 var(--card-lift, 0px);
  rotate: var(--card-rotate, 0deg);
  transition:
    translate 260ms var(--ease),
    rotate 260ms var(--ease),
    box-shadow 260ms var(--ease);
}

.service-card::before {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--card-progress-pct, 0%);
  height: 0.28rem;
  background: linear-gradient(90deg, var(--crimson), var(--rose));
  content: "";
}

.service-card::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 20%, rgba(255, 245, 232, 0.42), transparent 64%);
  content: "";
  translate: -125% 0;
  transition: translate 620ms var(--ease);
}

.service-card:hover::after,
.service-card:focus-within::after {
  translate: 125% 0;
}

.service-card:hover,
.service-card:focus-within {
  translate: 0 -9px;
  rotate: 0deg;
  box-shadow: var(--shadow);
}

.insurance {
  background:
    radial-gradient(circle at 88% 18%, rgba(222, 177, 173, 0.3), transparent 24rem), var(--cream);
}

.insurance-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.insurance-card {
  padding: clamp(1.4rem, 3vw, 2rem);
}

/* A phone number stays on one line. */
.nowrap {
  white-space: nowrap;
}

/* For physicians (2026-09-29): a card like the insurance ones, a line and buttons. Physicians
   only since 2026-10-01: patients no longer upload a referral here. */
.physicians-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

.physicians-note {
  margin: 0 0 1.2rem;
  color: rgba(36, 25, 27, 0.74);
  line-height: 1.5;
}

.physicians-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

/* The fax number, under the buttons (user, 2026-10-03). */
.physicians-actions + .physicians-note {
  margin: 1rem 0 0;
}

.insurance-card h3 {
  margin: 0 0 1rem;
  color: var(--crimson-dark);
  font-size: clamp(1.35rem, 2.2vw, 1.8rem);
  line-height: 1.15;
}

.insurance-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.insurance-list-commercial {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1.5rem;
}

.insurance-list li {
  position: relative;
  min-height: 2.75rem;
  border-top: 1px solid rgba(160, 20, 47, 0.12);
  padding: 0.72rem 0.25rem 0.72rem 1.15rem;
  color: rgba(36, 25, 27, 0.78);
  font-weight: 720;
}

.insurance-list li::before {
  position: absolute;
  top: 1.18rem;
  left: 0;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--crimson);
  content: "";
}

.quote-section {
  background: var(--crimson-dark);
  background-image: linear-gradient(120deg, rgba(255, 245, 232, 0.035) 0 1px, transparent 1px 100%);
  background-size: 3rem 3rem;
  animation: quoteGrid 18s linear infinite;
}

.quote-card {
  position: relative;
  background: var(--cream);
  padding: clamp(1.5rem, 4vw, 3rem);
  overflow: hidden;
}

.quote-card::before {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--quote-progress-pct, 0%);
  height: 0.45rem;
  background: var(--crimson);
  content: "";
}

.quote-card blockquote {
  max-width: 62rem;
  margin: 0;
  color: var(--crimson-dark);
  font-size: clamp(1.7rem, 3.3vw, 3.2rem);
  font-weight: 850;
  line-height: 1.12;
}

.quote-card p {
  margin-top: 1rem;
}

/* The logo above four columns (Visit, Contact Us, Hours, Legal): five across did not fit. */
.site-footer {
  display: grid;
  grid-template-columns:
    minmax(10rem, 0.85fr)
    minmax(10rem, 0.9fr)
    minmax(14rem, 1.15fr)
    minmax(10rem, 0.85fr);
  align-items: start;
  gap: clamp(1.5rem, 3vw, 3rem);
  padding: clamp(2.5rem, 5vw, 4rem) 0;
}

.footer-brand {
  align-self: start;
  grid-column: 1 / -1;
}

.footer-block h2 {
  margin: 0 0 0.8rem;
  color: var(--crimson-dark);
  font-size: 0.86rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.footer-block address {
  color: rgba(36, 25, 27, 0.74);
  font-style: normal;
  line-height: 1.7;
}

.footer-link {
  display: inline-block;
  margin-top: 0.8rem;
  color: var(--crimson);
  font-weight: 800;
  text-decoration: underline;
  text-decoration-color: rgba(160, 20, 47, 0.28);
  text-underline-offset: 0.22rem;
}

/* Legal: the pages every site like this links to, one per line (user, 2026-09-29). */
.footer-links {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 1.5;
}

.footer-links a {
  color: rgba(36, 25, 27, 0.74);
  text-decoration: underline;
  text-decoration-color: rgba(160, 20, 47, 0.28);
  text-underline-offset: 0.22rem;
}

.footer-links a:hover {
  color: var(--crimson);
}

.footer-contact {
  margin: 0;
  color: rgba(36, 25, 27, 0.74);
  line-height: 1.7;
}

.footer-contact strong {
  color: var(--crimson-dark);
  font-weight: 800;
}

.footer-contact a {
  color: var(--crimson-dark);
}

.footer-contact a:hover,
.footer-contact a:focus-visible {
  color: var(--crimson);
}

.footer-link:hover,
.footer-link:focus-visible {
  text-decoration-color: currentColor;
}

.footer-hours {
  display: grid;
  gap: 0.65rem;
  margin: 0;
}

.footer-hours div {
  display: grid;
  grid-template-columns: minmax(7.5rem, 1fr) auto;
  gap: 1rem;
  border-bottom: 1px solid rgba(160, 20, 47, 0.1);
  padding-bottom: 0.65rem;
}

.footer-hours dt {
  color: var(--crimson-dark);
  font-weight: 800;
}

.footer-hours dd {
  margin: 0;
  color: rgba(36, 25, 27, 0.74);
  text-align: right;
}

/* The foot of the page: the staff login, out of patients' way. */
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem 1.2rem;
  grid-column: 1 / -1;
}

/* Contact modal, in the staff app's design (ENGINEERING.md §7): a solid card with a hairline ring,
   40px fields, and radios and tick boxes drawn the same way. */
.contact-dialog {
  border: 1px solid rgba(36, 25, 27, 0.1);
  border-radius: 0.875rem;
  background: var(--white);
  width: min(28rem, calc(100vw - 2rem));
  max-width: none;
  /* fit-content, not auto: a modal dialog is pinned top and bottom, so auto stretches it full. */
  height: fit-content;
  max-height: calc(100dvh - 2rem);
  padding: 0;
  color: var(--ink);
  overflow: hidden;
}

.contact-dialog[open] {
  animation: contactIn 240ms var(--ease);
}

.contact-dialog::backdrop {
  background: rgba(36, 25, 27, 0.1);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Keep the page behind still. Lenis is stopped in script.js; this covers native scrolling. */
html:has(.contact-dialog[open]) {
  overflow: hidden;
}

.contact-dialog-inner {
  display: grid;
  /* Height follows the content. Filling the dialog would stretch it to its cap every time. */
  grid-template-rows: auto minmax(0, auto);
  max-height: inherit;
}

.contact-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--linen);
  padding: 0.5rem 0.5rem 0.5rem 1rem;
}

.contact-dialog-head h2 {
  margin: 0;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 500;
}

.contact-dialog-head form {
  margin: 0;
}

.contact-close {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border: 0;
  border-radius: 0.625rem;
  background: transparent;
  color: var(--ink);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.contact-close:hover {
  background: var(--paper);
}

.contact-close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(160, 20, 47, 0.5);
}

/* Two short answers read better side by side than as two full-width bars. */
.contact-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
}

@media (max-width: 26rem) {
  .contact-row {
    grid-template-columns: 1fr;
  }
}

/* A label over its field, as the staff app lays them out. */
.contact-field {
  display: grid;
  gap: 0.5rem;
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 500;
  /* The label's own line box, not the body's 1.5, or it looks like a gap twice this size. */
  line-height: 1.2;
}

/* Taupe at 45% is the staff app's field border, drawn from the palette. */
.contact-field input {
  width: 100%;
  min-height: 2.5rem;
  align-self: start;
  border: 1px solid rgba(185, 147, 120, 0.45);
  border-radius: 0.625rem;
  background: transparent;
  padding: 0 0.625rem;
  color: var(--ink);
  /* 1rem on a phone: under 16px iOS zooms the page when the field is focused. */
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.3;
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease;
}

@media (min-width: 48rem) {
  .contact-field input {
    font-size: 0.875rem;
  }
}

.contact-field input::placeholder {
  color: #6b5558;
}

.contact-field input:focus-visible {
  border-color: var(--crimson);
  outline: none;
  box-shadow: 0 0 0 3px rgba(160, 20, 47, 0.5);
}

.contact-field input[aria-invalid="true"] {
  border-color: var(--crimson);
  box-shadow: 0 0 0 3px rgba(160, 20, 47, 0.2);
}

.contact-error:empty {
  display: none;
}

.contact-error {
  color: var(--crimson);
  font-size: 0.875rem;
  font-weight: 400;
}

.contact-choice {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  align-items: center;
  margin: 0;
  border: 0;
  padding: 0;
}

.contact-choice legend {
  width: 100%;
  margin-bottom: 0.25rem;
  padding: 0;
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 500;
}

.contact-choice label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 400;
}

/* Radios and tick boxes drawn as the staff app draws them: 16px, a field-coloured edge, filled
   crimson when chosen. The tick is a data: image, which the CSP allows (img-src data:). */
.contact-choice input {
  display: inline-grid;
  flex: none;
  width: 1rem;
  height: 1rem;
  margin: 0;
  border: 1px solid rgba(185, 147, 120, 0.45);
  background: transparent;
  appearance: none;
  cursor: pointer;
}

.contact-choice input[type="checkbox"] {
  border-radius: 4px;
}

.contact-choice input[type="radio"] {
  border-radius: 50%;
}

.contact-choice input:checked {
  border-color: var(--crimson);
  background-color: var(--crimson);
}

.contact-choice input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fffaf2' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 0.75rem;
}

.contact-choice input[type="radio"]:checked {
  background-image: radial-gradient(circle, var(--white) 0 0.22rem, transparent 0.24rem);
}

.contact-choice input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(160, 20, 47, 0.5);
}

/* A choice's message sits on its own line under the options, like every other field's. */
.contact-choice .contact-error {
  width: 100%;
}

/* A field people never see and bots fill in. */
.contact-trap {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.contact-status:empty {
  display: none;
}

.contact-status {
  margin: 0;
  color: var(--ink);
  font-size: 0.875rem;
}

/* The staff app's banners: green with a dark green border for success — green is outside the
   palette (§7), an exception the user asked for (PROGRESS.md), used for success and nothing else —
   and the palette's crimson for failure. */
.contact-status[data-state="success"] {
  border: 1px solid #1f6b3a;
  border-radius: 0.625rem;
  background: #e7f4eb;
  padding: 0.5rem 0.625rem;
  color: #17502b;
}

.contact-status[data-state="error"] {
  border: 1px solid rgba(160, 20, 47, 0.5);
  border-radius: 0.625rem;
  background: rgba(160, 20, 47, 0.05);
  padding: 0.5rem 0.625rem;
  color: var(--crimson);
}

/* The icon sprite takes no room; its symbols are drawn wherever a <use> points at one. */
.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Line icons (Lucide): a stroke in the text's own colour, the size of the text beside it. */
.book-icon {
  flex: none;
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Book a Visit (ENGINEERING.md D12): the pop-up's steps, one question per screen, with
   choices big enough for a thumb. The body scrolls; the title bar stays put. */
.book-body {
  display: grid;
  /* Rows keep their own height. Without this they stretch whenever the panel hits its cap. */
  align-content: start;
  gap: 1rem;
  padding: 1rem;
  overflow-y: auto;
}

.book-screen,
.book-form {
  display: grid;
  align-content: start;
  gap: 1rem;
}

.book-form {
  gap: 0.875rem;
}

/* [hidden] loses to display: grid and inline-flex, so say it explicitly. */
.book-dialog [hidden] {
  display: none;
}

.book-question {
  margin: 0;
  color: var(--ink);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.25;
}

/* The question takes the focus for screen readers; it is not a control, so no ring. */
.book-question:focus {
  outline: none;
}

.book-note {
  margin: 0;
  color: #6b5558;
  font-size: 0.875rem;
  line-height: 1.45;
}

.book-note a,
.book-banner a {
  color: inherit;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  /* A phone number or an address broken across two lines is hard to read and to tap. */
  white-space: nowrap;
}

/* Same-day needs: the failure banner's crimson, as a warning before the first question. */
.book-banner {
  margin: 0;
  border: 1px solid rgba(160, 20, 47, 0.5);
  border-radius: 0.625rem;
  background: rgba(160, 20, 47, 0.05);
  padding: 0.625rem 0.75rem;
  color: var(--crimson);
  font-size: 0.875rem;
  line-height: 1.45;
}

.book-back,
.book-link {
  justify-self: start;
  min-height: 2.5rem;
  border: 0;
  border-radius: 0.625rem;
  background: transparent;
  padding: 0 0.5rem;
  color: var(--crimson-dark);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}

.book-back {
  margin: -0.5rem 0 -0.75rem -0.5rem;
}

.book-link {
  margin-left: -0.5rem;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.book-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1rem;
}

.book-back:hover,
.book-link:hover {
  background: var(--paper);
}

/* A choice is a card-sized button: the answer, then a line on what it means. */
.book-options,
.book-reach {
  display: grid;
  gap: 0.5rem;
}

.book-option {
  display: grid;
  gap: 0.2rem;
  min-height: 3.5rem;
  align-content: center;
  border: 1px solid rgba(185, 147, 120, 0.45);
  border-radius: 0.625rem;
  background: var(--cream);
  padding: 0.625rem 1rem;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 150ms ease;
}

.book-option strong {
  font-size: 1rem;
  font-weight: 500;
}

.book-option span {
  color: #6b5558;
  font-size: 0.875rem;
  line-height: 1.35;
}

.book-option:hover:not(:disabled) {
  background: var(--paper);
}

/* The intake choice picked, waiting to be sent with the best way to reach them (2026-10-01). */
.book-option[aria-pressed="true"] {
  border-color: var(--crimson);
  box-shadow: inset 0 0 0 1px var(--crimson);
  background: var(--paper);
}

/* A course of care still under review: shown, so the patient knows it is there, but not a choice. */
.book-option:disabled {
  border-style: dashed;
  background: transparent;
  cursor: default;
}

.book-calendar {
  display: grid;
  gap: 0.5rem;
}

.book-month {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 500;
}

.book-nav {
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgba(185, 147, 120, 0.45);
  border-radius: 0.625rem;
  background: var(--cream);
  color: var(--ink);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.book-nav:hover:not(:disabled) {
  background: var(--paper);
}

.book-nav:disabled {
  opacity: 0.4;
  cursor: default;
}

.book-weekdays,
.book-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.25rem;
  text-align: center;
}

.book-weekdays {
  color: #6b5558;
  font-size: 0.75rem;
  font-weight: 500;
}

/* Room for six weeks, so the pop-up keeps its height from month to month. */
.book-days {
  min-height: 16.25rem;
  align-content: start;
}

.book-times {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.book-days button,
.book-times button {
  min-height: 2.5rem;
  border: 1px solid rgba(185, 147, 120, 0.45);
  border-radius: 0.625rem;
  background: var(--cream);
  padding: 0;
  color: var(--ink);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 150ms ease;
}

.book-days button:hover:not(:disabled),
.book-times button:hover {
  background: var(--paper);
}

/* A day with no free hour, or outside the window: a number, not a button. */
.book-days button:disabled {
  border-color: transparent;
  background: transparent;
  color: rgba(36, 25, 27, 0.35);
  font-weight: 400;
  cursor: default;
}

.book-days button[aria-pressed="true"] {
  border-color: var(--crimson);
  background: var(--crimson);
  color: var(--white);
}

.book-summary {
  margin: 0;
  border: 1px solid var(--linen);
  border-radius: 0.625rem;
  background: var(--cream);
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  line-height: 1.5;
}

.book-summary strong {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 1rem;
  font-weight: 600;
}

.book-back:focus-visible,
.book-link:focus-visible,
.book-option:focus-visible,
.book-nav:focus-visible,
.book-days button:focus-visible,
.book-times button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(160, 20, 47, 0.5);
}

/* On a phone the pop-up is the whole screen (D12.9): no card, no backdrop to miss-tap. */
@media (max-width: 40rem) {
  .book-dialog {
    width: 100%;
    height: 100%;
    max-height: 100%;
    margin: 0;
    border: 0;
    border-radius: 0;
  }

  .book-dialog .contact-dialog-inner {
    height: 100%;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .book-body {
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
  }
}

/* The Notice of Privacy Practices: a long read, so one comfortable column in the site's type. */
.notice-top,
.notice {
  max-width: 46rem;
}

.notice-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
}

.notice-top .brand-mark {
  height: 3.5rem;
}

.notice {
  padding: 1rem 0 4rem;
}

.notice h1 {
  margin: 0 0 1rem;
  color: var(--crimson-dark);
  font-size: clamp(1.9rem, 5vw, 2.8rem);
  line-height: 1.1;
}

.notice h2 {
  margin: 2.2rem 0 0.7rem;
  color: var(--crimson-dark);
  font-size: 1.35rem;
}

.notice h3 {
  margin: 1.2rem 0 0.3rem;
  font-size: 1.02rem;
}

.notice p,
.notice li {
  line-height: 1.65;
}

.notice ul {
  padding-left: 1.2rem;
}

.notice li + li {
  margin-top: 0.5rem;
}

.notice a {
  color: var(--crimson);
}

.notice-required {
  border-left: 3px solid var(--crimson);
  padding: 0.2rem 0 0.2rem 1rem;
  font-weight: 800;
}

.notice-meta {
  color: rgba(36, 25, 27, 0.72);
  font-size: 0.92rem;
}

.notice-contact {
  font-style: normal;
  line-height: 1.7;
}

.thanks-page {
  display: grid;
  min-height: 100dvh;
  place-items: center;
}

.thanks-card {
  display: grid;
  justify-items: start;
  gap: 1rem;
  padding: clamp(1.5rem, 5vw, 3rem) 0;
}

.thanks-card h1 {
  margin: 0;
  color: var(--crimson-dark);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
}

.thanks-card p {
  margin: 0;
  color: rgba(36, 25, 27, 0.74);
}

@keyframes contactIn {
  from {
    opacity: 0;
    translate: 0 14px;
  }
}

@media (max-width: 640px) {
  .contact-dialog {
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border: 0;
    border-radius: 0;
  }

  /* Full screen on a phone: the header stays put and the fields scroll under it. */
  .contact-dialog-inner {
    height: 100%;
    grid-template-rows: auto minmax(0, 1fr);
  }
}

.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 400ms var(--ease),
    transform 400ms var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes slowOrbit {
  to {
    rotate: 360deg;
  }
}

@keyframes mediaFloat {
  from {
    translate: 0 0;
  }

  to {
    translate: 0 -0.9rem;
  }
}

@keyframes roomSweep {
  0% {
    translate: -130% 0;
  }

  48%,
  100% {
    translate: 260% 0;
  }
}

@keyframes windowGlow {
  from {
    opacity: 0.56;
  }

  to {
    opacity: 0.95;
  }
}

@keyframes tableSettle {
  from {
    translate: 0 0;
  }

  to {
    translate: -0.45rem -0.2rem;
  }
}

@keyframes floorTrace {
  from {
    scale: 0.75 1;
    opacity: 0.35;
  }

  to {
    scale: 1 1;
    opacity: 0.8;
  }
}

@keyframes bandPulse {
  0%,
  100% {
    scale: 1;
    opacity: 0.56;
  }

  50% {
    scale: 1.08;
    opacity: 0.88;
  }
}

@keyframes ballFloat {
  from {
    translate: 0 0;
  }

  to {
    translate: 0.6rem -0.8rem;
  }
}

@keyframes traySlide {
  from {
    translate: -0.35rem 0;
  }

  to {
    translate: 0.8rem -0.2rem;
  }
}

@keyframes cardFloat {
  from {
    translate: 0 0;
  }

  to {
    translate: 0 -0.7rem;
  }
}

@keyframes itemSweep {
  0% {
    translate: -130% 0;
  }

  42%,
  100% {
    translate: 130% 0;
  }
}

@keyframes quoteGrid {
  to {
    background-position: 6rem 3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
  }
}

@media (max-width: 980px) {
  .nav-links {
    display: none;
  }

  .hero,
  .method-layout {
    grid-template-columns: 1fr;
  }

  .hero {
    min-height: auto;
  }

  .hero-media {
    min-height: auto;
  }

  .hero-figure-panel {
    min-height: auto;
    justify-content: flex-start;
  }

  .figure-frame {
    height: min(68vh, 38rem);
    min-height: 28rem;
  }

  .anatomy-figure {
    width: min(84%, 29rem);
  }

  .method-sticky {
    position: relative;
    top: auto;
  }

  .site-footer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .service-grid,
  .insurance-grid,
  .trust-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  :root {
    --header-h: 7.75rem;
  }

  .section {
    padding: 4rem 0;
  }

  .section-heading {
    margin-bottom: 2rem;
  }

  .ambient-orb,
  .ambient-line {
    display: none;
  }

  .brand {
    gap: 0.46rem;
  }

  .nav {
    flex-wrap: wrap;
    gap: 0.2rem;
    padding: 0.25rem 0 0.55rem;
  }

  .nav-links {
    order: 3;
    display: flex;
    width: 100%;
    gap: 0.25rem;
    border-top: 1px solid rgba(160, 20, 47, 0.1);
    padding-top: 0.35rem;
    font-size: 0.8rem;
  }

  .nav-links a {
    display: grid;
    flex: 1;
    min-height: 2.75rem;
    place-items: center;
    padding: 0.25rem;
    text-align: center;
  }

  .brand-text {
    --brand-word-width: 8.7rem;
    min-height: 3.95rem;
  }

  .brand-mark {
    height: 4.3125rem;
    width: auto;
  }

  .brand-title {
    font-size: 1.02rem;
    letter-spacing: 0.24em;
    margin-right: -0.24em;
  }

  .brand-subtitle {
    font-size: 0.46rem;
    letter-spacing: 0.15em;
  }

  .nav-cta {
    padding-inline: 0.85rem;
  }

  /* On a 360-400px phone the logo gives up a little height so Book a Visit still fits beside it,
     in one row. */
  @media (max-width: 400px) {
    .brand-mark {
      height: 3.625rem;
    }
  }

  .hero-title {
    font-size: clamp(3rem, 15vw, 4.2rem);
  }

  .hero {
    gap: 1rem;
    padding-top: 2.5rem;
  }

  .hero-media {
    min-height: auto;
  }

  .figure-frame {
    height: min(58vh, 28rem);
    min-height: 22rem;
  }

  .anatomy-figure {
    width: min(92%, 24rem);
  }

  .media-card {
    width: min(13rem, 68vw);
  }

  .card-bottom {
    left: 0;
  }

  .service-grid,
  .insurance-grid,
  .physicians-grid,
  .trust-grid {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }

  .method-steps {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }

  .method-layout {
    gap: 1rem;
  }

  .method-sticky {
    gap: 0.85rem;
  }

  .method-step {
    min-height: 12rem;
    padding: 1.1rem;
  }

  .service-card {
    min-height: 13rem;
    padding: 1.1rem;
  }

  .insurance-card {
    padding: 1.2rem;
  }

  .insurance-list-commercial {
    grid-template-columns: 1fr;
  }

  .quote-card {
    padding: 1.35rem;
  }

  .quote-card blockquote {
    font-size: 1.6rem;
  }

  .site-footer {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding-block: 1.5rem;
  }

  .footer-brand {
    display: none;
  }

  .footer-hours-block {
    grid-column: auto;
  }

  .footer-hours div {
    grid-template-columns: 1fr auto;
  }
}

/* ==========================================================================
   Lenis smooth scroll
   Lenis interpolates scroll position itself, so the browser's own smooth
   scrolling has to be switched off or the two fight and the result stutters.
   These are the rules Lenis ships in its stylesheet; vendored here since only
   its JS is bundled.
   ========================================================================== */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

/* ==========================================================================
   Ambient canvas — particles, glowing wireframe, abstract colour motion
   Sits above the CSS ambient washes (-2 / -3) and below all content.
   ========================================================================== */
.ambient-stage {
  /* .hero carries .shell, which caps it at --max (1180px). Left at inset:0 the field
     stops at the content gutters instead of reaching the screen edges, so this breaks
     out to the full viewport width while staying bounded to the hero vertically.
     html/body already clip overflow-x, so 100vw cannot introduce a scrollbar. */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: 0; /* behind the copy and the figure, inside the hero only */
  pointer-events: none;
  overflow: hidden;
}

.ambient-stage canvas {
  display: block;
}

/* The hero's own content sits above the field. */
.hero-copy,
.hero-media {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   Conditions treated — what brings people in, as opposed to what we do.
   Shares the service card's visual language so the two sections read as a pair.
   ========================================================================== */
.condition-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
}

.condition-card {
  position: relative;
  padding: 1.75rem 1.6rem 1.9rem;
  border: 1px solid var(--linen);
  border-radius: 8px;
  background: var(--white);
  box-shadow: var(--soft-shadow);
  transition:
    transform 600ms var(--ease),
    box-shadow 600ms var(--ease),
    border-color 600ms var(--ease);
}

.condition-card:hover {
  transform: translateY(-4px);
  border-color: rgba(160, 20, 47, 0.26);
  box-shadow: var(--shadow);
}

.condition-card h3 {
  margin: 0.85rem 0 0;
  font-size: 1.16rem;
  font-weight: 850;
  letter-spacing: -0.01em;
}

.condition-card p {
  margin: 0.6rem 0 0;
  font-size: 0.94rem;
  line-height: 1.6;
  color: #5b4a4c;
}

@media (max-width: 1000px) {
  .condition-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .condition-grid {
    grid-template-columns: 1fr;
    gap: 0.85rem;
    margin-top: 2rem;
  }

  .condition-card {
    padding: 1.3rem;
  }
}

/* ==========================================================================
   Glassmorphism
   Every surface below was already translucent but had no backdrop-filter, so it
   rendered as a flat tinted panel. What makes it read as glass is the combination:
   a refracted backdrop, a *gradient* fill rather than a flat one, a bright inset
   top edge, and a soft drop shadow to lift it off the page.
   Tokens live in one place so the whole system tunes together.
   ========================================================================== */
:root {
  --glass-radius: 22px;
  /* Wider spread between the two stops so the pane reads as a sheet catching light
     across its face rather than an evenly tinted rectangle. */
  /* Opacity halved from 0.78/0.42 — twice as much backdrop comes through, which also
     means the 32px blur behind it does far more visible work. */
  --glass-fill: linear-gradient(148deg, rgba(255, 252, 247, 0.39), rgba(248, 231, 213, 0.21));
  --glass-edge: rgba(255, 253, 249, 0.9);
  --glass-blur: blur(32px) saturate(1.65) brightness(1.03);
  /* The rim is drawn with four inset shadows, not just a border: bright along the top
     and left where light would strike the edge, dimmer along the bottom and right.
     A uniform 1px border reads flat however bright it is. */
  --glass-lift:
    0 28px 80px rgba(36, 25, 27, 0.15),
    0 2px 8px rgba(36, 25, 27, 0.05),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.92),
    inset 1.5px 0 0 rgba(255, 255, 255, 0.55),
    inset -1.5px 0 0 rgba(255, 255, 255, 0.3),
    inset 0 -1.5px 0 rgba(255, 255, 255, 0.26);
  --glass-lift-hover:
    0 36px 96px rgba(93, 16, 36, 0.2),
    0 2px 8px rgba(36, 25, 27, 0.06),
    inset 0 1.5px 0 rgba(255, 255, 255, 1),
    inset 1.5px 0 0 rgba(255, 255, 255, 0.68),
    inset -1.5px 0 0 rgba(255, 255, 255, 0.38),
    inset 0 -1.5px 0 rgba(255, 255, 255, 0.34);
}

.condition-card,
.service-card,
.insurance-card,
.method-tracking,
.method-step,
.quote-card,
.path-card,
.media-card {
  background: var(--glass-fill);
  border: 1px solid var(--glass-edge);
  border-radius: var(--glass-radius);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-lift);
}

/* A soft specular sweep across the top third — the highlight a real pane picks up.
   Masked to the card's own radius and kept behind its content. */
.condition-card,
.service-card,
.insurance-card,
.method-tracking,
.method-step,
.quote-card,
.path-card {
  position: relative;
  isolation: isolate;
}

.condition-card::after,
.service-card::after,
.insurance-card::after,
.method-tracking::after,
.method-step::after,
.path-card::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    150deg,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0.12) 34%,
    transparent 62%
  );
  pointer-events: none;
  z-index: -1;
  content: "";
}

.condition-card:hover,
.service-card:hover,
.service-card:focus-within {
  border-color: rgba(160, 20, 47, 0.3);
  box-shadow: var(--glass-lift-hover);
}

/* The active method step stays the one solid accent, so the sequence still reads. */
.method-step.is-active {
  border-color: rgba(160, 20, 47, 0.46);
  box-shadow:
    0 18px 48px rgba(160, 20, 47, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.62);
}

/* The header already blurred; bring it into the same system. */
.site-header {
  background: linear-gradient(180deg, rgba(255, 245, 232, 0.48), rgba(255, 245, 232, 0.36));
  backdrop-filter: blur(30px) saturate(1.55);
  -webkit-backdrop-filter: blur(30px) saturate(1.55);
  border-bottom: 1px solid rgba(255, 253, 249, 0.75);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.4);
}

.site-header.is-scrolled {
  background: linear-gradient(180deg, rgba(255, 245, 232, 0.62), rgba(255, 245, 232, 0.46));
  box-shadow: 0 12px 40px rgba(36, 25, 27, 0.09);
}

/* Without backdrop-filter there is nothing refracting behind the pane, so a
   translucent fill would just look washed out. Fall back to near-opaque. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .condition-card,
  .service-card,
  .insurance-card,
  .method-tracking,
  .method-step,
  .quote-card,
  .path-card,
  .media-card,
  .site-header {
    background: rgba(255, 250, 242, 0.96);
  }
}

/* backdrop-filter is per-element work; on small screens there are more of them in
   view at once and less GPU to spend, so the blur is lighter there. */
@media (max-width: 680px) {
  :root {
    --glass-blur: blur(18px) saturate(1.35);
    --glass-radius: 18px;
  }
}