:root {
  --bg: #f6f7f3;
  --surface: #ffffff;
  --ink: #101613;
  --muted: #5b655f;
  --line: #d9ded8;
  --dark: #0b110e;
  --dark-2: #151d19;
  --red: #f2472f;
  --red-dark: #cc3421;
  --soft-red: #ffe9e4;
  --green: #1d4033;
  --cream: #eef1eb;
  --max: 1320px;
  --shadow: 0 18px 45px rgba(16, 22, 19, .08);
  --radius: 18px;
  --radius-sm: 12px;
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: hidden;
  width: 100%;
}

/* anchored targets (footer #delhi / #gurugram links, #clinic-locations) must not
   land underneath the sticky header */
[id] {
  scroll-margin-top: 96px
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  width: 100%;
  min-width: 320px;
}

body::selection {
  background: var(--red);
  color: white
}

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

img {
  max-width: 100%;
  height: auto;
  display: block
}

video,
iframe {
  max-width: 100%;
}

table {
  max-width: 100%;
  border-collapse: collapse;
}

.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

button,
input,
select,
textarea {
  font: inherit
}

h1,
h2,
h3,
h4,
.display {
  font-family: "Big Shoulders Display", "Arial Narrow", sans-serif;
  margin: 0;
  line-height: .97;
  letter-spacing: .15px;
}

p {
  line-height: 1.7;
  margin: 0
}

.container {
  width: min(var(--max), calc(100% - 56px));
  margin: 0 auto
}

.eyebrow {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 14px
}

.condition-highlight {
  color: var(--red)
}

.muted {
  color: var(--muted)
}

.section {
  padding: 104px 0
}

.section-sm {
  padding: 72px 0
}

.grid {
  display: grid;
  gap: 28px
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 52px;
  padding: 0 22px;
  border-radius: 11px;
  border: 2px solid var(--ink);
  font-weight: 800;
  font-size: 14px;
  transition: .2s ease;
  cursor: pointer
}

.btn:hover {
  transform: translateY(-1px)
}

.btn-red {
  background: var(--red);
  border-color: var(--red);
  color: #fff
}

.btn-red:hover {
  background: var(--red-dark);
  border-color: var(--red-dark)
}

.btn-dark {
  background: var(--dark);
  border-color: var(--dark);
  color: #fff
}

.btn-light {
  background: transparent
}

.btn-light:hover {
  background: var(--ink);
  color: #fff
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--cream);
  padding: 9px 13px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  color: var(--green)
}

.whatsapp-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 60;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  background: #20d66b;
  color: #fff;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 10px 24px rgba(16, 22, 19, .2);
  transition: .2s ease
}

.whatsapp-float:hover {
  background: #16b957;
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(16, 22, 19, .25)
}

.whatsapp-float:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 4px
}

.whatsapp-float svg {
  width: 29px;
  height: 29px;
  fill: currentColor
}

/* header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(246, 247, 243, .94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line)
}

.nav {
  min-height: 82px;
  display: flex;
  align-items: center;
  gap: 24px;
  justify-content: space-between
}

.brand {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 290px
}

.brand-mark {
  width: 46px;
  height: 46px;
  background: var(--dark);
  border-radius: 12px;
  padding: 5px;
  display: grid;
  place-items: center;
  overflow: hidden
}

.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain
}

.brand-text {
  font-family: "Big Shoulders Display";
  font-weight: 800;
  font-size: 21px;
  letter-spacing: .2px
}

.brand-sub {
  display: block;
  font-family: Inter, sans-serif;
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--red);
  margin-top: 2px
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px
}

.nav-links a {
  font-size: 16px;
  font-weight: 800;
  color: #56615b;
  padding: 29px 4px 23px;
  border-bottom: 3px solid transparent
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--ink);
  border-bottom-color: var(--red)
}

.nav-cta {
  display: flex;
  align-items: center;
  gap: 15px
}

.phone {
  font-size: 14px;
  font-weight: 800;
  color: #525d56;
  white-space: nowrap
}

.menu {
  display: none;
  border: 2px solid var(--ink);
  background: transparent;
  border-radius: 10px;
  padding: 8px;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transition: border-color .2s ease, background .2s ease;
  -webkit-tap-highlight-color: transparent;
}

.menu:hover {
  background: rgba(16, 22, 19, .05);
}

.menu i {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  margin: 2.5px 0;
  border-radius: 2px;
  transition: transform .25s ease, opacity .25s ease;
}

/* hero */
.hero {
  padding: 72px 0 88px
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 60px;
  align-items: center
}

.hero h1 {
  font-size: clamp(52px, 6vw, 86px);
  max-width: 760px
}

.hero-lead {
  font-size: 20px;
  color: #455149;
  max-width: 660px;
  margin-top: 24px
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  margin-top: 31px
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 25px
}

.hero-art {
  min-height: 560px;
  border-radius: 28px;
  overflow: hidden;
  background: var(--dark);
  position: relative;
  box-shadow: var(--shadow)
}

.hero-art::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 28% 24%, rgba(242, 71, 47, .25), transparent 27%),
    linear-gradient(135deg, #121c17 0%, #09100d 48%, #18221d 100%);
}

.hero-brand {
  position: absolute;
  inset: 34px 34px auto 34px;
  background: var(--dark);
  border-radius: 18px;
  padding: 0;
  overflow: hidden
}

.hero-brand img {
  width: min(92%, 520px);
  margin: 0 auto
}

/* hero image slideshow — keeps the original image box, fades between slides */
.hero-slideshow {
  position: relative;
  width: min(92%, 520px);
  margin: 0 auto;
  aspect-ratio: 4/3;
  min-height: 200px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--dark-2)
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .9s ease;
  pointer-events: none
}

.hero-slide.is-active {
  opacity: 1
}

.hero-slide::before {
  content: "";
  position: absolute;
  inset: -10%;
  background-image: inherit;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: blur(26px) brightness(.6)
}

.hero-brand .hero-slide img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: contain
}

@media (prefers-reduced-motion:reduce) {

  .hero-slide,
  .problem-slide {
    transition: none
  }
}

.about-art .hero-brand {
  height: 210px;
  display: grid;
  place-items: center;
  padding: 20px;
  background: #fff
}

.about-art .hero-brand img {
  width: 320px;
  max-width: none;
  height: 320px;
  object-fit: contain;
  transform: translateY(-54px)
}

.hero-tag {
  position: absolute;
  left: 34px;
  right: 34px;
  bottom: 34px;
  color: #fff
}

.hero-tag strong {
  font-family: "Big Shoulders Display";
  font-size: 40px;
  display: block
}

.hero-tag p {
  font-size: 15px;
  color: #cbd2cd;
  margin-top: 8px;
  max-width: 440px
}

.marker {
  position: absolute;
  width: 110px;
  height: 110px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 50%;
  right: 45px;
  top: 210px
}

.marker::after {
  content: "";
  position: absolute;
  inset: 19px;
  border: 1px solid rgba(242, 71, 47, .6);
  border-radius: 50%
}

/* cards */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 40px
}

.section-head h2 {
  font-size: 52px;
  max-width: 760px
}

.problem-layout {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(430px, .9fr);
  gap: 70px;
  align-items: start;
  position: relative
}

.problem-image {
  min-height: 620px;
  aspect-ratio: 1145/1374;
  border-radius: 28px;
  background: linear-gradient(145deg, #dce5df, #aebeb4);
  position: sticky;
  top: 120px;
  overflow: hidden
}

/* therapy slideshow in the left column — same box as the original image, posters shown uncropped */
.problem-slideshow {
  position: absolute;
  inset: 0;
  border-radius: 28px;
  overflow: hidden;
  background:
    radial-gradient(circle at 74% 16%, rgba(242, 71, 47, .22), transparent 46%),
    linear-gradient(160deg, #121c17 0%, #0b110e 55%, #16201b 100%)
}

.problem-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity .7s ease;
  pointer-events: none
}

.problem-slide.is-active {
  opacity: 1
}

.problem-slideshow .slide-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  background: rgba(11, 17, 14, .62);
  color: #fff;
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 18px rgba(16, 22, 19, .28);
  transition: .2s ease
}

.problem-slideshow .slide-nav:hover {
  background: var(--red)
}

.problem-slideshow .slide-nav:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px
}

.problem-slideshow .slide-nav.prev {
  left: 16px
}

.problem-slideshow .slide-nav.next {
  right: 16px
}

.problem-slideshow .slide-nav svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round
}

@media(max-width:820px) {
  .problem-slideshow .slide-nav {
    width: 42px;
    height: 42px
  }

  .problem-slideshow .slide-nav.prev {
    left: 10px
  }

  .problem-slideshow .slide-nav.next {
    right: 10px
  }
}

.problem-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px
}

.problem-layout .problem-grid {
  gap: 10px
}

.problem-layout .problem-card {
  background: #fff;
  border: 1px solid #e3e7e4;
  border-radius: 14px;
  padding: 12px 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 0;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}

.problem-layout .problem-card:first-child {
  background: #fdeeed;
  border-color: #f3d2cc;
  border-top: 1px solid #f3d2cc
}

.problem-layout .problem-card:hover,
.problem-layout .problem-card:focus-visible {
  background: #fdeeed;
  border-color: #eeb7ae;
  box-shadow: 0 10px 24px rgba(16, 22, 19, .07);
  transform: translateY(-2px);
  outline: none;
  padding-left: 20px;
  padding-right: 20px
}

.problem-num {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.6px;
  color: var(--red)
}

/* home condition cards: keep the same visual height after removing the number labels */
.problem-layout .problem-card {
  min-height: 96px
}

.problem-card h3 {
  font-size: 30px;
  margin-top: 4px
}

.problem-card p {
  color: #9aa3a0;
  font-size: 14px;
  font-weight: 500;
  margin-top: 5px;
  max-height: none;
  overflow: visible;
  opacity: 1;
  transform: none;
  line-height: 1.5
}

.problem-layout .problem-card h3 {
  font-size: 29px;
  margin-top: 2px;
  color: var(--red)
}

.problem-layout .problem-card p {
  margin-top: 3px
}

.link-arrow {
  font-size: 22px;
  font-weight: 800;
  color: #173b2f;
  white-space: nowrap;
  margin-top: 0;
  padding-top: 0;
  flex-shrink: 0;
  line-height: 1
}

/* blank placeholder cards keep the grid shape but stay visually quiet + non-interactive */
.problem-layout .problem-card-blank {
  pointer-events: none;
  background: transparent;
  border-style: dashed;
  border-color: #e3e7e4
}

.problem-layout .problem-card-blank h3,
.problem-layout .problem-card-blank p {
  visibility: hidden
}

.problem-layout .problem-card-blank .link-arrow {
  color: #b9c2bd
}

.dark-band {
  background: var(--dark);
  color: #eef2ef
}

/* slim the black strips site-wide: keep all inner content untouched, just cut excess top/bottom space */
.section.dark-band {
  padding-top: 60px;
  padding-bottom: 60px
}

.section-sm.dark-band {
  padding-top: 44px;
  padding-bottom: 44px
}

.dark-band h2,
.dark-band h3 {
  color: #fff
}

/* .lead is only defined inside .page-hero and .gallery-head, so on a black
   strip it would otherwise fall back to the dark body colour and disappear. */
.dark-band .lead {
  color: #b7c4bb;
  font-size: 17px;
  line-height: 1.7;
  max-width: 62ch
}

/* The gallery closing strip carries a heading, a line of copy and the tagline,
   which stacks to a much taller band than the one-line strips elsewhere. This
   tightens only that one strip - .section.dark-band keeps its 60px elsewhere. */
.section.dark-band.gallery-cta {
  padding-top: 52px;
  padding-bottom: 52px
}

.gallery-cta .section-head {
  margin-bottom: 0;
  align-items: center
}

.gallery-cta .section-head h2 {
  font-size: 42px;
  margin-bottom: 10px
}

.gallery-cta .eyebrow {
  margin-bottom: 10px
}

.gallery-cta .lead {
  font-size: 16.5px;
  line-height: 1.65;
  margin-bottom: 0
}

.gallery-cta .about-banner-tag {
  font-size: 22px;
  margin-top: 12px
}

.gallery-cta .about-banner-actions {
  gap: 12px
}

.gallery-cta .about-banner-actions .btn {
  min-height: 46px;
  padding: 0 28px
}

@media (max-width: 960px) {
  .section.dark-band.gallery-cta {
    padding-top: 42px;
    padding-bottom: 42px
  }

  .gallery-cta .section-head h2 {
    font-size: 36px
  }
}

/* The About closing strip uses the same full-bleed black band as the gallery
   CTA. It reuses .about-banner-tag / .about-banner-actions for the tagline and
   buttons, so only the band layout itself needs to be defined here. */
.section.dark-band.about-cta {
  padding-top: 52px;
  padding-bottom: 52px
}

.about-cta .section-head {
  margin-bottom: 0;
  align-items: center
}

.about-cta .section-head h2 {
  font-size: 42px;
  margin-bottom: 10px
}

.about-cta .eyebrow {
  margin-bottom: 10px
}

.about-cta .lead {
  font-size: 16.5px;
  line-height: 1.65;
  margin-bottom: 0
}

.about-cta .about-banner-tag {
  font-size: 22px;
  margin-top: 12px
}

.about-cta .about-banner-actions {
  gap: 12px
}

.about-cta .about-banner-actions .btn {
  min-height: 46px;
  padding: 0 28px
}

@media (max-width: 960px) {
  .section.dark-band.about-cta {
    padding-top: 42px;
    padding-bottom: 42px
  }

  .about-cta .section-head h2 {
    font-size: 36px
  }
}

.process {
  grid-template-columns: repeat(4, 1fr);
  counter-reset: step
}

.process-card {
  padding: 28px 18px 16px;
  border-top: 3px solid rgba(255, 255, 255, .18);
  position: relative;
  border-radius: 12px;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease
}

.process-card.red {
  border-top-color: var(--red)
}

.process-card:hover {
  background: var(--dark-2);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .22);
  transform: translateY(-4px)
}

.process-card:hover:not(.red) {
  border-top-color: rgba(242, 71, 47, .7)
}

.process-card .n {
  font-family: "Big Shoulders Display";
  font-size: 45px;
  color: var(--red)
}

.process-card h3 {
  font-size: 28px;
  margin-top: 15px
}

.process-card p {
  color: #b7c2bb;
  font-size: 14px;
  margin-top: 10px;
  max-width: 250px
}

.feature-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center
}

/* Why COMM: video column slightly wider, stretched toward the left edge */
.feature-grid-why {
  grid-template-columns: 1.15fr .85fr;
  gap: 48px;
  align-items: center
}

.feature-grid-why .photo-card-video {
  justify-self: start
}

.photo-card {
  border-radius: 24px;
  overflow: hidden;
  background: var(--dark);
  height: 640px
}

.photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--bg);
  display: block
}

/* combined condition pages: stack 2-3 related photos in the same left column */
.photo-stack {
  display: grid;
  gap: 14px;
  align-content: start
}

.photo-stack .photo-card {
  height: 312px
}

.photo-stack-3 .photo-card {
  height: 204px
}

/* condition pathway: Conditions → Causes → Solution — premium cards */
.ccs-section { padding: 84px 0; position: relative; overflow: hidden; }
.ccs-section-alt { background: linear-gradient(180deg, #fbf6f1 0%, var(--cream) 100%); }
.ccs-dark { background: radial-gradient(1200px 500px at 20% -10%, rgba(242,71,47,.22), transparent 60%), radial-gradient(900px 420px at 90% 110%, rgba(242,71,47,.14), transparent 60%), var(--dark); color: #eef2ef; }
.ccs-dark h2 { color: #fff; }
.ccs-dark .ccs-lead { color: #b9c4bc; }
.ccs-kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; color: var(--red); margin-bottom: 14px; background: var(--soft-red); border: 1px solid #f5cfc7; padding: 7px 14px; border-radius: 999px; }
.ccs-dark .ccs-kicker { background: rgba(242,71,47,.14); border-color: rgba(242,71,47,.4); color: #ff8d7d; }
.ccs-head { max-width: 780px; }
.ccs-head h2 { font-size: clamp(34px, 4.4vw, 56px); margin: 0 0 12px; line-height: .98; letter-spacing: .2px; }
.ccs-head h2 em { font-style: normal; color: var(--red); }
.ccs-lead { color: var(--muted); font-size: 16.5px; line-height: 1.7; margin: 0 0 36px; max-width: 760px; }
.ccs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.ccs-card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 28px 24px 24px; display: flex; flex-direction: column; gap: 12px; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; overflow: hidden; }
.ccs-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--red), #ff8d7d 60%, transparent); opacity: 0; transition: opacity .25s ease; }
.ccs-card:hover { transform: translateY(-6px); box-shadow: 0 24px 55px rgba(16,22,19,.12); border-color: #f0b9ae; }
.ccs-card:hover::before { opacity: 1; }
.ccs-dark .ccs-card { background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.12); backdrop-filter: blur(2px); }
.ccs-dark .ccs-card:hover { border-color: rgba(242,71,47,.6); box-shadow: 0 24px 60px rgba(0,0,0,.45); }
.ccs-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ccs-icon { width: 52px; height: 52px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--soft-red), #fff); border: 1px solid #f3d2cc; flex: none; }
.ccs-dark .ccs-icon { background: rgba(242,71,47,.14); border-color: rgba(242,71,47,.35); }
.ccs-icon svg { width: 27px; height: 27px; stroke: var(--red); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ccs-dark .ccs-icon svg { stroke: #ff8d7d; }
.ccs-num { font-family: "Big Shoulders Display", sans-serif; font-size: 15px; font-weight: 800; letter-spacing: 1.4px; color: #c9d1cb; }
.ccs-dark .ccs-num { color: rgba(255,255,255,.35); }
.ccs-card h3 { font-size: 27px; margin: 2px 0 0; line-height: 1.05; }
.ccs-dark .ccs-card h3 { color: #fff; }
.ccs-card p { font-size: 14.5px; line-height: 1.65; color: var(--muted); margin: 0; }
.ccs-dark .ccs-card p { color: #c2ccc5; }
.ccs-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.ccs-tags span { font-size: 12px; font-weight: 700; color: var(--green); background: #eef3ee; border: 1px solid #dde5dd; padding: 5px 11px; border-radius: 999px; }
.ccs-dark .ccs-tags span { color: #ffd9d1; background: rgba(242,71,47,.12); border-color: rgba(242,71,47,.3); }
.ccs-checks { list-style: none; margin: 6px 0 0; padding: 14px 0 0; border-top: 1px dashed #e3e7e4; display: grid; gap: 10px; }
.ccs-dark .ccs-checks { border-top-color: rgba(255,255,255,.14); }
.ccs-checks li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; font-weight: 600; line-height: 1.5; }
.ccs-tick { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--red); color: #fff; font-size: 13px; font-weight: 900; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }
.ccs-cta-row { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.ccs-hint { font-size: 14px; color: var(--muted); }
.ccs-dark .ccs-hint { color: #b9c4bc; }
@media (max-width: 960px) { .ccs-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .ccs-grid { grid-template-columns: 1fr; } .ccs-section { padding: 60px 0; } .ccs-card { padding: 24px 20px; } }
/* expandable Conditions cards: collapsed = icon + number + title + hint only */
.ccs-expandable .ccs-card { cursor: pointer; }
.ccs-expandable .ccs-card:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.ccs-toggle-hint { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--red); }
.ccs-toggle-hint .ccs-plus { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--red); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 900; line-height: 1; transition: transform .3s ease, background .3s ease, color .3s ease; }
.ccs-expandable .ccs-details { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .38s ease, opacity .3s ease, margin .3s ease; margin: 0; }
.ccs-expandable .ccs-details > div { overflow: hidden; }
.ccs-expandable .ccs-card.is-open .ccs-details { grid-template-rows: 1fr; opacity: 1; margin-top: 2px; }
.ccs-expandable .ccs-card.is-open { border-color: #f0b9ae; box-shadow: 0 24px 55px rgba(16,22,19,.12); }
.ccs-expandable .ccs-card.is-open::before { opacity: 1; }
.ccs-expandable .ccs-card.is-open .ccs-toggle-hint .ccs-plus { transform: rotate(45deg); background: var(--red); color: #fff; }
.ccs-expandable .ccs-card.is-open .ccs-toggle-text::after { content: "Show less"; }
.ccs-expandable .ccs-card:not(.is-open) .ccs-toggle-text::after { content: "Tap to learn more"; }
@media (prefers-reduced-motion: reduce) {
  .ccs-expandable .ccs-details, .ccs-expandable .ccs-toggle-hint .ccs-plus { transition: none; }
}
.photo-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: stretch;
}

.photo-duo .photo-card {
  height: 640px;
  min-height: 420px;
}

/* photo-duo holding three images: keep all of them visible side by side with a
   full-height main image and two stacked cards beside it (no slideshow). Heights
   are matched to the single .photo-card height at each breakpoint so the copy
   card beside the images does not move. */
.photo-duo > .photo-card:first-child:nth-last-child(3) {
  grid-row: span 2;
  height: 640px;
}

.photo-duo > .photo-card:nth-child(2):nth-last-child(2),
.photo-duo > .photo-card:nth-child(3):nth-last-child(1) {
  height: 313px;
}

/* combined condition pages — slideshow option: keep single original-size card,
   cross-fade the [data-slide] images every `data-slideshow` ms (2000 = 2s) */
.photo-card.condition-slideshow {
  position: relative
}

.condition-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .7s ease;
  pointer-events: none;
  background: var(--bg)
}

.condition-slide.is-active {
  opacity: 1
}

/* the Why COMM clip is 1080x1920 (9:16) — wider + shorter card, cropped to fit so full card is visible */
.photo-card.photo-card-video {
  height: min(560px, 70vh);
  width: 100%;
  max-width: 520px;
  aspect-ratio: auto;
  margin-left: 0;
  margin-right: auto;
  background: var(--dark);
  justify-self: start;
}

.feature-grid-why .photo-card.photo-card-video {
  width: 100%;
  max-width: 520px;
  max-height: min(560px, 70vh);
  height: min(560px, 70vh);
  margin-left: 0;
  margin-right: auto
}

.photo-card.photo-card-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

.copy-card {
  padding: 20px 10px 20px 34px
}

.copy-card h2 {
  font-size: 56px;
  max-width: 650px
}

.copy-card p {
  font-size: 17px;
  color: var(--muted);
  max-width: 620px;
  margin-top: 20px
}

.feature-list {
  display: grid;
  gap: 14px;
  margin-top: 26px
}

.feature-list div {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-weight: 800
}

.check {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--soft-red);
  color: var(--red);
  display: grid;
  place-items: center;
  flex: 0 0 24px
}

.trust-grid {
  grid-template-columns: repeat(3, 1fr)
}

.stat {
  background: var(--dark);
  color: #fff;
  border-radius: 18px;
  padding: 30px
}

.stat strong {
  font-family: "Big Shoulders Display";
  font-size: 60px;
  color: var(--red)
}

.stat span {
  display: block;
  color: #b7c2bb;
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.5
}

.service-list {
  display: grid;
  gap: 0
}

.service-row {
  display: grid;
  grid-template-columns: 300px 1fr auto;
  gap: 38px;
  align-items: start;
  padding: 35px 0;
  border-top: 1px solid var(--line)
}

.service-row:last-child {
  border-bottom: 1px solid var(--line)
}

.service-row h3 {
  font-size: 34px
}

.service-row p {
  font-size: 15px;
  color: var(--muted);
  max-width: 700px
}

.service-row .btn {
  min-width: 144px;
  align-self: center;
  justify-self: end;
  white-space: nowrap
}

.service-link {
  background: var(--dark);
  border-color: var(--dark);
  color: #fff;
  gap: 12px
}

.service-link span {
  font-size: 20px;
  line-height: 0;
  transition: transform .2s ease
}

.service-link:hover {
  background: var(--red);
  border-color: var(--red);
  color: #fff
}

.service-link:hover span {
  transform: translateX(3px)
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 17px
}

.tags span {
  padding: 8px 13px;
  border-radius: 999px;
  background: var(--red);
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  transition: background .2s ease, transform .2s ease;
}

.tags span:hover {
  background: var(--red-dark);
}

.reviews-marquee {
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #f6f7f3 60px, #f6f7f3 calc(100% - 60px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #f6f7f3 60px, #f6f7f3 calc(100% - 60px), transparent 100%);
}

.reviews-marquee:hover .reviews-track,
.reviews-marquee:active .reviews-track {
  animation-play-state: paused
}

.reviews-track {
  display: flex;
  gap: 22px;
  width: max-content;
  padding-right: 22px;
  animation: marqueeMove 28s linear infinite;
  will-change: transform
}

@keyframes marqueeMove {
  from {
    transform: translateX(0)
  }

  to {
    transform: translateX(-50%)
  }
}

.review-card {
  flex: 0 0 300px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 30px 30px 56px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  position: relative;
}

.review-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: var(--red);
  outline: none
}

/* the cards are wrapped in links to the Google reviews — size the link so the cards keep their width */
.review-card-link {
  display: block;
  flex: 0 0 300px;
  text-decoration: none;
  color: inherit;
}

.review-card-link .review-card {
  width: 100%;
}

.review-stars {
  font-size: 19px;
  line-height: 1;
  color: var(--red);
  letter-spacing: 4px;
  font-family: Inter, sans-serif
}

.review-name {
  font-family: "Big Shoulders Display", "Arial Narrow", sans-serif;
  font-size: 21px;
  line-height: .97;
  color: var(--ink)
}

.review-text {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0
}

/* small Google "G" badge pinned to the bottom-left of each review card */
.review-card::after {
  content: "";
  position: absolute;
  left: 24px;
  bottom: 18px;
  width: 24px;
  height: 24px;
  display: block;
  z-index: 1;
  pointer-events: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23FFC107' d='M43.6 20.1H42V20H24v8h11.3C33.7 32.7 29.2 36 24 36c-6.6 0-12-5.4-12-12s5.4-12 12-12c3.1 0 5.9 1.2 8 3l5.7-5.7C34.3 6.1 29.4 4 24 4 13 4 4 13 4 24s9 20 20 20 20-9 20-20c0-1.3-.1-2.7-.4-3.9z'/%3E%3Cpath fill='%23FF3D00' d='M6.3 14.7l6.6 4.8C14.7 15.1 19 12 24 12c3.1 0 5.9 1.2 8 3l5.7-5.7C34.3 6.1 29.4 4 24 4 16.3 4 9.7 8.3 6.3 14.7z'/%3E%3Cpath fill='%234CAF50' d='M24 44c5.2 0 9.9-2 13.4-5.2l-6.2-5.2C29.2 35.1 26.7 36 24 36c-5.2 0-9.6-3.3-11.3-8l-6.5 5C9.5 39.6 16.2 44 24 44z'/%3E%3Cpath fill='%231976D2' d='M43.6 20.1H42V20H24v8h11.3c-.8 2.2-2.2 4.2-4.1 5.6l6.2 5.2C41 35.4 44 30.2 44 24c0-1.3-.1-2.7-.4-3.9z'/%3E%3C/svg%3E") no-repeat center/16px 16px;
  border: 1px solid var(--line);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(16, 22, 19, .12);
}

@media(max-width:820px) {
  .review-card {
    flex: 0 0 280px
  }

  .review-card-link {
    flex: 0 0 280px
  }
}

.locations {
  grid-template-columns: repeat(2, 1fr)
}

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

.condition-directory {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 52px;
  border-top: 1px solid var(--line)
}

.condition-row {
  display: grid;
  grid-template-columns: 42px 104px 1fr auto;
  gap: 20px;
  align-items: center;
  min-height: 154px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  transition: background .2s ease, padding .2s ease
}

.condition-row:hover,
.condition-row:focus-visible {
  background: var(--soft-red);
  padding-left: 16px;
  padding-right: 16px;
  outline: none
}

.condition-index {
  font-family: "Big Shoulders Display";
  font-size: 31px;
  color: var(--red);
  align-self: start;
  padding-top: 5px
}

.condition-row-thumb {
  display: block;
  width: 104px;
  height: 104px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--cream);
  border: 1px solid var(--line)
}

.condition-row-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease
}

.condition-row:hover .condition-row-thumb img,
.condition-row:focus-visible .condition-row-thumb img {
  transform: scale(1.06)
}

.condition-row-content {
  display: flex;
  flex-direction: column;
  min-width: 0
}

.condition-row-content .eyebrow {
  margin-bottom: 7px;
  font-size: 11px
}

.condition-row-content strong {
  font-family: "Big Shoulders Display";
  font-size: 31px;
  line-height: 1
}

.condition-row-content span:last-child {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  margin-top: 8px
}

.condition-row-action {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--green);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap
}

.condition-row-action b {
  font-size: 20px;
  line-height: 0;
  transition: transform .2s ease
}

.condition-row:hover .condition-row-action b,
.condition-row:focus-visible .condition-row-action b {
  transform: translateX(4px)
}

.condition-card {
  min-height: 250px;
  padding: 30px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease
}

.condition-card-featured {
  min-height: 320px;
  background: var(--dark);
  color: #fff;
  border-color: var(--dark)
}

.condition-card-featured .eyebrow {
  color: #ff806e
}

.condition-card p {
  color: var(--muted);
  font-size: 14px;
  margin-top: 14px;
  max-width: 430px
}

.condition-card-featured p {
  color: #b9c4bc
}

.condition-card:hover,
.condition-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: var(--red);
  outline: none
}

.condition-card h3 {
  font-size: 34px
}

.condition-card .link-arrow {
  margin-top: 26px
}

.condition-card-featured .link-arrow {
  color: #fff
}

.location-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 32px
}

.location-card h3 {
  font-size: 38px
}

.location-card p {
  color: var(--muted);
  font-size: 14px;
  margin-top: 12px
}

.location-card .actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 24px
}

.dark-band .team-clinic-locations {
  grid-template-columns: repeat(2, 1fr)
}

.team-clinic-locations .location-card {
  background: #fff;
  color: var(--ink)
}

.team-clinic-locations .location-card h3 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap
}

#clinic-locations .location-card h3 {
  color: var(--red)
}

.team-clinic-locations .location-card .eyebrow {
  font-family: "Big Shoulders Display", "Arial Narrow", sans-serif;
  font-size: 38px;
  font-weight: 700;
  line-height: .97;
  letter-spacing: .15px;
  text-transform: none;
  color: var(--red);
  margin-bottom: 0
}

.team-clinic-locations .location-card p {
  font-size: 17px;
  line-height: 1.6;
  margin-top: 14px
}

.team-clinic-locations .location-card .actions .btn {
  font-size: 15px
}

.team-card {
  overflow: hidden;
  padding-top: 32px
}

.team-photo {
  height: 116px;
  margin: 0 0 24px;
  background: transparent;
  overflow: visible;
  display: flex;
  align-items: center
}

.team-photo img {
  width: 110px;
  height: 110px;
  max-width: none;
  max-height: none;
  object-fit: cover;
  display: block;
  border: 3px solid var(--green);
  border-radius: 50%
}

.team-card:nth-child(2) .team-photo img {
  border-color: var(--red)
}

.team-credentials {
  display: grid;
  gap: 8px;
  margin: 22px 0 0;
  padding-left: 24px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5
}

.team-staff-section {
  padding-top: 0
}

.team-staff-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 427px));
  justify-content: center;
  column-gap: 40px;
  row-gap: 20px
}

.team-staff-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px;
  min-width: 0
}

/* Admin cards sit together in the final row as a centred side-by-side pair.
   Uses an explicit class rather than :last-child so inserting or
   reordering cards cannot silently break the layout.
   Each card occupies ONE grid column (default) so the pair sits
   side by side — do not add grid-column: span 2 here. */
.team-staff-card-admin {
  width: 427px;
  max-width: 100%;
  justify-self: center
}

.staff-photo {
  width: 150px;
  height: 150px;
  margin: 0 auto;
  border: 1px dashed #b7c2bb;
  border-radius: 50%;
  background: var(--cream);
  display: grid;
  place-items: center;
  overflow: hidden
}

.staff-photo img {
  width: 144px;
  height: 144px;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center center;
  display: block
}

.staff-photo img[src*="noman.png"],
.staff-photo img[src*="Akriti.png"] {
  object-position: center 5%
}

.team-staff-card h3 {
  font-size: 25px;
  margin-top: 17px
}

.team-staff-card p {
  color: var(--green);
  font-size: 13px;
  font-weight: 800;
  margin-top: 6px
}

.team-staff-card p.staff-bio {
  color: var(--muted);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  margin-top: 10px
}

/* pages */
.page-hero {
  padding: 72px 0 56px;
  border-bottom: 1px solid var(--line)
}

.page-hero h1 {
  font-size: clamp(54px, 6vw, 82px);
  max-width: 1000px
}

.page-hero .lead {
  font-size: 20px;
  color: var(--muted);
  max-width: 820px;
  margin-top: 20px
}

.breadcrumb {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #718078;
  margin-bottom: 18px
}

.faq-layout {
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  gap: 72px;
  align-items: start
}

.faq-intro {
  position: sticky;
  top: 116px
}

.faq-intro h2 {
  font-size: 52px;
  max-width: 430px
}

.faq-intro p {
  font-size: 16px;
  color: var(--muted);
  max-width: 420px;
  margin-top: 20px
}

.faq-list {
  display: grid;
  gap: 12px
}

.faq-list details {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0 24px;
  transition: border-color .2s ease, box-shadow .2s ease
}

.faq-list details:hover,
.faq-list details[open] {
  border-color: #b8c2ba;
  box-shadow: var(--shadow)
}

.faq-list summary {
  list-style: none;
  cursor: pointer;
  padding: 23px 38px 23px 0;
  font-family: "Big Shoulders Display";
  font-size: 28px;
  line-height: 1.05;
  position: relative
}

.faq-list summary::-webkit-details-marker {
  display: none
}

.faq-list summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 18px;
  color: var(--red);
  font-family: Inter, sans-serif;
  font-size: 25px;
  font-weight: 400
}

.faq-list details[open] summary::after {
  content: "-"
}

.faq-list details p {
  color: var(--muted);
  font-size: 15px;
  max-width: 720px;
  padding: 0 0 23px
}

.dark-lead {
  color: #b9c4bc;
  max-width: 760px;
  font-size: 17px
}

/* forms */
.form-card {
  max-width: 760px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 34px
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px
}

.field {
  display: grid;
  gap: 7px
}

.field.full {
  grid-column: 1/-1
}

.field label {
  font-size: 13px;
  font-weight: 800
}

.field input,
.field select,
.field textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fbfcfa;
  padding: 13px 14px;
  color: var(--ink);
  outline: none
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(242, 71, 47, .12)
}

/* ---- "Pain Root Analysis" opt-in, sits beside the preferred-date field ----
   .field input is width:100%, so the checkbox itself needs opting back out to
   a native 18px box before it can sit inline with its label. */
.pra-option {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  /* line the box up with the first text line of the neighbouring date input */
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fbfcfa;
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease
}

.pra-option:hover {
  border-color: #cfd6d1
}

.pra-option:has(input:checked) {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(242, 71, 47, .12)
}

.pra-option input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin: 1px 0 0;
  padding: 0;
  accent-color: var(--red);
  cursor: pointer
}

.pra-option-text {
  display: grid;
  gap: 3px
}

.pra-option-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.25
}

/* reserved space under the checkbox for the price line — kept in the layout
   even when empty so the row does not jump when the text is filled in */
.pra-option-price {
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
  min-height: 17px
}

.pra-option-price strong {
  color: var(--ink)
}

@media(max-width:820px) {
  .pra-option {
    padding: 11px 12px
  }
}

.note {
  font-size: 12px;
  color: #758078;
  margin-top: 12px
}

.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden
}

/* ---- phone field: country picker + number input as one control ----
   The two halves share a single border so they read as one field, with a
   hairline divider between the country button and the number input.

   The country control is a custom listbox rather than a native <select>,
   because a native select cannot show one label when closed (flag + dialling
   code) and a different, fuller label when open (country name + code). */
.phone-input {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fbfcfa
}

.phone-input:focus-within {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(242, 71, 47, .12)
}

.phone-country {
  position: relative;
  flex: 0 0 auto;
  display: flex
}

.phone-country-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 46px;
  padding: 0 10px;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 10px 0 0 10px;
  background: transparent;
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  outline: none
}

.phone-country-btn .cc-flag {
  font-size: 17px;
  line-height: 1
}

.phone-country-btn .cc-dial {
  white-space: nowrap
}

/* Small chevron drawn with borders so no extra icon file is needed. */
.phone-country-btn .cc-caret {
  width: 0;
  height: 0;
  margin-left: 1px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: .6
}

.phone-country-btn:focus-visible {
  box-shadow: inset 0 0 0 2px var(--red)
}

/* Open list: full country name and code, no flag. */
.country-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  min-width: 232px;
  max-height: 264px;
  overflow-y: auto;
  margin: 0;
  padding: 5px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow)
}

.country-menu[hidden] {
  display: none
}

.country-menu li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 40px;
  padding: 0 11px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer
}

.country-menu li .cm-name {
  font-weight: 700
}

.country-menu li .cm-dial {
  color: var(--muted);
  font-weight: 700;
  white-space: nowrap
}

/* Hover and keyboard focus share one highlight so they look identical. */
.country-menu li:hover,
.country-menu li.is-active {
  background: var(--cream)
}

.country-menu li[aria-selected="true"] {
  background: var(--soft-red);
  color: var(--red-dark)
}

.country-menu li[aria-selected="true"] .cm-dial {
  color: var(--red-dark)
}

.phone-input input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 13px 14px
}

.phone-input input:focus {
  box-shadow: none
}

/* Invalid state mirrors .field.has-error so the whole split control reacts. */
.field.has-error .phone-input {
  border-color: var(--red);
  background: var(--soft-red)
}

.field.has-error .phone-input .phone-country-btn {
  border-right-color: var(--red)
}

/* ---- inline field validation ---- */
.field-hint {
  font-weight: 400;
  color: var(--muted)
}

.field-counter {
  font-size: 12px;
  color: var(--muted);
  text-align: right
}

.field-counter.is-near-limit {
  color: var(--red-dark);
  font-weight: 700
}

.field-error {
  font-size: 13px;
  line-height: 1.4;
  color: var(--red-dark);
  font-weight: 600
}

.field-error[hidden] {
  display: none
}

.field.has-error input,
.field.has-error select,
.field.has-error textarea {
  border-color: var(--red);
  background: var(--soft-red)
}

.field.has-error input:focus,
.field.has-error select:focus,
.field.has-error textarea:focus {
  box-shadow: 0 0 0 3px rgba(242, 71, 47, .16)
}

/* ---- booking confirmation ----
   Reuses .form-card for the shell so it matches the form it replaces, and
   leans on the existing tokens (--line, --muted, --red, --green, --cream) so
   no new colours are introduced. */
.booking-confirm {
  outline: none
}

.confirm-icon {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--soft-red);
  border: 1px solid rgba(242, 71, 47, .32);
  margin-bottom: 20px
}

.confirm-icon svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--red);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round
}

.confirm-title {
  font-size: 42px;
  line-height: 1.05;
  margin: 0
}

.confirm-lead {
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
  margin-top: 14px
}

.confirm-summary {
  margin: 26px 0 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--cream);
  overflow: hidden
}

.confirm-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  justify-content: space-between;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line)
}

.confirm-row:last-child {
  border-bottom: 0
}

.confirm-row dt {
  font-size: 13px;
  font-weight: 800;
  color: var(--muted)
}

.confirm-row dd {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  text-align: right
}

.confirm-sub {
  font-size: 22px;
  margin: 30px 0 0
}

.confirm-steps {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 14px
}

.confirm-steps li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink)
}

.step-mark {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--green)
}

.step-mark svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round
}

.step-mark.is-pending {
  background: transparent;
  border: 2px solid var(--line)
}

.confirm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px
}

.confirm-hours {
  font-size: 13px;
  color: var(--muted);
  margin-top: 20px
}

.confirm-foot {
  font-size: 13px;
  color: var(--muted);
  margin-top: 8px
}

.confirm-foot a {
  color: var(--ink);
  font-weight: 700
}

/* Text link that behaves like a button: keeps a 44px tap target on touch
   without changing the visual weight of the surrounding small print. */
.link-button {
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--ink);
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
  min-height: 44px
}

.confirm-foot .link-button {
  min-height: 0;
  line-height: inherit
}

@media(max-width:820px) {
  .confirm-title {
    font-size: 34px
  }

  .confirm-row {
    flex-direction: column;
    gap: 2px
  }

  .confirm-row dd {
    text-align: left
  }

  .confirm-actions .btn {
    flex: 1 1 100%
  }
}

@media (prefers-reduced-motion:reduce) {
  .booking-confirm {
    animation: none !important
  }
}

/* footer */
footer {
  background: var(--dark);
  color: #eef2ef;
  margin-top: 100px;
  padding: 70px 0 28px
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.35fr .85fr .95fr .95fr;
  gap: 42px
}

footer h4 {
  font-family: "Big Shoulders Display";
  font-size: 25px;
  color: #fff;
  margin-bottom: 18px
}

footer a {
  display: block;
  color: #aab5ae;
  font-size: 17px;
  padding: 6px 0
}

footer a[href^="tel:"]::before {
  content: "\260E"
}

footer a[href*="wa.me"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f2472f'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z'/%3E%3C/svg%3E")
}

footer a[href*="#delhi"]::before,
footer a[href*="#gurugram"]::before {
  content: "";
  display: inline-block;
  width: 13px;
  height: 13px;
  margin: 0 11px 0 3px;
  background: radial-gradient(circle at 65% 35%, var(--dark) 0 2px, transparent 2.5px), var(--red);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  vertical-align: -1px
}

footer a[href^="tel:"]::before {
  display: inline-block;
  width: 20px;
  margin-right: 7px;
  color: var(--red);
  font-size: 16px;
  text-align: center
}

footer a[href*="wa.me"]::before,
footer a[href*="instagram.com"]::before,
footer a[href*="facebook.com"]::before,
footer a[href*="youtube.com"]::before,
footer a[href*="linkedin.com"]::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 9px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  vertical-align: -3px
}

footer a[href*="instagram.com"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f2472f'%3E%3Cpath d='M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077'/%3E%3C/svg%3E")
}

footer a[href*="facebook.com"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f2472f'%3E%3Cpath d='M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z'/%3E%3C/svg%3E")
}

footer a[href*="youtube.com"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f2472f'%3E%3Cpath d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/%3E%3C/svg%3E")
}

footer a[href*="linkedin.com"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f2472f'%3E%3Cpath d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z'/%3E%3C/svg%3E")
}

footer a:hover {
  color: #fff
}

.footer-detail {
  color: #788780;
  font-size: 13px;
  line-height: 1.5;
  margin: 12px 0 0
}

footer a:hover::before {
  color: #fff
}

.footer-brand p {
  color: #9ea9a2;
  max-width: 310px;
  font-size: 14px;
  margin-top: 15px
}

.footer-mark {
  width: min(100%, 280px);
  height: auto;
  background: transparent;
  border-radius: 0;
  padding: 0
}

.footer-mark img {
  width: 100%;
  height: auto
}

.footer-bottom {
  border-top: 1px solid #27322c;
  margin-top: 46px;
  padding-top: 22px;
  color: #78837c;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  gap: 15px;
  flex-wrap: wrap
}

@media(max-width:1100px) {
  .nav-links {
    gap: 16px
  }

  .nav-links a {
    font-size: 15px;
    padding-left: 2px;
    padding-right: 2px
  }

  .phone {
    display: none
  }

  .hero-grid,
  .feature-grid {
    grid-template-columns: 1fr
  }

  .feature-grid-why {
    gap: 32px
  }

  .feature-grid-why .photo-card.photo-card-video {
    width: 100%;
    max-width: 460px;
    height: min(520px, 70vh);
    margin: 0 auto
  }

  .hero-art {
    min-height: 480px
  }

  .problem-layout {
    grid-template-columns: minmax(220px, .85fr) minmax(360px, 1.15fr);
    gap: 40px
  }

  .problem-layout .problem-grid {
    grid-template-columns: 1fr
  }

  .condition-directory {
    grid-template-columns: 1fr
  }

  .problem-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .process {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 38px
  }

  .service-row {
    grid-template-columns: 230px 1fr
  }

  .service-row .btn {
    grid-column: 2;
    justify-self: start
  }

  .testimonials {
    grid-template-columns: 1fr
  }

  .footer-grid {
    grid-template-columns: 1.2fr 1fr;
    gap: 36px
  }
}

/* ---- phone (up to 640px) ----------------------------------------------
   .container drops to a tighter gutter here rather than at 980px, so tablets
   keep the roomier 56px padding while phones gain horizontal space. */
@media(max-width:640px) {
  .container {
    width: min(var(--max), calc(100% - 36px))
  }

  /* The header brand carries min-width:290px plus the full "COMM · Centre of
     Movement Medicine" lockup, which together exceed a 320px viewport and push
     the sticky header into horizontal scroll. Let the text column shrink and
     ellipsis the tagline so the bar always fits.
     Note: the text column is a bare <span>, and text-overflow has no effect on
     inline boxes - so it must be made block-level before it can ellipsis. */
  /* Specificity (0,2,0) is deliberate: the ≤980px block further down this file
     also sets .brand{flex-shrink:0} and is declared later, so a plain .brand
     rule here would lose and the bar could not shrink. */
  .nav .brand {
    min-width: 0;
    flex-shrink: 1;
    gap: 10px
  }

  .brand > span:not(.brand-mark) {
    display: block;
    min-width: 0
  }

  /* Wrap the name rather than truncating it: the full clinic name is
     identifying, so it must stay readable. Two lines still fit inside the
     72px header minimum. Only the small red tagline ellipsis is acceptable. */
  .nav .brand-text {
    display: block;
    min-width: 0;
    line-height: 1.15
  }

  .nav .brand-sub {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
  }

  .nav .brand-mark {
    width: 40px;
    height: 40px;
    flex: 0 0 auto
  }
}

/* ---- touch devices --------------------------------------------------
   Cosmetic hover states (card lifts, colour shifts) can latch on after a
   tap on touch screens, leaving a button looking "stuck down". This reset is
   additive: it only applies where there is no real hover pointer, so mouse
   and desktop rendering is completely untouched. */
@media (hover: none) {
  .btn:hover,
  .whatsapp-float:hover,
  .process-card:hover,
  .ccs-card:hover,
  .ccs-dark .ccs-card:hover,
  .review-card:hover,
  .service-card:hover,
  .service-link:hover,
  .gallery-tile--video:hover,
  .gallery-tile--link:hover,
  .ccs-card:hover::before {
    transform: none;
    box-shadow: none
  }

  /* Only the hover *delta* is undone; each button keeps its resting colour by
     re-stating it, since "inherit" would drop the red fill entirely. */
  .btn-red:hover {
    background: var(--red);
    border-color: var(--red);
    color: #fff
  }

  .btn-light:hover,
  .menu:hover {
    background: transparent;
    border-color: var(--ink)
  }

  .tags span:hover,
  .gallery-lightbox-btn:hover,
  .lightbox-nav:hover,
  .problem-slideshow .slide-nav:hover {
    border-color: inherit
  }

  .service-link:hover,
  .pra-option:hover,
  .gallery-chip:hover,
  .gallery-tile--link:hover,
  .footer a:hover,
  .quote-band-link:hover,
  .gallery-foot-link:hover {
    background: inherit;
    border-color: inherit;
    color: inherit
  }
}

@media(max-width:980px) {
  .nav {
    min-height: 72px
  }

  .brand {
    min-width: 0;
    flex-shrink: 0
  }

  .brand-text {
    font-size: 18px
  }

  .brand-sub {
    font-size: 10px;
    letter-spacing: 1.1px
  }

  footer a {
    padding: 12px 0
  }

  .nav-links,
  .nav-cta {
    display: none
  }

  .menu {
    display: inline-flex
  }

  .nav.mobile-open {
    flex-wrap: wrap;
    max-height: calc(100vh - 72px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch
  }

  .nav.mobile-open .nav-links {
    display: flex;
    order: 3;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 0 16px
  }

  .nav.mobile-open .nav-links a {
    padding: 13px 4px;
    border-bottom: 1px solid var(--line);
    font-size: 16px
  }

  .nav.mobile-open .nav-cta {
    display: flex;
    flex-direction: column;
    gap: 12px;
    order: 4;
    width: 100%;
    padding-bottom: 20px
  }

  .nav.mobile-open .nav-cta .btn {
    width: 100%;
    min-height: 48px;
    font-size: 15px
  }

  .nav.mobile-open .nav-cta .phone {
    display: block;
    text-align: center;
    padding: 6px 0;
    font-size: 14px
  }

  .nav.mobile-open .menu i:nth-child(1) {
    transform: translateY(7px) rotate(45deg)
  }

  .nav.mobile-open .menu i:nth-child(2) {
    opacity: 0;
    transform: scaleX(0)
  }

  .nav.mobile-open .menu i:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg)
  }

  .section {
    padding: 76px 0
  }

  .hero {
    padding: 48px 0 64px
  }

  .hero h1 {
    font-size: clamp(38px, 8.5vw, 56px);
    line-height: 1.02;
    word-break: break-word
  }

  .hero-lead {
    font-size: 17px
  }

  /* hero art on phones: stack the slideshow, the caption and the badge in normal flow
     instead of absolutely positioning them, so no text can land on top of the photo */
  .hero-art {
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 22px;
    border-radius: 24px
  }

  .hero-brand {
    position: static;
    inset: auto;
    padding: 0;
    background: transparent;
    border-radius: 0
  }

  .hero-slideshow {
    width: 100%;
    max-width: 100%;
    min-height: 0
  }

  /* the caption stays a positioned box: .hero-art::before is an opaque gradient overlay
     which paints after in-flow content, so a static caption would be covered by it
     (its box is in the right place but the text is invisible) */
  .hero-tag {
    position: relative;
    z-index: 2;
    left: auto;
    right: auto;
    bottom: auto;
    margin-top: 20px
  }

  .hero-tag strong {
    font-size: 32px
  }

  .hero-tag p {
    font-size: 14px;
    max-width: none
  }

  .hero-art .marker {
    display: none
  }

  /* about page: the desktop brand plate is a fixed 210px tall box with the logo nudged
     upwards; on phones let the plate hug the logo so nothing gets cropped */
  .about-art {
    min-height: 0 !important
  }

  .about-art .hero-brand {
    height: auto;
    padding: 18px;
    background: #fff
  }

  .about-art .hero-brand img {
    width: min(100%, 300px);
    height: auto;
    transform: none
  }

  .section-head {
    align-items: flex-start;
    flex-direction: column
  }

  .section-head h2,
  .copy-card h2 {
    font-size: 44px
  }

  .problem-layout {
    grid-template-columns: 1fr;
    gap: 28px
  }

  /* the desktop sticky offset must be cleared, otherwise position:relative keeps painting
     the therapy poster 120px lower and the condition cards overlap it */
  .problem-image {
    min-height: 0;
    position: relative;
    top: auto;
    aspect-ratio: 1145/1374;
    max-height: 78vh;
    border-radius: 20px
  }

  .dark-band .team-clinic-locations {
    grid-template-columns: 1fr
  }

  .conditions-grid {
    grid-template-columns: 1fr
  }

  .condition-card,
  .condition-card-featured {
    min-height: 240px
  }

  .condition-directory {
    grid-template-columns: 1fr
  }

  .condition-row {
    grid-template-columns: 34px 76px 1fr;
    gap: 12px;
    min-height: 0;
    padding: 20px 0
  }

  .condition-row-thumb {
    width: 76px;
    height: 76px;
    border-radius: 12px
  }

  .condition-row-action {
    grid-column: 2 / -1;
    margin-top: 4px
  }

  .faq-layout {
    grid-template-columns: 1fr;
    gap: 42px
  }

  .faq-intro {
    position: static
  }

  .faq-intro h2 {
    font-size: 44px
  }

  .problem-grid,
  .trust-grid,
  .locations {
    grid-template-columns: 1fr
  }

  .team-staff-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .team-staff-card-admin {
    width: auto;
    grid-column: auto;
    justify-self: stretch
  }

  /* condition cards stay single-column pills on mobile */
  .problem-layout .problem-grid {
    grid-template-columns: 1fr;
    gap: 12px
  }

  .problem-card {
    min-height: 0;
    padding: 14px 18px;
    flex-direction: row;
    align-items: center
  }

  .problem-card p {
    font-size: 13px
  }

  .problem-card h3 {
    font-size: 26px
  }

  .link-arrow {
    font-size: 13px
  }

  .service-row {
    grid-template-columns: 1fr;
    gap: 16px
  }

  .service-row .btn {
    grid-column: auto;
    justify-self: start
  }

  .copy-card {
    padding: 28px 0
  }

  .photo-card {
    height: 360px
  }

  .photo-stack .photo-card {
    height: 280px
  }

  .photo-duo {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .photo-duo .photo-card {
    height: 300px;
    min-height: 0;
  }

  .photo-duo > .photo-card:first-child:nth-last-child(3) {
    height: 360px;
  }

  .photo-duo > .photo-card:nth-child(2):nth-last-child(2),
  .photo-duo > .photo-card:nth-child(3):nth-last-child(1) {
    height: 175px;
  }

  .photo-card.photo-card-video,
  .feature-grid-why .photo-card.photo-card-video {
    height: min(480px, 72vh);
    width: 100%;
    max-width: 400px;
    margin: 0 auto
  }

  .team-staff-grid {
    grid-template-columns: 1fr
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 30px
  }

  .form-grid {
    grid-template-columns: 1fr
  }

  .field.full {
    grid-column: auto
  }

  .field input,
  .field select,
  .field textarea,
  .phone-input input,
  .phone-country-btn {
    font-size: 16px
  }

  .country-menu {
    max-width: calc(100vw - 36px)
  }

  /* the sticky header is 72px tall on phones: anchored sections need a smaller offset */
  [id] {
    scroll-margin-top: 84px
  }

  /* keep the floating WhatsApp button clear of the phone's bottom / side insets */
  .whatsapp-float {
    right: calc(16px + env(safe-area-inset-right, 0px));
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    width: 54px;
    height: 54px;
    touch-action: manipulation
  }

  .team-photo {
    height: 116px;
    margin-left: 0;
    margin-right: 0
  }
}


/* additional services */
.extra-services {
  grid-template-columns: repeat(4, 1fr)
}

.service-card {
  background: var(--dark);
  color: #fff;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid #26302b;
  transition: .22s ease
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow)
}

.service-card-media {
  height: 275px;
  background: #111;
  overflow: hidden
}

.service-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.service-card-body {
  padding: 24px
}

.service-card h3 {
  font-size: 31px
}

.service-card p {
  color: #bdc6c0;
  font-size: 14px;
  margin-top: 11px
}

.service-card .tagline {
  display: inline-block;
  color: #fff;
  background: rgba(242, 71, 47, .16);
  border: 1px solid rgba(242, 71, 47, .4);
  padding: 6px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  margin-bottom: 13px
}

/* ---- services image scroller: the 10 "service-*" cards drift left in a single
   row and loop seamlessly. The duplicate set is created by JS (cloning the
   originals) rather than hand-written in the HTML, so the two halves can never
   drift apart and the source markup stays half the size.

   Smoothness notes:
   - translate3d + will-change keep the movement on the compositor, so scrolling
     never triggers layout or paint.
   - the loop distance is set from a CSS variable (--marquee-distance) that JS
     measures in px, so the wrap point is exact at every breakpoint instead of
     relying on a hard-coded -50% that only lines up by coincidence.
   ---- */
.services-marquee {
  position: relative;
  overflow: hidden;
  width: 100%
}

.services-track {
  display: flex;
  gap: 22px;
  width: max-content;
  padding-right: 22px;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden
}

/* Only animate once JS has measured the real loop distance. Without JS the
   cards simply sit still and remain readable, instead of drifting by a guess. */
.services-marquee.is-animated .services-track {
  animation: marqueeScroll var(--marquee-duration, 60s) linear infinite
}

.services-marquee:hover .services-track,
.services-marquee:focus-within .services-track,
.services-marquee.is-paused .services-track {
  animation-play-state: paused
}

.services-track .service-card {
  /* fixed width so every card keeps the 275px media box + body proportions of
     the original grid, whatever the viewport */
  flex: 0 0 320px
}

/* Cards are clickable (they open the enlarged image), so they need the
   affordances of a control as well as the existing hover lift. */
.services-track .service-card {
  cursor: zoom-in
}

.services-track .service-card:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px
}

@keyframes marqueeScroll {
  from {
    transform: translate3d(0, 0, 0)
  }

  to {
    transform: translate3d(calc(var(--marquee-distance, 0px) * -1), 0, 0)
  }
}

@media(max-width:1100px) {
  .services-track .service-card {
    flex: 0 0 290px
  }
}

@media(max-width:820px) {
  .services-track .service-card {
    flex: 0 0 250px
  }

  .services-marquee.is-animated .services-track {
    animation-duration: 48s
  }
}

@media (prefers-reduced-motion:reduce) {
  .services-marquee.is-animated .services-track {
    animation: none
  }
}

/* ---- lightbox: enlarged service image ---- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px
}

.lightbox[hidden] {
  display: none
}

.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 10, 8, .88);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px)
}

.lightbox-panel {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(1100px, 100%);
  animation: lightboxIn .22s ease both
}

@keyframes lightboxIn {
  from {
    opacity: 0;
    transform: scale(.96)
  }

  to {
    opacity: 1;
    transform: scale(1)
  }
}

.lightbox-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  min-width: 0
}

.lightbox-figure img {
  max-width: min(900px, 78vw);
  max-height: 76vh;
  width: auto;
  height: auto;
  border-radius: 18px;
  border: 1px solid #2b3530;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
  background: #111
}

.lightbox-figure figcaption {
  color: #e8ede9;
  font-size: 15px;
  font-weight: 600;
  text-align: center
}

.lightbox-close,
.lightbox-nav {
  display: grid;
  place-items: center;
  border: 1px solid #35413a;
  background: rgba(20, 26, 23, .9);
  color: #fff;
  border-radius: 999px;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease
}

.lightbox-close {
  position: absolute;
  top: -46px;
  right: 0;
  width: 38px;
  height: 38px;
  font-size: 26px;
  line-height: 1
}

.lightbox-nav {
  width: 46px;
  height: 46px;
  font-size: 30px;
  line-height: 1;
  flex: 0 0 auto
}

.lightbox-close:hover,
.lightbox-nav:hover {
  background: var(--red);
  border-color: var(--red)
}

.lightbox-close:focus-visible,
.lightbox-nav:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px
}

@media(max-width:820px) {
  .lightbox-nav {
    display: none
  }

  .lightbox-figure img {
    max-width: 92vw;
    max-height: 70vh
  }
}

/* ==========================================================================
   Gallery (About page)
   Sits on the page's normal (light) background so it flows with the other
   sections. Headings and links use the site ink/muted tokens; white is
   reserved for text that sits on top of photography (captions, badges).
   ========================================================================== */
.gallery-section {
  padding: 88px 0
}

.gallery-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 44px
}

.gallery-head h2 {
  font-size: 52px;
  color: var(--ink)
}

.gallery-head .eyebrow {
  margin-bottom: 14px
}

.gallery-head .lead {
  font-size: 17px;
  line-height: 1.65;
  color: var(--muted);
  margin-top: 16px
}

/* 4 columns x 2 rows. Rows are deliberately tall: most clinic photos are
   portrait, so the tiles are taller than they are wide rather than stretched
   sideways, which is what a short row would produce. */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 250px;
  gap: 12px
}

.gallery-tile {
  position: relative;
  display: block;
  overflow: hidden;
  border: 0;
  padding: 0;
  border-radius: 14px;
  background: #131a16;
  color: #fff;
  cursor: pointer;
  text-align: left;
  font: inherit;
  min-height: 44px; /* comfortable pointer target on every tile */
  transition: transform .22s ease
}

.gallery-tile--featured {
  grid-column: span 2;
  grid-row: span 2
}

.gallery-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease
}

/* Gentle bottom shading for depth, and to keep the "Video · 0:07" badge and the
   play button sitting clearly on top of the photo. No caption is drawn over the
   tiles, so this stays subtle. */
.gallery-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(6, 10, 8, .42) 0%, rgba(6, 10, 8, 0) 55%);
  pointer-events: none
}

/* Hover: gentle lift, with the image easing in behind it. */
.gallery-tile--image:hover,
.gallery-tile--video:hover {
  transform: translateY(-3px)
}

.gallery-tile--image:hover img,
.gallery-tile--video:hover img {
  transform: scale(1.05)
}

.gallery-badge {
  position: absolute;
  top: 11px;
  right: 11px;
  z-index: 2;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(11, 17, 14, .74);
  border: 1px solid rgba(255, 255, 255, .16);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .3px
}

.gallery-play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 58px;
  height: 58px;
  margin: -29px 0 0 -29px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(242, 71, 47, .94);
  border: 2px solid rgba(255, 255, 255, .5);
  transition: transform .22s ease, background .22s ease
}

.gallery-play svg {
  width: 24px;
  height: 24px;
  fill: #fff;
  margin-left: 3px
}

.gallery-tile--video:hover .gallery-play {
  background: var(--red-dark);
  transform: scale(1.08)
}

.gallery-tile--featured .gallery-play {
  width: 74px;
  height: 74px;
  margin: -37px 0 0 -37px
}

.gallery-tile--featured .gallery-play svg {
  width: 30px;
  height: 30px
}

/* Link tile: thin dashed border, centred copy, no media. */
.gallery-tile--link {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  text-align: center;
  padding: 16px;
  background: transparent;
  border: 1px dashed var(--line)
}

.gallery-tile--link::after {
  display: none
}

.gallery-tile--link:hover {
  border-color: var(--red);
  background: var(--soft-red)
}

.gallery-link-count {
  font-size: 16px;
  font-weight: 800;
  color: var(--ink)
}

.gallery-link-more {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--red)
}

.gallery-tile--link .gallery-link-count,
.gallery-tile--link .gallery-link-more {
  position: static
}

/* Visible keyboard focus on every tile. */
.gallery-tile:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px
}

.gallery-foot {
  text-align: center;
  margin-top: 34px
}

.gallery-foot-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
  border-bottom: 2px solid var(--red);
  padding-bottom: 3px;
  transition: color .2s ease
}

.gallery-foot-link:hover {
  color: var(--red)
}

/* ---- gallery lightbox ---- */
.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px
}

.gallery-lightbox[hidden] {
  display: none
}

.gallery-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 10, 8, .93);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px)
}

.gallery-lightbox-panel {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: min(1160px, 100%);
  animation: lightboxIn .22s ease both
}

.gallery-lightbox-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0
}

.gallery-lightbox-stage {
  display: grid;
  place-items: center;
  min-width: 0
}

/* Shared sizing for whichever media is showing. */
.gallery-lightbox-stage img,
.gallery-lightbox-stage video {
  max-width: min(980px, 80vw);
  max-height: 76vh;
  width: auto;
  height: auto;
  border-radius: 16px;
  border: 1px solid #2b3530;
  background: #111;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
  display: block
}

.gallery-lightbox-caption {
  margin-top: 14px;
  text-align: center;
  color: #e8ede9;
  font-size: 15px;
  font-weight: 600
}

/* Shown when a clip has not been uploaded yet. */
.gallery-lightbox-note {
  margin: 0;
  padding: 40px 28px;
  max-width: min(520px, 80vw);
  text-align: center;
  color: #b9c4bd;
  font-size: 15px;
  font-weight: 600;
  background: #131a16;
  border: 1px dashed #3a463f;
  border-radius: 16px
}

.gallery-lightbox-btn {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border: 1px solid #35413a;
  background: rgba(20, 26, 23, .9);
  color: #fff;
  border-radius: 999px;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease
}

.gallery-lightbox-btn:hover {
  background: var(--red);
  border-color: var(--red)
}

.gallery-lightbox-btn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px
}

.gallery-lightbox-close {
  position: absolute;
  top: -52px;
  right: 0;
  width: 42px;
  height: 42px;
  font-size: 28px
}

/* ---- responsive ---- */
/* Tablet: 2 columns, featured video spans the full width. */
@media (max-width: 980px) {
  .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 220px
  }

  .gallery-tile--featured {
    grid-column: span 2;
    grid-row: span 2
  }

  .gallery-head h2 {
    font-size: 44px
  }
}

/* Mobile: single column, featured video first. Tiles are 4:3 rather than 16:9
   so portrait photos are not cropped hard on a narrow screen. */
@media (max-width: 640px) {
  .gallery-section {
    padding: 62px 0
  }

  .gallery-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 12px
  }

  .gallery-tile--featured,
  .gallery-tile--image,
  .gallery-tile--video {
    grid-column: auto;
    grid-row: auto;
    min-height: 0;
    aspect-ratio: 4 / 3
  }

  .gallery-tile--link {
    aspect-ratio: auto;
    min-height: 92px
  }

  .gallery-head h2 {
    font-size: 36px
  }

  .gallery-head .lead {
    font-size: 15px
  }

  /* Arrows would cover the media on a small screen; keys still work. */
  .gallery-lightbox-prev,
  .gallery-lightbox-next {
    display: none
  }

  .gallery-lightbox-stage img,
  .gallery-lightbox-stage video {
    max-width: 92vw;
    max-height: 72vh
  }
}

/* Reduced motion: drop the hover lift, image zoom and play-button pulse. */
@media (prefers-reduced-motion: reduce) {
  .gallery-tile,
  .gallery-tile img,
  .gallery-play,
  .gallery-foot-link {
    transition: none
  }

  .gallery-tile--image:hover,
  .gallery-tile--video:hover,
  .gallery-tile--video:hover .gallery-play {
    transform: none
  }

  .gallery-tile--image:hover img,
  .gallery-tile--video:hover img {
    transform: none
  }

  .gallery-lightbox-panel {
    animation: none
  }
}

/* ==========================================================================
   Gallery page (/gallery/gallery.html)

   Reuses the tile, badge, play-button and lightbox rules above so the full
   gallery matches the About section exactly. Only the page-level pieces are
   new: the filter chips, the three-column page grid, the result counter and
   the empty state.
   ========================================================================== */

/* Visually hidden but still read by screen readers - used for the section
   heading, since the hero already carries the visible title. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0
}

/* Tiles past the first page carry [hidden] until JS reveals them. The generic
   [hidden] rule loses to .gallery-tile's display:block, so restate it here or
   every tile would show at once. */
.gallery-tile[hidden] {
  display: none
}

/* ---- filter chips ---- */
.gallery-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 auto 38px
}

.gallery-chip {
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .3px;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease
}

.gallery-chip:hover {
  border-color: var(--ink);
  background: var(--cream)
}

.gallery-chip[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff
}

.gallery-chip:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px
}

/* ---- page grid ---- */
/* Three columns with the featured video spanning 2x2 on the left, which is
   the arrangement from the layout mockup. Rows are tall because most of the
   clinic photos are portrait. */
.gallery-grid--page {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 268px
}

.gallery-count {
  text-align: center;
  margin: 30px 0 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700
}

.gallery-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 18px
}

.gallery-more-wrap[hidden] {
  display: none
}

.gallery-more-wrap .btn {
  min-height: 48px;
  padding: 0 32px
}

/* "3 / 35" under the caption, so the visitor knows how far through they are. */
.gallery-lightbox-counter {
  margin: 10px 0 0;
  text-align: center;
  color: #9aa69f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .6px
}

@media (max-width: 980px) {
  .gallery-grid--page {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 240px
  }
}

@media (max-width: 640px) {
  .gallery-grid--page {
    grid-template-columns: 1fr;
    grid-auto-rows: auto
  }

  .gallery-filters {
    gap: 8px;
    margin-bottom: 28px
  }

  .gallery-chip {
    padding: 0 15px;
    font-size: 13px;
    min-height: 44px
  }
}

/* Six nav items share the bar on desktop/laptop. Between 981px and 1120px,
   tighten the links and CTA button so the navbar never wraps. */
@media (min-width: 981px) and (max-width: 1120px) {
  .nav {
    gap: 16px
  }

  .nav-links {
    gap: 12px;
    flex-shrink: 1
  }

  .nav-links a {
    font-size: 13.5px;
    padding-left: 2px;
    padding-right: 2px;
    white-space: nowrap
  }

  .brand {
    min-width: 0;
    flex-shrink: 1
  }

  .brand-text {
    font-size: 17px
  }

  .brand-sub {
    font-size: 9.5px
  }

  .nav-cta .btn {
    padding: 0 16px;
    font-size: 13px;
    white-space: nowrap;
    flex-shrink: 0
  }
}

.partner-section {
  background: var(--cream);
  overflow: hidden
}

.partner-intro {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 30px;
  margin-bottom: 34px
}

.partner-intro h2 {
  font-size: 50px;
  max-width: 650px
}

.partner-intro p {
  font-size: 15px;
  color: var(--muted);
  max-width: 520px
}

.marquee {
  position: relative;
  overflow: hidden;
  width: 100%;
  mask-image: none;
  -webkit-mask-image: none
}

.marquee-track {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  padding: 10px 0 14px;
}

.partner-card {
  width: 215px;
  min-height: 170px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: auto
}

.partner-card img {
  width: 92px;
  height: 92px;
  object-fit: contain
}

.partner-card span {
  font-size: 13px;
  font-weight: 900;
  margin-top: 13px;
  text-align: center
}

.partner-note {
  font-size: 12px;
  color: #718078;
  margin-top: 12px
}

/* ---- patient quote band (replaces the "Common examples" strip on condition subpages) ---- */
.quote-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px
}

.quote-band-text {
  max-width: 780px
}

.quote-band-quote {
  font-family: "Big Shoulders Display", "Arial Narrow", sans-serif;
  font-size: 34px;
  line-height: 1.16;
  color: #fff;
  margin: 10px 0 0;
  padding: 0;
  border: 0
}

.quote-band-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 20px
}

.quote-band-name {
  font-family: "Big Shoulders Display", "Arial Narrow", sans-serif;
  font-size: 21px;
  line-height: .97;
  color: #fff
}

.quote-band-stars {
  font-size: 17px;
  line-height: 1;
  color: var(--red);
  letter-spacing: 4px
}

.quote-band-link {
  font-size: 13px;
  color: #9aa5a0;
  text-decoration: underline;
  text-underline-offset: 3px
}

.quote-band-link:hover {
  color: #fff
}

.quote-band .btn {
  flex: 0 0 auto;
  white-space: nowrap
}

@media(max-width:820px) {
  .quote-band {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px
  }

  .quote-band-quote {
    font-size: 26px
  }
}

@media(max-width:1100px) {
  .extra-services {
    grid-template-columns: repeat(2, 1fr)
  }

  .marquee-track {
    grid-template-columns: repeat(3, 1fr)
  }
}

@media(max-width:820px) {
  .extra-services {
    grid-template-columns: 1fr
  }

  .service-card-media {
    height: 300px
  }

  .partner-intro {
    align-items: flex-start;
    flex-direction: column
  }

  .partner-intro h2 {
    font-size: 42px
  }

  .marquee-track {
    grid-template-columns: repeat(2, 1fr)
  }

  .partner-card {
    min-height: 150px
  }

  .partner-card img {
    width: 78px;
    height: 78px
  }
}

@media(max-width:520px) {
  .marquee-track {
    grid-template-columns: 1fr
  }

  /* the therapy posters are square assets: match the phone frame to them so the poster
     fills the card instead of floating in dark letterbox bars */
  .problem-image {
    aspect-ratio: 1/1
  }

  /* review cards: never wider than the screen, otherwise the card is cut off mid-text */
  .review-card,
  .review-card-link {
    flex: 0 0 min(280px, 84vw)
  }

  /* condition cards: give the copy the full card width and drop the arrow onto its own line.
  .problem-layout .problem-card is more specific, so the selector has to be repeated here. */
  .problem-layout .problem-card {
    min-height: 0;
    padding: 14px 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px
  }

  .problem-layout .problem-card h3 {
    font-size: 26px
  }

  .problem-layout .problem-card p {
    font-size: 13px
  }

  .problem-layout .problem-card .link-arrow {
    align-self: flex-end
  }

  /* process steps: one full-width step per row instead of two cramped columns */
  .process {
    grid-template-columns: 1fr;
    row-gap: 0
  }

  .process-card {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 2px 14px;
    padding: 20px 14px;
    border-top-width: 2px
  }

  .process-card .n {
    grid-column: 1;
    grid-row: 1/3;
    font-size: 38px;
    line-height: 1
  }

  .process-card h3 {
    grid-column: 2;
    font-size: 26px;
    margin-top: 0
  }

  .process-card p {
    grid-column: 2;
    font-size: 13.5px;
    max-width: none;
    margin-top: 6px
  }

  /* stat band: tighten the dark-band stat rhythm on the narrowest phones */
  .stat {
    padding: 22px
  }

  .stat strong {
    font-size: 46px
  }

  .stat span {
    margin-top: 6px
  }

  .pathway-steps {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* ==========================================================================
   VIDEO TESTIMONIALS SECTION & CAROUSEL
   ========================================================================== */

.video-testimonials-section {
  background: #111418;
  color: #fff;
  padding: 84px 0 92px;
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.video-testimonials-section::before {
  content: "";
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 350px;
  background: radial-gradient(circle, rgba(242, 71, 47, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

.video-section-head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 44px;
}

.video-section-head .eyebrow {
  margin-bottom: 10px;
}

.video-section-head h2 {
  font-size: 46px;
  color: #fff;
  margin: 0 0 10px;
}

.video-section-head p {
  color: #9aa3a0;
  font-size: 16px;
  margin: 0;
  line-height: 1.5;
}

.video-carousel-wrapper {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.video-carousel-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  position: relative;
}

.video-thumbnail-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  background: #1b2026;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}

.video-thumbnail-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

/* Side preview cards (grayscale) */
.video-thumbnail-card.side-card {
  width: 200px;
  height: 290px;
  filter: grayscale(100%) brightness(0.65);
  opacity: 0.45;
  transform: scale(0.88);
}

.video-thumbnail-card.side-card:hover {
  filter: grayscale(50%) brightness(0.85);
  opacity: 0.8;
  transform: scale(0.92);
  border-color: rgba(242, 71, 47, 0.4);
}

/* Center card (active) */
.video-thumbnail-card.active-card {
  width: 320px;
  height: 420px;
  filter: none;
  opacity: 1;
  transform: scale(1);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(242, 71, 47, 0.25);
}

.video-thumbnail-card.active-card:hover img {
  transform: scale(1.03);
}

.video-play-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  color: #111418;
  font-family: Inter, sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  padding: 11px 22px;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  pointer-events: auto;
  transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
  white-space: nowrap;
  text-decoration: none;
  z-index: 3;
}

.video-play-overlay svg {
  width: 26px;
  height: 26px;
  fill: var(--red);
  transition: fill 0.25s ease;
}

.video-thumbnail-card.active-card:hover .video-play-overlay,
.video-play-overlay:hover {
  transform: translate(-50%, -50%) scale(1.08);
  background: var(--red);
  color: #ffffff;
  box-shadow: 0 10px 28px rgba(242, 71, 47, 0.45);
}

.video-thumbnail-card.active-card:hover .video-play-overlay svg,
.video-play-overlay:hover svg {
  fill: #ffffff;
}

/* Nav & Author Row */
.video-carousel-meta {
  margin-top: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  width: 100%;
}

.video-nav-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--red);
  color: #ffffff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 14px rgba(242, 71, 47, 0.35);
  flex-shrink: 0;
}

.video-nav-arrow:hover {
  background: #ff5840;
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(242, 71, 47, 0.55);
}

.video-nav-arrow:active {
  transform: scale(0.95);
}

.video-nav-arrow svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2.6;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.video-author-details {
  text-align: center;
  min-width: 220px;
}

.video-author-name {
  display: block;
  font-family: "Big Shoulders Display", sans-serif;
  font-size: 27px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #ffffff;
  line-height: 1.15;
}

.video-author-role {
  display: block;
  font-size: 18px;
  font-weight: 600;
  color: #c5ccc9;
  margin-top: 4px;
}

/* Quote Box */
.video-quote-container {
  margin-top: 22px;
  max-width: 680px;
  text-align: center;
  position: relative;
  padding: 0 16px;
}

.video-quote-mark {
  font-family: "Big Shoulders Display", serif;
  font-size: 72px;
  line-height: 0.5;
  color: var(--red);
  display: block;
  margin-bottom: 12px;
  opacity: 0.85;
}

.video-quote-body {
  font-size: 21px;
  line-height: 1.6;
  color: #d8deda;
  font-style: italic;
  font-weight: 400;
  margin: 0;
  min-height: 64px;
  transition: opacity 0.3s ease;
}

@media (min-width: 769px) and (max-width: 1024px) {
  .video-thumbnail-card.side-card {
    width: 140px;
    height: 220px;
    opacity: 0.4;
  }
  .video-thumbnail-card.active-card {
    width: 280px;
    height: 380px;
  }
  .video-carousel-row {
    gap: 16px;
    overflow: hidden;
  }
}

@media (max-width: 768px) {
  .video-thumbnail-card.side-card {
    width: 80px;
    height: 160px;
    opacity: 0.35;
    transform: scale(0.85);
  }
  .video-thumbnail-card.active-card {
    width: min(260px, calc(100vw - 48px));
    height: 360px;
  }
  .video-carousel-row {
    gap: 10px;
    overflow: hidden;
  }
  .video-section-head h2 {
    font-size: clamp(28px, 6vw, 36px);
  }
  .video-quote-body {
    font-size: 17px;
  }
}

@media (max-width: 520px) {
  .video-thumbnail-card.side-card {
    display: none;
  }
  .video-thumbnail-card.active-card {
    width: min(290px, calc(100vw - 36px));
    height: min(400px, 60vh);
  }
}

/* condition pages: image tiles beside the "Typical pathway" copy block.
   Stacked layouts (the .feature-grid single-column layout below 1100px): the cards are
   squares whose side is half the row width, capped at the same 650px the .copy-card h2
   uses, so the pair reads as one block roughly as wide as the copy's text column.
   Two-column layouts (above the 1100px stack breakpoint, see the media query at the end
   of this block): the row is stretched to the copy block's text height less its 20px
   vertical padding, so the tiles start level with the "Typical pathway" line and finish
   level with the last checklist bullet next to them, and the images fill the tile edge to
   edge (cover) so no blank bars show. Stacked layouts keep the square tiles and show the
   whole image (contain) because there is no tall copy column to match there. */
.photo-duo-square {
  max-width: 650px;
  align-items: start
}

.photo-duo-square .photo-card,
.photo-duo-square > .photo-card:first-child:nth-last-child(3),
.photo-duo-square > .photo-card:nth-child(2):nth-last-child(2),
.photo-duo-square > .photo-card:nth-child(3):nth-last-child(1) {
  height: auto;
  min-height: 0;
  aspect-ratio: 1/1
}

.photo-duo-square .photo-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent
}

/* two-column layout: the tile row spans the copy block's text height, so the images
   start level with the "Typical pathway" eyebrow and end level with the final checklist
   bullet. .copy-card uses 20px top/bottom padding, so the stretched rows are pulled in
   by the same 20px on both sides to line up with the text rather than the card box.
   The row fills the whole image column (no 650px cap) so the tiles are as large as the
   column allows, and the photos fill their tile edge to edge (cover) instead of sitting
   in the card behind dark bars. */
@media (min-width: 1101px) {
  /* both tracks are sized explicitly (half the row less half the 14px .photo-duo gap)
     instead of 1fr 1fr: with equal fr tracks Chrome rounds each tile's device-pixel edges
     on its own at odd row widths, which showed up as a stray 1px difference between the
     two tiles of the pair. Explicit tracks keep the pair exactly identical. */
  .photo-duo-square {
    grid-template-columns: repeat(2, calc(50% - 7px));
    align-self: stretch;
    margin-top: 20px;
    margin-bottom: 20px;
    align-items: stretch;
    max-width: none
  }

  .photo-duo-square .photo-card,
  .photo-duo-square > .photo-card:first-child:nth-last-child(3),
  .photo-duo-square > .photo-card:nth-child(2):nth-last-child(2),
  .photo-duo-square > .photo-card:nth-child(3):nth-last-child(1) {
    height: auto;
    min-height: 0;
    aspect-ratio: auto
  }

  .photo-duo-square .photo-card {
    position: relative
  }

  .photo-duo-square .photo-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center
  }

  /* designed condition posters (hamstring, ACL, meniscus, ankle, knee, injury prevention)
     are graphics whose type column sits hard against their left edge (7% margin), so a
     centred cover crop eats the headline at the narrower two-column widths. Anchoring the
     fill crop to the left on those tiles (.photo-card-poster) keeps the whole text column
     intact and spends the crop on the decorative photo side of the poster instead. Tiles
     holding plain photographs keep the centred crop, which suits their centred subjects. */
  .photo-duo-square .photo-card-poster img {
    object-position: left center
  }
}

/* ==========================================================================
   ABOUT PAGE REFRESH STYLING
   ========================================================================== */

.about-story-grid {
  align-items: center;
  gap: 52px;
}

.about-story-copy h2 {
  font-size: clamp(38px, 4.5vw, 56px);
  max-width: 680px;
  margin-bottom: 22px;
}

.about-story-copy p {
  font-size: 16.5px;
  color: var(--muted);
  margin-bottom: 16px;
  line-height: 1.75;
}

.about-tagline-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 10px 18px;
  background: var(--cream);
  border-left: 3px solid var(--red);
  border-radius: 6px;
  font-family: "Big Shoulders Display", sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .5px;
  color: var(--ink);
}

.about-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.about-stat-card {
  background: var(--dark-2);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 18px;
  padding: 28px 24px;
  transition: transform .2s ease, border-color .2s ease;
}

.about-stat-card:hover {
  transform: translateY(-3px);
  border-color: var(--red);
}

.about-stat-num {
  font-family: "Big Shoulders Display", sans-serif;
  font-size: clamp(48px, 5vw, 64px);
  font-weight: 800;
  line-height: .95;
  color: #fff;
  margin-bottom: 8px;
}

.about-stat-num span {
  color: var(--red);
}

.about-stat-label {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
}

.about-stat-desc {
  font-size: 13.5px;
  color: #a0ada4;
  line-height: 1.55;
  margin: 0;
}

.about-pillars-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.about-pillar-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 32px 26px;
  position: relative;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.about-pillar-card:hover {
  transform: translateY(-4px);
  border-color: var(--red);
  box-shadow: 0 16px 36px rgba(16, 22, 19, .08);
}

.about-pillar-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 24px;
  right: 24px;
  height: 3px;
  background: transparent;
  transition: background .25s ease;
  border-radius: 0 0 4px 4px;
}

.about-pillar-card:hover::before {
  background: var(--red);
}

.about-pillar-card .pillar-idx {
  font-family: "Big Shoulders Display", sans-serif;
  font-size: 38px;
  font-weight: 800;
  color: var(--red);
  line-height: 1;
  margin-bottom: 14px;
}

.about-pillar-card h3 {
  font-size: 26px;
  margin-bottom: 12px;
  color: var(--ink);
}

.about-pillar-card p {
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.65;
  margin: 0;
}

.about-banner {
  background: var(--dark);
  color: #fff;
  border-radius: 26px;
  padding: 56px 48px;
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  align-items: center;
  gap: 36px;
}

.about-banner h2 {
  font-size: clamp(34px, 4vw, 50px);
  color: #fff;
  margin-bottom: 14px;
}

.about-banner p {
  font-size: 16px;
  color: #b7c4bb;
  line-height: 1.7;
  margin-bottom: 8px;
}

.about-banner-tag {
  font-family: "Big Shoulders Display", sans-serif;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--red);
  text-transform: uppercase;
  margin-top: 14px;
}

.about-banner-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

@media (max-width: 960px) {
  .about-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .about-pillars-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .about-banner {
    grid-template-columns: 1fr;
    padding: 38px 28px;
  }
}

@media (max-width: 600px) {
  .about-stats-grid {
    grid-template-columns: 1fr;
  }
  .about-pillars-grid {
    grid-template-columns: 1fr;
  }
  .about-banner-actions {
    width: 100%;
  }
  .about-banner-actions .btn {
    width: 100%;
  }
}