/* ==========================================================================
   Marshall's Mobile Repair — Public Site Signature Layer
   Loaded only on the public marketing pages (index.html, request.html),
   on top of the shared style.css. The staff dashboard never sees this file,
   so its look stays exactly as-is.

   Signature idea: machined-edge panels. The logo is a car body panel drawn
   in hard, faceted strokes (not soft curves) — so instead of soft rounded
   corners everywhere, cards/buttons here get a chamfered corner, the same
   cut you'd see on a socket head or a stamped metal bracket. One racing
   stripe divider (two-tone body stripe, not hazard tape) marks the
   transition into the footer. Everything here respects
   prefers-reduced-motion via the base reset in style.css, plus its own
   explicit fallback for the odometer count-up and the scroll reveals.

   Color: accent is blue, not orange — Marshall's identity is blue/black/
   chrome (straight off the logo), no orange in it at all. This overrides
   style.css's --color-accent for every public page, so the eyebrow dash
   and the required-field asterisk pick it up too, automatically. */

:root {
  --chamfer: 14px;
  --chamfer-sm: 8px;
  --color-accent: #2e7cd6;
  --color-accent-dark: #143a63;
}

/* ---------- Chamfered card system ---------- */
.feature-card,
.service-card,
.review-card,
.contact-card,
.form-card,
.side-card,
.faq-item {
  border-radius: 0;
  clip-path: polygon(
    var(--chamfer) 0, 100% 0,
    100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%,
    0 100%, 0 var(--chamfer)
  );
  position: relative;
  border-color: var(--color-charcoal-soft);
}

/* Restore the corners the clip-path cut off, as a thin bevel line, so the
   chamfer reads as an intentional cut rather than a clipping artifact. */
.feature-card::before,
.service-card::before,
.review-card::before,
.contact-card::before,
.form-card::before,
.side-card::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, transparent calc(var(--chamfer) - 1.5px), var(--color-accent) calc(var(--chamfer) - 1.5px), var(--color-accent) var(--chamfer), transparent calc(var(--chamfer) + 1px)),
    linear-gradient(-45deg, transparent calc(var(--chamfer) - 1.5px), var(--color-accent) calc(var(--chamfer) - 1.5px), var(--color-accent) var(--chamfer), transparent calc(var(--chamfer) + 1px));
  background-position: top left, bottom right;
  background-size: 32px 32px;
  background-repeat: no-repeat;
  opacity: 0.9;
}

.btn {
  border-radius: 0;
  clip-path: polygon(
    var(--chamfer-sm) 0, 100% 0,
    100% calc(100% - var(--chamfer-sm)), calc(100% - var(--chamfer-sm)) 100%,
    0 100%, 0 var(--chamfer-sm)
  );
}
.btn-lg { --chamfer-sm: 10px; }

.hero-badge,
.form-progress-note,
.category-badge {
  border-radius: var(--radius-sm);
}

.hero-media,
.about-media img,
.fb-embed,
.area-map {
  border-radius: 0;
  clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
}

/* ---------- Racing stripe divider ---------- */
/* Two-tone diagonal body stripe (navy/blue), not hazard tape — the one
   signature transition, used once, right before the footer. */
.hazard-divider {
  height: 14px;
  background: repeating-linear-gradient(
    135deg,
    var(--color-charcoal) 0 22px,
    var(--color-accent) 22px 44px
  );
  border-block: 2px solid var(--color-charcoal);
}

/* ---------- Scroll reveal ---------- */
/* public-effects.js is the ONLY thing that ever adds .reveal-item — if JS
   fails to load or run, this class never exists on any element, so nothing
   is ever hidden by default. No JS = full content, immediately. */
.reveal-item {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 650ms var(--ease-out), transform 650ms var(--ease-out);
}
.reveal-item.is-visible {
  opacity: 1;
  transform: none;
}

/* ---------- Parallax-safe media ---------- */
/* public-effects.js nudges transform on scroll for elements with this class.
   Resting position (no JS) is identical to the final visual — parallax is a
   pure bonus layered on top of a fully-correct static image. */
.parallax-media {
  will-change: transform;
}

/* ---------- Odometer-style stat count-up ---------- */
/* JS (public-effects.js) swaps the number's text as it counts up. By default
   (no JS, or reduced motion) the final value from the HTML shows immediately
   — the count-up is a bonus, never a requirement to see the number. */
.hero-stat .num,
.social-stat .num {
  font-variant-numeric: tabular-nums;
}