/* Services page — intentionally scoped to protect the existing pages. */
.services-page { background: var(--paper); }

/* Hero */
.services-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(610px, 50vw, 735px);
  background: var(--soft-white);
}
.services-hero-inner { position: relative; min-height: inherit; }
.services-hero-copy {
  position: relative;
  z-index: 5;
  width: 45%;
  padding-top: clamp(70px, 7vw, 102px);
  padding-bottom: 95px;
}
.services-hero h1 {
  margin: 19px 0 23px;
  color: var(--deep-teal);
  font-size: clamp(54px, 5.15vw, 74px);
  line-height: .92;
  letter-spacing: -.045em;
}
.services-hero-copy > p:not(.eyebrow) {
  max-width: 535px;
  color: var(--teal);
  font-size: clamp(14px, 1.13vw, 17px);
  line-height: 1.48;
}
.services-hero-button { min-width: 195px; margin-top: 23px; }
.services-hero-media {
  position: absolute;
  inset: 0 0 0 43.5%;
  overflow: hidden;
  border-top-left-radius: 43% 32%;
  background: var(--warm-cream);
}
.services-hero-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 52% center; }
.services-hero-background { z-index: 0; }
.services-hero-cutout { z-index: 3; pointer-events: none; }
.services-hero-note {
  position: absolute;
  z-index: 4;
  top: 17%;
  left: 7.5%;
  color: var(--coral);
  font-size: clamp(24px, 2.15vw, 32px);
  transform: rotate(-8deg);
}
.services-hero-note .little-star { margin: 3px 0 0 55%; }
.services-hero::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: clamp(76px, 8vw, 116px);
  background: var(--mist-blue);
  --services-hero-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 120' preserveAspectRatio='none'%3E%3Cpath d='M0 98C145 88 270 69 403 39C545 7 654-3 748 25C847 54 912 99 1000 122V120H0Z' fill='black'/%3E%3C/svg%3E");
  -webkit-mask: var(--services-hero-wave) center / 100% 100% no-repeat;
  mask: var(--services-hero-wave) center / 100% 100% no-repeat;
  pointer-events: none;
}

/* Three service cards */
.services-cards { position: relative; background: var(--paper); padding: 31px 0 22px; }
.services-cards-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: min(94%, 1400px); margin-bottom: 27px; }
.services-cards-heading h2 { color: var(--deep-teal); font-size: clamp(32px, 3.3vw, 46px); line-height: 1.05; letter-spacing: -.035em; }
.services-cards-heading p { flex-shrink: 0; color: var(--teal); font-size: 14px; line-height: 1.45; }
.services-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; width: min(94%, 1400px); }
.services-card {
  min-height: clamp(565px, 45.5vw, 655px);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(29px, 3vw, 43px) clamp(20px, 3.1vw, 46px) 29px;
  border: 1px solid rgb(53 107 117 / .15);
  color: var(--teal);
  background: rgb(255 253 249 / .55);
  text-align: center;
  transition: border-color var(--ease);
}
.services-card-icon { width: 57px; height: 57px; margin-bottom: 21px; color: var(--teal); }
.services-leaf-icon { width: 61px; height: 61px; margin-bottom: 17px; }
.services-card h2 { margin-bottom: 15px; color: var(--deep-teal); font-size: clamp(29px, 2.75vw, 40px); line-height: 1; letter-spacing: -.035em; }
.services-card-description { min-height: 96px; font-size: clamp(14px, 1.18vw, 17px); line-height: 1.4; }
.services-card ul { width: 100%; margin: 26px 0 25px; padding: 0; text-align: left; list-style: none; }
.services-card li { position: relative; margin-bottom: 13px; padding-left: 18px; font-size: clamp(13px, 1.12vw, 16px); line-height: 1.35; }
.services-card li::before { content: "•"; position: absolute; left: 0; top: 0; color: var(--teal); }
.services-card-price { margin-top: auto; color: var(--teal); font-size: 12px; line-height: 1.4; }
.services-card-price span { display: block; }
.services-card-price strong { display: block; margin-top: 4px; color: var(--deep-teal); font-family: "Times New Roman", Times, serif; font-size: clamp(29px, 2.5vw, 35px); font-weight: 400; }
.services-learn { display: inline-flex; align-items: center; gap: 20px; min-height: 42px; margin-top: 12px; color: var(--deep-teal); font-size: clamp(13px, 1.08vw, 16px); font-weight: 600; }
.services-learn .arrow { color: var(--teal); }
.services-investment-note { width: min(94%, 1400px); margin-top: 19px; color: var(--teal); opacity: .8; text-align: center; font-size: 12px; line-height: 1.5; }
@media (hover: hover) { .services-card:hover { border-color: rgb(53 107 117 / .45); } }

/* Blue CTA */
.services-contact { position: relative; overflow: hidden; background: var(--mist-blue); }
.services-contact-inner {
  position: relative;
  display: grid;
  min-height: clamp(440px, 36vw, 520px);
  grid-template-columns: 34% 47% 1fr;
  gap: clamp(31px, 3.6vw, 52px);
  align-items: center;
  width: min(94%, 1400px);
}
.services-contact-media {
  width: 100%;
  max-width: 420px;
  aspect-ratio: .94;
  grid-column: 1;
  justify-self: start;
  overflow: hidden;
  border-radius: 31% 39% 37% 30% / 36% 40% 39% 35%;
  background: var(--warm-cream);
}
.services-contact-media img { width: 100%; height: 100%; object-fit: cover; object-position: 49% center; transition: transform 350ms ease; }
.services-contact-copy { align-self: center; padding-bottom: 2px; }
.services-contact-copy h2 { margin: 17px 0 18px; font-size: clamp(45px, 4.25vw, 62px); line-height: .96; letter-spacing: -.04em; }
.services-contact-copy > p:not(.eyebrow) { max-width: 550px; margin-bottom: 24px; font-size: clamp(14px, 1.12vw, 17px); line-height: 1.48; }
.services-contact-copy .button { min-width: 180px; }
.services-contact-note { align-self: start; margin-top: 88px; color: var(--coral); font-size: clamp(23px, 2.05vw, 30px); transform: rotate(-10deg); }
.services-contact-note .little-star { margin: 3px 0 0 58%; }
.services-contact::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 48px;
  background: var(--paper);
  --services-contact-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 50' preserveAspectRatio='none'%3E%3Cpath d='M0 38C191 25 331 31 507 38C689 46 831 13 1000 30V50H0Z' fill='black'/%3E%3C/svg%3E");
  -webkit-mask: var(--services-contact-wave) center / 100% 100% no-repeat;
  mask: var(--services-contact-wave) center / 100% 100% no-repeat;
  pointer-events: none;
}
@media (hover: hover) { .services-contact-media:hover img { transform: scale(1.015); } }

/* FAQ */
.services-faq { position: relative; background: var(--paper); padding: 52px 0 100px; }
.services-faq-inner { display: grid; grid-template-columns: 44% 1fr; gap: 0; width: min(84%, 1210px); }
.services-faq-heading { padding: 18px 55px 0 0; }
.services-faq-heading h2 { margin-top: 17px; font-size: clamp(44px, 4.15vw, 60px); line-height: 1; letter-spacing: -.04em; }
.services-faq-list { padding-left: clamp(35px, 4.2vw, 62px); border-left: 1px solid rgb(53 107 117 / .2); }
.services-faq-row { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid rgb(53 107 117 / .2); font-size: clamp(13px, 1.05vw, 15px); }
.services-faq-row span { color: var(--teal); font-size: 24px; font-weight: 300; }

@media (min-width: 768px) and (max-width: 1050px) {
  .services-hero { min-height: 565px; }
  .services-hero-copy { width: 48%; padding-top: 62px; }
  .services-hero-media { left: 44%; }
  .services-hero h1 { font-size: clamp(51px, 6.3vw, 66px); }
  .services-hero-copy > p:not(.eyebrow) { max-width: 420px; font-size: 14px; }
  .services-card-grid { gap: 12px; }
  .services-card { min-height: 565px; padding-inline: 17px; }
  .services-card h2 { font-size: 28px; }
  .services-card-description, .services-card li { font-size: 13px; }
  .services-contact-inner { grid-template-columns: 36% 1fr; gap: 35px; }
  .services-contact-note { display: none; }
  .services-contact-copy h2 { font-size: 49px; }
}

@media (max-width: 767px) {
  .services-hero { display: flex; min-height: 0; flex-direction: column; }
  .services-hero-inner { min-height: 0; }
  .services-hero-copy { width: 100%; padding: 43px 0 55px; }
  .services-hero h1 { font-size: clamp(51px, 14vw, 68px); }
  .services-hero-copy > p:not(.eyebrow) { max-width: 490px; font-size: 15px; }
  .services-desktop-break { display: none; }
  .services-hero-media { position: relative; inset: auto; width: calc(100% - 20px); min-height: 390px; align-self: flex-end; border-top-left-radius: 38% 31%; }
  .services-hero::after { width: 100%; height: 67px; }
  .services-hero-note { top: 14%; left: 7%; font-size: 25px; }

  .services-cards { padding: 28px 0; }
  .services-cards-heading { width: calc(100% - 40px); align-items: flex-start; flex-direction: column; gap: 13px; margin-bottom: 23px; }
  .services-cards-heading h2 { font-size: 32px; }
  .services-cards-heading p { font-size: 13px; }
  .services-card-grid { grid-template-columns: 1fr; gap: 16px; width: calc(100% - 40px); }
  .services-card { min-height: 525px; padding: 34px 28px 25px; }
  .services-card h2 { font-size: 34px; }
  .services-card-description { min-height: 0; font-size: 15px; }
  .services-card ul { max-width: 390px; margin-top: 27px; }
  .services-card li { font-size: 14px; }
  .services-investment-note { width: calc(100% - 40px); }

  .services-contact { padding: 42px 0 72px; }
  .services-contact-inner { display: flex; width: 100%; min-height: 0; flex-direction: column; gap: 36px; }
  .services-contact-media { width: calc(100% - 20px); align-self: flex-start; aspect-ratio: 1.08; border-radius: 0 35% 34% 0 / 0 27% 29% 0; }
  .services-contact-copy { width: calc(100% - 40px); }
  .services-contact-copy h2 { font-size: clamp(44px, 12vw, 58px); }
  .services-contact-copy > p:not(.eyebrow) { font-size: 15px; }
  .services-contact-note { position: absolute; right: 5%; bottom: 39px; margin: 0; font-size: 21px; opacity: .9; }
  .services-contact::after { height: 33px; }

  .services-faq { padding: 46px 0 86px; }
  .services-faq-inner { grid-template-columns: 1fr; width: calc(100% - 40px); }
  .services-faq-heading { padding: 0 0 31px; }
  .services-faq-heading h2 { font-size: 46px; }
  .services-faq-list { padding-left: 0; border-left: 0; border-top: 1px solid rgb(53 107 117 / .2); }
  .services-faq-row { min-height: 64px; font-size: 13px; }

}

/* Preserve the mockup's image/text composition even in narrow split-screen views. */
@media (max-width: 767px) {
  .services-contact { padding: 30px 0 58px; }
  .services-contact-inner {
    display: grid !important;
    width: min(94%, 1400px);
    min-height: 340px;
    grid-template-columns: minmax(0, 38%) minmax(0, 1fr) !important;
    gap: clamp(16px, 4vw, 30px);
    align-items: center;
  }
  .services-contact-media {
    width: 100% !important;
    max-width: clamp(120px, 38vw, 280px);
    aspect-ratio: .93;
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    justify-self: start;
    border-radius: 31% 39% 37% 30% / 36% 40% 39% 35%;
  }
  .services-contact-copy { width: auto; grid-column: 2; grid-row: 1; }
  .services-contact-copy .eyebrow { font-size: clamp(8px, 1.4vw, 10px); }
  .services-contact-copy h2 { margin-block: 12px 13px; font-size: clamp(30px, 6.3vw, 48px); }
  .services-contact-copy > p:not(.eyebrow) { margin-bottom: 17px; font-size: clamp(10px, 1.7vw, 13px); line-height: 1.4; }
  .services-contact-copy .button { min-width: clamp(125px, 25vw, 155px); min-height: 39px; padding-inline: 16px; font-size: 10px; }
  .services-contact-note { display: none; }
}

@media (max-width: 390px) {
  .services-cards-heading, .services-card-grid, .services-investment-note, .services-faq-inner { width: calc(100% - 32px); }
  .services-contact-note { display: none; }
}

@media (min-width: 1921px) {
  html:has(.services-page) { background: var(--paper); }
  .services-page { width: 1920px; margin-inline: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .services-contact-media img { transition: none; }
}