/* ==========================================================================
   Homepage v2 — zinc + blue
   Design tokens and components from design_handoff_home_v2.
   No Tailwind here: v2 is plain CSS.
   ========================================================================== */

:root {
    --bg: #f4f4f5;
    --ink: #09090b;
    --t2: #52525b;
    --t3: #71717a;
    --t4: #a1a1aa;
    --hair: rgba(9, 9, 11, .06);

    --accent: #0284c7;
    --accent-hover: #0369a1;
    --accent-light: #38bdf8;
    --accent-lighter: #7dd3fc;
    --accent-tint: #e0f2fe;
    --accent-tint-ink: #0369a1;

    --ok-dot: #22c55e;
    --ok-text: #15803d;
    --err: #dc2626;

    --d0: #09090b;
    --d1: #0c0c0e;
    --d-card: #131316;
    --d-border: rgba(255, 255, 255, .08);

    --r-btn: 9px;
    --r-input: 12px;
    --r-tile: 14px;
    --r-card: 16px;
    --r-card-lg: 18px;
    --r-panel: 22px;
    --r-pill: 99px;

    --ease: cubic-bezier(.2, .8, .2, 1);
    /* Near full width on wide monitors; the gutter alone bounds it below this. */
    --shell: 1800px;
    --gutter: clamp(12px, 3vw, 40px);
}

/* ── base ────────────────────────────────────────────────────────────── */
.v2 {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: 'Instrument Sans', system-ui, -apple-system, Segoe UI, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-size: 15px;
}

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

/* :where() gives this rule zero specificity, so a single class such as
   .v2-cta or .v2-consult can set its own colour. A plain ".v2 a" outranked
   them and painted white button labels black. */
:where(.v2 a) {
    color: inherit;
    text-decoration: none;
}

.v2 img {
    max-width: 100%;
}

.v2 select,
.v2 input,
.v2 button,
.v2 textarea {
    font-family: inherit;
}

.v2 h1,
.v2 h2,
.v2 h3,
.v2 p,
.v2 figure {
    margin: 0;
}

.v2-shell {
    max-width: var(--shell);
    margin: 0 auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
    width: 100%;
}

.v2-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow-x: clip;
}

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

/* ── motion ──────────────────────────────────────────────────────────── */
@keyframes v2-rise {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: none; }
}

@keyframes v2-pop {
    from { opacity: 0; transform: translateY(-4px) scale(.98); }
    to { opacity: 1; transform: none; }
}

@keyframes v2-fadein {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

@keyframes v2-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

@keyframes v2-spin { to { transform: rotate(360deg); } }

@keyframes v2-dash { to { background-position: -24px 0; } }

@keyframes v2-travel {
    0% { left: 0%; opacity: 0; }
    8% { opacity: 1; }
    92% { opacity: 1; }
    100% { left: 100%; opacity: 0; }
}

@supports (animation-timeline: view()) {
    .v2 .rv {
        animation: v2-rise .6s var(--ease) both;
        animation-timeline: view();
        animation-range: entry 0% entry 35%;
    }
}

/* Phones (touch): Safari on iPhone zooms the whole page into any field whose
   text is under 16px. Every text field is 16px on touch devices, so the page
   stays exactly as it is when a field gets focus. */
@media (pointer: coarse) {
    .v2 input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
    .v2 select,
    .v2 textarea {
        font-size: 16px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .v2 *,
    .v2 *::before,
    .v2 *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* ── utility bar ─────────────────────────────────────────────────────── */
.v2-util {
    background: var(--d0);
    color: var(--t4);
    font-size: 11.5px;
}

.v2-util > div {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    padding-top: 7px;
    padding-bottom: 7px;
}

.v2-util b {
    color: var(--accent-lighter);
    font-weight: 400;
}

.v2-util-mid { color: var(--t2); }

.v2-util-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .v2-util > div { flex-wrap: nowrap; gap: 12px; }
}

.v2-util-tel {
    margin-left: auto;
    color: #fafafa;
    font-weight: 600;
    white-space: nowrap;
    flex: 0 0 auto;
}

/* ── header ──────────────────────────────────────────────────────────── */
.v2-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(244, 244, 245, .74);
    -webkit-backdrop-filter: blur(18px) saturate(1.5);
    backdrop-filter: blur(18px) saturate(1.5);
    border-bottom: 1px solid var(--hair);
}

.v2-header-in {
    height: 66px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.v2-brand {
    display: flex;
    align-items: center;
    gap: 9px;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -.01em;
    text-transform: uppercase;
    flex: 0 0 auto;
    margin-right: 4px;
}

.v2-brand img {
    height: 46px;
    width: auto;
    max-width: 210px;
    object-fit: contain;
    display: block;
    border-radius: 8px;
}

@media (max-width: 1100px) {
    .v2-brand img {
        height: 40px;
        max-width: 160px;
    }
}

.v2-brand-mark {
    width: 28px;
    height: 28px;
    border-radius: var(--r-btn);
    background: linear-gradient(150deg, var(--accent-light), var(--accent));
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 700;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 6px 14px -6px rgba(2, 132, 199, .6);
}

.v2-nav {
    display: flex;
    gap: 2px;
    margin-left: 0;
}

.v2-nav a {
    position: relative;
    padding: 7px 10px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--t2);
    background-image: linear-gradient(var(--accent), var(--accent));
    background-repeat: no-repeat;
    background-size: 0 2px;
    background-position: 10px calc(100% - 3px);
    transition: color .25s, background-size .35s var(--ease);
}

.v2-nav a:hover,
.v2-nav a:focus-visible {
    color: var(--ink);
    background-size: calc(100% - 20px) 2px;
}

.v2-nav a[aria-current="page"] {
    color: var(--ink);
    font-weight: 600;
    background-size: calc(100% - 20px) 2px;
}

.v2-header-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.v2-phone-chip {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 12px 7px 8px;
    border-radius: var(--r-btn);
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    background: rgba(255, 255, 255, .7);
    border: 1px solid rgba(255, 255, 255, .95);
    box-shadow: 0 1px 2px rgba(9, 9, 11, .05);
    transition: background .25s;
}

.v2-phone-chip:hover { background: #fff; }

.v2-phone-chip i {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: var(--accent-tint);
    color: var(--accent-tint-ink);
    display: grid;
    place-items: center;
}

.v2-cta {
    padding: 9px 14px;
    border-radius: var(--r-btn);
    font-size: 13px;
    font-weight: 600;
    background: var(--ink);
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 8px 20px -10px rgba(9, 9, 11, .5);
    transition: transform .3s var(--ease), background .25s;
}

.v2-cta:hover {
    background: var(--accent);
    color: #fff;
    transform: translateY(-1px);
}

.v2-icon-btn {
    width: 38px;
    height: 38px;
    border-radius: var(--r-btn);
    border: 1px solid rgba(255, 255, 255, .9);
    background: rgba(255, 255, 255, .7);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    color: var(--ink);
}

.v2-consult {
    height: 38px;
    padding: 0 12px 0 10px;
    border-radius: var(--r-btn);
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 600;
    box-shadow: 0 8px 20px -10px rgba(2, 132, 199, .8);
}

.v2-consult:hover { background: var(--accent-hover); color: #fff; }

/* burger → × */
.v2-burger {
    flex-direction: column;
    gap: 4px;
}

.v2-burger span {
    width: 16px;
    height: 1.5px;
    background: var(--ink);
    transition: transform .3s var(--ease), opacity .2s;
}

.v2-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.v2-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.v2-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* desktop-only / mobile-only */
.v2-desk { display: flex; }
.v2-mob { display: none; }

@media (max-width: 1100px) {
    .v2-desk { display: none !important; }
    .v2-mob { display: flex !important; }
    .v2-util-mid { display: none; }
}

/* ── mobile drawer ───────────────────────────────────────────────────── */
.v2-drawer {
    display: none;
    border-top: 1px solid var(--hair);
    background: rgba(244, 244, 245, .96);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

.v2-drawer[data-open="true"] {
    display: block;
    animation: v2-fadein .25s var(--ease) both;
}

.v2-drawer nav {
    display: flex;
    flex-direction: column;
    padding: 8px 0 14px;
}

.v2-drawer nav a {
    padding: 12px 2px;
    font-size: 15px;
    font-weight: 600;
    border-bottom: 1px solid var(--hair);
}

.v2-drawer-btns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding-bottom: 16px;
}

.v2-drawer-btns > a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 13px 10px;
    border-radius: var(--r-input);
    font-size: 13px;
    font-weight: 600;
}

.v2-drawer-btns .is-dark { background: var(--ink); color: #fff; }
.v2-drawer-btns .is-blue { background: var(--accent); color: #fff; }

/* ── search ──────────────────────────────────────────────────────────── */
.v2-search-wrap { position: relative; }

.v2-search-field {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 6px 6px 14px;
    border-radius: var(--r-input);
    background: rgba(255, 255, 255, .92);
    border: 1px solid rgba(255, 255, 255, .95);
    box-shadow: 0 10px 30px -22px rgba(9, 9, 11, .6);
}

.v2-search-field input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 14px;
    color: var(--ink);
    padding: 8px 0;
}

.v2-search-field input::placeholder { color: var(--t3); }

.v2-search-go {
    border: 0;
    cursor: pointer;
    padding: 9px 18px;
    border-radius: var(--r-btn);
    background: var(--accent);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    transition: background .25s;
}

.v2-search-go:hover { background: var(--accent-hover); }

.v2-search-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: min(680px, calc(100vw - 2 * var(--gutter)));   /* a little wider than the field so the three columns breathe */
    z-index: 120;
    /* the hero is white-on-dark; the dropdown is a light surface */
    color: var(--ink);
    max-height: min(70vh, 560px);
    overflow-y: auto;
    background: #fff;
    border-radius: var(--r-card-lg);
    border: 1px solid var(--hair);
    box-shadow: 0 30px 60px -30px rgba(9, 9, 11, .45);
    overflow: hidden;
    animation: v2-pop .22s var(--ease) both;
}

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

.v2-search-cols {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
}

.v2-search-col { padding: 18px 20px; }
.v2-search-col + .v2-search-col { border-left: 1px solid var(--hair); }

.v2-search-col h4 {
    margin: 0 0 10px;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--accent);
}

/* readable on any screen: dark 15px labels, counts in a pill */
.v2-search-col a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: var(--ink);
    text-transform: capitalize;
    transition: color .2s;
}

.v2-search-col a:hover { color: var(--accent); }
.v2-search-col a span:first-child { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.v2-search-col a span:last-child {
    flex: 0 0 auto;
    min-width: 26px;
    padding: 2px 9px;
    border-radius: 99px;
    background: var(--bg);
    color: var(--t2);
    font-size: 12.5px;
    font-weight: 600;
    text-align: center;
}

.v2-search-col a span:only-child { background: none; padding: 0; color: inherit; font-size: inherit; font-weight: inherit; min-width: 0; text-align: left; }
.v2-search-col a:hover span:last-child:not(:only-child) { background: var(--accent-tint); color: var(--accent-tint-ink); }

.v2-result {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--hair);
    transition: background .18s;
}

.v2-result:hover,
.v2-result:focus-visible { background: #fafafa; }

.v2-result-img {
    width: 56px;
    height: 40px;
    flex: 0 0 56px;
    border-radius: 8px;
    overflow: hidden;
    background: radial-gradient(120% 90% at 50% 110%, #fff 0%, #ececee 45%, #dcdce0 100%);
    display: grid;
    place-items: center;
}

.v2-result-img img { width: 100%; height: 100%; object-fit: cover; }
.v2-result-img img.is-silhouette { width: 78%; height: auto; object-fit: contain; opacity: .38; }

.v2-result-body { min-width: 0; flex: 1; display: flex; flex-direction: column; }

.v2-result-title {
    display: block;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.v2-result-meta {
    display: block;
    font-size: 12.5px;
    color: var(--t2);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.v2-result-price { font-size: 15px; font-weight: 700; color: var(--ink); white-space: nowrap; }

.v2-search-all {
    display: block;
    padding: 12px 18px;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    text-align: center;
}

.v2-search-empty,
.v2-search-loading {
    padding: 18px;
    font-size: 13px;
    color: var(--t3);
    text-align: center;
}

/* mobile search modal */
.v2-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: start center;
    padding: 14px;
    background: rgba(9, 9, 11, .55);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    animation: v2-fadein .2s var(--ease) both;
}

.v2-modal[hidden] { display: none; }

.v2-modal-panel {
    width: 100%;
    max-width: 560px;
    margin-top: 4vh;
    background: rgba(255, 255, 255, .96);
    border-radius: var(--r-panel);
    border: 1px solid rgba(255, 255, 255, .95);
    box-shadow: 0 40px 80px -40px rgba(9, 9, 11, .6);
    overflow: hidden;
    max-height: 84vh;
    display: flex;
    flex-direction: column;
}

.v2-modal-head { padding: 12px; border-bottom: 1px solid var(--hair); }
.v2-modal-body { overflow-y: auto; -webkit-overflow-scrolling: touch; }

.v2-modal-foot { padding: 12px; border-top: 1px solid var(--hair); }

.v2-modal-foot a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px;
    border-radius: var(--r-input);
    background: var(--accent);
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
}

/* compact modal layout: types | makes side by side, help links as chips underneath — fits a phone screen without scrolling */
.v2-modal-body { scrollbar-width: none; }
.v2-modal-body::-webkit-scrollbar { display: none; }
.v2-modal .v2-search-cols { grid-template-columns: 1fr 1fr; }
.v2-modal .v2-search-col { padding: 12px 14px; min-width: 0; }
.v2-modal .v2-search-col + .v2-search-col { border-left: 1px solid var(--hair); border-top: 0; }
.v2-modal .v2-search-col h4 { font-size: 10.5px; margin-bottom: 6px; }
.v2-modal .v2-search-col a { padding: 5px 0; font-size: 14px; }
.v2-modal .v2-search-col a span:last-child:not(:only-child) { font-size: 11.5px; padding: 1px 7px; min-width: 22px; }
.v2-modal .v2-search-col:nth-child(3) { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--hair); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 14px 12px; }
.v2-modal .v2-search-col:nth-child(3) h4 { flex: 0 0 100%; margin-bottom: 2px; }
.v2-modal .v2-search-col:nth-child(3) a { padding: 6px 11px; border-radius: 99px; background: var(--bg); font-size: 13px; }
.v2-modal .v2-search-col:nth-child(3) a:hover { background: var(--accent-tint); }

/* ══════════════════════════════════════════════════════════════════════
   RAIL — horizontal carousel: touch-swipe, mouse-drag, snap, arrows
   Used by the category row, "Just arrived" and the reviews band.
   ══════════════════════════════════════════════════════════════════════ */
.v2-rail-wrap { position: relative; }

.v2-rail {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    /* touch-action stays at the default: the browser scrolls the rail
       horizontally and the page vertically, both natively. Setting pan-y here
       would hand horizontal gestures to JS and break swiping on phones.
       overscroll-behavior-x stops a swipe past the end from triggering the
       browser's back-navigation gesture. */
    overscroll-behavior-x: contain;
    scroll-padding-left: var(--gutter);
}

.v2-rail::-webkit-scrollbar { display: none; }

.v2-rail > * {
    scroll-snap-align: start;
    flex: 0 0 auto;
}

/* mouse dragging: kill snap + smooth so the pointer stays glued to content */
.v2-rail.is-dragging {
    scroll-snap-type: none;
    scroll-behavior: auto;
    cursor: grabbing;
    user-select: none;
}

.v2-rail.is-dragging * { pointer-events: none; }

.v2-rail.is-grabbable { cursor: grab; }

/* drifting rails never snap — see initRail() */
.v2-rail.is-marquee { scroll-snap-type: none; }

/* Full-bleed rail, as in the prototype: the track spans the whole viewport
   and scrolls edge to edge, while its padding lines the first card up with
   the 1600px container's content edge (50vw - 760px = half of 1600 minus
   the 40px gutter). Below 1600px the gutter wins. */
.v2-rail-bleed {
    --bleed: max(var(--gutter), calc(50vw - var(--shell) / 2 + var(--gutter)));
    gap: 14px;
    padding: 18px var(--bleed) 44px;
    scroll-padding-left: var(--bleed);
}

.v2-rail-bleed.is-reviews {
    gap: 10px;
    padding: 24px var(--bleed) clamp(36px, 4vw, 26px);
}

/* edge fades hint that there is more to swipe */
.v2-rail-wrap::before,
.v2-rail-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 36px;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: opacity .25s;
}

.v2-rail-wrap::before {
    left: 0;
    background: linear-gradient(90deg, var(--bg), transparent);
}

.v2-rail-wrap::after {
    right: 0;
    background: linear-gradient(270deg, var(--bg), transparent);
}

.v2-rail-wrap[data-at-start="false"]::before { opacity: 1; }
.v2-rail-wrap[data-at-end="false"]::after { opacity: 1; }

.v2-rail-wrap.on-dark::before { background: linear-gradient(90deg, var(--d0), transparent); }
.v2-rail-wrap.on-dark::after { background: linear-gradient(270deg, var(--d0), transparent); }

.v2-rail-btn {
    width: 34px;
    height: 34px;
    border-radius: var(--r-pill);
    border: 1px solid var(--hair);
    background: #fff;
    color: var(--ink);
    display: grid;
    place-items: center;
    cursor: pointer;
    padding: 0;
    transition: opacity .2s, background .2s, transform .2s;
}

.v2-rail-btn:hover { background: var(--bg); }
.v2-rail-btn:active { transform: scale(.94); }

.v2-rail-btn[disabled] {
    opacity: .3;
    cursor: default;
    pointer-events: none;
}

.on-dark .v2-rail-btn,
.v2-rail-btn.on-dark {
    background: rgba(255, 255, 255, .06);
    border-color: var(--d-border);
    color: #fff;
}

.on-dark .v2-rail-btn:hover { background: rgba(255, 255, 255, .12); }

/* ── categories ──────────────────────────────────────────────────────── */
/* Full-bleed rail at every width. The soft white edges come from a mask, so
   the tiles themselves fade out rather than sitting under a coloured overlay
   (this is how v1 faded its marquee). */
.v2-cats {
    padding-top: 0;
    width: 100%;
    position: relative;
    z-index: 3;
    margin-top: -44px;   /* rides over the bottom of the hero */
}

.v2-cats-rail {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    padding: 6px var(--gutter);
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
}

.v2-cats-rail::-webkit-scrollbar { display: none; }

.v2-cats-rail > .v2-cat {
    /* 8 tiles across the viewport, never narrower than 152px */
    flex: 0 0 max(152px, calc((min(100vw, var(--shell)) - 2 * var(--gutter) - 7 * 8px) / 8));
}

@media (max-width: 640px) {
    .v2-cats-rail > .v2-cat { flex: 0 0 132px; }
}

.v2-cat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 14px 10px 13px;
    border-radius: var(--r-tile);
    background: #fff;   /* solid: the tiles overlap the dark hero, no glass */
    border: 1px solid rgba(9, 9, 11, .06);
    box-shadow: 0 20px 40px -32px rgba(9, 9, 11, .3);
    transition: transform .4s var(--ease), box-shadow .4s var(--ease);
    text-align: center;
    -webkit-tap-highlight-color: transparent;
}

.v2-cat:hover {
    transform: translateY(-3px);
    box-shadow: inset 0 1px 0 #fff, 0 26px 44px -30px rgba(9, 9, 11, .42);
}

.v2-cat-name {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink);
    line-height: 1.2;
}

.v2-cat-count { font-size: 11.5px; color: var(--t3); }

.v2-cat-svg svg { height: 32px; width: auto; stroke: #475569; }

.v2-rail-wrap.is-cats::before,
.v2-rail-wrap.is-cats::after { display: none; }

/* ── vehicle card ────────────────────────────────────────────────────── */
.v2-vgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 12px;
}

.v2-vc {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: var(--r-card);
    border: 1px solid var(--hair);
    overflow: hidden;
    transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}

.v2-vc:hover {
    transform: translateY(-3px);
    box-shadow: 0 30px 50px -34px rgba(9, 9, 11, .45);
}

.v2-vc-media {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: radial-gradient(120% 90% at 50% 110%, #fff 0%, #ececee 45%, #dcdce0 100%);
}

.v2-vc-media > img.v2-vimg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s var(--ease);
}

.v2-vc-media > img.is-silhouette {
    inset: 0;
    margin: auto;
    width: 64%;
    height: auto;
    object-fit: contain;
    opacity: .32;
    filter: drop-shadow(0 18px 14px rgba(9, 9, 11, .18));
}

.v2-vc:hover .v2-vimg { transform: scale(1.07); }

.v2-vc-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, .35), transparent 40%, rgba(9, 9, 11, .12));
    pointer-events: none;
}

.v2-badges {
    position: absolute;
    top: 10px;
    display: flex;
    gap: 5px;
    z-index: 1;
}

.v2-badges.is-left {
    left: 10px;
    /* stop short of the "Available" pill on the right and wrap instead */
    max-width: calc(100% - 112px);
    flex-wrap: wrap;
}

.v2-badges.is-right { right: 10px; }

.v2-badge {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.v2-badge.is-dark { background: var(--ink); color: #fff; }
.v2-badge.is-blue { background: var(--accent); color: #fff; }

.v2-badge.is-avail {
    background: #fff;
    color: var(--ok-text);
    box-shadow: 0 1px 3px rgba(9, 9, 11, .12);
}

.v2-badge.is-avail::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 99px;
    background: var(--ok-dot);
}

.v2-chips {
    position: absolute;
    left: 10px;
    bottom: 10px;
    display: flex;
    gap: 5px;
    z-index: 1;
}

.v2-chip {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 7px;
    background: rgba(9, 9, 11, .6);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}

.v2-chip.is-blue { background: var(--accent); }

.v2-vb { padding: 11px 12px 13px; display: flex; flex-direction: column; gap: 3px; }

.v2-vmeta {
    font-size: 11.5px;
    color: var(--t3);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    line-height: 1.45;
}

.v2-vmeta > span { white-space: nowrap; }
.v2-vmeta .sep { color: var(--t4); margin-right: 5px; }

.v2-vt {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

/* Price on its own row, the two buttons underneath across the full card width:
   "Request invoice" is long and never fits beside the price on a ~280px card. */
.v2-vfoot {
    display: grid;
    gap: 9px;
    margin-top: 8px;
}

.v2-vp { font-size: 19px; font-weight: 700; letter-spacing: -.025em; line-height: 1.1; }
.v2-vp-note { font-size: 11.5px; color: var(--t3); margin-top: 1px; }

.v2-vbtns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 6px; }
.v2-vbtns > .v2-btn-sm { display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; text-overflow: ellipsis; }

.v2-btn-sm {
    padding: 8px 12px;
    border-radius: var(--r-btn);
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    transition: background .25s, color .25s, border-color .25s;
}

.v2-btn-sm.is-ghost {
    background: #fff;
    border: 1px solid var(--hair);
    color: var(--ink);
}

.v2-btn-sm.is-ghost:hover { background: var(--bg); }

.v2-btn-sm.is-solid { background: var(--ink); color: #fff; }
.v2-btn-sm.is-solid:hover { background: var(--accent); color: #fff; }

@media (max-width: 640px) {
    .v2-badges { top: 7px; gap: 4px; }
    .v2-badges.is-left { left: 7px; max-width: calc(100% - 92px); }
    .v2-badges.is-right { right: 7px; }
    .v2-badge { font-size: 10px; padding: 4px 6px; border-radius: 6px; }
    .v2-badge.is-blue .v2-badge-txt { display: none; }
    .v2-chips { left: 7px; bottom: 7px; }
    .v2-chip { font-size: 10px; padding: 3px 6px; }
    .v2-vgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
    .v2-vb { padding: 9px 10px 11px; }
    .v2-vt { font-size: 13px; }
    .v2-vp { font-size: 15px; }
    .v2-vbtns { display: none; }
}

/* ── section headings ────────────────────────────────────────────────── */
.v2-section { padding-top: 44px; }

.v2-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.v2-h2 {
    font-size: clamp(22px, 2.6vw, 28px);
    letter-spacing: -.025em;
    font-weight: 700;
    line-height: 1.15;
}

.v2-sub { margin-top: 4px; font-size: 13px; color: var(--t3); }

.v2-link-arrow {
    font-size: 13px;
    font-weight: 600;
    color: var(--t2);
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color .25s, gap .3s;
}

.v2-link-arrow:hover { color: var(--ink); gap: 10px; }

.v2-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--accent);
}

/* ── "view more" dark tile ───────────────────────────────────────────── */
.v2-more {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px;
    border-radius: var(--r-card);
    background: var(--d0);
    color: #fff;
    justify-content: space-between;
}

.v2-more-n {
    font-size: 40px;
    font-weight: 700;
    letter-spacing: -.04em;
    line-height: 1;
}

.v2-more-copy { font-size: 12.5px; color: var(--t4); line-height: 1.5; }

.v2-more-chips { display: flex; flex-wrap: wrap; gap: 5px; }

.v2-more-chips a {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 7px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid var(--d-border);
    color: #e4e4e7;
    transition: background .2s;
}

.v2-more-chips a:hover { background: rgba(255, 255, 255, .14); color: #fff; }

.v2-more-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 11px 14px;
    border-radius: var(--r-btn);
    background: #fff;
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
    transition: background .25s;
}

.v2-more-btn:hover { background: var(--accent); color: #fff; }

/* ── perks ───────────────────────────────────────────────────────────── */
.v2-perks {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
}

@media (max-width: 1400px) { .v2-perks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .v2-perks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .v2-perks { grid-template-columns: minmax(0, 1fr); } }

.v2-perk {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 16px;
    border-radius: var(--r-card);
    background: #fff;
    border: 1px solid var(--hair);
}

.v2-perk-n {
    font-size: 11px;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: .06em;
}

.v2-perk h3 { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.v2-perk p { font-size: 12.5px; color: var(--t3); line-height: 1.55; flex: 1; }

.v2-perk a {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--t2);
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color .25s, gap .3s;
}

.v2-perk a:hover { color: var(--accent); gap: 10px; }

/* ── dark panel (how it works) ───────────────────────────────────────── */
.v2-panel {
    background: var(--d0);
    color: #fff;
    border-radius: var(--r-panel);
    padding: clamp(20px, 3vw, 38px);
    position: relative;
    overflow: hidden;
}

.v2-panel-top {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    margin-bottom: 22px;
}

@media (max-width: 900px) { .v2-panel-top { grid-template-columns: minmax(0, 1fr); gap: 12px; } }

.v2-panel h2 {
    font-size: clamp(22px, 2.8vw, 32px);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.15;
}

.v2-panel-lede { font-size: 13.5px; color: var(--t4); line-height: 1.6; }

.v2-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

@media (max-width: 900px) { .v2-steps { grid-template-columns: minmax(0, 1fr); } }

.v2-step {
    padding: 16px;
    border-radius: var(--r-card);
    background: var(--d-card);
    border: 1px solid var(--d-border);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.v2-step-h { display: flex; align-items: baseline; gap: 10px; }
.v2-step-n { font-size: 12px; font-weight: 700; color: var(--accent-light); }
.v2-step h3 { font-size: 14.5px; font-weight: 600; }
.v2-step p { font-size: 12.5px; color: var(--t4); line-height: 1.6; flex: 1; }
.v2-step-note { font-size: 12px; font-weight: 600; color: var(--accent-light); }

.v2-process-label {
    margin: 26px 0 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--t2);
}

.v2-process {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    border-top: 1px solid var(--d-border);
    padding-top: 16px;
}

@media (max-width: 1100px) { .v2-process { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .v2-process { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.v2-process-item { display: flex; flex-direction: column; gap: 5px; }
.v2-process-n { font-size: 11px; font-weight: 700; color: var(--t2); }
.v2-process-item h4 { margin: 0; font-size: 12.5px; font-weight: 600; }
.v2-process-item p { font-size: 11.5px; color: var(--t3); line-height: 1.5; }

/* ── guarantees ──────────────────────────────────────────────────────── */
.v2-guarantees {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

@media (max-width: 900px) { .v2-guarantees { grid-template-columns: minmax(0, 1fr); } }

.v2-guarantee {
    padding: 18px;
    border-radius: var(--r-card);
    background: #fff;
    border: 1px solid var(--hair);
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.v2-guarantee h3 { font-size: 15px; font-weight: 600; letter-spacing: -.015em; }
.v2-guarantee p { font-size: 12.5px; color: var(--t3); line-height: 1.6; }

.v2-guarantee ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }

.v2-guarantee li {
    font-size: 12.5px;
    color: var(--t2);
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.5;
}

.v2-guarantee li::before {
    content: '✓';
    color: var(--ok-text);
    font-size: 11px;
    line-height: 1.5;
}

.v2-guarantee-note { font-size: 11px; color: var(--t4); line-height: 1.5; font-style: italic; }
.v2-guarantee-link { font-size: 12.5px; font-weight: 600; color: var(--accent); }

/* ── just arrived ────────────────────────────────────────────────────── */
.v2-arrivals { background: var(--bg); padding-top: 44px; }

.v2-arrival {
    width: 320px;
    border-radius: var(--r-card);
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--hair);
    display: flex;
    flex-direction: column;
    transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}

.v2-arrival:hover { transform: translateY(-3px); box-shadow: 0 30px 50px -34px rgba(9, 9, 11, .45); }

.v2-arrival-media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: radial-gradient(120% 90% at 50% 110%, #fff 0%, #ececee 45%, #dcdce0 100%);
    display: block;
}

.v2-arrival-media img.v2-vimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.v2-arrival-media img.is-silhouette { position: absolute; inset: 0; margin: auto; width: 62%; height: auto; object-fit: contain; opacity: .32; }
.v2-arrival:hover .v2-vimg { transform: scale(1.07); }

.v2-arrival-year {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 4px 9px;
    border-radius: 7px;
    background: var(--accent);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    z-index: 1;
}

.v2-arrival-new {
    position: absolute;
    top: 10px;
    left: 56px;
    padding: 4px 9px;
    border-radius: 7px;
    background: #fff;
    color: var(--ink);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    z-index: 1;
}

.v2-arrival-price {
    position: absolute;
    right: 10px;
    bottom: 10px;
    padding: 6px 12px;
    border-radius: var(--r-pill);
    background: #fff;
    font-size: 15px;
    font-weight: 700;
    font-style: italic;
    letter-spacing: -.02em;
    box-shadow: 0 6px 18px -8px rgba(9, 9, 11, .4);
    z-index: 1;
}

.v2-arrival-play {
    position: absolute;
    left: 10px;
    bottom: 10px;
    width: 28px;
    height: 28px;
    border-radius: 99px;
    background: rgba(9, 9, 11, .6);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #fff;
    display: grid;
    place-items: center;
    z-index: 1;
}

.v2-arrival-body { padding: 12px 14px 14px; }

.v2-arrival-top {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: baseline;
}

.v2-arrival-make {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--accent);
}

.v2-arrival-meta { font-size: 11.5px; color: var(--t3); white-space: nowrap; }

.v2-arrival-title {
    margin-top: 5px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -.01em;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.v2-pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--r-pill);
    background: #fff;
    border: 1px solid var(--hair);
    font-size: 12.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    transition: background .25s, color .25s;
}

.v2-pill-btn:hover { background: var(--ink); color: #fff; }

/* ── recommended ─────────────────────────────────────────────────────── */
.v2-rec { background: #fff; padding: 12px 0; margin-top: 12px; }

.v2-tabs {
    display: inline-flex;
    gap: 2px;
    padding: 4px;
    border-radius: var(--r-pill);
    background: var(--bg);
    border: 1px solid var(--hair);
    flex-wrap: wrap;
}

.v2-tab {
    border: 0;
    cursor: pointer;
    background: transparent;
    padding: 8px 14px;
    border-radius: var(--r-pill);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--t2);
    display: flex;
    align-items: center;
    gap: 7px;
    transition: background .25s, color .25s;
}

.v2-tab:hover { color: var(--ink); }

.v2-tab[aria-selected="true"] {
    background: #fff;
    color: var(--ink);
    box-shadow: 0 1px 3px rgba(9, 9, 11, .1);
}

.v2-tab b { font-size: 11px; font-weight: 700; color: var(--accent); }

.v2-recgrid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 20px 12px;
}

@media (max-width: 1400px) { .v2-recgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px) { .v2-recgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .v2-recgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 8px; } }

.v2-rc { display: flex; flex-direction: column; gap: 7px; }

.v2-rc-media {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: var(--r-tile);
    overflow: hidden;
    background: radial-gradient(120% 90% at 50% 110%, #fff 0%, #ececee 45%, #dcdce0 100%);
}

.v2-rc-media img.v2-vimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.v2-rc-media img.is-silhouette { position: absolute; inset: 0; margin: auto; width: 66%; height: auto; object-fit: contain; opacity: .32; }
.v2-rc:hover .v2-vimg { transform: scale(1.07); }

.v2-rc-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.v2-rc-price { font-size: 16.5px; font-weight: 700; letter-spacing: -.02em; }
.v2-rc-year { font-size: 12px; color: var(--t4); }

.v2-rc-title {
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.v2-rc-meta { font-size: 11.5px; color: var(--t3); }

.v2-panel-hidden { display: none; }

/* ── reviews ─────────────────────────────────────────────────────────── */
.v2-reviews { background: var(--d0); color: #fff; padding: 15px 0; }

.v2-reviews h2 {
    font-size: clamp(22px, 2.8vw, 30px);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.2;
    max-width: 22ch;
}

.v2-rating-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }

.v2-rating-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: var(--r-btn);
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--d-border);
    font-size: 12.5px;
    color: var(--t4);
    transition: background .25s;
}

.v2-rating-chip:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.v2-rating-chip b { color: #fff; font-weight: 700; }
.v2-rating-chip i { color: var(--accent-light); font-style: normal; }

.v2-reviews-count { font-size: 12.5px; color: var(--t4); display: flex; align-items: center; gap: 6px; }
.v2-reviews-count:hover { color: #fff; }

.v2-review {
    width: 340px;
    padding: 18px;
    border-radius: var(--r-card);
    background: var(--d-card);
    border: 1px solid var(--d-border);
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: transform .4s var(--ease), border-color .3s;
}

.v2-review:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, .16); }

.v2-review-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.v2-stars { color: var(--accent-light); font-size: 12px; letter-spacing: 2px; }
.v2-review-src { font-size: 11.5px; color: var(--t2); }
.v2-review-text { font-size: 13.5px; color: #e4e4e7; line-height: 1.6; flex: 1; }
.v2-review-who { display: flex; align-items: center; gap: 10px; }

.v2-avatar {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 99px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid var(--d-border);
    display: grid;
    place-items: center;
    font-size: 10.5px;
    font-weight: 700;
    color: #e4e4e7;
}

.v2-review-name { font-size: 12.5px; font-weight: 600; }
.v2-review-meta { font-size: 11.5px; color: var(--t2); }

.v2-rail-counter { font-size: 11.5px; color: var(--t2); min-width: 44px; text-align: right; }

/* ── faq + contact ───────────────────────────────────────────────────── */
.v2-faq-wrap {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 20px;
    align-items: start;
}

@media (max-width: 900px) { .v2-faq-wrap { grid-template-columns: minmax(0, 1fr); } }

.v2-faq {
    background: #fff;
    border-radius: var(--r-card-lg);
    border: 1px solid var(--hair);
    overflow: hidden;
}

.v2-faq-item + .v2-faq-item { border-top: 1px solid var(--hair); }

.v2-faq-q {
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 14px 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.v2-faq-q span { color: var(--t3); font-size: 16px; transition: transform .3s var(--ease); flex: 0 0 auto; }
.v2-faq-q[aria-expanded="true"] span { transform: rotate(45deg); }

.v2-faq-a {
    padding: 0 16px 16px;
    font-size: 12.5px;
    color: var(--t3);
    line-height: 1.65;
}

.v2-faq-a[hidden] { display: none; }

.v2-contact-card {
    margin: 10px 0;
    background: #fff;
    border-radius: var(--r-card-lg);
    border: 1px solid var(--hair);
    padding: clamp(18px, 2.4vw, 28px);
}

.v2-contact-card h2 {
    font-size: clamp(18px, 2.1vw, 23px);
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1.25;
    margin-bottom: 16px;
}

.v2-contact-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }

@media (max-width: 560px) { .v2-contact-facts { grid-template-columns: minmax(0, 1fr); } }

.v2-fact {
    padding: 11px 14px;
    border-radius: 10px;
    background: var(--bg);
    min-width: 0;
    display: grid;
    gap: 2px;
}

.v2-fact dt { font-size: 11px; color: var(--t3); }

.v2-fact dd {
    margin: 0;
    font-size: 13.5px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.v2-form { display: flex; flex-direction: column; gap: 8px; }
.v2-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

@media (max-width: 480px) { .v2-form-row { grid-template-columns: minmax(0, 1fr); } }

.v2-input {
    width: 100%;
    padding: 12px 13px;
    border-radius: var(--r-input);
    border: 1px solid var(--hair);
    background: var(--bg);
    font-size: 13.5px;
    color: var(--ink);
    outline: 0;
    transition: border-color .2s, background .2s;
}

.v2-input::placeholder { color: var(--t3); }

.v2-input:focus {
    border-color: var(--accent);
    background: #fff;
}

textarea.v2-input { min-height: 92px; resize: vertical; }

.v2-submit {
    border: 0;
    cursor: pointer;
    padding: 13px;
    border-radius: var(--r-input);
    background: var(--accent);
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    transition: background .25s;
}

.v2-submit:hover { background: var(--accent-hover); }
.v2-submit[disabled] { opacity: .6; cursor: default; }

.v2-form-msg { font-size: 12.5px; padding: 2px; }
.v2-form-msg.is-ok { color: var(--ok-text); }
.v2-form-msg.is-err { color: var(--err); }

/* ── CTA band ────────────────────────────────────────────────────────── */
.v2-ctaband-wrap {
    border-top: 1px solid var(--hair);
    background: rgba(255, 255, 255, .6);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}
.v2-rintro{padding: 12px 5px; font-size: 18px!important; letter-spacing: -1px; margin: 10px 2px;}
.v2-ctaband {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 14px var(--gutter) 14px;
}

@media (max-width: 900px) { .v2-ctaband { grid-template-columns: minmax(0, 1fr); gap: 16px; } }

.v2-ctaband h2 {
    font-size: clamp(20px, 2.6vw, 28px);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.2;
    margin-bottom: 14px;
}

.v2-ctaband-btns { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.v2-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border-radius: var(--r-btn);
    font-size: 13.5px;
    font-weight: 600;
    transition: background .25s, transform .3s var(--ease), color .25s;
}

.v2-btn.is-blue { background: var(--accent); color: #fff; }
.v2-btn.is-blue:hover { background: var(--accent-hover); color: #fff; transform: translateY(-1px); }
.v2-btn.is-ghost { background: #fff; border: 1px solid var(--hair); color: var(--ink); }
.v2-btn.is-ghost:hover { background: var(--bg); }

.v2-timeline { display: flex; flex-direction: column; }

.v2-timeline-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 0;
    font-size: 13px;
}

.v2-timeline-row + .v2-timeline-row { border-top: 1px solid var(--hair); }
.v2-timeline-row span { color: var(--ink); font-size: 13px; font-weight: 600; white-space: nowrap; }

/* ── footer ──────────────────────────────────────────────────────────── */
.v2-footer { background: var(--d0); color: #fff; padding: 46px 0 0; margin-top: auto; }

.v2-footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
    gap: 30px 20px;
}

@media (max-width: 1000px) { .v2-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .v2-footer-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; } }

.v2-wordmark {
    font-size: clamp(26px, 3.4vw, 40px);
    font-weight: 700;
    letter-spacing: -.04em;
    line-height: 1;
    text-transform: uppercase;
}

.v2-wordmark i { color: var(--accent); font-style: normal; }

.v2-footer-about { margin-top: 12px; font-size: 12.5px; color: var(--t4); line-height: 1.65; max-width: 42ch; }

.v2-footer-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

.v2-footer-btns a {
    padding: 10px 16px;
    border-radius: var(--r-pill);
    font-size: 12.5px;
    font-weight: 600;
    transition: background .25s;
}

.v2-footer-btns .is-light { background: #fff; color: var(--ink); }
.v2-footer-btns .is-light:hover { background: var(--accent); color: #fff; }
.v2-footer-btns .is-dark { background: var(--d-card); color: #fff; border: 1px solid var(--d-border); }
.v2-footer-btns .is-dark:hover { background: rgba(255, 255, 255, .12); color: #fff; }

.v2-footer-col h4 {
    margin: 0 0 12px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--t2);
}

.v2-footer-col a {
    display: block;
    padding: 5px 0;
    font-size: 13px;
    color: #d4d4d8;
    transition: color .2s;
}

.v2-footer-col a:hover { color: #fff; }

.v2-footer-addr { margin-top: 16px; font-size: 12.5px; color: var(--t2); line-height: 1.7; }

.v2-footer-bar {
    margin-top: 38px;
    border-top: 1px solid var(--d-border);
    padding: 16px 0 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 11.5px;
    color: var(--t2);
}

.v2-footer-social { display: flex; gap: 16px; }
.v2-footer-social a { font-size: 11.5px; color: var(--t2); }
.v2-footer-social a:hover { color: #fff; }

/* ── hero ────────────────────────────────────────────────────────────── */
.v2-hero {
    position: relative;
    color: #fff;
    isolation: isolate;
    /* The hero paints above later sections so the live-search dropdown is not
       covered by the category rail. overflow stays visible for the same reason;
       the background image is clipped by its own wrapper instead. */
    z-index: 3;
}

.v2-hero-bg { overflow: hidden; }

.v2-hero-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.v2-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 62% 40%;
    display: block;
}

.v2-hero::before,
.v2-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.v2-hero::before {
    background: linear-gradient(90deg, rgba(9, 9, 11, .94) 0%, rgba(9, 9, 11, .86) 32%, rgba(9, 9, 11, .55) 58%, rgba(9, 9, 11, .35) 100%);
}

.v2-hero::after {
    background: linear-gradient(180deg, rgba(9, 9, 11, .35) 0%, transparent 30%, rgba(9, 9, 11, .45) 70%, rgba(9, 9, 11, .7) 100%);
}

/* Two auto-fit columns (≥380px each): copy on the left, estimator on the
   right; they stack on narrow screens. Values are the prototype's. */
.v2-hero-in {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
    gap: clamp(24px, 4vw, 64px);
    align-items: center;
    /* tall hero; the category rail overlaps its bottom edge by 44px */
    min-height: min(76vh, 780px);
    padding-top: clamp(36px, 5vw, 64px);
    padding-bottom: calc(clamp(32px, 4vw, 48px) + 44px);
}

.v2-hero.is-searching { z-index: 6; }

.v2-hero-bg img { opacity: .92; }

.v2-hero-copy { max-width: 700px; }

.v2-hero h1 {
    font-size: clamp(30px, 3.4vw, 48px);
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: 1.04;
    color: #fff;
    text-wrap: balance;
    margin-bottom: 14px;
}

.v2-hero h1 span { color: var(--accent-light); }

.v2-hero-sub {
    font-size: clamp(15px, 1.2vw, 16.5px);
    line-height: 1.55;
    color: #d4d4d8;
    max-width: 680px;   /* a touch wider than the trust tiles below (620px) */
    text-wrap: pretty;
}

/* estimator column: centered, 480px max, with the tilted ghost plate behind */
.v2-est-wrap {
    position: relative;
    justify-self: end;          /* flush with the container's right edge, like the header CTA */
    width: 100%;
    max-width: 540px;
    padding: 20px 0 12px;
}

@media (max-width: 1000px) {
    .v2-est-wrap { justify-self: stretch; max-width: none; }
}

.v2-est-ghost {
    position: absolute;
    inset: 8px 18px auto 18px;
    height: 100px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .2);
    transform: rotate(-2deg) translateY(-6px);
    box-shadow: 0 20px 40px -30px rgba(9, 9, 11, .25);
    pointer-events: none;
}

.v2-hero-search {
    margin-top: 26px;
    max-width: 680px;
    position: relative;
    z-index: 20;
}

.v2-trust {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 20px;
    max-width: 620px;
}

@media (max-width: 640px) { .v2-trust { grid-template-columns: 1fr 1fr; } }

.v2-trust-tile {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 13px;
    border-radius: var(--r-input);
    background: rgba(9, 9, 11, .72);
    border: 1px solid rgba(255, 255, 255, .14);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: background .25s, border-color .25s, transform .3s var(--ease);
}

.v2-trust-tile:hover {
    background: rgba(9, 9, 11, .86);
    border-color: rgba(255, 255, 255, .26);
    transform: translateY(-2px);
}

.v2-trust-v { font-size: 17px; font-weight: 700; letter-spacing: -.02em; color: #fff; }
.v2-trust-l { font-size: 11.5px; color: #a1a1aa; line-height: 1.4; }

/* ── delivery estimator ──────────────────────────────────────────────── */
.v2-est {
    background: rgba(255, 255, 255, .86);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, .95);
    border-radius: var(--r-panel);
    padding: 18px;
    color: var(--ink);
    box-shadow: inset 0 1px 0 #fff, 0 40px 70px -40px rgba(9, 9, 11, .7);
    animation: v2-float 9s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) { .v2-est { animation: none; } }

.v2-est-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.v2-est-head h2 { font-size: 15.5px; font-weight: 700; letter-spacing: -.02em; }
.v2-est-head p { font-size: 11.5px; color: var(--t3); }

.v2-est-vehicle {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 8px 8px 10px;
    border-radius: var(--r-tile);
    background: rgba(255, 255, 255, .75);
    border: 1px solid rgba(255, 255, 255, .95);
    margin-bottom: 10px;
    transition: border-color .2s, box-shadow .2s, background .2s;
}

.v2-est-vehicle.is-open {
    background: #fff;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(2, 132, 199, .12);
}

.v2-est-thumb {
    width: 62px;
    height: 44px;
    flex: 0 0 62px;
    border-radius: 9px;
    overflow: hidden;
    background: radial-gradient(120% 90% at 50% 110%, #fff 0%, #ececee 45%, #dcdce0 100%);
    display: grid;
    place-items: center;
}

.v2-est-thumb img { width: 100%; height: 100%; object-fit: cover; }
.v2-est-thumb img.is-silhouette { width: 80%; height: auto; object-fit: contain; opacity: .4; }

/* the tappable text block, and the search block that replaces it */
.v2-est-current,
.v2-est-search {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
}

.v2-est-current {
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    color: inherit;
    font: inherit;
    -webkit-tap-highlight-color: transparent;
}

.v2-est-current[hidden],
.v2-est-search[hidden] { display: none; }

.v2-est-vmeta {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    color: var(--t3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.v2-est-vmeta input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    padding: 0;
    background: transparent;
    font-size: 12px;
    color: var(--ink);
    font-family: inherit;
}

.v2-est-vmeta input::placeholder { color: var(--t3); }

.v2-est-vtitle {
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: -.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.v2-est-vtitle.is-muted { color: var(--t3); font-weight: 600; }

.v2-est-vprice { font-size: 14.5px; font-weight: 700; white-space: nowrap; }

.v2-est-cycle {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 9px;
    border: 1px solid var(--hair);
    background: #fff;
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 13px;
    color: var(--ink);
    padding: 0;
    transition: background .2s, color .2s;
}

.v2-est-cycle:hover { background: var(--ink); color: #fff; }

/* results under the row */
.v2-est-picker-list {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 30;
    background: #fff;
    border-radius: 12px;
    border: 1px solid var(--hair);
    box-shadow: 0 24px 50px -24px rgba(9, 9, 11, .45);
    max-height: 300px;
    overflow-y: auto;
    animation: v2-pop .2s var(--ease) both;
}

.v2-est-picker-list[hidden] { display: none; }

.v2-est-pick {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 0;
    background: transparent;
    cursor: pointer;
    text-align: left;
    color: inherit;
    font: inherit;
    border-bottom: 1px solid var(--hair);
    transition: background .15s;
}

.v2-est-pick:last-child { border-bottom: 0; }
.v2-est-pick:hover,
.v2-est-pick:focus-visible { background: #fafafa; outline: 0; }

.v2-est-pick .v2-est-thumb { width: 46px; height: 34px; flex-basis: 46px; border-radius: 7px; }
.v2-est-pick-body { min-width: 0; flex: 1; display: flex; flex-direction: column; }

.v2-est-pick-title {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.v2-est-pick-meta { font-size: 11px; color: var(--t3); }
.v2-est-pick-price { font-size: 13px; font-weight: 700; white-space: nowrap; }
.v2-est-pick-empty { padding: 14px; font-size: 12.5px; color: var(--t3); text-align: center; }

.v2-est-zip { display: flex; gap: 8px; }

.v2-est-zip-field {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border-radius: var(--r-input);
    background: rgba(255, 255, 255, .9);
    border: 1px solid rgba(255, 255, 255, .95);
    transition: border-color .2s, box-shadow .2s;
}

.v2-est-zip-field:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(2, 132, 199, .12);
}

.v2-est-zip-field input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    height: 44px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
}

.v2-est-zip-field input::placeholder { color: var(--t3); font-weight: 400; }

/* route line: lot → driveway */
.v2-est-route {
    position: relative;
    display: flex;
    align-items: center;
    height: 20px;
    margin-top: 14px;
}

.v2-est-dot {
    width: 8px;
    height: 8px;
    border-radius: 99px;
    flex: 0 0 8px;
    background: var(--ink);
    z-index: 1;
}

.v2-est-dot.is-dest { background: var(--accent); }

.v2-est-line {
    flex: 1;
    height: 0;
    border-top: 2px dashed rgba(9, 9, 11, .28);
}

.v2-est-truck {
    position: absolute;
    top: 50%;
    left: calc(100% - 34px);
    transform: translateY(-50%);
    width: 30px;
    height: 20px;
    border-radius: 99px;
    background: #fff;
    border: 1px solid rgba(9, 9, 11, .12);
    box-shadow: 0 2px 8px rgba(9, 9, 11, .14);
    display: grid;
    place-items: center;
    color: var(--t2);
    transition: left .5s var(--ease);
}

.v2-est-route.is-live .v2-est-truck {
    animation: v2-travel 4s linear infinite;
    color: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
    .v2-est-route.is-live .v2-est-truck { animation: none; left: 50%; }
}

.v2-est-route-labels {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 6px;
    font-size: 11px;
    color: var(--t3);
}

.v2-est-route-labels span:last-child { text-align: right; }

.v2-est-calc {
    border: 0;
    cursor: pointer;
    padding: 12px 18px;
    border-radius: var(--r-input);
    background: var(--ink);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    transition: background .25s;
}

.v2-est-calc:hover { background: var(--accent); }
.v2-est-calc[disabled] { opacity: .6; cursor: default; }

.v2-est-error { font-size: 12px; color: var(--err); margin-top: 8px; }

.v2-est-rows { margin-top: 12px; display: flex; flex-direction: column; gap: 1px; }
.v2-est-rows[hidden] { display: none; }

.v2-est-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    font-size: 12px;
    color: var(--t3);
    border-bottom: 1px dashed rgba(9, 9, 11, .1);
}

.v2-est-row b { color: var(--ink); font-weight: 600; text-align: right; }

.v2-est-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-top: 12px;
}

@media (max-width: 420px) { .v2-est-tiles { grid-template-columns: minmax(0, 1fr); } }

.v2-est-tile {
    padding: 10px 12px;
    border-radius: var(--r-input);
    background: rgba(255, 255, 255, .75);
    border: 1px solid rgba(255, 255, 255, .95);
    min-width: 0;
}

.v2-est-tile dt {
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--t3);
}

.v2-est-tile dd {
    margin: 2px 0 0;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.02em;
    overflow: hidden;
    text-overflow: ellipsis;
}

.v2-est-tile.is-dark {
    background: var(--ink);
    border-color: var(--ink);
    display: block;
    transition: background .25s;
}

.v2-est-tile.is-dark:hover { background: #18181b; }
.v2-est-tile.is-dark dt { color: var(--accent-lighter); }
.v2-est-tile.is-dark dd { color: #fff; font-size: 12.5px; font-weight: 600; line-height: 1.3; white-space: normal; }