/* =============================================================================
   STYLES.CSS — visual design for the whole site
   =============================================================================
   You generally don't need to edit this file to update text, prices, or
   photos — that's all done in content.js. This file only controls how
   things LOOK (colors, spacing, fonts).

   If you do want to change the brand colors, the ones to touch are all
   listed together right at the top, under ":root".
   ========================================================================== */

:root {
  /* ---- BRAND COLORS ---------------------------------------------------- */
  --black: #0b0b0c;
  --black-soft: #18181b;
  --black-elevated: #212124;
  --gold: #d8a13a;
  --gold-bright: #e7c368;
  --red: #b3372c;
  --red-bright: #cf4433;
  --white: #f6f4ef;
  --gray: #b9b4a9;
  --gray-dim: #8a867d;
  --border-soft: rgba(216, 161, 58, 0.25);

  /* ---- LAYOUT ------------------------------------------------------------ */
  --max-width: 1180px;
  --radius: 10px;
  --gap: 1.25rem;
  --header-height: 58px;
  --call-bar-height: 56px;

  /* ---- MOTION ------------------------------------------------------------ */
  --transition: 160ms ease;
}

/* ---- RESET / BASE -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.55;
  font-size: 17px;
  overflow-x: hidden;
  padding-bottom: var(--call-bar-height);
}

img { max-width: 100%; display: block; }
a { color: var(--gold-bright); text-decoration: none; }
a:hover { color: var(--gold); }

h1, h2, h3, h4 {
  font-family: 'Teko', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 700; line-height: 1.2; margin: 0 0 0.6em; color: var(--white);
  /* Teko is very condensed — at default tracking, uppercase headings read
     cramped rather than bold. More letter-spacing is the standard fix for
     condensed display fonts in caps; opens it up without changing wording. */
  letter-spacing: 0.03em;
}
/* Uppercase only on the big headline sizes (h1/h2) — keeps card/FAQ-sized
   headings (h3/h4) readable instead of feeling like they're shouting. */
h1, h2 { text-transform: uppercase; }
.hero-eyebrow, .brand-name, .tag-badge {
  font-family: 'Teko', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
h1 { font-size: clamp(2.1rem, 6vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 4.5vw, 2.4rem); color: var(--gold-bright); }
h3 { font-size: clamp(1.15rem, 3vw, 1.5rem); }
p { margin: 0 0 1em; color: var(--gray); }

.container { max-width: var(--max-width); margin: 0 auto; padding: 0 1.25rem; }
section { padding: 3.5rem 0; }
.section-tight { padding: 2.25rem 0; }

/* ---- HOME PAGE: calmer, controlled sizing (mobile-first, no viewport-scaling) --
   Fixed rem sizes per breakpoint instead of vw-based clamps — predictable at
   every width instead of swelling/shrinking continuously as the screen resizes. */
/* .hero is itself a <section>, so without this override it would ALSO pick
   up the generic "section { padding }" rules below and double up with
   hero-content's own padding — that's what was pushing "Why Columbus
   Chooses..." so far down. hero-content controls all of the hero's real
   spacing, so the section shell itself gets none. */
.page-home .hero {
  padding: 0;
  min-height: 68vh;
  min-height: 68dvh;
  /* Text spans ~26%-97% of this box — nearly the whole thing — so some
     text-over-photo overlap is unavoidable given how tall the text block
     is. Zoomed in and shifted so the crop starts right where the barn
     begins, cutting the tree branches out of view entirely — text now
     sits over the barn/grass, never the tree limbs. */
  background-size: auto 160%;
  background-position: 65% 100%;
}
.page-home .hero-content { padding-top: 1.25rem; padding-bottom: 1rem; }
.page-home .hero-eyebrow { font-size: 0.9rem; margin-bottom: 0.3rem; }
.page-home .hero h1 { font-size: 2.7rem; max-width: 16ch; margin-bottom: 0.3em; }
.page-home .hero-sub { font-size: 1.05rem; max-width: 42ch; margin-bottom: 0.75rem; }
.page-home .hero-quote-link { font-size: 1.05rem; margin-top: 0.5rem; }
.page-home .hero-ctas { gap: 0.5rem; }
.page-home h2 { font-size: 1.9rem; }
.page-home section { padding: 3.5rem 0; }
@media (max-width: 899px) {
  .page-home .hero + section { padding-top: 5.25rem; }
}
.page-home .section-tight { padding: 2.5rem 0; }
.page-home section > .container > p { font-size: 1.05rem; }
.page-home .card { padding: 1.75rem; }
.page-home .service-card { padding: 0; }
.page-home .service-card-body { padding: 1.5rem 1.5rem 1.75rem; }
.page-home .service-card h3 { font-size: 1.2rem; }
.page-home .service-card p { font-size: 0.98rem; }
.page-home .review-card p { font-size: 1rem; }
.page-home .why-item h3 { font-size: 1.15rem; }
.page-home .why-item p { font-size: 0.98rem; }
.page-home .why-number { width: 2.75rem; height: 2.75rem; font-size: 1.1rem; }
.page-home .reviews-grid, .page-home .services-grid, .page-home .why-grid { gap: 1.5rem; }

@media (min-width: 900px) {
  .page-home .hero { min-height: 74vh; background-position: center; background-size: cover; }
  .page-home .hero-content { padding-top: 3rem; padding-bottom: 2.5rem; }
  .page-home .hero-ctas { gap: 0.85rem; }
  .page-home .hero-eyebrow { font-size: 1rem; margin-bottom: 1rem; }
  .page-home .hero h1 { font-size: 3.6rem; max-width: 18ch; }
  .page-home .hero-sub { font-size: 1.25rem; max-width: 46ch; margin-bottom: 1.75rem; }
  .page-home .hero-quote-link { font-size: 1.15rem; }
  .page-home h2 { font-size: 2.6rem; }
  .page-home section { padding: 5.5rem 0; }
  .page-home .hero + section { padding-top: 1.5rem; }
  .page-home .section-tight { padding: 3.5rem 0; }
  .page-home section > .container > p { font-size: 1.15rem; }
  .page-home .card { padding: 2rem; }
  .page-home .service-card-body { padding: 1.75rem 2rem 2.1rem; }
  .page-home .service-card h3 { font-size: 1.4rem; }
  .page-home .service-card p { font-size: 1.05rem; }
  .page-home .review-card p { font-size: 1.08rem; }
  .page-home .why-item h3 { font-size: 1.4rem; }
  .page-home .why-item p { font-size: 1.08rem; }
  .page-home .why-number { width: 3.25rem; height: 3.25rem; font-size: 1.3rem; }
  .page-home .reviews-grid, .page-home .services-grid, .page-home .why-grid { gap: 2rem; }
}

/* Visible keyboard focus everywhere */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--gold-bright);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---- BUTTONS -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  font-weight: 700; font-size: 1rem; text-align: center;
  padding: 0.95rem 1.5rem; min-height: 48px;
  border-radius: var(--radius); border: 2px solid transparent;
  cursor: pointer; transition: transform var(--transition), background var(--transition), border-color var(--transition), color var(--transition);
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(0.98); }
.btn-block { width: 100%; }
.btn-lg { padding: 1.15rem 1.75rem; font-size: 1.1rem; }

.btn-gold { background: var(--gold); color: var(--black); border-color: var(--gold); }
.btn-gold:hover { background: var(--gold-bright); border-color: var(--gold-bright); color: var(--black); }

.btn-outline { background: transparent; color: var(--gold-bright); border-color: var(--gold); }
.btn-outline:hover { background: var(--gold); color: var(--black); }

.btn-red { background: var(--red); color: var(--white); border-color: var(--red); }
.btn-red:hover { background: var(--red-bright); border-color: var(--red-bright); }

.btn-ghost-light { background: rgba(255,255,255,0.06); color: var(--white); border-color: rgba(255,255,255,0.3); }
.btn-ghost-light:hover { border-color: var(--gold); color: var(--gold-bright); }

.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---- HEADER / NAV ---------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(11,11,12,0.96);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid var(--border-soft);
}
.header-inner {
  max-width: var(--max-width); margin: 0 auto; padding: 0 1.25rem;
  height: var(--header-height);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.brand { display: flex; align-items: center; gap: 0.55rem; min-width: 0; }
.brand img.logo { height: 34px; width: auto; border-radius: 5px; flex-shrink: 0; }
.brand-name { font-weight: 800; font-size: 0.88rem; color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (min-width: 900px) {
  :root { --header-height: 72px; }
  .brand img.logo { height: 48px; border-radius: 6px; }
  .brand-name { display: none; }
}

.main-nav { display: none; }
.main-nav ul { display: flex; list-style: none; gap: 1.75rem; margin: 0; padding: 0; }
.main-nav a { color: var(--white); font-weight: 600; padding: 0.5rem 0; border-bottom: 2px solid transparent; }
.main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--gold-bright); border-bottom-color: var(--gold); }

.header-actions { display: flex; align-items: center; gap: 0.75rem; }
.header-call {
  display: none; align-items: center; justify-content: center; gap: 0.5rem;
  color: var(--black); background: var(--gold); font-weight: 700; line-height: 1;
  padding: 0.6rem 1rem; border-radius: 999px; white-space: nowrap;
}
.header-call span { line-height: 1; }
.header-call svg { display: block; flex-shrink: 0; width: 18px; height: 18px; }
.header-call:hover { background: var(--gold-bright); color: var(--black); }

/* Compact quick-action buttons in the header (desktop) — Rent + Quote,
   always sitting right next to the phone number so all three "instant
   next step" actions are visible with zero scrolling on every page. */
.header-quick-actions { display: none; align-items: center; gap: 0.5rem; }
.header-quick-actions .btn {
  padding: 0.5rem 0.85rem; min-height: 0; font-size: 0.85rem; white-space: nowrap;
}
@media (min-width: 900px) { .header-quick-actions { display: flex; } }
@media (min-width: 1150px) { .header-quick-actions .btn { padding: 0.6rem 1.1rem; font-size: 0.92rem; } }

.mobile-nav-actions { display: flex; flex-direction: column; gap: 0.6rem; margin: 1rem 1.25rem 0.25rem; }
.mobile-nav-actions .btn { width: 100%; }

.hamburger-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; background: transparent; border: 2px solid var(--border-soft);
  border-radius: 8px; cursor: pointer; color: var(--white);
}
.hamburger-btn svg { width: 22px; height: 22px; }

.mobile-nav {
  display: none; flex-direction: column;
  background: var(--black-soft); border-bottom: 1px solid var(--border-soft);
}
.mobile-nav.open {
  display: flex;
  position: fixed;
  top: var(--header-height); left: 0; right: 0; bottom: 0;
  z-index: 50;
  padding-bottom: calc(var(--call-bar-height) + 1rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mobile-nav > ul a {
  color: var(--white); font-weight: 700; padding: 1.4rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: block;
}
.mobile-nav a[aria-current="page"] { color: var(--gold-bright); }
.mobile-nav .header-call { display: flex; justify-content: center; }

@media (min-width: 900px) {
  .main-nav { display: block; }
  .header-call { display: inline-flex; }
  .hamburger-btn { display: none; }
  .mobile-nav { display: none !important; }
}

/* ---- STICKY ACTION BAR (mobile) ---------------------------------------------
   Always-visible bottom bar with the three "instant next step" actions:
   Call, Rent a Dumpster, Free Quote. Present on every page, zero scrolling. */
.call-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  height: var(--call-bar-height);
  background: var(--black-elevated);
  border-top: 1px solid var(--border-soft);
  display: flex;
}
.call-bar a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.1rem;
  color: var(--white); font-weight: 800; letter-spacing: 0.01em; font-size: 0.72rem;
  border-right: 1px solid rgba(255,255,255,0.08);
}
.call-bar a:last-child { border-right: none; }
.call-bar a svg { width: 18px; height: 18px; }
.call-bar a.bar-call { background: var(--red); }
.call-bar a.bar-call:active { background: var(--red-bright); }
.call-bar a.bar-rent { background: var(--gold); color: var(--black); }
.call-bar a.bar-rent:active { background: var(--gold-bright); }
.call-bar a.bar-quote:active { background: var(--black-soft); }
@media (min-width: 900px) {
  .call-bar { display: none; }
  body { padding-bottom: 0; }
}

/* ---- HERO ------------------------------------------------------------------ */
.hero {
  position: relative; min-height: 78vh; display: flex; align-items: flex-end;
  background-size: cover; background-position: center; color: var(--white);
}
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,11,12,0.55) 0%, rgba(11,11,12,0.75) 55%, rgba(11,11,12,0.96) 100%);
}
.hero-content { position: relative; z-index: 1; padding-top: 3rem; padding-bottom: 4.5rem; width: 100%; }
.hero-eyebrow {
  display: inline-block; color: var(--gold-bright); font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; font-size: 0.85rem; margin-bottom: 0.75rem;
}
.hero h1 { max-width: 18ch; margin-bottom: 0.5rem; }
.hero-sub { font-size: 1.1rem; color: var(--white); opacity: 0.92; max-width: 46ch; margin-bottom: 1.75rem; }

.hero-ctas { display: flex; flex-direction: column; gap: 0.85rem; max-width: 420px; }
.hero-ctas .btn { flex: 1; }
@media (min-width: 640px) {
  .hero-ctas { flex-direction: row; max-width: none; }
}

.hero-phone {
  margin-top: 1.5rem; display: inline-flex; align-items: center; gap: 0.6rem;
  color: var(--white); font-weight: 700; font-size: 1.05rem;
}
.hero-phone svg { width: 20px; height: 20px; color: var(--gold-bright); flex-shrink: 0; }

.hero-quote-link {
  display: inline-block; margin-top: 0.85rem; color: var(--white);
  font-weight: 700; font-size: 1.15rem; border-bottom: 2px solid var(--gold);
  padding-bottom: 0.2rem;
}
.hero-quote-link:hover { color: var(--gold-bright); border-bottom-color: var(--gold-bright); }

.hero-sm { min-height: 30vh; }
@media (min-width: 720px) { .hero-sm { min-height: 46vh; } }
.hero-capabilities { position: relative; z-index: 1; padding-top: 1.5rem; padding-bottom: 1.75rem; }
@media (min-width: 720px) { .hero-capabilities { padding-top: 3rem; padding-bottom: 3rem; } }
.hero-capabilities h1 { max-width: 26ch; }
.capability-list { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 0.6rem; max-width: 40ch; }
.capability-list li {
  display: flex; align-items: center; gap: 0.6rem; font-weight: 700; color: var(--white); font-size: 1.05rem;
}
.capability-list li::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); flex-shrink: 0;
}

/* ---- CARDS / GRIDS ---------------------------------------------------------- */
.card {
  background: var(--black-soft); border: 1px solid var(--border-soft);
  border-radius: var(--radius); padding: 1.5rem;
}

.reviews-grid, .services-grid { display: grid; gap: var(--gap); grid-template-columns: 1fr; }
@media (min-width: 640px) { .reviews-grid, .services-grid { grid-template-columns: 1fr 1fr; } }

/* MOBILE ONLY: reviews become a swipeable horizontal carousel instead of a
   long vertical stack — scroll-snap gives native swipe behavior with no
   JS library needed. Desktop keeps the grid above untouched. */
@media (max-width: 639px) {
  .reviews-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.5rem;
  }
  .reviews-grid .review-card {
    flex: 0 0 88%;
    scroll-snap-align: center;
  }
}
@media (min-width: 980px) { .services-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---- WHY CHOOSE US (credibility section) --------------------------------------- */
.why-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; margin-top: 1rem; }
@media (min-width: 640px) { .why-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .why-grid { grid-template-columns: repeat(4, 1fr); } }
.why-item { text-align: left; }
.why-number {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; border-radius: 50%; border: 2px solid var(--gold);
  color: var(--gold-bright); font-weight: 800; font-size: 1.3rem; margin-bottom: 1rem;
}
.why-item h3 { font-size: 1.35rem; margin-bottom: 0.5rem; }
.why-item p { font-size: 1.08rem; margin: 0; }

.review-card .stars { color: var(--gold); font-size: 1.1rem; letter-spacing: 0.1em; margin-bottom: 0.5rem; }
.review-card .review-name { font-weight: 700; color: var(--white); margin-top: 0.75rem; }
.review-card .review-source { color: var(--gray-dim); font-size: 0.85rem; }

.service-card {
  display: flex; flex-direction: column; padding: 0; overflow: hidden;
  transition: border-color var(--transition), transform var(--transition);
}
.service-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.service-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.service-card-body { display: flex; flex-direction: column; flex: 1; padding: 1.25rem 1.5rem 1.5rem; }
.service-card h3 { color: var(--gold-bright); }
.service-card p { flex: 1; }
.service-card-cta {
  margin-top: 0.75rem; font-weight: 800; color: var(--gold-bright); font-size: 0.92rem;
}
.service-card:hover .service-card-cta { color: var(--gold); }

.gallery-grid { display: grid; gap: 0.85rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 980px) { .gallery-grid { grid-template-columns: repeat(4, 1fr); } }

/* Keep the Portfolio page's default gallery short so the quote form below
   isn't a long scroll away. On phones and tablets: just Dumpster + one
   "before" photo per category (4 total), no "after" shots and no the
   trailing "Your Job Here" card. On desktop: the full paired before/after
   sequence plus the "Your Job Here" card. Only affects the default view —
   filtering by category can still reveal an "after" photo since that's an
   intentional user action (see the JS filter logic in main.js). */
@media (max-width: 979px) {
  .gallery-grid .gallery-item-after,
  .gallery-grid .gallery-item-cta { display: none; }
}

.gallery-item { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3; background: var(--black-soft); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition); }
.gallery-item:hover img { transform: scale(1.05); }

.gallery-item-cta {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem;
  border: 2px dashed var(--border-soft); background: var(--black-soft);
  transition: border-color var(--transition), background var(--transition);
}
.gallery-item-cta:hover { border-color: var(--gold); background: var(--black-elevated); }
.gallery-cta-plus {
  width: 3rem; height: 3rem; border-radius: 50%; border: 2px solid var(--gold);
  color: var(--gold-bright); font-size: 1.75rem; font-weight: 800; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.gallery-cta-text { color: var(--white); font-weight: 800; text-align: center; font-size: 0.92rem; }
.gallery-caption {
  position: absolute; inset: auto 0 0 0; padding: 0.6rem 0.7rem 0.5rem;
  background: linear-gradient(0deg, rgba(0,0,0,0.85), rgba(0,0,0,0));
  font-size: 0.82rem; color: var(--white); font-weight: 600;
}
.tag-badge {
  display: inline-block; background: var(--gold); color: var(--black); font-weight: 800;
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 0.2rem 0.5rem; border-radius: 999px; margin-bottom: 0.3rem;
}

.gallery-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.filter-chip {
  border: 1px solid var(--border-soft); background: transparent; color: var(--gray);
  padding: 0.45rem 0.9rem; border-radius: 999px; font-weight: 600; font-size: 0.88rem; cursor: pointer;
}
.filter-chip.active, .filter-chip:hover { border-color: var(--gold); color: var(--gold-bright); }

/* ---- EQUIPMENT GRID (Portfolio page) ----------------------------------------- */
.equipment-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .equipment-grid { grid-template-columns: repeat(3, 1fr); } }
.equipment-card { background: var(--black-soft); border: 1px solid var(--border-soft); border-radius: var(--radius); overflow: hidden; }
.equipment-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.equipment-card-body { padding: 1.1rem 1.25rem 1.35rem; }
.equipment-card-body h3 { color: var(--gold-bright); margin-bottom: 0.4rem; font-size: 1.05rem; }
.equipment-card-body p { margin: 0; font-size: 0.9rem; }

/* ---- CTA BAND --------------------------------------------------------------- */
/* ---- FOOTER ------------------------------------------------------------------ */
#site-footer { background: var(--black-soft); border-top: 1px solid var(--border-soft); padding: 4.5rem 0 1.5rem; }
.footer-grid { display: grid; gap: 1.75rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; } }
.footer-brand { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.75rem; }
.footer-brand img { height: 40px; border-radius: 6px; }
.footer-brand strong { color: var(--white); font-size: 1.05rem; }
.footer-col h4 { color: var(--gold-bright); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.85rem; }
.footer-col p, .footer-col a { color: var(--gray); font-size: 0.92rem; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.footer-bottom { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--border-soft); color: var(--gray-dim); font-size: 0.82rem; text-align: center; }

/* ---- FORMS -------------------------------------------------------------------- */
.field { margin-bottom: 1.15rem; }
.field label { display: block; font-weight: 700; color: var(--white); margin-bottom: 0.4rem; font-size: 0.95rem; }
.field .hint { color: var(--gray-dim); font-size: 0.82rem; margin-top: 0.35rem; }
.field-row { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .field-row-2 { grid-template-columns: 1fr 1fr; } }

input[type="text"], input[type="tel"], input[type="email"], input[type="date"],
input[type="number"], select, textarea {
  width: 100%; font: inherit; color: var(--white); background: var(--black-elevated);
  border: 2px solid var(--border-soft); border-radius: 8px; padding: 0.85rem 0.9rem;
  min-height: 48px; -webkit-appearance: none; appearance: none;
}
select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23d8a13a'><path d='M5.5 7.5l4.5 5 4.5-5z'/></svg>");
  background-repeat: no-repeat; background-position: right 0.9rem center; background-size: 18px; padding-right: 2.5rem;
}
textarea { min-height: 110px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--gold); }
input::placeholder, textarea::placeholder { color: var(--gray-dim); }

.checkbox-row { display: flex; align-items: flex-start; gap: 0.65rem; }
.checkbox-row input[type="checkbox"] { width: 22px; height: 22px; min-width: 22px; margin-top: 0.15rem; accent-color: var(--gold); }
.checkbox-row label { font-weight: 500; color: var(--gray); font-size: 0.95rem; }

.radio-cards { display: grid; gap: 0.75rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .radio-cards { grid-template-columns: 1fr 1fr; } }
.radio-card {
  position: relative; border: 2px solid var(--border-soft); border-radius: var(--radius);
  padding: 1.1rem; cursor: pointer; background: var(--black-soft);
}
.radio-card input { position: absolute; opacity: 0; }
.radio-card.selected, .radio-card:has(input:checked) { border-color: var(--gold); background: var(--black-elevated); }
.radio-card .rc-title { font-weight: 800; color: var(--white); font-size: 1.05rem; }
.radio-card .rc-price { color: var(--gold-bright); font-weight: 800; font-size: 1.3rem; margin-top: 0.3rem; }
.radio-card .rc-note { color: var(--gray-dim); font-size: 0.82rem; margin-top: 0.3rem; }

/* ---- MATERIAL STEP (booking Step 2) — given clear visual weight so it's
   impossible to skim past: its own bordered card, a bigger label, and
   bigger/roomier option cards than a standard radio-cards group. --------- */
.material-step-card {
  background: var(--black-soft); border: 2px solid var(--gold);
  border-radius: var(--radius); padding: 1.1rem; margin-bottom: 1.25rem;
}
.material-step-label {
  display: block; font-family: 'Teko', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--gold-bright); font-size: 1.05rem; margin-bottom: 0.4rem;
}
.required-mark { color: var(--red-bright); }
.material-step-card .radio-cards { margin-top: 0.75rem; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.material-step-card .radio-card.material-card { padding: 0.85rem 0.7rem; }
.material-step-card .radio-card.material-card .rc-title { font-size: 0.92rem; }
@media (min-width: 720px) { .material-step-card .radio-cards { grid-template-columns: repeat(3, 1fr); } }

/* ---- CUSTOM DATE CALENDAR (booking Step 4) --------------------------------
   A custom 7-column grid instead of a native <input type="date"> so the
   selected/delivery date can be styled (in red) and every day cell is a
   uniform, aligned box in every browser. */
.date-calendar-wrap {
  background: var(--black-soft); border: 2px solid var(--border-soft); border-radius: var(--radius);
  padding: 1.1rem; margin-top: 0.75rem;
}
.date-calendar-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.9rem; }
.date-calendar-nav .btn { min-height: 40px; padding: 0.5rem 0.9rem; }
.date-calendar-month { font-weight: 800; color: var(--white); font-size: 1.05rem; }
.date-calendar-weekdays {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.35rem;
  margin-bottom: 0.35rem; text-align: center; color: var(--gray-dim); font-size: 0.78rem; font-weight: 700;
}
.date-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.35rem; }
.date-cell {
  aspect-ratio: 1 / 1; width: 100%; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--border-soft); border-radius: 8px; background: var(--black-elevated);
  color: var(--white); font-weight: 700; font-size: 0.92rem; cursor: pointer; padding: 0;
}
.date-cell:hover:not(:disabled) { border-color: var(--gold); }
.date-cell.date-cell-empty { visibility: hidden; border: none; background: none; cursor: default; }
.date-cell.disabled { color: var(--gray-dim); background: transparent; border-color: transparent; cursor: not-allowed; opacity: 0.45; }
.date-cell.selected {
  background: var(--red); border-color: var(--red-bright); color: var(--white);
}
.date-cell.selected:hover { border-color: var(--red-bright); }

.form-msg { padding: 0.9rem 1rem; border-radius: 8px; font-weight: 600; margin-top: 1rem; }
.form-msg.success { background: rgba(216,161,58,0.15); border: 1px solid var(--gold); color: var(--gold-bright); }
.form-msg.error { background: rgba(179,55,44,0.15); border: 1px solid var(--red); color: #ff9d92; }

/* ---- FAQ ------------------------------------------------------------------------ */
.faq-item { border-bottom: 1px solid var(--border-soft); }
.faq-question {
  width: 100%; text-align: left; background: none; border: none; color: var(--white);
  font-weight: 700; font-size: 1.02rem; padding: 1.1rem 0; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq-question .icon { color: var(--gold); font-size: 1.3rem; flex-shrink: 0; transition: transform var(--transition); }
.faq-question[aria-expanded="true"] .icon { transform: rotate(45deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height var(--transition); }
.faq-answer p { padding-bottom: 1.1rem; margin: 0; }

/* ---- BOOKING STEPPER --------------------------------------------------------------- */
.booking-layout { display: grid; gap: 1.75rem; grid-template-columns: 1fr; }
@media (min-width: 980px) { .booking-layout { grid-template-columns: 1.6fr 1fr; align-items: start; } }

/* The price summary only appears on the final step (order review), not
   pinned in view through every step of booking — see js/booking.js
   showStep(). "price-hidden" collapses the layout back to one column so
   there's no empty reserved gap on desktop while it's hidden. */
.booking-layout.price-hidden .price-summary { display: none; }
@media (min-width: 980px) { .booking-layout.price-hidden { grid-template-columns: 1fr; } }

.step-indicator { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 1.75rem; flex-wrap: wrap; }
.step-dot {
  width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.85rem; background: var(--black-elevated); border: 2px solid var(--border-soft); color: var(--gray-dim);
  flex-shrink: 0;
}
.step-dot.active { border-color: var(--gold); color: var(--gold-bright); background: var(--black-soft); }
.step-dot.done { background: var(--gold); border-color: var(--gold); color: var(--black); }
.step-line { flex: 1; height: 2px; background: var(--border-soft); min-width: 14px; }
.step-label { font-weight: 700; color: var(--gray-dim); font-size: 0.85rem; }

.step-panel { display: none; }
.step-panel.active { display: block; }

.price-summary {
  position: sticky; top: calc(var(--header-height) + 1rem);
  background: var(--black-soft); border: 1px solid var(--border-soft); border-radius: var(--radius);
  padding: 1.5rem;
}
.price-summary h3 { color: var(--gold-bright); margin-bottom: 1rem; }
.price-line { display: flex; justify-content: space-between; gap: 1rem; padding: 0.4rem 0; color: var(--gray); font-size: 0.95rem; }
.price-line.total { border-top: 1px solid var(--border-soft); margin-top: 0.6rem; padding-top: 0.9rem; font-weight: 800; color: var(--white); font-size: 1.15rem; }
.price-summary .hint { color: var(--gray-dim); font-size: 0.8rem; margin-top: 1rem; }

.step-actions { display: flex; gap: 0.85rem; margin-top: 2rem; }
.step-actions .btn { flex: 1; }

#map {
  width: 100%; height: 320px; border-radius: var(--radius); border: 2px solid var(--border-soft);
  touch-action: pan-x pan-y;
}

.map-rotate-controls {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  margin-top: 0.75rem; padding: 0.75rem; background: var(--black-soft);
  border: 1px solid var(--border-soft); border-radius: var(--radius);
}
.map-rotate-controls .btn { min-height: 44px; padding: 0.6rem 1rem; font-size: 0.9rem; }
.rotate-readout { font-weight: 800; color: var(--gold-bright); min-width: 3.5ch; text-align: center; font-size: 1.05rem; }

/* The dumpster footprint icon dropped on the map. It's an SVG inside a
   Leaflet divIcon; rotation is applied with a CSS transform so it spins
   smoothly without reloading the icon. */
.dumpster-map-icon {
  transform-origin: center center;
  transition: transform 120ms ease;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
}

.prohibited-box {
  background: var(--black-soft); border: 1px solid rgba(179,55,44,0.4);
  border-radius: var(--radius); padding: 1.1rem; margin-top: 1.25rem;
}
.prohibited-box h3 { margin: 0 0 0.15rem; font-size: 1rem; color: var(--red-bright); }
.prohibited-box .checkbox-row { margin-top: 0.9rem; }
.prohibited-list { margin: 0.5rem 0 0; color: var(--gray); font-size: 0.88rem; line-height: 1.5; }

.blocked-banner {
  background: rgba(179,55,44,0.15); border: 1px solid var(--red); border-radius: var(--radius);
  padding: 1.1rem; color: var(--white); margin-top: 1rem;
}
.blocked-banner a { color: var(--gold-bright); font-weight: 700; }

.summary-box { background: var(--black-elevated); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1.5rem; }
.summary-box dt { color: var(--gray-dim); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 0.75rem; }
.summary-box dt:first-child { margin-top: 0; }
.summary-box dd { margin: 0.15rem 0 0; color: var(--white); font-weight: 600; }

/* ---- MISC PAGE SECTIONS --------------------------------------------------------- */
.about-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: center; }
#about-heading { color: var(--gold-bright); }
@media (min-width: 860px) { .about-grid { grid-template-columns: 1fr 1fr; } }
.about-photo { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border-soft); aspect-ratio: 4/3; background: var(--black-soft); display: flex; align-items: center; justify-content: center; color: var(--gray-dim); }

/* MOBILE ONLY: owner photo becomes a fixed-height band at the top with the
   About text overlaid below it (same pattern as the homepage hero),
   instead of text sitting above the photo in its own plain-background
   box. The photo's height is fixed (46vh) independent of how tall the
   paragraph makes the card — without that, the photo would stretch to
   match the text's full height instead of staying a normal photo.
   Desktop (860px+ above) keeps the existing side-by-side grid untouched. */
@media (max-width: 859px) {
  .about-grid {
    position: relative;
    display: block;
    border-radius: var(--radius);
    overflow: hidden;
  }
  .about-photo {
    position: absolute; top: 0; left: 0; right: 0;
    height: 46vh;
    z-index: 0;
    aspect-ratio: auto;
    border: none;
    border-radius: 0;
  }
  .about-grid::after {
    content: "";
    position: absolute; top: 0; left: 0; right: 0;
    height: 46vh;
    z-index: 0;
    background: linear-gradient(180deg, rgba(11,11,12,0) 30%, rgba(11,11,12,0.9) 65%, rgba(11,11,12,1) 100%);
    pointer-events: none;
  }
  .about-grid > div:first-child {
    position: relative;
    z-index: 1;
    padding: 1.5rem;
    padding-top: 46vh;
  }
}

.contact-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 1fr; } }
.contact-info-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.contact-info-list li { display: flex; gap: 0.9rem; align-items: flex-start; }
.contact-info-list svg { width: 24px; height: 24px; color: var(--gold); flex-shrink: 0; margin-top: 0.15rem; }
.contact-info-list .label { font-weight: 700; color: var(--white); display: block; }
.contact-info-list .value { color: var(--gray); }
#contact-hours-text { white-space: pre-line; }

.badge-strip { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }
.badge-pill {
  background: var(--black-elevated); border: 1px solid var(--gold); color: var(--gold-bright);
  padding: 0.4rem 0.85rem; border-radius: 999px; font-size: 0.82rem; font-weight: 700;
}