@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 {
    background: var(--forest-deep);
    color: var(--cream);
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 10px 20px;
    text-align: center;
    position: relative;
    z-index: 100;
    line-height: 1.45;
}
.announce strong { color: var(--rust); font-weight: 600; }
.announce a { text-decoration: underline; }
.announce a:hover { color: var(--rct-lime); }

/* ==========================================================
   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: 72px;
    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); }

.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;
}
.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); }
.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-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 { 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: 52px; }
    .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: 46px; }
    .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: center;
}
.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; }
@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; }

@media (max-width: 560px) {
    .quiz-options.two-col { grid-template-columns: 1fr; }
    .quiz-match { grid-template-columns: 72px 1fr; }
}

/* ==========================================================
   GALLERY  (photo + video grid, masonry-ish)
   ========================================================== */
.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; }
}