/* =========================================================================
   BAKER ROOFING — shared design system
   Tokens, type ramp and signature devices transcribed from the baker-roofing
   kit (_shared.css), itself extracted from bakerroofing.com.
   Comment counts are live-CSS occurrence counts from that extraction.
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Archivo:wght@400;500;600;700&display=swap');

:root{
  /* colour */
  --ink:#3b3835;          /* 97  — body ink AND the charcoal panel ground */
  --ink-muted:#6f6a64;    /* 4.7:1 on paper — body-adjacent muted copy    */
  --ink-quiet:#8a847d;    /* 3.4:1 — doc chrome only, never client copy   */
  --paper:#f5f5f5;        /* 124 — page ground and text-on-charcoal       */
  --bg-warm:#f1efec;      /* 5   — warm alt ground                        */
  --grey:#dad5d1;         /* 19  — hairline dividers, empty thumbs        */
  --accent:#fd3a20;       /* 117 — overlines, CTAs, arrows, hovers        */
  --accent-deep:#d42f1a;  /* 19  — hover / pressed                        */
  --sand:#d0ba95;         /* 16  — infobox labels, program lead line      */
  --pop:#165051;          /* 10  — the National Accounts teal panel       */
  --navy:#1c1f2a;         /* 14  — deepest ground, footer legal           */
  --paper-72:rgba(245,245,245,.72);
  --paper-60:rgba(245,245,245,.60);

  /* type — field-gothic-xcondensed -> Oswald, trade-gothic-next -> Archivo.
     Line-heights loosened from the source's .776–.84: those numbers are
     calibrated to Field Gothic's vertical metrics and stack on Oswald. */
  --font-display:'Oswald','Arial Narrow',system-ui,sans-serif;
  --font-body:'Archivo',system-ui,sans-serif;

  /* geometry */
  --cut-x:66px; --cut-y:42px;   /* the cut top-right corner, mobile size */
  --radius:4px;                 /* 58 uses; 3px for tight corners        */
  --mortar:3px;                 /* the grid gap that lets paper read through */
  --section:88px;
  --container:1296px;
  --shadow-card:0 10px 34px rgba(59,56,53,.10);
}
@media(min-width:900px){ :root{ --cut-x:108px; --cut-y:69px; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-body); font-size:16px; line-height:1.6;
  text-wrap:pretty;
}
img{ max-width:100%; display:block; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ color:var(--accent-deep); }

/* Block-level links (rows, cards, tiles) carry ink, not the accent.
   An <h3> inside a linked row inherits the link colour unless something stops
   it, which silently breaks the system's central colour rule: red is rationed
   to overlines, CTAs and arrows and NEVER fills a headline. Inline links keep
   the accent; anything that wraps a block of content does not. */
a.job-row,
a.proj,
a.person,
a.card-link{ color:var(--ink); }
a.job-row h3{ color:var(--ink); transition:color .18s ease; }
a.job-row:hover h3{ color:var(--accent); }

/* ---------- type ------------------------------------------------------- */
h1,h2,h3,h4,.display{ font-family:var(--font-display); font-weight:600; margin:0; }
h1,.display{ font-size:clamp(3rem,2rem + 5vw,6.125rem); line-height:.9; letter-spacing:-.01em; }
h2,.h2{ font-size:clamp(2.25rem,1.7rem + 2.6vw,4rem); line-height:.92; letter-spacing:-.01em; }
h3,.h3{ font-size:clamp(1.5rem,1.2rem + 1.4vw,2.1rem); line-height:1.08; }
h4{ font-size:1.15rem; line-height:1.2; }
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }
.lead{ font-size:1.15rem; line-height:1.55; color:var(--ink-muted); }
.muted{ color:var(--ink-muted); }
.kit-note{ color:var(--ink-quiet); font-size:.85rem; }

/* The site's own overline: red, uppercase, 700. Transcribed verbatim —
   this is Baker's structural page grammar, not a decorative kicker. */
.sec-label{
  font-family:var(--font-body); color:var(--accent);
  font-size:.9375rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; margin:0 0 14px;
}
.sec-label.spaced{ letter-spacing:.1875rem; }
.sec-label.sand{ color:var(--sand); }

/* ---------- layout ----------------------------------------------------- */
.wrap{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:28px; }
.wrap-narrow{ width:100%; max-width:900px; margin-inline:auto; padding-inline:28px; }
.section{ padding:var(--section) 0; }
.section.tight{ padding:calc(var(--section) * .6) 0; }
.on-warm{ background:var(--bg-warm); }
.on-dark{ background:var(--ink); color:var(--paper); }
.on-dark p{ color:var(--paper-72); }
.on-navy{ background:var(--navy); color:var(--paper); }

/* ---------- signature: the cut top-right corner ------------------------ */
/* Transcribed from theme.css: mobile 66x42, desktop 108x69. Applied to
   feature images exactly as the source does. */
.cut{ clip-path:polygon(0 0, calc(100% - var(--cut-x)) 0, 100% var(--cut-y), 100% 100%, 0 100%); }

/* ---------- buttons ---------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-weight:600; font-size:1rem;
  text-transform:uppercase; letter-spacing:.02em; line-height:1;
  padding:16px 26px; border-radius:var(--radius); border:2px solid transparent;
  background:var(--accent); color:var(--paper); cursor:pointer;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover{ background:var(--accent-deep); color:var(--paper); }
.btn .arw{ font-family:var(--font-body); font-weight:700; }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.btn-ghost.on-dark-btn{ color:var(--paper); border-color:var(--paper-60); }
.btn-ghost.on-dark-btn:hover{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.btn-row{ display:flex; flex-wrap:wrap; gap:14px; }
.see-all{
  font-family:var(--font-display); font-weight:600; text-transform:uppercase;
  color:var(--accent); letter-spacing:.02em; white-space:nowrap;
}

/* ---------- site chrome ------------------------------------------------ */
.util-bar{
  background:var(--navy); color:var(--paper-72);
  font-size:.8125rem; letter-spacing:.02em;
}
.util-bar .wrap{ display:flex; align-items:center; gap:22px; height:42px; }
.util-bar .phone{
  font-family:var(--font-display); font-weight:600; letter-spacing:.02em;
  color:var(--paper); margin-right:auto; font-size:.95rem;
}
.util-bar a{ color:var(--paper-72); }
.util-bar a:hover{ color:var(--paper); }

.nav{ background:var(--paper); border-bottom:1px solid var(--grey); }
.nav .wrap{ display:flex; align-items:center; gap:30px; height:88px; }
.nav .logo{ height:38px; width:auto; margin-right:auto; }
.nav .links{ display:flex; gap:26px; align-items:center; }
.nav .links a{
  font-family:var(--font-display); font-weight:500; font-size:.95rem;
  text-transform:uppercase; letter-spacing:.01em; color:var(--ink); padding:6px 0;
  border-bottom:2px solid transparent;
}
.nav .links a:hover{ color:var(--accent); border-bottom-color:var(--accent); }
@media(max-width:900px){
  .nav .links{ display:none; }
  .nav .wrap{ height:70px; }
}

/* ---------- footer ----------------------------------------------------- */
.footer{ background:var(--ink); color:var(--paper); padding:64px 0 0; }
.footer .cols{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:38px; }
.footer h4{
  color:var(--sand); font-size:.82rem; letter-spacing:.18em;
  text-transform:uppercase; margin:0 0 16px; font-family:var(--font-body); font-weight:700;
}
.footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.footer li a{ color:var(--paper-72); font-size:.95rem; }
.footer li a:hover{ color:var(--paper); }
.footer .logo{ height:44px; width:auto; margin-bottom:18px; }
.footer .legal{
  margin-top:52px; border-top:1px solid rgba(245,245,245,.14);
  padding:22px 0 26px; display:flex; gap:20px; flex-wrap:wrap;
  font-size:.82rem; color:var(--paper-60);
}
.footer .legal .sp{ margin-right:auto; }
@media(max-width:980px){ .footer .cols{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .footer .cols{ grid-template-columns:1fr; } }

/* ---------- responsive -------------------------------------------------- */
@media(max-width:880px){
  :root{ --section:60px; }
  .wrap,.wrap-narrow{ padding-inline:20px; }
}