/* GENERATED by build.py: assets/fonts/fonts.css + css/styles.css.
   Edit css/styles.css instead, then rebuild. */

/* Self-hosted fonts. Generated by _build/fetch_fonts.py, do not edit.
   Latin subset only. font-display:swap so text paints immediately. */

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/barlow-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/barlow-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/barlow-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/barlow-condensed-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/barlow-condensed-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Big Shoulders';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url('/assets/fonts/big-shoulders-600800.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   AllStarr Solutions Hauling & Junk Removal
   Brand: logo red #DD262A · ink black #0D0E0E · white · steel #CACBCD
   Type:  Big Shoulders (display) · Barlow / Barlow Condensed (body/labels)
   ============================================================ */

:root {
  --red: #DD262A;
  --red-deep: #B01B1F;
  /* Eyebrow red for light backgrounds. The brand red only reaches 4.40:1 on
     the paper tone, just under WCAG AA; this is 4.93:1 and visually the same. */
  --red-on-light: #D02024;
  --ink: #0D0E0E;
  --ink-2: #161719;
  --ink-3: #1F2023;
  --white: #FFFFFF;
  --paper: #F6F5F4;
  --steel: #CACBCD;
  --gray: #55585C;
  --line: #E6E5E3;
  --line-dark: #2B2C2F;

  --font-display: "Big Shoulders", "Arial Narrow", sans-serif;
  --font-body: "Barlow", "Segoe UI", Arial, sans-serif;
  --font-label: "Barlow Condensed", "Arial Narrow", sans-serif;

  --container: 74rem;
  --radius: 4px;
  --header-h: 5.6rem;
  /* Barely-there diagonal texture on the dark hero, echoing the angle of the
     hazard rule. Two alpha steps above the ink, so it reads as tooth on the
     surface rather than as a pattern. CSS only, no image request. */
  --hero-texture: repeating-linear-gradient(-45deg,
    rgba(255, 255, 255, 0) 0 8px,
    rgba(255, 255, 255, 0.024) 16px,
    rgba(255, 255, 255, 0) 24px 32px);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow-card: 0 1px 2px rgba(13, 14, 14, 0.05), 0 8px 24px -12px rgba(13, 14, 14, 0.18);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.05; }
p { margin: 0 0 1rem; }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
  border-radius: 2px;
}
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--red); color: #fff; padding: 0.75rem 1.25rem;
  font-weight: 600; z-index: 200; text-decoration: none;
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; }

.container {
  width: min(100% - 2.5rem, var(--container));
  margin-inline: auto;
}

/* ---------- Typography helpers ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.005em;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--red-on-light);
  margin: 0 0 1rem;
}
.eyebrow::before {
  content: "";
  width: 0.85em; height: 0.85em;
  background: currentColor;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  flex: none;
}
.section-title {
  font-size: clamp(2.1rem, 4.5vw, 3.4rem);
  margin-bottom: 1rem;
}
.section-lede {
  font-size: 1.125rem;
  color: var(--gray);
  max-width: 46rem;
  margin-bottom: 0;
}
.on-dark .section-lede { color: var(--steel); }
/* small red type on near-black needs a lighter tint to hold WCAG AA contrast */
.hero .eyebrow, .on-dark .eyebrow, .on-dark .plate .stat, .cta-band .eyebrow { color: #F05A5E; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  padding: 0.95rem 1.9rem;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  min-height: 44px;
  transition: background-color 0.2s var(--ease-out), border-color 0.2s var(--ease-out),
              color 0.2s var(--ease-out), transform 0.15s var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn svg { flex: none; }

.btn--primary { background: var(--red); color: #fff; }
.btn--primary:hover { background: var(--red-deep); }

.btn--ghost { border-color: var(--steel); color: var(--ink); background: transparent; }
.btn--ghost:hover { border-color: var(--ink); }
.hero .btn--ghost, .cta-band .btn--ghost, .on-dark .btn--ghost { border-color: rgba(255,255,255,0.35); color: #fff; }
.hero .btn--ghost:hover, .cta-band .btn--ghost:hover, .on-dark .btn--ghost:hover { border-color: #fff; }

.btn--lg { font-size: 1.35rem; padding: 1.1rem 2.3rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(13, 14, 14, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-dark);
}
.site-header .container {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: var(--header-h);
}
.brand {
  display: inline-flex;
  align-items: center;
  flex: none;
  padding: 0.85rem 0;      /* breathing room above and below the mark */
}
.brand img { width: clamp(9.5rem, 16vw, 12rem); height: auto; display: block; }

.site-nav { margin-left: auto; }
.site-nav ul { display: flex; gap: 0.25rem; }
.site-nav a {
  display: block;
  padding: 0.55rem 0.85rem;
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 1.08rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--steel);
  text-decoration: none;
  border-radius: var(--radius);
  white-space: nowrap;
  transition: color 0.18s var(--ease-out);
}
.site-nav a:hover { color: #fff; }
.site-nav a[aria-current="page"] { color: #fff; box-shadow: inset 0 -2px 0 var(--red); }

.header-call {
  flex: none;
  font-size: 1.05rem;
  padding: 0.65rem 1.2rem;
}

.nav-toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: 0;
  padding: 0.6rem;
  cursor: pointer;
  color: #fff;
}
.nav-toggle .bars { display: block; width: 26px; height: 18px; position: relative; }
.nav-toggle .bars::before, .nav-toggle .bars::after, .nav-toggle .bars span {
  content: ""; position: absolute; left: 0; width: 100%; height: 2.5px;
  background: currentColor; border-radius: 2px;
  transition: transform 0.25s var(--ease-out), opacity 0.2s;
}
.nav-toggle .bars::before { top: 0; }
.nav-toggle .bars span { top: 7.75px; }
.nav-toggle .bars::after { bottom: 0; }
.nav-open .nav-toggle .bars::before { transform: translateY(7.75px) rotate(45deg); }
.nav-open .nav-toggle .bars span { opacity: 0; }
.nav-open .nav-toggle .bars::after { transform: translateY(-7.75px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background-color: var(--ink);
  background-image: var(--hero-texture);
  color: #fff;
  overflow: hidden;
}
.hero::before {
  /* faint steel swoosh echoing the logo mark */
  content: "";
  position: absolute;
  inset: -20% -30%;
  background: radial-gradient(60% 42% at 68% 38%, transparent 62%, rgba(202, 203, 205, 0.09) 63%, rgba(202, 203, 205, 0.09) 65%, transparent 66%);
  pointer-events: none;
}
.hero .container { position: relative; }

.hero--home { padding: clamp(4.5rem, 10vw, 8rem) 0 clamp(3.5rem, 7vw, 5.5rem); }
.hero--home h1 {
  font-size: clamp(2.9rem, 8.2vw, 6.2rem);
  max-width: 20ch;
  margin: 0 0 1.4rem;
}
.cta-band h2 em, .section-title em {
  font-style: normal;
  color: var(--red);
}
/* Hero headlines read as one solid white statement. The <em> is kept for
   semantics and because interior heroes use it to mark the city name, but it
   no longer changes colour. */
.hero h1 em {
  font-style: normal;
  color: inherit;
}
.hero-lede {
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  color: var(--steel);
  max-width: 44rem;
  margin-bottom: 2.2rem;
}
.hero-lede strong { color: #fff; font-weight: 600; }
.hero-meta {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: 1.6rem;
  display: block;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; margin-bottom: 2.6rem; }

.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.2rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line-dark);
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 1.02rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--steel);
}
.trust-item strong { color: #fff; font-weight: 700; }
.trust-item svg { color: var(--red); flex: none; }

/* Interior page hero */
.hero--page { padding: clamp(3.2rem, 7vw, 5rem) 0; }
.hero--page h1 { font-size: clamp(2.4rem, 5.5vw, 4.2rem); max-width: 22ch; margin-bottom: 1rem; }
.hero--page .hero-lede { margin-bottom: 1.6rem; }
.hero--page .hero-actions { margin-bottom: 0; }

/* ---------- Manifest ticker ---------- */
.ticker {
  background: var(--red);
  color: #fff;
  overflow: hidden;
  padding: 0.85rem 0;
  border-top: 4px solid var(--ink);
}
.ticker-track {
  display: flex;
  gap: 3rem;
  width: max-content;
  animation: ticker 46s linear infinite;
}
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-track ul {
  display: flex;
  gap: 3rem;
  flex: none;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ticker-track li { display: flex; align-items: center; gap: 3rem; }
.ticker-track li::after {
  content: "";
  width: 0.7em; height: 0.7em;
  background: rgba(255,255,255,0.85);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------- Sections ---------- */
.section { padding: clamp(3.8rem, 8vw, 6.5rem) 0; }
.section--paper { background: var(--paper); }
.section--dark { background: var(--ink); color: #fff; }
.section-head { margin-bottom: clamp(2.2rem, 5vw, 3.5rem); }
.section-head--split {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
}

.hazard-rule {
  height: 6px;
  background: repeating-linear-gradient(-45deg, var(--red) 0 14px, var(--ink) 14px 28px);
}

/* ---------- Breadcrumbs ---------- */
.crumbs { background: var(--ink-2); border-bottom: 1px solid var(--line-dark); }
.crumbs ol {
  list-style: none;
  margin: 0; padding: 0.7rem 0;
  display: flex; flex-wrap: wrap; gap: 0.4rem 0.55rem;
  font-family: var(--font-label);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--steel);
}
.crumbs li { display: flex; align-items: center; gap: 0.55rem; min-width: 0; }
.crumbs li + li::before { content: "/"; color: var(--gray); }
.crumbs a { color: var(--steel); text-decoration: none; }
.crumbs a:hover { color: #fff; }
.crumbs [aria-current] {
  color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 28rem;
}

/* ---------- Services grid ---------- */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1.1rem;
}
.svc-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}
.svc-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
  border-color: var(--steel);
}
.svc-card > svg { color: var(--red); }
.svc-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.35rem;
  letter-spacing: 0.02em;
}
.svc-card p { color: var(--gray); font-size: 0.98rem; margin: 0; }
.svc-card--heavy { border-color: var(--steel); border-top: 3px solid var(--red); }
.svc-flag {
  position: absolute;
  top: 1.5rem; right: 1.3rem;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red-deep);
  background: #FCEAEA;
  border-radius: 2px;
  padding: 0.2rem 0.5rem;
}
.svc-more {
  margin-top: auto;
  padding-top: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red-deep);
}
.svc-more svg { transition: transform 0.2s var(--ease-out); }
.svc-card:hover .svc-more svg, .post-card:hover .svc-more svg { transform: translateX(4px); }

/* ---------- Post cards ---------- */
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: 1.1rem;
}
.post-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--red);
  border-radius: var(--radius);
  padding: 1.5rem 1.5rem 1.35rem;
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.post-kicker {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red-deep);
}
.post-card h2, .post-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.3rem;
  line-height: 1.1;
}
.post-card p { color: var(--gray); font-size: 0.97rem; margin: 0; }

/* ---------- FAQ accordion ---------- */
.faq-list { display: grid; gap: 0.7rem; }
.faq-list--wide { max-width: 52rem; }
.faq {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.faq[open] { border-color: var(--steel); box-shadow: var(--shadow-card); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.3rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.18rem;
  letter-spacing: 0.01em;
  min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { color: var(--red); flex: none; transition: transform 0.25s var(--ease-out); }
.faq[open] summary svg { transform: rotate(90deg); }
.faq-body { padding: 0 1.3rem 1.2rem; }
.faq-body p { color: var(--gray); margin: 0; }
.section--paper .faq { background: var(--white); }

/* ---------- Article layout ---------- */
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 19rem;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.article-prose { max-width: 42rem; }
.article-prose .lead { font-size: 1.2rem; color: var(--ink); }
.article-prose h2 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  margin: 2.4rem 0 0.8rem;
}
.article-prose a { color: var(--red-deep); }
.hero--article h1 { font-size: clamp(2rem, 4.4vw, 3.4rem); max-width: 26ch; }
.side-links { display: grid; gap: 0.6rem; margin-top: 1.2rem; }

/* ---------- Heavy list (signature section) ---------- */
.heavy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
  gap: 1.1rem;
}
.plate {
  border: 1px solid var(--line-dark);
  background: var(--ink-2);
  border-radius: var(--radius);
  padding: 1.5rem 1.4rem 1.35rem;
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.plate:hover { border-color: var(--red); transform: translateY(-4px); }
.plate::before {
  content: attr(data-tag);
  position: absolute;
  top: -0.72rem;
  left: 1rem;
  background: var(--ink);
  border: 1px solid var(--line-dark);
  color: var(--steel);
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.15rem 0.6rem;
  border-radius: 2px;
}
.plate h3 {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1.65rem;
  margin-bottom: 0.4rem;
}
.plate p { color: var(--steel); font-size: 0.97rem; margin: 0; }
.plate .stat {
  display: block;
  font-family: var(--font-label);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
  font-size: 0.95rem;
  margin-top: 0.8rem;
}

/* ---------- Steps ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.2rem;
  counter-reset: step;
}
.step {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.8rem 1.5rem;
  position: relative;
}
.step::before {
  counter-increment: step;
  content: "0" counter(step);
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.6rem;
  color: var(--red);
  line-height: 1;
  margin-bottom: 0.9rem;
}
.step h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1.45rem;
  margin-bottom: 0.5rem;
}
.step p { color: var(--gray); margin: 0; font-size: 1rem; }

/* ---------- Reviews ---------- */
.review-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.6rem;
  margin-bottom: 2rem;
}
.review-score {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 3.2rem;
  line-height: 1;
}
.stars { display: inline-flex; gap: 0.15rem; color: var(--red); }
.review-count { font-size: 1rem; color: var(--gray); }
.on-dark .review-count { color: var(--steel); }
.review-count a { color: inherit; }

.review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1.1rem;
}
.review-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--red);
  border-radius: var(--radius);
  padding: 1.5rem 1.5rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.review-card .stars { margin-bottom: -0.25rem; }
.review-card blockquote { margin: 0; font-size: 1rem; color: var(--ink); }
.review-card--dark {
  background: var(--ink-2);
  border-color: var(--line-dark);
  border-left-color: var(--red);
}
.review-card--dark blockquote { color: #fff; }
.review-card--dark footer { color: var(--steel); }
.review-card--dark footer strong { color: #fff; }
.review-card footer {
  margin-top: auto;
  font-family: var(--font-label);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.9rem;
  color: var(--gray);
}
.review-card footer strong { color: var(--ink); display: block; font-size: 1rem; }

/* ---------- Photo placeholders ---------- */
.ph-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1.1rem;
}
.ph {
  aspect-ratio: 4 / 3;
  border: 2px dashed var(--steel);
  border-radius: var(--radius);
  background:
    linear-gradient(to top right, transparent calc(50% - 1px), var(--line) calc(50% - 1px), var(--line) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(to top left, transparent calc(50% - 1px), var(--line) calc(50% - 1px), var(--line) calc(50% + 1px), transparent calc(50% + 1px)),
    var(--paper);
  display: flex;
  align-items: flex-end;
  padding: 0.9rem;
}
.ph--wide { aspect-ratio: 16 / 7; grid-column: 1 / -1; }
.ph--tall { aspect-ratio: 3 / 4; }
.ph span {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray);
  background: var(--white);
  border: 1px solid var(--line);
  padding: 0.3rem 0.7rem;
  border-radius: 2px;
}

/* ---------- Service areas ---------- */
.area-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 0.8rem;
}
.area-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.95rem 1.15rem;
  text-decoration: none;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 1.12rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  transition: border-color 0.2s var(--ease-out), transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.area-link svg { color: var(--steel); transition: color 0.2s, transform 0.2s var(--ease-out); flex: none; }
.area-link:hover { border-color: var(--red); transform: translateY(-2px); box-shadow: var(--shadow-card); }
.area-link:hover svg { color: var(--red); transform: translateX(3px); }

/* dark-surface variant */
.area-grid--dark .area-link,
.on-dark .area-link,
.side-links .area-link { font-size: 1rem; }
.area-grid--dark .area-link, .on-dark .area-link {
  background: var(--ink-2);
  border-color: var(--line-dark);
  color: #fff;
}
.area-grid--dark .area-link:hover, .on-dark .area-link:hover {
  border-color: var(--red);
  box-shadow: none;
}
.area-grid--dark .area-link svg, .on-dark .area-link svg { color: var(--gray); }

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--ink);
  color: #fff;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-band .container { position: relative; }
.cta-band h2 {
  font-size: clamp(2.2rem, 5.5vw, 4rem);
  max-width: 24ch;
  margin: 0 auto 1.2rem;
}
.cta-band h2 em { font-style: normal; color: var(--red); }
.cta-band p { color: var(--steel); max-width: 40rem; margin: 0 auto 2rem; }
.cta-band .hero-actions { justify-content: center; margin-bottom: 0; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ink);
  color: var(--steel);
  padding: 3.5rem 0 2rem;
  border-top: 4px solid var(--red);
  font-size: 0.97rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.2fr;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--line-dark);
}
.footer-brand img { width: 11rem; margin-bottom: 1rem; }
.footer-brand p { max-width: 28rem; }
.footer-tag {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
}
.plain-list li { margin-bottom: 0.5rem; }
.site-footer h3 {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 1rem;
}
.site-footer ul li { margin-bottom: 0.45rem; }
.site-footer a { color: var(--steel); text-decoration: none; transition: color 0.18s; }
.site-footer a:hover { color: #fff; }
.footer-contact li { display: flex; gap: 0.6rem; align-items: flex-start; }
.footer-contact svg { color: var(--red); flex: none; margin-top: 0.25rem; }
.footer-social { display: flex; gap: 0.6rem; margin-top: 1.1rem; }
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  transition: border-color 0.2s, color 0.2s;
}
.footer-social a:hover { border-color: var(--red); color: #fff; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 2rem;
  justify-content: space-between;
  padding-top: 1.6rem;
  font-size: 0.88rem;
}
.footer-bottom a { text-decoration: underline; text-underline-offset: 3px; }
.footer-credit a { color: #fff; }
.footer-credit a:hover { color: var(--red); }

/* ---------- Mobile call bar ---------- */
.call-bar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  padding: 0.6rem 0.75rem calc(0.6rem + env(safe-area-inset-bottom));
  background: rgba(13, 14, 14, 0.94);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--line-dark);
}
.call-bar .btn { width: 100%; font-size: 1.15rem; padding: 0.85rem 1rem; white-space: nowrap; }

/* ---------- Content pages (about / locations) ---------- */
.prose { max-width: 46rem; }
.prose p { color: #2E3033; }
.prose .lead { font-size: 1.2rem; color: var(--ink); }
.two-col {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.check-list li {
  position: relative;
  padding-left: 1.9rem;
  margin-bottom: 0.7rem;
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.42em;
  width: 0.85em; height: 0.85em;
  background: var(--red);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.info-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 4px solid var(--red);
  border-radius: var(--radius);
  padding: 1.8rem 1.6rem;
  box-shadow: var(--shadow-card);
}
.info-card h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1.5rem;
  margin-bottom: 1rem;
}
.info-card ul li { margin-bottom: 0.8rem; display: flex; gap: 0.7rem; align-items: flex-start; }
.info-card svg { color: var(--red); flex: none; margin-top: 0.2rem; }

/* ---------- Legal pages ---------- */
.legal-prose h1 {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  margin-bottom: 0.5rem;
}
.legal-prose h2 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.5rem;
  margin: 2.2rem 0 0.7rem;
}
.legal-prose a { color: var(--red-deep); }

/* ---------- Contact form ---------- */
.form-grid { display: grid; gap: 1.1rem; }
.form-row { display: grid; gap: 1.1rem; grid-template-columns: 1fr 1fr; }
.field label {
  display: block;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}
.field label .req { color: var(--red); }
.field input, .field select, .field textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--white);
  border: 1.5px solid var(--steel);
  border-radius: var(--radius);
  padding: 0.8rem 0.95rem;
  min-height: 48px;
  transition: border-color 0.2s;
}
.field textarea { resize: vertical; min-height: 8rem; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(221, 38, 42, 0.15);
}
.field .hint { font-size: 0.88rem; color: var(--gray); margin-top: 0.35rem; }
.form-note { font-size: 0.92rem; color: var(--gray); }

/* ---------- Reveal animations ---------- */
.rv {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.rv.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv { opacity: 1; transform: none; transition: none; }
  .ticker-track { animation: none; flex-wrap: wrap; width: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 72rem) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 64rem) {
  /* backdrop-filter would make the header the containing block for the
     fixed-position nav drawer, collapsing it, so use a solid header instead */
  .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--ink); }
  .site-nav {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    background: var(--ink);
    padding: 1.5rem 1.25rem 2rem;
    transform: translateX(100%);
    transition: transform 0.3s var(--ease-out);
    overflow-y: auto;
    z-index: 95;
  }
  .nav-open .site-nav { transform: none; }
  .site-nav ul { flex-direction: column; gap: 0.15rem; }
  .site-nav a { font-size: 1.5rem; padding: 0.85rem 0.75rem; }
  .nav-toggle { display: block; }
  .header-call { display: none; }
  .call-bar { display: block; }
  body { padding-bottom: 4.4rem; } /* room for call bar */

  .two-col { grid-template-columns: 1fr; }
  .article-layout { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .brand { padding: 0.7rem 0; }

  .hero-actions .btn { flex: 1 1 auto; }
}

@media (max-width: 34rem) {
  body { font-size: 1rem; }
  .btn--lg { font-size: 1.2rem; padding: 1rem 1.6rem; width: 100%; }
  .review-summary { gap: 0.8rem 1.2rem; }
  .ph--wide { aspect-ratio: 4 / 3; }
}

/* ============================================================
   Real job photos
   ============================================================ */

/* Uniform tiles regardless of source orientation */
.shot {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--paper);
  border: 1px solid var(--line);
}
.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}
.shot:hover img { transform: scale(1.04); }
.shot--tall { aspect-ratio: 3 / 4; }
.on-dark .shot, .section--dark .shot { border-color: var(--line-dark); background: var(--ink-2); }

/* Hero photo, kept behind a heavy scrim so headline contrast never drops */
.hero--photo::before { display: none; }   /* retire the swoosh when a photo is present */
.hero-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 46%;
}
.hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Two layers: a horizontal scrim that keeps the headline on solid ink, and a
     bottom fade so the trust row never sits on a bright part of the photo. */
  background:
    linear-gradient(180deg,
      rgba(13, 14, 14, 0) 0%,
      rgba(13, 14, 14, 0) 42%,
      rgba(13, 14, 14, 0.72) 78%,
      rgba(13, 14, 14, 0.96) 94%,
      var(--ink) 100%),
    linear-gradient(100deg,
      var(--ink) 0%,
      var(--ink) 34%,
      rgba(13, 14, 14, 0.86) 50%,
      rgba(13, 14, 14, 0.54) 76%,
      rgba(13, 14, 14, 0.4) 100%);
}
.hero--photo .container { position: relative; z-index: 1; }

/* Article lead image */
.article-lead { margin: 0 0 2rem; aspect-ratio: 16 / 10; }

@media (max-width: 56rem) {
  /* On phones the copy fills most of the hero, so instead of hiding the photo
     behind a heavy scrim we open a clear window for it above the headline and
     let the text sit on solid ink below. */
  /* A tall phone viewport makes a full-bleed background show the whole frame,
     which puts the sky behind the copy and the subject out of view. Pin the
     photo to a band at the top instead so the crop stays on the work. */
  .hero--photo { padding-top: 15.5rem; }
  .hero-photo { inset: 0 0 auto 0; height: 13rem; }
  .hero-photo img { object-position: 62% 64%; }
  .hero-photo::after {
    background:
      linear-gradient(180deg,
        rgba(13, 14, 14, 0.10) 0%,
        rgba(13, 14, 14, 0.22) 55%,
        rgba(13, 14, 14, 0.72) 84%,
        var(--ink) 100%);
  }
}

@media (max-width: 34rem) {
  .shot, .article-lead { aspect-ratio: 3 / 2; }
  .shot--tall { aspect-ratio: 4 / 3; }
}

/* ---------- Home hero background ----------
   The hero photo is 2.38:1 with the truck at one edge and the trailer ramp at
   the other, so it is never cropped: it sits full width at its natural aspect
   ratio, anchored to the bottom of the hero. The copy overlays the top of the
   frame, which is empty sky, so the whole rig stays visible underneath it. */
.hero--home.hero--photo {
  /* Room for the image at the bottom. The photo is full-bleed and uncropped,
     so its height is a fixed fraction of the viewport width (~42vw at 2.4:1)
     and the space reserved for it has to scale the same way. This used to be
     min(27vw, 26rem); above 1541px the cap froze the reserve at 416px while
     the photo kept growing, which walked the trust row from 37% into the frame
     down to 58% at 2400px, past the point where the scrim has faded out. Keep
     this proportional so the row lands at ~36% of the frame at every width,
     which is sky under near-solid ink, well above the rig at 45%. */
  padding-top: clamp(3rem, 6vw, 5rem);
  padding-bottom: 27vw;
  /* Fade the texture out before the photo begins, so it stops gradually
     instead of ending on the photo's top edge. The wash is anchored to the
     bottom and is fully ink by 42vw up, which is exactly where the photo
     starts. */
  background-image:
    linear-gradient(180deg, rgba(13, 14, 14, 0) 0%, var(--ink) 40%),
    var(--hero-texture);
  background-size: 100% 70vw, auto;
  background-position: bottom center, top left;
  background-repeat: no-repeat, repeat;
}
/* Slightly tighter copy block on the photo hero so the rig sits higher in the
   viewport. Without this the truck falls below the fold on a 768px laptop. */
.hero--home.hero--photo h1 { font-size: clamp(2.7rem, 7vw, 5.3rem); }
.hero--home.hero--photo .hero-lede { margin-bottom: 1.8rem; }
.hero--home.hero--photo .hero-actions { margin-bottom: 2rem; }
.hero--home.hero--photo .trust-row { padding-top: 1.2rem; }

.hero--home .hero-photo {
  position: absolute;
  inset: auto 0 0 0;      /* bottom-anchored, not stretched */
  height: auto;
  z-index: 0;
}
.hero--home .hero-photo img {
  width: 100%;
  height: auto;           /* uncropped: full frame, always */
  object-fit: fill;
}
/* Fade the sky into the ink so the photo reads as the hero background rather
   than a pasted-on block. Clears well above the truck and trailer. */
.hero--home .hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    var(--ink) 0%,
    rgba(13, 14, 14, 0.98) 24%,
    rgba(13, 14, 14, 0.95) 38%,
    rgba(13, 14, 14, 0.45) 43%,
    rgba(13, 14, 14, 0.06) 48%,
    rgba(13, 14, 14, 0) 51%);
}

@media (max-width: 56rem) {
  .hero--home.hero--photo {
    padding-top: clamp(3rem, 9vw, 5rem);
    padding-bottom: 44vw;
    background-size: 100% 78vw, auto;
  }
  .hero--home .hero-photo { inset: auto 0 0 0; height: auto; }
  .hero--home .hero-photo img { object-position: center; }
  .hero--home .hero-photo::after {
    background: linear-gradient(180deg,
      var(--ink) 0%,
      rgba(13, 14, 14, 0.92) 16%,
      rgba(13, 14, 14, 0.45) 34%,
      rgba(13, 14, 14, 0) 50%);
  }
}


/* ---------- Tap targets ----------
   Stacked link lists were 19px tall, below the 24px minimum for pointer
   targets. Padding the anchors lifts them over the line without changing the
   footer's visual rhythm much. */
.site-footer ul a,
.plain-list a {
  display: inline-block;
  padding: 0.28rem 0;
}
.site-footer ul li { margin-bottom: 0.2rem; }
.footer-contact li { margin-bottom: 0.35rem; }

/* Inline links inside sentences keep their text flow, but padding-block widens
   the touch area without affecting line height (inline boxes ignore it for
   layout). Helps thumbs on the legal line and the review link. */
.footer-bottom a,
.review-count a { padding-block: 0.35rem; }

.legal-prose .legal-updated { color: var(--gray); margin-bottom: 2rem; }