/* ---- Design tokens ---- */
:root {
  --color-bg: #ffffff;
  --color-bg-alt: #f8fafc;
  --color-text: #1f2933;
  --color-text-muted: #52606d;
  --color-primary: #1e3a5f;
  --color-primary-dark: #142a45;
  /* Burnt-orange accent (replaces the old blue) — chosen over electric blue
     because it ties to the real logo's orange arc/stars and to the "tint
     blocks sun and heat" story, and reads as premium-trade rather than
     tech-SaaS. --color-accent is the on-light value (buttons, links, focus —
     5.2:1 on white); --color-accent-bright is for on-navy text/glow, where
     the darker value falls below 3:1. */
  --color-accent: #c2410c;
  --color-accent-dark: #9a3412;
  --color-accent-bright: #fb923c;
  --color-border: #e2e8f0;
  /* #f59e0b measured 2.15:1 on white — fails even the relaxed 3:1 bold-text
     threshold (audit finding C1). Darkened to a value that clears 4.5:1
     (the stricter body-text minimum) with room to spare. */
  --color-star: #b45309;

  --font-heading: 'Poppins', 'Segoe UI', Arial, sans-serif;
  --font-body: 'Inter', 'Segoe UI', Arial, sans-serif;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;

  --radius: 8px;
  --container-width: 1120px;
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.10);

  /* Light text/accent for use on dark (navy) backgrounds — matches the
     footer's existing dark-background palette, named for reuse. */
  --color-on-dark: #dbe4f0;
  --color-on-dark-muted: #b9c6dc;
  --color-accent-soft: rgba(194, 65, 12, 0.12);
  --color-glow: rgba(251, 146, 60, 0.55);
  --shadow-glow: 0 0 28px rgba(194, 65, 12, 0.25);

  /* Tint-darkness swatch scale (services.html) — dark-navy to near-white,
     same hue family as --color-primary so the reference stays on-brand
     instead of reading as plain neutral gray. */
  --tint-5: var(--color-primary-dark);
  --tint-20: #3c5170;
  --tint-35: #7f8c9c;
  --tint-50: #c0c8d2;
  --tint-70: #eef1f5;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, p, figure { margin: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
}

/* Clip on main (a sibling of the sticky header, not an ancestor) rather than
   html/body — overflow-x:hidden on html/body breaks position: sticky.
   overflow-y explicit (not the browser-computed "auto" default that comes
   from setting only overflow-x) avoids main becoming its own scroll
   container, which breaks IntersectionObserver-based scroll reveals. */
/* Clip on main (a sibling of the sticky header, not an ancestor) rather than
   html/body — overflow-x:hidden on html/body breaks position: sticky. */
main { overflow-x: hidden; }

h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 600; color: var(--color-primary); line-height: 1.2; }
/* Flat fallback, not a clamp (audit finding T2) — every real <h1> on the
   site sits inside .hero or .page-hero, both of which override this, so
   the old clamp() range never actually rendered anywhere and just
   misrepresented the real type scale to anyone reading this file. */
h1 { font-size: 2rem; }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); margin-bottom: var(--space-3); }
h3 { font-size: 1.25rem; margin-bottom: var(--space-1); }

.container { max-width: var(--container-width); margin-inline: auto; padding-inline: var(--space-3); }

.section { padding-block: var(--space-6); }
/* Soft top/bottom fade instead of a hard color-block cut into the
   neighboring white section, plus the same fine grain used in the hero
   (baked into the SVG at low alpha so it layers under the fade cleanly). */
.section-alt {
  background-color: var(--color-bg-alt);
  background-image:
    linear-gradient(180deg, var(--color-bg) 0%, transparent 10%, transparent 90%, var(--color-bg) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}

/* ---- Utilities ---- */
.text-center { text-align: center; }
.text-center .lede { margin-inline: auto; }
.text-center .section-heading-accent { margin-inline: auto; }

/* ---- Skip link ---- */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-2);
  background: var(--color-accent);
  color: #fff;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius);
  z-index: 100;
  transition: top 0.2s ease;
}
.skip-link:focus { top: var(--space-2); }

/* ---- Buttons ---- */
.btn {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  font-weight: 600;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.btn-accent { background: var(--color-accent); color: #fff; box-shadow: 0 4px 14px rgba(194, 65, 12, 0.32); }
.btn-accent:hover { background: var(--color-accent-dark); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(194, 65, 12, 0.42); }
.btn-outline { border: 2px solid var(--color-primary); color: var(--color-primary); }
.btn-outline:hover { background: var(--color-primary); color: #fff; box-shadow: 0 8px 20px rgba(30, 58, 95, 0.28); }

/* ---- Header ---- */
.site-header { border-bottom: 1px solid var(--color-border); position: sticky; top: 0; background: var(--color-bg); z-index: 50; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-2); }
.logo { font-family: var(--font-heading); font-weight: 600; font-size: 1.25rem; color: var(--color-primary); }
.logo-accent { color: var(--color-accent); }

/* Real logo badge — kept small and self-contained (own rounded corner + ring)
   so its busier black/orange/gold artwork reads as a fixed-size mark next to
   the site's own navy/blue wordmark, rather than bleeding into the palette.
   Plain inline flow (not flex) so the wordmark still wraps normally at word
   boundaries in the narrow footer columns instead of splitting mid-word. */
.logo-mark {
  height: 34px;
  width: auto;
  vertical-align: middle;
  margin-right: var(--space-1);
  border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08), var(--shadow-sm);
}
.footer-logo .logo-mark { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18); }

.nav-toggle { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 44px; min-height: 44px; background: none; border: none; }
.nav-toggle span { width: 22px; height: 2px; background: var(--color-primary); display: block; }

.site-nav { display: flex; gap: var(--space-3); }
.site-nav a { position: relative; color: var(--color-text); font-weight: 500; padding-block: var(--space-1); transition: color 0.2s ease; }
.site-nav a:hover, .site-nav a.active { color: var(--color-accent); }
/* Underline draws in from center rather than snapping on, so hover/focus reads as alive. */
.site-nav a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transition: transform 0.2s ease;
}
.site-nav a:hover::after, .site-nav a.active::after { transform: scaleX(1); }

.header-cta { white-space: nowrap; }

.header-social { display: flex; align-items: center; gap: 4px; }
.header-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--color-primary);
  transition: background 0.2s ease, color 0.2s ease;
}
.header-social a:hover, .header-social a:focus-visible {
  background: var(--color-accent-soft);
  color: var(--color-accent);
}
.header-social svg { width: 16px; height: 16px; fill: currentColor; }

@media (max-width: 860px) {
  .nav-toggle { display: flex; }
  .header-cta { display: none; }
  .header-social { display: none; }
  .site-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-2) var(--space-3);
    gap: var(--space-1);
    display: none;
  }
  .site-nav.is-open { display: flex; }
}

/* ---- Marquee ticker (decorative — content is aria-hidden and repeats info
   already exposed accessibly in the nav, trust bar, and footer) ---- */
/* Navy, not accent-orange: a saturated, animated band directly above the
   hero headline was winning the eye before the H1 did (audit finding H1).
   Keeping the motion (it's still useful as ambient texture) but dropping
   the color removes it from competition with the hero and the CTA. */
.marquee { background: var(--color-primary-dark); overflow: hidden; white-space: nowrap; }
.marquee-track { display: inline-flex; width: max-content; animation: marquee-scroll 30s linear infinite; }
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
.marquee-content {
  display: inline-block;
  padding-block: var(--space-1);
  padding-inline-end: 2.5rem;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .marquee-content:nth-child(2) { display: none; }
}

/* ---- Trust bar ---- */
.section-stats { background: linear-gradient(180deg, var(--color-accent-soft) 0%, var(--color-bg) 65%); }
.trust-bar { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; text-align: center; padding-block: var(--space-4); }
.trust-item {
  flex: 1 1 190px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-3);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.trust-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-md), var(--shadow-glow); }
.trust-item strong { display: block; color: var(--color-primary); font-family: var(--font-heading); font-size: 1.5rem; }
.trust-item .stars { color: var(--color-star); font-size: 1.5rem; }

/* ---- Icon badge (accent circle behind a small svg icon) ---- */
.icon-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}
.icon-badge svg { width: 26px; height: 26px; }

/* Small inline accent icon preceding a line of text (contact info, etc.) */
.icon-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--color-accent);
  margin-right: var(--space-1);
  vertical-align: -4px;
}
.icon-inline svg { width: 20px; height: 20px; }

/* ---- Section heading accent divider (opt-in, placed before a heading) ---- */
.section-heading-accent {
  display: block;
  width: 64px;
  height: 5px;
  background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-bright) 100%);
  border-radius: 3px;
  margin: 0 0 var(--space-2);
}

/* ---- Bold accent section band (navy gradient, matches hero) ---- */
.section-accent { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); color: var(--color-on-dark); }
.section-accent h2 { color: #fff; }
.section-accent .lede { color: var(--color-on-dark-muted); }
/* Same warm radial glow as the hero, as a bg pseudo-element so every
   .section-accent band (home + pricing + about CTAs) picks it up with no
   markup changes. */
.section-accent::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 640px; height: 640px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--color-glow) 0%, rgba(251, 146, 60, 0) 70%);
  filter: blur(10px);
  opacity: 0.5;
  pointer-events: none;
}
.section-accent > * { position: relative; z-index: 1; }

/* ---- Cards ---- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-3); }
.card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-4); box-shadow: var(--shadow-sm); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; text-align: left; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md), var(--shadow-glow); border-color: rgba(194, 65, 12, 0.25); }
.card h2:not(:first-child), .card h3:not(:first-child) { margin-top: var(--space-3); }
.card .icon-badge + h2, .card .icon-badge + h3 { margin-top: 0; }
/* In-card links ("Learn More →") — previously inherited plain body-text
   color with no hover state at all. Accent color plus a gap-widening arrow
   nudge makes them read as links and feel alive, not static. */
.card > a { display: inline-flex; align-items: center; gap: 4px; margin-top: var(--space-2); color: var(--color-accent); font-weight: 600; transition: color 0.2s ease, gap 0.2s ease; }
.card > a:hover { color: var(--color-accent-dark); gap: 8px; }

/* ---- Pricing table ---- */
.pricing-table { width: 100%; border-collapse: collapse; background: var(--color-bg); box-shadow: var(--shadow-sm); border-radius: var(--radius); overflow: hidden; }
.pricing-table caption { text-align: left; font-family: var(--font-heading); font-weight: 600; color: var(--color-primary); padding: var(--space-2) 0; }
.pricing-table th, .pricing-table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border); text-align: left; }
.pricing-table th { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); color: #fff; }
.pricing-table td:last-child, .pricing-table th:last-child { text-align: right; font-weight: 600; }
.pricing-table tbody tr { transition: background-color 0.15s ease; }
.pricing-table tbody tr:hover { background: var(--color-accent-soft); }
.pricing-table tbody tr:hover td:last-child { color: var(--color-accent-dark); }
/* Entry-level price called out (audit finding D2) — 28 rows across the two
   tables otherwise carry identical visual weight, so the $40 figure
   already promoted on the homepage had no distinction on the page where
   people actually decide. */
.pricing-table-highlight { background: var(--color-accent-soft); }
.pricing-table-highlight td:last-child { color: var(--color-accent-dark); }
.pricing-table-badge {
  display: inline-block;
  margin-left: var(--space-1);
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--color-accent);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  vertical-align: middle;
}
.pricing-table-wrap { overflow-x: auto; margin-bottom: var(--space-5); }

/* ---- Tint shade reference (CSS swatches, no photo dependency) ---- */
.tint-shade-card {
  max-width: 640px;
  margin: var(--space-4) auto 0;
  padding: var(--space-4);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
.tint-swatches { display: flex; justify-content: center; gap: var(--space-3); flex-wrap: wrap; }
.tint-swatch { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); flex: 1 1 80px; max-width: 120px; }
.tint-swatch-color {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: calc(var(--radius) - 2px);
  /* Hairline ring so the lightest swatch stays visible against the card's
     own near-white background. */
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
}
.tint-swatch-color[data-pct="5"] { background: var(--tint-5); }
.tint-swatch-color[data-pct="20"] { background: var(--tint-20); }
.tint-swatch-color[data-pct="35"] { background: var(--tint-35); }
.tint-swatch-color[data-pct="50"] { background: var(--tint-50); }
.tint-swatch-color[data-pct="70"] { background: var(--tint-70); }
.tint-swatch-label { font-family: var(--font-heading); font-weight: 600; color: var(--color-primary); font-size: 1rem; }
.tint-shade-cta { margin-top: var(--space-4); }

/* ---- Gallery ---- */
/* auto-fill (not auto-fit) so a handful of tiles stay tile-sized instead
   of stretching to fill the row (audit finding D1) — the gallery
   currently has only 3 tiles (one a "coming soon" placeholder), and
   auto-fit was blowing them up into oversized, gap-heavy columns on
   wide viewports. auto-fill leaves the unused track space empty instead. */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-3); justify-content: center; }
.gallery-placeholder { aspect-ratio: 4 / 3; background: var(--color-bg-alt); border: 1px dashed var(--color-border); border-radius: var(--radius); display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--color-text-muted); font-size: 0.875rem; text-align: center; padding: var(--space-2); }
.gallery-placeholder .icon-badge { margin-bottom: var(--space-1); }

/* Real work photos — same 4:3 footprint as the placeholder tiles so the two
   mix in one grid; caption sits in a navy (brand, not photo-color) gradient
   so busier photo content stays contained behind readable white text. */
.gallery-photo { position: relative; aspect-ratio: 4 / 3; margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.gallery-photo:hover { transform: translateY(-4px) scale(1.02); box-shadow: var(--shadow-md), var(--shadow-glow); }
.gallery-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.25s ease; }
.gallery-photo:hover img { transform: scale(1.06); }
.gallery-photo figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: var(--space-3) var(--space-3) var(--space-2);
  background: linear-gradient(to top, rgba(20, 42, 69, 0.88), rgba(20, 42, 69, 0));
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.875rem;
}
.gallery-photo figcaption::before { content: "●"; color: var(--color-accent-bright); font-size: 0.6em; margin-right: 0.45em; vertical-align: 0.1em; }

/* ---- Before/After drag-compare slider ---- */
.ba-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-4) var(--space-3); }
.ba-card {
  --pos: 50%;
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  background: var(--color-primary-dark);
  cursor: ew-resize;
  touch-action: none;
  outline: none;
  -webkit-user-select: none;
  user-select: none;
  transition: box-shadow 0.2s ease;
}
.ba-card:hover, .ba-card:focus-visible { box-shadow: var(--shadow-md), var(--shadow-glow); }
.ba-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
/* The "before" image sits full-size underneath its own wrapper; clip-path
   (not a narrowed width) reveals only the left --pos portion, so both
   layers stay pixel-aligned with the "after" image beneath them. */
.ba-before-wrap { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }

.ba-divider { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; background: #fff; transform: translateX(-1.5px); box-shadow: 0 0 14px rgba(0, 0, 0, 0.45); pointer-events: none; }
.ba-handle {
  position: absolute; top: 50%; left: var(--pos); transform: translate(-50%, -50%);
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 4px 14px rgba(194, 65, 12, 0.45), 0 0 0 4px rgba(255, 255, 255, 0.92);
  display: flex; align-items: center; justify-content: center; color: #fff;
  pointer-events: none;
}
.ba-handle svg { width: 20px; height: 20px; }

.ba-label { position: absolute; top: var(--space-1); font-family: var(--font-heading); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.09em; text-transform: uppercase; color: #fff; background: rgba(20, 42, 69, 0.72); padding: 4px 8px; border-radius: 4px; pointer-events: none; }
.ba-label-before { left: var(--space-1); }
.ba-label-after { right: var(--space-1); }

.ba-hint {
  position: absolute; bottom: var(--space-2); left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px;
  background: rgba(20, 42, 69, 0.85); color: #fff;
  font-family: var(--font-heading); font-weight: 600; font-size: 0.75rem;
  padding: 8px 16px; border-radius: 999px;
  opacity: 1; transition: opacity 0.25s ease; pointer-events: none; white-space: nowrap;
}
.ba-hint svg { width: 15px; height: 15px; }
.ba-card.ba-touched .ba-hint { opacity: 0; }

.ba-caption { margin-top: var(--space-2); text-align: center; }
.ba-caption strong { display: block; font-family: var(--font-heading); font-weight: 600; color: var(--color-primary); font-size: 1rem; }
.ba-caption span { color: var(--color-text-muted); font-size: 0.75rem; }

@media (prefers-reduced-motion: reduce) {
  .ba-card, .ba-hint { transition: none; }
}

/* ---- Footer ---- */
.site-footer { background: var(--color-primary); color: var(--color-on-dark); margin-top: var(--space-7); }
.footer-inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); padding-block: var(--space-6); }
/* No font-size override here (audit finding T3) — this used to render
   footer headings at 16px vs. the 20px every other h3 on the site uses,
   with no reason for the mismatch. Inheriting the base h3 size keeps
   "Contact"/"Hours"/"Quick Links" consistent with card titles elsewhere. */
.footer-col h3 { color: #fff; margin-bottom: var(--space-2); }
.footer-col a { transition: color 0.2s ease; }
.footer-col a:hover { color: var(--color-star); }
.footer-logo { color: #fff; }
.footer-social { display: flex; gap: var(--space-1); margin-top: var(--space-2); }
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-on-dark);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.footer-social a:hover, .footer-social a:focus-visible {
  background: var(--color-accent);
  color: #fff;
  transform: translateY(-2px);
}
.footer-social svg { width: 15px; height: 15px; fill: currentColor; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.15); padding-block: var(--space-2); font-size: 0.875rem; text-align: center; color: var(--color-on-dark-muted); }

/* ---- Hero ---- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-7);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: var(--color-on-dark);
  text-align: center;
}
/* Diagonal stripe motif (layered tint film) plus a soft light-beam sweep
   crossing it — like sun through tinted glass/blinds, the most literal
   "window tint" callback of the background options tried. Beam drifts
   slowly; stripes stay still so the motion doesn't read as a spinner. */
.hero::before, .page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      115deg,
      rgba(255, 255, 255, 0.06) 0px,
      rgba(255, 255, 255, 0.06) 2px,
      transparent 2px,
      transparent 28px
    ),
    linear-gradient(
      115deg,
      transparent 8%,
      rgba(251, 146, 60, 0.16) 20%,
      transparent 32%,
      transparent 58%,
      rgba(255, 255, 255, 0.1) 70%,
      transparent 82%
    );
  background-size: 100% 100%, 220% 220%;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes rays-drift {
    0%, 100% { background-position: 0 0, 0% 0%; }
    50% { background-position: 0 0, 100% 15%; }
  }
  .hero::before, .page-hero::before { animation: rays-drift 26s ease-in-out infinite; }
}
/* Fine film-grain texture on top of the rays — a small inline SVG noise
   tile, no image request, blended in at low opacity for a tactile,
   "premium material" feel rather than a flat gradient. */
.hero::after, .page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.055;
  mix-blend-mode: overlay;
  pointer-events: none;
}
/* Abstract vehicle silhouette, placeholder art until real photography is added (see README) */
.hero-backdrop { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero-car { position: absolute; right: -5%; bottom: -8%; width: min(62vw, 620px); height: auto; color: #fff; opacity: 0.16; }
@media (max-width: 700px) {
  .hero-car { opacity: 0.12; width: 85vw; right: -10%; }
}
/* Warm glow behind the headline — the one authored motion moment for the
   hero: a slow pulse, never a distracting scroll-linked effect. */
.hero-glow {
  position: absolute;
  top: 45%; left: 50%;
  width: 640px; height: 640px;
  max-width: 130vw;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--color-glow) 0%, rgba(251, 146, 60, 0) 70%);
  filter: blur(4px);
  opacity: 0.7;
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes glow-pulse {
    0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.85; transform: translate(-50%, -50%) scale(1.1); }
  }
  .hero-glow { animation: glow-pulse 8s ease-in-out infinite; }
}
/* ---- Homepage hero background video ----
   Replaces the gradient/stripe/glow treatment with real shop footage.
   Text/CTA layout and their fade-up-in animation are unchanged below;
   only the background layer differs. Scoped to .hero-video specifically
   so the compact .page-hero banner on the other five pages keeps its
   existing gradient + rays + grain treatment untouched. */
.hero-video::before, .hero-video::after { content: none; }
.hero-video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Semi-transparent navy gradient so headline/CTA stay readable over
   whatever's happening in the footage, without fully hiding it. */
.hero-video-overlay {
  position: absolute;
  inset: 0;
  /* ~50% less opaque than the original (0.88/0.72/0.6) so more of the
     actual shop footage shows through; text stays readable via the
     hero h1's own text-shadow below. Floor raised slightly (audit
     finding C2) -- the lightest stop was 0.3, which on a bright video
     frame could drop the on-video text below a verifiable contrast
     ratio; 0.38 keeps a comfortable margin without re-darkening the
     footage back toward the pre-grading look. */
  background: linear-gradient(
    135deg,
    rgba(20, 42, 69, 0.5) 0%,
    rgba(20, 42, 69, 0.42) 45%,
    rgba(30, 58, 95, 0.38) 100%
  );
}
.hero-content { position: relative; z-index: 1; }
.hero h1 { color: #fff; font-size: clamp(2.75rem, 6vw, 4rem); letter-spacing: -0.01em; text-shadow: 0 4px 40px rgba(0, 0, 0, 0.3); }
/* Emphasis via weight, not color (audit finding H2) — with the marquee
   background and the "Call Now" button both also orange, a third orange
   element in the same viewport (this in-headline word) diluted which one
   read as the actual primary action. Weight alone still sets it apart. */
.hero h1 .text-accent-bright { font-weight: 800; }
.hero p.lede { color: var(--color-on-dark-muted); max-width: 640px; margin-inline: auto; margin-top: var(--space-2); font-size: 1.125rem; }
.hero .btn { margin-top: var(--space-4); margin-inline: var(--space-1); }
.hero .btn-outline { border-color: #fff; color: #fff; }
.hero .btn-outline:hover { background: #fff; color: var(--color-primary); }

/* ---- Hero load-in (pure CSS, no JS dependency; skipped entirely for reduced motion) ---- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes fade-up-in {
    from { opacity: 0; transform: translateY(32px); }
    to { opacity: 1; transform: translateY(0); }
  }
  /* Duration cut from 1000ms and the lede's stagger delay dropped
     (audit finding M1): at the old pace the primary CTA didn't finish
     settling until ~1.2-1.3s after paint. Button delays trimmed
     proportionally so the whole sequence resolves well under 500ms. */
  .hero h1, .hero .lede, .hero .btn, .page-hero h1, .page-hero .lede {
    animation: fade-up-in 400ms linear(0, 0.0319, 0.1092, 0.2105, 0.3209, 0.4305, 0.5332, 0.6253, 0.7055, 0.7733, 0.8294, 0.8747, 0.9107, 0.9386, 0.9597, 0.9754, 0.9868, 0.9947, 1, 1.0033, 1.0052, 1.0061, 1.0063, 1.006, 1.0055, 1.0049, 1.0042, 1.0035, 1.0029, 1.0023, 1.0018, 1.0014, 1) both;
  }
  .hero .btn { animation-delay: 0.06s; }
  .hero .btn:nth-of-type(2) { animation-delay: 0.12s; }
}

/* ---- Page header (compact hero used on every non-home page) ---- */
.page-hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-5);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: var(--color-on-dark);
  text-align: center;
}
.page-hero .hero-content { position: relative; z-index: 1; }
.page-hero h1 { color: #fff; font-size: clamp(2rem, 4.5vw, 2.75rem); letter-spacing: -0.01em; }
.page-hero .lede { color: var(--color-on-dark-muted); max-width: 640px; margin-inline: auto; margin-top: var(--space-2); font-size: 1.125rem; }
.page-hero .hero-car { opacity: 0.1; width: min(45vw, 420px); }
/* Same glow as the home hero, scaled down to match the compact banner. */
.page-hero .hero-glow { width: 420px; height: 420px; opacity: 0.55; }

/* ---- Contact page ---- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: start; }
.contact-grid .card p { margin-bottom: var(--space-2); }
.map-embed { border: 0; border-radius: var(--radius); }
@media (max-width: 700px) {
  .contact-grid { grid-template-columns: 1fr; }
}