/* Layout: left-aligned, wide gutters; the hero is a stacked list of trades set like the lettering on the work truck,
   everything after it stays quiet. One accent (truck blue), one signal color (sign red) reserved for the phone number. */
:root{
  --ink:#16212c;        /* navy-black text */
  --slate:#5c6b7a;      /* secondary text */
  --rule:#d9e1e9;       /* hairlines */
  --field:#eef3f8;      /* pale blue field */
  --paper:#ffffff;
  --truck:#1868b4;      /* truck blue, deepened for text */
  --sky:#2f93dc;        /* truck blue as painted */
  --sign:#c0352b;       /* red from the truck cap */
  --display:"Barlow Condensed","Arial Narrow",Impact,sans-serif;
  --ui:"Barlow","Helvetica Neue",Arial,sans-serif;
  --body:"Source Serif 4",Georgia,"Times New Roman",serif;
  --max:1180px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:clip;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:18px;line-height:1.6}
img{max-width:100%;display:block}
picture{display:contents}
a{color:var(--truck)}
a:focus-visible,button:focus-visible{outline:3px solid var(--sky);outline-offset:3px}
.wrap{max-width:var(--max);margin-inline:auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1;margin:0;text-wrap:balance;letter-spacing:-.005em}
p{margin:0}
.lede{font-size:clamp(20px,2.2vw,26px);line-height:1.45;max-width:34em}
.muted{color:var(--slate)}

/* top bar */
.top{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:1px solid var(--rule)}
.top .wrap{display:flex;align-items:center;gap:28px;min-height:72px}
.brand{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none;font-family:var(--display);font-weight:700;font-size:26px;line-height:1;letter-spacing:.01em}
.brand svg{width:34px;height:34px;flex:none}
.brand small{display:block;font-family:var(--ui);font-weight:500;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--slate);margin-top:3px}
nav.site ul{list-style:none;margin:0 0 0 auto;padding:0;display:flex;gap:4px}
nav.site a{display:block;padding:10px 14px;font-family:var(--ui);font-weight:600;font-size:16px;color:var(--ink);text-decoration:none;border-radius:4px}
nav.site a:hover{background:var(--field)}
nav.site li.current a{box-shadow:inset 0 -3px 0 var(--sky)}
.call{font-family:var(--display);font-weight:700;font-size:28px;color:var(--sign);text-decoration:none;white-space:nowrap;letter-spacing:.01em;font-variant-numeric:tabular-nums}
.call:hover{text-decoration:underline;text-underline-offset:4px}
.call.menu{display:none;margin:0 max(20px,env(safe-area-inset-left,0px)) 0}
.menu-btn{display:none;margin-left:auto;background:none;border:1px solid var(--rule);border-radius:4px;padding:8px 10px;font:600 15px var(--ui);color:var(--ink);cursor:pointer}

/* hero */
.hero .wrap{display:grid;grid-template-columns:minmax(0,max-content) minmax(260px,1fr);gap:40px;align-items:center;padding-block:56px 44px}
.stack{font-family:var(--display);font-weight:800;font-size:clamp(64px,9.5vw,150px);line-height:.86;letter-spacing:-.015em;text-transform:uppercase;color:var(--ink);margin:0}
.stack span{display:block}
.stack span:last-child{color:var(--sky)}
.hero-copy{display:grid;gap:22px;padding-top:10px}
.hero-copy h1{font-size:clamp(28px,3.2vw,40px);font-weight:600;line-height:1.1}
.hero-facts{display:flex;flex-wrap:wrap;gap:8px 22px;font-family:var(--ui);font-size:15px;color:var(--slate)}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--truck);color:#fff;text-decoration:none;font-family:var(--display);font-weight:700;font-size:26px;padding:12px 22px 13px;border-radius:4px;line-height:1;letter-spacing:.01em;width:max-content}
.btn:hover{background:#125592}
.btn.ghost{background:none;color:var(--truck);box-shadow:inset 0 0 0 2px var(--truck)}
.btn.ghost:hover{background:var(--field)}
.hero-photo img{width:100%;height:auto;aspect-ratio:2576/989;object-fit:cover}

/* about */
.about{background:var(--field)}
.about .wrap{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:48px;align-items:center;padding-block:64px}
.about h2{font-size:clamp(34px,4vw,52px);margin-bottom:22px}
.about .owners{margin-top:26px;font-family:var(--ui);font-weight:600;font-size:17px}
.award{justify-self:end;text-align:center;font-family:var(--ui);font-size:14px;color:var(--slate)}
.award img{width:200px;margin:0 auto 10px;border-radius:3px}

/* services */
.services .wrap{padding-block:72px 64px}
.sec-head{display:flex;align-items:end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:34px}
.sec-head h2{font-size:clamp(36px,4.5vw,56px)}
.sec-head p{font-family:var(--ui);color:var(--slate);font-size:16px}
.trades{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.trade img{aspect-ratio:4/3;object-fit:cover;width:100%;border-radius:3px}
.trade h3{font-size:30px;margin:16px 0 8px}
.trade ul{margin:0;padding:0;list-style:none;font-size:16.5px;line-height:1.5}
.trade li{padding:6px 0;border-top:1px solid var(--rule)}
.trade li:last-child{border-bottom:1px solid var(--rule)}

/* promises band */
.promise{background:var(--ink);color:#fff}
.promise .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 36px;padding-block:40px}
.promise p{font-family:var(--display);font-weight:700;font-size:clamp(24px,2.6vw,32px);line-height:1.05;letter-spacing:.005em}
.promise p::before{content:"";display:block;width:36px;height:4px;background:var(--sky);margin-bottom:12px}

/* work strip */
.work .wrap{padding-block:72px 64px}
.strip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-flow:dense;gap:10px}
.strip a{display:block;aspect-ratio:1;overflow:hidden;border-radius:3px;background:var(--field)}
.strip img{width:100%;height:100%;object-fit:cover}
.strip a:nth-child(1){grid-column:span 2;grid-row:span 2}

/* testimonials */
.quotes{background:var(--field)}
.quotes .wrap{padding-block:72px 64px}
.qgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.qgrid blockquote,.qlist blockquote{margin:0;display:grid;gap:14px}
blockquote p{font-size:19px;line-height:1.55}
blockquote p::before{content:"\201C";font-family:var(--display);font-weight:800;font-size:64px;line-height:0;vertical-align:-18px;color:var(--sky);margin-right:4px}
blockquote cite{font-style:normal;font-family:var(--ui);font-weight:600;font-size:15px;color:var(--slate)}

/* contact / footer */
.contact .wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:48px;align-items:center;padding-block:80px 64px}
.contact h2{font-size:clamp(40px,5.5vw,72px);margin-bottom:18px}
.contact .big{font-family:var(--display);font-weight:800;font-size:clamp(44px,6.5vw,84px);color:var(--truck);text-decoration:none;line-height:1;letter-spacing:-.01em;font-variant-numeric:tabular-nums;display:inline-block;margin:10px 0 18px}
.contact .big:hover{text-decoration:underline;text-underline-offset:8px;text-decoration-thickness:4px}
.detail{display:grid;grid-template-columns:auto 1fr;gap:10px 22px;font-family:var(--ui);font-size:17px;align-content:start}
.detail dt{color:var(--slate);font-weight:500}
.detail dd{margin:0;font-weight:600}
.detail a{color:var(--ink);text-decoration:none}
.detail a:hover{text-decoration:underline}
footer{border-top:1px solid var(--rule)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;padding-block:22px;font-family:var(--ui);font-size:14px;color:var(--slate)}
footer a{color:var(--slate)}

/* inner pages */
.page-head .wrap{padding-block:56px 36px;display:grid;gap:16px}
.page-head h1{font-size:clamp(48px,7vw,96px);text-transform:uppercase;letter-spacing:-.01em;line-height:.9}
.page-head .lede{font-size:clamp(19px,1.8vw,22px)}
.gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:dense;gap:10px;padding-bottom:72px}
.gallery a{display:block;aspect-ratio:1;overflow:hidden;border-radius:3px;background:var(--field)}
.gallery a.tall{grid-row:span 2;aspect-ratio:auto}
.gallery a.wide{grid-column:span 2;aspect-ratio:2/1}
.gallery img{width:100%;height:100%;object-fit:cover}
.svc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center;padding-block:40px;border-top:1px solid var(--rule)}
.svc:nth-child(even) .svc-img{order:2}
.svc img{aspect-ratio:4/3;object-fit:cover;width:100%;border-radius:3px}
.svc h2{font-size:clamp(36px,4.5vw,60px);margin-bottom:14px}
.svc ul{margin:0;padding:0;list-style:none;font-size:18px;columns:1}
.svc li{padding:8px 0;border-top:1px solid var(--rule)}
.svc li:last-child{border-bottom:1px solid var(--rule)}
.svc-list{padding-bottom:40px}
.qlist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 56px;padding-bottom:80px}
.qlist blockquote p{font-size:21px}
.qlist blockquote.lead{grid-column:1/-1;max-width:40em}
.qlist blockquote.lead p{font-size:clamp(24px,2.6vw,32px);line-height:1.35}

@media (prefers-reduced-motion:no-preference){
  .strip img,.gallery img{transition:transform .35s ease}
  .strip a:hover img,.gallery a:hover img{transform:scale(1.03)}
}
@media (max-width:980px){
  .trades,.promise .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}
  .qgrid{grid-template-columns:1fr}
  .strip{grid-template-columns:repeat(3,minmax(0,1fr))}
  .gallery{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:820px){
  .menu-btn{display:block}
  nav.site{position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid var(--rule);display:none}
  nav.site.open{display:block}
  nav.site ul{flex-direction:column;padding:8px max(20px,env(safe-area-inset-left,0px)) 14px;margin:0;gap:0}
  nav.site a{padding:12px 6px;font-size:18px}
  nav.site li.current a{box-shadow:inset 4px 0 0 var(--sky);padding-left:14px}
  .top .wrap{gap:12px;min-height:64px}
  .brand{font-size:20px;gap:9px;min-width:0;flex:1}
  .brand svg{width:28px;height:28px}
  .brand small{display:none}
  .brand span.t{line-height:.95;text-wrap:balance}
  .call.bar{display:none}
  .call.menu{display:block;padding:14px 6px 16px;font-size:26px;border-top:1px solid var(--rule);margin-top:6px}
  .hero .wrap,.about .wrap,.contact .wrap,.svc{grid-template-columns:1fr;gap:28px}
  .svc:nth-child(even) .svc-img{order:0}
  .award{justify-self:start}
  .stack{font-size:clamp(56px,16vw,120px)}
}
@media (max-width:560px){
  body{font-size:17px}
  .trades,.promise .wrap{grid-template-columns:1fr}
  .strip,.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
  .qlist{grid-template-columns:1fr}
  .gallery a.wide{grid-column:span 2}
}