/* Services page — shared Home page system with service-specific layouts. */
.services-hero { position: relative; display: grid; min-height: min(640px, calc(100svh - 118px)); align-items: center; overflow: hidden; color: #fff; isolation: isolate; }
.services-hero__image { position: absolute; z-index: -2; inset: 0; background: url('../assets/images/services-hero-electrician.jpg') center 48% / cover no-repeat; transform: scale(1.02); }
.services-hero__overlay { position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(4, 20, 33, .96) 0%, rgba(5, 24, 40, .78) 48%, rgba(7, 23, 36, .3) 100%); }
.services-hero__content { padding: 96px 0 146px; }
.services-hero h1 { max-width: 790px; color: #fff; font: 800 clamp(2.7rem, 5.25vw, 5rem) / 1.08 var(--sans-display); letter-spacing: -.055em; }

.service-entry { padding: clamp(100px, 10vw, 145px) 0; background: var(--bg-primary); }
.service-entry--tint { background: var(--surface); }
.service-entry__grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(380px, .82fr); align-items: center; gap: clamp(55px, 8vw, 122px); }
.service-entry__grid--reverse .service-entry__media { grid-column: 1; grid-row: 1; }
.service-entry__grid--reverse .service-entry__copy { grid-column: 2; grid-row: 1; }
.service-entry__number { display: block; margin-bottom: 24px; color: var(--signal); font: 700 .68rem var(--sans-display); letter-spacing: .13em; }
.service-entry h2, .services-support__heading h2 { max-width: 620px; color: var(--ink); font: 800 clamp(2.1rem, 3.35vw, 3.1rem) / 1.16 var(--sans-display); letter-spacing: -.045em; }
.service-entry__copy > p { max-width: 630px; margin-top: 20px; color: var(--ink-soft); font-size: .96rem; line-height: 1.75; }
.service-entry__copy ul { display: grid; gap: 7px 24px; max-width: 700px; margin: 24px 0 0; padding: 0; color: var(--ink-soft); font-size: .9rem; line-height: 1.55; list-style: none; }
.service-entry__copy li { position: relative; padding-left: 16px; }
.service-entry__copy li::before { position: absolute; top: .62em; left: 0; width: 5px; height: 5px; background: var(--signal); content: ''; }
.service-entry__copy .button { margin-top: 28px; }
.service-entry__media { position: relative; min-height: 555px; overflow: hidden; }
.service-entry__media::after { position: absolute; inset: 18px -18px -18px 18px; z-index: -1; border: 1px solid var(--signal); content: ''; }
.service-entry__media img { width: 100%; height: 100%; min-height: 555px; object-fit: cover; filter: saturate(.82); }

.services-support { padding: clamp(105px, 11vw, 155px) 0; background: var(--navy); }
.services-support__heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, .5fr); gap: 30px 80px; align-items: end; margin-bottom: 58px; }
.services-support__heading h2 { color: #fff; }
.services-support__heading p { margin-bottom: 5px; color: #c4d2dd; font-size: .96rem; line-height: 1.7; }
.support-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255, 255, 255, .18); }
.support-card { min-height: 268px; padding: 30px 30px 34px; border-right: 1px solid rgba(255, 255, 255, .18); border-bottom: 1px solid rgba(255, 255, 255, .18); transition: background .25s ease; }
.support-card:nth-child(3n + 1) { border-left: 1px solid rgba(255, 255, 255, .18); }
.support-card:hover { background: rgba(255, 255, 255, .06); }
.support-card__icon { display: grid; width: 38px; height: 38px; margin-bottom: 27px; place-items: center; color: #fff; }
.support-card__icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.support-card h3 { color: #fff; font: 700 1.13rem var(--sans-display); letter-spacing: -.025em; }
.support-card p { margin-top: 12px; color: #c4d2dd; font-size: .88rem; line-height: 1.66; }

.services-cta { position: relative; display: grid; min-height: 500px; align-items: center; overflow: hidden; color: #fff; isolation: isolate; }
.services-cta__image { position: absolute; z-index: -2; inset: 0; background: url('../assets/images/power-generation.jpg') center / cover no-repeat; }
.services-cta__overlay { position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(4, 20, 33, .94), rgba(4, 20, 33, .56)); }
.services-cta__content { max-width: 670px; padding: 75px 0; }
.services-cta h2 { color: #fff; font: 800 clamp(2.25rem, 3.85vw, 3.7rem) / 1.1 var(--sans-display); letter-spacing: -.05em; }
.services-cta p { max-width: 550px; margin: 20px 0 30px; color: rgba(255, 255, 255, .84); font-size: 1rem; line-height: 1.7; }

@media (max-width: 900px) {
  .service-entry__grid, .services-support__heading { grid-template-columns: 1fr; }
  .service-entry__grid--reverse .service-entry__media, .service-entry__grid--reverse .service-entry__copy { grid-column: auto; grid-row: auto; }
  .service-entry__media { max-width: 680px; }
  .support-grid { grid-template-columns: repeat(2, 1fr); }
  .support-card:nth-child(3n + 1) { border-left: none; }
  .support-card:nth-child(2n + 1) { border-left: 1px solid rgba(255, 255, 255, .18); }
}

@media (max-width: 620px) {
  .services-hero { min-height: 590px; }
  .services-hero__overlay { background: linear-gradient(90deg, rgba(4, 20, 33, .96), rgba(4, 20, 33, .6)); }
  .services-hero__content { padding: 75px 0 100px; }
  .services-hero h1 { font-size: clamp(2.45rem, 12vw, 3.2rem); }
  .service-entry, .services-support { padding: 100px 0; }
  .service-entry__grid { gap: 52px; }
  .service-entry__media, .service-entry__media img { min-height: 390px; }
  .service-entry__media::after { inset: 12px -12px -12px 12px; }
  .service-entry__copy ul { gap: 7px; }
  .services-support__heading { gap: 18px; margin-bottom: 43px; }
  .support-grid { grid-template-columns: 1fr; }
  .support-card, .support-card:nth-child(2n + 1) { min-height: auto; padding: 27px 24px 29px; border-left: 1px solid rgba(255, 255, 255, .18); }
  .support-card__icon { margin-bottom: 19px; }
  .services-cta { min-height: 455px; }
  .services-cta__content { padding: 64px 0; }
}
