/* ============================================================================
   SVOBODA SANITATION SERVICE - STYLESHEET
   ============================================================================
   Blue brand, family sanitation company, mobile first, dark/light theme.
   Structure: reset -> tokens -> base -> layout -> components -> utilities.
   ============================================================================ */

/* --- Self-hosted Open Sans (variable font, 400-800) --- */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400 800;
    font-stretch: 100%;
    font-display: swap;
    src: url('../assets/fonts/open-sans-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400 800;
    font-stretch: 100%;
    font-display: swap;
    src: url('../assets/fonts/open-sans-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* --- Accessibility utilities --- */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
.sr-only-focusable:focus {
    position: fixed !important;
    top: 0; left: 0;
    z-index: 99999;
    width: auto !important; height: auto !important;
    padding: 0.75rem 1.5rem !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    white-space: normal !important;
    background: var(--color-header-bg);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    border-radius: 0 0 8px 0;
    outline: 3px solid #fff;
}

*:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
*:focus:not(:focus-visible) { outline: none; }

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

/* --- Design tokens (dark theme is default) --- */
:root {
    /* Brand - Kenworth blue */
    --color-primary: #1f6fb8;
    --color-primary-dark: #18568f;
    --color-primary-light: #5198d2;
    --color-accent: #fbbf24;
    --color-accent-dark: #d97706;
    --color-header-bg: #0c3e72;

    /* Neutral - dark */
    --color-bg: #0f172a;
    --color-bg-alt: #1e293b;
    --color-bg-dark: #0a0f1d;
    --color-text: #e5e7eb;
    --color-text-light: #9ca3af;
    --color-text-muted: #94a3b8;
    --color-border: #334155;
    --color-border-light: #1e293b;

    /* Semantic text colors (WCAG AA in both themes) */
    --color-svs-success: #34d399;
    --color-svs-warning: #fbbf24;
    --color-svs-danger: #fca5a5;
    --color-svs-success-bg: rgba(52, 211, 153, 0.08);
    --color-svs-warning-bg: rgba(251, 191, 36, 0.08);
    --color-svs-danger-bg: rgba(252, 165, 165, 0.08);

    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-xxl: 3rem;
    --space-xxxl: 4rem;

    /* Typography */
    --font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2rem;
    --font-size-4xl: 2.5rem;
    --font-size-5xl: 3.25rem;

    /* Shape */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
    --shadow-lg: 0 8px 30px rgba(0,0,0,0.5);

    /* Layout */
    --container-width: 1180px;
    --header-height: 72px;
}

/* --- Light theme override --- */
[data-theme="light"] {
    --color-bg: #ffffff;
    --color-bg-alt: #f5f7fa;
    --color-bg-dark: #e2e8f0;
    --color-text: #1f2937;
    --color-text-light: #4b5563;
    --color-text-muted: #6b7280;
    --color-border: #d1d5db;
    --color-border-light: #e5e7eb;
    --color-primary: #0f4e8f;
    --color-primary-dark: #0a3b6e;
    --color-primary-light: #1f6fb8;
    --color-accent: #b45309;
    --color-accent-dark: #92400e;
    --color-svs-success: #065f46;
    --color-svs-warning: #92400e;
    --color-svs-danger: #b91c1c;
    --color-svs-success-bg: rgba(6, 95, 70, 0.08);
    --color-svs-warning-bg: rgba(146, 64, 14, 0.08);
    --color-svs-danger-bg: rgba(185, 28, 28, 0.08);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.10);
    --shadow-lg: 0 8px 30px rgba(0,0,0,0.12);
}

html { scroll-behavior: smooth; }
/* Anchor targets land clear of the sticky header (T-23). */
[id] { scroll-margin-top: var(--header-height); }
body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    /* Guard against long unbreakable strings forcing horizontal overflow (T-24). */
    overflow-wrap: break-word;
    word-wrap: break-word;
}

img { max-width: 100%; height: auto; display: block; }
/* Dark theme (default) uses the light-blue token for link text so it clears
   4.5:1 on the dark surfaces; light theme restores the original blue (T-19). */
a { color: var(--color-primary-light); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--color-primary-dark); }
[data-theme="light"] a { color: var(--color-primary); }
/* The rule above outranks single-class button rules on <a> buttons
   ((0,1,1) beats (0,1,0)), which turned button text blue on blue in light
   mode. Restore each variant's own text color at (0,2,0). Hover states
   already win at (0,2,0) and need no help. .btn-outline has its own
   light-mode rule below. */
[data-theme="light"] a.btn-primary { color: #fff; }
[data-theme="light"] a.btn-white { color: var(--color-header-bg); }
[data-theme="light"] a.btn-ghost { color: #fff; }

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-text);
}
h1 { font-size: var(--font-size-4xl); }
h2 { font-size: var(--font-size-3xl); }
h3 { font-size: var(--font-size-2xl); }
h4 { font-size: var(--font-size-xl); }

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

ul, ol { margin: 0 0 var(--space-md) var(--space-lg); }
ul:last-child, ol:last-child { margin-bottom: 0; }

/* ============================================================================
   HEADER
   ============================================================================ */
.site-header {
    background: var(--color-header-bg);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.header-container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--space-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    height: var(--header-height);
}
.site-logo-link {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: #fff;
    font-weight: 800;
    font-size: var(--font-size-xl);
    text-decoration: none;
}
.site-logo-img { height: 44px; width: auto; display: block; }
.site-logo-text {
    color: #fff;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.1;
}
.site-logo-text small {
    display: block;
    font-size: 0.6em;
    font-weight: 600;
    color: rgba(255,255,255,0.75);
    letter-spacing: 0.02em;
}

.demo-badge {
    display: inline-block;
    padding: 2px 8px;
    margin-left: var(--space-sm);
    /* Header is dark navy in both themes; pin the bright amber so the badge
       and its dark text keep contrast when the light theme darkens accents. */
    background: #fbbf24;
    color: #1f2937;
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    vertical-align: middle;
}

.site-nav ul {
    display: flex;
    list-style: none;
    gap: 2px;
    margin: 0;
    padding: 0;
}
.site-nav a {
    color: #fff;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    text-align: center;
    white-space: nowrap;
    transition: background 0.2s;
}
.site-nav a:hover, .site-nav a.active { background: rgba(255,255,255,0.12); color: #fff; }

.header-actions { display: flex; align-items: center; gap: var(--space-sm); }

.btn-call {
    background: #fff;
    color: var(--color-header-bg);
    padding: 10px 18px;
    border-radius: 999px;
    font-weight: 800;
    font-size: var(--font-size-sm);
    letter-spacing: 0.02em;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    transition: transform 0.15s, box-shadow 0.15s;
    white-space: nowrap;
}
.btn-call:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    color: var(--color-primary-dark);
}
.btn-call svg { width: 16px; height: 16px; }

.theme-toggle {
    background: rgba(255,255,255,0.08);
    border: none;
    color: #fff;
    padding: 8px;
    border-radius: 50%;
    cursor: pointer;
    width: 38px; height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.theme-toggle:hover { background: rgba(255,255,255,0.18); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-moon { display: none; }
[data-theme="light"] .theme-toggle .icon-sun { display: none; }
[data-theme="light"] .theme-toggle .icon-moon { display: block; }

.mobile-nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
}
.mobile-nav-toggle span {
    display: block;
    width: 24px; height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform 0.3s, opacity 0.3s;
}

/* ============================================================================
   HERO
   ============================================================================ */
.hero {
    position: relative;
    color: #fff;
    padding: var(--space-xxxl) 0;
    text-align: center;
    overflow: hidden;
    background: linear-gradient(135deg, #0c3e72 0%, #081f3c 100%);
}
.hero-with-image {
    background-color: #081f3c;
    position: relative;
    overflow: hidden;
    min-height: 480px;
    display: flex;
    align-items: center;
}
.hero-with-image .container { position: relative; z-index: 2; }
.hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1.2s ease;
    z-index: 0;
}
.hero-bg.active { opacity: 1; }
.hero-with-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8, 31, 60, 0.35) 0%, rgba(8, 31, 60, 0.55) 55%, rgba(8, 31, 60, 0.80) 100%);
    z-index: 1;
    pointer-events: none;
}
/* Fallback: static home-hero in case JS is off. Hidden when .hero-bg exists. */
.hero-with-image {
    background-image: url('../assets/hero/home-hero.webp');
    background-size: cover;
    background-position: center center;
}
.hero-with-image.has-rotator { background-image: none; }
@media (max-width: 768px) {
    .hero-with-image {
        background-image: url('../assets/hero/home-hero-mobile.webp');
        min-height: 520px;
    }
    .hero-with-image::after {
        background: linear-gradient(180deg, rgba(8, 31, 60, 0.45) 0%, rgba(8, 31, 60, 0.65) 50%, rgba(8, 31, 60, 0.85) 100%);
    }
}
.hero h1 {
    color: #fff;
    font-size: clamp(2rem, 5vw, var(--font-size-5xl));
    margin-bottom: var(--space-md);
    letter-spacing: -0.01em;
}
.hero .lead {
    font-size: var(--font-size-xl);
    color: rgba(255,255,255,0.9);
    max-width: 720px;
    margin: 0 auto var(--space-xl);
}
.hero-actions {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    flex-wrap: wrap;
    margin-top: var(--space-xl);
}
.hero-slogan {
    display: inline-block;
    margin-top: var(--space-lg);
    padding: 6px 14px;
    background: rgba(251, 191, 36, 0.18);
    /* The hero photo stays dark in both themes; the light theme's darkened
       accent (#b45309) vanishes against it. Keep the bright amber literally. */
    color: #fbbf24;
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: 0.02em;
    font-size: var(--font-size-sm);
    text-transform: uppercase;
}

.hero-small {
    padding: var(--space-xxl) 0 var(--space-xl);
    text-align: left;
}
.hero-small h1 { font-size: var(--font-size-3xl); }
.hero-small .lead { margin-left: 0; margin-right: 0; font-size: var(--font-size-lg); }

/* ============================================================================
   LAYOUT
   ============================================================================ */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--space-lg);
}
.container-sm { max-width: 720px; }
.container-md { max-width: 900px; }

.section { padding: var(--space-xxxl) 0; }
.section-compact { padding: var(--space-xxl) 0; }
.section-alt { background: var(--color-bg-alt); }
.section-title { text-align: center; margin-bottom: var(--space-sm); }
.section-subtitle {
    text-align: center;
    color: var(--color-text-light);
    font-size: var(--font-size-lg);
    max-width: 640px;
    margin: 0 auto var(--space-xxl);
}

/* ============================================================================
   BUTTONS
   ============================================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: 12px 22px;
    border-radius: var(--radius-md);
    font-family: var(--font-family);
    font-weight: 700;
    font-size: var(--font-size-base);
    text-align: center;
    text-decoration: none;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.15s, background 0.2s, color 0.2s, box-shadow 0.2s, border-color 0.2s;
    min-height: 44px;
    line-height: 1.2;
}
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-dark); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-md); }
/* Text color uses the light-blue token in dark theme for AA contrast; light theme restores original (T-19). */
.btn-outline { background: transparent; color: var(--color-primary-light); border-color: var(--color-primary); }
.btn-outline:hover { background: var(--color-primary); color: #fff; }
[data-theme="light"] .btn-outline { color: var(--color-primary); }
.btn-white { background: #fff; color: var(--color-header-bg); }
.btn-white:hover { background: #f3f4f6; color: var(--color-header-bg); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-ghost { background: rgba(255,255,255,0.12); color: #fff; }
.btn-ghost:hover { background: rgba(255,255,255,0.22); color: #fff; }
.btn-lg { padding: 14px 28px; font-size: var(--font-size-lg); }
.btn-block { display: flex; width: 100%; }

/* ============================================================================
   CARDS
   ============================================================================ */
.card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
    display: flex;
    flex-direction: column;
}
.card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); }
.card h3 { margin-bottom: var(--space-sm); font-size: var(--font-size-xl); }
.card p { color: var(--color-text-light); font-size: var(--font-size-sm); flex: 1; }
.card-footer { margin-top: var(--space-md); }
/* Text color uses the light-blue token in dark theme for AA contrast; light theme restores original (T-19). */
.card-link {
    color: var(--color-primary-light);
    font-weight: 700;
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: inline-flex; align-items: center; gap: var(--space-xs);
    white-space: nowrap;
}
.card-link:hover { color: var(--color-primary-dark); }
.card-link .arrow { transition: transform 0.15s; display: inline-block; }
.card-link:hover .arrow { transform: translateX(4px); }
[data-theme="light"] .card-link { color: var(--color-primary); }

.card-grid {
    display: grid;
    /* min(280px, 100%) keeps the 280px target column but lets it shrink to the
       viewport at 320px width instead of forcing horizontal overflow (T-24). */
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: var(--space-lg);
}

.trust-band {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-md);
    text-align: center;
}
.trust-item {
    padding: var(--space-md);
    background: var(--color-bg-alt);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-light);
}
.trust-item strong {
    display: block;
    color: var(--color-primary);
    font-size: var(--font-size-xl);
    margin-bottom: 4px;
}
.trust-item span { color: var(--color-text-light); font-size: var(--font-size-sm); }

/* ============================================================================
   SERVICE CARDS (with icon badge)
   ============================================================================ */
.service-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    position: relative;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.service-card:hover { transform: translateY(-3px); border-color: var(--color-primary); box-shadow: var(--shadow-md); }
.service-card-icon {
    width: 52px; height: 52px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: var(--space-md);
    align-self: flex-start;
}
.service-card-icon svg { width: 26px; height: 26px; }
.service-card h3 { margin-bottom: var(--space-sm); }
.service-card p { color: var(--color-text-light); margin-bottom: var(--space-md); }
.service-card ul { color: var(--color-text); font-size: var(--font-size-sm); padding-left: 1.2em; margin-bottom: var(--space-md); }
.service-card li { margin-bottom: 4px; }
.service-card .card-footer { margin-top: auto; padding-top: var(--space-md); }

/* ============================================================================
   DO'S AND DON'TS TABLE
   ============================================================================ */
.dos-donts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
}
@media (max-width: 720px) {
    .dos-donts-grid { grid-template-columns: 1fr; }
}
.dos-column, .donts-column {
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    border: 1px solid var(--color-border);
}
.dos-column {
    background: var(--color-svs-success-bg);
    border-color: var(--color-svs-success);
}
.donts-column {
    background: var(--color-svs-danger-bg);
    border-color: var(--color-svs-danger);
}
.dos-column h2, .donts-column h2 {
    display: flex; align-items: center; gap: var(--space-sm);
    font-size: var(--font-size-2xl);
    margin-bottom: var(--space-md);
}
.dos-column h2 { color: var(--color-svs-success); }
.donts-column h2 { color: var(--color-svs-danger); }
.dos-list, .donts-list { list-style: none; margin: 0; padding: 0; }
.dos-list li, .donts-list li {
    padding: var(--space-md) 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
    display: flex;
    gap: var(--space-md);
    align-items: flex-start;
}
.dos-list li:last-child, .donts-list li:last-child { border-bottom: none; }
.dos-list li .icon, .donts-list li .icon {
    flex: 0 0 24px;
    width: 24px; height: 24px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 800;
    font-size: 0.9rem;
    margin-top: 2px;
}
.dos-list li .icon { background: var(--color-svs-success); color: var(--color-bg); }
.donts-list li .icon { background: var(--color-svs-danger); color: var(--color-bg); }
[data-theme="light"] .dos-list li .icon { color: #fff; }
[data-theme="light"] .donts-list li .icon { color: #fff; }
.dos-list strong, .donts-list strong { display: block; margin-bottom: 2px; }
.dos-list p, .donts-list p {
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
    margin: 0;
}

.callout {
    background: var(--color-bg-alt);
    border-left: 4px solid var(--color-accent);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    padding: var(--space-md) var(--space-lg);
    margin: var(--space-lg) 0;
    color: var(--color-text);
}
.callout strong { color: var(--color-accent); }

/* ============================================================================
   FORMS
   ============================================================================ */
.form { max-width: 640px; }
.form-group { margin-bottom: var(--space-lg); }
.form-group label,
.form-group .form-label {
    display: block;
    font-weight: 700;
    margin-bottom: var(--space-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text);
}
.form-hint {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-top: 4px;
    font-weight: 400;
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="number"],
.form-group input[type="date"],
.form-group input[type="url"],
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 12px 14px;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    background: var(--color-bg);
    color: var(--color-text);
    transition: border-color 0.2s, box-shadow 0.2s;
    min-height: 44px;
}
.form-group textarea { min-height: 140px; resize: vertical; }
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(31, 111, 184, 0.2);
}
.form-checkbox-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-sm);
}
/* Grid with a fixed 18px column for the checkbox and a 1fr column for the
   text. align-items: center aligns each cell's content to the row center,
   which is robust against browser-specific line-height quirks that flex
   centering runs into. */
.form-checkbox-item {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: var(--space-sm);
    align-items: center;
    padding: 10px var(--space-md);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    background: var(--color-bg);
    transition: border-color 0.15s, background 0.15s;
    min-height: 44px;
}
.form-checkbox-item:hover { border-color: var(--color-primary); }
.form-checkbox-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    padding: 0;
    accent-color: var(--color-primary);
    cursor: pointer;
    vertical-align: middle;
}
.form-checkbox-item span {
    font-weight: 600;
    font-size: var(--font-size-sm);
    line-height: 1;
}

.form-honeypot {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px; height: 1px;
    overflow: hidden;
}

/* Amount input with dollar sign prefix */
.amount-input-wrap {
    position: relative;
    display: flex;
    align-items: stretch;
}
.amount-input-wrap .currency {
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    background: var(--color-bg-alt);
    border: 2px solid var(--color-border);
    border-right: none;
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    color: var(--color-text-light);
    font-weight: 700;
}
.amount-input-wrap input {
    flex: 1;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-variant-numeric: tabular-nums;
}

/* Alerts */
.alert {
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-lg);
    border-left: 4px solid transparent;
    font-size: var(--font-size-sm);
}
.alert-success {
    background: var(--color-svs-success-bg);
    color: var(--color-svs-success);
    border-left-color: var(--color-svs-success);
}
.alert-error {
    background: var(--color-svs-danger-bg);
    color: var(--color-svs-danger);
    border-left-color: var(--color-svs-danger);
}
.alert-info {
    background: rgba(31, 111, 184, 0.08);
    color: var(--color-primary-light);
    border-left-color: var(--color-primary);
}
[data-theme="light"] .alert-info { color: var(--color-primary-dark); }

/* ============================================================================
   TOWN LIST (Service Area)
   ============================================================================ */
.town-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-md);
}
/* Whole-card clickable. Stacks town name/note on top, CTA pinned to bottom
   so card height is uniform regardless of note length. */
.town-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-md) var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
    min-height: 110px;
}
.town-card:hover,
.town-card:focus-visible {
    border-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
    color: inherit;
}
.town-card-body { flex: 1 1 auto; }
.town-card strong {
    display: block;
    font-size: var(--font-size-lg);
    color: var(--color-text);
    line-height: 1.25;
}
.town-card small {
    display: block;
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
    margin-top: 4px;
}
/* Text color uses the light-blue token in dark theme for AA contrast; light theme restores original (T-19). */
.town-card-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--color-primary-light);
    font-weight: 700;
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    align-self: flex-start;
    margin-top: auto;
}
.town-card:hover .town-card-cta .arrow { transform: translateX(4px); }
.town-card-cta .arrow { transition: transform 0.15s; display: inline-block; }
[data-theme="light"] .town-card-cta { color: var(--color-primary); }

/* ============================================================================
   SCHEDULE TABLE
   ============================================================================ */
.schedule-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}
.schedule-table th,
.schedule-table td {
    text-align: left;
    padding: var(--space-md);
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
}
.schedule-table th {
    background: var(--color-bg-alt);
    font-weight: 700;
    color: var(--color-text);
    border-bottom: 2px solid var(--color-primary);
}
.schedule-table tbody tr:hover { background: var(--color-bg-alt); }
@media (max-width: 720px) {
    .schedule-table, .schedule-table tbody, .schedule-table tr, .schedule-table td {
        display: block;
        width: 100%;
    }
    .schedule-table thead { display: none; }
    .schedule-table tr {
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        margin-bottom: var(--space-md);
        padding: var(--space-sm);
    }
    .schedule-table td {
        border-bottom: 1px solid var(--color-border-light);
        padding: var(--space-sm) 0;
    }
    .schedule-table td:last-child { border-bottom: none; }
    .schedule-table td::before {
        content: attr(data-label);
        display: block;
        font-weight: 700;
        color: var(--color-primary);
        text-transform: uppercase;
        font-size: 0.7rem;
        letter-spacing: 0.05em;
        margin-bottom: 4px;
    }
}

/* ============================================================================
   REVIEWS
   ============================================================================ */
.review-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-lg);
}
.review-card {
    background: var(--color-bg-alt);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    border: 1px solid var(--color-border-light);
}
.review-card p {
    font-style: italic;
    font-size: var(--font-size-lg);
    color: var(--color-text);
    margin-bottom: var(--space-sm);
}
.review-card cite {
    font-style: normal;
    font-weight: 700;
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
}

/* ============================================================================
   FAQ
   ============================================================================ */
.faq-list {
    display: grid;
    gap: var(--space-lg);
}
.faq-item {
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: var(--shadow-sm);
}
.faq-item h3 {
    font-size: var(--font-size-xl);
    margin-bottom: var(--space-sm);
}
.faq-item p {
    color: var(--color-text-light);
    margin-bottom: 0;
}

/* ============================================================================
   FOOTER
   ============================================================================ */
.site-footer {
    background: var(--color-bg-dark);
    color: var(--color-text-light);
    padding: var(--space-xxl) 0 var(--space-lg);
    margin-top: var(--space-xxxl);
    font-size: var(--font-size-sm);
}
[data-theme="light"] .site-footer {
    background: #e2e8f0;
    color: var(--color-text-light);
}
.footer-container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--space-lg);
}
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--space-xl);
    margin-bottom: var(--space-xl);
}
@media (max-width: 768px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
    .footer-grid { grid-template-columns: 1fr; }
}
.footer-brand p { color: var(--color-text-light); margin-bottom: var(--space-sm); }
.footer-heading {
    color: var(--color-text);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.75rem;
    margin-bottom: var(--space-sm);
}
.footer-links ul { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 6px; }
.footer-links a { color: var(--color-text-light); }
.footer-links a:hover { color: var(--color-primary); }
.footer-social { margin-top: var(--space-md); display: flex; gap: var(--space-sm); }
.footer-social a {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--color-bg-alt);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--color-text-light);
}
.footer-social a:hover { background: var(--color-primary); color: #fff; }
.footer-bottom {
    border-top: 1px solid var(--color-border-light);
    padding-top: var(--space-lg);
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}
.footer-bottom p { margin-bottom: var(--space-xs); }
.footer-credit a { color: var(--color-text-light); }
.footer-credit a:hover { color: var(--color-primary); }
/* Light theme --color-text-muted is below AA on the footer background; darken it here (T-20). */
[data-theme="light"] .footer-bottom { color: #4b5563; }

/* ============================================================================
   BACK TO TOP
   ============================================================================ */
.back-to-top {
    position: fixed;
    bottom: 20px; right: 20px;
    width: 44px; height: 44px;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
    z-index: 500;
    box-shadow: var(--shadow-md);
}
.back-to-top:hover { background: var(--color-primary-dark); transform: translateY(-2px); }
.back-to-top.visible { opacity: 1; pointer-events: auto; }

/* ============================================================================
   RESPONSIVE - MOBILE NAV
   ============================================================================
   Breakpoint set to 1180px so the hamburger kicks in whenever the seven nav
   items would crowd against the capped container width. Above 1180 we show
   the full inline nav. (QA: verify the 7-item desktop nav doesn't overflow
   ~1180-1280px now that About was added; tighten gaps if it does.) */
@media (max-width: 1180px) {
    .site-nav {
        position: fixed;
        top: var(--header-height);
        left: 0; right: 0; bottom: 0;
        background: var(--color-header-bg);
        transform: translateY(-110%);
        transition: transform 0.3s;
        overflow-y: auto;
        z-index: 999;
    }
    .site-nav.open { transform: translateY(0); }
    body.nav-open { overflow: hidden; }   /* lock page scroll behind the open mobile nav (T-21) */
    .site-nav ul {
        flex-direction: column;
        gap: 0;
        padding: var(--space-md);
    }
    .site-nav li { border-bottom: 1px solid rgba(255,255,255,0.08); }
    .site-nav a {
        display: block;
        padding: var(--space-md);
        font-size: var(--font-size-base);
        text-align: left;
    }
    .mobile-nav-toggle { display: inline-flex; }
    .header-actions .btn-call .call-label { display: none; }
    .header-actions .btn-call { padding: 10px 14px; }
}
@media (max-width: 480px) {
    .site-logo-text small { display: none; }
    .hero { padding: var(--space-xxl) 0; }
    .section { padding: var(--space-xxl) 0; }
    h1 { font-size: var(--font-size-3xl); }
    h2 { font-size: var(--font-size-2xl); }
}

/* ============================================================================
   UTILITIES
   ============================================================================ */
.text-center { text-align: center; }
.text-muted { color: var(--color-text-light); }
.text-primary { color: var(--color-primary); }
.text-accent { color: var(--color-accent); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }
.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); flex-wrap: wrap; }
.form-row { display: flex; gap: var(--space-lg); flex-wrap: wrap; align-items: flex-start; }
.form-row > .form-group { flex: 1 1 220px; min-width: 220px; margin-bottom: var(--space-lg); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }

/* Slogan line - subtle, on some pages */
.slogan {
    font-weight: 700;
    color: var(--color-accent);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-size: var(--font-size-sm);
}

/* Highlight box used on About and Pay pages */
.highlight-box {
    background: linear-gradient(135deg, rgba(31, 111, 184, 0.08), rgba(31, 111, 184, 0.02));
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
}

/* Test-mode strip on the Pay page. Striped barbershop-pole amber so the
   pitch audience immediately sees "this isn't real". */
.test-mode-strip {
    background: repeating-linear-gradient(
        45deg,
        var(--color-accent),
        var(--color-accent) 14px,
        rgba(251, 191, 36, 0.7) 14px,
        rgba(251, 191, 36, 0.7) 28px
    );
    color: #1f2937;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-lg);
    border: 2px solid var(--color-accent-dark);
}
.test-mode-strip strong { font-weight: 900; }