/* ===========================================================================
   AUCTION — Clean SaaS Design System (v5 · white + red)
   ---------------------------------------------------------------------------
   Stripe/Linear-grade clarity: airy white canvas, neutral near-black ink type,
   a clean red brand accent. Plus Jakarta Sans everywhere, JetBrains Mono for
   numerics. Generous rounded radii, soft layered shadows, calm micro-motion.
   Token NAMES unchanged so every var()-driven view recolours automatically.
   =========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,400;1,6..72,500&family=Inter:wght@300;400;500;600;700;800&family=Geist+Mono:wght@400;500;600&display=swap');

:root {
    /* ════════════════════════════════════════════════════════════════════
       CRIMSON LEDGER — serious white / black / red auction house (COPY 5).
       Pure white canvas, true near-black ink, a single deep auction red as the
       only accent. Serif (Newsreader) display, neutral Inter body, mono numerics.
       Sharp corners, flat surfaces, crisp hairlines — an editorial ledger, not a
       SaaS dashboard. Token NAMES are unchanged so every var()-driven view
       recolours automatically; the tail block re-skins the few hardcoded bits.
       NOTE: the legacy "gold" tokens are repurposed to a BLACK ink scale so all
       price figures read as a serious financial ledger.
       ════════════════════════════════════════════════════════════════════ */

    /* Brand — one deep auction red, used with restraint. */
    --brand:        #C8102E;
    --brand-dark:   #9E0C24;
    --brand-soft:   rgba(200, 16, 46, 0.07);
    --brand-ink:    #FFFFFF;     /* white text on a red fill */
    --brand-2:      #9E0C24;     /* darker red — keeps any 2-stop usage near-flat */
    --accent-grad:  linear-gradient(180deg, #C8102E 0%, #A60E22 100%);

    /* CTA — same red. */
    --cta:          #C8102E;
    --cta-dark:     #9E0C24;
    --cta-soft:     rgba(200, 16, 46, 0.07);

    /* "Gold" repurposed → black ink scale for prices / ledger numerics. */
    --gold:         #1A1C20;
    --gold-dark:    #111317;
    --gold-soft:    rgba(17, 19, 23, 0.05);

    /* Surfaces — crisp white, faint warm-grey alt. */
    --paper:        #FFFFFF;     /* page background */
    --paper-deep:   #F4F4F3;     /* inset / alt section / fills */
    --bg:           #FFFFFF;
    --bg-soft:      #F4F4F3;
    --surface:      #FFFFFF;     /* cards */
    --surface-raise:#FFFFFF;     /* raised — inputs, popovers, menus */
    --hero-dark:    #0A0A0B;     /* true near-black contrast panel + footer */
    --hero-overlay: rgba(10, 10, 11, 0.64);

    /* Text — true black ink scale (high contrast, serious). */
    --ink:          #0A0A0B;
    --ink-soft:     #3A3A3E;
    --ink-mute:     #71717A;
    --ink-faint:    #A1A1AA;
    --on-dark:      #FAFAFA;
    --on-dark-soft: rgba(250, 250, 250, 0.68);
    --on-brand:     #FFFFFF;

    /* Lines — crisp neutral hairlines. */
    --border:       rgba(10, 10, 11, 0.13);
    --border-soft:  rgba(10, 10, 11, 0.07);
    --border-dark:  rgba(10, 10, 11, 0.24);

    /* Semantic. */
    --live:         #D11A2A;     /* live / urgency red (slightly brighter) */
    --won:          #15803D;     /* a serious forest green for success */
    --info:         #C8102E;

    /* Type — Newsreader serif (display), Inter (body), Geist Mono (numerics). */
    --font-display: 'Newsreader', 'Times New Roman', Georgia, serif;
    --font-body:    'Inter', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
    --font-mono:    'Geist Mono', 'IBM Plex Mono', ui-monospace, 'Menlo', monospace;

    /* Rhythm — sharp, serious radii. */
    --radius-sm:    3px;
    --radius:       5px;
    --radius-lg:    7px;
    --radius-pill:  999px;

    /* Shadows — crisp + minimal (flat, editorial). */
    --shadow-card:  0 1px 2px rgba(10,10,11,0.05);
    --shadow-hover: 0 2px 4px rgba(10,10,11,0.06), 0 14px 30px -18px rgba(10,10,11,0.24);
    --shadow-deep:  0 28px 64px -30px rgba(10,10,11,0.32);
    --ring:         0 0 0 3px rgba(200,16,46,0.18);

    --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
    --ease-expo:    cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Base ──────────────────────────────────────────────────────────────── */

* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; box-sizing: border-box; }

html { background: var(--paper); }

body {
    /* Figma: flat #F5F5F5 page canvas — no gradients. */
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
    text-rendering: optimizeLegibility;
}

/* Headings — Newsreader serif, editorial, restrained tracking. */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3 {
    font-family: var(--font-display);
    font-weight: 600;
    text-transform: none;
    color: var(--ink);
    letter-spacing: -0.01em;
    line-height: 1.12;
    margin: 0 0 0.5em;
}

h1, .h1 {
    font-size: clamp(2.3rem, 5vw, 3.7rem);
    font-weight: 600;
    letter-spacing: -0.012em;
}
h2, .h2 {
    font-size: clamp(1.7rem, 3.2vw, 2.5rem);
    font-weight: 600;
    letter-spacing: -0.012em;
}
h3, .h3 {
    font-size: clamp(1.25rem, 2.1vw, 1.6rem);
    font-weight: 600;
    letter-spacing: -0.008em;
}
h4 { font-size: 1.15rem; font-weight: 600; text-transform: none; letter-spacing: -0.005em; color: var(--ink); }

/* Display variants — large editorial serif headlines */
.display-hero {
    font-family: var(--font-display);
    font-weight: 600;
    text-transform: none;
    font-size: clamp(2.8rem, 7.5vw, 5.4rem);
    line-height: 1.02;
    letter-spacing: -0.015em;
    color: var(--on-dark);
}
.display-hero em {
    font-style: italic;
    color: var(--brand);
    font-weight: 600;
}
.display-xl {
    font-family: var(--font-display);
    font-weight: 600;
    text-transform: none;
    font-size: clamp(2.3rem, 5vw, 3.8rem);
    line-height: 1.04;
    letter-spacing: -0.012em;
}

p { margin: 0 0 1rem; }
a { color: var(--brand); text-decoration: none; transition: color 180ms; }
a:hover { color: var(--brand-dark); }

/* Eyebrow — small caps tracker in mono */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--brand);
}
.eyebrow::before {
    content: '';
    display: inline-block;
    width: 22px;
    height: 1px;
    background: currentColor;
    opacity: 0.6;
}
.eyebrow--bare::before { display: none; }
.eyebrow--ink     { color: var(--ink-mute); }
.eyebrow--gold    { color: var(--gold); }
.eyebrow--on-dark { color: var(--on-dark-soft); }

/* Numeric / tabular — switches to mono for ledger feel */
.numeric {
    font-family: var(--font-mono);
    font-feature-settings: "tnum", "zero";
    letter-spacing: -0.01em;
}

/* Hairlines */
.hairline      { height: 1px; background: var(--brand); width: 56px; margin: 1.25rem 0; }
.hairline-full { height: 1px; background: var(--border); }
.hairline-gold { height: 1px; background: var(--gold); width: 56px; margin: 1.25rem 0; }

/* Index label — used to mark catalogue items: "N° 042 / 200" */
.index-label {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    color: var(--ink-mute);
    text-transform: uppercase;
}
.index-label strong { color: var(--ink); font-weight: 600; }

/* ── Buttons ───────────────────────────────────────────────────────────── */

/* Buttons — soft pill, calm lift on hover with a coloured glow. Modern SaaS. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.8rem 1.4rem;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.92rem;
    letter-spacing: -0.005em;
    text-transform: none;
    border: 1px solid transparent;
    border-radius: 0; /* Figma: square buttons everywhere */
    cursor: pointer;
    text-decoration: none;
    transition: transform 200ms var(--ease-out), box-shadow 240ms var(--ease-out),
                background 180ms, color 180ms, border-color 180ms;
    line-height: 1;
    position: relative;
    white-space: nowrap;
}
.btn svg { width: 1.05em; height: 1.05em; flex-shrink: 0; transition: transform 220ms var(--ease-expo); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn-arrow:hover svg { transform: translateX(3px); }

/* Primary — solid indigo, soft brand glow that intensifies on hover. */
.btn-primary {
    background: var(--brand);
    color: #fff !important;
    border-color: var(--brand);
    box-shadow: 0 4px 14px -4px rgba(225,29,42,0.45);
}
.btn-primary:hover {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 26px -6px rgba(225,29,42,0.55);
}

.btn-brand { background: var(--brand); color: #fff; border-color: var(--brand); box-shadow: 0 4px 14px -4px rgba(225,29,42,0.45); }
.btn-brand:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 26px -6px rgba(225,29,42,0.55); }

/* Secondary CTA (kept on indigo family). */
.btn-orange { background: var(--cta); color: #fff; border-color: var(--cta); box-shadow: 0 4px 14px -4px rgba(225,29,42,0.45); }
.btn-orange:hover { background: var(--cta-dark); border-color: var(--cta-dark); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 26px -6px rgba(225,29,42,0.55); }

/* Amber accent (where referenced). */
.btn-gold { background: var(--gold); color: #fff; border-color: var(--gold); box-shadow: 0 4px 14px -4px rgba(217,119,6,0.4); }
.btn-gold:hover { background: var(--gold-dark); border-color: var(--gold-dark); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 26px -6px rgba(217,119,6,0.5); }

/* Ghost — soft neutral outline on light surfaces. */
.btn-ghost {
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-card);
}
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-2px); box-shadow: var(--shadow-hover); }

/* Ghost on dark sections (hero / footer). */
.btn-ghost-light {
    background: rgba(255,255,255,0.06);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.22);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.btn-ghost-light:hover { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.5); color: #fff; transform: translateY(-2px); }

/* Solid ink (dark) button on light backgrounds. */
.btn-ink {
    background: var(--ink);
    color: var(--on-dark);
    border-color: var(--ink);
    box-shadow: 0 6px 18px -6px rgba(22,24,28,0.4);
}
.btn-ink:hover { background: #000; color: var(--on-dark); transform: translateY(-2px); box-shadow: 0 12px 28px -6px rgba(22,24,28,0.5); }

.btn-ghost-ink {
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--border);
}
.btn-ghost-ink:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-2px); box-shadow: var(--shadow-card); }

.btn-sm { padding: 0.55rem 1.05rem; font-size: 0.85rem; }
.btn-xs { padding: 0.4rem 0.85rem; font-size: 0.76rem; }

/* Inline icon-only arrow */
.btn-arrow { position: relative; padding-right: 2.5rem; }
.btn-arrow::after {
    content: '→';
    position: absolute;
    right: 1.25rem;
    transition: transform 220ms var(--ease-out);
    font-family: var(--font-mono);
}
.btn-arrow:hover::after { transform: translateX(4px); }

/* Tabular link (used in nav, listings) */
.tabular-link {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--ink-mute);
    transition: color 180ms;
}
.tabular-link:hover { color: var(--brand); }

/* ── Forms ─────────────────────────────────────────────────────────────── */

input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="tel"], input[type="datetime-local"],
input[type="date"], input[type="search"],
select, textarea {
    width: 100%;
    background: var(--surface-raise);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 0.98rem;
    padding: 0.78rem 1rem;
    transition: border-color 180ms, box-shadow 180ms, background 180ms;
    line-height: 1.4;
}
input[type="number"], input[type="tel"], input[type="datetime-local"], input[type="date"] {
    font-family: var(--font-mono);
    font-feature-settings: "tnum";
}
input::placeholder, textarea::placeholder { color: var(--ink-faint); }
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--brand);
    background: var(--surface-raise);
    box-shadow: var(--ring);
}
input:focus, select:focus, textarea:focus {
    background-color: var(--surface-raise) !important;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
    box-shadow: var(--ring);
}
label {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--ink-soft);
    display: block;
    margin-bottom: 0.45rem;
    text-transform: none;
    letter-spacing: -0.005em;
}
.form-required::after { content: ' *'; color: var(--brand); }

/* ── Lot bid panel frame — card chrome only on desktop, bare on mobile ── */
/* On phones the bid actions live in the sticky bottom bar + modal, so the
   surviving inline content (title, status banner, timer) should read as
   ordinary page text — no border, no shadow, no "page within a page" feel. */
.lot-bid-frame {
    transition: box-shadow 280ms var(--ease-out), transform 280ms var(--ease-out), border-color 280ms;
}
@media (min-width: 1024px) {
    .lot-bid-frame {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 0;
        box-shadow: none;
    }
}

/* ── Cards — dossier style ─────────────────────────────────────────────── */

.card {
    /* Figma: flat panels — border only, square, no shadow / no hover lift. */
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0;
    box-shadow: none;
    transition: border-color 200ms var(--ease-out);
}
.card:hover { border-color: var(--border); }

/* Catalogue dossier card — heavier ink card for headline pieces */
.dossier {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.75rem;
    position: relative;
    overflow: hidden;
    transition: box-shadow 280ms var(--ease-out), transform 280ms var(--ease-out);
}
.dossier::before {
    content: '';
    position: absolute;
    top: 0; left: 1.75rem; right: 1.75rem;
    height: 3px;
    background: var(--brand);
    transform-origin: left;
}
.dossier--brand::before { background: var(--brand); }
.dossier--gold::before  { background: var(--gold); }
.dossier:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }

/* Vehicle/auction card — rounded white tile, soft lift on hover */
.vehicle-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    transition: transform 280ms var(--ease-out), box-shadow 280ms var(--ease-out), border-color 280ms;
    text-decoration: none;
    color: inherit;
    display: block;
    position: relative;
}
.vehicle-card:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-6px);
    border-color: var(--border);
    color: inherit;
}
.vehicle-card .image-wrap {
    aspect-ratio: 4 / 3;
    background: var(--paper-deep);
    overflow: hidden;
    position: relative;
}
.vehicle-card .image-wrap::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(11,18,32,0.10));
    pointer-events: none;
}
.vehicle-card .image-wrap img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 700ms var(--ease-expo);
}
.vehicle-card:hover .image-wrap img { transform: scale(1.06); }
.vehicle-card .body { padding: 1.25rem 1.4rem 1.5rem; }
.vehicle-card .title {
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: none;
    font-size: 1.2rem;
    color: var(--ink);
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 0.5rem 0 0.4rem;
}
.vehicle-card:hover .title { color: var(--brand); }
.vehicle-card .lot-num {
    position: absolute;
    top: 0.85rem; left: 0.85rem;
    z-index: 2;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: none;
    color: var(--ink);
    background: rgba(255,255,255,0.92);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    padding: 0.3rem 0.6rem;
    border-radius: var(--radius-pill);
    box-shadow: 0 2px 8px -2px rgba(11,18,32,0.2);
}

/* Pills/badges */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.34rem 0.7rem;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.01em;
    text-transform: none;
    border-radius: var(--radius-pill);
    line-height: 1;
}
.pill-live    { background: var(--live); color: #fff; }
.pill-soon    { background: var(--brand-soft); color: var(--brand); }
.pill-closed  { background: var(--paper-deep); color: var(--ink-mute); border: 1px solid var(--border); }
.pill-outline { background: transparent; color: var(--ink-soft); border: 1px solid var(--border); }
.pill-gold    { background: var(--gold-soft); color: var(--gold-dark); }

/* Live ribbon (top-left of cards) */
.ribbon-live {
    position: absolute;
    top: 0.85rem;
    left: 0.85rem;
    background: var(--live);
    color: #fff;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: none;
    padding: 0.35rem 0.7rem;
    z-index: 2;
    border-radius: var(--radius-pill);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    box-shadow: 0 4px 12px rgba(224,57,75,0.35);
}
.ribbon-live::before {
    content: '';
    width: 6px; height: 6px;
    background: currentColor;
    border-radius: 50%;
    box-shadow: 0 0 0 0 currentColor;
    animation: live-pulse 1.5s ease-in-out infinite;
}

/* Live pulse dot */
@keyframes live-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(224, 57, 75, 0.55); }
    50%      { box-shadow: 0 0 0 8px rgba(224, 57, 75, 0); }
}
.live-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--live);
    animation: live-pulse 1.5s ease-in-out infinite;
    margin-right: 0.5rem;
    vertical-align: middle;
}

/* ── Hero — dark editorial pane ─────────────────────────────────────────── */

.hero {
    background-color: var(--hero-dark);
    background-image: var(--hero-bg-url, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--on-dark);
    position: relative;
    overflow: hidden;
}
.hero::before {
    content: '';
    position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgba(11,16,32, 0.55) 0%, rgba(11,16,32, 0.92) 100%),
        radial-gradient(ellipse at 78% 18%, rgba(124, 58, 237, 0.35) 0%, transparent 60%),
        radial-gradient(ellipse at 12% 82%, rgba(200, 16, 46, 0.30) 0%, transparent 55%);
    z-index: 1;
}
.hero::after {
    /* Hairline grain — barely visible texture */
    content: '';
    position: absolute; inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.35;
    mix-blend-mode: overlay;
    background-image:
        repeating-linear-gradient(0deg,   rgba(255,255,255,0.02) 0 1px, transparent 1px 3px),
        repeating-linear-gradient(90deg,  rgba(255,255,255,0.02) 0 1px, transparent 1px 3px);
}

/* Home hero — even stronger overlay for legibility over photo */
.hero-home::before {
    background:
        linear-gradient(180deg, rgba(11,16,32, 0.50) 0%, rgba(11,16,32, 0.82) 60%, rgba(7,10,22, 0.96) 100%),
        radial-gradient(ellipse at 78% 22%, rgba(124, 58, 237, 0.32) 0%, transparent 65%),
        radial-gradient(ellipse at 12% 78%, rgba(200, 16, 46, 0.26) 0%, transparent 55%);
}

.hero > * { position: relative; z-index: 2; }
.hero h1, .hero .h1 { color: var(--on-dark); }

/* Editorial corner marks — used on hero corners */
.corner-marks { position: absolute; inset: 1.5rem; z-index: 3; pointer-events: none; }
.corner-marks::before,
.corner-marks::after {
    content: '';
    position: absolute;
    width: 18px; height: 18px;
    border: 1px solid rgba(251, 249, 243, 0.45);
}
.corner-marks::before { top: 0;    left: 0;    border-right: 0; border-bottom: 0; }
.corner-marks::after  { bottom: 0; right: 0;   border-left: 0;  border-top: 0; }

/* ── Section spacing ───────────────────────────────────────────────────── */

.section { padding: clamp(3.5rem, 6.5vw, 6.5rem) 0; }
.section-alt { background: var(--paper-deep); }
.section-ink {
    background: var(--hero-dark);
    color: var(--on-dark);
}
.section-ink h1, .section-ink h2, .section-ink h3 { color: var(--on-dark); }

/* Section header — eyebrow + serif title + hairline */
.section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 2.25rem;
}
.section-head__title { margin: 0.4rem 0 0; }
.section-head__count {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    color: var(--ink-mute);
    text-transform: uppercase;
    white-space: nowrap;
}

/* ── Announcement marquee — refined ribbon ─────────────────────────────── */

.marquee-bar {
    background: var(--brand);
    color: #fff;
    overflow: hidden;
    position: relative;
}
.marquee-bar::before,
.marquee-bar::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0; width: 64px;
    z-index: 2;
    pointer-events: none;
}
.marquee-bar::before { left: 0;  background: linear-gradient(90deg, var(--brand) 0%, transparent 100%); }
.marquee-bar::after  { right: 0; background: linear-gradient(270deg, var(--brand) 0%, transparent 100%); }

.marquee-track {
    display: inline-flex;
    align-items: center;
    gap: 2.5rem;
    padding: 0.42rem 0;
    white-space: nowrap;
    animation: marquee-scroll 60s linear infinite;
    will-change: transform;
}
.marquee-bar:hover .marquee-track { animation-play-state: paused; }

.marquee-item {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    color: #fff;
}
.marquee-sep {
    display: inline-block;
    width: 5px; height: 5px;
    background: rgba(255,255,255,0.85);
    border-radius: 50%;
    flex-shrink: 0;
}

@keyframes marquee-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

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

/* ── Top utility / contact bar ─────────────────────────────────────────── */

.utility-bar {
    background: var(--hero-dark);
    color: var(--on-dark);
    font-family: var(--font-mono);
    font-size: 0.74rem;
    letter-spacing: 0.02em;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.utility-bar a { color: var(--on-dark-soft); transition: color 180ms; }
.utility-bar a:hover { color: #fff; }

/* ── Header / nav — editorial masthead ────────────────────────────────── */

.site-header {
    background: rgba(247, 248, 252, 0.8);
    -webkit-backdrop-filter: saturate(150%) blur(14px);
    backdrop-filter: saturate(150%) blur(14px);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 50;
}

/* Nav — pill links; active/hover gets a soft indigo-tinted chip. */
.nav-capsule { display: flex; align-items: center; gap: 0.15rem; }
.site-header .nav-link {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: -0.005em;
    text-transform: none;
    color: var(--ink-mute);
    padding: 0.5rem 0.9rem;
    border-radius: var(--radius-pill);
    transition: color 160ms, background 160ms;
    text-decoration: none;
    position: relative;
    white-space: nowrap;
}
.site-header .nav-link:hover { color: var(--ink); background: var(--paper-deep); }
.site-header .nav-link.active { color: var(--brand); background: var(--brand-soft); }

/* Wordmark — Jakarta bold with a rounded indigo monogram chip. */
.wordmark {
    font-family: var(--font-display);
    font-weight: 800;
    text-transform: none;
    font-size: 1.4rem;
    letter-spacing: -0.03em;
    color: var(--ink);
    text-decoration: none;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}
.wordmark .accent { color: var(--brand); }
.wordmark-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex-shrink: 0;
    border-radius: 12px;
    background: linear-gradient(140deg, var(--brand) 0%, var(--brand-2) 100%);
    color: #fff;
    font-family: var(--font-display); font-weight: 800; font-size: 1.15rem;
    letter-spacing: -0.02em;
    box-shadow: 0 6px 16px -6px rgba(225,29,42,0.5);
    transition: transform 280ms var(--ease-expo);
}
.wordmark:hover .wordmark-badge { transform: rotate(-6deg) scale(1.05); }
.wordmark-text { display: inline-flex; flex-direction: column; line-height: 0.95; }
.wordmark-text small {
    font-family: var(--font-mono); font-weight: 500;
    font-size: 0.46rem; letter-spacing: 0.28em; text-transform: uppercase;
    color: var(--ink-faint); margin-top: 0.28rem;
}

/* Live chip in header (auto-shown via SSE) */
.hdr-live {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.4rem 0.75rem; border-radius: var(--radius-pill);
    background: rgba(224,57,75,0.08); border: 1px solid rgba(224,57,75,0.25);
    color: var(--live); font-size: 0.8rem; font-weight: 700;
    text-decoration: none; white-space: nowrap; transition: opacity 220ms;
}
.hdr-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--live); animation: live-pulse 1.5s ease-in-out infinite; }

/* ── Header icon buttons (mobile contact + burger) ───────────────────── */
.hdr-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 12px;
    color: var(--ink); background: var(--surface);
    border: 1px solid var(--border);
    transition: background 160ms, color 160ms, border-color 160ms;
    cursor: pointer;
}
.hdr-icon-btn:hover { background: var(--brand-soft); color: var(--brand); border-color: var(--brand); }

/* ── Mobile fullscreen menu — editorial black drawer ─────────────────── */
.mobile-nav {
    position: fixed; inset: 0; z-index: 60;
    background: #0A0A0B;
    display: flex; flex-direction: column;
    overflow-y: auto;
}
.mobile-nav::before {
    content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; z-index: 2;
    background: var(--brand); pointer-events: none;
}
.mobile-nav-head {
    position: relative; z-index: 1;
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.05rem 1.35rem; border-bottom: 1px solid rgba(255,255,255,0.12);
}
.mobile-nav-wm { font-family: var(--font-display); font-weight: 600; font-size: 1.55rem; letter-spacing: -0.01em; color: #fff; text-decoration: none; line-height: 1; }
.mobile-nav-wm .accent { color: var(--brand); }
.mobile-nav-close { width: 42px; height: 42px; display: grid; place-items: center; border-radius: var(--radius-sm); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.22); color: #fff; cursor: pointer; flex-shrink: 0; }
.mobile-nav-close:hover { background: var(--brand); border-color: var(--brand); }
.mobile-nav-body { position: relative; z-index: 1; padding: 0.4rem 1.35rem 1.4rem; flex: 1; }
.mobile-nav-link {
    display: flex; align-items: baseline; gap: 0.95rem;
    padding: 0.92rem 0;
    font-family: var(--font-display); font-weight: 600; font-size: 1.85rem;
    letter-spacing: -0.01em; line-height: 1; color: #fff;
    text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.1);
    transition: color 150ms, padding-left 180ms var(--ease-out);
}
.mobile-nav-link .idx {
    order: -1; width: 1.7rem; flex-shrink: 0;
    font-family: var(--font-mono); font-size: 0.64rem; font-weight: 600;
    letter-spacing: 0.08em; color: rgba(255,255,255,0.35);
}
.mobile-nav-link:hover, .mobile-nav-link:active, .mobile-nav-link.is-accent { color: var(--brand); padding-left: 0.4rem; }
.mobile-nav-link.is-accent .idx { color: var(--brand); }
/* Contact strip inside the drawer (utility bar is hidden on phones) */
.mobile-nav-meta { position: relative; z-index: 1; padding: 1.2rem 1.35rem; border-top: 1px solid rgba(255,255,255,0.12); display: grid; gap: 0.65rem; }
.mobile-nav-meta a, .mobile-nav-meta span { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.02em; color: rgba(255,255,255,0.72); text-decoration: none; display: inline-flex; align-items: center; gap: 0.55rem; }
.mobile-nav-meta a:hover { color: #fff; }
.mobile-nav-meta .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--brand); flex-shrink: 0; }

/* ── Footer — editorial colophon ──────────────────────────────────────── */

.site-footer {
    background: var(--hero-dark);
    color: var(--on-dark-soft);
    padding: 4.5rem 0 1.75rem;
    margin-top: 5rem;
    position: relative;
}
.site-footer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand), var(--brand-2));
}
.site-footer h4 {
    font-family: var(--font-body);
    color: rgba(255,255,255,0.55);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: none;
    margin-bottom: 1rem;
}
.site-footer .wordmark { color: var(--on-dark); }
.site-footer .wordmark .accent { color: #F1A7AE; }
.site-footer a { color: var(--on-dark-soft); transition: color 180ms; }
.site-footer a:hover { color: #fff; }

/* CTA band */
.footer-cta {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem;
    padding: 2rem; margin-bottom: 3rem;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    box-shadow: 0 20px 50px -24px rgba(225,29,42,0.6);
}
.footer-cta-title { font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; letter-spacing: -0.03em; color: #fff; margin: 0; }
.footer-cta-sub { color: rgba(255,255,255,0.82); margin: 0.4rem 0 0; font-size: 0.95rem; }

/* Main grid */
.footer-main { display: grid; grid-template-columns: 1fr; gap: 2.5rem; padding-bottom: 1rem; }
@media (min-width: 900px) { .footer-main { grid-template-columns: 1.3fr 2fr; gap: 4rem; } }
.footer-tagline { color: var(--on-dark-soft); font-size: 0.95rem; line-height: 1.6; margin: 1.1rem 0 1.25rem; max-width: 42ch; }
.footer-contact { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.9rem; }
.footer-phone { color: #fff !important; font-size: 1.15rem; font-weight: 700; }
.footer-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
@media (min-width: 600px) { .footer-cols { grid-template-columns: repeat(3, 1fr); } }
.footer-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.footer-list a { font-size: 0.92rem; }
.footer-addr { font-size: 0.9rem; line-height: 1.6; color: var(--on-dark-soft); margin: 0; }
.footer-legal {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 1.5rem;
    margin-top: 3rem;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    letter-spacing: 0.04em;
    color: rgba(243,245,251,0.5);
}

/* ── Spec list (vehicle details) — ledger style ───────────────────────── */

.spec-row {
    display: grid;
    grid-template-columns: 150px 1fr;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-soft);
    align-items: baseline;
    gap: 1rem;
}
.spec-row:last-child { border-bottom: none; }
.spec-row dt {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--ink-mute);
}
.spec-row dd {
    margin: 0;
    color: var(--ink);
    font-weight: 500;
    font-size: 1rem;
    word-break: break-all;
    min-width: 0;
    overflow-wrap: anywhere;
}
/* Numeric values (VIN, HIN, Stock ID, odometer) — JetBrains Mono is wider
   than Inter, so 17-char VINs overflow on narrow phones. Drop the size
   slightly + force wrap. */
.spec-row dd.numeric {
    font-size: 0.85rem;
    font-family: var(--font-mono);
    letter-spacing: 0;
}

/* ── Tables (admin) ────────────────────────────────────────────────────── */

.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th {
    background: var(--bg-soft);
    color: var(--ink-mute);
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0.01em;
    text-align: left;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border);
}
.admin-table td { padding: 0.85rem 1rem; border-bottom: 1px solid var(--border-soft); color: var(--ink-soft); }
.admin-table tr:hover td { background: var(--bg-soft); }

/* ── Prose for legal/about ─────────────────────────────────────────────── */

.prose {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--ink-soft);
    max-width: 70ch;
}
.prose h2 { color: var(--brand); margin: 3rem 0 1rem; font-size: 2rem; }
.prose h3 { color: var(--ink); margin: 2rem 0 0.75rem; font-size: 1.5rem; }
.prose p { margin: 1.1rem 0; }
.prose ul, .prose ol { margin: 1rem 0 1rem 1.5rem; }
.prose ul li { list-style: none; position: relative; padding-left: 1.5rem; margin: 0.4rem 0; }
.prose ul li::before { content: '▸'; position: absolute; left: 0; color: var(--brand); font-weight: bold; }
.prose ol { padding-left: 1rem; }
.prose ol li { margin: 0.4rem 0; }
.prose a { color: var(--brand); border-bottom: 1px solid var(--brand-soft); }
.prose strong { color: var(--ink); }
.prose blockquote {
    border-left: 4px solid var(--brand);
    padding: 0.5rem 0 0.5rem 1.5rem;
    margin: 2rem 0;
    font-style: italic;
    color: var(--ink);
    font-size: 1.2rem;
}

/* ── Dashboard tabs — slim editorial nav ──────────────────────────────── */

.dash-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.dash-tab {
    padding: 0.85rem 1.4rem;
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 0.74rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-mute);
    background: var(--surface);
    border-right: 1px solid var(--border-soft);
    text-decoration: none;
    transition: all 180ms;
    flex: 1 1 auto;
    text-align: center;
    min-width: max-content;
    position: relative;
}
.dash-tab:last-child { border-right: none; }
.dash-tab:hover { background: var(--paper); color: var(--ink); }
.dash-tab.active {
    background: var(--brand);
    color: #fff;
}
.dash-tab.active:hover { background: var(--brand-dark); color: #fff; }

/* Dashboard stat tiles — editorial figures */
.stat-tile {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    padding: 1.5rem 1.75rem;
    transition: border-color 180ms, box-shadow 180ms;
    position: relative;
    overflow: hidden;
}
.stat-tile::before {
    content: '';
    position: absolute;
    top: 0; left: 1.75rem; right: 1.75rem;
    height: 3px; border-radius: 0 0 3px 3px;
    background: var(--brand);
}
.stat-tile:hover { border-color: var(--border); box-shadow: var(--shadow-hover); transform: translateY(-3px); }
.stat-tile .label {
    font-family: var(--font-body);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.01em;
    font-size: 0.82rem;
    color: var(--ink-mute);
}
.stat-tile .value {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -0.03em;
    font-size: 3.25rem;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--brand);
    margin-top: 0.65rem;
}
.stat-tile.is-success { }
.stat-tile.is-success::before { background: var(--won); }
.stat-tile.is-success .value { color: var(--won); }
.stat-tile.is-info::before { background: var(--info); }
.stat-tile.is-info .value    { color: var(--info); }
.stat-tile.is-gold::before { background: var(--gold); }
.stat-tile.is-gold .value { color: var(--gold); }

/* ── File upload tile (KYC, branding) ─────────────────────────────────── */

.upload-tile {
    display: block;
    position: relative;
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    background: var(--bg-soft);
    padding: 2rem 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: all 200ms var(--ease-out);
    overflow: hidden;
}
.upload-tile:hover {
    border-color: var(--brand);
    background: var(--surface-raise);
    transform: translateY(-1px);
    box-shadow: var(--shadow-card);
}
.upload-tile.has-file {
    border-style: solid;
    border-color: var(--won);
    background: var(--surface-raise);
    padding: 0;
}
.upload-tile input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}
.upload-tile-icon {
    width: 48px; height: 48px;
    margin: 0 auto 0.75rem;
    color: var(--ink-mute);
    transition: color 180ms;
}
.upload-tile:hover .upload-tile-icon { color: var(--brand); }
.upload-tile-title {
    font-family: var(--font-display);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink);
    margin-bottom: 0.25rem;
}
.upload-tile-hint {
    font-size: 0.78rem;
    color: var(--ink-mute);
    line-height: 1.45;
}
.upload-tile-types {
    display: inline-block;
    margin-top: 0.5rem;
    font-family: var(--font-display);
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    color: var(--ink-mute);
    background: rgba(255,255,255,0.05);
    padding: 0.2rem 0.6rem;
    border-radius: 2px;
}

/* When file selected — preview area */
.upload-preview {
    display: grid;
    grid-template-columns: 96px 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--surface-raise);
    text-align: left;
}
.upload-preview-thumb {
    width: 96px; height: 72px;
    background: var(--bg-soft);
    border-radius: var(--radius-sm);
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.upload-preview-thumb img { width: 100%; height: 100%; object-fit: cover; }
.upload-preview-thumb .pdf-icon {
    color: var(--brand);
    width: 38px; height: 38px;
}
.upload-preview-info { min-width: 0; }
.upload-preview-name {
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-size: 0.92rem;
}
.upload-preview-meta {
    font-size: 0.75rem;
    color: var(--ink-mute);
    display: flex; gap: 0.6rem; align-items: center;
    margin-top: 0.15rem;
}
.upload-preview-meta .ok {
    color: var(--won);
    font-family: var(--font-display);
    text-transform: uppercase; letter-spacing: 0.1em;
    font-size: 0.7rem;
}
.upload-preview-clear {
    width: 36px; height: 36px;
    border: none;
    border-radius: 50%;
    background: var(--bg-soft);
    color: var(--ink-mute);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 180ms;
    flex-shrink: 0;
    z-index: 3;
    position: relative;
}
.upload-preview-clear:hover { background: var(--brand); color: #fff; }

/* ── Past event cards (frosted-glass treatment) ───────────────────────── */

/* "Sealed archive" look — slight blur + grayscale lifts on hover. */
.past-card {
    position: relative;
    transition: filter 350ms var(--ease-out);
    filter: grayscale(0.4) brightness(0.97) contrast(0.95);
}
.past-card::after {
    content: '';
    position: absolute; inset: 0;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    background: rgba(0, 0, 0, 0.04);
    pointer-events: none;
    border-radius: inherit;
    transition: backdrop-filter 350ms var(--ease-out), background 350ms var(--ease-out);
    z-index: 1;
}
.past-card > * { position: relative; z-index: 2; }
.past-card:hover {
    filter: grayscale(0) brightness(1) contrast(1);
}
.past-card:hover::after {
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
    background: transparent;
}

/* Status pills inside tables */
.status-live      { background: rgba(224,57,75,0.1); color: var(--live); border: 1px solid rgba(224,57,75,0.25); }
.status-soon      { background: var(--brand-soft); color: var(--brand); border: 1px solid rgba(225,29,42,0.25); }
.status-closed    { background: var(--bg-soft); color: var(--ink-mute); border: 1px solid var(--border); }
.status-success   { background: rgba(22,163,74,0.1); color: var(--won); border: 1px solid rgba(22,163,74,0.25); }

/* ── Stat block — editorial figure ────────────────────────────────────── */

.stat-num {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -0.035em;
    font-size: clamp(3rem, 5.5vw, 4.75rem);
    line-height: 0.95;
    letter-spacing: -0.03em;
    color: var(--ink);
}
.stat-num--brand { color: var(--brand); }
.stat-num--gold  { color: var(--gold); }

.stat-figure {
    position: relative;
    padding: 1rem 0 1.25rem;
}
.stat-figure__index {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.2em;
    color: var(--ink-faint);
    text-transform: uppercase;
    margin-bottom: 0.55rem;
}
.stat-figure__label {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin-top: 0.45rem;
}

/* ── Page-load reveal ──────────────────────────────────────────────────── */

@keyframes rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
.rise { animation: rise 0.7s var(--ease-out) both; }
.rise-1 { animation-delay: 0.05s; }
.rise-2 { animation-delay: 0.15s; }
.rise-3 { animation-delay: 0.25s; }
.rise-4 { animation-delay: 0.35s; }

/* ── Misc ──────────────────────────────────────────────────────────────── */

.countdown-urgent { color: var(--brand); animation: blink 1s ease-in-out infinite; }
@keyframes blink { 50% { opacity: 0.5; } }

/* ── Live-auction bid status banner ────────────────────────────────────
   Big "You're winning / outbid / won" headline that real auction sites
   (Copart, eBay) put above the bid amount. Reads instantly on mobile. */
.bid-status {
    position: relative;
    border-radius: var(--radius);
    padding: 0.9rem 1rem;
    margin-bottom: 1rem;
    text-align: center;
    border: 1px solid transparent;
    overflow: hidden;
}
.bid-status__label {
    display: block;
    font-family: var(--font-display, inherit);
    font-variation-settings: "opsz" 36, "SOFT" 30, "WONK" 0;
    font-weight: 500;
    font-size: 1.45rem;
    line-height: 1.12;
    letter-spacing: -0.012em;
}
.bid-status__sub {
    display: block;
    margin-top: 0.35rem;
    font-family: var(--font-body, inherit);
    font-size: 0.82rem;
    opacity: 0.85;
    line-height: 1.4;
}
.bid-status__dot {
    display: inline-block;
    width: 9px; height: 9px;
    border-radius: 50%;
    margin-right: 0.5rem;
    vertical-align: 0.05em;
}

/* Winning — green confidence */
.bid-status--winning {
    background: linear-gradient(135deg, rgba(34,197,94,0.18), rgba(132,204,22,0.10));
    border-color: rgba(34,197,94,0.45);
    color: #16a34a;
}
.bid-status--winning .bid-status__dot { background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,0.15); animation: bid-pulse 1.6s ease-in-out infinite; }
.bid-status--winning .bid-status__label { color: #15803d; }

/* Outbid — red urgency */
.bid-status--outbid {
    background: linear-gradient(135deg, rgba(239,68,68,0.16), rgba(239,68,68,0.06));
    border-color: rgba(239,68,68,0.5);
    color: #b91c1c;
}
.bid-status--outbid .bid-status__dot { background: #ef4444; box-shadow: 0 0 0 4px rgba(239,68,68,0.18); animation: bid-pulse 1s ease-in-out infinite; }
.bid-status--outbid .bid-status__label { color: #b91c1c; }

/* Won — gold celebration */
.bid-status--won {
    background: linear-gradient(135deg, rgba(251,191,36,0.22), rgba(245,158,11,0.10));
    border-color: rgba(251,191,36,0.55);
    color: #92400e;
}
.bid-status--won .bid-status__label { color: #b45309; font-size: 1.5rem; }
.bid-status--won::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
    transform: translateX(-100%);
    animation: bid-shine 2.4s ease-in-out infinite;
}

/* Lost — muted */
.bid-status--lost {
    background: var(--bg-soft);
    border-color: var(--border);
    color: var(--ink-mute);
}
.bid-status--lost .bid-status__label { color: var(--ink-mute); }

/* First bid — neutral call to action */
.bid-status--first {
    background: linear-gradient(135deg, rgba(225,29,42,0.10), rgba(225,29,42,0.03));
    border-color: rgba(225,29,42,0.30);
    color: var(--brand);
}
.bid-status--first .bid-status__dot { background: var(--brand); box-shadow: 0 0 0 4px rgba(225,29,42,0.18); }
.bid-status--first .bid-status__label { color: var(--brand); }

/* Waiting / unsold / guest — informational */
.bid-status--waiting,
.bid-status--unsold,
.bid-status--guest {
    background: var(--bg-soft);
    border-color: var(--border);
    color: var(--ink);
}
.bid-status--waiting .bid-status__label,
.bid-status--unsold  .bid-status__label,
.bid-status--guest   .bid-status__label { color: var(--ink); font-size: 1.15rem; }

/* Just-bid pulse — fires for ~2.5s after a successful bid */
.bid-status.just-bid { animation: bid-celebrate 0.6s ease-out; }

@keyframes bid-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.6; transform: scale(1.2); }
}
@keyframes bid-celebrate {
    0%   { transform: scale(0.98); box-shadow: 0 0 0 0 rgba(34,197,94,0.5); }
    40%  { transform: scale(1.02); box-shadow: 0 0 0 12px rgba(34,197,94,0); }
    100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}
@keyframes bid-shine {
    0%   { transform: translateX(-100%); }
    60%  { transform: translateX(100%); }
    100% { transform: translateX(100%); }
}

.lightbox-overlay {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 100;
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(8px);
}
.lightbox-overlay img { max-height: 90vh; max-width: 90vw; object-fit: contain; }

.spinner {
    border: 2px solid var(--brand-soft);
    border-top-color: var(--brand);
    border-radius: 50%;
    width: 22px; height: 22px;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Site logo (header + footer) — slightly larger on phones so it reads
   well next to the touch icons; sized as before on lg+. */
.mb-site-logo {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-height: 52px;
    max-width: 220px;
    object-fit: contain;
}
@media (min-width: 1024px) {
    .mb-site-logo { max-height: 48px; max-width: 240px; }
}

/* ── Mobile sticky bid panel — shared between event.php (uses eventLive
   viewer-lot state) and lot.php (uses lotBidder state). Anchors to the
   viewport bottom on phones. ─────────────────────────────────────────────── */
.mb-sticky-panel {
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 18px rgba(0,0,0,0.08);
    padding-bottom: max(0.55rem, env(safe-area-inset-bottom));
}
.mb-sticky-panel.is-flashing {
    animation: mb-sticky-flash 700ms cubic-bezier(0.22,1,0.36,1);
}
@keyframes mb-sticky-flash {
    0%   { box-shadow: 0 -4px 18px rgba(22,163,74,0.45), inset 0 0 0 9999px rgba(22,163,74,0.12); }
    100% { box-shadow: 0 -4px 18px rgba(0,0,0,0.08),    inset 0 0 0 9999px rgba(22,163,74,0); }
}
.mb-sticky-stepper {
    width: 38px;
    background: var(--paper-deep); border: 1px solid var(--border);
    border-radius: var(--radius-sm); cursor: pointer;
    font-size: 1.15rem; color: var(--ink); font-weight: 600;
    transition: transform 100ms, background 150ms;
}
.mb-sticky-stepper:active { transform: scale(0.92); background: var(--border-soft); }
.mb-sticky-quick {
    background: transparent; border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 0.35rem 0.2rem; cursor: pointer;
    color: var(--ink); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em;
    transition: transform 100ms, border-color 150ms, color 150ms, background 150ms;
}
.mb-sticky-quick:hover  { border-color: var(--brand); color: var(--brand); }
.mb-sticky-quick:active { transform: scale(0.94); background: var(--brand-soft); }
.mb-sticky-place {
    background: var(--brand); color: var(--on-brand); border: 0;
    border-radius: var(--radius-sm); padding: 0.65rem 0.4rem;
    font-size: 0.76rem; letter-spacing: 0.12em; font-weight: 700;
    text-transform: uppercase; cursor: pointer; line-height: 1.1; min-height: 46px;
    transition: transform 100ms, background 150ms;
}
.mb-sticky-place:active   { transform: scale(0.96); background: var(--brand-dark); }
.mb-sticky-place:disabled { opacity: 0.6; cursor: not-allowed; }
.mb-sticky-buy {
    background: transparent; color: var(--brand); border: 1.5px solid var(--brand);
    border-radius: var(--radius-sm); padding: 0.55rem 0.4rem;
    font-size: 0.72rem; letter-spacing: 0.1em; font-weight: 700;
    text-transform: uppercase; cursor: pointer; line-height: 1.1; min-height: 46px;
    text-decoration: none;
    transition: transform 100ms, background 150ms;
}
.mb-sticky-buy:hover  { background: var(--brand-soft); }
.mb-sticky-buy:active { transform: scale(0.96); }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--paper-deep); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-mute); }

/* Selection */
::selection { background: var(--brand); color: #fff; }

/* ── Editorial utility classes ─────────────────────────────────────────── */

.serif        { font-family: var(--font-display); }
.italic-wonk  { font-style: italic; font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; }
.mono         { font-family: var(--font-mono); }
.text-balance { text-wrap: balance; }
.text-pretty  { text-wrap: pretty; }

/* Reveal — slide-in for grid items */
@keyframes reveal-up {
    from { opacity: 0; transform: translateY(28px); filter: blur(6px); }
    to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}
.reveal {
    animation: reveal-up 0.9s var(--ease-expo) both;
}
.reveal-stagger > * { animation: reveal-up 0.8s var(--ease-expo) both; }
.reveal-stagger > *:nth-child(1) { animation-delay: 0.04s; }
.reveal-stagger > *:nth-child(2) { animation-delay: 0.10s; }
.reveal-stagger > *:nth-child(3) { animation-delay: 0.16s; }
.reveal-stagger > *:nth-child(4) { animation-delay: 0.22s; }
.reveal-stagger > *:nth-child(5) { animation-delay: 0.28s; }
.reveal-stagger > *:nth-child(6) { animation-delay: 0.34s; }
.reveal-stagger > *:nth-child(7) { animation-delay: 0.40s; }
.reveal-stagger > *:nth-child(8) { animation-delay: 0.46s; }

/* Decorative paper grain — apply to a parent that has paper bg */
.paper-grain {
    position: relative;
    isolation: isolate;
}
.paper-grain::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        radial-gradient(rgba(22,19,12,0.025) 1px, transparent 1px);
    background-size: 3px 3px;
    opacity: 0.6;
}
.paper-grain > * { position: relative; z-index: 1; }

/* Marquee headline reveal — used on hero copy */
.headline-reveal {
    display: inline-block;
    overflow: hidden;
    line-height: 1;
}
.headline-reveal > * {
    display: inline-block;
    animation: reveal-up 1s var(--ease-expo) both;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Mobile: shrink the realtime toast stack (outbid / winning / next lot) to
   ~half size so it doesn't blanket the screen. Scaling the CONTAINER keeps the
   per-toast slide-in transform (translateX) working untouched. */
@media (max-width: 640px) {
    #mb-toasts {
        transform: scale(0.55);
        transform-origin: top right;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   FIGMA LOT CARD + EDITORIAL TOOLBAR — shared across Home / Inventory / Wins.
   Flat, square, hairline-bordered (Make "MotorBid" system).
   ═══════════════════════════════════════════════════════════════════ */
.lot-fig { background: var(--surface); display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.lot-fig-img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms cubic-bezier(0.16,1,0.3,1); }
.lot-fig:hover .lot-fig-img { transform: scale(1.05); }
.lot-fig:hover .lot-fig-title,
.lot-fig:hover .lot-fig-cta { color: var(--brand); }

/* hairline card grid — 1px gap on border background reads as separators */
.fig-grid { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); grid-template-columns: 1fr; }
@media (min-width: 640px)  { .fig-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .fig-grid { grid-template-columns: repeat(3, 1fr); } }

/* lot timer chip (top-right over media) */
.lot-timer { display: inline-block; padding: 0.12rem 0.45rem; background: rgba(0,0,0,0.7); color: rgba(255,255,255,0.85); font-family: var(--font-mono); font-size: 0.68rem; font-variant-numeric: tabular-nums; }

/* ── Editorial flat toolbar (Inventory) ───────────────────────────── */
.fig-field { border: 1px solid var(--border); background: var(--surface); padding: 0.55rem 0.75rem; font-family: var(--font-body); font-size: 0.85rem; color: var(--ink); outline: none; transition: border-color .15s; }
.fig-field:focus { border-color: var(--ink); }
.fig-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.55rem 0.9rem; border: 1px solid var(--border); background: var(--surface); color: var(--ink-mute); font-family: var(--font-body); font-size: 0.78rem; font-weight: 500; text-decoration: none; cursor: pointer; transition: color .15s, border-color .15s, background .15s; white-space: nowrap; }
.fig-btn:hover { color: var(--ink); border-color: var(--ink); }
.fig-btn.is-active { background: var(--hero-dark); color: var(--on-dark); border-color: var(--hero-dark); }
.fig-btn-dark { background: var(--hero-dark); color: var(--on-dark); border-color: var(--hero-dark); }
.fig-btn-dark:hover { opacity: 0.85; color: var(--on-dark); }
.fig-iconbtn { display: inline-flex; align-items: center; justify-content: center; padding: 0.5rem; border: 1px solid var(--border); background: var(--surface); color: var(--ink-mute); cursor: pointer; transition: all .15s; }
.fig-iconbtn.is-active { background: var(--hero-dark); color: var(--on-dark); border-color: var(--hero-dark); }

/* list row (Inventory list view) */
.fig-row { display: grid; grid-template-columns: 80px 1fr auto; align-items: center; border-bottom: 1px solid var(--border); text-decoration: none; color: inherit; transition: background .15s; }
.fig-row:hover { background: var(--paper-deep); }
.fig-row:hover .lot-fig-title { color: var(--brand); }
@media (min-width: 640px) { .fig-row, .fig-row-head { grid-template-columns: 100px 1fr 140px 140px 110px 90px; } }

/* ── Figma: flat square buttons — no glow shadow, no hover lift ──────── */
.btn, .btn-primary, .btn-brand, .btn-orange, .btn-gold, .btn-ink,
.btn-ghost, .btn-ghost-ink, .btn-ghost-light { box-shadow: none !important; }
.btn:hover, .btn-primary:hover, .btn-brand:hover, .btn-orange:hover, .btn-gold:hover,
.btn-ink:hover, .btn-ghost:hover, .btn-ghost-ink:hover, .btn-ghost-light:hover {
    box-shadow: none !important;
    transform: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   CRIMSON LEDGER — serious white/black/red enhancement layer (COPY 5)
   Loaded last, so it wins over earlier rules. Flat white ground, one red accent,
   sharp corners, crisp hairlines, minimal motion. No gradients, no glows, no auras.
   ══════════════════════════════════════════════════════════════════════════ */

/* Flat white ground — no ambient colour. */
html { background: var(--paper); }
body { background: var(--paper); }

::selection { background: rgba(200,16,46,0.16); color: var(--ink); }

/* Custom scrollbar — neutral, slim. */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(10,10,11,0.18); border-radius: 0; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: rgba(10,10,11,0.32); background-clip: content-box; }
* { scrollbar-color: rgba(10,10,11,0.22) transparent; }

/* ── Accent utilities — solid red, no gradient ───────────────────────── */
.accent-text { background: none; -webkit-text-fill-color: currentColor; color: var(--brand); }
.accent-bar { height: 3px; width: 48px; border-radius: 0; background: var(--brand); }
.glass {
    background: rgba(255,255,255,0.86);
    -webkit-backdrop-filter: saturate(120%) blur(14px); backdrop-filter: saturate(120%) blur(14px);
    border: 1px solid var(--border);
}

/* ── Buttons — flat, sharp, red solid ────────────────────────────────── */
.btn { border-radius: var(--radius) !important; font-weight: 600; }
.btn-sm { border-radius: var(--radius-sm) !important; }
.btn-xs { border-radius: var(--radius-sm) !important; }
.btn-primary, .btn-brand, .btn-orange, .btn-grad {
    background: var(--brand) !important;
    color: var(--brand-ink) !important;
    border: 1px solid var(--brand) !important;
    box-shadow: none !important;
    font-weight: 600;
}
.btn-primary:hover, .btn-brand:hover, .btn-orange:hover, .btn-grad:hover {
    background: var(--brand-dark) !important;
    border-color: var(--brand-dark) !important;
    color: var(--brand-ink) !important;
    transform: none !important;
    box-shadow: none !important;
    filter: none !important;
}
/* Ghost — crisp hairline box, fills red on hover */
.btn-ghost, .btn-ghost-ink {
    background: #FFFFFF !important;
    color: var(--ink) !important;
    border: 1px solid var(--border-dark) !important;
    box-shadow: none !important;
}
.btn-ghost:hover, .btn-ghost-ink:hover {
    border-color: var(--brand) !important;
    color: var(--brand) !important;
    background: var(--brand-soft) !important;
    transform: none !important;
}
/* Ink button → solid black with white ink */
.btn-ink {
    background: var(--hero-dark) !important;
    color: #FFFFFF !important;
    border: 1px solid var(--hero-dark) !important;
    box-shadow: none !important;
}
.btn-ink:hover { background: #000 !important; color: #fff !important; transform: none !important; }
.btn-ghost-light { border-radius: var(--radius) !important; }

/* ── Cards — crisp hairline, sharp, minimal depth ────────────────────── */
.card {
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-card) !important;
    background: var(--surface);
    border: 1px solid var(--border);
}
.card:hover { border-color: var(--border-dark) !important; }
.dossier { border-radius: var(--radius) !important; box-shadow: var(--shadow-card); border: 1px solid var(--border); }
.dossier--brand { border-left: 3px solid var(--brand) !important; }
.vehicle-card { border-radius: var(--radius) !important; box-shadow: var(--shadow-card); background: var(--surface); border: 1px solid var(--border); transition: border-color .15s, box-shadow .2s; }
.vehicle-card:hover { box-shadow: var(--shadow-hover); border-color: var(--brand) !important; }
.vehicle-card .image-wrap { background: var(--paper-deep); }
.vehicle-card .image-wrap::after { background: linear-gradient(180deg, transparent 58%, rgba(10,10,11,0.30)); }
.vehicle-card .title { font-family: var(--font-display); font-weight: 600; }
.vehicle-card:hover .title { color: var(--brand); }
.vehicle-card .lot-num {
    color: #FFFFFF !important;
    background: rgba(10,10,11,0.72) !important;
    border: 1px solid rgba(255,255,255,0.16);
    box-shadow: none !important;
}

/* ── Pills / status — red live, neutral rest ─────────────────────────── */
.pill-live   { background: var(--live) !important; color: #FFFFFF !important; }
.pill-soon   { background: var(--brand-soft) !important; color: var(--brand) !important; }
.pill-closed { background: rgba(10,10,11,0.05) !important; color: var(--ink-mute) !important; border: 1px solid var(--border) !important; }
.pill-outline{ background: transparent !important; color: var(--ink-soft) !important; border: 1px solid var(--border) !important; }
.pill-gold   { background: rgba(10,10,11,0.05) !important; color: var(--ink) !important; border: 1px solid var(--border) !important; }
.status-live    { background: rgba(209,26,42,0.09) !important; color: var(--live) !important; border-color: rgba(209,26,42,0.26) !important; }
.status-soon    { background: var(--brand-soft) !important; color: var(--brand) !important; border-color: rgba(200,16,46,0.26) !important; }
.status-closed  { background: rgba(10,10,11,0.05) !important; color: var(--ink-mute) !important; border-color: var(--border) !important; }
.status-success { background: rgba(21,128,61,0.09) !important; color: var(--won) !important; border-color: rgba(21,128,61,0.26) !important; }

/* ── Forms — crisp white fields, sharp, red focus ────────────────────── */
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="tel"], input[type="datetime-local"],
input[type="date"], input[type="search"], select, textarea {
    background: #FFFFFF !important;
    border: 1px solid var(--border-dark) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--ink) !important;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--brand) !important;
    background: #FFFFFF !important;
    box-shadow: var(--ring) !important;
}
input::placeholder, textarea::placeholder { color: var(--ink-faint) !important; }
select option { background: #FFFFFF; color: var(--ink); }

/* ── Footer stays a near-black panel; on-dark tokens drive its text. ──── */
.site-footer { color: var(--on-dark); }
.fig-field, .fig-btn, .fig-iconbtn { border-radius: var(--radius-sm) !important; background: var(--surface) !important; }
.fig-field { border: 1px solid var(--border-dark) !important; }
.fig-btn.is-active, .fig-iconbtn.is-active, .fig-btn-dark { background: var(--brand) !important; color: var(--brand-ink) !important; border-color: var(--brand) !important; }
.lot-timer { background: rgba(10,10,11,0.82) !important; color: #fff !important; border-radius: var(--radius-sm); }

/* Sharp radius on common helpers */
.dash-tab, .stat-tile, .upload-tile, .past-card, .bid-status, .lot-bid-frame { border-radius: var(--radius) !important; }

@media (prefers-reduced-motion: reduce) {
    body { background-attachment: scroll; }
}