/* Grackle Roofing — shared stylesheet (one file for five pages). Tokens
   by role from sites/grackle/design.md. No framework, no build step. */
:root {
  --bg: #f8f5ef;
  --bg-deep: #efe9de;
  --surface: #ffffff;
  --line: rgba(28, 34, 38, 0.14);
  --text: #1c2226;
  --muted: #5b625f;
  --hero: #23423a;
  --hero-muted: #d9dcd6;
  --accent: #b8491f;
  --accent-deep: #8f3a1c;
  --accent-light: #e9a27a;
  --ok: #1f6b3a;
  --font-body: "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--text); font-family: var(--font-body);
       font-size: 17px; line-height: 1.55; }
@media (max-width: 640px) { body { padding-bottom: 4.4rem; } }
.wrap { max-width: 62rem; margin: 0 auto; padding: 0 1.1rem; }
section { padding: 2.8rem 0; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
h1 { font-size: clamp(2rem, 6.2vw, 3.2rem); }
h2 { font-size: clamp(1.5rem, 4vw, 2.1rem); margin-bottom: 0.5rem; }
h3 { font-size: 1.15rem; margin-bottom: 0.25rem; }
p { margin: 0 0 0.9rem; }
a { color: var(--accent-deep); }
.muted { color: var(--muted); }
.eyebrow { color: var(--accent-deep); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.14em;
           text-transform: uppercase; margin-bottom: 0.5rem; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 3.1rem;
       background: var(--accent); color: #fff; padding: 0.7rem 1.4rem; border-radius: 0.55rem; font-weight: 800;
       text-decoration: none; border: 0; font-size: 1.05rem; cursor: pointer; font-family: var(--font-body);
       transition: transform 0.12s ease; }
.btn:active { transform: scale(0.97); }
.btn.quiet { background: transparent; color: var(--accent-deep); border: 2px solid var(--accent-deep); }
.btn svg { width: 1.1em; height: 1.1em; }
.btn:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, button:focus-visible {
  outline: 3px solid var(--accent-light); outline-offset: 2px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 0.8rem; padding: 1.2rem; }
.grid { display: grid; gap: 0.9rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid.two { grid-template-columns: 1fr 1fr; } .grid.three { grid-template-columns: 1fr 1fr 1fr; } }
.alt { background: var(--bg-deep); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* header */
.site-head { position: sticky; top: 0; z-index: 5; background: var(--surface); border-bottom: 1px solid var(--line); }
.site-head .wrap { display: flex; align-items: center; gap: 0.6rem; min-height: 3.6rem; }
.brand { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; color: var(--text);
         font-weight: 800; font-size: 1.05rem; letter-spacing: -0.01em; }
.brand svg { width: 1.7rem; height: 1.7rem; flex: 0 0 auto; }
.brand span { white-space: nowrap; }
@media (max-width: 380px) { .brand { font-size: 0.92rem; } }
.site-head .call { margin-left: auto; }
.site-head .call .num { display: none; }
@media (min-width: 640px) { .site-head .call .num { display: inline; } }
nav.sub { background: var(--bg-deep); border-bottom: 1px solid var(--line); }
nav.sub .wrap { display: flex; gap: 0.2rem; overflow-x: auto; }
nav.sub a { display: inline-block; padding: 0.7rem 0.65rem; min-height: 2.75rem; text-decoration: none;
            color: var(--text); font-weight: 600; font-size: 0.92rem; white-space: nowrap; }
nav.sub a[aria-current] { color: var(--accent-deep); box-shadow: inset 0 -3px 0 var(--accent); }

/* hero */
.hero { background: var(--hero); color: var(--hero-muted); position: relative; overflow: hidden; padding: 2.6rem 0 2.2rem; }
.hero .art { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.28; pointer-events: none; }
.hero .wrap { position: relative; }
.hero .eyebrow { color: var(--accent-light); }
.hero h1 { color: #fff; max-width: 15ch; }
.hero .lede { font-size: 1.12rem; max-width: 36rem; color: var(--hero-muted); margin: 0.9rem 0 1.4rem; }
.hero .actions { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; }
.hero .actions a.alt2 { color: var(--accent-light); font-weight: 700; text-decoration: none; min-height: 3.1rem;
                        display: inline-flex; align-items: center; padding: 0 0.4rem; }
.storm { margin-top: 1.2rem; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18);
         border-radius: 0.7rem; padding: 0.8rem 1rem; display: flex; gap: 0.7rem; align-items: center; flex-wrap: wrap; }
.storm b { color: #fff; }
.storm a { color: var(--accent-light); font-weight: 700; }
.trust { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1rem; margin-top: 1.4rem; padding-top: 1.2rem;
         border-top: 1px solid rgba(255,255,255,0.14); font-size: 0.92rem; }
@media (min-width: 640px) { .trust { grid-template-columns: repeat(4, 1fr); } }
.trust span { display: flex; align-items: center; gap: 0.45rem; color: #eef0f2; }
.trust svg { width: 1rem; height: 1rem; color: var(--accent-light); flex: 0 0 auto; }

/* zip check */
.zip { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.4rem; }
.zip input { flex: 1 1 8rem; min-height: 3.1rem; font-size: 1.15rem; padding: 0.5rem 0.9rem; border: 2px solid var(--line);
             border-radius: 0.55rem; font-family: var(--font-body); background: var(--surface); color: var(--text); letter-spacing: 0.08em; }
.zipout { margin-top: 0.8rem; min-height: 1.6rem; font-weight: 600; }
.zipout.yes { color: var(--ok); }
.zipout.no { color: var(--accent-deep); }
.zipout a { color: inherit; }

/* storm checklist (centerpiece) */
.checks { list-style: none; padding: 0; display: grid; gap: 0.55rem; grid-template-columns: 1fr; margin: 0.8rem 0 1rem; }
@media (min-width: 640px) { .checks { grid-template-columns: 1fr 1fr; } }
.checks label { display: flex; gap: 0.7rem; align-items: center; min-height: 3rem; padding: 0.55rem 0.8rem;
                border: 2px solid var(--line); border-radius: 0.6rem; background: var(--surface); cursor: pointer; font-weight: 600; }
.checks input { width: 1.35rem; height: 1.35rem; accent-color: var(--accent); flex: 0 0 auto; }
.checks label:has(input:checked) { border-color: var(--accent); background: #fff7f2; }
.next { margin-top: 1rem; display: none; }
.next.show { display: block; }
.next .card { border: 2px solid var(--accent); background: var(--surface); }
.next.urgent .card { border-color: var(--accent-deep); background: #fff4ee; }
.next ol { padding-left: 1.2rem; margin: 0.5rem 0 0.9rem; }
.next li { margin-bottom: 0.45rem; }
.next p:last-child { margin: 0; }

/* services table */
table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line);
        border-radius: 0.8rem; overflow: hidden; }
th, td { text-align: left; padding: 0.75rem 0.9rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); background: var(--bg-deep); }
td.price { white-space: nowrap; font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; }
tr:last-child td { border-bottom: 0; }
.note { font-size: 0.9rem; color: var(--muted); }

/* steps */
.steps { counter-reset: s; display: grid; gap: 0.9rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .steps { grid-template-columns: 1fr 1fr 1fr; } }
.steps .card::before { counter-increment: s; content: counter(s); display: inline-flex; width: 2rem; height: 2rem;
                       align-items: center; justify-content: center; border-radius: 50%; background: var(--accent);
                       color: #fff; font-weight: 800; margin-bottom: 0.6rem; }

/* form */
form.quote label { display: block; font-weight: 700; margin: 0.9rem 0 0.25rem; }
form.quote input, form.quote textarea { width: 100%; min-height: 3.1rem; font-size: 1.05rem; padding: 0.6rem 0.9rem;
    border: 2px solid var(--line); border-radius: 0.55rem; font-family: var(--font-body); background: var(--surface); color: var(--text); }
form.quote textarea { min-height: 6rem; resize: vertical; }
form.quote .err { color: #9b1c1c; font-weight: 600; margin-top: 0.35rem; display: none; }
form.quote.bad .err { display: block; }
form.quote .sent { background: var(--bg-deep); border: 2px solid var(--accent); border-radius: 0.8rem; padding: 1.1rem 1.2rem; }
form.quote .sent p:last-child { margin: 0; }
form.quote .btn { margin-top: 1.1rem; width: 100%; }
@media (min-width: 640px) { form.quote .btn { width: auto; } }

/* band + footer */
.band { background: var(--bg-deep); border-top: 1px solid var(--line); padding: 1.6rem 0; }
.band ul { list-style: none; padding: 0; display: grid; gap: 0.5rem 1.2rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .band ul { grid-template-columns: 1fr 1fr; } }
.band li { display: flex; gap: 0.5rem; align-items: flex-start; font-weight: 600; }
.band li svg { width: 1.1rem; height: 1.1rem; color: var(--accent-deep); flex: 0 0 auto; margin-top: 0.2rem; }
footer { background: var(--hero); color: var(--hero-muted); padding: 2.2rem 0 2.6rem; font-size: 0.92rem; }
footer a { color: var(--accent-light); }
footer .cols { display: grid; gap: 1.2rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { footer .cols { grid-template-columns: 1.2fr 1fr 1fr; } }
footer b { color: #fff; }
footer .fine { margin-top: 1.6rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.14); font-size: 0.85rem; color: #b9c0bb; }

/* sticky call bar (phones) */
.callbar { display: none; }
@media (max-width: 640px) {
  .callbar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 6;
             padding: 0.55rem 0.8rem calc(0.55rem + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); }
  .callbar .btn { width: 100%; }
}
#toast { position: fixed; left: 50%; bottom: 5rem; opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(300%);
         background: var(--text); color: var(--bg); padding: 0.8rem 1.1rem; border-radius: 0.6rem; font-size: 0.95rem;
         max-width: min(92vw, 30rem); transition: transform 0.25s ease; z-index: 30; text-align: center; }
@media (min-width: 641px) { #toast { bottom: 1.4rem; } }
#toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
/* page-level */
.hours dt { font-weight: 700; margin-top: 0.6rem; }
.hours dd { margin: 0; color: var(--muted); }
.cities { list-style: none; padding: 0; display: grid; gap: 0.6rem; grid-template-columns: 1fr 1fr; }
@media (min-width: 640px) { .cities { grid-template-columns: 1fr 1fr 1fr; } }
.cities li { background: var(--surface); border: 1px solid var(--line); border-radius: 0.6rem; padding: 0.7rem 0.9rem; font-weight: 700; }
.cities small { display: block; font-weight: 500; color: var(--muted); }
/* phone: let the service column breathe; the price column stays narrow */
@media (max-width: 640px) { td:first-child { width: 70%; } td.price { padding-left: 0.4rem; } }