@charset "UTF-8";
/* Must be the very first bytes of the file — nothing, not even a comment, may
   precede it. Apache serves .css as `text/css` with no charset parameter, so the
   glyph markers in `content:` (✓ ⚠ ↑) are otherwise free to be decoded as
   something other than UTF-8 and render as mojibake. */

/* ──────────────────────────────────────────────────────────────────────────────
   Eastern Cape Grand Tour — entry flow
   Self-contained: this flow does not load css/site.css, so everything the page
   needs lives here. Palette and type follow the ECGT design handoff.
   ────────────────────────────────────────────────────────────────────────────── */

:root {
    --bg:        #0A0A0A;
    --bg-alt:    #111214;
    --surface:   #1A1B1E;
    --surface-2: #0F1012;
    --border:    #2A2C30;
    --border-hi: #3A3D43;
    --text:      #FFFFFF;
    --muted:     #B5B8BD;
    --muted-dim: #8B8F96;
    /* ── Action / accent ──────────────────────────────────────────────────────
       Three roles, kept strictly apart:

         --action  the thing you click. Oxblood, always with a gold hairline and
                   cream ink. Deliberately quieter than the gold: on this page the
                   accent leads and the action sits richly beneath it.
         --gold    accent, structure and text-level links. Carries 7.1:1 on the
                   page ground, so anything that has to be *read* uses this.
         --error   wrong input, and nothing else.

       The previous scheme had the action colour at #D42027 — l48% against the
       gold's l47%, one point apart at near-identical chroma. Two colours at the
       same value on black don't rank; neither recedes and both shout. It was also
       a near-match for --error, so "do this" and "you got that wrong" looked
       alike. Separating by lightness rather than hue fixes both at once. */
    --action:       #A5382A;   /* oxblood — filled action surfaces */
    --action-hover: #B03E2F;   /* lifts toward the light rather than dimming */
    --action-edge:  #C4553F;   /* borders and marks that must hold their own on dark */
    --action-ink:   #F5E7C8;   /* cream on oxblood — 5.36:1 */
    --gold:      #C8912A;
    --gold-hi:   #E0B255;
    --green:     #2FB463;
    --amber:     #E0A100;
    --error:     #E1362C;

    --radius:    12px;
    --radius-sm: 8px;
    --bar-h:     4.75rem;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    /* Room for the sticky total bar so the last field is never trapped under it. */
    padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px));
}

/* ─── Hero background ─────────────────────────────────────────────────────────
   The linked special event's artwork sits behind the whole page, fixed so it
   doesn't drift while the form scrolls. Two stacked layers: the image itself,
   then a black wash over it to hold text contrast. */

.has-hero-bg::before,
.has-hero-bg::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
}

.has-hero-bg::before {
    background-image: var(--hero-img);
    background-size: cover;
    /* Anchored right, matching the landing hero, so the shared artwork is
       cropped the same way on both pages of the flow. */
    background-position: right top;
    /* Light touch — just enough to stop the poster's baked-in title reading as a
       second, misaligned heading behind this page's own <h1>. The scale-up hides
       the transparent edges blur leaves behind. */
    filter: blur(2px);
    transform: scale(1.03);
}

.has-hero-bg::after {
    z-index: -1;
    /* Lightest at the masthead where there's little text, deepening as the form
       begins. The lower stops still need to be dark: field labels and hint copy
       are small and low-weight, and they sit directly on this. */
    background:
        linear-gradient(180deg,
            rgba(10,10,10,.42) 0%,
            rgba(10,10,10,.66) 30%,
            rgba(10,10,10,.82) 52%,
            rgba(10,10,10,.92) 74%,
            var(--bg) 100%);
}

/* Text that sits directly on the artwork rather than on a card gets a shadow
   instead of a heavier wash — it buys the contrast back without dimming the
   image, which is the point of keeping the overlay light. */
.has-hero-bg .rally-title,
.has-hero-bg .rally-subtitle,
.has-hero-bg .rally-eyebrow,
.has-hero-bg .section-title,
.has-hero-bg .section-num,
.has-hero-bg .section-hint,
.has-hero-bg .legend,
.has-hero-bg .field > label,
.has-hero-bg .carnum-status,
.has-hero-bg .carnum-note,
.has-hero-bg .hoody > .check .check-label,
.has-hero-bg .hoody > .check .check-sub,
.has-hero-bg .rally-footer {
    text-shadow: 0 1px 4px rgba(0,0,0,.85), 0 0 14px rgba(0,0,0,.55);
}

/* Surfaces go translucent over the artwork so it reads through, while staying
   dark enough to keep their own contrast. */
.has-hero-bg .section > .review,
.has-hero-bg .occupant,
.has-hero-bg .waiver-accept,
.has-hero-bg .pkg-body { background-color: rgba(26,27,30,.86); }

/* ─── Reading-column scrim ────────────────────────────────────────────────────
   A soft-edged slab of darkness under the form, so the artwork survives at the
   page margins as atmosphere while the cards sit on something calm.

   Two different techniques, on purpose:
     · left/right fade is baked into the gradient itself
     · top/bottom fade comes from a mask
   Doing both in one gradient isn't possible, and doing both with masks needs
   mask-composite, which is patchier than a plain mask-image. Split like this it
   degrades gracefully: lose mask support and you still get the slab, just with
   square top and bottom edges. */

.has-hero-bg main {
    position: relative;
    /* Own stacking context, so the scrim below can sit at z-index -1 without
       falling behind the page-level background wash (which is also negative). */
    z-index: 0;
}

.has-hero-bg main::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: -1.5rem 0;
    pointer-events: none;
    background: linear-gradient(to right,
        transparent 0%,
        rgba(8,8,10,.80) 12%,
        rgba(8,8,10,.80) 88%,
        transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 3%, #000 97%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0%, #000 3%, #000 97%, transparent 100%);
}

/* Only widen past the text column where the viewport can absorb it — at 56rem
   the slab is 53rem, so it never overflows and never triggers a scrollbar. */
@media (min-width: 56rem) {
    .has-hero-bg main::before {
        inset: -2rem -3.5rem;
        background: linear-gradient(to right,
            transparent 0%,
            rgba(8,8,10,.80) 15%,
            rgba(8,8,10,.80) 85%,
            transparent 100%);
    }
}

h1, h2, h3 { margin: 0; font-weight: 400; }

a { color: var(--gold); }

.wrap {
    max-width: 46rem;
    margin: 0 auto;
    padding: 0 1rem;
}

/* ─── Header ──────────────────────────────────────────────────────────────── */

.rally-header {
    position: relative;
    padding: 2.75rem 0 2.25rem;
    text-align: center;
    background:
        linear-gradient(180deg, rgba(165, 56, 42,.16), transparent 62%),
        var(--bg-alt);
    border-bottom: 1px solid var(--border);
    overflow: hidden;
}

/* ─── Back navigation ─────────────────────────────────────────────────────────
   Top-left of both rally pages, one step up the hierarchy: the entry form goes to
   the landing page, the landing page goes to the main site.

   The destination is fixed rather than history-based, so the control names where
   it goes instead of saying "Back" — for anyone arriving from a shared link or a
   search result, "Back" would point somewhere they have never been.

   Shared by both pages (rally.css loads on each), positioned against whichever
   masthead contains it. */
.rally-back {
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .95rem .5rem .75rem;
    border: 1px solid var(--border-hi);
    border-radius: 999px;
    /* Reads over a photograph as well as over the flat theme. */
    background: rgba(10, 10, 10, .55);
    backdrop-filter: blur(6px);
    /* Overrides the global gold `a` colour — this is chrome, not a content link. */
    color: var(--muted);
    font-family: 'Oswald', sans-serif;
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color .15s, border-color .15s, background .15s;
}

.rally-back:hover {
    color: var(--text);
    border-color: var(--gold);
    background: rgba(10, 10, 10, .78);
}

.rally-back:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.rally-back svg {
    width: .95rem;
    height: .95rem;
    flex: 0 0 auto;
    transition: transform .15s;
}

.rally-back:hover svg { transform: translateX(-2px); }

/* The masthead has to clear the control sitting over it, or the eyebrow runs up
   under the pill. Scoped to headers that actually carry one, so the success and
   cancel pages — same header, no back link — keep their spacing.

   Listed twice on purpose: `.rally-header.rally-header-hero` further down sets
   its own padding at two classes, and per that block's note it is built to win
   wherever it sits, so the single-class form alone loses to it on the entry page.
   The second selector takes it to three. */
.rally-header:has(.rally-back),
.rally-header.rally-header-hero:has(.rally-back) { padding-top: 5rem; }

@media (prefers-reduced-motion: reduce) {
    .rally-back svg { transition: none; }
    .rally-back:hover svg { transform: none; }
}

/* Diagonal motorsport cue — decorative only, kept faint so text stays legible. */
.rally-header::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        -60deg,
        transparent 0 22px,
        rgba(255,255,255,.022) 22px 24px
    );
    pointer-events: none;
}

/* Lifts the header's content above the ::after rake. The back link is excluded
   by name: it is positioned absolutely and this rule, being later in the file at
   equal specificity, would otherwise reset it to relative and drop it back into
   the flow above the eyebrow. */
.rally-header > *:not(.rally-back) { position: relative; z-index: 1; }

/* ── Masthead wash (hero-image pages only) ──────────────────────────────────
   Over the poster the header needs its own weather, or white type on a bright
   mountainside is a coin toss. Oxblood rather than more black: it ties the
   masthead to the CTA colour, and it separates the header from the neutral scrim
   under the form instead of blurring into it.

   Built from three layers — an oxblood glow anchored top-left where the eyebrow
   and title sit, a deep wine body, and a near-black foot so the bottom edge
   lands on the stepper without a seam. */
.has-hero-bg .rally-header {
    background: transparent;
    border-bottom-color: rgba(165, 56, 42,.35);
}

.has-hero-bg .rally-header::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(78% 108% at 26% 4%, rgba(165, 56, 42,.52) 0%, transparent 62%),
        radial-gradient(70% 96% at 88% 22%, rgba(130,42,32,.34) 0%, transparent 66%),
        linear-gradient(178deg,
            rgba(84,30,23,.60) 0%,
            rgba(50,20,16,.56) 42%,
            rgba(14,10,11,.78) 82%,
            rgba(10,10,10,.90) 100%);
}

.rally-eyebrow {
    font-family: 'Oswald', 'Inter', sans-serif;
    font-size: .7rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: .75rem;
}

.rally-title {
    font-family: 'Anton', 'Oswald', Impact, sans-serif;
    font-size: clamp(2.1rem, 8.5vw, 3.5rem);
    line-height: .96;
    letter-spacing: .01em;
    text-transform: uppercase;
}

.rally-subtitle {
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
    font-size: clamp(.95rem, 3.6vw, 1.3rem);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: .6rem;
}

.rally-dates {
    display: inline-block;
    margin-top: 1.1rem;
    padding: .4rem 1.1rem;
    border: 1px solid var(--border-hi);
    border-radius: 999px;
    font-family: 'Oswald', sans-serif;
    font-size: .85rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text);
}

.rally-logos {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1.6rem;
}

.rally-logos img {
    height: 2.6rem;
    width: auto;
    max-width: 8.5rem;
    object-fit: contain;
    opacity: .9;
}

.inclusions {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    justify-content: center;
    margin-top: 1.5rem;
    padding: 0;
    list-style: none;
}

.inclusions li {
    font-size: .78rem;
    letter-spacing: .04em;
    color: var(--muted);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: .3rem .8rem;
}

.inclusions li::before {
    content: '✓';
    color: var(--green);
    margin-right: .4rem;
}

/* ─── Entry form masthead ─────────────────────────────────────────────────────
   The entry form's own header, styled to match the landing page's hero. The two
   sit either side of a single click, so the form should look like the page the
   entrant just left rather than announcing itself as a different site.

   Scoped to .rally-header-hero rather than changing .rally-header itself, because
   success.php and cancel.php share that class and are centred state pages — a
   left-aligned masthead over a centred "Payment Cancelled" would read as broken.

   Every selector here is deliberately one class more specific than the base rule
   it replaces, so this block wins regardless of where it sits in the file. */

.rally-header.rally-header-hero {
    text-align: left;
    padding: 3.25rem 0 2.5rem;
    /* The landing hero's glow, minus the red masthead wash and the diagonal rake
       that used to sit here — both were louder than anything on the other page. */
    background:
        radial-gradient(58% 92% at 8% 88%, rgba(165, 56, 42, .20), transparent 68%),
        radial-gradient(46% 70% at 92% 8%, rgba(200, 145, 42, .08), transparent 70%),
        var(--bg-alt);
}

.rally-header.rally-header-hero::after { content: none; }

/* Over artwork: the same two-scrim arrangement the landing hero uses. The
   horizontal one carries the contrast, since the type is left-aligned; the
   vertical one settles the foot into the stepper. Neutral black, no red. */
.has-hero-bg .rally-header.rally-header-hero {
    background: transparent;
    border-bottom-color: rgba(255, 255, 255, .08);
}

.has-hero-bg .rally-header.rally-header-hero::before {
    background:
        /* Stops sit further right than the landing page's, because this page's
           column is 46rem against that one's 66rem — the text starts around a
           quarter of the way across rather than a seventh. Copying that gradient
           verbatim put the dark end over empty margin and left the chips, which
           reach ~70%, sitting on the fade. */
        linear-gradient(90deg,
            rgba(10, 10, 10, .86) 0%,
            rgba(10, 10, 10, .80) 45%,
            rgba(10, 10, 10, .46) 70%,
            transparent 88%),
        linear-gradient(180deg,
            rgba(10, 10, 10, .45) 0%,
            rgba(10, 10, 10, .32) 32%,
            rgba(10, 10, 10, .64) 78%,
            rgba(10, 10, 10, .86) 100%);
}

/* ── Typography, carried over from the landing hero ─────────────────────────── */

.rally-header-hero .rally-eyebrow {
    letter-spacing: .32em;
    margin-bottom: .45rem;
}

.rally-header-hero .rally-title {
    font-size: clamp(2.2rem, 7.5vw, 3.6rem);
    /* Matches the landing hero: under 1 and Anton's two lines touch. */
    line-height: 1;
    letter-spacing: .005em;
    /* Breaks to two lines at roughly the same place the landing page does. */
    max-width: 15ch;
}

.rally-header-hero .rally-subtitle {
    font-size: clamp(.95rem, 3.4vw, 1.25rem);
    letter-spacing: .14em;
    color: var(--text);
    margin-top: 1rem;
}

/* A rule rather than a pill: a bordered capsule this close to the form's own
   controls reads as something to press. */
.rally-header-hero .rally-dates {
    margin-top: 1.35rem;
    padding: 0 0 .45rem;
    border: 0;
    border-bottom: 2px solid var(--gold);
    border-radius: 0;
    font-weight: 600;
    font-size: clamp(.95rem, 3vw, 1.15rem);
    letter-spacing: .16em;
}

.has-hero-bg .rally-header-hero .rally-dates {
    text-shadow: 0 1px 10px rgba(0, 0, 0, .8);
}

.rally-header-hero .rally-logos {
    justify-content: flex-start;
    gap: 1.75rem;
    margin-top: 2rem;
}

/* ── Inclusion chips ────────────────────────────────────────────────────────── */

.rally-header-hero .inclusions {
    justify-content: flex-start;
    gap: .5rem;
    margin-top: 1.6rem;
}

/* Still chips, but glass rather than solid panels: over artwork a filled surface
   punches a row of grey holes in the picture, and the landing page's restraint
   is what these are meant to echo. */
.rally-header-hero .inclusions li {
    font-family: 'Oswald', sans-serif;
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text);
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    padding: .42rem .95rem;
    backdrop-filter: blur(6px);
}

.rally-header-hero .inclusions li::before {
    margin-right: .5rem;
}

/* ─── Progress stepper ────────────────────────────────────────────────────── */

.stepper {
    position: sticky;
    top: 0;
    z-index: 30;
    background: rgba(10,10,10,.93);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    scrollbar-width: none;
}

.stepper::-webkit-scrollbar { display: none; }

.stepper-inner {
    display: flex;
    gap: .35rem;
    padding: .6rem 1rem;
    max-width: 46rem;
    margin: 0 auto;
    width: max-content;
    min-width: 100%;
}

.step-chip {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex: 0 0 auto;
    padding: .35rem .7rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--muted-dim);
    font-size: .74rem;
    font-weight: 500;
    letter-spacing: .03em;
    white-space: nowrap;
    cursor: pointer;
    transition: color .15s, border-color .15s, background .15s;
}

/* display:flex above beats the UA's [hidden] rule, so restore it explicitly —
   the People chip is hidden until a range package is chosen. */
.step-chip[hidden] { display: none; }

.step-chip .num {
    display: grid;
    place-items: center;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    background: var(--border);
    color: var(--muted);
    font-size: .66rem;
    font-weight: 700;
}

.step-chip.is-done { color: var(--muted); border-color: var(--border-hi); }
.step-chip.is-done .num { background: var(--green); color: #05210f; }
.step-chip.is-done .num::before { content: '✓'; }
.step-chip.is-done .num span { display: none; }

.step-chip.is-current {
    color: var(--text);
    border-color: var(--action-edge);
    background: rgba(165, 56, 42,.12);
}
.step-chip.is-current .num { background: var(--action); color: var(--action-ink); }

/* ─── Sections ────────────────────────────────────────────────────────────── */

.section {
    margin: 2rem 0;
    scroll-margin-top: 4.25rem;
}

/* Steps stay hidden until their prerequisite is answered, so the form starts
   short and grows as the entrant commits. JS toggles .is-open. */
.section[data-locked="1"] { display: none; }
.section.is-open { display: block; }

.section-head {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    margin-bottom: .3rem;
}

.section-num {
    font-family: 'Anton', sans-serif;
    font-size: 1rem;
    color: var(--gold);
    letter-spacing: .06em;
}

.section-title {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 1.32rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.section-hint {
    color: var(--muted-dim);
    font-size: .87rem;
    margin: 0 0 1rem;
}

/* ─── Package cards ───────────────────────────────────────────────────────── */

.pkg-grid { display: grid; gap: .7rem; }

.pkg {
    position: relative;
    display: block;
    cursor: pointer;
}

.pkg input { position: absolute; opacity: 0; pointer-events: none; }

.pkg-body {
    display: grid;
    grid-template-columns: 1.35rem 1fr auto;
    gap: .85rem;
    align-items: start;
    padding: 1rem 1.05rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color .15s, background .15s;
}

.pkg:hover .pkg-body { border-color: var(--border-hi); }

.pkg input:focus-visible + .pkg-body { outline: 2px solid var(--gold); outline-offset: 2px; }

.pkg input:checked + .pkg-body {
    border-color: var(--action-edge);
    background: linear-gradient(180deg, rgba(165, 56, 42,.1), var(--surface) 70%);
}

.pkg-radio {
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    border: 2px solid var(--border-hi);
    margin-top: .15rem;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}

.pkg input:checked + .pkg-body .pkg-radio { border-color: var(--action-edge); }

.pkg input:checked + .pkg-body .pkg-radio::after {
    content: '';
    width: .68rem;
    height: .68rem;
    border-radius: 50%;
    background: var(--action-edge);
}

/* These live inside a <span> (the label's only permitted child structure), so
   each needs an explicit block to stack rather than running together. */
.pkg-name {
    display: block;
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 1.15rem;
    line-height: 1.25;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.pkg-room {
    display: block;
    color: var(--muted);
    font-size: .87rem;
    line-height: 1.35;
}

.pkg-occ {
    display: block;
    color: var(--muted-dim);
    font-size: .78rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    margin-top: .3rem;
}

.pkg-price {
    text-align: right;
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 1.28rem;
    white-space: nowrap;
}

.pkg-price small {
    display: block;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: .68rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted-dim);
}

/* Stock signalling never relies on colour alone — each state carries text. */
.pkg-flag {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-top: .5rem;
    padding: .18rem .55rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.pkg-flag.low  { background: rgba(224,161,0,.14);  color: var(--amber); border: 1px solid rgba(224,161,0,.35); }
.pkg-flag.gone { background: rgba(225,54,44,.12);  color: var(--error); border: 1px solid rgba(225,54,44,.34); }

.pkg.is-soldout { cursor: not-allowed; }
.pkg.is-soldout .pkg-body { opacity: .5; }
.pkg.is-soldout .pkg-name { text-decoration: line-through; }

/* ─── Bed configuration ───────────────────────────────────────────────────── */

.bed-block {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
    /* Scrolled to in its own right when a package offers twin beds, so it needs
       the same clearance under the sticky stepper that .section has. */
    scroll-margin-top: 4.25rem;
}

.bed-block[hidden] { display: none; }

.bed-row { display: grid; gap: .6rem; }

@media (min-width: 30rem) {
    .bed-row { grid-template-columns: 1fr 1fr; }
}

.bed-opt { position: relative; }
.bed-opt input { position: absolute; opacity: 0; pointer-events: none; }

.bed-opt span {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .8rem .95rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: .93rem;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.bed-opt span i { font-style: normal; font-size: 1.05rem; letter-spacing: -.15em; }

.bed-opt input:checked + span {
    border-color: var(--action-edge);
    background: rgba(165, 56, 42,.13);
}

.bed-opt input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ─── Form controls ───────────────────────────────────────────────────────── */

.field { margin-bottom: 1rem; }

.field label,
.legend {
    display: block;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: .35rem;
}

/* Warm terracotta, not the error red. A required mark is not a failure, and now
   that nothing else on the page is bright red, an --error asterisk beside every
   label reads as though the form is already complaining. Keeping #E1362C strictly
   for "you got this wrong" is the point of the three-role palette. */
.req { color: var(--action-edge); }

.opt {
    color: var(--muted-dim);
    font-weight: 400;
    letter-spacing: .04em;
    text-transform: none;
}

input[type="text"],
input[type="tel"],
input[type="email"],
input[type="number"],
select,
textarea {
    width: 100%;
    padding: .72rem .85rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: inherit;
    font-size: 1rem;
    transition: border-color .15s;
    /* 16px minimum stops iOS zooming the viewport on focus. */
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--gold);
}

input::placeholder, textarea::placeholder { color: #5C6067; }

textarea { resize: vertical; min-height: 3.2rem; }

select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23B5B8BD' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .85rem center;
    background-size: .7rem;
    padding-right: 2.2rem;
}

.grid-2 { display: grid; gap: 1rem; }

@media (min-width: 34rem) {
    .grid-2 { grid-template-columns: 1fr 1fr; }
}

.field-error input,
.field-error select { border-color: var(--error); }

.err-msg {
    display: flex;
    align-items: center;
    gap: .35rem;
    color: var(--error);
    font-size: .82rem;
    margin-top: .35rem;
}

.err-msg::before { content: '⚠'; }

/* ─── Occupancy selector ──────────────────────────────────────────────────── */

.occ-row { display: flex; gap: .5rem; flex-wrap: wrap; }

.occ-opt { position: relative; }
.occ-opt input { position: absolute; opacity: 0; pointer-events: none; }

.occ-opt span {
    display: grid;
    place-items: center;
    min-width: 3.4rem;
    padding: .65rem .7rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: 'Oswald', sans-serif;
    font-size: 1.05rem;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.occ-opt input:checked + span {
    border-color: var(--action-edge);
    background: rgba(165, 56, 42,.14);
}

.occ-opt input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ─── Car number ──────────────────────────────────────────────────────────── */

.carnum-row { display: flex; gap: .75rem; align-items: flex-start; }

.carnum-input {
    max-width: 8.5rem;
    font-family: 'Anton', sans-serif !important;
    font-size: 1.9rem !important;
    text-align: center;
    letter-spacing: .08em;
}

.carnum-status {
    flex: 1;
    display: flex;
    align-items: center;
    min-height: 3.4rem;
    font-size: .88rem;
    color: var(--muted-dim);
}

.carnum-status.ok      { color: var(--green); }
.carnum-status.taken   { color: var(--error); }
.carnum-status.invalid { color: var(--amber); }
.carnum-status.busy    { color: var(--muted-dim); }

.carnum-note {
    color: var(--muted-dim);
    font-size: .82rem;
    margin-top: .5rem;
}

.carnum-note strong { color: var(--gold); }

/* ─── Occupant blocks ─────────────────────────────────────────────────────── */

.occupant {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.1rem;
    margin-bottom: .85rem;
}

.occupant-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .9rem;
    padding-bottom: .65rem;
    border-bottom: 1px solid var(--border);
}

.occupant-role {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.occupant-tag {
    font-size: .7rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--muted-dim);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: .15rem .55rem;
}

/* ─── Hoody add-on ────────────────────────────────────────────────────────── */

.hoody {
    margin-top: .9rem;
    padding-top: .9rem;
    border-top: 1px dashed var(--border);
}

.check {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    cursor: pointer;
}

.check input {
    appearance: none;
    flex: 0 0 auto;
    width: 1.3rem;
    height: 1.3rem;
    margin: .1rem 0 0;
    border: 2px solid var(--border-hi);
    border-radius: 5px;
    background: var(--surface-2);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.check input:checked {
    background: var(--action);
    border-color: var(--action-edge);
}

.check input:checked::after {
    content: '✓';
    color: #fff;
    font-size: .85rem;
    line-height: 1;
}

.check input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.check-label { font-size: .93rem; color: var(--text); }
.check-sub   { display: block; font-size: .8rem; color: var(--muted-dim); }

.hoody-size {
    margin-top: .7rem;
    max-width: 11rem;
}

.hoody-size[hidden] { display: none; }

/* ─── Hoody drop card ─────────────────────────────────────────────────────────
   The one place on this page allowed to shout. Everything else is a form; this
   is a product, so it gets the display face and the rally-red-to-gold gradient —
   the same vocabulary, turned up. It carried the header's diagonal hatch too;
   that was removed by request, so the gradient alone does the work now. */

.hoody-drop {
    position: relative;
    display: grid;
    gap: 1.1rem;
    align-items: center;
    padding: 1.15rem;
    margin-bottom: 1.5rem;
    border-radius: var(--radius);
    border: 1px solid rgba(200,145,42,.42);
    overflow: hidden;
    background:
        radial-gradient(120% 145% at 8% 0%, rgba(165, 56, 42,.55) 0%, transparent 58%),
        /* Kept below the red so the gold stays an accent — pushed higher it
           washes out the copy sitting over the bottom-right corner. */
        radial-gradient(110% 130% at 100% 100%, rgba(200,145,42,.34) 0%, transparent 62%),
        linear-gradient(145deg, #24140f 0%, #1A1B1E 55%, #14100c 100%);
    box-shadow:
        0 0 0 1px rgba(0,0,0,.4),
        0 18px 38px -22px rgba(165, 56, 42,.75);
}

/* The art column only exists when an image has actually been uploaded. Without
   `has-art` the card is a single column of copy — there is deliberately no
   placeholder, since an empty frame advertises a missing photo rather than a
   product. Above 30rem only: on a narrow phone the two stack regardless. */
@media (min-width: 30.0625rem) {
    .hoody-drop.has-art { grid-template-columns: minmax(0, 8.5rem) 1fr; }
}

@media (max-width: 30rem) {
    .hoody-drop { justify-items: center; text-align: center; }
    .hoody-drop-art { max-width: 11rem; }
}

/* ── Artwork ── */

.hoody-drop-art { width: 100%; }

.hoody-zoom {
    display: block;
    width: 100%;
    padding: 0;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--radius-sm);
    background: rgba(0,0,0,.35);
    cursor: zoom-in;
    overflow: hidden;
    position: relative;
}

.hoody-zoom img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    transition: transform .35s ease;
}

.hoody-zoom:hover img { transform: scale(1.06); }
.hoody-zoom:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.hoody-zoom-cue {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: .5rem .3rem .3rem;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,.85));
    color: #fff;
    font-size: .6rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
}

/* ── Copy ── */

.hoody-drop-flag {
    display: inline-block;
    padding: .22rem .6rem;
    border-radius: 999px;
    background: var(--action);
    color: var(--action-ink);
    font-family: 'Oswald', sans-serif;
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.hoody-drop-title {
    font-family: 'Anton', 'Oswald', Impact, sans-serif;
    font-size: clamp(1.9rem, 7vw, 2.7rem);
    /* Anton fills its em box; under 1 the two lines touch where this wraps. */
    line-height: 1;
    letter-spacing: .01em;
    text-transform: uppercase;
    margin: .5rem 0 .45rem;
    /* Gold-to-white so the title lifts off the red side of the gradient. */
    background: linear-gradient(150deg, #FFFFFF 18%, #F0C368 62%, #C8912A 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hoody-drop-sub {
    color: #D8DADD;
    font-size: .88rem;
    line-height: 1.5;
    margin: 0 0 .7rem;
}

.hoody-drop-price {
    display: flex;
    align-items: baseline;
    gap: .4rem;
    font-family: 'Anton', sans-serif;
    font-size: 1.75rem;
    letter-spacing: .01em;
    color: #fff;
}

@media (max-width: 30rem) {
    .hoody-drop-price { justify-content: center; }
}

.hoody-drop-price small {
    font-family: 'Inter', sans-serif;
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gold);
}

.hoody-drop-hint {
    margin: .6rem 0 0;
    color: #EBD9AE;
    font-size: .78rem;
    letter-spacing: .02em;
}

/* ─── Lightbox ────────────────────────────────────────────────────────────── */

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    background: rgba(6,6,7,.94);
    cursor: zoom-out;
    animation: lb-in .18s ease;
}

.lightbox[hidden] { display: none; }

.lightbox img {
    max-width: min(100%, 46rem);
    max-height: 88vh;
    object-fit: contain;
    border-radius: var(--radius-sm);
}

.lightbox-close {
    position: absolute;
    top: .9rem;
    right: 1rem;
    width: 2.6rem;
    height: 2.6rem;
    display: grid;
    place-items: center;
    border: 1px solid var(--border-hi);
    border-radius: 50%;
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}

.lightbox-close:hover { background: var(--action); border-color: var(--action-edge); }
.lightbox-close:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }

/* ─── Waiver ──────────────────────────────────────────────────────────────── */

.waiver-text {
    /* Sized for the full indemnity, not the one-paragraph placeholder it replaced.
       Deliberately still scrolled rather than fully expanded: at ~13 clauses an
       unbounded block pushes the two acceptance checkboxes off the screen, and
       those are what the entrant has to reach. */
    max-height: 20rem;
    overflow-y: auto;
    padding: 1rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--muted);
    font-size: .88rem;
    line-height: 1.65;
    margin-bottom: 1rem;
    white-space: pre-wrap;
}

.waiver-accept {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    margin-bottom: .7rem;
}

/* ─── Review ──────────────────────────────────────────────────────────────── */

.review {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.15rem;
}

.review-line {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .55rem 0;
    border-bottom: 1px solid var(--border);
    font-size: .93rem;
}

.review-line span:first-child { color: var(--muted); }

.review-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding-top: .9rem;
    font-family: 'Oswald', sans-serif;
    font-size: 1.35rem;
    font-weight: 600;
}

.review-total .amt { color: var(--gold); }

.review-empty { color: var(--muted-dim); font-size: .9rem; }

/* ─── Sticky total bar ────────────────────────────────────────────────────── */

.totalbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom, 0px));
    background: rgba(15,16,18,.97);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--border);
}

.totalbar-inner {
    width: 100%;
    max-width: 46rem;
    margin: 0 auto;
}

.totalbar-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
}

/* Named reason the submit button is inert. Tabular-dim rather than red: nothing
   has gone wrong yet, the entry simply isn't finished. */
.totalbar-hint {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin: .5rem 0 0;
    font-size: .78rem;
    line-height: 1.35;
    color: var(--muted);
}

.totalbar-hint::before {
    content: '↑';
    color: var(--gold);
}

.totalbar-hint[hidden] { display: none; }

.totalbar-label {
    font-size: .68rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted-dim);
}

.totalbar-amt {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 1.45rem;
    line-height: 1.1;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .85rem 1.5rem;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--action);
    color: var(--action-ink);
    font-family: 'Oswald', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    /* Warm bloom rather than a coloured glow — it lifts the button off the ground
       without reintroducing a second bright colour next to the gold. */
    box-shadow: 0 8px 22px -12px rgba(165, 56, 42, .9);
    transition: background .15s, border-color .15s, box-shadow .15s, opacity .15s;
}

/* Hover catches the light. Darkening on hover — as this once did — makes a
   button on a dark page recede exactly when it should be confirming the pointer
   is on it. */
.btn:hover:not(:disabled) {
    background: var(--action-hover);
    box-shadow: 0 10px 26px -12px rgba(176, 62, 47, 1);
}
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.btn:disabled {
    background: var(--border);
    color: var(--muted-dim);
    box-shadow: none;
    cursor: not-allowed;
}

.btn-ghost {
    background: transparent;
    border: 1px solid var(--border-hi);
    color: var(--text);
    box-shadow: none;
}

.btn-ghost:hover:not(:disabled) { background: var(--surface); }

.btn-submit { margin-left: auto; flex: 0 0 auto; }

/* ─── Optional car photo (entry form) ─────────────────────────────────────────
   Sits below the vehicle fields. Styled as an invitation rather than a required
   field: dashed edge, no asterisk, and copy that says it can wait. The same
   photo can be added later from the portal, so nothing here is allowed to feel
   like a blocker. */

.car-photo { margin-top: 1.25rem; }

.car-photo-drop {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.2rem;
    border: 1px dashed var(--border-hi);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    transition: border-color .18s ease, background .18s ease;
}

.car-photo-drop.is-over {
    border-color: var(--gold);
    background: rgba(200, 145, 42, .07);
}

.car-photo-icon {
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(200, 145, 42, .12);
    color: var(--gold);
}
.car-photo-icon svg { width: 1.35rem; height: 1.35rem; }

.car-photo-copy { flex: 1 1 auto; min-width: 0; }
.car-photo-copy strong {
    display: block;
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    letter-spacing: .01em;
}
.car-photo-copy span {
    display: block;
    color: var(--muted-dim);
    font-size: .85rem;
    line-height: 1.45;
}

.car-photo-preview {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--surface-2);
}
.car-photo-preview img {
    display: block;
    width: 100%;
    max-height: 15rem;
    object-fit: cover;
}
.car-photo-meta {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem .85rem;
    font-size: .85rem;
    color: var(--muted);
}
.car-photo-meta span {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.btn-link-quiet {
    flex: 0 0 auto;
    background: none;
    border: 0;
    padding: 0;
    color: var(--gold);
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.btn-link-quiet:hover { color: var(--gold-hi); }
.btn-link-quiet:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

@media (max-width: 34rem) {
    .car-photo-drop { flex-wrap: wrap; }
    .car-photo-drop .btn-ghost { width: 100%; }
}

/* ─── Alerts ──────────────────────────────────────────────────────────────── */

.alert {
    display: flex;
    gap: .7rem;
    padding: .95rem 1.1rem;
    border-radius: var(--radius-sm);
    font-size: .92rem;
    margin: 1.25rem 0;
    border: 1px solid;
}

.alert-error { background: rgba(225,54,44,.1);  border-color: rgba(225,54,44,.4);  color: #FFB4AF; }
.alert-info  { background: rgba(200,145,42,.1); border-color: rgba(200,145,42,.4); color: #EFD09A; }

.alert ul { margin: .35rem 0 0; padding-left: 1.1rem; }

/* ─── Closed / sold-out state ─────────────────────────────────────────────── */

.state {
    text-align: center;
    padding: 4rem 1.5rem 5rem;
}

.state-icon {
    font-size: 3.4rem;
    line-height: 1;
    margin-bottom: 1.2rem;
}

.state h2 {
    font-family: 'Anton', sans-serif;
    font-size: clamp(1.7rem, 6.5vw, 2.5rem);
    text-transform: uppercase;
    letter-spacing: .02em;
    margin-bottom: .7rem;
}

.state p {
    color: var(--muted);
    max-width: 30rem;
    margin: 0 auto 1.6rem;
}

/* ─── Success page ────────────────────────────────────────────────────────── */

.success-badge {
    display: grid;
    place-items: center;
    width: 4.5rem;
    height: 4.5rem;
    margin: 0 auto 1.3rem;
    border-radius: 50%;
    background: rgba(47,180,99,.14);
    border: 2px solid var(--green);
    color: var(--green);
    font-size: 2rem;
}

.big-number {
    display: grid;
    gap: .8rem;
    grid-template-columns: 1fr 1fr;
    margin: 1.8rem 0;
}

.big-number > div {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.1rem .8rem;
    text-align: center;
}

.big-number .k {
    font-size: .68rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted-dim);
}

.big-number .v {
    font-family: 'Anton', sans-serif;
    font-size: 2.1rem;
    line-height: 1.15;
    color: var(--gold);
    margin-top: .25rem;
    word-break: break-all;
}

.big-number .v.ref { font-size: 1.35rem; color: var(--text); }

/* ─── Footer ──────────────────────────────────────────────────────────────── */

.rally-footer {
    text-align: center;
    color: var(--muted-dim);
    font-size: .8rem;
    padding: 2.5rem 1rem 1rem;
    border-top: 1px solid var(--border);
    margin-top: 3rem;
}

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

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