/* Shell — everything shared across pages: tokens, reset, typography, buttons, header,
   CTA band, footer, motion. Per-page CSS goes in assets/css/pages/<slug>.css.

   Ported verbatim from the approved design (stormwater-website/index.html). Values are not
   rounded or "tidied": the acceptance test is a pixel diff against that file, so a 13.5px
   stays 13.5px. */

/* ---------- TOKENS ---------- */
:root{
  --navy:#0d2438;
  --navy-2:#0a1c2c;
  --navy-3:#081724;
  --blue:#1a6fc0;
  --blue-dark:#155a9e;
  --blue-bright:#3d9ae6;
  --brand:#1c5a80;
  --ink:#1e2a36;
  --slate:#5a6b7b;
  --line:#e3e9ef;
  --bg-gray:#f4f7fa;
  --bg-blue:#eef3f9;
  --white:#ffffff;
  --radius:8px;
  --shadow-sm:0 2px 10px rgba(16,40,64,.06);
  --shadow-md:0 10px 30px rgba(16,40,64,.10);
  --maxw:1180px;
}

/* ---------- RESET + BASE ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink);
  line-height:1.6;
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:'Poppins',system-ui,sans-serif;line-height:1.18;color:var(--navy)}
a{text-decoration:none;color:inherit}
/* height:auto is NOT in the design files, and it is load-bearing here.
   pmx_image() emits width/height attributes deliberately, so a lazy image reserves its space
   and nothing below it shifts. But those attributes are PRESENTATIONAL HINTS in the UA
   stylesheet, i.e. they behave like `height:900px` — and a used height beats `aspect-ratio`.
   The design's <img> tags carry no attributes, so their height stays auto and the ratio
   applies. Without this line, `aspect-ratio:4/3` on the Products media silently rendered
   every image at its intrinsic height: two rows 520px too tall, two slightly too short.
   Any rule that sets an explicit height (.svc-media img, .exp-img img) still wins on
   specificity, so this only affects images whose height was meant to be derived. */
img{max-width:100%;display:block;height:auto}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* Skip link. Not in the static design, which offered no keyboard path past the nav.
   Off-screen until focused, so it cannot affect the pixel diff. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100}
.skip-link:focus{
  left:0;padding:12px 20px;background:var(--blue);color:#fff;
  font-family:'Poppins';font-weight:600;font-size:14px;
}

/* ---------- SHARED COMPONENTS ---------- */
.eyebrow{
  font-family:'Poppins';font-weight:600;font-size:13px;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--blue);margin-bottom:14px;
}
section.pad{padding:50px 0}
.center{text-align:center}
.sec-title{font-size:34px;font-weight:700;margin-bottom:16px}
.sec-title.under{position:relative;padding-bottom:18px;margin-bottom:0}
.sec-title.under::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:0;width:56px;height:3px;background:var(--blue)}

.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Poppins';font-weight:600;font-size:13px;letter-spacing:.6px;
  padding:14px 26px;border-radius:6px;cursor:pointer;border:2px solid transparent;
  transition:.2s;text-transform:uppercase;
}
.btn .arw{transition:transform .2s}
.btn:hover .arw{transform:translateX(4px)}
.btn-blue{background:var(--blue);color:#fff;border-color:var(--blue)}
.btn-blue:hover{background:var(--blue-dark);border-color:var(--blue-dark)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff}
.btn-outline{background:transparent;color:var(--blue);border-color:var(--blue)}
.btn-outline:hover{background:var(--blue);color:#fff}

/* Blue tick list item. The .checks grid that wraps these is page-specific. */
.chk{display:flex;gap:11px;align-items:flex-start}
.chk .pt{flex:0 0 auto;display:flex;align-items:center;justify-content:center;margin-top:1px}
.chk .pt svg{width:19px;height:19px;stroke:var(--blue);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.chk span:last-child{font-size:14px;font-weight:500;color:var(--ink)}

/* ---------- INNER-PAGE HERO ---------- */
/* Identical on all five inner pages, verified by comparing the declaration blocks.
   The rule is settled: breadcrumb + plain nav-label H1 + a 64x4 accent, no lead paragraph. */
.page-hero{position:relative;background:var(--navy);color:#fff;overflow:hidden}
.page-hero-bg{position:absolute;inset:0;z-index:0}
.page-hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.page-hero-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(10,28,44,.94) 0%,rgba(13,36,56,.88) 42%,rgba(13,36,56,.62) 74%,rgba(13,36,56,.48) 100%);
}
/* Padding is 96/100 rather than the homepage's 70/74: the banner holds only breadcrumb,
   title and rule, so it needs the height to keep the same presence. */
.page-hero-inner{position:relative;z-index:1;padding:96px 24px 100px;max-width:720px}
.page-hero h1{font-size:52px;font-weight:800;color:#fff;letter-spacing:-.2px;margin-bottom:0}
.page-hero .hl{color:var(--blue-bright)}
.crumb{
  font-family:'Poppins';font-weight:600;font-size:12.5px;letter-spacing:1.6px;
  text-transform:uppercase;color:#a8bccd;margin-bottom:16px;
}
.crumb a{color:#a8bccd}
.crumb a:hover{color:#fff}
.crumb .sep{color:var(--blue-bright);margin:0 9px}
.crumb .cur{color:#fff}
/* Inner-page value: the accent is the last element, so no bottom margin. The homepage
   hero has a lead paragraph under it and overrides this to 22px 0 26px in pages/home.css. */
.hero-accent{width:64px;height:4px;background:var(--blue-bright);margin:22px 0 0}

/* Centred intro paragraph under a section heading. About, Services and Products. */
.sec-intro{max-width:760px;margin:22px auto 0;color:var(--slate);font-size:15.5px}

/* ---------- JUMP PILLS ---------- */
/* Services and Products both open with a frame of anchor pills. The pills themselves are
   identical on both; the FRAME differs (Services is a plain centred box, Products splits it
   into two labelled groups with a divider), so .jump-frame stays in each page stylesheet. */
.jump-frame::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--blue)}
.jump{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.jump a{
  font-family:'Poppins';font-weight:600;font-size:12.5px;letter-spacing:.4px;
  color:var(--brand);background:var(--bg-gray);border:1px solid var(--line);
  border-radius:100px;padding:9px 18px;transition:.2s;
}
.jump a:hover{background:var(--blue);border-color:var(--blue);color:#fff}

/* ---------- TWO-COLUMN IMAGE + CHECKLIST BAND ---------- */
/* The homepage's Expertise section and About's Capabilities section are the same component.
   Pages override .exp-img img height and the .checks gap, which is all that differs. */
.exp-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center}
.exp-img{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-md)}
.exp-img img{width:100%;height:380px;object-fit:cover}
.exp h2{font-size:32px;font-weight:700;margin-bottom:20px;line-height:1.22}
.exp p.intro{color:var(--slate);font-size:15.5px;margin-bottom:26px}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:20px 28px}

/* ---------- HEADER ---------- */
header{position:sticky;top:0;z-index:50;background:#fff;box-shadow:0 1px 0 var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:104px}
.logo img{height:84px;width:auto}
.menu{display:flex;align-items:center;gap:46px;list-style:none}
.menu a{
  font-size:17px;font-weight:500;color:var(--ink);position:relative;padding:6px 0;
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
}
.menu a:hover{color:var(--blue)}
.menu a.active{color:var(--blue)}
.menu a.active::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:2px;background:var(--blue)}
.caret{width:9px;height:9px;fill:none;stroke:currentColor;stroke-width:2}
.nav .btn{padding:12px 22px}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer}
.burger span{width:24px;height:2px;background:var(--navy);display:block}

/* ---------- CTA BAND ---------- */
.cta{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;inset:0;background:radial-gradient(900px 300px at 80% 120%,rgba(61,154,230,.18),transparent)}
.cta-inner{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:40px;padding:44px 24px;flex-wrap:wrap}
.cta h2{color:#fff;font-size:28px;font-weight:700;margin-bottom:10px}
.cta p{color:#c9d5e0;font-size:15px;max-width:520px}
.cta-btns{display:flex;gap:14px;flex-wrap:wrap}

/* ---------- FOOTER ---------- */
footer{background:var(--navy-2);color:#aeb9c4;font-size:14px}
.foot-top{display:grid;grid-template-columns:1.7fr 1fr 1.5fr;gap:48px;padding:46px 24px 40px}
.foot-logo img{height:58px;width:auto;margin-bottom:18px;filter:brightness(0) invert(1);opacity:.95}
.foot-brand p{color:#95a3b0;font-size:13.5px;max-width:280px;margin-bottom:20px}
.socials{display:flex;gap:12px}
.socials a{width:36px;height:36px;border-radius:6px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;transition:.2s}
.socials a:hover{background:var(--blue)}
.socials svg{width:17px;height:17px;fill:#cfd8e0}
footer h5{font-family:'Poppins';color:#fff;font-size:13px;letter-spacing:1px;text-transform:uppercase;margin-bottom:20px;font-weight:600}
footer ul{list-style:none}
footer ul li{margin-bottom:11px}
footer ul a{color:#a7b3bf;font-size:14px}
footer ul a:hover{color:#fff}
.contact-row{display:flex;gap:12px;margin-bottom:16px;align-items:flex-start}
.contact-row svg{flex:0 0 auto;width:17px;height:17px;stroke:var(--blue-bright);fill:none;stroke-width:1.8;margin-top:3px}
.contact-row span{color:#a7b3bf;line-height:1.5}
.contact-row a{color:#a7b3bf}
.contact-row a:hover{color:#fff}
.foot-bottom{border-top:1px solid rgba(255,255,255,.09);padding:20px 24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.foot-bottom small{color:#7f8d99;font-size:12.5px}
.foot-bottom .links{display:flex;gap:22px}
.foot-bottom .links a{color:#7f8d99;font-size:12.5px}
.foot-bottom .links a:hover{color:#fff}
/* Privacy Policy and Terms of Use have no pages behind them yet, so they render as text.
   Styled identically, so swapping a span for an <a> later changes nothing visually. */
.foot-bottom .links span{color:#7f8d99;font-size:12.5px}

/* ---------- MOTION ---------- */
/* Scroll reveal, opt-in via html.animate so content is always visible without JS. */
html.animate .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
html.animate .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  html.animate .reveal{opacity:1 !important;transform:none !important;transition:none}
}

/* ---------- RESPONSIVE (chrome only; page CSS carries its own) ---------- */
@media(max-width:1024px){
  .page-hero h1{font-size:42px}
  .exp-grid{grid-template-columns:1fr;gap:40px}
  .exp-img img{height:330px}
  .foot-top{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  .menu{display:none}
  .burger{display:flex}
  .nav>nav{margin-left:auto}
  /* The design opened the drawer by writing inline styles from JS. Identical values,
     moved into CSS so the drawer is themeable and the script only flips a class. */
  .menu.is-open{
    display:flex;position:absolute;flex-direction:column;top:104px;left:0;right:0;
    background:#fff;padding:16px 24px;box-shadow:0 12px 24px rgba(0,0,0,.1);gap:14px;
    align-items:flex-start;
  }
}
@media(max-width:680px){
  .page-hero h1{font-size:32px}
  .page-hero-inner{padding:64px 24px 68px}
  .page-hero-bg::after{background:linear-gradient(180deg,rgba(13,36,56,.80),rgba(13,36,56,.90))}
  .exp h2{font-size:25px}
  .checks{grid-template-columns:1fr}
  section.pad{padding:40px 0}
  .sec-title{font-size:26px}
  .cta-inner{flex-direction:column;align-items:flex-start}
  .foot-top{grid-template-columns:1fr}
}

/* ---------- CONTENT PAGES (page.php) ----------------------------------------
   Privacy Policy, Terms of Use, and anything else that is a wall of
   client-authored text rather than a ported design.

   This had NO styling at all until 5 Oct 2026, because until the policy pages
   were published nothing on the site used page.php. The article ran the full
   width of the viewport with no gutter and no vertical space - 154 characters
   to a line at 1280px, the h1 touching the header.

   ⚑ Everything here is scoped to .prose and reached only from page.php. A
   design page never calls the_content(), so none of this can touch one. */
.prose{
  /* 650px, not the 820 this first had. MEASURED rather than guessed: Inter at 16px averages
     7.53px a character here, so 820px was 103 characters to a line - half as wide again as the
     60-80 that is comfortable to read. 650 - 48px of padding = 602px = ~80 characters. */
  max-width:650px;
  margin:0 auto;
  padding:clamp(48px,6vw,78px) 24px clamp(60px,7vw,92px);
}
.prose h1{font-size:clamp(30px,4vw,38px);font-weight:700;line-height:1.15;margin-bottom:10px}
/* A rule under the title, the same device .sec-title.under uses, so a text page still
   reads as part of this site rather than as a stray document. Left-aligned, not centred:
   the body copy underneath is left-aligned and a centred rule would float free of it. */
.prose h1::after{content:"";display:block;width:56px;height:3px;background:var(--blue);
  margin-top:20px}
.prose h2{font-size:21px;font-weight:600;margin:38px 0 10px}
.prose h3{font-size:17px;font-weight:600;margin:28px 0 8px}
.prose p{margin-bottom:15px;color:var(--ink)}
.prose ul,.prose ol{margin:0 0 16px 22px}
.prose li{margin-bottom:7px}
.prose li::marker{color:var(--blue)}
/* Links need to be visible in a wall of text: inheriting the body colour, as the global
   `a{color:inherit}` does, makes them invisible in a document nobody scans for buttons. */
.prose a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.prose a:hover{color:var(--blue-dark)}
.prose strong{color:var(--navy)}
.prose hr{border:0;border-top:1px solid var(--line);margin:34px 0}
.prose table{width:100%;border-collapse:collapse;margin:0 0 18px}
.prose th,.prose td{border:1px solid var(--line);padding:9px 12px;text-align:left;font-size:14.5px}
.prose th{background:var(--bg-gray);font-weight:600;color:var(--navy)}
.prose blockquote{margin:0 0 18px;padding:2px 0 2px 18px;border-left:3px solid var(--blue);
  color:var(--slate)}
.prose :last-child{margin-bottom:0}

/* ---------- FLOATING WHATSAPP BUTTON ---------- */
/*
   Rendered outside <main>, after the footer. It is absent from the DOM entirely when no
   number is set in Site Settings, so none of this applies until someone adds one.

   56px is the smallest size that still reads as a tap target at arm's length on a phone, and
   #25D366 is WhatsApp's own green — one of the few places this site should not use its own
   palette, because the whole value of the mark is that people recognise it instantly.
*/
.wa{position:fixed;right:20px;bottom:20px;z-index:60;
  display:flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:50%;
  background:#25d366;color:#fff;text-decoration:none;
  box-shadow:0 6px 20px rgba(16,40,64,.28);
  transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}
.wa:hover{background:#1fb855;transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(16,40,64,.34)}
.wa:focus-visible{outline:3px solid var(--blue-bright);outline-offset:3px}
.wa-i{width:30px;height:30px;fill:currentColor;display:block}

/* A fixed button on a short page can sit on top of the footer's last line. Nudging it in on
   small screens keeps it clear of the edge without needing a scroll-aware script. */
@media (max-width:760px){
  .wa{right:14px;bottom:14px;width:52px;height:52px}
  .wa-i{width:28px;height:28px}
}

@media (prefers-reduced-motion:reduce){
  .wa{transition:none}
  .wa:hover{transform:none}
}

/* It is decoration on paper, and a floating circle prints on every page. */
@media print{ .wa{display:none} }