/* ============================================================
   Wag'n Tails Home
   Body closely matches wagntails.com with animated interactions

   WordPress / Kadence:
   - Enqueue this file only on the front page (is_front_page).
   - Header / nav / dock / footer CSS live in chrome.css (site-wide).
   - Base resets (body, a, headings, lists, focus) are scoped under body.wagn-home.
   - Do NOT add bare input/textarea/select/button/form rules — leave plugin
     forms (Gravity Forms, Kadence forms, etc.) alone.
   - url("images/...") paths are relative to THIS file. Keep images/ beside
     styles.css in the child theme (e.g. wagn-home/styles.css + wagn-home/images/).
   ============================================================ */

:root {
  /* Main + accent */
  --purple: #603387;
  --purple-dark: #4a2769;
  --aqua: #8AD6CC;
  --aqua-bright: #6fe0d2;
  --aqua-soft: #E2F3F1;
  /* Occasional accents only; never in gradients/backgrounds */
  --pink: #ED6D88;
  --gold: #EDB757;
  /* Surfaces (purple / teal washes only) */
  --lavender: #F3ECFB;
  --mint: #EEF8F6;
  --footer: #f3f1f7;
  --white: #FFFFFF;
  --ink: #3A3048;
  --ink-muted: #5E5568;
  --nav: #4D4458;
  --line: rgba(96, 51, 135, 0.12);

  /* Outfit ≈ Momentum Sans (geometric modern); Momentum file not in project */
  --font-heading: "Outfit", "Onest", Arial, Helvetica, sans-serif;
  --font-fun: var(--font-heading);
  --font-display: "Onest", Arial, Helvetica, sans-serif;
  --font-body: Arial, Helvetica, sans-serif;

  --container: 1120px;
  --container-narrow: 760px;
  --page-gutter: 2.5rem;
  --header-h: 4.5rem;
  /* Extra air below the fixed header so the hero isn’t jammed under it */
  --header-gap: clamp(1.85rem, 4.2vw, 2.85rem);
  --radius: 14px;
  --radius-media: 28px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-editorial: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.35, 0.64, 1);
  --ease-settle: cubic-bezier(0.22, 1, 0.36, 1);
  --reveal-duration: 0.9s;
  --reveal-distance: 1.15rem;
  --section-y: clamp(2.25rem, 4.5vw, 3.5rem);
  --heading-gradient: linear-gradient(
    115deg,
    #3a1a5c 0%,
    #603387 42%,
    #2a6f68 78%,
    #1f5c56 100%
  );
}

@media (max-width: 899px) {
  :root {
    --page-gutter: 1.15rem;
  }
}

/*
  Base resets — scoped to body.wagn-home so this file cannot restyle
  Kadence / Gravity Forms / WP forms if it is ever mis-enqueued site-wide.
  Do NOT style bare input/textarea/select/button/form here.
*/
body.wagn-home *,
body.wagn-home *::before,
body.wagn-home *::after {
  box-sizing: border-box;
}

html:has(body.wagn-home) {
  scroll-behavior: smooth;
  overflow-x: clip;
}

body.wagn-home {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--wagn-atmosphere);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

body.wagn-home img,
body.wagn-home svg {
  display: block;
  max-width: 100%;
}

body.wagn-home a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

/* No bare `button` / `input` / `textarea` / `select` / `form` rules.
   Homepage CTAs use .btn; quote arrows use .quotes__btn; nav uses .nav-toggle. */

body.wagn-home h1,
body.wagn-home h2,
body.wagn-home h3 {
  font-family: var(--font-heading);
  line-height: 1.15;
  letter-spacing: -0.015em;
  font-weight: 700;
  color: var(--purple);
  margin: 0 0 0.75rem;
}

body.wagn-home p {
  margin: 0 0 1rem;
}

body.wagn-home p:last-child {
  margin-bottom: 0;
}

body.wagn-home ul,
body.wagn-home ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

body.wagn-home :focus {
  outline: none;
}

body.wagn-home :focus-visible {
  outline: 3px solid var(--aqua);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100%;
  z-index: 1000;
  padding: 0.75rem 1rem;
  background: var(--purple);
  color: var(--white);
  border-radius: var(--radius);
}

.skip-link:focus {
  top: 1rem;
}

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

.container {
  width: min(100% - (2 * var(--page-gutter)), var(--container));
  margin-inline: auto;
}

.container--narrow {
  width: min(100% - (2 * var(--page-gutter)), var(--container-narrow));
  margin-inline: auto;
}

.section {
  padding-block: var(--section-y);
}

.section > .container,
.section > .container--narrow {
  position: relative;
  z-index: 1;
}

section[id] {
  scroll-margin-top: calc(var(--header-h) + var(--header-gap));
}

.highlight {
  background: rgba(138, 214, 204, 0.28);
  padding: 0.1em 0.35em;
  border-radius: 0.35em;
}

/* ---------- Buttons (live site style) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.85rem;
  padding: 0.55rem 1.35rem;
  border: 2px solid transparent;
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 1rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.25s var(--ease),
    background-color 0.25s var(--ease),
    border-color 0.25s var(--ease),
    box-shadow 0.25s var(--ease),
    color 0.25s var(--ease);
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(1px) scale(0.98);
}

.btn:focus-visible {
  outline: 3px solid var(--aqua);
  outline-offset: 3px;
}

.btn--primary {
  background: var(--purple);
  color: var(--white);
  border-color: var(--purple);
  font-family: var(--font-display);
  font-weight: 700;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12) inset,
    0 8px 18px rgba(96, 51, 135, 0.16);
}

.btn--primary:hover {
  background: var(--purple-dark);
  border-color: var(--purple-dark);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.14) inset,
    0 12px 26px rgba(74, 39, 105, 0.24);
}

.btn--outline {
  background: transparent;
  color: var(--purple);
  border-color: rgba(96, 51, 135, 0.35);
  font-family: var(--font-display);
  font-weight: 600;
}

.btn--outline:hover {
  background: rgba(96, 51, 135, 0.05);
  border-color: var(--purple);
  box-shadow: 0 6px 16px rgba(96, 51, 135, 0.08);
}

.btn--soft {
  background: var(--white);
  color: var(--purple);
  border-color: rgba(96, 51, 135, 0.22);
  font-family: var(--font-display);
  font-weight: 700;
  box-shadow: 0 6px 16px rgba(96, 51, 135, 0.06);
}

.btn--soft:hover {
  border-color: var(--purple);
  box-shadow: 0 10px 22px rgba(96, 51, 135, 0.1);
}

.btn--small {
  min-height: 2.35rem;
  padding: 0.4rem 1rem;
  font-size: 0.875rem;
}

.btn--large {
  min-height: 3.1rem;
  padding: 0.7rem 1.6rem;
}

/* ---------- Paw icons (crisp SVG mask, teal via background-color) ---------- */
.paw-icon {
  display: inline-block;
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  background-color: var(--aqua);
  -webkit-mask: url("images/icons/paw.svg") center / contain no-repeat;
  mask: url("images/icons/paw.svg") center / contain no-repeat;
  transition: transform 0.3s var(--ease), background-color 0.3s var(--ease);
}

.paw-icon--lg {
  width: 2.75rem;
  height: 2.75rem;
}

.paw-icon--sm {
  width: 1.15rem;
  height: 1.15rem;
}

.journey-tile:hover .paw-icon,
.journey-tile:focus-visible .paw-icon,
.journey-tile:hover .tile-icon,
.journey-tile:focus-visible .tile-icon {
  transform: scale(1.12) rotate(-12deg);
  background-color: var(--aqua-bright);
}

/* Shared teal-masked tile icons (journey / accents) */
.tile-icon {
  display: inline-block;
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  background-color: var(--aqua);
  -webkit-mask: var(--tile-icon) center / contain no-repeat;
  mask: var(--tile-icon) center / contain no-repeat;
  transition: transform 0.3s var(--ease), background-color 0.3s var(--ease);
}

.tile-icon--user {
  --tile-icon: url("images/icons/user.svg");
}

.tile-icon--headset {
  --tile-icon: url("images/icons/headset.svg");
}

.tile-icon--phone-info {
  --tile-icon: url("images/icons/phone-info.svg");
}

.tile-icon--cloud-check {
  --tile-icon: url("images/icons/cloud-check.svg");
}

.tile-icon--book {
  --tile-icon: url("images/icons/heart.svg");
}

.text-gradient {
  background-image: var(--heading-gradient);
  background-size: 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.text-link {
  display: inline-block;
  margin-top: 1.25rem;
  color: #5aaea4;
  font-family: var(--font-display);
  font-weight: 700;
  text-decoration: none;
}

.text-link:hover {
  text-decoration: underline;
}

/* ---------- Organic wave dividers ---------- */
.wave {
  position: relative;
  line-height: 0;
  margin-top: -1px;
  color: var(--white);
}

.wave svg {
  display: block;
  width: 100%;
  height: clamp(36px, 5.5vw, 64px);
}

.wave__fill {
  fill: currentColor;
}

.wave__fill--soft {
  opacity: 0.35;
}

.wave--soft {
  color: var(--white);
}

.wave--to-mint {
  color: var(--mint);
}

.wave--from-mint {
  color: var(--white);
  background: var(--mint);
}

.wave--to-footer {
  color: var(--footer);
}

.wave--to-lavender {
  color: var(--lavender);
}

.wave--from-white {
  background: var(--white);
}

.wave--slant svg {
  height: clamp(48px, 7vw, 80px);
}

.wave--tall svg {
  height: clamp(52px, 8vw, 88px);
}

.wave--overlap {
  margin-top: clamp(-3.25rem, -6vw, -2.25rem);
  position: relative;
  z-index: 2;
}

/* Header / mobile nav / mobile dock / site-footer live in chrome.css (site-wide). */

/* ---------- Hero: dual grooming / vet lanes ---------- */
.hero {
  position: relative;
  width: 100%;
  text-align: center;
  overflow: hidden;
  padding-top: calc(var(--header-h) + var(--header-gap));
  padding-bottom: clamp(1.5rem, 3.5vw, 2.35rem);
  /* Shared hero atmosphere — full-bleed, restored richer purple/teal */
  background: var(--wagn-hero-atmosphere);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.hero__glow {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  transform: none;
  border-radius: 0;
  background: var(--wagn-hero-glow);
  pointer-events: none;
  z-index: 0;
  opacity: 0.95;
}

@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .hero__glow {
    will-change: opacity;
    animation: hero-glow-pulse 8s ease-in-out infinite;
  }
}

@keyframes hero-glow-pulse {
  0%,
  100% {
    opacity: 0.78;
  }
  50% {
    opacity: 1;
  }
}

.hero > .container {
  position: relative;
  z-index: 1;
}

.hero__title {
  font-family: var(--font-fun);
  font-size: clamp(2.35rem, 6.2vw, 3.85rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.05;
  max-width: 14ch;
  margin: 0 auto;
}

/* Soft luminous interest — purple → teal shimmer (Apple restraint, not neon) */
.hero__title.text-gradient {
  background-image: linear-gradient(
    115deg,
    #3a1a5c 0%,
    #603387 28%,
    #2f8f88 52%,
    #8AD6CC 68%,
    #603387 88%,
    #3a1a5c 100%
  );
  background-size: 220% 100%;
  background-position: 0% 50%;
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.35))
    drop-shadow(0 8px 28px rgba(96, 51, 135, 0.16))
    drop-shadow(0 2px 14px rgba(138, 214, 204, 0.18));
}

@media (prefers-reduced-motion: no-preference) {
  .hero__title.text-gradient {
    animation: hero-title-shimmer 14s ease-in-out infinite;
  }
}

@keyframes hero-title-shimmer {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__title.text-gradient {
    animation: none;
    background-image: var(--heading-gradient);
    background-size: 100% 100%;
    background-position: 0 0;
    filter:
      drop-shadow(0 1px 0 rgba(255, 255, 255, 0.3))
      drop-shadow(0 6px 20px rgba(96, 51, 135, 0.12));
  }
}

.hero__lede {
  max-width: 28rem;
  margin: 1.05rem auto 0;
  color: var(--ink-muted);
  font-size: 1.05rem;
  line-height: 1.55;
}


.hero-lanes {
  display: grid;
  gap: 1rem;
  margin: 1.5rem auto 0;
  max-width: 920px;
}

@media (min-width: 720px) {
  .hero-lanes {
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
  }
}

.hero-lane {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border-radius: 1.35rem;
  text-decoration: none;
  color: var(--white);
  min-width: 0;
  isolation: isolate;
  border: 1px solid rgba(96, 51, 135, 0.08);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.35) inset,
    0 10px 26px rgba(96, 51, 135, 0.14);
  transition:
    transform 0.35s var(--ease),
    box-shadow 0.35s var(--ease),
    border-color 0.35s var(--ease);
}

.hero-lane--vet {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.35) inset,
    0 10px 28px rgba(47, 122, 114, 0.16);
}

@media (hover: hover) {
  .hero-lane:hover {
    transform: translateY(-5px) scale(1.015);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.4) inset,
      0 16px 36px rgba(96, 51, 135, 0.22);
  }

  .hero-lane--vet:hover {
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.4) inset,
      0 16px 36px rgba(47, 122, 114, 0.22);
  }

  .hero-lane:hover img {
    transform: scale(1.05);
  }
}

.hero-lane:active {
  transform: translateY(1px) scale(0.98);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.25) inset,
    0 6px 18px rgba(96, 51, 135, 0.18);
}

.hero-lane:focus-visible {
  outline: 3px solid var(--purple);
  outline-offset: 3px;
}

.hero-lane--vet:focus-visible {
  outline-color: #2f7a72;
}

.hero-lane img {
  position: absolute;
  inset: -6%;
  width: 112%;
  height: 112%;
  max-width: none;
  object-fit: cover;
  object-position: center 38%;
  transition: transform 0.55s var(--ease);
  z-index: 0;
}

.hero-lane--vet img {
  object-position: center 42%;
}

.hero-lane__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(36, 18, 54, 0.08) 0%,
    rgba(36, 18, 54, 0.18) 42%,
    rgba(36, 18, 54, 0.72) 100%
  );
  transition: opacity 0.35s var(--ease);
}

.hero-lane--vet .hero-lane__scrim {
  background: linear-gradient(
    180deg,
    rgba(18, 48, 46, 0.08) 0%,
    rgba(18, 48, 46, 0.18) 42%,
    rgba(18, 48, 46, 0.7) 100%
  );
}

.hero-lane:hover .hero-lane__scrim {
  opacity: 0.92;
}

.hero-lane__label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  padding: 1.1rem 1.15rem 1.15rem;
  text-align: left;
}

.hero-lane__name {
  font-family: var(--font-fun);
  font-size: clamp(1.2rem, 2.6vw, 1.55rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--white);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.28);
}

.hero-lane__cta {
  font-size: 0.88rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color 0.25s var(--ease);
}

.hero-lane:hover .hero-lane__cta {
  color: var(--white);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin: 1.25rem 0 0;
}

@media (max-width: 599px) {
  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__actions .btn {
    width: 100%;
  }
}

/* Auto-scrolling photo slideshow (live site style) */
.slideshow {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
  overflow: hidden;
  cursor: grab;
  user-select: none;
  touch-action: pan-y;
}

.slideshow.is-dragging {
  cursor: grabbing;
}

.slideshow__viewport {
  overflow: hidden;
}

.slideshow__track {
  display: flex;
  gap: 0.85rem;
  width: max-content;
  will-change: transform;
}

.slideshow__slide {
  margin: 0;
  flex: 0 0 auto;
  width: min(72vw, 300px);
  aspect-ratio: 4 / 3;
  border-radius: 1.75rem 2.6rem 1.9rem 2.4rem;
  overflow: hidden;
  background: var(--aqua-soft);
  pointer-events: none;
  transform: rotate(-2deg);
  box-shadow: 0 14px 30px rgba(96, 51, 135, 0.09);
}

.slideshow__slide:nth-child(even) {
  border-radius: 2.5rem 1.6rem 2.4rem 1.8rem;
  transform: rotate(2.2deg) translateY(0.55rem);
}

.slideshow__slide:nth-child(3n) {
  border-radius: 2rem 2.3rem 1.7rem 2.5rem;
  transform: rotate(-1deg) translateY(-0.3rem);
}

.slideshow__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (min-width: 860px) {
  .slideshow__slide {
    width: min(28vw, 340px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .slideshow {
    cursor: default;
  }

  .slideshow__viewport {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .slideshow__track {
    transform: none !important;
  }

  .slideshow__slide,
  .slideshow__slide:nth-child(even),
  .slideshow__slide:nth-child(3n),
  .journey-tile,
  .journey-tile:hover,
  .journey-tile:focus-visible,
  .journey-tile:active,
  .feature:nth-child(odd),
  .feature:nth-child(even),
  .partner__title,
  .partner__links a,
  .vehicles__header h2,
  .vehicle-tabs__tab,
  .features__title,
  .spotlight__title,
  .spotlight-tile,
  .spotlight-tile:hover,
  .spotlight-tile:focus-visible,
  .spotlight-tile:active,
  .vehicle-card,
  .vehicle-card:hover,
  .vehicle-card:focus-visible,
  .vehicle-card:active,
  .begin__title,
  .begin-step,
  .community__title,
  .info-panel h2,
  .event-row__date {
    transform: none !important;
    animation: none !important;
  }
}

/* ---------- Partner / freedom title ---------- */
.partner {
  position: relative;
  text-align: center;
  background: var(--white);
  overflow: hidden;
}

/* Title-only bridge between hero and journey (no cards) */
.partner--title {
  padding-block: clamp(1.15rem, 2.8vw, 1.85rem);
}

.partner--title .partner__title {
  margin-bottom: 0;
}

/* Lean washes for the title bridge — no heavy floating color bands */
.partner--title::before,
.partner--title::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.partner--title::before {
  width: min(36vw, 14rem);
  height: min(36vw, 14rem);
  left: -6%;
  top: 20%;
  background: radial-gradient(circle, rgba(138, 214, 204, 0.16), transparent 70%);
}

.partner--title::after {
  width: min(30vw, 12rem);
  height: min(30vw, 12rem);
  right: -5%;
  bottom: 12%;
  background: radial-gradient(circle, rgba(96, 51, 135, 0.07), transparent 70%);
}

.partner:not(.partner--title)::before,
.partner:not(.partner--title)::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.partner:not(.partner--title)::before {
  width: min(42vw, 18rem);
  height: min(42vw, 18rem);
  left: -8%;
  top: 10%;
  background: radial-gradient(circle, rgba(138, 214, 204, 0.28), transparent 68%);
}

.partner:not(.partner--title)::after {
  width: min(36vw, 15rem);
  height: min(36vw, 15rem);
  right: -6%;
  bottom: 8%;
  background: radial-gradient(circle, rgba(96, 51, 135, 0.12), transparent 68%);
}

.partner > .container {
  position: relative;
  z-index: 1;
}

.partner__title {
  font-family: var(--font-fun);
  font-size: clamp(1.85rem, 3.8vw, 2.7rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  max-width: 18ch;
  margin-inline: auto;
}

.partner__body {
  color: var(--purple);
  font-size: 1.05rem;
  opacity: 0.9;
  margin-top: 0.35rem;
  max-width: 36rem;
  margin-inline: auto;
}

.partner__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 0.9rem;
  margin-top: clamp(1.25rem, 2.4vw, 1.75rem);
}

.partner__cta .btn {
  min-width: 11.5rem;
}

.partner-proof {
  margin-top: clamp(1.25rem, 2.5vw, 1.85rem);
}

.partner-proof__art {
  max-width: 56rem;
  margin: 0 auto 1.15rem;
}

.partner-proof__panels {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
}

@media (min-width: 720px) {
  .partner-proof__panels {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    align-items: stretch;
  }
}

.partner-proof__panel {
  margin: 0;
  border-radius: 1.35rem;
  overflow: hidden;
  opacity: 0.55;
  transform: scale(0.97);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
  box-shadow: 0 10px 28px rgba(96, 51, 135, 0.06);
}

.partner-proof__panel.is-active {
  opacity: 1;
  transform: scale(1);
  box-shadow: 0 16px 36px rgba(96, 51, 135, 0.14);
}

.partner-proof__panel img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 719px) {
  .partner-proof__panel {
    display: none;
  }

  .partner-proof__panel.is-active {
    display: block;
  }
}

.partner-proof__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
  max-width: 48rem;
  margin-inline: auto;
}

@media (min-width: 720px) {
  .partner-proof__steps {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
}

.partner-proof__step {
  display: grid;
  gap: 0.2rem;
  padding: 0.85rem 0.9rem;
  border-radius: 1.1rem;
  border: 1px solid transparent;
  background: rgba(243, 236, 251, 0.35);
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), background 0.35s var(--ease), opacity 0.35s var(--ease);
  opacity: 0.72;
  cursor: pointer;
}

.partner-proof__step.is-active {
  opacity: 1;
  border-color: rgba(138, 214, 204, 0.65);
  background: rgba(226, 243, 241, 0.55);
  transform: translateY(-3px);
}

.partner-proof__eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 700;
}

.partner-proof__step strong {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  color: var(--purple);
}

.partner-proof__step span:last-child {
  color: var(--ink-muted);
  font-size: 0.92rem;
}

.partner__outcomes-label {
  margin-top: clamp(1.35rem, 2.5vw, 1.85rem);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 700;
}

.partner__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.1rem 1.4rem;
  margin-top: 0.65rem;
}

.partner__links--outcomes {
  margin-top: 0.55rem;
}

.partner__links a {
  color: var(--purple);
  font-family: var(--font-display);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid rgba(138, 214, 204, 0.7);
  transition: border-color 0.2s var(--ease), transform 0.25s var(--ease);
}

.partner__links a:hover {
  border-bottom-color: var(--purple);
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .partner-proof__step,
  .partner-proof__panel {
    transition: none;
    transform: none;
  }
}

/* ---------- Journey: Microsoft-style app tiles ---------- */
.journey {
  position: relative;
  background:
    radial-gradient(ellipse 52% 48% at 6% 28%, rgba(243, 236, 251, 0.72), transparent 62%),
    radial-gradient(ellipse 48% 42% at 94% 72%, rgba(226, 243, 241, 0.58), transparent 60%),
    var(--white);
  overflow: visible;
  padding-block: clamp(1.5rem, 3.2vw, 2.5rem);
}

.journey__grid {
  list-style: none;
  margin: 0;
  padding: 0.25rem 0.2rem 0.5rem;
  display: grid;
  gap: 1.15rem;
  position: relative;
}

@media (min-width: 800px) {
  .journey__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem 1.35rem;
    align-items: start;
    padding: 1.5rem 0.35rem 0.65rem;
  }
}

.journey__stage {
  position: relative;
}


.journey-tile {
  --tile-rotate: 0deg;
  --tile-x: 0;
  --tile-y: 0;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem 1.1rem;
  align-items: start;
  min-height: 9.5rem;
  height: 100%;
  padding: 1.25rem 1.15rem 1.25rem 1.2rem;
  border-radius: 1.2rem 1.5rem 1.15rem 1.4rem;
  border: 1px solid rgba(96, 51, 135, 0.1);
  background: var(--lavender);
  box-shadow: 0 4px 14px rgba(96, 51, 135, 0.04);
  text-decoration: none;
  color: inherit;
  text-align: left;
  transform: rotate(var(--tile-rotate)) translate(var(--tile-x), var(--tile-y));
  transform-origin: center center;
  transition:
    background 0.22s var(--ease),
    border-color 0.22s var(--ease),
    transform 0.28s var(--ease),
    box-shadow 0.22s var(--ease),
    border-radius 0.28s var(--ease);
}


.journey__grid > li:nth-child(1) .journey-tile {
  --tile-rotate: 0deg;
  --tile-x: 0;
  --tile-y: 0;
  border-radius: 1.4rem 0.95rem 1.55rem 1.15rem;
  background: var(--lavender);
}

.journey__grid > li:nth-child(2) .journey-tile {
  --tile-rotate: 0deg;
  --tile-x: 0;
  --tile-y: 0;
  border-radius: 0.95rem 1.5rem 1.1rem 1.45rem;
  background: var(--mint);
}

.journey__grid > li:nth-child(3) .journey-tile {
  --tile-rotate: 0deg;
  --tile-x: 0;
  --tile-y: 0;
  border-radius: 1.5rem 1.2rem 0.9rem 1.35rem;
  background: var(--aqua-soft);
}

@media (min-width: 800px) {
  /* Asymmetrical stagger: layered journey rhythm without crooked CTAs */
  .journey__grid > li:nth-child(1) .journey-tile {
    --tile-rotate: 0deg;
    --tile-y: 0;
  }

  .journey__grid > li:nth-child(2) .journey-tile {
    --tile-rotate: 0deg;
    --tile-y: 1.1rem;
  }

  .journey__grid > li:nth-child(3) .journey-tile {
    --tile-rotate: 0deg;
    --tile-y: 0.35rem;
  }
}

.journey-tile:hover,
.journey-tile:focus-visible {
  background: var(--white);
  border-color: rgba(96, 51, 135, 0.28);
  box-shadow: 0 12px 30px rgba(58, 48, 72, 0.11);
  border-radius: 1.35rem;
  transform: translateY(-0.35rem) scale(1.015);
  outline: none;
}

.journey-tile:active {
  transform: translateY(0.06rem) scale(0.99);
  box-shadow: none;
  background: var(--aqua-soft);
}

@media (hover: none) {
  .journey-tile:hover {
    background: var(--lavender);
    border-color: var(--line);
    box-shadow: none;
    border-radius: 1.25rem 1.5rem 1.15rem 1.4rem;
    transform: rotate(var(--tile-rotate)) translate(var(--tile-x), var(--tile-y));
  }

  .journey-tile:active {
    background: var(--aqua-soft);
    border-color: rgba(96, 51, 135, 0.22);
    transform: translateY(0.04rem) scale(0.985);
  }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .journey-tile:hover {
    animation: journey-wiggle 0.55s var(--ease);
  }
}

@keyframes journey-wiggle {
  0% { transform: translateY(0) scale(1); }
  40% { transform: translateY(-0.4rem) scale(1.02); }
  70% { transform: translateY(-0.28rem) scale(1.01); }
  100% { transform: translateY(-0.35rem) scale(1.015); }
}

.journey-tile__copy h3 {
  font-family: var(--font-fun);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 0.4rem;
  color: var(--purple);
}

.journey-tile__copy p {
  color: var(--ink-muted);
  font-size: 0.92rem;
  line-height: 1.45;
  margin: 0;
}

.journey-tile__chev {
  align-self: center;
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid var(--purple);
  border-bottom: 2px solid var(--purple);
  transform: rotate(-45deg);
  opacity: 0.55;
  transition: transform 0.22s var(--ease), opacity 0.22s var(--ease);
}

.journey-tile:hover .journey-tile__chev,
.journey-tile:focus-visible .journey-tile__chev {
  opacity: 1;
  transform: rotate(-45deg) translate(3px, 3px);
}

/* ---------- Action / brand film ---------- */
.action {
  background:
    radial-gradient(ellipse 50% 55% at 88% 20%, rgba(138, 214, 204, 0.22), transparent 60%),
    radial-gradient(ellipse 45% 50% at 8% 70%, rgba(96, 51, 135, 0.08), transparent 65%),
    var(--white);
  overflow: hidden;
  padding-block: clamp(2rem, 4vw, 3rem);
}

.action__layout {
  display: grid;
  gap: 1.5rem;
  align-items: center;
}

@media (min-width: 860px) {
  .action__layout {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr);
    gap: 2rem 2.25rem;
  }
}

.action__eyebrow {
  display: inline-block;
  margin: 0 0 0.55rem;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--purple);
}

.action__title {
  font-family: var(--font-fun);
  font-size: clamp(1.85rem, 3.6vw, 2.65rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.12;
  margin: 0 0 0.75rem;
  max-width: 14ch;
}

.action__lede {
  margin: 0 0 1.15rem;
  color: var(--ink-muted);
  max-width: 36ch;
  font-size: 1.02rem;
}

/* Stacked action: center the copy block to match fun section rhythm */
@media (max-width: 859px) {
  .action__copy {
    text-align: center;
  }

  .action__title,
  .action__lede {
    margin-inline: auto;
  }

  .action__points {
    max-width: 22rem;
    margin-inline: auto;
    text-align: left;
  }
}

.action__points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.action__points li {
  display: grid;
  grid-template-columns: 1.35rem 1fr;
  gap: 0.55rem;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
}

.action__ico {
  width: 1.2rem;
  height: 1.2rem;
  background-color: var(--aqua);
  -webkit-mask: var(--mask) center / contain no-repeat;
  mask: var(--mask) center / contain no-repeat;
}

.action__stage {
  margin: 0;
  position: relative;
}

.action__stage::before {
  content: "";
  position: absolute;
  inset: 0.65rem -0.75rem -0.85rem 0.55rem;
  border-radius: 1.55rem 1.9rem 1.4rem 1.7rem;
  background: linear-gradient(135deg, rgba(138, 214, 204, 0.45), rgba(96, 51, 135, 0.18));
  transform: rotate(1.5deg);
  z-index: 0;
  pointer-events: none;
}

.action__video {
  position: relative;
  z-index: 1;
  width: 100%;
  display: block;
  border-radius: 1.35rem 1.7rem 1.25rem 1.55rem;
  background: #1a1424;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(96, 51, 135, 0.1);
  box-shadow: 0 16px 36px rgba(58, 48, 72, 0.12);
}

.action__video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.action__video-facade {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: #1a1424;
  color: inherit;
}

.action__video-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s var(--ease), opacity 0.3s var(--ease);
}

.action__video-facade:hover .action__video-poster,
.action__video-facade:focus-visible .action__video-poster {
  transform: scale(1.03);
}

.action__video-play {
  position: relative;
  z-index: 1;
  width: 4.25rem;
  height: 4.25rem;
  border-radius: 50%;
  background: rgba(96, 51, 135, 0.92);
  box-shadow: 0 10px 24px rgba(58, 48, 72, 0.28);
  transition: transform 0.25s var(--ease), background-color 0.25s var(--ease);
}

.action__video-play::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.7rem 0 0.7rem 1.15rem;
  border-color: transparent transparent transparent #fff;
}

.action__video-facade:hover .action__video-play,
.action__video-facade:focus-visible .action__video-play {
  transform: scale(1.06);
  background: var(--purple);
}

.action__video.is-playing .action__video-facade {
  display: none;
}

.action__caption {
  margin: 0.55rem 0 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-align: right;
}

.action__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
}

@media (max-width: 599px) {
  .action__cta {
    flex-direction: column;
    align-items: stretch;
  }

  .action__cta .btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .action__video-poster,
  .action__video-play {
    transition: none;
  }

  .action__video-facade:hover .action__video-poster,
  .action__video-facade:focus-visible .action__video-poster,
  .action__video-facade:hover .action__video-play,
  .action__video-facade:focus-visible .action__video-play {
    transform: none;
  }
}

/* ---------- Vehicles: app-style product tiles ---------- */
.vehicles {
  background:
    radial-gradient(ellipse 50% 55% at 92% 12%, rgba(96, 51, 135, 0.08), transparent 60%),
    radial-gradient(ellipse 45% 50% at 6% 78%, rgba(138, 214, 204, 0.28), transparent 62%),
    var(--mint);
  text-align: center;
  overflow: hidden;
}

.vehicles__header {
  margin-bottom: clamp(1.35rem, 2.8vw, 1.85rem);
  max-width: 36rem;
  margin-inline: auto;
}

.vehicles__eyebrow {
  display: inline-block;
  margin: 0 0 0.45rem;
  padding: 0.2rem 0.55rem;
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--purple);
  background: rgba(138, 214, 204, 0.32);
  border-radius: 0.45rem;
}

.vehicles__header h2 {
  font-family: var(--font-fun);
  font-size: clamp(1.9rem, 3.6vw, 2.65rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 0.55rem;
}

.vehicles__lede {
  color: var(--ink-muted);
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
}

.vehicle-tabs {
  margin-top: clamp(1.15rem, 2.5vw, 1.65rem);
}

.vehicle-tabs__shell {
  display: flex;
  justify-content: center;
  margin-bottom: 1.25rem;
}

.vehicle-tabs__list {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.3rem;
  width: min(100%, 28rem);
  padding: 0.3rem;
  border-radius: 1.2rem 1.35rem 1.15rem 1.3rem;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--line);
  box-shadow: 0 8px 22px rgba(58, 48, 72, 0.06);
}

.vehicle-tabs__tab {
  min-height: 2.7rem;
  padding: 0.5rem 0.9rem;
  border: 0;
  border-radius: 1rem 1.1rem 0.95rem 1.05rem;
  background: transparent;
  color: var(--purple-dark);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition:
    background 0.22s var(--ease),
    color 0.22s var(--ease),
    transform 0.22s var(--ease),
    box-shadow 0.22s var(--ease);
}

.vehicle-tabs__tab:hover {
  background: rgba(138, 214, 204, 0.28);
  transform: translateY(-1px);
}

.vehicle-tabs__tab.is-active {
  background: var(--purple);
  color: var(--white);
  transform: none;
  box-shadow: 0 6px 16px rgba(96, 51, 135, 0.22);
}

.vehicle-tabs__tab:active {
  transform: scale(0.97);
}

.vehicle-panel {
  text-align: left;
}

.vehicle-panel[hidden] {
  display: none;
}

.vehicle-panel.is-entering {
  animation: panel-in 0.42s var(--ease);
}

.vehicle-list {
  list-style: none;
  margin: 0;
  padding: 0.15rem 0.15rem 0.35rem;
  display: grid;
  gap: 0.9rem;
  align-items: stretch;
}

@media (min-width: 800px) {
  .vehicle-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.15rem 1.25rem;
    align-items: start;
    padding: 0.3rem 0.2rem 0.55rem;
  }

  .vehicle-list--lean {
    grid-template-columns: repeat(2, minmax(0, 22rem));
    justify-content: center;
  }
}

.vehicle-card {
  --tile-y: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  height: 100%;
  min-height: 100%;
  padding: 0.75rem 0.85rem 0.9rem;
  border-radius: 1.25rem 1.45rem 1.15rem 1.35rem;
  border: 1px solid rgba(96, 51, 135, 0.1);
  background: var(--lavender);
  box-shadow: 0 4px 14px rgba(96, 51, 135, 0.04);
  text-decoration: none;
  color: inherit;
  text-align: left;
  transform: translateY(var(--tile-y));
  transform-origin: center center;
  transition:
    background 0.22s var(--ease),
    border-color 0.22s var(--ease),
    transform 0.28s var(--ease),
    box-shadow 0.22s var(--ease),
    border-radius 0.28s var(--ease);
}

.vehicle-list > li:nth-child(1) .vehicle-card {
  border-radius: 1.4rem 1rem 1.5rem 1.15rem;
  background: var(--lavender);
}

.vehicle-list > li:nth-child(2) .vehicle-card {
  border-radius: 1rem 1.45rem 1.1rem 1.4rem;
  background: var(--mint);
}

.vehicle-list > li:nth-child(3) .vehicle-card {
  border-radius: 1.45rem 1.15rem 0.95rem 1.35rem;
  background: var(--aqua-soft);
}

@media (min-width: 800px) {
  .vehicle-list > li:nth-child(1) .vehicle-card {
    --tile-y: 0;
  }

  .vehicle-list > li:nth-child(2) .vehicle-card {
    --tile-y: 0.45rem;
  }

  .vehicle-list > li:nth-child(3) .vehicle-card {
    --tile-y: 0.15rem;
  }

  .vehicle-card {
    padding: 0.85rem 0.95rem 1rem;
  }
}

.vehicle-card:hover,
.vehicle-card:focus-visible {
  background: var(--white);
  border-color: rgba(96, 51, 135, 0.28);
  box-shadow: 0 12px 30px rgba(58, 48, 72, 0.11);
  border-radius: 1.35rem;
  transform: translateY(calc(var(--tile-y) - 0.3rem)) scale(1.015);
  outline: none;
}

.vehicle-card:active {
  transform: translateY(calc(var(--tile-y) + 0.04rem)) scale(0.99);
  box-shadow: none;
  background: var(--aqua-soft);
}

.vehicle-card__media {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  aspect-ratio: 16 / 9;
  max-height: 9rem;
  padding: 0.28rem 0.35rem 0.18rem;
  margin-bottom: 0.55rem;
  border-radius: 1rem 1.15rem 0.9rem 1.05rem;
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.96), transparent 70%),
    linear-gradient(165deg, rgba(138, 214, 204, 0.22), rgba(243, 236, 251, 0.55));
  transition: background 0.22s var(--ease);
  overflow: hidden;
}

.vehicle-card__media img {
  width: 100%;
  height: 100%;
  max-height: 8.1rem;
  object-fit: contain;
  object-position: center;
  transition: transform 0.35s var(--ease);
}

.vehicle-card:hover .vehicle-card__media,
.vehicle-card:focus-visible .vehicle-card__media {
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.98), transparent 70%),
    linear-gradient(165deg, rgba(138, 214, 204, 0.38), rgba(243, 236, 251, 0.4));
}

.vehicle-card:hover .vehicle-card__media img,
.vehicle-card:focus-visible .vehicle-card__media img {
  transform: scale(1.04) translateY(-2px);
}

.vehicle-card__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
  min-width: 0;
}

.vehicle-card__label {
  margin: 0 0 0.15rem;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--purple);
  opacity: 0.72;
}

.vehicle-list > li:nth-child(2) .vehicle-card__label {
  color: #2f7a72;
  opacity: 0.88;
}

.vehicle-card__title {
  display: block;
  font-family: var(--font-fun);
  font-size: clamp(1.15rem, 2vw, 1.35rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--purple);
  margin: 0 0 0.55rem;
  text-align: center;
}

.vehicle-card__specs {
  list-style: none;
  margin: 0 0 0.65rem;
  padding: 0;
  display: grid;
  gap: 0.28rem;
  width: 100%;
  max-width: 14.5rem;
  flex: 1;
  justify-items: start;
}

.vehicle-card__specs li {
  display: grid;
  grid-template-columns: 1.35rem 1fr;
  gap: 0.45rem;
  align-items: center;
  font-size: 0.84rem;
  line-height: 1.3;
  color: var(--ink-muted);
  text-align: left;
}

.vehicle-card__specs strong {
  color: var(--ink);
  font-weight: 700;
}

.vehicle-card__ico {
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.55), transparent 55%),
    rgba(138, 214, 204, 0.55);
  box-shadow: inset 0 0 0 1px rgba(96, 51, 135, 0.08);
  position: relative;
  transition: transform 0.28s var(--ease), background-color 0.22s var(--ease), box-shadow 0.22s var(--ease);
}

.vehicle-card__ico::after {
  content: "";
  display: block;
  width: 0.78rem;
  height: 0.78rem;
  background-color: var(--purple);
  -webkit-mask-image: var(--mask);
  mask-image: var(--mask);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.vehicle-card:hover .vehicle-card__ico,
.vehicle-card:focus-visible .vehicle-card__ico {
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.65), transparent 55%),
    rgba(138, 214, 204, 0.78);
  box-shadow: inset 0 0 0 1px rgba(96, 51, 135, 0.14);
}

.vehicle-card__cta {
  margin-top: auto;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--purple);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-color: rgba(138, 214, 204, 0.85);
  transition: text-decoration-color 0.2s var(--ease), color 0.2s var(--ease);
}

.vehicle-card:hover .vehicle-card__cta,
.vehicle-card:focus-visible .vehicle-card__cta {
  color: var(--purple-dark);
  text-decoration-color: var(--aqua);
}

.vehicles__more {
  margin: 2.75rem 0 0;
  text-align: center;
}

.vehicles__more-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.85rem;
  padding: 0.55rem 1.25rem;
  border-radius: 1rem 1.15rem 0.95rem 1.1rem;
  border: 2px solid var(--purple);
  background: var(--white);
  color: var(--purple);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  transition:
    background 0.22s var(--ease),
    color 0.22s var(--ease),
    transform 0.22s var(--ease),
    box-shadow 0.22s var(--ease);
}

.vehicles__more-link:hover,
.vehicles__more-link:focus-visible {
  background: var(--purple);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(96, 51, 135, 0.18);
  outline: none;
}

.vehicles__more-link:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: none;
}

.btn--compact {
  min-height: 2.35rem;
  padding: 0.4rem 0.95rem;
  font-size: 0.88rem;
}

.btn--secondary {
  background: var(--white);
  color: var(--purple);
  border-color: var(--purple);
  font-family: var(--font-display);
  font-weight: 700;
}

.btn--secondary:hover {
  background: var(--purple);
  color: var(--white);
  border-color: var(--purple);
}

/* ---------- Features: interior + hover hotspots ---------- */
.features {
  background:
    radial-gradient(ellipse 55% 60% at 12% 40%, rgba(96, 51, 135, 0.1), transparent 65%),
    radial-gradient(ellipse 50% 55% at 88% 20%, rgba(138, 214, 204, 0.18), transparent 60%),
    var(--white);
  /* clip horizontal doodle bleed only — overflow:hidden broke sticky/step UX */
  overflow-x: clip;
  overflow-y: visible;
}

.features__layout {
  display: grid;
  gap: 1.75rem;
  align-items: center;
}

@media (min-width: 900px) {
  .features__layout {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 2.25rem;
    align-items: start;
  }

  .features__stage {
    grid-column: 1;
  }

  .features__controls:not([hidden]) {
    grid-column: 1;
    margin-top: -0.5rem;
  }

  .features__copy {
    grid-column: 2;
    grid-row: 1 / -1;
  }
}

.features__stage {
  position: relative;
  margin-inline: auto;
  max-width: 22rem;
  border-radius: 2rem 1.5rem 2.4rem 1.7rem;
  overflow: hidden;
  background: rgba(96, 51, 135, 0.06);
  box-shadow:
    0 0 0 1px rgba(96, 51, 135, 0.08),
    14px 16px 0 -4px rgba(138, 214, 204, 0.32),
    -10px -8px 0 -6px rgba(96, 51, 135, 0.08),
    0 20px 42px rgba(58, 48, 72, 0.1);
}

/* Shared hotspot glyphs — same SVG assets for on-image spots + list rows */
.feature-glyph {
  display: block;
  width: 1.125rem;
  height: 1.125rem;
  background-color: currentColor;
  -webkit-mask: var(--feature-glyph) center / contain no-repeat;
  mask: var(--feature-glyph) center / contain no-repeat;
}

.feature-glyph--tub {
  --feature-glyph: url("images/icons/feature-tub.svg");
  width: 1rem;
  height: 1rem;
}

.feature-glyph--dryer {
  --feature-glyph: url("images/icons/feature-dryer.svg");
}

.feature-glyph--bridge {
  --feature-glyph: url("images/icons/feature-bridge.svg");
}

.feature-glyph--table {
  --feature-glyph: url("images/icons/feature-table-360.svg");
}

.feature-row__icon .feature-glyph {
  width: 1.35rem;
  height: 1.35rem;
}

.feature-row__icon .feature-glyph--tub {
  width: 1.25rem;
  height: 1.25rem;
}

.features__van {
  width: 100%;
  height: auto;
  display: block;
}

.feature-covers {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.feature-cover {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 3.1rem;
  height: 3.1rem;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--cover, #cfc9c2);
  box-shadow: 0 0 14px 10px var(--cover, #cfc9c2);
  filter: blur(1.5px);
  opacity: 0.95;
}

.feature-spots {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.feature-spot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%) scale(0.7);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  opacity: 0;
  transition:
    opacity 0.35s var(--ease),
    transform 0.4s var(--ease);
  z-index: 2;
}

.feature-spot__dot {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--white);
  background: var(--spot, var(--purple));
  box-shadow: 0 8px 20px rgba(58, 48, 72, 0.28);
}

.feature-spot__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
  box-shadow: 0 4px 14px rgba(58, 48, 72, 0.12);
}

/* Only the matching hotspot for the active feature row — never show all at once */
.feature-spot.is-active {
  z-index: 3;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.08);
  pointer-events: none;
  animation: hotspot-pop 0.5s var(--ease);
}

.features__hint {
  position: absolute;
  left: 50%;
  bottom: 0.75rem;
  transform: translateX(-50%);
  margin: 0;
  padding: 0.3rem 0.7rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--purple);
  background: rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.features__hint-touch {
  display: none;
}

.features__stage.is-hot .features__hint {
  opacity: 0;
}

.features__controls {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  margin: 0.15rem auto 0;
  max-width: 22rem;
}

.features__controls[hidden] {
  display: none !important;
}

.features__nav {
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(96, 51, 135, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--purple);
  font-size: 1.45rem;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(58, 48, 72, 0.08);
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s var(--ease);
}

.features__nav:hover {
  background: rgba(96, 51, 135, 0.06);
  border-color: rgba(96, 51, 135, 0.32);
}

.features__nav:active {
  transform: scale(0.96);
}

.features__step {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0.45rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  color: var(--purple);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(96, 51, 135, 0.12);
  border-radius: 999px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 4px 14px rgba(58, 48, 72, 0.08);
}

.features__title {
  font-family: var(--font-fun);
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  max-width: 14ch;
  margin: 0 0 1.25rem;
  text-align: center;
  margin-inline: auto;
}

@media (max-width: 899px) {
  .features__layout {
    align-items: stretch;
    gap: 1.15rem;
  }

  .features__stage {
    position: relative;
    z-index: 1;
    max-width: min(17.5rem, 76vw);
    margin-inline: auto;
  }

  .features__controls:not([hidden]) {
    display: flex;
    width: min(100%, 22rem);
    max-width: min(22rem, 100%);
    margin-inline: auto;
    padding-inline: 0.15rem;
  }

  .features__stage.is-hot .features__hint {
    opacity: 0;
  }

  .features__copy {
    text-align: center;
    padding-inline: 0.1rem;
  }

  .features__title {
    text-align: center;
    margin-inline: auto;
    max-width: 16ch;
    font-size: clamp(1.65rem, 6.5vw, 2.2rem);
  }

  .features__list {
    text-align: left;
    max-width: 36rem;
    margin-inline: auto;
    gap: 0.75rem;
  }

  .feature-row {
    padding: 0.8rem 0.65rem;
    border: 1px solid transparent;
    background: rgba(96, 51, 135, 0.03);
  }

  .features.is-exploring .feature-row:not(.is-active) {
    opacity: 0.55;
  }

  .feature-row.is-active {
    opacity: 1;
    background: rgba(96, 51, 135, 0.08);
    border-color: var(--row-icon, var(--purple));
    box-shadow: 0 0 0 1px rgba(96, 51, 135, 0.08);
  }

  .feature-row__step {
    display: block;
  }
}

/* Coarse / no-hover: show step controls even on wider tablets */
@media (hover: none), (pointer: coarse) {
  .features__controls:not([hidden]) {
    display: flex;
    max-width: min(22rem, 92vw);
  }
}

.features__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.feature-row {
  --row-accent: var(--row-icon, var(--purple));
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.9rem;
  align-items: start;
  min-height: 3.25rem;
  padding: 0.55rem 0.45rem;
  border-radius: 0.75rem;
  cursor: pointer;
  transition:
    background 0.25s ease,
    opacity 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.feature-row.is-active {
  background: rgba(96, 51, 135, 0.05);
}

@media (hover: hover) {
  .feature-row:hover {
    background: rgba(96, 51, 135, 0.05);
  }

  .feature-row:hover .feature-row__icon {
    transform: scale(1.08) rotate(-8deg);
  }
}

.feature-row__icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--white);
  background: var(--row-icon, var(--purple));
  flex-shrink: 0;
  transition: transform 0.3s var(--ease);
}

.feature-row.is-active .feature-row__icon {
  transform: scale(1.08) rotate(-8deg);
}

.feature-row__step {
  display: none;
  margin: 0 0 0.2rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--row-accent, var(--purple));
}

.feature-row h3 {
  font-family: var(--font-fun);
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0.15rem 0 0.25rem;
}

.feature-row p:not(.feature-row__step) {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.95rem;
}

@media (hover: none) {
  .features__hint-hover {
    display: none;
  }

  .features__hint-touch {
    display: inline;
  }
}

/* ---------- Spotlight (launches): app-style tiles ---------- */
.spotlight {
  background: var(--white);
  text-align: center;
  overflow: visible;
}

.spotlight__header {
  max-width: 36rem;
  margin: 0 auto clamp(1.35rem, 3vw, 1.85rem);
}

.spotlight__title {
  font-family: var(--font-fun);
  font-size: clamp(2.1rem, 4.2vw, 2.9rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 0.75rem;
}

.spotlight__lede {
  margin: 0;
  color: var(--ink-muted);
  font-size: 1.05rem;
  line-height: 1.55;
}

.spotlight__grid {
  list-style: none;
  margin: 0;
  padding: 0.25rem 0.15rem 0.5rem;
  display: grid;
  gap: 1.15rem;
  text-align: left;
}

@media (min-width: 800px) {
  .spotlight__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem 1.35rem;
    align-items: stretch;
    padding: 0.35rem 0.25rem 0.65rem;
  }
}

.spotlight-tile {
  --tile-rotate: 0deg;
  --tile-y: 0.15rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  min-height: 100%;
  height: 100%;
  padding: 1.35rem 1.25rem 1.3rem;
  border-radius: 1.25rem 1.5rem 1.15rem 1.4rem;
  border: 1px solid rgba(96, 51, 135, 0.1);
  background: var(--lavender);
  box-shadow: 0 4px 14px rgba(96, 51, 135, 0.04);
  text-decoration: none;
  color: inherit;
  transform: rotate(var(--tile-rotate)) translateY(var(--tile-y));
  transform-origin: center center;
  transition:
    background 0.22s var(--ease),
    border-color 0.22s var(--ease),
    transform 0.28s var(--ease),
    box-shadow 0.22s var(--ease),
    border-radius 0.28s var(--ease);
}

.spotlight__grid > li:nth-child(1) .spotlight-tile {
  --tile-rotate: 0deg;
  --tile-y: 0;
  border-radius: 1.4rem 1rem 1.5rem 1.15rem;
  background: var(--lavender);
}

.spotlight__grid > li:nth-child(2) .spotlight-tile {
  --tile-rotate: 0deg;
  --tile-y: 0;
  border-radius: 1rem 1.45rem 1.1rem 1.4rem;
  background: var(--mint);
}

.spotlight__grid > li:nth-child(3) .spotlight-tile {
  --tile-rotate: 0deg;
  --tile-y: 0;
  border-radius: 1.45rem 1.15rem 0.95rem 1.35rem;
  background: var(--aqua-soft);
}

@media (min-width: 800px) {
  .spotlight__grid > li:nth-child(1) .spotlight-tile {
    --tile-rotate: 0deg;
    --tile-y: 0;
  }

  .spotlight__grid > li:nth-child(2) .spotlight-tile {
    --tile-rotate: 0deg;
    --tile-y: 0.45rem;
  }

  .spotlight__grid > li:nth-child(3) .spotlight-tile {
    --tile-rotate: 0deg;
    --tile-y: 0.15rem;
  }
}

.spotlight-tile:hover,
.spotlight-tile:focus-visible {
  background: var(--white);
  border-color: rgba(96, 51, 135, 0.28);
  box-shadow: 0 12px 30px rgba(58, 48, 72, 0.11);
  border-radius: 1.35rem;
  transform: translateY(-0.3rem) scale(1.015);
  outline: none;
}

.spotlight-tile:active {
  transform: translateY(0.05rem) scale(0.99);
  box-shadow: none;
  background: var(--aqua-soft);
}

@media (hover: none) {
  .spotlight-tile:hover {
    background: var(--lavender);
    border-color: var(--line);
    box-shadow: none;
    border-radius: 1.25rem 1.5rem 1.15rem 1.4rem;
    transform: rotate(var(--tile-rotate)) translateY(var(--tile-y));
  }

  .spotlight-tile:active {
    background: var(--aqua-soft);
    transform: translateY(0.04rem) scale(0.985);
  }

  .vehicle-card:hover {
    transform: translateY(var(--tile-y));
    box-shadow: none;
    background: inherit;
    border-color: var(--line);
  }

  .vehicle-card:active {
    transform: translateY(calc(var(--tile-y) + 0.04rem)) scale(0.985);
    background: var(--aqua-soft);
  }
}

.spotlight-tile__icon {
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  background-color: var(--aqua);
  -webkit-mask: var(--tile-icon) center / contain no-repeat;
  mask: var(--tile-icon) center / contain no-repeat;
  transition: transform 0.28s var(--ease), background-color 0.22s var(--ease);
}

.spotlight-tile__icon--dollar {
  --tile-icon: url("images/icons/dollar.svg");
}

.spotlight-tile__icon--bolt {
  --tile-icon: url("images/icons/bolt.svg");
}

.spotlight-tile__icon--vehicle {
  --tile-icon: url("images/icons/grooming-van-icon.png");
}

.spotlight-tile:hover .spotlight-tile__icon,
.spotlight-tile:focus-visible .spotlight-tile__icon {
  transform: scale(1.1) rotate(-8deg);
  background-color: var(--aqua-bright);
}

.spotlight-tile__label {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--purple);
  opacity: 0.72;
}

.spotlight__grid > li:nth-child(2) .spotlight-tile__label {
  color: #2f7a72;
  opacity: 0.85;
}

.spotlight-tile__copy {
  flex: 1;
}

.spotlight-tile h3 {
  font-family: var(--font-fun);
  font-size: clamp(1.35rem, 2.3vw, 1.65rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  margin: 0 0 0.45rem;
  color: var(--purple);
}

.spotlight-tile__copy p {
  color: var(--ink-muted);
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0;
}

.spotlight-tile__cta {
  margin-top: 0.65rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--purple);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-color: rgba(138, 214, 204, 0.8);
  transition: text-decoration-color 0.2s var(--ease), color 0.2s var(--ease);
}

.spotlight-tile:hover .spotlight-tile__cta,
.spotlight-tile:focus-visible .spotlight-tile__cta {
  color: var(--purple-dark);
  text-decoration-color: var(--aqua);
}

/* ---------- Do I Qualify callout ---------- */
.qualify {
  position: relative;
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 55% at 15% 20%, rgba(226, 243, 241, 0.95), transparent 55%),
    radial-gradient(ellipse 60% 50% at 90% 80%, rgba(243, 236, 251, 0.9), transparent 50%),
    var(--lavender);
}

.qualify__title {
  font-family: var(--font-fun);
  font-size: clamp(1.85rem, 4vw, 2.65rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0 0 0.75rem;
}

.qualify__lede {
  color: var(--ink-muted);
  font-size: clamp(1.02rem, 1.6vw, 1.12rem);
  max-width: 38rem;
  margin: 0 auto 1.35rem;
}

.qualify__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.75rem 1.15rem;
}

@media (max-width: 599px) {
  .qualify__cta {
    flex-direction: column;
    align-items: stretch;
  }

  .qualify__cta .btn {
    width: 100%;
  }
}

/* ---------- Begin ---------- */
.begin {
  background:
    radial-gradient(ellipse 45% 40% at 10% 20%, rgba(243, 236, 251, 0.75), transparent 55%),
    radial-gradient(ellipse 40% 35% at 90% 80%, rgba(226, 243, 241, 0.65), transparent 55%),
    var(--white);
  text-align: center;
  overflow: hidden;
}

.begin__title {
  font-family: var(--font-fun);
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 0.35rem;
}

.begin__lede {
  color: var(--ink-muted);
  max-width: 34rem;
  margin: 0 auto clamp(1.25rem, 2.5vw, 1.75rem);
}

.begin__steps {
  display: grid;
  gap: 1.25rem;
  list-style: none;
  list-style-type: none;
  margin: 0;
  padding: 0;
  counter-reset: none;
}

@media (min-width: 800px) {
  .begin__steps {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.35rem 1.15rem;
    align-items: start;
  }
}

.begin__steps--board {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0.35rem 0.15rem 0.85rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

@media (min-width: 960px) {
  .begin__steps--board {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    overflow: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
  }
}

.begin-step {
  --step-rotate: 0deg;
  --step-y: 0;
  list-style: none;
  list-style-type: none;
  transform: rotate(var(--step-rotate)) translateY(var(--step-y));
}

.begin-step--board {
  flex: 0 0 min(78vw, 16.5rem);
  scroll-snap-align: start;
  text-align: left;
  transform: none;
  background: transparent;
}

.begin-step::marker,
.begin-step::before {
  content: none;
  display: none;
}

.begin-step__media {
  position: relative;
  margin: 0 0 0.85rem;
  aspect-ratio: 4 / 3;
  border-radius: 1.25rem 1.45rem 1.15rem 1.35rem;
  overflow: visible; /* keep badge circles from clipping at the photo edge */
  background: var(--mint);
  border: 1px solid rgba(96, 51, 135, 0.08);
  box-shadow: 0 6px 18px rgba(96, 51, 135, 0.06);
}

.begin-step__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

.begin-step__motion {
  position: absolute;
  right: 0.55rem;
  bottom: 0.55rem;
  z-index: 2;
  box-sizing: border-box;
  width: 2.85rem;
  height: 2.85rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem;
  background: rgba(255, 255, 255, 0.96);
  color: var(--purple);
  box-shadow: 0 8px 18px rgba(96, 51, 135, 0.14);
  opacity: 0.92;
  transform: scale(0.92);
  transition: transform 0.4s var(--ease), opacity 0.4s var(--ease);
  overflow: visible;
}

.begin-step__motion::before {
  content: "";
  display: block;
  width: 1.45rem;
  height: 1.45rem;
  flex-shrink: 0;
  background: currentColor;
  -webkit-mask: var(--begin-icon) center / contain no-repeat;
  mask: var(--begin-icon) center / contain no-repeat;
}

.begin-step--board.is-active .begin-step__motion,
.begin-step--board:hover .begin-step__motion {
  opacity: 1;
  transform: scale(1.06);
}

.begin-step__motion--apply.is-pop,
.begin-step__motion--deliver.is-pop {
  animation: begin-key-jiggle 0.55s var(--ease);
}

.begin-step__motion--select.is-pop {
  animation: begin-pin-drop 0.55s var(--ease);
}

.begin-step__motion--guide.is-pop {
  animation: begin-badge-pulse 0.55s var(--ease);
}

@keyframes begin-key-jiggle {
  0% { transform: scale(0.92) rotate(0deg); }
  35% { transform: scale(1.12) rotate(-12deg); }
  70% { transform: scale(1.05) rotate(8deg); }
  100% { transform: scale(1.06) rotate(0deg); }
}

@keyframes begin-pin-drop {
  0% { transform: translateY(-10px) scale(0.9); opacity: 0.4; }
  60% { transform: translateY(2px) scale(1.08); opacity: 1; }
  100% { transform: translateY(0) scale(1.06); opacity: 1; }
}

@keyframes begin-badge-pulse {
  0% { transform: scale(0.9); }
  50% { transform: scale(1.12); }
  100% { transform: scale(1.06); }
}

.begin-step__day {
  display: inline-block;
  margin-bottom: 0.35rem;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--purple);
  background: rgba(138, 214, 204, 0.28);
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
}

.begin-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: 0.75rem;
  border-radius: 999px;
  background: var(--aqua);
  color: var(--purple);
  font-family: var(--font-display);
  font-weight: 800;
  transition: transform 0.3s var(--ease);
}

.begin-step:nth-child(even) .begin-step__num {
  border-radius: 0.85rem 1.15rem 0.9rem 1.2rem;
}

.begin-step:hover .begin-step__num {
  transform: scale(1.08) rotate(-8deg);
}

.begin-step h3 {
  font-size: 1.15rem;
}

.begin-step p {
  color: var(--ink-muted);
  font-size: 0.95rem;
}

.begin__cta,
.community__cta,
.faqs__cta,
.events__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.75rem 1.15rem;
  margin-top: clamp(1.35rem, 2.75vw, 1.85rem);
}

@media (max-width: 599px) {
  .begin__cta,
  .community__cta,
  .faqs__cta {
    flex-direction: column;
    align-items: stretch;
  }

  .begin__cta .btn,
  .community__cta .btn,
  .faqs__cta .btn {
    width: 100%;
  }

  .community__cta .text-link,
  .faqs__cta .text-link {
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .begin-step__motion,
  .begin-step__motion--apply.is-pop,
  .begin-step__motion--select.is-pop,
  .begin-step__motion--guide.is-pop,
  .begin-step__motion--deliver.is-pop {
    animation: none;
    transition: none;
    transform: none;
  }
}

/* ---------- Community (live-site Kadence bubble carousel) ---------- */
.community {
  background:
    radial-gradient(ellipse 50% 45% at 50% 0%, rgba(243, 236, 251, 0.7), transparent 60%),
    var(--white);
  text-align: center;
  overflow: hidden;
}

.community__title {
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 0.35rem;
}

.community__lede {
  color: var(--ink-muted);
  max-width: 36rem;
  margin: 0 auto clamp(1.25rem, 2.5vw, 1.75rem);
}

.quotes {
  --quote-teal: rgba(138, 214, 204, 0.39);
  display: grid;
  grid-template-columns: auto minmax(0, 695px) auto;
  align-items: center;
  gap: 0.75rem 1rem;
  max-width: 52rem;
  margin-inline: auto;
}

.quotes__stage {
  min-width: 0;
  position: relative;
}

/* Kill Kadence/browser blockquote chrome (black left bar next to testimonials) */
.quote,
blockquote.quote,
body.wagn-home .entry-content blockquote.quote,
body.wagn-home .entry-content .quote {
  margin: 0;
  padding: 0;
  border: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  box-shadow: none !important;
  background: transparent;
  quotes: none;
}

.quote::before,
.quote::after,
blockquote.quote::before,
blockquote.quote::after {
  content: none !important;
  display: none !important;
}

.quote--story {
  text-align: center;
}

.quote__thumb {
  position: relative;
  display: block;
  margin: 0 auto 1rem;
  max-width: 28rem;
  aspect-ratio: 16 / 9;
  border-radius: 1.15rem;
  overflow: hidden;
  background: var(--mint);
  text-decoration: none;
}

.quote__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s var(--ease);
}

.quote__thumb:hover img {
  transform: scale(1.04);
}

.quote__play {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 3.1rem;
  height: 3.1rem;
  margin: -1.55rem 0 0 -1.55rem;
  border-radius: 999px;
  background: rgba(96, 51, 135, 0.92);
  box-shadow: 0 10px 24px rgba(58, 48, 72, 0.25);
}

.quote__play::after {
  content: "";
  position: absolute;
  left: 52%;
  top: 50%;
  transform: translate(-40%, -50%);
  border-style: solid;
  border-width: 0.55rem 0 0.55rem 0.9rem;
  border-color: transparent transparent transparent #fff;
}

.quote__bubble {
  position: relative;
  background: var(--white);
  border: 2px solid var(--quote-teal);
  border-radius: 0.35rem;
  padding: clamp(1.5rem, 3vw, 2rem);
  max-width: 695px;
  margin-inline: auto;
  box-shadow: none;
}

.quote__bubble::before,
.quote__bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
}

.quote__bubble::before {
  bottom: -16px;
  border-top: 16px solid var(--quote-teal);
}

.quote__bubble::after {
  bottom: -12px;
  border-top: 14px solid var(--white);
}

.quote__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin: 0 auto 1rem;
  color: #503387;
  border: 2px solid rgba(138, 214, 204, 0.4);
  border-radius: 0.2rem;
  background: var(--white);
}

.quote__mark svg {
  width: 1.15rem;
  height: 1.15rem;
}

.quote__bubble p {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  line-height: 1.55;
  color: var(--ink);
}

.quote__author {
  margin-top: 1.65rem;
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 2vw, 1.25rem);
  font-weight: 700;
  color: #503387;
}

.quotes__btn {
  box-sizing: border-box;
  width: 2.75rem;
  height: 2.75rem;
  margin: 0;
  padding: 0;
  border-radius: 999px;
  border: none;
  background: rgba(58, 48, 72, 0.08);
  color: var(--ink);
  font: inherit;
  font-size: 0;
  line-height: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
  flex-shrink: 0;
  box-shadow: none;
  outline-offset: 3px;
  -webkit-tap-highlight-color: transparent;
}

.quotes__btn .wagn-icon {
  display: block;
  width: 1.05rem;
  height: 1.05rem;
  flex-shrink: 0;
  pointer-events: none;
}

.quotes__btn:hover {
  background: rgba(80, 51, 135, 0.14);
  color: var(--purple);
}

.quotes__btn:focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: 3px;
}

.quotes__btn:active {
  transform: scale(0.96);
}

@media (max-width: 699px) {
  .quotes {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "stage stage"
      "prev next";
    gap: 1rem;
  }

  .quotes__stage {
    grid-area: stage;
  }

  .quotes__btn--prev {
    grid-area: prev;
    justify-self: end;
  }

  .quotes__btn--next {
    grid-area: next;
    justify-self: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .quote__thumb img {
    transition: none;
  }
}

/* ---------- Events + FAQs (legacy split) / standalone FAQs ---------- */
.info-split {
  background: var(--white);
  padding-top: clamp(1.75rem, 3.5vw, 2.75rem);
}

.info-split__grid {
  display: grid;
  gap: 2rem;
}

@media (min-width: 900px) {
  .info-split__grid {
    grid-template-columns: 1fr 1.1fr;
    gap: 2.5rem;
    align-items: start;
  }
}

.info-panel h2,
.faqs__title {
  font-family: var(--font-fun);
  font-size: clamp(1.85rem, 3.4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 1.1rem;
  text-align: center;
}

.faqs {
  background: var(--white);
  padding-top: clamp(1.75rem, 3.5vw, 2.75rem);
  text-align: center;
}

.faqs__lede {
  margin: -0.35rem auto 1.35rem;
  max-width: 36rem;
  color: var(--ink-muted);
  font-size: 1.05rem;
  text-align: center;
}

.faqs .faq-list {
  text-align: left;
}

.event-rows {
  display: grid;
  gap: 0.65rem;
}

.event-row a {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: 1rem;
  align-items: center;
  padding: 0.85rem 1rem;
  border-radius: 1.15rem 1.35rem 1.1rem 1.3rem;
  border: 1px solid var(--line);
  background: var(--lavender);
  text-decoration: none;
  transition:
    background 0.22s var(--ease),
    border-color 0.22s var(--ease),
    transform 0.25s var(--ease),
    box-shadow 0.22s var(--ease);
}

.event-row:nth-child(even) a {
  background: var(--mint);
  border-radius: 1.3rem 1.05rem 1.35rem 1.15rem;
}

.event-row a:hover,
.event-row a:focus-visible {
  background: var(--white);
  border-color: rgba(96, 51, 135, 0.28);
  box-shadow: 0 10px 24px rgba(58, 48, 72, 0.1);
  transform: translateY(-3px);
  outline: none;
}

.event-row a:active {
  transform: translateY(1px) scale(0.99);
  box-shadow: none;
}

.event-row__date {
  display: grid;
  justify-items: center;
  line-height: 1;
  transition: transform 0.25s var(--ease);
}

.event-row__month {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.event-row__day {
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 800;
  color: var(--purple);
}

.event-row__range {
  display: block;
  font-size: 0.85rem;
  color: var(--ink-muted);
  margin-bottom: 0.15rem;
}

.event-row__name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--purple);
}

.faq-list {
  display: grid;
  gap: 0.15rem;
}

.faq {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(96, 51, 135, 0.1);
  border-radius: 0;
  padding: 0;
  transition: background 0.25s var(--ease);
}

.faq[open] {
  box-shadow: none;
  background: rgba(138, 214, 204, 0.08);
  border-radius: 14px;
  border-bottom-color: transparent;
  margin-bottom: 0.35rem;
}

.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 0.65rem;
  font-family: var(--font-display);
  font-weight: 700;
  color: #4a4458;
  line-height: 1.35;
}

.faq summary .faq__q {
  margin: 0;
  font: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  line-height: inherit;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: none;
}

.faq__paw {
  flex: 0 0 auto;
  margin-top: 0.15rem;
  background-color: var(--aqua);
}

.faq[open] .faq__paw {
  background-color: var(--aqua-bright);
  transform: rotate(-10deg) scale(1.08);
}

.faq p {
  padding: 0 0.65rem 1rem 2.5rem;
  color: var(--ink-muted);
}

.faq p a {
  color: var(--purple);
  font-weight: 600;
}

/* ---------- Reveals + cinematic motion ---------- */
.js .reveal {
  opacity: 0;
  transform: translateY(var(--reveal-distance, 1.15rem));
  transition:
    opacity var(--reveal-duration) var(--ease-settle, var(--ease-editorial)),
    transform var(--reveal-duration) var(--ease-settle, var(--ease-editorial));
  transition-delay: var(--reveal-delay, 0ms);
}

.js .reveal--title {
  transform: translateY(calc(var(--reveal-distance, 1.15rem) * 1.2));
}

.js .reveal.is-inview {
  opacity: 1;
  transform: none;
}

/* Hero: opacity-only so H1 stays centered before .is-inview (backup for motion CSS) */
.js [data-hero] .reveal,
.js [data-hero] .reveal--title {
  transform: none;
}

/* Mobile: shorter travel, opacity + translate only (no scale) */
@media (max-width: 899px) {
  .js .reveal {
    transform: translateY(var(--reveal-distance, 0.85rem));
  }

  .js .reveal--title {
    transform: translateY(calc(var(--reveal-distance, 0.85rem) + 0.25rem));
  }

  .hero-lane img,
  .doodles,
  [data-scroll-media] img,
  .feature__media img,
  .vehicle__media img,
  .vp-feature__media img,
  .features__van {
    will-change: auto;
    transform: none !important;
    filter: none;
  }

  /* Skip paint-heavy blur on mobile (PSI / battery) */
  .feature-cover {
    filter: none;
    box-shadow: 0 0 10px 6px var(--cover, #cfc9c2);
  }
}

/* Desktop media settle: see wagn-motion.css (.is-media-enter / .is-media-settled) */

.section {
  position: relative;
}

.begin-step,
.feature {
  transition: transform 0.35s var(--ease);
}

@media (hover: hover) {
  .begin-step:hover {
    transform: translateY(-0.35rem);
  }

  .feature:hover {
    transform: translateY(-8px);
  }
}

/* Soft organic section breaks */
.partner,
.journey,
.action,
.features,
.spotlight,
.begin,
.community,
.info-split {
  isolation: isolate;
}

/* ---------- Background doodles (decorative only) ---------- */
.doodles {
  position: absolute;
  inset: -1.5rem 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
  will-change: auto;
}

@media (min-width: 900px) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .doodles[data-parallax] {
    will-change: translate;
  }
}

[data-parallax] {
  backface-visibility: hidden;
}

.doodle {
  position: absolute;
  color: var(--purple);
  opacity: 0.14;
  line-height: 0;
}

.doodle--icon {
  display: block;
  background-color: currentColor;
  -webkit-mask: var(--doodle-icon) center / contain no-repeat;
  mask: var(--doodle-icon) center / contain no-repeat;
  aspect-ratio: 1;
  height: auto;
}

.doodle--icon-paw {
  --doodle-icon: url("images/icons/paw.svg");
}

.doodle--icon-diamond {
  --doodle-icon: url("images/icons/diamond.svg");
}

.doodle--icon-heart {
  --doodle-icon: url("images/icons/heart.svg");
}

.doodle--icon-star {
  --doodle-icon: url("images/icons/star.svg");
}

.doodle--icon-vehicle {
  --doodle-icon: url("images/icons/grooming-van-doodle.svg");
}

.doodle--icon-bolt {
  --doodle-icon: url("images/icons/bolt.svg");
}

.doodle--icon-leaf {
  --doodle-icon: url("images/icons/leaf.svg");
}

.doodle--icon-pin {
  --doodle-icon: url("images/icons/pin.svg");
}

.doodle--icon-calendar {
  --doodle-icon: url("images/icons/calendar.svg");
}

.doodle--icon-chat {
  --doodle-icon: url("images/icons/chat.svg");
}

.doodle--icon-key {
  --doodle-icon: url("images/icons/paw.svg");
}

.doodle--icon-dollar {
  --doodle-icon: url("images/icons/dollar.svg");
}

.doodle--icon-user {
  --doodle-icon: url("images/icons/user.svg");
}

.doodle--icon-scissors {
  --doodle-icon: url("images/icons/scissors.svg");
}

.doodle--icon-shield {
  --doodle-icon: url("images/icons/shield.svg");
}

.doodle--teal {
  color: var(--aqua);
  opacity: 0.22;
}

.doodle--soft {
  opacity: 0.12;
}

.doodle--paw-1 {
  width: 2.4rem;
  top: 12%;
  left: 4%;
  transform: rotate(-18deg);
}

.doodle--diamond-1 {
  width: 1.35rem;
  top: 28%;
  right: 6%;
  transform: rotate(22deg);
}

.doodle--pup-1 {
  width: 3.1rem;
  bottom: 14%;
  left: 7%;
  transform: rotate(8deg);
}

.doodle--van-1 {
  width: 3.6rem;
  top: 18%;
  right: 5%;
  transform: rotate(-6deg);
}

.doodle--paw-2 {
  width: 1.9rem;
  bottom: 22%;
  right: 8%;
  transform: rotate(14deg);
}

.doodle--diamond-2 {
  width: 1.1rem;
  top: 10%;
  left: 10%;
  transform: rotate(-12deg);
}

.doodle--paw-3 {
  width: 2.1rem;
  top: 20%;
  right: 7%;
  transform: rotate(26deg);
}

.doodle--pup-2 {
  width: 2.7rem;
  bottom: 18%;
  left: 5%;
  transform: rotate(-10deg);
}

.doodle--diamond-3 {
  width: 1.25rem;
  top: 35%;
  left: 3%;
  transform: rotate(40deg);
}

.doodle--van-ride {
  width: 2.8rem;
  bottom: 16%;
  right: 5%;
  transform: rotate(-8deg);
  opacity: 0.1;
}

.doodle--van-2 {
  width: 3.2rem;
  bottom: 12%;
  right: 4%;
  transform: rotate(7deg);
}

.doodle--paw-4 {
  width: 1.7rem;
  top: 16%;
  left: 6%;
  transform: rotate(-24deg);
}

.doodle--br {
  top: auto;
  left: auto;
  bottom: 20%;
  right: 5%;
}

.doodle--br-low {
  top: auto;
  left: auto;
  bottom: 28%;
  right: 10%;
}

.doodle--ml {
  top: 22%;
  left: 3%;
}

.doodle--feat-1 {
  width: 1.35rem;
  top: 12%;
  right: 8%;
  transform: rotate(18deg);
}

.doodle--feat-2 {
  width: 1.8rem;
  bottom: 18%;
  left: 4%;
  transform: rotate(-16deg);
}

.doodle--info-1 {
  width: 1.7rem;
  top: 14%;
  right: 6%;
  transform: rotate(12deg);
}

.doodle--info-2 {
  width: 1.5rem;
  bottom: 22%;
  left: 5%;
  transform: rotate(-14deg);
}

@media (max-width: 699px) {
  .doodle--van-1,
  .doodle--van-2,
  .doodle--pup-1,
  .doodle--info-2 {
    opacity: 0.1;
  }

  .doodle--paw-1,
  .doodle--diamond-1,
  .doodle--feat-1 {
    display: none;
  }
}

/* ---------- Playful motion (respects reduced-motion below) ---------- */
@keyframes panel-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes hotspot-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.55);
  }
  65% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.12);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes icon-wiggle {
  0%,
  100% {
    transform: rotate(0deg) scale(1);
  }
  35% {
    transform: rotate(-10deg) scale(1.08);
  }
  70% {
    transform: rotate(8deg) scale(1.04);
  }
}

@keyframes doodle-drift {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -6px;
  }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .journey-tile:hover .tile-icon,
  .journey-tile:focus-visible .tile-icon,
  .journey-tile:hover .paw-icon,
  .journey-tile:focus-visible .paw-icon {
    animation: icon-wiggle 0.55s var(--ease);
  }

  .spotlight-tile:hover .spotlight-tile__icon,
  .spotlight-tile:focus-visible .spotlight-tile__icon {
    animation: icon-wiggle 0.55s var(--ease);
  }

  .feature-row.is-active .feature-row__icon,
  .feature-row:hover .feature-row__icon {
    animation: icon-wiggle 0.55s var(--ease);
  }

  .vehicle-card:hover .vehicle-card__ico,
  .vehicle-card:focus-visible .vehicle-card__ico {
    animation: icon-wiggle 0.55s var(--ease);
  }

  /* Card lift: wagn-motion.css coast (no competing vehicle-lift / spotlight-lift) */

  .event-row a:hover .event-row__date,
  .event-row a:focus-visible .event-row__date {
    animation: icon-wiggle 0.5s var(--ease);
  }

  /* Doodle loops removed — one-shot float + optional van idle live in wagn-motion.css */
}

@keyframes vehicle-lift {
  0% { transform: translateY(var(--tile-y)) scale(1); }
  40% { transform: translateY(calc(var(--tile-y) - 0.38rem)) scale(1.016); }
  70% { transform: translateY(calc(var(--tile-y) - 0.26rem)) scale(1.01); }
  100% { transform: translateY(calc(var(--tile-y) - 0.3rem)) scale(1.015); }
}

@keyframes spotlight-lift {
  0% { transform: translateY(var(--tile-y)) scale(1); }
  40% { transform: translateY(calc(var(--tile-y) - 0.38rem)) scale(1.02); }
  70% { transform: translateY(calc(var(--tile-y) - 0.26rem)) scale(1.01); }
  100% { transform: translateY(calc(var(--tile-y) - 0.3rem)) scale(1.015); }
}

/* Compact vehicle tiles below desktop 3-up */
@media (max-width: 799px) {
  .vehicle-card {
    flex-direction: row;
    align-items: center;
    gap: 0.7rem;
    padding: 0.65rem 0.75rem 0.7rem;
  }

  .vehicle-card__media {
    width: 8.1rem;
    aspect-ratio: 16 / 9;
    max-height: none;
    margin-bottom: 0;
    padding: 0.18rem 0.22rem;
    flex-shrink: 0;
  }

  .vehicle-card__media img {
    max-height: 4.55rem;
  }

  .vehicle-card__title {
    margin-bottom: 0.3rem;
    font-size: 1.08rem;
  }

  .vehicle-card__specs {
    margin-bottom: 0.3rem;
    gap: 0.15rem;
  }

  .vehicle-card__specs li {
    font-size: 0.8rem;
  }

  .vehicle-card__cta {
    font-size: 0.85rem;
  }
}

/* Mobile / touch layout polish */
@media (max-width: 599px) {
  .site-logo__img {
    height: 34px;
    max-width: min(58vw, 190px);
  }

  .hero {
    padding-top: calc(var(--header-h) + 1.55rem);
    padding-bottom: 1.25rem;
  }

  .hero__title {
    font-size: clamp(1.9rem, 9vw, 2.45rem);
    max-width: 15ch;
  }

  .hero__lede {
    font-size: 0.95rem;
    margin-top: 0.75rem;
    max-width: 34ch;
    padding-inline: 0.25rem;
    overflow-wrap: anywhere;
  }

  .hero-lanes {
    margin-top: 1.15rem;
    gap: 0.85rem;
  }

  .hero-lane {
    aspect-ratio: 16 / 11;
    border-radius: 1.15rem;
  }

  .vehicle-tabs__list {
    width: 100%;
    grid-template-columns: 1fr;
  }

  .vehicle-tabs__tab {
    min-width: 0;
    width: 100%;
    min-height: 2.85rem;
  }

  .vehicle-card__media {
    width: 7.35rem;
  }

  .vehicle-card__media img {
    max-height: 4.2rem;
  }

  .vehicle-card__title {
    font-size: 1.05rem;
  }

  .vehicle-card__specs li {
    font-size: 0.78rem;
  }

  .action__title {
    max-width: none;
  }

  .action__video {
    border-radius: 1.15rem;
  }

  .event-row a {
    min-height: 4.25rem;
    padding: 0.8rem 0.9rem;
  }

  .journey-tile {
    min-height: 0;
    padding: 1.1rem 1rem;
  }

  .features__stage {
    max-width: min(17rem, 82vw);
  }

  .features__controls:not([hidden]) {
    gap: 0.55rem;
  }

  .features__nav {
    width: 2.75rem;
    height: 2.75rem;
  }

  .begin-step {
    padding-inline: 1rem;
  }

  .spotlight-tile,
  .journey-tile {
    max-width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:has(body.wagn-home) {
    scroll-behavior: auto;
  }

  .js .reveal,
  .hero__glow,
  .hero__title.text-gradient,
  .mobile-dock,
  .vehicle-panel.is-entering,
  .feature-spot,
  .feature-spot.is-active,
  .features__nav,
  .doodle,
  .journey-tile:hover,
  .journey-tile:hover .tile-icon,
  .spotlight-tile:hover,
  .spotlight-tile:hover .spotlight-tile__icon,
  .feature-row.is-active .feature-row__icon,
  .feature-row:hover .feature-row__icon,
  .vehicle-card:hover,
  .vehicle-card:hover .vehicle-card__ico,
  .event-row a:hover .event-row__date {
    animation: none !important;
  }

  .js .reveal,
  .hero__glow,
  .mobile-dock,
  [data-parallax] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    translate: none !important;
  }

  .hero__glow,
  .mobile-dock,
  [data-parallax] {
    filter: none !important;
  }

  /* Keep a soft static title glow when motion is reduced */
  .hero__title.text-gradient {
    filter:
      drop-shadow(0 1px 0 rgba(255, 255, 255, 0.3))
      drop-shadow(0 6px 20px rgba(96, 51, 135, 0.12)) !important;
    background-image: var(--heading-gradient) !important;
    background-size: 100% 100% !important;
    background-position: 0 0 !important;
  }

  [data-parallax] {
    will-change: auto !important;
  }

  .btn:hover,
  .btn:active,
  .hero-lane:hover,
  .journey-tile:hover,
  .journey-tile:focus-visible,
  .spotlight-tile:hover,
  .spotlight-tile:focus-visible,
  .vehicle-card:hover,
  .vehicle-card:focus-visible,
  .vehicle-card:active,
  .vehicles__more-link:hover,
  .vehicle-tabs__tab:hover,
  .event-row a:hover,
  .event-row a:focus-visible,
  .event-row a:active,
  .begin-step {
    transform: none !important;
  }

  .vehicle-card:hover .vehicle-card__media img,
  .vehicle-card:focus-visible .vehicle-card__media img {
    transform: none !important;
  }
}

/* ============================================================
   WordPress / Kadence conflict overrides (front-page only)
   Scoped under body.wagn-home so the rest of the site is untouched.
   ============================================================ */

/* Fixed header clears the WP admin bar */
body.wagn-home.admin-bar .site-header[data-header] {
  top: 32px;
}

@media screen and (max-width: 782px) {
  body.wagn-home.admin-bar .site-header[data-header] {
    top: 46px;
  }
}

/* Hero breathes below fixed header (+ admin bar when present) */
body.wagn-home .hero {
  padding-top: calc(var(--header-h) + var(--header-gap)) !important;
}

body.wagn-home.admin-bar .hero {
  padding-top: calc(var(--header-h) + 32px + var(--header-gap)) !important;
}

@media screen and (max-width: 782px) {
  body.wagn-home.admin-bar .hero {
    padding-top: calc(var(--header-h) + 46px + var(--header-gap)) !important;
  }
}

@media (max-width: 599px) {
  body.wagn-home .hero {
    padding-top: calc(var(--header-h) + 1.55rem) !important;
  }

  body.wagn-home.admin-bar .hero {
    padding-top: calc(var(--header-h) + 46px + 1.55rem) !important;
  }
}

/* Kill Kadence leftover top spacers that can fight the designed hero */
body.wagn-home #wrapper,
body.wagn-home #inner-wrap,
body.wagn-home .site,
body.wagn-home .content-area,
body.wagn-home .content-container,
body.wagn-home .entry-content-wrap,
body.wagn-home .entry-content,
body.wagn-home main#main {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Horizontal overflow from Kadence wrappers / wide media */
body.wagn-home,
body.wagn-home #wrapper,
body.wagn-home #inner-wrap,
body.wagn-home .site-container,
body.wagn-home .content-container {
  overflow-x: clip;
  max-width: 100%;
}

/* Footer menu bullets — beat Kadence / WP entry-content list styles */
body.wagn-home .site-footer ul,
body.wagn-home .site-footer ol,
body.wagn-home .site-footer .footer-nav,
body.wagn-home .site-footer .footer-col ul,
body.wagn-home .site-footer__grid ul,
body.wagn-home .entry-content .site-footer ul,
body.wagn-home .entry-content .site-footer ol {
  list-style: none !important;
  list-style-type: none !important;
  margin: 0 !important;
  padding: 0 !important;
  padding-left: 0 !important;
  padding-inline-start: 0 !important;
}

body.wagn-home .site-footer li,
body.wagn-home .site-footer__grid li,
body.wagn-home .entry-content .site-footer li {
  list-style: none !important;
  list-style-type: none !important;
  margin: 0 !important;
  padding-left: 0 !important;
}

body.wagn-home .site-footer li::before,
body.wagn-home .site-footer li::after,
body.wagn-home .site-footer li::marker,
body.wagn-home .site-footer__grid li::before,
body.wagn-home .site-footer__grid li::after,
body.wagn-home .site-footer__grid li::marker,
body.wagn-home .entry-content .site-footer li::before,
body.wagn-home .entry-content .site-footer li::marker {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  background: none !important;
  border: 0 !important;
}

/* Designed lists elsewhere — prevent Kadence disc / ::before bullets */
body.wagn-home .journey__grid,
body.wagn-home .action__points,
body.wagn-home .vehicle-list,
body.wagn-home .vehicle-card__specs,
body.wagn-home .feature-covers,
body.wagn-home .feature-spots,
body.wagn-home .features__list,
body.wagn-home .spotlight__grid,
body.wagn-home .event-rows,
body.wagn-home .begin__steps,
body.wagn-home .site-nav__list,
body.wagn-home .site-nav__sub,
body.wagn-home .site-nav__nested,
body.wagn-home .mobile-nav__sub,
body.wagn-home .faq summary {
  list-style: none !important;
  list-style-type: none !important;
}

body.wagn-home .journey__grid > li,
body.wagn-home .action__points > li,
body.wagn-home .vehicle-list > li,
body.wagn-home .vehicle-card__specs > li,
body.wagn-home .feature-covers > li,
body.wagn-home .feature-spots > li,
body.wagn-home .features__list > li,
body.wagn-home .spotlight__grid > li,
body.wagn-home .event-rows > li,
body.wagn-home .begin__steps > li,
body.wagn-home .begin-step {
  list-style: none !important;
  list-style-type: none !important;
}

/* Begin steps: kill Kadence/ol counters so only .begin-step__num shows */
body.wagn-home .entry-content ol.begin__steps,
body.wagn-home ol.begin__steps,
body.wagn-home .begin__steps {
  list-style: none !important;
  list-style-type: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
  counter-reset: none !important;
}

body.wagn-home .entry-content .begin__steps > li,
body.wagn-home .entry-content .begin-step,
body.wagn-home .begin__steps > li,
body.wagn-home .begin-step {
  list-style: none !important;
  list-style-type: none !important;
  padding-left: 0 !important;
}

body.wagn-home .journey__grid > li::before,
body.wagn-home .journey__grid > li::marker,
body.wagn-home .action__points > li::before,
body.wagn-home .action__points > li::marker,
body.wagn-home .vehicle-list > li::before,
body.wagn-home .vehicle-list > li::marker,
body.wagn-home .vehicle-card__specs > li::before,
body.wagn-home .vehicle-card__specs > li::marker,
body.wagn-home .feature-covers > li::before,
body.wagn-home .feature-covers > li::marker,
body.wagn-home .feature-spots > li::before,
body.wagn-home .feature-spots > li::marker,
body.wagn-home .features__list > li::before,
body.wagn-home .features__list > li::marker,
body.wagn-home .spotlight__grid > li::before,
body.wagn-home .spotlight__grid > li::marker,
body.wagn-home .event-rows > li::before,
body.wagn-home .event-rows > li::marker,
body.wagn-home .begin__steps > li::before,
body.wagn-home .begin__steps > li::marker,
body.wagn-home .begin-step::before,
body.wagn-home .begin-step::marker,
body.wagn-home .entry-content .begin__steps > li::before,
body.wagn-home .entry-content .begin__steps > li::marker,
body.wagn-home .entry-content .begin-step::before,
body.wagn-home .entry-content .begin-step::marker,
body.wagn-home .faq summary::marker,
body.wagn-home .faq summary::-webkit-details-marker {
  content: none !important;
  display: none !important;
  counter-increment: none !important;
}

/* Mobile dock must not cover footer content */
@media (max-width: 859px) {
  body.wagn-home {
    padding-bottom: 5.75rem !important;
  }

  body.wagn-home .site-footer {
    padding-bottom: calc(1.5rem + 4.75rem);
  }

  body.wagn-home .mobile-dock {
    bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
  }
}