/* Brooks Construction — archetype F, service index.
   No hero and no shared gallery. Each division is its own deep block with its
   own evidence and its own call to action, because the three divisions sell to
   three different buyers. Numbered rules and a slab-serif set this apart from
   the sans-on-dark builds in the ledger. */

:root{
  --ink:#1d1c1a; --ink-2:#565350; --line:#d9d5cd;
  --paper:#f5f3f0; --alt:#e9e5e0; --white:#fff;
  --steel:#8a3b2e; --steel-lit:#a8503f; --rust:#2f4a5c;
  --slab:"Roboto Slab",Rockwell,Georgia,serif;
  --sans:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.68 var(--sans)}
h1,h2{font-family:var(--slab);font-weight:700;line-height:1.14;margin:0 0 .5em}
a{color:inherit}
.btn{display:inline-block;background:var(--steel);color:#fff;text-decoration:none;
     padding:14px 26px;border:0;border-radius:2px;font:600 16px var(--sans);cursor:pointer}
.btn:hover{background:var(--rust)}
.btn.sm{padding:9px 16px;font-size:14px}

.top{display:flex;align-items:center;gap:24px;flex-wrap:wrap;
     padding:18px 40px;border-bottom:3px solid var(--ink);background:var(--white)}
.brand{font-family:var(--slab);font-weight:700;font-size:25px;text-decoration:none;line-height:1}
.brand span{display:block;font-family:var(--sans);font-weight:400;font-size:11px;
            letter-spacing:.3em;text-transform:uppercase;color:var(--ink-2);margin-top:3px}
.since{margin:0;margin-right:auto;font-size:14px;color:var(--ink-2);
       border-left:1px solid var(--line);padding-left:24px}
.since b{color:var(--rust);font-family:var(--slab)}
.reach{display:flex;align-items:center;gap:16px}
.reach a:first-child{font-family:var(--slab);font-size:19px;text-decoration:none}

.lead{max-width:960px;margin:0 auto;padding:76px 40px 56px}
h1{font-size:clamp(2.2rem,4.6vw,3.4rem);max-width:20ch}
.lead p{font-size:20px;color:var(--ink-2);max-width:60ch}
.jump{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:44px;
      border:2px solid var(--ink)}
.jump a{padding:22px;text-decoration:none;font-family:var(--slab);font-size:20px;
        border-right:2px solid var(--ink);display:flex;align-items:baseline;gap:12px}
.jump a:last-child{border-right:0}
.jump b{font-family:var(--sans);font-size:12px;letter-spacing:.14em;color:var(--rust)}
.jump a:hover{background:var(--ink);color:var(--paper)}
.jump a:hover b{color:var(--steel-lit)}

/* each division */
.div{padding:70px 40px;border-top:1px solid var(--line)}
.div.alt{background:var(--alt)}
.div>*{max-width:960px;margin-left:auto;margin-right:auto}
.head{display:grid;grid-template-columns:auto 1fr;gap:0 22px;align-items:start}
.no{font-family:var(--slab);font-size:15px;color:#fff;background:var(--rust);
    width:38px;height:38px;display:grid;place-items:center;border-radius:2px;margin-top:6px}
.head h2{font-size:clamp(1.8rem,3.4vw,2.5rem);margin:0}
.head p{grid-column:2;color:var(--ink-2);max-width:58ch;margin:.5em 0 0}
.body{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:start;
      margin-top:34px;margin-bottom:32px}
.lines{list-style:none;padding:0;margin:0}
.lines li{padding:15px 0;border-bottom:1px solid var(--line);font-size:15.5px;color:var(--ink-2)}
.lines b{display:block;font-family:var(--slab);font-size:17.5px;color:var(--ink);margin-bottom:3px}
.grid8{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:9px}
.grid8 li{border:2px solid var(--ink);padding:13px 16px;font-family:var(--slab);font-size:16px}

.ev{margin:0}
.ph{background:repeating-linear-gradient(135deg,#e3e0d8 0 14px,#dbd7ce 14px 28px);
    border:1px solid var(--line);aspect-ratio:4/3;display:grid;place-items:center;
    padding:18px;text-align:center;font-size:13px;color:#8d8880;letter-spacing:.04em}
.ev.wide .ph{aspect-ratio:16/7}
.ph::after{content:attr(data-ph)}
.ev figcaption{font-size:14.5px;color:var(--ink-2);padding-top:12px}
.ev figcaption b{color:var(--rust)}

.story{background:var(--steel);color:#e8eef2;padding:74px 40px}
.story>*{max-width:760px;margin-left:auto;margin-right:auto}
.story h2{color:#fff;font-size:clamp(1.8rem,3.4vw,2.5rem)}
.story p{color:#c3d2dc;font-size:19px}

.quote{max-width:960px;margin:0 auto;padding:74px 40px;display:grid;
       grid-template-columns:1fr 1.1fr;gap:48px;align-items:start}
.quote h2{font-size:clamp(1.8rem,3.4vw,2.4rem)}
.quote p{color:var(--ink-2)}
.direct{font-size:16px;line-height:2;margin-top:22px}
.direct a{color:var(--steel);font-weight:600}
form{background:var(--white);border:1px solid var(--line);padding:28px;border-radius:3px}
label{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
      color:var(--ink-2);margin-bottom:16px}
input,textarea,select{display:block;width:100%;margin-top:6px;padding:11px;
      border:1px solid var(--line);border-radius:2px;font:inherit;font-size:16px;background:var(--paper)}
input:focus,textarea:focus,select:focus{outline:2px solid var(--steel);border-color:transparent}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.sent{grid-column:1/-1;background:#e9f1e9;border:1px solid #b6d2b6;padding:16px;border-radius:2px}

footer{border-top:3px solid var(--ink);padding:34px 40px;font-size:14px;color:var(--ink-2);background:var(--white)}
footer .demo{font-size:12.5px;color:#8d8880;margin-top:8px}

@media (max-width:860px){
  .top{padding:16px 22px}.since{border:0;padding:0;width:100%;margin:0}
  .lead,.div,.quote,.story,footer{padding-left:22px;padding-right:22px}
  .jump{grid-template-columns:1fr}
  .jump a{border-right:0;border-bottom:2px solid var(--ink)}
  .jump a:last-child{border-bottom:0}
  .body,.quote,.two{grid-template-columns:1fr}
  .head{grid-template-columns:1fr}.head p,.no{grid-column:auto}
  .ev.wide .ph{aspect-ratio:4/3}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Rob's-specific: the body division uses a before/after pair rather than a
   single evidence frame, since that is how body work is actually judged. */
.pairs{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pairs figure{margin:0}
.pairs .ph{aspect-ratio:4/3}
.pairs figcaption{font-size:11px;letter-spacing:.2em;text-transform:uppercase;
                  color:var(--ink-2);padding-top:8px;font-weight:600}
.pairs figure:last-child figcaption{color:var(--steel)}
.say p{color:var(--ink-2)}
.say b{color:var(--ink)}
.pointed{background:var(--alt);border-left:4px solid var(--steel);padding:14px 17px;
         font-size:15px;margin-top:16px}