/* =========================================================
   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 {
  flex: 1 1 0;
}

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

/* Equal-weight flex on the logo and the right cluster keeps the nav optically
   centred in the header no matter how wide either side gets. */
.site-nav {
  display: flex;
  justify-content: center;
}

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

/* Contact ships twice: as the header CTA on desktop, and inside the hamburger
   panel on mobile. Exactly one of the two is visible at any width. */
.site-nav__item--cta {
  display: none;
}

.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;
  justify-content: flex-end;
  gap: 24px;
  flex: 1 1 0;
}

/* Contact lives as an outlined CTA in the right cluster instead of a nav link. */
.site-header__cta {
  height: 42px;
  padding-inline: 28px;
  font-size: 14px;
  flex-shrink: 0;
  background: transparent;
  color: var(--color-white);
  border: 1px solid var(--color-white);
  transition: background 0.2s ease, color 0.2s ease, transform 0.25s ease,
    box-shadow 0.25s ease;
}

.site-header__cta:hover {
  background: var(--color-white);
  color: var(--color-navy);
}

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

/* Honeypot — off-screen rather than display:none so bots still fill it. */
.newsletter__honey {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.newsletter__form.is-invalid {
  border-color: #FF9C97;
}

.newsletter__form button[disabled] {
  opacity: 0.5;
  cursor: progress;
}

/* Status line only takes up space once JS has something to report. */
.newsletter__status {
  font-size: 13px;
  line-height: 1.4;
  margin-top: 12px;
  max-width: 431px;
  display: none;
}

.newsletter__status.is-visible {
  display: block;
}

.newsletter__status.is-success {
  color: var(--color-teal);
}

.newsletter__status.is-error {
  color: #FF9C97;
}


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

  /* The header CTA moves into the panel with the rest of the links. */
  .site-header__cta {
    display: none;
  }

  .site-nav__item--cta {
    display: block;
  }

  /* Full-screen overlay panel. The logo and toggle stay above it so the
     hamburger can close what it opened. */
  .site-header__logo,
  .nav-toggle {
    position: relative;
    z-index: 2;
  }

  body.nav-is-open {
    overflow: hidden;
  }

  .site-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    inset: 0;
    z-index: 1;
    padding: 120px var(--container-pad) 56px;
    background: linear-gradient(160deg, #1B248F 0%, #0C1252 100%);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease,
      visibility 0s linear 0.3s;
  }

  .site-nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s;
  }

  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    width: min(420px, 100%);
    margin-inline: auto;
    padding: 0;
  }

  .site-nav__list li:not(.site-nav__item--cta) a {
    display: block;
    padding: 18px 20px;
    border-radius: 12px;
    border-bottom: none;
    font-size: 22px;
    text-align: center;
    color: var(--color-white);
  }

  .site-nav__list li:not(.site-nav__item--cta) a:hover,
  .site-nav__list li:not(.site-nav__item--cta) a:focus-visible {
    background: rgba(255, 255, 255, 0.08);
  }

  .site-nav__list li:not(.site-nav__item--cta) a[aria-current="page"] {
    background: var(--color-teal-soft);
    color: var(--color-teal);
    border-bottom-color: transparent;
  }

  /* Hairline between the links, and a heavier one above the CTA. */
  .site-nav__list li + li:not(.site-nav__item--cta) {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .site-nav__item--cta {
    margin-top: 28px;
    padding-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }

  .site-nav__list .site-nav__cta {
    display: flex;
    width: 100%;
    height: 54px;
    padding: 0 24px;
    font-size: 15px;
    background: var(--color-teal);
    color: var(--color-navy);
    border: none;
    border-radius: var(--radius-pill);
  }

  /* Links ease in one after another once the overlay is up. */
  .site-nav.is-open .site-nav__list > li {
    animation: nav-item-in 0.35s ease both;
  }

  .site-nav.is-open .site-nav__list > li:nth-child(2) {
    animation-delay: 0.06s;
  }

  .site-nav.is-open .site-nav__list > li:nth-child(3) {
    animation-delay: 0.12s;
  }

  .site-nav.is-open .site-nav__list > li:nth-child(4) {
    animation-delay: 0.18s;
  }

  @keyframes nav-item-in {
    from {
      opacity: 0;
      transform: translateY(12px);
    }
  }
}

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

/* =========================================================
   Contact page (contact.html)
   Base rules plus the page's own responsive overrides — kept
   together here since none of these selectors appear on the
   homepage.
   ========================================================= */

/* ---------- Compact hero variant ---------- */
/* Same navy-over-photo treatment as the homepage hero, sized for a
   page whose real content is the form below it rather than the banner. */
.hero--compact .hero__content {
  padding-top: 96px;
  padding-bottom: 96px;
  max-width: 760px;
}

.hero__eyebrow {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.125em;
  text-transform: uppercase;
  color: var(--color-teal);
  margin-bottom: 16px;
}

.hero--compact .hero__title {
  font-size: 56px;
}

.hero--compact .hero__description {
  max-width: 600px;
  margin-top: 20px;
}

/* ---------- Contact section ---------- */
.contact {
  padding-block: 40px 96px;
}

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

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

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

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

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

.contact__copy {
  font-size: 18px;
  line-height: 1.5;
  margin-top: 24px;
}

.contact__details {
  margin-top: 40px;
  border-top: 1px solid rgba(20, 28, 125, 0.12);
  padding-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.contact__details h4 {
  font-family: var(--font-footer);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-teal-alt);
  margin-bottom: 6px;
}

.contact__details p {
  font-size: 18px;
  line-height: 1.4;
}

.contact__details a {
  transition: color 0.2s ease;
}

.contact__details a:hover {
  color: var(--color-teal);
}

/* ---------- Contact form card ---------- */
.contact-form {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 48px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Honeypot — off-screen rather than display:none so bots still fill it. */
.contact-form__honey {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact-form__field label {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-navy);
}

.contact-form__optional {
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--color-gray);
}

.contact-form__field input,
.contact-form__field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-navy);
  background: var(--color-white);
  border: 1px solid rgba(20, 28, 125, 0.18);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.contact-form__field textarea {
  resize: vertical;
  min-height: 150px;
}

.contact-form__field input::placeholder,
.contact-form__field textarea::placeholder {
  color: var(--color-gray);
}

.contact-form__field input:focus,
.contact-form__field textarea:focus {
  outline: none;
  border-color: var(--color-teal);
  box-shadow: 0 0 0 3px var(--color-teal-soft);
}

.contact-form__field.is-invalid input,
.contact-form__field.is-invalid textarea {
  border-color: #C2413C;
}

.contact-form__error {
  font-size: 14px;
  line-height: 1.4;
  color: #C2413C;
  display: none;
}

.contact-form__field.is-invalid .contact-form__error {
  display: block;
}

.contact-form__submit {
  align-self: flex-start;
  margin-top: 8px;
}

.contact-form__submit[disabled] {
  opacity: 0.6;
  cursor: progress;
  transform: none;
  box-shadow: none;
}

/* Status line only takes up space once JS has something to report. */
.contact-form__status {
  font-size: 16px;
  line-height: 1.5;
  font-weight: 500;
  display: none;
}

.contact-form__status.is-visible {
  display: block;
}

.contact-form__status.is-success {
  color: #1B8A6B;
}

.contact-form__status.is-error {
  color: #C2413C;
}

/* ---------- Contact page responsive ---------- */
@media (max-width: 1200px) {
  .contact-form {
    padding: 40px;
  }
}

@media (max-width: 980px) {
  .contact .container {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .contact__title {
    font-size: 40px;
  }
}

@media (max-width: 720px) {
  .hero--compact .hero__content {
    padding-top: 48px;
    padding-bottom: 64px;
  }

  .hero--compact .hero__title {
    font-size: 36px;
  }

  .contact {
    padding-block: 24px 64px;
  }

  .contact__title {
    font-size: 32px;
  }

  .contact__lead {
    font-size: 20px;
  }

  .contact-form {
    padding: 28px 24px;
    border-radius: var(--radius-md);
  }

  .contact-form__submit {
    align-self: stretch;
  }
}

/* ---------- 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;
  }
}