.v-hero {
  position: relative;
  height: 100vh;
  min-height: 580px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

/* Mobile: trim hero so a sliver of the next section shows (100vh/vh alone often fills the glass on iOS). */
@media (max-width: 768px) {
  .v-hero {
    height: calc(100vh - var(--nav-height));
    height: calc(100svh - var(--nav-height));
    min-height: 0;
  }
}

.v-hero__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* Running gallery: crossfading slides with a slow Ken Burns zoom */
.v-hero__slide {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 1.4s ease;
  will-change: opacity, transform;
}

.v-hero__slide.is-active {
  opacity: 1;
  animation: vHeroKenBurns 8s ease forwards;
}

@keyframes vHeroKenBurns {
  from { transform: scale(1.08); }
  to   { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .v-hero__slide { transition: none; }
  .v-hero__slide.is-active { animation: none; transform: scale(1); }
}

.v-hero__overlay {
  position: absolute;
  inset: 0;
  /* Darker in the upper-mid band where centered hero text sits; keeps sky/highlight areas readable */
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.24) 0%,
    rgba(0, 0, 0, 0.38) 42%,
    rgba(0, 0, 0, 0.66) 100%
  );
}

.v-hero__content {
  position: relative;
  z-index: 1;
  padding: 0 var(--sp-4);
  max-width: 720px;
}

.v-hero__eyebrow {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  /* Stronger than body tagline: eyebrow is small + wide tracking; needs contrast on bright hero crops */
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 0, 0, 0.25);
  margin-bottom: var(--sp-3);
}

.v-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 9vw, 7rem);
  font-weight: 800;
  color: #fff;
  line-height: 1;
  margin-bottom: var(--sp-2);
}

.v-hero__title em {
  font-style: italic;
  color: var(--accent);
}

.v-hero__tagline {
  font-size: clamp(var(--text-base), 2vw, var(--text-xl));
  color: rgba(255, 255, 255, 0.68);
  margin-bottom: var(--sp-6);
  font-weight: 400;
}

.v-hero__actions {
  display: flex;
  gap: var(--sp-3);
  justify-content: center;
  flex-wrap: wrap;
}

.v-hero__scroll {
  position: absolute;
  bottom: 28px;
  left: 50%;
  z-index: 2;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65), 0 0 12px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}

.v-hero__scroll:hover {
  color: var(--accent-light);
}

.v-hero__scroll:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.v-hero__scroll i {
  animation: vbounce 2s ease-in-out infinite;
}

@keyframes vbounce {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(7px);
  }
}

/* ============================================================
   HERO CAROUSEL (hero-cx) — per-slide captions on a pure-CSS
   radio carousel, progressively enhanced by JS (autoplay,
   arrows, keyboard, swipe). Ported from sepconsystems.com and
   recoloured to the MotoRover dark + gold theme.
   ============================================================ */
.hero-cx {
  position: relative;
  height: 85vh;
  min-height: 520px;
  max-height: 820px;
  background: var(--bg);
  overflow: hidden;
  isolation: isolate;
}

@media (max-width: 768px) {
  .hero-cx {
    height: calc(100vh - var(--nav-height));
    height: calc(100svh - var(--nav-height));
    min-height: 0;
    max-height: none;
  }
}

.cx-radio { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); border: 0; white-space: nowrap; }
.cx-track { position: absolute; inset: 0; z-index: 0; }
.cx-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .9s ease; }
.cx-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.cx-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,8,8,.46) 0%, rgba(8,8,8,.56) 48%, rgba(8,8,8,.88) 100%);
}
#cx-1:checked~.cx-track #cxs-1,#cx-2:checked~.cx-track #cxs-2,#cx-3:checked~.cx-track #cxs-3,#cx-4:checked~.cx-track #cxs-4,#cx-5:checked~.cx-track #cxs-5,#cx-6:checked~.cx-track #cxs-6 { opacity: 1; visibility: visible; }

@media (prefers-reduced-motion: no-preference) {
  .cx-slide img { transform: scale(1.05); transition: transform 8s ease, opacity .9s ease; }
  #cx-1:checked~.cx-track #cxs-1 img,#cx-2:checked~.cx-track #cxs-2 img,#cx-3:checked~.cx-track #cxs-3 img,#cx-4:checked~.cx-track #cxs-4 img,#cx-5:checked~.cx-track #cxs-5 img,#cx-6:checked~.cx-track #cxs-6 img { transform: scale(1); }
  .cx-cap-inner { opacity: 0; transform: translateY(20px); transition: opacity .7s ease .2s, transform .7s ease .2s; }
  #cx-1:checked~.cx-track #cxs-1 .cx-cap-inner,#cx-2:checked~.cx-track #cxs-2 .cx-cap-inner,#cx-3:checked~.cx-track #cxs-3 .cx-cap-inner,#cx-4:checked~.cx-track #cxs-4 .cx-cap-inner,#cx-5:checked~.cx-track #cxs-5 .cx-cap-inner,#cx-6:checked~.cx-track #cxs-6 .cx-cap-inner { opacity: 1; transform: none; }
}

.cx-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: clamp(2rem,6vw,4rem) clamp(1rem,4vw,2rem) clamp(3.6rem,8vw,5.2rem); }
.cx-cap-inner { max-width: var(--container-max); margin-inline: auto; color: #fff; }

/* Refined, reduced caption: a place name, a quiet tour-type label, one understated CTA */
.cx-place { font-family: var(--font-display); font-weight: 700; color: #fff; line-height: 1; letter-spacing: -.02em; font-size: clamp(2.8rem, 2rem + 4.4vw, 5.25rem); text-shadow: 0 2px 30px rgba(0,0,0,.45); }
.cx-kind { margin-top: clamp(.7rem,1.6vw,1.05rem); font-family: var(--font-body); font-weight: 600; font-size: clamp(.72rem,.9vw,.82rem); letter-spacing: .26em; text-transform: uppercase; color: var(--accent); }
.cx-date { color: rgba(255,255,255,.85); letter-spacing: .16em; }
.cx-date::before { content: "·"; margin: 0 .65em; color: rgba(255,255,255,.5); letter-spacing: 0; }
.cx-more {
  display: inline-flex; align-items: center; gap: .7em;
  margin-top: clamp(1.5rem,3vw,2.2rem); padding-bottom: .35rem;
  font-family: var(--font-body); font-weight: 600; font-size: .78rem; letter-spacing: .22em; text-transform: uppercase;
  color: #fff; text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.45);
  transition: color .2s ease, border-color .2s ease, gap .2s ease;
}
.cx-more svg { width: 22px; height: 11px; transition: transform .2s ease; }
.cx-more:hover, .cx-more:focus-visible { color: var(--accent); border-color: var(--accent); gap: 1.05em; }
.cx-more:hover svg, .cx-more:focus-visible svg { transform: translateX(4px); }
.cx-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 2px; }

/* dots (radio labels — work with JS off) */
.cx-dots { position: absolute; left: 0; right: 0; bottom: clamp(1.1rem,3vw,1.6rem); z-index: 3; display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; padding-inline: clamp(1rem,4vw,2rem); }
.cx-dot { width: 26px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.45); cursor: pointer; transition: background .2s, width .2s; }
.cx-dot:hover { background: rgba(255,255,255,.8); }
#cx-1:checked~.cx-dots [for=cx-1],#cx-2:checked~.cx-dots [for=cx-2],#cx-3:checked~.cx-dots [for=cx-3],#cx-4:checked~.cx-dots [for=cx-4],#cx-5:checked~.cx-dots [for=cx-5],#cx-6:checked~.cx-dots [for=cx-6] { background: var(--accent); width: 40px; }
.cx-radio:focus-visible~.cx-dots { outline: 2px solid #fff; outline-offset: 6px; border-radius: 8px; }

/* arrows (injected by JS, so they only exist when JS is on) */
.cx-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(8,8,8,.45); border: 1px solid rgba(255,255,255,.4); color: #fff; cursor: pointer; transition: background .18s, border-color .18s; }
.cx-arrow:hover { background: rgba(8,8,8,.78); border-color: var(--accent); }
.cx-arrow:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.cx-arrow svg { width: 24px; height: 24px; }
.cx-prev { left: clamp(.6rem,2vw,1.4rem); }
.cx-next { right: clamp(.6rem,2vw,1.4rem); }

@media (max-width: 640px) {
  .cx-arrow { width: 44px; height: 44px; }
  .cx-dot { width: 18px; }
  #cx-1:checked~.cx-dots [for=cx-1],#cx-2:checked~.cx-dots [for=cx-2],#cx-3:checked~.cx-dots [for=cx-3],#cx-4:checked~.cx-dots [for=cx-4],#cx-5:checked~.cx-dots [for=cx-5],#cx-6:checked~.cx-dots [for=cx-6] { width: 26px; }
}

.v-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  background: var(--bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.v-bar__icon {
  color: var(--accent);
  font-size: 1.2rem;
  flex-shrink: 0;
}

.v-bar__label {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--text);
}

.v-bar__count {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-left: auto;
  white-space: nowrap;
}

.v-bar__link {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
  margin-left: var(--sp-3);
  display: flex;
  align-items: center;
  gap: 5px;
}

.v-bar__link:hover {
  text-decoration: underline;
}