/* ==========================================================================
   VELOCITY — style.css
   Exotic/sports used cars · dark neon nightlife. Class prefix: .vel-
   Palette: near-black #0a0a12 · magenta #ff2d7e · gold #f5c518 · violet #6a3cff
            · mist #e6e6f0.  Fonts: Space Grotesk (display) + Public Sans (body).
   Signature: horizontal-scroll showroom + cursor-follow neon spotlight.
   Buttons: skewed parallelograms with neon gradient border.
   ========================================================================== */

:root {
  --vel-black: #0a0a12;
  --vel-ink: #101020;
  --vel-panel: #14142a;
  --vel-panel-2: #191934;
  --vel-line: rgba(230, 230, 240, 0.12);
  --vel-magenta: #ff2d7e;
  --vel-gold: #f5c518;
  --vel-violet: #6a3cff;
  --vel-mist: #e6e6f0;
  --vel-dim: rgba(230, 230, 240, 0.62);
  --vel-dimmer: rgba(230, 230, 240, 0.42);
  --vel-neon: linear-gradient(115deg, var(--vel-magenta), var(--vel-violet) 55%, var(--vel-gold));
  --vel-font-display:var(--catalog-font-heading);
  --vel-font-body:var(--catalog-font-body);
  --vel-radius: 4px;
  --vel-wrap: 1240px;
  --vel-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.85);
  --vel-skew: -11deg;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--vel-black);
  color: var(--vel-mist);
  font-family: var(--vel-font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.vel-lock { overflow: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--vel-font-display); font-weight: 400; line-height: 1.08; letter-spacing: 0.01em; margin: 0; }
::selection { background: var(--vel-magenta); color: #fff; }

/* ---------- background glow field ---------- */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(60% 45% at 12% -5%, rgba(106, 60, 255, 0.22), transparent 60%),
    radial-gradient(55% 40% at 92% 0%, rgba(255, 45, 126, 0.18), transparent 60%),
    radial-gradient(70% 60% at 50% 120%, rgba(245, 197, 24, 0.10), transparent 60%);
  pointer-events: none;
}

/* ---------- layout ---------- */
.vel-wrap { width: min(var(--vel-wrap), 92%); margin-inline: auto; }
.vel-narrow { max-width: 760px; }
.vel-section { padding: clamp(3.5rem, 7vw, 6.5rem) 0; }
.vel-eyebrow {
  font-family: var(--vel-font-display); font-size: 0.66rem; letter-spacing: 0.32em;
  text-transform: uppercase; color: var(--vel-magenta); display: inline-block; margin-bottom: 1rem;
}
.vel-eyebrow.center { display: block; text-align: center; }
.vel-h2 { font-size: clamp(1.9rem, 4.2vw, 3.1rem); }
.vel-lede { color: var(--vel-dim); max-width: 60ch; }
.vel-muted { color: var(--vel-dim); }
.vel-empty { color: var(--vel-dim); padding: 3rem 0; text-align: center; grid-column: 1 / -1; }

.vel-section-head { text-align: center; margin-bottom: 2.8rem; }
.vel-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 2.4rem; }

/* ---------- SKEWED NEON BUTTONS (signature shape) ---------- */
.vel-btn {
  --b: 2px;
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  padding: 0.85rem 1.9rem; transform: skewX(var(--vel-skew));
  background: var(--vel-ink); color: var(--vel-mist);
  font-family: var(--vel-font-display); font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase;
  border: none; cursor: pointer;
  transition: transform 0.28s cubic-bezier(.2,.7,.2,1), box-shadow 0.28s, background 0.28s;
  isolation: isolate;
}
.vel-btn::before {
  content: ""; position: absolute; inset: 0; padding: var(--b);
  background: var(--vel-neon);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  z-index: -1;
}
.vel-btn > span { display: inline-flex; align-items: center; gap: 0.5rem; transform: skewX(calc(-1 * var(--vel-skew))); }
.vel-btn > span svg { transition: transform 0.28s; }
.vel-btn:hover { transform: skewX(0); background: var(--vel-panel-2); box-shadow: 0 0 0 1px rgba(255,45,126,.3), 0 14px 40px -12px rgba(255, 45, 126, 0.55); }
.vel-btn:hover > span { transform: skewX(0); }
.vel-btn:hover > span svg { transform: translateX(4px); }
.vel-btn:focus-visible { outline: 2px solid var(--vel-gold); outline-offset: 3px; }
.vel-btn--sm { padding: 0.6rem 1.2rem; font-size: 0.66rem; }
.vel-btn--block { width: 100%; }
.vel-btn--ghost { background: transparent; }
.vel-btn--ghost:hover { background: rgba(255,255,255,.04); }
.vel-btn--solid { background: var(--vel-magenta); color: #fff; }
.vel-btn--solid::before { background: var(--vel-magenta); }
.vel-btn--solid:hover { background: var(--vel-gold); color: #12121f; box-shadow: 0 14px 40px -12px rgba(245,197,24,.6); }

@media (prefers-reduced-motion: reduce) {
  .vel-btn, .vel-btn > span, .vel-btn > span svg { transition: none; }
  html { scroll-behavior: auto; }
  /* Hero carousel: freeze on the first slide, no motion */
  .vel-hslide { transition: none; }
  .vel-hslide.is-active .vel-hslide__media img { animation: none; transform: scale(1.02); }
  .vel-hslide.is-active .vel-hslide__inner { animation: none; }
  .vel-hbar.is-on .vel-hbar__fill { animation: none; width: 100%; }
}

/* ---------- badges / chips / stars ---------- */
.vel-badge {
  position: absolute; top: 0.9rem; left: 0.9rem; z-index: 3;
  font-family: var(--vel-font-display); font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 0.4rem 0.7rem; transform: skewX(var(--vel-skew));
  background: rgba(10,10,18,.72); color: var(--vel-gold); border: 1px solid rgba(245,197,24,.5); backdrop-filter: blur(6px);
}
.vel-badge--sold { color: var(--vel-magenta); border-color: rgba(255,45,126,.5); }
.vel-chip {
  font-size: 0.72rem; letter-spacing: 0.02em; color: var(--vel-dim);
  padding: 0.28rem 0.62rem; border: 1px solid var(--vel-line); border-radius: 40px; white-space: nowrap;
}
.vel-stars { display: inline-flex; gap: 2px; color: var(--vel-dimmer); font-size: 1rem; }
.vel-star.on { color: var(--vel-gold); }

/* ---------- cursor-follow spotlight zones (signature) ---------- */
[data-spot] { position: relative; }
[data-spot]::after {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit;
  opacity: 0; transition: opacity 0.3s;
  background: radial-gradient(200px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 45, 126, 0.16), transparent 60%);
  mix-blend-mode: screen;
}
[data-spot].is-lit::after { opacity: 1; }

/* ==========================================================================
   HEADER / NAV
   ========================================================================== */
.vel-topbar {
  background: var(--vel-black); border-bottom: 1px solid var(--vel-line);
  font-size: 0.72rem; letter-spacing: 0.08em; color: var(--vel-dim);
}
.vel-topbar .vel-wrap { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0; }
.vel-topbar a { color: var(--vel-mist); }
.vel-topbar__right { display: flex; gap: 1.4rem; align-items: center; }

.vel-header {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.9rem clamp(1rem, 4vw, 2.4rem);
  background: rgba(10, 10, 18, 0.82); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--vel-line);
}
.vel-brand { display: flex; align-items: center; gap: 0.7rem; }
.vel-brand__mark {
  width: 34px; height: 34px; flex: none; transform: skewX(var(--vel-skew));
  background: var(--vel-neon); display: grid; place-items: center;
  font-family: var(--vel-font-display); color: #0a0a12; font-size: 1rem;
}
.vel-brand__mark span { transform: skewX(calc(-1 * var(--vel-skew))); }
.vel-brand__word { display: flex; flex-direction: column; line-height: 1; }
.vel-brand__name { font-family: var(--vel-font-display); font-size: 1.15rem; letter-spacing: 0.16em; }
.vel-brand__sub { font-size: 0.62rem; letter-spacing: 0.14em; color: var(--vel-dim); margin-top: 4px; text-transform: uppercase; }

.vel-nav { display: flex; align-items: center; gap: 0.35rem; }
.vel-nav a {
  font-family: var(--vel-font-display); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--vel-dim); padding: 0.55rem 0.75rem; position: relative; transition: color 0.2s;
}
.vel-nav a:not(.vel-btn)::after {
  content: ""; position: absolute; left: 0.75rem; right: 0.75rem; bottom: 0.3rem; height: 2px;
  background: var(--vel-neon); transform: scaleX(0); transform-origin: left; transition: transform 0.25s;
}
.vel-nav a:not(.vel-btn):hover { color: var(--vel-mist); }
.vel-nav a:not(.vel-btn):hover::after { transform: scaleX(1); }
.vel-nav a[aria-current="page"] { color: var(--vel-mist); }
.vel-nav a[aria-current="page"]::after { transform: scaleX(1); }
.vel-nav .vel-btn { margin-left: 0.6rem; }
.vel-nav-toggle {
  display: none; background: transparent; border: 1px solid var(--vel-line); color: var(--vel-mist);
  width: 44px; height: 40px; font-size: 1.3rem; cursor: pointer; transform: skewX(var(--vel-skew));
}

/* ==========================================================================
   HERO
   ========================================================================== */
/* Auto-rotating full-bleed panel carousel */
.vel-hero { position: relative; min-height: min(90vh, 820px); display: flex; align-items: center; overflow: hidden; isolation: isolate; }
.vel-hero__grid {
  position: absolute; inset: 0; z-index: 4; opacity: 0.35; pointer-events: none;
  background-image: linear-gradient(var(--vel-line) 1px, transparent 1px), linear-gradient(90deg, var(--vel-line) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: radial-gradient(80% 70% at 50% 40%, #000, transparent 85%);
  mask-image: radial-gradient(80% 70% at 50% 40%, #000, transparent 85%);
}
.vel-hero__track { position: absolute; inset: 0; z-index: 1; }

/* Slides stacked; only .is-active shows */
.vel-hslide {
  position: absolute; inset: 0; display: flex; align-items: center;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.9s ease;
}
.vel-hslide.is-active { opacity: 1; visibility: visible; pointer-events: auto; z-index: 2; }

.vel-hslide__media { position: absolute; inset: 0; overflow: hidden; }
.vel-hslide__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); }
.vel-hslide.is-active .vel-hslide__media img { animation: vel-kenburns 8s ease-out both; }
@keyframes vel-kenburns { from { transform: scale(1.12); } to { transform: scale(1.02); } }

/* Dark scrim + accent glow per slide */
.vel-hslide__scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 90% at 88% 60%, color-mix(in srgb, var(--vel-magenta) 34%, transparent) 0%, transparent 60%),
    linear-gradient(100deg, rgba(10,10,18,0.94) 0%, rgba(10,10,18,0.72) 42%, rgba(10,10,18,0.28) 100%);
}
.vel-hslide[data-accent="violet"] .vel-hslide__scrim { background:
  radial-gradient(60% 90% at 86% 55%, color-mix(in srgb, var(--vel-violet) 40%, transparent) 0%, transparent 60%),
  linear-gradient(100deg, rgba(10,10,18,0.94) 0%, rgba(10,10,18,0.72) 42%, rgba(10,10,18,0.28) 100%); }
.vel-hslide[data-accent="gold"] .vel-hslide__scrim { background:
  radial-gradient(60% 90% at 86% 58%, color-mix(in srgb, var(--vel-gold) 30%, transparent) 0%, transparent 60%),
  linear-gradient(100deg, rgba(10,10,18,0.94) 0%, rgba(10,10,18,0.72) 42%, rgba(10,10,18,0.28) 100%); }

.vel-hslide__inner { position: relative; z-index: 2; max-width: 860px; }
.vel-hslide.is-active .vel-hslide__inner { animation: vel-slidein 0.95s cubic-bezier(0.16,0.84,0.32,1) both; }
@keyframes vel-slidein { from { opacity: 0; transform: translateX(-44px); } to { opacity: 1; transform: none; } }

.vel-hero__title { font-size: clamp(2.6rem, 8vw, 6rem); line-height: 0.98; margin-bottom: 1.4rem; }
.vel-hero__title .g { background: var(--vel-neon); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vel-hero__sub { font-size: clamp(1.05rem, 2vw, 1.3rem); color: var(--vel-dim); max-width: 56ch; margin-bottom: 2.2rem; }
.vel-hero__cta { display: flex; gap: 1rem; flex-wrap: wrap; }

/* Progress bars (auto-advance timers, skewed + neon) */
.vel-hero__ui { position: absolute; left: 0; right: 0; bottom: clamp(1.4rem, 3vw, 2.4rem); z-index: 5; }
.vel-hero__bars { display: flex; gap: 0.9rem; width: min(var(--vel-wrap), 92%); margin: 0 auto; }
.vel-hbar {
  flex: 1; height: 5px; padding: 0; border: none; cursor: pointer; position: relative; overflow: hidden;
  background: rgba(230,230,240,0.16); transform: skewX(var(--vel-skew));
}
.vel-hbar__fill { position: absolute; inset: 0; width: 0; background: var(--vel-neon); box-shadow: 0 0 14px color-mix(in srgb, var(--vel-magenta) 60%, transparent); }
.vel-hbar.is-on .vel-hbar__fill { animation: vel-fill var(--vel-hero-dur, 5.4s) linear forwards; }
.vel-hero.is-paused .vel-hbar.is-on .vel-hbar__fill { animation-play-state: paused; }
@keyframes vel-fill { from { width: 0; } to { width: 100%; } }

/* ==========================================================================
   SIGNATURE: HORIZONTAL-SCROLL SHOWROOM
   ========================================================================== */
.vel-showroom-sec { padding: clamp(2rem,5vw,3.5rem) 0 clamp(3rem,6vw,5rem); }
.vel-showroom-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; width: min(var(--vel-wrap), 92%); margin: 0 auto 1.6rem; flex-wrap: wrap; }
.vel-showroom-ctrls { display: flex; gap: 0.6rem; }
.vel-showroom-ctrls button {
  width: 48px; height: 48px; transform: skewX(var(--vel-skew));
  background: var(--vel-ink); border: 1px solid var(--vel-line); color: var(--vel-mist);
  font-size: 1.3rem; cursor: pointer; transition: background 0.2s, border-color 0.2s;
}
.vel-showroom-ctrls button:hover { background: var(--vel-panel-2); border-color: var(--vel-magenta); }
.vel-showroom {
  display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 0 max(1rem, calc((100vw - var(--vel-wrap)) / 2)) 1.5rem;
  scrollbar-width: thin; scrollbar-color: var(--vel-violet) transparent;
}
.vel-showroom::-webkit-scrollbar { height: 6px; }
.vel-showroom::-webkit-scrollbar-thumb { background: var(--vel-violet); border-radius: 10px; }
.vel-panel {
  scroll-snap-align: center; flex: 0 0 min(78vw, 620px); position: relative; min-height: 480px;
  border: 1px solid var(--vel-line); overflow: hidden; background: var(--vel-ink);
  display: flex; flex-direction: column; justify-content: flex-end;
}
.vel-panel__media { position: absolute; inset: 0; }
.vel-panel__media img { width: 100%; height: 100%; object-fit: cover; }
.vel-panel::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10,10,18,.1) 30%, rgba(10,10,18,.94)); }
.vel-panel__idx {
  position: absolute; top: 1.2rem; right: 1.4rem; z-index: 2; font-family: var(--vel-font-display);
  font-size: 2.2rem; color: var(--vel-mist); line-height: 1;
}
.vel-panel__idx span { font-size: 0.8rem; color: var(--vel-dim); letter-spacing: 0.1em; }
.vel-panel__info { position: relative; z-index: 2; padding: 1.8rem; }
.vel-panel__info h3 { font-size: 1.5rem; margin: 0.3rem 0 1.2rem; }
.vel-panel__row { display: flex; gap: 1.8rem; margin-bottom: 1.4rem; }
.vel-panel__row b { font-family: var(--vel-font-display); font-size: 1.15rem; display: block; color: var(--vel-gold); }
.vel-panel__row span { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--vel-dim); }
.vel-panel__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.vel-panel__price { font-family: var(--vel-font-display); font-size: 1.4rem; color: var(--vel-mist); }

/* ==========================================================================
   VEHICLE CARDS GRID
   ========================================================================== */
.vel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.6rem; }
.vel-grid.loading { min-height: 260px; }
.vel-grid-skeleton { grid-column: 1 / -1; text-align: center; color: var(--vel-dim); padding: 4rem 0; letter-spacing: 0.1em; }
.vel-card {
  position: relative; background: var(--vel-ink); border: 1px solid var(--vel-line); overflow: hidden;
  display: flex; flex-direction: column; transition: transform 0.35s, box-shadow 0.35s, border-color 0.35s;
}
.vel-card::before {
  content: ""; position: absolute; inset: 0; padding: 1px; z-index: 5; pointer-events: none;
  background: var(--vel-neon); opacity: 0;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  transition: opacity 0.35s;
}
.vel-card:hover { transform: translateY(-6px); box-shadow: var(--vel-shadow); }
.vel-card:hover::before { opacity: 1; }
.vel-card.is-sold { opacity: 0.82; }
.vel-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; display: block; }
.vel-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s; }
.vel-card:hover .vel-card__media img { transform: scale(1.06); }
.vel-card__price {
  position: absolute; bottom: 0.9rem; right: 0.9rem; z-index: 3; font-family: var(--vel-font-display);
  font-size: 1.05rem; color: #fff; padding: 0.35rem 0.7rem; transform: skewX(var(--vel-skew));
  background: rgba(10,10,18,.72); border: 1px solid rgba(255,45,126,.4); backdrop-filter: blur(6px);
}
.vel-card__body { padding: 1.3rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: 0.85rem; flex: 1; }
.vel-card__meta { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--vel-magenta); }
.vel-card__title { font-size: 1.28rem; }
.vel-card__title a:hover { color: var(--vel-gold); }
.vel-card__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; padding: 0.9rem 0; border-top: 1px solid var(--vel-line); border-bottom: 1px solid var(--vel-line); }
.vel-stat b { font-family: var(--vel-font-display); font-size: 0.98rem; display: block; }
.vel-stat span { font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--vel-dim); }
.vel-card__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.vel-card__cta { margin-top: auto; }

/* ==========================================================================
   STATS BAND
   ========================================================================== */
.vel-band { border-block: 1px solid var(--vel-line); background: linear-gradient(180deg, rgba(20,20,42,.6), rgba(10,10,18,.6)); }
.vel-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; padding: clamp(2rem,4vw,3rem) 0; }
.vel-statcol { text-align: center; }
.vel-statcol b { font-family: var(--vel-font-display); font-size: clamp(1.8rem, 4vw, 3rem); background: var(--vel-neon); -webkit-background-clip: text; background-clip: text; color: transparent; display: block; }
.vel-statcol span { font-size: 0.74rem; letter-spacing: 0.06em; color: var(--vel-dim); }

/* ---------- split / feature blocks ---------- */
.vel-split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.vel-split__media { border: 1px solid var(--vel-line); overflow: hidden; aspect-ratio: 4/3; }
.vel-split__media img { width: 100%; height: 100%; object-fit: cover; }
.vel-split h2 { font-size: clamp(1.7rem, 3.5vw, 2.6rem); margin-bottom: 1.2rem; }
.vel-split p { color: var(--vel-dim); margin: 0 0 1rem; }
.vel-feature-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.2rem; }
.vel-fcard { border: 1px solid var(--vel-line); background: var(--vel-ink); padding: 1.6rem; position: relative; }
.vel-fcard .n { font-family: var(--vel-font-display); font-size: 0.8rem; color: var(--vel-gold); letter-spacing: 0.1em; }
.vel-fcard h3 { font-size: 1.15rem; margin: 0.7rem 0 0.6rem; }
.vel-fcard p { color: var(--vel-dim); font-size: 0.95rem; margin: 0; }

/* ---------- CTA strip ---------- */
.vel-cta {
  text-align: center; border: 1px solid var(--vel-line); padding: clamp(2.5rem,5vw,4rem) 1.5rem;
  background: radial-gradient(120% 120% at 50% 0%, rgba(106,60,255,.18), transparent 60%), var(--vel-ink); position: relative; overflow: hidden;
}
.vel-cta h2 { font-size: clamp(1.8rem, 4vw, 3rem); margin-bottom: 1rem; }
.vel-cta p { color: var(--vel-dim); max-width: 52ch; margin: 0 auto 2rem; }

/* ==========================================================================
   PAGE HEADER (interior pages)
   ========================================================================== */
.vel-pagehead { padding: clamp(3rem, 6vw, 5rem) 0 clamp(1.5rem,3vw,2.5rem); border-bottom: 1px solid var(--vel-line); position: relative; overflow: hidden; }
.vel-pagehead h1 { font-size: clamp(2.2rem, 6vw, 4rem); margin-bottom: 0.8rem; }
.vel-pagehead p { color: var(--vel-dim); max-width: 60ch; }

/* ==========================================================================
   FORM FIELDS
   ========================================================================== */
.vel-field { display: flex; flex-direction: column; gap: 0.4rem; }
.vel-field label { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--vel-dim); }
.vel-field input, .vel-field select, .vel-input, .vel-select, textarea.vel-input {
  background: var(--vel-black); border: 1px solid var(--vel-line); color: var(--vel-mist);
  padding: 0.7rem 0.8rem; font-family: var(--vel-font-body); font-size: 0.95rem; width: 100%;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.vel-field input:focus, .vel-field select:focus, .vel-input:focus, .vel-select:focus {
  outline: none; border-color: var(--vel-magenta); box-shadow: 0 0 0 3px rgba(255,45,126,.16);
}
.vel-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.vel-check { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--vel-dim); cursor: pointer; }
.vel-check input { width: auto; accent-color: var(--vel-magenta); }
.vel-inv__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; flex-wrap: wrap; }
.vel-count { font-family: var(--vel-font-display); font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vel-gold); }

/* ==========================================================================
   VEHICLE DETAIL
   ========================================================================== */
.vel-det-hero { position: relative; aspect-ratio: 21/9; max-height: 560px; overflow: hidden; border-bottom: 1px solid var(--vel-line); }
.vel-det-hero img { width: 100%; height: 100%; object-fit: cover; }
.vel-det-hero__cap { position: absolute; bottom: 1.2rem; right: 1.4rem; display: flex; align-items: center; gap: 0.8rem; z-index: 3; }
.vel-det-hero__cap .vel-badge { position: static; }
.vel-det-hero__price { font-family: var(--vel-font-display); font-size: clamp(1.2rem,3vw,1.8rem); color: #fff; padding: 0.4rem 0.9rem; transform: skewX(var(--vel-skew)); background: rgba(10,10,18,.72); border: 1px solid rgba(245,197,24,.5); backdrop-filter: blur(6px); }
.vel-det { display: grid; grid-template-columns: 1fr 360px; gap: clamp(1.5rem,4vw,3rem); padding: clamp(2rem,4vw,3.5rem) 0; align-items: start; }
.vel-crumbs { font-size: 0.72rem; letter-spacing: 0.08em; color: var(--vel-dim); display: flex; gap: 0.5rem; margin-bottom: 1rem; text-transform: uppercase; }
.vel-crumbs a:hover { color: var(--vel-magenta); }
.vel-det__title { font-size: clamp(1.8rem, 4vw, 3rem); margin-bottom: 0.7rem; }
.vel-det__loc { display: flex; align-items: center; gap: 0.4rem; color: var(--vel-dim); margin-bottom: 1.6rem; font-size: 0.92rem; }
.vel-det__loc svg { width: 16px; height: 16px; color: var(--vel-magenta); }
.vel-hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.8rem; margin-bottom: 1.6rem; }
.vel-hstat { border: 1px solid var(--vel-line); background: var(--vel-ink); padding: 1rem; text-align: center; }
.vel-hstat b { font-family: var(--vel-font-display); font-size: 1.15rem; display: block; color: var(--vel-gold); }
.vel-hstat span { font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vel-dim); }
.vel-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; margin-bottom: 1.8rem; }
.vel-thumb { border: 1px solid var(--vel-line); background: none; padding: 0; cursor: pointer; overflow: hidden; aspect-ratio: 16/10; transition: border-color 0.2s; }
.vel-thumb img { width: 100%; height: 100%; object-fit: cover; }
.vel-thumb.active { border-color: var(--vel-magenta); box-shadow: 0 0 0 1px var(--vel-magenta); }
.vel-det__lede { color: var(--vel-dim); font-size: 1.05rem; margin-bottom: 2rem; }
.vel-label { font-family: var(--vel-font-display); font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--vel-magenta); margin-bottom: 1.2rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--vel-line); }
.vel-specsheet { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 2.8rem; row-gap: 0; margin: 0; }
.vel-spec { display: flex; justify-content: space-between; gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--vel-line); }
.vel-spec dt { color: var(--vel-dim); font-size: 0.9rem; }
.vel-spec dd { margin: 0; font-family: var(--vel-font-display); font-size: 0.85rem; text-align: right; }
.vel-det__side { position: sticky; top: 90px; }
.vel-side-card { border: 1px solid var(--vel-line); background: var(--vel-ink); padding: 1.6rem; }
.vel-side-card__price { font-family: var(--vel-font-display); font-size: 2rem; margin-bottom: 0.2rem; }
.vel-side-card__eng { color: var(--vel-dim); font-size: 0.9rem; margin: 0 0 1.4rem; }
.vel-side-card__actions { display: flex; flex-direction: column; gap: 0.7rem; }
.vel-side-agent { display: flex; align-items: center; gap: 0.8rem; margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px solid var(--vel-line); }
.vel-avatar { width: 46px; height: 46px; flex: none; display: grid; place-items: center; transform: skewX(var(--vel-skew)); background: var(--vel-neon); color: #0a0a12; font-family: var(--vel-font-display); font-size: 0.9rem; }
.vel-side-agent strong { display: block; font-size: 0.95rem; }
.vel-side-agent em { font-style: normal; font-size: 0.78rem; color: var(--vel-dim); }

/* ---------- lightbox ---------- */
.vel-lightbox { position: fixed; inset: 0; z-index: 90; background: rgba(5,5,11,.94); display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 2rem; }
.vel-lightbox__img { max-width: 90vw; max-height: 82vh; border: 1px solid var(--vel-line); }
.vel-lightbox__close { position: absolute; top: 1.2rem; right: 1.4rem; background: none; border: none; color: #fff; font-size: 2rem; cursor: pointer; }
.vel-lightbox__nav { background: rgba(20,20,42,.7); border: 1px solid var(--vel-line); color: #fff; width: 52px; height: 52px; font-size: 1.6rem; cursor: pointer; transform: skewX(var(--vel-skew)); }
.vel-lightbox__nav:hover { border-color: var(--vel-magenta); }

/* ==========================================================================
   SCHEDULE
   ========================================================================== */
.vel-sched { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem,4vw,3rem); align-items: start; }
.vel-card-block { border: 1px solid var(--vel-line); background: var(--vel-ink); padding: clamp(1.4rem,3vw,2rem); }
.vel-card-block h2 { font-size: 1.2rem; margin-bottom: 1.4rem; }
.vel-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.vel-cal-head button { width: 40px; height: 40px; background: var(--vel-black); border: 1px solid var(--vel-line); color: var(--vel-mist); cursor: pointer; font-size: 1.1rem; transform: skewX(var(--vel-skew)); }
.vel-cal-head button:hover { border-color: var(--vel-magenta); }
#cal-month { font-family: var(--vel-font-display); font-size: 1rem; letter-spacing: 0.08em; }
.vel-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.vel-cal__dow { text-align: center; font-size: 0.66rem; letter-spacing: 0.06em; color: var(--vel-dim); padding: 0.4rem 0; text-transform: uppercase; }
.vel-cal__cell { aspect-ratio: 1; background: var(--vel-black); border: 1px solid var(--vel-line); color: var(--vel-mist); cursor: pointer; font-family: var(--vel-font-body); font-size: 0.9rem; transition: background 0.15s, border-color 0.15s; }
.vel-cal__cell:hover:not(.disabled) { border-color: var(--vel-magenta); }
.vel-cal__cell.picked { background: var(--vel-magenta); color: #fff; border-color: var(--vel-magenta); }
.vel-cal__cell.disabled { color: var(--vel-dimmer); opacity: 0.4; cursor: not-allowed; }
.vel-slot-label { font-size: 0.8rem; color: var(--vel-dim); margin: 1.4rem 0 0.8rem; letter-spacing: 0.04em; }
.vel-slot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.vel-slot { background: var(--vel-black); border: 1px solid var(--vel-line); color: var(--vel-mist); padding: 0.7rem 0.4rem; cursor: pointer; transform: skewX(var(--vel-skew)); font-family: var(--vel-font-body); font-size: 0.85rem; transition: border-color 0.15s, background 0.15s; }
.vel-slot span { display: inline-block; transform: skewX(calc(-1 * var(--vel-skew))); }
.vel-slot:hover:not(.taken) { border-color: var(--vel-gold); }
.vel-slot.picked { background: var(--vel-gold); color: #12121f; border-color: var(--vel-gold); }
.vel-slot.taken { opacity: 0.35; text-decoration: line-through; cursor: not-allowed; }
.vel-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.vel-form .vel-field { margin-bottom: 1.1rem; }
.vel-error { color: #ff6b8f; font-size: 0.9rem; min-height: 1.2em; margin-bottom: 0.6rem; }
.vel-success { text-align: center; padding: clamp(2rem,5vw,4rem) 1rem; }
.vel-success__mark { display: inline-grid; place-items: center; width: 64px; height: 64px; background: var(--vel-neon); color: #0a0a12; font-size: 2rem; transform: skewX(var(--vel-skew)); margin-bottom: 1.4rem; }
.vel-success h1, .vel-success h2 { font-size: clamp(1.6rem,4vw,2.4rem); margin-bottom: 0.8rem; }
.vel-success p { color: var(--vel-dim); }
.vel-success__card { border: 1px solid var(--vel-line); background: var(--vel-ink); padding: 1.5rem; max-width: 420px; margin: 1.6rem auto; text-align: left; }
.vel-success__card p { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--vel-line); margin: 0; }
.vel-success__card p:last-child { border-bottom: none; }
.vel-success__card span { color: var(--vel-dim); font-size: 0.85rem; }
.vel-success__card b { font-family: var(--vel-font-display); font-size: 0.85rem; }
.vel-listing-note { border: 1px solid rgba(245,197,24,.4); background: rgba(245,197,24,.06); padding: 0.9rem 1.1rem; margin-bottom: 1.2rem; font-size: 0.9rem; }

/* ==========================================================================
   TEAM
   ========================================================================== */
.vel-team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }
.vel-member { border: 1px solid var(--vel-line); background: var(--vel-ink); padding: 1.8rem; display: flex; flex-direction: column; transition: transform 0.3s, box-shadow 0.3s; }
.vel-member:hover { transform: translateY(-5px); box-shadow: var(--vel-shadow); }
.vel-member__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.2rem; }
.vel-member__avatar { width: 64px; height: 64px; display: grid; place-items: center; transform: skewX(var(--vel-skew)); background: var(--vel-neon); color: #0a0a12; font-family: var(--vel-font-display); font-size: 1.3rem; }
.vel-member__yrs { text-align: right; }
.vel-member__yrs b { font-family: var(--vel-font-display); font-size: 1.5rem; color: var(--vel-gold); display: block; }
.vel-member__yrs span { font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--vel-dim); }
.vel-member h3 { font-size: 1.3rem; margin-bottom: 0.3rem; }
.vel-member__role { color: var(--vel-magenta); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 1rem; }
.vel-member__bio { color: var(--vel-dim); font-size: 0.95rem; margin-bottom: 1.2rem; }
.vel-member__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.2rem; }
.vel-member__tags span { font-size: 0.68rem; letter-spacing: 0.04em; color: var(--vel-dim); border: 1px solid var(--vel-line); padding: 0.28rem 0.6rem; border-radius: 40px; }
.vel-member__cta { margin-top: auto; font-family: var(--vel-font-display); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--vel-gold); display: inline-flex; align-items: center; gap: 0.4rem; }
.vel-member__cta:hover { color: var(--vel-magenta); }

/* ==========================================================================
   SERVICES
   ========================================================================== */
.vel-svc-list { display: flex; flex-direction: column; gap: 1.4rem; }
.vel-svc { display: grid; grid-template-columns: 100px 1fr; gap: 1.5rem; border: 1px solid var(--vel-line); background: var(--vel-ink); padding: clamp(1.4rem,3vw,2.2rem); align-items: start; transition: border-color 0.3s; }
.vel-svc:hover { border-color: rgba(255,45,126,.4); }
.vel-svc__idx { font-family: var(--vel-font-display); font-size: 2.6rem; background: var(--vel-neon); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; }
.vel-svc__body h2 { font-size: 1.5rem; margin-bottom: 0.6rem; }
.vel-svc__lede { color: var(--vel-dim); margin-bottom: 1rem; max-width: 62ch; }
.vel-svc__points { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem 1.5rem; list-style: none; padding: 0; margin: 0 0 1.2rem; }
.vel-svc__points li { position: relative; padding-left: 1.3rem; color: var(--vel-mist); font-size: 0.92rem; }
.vel-svc__points li::before { content: "▸"; position: absolute; left: 0; color: var(--vel-magenta); }
.vel-svc__cta { font-family: var(--vel-font-display); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--vel-gold); display: inline-flex; align-items: center; gap: 0.4rem; }
.vel-svc__cta:hover { color: var(--vel-magenta); }

/* ==========================================================================
   REVIEWS
   ========================================================================== */
.vel-reviews-agg { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 2.6rem; flex-wrap: wrap; }
.vel-agg__num { font-family: var(--vel-font-display); font-size: 3rem; background: var(--vel-neon); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vel-agg__count { color: var(--vel-dim); font-size: 0.9rem; }
.vel-reviews-grid { columns: 3 300px; column-gap: 1.5rem; }
.vel-review { break-inside: avoid; margin-bottom: 1.5rem; border: 1px solid var(--vel-line); background: var(--vel-ink); padding: 1.6rem; }
.vel-review blockquote { margin: 0.8rem 0 1.2rem; color: var(--vel-mist); font-size: 1rem; line-height: 1.6; }
.vel-review figcaption { font-family: var(--vel-font-display); font-size: 0.82rem; letter-spacing: 0.04em; }
.vel-review figcaption span { color: var(--vel-dim); font-family: var(--vel-font-body); letter-spacing: 0; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.vel-faq-list { max-width: 820px; margin: 0 auto; }
.vel-faq { border: 1px solid var(--vel-line); background: var(--vel-ink); margin-bottom: 0.8rem; }
.vel-faq summary { list-style: none; cursor: pointer; padding: 1.2rem 1.4rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-family: var(--vel-font-display); font-size: 0.98rem; }
.vel-faq summary::-webkit-details-marker { display: none; }
.vel-faq__mark { position: relative; width: 16px; height: 16px; flex: none; }
.vel-faq__mark::before, .vel-faq__mark::after { content: ""; position: absolute; background: var(--vel-magenta); transition: transform 0.25s; }
.vel-faq__mark::before { top: 7px; left: 0; width: 16px; height: 2px; }
.vel-faq__mark::after { left: 7px; top: 0; width: 2px; height: 16px; }
.vel-faq[open] .vel-faq__mark::after { transform: scaleY(0); }
.vel-faq__a { padding: 0 1.4rem 1.3rem; color: var(--vel-dim); }
.vel-faq__a p { margin: 0; }

/* ==========================================================================
   CONTACT / ABOUT
   ========================================================================== */
.vel-contact { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem,4vw,3rem); align-items: start; }
.vel-contact-info { display: flex; flex-direction: column; gap: 1.4rem; }
.vel-info-row { display: flex; gap: 1rem; align-items: flex-start; border: 1px solid var(--vel-line); background: var(--vel-ink); padding: 1.2rem; }
.vel-info-row .k { font-family: var(--vel-font-display); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vel-magenta); display: block; margin-bottom: 0.3rem; }
.vel-info-row a, .vel-info-row span.v { color: var(--vel-mist); }
.vel-map { border: 1px solid var(--vel-line); aspect-ratio: 3/1; background: linear-gradient(135deg, #101024, #1a1a38); position: relative; overflow: hidden; margin-top: 1.4rem; display: grid; place-items: center; }
.vel-map svg { width: 100%; height: 100%; }

.vel-about-lead { font-size: clamp(1.2rem, 2.6vw, 1.7rem); line-height: 1.5; max-width: 24ch; }
.vel-about-body { color: var(--vel-dim); font-size: 1.05rem; }
.vel-about-body p { margin: 0 0 1.2rem; }
.vel-values { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.2rem; margin-top: 2rem; }
.vel-value { border-top: 2px solid var(--vel-magenta); padding-top: 1rem; }
.vel-value h3 { font-size: 1.1rem; margin-bottom: 0.5rem; }
.vel-value p { color: var(--vel-dim); font-size: 0.92rem; margin: 0; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.vel-footer { border-top: 1px solid var(--vel-line); background: var(--vel-black); padding: clamp(2.5rem,5vw,4rem) 0 2rem; margin-top: 2rem; }
.vel-footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; margin-bottom: 2.5rem; }
.vel-footer__brand .vel-brand { margin-bottom: 1rem; }
.vel-footer__brand p { color: var(--vel-dim); font-size: 0.92rem; max-width: 34ch; }
.vel-footer h4 { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--vel-magenta); margin-bottom: 1rem; }
.vel-footer__col a { display: block; color: var(--vel-dim); padding: 0.3rem 0; font-size: 0.92rem; }
.vel-footer__col a:hover { color: var(--vel-mist); }
.vel-socials { display: flex; gap: 0.6rem; margin-top: 0.6rem; }
.vel-socials a { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--vel-line); transform: skewX(var(--vel-skew)); transition: border-color 0.2s; }
.vel-socials a:hover { border-color: var(--vel-magenta); }
.vel-socials svg { width: 18px; height: 18px; }
.vel-footer__legal { border-top: 1px solid var(--vel-line); padding-top: 1.6rem; color: var(--vel-dimmer); font-size: 0.78rem; line-height: 1.6; }
.vel-footer__legal .row1 { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.6rem; }

/* ==========================================================================
   REVEAL ANIMATION
   ========================================================================== */
.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(.2,.7,.2,1); }
[data-reveal].in-view { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1 !important; transform: none !important; transition: none; } .vel-card, .vel-member { transition: none; } }

.hide-sm { display: inline; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1000px) {
  .vel-det { grid-template-columns: 1fr; }
  .vel-det__side { position: static; }
  .vel-sched { grid-template-columns: 1fr; }
  .vel-contact { grid-template-columns: 1fr; }
  .vel-footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .vel-nav-toggle { display: block; }
  .vel-nav {
    position: fixed; inset: 0 0 0 auto; width: min(320px, 82vw); flex-direction: column; align-items: stretch;
    background: var(--vel-ink); border-left: 1px solid var(--vel-line); padding: 5rem 1.4rem 2rem;
    transform: translateX(100%); transition: transform 0.32s cubic-bezier(.2,.7,.2,1); z-index: 39;
  }
  .vel-nav.is-open { transform: none; }
  .vel-nav a { padding: 0.9rem 0.5rem; font-size: 0.82rem; }
  .vel-nav .vel-btn { margin: 0.8rem 0 0; }
  .vel-det-hero { aspect-ratio: 16/10; }
  .vel-hero-stats { grid-template-columns: repeat(2, 1fr); }
  .vel-stats { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
  .vel-split { grid-template-columns: 1fr; }
  .vel-specsheet { grid-template-columns: 1fr; }
  .hide-sm { display: none; }
}
@media (max-width: 620px) {
  body { font-size: 16px; }
  .vel-form-row { grid-template-columns: 1fr; }
  .vel-field-row { grid-template-columns: 1fr; }
  .vel-footer__top { grid-template-columns: 1fr; }
  .vel-reviews-grid { columns: 1; }
  .vel-svc { grid-template-columns: 1fr; gap: 0.8rem; }
  .vel-svc__points { grid-template-columns: 1fr; }
  .vel-slot-grid { grid-template-columns: repeat(2, 1fr); }
  .vel-panel { flex-basis: 86vw; min-height: 420px; }
  .vel-topbar { display: none; }
}

/* ==========================================================================
   STATIC LANDING ADDITIONS — subscribe band, form status, header socials,
   gallery jump chips
   ========================================================================== */
.vel-subscribe {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 2rem; align-items: center;
  border: 1px solid var(--vel-line); padding: clamp(2rem, 4vw, 3rem);
  background: radial-gradient(120% 140% at 0% 0%, rgba(255,45,126,.14), transparent 55%), var(--vel-ink);
  position: relative; overflow: hidden;
}
.vel-subscribe h2 { font-size: clamp(1.4rem, 3vw, 2.1rem); margin: 0.6rem 0 0.8rem; }
.vel-subscribe p { color: var(--vel-dim); max-width: 46ch; }
.vel-subscribe__form { margin: 0; }
.vel-subscribe__row { display: flex; gap: 0.8rem; }
.vel-subscribe__row .vel-input { flex: 1; min-width: 0; }
.vel-subscribe .vel-error { margin: 0.4rem 0 0; min-height: 0; }
.vel-field .vel-error { margin: 0; min-height: 0; }
.vel-form-status { min-height: 1.2em; margin-top: 0.9rem; font-size: 0.95rem; color: var(--vel-dim); }
.vel-form-status[data-state="ok"] { color: var(--vel-gold); }
.vel-form-status[data-state="error"] { color: #ff6b8f; }
.vel-topbar__social { display: flex; gap: 0.7rem; align-items: center; }
.vel-topbar__social a { display: grid; place-items: center; color: var(--vel-dim); transition: color 0.2s; }
.vel-topbar__social a:hover { color: var(--vel-magenta); }
.vel-topbar__social svg { width: 14px; height: 14px; }
.vel-jump { gap: 0.5rem; }
.vel-jump .vel-chip:hover { border-color: var(--vel-magenta); color: var(--vel-mist); }
.vel-card { scroll-margin-top: 110px; }
@media (max-width: 860px) {
  .vel-subscribe { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .vel-subscribe__row { flex-direction: column; }
}
/* No-JS image fallback: a neon night backdrop shows if a remote photo fails to load */
.vel-card__media, .vel-panel__media, .vel-hslide__media, .vel-split__media { background: radial-gradient(90% 90% at 30% 20%, rgba(255,45,126,.28), transparent 60%), radial-gradient(80% 80% at 80% 90%, rgba(106,60,255,.3), transparent 60%), var(--vel-ink); }
.vel-card__media img, .vel-panel__media img { color: transparent; }
/* Catalogue typography identity — headings and reading text. */
:root{--catalog-font-heading:'Bricolage Grotesque', 'Trebuchet MS', Arial, sans-serif;--catalog-font-body:'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;--vel-font-display:var(--catalog-font-heading);--vel-font-body:var(--catalog-font-body)}
html body,input,select,textarea,button{font-family:var(--catalog-font-body)}
h1,h2,h3,h4,h5,h6,.display,.disp,.brand,.logo{font-family:var(--catalog-font-heading)}

/* aajwebz-mailto-nowrap — an address is one token, never split across lines */
a[href^="mailto:"] {
  overflow-wrap: normal;
  word-break: normal;
  white-space: nowrap;
  display: inline-block;
  max-width: 100%;
}
@media (max-width: 380px) {
  a[href^="mailto:"] { font-size: 0.88em; }
}