@charset "UTF-8";
/* ==========================================================
   ROCKET CITY TRIKES — Shared Design System
   ========================================================== */
:root {
    /* Brand palette — sampled from the official WooHoo! logo.
       Accent system is now teal-primary / green-secondary (red retired from the UI;
       it still lives in the logo image itself). */
    --rct-teal: #2fa6b6;      /* bright aqua/teal swoosh — decorative use on dark bg */
    --rct-teal-deep: #157380; /* teal for buttons & solid fills (white text passes AA) */
    --rct-teal-text: #136b76; /* deeper teal for small text/links on light bg (passes AA) */
    --rct-green: #3aa048;     /* grass green — decorative */
    --rct-green-deep: #2a7531;/* green for secondary buttons/text (passes AA) */
    --rct-lime: #8fc02a;      /* lime-green swoosh accent (on dark bg) */
    --rct-lime-bright: #a8d65a;/* brighter lime for accent TEXT on dark sections (high contrast) */
    --rct-sky: var(--rct-teal);

    /* --clay was the brand red; it now resolves to teal so every existing
       reference becomes teal automatically. */
    --clay: var(--rct-teal-deep);
    --clay-dark: #0f6e7a;     /* darker teal for hover/active */
    --rct-red-text: var(--rct-teal-text); /* legacy alias → teal text */
    --forest: #143a35;        /* deep green-teal, pulled toward the logo green */
    --forest-deep: #0f2c28;
    --cream: #f5efe4;
    --cream-warm: #ede4d3;
    --paper: #faf6ef;
    --ink: #1c1c1a;
    --ink-soft: #4a4a44;

    --rust: #c97a3f;
    --sky: #6f8a8c;
    --line: rgba(28, 28, 26, 0.12);

    --serif: 'Fraunces', Georgia, serif;
    --sans: 'Inter Tight', -apple-system, sans-serif;

    --max: 1320px;
    --pad: clamp(20px, 4vw, 56px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--sans);
    color: var(--ink);
    background: var(--paper);
    line-height: 1.55;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* Subtle ambient background */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
            radial-gradient(circle at 20% 30%, rgba(184, 89, 58, 0.04) 0%, transparent 40%),
            radial-gradient(circle at 80% 70%, rgba(45, 59, 45, 0.04) 0%, transparent 40%);
    pointer-events: none;
    z-index: 0;
}

/* ==========================================================
   ANNOUNCEMENT BAR
   ========================================================== */
.announce {
    /* More eye-catching: a warm teal gradient with a bright lime accent rule
       along the bottom, slightly larger/bolder text. Stands out without
       overwhelming the hero. */
    background: linear-gradient(90deg, var(--rct-teal-deep) 0%, var(--forest-deep) 55%, var(--rct-teal-deep) 100%);
    color: #fff;
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 11px 20px;
    text-align: center;
    position: relative;
    z-index: 100;
    line-height: 1.45;
    border-bottom: 2px solid var(--rct-lime);
    box-shadow: 0 2px 10px rgba(21, 115, 128, 0.25);
}
.announce strong {
    color: var(--rct-lime-bright);
    font-weight: 800;
    letter-spacing: 0.1em;
    /* Gentle attention pulse on the lead word (e.g. "NOW BOOKING"). */
    animation: announcePulse 2.4s ease-in-out infinite;
}
@keyframes announcePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.62; }
}
@media (prefers-reduced-motion: reduce) {
    .announce strong { animation: none; }
}
.announce a { color: #fff; text-decoration: underline; font-weight: 700; }
.announce a:hover { color: var(--rct-lime-bright); }

/* ==========================================================
   NAV
   ========================================================== */
.nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(250, 246, 239, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
    transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: transform;
}
/* Auto-hide-on-scroll state — applied by JS on small screens only.
   The header hides when scrolling down and reappears when scrolling up. */
.nav.nav-hidden { transform: translateY(-100%); }
/* Never hide while the mobile menu is open */
.nav.open.nav-hidden { transform: translateY(0); }
.nav-inner {
    max-width: var(--max);
    margin: 0 auto;
    padding: 12px var(--pad);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--serif);
    text-decoration: none;
}
.brand-mark {
    height: 101px;
    width: auto;
    flex-shrink: 0;
    position: relative;
    display: block;
}
.brand-mark img {
    height: 100%;
    width: auto;
    display: block;
    /* Subtle transition on hover */
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.brand:hover .brand-mark img { transform: scale(1.04); }
/* Hide any leftover SVG fallbacks; prefer the real logo image */
.brand-mark svg { display: none; }

.nav-links {
    display: flex;
    gap: 4px;
    list-style: none;
    align-items: center;
}
.nav-links a {
    display: block;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-soft);
    border-radius: 999px;
    transition: all 0.2s ease;
}
.nav-links a:hover { color: var(--ink); background: var(--cream-warm); }
.nav-links a.active { color: var(--ink); background: var(--cream-warm); }

.nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--ink);
    color: var(--cream);
    padding: 11px 20px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 999px;
    transition: all 0.2s ease;
    letter-spacing: 0.01em;
}
.nav-cta:hover { background: var(--clay); transform: translateY(-1px); }
.nav-cta::after { content: '\2192'; transition: transform 0.2s ease; }
.nav-cta:hover::after { transform: translateX(2px); }

/* Facebook icon in the nav, next to the Contact Us button */
.nav-fb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #1877f2;
    margin-left: auto;
    margin-right: 14px;
    transition: background 0.2s ease, transform 0.2s ease;
    flex-shrink: 0;
}
.nav-fb svg { width: 20px; height: 20px; fill: #fff; }
.nav-fb:hover { background: #0f5ed6; transform: translateY(-1px); }

/* The mobile-menu Contact Us pill stays hidden on desktop (the black
   nav-cta button covers desktop; this item only shows in the open
   hamburger menu — styled in the responsive section below). */
.nav-links .nav-cta-mobile { display: none; }

.nav-toggle { display: none; }

/* ==========================================================
   BUTTONS
   ========================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 28px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    transition: all 0.25s ease;
    letter-spacing: 0.01em;
    white-space: nowrap;
    text-align: center;
}
.btn-primary { background: var(--clay); color: var(--cream); }
.btn-primary:hover { background: var(--clay-dark); transform: translateY(-2px); box-shadow: 0 12px 24px rgba(184, 89, 58, 0.25); }
.btn-secondary {
    background: transparent;
    color: var(--ink);
    border: 1.5px solid var(--ink);
}
.btn-secondary:hover { background: var(--ink); color: var(--cream); }
.btn-arrow::after { content: '\2192'; transition: transform 0.25s ease; }
.btn-arrow:hover::after { transform: translateX(3px); }

/* ==========================================================
   PLACEHOLDERS
   ========================================================== */
.ph {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 220px; /* Safety net: ensures the photo box never collapses on mobile if parent height is unset */
    background: var(--cream-warm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-soft);
    text-align: center;
    padding: 20px;
    overflow: hidden;
}
.ph::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
            repeating-linear-gradient(45deg, transparent 0, transparent 12px, rgba(184, 89, 58, 0.06) 12px, rgba(184, 89, 58, 0.06) 13px);
}
.ph-label {
    position: relative;
    background: var(--paper);
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px dashed var(--clay);
    color: var(--clay-dark);
    font-size: 11px;
    z-index: 2;
}
/* When a real image loads inside .ph it covers the placeholder pattern */
.ph img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 3;
}

/* ==========================================================
   SECTION CONTAINERS
   ========================================================== */
.section {
    padding: clamp(80px, 10vw, 140px) var(--pad);
    max-width: var(--max);
    margin: 0 auto;
    position: relative;
    z-index: 1;
}
.section-tight { padding-top: clamp(40px, 5vw, 70px); padding-bottom: clamp(40px, 5vw, 70px); }

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: 60px;
}
.section-eyebrow {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--rct-red-text);
    margin-bottom: 16px;
}
.section-title {
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(36px, 5vw, 64px);
    line-height: 1;
    letter-spacing: -0.02em;
    max-width: 700px;
}
.section-title em { font-style: italic; color: var(--clay); font-weight: 400; }
.section-link {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 4px;
    border-bottom: 1.5px solid var(--ink);
    transition: gap 0.2s ease;
}
/* Prominent variant — a solid pill button for the home spotlight's
   "View all trikes" call to action (client wants it larger + more prominent). */
.section-link-big {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    background: var(--rct-teal-deep);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 26px;
    border: none;
    border-radius: 999px;
    box-shadow: 0 6px 18px rgba(21, 115, 128, 0.28);
    transition: transform 0.18s ease, box-shadow 0.18s ease, gap 0.2s ease, background 0.18s ease;
}
.section-link-big:hover {
    background: var(--forest-deep);
    transform: translateY(-1px);
    box-shadow: 0 9px 24px rgba(21, 115, 128, 0.34);
    gap: 14px;
}
.section-link:hover { gap: 12px; color: var(--clay); border-color: var(--clay); }

/* ==========================================================
   PAGE HEADER (interior pages)
   ========================================================== */
.page-header {
    padding: clamp(60px, 8vw, 110px) var(--pad) clamp(40px, 5vw, 70px);
    max-width: var(--max);
    margin: 0 auto;
    position: relative;
    z-index: 1;
}
.page-header .crumb {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--clay);
    margin-bottom: 20px;
}
.page-header h1 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(44px, 6vw, 80px);
    line-height: 1;
    letter-spacing: -0.025em;
    margin-bottom: 24px;
}
.page-header h1 em { font-style: italic; color: var(--clay); font-weight: 400; }
.page-header p {
    font-size: clamp(16px, 1.3vw, 19px);
    color: var(--ink-soft);
    max-width: 640px;
    line-height: 1.6;
}

/* ==========================================================
   HERO (home)
   ========================================================== */
.hero {
    position: relative;
    padding: clamp(40px, 7vw, 90px) var(--pad) clamp(60px, 8vw, 110px);
    max-width: var(--max);
    margin: 0 auto;
    z-index: 1;
}
.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: clamp(30px, 5vw, 70px);
    align-items: center;
}
.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--clay);
    margin-bottom: 24px;
}
.hero-eyebrow::before { content: ''; width: 30px; height: 1px; background: var(--clay); }
.hero-title {
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(44px, 6.5vw, 92px);
    line-height: 0.96;
    letter-spacing: -0.025em;
    color: var(--ink);
    margin-bottom: 28px;
}
.hero-title em { font-style: italic; font-weight: 400; color: var(--clay); }
/* Third hero line ("Smile wider.") — black and upright per client request.
   Targets it two ways for robustness: by the hero-plain class if present, and
   by position (the first <em> in the title) so it works even if the live HTML
   doesn't have the class. The fourth line ("Enjoy the ride.") stays italic. */
.hero-title em.hero-plain,
.hero-title em:first-of-type { font-style: normal; color: var(--ink); }
.hero-lead {
    font-size: clamp(16px, 1.4vw, 19px);
    color: var(--ink-soft);
    max-width: 520px;
    margin-bottom: 36px;
    line-height: 1.6;
}
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 48px; }
.hero-stats {
    display: flex;
    gap: clamp(20px, 4vw, 50px);
    padding-top: 28px;
    border-top: 1px solid var(--line);
}
.stat-num {
    font-family: var(--serif);
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 500;
    color: var(--ink);
    line-height: 1;
    letter-spacing: -0.02em;
}
.stat-label {
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-top: 6px;
}
.hero-visual {
    position: relative;
    aspect-ratio: 5 / 6;
    background: var(--cream-warm);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.08), 0 8px 16px rgba(0, 0, 0, 0.04);
}
.hero-visual::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.15) 100%);
    pointer-events: none;
}
.hero-badge {
    position: absolute;
    top: 24px;
    right: 24px;
    background: var(--paper);
    padding: 14px 18px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 2;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.dot-live {
    width: 8px;
    height: 8px;
    background: #4a8a4a;
    border-radius: 50%;
    animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(74, 138, 74, 0.5); }
    50% { opacity: 0.85; box-shadow: 0 0 0 8px rgba(74, 138, 74, 0); }
}

/* Full-bleed hero variant kept available, but we're using the boxed grid hero */

/* ==========================================================
   CREDENTIALS STRIP (replaces brand-strip)
   ========================================================== */
.creds {
    background: var(--forest-deep);
    color: var(--cream);
    padding: clamp(48px, 7vw, 88px) var(--pad);
    position: relative;
    overflow: hidden;
}
/* Subtle decorative texture */
.creds::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
            radial-gradient(circle at 15% 20%, rgba(47, 166, 182, 0.08) 0%, transparent 45%),
            radial-gradient(circle at 88% 78%, rgba(245, 239, 228, 0.04) 0%, transparent 50%);
    pointer-events: none;
}
.creds-inner {
    max-width: var(--max);
    margin: 0 auto;
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 6vw, 80px);
    align-items: start;
}

/* Tagline (left column) */
.creds-tagline {
    max-width: 480px;
}
.creds-eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #5dcaa5;
    margin-bottom: 18px;
}
.creds-tagline p {
    font-family: var(--serif);
    font-size: clamp(22px, 2.4vw, 30px);
    line-height: 1.25;
    color: var(--cream);
    font-weight: 400;
    letter-spacing: -0.01em;
}
.creds-tagline em {
    font-style: italic;
    color: var(--rct-lime-bright);
}

/* Brand names, grouped by region (right column) */
.creds-brands {
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.creds-brand-group {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 24px;
    align-items: baseline;
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(245, 239, 228, 0.1);
}
.creds-brand-group:last-child { border-bottom: none; padding-bottom: 0; }
.creds-brand-region {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(245, 239, 228, 0.78);
}
.creds-brand-names {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
}
.creds-brand-names span {
    font-family: var(--serif);
    font-size: clamp(18px, 1.7vw, 22px);
    font-weight: 500;
    color: var(--cream);
    letter-spacing: -0.01em;
}

/* Stats row spans full width below */
.creds-stats {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: clamp(36px, 5vw, 56px);
    padding-top: clamp(36px, 5vw, 48px);
    border-top: 1px solid rgba(245, 239, 228, 0.12);
}
.creds-stat {
    text-align: left;
}
.creds-stat-num {
    font-family: var(--serif);
    font-size: clamp(40px, 5vw, 64px);
    font-weight: 400;
    color: var(--cream);
    line-height: 1;
    letter-spacing: -0.03em;
    margin-bottom: 8px;
}
.creds-stat-num span {
    font-size: 0.5em;
    color: var(--clay);
    font-style: italic;
    font-weight: 400;
    margin-left: 2px;
    vertical-align: 0.4em;
}
.creds-stat-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(245, 239, 228, 0.7);
}

@media (max-width: 880px) {
    .creds-inner { grid-template-columns: 1fr; gap: 32px; }
    .creds-stats { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
    .creds-brand-group { grid-template-columns: 1fr; gap: 6px; }
}
@media (max-width: 480px) {
    .creds-stat-num { font-size: 36px; }
}

/* ==========================================================
   TRIKE CARDS
   ========================================================== */
.trike-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
.trike-card {
    position: relative;
    background: var(--cream);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.trike-card:hover { transform: translateY(-6px); }
.trike-img {
    aspect-ratio: 4 / 3;
    position: relative;
    overflow: hidden;
}
.trike-tag {
    position: absolute;
    top: 16px;
    left: 16px;
    background: var(--ink);
    color: var(--cream);
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 999px;
    z-index: 2;
}
.trike-tag.feat { background: var(--clay); }
.trike-tag.demo { background: var(--forest); }
.trike-body { padding: 24px 26px 28px; }
.trike-brand {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 8px;
}
.trike-name {
    font-family: var(--serif);
    font-size: 26px;
    font-weight: 500;
    letter-spacing: -0.01em;
    margin-bottom: 8px;
}
.trike-desc {
    font-size: 14px;
    color: var(--ink-soft);
    line-height: 1.55;
    margin-bottom: 18px;
}
.trike-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}
.trike-feature { font-size: 13px; font-weight: 500; color: var(--ink); }
.trike-arrow {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--paper);
    display: grid;
    place-items: center;
    transition: all 0.25s ease;
}
.trike-card:hover .trike-arrow { background: var(--clay); color: var(--cream); transform: rotate(-45deg); }

/* External link indicator on cards that go to manufacturer sites */
.trike-card.external .trike-arrow::before {
    content: '\2197';
    font-size: 16px;
    font-weight: 600;
}
.trike-card.external:hover .trike-arrow { transform: rotate(0deg); }
a.trike-card { display: block; color: inherit; text-decoration: none; cursor: pointer; }
a.trike-card .trike-arrow { font-size: 0; }

/* ==========================================================
   FEATURE STRIP — Logo-inspired (deep navy + teal/lime/sky/red)
   ========================================================== */
.feature-strip {
    /* Deep ink-navy background lets the bright logo accents pop */
    background:
            radial-gradient(circle at 12% 0%, rgba(47, 166, 182, 0.22) 0%, transparent 55%),
            radial-gradient(circle at 92% 100%, rgba(143, 192, 42, 0.16) 0%, transparent 55%),
            #14242a;
    color: var(--cream);
    padding: clamp(56px, 7vw, 90px) var(--pad);
    position: relative;
    overflow: hidden;
    z-index: 1;
}
/* Subtle "swoosh" echoing the logo trail */
.feature-strip::before {
    content: '';
    position: absolute;
    top: -120px;
    right: -140px;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(47, 166, 182, 0.28), transparent 65%);
    pointer-events: none;
}
.feature-strip::after {
    content: '';
    position: absolute;
    bottom: -160px;
    left: -160px;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(58, 160, 72, 0.18), transparent 65%);
    pointer-events: none;
}
.feature-inner { max-width: var(--max); margin: 0 auto; position: relative; z-index: 1; }
.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(28px, 3.2vw, 44px) clamp(28px, 3vw, 40px);
    margin-top: clamp(36px, 4.5vw, 56px);
}
.feature-item {
    position: relative;
    padding-top: 4px;
}
.feature-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: rgba(47, 166, 182, 0.16);
    color: var(--rct-teal);
    display: grid;
    place-items: center;
    margin-bottom: 20px;
    border: 1px solid rgba(47, 166, 182, 0.32);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.feature-item:hover .feature-icon {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
}
/* Rotate icon colors so the grid feels alive — teal, lime, and green */
.feature-grid > .feature-item:nth-child(6n+1) .feature-icon {
    background: rgba(47, 166, 182, 0.16);
    border-color: rgba(47, 166, 182, 0.38);
    color: var(--rct-teal);
}
.feature-grid > .feature-item:nth-child(6n+2) .feature-icon {
    background: rgba(143, 192, 42, 0.14);
    border-color: rgba(143, 192, 42, 0.42);
    color: var(--rct-lime);
}
.feature-grid > .feature-item:nth-child(6n+3) .feature-icon {
    background: rgba(58, 160, 72, 0.16);
    border-color: rgba(58, 160, 72, 0.40);
    color: var(--rct-green);
}
.feature-grid > .feature-item:nth-child(6n+4) .feature-icon {
    background: rgba(47, 166, 182, 0.16);
    border-color: rgba(47, 166, 182, 0.42);
    color: var(--rct-teal);
}
.feature-grid > .feature-item:nth-child(6n+5) .feature-icon {
    background: rgba(143, 192, 42, 0.14);
    border-color: rgba(143, 192, 42, 0.42);
    color: var(--rct-lime);
}
.feature-grid > .feature-item:nth-child(6n+6) .feature-icon {
    background: rgba(47, 166, 182, 0.16);
    border-color: rgba(47, 166, 182, 0.38);
    color: var(--rct-teal);
}
.feature-icon svg {
    width: 26px;
    height: 26px;
    display: block;
}
.feature-item h4 {
    font-family: var(--serif);
    font-size: clamp(19px, 1.7vw, 22px);
    font-weight: 500;
    margin-bottom: 10px;
    color: var(--cream);
    letter-spacing: -0.005em;
}
.feature-item p {
    font-size: 14.5px;
    color: rgba(245, 239, 228, 0.78);
    line-height: 1.6;
}
.feature-strip .section-title { color: var(--cream); max-width: 600px; }
.feature-strip .section-title em { color: var(--rct-lime); font-weight: 400; }
.feature-strip .section-eyebrow { color: var(--rct-teal); }

/* ==========================================================
   LOCATIONS
   ========================================================== */
.locations-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}
.loc-card {
    position: relative;
    background: var(--cream);
    border-radius: 8px;
    overflow: hidden;
    display: grid;
    grid-template-rows: 280px auto;
}
.loc-card .ph { background: var(--cream-warm); }
.loc-body { padding: 32px 36px; }
.loc-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--clay);
    margin-bottom: 12px;
}
.loc-name {
    font-family: var(--serif);
    font-size: 32px;
    font-weight: 500;
    letter-spacing: -0.015em;
    margin-bottom: 16px;
}
.loc-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
    color: var(--ink-soft);
    margin-bottom: 24px;
}
.loc-info strong { color: var(--ink); font-weight: 600; }
.loc-quote {
    padding: 18px 0 24px;
    border-top: 1px solid var(--line);
    font-family: var(--serif);
    font-style: italic;
    font-size: 15px;
    color: var(--ink-soft);
    line-height: 1.5;
    margin-bottom: 24px;
}

/* ==========================================================
   STORY / TWO-COL CONTENT
   ========================================================== */
.story {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: clamp(40px, 6vw, 80px);
    align-items: center;
}
.story-img {
    aspect-ratio: 5 / 6;
    background: var(--cream-warm);
    border-radius: 8px;
    overflow: hidden;
}
.story-text p {
    font-size: clamp(15px, 1.2vw, 17px);
    color: var(--ink-soft);
    margin-bottom: 18px;
    line-height: 1.7;
}
.story-text p strong { color: var(--ink); font-weight: 600; }
.story-quote {
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(20px, 2vw, 26px);
    color: var(--clay);
    border-left: 3px solid var(--clay);
    padding-left: 24px;
    margin: 32px 0;
    line-height: 1.4;
}

/* ==========================================================
   PROSE (article-style content)
   ========================================================== */
.prose {
    max-width: 760px;
    font-size: 17px;
    color: var(--ink-soft);
    line-height: 1.75;
}
.prose h2 {
    font-family: var(--serif);
    font-size: clamp(28px, 3.5vw, 40px);
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -0.015em;
    margin: 56px 0 18px;
    line-height: 1.15;
}
.prose h2 em { font-style: italic; color: var(--clay); font-weight: 400; }
.prose h3 {
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 500;
    color: var(--ink);
    margin: 32px 0 12px;
}
.prose p { margin-bottom: 18px; }
.prose ul, .prose ol { margin: 0 0 22px 22px; }
.prose li { margin-bottom: 10px; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--clay); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose blockquote {
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(20px, 2vw, 24px);
    color: var(--ink);
    border-left: 3px solid var(--clay);
    padding: 8px 0 8px 24px;
    margin: 32px 0;
    line-height: 1.4;
}

/* ==========================================================
   CTA STRIP
   ========================================================== */
.cta-strip {
    background: var(--clay);
    color: var(--cream);
    padding: clamp(60px, 7vw, 90px) var(--pad);
    text-align: center;
    position: relative;
    overflow: hidden;
    z-index: 1;
}
.cta-strip::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
            radial-gradient(circle at 15% 50%, rgba(255,255,255,0.08), transparent 50%),
            radial-gradient(circle at 85% 50%, rgba(0,0,0,0.1), transparent 50%);
}
.cta-inner { max-width: 800px; margin: 0 auto; position: relative; }
.cta-title {
    font-family: var(--serif);
    font-size: clamp(36px, 5vw, 60px);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin-bottom: 20px;
}
.cta-title em { font-style: italic; }
.cta-lead {
    font-size: 17px;
    margin-bottom: 36px;
    opacity: 0.9;
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
}
.cta-actions { display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.cta-strip .btn-primary { background: var(--cream); color: var(--ink); }
.cta-strip .btn-primary:hover { background: var(--ink); color: var(--cream); box-shadow: 0 12px 24px rgba(0,0,0,0.2); }
.cta-strip .btn-secondary { border-color: var(--cream); color: var(--cream); }
.cta-strip .btn-secondary:hover { background: var(--cream); color: var(--clay); }

/* Photo-backed CTA closer */
.cta-photo {
    position: relative;
    overflow: hidden;
    color: var(--cream);
    padding: clamp(80px, 10vw, 140px) var(--pad);
    text-align: center;
    isolation: isolate;
}
.cta-photo-bg { position: absolute; inset: 0; z-index: -1; }
.cta-photo-bg img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 50%;
    filter: brightness(0.55) saturate(0.85);
    transform: scale(1.02);
}
.cta-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
            linear-gradient(180deg, rgba(20,38,40,0.55) 0%, rgba(20,38,40,0.7) 100%),
            radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 100%);
}
.cta-photo-inner { max-width: 760px; margin: 0 auto; position: relative; }
.cta-photo-title {
    font-family: var(--serif);
    font-size: clamp(36px, 5vw, 64px);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin-bottom: 20px;
    text-shadow: 0 2px 24px rgba(0,0,0,0.3);
}
.cta-photo-title em { font-style: italic; color: #ffb597; }
.cta-photo-lead {
    font-size: clamp(15px, 1.3vw, 18px);
    margin: 0 auto 36px;
    max-width: 580px;
    line-height: 1.6;
    color: rgba(245, 239, 228, 0.92);
    text-shadow: 0 1px 12px rgba(0,0,0,0.3);
}
.cta-photo-actions { display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.cta-photo .btn-primary { background: var(--clay); color: var(--cream); }
.cta-photo .btn-primary:hover { background: var(--clay-dark); transform: translateY(-2px); box-shadow: 0 16px 36px rgba(184, 89, 58, 0.45); }
.btn-on-dark {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 28px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    transition: all 0.25s ease;
    letter-spacing: 0.01em;
    white-space: nowrap;
    background: rgba(245, 239, 228, 0.08);
    color: var(--cream);
    border: 1.5px solid rgba(245, 239, 228, 0.4);
    backdrop-filter: blur(6px);
}
.btn-on-dark:hover {
    background: var(--cream);
    color: var(--ink);
    border-color: var(--cream);
    transform: translateY(-2px);
}

/* ==========================================================
   FOOTER
   ========================================================== */
.footer {
    background: var(--ink);
    color: var(--cream);
    padding: 80px var(--pad) 30px;
    position: relative;
    z-index: 1;
}
.footer-inner { max-width: var(--max); margin: 0 auto; }
.footer-top {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 50px;
    margin-bottom: 60px;
}
.footer-brand {
    font-family: var(--serif);
    font-size: 36px;
    font-weight: 500;
    margin-bottom: 18px;
    letter-spacing: -0.015em;
}
.footer-brand em { font-style: italic; color: var(--clay); }
.footer-tag {
    font-size: 14px;
    color: rgba(245, 239, 228, 0.6);
    max-width: 360px;
    margin-bottom: 24px;
    line-height: 1.6;
}
.footer h5 {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--clay);
    margin-bottom: 18px;
}
.footer ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer ul a {
    font-size: 14px;
    color: rgba(245, 239, 228, 0.8);
    transition: color 0.2s ease;
}
.footer ul a:hover { color: var(--cream); }
.footer-contact-line { font-size: 14px; color: rgba(245, 239, 228, 0.8); margin-bottom: 14px; }
.footer-contact-line strong { color: var(--cream); font-weight: 500; display: block; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 4px; color: var(--clay); }
.footer-contact-note { font-size: 13.5px; line-height: 1.55; color: rgba(245, 239, 228, 0.75); margin: 0 0 18px; max-width: 30ch; }
.footer-bottom {
    padding-top: 30px;
    border-top: 1px solid rgba(245, 239, 228, 0.12);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 13px;
    color: rgba(245, 239, 228, 0.5);
}
.footer-perks {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    font-size: 13px;
    color: rgba(245, 239, 228, 0.6);
}
.footer-perks span::before { content: '\2726 '; color: var(--clay); }
.footer-social { display: flex; gap: 12px; margin-top: 18px; }
.footer-social a {
    width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(245, 239, 228, 0.08);
    color: var(--cream);
    border: 1px solid rgba(245, 239, 228, 0.14);
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.footer-social a:hover {
    background: var(--clay);
    border-color: var(--clay);
    color: var(--cream);
    transform: translateY(-2px);
}
.footer-social svg { width: 17px; height: 17px; fill: currentColor; }

/* ==========================================================
   FILTER PILLS (trikes page)
   ========================================================== */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 40px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--line);
}
.filter-pill {
    padding: 9px 18px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-soft);
    background: var(--cream);
    border: 1px solid transparent;
    transition: all 0.2s ease;
}
.filter-pill:hover { color: var(--ink); border-color: var(--ink); }
.filter-pill.active { background: var(--ink); color: var(--cream); }

/* ==========================================================
   CONTACT FORM
   ========================================================== */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: clamp(40px, 6vw, 80px);
    align-items: start;
}
.contact-info { position: sticky; top: 100px; }
.contact-info h3 {
    font-family: var(--serif);
    font-size: 30px;
    font-weight: 500;
    margin-bottom: 18px;
    letter-spacing: -0.015em;
}
.contact-info-row {
    padding: 20px 0;
    border-bottom: 1px solid var(--line);
}
.contact-info-row:first-of-type { border-top: 1px solid var(--line); }
.contact-info-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--clay);
    margin-bottom: 6px;
}
.contact-info-value {
    font-size: 17px;
    color: var(--ink);
    font-weight: 500;
}
.contact-info-value a:hover { color: var(--clay); }

.form {
    background: var(--cream);
    padding: clamp(28px, 4vw, 48px);
    border-radius: 10px;
}
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 18px;
}
.form-field { margin-bottom: 18px; }
.form-field label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 8px;
}
.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    padding: 14px 16px;
    font-family: var(--sans);
    font-size: 15px;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 6px;
    transition: border-color 0.2s ease;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    outline: none;
    border-color: var(--clay);
    background: #fff;
}
.form-field textarea { resize: vertical; min-height: 120px; }
.form .btn { width: 100%; justify-content: center; margin-top: 10px; }

/* ==========================================================
   STEP / GUIDE LIST
   ========================================================== */
.steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin: 50px 0;
}
.step {
    background: var(--cream);
    padding: 32px 28px;
    border-radius: 8px;
    border-top: 3px solid var(--clay);
}
.step-num {
    font-family: var(--serif);
    font-style: italic;
    font-size: 36px;
    color: var(--clay);
    line-height: 1;
    margin-bottom: 14px;
}
.step h3 {
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 500;
    margin-bottom: 10px;
}
.step p { font-size: 14px; color: var(--ink-soft); line-height: 1.6; }

/* ==========================================================
   FAQ ACCORDION
   ========================================================== */
.faq-list { max-width: 820px; }
.faq-item {
    border-bottom: 1px solid var(--line);
}
.faq-item:first-child { border-top: 1px solid var(--line); }
.faq-q {
    width: 100%;
    text-align: left;
    padding: 24px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    font-family: var(--serif);
    font-size: clamp(18px, 1.6vw, 22px);
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -0.01em;
}
.faq-q-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--cream);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    transition: all 0.25s ease;
    font-size: 18px;
    color: var(--clay);
    font-family: var(--sans);
}
.faq-item.open .faq-q-icon { background: var(--clay); color: var(--cream); transform: rotate(45deg); }
.faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    font-size: 15px;
    color: var(--ink-soft);
    line-height: 1.7;
}
.faq-a-inner { padding: 0 0 28px; max-width: 680px; }
.faq-item.open .faq-a { max-height: 500px; }

/* ==========================================================
   REVEAL ANIMATION
   ========================================================== */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.reveal.in { opacity: 1; transform: translateY(0); }

/* ==========================================================
   BRAND DIRECTORY (trikes page)
   ========================================================== */
.brand-directory {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px 32px;
    margin-top: 16px;
}
.brand-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    color: inherit;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.brand-tile:hover { transform: translateY(-4px); }
.brand-tile-img {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--cream);
    position: relative;
    margin-bottom: 18px;
    border: 1px solid var(--line);
    box-shadow: 0 6px 20px rgba(0,0,0,0.04);
    transition: box-shadow 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.brand-tile:hover .brand-tile-img {
    box-shadow: 0 14px 32px rgba(0,0,0,0.10);
}
.brand-tile-img .ph { border-radius: 50%; min-height: 0; width: 100%; height: 100%; padding: 0; }
.brand-tile-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.brand-tile-name {
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -0.01em;
    margin-bottom: 4px;
}
.brand-tile-tag {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.brand-tile-name::after {
    content: '\2197';
    margin-left: 6px;
    font-size: 0.7em;
    color: var(--clay);
    opacity: 0;
    transition: opacity 0.3s;
}
.brand-tile:hover .brand-tile-name::after { opacity: 1; }

@media (max-width: 960px) {
    .brand-directory { grid-template-columns: repeat(3, 1fr); }
    .brand-tile-img { width: 130px; height: 130px; }
}
@media (max-width: 600px) {
    .brand-directory { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; }
    .brand-tile-img { width: 110px; height: 110px; }
    .brand-tile-name { font-size: 18px; }
}

/* ==========================================================
   BLOG
   ========================================================== */
.blog-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 32px;
}
.blog-card {
    background: var(--cream);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.blog-card:hover { transform: translateY(-6px); }
.blog-img {
    aspect-ratio: 16 / 10;
    position: relative;
    overflow: hidden;
}
.blog-card-body {
    padding: 26px 28px 30px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.blog-meta {
    display: flex;
    gap: 14px;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 14px;
}
.blog-meta .cat { color: var(--clay); }
.blog-meta .dot { width: 3px; height: 3px; background: var(--ink-soft); border-radius: 50%; opacity: 0.5; }
.blog-card h3 {
    font-family: var(--serif);
    font-size: clamp(22px, 2vw, 26px);
    font-weight: 500;
    letter-spacing: -0.01em;
    margin-bottom: 12px;
    line-height: 1.15;
}
.blog-card p {
    font-size: 14px;
    color: var(--ink-soft);
    line-height: 1.6;
    margin-bottom: 18px;
    flex: 1;
}
.blog-card .read-more {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    border-bottom: 1.5px solid var(--ink);
    padding-bottom: 3px;
    transition: all 0.2s ease;
}
.blog-card:hover .read-more { color: var(--clay); border-color: var(--clay); gap: 10px; }

/* Featured first post */
/* Featured card — same size, just visually distinguished */
.blog-grid .blog-card.featured {
    outline: 1px solid var(--clay);
    outline-offset: -1px;
}
.blog-grid .blog-card.featured .blog-img::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Single blog post */
.blog-post {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 var(--pad);
}
.blog-post .blog-meta { margin-bottom: 24px; }
.blog-post-hero {
    margin: 32px auto 48px;
    max-width: 1100px;
    padding: 0 var(--pad);
}
.blog-post-hero .ph {
    aspect-ratio: 16 / 9;
    border-radius: 10px;
}
.blog-post-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 24px;
    transition: color 0.2s ease;
}
.blog-post-back:hover { color: var(--clay); }
.blog-post-back::before { content: '\2190'; }

/* ==========================================================
   USED TRIKES (with price tag)
   ========================================================== */
.trike-price {
    position: absolute;
    bottom: 16px;
    right: 16px;
    background: var(--cream);
    color: var(--ink);
    padding: 10px 16px;
    font-family: var(--serif);
    font-size: 20px;
    font-weight: 500;
    border-radius: 999px;
    z-index: 2;
    letter-spacing: -0.01em;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.trike-price small { font-family: var(--sans); font-size: 11px; font-weight: 500; opacity: 0.6; margin-right: 2px; }

/* ==========================================================
   TRANSPORT / 3-COLUMN INFO
   ========================================================== */
.info-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
.info-col {
    background: var(--cream);
    padding: 32px 28px;
    border-radius: 8px;
}
.info-col-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(197, 72, 58, 0.12);
    color: var(--clay);
    display: grid;
    place-items: center;
    margin-bottom: 18px;
}
.info-col-icon svg { width: 24px; height: 24px; display: block; }
.info-col h3 {
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 500;
    margin-bottom: 12px;
    letter-spacing: -0.01em;
}
.info-col p {
    font-size: 14px;
    color: var(--ink-soft);
    line-height: 1.65;
}
.info-col p strong { color: var(--ink); }

/* ==========================================================
   PLEDGE / HIGHLIGHT BOX
   ========================================================== */
.pledge-box {
    background: var(--cream);
    border-left: 4px solid var(--clay);
    padding: clamp(28px, 4vw, 44px);
    border-radius: 0 8px 8px 0;
    margin: 40px 0;
}
.pledge-box .label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--clay);
    margin-bottom: 14px;
}
.pledge-box h3 {
    font-family: var(--serif);
    font-size: clamp(24px, 2.6vw, 32px);
    font-weight: 500;
    letter-spacing: -0.015em;
    line-height: 1.2;
    margin-bottom: 16px;
}
.pledge-box p {
    font-size: 16px;
    color: var(--ink-soft);
    line-height: 1.7;
}
.pledge-box p + p { margin-top: 14px; }
.pledge-tag {
    font-family: var(--serif);
    font-style: italic;
    font-size: 22px;
    color: var(--clay);
    margin-top: 20px;
    font-weight: 500;
}

/* ==========================================================
   RESPONSIVE — additions
   ========================================================== */
@media (max-width: 960px) {
    .blog-grid { grid-template-columns: 1fr 1fr; }
    .info-cols { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .blog-grid { grid-template-columns: 1fr; }
}

/* ==========================================================
   RESPONSIVE — TABLET & MOBILE
   ========================================================== */

/* TABLET: 960px and below
   ---------------------------------------------------------- */
@media (max-width: 960px) {
    .nav-links, .nav > .nav-inner > .nav-cta, .nav > .nav-inner > .nav-fb { display: none; }
    .nav-toggle {
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: var(--cream-warm);
    }
    .nav-toggle span {
        width: 18px;
        height: 1.5px;
        background: var(--ink);
        position: relative;
    }
    .nav-toggle span::before, .nav-toggle span::after {
        content: '';
        position: absolute;
        width: 18px;
        height: 1.5px;
        background: var(--ink);
        left: 0;
    }
    .nav-toggle span::before { top: -6px; }
    .nav-toggle span::after { top: 6px; }
    .nav.open .nav-links {
        display: flex;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        background: var(--paper);
        padding: 16px var(--pad) 24px;
        border-bottom: 1px solid var(--line);
        gap: 4px;
    }
    .nav.open .nav-links a { padding: 12px 16px; font-size: 15px; }
    .nav.open .nav-links .nav-cta-mobile {
        display: inline-flex;
        background: var(--ink);
        color: var(--cream);
        margin: 12px 16px 0;
        padding: 12px 22px;
        border-radius: 999px;
        width: fit-content;
    }

    .hero-grid, .story, .locations-grid, .contact-grid { grid-template-columns: 1fr; }
    .contact-info { position: static; }
    /* Hero image when stacked under text — taller ratio, generous size, min-height so it never looks tiny */
    .hero-visual {
        aspect-ratio: 4 / 3;
        max-width: 640px;
        width: 100%;
        min-height: 320px;
        margin: 0 auto;
    }
    .trike-grid { grid-template-columns: repeat(2, 1fr); }
    .feature-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 28px; }
    .steps { grid-template-columns: 1fr; }
    .footer-top { grid-template-columns: 1fr 1fr; gap: 40px; }
    .section-header { align-items: flex-start; }
    .form-row { grid-template-columns: 1fr; }
}

/* SMALL TABLET / LARGE PHONE: 720px and below
   ---------------------------------------------------------- */
@media (max-width: 720px) {
    /* Section padding tightens up */
    .section { padding: clamp(56px, 9vw, 80px) var(--pad); }
    .section-header { margin-bottom: 36px; gap: 16px; }
    .section-tight { padding-top: clamp(28px, 5vw, 50px); padding-bottom: clamp(28px, 5vw, 50px); }

    /* Hero tightens — title still big but lead text/buttons stack better */
    .hero { padding: clamp(28px, 6vw, 50px) var(--pad) clamp(40px, 7vw, 70px); }
    .hero-actions { gap: 10px; margin-bottom: 36px; }
    .hero-actions .btn { flex: 1 1 auto; min-width: 0; }
    .hero-stats { gap: 28px; padding-top: 20px; }

    /* Page header eases on mobile */
    .page-header { padding: clamp(36px, 7vw, 70px) var(--pad) clamp(28px, 5vw, 50px); }
}

/* PHONE: 600px and below
   ---------------------------------------------------------- */
@media (max-width: 600px) {
    /* One-column trikes & features */
    .trike-grid { grid-template-columns: 1fr; gap: 20px; }
    .feature-grid { grid-template-columns: 1fr; gap: 28px; }
    .footer-top { grid-template-columns: 1fr; gap: 32px; }

    /* Hero stats wrap and breathe */
    .hero-stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
        padding-top: 22px;
    }
    .stat-num { font-size: 26px; }
    .stat-label { font-size: 10px; letter-spacing: 0.1em; }

    /* Announce bar gets smaller and the strong label can wrap */
    .announce {
        font-size: 11px;
        letter-spacing: 0.06em;
        padding: 9px 14px;
        line-height: 1.5;
    }

    /* Logo scales to a sensible size on phones */
    .brand-mark { height: 71px; }
    .nav-inner { padding: 10px var(--pad); gap: 12px; }

    /* Hero badge — keep visible but smaller */
    .hero-badge {
        top: 14px;
        right: 14px;
        padding: 9px 12px;
        font-size: 10px;
        letter-spacing: 0.06em;
    }
    .hero-visual {
        aspect-ratio: 4 / 5; /* Taller, more portrait — photo feels substantial on a phone instead of a thin strip */
        border-radius: 10px;
        min-height: 360px;
        max-width: 100%;
    }

    /* CTA strips: cleaner two-button stacking */
    .cta-actions, .cta-photo-actions { width: 100%; gap: 10px; }
    .cta-actions .btn, .cta-photo-actions .btn,
    .hero-actions .btn { width: 100%; flex: 1 1 100%; }

    /* Buttons feel chunkier and more tappable on phone */
    .btn { padding: 14px 22px; font-size: 14.5px; }

    /* Trike cards — slightly tighter padding on phone */
    .trike-body { padding: 20px 22px 24px; }
    .trike-name { font-size: 22px; }

    /* Brand strip: stack region label above brand names */
    .creds { padding: clamp(40px, 7vw, 60px) var(--pad); }
    .creds-tagline p { font-size: 21px; }
    .creds-brands { gap: 18px; }
    .creds-brand-group { gap: 4px; padding-bottom: 18px; }
    .creds-brand-region { font-size: 9px; }
    .creds-brand-names { gap: 4px 14px; }
    .creds-brand-names span { font-size: 19px; }

    /* Feature strip: tighter top/bottom space */
    .feature-strip { padding: clamp(48px, 8vw, 70px) var(--pad); }
    .feature-strip::before, .feature-strip::after { width: 320px; height: 320px; }

    /* Locations cards: tighter */
    .loc-body { padding: 28px 24px 32px; }

    /* CTA-photo: tighter */
    .cta-photo { padding: clamp(60px, 10vw, 90px) var(--pad); }
}

/* SMALL PHONE: 420px and below — final polish for narrow devices
   ---------------------------------------------------------- */
@media (max-width: 420px) {
    :root { --pad: 18px; }
    .hero-title { font-size: clamp(36px, 12vw, 50px); }
    .section-title { font-size: clamp(30px, 9vw, 44px); }
    .page-header h1 { font-size: clamp(36px, 11vw, 54px); }
    .creds-tagline p { font-size: 19px; }
    .stat-num { font-size: 22px; }

    /* Brand-mark a touch smaller so the burger sits comfortably */
    .brand-mark { height: 62px; }
    .nav-toggle { width: 40px; height: 40px; }

    /* Announce bar — drop letter-spacing further on the smallest screens */
    .announce { font-size: 10.5px; padding: 8px 12px; letter-spacing: 0.04em; }

    /* Hero photo on tiny phones — keep it generous */
    .hero-visual { min-height: 320px; }
}

/* ==========================================================
   MOBILE OVERRIDES FOR INLINE-STYLED GRIDS
   (Some pages use inline grid styles; these ensure clean stacking.)
   ========================================================== */
@media (max-width: 760px) {
    /* Catch all inline 2-column grids and stack them on mobile.
       Covers: "minmax(0, 1fr) minmax(0, 1.2fr)" on e-assist hero,
               "1fr 1.4fr" on the e-assist "Service for any system" callout,
               and any similar 2-col patterns added later. */
    .section [style*="grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr)"],
    .section [style*="grid-template-columns: 1fr 1.4fr"],
    .section [style*="grid-template-columns: 1fr 1.2fr"],
    .section [style*="grid-template-columns: 1fr 1.1fr"],
    .section [style*="grid-template-columns: 1.4fr 1fr"],
    .section [style*="grid-template-columns: 1.2fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }
    /* Auto-fit minmax patterns — already responsive, just tighten gap on phone */
    .section [style*="minmax(220px, 1fr)"],
    .section [style*="minmax(240px, 1fr)"],
    .section [style*="minmax(280px, 1fr)"] {
        gap: 24px !important;
    }
}

/* Used-trike checklist: 5-up desktop, 2-up tablet, 1-up mobile */
@media (max-width: 1100px) {
    .checklist-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 720px) {
    .checklist-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
    .checklist-grid { grid-template-columns: 1fr !important; }
}

/* ==========================================================
   SELECTING PAGE — RESPONSIVE HELPERS
   ========================================================== */

/* X-Seam range chart rows: label + bar side-by-side desktop, stacked mobile */
.xseam-row {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 12px;
    align-items: center;
    padding: 7px 0;
}
.xseam-scale-row {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 12px;
    align-items: end;
    margin-bottom: 6px;
}
.xseam-label {
    font-family: var(--sans);
    font-size: 12px;
    color: var(--ink);
    font-weight: 500;
}
.xseam-bar-track {
    position: relative;
    height: 20px;
    background: rgba(28,28,26,0.06);
    border-radius: 4px;
}
.xseam-bar-fill {
    position: absolute;
    height: 100%;
    background: var(--clay);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.xseam-bar-fill span {
    font-family: var(--sans);
    font-size: 10px;
    color: var(--cream);
    font-weight: 600;
    letter-spacing: 0.04em;
}

@media (max-width: 600px) {
    .xseam-row {
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 8px 0;
    }
    .xseam-scale-row { grid-template-columns: 1fr; }
    .xseam-label { font-size: 13px; font-weight: 600; }
}

/* Two-column prose layout (Wheels + Gearing) — collapses to single column on mobile */
.two-col-prose {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 5vw, 64px);
    max-width: 1200px;
    margin: 0 auto;
}
@media (max-width: 760px) {
    .two-col-prose {
        grid-template-columns: 1fr;
        gap: clamp(40px, 8vw, 56px);
    }
}

/* E-Assist callout card — 2-col desktop, stacked mobile */
.eassist-callout {
    max-width: 1100px;
    margin: 0 auto;
    background: var(--ink);
    color: var(--cream);
    border-radius: 16px;
    padding: clamp(32px, 5vw, 64px);
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: clamp(32px, 4vw, 56px);
    align-items: start;
}
.eassist-callout h2 { overflow-wrap: break-word; }
.eassist-callout-img {
    aspect-ratio: 1/1;
    border-radius: 12px;
    overflow: hidden;
    background: var(--cream-warm);
}
.eassist-callout-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media (max-width: 760px) {
    .eassist-callout {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .eassist-callout-img {
        aspect-ratio: 4/3;
        max-height: 280px;
    }
}

/* ==========================================================
   v2 ADDITIONS — Fit Quiz · Gallery · Events Calendar
   Modals · Toasts  (appended; reuses existing tokens)
   ========================================================== */

/* ---- Accessible custom MODAL (replaces all native dialogs) ---- */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(20, 38, 40, 0.55);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s ease, visibility 0.28s ease;
}
.modal-overlay.open { opacity: 1; visibility: visible; }
.modal-card {
    background: var(--paper);
    border-radius: 16px;
    width: min(540px, 100%);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    box-shadow: 0 30px 80px rgba(20, 38, 40, 0.4);
    padding: clamp(28px, 4vw, 44px);
    transform: translateY(16px) scale(0.98);
    transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
    position: relative;
    border-top: 4px solid var(--clay);
}
.modal-overlay.open .modal-card { transform: translateY(0) scale(1); }
.modal-icon {
    width: 56px; height: 56px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(143, 192, 42, 0.18);
    margin-bottom: 18px;
}
.modal-icon svg { width: 30px; height: 30px; fill: none; stroke: var(--rct-lime); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.modal-card h3 {
    font-family: var(--serif);
    font-size: clamp(22px, 2.4vw, 28px);
    line-height: 1.18;
    color: var(--ink);
    margin-bottom: 10px;
    font-weight: 600;
}
.modal-card h3 em { color: var(--clay); font-style: italic; }
.modal-card p { color: var(--ink-soft); line-height: 1.6; margin-bottom: 12px; }
.modal-card .modal-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.modal-card .modal-actions .btn { flex: 1 1 auto; justify-content: center; }
.modal-close {
    position: absolute;
    top: 16px; right: 16px;
    width: 38px; height: 38px;
    border-radius: 50%;
    display: grid; place-items: center;
    color: var(--ink-soft);
    background: var(--cream-warm);
    font-size: 20px; line-height: 1;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.modal-close:hover { background: var(--ink); color: var(--cream); transform: rotate(90deg); }
.modal-summary {
    background: var(--cream-warm);
    border-radius: 10px;
    padding: 16px 18px;
    margin: 6px 0 4px;
    font-size: 14px;
    line-height: 1.6;
}
.modal-summary strong { color: var(--ink); }

/* ---- TOAST notifications ---- */
.toast-wrap {
    position: fixed;
    right: 20px; bottom: 20px;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: min(380px, calc(100vw - 40px));
}
.toast {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--ink);
    color: var(--cream);
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.25);
    border-left: 4px solid var(--sky);
    transform: translateX(120%);
    transition: transform 0.42s cubic-bezier(0.2, 0.9, 0.2, 1), opacity 0.3s ease;
    opacity: 0;
    font-size: 14.5px;
    line-height: 1.45;
}
.toast.show { transform: translateX(0); opacity: 1; }
.toast.toast-success { border-left-color: var(--rct-lime); }
.toast.toast-error { border-left-color: var(--clay); }
.toast.toast-info { border-left-color: var(--rct-sky); }
.toast-ico { flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; }
.toast-ico svg { width: 20px; height: 20px; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.toast-success .toast-ico svg { stroke: var(--rct-lime); }
.toast-error .toast-ico svg { stroke: var(--clay); }
.toast-info .toast-ico svg { stroke: var(--rct-sky); }
.toast-body strong { display: block; margin-bottom: 1px; }
.toast-close { color: rgba(245,239,228,0.6); margin-left: auto; font-size: 16px; line-height: 1; align-self: flex-start; }
.toast-close:hover { color: var(--cream); }

/* ---- Inline form validation states ---- */
.form-field.invalid input,
.form-field.invalid select,
.form-field.invalid textarea {
    border-color: var(--clay);
    background: rgba(47, 166, 182, 0.04);
}
.field-error {
    display: none;
    color: var(--clay);
    font-size: 12.5px;
    margin-top: 6px;
    font-weight: 500;
}
.form-field.invalid .field-error { display: block; }
.form-note { font-size: 13px; color: var(--ink-soft); margin-top: 4px; }

/* ==========================================================
   FIND-YOUR-FIT QUIZ
   ========================================================== */
.quiz {
    max-width: 760px;
    margin: 0 auto;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: clamp(24px, 4vw, 44px);
    box-shadow: 0 20px 60px rgba(20, 38, 40, 0.06);
}
.quiz-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.quiz-progress-track {
    flex: 1;
    height: 6px;
    border-radius: 999px;
    background: var(--cream-warm);
    overflow: hidden;
}
.quiz-progress-fill {
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--rct-teal), var(--rct-lime));
    transition: width 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.quiz-progress-label {
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-soft);
    font-weight: 600;
    white-space: nowrap;
}
.quiz-step { display: none; animation: quizFade 0.4s ease; }
.quiz-step.active { display: block; }
/* Reserve a stable height for question steps so switching questions doesn't
   change the card height and shift the page. Sized to the tallest question
   (the 6-option "how will you ride" step). Result step is exempt. */
.quiz-step[data-key] { min-height: 600px; }
.quiz-compact .quiz-step[data-key] { min-height: 540px; }
@keyframes quizFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.quiz-q {
    font-family: var(--serif);
    font-size: clamp(22px, 2.6vw, 30px);
    line-height: 1.2;
    color: var(--ink);
    margin: 18px 0 6px;
    font-weight: 600;
}
.quiz-q em { color: var(--clay); font-style: italic; }
/* These headings receive programmatic focus so screen readers announce each new
   question. They are not interactive, so hide the visible outline to avoid a stray box. */
.quiz-q:focus, .quiz-result-head:focus,
.quiz-q[tabindex]:focus, .quiz-result-head[tabindex]:focus { outline: none; }
.quiz-help { color: var(--ink-soft); font-size: 14.5px; margin-bottom: 22px; line-height: 1.55; }
.quiz-options { display: grid; gap: 12px; }
.quiz-options.two-col { grid-template-columns: 1fr 1fr; }
.quiz-option {
    text-align: left;
    width: 100%;
    border: 1.5px solid var(--line);
    background: var(--cream);
    border-radius: 12px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
    min-height: 64px;
}
.quiz-option:hover { border-color: var(--rct-teal); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(20,38,40,0.08); }
.quiz-option:focus-visible { outline: 3px solid var(--rct-sky); outline-offset: 2px; }
.quiz-option.selected { border-color: var(--clay); background: rgba(47, 166, 182, 0.05); }
.quiz-option-check {
    flex-shrink: 0;
    width: 24px; height: 24px;
    border-radius: 50%;
    border: 2px solid var(--line);
    display: grid; place-items: center;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.quiz-option.selected .quiz-option-check { background: var(--clay); border-color: var(--clay); }
.quiz-option-check::after { content: '✓'; color: var(--cream); font-size: 13px; opacity: 0; transition: opacity 0.2s ease; }
.quiz-option.selected .quiz-option-check::after { opacity: 1; }
.quiz-option-text strong { display: block; color: var(--ink); font-size: 15.5px; font-weight: 600; }
.quiz-option-text span { display: block; color: var(--ink-soft); font-size: 13px; margin-top: 2px; line-height: 1.4; }
.quiz-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 26px; }
.quiz-back {
    color: var(--ink-soft);
    font-weight: 600;
    font-size: 14px;
    padding: 10px 6px;
    transition: color 0.2s ease;
}
.quiz-back:hover { color: var(--clay); }
.quiz-back[hidden] { visibility: hidden; }

/* Quiz results */
.quiz-result-head { text-align: center; margin-bottom: 8px; }
.quiz-result-head .section-eyebrow { justify-content: center; color: var(--clay); }
.quiz-matches { display: grid; gap: 16px; margin: 26px 0; }
.quiz-match {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 16px;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 14px;
    background: var(--cream);
}
.quiz-match-rank {
    position: absolute;
    transform: translate(-8px, -8px);
    background: var(--clay);
    color: var(--cream);
    font-family: var(--serif);
    font-style: italic;
    font-size: 13px;
    width: 30px; height: 30px;
    border-radius: 50%;
    display: grid; place-items: center;
    box-shadow: 0 4px 10px rgba(47, 166, 182,0.3);
}
.quiz-match-img {
    position: relative;
    aspect-ratio: 1/1;
    border-radius: 10px;
    overflow: hidden;
    background: var(--cream-warm);
}
.quiz-match-img img { width: 100%; height: 100%; object-fit: cover; }
.quiz-match-body h4 { font-family: var(--serif); font-size: 19px; color: var(--ink); margin-bottom: 3px; font-weight: 600; }
.quiz-match-brand { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--clay); font-weight: 600; margin-bottom: 6px; }
.quiz-match-body p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; margin: 0; }
.quiz-result-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.quiz-result-cta .btn { flex: 1 1 auto; justify-content: center; }

/* Answer recap shown on the final step (the rider's own answers — no model suggestions) */
.quiz-summary {
    margin: 22px 0 24px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--cream);
    overflow: hidden;
}
.quiz-summary:empty { display: none; }
.quiz-summary-head {
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--clay);
    font-weight: 600;
    padding: 14px 18px 10px;
}
.quiz-summary-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 18px;
    border-top: 1px solid var(--line);
    font-size: 14px;
}
.quiz-summary-label { color: var(--ink-soft); }
.quiz-summary-value { color: var(--ink); font-weight: 600; text-align: right; }
.quiz-contact { margin-top: 4px; }

@media (max-width: 560px) {
    .quiz-step[data-key] { min-height: 0; }
    .quiz-compact .quiz-step[data-key] { min-height: 0; }
    .quiz-options.two-col { grid-template-columns: 1fr; }
    .quiz-match { grid-template-columns: 72px 1fr; }
    .quiz-summary-row { flex-direction: column; gap: 2px; }
    .quiz-summary-value { text-align: left; }
}

/* ==========================================================
   CONTACT PAGE — quiz + form side by side, info strip below
   ========================================================== */
.contact-layout {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;   /* quiz narrower than the form */
    gap: clamp(32px, 4vw, 64px);
    align-items: start;
}
/* keep the quiz column visually quiet; top-aligned with the form */
.contact-quiz-col { align-self: start; }
.contact-quiz-intro { margin-bottom: 18px; }
.contact-quiz-intro .section-eyebrow { color: var(--clay); }
.contact-quiz-title {
    font-family: var(--serif);
    font-size: clamp(22px, 2.4vw, 28px);
    line-height: 1.15;
    color: var(--ink);
    margin: 6px 0 8px;
}
.contact-quiz-intro p {
    font-size: 14px;
    color: var(--ink-soft);
    line-height: 1.55;
    margin: 0;
}
/* compact variant of the quiz card for the contact column */
.quiz-compact {
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: clamp(18px, 2vw, 24px);
}
.quiz-compact .quiz-q { font-size: clamp(18px, 1.8vw, 21px); }
.quiz-compact .quiz-help { font-size: 13.5px; margin-bottom: 16px; }
.quiz-compact .quiz-option { padding: 12px 14px; }
.quiz-compact .quiz-options.two-col { grid-template-columns: 1fr 1fr; }

/* info strip below the two columns — horizontal, not a sidebar */
.contact-info-strip {
    position: static;
    margin-top: clamp(40px, 5vw, 64px);
    padding-top: clamp(28px, 3vw, 36px);
    border-top: 1px solid var(--line);
}
.contact-info-strip h3 { margin-bottom: 18px; }
.contact-info-strip .contact-info-rows {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px 40px;
}
.contact-info-strip .contact-info-row:first-of-type { border-top: 1px solid var(--line); }

@media (max-width: 980px) {
    .contact-layout { grid-template-columns: 1fr; gap: 36px; }
    .contact-quiz-col { position: static; }
    .quiz-compact .quiz-options.two-col { grid-template-columns: 1fr 1fr; }
    .contact-info-strip .contact-info-rows { grid-template-columns: repeat(2, 1fr); gap: 4px 32px; }
}
@media (max-width: 560px) {
    .quiz-compact .quiz-options.two-col { grid-template-columns: 1fr; }
    .contact-info-strip .contact-info-rows { grid-template-columns: 1fr; }
}
.gallery-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 32px;
}
.gallery-grid {
    columns: 3;
    column-gap: 16px;
}
.gallery-item {
    break-inside: avoid;
    margin-bottom: 16px;
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    background: var(--cream-warm);
    cursor: pointer;
    display: block;
}
.gallery-item img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.gallery-item:hover img { transform: scale(1.05); }
.gallery-item-cap {
    position: absolute;
    inset: auto 0 0 0;
    padding: 28px 16px 14px;
    background: linear-gradient(to top, rgba(20,38,40,0.85), transparent);
    color: var(--cream);
    font-size: 13.5px;
    line-height: 1.4;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.gallery-item:hover .gallery-item-cap { opacity: 1; transform: translateY(0); }
.gallery-item.is-video::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 58px; height: 58px;
    border-radius: 50%;
    background: rgba(47, 166, 182, 0.92);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    /* play triangle */
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.gallery-item.is-video .play-tri {
    position: absolute;
    inset: 0; margin: auto;
    width: 0; height: 0;
    z-index: 2;
    border-left: 18px solid var(--cream);
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
    transform: translateX(3px);
    pointer-events: none;
}
.gallery-item[hidden] { display: none; }

@media (max-width: 900px) { .gallery-grid { columns: 2; } }
@media (max-width: 560px) { .gallery-grid { columns: 1; } }

/* Video modal */
.video-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
    margin-top: 4px;
}
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ==========================================================
   EVENTS + HOURS
   ========================================================== */
.events-layout {
    display: grid;
    grid-template-columns: 1.3fr 0.9fr;
    gap: 32px;
    align-items: start;
}
.event-list { display: grid; gap: 16px; }
.event-card {
    display: grid;
    grid-template-columns: 84px 1fr;
    gap: 18px;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 18px;
    background: var(--paper);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.event-card:hover { border-color: var(--rct-teal); box-shadow: 0 10px 28px rgba(20,38,40,0.07); transform: translateY(-2px); }
.event-date {
    text-align: center;
    background: var(--forest);
    color: var(--cream);
    border-radius: 10px;
    padding: 10px 6px;
    align-self: start;
}
.event-date .mo { display: block; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rct-lime); font-weight: 700; }
.event-date .day { display: block; font-family: var(--serif); font-size: 28px; line-height: 1.05; font-weight: 600; }
.event-date .yr { display: block; font-size: 11px; color: rgba(245,239,228,0.7); margin-top: 2px; }
.event-body h3 { font-family: var(--serif); font-size: 20px; color: var(--ink); margin-bottom: 4px; font-weight: 600; }
.event-meta { font-size: 12.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--clay); font-weight: 600; margin-bottom: 8px; }
.event-body p { font-size: 14px; color: var(--ink-soft); line-height: 1.55; margin: 0 0 8px; }
.event-tag {
    display: inline-block;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--cream-warm);
    color: var(--ink-soft);
}

.hours-card {
    background: var(--forest-deep);
    color: var(--cream);
    border-radius: 16px;
    padding: clamp(24px, 3vw, 32px);
    position: sticky;
    top: 100px;
}
.hours-card h3 { font-family: var(--serif); font-size: 22px; color: var(--cream); margin-bottom: 4px; }
.hours-card .hours-sub { font-size: 13px; color: rgba(245,239,228,0.7); margin-bottom: 20px; }
.hours-shop { padding: 14px 0; border-top: 1px solid rgba(245,239,228,0.14); }
.hours-shop:last-of-type { border-bottom: 1px solid rgba(245,239,228,0.14); margin-bottom: 18px; }
.hours-shop-name { font-weight: 700; font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--rct-lime); margin-bottom: 8px; }
.hours-row { display: flex; justify-content: space-between; font-size: 14px; padding: 3px 0; color: rgba(245,239,228,0.9); }
.hours-row .day-open { color: var(--cream); font-weight: 500; }
.hours-row.is-today { color: var(--rct-lime); font-weight: 600; }
.hours-row.is-today .day-open { color: var(--rct-lime); }
.hours-note { font-size: 12.5px; color: rgba(245,239,228,0.7); line-height: 1.5; margin-top: 4px; }

@media (max-width: 860px) {
    .events-layout { grid-template-columns: 1fr; }
    .hours-card { position: static; }
}
@media (max-width: 460px) {
    .event-card { grid-template-columns: 64px 1fr; gap: 12px; }
    .event-date .day { font-size: 22px; }
}

/* Manufacturer link strip in footer */
.footer-makers { margin-top: 6px; }
.footer-makers h5 { margin-bottom: 10px; }
.footer-makers .maker-links { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.footer-makers .maker-links a { font-size: 13px; color: var(--ink-soft); transition: color 0.2s ease; }
.footer-makers .maker-links a:hover { color: var(--clay); }

/* Generic helper used by new sections */
.section-intro-narrow { max-width: 680px; margin: 0 auto 8px; text-align: center; }
.fb-embed-card {
    background: var(--cream-warm);
    border-radius: 14px;
    padding: clamp(22px, 3vw, 30px);
    text-align: center;
    border: 1px solid var(--line);
}
.fb-embed-card svg { width: 34px; height: 34px; fill: var(--rct-sky); margin-bottom: 10px; }
.fb-embed-card h3 { font-family: var(--serif); font-size: 22px; margin-bottom: 6px; color: var(--ink); }
.fb-embed-card p { color: var(--ink-soft); font-size: 14px; max-width: 460px; margin: 0 auto 16px; line-height: 1.55; }

/* ==========================================================
   FACEBOOK PAGE FEED EMBED
   The FB Page Plugin renders a fixed-width iframe that gets
   clipped if the container is narrower. These rules force the
   plugin (and its iframe) to fill the wrapper at every width
   so the business feed is never cut off.
   ========================================================== */
.fb-feed-section { padding-top: 0; }
.fb-feed-head {
    max-width: 640px;
    margin: 0 auto 40px;
    text-align: center;
}
.fb-feed-head .section-title {
    max-width: 100%;       /* override the 700px left-column width so it centers */
    margin: 0 auto 10px;
}
.fb-feed-head .section-intro-narrow { margin-top: 0; }
.fb-feed-wrap {
    max-width: 560px;          /* matches the plugin's max usable width */
    margin: 0 auto;
    display: flex;
    justify-content: center;
}
.fb-feed-shell {
    width: 100%;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    overflow: hidden;          /* clip the rounded corners cleanly */
}
/* Make the plugin and the iframe Facebook injects fully fluid */
.fb-feed-shell .fb-page,
.fb-feed-shell .fb-page span,
.fb-feed-shell .fb-page span iframe[style] {
    width: 100% !important;
}
.fb-feed-shell .fb-page span iframe[style] { display: block; }
/* Graceful state before the SDK loads / if it's blocked */
.fb-feed-fallback {
    text-align: center;
    padding: 18px 14px 6px;
}
.fb-feed-fallback p { color: var(--ink-soft); font-size: 14px; line-height: 1.55; margin: 0 0 14px; }

@media (max-width: 520px) {
    .fb-feed-shell { padding: 10px; border-radius: 14px; }
}

/* Homepage fit-promo: collapse to one column on small screens */
@media (max-width: 760px) {
    #fit-promo { grid-template-columns: 1fr !important; }
}


/* nav-no-stick-desktop */
/* The header does not stick on laptop/desktop — it scrolls away with the
   page. Mobile and tablet (<=1024px) keep the sticky header with the
   auto-hide-on-scroll behavior, unchanged. */
@media (min-width: 1025px) {
  .nav { position: static; }
}


/* brand-tile-center-fix */
/* Keep the maker names and the tagline under them centered on the Trikes
   page, even when edited content brings its own alignment along. */
.brand-tile-name, .brand-tile-tag,
.brand-tile-name > *, .brand-tile-tag > * {
  text-align: center !important;
}


/* brand-tile-arrow-fix */
/* The hidden "↗" hover arrow after each maker name was reserving layout
   space, centering "name + arrow" as a unit and shifting the visible name
   left of its photo. Absolute positioning takes the arrow out of layout:
   the name centers exactly; the arrow still appears in place on hover. */
.brand-tile-name { position: relative; }
.brand-tile-name::after { position: absolute; }