/* ═══════════════════════════════════════════════════
   PAGES.CSS — Page-specific Styles
   ═══════════════════════════════════════════════════ */

/* ── Homepage Hero ── */
.hero-home {
  background:
    linear-gradient(to bottom,
      rgba(0, 0, 0, 0.9) 0%,
      rgba(0, 0, 0, 0.45) 30%,
      rgba(0, 0, 0, 0.45) 70%,
      rgba(0, 0, 0, 1) 100%),
    url("../images/14.webp") center center / cover no-repeat;
}

/* ── Inner Page Hero Template ── */
.page-hero {
  min-height: 55vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  overflow: hidden;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.page-hero-bg {
  background-image:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.9) 100%),
    url("../images/3.webp");
}
/* ══════════════════════════════════════════════════════
   PER-PAGE HERO BACKGROUNDS
   Each inner page overrides the default hero-section bg
   ══════════════════════════════════════════════════════ */

/* about.html */
[aria-label="About Hero"] {
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.92) 100%),
    url("../images/3.webp") center center / cover no-repeat;
}

/* products.html */
[aria-label="Hero"],
[aria-label="Products Hero"] {
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.92) 100%),
    url("../images/1.webp") center center / cover no-repeat;
}

/* concrete-blocks.html */
[aria-label="Concrete blocks hero"] {
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.92) 100%),
    url("../images/2.webp") center center / cover no-repeat;
}

/* ready-mix.html */
[aria-label="Ready-mix hero"] {
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.92) 100%),
    url("../images/4.webp") center center / cover no-repeat;
}

/* projects.html */
[aria-label="Projects Hero"] {
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.92) 100%),
    url("../images/6.webp") center center / cover no-repeat;
}

/* project-details.html */
[aria-label="Project hero"] {
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.92) 100%),
    url("../images/7.webp") center center / cover no-repeat;
}

/* quality.html */
[aria-label="Quality hero"] {
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.92) 100%),
    url("../images/8.webp") center center / cover no-repeat;
}

/* certifications.html */
[aria-label="Certifications Hero"] {
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.92) 100%),
    url("../images/9.webp") center center / cover no-repeat;
}

/* equipment-plant.html */
[aria-label="Equipment hero"] {
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.92) 100%),
    url("../images/10.webp") center center / cover no-repeat;
}

/* contact.html */
[aria-label="Contact Hero"] {
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.92) 100%),
    url("../images/11.webp") center center / cover no-repeat;
}

/* request-quote.html */
[aria-label="Quote hero"] {
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.92) 100%),
    url("../images/12.webp") center center / cover no-repeat;
}

/* privacy-policy.html */
[aria-label="Privacy hero"] {
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.92) 100%),
    url("../images/13.webp") center center / cover no-repeat;
}

/* terms.html */
[aria-label="Terms hero"] {
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.92) 100%),
    url("../images/5.webp") center center / cover no-repeat;
}

/* ── Map embed fix ── */
.map-wrap {
  position: relative;
  height: 460px;
  width: 100%;
  overflow: hidden;
}

.map-wrap iframe {
  border: 0;
  filter: grayscale(80%) invert(10%) contrast(110%);
  width: 100%;
  height: 100%;
}

/* ── Contact map overlay card ── */
.map-overlay {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
  background: rgba(15,15,14,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 1.5rem;
  max-width: 18rem;
  z-index: 2;
}

/* ── Legal pages (privacy, terms) prose layout ── */
.legal-body {
  max-width: 56rem;
}

/* ── 404 page ── */
.page-404 {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
}