* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow-x: hidden;
    background: #ffffff;
    color: #1a1a1a;
}

/* Top Navigation Bar */
nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    padding: 1rem 2rem;
    z-index: 1000;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
    border-bottom: 1px solid #eceef0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

nav.visible {
    opacity: 1;
    pointer-events: auto;
}

.nav-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
}

.logo img {
    height: 40px;
    width: auto;
    /* The wordmark PNG ships white (for dark backgrounds); render it dark on
       the light theme. */
    filter: brightness(0);
}

.nav-links {
    display: flex;
    gap: 2rem;
    list-style: none;
}

.nav-links button {
    background: none;
    border: none;
    color: #4b5563;
    font-size: 1rem;
    cursor: pointer;
    padding: 0.5rem 1rem;
    transition: all 0.3s ease;
    position: relative;
    font-weight: 500;
}

.nav-links button:hover {
    color: #1a1a1a;
}

.nav-links button.active {
    color: #DC2626;
}

.nav-links button.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: #DC2626;
}

/* Hamburger toggle — hidden on desktop, shown at the mobile breakpoint */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 8px;
    background: none;
    border: none;
    cursor: pointer;
}

.nav-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background: #1a1a1a;
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Animate the three bars into an X when open */
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Page Container */
.page-container {
    position: relative;
    min-height: 100vh;
    padding-top: 80px;
}

.page {
    /* Inactive pages are taken out of layout entirely so they don't inflate
       the document's scroll height (otherwise the tallest hidden page would
       make every short page scrollable into empty space). Only the active and
       exiting pages are displayed, so transitions still work. */
    display: none;
    position: absolute;
    top: 80px;
    left: 0;
    width: 100%;
    min-height: calc(100vh - 80px);
    opacity: 0;
    pointer-events: none;
    transform-origin: center top;
}

.page.active,
.page.exiting {
    display: block;
}

.page.active {
    opacity: 1;
    pointer-events: auto;
    animation: pageSlideIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.page.exiting {
    animation: pageSlideOut 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes pageSlideIn {
    from {
        opacity: 0;
        transform: translateY(100px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes pageSlideOut {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(-100px) scale(0.8);
    }
}

/* Content Container */
.content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

/* Home Page Styles */
#home {
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 80px);
    padding-top: 0;
}

/* Home centers its hero with flex, but only when shown (so the base
   display:none for inactive pages still applies to it). */
#home.active,
#home.exiting {
    display: flex;
}

.hero-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6rem;
    color: #1a1a1a;
    z-index: 1;
    width: 100%;
    max-width: 1400px;
    padding: 0 2rem;
}

.hero-left {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.hero-right {
    text-align: center;
    max-width: 600px;
}

.hero-logo {
    opacity: 0;
    animation: logoFadeIn 2s ease-out 0.5s forwards;
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

.hero-logo img {
    width: 100%;
    max-width: 500px;
    height: auto;
    display: block;
    margin: 0 auto;
    /* White wordmark PNG → render dark for the light hero. */
    filter: brightness(0);
}

@keyframes logoFadeIn {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-tagline {
    font-size: 1.3rem;
    color: #4b5563;
    opacity: 0;
    animation: logoFadeIn 2s ease-out 1s forwards;
    line-height: 1.6;
    letter-spacing: 1px;
}

/* Intro-animation toggle (returning visitors) — pinned top-right of the hero */
.intro-toggle {
    position: absolute;
    /* The page itself is offset 80px from the viewport top, so the effective
       top gap is 80px + 1.5rem. Match that on the right so the inset looks even. */
    top: 1.5rem;
    right: calc(80px + 1.5rem);
    z-index: 20;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    opacity: 0;
    animation: logoFadeIn 2s ease-out 1.4s forwards;
    user-select: none;
}

.intro-toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.intro-toggle-track {
    position: relative;
    width: 44px;
    height: 24px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(0, 0, 0, 0.18);
    transition: background 0.25s ease;
    flex-shrink: 0;
}

.intro-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: transform 0.25s ease;
}

.intro-toggle input:checked + .intro-toggle-track {
    background: #DC2626;
    border-color: #DC2626;
}

.intro-toggle input:checked + .intro-toggle-track .intro-toggle-thumb {
    transform: translateX(20px);
}

.intro-toggle input:focus-visible + .intro-toggle-track {
    outline: 2px solid #DC2626;
    outline-offset: 2px;
}

/* Label text stays hidden until the toggle is hovered/focused */
.intro-toggle-text {
    font-size: 0.9rem;
    color: #6b7280;
    letter-spacing: 0.5px;
    white-space: nowrap;
    max-width: 0;
    margin-right: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-width 0.3s ease, margin-right 0.3s ease, opacity 0.3s ease;
}

.intro-toggle:hover .intro-toggle-text,
.intro-toggle:focus-within .intro-toggle-text {
    max-width: 160px;
    margin-right: 0.6rem;
    opacity: 1;
}

/* Hero Navigation Menu */
.hero-nav {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    opacity: 0;
    animation: logoFadeIn 2s ease-out 1.5s forwards;
}

.hero-nav-item {
    background: #ffffff;
    border: 2px solid #e5e7eb;
    border-radius: 15px;
    padding: 1.2rem 2rem;
    color: #1a1a1a;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    font-size: 1.3rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
    width: 240px;
    white-space: nowrap;
}

.hero-nav-item span {
    position: relative;
    display: inline-block;
    color: #1a1a1a;
    transition: all 0.3s ease;
}

.hero-nav-item:hover {
    transform: scale(1.15) translateX(8px);
    background: rgba(220, 38, 38, 0.06);
    border-color: #DC2626;
    box-shadow:
        0 8px 24px rgba(220, 38, 38, 0.2),
        0 2px 8px rgba(0, 0, 0, 0.08);
    z-index: 10;
}

.hero-nav-item.highlighting span {
    color: #DC2626;
}

.hero-nav.has-hover .hero-nav-item:not(:hover) {
    transform: scale(0.95);
    opacity: 0.4;
}

/* Section Styles */
.section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.section-header h1 {
    font-size: 3rem;
    color: #1a1a1a;
    margin-bottom: 1rem;
}

.section-header h1 span {
    color: #DC2626;
}

.section-divider {
    width: 80px;
    height: 4px;
    background: #DC2626;
    margin: 0 auto 1rem;
}

.section-header p {
    font-size: 1.2rem;
    color: #6b7280;
}

/* Card Grid */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 2rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    border-color: #DC2626;
    box-shadow: 0 10px 30px rgba(220, 38, 38, 0.15);
    background: #ffffff;
}

.card-icon {
    color: #DC2626;
    margin-bottom: 1rem;
    line-height: 0;
}

.card-icon svg {
    width: 3rem;
    height: 3rem;
}

.card h3 {
    color: #1a1a1a;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.card p {
    color: #4b5563;
    line-height: 1.6;
}

/* Team Section */
.team-story {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 2.5rem;
    margin-bottom: 3rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.team-story p {
    color: #4b5563;
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

/* Team Photo Collage */
.team-collage {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 3rem;
    height: 480px;
}

.team-photo {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    background: #f3f4f6;
    transition: all 0.3s ease;
}

/* Large feature photo spans both rows on the left */
.team-photo.feature {
    grid-row: 1 / span 2;
}

.team-photo:hover {
    border-color: #DC2626;
    box-shadow: 0 10px 30px rgba(220, 38, 38, 0.2);
    z-index: 2;
}

.team-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.team-photo:hover img {
    transform: scale(1.05);
}

/* Form Styles */
.form-container {
    max-width: 700px;
    margin: 0 auto;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 2.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    color: #1a1a1a;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.8rem;
    background: #f9fafb;
    border: 1px solid #d1d5db;
    border-radius: 5px;
    color: #1a1a1a;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #DC2626;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.submit-btn {
    width: 100%;
    padding: 1rem;
    background: #DC2626;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}

.submit-btn:hover {
    background: #B91C1C;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(220, 38, 38, 0.3);
}

.submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Contact form status message */
.form-status {
    margin-top: 1rem;
    text-align: center;
    font-weight: 500;
    min-height: 1.2em;
}

.form-status.success {
    color: #4ADE80;
}

.form-status.error {
    color: #F87171;
}

/* Contact success popup */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    z-index: 10001;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal-overlay[hidden] {
    display: none;
}

.modal-overlay.visible {
    opacity: 1;
}

.modal-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 2.5rem 2rem;
    max-width: 400px;
    width: 100%;
    text-align: center;
    transform: scale(0.92);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modal-overlay.visible .modal-card {
    transform: scale(1);
}

.modal-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    background: rgba(74, 222, 128, 0.15);
    color: #4ADE80;
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-card h3 {
    color: #1a1a1a;
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
}

.modal-card p {
    color: #4b5563;
    line-height: 1.5;
    margin-bottom: 1.75rem;
}

.modal-close-btn {
    background: #DC2626;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 0.75rem 2rem;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease;
}

.modal-close-btn:hover {
    background: #b91c1c;
}

/* Request-a-quote popup (Service cards + Store tiles) ---------------------- */
.request-modal-card {
    position: relative;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 1.5rem;
    width: 100%;
    max-width: 620px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    transform: scale(0.92);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modal-overlay.visible .request-modal-card {
    transform: scale(1);
}

.request-modal-card h3 {
    color: #1a1a1a;
    font-size: 1.4rem;
    margin: 0 0 1rem;
    padding-right: 2rem; /* clear of the close button */
}

.request-modal-close {
    position: absolute;
    top: 0.6rem;
    right: 0.9rem;
    background: none;
    border: none;
    color: #9ca3af;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s ease;
}

.request-modal-close:hover {
    color: #DC2626;
}

/* The iframe wrapper scrolls if the form is taller than the viewport. */
.request-modal-frame-wrap {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 10px;
}

#requestModalFrame {
    display: block;
    width: 100%;
    height: 700px;
    border: 0;
}

/* Make Service cards + Store tiles read as clickable, with a CTA hint. */
#services .card,
#store .store-tile {
    cursor: pointer;
}

#services .card::after,
#store .store-tile .store-tile-info::after {
    content: "Request a quote →";
    display: block;
    margin-top: 1rem;
    color: #DC2626;
    font-weight: 600;
    font-size: 0.9rem;
    opacity: 0.8;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

#services .card:hover::after,
#store .store-tile:hover .store-tile-info::after {
    opacity: 1;
    transform: translateX(3px);
}

/* Event Card */
.event-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
}

.event-card:hover {
    border-color: #DC2626;
    transform: translateX(5px);
    box-shadow: 0 10px 30px rgba(220, 38, 38, 0.15);
}

.event-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 1rem;
}

.event-title {
    color: #1a1a1a;
    font-size: 1.8rem;
    font-weight: bold;
}

.event-badge {
    background: #DC2626;
    color: white;
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 0.8rem;
    text-transform: uppercase;
}

.event-details {
    color: #6b7280;
    margin-bottom: 1rem;
}

.event-details p {
    margin: 0.5rem 0;
}

.event-description {
    color: #4b5563;
    line-height: 1.6;
}

/* Shown when no events are populated; auto-hides once #eventsList has cards */
.events-empty {
    text-align: center;
    color: #6b7280;
    font-size: 1.25rem;
    padding: 3rem 1rem;
}

#eventsList:not(:empty) + .events-empty {
    display: none;
}

/* Contact Grid */
/* Stacked layout: contact info + map on top, the request form centered below.
   Shopmonkey renders its form fields at a fixed ~480px and centers them inside
   the iframe (cross-origin — we can't widen those fields), so we size each block
   to hug its content and center the whole column rather than stretching. */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    margin-bottom: 3rem;
    justify-items: center;
}

/* Contact info + map: compact, centered block (not stretched edge to edge). */
.contact-details {
    width: 100%;
    max-width: 780px;
}

/* Allow the grid columns to shrink to their fr proportions
   instead of being held wide by their content (e.g. the map) */
.contact-grid > * {
    min-width: 0;
}

.contact-info {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 2rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.contact-info h3 {
    color: #1a1a1a;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}

.contact-item {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

/* Reusable monochrome icons: the PNG's alpha is used as a mask so the glyph
   renders in `currentColor`. Lets the same icons be red on the contact page
   and muted white in the footer, and tint on hover — just like text color. */
.icon {
    display: inline-block;
    background-color: currentColor;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    flex-shrink: 0;
}

.icon-phone   { -webkit-mask-image: url('../icons/phone-office.png'); mask-image: url('../icons/phone-office.png'); }
.icon-email   { -webkit-mask-image: url('../icons/envelope.png');     mask-image: url('../icons/envelope.png'); }
.icon-address { -webkit-mask-image: url('../icons/map-marker.png');   mask-image: url('../icons/map-marker.png'); }
.icon-hours   { -webkit-mask-image: url('../icons/clock-three.png');  mask-image: url('../icons/clock-three.png'); }

.contact-icon {
    width: 1.5rem;
    height: 1.5rem;
    color: #DC2626;
}

.contact-text h4 {
    color: #1a1a1a;
    margin-bottom: 0.3rem;
}

.contact-text p {
    color: #6b7280;
}

.contact-text a {
    color: #6b7280;
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-text a:hover {
    color: #DC2626;
}

/* Map Container */
/* Request-form panel: sized to hug Shopmonkey's ~480px form and centered.
   width:100% must stay explicit — without it the grid item collapses to the
   iframe's 300px intrinsic default instead of using max-width. */
.contact-grid .form-container {
    width: 100%;
    max-width: 620px;
}

/* Embedded Shopmonkey quote form fills the (now full-width) container. */
.form-container iframe {
    display: block;
    width: 100%;
    border: 0;
}

.map-container {
    width: 100%;
    height: 400px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
}

/* Social Feed */
.social-section {
    margin-bottom: 3rem;
}

.social-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.social-header h2 {
    color: #1a1a1a;
    font-size: 2rem;
}

.social-icon {
    font-size: 2rem;
}

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

.social-post {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
}

.social-post:hover {
    transform: translateY(-5px);
    border-color: #DC2626;
    box-shadow: 0 10px 30px rgba(220, 38, 38, 0.15);
}

.social-post-image {
    width: 100%;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.2), rgba(185, 28, 28, 0.2));
    overflow: hidden;
}

.social-post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Linked social cards (rendered as <a>) shouldn't look like default links */
a.social-post {
    display: block;
    text-decoration: none;
    color: inherit;
}

.social-post-content {
    padding: 1.5rem;
}

.social-post-content p {
    color: #4b5563;
    margin-bottom: 1rem;
}

.social-post-meta {
    color: #DC2626;
    font-weight: bold;
}

/* Review Card */
.review-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.review-author-wrap {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}

.review-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.review-author {
    color: #1a1a1a;
    font-weight: bold;
}

/* When the author name links to the Google review */
a.review-author {
    text-decoration: none;
    transition: color 0.3s ease;
}

a.review-author:hover {
    color: #DC2626;
}

.review-stars {
    color: #FFC107;
}

.review-text {
    color: #4b5563;
    line-height: 1.6;
    margin-bottom: 0.5rem;
}

.review-date {
    color: #9ca3af;
    font-size: 0.9rem;
}

.review-column-title {
    color: #1a1a1a;
    margin-bottom: 1rem;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.review-summary {
    color: #FFC107;
    font-size: 0.95rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Store Page */
.store-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.store-tile {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
}

.store-tile:hover {
    transform: translateY(-5px);
    border-color: #DC2626;
    box-shadow: 0 10px 30px rgba(220, 38, 38, 0.15);
}

.store-tile-images {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.store-tile-images img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Multi-image carousel */
.store-tile-images .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.store-tile-images .slide.active {
    opacity: 1;
}

.store-tile-images .slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slide-dots {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 2;
}

.slide-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: all 0.3s ease;
}

.slide-dot.active {
    background: #DC2626;
    transform: scale(1.3);
}

.slide-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
}

.store-tile:hover .slide-nav {
    opacity: 1;
}

.slide-nav:hover {
    background: rgba(220, 38, 38, 0.7);
}

.slide-nav.prev { left: 8px; }
.slide-nav.next { right: 8px; }

.store-tile-info {
    padding: 1.5rem;
}

.store-tile-info h3 {
    color: #1a1a1a;
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

.store-tile-info .part-fitment {
    color: #DC2626;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.store-tile-info p {
    color: #4b5563;
    line-height: 1.5;
    font-size: 0.95rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .hero-content {
        flex-direction: column;
        gap: 3rem;
    }

    .hero-left {
        width: 100%;
        align-items: center;
    }

    .hero-nav-item {
        width: 100%;
        max-width: 300px;
    }

    .hero-nav-item:hover {
        transform: scale(1.1) translateX(0);
    }

    .nav-toggle {
        display: flex;
    }

    .nav-container {
        position: relative;
    }

    /* Collapse the links into a dropdown card anchored under the hamburger */
    .nav-links {
        display: none;
        position: absolute;
        top: calc(100% + 1rem);
        right: 0;
        flex-direction: column;
        gap: 0;
        min-width: 200px;
        padding: 0.5rem;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(10px);
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    }

    .nav-links.open {
        display: flex;
    }

    .nav-links li {
        width: 100%;
    }

    .nav-links button {
        width: 100%;
        text-align: left;
        font-size: 0.95rem;
        padding: 0.75rem 1rem;
        border-radius: 8px;
    }

    /* Swap the underline for a row highlight in the vertical menu */
    .nav-links button.active::after {
        display: none;
    }

    .nav-links button.active {
        background: rgba(220, 38, 38, 0.15);
    }

    .hero-logo {
        font-size: 2.5rem;
    }

    .hero-tagline {
        font-size: 1.2rem;
    }

    .hero-nav {
        gap: 1rem;
    }

    .hero-nav-item {
        font-size: 1rem;
        padding: 1rem 1.5rem;
    }

    .section-header h1 {
        font-size: 2rem;
    }

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

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

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

    .team-collage {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        height: auto;
    }

    .team-photo.feature {
        grid-column: 1 / span 2;
        grid-row: auto;
        aspect-ratio: 3 / 2;
    }

    .team-photo:not(.feature) {
        aspect-ratio: 3 / 2;
    }
}

/* Loading Animation */
.loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #F2F3F4;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    transition: transform 1s cubic-bezier(0.76, 0, 0.24, 1);
}

.loading.swipe-out {
    transform: translateX(-100%);
}

.loading-content {
    position: relative;
    width: 90%;
    max-width: 620px;
}

/* Cursive writing animation */
.loading-logo {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.loading-logo path {
    fill: #111111;
    fill-opacity: 0;
    stroke: #111111;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    /* pathLength="1" on each path normalizes length, so one dash spans the
       whole glyph regardless of its real size. */
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}

/* Glyphs: trace the outline left-to-right (staggered by --i), then fill in. */
.loading-logo.draw path {
    animation:
        logoDraw 0.6s ease forwards,
        logoFill 0.5s ease forwards;
    animation-delay:
        calc(0.9s + (var(--i) - 1) * 0.13s),
        calc(0.9s + (var(--i) - 1) * 0.13s + 0.45s);
}

/* The big cursive flourish leads, drawn over a longer beat. */
.loading-logo.draw path.flourish {
    animation:
        logoDraw 1.7s ease forwards,
        logoFill 0.7s ease forwards;
    animation-delay: 0s, 1.4s;
}

@keyframes logoDraw {
    to { stroke-dashoffset: 0; }
}

@keyframes logoFill {
    to { fill-opacity: 1; }
}

/* 5-panel image sweep (plays after the logo, triggered by .panels-active) */
.loading-panels {
    position: absolute;
    inset: 0;
    display: flex;
    z-index: 2; /* above the centered logo */
    pointer-events: none;
}

.loading-panel {
    flex: 1 1 20%; /* equal division regardless of panel count */
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
}

/* Horizontal set: stacked full-width bands. Hidden on desktop (the vertical
   set shows); the mobile breakpoint flips which set is displayed. */
.loading-panels.horizontal {
    display: none;
    flex-direction: column;
}

.loading-panels.horizontal .loading-panel {
    width: 100%;
    height: auto;
}

/* On mobile, swap the tall vertical set for the wide horizontal set. This lives
   after the base rules above so it reliably overrides their display values. */
@media (max-width: 768px) {
    .loading-panels.vertical {
        display: none;
    }

    .loading-panels.horizontal {
        display: flex;
    }
}

/* When activated, fade the logo out and run the panels. The per-panel --p
   stagger makes both the fade-in and fade-out sweep left → right. */
.loading.panels-active .loading-content {
    animation: logoOut 0.5s ease forwards;
}

.loading.panels-active .loading-panel {
    animation: panelSweep 2s ease forwards;
    animation-delay: calc(var(--p) * 0.28s);
}

@keyframes logoOut {
    to { opacity: 0; }
}

@keyframes panelSweep {
    0%   { opacity: 0; }
    20%  { opacity: 1; } /* faded in */
    65%  { opacity: 1; } /* hold */
    100% { opacity: 0; } /* faded back out */
}

/* Respect users who prefer less motion: show the finished logo, skip the
   drawing and the panel sweep entirely. */
@media (prefers-reduced-motion: reduce) {
    .loading-logo path,
    .loading-logo.draw path,
    .loading-logo.draw path.flourish {
        fill-opacity: 1;
        stroke-dashoffset: 0;
        animation: none;
    }

    .loading-panels {
        display: none;
    }
}

/* ---------------------------------------------------------------------------
   Site footer — shown on every page except Contact (info is duplicated there).
   js/main.js relocates this element into the active .page so it always sits
   below that page's content (pages are absolutely positioned).
--------------------------------------------------------------------------- */
.site-footer {
    position: relative;
    z-index: 2;
    margin-top: 5rem;
    padding: 3rem 2rem 1.5rem;
    background: #f9fafb;
    border-top: 1px solid rgba(220, 38, 38, 0.3);
}

.footer-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 2.5rem;
}

.footer-socials {
    display: flex;
    gap: 1rem;
}

.footer-social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    color: #1a1a1a;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}

.footer-social-btn:hover {
    transform: translateY(-4px);
    background: rgba(220, 38, 38, 0.85);
    border-color: #DC2626;
}

/* Your icons drop in here and are sized automatically. The filter forces
   them to solid dark for visibility on the light footer; on hover the button
   turns red, so flip the icons to white. */
.footer-social-btn img,
.footer-social-btn svg {
    width: 24px;
    height: 24px;
    object-fit: contain;
    filter: brightness(0);
    transition: filter 0.25s ease;
}

.footer-social-btn:hover img,
.footer-social-btn:hover svg {
    filter: brightness(0) invert(1);
}

.footer-info {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 2.5rem;
}

.footer-info-item {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    color: #4b5563;
    font-size: 0.9rem;
    line-height: 1.5;
}

.footer-info-icon {
    width: 1.1rem;
    height: 1.1rem;
    margin-top: 0.15rem; /* nudge to align with the first line of text */
}

.footer-info-item a {
    color: #4b5563;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-info-item a:hover {
    color: #DC2626;
}

.footer-bottom {
    max-width: 1400px;
    margin: 2.5rem auto 0;
    padding-top: 1.5rem;
    border-top: 1px solid #e5e7eb;
    text-align: center;
    color: #9ca3af;
    font-size: 0.8rem;
}


@media (max-width: 768px) {
    .footer-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .footer-info {
        justify-content: center;
    }

    .footer-info-item {
        justify-content: center;
    }
}