/* ==========================================================================
   Home page
   ========================================================================== */

/* --- Hero --- */
.hero {
  position: relative;
  height: 620px;
  background: var(--navy-800);
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
  opacity: 0.5;
}
.hero__media .placeholder-box {
  height: 100%;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10, 29, 44, 0.93) 0%, rgba(10, 29, 44, 0.78) 46%, rgba(10, 29, 44, 0.24) 100%);
}

.hero__content {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 26px;
  /* Full container width so the copy starts on the site gutter, in line with
     the header logo. The 840px cap previously combined with .container's auto
     margins, which centred the whole block instead of left-aligning it. */
  max-width: var(--max-content);
  text-align: left;
}
.hero__kicker,
.hero__title {
  max-width: 840px;
}

.hero__kicker {
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--blue-light);
}

.hero__title {
  /* Poppins, scoped to just this headline — the rest of the site keeps
     --font-display (Manrope). */
  font-family: 'Poppins', var(--font-display);
  font-size: 70px;
  line-height: 1.04;
  font-weight: 300;
  color: var(--white);
  /* All-caps display type reads tighter than mixed case; a touch of positive
     tracking (instead of the mixed-case -0.015em) keeps the letterforms from
     crowding at this size. */
  letter-spacing: 0.005em;
  text-transform: uppercase;
}

.hero__body {
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-light-blue-3);
  max-width: 520px;
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  gap: 12px;
  margin-top: 8px;
  flex-wrap: wrap;
}

/* --- Value props --- */
.valueprops {
  background: var(--cream);
  border-bottom: 1px solid var(--cream-border);
  padding: 34px 0;
}

.valueprops__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-left: -1px;
}

.valueprops__item {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 0 30px;
  border-left: 1px solid var(--cream-border-2);
}
.valueprops__item:first-child {
  padding-left: 0;
}

.valueprops__num {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--blue-accent);
}

.valueprops__title {
  font-size: 12.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-navy);
}

.valueprops__sub {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* --- Section heading helper --- */
.about-intro h2,
.services-overview h2,
.doctor-intro h2,
.reviews h2 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--text-navy);
}

/* --- About intro --- */
.about-intro {
  /* Top/bottom only — this section also carries the .container class, whose
     horizontal padding a "padding: Npx 0" shorthand here would silently
     zero out (same specificity, later in the cascade wins). */
  padding-top: 100px;
  padding-bottom: 100px;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 80px;
  align-items: center;
}
.about-intro__text {
  padding-left: 28px;
}

.about-intro__text {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.about-intro__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.about-intro__text h2 {
  font-size: 42px;
  line-height: 1.15;
}
.about-intro__text p {
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--text-body);
  text-wrap: pretty;
}

.about-intro__photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-content: start;
}
/* Each slot carries the photo's own 768:580 ratio, so nothing gets cropped. */
.about-intro__photo {
  aspect-ratio: var(--photo-ratio);
  overflow: hidden;
  background: var(--placeholder-bg);
}
.about-intro__photo--wide {
  grid-column: span 2;
}

/* --- Services overview --- */
.services-overview {
  background: var(--cream);
  padding: 96px 0;
}

.services-overview__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 44px;
  flex-wrap: wrap;
}
.services-overview__head > div {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.services-overview h2 {
  font-size: 42px;
  line-height: 1.12;
}
.services-overview__head p {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--text-body);
  max-width: 480px;
  text-wrap: pretty;
}

.services-overview__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.service-card {
  background: var(--white);
  border: 1px solid var(--cream-border);
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 194px;
  justify-content: space-between;
  cursor: pointer;
  text-decoration: none;
}
.service-card:hover {
  border-color: var(--blue-accent);
}
.service-card__num {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--blue-accent);
}
.service-card > div {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.service-card__title {
  font-family: var(--font-display);
  font-size: 23px;
  line-height: 1.2;
  color: var(--text-navy);
}
.service-card__sub {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-muted);
}

/* --- Doctor intro --- */
.doctor-intro {
  /* See .about-intro above — same "container" class collision. */
  padding-top: 100px;
  padding-bottom: 100px;
  display: grid;
  grid-template-columns: 0.6fr 1fr;
  gap: 70px;
  align-items: center;
}

.doctor-intro__photo {
  aspect-ratio: var(--portrait-ratio);
  overflow: hidden;
  background: var(--placeholder-bg);
}

.doctor-intro__text {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.doctor-intro__text h2 {
  font-size: 42px;
  line-height: 1.12;
}
.doctor-intro__text > p {
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--text-body);
  text-wrap: pretty;
}

.doctor-intro__stats {
  display: flex;
  gap: 44px;
  padding: 26px 0;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  margin-top: 6px;
  flex-wrap: wrap;
}
.doctor-intro__stat {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.doctor-intro__stat-value {
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 1;
  color: var(--blue-accent);
}
.doctor-intro__stat-label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted-2);
}

.about-intro__text > .btn,
.doctor-intro__text > .btn {
  align-self: flex-start;
}

/* --- Offer bar --- */
.offer-bar {
  background: var(--blue-accent);
  padding: 40px 0;
}
.offer-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.offer-bar__text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.offer-bar__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.offer-bar__title {
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1.15;
  color: var(--white);
}

/* --- Reviews --- */
.reviews {
  /* See .about-intro above — same "container" class collision. */
  padding-top: 96px;
  padding-bottom: 96px;
  display: flex;
  flex-direction: column;
  gap: 44px;
  align-items: center;
}
.reviews__head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  text-align: center;
  max-width: 640px;
}
.reviews h2 {
  font-size: 42px;
  line-height: 1.12;
}
.reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  width: 100%;
}
.review-card {
  background: var(--cream);
  border: 1px solid var(--cream-border);
  padding: 34px 30px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  justify-content: space-between;
  min-height: 230px;
}
.review-card__stars {
  font-size: 13px;
  letter-spacing: 0.22em;
  color: var(--blue-accent);
}
.review-card p {
  font-family: var(--font-sans);
  font-size: 19px;
  line-height: 1.5;
  color: var(--text-navy);
  font-style: italic;
  text-wrap: pretty;
  /* Reviews range from one line to a full paragraph; clamp so every card
     starts at the same height, and let quote-toggle open the long ones. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}
.review-card p.is-expanded {
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}
.review-card__name {
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted-2);
}
.reviews__actions {
  display: flex;
  gap: 12px;
  margin-top: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

/* --- Location --- */
.location {
  background: var(--cream);
  border-top: 1px solid var(--cream-border);
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.location__info {
  /* The map is meant to run full-bleed to the viewport edge, so this column
     isn't capped by --max-content like the rest of the page — but that
     leaves the info card hugging the far-left edge with a growing dead gap
     before the map on wide desktops. Scaling the left padding with viewport
     width nudges the card rightward instead, without a hard breakpoint jump. */
  padding: 80px 60px 80px clamp(var(--gutter), 7vw, 130px);
  max-width: 620px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.location__map {
  min-height: 520px;
}
.location__map iframe {
  width: 100%;
  height: 100%;
  min-height: 520px;
  border: 0;
  display: block;
}
.location__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.location__value a {
  color: var(--text-navy);
  text-decoration: none;
}
.location__value a:hover {
  color: var(--blue-accent);
}
.location__info h2 {
  font-family: var(--font-display);
  font-size: 38px;
  line-height: 1.12;
  font-weight: 400;
  color: var(--text-navy);
}
.location__rows {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.location__row {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--cream-border-2);
}
.location__label {
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted-2);
  min-height: 1px;
}
.location__value {
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-navy);
}
.location__info > .btn {
  align-self: flex-start;
  margin-top: 4px;
}

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

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

@media (max-width: 1100px) {
  .hero__title {
    font-size: 56px;
  }

  .about-intro,
  .doctor-intro {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .about-intro__text {
    padding-left: 0;
  }
  .doctor-intro__photo {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
  }

  .services-overview__grid {
    grid-template-columns: 1fr 1fr;
  }

  .reviews__grid {
    grid-template-columns: 1fr 1fr;
  }

  .location {
    grid-template-columns: 1fr;
  }
  .location__map,
  .location__map iframe {
    min-height: 360px;
  }
}

@media (max-width: 780px) {
  .hero {
    height: auto;
    min-height: 560px;
  }
  .hero__content {
    padding-top: 100px;
    padding-bottom: 60px;
  }
  .hero__title {
    font-size: 40px;
  }
  .hero__body {
    font-size: 15.5px;
  }

  .valueprops__grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px 0;
  }
  .valueprops__item:nth-child(2n+1) {
    padding-left: 0;
  }

  .about-intro,
  .services-overview,
  .doctor-intro,
  .reviews {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .about-intro__photos {
    grid-template-rows: 160px 160px;
  }

  .about-intro__text h2,
  .services-overview h2,
  .doctor-intro__text h2,
  .reviews h2 {
    font-size: 30px;
  }

  .services-overview__grid {
    grid-template-columns: 1fr;
  }

  .doctor-intro__photo {
    max-width: 320px;
  }
  .doctor-intro__stats {
    gap: 28px;
  }

  .offer-bar__inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .offer-bar .btn {
    width: 100%;
  }

  .reviews__grid {
    grid-template-columns: 1fr;
  }
  .reviews__actions {
    width: 100%;
    flex-direction: column;
  }
  .reviews__actions .btn {
    width: 100%;
  }

  .location__info {
    padding: 56px var(--gutter);
  }
  .location__actions {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 480px) {
  .hero__title {
    font-size: 32px;
  }
  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .hero__actions .btn {
    width: 100%;
  }

  .valueprops__grid {
    grid-template-columns: 1fr;
  }
  .valueprops__item {
    padding-left: 0;
    border-left: 0;
    padding-top: 16px;
    border-top: 1px solid var(--cream-border-2);
  }
  .valueprops__item:first-child {
    border-top: 0;
    padding-top: 0;
  }
}