:root {
  --background: #f4f5f7;
  --foreground: #1a1f26;
  --primary: #111827;
  --primary-hover: #000;
  --accent: #f7c948;
  --accent-ink: #111827;
  --steel: #d7dde5;
  --asphalt: #0f1318;
  --vmv-yellow: #f7c948;
}

html {
  color-scheme: light;
}

body {
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(247, 201, 72, 0.12), transparent 55%),
    linear-gradient(180deg, #eceff3 0%, #f7f8fa 40%, #eef1f5 100%) !important;
  color: var(--foreground);
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
  letter-spacing: 0.01em;
}

h1, h2, h3, h4 {
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif !important;
  letter-spacing: 0.02em;
}

/* Header — workshop bar */
header.bg-white {
  background: var(--asphalt) !important;
  border-bottom: 3px solid var(--vmv-yellow) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important;
}

header a,
header button,
header .text-gray-700,
header .text-gray-900,
header .text-blue-900,
header nav a {
  color: #f3f4f6 !important;
}

header a:hover {
  color: var(--vmv-yellow) !important;
}

/* Disclosure strip (first banner under header) */
body > div > div.bg-blue-50,
header + div.bg-blue-50,
.bg-blue-50.border-b-2.border-blue-200 {
  background: #151a21 !important;
  border-color: #2a313c !important;
}

.bg-blue-50.border-b-2.border-blue-200 .text-blue-900,
.bg-blue-50.border-b-2 .text-blue-900 {
  color: #d1d5db !important;
}

.bg-blue-50.border-b-2.border-blue-200 a {
  color: var(--vmv-yellow) !important;
}

/* Homepage hero — first main section with blue gradient utilities */
main > section.bg-gradient-to-br.from-blue-50,
main > section.from-blue-50.via-white.to-slate-50 {
  position: relative !important;
  isolation: isolate;
  overflow: hidden;
  border-bottom: none !important;
  background-color: #0f1318 !important;
  background-image:
    linear-gradient(105deg, rgba(15, 19, 24, 0.82) 0%, rgba(15, 19, 24, 0.62) 45%, rgba(15, 19, 24, 0.4) 100%),
    url("/media/hero-van.jpg") !important;
  background-position: center, center !important;
  background-size: cover, cover !important;
  background-repeat: no-repeat, no-repeat !important;
  min-height: min(78vh, 720px);
  display: flex !important;
  align-items: center;
}

main > section.bg-gradient-to-br.from-blue-50::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 60%, rgba(15, 19, 24, 0.55) 100%),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 48px,
      rgba(247, 201, 72, 0.035) 48px,
      rgba(247, 201, 72, 0.035) 49px
    );
  pointer-events: none;
  z-index: 0;
}

main > section.bg-gradient-to-br.from-blue-50 > .container {
  position: relative;
  z-index: 1;
  width: 100%;
}

main > section.bg-gradient-to-br.from-blue-50 > .container > .max-w-4xl > h1 {
  color: #fff !important;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}

main > section.bg-gradient-to-br.from-blue-50 > .container > .max-w-4xl > p {
  color: #d1d5db !important;
}

/* Hero trust badges (Free / No sign-up / …) — light on dark hero */
main > section.bg-gradient-to-br.from-blue-50 .flex.flex-wrap.justify-center.gap-4 {
  color: #e5e7eb !important;
}

main > section.bg-gradient-to-br.from-blue-50 .flex.flex-wrap.justify-center.gap-4 .font-medium,
main > section.bg-gradient-to-br.from-blue-50 .flex.flex-wrap.justify-center.gap-4 .text-gray-700 {
  color: #e5e7eb !important;
}

main > section.bg-gradient-to-br.from-blue-50 .flex.flex-wrap.justify-center.gap-4 .text-green-600 {
  color: #4ade80 !important;
}

main > section.bg-gradient-to-br.from-blue-50 .flex.flex-wrap.justify-center.gap-4 .text-blue-600 {
  color: #fcd34d !important;
}

/* Form card stays dark-on-light */
main > section.bg-gradient-to-br.from-blue-50 .bg-white {
  background: rgba(255, 255, 255, 0.97) !important;
  border-color: var(--vmv-yellow) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35) !important;
  backdrop-filter: blur(6px);
  border-radius: 0.75rem !important;
  color: #111827 !important;
}

main > section.bg-gradient-to-br.from-blue-50 .bg-white h3,
main > section.bg-gradient-to-br.from-blue-50 .bg-white .text-gray-900,
main > section.bg-gradient-to-br.from-blue-50 .bg-white label {
  color: #111827 !important;
  text-shadow: none !important;
}

/* Plate-style CTA */
.bg-blue-900,
.bg-blue-700,
a.bg-blue-900,
button.bg-blue-900,
button.bg-blue-700 {
  background: var(--vmv-yellow) !important;
  color: var(--accent-ink) !important;
  border: 2px solid #111827 !important;
  font-family: "Barlow Condensed", sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 4px 0 #111827;
}

.bg-blue-900:hover,
.bg-blue-700:hover,
a.bg-blue-900:hover,
button.bg-blue-900:hover,
button.bg-blue-700:hover,
.hover\:bg-blue-800:hover {
  background: #ffd76a !important;
  color: #111827 !important;
}

.text-blue-900,
.text-blue-700,
.text-blue-600,
a.text-blue-900 {
  color: #111827 !important;
}

.prose a {
  color: #1f2937 !important;
  text-decoration-color: var(--vmv-yellow) !important;
  text-decoration-thickness: 2px;
}

/* Size cards — icons via href (survives React hydration) */
a[href="/van-valuation/small-vans/"],
a[href="/van-valuation/medium-vans/"],
a[href="/van-valuation/large-vans/"],
a[href="/van-valuation/pickup-vans/"],
a[href="/van-valuation/electric-vans/"] {
  position: relative;
  background: #fff !important;
  border: 2px solid #e5e7eb !important;
  border-radius: 0.75rem !important;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  overflow: hidden;
}

a[href="/van-valuation/small-vans/"]::before,
a[href="/van-valuation/medium-vans/"]::before,
a[href="/van-valuation/large-vans/"]::before,
a[href="/van-valuation/pickup-vans/"]::before,
a[href="/van-valuation/electric-vans/"]::before {
  content: "";
  display: block;
  width: 48px;
  height: 48px;
  margin: 0 auto 0.75rem;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

a[href="/van-valuation/small-vans/"]::before { background-image: url("/media/icons/van-small.svg"); }
a[href="/van-valuation/medium-vans/"]::before { background-image: url("/media/icons/van-medium.svg"); }
a[href="/van-valuation/large-vans/"]::before { background-image: url("/media/icons/van-large.svg"); }
a[href="/van-valuation/pickup-vans/"]::before { background-image: url("/media/icons/van-pickup.svg"); }
a[href="/van-valuation/electric-vans/"]::before { background-image: url("/media/icons/van-electric.svg"); }

a[href="/van-valuation/small-vans/"]::after,
a[href="/van-valuation/medium-vans/"]::after,
a[href="/van-valuation/large-vans/"]::after,
a[href="/van-valuation/pickup-vans/"]::after,
a[href="/van-valuation/electric-vans/"]::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--vmv-yellow);
}

a[href="/van-valuation/small-vans/"]:hover,
a[href="/van-valuation/medium-vans/"]:hover,
a[href="/van-valuation/large-vans/"]:hover,
a[href="/van-valuation/pickup-vans/"]:hover,
a[href="/van-valuation/electric-vans/"]:hover {
  border-color: #111827 !important;
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(17, 24, 39, 0.14) !important;
}

a[href="/van-valuation/small-vans/"] h3,
a[href="/van-valuation/medium-vans/"] h3,
a[href="/van-valuation/large-vans/"] h3,
a[href="/van-valuation/pickup-vans/"] h3,
a[href="/van-valuation/electric-vans/"] h3 {
  color: #111827 !important;
}

.hover\:border-blue-500:hover {
  border-color: #111827 !important;
}

/* Soft info panels — keep pale amber, not corporate blue */
main .bg-blue-50:not(.border-b-2) {
  background: #fff8e1 !important;
  border-color: #f0d98a !important;
}

.border-t-blue-900 {
  border-top-color: var(--vmv-yellow) !important;
}

.focus\:ring-blue-500:focus {
  --tw-ring-color: var(--vmv-yellow) !important;
}

footer,
footer.bg-gray-900,
footer.bg-slate-50 {
  background: var(--asphalt) !important;
  border-top: 3px solid var(--vmv-yellow);
  color: #d1d5db !important;
}

footer .text-gray-600,
footer .text-gray-700,
footer .text-gray-900,
footer h3 {
  color: #e5e7eb !important;
}

footer a {
  color: #d1d5db !important;
}

footer a:hover {
  color: var(--vmv-yellow) !important;
}

@keyframes vmv-rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

main > section.bg-gradient-to-br.from-blue-50 > .container > .max-w-4xl > h1 {
  animation: vmv-rise 0.7s ease-out both;
}

main > section.bg-gradient-to-br.from-blue-50 > .container > .max-w-4xl > p {
  animation: vmv-rise 0.7s ease-out 0.12s both;
}

main > section.bg-gradient-to-br.from-blue-50 .bg-white {
  animation: vmv-rise 0.75s ease-out 0.22s both;
}

@media (prefers-reduced-motion: reduce) {
  main > section.bg-gradient-to-br.from-blue-50 > .container > .max-w-4xl > h1,
  main > section.bg-gradient-to-br.from-blue-50 > .container > .max-w-4xl > p,
  main > section.bg-gradient-to-br.from-blue-50 .bg-white {
    animation: none;
  }
}