.service-hero { position: relative; min-height: 620px; display: flex; align-items: center; overflow: hidden; color: var(--white); background: var(--navy); }
.service-hero-image { position: absolute; inset: 0; background-position: center; background-size: cover; }
.service-hero-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(4 22 37 / 96%) 0%, rgb(6 31 51 / 82%) 48%, rgb(6 31 51 / 25%) 100%); }
.gutter-hero .service-hero-image { background-image: url("assets/stock/gutter-cleaning.jpeg"); }
.roof-hero .service-hero-image { background-image: url("assets/stock/roof-soft-washing.jpeg"); }
.service-hero-content { position: relative; z-index: 2; max-width: 760px; padding-block: 95px 120px; }
.service-hero h1 { max-width: 760px; margin: 0; font: 900 clamp(4.6rem, 9vw, 7.8rem)/.86 var(--display); letter-spacing: -.035em; text-transform: uppercase; text-wrap: balance; }
.service-hero h1 em { color: transparent; -webkit-text-stroke: 2px var(--blue); text-shadow: 5px 5px 0 rgb(18 168 224 / 15%); }
.service-hero .hero-lede { max-width: 630px; }
.service-breadcrumb { display: flex; align-items: center; gap: 8px; margin-bottom: 28px; color: #b9d6e4; font-size: .72rem; font-weight: 700; }
.service-breadcrumb a { color: var(--white); }
.service-breadcrumb svg { width: 14px; }

.service-overview { background: var(--foam); }
.service-overview-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 90px; align-items: start; }
.service-overview-copy > p:not(.eyebrow) { margin: 0 0 20px; color: var(--muted); }
.service-points { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin: 30px 0 0; padding: 0; list-style: none; }
.service-points li { display: flex; align-items: center; gap: 10px; color: var(--navy); font-size: .8rem; font-weight: 800; }
.service-points svg { width: 20px; color: var(--orange); flex: 0 0 auto; }

.service-benefits { background: var(--white); }
.service-benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.service-benefit { padding: 34px 30px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.service-benefit > span { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 13px; color: var(--blue); background: var(--blue-light); }
.service-benefit svg { width: 24px; }
.service-benefit h3 { margin: 24px 0 10px; color: var(--navy); font: 800 1.5rem/1 var(--display); text-transform: uppercase; }
.service-benefit p { margin: 0; color: var(--muted); font-size: .82rem; }

.service-process { color: var(--white); background: var(--navy); }
.service-process .section-heading h2 { color: var(--white); }
.service-process .section-heading > p:last-child { color: #bcd0db; }
.service-process-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 45px; }
.service-process-step { position: relative; padding-top: 28px; border-top: 1px solid rgb(255 255 255 / 22%); }
.service-process-step > span { display: block; margin-bottom: 18px; color: var(--orange); font: 900 1rem var(--display); }
.service-process-step h3 { margin: 0 0 10px; color: var(--white); font: 800 1.55rem/1 var(--display); text-transform: uppercase; }
.service-process-step p { margin: 0; color: #bcd0db; font-size: .82rem; }

.service-faq { background: var(--foam); }
.service-final .button { margin-top: 5px; }

@media (max-width: 820px) {
  .service-hero { min-height: 570px; }
  .service-hero-content { padding-block: 80px 100px; }
  .service-overview-grid { grid-template-columns: 1fr; gap: 42px; }
  .service-benefit-grid { grid-template-columns: 1fr; }
  .service-process-grid { gap: 25px; }
}

@media (max-width: 600px) {
  .service-hero { min-height: 640px; align-items: flex-end; }
  .service-hero-image::after { background: linear-gradient(0deg, rgb(4 22 37 / 98%) 0%, rgb(4 22 37 / 84%) 63%, rgb(4 22 37 / 20%) 100%); }
  .service-hero-content { padding-block: 180px 75px; }
  .service-hero h1 { font-size: clamp(4rem, 20vw, 5.5rem); }
  .service-hero .hero-actions { align-items: stretch; }
  .service-points { grid-template-columns: 1fr; }
  .service-process-grid { grid-template-columns: 1fr; gap: 42px; }
}