/* Reference-inspired lower-page layout. The hero remains owned by the existing styles. */
.services,
.results,
.quote {
  position: relative;
  overflow: hidden;
}

.services .container,
.results .container,
.quote .container {
  position: relative;
  z-index: 2;
}

.services {
  background: #fbfcfb;
  padding: 76px 0 86px;
}

.services .section-kicker {
  color: #0a6b91;
  letter-spacing: .2em;
  margin-bottom: 13px;
}

.services .section-title {
  margin: 0 auto 36px;
  max-width: 980px;
  font-size: clamp(2.2rem, 4vw, 3.55rem);
}

.service-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.service-card {
  position: relative;
  min-height: 372px;
  display: flex;
  flex-direction: column;
  border: 1px solid #e2ebee;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 12px 24px rgba(9, 35, 62, .12);
  overflow: hidden;
}

.service-card img {
  height: 178px;
  flex: 0 0 178px;
  object-fit: cover;
}

.service-card-body {
  flex: 1;
  padding: 52px 18px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.service-card h3 {
  margin: 0 0 8px;
  color: var(--navy);
  font-size: 1.08rem;
}

.service-card p {
  margin: 0 auto 16px;
  min-height: 44px;
}

.service-card .learn {
  margin-top: auto;
}

.service-icon {
  position: absolute;
  top: 150px;
  left: 50%;
  z-index: 2;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  transform: translateX(-50%);
  border: 4px solid #fff;
  border-radius: 50%;
  background: var(--navy);
  color: var(--aqua);
  font-size: 1.7rem;
  font-weight: 800;
  box-shadow: 0 7px 14px rgba(3, 25, 46, .24);
}

.results {
  padding: 82px 0 0;
  background: var(--navy);
  color: #fff;
}

.results-grid {
  grid-template-columns: .86fr 1.14fr;
  gap: 58px;
  align-items: center;
}

.results h2 {
  margin: 13px 0 18px;
  font-size: clamp(2.8rem, 5vw, 4.6rem);
}

.results-copy {
  max-width: 410px;
  color: #e3f0f3;
  font-size: 1.05rem;
}

.results-note {
  max-width: 410px;
  margin: -7px 0 20px;
  color: #9fc0c9;
  font-size: .72rem;
}

.before-after {
  height: 330px;
  border-radius: 14px;
  box-shadow: 0 14px 28px rgba(0, 0, 0, .22);
}

.results .benefits {
  position: relative;
  left: 50%;
  z-index: 3;
  width: 100vw;
  margin: 72px 0 0;
  padding: 0;
  transform: translateX(-50%);
  background: #f8fbfb;
  color: var(--navy);
  border-top: 1px solid #dbe8eb;
}

.results .benefit {
  min-height: 78px;
  justify-content: center;
  padding: 17px 20px;
  border-color: #cfdfe4;
  color: var(--navy);
}

.results .benefit-icon {
  color: #079dcc;
}

.quote {
  padding: 82px 0 86px;
  background: linear-gradient(135deg, #fff8e8 0%, #f3dfb9 52%, #fff9ec 100%);
}

.quote-grid {
  grid-template-columns: .88fr 1.12fr;
  gap: 72px;
  align-items: center;
}

.quote h2 {
  max-width: 540px;
  margin: 14px 0 18px;
  color: var(--navy);
  font-size: clamp(2.8rem, 5vw, 4.8rem);
}

.quote-copy {
  max-width: 410px;
  color: #1d3546;
}

.quote-form {
  border: 1px solid rgba(9, 35, 62, .12);
  border-radius: 16px;
  padding: 28px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 18px 36px rgba(84, 59, 24, .16);
}

.quote-form h3 {
  font-size: 1.45rem;
}

.quote-form .button {
  justify-content: center;
  width: 100%;
  margin-top: 16px;
  background: #079dcc;
  color: #fff;
}

.footer {
  position: relative;
  z-index: 2;
  padding: 30px 0 16px;
  background: #021729;
}

.footer-brand {
  width: min(300px, 32vw);
}

.footer-brand img {
  width: 100%;
  height: auto;
}

.footer .footer-brand img {
  width: 100%;
  height: auto;
}

/* Intentional edge framing; content remains above these pointer-free decorations. */
.services::before,
.results::before,
.quote::before,
.quote::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  background: url('/assets/palm-corner.png') center / 100% 100% no-repeat;
  opacity: .5;
}

.services::before {
  left: -145px;
  top: 80px;
  width: 220px;
  height: 330px;
  transform: scaleX(-1);
}

.results::before {
  left: 12px;
  bottom: -18px;
  width: 300px;
  height: 365px;
  opacity: .34;
}

.quote::before {
  left: -140px;
  bottom: -130px;
  width: 300px;
  height: 410px;
  transform: scaleX(-1);
  opacity: .48;
}

.quote::after {
  right: -190px;
  bottom: -125px;
  width: 280px;
  height: 380px;
  opacity: .3;
}

@media (max-width: 900px) {
  .services { padding: 64px 0 72px; }
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .results-grid,
  .quote-grid { grid-template-columns: 1fr; gap: 38px; }
  .results { padding-top: 68px; }
  .results .benefit { min-height: 72px; }
  .quote { padding: 70px 0 76px; }
  .footer-brand { width: min(360px, 62vw); }
}

@media (max-width: 520px) {
  .services { padding: 55px 0 62px; }
  .services .section-title { margin-bottom: 28px; }
  .service-grid { grid-template-columns: 1fr; gap: 15px; }
  .service-card { min-height: 330px; }
  .service-card img { height: 160px; flex-basis: 160px; }
  .service-icon { top: 132px; }
  .service-card-body { padding-top: 48px; }
  .results { padding-top: 58px; }
  .results .benefits { margin-top: 52px; }
  .results .benefit { justify-content: flex-start; min-height: 62px; padding: 13px 24px; }
  .quote { padding: 60px 0 66px; }
  .quote-form { padding: 21px 16px; }
  .services::before,
  .results::before,
  .quote::before,
  .quote::after { opacity: .16; }
  .services::before { left: -150px; top: 55px; width: 190px; height: 250px; }
  .results::before { left: 6px; width: 225px; height: 285px; bottom: -14px; }
  .quote::before { left: -155px; width: 220px; height: 300px; }
  .quote::after { right: -165px; width: 210px; height: 285px; }
}

/* The Results right-side palm is intentionally removed; the asset cannot be framed naturally there. */
.results::after {
  display: none !important;
  content: none !important;
}

/* Preserve the supplied BEFORE image exactly; its driveway is already dirty. */
.before-after .before {
  filter: none;
}

/* Keep the hero feature row clear of the wave divider. */
.hero-ribbon {
  bottom: -40px;
}