/* Bay Motors — site.css
   Locked brand constants live in README.md. Optimizer loop may tune spacing,
   sizes, and section styling; it may not change brand colors or remove the
   sticky call bar. */

:root {
  /* Dark theme (2026-07-13). Red brightened so it pops on dark. */
  --red: #e11d34;
  --red-dark: #b3162a;
  --ink: #0a0c10;      /* darkest surface: header, footer, bands, checker */
  --ink-soft: #9aa3ad; /* secondary / muted text on dark */
  --paper: #161a21;    /* raised surface: cards, inputs, FAQ, review cards */
  --smoke: #10131a;    /* alt section base */
  --line: #272c35;     /* borders on dark */
  --bg: #0b0d11;       /* page background */
  --text: #e7e9ec;     /* primary text */
  --gold: #fbbf24;     /* star rating, and the 'book it' urgency signal */
  /* Same signal, brightened for gold sitting on the hero video. Measured
     2026-08-07 against the brightest frame of the loop under the hero scrim:
     --gold lands at 4.01:1, under the 4.5 AA floor for 0.95rem bold text;
     this clears it at 4.64:1. Dark surfaces keep --gold (10.5:1 on --paper). */
  --gold-bright: #ffd24a;
  --green: #34d399;    /* the 'normal, no action needed' signal on diagnostic guides */
  --red-link: #ff5c68; /* brighter red for inline text links — passes WCAG AA on dark */
  --radius: 10px;
  --maxw: 1060px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
/* Anchored sections stop below the sticky header instead of under it. */
[id] { scroll-margin-top: 76px; }
body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--red-link); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

/* Header */
.site-header {
  background: var(--ink);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 3px solid var(--red);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
  gap: 12px;
}
.logo {
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: 0.06em;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}
.logo span { color: var(--red); }

/* Red neon glow on the wordmark — same red-glow language as the cards. */
.site-header .logo {
  animation: logo-glow 4.5s ease-in-out infinite;
}
@keyframes logo-glow {
  0%, 100% { text-shadow: 0 0 5px rgba(var(--rf-red), 0.40), 0 0 12px rgba(var(--rf-red), 0.26); }
  50%      { text-shadow: 0 0 9px rgba(var(--rf-red), 0.70), 0 0 22px rgba(var(--rf-red), 0.48); }
}
@media (prefers-reduced-motion: reduce) {
  .site-header .logo { animation: none; text-shadow: 0 0 8px rgba(var(--rf-red), 0.5); }
}

.header-phone {
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  white-space: nowrap;
}
.header-phone small { display: block; font-weight: 400; opacity: 0.75; font-size: 0.7rem; line-height: 1.1; }

/* Hero — looping shop-floor video behind the copy. The still poster stays as the
   layer-zero background so text never sits on white while the video loads, and
   remains the whole hero for reduced-motion visitors. Poster is a frame from the
   loop itself, so the swap-in is invisible. */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #0a0c10 url("/assets/img/hero-poster.jpg") center / cover no-repeat;
  color: #fff;
  padding: 72px 0 64px;
  text-align: center;
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* Owner call 2026-08-07: stop blacking out the footage. The old full-frame
   0.72 -> 0.86 scrim is gone. What replaces it is a SHAPED scrim that pools
   only behind the copy column and fades to nothing at the frame edges, so the
   shop reads bright while the copy still clears contrast on the brightest
   frames of the loop (the clip swings from near-black to a sunlit bay).
   To brighten further, lower the 0.62 stop first — that is the one over the
   words. Do not push it past about 0.4 without re-checking the sub copy. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(68% 62% at 50% 46%,
      rgba(6, 8, 12, 0.62) 0%,
      rgba(6, 8, 12, 0.34) 48%,
      rgba(6, 8, 12, 0.06) 78%,
      rgba(6, 8, 12, 0) 100%),
    linear-gradient(180deg,
      rgba(6, 8, 12, 0.28) 0%,
      rgba(6, 8, 12, 0) 26%,
      rgba(6, 8, 12, 0) 64%,
      rgba(6, 8, 12, 0.34) 100%);
}
.hero .wrap { position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
}

/* Pause control for the background loop. WCAG 2.2.2 is Level A and it applies to
   any autoplaying motion past five seconds, decorative or not; a reduced-motion
   media query is not a "mechanism for the user to pause". The button is hidden
   until the script actually attaches a video, so visitors who never get one (Data
   Saver, slow radio, reduced motion) are not offered a control over nothing. */
.hero-video-toggle {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 3;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(10, 12, 16, 0.72);
  color: #fff;
  cursor: pointer;
  transition: background 180ms cubic-bezier(0.22, 1, 0.36, 1), border-color 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-video-toggle[hidden] { display: none; }
.hero-video-toggle:hover { background: rgba(10, 12, 16, 0.88); border-color: #fff; }
/* Two bars = pause. Swaps to a single triangle once the video is stopped. */
.hero-video-toggle-icon {
  width: 12px;
  height: 14px;
  border-left: 4px solid currentColor;
  border-right: 4px solid currentColor;
}
.hero-video-toggle.is-paused .hero-video-toggle-icon {
  width: 0;
  height: 0;
  border-left: 12px solid currentColor;
  border-right: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  margin-left: 3px;
}
/* Label stays in the accessibility tree; the glyph carries it visually. */
.hero-video-toggle-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Neon sign headline (2026-08-07) ---------------------------------------
   Two layers, and only one of them ever moves:

   The tube   = a static multi-layer text-shadow on the real text. Painted once.
   The bloom  = ::before, a blurred duplicate of the words, animated on OPACITY
                ONLY so the pulse runs on the compositor and never repaints the
                playing video underneath it. Animating the text-shadow stack
                itself repaints the whole glow bounding box every frame, which
                is the expensive way to build this and it shows on mobile.

   The glyph fill stays WHITE on purpose. A red fill measures ~3.7:1 against the
   sunlit frames of this loop and fails AA; red lives in the halo, where it
   costs nothing in contrast. Real neon works the same way — the tube core is
   white hot and only the spill is coloured.

   ::before pulls its text from data-text on the h1. The `/ ""` second
   declaration gives that generated content empty alt text so screen readers
   skip the duplicate; browsers too old for that syntax keep the first
   declaration and announce the headline twice, which is the safe failure.
   ------------------------------------------------------------------------- */
.hero h1 {
  position: relative;
  isolation: isolate;
  font-size: clamp(1.9rem, 4.6vw, 3rem);
  line-height: 1.18;
  max-width: 20ch;
  margin: 0 auto 18px;
  font-weight: 800;
  letter-spacing: 0.005em; /* tubes need air; the old -0.02em choked the glow */
  color: #fff;
  text-shadow:
    0 0 3px rgba(255, 255, 255, 0.95),
    0 0 9px rgba(255, 118, 134, 0.9),
    0 0 20px rgba(var(--rf-red), 0.85),
    0 0 38px rgba(var(--rf-red), 0.55),
    0 2px 4px rgba(0, 0, 0, 0.8); /* holds the letterform on bright frames */
}
.hero h1::before {
  content: attr(data-text);
  content: attr(data-text) / "";
  position: absolute;
  inset: 0;
  z-index: -1;
  color: #ff2d4a;
  text-shadow:
    0 0 12px rgba(var(--rf-red), 1),
    0 0 30px rgba(var(--rf-red), 0.9),
    0 0 60px rgba(var(--rf-red), 0.7);
  filter: blur(3px);
  opacity: 0.8;
  transform: translateZ(0);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
/* Ambient spill — the light the sign throws on the room. Static texture, so the
   swell is transform + opacity only. */
.hero h1::after {
  content: "";
  position: absolute;
  inset: -38% -12%;
  z-index: -2;
  background: radial-gradient(56% 56% at 50% 50%,
    rgba(var(--rf-red), 0.50) 0%,
    rgba(var(--rf-red), 0.22) 44%,
    rgba(var(--rf-red), 0) 74%);
  filter: blur(10px);
  opacity: 0.7;
  transform: translateZ(0);
  pointer-events: none;
}
/* Motion is opt-in: the still neon sign is the default, so anything that fails
   to match the query gets the safe state rather than the moving one. The two
   periods are deliberately coprime-ish (3.6s / 5.2s) so the layers drift in and
   out of phase and the pulse never reads mechanical. */
@media (prefers-reduced-motion: no-preference) {
  .hero h1::before {
    will-change: opacity;
    animation: neon-breathe 3.6s ease-in-out infinite;
  }
  .hero h1::after {
    will-change: opacity, transform;
    animation: neon-bloom 5.2s ease-in-out infinite;
  }
}
/* Breathing, never flashing. Same rule as the rest of the red FX layer: a real
   neon flicker cycles fast enough to be a WCAG 2.3.1 seizure hazard. */
@keyframes neon-breathe {
  0%, 100% { opacity: 0.50; }
  50%      { opacity: 1; }
}
@keyframes neon-bloom {
  0%, 100% { opacity: 0.50; transform: translateZ(0) scale(0.97); }
  50%      { opacity: 0.95; transform: translateZ(0) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .hero h1::before,
  .hero h1::after { animation: none; }
}
/* Phones keep the letterform halo (cheap, opacity on a cached layer) but drop
   the wide ambient blob: an animated filtered layer stacked over a playing
   video can knock iOS Safari off the hardware video overlay path. */
@media (max-width: 640px) {
  .hero h1::after { display: none; }
}
@media (prefers-contrast: more) {
  .hero h1::before,
  .hero h1::after { display: none; }
  .hero h1 { text-shadow: 0 2px 6px rgba(0, 0, 0, 0.95); }
}
@media (forced-colors: active) {
  .hero h1::before,
  .hero h1::after { display: none; }
  .hero h1 { color: CanvasText; text-shadow: none; forced-color-adjust: none; }
}

.hero p.sub {
  max-width: 58ch;
  margin: 0 auto 28px;
  /* Tight shadow for edge definition + a wide one for the halo. Carries the
     copy now that the full-frame scrim is gone. */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 2px 14px rgba(0, 0, 0, 0.8);
  font-size: 1.05rem;
}
.cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
/* The ghost CTA was a transparent outline riding on a blacked-out hero. With the
   scrim lifted it needs its own body or it vanishes over a sunlit car panel.
   Flat fill, no backdrop-filter, for the reason on .hero .chip above. It also
   settles WCAG 1.4.11: the white label is visible content identifying the
   control, so the border no longer has to hold 3:1 against whatever frame is
   behind it, which is not a fight you can win against moving footage. */
.hero .btn-ghost {
  background: rgba(10, 12, 16, 0.7);
  border-color: rgba(255, 255, 255, 0.72);
}
.hero .btn-ghost:hover { background: rgba(10, 12, 16, 0.85); border-color: #fff; }

/* Explore buttons live in the red trust band (owner preference): white pills on
   red, sitting under the trust phrases. The band grows to hold both rows. */
.trust-cta {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 0 20px 14px;
}
.trust-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: var(--red);
  min-height: 44px;
  padding: 10px 20px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.95rem;
  text-decoration: none;
  transition: transform 0.2s ease, background 0.2s ease;
}
.trust-btn:hover { transform: translateY(-2px); background: rgba(255, 255, 255, 0.9); }
@media (prefers-reduced-motion: reduce) {
  .trust-btn:hover { transform: none; }
}

.btn {
  display: inline-block;
  padding: 15px 30px;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
}
.btn-call { background: var(--red); color: #fff; }
.btn-call:hover { background: var(--red-dark); }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.55); }
.btn-ghost:hover { border-color: #fff; }
.btn-ghost-dark { background: transparent; color: var(--text); border-color: var(--ink-soft); }

/* Trust strip */
.trust-strip { background: var(--red); color: #fff; }
.trust-strip { padding: 4px 0; }
.trust-strip ul {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 10px 40px;
  flex-wrap: wrap;
  padding: 12px 20px 10px;
  font-weight: 600;
  font-size: 0.95rem;
}

/* Sections */
section { padding: 56px 0; }
section.alt { background: var(--smoke); }
.section-title { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: 10px; font-weight: 800; }
.section-intro { color: var(--ink-soft); max-width: 62ch; margin-bottom: 32px; }

/* Cards */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
}
.card h3 { margin-bottom: 8px; font-size: 1.1rem; }
.card p { color: var(--ink-soft); font-size: 0.95rem; }
.card a.more { display: inline-block; margin-top: 10px; font-weight: 700; text-decoration: none; }

/* Proof */
.proof-bullets { list-style: none; display: grid; gap: 10px; max-width: 640px; }
.proof-bullets li { padding-left: 28px; position: relative; }
.proof-bullets li::before { content: "✓"; position: absolute; left: 0; color: var(--red); font-weight: 800; }

.photo-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 28px; }
.photo-row img { border-radius: var(--radius); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }

/* Call-first banner */
.call-first { background: var(--ink); color: #fff; text-align: center; }
.call-first h2 { font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: 12px; }
.call-first p { max-width: 58ch; margin: 0 auto 24px; opacity: 0.92; }

/* FAQ */
.faq details {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 10px;
  background: var(--paper);
}
.faq summary {
  padding: 16px 48px 16px 18px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--red);
  font-weight: 800;
}
.faq details[open] summary::after { content: "–"; }
.faq details p { padding: 0 18px 16px; color: var(--ink-soft); }

/* Content pages (service pages) */
.content h1 { font-size: clamp(1.7rem, 4vw, 2.5rem); margin-bottom: 14px; }
.content h2 { font-size: 1.35rem; margin: 34px 0 10px; }
.content p { margin-bottom: 14px; max-width: 68ch; }
.content ul { margin: 0 0 14px 22px; }
.content ul li { margin-bottom: 6px; }
.lead-cta { margin: 22px 0 8px; }

/* Form */
.lead-form { max-width: 520px; display: grid; gap: 14px; }
.lead-form label { font-weight: 600; font-size: 0.92rem; display: grid; gap: 6px; }
.lead-form input[type="text"],
.lead-form input[type="tel"],
.lead-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  background: var(--paper);
}
.lead-form textarea { min-height: 110px; resize: vertical; }
.lead-form .consent { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 0.88rem; color: var(--ink-soft); }
.lead-form .consent input { margin-top: 3px; }
.form-note { font-size: 0.88rem; color: var(--ink-soft); }
.form-status { font-weight: 700; min-height: 1.4em; }
.form-status.err { color: var(--red); }
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 32px; align-items: start; }
.contact-card p { margin-bottom: 10px; }
.contact-card strong { display: block; }

/* Footer */
.site-footer { background: var(--ink); color: rgba(255, 255, 255, 0.85); padding: 40px 0 90px; font-size: 0.92rem; border-top: 1px solid var(--line); }
.site-footer a { color: #fff; }
.site-footer .route-line { margin: 14px 0; max-width: 62ch; }
.site-footer .fine { opacity: 0.6; margin-top: 18px; font-size: 0.8rem; }

/* Sticky mobile call bar — LOCKED: do not remove */
.callbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: none;
  gap: 8px;
  background: var(--ink);
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
}
.callbar a {
  flex: 1;
  text-align: center;
  padding: 13px 8px;
  font-weight: 800;
  text-decoration: none;
  border-radius: 8px;
  font-size: 1rem;
}
.callbar .cb-call { background: var(--red); color: #fff; }
.callbar .cb-text { background: #fff; color: var(--ink); }

@media (max-width: 760px) {
  .callbar { display: flex; }
  .hero { padding: 52px 0 46px; }
  section { padding: 40px 0; }
}

/* Accessibility */
.btn:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid #4d9fff;
  outline-offset: 2px;
}
.skip-link {
  position: absolute;
  left: -9999px;
  background: #fff;
  color: var(--ink);
  padding: 10px 16px;
  z-index: 100;
}
.skip-link:focus { left: 10px; top: 10px; }

/* ===== v2 design layer (2026-07-13) ===== */

/* Eyebrow labels above section titles */
.eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--red);
  margin-bottom: 8px;
}

/* Checkered brand accent (from the racing bumper) */
.checker {
  height: 12px;
  background:
    repeating-conic-gradient(var(--ink) 0% 25%, #fff 0% 50%) 0 0 / 24px 24px;
  opacity: 0.9;
}

/* Hero rating line */
.hero-rating {
  margin-top: 22px;
  font-weight: 700;
  font-size: 0.98rem;
}
/* Only the hero copy sits on video; the same class is reused on dark bands. */
.hero .hero-rating { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 2px 12px rgba(0, 0, 0, 0.75); }
.hero .hero-rating .stars { color: var(--gold-bright); }
.hero-rating .stars { color: var(--gold); letter-spacing: 2px; margin-right: 8px; }
.hero-rating a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.hero-rating-sub { margin-top: 6px; font-size: 0.86rem; font-weight: 400; color: var(--ink-soft); }

/* Trust chips */
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 18px; }
.chip {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 0.85rem;
  font-weight: 600;
}
/* In the hero the chips sit straight on moving footage, so they carry their own
   panel instead of leaning on a full-frame scrim. Deliberately a flat fill and
   NOT backdrop-filter: a blur over a playing video re-runs every frame because
   the backdrop is invalidated 24 times a second and can never be cached, which
   is the single most expensive thing you can put over a hero loop. Four chips
   plus the ghost button would have been five of them. The opaque fill costs
   nothing and is what actually carries the contrast anyway. */
.hero .chip {
  background: rgba(10, 12, 16, 0.66);
  border-color: rgba(255, 255, 255, 0.38);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* How it works — 3 steps */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; counter-reset: step; }
.step {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 22px 22px;
  position: relative;
}
.step::before {
  counter-increment: step;
  content: counter(step);
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-weight: 800;
  font-size: 1.1rem;
  margin-bottom: 12px;
}
.step h3 { margin-bottom: 6px; font-size: 1.12rem; }
.step p { color: var(--ink-soft); font-size: 0.95rem; }

/* Review wall — CSS-only scrolling columns (real Google reviews only) */
.review-wall {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  max-height: 540px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 86%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 86%, transparent);
}
.review-col { display: flex; flex-direction: column; gap: 18px; animation: reviewScroll var(--dur, 30s) linear infinite; }
.review-wall:hover .review-col { animation-play-state: paused; }
@keyframes reviewScroll { to { transform: translateY(-50%); } }
.review-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 6px 18px rgba(18, 21, 26, 0.06);
}
.review-card .stars { color: var(--gold); letter-spacing: 2px; font-size: 0.95rem; }
.review-card blockquote { margin: 10px 0 12px; color: var(--ink-soft); font-size: 0.95rem; }
.review-card figcaption { font-weight: 700; font-size: 0.9rem; }
.review-card figcaption small { display: block; font-weight: 400; color: var(--ink-soft); }
.review-links { margin-top: 22px; display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
/* Touch screens can't hover-pause the scroll, so on phones the wall goes
   static: all four real reviews stacked, duplicates hidden, nothing moving. */
@media (max-width: 700px) {
  .review-wall {
    grid-template-columns: 1fr;
    max-height: none;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .review-col { animation: none; }
  .review-wall [aria-hidden="true"] { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .review-col { animation: none; }
  .review-wall { max-height: none; -webkit-mask-image: none; mask-image: none; }
  .review-col [aria-hidden="true"] { display: none; }
}

/* ===== Red FX layer (2026-07-13) =====
   Three subtle red effects, tuned way down so they sit behind the message,
   never in front of it. Everything here is decorative (pointer-events: none)
   and every animation is disabled under prefers-reduced-motion. The "strobe"
   is a SLOW breathing pulse on purpose — a real fast flash is a seizure/WCAG
   hazard, so it never flashes; it drifts. */

:root {
  --rf-red: 225, 29, 52;      /* brightened red as rgb parts, for alpha blends */
}

/* --- Aurora backdrop (dark theme). Two fixed layers behind all content:
   soft red glow pools + rising red light rays. The hero, header, trust strip,
   dark bands and footer are opaque, so they cover it — the aurora reads
   everywhere EXCEPT the hero, which is exactly what was asked for. --- */

/* Layer 1: soft red glow pools. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(58% 45% at 6% 2%,    rgba(var(--rf-red), 0.20), transparent 60%),
    radial-gradient(55% 45% at 98% 26%,  rgba(var(--rf-red), 0.16), transparent 62%),
    radial-gradient(70% 55% at 50% 106%, rgba(var(--rf-red), 0.24), transparent 66%);
}

/* Layer 2: the aurora rays, rising from the base and fading out near the top. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 50px,
      rgba(var(--rf-red), 0.16) 50px 52px,
      transparent 52px 104px
    );
  -webkit-mask-image: linear-gradient(to bottom, transparent 8%, #000 62%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 8%, #000 62%, #000 100%);
  filter: blur(2.5px);
  opacity: 0.6;
  animation: rf-drift 26s linear infinite;
}
@keyframes rf-drift {
  to { transform: translateY(-104px); }   /* one ray period, seamless loop */
}

/* Alt sections sit a touch lighter than the page and translucent, so the
   aurora backdrop breathes through instead of being a flat panel. */
section.alt { background: rgba(22, 26, 33, 0.55); }

/* Dark-theme form legibility. */
.lead-form input[type="text"],
.lead-form input[type="tel"],
.lead-form textarea { color: var(--text); }
.lead-form ::placeholder { color: rgba(231, 233, 236, 0.42); }
.form-status.ok { color: #34d399; }

/* Directions buttons (Google + Apple) in the contact block. */
.map-btns { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0 8px; }
.map-btns .btn { padding: 11px 18px; font-size: 0.95rem; }

/* Real photo on service / content pages. */
.content-photo { margin: 10px 0 28px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35); }
.content-photo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.content-photo figcaption { padding: 10px 14px; font-size: 0.86rem; color: var(--ink-soft); background: var(--paper); }

/* Full services list (pulled from the shop's own listing). */
.services-all { margin-top: 34px; }
.services-all h3 { font-size: 1.15rem; margin-bottom: 14px; }
.service-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 8px 22px;
}
.service-list li { position: relative; padding-left: 26px; color: var(--ink-soft); font-size: 0.96rem; }
.service-list li::before { content: "✓"; position: absolute; left: 0; color: var(--red); font-weight: 800; }

/* Video thumbnails that link out to the social posts (9:16 shorts). */
.video-row { display: flex; gap: 26px; flex-wrap: wrap; align-items: center; margin-top: 28px; }
.video-copy { max-width: 40ch; }
.video-copy p { color: var(--ink-soft); margin-bottom: 12px; font-size: 1.02rem; }
.video-links a { color: var(--red-link); text-decoration: underline; font-weight: 600; }
.video-links a:hover { text-decoration: underline; }
.video-thumb {
  position: relative;
  display: block;
  width: 220px;
  aspect-ratio: 9 / 16;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.video-thumb:hover { transform: translateY(-4px); box-shadow: 0 16px 38px rgba(var(--rf-red), 0.22); }
.video-thumb img { width: 100%; height: 100%; object-fit: cover; }
.video-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: rgba(225, 29, 52, 0.92);
  display: grid;
  place-items: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  transition: transform 0.25s ease;
}
.video-thumb:hover .video-play { transform: scale(1.08); }
.video-play::before {
  content: "";
  width: 0;
  height: 0;
  margin-left: 5px;
  border-left: 20px solid #fff;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
}
@media (max-width: 520px) {
  .video-thumb { width: calc(50% - 9px); }
}

/* Cookie / privacy notice. Injected by site.js; sits above the mobile call bar,
   never over it, so the call button is never blocked. */
.cookie-note {
  position: fixed;
  z-index: 55;
  left: 16px;
  bottom: 16px;
  width: min(420px, calc(100vw - 32px));
  background: var(--paper);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 15px 17px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
  transform: translateY(16px);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.cookie-note.cookie-show { transform: none; opacity: 1; }
.cookie-note.cookie-hide { opacity: 0; transform: translateY(16px); }
.cookie-note p { margin: 0 0 12px; font-size: 0.9rem; line-height: 1.5; color: var(--ink-soft); }
.cookie-note p a { color: var(--red-link); }
.cookie-actions { display: flex; gap: 10px; }
.btn-cookie-accept {
  flex: 1;
  background: var(--red);
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 10px 14px;
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
  font-family: inherit;
}
.btn-cookie-accept:hover { background: var(--red-dark); }
.btn-cookie-decline {
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 14px;
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  font-family: inherit;
}
.btn-cookie-decline:hover { color: var(--text); border-color: var(--ink-soft); }
@media (max-width: 760px) {
  .cookie-note { bottom: calc(74px + env(safe-area-inset-bottom)); width: min(360px, calc(100vw - 88px)); }
}

/* Click-to-load map (keyless, opt-in so the page stays cookieless by default). */
.map-embed { margin-top: 14px; }
.map-load {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--ink-soft);
  border-radius: 8px;
  padding: 11px 18px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.map-load:hover { border-color: var(--red); }
.map-embed iframe { width: 100%; height: 320px; border: 0; border-radius: 12px; }

/* Chat launcher (call-first). Bottom-right; clears the mobile call bar. */
.chat-fab {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 58;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  border: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06);
  transition: transform 0.2s ease, background 0.2s ease;
}
.chat-fab:hover { background: var(--red-dark); transform: translateY(-2px); }
.chat-panel {
  position: fixed;
  right: 18px;
  bottom: 88px;
  z-index: 59;
  width: min(340px, calc(100vw - 32px));
  background: var(--paper);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.chat-panel.chat-open { opacity: 1; transform: none; pointer-events: auto; }
.chat-close {
  position: absolute;
  top: 11px;
  right: 12px;
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
.chat-head { background: var(--ink); padding: 14px 40px 14px 16px; }
.chat-head strong { display: block; font-size: 1rem; }
.chat-head span { font-size: 0.82rem; color: var(--ink-soft); }
.chat-body { padding: 14px 16px; display: grid; gap: 8px; max-height: 62vh; overflow-y: auto; }
.chat-act { display: block; text-align: center; text-decoration: none; font-weight: 700; border-radius: 10px; padding: 11px 12px; font-size: 0.92rem; }
.chat-act.call { background: var(--red); color: #fff; }
.chat-act.text { background: rgba(255, 255, 255, 0.08); color: var(--text); border: 1px solid var(--line); }
.chat-q { text-align: left; background: transparent; color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 0.9rem; cursor: pointer; }
.chat-q:hover { border-color: var(--red); }
.chat-msg { background: rgba(var(--rf-red), 0.12); border: 1px solid rgba(var(--rf-red), 0.25); border-radius: 10px; padding: 10px 12px; font-size: 0.9rem; }
@media (max-width: 760px) {
  .chat-fab { bottom: calc(74px + env(safe-area-inset-bottom)); right: 14px; width: 52px; height: 52px; }
  .chat-panel { bottom: calc(136px + env(safe-area-inset-bottom)); right: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .chat-fab, .chat-panel { transition: opacity 0.2s ease; }
}
@media (prefers-reduced-motion: reduce) {
  .cookie-note { transition: opacity 0.3s ease; }
}

/* --- Photo gallery: clean horizontal snap carousel (all screens). Reliable and
   sharp; the 3D ring distorted landscape photos, so this is the better product. --- */
.gallery {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(300px, 44%);
  gap: 16px;
  margin-top: 30px;
  padding: 4px 2px 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--rf-red), 0.6) transparent;
}
.gallery::-webkit-scrollbar { height: 8px; }
.gallery::-webkit-scrollbar-thumb { background: rgba(var(--rf-red), 0.5); border-radius: 999px; }
.gallery-card {
  position: relative;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  scroll-snap-align: start;
  border: 1px solid var(--line);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4);
}
.gallery-card img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.gallery-card:hover img { transform: scale(1.05); }
.gallery-card figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 30px 16px 14px;
  color: #fff;
  font-weight: 700;
  font-size: 0.96rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
}
.gallery:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; border-radius: 8px; }
@media (max-width: 700px) {
  .gallery { grid-auto-columns: minmax(240px, 84%); }
}

/* --- Footer: multi-column layout --- */
.footer-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1.3fr;
  gap: 32px;
  padding-bottom: 8px;
}
.footer-brand .logo { font-size: 1.35rem; }
.footer-brand p { margin: 12px 0 14px; max-width: 34ch; opacity: 0.8; }
.footer-phone { color: #fff; font-weight: 800; font-size: 1.2rem; text-decoration: none; }
.footer-col h3 {
  color: #fff;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 12px;
}
.footer-col ul { list-style: none; display: grid; gap: 9px; }
.footer-col a { color: rgba(255, 255, 255, 0.8); text-decoration: none; }
.footer-col a:hover { color: #fff; }
.footer-col p { margin-bottom: 10px; opacity: 0.8; }
.footer-maps { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.footer-maps a {
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.85rem;
  color: #fff;
  text-decoration: none;
}
.footer-maps a:hover { border-color: var(--red); background: rgba(var(--rf-red), 0.18); }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  margin-top: 30px;
  padding-top: 18px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}
.footer-bottom .fine { margin: 0; }
.footer-bottom .route-line { margin: 0; max-width: 52ch; }
@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 26px; }
  .footer-brand { grid-column: 1 / -1; }
}

@keyframes rf-breathe {
  0%, 100% { opacity: 0.34; }
  50%      { opacity: 0.62; }
}

/* Echo the same slow strobe on the dark call-first band so the effect reads
   as a site-wide ambient, not a one-off. */
.call-first { position: relative; overflow: hidden; }
.call-first > .wrap { position: relative; z-index: 2; }
.call-first::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(70% 120% at 50% 130%, rgba(var(--rf-red), 0.30), transparent 70%);
  opacity: 0.5;
  animation: rf-breathe 9s ease-in-out infinite;
}

/* --- 3. Glowing red border traced on card hover --- */
@property --rf-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.card, .step {
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.card:hover, .step:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--rf-red), 0.55);
  box-shadow: 0 12px 34px rgba(var(--rf-red), 0.20), 0 0 0 1px rgba(var(--rf-red), 0.28);
}

/* Traced-light ring removed 2026-07-15 — replaced by the cursor spotlight. */


/* Kill every red-FX animation for reduced-motion users; keep a static, calm
   glow on hover so the affordance still reads. */
@media (prefers-reduced-motion: reduce) {
  .call-first::before, body::after { animation: none; }
}

/* ===== Mobile layer (2026-07-13) =====
   Phones get the same brand, tuned for touch: full-width thumb-sized CTAs,
   a static aurora (a fixed full-screen blurred layer animating forever drains
   battery and janks scroll on low-end phones), and a header that never
   overflows at 320px. */

@media (max-width: 760px) {
  /* Rays stay as ambient texture; only the endless drift stops. */
  body::after { animation: none; }
  .site-header .logo { animation: none; text-shadow: 0 0 8px rgba(var(--rf-red), 0.5); }
}

@media (max-width: 520px) {
  /* Hero + service-page CTAs: one thumb-sized button per row. */
  .cta-row { flex-direction: column; align-items: stretch; }
  .cta-row .btn { text-align: center; padding: 16px 20px; }
  .trust-cta { flex-direction: column; align-items: stretch; }
  .trust-btn { justify-content: center; }
  .map-btns { flex-direction: column; align-items: stretch; }
  .map-btns .btn { text-align: center; }
}

@media (max-width: 400px) {
  .wrap { padding: 0 16px; }
  .logo { font-size: 1.1rem; }
  .header-phone { font-size: 0.95rem; }
}

/* ===== After-hours layer (2026-07-13) =====
   site.js flips these on when the shop is closed (PT). Texting becomes the
   primary action; calling stays available but stops pretending someone will
   pick up. Button copy is untouched — only emphasis and order change. */

.hours-note {
  max-width: 58ch;
  margin: 0 0 16px;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--gold);
}
/* Only the hero copy sits on video, so only it needs the brightened gold.
   Gold is the one colour here that cannot clear AA on its own: against the
   worst pixel the loop can produce it reaches 4.00:1, under the 4.5 floor for
   0.95rem bold. So it carries the same flat pill the chips use, which takes it
   to roughly 12:1 and, conveniently, makes the "book it" line read louder. */
.hero .hours-note {
  display: inline-block;
  margin: 0 auto 16px;
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(10, 12, 16, 0.66);
  color: var(--gold-bright);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}
/* The slot is empty until site.js fills it. Strip the pill visuals rather than
   the box: the min-height below it is reserving the line to stop the CTAs
   jumping when the hours text lands, and display:none would give that up. */
.hero .hours-note:empty { background: none; padding-top: 0; padding-bottom: 0; }
.hours-note[data-hours-slot] { min-height: 1.5em; }
@media (max-width: 760px) { .hero .hours-note[data-hours-slot] { min-height: 3em; } }

.callbar.after-hours .cb-text { order: -1; background: var(--red); color: #fff; }
.callbar.after-hours .cb-call { background: #fff; color: var(--ink); }

.chat-panel.after-hours .chat-act.call { background: rgba(255, 255, 255, 0.08); color: var(--text); border: 1px solid var(--line); }
.chat-panel.after-hours .chat-act.text { background: var(--red); color: #fff; border: 0; }

/* Site nav — multi-page restructure 2026-07-15 */
.site-nav { display: flex; gap: 18px; overflow-x: auto; min-width: 0; scrollbar-width: none; }
.site-nav::-webkit-scrollbar { display: none; }
.site-nav a { color: #fff; text-decoration: none; font-weight: 600; font-size: 0.92rem; white-space: nowrap; opacity: 0.9; padding: 4px 0; }
.site-nav a:hover, .site-nav a[aria-current="page"] { opacity: 1; box-shadow: 0 2px 0 var(--red); }
@media (max-width: 760px) {
  .site-header .wrap { flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
  .site-nav { order: 3; width: 100%; gap: 16px; padding-bottom: 4px; }
}

/* Home review teaser (full wall lives on /reviews/) */
.review-teaser { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; }
@media (max-width: 760px) { .review-teaser { grid-template-columns: 1fr; } }

/* Compact contact strip on home */
.contact-strip { text-align: center; }
.contact-strip p { max-width: 60ch; margin: 0 auto 18px; }

/* Ambient aurora — 2026-07-15. Slow red beams drifting through the dark
   sections (never the hero: that stays a clean photo). Translated from the
   aurora-section-hero component, dialed down: fewer beams, 14-24s cycles,
   soft fade in/out, plus a slow pulsing glow. Layers are injected by site.js.
   transform/opacity only; disabled under prefers-reduced-motion. */
.has-aurora { position: relative; overflow: hidden; }
.has-aurora > .wrap { position: relative; z-index: 1; }
.ambient-beams, .ambient-glow { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.ambient-beams { overflow: hidden; }
.ambient-beams span {
  position: absolute;
  bottom: -20%;
  height: 65%;
  border-radius: 2px;
  background: linear-gradient(to top,
    rgba(200, 16, 46, 0) 0%,
    rgba(200, 16, 46, 0.50) 40%,
    rgba(255, 96, 120, 0.68) 52%,
    rgba(255, 176, 188, 0.62) 60%,
    rgba(200, 16, 46, 0) 100%);
  opacity: 0;
  animation-name: auroraDrift;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  will-change: transform, opacity;
}
@keyframes auroraDrift {
  0%   { transform: translateY(115%); opacity: 0; }
  25%  { opacity: 0.85; }
  55%  { opacity: 0.55; }
  80%  { opacity: 0.2; }
  100% { transform: translateY(-190%); opacity: 0; }
}
.ambient-glow {
  background: radial-gradient(ellipse 60% 55% at var(--gx, 30%) 100%,
    rgba(200, 16, 46, 0.24) 0%, rgba(200, 16, 46, 0.10) 50%, rgba(200, 16, 46, 0) 75%);
  animation: auroraPulse var(--gdur, 16s) ease-in-out infinite alternate;
  will-change: transform, opacity;
}
@keyframes auroraPulse {
  from { transform: scale(0.94); opacity: 0.55; }
  to   { transform: scale(1.06); opacity: 1; }
}
.aurora-paused .ambient-beams span,
.aurora-paused .ambient-glow { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .ambient-beams, .ambient-glow { display: none; }
}

/* Desktop layout pass 2026-07-15 — one responsive site, not two.
   The "bad on desktop" complaint was the 1060px column floating on big screens. */
@media (min-width: 1280px) {
  .wrap { max-width: 1240px; }
  /* Cap review card measure: 2 uncapped columns at 1240px+ push quotes past 75ch */
  .review-wall { grid-template-columns: repeat(2, minmax(0, 580px)); justify-content: center; gap: 24px; }
  .hero { padding: 108px 0 96px; }
  .hero h1 { font-size: 3.4rem; max-width: 24ch; }
  .hero p.sub { font-size: 1.15rem; max-width: 64ch; }
}
@media (min-width: 1800px) {
  .wrap { max-width: 1400px; }
}

/* Spotlight cards — 2026-07-15. Recreated from the 21st.dev spotlight-card
   reference in Bay Motors red. Injected elements (.spot-ring/.spot-sheen), NOT
   pseudo-elements: .step::before draws the numbered badge and .card::after was
   the traced-light ring, so pseudos here caused collisions. site.js injects
   the layers and drives --sx/--sy/--spot-o; hover-capable pointers only. */
.spot { position: relative; }
.spot-ring, .spot-sheen {
  position: absolute;
  border-radius: inherit;
  opacity: var(--spot-o, 0);
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.spot-ring {
  inset: -1px;
  padding: 1px;
  background: radial-gradient(300px circle at var(--sx, 50%) var(--sy, 50%),
    rgba(255, 116, 138, 1), rgba(200, 16, 46, 0.5) 42%, transparent 74%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  z-index: 2;
}
.spot-sheen {
  inset: -30px;
  border-radius: 0;
  background: radial-gradient(360px circle at calc(var(--sx, 50%) + 30px) calc(var(--sy, 50%) + 30px),
    rgba(200, 16, 46, 0.16), transparent 62%);
  z-index: 0;
}
@media (prefers-reduced-motion: reduce) {
  .spot-ring, .spot-sheen { transition: none; }
}