/* metroeastwaterproofing.com — "Ledger" editorial. Hand-built for this domain only.
   No shared component file, no framework, no Google Fonts CDN. */
:root{
  --paper:#f6f1e8; --paper-2:#efe7d9; --ink:#14181c; --ink-2:#3b444b;
  --clay:#a2482b; --clay-d:#7d3520; --slate:#4a5a63; --rule:#d8ccb8;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:17px/1.65 "Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
}
a{color:var(--clay-d)}
img,svg{max-width:100%;height:auto}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}
.col{max-width:68ch}

/* header */
.top{border-bottom:2px solid var(--ink);background:var(--paper)}
.top .wrap{display:flex;align-items:baseline;gap:26px;padding-top:16px;padding-bottom:14px;flex-wrap:wrap}
.wordmark{font-size:21px;font-weight:700;letter-spacing:-.01em;text-decoration:none;color:var(--ink)}
.wordmark span{color:var(--clay)}
.top nav{margin-left:auto;display:flex;gap:18px;flex-wrap:wrap}
.top nav a{font:600 13px/1 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  letter-spacing:.09em;text-transform:uppercase;text-decoration:none;color:var(--slate)}
.top nav a:hover{color:var(--clay)}

/* hero */
.hero{padding:54px 0 30px;border-bottom:1px solid var(--rule)}
.kicker{font:700 12px/1 ui-sans-serif,system-ui,sans-serif;letter-spacing:.16em;
  text-transform:uppercase;color:var(--clay);margin:0 0 14px}
h1{font-size:clamp(31px,4.6vw,49px);line-height:1.08;margin:0 0 18px;letter-spacing:-.015em}
.lede{font-size:20px;color:var(--ink-2);margin:0 0 26px}
h2{font-size:clamp(23px,2.7vw,30px);line-height:1.2;margin:44px 0 12px;letter-spacing:-.01em}
h3{font-size:20px;margin:28px 0 8px}
p{margin:0 0 16px}

/* BLUF */
.bluf-answer{border-left:4px solid var(--clay);background:var(--paper-2);
  padding:16px 20px;margin:0 0 22px;font-size:17.5px;color:var(--ink)}
.bluf-answer strong{display:block;font:700 11px/1 ui-sans-serif,system-ui,sans-serif;
  letter-spacing:.16em;text-transform:uppercase;color:var(--clay-d);margin-bottom:8px}

/* the signature device: a ruled cost ledger, unique to this domain */
.ledger{width:100%;border-collapse:collapse;margin:22px 0 26px;
  font:15px/1.5 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
.ledger caption{caption-side:top;text-align:left;font:700 11px/1 ui-sans-serif,system-ui,sans-serif;
  letter-spacing:.16em;text-transform:uppercase;color:var(--slate);padding-bottom:10px}
.ledger th{text-align:left;font-weight:700;color:var(--ink);
  border-bottom:2px solid var(--ink);padding:8px 10px 8px 0}
.ledger td{padding:10px 10px 10px 0;border-bottom:1px dotted var(--rule);vertical-align:top}
.ledger td:last-child{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

.grid{display:grid;gap:26px;grid-template-columns:1fr}
@media(min-width:900px){.grid.two{grid-template-columns:1.35fr .95fr}}
.panel{border:1px solid var(--rule);background:#fffdf8;padding:22px}
.panel h3{margin-top:0}
ul.marks{list-style:none;padding:0;margin:0 0 18px}
ul.marks li{padding:0 0 10px 26px;position:relative}
ul.marks li:before{content:"§";position:absolute;left:0;top:0;color:var(--clay);font-weight:700}
.cta{display:inline-block;background:var(--clay);color:#fff;text-decoration:none;
  font:700 14px/1 ui-sans-serif,system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;
  padding:15px 24px;border:0}
.cta:hover{background:var(--clay-d)}
.note{font-size:14.5px;color:var(--slate)}

/* form */
form.lead{display:grid;gap:12px}
form.lead label{font:700 12px/1 ui-sans-serif,system-ui,sans-serif;letter-spacing:.1em;
  text-transform:uppercase;color:var(--slate)}
form.lead input,form.lead select,form.lead textarea{
  width:100%;padding:11px 12px;border:1px solid var(--slate);background:#fff;color:var(--ink);
  font:16px/1.4 ui-sans-serif,system-ui,sans-serif;border-radius:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

footer{border-top:2px solid var(--ink);margin-top:56px;padding:28px 0 46px;
  font:14px/1.6 ui-sans-serif,system-ui,sans-serif;color:var(--slate)}
footer a{color:var(--slate)}
footer nav{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:12px}