/* ==========================================================================
   TriVelo Logistics - public site
   Ported from the Tri Velo Logistics design canvas (v2).
   Palette: gold #d4a12a / #b8860b, ink #1a1b1e, ground #e9ebe9, footer #101113.
   Type: Noto Sans throughout, Bebas Neue for the big step numerals.
   ========================================================================== */

:root {
    --ground:      #e9ebe9;
    --surface:     #ffffff;
    --surface-2:   #f7f7f5;
    --surface-3:   #faf9f6;
    --ink:         #1a1b1e;
    --ink-dim:     #5f6165;
    --ink-faint:   #8e9095;
    --gold:        #d4a12a;
    --gold-dark:   #b8860b;
    --dark:        #23262b;
    --darker:      #17181b;
    --footer:      #101113;
    --line:        #e4e2dc;
    --line-soft:   #e8eaed;
    --ok:          #1e8e3e;
    --bad:         #c0392b;
    --star:        #fbbc04;
    --pay:         #17803d;   /* payment green - 5.0:1 on white */
    --pay-dark:    #12652f;

    --r-section: 28px;
    --r-card:    22px;
    --r-row:     16px;
    --r-pill:    999px;

    --shadow-card: 0 6px 28px rgba(0,0,0,0.07);
    --shadow-pop:  0 4px 16px rgba(8,9,11,0.3);

    --wrap: 1320px;
    --font: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-num: 'Bebas Neue', var(--font);
}

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

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

body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

/* Any class that sets `display` outranks the UA stylesheet's [hidden] rule, so
   .review and .ev-row stayed visible when JS set hidden=true. This makes the
   attribute win again - the review carousel and the event search filter both
   depend on it. */
[hidden] { display: none !important; }

/* The header is sticky, so anything jumped to via an anchor (#extras,
   #reviews, #how, #events...) would land underneath it. Push the scroll
   stop down past the bar. */
[id] { scroll-margin-top: 110px; }
@media (max-width: 992px) { [id] { scroll-margin-top: 96px; } }

a { color: var(--gold-dark); text-decoration: none; }
a:hover { color: var(--ink); }

h1, h2, h3, h4 { font-family: var(--font); margin: 0; line-height: 1.15; }
h1 { font-size: clamp(34px, 5vw, 64px); text-transform: uppercase; letter-spacing: 0.01em; line-height: 1.04; }
h2 { font-size: clamp(28px, 3.4vw, 42px); text-transform: uppercase; }
h3 { font-size: 21px; }
p  { margin: 0 0 16px; }

:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
::selection { background: rgba(212,161,42,0.28); }

.sr, .skip { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip:focus {
    position: fixed; top: 12px; left: 12px; width: auto; height: auto; clip: auto;
    background: var(--ink); color: #fff; padding: 12px 20px; border-radius: var(--r-pill); z-index: 999;
}

/* ==========================================================================
   ACCOUNT AREA - the customer's own pages (my-booking, bike-details,
   addon-checkout, success, cancel).
   Same components throughout; only the palette tokens are re-pointed, so
   every card, table, tag and form picks the new scheme up automatically.
   Cool blue-grey ground + navy headings instead of the warm grey + gold of
   the marketing site, so it reads as an official "manage your booking" area.
   ========================================================================== */
body.account-area {
    --ground:    #e7ecf3;
    --surface-2: #f1f4f9;
    --surface-3: #f7f9fc;
    --line:      #dbe3ee;
    --line-soft: #e4eaf3;
    --ink-dim:   #5a6478;
    --ink-faint: #8892a4;
    --navy:      #14243f;
}

/* Card headings pick up the navy so the area reads as one system. */
.account-area .box > h2:first-child,
.account-area .box > h2 { color: var(--navy); }
.account-area main.inner { padding-top: 32px; }

/* ---- shell ------------------------------------------------------------- */
.shell { padding: 16px; position: relative; }
.wrap  { max-width: var(--wrap); margin: 0 auto; }
.wrap.narrow { max-width: 900px; }

.panel {
    background: var(--surface);
    border-radius: var(--r-section);
    padding: 88px 48px;
    margin-bottom: 16px;
}
.panel.plain { background: transparent; padding: 96px 48px; }
.panel.dark  { background: var(--dark); color: #fff; padding: 140px 48px; }
.panel.dark h2 { color: #fff; }
.panel.dark p  { color: #b3b5ba; }

.eyebrow {
    font-size: 13px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.09em; color: var(--gold-dark); margin: 0 0 12px;
}
.lede    { font-size: 18px; line-height: 1.6; color: var(--ink-dim); }
.muted   { color: var(--ink-dim); }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; margin-bottom: 40px; }
.section-sub  { font-size: 16px; color: var(--ink-dim); margin: 0 0 40px; max-width: 520px; }
.center { text-align: center; }

/* ---- nav --------------------------------------------------------------- */
/* Sticky in both variants. On the homepage the bar sits 24px inside the hero
   and the hero is pulled up underneath it with a negative margin, so the same
   element can both overlay the hero and stick on scroll. */
.site-header { position: sticky; z-index: 50; top: 16px; }
.site-header .wrap {
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    background: rgba(255,255,255,0.94);
    border-radius: var(--r-pill);
    padding: 8px 10px 8px 22px;
    backdrop-filter: saturate(140%) blur(6px);
    transition: box-shadow 0.2s ease, background 0.2s ease;
}
.site-header.floating {
    top: -8px;                 /* so the bar lands 16px from the top once stuck */
    padding: 24px 8px 0;       /* the 24px inset inside the hero */
    margin-bottom: -98px;      /* 24px padding + 74px bar = pull the hero up under it */
}
.site-header.floating .wrap { max-width: none; }

/* Lifted off the page once you scroll - class toggled in js/main.js. */
.site-header.stuck .wrap {
    background: rgba(255,255,255,0.98);
    box-shadow: 0 10px 30px rgba(8,9,11,0.16);
}

.logo img { height: 58px; width: auto; }

.site-nav { display: flex; align-items: center; gap: 30px; font-size: 14px; font-weight: 600; }
.site-nav a { color: var(--ink); }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--gold-dark); }

.nav-cta {
    display: inline-block; background: var(--gold); color: var(--ink);
    padding: 17px 26px; font-weight: 700; font-size: 14px; border-radius: var(--r-pill);
    white-space: nowrap;
}
.nav-cta:hover { background: var(--ink); color: #fff; }

.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 14px; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--ink); margin: 4px 0; transition: 0.2s; }

/* ---- buttons ----------------------------------------------------------- */
.btn {
    display: inline-block; border: 0; cursor: pointer; font-family: var(--font);
    font-weight: 700; font-size: 15px; padding: 14px 30px; border-radius: var(--r-pill);
    background: var(--surface-2); color: var(--ink); text-align: center; transition: 0.15s;
    /* inset rather than a real border so adding the outline does not change
       the button's size. The plain variant used to be pure white, which made
       it invisible on a white .box card. */
    box-shadow: inset 0 0 0 1px var(--line);
}
.btn:hover { background: var(--ink); color: #fff; box-shadow: none; }
.btn.primary { box-shadow: none; background: var(--gold); color: var(--ink); }
.btn.primary:hover { background: var(--ink); color: #fff; }
.btn.dark { box-shadow: none; background: var(--ink); color: #fff; }
.btn.dark:hover { background: var(--gold); color: var(--ink); }
.btn.ghost { box-shadow: none; background: transparent; border: 2px solid rgba(26,27,30,0.25); padding: 12px 30px; color: var(--ink); }
.btn.ghost:hover { border-color: var(--gold); background: transparent; color: var(--gold-dark); }
.btn.small { padding: 10px 22px; font-size: 13px; font-weight: 600; }
.btn.big   { padding: 17px 34px; font-size: 16px; }
.btn[disabled], .btn.disabled { opacity: 0.45; pointer-events: none; }
.btn-row { display: flex; gap: 16px; flex-wrap: wrap; }

/* Bare <button class="primary|small"> used across the booking pages picks up
   the same styling, so those templates need no markup changes. Scoped to
   forms + the .primary/.small classes so .nav-toggle and .review-nav are safe. */
form button, button.primary, button.small, input[type=submit] {
    display: inline-block; border: 0; cursor: pointer; font-family: var(--font);
    font-weight: 700; font-size: 15px; padding: 14px 30px; border-radius: var(--r-pill);
    background: var(--ink); color: #fff; transition: 0.15s;
}
form button:hover, button.primary:hover, button.small:hover, input[type=submit]:hover { background: var(--gold); color: var(--ink); }
button.primary { background: var(--gold); color: var(--ink); }
button.primary:hover { background: var(--ink); color: #fff; }
button.small { padding: 10px 22px; font-size: 13px; font-weight: 600; }
form button[disabled] { opacity: 0.45; pointer-events: none; }

/* Bare submit buttons had styling but no spacing, so they sat flush against
   the field above. .small is excluded - those are inline buttons sitting in a
   line of text (e.g. "Resend confirmation email"). */
form button:not(.small):not(.btn-pay), form input[type=submit] { margin-top: 26px; }
.pay-block button { margin-top: 0; }

/* on dark grounds */
.on-dark .btn.ghost { border-color: rgba(255,255,255,0.6); color: #fff; }
.on-dark .btn.ghost:hover { border-color: var(--gold); color: var(--gold); }

/* ---- hero -------------------------------------------------------------- */
.hero {
    position: relative; border-radius: var(--r-section); overflow: hidden;
    background: var(--darker); min-height: 900px; display: flex; margin-bottom: 16px;
}
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.hero::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(8,9,11,0.55) 0%, rgba(8,9,11,0.48) 45%, rgba(8,9,11,0.88) 100%);
}
.hero-inner {
    position: relative; z-index: 2; align-self: center;
    padding: 140px 48px 64px; display: flex; flex-direction: column;
    align-items: flex-start; gap: 20px; max-width: var(--wrap); margin: 0 auto; width: 100%;
}
.hero h1 { color: #fff; }
.hero .lede { color: #e7e8ea; max-width: 560px; margin: 0; }

.rating-badge {
    display: inline-flex; align-items: stretch; background: #fff; color: var(--ink);
    border-radius: 6px; overflow: hidden; margin-top: 12px; box-shadow: var(--shadow-pop);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.rating-badge:hover { color: var(--ink); transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0,0,0,0.28); }
.rating-badge .body { display: inline-flex; align-items: center; gap: 12px; padding: 13px 20px; font-size: 15px; white-space: nowrap; }
.rating-badge .g-logo { width: 22px; height: 22px; }
.rating-badge .count { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.rating-badge .star-row .star { width: 17px; height: 17px; }
.rating-badge .label { font-size: 15px; color: #3c4043; }
.rating-badge .chev { display: inline-flex; align-items: center; justify-content: center; background: #4285f4; color: #fff; width: 52px; transition: background 0.15s; }
.rating-badge .chev svg { display: block; }
.rating-badge:hover .chev { background: #3367d6; }
.stars { color: var(--star); letter-spacing: 2px; }

/* ---- statement + stats ------------------------------------------------- */
.statement-block { max-width: 1100px; margin: 0 auto; text-align: center; }
.race-line { display: inline-flex; gap: 6px; margin-bottom: 28px; }
.race-line span { display: block; width: 46px; height: 6px; border-radius: 3px; background: var(--gold); transform: skewX(-24deg); }
.race-line span:nth-child(2) { width: 22px; opacity: 0.6; }
.race-line span:nth-child(3) { width: 10px; opacity: 0.3; }
.statement { margin: 0; font-size: clamp(26px, 3.4vw, 44px); line-height: 1.2; text-transform: uppercase; color: var(--ink-faint); letter-spacing: -0.01em; }
.statement b { color: var(--ink); font-weight: inherit; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin-top: 64px; }
.stat {
    position: relative; overflow: hidden; isolation: isolate;
    background: var(--dark); color: #fff; border-radius: var(--r-card);
    padding: 32px 32px 36px; box-shadow: var(--shadow-card);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    opacity: 0; transform: translateY(24px);
    animation: stat-in 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
    animation-delay: calc(var(--i, 0) * 120ms);
}
@keyframes stat-in { to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .stat { animation: none; opacity: 1; transform: none; } }
.stat:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,0.18); }
/* diagonal speed stripes, bottom-right, fading out towards the text */
.stat::before {
    content: ''; position: absolute; z-index: -1; right: 0; bottom: 0; width: 55%; height: 70%;
    background: repeating-linear-gradient(135deg, rgba(255,255,255,0.06) 0 7px, transparent 7px 20px);
    -webkit-mask-image: linear-gradient(225deg, #000 10%, transparent 75%); mask-image: linear-gradient(225deg, #000 10%, transparent 75%);
}
/* gold glow, top-left */
.stat::after {
    content: ''; position: absolute; z-index: -1; left: -80px; top: -80px; width: 260px; height: 260px;
    background: radial-gradient(closest-side, rgba(212,161,42,0.28), transparent);
}
.stat-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.stat .ic { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.08); color: var(--gold); }
.stat .ic svg { width: 28px; height: 28px; }
.stat .idx { font-family: var(--font-num); font-size: 22px; letter-spacing: 0.08em; color: rgba(255,255,255,0.35); }
.stat .v { font-family: var(--font-num); font-size: clamp(44px, 12vw, 64px); overflow-wrap: anywhere; line-height: 0.95; letter-spacing: 0.02em; color: var(--gold); }
.stat .l { font-size: 17px; font-weight: 700; margin: 12px 0 10px; color: #fff; }
.stat .l::after { content: ''; display: block; width: 36px; height: 3px; background: var(--gold); border-radius: 2px; margin-top: 12px; }
.stat .d { font-size: 14px; line-height: 1.6; color: #b3b5ba; }

.stat.featured { background: var(--gold); color: var(--ink); }
.stat.featured::before { background: repeating-linear-gradient(135deg, rgba(0,0,0,0.08) 0 7px, transparent 7px 20px); }
.stat.featured::after { background: radial-gradient(closest-side, rgba(255,255,255,0.35), transparent); }
.stat.featured .ic { background: rgba(0,0,0,0.12); color: var(--ink); }
.stat.featured .idx { color: rgba(0,0,0,0.35); }
.stat.featured .v { color: var(--ink); }
.stat.featured .l { color: var(--ink); }
.stat.featured .l::after { background: var(--ink); }
.stat.featured .d { color: #3a3010; }

/* ---- section headers --------------------------------------------------- */
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; margin-bottom: 40px; }
.sec-head h2 { margin: 0; }
.sec-head .eyebrow { margin-bottom: 10px; }
.sec-head .section-sub { margin: 0 0 6px; max-width: 420px; }
.panel.dark .sec-head .eyebrow { color: var(--gold); }

/* ---- about ------------------------------------------------------------- */
.about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 72px; align-items: center; }
.about-copy h2 { margin-bottom: 20px; }
.about-copy p { font-size: 16px; line-height: 1.7; color: var(--ink-dim); }
.about-points { list-style: none; margin: 24px 0 32px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.about-points li { position: relative; padding-left: 30px; font-size: 15px; font-weight: 600; }
.about-points li::before { content: ''; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--gold); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1b1e' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E"); background-size: 11px; background-position: center; background-repeat: no-repeat; }
.about-visual { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(12, 1fr); aspect-ratio: 1 / 1; }
.about-img { margin: 0; overflow: hidden; border-radius: var(--r-card); background: var(--surface-2); }
.about-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-img.main { grid-column: 1 / 10; grid-row: 1 / 11; box-shadow: var(--shadow-card); }
.about-img.small { grid-column: 7 / 13; grid-row: 7 / 13; border: 6px solid var(--surface); box-shadow: 0 18px 40px rgba(0,0,0,0.16); z-index: 2; }
.about-quote { position: absolute; left: -24px; bottom: 6%; z-index: 3; max-width: 260px; background: var(--gold); color: var(--ink); border-radius: var(--r-row); padding: 22px 24px 20px; box-shadow: 0 18px 40px rgba(0,0,0,0.16); }
.about-quote .q { font-family: var(--font-num); font-size: 56px; line-height: 0.5; margin-bottom: 14px; opacity: 0.55; }
.about-quote p { margin: 0 0 8px; font-size: 15px; font-weight: 700; line-height: 1.4; color: var(--ink); }
.about-quote span { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: #4a3d16; }

/* ---- why cards --------------------------------------------------------- */
.why-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.why-card {
    display: flex; flex-direction: column; background: var(--surface); border-radius: var(--r-card); overflow: hidden;
    box-shadow: var(--shadow-card); transition: transform 0.25s ease, box-shadow 0.25s ease;
    opacity: 0; transform: translateY(24px); animation: stat-in 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; animation-delay: calc(var(--i, 0) * 100ms);
}
@media (prefers-reduced-motion: reduce) { .why-card, .steps li { animation: none; opacity: 1; transform: none; } }
.why-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,0.14); }
.why-media { position: relative; aspect-ratio: 4 / 3; }
.why-img { position: absolute; inset: 0; overflow: hidden; background: var(--dark); }
.why-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.why-card:hover .why-img img { transform: scale(1.05); }
.why-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,9,11,0) 50%, rgba(8,9,11,0.55) 100%); }
.why-ic { position: absolute; left: 18px; bottom: -22px; z-index: 2; width: 48px; height: 48px; border-radius: 14px; background: var(--gold); color: var(--ink); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(0,0,0,0.2); }
.why-ic svg { width: 24px; height: 24px; }
.why-card.no-img .why-img { background: var(--dark); background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 7px, transparent 7px 20px); }
.why-body { padding: 36px 22px 26px; }
.why-body h3 { font-size: 18px; font-weight: 700; margin: 0 0 8px; text-transform: uppercase; letter-spacing: 0.02em; }
.why-body p { font-size: 14px; line-height: 1.6; color: var(--ink-dim); margin: 0; }

/* ---- how it works steps (home) ---------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li { display: flex; flex-direction: column; opacity: 0; transform: translateY(20px); animation: stat-in 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; animation-delay: calc(var(--i, 0) * 110ms); }
.step-top { display: flex; align-items: center; justify-content: space-between; }
.step-ic { width: 52px; height: 52px; border-radius: 14px; background: rgba(255,255,255,0.07); color: var(--gold); display: flex; align-items: center; justify-content: center; }
.step-ic svg { width: 26px; height: 26px; }
.steps .n { font-family: var(--font-num); font-size: 64px; line-height: 1; color: var(--gold); letter-spacing: 0.04em; opacity: 0.9; }
.steps .rule { position: relative; height: 14px; margin: 24px 0; }
.steps .rule::before { content: ''; position: absolute; left: 0; right: -28px; top: 6px; height: 2px; background: rgba(255,255,255,0.14); }
.steps li:last-child .rule::before { right: 0; }
.steps .rule::after { content: ''; position: absolute; left: 0; top: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 6px rgba(212,161,42,0.22); }
.steps h3 { font-size: 17px; font-weight: 700; text-transform: uppercase; color: #fff; letter-spacing: 0.02em; margin-bottom: 10px; }
.steps p  { font-size: 14px; line-height: 1.55; color: #b3b5ba; margin: 0; }
.steps-foot { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 52px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,0.12); }
.steps-foot span { color: #b3b5ba; font-size: 14px; }
.steps-foot span a { color: var(--gold); font-weight: 700; }

/* light variant, for how-it-works.php */
.panel:not(.dark) .steps .rule::before { background: var(--line); }
.panel:not(.dark) .steps h3 { color: var(--ink); }
.panel:not(.dark) .steps p  { color: var(--ink-dim); }

/* ---- reviews (Google Business Profile styling) ------------------------- */
:root { --star-off: #e8eaed; --g-blue: #4285f4; --g-text: #202124; --g-muted: #5f6368; }

.reviews-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 36px; }
.reviews-head h2 { margin: 0; }
.reviews-head .eyebrow { margin-bottom: 8px; }

/* white "card" treatment shared by review tiles and the summary bar */
.g-card { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-row); box-shadow: 0 1px 2px rgba(60,64,67,0.10), 0 2px 8px rgba(60,64,67,0.06); }

/* Google marks: img/google-reviews.png (wordmark + stars, supplied by client) and img/google-g.svg (official G icon) */
.g-wordmark { display: block; width: auto; height: 50px; flex: none; }
.g-wordmark.lg { height: 64px; margin: 0 0 10px -4px; }
.g-logo { width: 28px; height: 28px; flex: none; display: block; }
.g-logo.sm { width: 14px; height: 14px; }

/* header badge: G | "Google Rating" 5.0 ***** | 47 reviews */
.g-badge {
    display: inline-flex; align-items: center; gap: 14px;
    background: var(--surface); color: var(--g-text);
    border: 1px solid var(--line-soft); border-radius: 12px; padding: 12px 18px;
    box-shadow: 0 1px 2px rgba(60,64,67,0.12), 0 2px 8px rgba(60,64,67,0.08);
    text-decoration: none; transition: box-shadow 0.15s;
}
a.g-badge:hover { color: var(--g-text); box-shadow: 0 2px 6px rgba(60,64,67,0.18), 0 6px 18px rgba(60,64,67,0.12); }
.g-badge-body { display: flex; flex-direction: column; line-height: 1.2; padding-left: 14px; border-left: 1px solid var(--line-soft); }
.g-badge-score { display: inline-flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 700; }
.g-badge-score .star { width: 16px; height: 16px; }
.g-badge-count { font-size: 13px; color: var(--g-blue); font-weight: 600; margin-top: 2px; }
.g-badge.static { padding: 0; background: transparent; border: 0; box-shadow: none; border-radius: 0; }

.star-row { display: inline-flex; gap: 2px; line-height: 0; }
.star-row.lg .star { width: 22px; height: 22px; }

.review-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.review { padding: 24px; display: flex; flex-direction: column; gap: 12px; color: var(--g-text); }
.review .who { display: flex; align-items: center; gap: 12px; }
.review .av-wrap { position: relative; flex: none; }
.review .av { width: 44px; height: 44px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 600; }
.review .av-g { position: absolute; right: -4px; bottom: -4px; width: 20px; height: 20px; padding: 2px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.review .nm { font-size: 15px; font-weight: 600; color: var(--g-text); }
.review .tm { font-size: 13px; color: var(--g-muted); }
.review .tx { font-size: 14px; line-height: 1.6; color: #3c4043; flex: 1; }
.review .src { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--g-muted); margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--line-soft); }

.review-nav { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; }
.review-nav button { width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; font-size: 18px; background: var(--surface-2); color: var(--ink); }
.review-nav button:hover:not([disabled]) { background: var(--gold); }
.review-nav button[disabled] { opacity: 0.35; cursor: default; }

/* rating summary bar under the carousel */
.rating-summary { display: flex; align-items: center; gap: 48px; flex-wrap: wrap; margin-top: 40px; padding: 28px 32px; color: var(--g-text); }
.rating-summary .rs-score { display: flex; align-items: flex-start; gap: 16px; }
.rating-summary .rs-big { font-size: 44px; font-weight: 700; line-height: 1; margin-bottom: 6px; }
.rating-summary .muted { font-size: 13px; color: var(--g-muted); margin-top: 4px; }
.rating-bars { display: flex; flex-direction: column; gap: 6px; width: 220px; }
.rating-bars .r { display: flex; align-items: center; gap: 8px; }
.rating-bars .r span { font-size: 12px; color: var(--g-muted); width: 8px; text-align: center; }
.rating-bars .track { flex: 1; height: 6px; border-radius: var(--r-pill); background: #f1f3f4; overflow: hidden; }
.rating-bars .fill { height: 100%; background: var(--star); }

/* ---- events board ------------------------------------------------------ */
/* ---- events board (home) ---------------------------------------------- */
.board-card { background: var(--surface); border-radius: var(--r-card); padding: 28px; box-shadow: var(--shadow-card); }
.board-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; }
.board-count { font-weight: 700; font-size: 13px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: 0.08em; }
.board-count span::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); margin-right: 8px; vertical-align: 1px; }
.board-search {
    border: 1px solid #d8d3c6; border-radius: var(--r-pill); padding: 11px 18px;
    font-size: 14px; font-family: var(--font); width: 280px; max-width: 100%;
    background: var(--surface-3); color: var(--ink);
}
.board-list { display: flex; flex-direction: column; gap: 10px; }
.ev-row {
    display: grid; grid-template-columns: 64px 120px minmax(0, 1fr) auto; gap: 20px; align-items: center;
    background: var(--surface-2); border-radius: var(--r-row); padding: 14px 18px 14px 14px;
    transition: background 0.15s ease, transform 0.15s ease;
}
.ev-row:hover { background: #f1f0eb; transform: translateX(3px); }
.ev-date { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 14px; background: var(--dark); color: #fff; }
.ev-day   { font-family: var(--font-num); font-size: 30px; line-height: 1; color: var(--gold); letter-spacing: 0.04em; }
.ev-month { font-size: 11px; color: #c7c9ce; text-transform: uppercase; letter-spacing: 0.1em; margin-top: 2px; }
.ev-thumb { height: 68px; border-radius: 12px; overflow: hidden; background: #e6e6e2; }
.ev-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ev-info { min-width: 0; }
.ev-name  { font-weight: 700; font-size: 16px; }
.ev-meta  { font-size: 13px; color: var(--ink-dim); margin: 2px 0 8px; }
.ev-status { font-size: 12px; padding: 4px 11px; }
.ev-act   { display: flex; align-items: center; gap: 20px; }
.ev-price { font-size: 20px; font-weight: 700; text-align: right; line-height: 1; }
.ev-price span { display: block; font-size: 11px; font-weight: 600; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 5px; }
.ev-empty { text-align: center; padding: 24px; color: var(--ink-faint); font-size: 14px; }
.board-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line-soft); font-size: 14px; }

/* ---- CTA band ---------------------------------------------------------- */
.cta-band {
    background: var(--gold); border-radius: var(--r-section);
    padding: 88px 48px; text-align: center; margin-bottom: 16px;
}
.cta-band h2 { margin-bottom: 12px; }
.cta-band p  { color: #4a3d16; max-width: 560px; margin: 0 auto 28px; }
.cta-band .btn-row { justify-content: center; }

/* ---- footer ------------------------------------------------------------ */
.site-footer { background: var(--footer); border-radius: var(--r-section); padding: 72px 48px 32px; color: #b3b5ba; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 72px; align-items: start; }
.foot-logo { height: 96px; width: auto; margin-bottom: 24px; }
.foot-tag { font-size: 26px; font-weight: 700; text-transform: uppercase; color: #fff; line-height: 1.25; }
.site-footer h4 { font-size: 15px; font-weight: 700; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; letter-spacing: 0.08em; }
.site-footer .col { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.site-footer a { color: #b3b5ba; }
.site-footer a:hover { color: var(--gold); }
.foot-base {
    border-top: 1px solid #2b2d32; margin-top: 56px; padding-top: 24px;
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    font-size: 13px; color: var(--ink-dim); flex-wrap: wrap;
}
.foot-base .links { display: flex; gap: 24px; }
.dev { background: var(--bad); color: #fff; padding: 2px 8px; border-radius: var(--r-pill); font-size: 11px; font-weight: 700; }

/* ==========================================================================
   Shared components - these carry the transactional pages
   (book, checkout, my-booking, bike-details, interest, contact, faqs, terms)
   ========================================================================== */

main.inner { padding: 56px 16px 16px; }
main.inner > .wrap > h1 { margin-bottom: 16px; }
main.inner > .wrap > .lede { margin-bottom: 36px; }
main.inner .lede { margin-bottom: 32px; }

.box {
    background: var(--surface); border-radius: var(--r-card);
    padding: 32px; margin-bottom: 20px; box-shadow: var(--shadow-card);
}
.box h2 { font-size: 24px; margin-bottom: 12px; }
.box h3 { font-size: 18px; margin-bottom: 10px; }
.box > :last-child { margin-bottom: 0; }
.box.tight { padding: 22px 24px; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }

.tag {
    display: inline-block; padding: 5px 14px; border-radius: var(--r-pill);
    font-size: 13px; font-weight: 700; background: var(--surface-2); color: var(--ink-dim);
}
.tag.open { background: rgba(30,142,62,0.12); color: var(--ok); }
.tag.full { background: rgba(192,57,43,0.12); color: var(--bad); }
.tag.low  { background: rgba(212,161,42,0.18); color: #7a5a08; }
.tag.soon { background: rgba(212,161,42,0.18); color: var(--gold-dark); }

.flash, .error, .notice {
    border-radius: var(--r-row); padding: 16px 20px; margin-bottom: 20px; font-size: 15px;
}
/* Flash messages are toned: success (green) | error (red) | info (gold).
   Success gets a tick and a heavier weight, because "your payment went
   through" is the one message that has to be impossible to miss. */
.flash {
    display: flex; align-items: flex-start; gap: 12px;
    font-size: 16px; font-weight: 500;
    padding: 18px 22px;
    background: rgba(212,161,42,0.16); border-left: 4px solid var(--gold); color: #4a3d16;
}
.flash::before {
    content: ''; flex: none; width: 22px; height: 22px; margin-top: 1px;
    background-repeat: no-repeat; background-position: center; background-size: 22px 22px;
}
.flash-success {
    background: #e6f4ea; border-left-color: var(--ok); color: #14622c;
    box-shadow: 0 2px 10px rgba(30,142,62,0.12);
}
.flash-success::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e8e3e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l2.5 2.5L16 9.5'/%3E%3C/svg%3E");
}
.flash-error {
    background: rgba(192,57,43,0.10); border-left-color: var(--bad); color: #7c241a;
}
.flash-error::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c0392b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5h.01'/%3E%3C/svg%3E");
}
.flash-info::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8860b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5M12 7.5h.01'/%3E%3C/svg%3E");
}
.error  { background: rgba(192,57,43,0.10); border-left: 4px solid var(--bad); color: #7c241a; }
.notice { background: var(--surface); border-left: 4px solid var(--ink); }
.error ul { margin: 8px 0 0; padding-left: 20px; }
/* A <p> inside one of these kept its own bottom margin, which stacked on the
   panel's padding - 16px above the text, 32px below. Collapse the outer ones. */
.flash > :first-child, .error > :first-child, .notice > :first-child,
.wheel-warning > :first-child, .demo-banner > :first-child { margin-top: 0; }
.flash > :last-child, .error > :last-child, .notice > :last-child,
.wheel-warning > :last-child, .demo-banner > :last-child { margin-bottom: 0; }

.placeholder {
    border: 2px dashed #cfd0cc; border-radius: var(--r-row); padding: 24px;
    color: var(--ink-faint); font-size: 14px; background: var(--surface-3); margin-bottom: 20px;
}

/* ---- booking page: form left, event summary right --------------------- */
.booking-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 24px;
    align-items: start;
}
.booking-aside { position: sticky; top: 106px; }   /* clears the sticky header */
/* interest / waiting-list page: event summary and form as two equal halves */
.booking-layout.split-half { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.booking-layout.split-half .booking-aside { order: -1; }
.summary-card h2 { font-size: 22px; margin: 0 0 18px; }
.summary-media { border-radius: var(--r-row); overflow: hidden; margin-bottom: 20px; aspect-ratio: 16 / 10; background: var(--surface-2); }
.summary-media img { width: 100%; height: 100%; object-fit: cover; }
.summary-list { margin: 0; }
.summary-list > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); }
.summary-list > div:first-child { border-top: 0; padding-top: 0; }
.summary-list dt { font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-dim); font-weight: 600; }
.summary-list dd { margin: 0; font-size: 15px; }
.summary-list .muted { font-size: 13px; }

/* forms */
label { display: block; font-weight: 600; font-size: 14px; margin: 18px 0 6px; }
form > label:first-of-type { margin-top: 0; }

/* Section headings inside a form (Collection address, Optional extras) were
   colliding with the field above - h2 has no default margin in this sheet. */
form h2, .box form h2, form h3 {
    font-size: 20px;
    margin: 38px 0 6px;
    padding-top: 26px;
    border-top: 1px solid var(--line);
}
form h2:first-child, form h3:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* Checkbox / radio labels read as a line of text, not a bold field label. */
/* Block, not flex - flex would make every inline child (the T&C link) a flex
   item and open gaps in the middle of the sentence. */
label:has(> input[type=checkbox]), label:has(> input[type=radio]), label.check {
    display: block; position: relative; padding-left: 30px;
    font-weight: 400; font-size: 15px; line-height: 1.55; margin: 22px 0 0;
}
label:has(> input[type=checkbox]) > input, label:has(> input[type=radio]) > input,
label.check > input { position: absolute; left: 0; top: 4px; margin: 0; }
input[type=text], input[type=email], input[type=tel], input[type=password],
input[type=number], input[type=date], select, textarea {
    width: 100%; font-family: var(--font); font-size: 15px; color: var(--ink);
    background: var(--surface-3); border: 1px solid #d8d3c6;
    border-radius: 14px; padding: 12px 16px;
}
textarea { min-height: 120px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--gold); outline: none; box-shadow: 0 0 0 3px rgba(212,161,42,0.2); }
input[type=checkbox], input[type=radio] { width: auto; margin-right: 8px; accent-color: var(--gold); }
fieldset { border: 1px solid var(--line); border-radius: var(--r-row); padding: 20px 24px; margin: 24px 0; }
legend { font-weight: 700; padding: 0 8px; font-size: 15px; }
/* Two fields on one line. Uses minmax(0,1fr) rather than auto-fit so the pair
   stays paired instead of collapsing the moment the column narrows. */
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
/* Three-across, for a field broken into its parts (make / model / depth). */
.field-row-3 { display: grid; grid-template-columns: 1.1fr 1.4fr 0.8fr; gap: 0 20px; }
.field-row-3 > div { min-width: 0; }
.field-row-3 .sub-label { margin-top: 0; font-size: 13px; font-weight: 600; }
@media (max-width: 700px) { .field-row-3 { grid-template-columns: 1fr; } }
.field-row > div { min-width: 0; }
form > .field-row:first-of-type label { margin-top: 0; }

.field-error { color: var(--bad); font-size: 13px; margin-top: 4px; }
form .btn { margin-top: 24px; }

/* Extras table on the booking form */
.extras-table { max-width: 620px; }
.extras-table .extra-included td { background: var(--surface-2); }
.extras-table .extra-maxed td { opacity: 0.65; }
.qty-max {
    display: inline-block; margin-left: 8px;
    font-size: 12px; color: var(--ink-faint); white-space: nowrap;
}

/* Running total above the pay button */
.pay-total { max-width: 360px; margin: 0 0 22px; }
.pay-total td, .pay-total th { padding: 8px 0; }
.pay-total .amt { text-align: right; }
.pay-total .pay-total-sum th { font-size: 18px; border-top: 2px solid var(--line); border-bottom: 0; padding-top: 12px; }

/* ---- checkout / payment block ----------------------------------------- */
.pay-block {
    margin-top: 40px; padding-top: 28px;
    border-top: 1px solid var(--line);
}
.pay-block .check { margin: 0 0 24px; }

/* Green pay button: the convention for "money leaves here", and it separates
   the commit action from the gold used everywhere else on the site.
   #17803d on white is 5.0:1, so it passes AA at this text size. */
.btn-pay {
    display: inline-flex; align-items: center; gap: 10px;
    border: 0; cursor: pointer; font-family: var(--font);
    font-weight: 700; font-size: 16px; padding: 17px 34px;
    border-radius: var(--r-pill);
    background: var(--pay); color: #fff;
    transition: background 0.15s ease, transform 0.05s ease;
}
.btn-pay:hover  { background: var(--pay-dark); color: #fff; }
.btn-pay:active { transform: translateY(1px); }
.btn-pay svg {
    width: 18px; height: 18px; flex: none;
    fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
}

.pay-note {
    font-size: 14px; line-height: 1.55; color: var(--ink-dim);
    margin: 16px 0 0; max-width: 460px;
}
.pay-note strong { color: var(--ink); font-weight: 600; }

.pay-trust {
    display: flex; align-items: center; flex-wrap: wrap; gap: 12px 22px;
    margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line);
}
.trust-item {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 13px; color: var(--ink-dim); white-space: nowrap;
}
.trust-item svg {
    width: 15px; height: 15px; flex: none;
    fill: none; stroke: var(--pay); stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
}
/* Text fallback until the official badge is dropped into img/. */
span.stripe-badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 13px; color: var(--ink-dim);
    background: var(--surface-2); border: 1px solid var(--line);
    border-radius: 6px; padding: 6px 12px; white-space: nowrap;
}
span.stripe-badge b {
    font-size: 15px; font-weight: 700; color: #635bff;   /* Stripe brand purple */
    letter-spacing: -0.02em;
}
img.stripe-badge { display: block; }

/* A note that belongs to the button above it, not a floating muted line. */
.btn-note { font-size: 14px; color: var(--ink); font-weight: 500; margin: 14px 0 0; }

/* "Add more extras" has to read as a separate block from what is already
   bought, or the two tables run together. */
.add-more {
    margin-top: 32px; padding-top: 28px;
    border-top: 2px solid var(--line);
}
.add-more h3 { margin-bottom: 6px; }
.add-more > p.muted { margin-bottom: 18px; }

/* Request-refund disclosure inside the extras table */
.refund-cell { white-space: normal; }
.refund-ask summary {
    cursor: pointer; font-size: 13px; font-weight: 600;
    color: var(--gold-dark); list-style: none; white-space: nowrap;
}
.refund-ask summary::-webkit-details-marker { display: none; }
.refund-ask summary::before { content: '\25B8  '; }
.refund-ask[open] summary::before { content: '\25BE  '; }
.refund-ask[open] {
    background: var(--surface-2); border: 1px solid var(--line);
    border-radius: var(--r-row); padding: 14px 16px; margin: 4px 0;
    min-width: 260px;
}
.refund-ask label { font-size: 13px; margin-top: 12px; }
.refund-ask textarea { min-height: 76px; font-size: 14px; }
.refund-ask button { margin-top: 14px; }

/* ---- customs declaration form ----------------------------------------- */
/* The form used to sit straight on the page ground with each section running
   into the next. It is a card now, and every <h2> is a full-bleed section
   rule so Rider / Bike / Kit bag / Wheels / Signature read as separate steps. */
.declaration-form { padding: 32px 36px 36px; }
/* the "Event / Email" context line that opens the form */
.declaration-form > p.muted:first-of-type { margin-bottom: 22px; }
.declaration-form h2 {
    font-size: 20px;
    margin: 40px -36px 20px;
    padding: 26px 36px 0;
    border-top: 1px solid var(--line);
}
.declaration-form h2:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
/* the intro line under a section heading */
.declaration-form h2 + p.muted { margin-top: -8px; }
.declaration-form > p.muted:last-of-type { margin-bottom: 0; }

/* Country-of-origin helper. Was a nested white card holding a 12-row table in
   the middle of the form; now a quiet tinted block with the list folded away. */
.brand-help {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-row);
    padding: 16px 18px; margin-top: 12px; max-width: 520px;
}
.brand-help label { margin-top: 0; }
.brand-help details { margin-top: 12px; }
.brand-help summary {
    cursor: pointer; font-size: 13px; font-weight: 600;
    color: var(--gold-dark); list-style: none;
}
.brand-help summary::-webkit-details-marker { display: none; }
.brand-help summary::before { content: '\25B8  '; }
.brand-help details[open] summary::before { content: '\25BE  '; }
.brand-help table { font-size: 13px; }
.brand-help th, .brand-help td { padding: 7px 8px; }

@media (max-width: 640px) {
    .box.declaration-form { padding: 24px 18px 24px; }
    .box.declaration-form h2 { margin: 32px -18px 16px; padding: 22px 18px 0; }
}

/* Wheels declared vs wheels paid for. Amber - it is a warning, not an error:
   the rider is not blocked from saving an honest declaration. */
.wheel-warning {
    background: rgba(212,161,42,0.16);
    border-left: 4px solid var(--gold-dark);
    border-radius: var(--r-row);
    padding: 14px 18px; margin: 0 0 20px;
    font-size: 15px; line-height: 1.55; color: #4a3d16;
}
.wheel-warning strong { display: block; margin-bottom: 2px; }
.wheel-warning a { font-weight: 700; text-decoration: underline; }
#wheel_fields .wheel-warning { margin: 14px 0; }

/* Repeatable wheel rows on the customs declaration. Delete is quiet - it
   should not compete with "+ Add wheel" for attention. */
.wheel-table td { vertical-align: middle; }
.wheel-table input { margin: 0; }
button.wheel-remove {
    background: transparent; color: var(--bad);
    border: 1px solid rgba(192,57,43,0.35);
    padding: 8px 14px; font-size: 13px; font-weight: 600; margin-top: 0;
}
button.wheel-remove:hover:not([disabled]) { background: var(--bad); color: #fff; border-color: var(--bad); }
button.wheel-remove[disabled] { opacity: 0.3; cursor: default; }
#add_wheel { margin-top: 14px; }

/* tables */
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-dim); }
tr:last-child td, tr:last-child th { border-bottom: 0; }

/* Footnote sitting under a details table inside a .box. The last row has its
   border removed, so the note has nothing separating it from the data - give
   it its own rule and breathing room. */
.table-note {
    margin-top: 26px; padding-top: 20px;
    border-top: 1px solid var(--line);
    color: var(--ink-dim);
}
.table-note strong { color: var(--ink); }

/* Event detail card: image on the left, content on the right.
   Falls back to a single column when the event has no image, and stacks
   on narrow screens. */
.event-card.has-image {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}
.event-media {
    border-radius: var(--r-row); overflow: hidden;
    background: var(--surface-2); height: 100%; min-height: 260px;
}
.event-media img { width: 100%; height: 100%; object-fit: cover; }
.event-body > :last-child { margin-bottom: 0; }
.event-body h2 { margin-top: 0; }
/* Stop the label column sprawling now the table fills the card. */
.event-body table th { width: 200px; }
@media (max-width: 640px) { .event-body table th { width: 130px; } }

/* legacy: kept so any page still using the old class renders sensibly */
.event-image { width: 100%; height: 220px; object-fit: cover; border-radius: var(--r-row); margin-bottom: 20px; }

/* ---- events page: 3-up tiles ------------------------------------------ */
.event-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-bottom: 20px; }
.event-tile {
    display: flex; flex-direction: column; background: var(--surface); border-radius: var(--r-card);
    box-shadow: var(--shadow-card); overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.event-tile:hover { transform: translateY(-4px); box-shadow: 0 14px 36px rgba(0,0,0,0.12); }
.event-tile.is-full .event-tile-media img { filter: grayscale(0.6); opacity: 0.85; }
.event-tile-media { position: relative; aspect-ratio: 16 / 9; background: var(--surface-2); }
.event-tile-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.event-tile-ph {
    height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: var(--dark); color: #b3b5ba; text-transform: uppercase; letter-spacing: 0.1em; font-size: 13px;
}
.event-tile-ph span { font-family: var(--font-num); font-size: 64px; line-height: 1; color: var(--gold); letter-spacing: 0.04em; }
.event-tile-tag { position: absolute; left: 14px; bottom: 14px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
.event-tile-tag.open, .event-tile-tag.low, .event-tile-tag.full, .event-tile-tag.soon { background: #fff; }
.event-tile-body { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 26px; flex: 1; }
.event-tile-when { font-size: 13px; color: var(--ink-dim); }
.event-tile-body h2 { font-size: 20px; line-height: 1.2; margin: 0; }
.event-tile-desc {
    font-size: 14px; line-height: 1.55; color: var(--ink-dim); margin: 0;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.event-tile-facts { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 14px; padding-top: 14px; border-top: 1px solid var(--line-soft); font-size: 14px; }
.event-tile-facts div { display: flex; justify-content: space-between; gap: 12px; }
.event-tile-facts dt { color: var(--ink-dim); }
.event-tile-facts dd { margin: 0; text-align: right; }
.event-tile .btn { margin-top: auto; align-self: flex-start; }

/* ---- contact page: intro + methods left, form right --------------------- */
.contact-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: start; margin-bottom: 24px; }
.contact-aside h1 { margin-bottom: 14px; }
.contact-aside .lede { margin-bottom: 32px; }
.contact-methods { list-style: none; margin: 0 0 32px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.contact-methods a {
    display: flex; align-items: center; gap: 16px; padding: 16px 18px;
    background: var(--surface); border-radius: var(--r-row); box-shadow: var(--shadow-card);
    color: var(--ink); transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.contact-methods a:hover { transform: translateX(4px); box-shadow: 0 10px 28px rgba(0,0,0,0.10); color: var(--ink); }
.contact-methods .ic { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--dark); color: var(--gold); flex: none; }
.contact-methods .ic svg { width: 22px; height: 22px; }
.contact-methods .lbl { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint); font-weight: 700; margin-bottom: 2px; }
.contact-methods .val { display: block; font-size: 16px; font-weight: 600; word-break: break-word; }
.contact-facts { margin: 0; }
.contact-facts > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 14px; }
.contact-facts dt { font-weight: 700; color: var(--ink-dim); }
.contact-facts dd { margin: 0; }
.contact-card { padding: 36px 40px; }
.contact-card h2 { font-size: 22px; margin-bottom: 20px; }
.contact-card textarea { min-height: 150px; resize: vertical; }
.contact-card .field-row + label { margin-top: 18px; }
.contact-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 8px; }
.contact-actions .muted { font-size: 13px; }
.contact-sent { text-align: center; padding: 24px 8px; }
.contact-sent .tick { width: 64px; height: 64px; border-radius: 50%; background: var(--gold); color: var(--ink); font-size: 30px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; }
.contact-sent h2 { margin-bottom: 8px; }
.contact-sent p { margin-bottom: 24px; }

/* ---- FAQ page: sticky section nav left, grouped accordion right --------- */
.faq-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 56px; align-items: start; margin-bottom: 24px; }
.faq-aside { position: sticky; top: 106px; }
.faq-aside h1 { margin-bottom: 12px; }
.faq-aside .lede { font-size: 16px; margin-bottom: 24px; }
.faq-search {
    width: 100%; border: 1px solid #d8d3c6; border-radius: var(--r-pill); padding: 12px 18px;
    font-size: 14px; font-family: var(--font); background: var(--surface); color: var(--ink); margin-bottom: 20px;
}
.faq-nav { display: flex; flex-direction: column; }
.faq-nav a {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 11px 14px; border-radius: 10px; color: var(--ink); font-size: 14px; font-weight: 600;
}
.faq-nav a:hover, .faq-nav a.active { background: var(--surface); color: var(--gold-dark); }
.faq-nav a span { font-size: 12px; font-weight: 700; color: var(--ink-faint); background: var(--surface-2); border-radius: var(--r-pill); padding: 2px 9px; }
.faq-nav a.active span { background: var(--gold); color: var(--ink); }

.faq-group { margin-bottom: 44px; scroll-margin-top: 110px; }
.faq-group h2 { font-size: 20px; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 2px solid var(--gold); display: inline-block; }
.faq { background: var(--surface); border-radius: var(--r-row); box-shadow: var(--shadow-card); margin-bottom: 10px; overflow: hidden; }
.faq summary {
    list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px;
    padding: 18px 22px; font-size: 16px; font-weight: 700; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--gold-dark); }
.faq-icon { position: relative; width: 26px; height: 26px; border-radius: 50%; background: var(--surface-2); flex: none; transition: background 0.2s, transform 0.25s; }
.faq-icon::before, .faq-icon::after { content: ''; position: absolute; top: 50%; left: 50%; background: var(--ink); width: 12px; height: 2px; transform: translate(-50%, -50%); }
.faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform 0.25s; }
.faq[open] .faq-icon { background: var(--gold); }
.faq[open] .faq-icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq-a { padding: 0 22px 20px; }
.faq-a p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--ink-dim); }
.faq-a a { font-weight: 600; }
.faq-empty { padding: 24px; text-align: center; color: var(--ink-dim); }
.faq-cta {
    display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
    background: var(--gold); border-radius: var(--r-card); padding: 28px 32px; margin-top: 8px;
}
.faq-cta h3 { margin: 0 0 4px; font-size: 20px; }
.faq-cta .muted { color: #4a3d16; margin: 0; }

/* ---- how it works page ------------------------------------------------- */
.hiw-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; margin-bottom: 32px; }
.hiw-intro h1 { margin-bottom: 12px; }
.hiw-intro .lede { margin: 0; max-width: 560px; }
.hiw-intro-cta { display: flex; gap: 12px; flex-wrap: wrap; }

.included-strip {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
    background: var(--dark); color: #fff; border-radius: var(--r-card); padding: 8px; margin-bottom: 64px;
}
.included { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-left: 1px solid rgba(255,255,255,0.08); }
.included:first-child { border-left: 0; }
.included .ic { width: 44px; height: 44px; border-radius: 12px; background: rgba(255,255,255,0.08); color: var(--gold); display: flex; align-items: center; justify-content: center; flex: none; }
.included .ic svg { width: 24px; height: 24px; }
.included strong { display: block; font-size: 15px; margin-bottom: 2px; }
.included span { display: block; font-size: 13px; color: #b3b5ba; line-height: 1.4; }

.timeline { list-style: none; margin: 0 0 72px; padding: 0; position: relative; }
.timeline::before { content: ''; position: absolute; left: 39px; top: 40px; bottom: 40px; width: 2px; background: linear-gradient(var(--gold), var(--line)); }
.tl-step { position: relative; display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 0 24px; margin-bottom: 28px;
    opacity: 0; transform: translateY(20px); animation: stat-in 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; animation-delay: calc(var(--i, 0) * 90ms); }
@media (prefers-reduced-motion: reduce) { .tl-step { animation: none; opacity: 1; transform: none; } }
.tl-rail { display: flex; justify-content: center; align-items: flex-start; padding-top: 22px; }
.tl-num {
    position: relative; z-index: 1; width: 80px; height: 80px; border-radius: 50%; background: var(--gold); color: var(--ink);
    display: flex; align-items: center; justify-content: center; font-family: var(--font-num); font-size: 34px; letter-spacing: 0.04em;
    box-shadow: 0 0 0 8px var(--surface-2);
}
.tl-card { display: grid; grid-template-columns: minmax(0, 1fr); background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow-card); overflow: hidden; }
.tl-step.has-img .tl-card { grid-template-columns: minmax(0, 1fr) 300px; }
.tl-step:not(.has-img) .tl-card { grid-template-columns: minmax(0, 1fr) 160px; }
.tl-body { padding: 32px 36px; }
.tl-when { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gold-dark); background: rgba(212,161,42,0.14); border-radius: var(--r-pill); padding: 6px 12px 6px 6px; margin-bottom: 14px; }
.tl-when .ic { width: 24px; height: 24px; border-radius: 50%; background: var(--gold); color: var(--ink); display: flex; align-items: center; justify-content: center; }
.tl-when .ic svg { width: 14px; height: 14px; }
.tl-body h2 { font-size: 26px; margin: 0 0 10px; }
.tl-body > p { font-size: 15px; line-height: 1.65; color: var(--ink-dim); margin: 0 0 20px; }
.tl-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.tl-lists h3 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-faint); margin: 0 0 8px; }
.tl-lists ul { list-style: none; margin: 0; padding: 0; }
.tl-lists li { position: relative; padding-left: 22px; font-size: 14px; line-height: 1.5; margin-bottom: 5px; }
.tl-lists li::before { content: ''; position: absolute; left: 0; top: 7px; width: 12px; height: 7px; border-left: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(-45deg); }
.tl-media { position: relative; background: var(--surface-2); min-height: 240px; }
.tl-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.tl-media-icon { display: flex; align-items: center; justify-content: center; background: var(--dark); color: var(--gold); }
.tl-media-icon svg { width: 64px; height: 64px; opacity: 0.9; }

.hiw-prep { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 40px; align-items: center; background: var(--surface); border-radius: var(--r-card); padding: 40px 44px; box-shadow: var(--shadow-card); margin-bottom: 24px; }
.hiw-prep-head h2 { margin-bottom: 8px; }
.hiw-prep-head .muted { margin: 0; }
.hiw-checklist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; }
.hiw-checklist li { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 600; }
.hiw-checklist li::before { content: ''; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--gold); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1b1e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E"); background-size: 14px; background-position: center; background-repeat: no-repeat; }

/* ---- responsive -------------------------------------------------------- */
@media (max-width: 1100px) {
    .about { grid-template-columns: 1fr; gap: 40px; }
    .about-quote { left: 0; }
    .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 28px; }
    .steps li:nth-child(3) .rule::before { right: 0; }
    .review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .event-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .foot-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}

@media (max-width: 1100px) {
    .booking-layout { grid-template-columns: minmax(0, 1fr) 320px; }
    .contact-layout { gap: 32px; }
    .faq-layout { grid-template-columns: 240px minmax(0, 1fr); gap: 32px; }
    .included-strip { grid-template-columns: 1fr 1fr; }
    .included:nth-child(3) { border-left: 0; }
    .tl-step.has-img .tl-card { grid-template-columns: minmax(0, 1fr) 220px; }
    .booking-layout.split-half { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .booking-layout { grid-template-columns: 1fr; }
    .contact-layout { grid-template-columns: 1fr; gap: 28px; }
    .faq-layout { grid-template-columns: 1fr; gap: 24px; }
    .included-strip { grid-template-columns: 1fr; }
    .included { border-left: 0; border-top: 1px solid rgba(255,255,255,0.08); }
    .included:first-child { border-top: 0; }
    .timeline::before { left: 23px; }
    .tl-step { grid-template-columns: 48px minmax(0, 1fr); gap: 0 14px; }
    .tl-num { width: 48px; height: 48px; font-size: 22px; box-shadow: 0 0 0 5px var(--surface-2); }
    .tl-step.has-img .tl-card, .tl-step:not(.has-img) .tl-card { grid-template-columns: 1fr; }
    .tl-media { order: -1; aspect-ratio: 16 / 9; min-height: 0; }
    .tl-media img { position: static; aspect-ratio: 16 / 9; }
    .tl-media-icon { display: none; }
    .tl-body { padding: 22px 20px; }
    .tl-lists { grid-template-columns: 1fr; gap: 12px; }
    .hiw-prep { grid-template-columns: 1fr; padding: 26px 22px; gap: 20px; }
    .hiw-checklist { grid-template-columns: 1fr; }
    .faq-aside { position: static; }
    .faq-nav { flex-direction: row; flex-wrap: wrap; gap: 6px; }
    .contact-card { padding: 26px 22px; }
    .booking-aside { position: static; order: -1; }
    .event-card.has-image { grid-template-columns: 260px minmax(0, 1fr); gap: 24px; }
}

@media (max-width: 992px) {
    .panel, .panel.plain, .panel.dark, .cta-band, .site-footer { padding: 56px 24px; }
    .hero { min-height: 800px; }
    .hero-inner { padding: 120px 24px 48px; }

    .nav-toggle { display: block; }
    .site-header .wrap { flex-wrap: wrap; padding: 8px 10px 8px 18px; }
    .site-header.floating { padding-top: 16px; margin-bottom: -76px; top: -8px; }
    .site-header.floating .wrap { max-height: calc(100vh - 32px); overflow-y: auto; }
    .site-nav {
        display: none; flex-direction: column; align-items: flex-start;
        gap: 4px; width: 100%; padding: 12px 8px 16px; order: 3;
    }
    .site-nav.open { display: flex; }
    .site-nav a { padding: 10px 6px; width: 100%; }
    .nav-cta { margin-top: 8px; }
    .logo img { height: 44px; }

    .ev-row { grid-template-columns: 56px minmax(0, 1fr); gap: 14px; }
    .ev-thumb { display: none; }
    .ev-date { width: 56px; height: 56px; }
    .ev-day { font-size: 26px; }
    .ev-act { grid-column: 1 / -1; justify-content: space-between; }
    .why-grid { grid-template-columns: 1fr; }
    .steps { grid-template-columns: 1fr; gap: 28px; }
    .steps .rule::before { display: none; }
    .about-visual { display: block; aspect-ratio: auto; }
    .about-img.main { aspect-ratio: 4 / 3; }
    .about-img.small { display: none; }
    .about-quote { position: static; max-width: none; margin-top: 14px; }
    .steps .rule::before { right: 0; }
}

@media (max-width: 640px) {
    .shell { padding: 8px; }
    .panel, .panel.plain, .panel.dark, .cta-band, .site-footer { padding: 44px 18px; border-radius: var(--r-row); }
    .hero { border-radius: var(--r-row); min-height: 700px; }
    .box { padding: 22px 18px; }
    .foot-grid { grid-template-columns: 1fr; gap: 32px; }
    .foot-base { flex-direction: column; align-items: flex-start; gap: 12px; }
    .rating-summary { gap: 20px; padding: 22px 20px; }
    .reviews-head { align-items: flex-start; }
    .g-badge { padding: 10px 14px; gap: 10px; }
    .g-wordmark { height: 36px; }
    .g-wordmark.lg { height: 48px; }
    .section-head { flex-direction: column; align-items: flex-start; gap: 16px; }
    .review-grid { grid-template-columns: 1fr; }
    .event-grid { grid-template-columns: 1fr; }
    .event-card.has-image { grid-template-columns: 1fr; gap: 20px; }
    .btn-pay { width: 100%; justify-content: center; }
    .field-row { grid-template-columns: 1fr; gap: 0; }
    .field-row > div + div label { margin-top: 18px; }
    .pay-trust { gap: 10px 16px; }
    .event-media { min-height: 200px; }
}

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

/* ---- Declaration form: rider & bike fields -------------------------------
   One 12-column grid for the whole block, so every field lines up on the same
   rails instead of each section inventing its own layout. Hints sit under the
   label rather than in brackets inside it. Shared by the customer form and the
   admin edit screen, so these rules live in both stylesheets. */
.dq-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px 20px; align-items: start; }
.dq-f { grid-column: span 12; min-width: 0; }
.dq-f.s3 { grid-column: span 3; }
.dq-f.s4 { grid-column: span 4; }
.dq-f.s6 { grid-column: span 6; }
.dq-f.s8 { grid-column: span 8; }
.dq-f > label, .dq-grouplabel { display: block; font-weight: 600; font-size: 14px; margin: 0; }
.dq-hint { display: block; font-size: 12.5px; font-weight: 400; line-height: 1.45; color: #6b7280; margin: 3px 0 0; }
.dq-opt { font-weight: 400; font-size: 12.5px; color: #6b7280; }
.dq-f > label + input, .dq-f > label + select, .dq-f > label + textarea,
.dq-hint + input, .dq-hint + select, .dq-hint + textarea { margin-top: 7px; }
.dq-f > textarea { min-height: 92px; }
/* brand helper */
.dq-brands { margin-top: 9px; }
.dq-brands summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--gold, #d4a12a); }
.dq-brandlist { list-style: none; margin: 10px 0 0; padding: 0; max-height: 210px; overflow-y: auto;
    border: 1px solid var(--line, #e6e8ec); border-radius: 12px; }
.dq-brandlist li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 13px; font-size: 13px; }
.dq-brandlist li + li { border-top: 1px solid var(--line, #e6e8ec); }
.dq-brandlist b { color: #6b7280; font-weight: 600; }
@media (max-width: 760px) {
    .dq-f.s3, .dq-f.s4, .dq-f.s6, .dq-f.s8 { grid-column: span 12; }
}
/* label kept for screen readers where the section heading already names the field */
.dq-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- VAT ---------------------------------------------------------------- */
.vat-note { color: var(--ink-dim); font-weight: 400; font-size: .84em; white-space: nowrap; }
.price-vat-line { color: var(--ink-dim); font-size: 14px; margin: 4px 0 0; }

/* Subtotal / VAT rows sit above the bold total in the booking and extras tables. */
.pay-total tr.vat-row td,
.pay-total tr.vat-row th,
table tr.vat-row td,
table tr.vat-row th { color: var(--ink-dim); font-weight: 400; }

/* Figures still to be confirmed in the terms - stands out until filled in. */
.tbc { background: #fff3c4; color: #7a5a00; padding: 1px 6px; border-radius: 4px; font-weight: 600; }