/* ── 401 AUTO SPA — logo, video hero, results showcase ── */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── logo placements ── */
.nav-logo { display: block; height: 44px; width: auto; }
.hero-logo {
  display: block;
  width: min(72vw, 30rem);
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 10px 40px rgba(0, 0, 0, 0.75));
}
.footer-logo { display: block; margin: 2.8rem auto 0; height: 56px; width: auto; opacity: 0.9; }

/* ── hero video background ── */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1200ms ease;
}
.hero-video.visible { opacity: 1; }
.hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8, 8, 10, 0.86) 0%, rgba(8, 8, 10, 0.62) 40%, rgba(8, 8, 10, 0.88) 100%),
    radial-gradient(90% 70% at 50% 45%, rgba(8, 8, 10, 0.1), rgba(8, 8, 10, 0.75));
}
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
  .hero .hero-backdrop {
    background: url("media/hero-poster.jpg") center / cover no-repeat;
  }
}

/* ── before / after slider ── */
.ba-slider {
  --pos: 50%;
  position: relative;
  max-width: 56rem;
  margin: 3rem auto 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--line);
  user-select: none;
  touch-action: pan-y;
}
.ba-slider img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ba-after {
  position: absolute;
  inset: 0;
  clip-path: inset(0 0 0 var(--pos));
}
.ba-handle {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--pos);
  width: 2px;
  margin-left: -1px;
  background: linear-gradient(180deg, var(--gold-deep), var(--gold-bright), var(--gold-deep));
  pointer-events: none;
}
.ba-knob {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 2.6rem; height: 2.6rem;
  border-radius: 50%;
  background: rgba(8, 8, 10, 0.75);
  border: 1px solid var(--gold);
  color: var(--gold-bright);
  font-size: 0.8rem;
  backdrop-filter: blur(4px);
}
@media (prefers-reduced-motion: no-preference) {
  .ba-knob::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    border: 1px solid var(--gold);
    animation: knob-ping 2.6s var(--ease-out) infinite;
    pointer-events: none;
  }
  @keyframes knob-ping {
    0%   { transform: scale(1); opacity: 0.75; }
    70%, 100% { transform: scale(2); opacity: 0; }
  }
}
.ba-range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: ew-resize;
  margin: 0;
}
.ba-tag {
  position: absolute;
  bottom: 0.9rem;
  padding: 0.3em 0.9em;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  background: rgba(8, 8, 10, 0.7);
  border: 1px solid var(--line);
  color: var(--text);
  pointer-events: none;
}
.ba-tag-before { left: 0.9rem; }
.ba-tag-after { right: 0.9rem; color: var(--gold-bright); }

/* ── results gallery ── */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
  margin-top: 3rem;
}
.g-item {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line-faint);
  grid-column: span 2;
  aspect-ratio: 4 / 3;
}
.g-wide { grid-column: span 4; aspect-ratio: auto; }
.g-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 700ms var(--ease-out), filter 700ms;
  filter: saturate(0.92);
}
.g-item:hover img { transform: scale(1.05); filter: saturate(1.05); }
.g-item figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.4rem 1rem 0.8rem;
  background: linear-gradient(180deg, transparent, rgba(8, 8, 10, 0.85));
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-bright);
  opacity: 0.85;
  transform: translateY(0.35rem);
  transition: opacity 500ms, transform 500ms var(--ease-out);
}
.g-item:hover figcaption { opacity: 1; transform: none; }
@media (max-width: 760px) {
  .gallery-grid { grid-template-columns: 1fr 1fr; }
  .g-item, .g-wide { grid-column: span 2; aspect-ratio: 16 / 10; }
}
.gallery-note {
  margin-top: 1.6rem;
  text-align: center;
  font-size: 0.82rem;
  color: var(--text-faint);
  letter-spacing: 0.06em;
}