:root{
  --blue:#003865;
  --green:#78BE21;
  --white:#FFFFFF;
  --black:#000000;
  --teal:#008EAA;
  --deep-teal:#0D5257;
  --grayblue:#A4BCC2;
  --sand:#F5E1A4;
  --sky:#9BCBEB;
  --gold:#FFC845;
  --ink: var(--black);
  --paper: var(--white);
  --brand: var(--blue);
  --accent: var(--green);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--paper);line-height:1.55}
h1,h2,h3,h4{font-family:Manrope,Inter,sans-serif;letter-spacing:.2px;color:#0a1220}
img{max-width:100%;display:block}
a{color:var(--brand);text-decoration:none}
.container{max-width:1180px;margin:0 auto;padding:0 22px}

/* Header */
.site-header{position:sticky;top:0;background:rgba(255,255,255,.9);backdrop-filter:saturate(1.1) blur(8px);border-bottom:1px solid var(--grayblue);z-index:10}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px}
.logo{display:flex;align-items:center;gap:12px;font-weight:800;color:var(--brand)}
.logo-mark{width:36px;height:36px}
.wordmark span{color:var(--accent)}
.nav-link{margin-left:18px;color:#0a1020;border-bottom:2px solid transparent;padding-bottom:6px}
.nav-link.active{color:var(--brand);border-color:var(--brand)}
.btn{display:inline-block;border:1px solid var(--grayblue);border-radius:14px;padding:10px 14px;font-weight:700;transition:.2s}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(2,6,23,.08)}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 10px 22px rgba(0,56,101,.25)}
.btn.outline{background:#fff;color:#0a1020;border-color:#cbd5e1}
.btn.big{padding:14px 18px;font-size:1.05rem}
.center{text-align:center}
.mt{margin-top:16px}

/* Hero */
.hero,.page-hero{position:relative;background:linear-gradient(180deg,var(--white),#f6fbff);overflow:hidden}
.page-hero.storage{background:linear-gradient(180deg,#fefefe, #e6f7ff)}
.page-hero.concrete{background:linear-gradient(180deg,#fefefe, #f3fff0)}
.hero-inner{padding:86px 22px 44px 22px;position:relative}
.kicker{color:var(--accent);font-weight:800;margin:0 0 8px 0;text-transform:uppercase;font-size:.78rem;letter-spacing:.12em}
.hero h1,.page-hero h1{font-size:clamp(32px,5vw,54px);line-height:1.12;margin:0 0 12px 0;color:var(--brand)}
.subhead{color:#334155;margin:0 0 20px 0;font-size:1.14rem;max-width:820px}
.hero .cta .btn,.page-hero .cta .btn{margin-right:10px}
.badges{display:flex;gap:14px;flex-wrap:wrap;margin:18px 0 0 0;padding:0;list-style:none;color:#475569}
.hero-bg{position:absolute;inset:auto 0 0 0;height:220px;background:
  radial-gradient(1200px 220px at 50% 0, rgba(0,56,101,.12), transparent 60%),
  url('/assets/concrete-mixer-concrete.svg') center/cover no-repeat;
  filter:saturate(1.04) contrast(1.04)}

/* Sections */
.section{padding:72px 0}
.section.alt{background:#f7fafb}
.section h2{font-size:2rem;margin:0 0 22px 0;color:var(--brand)}
.grid{display:grid;gap:24px}

/* Cards & Services */
.services{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.card{background:#fff;border:1px solid var(--grayblue);border-radius:18px;overflow:hidden;box-shadow:0 12px 28px rgba(2,6,23,.06)}
.card .p{padding:12px 16px}
.card.link:hover{transform:translateY(-4px);transition:.2s;box-shadow:0 18px 36px rgba(2,6,23,.12)}
.card h3{margin:4px 0 6px 0;color:var(--deep-teal)}
.card p{margin:0 0 12px 0;color:#475569}
.bullets{margin:0 18px 18px 34px;color:#334155}

/* Coverage */
.coverage{display:grid;gap:24px;grid-template-columns:2fr 1.4fr;align-items:start}
.coverage .map{border-radius:16px;border:1px solid var(--grayblue)}
.list{margin:6px 0 18px 18px;padding:0}
.two-col{columns:2}

/* Why */
.why{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.why-card{background:linear-gradient(180deg,#fff,#fbfeff);border:1px solid var(--grayblue);border-radius:14px;padding:16px}
.why-card h4{margin:0 0 6px 0;color:var(--teal)}

/* Contact */
.contact-lines{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.contact-line{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--grayblue);border-radius:12px;padding:10px 14px;color:#0a1020}
.contact-line:hover{box-shadow:0 8px 22px rgba(2,6,23,.08)}
.tiny{font-size:.86rem;color:#64748b}

/* Footer */
.site-footer{border-top:1px solid var(--grayblue);background:var(--brand);padding:28px 0;color:#e6f3ff}
.site-footer a{color:var(--sky)}

/* City grid */
.cities{columns:3 280px;column-gap:18px}
.cities ul{break-inside:avoid;padding-left:16px;margin-top:0}
.cities li{margin:2px 0;color:#334155}

@media (max-width:960px){
  .coverage{grid-template-columns:1fr}
  .hero-bg{height:180px}
  .cities{columns:2 220px}
}
@media (max-width:640px){
  .cities{columns:1}
}