/* ============================================================
   Unity Rd. — Consolidated Stylesheet
   Two NJ cannabis dispensaries: Somerset + Maywood

   Sources consolidated (from Genspark audit):
     ../style.css                       (homepage + global base)
     ../homepage-images.css             (homepage hero/welcome/delivery imagery)
     ../location-dropdown.css           (in-header location picker)
     ../location-selector-lightbox.css  REMOVED 2026-06-13 — superseded by
                                         the entry gate (§45)
     ../areas-served.css                (location / areas-served pages)
     ../location-selector.css           DROPPED — legacy sticky bar.
                                         The .location-card.active-location
                                         rules + locationSwitch keyframe used
                                         by location-manager.js were migrated
                                         to section 29.
     ../products.css                    DEFERRED to v1.1 (Dutchie integration).

   Removed from source files:
     - @import for Google Fonts (now loaded via <link rel="preconnect"> in head)
     - --color-dark-grey               (orphan alias, no consumers)
     - --spacing-xs through --spacing-xxl  (orphan aliases, no consumers)
     - .nav-menu a.active duplicate in areas-served.css (kept canonical from style.css)
     - .location-cta base rule duplicate in areas-served.css (kept canonical from style.css)

   Section TOC:
      1. CSS Custom Properties (tokens)
      2. Reset & Base
      3. Typography
      4. Layout — Container & Section Header
      5. Buttons
      6. Site Header & Navigation
      7. Location Dropdown (in-header)
      8. Location Selector Lightbox (modal)
      9. Hero — Homepage
     10. Welcome / Two-Column Split
     11. Mission Section
     12. Experience Section (image + content cards)
     13. Welcome & Delivery Image Treatments
     14. Products Section — Icon Grid
     15. Delivery Section — Homepage
     16. Locations Section — Homepage
     17. Areas Hero — Location Pages
     18. Primary Location Block
     19. Communities Served — County Tabs
     20. Community Cards
     21. Store & Page-Type Badges
     22. Tag Cloud
     23. Delivery Service Section
     24. Why Choose Section
     25. FAQ Accordion
     26. CTA Band
     27. Contact Section
     28. Footer
     29. Location Switch Animation (used by location-manager.js)
     30. Scroll-fade Entrance
     31. Utility Classes
     32. Responsive — Tablet (≤968px)
     33. Responsive — Mid (≤768px)
     34. Responsive — Mobile (≤640px)
     35. Responsive — Small Mobile (≤480px)
     36. Print
   ============================================================ */


/* ============================================================
   1. CSS Custom Properties — Brand System
   ============================================================ */
:root {
    /* ── Brand Colors ── */
    --color-red-orange:      #F15A22;   /* Primary CTA / button */
    --color-marigold:        #F89626;   /* Secondary accents, hover, highlights */
    --color-rust:            #983809;   /* Tertiary accents, dark emphasis */
    --color-light-warm-gray: #DAD5CD;   /* Card backgrounds, dividers */
    --color-dark-warm-gray:  #262626;   /* Body text, footer, dark sections */
    --color-cream:           #FFF8EB;   /* Page backgrounds, light sections */
    --color-grey:            #E9E8E8;   /* General grey utility */
    --color-white:           #FFFFFF;

    /* ── Semantic Role Tokens ── */
    --bg-page:       var(--color-cream);
    --bg-white:      var(--color-white);
    --bg-subtle:     #F5F0E8;           /* slightly deeper cream for alternating rows */
    --bg-dark:       var(--color-dark-warm-gray);
    --text-body:     var(--color-dark-warm-gray);
    --text-muted:    #5A4A3C;           /* warm dark brown — muted body copy */
    --text-light:    var(--color-light-warm-gray);
    --border-color:  #E0D9D0;
    --border-strong: var(--color-light-warm-gray);

    /* ── Typography ── */
    --font-heading: 'Playfair Display', 'Georgia', 'Times New Roman', serif;
    --font-body:    'Source Sans 3', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    --font-accent:  'Sacramento', 'Pacifico', cursive;

    /* ── Spacing Scale (8-point grid) ── */
    --space-1:  0.5rem;    /*   8px */
    --space-2:  1rem;      /*  16px */
    --space-3:  1.5rem;    /*  24px */
    --space-4:  2rem;      /*  32px */
    --space-5:  3rem;      /*  48px */
    --space-6:  4rem;      /*  64px */
    --space-7:  5rem;      /*  80px */
    --space-8:  7.5rem;    /* 120px */

    /* ── Section Padding ── */
    --section-py-desktop: var(--space-8);   /* 120px */
    --section-py-tablet:  var(--space-6);   /*  64px */
    --section-py-mobile:  var(--space-5);   /*  48px */

    /* ── Transitions ── */
    --transition-fast:   0.18s ease;
    --transition-medium: 0.28s ease;
    --transition-slow:   0.42s ease;

    /* ── Elevation Shadows ── */
    --shadow-xs:  0 1px 3px  rgba(38, 38, 38, 0.06);
    --shadow-sm:  0 2px 12px rgba(38, 38, 38, 0.07);
    --shadow-md:  0 4px 20px rgba(38, 38, 38, 0.10);
    --shadow-lg:  0 8px 32px rgba(38, 38, 38, 0.14);
    --shadow-xl:  0 16px 48px rgba(38, 38, 38, 0.18);

    /* ── Border Radii ── */
    --radius-sm:   6px;
    --radius-md:  10px;
    --radius-lg:  16px;
    --radius-xl:  24px;
    --radius-pill: 999px;

    /* ── Max Widths ── */
    --container-max: 1200px;
    --text-max:       760px;
}


/* ============================================================
   2. Reset & Base
   ============================================================ */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.65;
    color: var(--text-body);
    background-color: var(--bg-page);
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, video {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color var(--transition-fast);
}

ul { list-style: none; }

button {
    font-family: var(--font-body);
    cursor: pointer;
    border: none;
    background: none;
}


/* ============================================================
   3. Typography
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.18;
    color: var(--color-dark-warm-gray);
    letter-spacing: -0.02em;
}

h1 { font-size: clamp(2.25rem, 5.5vw, 3.75rem); font-weight: 800; }
h2 { font-size: clamp(1.75rem, 4vw,  2.875rem); font-weight: 700; }
h3 { font-size: clamp(1.375rem, 3vw, 2rem);     font-weight: 700; }
h4 { font-size: 1.25rem;  font-weight: 600; }
h5 { font-size: 1.05rem;  font-weight: 600; }
h6 { font-size: 0.95rem;  font-weight: 600; }

p { margin-bottom: var(--space-2); }
p:last-child { margin-bottom: 0; }

/* ── Typography helpers ── */
.large-text    { font-size: 1.2rem; line-height: 1.7; }
.accent-text   { color: var(--color-red-orange); }
.accent-script { font-family: var(--font-accent); font-size: 1.5em; }
.text-muted    { color: var(--text-muted); }
.text-center   { text-align: center; }

/* County / section headings */
.county-heading {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-dark-warm-gray);
    margin-bottom: var(--space-2);
    padding-bottom: var(--space-2);
    border-bottom: 2px solid var(--border-color);
}
.county-heading svg { color: var(--color-red-orange); flex-shrink: 0; }


/* ============================================================
   4. Layout — Container & Section Header
   ============================================================ */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-3);
}

.section-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto var(--space-6);
}
.section-header p {
    font-size: 1.1rem;
    color: var(--text-muted);
    line-height: 1.7;
    margin-top: var(--space-2);
}

.section-intro {
    text-align: center;
    font-size: 1.1rem;
    color: var(--color-rust);
    margin-bottom: var(--space-5);
}


/* ============================================================
   5. Buttons
   ============================================================ */
.btn-primary,
.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.9375rem 2rem;   /* 15px × 32px */
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.015em;
    text-align: center;
    border-radius: var(--radius-sm);   /* 6px */
    transition:
        background-color var(--transition-fast),
        border-color     var(--transition-fast),
        color            var(--transition-fast),
        box-shadow       var(--transition-fast),
        transform        var(--transition-fast);
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    line-height: 1;
}

/* Primary — Red-Orange fill */
.btn-primary {
    background-color: var(--color-red-orange);
    color: var(--color-white);
    border: 2px solid var(--color-red-orange);
}
.btn-primary:hover,
.btn-primary:focus-visible {
    background-color: var(--color-rust);
    border-color: var(--color-rust);
    box-shadow: 0 4px 18px rgba(241, 90, 34, 0.38);
    transform: translateY(-2px);
    color: var(--color-white);
}
.btn-primary:active {
    transform: translateY(0);
    box-shadow: none;
}

/* Secondary / Outline — transparent + red-orange border */
.btn-secondary {
    background-color: transparent;
    color: var(--color-red-orange);
    border: 2px solid var(--color-red-orange);
}
.btn-secondary:hover,
.btn-secondary:focus-visible {
    background-color: var(--color-red-orange);
    color: var(--color-white);
    box-shadow: 0 4px 18px rgba(241, 90, 34, 0.28);
    transform: translateY(-2px);
}
.btn-secondary:active {
    transform: translateY(0);
    box-shadow: none;
}

/* Sizes */
.btn-large {
    padding: 1.125rem 2.5rem;
    font-size: 1.1rem;
}
.btn-sm {
    padding: 0.5625rem 1.25rem;
    font-size: 0.88rem;
}

/* CTA helper */
.cta-center { text-align: center; margin-top: var(--space-5); }

/* Overrides inside the CTA (red) band */
.cta-section .btn-primary {
    background-color: var(--color-white);
    color: var(--color-red-orange);
    border-color: var(--color-white);
}
.cta-section .btn-primary:hover {
    background-color: var(--color-marigold);
    border-color: var(--color-marigold);
    color: var(--color-white);
}
.cta-section .btn-secondary {
    border-color: var(--color-white); /* B2: was rgba(...,0.8) — faint against gradient */
    color: var(--color-white);
}
.cta-section .btn-secondary:hover {
    background-color: var(--color-white);
    color: var(--color-red-orange);
    border-color: var(--color-white);
}


/* ============================================================
   6. Site Header & Navigation
   ============================================================ */
.site-header {
    background-color: var(--color-white);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 1px 0 var(--border-color);
    transition: box-shadow var(--transition-medium);
}
.site-header.scrolled {
    box-shadow: var(--shadow-md);
}

.nav-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--space-4);       /* 0 top/bottom — inner elements control height */
    height: 80px;                    /* fixed nav height for crisp baseline */
    display: flex;
    align-items: center;
    gap: 0;                          /* gaps handled per-child */
}

/* Logo */
.logo-image {
    height: 52px;
    width: auto;
    display: block;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}
.logo a:hover .logo-image {
    opacity: 0.88;
    transform: scale(1.03);
}
.logo-text {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 900;
    color: var(--color-red-orange);
}

/*
  Flex order assignment (DOM: logo | dropdown | hamburger | nav-menu | header-cta)
  Visual desktop:  [1 logo] ···· [2 nav-menu] [3 dropdown] [4 header-cta] [5 hamburger hidden]
  Visual mobile:   [1 logo] ···· [3 dropdown] [5 hamburger] [2 nav-menu=overlay] [4 cta hidden]
  (2026-06-11 rework v2: image logo left, links right-centered, CTA pinned right)
*/

/* ── Logo — anchored left, pushes everything else right ── */
.logo {
    order: 1;
    flex-shrink: 0;
    margin-right: auto;
    display: flex;
    align-items: center;
}
.logo .logo-text {
    text-decoration: none;
    transition: opacity var(--transition-fast);
}
.logo .logo-text:hover {
    opacity: 0.85;
}

/* ── Nav link list — right-centered, ahead of the pill + CTA group ── */
.nav-menu {
    order: 2;
    display: flex;
    align-items: center;
    gap: 0;                          /* spacing handled per-link via padding */
    list-style: none;
    margin-right: var(--space-2);
}

/* Desktop Shop Now — right of the location pill */
.header-cta {
    order: 4;
    flex-shrink: 0;
    margin-left: var(--space-3);
    padding: 0.625rem 1.375rem;
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    font-weight: 700;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
/* The overlay copy of Shop Now never shows on desktop */
.nav-menu li.nav-cta-mobile { display: none; }
.nav-menu li {
    display: flex;
    align-items: center;
}
.nav-menu li a {
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-dark-warm-gray);
    padding: 0 0.875rem;             /* 14px horizontal breathing room */
    height: 80px;                    /* full-height hit area — matches nav */
    border-bottom: 3px solid transparent;
    border-top: 3px solid transparent;  /* top prevents vertical jump */
    letter-spacing: 0.01em;
    white-space: nowrap;
    transition:
        color var(--transition-fast),
        border-color var(--transition-fast);
}
.nav-menu li a:hover {
    color: var(--color-red-orange);
    border-bottom-color: var(--color-red-orange);
}
.nav-menu li a.active {
    color: var(--color-red-orange);
    border-bottom-color: var(--color-red-orange);
    font-weight: 700;
}
/* Shop Now CTA pill — separate from link styles */
.nav-menu li a.btn-primary {
    height: auto;                    /* pills have their own padding */
    padding: 0.625rem 1.375rem;
    border-radius: var(--radius-sm);
    border-bottom: none;
    border-top: none;
    font-size: 0.88rem;
    font-weight: 700;
    margin-left: 1rem;              /* extra breathing room before CTA */
    white-space: nowrap;
    color: var(--color-white);       /* override .nav-menu li a's dark color */
}
.nav-menu li a.btn-primary:hover,
.nav-menu li a.btn-primary:focus-visible {
    color: var(--color-white);
    border-bottom-color: transparent; /* prevent underline rule from showing */
}

/* ── Mobile hamburger — hidden on desktop ── */
.mobile-menu-toggle {
    order: 5;
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 12px 10px;              /* >=44x44 tap target (WCAG 2.5.5) */
    margin-left: var(--space-2);
    flex-shrink: 0;
}
.mobile-menu-toggle span {
    display: block;
    width: 26px;
    height: 2.5px;
    background-color: var(--color-dark-warm-gray);
    border-radius: 2px;
    transition: var(--transition-medium);
}
.mobile-menu-toggle.is-active span:nth-child(1) {
    transform: translateY(7.5px) rotate(45deg);
}
.mobile-menu-toggle.is-active span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
.mobile-menu-toggle.is-active span:nth-child(3) {
    transform: translateY(-7.5px) rotate(-45deg);
}


/* ============================================================
   7. Location Dropdown (in-header)
   ============================================================ */
.location-dropdown {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    order: 3;
    margin-left: var(--space-2);
}

/* ── Toggle Button ── */
.location-dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--color-white);
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 9px 14px;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.95rem;              /* B3: bumped from 0.9rem for legibility */
    font-weight: 600;
    color: var(--color-dark-warm-gray);
    transition:
        border-color  var(--transition-fast),
        box-shadow    var(--transition-fast),
        background-color var(--transition-fast);
    box-shadow: var(--shadow-xs);
    line-height: 1.3;
}
.location-dropdown-toggle:hover {
    border-color: var(--color-red-orange);
    background-color: #FFF8EB;
    box-shadow: 0 2px 10px rgba(241, 90, 34, 0.15);
}
.location-dropdown-toggle:focus-visible {
    outline: none;
    border-color: var(--color-red-orange);
    box-shadow: 0 0 0 3px rgba(241, 90, 34, 0.14);
}
.location-dropdown-toggle[aria-expanded="true"] {
    border-color: var(--color-red-orange);
    background-color: #FFF8EB;
    box-shadow: 0 2px 10px rgba(241, 90, 34, 0.2);
}
.location-dropdown-toggle[aria-expanded="true"] .dropdown-arrow {
    transform: rotate(180deg);
}

/* Pin icon */
.location-dropdown-toggle svg:first-child {
    color: var(--color-red-orange);
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

/* Text label */
.location-dropdown-text {
    white-space: nowrap;
    color: var(--color-dark-warm-gray);
}

/* Chevron */
.dropdown-arrow {
    color: var(--text-muted);
    transition: transform var(--transition-medium);
    flex-shrink: 0;
    width: 14px;
    height: 14px;
}

/* ── Dropdown Menu ── */
.location-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: var(--color-white);
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xl);
    min-width: 240px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition:
        opacity    var(--transition-medium),
        transform  var(--transition-medium),
        visibility var(--transition-medium);
    z-index: 1100;
    overflow: hidden;
}
.location-dropdown-toggle[aria-expanded="true"] + .location-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* ── Menu Items ── */
.location-dropdown-item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    background: var(--color-white);
    border: none;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    font-family: var(--font-body);
    transition: background-color var(--transition-fast);
    text-align: left;
}
.location-dropdown-item:last-child { border-bottom: none; }
.location-dropdown-item:hover   { background-color: var(--color-cream); }
.location-dropdown-item:focus-visible {
    outline: none;
    background-color: var(--color-cream);
    box-shadow: inset 0 0 0 2px rgba(241, 90, 34, 0.3);
}
.location-dropdown-item.active  { background-color: #FFF8EB; }

/* Item content block */
.location-item-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}
.location-item-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-dark-warm-gray);
    letter-spacing: 0.01em;
}
.location-item-detail {
    font-size: 0.74rem;
    font-weight: 500;
    color: var(--text-muted);
}

/* Checkmark icon (active selection) */
.location-check {
    color: var(--color-red-orange);
    flex-shrink: 0;
    opacity: 0;
    transform: scale(0.75);
    transition:
        opacity var(--transition-fast),
        transform var(--transition-fast);
    width: 16px;
    height: 16px;
}
.location-dropdown-item.active .location-check {
    opacity: 1;
    transform: scale(1);
}

/* Dropdown fade-in keyframe (referenced by transitions above; reserved for future use) */
@keyframes dropdownFadeIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* ============================================================
   9. Hero — Homepage
   ============================================================ */
.hero {
    position: relative;
    min-height: 88vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(150deg, var(--color-cream) 0%, #F0E8D8 100%);
    overflow: hidden;
    padding: var(--section-py-desktop) var(--space-3);
}

/* Decorative ambient radials */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 10% 20%, rgba(241, 90, 34, 0.07) 0%, transparent 50%),
        radial-gradient(circle at 90% 80%, rgba(248, 150, 38, 0.07) 0%, transparent 50%);
    pointer-events: none;
}

.hero-background {
    position: absolute;
    inset: 0;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='40' fill='%23F15A22'/%3E%3C/svg%3E");
    background-size: 180px 180px;
    z-index: 0;
}

.hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 880px;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background-color: var(--color-red-orange);
    color: var(--color-white);
    padding: 0.45rem 1.25rem;
    border-radius: var(--radius-pill);
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: var(--space-3);
    box-shadow: 0 2px 8px rgba(241, 90, 34, 0.38);
}

.hero h1 {
    margin-bottom: var(--space-3);
    color: var(--color-dark-warm-gray);
}
.hero h1 .accent {
    color: var(--color-red-orange);
    display: block;
}

.hero-subtitle {
    font-size: clamp(1.05rem, 2vw, 1.2rem);
    color: var(--text-muted);
    margin-bottom: var(--space-5);
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.75;
}

.hero-cta {
    display: flex;
    gap: var(--space-2);
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: var(--space-5);
}

.hero-info {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    flex-wrap: wrap;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-muted);
}
.info-item svg { color: var(--color-red-orange); flex-shrink: 0; }


/* ============================================================
   10. Welcome / Two-Column Split
   ============================================================ */
.welcome-section {
    padding: var(--section-py-desktop) 0;
    background-color: var(--bg-white);
}

.welcome-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-7);
    align-items: center;
}

.welcome-content h2 { margin-bottom: var(--space-1); }
.welcome-content h3 {
    color: var(--color-rust);
    font-size: 1.15rem;
    font-weight: 600;
    font-family: var(--font-body);
    letter-spacing: 0;
    margin-bottom: var(--space-3);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
    margin-top: var(--space-5);
}

.stat-item {
    text-align: center;
    padding: var(--space-3);
    background-color: var(--color-cream);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}
.stat-item:hover {
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}

.stat-number {
    display: block;
    font-size: 2.25rem;
    font-weight: 900;
    color: var(--color-red-orange);
    font-family: var(--font-heading);
    line-height: 1;
}
.stat-label {
    display: block;
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 0.4rem;
}

.welcome-image {
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-placeholder {
    width: 100%;
    height: 400px;
    background-color: var(--color-cream);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--color-light-warm-gray);
}


/* ============================================================
   11. Mission Section
   ============================================================ */
.mission-section {
    padding: var(--section-py-desktop) 0;
    background: var(--bg-subtle);
}

.mission-content {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}
.mission-content h2 { margin-bottom: var(--space-3); }
.mission-content .large-text {
    font-weight: 600;
    color: var(--color-rust);
    margin-bottom: var(--space-3);
}


/* ============================================================
   12. Experience Section (image + content cards)
   ============================================================ */
.experience-section {
    background: linear-gradient(135deg, var(--color-cream) 0%, var(--color-white) 100%);
    padding: var(--section-py-desktop) 0;
}

.experience-section .section-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto var(--space-6);
}

.experience-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

/* Image card */
.experience-image {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition:
        transform var(--transition-medium),
        box-shadow var(--transition-medium);
}
.experience-image:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}
.experience-image img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    display: block;
    transition: transform var(--transition-slow);
}
.experience-image:hover img {
    transform: scale(1.03);
}

/* Text/content card */
.experience-content {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-5);
    background: var(--color-white);
    border: 1px solid var(--border-color);
}
.experience-content h3 {
    color: var(--color-rust);
    font-size: 1.75rem;
    font-family: var(--font-heading);
    margin-bottom: var(--space-2);
    line-height: 1.25;
}
.experience-content p {
    color: var(--color-dark-warm-gray);
    margin-bottom: var(--space-3);
    line-height: 1.68;
    font-size: 1rem;
}
.experience-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.experience-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    color: var(--color-dark-warm-gray);
    font-size: 0.97rem;
    font-weight: 500;
}
.experience-list li:last-child { margin-bottom: 0; }
.experience-list li svg { flex-shrink: 0; color: var(--color-red-orange); }


/* ============================================================
   13. Welcome & Delivery Image Treatments
   ============================================================ */
.welcome-image img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    display: block;
    transition: transform var(--transition-medium), box-shadow var(--transition-medium);
}
.welcome-image img:hover {
    transform: scale(1.02);
    box-shadow: var(--shadow-lg);
}

.delivery-image img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    display: block;
    transition: transform var(--transition-medium);
}
.delivery-image img:hover {
    transform: scale(1.02);
}


/* ============================================================
   14. Products Section — Icon Grid
   ============================================================ */
.products-section {
    padding: var(--section-py-desktop) 0;
    background-color: var(--bg-white);
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-5);
}

.product-card {
    background-color: var(--color-cream);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    text-align: center;
    transition:
        transform var(--transition-medium),
        box-shadow var(--transition-medium),
        border-color var(--transition-medium);
    border: 2px solid transparent;
    box-shadow: var(--shadow-sm);
}
.product-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-red-orange);
}

.product-icon {
    width: 96px;
    height: 96px;
    margin: 0 auto var(--space-3);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    border-radius: 50%;
    color: var(--color-red-orange);
    box-shadow: 0 2px 12px rgba(0,0,0,0.10);
    overflow: hidden;
}
.product-icon img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    transition: transform var(--transition-medium);
    display: block;
}
.product-card:hover .product-icon img { transform: scale(1.1); }
.product-card h3 { color: var(--color-dark-warm-gray); margin-bottom: var(--space-1); }
.product-card p  { color: var(--text-muted); font-size: 0.95rem; }


/* ============================================================
   15. Delivery Section — Homepage
   ============================================================ */
.delivery-section {
    padding: var(--section-py-desktop) 0;
    background-color: var(--bg-subtle);
}

.delivery-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-7);
    align-items: center;
}

.delivery-content h2  { margin-bottom: var(--space-1); }
.delivery-content h3  {
    color: var(--color-rust);
    font-size: 1.05rem;
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: 0;
    margin-bottom: var(--space-3);
}

.delivery-features { margin: var(--space-4) 0; }
.delivery-features li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
    font-size: 1rem;
}
.delivery-features svg {
    color: var(--color-red-orange);
    flex-shrink: 0;
    margin-top: 2px;
}


/* ============================================================
   16. Locations Section — Homepage
   ============================================================ */
.locations-section {
    padding: var(--section-py-desktop) 0;
    background-color: var(--bg-white);
}
.locations-section h2 {
    text-align: center;
    margin-bottom: var(--space-2);
}

.locations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: var(--space-5);
    margin: var(--space-5) 0;
}

.location-card {
    background-color: var(--color-cream);
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    border: 2px solid transparent;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-medium), transform var(--transition-medium);
}
.location-card.featured {
    border-color: var(--color-red-orange);
    background: linear-gradient(145deg, var(--color-cream), #F5EDD8);
}
.location-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}
/* Storefront photo bleeding to the edges at the top of a padded location card.
   Extra 2px on each side covers the card's 2px border so corners nest cleanly. */
.location-card-photo {
    display: block;
    width: calc(100% + 2 * var(--space-5) + 4px);
    max-width: none;
    margin: calc(-1 * var(--space-5) - 2px) calc(-1 * var(--space-5) - 2px) var(--space-4);
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.location-card h3 {
    color: var(--color-red-orange);
    margin-bottom: var(--space-3);
    font-size: 1.6rem;
}

.location-details  { margin-bottom: var(--space-4); }
.detail-item {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    align-items: flex-start;
}
.detail-item svg         { color: var(--color-red-orange); flex-shrink: 0; margin-top: 2px; }
.detail-item strong      { display: block; margin-bottom: 0.2rem; }
.detail-item a           { color: var(--color-red-orange); text-decoration: underline; }

.location-cta {
    display: flex;
    gap: var(--space-1);
    flex-wrap: wrap;
}
.location-cta .btn-primary,
.location-cta .btn-secondary {
    flex: 1;
    min-width: 140px;
    text-align: center;
    justify-content: center;
}

/* Areas list */
.areas-served        { margin-top: var(--space-7); text-align: center; }
.areas-served h3     { margin-bottom: var(--space-4); }
.areas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-1);
    max-width: 1000px;
    margin: 0 auto;
}
.area-item {
    background-color: var(--color-cream);
    padding: 0.625rem var(--space-3);
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-muted);
    transition:
        background-color var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast);
    cursor: pointer;
    border: 1px solid var(--border-color);
    text-align: center;
}
.area-item:hover {
    background-color: var(--color-red-orange);
    color: var(--color-white);
    border-color: var(--color-red-orange);
    transform: translateY(-2px);
}
.area-item.view-all-btn {
    background-color: var(--color-red-orange);
    color: var(--color-white);
    border-color: var(--color-red-orange);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.area-item.view-all-btn:hover {
    background-color: var(--color-rust);
    border-color: var(--color-rust);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(241, 90, 34, 0.3);
}


/* ============================================================
   17. Areas Hero — Location Pages
   ============================================================ */
.areas-hero {
    background: linear-gradient(150deg, var(--color-cream) 0%, #EDE5D5 100%);
    padding: var(--section-py-desktop) 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.areas-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 15% 30%, rgba(241, 90, 34, 0.07) 0%, transparent 45%),
        radial-gradient(circle at 85% 70%, rgba(248, 150, 38, 0.06) 0%, transparent 45%);
    pointer-events: none;
}

/* Breadcrumb */
.breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-bottom: var(--space-3);
    font-size: 0.9rem;               /* D4: sentence case, slightly larger */
    font-weight: 600;
    color: var(--text-muted);
    position: relative;
    z-index: 1;
}
.breadcrumb a {
    color: var(--text-muted);
    transition: color var(--transition-fast);
}
.breadcrumb a:hover { color: var(--color-red-orange); }
.breadcrumb .separator {
    color: var(--text-muted);
    opacity: 0.65;
    user-select: none;
}

.areas-hero h1 {
    max-width: 860px;
    margin: 0 auto var(--space-3);
    position: relative;
    z-index: 1;
}

/* Override hero-subtitle for this page's hero context */
.areas-hero .hero-subtitle {
    max-width: 720px;
    margin: 0 auto var(--space-5);
    font-size: 1.1rem;
    color: var(--text-muted);
    line-height: 1.78;
    position: relative;
    z-index: 1;
}

/* Hero stats row */
.hero-stats {
    display: flex;
    justify-content: center;
    gap: var(--space-6);
    flex-wrap: wrap;
    margin-top: var(--space-5);
    margin-bottom: var(--space-5);   /* C2: breathing room before CTA pair */
    position: relative;
    z-index: 1;
}
.hero-stats .stat { text-align: center; }

/* These override the global .stat-number / .stat-label for the hero context */
.hero-stats .stat-number {
    display: block;
    font-size: 3rem;
    font-weight: 900;
    color: var(--color-red-orange);
    font-family: var(--font-heading);
    line-height: 1;
}
.hero-stats .stat-label {
    display: block;
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 0.5rem;
}


/* ============================================================
   18. Primary Location Block
   ============================================================ */
.primary-location {
    padding: var(--section-py-desktop) 0;
    background-color: var(--bg-white);
}
.secondary-location {
    background-color: var(--bg-subtle);
}

.primary-location h2 {
    text-align: center;
    margin-bottom: var(--space-6);
}

.location-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    align-items: start;
}

.location-content h3 {
    color: var(--color-red-orange);
    font-size: 1.3rem;
    font-family: var(--font-body);
    font-weight: 700;
    margin-bottom: var(--space-3);
    letter-spacing: 0;
}
/* Storefront photo at the top of a contact-page location column */
.location-content-photo {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
    box-shadow: var(--shadow-sm);
}

.location-description {
    font-size: 1.05rem;
    line-height: 1.78;
    color: var(--text-muted);
    margin-bottom: var(--space-4);
}

/* Feature list inside location panels */
.location-features {
    display: grid;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
}
.feature {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background-color: var(--color-cream);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    align-items: flex-start;
    transition:
        box-shadow var(--transition-fast),
        transform var(--transition-fast);
}
.feature:hover {
    box-shadow: var(--shadow-sm);
    transform: translateX(4px);
}
.feature svg    { color: var(--color-red-orange); flex-shrink: 0; }
.feature strong { display: block; font-size: 1rem; color: var(--color-dark-warm-gray); margin-bottom: 0.2rem; }
.feature p      { font-size: 0.9rem; color: var(--text-muted); margin: 0; }

/* Map embed */
.location-map iframe {
    width: 100%;
    min-height: 380px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    border: 0;
}
.location-map .map-placeholder {
    width: 100%;
    height: 380px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}


/* ============================================================
   19. Communities Served — County Tabs
   ============================================================ */
.communities-served {
    padding: var(--section-py-desktop) 0;
    background: linear-gradient(180deg, var(--color-cream) 0%, #EDE5D5 100%);
}

.communities-served .section-header {
    text-align: center;
    max-width: 860px;
    margin: 0 auto var(--space-6);
}
.communities-served .section-header h2 { margin-bottom: var(--space-2); }
.communities-served .section-header p {
    font-size: 1.05rem;
    color: var(--text-muted);
    line-height: 1.75;
}
.communities-served .section-header code {
    font-size: 0.84rem;
    background: rgba(241, 90, 34, 0.08);
    color: var(--color-rust);
    padding: 0.15em 0.45em;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
}

/* County tab panel description line */
.county-description {
    font-size: 1.05rem;
    color: var(--text-muted);
    margin-bottom: var(--space-5);
    margin-top: var(--space-2);
    line-height: 1.72;
}

/* Tabs */
.county-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin-bottom: var(--space-5);
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 0;
}
.county-tab-btn {
    background: none;
    border: none;
    padding: 0.8rem 1.25rem;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition:
        color var(--transition-fast),
        border-color var(--transition-fast),
        background-color var(--transition-fast);
    white-space: nowrap;
    letter-spacing: 0.015em;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.county-tab-btn:hover {
    color: var(--color-red-orange);
    background-color: rgba(241, 90, 34, 0.04);
}
.county-tab-btn.active {
    color: var(--color-red-orange);
    border-bottom-color: var(--color-red-orange);
    font-weight: 700;
    background-color: rgba(241, 90, 34, 0.05);
}

.county-tab-panel { display: none; }
.county-tab-panel.active { display: block; }


/* ============================================================
   20. Community Cards
   ============================================================ */
.communities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.community-card {
    background-color: var(--bg-white);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    border: 1.5px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    transition:
        transform     var(--transition-medium),
        box-shadow    var(--transition-medium),
        border-color  var(--transition-medium);
    display: flex;
    flex-direction: column;
}
.community-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-red-orange);
}
.community-card.featured {
    border-color: var(--color-red-orange);
    background: linear-gradient(145deg, var(--bg-white), var(--color-cream));
    box-shadow: var(--shadow-md);
}
.community-card.featured:hover {
    box-shadow: var(--shadow-xl);
}

/* Card icon (emoji) */
.community-icon {
    font-size: 2rem;
    margin-bottom: var(--space-2);
    line-height: 1;
}

/* Badge row */
.card-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: var(--space-2);
}

.community-card h4 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-dark-warm-gray);
    margin-bottom: 0.3rem;
}

/* Distance display */
.distance {
    font-size: 0.82rem;
    color: var(--color-marigold);
    font-weight: 700;
    margin-bottom: var(--space-1);
}
.distance-pill {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--color-marigold);
    margin-bottom: var(--space-1);
}
.distance-pill::before { content: "📍 "; }

/* Card body text */
.community-card > p {
    font-size: 0.92rem;
    color: var(--text-muted);
    line-height: 1.65;
    margin-bottom: var(--space-2);
    flex-grow: 0;
}

/* Feature list inside card */
.community-features {
    list-style: none;
    margin: var(--space-1) 0 var(--space-2);
}
.community-features li {
    font-size: 0.88rem;
    color: var(--text-muted);
    padding: 0.25rem 0;
}

/* Card CTA link */
.community-link {
    color: var(--color-red-orange);
    font-weight: 700;
    font-size: 0.92rem;
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    transition:
        color var(--transition-fast),
        transform var(--transition-fast);
    padding-top: var(--space-1);
    border-top: 1px solid var(--border-color);
}
.community-link:hover {
    color: var(--color-rust);
    transform: translateX(4px);
}


/* ============================================================
   21. Store & Page-Type Badges
   ============================================================ */
.store-badge,
.page-type-badge {
    display: inline-block;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.055em;
    padding: 0.2rem 0.55rem;
    border-radius: var(--radius-pill);
    line-height: 1.4;
}

/* Store identity */
.store-somerset { background: #FEF3C7; color: #92400E; }
.store-maywood  { background: #EDE9FE; color: #5B21B6; }

/* Page type */
.badge-dispensary { background: #DCFCE7; color: #15803D; }
.badge-delivery   { background: #DBEAFE; color: #1D4ED8; }

/* Learn topics */
.badge-laws     { background: #E2E8F0; color: #334155; }
.badge-wellness { background: #CCFBF1; color: #0F766E; }
.badge-loyalty  { background: #FFEDD5; color: #C2410C; }


/* ============================================================
   22. Tag Cloud (extra towns)
   ============================================================ */
.more-communities {
    background-color: var(--bg-white);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    margin-top: var(--space-3);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-xs);
}
.more-communities h5 {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-dark-warm-gray);
    margin-bottom: var(--space-3);
    font-family: var(--font-body);
    text-transform: uppercase;
    letter-spacing: 0.09em;
}
.community-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}
.tag {
    display: inline-block;
    padding: 0.45rem 1rem;
    background-color: var(--color-cream);
    border-radius: var(--radius-pill);
    font-size: 0.84rem;
    color: var(--text-muted);
    font-weight: 600;
    border: 1px solid var(--border-color);
    transition:
        background-color var(--transition-fast),
        color            var(--transition-fast),
        border-color     var(--transition-fast),
        transform        var(--transition-fast);
    cursor: pointer;
}
.tag:hover {
    background-color: var(--color-red-orange);
    color: var(--color-white);
    border-color: var(--color-red-orange);
    transform: translateY(-2px);
}


/* ============================================================
   23. Delivery Service Section
   ============================================================ */
.delivery-service {
    padding: var(--section-py-desktop) 0;
    background-color: var(--bg-white);
}
.delivery-service .delivery-content {
    max-width: 880px;
    margin: 0 auto;
    text-align: center;
}
.delivery-service .delivery-content h2 { margin-bottom: var(--space-3); }

.lead {
    font-size: 1.15rem;
    color: var(--text-muted);
    line-height: 1.78;
    margin-bottom: var(--space-5);
}
.delivery-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-3);
    margin: var(--space-5) 0;
}
.delivery-feature {
    background-color: var(--color-cream);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    text-align: center;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-xs);
    transition:
        box-shadow var(--transition-fast),
        transform var(--transition-fast);
}
.delivery-feature:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
}
.feature-icon {
    font-size: 2.5rem;
    margin-bottom: var(--space-2);
    line-height: 1;
}
.feature-icon img {
    width: 44px;
    height: 44px;
    display: block;
    margin: 0 auto var(--space-2);
}
.delivery-feature h4 {
    color: var(--color-dark-warm-gray);
    margin-bottom: var(--space-1);
    font-size: 1.05rem;
}
.delivery-feature p {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin: 0;
}
.delivery-cta {
    display: flex;
    gap: var(--space-2);
    justify-content: center;
    flex-wrap: wrap;
    margin-top: var(--space-5);
}


/* ============================================================
   24. Why Choose Section
   ============================================================ */
.why-choose {
    padding: var(--section-py-desktop) 0;
    background: linear-gradient(160deg, #F5F0E8 0%, var(--color-cream) 100%);
}
.why-choose h2 {
    text-align: center;
    margin-bottom: var(--space-6);
}
.reasons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-4);             /* C3: was space-3, tight on tablet 2-col layout */
}
.reason-card {
    background-color: var(--bg-white);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    text-align: center;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    transition:
        transform var(--transition-medium),
        box-shadow var(--transition-medium);
}
.reason-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}
.reason-icon {
    font-size: 2.5rem;             /* legacy emoji sizing (main-page bodies) */
    margin-bottom: var(--space-2);
    line-height: 1;
}
/* Brand stroke-line SVG icons (town templates = inline svg;
   main-page bodies = <img> referencing /images/icon-*.svg) */
.reason-icon svg {
    width: 44px;
    height: 44px;
    color: var(--color-red-orange);
}
.reason-icon img {
    display: block;
    width: 44px;
    height: 44px;
    margin: 0 auto;
}
.reason-card h4 {
    color: var(--color-dark-warm-gray);
    margin-bottom: var(--space-1);
}
.reason-card p {
    font-size: 0.92rem;
    color: var(--text-muted);
    margin: 0;
}

/* ── Social proof / Google reviews (main pages) ── */
.social-proof {
    padding: var(--space-6) 0;
    background-color: var(--bg-subtle);
    overflow: hidden;
}
.social-proof-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}
.social-proof-intro { max-width: 560px; }
.social-proof-intro h2 { margin-bottom: var(--space-1); }
.social-proof-sub {
    margin: 0;
    color: var(--text-muted);
    font-size: 1.05rem;
}

/* Google rating badge */
.google-rating-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    background-color: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-4);
    box-shadow: var(--shadow-sm);
    text-align: center;
}
.grb-label { font-size: 0.85rem; font-weight: 600; color: var(--text-muted); }
.grb-row { display: flex; align-items: center; gap: 0.5rem; }
.grb-score {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    color: var(--color-rust);
}
.grb-stars { color: var(--color-marigold); font-size: 1.05rem; letter-spacing: 1px; }
.grb-link { font-size: 0.82rem; font-weight: 600; color: var(--color-red-orange); }

/* Two-row auto-scrolling marquee (full-bleed) */
.reviews-marquee {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.reviews-row {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.reviews-track {
    display: flex;
    gap: var(--space-4);
    width: max-content;
    animation: marquee-ltr 70s linear infinite;
}
.reviews-track--reverse { animation-name: marquee-rtl; }
.reviews-marquee:hover .reviews-track { animation-play-state: paused; }
@keyframes marquee-ltr { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes marquee-rtl { from { transform: translateX(-50%); } to { transform: translateX(0); } }

.review-card {
    flex: 0 0 clamp(258px, 78vw, 336px);
    background-color: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.review-quote {
    font-family: var(--font-heading);
    font-size: 3rem;
    line-height: 0.5;
    height: 1.1rem;
    color: var(--color-light-warm-gray);
}
.review-text {
    margin: 0;
    flex: 1 1 auto;
    color: var(--color-dark-warm-gray);
    font-size: 0.97rem;
    line-height: 1.6;
}
.review-author { display: flex; align-items: center; gap: 0.7rem; }
.review-avatar {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-red-orange), var(--color-rust));
    color: var(--color-white);
    font-weight: 700;
    font-size: 0.88rem;
}
.review-author-meta { display: flex; flex-direction: column; line-height: 1.25; }
.review-name { font-weight: 700; color: var(--color-dark-warm-gray); font-size: 0.95rem; }
.review-role { font-size: 0.82rem; color: var(--text-muted); }

@media (prefers-reduced-motion: reduce) {
    .reviews-track { animation: none; }
    .reviews-row { overflow-x: auto; }
}
@media (max-width: 640px) {
    .social-proof-top { flex-direction: column; align-items: flex-start; }
}


/* ============================================================
   25. FAQ Accordion (smooth transitions)
   ============================================================ */
.faq-section {
    padding: var(--section-py-desktop) 0;
    background-color: var(--bg-subtle);
}
.faq-section h2 {
    text-align: center;
    margin-bottom: var(--space-6);
}

.faq-grid {
    max-width: 860px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.faq-item {
    background-color: var(--bg-white);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
    border: 1px solid var(--border-color);
    transition:
        box-shadow var(--transition-fast),
        border-color var(--transition-fast);
}
.faq-item.active {
    box-shadow: var(--shadow-sm);
    border-color: rgba(241, 90, 34, 0.28);
}

.faq-question {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    font-size: 1.05rem;
    font-weight: 600;
    font-family: var(--font-body);
    color: var(--color-dark-warm-gray);
    background-color: var(--bg-white);
    transition:
        background-color var(--transition-fast),
        color var(--transition-fast);
    cursor: pointer;
    gap: var(--space-2);
}
.faq-question:hover { background-color: #FDF5E6; }
.faq-question[aria-expanded="true"] { color: var(--color-red-orange); }
.faq-question svg {
    flex-shrink: 0;
    color: var(--color-red-orange);
    transition: transform var(--transition-medium);
}
.faq-question[aria-expanded="true"] svg { transform: rotate(180deg); }

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-answer p {
    padding: 0 var(--space-4) var(--space-3);
    color: var(--text-muted);
    line-height: 1.78;
    font-size: 0.98rem;
}
.faq-item.active .faq-answer { max-height: 640px; }


/* ============================================================
   26. CTA Band
   ============================================================ */
.cta-section {
    padding: var(--section-py-desktop) 0;
    background: linear-gradient(135deg, var(--color-red-orange) 0%, var(--color-rust) 100%);
    color: var(--color-white);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.cta-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.08) 0%, transparent 60%);
    pointer-events: none;
}
.cta-content { position: relative; z-index: 1; }
.cta-content h2 {
    color: var(--color-white);
    margin-bottom: var(--space-3);
}
.cta-content .accent-text { color: var(--color-marigold); }
.cta-content p {
    font-size: 1.2rem;
    margin-bottom: var(--space-5);
    opacity: 0.92;
}
.cta-store-cards {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    flex-wrap: wrap;
}
.cta-store-card {
    background: var(--color-cream);
    border-radius: var(--radius-xl);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 1 260px;
    max-width: 380px;
    color: var(--color-dark-warm-gray);
}
.cta-store-card-photo {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}
.cta-store-card-body {
    padding: var(--space-4) var(--space-5);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    box-sizing: border-box;
}
.cta-store-card h4 {
    color: var(--color-dark-warm-gray);
    margin: 0;
    font-size: 1.05rem;
}
.cta-buttons {
    display: flex;
    gap: var(--space-2);
    justify-content: center;
    flex-wrap: wrap;
}


/* ============================================================
   27. Contact Section
   ============================================================ */
.contact-section {
    padding: var(--section-py-desktop) 0;
    background-color: var(--bg-white);
}
.contact-section h2 {
    text-align: center;
    margin-bottom: var(--space-6);
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-7);
}

.contact-info h3 {
    color: var(--color-red-orange);
    margin-bottom: var(--space-3);
}
.contact-details { margin-top: var(--space-4); }
.contact-item {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.contact-item svg    { color: var(--color-red-orange); flex-shrink: 0; }
.contact-item strong { display: block; color: var(--color-dark-warm-gray); margin-bottom: 0.2rem; }
.contact-item p      { color: var(--text-muted); margin: 0; }

.contact-form {
    background-color: var(--color-cream);
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

.form-group { margin-bottom: var(--space-3); }
.form-group label {
    display: block;
    font-weight: 700;
    margin-bottom: 0.5rem;
    font-size: 0.88rem;
    color: var(--color-dark-warm-gray);
    text-transform: uppercase;
    letter-spacing: 0.055em;
}
.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.875rem var(--space-2);
    border: 1.5px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 1rem;
    background-color: var(--bg-white);
    color: var(--text-body);
    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast);
}
.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-red-orange);
    box-shadow: 0 0 0 3px rgba(241, 90, 34, 0.12);
}
.contact-form .btn-primary {
    width: 100%;
    margin-top: var(--space-1);
    justify-content: center;
}


/* ============================================================
   28. Footer
   ============================================================ */
.site-footer {
    background-color: var(--color-dark-warm-gray);
    color: var(--color-light-warm-gray);
    padding: var(--space-8) 0 var(--space-4);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: var(--space-6);
    margin-bottom: var(--space-6);
}

.footer-col h4 {
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: var(--space-3);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
.footer-col p {
    font-size: 0.9rem;
    line-height: 1.75;
    color: var(--color-light-warm-gray);
}
.footer-col ul li { margin-bottom: 0.625rem; }
.footer-col a {
    color: var(--color-light-warm-gray);
    font-size: 0.9rem;
    transition: color var(--transition-fast);
}
.footer-col a:hover { color: var(--color-marigold); }

.license-info {
    font-size: 0.76rem;
    color: rgba(218, 213, 205, 0.7);  /* B1: was 0.5, fails AA */
    margin-top: var(--space-2);
}

.social-links {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-2);
}
.social-links a {
    width: 38px;
    height: 38px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-light-warm-gray);
    transition:
        background-color var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast);
}
.social-links a:hover {
    background-color: var(--color-red-orange);
    color: var(--color-white);
    transform: translateY(-3px);
}

.footer-bottom {
    border-top: 1px solid rgba(218, 213, 205, 0.14);
    padding-top: var(--space-3);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-size: 0.82rem;
    color: rgba(218, 213, 205, 0.75); /* B1: was 0.58, fails AA on legal copy */
}
.footer-bottom p { margin: 0; }
.disclaimer {
    font-size: 0.76rem;
    color: rgba(218, 213, 205, 0.7);  /* B1: was 0.42, fails AA */
}


/* ============================================================
   29. Location Switch Animation
   (migrated from legacy location-selector.css; consumed by
   location-manager.js when the active location changes.)
   ============================================================ */
.location-card.active-location {
    border: 3px solid var(--color-red-orange);
    box-shadow: 0 8px 28px rgba(241, 90, 34, 0.3);
    transform: scale(1.02);
    position: relative;
}
.location-card.active-location::before {
    content: '● CURRENTLY SELECTED';
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-red-orange);
    color: var(--color-white);
    padding: 4px 16px;
    border-radius: var(--radius-pill);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 1px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    font-family: var(--font-body);
}

@keyframes locationSwitch {
    from { opacity: 0.5; transform: translateY(-5px); }
    to   { opacity: 1;   transform: translateY(0); }
}

.hero,
.location-card {
    animation: locationSwitch 0.4s ease-out;
}


/* ============================================================
   30. Scroll-fade Entrance Animation
   ============================================================ */
.fade-in-up {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}
.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}


/* ============================================================
   31. Utility Classes
   ============================================================ */
.hidden  { display: none !important; }
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }

.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }


/* ============================================================
   31a. Back-to-Top Button
   Injected into <body> by js/main.js initBackToTop().
   ============================================================ */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background-color: var(--color-red-orange);
    color: var(--color-white);
    border: none;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity        var(--transition-medium),
        visibility     var(--transition-medium),
        background-color var(--transition-fast),
        transform      var(--transition-fast);
    z-index: 999;
    box-shadow: var(--shadow-md);
}
.back-to-top.visible {
    opacity: 1;
    visibility: visible;
}
.back-to-top:hover {
    background-color: var(--color-rust);
    transform: translateY(-5px);
}


/* ============================================================
   31b. Notification Toast
   Created by js/main.js showNotification(); used by contact form.
   ============================================================ */
.notification {
    position: fixed;
    top: 100px;
    right: 20px;
    padding: 1rem 1.5rem;
    background-color: var(--color-dark-warm-gray);
    color: var(--color-white);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    z-index: 9999;
    max-width: 400px;
    font-weight: 600;
    transform: translateX(420px);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.notification.visible {
    transform: translateX(0);
    opacity: 1;
}
.notification-success { background-color: var(--color-red-orange); }
.notification-error   { background-color: var(--color-rust); }
.notification-info    { background-color: var(--color-dark-warm-gray); }


/* ============================================================
   31c. Template-specific Utilities
   Added in Phase 4 to support the consolidated location-page
   templates without inline styles. Each replaces a style="..."
   attribute that was inline in the Genspark source pages.
   ============================================================ */

/* Skip-link (a11y) — hidden offscreen until focused */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 9999;
    padding: 0.5rem 1rem;
    background: var(--color-red-orange);
    color: var(--color-white);
    font-weight: 700;
    border-radius: 0 0 var(--radius-sm) 0;
    transition: left var(--transition-fast);
}
.skip-link:focus { left: 0; }

/* "Get directions" link under the location map iframe */
.map-directions-link {
    text-align: center;
    margin-top: 0.75rem;
    font-size: 1rem;                 /* D1: bumped from 0.9rem — important action */
}
.map-directions-link a {
    color: var(--color-red-orange);
    font-weight: 600;
    display: inline-block;
    padding: 8px 4px;                /* D1: give it real tap area */
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* CTA band disclaimer line */
.cta-section .cta-disclaimer {
    color: rgba(255, 255, 255, 0.75);
    margin-top: var(--space-3);
    font-size: 0.95rem;
}

/* Footer accent link (orange "view all areas →") */
.footer-col p .footer-link-accent {
    color: var(--color-red-orange);
    font-weight: 600;
}

/* Footer address element — normalize the address tag */
.footer-col address {
    font-style: normal;
    line-height: 1.8;
    margin-bottom: 0.625rem;
}

/* Nearby-towns internal link list (SEO link graph) */
.nearby-towns {
    list-style: none;
    margin: var(--space-2) 0 0;
    padding: 0;
    font-size: 0.85rem;
}
.nearby-towns li { margin-bottom: 0.4rem; }
.nearby-towns a {
    color: var(--color-marigold);    /* B4: was light-warm-gray, indistinguishable from body */
    text-decoration: underline;
    text-decoration-color: rgba(248, 150, 38, 0.45);
    transition: color var(--transition-fast);
}
.nearby-towns a:hover { color: var(--color-white); }
.nearby-towns .nearby-distance {
    color: rgba(218, 213, 205, 0.5);
    margin-left: 0.4rem;
}


/* ============================================================
   31d. Key Facts Block (Phase 6.5 — AIO/GEO)
   Semantic <dl> rendered as a 2-col card. Designed as a visible
   UX vCard AND as a high-density extractable summary for LLM
   crawlers + voice assistants (Speakable schema targets .key-facts).
   ============================================================ */
.key-facts-section {
    padding: var(--space-5) 0;
    background-color: var(--bg-page);
}

.key-facts {
    background-color: var(--bg-white);
    border: 1.5px solid var(--border-color);
    border-left: 4px solid var(--color-red-orange);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
    box-shadow: var(--shadow-sm);
    max-width: 880px;
    margin: 0 auto;
}

.key-facts-title {
    font-family: var(--font-body);   /* sans for utility heading */
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-rust);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: var(--space-2);
}

.key-facts-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-5);
    row-gap: var(--space-2);
    margin: 0;
}

.key-facts-list .kf-row {
    display: grid;
    grid-template-columns: minmax(140px, 35%) 1fr;
    gap: var(--space-2);
    align-items: baseline;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--border-color);
}
.key-facts-list .kf-row:last-child { border-bottom: none; }

.key-facts-list dt {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.key-facts-list dd {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-dark-warm-gray);
    line-height: 1.5;
}
.key-facts-list dd a {
    color: var(--color-red-orange);
    text-decoration: underline;
    text-underline-offset: 2px;
}


/* ============================================================
   31e. Verified Local-Entity Sections (Phase 6.6)
   Both .local-landmarks and .local-context are rendered ONLY when
   the generator's verification gates pass. When the data isn't
   verified, the generator emits an empty string and the entire
   section is absent from the DOM — there is no "empty state".
   ============================================================ */
.local-landmarks {
    padding: var(--section-py-desktop) 0;
    background-color: var(--bg-white);
}
.local-landmarks h2 {
    text-align: center;
    margin-bottom: var(--space-3);
}
.local-landmarks-lead {
    text-align: center;
    max-width: 760px;
    margin: 0 auto var(--space-6);
    font-size: 1.05rem;
    color: var(--text-muted);
    line-height: 1.7;
}

.landmarks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-4);
}

.landmark-card {
    background-color: var(--color-cream);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    transition:
        transform     var(--transition-medium),
        box-shadow    var(--transition-medium),
        border-color  var(--transition-medium);
}
.landmark-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-red-orange);
}

.landmark-name {
    font-size: 1.25rem;
    margin-bottom: var(--space-1);
    color: var(--color-dark-warm-gray);
    line-height: 1.25;
}
.landmark-name a {
    color: var(--color-rust);
    text-decoration: none;
}
.landmark-name a:hover {
    color: var(--color-red-orange);
    text-decoration: underline;
}

.landmark-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 var(--space-2);
    font-size: 0.78rem;
}
.landmark-meta .landmark-type,
.landmark-meta .landmark-distance {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    background-color: rgba(241, 90, 34, 0.08);
    color: var(--color-rust);
    border-radius: var(--radius-pill);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.landmark-description {
    margin: 0 0 var(--space-2);
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--color-dark-warm-gray);
}

.landmark-refs {
    margin: 0;
    font-size: 0.78rem;
    color: var(--text-muted);
    padding-top: var(--space-2);
    border-top: 1px solid var(--border-color);
}
.landmark-refs a {
    color: var(--color-red-orange);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 600;
}

/* ── Local context (verified facts about the area) ── */
.local-context {
    padding: var(--space-6) 0;
    background-color: var(--bg-subtle);
}
.local-context h2 {
    text-align: center;
    font-size: clamp(1.4rem, 3vw, 2rem);
    margin-bottom: var(--space-4);
}
.local-context-list {
    list-style: none;
    max-width: 820px;
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.local-context-list li {
    background-color: var(--bg-white);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--color-marigold);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.local-context-list .lc-fact {
    font-size: 1rem;
    line-height: 1.55;
    color: var(--color-dark-warm-gray);
}
.local-context-list .lc-source {
    font-size: 0.78rem;
    color: var(--text-muted);
}
.local-context-list .lc-source a {
    color: var(--color-red-orange);
    text-decoration: underline;
    text-underline-offset: 2px;
}


/* ============================================================
   32. Responsive — Tablet (≤ 968px)
   ============================================================ */
@media (max-width: 968px) {
    :root {
        --section-py-desktop: var(--section-py-tablet);
    }

    .logo-image { height: 44px; }
    .logo-text { font-size: 1.4rem; }

    /* Shop Now lives in the overlay on mobile, not the header bar */
    .header-cta { display: none; }
    .nav-menu li.nav-cta-mobile { display: flex; }

    /* Fullscreen slide-down nav overlay */
    .nav-menu {
        display: none;
        position: fixed;
        top: 80px;                   /* matches nav height */
        left: 0;
        width: 100%;
        height: calc(100vh - 80px);
        background-color: var(--bg-white);
        flex-direction: column;
        align-items: stretch;
        padding: var(--space-3) var(--space-4);
        gap: 0;
        overflow-y: auto;
        box-shadow: var(--shadow-lg);
        z-index: 999;
        border-top: 1px solid var(--border-color);
    }
    .nav-menu.active { display: flex; }
    .nav-menu li { width: 100%; }
    .nav-menu li a {
        display: flex;
        align-items: center;
        height: auto;
        padding: 0.875rem 0;
        font-size: 1.05rem;
        font-weight: 600;
        border-top: none;
        border-bottom: 1px solid var(--border-color);
        border-left: 3px solid transparent;
        padding-left: var(--space-2);
        transition:
            color var(--transition-fast),
            border-color var(--transition-fast),
            background-color var(--transition-fast);
    }
    .nav-menu li a:hover {
        color: var(--color-red-orange);
        border-left-color: var(--color-red-orange);
        background-color: rgba(241, 90, 34, 0.04);
        border-bottom-color: var(--border-color);
    }
    .nav-menu li a.active {
        color: var(--color-red-orange);
        border-left-color: var(--color-red-orange);
        border-bottom-color: var(--border-color);
        font-weight: 700;
    }
    /* Shop Now in mobile menu */
    .nav-menu li a.btn-primary {
        margin: var(--space-3) 0 var(--space-1);
        width: 100%;
        text-align: center;
        justify-content: center;
        padding: 0.9rem var(--space-3);
        border-left: none;
        border-bottom: none;
        border-radius: var(--radius-sm);
        height: auto;
        margin-left: 0;
    }

    .mobile-menu-toggle { display: flex; }

    /* Dropdown: nav-menu hidden overlay — dropdown sits left of hamburger */
    .location-dropdown {
        margin-left: auto;
        margin-right: 0;
    }
    .location-dropdown-menu { right: 0; left: auto; }

    .welcome-grid,
    .delivery-grid,
    .contact-grid { grid-template-columns: 1fr; }

    .stats-grid { grid-template-columns: repeat(3, 1fr); }

    .locations-grid { grid-template-columns: 1fr; }

    .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-4); }

    .hero-cta,
    .cta-buttons { flex-direction: column; align-items: center; }

    .hero-info { flex-direction: column; align-items: center; gap: var(--space-2); }

    /* Areas-served / location-page block */
    .location-grid    { grid-template-columns: 1fr; }
    .communities-grid { grid-template-columns: 1fr 1fr; }
    .hero-stats       { gap: var(--space-4); }
    .location-cta     { flex-direction: column; }
    .location-cta .btn-primary,
    .location-cta .btn-secondary { width: 100%; justify-content: center; }
    .county-tab-btn   { padding: 0.65rem 0.9rem; font-size: 0.82rem; }
}


/* ============================================================
   33. Responsive — Mid (≤ 768px)
   ============================================================ */
@media (max-width: 768px) {
    .location-dropdown-toggle { padding: 8px 12px; font-size: 0.85rem; }
    .location-dropdown-menu   { min-width: 210px; }
    .location-item-name       { font-size: 0.9rem; }
    .location-item-detail     { font-size: 0.7rem; }

    /* Experience section */
    .experience-section { padding: var(--section-py-tablet) 0; }
    .experience-grid    { grid-template-columns: 1fr; gap: var(--space-3); }
    .experience-image img { height: 300px; }
    .experience-content { padding: var(--space-4); }
    .experience-content h3 { font-size: 1.5rem; }
}


/* ============================================================
   34. Responsive — Mobile (≤ 640px)
   ============================================================ */
@media (max-width: 640px) {
    :root {
        --section-py-desktop: var(--section-py-mobile);
    }

    .container { padding: 0 var(--space-2); }

    .logo-image { height: 38px; }
    .nav-container { padding: 0 var(--space-3); height: 64px; }

    h1 { font-size: 2.1rem; }
    h2 { font-size: 1.6rem; }

    /* The desktop 64px gap under why-choose headings is far too large on
       phones — tighten it (and the intro paragraph) so the heading sits
       closer to its intro / card grid. */
    .why-choose h2 { margin-bottom: var(--space-3); }
    .section-intro { margin-bottom: var(--space-4); }

    .stats-grid      { grid-template-columns: 1fr; }
    /* About "Our Story" stats stay 3-across on phones (same cream
       rounded rectangles, just tighter type so "1,000+" fits a third). */
    .welcome-section[aria-label="Our story"] .stats-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-1);
    }
    .welcome-section[aria-label="Our story"] .stat-item {
        padding: var(--space-3) var(--space-1);
    }
    .welcome-section[aria-label="Our story"] .stat-number { font-size: 1.5rem; }
    .welcome-section[aria-label="Our story"] .stat-label {
        font-size: 0.62rem;
        letter-spacing: 0.04em;
    }
    .product-grid    { grid-template-columns: 1fr; }
    .locations-grid  { grid-template-columns: 1fr; }
    .areas-grid      { grid-template-columns: 1fr; }
    .location-cta    { flex-direction: column; }
    .btn-large       { padding: 0.9rem 1.75rem; font-size: 1rem; }
    .footer-grid     { grid-template-columns: 1fr; gap: var(--space-4); }
    .footer-bottom   { flex-direction: column; text-align: center; }

    .faq-question { padding: var(--space-2) var(--space-3); font-size: 1rem; }
    .faq-answer p { padding: 0 var(--space-3) var(--space-2); }

    .contact-grid  { grid-template-columns: 1fr; }
    .contact-form  { padding: var(--space-3); }

    /* Key Facts mobile (Phase 6.5) */
    .key-facts             { padding: var(--space-3) var(--space-3); }
    .key-facts-list        { grid-template-columns: 1fr; column-gap: 0; }
    .key-facts-list .kf-row { grid-template-columns: 1fr; gap: 0.15rem; }

    /* Areas-served mobile */
    .communities-grid   { grid-template-columns: 1fr; }
    .hero-stats .stat-number { font-size: 2.5rem; }
    .hero-stats         { flex-direction: column; gap: var(--space-3); }
    .delivery-cta,
    .cta-buttons        { flex-direction: column; align-items: stretch; }
    .delivery-cta .btn-large,
    .cta-buttons .btn-large { width: 100%; justify-content: center; }
    .reasons-grid       { grid-template-columns: 1fr; }
    .delivery-features-grid { grid-template-columns: 1fr; }
    .county-tab-btn     { padding: 0.6rem 0.7rem; font-size: 0.76rem; }
    .location-map .map-placeholder,
    .location-map iframe { min-height: 260px; }
}


/* ============================================================
   35. Responsive — Small Mobile (≤ 480px)
   ============================================================ */
@media (max-width: 480px) {
    .location-dropdown-toggle { padding: 7px 10px; font-size: 0.82rem; gap: 5px; }
    /* keep the store name visible — the icon alone reads as a generic map pin */
    .location-dropdown-text   { display: inline; max-width: 8.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    .experience-section   { padding: var(--section-py-mobile) 0; }
    .experience-image img { height: 250px; }
    .experience-content   { padding: var(--space-3); }
}


/* ============================================================
   36. Print
   ============================================================ */
@media print {
    .site-header,
    .mobile-menu-toggle,
    .location-dropdown,
    .entry-gate-overlay,
    .cta-section,
    .back-to-top { display: none !important; }

    body { background: #fff; color: #000; }
    a    { color: #000; text-decoration: underline; }
}


/* ============================================================
   37. Loyalty Page — "Journey of Ember"
   ============================================================ */

/* Eyebrow kicker above the hero title */
.eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-red-orange);
    margin-bottom: var(--space-2);
}

/* ── Tier cards ── */
.tiers-section { padding: var(--section-py-desktop) 0; }
.tier-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    align-items: start;
    max-width: 1040px;
    margin: 0 auto;
}
.tier-card {
    position: relative;
    background: var(--bg-white);
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-5) var(--space-4);
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-medium), transform var(--transition-medium);
}
.tier-card:hover { box-shadow: var(--shadow-md); }
.tier-card.featured {
    border-color: var(--color-red-orange);
    box-shadow: var(--shadow-lg);
    transform: translateY(-14px);
}
.tier-card.elite { background: var(--bg-subtle); }
.tier-badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    background: var(--color-red-orange);
    color: var(--color-white);
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.45rem 1rem;
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-sm);
}
.tier-icon { margin-bottom: var(--space-2); }
.tier-icon img { width: 40px; height: 40px; margin: 0 auto; }
.tier-card h3 {
    font-family: var(--font-heading);
    color: var(--color-dark-warm-gray);
    font-size: 1.4rem;
    margin-bottom: 0.25rem;
}
.tier-points {
    color: var(--color-red-orange);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.78rem;
    font-weight: 700;
    margin-bottom: var(--space-4);
}
.tier-benefits {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.tier-benefits li {
    position: relative;
    padding-left: 1.75rem;
    font-size: 0.92rem;
    line-height: 1.45;
    color: var(--text-body);
}
.tier-benefits li::before {
    position: absolute;
    left: 0;
    top: -0.05em;
    font-weight: 700;
    color: var(--color-red-orange);
}
.tier-benefits li.has::before { content: "✓"; }
.tier-benefits li.add { font-weight: 600; }
.tier-benefits li.add::before { content: "+"; font-size: 1.15rem; line-height: 1.1; }
.tier-benefits li.incl { color: var(--text-muted); }
.tier-benefits li.incl::before { content: "✓"; color: var(--border-strong); }

/* ── Track your ascent ── */
.track-ascent { padding: 0 0 var(--section-py-desktop); }
.track-panel {
    max-width: 920px;
    margin: 0 auto;
    background: var(--bg-subtle);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-6) var(--space-4);
    text-align: center;
}
.track-panel h2 {
    font-family: var(--font-heading);
    color: var(--color-dark-warm-gray);
    margin-bottom: var(--space-2);
}
.track-panel p {
    color: var(--text-muted);
    max-width: 540px;
    margin: 0 auto var(--space-4);
}

/* ── Join the club ── */
.join-club { padding: 0 0 var(--section-py-desktop); }
.join-club-panel {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: var(--space-5);
    align-items: center;
    max-width: 1040px;
    margin: 0 auto;
    background: var(--bg-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}
.join-club-photo img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-md);
    display: block;
}
.join-club-content h2 {
    font-family: var(--font-heading);
    color: var(--color-dark-warm-gray);
    margin-bottom: var(--space-2);
}
.join-club-content p {
    color: var(--text-muted);
    margin-bottom: var(--space-4);
}
.join-club-cta {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* ── Compare tier benefits table ── */
.compare-section { padding: var(--section-py-desktop) 0; }
.compare-section h2 { margin-bottom: var(--space-5); }
.compare-table-wrap {
    max-width: 1040px;
    margin: 0 auto;
    overflow-x: auto;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.compare-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-white);
    min-width: 560px;
}
.compare-table th,
.compare-table td {
    padding: 0.85rem 1.25rem;
    font-size: 0.95rem;
    text-align: center;
}
.compare-table thead th {
    background: var(--bg-subtle);
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-dark-warm-gray);
}
.compare-table thead th.benefit-col {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-family: var(--font-body);
    font-size: 0.78rem;
    color: var(--color-red-orange);
}
.compare-table thead th.elite-col { color: var(--color-red-orange); }
.compare-table tbody th {
    text-align: left;
    font-weight: 600;
    color: var(--text-body);
}
.compare-table tbody tr { border-top: 1px solid var(--border-color); }
.compare-table tbody tr:nth-child(even) td,
.compare-table tbody tr:nth-child(even) th { background: rgba(245, 240, 232, 0.5); }
.compare-table td.elite-col { background: rgba(241, 90, 34, 0.06); font-weight: 600; }
.compare-table tbody tr:nth-child(even) td.elite-col { background: rgba(241, 90, 34, 0.09); }
.compare-table .check { color: var(--color-red-orange); font-weight: 700; }
.compare-table .none  { color: var(--border-strong); }

/* ── Loyalty responsive ── */
@media (max-width: 860px) {
    .tier-cards { grid-template-columns: 1fr; max-width: 460px; gap: var(--space-5); }
    .tier-card.featured { transform: none; }
    .join-club-panel { grid-template-columns: 1fr; }
    .join-club-cta { flex-direction: column; align-items: stretch; }
    .join-club-cta .btn-large { width: 100%; }
}


/* ============================================================
   38. Home — Hero v2, Quick-Info Band, "How do you want to feel"
   ============================================================ */

/* Shared italic-serif accent treatment */
.accent-serif { font-style: italic; }

/* Uppercase, letter-spaced button label */
.btn-uppercase {
    text-transform: uppercase;
    letter-spacing: 0.09em;
    font-size: 0.82rem;
}

/* ── Hero (full-frame video lander) ──
   Taller than the viewport so the ticker can stay pinned to the bottom
   while scrolling the lander, then release into the section below.
   No overflow:hidden here — it would break the sticky ticker; the video
   is sized to the box via inset:0 + object-fit so it never spills. */
.home-hero-video {
    position: relative;
    min-height: 122vh;
    display: flex;
    flex-direction: column;
    overflow: visible;   /* override base .hero overflow:hidden — it would break the sticky ticker */
    background: var(--color-dark-warm-gray);
}
.home-hero-video::before { display: none; }
.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
.hero-video-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(30, 18, 10, 0.55) 0%, rgba(30, 18, 10, 0.42) 45%, rgba(30, 18, 10, 0.72) 100%);
}
.home-hero-video .hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 940px;
    margin: 0 auto;
    /* fill the first screen below the 80px header, minus room for the pinned ticker */
    min-height: calc(100vh - 80px - 4.75rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-5) var(--space-4);
}
/* Ticker pinned to the bottom of the lander viewport, releases at the next section */
.home-hero-video .ticker-bar {
    position: sticky;
    bottom: 0;
    z-index: 4;
    margin-top: auto;
}
.hero-badge-glass {
    display: inline-block;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: var(--color-white);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    padding: 0.4rem 1.1rem;
    border-radius: var(--radius-pill);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    margin-bottom: var(--space-4);
}
.home-hero-video h1 {
    margin-bottom: var(--space-3);
    color: var(--color-white);
}
.hero-accent-light {
    display: block;
    color: #F4A98C;
}
.hero-tagline {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: clamp(1.1rem, 2.2vw, 1.4rem);
    margin-bottom: var(--space-5);
}
.home-hero-video .hero-tagline { color: rgba(255, 255, 255, 0.92); }
/* Fuller body description — shown only on mobile (see ≤600 block) */
.hero-description {
    display: none;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.92rem;
    line-height: 1.5;
    max-width: 32rem;
    margin: 0 auto var(--space-4);
}
.home-hero-video .hero-cta { margin-bottom: 0; }
/* Secondary CTA = frosted glass (matches the badge), rounded corners kept */
.home-hero-video .hero-cta .btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-color: rgba(255, 255, 255, 0.35);
    color: var(--color-white);
}
.home-hero-video .hero-cta .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: var(--color-white);
    color: var(--color-white);
}

/* ── Hero info cards (glass, over video) ── */
.hero-info-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    max-width: 820px;
    margin: var(--space-4) auto 0;
}
.hero-info-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    text-align: left;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.22);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-4);
}

/* Shared info icon / label / value */
.quick-info-icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(241, 90, 34, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}
.quick-info-icon svg { color: var(--color-red-orange); }
.quick-info-label {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--color-red-orange);
    margin-bottom: 0.15rem;
}
.quick-info-value {
    font-weight: 600;
    color: var(--text-body);
    margin: 0;
}
/* Dark overrides inside the hero glass cards */
.hero-info-card .quick-info-icon { background: rgba(255, 255, 255, 0.16); }
.hero-info-card .quick-info-icon svg { color: var(--color-white); }
.hero-info-card .quick-info-label { color: rgba(255, 255, 255, 0.72); }
.hero-info-card .quick-info-value { color: var(--color-white); }

/* ── Flash deals ticker ── */
.ticker-bar {
    background: var(--color-red-orange);
    color: var(--color-white);
    overflow: hidden;
    white-space: nowrap;
    padding: 0.95rem 0;
    border-top: 2px solid rgba(255, 255, 255, 0.22);
    border-bottom: 2px solid rgba(255, 255, 255, 0.22);
    box-shadow: var(--shadow-md);
}
.ticker-track {
    display: flex;
    width: max-content;
    animation: ticker-scroll 38s linear infinite;
    will-change: transform;
}
.ticker-group {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    padding-right: var(--space-5);
    flex-shrink: 0;
}
.ticker-item {
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 1rem;
    font-weight: 800;
}
.ticker-sep {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    color: var(--color-white);
}
.ticker-sep svg { width: 20px; height: 20px; }
@keyframes ticker-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .ticker-track { animation: none; }
}

/* ── How do you want to feel ── */
.feel-section {
    padding: var(--section-py-desktop) 0;
    background: var(--bg-subtle);
}
.feel-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}
.feel-header-text { max-width: 640px; }
.feel-intro {
    color: var(--text-muted);
    margin: var(--space-2) 0 0;
}
.feel-header .btn-primary { flex-shrink: 0; }
.feel-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
}
.feel-card {
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-5) var(--space-3);
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-medium), transform var(--transition-medium);
}
.feel-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.feel-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto var(--space-3);
    border-radius: 50%;
    background: rgba(241, 90, 34, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}
.feel-icon svg { width: 26px; height: 26px; color: var(--color-red-orange); }
.feel-card h3 {
    font-size: 1.3rem;
    margin-bottom: var(--space-1);
}
.feel-card p {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: var(--space-3);
}
.feel-link {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-red-orange);
    text-decoration: none;
    transition: color var(--transition-fast);
}
.feel-link:hover { color: var(--color-rust); }

/* ── Home v2 responsive ── */
@media (max-width: 860px) {
    .feel-grid { grid-template-columns: 1fr 1fr; }
    .feel-header { flex-direction: column; align-items: flex-start; }
    .quick-info-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    /* Mobile above-the-fold: promo marquee at the very top, then the
       glass badge, headline, descriptive paragraph, and two buttons.
       The video lander stays exactly one frame tall (header is 64px);
       the absolutely-positioned video fills it via object-fit. */
    .home-hero-video {
        min-height: calc(100svh - 64px);
        padding: 0;   /* let the marquee sit flush + full-bleed at the very top */
    }
    /* marquee moves to the very top of the hero (above the content).
       width:100% overrides the hero's align-items:center so the bar
       fills the frame instead of sizing to its scrolling content. */
    .home-hero-video .ticker-bar {
        order: -1;
        position: static;
        width: 100%;
        margin: 0;
        z-index: 3;
        padding: 0.7rem 0;
    }
    .home-hero-video .hero-content {
        min-height: 0;
        flex: 1;
        justify-content: center;
        padding: var(--space-4);
    }
    .home-hero-video h1 { font-size: clamp(1.6rem, 7.5vw, 2.3rem); margin-bottom: var(--space-2); }
    .hero-badge-glass { margin-bottom: var(--space-2); }

    /* short serif tagline → fuller body paragraph on mobile */
    .home-hero-video .hero-tagline { display: none; }
    .home-hero-video .hero-description { display: block; }

    /* info cards drop off the above-the-fold layout on phones */
    .home-hero-video .hero-info-cards { display: none; }

    .home-hero-video .hero-cta { flex-direction: column; align-items: stretch; gap: var(--space-2); }
    .home-hero-video .hero-cta .btn-primary,
    .home-hero-video .hero-cta .btn-secondary { width: 100%; padding-top: 0.8rem; padding-bottom: 0.8rem; }
}
@media (max-width: 520px) {
    .feel-grid { grid-template-columns: 1fr; }
}

/* ── Mobile: condensed horizontal cards (feel + product grids) ──
   Each card becomes icon-left / text-stacked-right inside a rounded
   rectangle. The icon column spans every text row (explicit row tracks
   make `1 / -1` reliable). 4 feel cards sit at ~60% of the viewport
   height together. */
@media (max-width: 600px) {
    /* "How do you want to feel?" — 4 cards, single-column, horizontal */
    .feel-grid { grid-template-columns: 1fr; gap: var(--space-2); }
    .feel-card {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-rows: repeat(3, auto);
        column-gap: var(--space-3);
        align-items: center;
        text-align: left;
        padding: var(--space-2) var(--space-3);
    }
    .feel-icon {
        grid-column: 1;
        grid-row: 1 / -1;
        margin: 0;
        width: 48px;
        height: 48px;
        flex-shrink: 0;
    }
    .feel-icon svg { width: 22px; height: 22px; }
    .feel-card h3 { grid-column: 2; font-size: 1.1rem; margin-bottom: 2px; }
    .feel-card p  { grid-column: 2; margin-bottom: 4px; font-size: 0.85rem; }
    .feel-link    { grid-column: 2; font-size: 0.72rem; }

    /* "Reimagine…" product categories — same horizontal treatment */
    .product-grid { grid-template-columns: 1fr; gap: var(--space-2); margin-top: var(--space-3); }
    .product-card {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-rows: repeat(2, auto);
        column-gap: var(--space-3);
        align-items: center;
        text-align: left;
        padding: var(--space-3);
    }
    .product-icon {
        grid-column: 1;
        grid-row: 1 / -1;
        margin: 0;
        width: 56px;
        height: 56px;
        flex-shrink: 0;
    }
    .product-icon img { width: 38px; height: 38px; }
    .product-card h3 { grid-column: 2; font-size: 1.05rem; margin-bottom: 2px; }
    .product-card p  { grid-column: 2; font-size: 0.85rem; }
}

/* ── Mobile: condensed horizontal cards on main info pages ──
   About (What We Stand For · The Unity Rd Experience), Delivery (zones ×2 ·
   Why Choose Unity Rd Delivery), Loyalty (How It Works · Member Benefits),
   and Areas-Served (Same-Day Delivery · Why Choose Unity Rd) cards switch
   from centered tiles to icon-left / text-stacked-right rounded rectangles,
   matching the homepage feel + product cards. Scoped to .main-page (the
   page-shell body class) so the SAME card classes on the 130 town pages —
   which use the location templates, not page-shell — stay untouched.
   The Delivery "How Cannabis Delivery Works" steps already use .feature,
   an icon-left flex layout, so they need no override here. */
@media (max-width: 600px) {
    /* why-choose + how-it-works reason cards */
    .main-page .reasons-grid { gap: var(--space-2); }
    .main-page .reason-card {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-rows: repeat(2, auto);
        column-gap: var(--space-3);
        align-items: center;
        text-align: left;
        padding: var(--space-2) var(--space-3);
    }
    .main-page .reason-icon {
        grid-column: 1;
        grid-row: 1 / -1;
        margin: 0;
        font-size: 0;          /* neutralize legacy emoji line-height */
        flex-shrink: 0;
    }
    .main-page .reason-icon img { margin: 0; }
    .main-page .reason-card h4 { grid-column: 2; margin-bottom: 2px; }
    .main-page .reason-card p  { grid-column: 2; }

    /* areas-served "Same-Day Cannabis Delivery" feature tiles */
    .main-page .delivery-service-v2 .delivery-features-grid {
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }
    .main-page .delivery-service-v2 .delivery-feature {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-rows: repeat(2, auto);
        column-gap: var(--space-3);
        align-items: center;
        text-align: left;
        padding: var(--space-3);
    }
    .main-page .delivery-service-v2 .feature-icon-tile {
        grid-column: 1;
        grid-row: 1 / -1;
        margin: 0;
        width: 52px;
        height: 52px;
        flex-shrink: 0;
    }
    .main-page .delivery-service-v2 .delivery-feature h4 { grid-column: 2; margin-bottom: 2px; }
    .main-page .delivery-service-v2 .delivery-feature p  { grid-column: 2; }
}


/* ============================================================
   39. Areas Served — Communities County Tabs + Town Cards
   ============================================================ */
.communities-section {
    padding: var(--section-py-desktop) 0;
    background: var(--bg-page);
}
.communities-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto var(--space-5);
}
.communities-header h2 { margin-bottom: var(--space-3); }
.communities-header .accent-serif { display: inline-block; }
.communities-intro { color: var(--text-muted); }

/* County pill tabs */
.county-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem;
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-pill);
    padding: 0.35rem;
    width: max-content;
    max-width: 100%;
    margin: 0 auto var(--space-6);
    box-shadow: var(--shadow-sm);
}
.county-pill {
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    padding: 0.6rem 1.15rem;
    border-radius: var(--radius-pill);
    white-space: nowrap;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}
.county-pill:hover { color: var(--color-red-orange); }
.county-pill.active {
    background: var(--color-red-orange);
    color: var(--color-white);
}

/* Panels */
.county-panel { display: none; }
.county-panel.active { display: block; }

/* Town cards */
.town-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-4);
    max-width: 1040px;
    margin: 0 auto;
    align-items: stretch;
}
.town-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--bg-white);
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-medium), transform var(--transition-medium);
}
.town-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.town-card.featured { border-color: var(--color-red-orange); }
.town-ribbon {
    position: absolute;
    top: 0;
    left: var(--space-4);
    transform: translateY(-50%);
    background: var(--color-red-orange);
    color: var(--color-white);
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.35rem 0.9rem;
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-sm);
}
.town-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}
.town-card-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: rgba(241, 90, 34, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}
.town-card-icon svg { width: 22px; height: 22px; color: var(--color-red-orange); }
.town-card-badges {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
}
.town-badge {
    background: var(--bg-subtle);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-pill);
    white-space: nowrap;
}
.town-card h4 {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    color: var(--color-dark-warm-gray);
    margin-bottom: 0.4rem;
}
.town-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}
.town-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-red-orange);
}
.town-meta svg { width: 14px; height: 14px; }
.town-card > p {
    font-size: 0.92rem;
    color: var(--text-muted);
    line-height: 1.65;
    margin-bottom: var(--space-3);
}
.town-btn {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-body);
    background: var(--bg-white);
    border: 1.5px solid var(--border-strong);
    border-radius: var(--radius-pill);
    padding: 0.65rem 1.25rem;
    text-decoration: none;
    transition: border-color var(--transition-fast), color var(--transition-fast), background-color var(--transition-fast);
}
.town-btn svg { width: 15px; height: 15px; }
.town-btn:hover { border-color: var(--color-red-orange); color: var(--color-red-orange); }
.town-btn-solid {
    background: var(--color-red-orange);
    border-color: var(--color-red-orange);
    color: var(--color-white);
}
.town-btn-solid:hover { background: var(--color-rust); border-color: var(--color-rust); color: var(--color-white); }

/* View-all reveal */
.all-communities { text-align: center; margin-top: var(--space-6); }
.all-communities summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-pill);
    padding: 1rem 2rem;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-body);
    box-shadow: var(--shadow-sm);
    transition: border-color var(--transition-fast), color var(--transition-fast);
}
.all-communities summary::-webkit-details-marker { display: none; }
.all-communities summary:hover { border-color: var(--color-red-orange); color: var(--color-red-orange); }
.all-communities summary svg { width: 18px; height: 18px; color: var(--color-red-orange); }
.all-communities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-4);
    max-width: 1040px;
    margin: var(--space-5) auto 0;
    text-align: left;
}
.all-communities-grid h5 {
    color: var(--color-red-orange);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.78rem;
    margin-bottom: 0.4rem;
}
.all-communities-grid p { font-size: 0.92rem; color: var(--text-muted); line-height: 1.7; }

@media (max-width: 768px) {
    .county-pills { width: 100%; border-radius: var(--radius-lg); }
    .county-pill { padding: 0.55rem 0.85rem; font-size: 0.72rem; }
    .town-cards { grid-template-columns: 1fr; max-width: 460px; }
}


/* ============================================================
   40. Areas Served — Delivery Section v2 (mockup restyle)
   Scoped under .delivery-service-v2 — town templates still use
   the base .delivery-service / .delivery-feature styles.
   ============================================================ */
.delivery-service-v2 { background-color: var(--bg-page); }
.delivery-service-v2 .delivery-content h2 { margin-bottom: var(--space-4); }

/* Three-line intro */
.delivery-service-v2 .delivery-lead {
    font-size: 1.15rem;
    color: var(--text-body);
    margin-bottom: var(--space-2);
}
.delivery-service-v2 .delivery-hours-line {
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--text-body);
    margin-bottom: var(--space-1);
}
.delivery-service-v2 .delivery-hours-line strong { color: var(--color-red-orange); }
.delivery-service-v2 .delivery-cutoff-line {
    font-size: 0.88rem;
    color: var(--text-muted);
    margin-bottom: var(--space-5);
}

/* White cards with soft icon tiles */
.delivery-service-v2 .delivery-feature {
    background-color: var(--bg-white);
    border: none;
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius-lg);
    padding: var(--space-5) var(--space-3);
}
.delivery-service-v2 .delivery-feature:hover {
    box-shadow: var(--shadow-md);
}
.delivery-service-v2 .feature-icon-tile {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--space-3);
    border-radius: var(--radius-md);
    background: var(--bg-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
}
.delivery-service-v2 .feature-icon-tile img { width: 28px; height: 28px; }
.delivery-service-v2 .delivery-feature h4 {
    font-family: var(--font-heading);
    font-size: 1.15rem;
}

/* Pill CTA buttons */
.delivery-service-v2 .delivery-cta .btn-primary,
.delivery-service-v2 .delivery-cta .btn-secondary {
    border-radius: var(--radius-pill);
    padding: 1rem 2rem;
}
.delivery-service-v2 .delivery-cta .btn-secondary {
    background: var(--bg-white);
}


/* ============================================================
   41. Learn Guides — legal/compliance note box
   ============================================================ */
.guide-legal {
    max-width: 820px;
    margin: 0 auto;
    background: var(--bg-subtle);
    border-left: 4px solid var(--color-red-orange);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
}
.guide-legal h3 {
    font-size: 1.15rem;
    margin-bottom: var(--space-2);
    color: var(--color-dark-warm-gray);
}
.guide-legal p {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin: 0;
}


/* ============================================================
   42. Towns Index (/dispensaries/) + Communities CTA + pill counts
   ============================================================ */
.communities-index-cta {
    text-align: center;
    margin-top: var(--space-8);
}
.county-pill-count {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.08);
    font-size: 0.75em;
    font-weight: 600;
}
.county-pill.active .county-pill-count {
    background: rgba(255, 255, 255, 0.25);
}
.towns-index {
    padding: var(--space-8) 0;
}
.towns-index-county {
    margin-bottom: var(--space-8);
}
.towns-index-county h2 {
    font-size: 1.5rem;
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-2);
    border-bottom: 2px solid var(--color-red-orange);
}
.towns-index-count {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-muted);
    margin-left: var(--space-2);
}
.towns-index-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-2) var(--space-6);
}
.towns-index-list li {
    padding: var(--space-2) 0;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
}
.towns-index-list a {
    font-weight: 600;
    color: var(--color-dark-warm-gray);
    text-decoration: none;
}
.towns-index-list a:hover {
    color: var(--color-red-orange);
    text-decoration: underline;
}
.towns-index-meta {
    display: block;
    font-size: 0.85rem;
    color: var(--text-muted);
}


/* ============================================================
   43. Footer social links
   ============================================================ */
.footer-social {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-3);
}
.footer-social a {
    color: inherit;
    opacity: 0.75;
    transition: opacity 0.15s ease, color 0.15s ease;
}
.footer-social a:hover,
.footer-social a:focus-visible {
    opacity: 1;
    color: var(--color-red-orange);
}


/* ============================================================
   44. Motion System — tokens, reveals, hero entrance
   All timings/easings live in these tokens; tweak here, never inline.
   Reveals are gated on html.motion-ok (set by js/main.js only when
   IntersectionObserver exists AND prefers-reduced-motion is not set),
   so content is always visible to crawlers, no-JS users, and anyone
   who prefers reduced motion. transform/opacity only - zero CLS.
   ============================================================ */
:root {
    --motion-micro: 200ms;            /* hovers, presses, small UI */
    --motion-reveal: 550ms;           /* scroll-triggered reveals */
    --motion-stagger: 70ms;           /* delay step between siblings */
    --motion-hero-step: 90ms;         /* hero entrance cascade step */
    --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
}

/* -- Scroll reveals (driven by data-reveal, set from js/main.js) -- */
html.motion-ok [data-reveal] {
    opacity: 0;
    transform: translateY(22px);
}
html.motion-ok [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
    transition:
        opacity   var(--motion-reveal) var(--ease-out-soft),
        transform var(--motion-reveal) var(--ease-out-soft);
    transition-delay: calc(var(--reveal-i, 0) * var(--motion-stagger));
}

/* -- Homepage hero entrance cascade (load, not scroll) -- */
@keyframes heroRise {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
}
html.motion-ok .home-hero-video .hero-badge-glass,
html.motion-ok .home-hero-video h1,
html.motion-ok .home-hero-video .hero-tagline,
html.motion-ok .home-hero-video .hero-description,
html.motion-ok .home-hero-video .hero-cta,
html.motion-ok .home-hero-video .hero-info-cards {
    animation: heroRise 620ms var(--ease-out-soft) both;
}
html.motion-ok .home-hero-video h1                { animation-delay: var(--motion-hero-step); }
html.motion-ok .home-hero-video .hero-tagline,
html.motion-ok .home-hero-video .hero-description { animation-delay: calc(var(--motion-hero-step) * 2); }
html.motion-ok .home-hero-video .hero-cta         { animation-delay: calc(var(--motion-hero-step) * 3); }
html.motion-ok .home-hero-video .hero-info-cards  { animation-delay: calc(var(--motion-hero-step) * 4); }

/* -- Micro-interaction gaps (buttons/cards already lift; these did not) -- */
.county-pill,
.nearby-towns a,
.area-item,
.towns-index-list a {
    transition: color var(--motion-micro) var(--ease-out-soft),
                background-color var(--motion-micro) var(--ease-out-soft),
                border-color var(--motion-micro) var(--ease-out-soft),
                box-shadow var(--motion-micro) var(--ease-out-soft),
                transform var(--motion-micro) var(--ease-out-soft);
}
.county-pill:hover:not(.active) { transform: translateY(-1px); }
.county-pill:active,
.town-btn:active,
.feel-link:active { transform: scale(0.97); }
.quick-info-icon,
.feel-icon,
.reason-icon {
    transition: transform var(--motion-micro) var(--ease-out-soft);
}
.feel-card:hover .feel-icon,
.reason-card:hover .reason-icon { transform: translateY(-2px) scale(1.06); }

/* -- Cross-document page transitions (Chromium progressive enhancement) -- */
@view-transition { navigation: auto; }
@keyframes vtFadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes vtFadeIn  { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
::view-transition-old(root) { animation: vtFadeOut 180ms ease-out both; }
::view-transition-new(root) { animation: vtFadeIn 260ms var(--ease-out-soft) both; }

/* -- Master reduced-motion switch: kill every non-essential animation -- */
@media (prefers-reduced-motion: reduce) {
    html.motion-ok [data-reveal] { opacity: 1; transform: none; transition: none; }
    html.motion-ok .home-hero-video .hero-badge-glass,
    html.motion-ok .home-hero-video h1,
    html.motion-ok .home-hero-video .hero-tagline,
    html.motion-ok .home-hero-video .hero-description,
    html.motion-ok .home-hero-video .hero-cta,
    html.motion-ok .home-hero-video .hero-info-cards { animation: none; }
    ::view-transition-old(root),
    ::view-transition-new(root) { animation: none; }
    .ticker-track { animation: none; }
    .county-pill:hover:not(.active),
    .feel-card:hover .feel-icon,
    .reason-card:hover .reason-icon { transform: none; }
    .btn-primary:hover, .btn-secondary:hover,
    .feel-card:hover, .town-card:hover,
    .reason-card:hover, .landmark-card:hover { transform: none; }
}


/* ============================================================
   45. Entry Gate — age verification → pickup / delivery
   Full-screen lightbox injected by js/main.js §4B. Unity Rd
   palette (cream card, orange accents/buttons). See that module
   for behavior; markup is built there, all classes prefixed eg-/
   entry-gate-.
   ============================================================ */
.entry-gate-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: flex-start;          /* card centers via margin:auto; scrolls when tall */
    justify-content: center;
    overflow-y: auto;                 /* the overlay scrolls, not the card */
    padding: var(--space-4);
    background: rgba(38, 38, 38, 0.55);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s ease, visibility 0.28s ease;
}
.entry-gate-overlay.active { opacity: 1; visibility: visible; }

.entry-gate-card {
    width: 100%;
    max-width: 600px;
    margin: auto;                     /* vertical-centers when shorter than viewport */
    background: var(--color-cream);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--space-6) var(--space-6) var(--space-5);
    transform: translateY(12px) scale(0.98);
    transition: transform 0.28s ease;
}
.entry-gate-overlay.active .entry-gate-card { transform: none; }

/* ── header (logo, optional back arrow) ── */
.entry-gate-head {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: var(--space-5);
}
.entry-gate-logo { height: 54px; width: auto; display: block; }
.entry-gate-logo-text {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--color-red-orange);
}
.eg-back {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-red-orange);
    border-radius: 50%;
    transition: background-color var(--transition-fast);
}
.eg-back:hover { background: rgba(241, 90, 34, 0.1); }
.eg-back svg { width: 24px; height: 24px; }

.entry-gate-body { text-align: center; }

/* ── titles + decorative flourishes ── */
.entry-gate-title {
    font-family: var(--font-heading);
    font-size: 1.85rem;
    color: var(--color-dark-warm-gray);
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.entry-gate-title.eg-left {
    justify-content: flex-start;
    text-align: left;
    margin-bottom: var(--space-3);
}
.eg-star { color: var(--color-red-orange); display: inline-flex; }
.eg-star svg { width: 18px; height: 18px; }
.eg-wave {
    color: var(--color-red-orange);
    width: 200px;
    height: 8px;
    margin: 0.35rem auto var(--space-5);
}
.eg-wave svg { width: 100%; height: 100%; display: block; }

/* ── age step: choice buttons ── */
.entry-gate-choices {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
}
.eg-btn {
    flex: 1 1 220px;
    max-width: 280px;
    padding: 0.95rem 1.25rem;
    font-size: 1.02rem;
    font-weight: 700;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color var(--transition-fast),
                color var(--transition-fast),
                box-shadow var(--transition-fast),
                transform var(--transition-fast);
}
.eg-btn-primary {
    background: var(--color-red-orange);
    color: #fff;
    border: 2px solid var(--color-red-orange);
}
.eg-btn-primary:hover { background: var(--color-rust); border-color: var(--color-rust); transform: translateY(-2px); }
.eg-btn-outline {
    background: var(--bg-white);
    color: var(--color-dark-warm-gray);
    border: 2px solid var(--border-color);
}
.eg-btn-outline:hover { border-color: var(--color-red-orange); color: var(--color-red-orange); transform: translateY(-2px); }
.eg-deny {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.92rem;
    color: var(--text-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
    padding: var(--space-1);
}
.eg-deny:hover { color: var(--color-rust); }

.entry-gate-denied p {
    color: var(--text-muted);
    margin-top: var(--space-2);
    font-size: 1.02rem;
}

/* ── store pickup list ── */
.eg-store-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}
.eg-store-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    text-align: left;
    padding: var(--space-3);
    background: var(--bg-white);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.eg-store-row:hover { border-color: var(--color-red-orange); }
.eg-store-row.selected { border-color: var(--color-red-orange); box-shadow: 0 0 0 1px var(--color-red-orange) inset; }
.eg-radio {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    position: relative;
    transition: border-color var(--transition-fast);
}
.eg-store-row.selected .eg-radio { border-color: var(--color-red-orange); }
.eg-store-row.selected .eg-radio::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--color-red-orange);
}
.eg-store-info { display: flex; flex-direction: column; gap: 2px; }
.eg-store-name {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-dark-warm-gray);
}
.eg-store-addr { font-size: 0.9rem; color: var(--text-muted); }

/* ── continue button (shared, pickup + delivery) ── */
.eg-continue {
    display: block;
    width: 100%;
    padding: 0.95rem 1.25rem;
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    background: var(--color-red-orange);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}
.eg-continue:hover:not(:disabled) { background: var(--color-rust); }
.eg-continue:disabled {
    background: #E7E0D6;
    color: #A89E90;
    cursor: not-allowed;
}

/* ── delivery: address input + autocomplete ── */
.eg-address-wrap { position: relative; margin-bottom: var(--space-3); }
.eg-pin {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-red-orange);
    display: flex;
    pointer-events: none;
}
.eg-pin svg { width: 22px; height: 22px; }
.eg-address {
    width: 100%;
    padding: 0.85rem 1rem 0.85rem 46px;
    font-size: 1rem;
    color: var(--color-dark-warm-gray);
    background: var(--bg-white);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.eg-address::placeholder { color: #9A8E80; }
.eg-address:focus {
    outline: none;
    border-color: var(--color-red-orange);
    box-shadow: 0 0 0 3px rgba(241, 90, 34, 0.15);
}
.eg-suggest {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: min(40vh, 232px);     /* scrolls internally; never runs off short screens */
    overflow-y: auto;
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    z-index: 10;
}
.eg-suggest-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.7rem 1rem;
    font-size: 0.95rem;
    color: var(--text-muted);
    background: none;
    border: none;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
}
.eg-suggest-item:last-child { border-bottom: none; }
.eg-suggest-item:hover { background: var(--bg-subtle); color: var(--color-dark-warm-gray); }

/* ── delivery: validation message ── */
.eg-deliver-msg {
    text-align: center;
    padding: 0.7rem 1rem;
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: var(--space-3);
}
.eg-msg-success { color: #2E7D32; background: rgba(46, 125, 50, 0.08); border: 1px solid rgba(46, 125, 50, 0.3); }
.eg-msg-error   { color: var(--color-rust); background: rgba(152, 56, 9, 0.07); border: 1px solid rgba(152, 56, 9, 0.3); }
.eg-msg-neutral { color: var(--text-muted); background: var(--bg-subtle); border: 1px solid var(--border-color); }
.eg-inline-link {
    display: inline;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    color: var(--color-red-orange);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.eg-deliver-note {
    font-size: 0.82rem;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.5;
    margin: var(--space-2) 0 0;
}

/* ── responsive ── */
@media (max-width: 600px) {
    .entry-gate-overlay { padding: var(--space-2); }
    .entry-gate-card { padding: var(--space-5) var(--space-4) var(--space-4); }
    .entry-gate-logo { height: 46px; }
    .entry-gate-title { font-size: 1.5rem; }
    .entry-gate-choices { flex-direction: column; }
    .eg-btn { max-width: none; flex-basis: auto; }
}