/* Canonical sitewide footer — single source of truth.
   Linked on every page after its inline <style>, so these rules are authoritative. */
footer{background:var(--navy);margin-top:0;padding:54px 0 36px;color:rgba(255,255,255,0.7)}
footer .wrap{max-width:1200px;margin:0 auto;padding:0 28px}

/* One full-width row: [ brand ] [ Services ] [ Company ] [ Connect ] [ Service Areas ].
   .foot has two children (brand block + .foot-links); the 4 columns live inside
   .foot-links, so we use a two-level grid: brand | link-group, then 4 even columns. */
.foot{display:grid;grid-template-columns:minmax(220px,1.4fr) 4fr;gap:40px;align-items:start;font-family:var(--sans)}
.foot p{color:rgba(255,255,255,0.55);font-size:13.5px;margin-top:6px;max-width:340px;line-height:1.6}
.foot-links{display:grid;grid-template-columns:1fr 1fr 1fr 1.25fr;gap:36px}
.foot-col h5{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,0.85);margin-bottom:14px}
.foot-col a{display:block;color:rgba(255,255,255,0.55);font-size:14px;margin-bottom:9px;transition:.2s}
.foot-col a:hover{color:var(--yellow)}
.copy{margin-top:40px;padding-top:24px;border-top:1px solid rgba(255,255,255,0.1);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:12.5px;color:rgba(255,255,255,0.5);font-family:var(--mono);letter-spacing:.04em}

/* Tablet: brand full width on top, columns 2-up */
@media(max-width:900px){
  .foot{grid-template-columns:1fr;gap:32px}
  .foot-links{grid-template-columns:1fr 1fr;gap:28px}
}
/* Mobile: single column */
@media(max-width:520px){
  .foot-links{grid-template-columns:1fr}
}