/* =========================================================
   VitaCare — Homepage
   Design source: Figma (canvas, node 5258:2)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,600&family=Nunito+Sans:wght@400;700&display=swap');

:root {
  /* Color tokens */
  --color-navy: #141C7D;
  --color-navy-soft: rgba(20, 28, 125, 0.8);
  --color-teal: #30D4AB;
  --color-teal-soft: rgba(48, 212, 171, 0.15);
  --color-teal-alt: #50BBB8;
  --color-white: #FFFFFF;
  --color-gray: #787878;

  /* Type */
  --font-heading: 'Poppins', sans-serif;
  --font-body: 'Poppins', sans-serif;
  --font-footer: 'Nunito Sans', sans-serif;

  /* Layout */
  --container-max: 1680px;
  --container-pad: 88px;
  --radius-lg: 30px;
  --radius-md: 10px;
  --radius-pill: 999px;

  --shadow-card: 0 20px 45px rgba(20, 28, 125, 0.12);
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Belt-and-suspenders with body's overflow-x below: off-screen
     [data-animate] elements sit translated up to 56px off their box
     (see Scroll-reveal animations) before they've scrolled into view,
     which can otherwise read as phantom horizontal scroll/gap on mobile. */
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-navy);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  width: 100%;
}

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

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

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1, h2, h3, h4, p {
  margin: 0;
}

button {
  font: inherit;
  cursor: pointer;
}

:focus-visible {
  outline: 3px solid var(--color-teal);
  outline-offset: 3px;
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  height: 50px;
  padding-inline: 24px;
  border-radius: var(--radius-pill);
  border: none;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.125em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(20, 28, 125, 0.18);
}

.btn:active {
  transform: translateY(0);
}

.btn__arrow {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.btn:hover .btn__arrow {
  transform: translate(2px, -2px);
}

.btn--teal {
  background: var(--color-teal);
  color: var(--color-navy);
}

.btn--navy {
  background: var(--color-navy);
  color: var(--color-teal);
}

.btn--stack {
  height: auto;
  min-height: 50px;
  padding-block: 8px;
  line-height: 1.35;
  text-align: left;
}

.btn--stack .btn__line--muted {
  display: block;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  opacity: 0.85;
  font-size: 13px;
}

.btn__white {
  color: var(--color-white);
}

/* ---------- Header ---------- */
.site-header {
  position: relative;
  z-index: 20;
  padding-block: 32px 0;
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.site-header__logo img {
  width: 184px;
  height: auto;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: 32px;
}

.site-nav__list a {
  color: var(--color-teal);
  font-size: 16px;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.site-nav__list a:hover {
  color: var(--color-white);
}

.site-nav__list a[aria-current="page"] {
  color: var(--color-white);
  font-weight: 700;
  border-bottom-color: var(--color-white);
}

.site-header__right {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-shrink: 0;
}

.site-header__contact {
  display: flex;
  align-items: center;
  gap: 2px;
}

.phone-icon {
  width: 41px;
  height: 41px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.phone-icon img {
  width: 100%;
  height: 100%;
}

.phone-pill {
  display: inline-flex;
  align-items: center;
  height: 41px;
  padding-inline: 24px;
  border: 1px solid var(--color-white);
  border-radius: var(--radius-pill);
  color: var(--color-white);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.phone-pill:hover {
  background: var(--color-white);
  color: var(--color-navy);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 41px;
  height: 41px;
  border: 1px solid var(--color-white);
  border-radius: 50%;
  background: none;
  flex-shrink: 0;
}

.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--color-white);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  z-index: 0;
  background: var(--color-navy);
  color: var(--color-white);
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-navy-soft);
}

.hero .site-header {
  position: relative;
  z-index: 5;
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: 832px;
  margin-inline: auto;
  text-align: center;
  padding-top: 146px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero__title {
  font-size: 64px;
  line-height: 1;
  font-weight: 700;
}

.hero__subtitle {
  font-size: 32px;
  font-weight: 500;
  color: var(--color-teal);
  margin-top: 4px;
}

.hero__description {
  max-width: 508px;
  font-size: 20px;
  line-height: 1.4;
  font-weight: 400;
  margin-top: 16px;
}

.hero__cta {
  margin-top: 52px;
}

.hero__wave {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  display: block;
  margin-top: -25px;
}

/* ---------- Section basics ---------- */
.section {
  position: relative;
}

.section__eyebrow-row {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  margin-bottom: 32px;
}

.badge-icon {
  width: 76px;
  height: 76px;
  flex-shrink: 0;
}

/* ---------- Different Standard of Care ---------- */
.standard {
  background: var(--color-white);
  padding-top: 0;
  padding-bottom: 20px;
}

.standard .container {
  display: grid;
  grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
  gap: 60px;
  align-items: start;
}

.standard__heading-block {
  display: flex;
  flex-direction: column;
}

.standard__title {
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-teal);
  margin-top: 48px;
}

.standard__title em {
  color: var(--color-navy);
  font-style: italic;
}

.standard__lead {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
  margin-top: 16px;
}

.standard__copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
  font-size: 18px;
  line-height: 1.5;
  padding-top: 8px;
}

/* Figma keeps this column at a fixed 430px, right-flush against the
   container edge, rather than stretching to fill the second grid track —
   but that only applies once .standard .container is actually 2 columns
   (see the min-width: 981px collapse point used elsewhere for this grid). */
@media (min-width: 981px) {
  .standard__copy {
    max-width: 430px;
    justify-self: end;
  }
}

.standard__copy strong {
  font-weight: 600;
  font-style: italic;
}

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--color-navy);
  border-radius: var(--radius-lg);
  color: var(--color-white);
  text-align: center;
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  margin-block: 66px 96px;
}

.cta-band__title {
  font-size: 36px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.2;
}

.cta-band__title em {
  font-style: italic;
  color: var(--color-teal);
}

/* ---------- For Patients and Families ---------- */
.patients {
  padding-block: 0 96px;
}

.patients .container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
  gap: 60px;
  align-items: center;
}

.patients__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.patients__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.patients__title {
  font-size: 48px;
  line-height: 1;
  font-weight: 700;
  color: var(--color-teal);
  margin-bottom: 28px;
}

.patients__title em {
  color: var(--color-navy);
  font-style: italic;
}

.patients__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.patients__body h3 {
  font-size: 24px;
  font-weight: 600;
}

.patients__body p {
  font-size: 18px;
  line-height: 1.5;
}

/* ---------- Skilled Nursing Partners ---------- */
.partners {
  position: relative;
  z-index: 1;
  padding-block: 0;
}

.partners__frame {
  display: grid;
  grid-template-columns: 616fr 648fr;
  gap: 24px;
  height: 622px;
}

.partners__media {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 56px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.partners__media img.partners__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.partners__media::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
  z-index: 1;
}

.partners__heading {
  position: relative;
  z-index: 2;
  color: var(--color-white);
  font-size: 48px;
  font-weight: 700;
  line-height: 1.15;
}

.partners__heading em {
  font-style: italic;
  color: var(--color-teal);
}

.partners__panel {
  background: var(--color-teal-soft);
  padding: 56px;
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
  justify-content: center;
}

.partners__panel h3 {
  font-size: 24px;
  font-weight: 600;
}

.partners__panel p {
  font-size: 18px;
  font-weight: 300;
  line-height: 1.4;
  max-width: 400px;
}

.partners__closes {
  position: relative;
  background: var(--color-navy);
  color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 56px;
  margin-top: 64px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}

/* The straddle-the-boundary overlap only reads correctly at the desktop
   2-column height this offset was tuned for (~408px tall). Below 981px the
   card stacks to a single column and grows much taller with the extra copy,
   so translateY(50%) there would shove it up over/behind its own content
   above instead of gently overlapping the section below — the base rule's
   plain margin-top: 64px (no transform) is what mobile falls back to. */
@media (min-width: 981px) {
  .partners__closes {
    margin-top: -96px;
    transform: translateY(50%);
  }
}

.partners__closes-title {
  font-size: 36px;
  font-weight: 600;
  color: var(--color-teal);
  margin-bottom: 20px;
}

.partners__closes-title em {
  font-style: italic;
  color: var(--color-white);
}

.partners__closes p {
  font-size: 18px;
  font-weight: 300;
  line-height: 1.5;
  margin-bottom: 16px;
}

.partners__quote {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  max-width: 400px;
}

/* Figma sits this block flush against the card's right edge, not stretched
   across the whole grid column — matches the ~108px padding mirrored on
   both sides at the desktop 2-column width. Below 981px the card stacks to
   a single column, so the block reverts to filling it edge to edge. */
@media (min-width: 981px) {
  .partners__quote {
    margin-left: auto;
  }
}

.partners__quote-top {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.partners__quote-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
}

.partners__quote-mark {
  width: 40px;
  height: 40px;
}

.partners__quote hr {
  border: none;
  border-top: 1px solid var(--color-teal);
  width: 100%;
  margin: 0;
}

.partners__quote-top hr {
  flex: 1;
  width: auto;
}

.partners__quote p {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-teal);
}

.partners__quote p strong {
  color: var(--color-white);
  font-weight: 700;
}

/* ---------- Stays Present + Speak With Specialist ---------- */
.present {
  padding-block: 0 96px;
}

.present .container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 60px;
}

.present__copy h2 {
  font-size: 36px;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 20px;
}

.present__copy p {
  font-size: 18px;
  line-height: 1.5;
  margin-bottom: 16px;
}

.present__right {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: start;
}

.present__quote-wrap {
  grid-column: 1 / -1;
  position: relative;
}

.present__quote-photo {
  position: absolute;
  top: 0;
  left: 0;
  width: 137px;
  height: 137px;
  border-radius: var(--radius-lg);
  object-fit: cover;
  z-index: 1;
}

.present__quote-card {
  position: relative;
  margin-top: 103px;
  background: var(--color-teal);
  border-radius: 0 var(--radius-lg) var(--radius-lg) var(--radius-lg);
  padding: 66px 32px 32px;
}

.present__quote-card p {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-navy);
}

.present__specialist {
  grid-column: 1 / -1;
  justify-self: end;
}

/* ---------- Why VitaCare (numbered steps) ---------- */
.why-details {
  padding-block: 127px 189px;
}

.why__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 60px;
  align-items: center;
}

.why__heading {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  max-width: 350px;
  margin-bottom: 24px;
}

.why__steps {
  display: flex;
  flex-direction: column;
}

.why__step {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 32px;
  position: relative;
  padding-bottom: 32px;
}

.why__step:last-child {
  padding-bottom: 0;
}

.why__step-number {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--color-teal);
  color: var(--color-white);
  font-size: 36px;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.why__step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 38px;
  top: 76px;
  bottom: 0;
  width: 3px;
  background: var(--color-teal);
}

.why__step p {
  font-size: 18px;
  line-height: 1.4;
  padding-top: 22px;
}

.why__note-wrap {
  position: relative;
}

.why__note-photo {
  position: absolute;
  top: 0;
  left: 0;
  width: 137px;
  height: 137px;
  border-radius: var(--radius-lg);
  object-fit: cover;
  z-index: 1;
}

.why__note {
  position: relative;
  margin-top: 97px;
  background: var(--color-teal);
  border-radius: 0 var(--radius-lg) var(--radius-lg) var(--radius-lg);
  padding: 66px 40px 40px;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-navy);
}

/* ---------- Services ---------- */
.services {
  position: relative;
  padding-block: 288px 0;
  margin-top: 0;
}

.services__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.services__bg svg {
  display: block;
  width: 100%;
  height: 100%;
}

.services > .container {
  position: relative;
  z-index: 1;
}

.services__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  margin-bottom: 24px;
}

.services__eyebrow {
  font-size: 48px;
  font-weight: 600;
  color: var(--color-teal);
  line-height: 1;
  margin-bottom: 12px;
}

.services__header h3 {
  max-width: 402px;
  font-size: 24px;
  font-weight: 600;
  line-height: 28px;
}

.services__header > p {
  max-width: 400px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  align-self: center;
}

.services__browse-icon {
  display: block;
  width: 40px;
  height: 40px;
  margin-bottom: 40px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.services__browse-icon img {
  width: 100%;
  height: 100%;
  display: block;
}

.services__browse-icon:hover,
.services__browse-icon:focus-visible {
  transform: translateY(-2px);
}

.services__track {
  display: flex;
  gap: 24px;
  margin-inline: calc(50% - 50vw);
  padding-inline: var(--container-pad);
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.services__track::-webkit-scrollbar {
  display: none;
}

.service-card {
  scroll-snap-align: start;
  flex: 0 0 292px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  opacity: 0.55;
  transition: opacity 0.3s ease, box-shadow 0.3s ease;
}

.service-card__label {
  flex: 0 0 auto;
  height: 50px;
  border-radius: var(--radius-md);
  background: var(--color-teal-soft);
  color: var(--color-gray);
  font-size: 16px;
  line-height: 1.2;
  display: flex;
  align-items: center;
  padding-inline: 22px;
  text-align: left;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.service-card__body {
  border-radius: var(--radius-md);
  background: var(--color-white);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.service-card__media {
  border-radius: var(--radius-md);
  overflow: hidden;
  height: 240px;
}

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

.service-card__desc {
  display: none;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.2;
  color: var(--color-gray);
}

.service-card.is-active,
.service-card:hover,
.service-card:focus-within {
  opacity: 1;
  box-shadow: var(--shadow-card);
}

.service-card.is-active .service-card__label,
.service-card:hover .service-card__label,
.service-card:focus-within .service-card__label {
  background: var(--color-navy);
  color: var(--color-white);
  font-weight: 400;
  text-align: center;
  justify-content: center;
}

.service-card.is-active .service-card__desc,
.service-card:hover .service-card__desc,
.service-card:focus-within .service-card__desc {
  display: block;
}

.services__footer {
  text-align: center;
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.services__footer .btn--stack {
  text-align: center;
}

.services__footer p {
  font-size: 24px;
  font-weight: 600;
  max-width: 940px;
  line-height: 1.35;
}

/* ---------- Why band divider ---------- */
/* Figma sets the band's top edge 64px below the CTA button. The 50% shift is
   what lets the band straddle the section edge, so it already accounts for
   half the band's height (77px here) — the flow margin only makes up the rest. */
.why-band-wrap {
  margin-top: calc(64px - 77px);
  transform: translateY(50%);
}

.why-band {
  background: var(--color-navy);
  border-radius: var(--radius-lg);
  color: var(--color-white);
  text-align: center;
  padding: 32px 40px;
  max-width: 1264px;
  margin-inline: auto;
}

.why-band__title {
  font-size: 36px;
  font-weight: 700;
  color: var(--color-teal);
  margin-bottom: 8px;
}

.why-band__subtitle {
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
}

/* ---------- Redefine / Feels section ---------- */
.redefine {
  background: var(--color-teal-soft);
  padding-block: 108px;
}

.redefine__title {
  text-align: center;
  font-size: 48px;
  font-weight: 600;
  line-height: 1;
  color: var(--color-teal);
  margin: 0 auto 48px;
}

/* At 700px, "Let's Redefine What Ongoing" (688px wide at this size) still
   fits on line one, pushing the break to before "Care" instead of before
   "Ongoing" as in Figma. Narrowing to 648px (Figma's box width) forces the
   break at the right word without affecting mobile's smaller 28px size. */
@media (min-width: 981px) {
  .redefine__title {
    max-width: 648px;
  }
}

.redefine__title em {
  font-style: italic;
  color: var(--color-navy);
}

.redefine__body {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 184px)) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
  justify-content: center;
}

.feature-card {
  position: relative;
  width: 184px;
  height: 196px;
}

.feature-card__shape {
  position: absolute;
  inset: 0;
  width: 184px;
  height: 196px;
}

.feature-card__badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--color-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.feature-card__badge img {
  width: 36px;
  height: 36px;
}

.feature-card__plain {
  position: absolute;
  inset: 35px 0 0;
  background: var(--color-white);
  border-radius: var(--radius-lg);
}

.feature-card__label {
  position: absolute;
  top: 87px;
  left: 0;
  right: 0;
  z-index: 2;
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  padding-inline: 20px;
}

.redefine__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.redefine__copy p {
  font-size: 18px;
  line-height: 1.5;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--color-navy);
  color: var(--color-white);
  padding-top: 80px;
}

.site-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 217px) minmax(0, 431px) minmax(0, 250px) minmax(0, auto);
  gap: 40px;
  justify-content: space-between;
  padding-bottom: 60px;
}

.site-footer__brand img {
  width: 217px;
  height: auto;
}

.newsletter__label {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--color-teal);
  margin-bottom: 20px;
  max-width: 340px;
}

.newsletter__form {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--color-teal);
  border-radius: var(--radius-pill);
  padding: 8px 8px 8px 24px;
  max-width: 431px;
}

.newsletter__form label {
  font-size: 12px;
  color: var(--color-white);
  flex-shrink: 0;
}

.newsletter__form input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 12px;
  padding-block: 8px;
  min-width: 0;
}

.newsletter__form input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.newsletter__form input:focus {
  outline: none;
}

.newsletter__form button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color 0.2s ease;
}

.newsletter__form button:hover {
  background: rgba(48, 212, 171, 0.2);
}

.newsletter__form button img {
  width: 14px;
  height: 12px;
}


.footer-col h4 {
  font-family: var(--font-footer);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-teal-alt);
  margin-bottom: 8px;
}

.footer-col p,
.footer-col li {
  font-family: var(--font-footer);
  font-size: 16px;
  line-height: 1.4;
}

.footer-col + .footer-col {
  margin-top: 0;
}

.footer-col--address > * + * {
  margin-top: 16px;
}

.footer-col--links li + li {
  margin-top: 12px;
}

.footer-col--links a {
  transition: color 0.2s ease;
}

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

.site-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-block: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.site-footer__copyright {
  font-family: var(--font-footer);
  font-size: 12px;
}

.site-footer__social {
  display: flex;
  gap: 16px;
}

.site-footer__social a {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: var(--color-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.site-footer__social a:hover {
  transform: translateY(-3px);
  background: var(--color-white);
}

.site-footer__social img {
  width: 100%;
  height: 100%;
}

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

/* On very large screens, keep the service cards row inside the
   container (previous design) instead of bleeding full-width. */
@media (min-width: 1800px) {
  .services__track {
    margin-inline: 0;
    padding-inline: 0;
  }
}

@media (max-width: 1200px) {
  :root {
    --container-pad: 56px;
  }

  .standard .container,
  .patients .container,
  .present .container,
  .why__body,
  .site-footer__top {
    gap: 40px;
  }

  .redefine__body {
    grid-template-columns: repeat(3, minmax(0, 160px)) minmax(0, 1fr);
  }
}

@media (max-width: 980px) {
  :root {
    --container-pad: 32px;
  }

  .hero__title {
    font-size: 48px;
  }

  .hero__subtitle {
    font-size: 26px;
  }

  .standard .container,
  .patients .container,
  .present .container,
  .why__body {
    grid-template-columns: minmax(0, 1fr);
  }

  .patients {
    padding-top: 0;
  }

  .patients .container {
    text-align: left;
  }

  .patients__media {
    order: -1;
    aspect-ratio: 4 / 3;
  }

  .partners__frame {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
  }

  .partners__media {
    min-height: 360px;
    padding: 40px;
  }

  .partners__closes {
    grid-template-columns: minmax(0, 1fr);
    border-radius: var(--radius-lg);
    margin-bottom: 32px;
  }

  .present__right {
    grid-template-columns: minmax(0, 1fr);
  }

  .present__specialist {
    justify-self: start;
  }

  .services__header {
    grid-template-columns: minmax(0, 1fr);
  }

  /* The decorative curve is an SVG stretched edge-to-edge with
     preserveAspectRatio="none" — fine at the desktop ratio it was drawn
     for, but on a much taller, narrower mobile layout that same stretch
     distorts it into an oversized, oddly-shaped blob. A flat fill in the
     same tint sidesteps the distortion entirely and needs no curve. */
  .services__bg {
    display: none;
  }

  .services {
    background: var(--color-teal-soft);
    padding-top: 64px;
  }

  .redefine__body {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .redefine__copy {
    grid-column: 1 / -1;
    text-align: center;
    align-items: center;
  }

  .redefine__copy .btn {
    align-self: center;
  }

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

/* The nav collapses to a hamburger well above the point where the full-width
   nav links, phone pill, and toggle would otherwise wrap/collide (this needs
   ~960px at desktop type sizes — see .site-header__right gap + nav width). */
@media (max-width: 1024px) {
  .nav-toggle {
    display: flex;
  }

  .site-header__contact .phone-pill {
    display: none;
  }

  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 8px var(--container-pad) 24px;
    background: var(--color-navy);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.3s ease;
  }

  .site-nav.is-open {
    max-height: 320px;
    opacity: 1;
  }

  .site-nav__list {
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding-top: 16px;
  }
}

@media (max-width: 720px) {
  :root {
    --container-pad: 24px;
  }

  .hero__content {
    padding-top: 48px;
  }

  .hero__title {
    font-size: 36px;
  }

  .hero__subtitle {
    font-size: 20px;
  }

  .hero__description {
    font-size: 16px;
  }

  .standard__title,
  .patients__title,
  .partners__heading,
  .partners__closes-title,
  .why__eyebrow,
  .why-band__title,
  .redefine__title,
  .cta-band__title,
  .present__copy h2 {
    font-size: 28px;
  }

  .cta-band {
    padding: 32px 24px;
    margin-block: 40px 56px;
  }

  .patients {
    padding-bottom: 56px;
  }

  .present {
    padding-bottom: 56px;
  }

  .why-details {
    padding-block: 56px 64px;
  }

  .redefine {
    padding-block: 56px;
  }

  .partners__closes {
    padding: 32px;
  }

  .partners__quote p {
    margin-top: 12px;
  }

  .partners__panel {
    padding: 32px;
  }

  .why__heading {
    font-size: 20px;
    margin-top: 96px;
  }

  .why__step {
    grid-template-columns: 56px 1fr;
    gap: 20px;
  }

  .why__step-number {
    width: 56px;
    height: 56px;
    font-size: 24px;
  }

  .why__step:not(:last-child)::before {
    left: 28px;
    top: 56px;
  }

  .redefine__body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-items: center;
  }

  .site-footer__top {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .site-footer__bottom {
    flex-direction: column;
    text-align: center;
  }

  .btn {
    padding-inline: 20px;
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .redefine__body {
    grid-template-columns: minmax(0, 1fr);
  }

  .site-header .container {
    gap: 16px;
  }

  .site-header__logo img {
    width: 140px;
  }
}

/* ---------- Scroll-reveal animations ---------- */
/* Each [data-animate] element starts hidden/offset and settles into place the
   first time it enters the viewport. The variant (fade-up, fade-left, zoom-in,
   flip-up, rise, ...) controls the direction/style; [data-animate-group]
   staggers its own [data-animate] children via a JS-assigned --reveal-delay. */
[data-animate] {
  transition: opacity 0.7s cubic-bezier(0.16, 0.84, 0.44, 1),
              transform 0.7s cubic-bezier(0.16, 0.84, 0.44, 1);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}

[data-animate="fade-up"]    { opacity: 0; transform: translateY(44px); }
[data-animate="fade-down"]  { opacity: 0; transform: translateY(-32px); }
[data-animate="fade-left"]  { opacity: 0; transform: translateX(-56px); }
[data-animate="fade-right"] { opacity: 0; transform: translateX(56px); }
[data-animate="zoom-in"]    { opacity: 0; transform: scale(0.82); }
[data-animate="flip-up"]    { opacity: 0; transform: perspective(900px) rotateX(18deg) translateY(24px); transform-origin: top center; }
[data-animate="rise"]       { transform: translateY(36px); } /* transform only — preserves the element's own resting opacity (e.g. service cards) */

[data-animate].in-view {
  transform: none;
}

[data-animate="fade-up"].in-view,
[data-animate="fade-down"].in-view,
[data-animate="fade-left"].in-view,
[data-animate="fade-right"].in-view,
[data-animate="zoom-in"].in-view,
[data-animate="flip-up"].in-view {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  [data-animate] {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}