/* Client-supplied media refresh: image choices stay versioned and reversible. */

.hero {
  background-image: url("../client-media/20261008/home-banner-poster.webp");
}

.hero__overlay {
  background: linear-gradient(105deg, rgb(10 30 68 / 78%), rgb(23 56 110 / 56%)) !important;
}

body.inner-page .page-hero::before,
body.inner-page.page-services-index .page-hero--services::before,
body.page-about .page-hero--about::before,
body.page-team .page-hero--team::before,
body.inner-page.page-before-after .page-hero--before::before {
  background: linear-gradient(105deg, rgb(10 30 68 / 76%), rgb(23 56 110 / 54%)) !important;
}

body.legacy-page .legacy-hero__overlay,
body[data-section="services"].legacy-page .legacy-hero--service-blue .legacy-hero__overlay {
  background: linear-gradient(105deg, rgb(10 30 68 / 78%), rgb(23 56 110 / 55%)) !important;
}

body.inner-page.page-services-index .page-hero--services {
  background-image: url("../client-media/20261008/services-banner-K6I6wRT1-1920.webp");
}

body.page-about .page-hero--about {
  background-image: url("../client-media/20261008/about-copia-de-dsc05637-jpg-BDekRFmF-1920.webp");
}

body.page-team .page-hero--team {
  background-color: #172e59;
  background-image: url("../client-media/20261008/team-banner-blue-reference-1440.webp");
  background-position: center top;
  background-size: 100% auto;
  align-items: end;
  padding-bottom: 42px;
}

body.page-team .page-hero--team::before {
  background: linear-gradient(180deg, rgb(24 62 122 / 3%) 0%, rgb(17 42 85 / 12%) 56%, rgb(10 30 68 / 88%) 100%) !important;
}

body.inner-page.page-before-after .page-hero--before {
  background-image: url("../client-media/20261008/before-after-patients-histories-banner-WHlX7cgo-1920.webp");
}

body.inner-page.page-service-detail .cosmetic-service-hero {
  background-image: url("../client-media/20261008/services-cosmetic-restorations-banner-un1B1It_-1920.webp");
  background-size: cover;
  background-position: center;
}

.media-refresh-feature {
  max-width: 780px;
  margin: 20px 0 36px;
}

.media-refresh-feature img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
}

.media-refresh-pairs {
  display: grid;
  gap: 26px;
  margin-block: 36px 52px;
}

.media-refresh-pairs .legacy-before-after {
  margin: 0;
}

@media (max-width: 760px) {
  body.page-team .page-hero--team {
    min-height: 330px;
    padding: 150px 20px 32px;
    background-position: center top;
    background-size: 100% auto;
  }

  body.page-team .page-hero--team::before {
    background: linear-gradient(180deg, rgb(24 62 122 / 2%) 0%, rgb(24 62 122 / 7%) 42%, rgb(10 30 68 / 93%) 59%, rgb(10 30 68 / 96%) 100%) !important;
  }

  body.page-team .page-hero--team .page-title {
    font-size: clamp(48px, 12vw, 68px);
  }
}

/* The client layout keeps the title above the full-width team photograph. */
body[data-section="home"] .team {
  height: clamp(520px, 44.8vw, 680px);
  min-height: 0;
  padding: 0;
  background: #dad1c4;
}

body[data-section="home"] .team::after {
  background: rgb(87 128 205 / 72%);
}

body[data-section="home"] .team__photo {
  object-position: center 60%;
  filter: grayscale(1);
}

body[data-section="home"] .team__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(900px, 100%);
  min-height: 100%;
  padding: clamp(44px, 4.1vw, 62px) 24px clamp(48px, 4.3vw, 64px);
}

body[data-section="home"] .team h2 {
  margin: 0;
  font-size: clamp(40px, 4.1vw, 58px);
  line-height: 1;
}

body[data-section="home"] .team p {
  max-width: 700px;
  margin: auto 0 28px;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.35;
}

@media (max-width: 760px) {
  body[data-section="home"] .team {
    height: 570px;
    min-height: 570px;
  }

  body[data-section="home"] .team__content {
    min-height: 570px;
    padding: 38px 20px 42px;
  }

  body[data-section="home"] .team h2 {
    font-size: clamp(34px, 7vw, 48px);
  }

  body[data-section="home"] .team p {
    margin-bottom: 22px;
    font-size: 15px;
  }
}

@media (max-width: 560px) {
  body[data-section="home"] .team__photo {
    top: 112px;
    bottom: auto;
    height: auto;
    object-fit: contain;
  }
}