/* ====== Safe defaults (remove if already defined globally) ====== */
:root{
  --bg-1:#0b1220; --ink:#e6edf6; --muted:#9fb0c0;
  --brand:#3aa8e5; --brand-2:#74c0ff; --radius:14px;
  --shadow:0 10px 30px rgba(2,10,25,.35);
}
.fs-container{width:min(1150px,92vw);margin:0 auto;}
.kicker{display:inline-block;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--brand-2)}
.pl-landing{background:var(--bg-1);color:var(--ink);}
.pl-wrap{padding:0 0 clamp(42px,6vw,72px);}
.crumbs{font-size:14px;color:var(--muted);margin:18px 0 8px}
.crumbs a{color:var(--brand-2);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs span{opacity:.8;margin:0 6px}
.btn-primary{display:inline-block;padding:10px 16px;background:var(--brand);color:#fff;border-radius:10px;text-decoration:none;font-weight:700;box-shadow:var(--shadow)}
.btn-primary:hover{filter:brightness(1.05)}
.btn-secondary{display:inline-block;padding:10px 16px;border:1px solid rgba(255,255,255,.6);color:#fff;border-radius:10px;text-decoration:none;font-weight:700;background:transparent}
.bullets{margin:8px 0 0 18px}

/* ==================== P-X (Residential) ==================== */
.px .px-hero{
  position:relative;min-height:clamp(280px,38vw,420px);
  background-image:var(--img);background-size:cover;background-position:center;
  display:grid;align-items:end;isolation:isolate;
}
.px .px-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.6) 65%)}
.px .px-hero__content{position:relative;z-index:1;padding:48px 0}
.px .px-hero__content h1{margin:0 0 10px;font-size:clamp(28px,5vw,56px);font-weight:800}
.px .px-hero__content p{max-width:860px;font-size:clamp(16px,1.6vw,22px);text-shadow:0 2px 12px rgba(0,0,0,.35)}
.px .px-hero__ribbon{position:absolute;left:0;right:0;bottom:-1px;height:60px;background:var(--bg-1);
  clip-path: polygon(0 60%, 100% 0, 100% 100%, 0 100%);}

.px .px-cards{margin-top:16px;display:grid;gap:14px;grid-template-columns:repeat(5,1fr)}
.px .px-cards article{background:#0b1427;border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.px .px-cards h3{margin:0 0 6px;font-size:16px}
.px .px-cards h3 a{color:var(--ink);text-decoration:none}
.px .px-cards h3 a:hover{color:var(--brand-2);text-decoration:underline}
.px .px-cards p{margin:0;color:var(--muted)}
@media (max-width:1100px){.px .px-cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.px .px-cards{grid-template-columns:1fr}}

.px .px-split{display:grid;grid-template-columns:1.2fr .8fr;gap:22px;align-items:center;margin-top:22px}
.px .px-text h2{margin:0 0 8px;font-size:clamp(20px,3vw,34px)}
.px .px-art{aspect-ratio:16/10;border-radius:var(--radius);background-image:var(--img);background-size:cover;background-position:center;box-shadow:var(--shadow)}
.px .px-art img{width:1px;height:1px;position:absolute;clip:rect(0 0 0 0)}
@media (max-width:900px){.px .px-split{grid-template-columns:1fr}}

/* ==================== P-Y (Water Heater) ==================== */
.py .py-hero{background:linear-gradient(90deg,#0b1220,#0f172a);position:relative}
.py .py-hero__inner{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center;padding:clamp(22px,3.2vw,42px) 0}
.py .copy h1{margin:0 0 8px;font-size:clamp(26px,4.6vw,50px);font-weight:800}
.py .copy p{margin:0 0 12px;opacity:.95}
.py .btn-row{display:flex;gap:10px;flex-wrap:wrap}
.py .bubble{aspect-ratio:1/1;border-radius:50%;background-image:var(--img);background-size:cover;background-position:center;box-shadow:var(--shadow)}
.py .bubble img{width:1px;height:1px;position:absolute;clip:rect(0 0 0 0)}
.py .py-curve{position:absolute;left:0;right:0;bottom:-1px;height:60px;background:var(--bg-1);clip-path:ellipse(60% 100% at 50% 100%)}
@media (max-width:900px){.py .py-hero__inner{grid-template-columns:1fr}}

.py .py-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
.py .py-steps article{background:#0b1427;border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);padding:16px;position:relative}
.py .py-steps .dot{position:absolute;top:-10px;left:-10px;width:26px;height:26px;border-radius:999px;display:grid;place-items:center;background:#fff;color:#0b1427;font-weight:800;box-shadow:var(--shadow)}
.py .py-steps h3{margin:6px 0 6px;font-size:18px}
.py .py-steps p{margin:0;color:var(--muted)}
@media (max-width:900px){.py .py-steps{grid-template-columns:1fr}}

.py .py-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:16px}
.py .py-grid article{background:#0b1427;border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.py .py-grid h3{margin:0 0 6px;font-size:18px}
.py .py-grid p{margin:0;color:var(--muted)}
@media (max-width:1000px){.py .py-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.py .py-grid{grid-template-columns:1fr}}

/* ==================== P-Z (Sewer) ==================== */
.pz .pz-hero{
  position:relative;min-height:clamp(220px,32vw,360px);
  background-image:var(--img);background-size:cover;background-position:center;
  display:grid;align-items:end;isolation:isolate;
}
.pz .pz-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.65) 70%)}
.pz .pz-hero .fs-container{position:relative;z-index:1;padding:36px 0}
.pz .pz-hero h1{margin:0 0 8px;font-weight:800;font-size:clamp(26px,4.6vw,50px)}
.pz .pz-hero p{margin:0;max-width:880px;font-size:clamp(15px,1.6vw,20px)}

.pz .pz-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
.pz .pz-steps article{background:#0b1427;border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);padding:16px;position:relative}
.pz .dot{position:absolute;top:-10px;left:-10px;width:26px;height:26px;border-radius:999px;display:grid;place-items:center;background:#fff;color:#0b1427;font-weight:800;box-shadow:var(--shadow)}
.pz .pz-steps h3{margin:6px 0 6px;font-size:18px}
.pz .pz-steps p{margin:0;color:var(--muted)}
@media (max-width:900px){.pz .pz-steps{grid-template-columns:1fr}}

.pz .pz-pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.pz .pz-pills a{display:inline-block;padding:8px 12px;border:1px solid rgba(255,255,255,.2);border-radius:999px;text-decoration:none;color:var(--ink)}
.pz .pz-pills a:hover{color:var(--brand-2);border-color:rgba(116,192,255,.45)}

.pz .pz-cta{margin-top:18px;display:flex;gap:16px;align-items:center;justify-content:space-between;background:#0b1427;border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);padding:14px 16px}
.pz .pz-cta p{margin:0}
@media (max-width:640px){.pz .pz-cta{flex-direction:column;align-items:stretch}}

/* ==================== P-Q (Emergency) ==================== */
.pq .pq-hero{background:linear-gradient(180deg,rgba(58,168,229,.12),rgba(58,168,229,0) 60%),linear-gradient(90deg,#0b1220,#0f172a);padding:clamp(22px,4vw,40px) 0;border-bottom:1px solid rgba(255,255,255,.06)}
.pq .pq-hero h1{margin:0 0 6px;font-size:clamp(26px,4.6vw,48px);font-weight:800}
.pq .pq-hero p{margin:0;opacity:.95}

.pq .pq-grid{margin-top:16px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.pq .cell{
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);
  padding:14px;display:grid;gap:4px;text-decoration:none;color:var(--ink);box-shadow:var(--shadow);
}
.pq .cell strong{font-size:15px}
.pq .cell span{color:var(--muted);font-size:13px}
.pq .cell:hover{border-color:rgba(116,192,255,.35);color:var(--brand-2)}
@media (max-width:1000px){.pq .pq-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.pq .pq-grid{grid-template-columns:1fr}}
