/* ============================================================
   MILWARD SEPTIC — shared rugged-industrial design system
   Used by all content pages. Showpiece pages (index, homeowners,
   builders, septic-emergency) keep their own inline styles.
   ============================================================ */
:root{
  --void:#0C1012;--steel-900:#12171A;--steel-800:#1B2226;--steel-700:#273036;
  --steel-600:#36424A;--steel-500:#55636D;--line:#2A343A;
  --concrete:#B7B2A8;--bone:#ECEAE4;--bone-2:#DEDBD2;
  --hazard:#FF5A1F;--hazard-deep:#D8430F;--amber:#F4A93B;--danger:#E23B2E;
  --white:#fff;
  --dfont:"Anton",sans-serif;--cfont:"Barlow Condensed",sans-serif;--bfont:"Barlow",system-ui,sans-serif;
  --maxw:1240px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--bfont);background:var(--void);color:var(--bone);line-height:1.6;font-size:18px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--dfont);font-weight:400;line-height:1;letter-spacing:.5px;text-transform:uppercase}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.narrow{max-width:860px}
.eyebrow{font-family:var(--cfont);text-transform:uppercase;letter-spacing:4px;font-size:.82rem;font-weight:700;color:var(--hazard);display:inline-flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:34px;height:2px;background:var(--hazard)}
.stripe{height:8px;background:repeating-linear-gradient(-45deg,var(--hazard) 0 22px,var(--void) 22px 44px)}
.hazard-text{color:var(--hazard)}
.muted{color:var(--concrete)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--cfont);text-transform:uppercase;letter-spacing:1.5px;font-weight:700;font-size:1rem;padding:17px 34px;border:2px solid transparent;cursor:pointer;transition:.2s;clip-path:polygon(0 0,100% 0,100% 100%,10px 100%)}
.btn--hazard{background:var(--hazard);color:var(--void)}
.btn--hazard:hover{background:var(--white);transform:translateY(-2px)}
.btn--ghost{border-color:var(--steel-500);color:var(--bone)}
.btn--ghost:hover{border-color:var(--hazard);color:var(--hazard)}
.btn--dark{background:var(--void);color:#fff}
.btn--dark:hover{background:var(--steel-800)}
.btn--lg{padding:20px 44px;font-size:1.08rem}
.btn--block{width:100%;justify-content:center}

/* header */
header{position:fixed;top:0;left:0;right:0;z-index:100;transition:.3s;border-bottom:1px solid transparent}
header.scrolled{background:rgba(12,16,18,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:18px 28px;max-width:var(--maxw);margin:0 auto}
.brand{display:flex;align-items:center;gap:13px}
.brand__mark{width:46px;height:46px;background:var(--hazard);color:var(--void);display:grid;place-items:center;font-family:var(--dfont);font-size:1.5rem;clip-path:polygon(0 0,100% 0,100% 78%,78% 100%,0 100%)}
.brand__txt b{font-family:var(--dfont);font-size:1.35rem;letter-spacing:1px;display:block;line-height:.9;color:var(--white)}
.brand__txt span{font-family:var(--cfont);font-size:.7rem;letter-spacing:4px;color:var(--hazard);text-transform:uppercase}
.nav__links{display:flex;gap:26px;list-style:none;align-items:center}
.nav__links a{font-family:var(--cfont);text-transform:uppercase;letter-spacing:1.5px;font-weight:600;font-size:.95rem;color:var(--concrete);transition:.2s}
.nav__links a:hover,.nav__links a.on{color:var(--hazard)}
.nav__cta{display:flex;align-items:center;gap:18px}
.nav__phone{font-family:var(--cfont);font-weight:700;letter-spacing:1px;color:var(--white);white-space:nowrap}
.burger{display:none;background:none;border:0;color:var(--bone);font-size:1.7rem;cursor:pointer}

/* page hero */
.phero{padding:150px 0 60px;background:linear-gradient(180deg,var(--steel-900),var(--void))}
.phero .crumb{font-family:var(--cfont);letter-spacing:2px;text-transform:uppercase;font-size:.8rem;color:var(--steel-500);margin-bottom:22px}
.phero .crumb a{color:var(--steel-500)}
.phero .crumb a:hover{color:var(--hazard)}
.phero h1{font-size:clamp(2.6rem,6vw,5rem);color:var(--white);max-width:20ch;margin:18px 0}
.phero p{font-size:1.25rem;color:var(--concrete);max-width:62ch}
.phero .cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}

/* sections */
.section{padding:100px 0;position:relative}
.section--steel{background:var(--steel-900)}
.section--void{background:var(--void)}
.section--bone{background:var(--bone);color:var(--steel-900)}
.section--bone h1,.section--bone h2,.section--bone h3{color:var(--steel-900)}
.section--hazard{background:var(--hazard);color:var(--void)}
.section--hazard h1,.section--hazard h2,.section--hazard h3{color:var(--void)}
.shead{max-width:720px;margin-bottom:52px}
.shead h2{font-size:clamp(2.2rem,5vw,3.6rem);color:#fff;margin:14px 0}
.section--bone .shead h2{color:var(--steel-900)}
.shead p{font-size:1.15rem;color:var(--concrete)}
.section--bone .shead p{color:var(--steel-600)}
.center{text-align:center}
.mx-auto{margin-left:auto;margin-right:auto}

/* prose */
.prose{max-width:760px}
.prose p{margin-bottom:18px;color:var(--concrete);font-size:1.08rem}
.prose h2{font-size:clamp(1.8rem,4vw,2.6rem);color:#fff;margin:40px 0 16px}
.prose h3{font-size:1.4rem;color:var(--hazard);margin:28px 0 10px}
.section--bone .prose p{color:var(--steel-600)}
.section--bone .prose h2{color:var(--steel-900)}

/* grid + cards */
.grid{display:grid;gap:2px;background:var(--line)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--steel-900);padding:38px 30px;transition:.25s}
.section--bone .card{background:var(--bone)}
.card:hover{background:var(--steel-800)}
.section--bone .card:hover{background:var(--bone-2)}
.card .no{font-family:var(--dfont);font-size:1.1rem;color:var(--hazard)}
.card h3{font-size:1.5rem;color:#fff;margin:12px 0 10px}
.section--bone .card h3{color:var(--steel-900)}
.card p{color:var(--concrete);font-size:1rem}
.section--bone .card p{color:var(--steel-600)}
.card .line{width:38px;height:3px;background:var(--hazard);margin-bottom:18px}

/* split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.ph-img{position:relative;background:repeating-linear-gradient(-45deg,#1a2024 0 30px,#161c20 30px 60px);min-height:420px;display:grid;place-items:center;border:1px solid var(--line)}
.ph-img span{font-family:var(--cfont);letter-spacing:2px;color:var(--steel-500);text-transform:uppercase;font-size:.8rem;text-align:center;padding:0 20px}
.checks{list-style:none;margin-top:24px}
.checks li{padding-left:38px;position:relative;margin-bottom:14px;font-size:1.06rem;color:var(--bone)}
.section--bone .checks li{color:var(--steel-900)}
.checks li::before{content:"";position:absolute;left:0;top:7px;width:20px;height:20px;background:var(--hazard);clip-path:polygon(0 0,100% 0,100% 70%,70% 100%,0 100%)}

/* faq */
.faq details{background:var(--steel-800);border:1px solid var(--line);border-left:3px solid var(--line);padding:20px 24px;margin-bottom:12px;transition:.2s}
.faq details[open]{border-left-color:var(--hazard)}
.faq summary{font-family:var(--cfont);text-transform:uppercase;letter-spacing:.5px;font-size:1.1rem;color:#fff;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--hazard);font-family:var(--dfont);font-size:1.5rem}
.faq details[open] summary::after{content:"–"}
.faq details[open] summary{margin-bottom:12px}
.faq p{color:var(--concrete);font-size:1rem}

/* forms */
.form{background:var(--steel-900);border:1px solid var(--line);border-top:4px solid var(--hazard);padding:36px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fld{margin-bottom:16px}
.fld label{font-family:var(--cfont);text-transform:uppercase;letter-spacing:1px;font-size:.82rem;color:var(--bone);display:block;margin-bottom:6px}
.fld .req{color:var(--hazard)}
.fld input,.fld select,.fld textarea{width:100%;padding:13px 14px;background:var(--steel-800);border:1.5px solid var(--line);color:var(--bone);font-family:var(--bfont);font-size:1rem}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:2px solid var(--hazard);border-color:var(--hazard)}
.fld textarea{min-height:110px;resize:vertical}
.note{background:#241d0a;border-left:3px solid var(--amber);padding:14px 18px;color:var(--amber);font-size:.95rem}

/* timeline */
.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--line)}
.tstep{background:var(--steel-900);padding:36px 24px}
.section--bone .tstep{background:var(--bone)}
.tstep .no{width:52px;height:52px;background:var(--hazard);color:var(--void);font-family:var(--dfont);font-size:1.5rem;display:grid;place-items:center;margin-bottom:16px;clip-path:polygon(0 0,100% 0,100% 75%,75% 100%,0 100%)}
.tstep h3{font-size:1.3rem;color:#fff;margin-bottom:8px}
.section--bone .tstep h3{color:var(--steel-900)}
.tstep p{color:var(--concrete);font-size:.96rem}
.section--bone .tstep p{color:var(--steel-600)}

/* cta band */
.cta{background:var(--steel-900);text-align:center}
.cta h2{font-size:clamp(2.4rem,5vw,4rem);color:#fff;max-width:18ch;margin:14px auto 16px}
.cta p{color:var(--concrete);font-size:1.2rem;max-width:52ch;margin:0 auto}
.cta .cta-row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:30px}

/* footer */
footer{background:var(--void);border-top:1px solid var(--line);padding:66px 0 30px}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:34px;margin-bottom:42px}
footer h4{font-family:var(--cfont);text-transform:uppercase;letter-spacing:2px;color:#fff;margin-bottom:15px;font-size:1rem}
footer ul{list-style:none}
footer li{margin-bottom:9px}
footer a{color:var(--concrete);font-size:.95rem;transition:.2s}
footer a:hover{color:var(--hazard)}
.fbrand p{color:var(--steel-500);font-size:.94rem;margin-top:12px}
.fbot{border-top:1px solid var(--line);padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-family:var(--cfont);letter-spacing:1px;text-transform:uppercase;font-size:.8rem;color:var(--steel-500)}

/* placeholders */
.ph-note{background:#241d0a;border:1px dashed var(--amber);color:var(--amber);font-family:var(--cfont);letter-spacing:1px;text-transform:uppercase;font-size:.72rem;padding:3px 9px;display:inline-block}

/* responsive */
@media(max-width:960px){
  .nav__links,.nav__phone{display:none}
  .burger{display:block}
  .nav__links.open{display:flex;flex-direction:column;align-items:flex-start;position:absolute;top:100%;left:0;right:0;background:var(--void);padding:22px 28px;gap:20px;border-bottom:3px solid var(--hazard);box-shadow:0 12px 30px rgba(0,0,0,.5)}
  .grid--3,.grid--4,.timeline{grid-template-columns:1fr 1fr}
  .split,.frow,.fgrid{grid-template-columns:1fr}
  .section{padding:70px 0}
  .fgrid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .grid--2,.grid--3,.grid--4,.timeline,.fgrid{grid-template-columns:1fr}
}