: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:
    Inter, 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);
}

.nav-cta,
.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  border: 0;
  border-radius: 8px;
  padding: 0.78rem 1.05rem;
  font-weight: 850;
  transition:
    transform 260ms var(--ease),
    box-shadow 260ms var(--ease);
  overflow: hidden;
}

.nav-cta::after,
.button::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 245, 232, 0.28), transparent 70%);
  content: "";
  translate: -120% 0;
  transition: translate 560ms var(--ease);
}

.nav-cta:hover::after,
.nav-cta:focus-visible::after,
.button:hover::after,
.button:focus-visible::after {
  translate: 120% 0;
}

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

.secondary {
  border: 1px solid rgba(160, 20, 47, 0.24);
  background: rgba(255, 250, 242, 0.7);
  color: var(--crimson);
}

.nav-cta:hover,
.nav-cta:focus-visible,
.button:hover,
.button:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--soft-shadow);
}

.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);
}

.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;
}

.site-footer {
  display: grid;
  grid-template-columns:
    minmax(13rem, 0.9fr)
    minmax(12rem, 0.85fr)
    minmax(12rem, 0.85fr)
    minmax(16rem, 1.15fr);
  align-items: start;
  gap: clamp(1.5rem, 3vw, 3rem);
  padding: clamp(2.5rem, 5vw, 4rem) 0;
}

.footer-brand {
  align-self: start;
}

.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;
}

.footer-contact {
  display: block;
  width: fit-content;
  color: var(--crimson-dark);
  font-weight: 800;
}

.footer-contact + .footer-contact {
  margin-top: 0.55rem;
}

.footer-contact:hover,
.footer-contact: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: rgba(36, 25, 27, 0.7);
}

.footer-hours dd {
  margin: 0;
  color: var(--crimson-dark);
  font-weight: 760;
  text-align: right;
}

.footer-cta {
  display: flex;
  width: fit-content;
  margin-top: 1.2rem;
}

/* Contact modal around the clinic's Google Form. The form's own white cards are an approved
   exception to the palette (PROGRESS.md); the frame and backdrop stay inside it. */
.contact-dialog {
  width: min(44rem, calc(100vw - 2rem));
  max-width: none;
  height: min(52rem, calc(100dvh - 2rem));
  max-height: none;
  border: 1px solid rgba(160, 20, 47, 0.14);
  border-radius: var(--glass-radius);
  padding: 0;
  background: var(--cream);
  color: var(--ink);
  box-shadow: var(--shadow);
  overflow: hidden;
}

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

.contact-dialog::backdrop {
  background: rgba(36, 25, 27, 0.56);
}

/* 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;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
}

.contact-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid rgba(160, 20, 47, 0.12);
  padding: 0.6rem 0.6rem 0.6rem 1.4rem;
}

.contact-dialog-head h2 {
  margin: 0;
  color: var(--crimson-dark);
  font-size: 1.15rem;
  font-weight: 900;
}

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

.contact-close {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--crimson-dark);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
}

.contact-close:hover,
.contact-close:focus-visible {
  background: rgba(160, 20, 47, 0.08);
}

.contact-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

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

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

.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));
  }

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

  .footer-hours-block {
    grid-column: 1 / -1;
  }

  .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 {
    min-height: 2.75rem;
    font-size: 0.78rem;
    padding-inline: 0.85rem;
    white-space: nowrap;
  }

  .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,
  .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;
  }
}