/* ═══════════════════════════════════════════════════════════════════════════
   PLATE — the EVIDENCE archetype. Names no colour.

   Roofing is a considered purchase with an emergency edge, and the thing that
   actually closes it is proof: photographs of the roof, a written scope, a
   number. So the page is a sequence of PLATES — wide bands that each carry one
   piece of evidence and are visually distinct from their neighbours.

   Photography is the binding constraint. Clients supply their own and they are
   mismatched, so every image sits in a fixed 4:3 frame with a caption bar
   underneath. Nothing is full-bleed behind text except the opening plate, and
   that one carries a scrim sized for a bad photograph rather than a good one.

   Vertical rhythm alternates band / tint / ink deliberately — uniform section
   heights were the loudest "this is a template" tell in the layout research.
   ═══════════════════════════════════════════════════════════════════════════ */

.top{position:sticky;top:0;z-index:40;background:var(--card);border-bottom:1px solid var(--line)}
.top .in{max-width:1320px;margin-inline:auto;padding:0 clamp(20px,4vw,44px);
  display:flex;align-items:center;gap:26px;min-height:76px}
.brand{font-family:var(--font-head);font-weight:700;font-size:1.2rem;letter-spacing:-.03em;
  color:var(--ink);text-decoration:none;margin-right:auto;line-height:1.1}
.top nav{display:flex;gap:24px}
.top nav a{color:var(--body);text-decoration:none;font-size:.9375rem}
.top nav a:hover{color:var(--accent-dark)}
.top nav a[aria-current]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent)}
.top .call{background:var(--accent);color:var(--on-accent);text-decoration:none;font-weight:700;
  padding:0 20px;border-radius:var(--btn-radius);display:inline-flex;align-items:center;
  min-height:46px;white-space:nowrap}
.top .call:hover{background:var(--accent-dark)}
@media (max-width:920px){.top nav{display:none}}
@media (max-width:520px){.top .call{padding:0 14px;font-size:.9375rem}}

/* ── the opening plate ──────────────────────────────────────────────────── */
.plate{position:relative;min-height:clamp(460px,72vh,720px);display:flex;align-items:flex-end;
  overflow:hidden;background:var(--ink)}
.plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
/* Sized for a bad photograph, not a good one — a client's phone picture may be
   blown out across the middle where the words sit. */
.plate::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(
  180deg,rgba(10,12,14,.42) 0%,rgba(10,12,14,.28) 40%,rgba(10,12,14,.86) 100%)}
.plate .in{position:relative;z-index:2;width:100%;max-width:1320px;margin-inline:auto;
  padding:0 clamp(20px,4vw,44px) clamp(40px,6vh,76px)}
.plate .eyebrow{color:var(--card);opacity:.9}
.plate h1{color:var(--card);font-size:var(--step-6);max-width:16ch;margin:0 0 20px}
.plate .sub{color:var(--card);opacity:.92;font-size:clamp(1.0625rem,1rem + .4vw,1.3rem);
  max-width:46ch;margin:0 0 28px}
.plate .acts{display:flex;gap:12px;flex-wrap:wrap;max-width:none;margin:0}
.plate .btn{background:var(--card);color:var(--ink);border-color:var(--card)}
.plate .btn:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.plate .btn--line{background:transparent;color:var(--on-ink);border-color:var(--on-ink)}
.plate .btn--line:hover{background:var(--card);color:var(--ink)}

/* ── bands, alternating on purpose ──────────────────────────────────────── */
.band{max-width:1320px;margin-inline:auto;padding:clamp(52px,7vw,104px) clamp(20px,4vw,44px)}
.band--tall{padding-block:clamp(72px,10vw,144px)}
.band--short{padding-block:clamp(40px,5vw,72px)}
.tint{background:var(--surface);border-block:1px solid var(--line)}
.tint > .band{padding-inline:clamp(20px,4vw,44px)}
.dark{background:var(--ink)}
.dark h2,.dark h3{color:var(--on-ink)}
.dark p,.dark li{color:var(--on-ink-muted)}

.say h2{font-size:clamp(1.7rem,1.25rem + 2.1vw,2.7rem);max-width:20ch;margin:0 0 22px}
.say .col{max-width:62ch;color:var(--body)}
.say .col p{margin:0 0 18px}
.say .col p:last-child{margin:0}

/* ── the comparative stat ───────────────────────────────────────────────── */
.pair{display:grid;gap:32px}
@media (min-width:780px){.pair{grid-template-columns:1fr 1fr;gap:64px}}
.pair dl{margin:0;border-top:2px solid var(--ink);padding-top:18px}
.pair dt{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  margin-bottom:12px;max-width:28ch}
.pair .fig{display:block;font-family:var(--font-head);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(2.4rem,1.7rem + 3vw,3.8rem);line-height:.95;color:var(--accent);margin-bottom:12px}
.pair dd{margin:0;color:var(--body);max-width:36ch}

/* ── work plates: a fixed frame, so mismatched photographs still line up ── */
.works{display:grid;gap:clamp(20px,3vw,32px)}
@media (min-width:820px){.works{grid-template-columns:repeat(3,1fr)}}
.work{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column}
.work figure{margin:0}
.work img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--surface);display:block}
.work .cap{padding:18px 20px 20px;display:flex;flex-direction:column;gap:6px;flex:1}
.work h3{font-size:1.1rem;margin:0}
.work .meta{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.work p{margin:6px 0 0;color:var(--body);font-size:.9375rem}

/* ── services as full-width rows with a rule between ────────────────────── */
.list{list-style:none;margin:0;padding:0}
.list li{border-top:1px solid var(--line)}
.list li:last-child{border-bottom:1px solid var(--line)}
.list a,.list .item{display:grid;gap:8px 32px;padding:26px 0;text-decoration:none;color:inherit;
  align-items:baseline}
@media (min-width:780px){.list a,.list .item{grid-template-columns:minmax(0,15rem) minmax(0,1fr) auto}}
.list h3{font-size:clamp(1.2rem,1.05rem + .8vw,1.6rem);margin:0}
.list p{margin:0;color:var(--body);max-width:58ch}
.list .go{font-size:.8125rem;font-weight:700;color:var(--accent-dark);white-space:nowrap}
.list a:hover{background:var(--surface)}
.list a:hover h3{color:var(--accent-dark)}

/* ── process: numbers in flow, never absolute, so they cannot collide ───── */
.steps{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));counter-reset:s}
.steps > div{border-top:3px solid var(--accent);padding-top:16px}
.steps > div::before{counter-increment:s;content:counter(s);display:block;line-height:1;
  font-family:var(--font-head);font-weight:700;font-size:1.6rem;color:var(--accent);margin-bottom:12px}
.steps h3{font-size:1.0625rem;margin:0 0 6px;font-family:var(--font-body);font-weight:600}
.steps p{margin:0;color:var(--muted);font-size:.9375rem}

/* ── price ──────────────────────────────────────────────────────────────── */
.cost{display:grid;gap:28px;align-items:start}
@media (min-width:820px){.cost{grid-template-columns:minmax(0,1fr) auto;gap:64px}}
.cost h2{font-size:clamp(1.5rem,1.15rem + 1.6vw,2.2rem);margin:0 0 16px;max-width:22ch}
.cost p{margin:0;color:var(--body);max-width:58ch}
.cost .fig{font-family:var(--font-head);font-weight:700;letter-spacing:-.03em;line-height:1;
  font-size:clamp(2.4rem,1.8rem + 2.4vw,3.4rem);color:var(--accent);white-space:nowrap}
.cost .fig small{display:block;font-family:var(--font-body);font-weight:400;font-size:.75rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}

/* ── quote ──────────────────────────────────────────────────────────────── */
.pull{max-width:900px;margin-inline:auto;text-align:center}
.pull blockquote{margin:0;font-family:var(--font-head);font-weight:600;letter-spacing:-.022em;
  font-size:clamp(1.35rem,1.05rem + 1.5vw,2.1rem);line-height:1.24;color:var(--card)}
.pull cite{display:block;margin-top:22px;font-style:normal;font-size:.75rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--on-ink-muted)}

/* ── areas ──────────────────────────────────────────────────────────────── */
.tree{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.tree h3{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  font-family:var(--font-body);font-weight:700;margin-bottom:10px}
.tree ul{list-style:none;margin:0;padding:0}
.tree li{padding:5px 0;font-size:.9375rem}

/* ── faq ────────────────────────────────────────────────────────────────── */
.faq details{border-top:1px solid var(--line)}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:20px 44px 20px 0;position:relative;
  font-size:1.0625rem;color:var(--ink);min-height:44px;display:flex;align-items:center;font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';position:absolute;right:10px;top:50%;transform:translateY(-50%);
  font-size:1.5rem;line-height:1;color:var(--accent)}
.faq details[open] summary::after{content:'\2013'}
.faq details p{margin:0 0 20px;color:var(--body);max-width:64ch}

/* ── closing ────────────────────────────────────────────────────────────── */
.close{background:var(--ink)}
.close .in{max-width:1320px;margin-inline:auto;padding:clamp(56px,8vw,110px) clamp(20px,4vw,44px)}
.close h2{color:var(--card);font-size:clamp(1.7rem,1.25rem + 2.1vw,2.7rem);max-width:16ch;margin-bottom:24px}
.close .acts{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:52px;max-width:none}
.close .btn{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.close .btn:hover{background:var(--accent-dark);border-color:var(--accent-dark)}
.close .btn--line{background:transparent;color:var(--on-ink);border-color:var(--on-ink-muted)}
.close .btn--line:hover{background:var(--card);color:var(--ink);border-color:var(--card)}
.close .cols{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  padding-top:36px;border-top:1px solid var(--on-ink-muted)}
.close h3{color:var(--card);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
  font-family:var(--font-body);font-weight:700;margin-bottom:12px}
.close ul{list-style:none;margin:0;padding:0}
.close li{padding:4px 0;font-size:.9375rem;color:var(--on-ink-muted)}
.close a{color:var(--on-ink);text-decoration:none}
.close a:hover{color:var(--card)}
.close .fine{margin-top:44px;font-size:.8125rem;color:var(--on-ink-muted);max-width:74ch}