/* greasetrapservice.ca — shared stylesheet
   Palette derived from the subject: stainless steel + tallow (the material removed)
   + a municipal flag red for non-compliance. */

:root {
  --steel-950:#14181c; --steel-800:#252d34; --steel-700:#39434d;
  --steel-500:#65727e; --steel-400:#8a97a3; --steel-200:#c9d1d5;
  --steel-150:#dce1e3; --steel-050:#f1f4f3; --paper:#fafbfa;
  --tallow:#c9a227; --tallow-dk:#8a6f14; --tallow-lt:#f0e3b4;
  --flag:#a83226; --go:#2f6d4f;

  --display:"Barlow Condensed",'Arial Narrow',sans-serif;
  --body:"Public Sans",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;

  --wrap:1140px; --gut:clamp(20px,5vw,56px);
  --r:3px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--steel-950);
  font:400 17px/1.6 var(--body);
  font-feature-settings:"tnum" 0;
}
img,svg{max-width:100%;height:auto}
a{color:inherit}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:.95;
  letter-spacing:-.01em;text-transform:uppercase;margin:0}
h1{font-size:clamp(44px,8.2vw,92px)}
h2{font-size:clamp(30px,4.6vw,50px)}
h3{font-size:clamp(20px,2.4vw,25px);letter-spacing:0}
p{margin:0 0 1.05em}
.lede{font-size:clamp(18px,2.1vw,21px);line-height:1.55;color:var(--steel-700);max-width:60ch}
.eyebrow{
  font:500 12px/1.3 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--tallow-dk); margin:0 0 18px; display:flex; align-items:center; gap:10px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--tallow);flex:none}
.tnum{font-variant-numeric:tabular-nums}

/* ---------- header ---------- */
.hdr{
  position:sticky;top:0;z-index:50;background:rgba(250,251,250,.93);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--steel-150)
}
.hdr-in{display:flex;align-items:center;gap:18px;height:62px}
.mark{font:800 21px/1 var(--display);letter-spacing:.02em;text-transform:uppercase;
  text-decoration:none;display:flex;align-items:baseline;gap:7px}
.mark b{color:var(--tallow-dk);font-weight:800}
.mark span{font:500 10px/1 var(--mono);letter-spacing:.12em;color:var(--steel-400)}
.hdr nav{margin-left:auto;display:flex;align-items:center;gap:22px}
.hdr nav a{font:500 13px/1 var(--body);text-decoration:none;color:var(--steel-700)}
.hdr nav a:hover{color:var(--tallow-dk)}
@media(max-width:720px){.hdr nav a.hide-sm{display:none}}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;padding:13px 22px;border:0;
  border-radius:var(--r);background:var(--steel-950);color:var(--paper);
  font:600 14px/1 var(--body);letter-spacing:.01em;text-decoration:none;cursor:pointer;
  transition:background .16s ease,transform .16s ease
}
.btn:hover{background:var(--tallow-dk);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--steel-950);box-shadow:inset 0 0 0 1.5px var(--steel-200)}
.btn-ghost:hover{background:var(--steel-050);color:var(--steel-950);box-shadow:inset 0 0 0 1.5px var(--tallow)}

/* ---------- hero ---------- */
.hero{padding:clamp(44px,7vw,84px) 0 clamp(36px,5vw,60px);border-bottom:1px solid var(--steel-150)}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,64px);align-items:start}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:38px}}
.hero h1 span{color:var(--tallow-dk);display:block}
.hero .lede{margin-top:22px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* ---------- gauge (signature) ---------- */
.gauge{
  background:var(--steel-050);border:1px solid var(--steel-150);border-radius:var(--r);
  padding:22px 22px 20px
}
.gauge-h{font:500 11px/1.3 var(--mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--steel-500);margin:0 0 16px}
.gauge-body{display:grid;grid-template-columns:118px 1fr;gap:20px;align-items:stretch}
.vessel{
  position:relative;border:2px solid var(--steel-700);border-top:0;
  border-radius:0 0 5px 5px;height:190px;background:#fff;overflow:hidden
}
.fill{position:absolute;left:0;right:0;bottom:0;background:
  linear-gradient(180deg,var(--tallow) 0%,var(--tallow-dk) 100%);
  transition:height .18s ease}
.fill::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--tallow-lt);opacity:.85}
.thresh{position:absolute;left:-2px;right:-2px;bottom:25%;border-top:2px dashed var(--flag);pointer-events:none}
.thresh span{position:absolute;right:3px;top:-16px;font:600 10px/1 var(--mono);
  letter-spacing:.08em;color:var(--flag);background:#fff;padding:2px 4px}
.gauge-ctl{display:flex;flex-direction:column;justify-content:center;gap:14px}
.readout{font:700 46px/1 var(--display);letter-spacing:-.01em}
.readout small{font:500 12px/1 var(--mono);letter-spacing:.1em;color:var(--steel-500);
  display:block;margin-top:7px;text-transform:uppercase}
input[type=range]{width:100%;accent-color:var(--tallow-dk);margin:0}
.verdict{font:600 14px/1.4 var(--body);padding:11px 13px;border-radius:var(--r);
  border-left:3px solid}
.verdict.ok{background:#eaf3ee;border-color:var(--go);color:#1e5138}
.verdict.no{background:#f9ebe9;border-color:var(--flag);color:#7d2419}
.gauge-note{font:400 12px/1.5 var(--body);color:var(--steel-500);margin:15px 0 0}

/* ---------- rule strip ---------- */
.strip{background:var(--steel-950);color:var(--steel-050);
  padding:clamp(30px,4vw,44px) 0}
.strip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,4vw,48px)}
@media(max-width:760px){.strip-grid{grid-template-columns:1fr;gap:26px}}
.stat dt{font:500 11px/1.3 var(--mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--tallow);margin:0 0 9px}
.stat dd{margin:0;font:700 40px/1 var(--display);text-transform:uppercase}
.stat p{margin:9px 0 0;font-size:14.5px;line-height:1.5;color:var(--steel-200)}

/* ---------- sections ---------- */
.sec{padding:clamp(48px,7vw,86px) 0}
.sec + .sec{border-top:1px solid var(--steel-150)}
.sec-head{max-width:62ch;margin-bottom:clamp(28px,4vw,44px)}
.sec-head p{margin-top:16px;color:var(--steel-700)}

.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,34px)}
@media(max-width:860px){.cols{grid-template-columns:1fr}}
.card{border:1px solid var(--steel-150);border-radius:var(--r);padding:24px;background:#fff}
.card .tag{font:500 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--steel-400);display:block;margin-bottom:13px}
.card h3{margin-bottom:10px}
.card p{margin:0;font-size:15.5px;line-height:1.58;color:var(--steel-700)}

/* steps — numbered only because this IS an ordered legal process */
.steps{list-style:none;margin:0;padding:0;counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:52px 1fr;gap:20px;
  padding:22px 0;border-top:1px solid var(--steel-150)}
.steps li::before{content:counter(s,decimal-leading-zero);
  font:500 13px/1 var(--mono);color:var(--tallow-dk);padding-top:5px}
.steps h3{margin-bottom:8px}
.steps p{margin:0;color:var(--steel-700);font-size:15.5px}

.faq{border-top:1px solid var(--steel-150)}
.faq details{border-bottom:1px solid var(--steel-150)}
.faq summary{cursor:pointer;padding:20px 0;font:600 17px/1.4 var(--body);
  list-style:none;display:flex;gap:16px;align-items:flex-start}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";font:400 20px/1 var(--mono);color:var(--tallow-dk);flex:none;margin-top:1px}
.faq details[open] summary::before{content:"–"}
.faq details p{margin:0 0 20px 32px;color:var(--steel-700);font-size:16px;max-width:70ch}

.linkrow{display:flex;flex-wrap:wrap;gap:9px}
.linkrow a{font:500 13.5px/1 var(--body);text-decoration:none;padding:10px 15px;
  border:1px solid var(--steel-150);border-radius:var(--r);color:var(--steel-700);background:#fff}
.linkrow a:hover{border-color:var(--tallow);color:var(--tallow-dk)}
.linkrow a[aria-current]{background:var(--steel-950);color:var(--paper);border-color:var(--steel-950)}

/* ---------- form ---------- */
.quote{background:var(--steel-050);border-top:1px solid var(--steel-150)}
.quote-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,64px);align-items:start}
@media(max-width:900px){.quote-grid{grid-template-columns:1fr;gap:34px}}
.field{margin-bottom:15px}
.field label{display:block;font:500 11px/1 var(--mono);letter-spacing:.11em;
  text-transform:uppercase;color:var(--steel-500);margin-bottom:7px}
.field input,.field select,.field textarea{
  width:100%;padding:12px 13px;border:1px solid var(--steel-200);border-radius:var(--r);
  background:#fff;font:400 16px/1.4 var(--body);color:var(--steel-950)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:2px solid var(--tallow);outline-offset:1px;border-color:transparent}
.two{display:grid;grid-template-columns:1fr 1fr;gap:15px}
@media(max-width:560px){.two{grid-template-columns:1fr}}
.form-note{font-size:13px;color:var(--steel-500);margin:14px 0 0}
.formstate{margin:14px 0 0;padding:12px 14px;border-radius:var(--r);font-size:14.5px;display:none}
.formstate.on{display:block}
.formstate.err{background:#f9ebe9;color:#7d2419;border-left:3px solid var(--flag)}
.formstate.ok{background:#eaf3ee;color:#1e5138;border-left:3px solid var(--go)}
/* honeypot — off-screen rather than display:none, which some bots skip */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- split (prose + diagram) ---------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,60px);align-items:start}
@media(max-width:940px){.split{grid-template-columns:1fr;gap:34px}}

/* ---------- diagram ---------- */
.diagram{border:1px solid var(--steel-150);border-radius:var(--r);background:#fff;padding:22px}
@media(max-width:940px){.diagram{max-width:520px}}
.diagram figcaption{font:400 13px/1.55 var(--body);color:var(--steel-500);margin-top:14px}

/* ---------- footer ---------- */
.ftr{background:var(--steel-950);color:var(--steel-400);padding:44px 0 34px;font-size:14px}
.ftr a{color:var(--steel-200);text-decoration:none}
.ftr a:hover{color:var(--tallow)}
.ftr-grid{display:flex;flex-wrap:wrap;gap:30px;justify-content:space-between;
  padding-bottom:26px;border-bottom:1px solid var(--steel-800)}
.ftr-links{display:flex;flex-wrap:wrap;gap:20px}
.ftr-fine{margin:22px 0 0;font-size:12.5px;line-height:1.6;color:var(--steel-500);max-width:78ch}

/* ---------- crumbs / prose ---------- */
.crumb{font:500 12px/1 var(--mono);letter-spacing:.08em;color:var(--steel-400);
  padding:18px 0 0;text-transform:uppercase}
.crumb a{text-decoration:none}
.crumb a:hover{color:var(--tallow-dk)}
.prose{max-width:68ch}
.prose h2{margin:52px 0 18px}
.prose h3{margin:34px 0 12px}
.prose ul{padding-left:20px;margin:0 0 1.05em}
.prose li{margin-bottom:9px}
.prose blockquote{margin:28px 0;padding:18px 22px;background:var(--steel-050);
  border-left:3px solid var(--tallow);font-size:16px;color:var(--steel-700)}
.prose blockquote cite{display:block;margin-top:10px;font:500 11px/1.4 var(--mono);
  letter-spacing:.09em;text-transform:uppercase;font-style:normal;color:var(--steel-500)}

:focus-visible{outline:2px solid var(--tallow-dk);outline-offset:2px}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}