:root {
  --ink: #17201c;
  --muted: #62706a;
  --line: #d8e0dc;
  --paper: #f7f8f4;
  --white: #ffffff;
  --green: #2e8f5b;
  --green-dark: #17613c;
  --charcoal: #101816;
  --steel: #dfe7eb;
  --amber: #b57932;
  --radius: 8px;
  --max: 1180px;
}


/* Final shared navigation and footer overrides */
.site-nav a {
  position: relative;
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10px;
  height: 2px;
  border-radius: 999px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 180ms ease;
}

.site-nav a:hover,
.site-nav a.active {
  color: var(--green-dark);
  opacity: 1;
}

.site-nav a:hover::after,
.site-nav a.active::after {
  transform: scaleX(1);
}

.site-footer {
  display: block;
  grid-template-columns: none;
  padding: clamp(54px, 6vw, 86px) clamp(20px, 5vw, 64px) 30px;
  color: rgba(255, 255, 255, 0.78);
  background:
    radial-gradient(circle at 80% 10%, rgba(83, 172, 87, 0.12), transparent 28%),
    linear-gradient(180deg, #11191d 0%, #071012 100%);
}

.footer-main {
  display: grid;
  grid-template-columns: minmax(260px, 1.35fr) minmax(150px, 0.72fr) minmax(135px, 0.6fr) minmax(135px, 0.6fr) minmax(250px, 1fr);
  gap: clamp(28px, 4vw, 62px);
  width: min(1480px, 100%);
  margin: 0 auto;
}

.site-footer nav,
.footer-col,
.footer-contact {
  display: grid;
  align-content: start;
  gap: 20px;
  padding-left: clamp(0px, 2vw, 36px);
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-logo img {
  width: 74px;
  height: 58px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.footer-brand p {
  max-width: 390px;
  font-size: clamp(15px, 1.25vw, 20px);
  line-height: 1.75;
}

.footer-col strong,
.footer-contact > strong {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  color: #fff;
  font-size: clamp(17px, 1.35vw, 23px);
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.footer-col strong span,
.footer-contact > strong span,
.footer-contact a span,
.footer-contact > span span {
  color: #67bd58;
}

.footer-col a,
.footer-contact a,
.footer-contact > span {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.77);
  font-size: clamp(15px, 1.2vw, 20px);
  line-height: 1.35;
}

.footer-col a {
  justify-content: space-between;
}

.footer-col a b {
  color: #67bd58;
  font-size: 28px;
  font-weight: 400;
}

.footer-proof {
  display: grid;
  gap: 17px;
  margin-top: 14px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-proof em {
  color: #ffb000;
  font-style: normal;
  letter-spacing: 0.12em;
}

.footer-bottom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  width: min(1480px, 100%);
  margin: clamp(46px, 6vw, 72px) auto 0;
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.13);
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(14px, 1vw, 17px);
}

.footer-bottom > span:nth-child(2) {
  display: inline-flex;
  align-items: center;
  gap: 42px;
}

.footer-bottom i {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.22);
}

.footer-love {
  justify-self: end;
}

@media (max-width: 1100px) {
  .footer-main,
  .footer-bottom {
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    text-align: center;
  }

  .footer-love {
    justify-self: center;
  }
}

/* Final non-home typography and icon scale */
main.service-page,
main.roof-cleaning-page,
.service-areas-page main {
  --page-kicker-size: clamp(11px, 0.78vw, 13px);
  --page-hero-title-size: clamp(36px, 3.55vw, 56px);
  --page-section-title-size: clamp(27px, 2.45vw, 38px);
  --page-panel-title-size: clamp(24px, 2.1vw, 32px);
  --page-subtitle-size: clamp(15px, 1.08vw, 18px);
  --page-body-size: clamp(14px, 0.98vw, 16px);
  --page-card-title-size: clamp(16px, 1.04vw, 19px);
  --page-small-size: clamp(12px, 0.82vw, 14px);
  --page-icon-box: 56px;
  --page-icon-size: 28px;
  --page-step-box: 66px;
}

main.service-page .sp-kicker,
main.roof-cleaning-page .rc-heading span,
main.roof-cleaning-page .sp-kicker,
.service-areas-page main .sp-kicker,
.service-areas-page main .rc-heading span {
  font-size: var(--page-kicker-size);
  letter-spacing: 0.08em;
}

main.service-page .sp-hero h1,
main.service-page .sp-hero-copy h1,
main.service-page.about-page .about-hero-copy h1,
main.roof-cleaning-page .rc-hero-content h1,
.service-areas-page main .areas-hero-copy h1 {
  font-size: var(--page-hero-title-size);
  line-height: 1.08;
  letter-spacing: 0;
}

main.service-page .sp-hero-copy > p:not(.sp-kicker),
main.service-page.about-page .about-hero-copy > p,
main.roof-cleaning-page .rc-hero-content p,
.service-areas-page main .areas-hero-copy > p:not(.sp-kicker) {
  font-size: var(--page-subtitle-size);
  line-height: 1.55;
}

main.service-page .sp-section h2,
main.service-page .sp-bottom-cta h2,
main.service-page .sp-two-panel h2,
main.service-page .sp-aging-band h2,
main.service-page .sp-split-visual h2,
main.service-page.about-page .about-story h2,
main.service-page.about-page .about-team h2,
main.service-page.about-page .about-service-area h2,
main.roof-cleaning-page .rc-heading h2,
main.roof-cleaning-page .rc-warranty-cta h2,
.service-areas-page main .rc-heading h2,
.service-areas-page main .areas-why h2,
.service-areas-page main .coverage-copy h2,
.service-areas-page main .areas-ready strong {
  font-size: var(--page-section-title-size);
  line-height: 1.14;
  letter-spacing: 0;
}

main.service-page .quote-form-card h2,
main.service-page .quote-side-card h3,
main.service-page .sp-benefit-panel h2,
main.service-page .sp-stats b,
main.roof-cleaning-page .rc-warranty-copy h2 {
  font-size: var(--page-panel-title-size);
  line-height: 1.16;
}

main.service-page h3,
main.roof-cleaning-page h3,
.service-areas-page main h3 {
  font-size: var(--page-card-title-size);
  line-height: 1.18;
  letter-spacing: 0;
}

main.service-page p,
main.service-page li,
main.service-page label,
main.service-page input,
main.service-page select,
main.service-page textarea,
main.roof-cleaning-page p,
main.roof-cleaning-page li,
.service-areas-page main p,
.service-areas-page main li {
  font-size: var(--page-body-size);
  line-height: 1.55;
}

main.service-page small,
main.service-page figcaption,
main.roof-cleaning-page small,
main.roof-cleaning-page figcaption,
.service-areas-page main small,
.service-areas-page main figcaption {
  font-size: var(--page-small-size);
}

main.service-page .sp-icon-grid b,
main.service-page .sp-process-five b,
main.roof-cleaning-page .rc-process-row b,
main.roof-cleaning-page .rc-card-icon,
.service-areas-page main .areas-proof-row span::before {
  width: var(--page-icon-box);
  height: var(--page-icon-box);
  min-width: var(--page-icon-box);
  font-size: var(--page-icon-size);
}

main.service-page .sp-process-five b,
main.roof-cleaning-page .rc-process-row b {
  width: var(--page-step-box);
  height: var(--page-step-box);
  min-width: var(--page-step-box);
}

main.service-page .sp-icon-grid svg,
main.roof-cleaning-page .rc-card-icon svg,
main.roof-cleaning-page .rc-process-row svg,
.service-areas-page main .areas-proof-row svg {
  width: var(--page-icon-size);
  height: var(--page-icon-size);
}

main.service-page .sp-icon-grid,
main.service-page .sp-card-grid,
main.service-page .sp-process-five,
main.roof-cleaning-page .rc-process-row,
.service-areas-page main .areas-proof-row {
  gap: clamp(18px, 2vw, 30px);
}

main.service-page .sp-section,
main.service-page .sp-two-panel,
main.service-page .sp-benefit-panel,
main.service-page .sp-stats,
main.roof-cleaning-page .rc-section,
.service-areas-page main .areas-section,
.service-areas-page main .areas-why,
.service-areas-page main .areas-ready {
  padding-top: clamp(54px, 5.2vw, 84px);
  padding-bottom: clamp(54px, 5.2vw, 84px);
}

main.service-page .btn,
main.roof-cleaning-page .btn,
.service-areas-page main .btn,
main.service-page .quote-submit {
  font-size: clamp(14px, 0.95vw, 16px);
}

main.service-page .sp-hero-badges span,
main.service-page .sp-hero-labels b,
main.roof-cleaning-page .rc-hero-actions .btn,
.service-areas-page main .areas-map-hero span {
  font-size: clamp(12px, 0.9vw, 14px);
}

@media (max-width: 760px) {
  main.service-page,
  main.roof-cleaning-page,
  .service-areas-page main {
    --page-hero-title-size: clamp(34px, 10vw, 44px);
    --page-section-title-size: clamp(26px, 8vw, 34px);
    --page-icon-box: 52px;
    --page-step-box: 58px;
  }
}

/* Badge shine frames */
.warranty-shine-frame {
  position: relative;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  border-radius: 18px;
  isolation: isolate;
}

.warranty-shine-frame::after {
  position: absolute;
  inset: -45% -80%;
  z-index: 2;
  content: "";
  background: linear-gradient(
    115deg,
    transparent 0 42%,
    rgba(255, 255, 255, 0.08) 46%,
    rgba(255, 255, 255, 0.72) 50%,
    rgba(255, 255, 255, 0.12) 54%,
    transparent 60% 100%
  );
  mix-blend-mode: screen;
  opacity: 0;
  transform: translateX(-52%) translateY(28%) rotate(0.001deg);
  animation: warranty-shine-sweep 4.8s ease-in-out infinite;
  pointer-events: none;
}

.warranty-shine-frame img {
  position: relative;
  z-index: 1;
  display: block;
}

.relife-page .rr-warranty-row .warranty-shine-frame {
  width: clamp(108px, 11vw, 168px);
}

.relife-page .rr-warranty-badge-img {
  width: 100%;
  height: auto;
}

.rc-warranty-badge.warranty-shine-frame {
  width: clamp(132px, 11vw, 180px);
  height: auto;
  min-width: clamp(132px, 11vw, 180px);
  background: transparent;
  clip-path: none;
}

.rc-warranty-badge.warranty-shine-frame img {
  width: 100%;
  height: auto;
}

@keyframes warranty-shine-sweep {
  0%,
  54% {
    opacity: 0;
    transform: translateX(-56%) translateY(30%) rotate(0.001deg);
  }

  64% {
    opacity: 0.9;
  }

  78%,
  100% {
    opacity: 0;
    transform: translateX(56%) translateY(-30%) rotate(0.001deg);
  }
}

/* Final compact overrides for the split ReLife screens. */
.relife-info-screen,
main.service-page.relife-page .relife-info-screen {
  padding: clamp(24px, 3vw, 42px) clamp(18px, 3.4vw, 42px);
  background: #f4f7f5;
}

.relife-panel,
main.service-page.relife-page .relife-panel {
  width: min(1600px, 100%);
  min-height: clamp(500px, 39vw, 640px);
  border-radius: clamp(18px, 1.4vw, 26px);
  box-shadow: 0 18px 46px rgba(12, 26, 22, 0.1);
}

.relife-aging-bg {
  background-size: cover;
  background-position: 66% 50%;
}

.relife-works-bg {
  background-size: 58% auto;
  background-repeat: no-repeat;
  background-position: right center;
  background-color: #fbfcfb;
}

.relife-aging-screen .relife-panel::before {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.84) 34%, rgba(255, 255, 255, 0.32) 55%, rgba(255, 255, 255, 0.02) 78%);
}

.relife-works-screen .relife-panel::before {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.88) 38%, rgba(255, 255, 255, 0.28) 54%, rgba(255, 255, 255, 0.02) 68%);
}

.relife-screen-content,
main.service-page.relife-page .relife-screen-content {
  width: min(780px, 54%);
  padding: clamp(38px, 4vw, 62px) clamp(34px, 4vw, 68px);
}

.relife-works-content,
main.service-page.relife-page .relife-works-content {
  width: min(620px, 45%);
}

.relife-kicker {
  margin-bottom: clamp(24px, 2.4vw, 34px);
  font-size: clamp(12px, 0.9vw, 15px);
}

.relife-kicker::after {
  bottom: -12px;
  width: clamp(52px, 4vw, 70px);
  height: 3px;
}

.relife-screen-content h2,
main.service-page.relife-page .relife-screen-content h2 {
  max-width: 620px;
  margin-bottom: clamp(16px, 1.6vw, 24px);
  font-size: clamp(34px, 3.5vw, 52px);
  line-height: 1.04;
}

.relife-aging-screen .relife-screen-content h2 span::after {
  bottom: -5px;
  height: 6px;
}

.relife-lede,
main.service-page.relife-page .relife-lede {
  max-width: 560px;
  font-size: clamp(15px, 1.12vw, 18px);
  line-height: 1.5;
}

.aging-factor-row {
  max-width: 760px;
  margin-top: clamp(24px, 2.8vw, 38px);
}

.aging-factor-row article {
  min-height: 112px;
  padding: 0 clamp(8px, 1vw, 16px);
}

.aging-icon {
  margin-bottom: 10px;
  font-size: clamp(28px, 2.6vw, 42px);
}

.aging-factor-row h3,
main.service-page.relife-page .aging-factor-row h3 {
  margin-bottom: 7px;
  font-size: clamp(13px, 0.95vw, 16px);
  line-height: 1.1;
}

.aging-factor-row p,
main.service-page.relife-page .aging-factor-row p {
  font-size: clamp(11px, 0.82vw, 13px);
  line-height: 1.34;
}

.aging-risk-grid {
  max-width: 960px;
  gap: clamp(12px, 1.2vw, 20px);
  margin-top: clamp(24px, 3vw, 42px);
}

.aging-risk-grid article {
  grid-template-columns: clamp(48px, 4vw, 64px) 1fr;
  gap: clamp(12px, 1.1vw, 18px);
  min-height: clamp(96px, 8vw, 126px);
  padding: clamp(14px, 1.25vw, 20px);
  border-radius: 14px;
  background: rgba(244, 249, 242, 0.86);
  backdrop-filter: none;
}

.aging-risk-grid span {
  width: clamp(48px, 4vw, 64px);
  height: clamp(48px, 4vw, 64px);
}

.aging-risk-grid span strong {
  font-size: clamp(24px, 2.3vw, 36px);
}

.aging-risk-grid h3,
main.service-page.relife-page .aging-risk-grid h3 {
  margin-bottom: 6px;
  font-size: clamp(15px, 1.25vw, 20px);
  line-height: 1.12;
}

.aging-risk-grid p,
main.service-page.relife-page .aging-risk-grid p {
  font-size: clamp(12px, 0.88vw, 14px);
  line-height: 1.38;
}

.relife-step-list {
  max-width: 520px;
  margin-top: clamp(28px, 3vw, 42px);
}

.relife-step-list article {
  grid-template-columns: clamp(48px, 4vw, 62px) clamp(44px, 3.6vw, 58px) 1fr;
  gap: clamp(12px, 1.2vw, 18px);
  padding: clamp(16px, 1.7vw, 24px) 0;
}

.relife-step-list b {
  width: clamp(48px, 4vw, 62px);
  height: clamp(48px, 4vw, 62px);
  font-size: clamp(24px, 2.2vw, 34px);
}

.step-icon-text {
  width: clamp(44px, 3.6vw, 58px);
  height: clamp(44px, 3.6vw, 58px);
  font-size: clamp(30px, 2.8vw, 42px);
}

.relife-step-list h3,
main.service-page.relife-page .relife-step-list h3 {
  margin-bottom: 6px;
  font-size: clamp(17px, 1.35vw, 22px);
  line-height: 1.12;
}

.relife-step-list p,
main.service-page.relife-page .relife-step-list p {
  max-width: 330px;
  font-size: clamp(13px, 1vw, 16px);
  line-height: 1.42;
}

.relife-callouts {
  width: min(230px, 16%);
}

.relife-callouts span {
  right: clamp(28px, 3vw, 52px);
  min-width: 120px;
  gap: 8px;
}

.relife-callouts span::before {
  top: 17px;
  width: clamp(34px, 3vw, 54px);
}

.relife-callouts span::after {
  right: calc(100% + clamp(34px, 3vw, 54px));
  top: 11px;
  width: 13px;
  height: 13px;
}

.relife-callouts b {
  width: 38px;
  height: 38px;
  font-size: 22px;
}

.relife-callouts strong {
  font-size: clamp(15px, 1.1vw, 19px);
  line-height: 1.12;
}

.callout-one {
  top: 18%;
}

.callout-two {
  top: 42%;
}

.callout-three {
  top: 66%;
}

@media (max-width: 1120px) {
  .relife-aging-bg,
  .relife-works-bg {
    opacity: 0.82;
  }

  .relife-aging-screen .relife-panel::before,
  .relife-works-screen .relife-panel::before {
    background: rgba(255, 255, 255, 0.82);
  }
}

/* Final compact overrides for the split ReLife screens. */
.relife-info-screen,
main.service-page.relife-page .relife-info-screen {
  padding: clamp(24px, 3vw, 42px) clamp(18px, 3.4vw, 42px);
  background: #f4f7f5;
}

.relife-panel,
main.service-page.relife-page .relife-panel {
  width: min(1600px, 100%);
  min-height: clamp(500px, 39vw, 640px);
  border-radius: clamp(18px, 1.4vw, 26px);
  box-shadow: 0 18px 46px rgba(12, 26, 22, 0.1);
}

.relife-aging-bg {
  background-size: cover;
  background-position: 66% 50%;
}

.relife-works-bg {
  background-size: 58% auto;
  background-repeat: no-repeat;
  background-position: right center;
  background-color: #fbfcfb;
}

.relife-aging-screen .relife-panel::before {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.84) 34%, rgba(255, 255, 255, 0.32) 55%, rgba(255, 255, 255, 0.02) 78%);
}

.relife-works-screen .relife-panel::before {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.88) 38%, rgba(255, 255, 255, 0.28) 54%, rgba(255, 255, 255, 0.02) 68%);
}

.relife-screen-content,
main.service-page.relife-page .relife-screen-content {
  width: min(780px, 54%);
  padding: clamp(38px, 4vw, 62px) clamp(34px, 4vw, 68px);
}

.relife-works-content,
main.service-page.relife-page .relife-works-content {
  width: min(620px, 45%);
}

.relife-kicker {
  margin-bottom: clamp(24px, 2.4vw, 34px);
  font-size: clamp(12px, 0.9vw, 15px);
}

.relife-kicker::after {
  bottom: -12px;
  width: clamp(52px, 4vw, 70px);
  height: 3px;
}

.relife-screen-content h2,
main.service-page.relife-page .relife-screen-content h2 {
  max-width: 620px;
  margin-bottom: clamp(16px, 1.6vw, 24px);
  font-size: clamp(34px, 3.5vw, 52px);
  line-height: 1.04;
}

.relife-aging-screen .relife-screen-content h2 span::after {
  bottom: -5px;
  height: 6px;
}

.relife-lede,
main.service-page.relife-page .relife-lede {
  max-width: 560px;
  font-size: clamp(15px, 1.12vw, 18px);
  line-height: 1.5;
}

.aging-factor-row {
  max-width: 760px;
  margin-top: clamp(24px, 2.8vw, 38px);
}

.aging-factor-row article {
  min-height: 112px;
  padding: 0 clamp(8px, 1vw, 16px);
}

.aging-icon {
  margin-bottom: 10px;
  font-size: clamp(28px, 2.6vw, 42px);
}

.aging-factor-row h3,
main.service-page.relife-page .aging-factor-row h3 {
  margin-bottom: 7px;
  font-size: clamp(13px, 0.95vw, 16px);
  line-height: 1.1;
}

.aging-factor-row p,
main.service-page.relife-page .aging-factor-row p {
  font-size: clamp(11px, 0.82vw, 13px);
  line-height: 1.34;
}

.aging-risk-grid {
  max-width: 960px;
  gap: clamp(12px, 1.2vw, 20px);
  margin-top: clamp(24px, 3vw, 42px);
}

.aging-risk-grid article {
  grid-template-columns: clamp(48px, 4vw, 64px) 1fr;
  gap: clamp(12px, 1.1vw, 18px);
  min-height: clamp(96px, 8vw, 126px);
  padding: clamp(14px, 1.25vw, 20px);
  border-radius: 14px;
  background: rgba(244, 249, 242, 0.86);
  backdrop-filter: none;
}

.aging-risk-grid span {
  width: clamp(48px, 4vw, 64px);
  height: clamp(48px, 4vw, 64px);
}

.aging-risk-grid span strong {
  font-size: clamp(24px, 2.3vw, 36px);
}

.aging-risk-grid h3,
main.service-page.relife-page .aging-risk-grid h3 {
  margin-bottom: 6px;
  font-size: clamp(15px, 1.25vw, 20px);
  line-height: 1.12;
}

.aging-risk-grid p,
main.service-page.relife-page .aging-risk-grid p {
  font-size: clamp(12px, 0.88vw, 14px);
  line-height: 1.38;
}

.relife-step-list {
  max-width: 520px;
  margin-top: clamp(28px, 3vw, 42px);
}

.relife-step-list article {
  grid-template-columns: clamp(48px, 4vw, 62px) clamp(44px, 3.6vw, 58px) 1fr;
  gap: clamp(12px, 1.2vw, 18px);
  padding: clamp(16px, 1.7vw, 24px) 0;
}

.relife-step-list b {
  width: clamp(48px, 4vw, 62px);
  height: clamp(48px, 4vw, 62px);
  font-size: clamp(24px, 2.2vw, 34px);
}

.step-icon-text {
  width: clamp(44px, 3.6vw, 58px);
  height: clamp(44px, 3.6vw, 58px);
  font-size: clamp(30px, 2.8vw, 42px);
}

.relife-step-list h3,
main.service-page.relife-page .relife-step-list h3 {
  margin-bottom: 6px;
  font-size: clamp(17px, 1.35vw, 22px);
  line-height: 1.12;
}

.relife-step-list p,
main.service-page.relife-page .relife-step-list p {
  max-width: 330px;
  font-size: clamp(13px, 1vw, 16px);
  line-height: 1.42;
}

.relife-callouts {
  width: min(230px, 16%);
}

.relife-callouts span {
  right: clamp(28px, 3vw, 52px);
  min-width: 120px;
  gap: 8px;
}

.relife-callouts span::before {
  top: 17px;
  width: clamp(34px, 3vw, 54px);
}

.relife-callouts span::after {
  right: calc(100% + clamp(34px, 3vw, 54px));
  top: 11px;
  width: 13px;
  height: 13px;
}

.relife-callouts b {
  width: 38px;
  height: 38px;
  font-size: 22px;
}

.relife-callouts strong {
  font-size: clamp(15px, 1.1vw, 19px);
  line-height: 1.12;
}

.callout-one {
  top: 18%;
}

.callout-two {
  top: 42%;
}

.callout-three {
  top: 66%;
}

@media (max-width: 1120px) {
  .relife-aging-bg,
  .relife-works-bg {
    opacity: 0.82;
  }

  .relife-aging-screen .relife-panel::before,
  .relife-works-screen .relife-panel::before {
    background: rgba(255, 255, 255, 0.82);
  }
}

/* Compact Roof ReLife split screens: keep text in scale with homepage sections. */
.relife-info-screen,
main.service-page.relife-page .relife-info-screen {
  padding: clamp(24px, 3vw, 42px) clamp(18px, 3.4vw, 42px);
  background: #f4f7f5;
}

.relife-panel,
main.service-page.relife-page .relife-panel {
  width: min(1600px, 100%);
  min-height: clamp(500px, 39vw, 640px);
  border-radius: clamp(18px, 1.4vw, 26px);
  box-shadow: 0 18px 46px rgba(12, 26, 22, 0.1);
}

.relife-aging-bg {
  background-size: cover;
  background-position: 66% 50%;
}

.relife-works-bg {
  background-size: 58% auto;
  background-repeat: no-repeat;
  background-position: right center;
  background-color: #fbfcfb;
}

.relife-aging-screen .relife-panel::before {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.86) 34%, rgba(255, 255, 255, 0.34) 55%, rgba(255, 255, 255, 0.02) 78%);
}

.relife-works-screen .relife-panel::before {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.9) 38%, rgba(255, 255, 255, 0.32) 54%, rgba(255, 255, 255, 0.02) 68%);
}

.relife-screen-content,
main.service-page.relife-page .relife-screen-content {
  width: min(780px, 54%);
  padding: clamp(38px, 4vw, 62px) clamp(34px, 4vw, 68px);
}

.relife-works-content,
main.service-page.relife-page .relife-works-content {
  width: min(620px, 45%);
}

.relife-kicker {
  margin-bottom: clamp(24px, 2.4vw, 34px);
  font-size: clamp(12px, 0.9vw, 15px);
}

.relife-kicker::after {
  bottom: -12px;
  width: clamp(52px, 4vw, 70px);
  height: 3px;
}

.relife-screen-content h2,
main.service-page.relife-page .relife-screen-content h2 {
  max-width: 620px;
  margin-bottom: clamp(16px, 1.6vw, 24px);
  font-size: clamp(34px, 3.5vw, 52px);
  line-height: 1.04;
}

.relife-aging-screen .relife-screen-content h2 span::after {
  bottom: -5px;
  height: 6px;
}

.relife-lede,
main.service-page.relife-page .relife-lede {
  max-width: 560px;
  font-size: clamp(15px, 1.12vw, 18px);
  line-height: 1.5;
}

.aging-factor-row {
  max-width: 760px;
  margin-top: clamp(24px, 2.8vw, 38px);
}

.aging-factor-row article {
  min-height: 112px;
  padding: 0 clamp(8px, 1vw, 16px);
}

.aging-icon {
  margin-bottom: 10px;
  font-size: clamp(28px, 2.6vw, 42px);
}

.aging-factor-row h3,
main.service-page.relife-page .aging-factor-row h3 {
  margin-bottom: 7px;
  font-size: clamp(13px, 0.95vw, 16px);
  line-height: 1.1;
}

.aging-factor-row p,
main.service-page.relife-page .aging-factor-row p {
  font-size: clamp(11px, 0.82vw, 13px);
  line-height: 1.34;
}

.aging-risk-grid {
  max-width: 960px;
  gap: clamp(12px, 1.2vw, 20px);
  margin-top: clamp(24px, 3vw, 42px);
}

.aging-risk-grid article {
  grid-template-columns: clamp(48px, 4vw, 64px) 1fr;
  gap: clamp(12px, 1.1vw, 18px);
  min-height: clamp(96px, 8vw, 126px);
  padding: clamp(14px, 1.25vw, 20px);
  border-radius: 14px;
  background: rgba(244, 249, 242, 0.86);
  backdrop-filter: none;
}

.aging-risk-grid span {
  width: clamp(48px, 4vw, 64px);
  height: clamp(48px, 4vw, 64px);
}

.aging-risk-grid span strong {
  font-size: clamp(24px, 2.3vw, 36px);
}

.aging-risk-grid h3,
main.service-page.relife-page .aging-risk-grid h3 {
  margin-bottom: 6px;
  font-size: clamp(15px, 1.25vw, 20px);
  line-height: 1.12;
}

.aging-risk-grid p,
main.service-page.relife-page .aging-risk-grid p {
  font-size: clamp(12px, 0.88vw, 14px);
  line-height: 1.38;
}

.relife-step-list {
  max-width: 520px;
  margin-top: clamp(28px, 3vw, 42px);
}

.relife-step-list article {
  grid-template-columns: clamp(48px, 4vw, 62px) clamp(44px, 3.6vw, 58px) 1fr;
  gap: clamp(12px, 1.2vw, 18px);
  padding: clamp(16px, 1.7vw, 24px) 0;
}

.relife-step-list b {
  width: clamp(48px, 4vw, 62px);
  height: clamp(48px, 4vw, 62px);
  font-size: clamp(24px, 2.2vw, 34px);
}

.step-icon-text {
  width: clamp(44px, 3.6vw, 58px);
  height: clamp(44px, 3.6vw, 58px);
  font-size: clamp(30px, 2.8vw, 42px);
}

.relife-step-list h3,
main.service-page.relife-page .relife-step-list h3 {
  margin-bottom: 6px;
  font-size: clamp(17px, 1.35vw, 22px);
  line-height: 1.12;
}

.relife-step-list p,
main.service-page.relife-page .relife-step-list p {
  max-width: 330px;
  font-size: clamp(13px, 1vw, 16px);
  line-height: 1.42;
}

.relife-callouts {
  width: min(230px, 16%);
}

.relife-callouts span {
  right: clamp(28px, 3vw, 52px);
  min-width: 120px;
  gap: 8px;
}

.relife-callouts span::before {
  top: 17px;
  width: clamp(34px, 3vw, 54px);
}

.relife-callouts span::after {
  right: calc(100% + clamp(34px, 3vw, 54px));
  top: 11px;
  width: 13px;
  height: 13px;
}

.relife-callouts b {
  width: 38px;
  height: 38px;
  font-size: 22px;
}

.relife-callouts strong {
  font-size: clamp(15px, 1.1vw, 19px);
  line-height: 1.12;
}

.callout-one {
  top: 18%;
}

.callout-two {
  top: 42%;
}

.callout-three {
  top: 66%;
}

@media (max-width: 1120px) {
  .relife-aging-bg,
  .relife-works-bg {
    opacity: 0.82;
  }

  .relife-aging-screen .relife-panel::before,
  .relife-works-screen .relife-panel::before {
    background: rgba(255, 255, 255, 0.82);
  }
}

/* Roof ReLife split education screens */
main.service-page.relife-page .relife-info-screen {
  width: 100%;
  max-width: none;
  padding: clamp(24px, 3vw, 42px) clamp(18px, 3.4vw, 42px);
}

main.service-page.relife-page .relife-panel {
  width: min(1600px, 100%);
}

main.service-page.relife-page .relife-screen-content h2 {
  max-width: 620px;
  margin: 0 0 clamp(16px, 1.6vw, 24px);
  font-size: clamp(34px, 3.5vw, 52px);
  line-height: 1.04;
}

main.service-page.relife-page .relife-lede {
  max-width: 560px;
  margin: 0;
  font-size: clamp(15px, 1.12vw, 18px);
  line-height: 1.5;
}

main.service-page.relife-page .aging-factor-row h3 {
  margin-bottom: 7px;
  font-size: clamp(13px, 0.95vw, 16px);
}

main.service-page.relife-page .aging-factor-row p,
main.service-page.relife-page .aging-risk-grid p {
  margin: 0;
  font-size: clamp(12px, 0.88vw, 14px);
  line-height: 1.38;
}

main.service-page.relife-page .aging-risk-grid h3 {
  margin-bottom: 6px;
  font-size: clamp(15px, 1.25vw, 20px);
}

main.service-page.relife-page .relife-step-list h3 {
  margin-bottom: 6px;
  font-size: clamp(17px, 1.35vw, 22px);
}

main.service-page.relife-page .relife-step-list p {
  max-width: 330px;
  margin: 0;
  font-size: clamp(13px, 1vw, 16px);
  line-height: 1.42;
}

.aging-icon,
.step-icon-text,
.aging-risk-grid span strong {
  color: #147f34;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 900;
  line-height: 1;
}

.aging-icon {
  display: block;
  margin-bottom: 10px;
  font-size: clamp(28px, 2.6vw, 42px);
}

.step-icon-text {
  display: grid;
  width: clamp(44px, 3.6vw, 58px);
  height: clamp(44px, 3.6vw, 58px);
  place-items: center;
  font-size: clamp(30px, 2.8vw, 42px);
}

.aging-risk-grid span strong {
  font-size: clamp(24px, 2.3vw, 36px);
}

@media (max-width: 680px) {
  main.service-page.relife-page .relife-screen-content h2 {
    font-size: clamp(38px, 11vw, 54px);
  }

  main.service-page.relife-page .relife-lede {
    font-size: 18px;
  }
}

.relife-info-screen {
  padding: clamp(24px, 3vw, 42px) clamp(18px, 3.4vw, 42px);
  background: #f4f7f5;
}

.relife-panel {
  position: relative;
  isolation: isolate;
  width: min(1600px, 100%);
  min-height: clamp(500px, 39vw, 640px);
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(17, 33, 28, 0.08);
  border-radius: clamp(18px, 1.4vw, 26px);
  background: #fff;
  box-shadow: 0 18px 46px rgba(12, 26, 22, 0.1);
}

.relife-aging-bg,
.relife-works-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-position: center;
  background-size: cover;
}

.relife-aging-bg {
  background-image: url("assets/roof-aging-bg.png");
  background-position: 66% 50%;
}

.relife-works-bg {
  background-image: url("assets/roof-relife-layer-bg.png");
  background-color: #fbfcfb;
  background-position: right center;
  background-repeat: no-repeat;
  background-size: 58% auto;
}

.relife-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.relife-aging-screen .relife-panel::before {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.84) 34%, rgba(255, 255, 255, 0.32) 55%, rgba(255, 255, 255, 0.02) 78%);
}

.relife-works-screen .relife-panel::before {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.88) 38%, rgba(255, 255, 255, 0.28) 54%, rgba(255, 255, 255, 0.02) 68%);
}

.relife-screen-content {
  width: min(780px, 54%);
  padding: clamp(38px, 4vw, 62px) clamp(34px, 4vw, 68px);
}

.relife-works-content {
  width: min(620px, 45%);
}

.relife-kicker {
  position: relative;
  display: inline-block;
  margin: 0 0 clamp(24px, 2.4vw, 34px);
  color: #48b23d;
  font-size: clamp(12px, 0.9vw, 15px);
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.relife-kicker::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -12px;
  width: clamp(52px, 4vw, 70px);
  height: 3px;
  border-radius: 99px;
  background: #44b539;
}

.relife-screen-content h2 {
  max-width: 620px;
  margin: 0 0 clamp(16px, 1.6vw, 24px);
  color: #091513;
  font-size: clamp(34px, 3.5vw, 52px);
  line-height: 1.04;
  font-weight: 900;
  letter-spacing: 0;
}

.relife-screen-content h2 span {
  color: #197b31;
}

.relife-aging-screen .relife-screen-content h2 span {
  position: relative;
  display: inline-block;
}

.relife-aging-screen .relife-screen-content h2 span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 6px;
  border-radius: 50%;
  background: #46ad3e;
  transform: skewX(-18deg);
  opacity: 0.95;
}

.relife-lede {
  max-width: 560px;
  margin: 0;
  color: #1d2925;
  font-size: clamp(15px, 1.12vw, 18px);
  line-height: 1.5;
}

.aging-factor-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  max-width: 760px;
  margin-top: clamp(24px, 2.8vw, 38px);
}

.aging-factor-row article {
  display: grid;
  justify-items: center;
  min-height: 112px;
  padding: 0 clamp(8px, 1vw, 16px);
  text-align: center;
  border-right: 1px solid rgba(19, 43, 34, 0.13);
}

.aging-factor-row article:last-child {
  border-right: 0;
}

.aging-factor-row svg {
  width: clamp(28px, 2.6vw, 42px);
  height: clamp(28px, 2.6vw, 42px);
  margin-bottom: 10px;
  color: #147f34;
  stroke-width: 1.9;
}

.aging-factor-row h3,
.aging-risk-grid h3,
.relife-step-list h3 {
  margin: 0;
  color: #091513;
  font-weight: 900;
  line-height: 1.05;
}

.aging-factor-row h3 {
  margin-bottom: 7px;
  font-size: clamp(13px, 0.95vw, 16px);
  line-height: 1.1;
}

.aging-factor-row p {
  margin: 0;
  color: #27352f;
  font-size: clamp(11px, 0.82vw, 13px);
  line-height: 1.34;
}

.aging-risk-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.2vw, 20px);
  max-width: 960px;
  margin-top: clamp(24px, 3vw, 42px);
}

.aging-risk-grid article {
  display: grid;
  grid-template-columns: clamp(48px, 4vw, 64px) 1fr;
  gap: clamp(12px, 1.1vw, 18px);
  align-items: center;
  min-height: clamp(96px, 8vw, 126px);
  padding: clamp(14px, 1.25vw, 20px);
  border-radius: 14px;
  background: rgba(244, 249, 242, 0.86);
  box-shadow: inset 0 0 0 1px rgba(33, 106, 53, 0.04);
  backdrop-filter: none;
}

.aging-risk-grid span {
  display: grid;
  width: clamp(48px, 4vw, 64px);
  height: clamp(48px, 4vw, 64px);
  place-items: center;
  border: 2px solid rgba(57, 176, 61, 0.16);
  border-radius: 50%;
  background: rgba(213, 245, 213, 0.52);
}

.aging-risk-grid svg {
  width: 58%;
  height: 58%;
  color: #157f35;
  stroke-width: 1.8;
}

.aging-risk-grid h3 {
  margin-bottom: 6px;
  font-size: clamp(15px, 1.25vw, 20px);
  line-height: 1.12;
}

.aging-risk-grid p {
  margin: 0;
  color: #24332e;
  font-size: clamp(12px, 0.88vw, 14px);
  line-height: 1.38;
}

.relife-step-list {
  display: grid;
  gap: 0;
  max-width: 520px;
  margin-top: clamp(28px, 3vw, 42px);
}

.relife-step-list article {
  display: grid;
  grid-template-columns: clamp(48px, 4vw, 62px) clamp(44px, 3.6vw, 58px) 1fr;
  gap: clamp(12px, 1.2vw, 18px);
  align-items: center;
  padding: clamp(16px, 1.7vw, 24px) 0;
  border-bottom: 1px solid rgba(19, 43, 34, 0.12);
}

.relife-step-list article:first-child {
  padding-top: 0;
}

.relife-step-list article:last-child {
  border-bottom: 0;
}

.relife-step-list b,
.relife-callouts b {
  display: grid;
  place-items: center;
  border: 2px solid rgba(63, 184, 63, 0.18);
  border-radius: 50%;
  color: #167930;
  background: rgba(219, 250, 219, 0.78);
  font-weight: 900;
}

.relife-step-list b {
  width: clamp(48px, 4vw, 62px);
  height: clamp(48px, 4vw, 62px);
  font-size: clamp(24px, 2.2vw, 34px);
}

.relife-step-list svg {
  width: clamp(44px, 3.6vw, 58px);
  height: clamp(44px, 3.6vw, 58px);
  color: #137d35;
  stroke-width: 1.9;
}

.relife-step-list h3 {
  margin-bottom: 6px;
  font-size: clamp(17px, 1.35vw, 22px);
  line-height: 1.12;
}

.relife-step-list p {
  max-width: 330px;
  margin: 0;
  color: #121e1b;
  font-size: clamp(13px, 1vw, 16px);
  line-height: 1.42;
}

.relife-callouts {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(230px, 16%);
  color: #fff;
  pointer-events: none;
}

.relife-callouts span {
  position: absolute;
  right: clamp(28px, 3vw, 52px);
  display: grid;
  gap: 8px;
  align-items: center;
  min-width: 120px;
}

.relife-callouts span::before {
  content: "";
  position: absolute;
  right: 100%;
  top: 17px;
  width: clamp(34px, 3vw, 54px);
  border-top: 2px dashed rgba(255, 255, 255, 0.76);
}

.relife-callouts span::after {
  content: "";
  position: absolute;
  right: calc(100% + clamp(34px, 3vw, 54px));
  top: 11px;
  width: 13px;
  height: 13px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #45b53d;
}

.relife-callouts b {
  width: 38px;
  height: 38px;
  font-size: 22px;
}

.relife-callouts strong {
  font-size: clamp(15px, 1.1vw, 19px);
  line-height: 1.12;
  font-weight: 900;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.3);
}

.callout-one {
  top: 18%;
}

.callout-two {
  top: 42%;
}

.callout-three {
  top: 66%;
}

@media (max-width: 1120px) {
  .relife-panel {
    min-height: auto;
  }

  .relife-screen-content,
  .relife-works-content {
    width: auto;
    padding: 48px 28px;
  }

  .relife-aging-bg,
  .relife-works-bg {
    opacity: 0.36;
  }

  .relife-aging-screen .relife-panel::before,
  .relife-works-screen .relife-panel::before {
    background: rgba(255, 255, 255, 0.88);
  }

  .aging-factor-row,
  .aging-risk-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .aging-factor-row article {
    border-right: 0;
    border-bottom: 1px solid rgba(19, 43, 34, 0.1);
    padding: 22px;
  }

  .relife-callouts {
    display: none;
  }
}

@media (max-width: 680px) {
  .relife-info-screen {
    padding: 20px 14px;
  }

  .relife-panel {
    border-radius: 18px;
  }

  .relife-screen-content,
  .relife-works-content {
    padding: 34px 20px;
  }

  .relife-screen-content h2 {
    font-size: clamp(38px, 11vw, 54px);
  }

  .relife-lede {
    font-size: 18px;
  }

  .aging-factor-row,
  .aging-risk-grid {
    grid-template-columns: 1fr;
  }

  .aging-risk-grid article,
  .relife-step-list article {
    grid-template-columns: 1fr;
    justify-items: start;
  }
}

/* First ReLife education screen, full-width homepage-style layout */
.relife-aging-screen.relife-info-screen,
main.service-page.relife-page .relife-aging-screen.relife-info-screen {
  padding-inline: 0;
}

.relife-aging-screen .relife-panel,
main.service-page.relife-page .relife-aging-screen .relife-panel {
  width: 100%;
  min-height: clamp(430px, 34vw, 560px);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.relife-aging-screen .relife-panel::before {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.82) 34%, rgba(255, 255, 255, 0.28) 54%, rgba(255, 255, 255, 0.02) 78%);
}

.relife-aging-screen .relife-screen-content,
main.service-page.relife-page .relife-aging-screen .relife-screen-content {
  display: grid;
  grid-template-columns: minmax(420px, 760px) minmax(260px, 1fr);
  width: 100%;
  padding: clamp(34px, 3.5vw, 54px) clamp(34px, 5vw, 86px) clamp(22px, 2.6vw, 38px);
}

.relife-aging-screen .relife-kicker,
.relife-aging-screen .relife-screen-content h2,
.relife-aging-screen .relife-lede,
.relife-aging-screen .aging-factor-row {
  grid-column: 1;
}

.relife-aging-screen .aging-factor-row {
  max-width: 720px;
  margin-top: clamp(18px, 2.2vw, 30px);
}

.relife-aging-screen .aging-risk-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  max-width: none;
  margin-top: clamp(20px, 2.4vw, 34px);
  border-top: 1px solid rgba(12, 31, 24, 0.12);
  border-bottom: 1px solid rgba(12, 31, 24, 0.08);
  background: rgba(255, 255, 255, 0.38);
}

.relife-aging-screen .aging-risk-grid article {
  grid-template-columns: clamp(38px, 3vw, 52px) 1fr;
  min-height: 0;
  padding: clamp(14px, 1.6vw, 24px) clamp(16px, 2vw, 30px);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.relife-aging-screen .aging-risk-grid article:not(:last-child) {
  border-right: 1px solid rgba(12, 31, 24, 0.12);
}

.relife-aging-screen .aging-risk-grid span {
  width: clamp(38px, 3vw, 52px);
  height: clamp(38px, 3vw, 52px);
  background: rgba(223, 248, 219, 0.58);
}

.relife-aging-screen .aging-risk-grid h3,
main.service-page.relife-page .relife-aging-screen .aging-risk-grid h3 {
  font-size: clamp(15px, 1.15vw, 18px);
}

.relife-aging-screen .aging-risk-grid p,
main.service-page.relife-page .relife-aging-screen .aging-risk-grid p {
  max-width: 320px;
  font-size: clamp(12px, 0.85vw, 14px);
}

@media (max-width: 980px) {
  .relife-aging-screen .relife-screen-content,
  main.service-page.relife-page .relife-aging-screen .relife-screen-content {
    grid-template-columns: 1fr;
    padding-inline: 24px;
  }

  .relife-aging-screen .aging-risk-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .relife-aging-screen .aging-risk-grid article:nth-child(2) {
    border-right: 0;
  }

  .relife-aging-screen .aging-risk-grid article:nth-child(-n + 2) {
    border-bottom: 1px solid rgba(12, 31, 24, 0.12);
  }
}

/* Roof ReLife page */
.relife-page {
  background: #f7faf7;
}

.relife-page .rr-hero {
  min-height: clamp(420px, 40vw, 560px);
  display: grid;
  grid-template-columns: minmax(340px, 0.84fr) minmax(420px, 1.36fr);
  align-items: stretch;
  background: #061916;
  color: #fff;
  overflow: hidden;
}

.relife-page .rr-hero-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(16px, 1.4vw, 24px);
  padding: clamp(48px, 6vw, 88px) clamp(28px, 4vw, 72px);
  background: transparent;
}

.relife-page .rr-hero-copy h1 {
  margin: 0;
  max-width: 620px;
  font-size: var(--page-hero-title-size);
  line-height: 0.98;
  letter-spacing: 0;
  color: #fff;
}

.relife-page .rr-hero-copy h1 span,
.relife-page h2 span {
  color: var(--green);
}

.relife-page .rr-hero-copy p:not(.sp-kicker) {
  max-width: 500px;
  color: rgba(255, 255, 255, 0.86);
  font-size: var(--page-body-size);
}

.relife-page .rr-hero-visual {
  position: relative;
  min-height: 100%;
  overflow: hidden;
}

.relife-page .rr-hero-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 17, 14, 0.28), rgba(0, 0, 0, 0.03) 40%, rgba(0, 0, 0, 0.38));
}

.relife-page .rr-hero-visual img {
  width: 100%;
  height: 100%;
  min-height: clamp(420px, 40vw, 560px);
  object-fit: cover;
  object-position: center;
  filter: saturate(1.04) contrast(1.06) brightness(0.82);
}

.relife-page .rr-glow-line {
  position: absolute;
  z-index: 2;
  top: -8%;
  bottom: -8%;
  left: 50%;
  width: 4px;
  transform: rotate(6deg);
  background: linear-gradient(180deg, transparent, #98ff79 18%, #63da5c 72%, transparent);
  box-shadow: 0 0 12px #92ff6d, 0 0 34px rgba(101, 240, 83, 0.78);
}

.relife-page .rr-pill {
  position: absolute;
  z-index: 3;
  top: 55%;
  transform: translateY(-50%);
  padding: 8px 16px;
  border-radius: 8px;
  color: #fff;
  font-size: var(--page-small-size);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(8, 14, 13, 0.82);
}

.relife-page .rr-pill.before {
  left: 24%;
}

.relife-page .rr-pill.after {
  right: 20%;
  background: #188421;
}

.relife-page .rr-hero.rr-hero-art {
  position: relative;
  display: block;
  min-height: 0;
  background: #e9f4fb;
  overflow: hidden;
}

.relife-page .rr-hero.rr-hero-art img {
  display: block;
  width: 100%;
  height: clamp(520px, 56vw, 720px);
  min-height: 0;
  object-fit: cover;
  filter: none;
}

.relife-page .rr-hero-content {
  position: absolute;
  z-index: 2;
  top: clamp(34px, 5vw, 72px);
  left: 50%;
  width: min(980px, 84vw);
  transform: translateX(-50%);
  text-align: center;
  color: #101b18;
}

.relife-page .rr-relife-logo {
  display: inline-grid;
  grid-template-columns: auto auto;
  gap: 8px;
  align-items: center;
  margin-bottom: clamp(10px, 1.4vw, 18px);
  text-transform: uppercase;
}

.relife-page .rr-relife-logo span {
  color: #6eaf3f;
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1;
}

.relife-page .rr-relife-logo b {
  display: grid;
  color: #0b1110;
  font-size: clamp(18px, 2.1vw, 34px);
  font-style: normal;
  line-height: 0.9;
  letter-spacing: 0;
}

.relife-page .rr-relife-logo em {
  color: #4d9233;
  font-style: normal;
}

.relife-page .rr-hero-content h1 {
  margin: 0;
  color: #0d1715;
  font-size: clamp(42px, 4.6vw, 74px);
  line-height: 1;
  letter-spacing: 0;
}

.relife-page .rr-hero-content h1 span {
  display: block;
  margin-top: 8px;
  color: #4c8f32;
}

.relife-page .rr-hero-content p {
  max-width: 760px;
  margin: clamp(14px, 1.8vw, 22px) auto 0;
  color: #111d1a;
  font-size: clamp(16px, 1.24vw, 21px);
  line-height: 1.35;
}

.relife-page .rr-stage-notes {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: clamp(70px, 8vw, 115px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(34px, 9vw, 145px);
  width: min(1360px, 90vw);
  transform: translateX(-50%);
  text-align: center;
}

.relife-page .rr-stage-notes article {
  display: grid;
  justify-items: center;
  gap: 10px;
}

.relife-page .rr-stage-notes b {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 8px 18px;
  border-radius: 9px;
  color: #fff;
  background: rgba(0, 0, 0, 0.92);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
  font-size: clamp(13px, 1vw, 16px);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.relife-page .rr-stage-notes b span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #4f9a35;
}

.relife-page .rr-stage-notes p {
  max-width: 270px;
  margin: 0;
  color: #101b18;
  font-size: clamp(12px, 0.82vw, 14px);
  font-weight: 700;
  line-height: 1.3;
}

.relife-page .rr-cost-strip,
.relife-page .rr-section,
.relife-page .rr-two-panel,
.relife-page .rr-results,
.relife-page .rr-package,
.relife-page .rr-final-cta {
  width: min(1440px, calc(100% - clamp(32px, 7vw, 96px)));
  margin: 0 auto;
}

.relife-page .rr-cost-strip {
  display: grid;
  grid-template-columns: minmax(300px, 0.8fr) minmax(520px, 1.4fr);
  gap: clamp(26px, 4vw, 54px);
  align-items: center;
  padding: clamp(34px, 4vw, 56px) 0;
}

.relife-page .rr-cost-lead {
  padding-right: clamp(16px, 3vw, 48px);
  border-right: 1px solid rgba(22, 64, 39, 0.18);
}

.relife-page .rr-cost-lead h2,
.relife-page .rr-results-copy h2,
.relife-page .rr-package h2,
.relife-page .rr-final-cta h2 {
  margin: 0 0 14px;
  font-size: var(--page-section-title-size);
  line-height: 1.06;
  color: #111d1a;
}

.relife-page .rr-cost-lead p,
.relife-page .rr-results-copy p,
.relife-page .rr-final-cta p {
  margin: 0;
  max-width: 430px;
  color: var(--muted);
  font-size: var(--page-body-size);
}

.relife-page .rr-cost-items {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 1.8vw, 26px);
}

.relife-page .rr-cost-items article,
.relife-page .rr-decision-grid article,
.relife-page .rr-two-panel > article,
.relife-page .sp-mini-reviews article {
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(18, 57, 35, 0.1);
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(14, 31, 25, 0.07);
}

.relife-page .rr-cost-items article {
  padding: clamp(18px, 2vw, 26px);
}

.relife-page .rr-cost-items b,
.relife-page .rr-icon,
.relife-page .rr-step > b {
  display: grid;
  place-items: center;
  width: var(--page-icon-box);
  height: var(--page-icon-box);
  border-radius: 999px;
  color: #207c2e;
  background: #eef8ed;
  border: 1px solid rgba(42, 139, 58, 0.25);
  font-size: var(--page-icon-size);
}

.relife-page .rr-cost-items h3,
.relife-page .rr-decision-grid h3,
.relife-page .rr-step strong,
.relife-page .rr-package h3 {
  margin: 14px 0 8px;
  color: #111d1a;
  font-size: var(--page-card-title-size);
  line-height: 1.1;
}

.relife-page .rr-cost-items p,
.relife-page .rr-decision-grid p,
.relife-page .rr-step span,
.relife-page .rr-package p,
.relife-page .rr-chip-row b {
  margin: 0;
  color: #52615b;
  font-size: var(--page-small-size);
  line-height: 1.45;
}

.relife-page .rr-section {
  padding: clamp(34px, 4vw, 56px) 0;
}

.relife-page .rr-section.muted {
  width: 100%;
  max-width: none;
  padding-inline: clamp(32px, 7vw, 96px);
  background: linear-gradient(180deg, #fff, #f5f8f5);
}

.relife-page .rr-decision-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 28px);
}

.relife-page .rr-decision-grid article {
  position: relative;
  overflow: hidden;
  padding: 0 0 18px;
}

.relife-page .rr-decision-grid img {
  width: 100%;
  height: clamp(110px, 10vw, 150px);
  object-fit: cover;
}

.relife-page .rr-decision-grid h3,
.relife-page .rr-decision-grid p,
.relife-page .rr-decision-grid .rr-tag {
  margin-left: 18px;
  margin-right: 18px;
}

.relife-page .rr-status {
  position: absolute;
  z-index: 2;
  top: 10px;
  left: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.relife-page .rr-status.red {
  background: #dd2f24;
}

.relife-page .rr-status.gold {
  background: #f7b928;
  color: #432b00;
}

.relife-page .rr-tag {
  display: inline-flex;
  margin-top: 14px;
  padding: 7px 12px;
  border-radius: 8px;
  font-size: var(--page-small-size);
  text-transform: uppercase;
}

.relife-page .rr-tag.danger {
  color: #d91f1f;
  background: #fff0ee;
}

.relife-page .rr-tag.warning {
  color: #9a6400;
  background: #fff6d6;
}

.relife-page .rr-note {
  margin: 20px 0 0;
  text-align: center;
  color: #1d6f28;
  font-weight: 800;
  font-size: var(--page-small-size);
}

.relife-page .rr-two-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 2.5vw, 32px);
  padding: clamp(30px, 3.8vw, 52px) 0;
}

.relife-page .rr-two-panel > article {
  padding: clamp(24px, 3vw, 40px);
}

.relife-page .rr-two-panel h2 {
  max-width: 560px;
  margin: 0 0 12px;
  color: #111d1a;
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.16;
}

.relife-page .rr-aging-intro,
.relife-page .rr-how-intro {
  max-width: 680px;
  margin: 0 0 18px;
  color: #27342f;
  font-size: var(--page-body-size);
  line-height: 1.55;
}

.relife-page .rr-factor-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin: 22px 0;
}

.relife-page .rr-factor-row span {
  display: grid;
  gap: 7px;
  align-content: start;
  justify-items: center;
  color: #1d7a2c;
  font-size: clamp(22px, 2vw, 30px);
  text-align: center;
}

.relife-page .rr-factor-row b {
  color: #26322e;
  font-size: var(--page-small-size);
}

.relife-page .rr-factor-row small {
  max-width: 150px;
  color: #52615b;
  font-size: clamp(10px, 0.72vw, 12px);
  line-height: 1.35;
}

.relife-page .rr-chip-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.relife-page .rr-chip-row b {
  display: grid;
  gap: 6px;
  padding: 12px;
  border-radius: 12px;
  background: #f2f7f0;
  text-align: center;
}

.relife-page .rr-chip-row strong {
  color: #45544f;
  font-size: var(--page-card-title-size);
  line-height: 1.2;
}

.relife-page .rr-chip-row small {
  color: #63716b;
  font-size: clamp(10px, 0.72vw, 12px);
  font-weight: 600;
  line-height: 1.35;
}

.relife-page .rr-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(120px, 180px);
  gap: 14px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid rgba(17, 41, 30, 0.08);
}

.relife-page .rr-step:first-of-type {
  border-top: 0;
}

.relife-page .rr-step img {
  width: 100%;
  height: 84px;
  object-fit: cover;
  border-radius: 10px;
}

.relife-page .rr-step strong {
  display: block;
  margin: 0 0 5px;
}

.relife-page .rr-results {
  display: grid;
  grid-template-columns: minmax(240px, 0.55fr) minmax(520px, 1.45fr);
  gap: clamp(22px, 3vw, 42px);
  align-items: center;
  padding: clamp(32px, 4vw, 56px) 0;
}

.relife-page .rr-result-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.relife-page .rr-result-gallery img {
  width: 100%;
  height: clamp(150px, 15vw, 230px);
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(15, 38, 28, 0.12);
}

.relife-page .sp-mini-reviews {
  width: min(1440px, 100%);
  margin: 0 auto;
  grid-template-columns: repeat(5, 1fr);
}

.relife-page .rr-review-btn {
  display: flex;
  width: fit-content;
  margin: 22px auto 0;
  padding: 13px 24px;
  border: 1px solid rgba(32, 124, 46, 0.34);
  border-radius: 10px;
  color: #176b27;
  font-weight: 900;
  text-transform: uppercase;
  font-size: var(--page-small-size);
}

.relife-page .rr-package {
  margin-top: clamp(34px, 4vw, 56px);
  margin-bottom: clamp(24px, 3vw, 44px);
  padding: clamp(26px, 3.5vw, 48px);
  border-radius: 18px;
  color: #fff;
  background:
    radial-gradient(circle at 35% 20%, rgba(91, 255, 74, 0.18), transparent 28%),
    linear-gradient(135deg, #031915, #06271b 54%, #02120f);
  box-shadow: 0 26px 60px rgba(3, 21, 16, 0.24);
}

.relife-page .rr-package h2,
.relife-page .rr-package h3 {
  color: #fff;
}

.relife-page .rr-package p {
  color: rgba(255, 255, 255, 0.78);
}

.relife-page .rr-package-top {
  display: grid;
  grid-template-columns: minmax(220px, 0.55fr) minmax(520px, 1.25fr) minmax(230px, 0.55fr);
  gap: clamp(20px, 3vw, 42px);
  align-items: stretch;
}

.relife-page .rr-package-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.relife-page .rr-package-steps article,
.relife-page .rr-includes,
.relife-page .rr-warranty-row article {
  border: 1px solid rgba(129, 220, 86, 0.32);
  border-radius: 14px;
  background: rgba(5, 31, 22, 0.72);
  padding: 18px;
}

.relife-page .rr-package-steps b {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-top: -36px;
  margin-bottom: 8px;
  border-radius: 50%;
  border: 2px solid #b4ff61;
  background: #071c14;
  color: #fff;
}

.relife-page .rr-includes {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.relife-page .rr-includes .btn {
  justify-content: center;
  min-height: 42px;
}

.relife-page .rr-warranty-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2vw, 28px);
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(129, 220, 86, 0.22);
}

.relife-page .rr-warranty-row article {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: center;
}

.relife-page .rr-warranty-row article > div {
  min-width: 0;
}

.relife-page .rr-warranty-badge-img {
  width: clamp(108px, 11vw, 168px);
  max-width: 100%;
  filter: drop-shadow(0 0 20px rgba(126, 255, 82, 0.24));
}

.relife-page .rr-warranty-row article > b {
  display: grid;
  place-items: center;
  width: clamp(90px, 8vw, 118px);
  height: clamp(90px, 8vw, 118px);
  border-radius: 24px;
  background: linear-gradient(145deg, #1f542f, #082716);
  border: 2px solid rgba(220, 255, 157, 0.65);
  box-shadow: 0 0 24px rgba(126, 255, 82, 0.32);
  color: #fff;
  font-size: clamp(30px, 3.3vw, 46px);
  line-height: 0.88;
  text-align: center;
}

.relife-page .rr-warranty-row span {
  font-size: 0.45em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.relife-page .rr-final-cta {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(260px, 0.8fr) minmax(230px, 0.55fr);
  gap: clamp(20px, 3vw, 42px);
  align-items: center;
  padding: clamp(28px, 4vw, 54px);
  color: #fff;
  background:
    linear-gradient(90deg, rgba(2, 18, 15, 0.92), rgba(3, 34, 21, 0.86)),
    url("assets/final-cta-neighborhood.png") center/cover;
}

.relife-page .rr-final-cta h2 {
  color: #fff;
}

.relife-page .rr-final-cta ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.relife-page .rr-final-cta li {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 800;
  font-size: var(--page-small-size);
}

.relife-page .rr-final-cta li::before {
  content: "✓";
  margin-right: 10px;
  color: #91e86b;
}

.relife-page .rr-final-cta > div:last-child {
  display: grid;
  gap: 12px;
}

@media (max-width: 1100px) {
  .relife-page .rr-hero,
  .relife-page .rr-cost-strip,
  .relife-page .rr-two-panel,
  .relife-page .rr-results,
  .relife-page .rr-package-top,
  .relife-page .rr-final-cta {
    grid-template-columns: 1fr;
  }

  .relife-page .rr-cost-lead {
    border-right: 0;
    border-bottom: 1px solid rgba(22, 64, 39, 0.18);
    padding: 0 0 24px;
  }

  .relife-page .rr-cost-items,
  .relife-page .rr-decision-grid,
  .relife-page .sp-mini-reviews {
    grid-template-columns: repeat(2, 1fr);
  }

  .relife-page .rr-stage-notes {
    gap: clamp(18px, 4vw, 42px);
    width: min(980px, 92vw);
  }
}

@media (max-width: 760px) {
  .relife-page .rr-cost-items,
  .relife-page .rr-decision-grid,
  .relife-page .rr-factor-row,
  .relife-page .rr-chip-row,
  .relife-page .rr-result-gallery,
  .relife-page .rr-package-steps,
  .relife-page .rr-warranty-row,
  .relife-page .sp-mini-reviews {
    grid-template-columns: 1fr;
  }

  .relife-page .rr-hero-copy {
    padding-top: 44px;
    padding-bottom: 44px;
  }

  .relife-page .rr-hero.rr-hero-art img {
    height: 680px;
    object-position: center bottom;
  }

  .relife-page .rr-hero-content {
    top: 28px;
    width: min(92vw, 620px);
  }

  .relife-page .rr-hero-content h1 {
    font-size: clamp(34px, 9vw, 46px);
  }

  .relife-page .rr-stage-notes {
    bottom: 42px;
    grid-template-columns: 1fr;
    gap: 14px;
    width: min(92vw, 460px);
  }

  .relife-page .rr-step,
  .relife-page .rr-warranty-row article {
    grid-template-columns: 1fr;
  }
}

/* Roof cleaning detail replacements */
.rc-compare-hero {
  display: block;
  min-height: clamp(500px, 46vw, 680px);
}

.rc-hero-compare,
.rc-hero-image,
.rc-hero-clean-layer {
  position: absolute;
  inset: 0;
}

.rc-hero-compare {
  z-index: 1;
  overflow: hidden;
  cursor: ew-resize;
  touch-action: none;
  user-select: none;
}

.rc-hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  user-select: none;
}

.rc-hero-before-image {
  filter: brightness(0.62) saturate(1.06) contrast(1.08);
}

.rc-hero-clean-layer {
  z-index: 2;
  clip-path: inset(0 0 0 var(--rc-compare));
}

.rc-hero-clean-layer .rc-hero-image {
  filter: brightness(0.9) saturate(0.96) contrast(1.04);
}

.rc-compare-hero .rc-hero-divider {
  top: 0;
  bottom: 0;
  left: var(--rc-compare);
  z-index: 5;
  width: 92px;
  background: transparent;
  cursor: ew-resize;
  transform: translateX(-50%);
}

.rc-compare-hero .rc-hero-divider::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  content: "";
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 0 1px rgba(12, 22, 18, 0.28);
  transform: translateX(-50%);
}

.rc-compare-hero .rc-hero-divider span {
  z-index: 2;
  color: var(--green);
}

.rc-compare-range {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  pointer-events: none;
  appearance: none;
}

.rc-compare-hero .rc-hero-content {
  z-index: 7;
}

.rc-type-grid img {
  object-position: center;
}

.rc-growth-row img {
  background: rgba(46, 143, 91, 0.08);
}

.rc-projects {
  display: grid;
  grid-template-columns: minmax(240px, 0.32fr) minmax(520px, 0.68fr);
  gap: clamp(34px, 5vw, 76px);
  align-items: start;
  max-width: 1420px;
  margin: 0 auto;
}

.rc-projects-copy {
  align-self: center;
}

.rc-projects-copy > span {
  display: block;
  margin-bottom: 20px;
  color: var(--green);
  font-size: clamp(12px, 0.95vw, 15px);
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.rc-projects-copy h2 {
  margin: 0 0 20px;
  color: #101816;
  font-size: clamp(36px, 3.55vw, 56px);
  line-height: 1.08;
}

.rc-projects-copy h2 em {
  color: #236f40;
  font-style: normal;
}

.rc-projects-copy p {
  max-width: 390px;
  margin: 0 0 24px;
  color: #33443e;
  font-size: clamp(15px, 1.08vw, 18px);
  line-height: 1.55;
}

.rc-projects-copy ul {
  display: grid;
  gap: 12px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}

.rc-projects-copy li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #17221f;
  font-weight: 750;
}

.rc-projects-copy li::before {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #287a45;
  content: "✓";
  font-size: 13px;
}

.rc-video-main {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background: #0d1513;
  box-shadow: 0 24px 54px rgba(16, 31, 26, 0.16);
}

.rc-video-main img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 8.25;
  object-fit: cover;
  transition: opacity 180ms ease;
}

.rc-video-main::after {
  position: absolute;
  inset: auto 0 0;
  height: 34%;
  content: "";
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.56));
  pointer-events: none;
}

.rc-video-play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  display: grid;
  width: 86px;
  height: 86px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #18221f;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.2);
  font-size: 32px;
  cursor: pointer;
  transform: translate(-50%, -50%);
}

.rc-video-controls {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 22px;
  z-index: 2;
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: 16px;
  align-items: center;
  color: #fff;
  font-size: 14px;
}

.rc-video-controls i {
  position: relative;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.52);
}

.rc-video-controls i::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 34%;
  content: "";
  background: var(--green);
}

.rc-video-caption {
  padding: 22px 14px 18px;
}

.rc-video-caption h3 {
  margin: 0 0 6px;
  color: #101816;
  font-size: clamp(20px, 1.6vw, 26px);
}

.rc-video-caption p {
  margin: 0;
  color: #4a5a55;
}

.rc-video-thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  margin-top: 20px;
}

.rc-video-thumbs button {
  display: grid;
  gap: 9px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #17221f;
  text-align: center;
  cursor: pointer;
}

.rc-video-thumbs button img {
  width: 100%;
  aspect-ratio: 1.58;
  object-fit: cover;
  border: 3px solid transparent;
  border-radius: 8px;
  box-shadow: 0 14px 30px rgba(17, 34, 29, 0.12);
  transition: border-color 160ms ease, transform 160ms ease;
}

.rc-video-thumbs button.active img,
.rc-video-thumbs button:hover img {
  border-color: var(--green);
  transform: translateY(-2px);
}

.rc-video-thumbs span {
  position: relative;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  justify-self: center;
  margin-top: -56px;
  border-radius: 50%;
  color: #111a17;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

.rc-video-thumbs b {
  position: relative;
  justify-self: end;
  margin: -38px 10px 2px 0;
  padding: 4px 8px;
  border-radius: 6px;
  color: #fff;
  background: rgba(0, 0, 0, 0.72);
  font-size: 12px;
}

.rc-video-thumbs strong {
  color: #1b2925;
  font-size: clamp(15px, 1vw, 18px);
  line-height: 1.16;
}

.rc-video-thumbs small {
  color: #5a6863;
  font-size: 13px;
  line-height: 1.25;
}

.rc-video-hint {
  margin: 24px 0 0;
  color: #33443e;
  text-align: center;
}

.rc-warranty-visual {
  padding: clamp(42px, 5vw, 74px) clamp(18px, 4vw, 54px);
  background: #fff;
}

.rc-warranty-visual img {
  display: block;
  width: min(1480px, 100%);
  margin: 0 auto;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(13, 32, 26, 0.16);
}

@media (max-width: 980px) {
  .rc-projects {
    grid-template-columns: 1fr;
  }

  .rc-video-thumbs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .rc-video-thumbs {
    grid-template-columns: 1fr;
  }

  .rc-video-play {
    width: 68px;
    height: 68px;
  }
}

/* Unified navigation states */
.site-nav a {
  position: relative;
  opacity: 0.86;
  transition: color 160ms ease, opacity 160ms ease;
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10px;
  height: 2px;
  border-radius: 999px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 180ms ease;
}

.site-nav a:hover,
.site-nav a.active {
  color: var(--green-dark);
  opacity: 1;
}

.site-nav a:hover::after,
.site-nav a.active::after {
  transform: scaleX(1);
}

/* Unified footer */
.site-footer {
  display: block;
  padding: clamp(54px, 6vw, 86px) clamp(20px, 5vw, 64px) 30px;
  color: rgba(255, 255, 255, 0.78);
  background:
    radial-gradient(circle at 80% 10%, rgba(83, 172, 87, 0.12), transparent 28%),
    linear-gradient(180deg, #11191d 0%, #071012 100%);
}

.footer-main {
  display: grid;
  grid-template-columns: minmax(260px, 1.35fr) minmax(150px, 0.72fr) minmax(135px, 0.6fr) minmax(135px, 0.6fr) minmax(250px, 1fr);
  gap: clamp(28px, 4vw, 62px);
  width: min(1480px, 100%);
  margin: 0 auto;
}

.site-footer p {
  margin: 22px 0 0;
  color: rgba(255, 255, 255, 0.76);
}

.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}

.footer-logo img {
  width: 74px;
  height: 58px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.footer-logo strong,
.footer-logo small {
  display: block;
  line-height: 1.04;
}

.footer-logo strong {
  color: #fff;
  font-size: clamp(28px, 2.2vw, 38px);
  font-weight: 900;
}

.footer-logo strong span {
  color: #66bd58;
}

.footer-logo small {
  margin-top: 7px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  font-weight: 860;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.footer-brand p {
  max-width: 390px;
  font-size: clamp(15px, 1.25vw, 20px);
  line-height: 1.75;
}

.social-links {
  display: flex;
  gap: 18px;
  margin-top: 38px;
}

.social-links a {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  color: #fff;
  font-size: 22px;
  font-weight: 850;
  background: rgba(255, 255, 255, 0.03);
}

.footer-col,
.footer-contact {
  display: grid;
  align-content: start;
  gap: 20px;
  padding-left: clamp(0px, 2vw, 36px);
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.site-footer nav {
  padding-left: clamp(0px, 2vw, 36px);
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-col strong,
.footer-contact > strong {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  color: #fff;
  font-size: clamp(17px, 1.35vw, 23px);
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.footer-col strong span,
.footer-contact > strong span {
  color: #67bd58;
  font-size: 27px;
}

.footer-col a,
.footer-contact a,
.footer-contact > span {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.77);
  font-size: clamp(15px, 1.2vw, 20px);
  line-height: 1.35;
}

.footer-col a {
  justify-content: space-between;
}

.footer-col a b {
  color: #67bd58;
  font-size: 28px;
  font-weight: 400;
}

.footer-contact a span,
.footer-contact > span span {
  color: #67bd58;
  font-size: 24px;
}

.footer-col a:hover,
.footer-contact a:hover {
  color: #fff;
}

.footer-proof {
  display: grid;
  gap: 17px;
  margin-top: 14px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-proof span {
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(14px, 1.1vw, 18px);
}

.footer-proof em {
  color: #ffb000;
  font-style: normal;
  letter-spacing: 0.12em;
}

.footer-bottom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  width: min(1480px, 100%);
  margin: clamp(46px, 6vw, 72px) auto 0;
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.13);
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(14px, 1vw, 17px);
}

.footer-bottom > span:nth-child(2) {
  display: inline-flex;
  align-items: center;
  gap: 42px;
}

.footer-bottom i {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.22);
}

.footer-love {
  justify-self: end;
}

.footer-love::first-letter {
  color: #77c96c;
}

/* Service areas page */
.dark-header-page .site-header {
  color: #fff;
  background: rgba(7, 16, 18, 0.96);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.2);
}

.dark-header-page .brand-text strong span:first-child,
.dark-header-page .brand-text small,
.dark-header-page .site-nav,
.dark-header-page .phone-link {
  color: #fff;
}

.dark-header-page .site-header.scrolled {
  color: #fff;
  background: rgba(7, 16, 18, 0.96);
}

.areas-hero {
  display: grid;
  grid-template-columns: minmax(320px, 0.86fr) minmax(480px, 1.3fr);
  align-items: stretch;
  min-height: 520px;
  margin-top: 76px;
  background: linear-gradient(90deg, #fff 0%, #fbfdfb 45%, #eff8ee 100%);
}

.areas-hero-copy {
  display: grid;
  align-content: center;
  padding: clamp(54px, 7vw, 94px) clamp(28px, 7vw, 86px);
}

.areas-hero-copy h1 {
  margin: 0;
  color: #111b1a;
  font-size: clamp(42px, 5vw, 76px);
  line-height: 1.06;
  letter-spacing: 0;
}

.areas-hero-copy h1 span {
  color: #2b8a31;
}

.areas-hero-copy p:not(.sp-kicker) {
  max-width: 460px;
  margin: 22px 0 28px;
  color: #27342f;
  font-size: clamp(17px, 1.4vw, 22px);
  line-height: 1.55;
}

.areas-map-hero,
.coverage-map {
  position: relative;
  min-height: 440px;
  overflow: hidden;
  background:
    linear-gradient(rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.32)),
    radial-gradient(circle at 35% 30%, rgba(111, 189, 99, 0.34), transparent 28%),
    radial-gradient(circle at 70% 55%, rgba(111, 189, 99, 0.38), transparent 35%),
    linear-gradient(135deg, #eaf5ec, #f8fbf8);
}

.areas-map-hero::before,
.coverage-map::before {
  content: "";
  position: absolute;
  inset: -20%;
  opacity: 0.22;
  background:
    linear-gradient(65deg, transparent 48%, #9ebcb1 49%, transparent 50%) 0 0 / 92px 92px,
    linear-gradient(-20deg, transparent 48%, #9ebcb1 49%, transparent 50%) 0 0 / 110px 110px;
}

.map-shape {
  position: absolute;
  inset: 11% 9% 10% 8%;
  border-radius: 46% 35% 42% 28%;
  background: rgba(93, 194, 92, 0.24);
  box-shadow: 0 0 0 18px rgba(93, 194, 92, 0.12);
  transform: rotate(-4deg);
}

.areas-map-hero span,
.coverage-map span {
  position: absolute;
  z-index: 2;
  color: #10201a;
  font-size: 13px;
  font-weight: 850;
  text-align: center;
}

.areas-map-hero span::before,
.coverage-map span::before {
  content: "";
  display: block;
  width: 15px;
  height: 15px;
  margin: 0 auto 5px;
  border: 4px solid #3e9a43;
  border-radius: 50% 50% 50% 0;
  background: #fff;
  transform: rotate(-45deg);
}

.areas-section,
.areas-why,
.coverage-map-section,
.areas-ready {
  width: min(1220px, calc(100% - 40px));
  margin: 0 auto;
}

.areas-section {
  padding: clamp(50px, 6vw, 80px) 0 36px;
}

.area-card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 32px;
}

.area-card-grid article {
  position: relative;
  min-height: 176px;
  overflow: hidden;
  border-radius: 8px;
  padding: 58px 28px 22px;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(8, 18, 16, 0.28), rgba(6, 13, 12, 0.82)),
    var(--area-img);
  background-size: cover;
  background-position: center;
  box-shadow: 0 18px 44px rgba(18, 31, 27, 0.12);
}

.area-card-grid h3 {
  margin: 0 0 12px;
  font-size: 24px;
}

.area-card-grid ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  font-weight: 650;
}

.area-card-grid li::before {
  content: "✓";
  margin-right: 8px;
  color: #67bd58;
}

.areas-why {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 48px;
  align-items: center;
  padding: clamp(54px, 6vw, 78px) 0;
}

.areas-why h2 {
  margin: 0 0 34px;
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1.08;
}

.areas-why h2 span {
  color: #2b8a31;
}

.areas-proof-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  color: #14201c;
  font-size: 13px;
  font-weight: 820;
  text-align: center;
}

.areas-proof-row span::before {
  content: "✓";
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  margin: 0 auto 10px;
  border: 1px solid rgba(46, 143, 91, 0.24);
  border-radius: 50%;
  color: var(--green);
}

.areas-why img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  border-radius: 8px;
}

.coverage-map-section {
  display: grid;
  grid-template-columns: 0.34fr 0.66fr;
  min-height: 330px;
  overflow: hidden;
  border-top: 1px solid #dfe7e2;
  border-bottom: 1px solid #dfe7e2;
  background: #f7fbf8;
}

.coverage-copy {
  align-self: center;
  padding: 44px clamp(24px, 4vw, 52px);
}

.coverage-copy h2 {
  margin: 0 0 20px;
  font-size: clamp(28px, 3vw, 42px);
}

.coverage-copy p {
  color: #35433f;
  line-height: 1.65;
}

.coverage-copy span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  color: #35433f;
  font-size: 14px;
}

.coverage-copy span::before {
  content: "";
  width: 14px;
  height: 14px;
  background: rgba(86, 177, 82, 0.55);
}

.areas-ready {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 28px;
  padding: 34px 0;
}

.areas-ready strong {
  display: block;
  font-size: clamp(26px, 3vw, 40px);
}

.areas-ready span {
  color: #50605b;
  font-size: 16px;
}

.areas-ready-phone {
  color: var(--green);
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 850;
}

@media (max-width: 1100px) {
  .footer-main,
  .areas-hero,
  .areas-why,
  .coverage-map-section,
  .areas-ready {
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer-love {
    justify-self: center;
  }

  .area-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .areas-proof-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .footer-main,
  .area-card-grid {
    grid-template-columns: 1fr;
  }

  .footer-col,
  .footer-contact,
  .site-footer nav {
    padding-left: 0;
    border-left: 0;
  }

  .areas-hero-copy {
    padding-top: 96px;
  }

  .areas-map-hero {
    min-height: 360px;
  }
}

/* Shared service pages */
.service-page {
  background: #f7f9f7;
  color: var(--ink);
}

.sp-hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: clamp(430px, 42vw, 580px);
  margin-top: 82px;
  padding: clamp(58px, 7vw, 96px) clamp(24px, 6vw, 72px);
  color: #fff;
  background: #0a1714;
  overflow: hidden;
}

.sp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(4, 13, 10, 0.9) 0%, rgba(4, 13, 10, 0.62) 38%, rgba(4, 13, 10, 0.18) 70%),
    var(--sp-hero-image);
  background-size: cover;
  background-position: center;
}

.relife-hero {
  --sp-hero-image: url("assets/roof-cleaning-complete-before-after.png");
}

.exterior-hero {
  --sp-hero-image: url("assets/final-cta-neighborhood.png");
}

.training-hero {
  --sp-hero-image: url("assets/service-house-washing.png");
}

.partner-hero {
  --sp-hero-image: url("assets/final-cta-neighborhood.png");
}

.quote-page-hero {
  --sp-hero-image: url("assets/final-cta-neighborhood.png");
}

.sp-hero-copy {
  position: relative;
  z-index: 1;
  max-width: 620px;
}

.training-hero,
.partner-hero {
  display: grid;
  grid-template-columns: minmax(520px, 1fr) minmax(340px, 430px);
  gap: clamp(34px, 5vw, 92px);
  align-items: center;
}

.training-hero .sp-hero-copy,
.partner-hero .sp-hero-copy {
  max-width: 760px;
}

.training-hero .hero-form-card,
.partner-hero .hero-form-card {
  justify-self: end;
}

.training-hero .sp-hero-badges,
.partner-hero .sp-hero-badges {
  grid-column: 1 / -1;
}

.sp-kicker {
  margin: 0 0 14px;
  color: #7fd263;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.sp-hero h1,
.sp-section h2,
.sp-bottom-cta h2,
.sp-two-panel h2 {
  margin: 0;
  font-size: clamp(34px, 4.2vw, 58px);
  line-height: 1.02;
  letter-spacing: 0;
}

.sp-hero h1 span,
.sp-bottom-cta h2 span {
  color: #72c857;
}

.sp-hero-copy > p:not(.sp-kicker) {
  max-width: 520px;
  margin: 22px 0 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.65;
}

.sp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

.btn.secondary.light {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(8, 20, 17, 0.35);
  backdrop-filter: blur(10px);
}

.btn.secondary.light svg {
  width: 18px;
  height: 18px;
}

.btn.primary.disabled {
  cursor: default;
  pointer-events: none;
  color: rgba(255, 255, 255, 0.78);
  background: linear-gradient(135deg, #6f7773, #4d5551);
  box-shadow: none;
}

.hero-form-card {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  width: min(100%, 430px);
  padding: clamp(30px, 3vw, 46px);
  border: 1px solid rgba(255, 255, 255, 0.54);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(18px);
  text-align: center;
  color: #111d19;
}

.partner-info-card {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(8, 20, 17, 0.66);
}

.hero-form-icon {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  margin-bottom: 16px;
  border-radius: 50%;
  color: var(--green);
  background: rgba(82, 181, 65, 0.14);
  font-size: 22px;
}

.hero-form-card h2 {
  margin: 4px 0 12px;
  font-size: clamp(26px, 2.1vw, 34px);
  line-height: 1.15;
}

.hero-form-card strong {
  margin-bottom: 14px;
  color: var(--green);
  font-size: clamp(18px, 1.4vw, 22px);
}

.hero-form-card > p:not(.sp-kicker) {
  max-width: 330px;
  margin: 0 0 26px;
  color: rgba(17, 29, 25, 0.86);
  line-height: 1.55;
}

.partner-info-card > p:not(.sp-kicker) {
  color: rgba(255, 255, 255, 0.86);
}

.hero-form-card label {
  position: relative;
  display: block;
  width: 100%;
  margin-bottom: 14px;
}

.hero-form-card label span {
  position: absolute;
  left: 18px;
  top: 50%;
  color: #69746f;
  transform: translateY(-50%);
}

.hero-form-card input {
  width: 100%;
  height: 56px;
  padding: 0 46px 0 18px;
  border: 1px solid rgba(15, 34, 29, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  font: inherit;
}

.hero-form-card label b {
  position: absolute;
  right: 18px;
  top: 50%;
  color: #7b8984;
  transform: translateY(-50%);
}

.hero-form-card button {
  width: 100%;
  min-height: 58px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(135deg, #40aa55, #279345);
  font: inherit;
  font-weight: 900;
}

.hero-form-card ul {
  display: grid;
  gap: 13px;
  width: 100%;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.hero-form-card li,
.hero-form-card small {
  color: inherit;
}

.hero-form-card li::before {
  display: inline-grid;
  width: 18px;
  height: 18px;
  margin-right: 10px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: rgba(71, 178, 87, 0.74);
  content: "✓";
  font-size: 12px;
}

.hero-form-card small {
  justify-self: stretch;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.7);
  text-align: left;
}

.sp-hero-labels,
.sp-hero-badges {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 42px;
  color: rgba(255, 255, 255, 0.92);
}

.sp-hero-labels {
  position: absolute;
  right: 12%;
  bottom: 20%;
}

.sp-hero-labels b,
.sp-hero-badges span {
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  background: rgba(6, 20, 16, 0.58);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18);
}

.sp-hero-badges.inline {
  margin-top: 28px;
}

.sp-section {
  padding: clamp(46px, 5vw, 72px) clamp(20px, 5vw, 56px);
  background: #fff;
}

.sp-section.muted,
.sp-two-panel.muted {
  background: linear-gradient(180deg, #f8fbf8, #ffffff);
}

.sp-card-grid,
.sp-icon-grid,
.sp-mini-reviews,
.sp-results-row,
.sp-process-five,
.sp-stats,
.sp-two-panel,
.quote-layout {
  width: min(var(--max), calc(100% - 40px));
  margin: 0 auto;
}

.sp-card-grid,
.sp-icon-grid,
.sp-mini-reviews,
.sp-results-row,
.sp-process-five {
  display: grid;
  gap: 18px;
}

.sp-card-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sp-card-grid.four,
.sp-icon-grid.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sp-card-grid.six,
.sp-icon-grid.six {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.sp-icon-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sp-card-grid article,
.sp-icon-grid article,
.sp-mini-reviews article,
.quote-form-card,
.quote-side-card {
  border: 1px solid rgba(23, 32, 28, 0.09);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 46px rgba(18, 28, 24, 0.07);
}

.sp-card-grid article {
  overflow: hidden;
}

.sp-card-grid img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.sp-card-grid h3,
.sp-card-grid p,
.sp-card-grid ul {
  margin-left: 20px;
  margin-right: 20px;
}

.sp-card-grid h3 {
  margin-top: 20px;
  margin-bottom: 8px;
  font-size: 19px;
}

.sp-card-grid p,
.sp-card-grid li,
.sp-icon-grid p,
.sp-mini-reviews p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.sp-card-grid ul {
  margin-bottom: 22px;
  padding-left: 18px;
}

.sp-card-grid li::marker {
  color: var(--green);
}

.sp-icon-grid article {
  padding: 24px 18px;
  text-align: center;
}

.sp-icon-grid b {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin: 0 auto 14px;
  color: var(--green-dark);
  font-size: 25px;
  border: 1px solid rgba(46, 143, 91, 0.18);
  border-radius: 50%;
  background: #eff7ee;
}

.sp-icon-grid h3 {
  margin: 0 0 8px;
  font-size: 16px;
}

.sp-aging-band,
.sp-benefit-panel {
  padding: clamp(38px, 5vw, 60px) clamp(24px, 5vw, 56px);
  background: linear-gradient(90deg, #f8fbf8, #eef6ee);
}

.sp-aging-band {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(40px, 10vw, 140px);
}

.sp-aging-band h2,
.sp-compare-table h2 {
  margin: 0;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.12;
}

.aging-flow {
  display: flex;
  align-items: center;
  gap: 18px;
  color: var(--green-dark);
  font-weight: 800;
}

.aging-flow span,
.aging-flow b {
  padding: 13px 16px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 14px 30px rgba(16, 24, 22, 0.08);
}

.sp-split-visual {
  display: grid;
  grid-template-columns: minmax(280px, 0.42fr) minmax(420px, 1fr);
  align-items: center;
  gap: 28px;
  padding: clamp(46px, 5vw, 72px) clamp(24px, 6vw, 72px);
  color: #fff;
  background: #071613;
}

.sp-split-visual img {
  width: 100%;
  max-height: 390px;
  object-fit: cover;
  border-radius: 8px;
}

.sp-split-visual h2 {
  margin: 0 0 16px;
  font-size: clamp(32px, 4vw, 54px);
  line-height: 1.05;
}

.sp-split-visual p:not(.sp-kicker) {
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.6;
}

.sp-compare-table {
  display: grid;
  grid-template-columns: 0.65fr 1fr;
  gap: 28px;
  width: min(980px, calc(100% - 40px));
  margin: 0 auto;
  align-items: start;
}

.sp-compare-table table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 18px 46px rgba(18, 28, 24, 0.08);
}

.sp-compare-table th {
  color: #fff;
  background: #17201c;
}

.sp-compare-table th:last-child {
  background: var(--green-dark);
}

.sp-compare-table th,
.sp-compare-table td {
  padding: 15px 18px;
  border: 1px solid rgba(23, 32, 28, 0.09);
  font-size: 14px;
  text-align: left;
}

.sp-results-row {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sp-results-row figure {
  margin: 0;
  text-align: center;
}

.sp-results-row img {
  width: 100%;
  height: 155px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 16px 34px rgba(18, 28, 24, 0.08);
}

.sp-results-row figcaption {
  margin-top: 10px;
  font-weight: 800;
}

.sp-process-five {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  text-align: center;
}

.sp-process-five.four-step {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sp-process-five article b {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0 auto 18px;
  color: #fff;
  border-radius: 50%;
  background: #16820d;
}

.sp-process-five h3 {
  margin: 0 0 8px;
  font-size: 18px;
}

.sp-process-five p {
  margin: 0 auto;
  max-width: 230px;
  color: var(--muted);
  line-height: 1.55;
}

.sp-mini-reviews {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sp-mini-reviews article {
  padding: 22px;
  color: #f4ad00;
}

.sp-mini-reviews strong {
  display: block;
  margin: 8px 0;
  color: var(--ink);
}

.sp-mini-reviews p {
  margin: 0;
  color: var(--ink);
}

.sp-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  padding: 28px 36px;
  border: 1px solid rgba(23, 32, 28, 0.08);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 46px rgba(18, 28, 24, 0.07);
}

.sp-stats article {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  padding: 0 22px;
  border-right: 1px solid rgba(23, 32, 28, 0.1);
}

.sp-stats article:last-child {
  border-right: 0;
}

.sp-stats b {
  color: var(--green-dark);
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1;
}

.sp-stats span {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
}

.sp-two-panel {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 24px;
  padding: clamp(42px, 5vw, 62px) 0;
}

.sp-two-panel article {
  padding: clamp(28px, 4vw, 44px);
  border: 1px solid rgba(23, 32, 28, 0.08);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 46px rgba(18, 28, 24, 0.06);
}

.sp-two-panel article.dark {
  color: #fff;
  background: #071613;
}

.sp-two-panel img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 8px;
}

.sp-two-panel ul,
.quote-side-card ul {
  padding-left: 18px;
  line-height: 1.8;
}

.sp-two-panel li::marker,
.quote-side-card li::marker {
  color: var(--green);
}

.sp-bottom-cta {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto auto;
  align-items: center;
  gap: 18px;
  padding: clamp(36px, 5vw, 58px) clamp(24px, 6vw, 72px);
  color: #fff;
  background:
    linear-gradient(90deg, rgba(3, 17, 13, 0.96), rgba(3, 17, 13, 0.78)),
    url("assets/final-cta-neighborhood.png") center/cover;
}

.sp-bottom-cta p {
  max-width: 420px;
  color: rgba(255, 255, 255, 0.78);
}

.quote-form-page {
  padding: clamp(30px, 4vw, 50px) clamp(20px, 5vw, 56px);
  background: #fff;
}

.quote-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 24px;
}

.quote-form-card,
.quote-side-card {
  padding: clamp(20px, 2.4vw, 30px);
}

.quote-form-card h2 {
  margin: 0 0 20px;
  font-size: clamp(24px, 2.3vw, 34px);
}

.quote-form-card label,
.quote-form-card legend {
  display: grid;
  gap: 7px;
  margin-bottom: 14px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
}

.quote-form-card input,
.quote-form-card select,
.quote-form-card textarea {
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(23, 32, 28, 0.18);
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  font: inherit;
  font-weight: 500;
}

.quote-form-card textarea {
  min-height: 104px;
  padding-top: 12px;
  resize: vertical;
}

.quote-form-card fieldset {
  margin: 18px 0;
  padding: 0;
  border: 0;
}

.quote-service-grid,
.quote-inputs {
  display: grid;
  gap: 12px;
}

.quote-service-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.quote-service-grid label {
  place-items: center;
  min-height: 102px;
  padding: 14px 8px;
  border: 1px solid rgba(23, 32, 28, 0.1);
  border-radius: 8px;
  text-align: center;
}

.quote-service-grid span {
  color: var(--green-dark);
  font-size: 26px;
}

.quote-service-grid input {
  width: 16px;
  min-height: 16px;
}

.quote-inputs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.quote-inputs.two {
  grid-template-columns: 0.7fr 1fr;
}

.quote-check {
  display: flex !important;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
  font-weight: 600 !important;
}

.quote-check input {
  width: 18px;
  min-height: 18px;
}

.quote-submit {
  width: 100%;
  min-height: 54px;
  margin-top: 12px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(135deg, #35a365, #16820d);
  font-size: 16px;
  font-weight: 900;
  text-transform: uppercase;
  cursor: pointer;
}

.secure-note {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

.quote-step-form {
  box-shadow: none;
  overflow: visible;
}

.quote-step-form h2 {
  margin: 0 0 6px;
  color: #0b1110;
  font-size: clamp(30px, 3.2vw, 50px) !important;
  line-height: 1.05 !important;
}

.quote-step-form h2 span {
  color: #58b947;
}

.quote-form-intro {
  margin: 0 0 22px;
  color: #4a5653;
  font-size: clamp(14px, 1vw, 17px) !important;
  font-weight: 700;
  line-height: 1.35 !important;
}

.quote-step {
  position: relative;
  margin: 0 0 18px;
  padding-left: 58px;
  border: 0;
}

.quote-step::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 42px;
  bottom: -14px;
  width: 1px;
  background: rgba(46, 137, 73, 0.14);
}

.quote-step-final::before {
  display: none;
}

.quote-step-title {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  margin: 0 0 10px;
  color: #0d1815;
  font-weight: 900;
}

.quote-step-title > b {
  display: grid;
  position: absolute;
  left: 0;
  top: 0;
  width: 38px;
  height: 38px;
  min-width: 38px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #63bd4f, #26943b);
  box-shadow: 0 10px 24px rgba(45, 146, 56, 0.22);
  font-size: 18px;
  line-height: 1;
}

.quote-step-title span {
  display: block;
}

.quote-step-title strong {
  display: inline;
  font-size: clamp(15px, 1vw, 18px);
}

.quote-step-title em,
.quote-step-title small {
  display: block;
  margin-top: 2px;
  color: #6d7774;
  font-size: clamp(12px, 0.82vw, 13px);
  font-style: normal;
  font-weight: 650;
  line-height: 1.35;
}

.quote-service-grid-featured {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.quote-service-grid-featured label {
  position: relative;
  display: grid;
  min-height: 124px;
  grid-template-rows: auto auto 1fr;
  align-items: start;
  gap: 8px;
  padding: 18px 46px 18px 20px;
  border: 2px solid rgba(21, 31, 27, 0.12);
  border-radius: 8px;
  text-align: left;
  background: #fff;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(20, 32, 28, 0.04);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.quote-service-grid-featured label:hover {
  border-color: rgba(64, 164, 70, 0.38);
  box-shadow: 0 16px 34px rgba(20, 32, 28, 0.08);
  transform: translateY(-1px);
}

.quote-service-grid-featured label.selected,
.quote-service-grid-featured label:has(input:checked) {
  border-color: rgba(64, 164, 70, 0.68);
  background: linear-gradient(135deg, rgba(88, 185, 71, 0.1), rgba(255, 255, 255, 0.92));
}

.quote-service-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: #51ad45;
}

.quote-service-icon svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.quote-service-grid-featured strong {
  color: #101817;
  font-size: clamp(16px, 1vw, 19px);
  line-height: 1.12;
}

.quote-service-grid-featured small {
  color: #4b5654;
  font-size: clamp(13px, 0.85vw, 14px);
  font-weight: 650;
  line-height: 1.35;
}

.quote-service-grid-featured input {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  top: 18px;
  right: 18px;
  display: grid;
  width: 24px;
  height: 24px;
  min-height: 24px;
  place-items: center;
  border: 2px solid rgba(21, 31, 27, 0.32);
  border-radius: 5px;
  background: #fff;
  cursor: pointer;
}

.quote-service-grid-featured input:checked {
  border-color: #5aba4f;
  background: #5aba4f;
}

.quote-service-grid-featured input:checked::after {
  content: none;
  display: none;
}

.quote-service-grid-featured input:checked::before {
  content: none;
  display: none;
}

.quote-field.with-icon,
.quote-contact-row label {
  position: relative;
}

.quote-field.with-icon input {
  min-height: 42px;
  padding-left: 42px;
  padding-right: 42px;
  font-size: 14px;
  font-weight: 650;
}

.quote-field.with-icon > span,
.quote-field.with-icon > i,
.quote-contact-row label > span {
  position: absolute;
  z-index: 1;
  color: #9aa3a0;
  font-style: normal;
  pointer-events: none;
}

.quote-field.with-icon > span {
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
}

.quote-field.with-icon > i {
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}

.quote-contact-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.quote-contact-row label {
  margin: 0;
}

.quote-contact-row label > span {
  left: 14px;
  bottom: 12px;
  font-size: 14px;
}

.quote-contact-row input {
  min-height: 42px;
  padding-left: 40px;
  font-size: 14px;
  font-weight: 650;
}

.quote-source-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.quote-source-row label {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 0;
  padding: 0 14px;
  border: 1px solid rgba(23, 32, 28, 0.14);
  border-radius: 8px;
  color: #5d6664;
  background: #fff;
  font-size: 13px;
  font-weight: 760;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
  overflow: hidden;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.quote-source-row label.selected,
.quote-source-row label:has(input:checked) {
  border-color: #319a42;
  color: #fff;
  background: linear-gradient(135deg, #62c755 0%, #2d9a43 100%);
  box-shadow: 0 10px 24px rgba(49, 154, 66, 0.18);
}

.quote-source-row label span,
.quote-source-row label strong {
  min-width: 0;
}

.quote-source-row input {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 1px;
  opacity: 0;
  pointer-events: none;
}

.quote-step-form textarea {
  min-height: 84px;
  font-size: 14px;
  font-weight: 650;
}

.quote-step-submit {
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 10px;
  border-radius: 8px;
  background: linear-gradient(135deg, #4fba43 0%, #238f34 100%);
  box-shadow: 0 16px 32px rgba(38, 145, 51, 0.18);
  font-size: clamp(16px, 1vw, 19px) !important;
  letter-spacing: 0;
  text-transform: uppercase;
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.quote-step-submit:hover {
  filter: saturate(1.04);
  box-shadow: 0 20px 40px rgba(38, 145, 51, 0.24);
  transform: translateY(-1px);
}

.quote-step-submit span {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  color: #43a742;
  background: #fff;
  font-size: 21px;
  line-height: 1;
}

@media (max-width: 900px) {
  .quote-step {
    padding-left: 46px;
  }

  .quote-step::before {
    left: 17px;
  }

  .quote-step-title > b {
    width: 34px;
    height: 34px;
    min-width: 34px;
    font-size: 18px;
  }

  .quote-service-grid-featured,
  .quote-contact-row {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .quote-source-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .quote-source-row {
    grid-template-columns: 1fr;
  }

  .quote-step-form h2 {
    font-size: clamp(34px, 10vw, 46px) !important;
  }
}

.quote-side {
  display: grid;
  gap: 18px;
  align-content: start;
}

.quote-side-card h3 {
  margin: 0 0 8px;
  font-size: 21px;
}

.quote-side-card p,
.quote-side-card li {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.quote-side-card strong {
  color: var(--ink);
}

/* About page */
.site-nav a.active {
  color: var(--green-dark);
  position: relative;
}

.site-nav a.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10px;
  height: 2px;
  background: var(--green);
}

.about-page {
  background: #fff;
}

.about-hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: clamp(420px, 42vw, 570px);
  margin-top: 82px;
  padding: clamp(56px, 7vw, 96px) clamp(24px, 6vw, 72px);
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.86) 38%, rgba(255, 255, 255, 0.24) 62%, rgba(255, 255, 255, 0) 100%),
    url("assets/about-hero-team-van.png") center right / cover;
}

.about-hero::after {
  content: none;
}

.about-hero-copy {
  position: relative;
  z-index: 1;
  max-width: 610px;
}

.about-hero h1 {
  margin: 0;
  font-size: clamp(42px, 5vw, 72px);
  line-height: 0.98;
}

.about-hero h1 span {
  color: #16820d;
}

.about-hero-copy > p:not(.sp-kicker) {
  max-width: 560px;
  margin: 22px 0 0;
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.62;
}

.about-phone {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 58px;
  color: var(--ink);
}

.about-phone svg {
  width: 46px;
  height: 46px;
  padding: 12px;
  color: var(--green);
  border-radius: 50%;
  background: rgba(46, 143, 91, 0.1);
}

.about-phone strong,
.about-phone small {
  display: block;
}

.about-phone strong {
  font-size: 20px;
}

.about-phone small {
  color: var(--muted);
  font-size: 13px;
}

.about-stats {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  width: min(var(--max), calc(100% - 40px));
  margin: -42px auto 0;
  padding: 28px 34px;
  border: 1px solid rgba(23, 32, 28, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 24px 70px rgba(18, 28, 24, 0.12);
}

.about-stats article {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 14px;
  align-items: center;
  padding: 0 24px;
  border-right: 1px solid rgba(23, 32, 28, 0.1);
}

.about-stats article:last-child {
  border-right: 0;
}

.about-stats b {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  color: var(--green-dark);
  font-size: 24px;
  border-radius: 50%;
  background: #eef7ee;
}

.about-stats strong {
  display: block;
  color: #16820d;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1;
}

.about-stats span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.about-story {
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(420px, 1.1fr);
  align-items: center;
  gap: clamp(34px, 6vw, 76px);
  padding: clamp(62px, 7vw, 96px) clamp(24px, 6vw, 72px) clamp(46px, 5vw, 72px);
}

.about-story > div {
  max-width: 560px;
}

.about-story h2,
.about-service-area h2 {
  margin: 0 0 22px;
  font-size: clamp(32px, 3.8vw, 52px);
  line-height: 1.04;
}

.about-story p {
  color: var(--ink);
  line-height: 1.65;
}

.about-story img {
  width: 100%;
  min-height: 380px;
  max-height: 500px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 22px 56px rgba(18, 28, 24, 0.13);
}

.about-service-icons {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 28px 0 22px;
  text-align: center;
}

.about-service-icons span {
  color: var(--ink);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.2;
  border-right: 1px solid rgba(23, 32, 28, 0.12);
}

.about-service-icons span:last-child {
  border-right: 0;
}

.about-team {
  padding: 46px clamp(20px, 5vw, 56px) 38px;
  background: linear-gradient(180deg, #f4faf4, #fff);
}

.about-gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  width: min(var(--max), calc(100% - 40px));
  margin: 0 auto;
}

.about-gallery img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(18, 28, 24, 0.08);
}

.about-team-points {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px 36px;
  margin-top: 24px;
  font-size: 14px;
  font-weight: 800;
}

.about-team-points span::before {
  content: "✓";
  margin-right: 8px;
  color: var(--green);
}

.about-trust {
  background: #fff;
}

.about-service-area {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: 30px;
  align-items: stretch;
  padding: clamp(46px, 6vw, 72px) clamp(24px, 6vw, 72px);
  background: linear-gradient(90deg, #f8fbf8, #eef6ee);
}

.about-service-area > div:first-child {
  align-self: center;
}

.about-service-area ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 22px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.about-service-area li {
  font-weight: 750;
  white-space: nowrap;
}

.about-service-area li::before {
  content: "✓";
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  color: #fff;
  font-size: 11px;
  border-radius: 50%;
  background: var(--green);
}

.about-map {
  position: relative;
  min-height: 280px;
  border-radius: 8px;
  overflow: hidden;
  background: url("assets/about-service-map-illustration.png") center / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(23, 32, 28, 0.08);
}

.about-map span {
  display: none;
}

.about-map span::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--green);
}

.about-final-cta {
  background:
    linear-gradient(90deg, rgba(3, 17, 13, 0.96), rgba(3, 17, 13, 0.58)),
    url("assets/final-cta-neighborhood.png") center / cover;
}

@media (max-width: 1080px) {
  .about-hero::after {
    opacity: 0.48;
    width: 56vw;
    height: 32vw;
  }

  .about-stats,
  .about-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-stats article {
    border-right: 0;
    border-bottom: 1px solid rgba(23, 32, 28, 0.1);
    padding: 18px 10px;
  }

  .about-stats article:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .about-story,
  .about-service-area {
    grid-template-columns: 1fr;
  }

  .about-story img {
    min-height: 320px;
  }
}

@media (max-width: 720px) {
  .about-hero {
    margin-top: 74px;
    min-height: 560px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.72)),
      url("assets/final-cta-neighborhood.png") center / cover;
  }

  .about-hero::after {
    display: none;
  }

  .about-stats,
  .about-gallery,
  .about-service-icons,
  .about-service-area ul {
    grid-template-columns: 1fr;
  }

  .about-stats {
    margin-top: 0;
    width: min(100% - 28px, var(--max));
    padding: 18px;
  }

  .about-stats article,
  .about-stats article:nth-last-child(-n + 2) {
    border-right: 0;
    border-bottom: 1px solid rgba(23, 32, 28, 0.1);
  }

  .about-stats article:last-child {
    border-bottom: 0;
  }

  .about-service-icons span {
    padding: 10px 0;
    border-right: 0;
    border-bottom: 1px solid rgba(23, 32, 28, 0.1);
  }

  .about-service-icons span:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 1080px) {
  .sp-card-grid.six,
  .sp-icon-grid.six,
  .sp-card-grid.four,
  .sp-icon-grid.four,
  .sp-results-row,
  .sp-mini-reviews,
  .sp-stats,
  .quote-service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sp-card-grid.three,
  .sp-icon-grid.three,
  .sp-process-five,
  .sp-process-five.four-step,
  .quote-layout,
  .quote-inputs,
  .quote-inputs.two {
    grid-template-columns: 1fr;
  }

  .sp-stats article {
    border-right: 0;
    border-bottom: 1px solid rgba(23, 32, 28, 0.1);
    padding: 18px 0;
  }

  .sp-stats article:last-child {
    border-bottom: 0;
  }

  .sp-split-visual,
  .sp-compare-table,
  .sp-two-panel,
  .sp-bottom-cta {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .sp-hero {
    margin-top: 74px;
    min-height: 520px;
  }

  .sp-hero::before {
    background:
      linear-gradient(180deg, rgba(4, 13, 10, 0.88), rgba(4, 13, 10, 0.52)),
      var(--sp-hero-image);
    background-size: cover;
  }

  .sp-hero-labels {
    position: relative;
    right: auto;
    bottom: auto;
  }

  .sp-card-grid.four,
  .sp-icon-grid.four,
  .sp-card-grid.six,
  .sp-icon-grid.six,
  .sp-results-row,
  .sp-mini-reviews,
  .sp-stats,
  .quote-service-grid {
    grid-template-columns: 1fr;
  }

  .sp-aging-band {
    align-items: flex-start;
    flex-direction: column;
  }

  .aging-flow {
    align-items: flex-start;
    flex-direction: column;
  }

  .sp-card-grid,
  .sp-icon-grid,
  .sp-mini-reviews,
  .sp-results-row,
  .sp-process-five,
  .sp-stats,
  .sp-two-panel,
  .quote-layout {
    width: min(100% - 28px, var(--max));
  }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
  letter-spacing: 0;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 30;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(18px, 3vw, 42px);
  padding: 13px clamp(18px, 4vw, 48px);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 34px rgba(16, 24, 22, 0.08);
  backdrop-filter: blur(16px);
  transition: background 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.site-header.scrolled {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 12px 30px rgba(16, 24, 22, 0.1);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 218px;
}

.brand-mark {
  width: 76px;
  height: 56px;
  object-fit: contain;
  border-radius: 3px;
  background: transparent;
}

.brand-text strong,
.brand-text small {
  display: block;
  line-height: 1.05;
}

.brand-text strong {
  font-size: 23px;
  font-weight: 860;
}

.brand-text strong span:first-child {
  color: #050505;
}

.brand-text strong span:last-child {
  color: var(--green);
}

.brand-text small {
  margin-top: 4px;
  color: #3e4843;
  font-size: 11px;
  font-weight: 820;
  text-transform: uppercase;
  opacity: 0.72;
}

.site-nav {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.9vw, 34px);
  font-size: 13.5px;
  font-weight: 760;
  color: #161c19;
}

.site-nav a {
  opacity: 0.84;
}

.site-nav a:hover {
  opacity: 1;
}

.header-cta {
  min-width: 120px;
  padding: 11px 18px;
  border-radius: var(--radius);
  background: var(--green);
  color: var(--white);
  font-size: 14px;
  font-weight: 750;
  text-align: center;
}

.header-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 18px;
}

.phone-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
  color: #1f2924;
  font-size: 15px;
  font-weight: 820;
}

.phone-link svg {
  width: 20px;
  height: 20px;
  color: var(--green);
  stroke-width: 2.4;
}

.nav-toggle {
  display: none;
}

.hero {
  position: relative;
  min-height: calc(100svh - 82px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--charcoal);
  user-select: none;
  --compare: 50%;
}

.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  z-index: 4;
  height: clamp(120px, 18vh, 220px);
  background: linear-gradient(180deg, rgba(7, 17, 19, 0), rgba(7, 17, 19, 0.38) 58%, rgba(7, 17, 19, 0.86) 100%);
  pointer-events: none;
}

.hero-compare,
.compare-image,
.compare-clean {
  position: absolute;
  inset: 0;
}

.hero-compare {
  overflow: hidden;
  user-select: none;
  cursor: ew-resize;
  touch-action: none;
}

.compare-drag-layer {
  position: absolute;
  inset: 0;
  z-index: 7;
  cursor: ew-resize;
  background: transparent;
}

.compare-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  user-select: none;
  pointer-events: none;
}

.compare-clean {
  z-index: 2;
  clip-path: inset(0 0 0 var(--compare));
}

.compare-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--compare);
  z-index: 10;
  width: 96px;
  background: transparent;
  transform: translateX(-50%);
  cursor: ew-resize;
  pointer-events: auto;
}

.compare-line::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 0 1px rgba(16, 24, 22, 0.2), 0 0 30px rgba(0, 0, 0, 0.35);
  transform: translateX(-50%);
  pointer-events: none;
}

.compare-line span {
  position: absolute;
  top: 52%;
  left: 50%;
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, 0.94);
  border-radius: 50%;
  background: rgba(20, 31, 27, 0.88);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.compare-line span::before,
.compare-line span::after {
  content: "";
  width: 9px;
  height: 9px;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
}

.compare-line span::before {
  transform: rotate(-45deg);
}

.compare-line span::after {
  transform: rotate(135deg);
}

.compare-label {
  position: absolute;
  z-index: 6;
  bottom: clamp(22px, 4vw, 42px);
  padding: 9px 13px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(12, 21, 19, 0.58);
  color: rgba(255, 255, 255, 0.88);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
}

.growth-markers {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.growth-marker {
  position: absolute;
  padding: 9px 15px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 999px;
  background: rgba(16, 24, 22, 0.5);
  color: rgba(255, 255, 255, 0.94);
  font-size: clamp(13px, 1.4vw, 18px);
  font-weight: 850;
  white-space: nowrap;
  text-transform: uppercase;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.96);
  transition: opacity 160ms ease, transform 160ms ease;
  backdrop-filter: blur(10px);
}

.marker-5 {
  left: 61%;
  top: 41%;
  opacity: var(--marker-5-opacity, 0);
}

.marker-10 {
  left: 77%;
  top: 41%;
  opacity: var(--marker-10-opacity, 0);
}

.marker-15 {
  left: 93%;
  top: 41%;
  opacity: var(--marker-15-opacity, 0);
}

.hero[style*="--marker-5-opacity: 1"] .marker-5,
.hero[style*="--marker-10-opacity: 1"] .marker-10,
.hero[style*="--marker-15-opacity: 1"] .marker-15 {
  transform: translate(-50%, -50%) scale(1);
}

.clean-message {
  position: absolute;
  left: 73%;
  top: 48%;
  z-index: 3;
  display: grid;
  gap: 18px;
  width: min(700px, 34vw);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff;
  opacity: var(--clean-message-opacity, 0);
  pointer-events: none;
  text-align: left;
  transform: translate(-50%, -50%);
  transition: opacity 180ms ease;
}

.clean-message strong,
.clean-message span {
  display: block;
}

.clean-message strong {
  font-size: clamp(36px, 3.6vw, 60px);
  line-height: 1.04;
  font-weight: 880;
  white-space: nowrap;
}

.clean-message span {
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(13px, 1.2vw, 18px);
  font-weight: 400;
  line-height: 1.28;
}

.before-label {
  left: clamp(18px, 4vw, 48px);
}

.after-label {
  right: clamp(18px, 4vw, 48px);
}

.compare-range {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  pointer-events: none;
  appearance: none;
}

.compare-range::-webkit-slider-thumb {
  width: 54px;
  height: 100svh;
  appearance: none;
}

.compare-range::-moz-range-thumb {
  width: 54px;
  height: 100svh;
  border: 0;
  background: transparent;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.68) 34%, rgba(255, 255, 255, 0.18) 62%, transparent 100%),
    linear-gradient(0deg, rgba(255, 255, 255, 0.18), transparent 42%);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 9;
  width: min(540px, calc(100% - 40px));
  margin-left: clamp(20px, 7vw, 92px);
  padding-top: clamp(112px, 18vh, 180px);
  color: var(--ink);
}

.hero-kicker {
  margin: 0 0 20px;
  color: var(--green);
  font-size: clamp(14px, 1.15vw, 19px);
  font-weight: 850;
  line-height: 1;
  text-transform: uppercase;
}

.hero-system-title {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.2vw, 18px);
  max-width: none;
  margin: 0 0 24px;
  color: var(--ink);
  font-size: clamp(34px, 3.3vw, 52px);
  font-weight: 870;
  line-height: 1;
  white-space: nowrap;
}

.hero-system-title span:nth-of-type(2),
.hero-system-title b {
  color: #4f8d3d;
}

.hero-system-title b {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: currentColor;
}

.hero-system-title::after {
  content: "";
  position: absolute;
  left: 0;
  top: calc(clamp(112px, 18vh, 180px) + 108px);
  width: 46px;
  height: 2px;
  background: #4f8d3d;
}

.hero-system-copy {
  max-width: 430px;
  margin: 0 0 34px;
  color: #25302b;
  font-size: clamp(15px, 1.25vw, 19px);
  line-height: 1.58;
  font-weight: 510;
}

.hero-service-icons {
  display: grid;
  grid-template-columns: repeat(4, minmax(80px, 1fr));
  max-width: 520px;
  margin-bottom: 36px;
}

.hero-service-icons span {
  display: grid;
  justify-items: center;
  gap: 8px;
  min-height: 86px;
  padding: 0 13px;
  text-align: center;
  border-right: 1px solid rgba(23, 32, 28, 0.15);
}

.hero-service-icons span:last-child {
  border-right: 0;
}

.hero-service-icons svg {
  width: 38px;
  height: 38px;
  color: #4f8d3d;
  stroke-width: 1.7;
}

.hero-service-icons strong {
  color: var(--ink);
  font-size: clamp(13px, 1vw, 16px);
  line-height: 1.08;
  font-weight: 780;
}

.eyebrow {
  margin: 0 0 14px;
  color: var(--green);
  font-size: 13px;
  font-weight: 850;
  text-transform: uppercase;
}

.dark .eyebrow,
.partner .eyebrow {
  color: #78d99e;
}

.hero .eyebrow {
  color: var(--green-dark);
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  max-width: 690px;
  margin-bottom: 22px;
  font-size: clamp(48px, 7vw, 86px);
  line-height: 0.98;
  font-weight: 840;
}

h2 {
  margin-bottom: 16px;
  font-size: clamp(32px, 4.5vw, 58px);
  line-height: 1.02;
  font-weight: 820;
}

h3 {
  margin-bottom: 10px;
  font-size: 22px;
  line-height: 1.16;
}

p {
  color: var(--muted);
  line-height: 1.7;
}

.hero-copy {
  max-width: 610px;
  color: #25302b;
  font-size: 18px;
}

.hero-actions,
.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero-actions {
  margin-top: 0;
  user-select: none;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-weight: 800;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.btn.primary {
  background: var(--green);
  color: var(--white);
}

.btn.secondary {
  border-color: rgba(23, 32, 28, 0.32);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.34);
}

.btn.secondary.light {
  border-color: rgba(255, 255, 255, 0.64);
  color: var(--white);
  background: rgba(255, 255, 255, 0.04);
}

.hero-stats {
  margin-top: 44px;
  max-width: 700px;
}

.hero-stats span {
  flex: 1 1 185px;
  min-height: 72px;
  padding: 16px;
  border: 1px solid rgba(23, 32, 28, 0.16);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.62);
  color: #4d5a54;
  line-height: 1.35;
  backdrop-filter: blur(12px);
}

.hero-stats svg {
  display: block;
  margin-bottom: 12px;
  color: var(--green);
}

.hero-stats strong {
  display: block;
  color: var(--ink);
}

.overview-strip {
  width: 100%;
  margin: 0;
  padding: 0 max(20px, calc((100vw - var(--max)) / 2));
  background: #111b1e;
}

.trust-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  min-height: 104px;
  border-radius: 0;
  overflow: hidden;
  background: #111b1e;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.trust-strip div {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 58px;
  padding: 22px 28px;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.trust-strip div:last-child {
  border-right: 0;
}

.trust-strip svg,
.card-icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  color: var(--green);
}

.trust-strip span {
  display: grid;
  gap: 7px;
}

.trust-strip strong {
  color: rgba(255, 255, 255, 0.92);
  font-size: 15px;
  line-height: 1.1;
  font-weight: 780;
}

.trust-strip small {
  color: rgba(255, 255, 255, 0.58);
  font-size: 13px;
  line-height: 1.25;
}

.system-transition {
  position: relative;
  z-index: 12;
  height: clamp(170px, 24vw, 260px);
  margin-top: clamp(-110px, -10vw, -70px);
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 46%, rgba(113, 255, 93, 0.52) 0 1px, transparent 2px) 0 0 / 46px 18px,
    radial-gradient(ellipse at 50% 54%, rgba(93, 244, 88, 0.35), transparent 24%),
    linear-gradient(180deg, rgba(7, 17, 19, 0), rgba(7, 17, 19, 0.74) 64%, #071113 100%);
  pointer-events: none;
}

.system-transition::before,
.system-transition::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 150vw;
  pointer-events: none;
}

.system-transition::before {
  top: 30%;
  height: 110px;
  background:
    linear-gradient(90deg, transparent 0%, rgba(100, 255, 88, 0.12) 30%, rgba(158, 255, 118, 0.98) 50%, rgba(100, 255, 88, 0.12) 70%, transparent 100%),
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(107, 255, 100, 0.2) 18px 19px, transparent 19px 42px);
  border-top: 1px solid rgba(134, 255, 104, 0.24);
  border-bottom: 1px solid rgba(134, 255, 104, 0.16);
  box-shadow: 0 0 22px rgba(99, 255, 91, 0.58), 0 0 72px rgba(60, 220, 75, 0.3);
  transform: translateX(-50%) rotate(-2.7deg);
  animation: transition-wave 6s linear infinite;
}

.system-transition::after {
  top: 44%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(104, 255, 94, 0.35), #b7ff98 50%, rgba(104, 255, 94, 0.35), transparent);
  box-shadow: 0 0 12px rgba(126, 255, 102, 0.92), 0 0 34px rgba(126, 255, 102, 0.48);
  transform: translateX(-50%) rotate(-2.7deg);
}

.transition-arrow {
  position: absolute;
  left: 50%;
  top: 34%;
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 1px solid rgba(143, 255, 115, 0.7);
  border-radius: 50%;
  color: #9cff7c;
  background: rgba(8, 24, 18, 0.72);
  box-shadow: inset 0 0 18px rgba(113, 255, 93, 0.2), 0 0 28px rgba(113, 255, 93, 0.48);
  transform: translate(-50%, -50%);
}

.transition-arrow svg {
  width: 26px;
  height: 26px;
  transform: rotate(135deg);
}

.services-system {
  position: relative;
  overflow: hidden;
  margin-top: 0;
  padding: clamp(58px, 7vw, 92px) max(20px, calc((100vw - var(--max)) / 2)) clamp(74px, 8vw, 110px);
  color: var(--white);
  background:
    radial-gradient(circle at 50% 54%, rgba(55, 151, 88, 0.28), transparent 28%),
    radial-gradient(circle at 50% 58%, rgba(72, 180, 105, 0.1), transparent 46%),
    linear-gradient(180deg, #071113, #081315 62%, #071013);
  isolation: isolate;
}

.services-system::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(85, 174, 104, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(85, 174, 104, 0.045) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(circle at center, black, transparent 74%);
  pointer-events: none;
}

.services-system::after {
  content: "";
  position: absolute;
  inset: 10% -10%;
  z-index: 0;
  background:
    radial-gradient(circle at 16% 30%, rgba(126, 240, 122, 0.9) 0 1px, transparent 2px),
    radial-gradient(circle at 78% 34%, rgba(126, 240, 122, 0.75) 0 1px, transparent 2px),
    radial-gradient(circle at 88% 66%, rgba(126, 240, 122, 0.8) 0 1px, transparent 2px),
    radial-gradient(circle at 28% 74%, rgba(126, 240, 122, 0.65) 0 1px, transparent 2px);
  opacity: 0.38;
  filter: drop-shadow(0 0 8px rgba(126, 240, 122, 0.7));
  animation: system-stars 7s linear infinite;
  pointer-events: none;
}

.system-heading {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto 42px;
  text-align: center;
}

.system-heading .eyebrow,
.process-heading .eyebrow,
.science-copy .eyebrow {
  margin-bottom: 12px;
  color: #77c85d;
}

.system-heading h2,
.process-heading h2 {
  margin-bottom: 18px;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.12;
}

.system-heading p {
  max-width: 520px;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.65;
}

.system-map {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr minmax(320px, 560px) 1fr;
  grid-template-rows: repeat(2, minmax(170px, auto));
  gap: clamp(24px, 4vw, 54px);
  align-items: center;
  min-height: 480px;
}

.system-card {
  position: relative;
  min-height: 172px;
  padding: 24px 26px;
  border: 1px solid rgba(94, 190, 104, 0.22);
  background: linear-gradient(135deg, rgba(24, 44, 38, 0.68), rgba(6, 19, 18, 0.34));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02), 0 20px 60px rgba(0, 0, 0, 0.16);
  transition: opacity 650ms ease, transform 650ms ease, border-color 300ms ease, box-shadow 300ms ease;
}

.motion-ready .system-card {
  opacity: 0;
  transform: translateY(18px);
}

.system-card::before,
.system-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.system-card::before {
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(126, 240, 122, 0.34), transparent);
  opacity: 0;
  transform: translateX(-78%);
}

.system-card::after {
  top: 49px;
  width: clamp(44px, 7vw, 96px);
  height: 1px;
  background: linear-gradient(90deg, rgba(126, 240, 122, 0.75), transparent);
  filter: drop-shadow(0 0 7px rgba(126, 240, 122, 0.75));
  opacity: 0.72;
}

.card-cleaning::after,
.card-maintain::after {
  right: -80px;
}

.card-relife::after,
.card-exterior::after {
  left: -80px;
  transform: rotate(180deg);
}

.motion-ready .services-system.is-visible .system-card {
  opacity: 1;
  transform: translateY(0);
}

.services-system.is-visible .card-cleaning {
  transition-delay: 120ms;
}

.services-system.is-visible .card-relife {
  transition-delay: 260ms;
}

.services-system.is-visible .card-maintain {
  transition-delay: 400ms;
}

.services-system.is-visible .card-exterior {
  transition-delay: 540ms;
}

.services-system.is-visible .system-card::before {
  animation: system-card-sweep 2.8s ease-in-out infinite;
  animation-delay: inherit;
}

.services-system.is-visible .card-relife::before,
.services-system.is-visible .card-exterior::before {
  animation-name: system-card-sweep-reverse;
}

.system-card:hover {
  border-color: rgba(126, 240, 122, 0.62);
  box-shadow: inset 0 0 0 1px rgba(126, 240, 122, 0.16), 0 24px 70px rgba(60, 210, 91, 0.16);
}

.system-card svg {
  width: 42px;
  height: 42px;
  margin-bottom: 12px;
  color: #79d46b;
  filter: drop-shadow(0 0 10px rgba(121, 212, 107, 0.42));
}

.system-card span {
  position: absolute;
  top: 26px;
  right: 26px;
  color: rgba(119, 200, 93, 0.68);
  font-weight: 800;
}

.system-card h3 {
  margin-bottom: 12px;
  color: #7bd563;
  font-size: 17px;
  text-transform: uppercase;
}

.system-card p {
  max-width: 240px;
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.55;
}

.card-cleaning,
.card-maintain {
  grid-column: 1;
}

.card-relife,
.card-exterior {
  grid-column: 3;
}

.system-orbit {
  position: relative;
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  display: grid;
  place-items: center;
  min-height: 420px;
  perspective: 900px;
}

.orbit-halo,
.orbit-scan {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  pointer-events: none;
}

.orbit-halo {
  border: 1px solid rgba(126, 240, 122, 0.26);
  box-shadow:
    inset 0 0 28px rgba(126, 240, 122, 0.18),
    0 0 42px rgba(72, 180, 105, 0.16);
  transform: rotateX(66deg);
  animation: orbit-halo 12s linear infinite;
}

.orbit-halo::before,
.orbit-halo::after {
  content: "";
  position: absolute;
  inset: 12%;
  border: 1px dashed rgba(126, 240, 122, 0.35);
  border-radius: inherit;
}

.orbit-halo::after {
  inset: 26%;
  border-style: solid;
  opacity: 0.45;
}

.orbit-scan {
  background: conic-gradient(from 12deg, transparent 0 68%, rgba(126, 240, 122, 0.28), transparent 78% 100%);
  mix-blend-mode: screen;
  opacity: 0.55;
  transform: rotateX(66deg);
  animation: orbit-scan 6.6s linear infinite;
}

.system-orbit svg {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 52%;
  width: min(100%, 560px);
  height: auto;
  overflow: visible;
  color: #7ef07a;
  filter: drop-shadow(0 0 9px rgba(91, 231, 100, 0.28));
  transform: translate(-50%, -50%);
}

.system-orbit ellipse,
.system-orbit circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
}

.orbit-house-image {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 52%;
  width: min(82%, 460px);
  max-width: none;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 16px rgba(126, 240, 122, 0.62)) drop-shadow(0 0 34px rgba(72, 180, 105, 0.28));
  mix-blend-mode: screen;
  pointer-events: none;
}

.motion-ready .orbit-house-image {
  opacity: 0;
  transform: translate(-50%, calc(-50% + 16px)) scale(0.94);
}

.motion-ready .services-system.is-visible .orbit-house-image {
  animation: house-rise 900ms cubic-bezier(0.2, 0.85, 0.2, 1) 260ms forwards, house-glow 3s ease-in-out 1.15s infinite;
}

.orbit-rings {
  transform-box: fill-box;
  transform-origin: center;
}

.orbit-rings ellipse {
  opacity: 0.42;
  stroke-dasharray: 12 18;
  stroke-width: 0.9;
}

.orbit-rings ellipse:nth-child(2) {
  opacity: 0.26;
  animation: orbit-drift 9s linear infinite reverse;
}

.orbit-rings ellipse:nth-child(3) {
  display: none;
}

.orbit-points circle {
  fill: currentColor;
  stroke: rgba(218, 255, 210, 0.95);
  stroke-width: 1;
  filter: drop-shadow(0 0 6px rgba(126, 240, 122, 0.68));
  opacity: 0.32;
  transform-box: fill-box;
  transform-origin: center;
}

.services-system.is-visible .orbit-points circle {
  animation: orbit-pulse 2.4s ease-in-out infinite;
}

.services-system.is-visible .orbit-points circle:nth-child(2) {
  animation-delay: 220ms;
}

.services-system.is-visible .orbit-points circle:nth-child(3) {
  animation-delay: 440ms;
}

.services-system.is-visible .orbit-points circle:nth-child(4) {
  animation-delay: 660ms;
}

.services-system.is-visible .orbit-points circle:nth-child(5) {
  animation-delay: 880ms;
}

.core-services-intro {
  position: relative;
  display: grid;
  grid-template-columns: minmax(360px, 0.44fr) minmax(0, 0.56fr);
  min-height: clamp(430px, 44vw, 590px);
  overflow: hidden;
  background:
    linear-gradient(90deg, #f8fbfa 0%, rgba(248, 251, 250, 0.98) 36%, rgba(248, 251, 250, 0.4) 57%, rgba(248, 251, 250, 0) 100%),
    radial-gradient(circle at 67% 41%, rgba(103, 221, 127, 0.22), transparent 27%),
    linear-gradient(180deg, #f6fbfc, #f5f8f4);
}

.core-services-copy {
  position: relative;
  z-index: 2;
  align-self: center;
  width: min(520px, calc(100% - 40px));
  margin-left: max(20px, calc((100vw - var(--max)) / 2));
  padding: clamp(66px, 7vw, 96px) 0;
}

.core-services-copy h2 {
  margin-bottom: 22px;
  color: #081211;
  font-size: clamp(44px, 5.7vw, 76px);
  line-height: 0.96;
  letter-spacing: 0;
}

.core-services-copy h2 span {
  color: #4f963e;
}

.core-services-copy > p:not(.eyebrow) {
  max-width: 390px;
  margin: 0;
  color: #17231f;
  font-size: 17px;
  line-height: 1.58;
}

.core-services-visual {
  position: absolute;
  inset: 0 0 0 36%;
  z-index: 1;
}

.core-services-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 66% 34%, rgba(102, 236, 124, 0.36), transparent 2px),
    radial-gradient(circle at 84% 68%, rgba(102, 236, 124, 0.44), transparent 3px),
    radial-gradient(circle at 54% 76%, rgba(102, 236, 124, 0.44), transparent 3px);
  filter: drop-shadow(0 0 10px rgba(68, 220, 90, 0.6));
  pointer-events: none;
}

.core-services-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(248, 251, 250, 0.38), transparent 24%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 38%);
  pointer-events: none;
}

.core-services-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 54% 50%;
}

.energy-line {
  position: absolute;
  left: 14%;
  right: -10%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(95, 236, 109, 0.2), rgba(152, 255, 154, 0.92), transparent);
  box-shadow: 0 0 18px rgba(92, 230, 110, 0.78), 0 0 48px rgba(92, 230, 110, 0.28);
  transform-origin: left center;
}

.line-one {
  top: 46%;
  transform: rotate(-13deg);
}

.line-two {
  top: 64%;
  transform: rotate(7deg);
}

.energy-dot {
  position: absolute;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #92ff8d;
  box-shadow: 0 0 18px rgba(99, 255, 102, 0.96);
}

.dot-one {
  top: 34%;
  left: 45%;
}

.dot-two {
  top: 69%;
  left: 74%;
}

.dot-three {
  top: 62%;
  left: 92%;
}

.service-showcase {
  position: relative;
  min-height: clamp(530px, 49vw, 650px);
  overflow: hidden;
  color: #091210;
  background: #f7faf6;
  border-top: 1px solid rgba(15, 34, 29, 0.12);
}

.service-showcase::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.service-copy-panel {
  position: relative;
  z-index: 3;
  display: grid;
  align-content: center;
  width: min(470px, calc(100% - 40px));
  min-height: inherit;
  margin-left: max(20px, calc((100vw - var(--max)) / 2));
  padding: clamp(48px, 5vw, 76px) 0;
}

.service-copy-panel.dark {
  color: var(--white);
}

.service-index {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  color: #4f9a3d;
  font-size: clamp(24px, 2.8vw, 32px);
  line-height: 1;
  font-weight: 890;
}

.service-index::after {
  content: "";
  width: 70px;
  height: 2px;
  background: currentColor;
  opacity: 0.78;
}

.service-copy-panel h2 {
  margin-bottom: 18px;
  color: inherit;
  font-size: clamp(38px, 4.4vw, 60px);
  line-height: 0.98;
  letter-spacing: 0;
}

.service-copy-panel h2 span {
  color: #65bd4f;
}

.service-copy-panel > p:not(.service-index) {
  max-width: 360px;
  margin-bottom: 34px;
  color: #18241f;
  font-size: 16px;
  line-height: 1.48;
}

.service-copy-panel.dark > p:not(.service-index) {
  color: rgba(255, 255, 255, 0.84);
}

.service-benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 32px);
  max-width: 470px;
  margin-bottom: 34px;
}

.service-benefits article {
  display: grid;
  justify-items: center;
  text-align: center;
}

.service-benefits svg {
  width: 60px;
  height: 60px;
  margin-bottom: 13px;
  padding: 14px;
  border: 1px solid rgba(79, 154, 61, 0.18);
  border-radius: 50%;
  color: #4f9a3d;
  background: rgba(79, 154, 61, 0.06);
  stroke-width: 1.7;
}

.service-copy-panel.dark .service-benefits svg {
  border-color: rgba(103, 214, 88, 0.34);
  color: #79e365;
  background: rgba(103, 214, 88, 0.08);
  box-shadow: 0 0 20px rgba(103, 214, 88, 0.14);
}

.service-benefits h3 {
  margin-bottom: 7px;
  font-size: 14.5px;
  line-height: 1.12;
}

.service-benefits p {
  margin: 0;
  color: #33413b;
  font-size: 11.5px;
  line-height: 1.4;
}

.service-copy-panel.dark .service-benefits p {
  color: rgba(255, 255, 255, 0.72);
}

.service-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  justify-self: start;
  width: 325px;
  max-width: 100%;
  min-height: 46px;
  padding: 0 20px;
  border: 1px solid rgba(79, 154, 61, 0.72);
  border-radius: 5px;
  color: #3f8633;
  font-size: 13px;
  font-weight: 840;
}

.service-link.dark {
  border-color: rgba(103, 214, 88, 0.72);
  color: #77df60;
  background: rgba(8, 24, 18, 0.38);
}

.service-link span {
  font-size: 24px;
  line-height: 1;
}

.service-cleaning {
  display: grid;
  grid-template-columns: minmax(380px, 0.42fr) minmax(0, 0.58fr);
  border-top: 1px solid rgba(13, 32, 26, 0.12);
  background: #f7faf6;
}

.service-cleaning::before {
  background:
    radial-gradient(circle at 35% 50%, rgba(255, 255, 255, 0.82), transparent 33%),
    linear-gradient(90deg, #f7faf6 0%, rgba(247, 250, 246, 0.99) 36%, rgba(247, 250, 246, 0.6) 49%, transparent 63%);
}

.cleaning-compare {
  position: relative;
  z-index: 2;
  grid-column: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: inherit;
}

.cleaning-compare figure,
.exterior-gallery figure {
  position: relative;
  height: 100%;
  min-height: inherit;
  min-width: 0;
  margin: 0;
  overflow: hidden;
}

.cleaning-compare img,
.exterior-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

.cleaning-compare .before {
  border-left: 1px solid rgba(255, 255, 255, 0.78);
}

.cleaning-compare .after {
  border-left: 2px solid rgba(255, 255, 255, 0.92);
}

.cleaning-compare figcaption {
  position: absolute;
  right: 22px;
  bottom: 26px;
  padding: 7px 12px;
  border-radius: 3px;
  color: var(--white);
  background: rgba(8, 19, 17, 0.86);
  font-size: 12px;
  font-weight: 880;
  text-transform: uppercase;
}

.cleaning-compare .after figcaption {
  background: #55a53d;
}

.compare-control {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  display: grid;
  width: 62px;
  height: 62px;
  place-items: center;
  border: 3px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  color: var(--white);
  background: rgba(7, 17, 19, 0.9);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.26);
  font-size: 26px;
  line-height: 1;
  transform: translate(-50%, -50%);
}

.service-relife {
  background:
    linear-gradient(90deg, rgba(3, 23, 20, 0.99) 0%, rgba(3, 23, 20, 0.96) 35%, rgba(3, 23, 20, 0.54) 53%, rgba(3, 23, 20, 0.08) 82%),
    radial-gradient(circle at 72% 42%, rgba(70, 255, 103, 0.28), transparent 24%),
    url("assets/service-relife-treatment.png") center right / cover;
}

.service-relife::before {
  background:
    radial-gradient(circle at 77% 42%, rgba(128, 255, 162, 0.24), transparent 16%),
    linear-gradient(105deg, transparent 43%, rgba(110, 255, 104, 0.38) 47%, rgba(110, 255, 104, 0.07) 62%, transparent 69%),
    repeating-linear-gradient(164deg, transparent 0 50px, rgba(103, 255, 105, 0.14) 50px 52px, transparent 52px 102px);
  mix-blend-mode: screen;
}

.service-maintenance {
  background:
    linear-gradient(90deg, #f7faf6 0%, rgba(247, 250, 246, 0.98) 35%, rgba(247, 250, 246, 0.64) 49%, rgba(247, 250, 246, 0.1) 68%),
    url("assets/service-maintenance-tech.png") center right / cover;
}

.inspection-card {
  position: absolute;
  z-index: 3;
  right: max(62px, calc((100vw - var(--max)) / 2 + 24px));
  top: 50%;
  width: min(335px, calc(100% - 48px));
  padding: 30px 28px;
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 24px 66px rgba(11, 22, 18, 0.22);
  backdrop-filter: blur(16px);
  transform: translateY(-50%);
}

.inspection-card h3 {
  margin-bottom: 18px;
  font-size: 16px;
  text-align: center;
}

.inspection-card p {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 11px 0;
  border-bottom: 1px solid rgba(30, 62, 42, 0.14);
  color: #34423c;
  font-size: 13px;
  line-height: 1;
}

.inspection-card p::before {
  content: "✓";
  display: grid;
  width: 16px;
  height: 16px;
  place-items: center;
  border: 1px solid #4f9a3d;
  border-radius: 50%;
  color: #4f9a3d;
  font-size: 11px;
  line-height: 1;
}

.inspection-card p:last-child {
  border-bottom: 0;
}

.inspection-card strong {
  color: #4f9a3d;
  font-size: 12px;
}

.service-exterior {
  display: grid;
  grid-template-columns: minmax(380px, 0.39fr) minmax(0, 0.61fr);
  min-height: clamp(470px, 42vw, 575px);
  color: var(--white);
  background: #071113;
}

.service-exterior::before {
  background:
    radial-gradient(circle at 27% 48%, rgba(42, 112, 77, 0.22), transparent 35%),
    linear-gradient(90deg, rgba(3, 23, 20, 0.99) 0%, rgba(3, 23, 20, 0.96) 37%, rgba(3, 23, 20, 0.38) 55%, transparent 100%);
}

.exterior-gallery {
  position: relative;
  z-index: 2;
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  min-height: inherit;
}

.exterior-gallery figure {
  border-left: 2px solid rgba(255, 255, 255, 0.76);
}

.exterior-gallery figure::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 35%, rgba(6, 17, 15, 0.36)),
    linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.38) 49%, transparent 61%);
  mix-blend-mode: screen;
}

.exterior-gallery figure:nth-child(1) img {
  object-position: 40% center;
}

.exterior-gallery figure:nth-child(2) img {
  object-position: 45% center;
}

.exterior-gallery figure:nth-child(3) img {
  object-position: 64% center;
}

.exterior-gallery figcaption {
  position: absolute;
  left: 50%;
  bottom: 38px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 190px;
  justify-content: center;
  padding: 15px 17px;
  border-radius: 6px;
  color: #18231f;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.2);
  font-size: 14px;
  font-weight: 850;
  transform: translateX(-50%);
}

.exterior-gallery figcaption svg {
  width: 22px;
  height: 22px;
  color: #4f9a3d;
}

.final-cta {
  position: relative;
  display: grid;
  justify-items: center;
  overflow: hidden;
  padding: 30px 20px 36px;
  text-align: center;
  color: var(--white);
  background:
    linear-gradient(180deg, rgba(8, 22, 20, 0.58), rgba(7, 17, 19, 0.94)),
    url("assets/final-cta-neighborhood.png") center 58% / cover;
}

.final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center top, rgba(115, 208, 113, 0.12), transparent 46%);
  pointer-events: none;
}

.final-cta > * {
  position: relative;
  z-index: 1;
}

.final-cta img {
  width: 64px;
  height: 64px;
  margin-bottom: 6px;
  object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.28));
}

.final-cta h2 {
  margin-bottom: 6px;
  font-size: clamp(30px, 4vw, 48px);
}

.final-cta p {
  margin-bottom: 18px;
  color: rgba(255, 255, 255, 0.86);
}

/* Reference-match layout for the post-hero service story. */
#core-services,
#roof-cleaning-service,
#roof-relife-service,
#roof-maintenance-service,
#exterior-cleaning-service,
#quote {
  --ref-left: max(54px, calc((100vw - 1420px) / 2 + 80px));
}

.core-services-intro {
  grid-template-columns: 41.5% 58.5%;
  min-height: clamp(250px, 26.6vw, 390px);
}

.core-services-copy {
  width: min(425px, calc(100% - 88px));
  margin-left: var(--ref-left);
  padding: 0;
}

.core-services-copy .eyebrow {
  margin-bottom: 14px;
  font-size: clamp(11px, 0.78vw, 13px);
  line-height: 1;
}

.core-services-copy h2 {
  margin-bottom: clamp(14px, 1.45vw, 24px);
  font-size: clamp(38px, 4.1vw, 64px);
  line-height: 0.96;
  font-weight: 880;
}

.core-services-copy > p:not(.eyebrow) {
  max-width: 338px;
  font-size: clamp(14px, 1vw, 18px);
  line-height: 1.48;
}

.core-services-visual {
  inset: 0;
  left: 41.5%;
}

.core-services-visual img {
  object-position: 58% 44%;
}

.energy-line {
  left: 2%;
  right: -4%;
  height: 1.5px;
}

.line-one {
  top: 42%;
  transform: rotate(-12deg);
}

.line-two {
  top: 63%;
  transform: rotate(6deg);
}

.dot-one {
  top: 25%;
  left: 42%;
}

.dot-two {
  top: 72%;
  left: 73%;
}

.dot-three {
  top: 62%;
  left: 92%;
}

.service-showcase {
  min-height: clamp(315px, 34vw, 560px);
}

.service-copy-panel {
  width: min(390px, calc(41.5vw - 92px));
  margin-left: var(--ref-left);
  padding: 0;
}

.service-index {
  gap: 14px;
  margin-bottom: clamp(10px, 1vw, 16px);
  font-size: clamp(24px, 2.05vw, 34px);
}

.service-index::after {
  width: clamp(50px, 4.5vw, 74px);
}

.service-copy-panel h2 {
  margin-bottom: clamp(12px, 1.15vw, 18px);
  font-size: clamp(30px, 3vw, 50px);
  line-height: 1;
  font-weight: 870;
}

.service-copy-panel > p:not(.service-index) {
  max-width: 318px;
  margin-bottom: clamp(22px, 2.3vw, 34px);
  font-size: clamp(13px, 0.94vw, 16px);
  line-height: 1.42;
}

.service-benefits {
  max-width: 390px;
  gap: clamp(12px, 2.1vw, 34px);
  margin-bottom: clamp(22px, 2vw, 32px);
}

.service-benefits svg {
  width: clamp(50px, 4.15vw, 64px);
  height: clamp(50px, 4.15vw, 64px);
  margin-bottom: 12px;
  padding: clamp(11px, 0.95vw, 14px);
}

.service-benefits h3 {
  margin-bottom: 6px;
  font-size: clamp(11px, 0.92vw, 14px);
  line-height: 1.08;
}

.service-benefits p {
  font-size: clamp(9px, 0.72vw, 11px);
  line-height: 1.35;
}

.service-link {
  width: min(330px, 100%);
  min-height: clamp(38px, 3vw, 46px);
  padding: 0 18px;
  font-size: clamp(11px, 0.82vw, 13px);
}

.service-cleaning {
  grid-template-columns: 41.5% 58.5%;
  min-height: clamp(335px, 39.4vw, 610px);
}

.service-cleaning::before {
  background:
    radial-gradient(ellipse at 41% 52%, rgba(255, 255, 255, 0.96), rgba(247, 250, 246, 0.84) 22%, transparent 42%),
    linear-gradient(90deg, #f7faf6 0%, #f7faf6 34%, rgba(247, 250, 246, 0.8) 42%, transparent 55%);
}

.cleaning-compare {
  grid-column: 2;
  grid-template-columns: 1fr 1fr;
}

.cleaning-compare img {
  object-position: center top;
}

.cleaning-compare figcaption {
  right: 24px;
  bottom: 24px;
  padding: 6px 11px;
  font-size: clamp(10px, 0.72vw, 12px);
}

.compare-control {
  width: clamp(46px, 4.25vw, 62px);
  height: clamp(46px, 4.25vw, 62px);
  font-size: clamp(20px, 1.7vw, 26px);
}

.service-relife {
  min-height: clamp(305px, 35.7vw, 550px);
  background:
    linear-gradient(90deg, rgba(2, 23, 20, 1) 0%, rgba(2, 23, 20, 0.98) 34%, rgba(2, 23, 20, 0.66) 47%, rgba(2, 23, 20, 0.08) 76%),
    radial-gradient(circle at 74% 44%, rgba(70, 255, 103, 0.28), transparent 23%),
    url("assets/service-relife-treatment.png") center right / cover;
}

.service-relife .service-copy-panel {
  width: min(395px, calc(41.5vw - 92px));
}

.service-relife::before {
  background:
    radial-gradient(circle at 75% 42%, rgba(128, 255, 162, 0.2), transparent 15%),
    linear-gradient(108deg, transparent 44%, rgba(110, 255, 104, 0.34) 48%, rgba(110, 255, 104, 0.07) 62%, transparent 70%),
    repeating-linear-gradient(164deg, transparent 0 50px, rgba(103, 255, 105, 0.14) 50px 52px, transparent 52px 104px);
}

.service-maintenance {
  min-height: clamp(305px, 34.1vw, 525px);
  background:
    radial-gradient(ellipse at 40% 48%, rgba(255, 255, 255, 0.96), rgba(247, 250, 246, 0.84) 21%, transparent 42%),
    linear-gradient(90deg, #f7faf6 0%, rgba(247, 250, 246, 0.98) 35%, rgba(247, 250, 246, 0.64) 48%, rgba(247, 250, 246, 0.08) 67%),
    url("assets/service-maintenance-tech.png") center right / cover;
}

.inspection-card {
  right: max(52px, calc((100vw - 1420px) / 2 + 92px));
  width: clamp(260px, 21vw, 330px);
  padding: clamp(22px, 2vw, 30px) clamp(22px, 1.8vw, 28px);
}

.inspection-card h3 {
  margin-bottom: 16px;
  font-size: clamp(13px, 0.96vw, 16px);
}

.inspection-card p {
  padding: clamp(8px, 0.8vw, 11px) 0;
  font-size: clamp(11px, 0.78vw, 13px);
}

.inspection-card strong {
  font-size: clamp(10px, 0.72vw, 12px);
}

.service-exterior {
  grid-template-columns: 38.2% 61.8%;
  min-height: clamp(270px, 30.4vw, 470px);
}

.service-exterior .service-copy-panel {
  width: min(370px, calc(38.2vw - 92px));
}

.service-exterior::before {
  background:
    radial-gradient(ellipse at 29% 50%, rgba(15, 47, 38, 0.74), rgba(3, 23, 20, 0.2) 36%, transparent 56%),
    linear-gradient(90deg, rgba(3, 23, 20, 1) 0%, rgba(3, 23, 20, 0.98) 36%, rgba(3, 23, 20, 0.52) 50%, transparent 72%);
}

.exterior-gallery {
  grid-column: 2;
}

.exterior-gallery figcaption {
  bottom: clamp(24px, 2.5vw, 38px);
  min-width: clamp(148px, 13vw, 190px);
  padding: clamp(11px, 1.1vw, 15px) clamp(14px, 1.3vw, 18px);
  font-size: clamp(11px, 0.86vw, 14px);
}

.final-cta {
  min-height: clamp(115px, 13.7vw, 205px);
  padding: clamp(12px, 1.6vw, 24px) 20px clamp(18px, 2.1vw, 32px);
  align-content: center;
}

.final-cta img {
  width: clamp(44px, 4.1vw, 64px);
  height: clamp(44px, 4.1vw, 64px);
  margin-bottom: 4px;
}

.final-cta h2 {
  margin-bottom: 3px;
  font-size: clamp(28px, 3.25vw, 50px);
  line-height: 1.02;
}

.final-cta p {
  margin-bottom: clamp(10px, 1.1vw, 18px);
  font-size: clamp(13px, 1vw, 16px);
}

.care-process {
  padding: clamp(62px, 7vw, 96px) max(20px, calc((100vw - var(--max)) / 2));
  color: var(--ink);
  background:
    radial-gradient(circle at center, rgba(46, 143, 91, 0.08), transparent 55%),
    #f6f8f6;
}

.process-heading {
  max-width: 820px;
  margin: 0 auto 44px;
  text-align: center;
}

.process-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(18px, 2.3vw, 34px);
}

.process-steps article {
  position: relative;
  display: grid;
  justify-items: center;
  text-align: center;
}

.process-steps article:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 54px;
  left: calc(50% + 66px);
  width: calc(100% - 92px);
  height: 1px;
  background: linear-gradient(90deg, rgba(46, 143, 91, 0.22), rgba(46, 143, 91, 0.6), rgba(46, 143, 91, 0.22));
}

.process-steps article > span {
  display: grid;
  width: 118px;
  height: 118px;
  place-items: center;
  margin-bottom: 22px;
  border: 1px solid rgba(46, 143, 91, 0.18);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 0 0 10px rgba(46, 143, 91, 0.04), 0 18px 38px rgba(16, 24, 22, 0.08);
}

.process-steps svg {
  width: 42px;
  height: 42px;
  color: var(--green-dark);
}

.process-steps h3 {
  margin-bottom: 12px;
  font-size: 16px;
  text-transform: uppercase;
}

.process-steps p {
  max-width: 170px;
  margin: 0;
  color: #2f3b36;
  font-size: 14px;
  line-height: 1.5;
}

.science-section {
  position: relative;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  min-height: 560px;
  padding: clamp(70px, 8vw, 112px) max(20px, calc((100vw - var(--max)) / 2));
  overflow: hidden;
  color: var(--white);
  background:
    linear-gradient(90deg, rgba(5, 14, 15, 0.98) 0%, rgba(5, 14, 15, 0.8) 38%, rgba(5, 14, 15, 0.3) 100%),
    url("assets/roof-asphalt-growth.png") center / cover;
}

@keyframes system-stars {
  0%,
  100% {
    opacity: 0.22;
    transform: translate3d(0, 0, 0);
  }

  50% {
    opacity: 0.52;
    transform: translate3d(0, -10px, 0);
  }
}

@keyframes system-card-sweep {
  0% {
    opacity: 0;
    transform: translateX(-78%);
  }

  18%,
  34% {
    opacity: 0.42;
  }

  58%,
  100% {
    opacity: 0;
    transform: translateX(78%);
  }
}

@keyframes system-card-sweep-reverse {
  0% {
    opacity: 0;
    transform: translateX(78%);
  }

  18%,
  34% {
    opacity: 0.42;
  }

  58%,
  100% {
    opacity: 0;
    transform: translateX(-78%);
  }
}

@keyframes transition-wave {
  to {
    background-position: 160px 0, 0 0;
  }
}

@keyframes house-rise {
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes house-glow {
  0%,
  100% {
    filter: drop-shadow(0 0 5px rgba(126, 240, 122, 0.5));
  }

  50% {
    filter: drop-shadow(0 0 15px rgba(126, 240, 122, 0.96));
  }
}

@keyframes orbit-drift {
  to {
    stroke-dashoffset: -120;
  }
}

@keyframes orbit-halo {
  to {
    transform: rotateX(66deg) rotateZ(360deg);
  }
}

@keyframes orbit-scan {
  to {
    transform: rotateX(66deg) rotateZ(360deg);
  }
}

@keyframes orbit-pulse {
  0%,
  100% {
    opacity: 0.42;
    transform: scale(0.82);
  }

  50% {
    opacity: 1;
    transform: scale(1.42);
  }
}

.science-copy {
  position: relative;
  z-index: 1;
  align-self: center;
  max-width: 460px;
}

.science-copy h2 {
  margin-bottom: 20px;
  font-size: clamp(34px, 4.2vw, 54px);
  line-height: 1.08;
}

.science-copy p {
  margin-bottom: 24px;
  color: rgba(255, 255, 255, 0.74);
  line-height: 1.65;
}

.science-copy ul {
  display: grid;
  gap: 10px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}

.science-copy li {
  position: relative;
  padding-left: 26px;
  color: rgba(255, 255, 255, 0.82);
}

.science-copy li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 14px;
  height: 14px;
  border: 1px solid #78d36b;
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px rgba(120, 211, 107, 0.18);
}

.science-visual {
  position: relative;
  z-index: 1;
  min-height: 360px;
}

.science-visual span {
  position: absolute;
  top: 30%;
  left: 38%;
  width: min(300px, 24vw);
  aspect-ratio: 1;
  border: 2px solid rgba(255, 255, 255, 0.88);
  border-radius: 50%;
  background: url("assets/roof-asphalt-growth.png") center / 220% auto;
  box-shadow: 0 0 0 999px rgba(5, 14, 15, 0.04), 0 22px 70px rgba(0, 0, 0, 0.36);
}

.science-visual span::before,
.science-visual span::after {
  content: "";
  position: absolute;
  height: 1px;
  background: rgba(126, 240, 122, 0.72);
  transform-origin: left center;
}

.science-visual span::before {
  left: 82%;
  top: 36%;
  width: 280px;
  transform: rotate(-17deg);
}

.science-visual span::after {
  left: 72%;
  top: 72%;
  width: 220px;
  transform: rotate(25deg);
}

.promise-cta {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 36px;
  width: min(var(--max), calc(100% - 40px));
  margin: -44px auto 0;
  padding: clamp(34px, 4vw, 50px) clamp(34px, 5vw, 60px);
  border: 1px solid rgba(119, 200, 93, 0.58);
  border-radius: var(--radius);
  color: var(--white);
  background:
    linear-gradient(90deg, rgba(32, 67, 41, 0.88), rgba(20, 46, 29, 0.76)),
    url("assets/roof-sunny-clean.png") center / cover;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}

.promise-cta h2 {
  margin-bottom: 12px;
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.1;
}

.promise-cta p {
  max-width: 430px;
  margin: 0;
  color: rgba(255, 255, 255, 0.76);
}

.promise-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.promise-actions .btn {
  min-width: 190px;
}

.promise-actions .btn svg {
  width: 18px;
  height: 18px;
  margin-right: 8px;
}

.section {
  width: min(var(--max), calc(100% - 40px));
  margin: 0 auto;
  padding: clamp(74px, 9vw, 124px) 0;
}

.section-heading {
  max-width: 790px;
  margin-bottom: 38px;
}

.section-heading.wide {
  max-width: 900px;
}

.intro-grid,
.feature-grid,
.service-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.intro-grid article,
.feature-grid article,
.service-list article,
.comparison-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

.intro-grid article,
.service-list article {
  min-height: 230px;
  padding: 24px;
  position: relative;
}

.intro-grid .card-icon,
.service-list .card-icon {
  margin-bottom: 28px;
}

.step {
  display: inline-block;
  margin-bottom: 22px;
  color: var(--amber);
  font-weight: 850;
}

.service-band {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  min-height: 660px;
  background: var(--white);
}

.service-copy {
  align-self: center;
  padding: clamp(40px, 8vw, 92px);
}

.service-copy p {
  max-width: 610px;
}

.check-list {
  display: grid;
  gap: 13px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.check-list li {
  position: relative;
  padding-left: 26px;
  color: #33413b;
  font-weight: 680;
}

.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--green);
}

.service-visual {
  min-height: 420px;
  overflow: hidden;
}

.service-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dark {
  width: 100%;
  max-width: none;
  padding-inline: max(20px, calc((100vw - var(--max)) / 2));
  color: var(--white);
  background: var(--charcoal);
}

.dark p {
  color: rgba(255, 255, 255, 0.72);
}

.service-showcase .service-copy-panel {
  width: min(455px, calc(100% - 40px));
  max-width: calc(100% - 40px);
  padding-inline: 0;
  background: transparent;
}

.service-showcase .service-link.dark {
  width: 325px;
  max-width: 100%;
  padding-inline: 18px;
}

.feature-grid {
  grid-template-columns: repeat(3, 1fr);
}

.feature-grid article {
  min-height: 310px;
  padding: 32px;
  border-color: rgba(255, 255, 255, 0.16);
  background: #18231f;
}

.feature-icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  margin-bottom: 42px;
  border-radius: 50%;
  background: #dfeee4;
  color: var(--green-dark);
  font-weight: 900;
}

.feature-icon svg {
  width: 26px;
  height: 26px;
}

.relife-flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: 26px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.15);
}

.relife-flow div {
  display: grid;
  gap: 14px;
  min-height: 132px;
  padding: 24px;
  background: #15201c;
}

.relife-flow span {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  background: #dfeee4;
  color: var(--green-dark);
  font-weight: 900;
}

.comparison-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 18px;
}

.comparison-card {
  min-height: 245px;
  padding: 34px;
}

.comparison-card.active {
  background: #e9f4ed;
  border-color: #b8d6c2;
}

.comparison-card.muted {
  background: #eef2f0;
}

.guarantee-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 42px;
  padding: clamp(34px, 6vw, 66px);
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--white);
}

.guarantee-panel p {
  color: rgba(255, 255, 255, 0.76);
}

.assurance-list {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.assurance-list span {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 68px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.86);
  font-weight: 760;
}

.assurance-list svg {
  flex: 0 0 auto;
  color: #8ce1aa;
}

.service-list {
  grid-template-columns: repeat(2, 1fr);
}

.partner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 28px;
  padding: clamp(46px, 7vw, 76px) max(20px, calc((100vw - var(--max)) / 2));
  background: #203b44;
  color: var(--white);
}

.partner h2 {
  max-width: 820px;
  margin-bottom: 0;
}

.quote {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(30px, 6vw, 78px);
  align-items: start;
}

.quote-form {
  display: grid;
  gap: 16px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

label {
  display: grid;
  gap: 7px;
  color: #34423c;
  font-size: 14px;
  font-weight: 760;
}

input,
select,
textarea {
  width: 100%;
  min-height: 46px;
  padding: 11px 12px;
  border: 1px solid #cbd6d1;
  border-radius: 6px;
  color: var(--ink);
  background: #fbfcfa;
  font: inherit;
}

textarea {
  resize: vertical;
}

.site-footer {
  display: grid;
  grid-template-columns: minmax(260px, 1.3fr) repeat(4, minmax(130px, 0.7fr));
  gap: clamp(26px, 4vw, 64px);
  padding: 64px max(20px, calc((100vw - var(--max)) / 2)) 28px;
  color: rgba(255, 255, 255, 0.75);
  background:
    linear-gradient(180deg, #111b1e, #071012);
}

.site-footer p {
  margin: 18px 0 0;
  color: rgba(255, 255, 255, 0.65);
}

.site-footer strong {
  color: var(--white);
}

.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.footer-logo img {
  width: 62px;
  height: 48px;
  object-fit: contain;
  filter: invert(1);
}

.footer-logo strong,
.footer-logo small {
  display: block;
  line-height: 1.05;
}

.footer-logo strong {
  color: var(--white);
  font-size: 25px;
  font-weight: 880;
}

.footer-logo strong span {
  color: #67bd67;
}

.footer-logo small {
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 10px;
  font-weight: 820;
  text-transform: uppercase;
}

.footer-brand p {
  max-width: 300px;
  font-size: 13px;
  line-height: 1.75;
}

.social-links {
  display: flex;
  gap: 11px;
  margin-top: 22px;
}

.social-links a {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.76);
  font-size: 13px;
  font-weight: 800;
}

.site-footer nav {
  display: grid;
  align-content: start;
  gap: 12px;
  padding-left: clamp(0px, 2vw, 28px);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.site-footer nav strong {
  margin-bottom: 8px;
  font-size: 12px;
  text-transform: uppercase;
}

.site-footer nav a,
.site-footer nav span {
  color: rgba(255, 255, 255, 0.66);
  font-size: 13px;
}

.site-footer nav a:hover {
  color: var(--white);
}

.footer-bottom {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
}

@media (max-width: 920px) {
  .site-header {
    grid-template-columns: auto auto;
  }

  .nav-toggle {
    justify-self: end;
    display: grid;
    gap: 5px;
    width: 42px;
    height: 42px;
    place-content: center;
    border: 1px solid currentColor;
    border-radius: var(--radius);
    color: inherit;
    background: transparent;
  }

  .nav-toggle span {
    width: 18px;
    height: 2px;
    background: currentColor;
  }

  .site-nav,
  .header-actions {
    display: none;
  }

  .site-nav.open {
    position: absolute;
    inset: 74px 16px auto;
    display: grid;
    gap: 4px;
    padding: 16px;
    border-radius: var(--radius);
    color: var(--ink);
    background: var(--white);
    box-shadow: 0 20px 50px rgba(16, 24, 22, 0.2);
  }

  .site-nav.open a {
    padding: 12px;
  }

  .hero {
    min-height: 850px;
  }

  .hero-content {
    margin: 0 auto;
    padding-top: 110px;
  }

  .intro-grid,
  .feature-grid,
  .service-list,
  .comparison-layout,
  .guarantee-panel,
  .quote,
  .site-footer,
  .service-band,
  .partner,
  .overview-strip,
  .trust-strip,
  .relife-flow,
  .assurance-list {
    grid-template-columns: 1fr;
  }

  .services-system,
  .care-process,
  .science-section {
    padding-left: 20px;
    padding-right: 20px;
  }

  .system-map {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    min-height: 0;
  }

  .system-card,
  .card-cleaning,
  .card-maintain,
  .card-relife,
  .card-exterior,
  .system-orbit {
    grid-column: 1;
    grid-row: auto;
  }

  .system-orbit {
    order: -1;
    min-height: 280px;
  }

  .system-card::after {
    display: none;
  }

  .process-steps {
    grid-template-columns: 1fr;
  }

  .process-steps article:not(:last-child)::after {
    display: none;
  }

  .core-services-intro,
  .service-showcase,
  .service-cleaning,
  .service-exterior {
    display: block;
    min-height: 0;
  }

  .core-services-copy {
    width: auto;
    margin: 0;
    padding: 52px 20px 24px;
  }

  .core-services-visual {
    position: relative;
    inset: auto;
    height: 360px;
  }

  .core-services-intro {
    background:
      linear-gradient(180deg, #f5faf8 0%, rgba(245, 250, 248, 0.94) 42%, rgba(245, 250, 248, 0.18) 100%),
      #f5faf8;
  }

  .service-copy-panel {
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 48px 20px 34px;
  }

  .service-showcase .service-copy-panel {
    width: auto;
    max-width: none;
    padding: 48px 20px 34px;
  }

  .service-cleaning::before,
  .service-exterior::before {
    background: linear-gradient(180deg, rgba(247, 250, 246, 0.98), rgba(247, 250, 246, 0.72) 48%, transparent);
  }

  .service-exterior::before,
  .service-relife::before {
    background: linear-gradient(180deg, rgba(5, 18, 17, 0.96), rgba(5, 18, 17, 0.72) 48%, transparent);
  }

  .cleaning-compare,
  .exterior-gallery {
    grid-column: auto;
    min-height: 430px;
  }

  .service-relife,
  .service-maintenance {
    min-height: 620px;
    background-position: center bottom;
  }

  .inspection-card {
    position: relative;
    right: auto;
    top: auto;
    margin: 0 20px 40px auto;
    transform: none;
  }

  .science-section,
  .promise-cta,
  .site-footer {
    grid-template-columns: 1fr;
  }

  .science-visual {
    min-height: 260px;
  }

  .promise-cta {
    margin-top: 0;
  }

  .promise-actions {
    flex-wrap: wrap;
  }

  .site-footer nav {
    padding-left: 0;
    border-left: 0;
  }

  .hero-system-title {
    white-space: normal;
  }

  .hero-service-icons {
    grid-template-columns: repeat(2, 1fr);
    max-width: 420px;
  }

  .overview-strip {
    width: 100%;
    margin-top: 0;
  }

  .trust-strip {
    border-radius: 0;
  }

  .trust-strip div {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  .trust-strip div:last-child {
    border-bottom: 0;
  }

  .service-band {
    min-height: 0;
  }

  .partner {
    align-items: start;
  }
}

@media (max-width: 560px) {
  .site-header {
    padding: 14px 16px;
  }

  .brand {
    min-width: 0;
  }

  .hero {
    min-height: 820px;
  }

  .hero-overlay {
    background:
      linear-gradient(90deg, rgba(10, 18, 16, 0.9), rgba(10, 18, 16, 0.54)),
      linear-gradient(0deg, rgba(10, 18, 16, 0.58), transparent 40%);
  }

  h1 {
    font-size: 46px;
  }

  h2 {
    font-size: 34px;
  }

  .hero-stats span {
    flex-basis: 100%;
  }

  .system-heading h2,
  .process-heading h2,
  .science-copy h2 {
    font-size: 32px;
  }

  .process-steps article > span {
    width: 96px;
    height: 96px;
  }

  .science-visual span {
    left: 12%;
    width: 230px;
  }

  .promise-actions .btn {
    width: 100%;
  }

  .service-benefits {
    grid-template-columns: 1fr;
    max-width: 320px;
  }

  .core-services-copy h2 {
    font-size: 40px;
  }

  .service-benefits article {
    justify-items: start;
    grid-template-columns: auto 1fr;
    column-gap: 14px;
    text-align: left;
  }

  .service-benefits svg {
    grid-row: span 2;
    width: 50px;
    height: 50px;
    margin: 0;
  }

  .service-benefits h3 {
    margin: 3px 0 5px;
  }

  .cleaning-compare,
  .exterior-gallery {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .cleaning-compare figure,
  .exterior-gallery figure {
    height: 280px;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.72);
  }

  .compare-control {
    display: none;
  }

  .exterior-gallery figcaption {
    min-width: 0;
    width: calc(100% - 44px);
  }

  .footer-bottom {
    display: grid;
  }

  .section {
    width: min(var(--max), calc(100% - 30px));
  }

  .service-copy,
  .quote-form,
  .comparison-card,
  .intro-grid article,
  .feature-grid article,
  .service-list article {
    padding: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }

  .system-card {
    opacity: 1;
    transform: none;
  }

  .orbit-house-image {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

/* Post-hero service pages */
.post-eyebrow,
.post-number {
  color: var(--green);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0;
}

.post-core {
  position: relative;
  display: grid;
  grid-template-columns: minmax(360px, 0.9fr) minmax(520px, 1.1fr);
  min-height: 640px;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 18%, rgba(128, 208, 120, 0.24), transparent 26%),
    linear-gradient(90deg, #f8fbf8 0%, #f3f8f6 48%, #e7f2ed 100%);
}

.post-core-copy {
  position: relative;
  z-index: 2;
  align-self: center;
  max-width: 560px;
  margin-left: clamp(32px, 7vw, 92px);
  padding: 86px 0;
}

.post-core-copy h2 {
  margin: 20px 0 22px;
  font-size: clamp(46px, 5.6vw, 78px);
  line-height: 1.04;
  color: var(--ink);
}

.post-core-copy h2 span {
  display: block;
  color: var(--green);
}

.post-core-copy p {
  max-width: 500px;
  margin: 0;
  font-size: 22px;
  line-height: 1.45;
  color: #20302c;
}

.post-core-visual {
  position: relative;
  min-height: 640px;
}

.post-core-visual::before {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(90deg, rgba(248, 251, 248, 0.98) 0%, rgba(248, 251, 248, 0.38) 24%, transparent 58%),
    radial-gradient(circle at 62% 52%, rgba(78, 151, 61, 0.18), transparent 38%);
  z-index: 1;
}

.post-core-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.03) contrast(1.02);
}

.energy-line {
  position: absolute;
  right: 7%;
  width: 62%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(106, 213, 92, 0.9), transparent);
  box-shadow: 0 0 20px rgba(106, 213, 92, 0.55);
  z-index: 2;
  transform-origin: right center;
}

.energy-line::after {
  position: absolute;
  right: 22%;
  top: -5px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  content: "";
  background: #7fea73;
  box-shadow: 0 0 18px rgba(127, 234, 115, 0.8);
}

.line-one {
  top: 45%;
  transform: rotate(-9deg);
}

.line-two {
  top: 56%;
  transform: rotate(4deg);
}

.line-three {
  top: 64%;
  transform: rotate(-3deg);
}

.process-showcase {
  position: relative;
  overflow: hidden;
  scroll-margin-top: 110px;
  padding: clamp(54px, 6vw, 82px) clamp(28px, 6vw, 92px) 58px;
  background:
    radial-gradient(circle at 72% 18%, rgba(88, 162, 66, 0.08), transparent 28%),
    linear-gradient(180deg, #fbfcfb 0%, #f7faf8 100%);
  color: var(--ink);
}

.process-top {
  display: grid;
  grid-template-columns: minmax(330px, 0.42fr) minmax(560px, 0.58fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}

.process-intro {
  max-width: 520px;
}

.process-intro h2 {
  margin: 20px 0 22px;
  font-size: clamp(36px, 3.7vw, 52px);
  line-height: 1.08;
  letter-spacing: 0;
}

.process-intro h2 span {
  display: block;
  color: #25820f;
}

.process-intro > p {
  max-width: 500px;
  margin: 0 0 36px;
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.58;
  color: #14221e;
}

.process-quote-button {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 58px;
  padding: 0 22px;
  border-radius: 12px;
  background: linear-gradient(135deg, #2e9a19, #166f08);
  color: #fff;
  box-shadow: 0 16px 34px rgba(34, 143, 17, 0.28);
  font-size: 16px;
  font-weight: 900;
  text-decoration: none;
}

.process-quote-button svg {
  width: 23px;
  height: 23px;
}

.process-quote-button span {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-left: 18px;
  font-size: 22px;
}

.process-note {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  color: #18231f;
  font-size: 15px;
}

.process-note svg {
  width: 23px;
  height: 23px;
  padding: 4px;
  border-radius: 50%;
  background: rgba(37, 130, 15, 0.08);
  color: #25820f;
}

.process-video-card {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 0;
  overflow: hidden;
  border-radius: 22px;
  background: #071311;
  box-shadow: 0 24px 60px rgba(17, 34, 29, 0.2);
}

.process-video-card::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    radial-gradient(circle at 55% 46%, rgba(71, 226, 72, 0.18), transparent 24%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.02) 45%, rgba(0, 0, 0, 0.74) 100%);
}

.process-video-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.08) contrast(1.04);
}

.video-energy {
  position: absolute;
  right: 12%;
  top: 24%;
  z-index: 2;
  width: 40%;
  height: 40%;
  border: 3px solid rgba(70, 226, 74, 0.72);
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  filter: drop-shadow(0 0 18px rgba(70, 226, 74, 0.72));
  transform: rotate(38deg);
}

.energy-b {
  right: 17%;
  top: 30%;
  width: 30%;
  height: 30%;
  opacity: 0.5;
}

.video-play-button {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.28);
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.video-play-button span {
  display: block;
  width: 0;
  height: 0;
  margin-left: 6px;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 23px solid #25820f;
}

.video-controls {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 18px;
  z-index: 3;
  display: grid;
  grid-template-columns: auto auto 1fr auto auto auto;
  gap: 14px;
  align-items: center;
  color: #fff;
  font-size: 16px;
}

.video-play-small {
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 14px solid #fff;
}

.video-controls i {
  position: relative;
  display: block;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.42);
}

.video-controls i b {
  position: absolute;
  left: 0;
  top: 0;
  width: 22%;
  height: 100%;
  border-radius: inherit;
  background: #2d9a17;
}

.video-controls i b::after {
  position: absolute;
  right: -7px;
  top: 50%;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  content: "";
  background: #2d9a17;
  transform: translateY(-50%);
}

.video-icon {
  font-size: 19px;
  line-height: 1;
}

.process-divider {
  height: 1px;
  margin: clamp(40px, 5vw, 58px) 0 42px;
  background: #dbe4dd;
}

.process-steps-new {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(22px, 3.4vw, 56px);
  text-align: center;
}

.process-steps-new article {
  position: relative;
  min-width: 0;
}

.process-steps-new article:not(:last-child)::after {
  position: absolute;
  top: 74px;
  right: calc(-1 * clamp(40px, 4vw, 70px));
  width: clamp(58px, 7vw, 112px);
  height: 2px;
  content: "";
  background: repeating-linear-gradient(90deg, #25820f 0 7px, transparent 7px 14px);
}

.process-steps-new article:not(:last-child)::before {
  position: absolute;
  top: 67px;
  right: calc(-1 * clamp(44px, 4.4vw, 78px));
  width: 12px;
  height: 12px;
  content: "";
  border-top: 2px solid #25820f;
  border-right: 2px solid #25820f;
  transform: rotate(45deg);
}

.step-number {
  position: relative;
  z-index: 2;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: -18px;
  border-radius: 50%;
  background: #25820f;
  color: #fff;
  font-size: 19px;
  font-weight: 900;
}

.step-icon {
  display: grid;
  place-items: center;
  width: 124px;
  height: 124px;
  margin: 0 auto 22px;
  border: 1px solid rgba(37, 130, 15, 0.12);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 45%, rgba(37, 130, 15, 0.08), transparent 58%),
    rgba(255, 255, 255, 0.75);
  box-shadow: inset 0 0 0 14px rgba(37, 130, 15, 0.035);
}

.step-icon svg {
  width: 56px;
  height: 56px;
  color: #25820f;
  stroke-width: 1.5;
}

.process-steps-new h3 {
  margin: 0 0 14px;
  font-size: clamp(18px, 1.45vw, 23px);
  line-height: 1.1;
}

.process-steps-new p {
  max-width: 230px;
  margin: 0 auto;
  color: #16251f;
  font-size: 15px;
  line-height: 1.45;
}

.warranty-note {
  display: flex;
  align-items: center;
  gap: 18px;
  width: min(620px, 100%);
  margin: 42px auto 0;
  padding: 16px 28px;
  border-radius: 16px;
  background: linear-gradient(90deg, rgba(37, 130, 15, 0.08), rgba(37, 130, 15, 0.04));
}

.warranty-note svg {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  color: #25820f;
}

.warranty-note p {
  margin: 0;
  color: #15221d;
  font-size: 15px;
}

.warranty-note strong,
.warranty-note span {
  display: block;
}

.warranty-note strong {
  margin-bottom: 4px;
  font-size: 18px;
}

.roof-cleaning-detail {
  position: relative;
  padding: clamp(34px, 4.8vw, 64px) clamp(20px, 4.8vw, 72px);
  background:
    radial-gradient(circle at 82% 8%, rgba(83, 153, 66, 0.08), transparent 24%),
    linear-gradient(180deg, #f8faf8 0%, #f3f7f5 100%);
  color: var(--ink);
}

.roof-cleaning-panel {
  display: grid;
  grid-template-columns: minmax(330px, 0.36fr) minmax(620px, 0.64fr);
  align-items: stretch;
  overflow: hidden;
  border: 1px solid rgba(13, 32, 26, 0.08);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 28px 70px rgba(17, 34, 29, 0.1);
}

.roof-cleaning-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(38px, 4.6vw, 68px) clamp(30px, 3.8vw, 58px);
}

.detail-number {
  position: relative;
  display: block;
  width: fit-content;
  margin-bottom: clamp(26px, 3vw, 38px);
  color: var(--green);
  font-size: clamp(36px, 3.4vw, 46px);
  font-weight: 900;
  line-height: 1;
}

.detail-number::after {
  position: absolute;
  left: calc(100% + 18px);
  top: 52%;
  width: clamp(68px, 8vw, 104px);
  height: 2px;
  content: "";
  background: currentColor;
}

.roof-cleaning-copy h2 {
  margin: 0;
  color: #071211;
  font-size: clamp(38px, 3.9vw, 58px);
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
}

.roof-cleaning-copy h2 span {
  color: var(--green);
}

.detail-rule {
  width: 62px;
  height: 3px;
  margin: 20px 0 22px;
  border-radius: 999px;
  background: #2d8f25;
}

.roof-cleaning-copy > p {
  max-width: 430px;
  margin: 0 0 clamp(26px, 3vw, 38px);
  color: #17231f;
  font-size: clamp(17px, 1.25vw, 20px);
  line-height: 1.58;
}

.detail-benefits {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid rgba(13, 32, 26, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(245, 250, 247, 0.98));
}

.detail-benefits article {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 16px;
  align-items: center;
  min-height: 118px;
  padding: clamp(18px, 2vw, 28px) clamp(24px, 3.4vw, 58px);
}

.detail-benefits article:not(:last-child) {
  border-right: 1px solid rgba(13, 32, 26, 0.1);
}

.detail-benefits article > span {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 1px solid rgba(45, 143, 37, 0.12);
  border-radius: 50%;
  background: rgba(45, 143, 37, 0.08);
  color: #208117;
}

.detail-benefits svg {
  width: 30px;
  height: 30px;
  stroke-width: 1.75;
}

.detail-benefits h3 {
  margin: 0 0 7px;
  color: #071211;
  font-size: clamp(18px, 1.25vw, 22px);
  line-height: 1.12;
}

.detail-benefits p {
  margin: 0;
  color: #394641;
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.45;
}

.detail-cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: min(100%, 380px);
  min-height: 64px;
  padding: 0 26px 0 28px;
  border-radius: 10px;
  background: linear-gradient(135deg, #2c9b1b, #0d7407);
  color: #fff;
  box-shadow: 0 18px 42px rgba(21, 126, 13, 0.25);
  font-size: clamp(17px, 1.18vw, 20px);
  font-weight: 900;
  text-decoration: none;
}

.detail-cta span {
  font-size: 32px;
  line-height: 1;
}

.roof-cleaning-visual {
  position: relative;
  display: grid;
  min-height: clamp(460px, 36vw, 600px);
  overflow: hidden;
  background: #f3f8f7;
}

.static-complete-roof {
  width: 100%;
  height: 100%;
  object-fit: fill;
  object-position: center center;
}

.static-compare-half {
  position: relative;
  min-width: 0;
  overflow: hidden;
}

.static-before::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background:
    radial-gradient(ellipse at 68% 76%, rgba(77, 92, 20, 0.42), transparent 34%),
    radial-gradient(ellipse at 52% 92%, rgba(85, 105, 24, 0.38), transparent 30%),
    linear-gradient(180deg, transparent 0 38%, rgba(54, 76, 20, 0.14) 100%);
  mix-blend-mode: multiply;
  opacity: 0.7;
}

.static-compare-half img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  filter: saturate(1.04) contrast(1.03);
  transform: scale(1.28);
  transform-origin: center bottom;
}

.static-before img {
  object-position: center bottom;
}

.static-after img {
  object-position: center bottom;
}

.roof-cleaning-visual::after {
  display: none;
}

.static-divider {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: 3px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
  transform: translateX(-50%);
}

.static-label {
  position: absolute;
  z-index: 3;
  top: clamp(28px, 3vw, 44px);
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 22px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 8px;
  color: #fff;
  background: rgba(18, 25, 23, 0.82);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
  font-size: clamp(16px, 1.15vw, 20px);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0;
}

.before-label {
  left: clamp(28px, 3vw, 50px);
}

.after-label {
  right: clamp(28px, 3vw, 50px);
  border-color: rgba(255, 255, 255, 0.35);
  background: linear-gradient(135deg, #1d8c13, #0e6909);
}

.post-service {
  position: relative;
  display: grid;
  grid-template-columns: minmax(330px, 0.36fr) minmax(620px, 0.64fr);
  overflow: hidden;
}

.post-cleaning,
.post-maintenance {
  min-height: clamp(500px, 39vw, 580px);
  background: #fff;
}

.post-relife {
  min-height: clamp(500px, 39vw, 580px);
  background: #051413;
  color: #fff;
}

.post-exterior {
  min-height: clamp(500px, 39vw, 580px);
  background: #061514;
  color: #fff;
}

.post-service-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: none;
  min-height: inherit;
  padding: clamp(38px, 4.6vw, 68px) clamp(30px, 3.8vw, 58px);
}

.post-number {
  position: relative;
  width: fit-content;
  margin-bottom: clamp(26px, 3vw, 38px);
  font-size: clamp(36px, 3.4vw, 46px);
  font-weight: 900;
  line-height: 1;
}

.post-number::after {
  position: absolute;
  left: calc(100% + 18px);
  top: 52%;
  width: clamp(68px, 8vw, 104px);
  height: 2px;
  content: "";
  background: currentColor;
}

.post-service-copy h2 {
  max-width: 560px;
  margin: 0 0 20px;
  font-size: clamp(38px, 3.9vw, 58px);
  line-height: 1;
  color: inherit;
  letter-spacing: 0;
  text-transform: uppercase;
}

.post-maintenance .post-service-copy h2::after {
  display: block;
  width: 62px;
  height: 3px;
  margin: 20px 0 22px;
  border-radius: 999px;
  background: #2d8f25;
  content: "";
}

.post-service-copy h2 span {
  color: #6fbd58;
}

.post-service-copy > p {
  max-width: 430px;
  min-height: 0;
  margin: 0;
  font-size: clamp(17px, 1.25vw, 20px);
  line-height: 1.58;
  color: currentColor;
}

.post-relife .post-service-copy > p,
.post-exterior .post-service-copy > p {
  color: rgba(255, 255, 255, 0.84);
}

.post-benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 26px);
  align-items: start;
  margin-top: clamp(26px, 3vw, 38px);
  text-align: center;
}

.post-benefits article {
  min-width: 0;
}

.post-benefits svg {
  width: clamp(54px, 4vw, 62px);
  height: clamp(54px, 4vw, 62px);
  margin: 0 auto 13px;
  padding: 13px;
  color: var(--green);
  border: 1px solid rgba(77, 148, 61, 0.2);
  border-radius: 50%;
  background: rgba(77, 148, 61, 0.08);
  stroke-width: 1.8;
}

.post-relife .post-benefits svg,
.post-exterior .post-benefits svg {
  border-color: rgba(117, 214, 92, 0.24);
  background: rgba(117, 214, 92, 0.08);
  color: #78d45d;
}

.post-benefits h3 {
  min-height: 38px;
  margin: 0 0 8px;
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.12;
  color: inherit;
}

.post-benefits p {
  margin: 0;
  font-size: clamp(13px, 0.95vw, 15px);
  line-height: 1.35;
  color: #4a5a55;
}

.post-relife .post-benefits p,
.post-exterior .post-benefits p {
  color: rgba(255, 255, 255, 0.72);
}

.post-button {
  align-self: end;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 280px;
  min-height: 52px;
  margin-top: clamp(28px, 3vw, 42px);
  padding: 0 24px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.post-button::after {
  margin-left: 12px;
  content: "→";
}

.post-button.outline {
  color: var(--green);
  border: 1.5px solid var(--green);
  background: rgba(255, 255, 255, 0.86);
}

.post-button.dark {
  color: #fff;
  border: 1.5px solid rgba(120, 212, 93, 0.58);
  background: rgba(69, 145, 51, 0.2);
}

.post-cleaning-visual {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 860px;
}

.post-cleaning .post-service-copy h2::after {
  display: block;
  width: 62px;
  height: 3px;
  margin: 20px 0 22px;
  border-radius: 999px;
  background: #2d8f25;
  content: "";
}

.post-cleaning .post-cleaning-visual {
  grid-template-columns: 1fr;
  min-height: inherit;
  background: #eef5f3;
}

.post-cleaning .post-cleaning-visual > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.post-cleaning-visual figure,
.post-exterior-gallery figure {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
}

.post-cleaning-visual img,
.post-relife-visual img,
.post-maintenance-visual img,
.post-exterior-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-cleaning-visual figure:first-child img {
  filter: saturate(1.08) contrast(1.05);
}

.post-cleaning-visual figure:nth-child(2) img {
  filter: saturate(0.96) contrast(1.06) brightness(1.04);
}

.post-cleaning-visual figure span {
  position: absolute;
  right: 28px;
  bottom: 34px;
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(8, 18, 17, 0.84);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.post-cleaning-visual figure:nth-child(2) span {
  background: var(--green);
}

.post-cleaning-visual i {
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  background: rgba(255, 255, 255, 0.94);
  transform: translateX(-50%);
}

.post-cleaning-visual i::after {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  content: "‹ ›";
  color: #fff;
  background: rgba(6, 20, 19, 0.88);
  border: 2px solid rgba(255, 255, 255, 0.82);
  font-size: 30px;
  font-weight: 900;
  transform: translate(-50%, -50%);
}

.post-relife-visual,
.post-maintenance-visual {
  position: relative;
  min-height: inherit;
  overflow: hidden;
}

.post-relife-visual::before,
.post-maintenance-visual::before {
  position: absolute;
  inset: 0;
  content: "";
  z-index: 1;
}

.post-relife-visual::before {
  background:
    linear-gradient(90deg, #051413 0%, rgba(5, 20, 19, 0.74) 22%, rgba(5, 20, 19, 0.08) 70%),
    radial-gradient(circle at 70% 36%, rgba(103, 230, 109, 0.28), transparent 32%);
}

.post-relife-visual span {
  position: absolute;
  left: 14%;
  top: 36%;
  width: 72%;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(103, 230, 109, 0.9), transparent);
  box-shadow:
    0 0 24px rgba(103, 230, 109, 0.6),
    0 0 78px rgba(103, 230, 109, 0.34);
  z-index: 2;
  transform: rotate(-8deg);
}

.relife-particles {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
  mix-blend-mode: screen;
}

.relife-particles::before {
  position: absolute;
  left: 20%;
  right: 2%;
  top: 16%;
  bottom: 7%;
  content: "";
  background:
    radial-gradient(ellipse at 70% 50%, rgba(108, 238, 102, 0.18), transparent 34%),
    linear-gradient(112deg, transparent 14%, rgba(96, 226, 93, 0.08) 38%, rgba(96, 226, 93, 0.14) 62%, transparent 84%);
  filter: blur(12px);
  opacity: 0.7;
  transform: skewX(-14deg) rotate(-8deg);
  animation: relife-breath 5.8s ease-in-out infinite;
}

.relife-particles i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  border-radius: 999px;
  background: #9bff84;
  box-shadow:
    0 0 10px rgba(130, 255, 105, 0.9),
    0 0 24px rgba(91, 224, 90, 0.58),
    0 0 46px rgba(91, 224, 90, 0.22);
  opacity: 0;
  filter: blur(var(--b));
  transform: translate3d(0, 0, 0) scale(0.65);
  animation: relife-float var(--d) linear infinite;
  animation-delay: var(--delay);
}

.relife-particles i:nth-child(1) { --x: 34%; --y: 78%; --s: 4px; --b: .2px; --d: 6.6s; --delay: -1.4s; }
.relife-particles i:nth-child(2) { --x: 41%; --y: 72%; --s: 6px; --b: .4px; --d: 7.4s; --delay: -4.1s; }
.relife-particles i:nth-child(3) { --x: 49%; --y: 82%; --s: 3px; --b: .1px; --d: 5.8s; --delay: -2.8s; }
.relife-particles i:nth-child(4) { --x: 55%; --y: 68%; --s: 5px; --b: .3px; --d: 7.8s; --delay: -5.2s; }
.relife-particles i:nth-child(5) { --x: 61%; --y: 76%; --s: 4px; --b: .2px; --d: 6.2s; --delay: -3.3s; }
.relife-particles i:nth-child(6) { --x: 68%; --y: 62%; --s: 7px; --b: .5px; --d: 8.2s; --delay: -6.4s; }
.relife-particles i:nth-child(7) { --x: 76%; --y: 70%; --s: 3px; --b: .1px; --d: 5.9s; --delay: -1.9s; }
.relife-particles i:nth-child(8) { --x: 84%; --y: 58%; --s: 5px; --b: .3px; --d: 7.1s; --delay: -4.7s; }
.relife-particles i:nth-child(9) { --x: 37%; --y: 64%; --s: 3px; --b: .1px; --d: 6.8s; --delay: -5.5s; }
.relife-particles i:nth-child(10) { --x: 46%; --y: 59%; --s: 5px; --b: .3px; --d: 7.6s; --delay: -2.1s; }
.relife-particles i:nth-child(11) { --x: 53%; --y: 55%; --s: 4px; --b: .2px; --d: 6.3s; --delay: -4.4s; }
.relife-particles i:nth-child(12) { --x: 60%; --y: 49%; --s: 6px; --b: .4px; --d: 8.4s; --delay: -7.2s; }
.relife-particles i:nth-child(13) { --x: 66%; --y: 55%; --s: 3px; --b: .1px; --d: 5.7s; --delay: -3.8s; }
.relife-particles i:nth-child(14) { --x: 72%; --y: 46%; --s: 5px; --b: .3px; --d: 7.2s; --delay: -1.1s; }
.relife-particles i:nth-child(15) { --x: 80%; --y: 52%; --s: 4px; --b: .2px; --d: 6.5s; --delay: -5.9s; }
.relife-particles i:nth-child(16) { --x: 88%; --y: 42%; --s: 7px; --b: .5px; --d: 8s; --delay: -6.8s; }
.relife-particles i:nth-child(17) { --x: 44%; --y: 44%; --s: 3px; --b: .1px; --d: 6.1s; --delay: -2.6s; }
.relife-particles i:nth-child(18) { --x: 51%; --y: 39%; --s: 4px; --b: .2px; --d: 7.5s; --delay: -6.1s; }
.relife-particles i:nth-child(19) { --x: 58%; --y: 36%; --s: 6px; --b: .4px; --d: 8.5s; --delay: -4.9s; }
.relife-particles i:nth-child(20) { --x: 65%; --y: 33%; --s: 3px; --b: .1px; --d: 5.8s; --delay: -1.7s; }
.relife-particles i:nth-child(21) { --x: 73%; --y: 31%; --s: 5px; --b: .3px; --d: 7.9s; --delay: -3.5s; }
.relife-particles i:nth-child(22) { --x: 81%; --y: 28%; --s: 4px; --b: .2px; --d: 6.7s; --delay: -5.1s; }
.relife-particles i:nth-child(23) { --x: 88%; --y: 24%; --s: 6px; --b: .4px; --d: 8.8s; --delay: -7.6s; }
.relife-particles i:nth-child(24) { --x: 93%; --y: 30%; --s: 3px; --b: .1px; --d: 6s; --delay: -2.9s; }

@keyframes relife-float {
  0% {
    opacity: 0;
    transform: translate3d(-18px, 34px, 0) scale(0.55);
  }
  18% {
    opacity: 0.9;
  }
  72% {
    opacity: 0.72;
  }
  100% {
    opacity: 0;
    transform: translate3d(42px, -92px, 0) scale(1.16);
  }
}

@keyframes relife-breath {
  0%, 100% {
    opacity: 0.46;
    transform: skewX(-14deg) rotate(-8deg) translateY(8px);
  }
  50% {
    opacity: 0.82;
    transform: skewX(-14deg) rotate(-8deg) translateY(-8px);
  }
}

.post-maintenance-visual::before {
  background: linear-gradient(90deg, #f8fbf8 0%, rgba(248, 251, 248, 0.74) 30%, rgba(248, 251, 248, 0.08) 78%);
}

.post-maintenance-visual img {
  object-position: 62% center;
}

.inspection-card-new {
  position: absolute;
  left: clamp(92px, 10vw, 150px) !important;
  right: auto !important;
  top: 22% !important;
  bottom: auto !important;
  z-index: 2;
  display: grid;
  gap: 12px;
  width: min(280px, 54%);
  padding: 22px;
  border: 1px solid rgba(77, 148, 61, 0.22);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(16px);
}

.inspection-card-new strong {
  margin-bottom: 8px;
  color: var(--ink);
  font-size: 17px;
}

.inspection-card-new span {
  display: flex;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  color: #4b5a55;
  font-size: 14px;
}

.inspection-card-new b {
  color: var(--green);
}

.post-exterior-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-self: center;
  gap: clamp(18px, 2vw, 28px);
  min-height: 0;
  height: clamp(360px, 31vw, 470px);
  margin: clamp(32px, 4vw, 56px) clamp(28px, 4vw, 62px);
}

.post-exterior-gallery figure {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 28px;
  background: #020807;
  box-shadow:
    0 22px 54px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.post-exterior-gallery figure::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.04) 45%, rgba(0, 0, 0, 0.68) 100%),
    radial-gradient(circle at 50% 110%, rgba(92, 178, 68, 0.22), transparent 38%);
}

.post-exterior-gallery img {
  transform: scale(1.02);
}

.post-exterior-gallery figcaption {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 28px;
  z-index: 2;
  min-width: 0;
  padding: 0;
  color: #fff;
  font-size: clamp(18px, 1.4vw, 24px);
  font-weight: 850;
  line-height: 1.08;
  text-align: left;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.44);
  transform: none;
}

.reviews-section {
  padding: clamp(56px, 5.8vw, 82px) clamp(24px, 6vw, 92px);
  background:
    radial-gradient(circle at 50% 6%, rgba(61, 148, 49, 0.08), transparent 26%),
    linear-gradient(180deg, #fbfcfb 0%, #f6f8f7 100%);
  color: var(--ink);
  text-align: center;
}

.section-kicker,
.quote-kicker {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  color: var(--green);
  font-size: clamp(13px, 1vw, 16px);
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.section-kicker::before,
.section-kicker::after,
.quote-kicker::before,
.quote-kicker::after {
  display: block;
  width: clamp(42px, 5vw, 70px);
  height: 1px;
  content: "";
  background: rgba(37, 130, 15, 0.32);
}

.reviews-section h2 {
  max-width: 880px;
  margin: 14px auto 12px;
  color: #071211;
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1.02;
  letter-spacing: 0;
}

.reviews-section h2 span {
  color: var(--green);
}

.reviews-intro {
  max-width: 560px;
  margin: 0 auto 24px;
  color: #34423d;
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.45;
}

.rating-summary {
  display: inline-grid;
  grid-template-columns: auto auto auto;
  gap: 18px 24px;
  align-items: center;
  margin-bottom: clamp(28px, 3vw, 40px);
  text-align: left;
}

.google-mark,
.google-mini {
  display: inline-grid;
  place-items: center;
  color: #4285f4;
  font-weight: 950;
  letter-spacing: 0;
}

.google-mark {
  width: 52px;
  height: 52px;
  font-size: 40px;
  background: conic-gradient(from 0deg, #4285f4, #34a853, #fbbc05, #ea4335, #4285f4);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.google-mark.small {
  width: 42px;
  height: 42px;
  font-size: 34px;
}

.summary-stars,
.review-stars {
  color: #f7b500;
  letter-spacing: 0.12em;
  text-shadow: 0 4px 10px rgba(247, 181, 0, 0.15);
}

.summary-stars {
  padding-left: 24px;
  border-left: 1px solid rgba(7, 18, 17, 0.18);
  font-size: clamp(26px, 2.6vw, 36px);
}

.rating-summary > strong {
  color: #071211;
  font-size: clamp(26px, 3vw, 42px);
  white-space: nowrap;
}

.rating-summary > strong span {
  color: var(--green);
}

.rating-summary p {
  grid-column: 2 / 4;
  margin: -8px 0 0;
  color: #24312d;
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.35;
  text-align: center;
}

.rating-summary b {
  color: var(--green);
}

.review-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.7vw, 24px);
  max-width: 1460px;
  margin: 0 auto;
  text-align: left;
}

.review-card {
  min-height: 196px;
  padding: clamp(20px, 2vw, 28px);
  border: 1px solid rgba(13, 32, 26, 0.06);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 18px 48px rgba(17, 34, 29, 0.08);
}

.review-head {
  display: grid;
  grid-template-columns: 54px 1fr auto;
  gap: 14px;
  align-items: center;
}

.review-avatar {
  width: 54px;
  height: 54px;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 10px 24px rgba(7, 18, 17, 0.16);
}

.avatar-one { background: radial-gradient(circle at 50% 34%, #f2c7a8 0 16%, transparent 17%), linear-gradient(135deg, #4a2d1d, #e7b180); }
.avatar-two { background: radial-gradient(circle at 50% 34%, #d6a077 0 16%, transparent 17%), linear-gradient(135deg, #1e2f37, #bd7e58); }
.avatar-three { background: radial-gradient(circle at 50% 34%, #f0c49e 0 16%, transparent 17%), linear-gradient(135deg, #bb7a41, #f1d0a8); }
.avatar-four { background: radial-gradient(circle at 50% 34%, #e5b58e 0 16%, transparent 17%), linear-gradient(135deg, #445d62, #d7a17c); }
.avatar-five { background: radial-gradient(circle at 50% 34%, #e9bc97 0 16%, transparent 17%), linear-gradient(135deg, #2b231d, #d09362); }
.avatar-six { background: radial-gradient(circle at 50% 34%, #deb18c 0 16%, transparent 17%), linear-gradient(135deg, #202b35, #c99b73); }

.review-head strong {
  display: block;
  margin-bottom: 6px;
  color: #071211;
  font-size: clamp(17px, 1.2vw, 20px);
}

.review-head small {
  display: block;
  color: var(--green);
  font-size: 15px;
  font-weight: 750;
}

.review-head small::before {
  content: "• ";
}

.google-mini {
  font-size: 28px;
}

.review-stars {
  margin: 16px 0 12px;
  font-size: 19px;
}

.review-card p {
  position: relative;
  margin: 0;
  padding: 0 24px;
  color: #15211d;
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.42;
}

.review-card p::before,
.review-card p::after {
  position: absolute;
  color: var(--green);
  font-size: 30px;
  font-weight: 950;
  line-height: 1;
}

.review-card p::before {
  left: 0;
  top: -2px;
  content: "“";
}

.review-card p::after {
  right: 0;
  bottom: -8px;
  content: "”";
}

.reviews-link {
  display: inline-flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
  min-width: min(100%, 420px);
  min-height: 60px;
  margin-top: clamp(24px, 3vw, 38px);
  padding: 0 28px;
  border: 1.5px solid rgba(37, 130, 15, 0.55);
  border-radius: 10px;
  color: #071211;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 14px 36px rgba(17, 34, 29, 0.06);
  font-size: clamp(16px, 1.15vw, 19px);
  font-weight: 900;
  text-decoration: none;
}

.reviews-link b {
  color: var(--green);
  font-size: 30px;
}

.post-final-quote {
  position: relative;
  overflow: hidden;
  padding: clamp(48px, 4.8vw, 70px) clamp(20px, 4vw, 72px) clamp(22px, 2.5vw, 34px);
  background:
    linear-gradient(180deg, rgba(1, 28, 15, 0.9), rgba(1, 34, 17, 0.86)),
    url("assets/service-core-house.png") center/cover;
  color: #fff;
  text-align: center;
}

.quote-glow {
  position: absolute;
  left: -8%;
  right: -8%;
  top: 30%;
  height: 150px;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 44% 50%, rgba(99, 255, 79, 0.38), transparent 30%),
    linear-gradient(105deg, transparent 6%, rgba(106, 245, 80, 0.52) 46%, transparent 82%);
  filter: blur(7px);
  opacity: 0.86;
  transform: rotate(-8deg);
}

.quote-content {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
}

.quote-kicker {
  margin-bottom: 12px;
  color: #91df61;
}

.quote-kicker::before,
.quote-kicker::after {
  background: rgba(145, 223, 97, 0.42);
}

.post-final-quote h2 {
  margin: 0 auto 12px;
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1.06;
  letter-spacing: 0;
}

.post-final-quote h2 span {
  color: #7bdc45;
}

.post-final-quote p {
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.86);
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.42;
}

.quote-promises {
  display: flex;
  justify-content: center;
  gap: clamp(20px, 3vw, 42px);
  margin: clamp(18px, 2.3vw, 26px) auto 22px;
  color: #fff;
}

.quote-promises span {
  display: inline-grid;
  grid-template-columns: 34px auto;
  gap: 10px;
  align-items: center;
  text-align: left;
  font-size: 14px;
  font-weight: 850;
  line-height: 1.08;
}

.quote-promises svg {
  width: 34px;
  height: 34px;
  padding: 7px;
  border: 2px solid rgba(128, 234, 72, 0.8);
  border-radius: 50%;
  color: #8ced58;
  stroke-width: 1.9;
}

.quote-main-button {
  position: relative;
  display: inline-grid;
  grid-template-columns: 26px auto 28px;
  gap: 16px;
  align-items: center;
  justify-content: center;
  min-width: min(100%, 430px);
  min-height: 66px;
  padding: 0 28px;
  border: 1px solid rgba(192, 255, 166, 0.7);
  border-radius: 9px;
  color: #fff;
  background: linear-gradient(135deg, #5cc738, #16840b);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.16) inset,
    0 0 38px rgba(112, 255, 83, 0.42),
    0 18px 52px rgba(0, 0, 0, 0.34);
  font-size: clamp(17px, 1.25vw, 21px);
  font-weight: 950;
  text-decoration: none;
  text-transform: uppercase;
}

.quote-main-button svg {
  width: 26px;
  height: 26px;
}

.quote-main-button b {
  font-size: 30px;
  line-height: 1;
}

.quote-phone {
  display: inline-grid;
  grid-template-columns: 42px auto;
  column-gap: 14px;
  align-items: center;
  width: fit-content;
  margin: 18px auto 0;
  padding: 10px 18px 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(3, 23, 13, 0.36);
  color: #fff;
  text-align: left;
  text-decoration: none;
  backdrop-filter: blur(10px);
}

.quote-phone svg {
  grid-row: span 2;
  width: 42px;
  height: 42px;
  padding: 10px;
  border-radius: 50%;
  background: rgba(97, 214, 48, 0.94);
}

.quote-phone span {
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  line-height: 1.1;
}

.quote-phone strong {
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.04;
}

.quote-area {
  margin-top: 14px !important;
  color: rgba(255, 255, 255, 0.9) !important;
  font-weight: 750;
}

.quote-area::before {
  content: "● ";
  color: #8ced58;
}

.quote-trust-bar {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  max-width: 1380px;
  margin: clamp(24px, 3vw, 38px) auto 0;
  overflow: hidden;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.96);
  color: var(--ink);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.18);
  text-align: left;
}

.quote-trust-bar article {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 12px;
  align-items: center;
  min-height: 86px;
  padding: 18px clamp(18px, 2.2vw, 30px);
}

.quote-trust-bar article:not(:last-child) {
  border-right: 1px solid rgba(13, 32, 26, 0.1);
}

.quote-trust-bar svg {
  width: 34px;
  height: 34px;
  color: var(--green);
  stroke-width: 1.7;
}

.quote-trust-bar strong {
  display: block;
  margin-bottom: 4px;
  font-size: clamp(14px, 1vw, 17px);
  line-height: 1.16;
}

.quote-trust-bar span {
  display: block;
  color: #4b5a55;
  font-size: clamp(12px, 0.9vw, 14px);
  line-height: 1.35;
}

.roof-cleaning-page {
  background: #f7f9f7;
  color: var(--ink);
}

.rc-hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: clamp(480px, 44vw, 650px);
  margin-top: 82px;
  overflow: hidden;
  background: #071211;
  color: #fff;
}

.rc-hero-half {
  position: relative;
  min-width: 0;
  overflow: hidden;
}

.rc-hero-half img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rc-hero-before img {
  filter: brightness(0.6) saturate(1.1) contrast(1.08);
}

.rc-hero-after img {
  filter: brightness(0.82) saturate(0.92) contrast(1.03);
}

.rc-hero::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.46) 0%, rgba(0, 0, 0, 0.2) 34%, transparent 62%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.22));
}

.rc-hero-divider {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: 2px;
  background: rgba(255, 255, 255, 0.86);
  transform: translateX(-50%);
}

.rc-hero-divider span {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  color: var(--green);
  background: #fff;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.22);
  font-size: 24px;
  font-weight: 950;
  transform: translate(-50%, -50%);
}

.rc-hero-content {
  position: absolute;
  z-index: 3;
  left: max(32px, calc((100vw - 1180px) / 2));
  top: 50%;
  width: min(520px, 42vw);
  transform: translateY(-50%);
}

.rc-hero-content h1 {
  margin: 0 0 16px;
  font-size: clamp(38px, 4.5vw, 66px);
  line-height: 1.02;
  letter-spacing: 0;
}

.rc-hero-content p {
  max-width: 440px;
  margin: 0 0 28px;
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.48;
  font-weight: 650;
}

.rc-hero-actions {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.rc-section {
  padding: clamp(46px, 5.5vw, 74px) clamp(22px, 5vw, 84px);
  background: #fff;
}

.rc-heading {
  max-width: 860px;
  margin: 0 auto clamp(24px, 3.2vw, 38px);
  text-align: center;
}

.rc-heading span {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--green);
  font-size: clamp(12px, 0.95vw, 14px);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rc-heading span::before,
.rc-heading span::after {
  width: 38px;
  height: 1px;
  content: "";
  background: rgba(46, 143, 91, 0.36);
}

.rc-heading h2 {
  margin: 10px 0 8px;
  color: #101816;
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1.08;
  letter-spacing: 0;
}

.rc-heading p {
  margin: 0;
  color: #4a5a55;
  font-size: 15px;
  line-height: 1.45;
}

.rc-type-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  max-width: 1060px;
  margin: 0 auto;
}

.rc-type-grid article {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(13, 32, 26, 0.12);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(17, 34, 29, 0.07);
}

.rc-type-grid img {
  width: 100%;
  height: 176px;
  object-fit: cover;
}

.rc-card-icon {
  display: grid;
  width: 58px;
  height: 58px;
  margin: -29px 0 18px 28px;
  place-items: center;
  border: 1px solid rgba(46, 143, 91, 0.2);
  border-radius: 50%;
  background: #fff;
  color: var(--green);
  box-shadow: 0 10px 24px rgba(17, 34, 29, 0.1);
}

.rc-card-icon svg {
  width: 31px;
  height: 31px;
}

.rc-type-grid h3 {
  margin: 0 28px 14px;
  font-size: clamp(19px, 1.5vw, 23px);
  line-height: 1.12;
}

.rc-type-grid ul,
.rc-bad ul,
.rc-good ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rc-type-grid ul {
  padding: 0 28px 28px;
}

.rc-type-grid li,
.rc-good li,
.rc-bad li {
  color: #33443e;
  font-size: 15px;
  line-height: 1.35;
}

.rc-type-grid li::before,
.rc-good li::before {
  margin-right: 9px;
  color: var(--green);
  content: "✓";
  font-weight: 950;
}

.rc-help-strip {
  display: grid;
  grid-template-columns: 58px 1fr auto;
  gap: 18px;
  align-items: center;
  max-width: 1060px;
  margin: 24px auto 0;
  padding: 18px 22px;
  border: 1px solid rgba(46, 143, 91, 0.12);
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(46, 143, 91, 0.08), rgba(255, 255, 255, 0.96));
}

.rc-help-strip > span {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid rgba(46, 143, 91, 0.24);
  border-radius: 50%;
  color: var(--green);
  font-size: 25px;
  font-weight: 900;
}

.rc-help-strip p {
  margin: 0;
  color: #33443e;
  font-size: 15px;
  line-height: 1.35;
}

.rc-help-strip strong {
  display: block;
  color: #101816;
  font-size: 17px;
}

.rc-help-strip a {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  gap: 18px;
  padding: 0 24px;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(135deg, #2d9a1f, #12750a);
  font-size: 14px;
  font-weight: 900;
  text-transform: uppercase;
}

.rc-growth {
  background: linear-gradient(180deg, #f8faf8, #fff);
}

.rc-growth-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 42px);
  max-width: 1180px;
  margin: 0 auto;
}

.rc-growth-row article {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 18px;
  align-items: center;
}

.rc-growth-row img {
  width: 92px;
  height: 92px;
  object-fit: cover;
  border: 4px solid #fff;
  border-radius: 50%;
  box-shadow: 0 12px 30px rgba(17, 34, 29, 0.14);
}

.rc-growth-row h3 {
  margin: 0 0 6px;
  font-size: 19px;
}

.rc-growth-row p {
  margin: 0;
  color: #4a5a55;
  font-size: 14px;
  line-height: 1.4;
}

.rc-softwash {
  background: #fff;
}

.rc-vs-grid {
  display: grid;
  grid-template-columns: minmax(220px, 0.28fr) minmax(360px, 0.44fr) minmax(220px, 0.28fr);
  gap: clamp(20px, 4vw, 58px);
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}

.rc-bad,
.rc-good {
  padding: 24px;
  border-radius: 10px;
  background: #fff;
}

.rc-bad {
  border: 1px solid rgba(208, 45, 45, 0.34);
}

.rc-good {
  border: 1px solid rgba(46, 143, 91, 0.34);
}

.rc-bad h3,
.rc-good h3 {
  display: flex;
  justify-content: space-between;
  margin: 0 0 18px;
  font-size: 18px;
}

.rc-bad b {
  color: #d33535;
}

.rc-good b {
  color: var(--green);
}

.rc-bad li::before {
  margin-right: 9px;
  color: #d33535;
  content: "×";
  font-weight: 950;
}

.rc-vs-image {
  position: relative;
}

.rc-vs-image img {
  width: 100%;
  aspect-ratio: 16 / 8.8;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 18px 40px rgba(17, 34, 29, 0.12);
}

.rc-vs-image span {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 2px solid rgba(46, 143, 91, 0.2);
  border-radius: 50%;
  color: var(--green);
  background: #fff;
  box-shadow: 0 12px 28px rgba(17, 34, 29, 0.16);
  font-weight: 950;
  transform: translate(-50%, -50%);
}

.rc-process {
  background: #fbfcfb;
}

.rc-process-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  max-width: 1180px;
  margin: 0 auto;
  text-align: center;
}

.rc-process-row article {
  position: relative;
  padding: 0 10px;
}

.rc-process-row article:not(:last-child)::after {
  position: absolute;
  left: calc(50% + 48px);
  top: 42px;
  width: calc(100% - 96px);
  height: 1px;
  content: "";
  background: rgba(46, 143, 91, 0.24);
}

.rc-process-row b {
  position: absolute;
  left: calc(50% - 42px);
  top: -8px;
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--green);
  font-size: 13px;
}

.rc-process-row span {
  display: grid;
  width: 86px;
  height: 86px;
  margin: 0 auto 16px;
  place-items: center;
  border: 1px solid rgba(46, 143, 91, 0.16);
  border-radius: 50%;
  color: var(--green);
  background: #fff;
  box-shadow: inset 0 0 0 10px rgba(46, 143, 91, 0.04);
}

.rc-process-row svg {
  width: 38px;
  height: 38px;
}

.rc-process-row h3 {
  min-height: 38px;
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.18;
}

.rc-process-row p {
  margin: 0;
  color: #4a5a55;
  font-size: 13px;
  line-height: 1.38;
}

.rc-results {
  background: #fff;
}

.rc-results-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  max-width: 1100px;
  margin: 0 auto 28px;
}

.rc-results-grid img {
  width: 100%;
  aspect-ratio: 1.52;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 16px 38px rgba(17, 34, 29, 0.12);
}

.reviews-link.compact {
  margin-top: 0;
}

.rc-mini-reviews {
  padding: clamp(44px, 5vw, 66px) clamp(18px, 4vw, 70px);
  background: #f8faf8;
}

.rc-mini-review-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  max-width: 1280px;
  margin: 0 auto;
}

.rc-mini-review-grid article {
  min-height: 210px;
  padding: 18px;
  border: 1px solid rgba(13, 32, 26, 0.1);
  border-radius: 8px;
  background: #fff;
}

.rc-mini-review-grid b {
  display: block;
  margin-bottom: 10px;
  color: #4285f4;
  font-size: 22px;
}

.rc-mini-review-grid span {
  display: block;
  margin-bottom: 12px;
  color: #f7b500;
  font-size: 13px;
  letter-spacing: 0.06em;
}

.rc-mini-review-grid strong,
.rc-mini-review-grid small {
  display: block;
}

.rc-mini-review-grid strong {
  font-size: 14px;
}

.rc-mini-review-grid small {
  margin-bottom: 10px;
  color: #4a5a55;
  font-size: 12px;
}

.rc-mini-review-grid p {
  margin: 0;
  color: #17201c;
  font-size: 12px;
  line-height: 1.35;
}

.rc-warranty-cta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: clamp(20px, 4vw, 52px);
  align-items: center;
  padding: clamp(34px, 4vw, 52px) clamp(24px, 7vw, 92px);
  background:
    linear-gradient(90deg, rgba(2, 38, 20, 0.95), rgba(2, 61, 27, 0.88)),
    url("assets/final-cta-neighborhood.png") center/cover;
  color: #fff;
}

.rc-warranty-badge {
  display: grid;
  width: 100px;
  height: 116px;
  place-items: center;
  color: #fff;
  background: linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,.08));
  clip-path: polygon(50% 0, 92% 22%, 92% 74%, 50% 100%, 8% 74%, 8% 22%);
}

.rc-warranty-badge strong {
  display: block;
  margin-bottom: -30px;
  font-size: 52px;
  line-height: 1;
}

.rc-warranty-badge span {
  font-size: 14px;
  font-weight: 900;
  text-transform: uppercase;
}

.rc-warranty-cta h2 {
  margin: 0 0 8px;
  font-size: clamp(24px, 2.5vw, 36px);
}

.rc-warranty-cta p {
  max-width: 560px;
  margin: 0;
  color: rgba(255,255,255,.82);
  font-size: 15px;
  line-height: 1.45;
}

.rc-cta-phone {
  display: grid;
  color: #fff;
  text-decoration: none;
}

.rc-cta-phone span {
  color: #91df61;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.rc-cta-phone strong {
  font-size: clamp(22px, 2.4vw, 32px);
}

@media (max-width: 1080px) {
  .rc-hero {
    min-height: 560px;
  }

  .rc-hero-content {
    width: min(560px, calc(100% - 48px));
  }

  .rc-type-grid,
  .rc-growth-row,
  .rc-results-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rc-vs-grid,
  .rc-warranty-cta {
    grid-template-columns: 1fr;
  }

  .rc-vs-image {
    order: -1;
  }

  .rc-process-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 34px;
  }

  .rc-process-row article::after {
    display: none;
  }

  .rc-mini-review-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .rc-warranty-cta {
    text-align: center;
  }

  .rc-warranty-badge,
  .rc-warranty-cta .btn,
  .rc-cta-phone {
    justify-self: center;
  }
}

@media (max-width: 720px) {
  .rc-hero {
    grid-template-columns: 1fr;
    min-height: 620px;
    margin-top: 74px;
  }

  .rc-hero-half {
    grid-area: 1 / 1;
  }

  .rc-hero-after {
    clip-path: inset(0 0 0 52%);
  }

  .rc-hero-divider {
    left: 52%;
  }

  .rc-hero-content {
    left: 22px;
    top: 52%;
    width: calc(100% - 44px);
  }

  .rc-hero-content h1 {
    font-size: 38px;
  }

  .rc-section {
    padding: 42px 18px;
  }

  .rc-heading h2 {
    font-size: 30px;
  }

  .rc-type-grid,
  .rc-growth-row,
  .rc-results-grid,
  .rc-process-row,
  .rc-mini-review-grid {
    grid-template-columns: 1fr;
  }

  .rc-help-strip {
    grid-template-columns: 48px 1fr;
  }

  .rc-help-strip a {
    grid-column: 1 / -1;
    justify-content: center;
  }

  .rc-growth-row article {
    grid-template-columns: 74px 1fr;
  }

  .rc-growth-row img {
    width: 74px;
    height: 74px;
  }

  .rc-process-row {
    text-align: left;
  }

  .rc-process-row article {
    display: grid;
    grid-template-columns: 76px 1fr;
    column-gap: 18px;
    align-items: center;
  }

  .rc-process-row b {
    left: 54px;
    top: -4px;
  }

  .rc-process-row span {
    grid-row: span 2;
    width: 76px;
    height: 76px;
    margin: 0;
  }

  .rc-process-row h3 {
    min-height: 0;
    margin: 0 0 6px;
  }
}

@media (max-width: 1020px) {
  .training-hero,
  .partner-hero {
    grid-template-columns: 1fr;
  }

  .training-hero .hero-form-card,
  .partner-hero .hero-form-card {
    justify-self: start;
  }

  .roof-cleaning-panel {
    grid-template-columns: 1fr;
  }

  .roof-cleaning-copy {
    padding: 54px 28px 46px;
  }

  .roof-cleaning-visual {
    min-height: 520px;
  }

  .post-core,
  .post-service,
  .post-final-quote {
    grid-template-columns: 1fr;
  }

  .review-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rating-summary {
    grid-template-columns: auto auto;
    text-align: center;
  }

  .rating-summary > strong {
    grid-column: 1 / -1;
    justify-self: center;
  }

  .rating-summary p {
    grid-column: 1 / -1;
  }

  .quote-promises,
  .quote-trust-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quote-promises {
    display: grid;
    max-width: 520px;
  }

  .quote-trust-bar article:nth-child(2) {
    border-right: 0;
  }

  .quote-trust-bar article:nth-child(-n + 2) {
    border-bottom: 1px solid rgba(13, 32, 26, 0.1);
  }

  .post-core-copy,
  .post-service-copy {
    max-width: none;
    min-height: 0;
    margin: 0;
    padding: 58px 26px 48px;
  }

  .post-core-visual,
  .post-cleaning-visual,
  .post-relife-visual,
  .post-maintenance-visual,
  .post-exterior-gallery {
    min-height: 400px;
  }

  .post-exterior-gallery {
    height: auto;
    margin: 0 24px 42px;
  }

  .post-button {
    margin-top: 36px;
  }

  .post-final-actions {
    justify-content: flex-start;
  }

  .process-top,
  .process-steps-new {
    grid-template-columns: 1fr;
  }

  .process-showcase {
    padding-inline: 24px;
  }

  .process-steps-new {
    gap: 42px;
    text-align: left;
  }

  .process-steps-new article {
    display: grid;
    grid-template-columns: 84px 1fr;
    column-gap: 24px;
    align-items: center;
  }

  .process-steps-new article::before,
  .process-steps-new article::after {
    display: none;
  }

  .step-number {
    position: absolute;
    left: 52px;
    top: -10px;
  }

  .step-icon {
    grid-row: span 2;
    width: 84px;
    height: 84px;
    margin: 0;
    box-shadow: inset 0 0 0 10px rgba(37, 130, 15, 0.035);
  }

  .step-icon svg {
    width: 40px;
    height: 40px;
  }

  .process-steps-new p {
    max-width: none;
    margin: 0;
  }
}

@media (max-width: 640px) {
  .hero-form-card {
    width: 100%;
    padding: 26px 22px;
  }

  .hero-form-card h2 {
    font-size: 26px;
  }

  .roof-cleaning-detail {
    padding: 18px;
  }

  .roof-cleaning-panel {
    border-radius: 18px;
  }

  .roof-cleaning-copy {
    padding: 42px 24px;
  }

  .roof-cleaning-copy h2 {
    font-size: 38px;
  }

  .detail-benefits article {
    grid-template-columns: 58px 1fr;
    gap: 16px;
  }

  .detail-benefits article > span {
    width: 58px;
    height: 58px;
  }

  .detail-benefits svg {
    width: 30px;
    height: 30px;
  }

  .detail-cta {
    width: 100%;
  }

  .roof-cleaning-visual {
    min-height: 420px;
  }

  .detail-benefits {
    grid-template-columns: 1fr;
  }

  .detail-benefits article {
    min-height: 0;
    border-right: 0;
  }

  .detail-benefits article:not(:last-child) {
    border-right: 0;
    border-bottom: 1px solid rgba(13, 32, 26, 0.1);
  }

  .static-label {
    top: 20px;
    min-height: 38px;
    padding: 0 15px;
    font-size: 14px;
  }

  .before-label {
    left: 18px;
  }

  .after-label {
    right: 18px;
  }

  .post-core {
    min-height: 0;
  }

  .post-core-copy h2,
  .post-service-copy h2 {
    font-size: 40px;
  }

  .post-number {
    margin-bottom: 30px;
    font-size: 40px;
  }

  .post-number::after {
    width: 78px;
  }

  .post-benefits,
  .post-benefits.compact,
  .post-exterior-gallery,
  .review-grid,
  .quote-trust-bar {
    grid-template-columns: 1fr;
  }

  .reviews-section {
    padding: 48px 18px;
  }

  .section-kicker::before,
  .section-kicker::after,
  .quote-kicker::before,
  .quote-kicker::after {
    width: 28px;
  }

  .reviews-section h2 {
    font-size: 34px;
  }

  .rating-summary {
    gap: 12px 16px;
  }

  .summary-stars {
    padding-left: 16px;
    font-size: 26px;
  }

  .review-card {
    min-height: 0;
  }

  .post-final-quote {
    padding: 46px 18px 24px;
  }

  .post-final-quote h2 {
    font-size: 34px;
  }

  .quote-promises {
    grid-template-columns: 1fr;
    max-width: 280px;
  }

  .quote-main-button {
    min-height: 64px;
    grid-template-columns: 24px auto 26px;
    padding: 0 20px;
    font-size: 16px;
  }

  .quote-phone {
    grid-template-columns: 38px auto;
    padding: 9px 14px 9px 10px;
  }

  .quote-phone svg {
    width: 38px;
    height: 38px;
    padding: 9px;
  }

  .quote-phone strong {
    font-size: 22px;
  }

  .quote-trust-bar article,
  .quote-trust-bar article:nth-child(2),
  .quote-trust-bar article:not(:last-child) {
    border-right: 0;
    border-bottom: 1px solid rgba(13, 32, 26, 0.1);
  }

  .quote-trust-bar article:last-child {
    border-bottom: 0;
  }

  .post-benefits {
    gap: 28px;
    margin-top: 34px;
    text-align: left;
  }

  .post-benefits article {
    display: grid;
    grid-template-columns: 62px 1fr;
    column-gap: 18px;
    align-items: start;
  }

  .post-benefits svg {
    grid-row: span 2;
    width: 62px;
    height: 62px;
    margin: 0;
    padding: 14px;
  }

  .post-benefits h3 {
    min-height: 0;
    margin: 3px 0 6px;
  }

  .post-button {
    width: 100%;
    min-width: 0;
    white-space: normal;
    text-align: center;
  }

  .post-cleaning-visual {
    grid-template-columns: 1fr;
  }

  .post-cleaning-visual i {
    display: none;
  }

  .inspection-card-new {
    left: 24px;
    right: 24px;
    top: auto;
    bottom: 28px;
    width: auto;
  }

  .process-intro h2 {
    font-size: 40px;
  }

  .process-quote-button,
  .warranty-note {
    width: 100%;
  }

  .process-quote-button {
    justify-content: center;
  }

  .video-controls {
    grid-template-columns: auto auto 1fr;
  }

  .video-icon {
    display: none;
  }

  .process-steps-new article {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .step-number {
    left: calc(50% - 14px);
  }

  .step-icon {
    margin: 0 auto;
  }

  .warranty-note {
    align-items: flex-start;
    padding: 20px;
  }
}

/* Final shared navigation and footer overrides */
.site-nav a {
  position: relative;
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10px;
  height: 2px;
  border-radius: 999px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 180ms ease;
}

.site-nav a:hover,
.site-nav a.active {
  color: var(--green-dark);
  opacity: 1;
}

.site-nav a:hover::after,
.site-nav a.active::after {
  transform: scaleX(1);
}

.site-footer {
  display: block;
  grid-template-columns: none;
  padding: clamp(54px, 6vw, 86px) clamp(20px, 5vw, 64px) 30px;
  color: rgba(255, 255, 255, 0.78);
  background:
    radial-gradient(circle at 80% 10%, rgba(83, 172, 87, 0.12), transparent 28%),
    linear-gradient(180deg, #11191d 0%, #071012 100%);
}

.footer-main {
  display: grid;
  grid-template-columns: minmax(260px, 1.35fr) minmax(150px, 0.72fr) minmax(135px, 0.6fr) minmax(135px, 0.6fr) minmax(250px, 1fr);
  gap: clamp(28px, 4vw, 62px);
  width: min(1480px, 100%);
  margin: 0 auto;
}

.site-footer nav,
.footer-col,
.footer-contact {
  display: grid;
  align-content: start;
  gap: 20px;
  padding-left: clamp(0px, 2vw, 36px);
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-logo img {
  width: 74px;
  height: 58px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.footer-brand p {
  max-width: 390px;
  font-size: clamp(15px, 1.25vw, 20px);
  line-height: 1.75;
}

.footer-col strong,
.footer-contact > strong {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  color: #fff;
  font-size: clamp(17px, 1.35vw, 23px);
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.footer-col strong span,
.footer-contact > strong span,
.footer-contact a span,
.footer-contact > span span {
  color: #67bd58;
}

.footer-col a,
.footer-contact a,
.footer-contact > span {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.77);
  font-size: clamp(15px, 1.2vw, 20px);
  line-height: 1.35;
}

.footer-col a {
  justify-content: space-between;
}

.footer-col a b {
  color: #67bd58;
  font-size: 28px;
  font-weight: 400;
}

.footer-proof {
  display: grid;
  gap: 17px;
  margin-top: 14px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-proof em {
  color: #ffb000;
  font-style: normal;
  letter-spacing: 0.12em;
}

.footer-bottom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  width: min(1480px, 100%);
  margin: clamp(46px, 6vw, 72px) auto 0;
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.13);
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(14px, 1vw, 17px);
}

.footer-bottom > span:nth-child(2) {
  display: inline-flex;
  align-items: center;
  gap: 42px;
}

.footer-bottom i {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.22);
}

.footer-love {
  justify-self: end;
}

@media (max-width: 1100px) {
  .footer-main,
  .footer-bottom {
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    text-align: center;
  }

  .footer-love {
    justify-self: center;
  }
}

/* Final non-home typography and icon scale */
main.service-page,
main.roof-cleaning-page,
.service-areas-page main {
  --page-kicker-size: clamp(11px, 0.78vw, 13px);
  --page-hero-title-size: clamp(36px, 3.55vw, 56px);
  --page-section-title-size: clamp(27px, 2.45vw, 38px);
  --page-panel-title-size: clamp(24px, 2.1vw, 32px);
  --page-subtitle-size: clamp(15px, 1.08vw, 18px);
  --page-body-size: clamp(14px, 0.98vw, 16px);
  --page-card-title-size: clamp(16px, 1.04vw, 19px);
  --page-small-size: clamp(12px, 0.82vw, 14px);
  --page-icon-box: 56px;
  --page-icon-size: 28px;
  --page-step-box: 66px;
}

main.service-page .sp-kicker,
main.roof-cleaning-page .rc-heading span,
main.roof-cleaning-page .sp-kicker,
.service-areas-page main .sp-kicker,
.service-areas-page main .rc-heading span {
  font-size: var(--page-kicker-size);
  letter-spacing: 0.08em;
}

main.service-page .sp-hero h1,
main.service-page .sp-hero-copy h1,
main.service-page.about-page .about-hero-copy h1,
main.roof-cleaning-page .rc-hero-content h1,
.service-areas-page main .areas-hero-copy h1 {
  font-size: var(--page-hero-title-size);
  line-height: 1.08;
  letter-spacing: 0;
}

main.service-page .sp-hero-copy > p:not(.sp-kicker),
main.service-page.about-page .about-hero-copy > p,
main.roof-cleaning-page .rc-hero-content p,
.service-areas-page main .areas-hero-copy > p:not(.sp-kicker) {
  font-size: var(--page-subtitle-size);
  line-height: 1.55;
}

main.service-page .sp-section h2,
main.service-page .sp-bottom-cta h2,
main.service-page .sp-two-panel h2,
main.service-page .sp-aging-band h2,
main.service-page .sp-split-visual h2,
main.service-page.about-page .about-story h2,
main.service-page.about-page .about-team h2,
main.service-page.about-page .about-service-area h2,
main.roof-cleaning-page .rc-heading h2,
main.roof-cleaning-page .rc-warranty-cta h2,
.service-areas-page main .rc-heading h2,
.service-areas-page main .areas-why h2,
.service-areas-page main .coverage-copy h2,
.service-areas-page main .areas-ready strong {
  font-size: var(--page-section-title-size);
  line-height: 1.14;
  letter-spacing: 0;
}

main.service-page .quote-form-card h2,
main.service-page .quote-side-card h3,
main.service-page .sp-benefit-panel h2,
main.service-page .sp-stats b,
main.roof-cleaning-page .rc-warranty-copy h2 {
  font-size: var(--page-panel-title-size);
  line-height: 1.16;
}

main.service-page h3,
main.roof-cleaning-page h3,
.service-areas-page main h3 {
  font-size: var(--page-card-title-size);
  line-height: 1.18;
  letter-spacing: 0;
}

main.service-page p,
main.service-page li,
main.service-page label,
main.service-page input,
main.service-page select,
main.service-page textarea,
main.roof-cleaning-page p,
main.roof-cleaning-page li,
.service-areas-page main p,
.service-areas-page main li {
  font-size: var(--page-body-size);
  line-height: 1.55;
}

main.service-page small,
main.service-page figcaption,
main.roof-cleaning-page small,
main.roof-cleaning-page figcaption,
.service-areas-page main small,
.service-areas-page main figcaption {
  font-size: var(--page-small-size);
}

main.service-page .sp-icon-grid b,
main.service-page .sp-process-five b,
main.roof-cleaning-page .rc-process-row b,
main.roof-cleaning-page .rc-card-icon,
.service-areas-page main .areas-proof-row span::before {
  width: var(--page-icon-box);
  height: var(--page-icon-box);
  min-width: var(--page-icon-box);
  font-size: var(--page-icon-size);
}

main.service-page .sp-process-five b,
main.roof-cleaning-page .rc-process-row b {
  width: var(--page-step-box);
  height: var(--page-step-box);
  min-width: var(--page-step-box);
}

main.service-page .sp-icon-grid svg,
main.roof-cleaning-page .rc-card-icon svg,
main.roof-cleaning-page .rc-process-row svg,
.service-areas-page main .areas-proof-row svg {
  width: var(--page-icon-size);
  height: var(--page-icon-size);
}

main.service-page .sp-icon-grid,
main.service-page .sp-card-grid,
main.service-page .sp-process-five,
main.roof-cleaning-page .rc-process-row,
.service-areas-page main .areas-proof-row {
  gap: clamp(18px, 2vw, 30px);
}

main.service-page .sp-section,
main.service-page .sp-two-panel,
main.service-page .sp-benefit-panel,
main.service-page .sp-stats,
main.roof-cleaning-page .rc-section,
.service-areas-page main .areas-section,
.service-areas-page main .areas-why,
.service-areas-page main .areas-ready {
  padding-top: clamp(54px, 5.2vw, 84px);
  padding-bottom: clamp(54px, 5.2vw, 84px);
}

main.service-page .btn,
main.roof-cleaning-page .btn,
.service-areas-page main .btn,
main.service-page .quote-submit {
  font-size: clamp(14px, 0.95vw, 16px);
}

main.service-page .sp-hero-badges span,
main.service-page .sp-hero-labels b,
main.roof-cleaning-page .rc-hero-actions .btn,
.service-areas-page main .areas-map-hero span {
  font-size: clamp(12px, 0.9vw, 14px);
}

@media (max-width: 760px) {
  main.service-page,
  main.roof-cleaning-page,
  .service-areas-page main {
    --page-hero-title-size: clamp(34px, 10vw, 44px);
    --page-section-title-size: clamp(26px, 8vw, 34px);
    --page-icon-box: 52px;
    --page-step-box: 58px;
  }
}

/* Final badge image and shine overrides */
.warranty-shine-frame {
  position: relative;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  border-radius: 18px;
  isolation: isolate;
}

.warranty-shine-frame::after {
  position: absolute;
  inset: -45% -80%;
  z-index: 2;
  content: "";
  background: linear-gradient(115deg, transparent 0 42%, rgba(255, 255, 255, 0.08) 46%, rgba(255, 255, 255, 0.72) 50%, rgba(255, 255, 255, 0.12) 54%, transparent 60% 100%);
  mix-blend-mode: screen;
  opacity: 0;
  transform: translateX(-56%) translateY(30%);
  animation: warranty-shine-sweep 4.8s ease-in-out infinite;
  pointer-events: none;
}

.warranty-shine-frame img {
  position: relative;
  z-index: 1;
  display: block;
}

.relife-page .rr-warranty-row .warranty-shine-frame {
  width: clamp(108px, 11vw, 168px);
}

.relife-page .rr-warranty-badge-img {
  width: 100%;
  height: auto;
}

.rc-warranty-badge.warranty-shine-frame {
  width: clamp(132px, 11vw, 180px);
  height: auto;
  min-width: clamp(132px, 11vw, 180px);
  background: transparent;
  clip-path: none;
}

.rc-warranty-badge.warranty-shine-frame img {
  width: 100%;
  height: auto;
}

@keyframes warranty-shine-sweep {
  0%,
  54% {
    opacity: 0;
    transform: translateX(-56%) translateY(30%);
  }

  64% {
    opacity: 0.9;
  }

  78%,
  100% {
    opacity: 0;
    transform: translateX(56%) translateY(-30%);
  }
}

/* Final Roof ReLife callout position override */
.relife-callouts span {
  right: clamp(0px, 0.7vw, 14px);
  transform: translateX(5%);
}

.callout-one {
  top: 8%;
}

.callout-two {
  top: 32%;
}

.callout-three {
  top: 56%;
}

/* Final requested refinements */
.warranty-shine-frame {
  overflow: visible;
  border-radius: 0;
  background: transparent;
}

.warranty-shine-frame::after {
  inset: 0;
  border-radius: 0;
  background: linear-gradient(115deg, transparent 0 36%, rgba(255, 255, 255, 0.1) 42%, rgba(255, 255, 255, 0.82) 49%, rgba(255, 255, 255, 0.16) 56%, transparent 64% 100%);
}

.warranty-badge-3year::after {
  -webkit-mask: url("assets/relife-badge-3year.png") center / contain no-repeat;
  mask: url("assets/relife-badge-3year.png") center / contain no-repeat;
}

.warranty-badge-515year::after {
  -webkit-mask: url("assets/relife-badge-5-15year.png") center / contain no-repeat;
  mask: url("assets/relife-badge-5-15year.png") center / contain no-repeat;
}

.callout-one {
  top: 8%;
}

.callout-two {
  top: 28%;
}

.callout-three {
  top: 46%;
}

.relife-page .rr-package {
  margin-inline: calc(50% - 50vw);
  margin-top: clamp(30px, 3.5vw, 50px);
  margin-bottom: clamp(24px, 3vw, 42px);
  padding: clamp(42px, 5vw, 72px) max(clamp(28px, 6vw, 86px), calc((100vw - 1480px) / 2 + 54px));
  border-radius: 0;
  box-shadow: none;
}

.relife-page .rr-package-top {
  grid-template-columns: minmax(260px, 0.48fr) minmax(560px, 1.25fr) minmax(270px, 0.48fr);
  gap: clamp(24px, 3vw, 46px);
  align-items: stretch;
}

.relife-page .rr-package-steps {
  gap: 0;
}

.relife-page .rr-package-steps article,
.relife-page .rr-includes,
.relife-page .rr-warranty-row article {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0 clamp(18px, 2vw, 34px);
}

.relife-page .rr-package-steps article {
  border-left: 1px solid rgba(129, 220, 86, 0.3);
}

.relife-page .rr-package-steps article:first-child {
  border-left: 0;
}

.relife-page .rr-package-steps b {
  width: 46px;
  height: 46px;
  margin-top: 0;
  margin-bottom: 18px;
  background: rgba(6, 34, 23, 0.82);
}

.relife-page .rr-includes {
  border-left: 1px solid rgba(129, 220, 86, 0.3);
}

.relife-page .rr-warranty-row {
  gap: 0;
  margin-top: clamp(34px, 4vw, 58px);
  padding-top: clamp(26px, 3vw, 42px);
}

.relife-page .rr-warranty-row article {
  grid-template-columns: auto minmax(0, 1fr);
  padding-block: 0;
  border-left: 1px solid rgba(129, 220, 86, 0.24);
}

.relife-page .rr-warranty-row article:first-child {
  border-left: 0;
}

@media (max-width: 1100px) {
  .relife-page .rr-package {
    padding-inline: clamp(24px, 5vw, 48px);
  }

  .relife-page .rr-package-steps article,
  .relife-page .rr-includes,
  .relife-page .rr-warranty-row article {
    border-left: 0;
    padding: 18px 0;
  }
}

/* Final full-bleed package and visible in-badge shine */
.relife-page .rr-package {
  position: relative;
  left: 50%;
  width: 100vw;
  max-width: none;
  margin-right: 0;
  margin-left: -50vw;
  transform: none;
  box-sizing: border-box;
  background-color: #031b14;
  background-image:
    radial-gradient(circle at 34% 18%, rgba(91, 255, 74, 0.16), transparent 30%),
    linear-gradient(135deg, #031915, #06271b 54%, #02120f);
  background-size: cover;
}

.warranty-shine-frame {
  position: relative;
  overflow: hidden;
  border-radius: 0;
  background: transparent;
}

.warranty-shine-frame::after {
  position: absolute;
  inset: 7% 8%;
  z-index: 3;
  content: "";
  clip-path: polygon(50% 3%, 68% 12%, 80% 27%, 78% 48%, 94% 58%, 90% 72%, 64% 74%, 50% 91%, 36% 74%, 10% 72%, 6% 58%, 22% 48%, 20% 27%, 32% 12%);
  background: linear-gradient(112deg, transparent 0 38%, rgba(255, 255, 255, 0.12) 43%, rgba(255, 255, 255, 0.92) 49%, rgba(255, 255, 255, 0.2) 55%, transparent 62% 100%);
  opacity: 0;
  mix-blend-mode: screen;
  transform: translateX(-70%) translateY(38%);
  animation: badge-inner-shine 3.8s ease-in-out infinite;
  pointer-events: none;
}

.warranty-badge-3year::after,
.warranty-badge-515year::after {
  -webkit-mask: none;
  mask: none;
}

@keyframes badge-inner-shine {
  0%,
  35% {
    opacity: 0;
    transform: translateX(-70%) translateY(38%);
  }

  48% {
    opacity: 0.95;
  }

  66%,
  100% {
    opacity: 0;
    transform: translateX(70%) translateY(-38%);
  }
}

/* Final roof cleaning growth row tightening */
.rc-growth {
  padding-top: clamp(42px, 4.5vw, 68px);
  padding-bottom: clamp(38px, 4vw, 60px);
}

.rc-growth-row {
  grid-template-columns: repeat(4, minmax(260px, 1fr));
  gap: clamp(24px, 3vw, 48px);
  width: min(100%, 1540px);
  max-width: none;
}

.rc-growth-row article {
  grid-template-columns: clamp(74px, 5vw, 92px) minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 18px;
  row-gap: 4px;
  align-items: center;
}

.rc-growth-row img {
  grid-row: 1 / 3;
}

.rc-growth-row h3,
.rc-growth-row p {
  grid-column: 2;
}

.rc-growth-row p {
  max-width: 250px;
  font-size: 15px;
  line-height: 1.35;
}

@media (max-width: 1180px) {
  .rc-growth-row {
    grid-template-columns: repeat(2, minmax(280px, 1fr));
  }
}

/* Final cleanup: remove badge effects and center video thumb play buttons */
.warranty-shine-frame::after {
  display: none !important;
  content: none !important;
  animation: none !important;
}

.rc-video-thumbs button {
  position: relative;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
}

.rc-video-thumbs button img {
  grid-column: 1;
  grid-row: 1;
}

.rc-video-thumbs span {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  justify-self: center;
  margin: 0;
}

.rc-video-thumbs b {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  justify-self: end;
  margin: 0 10px 10px 0;
}

.rc-video-thumbs strong,
.rc-video-thumbs small {
  grid-column: 1;
}

/* Exterior page hero refresh */
.exterior-hero {
  --sp-hero-image: url("assets/exterior-cleaning-hero-home.png");
  min-height: clamp(520px, 42vw, 660px);
  padding-bottom: clamp(112px, 9vw, 150px);
}

.exterior-hero::before {
  background:
    linear-gradient(90deg, rgba(2, 19, 13, 0.96) 0%, rgba(2, 19, 13, 0.86) 28%, rgba(2, 19, 13, 0.42) 50%, rgba(2, 19, 13, 0.06) 74%),
    var(--sp-hero-image);
  background-position: center right;
  background-size: cover;
}

.exterior-hero .sp-hero-copy {
  max-width: 720px;
}

.exterior-hero .sp-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #6bd43e;
  font-size: clamp(14px, 1.1vw, 18px);
  letter-spacing: 0.12em;
  text-shadow: 0 2px 12px rgba(53, 232, 67, 0.32);
}

.exterior-hero .sp-kicker::after {
  width: 38px;
  height: 2px;
  content: "";
  background: currentColor;
  opacity: 0.7;
}

.exterior-hero h1 {
  color: #fff;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.46);
}

.exterior-hero h1 span {
  color: #70d456;
}

.exterior-hero-perks {
  position: absolute;
  left: clamp(24px, 5vw, 72px);
  right: clamp(24px, 5vw, 72px);
  bottom: clamp(28px, 3vw, 44px);
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: clamp(16px, 3vw, 42px);
  align-items: center;
}

.exterior-hero-perks article {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  color: #fff;
}

.exterior-hero-perks span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(114, 255, 79, 0.52);
  border-radius: 50%;
  color: #78d94f;
  background: rgba(3, 27, 18, 0.68);
  box-shadow: 0 0 0 4px rgba(83, 201, 55, 0.12), 0 10px 24px rgba(0, 0, 0, 0.22);
}

.exterior-hero-perks svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.exterior-hero-perks strong,
.exterior-hero-perks small {
  display: block;
}

.exterior-hero-perks strong {
  font-size: clamp(14px, 1vw, 17px);
  line-height: 1.15;
}

.exterior-hero-perks small {
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(12px, 0.85vw, 14px);
  line-height: 1.25;
}

@media (max-width: 980px) {
  .exterior-hero {
    padding-bottom: clamp(130px, 18vw, 180px);
  }

  .exterior-hero-perks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .exterior-hero::before {
    background:
      linear-gradient(180deg, rgba(2, 19, 13, 0.9), rgba(2, 19, 13, 0.55)),
      var(--sp-hero-image);
    background-position: center;
    background-size: cover;
  }

.exterior-hero-perks {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    grid-template-columns: 1fr;
    margin-top: 32px;
  }
}

/* Final badge cleanup and video thumbnail layout */
.rc-warranty-image-badge,
.rr-warranty-image-badge {
  display: inline-block;
  line-height: 0;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  clip-path: none !important;
  overflow: visible !important;
}

.rc-warranty-image-badge img,
.rr-warranty-image-badge img {
  display: block;
  width: clamp(132px, 11vw, 180px);
  height: auto;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.relife-page .rr-warranty-row .rr-warranty-image-badge {
  width: clamp(108px, 11vw, 168px);
}

.relife-page .rr-warranty-row .rr-warranty-image-badge img {
  width: 100%;
}

.rc-video-showcase {
  padding-bottom: 0;
}

#roof-cleaning-projects {
  padding-top: clamp(34px, 4vw, 56px);
  padding-bottom: clamp(28px, 3.5vw, 46px);
}

.rc-video-thumbs {
  margin-top: 14px;
}

.rc-video-thumbs button {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
  gap: 8px;
}

.rc-video-thumbs button > i {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  display: block;
  overflow: hidden;
  border-radius: 8px;
  line-height: 0;
}

.rc-video-thumbs button > i img {
  display: block;
  width: 100%;
  aspect-ratio: 1.58;
  object-fit: cover;
  border: 3px solid transparent;
  border-radius: 8px;
  box-shadow: 0 14px 30px rgba(17, 34, 29, 0.12);
  transition: border-color 160ms ease, transform 160ms ease;
}

.rc-video-thumbs button.active > i img,
.rc-video-thumbs button:hover > i img {
  border-color: var(--green);
  transform: translateY(-2px);
}

.rc-video-thumbs span {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  display: grid;
  width: 46px;
  height: 46px;
  margin: 0;
  place-items: center;
  border-radius: 50%;
  color: #111a17;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
  line-height: 1;
  transform: translate(-50%, -50%);
}

.rc-video-thumbs b {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  margin: 0;
  padding: 4px 8px;
  border-radius: 6px;
  color: #fff;
  background: rgba(0, 0, 0, 0.72);
  font-size: 12px;
  line-height: 1.1;
}

.rc-video-thumbs strong,
.rc-video-thumbs small {
  grid-column: 1;
}

.rc-video-thumbs strong {
  margin-top: 3px;
}

.rc-video-thumbs small {
  margin-top: -2px;
}

.rc-video-hint {
  display: none !important;
}

.rc-video-thumbs span,
.rc-video-thumbs b {
  display: none !important;
}

/* Exterior services second-screen match */
.exterior-services-section {
  padding-top: clamp(28px, 3vw, 46px);
  padding-bottom: clamp(34px, 3.4vw, 54px);
  background: #fff;
}

.exterior-services-section .rc-heading {
  margin-bottom: clamp(18px, 2vw, 28px);
}

.exterior-service-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(14px, 1.35vw, 22px);
  width: min(1800px, calc(100% - 72px));
  max-width: none;
}

.exterior-service-grid article {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(23, 32, 28, 0.1);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(18, 28, 24, 0.07);
}

.exterior-service-grid img {
  width: 100%;
  height: clamp(116px, 8.8vw, 158px);
  object-fit: cover;
}

.exterior-service-icon {
  position: relative;
  z-index: 2;
  display: grid;
  width: clamp(42px, 3.1vw, 54px);
  height: clamp(42px, 3.1vw, 54px);
  margin: clamp(-26px, -1.55vw, -20px) 0 8px 18px;
  place-items: center;
  border: 1px solid rgba(46, 143, 91, 0.28);
  border-radius: 50%;
  color: var(--green);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 24px rgba(17, 34, 29, 0.12);
}

.exterior-service-icon svg {
  width: 58%;
  height: 58%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.exterior-service-grid h3,
.exterior-service-grid p,
.exterior-service-grid ul {
  margin-left: 18px;
  margin-right: 18px;
}

.exterior-service-grid h3 {
  margin-top: 0;
  margin-bottom: 8px;
  color: #101816;
  font-size: clamp(14px, 0.95vw, 17px);
  line-height: 1.14;
}

.exterior-service-grid p {
  min-height: 4.2em;
  margin-bottom: 12px;
  color: #364640;
  font-size: clamp(12px, 0.78vw, 13px);
  line-height: 1.4;
}

.exterior-service-grid ul {
  display: grid;
  gap: 5px;
  margin-bottom: 18px;
  padding: 0;
  list-style: none;
}

.exterior-service-grid li {
  color: #17221f;
  font-size: clamp(11px, 0.72vw, 12px);
  line-height: 1.24;
  white-space: nowrap;
}

.exterior-service-grid li::before {
  margin-right: 8px;
  color: var(--green);
  content: "✓";
  font-weight: 900;
}

@media (max-width: 1280px) {
  .exterior-service-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: min(1120px, calc(100% - 48px));
  }
}

@media (max-width: 760px) {
  .exterior-service-grid {
    grid-template-columns: 1fr;
    width: min(520px, calc(100% - 36px));
  }

.exterior-service-grid p {
    min-height: 0;
  }
}

/* Exterior benefits with eco panel */
.exterior-benefit-panel {
  display: grid;
  grid-template-columns: minmax(620px, 1fr) minmax(360px, 0.48fr);
  gap: 0;
  width: min(1800px, calc(100% - 72px));
  margin: clamp(22px, 2.5vw, 38px) auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(23, 32, 28, 0.08);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 18px 46px rgba(18, 28, 24, 0.06);
}

.exterior-benefit-main {
  padding: clamp(28px, 3.4vw, 50px) clamp(24px, 3.6vw, 58px);
  background: linear-gradient(90deg, #f8fbf8, #eef6ee);
}

.exterior-benefit-main .rc-heading {
  margin-bottom: clamp(20px, 2.6vw, 38px);
}

.exterior-benefit-grid {
  width: 100%;
  gap: 0;
}

.exterior-benefit-grid article {
  border: 0;
  border-left: 1px solid rgba(23, 32, 28, 0.1);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.exterior-benefit-grid article:first-child {
  border-left: 0;
}

.exterior-benefit-grid b {
  margin-bottom: 18px;
  color: #166c2e;
  background: transparent;
  border: 0;
  font-size: clamp(34px, 3vw, 48px);
}

.exterior-benefit-grid h3 {
  font-size: clamp(14px, 1vw, 17px);
}

.exterior-benefit-grid p {
  max-width: 220px;
  margin-inline: auto;
  font-size: clamp(12px, 0.8vw, 14px);
  line-height: 1.42;
}

.exterior-eco-card {
  position: relative;
  display: grid;
  align-content: start;
  min-height: 260px;
  padding: clamp(34px, 3.2vw, 56px) clamp(28px, 3vw, 48px);
  overflow: hidden;
  border-left: 1px solid rgba(23, 32, 28, 0.08);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0 44%, rgba(255, 255, 255, 0.76) 66%, rgba(255, 255, 255, 0.12)),
    url("assets/exterior-eco-friendly-leaves.png") right bottom / cover no-repeat;
}

.exterior-eco-card > div {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 16px;
  align-items: center;
}

.exterior-eco-card span {
  display: grid;
  width: 50px;
  height: 50px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #50b83f, #197d31);
  box-shadow: 0 10px 26px rgba(28, 113, 47, 0.22);
}

.exterior-eco-card svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.exterior-eco-card h3 {
  margin: 0;
  color: #101816;
  font-size: clamp(20px, 1.65vw, 28px);
  line-height: 1.12;
}

.exterior-eco-card p {
  position: relative;
  z-index: 1;
  max-width: 340px;
  margin: clamp(26px, 2.8vw, 42px) 0 0;
  color: #26332f;
  font-size: clamp(15px, 1vw, 18px);
  line-height: 1.55;
}

@media (max-width: 1080px) {
  .exterior-benefit-panel {
    grid-template-columns: 1fr;
    width: min(1120px, calc(100% - 48px));
  }

  .exterior-eco-card {
    border-left: 0;
    border-top: 1px solid rgba(23, 32, 28, 0.08);
  }
}

@media (max-width: 760px) {
  .exterior-benefit-panel {
    width: min(520px, calc(100% - 36px));
  }

  .exterior-benefit-grid {
    grid-template-columns: 1fr;
  }

  .exterior-benefit-grid article {
    border-left: 0;
    border-top: 1px solid rgba(23, 32, 28, 0.08);
  }

  .exterior-benefit-grid article:first-child {
    border-top: 0;
  }
}

/* Final exterior benefit full-width band */
.exterior-benefit-panel {
  position: relative;
  left: 50%;
  display: grid;
  grid-template-columns: minmax(680px, 1fr) minmax(420px, 0.46fr);
  width: 100vw;
  max-width: none;
  margin: 0 0 0 -50vw;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 24% 48%, rgba(82, 190, 62, 0.1), transparent 24%),
    radial-gradient(circle at 80% 50%, rgba(94, 225, 80, 0.11), transparent 32%),
    linear-gradient(180deg, #020807 0%, #040908 100%);
  box-shadow: none;
  color: #fff;
}

.exterior-benefit-main {
  padding: clamp(50px, 5.2vw, 92px) clamp(44px, 7vw, 150px) clamp(56px, 5.8vw, 104px);
  background: transparent;
}

.exterior-benefit-main .rc-heading {
  margin-bottom: clamp(42px, 4.5vw, 76px);
  text-align: center;
}

.exterior-benefit-main .rc-heading h2 {
  color: #fff;
  font-size: clamp(44px, 4.15vw, 78px);
  line-height: 1;
  text-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
}

.exterior-benefit-main .rc-heading h2 span {
  color: #6dcc48;
}

.exterior-benefit-main .rc-heading > span {
  color: #55bf39;
}

.exterior-benefit-grid article {
  position: relative;
  min-height: 270px;
  padding: 0 clamp(24px, 2.1vw, 42px) 26px;
  border-left-color: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.exterior-benefit-grid article::after {
  display: block;
  width: 112px;
  height: 2px;
  margin: 42px auto 0;
  background: #57bd37;
  content: "";
  box-shadow: 0 0 18px rgba(87, 189, 55, 0.38);
}

.exterior-benefit-grid b {
  display: grid;
  width: clamp(70px, 5vw, 92px);
  height: clamp(70px, 5vw, 92px);
  place-items: center;
  margin: 0 auto 28px;
  border: 0;
  border-radius: 50%;
  color: #64d846;
  background: transparent;
  box-shadow: 0 0 26px rgba(82, 213, 52, 0.28);
  font-size: clamp(44px, 3.8vw, 64px);
  line-height: 1;
}

.exterior-benefit-grid h3 {
  margin-bottom: 22px;
  color: #fff;
  font-size: clamp(18px, 1.4vw, 25px);
  line-height: 1.12;
  text-shadow: 0 10px 22px rgba(0, 0, 0, 0.45);
}

.exterior-benefit-grid p {
  max-width: 250px;
  color: rgba(255, 255, 255, 0.68);
  font-size: clamp(15px, 1.05vw, 19px);
  line-height: 1.55;
}

.exterior-eco-card {
  min-height: clamp(430px, 33vw, 620px);
  margin: clamp(48px, 4.8vw, 86px) clamp(36px, 5vw, 88px) clamp(48px, 4.8vw, 86px) 0;
  padding: clamp(54px, 4.3vw, 82px) clamp(42px, 4.6vw, 82px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 22px;
  background:
    linear-gradient(90deg, rgba(3, 8, 8, 0.92) 0 38%, rgba(3, 8, 8, 0.68) 62%, rgba(3, 8, 8, 0.08)),
    url("assets/exterior-eco-cleaning-leaves-dark.png") right bottom / cover no-repeat;
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.34);
}

.exterior-eco-card span {
  width: clamp(62px, 4.4vw, 78px);
  height: clamp(62px, 4.4vw, 78px);
  color: #76e452;
  background: radial-gradient(circle at 50% 50%, rgba(70, 172, 38, 0.25), rgba(12, 44, 20, 0.6));
  box-shadow: 0 0 28px rgba(82, 219, 48, 0.5), inset 0 0 0 1px rgba(106, 235, 70, 0.82);
}

.exterior-eco-card h3 {
  color: #fff;
  font-size: clamp(21px, 1.65vw, 31px);
}

.exterior-eco-card p {
  max-width: 390px;
  margin-top: clamp(42px, 4vw, 74px);
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(18px, 1.32vw, 25px);
  line-height: 1.55;
}

@media (max-width: 1080px) {
  .exterior-benefit-panel {
    left: auto;
    grid-template-columns: 1fr;
    width: 100%;
    margin-left: 0;
  }
}

/* Requested page-specific refinements */
.training-page .training-hero,
.partner-page .partner-hero {
  min-height: clamp(460px, 36vw, 600px);
  padding-top: clamp(44px, 5.2vw, 76px);
  padding-bottom: clamp(44px, 5.2vw, 76px);
}

.training-page .hero-form-card,
.partner-page .hero-form-card {
  padding: clamp(24px, 2.4vw, 36px);
  border-radius: 22px;
}

.training-page .hero-form-card h2,
.partner-page .hero-form-card h2 {
  font-size: clamp(24px, 1.8vw, 30px);
}

.training-page .hero-form-card > p:not(.sp-kicker),
.partner-page .hero-form-card > p:not(.sp-kicker) {
  margin-bottom: 18px;
}

.training-page .hero-form-card ul,
.partner-page .hero-form-card ul {
  margin-top: 18px;
  gap: 10px;
}

.exterior-cleaning-page .sp-bottom-cta {
  grid-template-columns: minmax(420px, 1fr) minmax(190px, 250px) minmax(240px, 340px);
  gap: clamp(32px, 5vw, 92px);
  align-items: center;
  padding: clamp(42px, 4.6vw, 64px) clamp(48px, 7vw, 104px);
  background:
    linear-gradient(90deg, rgba(2, 24, 17, 0.96), rgba(3, 44, 22, 0.88)),
    url("assets/final-cta-neighborhood.png") center/cover;
}

.exterior-cleaning-page .sp-bottom-cta h2 {
  grid-column: 1;
  font-size: clamp(34px, 3.3vw, 58px);
  line-height: 1.05;
}

.exterior-cleaning-page .sp-bottom-cta p {
  grid-column: 1;
  grid-row: 2;
  max-width: 520px;
  margin: clamp(16px, 1.5vw, 22px) 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(16px, 1.2vw, 22px);
  line-height: 1.45;
}

.exterior-cleaning-page .sp-bottom-cta .btn.primary {
  grid-column: 2;
  grid-row: 1 / span 2;
  justify-self: stretch;
  min-width: clamp(190px, 14vw, 250px);
  min-height: 70px;
  font-size: clamp(17px, 1.2vw, 22px);
}

.exterior-cleaning-page .sp-bottom-cta .btn.secondary.light {
  grid-column: 3;
  grid-row: 1 / span 2;
  justify-self: stretch;
  min-width: clamp(240px, 18vw, 340px);
  min-height: 70px;
  justify-content: center;
  border-color: rgba(255, 255, 255, 0.62);
  background: rgba(7, 22, 17, 0.38);
  font-size: clamp(17px, 1.25vw, 23px);
  font-weight: 900;
}

.exterior-cleaning-page .exterior-benefit-main .rc-heading {
  max-width: none;
  margin-bottom: clamp(26px, 3vw, 44px);
}

.exterior-cleaning-page .exterior-benefit-main .rc-heading h2 {
  display: block;
  white-space: nowrap;
}

.exterior-cleaning-page .exterior-benefit-main .rc-heading h2 span {
  display: inline;
  gap: 0;
  color: #6dcc48;
  font: inherit;
  letter-spacing: 0;
  text-transform: none;
}

.exterior-cleaning-page .exterior-benefit-main .rc-heading h2 span::before,
.exterior-cleaning-page .exterior-benefit-main .rc-heading h2 span::after {
  display: none;
}

.exterior-cleaning-page .exterior-benefit-main {
  padding-top: clamp(36px, 3.8vw, 64px);
  padding-bottom: clamp(38px, 4vw, 68px);
}

.exterior-cleaning-page .exterior-benefit-grid article {
  min-height: 220px;
  padding-bottom: 18px;
}

.exterior-cleaning-page .exterior-benefit-grid b {
  margin-bottom: 20px;
}

.exterior-cleaning-page .exterior-benefit-grid h3 {
  margin-bottom: 16px;
}

.exterior-cleaning-page .exterior-benefit-grid article::after {
  margin-top: 28px;
}

.exterior-cleaning-page .exterior-eco-card {
  min-height: clamp(360px, 28vw, 500px);
  margin-top: clamp(34px, 3.6vw, 58px);
  margin-bottom: clamp(34px, 3.6vw, 58px);
  padding-top: clamp(42px, 3.5vw, 62px);
  padding-bottom: clamp(42px, 3.5vw, 62px);
}

.footer-col strong span,
.footer-contact > strong span,
.footer-contact a span,
.footer-contact > span span {
  display: inline-grid;
  width: 34px;
  height: 34px;
  min-width: 34px;
  place-items: center;
  color: #67bd58;
  font-size: 24px;
  line-height: 1;
  text-align: center;
}

.footer-contact > strong span {
  font-size: 22px;
}

.footer-contact a,
.footer-contact > span {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
}

@media (max-width: 1120px) {
  .exterior-cleaning-page .sp-bottom-cta {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .exterior-cleaning-page .sp-bottom-cta p,
  .exterior-cleaning-page .sp-bottom-cta .btn.primary,
  .exterior-cleaning-page .sp-bottom-cta .btn.secondary.light {
    grid-column: auto;
    grid-row: auto;
    justify-self: start;
  }

  .exterior-cleaning-page .sp-bottom-cta .btn.primary,
  .exterior-cleaning-page .sp-bottom-cta .btn.secondary.light {
    width: min(100%, 420px);
  }

  .exterior-cleaning-page .exterior-benefit-main .rc-heading h2 {
    white-space: normal;
  }
}

/* Coming-soon forms and Roof ReLife hero cleanup */
.hero-form-card input:disabled {
  color: #6a746f;
  background: rgba(244, 245, 244, 0.96);
  cursor: default;
}

.hero-form-card button:disabled {
  cursor: default;
  color: rgba(255, 255, 255, 0.82);
  background: linear-gradient(135deg, #858c88, #626a66);
  box-shadow: none;
}

.relife-page .rr-hero-content {
  top: clamp(70px, 8vw, 118px);
}

.relife-page .rr-relife-logo {
  grid-template-columns: auto;
  gap: 0;
}

.relife-page .rr-relife-logo b {
  font-size: clamp(18px, 1.9vw, 30px);
}

.relife-page .rr-hero-content h1 {
  max-width: 760px;
  margin: 0 auto;
  font-size: clamp(34px, 3.3vw, 52px);
  line-height: 1.04;
}

.relife-page .rr-stage-notes article {
  gap: 0;
}

/* Exterior benefit band height tightening */
.exterior-cleaning-page .exterior-benefit-main {
  padding-top: clamp(24px, 2.6vw, 42px);
  padding-bottom: clamp(22px, 2.8vw, 46px);
}

.exterior-cleaning-page .exterior-benefit-main .rc-heading {
  margin-bottom: clamp(18px, 2.1vw, 30px);
}

.exterior-cleaning-page .exterior-benefit-main .rc-heading h2 {
  font-size: clamp(34px, 3.2vw, 58px);
}

.exterior-cleaning-page .exterior-benefit-grid article {
  min-height: 178px;
  padding-bottom: 8px;
}

.exterior-cleaning-page .exterior-benefit-grid b {
  width: clamp(54px, 4vw, 74px);
  height: clamp(54px, 4vw, 74px);
  margin-bottom: 14px;
  font-size: clamp(34px, 3vw, 50px);
}

.exterior-cleaning-page .exterior-benefit-grid h3 {
  margin-bottom: 10px;
}

.exterior-cleaning-page .exterior-benefit-grid p {
  line-height: 1.38;
}

.exterior-cleaning-page .exterior-benefit-grid article::after {
  width: 96px;
  margin-top: 16px;
}

.exterior-cleaning-page .exterior-eco-card {
  min-height: clamp(280px, 22vw, 390px);
  margin-top: clamp(22px, 2.3vw, 38px);
  margin-bottom: clamp(22px, 2.3vw, 38px);
  padding-top: clamp(28px, 2.6vw, 46px);
  padding-bottom: clamp(28px, 2.6vw, 46px);
}

.exterior-cleaning-page .exterior-eco-card p {
  margin-top: clamp(24px, 2.6vw, 42px);
  line-height: 1.42;
}

/* Review card format alignment */
.sp-mini-reviews small {
  display: block;
  margin: 0 0 6px;
  color: #f2a500;
  font-size: clamp(14px, 1vw, 18px);
  line-height: 1.25;
}

.sp-mini-reviews strong {
  margin-bottom: 8px;
}

.roof-cleaning-reviews {
  width: min(1440px, calc(100% - 40px));
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.roof-cleaning-reviews article {
  min-height: 210px;
}

/* Roof ReLife hero text layout */
.relife-page .rr-hero-content {
  top: 0;
  left: 50%;
  display: grid;
  grid-template-columns: minmax(420px, 0.92fr) minmax(360px, 0.72fr);
  gap: clamp(42px, 9vw, 160px);
  width: min(1540px, 84vw);
  height: 50%;
  padding-top: clamp(28px, 3vw, 48px);
  padding-bottom: clamp(18px, 2vw, 32px);
  transform: translateX(-50%);
  text-align: left;
  align-items: center;
  box-sizing: border-box;
}

.relife-page .rr-hero-copy {
  max-width: 720px;
}

.relife-page .rr-hero-kicker {
  margin: 0 0 clamp(10px, 1.2vw, 18px);
  color: #358c2c;
  font-size: clamp(13px, 1vw, 18px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.relife-page .rr-hero-content h1 {
  max-width: 720px;
  margin: 0;
  color: #0b1110;
  font-size: clamp(32px, 3.05vw, 50px);
  line-height: 0.98;
  text-align: left;
}

.relife-page .rr-hero-content h1 span {
  display: block;
  margin-top: clamp(6px, 0.8vw, 10px);
  color: #4d9233;
}

.relife-page .rr-hero-copy > p:not(.rr-hero-kicker) {
  max-width: 620px;
  margin: clamp(12px, 1.3vw, 20px) 0 0;
  color: #1b2a27;
  font-size: clamp(15px, 1.05vw, 19px);
  line-height: 1.32;
}

.relife-page .rr-hero-points {
  display: grid;
  align-self: stretch;
  align-content: center;
  gap: clamp(8px, 1vw, 16px);
}

.relife-page .rr-hero-points article {
  display: grid;
  grid-template-columns: clamp(42px, 3vw, 54px) 1fr;
  gap: clamp(12px, 1.2vw, 18px);
  align-items: center;
  padding-bottom: clamp(6px, 0.8vw, 10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.58);
}

.relife-page .rr-hero-points article:last-child {
  border-bottom: 0;
}

.relife-page .rr-hero-points span {
  display: grid;
  width: clamp(42px, 3vw, 54px);
  height: clamp(42px, 3vw, 54px);
  place-items: center;
  border-radius: 50%;
  color: #5c9d36;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 16px 40px rgba(27, 54, 42, 0.1);
  font-size: clamp(21px, 1.65vw, 28px);
  font-weight: 900;
}

.relife-page .rr-hero-points strong {
  display: block;
  color: #101b18;
  font-size: clamp(14px, 1vw, 18px);
  line-height: 1.12;
}

.relife-page .rr-hero-points em {
  display: block;
  color: #4d9233;
  font-style: normal;
}

.relife-page .rr-hero-points p {
  margin: 4px 0 0;
  color: rgba(17, 29, 26, 0.72);
  font-size: clamp(12px, 0.78vw, 14px);
  line-height: 1.2;
}

@media (max-width: 980px) {
  .roof-cleaning-reviews {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .relife-page .rr-hero-content {
    grid-template-columns: 1fr;
    gap: 28px;
    height: auto;
  }
}

/* Roof ReLife hero text-only refinements */
.relife-page .rr-hero-content {
  top: 0;
  height: 42%;
  padding-top: clamp(10px, 1.2vw, 22px);
  padding-bottom: 0;
  background: transparent;
  background-image: none;
}

.relife-page .rr-hero-content::before,
.relife-page .rr-hero-content::after,
.relife-page .rr-hero-copy::before,
.relife-page .rr-hero-copy::after {
  display: none;
  content: none;
}

.relife-page .rr-hero-copy {
  display: block;
  padding: 0;
  background: transparent;
  background-image: none;
  box-shadow: none;
}

.relife-page .rr-hero-copy,
.relife-page .rr-hero-copy *,
.relife-page .rr-hero-content,
.relife-page .rr-hero-content * {
  background-image: none;
}

.relife-page .rr-hero-copy > p:not(.rr-hero-kicker) {
  display: none;
}

.relife-page .rr-hero-kicker,
.relife-page .rr-hero-content h1,
.relife-page .rr-hero-points {
  transform: translateY(-15%);
}

/* Free Quote hero refresh */
.quote-landing-hero {
  position: relative;
  min-height: clamp(430px, 38vw, 600px);
  display: grid;
  align-items: center;
  overflow: hidden;
  padding: clamp(54px, 6vw, 88px) clamp(28px, 7vw, 96px);
  color: #fff;
  background:
    linear-gradient(90deg, rgba(0, 16, 13, 0.97) 0%, rgba(0, 18, 14, 0.88) 31%, rgba(0, 18, 14, 0.42) 52%, rgba(0, 0, 0, 0.04) 100%),
    linear-gradient(0deg, rgba(0, 10, 8, 0.62), rgba(0, 0, 0, 0) 42%),
    url("assets/quote-hero-consultation.png") center / cover no-repeat;
}

.quote-landing-copy {
  position: relative;
  z-index: 1;
  width: min(560px, 48vw);
}

.quote-landing-copy h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(36px, 3.55vw, 56px);
  line-height: 1.08;
  letter-spacing: 0;
}

.quote-landing-copy h1 span {
  display: block;
  color: #66c84f;
}

.quote-landing-copy > p:not(.sp-kicker) {
  max-width: 490px;
  margin: clamp(16px, 1.8vw, 24px) 0 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(15px, 1.05vw, 19px);
  line-height: 1.42;
}

.quote-landing-perks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 38px);
  margin-top: clamp(26px, 3vw, 42px);
}

.quote-landing-perks article {
  min-width: 0;
}

.quote-landing-perks b {
  display: grid;
  width: clamp(34px, 2.7vw, 46px);
  height: clamp(34px, 2.7vw, 46px);
  place-items: center;
  margin-bottom: 10px;
  border: 2px solid rgba(102, 200, 79, 0.8);
  border-radius: 50%;
  color: #72dd58;
  font-size: clamp(16px, 1.3vw, 22px);
  line-height: 1;
}

.quote-landing-perks strong,
.quote-landing-perks span {
  display: block;
}

.quote-landing-perks strong {
  margin-bottom: 4px;
  color: #fff;
  font-size: clamp(13px, 0.9vw, 16px);
  font-weight: 900;
}

.quote-landing-perks span {
  color: rgba(255, 255, 255, 0.84);
  font-size: clamp(11px, 0.78vw, 13px);
  line-height: 1.28;
}

.quote-landing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  margin-top: clamp(28px, 3.5vw, 50px);
}

.quote-hero-button,
.quote-hero-phone {
  min-height: clamp(52px, 4.2vw, 70px);
  border-radius: 8px;
  color: #fff;
  font-weight: 900;
  text-decoration: none;
}

.quote-hero-button {
  display: inline-grid;
  min-width: clamp(190px, 13vw, 250px);
  place-items: center;
  padding: 0 24px;
  background: linear-gradient(135deg, #41b45d, #168b20);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.2);
}

.quote-hero-phone {
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 10px;
  align-items: center;
  min-width: clamp(170px, 12vw, 220px);
  padding: 0 22px;
  border: 1px solid rgba(255, 255, 255, 0.52);
  background: rgba(0, 0, 0, 0.14);
}

.quote-hero-phone svg {
  grid-row: 1 / 3;
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.quote-hero-phone span {
  color: rgba(255, 255, 255, 0.86);
  font-size: 12px;
  line-height: 1;
}

.quote-hero-phone strong {
  color: #fff;
  font-size: clamp(15px, 1vw, 18px);
  line-height: 1;
}

.quote-scroll-cue {
  position: absolute;
  right: clamp(64px, 10vw, 150px);
  bottom: clamp(34px, 4vw, 62px);
  z-index: 1;
  display: grid;
  width: clamp(58px, 4.8vw, 82px);
  height: clamp(58px, 4.8vw, 82px);
  place-items: center;
  border-radius: 50%;
  color: #111d1a;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.22);
  font-size: clamp(32px, 3vw, 48px);
  line-height: 1;
  text-decoration: none;
}

/* Latest Roof ReLife hero text/icon placement */
.relife-page .rr-hero-content {
  height: 50%;
  padding-top: clamp(20px, 2.2vw, 38px);
  padding-bottom: clamp(6px, 0.8vw, 12px);
  align-items: center;
}

.relife-page .rr-hero-copy {
  transform: translateY(18%);
}

.relife-page .rr-hero-kicker {
  display: none;
}

.relife-page .rr-hero-content h1 {
  max-width: 720px;
  color: #0b1110;
  font-size: var(--page-hero-title-size);
  line-height: 1.08;
  transform: none;
}

.relife-page .rr-hero-content h1 span {
  display: block;
  margin-top: 0;
  color: #66c754;
  font-size: inherit;
  line-height: inherit;
}

.relife-page .rr-hero-points {
  align-self: center;
  align-content: center;
  gap: clamp(10px, 1.15vw, 18px);
  transform: translateY(22%);
}

.relife-page .rr-hero-points article {
  grid-template-columns: clamp(48px, 3.5vw, 64px) 1fr;
  gap: clamp(14px, 1.4vw, 22px);
}

.relife-page .rr-hero-points span {
  width: clamp(48px, 3.5vw, 64px);
  height: clamp(48px, 3.5vw, 64px);
}

.hero-bold-copy {
  font-weight: 800;
}

.relife-page .rr-hero-lede {
  display: block !important;
  max-width: 620px;
  margin: clamp(12px, 1.2vw, 18px) 0 0;
  color: #0b1110;
  font-size: clamp(16px, 1.05vw, 19px);
  font-weight: 800;
  line-height: 1.36;
}

/* Free Quote form scale and step alignment */
.quote-form-page .quote-layout {
  align-items: start;
}

.quote-step-form {
  zoom: 0.82;
}

.quote-step {
  min-width: 0;
  padding-left: 54px;
}

.quote-step::before {
  left: 19px;
}

.quote-step-title {
  min-height: 38px;
  padding-top: 0;
}

.quote-step-title > b {
  left: 0;
  top: 0;
}

.quote-step-title span {
  min-width: 0;
  padding-top: 1px;
}

.quote-step-title strong,
.quote-step-title em,
.quote-step-title small {
  overflow-wrap: normal;
  word-break: normal;
}

.quote-service-grid-featured label {
  min-width: 0;
}

.quote-source-row {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.quote-source-row label {
  min-width: 0;
  padding: 0 8px;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
}

@supports not (zoom: 1) {
  .quote-step-form {
    transform: scale(0.82);
    transform-origin: top left;
    width: 122%;
  }
}

@media (max-width: 900px) {
  .quote-landing-hero {
    min-height: 620px;
    align-items: end;
    background-position: 58% center;
  }

  .quote-landing-copy {
    width: min(100%, 560px);
  }

  .quote-landing-perks {
    grid-template-columns: 1fr;
  }

  .quote-scroll-cue {
    right: 24px;
    bottom: 24px;
  }

  .relife-page .rr-hero-content {
    height: auto;
  }

  .quote-step-form {
    zoom: 1;
    transform: none;
    width: 100%;
    margin-bottom: 0;
  }

  .quote-source-row {
    grid-template-columns: 1fr;
  }
}

/* Mobile-only homepage hero polish. Desktop hero styles stay untouched. */
@media (max-width: 700px) {
  .hero {
    min-height: 780px;
    align-items: flex-start;
  }

  .hero::after {
    height: 150px;
    background: linear-gradient(180deg, rgba(7, 17, 19, 0), rgba(7, 17, 19, 0.62) 100%);
  }

  .compare-image {
    object-position: 58% top;
  }

  .hero-overlay {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.88) 35%, rgba(255, 255, 255, 0.34) 58%, rgba(5, 15, 15, 0.45) 100%),
      linear-gradient(90deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.2) 62%, transparent 100%);
  }

  .compare-line {
    z-index: 8;
  }

  .compare-line span {
    top: 44%;
    width: 48px;
    height: 48px;
  }

  .clean-message,
  .growth-markers,
  .compare-label {
    display: none;
  }

  .hero-content {
    z-index: 12;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 42px 20px 0;
    color: var(--ink);
  }

  .hero-kicker {
    margin-bottom: 16px;
    font-size: 13px;
    letter-spacing: 0.08em;
  }

  .hero-system-title {
    display: flex;
    flex-wrap: wrap;
    column-gap: 10px;
    row-gap: 7px;
    max-width: 330px;
    margin-bottom: 18px;
    color: var(--ink);
    font-size: clamp(36px, 10.6vw, 46px);
    line-height: 1.04;
    white-space: normal;
  }

  .hero-system-title b {
    width: 7px;
    height: 7px;
    margin-top: 0.48em;
  }

  .hero-system-title::after {
    top: 178px;
    left: 20px;
    width: 48px;
    height: 3px;
  }

  .hero-system-copy {
    max-width: 330px;
    margin-bottom: 22px;
    color: #17221e;
    font-size: 15px;
    line-height: 1.48;
    font-weight: 650;
  }

  .hero-service-icons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 330px;
    margin-bottom: 22px;
    padding: 12px 6px;
    border: 1px solid rgba(31, 61, 45, 0.1);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.68);
    box-shadow: 0 16px 34px rgba(15, 23, 21, 0.08);
    backdrop-filter: blur(8px);
  }

  .hero-service-icons span {
    min-height: 74px;
    gap: 6px;
    padding: 8px 10px;
    border-right: 0;
  }

  .hero-service-icons svg {
    width: 30px;
    height: 30px;
  }

  .hero-service-icons strong {
    color: var(--ink);
    font-size: 13px;
  }

  .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    max-width: 330px;
  }

  .hero-actions .btn {
    width: 100%;
    justify-content: center;
    min-height: 54px;
    padding: 0 18px;
    font-size: 16px;
  }
}

/* Mobile-only Roof ReLife hero polish. Desktop hero styles stay untouched. */
@media (max-width: 700px) {
  .relife-page .rr-hero.rr-hero-art {
    min-height: 760px;
    background: #e8f4fb;
  }

  .relife-page .rr-hero.rr-hero-art img {
    height: 760px;
    object-position: center bottom;
  }

  .relife-page .rr-hero-content {
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    transform: none;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 30px 18px 0;
    align-items: start;
    text-align: left;
  }

  .relife-page .rr-hero-copy {
    max-width: 100%;
    transform: none;
  }

  .relife-page .rr-hero-content h1 {
    max-width: 340px;
    color: #0b1110;
    font-size: clamp(36px, 10.8vw, 46px);
    line-height: 1.02;
  }

  .relife-page .rr-hero-content h1 span {
    color: #4f9936;
  }

  .relife-page .rr-hero-lede {
    max-width: 342px;
    margin-top: 10px;
    color: #14221f;
    font-size: 14px;
    line-height: 1.34;
    font-weight: 800;
  }

  .relife-page .rr-hero-points {
    width: 100%;
    max-width: 356px;
    margin-top: 4px;
    padding: 10px 12px;
    border: 1px solid rgba(46, 91, 63, 0.16);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 18px 38px rgba(14, 28, 26, 0.08);
    backdrop-filter: blur(9px);
    transform: none;
    gap: 8px;
  }

  .relife-page .rr-hero-points article {
    grid-template-columns: 38px 1fr;
    gap: 10px;
    padding: 0 0 8px;
    border-bottom: 1px solid rgba(46, 91, 63, 0.14);
  }

  .relife-page .rr-hero-points article:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .relife-page .rr-hero-points span {
    width: 38px;
    height: 38px;
    color: #4f9936;
    background: rgba(255, 255, 255, 0.92);
    font-size: 20px;
  }

  .relife-page .rr-hero-points strong {
    color: #0b1110;
    font-size: 14px;
    line-height: 1.12;
  }

  .relife-page .rr-hero-points p {
    margin-top: 2px;
    color: rgba(17, 29, 26, 0.72);
    font-size: 12px;
    line-height: 1.24;
  }

  .relife-page .rr-stage-notes {
    left: 16px;
    right: 16px;
    bottom: 24px;
    width: auto;
    grid-template-columns: 1fr;
    gap: 8px;
    transform: none;
    text-align: left;
  }

  .relife-page .rr-stage-notes article {
    justify-items: stretch;
  }

  .relife-page .rr-stage-notes b {
    width: 100%;
    min-height: 42px;
    justify-content: flex-start;
    padding: 7px 13px;
    border-radius: 9px;
    font-size: 12px;
    letter-spacing: 0.01em;
  }

  .relife-page .rr-stage-notes b span {
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
  }
}

/* Mobile-only Roof ReLife package layout. Keeps desktop package untouched. */
@media (max-width: 700px) {
  .relife-page .rr-package {
    width: 100%;
    overflow: hidden;
    padding: 34px 22px 36px;
  }

  .relife-page .rr-package-top {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    width: 100%;
    max-width: none;
  }

  .relife-page .rr-package-top > div:first-child,
  .relife-page .rr-package-steps,
  .relife-page .rr-includes {
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  .relife-page .rr-package-top h2 {
    font-size: 40px;
    line-height: 1.08;
  }

  .relife-page .rr-package-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .relife-page .rr-package-steps article {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: 54px 1fr;
    column-gap: 14px;
    align-items: start;
    padding: 18px 16px;
  }

  .relife-page .rr-package-steps article b {
    position: static;
    width: 48px;
    height: 48px;
    margin: 0;
    grid-row: 1 / span 2;
    transform: none;
  }

  .relife-page .rr-package-steps article h3,
  .relife-page .rr-package-steps article p {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .relife-page .rr-package-steps article h3 {
    margin: 0 0 8px;
    font-size: 22px;
    line-height: 1.08;
  }

  .relife-page .rr-package-steps article p {
    margin: 0;
    font-size: 16px;
    line-height: 1.45;
  }

  .relife-page .rr-includes {
    padding: 22px 18px;
  }

  .relife-page .rr-warranty-row {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .relife-page .rr-warranty-row article {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 14px;
    align-items: center;
  }

  .relife-page .rr-warranty-badge-img {
    width: 84px;
    height: auto;
  }
}

/* Final mobile-only fixes for live QA. Desktop/tablet layouts stay untouched. */
@media (max-width: 700px) {
  .hero .hero-compare,
  .hero .compare-range,
  .hero .compare-drag-layer,
  .hero .compare-line {
    pointer-events: none !important;
    touch-action: pan-y !important;
  }

  .hero-content {
    padding-top: clamp(86px, 24vw, 122px) !important;
  }

  .hero-system-title {
    max-width: min(330px, calc(100vw - 44px)) !important;
  }

  .relife-page .rr-hero-content {
    padding-top: clamp(86px, 24vw, 122px) !important;
  }

  .rc-process-row b {
    display: none !important;
  }

  .rc-process-row article {
    grid-template-columns: 82px minmax(0, 1fr) !important;
    column-gap: 16px !important;
  }

  .rc-process-row h3,
  .rc-process-row p {
    min-width: 0 !important;
  }

  .rc-growth-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 20px !important;
    overflow: visible !important;
  }

  .rc-growth-row article {
    display: grid !important;
    grid-template-columns: 78px minmax(0, 1fr) !important;
    column-gap: 16px !important;
    row-gap: 4px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    align-items: center !important;
    text-align: left !important;
  }

  .rc-growth-row article img {
    grid-row: 1 / span 2;
    width: 72px !important;
    height: 72px !important;
    object-fit: cover;
  }

  .rc-growth-row article h3 {
    margin: 0 !important;
    font-size: 22px !important;
    line-height: 1.12 !important;
  }

  .rc-growth-row article p {
    margin: 0 !important;
    max-width: none !important;
    min-width: 0 !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    overflow-wrap: normal !important;
  }
}