/* ==========================================================================
   Freedom of Movement Chiropractic — Home
   Design reference: Figma "Home Page Design" (1600px desktop frame)
   ========================================================================== */

@font-face {
  font-family: "IvyPresto Text";
  src: url("../fonts/ivypresto-text-semibold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Metric-adjusted fallback shown only until IvyPresto Text has loaded. */
@font-face {
  font-family: "IvyPresto Fallback";
  src: url("../fonts/playfair-display-600-latin.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  size-adjust: 101.5%;
}

:root {
  --green: #799c40;
  --orange: #e74904;
  --amber: #fdab15;
  --ink: #000;
  --navy: #011e3d;
  --grey-bg: #f4f4f4;
  --card-grey: #f1f1f1;
  --muted: #a1b0cb;
  --gradient: linear-gradient(90deg, var(--orange) 0%, var(--amber) 100%);

  --font-display: "IvyPresto Text", "IvyPresto Fallback", Georgia, serif;
  --font-body: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;

  --container: 1472px;
  --gutter: 64px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
  background: #fff;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 50px;
  line-height: 1.04;
  letter-spacing: -0.04em;
  color: var(--green);
}

/* ---------- Buttons ---------- */
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7.948px;
  height: 55px;
  padding: 0 15.896px;
  border: 1px solid transparent;
  border-radius: 7.948px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15.896px;
  line-height: 19.075px;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
}
.btn img { flex: none; width: auto; height: auto; }
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--gradient); color: #fff; }
.btn--primary:hover { box-shadow: 0 8px 20px rgba(231, 73, 4, .3); }
.btn--outline { border-color: #000; color: #000; }
.btn--outline:hover { background: rgba(0, 0, 0, .04); box-shadow: 0 8px 20px rgba(0, 0, 0, .08); }
.btn--outline-light { border-color: #fff; color: #fff; }
.btn--outline-light:hover { background: rgba(255, 255, 255, .1); }

/* ---------- Top bar ---------- */
.topbar {
  position: relative;
  z-index: 30;
  height: 23px;
  padding-top: 1px;
  background: linear-gradient(90deg, rgba(231, 73, 4, 0) 0%, var(--amber) 49.038%, rgba(255, 255, 255, 0) 100%);
  text-align: center;
  overflow: hidden;
}
.topbar p {
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
  color: var(--navy);
  text-transform: capitalize;
  white-space: nowrap;
}

/* ---------- Header ---------- */
.header {
  position: relative;
  z-index: 20;
  background: #fff;
}
.header__inner {
  position: relative;
  display: flex;
  align-items: center;
  height: 70px;
}
.header__logo {
  position: absolute;
  top: 13px;
  left: var(--gutter);
  width: 170px;
  height: 150px;
  overflow: hidden;
}
.header__logo img,
.footer__logo img {
  position: absolute;
  top: -4.67%;
  left: -25.89%;
  width: 151.78%;
  max-width: none;
  height: 113.9%;
}

.nav {
  display: flex;
  align-items: center;
  flex: 1;
  margin-left: 313px;
}
.nav__list { display: flex; align-items: center; gap: 32px; margin-top: -4px; }
.nav__link {
  position: relative;
  display: block;
  font-weight: 600;
  font-size: 16.019px;
  line-height: 24px;
  letter-spacing: -0.01em;
  color: #000;
  transition: color .2s ease;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 1px;
  bottom: -7px;
  width: 23.5px;
  height: 3.2px;
  background: var(--gradient);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.nav__link:hover { color: var(--orange); }
.nav__link.is-active::after,
.nav__link:hover::after { transform: scaleX(1); }
.nav__actions { display: flex; gap: 12px; margin-left: auto; }

/* Services dropdown */
.nav__item { position: relative; }
.nav__row { display: flex; align-items: center; gap: 4px; }
.nav__sub-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 24px;
  color: #000;
  transition: color .2s ease, transform .25s ease;
}
.nav__sub-toggle:hover { color: var(--orange); }
.nav__item.is-open .nav__sub-toggle { transform: rotate(180deg); }
.nav__sub {
  position: absolute;
  top: calc(100% + 18px);
  left: -24px;
  z-index: 30;
  display: grid;
  width: 390px;
  padding: 10px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(29, 22, 29, .14);
  border-top: 3px solid var(--orange);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.nav__sub::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 22px; } /* hover bridge */
.nav__sub a {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.35;
  color: #000;
  transition: background-color .2s ease, color .2s ease, padding-left .2s ease;
}
.nav__sub a:hover,
.nav__sub a:focus-visible { background: rgba(121, 156, 64, .1); color: var(--green); padding-left: 18px; outline: none; }
.nav__sub a[aria-current="page"] { color: var(--orange); font-weight: 600; }
@media (hover: hover) and (min-width: 1280px) {
  .nav__item:hover .nav__sub { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .nav__item:hover .nav__sub-toggle { transform: rotate(180deg); }
}
.nav__item.is-open .nav__sub { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

.nav-toggle {
  display: none;
  position: relative;
  z-index: 50;
  width: 44px;
  height: 44px;
  margin-left: auto;
  border-radius: 8px;
}
.nav-toggle span {
  position: absolute;
  left: 10px;
  width: 24px;
  height: 2.5px;
  border-radius: 2px;
  background: #000;
  transition: transform .25s ease, opacity .25s ease;
}
.nav-toggle span:nth-child(1) { top: 14px; }
.nav-toggle span:nth-child(2) { top: 21px; }
.nav-toggle span:nth-child(3) { top: 28px; }
.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 792px;
  padding: 106px 0 45px;
  background:
    linear-gradient(148.35deg, rgba(255, 255, 255, .5) 24.739%, rgba(255, 255, 255, 0) 72.271%),
    #e9e7e9;
  overflow: hidden;
  isolation: isolate;
}
.hero__art {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
/* The stage reproduces the Figma composition (photo + swoosh + cut-out) at its
   native 1600×800 ratio so the three layers always stay registered. */
.hero__stage {
  position: absolute;
  top: -4px;
  right: calc(-1 * clamp(0px, 1600px - 100vw, 250px));
  width: 1600px;
  height: 800px;
}
.hero__bg { position: absolute; inset: 0; isolation: isolate; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero__bg::before,
.hero__bg::after { content: ""; position: absolute; inset: 0; }
.hero__bg::before {
  background: linear-gradient(119.38deg, #fff 11.444%, #b8c4a4 90.785%);
  mix-blend-mode: overlay;
}
.hero__bg::after {
  background: linear-gradient(148.35deg, rgba(255, 255, 255, .5) 24.739%, rgba(255, 255, 255, 0) 72.271%);
}
.hero__swoosh {
  position: absolute;
  left: 21.0625%;
  top: .5%;
  width: 79.1875%;
  height: 99.5%;
  max-width: none;
}
/* Figma: 986×792 frame at x 614. The source PNG is stored vertically
   squashed (1024×512) and is stretched to the frame, so fill is intended. */
.hero__cutout {
  position: absolute;
  left: 38.375%;
  top: .5%;
  width: 61.625%;
  height: 99%;
  max-width: none;
  object-fit: fill;
}

.hero__content { position: relative; }
.hero__title {
  max-width: 645px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 64px;
  line-height: 1.04;
  letter-spacing: -0.04em;
  color: var(--green);
}
.hero__text {
  max-width: 678px;
  margin-top: 33px;
}
.hero__buttons { margin-top: 40px; }

.hero__features {
  display: grid;
  grid-template-columns: 272px 204px auto;
  margin-top: 35px;
  padding-left: 15px;
}
.feature {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.5;
}
.feature img { width: 52px; height: 52px; }

/* ---------- CTA strip ---------- */
.cta-strip-section { padding-top: 61px; }
.cta-strip {
  display: flex;
  align-items: center;
  min-height: 122px;
  padding: 0 27px 0 46px;
  border-radius: 20px;
  background: var(--green);
  color: #fff;
}
.cta-strip__title {
  flex: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 34px;
  line-height: 1.191;
  letter-spacing: -0.01em;
}
.cta-strip__text {
  flex: 0 1 auto;
  min-width: 0;
  margin-left: 85px;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: -0.01em;
}
.cta-strip__buttons { flex: none; margin-left: auto; gap: 19px; flex-wrap: nowrap; }

/* ---------- What We Treat ---------- */
.treat { padding: 80px 0 106px; }
.treat__title { text-align: center; }
.treat__intro {
  max-width: 1040px;
  margin: 28px auto 0;
  text-align: center;
}
.treat__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26.286px;
  margin-top: 66px;
}
.condition-card {
  display: flex;
  flex-direction: column;
  gap: 17.524px;
  padding: 35.048px 35.048px 35px;
  border-radius: 17.524px;
  background: #fff;
  box-shadow: 0 8.762px 8.762px rgba(29, 22, 29, .04);
  transition: transform .25s ease, box-shadow .25s ease;
}
.condition-card:hover { transform: translateY(-4px); box-shadow: 0 16px 28px rgba(29, 22, 29, .08); }
.condition-card__media {
  position: relative;
  height: 255px;
  border-radius: 12px;
  overflow: hidden;
}
.condition-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.condition-card__head { display: flex; align-items: center; gap: 17.524px; }

.condition-card__head h3 {
  font-weight: 600;
  font-size: 19.714px;
  line-height: 1.3;
  color: var(--green);
}
/* Short titles stay on one line where the card is wide enough; below the 1600
   frame the cards tighten to make room. */
@media (min-width: 1024px) { .condition-card__head h3.nowrap-lg { white-space: nowrap; } }
@media (min-width: 1360px) and (max-width: 1599px) {
  .condition-card { padding: 26px; }
  .condition-card__head h3 { font-size: clamp(15px, 1.2vw, 19.714px); }
}/* A card with a detail page is clickable as a whole (stretched link) */
.condition-card:has(.condition-card__link) { position: relative; cursor: pointer; }
.condition-card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.condition-card__link:focus-visible { outline: none; }
.condition-card:has(.condition-card__link:focus-visible) { outline: 2px solid var(--orange); outline-offset: 3px; }
.icon-badge {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 52.571px;
  height: 52.571px;
  border-radius: 50%;
  background: var(--gradient);
}
.icon-badge img { width: 26.286px; height: 26.286px; }

/* ---------- Split section: copy + photo (Home "Recovery", About sections) ---------- */
.split-section { padding: 62px 0 61px; }
.split-section--grey { background: var(--grey-bg); }
/* Copy column is fixed at Figma's 796px (+3px inset) so the paragraph wraps as
   designed; the photo takes up to 602px of what remains. */
.split {
  display: grid;
  grid-template-columns: 799px minmax(0, 602px);
  justify-content: space-between;
  gap: 48px;
  align-items: center;
}
.split--media-left { grid-template-columns: minmax(0, 602px) 799px; }
.split__content { padding-left: 3px; }
.split--media-left .split__content { padding-left: 0; }
.split .section-title { line-height: 1.15; }
.split__text { max-width: 796px; margin-top: 40px; }
.recovery__features {
  display: grid;
  grid-template-columns: 284px 1px 245px 1px auto;
  max-width: 780px;
  margin-top: 44px;
}
.recovery__features .feature:nth-of-type(3) { padding-left: 42px; }
.recovery__features .feature:nth-of-type(5) { padding-left: 54px; }
.recovery__features .feature span { white-space: nowrap; }

/* Below the 1600 frame the copy column is narrower than the 780px feature row:
   shrink the photo column and tighten the row so every label stays on one line. */
.recovery__divider { width: 1px; height: 35px; margin-top: 29px; background: #000; }


/* Below 1360px the copy column must narrow: compact feature row, labels on one line. */
@media (max-width: 1359px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 36%); gap: 40px; }
  .split--media-left { grid-template-columns: minmax(0, 36%) minmax(0, 1fr); }
  .recovery__features { grid-template-columns: auto 1px auto 1px auto; justify-content: start; column-gap: 16px; }
  .recovery__features .feature:nth-of-type(3),
  .recovery__features .feature:nth-of-type(5) { padding-left: 0; }
  .recovery__features .feature { font-size: 15px; }
  .recovery__features .feature img { width: 46px; height: 46px; }
  .recovery__divider { margin-top: 26px; }
  .treat__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .condition-card__head h3 { font-size: 18px; }
}
.split__content .btn-row { margin-top: 48px; gap: 13px; }

.split__photo {
  position: relative;
  aspect-ratio: 602 / 663;
  border-radius: 20px;
  overflow: hidden;
}
.split__photo > img { width: 100%; height: 100%; object-fit: cover; }
/* Side by side: the photo is at least its 602×663 shape, and grows to match the
   text column when the text is taller, so both columns are always the same height. */
@media (min-width: 1200px) {
  .split { align-items: stretch; }
  .split__content { display: flex; flex-direction: column; justify-content: center; }
  .split__photo { aspect-ratio: auto; }
  .split__photo::before { content: ""; display: block; padding-top: 110.13%; } /* 663 / 602 */
  .split__photo > img { position: absolute; inset: 0; }
}

/* ---------- Technique ---------- */
.technique { padding-top: 70px; }
.technique__inner {
  display: grid;
  grid-template-columns: minmax(0, 723fr) minmax(0, 695fr);
  gap: 51px;
  align-items: center;
}
.technique__media { margin-left: 3px; }
.technique__media img { width: 100%; aspect-ratio: 723 / 520.892; object-fit: cover; }
.technique .section-title { line-height: 1.15; }
.technique__content p { margin-top: 25px; }
.technique__content strong { font-weight: 700; }
.technique__content .btn { margin-top: 38px; }

/* ---------- What to Expect ---------- */
.expect {
  padding: 103px 0 72px;
  border-bottom: 1px solid rgba(0, 0, 0, .36);
}
.expect__title { text-align: center; }
.expect__steps {
  display: flex;
  justify-content: space-between;
  margin-top: 81px;
}
.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 280px;
  text-align: center;
}
.step__icon {
  position: relative;
  width: 186px;
  height: 186px;
}
.step__icon > img:first-child:not(.step__glyph) { width: 100%; height: 100%; }
.step__icon--ring {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--grey-bg);
}
.step__icon--ring::before {
  content: "";
  position: absolute;
  inset: 19px;
  border: 1px solid #000;
  border-radius: 50%;
}
.step__glyph { position: relative; }
.step__glyph--2 { width: 30.4%; }
.step__glyph--3 { width: 29.57%; }
.step__glyph--4 { width: 32.8%; }
.step__num {
  position: absolute;
  top: 16px;
  left: 155px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-size: 17px;
  line-height: 1;
}
.step p { max-width: 253px; margin-top: 37px; }
.step:nth-child(2) p { max-width: 279px; }
.step:nth-child(4) p { max-width: 213px; }
/* four equal columns across the content width: equal space left and right */
.expect__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.step { width: auto; }

/* ---------- Insurance ---------- */
.insurance { padding-top: 77px; }
.insurance__box {
  position: relative;
  min-height: 496px;
  padding: 47px 52.5px 46px;
  border-radius: 34px;
  background: var(--green);
  overflow: hidden;
  isolation: isolate;
  color: #fff;
}
/* One composite photo: green fade on the left, family starting at 52.3% of its width.
   The photo is placed so the family always begins 40px right of the copy column
   (never under the text), and is scaled up if needed to still reach the right edge. */
.insurance__art {
  --fam: calc(52.5px + min(657px, (100% - 105px) * .6) + 40px);
  position: absolute;
  inset: 0;
  z-index: -1;
}
.insurance__art img {
  position: absolute;
  bottom: 0;
  left: var(--fam);
  height: 100%;
  width: auto;
  min-width: calc((100% - var(--fam)) / .477);
  max-width: none;
  object-fit: cover;
  object-position: 52.3% bottom;
  transform: translateX(-52.3%);
}
.insurance__content { max-width: min(657px, 60%); }.insurance__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 50px;
  line-height: 1.04;
  letter-spacing: -0.04em;
  text-transform: capitalize;
}
.insurance__content p { margin-top: 25.5px; }
.insurance__content p:first-of-type { margin-top: 25px; }
.insurance__content .btn-row { margin-top: 41.5px; }

/* ---------- Testimonials ---------- */
.testimonials { padding: 81px 0 80.5px; }
.testimonials__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.testimonials__nav { display: flex; gap: 11px; margin-right: 4px; }
.circle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 1px solid #000;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  transition: background-color .2s ease, opacity .2s ease;
}
.circle-btn:hover { background: var(--grey-bg); }
.circle-btn:disabled { opacity: .35; cursor: default; }
.circle-btn--prev img { transform: scaleX(-1); }

.testimonials__track {
  display: flex;
  justify-content: safe center; /* wide screens: cards sit centred under the heading */
  gap: 17.5px;
  margin-top: 69px;
  padding: 0 var(--gutter);
  overflow-x: auto;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.testimonials__track::-webkit-scrollbar { display: none; }
.testimonial {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: column;
  width: 411px;
  min-height: 446.486px;
  padding: 58px 46px 41.5px 58px;
  border-radius: 20px;
  background: var(--card-grey);
  scroll-snap-align: start;
}
.testimonial__google { position: absolute; top: 36px; right: 26px; width: 56px; height: 56px; }
.stars { display: flex; gap: 10px; }
.stars i {
  width: 13px;
  height: 12px;
  background: url("../icons/star.svg") center / contain no-repeat;
}
.testimonial blockquote {
  margin-top: 37px;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.47;
}
@media (min-width: 768px) {
  .testimonial { padding-right: 0; }
  .testimonial:nth-child(1) blockquote { width: 306.7px; }
  .testimonial:nth-child(2) blockquote { width: 308.5px; }
  .testimonial:nth-child(3) blockquote { width: 295px; }
  .testimonial:nth-child(4) blockquote { width: 329px; }
}
.testimonial__author {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-top: auto;
  padding-top: 24px;
}
.testimonial__author img { width: 57px; height: 57px; border-radius: 50%; }
.testimonial__author span { display: flex; flex-direction: column; padding-top: 5px; }
.testimonial__author strong { font-weight: 400; font-size: 20px; line-height: 1.32; }
.testimonial__author small { margin-top: 2.6px; font-weight: 400; font-size: 14px; line-height: 1.32; }

/* ---------- FAQ ---------- */
.faq { padding-bottom: 84px; }
.faq__title { text-align: center; }
.faq__list { display: flex; flex-direction: column; gap: 27.65px; margin-top: 75px; }
.faq-item {
  border: 1px solid var(--green);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, .02);
  transition: background-color .3s ease;
}
.faq-item.is-open + .faq-item { margin-top: -5px; }
.faq-item.is-open {
  border: 0;
  background: var(--gradient);
  color: #fff;
}
.faq-item__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 24px;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 28.28px;
  line-height: 1.25;
  letter-spacing: -0.05em;
  text-transform: capitalize;
}
.faq-item.is-open .faq-item__header { padding-bottom: 16px; }
.faq-item__toggle {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--green) url("../icons/plus.svg") center / 14px no-repeat;
}
.faq-item.is-open .faq-item__toggle { background: #fff url("../icons/minus.svg") center / 14px no-repeat; }
.faq-item__body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .3s ease;
}
.js .faq-item:not(.is-open) .faq-item__body { grid-template-rows: 0fr; }
.faq-item__inner { overflow: hidden; }
.faq-item__inner p {
  margin: 0 24px 24px;
  padding-top: 8px;
  border-top: 1px solid #e2e8f0;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.6;
}
.faq-item:not(.is-open) .faq-item__inner p { border-top-color: rgba(121, 156, 64, .3); }
.faq-item__inner a { text-decoration: underline; }

/* ---------- Location ---------- */
.location { padding: 63px 0; background: var(--grey-bg); }
.location__inner {
  display: grid;
  /* heading (762px at 50px) keeps one line; the map gives up width instead */
  grid-template-columns: minmax(762px, 1fr) minmax(0, 602px);
  gap: 48px;
  align-items: center;
}
.location .section-title { white-space: nowrap; }
.location__content p { max-width: 780px; margin-top: 31px; }
.location__content .btn-row { margin-top: 32.5px; }
.location__map {
  position: relative;
  display: block;
  aspect-ratio: 602 / 319;
  border-radius: 41px;
  overflow: hidden;
}
.location__map::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 3px solid var(--green);
  border-radius: inherit;
}
.location__map::after { pointer-events: none; z-index: 1; }
.location__map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- Section spacing modifiers (inner pages) ---------- */
.split__text p + p { margin-top: 1lh; }
/* Inner-page copy is set on a 26px line pitch in Figma */
.hero--photo .hero__text,
.page-inner .split__text,
.page-inner .showcase__text { line-height: 26px; }
.split-section--intro .split__text { margin-top: 24px; }
.page-inner .split-section--grey .split__text { margin-top: 27px; }
.page-inner .split-section--grey .btn-row { margin-top: 40px; }
.page-inner .insurance { padding-top: 73px; }
.page-inner .testimonials { padding: 76px 0 75.5px; }
.split-section--intro { padding: 75px 0 0; }
.cta-strip-section--spaced { padding: 75px 0; }
.expect--tight { padding-top: 75px; }
.treat--after-hero { padding: 71px 0 74px; }

/* ---------- Photo hero (inner pages: About, Services) ---------- */
/* padding-bottom keeps the buttons clear of the banner's bottom edge when a long
   intro makes the hero taller than the photo; the photo then grows with it */
.hero--photo { min-height: 796px; padding-top: 192px; padding-bottom: 80px; background: #fff; }
.hero--photo .hero__photo {
  position: absolute;
  top: 0;
  right: calc(-1 * clamp(0px, 1600px - 100vw, 250px));
  width: 1600px;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: right top;
}
.hero--photo .hero__text { margin-top: 18px; }
.hero--photo .hero__buttons { margin-top: 40px; }

/* ---------- Showcase (green band with gallery + highlights) ---------- */
.showcase {
  margin-top: 76px;
  padding: 76px 0 74px;
  background: #607c31;
  color: #fff;
  text-align: center;
}
.showcase__title { color: #fff; }
.showcase__text { max-width: 1240px; margin: 31px auto 0; }
.showcase__gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 70px;
}
.showcase__gallery img { width: 100%; aspect-ratio: 726 / 548; object-fit: cover; border-radius: 20px; }
.highlights {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  max-width: 1224px;
  min-height: 108px;
  margin: 44px auto 0;
  padding: 0 12px;
  border-radius: 10px;
  background: #fff;
  color: #000;
}
.highlights li {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding-inline: 14px;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.3;
  text-align: left; /* long labels wrap to two lines instead of overlapping */
}
.highlights img { flex: none; }
.highlights li + li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 58px;
  background: var(--orange);
  transform: translateY(-50%);
}
.highlights img { width: 52px; height: 52px; }
.showcase__cta { margin-top: 44px; }
/* ---------- Service detail page ---------- */
.hero--two-line { padding-top: 186px; }
.hero--two-line .hero__text { margin-top: 26px; }
/* Figma keeps the hero buttons at a fixed height even when the intro is shorter */
@media (min-width: 1360px) { .hero--two-line .hero__text { min-height: 234px; } }
/* service headings break with <br>, so they may run wider than the 645px home title */
.hero--two-line .hero__title { max-width: 820px; }

.point-list { display: grid; gap: 25px; max-width: 726px; margin-top: 47px; }
.point-list li {
  position: relative;
  padding: 8px 16px 8px 26px;
  background: var(--gradient);
  color: #fff;
  font-size: 17px;
  line-height: 22px;
}
.point-list li::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 17px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
}
.page-service .split-section--grey .btn-row { margin-top: 47px; }

.showcase__feature {
  display: grid;
  grid-template-columns: minmax(0, 717fr) minmax(0, 726fr);
  gap: 28px;
  margin-top: 70px;
  text-align: left;
}
.showcase__feature > img { width: 100%; height: 100%; min-height: 0; object-fit: cover; border-radius: 20px; aspect-ratio: 717 / 548; }
.showcase__card {
  padding: 51px 58px 40px 58px;
  border-radius: 20px;
  background: #fff;
  color: #000;
}
.showcase__card p { margin-top: 31px; line-height: 26px; }

.faq--service { padding-top: 74px; padding-bottom: 0; }
.faq--service .faq-item__inner p { letter-spacing: -0.01em; }
.faq--service .faq__list { gap: 29.5px; margin-top: 59px; }
.faq--service .faq-item.is-open + .faq-item { margin-top: 0; }
.faq--service .faq-item:not(.is-open) .faq-item__header { padding-block: 23px; }
.page-service .insurance { padding-top: 74px; }
/* ---------- FAQs page ---------- */
.faq--page { padding: 142px 0 102px; }
.faq-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 26px;
  margin-top: 70px;
}
.faq-tabs__tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 54px;
  padding: 0 12px;
  border: 1px solid var(--green);
  border-radius: 6px;
  background: #fff;
  font-weight: 600;
  font-size: 15px;
  color: #000;
  transition: background-color .2s ease, color .2s ease;
}
.faq-tabs__tab::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.faq-tabs__tab:hover { background: rgba(121, 156, 64, .08); }
.faq-tabs__tab.is-active { background: #607c31; border-color: #607c31; color: #fff; }
.faq-tabs__tab.is-active::before { background: #fff; }
.faq--page .faq__list { gap: 32px; margin-top: 71px; }
.faq--page .faq-item.is-open .faq-item__header { padding-bottom: 13px; }
.faq--page .faq-item.is-open + .faq-item { margin-top: 0; }
.faq--page .faq-item:not(.is-open) .faq-item__header { padding-block: 22px; }
.faq--page .faq-item__inner p { letter-spacing: -0.01em; }
@property --fade-l { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --fade-r { syntax: '<length>'; inherits: false; initial-value: 0px; }
.faq__list[hidden] { display: none; }
.faq__list.is-entering { animation: faq-panel-in .35s ease both; }
@keyframes faq-panel-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.faq-tabs__tab { transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .15s ease; }
.faq-tabs__tab:active { transform: scale(.97); }
.faq-tabs__tab::before { transition: background-color .25s ease; }

/* ---------- Contact page ---------- */
.contact { padding: 101px 0 80px; }
.contact__inner {
  display: grid;
  grid-template-columns: minmax(0, 811px) minmax(0, 561px);
  justify-content: space-between;
  gap: 48px;
  align-items: center;
}
.contact__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 64px;
  line-height: 1.04;
  letter-spacing: -0.04em;
  color: var(--green);
}
.contact-info { margin-top: 42px; }
.contact-info li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding-block: 19px 18px;
  border-top: 1px solid rgba(0, 0, 0, .25);
}
.contact-info li:first-child { padding-top: 0; border-top: 0; }
.contact-info li:last-child { padding-bottom: 0; }
.contact-info img { flex: none; width: 44px; height: 44px; }
.contact-info h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--green);
}
.contact-info p { overflow-wrap: anywhere; margin-top: 4px; font-weight: 400; font-size: 20px; line-height: 29px; }
.contact-info a:hover { color: var(--orange); }

.contact-card {
  padding: 32px 39px 28px;
  border: 1px solid #9bad7d;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
  scroll-margin-top: 24px;
}
.contact-card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 42px;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--green);
  text-align: center;
}
.contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 25px 18px; margin-top: 40px; }
.contact-form__field { display: grid; gap: 4px; }
.contact-form__field--full { grid-column: 1 / -1; }
.contact-form label { font-weight: 600; font-size: 13px; line-height: 1.2; color: #111; }
.contact-form label span { color: var(--orange); }
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #e6ebf1;
  border-radius: 6px;
  background: #fff;
  font: 400 13px/20px var(--font-body);
  color: #000;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.contact-form textarea { height: 120px; resize: vertical; }
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: #000; opacity: 1; font-family: "Inter", var(--font-body); font-size: 14px; }
.contact-form input:focus,
.contact-form textarea:focus { outline: none; border-color: #f29b65; box-shadow: 0 0 0 3px rgba(253, 171, 21, .15); }
.contact-form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-form__submit {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  margin-top: -2px;
  border-radius: 6px;
  background: var(--gradient);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  transition: box-shadow .2s ease, transform .2s ease;
}
.contact-form__submit:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(231, 73, 4, .3); }
.contact-form__note { grid-column: 1 / -1; margin-top: -2px; font-size: 12px; text-align: center; color: #111; }
.contact-form__note a { text-decoration: underline; }
.form-alert { margin-top: 20px; padding: 12px 14px; border-radius: 6px; background: #fdecea; color: #a12a12; font-size: 14px; }

/* ---------- Thank-you page ---------- */
.thanks { padding: 160px 0 120px; text-align: center; }
.thanks__icon { width: 88px; height: 88px; margin: 0 auto 28px; }
.thanks p { max-width: 640px; margin: 24px auto 0; }
.thanks .btn-row { justify-content: center; margin-top: 36px; }
/* 404 page: reuses the thank-you layout */
.not-found__code {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(96px, 16vw, 180px);
  line-height: 1;
  color: var(--orange);
}
.thanks .not-found__code { margin: 0 auto 8px; }
.not-found__heading { margin-top: 64px; font-family: var(--font-display); font-weight: 600; font-size: 28px; color: var(--green); }
.not-found__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 900px; margin: 24px auto 0; }
.not-found__links a { display: block; padding: 10px 18px; border: 1px solid #d9e2c9; border-radius: 999px; font-size: 15px; transition: color .2s, border-color .2s; }
.not-found__links a:hover { color: var(--orange); border-color: var(--orange); }
/* ---------- Real-content helpers (multi-paragraph copy, lists, extra sections) ---------- */
.hero__text p + p,
.showcase__text p + p,
.showcase__card p + p,
.insurance__content p + p { margin-top: 1em; }
.insurance__content p:first-of-type { margin-top: 25px; }
.split__text--after { margin-top: 32px; }
.point-list li strong { font-weight: 700; }
.showcase__feature--single { grid-template-columns: minmax(0, 860px); justify-content: center; }
.showcase__feature--single > img { aspect-ratio: 717 / 420; }

.text-section { padding: 80px 0; }
.text-section--grey { background: var(--grey-bg); }
.prose { max-width: 1060px; margin-top: 28px; }
.prose p + p, .prose p + ul, .prose ul + p { margin-top: 1em; }
.prose ul { display: grid; gap: 12px; }
.prose li { position: relative; padding-left: 24px; }
.prose li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--gradient); }
.prose strong { font-weight: 700; }
.prose .note { margin-top: 1.4em; padding: 14px 18px; border-left: 3px solid var(--orange); background: #fff7ef; font-size: 15px; }
.insurance__content .note { font-size: 13px; opacity: .9; }
.contact--after-hero { padding-top: 80px; }
.contact--after-hero .contact-info { margin-top: 0; }
.hero__text a { text-decoration: underline; color: var(--green); font-weight: 600; }
/* ---------- Footer ---------- */
.footer {
  padding: 48px 0 24px;
  background: #000;
  color: #fff;
  font-weight: 400;
}
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 170px 315px;
  gap: 68px;
  align-items: start;
}
.footer__about { position: relative; }
.footer__logo {
  position: relative;
  display: block;
  width: 170px;
  height: 151.018px;
  overflow: hidden;
}
.footer__about > p { max-width: 449px; margin-top: 16px; font-size: 14px; line-height: 1.6; }
.footer__about .btn-row { margin-top: 38px; gap: 14.8px; }
.footer__portrait {
  position: absolute;
  top: 7px;
  right: 49.5px; /* 117.5px clear of Quick Links, as in Figma */
  width: 175.449px;
  height: 175.449px;
  padding: 10.53px;
  border-radius: 50%;
  background: var(--gradient);
}
.footer__portrait img { width: 100%; height: 100%; border-radius: 50%; }

.footer__heading {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.5;
  text-transform: uppercase;
}
.footer__heading--manrope { font-weight: 500; line-height: 1.366; } /* renders as Poppins Medium in the Figma export */
.footer__links ul { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; font-size: 14px; }
.footer__links a,
.footer__contact a { transition: color .2s ease; }
.footer__links a:hover,
.footer__contact li:not(.footer__phone) a:hover { color: var(--amber); }

.footer__contact ul { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; font-size: 14px; }
.footer__contact li { display: flex; align-items: flex-start; gap: 8px; }
.footer__contact li > img { flex: none; width: 16px; height: 16px; margin-top: 2px; }
.footer__contact li:nth-child(2) a { line-height: 1.4; }
.footer__contact li.footer__phone,
.footer__contact li:nth-child(3) { align-items: center; }
.footer__contact li.footer__phone > img,
.footer__contact li:nth-child(3) > img { margin-top: 0; }
.footer__phone a {
  font-weight: 700;
  font-size: 18px;
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.footer__hours { display: flex; flex-direction: column; gap: 2px; }
.footer__hours strong { font-weight: 600; font-size: 14px; }
.footer__hours span { font-size: 13px; line-height: 1.4; }

.footer__trust {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 81px;
}
.trust-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 15px 16px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  background: rgba(255, 255, 255, .02);
}
.trust-card__icon {
  display: flex;
  flex: none;
  padding: 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .14);
}
.trust-card__icon img { width: 20px; height: 20px; }
.trust-card__text { display: flex; flex-direction: column; gap: 4px; font-size: 13px; line-height: 1.4; color: var(--muted); }
.trust-card__text strong { font-weight: 700; font-size: 14px; line-height: 1.5; color: #fff; }

.footer__legal { margin-top: 57.6px; }
.footer__legal-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  font-family: "Manrope", var(--font-body);
  font-size: 13px;
  line-height: 1.366;
  color: var(--muted);
}
.footer__legal-row ul { display: flex; flex-wrap: wrap; gap: 16px; }
.footer__legal-row a:hover { color: #fff; }
.footer__disclaimer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 8px 16px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .01);
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 11px;
  line-height: 1.4;
  color: #7e8e9f;
}
.footer__disclaimer img { flex: none; }

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Viewports wider than the 1600px frame: keep the composition anchored right
   and feather the photo into the hero background on the left. */
@media (min-width: 1601px) {
  .hero__bg {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%);
    mask-image: linear-gradient(90deg, transparent 0, #000 14%);
  }
}
/* Very wide screens: keep the hero picture near the content column (at most
   160px past its right edge) instead of pinned to the far screen edge, and
   feather both sides of it into the background. */
@media (min-width: 1921px) {
  .hero__stage,
  .hero--photo .hero__photo {
    right: calc((100vw - 1600px) / 2 - 160px);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 90%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 90%, transparent 100%);
  }
  .hero__bg { -webkit-mask-image: none; mask-image: none; }
}

@media (max-width: 1499px) {
  .nav { margin-left: 210px; }
  .nav__list { gap: 26px; }
  .cta-strip__text { margin-left: 40px; margin-right: 24px; }
}

@media (max-width: 1439px) {
  .footer__portrait { width: 140px; height: 140px; padding: 8.4px; }
}

/* ---- Laptop: text left, composition scaled into the lower-right ---- */
@media (max-width: 1359px) {
  .br-desktop { display: none; }

  .hero { min-height: 0; padding-bottom: 56px; }
  .hero__content { padding-right: 52%; }
  .hero__content > * { max-width: none; }
  .hero__title { font-size: 56px; }
  .hero__features { display: flex; flex-wrap: wrap; gap: 16px 28px; padding-left: 0; }
  .hero__features .feature { flex-direction: row; align-items: center; gap: 12px; }
  .hero__features .feature span { white-space: nowrap; }
  .hero__features .feature img { width: 44px; height: 44px; }
  .hero__art {
    inset: auto 0 0 auto;
    width: 52%;
    aspect-ratio: 1.14;
  }
  .hero__stage {
    top: 0;
    right: 0;
    width: auto;
    height: 100%;
    aspect-ratio: 2 / 1;
  }
  .hero__bg,
  .hero__swoosh {
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30%), linear-gradient(90deg, transparent 38%, #000 58%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(180deg, transparent 0, #000 30%), linear-gradient(90deg, transparent 38%, #000 58%);
    mask-composite: intersect;
  }



  .technique__inner { gap: 40px; }

  /* too narrow for heading + map side by side: map goes below */
  .location__inner { grid-template-columns: 1fr; gap: 40px; }
  .location__map { width: 100%; max-width: 602px; }
}

/* About hero, 1200–1359px: photo tucked into the lower right */
@media (max-width: 1359px) {
  .hero--photo { min-height: 0; padding-bottom: 80px; }
  .hero--photo .hero__art { inset: auto 0 0 auto; width: 50%; aspect-ratio: 1.25; }
  .hero--photo .hero__photo { position: static; width: 100%; height: 100%; object-fit: cover; object-position: right bottom; }
  .highlights li { font-size: 15px; gap: 10px; }
  .highlights img { width: 44px; height: 44px; }
}

/* Insurance, below 1200px: too narrow for copy beside the family, so stack it:
   copy on the green top, the photo as a band along the bottom. */
@media (max-width: 1199px) {
  .insurance__box {
    --art-w: max(100%, 760px);
    --art-h: calc(var(--art-w) / 2.968);
    min-height: 0;
    padding-bottom: calc(var(--art-h) + 28px);
  }
  .insurance__art { inset: auto 0 0 auto; width: var(--art-w); height: var(--art-h); }
  .insurance__art img { left: auto; right: 0; width: 100%; min-width: 0; transform: none; object-position: right bottom; }
  .insurance__box::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(0deg, rgba(121, 156, 64, 0) 0, rgba(121, 156, 64, 0) calc(var(--art-h) * .8), var(--green) calc(var(--art-h) + 4px));
  }
  .insurance__content { position: relative; z-index: 1; max-width: 760px; }
}
/* ---- Hamburger navigation ---- */
@media (max-width: 1279px) {
  .nav-toggle { display: block; }
  .nav {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 40;
    flex-direction: column;
    align-items: stretch;
    width: min(380px, 100%);
    height: 100vh;
    height: 100dvh;
    margin: 0;
    padding: 96px 28px 32px;
    background: #fff;
    box-shadow: -12px 0 40px rgba(0, 0, 0, .12);
    overflow-y: auto;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .3s ease, visibility 0s linear .3s;
  }
  .nav-open .nav { transform: none; visibility: visible; transition: transform .3s ease; }
  .nav__list { flex-direction: column; align-items: flex-start; gap: 22px; margin: 0; }
  .nav__link { font-size: 20px; }
  /* drawer: the service pages expand inline under "Services" */
  .nav__item { width: 100%; }
  .nav__row { justify-content: space-between; }
  .nav__sub-toggle { width: 40px; height: 40px; margin-right: -10px; }
  .nav__sub-toggle svg { width: 16px; height: 16px; }
  .nav__sub {
    position: static;
    display: none;
    width: auto;
    margin-top: 10px;
    padding: 4px 0 4px 14px;
    border-top: 0;
    border-left: 2px solid rgba(121, 156, 64, .35);
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .nav__item.is-open .nav__sub { display: grid; animation: nav-sub-in .25s ease both; }
  .nav__sub a { padding: 8px 10px; font-size: 16px; }
  @keyframes nav-sub-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
  .nav__actions { flex-direction: column; gap: 12px; margin: 36px 0 0; }
  .nav__actions .btn { width: 100%; }
  .nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 35;
    background: rgba(0, 0, 0, .4);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility 0s linear .3s;
  }
  .nav-open .nav-backdrop { opacity: 1; visibility: visible; transition: opacity .3s ease; }
  .nav-open { overflow: hidden; }
  .header { transition: z-index 0s linear .3s; }
  .nav-open .header { z-index: 60; transition: none; }

  .cta-strip { flex-wrap: wrap; justify-content: center; gap: 12px 24px; padding: 32px; text-align: center; }
  .cta-strip__text { flex-basis: 100%; order: 2; margin: 0; }
  .cta-strip__title { order: 1; flex-basis: 100%; }
  .cta-strip__buttons { order: 3; flex: 1 1 100%; margin: 12px 0 0; flex-wrap: wrap; justify-content: center; }
}

/* ---- Small laptop / large tablet: stacked hero ---- */
@media (max-width: 1199px) {
  /* Stacked heroes: the photo becomes a full-bleed background behind the copy,
     with a light overlay so the dark text stays readable. */
  .hero { padding-bottom: 64px; }
  .hero__content { padding-right: var(--gutter); }
  .hero__text { max-width: 760px; margin-top: 24px; }
  .hero__buttons { margin-top: 28px; }
  .hero__features { margin-top: 36px; gap: 32px; }
  .hero__art,
  .hero--photo .hero__art {
    position: absolute;
    inset: 0;
    width: auto;
    aspect-ratio: auto;
  }
  .hero__art::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .8) 60%, rgba(255, 255, 255, .7) 100%);
  }
  .hero__bg,
  .hero__swoosh {
    -webkit-mask-image: none;
    mask-image: none;
  }
  /* Home composition: centre the doctor in the viewport */
  .hero__stage { top: 0; left: 50%; right: auto; height: 100%; width: auto; aspect-ratio: 2 / 1; transform: translateX(-69%); }
  .hero--photo .hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 75% 20%; }

  .treat__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .showcase__feature { grid-template-columns: 1fr; }
  .showcase__feature > img { aspect-ratio: 717 / 548; height: auto; }
  .highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 8px; padding: 16px 12px; }
  .highlights li { padding: 12px 0; }
  .highlights li + li::before { display: none; }

  .split-section { padding: 64px 0; }
  .split, .split--media-left { grid-template-columns: 1fr; gap: 48px; }
  .split__content { padding-left: 0; }
  .split__text { max-width: none; margin-top: 28px; }
  .recovery__features { margin-top: 40px; column-gap: 24px; }
  .recovery__features .feature { font-size: 17px; }
  .split__content .btn-row { margin-top: 40px; }
  .split__photo { width: 100%; max-width: 602px; margin-inline: auto; }
}
/* ---- Tablet ---- */
@media (max-width: 1023px) {
  :root { --gutter: 40px; }

  .section-title { font-size: 42px; }

  .header__logo { width: 140px; height: 124px; }
  .hero { padding-top: 150px; }
  .hero__title { font-size: 52px; }

  .treat { padding: 72px 0 80px; }
  .treat__grid { margin-top: 48px; }



  .technique { padding-top: 72px; }
  .technique__inner { grid-template-columns: 1fr; gap: 40px; }
  .technique__media { margin: 0 auto; max-width: 723px; width: 100%; order: 2; } /* stacked: copy first, image after */

  .expect { padding: 80px 0 64px; }
  .expect__steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 32px; margin-top: 56px; }
  .step { width: auto; }
  .step p { margin-top: 28px; }

  .insurance { padding-top: 64px; }
  .insurance__box { padding-inline: 40px; }

  .testimonials { padding: 72px 0; }
  .testimonials__track { margin-top: 48px; scroll-snap-type: x proximity; }

  .faq__list { margin-top: 48px; gap: 20px; }
  .faq-item__header { font-size: 24px; }
  .faq-item__inner p { font-size: 18px; }

  .location { padding: 64px 0; }
  .location__inner { grid-template-columns: 1fr; gap: 40px; }
  .location__map { margin-inline: auto; }

  .footer__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .footer__about { grid-column: 1 / -1; }
  .footer__portrait { top: 0; right: 0; }
  /* Stacked trust points read as one panel with hairline dividers */
  .footer__trust {
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 48px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 12px;
    background: rgba(255, 255, 255, .02);
  }
  .trust-card { align-items: flex-start; gap: 14px; padding: 16px 18px; border: 0; border-radius: 0; background: none; }
  .trust-card + .trust-card { border-top: 1px solid rgba(255, 255, 255, .08); }
  .trust-card__icon { padding: 9px; }
  .trust-card__icon img { width: 18px; height: 18px; }
  .trust-card__text { gap: 2px; }
  .footer__legal { margin-top: 40px; }
}

/* ---- Mobile ---- */
@media (max-width: 767px) {
  :root { --gutter: 20px; }

  body { font-size: 16px; }
  .section-title { font-size: 34px; }
  .btn { height: 52px; font-size: 14.5px; padding: 0 14px; }
  .btn-row { gap: 12px; }

  .topbar { height: auto; padding: 2px 8px; }
  .topbar { padding-inline: 4px; }
  .topbar p { font-size: min(12px, 2.75vw); line-height: 18px; letter-spacing: -0.01em; white-space: nowrap; }

  .header__inner { height: 64px; }
  .header__logo { top: 8px; width: 104px; height: 92px; }

  .hero { padding-top: 56px; }
  .hero__title { font-size: 40px; }
  .hero__text { font-size: 15px; }
  .hero__buttons .btn { flex: 1 1 100%; }
  .hero__features { flex-direction: column; gap: 14px; margin-top: 32px; }
  .hero__features .feature { flex-direction: row; align-items: center; gap: 14px; }
  .hero__features .feature img { width: 44px; height: 44px; }
  .hero { padding-bottom: 48px; }

  .cta-strip-section { padding-top: 40px; }
  .cta-strip { padding: 28px 20px; }
  .cta-strip__title { font-size: 30px; }
  .cta-strip__buttons .btn { flex: 1 1 100%; }

  .treat { padding: 56px 0 64px; }
  .treat__intro { margin-top: 20px; }
  .treat__grid { grid-template-columns: 1fr; gap: 20px; margin-top: 36px; }
  .condition-card { padding: 20px; }
  .condition-card__media { height: auto; aspect-ratio: 403 / 255; }
  .condition-card__head h3 { font-size: 18px; }

  .split-section { padding: 56px 0; }
  .recovery__features { grid-template-columns: 1fr; gap: 14px; margin-top: 32px; }
  .recovery__features .feature span { white-space: normal; }
  .recovery__features .feature { flex-direction: row; align-items: center; gap: 14px; }
  .recovery__features .feature img { width: 44px; height: 44px; }
  .recovery__divider { display: none; }
  .split__content .btn-row { margin-top: 32px; }
  .split__content .btn { flex: 1 1 100%; }

  .technique { padding-top: 56px; }
  .technique__content .btn { width: 100%; }

  .expect { padding: 64px 0 56px; }
  .expect__steps { gap: 36px 16px; margin-top: 40px; }
  .step__icon { width: 140px; height: 140px; }
  .step__icon--ring::before { inset: 14.3px; }
  .step__num { top: 10px; left: 114px; width: 30px; height: 30px; font-size: 15px; }
  .step p { margin-top: 18px; font-size: 14px; }

  .insurance { padding-top: 48px; }
  .insurance__box { --art-w: 700px; padding-inline: 20px; padding-top: 32px; border-radius: 24px; }
  .insurance__title { font-size: 34px; }
  .insurance__content p { font-size: 15px; }
  .insurance__content .btn-row { margin-top: 28px; }
  .insurance__content .btn { flex: 1 1 100%; }

  .testimonials { padding: 56px 0; }
  .circle-btn { width: 46px; height: 46px; }
  .testimonials__track { margin-top: 32px; gap: 14px; }
  .testimonial { width: min(340px, 84vw); min-height: 0; padding: 40px 24px 28px; }
  .testimonial__google { top: 24px; right: 20px; width: 44px; height: 44px; }
  .testimonial blockquote { margin-top: 28px; font-size: 17px; }
  .testimonial__author strong { font-size: 18px; }
  .testimonial__author small { font-size: 13px; }

  .faq { padding-bottom: 56px; }
  .faq__list { margin-top: 32px; gap: 14px; }
  .faq-item__header { padding: 18px; gap: 16px; font-size: 20px; }
  .faq-item.is-open .faq-item__header { padding-bottom: 12px; }
  .faq-item__inner p { margin: 0 18px 18px; font-size: 16px; }

  .location { padding: 56px 0; }
  .location .section-title { white-space: normal; }
  .split-section--intro { padding-top: 48px; }
  .cta-strip-section--spaced { padding: 48px 0; }
  .expect--tight { padding-top: 56px; }
  .showcase { padding: 56px 0; }
  .showcase__text { margin-top: 20px; }
  .showcase__gallery { grid-template-columns: 1fr; gap: 14px; margin-top: 36px; }
  .showcase__feature { grid-template-columns: 1fr; gap: 14px; margin-top: 36px; }
  .showcase__card { padding: 28px 20px; }
  .point-list { gap: 12px; margin-top: 28px; }
  .point-list li { font-size: 15px; }
  .faq--service { padding-top: 56px; }
  .faq--service .faq__list { gap: 14px; margin-top: 32px; }
  .highlights { grid-template-columns: 1fr; justify-items: start; padding: 12px 20px; margin-top: 28px; }
  .highlights li { justify-content: flex-start; font-size: 16px; }
  .showcase__cta { margin-top: 28px; }
  .location__content .btn { flex: 1 1 100%; }
  .location__map { border-radius: 28px; }

  .footer { padding-top: 36px; }
  .footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .footer__portrait { width: 104px; height: 104px; padding: 6px; }
  .footer__about .btn { flex: 1 1 100%; }
  .trust-card { gap: 12px; padding: 14px; }
  .trust-card__icon { padding: 8px; border-radius: 7px; }
  .trust-card__text { font-size: 12.5px; }
  .trust-card__text strong { font-size: 13.5px; }
  .footer__legal { margin-top: 32px; }
  .footer__legal-row { flex-direction: column; align-items: flex-start; gap: 10px; }
  .footer__legal-row ul { gap: 8px 16px; }
  .footer__disclaimer { align-items: flex-start; font-size: 12px; line-height: 1.45; }
  .footer__disclaimer img { margin-top: 1px; }
}

@media (max-width: 400px) {
  .hero__features .feature span { white-space: normal; }
  .hero__title { font-size: 36px; }
  .section-title { font-size: 30px; }
  .expect__steps { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Tablet & mobile section rhythm: ~40px between sections, no double gaps.
   White sections use vertical margins (which collapse between neighbours);
   sections with their own background use padding instead.
   :not(#_) lifts these above page-specific class rules (e.g. .page-inner .insurance).
   ========================================================================== */
@media (max-width: 1023px) {
  main > section:not(#_) { margin-block: 40px; padding-block: 0; }
  main > .hero:not(#_) { margin-block: 0; padding-top: 40px; padding-bottom: 40px; }
  main > .split-section--grey:not(#_),
  main > .text-section--grey:not(#_),
  main > .location:not(#_),
  main > .showcase:not(#_) { margin-block: 0; padding-block: 40px; }
  main > .expect:not(#_) { padding-bottom: 40px; } /* keeps 40px above its divider line */

  .treat__grid,
  .testimonials__track,
  .faq__list,
  .faq--service .faq__list,
  .expect__steps,
  .showcase__gallery,
  .showcase__feature { margin-top: 32px; }
  .treat__intro,
  .showcase__text { margin-top: 16px; }
  .split, .split--media-left,
  .technique__inner { gap: 32px; }
  .footer { padding-top: 40px; }
  .footer__trust { margin-top: 40px; }
}
@media (max-width: 767px) {

  .treat__grid,
  .testimonials__track,
  .faq__list,
  .faq--service .faq__list,
  .expect__steps,
  .showcase__gallery,
  .showcase__feature { margin-top: 24px; }
  .split, .split--media-left,
  .technique__inner { gap: 28px; }
  .footer__legal { margin-top: 32px; }
}
/* Laptop (1200–1359px): the hero copy column is ~half width */
@media (max-width: 1359px) {
  .nav { margin-left: 186px; }
  .nav__list { gap: 22px; }
  .hero__title, .hero--two-line .hero__title { font-size: 46px; }
}

/* ==========================================================================
   Tablet & mobile alignment
   Centre: headings, copy and buttons in every section (hero included).
   Left:   bullet/point lists, condition cards, FAQ questions, and the whole footer.
   ========================================================================== */
@media (max-width: 1023px) {
  /* Centred content blocks */
  .hero__content,
  .split__content,
  .technique__content,
  .insurance__content,
  .location__content,
  .showcase__card,
  .testimonial { text-align: center; }
  .hero__text,
  .split__text,
  .location__content p { margin-inline: auto; }
  .hero__buttons,
  .split__content .btn-row,
  .insurance__content .btn-row,
  .location__content .btn-row { justify-content: center; }
  .technique__content .btn { display: flex; width: fit-content; margin-inline: auto; }
  .testimonial__author { justify-content: center; text-align: left; }
  .stars { justify-content: center; }

  /* Testimonials: title centred, arrows centred beneath */
  .testimonials__head { flex-direction: column; justify-content: center; gap: 20px; text-align: center; }
  .testimonials__nav { margin-right: 0; }

  /* Point lists stay left-aligned; the list block itself sits centred */
  .hero__features,
  .recovery__features,
  .highlights,
  .point-list { text-align: left; }
  .hero__features { justify-content: center; }
  .recovery__features { justify-content: center; margin-inline: auto; }
  .point-list { margin-inline: auto; }
  .highlights { justify-items: center; }

  /* Footer: everything left-aligned */
  .footer__legal-row { flex-direction: column; align-items: flex-start; gap: 10px; }

  /* Hero heading: never more than three lines */
  .hero__title,
  .hero--two-line .hero__title { font-size: 44px; max-width: none; }
}
@media (max-width: 767px) {
  .hero__features { align-items: flex-start; width: fit-content; margin-inline: auto; }
  .recovery__features { width: fit-content; }
  .highlights { justify-items: start; width: 100%; padding-inline: 24px; }
  .hero__title,
  .hero--two-line .hero__title { font-size: 32px; }
}
@media (max-width: 400px) {
  .hero__title,
  .hero--two-line .hero__title { font-size: 30px; }
}/* Tablet & mobile header: the logo sits fully inside the header (no overhang) */
@media (max-width: 1023px) {
  .header__inner { height: 116px; }
  .header__logo { top: 8px; width: 112px; height: 100px; }
}
@media (max-width: 767px) {
  .header__inner { height: 96px; }
  .header__logo { top: 8px; width: 90px; height: 80px; }
}
/* FAQs / Contact / Thank-you: laptop & below */
@media (max-width: 1359px) {
  .faq-tabs__tab { font-size: 13px; gap: 8px; }
  .contact__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); }
}
@media (max-width: 1023px) {
  main > .faq--page:not(#_) { padding-block: 40px; margin-block: 0; }
  .faq-tabs { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 28px; }
  .faq--page .faq__list { gap: 16px; margin-top: 28px; }
  .contact__inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .contact__title { font-size: 44px; }
  .contact-info { margin-top: 32px; }
  .contact-info li { padding-block: 18px; }
  .contact-info p { font-size: 17px; line-height: 26px; }
  .contact-card { width: 100%; max-width: 640px; margin-inline: auto; }
  .thanks { padding-block: 40px; }
}
@media (max-width: 767px) {
  /* one swipeable row of pills instead of a tall stack */
  .faq-tabs { display: flex; gap: 10px; margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 4px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .faq-tabs::-webkit-scrollbar { display: none; }
  .faq-tabs { cursor: grab; user-select: none; }
  .faq-tabs.is-dragging { cursor: grabbing; scroll-snap-type: none; }
  .faq-tabs.is-dragging .faq-tabs__tab { pointer-events: none; }
  /* fade the edge that has more tabs behind it */
  .faq-tabs { --fade-l: 0px; --fade-r: 0px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%); }
  .faq-tabs { transition: --fade-l .3s ease, --fade-r .3s ease; }
  .faq-tabs.has-more-left { --fade-l: 36px; }
  .faq-tabs.has-more-right { --fade-r: 36px; }
  .faq-tabs__tab { flex: none; height: 44px; padding-inline: 16px; white-space: nowrap; scroll-snap-align: start; }
  .contact__title { font-size: 32px; }
  .contact-info h2 { font-size: 21px; }
  .contact-info p { font-size: 15px; line-height: 23px; }
  .contact-info img { width: 40px; height: 40px; }
  .contact-card { padding: 28px 20px; }
  .contact-card__title { font-size: 32px; }
  .contact-form { grid-template-columns: 1fr; gap: 18px; margin-top: 24px; }
}
/* Stacked layouts (tablet & mobile): headings wrap onto more lines, so give them
   room to breathe (wide desktop keeps Figma's tight 1.04–1.15) */
@media (max-width: 1199px) {
  .section-title,
  .hero__title,
  .contact__title,
  .contact-card__title,
  .insurance__title,
  .cta-strip__title,
  .split .section-title,
  .technique .section-title { line-height: 1.2; }
  .faq-item__header { line-height: 1.3; }
  .contact-info h2 { line-height: 1.25; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}