/* =============================================================
   VOUNATSOS · VEHICLE JOURNEY  ·  v2.0.0
   Fixed-viewport, scene-driven (Metropolis-style).
   Fully scoped under .vntsj-root for theme isolation.
   ============================================================= */

.vntsj-root,
.vntsj-root *,
.vntsj-root *::before,
.vntsj-root *::after { box-sizing: border-box; }

.vntsj-root {
    /* Tokens */
    --vntsj-bg:        #050505;
    --vntsj-bg-2:      #0a0a0a;
    --vntsj-ink:       #f4f4f4;
    --vntsj-ink-dim:   rgba(244,244,244,0.62);
    --vntsj-ink-mute:  rgba(244,244,244,0.36);
    --vntsj-line:      rgba(255,255,255,0.08);
    --vntsj-line-2:    rgba(255,255,255,0.18);
    --vntsj-silver:    #e7e7e7;
    --vntsj-chrome-1:  #ffffff;
    --vntsj-chrome-3:  #5a5a5a;

    --vntsj-radius:    18px;
    --vntsj-display:   "Bricolage Grotesque", "Manrope", system-ui, sans-serif;
    --vntsj-body:      "Manrope", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --vntsj-ease:      cubic-bezier(0.22, 1, 0.36, 1);

    /* Layout — single fixed viewport */
    position: relative;
    isolation: isolate;
    width: 100%;
    height: 100vh;
    min-height: 640px;
    max-height: 1080px;
    overflow: hidden;
    background: radial-gradient(120% 80% at 50% 0%, #0d0d0d 0%, #050505 60%, #030303 100%);
    color: var(--vntsj-ink);
    font-family: var(--vntsj-body);
    font-weight: 400;
    line-height: 1.5;
    border-radius: var(--vntsj-radius);

    display: flex;
    flex-direction: column;
}

/* Fullscreen mode (cover the viewport). */
.vntsj-root.is-fullscreen {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    max-height: none;
    border-radius: 0;
    z-index: 9999;
}

/* ----- AMBIENCE ----- */
.vntsj-root .vntsj-ambience {
    position: absolute; inset: 0;
    pointer-events: none; z-index: 0;
    overflow: hidden; border-radius: inherit;
}
.vntsj-root .vntsj-grain {
    position: absolute; inset: -50%;
    opacity: 0.05; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    animation: vntsj-grain 12s steps(8) infinite;
}
@keyframes vntsj-grain {
    0%   { transform: translate(0,0); }
    25%  { transform: translate(-3%, 2%); }
    50%  { transform: translate(2%, -2%); }
    75%  { transform: translate(-1%, 3%); }
    100% { transform: translate(0,0); }
}
.vntsj-root .vntsj-glow {
    position: absolute; border-radius: 50%;
    filter: blur(100px); opacity: 0.45;
}
.vntsj-root .vntsj-glow--a {
    width: 520px; height: 520px;
    background: radial-gradient(circle, rgba(231,231,231,0.25), transparent 60%);
    top: -180px; left: -160px;
}
.vntsj-root .vntsj-glow--b {
    width: 680px; height: 680px;
    background: radial-gradient(circle, rgba(184,184,184,0.16), transparent 65%);
    bottom: -260px; right: -200px;
}
.vntsj-root .vntsj-grid-lines {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(to right,  rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}
.vntsj-root .vntsj-horizon {
    position: absolute; left: 0; right: 0; bottom: 18%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(231,231,231,0.25), transparent);
    box-shadow: 0 0 24px rgba(231,231,231,0.15);
}

/* ----- TOPBAR ----- */
.vntsj-root .vntsj-topbar {
    position: relative; z-index: 5;
    flex: 0 0 auto;
    display: flex; align-items: center;
    gap: 24px; padding: 20px clamp(20px, 3vw, 40px);
    border-bottom: 1px solid var(--vntsj-line);
}
.vntsj-root .vntsj-brand {
    display: flex; align-items: center;
    gap: 10px;
    font-family: var(--vntsj-display);
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.16em;
}
.vntsj-root .vntsj-brand__mark {
    width: 22px; height: 22px;
    background: linear-gradient(135deg, #fff, #888);
    -webkit-mask: radial-gradient(circle at 30% 30%, transparent 30%, #000 31%) center / 100% 100%;
            mask: radial-gradient(circle at 30% 30%, transparent 30%, #000 31%) center / 100% 100%;
    border-radius: 50%;
    box-shadow: 0 0 14px rgba(231,231,231,0.4);
}
.vntsj-root .vntsj-brand__txt   { color: var(--vntsj-chrome-1); }
.vntsj-root .vntsj-brand__sub   { color: var(--vntsj-ink-mute); font-weight: 400; letter-spacing: 0.12em; }

.vntsj-root .vntsj-progress {
    flex: 1;
    display: flex; align-items: center; gap: 12px;
    max-width: 420px;
    margin: 0 auto;
}
.vntsj-root .vntsj-progress__num {
    font-family: var(--vntsj-display);
    font-size: 13px; color: var(--vntsj-silver);
    min-width: 42px;
    letter-spacing: 0.04em;
}
.vntsj-root .vntsj-progress__track {
    flex: 1;
    position: relative;
    height: 2px;
    background: var(--vntsj-line);
    border-radius: 999px;
    overflow: hidden;
}
.vntsj-root .vntsj-progress__bar {
    position: absolute; inset: 0 auto 0 0; width: 0%;
    background: linear-gradient(90deg, var(--vntsj-chrome-3), var(--vntsj-silver), var(--vntsj-chrome-1));
    box-shadow: 0 0 8px rgba(231,231,231,0.4);
    transition: width 0.6s var(--vntsj-ease);
}

.vntsj-root .vntsj-restart {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px;
    border: 1px solid var(--vntsj-line-2);
    border-radius: 999px;
    background: transparent;
    color: var(--vntsj-ink-dim);
    font-family: var(--vntsj-body);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    cursor: pointer;
    transition: color 0.3s, border-color 0.3s, background 0.3s;
}
.vntsj-root .vntsj-restart:hover {
    color: var(--vntsj-ink); border-color: var(--vntsj-silver);
    background: rgba(255,255,255,0.04);
}

/* ----- STAGE & SCENES ----- */
.vntsj-root .vntsj-stage {
    position: relative; z-index: 1;
    flex: 1 1 auto;
    overflow: hidden;
}
.vntsj-root .vntsj-scene {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    padding: clamp(20px, 3vw, 40px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(24px) scale(0.985);
    transition:
        opacity 0.7s var(--vntsj-ease),
        transform 0.9s var(--vntsj-ease),
        visibility 0s linear 0.7s;
    pointer-events: none;
}
.vntsj-root .vntsj-scene.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    transition:
        opacity 0.7s var(--vntsj-ease),
        transform 0.9s var(--vntsj-ease),
        visibility 0s linear 0s;
}
.vntsj-root .vntsj-scene__inner {
    width: 100%;
    max-width: 920px;
    text-align: center;
    display: flex; flex-direction: column; align-items: center;
    gap: 18px;
}

/* ----- TYPE ----- */
.vntsj-root .vntsj-eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 8px 16px;
    border: 1px solid var(--vntsj-line-2);
    border-radius: 999px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--vntsj-ink-dim);
    background: rgba(255,255,255,0.02);
}
.vntsj-root .vntsj-eyebrow__dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--vntsj-silver);
    box-shadow: 0 0 12px var(--vntsj-silver);
    animation: vntsj-pulse 2.4s ease-in-out infinite;
}
@keyframes vntsj-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.4; transform: scale(0.7); }
}

.vntsj-root .vntsj-step-tag {
    display: inline-block;
    font-family: var(--vntsj-display);
    font-size: 12px;
    color: var(--vntsj-silver);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(231,231,231,0.3);
}

.vntsj-root .vntsj-h1 {
    margin: 0;
    font-family: var(--vntsj-display);
    font-weight: 500;
    font-size: clamp(40px, 7vw, 96px);
    line-height: 0.95;
    letter-spacing: -0.035em;
    color: #ffffff; /* fallback when not split */
}
/* When the title hasn't been JS-split yet, still apply the chrome gradient. */
.vntsj-root .vntsj-h1:not(:has(.vntsj-word)) {
    background: linear-gradient(180deg, #ffffff 0%, #c8c8c8 60%, #6a6a6a 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* After splitting, each word carries its own gradient — needed because
   inline-block spans break the parent's background-clip:text context. */
.vntsj-root .vntsj-h1 .vntsj-word {
    display: inline-block;
    background: linear-gradient(180deg, #ffffff 0%, #c8c8c8 60%, #6a6a6a 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    transform: translateY(40px);
    opacity: 0;
    filter: blur(8px);
    transition:
        transform 1s var(--vntsj-ease),
        opacity 1s var(--vntsj-ease),
        filter 1s var(--vntsj-ease);
}
.vntsj-root .vntsj-scene--welcome.is-active .vntsj-h1 .vntsj-word {
    transform: translateY(0); opacity: 1; filter: blur(0);
}
.vntsj-root .vntsj-scene--welcome.is-active .vntsj-h1 .vntsj-word:nth-child(1) { transition-delay: 0.10s; }
.vntsj-root .vntsj-scene--welcome.is-active .vntsj-h1 .vntsj-word:nth-child(2) { transition-delay: 0.20s; }
.vntsj-root .vntsj-scene--welcome.is-active .vntsj-h1 .vntsj-word:nth-child(3) { transition-delay: 0.30s; }
.vntsj-root .vntsj-scene--welcome.is-active .vntsj-h1 .vntsj-word:nth-child(4) { transition-delay: 0.40s; }
.vntsj-root .vntsj-scene--welcome.is-active .vntsj-h1 .vntsj-word:nth-child(5) { transition-delay: 0.50s; }
.vntsj-root .vntsj-scene--welcome.is-active .vntsj-h1 .vntsj-word:nth-child(6) { transition-delay: 0.60s; }

.vntsj-root .vntsj-h2 {
    margin: 4px 0 0;
    font-family: var(--vntsj-display);
    font-weight: 500;
    font-size: clamp(28px, 5vw, 60px);
    line-height: 1.02;
    letter-spacing: -0.025em;
    background: linear-gradient(180deg, #fff, #999);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.vntsj-root .vntsj-lead {
    max-width: 640px;
    margin: 0;
    font-size: clamp(15px, 1.5vw, 19px);
    color: var(--vntsj-ink);
}
.vntsj-root .vntsj-sub {
    max-width: 600px;
    margin: 0;
    font-size: 14.5px;
    color: var(--vntsj-ink-dim);
    line-height: 1.6;
}
.vntsj-root .vntsj-hint {
    margin: 4px 0 0;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: var(--vntsj-ink-mute);
}

/* ----- ACTION BUTTONS ----- */
.vntsj-root .vntsj-action {
    position: relative;
    display: inline-flex; align-items: center;
    gap: 12px;
    padding: 15px 24px 15px 28px;
    font-family: var(--vntsj-body);
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: transform 0.4s var(--vntsj-ease), box-shadow 0.4s ease, background 0.4s ease, color 0.3s;
    margin-top: 10px;
}
.vntsj-root .vntsj-action:disabled {
    opacity: 0.4; cursor: not-allowed; pointer-events: none;
}
.vntsj-root .vntsj-action--primary {
    color: #050505;
    background: linear-gradient(180deg, #ffffff 0%, #d6d6d6 100%);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.4),
        0 14px 36px -10px rgba(231,231,231,0.45);
}
.vntsj-root .vntsj-action--primary::before {
    content: ""; position: absolute; inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255,255,255,0.45), transparent 50%);
    opacity: 0.6; pointer-events: none;
}
.vntsj-root .vntsj-action--primary:hover {
    transform: translateY(-2px);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.6),
        0 18px 44px -10px rgba(231,231,231,0.6);
}
.vntsj-root .vntsj-action--primary span,
.vntsj-root .vntsj-action--primary svg { position: relative; z-index: 1; }
.vntsj-root .vntsj-action--primary svg { transition: transform 0.4s var(--vntsj-ease); }
.vntsj-root .vntsj-action--primary:hover svg { transform: translateX(4px); }
.vntsj-root .vntsj-action--final { margin-top: 24px; padding: 18px 28px 18px 32px; font-size: 13px; }

.vntsj-root .vntsj-action--ghost {
    color: var(--vntsj-ink-dim);
    background: transparent;
    border: 1px solid var(--vntsj-line-2);
}
.vntsj-root .vntsj-action--ghost:hover {
    color: var(--vntsj-ink); border-color: var(--vntsj-silver);
}
.vntsj-root .vntsj-action-row {
    display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
    margin-top: 10px;
}

/* ----- SCENE 0: WELCOME ----- */
.vntsj-root .vntsj-stagecar--welcome {
    position: absolute;
    bottom: 8%;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(220px, 30vw, 360px);
    opacity: 0.18;
    filter: blur(2px);
    pointer-events: none;
}
.vntsj-root .vntsj-stagecar--welcome .vntsj-car-svg {
    width: 100%; height: auto;
    animation: vntsj-float 4s ease-in-out infinite;
}
@keyframes vntsj-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

/* ----- SCENE 1: VEHICLE SELECT ----- */
.vntsj-root .vntsj-cars {
    display: flex; gap: 16px;
    flex-wrap: wrap; justify-content: center;
    margin-top: 12px;
}
.vntsj-root .vntsj-car-card {
    appearance: none;
    width: 200px;
    padding: 24px 18px 18px;
    border: 1px solid var(--vntsj-line);
    background: rgba(255,255,255,0.02);
    border-radius: 14px;
    color: var(--vntsj-silver);
    cursor: pointer;
    transition: border-color 0.3s, background 0.3s, transform 0.3s var(--vntsj-ease);
    display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.vntsj-root .vntsj-car-card:hover {
    border-color: var(--vntsj-line-2);
    background: rgba(255,255,255,0.04);
    transform: translateY(-2px);
}
.vntsj-root .vntsj-car-card.is-selected {
    border-color: var(--vntsj-silver);
    background: rgba(231,231,231,0.06);
    box-shadow: 0 0 0 1px var(--vntsj-silver), 0 12px 32px -8px rgba(231,231,231,0.25);
}
.vntsj-root .vntsj-car-card__svg {
    width: 100%; max-width: 140px; display: block;
    color: currentColor;
}
.vntsj-root .vntsj-car-card__svg svg { width: 100%; height: auto; }
.vntsj-root .vntsj-car-card__label {
    font-family: var(--vntsj-display);
    font-size: 14px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--vntsj-ink);
}

.vntsj-root .vntsj-colors {
    margin-top: 8px;
    display: inline-flex; align-items: center; gap: 12px;
    padding: 10px 16px;
    border: 1px solid var(--vntsj-line);
    border-radius: 999px;
}
.vntsj-root .vntsj-colors__label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--vntsj-ink-mute);
    margin-right: 4px;
}
.vntsj-root .vntsj-swatch {
    appearance: none;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--vntsj-swatch);
    border: 1px solid rgba(255,255,255,0.2);
    cursor: pointer;
    padding: 0;
    transition: transform 0.3s, box-shadow 0.3s;
}
.vntsj-root .vntsj-swatch:hover { transform: scale(1.1); }
.vntsj-root .vntsj-swatch.is-selected {
    box-shadow: 0 0 0 2px var(--vntsj-bg), 0 0 0 3px var(--vntsj-silver);
}

/* ----- SCENE 2: VIEW CHOICE ----- */
.vntsj-root .vntsj-choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    width: 100%;
    margin-top: 12px;
}
.vntsj-root .vntsj-choice {
    appearance: none;
    position: relative;
    text-align: left;
    padding: 28px 24px 24px;
    border: 1px solid var(--vntsj-line);
    background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005));
    border-radius: 14px;
    color: var(--vntsj-ink);
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.4s var(--vntsj-ease), border-color 0.3s, box-shadow 0.4s;
}
.vntsj-root .vntsj-choice:hover {
    transform: translateY(-3px);
    border-color: var(--vntsj-silver);
    box-shadow: 0 12px 36px -10px rgba(231,231,231,0.25);
}
.vntsj-root .vntsj-choice__num {
    position: absolute; top: 18px; right: 22px;
    font-family: var(--vntsj-display);
    font-size: 13px;
    color: var(--vntsj-silver);
    letter-spacing: 0.1em;
}
.vntsj-root .vntsj-choice__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 56px; height: 56px;
    margin-bottom: 16px;
    color: var(--vntsj-silver);
    border: 1px solid var(--vntsj-line-2);
    border-radius: 12px;
}
.vntsj-root .vntsj-choice__icon svg { width: 28px; height: 28px; }
.vntsj-root .vntsj-choice h3 {
    font-family: var(--vntsj-display);
    font-weight: 500;
    font-size: 22px;
    letter-spacing: -0.015em;
    margin: 0 0 8px;
}
.vntsj-root .vntsj-choice p {
    font-size: 14px;
    color: var(--vntsj-ink-dim);
    margin: 0 0 16px;
    line-height: 1.55;
}
.vntsj-root .vntsj-choice__cue {
    display: inline-flex;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--vntsj-silver);
    transition: gap 0.3s, color 0.3s;
}
.vntsj-root .vntsj-choice:hover .vntsj-choice__cue { color: var(--vntsj-chrome-1); }

/* ----- SCENE 3: INSPECT ----- */
.vntsj-root .vntsj-inspect {
    position: relative;
    width: 100%;
    max-width: 640px;
    aspect-ratio: 16 / 7;
    margin: 12px auto 4px;
    border: 1px solid var(--vntsj-line);
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
}
.vntsj-root .vntsj-inspect::before {
    content: ""; position: absolute; inset: 0;
    background-image:
        linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 90%);
}
.vntsj-root .vntsj-inspect__car {
    position: absolute; left: 50%; top: 55%;
    transform: translate(-50%, -50%);
    width: 60%;
}
.vntsj-root .vntsj-inspect__car .vntsj-car-svg { width: 100%; height: auto; }

.vntsj-root .vntsj-inspect__scan {
    position: absolute; top: 0; bottom: 0; left: 0; width: 3px;
    background: linear-gradient(180deg, transparent, var(--vntsj-silver), transparent);
    box-shadow: 0 0 24px var(--vntsj-silver), 0 0 12px var(--vntsj-silver);
    opacity: 0;
    transform: translateX(0);
}
.vntsj-root .vntsj-scene--inspect.is-active .vntsj-inspect__scan {
    animation: vntsj-scan 3.6s var(--vntsj-ease) forwards;
}
@keyframes vntsj-scan {
    0%   { opacity: 0; transform: translateX(0); }
    8%   { opacity: 1; }
    50%  { opacity: 1; transform: translateX(calc(100% + 640px)); }
    52%  { opacity: 1; transform: translateX(calc(100% + 640px)); }
    60%  { opacity: 0; }
    100% { opacity: 0; }
}

.vntsj-root .vntsj-inspect__checks {
    position: absolute; right: 16px; top: 16px;
    margin: 0; padding: 0;
    list-style: none;
    display: flex; flex-direction: column; gap: 8px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--vntsj-ink-mute);
}
.vntsj-root .vntsj-inspect__checks li {
    display: flex; align-items: center; gap: 8px;
    transition: color 0.4s;
}
.vntsj-root .vntsj-inspect__checks li span {
    width: 8px; height: 8px; border-radius: 50%;
    border: 1px solid var(--vntsj-line-2);
    transition: background 0.4s, border-color 0.4s, box-shadow 0.4s;
}
.vntsj-root .vntsj-inspect__checks li.is-checked {
    color: var(--vntsj-silver);
}
.vntsj-root .vntsj-inspect__checks li.is-checked span {
    background: var(--vntsj-silver);
    border-color: var(--vntsj-silver);
    box-shadow: 0 0 8px var(--vntsj-silver);
}

/* ----- SCENE 4: ROUTE ----- */
.vntsj-root .vntsj-routes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    width: 100%;
    margin-top: 12px;
}
.vntsj-root .vntsj-route {
    appearance: none;
    text-align: left;
    padding: 26px 24px 22px;
    border: 1px solid var(--vntsj-line);
    background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005));
    border-radius: 14px;
    color: var(--vntsj-ink);
    cursor: pointer;
    transition: transform 0.4s var(--vntsj-ease), border-color 0.3s, box-shadow 0.4s;
    display: flex; flex-direction: column; gap: 10px;
}
.vntsj-root .vntsj-route:hover {
    transform: translateY(-3px);
    border-color: var(--vntsj-silver);
    box-shadow: 0 12px 36px -10px rgba(231,231,231,0.25);
}
.vntsj-root .vntsj-route__num {
    font-family: var(--vntsj-display);
    font-size: 12px; color: var(--vntsj-silver);
    letter-spacing: 0.15em;
}
.vntsj-root .vntsj-route__title {
    font-family: var(--vntsj-display);
    font-weight: 500;
    font-size: clamp(18px, 2vw, 22px);
    letter-spacing: -0.015em;
    margin: 0;
}
.vntsj-root .vntsj-route__svg { width: 100%; height: auto; color: var(--vntsj-silver); }
.vntsj-root .vntsj-route__line { stroke-dasharray: 100; stroke-dashoffset: 100; }
.vntsj-root .vntsj-scene--route.is-active .vntsj-route .vntsj-route__line {
    animation: vntsj-route-draw 1.6s var(--vntsj-ease) forwards 0.3s;
}
.vntsj-root .vntsj-scene--route.is-active .vntsj-route:nth-child(2) .vntsj-route__line { animation-delay: 0.6s; }
@keyframes vntsj-route-draw { to { stroke-dashoffset: 0; } }

.vntsj-root .vntsj-route__text {
    font-size: 13.5px;
    color: var(--vntsj-ink-dim);
    margin: 0;
    line-height: 1.55;
}
.vntsj-root .vntsj-route__cue {
    margin-top: auto;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--vntsj-silver);
}

/* ----- SCENE 5: TRANSPORT ----- */
.vntsj-root .vntsj-transport {
    width: 100%;
    margin-top: 8px;
    padding: 18px;
    border: 1px solid var(--vntsj-line);
    border-radius: 14px;
    background: rgba(255,255,255,0.015);
}
.vntsj-root .vntsj-transport__map {
    width: 100%;
    height: auto;
    aspect-ratio: 800 / 240;
    overflow: visible;
}
.vntsj-root .vntsj-transport__map [data-vntsj-tr-path] {
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    transition: stroke-dashoffset 0.1s linear;
    filter: drop-shadow(0 0 4px rgba(231,231,231,0.3));
}
.vntsj-root .vntsj-transport__map [data-vntsj-tr-vehicle] {
    opacity: 0;
    transition: opacity 0.4s;
}
.vntsj-root .vntsj-scene--transport.is-active [data-vntsj-tr-vehicle] {
    opacity: 1;
}

.vntsj-root .vntsj-transport__readout {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--vntsj-line);
}
.vntsj-root .vntsj-transport__readout > div {
    display: flex; flex-direction: column; gap: 4px;
    text-align: left;
}
.vntsj-root .vntsj-readout__lbl {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--vntsj-ink-mute);
}
.vntsj-root .vntsj-readout__val {
    font-family: var(--vntsj-display);
    font-size: 16px;
    color: var(--vntsj-silver);
    letter-spacing: -0.005em;
}

/* ----- SCENE 6: DELIVERY ----- */
.vntsj-root .vntsj-delivery {
    position: relative;
    width: 100%;
    max-width: 520px;
    aspect-ratio: 16 / 9;
    margin: 12px auto 0;
    display: flex; align-items: center; justify-content: center;
}
.vntsj-root .vntsj-delivery__halo {
    position: absolute; inset: 0;
    background: radial-gradient(circle at center, rgba(231,231,231,0.18), transparent 60%);
    filter: blur(20px);
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 1s var(--vntsj-ease) 0.2s, transform 1s var(--vntsj-ease) 0.2s;
}
.vntsj-root .vntsj-scene--delivery.is-active .vntsj-delivery__halo {
    opacity: 1; transform: scale(1.1);
}
.vntsj-root .vntsj-delivery__car {
    position: relative; z-index: 1;
    width: 70%;
    transform: translateX(-30%) scale(0.95);
    opacity: 0;
    transition: transform 1s var(--vntsj-ease) 0.1s, opacity 1s var(--vntsj-ease) 0.1s;
}
.vntsj-root .vntsj-scene--delivery.is-active .vntsj-delivery__car {
    transform: translateX(0) scale(1);
    opacity: 1;
}
.vntsj-root .vntsj-delivery__car .vntsj-car-svg { width: 100%; height: auto; }
.vntsj-root .vntsj-delivery__check {
    position: absolute; bottom: 6%; right: 8%;
    width: 56px; height: 56px;
    color: var(--vntsj-silver);
    opacity: 0; transform: scale(0.6);
    transition: opacity 0.6s ease 0.9s, transform 0.6s var(--vntsj-ease) 0.9s;
}
.vntsj-root .vntsj-scene--delivery.is-active .vntsj-delivery__check {
    opacity: 1; transform: scale(1);
    filter: drop-shadow(0 0 12px rgba(231,231,231,0.6));
}

.vntsj-root .vntsj-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    width: 100%;
    max-width: 600px;
    margin-top: 14px;
    padding: 16px 18px;
    border: 1px solid var(--vntsj-line);
    border-radius: 14px;
    background: rgba(255,255,255,0.015);
}
.vntsj-root .vntsj-summary > div {
    display: flex; flex-direction: column; gap: 4px;
    text-align: left;
}
.vntsj-root .vntsj-summary__lbl {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--vntsj-ink-mute);
}
.vntsj-root .vntsj-summary__val {
    font-family: var(--vntsj-display);
    font-size: 14px;
    color: var(--vntsj-silver);
}

/* ----- BOTTOM PILLS ----- */
.vntsj-root .vntsj-steps {
    position: relative; z-index: 5;
    flex: 0 0 auto;
    display: flex; gap: 6px;
    justify-content: center; align-items: center;
    padding: 16px clamp(12px, 3vw, 32px);
    border-top: 1px solid var(--vntsj-line);
    overflow-x: auto;
    scrollbar-width: none;
}
.vntsj-root .vntsj-steps::-webkit-scrollbar { display: none; }
.vntsj-root .vntsj-pill {
    appearance: none;
    flex: 0 0 auto;
    padding: 8px 14px;
    border: 1px solid var(--vntsj-line);
    background: transparent;
    color: var(--vntsj-ink-mute);
    font-family: var(--vntsj-body);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}
.vntsj-root .vntsj-pill:hover { color: var(--vntsj-ink); border-color: var(--vntsj-line-2); }
.vntsj-root .vntsj-pill.is-active {
    color: #050505;
    background: var(--vntsj-silver);
    border-color: var(--vntsj-silver);
    box-shadow: 0 0 16px rgba(231,231,231,0.35);
}
.vntsj-root .vntsj-pill.is-completed {
    color: var(--vntsj-silver);
    border-color: var(--vntsj-line-2);
}

/* ----- FLY CAR (TRANSITION) ----- */
.vntsj-root .vntsj-flycar {
    position: absolute;
    z-index: 4;
    bottom: 22%;
    left: -300px;
    width: 240px;
    pointer-events: none;
    opacity: 0;
}
.vntsj-root .vntsj-flycar .vntsj-car-svg { width: 100%; height: auto; }
.vntsj-root .vntsj-flycar.is-driving {
    animation: vntsj-flyby 1.4s cubic-bezier(0.55, 0, 0.4, 1) forwards;
}
@keyframes vntsj-flyby {
    0%   { transform: translateX(0)      scale(0.6); opacity: 0; }
    18%  {                               opacity: 0.95; }
    50%  { transform: translateX(60vw)   scale(1.05); opacity: 1; }
    82%  {                               opacity: 0.95; }
    100% { transform: translateX(140vw)  scale(0.6); opacity: 0; }
}

/* ----- RESPONSIVE ----- */
@media (max-width: 720px) {
    .vntsj-root {
        min-height: 720px;
        height: 100svh;
        height: 100dvh;
        border-radius: 14px;
    }
    .vntsj-root .vntsj-topbar { padding: 14px 16px; gap: 12px; }
    .vntsj-root .vntsj-brand__sub { display: none; }
    .vntsj-root .vntsj-progress { max-width: none; }
    .vntsj-root .vntsj-restart span { display: none; }
    .vntsj-root .vntsj-restart { padding: 8px; }
    .vntsj-root .vntsj-scene { padding: 16px; }
    .vntsj-root .vntsj-scene__inner { gap: 14px; }
    .vntsj-root .vntsj-cars { gap: 10px; }
    .vntsj-root .vntsj-car-card { width: calc(50% - 5px); padding: 16px 12px 12px; }
    .vntsj-root .vntsj-transport__readout { grid-template-columns: 1fr; gap: 6px; }
    .vntsj-root .vntsj-summary { grid-template-columns: 1fr; gap: 8px; }
    .vntsj-root .vntsj-pill { padding: 6px 10px; font-size: 9.5px; letter-spacing: 0.12em; }
    .vntsj-root .vntsj-steps { padding: 10px 14px; gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
    .vntsj-root *,
    .vntsj-root *::before,
    .vntsj-root *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .vntsj-root .vntsj-flycar { display: none; }
}

/* =============================================================
   AUTO PERGAMINOS JOURNEY v2.1 POLISH OVERRIDES
   Admin-editable real photo assets + cleaner readability.
   ============================================================= */
.vntsj-root .vntsj-brand__mark{
    width:28px !important;
    height:28px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:9px !important;
    background:linear-gradient(135deg,#ffffff,#9d9d9d 48%,#f5f5f5) !important;
    -webkit-mask:none !important;
            mask:none !important;
    color:#050505 !important;
    font-family:var(--vntsj-display) !important;
    font-weight:800 !important;
    font-size:10px !important;
    letter-spacing:.04em !important;
    box-shadow:0 0 18px rgba(255,255,255,.22), inset 0 1px 0 rgba(255,255,255,.75) !important;
}
.vntsj-root .vntsj-brand__txt{
    font-weight:800;
    letter-spacing:.13em;
}
.vntsj-root .vntsj-brand__sub{
    color:rgba(255,255,255,.7);
}

.vntsj-root .vntsj-h1,
.vntsj-root .vntsj-h2,
.vntsj-root .vntsj-choice h3,
.vntsj-root .vntsj-route__title{
    overflow:visible !important;
    line-height:1.08 !important;
    padding-bottom:.08em;
}
.vntsj-root .vntsj-sub,
.vntsj-root .vntsj-lead{
    color:rgba(255,255,255,.78) !important;
}

.vntsj-root .vntsj-vehicle-img{
    display:block;
    width:100%;
    height:auto;
    object-fit:contain;
    pointer-events:none;
    user-select:none;
    transform:translateZ(0);
    filter:drop-shadow(0 24px 38px rgba(0,0,0,.48));
}
.vntsj-root[data-vntsj-color="silver"] .vntsj-vehicle-img{filter:saturate(.88) contrast(1.06) drop-shadow(0 24px 38px rgba(0,0,0,.48));}
.vntsj-root[data-vntsj-color="black"] .vntsj-vehicle-img{filter:brightness(.45) contrast(1.35) saturate(.55) drop-shadow(0 24px 38px rgba(0,0,0,.58));}
.vntsj-root[data-vntsj-color="white"] .vntsj-vehicle-img{filter:brightness(1.24) contrast(.95) saturate(.42) drop-shadow(0 24px 38px rgba(0,0,0,.48));}
.vntsj-root[data-vntsj-color="red"] .vntsj-vehicle-img{filter:sepia(1) saturate(5.4) hue-rotate(328deg) brightness(.78) contrast(1.12) drop-shadow(0 24px 38px rgba(0,0,0,.5));}
.vntsj-root[data-vntsj-color="blue"] .vntsj-vehicle-img{filter:sepia(1) saturate(4.2) hue-rotate(182deg) brightness(.78) contrast(1.12) drop-shadow(0 24px 38px rgba(0,0,0,.5));}

.vntsj-root .vntsj-stagecar--welcome{
    width:clamp(340px,45vw,620px) !important;
    opacity:.28 !important;
    filter:none !important;
    bottom:2.5% !important;
}
.vntsj-root .vntsj-stagecar--welcome .vntsj-vehicle-img{
    animation:vntsj-float 4.4s ease-in-out infinite;
}

.vntsj-root .vntsj-cars{
    gap:18px !important;
    align-items:stretch;
}
.vntsj-root .vntsj-car-card{
    width:min(252px,31vw) !important;
    min-height:208px;
    padding:18px 18px 16px !important;
    border-radius:20px !important;
    background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.018)) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
    overflow:hidden;
}
.vntsj-root .vntsj-car-card::before{
    content:"";
    position:absolute;
    inset:-1px;
    border-radius:inherit;
    background:radial-gradient(circle at 50% 10%,rgba(255,255,255,.18),transparent 48%);
    opacity:0;
    transition:opacity .35s var(--vntsj-ease);
    pointer-events:none;
}
.vntsj-root .vntsj-car-card:hover::before,
.vntsj-root .vntsj-car-card.is-selected::before{opacity:1;}
.vntsj-root .vntsj-car-card__media{
    position:relative;
    z-index:1;
    width:100%;
    height:118px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.vntsj-root .vntsj-car-card__media .vntsj-vehicle-img{
    max-height:112px;
}
.vntsj-root .vntsj-car-card__label{
    position:relative;
    z-index:1;
    margin-top:auto;
    color:#fff !important;
    font-weight:800 !important;
    letter-spacing:.22em !important;
}
.vntsj-root .vntsj-colors{
    background:rgba(0,0,0,.34);
    border-color:rgba(255,255,255,.16) !important;
    box-shadow:0 14px 42px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.05);
}
.vntsj-root .vntsj-colors__label{color:rgba(255,255,255,.72) !important;}
.vntsj-root .vntsj-swatch{
    width:28px !important;
    height:28px !important;
}

.vntsj-root .vntsj-choice,
.vntsj-root .vntsj-route{
    background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.022)) !important;
    border-color:rgba(255,255,255,.16) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 20px 55px rgba(0,0,0,.22);
}
.vntsj-root .vntsj-choice h3,
.vntsj-root .vntsj-route__title{
    color:#fff !important;
    font-weight:750 !important;
    text-shadow:0 1px 22px rgba(255,255,255,.08);
}
.vntsj-root .vntsj-choice p,
.vntsj-root .vntsj-route__text{
    color:rgba(255,255,255,.76) !important;
}
.vntsj-root .vntsj-choice__num,
.vntsj-root .vntsj-route__num,
.vntsj-root .vntsj-choice__cue,
.vntsj-root .vntsj-route__cue{
    color:#f7f7f7 !important;
}
.vntsj-root .vntsj-choice__icon{
    color:#fff !important;
    border-color:rgba(255,255,255,.24) !important;
    background:rgba(255,255,255,.06);
}
.vntsj-root .vntsj-route__title{
    min-height:auto !important;
    white-space:normal !important;
}
.vntsj-root .vntsj-route__svg text{
    paint-order:stroke;
    stroke:rgba(0,0,0,.55);
    stroke-width:3px;
}

.vntsj-root .vntsj-inspect__car .vntsj-vehicle-img{
    max-width:min(540px,82%);
    margin:0 auto;
}
.vntsj-root .vntsj-flycar{
    width:clamp(150px,18vw,230px) !important;
}
.vntsj-root .vntsj-flycar .vntsj-vehicle-img{
    width:100%;
}

.vntsj-root .vntsj-delivery{
    max-width:660px !important;
    aspect-ratio:16/8 !important;
    border:1px solid rgba(255,255,255,.1);
    border-radius:28px;
    background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.016));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 24px 80px rgba(0,0,0,.32);
    overflow:hidden;
}
.vntsj-root .vntsj-delivery::before{
    content:"";
    position:absolute;
    left:8%; right:8%; bottom:18%;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent);
    box-shadow:0 0 24px rgba(255,255,255,.18);
}
.vntsj-root .vntsj-delivery__car{
    width:74% !important;
}
.vntsj-root .vntsj-delivery__check{
    right:7% !important;
    bottom:12% !important;
    border-radius:50%;
    background:rgba(255,255,255,.06);
    padding:7px;
}
.vntsj-root .vntsj-summary{
    background:rgba(255,255,255,.045) !important;
    border-color:rgba(255,255,255,.13) !important;
}
.vntsj-root .vntsj-summary__lbl{color:rgba(255,255,255,.58) !important;}
.vntsj-root .vntsj-summary__val{color:#fff !important;font-weight:700;}

@media (max-width: 820px){
    .vntsj-root .vntsj-brand{gap:8px;font-size:11px;}
    .vntsj-root .vntsj-brand__txt{letter-spacing:.08em;}
    .vntsj-root .vntsj-car-card{width:calc(33.333% - 12px) !important;min-height:166px;padding:14px 12px !important;}
    .vntsj-root .vntsj-car-card__media{height:88px;}
    .vntsj-root .vntsj-car-card__label{font-size:12px;letter-spacing:.14em !important;}
}
@media (max-width: 620px){
    .vntsj-root .vntsj-cars{gap:10px !important;}
    .vntsj-root .vntsj-car-card{width:100% !important;min-height:128px;flex-direction:row !important;justify-content:space-between !important;}
    .vntsj-root .vntsj-car-card__media{width:60%;height:92px;}
    .vntsj-root .vntsj-car-card__label{margin:0;}
    .vntsj-root .vntsj-colors{gap:9px;padding:9px 12px;}
    .vntsj-root .vntsj-swatch{width:24px !important;height:24px !important;}
    .vntsj-root .vntsj-delivery{aspect-ratio:1.18/1 !important;border-radius:22px;}
    .vntsj-root .vntsj-delivery__car{width:88% !important;}
}


/* =============================================================
   AUTO PERGAMINOS JOURNEY v2.2 HOTFIXES
   1) stronger visible color switching on vehicle images
   2) step 6 layout no longer clips the CTA/button
   3) improved proportions for delivery scene on shorter screens
   ============================================================= */
.vntsj-root .vntsj-vehicle-img{
    transition:filter .35s var(--vntsj-ease), transform .35s var(--vntsj-ease), opacity .35s var(--vntsj-ease);
    will-change:filter,transform;
}
.vntsj-root[data-vntsj-color="silver"] .vntsj-vehicle-img{
    filter:saturate(.94) contrast(1.04) brightness(1.02) drop-shadow(0 24px 38px rgba(0,0,0,.48));
}
.vntsj-root[data-vntsj-color="black"] .vntsj-vehicle-img{
    filter:brightness(.28) contrast(1.42) saturate(.28) grayscale(.12) drop-shadow(0 24px 38px rgba(0,0,0,.62));
}
.vntsj-root[data-vntsj-color="white"] .vntsj-vehicle-img{
    filter:brightness(1.52) contrast(.9) saturate(.08) grayscale(.05) drop-shadow(0 24px 38px rgba(0,0,0,.46));
}
.vntsj-root[data-vntsj-color="red"] .vntsj-vehicle-img{
    filter:sepia(1) saturate(8.2) hue-rotate(318deg) brightness(.95) contrast(1.08) drop-shadow(0 24px 38px rgba(0,0,0,.52));
}
.vntsj-root[data-vntsj-color="blue"] .vntsj-vehicle-img{
    filter:sepia(1) saturate(8) hue-rotate(172deg) brightness(.9) contrast(1.1) drop-shadow(0 24px 38px rgba(0,0,0,.52));
}

.vntsj-root .vntsj-scene--delivery{
    align-items:flex-start;
    padding-top:clamp(18px,2.4vh,30px);
    padding-bottom:126px;
    overflow-y:auto;
    overscroll-behavior:contain;
}
.vntsj-root .vntsj-scene--delivery .vntsj-scene__inner{
    max-width:760px;
    gap:12px;
    padding-bottom:16px;
}
.vntsj-root .vntsj-scene--delivery .vntsj-h2{
    font-size:clamp(42px,4.8vw,76px);
    line-height:1.02 !important;
    margin:0;
}
.vntsj-root .vntsj-scene--delivery .vntsj-sub{
    max-width:760px;
    margin:0 auto 4px;
}
.vntsj-root .vntsj-delivery{
    width:min(100%,610px) !important;
    max-width:610px !important;
    aspect-ratio:16/7.1 !important;
    margin:2px auto 0;
}
.vntsj-root .vntsj-delivery__car{
    width:78% !important;
    transform:translateY(4px);
}
.vntsj-root .vntsj-delivery__check{
    right:6.2% !important;
    bottom:10.5% !important;
}
.vntsj-root .vntsj-summary{
    width:min(100%,680px);
    margin:2px auto 0;
}
.vntsj-root .vntsj-action--final{
    margin-top:12px !important;
    margin-bottom:4px;
    padding:16px 26px 16px 28px !important;
}

@media (max-height: 900px){
    .vntsj-root .vntsj-scene--delivery{padding-top:14px;padding-bottom:118px;}
    .vntsj-root .vntsj-scene--delivery .vntsj-scene__inner{gap:10px;}
    .vntsj-root .vntsj-delivery{max-width:570px !important;aspect-ratio:16/6.8 !important;}
    .vntsj-root .vntsj-summary{max-width:640px;}
    .vntsj-root .vntsj-action--final{margin-top:10px !important;}
}

@media (max-width: 860px){
    .vntsj-root .vntsj-scene--delivery{padding-bottom:120px;}
    .vntsj-root .vntsj-delivery{width:min(100%,560px) !important;}
}

@media (max-width: 620px){
    .vntsj-root .vntsj-scene--delivery{padding-top:12px;padding-bottom:112px;}
    .vntsj-root .vntsj-scene--delivery .vntsj-h2{font-size:clamp(34px,10vw,52px);}
    .vntsj-root .vntsj-delivery{aspect-ratio:1.22/1 !important;border-radius:20px;}
    .vntsj-root .vntsj-delivery__car{width:90% !important;}
    .vntsj-root .vntsj-summary{gap:8px;}
    .vntsj-root .vntsj-action--final{width:100%;justify-content:center;}
}


/* =============================================================
   AUTO PERGAMINOS JOURNEY v2.3 ROUTE / TRANSPORT IMPROVEMENTS
   Step 4 + Step 5 clearer explanation and stronger differentiation.
   ============================================================= */
.vntsj-root .vntsj-route__badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    align-self:flex-start;
    padding:6px 10px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.06);
    color:#fff;
    font-size:10px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.18em;
}
.vntsj-root .vntsj-route__meta{
    margin:0;
    padding:0;
    list-style:none;
    display:grid;
    gap:7px;
}
.vntsj-root .vntsj-route__meta li{
    position:relative;
    padding-left:18px;
    color:rgba(255,255,255,.82);
    font-size:12.5px;
    line-height:1.5;
}
.vntsj-root .vntsj-route__meta li::before{
    content:"";
    position:absolute;
    left:0;
    top:.62em;
    width:7px;
    height:7px;
    border-radius:50%;
    background:linear-gradient(180deg,#fff,#bfbfbf);
    box-shadow:0 0 10px rgba(255,255,255,.24);
    transform:translateY(-50%);
}
.vntsj-root .vntsj-transport__story{
    margin-top:16px;
    padding:16px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:16px;
    background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
}
.vntsj-root .vntsj-transport__storyhead{
    display:grid;
    gap:12px;
    justify-items:start;
    text-align:left;
}
.vntsj-root .vntsj-transport__routepill{
    display:inline-flex;
    align-items:center;
    min-height:34px;
    padding:7px 12px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.15);
    background:rgba(255,255,255,.08);
    color:#fff;
    font-size:10px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.18em;
}
.vntsj-root .vntsj-transport__explain{
    margin:0;
    color:rgba(255,255,255,.82);
    font-size:13.5px;
    line-height:1.65;
}
.vntsj-root .vntsj-transport__milestones{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:14px;
}
.vntsj-root .vntsj-transport__chip{
    display:inline-flex;
    align-items:center;
    min-height:36px;
    padding:8px 12px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.1);
    background:rgba(255,255,255,.045);
    color:#fff;
    font-size:11px;
    letter-spacing:.08em;
    text-transform:uppercase;
}
.vntsj-root .vntsj-transport__readout{
    grid-template-columns:repeat(4,1fr) !important;
}
@media (max-width: 900px){
    .vntsj-root .vntsj-transport__readout{
        grid-template-columns:repeat(2,1fr) !important;
    }
}
@media (max-width: 720px){
    .vntsj-root .vntsj-transport__story{
        padding:14px;
        border-radius:14px;
    }
    .vntsj-root .vntsj-transport__readout{
        grid-template-columns:1fr !important;
    }
    .vntsj-root .vntsj-transport__chip{
        width:100%;
        justify-content:flex-start;
    }
}


/* =============================================================
   AUTO PERGAMINOS JOURNEY v2.4 HEIGHT FIX
   Steps 4 / 5 / 6 now get real page height, not inner scrolling.
   ============================================================= */
.vntsj-root:not(.is-fullscreen)[data-vntsj-current-scene="4"],
.vntsj-root:not(.is-fullscreen)[data-vntsj-current-scene="5"],
.vntsj-root:not(.is-fullscreen)[data-vntsj-current-scene="6"]{
    height:auto !important;
    max-height:none !important;
    overflow:hidden !important;
}
.vntsj-root:not(.is-fullscreen)[data-vntsj-current-scene="4"]{
    min-height:1180px !important;
}
.vntsj-root:not(.is-fullscreen)[data-vntsj-current-scene="5"]{
    min-height:1260px !important;
}
.vntsj-root:not(.is-fullscreen)[data-vntsj-current-scene="6"]{
    min-height:1120px !important;
}
.vntsj-root[data-vntsj-current-scene="4"] .vntsj-stage,
.vntsj-root[data-vntsj-current-scene="5"] .vntsj-stage,
.vntsj-root[data-vntsj-current-scene="6"] .vntsj-stage{
    overflow:visible !important;
}
.vntsj-root[data-vntsj-current-scene="4"] .vntsj-scene,
.vntsj-root[data-vntsj-current-scene="5"] .vntsj-scene,
.vntsj-root[data-vntsj-current-scene="6"] .vntsj-scene{
    overflow:visible !important;
}
.vntsj-root .vntsj-scene--route,
.vntsj-root .vntsj-scene--transport,
.vntsj-root .vntsj-scene--delivery{
    align-items:center !important;
    padding-top:clamp(34px,4vw,60px) !important;
    padding-bottom:clamp(140px,12vw,190px) !important;
    overflow:visible !important;
    overscroll-behavior:auto !important;
}
.vntsj-root .vntsj-scene--route .vntsj-scene__inner,
.vntsj-root .vntsj-scene--transport .vntsj-scene__inner,
.vntsj-root .vntsj-scene--delivery .vntsj-scene__inner{
    padding-bottom:0 !important;
}
.vntsj-root .vntsj-scene--transport .vntsj-scene__inner{
    max-width:980px;
}
.vntsj-root .vntsj-transport{
    margin-bottom:0;
}
.vntsj-root .vntsj-scene--delivery .vntsj-scene__inner{
    max-width:820px;
    gap:16px;
}
.vntsj-root .vntsj-delivery{
    max-width:690px !important;
    width:min(100%,690px) !important;
    aspect-ratio:16/7.6 !important;
}
.vntsj-root .vntsj-action--final{
    flex:0 0 auto;
}
@media (max-width: 900px){
    .vntsj-root:not(.is-fullscreen)[data-vntsj-current-scene="4"]{min-height:1360px !important;}
    .vntsj-root:not(.is-fullscreen)[data-vntsj-current-scene="5"]{min-height:1480px !important;}
    .vntsj-root:not(.is-fullscreen)[data-vntsj-current-scene="6"]{min-height:1200px !important;}
}
@media (max-width: 620px){
    .vntsj-root:not(.is-fullscreen)[data-vntsj-current-scene="4"]{min-height:1540px !important;}
    .vntsj-root:not(.is-fullscreen)[data-vntsj-current-scene="5"]{min-height:1680px !important;}
    .vntsj-root:not(.is-fullscreen)[data-vntsj-current-scene="6"]{min-height:1240px !important;}
    .vntsj-root .vntsj-scene--route,
    .vntsj-root .vntsj-scene--transport,
    .vntsj-root .vntsj-scene--delivery{
        padding-top:28px !important;
        padding-bottom:128px !important;
    }
    .vntsj-root .vntsj-delivery{width:100% !important;}
}


/* =============================================================
   AUTO PERGAMINOS JOURNEY v2.5 TRANSPORT INTERACTIVITY
   Richer Step 5 story + guided phases like a more cinematic flow.
   ============================================================= */
.vntsj-root .vntsj-transport{
    width:min(100%,980px);
    padding:22px;
    border-radius:24px;
    border:1px solid rgba(255,255,255,.1);
    background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
    box-shadow:0 28px 80px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.05);
}
.vntsj-root .vntsj-transport__map{
    display:block;
}
.vntsj-root .vntsj-transport__phases{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
    margin-top:16px;
}
.vntsj-root .vntsj-transport__phase{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
    min-height:138px;
    padding:16px 14px;
    border-radius:18px;
    border:1px solid rgba(255,255,255,.08);
    background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.018));
    text-align:left;
    transition:transform .45s var(--vntsj-ease), border-color .35s ease, background .35s ease, box-shadow .35s ease, opacity .35s ease;
    opacity:.7;
}
.vntsj-root .vntsj-transport__phase::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    background:radial-gradient(circle at 50% 0%,rgba(255,255,255,.14),transparent 56%);
    opacity:0;
    transition:opacity .35s ease;
}
.vntsj-root .vntsj-transport__phase.is-active,
.vntsj-root .vntsj-transport__phase.is-complete{
    opacity:1;
}
.vntsj-root .vntsj-transport__phase.is-active{
    transform:translateY(-6px);
    border-color:rgba(255,255,255,.26);
    background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.03));
    box-shadow:0 18px 34px rgba(0,0,0,.26), 0 0 0 1px rgba(255,255,255,.05) inset;
}
.vntsj-root .vntsj-transport__phase.is-active::before{opacity:1;}
.vntsj-root .vntsj-transport__phase.is-complete{
    border-color:rgba(255,255,255,.16);
}
.vntsj-root .vntsj-transport__phase-num{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.16);
    background:rgba(255,255,255,.06);
    color:#fff;
    font-size:11px;
    font-weight:800;
    letter-spacing:.16em;
}
.vntsj-root .vntsj-transport__phase-title{
    display:block;
    font-family:var(--vntsj-display);
    color:#fff;
    font-size:18px;
    line-height:1.1;
    letter-spacing:-.01em;
}
.vntsj-root .vntsj-transport__phase-desc{
    display:block;
    color:rgba(255,255,255,.72);
    font-size:12.5px;
    line-height:1.6;
}
.vntsj-root .vntsj-scene--transport .vntsj-action-row{
    margin-top:8px;
}
@media (max-width: 900px){
    .vntsj-root .vntsj-transport__phases{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width: 620px){
    .vntsj-root .vntsj-transport{padding:16px;border-radius:18px;}
    .vntsj-root .vntsj-transport__phases{grid-template-columns:1fr;gap:10px;}
    .vntsj-root .vntsj-transport__phase{min-height:auto;padding:14px 13px;}
    .vntsj-root .vntsj-transport__phase.is-active{transform:none;}
}


/* =============================================================
   AUTO PERGAMINOS JOURNEY v2.6 MANUAL STEP 5 SUBSTEPS
   Step 5 now behaves like a manual mini-journey: one substep at a time.
   ============================================================= */
.vntsj-root .vntsj-transport__map [data-vntsj-tr-path]{
    transition:stroke-dashoffset .72s var(--vntsj-ease) !important;
}
.vntsj-root .vntsj-transport__map [data-vntsj-tr-vehicle]{
    opacity:1 !important;
    transition:transform .72s var(--vntsj-ease), opacity .35s ease !important;
}
.vntsj-root .vntsj-transport__phases{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:0 !important;
    margin-top:16px !important;
    min-height:190px;
    position:relative;
}
.vntsj-root .vntsj-transport__phase{
    display:none !important;
    min-height:190px !important;
    padding:24px 24px 22px !important;
    border-radius:24px !important;
    border-color:rgba(255,255,255,.18) !important;
    background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.03)) !important;
    box-shadow:0 22px 54px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.08) !important;
    opacity:1 !important;
    transform:none !important;
}
.vntsj-root .vntsj-transport__phase.is-active{
    display:flex !important;
    animation:vntsj-substep-enter .56s var(--vntsj-ease) both;
}
@keyframes vntsj-substep-enter{
    0%{opacity:0;transform:translateY(18px) scale(.985);filter:blur(8px);}
    100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0);}
}
.vntsj-root .vntsj-transport__phase-num{
    width:42px !important;
    height:42px !important;
    font-size:12px !important;
    box-shadow:0 0 20px rgba(255,255,255,.14);
}
.vntsj-root .vntsj-transport__phase-title{
    font-size:clamp(28px,3.5vw,46px) !important;
    line-height:1.02 !important;
    letter-spacing:-.04em !important;
    max-width:780px;
}
.vntsj-root .vntsj-transport__phase-desc{
    max-width:760px;
    color:rgba(255,255,255,.78) !important;
    font-size:clamp(14px,1.3vw,17px) !important;
    line-height:1.7 !important;
}
.vntsj-root .vntsj-transport__active-copy{
    width:100%;
    margin:14px 0 0;
    padding:14px 16px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,.1);
    background:rgba(0,0,0,.22);
    color:rgba(255,255,255,.78);
    font-size:13.5px;
    line-height:1.65;
    text-align:left;
}
.vntsj-root .vntsj-transport__subnav{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    margin-top:16px;
}
.vntsj-root .vntsj-substep-btn{
    appearance:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-height:48px;
    padding:13px 20px;
    border-radius:999px;
    font-family:var(--vntsj-body);
    font-size:11px;
    font-weight:800;
    letter-spacing:.16em;
    text-transform:uppercase;
    cursor:pointer;
    transition:transform .35s var(--vntsj-ease), opacity .25s ease, border-color .25s ease, background .25s ease;
}
.vntsj-root .vntsj-substep-btn--primary{
    border:1px solid rgba(255,255,255,.45);
    background:linear-gradient(180deg,#fff,#cfcfcf);
    color:#050505;
    box-shadow:0 18px 42px rgba(255,255,255,.18);
}
.vntsj-root .vntsj-substep-btn--ghost{
    border:1px solid rgba(255,255,255,.16);
    background:rgba(255,255,255,.035);
    color:#fff;
}
.vntsj-root .vntsj-substep-btn:not(:disabled):hover{
    transform:translateY(-2px);
}
.vntsj-root .vntsj-substep-btn:disabled{
    opacity:.36;
    cursor:not-allowed;
    transform:none !important;
}
.vntsj-root[data-vntsj-transport-step="3"] .vntsj-substep-btn--primary{
    background:rgba(255,255,255,.06);
    color:#fff;
    border-color:rgba(255,255,255,.18);
    box-shadow:none;
}
@media (max-width:720px){
    .vntsj-root .vntsj-transport__phases{min-height:230px;}
    .vntsj-root .vntsj-transport__phase{min-height:230px !important;padding:20px 18px !important;}
    .vntsj-root .vntsj-transport__phase-title{font-size:clamp(27px,9vw,42px) !important;}
    .vntsj-root .vntsj-substep-btn{width:100%;}
    .vntsj-root .vntsj-transport__active-copy{text-align:center;}
}


/* =============================================================
   AUTO PERGAMINOS JOURNEY v2.7 — CINEMATIC STEP 5
   Mini-scenes: dealership abroad / car movement / human inspection / handover.
   ============================================================= */
.vntsj-root .vntsj-scene__inner--cinematic{
    gap:16px;
}
.vntsj-root .vntsj-cine{
    width:min(100%,1060px);
    display:grid;
    gap:14px;
}
.vntsj-root .vntsj-cine__viewport{
    position:relative;
    height:clamp(360px,44vw,520px);
    overflow:hidden;
    border-radius:32px;
    border:1px solid rgba(255,255,255,.12);
    background:
        radial-gradient(circle at 50% 8%,rgba(255,255,255,.16),transparent 32%),
        linear-gradient(180deg,#101116 0%,#07080b 58%,#030304 100%);
    box-shadow:0 34px 100px rgba(0,0,0,.44), inset 0 1px 0 rgba(255,255,255,.07);
    isolation:isolate;
}
.vntsj-root .vntsj-cine__viewport::before{
    content:"";
    position:absolute;
    inset:-40%;
    background:
        linear-gradient(115deg,transparent 0 38%,rgba(255,255,255,.10) 47%,transparent 56%),
        radial-gradient(circle at 20% 30%,rgba(200,18,18,.18),transparent 28%),
        radial-gradient(circle at 76% 34%,rgba(255,255,255,.10),transparent 25%);
    opacity:.85;
    transform:translateX(-12%);
    transition:transform .75s var(--vntsj-ease), opacity .45s ease;
    z-index:0;
}
.vntsj-root[data-vntsj-transport-step="1"] .vntsj-cine__viewport::before{transform:translateX(4%);}
.vntsj-root[data-vntsj-transport-step="2"] .vntsj-cine__viewport::before{transform:translateX(14%) scale(1.05);}
.vntsj-root[data-vntsj-transport-step="3"] .vntsj-cine__viewport::before{transform:translateX(26%) scale(1.08);opacity:1;}
.vntsj-root .vntsj-cine__sky{
    position:absolute;
    inset:0 0 28%;
    background:
        linear-gradient(180deg,rgba(255,255,255,.09),transparent),
        radial-gradient(circle at 22% 22%,rgba(255,255,255,.13),transparent 18%);
    z-index:1;
}
.vntsj-root .vntsj-cine__sun{
    position:absolute;
    top:46px;
    right:68px;
    width:86px;
    height:86px;
    border-radius:999px;
    background:radial-gradient(circle,#fff,rgba(255,255,255,.12) 55%,transparent 72%);
    filter:blur(.2px);
    opacity:.42;
    z-index:2;
    transition:transform .7s var(--vntsj-ease), opacity .5s ease;
}
.vntsj-root[data-vntsj-transport-step="2"] .vntsj-cine__sun,
.vntsj-root[data-vntsj-transport-step="3"] .vntsj-cine__sun{opacity:.22;transform:translateY(28px) scale(.8);}
.vntsj-root .vntsj-cine__city{
    position:absolute;
    left:6%;
    right:6%;
    bottom:112px;
    height:150px;
    display:flex;
    align-items:flex-end;
    gap:10px;
    z-index:3;
    transition:opacity .55s ease, transform .75s var(--vntsj-ease), filter .55s ease;
}
.vntsj-root .vntsj-cine__city span{
    display:block;
    width:11%;
    min-width:34px;
    border-radius:10px 10px 0 0;
    background:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,.055));
    border:1px solid rgba(255,255,255,.08);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.vntsj-root .vntsj-cine__city span:nth-child(1){height:70px}
.vntsj-root .vntsj-cine__city span:nth-child(2){height:120px}
.vntsj-root .vntsj-cine__city span:nth-child(3){height:96px}
.vntsj-root .vntsj-cine__city span:nth-child(4){height:140px}
.vntsj-root .vntsj-cine__city span:nth-child(5){height:80px}
.vntsj-root .vntsj-cine__city--kos{
    opacity:0;
    transform:translateX(42px);
}
.vntsj-root .vntsj-cine__city--foreign{
    opacity:1;
    transform:translateX(0);
}
.vntsj-root[data-vntsj-transport-step="1"] .vntsj-cine__city--foreign{opacity:.9;transform:translateX(-52px);filter:blur(.5px);}
.vntsj-root[data-vntsj-transport-step="2"] .vntsj-cine__city--foreign,
.vntsj-root[data-vntsj-transport-step="3"] .vntsj-cine__city--foreign{opacity:0;transform:translateX(-170px);filter:blur(2px);}
.vntsj-root[data-vntsj-transport-step="2"] .vntsj-cine__city--kos,
.vntsj-root[data-vntsj-transport-step="3"] .vntsj-cine__city--kos{opacity:1;transform:translateX(0);}
.vntsj-root[data-vntsj-route-mode="direct"] .vntsj-cine__city--foreign{opacity:0;}
.vntsj-root[data-vntsj-route-mode="direct"] .vntsj-cine__city--kos{opacity:.68;transform:translateX(0);}
.vntsj-root .vntsj-cine__garage{
    position:absolute;
    left:50%;
    bottom:110px;
    width:min(330px,42%);
    height:174px;
    transform:translateX(-50%) translateY(36px);
    border-radius:24px 24px 6px 6px;
    border:1px solid rgba(255,255,255,.13);
    background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.035));
    box-shadow:0 20px 60px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.09);
    opacity:0;
    z-index:5;
    transition:opacity .55s ease, transform .72s var(--vntsj-ease);
}
.vntsj-root .vntsj-cine__garage-sign{
    position:absolute;
    top:16px;
    left:18px;
    right:18px;
    padding:9px 12px;
    border-radius:999px;
    background:linear-gradient(90deg,rgba(255,255,255,.18),rgba(255,255,255,.06));
    color:#fff;
    font-size:11px;
    font-weight:900;
    letter-spacing:.16em;
    text-align:center;
}
.vntsj-root .vntsj-cine__door{
    position:absolute;
    left:34px;
    right:34px;
    bottom:0;
    height:88px;
    border-radius:16px 16px 0 0;
    background:repeating-linear-gradient(0deg,rgba(255,255,255,.09) 0 2px,rgba(255,255,255,.03) 2px 14px);
    border:1px solid rgba(255,255,255,.09);
}
.vntsj-root .vntsj-cine__lift{
    position:absolute;
    right:28px;
    bottom:68px;
    width:50px;
    height:3px;
    background:rgba(255,255,255,.7);
    box-shadow:0 20px 0 rgba(255,255,255,.35), -100px 0 0 rgba(255,255,255,.25), -100px 20px 0 rgba(255,255,255,.18);
    opacity:.75;
}
.vntsj-root[data-vntsj-transport-step="2"] .vntsj-cine__garage,
.vntsj-root[data-vntsj-transport-step="3"] .vntsj-cine__garage{
    opacity:1;
    transform:translateX(-50%) translateY(0);
}
.vntsj-root[data-vntsj-route-mode="direct"][data-vntsj-transport-step="2"] .vntsj-cine__garage{
    opacity:.58;
}
.vntsj-root[data-vntsj-route-mode="direct"][data-vntsj-transport-step="3"] .vntsj-cine__garage{
    opacity:0;
    transform:translateX(-50%) translateY(40px);
}
.vntsj-root .vntsj-cine__road{
    position:absolute;
    left:-8%;
    right:-8%;
    bottom:0;
    height:132px;
    background:
        linear-gradient(180deg,rgba(255,255,255,.03),rgba(0,0,0,.42)),
        linear-gradient(90deg,#111,#2b2c31 44%,#0b0c0f);
    z-index:7;
    transform:perspective(520px) rotateX(54deg);
    transform-origin:bottom center;
}
.vntsj-root .vntsj-cine__road span{
    position:absolute;
    left:0;
    right:0;
    top:48%;
    height:3px;
    background:repeating-linear-gradient(90deg,rgba(255,255,255,.72) 0 58px,transparent 58px 104px);
    opacity:.55;
    animation:vntsjRoadMove 1.1s linear infinite;
}
@keyframes vntsjRoadMove{to{transform:translateX(-104px)}}
.vntsj-root .vntsj-cine__route-line{
    position:absolute;
    left:15%;
    right:15%;
    top:44%;
    height:2px;
    z-index:6;
    opacity:0;
    transform:translateY(-18px);
    transition:opacity .5s ease, transform .5s ease;
}
.vntsj-root .vntsj-cine__route-line::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);
    box-shadow:0 0 24px rgba(255,255,255,.55);
}
.vntsj-root .vntsj-cine__route-line i{
    position:absolute;
    top:-5px;
    width:12px;
    height:12px;
    border-radius:999px;
    background:#fff;
    box-shadow:0 0 20px rgba(255,255,255,.8);
}
.vntsj-root .vntsj-cine__route-line i:nth-child(1){left:0}
.vntsj-root .vntsj-cine__route-line i:nth-child(2){left:50%}
.vntsj-root .vntsj-cine__route-line i:nth-child(3){right:0}
.vntsj-root[data-vntsj-transport-step="1"] .vntsj-cine__route-line{opacity:1;transform:translateY(0);}
.vntsj-root .vntsj-cine__car-wrap{
    position:absolute;
    left:50%;
    bottom:63px;
    width:min(430px,52vw);
    z-index:12;
    transform:translateX(-50%) translateY(0) scale(1);
    filter:drop-shadow(0 35px 38px rgba(0,0,0,.58));
    transition:transform .72s var(--vntsj-ease), filter .55s ease, opacity .45s ease;
}
.vntsj-root .vntsj-cine__car{
    display:block;
    width:100%;
    height:auto;
    transform:translateZ(0);
    animation:vntsjCineIdle 2.7s ease-in-out infinite;
}
@keyframes vntsjCineIdle{50%{transform:translateY(-5px) rotate(-.35deg)}}
.vntsj-root[data-vntsj-transport-step="0"] .vntsj-cine__car-wrap{transform:translateX(-78%) translateY(6px) scale(.82);}
.vntsj-root[data-vntsj-transport-step="1"] .vntsj-cine__car-wrap{transform:translateX(-5%) translateY(-8px) scale(.74);filter:drop-shadow(0 18px 18px rgba(0,0,0,.44)) blur(.15px);}
.vntsj-root[data-vntsj-transport-step="2"] .vntsj-cine__car-wrap{transform:translateX(-50%) translateY(0) scale(.92);}
.vntsj-root[data-vntsj-transport-step="3"] .vntsj-cine__car-wrap{transform:translateX(2%) translateY(8px) scale(.86);}
.vntsj-root[data-vntsj-route-mode="direct"][data-vntsj-transport-step="2"] .vntsj-cine__car-wrap{transform:translateX(-56%) translateY(0) scale(.90);}
.vntsj-root[data-vntsj-route-mode="direct"][data-vntsj-transport-step="3"] .vntsj-cine__car-wrap{transform:translateX(18%) translateY(5px) scale(.82);}
.vntsj-root .vntsj-cine__worker,
.vntsj-root .vntsj-cine__customer{
    position:absolute;
    bottom:82px;
    width:54px;
    height:122px;
    z-index:14;
    opacity:0;
    transform:translateY(16px) scale(.9);
    transition:opacity .45s ease, transform .6s var(--vntsj-ease), left .65s var(--vntsj-ease), right .65s var(--vntsj-ease);
}
.vntsj-root .vntsj-cine__worker{left:31%;}
.vntsj-root .vntsj-cine__customer{right:22%;}
.vntsj-root .vntsj-cine__head{
    position:absolute;
    top:0;
    left:17px;
    width:22px;
    height:22px;
    border-radius:999px;
    background:linear-gradient(180deg,#f2f2f2,#9c9c9c);
}
.vntsj-root .vntsj-cine__body{
    position:absolute;
    top:27px;
    left:18px;
    width:20px;
    height:52px;
    border-radius:13px 13px 7px 7px;
    background:linear-gradient(180deg,#fff,#757575);
}
.vntsj-root .vntsj-cine__worker .vntsj-cine__body{
    background:linear-gradient(180deg,#d91a1a,#650909);
}
.vntsj-root .vntsj-cine__arm{
    position:absolute;
    top:34px;
    left:33px;
    width:34px;
    height:8px;
    border-radius:999px;
    background:#d9d9d9;
    transform-origin:left center;
    transform:rotate(-18deg);
}
.vntsj-root .vntsj-cine__leg{
    position:absolute;
    top:76px;
    left:21px;
    width:8px;
    height:42px;
    border-radius:999px;
    background:#ddd;
    transform-origin:top center;
}
.vntsj-root .vntsj-cine__leg--a{transform:rotate(8deg);}
.vntsj-root .vntsj-cine__leg--b{left:30px;transform:rotate(-10deg);}
.vntsj-root[data-vntsj-transport-step="2"] .vntsj-cine__worker{
    opacity:1;
    transform:translateY(0) scale(1);
}
.vntsj-root[data-vntsj-transport-step="3"] .vntsj-cine__customer{
    opacity:1;
    transform:translateY(0) scale(1);
}
.vntsj-root[data-vntsj-transport-step="2"] .vntsj-cine__worker .vntsj-cine__arm{
    animation:vntsjInspectArm 1.3s ease-in-out infinite;
}
@keyframes vntsjInspectArm{50%{transform:rotate(15deg) translateX(7px)}}
.vntsj-root[data-vntsj-transport-step="3"] .vntsj-cine__customer .vntsj-cine__leg--a{animation:vntsjWalkA .75s ease-in-out infinite;}
.vntsj-root[data-vntsj-transport-step="3"] .vntsj-cine__customer .vntsj-cine__leg--b{animation:vntsjWalkB .75s ease-in-out infinite;}
@keyframes vntsjWalkA{50%{transform:rotate(-18deg)}}
@keyframes vntsjWalkB{50%{transform:rotate(16deg)}}
.vntsj-root .vntsj-cine__hud{
    position:absolute;
    left:22px;
    top:22px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(0,0,0,.34);
    backdrop-filter:blur(16px);
    z-index:20;
}
.vntsj-root .vntsj-cine__hud span{
    color:rgba(255,255,255,.62);
    font-size:11px;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
}
.vntsj-root .vntsj-cine__hud strong{
    color:#fff;
    font-size:12px;
    font-weight:900;
}
.vntsj-root .vntsj-cine__location{
    position:absolute;
    right:22px;
    top:22px;
    z-index:20;
    padding:10px 12px;
    border-radius:999px;
    color:#fff;
    font-size:12px;
    font-weight:900;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(200,18,18,.28);
    backdrop-filter:blur(14px);
}
.vntsj-root .vntsj-cine__panel{
    display:grid;
    grid-template-columns:auto 1fr;
    gap:18px;
    align-items:center;
    padding:18px 20px;
    border-radius:24px;
    border:1px solid rgba(255,255,255,.11);
    background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.025));
    box-shadow:0 18px 44px rgba(0,0,0,.28);
    text-align:left;
}
.vntsj-root .vntsj-cine__counter{
    width:74px;
    height:74px;
    border-radius:22px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.05));
    border:1px solid rgba(255,255,255,.14);
    color:#fff;
}
.vntsj-root .vntsj-cine__counter span{
    font-family:var(--vntsj-display);
    font-size:28px;
    line-height:1;
    font-weight:900;
}
.vntsj-root .vntsj-cine__counter em{
    color:rgba(255,255,255,.5);
    font-style:normal;
    font-size:12px;
}
.vntsj-root .vntsj-cine__panel h3{
    margin:0 0 6px;
    font-family:var(--vntsj-display);
    font-size:clamp(24px,3vw,42px);
    line-height:1;
    color:#fff;
    letter-spacing:-.04em;
}
.vntsj-root .vntsj-cine__panel p{
    margin:0;
    color:rgba(255,255,255,.73);
    line-height:1.65;
    max-width:860px;
}
.vntsj-root .vntsj-cine__progress{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
}
.vntsj-root .vntsj-cine__dot{
    appearance:none;
    border:1px solid rgba(255,255,255,.1);
    background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018));
    color:#fff;
    padding:13px 12px;
    border-radius:18px;
    text-align:left;
    cursor:pointer;
    opacity:.68;
    transition:opacity .3s ease, transform .3s var(--vntsj-ease), border-color .3s ease, background .3s ease;
}
.vntsj-root .vntsj-cine__dot span{
    display:inline-flex;
    width:28px;
    height:28px;
    border-radius:999px;
    align-items:center;
    justify-content:center;
    margin-bottom:9px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.11);
    font-size:10px;
    font-weight:900;
}
.vntsj-root .vntsj-cine__dot strong{
    display:block;
    font-size:13px;
    line-height:1.2;
    margin-bottom:4px;
}
.vntsj-root .vntsj-cine__dot em{
    display:block;
    font-style:normal;
    font-size:11px;
    line-height:1.35;
    color:rgba(255,255,255,.55);
}
.vntsj-root .vntsj-cine__dot.is-active,
.vntsj-root .vntsj-cine__dot.is-complete{
    opacity:1;
}
.vntsj-root .vntsj-cine__dot.is-active{
    transform:translateY(-4px);
    border-color:rgba(255,255,255,.28);
    background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04));
    box-shadow:0 16px 30px rgba(0,0,0,.24);
}
.vntsj-root .vntsj-cine__dot.is-complete span{
    background:rgba(200,18,18,.38);
}
.vntsj-root .vntsj-transport__map--hidden{
    position:absolute;
    width:1px;
    height:1px;
    opacity:0;
    pointer-events:none;
}
.vntsj-root .vntsj-transport__readout--cinematic{
    margin-top:0;
}
@media (max-width: 900px){
    .vntsj-root .vntsj-cine__viewport{height:430px;border-radius:24px;}
    .vntsj-root .vntsj-cine__progress{grid-template-columns:repeat(2,minmax(0,1fr));}
    .vntsj-root .vntsj-cine__garage{width:min(310px,70%);}
    .vntsj-root .vntsj-cine__car-wrap{width:min(380px,72vw);}
    .vntsj-root .vntsj-cine__worker{left:22%;}
    .vntsj-root .vntsj-cine__customer{right:10%;}
}
@media (max-width: 620px){
    .vntsj-root .vntsj-cine__viewport{height:390px;border-radius:20px;}
    .vntsj-root .vntsj-cine__hud,
    .vntsj-root .vntsj-cine__location{
        top:14px;
        left:14px;
        right:auto;
        max-width:calc(100% - 28px);
    }
    .vntsj-root .vntsj-cine__location{top:58px;}
    .vntsj-root .vntsj-cine__panel{
        grid-template-columns:1fr;
        gap:12px;
        padding:16px;
    }
    .vntsj-root .vntsj-cine__counter{
        width:64px;
        height:64px;
        border-radius:18px;
    }
    .vntsj-root .vntsj-cine__progress{grid-template-columns:1fr;}
    .vntsj-root .vntsj-cine__dot{
        display:grid;
        grid-template-columns:auto 1fr;
        column-gap:10px;
        align-items:center;
    }
    .vntsj-root .vntsj-cine__dot span{grid-row:1 / span 2;margin:0;}
    .vntsj-root .vntsj-cine__car-wrap{bottom:66px;width:86vw;}
    .vntsj-root[data-vntsj-transport-step="0"] .vntsj-cine__car-wrap{transform:translateX(-78%) translateY(14px) scale(.74);}
    .vntsj-root[data-vntsj-transport-step="1"] .vntsj-cine__car-wrap{transform:translateX(-10%) translateY(2px) scale(.64);}
    .vntsj-root[data-vntsj-transport-step="2"] .vntsj-cine__car-wrap{transform:translateX(-50%) translateY(12px) scale(.75);}
    .vntsj-root[data-vntsj-transport-step="3"] .vntsj-cine__car-wrap{transform:translateX(-8%) translateY(10px) scale(.67);}
    .vntsj-root .vntsj-cine__worker{left:15%;bottom:78px;}
    .vntsj-root .vntsj-cine__customer{right:2%;bottom:78px;}
}


/* =============================================================
   AUTO PERGAMINOS JOURNEY v2.7.1 — STEP 5 DETAIL / DIFFERENTIATION
   Keep the v2.7 cinematic look, but make the two route stories feel
   more different and more detailed.
   ============================================================= */
.vntsj-root .vntsj-cine__meta{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:0 0 10px;
}
.vntsj-root .vntsj-cine__badge{
    display:inline-flex;
    align-items:center;
    min-height:30px;
    padding:7px 12px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.10);
    color:#fff;
    font-size:10px;
    font-weight:900;
    letter-spacing:.18em;
    text-transform:uppercase;
}
.vntsj-root .vntsj-cine__badge--soft{
    background:rgba(255,255,255,.05);
    color:rgba(255,255,255,.82);
}

/* Route-specific atmosphere */
.vntsj-root[data-vntsj-route-mode="pergaminos"] .vntsj-cine__viewport{
    background:
        radial-gradient(circle at 68% 10%, rgba(255,255,255,.12), transparent 28%),
        linear-gradient(180deg, #131417 0%, #090a0d 55%, #040506 100%);
}
.vntsj-root[data-vntsj-route-mode="direct"] .vntsj-cine__viewport{
    background:
        radial-gradient(circle at 18% 14%, rgba(255,255,255,.10), transparent 24%),
        linear-gradient(180deg, #0f141a 0%, #081017 52%, #030506 100%);
}
.vntsj-root[data-vntsj-route-mode="pergaminos"] .vntsj-cine__hud,
.vntsj-root[data-vntsj-route-mode="pergaminos"] .vntsj-cine__location{
    border-color:rgba(200,18,18,.34);
    box-shadow:0 0 0 1px rgba(200,18,18,.12) inset, 0 16px 30px rgba(0,0,0,.24);
}
.vntsj-root[data-vntsj-route-mode="direct"] .vntsj-cine__hud,
.vntsj-root[data-vntsj-route-mode="direct"] .vntsj-cine__location{
    border-color:rgba(120,180,255,.26);
    box-shadow:0 0 0 1px rgba(120,180,255,.10) inset, 0 16px 30px rgba(0,0,0,.24);
}
.vntsj-root[data-vntsj-route-mode="pergaminos"] .vntsj-cine__badge{
    background:linear-gradient(90deg, rgba(200,18,18,.34), rgba(255,255,255,.09));
}
.vntsj-root[data-vntsj-route-mode="direct"] .vntsj-cine__badge{
    background:linear-gradient(90deg, rgba(70,120,190,.30), rgba(255,255,255,.07));
}

/* Pergaminos route keeps the abroad + garage story */
.vntsj-root[data-vntsj-route-mode="pergaminos"] .vntsj-cine__city--foreign{opacity:1;}
.vntsj-root[data-vntsj-route-mode="pergaminos"][data-vntsj-transport-step="0"] .vntsj-cine__city--foreign{opacity:1; transform:translateX(0); filter:none;}
.vntsj-root[data-vntsj-route-mode="pergaminos"][data-vntsj-transport-step="1"] .vntsj-cine__route-line{opacity:1; transform:translateY(0) scaleX(1);}
.vntsj-root[data-vntsj-route-mode="pergaminos"][data-vntsj-transport-step="2"] .vntsj-cine__garage,
.vntsj-root[data-vntsj-route-mode="pergaminos"][data-vntsj-transport-step="3"] .vntsj-cine__garage{opacity:1; transform:translateX(-50%) translateY(0) scale(1);}
.vntsj-root[data-vntsj-route-mode="pergaminos"][data-vntsj-transport-step="2"] .vntsj-cine__worker{opacity:1; transform:translateY(0) scale(1);}
.vntsj-root[data-vntsj-route-mode="pergaminos"][data-vntsj-transport-step="3"] .vntsj-cine__customer{opacity:1; transform:translateY(0) scale(1);}
.vntsj-root[data-vntsj-route-mode="pergaminos"][data-vntsj-transport-step="3"] .vntsj-cine__customer{right:20%;}

/* Direct route should feel cleaner / faster and not like the same Pergaminos pickup story */
.vntsj-root[data-vntsj-route-mode="direct"] .vntsj-cine__garage{opacity:0 !important; transform:translateX(-50%) translateY(48px) scale(.92) !important;}
.vntsj-root[data-vntsj-route-mode="direct"] .vntsj-cine__city--foreign{opacity:0 !important; transform:translateX(-180px) !important;}
.vntsj-root[data-vntsj-route-mode="direct"] .vntsj-cine__city--kos{opacity:.38; transform:translateX(12px); filter:blur(.3px);}
.vntsj-root[data-vntsj-route-mode="direct"] .vntsj-cine__route-line{top:40%; opacity:.58; transform:translateY(-4px) scaleX(.84);}
.vntsj-root[data-vntsj-route-mode="direct"][data-vntsj-transport-step="1"] .vntsj-cine__worker{opacity:1; transform:translateY(0) scale(1); left:42%;}
.vntsj-root[data-vntsj-route-mode="direct"][data-vntsj-transport-step="2"] .vntsj-cine__worker{opacity:0; transform:translateY(12px) scale(.95);}
.vntsj-root[data-vntsj-route-mode="direct"][data-vntsj-transport-step="2"] .vntsj-cine__route-line{opacity:1; transform:translateY(0) scaleX(1.1);}
.vntsj-root[data-vntsj-route-mode="direct"][data-vntsj-transport-step="2"] .vntsj-cine__customer{opacity:0;}
.vntsj-root[data-vntsj-route-mode="direct"][data-vntsj-transport-step="3"] .vntsj-cine__customer{opacity:1; transform:translateY(0) scale(1); right:11%;}
.vntsj-root[data-vntsj-route-mode="direct"][data-vntsj-transport-step="3"] .vntsj-cine__worker{opacity:0;}

/* Make car path feel more distinct between routes */
.vntsj-root[data-vntsj-route-mode="pergaminos"][data-vntsj-transport-step="0"] .vntsj-cine__car-wrap{transform:translateX(-80%) translateY(14px) scale(.76);}
.vntsj-root[data-vntsj-route-mode="pergaminos"][data-vntsj-transport-step="1"] .vntsj-cine__car-wrap{transform:translateX(-10%) translateY(-8px) scale(.68);}
.vntsj-root[data-vntsj-route-mode="pergaminos"][data-vntsj-transport-step="2"] .vntsj-cine__car-wrap{transform:translateX(-52%) translateY(2px) scale(.92);}
.vntsj-root[data-vntsj-route-mode="pergaminos"][data-vntsj-transport-step="3"] .vntsj-cine__car-wrap{transform:translateX(4%) translateY(8px) scale(.80);}
.vntsj-root[data-vntsj-route-mode="direct"][data-vntsj-transport-step="0"] .vntsj-cine__car-wrap{transform:translateX(-54%) translateY(8px) scale(.88);}
.vntsj-root[data-vntsj-route-mode="direct"][data-vntsj-transport-step="1"] .vntsj-cine__car-wrap{transform:translateX(-42%) translateY(4px) scale(.95);}
.vntsj-root[data-vntsj-route-mode="direct"][data-vntsj-transport-step="2"] .vntsj-cine__car-wrap{transform:translateX(22%) translateY(-12px) scale(.70); opacity:.94;}
.vntsj-root[data-vntsj-route-mode="direct"][data-vntsj-transport-step="3"] .vntsj-cine__car-wrap{transform:translateX(-2%) translateY(10px) scale(.84);}

/* Button / dots detail */
.vntsj-root .vntsj-cine__dot{
    border-color:rgba(255,255,255,.11);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.vntsj-root .vntsj-cine__dot strong{letter-spacing:-.01em;}
.vntsj-root[data-vntsj-route-mode="direct"] .vntsj-cine__dot.is-active{
    box-shadow:0 18px 34px rgba(0,0,0,.24), 0 0 0 1px rgba(120,180,255,.15) inset;
}
.vntsj-root[data-vntsj-route-mode="pergaminos"] .vntsj-cine__dot.is-active{
    box-shadow:0 18px 34px rgba(0,0,0,.24), 0 0 0 1px rgba(200,18,18,.16) inset;
}

@media (max-width: 900px){
    .vntsj-root[data-vntsj-route-mode="direct"][data-vntsj-transport-step="1"] .vntsj-cine__worker{left:34%;}
    .vntsj-root[data-vntsj-route-mode="direct"][data-vntsj-transport-step="3"] .vntsj-cine__customer{right:6%;}
}
@media (max-width: 620px){
    .vntsj-root .vntsj-cine__meta{margin-bottom:8px;}
    .vntsj-root .vntsj-cine__badge{font-size:9px;padding:6px 9px;letter-spacing:.12em;}
    .vntsj-root[data-vntsj-route-mode="direct"][data-vntsj-transport-step="1"] .vntsj-cine__worker{left:26%;}
}


/* =============================================================
   AUTO PERGAMINOS JOURNEY v2.7.2 — STEP 5 SLIDER LAYOUT + HEIGHT
   Make Step 5 taller, more comfortable, and more slider-like so the
   scene controls are easier to use and sit higher.
   ============================================================= */
.vntsj-root:not(.is-fullscreen)[data-vntsj-current-scene="5"]{
    min-height:1860px !important;
}
.vntsj-root .vntsj-scene--transport{
    padding-top:clamp(42px,4.8vw,74px) !important;
    padding-bottom:clamp(150px,12vw,210px) !important;
}
.vntsj-root .vntsj-scene--transport .vntsj-scene__inner{
    display:grid !important;
    width:min(100%,1120px) !important;
    max-width:1120px !important;
    gap:18px !important;
}
.vntsj-root .vntsj-scene--transport .vntsj-scene__inner > .vntsj-step-tag{order:1;}
.vntsj-root .vntsj-scene--transport .vntsj-scene__inner > .vntsj-h2{order:2;}
.vntsj-root .vntsj-scene--transport .vntsj-scene__inner > .vntsj-sub{order:3; max-width:940px; margin-inline:auto;}
.vntsj-root .vntsj-scene--transport .vntsj-scene__inner > .vntsj-cine{order:4;}
.vntsj-root .vntsj-scene--transport .vntsj-scene__inner > .vntsj-action-row{
    order:5;
    justify-self:center;
    margin-top:0 !important;
    padding:14px 16px;
    border-radius:22px;
    border:1px solid rgba(255,255,255,.11);
    background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
    box-shadow:0 20px 50px rgba(0,0,0,.22);
    position:relative;
    z-index:6;
}
.vntsj-root .vntsj-scene--transport .vntsj-scene__inner > .vntsj-transport__map{order:6;}

.vntsj-root .vntsj-cine{
    gap:16px;
}
.vntsj-root .vntsj-cine__viewport{
    height:clamp(470px, 58vw, 690px);
    border-radius:34px;
    box-shadow:0 40px 110px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.08);
}
.vntsj-root .vntsj-cine__panel{
    padding:20px 22px;
    border-radius:26px;
}
.vntsj-root .vntsj-cine__counter{
    width:82px;
    height:82px;
    border-radius:24px;
}
.vntsj-root .vntsj-cine__counter span{
    font-size:32px;
}
.vntsj-root .vntsj-cine__panel h3{
    font-size:clamp(26px,3.2vw,46px);
}
.vntsj-root .vntsj-cine__panel p{
    font-size:14.2px;
    color:rgba(255,255,255,.78);
}

/* slider rail for substeps */
.vntsj-root .vntsj-cine__progress{
    display:flex !important;
    flex-wrap:nowrap !important;
    overflow-x:auto;
    overflow-y:hidden;
    gap:12px !important;
    padding:4px 2px 6px;
    scroll-snap-type:x mandatory;
    scrollbar-width:thin;
    scrollbar-color:rgba(255,255,255,.22) transparent;
    -webkit-overflow-scrolling:touch;
}
.vntsj-root .vntsj-cine__progress::-webkit-scrollbar{height:8px;}
.vntsj-root .vntsj-cine__progress::-webkit-scrollbar-track{background:transparent;}
.vntsj-root .vntsj-cine__progress::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:999px;}
.vntsj-root .vntsj-cine__dot{
    flex:0 0 260px;
    min-height:120px;
    padding:14px 14px 15px;
    scroll-snap-align:center;
    border-radius:20px;
    opacity:.82;
}
.vntsj-root .vntsj-cine__dot strong{
    font-size:13.5px;
    line-height:1.25;
}
.vntsj-root .vntsj-cine__dot em{
    margin-top:4px;
    font-size:11.5px;
    line-height:1.45;
}
.vntsj-root .vntsj-cine__dot.is-active{
    transform:translateY(-5px) scale(1.01);
}
.vntsj-root .vntsj-cine__dot.is-complete span{
    background:rgba(255,255,255,.14);
}

.vntsj-root .vntsj-transport__readout--cinematic{
    margin-top:2px;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:12px;
}
.vntsj-root .vntsj-transport__readout--cinematic > div{
    min-height:72px;
    padding:14px 16px;
    border-radius:18px;
    border:1px solid rgba(255,255,255,.08);
    background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}

.vntsj-root .vntsj-scene--transport .vntsj-action-row .vntsj-action{
    min-height:54px;
    padding:15px 22px;
    border-radius:16px;
}
.vntsj-root .vntsj-scene--transport .vntsj-action-row .vntsj-action--primary{
    box-shadow:0 16px 34px rgba(0,0,0,.24);
}

/* more breathing room for cinematic actors/details */
.vntsj-root .vntsj-cine__city{bottom:126px;}
.vntsj-root .vntsj-cine__garage{bottom:124px;}
.vntsj-root .vntsj-cine__road{height:144px;}
.vntsj-root .vntsj-cine__car-wrap{bottom:72px;}
.vntsj-root .vntsj-cine__worker,
.vntsj-root .vntsj-cine__customer{bottom:92px;}

@media (max-width: 1100px){
    .vntsj-root:not(.is-fullscreen)[data-vntsj-current-scene="5"]{min-height:1760px !important;}
    .vntsj-root .vntsj-cine__viewport{height:clamp(450px, 60vw, 620px);}
    .vntsj-root .vntsj-cine__dot{flex-basis:240px;}
}
@media (max-width: 900px){
    .vntsj-root:not(.is-fullscreen)[data-vntsj-current-scene="5"]{min-height:1700px !important;}
    .vntsj-root .vntsj-scene--transport{padding-top:36px !important; padding-bottom:144px !important;}
    .vntsj-root .vntsj-cine__viewport{height:520px;border-radius:28px;}
    .vntsj-root .vntsj-cine__panel{padding:18px;}
    .vntsj-root .vntsj-cine__dot{flex:0 0 220px; min-height:112px;}
    .vntsj-root .vntsj-transport__readout--cinematic{grid-template-columns:1fr !important;}
    .vntsj-root .vntsj-scene--transport .vntsj-action-row{
        width:min(100%, 860px);
        justify-content:center;
        flex-wrap:wrap;
    }
}
@media (max-width: 620px){
    .vntsj-root:not(.is-fullscreen)[data-vntsj-current-scene="5"]{min-height:1640px !important;}
    .vntsj-root .vntsj-scene--transport{padding-top:30px !important; padding-bottom:128px !important;}
    .vntsj-root .vntsj-cine__viewport{height:460px;border-radius:22px;}
    .vntsj-root .vntsj-cine__panel{padding:16px;border-radius:20px;}
    .vntsj-root .vntsj-cine__counter{width:70px;height:70px;border-radius:20px;}
    .vntsj-root .vntsj-cine__counter span{font-size:28px;}
    .vntsj-root .vntsj-cine__dot{flex:0 0 84vw; min-height:106px;}
    .vntsj-root .vntsj-scene--transport .vntsj-action-row{
        width:100%;
        padding:12px;
        border-radius:18px;
        justify-content:stretch;
    }
    .vntsj-root .vntsj-scene--transport .vntsj-action-row .vntsj-action{
        flex:1 1 calc(50% - 8px);
        justify-content:center;
    }
    .vntsj-root .vntsj-scene--transport .vntsj-action-row .vntsj-action[data-vntsj-next]{
        flex-basis:100%;
    }
}


/* =============================================================
   AUTO PERGAMINOS JOURNEY v2.7.3 — STEP 5 TRUE SLIDER + LESS HEIGHT
   Substeps behave like a slider with arrow navigation, less excessive
   vertical space, and the viewport is kept in view on every next action.
   ============================================================= */
.vntsj-root:not(.is-fullscreen)[data-vntsj-current-scene="5"]{
    min-height:1440px !important;
}
.vntsj-root .vntsj-scene--transport{
    padding-top:clamp(28px, 3vw, 44px) !important;
    padding-bottom:clamp(110px, 8vw, 150px) !important;
}
.vntsj-root .vntsj-scene--transport .vntsj-scene__inner{
    width:min(100%,1040px) !important;
    max-width:1040px !important;
    gap:14px !important;
}
.vntsj-root .vntsj-cine{
    gap:12px !important;
}
.vntsj-root .vntsj-cine__viewport{
    height:clamp(420px, 48vw, 560px) !important;
    border-radius:28px !important;
}
.vntsj-root .vntsj-cine__panel{
    padding:18px 20px !important;
}
.vntsj-root .vntsj-cine__panel h3{
    font-size:clamp(24px,2.7vw,38px) !important;
}
.vntsj-root .vntsj-cine__panel p{
    font-size:13.4px !important;
    line-height:1.55 !important;
}

/* true slider area: one slide visible at a time */
.vntsj-root .vntsj-cine__progress{
    display:flex !important;
    flex-wrap:nowrap !important;
    gap:0 !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    scrollbar-width:none;
    -ms-overflow-style:none;
    padding:0 !important;
    border-radius:22px;
}
.vntsj-root .vntsj-cine__progress::-webkit-scrollbar{display:none;}
.vntsj-root .vntsj-cine__dot{
    flex:0 0 100% !important;
    width:100% !important;
    min-height:118px !important;
    padding:16px 18px !important;
    scroll-snap-align:start;
    opacity:1 !important;
    border-radius:22px !important;
    transform:none !important;
    box-shadow:none !important;
}
.vntsj-root .vntsj-cine__dot + .vntsj-cine__dot{
    margin-left:12px;
}
.vntsj-root .vntsj-cine__dot strong{
    font-size:15px !important;
}
.vntsj-root .vntsj-cine__dot em{
    margin-top:6px;
    font-size:12px !important;
    line-height:1.5 !important;
}
.vntsj-root .vntsj-cine__dot.is-active{
    border-color:rgba(255,255,255,.26) !important;
    background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04)) !important;
    box-shadow:0 18px 34px rgba(0,0,0,.22) !important;
}
.vntsj-root .vntsj-cine__dot.is-complete:not(.is-active){
    background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)) !important;
}

/* action row closer and more compact */
.vntsj-root .vntsj-action-row--transport{
    margin-top:2px !important;
    padding:10px 12px !important;
    border-radius:18px !important;
    display:flex !important;
    align-items:center;
    justify-content:center;
    gap:10px !important;
    flex-wrap:wrap;
}
.vntsj-root .vntsj-action-row--transport .vntsj-action{
    min-height:50px !important;
    padding:13px 18px !important;
    border-radius:15px !important;
}
.vntsj-root .vntsj-action-row--transport .vntsj-action--slider-nav{
    min-width:124px;
}
.vntsj-root .vntsj-action-row--transport .vntsj-action[data-vntsj-next]{
    min-width:154px;
}
.vntsj-root .vntsj-action-row--transport .vntsj-action[data-vntsj-prev]{
    opacity:.86;
}

.vntsj-root .vntsj-transport__readout--cinematic{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:10px !important;
}
.vntsj-root .vntsj-transport__readout--cinematic > div{
    min-height:64px !important;
    padding:12px 14px !important;
}

/* trim extra bottom spacing in the cinematic actors */
.vntsj-root .vntsj-cine__city{bottom:118px !important;}
.vntsj-root .vntsj-cine__garage{bottom:116px !important;}
.vntsj-root .vntsj-cine__car-wrap{bottom:66px !important;}
.vntsj-root .vntsj-cine__worker,
.vntsj-root .vntsj-cine__customer{bottom:84px !important;}
.vntsj-root .vntsj-cine__road{height:136px !important;}

@media (max-width: 900px){
    .vntsj-root:not(.is-fullscreen)[data-vntsj-current-scene="5"]{min-height:1380px !important;}
    .vntsj-root .vntsj-cine__viewport{height:460px !important;border-radius:24px !important;}
    .vntsj-root .vntsj-action-row--transport{padding:10px !important;}
    .vntsj-root .vntsj-action-row--transport .vntsj-action[data-vntsj-prev]{display:none !important;}
    .vntsj-root .vntsj-transport__readout--cinematic{grid-template-columns:1fr !important;}
}
@media (max-width: 620px){
    .vntsj-root:not(.is-fullscreen)[data-vntsj-current-scene="5"]{min-height:1320px !important;}
    .vntsj-root .vntsj-scene--transport{padding-top:24px !important;padding-bottom:112px !important;}
    .vntsj-root .vntsj-cine__viewport{height:400px !important;border-radius:20px !important;}
    .vntsj-root .vntsj-cine__panel{padding:15px 16px !important;}
    .vntsj-root .vntsj-cine__panel h3{font-size:26px !important;}
    .vntsj-root .vntsj-action-row--transport{gap:8px !important;}
    .vntsj-root .vntsj-action-row--transport .vntsj-action--slider-nav,
    .vntsj-root .vntsj-action-row--transport .vntsj-action[data-vntsj-next]{
        flex:1 1 calc(50% - 8px);
        min-width:0;
    }
}


/* =============================================================
   AUTO PERGAMINOS JOURNEY v2.7.4 — STEP 5 REFINEMENT
   Buttons directly under cinematic car viewport, clearer substeps,
   less vertical fatigue, more polished spacing/details.
   ============================================================= */
.vntsj-root:not(.is-fullscreen)[data-vntsj-current-scene="5"]{
    min-height:1240px !important;
}
.vntsj-root .vntsj-scene--transport{
    padding-top:clamp(22px,2.4vw,36px) !important;
    padding-bottom:clamp(96px,7vw,128px) !important;
}
.vntsj-root .vntsj-scene--transport .vntsj-scene__inner{
    width:min(100%,1020px) !important;
    max-width:1020px !important;
    gap:10px !important;
}
.vntsj-root .vntsj-scene--transport .vntsj-h2{
    font-size:clamp(38px,4.7vw,72px) !important;
    line-height:.98 !important;
}
.vntsj-root .vntsj-scene--transport .vntsj-sub{
    max-width:820px !important;
    font-size:14.5px !important;
    line-height:1.55 !important;
}
.vntsj-root .vntsj-cine{
    gap:10px !important;
}
.vntsj-root .vntsj-cine__viewport{
    height:clamp(380px,42vw,500px) !important;
    border-radius:26px !important;
    border-color:rgba(255,255,255,.15) !important;
}

/* The navigation is now directly under the vehicle cinematic scene */
.vntsj-root .vntsj-action-row--under-scene{
    margin:0 !important;
    padding:10px !important;
    border-radius:20px !important;
    width:100%;
    display:grid !important;
    grid-template-columns:auto 1fr 1fr auto;
    gap:10px !important;
    align-items:center;
    background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.028)) !important;
    border:1px solid rgba(255,255,255,.12) !important;
    box-shadow:0 18px 42px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
.vntsj-root .vntsj-action-row--under-scene .vntsj-action{
    min-height:48px !important;
    padding:12px 16px !important;
    border-radius:15px !important;
    justify-content:center;
}
.vntsj-root .vntsj-action-row--under-scene .vntsj-action--slider-nav{
    min-width:0 !important;
    width:100%;
}
.vntsj-root .vntsj-action-row--under-scene .vntsj-action[data-vntsj-next]{
    min-width:0 !important;
}
.vntsj-root .vntsj-action-row--under-scene .vntsj-action:disabled{
    opacity:.42;
    cursor:not-allowed;
}

/* Remove old outside row influence */
.vntsj-root .vntsj-scene--transport .vntsj-scene__inner > .vntsj-action-row:not(.vntsj-action-row--under-scene){
    display:none !important;
}

/* Active substep card: clearer but compact */
.vntsj-root .vntsj-cine__panel{
    grid-template-columns:76px 1fr !important;
    gap:16px !important;
    padding:16px 18px !important;
    border-radius:22px !important;
    background:
        linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.032)) !important;
    border-color:rgba(255,255,255,.14) !important;
    box-shadow:0 16px 34px rgba(0,0,0,.22) !important;
}
.vntsj-root .vntsj-cine__counter{
    width:72px !important;
    height:72px !important;
    border-radius:20px !important;
}
.vntsj-root .vntsj-cine__counter span{
    font-size:30px !important;
}
.vntsj-root .vntsj-cine__meta{
    gap:7px !important;
    margin-bottom:8px !important;
}
.vntsj-root .vntsj-cine__badge{
    min-height:28px !important;
    padding:6px 10px !important;
    font-size:9.5px !important;
    letter-spacing:.14em !important;
}
.vntsj-root .vntsj-cine__panel h3{
    margin-bottom:5px !important;
    font-size:clamp(22px,2.55vw,36px) !important;
}
.vntsj-root .vntsj-cine__panel p{
    font-size:13.4px !important;
    line-height:1.55 !important;
    max-width:780px !important;
}

/* Progress as compact clear substep slider, not a long stack */
.vntsj-root .vntsj-cine__progress{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:8px !important;
    overflow:visible !important;
    padding:0 !important;
}
.vntsj-root .vntsj-cine__dot{
    width:auto !important;
    min-width:0 !important;
    flex:none !important;
    min-height:74px !important;
    padding:10px 10px !important;
    border-radius:16px !important;
    display:grid !important;
    grid-template-columns:auto 1fr;
    column-gap:8px;
    align-items:center;
    opacity:.7 !important;
}
.vntsj-root .vntsj-cine__dot + .vntsj-cine__dot{
    margin-left:0 !important;
}
.vntsj-root .vntsj-cine__dot span{
    width:30px !important;
    height:30px !important;
    margin:0 !important;
    grid-row:1 / span 2;
}
.vntsj-root .vntsj-cine__dot strong{
    font-size:11.5px !important;
    line-height:1.15 !important;
    margin:0 !important;
}
.vntsj-root .vntsj-cine__dot em{
    display:none !important;
}
.vntsj-root .vntsj-cine__dot.is-active{
    opacity:1 !important;
    transform:translateY(-2px) !important;
    border-color:rgba(255,255,255,.28) !important;
}
.vntsj-root .vntsj-cine__dot.is-complete:not(.is-active){
    opacity:.9 !important;
}

/* Readout should not push the buttons down */
.vntsj-root .vntsj-transport__readout--cinematic{
    display:none !important;
}

/* Fine cinematic details without extra height */
.vntsj-root .vntsj-cine__hud,
.vntsj-root .vntsj-cine__location{
    top:16px !important;
    padding:9px 11px !important;
}
.vntsj-root .vntsj-cine__city{
    bottom:108px !important;
    height:132px !important;
}
.vntsj-root .vntsj-cine__garage{
    bottom:108px !important;
    height:158px !important;
}
.vntsj-root .vntsj-cine__road{
    height:124px !important;
}
.vntsj-root .vntsj-cine__car-wrap{
    bottom:58px !important;
}
.vntsj-root .vntsj-cine__worker,
.vntsj-root .vntsj-cine__customer{
    bottom:74px !important;
}

@media (max-width:900px){
    .vntsj-root:not(.is-fullscreen)[data-vntsj-current-scene="5"]{
        min-height:1180px !important;
    }
    .vntsj-root .vntsj-cine__viewport{
        height:410px !important;
    }
    .vntsj-root .vntsj-action-row--under-scene{
        grid-template-columns:1fr 1fr 1fr;
    }
    .vntsj-root .vntsj-action-row--under-scene .vntsj-action[data-vntsj-prev]{
        display:none !important;
    }
}
@media (max-width:620px){
    .vntsj-root:not(.is-fullscreen)[data-vntsj-current-scene="5"]{
        min-height:1120px !important;
    }
    .vntsj-root .vntsj-scene--transport{
        padding-top:20px !important;
        padding-bottom:104px !important;
    }
    .vntsj-root .vntsj-cine__viewport{
        height:360px !important;
        border-radius:20px !important;
    }
    .vntsj-root .vntsj-action-row--under-scene{
        grid-template-columns:1fr 1fr;
        padding:9px !important;
        gap:8px !important;
    }
    .vntsj-root .vntsj-action-row--under-scene .vntsj-action[data-vntsj-next]{
        grid-column:1 / -1;
    }
    .vntsj-root .vntsj-cine__panel{
        grid-template-columns:1fr !important;
        gap:10px !important;
        padding:14px !important;
    }
    .vntsj-root .vntsj-cine__counter{
        width:64px !important;
        height:64px !important;
    }
    .vntsj-root .vntsj-cine__progress{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }
    .vntsj-root .vntsj-cine__dot{
        min-height:62px !important;
        padding:9px !important;
    }
}


/* =============================================================
   AUTO PERGAMINOS JOURNEY v2.7.5 — STEP 4/5 DETAIL BOOST
   Clearer route differentiation, more workshop details for the
   Auto Pergaminos route, and stronger direct-route contrast.
   ============================================================= */
.vntsj-root .vntsj-route__text{
    line-height:1.65;
}
.vntsj-root .vntsj-route__meta li{
    line-height:1.55;
}
.vntsj-root [data-vntsj-route="pergaminos"]{
    box-shadow:0 26px 54px rgba(0,0,0,.26), inset 0 0 0 1px rgba(200,18,18,.10);
}
.vntsj-root [data-vntsj-route="direct"]{
    box-shadow:0 26px 54px rgba(0,0,0,.22), inset 0 0 0 1px rgba(120,180,255,.10);
}
.vntsj-root [data-vntsj-route="pergaminos"] .vntsj-route__badge{
    background:rgba(200,18,18,.14);
    border-color:rgba(200,18,18,.22);
}
.vntsj-root [data-vntsj-route="direct"] .vntsj-route__badge{
    background:rgba(110,160,255,.14);
    border-color:rgba(110,160,255,.20);
}

/* New workshop / destination details in step 5 */
.vntsj-root .vntsj-cine__worktools,
.vntsj-root .vntsj-cine__checkboard,
.vntsj-root .vntsj-cine__beacon{
    position:absolute;
    z-index:11;
    opacity:0;
    transition:opacity .45s ease, transform .65s var(--vntsj-ease);
}
.vntsj-root .vntsj-cine__worktools{
    left:14%;
    top:98px;
    width:130px;
    height:54px;
    border-radius:18px;
    border:1px solid rgba(255,255,255,.10);
    background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.02));
    backdrop-filter:blur(10px);
    box-shadow:0 16px 30px rgba(0,0,0,.20);
    transform:translateY(10px);
}
.vntsj-root .vntsj-cine__tool{
    position:absolute;
    display:block;
}
.vntsj-root .vntsj-cine__tool--wrench{
    left:16px; top:18px; width:34px; height:8px; border-radius:999px; background:#d8dde5; transform:rotate(-24deg);
}
.vntsj-root .vntsj-cine__tool--wrench::before,
.vntsj-root .vntsj-cine__tool--wrench::after{
    content:""; position:absolute; background:#d8dde5; border-radius:999px;
}
.vntsj-root .vntsj-cine__tool--wrench::before{left:-6px; top:-4px; width:14px; height:14px; clip-path:polygon(0 48%,35% 0,100% 0,66% 48%,100% 100%,35% 100%);}
.vntsj-root .vntsj-cine__tool--wrench::after{right:-4px; top:-1px; width:8px; height:10px;}
.vntsj-root .vntsj-cine__tool--screwdriver{
    left:56px; top:24px; width:36px; height:4px; border-radius:999px; background:#f6c067; transform:rotate(18deg);
}
.vntsj-root .vntsj-cine__tool--screwdriver::before{content:""; position:absolute; left:-10px; top:-4px; width:14px; height:12px; border-radius:4px; background:#f2f2f2;}
.vntsj-root .vntsj-cine__tool--screwdriver::after{content:""; position:absolute; right:-7px; top:-2px; width:0; height:0; border-left:8px solid #f6c067; border-top:4px solid transparent; border-bottom:4px solid transparent;}
.vntsj-root .vntsj-cine__tool--gear{
    right:14px; top:15px; width:24px; height:24px; border-radius:50%; background:radial-gradient(circle,#cfd5dc 28%,transparent 30%), repeating-conic-gradient(from 0deg,#cfd5dc 0 12deg,#88919b 12deg 24deg);
    box-shadow:0 0 0 4px rgba(207,213,220,.18) inset;
}
.vntsj-root .vntsj-cine__checkboard{
    right:18%;
    top:88px;
    width:86px;
    padding:12px 12px 10px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,.11);
    background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.03));
    backdrop-filter:blur(12px);
    transform:translateY(12px);
}
.vntsj-root .vntsj-cine__checkboard::before{
    content:"CHECK";
    display:block;
    margin-bottom:8px;
    color:rgba(255,255,255,.64);
    font-size:9px;
    font-weight:900;
    letter-spacing:.18em;
}
.vntsj-root .vntsj-cine__checkboard span{
    display:block;
    position:relative;
    height:8px;
    margin-bottom:8px;
    border-radius:999px;
    background:rgba(255,255,255,.12);
}
.vntsj-root .vntsj-cine__checkboard span::before{
    content:"";
    position:absolute;
    left:0; top:50%; width:8px; height:8px; transform:translateY(-50%); border-radius:50%; background:#63d58d; box-shadow:0 0 0 3px rgba(99,213,141,.14);
}
.vntsj-root .vntsj-cine__beacon{
    right:12%;
    bottom:132px;
    width:26px;
    height:26px;
    border-radius:50%;
    background:radial-gradient(circle,#8ec0ff 0 28%,rgba(142,192,255,.25) 29% 52%,transparent 53%);
    box-shadow:0 0 0 10px rgba(142,192,255,.08), 0 0 26px rgba(142,192,255,.30);
    transform:scale(.8);
}
.vntsj-root .vntsj-cine__beacon::before,
.vntsj-root .vntsj-cine__beacon::after{
    content:"";
    position:absolute;
    inset:-10px;
    border-radius:50%;
    border:1px solid rgba(142,192,255,.28);
    animation:vntsjBeaconPulse 2.4s ease-out infinite;
}
.vntsj-root .vntsj-cine__beacon::after{animation-delay:1.2s;}
@keyframes vntsjBeaconPulse {
    0% { transform:scale(.6); opacity:.9; }
    100% { transform:scale(1.35); opacity:0; }
}

/* Pergaminos route = more workshop / collection visuals */
.vntsj-root[data-vntsj-route-mode="pergaminos"] .vntsj-cine__worktools,
.vntsj-root[data-vntsj-route-mode="pergaminos"] .vntsj-cine__checkboard{
    opacity:.94;
}
.vntsj-root[data-vntsj-route-mode="pergaminos"][data-vntsj-transport-step="0"] .vntsj-cine__worktools,
.vntsj-root[data-vntsj-route-mode="pergaminos"][data-vntsj-transport-step="0"] .vntsj-cine__checkboard{
    opacity:0;
}
.vntsj-root[data-vntsj-route-mode="pergaminos"][data-vntsj-transport-step="1"] .vntsj-cine__worktools{
    opacity:.25; transform:translateY(18px) scale(.96);
}
.vntsj-root[data-vntsj-route-mode="pergaminos"][data-vntsj-transport-step="2"] .vntsj-cine__worktools,
.vntsj-root[data-vntsj-route-mode="pergaminos"][data-vntsj-transport-step="2"] .vntsj-cine__checkboard,
.vntsj-root[data-vntsj-route-mode="pergaminos"][data-vntsj-transport-step="3"] .vntsj-cine__worktools,
.vntsj-root[data-vntsj-route-mode="pergaminos"][data-vntsj-transport-step="3"] .vntsj-cine__checkboard{
    opacity:.98; transform:translateY(0);
}
.vntsj-root[data-vntsj-route-mode="pergaminos"] .vntsj-cine__beacon{display:none;}
.vntsj-root[data-vntsj-route-mode="pergaminos"][data-vntsj-transport-step="1"] .vntsj-cine__car-wrap{filter:drop-shadow(0 28px 36px rgba(0,0,0,.54)) blur(.1px);}
.vntsj-root[data-vntsj-route-mode="pergaminos"][data-vntsj-transport-step="2"] .vntsj-cine__worker{left:24%;}
.vntsj-root[data-vntsj-route-mode="pergaminos"][data-vntsj-transport-step="2"] .vntsj-cine__worker::after{opacity:1;}

/* Direct route = no workshop tools, stronger road / destination signal */
.vntsj-root[data-vntsj-route-mode="direct"] .vntsj-cine__worktools,
.vntsj-root[data-vntsj-route-mode="direct"] .vntsj-cine__checkboard,
.vntsj-root[data-vntsj-route-mode="direct"] .vntsj-cine__garage{
    opacity:0 !important;
    pointer-events:none;
}
.vntsj-root[data-vntsj-route-mode="direct"] .vntsj-cine__beacon{
    opacity:0;
    display:block;
}
.vntsj-root[data-vntsj-route-mode="direct"][data-vntsj-transport-step="2"] .vntsj-cine__beacon,
.vntsj-root[data-vntsj-route-mode="direct"][data-vntsj-transport-step="3"] .vntsj-cine__beacon{
    opacity:1; transform:scale(1);
}
.vntsj-root[data-vntsj-route-mode="direct"] .vntsj-cine__route-line::before{
    background:linear-gradient(90deg, transparent, rgba(150,200,255,.95), transparent);
    box-shadow:0 0 22px rgba(142,192,255,.40);
}
.vntsj-root[data-vntsj-route-mode="direct"] .vntsj-cine__route-line i{
    background:#8ec0ff;
    box-shadow:0 0 18px rgba(142,192,255,.62);
}
.vntsj-root[data-vntsj-route-mode="direct"][data-vntsj-transport-step="2"] .vntsj-cine__car-wrap{
    filter:drop-shadow(0 20px 28px rgba(0,0,0,.44)) blur(.2px);
}
.vntsj-root[data-vntsj-route-mode="direct"][data-vntsj-transport-step="3"] .vntsj-cine__customer{
    right:8%;
}

@media (max-width:900px){
    .vntsj-root .vntsj-cine__worktools{left:8%; top:86px; transform:translateY(6px) scale(.94);}
    .vntsj-root .vntsj-cine__checkboard{right:10%; top:84px; transform:translateY(8px) scale(.94);}
    .vntsj-root .vntsj-cine__beacon{right:9%;}
}
@media (max-width:620px){
    .vntsj-root .vntsj-cine__worktools{width:106px; height:48px; left:10px; top:74px;}
    .vntsj-root .vntsj-cine__checkboard{width:72px; right:10px; top:72px; padding:10px 9px 8px;}
    .vntsj-root .vntsj-cine__tool--wrench{left:12px; top:16px; width:28px;}
    .vntsj-root .vntsj-cine__tool--screwdriver{left:46px; top:22px; width:28px;}
    .vntsj-root .vntsj-cine__tool--gear{right:10px; top:14px; width:20px; height:20px;}
    .vntsj-root .vntsj-cine__beacon{right:8%; bottom:116px;}
}


/* =============================================================
   AUTO PERGAMINOS JOURNEY v2.7.6 — TOP CLIPPING / SAFE SPACING FIX
   Fixes top content being cut across multiple steps, especially on
   shorter screens and WordPress containers.
   ============================================================= */

/* give the whole component safer internal top room */
.vntsj-root{
    --vntsj-safe-top: clamp(78px, 8.5vh, 118px);
    --vntsj-safe-bottom: clamp(96px, 9vh, 138px);
    overflow:visible !important;
}

/* stage/scenes must not crop headings, tags or top effects */
.vntsj-root .vntsj-stage,
.vntsj-root .vntsj-scene{
    overflow:visible !important;
}
.vntsj-root .vntsj-scene{
    align-items:flex-start !important;
    padding-top:var(--vntsj-safe-top) !important;
    padding-bottom:var(--vntsj-safe-bottom) !important;
}
.vntsj-root .vntsj-scene__inner{
    transform:none !important;
    margin-top:0 !important;
    padding-top:0 !important;
    overflow:visible !important;
}

/* prevent title ascenders / animated words from being clipped */
.vntsj-root .vntsj-h1,
.vntsj-root .vntsj-h2,
.vntsj-root [data-vntsj-split],
.vntsj-root .vntsj-word{
    overflow:visible !important;
}
.vntsj-root .vntsj-h1,
.vntsj-root .vntsj-h2{
    padding-top:.08em !important;
    padding-bottom:.08em !important;
    line-height:1.04 !important;
}

/* Step tag often sits at the very top: give it its own safe lane */
.vntsj-root .vntsj-step-tag{
    margin-top:0 !important;
    position:relative;
    z-index:12;
}

/* Step-specific safe spacing */
.vntsj-root .vntsj-scene--welcome{
    padding-top:clamp(86px, 9vh, 130px) !important;
}
.vntsj-root .vntsj-scene--select,
.vntsj-root .vntsj-scene--view,
.vntsj-root .vntsj-scene--inspect,
.vntsj-root .vntsj-scene--route,
.vntsj-root .vntsj-scene--transport,
.vntsj-root .vntsj-scene--delivery{
    padding-top:clamp(72px, 8vh, 112px) !important;
}

/* On Step 5 keep the compact refined layout, but stop it from starting too high */
.vntsj-root .vntsj-scene--transport{
    padding-top:clamp(68px, 7.2vh, 102px) !important;
}
.vntsj-root .vntsj-scene--transport .vntsj-scene__inner{
    gap:12px !important;
}
.vntsj-root .vntsj-scene--transport .vntsj-h2{
    line-height:1.02 !important;
}

/* Fixed top UI can overlap content on some WP layouts, reserve space */
.vntsj-root .vntsj-brand,
.vntsj-root .vntsj-progress{
    z-index:60;
}
.vntsj-root .vntsj-brand + .vntsj-progress{
    pointer-events:none;
}

/* More reliable non-fullscreen heights so scenes have room without clipping */
.vntsj-root:not(.is-fullscreen)[data-vntsj-current-scene="0"]{min-height:980px !important;}
.vntsj-root:not(.is-fullscreen)[data-vntsj-current-scene="1"]{min-height:1060px !important;}
.vntsj-root:not(.is-fullscreen)[data-vntsj-current-scene="2"]{min-height:980px !important;}
.vntsj-root:not(.is-fullscreen)[data-vntsj-current-scene="3"]{min-height:1040px !important;}
.vntsj-root:not(.is-fullscreen)[data-vntsj-current-scene="4"]{min-height:1160px !important;}
.vntsj-root:not(.is-fullscreen)[data-vntsj-current-scene="5"]{min-height:1280px !important;}
.vntsj-root:not(.is-fullscreen)[data-vntsj-current-scene="6"]{min-height:1080px !important;}

/* cards/components with glows should not clip at top */
.vntsj-root .vntsj-main-car,
.vntsj-root .vntsj-choice,
.vntsj-root .vntsj-inspect,
.vntsj-root .vntsj-route,
.vntsj-root .vntsj-cine,
.vntsj-root .vntsj-delivery{
    overflow:visible !important;
}

/* keep scene nav below content visually */
.vntsj-root .vntsj-steps{
    z-index:65;
}

/* Tablet */
@media (max-width:900px){
    .vntsj-root{
        --vntsj-safe-top: clamp(86px, 10vh, 126px);
        --vntsj-safe-bottom: 124px;
    }
    .vntsj-root .vntsj-scene{
        padding-top:var(--vntsj-safe-top) !important;
        padding-bottom:var(--vntsj-safe-bottom) !important;
    }
    .vntsj-root .vntsj-h1,
    .vntsj-root .vntsj-h2{
        line-height:1.06 !important;
    }
    .vntsj-root:not(.is-fullscreen)[data-vntsj-current-scene="0"]{min-height:1040px !important;}
    .vntsj-root:not(.is-fullscreen)[data-vntsj-current-scene="1"]{min-height:1180px !important;}
    .vntsj-root:not(.is-fullscreen)[data-vntsj-current-scene="2"]{min-height:1040px !important;}
    .vntsj-root:not(.is-fullscreen)[data-vntsj-current-scene="3"]{min-height:1120px !important;}
    .vntsj-root:not(.is-fullscreen)[data-vntsj-current-scene="4"]{min-height:1280px !important;}
    .vntsj-root:not(.is-fullscreen)[data-vntsj-current-scene="5"]{min-height:1320px !important;}
    .vntsj-root:not(.is-fullscreen)[data-vntsj-current-scene="6"]{min-height:1120px !important;}
}

/* Mobile */
@media (max-width:620px){
    .vntsj-root{
        --vntsj-safe-top: 104px;
        --vntsj-safe-bottom: 118px;
    }
    .vntsj-root .vntsj-scene{
        padding-top:104px !important;
        padding-bottom:118px !important;
    }
    .vntsj-root .vntsj-scene--transport{
        padding-top:102px !important;
    }
    .vntsj-root .vntsj-h1,
    .vntsj-root .vntsj-h2{
        line-height:1.08 !important;
        padding-top:.12em !important;
        padding-bottom:.10em !important;
    }
    .vntsj-root .vntsj-step-tag{
        font-size:10px !important;
        line-height:1.2 !important;
    }
    .vntsj-root:not(.is-fullscreen)[data-vntsj-current-scene="0"]{min-height:1050px !important;}
    .vntsj-root:not(.is-fullscreen)[data-vntsj-current-scene="1"]{min-height:1260px !important;}
    .vntsj-root:not(.is-fullscreen)[data-vntsj-current-scene="2"]{min-height:1080px !important;}
    .vntsj-root:not(.is-fullscreen)[data-vntsj-current-scene="3"]{min-height:1140px !important;}
    .vntsj-root:not(.is-fullscreen)[data-vntsj-current-scene="4"]{min-height:1360px !important;}
    .vntsj-root:not(.is-fullscreen)[data-vntsj-current-scene="5"]{min-height:1320px !important;}
    .vntsj-root:not(.is-fullscreen)[data-vntsj-current-scene="6"]{min-height:1120px !important;}
}


/* =============================================================
   AUTO PERGAMINOS JOURNEY v2.7.7 — SCENE FOCUS + MECHANICAL DETAIL
   Always focus the main scene anchor on scene changes and enrich the
   Step 5 workshop mechanical check visuals.
   ============================================================= */

/* Keep the main top anchor visible and comfortable after scene changes */
.vntsj-root .vntsj-scene__inner{
    scroll-margin-top: 26px;
}
.vntsj-root .vntsj-scene--transport .vntsj-cine__viewport{
    scroll-margin-top: 20px;
}

/* New mechanic-check details in Step 5 */
.vntsj-root .vntsj-cine__diag,
.vntsj-root .vntsj-cine__scanbeam,
.vntsj-root .vntsj-cine__liftarms{
    position:absolute;
    z-index:12;
    opacity:0;
    pointer-events:none;
    transition:opacity .45s ease, transform .7s var(--vntsj-ease);
}
.vntsj-root .vntsj-cine__diag{
    left:10%;
    bottom:180px;
    width:142px;
    padding:10px 12px 12px;
    border-radius:16px;
    background:linear-gradient(180deg, rgba(7,16,24,.92), rgba(9,14,18,.76));
    border:1px solid rgba(110,225,190,.22);
    box-shadow:0 18px 40px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.03);
    transform:translateY(12px) scale(.96);
}
.vntsj-root .vntsj-cine__diag-title{
    display:block;
    margin-bottom:8px;
    color:#9ce6cf;
    font-size:9px;
    font-weight:900;
    letter-spacing:.18em;
}
.vntsj-root .vntsj-cine__diag-line{
    display:block;
    height:7px;
    margin-top:7px;
    border-radius:999px;
    background:linear-gradient(90deg, rgba(99,213,141,.9), rgba(99,213,141,.14));
    position:relative;
    overflow:hidden;
}
.vntsj-root .vntsj-cine__diag-line::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
    transform:translateX(-120%);
    animation:vntsjDiagSweep 2.4s ease-in-out infinite;
}
.vntsj-root .vntsj-cine__diag-line:nth-child(3)::after{animation-delay:.25s;}
.vntsj-root .vntsj-cine__diag-line:nth-child(4)::after{animation-delay:.5s;}
@keyframes vntsjDiagSweep {
    0% { transform:translateX(-120%); }
    65%, 100% { transform:translateX(120%); }
}
.vntsj-root .vntsj-cine__scanbeam{
    left:50%;
    bottom:82px;
    width:250px;
    height:82px;
    border-radius:50% 50% 42% 42%;
    background:radial-gradient(ellipse at center, rgba(120,226,255,.16), rgba(120,226,255,.08) 42%, transparent 72%);
    border:1px solid rgba(120,226,255,.18);
    filter:blur(.2px);
    transform:translateX(-50%) scaleX(.82) scaleY(.84);
}
.vntsj-root .vntsj-cine__scanbeam::before{
    content:"";
    position:absolute;
    left:50%;
    top:-56px;
    width:2px;
    height:140px;
    transform:translateX(-50%);
    background:linear-gradient(180deg, rgba(120,226,255,0), rgba(120,226,255,.9), rgba(120,226,255,0));
    box-shadow:0 0 18px rgba(120,226,255,.32);
    animation:vntsjScanPulse 2s ease-in-out infinite;
}
@keyframes vntsjScanPulse {
    0%,100% { opacity:.45; transform:translateX(-50%) scaleY(.92); }
    50% { opacity:.95; transform:translateX(-50%) scaleY(1.02); }
}
.vntsj-root .vntsj-cine__liftarms{
    left:50%;
    bottom:86px;
    width:210px;
    height:56px;
    transform:translateX(-50%) translateY(10px);
}
.vntsj-root .vntsj-cine__liftarms i{
    position:absolute;
    bottom:0;
    width:76px;
    height:8px;
    border-radius:999px;
    background:linear-gradient(90deg, rgba(255,255,255,.78), rgba(146,155,166,.34));
    box-shadow:0 0 0 1px rgba(255,255,255,.07) inset;
}
.vntsj-root .vntsj-cine__liftarms i:first-child{
    left:18px;
    transform:rotate(18deg);
}
.vntsj-root .vntsj-cine__liftarms i:last-child{
    right:18px;
    transform:rotate(-18deg);
}
.vntsj-root .vntsj-cine__liftarms::before,
.vntsj-root .vntsj-cine__liftarms::after{
    content:"";
    position:absolute;
    bottom:6px;
    width:8px;
    height:38px;
    border-radius:999px;
    background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.05));
}
.vntsj-root .vntsj-cine__liftarms::before{left:44px;}
.vntsj-root .vntsj-cine__liftarms::after{right:44px;}

/* Route-specific mechanical visuals */
.vntsj-root[data-vntsj-route-mode="pergaminos"] .vntsj-cine__diag,
.vntsj-root[data-vntsj-route-mode="pergaminos"] .vntsj-cine__scanbeam,
.vntsj-root[data-vntsj-route-mode="pergaminos"] .vntsj-cine__liftarms{
    display:block;
}
.vntsj-root[data-vntsj-route-mode="pergaminos"][data-vntsj-transport-step="2"] .vntsj-cine__diag,
.vntsj-root[data-vntsj-route-mode="pergaminos"][data-vntsj-transport-step="3"] .vntsj-cine__diag,
.vntsj-root[data-vntsj-route-mode="pergaminos"][data-vntsj-transport-step="2"] .vntsj-cine__scanbeam,
.vntsj-root[data-vntsj-route-mode="pergaminos"][data-vntsj-transport-step="2"] .vntsj-cine__liftarms{
    opacity:1;
    transform:translateY(0) scale(1);
}
.vntsj-root[data-vntsj-route-mode="pergaminos"][data-vntsj-transport-step="2"] .vntsj-cine__worker{
    opacity:1;
    transform:translateY(0) scale(1.02);
}
.vntsj-root[data-vntsj-route-mode="pergaminos"][data-vntsj-transport-step="2"] .vntsj-cine__car-wrap{
    transform:translateX(-46%) translateY(0) scale(.94);
}
.vntsj-root[data-vntsj-route-mode="pergaminos"][data-vntsj-transport-step="2"] .vntsj-cine__worker::after{
    opacity:1;
    transform:rotate(-6deg) translateX(2px);
}
.vntsj-root[data-vntsj-route-mode="pergaminos"][data-vntsj-transport-step="2"] .vntsj-cine__checkboard span::before{
    background:#63d58d;
    box-shadow:0 0 0 3px rgba(99,213,141,.14), 0 0 12px rgba(99,213,141,.24);
}
.vntsj-root[data-vntsj-route-mode="pergaminos"][data-vntsj-transport-step="2"] .vntsj-cine__garage{
    box-shadow:0 30px 58px rgba(0,0,0,.34), 0 0 0 1px rgba(99,213,141,.08) inset;
}

/* Direct route keeps the cleaner feeling */
.vntsj-root[data-vntsj-route-mode="direct"] .vntsj-cine__diag,
.vntsj-root[data-vntsj-route-mode="direct"] .vntsj-cine__scanbeam,
.vntsj-root[data-vntsj-route-mode="direct"] .vntsj-cine__liftarms{
    display:none;
}

@media (max-width: 900px){
    .vntsj-root .vntsj-cine__diag{left:6%; bottom:168px; width:128px;}
    .vntsj-root .vntsj-cine__scanbeam{width:208px; bottom:78px;}
    .vntsj-root .vntsj-cine__liftarms{width:184px; bottom:82px;}
}
@media (max-width: 620px){
    .vntsj-root .vntsj-cine__diag{left:10px; bottom:144px; width:104px; padding:8px 9px 10px;}
    .vntsj-root .vntsj-cine__diag-title{font-size:8px;}
    .vntsj-root .vntsj-cine__scanbeam{width:170px; height:62px; bottom:68px;}
    .vntsj-root .vntsj-cine__liftarms{width:146px; height:44px; bottom:72px;}
    .vntsj-root .vntsj-cine__liftarms i{width:54px; height:7px;}
    .vntsj-root .vntsj-cine__liftarms::before{left:32px; height:30px;}
    .vntsj-root .vntsj-cine__liftarms::after{right:32px; height:30px;}
}


/* =============================================================
   AUTO PERGAMINOS JOURNEY v2.7.8 — STEP ORDER / FOCUS / MECHANIC DETAIL
   Fix route semantics, keep step tag visible on scene changes, and make
   the mechanical-check scene more realistic and polished.
   ============================================================= */

/* Make the step tag more reliably visible when advancing scenes */
.vntsj-root .vntsj-step-tag {
    scroll-margin-top: 18px;
}
.vntsj-root .vntsj-scene--transport .vntsj-step-tag {
    scroll-margin-top: 10px;
}

/* Richer mechanic-check realism for the store-arrival route */
.vntsj-root .vntsj-cine__diag {
    width: 154px;
    border-color: rgba(110,225,190,.28);
    box-shadow: 0 20px 44px rgba(0,0,0,.30), inset 0 0 0 1px rgba(255,255,255,.04);
}
.vntsj-root .vntsj-cine__diag::after {
    content:"SYSTEM OK";
    position:absolute;
    right:10px;
    top:10px;
    color:rgba(156,230,207,.74);
    font-size:8px;
    font-weight:800;
    letter-spacing:.12em;
}
.vntsj-root .vntsj-cine__checkboard {
    box-shadow: 0 18px 38px rgba(0,0,0,.24), inset 0 0 0 1px rgba(255,255,255,.03);
}
.vntsj-root .vntsj-cine__checkboard span::after {
    content:"";
    position:absolute;
    left:16px;
    right:6px;
    top:50%;
    height:2px;
    transform:translateY(-50%);
    background:linear-gradient(90deg, rgba(99,213,141,.45), rgba(99,213,141,.10));
    border-radius:999px;
}
.vntsj-root .vntsj-cine__scanbeam {
    width: 286px;
    height: 96px;
    background: radial-gradient(ellipse at center, rgba(120,226,255,.20), rgba(120,226,255,.09) 40%, transparent 72%);
    box-shadow: 0 0 0 1px rgba(120,226,255,.12) inset, 0 0 36px rgba(120,226,255,.12);
}
.vntsj-root .vntsj-cine__scanbeam::after {
    content:"";
    position:absolute;
    left:20px;
    right:20px;
    top:50%;
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(160,245,255,.95), transparent);
    box-shadow:0 0 12px rgba(160,245,255,.55);
    animation:vntsjBeamSweep 2.6s ease-in-out infinite;
}
@keyframes vntsjBeamSweep {
    0%,100% { transform:translateY(-16px); opacity:.4; }
    50% { transform:translateY(16px); opacity:1; }
}
.vntsj-root .vntsj-cine__liftarms {
    width: 230px;
}
.vntsj-root .vntsj-cine__liftarms i {
    height: 10px;
    background: linear-gradient(90deg, rgba(255,255,255,.84), rgba(146,155,166,.48));
}
.vntsj-root .vntsj-cine__worker {
    filter: drop-shadow(0 18px 20px rgba(0,0,0,.34));
}
.vntsj-root .vntsj-cine__worker .vntsj-cine__body {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 10px 20px rgba(0,0,0,.12);
}
.vntsj-root .vntsj-cine__worker::after {
    box-shadow: 0 0 0 1px rgba(255,255,255,.10) inset, 0 10px 18px rgba(0,0,0,.20);
}

/* Route-specific scene differentiation */
.vntsj-root[data-vntsj-route-mode="pergaminos"][data-vntsj-transport-step="2"] .vntsj-cine__city--kos {
    opacity: 1;
    transform: translateX(0) scale(1.01);
}
.vntsj-root[data-vntsj-route-mode="pergaminos"][data-vntsj-transport-step="2"] .vntsj-cine__garage {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1.01);
}
.vntsj-root[data-vntsj-route-mode="pergaminos"][data-vntsj-transport-step="2"] .vntsj-cine__worktools,
.vntsj-root[data-vntsj-route-mode="pergaminos"][data-vntsj-transport-step="2"] .vntsj-cine__checkboard,
.vntsj-root[data-vntsj-route-mode="pergaminos"][data-vntsj-transport-step="2"] .vntsj-cine__diag,
.vntsj-root[data-vntsj-route-mode="pergaminos"][data-vntsj-transport-step="2"] .vntsj-cine__scanbeam,
.vntsj-root[data-vntsj-route-mode="pergaminos"][data-vntsj-transport-step="2"] .vntsj-cine__liftarms {
    opacity: 0;
}
.vntsj-root[data-vntsj-route-mode="pergaminos"][data-vntsj-transport-step="3"] .vntsj-cine__worktools,
.vntsj-root[data-vntsj-route-mode="pergaminos"][data-vntsj-transport-step="3"] .vntsj-cine__checkboard,
.vntsj-root[data-vntsj-route-mode="pergaminos"][data-vntsj-transport-step="3"] .vntsj-cine__diag,
.vntsj-root[data-vntsj-route-mode="pergaminos"][data-vntsj-transport-step="3"] .vntsj-cine__scanbeam,
.vntsj-root[data-vntsj-route-mode="pergaminos"][data-vntsj-transport-step="3"] .vntsj-cine__liftarms {
    opacity: 1;
}
.vntsj-root[data-vntsj-route-mode="pergaminos"][data-vntsj-transport-step="3"] .vntsj-cine__car-wrap {
    transform: translateX(-46%) translateY(-2px) scale(.93);
}
.vntsj-root[data-vntsj-route-mode="pergaminos"][data-vntsj-transport-step="3"] .vntsj-cine__worker {
    opacity: 1;
    transform: translateY(0) scale(1.03);
}

.vntsj-root[data-vntsj-route-mode="direct"] .vntsj-cine__route-line {
    opacity: .72;
}
.vntsj-root[data-vntsj-route-mode="direct"][data-vntsj-transport-step="2"] .vntsj-cine__route-line,
.vntsj-root[data-vntsj-route-mode="direct"][data-vntsj-transport-step="3"] .vntsj-cine__route-line {
    opacity: 1;
}
.vntsj-root[data-vntsj-route-mode="direct"][data-vntsj-transport-step="2"] .vntsj-cine__car-wrap {
    transform: translateX(-8%) translateY(-8px) scale(.78);
}
.vntsj-root[data-vntsj-route-mode="direct"][data-vntsj-transport-step="3"] .vntsj-cine__car-wrap {
    transform: translateX(10%) translateY(-4px) scale(.76);
}

@media (max-width: 900px) {
    .vntsj-root .vntsj-cine__diag { width: 134px; }
    .vntsj-root .vntsj-cine__scanbeam { width: 236px; height: 82px; }
    .vntsj-root .vntsj-cine__liftarms { width: 194px; }
}
@media (max-width: 620px) {
    .vntsj-root .vntsj-step-tag { scroll-margin-top: 10px; }
    .vntsj-root .vntsj-cine__diag { width: 108px; }
    .vntsj-root .vntsj-cine__scanbeam { width: 176px; height: 64px; }
    .vntsj-root .vntsj-cine__liftarms { width: 146px; }
}


/* =============================================================
   AUTO PERGAMINOS JOURNEY v2.7.9 — EXACT COLOR + STEP 5 DETAIL
   1) Step 1 color preview: true black / true red / true blue feel.
   2) Step 5 direct route: richer AP team collection & delivery graphics.
   3) Step 5 store route: cleaner workshop/mechanical-check details.
   ============================================================= */

/* STEP 1 — real color preview, not yellow/orange red */
.vntsj-root .vntsj-scene--select .vntsj-car-card__media{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    background:radial-gradient(circle at 50% 18%, rgba(255,255,255,.12), transparent 48%), rgba(0,0,0,.16);
}
.vntsj-root .vntsj-scene--select .vntsj-car-card__media .vntsj-vehicle-img{
    position:relative;
    z-index:1;
    transition:filter .34s var(--vntsj-ease), transform .34s var(--vntsj-ease), opacity .28s ease;
}
.vntsj-root .vntsj-scene--select .vntsj-car-card__media::before,
.vntsj-root .vntsj-scene--select .vntsj-car-card__media::after{
    content:"";
    position:absolute;
    inset:10px 8px 12px;
    z-index:2;
    pointer-events:none;
    border-radius:22px;
    opacity:0;
    transition:opacity .28s ease, background .28s ease;
}
.vntsj-root .vntsj-scene--select .vntsj-car-card__media::after{
    inset:0;
    z-index:3;
    background:linear-gradient(115deg, transparent 0 34%, rgba(255,255,255,.24) 43%, transparent 53%);
    mix-blend-mode:screen;
    opacity:.16;
}
.vntsj-root[data-vntsj-color="black"] .vntsj-scene--select .vntsj-car-card__media::before{
    opacity:.82;
    background:linear-gradient(180deg, rgba(0,0,0,.92), rgba(0,0,0,.72));
    mix-blend-mode:multiply;
}
.vntsj-root[data-vntsj-color="red"] .vntsj-scene--select .vntsj-car-card__media::before{
    opacity:.78;
    background:linear-gradient(180deg, #b00009 0%, #760008 100%);
    mix-blend-mode:color;
}
.vntsj-root[data-vntsj-color="blue"] .vntsj-scene--select .vntsj-car-card__media::before{
    opacity:.82;
    background:linear-gradient(180deg, #0648ff 0%, #03238e 100%);
    mix-blend-mode:color;
}
.vntsj-root[data-vntsj-color="black"] .vntsj-scene--select .vntsj-car-card__media .vntsj-vehicle-img{
    filter:brightness(.42) contrast(1.45) saturate(.20) drop-shadow(0 26px 30px rgba(0,0,0,.70)) !important;
}
.vntsj-root[data-vntsj-color="red"] .vntsj-scene--select .vntsj-car-card__media .vntsj-vehicle-img{
    filter:grayscale(.58) contrast(1.22) brightness(.82) drop-shadow(0 26px 30px rgba(0,0,0,.58)) !important;
}
.vntsj-root[data-vntsj-color="blue"] .vntsj-scene--select .vntsj-car-card__media .vntsj-vehicle-img{
    filter:grayscale(.54) contrast(1.24) brightness(.82) drop-shadow(0 26px 30px rgba(0,0,0,.58)) !important;
}
.vntsj-root .vntsj-swatch[data-vntsj-color="black"]{--vntsj-swatch:#020203 !important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.16), 0 12px 26px rgba(0,0,0,.45);}
.vntsj-root .vntsj-swatch[data-vntsj-color="red"]{--vntsj-swatch:#b00009 !important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.10), 0 12px 26px rgba(176,0,9,.28);}
.vntsj-root .vntsj-swatch[data-vntsj-color="blue"]{--vntsj-swatch:#0648ff !important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12), 0 12px 26px rgba(6,72,255,.26);}

/* Global vehicle color correction, stronger and cleaner */
.vntsj-root[data-vntsj-color="black"] .vntsj-vehicle-img{
    filter:brightness(.30) contrast(1.55) saturate(.18) grayscale(.10) drop-shadow(0 24px 38px rgba(0,0,0,.66)) !important;
}
.vntsj-root[data-vntsj-color="red"] .vntsj-vehicle-img{
    filter:sepia(1) saturate(9.5) hue-rotate(322deg) brightness(.68) contrast(1.38) drop-shadow(0 24px 38px rgba(0,0,0,.54)) !important;
}
.vntsj-root[data-vntsj-color="blue"] .vntsj-vehicle-img{
    filter:sepia(1) saturate(9.2) hue-rotate(176deg) brightness(.68) contrast(1.36) drop-shadow(0 24px 38px rgba(0,0,0,.54)) !important;
}
.vntsj-root[data-vntsj-color="red"] .vntsj-cine__car,
.vntsj-root[data-vntsj-color="red"] .vntsj-main-car-img{
    filter:sepia(1) saturate(9.5) hue-rotate(322deg) brightness(.68) contrast(1.38) !important;
}
.vntsj-root[data-vntsj-color="blue"] .vntsj-cine__car,
.vntsj-root[data-vntsj-color="blue"] .vntsj-main-car-img{
    filter:sepia(1) saturate(9.2) hue-rotate(176deg) brightness(.68) contrast(1.36) !important;
}
.vntsj-root[data-vntsj-color="black"] .vntsj-cine__car,
.vntsj-root[data-vntsj-color="black"] .vntsj-main-car-img{
    filter:brightness(.30) contrast(1.55) saturate(.18) grayscale(.10) !important;
}

/* STEP 5 — extra graphic layers */
.vntsj-root .vntsj-cine__teamhub,
.vntsj-root .vntsj-cine__routepins,
.vntsj-root .vntsj-cine__handover-card{
    position:absolute;
    z-index:15;
    pointer-events:none;
    opacity:0;
    transform:translateY(12px) scale(.96);
    transition:opacity .46s ease, transform .64s var(--vntsj-ease), left .64s var(--vntsj-ease), right .64s var(--vntsj-ease), bottom .64s var(--vntsj-ease);
}
.vntsj-root .vntsj-cine__teamhub{
    left:32px;
    bottom:170px;
    width:164px;
    padding:13px 14px 12px;
    border-radius:18px;
    border:1px solid rgba(120,180,255,.26);
    background:linear-gradient(180deg, rgba(10,18,30,.72), rgba(4,7,12,.46));
    box-shadow:0 24px 54px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.06);
    backdrop-filter:blur(14px);
}
.vntsj-root .vntsj-cine__teamhub-title,
.vntsj-root .vntsj-cine__teamhub-status{
    display:block;
    color:#fff;
    font-size:9px;
    font-weight:900;
    letter-spacing:.16em;
    text-transform:uppercase;
}
.vntsj-root .vntsj-cine__teamhub-status{
    margin-top:8px;
    color:rgba(120,226,255,.86);
}
.vntsj-root .vntsj-cine__teamhub-row{
    display:block;
    height:4px;
    margin-top:9px;
    border-radius:999px;
    background:linear-gradient(90deg, rgba(120,226,255,.92), rgba(255,255,255,.18));
    box-shadow:0 0 14px rgba(120,226,255,.18);
}
.vntsj-root .vntsj-cine__teamhub-row:nth-child(3){width:68%; opacity:.68;}
.vntsj-root .vntsj-cine__routepins{
    left:18%;
    right:18%;
    top:39%;
    height:60px;
}
.vntsj-root .vntsj-cine__routepins::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:50%;
    height:2px;
    background:linear-gradient(90deg, transparent, rgba(120,226,255,.80), rgba(255,255,255,.72), transparent);
    box-shadow:0 0 22px rgba(120,226,255,.34);
}
.vntsj-root .vntsj-cine__routepins span{
    position:absolute;
    top:22px;
    width:16px;
    height:16px;
    border-radius:999px 999px 999px 2px;
    transform:rotate(-45deg);
    background:linear-gradient(180deg,#fff,#7de2ff);
    box-shadow:0 0 22px rgba(125,226,255,.62);
}
.vntsj-root .vntsj-cine__routepins span:nth-child(1){left:0;}
.vntsj-root .vntsj-cine__routepins span:nth-child(2){left:50%;}
.vntsj-root .vntsj-cine__routepins span:nth-child(3){right:0;}
.vntsj-root .vntsj-cine__handover-card{
    right:34px;
    bottom:170px;
    min-width:176px;
    padding:13px 14px 13px 44px;
    border-radius:18px;
    border:1px solid rgba(255,255,255,.16);
    background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
    box-shadow:0 24px 54px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.06);
    backdrop-filter:blur(14px);
}
.vntsj-root .vntsj-cine__handover-card span{
    position:absolute;
    left:14px;
    top:50%;
    width:18px;
    height:18px;
    border-radius:50%;
    transform:translateY(-50%);
    background:#63d58d;
    box-shadow:0 0 0 5px rgba(99,213,141,.13), 0 0 24px rgba(99,213,141,.30);
}
.vntsj-root .vntsj-cine__handover-card span::after{
    content:"";
    position:absolute;
    left:5px;
    top:4px;
    width:7px;
    height:4px;
    border-left:2px solid #06140c;
    border-bottom:2px solid #06140c;
    transform:rotate(-45deg);
}
.vntsj-root .vntsj-cine__handover-card strong,
.vntsj-root .vntsj-cine__handover-card em{
    display:block;
    color:#fff;
    font-size:10px;
    font-weight:900;
    letter-spacing:.12em;
    text-transform:uppercase;
    font-style:normal;
}
.vntsj-root .vntsj-cine__handover-card em{
    margin-top:4px;
    color:rgba(255,255,255,.62);
    font-size:9px;
    letter-spacing:.06em;
}

/* We Collect & Deliver — more movement, more AP team detail */
.vntsj-root[data-vntsj-route-mode="direct"] .vntsj-cine__viewport{
    background:
        radial-gradient(circle at 16% 16%, rgba(120,226,255,.14), transparent 27%),
        radial-gradient(circle at 80% 24%, rgba(255,255,255,.11), transparent 26%),
        linear-gradient(180deg, #101821 0%, #071019 54%, #030506 100%) !important;
}
.vntsj-root[data-vntsj-route-mode="direct"] .vntsj-cine__viewport::before{
    background:
        linear-gradient(115deg, transparent 0 36%, rgba(120,226,255,.13) 46%, transparent 56%),
        radial-gradient(circle at 18% 30%, rgba(120,226,255,.15), transparent 28%),
        radial-gradient(circle at 78% 36%, rgba(255,255,255,.10), transparent 25%) !important;
}
.vntsj-root[data-vntsj-route-mode="direct"] .vntsj-cine__road{
    background:
        linear-gradient(180deg, rgba(120,226,255,.05), rgba(0,0,0,.48)),
        linear-gradient(90deg, #07111a, #263647 46%, #060b10) !important;
}
.vntsj-root[data-vntsj-route-mode="direct"] .vntsj-cine__road::before{
    content:"";
    position:absolute;
    left:9%;
    right:9%;
    bottom:38px;
    height:2px;
    background:linear-gradient(90deg, transparent, rgba(120,226,255,.90), transparent);
    box-shadow:0 0 24px rgba(120,226,255,.32);
    animation:vntsjDirectRoadPulse 1.7s ease-in-out infinite;
}
@keyframes vntsjDirectRoadPulse{50%{opacity:.45; transform:scaleX(.92)}}
.vntsj-root[data-vntsj-route-mode="direct"][data-vntsj-transport-step="1"] .vntsj-cine__teamhub,
.vntsj-root[data-vntsj-route-mode="direct"][data-vntsj-transport-step="2"] .vntsj-cine__teamhub{
    opacity:1;
    transform:translateY(0) scale(1);
}
.vntsj-root[data-vntsj-route-mode="direct"][data-vntsj-transport-step="1"] .vntsj-cine__routepins,
.vntsj-root[data-vntsj-route-mode="direct"][data-vntsj-transport-step="2"] .vntsj-cine__routepins,
.vntsj-root[data-vntsj-route-mode="direct"][data-vntsj-transport-step="3"] .vntsj-cine__routepins{
    opacity:1;
    transform:translateY(0) scale(1);
}
.vntsj-root[data-vntsj-route-mode="direct"][data-vntsj-transport-step="3"] .vntsj-cine__handover-card{
    opacity:1;
    transform:translateY(0) scale(1);
}
.vntsj-root[data-vntsj-route-mode="direct"][data-vntsj-transport-step="1"] .vntsj-cine__car-wrap{
    transform:translateX(-38%) translateY(-2px) scale(.98) !important;
}
.vntsj-root[data-vntsj-route-mode="direct"][data-vntsj-transport-step="2"] .vntsj-cine__car-wrap{
    transform:translateX(12%) translateY(-16px) scale(.72) !important;
    filter:drop-shadow(0 22px 26px rgba(0,0,0,.46)) drop-shadow(0 0 18px rgba(120,226,255,.10));
}
.vntsj-root[data-vntsj-route-mode="direct"][data-vntsj-transport-step="3"] .vntsj-cine__car-wrap{
    transform:translateX(-6%) translateY(-3px) scale(.82) !important;
}
.vntsj-root[data-vntsj-route-mode="direct"] .vntsj-cine__customer .vntsj-cine__body{
    background:linear-gradient(180deg,#f5f5f5,#606a76) !important;
}

/* Store-arrival / mechanical route — more polished, less confusing */
.vntsj-root[data-vntsj-route-mode="pergaminos"] .vntsj-cine__viewport{
    background:
        radial-gradient(circle at 68% 10%, rgba(255,255,255,.13), transparent 28%),
        radial-gradient(circle at 22% 26%, rgba(200,18,18,.16), transparent 24%),
        linear-gradient(180deg, #151519 0%, #09090d 55%, #040405 100%) !important;
}
.vntsj-root[data-vntsj-route-mode="pergaminos"] .vntsj-cine__garage-sign{
    background:linear-gradient(90deg, rgba(200,18,18,.52), rgba(255,255,255,.08)) !important;
    box-shadow:0 0 24px rgba(200,18,18,.16);
}
.vntsj-root[data-vntsj-route-mode="pergaminos"][data-vntsj-transport-step="3"] .vntsj-cine__garage::after{
    content:"DIAGNOSTIC BAY";
    position:absolute;
    left:50%;
    bottom:16px;
    transform:translateX(-50%);
    padding:6px 10px;
    border-radius:999px;
    background:rgba(0,0,0,.38);
    border:1px solid rgba(110,225,190,.18);
    color:rgba(156,230,207,.88);
    font-size:8px;
    font-weight:900;
    letter-spacing:.14em;
}
.vntsj-root[data-vntsj-route-mode="pergaminos"][data-vntsj-transport-step="3"] .vntsj-cine__checkboard{
    opacity:1 !important;
    transform:translateY(0) scale(1) !important;
}
.vntsj-root[data-vntsj-route-mode="pergaminos"][data-vntsj-transport-step="3"] .vntsj-cine__diag{
    opacity:1 !important;
    transform:translateY(0) scale(1) !important;
}
.vntsj-root[data-vntsj-route-mode="pergaminos"][data-vntsj-transport-step="3"] .vntsj-cine__scanbeam{
    opacity:1 !important;
    transform:translateX(-50%) scaleX(1) scaleY(1) !important;
}
.vntsj-root[data-vntsj-route-mode="pergaminos"][data-vntsj-transport-step="3"] .vntsj-cine__liftarms{
    opacity:1 !important;
    transform:translateX(-50%) translateY(0) !important;
}
.vntsj-root[data-vntsj-route-mode="pergaminos"][data-vntsj-transport-step="3"] .vntsj-cine__worker::after{
    opacity:1 !important;
    transform:rotate(-6deg) translateX(2px) !important;
}

@media (max-width:900px){
    .vntsj-root .vntsj-cine__teamhub{left:20px; bottom:160px; width:148px;}
    .vntsj-root .vntsj-cine__handover-card{right:20px; bottom:160px; min-width:158px;}
    .vntsj-root .vntsj-cine__routepins{left:12%; right:12%;}
}
@media (max-width:620px){
    .vntsj-root .vntsj-cine__teamhub{left:12px; bottom:136px; width:124px; padding:10px; border-radius:14px;}
    .vntsj-root .vntsj-cine__teamhub-title,
    .vntsj-root .vntsj-cine__teamhub-status{font-size:7.5px;}
    .vntsj-root .vntsj-cine__handover-card{right:10px; bottom:136px; min-width:132px; padding:10px 10px 10px 34px; border-radius:14px;}
    .vntsj-root .vntsj-cine__handover-card span{left:10px; width:16px; height:16px;}
    .vntsj-root .vntsj-cine__handover-card strong{font-size:8px;}
    .vntsj-root .vntsj-cine__handover-card em{font-size:7px;}
    .vntsj-root .vntsj-cine__routepins{left:8%; right:8%; top:36%;}
    .vntsj-root .vntsj-cine__routepins span{width:13px;height:13px;}
    .vntsj-root[data-vntsj-route-mode="direct"][data-vntsj-transport-step="2"] .vntsj-cine__car-wrap{transform:translateX(6%) translateY(-6px) scale(.68) !important;}
}


/* =============================================================
   AUTO PERGAMINOS JOURNEY v2.8.1 — RESTORE ALL COLORS + TRUE RED
   1) Keep all original swatches (silver, black, white, red, blue).
   2) Make Step 1 color preview feel more real, especially red.
   3) Keep Step 5 graphics the same style, only slightly prettier.
   ============================================================= */

/* STEP 1 — preserve all swatches, but make black/red/blue read correctly */
.vntsj-root .vntsj-scene--select .vntsj-car-card__media{
    position:relative;
    isolation:isolate;
    overflow:hidden;
}
.vntsj-root .vntsj-scene--select .vntsj-car-card__media::before{
    content:"";
    position:absolute;
    inset:10px 8px 12px;
    border-radius:22px;
    pointer-events:none;
    opacity:0;
    z-index:2;
    transition:opacity .28s ease, background .28s ease;
}
.vntsj-root .vntsj-scene--select .vntsj-car-card__media::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:3;
    pointer-events:none;
    background:linear-gradient(115deg, transparent 0 34%, rgba(255,255,255,.20) 43%, transparent 53%);
    mix-blend-mode:screen;
    opacity:.16;
}
.vntsj-root .vntsj-scene--select .vntsj-car-card__media .vntsj-vehicle-img{
    position:relative;
    z-index:1;
    transition:filter .32s var(--vntsj-ease), transform .32s var(--vntsj-ease);
}
.vntsj-root[data-vntsj-color="black"] .vntsj-scene--select .vntsj-car-card__media::before{
    opacity:.90;
    background:linear-gradient(180deg, rgba(3,3,4,.96), rgba(0,0,0,.82));
    mix-blend-mode:multiply;
}
.vntsj-root[data-vntsj-color="red"] .vntsj-scene--select .vntsj-car-card__media::before{
    opacity:.88;
    background:linear-gradient(180deg, rgba(198,0,16,.98), rgba(121,0,11,.94));
    mix-blend-mode:multiply;
}
.vntsj-root[data-vntsj-color="blue"] .vntsj-scene--select .vntsj-car-card__media::before{
    opacity:.88;
    background:linear-gradient(180deg, rgba(8,83,255,.96), rgba(3,35,142,.94));
    mix-blend-mode:multiply;
}
.vntsj-root[data-vntsj-color="black"] .vntsj-scene--select .vntsj-car-card__media .vntsj-vehicle-img{
    filter:grayscale(.96) brightness(.50) contrast(1.34) saturate(.28) drop-shadow(0 24px 30px rgba(0,0,0,.68)) !important;
}
.vntsj-root[data-vntsj-color="red"] .vntsj-scene--select .vntsj-car-card__media .vntsj-vehicle-img{
    filter:grayscale(.92) brightness(.86) contrast(1.18) saturate(.34) drop-shadow(0 24px 30px rgba(0,0,0,.58)) !important;
}
.vntsj-root[data-vntsj-color="blue"] .vntsj-scene--select .vntsj-car-card__media .vntsj-vehicle-img{
    filter:grayscale(.92) brightness(.86) contrast(1.18) saturate(.34) drop-shadow(0 24px 30px rgba(0,0,0,.58)) !important;
}
.vntsj-root .vntsj-swatch[data-vntsj-color="black"]{--vntsj-swatch:#020203 !important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.16), 0 12px 26px rgba(0,0,0,.45);}
.vntsj-root .vntsj-swatch[data-vntsj-color="red"]{--vntsj-swatch:#c60010 !important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.10), 0 12px 26px rgba(198,0,16,.28);}
.vntsj-root .vntsj-swatch[data-vntsj-color="blue"]{--vntsj-swatch:#0853ff !important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12), 0 12px 26px rgba(8,83,255,.24);}

/* Global recolor tuning — especially red should stop reading as yellow/orange */
.vntsj-root[data-vntsj-color="black"] .vntsj-vehicle-img{
    filter:brightness(.32) contrast(1.56) saturate(.14) grayscale(.14) drop-shadow(0 24px 38px rgba(0,0,0,.66)) !important;
}
.vntsj-root[data-vntsj-color="red"] .vntsj-vehicle-img{
    filter:sepia(1) saturate(15.5) hue-rotate(322deg) brightness(.56) contrast(1.50) drop-shadow(0 24px 38px rgba(0,0,0,.54)) !important;
}
.vntsj-root[data-vntsj-color="blue"] .vntsj-vehicle-img{
    filter:sepia(1) saturate(13.2) hue-rotate(178deg) brightness(.64) contrast(1.40) drop-shadow(0 24px 38px rgba(0,0,0,.54)) !important;
}
.vntsj-root[data-vntsj-color="red"] .vntsj-cine__car,
.vntsj-root[data-vntsj-color="red"] .vntsj-main-car-img{
    filter:sepia(1) saturate(15.5) hue-rotate(322deg) brightness(.56) contrast(1.50) !important;
}
.vntsj-root[data-vntsj-color="blue"] .vntsj-cine__car,
.vntsj-root[data-vntsj-color="blue"] .vntsj-main-car-img{
    filter:sepia(1) saturate(13.2) hue-rotate(178deg) brightness(.64) contrast(1.40) !important;
}
.vntsj-root[data-vntsj-color="black"] .vntsj-cine__car,
.vntsj-root[data-vntsj-color="black"] .vntsj-main-car-img{
    filter:brightness(.32) contrast(1.56) saturate(.14) grayscale(.14) !important;
}

/* STEP 5 — same graphics, just nicer polish */
.vntsj-root .vntsj-cine__teamhub{
    box-shadow:0 18px 42px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.05);
    backdrop-filter:blur(8px);
}
.vntsj-root .vntsj-cine__handover-card{
    box-shadow:0 18px 40px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.05);
    backdrop-filter:blur(8px);
}
.vntsj-root .vntsj-cine__routepins span{
    box-shadow:0 0 0 4px rgba(255,255,255,.04), 0 0 18px rgba(200,18,18,.28);
}
.vntsj-root[data-vntsj-route-mode="pergaminos"] .vntsj-cine__diag{
    box-shadow:0 18px 34px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.04);
}


/* =============================================================
   AUTO PERGAMINOS JOURNEY v2.8.2 — EXACT COLOR CORRECTION
   High-attention pass focused on Step 1 color fidelity.
   Goal: deep true red, clean true blue, proper black, no yellow tint.
   Step 5 graphics keep the same structure and logic, only refined.
   ============================================================= */

/* Swatches — make the visible chips read exactly right */
.vntsj-root .vntsj-swatch[data-vntsj-color="silver"]{--vntsj-swatch:#d7d9de !important;}
.vntsj-root .vntsj-swatch[data-vntsj-color="black"]{--vntsj-swatch:#010102 !important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.16), 0 14px 28px rgba(0,0,0,.48) !important;}
.vntsj-root .vntsj-swatch[data-vntsj-color="white"]{--vntsj-swatch:#f7f7f8 !important;}
.vntsj-root .vntsj-swatch[data-vntsj-color="red"]{--vntsj-swatch:#cf0018 !important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12), 0 14px 28px rgba(207,0,24,.30) !important;}
.vntsj-root .vntsj-swatch[data-vntsj-color="blue"]{--vntsj-swatch:#004cff !important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12), 0 14px 28px rgba(0,76,255,.26) !important;}

/* Step 1 preview cards — preserve the original design, but push color accuracy */
.vntsj-root .vntsj-scene--select .vntsj-car-card__media{
    background:radial-gradient(circle at 50% 18%, rgba(255,255,255,.11), transparent 48%), rgba(0,0,0,.14);
}
.vntsj-root .vntsj-scene--select .vntsj-car-card__media::before{
    transition:opacity .28s ease, background .28s ease, mix-blend-mode .28s ease;
}
.vntsj-root[data-vntsj-color="silver"] .vntsj-scene--select .vntsj-car-card__media::before,
.vntsj-root[data-vntsj-color="white"] .vntsj-scene--select .vntsj-car-card__media::before{
    opacity:0 !important;
}
.vntsj-root[data-vntsj-color="black"] .vntsj-scene--select .vntsj-car-card__media::before{
    opacity:.92 !important;
    background:linear-gradient(180deg, rgba(0,0,0,.96), rgba(0,0,0,.82)) !important;
    mix-blend-mode:multiply !important;
}
.vntsj-root[data-vntsj-color="red"] .vntsj-scene--select .vntsj-car-card__media::before{
    opacity:.90 !important;
    background:linear-gradient(180deg, rgba(207,0,24,.97) 0%, rgba(138,0,16,.94) 100%) !important;
    mix-blend-mode:color !important;
}
.vntsj-root[data-vntsj-color="blue"] .vntsj-scene--select .vntsj-car-card__media::before{
    opacity:.90 !important;
    background:linear-gradient(180deg, rgba(0,76,255,.97) 0%, rgba(0,43,154,.94) 100%) !important;
    mix-blend-mode:color !important;
}
.vntsj-root[data-vntsj-color="black"] .vntsj-scene--select .vntsj-car-card__media .vntsj-vehicle-img{
    filter:grayscale(1) brightness(.48) contrast(1.38) saturate(.18) drop-shadow(0 24px 32px rgba(0,0,0,.68)) !important;
}
.vntsj-root[data-vntsj-color="red"] .vntsj-scene--select .vntsj-car-card__media .vntsj-vehicle-img{
    filter:grayscale(1) brightness(.86) contrast(1.18) saturate(.10) drop-shadow(0 24px 32px rgba(0,0,0,.58)) !important;
}
.vntsj-root[data-vntsj-color="blue"] .vntsj-scene--select .vntsj-car-card__media .vntsj-vehicle-img{
    filter:grayscale(1) brightness(.86) contrast(1.18) saturate(.10) drop-shadow(0 24px 32px rgba(0,0,0,.58)) !important;
}

/* Global vehicle color correction — especially red must read as true red, not orange/yellow */
.vntsj-root[data-vntsj-color="silver"] .vntsj-vehicle-img{
    filter:saturate(.88) contrast(1.06) brightness(1.00) drop-shadow(0 24px 38px rgba(0,0,0,.48)) !important;
}
.vntsj-root[data-vntsj-color="white"] .vntsj-vehicle-img{
    filter:brightness(1.22) contrast(.97) saturate(.34) drop-shadow(0 24px 38px rgba(0,0,0,.48)) !important;
}
.vntsj-root[data-vntsj-color="black"] .vntsj-vehicle-img,
.vntsj-root[data-vntsj-color="black"] .vntsj-cine__car,
.vntsj-root[data-vntsj-color="black"] .vntsj-main-car-img{
    filter:brightness(.29) contrast(1.58) saturate(.14) grayscale(.14) drop-shadow(0 24px 38px rgba(0,0,0,.66)) !important;
}
.vntsj-root[data-vntsj-color="red"] .vntsj-vehicle-img,
.vntsj-root[data-vntsj-color="red"] .vntsj-cine__car,
.vntsj-root[data-vntsj-color="red"] .vntsj-main-car-img{
    filter:grayscale(1) sepia(1) hue-rotate(307deg) saturate(5200%) brightness(.63) contrast(1.44) drop-shadow(0 24px 38px rgba(0,0,0,.54)) !important;
}
.vntsj-root[data-vntsj-color="blue"] .vntsj-vehicle-img,
.vntsj-root[data-vntsj-color="blue"] .vntsj-cine__car,
.vntsj-root[data-vntsj-color="blue"] .vntsj-main-car-img{
    filter:grayscale(1) sepia(1) hue-rotate(176deg) saturate(4400%) brightness(.68) contrast(1.38) drop-shadow(0 24px 38px rgba(0,0,0,.54)) !important;
}

/* Step 5 — keep the same graphics, just nicer finish and depth */
.vntsj-root .vntsj-cine__teamhub,
.vntsj-root .vntsj-cine__handover-card,
.vntsj-root .vntsj-cine__diag{
    box-shadow:0 18px 40px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.05) !important;
    backdrop-filter:blur(8px);
}
.vntsj-root .vntsj-cine__routepins span{
    box-shadow:0 0 0 4px rgba(255,255,255,.04), 0 0 18px rgba(200,18,18,.28) !important;
}
.vntsj-root[data-vntsj-route-mode="direct"] .vntsj-cine__teamhub,
.vntsj-root[data-vntsj-route-mode="direct"] .vntsj-cine__handover-card,
.vntsj-root[data-vntsj-route-mode="direct"] .vntsj-cine__routepins span{
    filter:saturate(1.06);
}
.vntsj-root[data-vntsj-route-mode="pergaminos"] .vntsj-cine__diag,
.vntsj-root[data-vntsj-route-mode="pergaminos"] .vntsj-cine__scanbeam,
.vntsj-root[data-vntsj-route-mode="pergaminos"] .vntsj-cine__liftarms{
    filter:saturate(1.06);
}


/* =============================================================
   AUTO PERGAMINOS JOURNEY v2.8.3 — STEP 1 VEHICLE-ONLY COLOR
   User request: in Step 1 do NOT tint/change the background behind.
   Only the vehicle itself should change color.
   ============================================================= */

/* Keep Step 1 card background neutral and static for every color */
.vntsj-root .vntsj-scene--select .vntsj-car-card__media{
    background:radial-gradient(circle at 50% 18%, rgba(255,255,255,.11), transparent 48%), rgba(0,0,0,.14) !important;
}
.vntsj-root .vntsj-scene--select .vntsj-car-card__media::before{
    opacity:0 !important;
    background:none !important;
}
/* keep only a subtle neutral gloss, not a color tint */
.vntsj-root .vntsj-scene--select .vntsj-car-card__media::after{
    opacity:.14 !important;
    background:linear-gradient(115deg, transparent 0 34%, rgba(255,255,255,.18) 43%, transparent 53%) !important;
    mix-blend-mode:screen !important;
}

/* Step 1 color preview — recolor only the vehicle image */
.vntsj-root[data-vntsj-color="silver"] .vntsj-scene--select .vntsj-car-card__media .vntsj-vehicle-img{
    filter:saturate(.90) contrast(1.05) brightness(1.00) drop-shadow(0 24px 32px rgba(0,0,0,.50)) !important;
}
.vntsj-root[data-vntsj-color="white"] .vntsj-scene--select .vntsj-car-card__media .vntsj-vehicle-img{
    filter:brightness(1.20) contrast(.97) saturate(.30) drop-shadow(0 24px 32px rgba(0,0,0,.48)) !important;
}
.vntsj-root[data-vntsj-color="black"] .vntsj-scene--select .vntsj-car-card__media .vntsj-vehicle-img{
    filter:brightness(.28) contrast(1.62) saturate(.12) grayscale(.10) drop-shadow(0 24px 32px rgba(0,0,0,.68)) !important;
}
.vntsj-root[data-vntsj-color="red"] .vntsj-scene--select .vntsj-car-card__media .vntsj-vehicle-img{
    filter:grayscale(1) sepia(1) hue-rotate(307deg) saturate(5200%) brightness(.63) contrast(1.44) drop-shadow(0 24px 32px rgba(0,0,0,.54)) !important;
}
.vntsj-root[data-vntsj-color="blue"] .vntsj-scene--select .vntsj-car-card__media .vntsj-vehicle-img{
    filter:grayscale(1) sepia(1) hue-rotate(176deg) saturate(4400%) brightness(.68) contrast(1.38) drop-shadow(0 24px 32px rgba(0,0,0,.54)) !important;
}


/* =============================================================
   AUTO PERGAMINOS JOURNEY v2.8.4 — STEP 1 NO PHOTO-BG TINT
   Final hard override for Step 1:
   - no color tint on the photo/card background
   - no red/blue/black overlay behind the vehicle
   - only the vehicle image changes color
   ============================================================= */

/* Kill all Step 1 image background overlays completely */
.vntsj-root .vntsj-scene--select .vntsj-car-card__media,
.vntsj-root[data-vntsj-color="silver"] .vntsj-scene--select .vntsj-car-card__media,
.vntsj-root[data-vntsj-color="black"] .vntsj-scene--select .vntsj-car-card__media,
.vntsj-root[data-vntsj-color="white"] .vntsj-scene--select .vntsj-car-card__media,
.vntsj-root[data-vntsj-color="red"] .vntsj-scene--select .vntsj-car-card__media,
.vntsj-root[data-vntsj-color="blue"] .vntsj-scene--select .vntsj-car-card__media{
    background:none !important;
    box-shadow:none !important;
}
.vntsj-root .vntsj-scene--select .vntsj-car-card__media::before,
.vntsj-root .vntsj-scene--select .vntsj-car-card__media::after{
    content:none !important;
    display:none !important;
    opacity:0 !important;
    background:none !important;
    box-shadow:none !important;
}

/* Keep the card/photo area visually neutral */
.vntsj-root .vntsj-scene--select .vntsj-car-card{
    background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)) !important;
}

/* Step 1: recolor only the vehicle photo itself */
.vntsj-root[data-vntsj-color="silver"] .vntsj-scene--select .vntsj-car-card__media .vntsj-vehicle-img{
    filter:saturate(.90) contrast(1.05) brightness(1.00) drop-shadow(0 24px 32px rgba(0,0,0,.50)) !important;
}
.vntsj-root[data-vntsj-color="white"] .vntsj-scene--select .vntsj-car-card__media .vntsj-vehicle-img{
    filter:brightness(1.20) contrast(.97) saturate(.30) drop-shadow(0 24px 32px rgba(0,0,0,.48)) !important;
}
.vntsj-root[data-vntsj-color="black"] .vntsj-scene--select .vntsj-car-card__media .vntsj-vehicle-img{
    filter:brightness(.28) contrast(1.62) saturate(.12) grayscale(.10) drop-shadow(0 24px 32px rgba(0,0,0,.68)) !important;
}
.vntsj-root[data-vntsj-color="red"] .vntsj-scene--select .vntsj-car-card__media .vntsj-vehicle-img{
    filter:grayscale(1) sepia(1) hue-rotate(307deg) saturate(5200%) brightness(.63) contrast(1.44) drop-shadow(0 24px 32px rgba(0,0,0,.54)) !important;
}
.vntsj-root[data-vntsj-color="blue"] .vntsj-scene--select .vntsj-car-card__media .vntsj-vehicle-img{
    filter:grayscale(1) sepia(1) hue-rotate(176deg) saturate(4400%) brightness(.68) contrast(1.38) drop-shadow(0 24px 32px rgba(0,0,0,.54)) !important;
}


/* =============================================================
   AUTO PERGAMINOS JOURNEY v2.8.5 — TRUE RED + FULL RESPONSIVE PASS
   1) Red tuned away from yellow/orange toward a deeper true red.
   2) Full responsive refinement across tablet/mobile.
   3) Preserve Step 1 vehicle-only color behavior.
   ============================================================= */

/* --- TRUE RED CORRECTION --- */
.vntsj-root .vntsj-swatch[data-vntsj-color="red"]{
    --vntsj-swatch:#d1001c !important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.12), 0 14px 28px rgba(209,0,28,.30) !important;
}
.vntsj-root[data-vntsj-color="red"] .vntsj-scene--select .vntsj-car-card__media .vntsj-vehicle-img,
.vntsj-root[data-vntsj-color="red"] .vntsj-vehicle-img,
.vntsj-root[data-vntsj-color="red"] .vntsj-cine__car,
.vntsj-root[data-vntsj-color="red"] .vntsj-main-car-img{
    filter:grayscale(1) sepia(1) hue-rotate(299deg) saturate(6200%) brightness(.58) contrast(1.54) drop-shadow(0 24px 38px rgba(0,0,0,.56)) !important;
}

/* --- RESPONSIVE SYSTEM PASS --- */
@media (max-width: 1024px){
    .vntsj-root .vntsj-topbar{
        gap:14px;
        padding:16px 18px;
    }
    .vntsj-root .vntsj-progress{
        max-width:none;
    }
    .vntsj-root .vntsj-scene{
        padding:18px;
    }
    .vntsj-root .vntsj-scene__inner{
        max-width:860px;
        gap:16px;
    }
    .vntsj-root .vntsj-h1{font-size:clamp(34px, 6vw, 64px);}
    .vntsj-root .vntsj-h2{font-size:clamp(28px, 4.2vw, 44px);}
    .vntsj-root .vntsj-sub,
    .vntsj-root .vntsj-lead{max-width:780px;}
    .vntsj-root .vntsj-cars{gap:12px;}
    .vntsj-root .vntsj-car-card{width:calc(33.333% - 8px); min-width:180px;}
    .vntsj-root .vntsj-choice-grid,
    .vntsj-root .vntsj-routes{
        width:100%;
        gap:14px;
    }
    .vntsj-root .vntsj-choice,
    .vntsj-root .vntsj-route{min-width:0;}
    .vntsj-root .vntsj-action-row{
        width:100%;
        justify-content:center;
        flex-wrap:wrap;
        gap:10px;
    }
    .vntsj-root .vntsj-summary{max-width:100%;}
}

@media (max-width: 820px){
    .vntsj-root{
        min-height:100svh;
        min-height:100dvh;
        height:auto;
    }
    .vntsj-root .vntsj-topbar{
        flex-wrap:wrap;
        justify-content:space-between;
        align-items:center;
        row-gap:10px;
    }
    .vntsj-root .vntsj-brand{
        min-width:0;
        max-width:62%;
    }
    .vntsj-root .vntsj-progress{
        order:3;
        width:100%;
        flex:0 0 100%;
        margin:0;
    }
    .vntsj-root .vntsj-scene{
        align-items:flex-start;
        padding:16px;
        overflow-y:auto;
        -webkit-overflow-scrolling:touch;
    }
    .vntsj-root .vntsj-scene__inner{
        max-width:100%;
        padding-bottom:18px;
    }
    .vntsj-root .vntsj-eyebrow,
    .vntsj-root .vntsj-step-tag{align-self:center;}
    .vntsj-root .vntsj-h1{font-size:clamp(30px, 8vw, 48px); line-height:1.02;}
    .vntsj-root .vntsj-h2{font-size:clamp(24px, 6vw, 36px); line-height:1.06;}
    .vntsj-root .vntsj-sub,
    .vntsj-root .vntsj-lead{font-size:14px; line-height:1.55;}
    .vntsj-root .vntsj-cars{width:100%; gap:10px;}
    .vntsj-root .vntsj-car-card{width:calc(50% - 5px); min-width:0; padding:18px 12px 14px;}
    .vntsj-root .vntsj-car-card__media{height:96px !important;}
    .vntsj-root .vntsj-car-card__media .vntsj-vehicle-img{max-height:88px !important; width:auto;}
    .vntsj-root .vntsj-colors{
        width:auto;
        max-width:100%;
        flex-wrap:wrap;
        justify-content:center;
        row-gap:10px;
        padding:10px 14px;
        border-radius:24px;
    }
    .vntsj-root .vntsj-choice-grid,
    .vntsj-root .vntsj-routes,
    .vntsj-root .vntsj-steps,
    .vntsj-root .vntsj-summary{
        width:100%;
    }
    .vntsj-root .vntsj-choice-grid,
    .vntsj-root .vntsj-routes{grid-template-columns:1fr !important;}
    .vntsj-root .vntsj-choice,
    .vntsj-root .vntsj-route{
        width:100%;
        padding:16px 14px;
        border-radius:18px;
    }
    .vntsj-root .vntsj-route__meta{padding-left:18px;}
    .vntsj-root .vntsj-inspect{width:100%;}
    .vntsj-root .vntsj-inspect__checks{grid-template-columns:1fr 1fr; gap:8px;}
    .vntsj-root .vntsj-cine{width:100%;}
    .vntsj-root .vntsj-cine__viewport{border-radius:20px;}
    .vntsj-root .vntsj-transport__readout{grid-template-columns:1fr !important; gap:8px !important;}
    .vntsj-root .vntsj-transport__map,
    .vntsj-root .vntsj-steps,
    .vntsj-root .vntsj-summary{border-radius:18px;}
    .vntsj-root .vntsj-summary{grid-template-columns:1fr !important; gap:8px !important;}
    .vntsj-root .vntsj-summary > div{padding:12px 12px;}
    .vntsj-root .vntsj-delivery{width:100%;}
    .vntsj-root .vntsj-action,
    .vntsj-root .vntsj-action--final{
        min-height:48px;
    }
}

@media (max-width: 620px){
    .vntsj-root{
        border-radius:12px;
    }
    .vntsj-root .vntsj-topbar{
        padding:14px 14px 12px;
    }
    .vntsj-root .vntsj-brand{
        gap:8px;
        max-width:68%;
        font-size:11px;
        letter-spacing:.12em;
    }
    .vntsj-root .vntsj-brand__mark{width:20px; height:20px;}
    .vntsj-root .vntsj-progress__num{font-size:12px; min-width:38px;}
    .vntsj-root .vntsj-restart{padding:8px 10px;}
    .vntsj-root .vntsj-scene{padding:14px;}
    .vntsj-root .vntsj-scene__inner{gap:13px; padding-bottom:16px;}
    .vntsj-root .vntsj-eyebrow{padding:7px 12px; font-size:10px; letter-spacing:.16em;}
    .vntsj-root .vntsj-step-tag{font-size:11px; letter-spacing:.16em;}
    .vntsj-root .vntsj-h1{font-size:clamp(28px, 9vw, 40px);}
    .vntsj-root .vntsj-h2{font-size:clamp(22px, 7.4vw, 32px);}
    .vntsj-root .vntsj-sub,
    .vntsj-root .vntsj-lead{font-size:13.5px; line-height:1.55;}
    .vntsj-root .vntsj-cars{gap:10px;}
    .vntsj-root .vntsj-car-card{width:100%; max-width:340px; padding:16px 12px 14px;}
    .vntsj-root .vntsj-car-card__media{height:92px !important;}
    .vntsj-root .vntsj-car-card__media .vntsj-vehicle-img{max-height:84px !important;}
    .vntsj-root .vntsj-colors{
        gap:10px;
        padding:10px 12px;
    }
    .vntsj-root .vntsj-colors__label{
        width:100%;
        text-align:center;
        margin-right:0;
    }
    .vntsj-root .vntsj-swatch{width:30px !important; height:30px !important;}
    .vntsj-root .vntsj-action-row{
        width:100%;
        gap:8px;
    }
    .vntsj-root .vntsj-action,
    .vntsj-root .vntsj-action--final{
        width:100%;
        justify-content:center;
        padding:13px 16px;
    }
    .vntsj-root .vntsj-inspect__checks{grid-template-columns:1fr;}
    .vntsj-root .vntsj-route__badge,
    .vntsj-root .vntsj-route__cue,
    .vntsj-root .vntsj-choice__cue{font-size:10px;}
    .vntsj-root .vntsj-route__title,
    .vntsj-root .vntsj-choice h3{font-size:18px;}
    .vntsj-root .vntsj-route__text,
    .vntsj-root .vntsj-choice p{font-size:13.5px;}
    .vntsj-root .vntsj-cine__viewport{border-radius:18px;}
    .vntsj-root .vntsj-transport__readout > *,
    .vntsj-root .vntsj-steps,
    .vntsj-root .vntsj-summary > div,
    .vntsj-root .vntsj-transport__map{padding-left:12px; padding-right:12px;}
}

@media (max-width: 420px){
    .vntsj-root .vntsj-brand{max-width:64%; font-size:10.5px;}
    .vntsj-root .vntsj-h1{font-size:26px;}
    .vntsj-root .vntsj-h2{font-size:21px;}
    .vntsj-root .vntsj-sub,
    .vntsj-root .vntsj-lead{font-size:13px;}
    .vntsj-root .vntsj-car-card{max-width:none;}
    .vntsj-root .vntsj-colors{padding:10px 10px;}
    .vntsj-root .vntsj-swatch{width:28px !important; height:28px !important;}
    .vntsj-root .vntsj-steps{padding:10px 10px;}
}


/* =============================================================
   AUTO PERGAMINOS JOURNEY v2.8.6 — RED CLEANUP + STEP 5 SEPARATION
   1) Clean up the red vehicle tone to remove pink/magenta banding.
   2) Add clearer visual separation between Step 5 substep cards and bottom step nav.
   3) Extra responsive tightening for transport scene.
   ============================================================= */

/* RED FIX — tone down the magenta/pink artifacts and keep a deeper real red */
.vntsj-root .vntsj-swatch[data-vntsj-color="red"]{
    --vntsj-swatch:#c8102e !important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.12), 0 14px 28px rgba(200,16,46,.28) !important;
}
.vntsj-root[data-vntsj-color="red"] .vntsj-scene--select .vntsj-car-card__media .vntsj-vehicle-img,
.vntsj-root[data-vntsj-color="red"] .vntsj-vehicle-img,
.vntsj-root[data-vntsj-color="red"] .vntsj-cine__car,
.vntsj-root[data-vntsj-color="red"] .vntsj-main-car-img{
    filter:grayscale(1) sepia(1) hue-rotate(334deg) saturate(1700%) brightness(.80) contrast(1.16) drop-shadow(0 24px 38px rgba(0,0,0,.56)) !important;
}

/* STEP 5 — keep the same graphics but stop the lower areas feeling stacked */
.vntsj-root .vntsj-scene--transport{
    padding-bottom:clamp(190px, 15vw, 260px) !important;
}
.vntsj-root .vntsj-scene--transport .vntsj-scene__inner{
    gap:22px !important;
}
.vntsj-root .vntsj-cine__progress{
    padding:6px 2px 18px !important;
    margin-bottom:10px !important;
}
.vntsj-root .vntsj-transport__readout--cinematic{
    margin-top:4px !important;
    margin-bottom:14px !important;
}
.vntsj-root .vntsj-steps{
    position:relative;
    z-index:70;
    margin-top:18px;
    padding-top:18px;
    background:linear-gradient(180deg, rgba(3,4,6,.90), rgba(3,4,6,.98));
    backdrop-filter:blur(10px);
}
.vntsj-root .vntsj-scene--transport .vntsj-cine{
    margin-bottom:8px;
}
.vntsj-root .vntsj-cine__dot{
    min-height:128px;
}

/* Additional mobile / tablet separation */
@media (max-width: 900px){
    .vntsj-root .vntsj-scene--transport{
        padding-bottom:160px !important;
    }
    .vntsj-root .vntsj-cine__progress{
        padding-bottom:14px !important;
        margin-bottom:8px !important;
    }
    .vntsj-root .vntsj-steps{
        margin-top:14px;
        padding-top:16px;
    }
}
@media (max-width: 620px){
    .vntsj-root .vntsj-scene--transport{
        padding-bottom:150px !important;
    }
    .vntsj-root .vntsj-cine__dot{
        flex-basis:240px;
        min-height:116px;
    }
    .vntsj-root .vntsj-steps{
        margin-top:12px;
        padding-top:14px;
    }
}


/* =============================================================
   AUTO PERGAMINOS JOURNEY v2.8.7 — TRUE RED + STEP 5 HEIGHT / MOBILE NAV FIX
   1) Push red away from gold/yellow into a cleaner true red.
   2) Give Step 5 more height/spacing so elements do not collide.
   3) Fix mobile step pills so nothing gets cut off.
   ============================================================= */

/* TRUE RED cleanup */
.vntsj-root .vntsj-swatch[data-vntsj-color="red"]{
    --vntsj-swatch:#cc0f2f !important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.12), 0 14px 28px rgba(204,15,47,.30) !important;
}
.vntsj-root[data-vntsj-color="red"] .vntsj-scene--select .vntsj-car-card__media .vntsj-vehicle-img,
.vntsj-root[data-vntsj-color="red"] .vntsj-vehicle-img,
.vntsj-root[data-vntsj-color="red"] .vntsj-cine__car,
.vntsj-root[data-vntsj-color="red"] .vntsj-main-car-img{
    filter:grayscale(1) sepia(1) hue-rotate(318deg) saturate(3400%) brightness(.70) contrast(1.34) drop-shadow(0 24px 38px rgba(0,0,0,.56)) !important;
}

/* Step 5 spacing / separation */
.vntsj-root .vntsj-scene--transport{
    padding-top:clamp(52px,5.2vw,84px) !important;
    padding-bottom:clamp(220px,17vw,300px) !important;
}
.vntsj-root .vntsj-scene--transport .vntsj-scene__inner{
    gap:24px !important;
}
.vntsj-root .vntsj-cine{
    gap:20px !important;
    margin-bottom:12px !important;
}
.vntsj-root .vntsj-cine__viewport{
    height:clamp(520px, 62vw, 760px) !important;
}
.vntsj-root .vntsj-cine__panel{
    margin-bottom:8px !important;
}
.vntsj-root .vntsj-cine__progress{
    padding:8px 2px 22px !important;
    margin-bottom:14px !important;
}
.vntsj-root .vntsj-transport__readout--cinematic{
    margin-top:6px !important;
    margin-bottom:20px !important;
}
.vntsj-root .vntsj-steps{
    z-index:80 !important;
    margin-top:20px !important;
    padding-top:18px !important;
}
/* more room for scene 5 overall */
.vntsj-root:not(.is-fullscreen)[data-vntsj-current-scene="5"]{min-height:1500px !important;}

/* transport nav/action safety */
.vntsj-root .vntsj-scene--transport .vntsj-action-row{
    flex-wrap:wrap !important;
    row-gap:10px !important;
}

@media (max-width: 900px){
    .vntsj-root .vntsj-scene--transport{
        padding-top:94px !important;
        padding-bottom:190px !important;
    }
    .vntsj-root .vntsj-cine__viewport{
        height:clamp(480px, 72vw, 640px) !important;
    }
    .vntsj-root:not(.is-fullscreen)[data-vntsj-current-scene="5"]{min-height:1560px !important;}
    .vntsj-root .vntsj-steps{
        margin-top:16px !important;
        padding-top:16px !important;
    }
}

@media (max-width: 620px){
    .vntsj-root .vntsj-scene--transport{
        padding-top:106px !important;
        padding-bottom:212px !important;
    }
    .vntsj-root .vntsj-cine__viewport{
        height:540px !important;
        border-radius:18px !important;
    }
    .vntsj-root .vntsj-cine__panel{
        padding:16px 14px !important;
    }
    .vntsj-root .vntsj-cine__panel h3{
        font-size:clamp(21px,7vw,30px) !important;
        line-height:1.08 !important;
    }
    .vntsj-root .vntsj-cine__panel p{
        font-size:13.5px !important;
        line-height:1.55 !important;
    }
    .vntsj-root .vntsj-cine__counter{
        width:74px !important;
        height:74px !important;
    }
    .vntsj-root .vntsj-cine__counter span{font-size:30px !important;}
    .vntsj-root .vntsj-cine__dot{
        flex-basis:228px !important;
        min-height:120px !important;
    }
    .vntsj-root .vntsj-transport__readout--cinematic > div{
        min-height:68px !important;
        padding:12px 12px !important;
    }
    .vntsj-root:not(.is-fullscreen)[data-vntsj-current-scene="5"]{min-height:1700px !important;}

    /* MOBILE BOTTOM STEP NAV FIX */
    .vntsj-root .vntsj-steps{
        display:flex !important;
        flex-wrap:wrap !important;
        justify-content:center !important;
        gap:8px !important;
        overflow:visible !important;
        padding:14px 10px 18px !important;
        margin-top:12px !important;
    }
    .vntsj-root .vntsj-pill{
        flex:0 1 auto !important;
        padding:8px 11px !important;
        font-size:9.5px !important;
        letter-spacing:.12em !important;
        max-width:calc(50% - 8px);
    }
}

@media (max-width: 420px){
    .vntsj-root .vntsj-scene--transport{
        padding-bottom:226px !important;
    }
    .vntsj-root:not(.is-fullscreen)[data-vntsj-current-scene="5"]{min-height:1760px !important;}
    .vntsj-root .vntsj-pill{
        font-size:9px !important;
        padding:8px 10px !important;
        letter-spacing:.10em !important;
    }
}


/* =============================================================
   AUTO PERGAMINOS JOURNEY v2.8.8 — STEP 4/5 AUTOFOCUS + RED FIX + LESS TALL STEP 5
   1) Step 4 and Step 5 auto-scroll land higher so the user reads immediately.
   2) Step 4 gets safer spacing so the descriptive paragraph is not clipped.
   3) Step 5 visual scene is reduced in height a bit, with safer layout under it.
   4) Red is pushed further away from yellow/gold and closer to a clean red.
   ============================================================= */

/* True red — cleaner red, no gold tone */
.vntsj-root .vntsj-swatch[data-vntsj-color="red"]{
    --vntsj-swatch:#d0002a !important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.12), 0 14px 28px rgba(208,0,42,.30) !important;
}
.vntsj-root[data-vntsj-color="red"] .vntsj-scene--select .vntsj-car-card__media .vntsj-vehicle-img,
.vntsj-root[data-vntsj-color="red"] .vntsj-vehicle-img,
.vntsj-root[data-vntsj-color="red"] .vntsj-cine__car,
.vntsj-root[data-vntsj-color="red"] .vntsj-main-car-img{
    filter:grayscale(1) sepia(1) hue-rotate(328deg) saturate(2600%) brightness(.73) contrast(1.30) drop-shadow(0 24px 38px rgba(0,0,0,.56)) !important;
}

/* STEP 4 — more readable landing area */
.vntsj-root .vntsj-scene--route{
    padding-top:clamp(56px,5vw,86px) !important;
    padding-bottom:clamp(190px,14vw,250px) !important;
}
.vntsj-root .vntsj-scene--route .vntsj-scene__inner{
    gap:20px !important;
    max-width:1100px !important;
}
.vntsj-root .vntsj-scene--route .vntsj-h2{
    margin-bottom:2px !important;
}
.vntsj-root .vntsj-scene--route .vntsj-sub{
    max-width:980px !important;
    margin:0 auto 6px !important;
    line-height:1.62 !important;
}
.vntsj-root:not(.is-fullscreen)[data-vntsj-current-scene="4"]{min-height:1340px !important;}

/* STEP 5 — slightly less tall viewport + safer spacing below */
.vntsj-root .vntsj-scene--transport{
    padding-top:clamp(46px,4.6vw,76px) !important;
    padding-bottom:clamp(230px,17vw,300px) !important;
}
.vntsj-root .vntsj-scene--transport .vntsj-scene__inner{
    gap:20px !important;
}
.vntsj-root .vntsj-cine{
    gap:16px !important;
    margin-bottom:8px !important;
}
.vntsj-root .vntsj-cine__viewport{
    height:clamp(455px, 50vw, 610px) !important;
}
.vntsj-root .vntsj-cine__panel{
    padding:18px 20px !important;
}
.vntsj-root .vntsj-cine__progress{
    padding:6px 2px 16px !important;
    margin-bottom:8px !important;
}
.vntsj-root .vntsj-transport__readout--cinematic{
    margin-top:2px !important;
    margin-bottom:12px !important;
}
.vntsj-root .vntsj-steps{
    margin-top:12px !important;
    padding-top:14px !important;
}
.vntsj-root:not(.is-fullscreen)[data-vntsj-current-scene="5"]{min-height:1440px !important;}

@media (max-width: 900px){
    .vntsj-root:not(.is-fullscreen)[data-vntsj-current-scene="4"]{min-height:1400px !important;}
    .vntsj-root .vntsj-scene--transport{
        padding-top:92px !important;
        padding-bottom:188px !important;
    }
    .vntsj-root .vntsj-cine__viewport{
        height:470px !important;
    }
    .vntsj-root:not(.is-fullscreen)[data-vntsj-current-scene="5"]{min-height:1500px !important;}
}

@media (max-width: 620px){
    .vntsj-root .vntsj-scene--route{
        padding-top:102px !important;
        padding-bottom:180px !important;
    }
    .vntsj-root .vntsj-scene--route .vntsj-sub{
        font-size:13.6px !important;
        line-height:1.58 !important;
    }
    .vntsj-root:not(.is-fullscreen)[data-vntsj-current-scene="4"]{min-height:1480px !important;}
    .vntsj-root .vntsj-scene--transport{
        padding-top:102px !important;
        padding-bottom:206px !important;
    }
    .vntsj-root .vntsj-cine__viewport{
        height:418px !important;
    }
    .vntsj-root .vntsj-cine__panel{
        padding:15px 14px !important;
    }
    .vntsj-root .vntsj-cine__dot{
        flex-basis:220px !important;
        min-height:112px !important;
    }
    .vntsj-root:not(.is-fullscreen)[data-vntsj-current-scene="5"]{min-height:1580px !important;}
}


/* =============================================================
   AUTO PERGAMINOS JOURNEY v2.8.9 — STEP 5 SLIGHT SHRINK
   User request: make Step 5 a little smaller because the 01 / 02 / 03 / 04
   substep cards at the bottom are getting cut off.
   ============================================================= */

/* desktop / large tablet */
.vntsj-root .vntsj-scene--transport .vntsj-cine{
    gap:14px !important;
}
.vntsj-root .vntsj-scene--transport .vntsj-cine__viewport{
    height:clamp(420px, 46vw, 545px) !important;
}
.vntsj-root .vntsj-scene--transport .vntsj-cine__panel{
    padding:16px 18px !important;
}
.vntsj-root .vntsj-scene--transport .vntsj-cine__counter{
    width:76px !important;
    height:76px !important;
}
.vntsj-root .vntsj-scene--transport .vntsj-cine__counter span{
    font-size:29px !important;
}
.vntsj-root .vntsj-scene--transport .vntsj-cine__progress{
    padding:4px 2px 12px !important;
    margin-bottom:6px !important;
}
.vntsj-root .vntsj-scene--transport .vntsj-cine__dot{
    flex-basis:220px !important;
    min-height:104px !important;
    padding:12px 12px 13px !important;
}
.vntsj-root .vntsj-scene--transport .vntsj-cine__dot strong{
    font-size:12.5px !important;
}
.vntsj-root .vntsj-scene--transport .vntsj-cine__dot em{
    font-size:11px !important;
}
.vntsj-root:not(.is-fullscreen)[data-vntsj-current-scene="5"]{
    min-height:1380px !important;
}

@media (max-width: 900px){
    .vntsj-root .vntsj-scene--transport .vntsj-cine__viewport{
        height:430px !important;
    }
    .vntsj-root .vntsj-scene--transport .vntsj-cine__counter{
        width:72px !important;
        height:72px !important;
    }
    .vntsj-root .vntsj-scene--transport .vntsj-cine__dot{
        flex-basis:208px !important;
        min-height:100px !important;
    }
    .vntsj-root:not(.is-fullscreen)[data-vntsj-current-scene="5"]{
        min-height:1440px !important;
    }
}

@media (max-width: 620px){
    .vntsj-root .vntsj-scene--transport .vntsj-cine__viewport{
        height:390px !important;
    }
    .vntsj-root .vntsj-scene--transport .vntsj-cine__panel{
        padding:14px 13px !important;
    }
    .vntsj-root .vntsj-scene--transport .vntsj-cine__counter{
        width:68px !important;
        height:68px !important;
    }
    .vntsj-root .vntsj-scene--transport .vntsj-cine__counter span{
        font-size:27px !important;
    }
    .vntsj-root .vntsj-scene--transport .vntsj-cine__progress{
        padding:4px 2px 10px !important;
    }
    .vntsj-root .vntsj-scene--transport .vntsj-cine__dot{
        flex-basis:206px !important;
        min-height:98px !important;
        padding:11px 11px 12px !important;
    }
    .vntsj-root:not(.is-fullscreen)[data-vntsj-current-scene="5"]{
        min-height:1500px !important;
    }
}

/* =============================================================
   ╭───────────────────────────────────────────────────────╮
   │  v3.0.0  ·  PREMIUM GRAPHICS OVERHAUL                 │
   │  Drop-in layer — does not touch existing JS hooks.    │
   ╰───────────────────────────────────────────────────────╯
   ============================================================= */

/* ---- 1. SCENE-5 — Promote new SVG art, suppress placeholders ---- */

/* Suppress the old CSS-drawn placeholder spans inside the cinematic viewport
   so the new illustrated SVG scenes own the visuals.                       */
.vntsj-root .vntsj-cine__viewport .vntsj-cine__sky,
.vntsj-root .vntsj-cine__viewport .vntsj-cine__sun,
.vntsj-root .vntsj-cine__viewport .vntsj-cine__city,
.vntsj-root .vntsj-cine__viewport .vntsj-cine__garage,
.vntsj-root .vntsj-cine__viewport .vntsj-cine__worktools,
.vntsj-root .vntsj-cine__viewport .vntsj-cine__checkboard,
.vntsj-root .vntsj-cine__viewport .vntsj-cine__diag,
.vntsj-root .vntsj-cine__viewport .vntsj-cine__scanbeam,
.vntsj-root .vntsj-cine__viewport .vntsj-cine__liftarms,
.vntsj-root .vntsj-cine__viewport .vntsj-cine__beacon,
.vntsj-root .vntsj-cine__viewport .vntsj-cine__teamhub,
.vntsj-root .vntsj-cine__viewport .vntsj-cine__routepins,
.vntsj-root .vntsj-cine__viewport .vntsj-cine__handover-card,
.vntsj-root .vntsj-cine__viewport .vntsj-cine__road,
.vntsj-root .vntsj-cine__viewport .vntsj-cine__route-line,
.vntsj-root .vntsj-cine__viewport .vntsj-cine__worker,
.vntsj-root .vntsj-cine__viewport .vntsj-cine__customer {
    display: none !important;
}

/* Premium SVG art container — fills the viewport behind the car image */
.vntsj-root .vntsj-art {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
    border-radius: inherit;
    color: #cfd9ee;
}

.vntsj-root .vntsj-art__scene {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: scale(1.04);
    filter: blur(2px) saturate(.92);
    transition:
        opacity .7s var(--vntsj-ease),
        transform 1s var(--vntsj-ease),
        filter .7s var(--vntsj-ease);
}

.vntsj-root .vntsj-art__scene.is-active {
    opacity: 1;
    transform: scale(1);
    filter: blur(0) saturate(1);
}

/* Per-step active rule — uses transport-step data attribute set by JS */
.vntsj-root[data-vntsj-transport-step="0"] .vntsj-art__scene--0,
.vntsj-root[data-vntsj-transport-step="1"] .vntsj-art__scene--1,
.vntsj-root[data-vntsj-transport-step="2"] .vntsj-art__scene--2,
.vntsj-root[data-vntsj-transport-step="3"] .vntsj-art__scene--3 {
    opacity: 1;
    transform: scale(1);
    filter: blur(0) saturate(1);
}

.vntsj-root[data-vntsj-transport-step="0"] .vntsj-art__scene:not(.vntsj-art__scene--0),
.vntsj-root[data-vntsj-transport-step="1"] .vntsj-art__scene:not(.vntsj-art__scene--1),
.vntsj-root[data-vntsj-transport-step="2"] .vntsj-art__scene:not(.vntsj-art__scene--2),
.vntsj-root[data-vntsj-transport-step="3"] .vntsj-art__scene:not(.vntsj-art__scene--3) {
    opacity: 0 !important;
}

/* Subtle animations baked into the scenes */
@keyframes vntsj-art-pulse {
    0%, 100% { opacity: .85; transform: translate(400px, 200px) scale(1); }
    50%      { opacity: .45; transform: translate(400px, 200px) scale(1.25); }
}
.vntsj-root .vntsj-art__pulse {
    transform-origin: 400px 200px;
    animation: vntsj-art-pulse 2.6s ease-in-out infinite;
}

@keyframes vntsj-art-dash {
    from { stroke-dashoffset: 0; }
    to   { stroke-dashoffset: -92; }
}
.vntsj-root .vntsj-art__dash {
    animation: vntsj-art-dash 1.4s linear infinite;
}

@keyframes vntsj-art-truck {
    0%   { transform: translate(280px, 232px); }
    50%  { transform: translate(310px, 232px); }
    100% { transform: translate(280px, 232px); }
}
.vntsj-root .vntsj-art__truck {
    animation: vntsj-art-truck 5.5s ease-in-out infinite;
}

@keyframes vntsj-art-beam {
    0%   { transform: translate(380px, 215px) scaleY(.7); opacity: .5; }
    50%  { transform: translate(380px, 215px) scaleY(1.05); opacity: 1; }
    100% { transform: translate(380px, 215px) scaleY(.7); opacity: .5; }
}
.vntsj-root .vntsj-art__beam {
    transform-origin: 380px 215px;
    animation: vntsj-art-beam 2.2s ease-in-out infinite;
}

@keyframes vntsj-art-confetti-fall {
    0%   { transform: translateY(-18px) rotate(0deg); opacity: 0; }
    10%  { opacity: 1; }
    100% { transform: translateY(60px)  rotate(60deg); opacity: 0; }
}
.vntsj-root .vntsj-art__confetti rect {
    animation: vntsj-art-confetti-fall 3s ease-in infinite;
    transform-origin: center;
}
.vntsj-root .vntsj-art__confetti rect:nth-child(2)  { animation-delay: .2s;  }
.vntsj-root .vntsj-art__confetti rect:nth-child(3)  { animation-delay: .55s; }
.vntsj-root .vntsj-art__confetti rect:nth-child(4)  { animation-delay: .9s;  }
.vntsj-root .vntsj-art__confetti rect:nth-child(5)  { animation-delay: 1.1s; }
.vntsj-root .vntsj-art__confetti rect:nth-child(6)  { animation-delay: 1.4s; }

@keyframes vntsj-art-key {
    0%   { transform: translate(378px, 232px); }
    50%  { transform: translate(420px, 232px); }
    100% { transform: translate(378px, 232px); }
}
.vntsj-root .vntsj-art__keys {
    transform-origin: center;
    animation: vntsj-art-key 2.8s ease-in-out infinite;
}

/* Subtle gradient haze on top of every art scene for cinematic depth */
.vntsj-root .vntsj-cine__viewport::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    background:
        radial-gradient(60% 40% at 50% 110%, rgba(0,0,0,.55), transparent 60%),
        linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,0) 28%, rgba(0,0,0,.32) 100%);
    border-radius: inherit;
}

/* Ensure the car image floats above the new art layer */
.vntsj-root .vntsj-cine__viewport .vntsj-cine__car-wrap,
.vntsj-root .vntsj-cine__viewport .vntsj-cine__hud,
.vntsj-root .vntsj-cine__viewport .vntsj-cine__location {
    z-index: 5;
}
.vntsj-root .vntsj-cine__viewport .vntsj-cine__car {
    filter:
        drop-shadow(0 18px 22px rgba(0,0,0,.55))
        drop-shadow(0 4px 6px rgba(0,0,0,.4));
    transition: transform .8s var(--vntsj-ease), filter .6s var(--vntsj-ease);
}

/* Per-substep car positioning so it interacts with each scene */
.vntsj-root[data-vntsj-transport-step="0"] .vntsj-cine__viewport .vntsj-cine__car { transform: translateX(-2%) scale(.78); }
.vntsj-root[data-vntsj-transport-step="1"] .vntsj-cine__viewport .vntsj-cine__car { transform: translateX(2%)  scale(.62); filter: drop-shadow(0 12px 14px rgba(0,0,0,.55)); }
.vntsj-root[data-vntsj-transport-step="2"] .vntsj-cine__viewport .vntsj-cine__car { transform: translate(0%, -8%) scale(.88); }
.vntsj-root[data-vntsj-transport-step="3"] .vntsj-cine__viewport .vntsj-cine__car { transform: translateX(0%) scale(1); }

/* HUD chip — modernise typography */
.vntsj-root .vntsj-cine__hud {
    backdrop-filter: blur(14px) saturate(1.2);
    background: linear-gradient(135deg, rgba(8,12,22,.78), rgba(8,12,22,.45)) !important;
    border: 1px solid rgba(127,182,255,.22) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.04) !important;
}

/* ---- 2. SCENE-3 — Polished inspection HUD overlay ---- */

.vntsj-root .vntsj-inspect {
    position: relative;
    overflow: hidden;
}
.vntsj-root .vntsj-inspect__hud {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    color: #9bd0ff;
    opacity: 0;
    transition: opacity .5s var(--vntsj-ease);
}
.vntsj-root .vntsj-scene--inspect.is-active .vntsj-inspect__hud {
    opacity: .9;
}
.vntsj-root .vntsj-inspect__corner {
    color: #9bd0ff;
    opacity: .85;
}
@keyframes vntsj-inspect-corner-pulse {
    0%, 100% { opacity: .95; }
    50%      { opacity: .35; }
}
.vntsj-root .vntsj-scene--inspect.is-active .vntsj-inspect__corner {
    animation: vntsj-inspect-corner-pulse 2.2s ease-in-out infinite;
}
@keyframes vntsj-inspect-reticle-rotate {
    from { transform: rotate(0deg);   transform-origin: 160px 180px; }
    to   { transform: rotate(360deg); transform-origin: 160px 180px; }
}
.vntsj-root .vntsj-scene--inspect.is-active .vntsj-inspect__reticle {
    animation: vntsj-inspect-reticle-rotate 9s linear infinite;
    transform-origin: 160px 180px;
}
.vntsj-root .vntsj-scene--inspect.is-active .vntsj-inspect__reticle--b {
    animation-duration: 11s;
    animation-direction: reverse;
    transform-origin: 440px 200px;
}

/* Sweep line — upgrade the existing data-vntsj-scan visual */
.vntsj-root .vntsj-inspect__scan {
    background: linear-gradient(
        180deg,
        rgba(127,182,255,0) 0%,
        rgba(127,182,255,.55) 48%,
        rgba(155,208,255,.95) 50%,
        rgba(127,182,255,.55) 52%,
        rgba(127,182,255,0) 100%
    ) !important;
    filter: drop-shadow(0 0 12px rgba(127,182,255,.65));
}

/* Checks list — give it more deliberate styling */
.vntsj-root .vntsj-inspect__checks li {
    transition: color .3s var(--vntsj-ease), transform .3s var(--vntsj-ease);
}
.vntsj-root .vntsj-inspect__checks li.is-checked {
    transform: translateX(2px);
}
.vntsj-root .vntsj-inspect__checks li.is-checked span {
    background: #1f9d4d !important;
    box-shadow: 0 0 0 4px rgba(31,157,77,.18), 0 4px 12px rgba(31,157,77,.35) !important;
}

/* ---- 3. SCENE-4 — Polished route cards with map illustrations ---- */

.vntsj-root .vntsj-route {
    background: linear-gradient(155deg, rgba(255,255,255,.04), rgba(255,255,255,.015)) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,.04) inset,
        0 24px 60px -28px rgba(0,0,0,.7),
        0 8px 20px -10px rgba(0,0,0,.45) !important;
    transition: transform .35s var(--vntsj-ease), border-color .35s var(--vntsj-ease), box-shadow .35s var(--vntsj-ease) !important;
}
.vntsj-root .vntsj-route:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(231,231,231,.34) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,.07) inset,
        0 36px 80px -28px rgba(0,0,0,.85),
        0 14px 28px -10px rgba(127,182,255,.18) !important;
}
.vntsj-root .vntsj-route__badge {
    background: linear-gradient(135deg, rgba(127,182,255,.18), rgba(127,182,255,.05)) !important;
    border: 1px solid rgba(127,182,255,.32) !important;
    color: #cfe2ff !important;
    text-shadow: 0 1px 0 rgba(0,0,0,.45);
}
.vntsj-root .vntsj-route[data-vntsj-route="direct"] .vntsj-route__badge {
    background: linear-gradient(135deg, rgba(255,180,90,.22), rgba(255,180,90,.05)) !important;
    border-color: rgba(255,180,90,.42) !important;
    color: #ffd9a8 !important;
}
.vntsj-root .vntsj-route__line {
    filter: drop-shadow(0 0 6px rgba(127,182,255,.6));
}
.vntsj-root .vntsj-route[data-vntsj-route="direct"] .vntsj-route__line {
    filter: drop-shadow(0 0 6px rgba(255,180,90,.55));
}
.vntsj-root .vntsj-route__meta li::before {
    background: linear-gradient(135deg, #7fb6ff, #2d6dd6) !important;
    box-shadow: 0 0 0 2px rgba(127,182,255,.18) !important;
}
.vntsj-root .vntsj-route[data-vntsj-route="direct"] .vntsj-route__meta li::before {
    background: linear-gradient(135deg, #ffd066, #d8862a) !important;
    box-shadow: 0 0 0 2px rgba(255,180,90,.18) !important;
}

/* ---- 4. SCENE-1 — Vehicle cards & color swatches ---- */

.vntsj-root .vntsj-car-card {
    background: linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,.015)) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,.04) inset,
        0 18px 40px -20px rgba(0,0,0,.65) !important;
    transition: transform .3s var(--vntsj-ease), border-color .3s var(--vntsj-ease), box-shadow .3s var(--vntsj-ease) !important;
}
.vntsj-root .vntsj-car-card:hover {
    transform: translateY(-3px) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,.07) inset,
        0 28px 56px -20px rgba(0,0,0,.8) !important;
}
.vntsj-root .vntsj-car-card.is-selected {
    border-color: rgba(231,231,231,.42) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,.09) inset,
        0 28px 56px -20px rgba(0,0,0,.8),
        0 0 0 1px rgba(231,231,231,.18) !important;
}

.vntsj-root .vntsj-swatch {
    position: relative;
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    background: var(--vntsj-swatch);
    border: 2px solid rgba(255,255,255,.18) !important;
    cursor: pointer;
    transition: transform .25s var(--vntsj-ease), box-shadow .25s var(--vntsj-ease), border-color .25s var(--vntsj-ease);
    box-shadow:
        inset 0 4px 6px rgba(255,255,255,.18),
        inset 0 -4px 8px rgba(0,0,0,.35),
        0 4px 10px rgba(0,0,0,.4);
}
.vntsj-root .vntsj-swatch:hover { transform: scale(1.12); }
.vntsj-root .vntsj-swatch.is-selected {
    transform: scale(1.18);
    border-color: rgba(255,255,255,.85) !important;
    box-shadow:
        inset 0 4px 6px rgba(255,255,255,.22),
        inset 0 -4px 8px rgba(0,0,0,.4),
        0 0 0 3px rgba(255,255,255,.18),
        0 6px 14px rgba(0,0,0,.45);
}

/* ---- 5. SCENE-2 — Choice cards refinement ---- */

.vntsj-root .vntsj-choice {
    background: linear-gradient(155deg, rgba(255,255,255,.045), rgba(255,255,255,.015)) !important;
    border: 1px solid rgba(255,255,255,.09) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,.05) inset,
        0 22px 50px -22px rgba(0,0,0,.7) !important;
    transition: transform .35s var(--vntsj-ease), border-color .35s var(--vntsj-ease), box-shadow .35s var(--vntsj-ease) !important;
}
.vntsj-root .vntsj-choice:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(231,231,231,.34) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,.08) inset,
        0 32px 70px -22px rgba(0,0,0,.85),
        0 12px 24px -8px rgba(127,182,255,.18) !important;
}
.vntsj-root .vntsj-choice__icon--xl {
    width: 76px !important;
    height: 76px !important;
    border-radius: 18px !important;
    background: linear-gradient(155deg, rgba(127,182,255,.16), rgba(127,182,255,.02)) !important;
    border: 1px solid rgba(127,182,255,.22) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #cfe2ff;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 8px 20px rgba(0,0,0,.35);
    transition: transform .35s var(--vntsj-ease);
}
.vntsj-root .vntsj-choice__icon--xl svg {
    width: 44px !important;
    height: 44px !important;
}
.vntsj-root .vntsj-choice:hover .vntsj-choice__icon--xl {
    transform: rotate(-3deg) scale(1.05);
}

/* ---- 6. SCENE-6 — Delivery celebration art ---- */

.vntsj-root .vntsj-delivery {
    position: relative;
    overflow: hidden;
}
.vntsj-root .vntsj-delivery__art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    color: #ffd066;
    opacity: 0;
    transition: opacity 1s var(--vntsj-ease) .15s;
}
.vntsj-root .vntsj-scene--delivery.is-active .vntsj-delivery__art {
    opacity: .95;
}

@keyframes vntsj-delivery-ray {
    0%, 100% { opacity: .35; }
    50%      { opacity: .9;  }
}
.vntsj-root .vntsj-scene--delivery.is-active .vntsj-delivery__rays line {
    animation: vntsj-delivery-ray 2.4s ease-in-out infinite;
}
.vntsj-root .vntsj-scene--delivery.is-active .vntsj-delivery__rays line:nth-child(2) { animation-delay: .15s; }
.vntsj-root .vntsj-scene--delivery.is-active .vntsj-delivery__rays line:nth-child(3) { animation-delay: .3s;  }
.vntsj-root .vntsj-scene--delivery.is-active .vntsj-delivery__rays line:nth-child(4) { animation-delay: .45s; }
.vntsj-root .vntsj-scene--delivery.is-active .vntsj-delivery__rays line:nth-child(5) { animation-delay: .6s;  }
.vntsj-root .vntsj-scene--delivery.is-active .vntsj-delivery__rays line:nth-child(6) { animation-delay: .75s; }
.vntsj-root .vntsj-scene--delivery.is-active .vntsj-delivery__rays line:nth-child(7) { animation-delay: .9s;  }

@keyframes vntsj-delivery-confetti-fall {
    0%   { transform: translateY(-30px) rotate(0deg);   opacity: 0; }
    10%  { opacity: 1; }
    100% { transform: translateY(80px)  rotate(140deg); opacity: 0; }
}
.vntsj-root .vntsj-scene--delivery.is-active .vntsj-delivery__confetti rect,
.vntsj-root .vntsj-scene--delivery.is-active .vntsj-delivery__confetti circle {
    animation: vntsj-delivery-confetti-fall 3.4s ease-in infinite;
    transform-origin: center;
}
.vntsj-root .vntsj-scene--delivery.is-active .vntsj-delivery__confetti rect:nth-child(2) { animation-delay: .25s; }
.vntsj-root .vntsj-scene--delivery.is-active .vntsj-delivery__confetti rect:nth-child(3) { animation-delay: .55s; }
.vntsj-root .vntsj-scene--delivery.is-active .vntsj-delivery__confetti rect:nth-child(4) { animation-delay: .9s;  }
.vntsj-root .vntsj-scene--delivery.is-active .vntsj-delivery__confetti rect:nth-child(5) { animation-delay: 1.2s; }
.vntsj-root .vntsj-scene--delivery.is-active .vntsj-delivery__confetti rect:nth-child(6) { animation-delay: 1.5s; }
.vntsj-root .vntsj-scene--delivery.is-active .vntsj-delivery__confetti circle:nth-child(7) { animation-delay: 1.7s; }
.vntsj-root .vntsj-scene--delivery.is-active .vntsj-delivery__confetti circle:nth-child(8) { animation-delay: 2.0s; }
.vntsj-root .vntsj-scene--delivery.is-active .vntsj-delivery__confetti circle:nth-child(9) { animation-delay: 2.3s; }
.vntsj-root .vntsj-scene--delivery.is-active .vntsj-delivery__confetti circle:nth-child(10){ animation-delay: 2.6s; }

@keyframes vntsj-delivery-ribbon-in {
    from { opacity: 0; transform: translate(300px, 80px) scale(.6); }
    to   { opacity: 1; transform: translate(300px, 110px) scale(1); }
}
.vntsj-root .vntsj-scene--delivery.is-active .vntsj-delivery__ribbon {
    transform-origin: 300px 110px;
    animation: vntsj-delivery-ribbon-in .9s var(--vntsj-ease) .3s both;
}

/* Push the existing halo behind the new art */
.vntsj-root .vntsj-delivery__halo { z-index: 0; }
.vntsj-root .vntsj-delivery__car  { position: relative; z-index: 3; }
.vntsj-root .vntsj-delivery__check{ z-index: 4; }

/* ---- 7. Modernise topbar / progress / pills ---- */

.vntsj-root .vntsj-topbar {
    backdrop-filter: blur(20px) saturate(1.2);
    background: linear-gradient(180deg, rgba(8,8,12,.72), rgba(8,8,12,.42)) !important;
    border-bottom: 1px solid rgba(255,255,255,.05);
}
.vntsj-root .vntsj-brand__mark {
    background: linear-gradient(135deg, #f4f4f4 0%, #b8b8b8 100%) !important;
    color: #0a0a0a !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.7),
        inset 0 -2px 4px rgba(0,0,0,.2),
        0 6px 16px rgba(0,0,0,.45) !important;
    text-shadow: none !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
}
.vntsj-root .vntsj-progress__bar {
    background: linear-gradient(90deg, #ffffff, #b8b8b8) !important;
    box-shadow: 0 0 12px rgba(255,255,255,.45);
}
.vntsj-root .vntsj-pill.is-completed {
    background: linear-gradient(135deg, rgba(31,157,77,.18), rgba(31,157,77,.04)) !important;
    border-color: rgba(31,157,77,.42) !important;
    color: #9af0b6 !important;
}
.vntsj-root .vntsj-pill.is-active {
    background: linear-gradient(135deg, #f4f4f4, #d8d8d8) !important;
    color: #0a0a0a !important;
    border-color: transparent !important;
    box-shadow: 0 8px 22px rgba(255,255,255,.18), inset 0 -2px 4px rgba(0,0,0,.18) !important;
}

/* ---- 8. Primary action button — chrome-style polish ---- */

.vntsj-root .vntsj-action--primary {
    background: linear-gradient(180deg, #ffffff 0%, #c8c8c8 100%) !important;
    color: #0a0a0a !important;
    border: 1px solid rgba(255,255,255,.7) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9),
        inset 0 -2px 4px rgba(0,0,0,.18),
        0 10px 26px rgba(0,0,0,.45),
        0 4px 10px rgba(255,255,255,.06) !important;
    transition: transform .25s var(--vntsj-ease), box-shadow .25s var(--vntsj-ease), filter .25s var(--vntsj-ease) !important;
}
.vntsj-root .vntsj-action--primary:hover:not([disabled]) {
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,1),
        inset 0 -2px 4px rgba(0,0,0,.2),
        0 16px 36px rgba(0,0,0,.55),
        0 6px 14px rgba(255,255,255,.08) !important;
    filter: brightness(1.04);
}
.vntsj-root .vntsj-action--primary[disabled] {
    filter: grayscale(.4) brightness(.7);
    cursor: not-allowed;
}

/* ---- 9. Step-tag pill — subtle premium feel ---- */

.vntsj-root .vntsj-step-tag {
    background: linear-gradient(135deg, rgba(127,182,255,.14), rgba(127,182,255,.02)) !important;
    border: 1px solid rgba(127,182,255,.28) !important;
    color: #cfe2ff !important;
    backdrop-filter: blur(6px);
}

/* ---- 10. Cinematic counter & progress dots — sharper hierarchy ---- */

.vntsj-root .vntsj-cine__counter {
    background: linear-gradient(155deg, rgba(255,255,255,.06), rgba(255,255,255,.015)) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 14px 30px rgba(0,0,0,.5) !important;
}
.vntsj-root .vntsj-cine__counter span {
    background: linear-gradient(135deg, #ffffff, #b8b8b8);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none !important;
    font-weight: 800 !important;
}
.vntsj-root .vntsj-cine__dot {
    background: linear-gradient(155deg, rgba(255,255,255,.04), rgba(255,255,255,.01)) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    transition: transform .3s var(--vntsj-ease), border-color .3s var(--vntsj-ease), background .3s var(--vntsj-ease), box-shadow .3s var(--vntsj-ease);
}
.vntsj-root .vntsj-cine__dot:hover {
    transform: translateY(-2px);
    border-color: rgba(127,182,255,.42) !important;
}
.vntsj-root .vntsj-cine__dot.is-active {
    background: linear-gradient(135deg, rgba(127,182,255,.18), rgba(127,182,255,.04)) !important;
    border-color: rgba(127,182,255,.62) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 14px 32px rgba(127,182,255,.18) !important;
}
.vntsj-root .vntsj-cine__dot.is-complete {
    background: linear-gradient(135deg, rgba(31,157,77,.12), rgba(31,157,77,.02)) !important;
    border-color: rgba(31,157,77,.42) !important;
}
.vntsj-root .vntsj-cine__dot.is-complete::after {
    content: '✓';
    position: absolute;
    top: 8px;
    right: 12px;
    color: #9af0b6;
    font-weight: 800;
    font-size: 13px;
}

/* ---- 11. Cine badge — better visual hierarchy ---- */

.vntsj-root .vntsj-cine__badge {
    background: linear-gradient(135deg, rgba(127,182,255,.22), rgba(127,182,255,.05)) !important;
    border: 1px solid rgba(127,182,255,.42) !important;
    color: #cfe2ff !important;
    text-shadow: 0 1px 0 rgba(0,0,0,.35);
}
.vntsj-root[data-vntsj-route-mode="direct"] .vntsj-cine__badge {
    background: linear-gradient(135deg, rgba(255,180,90,.22), rgba(255,180,90,.05)) !important;
    border-color: rgba(255,180,90,.52) !important;
    color: #ffd9a8 !important;
}
.vntsj-root .vntsj-cine__badge--soft {
    background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02)) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    color: rgba(244,244,244,.72) !important;
}

/* ---- 12. Readout (route type / progress / eta) — refined dashboard look ---- */

.vntsj-root .vntsj-transport__readout--cinematic {
    background: linear-gradient(155deg, rgba(255,255,255,.045), rgba(255,255,255,.01)) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 18px 40px rgba(0,0,0,.4) !important;
}
.vntsj-root .vntsj-readout__lbl {
    color: rgba(244,244,244,.45) !important;
    letter-spacing: 2px !important;
    font-weight: 700 !important;
}
.vntsj-root .vntsj-readout__val {
    background: linear-gradient(135deg, #ffffff, #c8c8c8) !important;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
}

/* ---- 13. Summary tiles on delivery scene — premium chips ---- */

.vntsj-root .vntsj-summary > div {
    background: linear-gradient(155deg, rgba(255,255,255,.045), rgba(255,255,255,.01)) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 14px !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 10px 24px rgba(0,0,0,.4) !important;
}
.vntsj-root .vntsj-summary__lbl {
    color: rgba(244,244,244,.45) !important;
    letter-spacing: 2px !important;
}
.vntsj-root .vntsj-summary__val {
    background: linear-gradient(135deg, #ffffff, #c8c8c8);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
}

/* ---- 14. Welcome eyebrow + headline — extra polish ---- */

.vntsj-root .vntsj-eyebrow {
    background: linear-gradient(135deg, rgba(127,182,255,.14), rgba(127,182,255,.02)) !important;
    border: 1px solid rgba(127,182,255,.24) !important;
    color: #cfe2ff !important;
}
.vntsj-root .vntsj-eyebrow__dot {
    background: #9af0b6 !important;
    box-shadow: 0 0 0 3px rgba(154,240,182,.18), 0 0 14px rgba(154,240,182,.5);
    animation: vntsj-art-pulse 1.8s ease-in-out infinite;
    transform-origin: center;
}

/* Slightly stronger headline weight feel via gradient text — h1 only */
.vntsj-root .vntsj-h1 .vntsj-word {
    background: linear-gradient(180deg, #ffffff 0%, #c4c4c4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ---- 15. Mobile/tablet — keep new art crisp ---- */

@media (max-width: 720px) {
    .vntsj-root .vntsj-choice__icon--xl {
        width: 62px !important;
        height: 62px !important;
    }
    .vntsj-root .vntsj-choice__icon--xl svg {
        width: 36px !important;
        height: 36px !important;
    }
    .vntsj-root .vntsj-art__scene {
        filter: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vntsj-root .vntsj-art__pulse,
    .vntsj-root .vntsj-art__dash,
    .vntsj-root .vntsj-art__truck,
    .vntsj-root .vntsj-art__beam,
    .vntsj-root .vntsj-art__keys,
    .vntsj-root .vntsj-art__confetti rect,
    .vntsj-root .vntsj-delivery__rays line,
    .vntsj-root .vntsj-delivery__confetti rect,
    .vntsj-root .vntsj-delivery__confetti circle,
    .vntsj-root .vntsj-inspect__corner,
    .vntsj-root .vntsj-inspect__reticle,
    .vntsj-root .vntsj-eyebrow__dot {
        animation: none !important;
    }
}

/* ---- 16. Final touches — replace ambience glow tone ---- */

.vntsj-root .vntsj-glow--a {
    background: radial-gradient(circle, rgba(127,182,255,0.18), transparent 60%) !important;
}
.vntsj-root .vntsj-glow--b {
    background: radial-gradient(circle, rgba(231,231,231,0.12), transparent 65%) !important;
}

/* ============================================================
   v3.0.1 — TEXT-CLIPPING & DIRECT-ROUTE POLISH FIXES
   ============================================================ */

/* ---- Fix A. Step 5 substep cards: longer titles were getting clipped ---- */

.vntsj-root .vntsj-cine__dot{
    min-height:96px !important;
    padding:12px 12px !important;
    align-items:start !important;
    overflow:visible !important;
}
.vntsj-root .vntsj-cine__dot span{
    align-self:start !important;
    margin-top:1px !important;
}
.vntsj-root .vntsj-cine__dot strong{
    font-size:11px !important;
    line-height:1.28 !important;
    letter-spacing:.01em !important;
    overflow:visible !important;
    white-space:normal !important;
    word-break:normal !important;
    overflow-wrap:break-word !important;
    text-overflow:clip !important;
    display:block !important;
    max-height:none !important;
    -webkit-line-clamp:unset !important;
    padding-bottom:1px !important;
}

@media (max-width:1180px){
    .vntsj-root .vntsj-cine__dot{min-height:104px !important;}
    .vntsj-root .vntsj-cine__dot strong{font-size:10.5px !important;}
}


/* ---- Fix C. Step 4 — distinct illustration for "We Collect & Deliver" ---- */

.vntsj-root .vntsj-route__svg--collect{
    overflow:visible;
}
.vntsj-root .vntsj-scene--route.is-active .vntsj-route__svg--collect .vntsj-route__truck{
    animation: vntsj-route-truck 4.2s cubic-bezier(.55,.05,.45,1) infinite;
}

/* ============================================================
   v3.0.2 — STEP 6 CLIPPING + STEP 5 NO-BOX + STEP 4 NEW ART
   ============================================================ */

/* ---- 1) Step 6 — title was clipping at the top.
   Cause: v3.0.0 chrome gradient + v3.0.1 inline-block combo.
   Fix: nuke the chrome gradient on .vntsj-h2 (revert) and force normal block layout
   so the step tag + title both render fully. Keep gradient on .vntsj-h1 only. ---- */

.vntsj-root .vntsj-h2{
    background:none !important;
    -webkit-background-clip:border-box !important;
    background-clip:border-box !important;
    color:#ffffff !important;
    display:block !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
    line-height:1.08 !important;
    overflow:visible !important;
}

/* Give the delivery scene real top breathing room so the step tag + title
   are never near the top edge */
.vntsj-root .vntsj-scene--delivery{
    padding-top:clamp(96px, 11vh, 150px) !important;
    overflow:visible !important;
}
.vntsj-root .vntsj-scene--delivery .vntsj-scene__inner{
    overflow:visible !important;
}
.vntsj-root .vntsj-scene--delivery .vntsj-step-tag{
    margin-bottom:14px !important;
    display:inline-block !important;
}
.vntsj-root .vntsj-scene--delivery .vntsj-h2{
    font-size:clamp(36px, 4.4vw, 64px) !important;
    line-height:1.1 !important;
    padding:.04em 0 .1em !important;
    margin-top:6px !important;
}
@media (max-height: 900px){
    .vntsj-root .vntsj-scene--delivery{
        padding-top:clamp(80px, 10vh, 120px) !important;
        padding-bottom:118px !important;
    }
}
@media (max-width: 620px){
    .vntsj-root .vntsj-scene--delivery{
        padding-top:84px !important;
    }
    .vntsj-root .vntsj-scene--delivery .vntsj-h2{
        font-size:clamp(28px, 8vw, 44px) !important;
    }
}

/* ---- 2) Step 5 substep "1 / 2 / 3 / 4" — REMOVE the box chrome.
   User wants them to NOT look like cards. Make them clean text-only labels
   with active state shown by accent color + small underline indicator. ---- */

.vntsj-root .vntsj-cine__dot,
.vntsj-root .vntsj-cine__dot:hover,
.vntsj-root .vntsj-cine__dot.is-active,
.vntsj-root .vntsj-cine__dot.is-complete{
    background:transparent !important;
    background-color:transparent !important;
    background-image:none !important;
    border:0 !important;
    border-color:transparent !important;
    box-shadow:none !important;
    outline:none !important;
    backdrop-filter:none !important;
}
.vntsj-root .vntsj-cine__dot{
    position:relative !important;
    padding:8px 10px 10px !important;
    min-height:0 !important;
    border-radius:0 !important;
    display:grid !important;
    grid-template-columns:auto 1fr !important;
    column-gap:10px !important;
    align-items:center !important;
    opacity:.55 !important;
    transition:opacity .25s var(--vntsj-ease), transform .25s var(--vntsj-ease) !important;
}
.vntsj-root .vntsj-cine__dot::after,
.vntsj-root .vntsj-cine__dot::before{
    /* kill any pseudo-element chrome from the v3.0.0 layer */
    content:none !important;
    display:none !important;
}
.vntsj-root .vntsj-cine__dot span{
    width:28px !important;
    height:28px !important;
    border-radius:999px !important;
    background:rgba(255,255,255,.06) !important;
    border:1px solid rgba(255,255,255,.14) !important;
    color:rgba(255,255,255,.85) !important;
    font-size:10.5px !important;
    font-weight:800 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    grid-row:1 / span 2 !important;
    margin:0 !important;
    transition:background .25s var(--vntsj-ease), border-color .25s var(--vntsj-ease), color .25s var(--vntsj-ease) !important;
}
.vntsj-root .vntsj-cine__dot strong{
    display:block !important;
    font-size:11.5px !important;
    line-height:1.28 !important;
    font-weight:700 !important;
    color:rgba(255,255,255,.85) !important;
    letter-spacing:.01em !important;
    margin:0 !important;
    overflow:visible !important;
    white-space:normal !important;
    word-break:normal !important;
    overflow-wrap:break-word !important;
    -webkit-line-clamp:unset !important;
}
.vntsj-root .vntsj-cine__dot em{
    display:none !important;
}

/* Active state: small accent bar under the title + brighter color */
.vntsj-root .vntsj-cine__dot.is-active{
    opacity:1 !important;
    transform:none !important;
}
.vntsj-root .vntsj-cine__dot.is-active span{
    background:rgba(127,182,255,.18) !important;
    border-color:rgba(127,182,255,.7) !important;
    color:#dbe9ff !important;
}
.vntsj-root .vntsj-cine__dot.is-active strong{
    color:#ffffff !important;
}
.vntsj-root[data-vntsj-route-mode="direct"] .vntsj-cine__dot.is-active span{
    background:rgba(255,176,102,.18) !important;
    border-color:rgba(255,176,102,.7) !important;
    color:#ffd9b6 !important;
}

/* Completed: muted green tick on the number, no card chrome */
.vntsj-root .vntsj-cine__dot.is-complete:not(.is-active){
    opacity:.85 !important;
}
.vntsj-root .vntsj-cine__dot.is-complete:not(.is-active) span{
    background:rgba(31,157,77,.16) !important;
    border-color:rgba(31,157,77,.5) !important;
    color:#9af0b6 !important;
}

/* Container — looser, no rail look */
.vntsj-root .vntsj-cine__progress{
    background:transparent !important;
    border:0 !important;
    padding:6px 0 0 !important;
    gap:14px !important;
}

/* ---- 3) Step 4 — completely new graphic for "We Collect & Deliver".
   Now a map-style scene: continent silhouette on the left with EU dealer pin,
   dashed sea-crossing arc, island silhouette on the right with customer pin,
   and an AP-branded truck traveling on a ground road below. Visually distinct
   from the pergaminos abstract curved line. ---- */

.vntsj-root .vntsj-route__svg--collect{
    width:100% !important;
    height:auto !important;
}
.vntsj-root .vntsj-route__svg--collect .vntsj-rt-arc{
    stroke-dasharray:120;
    stroke-dashoffset:120;
}
.vntsj-root .vntsj-scene--route.is-active .vntsj-route__svg--collect .vntsj-rt-arc{
    animation:vntsj-rt-arc 1.6s var(--vntsj-ease) forwards .25s;
}
@keyframes vntsj-rt-arc{ to { stroke-dashoffset:0; } }

.vntsj-root .vntsj-route__svg--collect .vntsj-rt-truck{
    transform-box:fill-box;
    transform-origin:center;
}
.vntsj-root .vntsj-scene--route.is-active .vntsj-route__svg--collect .vntsj-rt-truck{
    animation:vntsj-rt-truck 5s cubic-bezier(.55,.05,.45,1) infinite;
}
@keyframes vntsj-rt-truck{
    0%   { transform:translate(0px, 0px); }
    50%  { transform:translate(120px, 0px); }
    100% { transform:translate(240px, 0px); }
}
.vntsj-root .vntsj-route__svg--collect .vntsj-rt-pin{
    transform-box:fill-box;
    transform-origin:center bottom;
}
.vntsj-root .vntsj-scene--route.is-active .vntsj-route__svg--collect .vntsj-rt-pin{
    animation:vntsj-rt-pin 2.4s ease-in-out infinite;
}
@keyframes vntsj-rt-pin{
    0%, 100% { transform:translateY(0); }
    50%      { transform:translateY(-3px); }
}

@media (prefers-reduced-motion: reduce){
    .vntsj-root .vntsj-route__svg--collect .vntsj-rt-truck,
    .vntsj-root .vntsj-route__svg--collect .vntsj-rt-pin,
    .vntsj-root .vntsj-route__svg--collect .vntsj-rt-arc{
        animation:none !important;
    }
    .vntsj-root .vntsj-route__svg--collect .vntsj-rt-truck{
        transform:translate(120px,0) !important;
    }
    .vntsj-root .vntsj-route__svg--collect .vntsj-rt-arc{
        stroke-dashoffset:0 !important;
    }
}

/* ============================================================
   v3.0.3 — H2 VISIBILITY, STEP 6 PADDING, DIRECT-ROUTE SCENES
   ============================================================ */

/* ---- 1) Make ALL h2 titles visible.
   Original v2.8.9 rule sets `-webkit-text-fill-color: transparent` with a
   background-clip:text gradient. v3.0.2 only overrode the gradient + color but
   NOT the text-fill-color, so titles still rendered invisible. Reset all three. ---- */

.vntsj-root .vntsj-h2,
.vntsj-root .vntsj-scene--select .vntsj-h2,
.vntsj-root .vntsj-scene--view .vntsj-h2,
.vntsj-root .vntsj-scene--inspect .vntsj-h2,
.vntsj-root .vntsj-scene--route .vntsj-h2,
.vntsj-root .vntsj-scene--transport .vntsj-h2,
.vntsj-root .vntsj-scene--delivery .vntsj-h2 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
}

/* ---- 2) Step 6 — push everything further down so the step tag + title
   are no longer near the top edge and never get clipped. ---- */

.vntsj-root .vntsj-scene--delivery{
    padding-top:clamp(120px, 14vh, 180px) !important;
}
.vntsj-root .vntsj-scene--delivery .vntsj-scene__inner{
    padding-top:8px !important;
}
.vntsj-root .vntsj-scene--delivery .vntsj-step-tag{
    margin-top:0 !important;
    margin-bottom:18px !important;
    display:inline-block !important;
}
.vntsj-root .vntsj-scene--delivery .vntsj-h2{
    margin-top:10px !important;
    line-height:1.12 !important;
    padding:.06em 0 .12em !important;
}
@media (max-height: 900px){
    .vntsj-root .vntsj-scene--delivery{
        padding-top:clamp(104px, 12vh, 140px) !important;
        padding-bottom:118px !important;
    }
}
@media (max-width: 620px){
    .vntsj-root .vntsj-scene--delivery{
        padding-top:104px !important;
    }
}

/* ---- 3) Step 5 — show different scenes based on selected route ---- */

/* Default (pergaminos): hide direct scenes, show standard scenes */
.vntsj-root .vntsj-art__scene--direct{
    display:none !important;
}
.vntsj-root .vntsj-art__scene--standard{
    display:block;
}

/* Direct route selected: hide standard scenes, show direct scenes */
.vntsj-root[data-vntsj-route-mode="direct"] .vntsj-art__scene--standard{
    display:none !important;
}
.vntsj-root[data-vntsj-route-mode="direct"] .vntsj-art__scene--direct{
    display:block !important;
}

/* When the direct scenes are showing, hide the central car-wrap image, the
   garage/cities/workers/customers placeholders, and route line — the new
   illustrated direct scenes contain their own protagonists. */
.vntsj-root[data-vntsj-route-mode="direct"] .vntsj-cine__car-wrap,
.vntsj-root[data-vntsj-route-mode="direct"] .vntsj-cine__city,
.vntsj-root[data-vntsj-route-mode="direct"] .vntsj-cine__garage,
.vntsj-root[data-vntsj-route-mode="direct"] .vntsj-cine__route-line,
.vntsj-root[data-vntsj-route-mode="direct"] .vntsj-cine__worker,
.vntsj-root[data-vntsj-route-mode="direct"] .vntsj-cine__customer,
.vntsj-root[data-vntsj-route-mode="direct"] .vntsj-cine__sun,
.vntsj-root[data-vntsj-route-mode="direct"] .vntsj-cine__road{
    display:none !important;
}
.vntsj-root[data-vntsj-route-mode="direct"] .vntsj-cine__viewport::before,
.vntsj-root[data-vntsj-route-mode="direct"] .vntsj-cine__viewport::after{
    display:none !important;
}

/* Direct-route scene activation per substep (mirror of standard scene rules) */
.vntsj-root[data-vntsj-route-mode="direct"][data-vntsj-transport-step="0"] .vntsj-art__scene--direct-0,
.vntsj-root[data-vntsj-route-mode="direct"][data-vntsj-transport-step="1"] .vntsj-art__scene--direct-1,
.vntsj-root[data-vntsj-route-mode="direct"][data-vntsj-transport-step="2"] .vntsj-art__scene--direct-2,
.vntsj-root[data-vntsj-route-mode="direct"][data-vntsj-transport-step="3"] .vntsj-art__scene--direct-3{
    opacity:1 !important;
    visibility:visible !important;
    z-index:2 !important;
}
.vntsj-root[data-vntsj-route-mode="direct"][data-vntsj-transport-step="0"] .vntsj-art__scene--direct:not(.vntsj-art__scene--direct-0),
.vntsj-root[data-vntsj-route-mode="direct"][data-vntsj-transport-step="1"] .vntsj-art__scene--direct:not(.vntsj-art__scene--direct-1),
.vntsj-root[data-vntsj-route-mode="direct"][data-vntsj-transport-step="2"] .vntsj-art__scene--direct:not(.vntsj-art__scene--direct-2),
.vntsj-root[data-vntsj-route-mode="direct"][data-vntsj-transport-step="3"] .vntsj-art__scene--direct:not(.vntsj-art__scene--direct-3){
    opacity:0 !important;
    visibility:hidden !important;
}

/* ============================================================
   v3.0.4 — STATIC TARGETS, STATIC DIRECT LABELS, SHOW CHOSEN VEHICLE
   ============================================================ */

/* ---- 1) Step 3 — replace rotating reticles with static targets.
   Kill the rotation animation that was driving CHASSIS · OK and BRAKES · OK.
   The PHP markup is now plain <g class="vntsj-inspect__target"> with no animation. ---- */
.vntsj-root .vntsj-scene--inspect.is-active .vntsj-inspect__reticle,
.vntsj-root .vntsj-scene--inspect.is-active .vntsj-inspect__reticle--b,
.vntsj-root .vntsj-inspect__target{
    animation: none !important;
    transform: none !important;
}

/* ---- 2) Step 5 (direct route) — make LIVE COORDINATION / AP TEAM · ON SITE /
   DELIVERED badges static (no pulse). The v3.0.0 layer animates .vntsj-art__pulse;
   we override only inside direct scenes. ---- */
.vntsj-root[data-vntsj-route-mode="direct"] .vntsj-art__scene--direct .vntsj-art__pulse,
.vntsj-root[data-vntsj-route-mode="direct"] .vntsj-art__pulse{
    animation: none !important;
    transform: none !important;
    opacity: .95 !important;
}

/* ---- 3) Step 5 (direct route) — hide the inline SVG truck illustrations
   in the direct scenes so the user's actually-chosen vehicle photo shows. ---- */
.vntsj-root .vntsj-art__direct-truck{
    display: none !important;
}

/* ---- 4) Step 5 (direct route) — show the chosen vehicle photo
   (.vntsj-cine__car-wrap) in the direct scenes, positioned per substep
   so it integrates with each scene's composition. ---- */

/* Override the v3.0.3 hide-rule: bring the car photo back for direct route */
.vntsj-root[data-vntsj-route-mode="direct"] .vntsj-cine__car-wrap{
    display: block !important;
    z-index: 5 !important;
    transition: left .7s var(--vntsj-ease), bottom .7s var(--vntsj-ease),
                transform .7s var(--vntsj-ease), opacity .5s ease !important;
}

/* Substep 0 — international coordination (globe call): no vehicle visible here */
.vntsj-root[data-vntsj-route-mode="direct"][data-vntsj-transport-step="0"] .vntsj-cine__car-wrap{
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateX(-50%) translateY(0) scale(.4) !important;
}

/* Substep 1 — AP team at EU dealer collecting:
   chosen vehicle centered in front of the dealership building, slightly smaller */
.vntsj-root[data-vntsj-route-mode="direct"][data-vntsj-transport-step="1"] .vntsj-cine__car-wrap{
    opacity: 1 !important;
    visibility: visible !important;
    left: 50% !important;
    bottom: 40px !important;
    transform: translateX(-50%) translateY(0) scale(.52) !important;
}

/* Substep 2 — tracked highway journey: chosen vehicle on the road, centered, larger */
.vntsj-root[data-vntsj-route-mode="direct"][data-vntsj-transport-step="2"] .vntsj-cine__car-wrap{
    opacity: 1 !important;
    visibility: visible !important;
    left: 50% !important;
    bottom: 56px !important;
    transform: translateX(-50%) translateY(0) scale(.72) !important;
}

/* Substep 3 — door-to-door delivery at customer home:
   chosen vehicle parked left of the house (where the AP truck used to be) */
.vntsj-root[data-vntsj-route-mode="direct"][data-vntsj-transport-step="3"] .vntsj-cine__car-wrap{
    opacity: 1 !important;
    visibility: visible !important;
    left: 24% !important;
    bottom: 48px !important;
    transform: translateX(-50%) translateY(0) scale(.5) !important;
}

@media (max-width: 620px){
    .vntsj-root[data-vntsj-route-mode="direct"][data-vntsj-transport-step="1"] .vntsj-cine__car-wrap{
        bottom: 30px !important;
        transform: translateX(-50%) translateY(0) scale(.46) !important;
    }
    .vntsj-root[data-vntsj-route-mode="direct"][data-vntsj-transport-step="2"] .vntsj-cine__car-wrap{
        bottom: 48px !important;
        transform: translateX(-50%) translateY(0) scale(.62) !important;
    }
    .vntsj-root[data-vntsj-route-mode="direct"][data-vntsj-transport-step="3"] .vntsj-cine__car-wrap{
        left: 28% !important;
        bottom: 38px !important;
        transform: translateX(-50%) translateY(0) scale(.46) !important;
    }
}

/* ============================================================
   v3.0.6 — HIDE AUTO-TRANSPORT TRUCK; CHOSEN VEHICLE ONLY
   ============================================================ */

/* User requested: in step 5 — both for "Vehicle Arrives at Pergaminos" (standard)
   and "We Collect & Deliver" (direct) — remove the SVG auto-transport truck
   illustrations entirely. Only the actually-chosen vehicle photo should appear. */
.vntsj-root .vntsj-art__truck{
    display: none !important;
}

/* With the truck removed in standard scene 1 (Vehicle Movement on the road),
   the chosen vehicle photo now becomes the focus — center it cleanly on the road. */
.vntsj-root[data-vntsj-route-mode="pergaminos"][data-vntsj-transport-step="1"] .vntsj-cine__car-wrap{
    transform: translateX(-50%) translateY(-4px) scale(.72) !important;
    bottom: 56px !important;
    filter: drop-shadow(0 22px 22px rgba(0,0,0,.5)) !important;
}
@media (max-width: 620px){
    .vntsj-root[data-vntsj-route-mode="pergaminos"][data-vntsj-transport-step="1"] .vntsj-cine__car-wrap{
        transform: translateX(-50%) translateY(0) scale(.62) !important;
        bottom: 48px !important;
    }
}

/* ============================================================
   v3.0.8 — FLYCAR HIGHER (step 3 → step 4 continue transition)
   ============================================================ */
/* User: "the moving car when i press continue in step 3 a little more up" */
.vntsj-root .vntsj-flycar{
    bottom: 38% !important;
}
@media (max-width: 720px){
    .vntsj-root .vntsj-flycar{
        bottom: 42% !important;
    }
}


/* v3.1.1 — keep original uploaded/URL vehicle photos with no CSS recoloring */
.vntsj-root[data-vntsj-color] .vntsj-vehicle-img,
.vntsj-root[data-vntsj-color] .vntsj-main-car-img,
.vntsj-root[data-vntsj-color] .vntsj-cine__car{
    filter:none !important;
    -webkit-filter:none !important;
}
.vntsj-root[data-vntsj-color] .vntsj-scene--select .vntsj-car-card__media::before{
    background:none !important;
    opacity:0 !important;
    box-shadow:none !important;
}


/* v3.1.2 — exact original vehicle PNGs, larger preview cards, no tint/recolor */
.vntsj-root .vntsj-car-card__media{
    height: 168px !important;
}
.vntsj-root .vntsj-car-card__media .vntsj-vehicle-img{
    max-height: 156px !important;
    max-width: 92% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
}
.vntsj-root .vntsj-scene--select .vntsj-car-card__media::before,
.vntsj-root .vntsj-car-card__media::before{
    background: none !important;
    opacity: 0 !important;
    box-shadow: none !important;
    filter: none !important;
}
.vntsj-root[data-vntsj-color] .vntsj-scene--select .vntsj-car-card__media .vntsj-vehicle-img,
.vntsj-root[data-vntsj-color] .vntsj-vehicle-img,
.vntsj-root[data-vntsj-color] .vntsj-cine__car,
.vntsj-root[data-vntsj-color] .vntsj-main-car-img{
    filter: none !important;
    -webkit-filter: none !important;
    mix-blend-mode: normal !important;
    opacity: 1 !important;
}
@media (max-width: 1024px){
    .vntsj-root .vntsj-car-card__media{ height: 138px !important; }
    .vntsj-root .vntsj-car-card__media .vntsj-vehicle-img{ max-height: 126px !important; max-width: 94% !important; }
}
@media (max-width: 720px){
    .vntsj-root .vntsj-car-card__media{ height: 122px !important; }
    .vntsj-root .vntsj-car-card__media .vntsj-vehicle-img{ max-height: 112px !important; max-width: 94% !important; }
}

/* ============================================================
   v3.1.5 — SCENE-CONTENT TUNING
   ============================================================ */

/* Standard scene 3 (Pickup & Drive Away) — user reported the chosen-vehicle
   photo was "crashing the people". Move it just slightly above the figures
   (figures sit around y=224 in SVG coords; people heads reach y=200). */
.vntsj-root[data-vntsj-route-mode="pergaminos"][data-vntsj-transport-step="3"] .vntsj-cine__car-wrap,
.vntsj-root:not([data-vntsj-route-mode="direct"])[data-vntsj-transport-step="3"] .vntsj-cine__car-wrap{
    transform: translateX(-50%) translateY(-20px) scale(.58) !important;
    bottom: 90px !important;
    filter: drop-shadow(0 26px 32px rgba(0,0,0,.5)) !important;
}
@media (max-width: 1180px){
    .vntsj-root[data-vntsj-route-mode="pergaminos"][data-vntsj-transport-step="3"] .vntsj-cine__car-wrap,
    .vntsj-root:not([data-vntsj-route-mode="direct"])[data-vntsj-transport-step="3"] .vntsj-cine__car-wrap{
        transform: translateX(-50%) translateY(-14px) scale(.54) !important;
        bottom: 82px !important;
    }
}
@media (max-width: 620px){
    .vntsj-root[data-vntsj-route-mode="pergaminos"][data-vntsj-transport-step="3"] .vntsj-cine__car-wrap,
    .vntsj-root:not([data-vntsj-route-mode="direct"])[data-vntsj-transport-step="3"] .vntsj-cine__car-wrap{
        transform: translateX(-50%) translateY(-8px) scale(.5) !important;
        bottom: 72px !important;
    }
}

/* Standard scene 1 (Arrives at Pergaminos) — chosen vehicle photo positioned
   on the forecourt right in front of the dealership building. */
.vntsj-root[data-vntsj-route-mode="pergaminos"][data-vntsj-transport-step="1"] .vntsj-cine__car-wrap,
.vntsj-root:not([data-vntsj-route-mode="direct"])[data-vntsj-transport-step="1"] .vntsj-cine__car-wrap{
    transform: translateX(-50%) translateY(0) scale(.62) !important;
    bottom: 70px !important;
    filter: drop-shadow(0 26px 32px rgba(0,0,0,.55)) !important;
}
@media (max-width: 620px){
    .vntsj-root[data-vntsj-route-mode="pergaminos"][data-vntsj-transport-step="1"] .vntsj-cine__car-wrap,
    .vntsj-root:not([data-vntsj-route-mode="direct"])[data-vntsj-transport-step="1"] .vntsj-cine__car-wrap{
        transform: translateX(-50%) translateY(0) scale(.54) !important;
        bottom: 58px !important;
    }
}

/* ============================================================
   v3.1.6 — PER-VEHICLE INSPECT TARGETS
   ============================================================ */
/* Three sets of targets are present in the inspect HUD markup
   (ix / suv / truck). Show only the set that matches the currently
   selected vehicle. Default = ix. Using both display and visibility
   for cross-browser reliability on SVG <g> elements. */

.vntsj-root .vntsj-inspect__target--ix,
.vntsj-root .vntsj-inspect__target--suv,
.vntsj-root .vntsj-inspect__target--truck{
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}
.vntsj-root[data-vntsj-selected-car="ix"] .vntsj-inspect__target--ix,
.vntsj-root:not([data-vntsj-selected-car]) .vntsj-inspect__target--ix{
    display: block !important;
    visibility: visible !important;
    opacity: .9 !important;
}
.vntsj-root[data-vntsj-selected-car="suv"] .vntsj-inspect__target--suv{
    display: block !important;
    visibility: visible !important;
    opacity: .9 !important;
}
.vntsj-root[data-vntsj-selected-car="truck"] .vntsj-inspect__target--truck{
    display: block !important;
    visibility: visible !important;
    opacity: .9 !important;
}