/* =====================================================
M TAYLOR INC — PREMIUM INDUSTRIAL THEME
Owner-Operator • Stepdeck • Power-Only
===================================================== */

/* ------------------ DESIGN TOKENS ------------------ */
:root {
  /* ---- Color: Backgrounds ---- */
  --bg-body: #0a0d11;
  --bg: #0b0f14;
  --panel: #111827;
  --panel-alt: #0f1622;
  --bg-section-alt: #0d1117;
  --bg-cta-dark: #1a1508;
  --bg-cta-mid: #2a1f0a;

  /* ---- Color: Text ---- */
  --text: #e8e4dd;
  --muted: #9a9688;
  --white: #ffffff;
  --black: #000000;

  /* ---- Color: Accent ---- */
  --accent: #d4a44a;
  --accent-light: #e0b35e;
  --accent-dark: #c9922e;
  --accent-darker: #b8862a;
  --color-star: #f5a623;

  /* ---- Color: Brand chrome gradient stops ---- */
  --brand-chrome-light: #c8b080;
  --brand-chrome-mid: #c0a060;

  /* ---- Color: RGB channels (for alpha compositing) ---- */
  --accent-rgb: 212, 164, 74;
  --bg-body-rgb: 10, 13, 17;
  --bg-rgb: 11, 15, 20;
  --white-rgb: 255, 255, 255;
  --black-rgb: 0, 0, 0;
  --border-rgb: 31, 41, 55;
  --panel-rgb: 17, 24, 39;
  --panel-alt-rgb: 15, 22, 34;

  /* ---- Color: Semantic ---- */
  --border: #1f2937;
  --accent-glow: rgba(var(--accent-rgb), 0.15);
  --accent-soft: rgba(var(--accent-rgb), 0.08);
  --scrollbar-thumb: #1f2937;
  --scrollbar-hover: #4a3d28;

  /* ---- Spacing ---- */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 0.75rem;
  --space-lg: 1.25rem;
  --space-xl: 1.5rem;
  --space-2xl: 2rem;
  --space-3xl: 3rem;
  --space-4xl: 4rem;

  /* ---- Typography: Families ---- */
  --font-body: system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-heading: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --font-brand: "Alex Brush", cursive;

  /* ---- Typography: Scale (fluid — no breakpoint jumps) ---- */
  --text-xs: clamp(0.68rem, 0.62rem + 0.2vw, 0.75rem);
  --text-sm: clamp(0.8rem, 0.72rem + 0.25vw, 0.88rem);
  --text-base: clamp(0.9rem, 0.82rem + 0.3vw, 1rem);
  --text-md: clamp(1rem, 0.9rem + 0.3vw, 1.12rem);
  --text-lg: clamp(1.2rem, 1rem + 0.8vw, 1.55rem);
  --text-xl: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
  --text-2xl: clamp(1.8rem, 1.3rem + 1.5vw, 2.6rem);
  --text-3xl: clamp(2rem, 1.4rem + 1.8vw, 2.8rem);
  --text-4xl: clamp(2.2rem, 1.5rem + 2.2vw, 3.4rem);

  /* ---- Shadows ---- */
  --shadow-sm: 0 1px 2px rgba(var(--black-rgb), 0.3);
  --shadow-md: 0 4px 12px rgba(var(--black-rgb), 0.4);
  --shadow-lg: 0 8px 24px rgba(var(--black-rgb), 0.5);
  --shadow-glow: 0 0 20px rgba(var(--accent-rgb), 0.1);

  /* ---- Border Radius ---- */
  --radius-xs: 2px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  /* Backward-compat aliases */
  --radius: var(--radius-md);

  /* ---- Transitions ---- */
  --ease-standard: 0.2s ease;
  --ease-slow: 0.3s ease;
  --ease-bounce: 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  --ease-premium: 0.9s cubic-bezier(0.16, 1, 0.3, 1);

  /* Backward-compat aliases */
  --transition: var(--ease-standard);
  --transition-slow: var(--ease-slow);

  /* ---- Layout ---- */
  --max-width: 1120px;
}

/* ------------------ RESET ------------------ */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg-body);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
}

/* Selection styling */
::selection {
  background: rgba(var(--accent-rgb), 0.3);
  color: var(--white);
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg);
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-hover);
}

/* ------------------ SKIP LINK (ACCESSIBILITY) ------------------ */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background-color: var(--black);
  color: var(--white);
  padding: 8px 12px;
  z-index: 2000;
  text-decoration: none;
  border-radius: 0 0 var(--radius-sm) 0;
}

.skip-link:focus {
  top: 10px;
}

/* ------------------ FOCUS RING (ACCESSIBILITY) ------------------ */
/* Keyboard users need to see where they are. :focus-visible means the ring
   shows for keyboard/tab navigation but not on mouse clicks, so it costs
   nothing visually for everyone else. */

a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* Gold-themed buttons get a white ring instead — a gold ring would blend
   into the button's own gold fill, border, and glow animation. */
.btn:focus-visible,
.btn-white:focus-visible,
.btn-contact-call:focus-visible,
.btn-contact-email:focus-visible {
  outline-color: var(--white);
}

/* The service-areas accordion clips its content while collapsing, so keep
   these rings tight enough that they can't get cut off at the edges. */
.seo-areas-content a:focus-visible {
  outline-offset: 1px;
}

/* Skip link animates in from off-screen; ring inside so it always shows. */
.skip-link:focus-visible {
  outline-offset: -3px;
}

/* ------------------ LAYOUT ------------------ */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-lg);
}

.section {
  padding: var(--space-4xl) 0;
}

.section.alt {
  background-color: var(--panel-alt);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position: relative;
}

.section.alt::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.025) 0%, transparent 70%);
  pointer-events: none;
}

.center {
  text-align: center;
}

/* ------------------ HEADER ------------------ */
.header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: rgba(var(--bg-body-rgb), 0.95);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.15);
  box-shadow: 0 2px 12px rgba(var(--black-rgb), 0.5), 0 1px 0 rgba(var(--accent-rgb), 0.06);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  font-family: var(--font-brand);
  font-weight: 400;
  font-size: 4.4rem;
  letter-spacing: 0.5px;
  text-decoration: none;
  background: linear-gradient(
    180deg,
    var(--brand-chrome-light) 0%,
    var(--white) 12%,
    var(--accent) 28%,
    var(--white) 45%,
    var(--brand-chrome-mid) 60%,
    var(--white) 78%,
    var(--accent) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 2px 4px rgba(var(--black-rgb), 0.7)) drop-shadow(0 0 12px rgba(var(--accent-rgb), 0.15));
  position: relative;
  overflow: hidden;
  transition: filter var(--ease-standard);
}

.brand:hover {
  filter: drop-shadow(0 2px 4px rgba(var(--black-rgb), 0.5)) drop-shadow(0 0 16px rgba(var(--accent-rgb), 0.25));
}

/* Chrome shine sweep on brand */
.brand::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(var(--white-rgb), 0.15), transparent);
  animation: chromeShine 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes chromeShine {
  0%, 100% { left: -100%; opacity: 0; }
  15% { opacity: 1; }
  50% { left: 150%; opacity: 0; }
  51%, 99% { opacity: 0; left: -100%; }
}

/* ------------------ NAV ------------------ */
.mobile-subnav {
  display: flex;
  justify-content: center;
  gap: var(--space-xs);
  padding: 0.65rem 1rem;
  background-color: rgba(var(--bg-rgb), 0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}

.mobile-subnav a {
  text-decoration: none;
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 700;
  padding: 0.45rem 0.85rem;
  border-radius: 4px;
  transition: background-color var(--ease-standard), color var(--ease-standard);
  position: relative;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.mobile-subnav a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 70%;
  height: 3px;
  background: var(--accent);
  border-radius: 0;
  transition: transform var(--ease-bounce);
  box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.4);
}

.mobile-subnav a:hover {
  background-color: rgba(var(--white-rgb), 0.05);
  color: var(--text);
}

.mobile-subnav a:hover::after {
  transform: translateX(-50%) scaleX(1);
}

.mobile-subnav a.active {
  background-color: transparent;
  color: var(--white);
  font-weight: 600;
  box-shadow: none;
}

.mobile-subnav a.active::after {
  transform: translateX(-50%) scaleX(1);
}

/* ------------------ TYPOGRAPHY ------------------ */
h1,
h2,
h3 {
  font-family: var(--font-heading);
  line-height: 1.12;
  margin-bottom: var(--space-md);
  letter-spacing: -0.03em;
  font-weight: 800;
}

h1 {
  font-size: var(--text-3xl);
}

h2 {
  font-size: var(--text-xl);
  position: relative;
  padding-bottom: 0.75rem;
}

/* Gold editorial rule under section h2s */
h2::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  background: var(--accent);
  border-radius: 2px;
  margin-top: 0.6rem;
}

/* Center the gold rule when h2 is in a centered context */
.center h2::after {
  margin-left: auto;
  margin-right: auto;
}

/* Suppress gold rule in CTA strips and inline contexts */
.area-cta-inner h2::after,
.home-cta-strip h2::after,
.svc-cta-inner h2::after,
.home-cta-strip-inner h2::after,
.reviews-header h2::after,
.error-section h2::after,
.military-honor h2::after {
  display: none;
}

h3 {
  font-size: var(--text-md);
  letter-spacing: -0.01em;
  font-weight: 700;
}

p {
  line-height: 1.65;
  max-width: 65ch;
}

/* Let paragraphs fill their container in grid/flex card contexts */
.card p,
.review-card p,
.cred-card p,
.stat-pill p,
.contact-primary-card p,
.area-cta-inner p,
.home-cta-strip p,
.svc-cta-inner p,
.home-cta-strip-inner p,
.verify-bar p,
.footer p {
  max-width: none;
}

.sub {
  color: var(--muted);
  max-width: 60ch;
  font-size: var(--text-md);
  line-height: 1.7;
}

.small {
  font-size: var(--text-base);
  color: var(--muted);
  line-height: 1.65;
}

.muted {
  color: var(--muted);
}

a {
  color: inherit;
  transition: color var(--ease-standard), opacity var(--ease-standard);
}

/* ------------------ BUTTONS ------------------ */
.btn {
  background: linear-gradient(135deg, var(--accent-dark) 0%, var(--accent) 50%, var(--accent-darker) 100%);
  color: var(--bg-body);
  padding: 0.7rem 1.3rem;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border: none;
  cursor: pointer;
  transition: transform var(--ease-standard), box-shadow var(--ease-standard), filter var(--ease-standard), background-color var(--ease-standard);
  box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.3);
  animation: btnGlow 3s ease-in-out infinite;
  text-shadow: 0 1px 0 rgba(var(--white-rgb), 0.15);
}

@keyframes btnGlow {
  0%, 100% { box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.3); }
  50% { box-shadow: 0 2px 16px rgba(var(--accent-rgb), 0.5), 0 0 24px rgba(var(--accent-rgb), 0.2); }
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.45);
  filter: brightness(1.12);
  text-decoration: none;
  animation: none;
}

.btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(var(--accent-rgb), 0.2);
}

.btn.ghost {
  background: transparent;
  color: var(--accent);
  border: 2px solid rgba(var(--accent-rgb), 0.4);
  box-shadow: none;
  animation: none;
  text-shadow: none;
}

.btn.ghost:hover {
  background-color: rgba(var(--accent-rgb), 0.08);
  border-color: rgba(var(--accent-rgb), 0.7);
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.12);
  transform: translateY(-1px);
}

.btn.ghost:active {
  transform: translateY(0);
}

.btn.large {
  font-size: var(--text-md);
  padding: 0.85rem 1.75rem;
}

/* ------------------ CTA ROW ------------------ */
.cta-row {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-top: var(--space-xl);
  align-items: center;
}

/* ------------------ HERO ------------------ */

/* ------------------ CARDS ------------------ */
.card {
  background-color: var(--panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(var(--white-rgb), 0.03);
  transition: transform var(--ease-standard), box-shadow var(--ease-standard), border-color var(--ease-standard);
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(var(--white-rgb), 0.04);
  border-color: rgba(var(--accent-rgb), 0.2);
  border-left-color: var(--accent-light);
}

.card img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-sm);
}

/* ------------------ LISTS ------------------ */
.list {
  list-style: none;
}

.list li {
  position: relative;
  padding-left: 1.35rem;
  margin-bottom: 0.65rem;
  color: var(--muted);
  font-size: var(--text-base);
  line-height: 1.55;
}

.list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 6px;
  height: 6px;
  background-color: var(--accent);
  border-radius: var(--radius-xs);
  box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.4);
}

/* ------------------ FOOTER ------------------ */
.footer {
  padding: var(--space-3xl) var(--space-lg);
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, var(--panel-alt) 0%, var(--bg) 100%);
  position: relative;
}

.footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(var(--accent-rgb), 0.2) 30%, rgba(var(--accent-rgb), 0.12) 70%, transparent 100%);
}

.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-lg);
}

.footer-copy {
  font-size: 0.88rem;
  color: var(--text);
  font-weight: 700;
  font-family: var(--font-heading);
  letter-spacing: -0.01em;
}

.footer-services {
  font-size: 0.78rem;
  color: var(--muted);
  text-align: center;
  line-height: 1.6;
  letter-spacing: 0.3px;
}

.footer-privacy {
  text-align: right;
}

.footer-privacy a {
  font-size: var(--text-sm);
  color: var(--accent);
  text-decoration: none;
  transition: color var(--ease-standard);
}

.footer-privacy a:hover {
  color: var(--accent-light);
}

/* ------------------ RESPONSIVE ------------------ */
@media (max-width: 768px) {
  .brand {
    /* Keep "M Taylor Inc" (Alex Brush) on ONE line next to the Call button.
       Alex Brush is ~85px wide per 1rem and the button holds ~155px, so the
       largest size that fits scales with screen width. This fluid size hugs
       that limit (small phones shrink, big phones stay near the original)
       and caps at the original 2.6rem. white-space:nowrap guarantees no wrap. */
    font-size: clamp(1.3rem, calc(18.7vw - 40px), 2.6rem);
    white-space: nowrap;
  }

  .section {
    padding: var(--space-3xl) 0;
  }

  .hero {
    padding: var(--space-3xl) 0 2.5rem;
  }

  .footer-inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: var(--space-sm);
  }

  .footer-privacy {
    text-align: center;
  }
}

/* ------------------ REVIEWS ------------------ */
.reviews-header {
  margin-bottom: var(--space-2xl);
}

.reviews-summary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: var(--space-sm);
  flex-wrap: wrap;
}

.reviews-stars {
  color: var(--color-star);
  font-size: 1.15rem;
  letter-spacing: 1px;
}

.reviews-score {
  font-weight: 700;
  font-size: var(--text-md);
  color: var(--text);
}

.reviews-link {
  font-size: 0.9rem;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.3);
  padding-bottom: 1px;
  transition: border-color var(--ease-standard), color var(--ease-standard);
}

.reviews-link:hover {
  border-bottom-color: var(--accent);
  color: var(--accent-light);
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-lg);
}

.review-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  transition: transform var(--ease-standard), box-shadow var(--ease-standard), border-color var(--ease-standard);
}

.review-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(var(--black-rgb), 0.4), 0 0 16px rgba(var(--accent-rgb), 0.08);
}

.review-card .small {
  font-style: italic;
  line-height: 1.7;
}

.review-meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.review-stars {
  color: var(--color-star);
  font-size: 0.85rem;
  letter-spacing: 1px;
  flex-shrink: 0;
}

.review-author {
  font-size: 0.9rem;
  color: var(--text);
}

.review-badge {
  font-size: var(--text-xs);
  color: var(--accent);
  background-color: rgba(var(--accent-rgb), 0.06);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: 3px;
  padding: 0.15rem 0.55rem;
  white-space: nowrap;
  font-weight: 600;
  letter-spacing: 0.3px;
}

/* ------------------ GALLERY ------------------ */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background-color: var(--panel);
}

.gallery-item img,
.gallery img {
  width: 100%;
  height: 340px;
  object-fit: cover;
  /* anchor crop to the photo's bottom-right so the watermark stays whole */
  object-position: 100% 100%;
  display: block;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background-color: var(--panel);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), filter 0.5s ease;
  cursor: default;
  filter: brightness(0.9) saturate(0.95);
}

.gallery-item img {
  border: none;
  border-radius: 0;
  height: 100%;
  min-height: 340px;
}

.gallery-item:hover img,
.gallery img:hover {
  transform: scale(1.03);
  filter: brightness(1.05) saturate(1.1);
}

.gallery-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2.5rem var(--space-lg) 1rem;
  background: linear-gradient(180deg, transparent 0%, rgba(var(--black-rgb), 0.85) 100%);
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.2px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.gallery-item:hover .gallery-caption {
  opacity: 1;
  transform: translateY(0);
}

.gallery-item:hover {
  border-color: rgba(var(--accent-rgb), 0.25);
  box-shadow: 0 8px 24px rgba(var(--black-rgb), 0.4);
}

@media (max-width: 768px) {
  .gallery {
    grid-template-columns: 1fr;
  }

  .gallery img,
  .gallery-item img {
    height: 240px;
    min-height: 240px;
  }

  .gallery-caption {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 640px) {
  .reviews-grid {
    grid-template-columns: 1fr;
  }
}

/* =====================================================
   PREMIUM VISUAL EFFECTS
   ===================================================== */

/* ---------- Scroll-triggered fade-in animations ---------- */
.fade-in {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--ease-premium),
              transform var(--ease-premium);
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-in-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity var(--ease-premium),
              transform var(--ease-premium);
}

.fade-in-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.fade-in-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity var(--ease-premium),
              transform var(--ease-premium);
}

.fade-in-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Staggered children */
.stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.stagger.visible > *:nth-child(1) { transition-delay: 0s; }
.stagger.visible > *:nth-child(2) { transition-delay: 0.08s; }
.stagger.visible > *:nth-child(3) { transition-delay: 0.16s; }
.stagger.visible > *:nth-child(4) { transition-delay: 0.24s; }
.stagger.visible > *:nth-child(5) { transition-delay: 0.32s; }
.stagger.visible > *:nth-child(6) { transition-delay: 0.4s; }
.stagger.visible > *:nth-child(7) { transition-delay: 0.48s; }
.stagger.visible > *:nth-child(8) { transition-delay: 0.56s; }
.stagger.visible > *:nth-child(9) { transition-delay: 0.64s; }
.stagger.visible > *:nth-child(10) { transition-delay: 0.72s; }

.stagger.visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Section labels ---------- */
.svc-label {
  background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent) 50%, var(--accent-darker) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---------- Animated glow line separator ---------- */
.glow-divider {
  height: 1px;
  border: none;
  background: linear-gradient(90deg, transparent 0%, rgba(var(--accent-rgb), 0.35) 50%, transparent 100%);
  position: relative;
  overflow: visible;
}

.glow-divider::after {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 60px;
  height: 5px;
  border-radius: 3px;
  background: var(--accent);
  box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.5), 0 0 30px rgba(var(--accent-rgb), 0.2);
  animation: glowSlide 4s ease-in-out infinite;
}

@keyframes glowSlide {
  0%, 100% { left: 0; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { left: calc(100% - 60px); opacity: 0; }
}

/* ---------- Card shimmer on hover ---------- */
.card {
  position: relative;
  overflow: hidden;
}

.card::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(var(--white-rgb), 0.03), transparent);
  transition: left 0.6s ease;
  pointer-events: none;
}

.card:hover::after {
  left: 100%;
}

/* ---------- Chrome brand dot ---------- */

/* ---------- Review card accent border ---------- */
.review-card {
  position: relative;
  border-left: 3px solid var(--accent);
}

.review-card:hover {
  border-left-color: var(--accent-light);
}

/* ---------- Smooth gradient background on hero sections ---------- */
.home-hero,
.svc-hero {
  background: linear-gradient(
    180deg,
    rgba(var(--accent-rgb), 0.03) 0%,
    transparent 40%,
    transparent 60%,
    rgba(var(--accent-rgb), 0.015) 100%
  );
}

/* ---------- Button ripple effect ---------- */
.btn {
  position: relative;
  overflow: hidden;
}

.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(var(--white-rgb), 0.2) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.btn:hover::after {
  opacity: 1;
}

/* ---------- Floating particles background (applied via JS) ---------- */
.particles-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}

.particle {
  position: absolute;
  width: 2px;
  height: 2px;
  background: rgba(var(--accent-rgb), 0.25);
  border-radius: 50%;
  animation: float linear infinite;
}

@keyframes float {
  0% {
    transform: translateY(100vh) scale(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-10vh) scale(1);
    opacity: 0;
  }
}

/* ------------------ LOCATION / AREA PAGES ------------------ */

/* --- Area hero with diagonal line texture overlay --- */
.area-hero {
  padding: 4.5rem 0 3.5rem;
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

.area-hero::before {
  content: "";
  position: absolute;
  top: -80px;
  right: -80px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.05) 0%, transparent 70%);
  pointer-events: none;
}

/* [5] Diagonal line texture — industrial depth without an image */
.area-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 10px,
    rgba(var(--accent-rgb), 0.025) 10px,
    rgba(var(--accent-rgb), 0.025) 11px
  );
  pointer-events: none;
  z-index: 0;
}

.area-hero > .container {
  position: relative;
  z-index: 1;
}

.area-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.6rem;
  display: block;
}

.area-hero h1 {
  font-size: var(--text-3xl);
  line-height: 1.15;
  letter-spacing: -0.3px;
  margin-bottom: 0.85rem;
}

.area-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

/* [1] Badge components — gold accent bar, depth, hover lift */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.04) 0%, rgba(var(--white-rgb), 0.03) 100%);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.85rem;
  transition: transform var(--ease-standard), box-shadow var(--ease-standard), border-color var(--ease-standard), color var(--ease-standard);
}

.badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(var(--black-rgb), 0.3), 0 0 10px rgba(var(--accent-rgb), 0.1);
  border-color: rgba(var(--accent-rgb), 0.3);
  border-left-color: var(--accent-light);
  color: var(--text);
}

.badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

.area-section {
  padding: var(--space-4xl) 0;
}

/* [4] Section dividers — gradient gold rule replaces flat borders */
.area-section-alt {
  padding: var(--space-4xl) 0;
  background: var(--panel-alt);
  border-top: none;
  border-bottom: none;
  position: relative;
}

.area-section-alt::before,
.area-section-alt::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(var(--accent-rgb), 0.2) 20%, rgba(var(--accent-rgb), 0.3) 50%, rgba(var(--accent-rgb), 0.2) 80%, transparent 100%);
  pointer-events: none;
}

.area-section-alt::before { top: 0; }
.area-section-alt::after { bottom: 0; }

.area-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--space-3xl);
  align-items: center;
}

.area-grid h2 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-md);
}

/* --- FAQ section --- */
/*
 * [2] FAQ: Currently uses div.faq-item > p.faq-q + p.faq-a
 *     across all 62 location pages. For animated open/close,
 *     the markup needs to change to:
 *
 *       <details class="faq-item">
 *         <summary class="faq-q">Question text?</summary>
 *         <p class="faq-a">Answer text.</p>
 *       </details>
 *
 *     The CSS below supports BOTH markups:
 *     - Existing div-based: displays as-is (no regression)
 *     - New details/summary: animates open with fade + slide
 */
.faq-list {
  display: flex;
  flex-direction: column;
}

.faq-item {
  border-bottom: 1px solid var(--border);
  padding: var(--space-xl) 0;
}

.faq-item:first-child {
  border-top: 1px solid var(--border);
}

.faq-q {
  font-weight: 700;
  color: var(--text);
  font-size: var(--text-md);
  margin-bottom: 0.4rem;
}

.faq-a {
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.65;
}

/* details/summary FAQ animation (activates when markup is migrated) */
details.faq-item {
  cursor: default;
}

details.faq-item > summary.faq-q {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: 0;
  transition: color var(--ease-standard);
}

details.faq-item > summary.faq-q::-webkit-details-marker { display: none; }
details.faq-item > summary.faq-q::marker { content: ""; }

/* Chevron indicator */
details.faq-item > summary.faq-q::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease;
}

details.faq-item[open] > summary.faq-q::after {
  transform: rotate(-135deg);
  border-color: var(--accent);
}

details.faq-item > summary.faq-q:hover {
  color: var(--white);
}

/* Answer reveal animation */
details.faq-item > .faq-a {
  overflow: hidden;
}

details.faq-item[open] > .faq-a {
  animation: faqReveal 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes faqReveal {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.area-section p + p,
.area-section-alt p + p {
  margin-top: 0.85rem;
}

.area-hero .sub {
  font-size: var(--text-md);
  line-height: 1.7;
  max-width: 60ch;
  color: var(--muted);
}

/* [3] Cities grid — gold underline slide-in on hover */
.cities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-sm);
  margin-top: 1rem;
  list-style: none;
}

.cities-grid li {
  position: relative;
  padding-bottom: 3px;
  transition: color var(--ease-standard);
}

.cities-grid li::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-dark) 100%);
  border-radius: 1px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.cities-grid li:hover {
  color: var(--white);
}

.cities-grid li:hover::after {
  transform: scaleX(1);
}

.area-cta-strip {
  background: linear-gradient(135deg, var(--bg-cta-dark) 0%, var(--bg-cta-mid) 40%, var(--bg-cta-dark) 100%);
  border-top: 1px solid rgba(var(--accent-rgb), 0.2);
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.2);
  padding: var(--space-4xl) 0;
  position: relative;
  overflow: hidden;
}

.area-cta-strip::before {
  content: "";
  position: absolute;
  top: -100px;
  right: -100px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.06) 0%, transparent 60%);
  pointer-events: none;
}

.area-cta-strip::after {
  content: "";
  position: absolute;
  bottom: -80px;
  left: -60px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.04) 0%, transparent 60%);
  pointer-events: none;
}

.area-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xl);
  flex-wrap: wrap;
}

.area-cta-inner h2 {
  color: var(--white);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  margin: 0;
  line-height: 1.2;
  font-family: var(--font-heading);
}

.area-cta-inner p {
  color: rgba(var(--white-rgb), 0.75);
  font-size: 1rem;
  margin-top: 0.4rem;
}

.btn-white {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
  color: var(--bg-body);
  padding: 0.8rem 1.75rem;
  border-radius: var(--radius-sm);
  font-weight: 700;
  text-decoration: none;
  font-size: 1rem;
  white-space: nowrap;
  display: inline-block;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(var(--black-rgb), 0.2);
  transition: transform var(--ease-standard), box-shadow var(--ease-standard);
}

.btn-white:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(var(--black-rgb), 0.3), 0 0 20px rgba(var(--white-rgb), 0.1);
}

.btn-white:active {
  transform: translateY(0);
}

@media (max-width: 768px) {
  .area-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .area-cta-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .area-section,
  .area-section-alt {
    padding: var(--space-3xl) 0;
  }

  .area-hero {
    padding: var(--space-3xl) 0 2.5rem;
  }
}

/* ---------- Noise texture overlay (industrial grain) ---------- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 128px 128px;
}

/* ---------- Enhanced review cards ---------- */
.review-card {
  background: linear-gradient(135deg, rgba(var(--panel-rgb), 0.6) 0%, rgba(var(--panel-alt-rgb), 0.4) 100%);
  border: 1px solid rgba(var(--border-rgb), 0.5);
  border-radius: var(--radius-md);
  padding: var(--space-xl) var(--space-xl) var(--space-lg) var(--space-xl);
  position: relative;
}

.review-card::after {
  content: "\201C";
  position: absolute;
  top: -0.1rem;
  right: var(--space-lg);
  font-size: 4.5rem;
  font-family: Georgia, serif;
  line-height: 1;
  color: rgba(var(--accent-rgb), 0.08);
  pointer-events: none;
}

.review-card:hover {
  border-color: rgba(var(--accent-rgb), 0.25);
  background: linear-gradient(135deg, rgba(var(--panel-rgb), 0.8) 0%, rgba(var(--panel-alt-rgb), 0.6) 100%);
}

/* Review avatar initials */
.review-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8b6d2e 0%, #5a4520 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--white);
  flex-shrink: 0;
  letter-spacing: 0.5px;
}

/* ---------- Enhanced stat pills ---------- */
.stat-pill-value {
  font-size: clamp(2.2rem, 1.6rem + 2vw, 3rem);
  font-family: var(--font-heading);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, var(--white) 0%, var(--accent) 60%, var(--accent-darker) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---------- SEO service area accordion ---------- */
.seo-areas {
  padding: var(--space-xl) 0;
  border-top: 1px solid var(--border);
  opacity: 0.5;
  transition: opacity var(--ease-slow);
}

.seo-areas:hover {
  opacity: 0.8;
}

.seo-areas-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0;
  width: 100%;
  font-family: inherit;
}

.seo-areas-toggle:hover {
  color: var(--text);
}

.seo-areas-chevron {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--ease-bounce);
  margin-left: var(--space-sm);
  flex-shrink: 0;
}

.seo-areas-toggle[aria-expanded="true"] .seo-areas-chevron {
  transform: rotate(-135deg);
}

.seo-areas-content {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem var(--space-xl);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1), padding 0.4s ease;
  padding-top: 0;
}

.seo-areas-content.open {
  max-height: 2000px;
  padding-top: var(--space-lg);
}

.seo-region-title {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.35rem;
  display: block;
}

.seo-areas-content a {
  display: block;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.78rem;
  line-height: 1.9;
  transition: color 0.15s ease, padding-left 0.15s ease;
}

.seo-areas-content a:hover {
  color: var(--accent);
  padding-left: 4px;
}

/* ---------- Gradient accent text ---------- */
.text-gradient {
  background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent) 40%, var(--accent-dark) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---------- Service section icon ---------- */
.svc-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.1) 0%, rgba(var(--accent-rgb), 0.03) 100%);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  margin-bottom: var(--space-md);
  flex-shrink: 0;
}

.svc-icon::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.5);
}

/* ---------- Section glow dividers ---------- */
.glow-divider-subtle {
  height: 1px;
  border: none;
  background: linear-gradient(90deg, transparent 0%, rgba(var(--accent-rgb), 0.18) 20%, rgba(var(--accent-rgb), 0.25) 50%, rgba(var(--accent-rgb), 0.18) 80%, transparent 100%);
  margin: 0;
}

/* =====================================================
   HOMEPAGE
   ===================================================== */

/* HERO — full-bleed cinematic photo */
.home-hero {
  position: relative;
  overflow: hidden;
  min-height: clamp(540px, 74vh, 720px);
  display: flex;
  align-items: center;
  background: var(--bg-body);
}

.home-hero-bg {
  position: absolute;
  inset: 0;
}

.home-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 100%;
  display: block;
}

/* Scrim: darken the right side under the text, fade bottom into the trust bar */
.home-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(270deg,
      rgba(var(--bg-body-rgb), 0.93) 0%,
      rgba(var(--bg-body-rgb), 0.78) 34%,
      rgba(var(--bg-body-rgb), 0.42) 58%,
      rgba(var(--bg-body-rgb), 0.08) 78%,
      rgba(var(--bg-body-rgb), 0.25) 100%),
    linear-gradient(180deg,
      rgba(var(--bg-body-rgb), 0.35) 0%,
      transparent 25%,
      transparent 70%,
      rgba(var(--bg-body-rgb), 0.92) 100%);
}

.home-hero > .container {
  position: relative;
  width: 100%;
}

.home-hero-content {
  max-width: 600px;
  margin-left: auto;
  padding: var(--space-4xl) 0 var(--space-3xl);
}

/* Scroll indicator chevron */
.home-hero::after {
  content: "";
  position: absolute;
  bottom: 1.1rem;
  left: 50%;
  width: 14px;
  height: 14px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: translateX(-50%) rotate(45deg);
  opacity: 0;
  animation: scrollFadeIn 0.6s ease 1s forwards, scrollBounce 2s ease-in-out 1.6s infinite;
}

@keyframes scrollFadeIn {
  to { opacity: 0.55; }
}

@keyframes scrollBounce {
  0%, 100% { transform: translateX(-50%) rotate(45deg) translateY(0); }
  50% { transform: translateX(-50%) rotate(45deg) translateY(8px); }
}

/* CTA shimmer sweep on hover */
@keyframes heroShimmer {
  0% { left: -100%; }
  100% { left: 200%; }
}

.home-hero .btn:not(.ghost)::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(var(--white-rgb), 0.3), transparent);
  pointer-events: none;
  z-index: 1;
}

.home-hero .btn:not(.ghost):hover::before {
  animation: heroShimmer 0.65s ease forwards;
}

.home-hero-content h1 {
  font-family: var(--font-heading);
  font-size: clamp(2.6rem, 5.2vw, 4.1rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-lg);
  color: var(--white);
  text-shadow: 0 2px 24px rgba(var(--black-rgb), 0.5);
}

.home-hero-content .sub {
  font-size: var(--text-md);
  line-height: 1.7;
  margin-bottom: 0;
  letter-spacing: 0.02em;
  opacity: 0.9;
  text-shadow: 0 1px 12px rgba(var(--black-rgb), 0.5);
}

.home-hero .section-label {
  letter-spacing: 0.12em;
  opacity: 0.9;
}

.home-hero .btn.ghost {
  background: rgba(var(--bg-rgb), 0.5);
}

/* Door decal — mirrors the lettering on the truck door */
.door-decal {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  margin-top: var(--space-2xl);
  padding: 0.65rem 1.5rem 0.75rem;
  border: 1px solid rgba(var(--white-rgb), 0.28);
  border-radius: var(--radius-sm);
  background: rgba(var(--bg-rgb), 0.4);
  box-shadow: inset 0 0 0 3px rgba(var(--bg-rgb), 0.3);
}

.door-decal-brand {
  font-family: var(--font-brand);
  font-size: 1.4rem;
  line-height: 1.1;
  color: var(--accent-light);
}

.door-decal-nums {
  margin-top: 0.35rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--white-rgb), 0.85);
}

/* Real loads film strip */
.load-strip {
  padding: var(--space-2xl) 0 var(--space-lg);
  background: var(--bg-body);
  border-top: 1px solid rgba(var(--accent-rgb), 0.08);
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.08);
  overflow: hidden;
}

.load-strip-link {
  display: block;
}

.load-strip-track {
  display: flex;
  width: max-content;
  animation: loadStripScroll 60s linear infinite;
}

.load-strip-link:hover .load-strip-track,
.load-strip-link:focus-visible .load-strip-track {
  animation-play-state: paused;
}

.load-strip-track img {
  height: 168px;
  width: auto;
  margin-right: var(--space-md);
  border-radius: var(--radius-md);
  border: 1px solid rgba(var(--accent-rgb), 0.15);
  display: block;
}

@keyframes loadStripScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.load-strip-caption {
  text-align: center;
  margin-top: var(--space-lg);
}

.load-strip-caption a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.3px;
}

.load-strip-caption a:hover { text-decoration: underline; }

/* Two-col hero grid — no longer on the homepage, still used by
   location pages (.area-hero) and contact hero glow */
@keyframes heroGlow {
  0% { opacity: 0.6; transform: scale(1); }
  100% { opacity: 1; transform: scale(1.1); }
}

.home-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--space-3xl);
  align-items: center;
  position: relative;
}

/* Scroll indicator chevron (location page heroes) */
.home-hero-grid::before {
  content: "";
  position: absolute;
  bottom: -2.5rem;
  left: 50%;
  width: 14px;
  height: 14px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: translateX(-50%) rotate(45deg);
  opacity: 0;
  animation: scrollFadeIn 0.6s ease 1s forwards, scrollBounce 2s ease-in-out 1.6s infinite;
}

.home-hero-text h1 {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-lg);
  color: var(--white);
}

.home-hero-text .sub {
  font-size: var(--text-md);
  line-height: 1.7;
  margin-bottom: 0;
  letter-spacing: 0.02em;
  opacity: 0.78;
}

.home-hero-image {
  position: relative;
}

.home-hero-image::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.15) 0%, transparent 50%, rgba(var(--accent-rgb), 0.1) 100%);
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.home-hero-image:hover::before {
  opacity: 1;
}

.home-hero-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
  box-shadow: inset 0 0 60px rgba(var(--black-rgb), 0.4);
  background: linear-gradient(180deg, transparent 50%, rgba(var(--bg-rgb), 0.4) 100%);
  pointer-events: none;
}

.home-hero-image img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  border: 1px solid rgba(var(--accent-rgb), 0.15);
  display: block;
  box-shadow: 0 12px 40px rgba(var(--black-rgb), 0.5), 0 0 30px rgba(var(--accent-rgb), 0.08);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
}

.home-hero-image:hover img {
  transform: scale(1.01);
  box-shadow: 0 16px 48px rgba(var(--black-rgb), 0.6), 0 0 40px rgba(var(--accent-rgb), 0.12);
}

/* Trust bar */
.trust-bar {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.05) 0%, rgba(var(--accent-rgb), 0.01) 100%);
  padding: 1.15rem 0;
  overflow: hidden;
}

.trust-bar-inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) 0.6rem;
  align-items: center;
  justify-content: center;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  background: rgba(var(--accent-rgb), 0.03);
  border: 1px solid rgba(var(--accent-rgb), 0.12);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-xs);
  padding: 0.45rem 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: border-color var(--ease-standard), box-shadow var(--ease-standard), background var(--ease-standard);
}

.trust-item:hover {
  border-color: rgba(var(--accent-rgb), 0.3);
  border-left-color: var(--accent-light);
  background: rgba(var(--accent-rgb), 0.06);
}

.trust-dot {
  width: 5px; height: 5px;
  border-radius: 1px;
  background: var(--accent);
  flex-shrink: 0;
}

/* SECTIONS */
.home-section {
  padding: 3.5rem 0;
  background: var(--bg-body);
}

.home-section-alt {
  padding: 3.5rem 0;
  background: var(--bg-section-alt);
  border-top: 1px solid rgba(var(--accent-rgb), 0.08);
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.08);
  position: relative;
}

.home-section-alt::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.025) 0%, transparent 70%);
  pointer-events: none;
}

/* Two-column layout */
.home-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: center;
}

.home-two-col-wide {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--space-3xl);
  align-items: center;
}

/* Stat pills */
.stat-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.stat-pill {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.06) 0%, rgba(var(--accent-rgb), 0.02) 100%);
  border: 1px solid rgba(var(--accent-rgb), 0.18);
  border-radius: var(--radius-sm);
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  transition: border-color var(--ease-standard), box-shadow var(--ease-standard), transform var(--ease-standard);
}

.stat-pill:hover {
  border-color: rgba(var(--accent-rgb), 0.4);
  box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.12), 0 4px 12px rgba(var(--black-rgb), 0.2);
  transform: translateY(-2px);
}

.stat-pill-label {
  font-size: var(--text-xs);
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Section label */
.section-label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.65rem;
  display: block;
  background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent) 50%, var(--accent-darker) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Specialty list */
.specialty-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem var(--space-lg);
  margin-top: var(--space-lg);
}

.specialty-list li {
  position: relative;
  padding-left: var(--space-lg);
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.55;
}

.specialty-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.5rem;
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: var(--radius-xs);
  box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.4);
}

/* CTA bottom strip */
.home-cta-strip {
  background: linear-gradient(135deg, var(--bg-cta-dark) 0%, var(--bg-cta-mid) 40%, var(--bg-cta-dark) 100%);
  border-top: 1px solid rgba(var(--accent-rgb), 0.2);
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.2);
  padding: var(--space-4xl) 0;
  position: relative;
  overflow: hidden;
}

.home-cta-strip::before {
  content: "";
  position: absolute;
  top: -100px; right: -100px;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.06) 0%, transparent 60%);
  pointer-events: none;
}

.home-cta-strip::after {
  content: "";
  position: absolute;
  bottom: -80px; left: -60px;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.04) 0%, transparent 60%);
  pointer-events: none;
}

.home-cta-strip-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xl);
  flex-wrap: wrap;
}

.home-cta-strip h2 {
  color: var(--white);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  margin: 0;
  line-height: 1.2;
  font-family: var(--font-heading);
}

.home-cta-strip p {
  color: rgba(var(--white-rgb), 0.75);
  font-size: 1rem;
  margin-top: 0.4rem;
}

/* Giant tap-to-call number */
.cta-call {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-md);
}

.cta-phone {
  font-family: var(--font-heading);
  white-space: nowrap;
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--white);
  text-decoration: none;
  transition: color var(--ease-standard);
}

.cta-phone:hover,
.cta-phone:focus-visible {
  color: var(--accent-light);
}

/* Military honor section */
.military-honor {
  background: var(--bg-body);
  border-top: 1px solid rgba(var(--accent-rgb), 0.08);
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.08);
}

.military-honor-flag {
  position: absolute;
  inset: 0;
  background: url('/images/american-flag-for-american-trucking-company.webp') center/cover no-repeat;
  filter: brightness(0.7);
  opacity: 0.65;
}

.military-branches {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: center;
  gap: var(--space-md);
}

.military-branch {
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-xs);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  padding: var(--space-sm) 1rem;
  background: rgba(var(--accent-rgb), 0.03);
}

/* Reviews mobile link */
.reviews-mobile-link { display: none; }

.reviews-mobile-link a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.3px;
}

.reviews-mobile-link a:hover { text-decoration: underline; }

/* Homepage mobile */
@media (max-width: 768px) {
  .home-hero { min-height: min(78vh, 640px); }

  .home-hero-bg img { object-position: 46% 100%; }

  .home-hero-bg::after {
    background:
      linear-gradient(180deg,
        rgba(var(--bg-body-rgb), 0.68) 0%,
        rgba(var(--bg-body-rgb), 0.52) 30%,
        rgba(var(--bg-body-rgb), 0.72) 62%,
        rgba(var(--bg-body-rgb), 0.96) 100%);
  }

  .home-hero-content {
    max-width: 100%;
    padding: var(--space-3xl) 0 var(--space-2xl);
  }

  .load-strip-track img { height: 128px; }

  .cta-call { align-items: flex-start; }

  .home-hero-grid,
  .home-two-col,
  .home-two-col-wide {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .stat-row { grid-template-columns: 1fr 1fr; }

  .specialty-list { grid-template-columns: 1fr; }

  .home-cta-strip-inner { flex-direction: column; align-items: flex-start; }

  .trust-bar-inner { justify-content: flex-start; gap: 0.4rem var(--space-sm); }

  .review-desktop { display: none; }
  .reviews-mobile-link { display: block; text-align: center; margin-top: var(--space-xl); }

  .home-hero::after { display: none; }
  .home-hero-grid::before { display: none; }
}

@media (max-width: 480px) {
  .stat-row { grid-template-columns: 1fr; }
}

/* =====================================================
   SERVICES PAGE
   ===================================================== */

.svc-hero {
  padding: var(--space-4xl) 0 var(--space-3xl);
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

.svc-hero::before {
  content: "";
  position: absolute;
  top: -80px; right: -80px;
  width: 450px; height: 450px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.05) 0%, transparent 65%);
  pointer-events: none;
}

.svc-hero h1 {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 0.85rem;
}

/* Service sections */
.svc-section {
  padding: 3.5rem 0;
}

.svc-section-alt {
  padding: 3.5rem 0;
  background: var(--panel-alt);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position: relative;
}

.svc-section-alt::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.02) 0%, transparent 70%);
  pointer-events: none;
}

.svc-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--space-3xl);
  align-items: center;
}

.svc-grid h2 {
  font-size: var(--text-lg);
  margin-bottom: 0.65rem;
}

/* Services FAQ enhancements (scoped to svc sections) */
.svc-section .faq-item,
.svc-section-alt .faq-item {
  transition: background-color var(--ease-standard);
}

.svc-section .faq-item:first-child,
.svc-section-alt .faq-item:first-child {
  border-top: 1px solid var(--border);
}

.svc-section .faq-item:hover,
.svc-section-alt .faq-item:hover {
  background-color: rgba(var(--accent-rgb), 0.02);
}

.svc-section .faq-q,
.svc-section-alt .faq-q {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.svc-section .faq-q::before,
.svc-section-alt .faq-q::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.4);
}

.svc-section .faq-a,
.svc-section-alt .faq-a {
  padding-left: var(--space-md);
}

/* CTA strip */
.svc-cta-strip {
  background: linear-gradient(135deg, var(--bg-cta-dark) 0%, var(--bg-cta-mid) 40%, var(--bg-cta-dark) 100%);
  border-top: 1px solid rgba(var(--accent-rgb), 0.2);
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.2);
  padding: var(--space-3xl) 0;
  position: relative;
  overflow: hidden;
}

.svc-cta-strip::before {
  content: "";
  position: absolute;
  top: -80px; right: -80px;
  width: 350px; height: 350px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.04) 0%, transparent 60%);
  pointer-events: none;
}

.svc-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xl);
  flex-wrap: wrap;
}

.svc-cta-inner h2 {
  color: var(--white);
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  margin: 0;
}

.svc-cta-inner p {
  color: rgba(var(--white-rgb), 0.7);
  font-size: 0.9rem;
  margin-top: var(--space-xs);
}

/* Services mobile */
@media (max-width: 768px) {
  .svc-hero { padding: var(--space-3xl) 0 var(--space-2xl); }

  .svc-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .svc-cta-inner { flex-direction: column; align-items: flex-start; }
}

/* =====================================================
   CONTACT PAGE
   ===================================================== */

.contact-hero {
  padding: 4.5rem 0 3.5rem;
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

.contact-hero::before {
  content: "";
  position: absolute;
  top: -80px;
  right: -100px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.06) 0%, transparent 65%);
  pointer-events: none;
  animation: heroGlow 8s ease-in-out infinite alternate;
}

.contact-hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 800;
  line-height: 1.08;
  margin-bottom: 1rem;
  letter-spacing: -0.03em;
}

.contact-hero h1 span {
  background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent) 40%, var(--accent-dark) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 1.75rem;
}

/* Primary call card */
.contact-primary-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: box-shadow var(--ease-standard);
}

.contact-primary-card:hover {
  box-shadow: var(--shadow-lg), var(--shadow-glow);
}

.contact-primary-card-top {
  background: linear-gradient(135deg, var(--bg-cta-dark) 0%, var(--bg-cta-mid) 50%, var(--bg-cta-dark) 100%);
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.15);
  padding: 1.75rem 1.75rem var(--space-xl);
  position: relative;
  overflow: hidden;
}

.contact-primary-card-top::after {
  content: "";
  position: absolute;
  top: -40px; right: -40px;
  width: 160px; height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--white-rgb), 0.08) 0%, transparent 60%);
  pointer-events: none;
}

.contact-primary-card-top .card-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(var(--white-rgb), 0.65);
  margin-bottom: var(--space-sm);
}

.contact-primary-card-top .card-phone {
  font-size: clamp(1.6rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.03em;
  text-decoration: none;
  display: block;
  line-height: 1.1;
  transition: opacity var(--ease-standard);
}

.contact-primary-card-top .card-phone:hover {
  opacity: 0.9;
}

.contact-primary-card-top .card-sub {
  font-size: 0.85rem;
  color: rgba(var(--white-rgb), 0.6);
  margin-top: 0.35rem;
}

.contact-primary-card-bottom {
  padding: var(--space-xl) 1.75rem;
}

.contact-action-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.btn-contact-call {
  background: linear-gradient(135deg, var(--accent-dark) 0%, var(--accent) 50%, var(--accent-darker) 100%);
  color: var(--bg-body);
  border: none;
  border-radius: var(--radius-sm);
  padding: 0.9rem var(--space-lg);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.3);
  transition: transform var(--ease-standard), box-shadow var(--ease-standard), filter var(--ease-standard);
}

.btn-contact-call:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.45);
}

.btn-contact-call:active { transform: translateY(0); }

.btn-contact-email {
  background: transparent;
  color: var(--text);
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.9rem var(--space-lg);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  transition: border-color var(--ease-standard), background var(--ease-standard), transform var(--ease-standard);
}

.btn-contact-email:hover {
  border-color: rgba(var(--accent-rgb), 0.5);
  background: rgba(var(--accent-rgb), 0.06);
  transform: translateY(-1px);
}

.btn-contact-email:active { transform: translateY(0); }

.contact-card-divider {
  height: 1px;
  background: var(--border);
  margin: var(--space-lg) 0;
}

.contact-meta-row {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.contact-meta-item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.85rem;
}

.contact-meta-item .meta-label {
  color: var(--muted);
  min-width: 70px;
  flex-shrink: 0;
  font-size: 0.8rem;
}

.contact-meta-item .meta-value {
  color: var(--text);
  font-weight: 500;
}

.contact-meta-item a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--ease-standard);
}

.contact-meta-item a:hover { color: var(--accent-light); }

.social-row {
  display: flex;
  gap: 0.6rem;
  margin-top: var(--space-xs);
}

.social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: rgba(var(--white-rgb), 0.04);
  border: 1px solid var(--border);
  transition: all var(--ease-standard);
}

.social-btn:hover {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.1);
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.15);
  transform: translateY(-1px);
}

.social-btn img {
  width: 16px;
  height: 16px;
  opacity: 0.7;
  transition: opacity var(--ease-standard);
}

.social-btn:hover img { opacity: 1; }

/* Credentials / trust grid */
.cred-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
  margin-top: var(--space-xl);
}

.cred-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
  padding: var(--space-lg) 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  transition: border-color var(--ease-standard), box-shadow var(--ease-standard), transform var(--ease-standard);
}

.cred-card:hover {
  border-color: rgba(var(--accent-rgb), 0.3);
  border-left-color: var(--accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.cred-card-label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.cred-card-value {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
}

.cred-card-sub {
  font-size: var(--text-sm);
  color: var(--muted);
  line-height: 1.55;
}

/* What to have ready */
.load-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.85rem;
  margin-top: var(--space-lg);
}

.load-info-item {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.55;
}

.load-info-item::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--radius-xs);
  background: var(--accent);
  flex-shrink: 0;
  margin-top: 0.45rem;
  box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.4);
}

/* Service area strip */
.contact-area-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: var(--space-lg);
}

.contact-area-tag {
  font-size: var(--text-sm);
  color: var(--muted);
  background: rgba(var(--white-rgb), 0.03);
  border: 1px solid rgba(var(--white-rgb), 0.06);
  border-radius: var(--radius-md);
  padding: 0.35rem var(--space-md);
  transition: border-color var(--ease-standard), color var(--ease-standard);
}

.contact-area-tag:hover {
  border-color: rgba(var(--accent-rgb), 0.3);
  color: var(--text);
}

/* FMCSA verification bar */
.verify-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  background: rgba(var(--accent-rgb), 0.04);
  border: 1px solid rgba(var(--accent-rgb), 0.15);
  border-radius: var(--radius-md);
  padding: 1.15rem var(--space-xl);
  margin-top: var(--space-xl);
  position: relative;
}

.verify-bar::before {
  content: "\2713";
  position: absolute;
  top: -8px;
  left: 16px;
  background: var(--accent);
  color: var(--bg-body);
  font-size: 0.65rem;
  font-weight: 700;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(var(--accent-rgb), 0.3);
}

.verify-bar-text {
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.5;
}

.verify-bar-text strong {
  color: var(--text);
  font-weight: 700;
}

.verify-bar a {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.9rem;
  white-space: nowrap;
  transition: all var(--ease-standard);
}

.verify-bar a:hover {
  background: var(--accent);
  color: var(--bg-body);
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.3);
}

/* Contact desktop layout */
@media (min-width: 769px) {
  .contact-main-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--space-3xl);
    align-items: flex-start;
  }

  .contact-right-col {
    position: sticky;
    top: 80px;
  }

  .cred-grid {
    grid-template-columns: 1fr 1fr;
  }

  .load-info-grid {
    grid-template-columns: 1fr 1fr;
  }

  .contact-hero-inner {
    max-width: 640px;
  }
}

/* Contact mobile */
@media (max-width: 768px) {
  .contact-hero { padding: 3.5rem 0 2.5rem; }

  .contact-main-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl);
  }

  .contact-primary-card-top { padding: 1.4rem; }
  .contact-primary-card-bottom { padding: var(--space-lg) 1.4rem; }
  .cred-grid { grid-template-columns: 1fr 1fr; }
}

/* =====================================================
   404 PAGE
   ===================================================== */

.error-section {
  padding: 8rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.error-section::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37,108,240,0.05) 0%, transparent 65%);
  pointer-events: none;
}

.error-section h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 1rem;
  letter-spacing: -0.03em;
}

.error-section p {
  color: var(--muted);
  max-width: 480px;
  margin: 0 auto var(--space-2xl);
  font-size: var(--text-md);
  line-height: 1.7;
}

/* =====================================================
   CSS-ONLY MOTION — prefers-reduced-motion gate
   All @keyframes-driven animations live here.
   Users with motion sensitivity see zero animation.
   ===================================================== */

@media (prefers-reduced-motion: no-preference) {

  /* [5] Page-load fade-in on <main> */
  main {
    animation: mainFadeIn 400ms ease both;
  }

  @keyframes mainFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* [3] Stat numbers & credential badges — staggered drift-up on load */
  .stat-pill,
  .cred-card,
  .badge {
    animation: driftUp 600ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  @keyframes driftUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Stagger each item by 100ms */
  .stat-pill:nth-child(1),
  .cred-card:nth-child(1),
  .badge:nth-child(1) { animation-delay: 0ms; }

  .stat-pill:nth-child(2),
  .cred-card:nth-child(2),
  .badge:nth-child(2) { animation-delay: 100ms; }

  .stat-pill:nth-child(3),
  .cred-card:nth-child(3),
  .badge:nth-child(3) { animation-delay: 200ms; }

  .stat-pill:nth-child(4),
  .cred-card:nth-child(4),
  .badge:nth-child(4) { animation-delay: 300ms; }

  .stat-pill:nth-child(5),
  .cred-card:nth-child(5),
  .badge:nth-child(5) { animation-delay: 400ms; }

  .stat-pill:nth-child(6),
  .cred-card:nth-child(6),
  .badge:nth-child(6) { animation-delay: 500ms; }
}

/* ---------- Reduce motion for accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
  .fade-in,
  .fade-in-left,
  .fade-in-right,
  .stagger > * {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .glow-divider::after,
  .brand::after,
  .particle,
  .btn,
  .home-hero::after,
  .home-hero-grid::before,
  .load-strip-track {
    animation: none;
  }

  .home-hero::after,
  .home-hero-grid::before {
    opacity: 0.55;
  }

  .card::after {
    display: none;
  }

  .seo-areas-content {
    transition: none;
  }

  details.faq-item[open] > .faq-a {
    animation: none;
  }

  .cities-grid li::after {
    transition: none;
  }

  .badge,
  .stat-pill,
  .cred-card {
    transition: none;
    animation: none;
    opacity: 1;
    transform: none;
  }

  main {
    animation: none;
    opacity: 1;
  }
}

/* =====================================================
   CAM — LIVE LOAD VIEW (cam.mtaylorinc.net)
   Gated broker-facing camera viewer + admin panel.
   Used ONLY by cam.html and cam-admin.html (noindex).
   Everything is prefixed .cam- so nothing leaks into
   the marketing pages.
   ===================================================== */

body.cam-body {
  color-scheme: dark;
}

/* The JS toggles views with the hidden attribute; make sure it always wins
   over display rules like .cam-gate's flex. */
body.cam-body [hidden] {
  display: none !important;
}

.cam-main {
  min-height: calc(100vh - 250px);
  min-height: calc(100dvh - 250px);
  display: flex;
  flex-direction: column;
}

.cam-main > .container {
  width: 100%;
}

/* ---- Ocean screensaver (backdrop for the gate + expired screens) ----
   Fixed layer at z-index -1: under every piece of page content but above
   the body background. cam.js picks the medium — reef video loop on strong
   connections, procedural canvas ocean on weak/data-saver ones — and the
   scrim keeps the card on top readable over either. */
.cam-ocean {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: #071322;
}

.cam-ocean video,
.cam-ocean canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cam-ocean-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(var(--bg-body-rgb), 0.62) 0%, rgba(var(--bg-body-rgb), 0.34) 45%, rgba(var(--bg-body-rgb), 0.72) 100%);
}

/* ---- Gate (access-code card) ---- */
.cam-gate {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3xl) var(--space-lg);
}

.cam-gate-card {
  width: 100%;
  max-width: 440px;
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-alt) 100%);
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg), var(--shadow-glow);
  padding: var(--space-3xl) var(--space-2xl);
  text-align: center;
}

.cam-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-md);
}

.cam-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e25549;
  box-shadow: 0 0 8px rgba(226, 85, 73, 0.8);
  animation: camPulse 1.6s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes camPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.8); }
}

.cam-gate-card h1 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-sm);
}

.cam-gate-card .sub {
  margin: 0 auto var(--space-xl);
  font-size: var(--text-base);
}

.cam-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.cam-input {
  width: 100%;
  background: rgba(var(--bg-rgb), 0.75);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.8rem 1rem;
  transition: border-color var(--ease-standard), box-shadow var(--ease-standard);
}

.cam-input::placeholder {
  color: var(--muted);
  opacity: 0.75;
}

.cam-input:focus {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.65);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.cam-input[readonly] {
  color: var(--muted);
}

.cam-input-code {
  text-align: center;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.cam-error {
  color: #e58d84;
  background: rgba(226, 85, 73, 0.08);
  border: 1px solid rgba(226, 85, 73, 0.25);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  line-height: 1.5;
  padding: 0.6rem 0.9rem;
  margin-top: var(--space-md);
}

.cam-info {
  color: var(--accent-light);
  background: var(--accent-soft);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  line-height: 1.5;
  padding: 0.6rem 0.9rem;
  margin-top: var(--space-md);
}

.cam-note {
  margin-top: var(--space-xl);
  font-size: var(--text-xs);
  color: var(--muted);
  line-height: 1.7;
}

.cam-note a {
  color: var(--accent);
  text-decoration: none;
}

/* ---- Viewer / admin shared page head ---- */
.cam-viewer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  flex-wrap: wrap;
  margin: var(--space-2xl) 0 var(--space-xl);
}

.cam-viewer-head h1 {
  font-size: var(--text-xl);
  letter-spacing: -0.01em;
}

.cam-viewer-head .small {
  margin-top: 0.2rem;
}

.cam-access-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--accent-soft);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  color: var(--accent-light);
  border-radius: var(--radius-pill);
  padding: 0.35rem 0.9rem;
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 700;
  margin-top: var(--space-sm);
  max-width: 100%;
}

/* ---- Camera grid ----
   Fixed 3x2 that mirrors the truck (front row over rear row) on EVERY
   screen — tiles scale down rather than reflow, and scale UP to fill wide
   desktops (capped at 1500px so tiles don't grow absurd). */
.cam-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(6px, 1.2vw, 20px);
  width: 100%;
  max-width: min(100%, 1500px);
  margin: 0 auto var(--space-lg);
}

/* viewer page gets a wider container than the marketing pages so the grid
   can actually use desktop width (1500px grid + side padding) */
#viewerView .container {
  max-width: 1540px;
}

.cam-tile {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: border-color var(--ease-standard);
}

.cam-tile:hover,
.cam-tile:focus-visible {
  border-color: rgba(var(--accent-rgb), 0.55);
  outline: none;
}

/* feeds display at 16:9 — lock the box to it so the picture fills the tile
   edge to edge with no dead band above or below */
.cam-tile-media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--black);
}

.cam-tile-media video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: var(--black);
}

/* position label overlaid on the picture (keeps tiles pure video = compact) */
.cam-tile-tag {
  position: absolute;
  top: clamp(4px, 1vw, 10px);
  left: clamp(4px, 1vw, 10px);
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  background: rgba(var(--black-rgb), 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--text);
  font-family: var(--font-heading);
  font-size: clamp(0.52rem, 1.7vw, 0.72rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.25em 0.7em;
  border-radius: var(--radius-pill);
  pointer-events: none;
  z-index: 2;
  white-space: nowrap;
}

.cam-tag-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
  flex-shrink: 0;
}

.cam-tag-dot.is-live {
  background: #e25549;
  box-shadow: 0 0 6px rgba(226, 85, 73, 0.8);
  animation: camPulse 1.6s ease-in-out infinite;
}

.cam-tile-status {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  color: var(--muted);
  font-size: var(--text-sm);
  text-align: center;
  padding: var(--space-lg);
  background: radial-gradient(circle, rgba(var(--panel-rgb), 0.5) 0%, rgba(var(--black-rgb), 0.72) 100%);
  pointer-events: none;
}

.cam-spinner {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 3px solid rgba(var(--accent-rgb), 0.2);
  border-top-color: var(--accent);
  animation: camSpin 0.9s linear infinite;
}

@keyframes camSpin {
  to { transform: rotate(360deg); }
}

/* ---- Countdown (time left on the link) ---- */
.cam-countdown {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: fit-content;
  margin: 0 auto var(--space-3xl);
  background: rgba(var(--panel-rgb), 0.5);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 0.45rem 1.1rem;
  color: var(--muted);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 600;
}

.cam-countdown svg {
  flex-shrink: 0;
}

.cam-countdown strong {
  color: var(--text);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.cam-countdown.is-low {
  color: #e58d84;
  border-color: rgba(226, 85, 73, 0.4);
  background: rgba(226, 85, 73, 0.08);
}

.cam-countdown.is-low strong {
  color: #e58d84;
}

/* ---- Fullscreen (one cam, best fit) ---- */
.cam-tile.is-full {
  position: fixed;
  inset: 0;
  z-index: 1000;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--black);
  cursor: default;
}

.cam-tile.is-full .cam-tile-media {
  aspect-ratio: auto;
  height: 100%;
}

/* label moves to the bottom so it doesn't collide with the Back button */
.cam-tile.is-full .cam-tile-tag {
  top: auto;
  left: calc(env(safe-area-inset-left, 0px) + 14px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
  font-size: 0.78rem;
}

body.cam-full {
  overflow: hidden;
}

body.cam-full .header,
body.cam-full .footer,
body.cam-full .cam-viewer-head,
body.cam-full .cam-countdown {
  display: none;
}

.cam-back-btn {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 14px);
  left: calc(env(safe-area-inset-left, 0px) + 14px);
  z-index: 1001;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(var(--black-rgb), 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-pill);
  color: var(--text);
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.55rem 1.15rem;
  cursor: pointer;
  transition: border-color var(--ease-standard), color var(--ease-standard);
}

.cam-back-btn:hover,
.cam-back-btn:focus-visible {
  border-color: rgba(var(--accent-rgb), 0.7);
  color: var(--accent-light);
  outline: none;
}

/* ---- Small screens: tighten everything so 3 columns stay comfortable ---- */
@media (max-width: 640px) {
  .cam-viewer-head {
    margin: var(--space-lg) 0 var(--space-md);
  }

  .cam-viewer-head h1 {
    font-size: var(--text-lg);
  }

  .cam-tile {
    border-radius: var(--radius-sm);
  }

  .cam-tile-status {
    gap: 0.4rem;
    font-size: 0.58rem;
    padding: var(--space-xs);
  }

  .cam-spinner {
    width: 18px;
    height: 18px;
    border-width: 2px;
  }
}

/* ---- Short landscape (phone rotated): compact chrome so the whole 3x2
   grid fits on screen without scrolling. Cam pages only. ---- */
@media (orientation: landscape) and (max-height: 480px) {
  .cam-body .brand {
    font-size: 2rem;
  }

  .cam-body .header .container {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
  }

  .cam-body .nav .btn {
    padding: 0.4rem 0.9rem;
    font-size: 0.8rem;
  }

  .cam-viewer-head {
    margin: 0.5rem 0;
  }

  .cam-viewer-head h1 {
    font-size: var(--text-base);
  }

  .cam-viewer-head .btn {
    padding: 0.4rem 0.9rem;
    font-size: 0.8rem;
  }

  .cam-access-pill {
    margin-top: 0.15rem;
    padding: 0.2rem 0.7rem;
    font-size: var(--text-xs);
  }

  /* grid height ≈ width * 3/8 (two 16:9 rows of three) → width ≤ height * 8/3 */
  .cam-grid {
    max-width: min(100%, calc((100dvh - 185px) * 2.66));
  }

  .cam-tile-tag {
    font-size: 0.52rem;
  }

  .cam-countdown {
    margin-bottom: var(--space-md);
    padding: 0.3rem 0.9rem;
    font-size: var(--text-xs);
  }
}

/* ---- Admin layout ---- */
.cam-admin-grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: var(--space-xl);
  align-items: start;
  margin-bottom: var(--space-3xl);
}

@media (max-width: 980px) {
  .cam-admin-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Camera override chips (3x2, same spatial order as the viewer) ---- */
.cam-force-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-top: var(--space-md);
}

.cam-cam-chip {
  background: rgba(var(--bg-rgb), 0.6);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.55rem 0.25rem;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--ease-standard), color var(--ease-standard), background var(--ease-standard);
}

.cam-cam-chip:hover {
  border-color: rgba(var(--accent-rgb), 0.5);
  color: var(--text);
}

.cam-cam-chip.on {
  background: var(--accent-soft);
  border-color: rgba(var(--accent-rgb), 0.65);
  color: var(--accent-light);
}

.cam-force-actions {
  margin-top: 0.9rem;
}

.cam-panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(var(--white-rgb), 0.03);
}

.cam-panel h2 {
  font-size: var(--text-md);
  margin-bottom: var(--space-lg);
}

.cam-field {
  margin-bottom: var(--space-lg);
  text-align: left;
}

.cam-field label {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.35rem;
}

.cam-field label span {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}

select.cam-input {
  cursor: pointer;
}

/* ---- Admin table ---- */
.cam-table-wrap {
  overflow-x: auto;
}

.cam-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.cam-table th {
  text-align: left;
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.cam-table td {
  padding: 0.7rem 0.75rem;
  border-bottom: 1px solid rgba(var(--border-rgb), 0.55);
  vertical-align: middle;
}

.cam-table tbody tr:last-child td {
  border-bottom: none;
}

.cam-table-label {
  font-family: var(--font-heading);
  font-weight: 700;
}

.cam-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem;
  background: rgba(var(--bg-rgb), 0.7);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 0.15rem 0.45rem;
  white-space: nowrap;
}

.cam-badge {
  display: inline-block;
  padding: 0.16rem 0.6rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.cam-badge.active {
  color: var(--accent-light);
  background: var(--accent-soft);
  border: 1px solid rgba(var(--accent-rgb), 0.4);
}

.cam-badge.expired {
  color: var(--muted);
  background: rgba(var(--white-rgb), 0.04);
  border: 1px solid var(--border);
}

.cam-badge.revoked {
  color: #e58d84;
  background: rgba(226, 85, 73, 0.1);
  border: 1px solid rgba(226, 85, 73, 0.3);
}

.cam-badge.watching {
  color: #8fd7a0;
  background: rgba(88, 190, 120, 0.12);
  border: 1px solid rgba(88, 190, 120, 0.35);
  animation: camPulse 1.6s ease-in-out infinite;
}

/* small "opened N× · watched Xm" line under Last used */
.cam-meta {
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 0.2rem;
  white-space: nowrap;
}

/* ---- Truck box status strip (admin) ---- */
.cam-truckbar {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: fit-content;
  margin-bottom: var(--space-lg);
  padding: 0.55rem 1.1rem;
  background: rgba(var(--panel-rgb), 0.5);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 600;
}

.cam-truckbar .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--muted);
  flex-shrink: 0;
}

.cam-truckbar .dot.on {
  background: #58be78;
  box-shadow: 0 0 6px rgba(88, 190, 120, 0.8);
  animation: camPulse 1.6s ease-in-out infinite;
}

.cam-truckbar .dot.off {
  background: #e25549;
  box-shadow: 0 0 6px rgba(226, 85, 73, 0.8);
}

.cam-actions {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.cam-btn-sm {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.74rem;
  padding: 0.32rem 0.7rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--ease-standard), color var(--ease-standard), background-color var(--ease-standard);
}

.cam-btn-sm:hover {
  border-color: rgba(var(--accent-rgb), 0.5);
  color: var(--accent-light);
  background-color: var(--accent-soft);
}

.cam-btn-sm.danger:hover {
  border-color: rgba(226, 85, 73, 0.5);
  color: #e58d84;
  background-color: rgba(226, 85, 73, 0.08);
}

/* ---- Share box (after creating a code) ---- */
.cam-share {
  margin-top: var(--space-lg);
  padding: var(--space-lg);
  background: rgba(var(--accent-rgb), 0.06);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: var(--radius-md);
  text-align: left;
}

.cam-share h3 {
  font-size: var(--text-base);
  margin-bottom: 0.2rem;
}

.cam-share .small {
  margin-bottom: 0.5rem;
}

.cam-share-row {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.cam-share-row .cam-input {
  flex: 1;
  min-width: 0;
  font-size: 0.85rem;
  padding: 0.55rem 0.75rem;
}

.cam-share-code-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

/* Desktop table: keep data columns on one line; the label column absorbs
   the width (the wrap has overflow-x auto as a safety net) */
@media (min-width: 721px) {
  .cam-table td:not(:first-child) {
    white-space: nowrap;
  }

  .cam-td-actions .cam-actions {
    flex-wrap: nowrap;
  }
}

/* ---- Mobile: admin table collapses to cards ---- */
@media (max-width: 720px) {
  .cam-table thead {
    display: none;
  }

  .cam-table,
  .cam-table tbody,
  .cam-table tr,
  .cam-table td {
    display: block;
    width: 100%;
  }

  .cam-table tr {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: rgba(var(--bg-rgb), 0.45);
    padding: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-md);
  }

  .cam-table td {
    border: none;
    padding: 0.32rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
  }

  .cam-table td::before {
    content: attr(data-th);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    flex-shrink: 0;
  }

  .cam-table td.cam-td-actions {
    justify-content: flex-start;
    padding-top: 0.6rem;
    margin-top: 0.3rem;
    border-top: 1px solid rgba(var(--border-rgb), 0.55);
  }

  .cam-table td.cam-td-actions::before {
    content: none;
  }
}

@media (max-width: 640px) {
  .cam-gate-card {
    padding: var(--space-2xl) var(--space-lg);
  }

  .cam-viewer-head {
    margin-top: var(--space-xl);
  }
}

/* Respect reduced motion on cam pages too */
@media (prefers-reduced-motion: reduce) {
  .cam-live-dot,
  .cam-spinner {
    animation: none;
  }
}