/* Services — page-specific CSS.
   Shared pieces (tokens, reset, buttons, page hero, .sec-intro, .chk, CTA, footer) are in
   shell.css. Ported verbatim from the approved design, services.html.

   Note on the layout: all eight services are equal full-width alternating rows. There is no
   "three core + five secondary" split — that was cut during design review and should not be
   reintroduced. */

/* ---------- OVERRIDES OF SHELL DEFAULTS ---------- */
/* shell.css carries the About/homepage values for these three; Services genuinely differs.
   Caught by tools/csscheck.py, not by eye — comparing selector names alone hides this, and
   the tighter check spacing alone made every service row 6px too tall. */
.page-hero-bg img{object-position:center 62%}
.checks{gap:14px 26px}
.chk .pt svg{width:18px;height:18px}

/* two stacked intro paragraphs under the section heading */
.sec-intro + .sec-intro{margin-top:14px}

/* ---------- JUMP LINKS ---------- */
/* 940px is deliberate, not a round number: it wraps the eight pills 4 + 4 rather than 5 + 3. */
.jump-frame{
  max-width:940px;margin:34px auto 0;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);
  padding:26px 30px;position:relative;overflow:hidden;
}
/* the pills themselves, and the frame's blue top rule, are in shell.css - Products uses them too */

/* ---------- SERVICE ROWS ---------- */
/* scroll-margin-top clears the 104px sticky header when a jump link lands on a row. */
.svc-row{padding:52px 0;scroll-margin-top:118px}
.svc-row .inner{display:grid;grid-template-columns:1fr 1.08fr;gap:56px;align-items:center}
.svc-row.rev .inner{grid-template-columns:1.08fr 1fr}
.svc-row.rev .svc-media{order:2}
/* Alternating background. The design set this inline per section; every .rev row was the grey
   one, so the class carries it and the markup stays clean. */
.svc-row{background:#fff}
.svc-row.rev{background:var(--bg-gray)}
.svc-media{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-md)}
.svc-media img{width:100%;height:400px;object-fit:cover}
/* left-aligned twin of the .sec-title.under rule */
.svc-body h2{font-size:31px;font-weight:700;line-height:1.22;position:relative;padding-bottom:18px;margin-bottom:22px}
.svc-body h2::after{content:"";position:absolute;left:0;bottom:0;width:56px;height:3px;background:var(--blue)}
.svc-body p{color:var(--slate);font-size:15px;margin-bottom:15px}
.svc-body .subhead{
  font-family:'Poppins';font-weight:600;font-size:12.5px;letter-spacing:1.3px;
  text-transform:uppercase;color:var(--navy);margin:24px 0 14px;
}

/* ---------- WHY STORMWATER ---------- */
.why{position:relative;background:var(--navy);color:#fff;overflow:hidden}
.why-bg{position:absolute;inset:0;z-index:0}
.why-bg img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.why-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,28,44,.93),rgba(10,28,44,.97))}
.why .wrap{position:relative;z-index:1}
.why .eyebrow{color:var(--blue-bright)}
.why .sec-title{color:#fff}
.why .sec-title.under::after{background:var(--blue-bright)}
.why .lead{max-width:640px;margin:22px auto 0;color:#b3c4d2;font-size:15.5px}
.pt4{display:grid;grid-template-columns:repeat(4,1fr);gap:28px 36px;margin-top:40px;text-align:left}
.pt4 .p{position:relative;padding:2px 0 2px 17px}
/* The pointer: a small mark where each point begins. It replaced an icon tile, then a
   numeral, and is the third and plainest version - the heading already says what the point
   is, so the marker only has to show where one stops and the next starts. */
.pt4 .p::before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;
  border-radius:50%;background:var(--blue-bright)}
.pt4 h3{font-size:16px;font-weight:600;color:#fff;margin-bottom:8px;line-height:1.3}
.pt4 p{font-size:13.5px;color:#a8bccd;line-height:1.55}

/* ---------- PRODUCTS CROSS-LINK ---------- */
.xlink{background:#fff}
.xlink .inner{display:grid;grid-template-columns:.72fr 1fr;gap:48px;align-items:center}
.xlink-img img{width:100%;height:230px;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.xlink h2{font-size:26px;font-weight:700;margin-bottom:14px;line-height:1.25}
.xlink p{color:var(--slate);font-size:15px;margin-bottom:22px;max-width:620px}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1024px){
  .svc-row .inner,.svc-row.rev .inner,.xlink .inner{grid-template-columns:1fr;gap:38px}
  /* stacked, the image goes back above the text on every row */
  .svc-row.rev .svc-media{order:0}
  .svc-media img{height:330px}
  .pt4{grid-template-columns:1fr 1fr}
  .xlink-img img{height:260px}
}
@media(max-width:680px){
  .svc-row{padding:38px 0}
  .brk{display:none}           /* let the long heading wrap naturally on phones */
  .svc-body h2{font-size:25px}
  .xlink h2{font-size:22px}
  .pt4{grid-template-columns:1fr}
  .jump-frame{padding:22px 16px;margin-top:28px}
}