/* ============================================================
   Birmingham ready-mix concrete site — single stylesheet
   Palette: charcoal + safety amber. Headings: Oswald.
   Mobile-first; breakpoints at 700px and 1020px.
   ============================================================ */

:root {
  --ink: #22262b;          /* body text */
  --ink-soft: #545c64;     /* secondary text */
  --navy: #262b30;         /* dark surfaces (hero, footer) */
  --navy-2: #343b42;       /* dark surface hover / gradients */
  --green: #d97a14;        /* primary accent / buttons */
  --green-dark: #b56410;   /* button hover */
  --volt: #ffc26e;         /* light accent on dark backgrounds */
  --bg: #ffffff;
  --bg-alt: #f5f4f1;       /* alternating section background */
  --line: #e4e1da;         /* borders */
  --radius: 12px;
  --shadow: 0 10px 30px rgba(34, 38, 43, .12);
  --font-head: "Oswald", "Arial Narrow", "Segoe UI", sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 5.6vw, 3.3rem); letter-spacing: .3px; }
h2 { font-size: clamp(1.65rem, 3.9vw, 2.3rem); letter-spacing: .3px; }
h3 { font-size: 1.17rem; }
p { margin: 0 0 1em; }
a { color: var(--green-dark); }
a:hover { color: var(--navy); }
img { max-width: 100%; height: auto; display: block; }
ul { padding-left: 1.2em; }

.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--navy); color: #fff; padding: 10px 16px; z-index: 200;
}
.skip-link:focus { left: 8px; top: 8px; }

.container { width: min(1160px, 92%); margin: 0 auto; }

/* ---------- Topbar ---------- */
.topbar { background: var(--navy); color: #e5e2db; font-size: .85rem; }
.topbar-inner {
  width: min(1160px, 92%); margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; padding: 7px 0; flex-wrap: wrap;
}
.topbar-left { display: flex; gap: 18px; align-items: center; }
.topbar-link {
  color: #fff; text-decoration: none; display: inline-flex;
  align-items: center; gap: 7px; font-weight: 600;
}
.topbar-link:hover { color: var(--volt); }
.topbar-link svg { width: 15px; height: 15px; }
.topbar-right { color: #a8a49b; }
@media (max-width: 699px) {
  .topbar-right, .topbar-email { display: none; }
}

/* ---------- Header ---------- */
.site-header {
  background: #fff; position: sticky; top: 0; z-index: 100;
  box-shadow: 0 2px 12px rgba(34, 38, 43, .08);
}
.header-inner {
  width: min(1160px, 92%); margin: 0 auto;
  display: flex; align-items: center; gap: 20px; padding: 12px 0;
}
.logo {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--ink);
  font-family: var(--font-head); font-weight: 700; font-size: 1.16rem;
  line-height: 1.15; letter-spacing: .1px;
}
.logo svg { width: 40px; height: 40px; flex: 0 0 auto; }
.logo-sub {
  display: block; font-family: var(--font-body); font-weight: 500;
  font-size: .72rem; color: var(--ink-soft); letter-spacing: .4px;
}
.main-nav { margin-left: auto; display: none; }
.main-nav > ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.main-nav a {
  display: block; padding: 10px 10px; text-decoration: none; white-space: nowrap;
  color: var(--ink); font-weight: 600; font-size: .95rem; border-radius: 8px;
}
.main-nav a:hover, .main-nav a[aria-current="page"] { background: var(--bg-alt); color: var(--green-dark); }
.caret { display: inline-block; width: 11px; height: 11px; vertical-align: -1px; margin-left: 2px; opacity: .6; }
.has-dropdown { position: relative; }
.dropdown {
  position: absolute; top: 100%; left: 0; min-width: 280px;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--shadow); list-style: none; margin: 0; padding: 8px;
  display: none; z-index: 90;
}
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown { display: block; }
.dropdown a { padding: 8px 12px; font-weight: 500; border-radius: 7px; }
.dropdown-all a { font-weight: 700; color: var(--green-dark); }
.header-call { display: none; text-decoration: none; text-align: right; margin-left: 8px; }
.call-label { display: block; font-size: .72rem; color: var(--ink-soft); font-weight: 600; }
.call-number {
  display: block; font-family: var(--font-head); font-weight: 700;
  font-size: 1.22rem; color: var(--green-dark);
}
.nav-toggle {
  margin-left: auto; background: none; border: 1px solid var(--line);
  border-radius: 8px; padding: 8px; cursor: pointer; color: var(--ink);
}
.nav-toggle svg { width: 24px; height: 24px; stroke: currentColor; display: block; }
.mobile-nav { display: none; border-top: 1px solid var(--line); background: #fff; }
.mobile-nav.open { display: block; }
.mobile-nav ul { list-style: none; margin: 0; padding: 8px 4vw 14px; }
.mobile-nav a {
  display: block; padding: 11px 6px; text-decoration: none;
  color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--bg-alt);
}
.mobile-sub a { padding-left: 22px; font-weight: 500; color: var(--ink-soft); }
@media (min-width: 1020px) {
  .main-nav { display: block; }
  .header-call { display: block; }
  .nav-toggle, .mobile-nav { display: none !important; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; padding: 13px 24px; border-radius: 10px;
  font-family: var(--font-head); font-weight: 600; font-size: 1rem;
  text-decoration: none; text-align: center; cursor: pointer;
  border: 2px solid transparent; transition: background .15s, color .15s;
}
.btn-primary { background: var(--green); color: #fff; }
.btn-primary:hover { background: var(--green-dark); color: #fff; }
.btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn-outline:hover { background: rgba(255,255,255,.12); color: #fff; }
.btn-outline-dark { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-outline-dark:hover { background: var(--navy); color: #fff; }
.btn-block { display: block; width: 100%; }

/* ---------- Hero (homepage) ---------- */
/* Photo layer: img/hero-birmingham-pour.jpg. The navy gradient is the last
   layer, so if the photo is missing the hero falls back to the old flat look
   rather than breaking. Scrim is heaviest on the left, where the copy sits. */
.hero {
  background:
    linear-gradient(100deg, rgba(15,26,35,.82) 0%, rgba(15,26,35,.70) 45%, rgba(15,26,35,.45) 100%),
    radial-gradient(900px 420px at 85% -10%, rgba(217, 122, 20, .22), transparent 60%),
    url("../img/hero-birmingham-pour.jpg") 60% 55% / cover no-repeat,
    linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%);
  color: #e6f1ea; padding: 48px 0 56px;
}
/* Narrow screens: the hero stacks to ~1400px tall, and `cover` on a 16:9 photo
   in a box that tall scales it so far that the mixer falls below the fold. So
   pin the photo to a band at the top instead, sized off viewport width, and
   fade it into the navy the copy sits on. */
@media (max-width: 1019px) {
  .hero {
    position: relative; overflow: hidden;
    background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%);
  }
  .hero::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0;
    height: 56vw; max-height: 340px;
    background:
      linear-gradient(180deg, rgba(15,26,35,.42) 0%, rgba(15,26,35,.58) 55%, rgba(15,26,35,.90) 85%, var(--navy) 100%),
      url("../img/hero-birmingham-pour.jpg") center 52% / cover no-repeat;
  }
  .hero > .container { position: relative; z-index: 1; }
  /* Clear the photo band so the headline never sits on the bright part. */
  .hero { padding-top: calc(56vw - 40px); }
}
@media (max-width: 1019px) and (min-width: 608px) {
  .hero { padding-top: 300px; }
}
.hero h1 { color: #fff; }
.accent-light { color: var(--volt); }
.hero-sub { font-size: 1.1rem; color: #e5e2db; max-width: 36em; }
.hero-grid { display: grid; gap: 36px; align-items: start; }
@media (min-width: 1020px) { .hero-grid { grid-template-columns: 1.15fr .85fr; } }
.hero-ticks { list-style: none; padding: 0; margin: 20px 0 26px; display: grid; gap: 9px; }
.hero-ticks li { display: flex; align-items: flex-start; gap: 9px; font-weight: 500; }
.hero-ticks svg, .trustbar svg, .why-item > svg { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 3px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-phone-note { font-size: .88rem; color: #a8a49b; margin-top: 14px; }

/* ---------- Quote form card ---------- */
.quote-card {
  background: #fff; color: var(--ink); border-radius: var(--radius);
  padding: 26px 24px 22px; box-shadow: var(--shadow);
}
.quote-card h2 { font-size: 1.45rem; margin-bottom: .2em; }
.quote-card-sub { color: var(--ink-soft); font-size: .93rem; margin-bottom: 1.1em; }
.form-field { margin-bottom: 13px; }
.form-field label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: 5px; }
.form-field input, .form-field select, .form-field textarea {
  width: 100%; padding: 11px 12px; border: 1.5px solid var(--line);
  border-radius: 8px; font: inherit; font-size: .97rem; background: #fff; color: var(--ink);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: 2px solid var(--green); border-color: var(--green);
}
.form-note { font-size: .8rem; color: var(--ink-soft); margin: 10px 0 0; }

/* ---------- Trust bar ---------- */
.trustbar { background: var(--bg-alt); border-bottom: 1px solid var(--line); }
.trustbar ul {
  list-style: none; margin: 0; padding: 13px 0;
  display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: center;
}
.trustbar li { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .93rem; }
.trustbar svg { margin-top: 0; }

/* ---------- Sections ---------- */
.section { padding: 56px 0; }
.section-alt { background: var(--bg-alt); }
.section-head { max-width: 46em; margin-bottom: 34px; }
.section-head p { color: var(--ink-soft); }
.kicker {
  display: inline-block; font-family: var(--font-head); font-weight: 600;
  font-size: .8rem; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--green-dark); margin-bottom: 8px;
}
.prose { max-width: 52em; }
.prose h2 { margin-top: 1.6em; }
.prose h3 { margin-top: 1.4em; }
.prose li { margin-bottom: .4em; }

/* ---------- Cards ---------- */
.cards { display: grid; gap: 22px; }
@media (min-width: 700px) { .cards-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .cards-3 { grid-template-columns: repeat(3, 1fr); } }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .15s, box-shadow .15s;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.card-photo {
  aspect-ratio: 16 / 9; background: linear-gradient(150deg, var(--navy) 0%, var(--navy-2) 75%);
  color: #8b8880; display: flex; align-items: center; justify-content: center;
  font-size: .85rem; font-weight: 600; letter-spacing: .5px; object-fit: cover; width: 100%;
}
.card-body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
/* Text-only cards (guides hub) — no photo, accent edge instead */
.card-plain { border-top: 3px solid var(--green); }
.card-plain .card-body { padding-top: 22px; }

.card-body p { color: var(--ink-soft); font-size: .95rem; flex: 1; }
.card-link { font-weight: 700; text-decoration: none; font-size: .95rem; }

/* ---------- Service detail grid ---------- */
.svc-detail { display: grid; gap: 26px; }
@media (min-width: 700px) { .svc-detail { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .svc-detail { grid-template-columns: repeat(3, 1fr); } }
.svc-detail-item p { color: var(--ink-soft); font-size: .95rem; }
.svc-more { font-weight: 700; text-decoration: none; font-size: .93rem; }

/* ---------- Steps ---------- */
.steps { display: grid; gap: 22px; counter-reset: step; }
@media (min-width: 700px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px;
}
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--green); color: #fff;
  font-family: var(--font-head); font-weight: 700; font-size: 1.1rem;
  margin-bottom: 12px;
}
.step p { color: var(--ink-soft); font-size: .95rem; margin: 0; }

/* ---------- Why us ---------- */
.why-grid { display: grid; gap: 22px; }
@media (min-width: 700px) { .why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .why-grid { grid-template-columns: repeat(3, 1fr); } }
.why-item { display: flex; gap: 12px; }
.why-item h3 { font-size: 1.05rem; margin-bottom: .25em; }
.why-item p { color: var(--ink-soft); font-size: .95rem; margin: 0; }

/* ---------- Gallery ---------- */
.gallery-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
.gallery-tile {
  aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; position: relative;
  background: linear-gradient(150deg, var(--navy) 0%, var(--navy-2) 75%);
  display: flex; align-items: flex-end; text-decoration: none;
}
.gallery-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gallery-tile span {
  position: relative; padding: 10px 12px; color: #e5e2db; font-size: .85rem; font-weight: 600;
  background: linear-gradient(transparent, rgba(34,38,43,.85)); width: 100%;
}

/* ---------- Areas ---------- */
.area-links {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.area-links a {
  display: inline-block; padding: 9px 16px; background: #fff;
  border: 1.5px solid var(--line); border-radius: 999px;
  text-decoration: none; font-weight: 600; font-size: .93rem; color: var(--ink);
}
.area-links a:hover { border-color: var(--green); color: var(--green-dark); }
.section-alt .area-links a { background: #fff; }
.section .area-links a { background: var(--bg-alt); }

/* ---------- FAQ ---------- */
.faq-list { max-width: 52em; }
.faq-list details {
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: 0 18px; margin-bottom: 10px;
}
.faq-list summary {
  cursor: pointer; font-weight: 700; font-family: var(--font-head);
  font-size: 1.02rem; padding: 15px 0; list-style-position: outside;
}
.faq-list summary::marker { color: var(--green); }
.faq-list details p { color: var(--ink-soft); margin: 0 0 15px; }

/* ---------- CTA band ---------- */
.cta-band {
  background:
    radial-gradient(700px 300px at 15% 120%, rgba(217, 122, 20, .32), transparent 60%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%);
  color: #e5e2db; text-align: center; padding: 54px 0;
}
.cta-band h2 { color: #fff; }
.cta-band .hero-actions { justify-content: center; margin-top: 22px; }

/* ---------- Map section ---------- */
.map-grid { display: grid; gap: 26px; }
@media (min-width: 1020px) { .map-grid { grid-template-columns: 1.4fr .6fr; } }
.map-frame {
  width: 100%; min-height: 340px; border: 0; border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.map-info ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }

/* ---------- Inner page hero ---------- */
.page-hero {
  background:
    radial-gradient(700px 340px at 90% -20%, rgba(217, 122, 20, .28), transparent 60%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%);
  color: #e5e2db; padding: 40px 0 44px;
}
.page-hero h1 { color: #fff; max-width: 22em; }
.page-hero .hero-sub { margin-bottom: 0; }
.page-hero .hero-actions { margin-top: 22px; }
.breadcrumbs { font-size: .85rem; margin-bottom: 16px; color: #a8a49b; }
.breadcrumbs a { color: var(--volt); text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }

/* ---------- Tables (guides/price pages) ---------- */
.tbl-wrap { overflow-x: auto; margin: 1.2em 0 1.6em; }
table.tbl { border-collapse: collapse; width: 100%; min-width: 560px; font-size: .95rem; }
.tbl th, .tbl td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl thead th {
  background: var(--navy); color: #fff; font-family: var(--font-head);
  font-weight: 600; font-size: .9rem; letter-spacing: .3px;
}
.tbl tbody tr:nth-child(even) { background: var(--bg-alt); }

/* ---------- Info boxes ---------- */
.note-box {
  border-left: 4px solid var(--green); background: var(--bg-alt);
  border-radius: 0 10px 10px 0; padding: 16px 18px; margin: 1.4em 0;
}
.note-box p:last-child { margin-bottom: 0; }
.note-box-title { font-weight: 700; font-family: var(--font-head); display: block; margin-bottom: 4px; }

/* ---------- Check list (ticks) ---------- */
.check-list { list-style: none; padding: 0; display: grid; gap: 9px; }
.check-list li { display: flex; align-items: flex-start; gap: 9px; }
.check-list svg { width: 19px; height: 19px; flex: 0 0 auto; margin-top: 4px; }

/* ---------- Two-column prose ---------- */
.two-col { display: grid; gap: 30px; }
@media (min-width: 1020px) { .two-col { grid-template-columns: 1fr 1fr; } }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy); color: #a8a49b; padding: 48px 0 84px; font-size: .93rem; }
.footer-grid { display: grid; gap: 32px; }
@media (min-width: 700px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .footer-grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; } }
.site-footer h2 {
  color: #fff; font-size: .95rem; letter-spacing: 1px; text-transform: uppercase;
  margin-bottom: .8em;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
.site-footer a { color: #e5e2db; text-decoration: none; }
.site-footer a:hover { color: var(--volt); }
.footer-brand .logo { color: #fff; margin-bottom: 12px; }
.footer-brand .logo-sub { color: #a8a49b; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12); margin-top: 36px; padding-top: 18px;
  display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: .85rem;
}

/* ---------- Mobile sticky CTA bar ---------- */
.mobile-cta {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 110;
  display: flex; box-shadow: 0 -4px 16px rgba(34,38,43,.18);
}
.mobile-cta a {
  flex: 1; text-align: center; padding: 14px 4px; text-decoration: none;
  font-family: var(--font-head); font-weight: 600; font-size: .95rem;
}
.cta-call { background: var(--navy); color: #fff; }
.cta-quote { background: var(--green); color: #fff; }
@media (min-width: 1020px) { .mobile-cta { display: none; } }