/* ---------------------------------------------------------------------
 * Luke & Spencer - shared site styles
 *
 * Rules common to every top-level page. Previously duplicated inline in
 * all seven. Each page still carries its own page-specific rules in an
 * inline <style> AFTER this file, so those continue to win on ties.
 *
 * Edit shared styling here once, rather than in seven places.
 * --------------------------------------------------------------------- */
        /* ============================================
           CSS Reset & Base Styles
           ============================================ */
        *,
        *::before,
        *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html {
            font-size: 100%;
            scroll-behavior: smooth;
        }

        body {
            font-family: var(--font-body);
            font-size: 1rem;
            line-height: 1.6;
            color: var(--color-text-gray);
            background-color: var(--color-bg-white);
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        /* ============================================
           Accessibility: Skip Link
           ============================================ */
        .skip-link {
            position: absolute;
            top: -100%;
            left: 50%;
            transform: translateX(-50%);
            background: #3d7a1c;
            color: var(--color-text-light);
            padding: var(--spacing-sm) var(--spacing-md);
            text-decoration: none;
            font-weight: 600;
            border-radius: var(--radius-sm);
            z-index: 10000;
            transition: top var(--transition-fast);
        }

        .skip-link:focus {
            top: var(--spacing-sm);
            outline: 3px solid var(--color-focus);
            outline-offset: 2px;
        }

        /* ============================================
           Focus Styles (Accessibility)
           ============================================ */
        :focus {
            outline: 3px solid var(--color-focus);
            outline-offset: 2px;
        }

        :focus:not(:focus-visible) {
            outline: none;
        }

        :focus-visible {
            outline: 3px solid var(--color-focus);
            outline-offset: 2px;
        }

        /* ============================================
           Typography
           ============================================ */
        h1, h2, h3, h4, h5, h6 {
            font-family: var(--font-heading);
            font-weight: 600;
            line-height: 1.3;
            color: var(--color-text-dark);
        }

        h1 { font-size: clamp(2rem, 5vw, 3rem); }
        h2 { font-size: clamp(1.5rem, 4vw, 2.25rem); }
        h3 { font-size: clamp(1.25rem, 3vw, 1.5rem); }

        p {
            margin-bottom: var(--spacing-sm);
        }

        /* Link colour is deliberately NOT --color-primary-green (#7ab541).
           That green measures 2.47:1 against white, well under the 4.5:1
           WCAG AA minimum for body text. #3d7a1c is the darker green already
           used on the site's buttons and measures 5.25:1, so links are
           readable without introducing a colour outside the palette.
           Dark mode keeps the brighter green via its own rule below, where
           it sits on a dark background and measures 7.06:1. */
        :root {
            --color-link: #3d7a1c;
        }

        a {
            color: var(--color-link);
            text-decoration: underline;
            transition: color var(--transition-fast);
        }

        a:hover {
            color: var(--color-primary-dark);
        }

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

        /* ============================================
           Utility Classes
           ============================================ */
        .visually-hidden {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
            /* Explicit high-contrast colors for screen reader tools */
            color: #000000;
            background-color: #ffffff;
        }

        .container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 var(--spacing-md);
        }

        .text-center {
            text-align: center;
        }

        .client-login:hover,
        .client-login:focus {
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(255, 255, 255, 0.3);
            color: var(--color-text-light);
        }

        .nav-toggle {
            display: none;
            background: transparent;
            border: none;
            color: var(--color-text-light);
            font-size: 1.5rem;
            cursor: pointer;
            padding: var(--spacing-xs);
            line-height: 1;
        }

        .nav-toggle:hover {
            color: var(--color-primary-light);
        }

        /* Mobile Accessibility Button - Hidden on desktop */
        .ada-toggle-mobile {
            display: none;
            background: transparent;
            border: none;
            color: var(--color-text-light);
            font-size: 1.5rem;
            cursor: pointer;
            padding: var(--spacing-xs);
            line-height: 1;
        }

        .ada-toggle-mobile:hover {
            color: var(--color-primary-light);
        }

        .nav-menu {
            display: flex;
            list-style: none;
            gap: var(--spacing-xs);
        }

        /* Hide mobile-only items on desktop */
        .mobile-only {
            display: none;
        }

        .nav-link {
            display: block;
            color: var(--color-text-light);
            text-decoration: none;
            font-size: 0.875rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            padding: var(--spacing-xs) var(--spacing-sm);
            border-radius: var(--radius-sm);
            transition: all var(--transition-fast);
            position: relative;
        }

        .nav-link::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            width: 0;
            height: 2px;
            background: var(--color-primary-green);
            transition: all 0.3s ease;
            transform: translateX(-50%);
        }

        .nav-link:hover::after,
        .nav-link:focus::after {
            width: 80%;
        }

        .nav-link:hover,
        .nav-link:focus,
        .nav-link[aria-current="page"] {
            color: var(--color-text-light);
        }

        /* ============================================
           Hero Section
           ============================================ */
        .hero {
            position: relative;
            min-height: 60vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #000000;
            padding: calc(80px + var(--spacing-xxl)) var(--spacing-md) var(--spacing-xxl);
            overflow: visible;
        }

        /* Video Background */
        .hero-video-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            z-index: 0;
        }

        .hero-video {
            position: absolute;
            top: 50%;
            left: 50%;
            min-width: 100%;
            min-height: 100%;
            width: auto;
            height: auto;
            transform: translate(-50%, -50%);
            object-fit: cover;
        }

        /* Video control button */
        .video-control-btn {
            position: absolute;
            bottom: var(--spacing-lg);
            right: var(--spacing-lg);
            z-index: 10;
            background: rgba(255, 255, 255, 0.2);
            border: 2px solid rgba(255, 255, 255, 0.5);
            color: var(--color-text-light);
            width: 44px;
            height: 44px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            transition: all var(--transition-fast);
            backdrop-filter: blur(4px);
        }

        .video-control-btn:hover,
        .video-control-btn:focus {
            background: rgba(255, 255, 255, 0.3);
            border-color: rgba(255, 255, 255, 0.8);
            transform: scale(1.05);
        }

        .video-control-btn .fa-play {
            display: none;
        }

        .video-control-btn.is-paused .fa-pause {
            display: none;
        }

        .video-control-btn.is-paused .fa-play {
            display: inline-block;
        }

        .hero-content {
            position: relative;
            z-index: 10;
            text-align: center;
        }

        .hero-logo {
            max-width: 900px;
            width: 95%;
            margin: 0 auto;
        }

        .hero-logo-mobile {
            display: none;
            max-width: 200px;
            margin: 0 auto;
        }

        .hero-slogan {
            font-family: 'Open Sans', Arial, sans-serif;
            font-size: 1.35rem;
            font-weight: 300;
            color: rgba(255, 255, 255, 0.9);
            letter-spacing: 0.15em;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
            margin-top: var(--spacing-md);
        }

        /* Simple straight bar transition */
        .hero::after {
            content: '';
            position: absolute;
            bottom: -20px;
            left: 0;
            right: 0;
            height: 20px;
            background: #9a9a9a;
            z-index: 20;
        }

        /* ============================================
           Section Styles
           ============================================ */
        .section {
            padding: var(--spacing-xxl) var(--spacing-md);
        }

        .section-light {
            background: var(--color-bg-white);
            padding-top: calc(var(--spacing-xxl) + 60px);
        }

        .section-dark {
            background: var(--color-primary-dark);
            color: var(--color-text-light);
        }

        .section-dark h2,
        .section-dark h3 {
            color: var(--color-text-light);
        }

        .section-dark .section-title::after {
            background: var(--color-text-light);
        }

        .section-header {
            text-align: center;
            margin-bottom: var(--spacing-xl);
        }

        .section-title {
            font-family: 'Open Sans', Arial, sans-serif;
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--color-text-dark);
            text-transform: uppercase;
            letter-spacing: 0.15em;
            position: relative;
            display: inline-block;
            padding-bottom: 15px;
        }

        .section-title::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 3px;
            background: var(--color-primary-green);
        }

        .section-dark .section-title {
            color: var(--color-text-light);
        }

        .section-description {
            max-width: 800px;
            margin: var(--spacing-md) auto 0;
            font-size: 1rem;
            line-height: 1.8;
        }

        /* ============================================
           Feature Cards (Our Mission Section)
           ============================================ */
        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: var(--spacing-lg);
            max-width: 1100px;
            margin: 0 auto;
        }

        .feature-card {
            background: var(--color-bg-white);
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
            text-align: center;
            transition: all var(--transition-normal);
            display: flex;
            flex-direction: column;
        }

        .feature-card:hover {
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
        }

        .feature-card-image {
            width: 100%;
            height: 200px;
            background-size: cover;
            background-position: center;
        }

        .feature-card-body {
            padding: var(--spacing-lg);
            display: flex;
            flex-direction: column;
            flex-grow: 1;
        }

        .feature-card h3 {
            font-family: 'Open Sans', sans-serif;
            font-size: 1.1rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: #4a5d4a;
            margin-bottom: var(--spacing-sm);
        }

        .feature-card p {
            font-size: 0.95rem;
            color: #666;
            margin-bottom: var(--spacing-md);
            flex-grow: 1;
        }

        .feature-card .btn {
            margin-top: auto;
            align-self: center;
        }

        /* ============================================
           Buttons
           ============================================ */
        .btn {
            display: inline-block;
            padding: var(--spacing-sm) var(--spacing-lg);
            font-family: var(--font-body);
            font-size: 0.875rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            text-decoration: none;
            border: 2px solid var(--color-text-dark);
            border-radius: var(--radius-sm);
            background: transparent;
            color: var(--color-text-dark);
            cursor: pointer;
            transition: all var(--transition-fast);
        }

        .btn:hover,
        .btn:focus {
            background: var(--color-text-dark);
            color: var(--color-text-light);
        }

        .btn-light {
            border-color: var(--color-text-light);
            color: var(--color-text-light);
        }

        .btn-light:hover,
        .btn-light:focus {
            background: var(--color-text-light);
            color: var(--color-primary-dark);
        }

        /* ============================================
           Footer
           ============================================ */
        .site-footer {
            background: #333333;
            color: #e8e0d5;
            padding: 0;
        }

        .footer-top {
            max-width: 1200px;
            margin: 0 auto;
            padding: 50px 30px 30px;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 40px;
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }

        .footer-section p,
        .footer-section a,
        .footer-section address {
            font-style: normal;
            font-size: 0.9rem;
            line-height: 1.7;
            color: #e8e0d5;
            margin: 0;
        }

        .footer-section nav {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

        .footer-section nav a {
            display: inline-block;
            padding: 6px 0;
        }

        .footer-section a {
            text-decoration: none;
            color: #e8e0d5;
            transition: color 0.3s ease;
        }

        /* Hide mobile-only footer links on desktop */
        .footer-section nav a.mobile-footer-link {
            display: none;
        }

        /* Hide mobile-only hours and link text on desktop */
        .hours-mobile,
        .footer-section nav a.link-mobile {
            display: none;
        }

        .footer-section a:hover,
        .footer-section a:focus {
            color: #7ab541;
        }

        .footer-middle {
            max-width: 1200px;
            margin: 0 auto;
            padding: 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .footer-social a {
            display: inline-block;
            margin-right: 20px;
            color: #e8e0d5;
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .footer-social a:hover,
        .footer-social a:focus {
            color: #7ab541;
        }

        .footer-middle-links a {
            color: #e8e0d5;
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .footer-middle-links a:hover,
        .footer-middle-links a:focus {
            color: #7ab541;
        }

        .footer-middle-links span {
            margin: 0 8px;
            color: #b0b0b0;
        }

        .footer-bottom {
            background: #222222;
            padding: 20px 30px;
            text-align: center;
            font-size: 0.875rem;
            color: #e8e0d5;
        }

        .footer-bottom p {
            margin: 0;
        }

        .footer-credit {
            margin-top: 8px;
            font-size: 0.8rem;
            color: #aaa;
        }

        /* ============================================
           Scroll to Top Button
           ============================================ */
        .scroll-to-top {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 50px;
            height: 50px;
            background: #555555;
            color: white;
            border: none;
            border-radius: 12px;
            font-size: 1.5rem;
            cursor: pointer;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
            z-index: 999;
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        }

        .scroll-to-top:hover {
            background: #444444;
            transform: translateY(-3px);
            box-shadow: 0 6px 16px rgba(0,0,0,0.3);
        }

        .scroll-to-top.show {
            opacity: 1;
            visibility: visible;
        }

        /* ============================================
           Chatbot Button - Match Scroll to Top
           ============================================ */
        .ls-chat-button {
            width: 50px !important;
            height: 50px !important;
            bottom: 30px !important;
            left: 30px !important;
            border-radius: 12px !important;
            background: #555555 !important;
        }

        .ls-chat-button svg {
            width: 26px !important;
            height: 26px !important;
        }

        /* Mobile: Smaller, aligned buttons */
        @media (max-width: 480px) {
            .scroll-to-top {
                width: 44px !important;
                height: 44px !important;
                bottom: 15px !important;
                right: 15px !important;
                font-size: 1.25rem !important;
                border-radius: 10px !important;
            }

            .ls-chat-button {
                width: 44px !important;
                height: 44px !important;
                bottom: 15px !important;
                left: 15px !important;
                border-radius: 10px !important;
            }

            .ls-chat-button svg {
                width: 22px !important;
                height: 22px !important;
            }
        }

        /* ============================================
           Print Styles
           ============================================ */
        @media print {
            .site-header,
            .skip-link,
            .nav-toggle {
                display: none;
            }

            .hero {
                min-height: auto;
                padding: var(--spacing-lg);
                background: none;
                color: var(--color-text-dark);
            }

            .section-dark {
                background: none;
                color: var(--color-text-dark);
            }

            .section-dark h2,
            .section-dark h3,
            .section-dark .section-title {
                color: var(--color-text-dark);
            }
        }

        /* ============================================
           Reduced Motion
           ============================================ */
        @media (prefers-reduced-motion: reduce) {
            *,
            *::before,
            *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }

            html {
                scroll-behavior: auto;
            }

            /* Pause video for users who prefer reduced motion */
            .hero-video {
                display: none;
            }

            .hero-video-container {
                background: var(--color-primary-dark);
            }
        }

        /* ============================================
           MODAL SYSTEM - Style 2: Slide Up
           ============================================ */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.6);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10000;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
            padding: 20px;
            backdrop-filter: blur(4px);
        }

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

        .modal {
            background: white;
            width: 100%;
            max-width: 900px;
            max-height: 90vh;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            position: relative;
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            transform: translateY(100px);
            opacity: 0;
            transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
            border-top: 5px solid var(--color-accent);
        }

        .modal-overlay.active .modal {
            transform: translateY(0);
            opacity: 1;
        }

        .modal-header {
            background: white;
            padding: 30px 30px 20px;
            border-bottom: 1px solid #eee;
            position: relative;
        }

        .modal-header h2 {
            font-family: 'Open Sans', sans-serif;
            font-size: 1.75rem;
            font-weight: 700;
            color: var(--color-primary-dark);
            text-align: center;
            margin: 0;
            text-transform: uppercase;
            letter-spacing: 2px;
        }

        .modal-header h2::before,
        .modal-header h2::after {
            display: none;
        }

        .modal-header h2 .title-underline {
            display: block;
            width: 60px;
            height: 3px;
            background: var(--color-accent);
            margin: 15px auto 0;
        }

        .modal-close {
            position: absolute;
            top: 15px;
            right: 15px;
            width: 44px;
            height: 44px;
            border-radius: 12px;
            background: #f5f5f5 !important;
            color: #666 !important;
            font-size: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
            cursor: pointer;
            transition: all 0.2s ease;
            z-index: 10;
        }

        .modal-close:hover {
            background: #e0e0e0 !important;
            color: #333 !important;
        }

        .modal-close:focus {
            outline: 3px solid var(--color-accent);
            outline-offset: 2px;
        }

        .modal-body {
            overflow-y: auto;
            flex: 1;
            padding: 30px;
            background: #fafafa;
        }

        .modal-intro {
            margin-bottom: 25px;
        }

        .modal-intro h3 {
            font-family: 'Open Sans', sans-serif;
            font-size: 1.125rem;
            font-weight: 700;
            color: #333;
            margin-bottom: 12px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .modal-intro h3::before,
        .modal-intro h3::after {
            display: none;
        }

        .modal-intro p {
            color: #666;
            line-height: 1.7;
        }

        .values-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 25px;
            margin: 30px 0;
        }

        .value-item {
            text-align: center;
        }

        .value-item .value-image {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            margin: 0 auto 12px;
            overflow: hidden;
            border: 3px solid #c9b18c;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .value-item .value-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .value-item:hover .value-image {
            transform: scale(1.05);
            box-shadow: 0 8px 25px rgba(122, 181, 65, 0.3);
            border-color: var(--color-accent);
        }

        .value-item h4 {
            font-family: 'Open Sans', sans-serif;
            font-size: 0.8125rem;
            font-weight: 700;
            color: #4a5d4a;
            text-transform: uppercase;
            letter-spacing: 0.3px;
            line-height: 1.4;
            margin: 0;
        }

        .value-item h4::before,
        .value-item h4::after {
            display: none;
        }

        .modal-actions .modal-btn,
        .modal-btn {
            padding: 0.75rem 1.75rem;
            border-radius: 6px;
            font-size: 0.8125rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none !important;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-family: 'Open Sans', sans-serif;
            background: #f0f0f0 !important;
            color: #4a5d4a !important;
            border: none !important;
        }

        .modal-actions .modal-btn:hover,
        .modal-btn:hover {
            background: #7ab541 !important;
            color: white !important;
        }

        .modal-btn:focus {
            outline: 3px solid var(--color-accent);
            outline-offset: 2px;
        }

        /* Modal Responsive */
        @media (max-width: 768px) {
            .values-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 20px;
            }

            .value-item .value-image {
                width: 100px;
                height: 100px;
            }

            .modal-header h2 {
                font-size: 1.375rem;
                padding-right: 40px;
            }

            .modal-actions {
                flex-direction: column;
            }

            .modal-btn {
                width: 100%;
                justify-content: center;
            }

            .modal-body {
                padding: 20px;
            }
        }

        @media (max-width: 480px) {
            .values-grid {
                gap: 15px;
            }

            .value-item .value-image {
                width: 85px;
                height: 85px;
            }

            .value-item h4 {
                font-size: 0.6875rem;
            }

            .modal-header {
                padding: 20px 20px 15px;
            }

            .modal-header h2 {
                font-size: 1.125rem;
                letter-spacing: 1px;
            }

            .modal-close {
                width: 38px;
                height: 38px;
                top: 12px;
                right: 12px;
            }
        }

        /* ============================================
           Modal Accessibility Styles
           (Apply body accessibility classes to modal)
           ============================================ */
        
        /* Readable Font in Modal */
        body.readable-font .modal,
        body.readable-font .modal-overlay {
            font-family: 'OpenDyslexic', sans-serif !important;
        }

        /* Dark Mode in Modal */
        body.dark-mode .modal {
            background: #1a1a1a !important;
            color: #e0e0e0 !important;
        }

        body.dark-mode .modal-header {
            background: #252525 !important;
            border-color: #333 !important;
        }

        body.dark-mode .modal-header h2 {
            color: #e0e0e0 !important;
        }

        body.dark-mode .modal-body {
            background: #1a1a1a !important;
        }

        body.dark-mode .modal-intro h3,
        body.dark-mode .modal-intro p,
        body.dark-mode .value-item h4 {
            color: #e0e0e0 !important;
        }

        body.dark-mode .modal-close {
            background: #333 !important;
            color: #e0e0e0 !important;
        }

        body.dark-mode .modal-close:hover {
            background: #444 !important;
        }

        body.dark-mode .modal-actions {
            border-color: #333 !important;
        }

        body.dark-mode .modal-btn {
            background: #333 !important;
            color: #e0e0e0 !important;
        }

        body.dark-mode .modal-btn:hover {
            background: #7ab541 !important;
            color: white !important;
        }

        /* Highlight Links in Modal */
        body.highlight-links .modal a {
            background: #ffff00 !important;
            color: #000 !important;
            padding: 2px 4px;
        }

        body.highlight-links .modal-btn {
            background: #ffff00 !important;
            color: #000 !important;
            border-color: #000 !important;
        }

        /* Large Cursor in Modal */
        body.large-cursor .modal,
        body.large-cursor .modal * {
            cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path fill="black" stroke="white" stroke-width="1" d="M0,0 L0,24 L6,18 L12,28 L16,26 L10,16 L18,16 Z"/></svg>'), auto !important;
        }

        /* Focus Indicators in Modal */
        body.focus-indicators .modal *:focus {
            outline: 3px solid #ff0000 !important;
            outline-offset: 2px !important;
        }

        /* Grayscale in Modal */
        body.grayscale .modal-overlay,
        .page-wrapper.grayscale ~ .modal-overlay {
            filter: grayscale(100%);
        }

        /* Invert Colors in Modal */
        body.invert-colors .modal-overlay,
        .page-wrapper.invert-colors ~ .modal-overlay {
            filter: invert(100%);
        }

        .page-wrapper.invert-colors ~ .modal-overlay img {
            filter: invert(100%);
        }

        /* ============================================
           ADA Accessibility Widget - Style 5
           ============================================ */
        
        /* Readable Font (Dyslexia-friendly) */
        body.readable-font,
        body.readable-font * {
            font-family: 'OpenDyslexic', sans-serif !important;
        }

        /* Header & Navigation */
        body.dark-mode .site-header {
            background: #0d0d0d;
        }
        body.dark-mode .nav-link {
            color: #e0e0e0;
        }
        body.dark-mode .nav-link:hover {
            color: #7ab541;
        }
        body.dark-mode .dropdown-menu {
            background: #1a1a1a;
            border-color: #404040;
        }
        body.dark-mode .dropdown-item {
            color: #e0e0e0;
        }
        body.dark-mode .dropdown-item:hover {
            background: #333333;
            color: #7ab541;
        }

        /* General Sections */
        body.dark-mode .section-light,
        body.dark-mode .section-white,
        body.dark-mode .section-gray {
            background: #1a1a1a;
            color: #e0e0e0;
        }
        body.dark-mode .section-title,
        body.dark-mode h2,
        body.dark-mode h3,
        body.dark-mode h4 {
            color: #ffffff;
        }
        body.dark-mode p,
        body.dark-mode li {
            color: #d0d0d0;
        }

        /* Feature Cards */
        body.dark-mode .feature-card,
        body.dark-mode .team-card {
            background: #2a2a2a !important;
            color: #e0e0e0 !important;
            border-color: #404040 !important;
        }
        body.dark-mode .feature-card h3,
        body.dark-mode .team-card h3 {
            color: #7ab541 !important;
        }
        body.dark-mode .feature-card p,
        body.dark-mode .team-card p {
            color: #c0c0c0 !important;
        }
        /* Team Card Specific Elements */
        body.dark-mode .team-card-name {
            color: #7ab541 !important;
        }
        body.dark-mode .team-card-credentials {
            color: #b0b0b0 !important;
        }
        body.dark-mode .team-card-info {
            background: #2a2a2a !important;
        }
        body.dark-mode .team-card-photo {
            background: #333333 !important;
        }
        body.dark-mode .team-card-arrow {
            color: #666666 !important;
        }
        body.dark-mode .team-card:hover .team-card-arrow {
            color: #7ab541 !important;
        }

        /* Info Card */
        body.dark-mode .info-card {
            background: #2a2a2a !important;
            color: #e0e0e0 !important;
            border-color: #404040 !important;
        }
        body.dark-mode .info-card-content {
            background: #2a2a2a !important;
        }
        body.dark-mode .info-section {
            border-color: #404040 !important;
        }
        body.dark-mode .info-section h3 {
            color: #7ab541 !important;
        }
        body.dark-mode .info-section p,
        body.dark-mode .info-section address {
            color: #c0c0c0 !important;
        }
        body.dark-mode .info-section a {
            color: #7ab541 !important;
        }
        body.dark-mode .hours-note {
            color: #7ab541 !important;
        }
        body.dark-mode .btn-small {
            background: #333333 !important;
            color: #e0e0e0 !important;
            border-color: #505050 !important;
        }
        body.dark-mode .btn-small:hover {
            background: #7ab541 !important;
            color: #000000 !important;
        }

        /* Service Cards */
        body.dark-mode .service-card {
            background: #2a2a2a;
            color: #e0e0e0;
            border-color: #404040;
        }
        body.dark-mode .service-card-content {
            background: #2a2a2a;
        }
        body.dark-mode .service-card-title {
            color: #7ab541;
        }
        body.dark-mode .service-card-desc {
            color: #c0c0c0;
        }
        body.dark-mode .service-card-reasons {
            background: #333333;
            border-color: #404040;
        }
        body.dark-mode .service-card-reasons-title {
            color: #e0e0e0;
        }
        body.dark-mode .service-card-reasons li {
            color: #c0c0c0;
            border-color: #404040;
        }
        body.dark-mode .service-card-reasons li::before {
            color: #7ab541;
        }
        body.dark-mode .service-card-btn {
            background: #333333;
            color: #ffffff;
            border-color: #7ab541;
        }
        body.dark-mode .service-card-btn:hover {
            background: #7ab541;
            color: #000000;
        }

        /* Step Cards (Visit With Us / Reachout page) */
        body.dark-mode .step-card {
            background: #2a2a2a;
            color: #e0e0e0;
            border-color: #404040;
        }
        body.dark-mode .step-number {
            background: #7ab541;
            color: #000000;
        }
        body.dark-mode .step-title {
            color: #ffffff;
        }
        body.dark-mode .step-desc {
            color: #c0c0c0;
        }
        body.dark-mode .step-desc a {
            color: #7ab541;
        }
        body.dark-mode .steps-grid .step-card {
            background: #2a2a2a;
        }
        body.dark-mode .specialty-tag,
        body.dark-mode .tag {
            background: #333333 !important;
            color: #e0e0e0 !important;
            border-color: #505050 !important;
        }

        /* Forms */
        body.dark-mode .form-wrapper,
        body.dark-mode .intake-form,
        body.dark-mode .contact-form {
            background: #2a2a2a;
            border-color: #404040;
        }
        body.dark-mode .form-group label,
        body.dark-mode .form-group legend {
            color: #e0e0e0;
        }
        body.dark-mode .form-group input,
        body.dark-mode .form-group select,
        body.dark-mode .form-group textarea {
            background: #333333;
            color: #e0e0e0;
            border-color: #505050;
        }
        body.dark-mode .form-group input::placeholder,
        body.dark-mode .form-group textarea::placeholder {
            color: #888888;
        }
        body.dark-mode .form-group input:focus,
        body.dark-mode .form-group select:focus,
        body.dark-mode .form-group textarea:focus {
            border-color: #7ab541;
            background: #3a3a3a;
        }
        body.dark-mode .radio-group label,
        body.dark-mode .checkbox-group label {
            color: #e0e0e0;
        }
        body.dark-mode .privacy-card h2,
        body.dark-mode .privacy-card h3,
        body.dark-mode .privacy-card h4 {
            color: #ffffff;
        }
        body.dark-mode .privacy-card p,
        body.dark-mode .privacy-card li {
            color: #c0c0c0;
        }
        body.dark-mode .privacy-card a {
            color: #7ab541;
        }
        body.dark-mode .info-box,
        body.dark-mode .notice-box,
        body.dark-mode .hipaa-notice {
            background: #333333;
            border-color: #7ab541;
            color: #e0e0e0;
        }
        body.dark-mode .contact-box {
            background: #333333;
            color: #e0e0e0;
        }

        /* CTA Sections (keep green but adjust text) */
        body.dark-mode .cta-section,
        body.dark-mode .section-cta {
            background: #3d5a1f;
        }

        /* Buttons (general) */
        body.dark-mode .btn-outline,
        body.dark-mode .btn-secondary {
            background: transparent;
            color: #e0e0e0;
            border-color: #e0e0e0;
        }
        body.dark-mode .btn-outline:hover,
        body.dark-mode .btn-secondary:hover {
            background: #e0e0e0;
            color: #1a1a1a;
        }

        /* Links */
        body.dark-mode a:not(.btn):not(.nav-link):not(.dropdown-item) {
            color: #7ab541;
        }
        body.dark-mode a:not(.btn):not(.nav-link):not(.dropdown-item):hover {
            color: #8ec653;
        }

        /* Footer */
        body.dark-mode footer {
            background: #0d0d0d;
            color: #e0e0e0;
        }
        body.dark-mode footer a {
            color: #b0b0b0;
        }
        body.dark-mode footer a:hover {
            color: #7ab541;
        }
        body.dark-mode footer h4,
        body.dark-mode .footer-heading {
            color: #ffffff;
        }

        /* Misc Elements */
        body.dark-mode hr {
            border-color: #404040;
        }
        body.dark-mode blockquote {
            border-color: #7ab541;
            background: #2a2a2a;
            color: #c0c0c0;
        }
        body.dark-mode .divider::after,
        body.dark-mode .section-title::after {
            background: #7ab541;
        }
        body.dark-mode .icon-circle,
        body.dark-mode .step-icon {
            background: #333333;
            color: #7ab541;
        }
        body.dark-mode .card,
        body.dark-mode .box {
            background: #2a2a2a;
            border-color: #404040;
            color: #e0e0e0;
        }

        /* Tables */
        body.dark-mode table {
            background: #2a2a2a;
            color: #e0e0e0;
        }
        body.dark-mode th {
            background: #333333;
            color: #ffffff;
            border-color: #404040;
        }
        body.dark-mode td {
            border-color: #404040;
        }
        body.dark-mode tr:nth-child(even) {
            background: #333333;
        }

        /* Scrollbar */
        body.dark-mode ::-webkit-scrollbar-track {
            background: #1a1a1a;
        }
        body.dark-mode ::-webkit-scrollbar-thumb {
            background: #404040;
        }
        body.dark-mode ::-webkit-scrollbar-thumb:hover {
            background: #505050;
        }

        /* Grayscale Mode - applied to wrapper and header separately to preserve fixed positioning */
        .page-wrapper.grayscale,
        .site-header.grayscale {
            filter: grayscale(100%);
        }

        /* Invert Colors - applied to wrapper and header separately to preserve fixed positioning */
        .page-wrapper.invert-colors,
        .site-header.invert-colors {
            filter: invert(100%);
        }

        /* Invert body background when invert mode is active */
        body.invert-colors-active {
            background-color: #000000;
        }

        /* Double-invert images, videos, and specific background images to preserve natural appearance */
        .page-wrapper.invert-colors img,
        .page-wrapper.invert-colors video,
        .page-wrapper.invert-colors .feature-card-image,
        .page-wrapper.invert-colors .team-member-image,
        .page-wrapper.invert-colors .staff-image,
        .page-wrapper.invert-colors .service-card-image,
        .page-wrapper.invert-colors .page-hero-bg,
        .site-header.invert-colors img {
            filter: invert(100%);
        }

        /* Highlight Links */
        body.highlight-links a {
            background: #ffff00 !important;
            color: #000000 !important;
            padding: 2px 4px;
            text-decoration: underline !important;
        }

        /* Large Cursor */
        body.large-cursor,
        body.large-cursor * {
            cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24"><path fill="%23000" stroke="%23fff" stroke-width="1" d="M5 3l14 9-7 2-4 7z"/></svg>') 0 0, auto !important;
        }

        /* Focus Indicators */
        body.focus-indicators *:focus {
            outline: 3px solid #ff0000 !important;
            outline-offset: 2px !important;
        }

        /* Pause Animations */
        body.pause-animations *,
        body.pause-animations *::before,
        body.pause-animations *::after {
            animation: none !important;
            transition: none !important;
        }

        body.pause-animations .hero-video {
            display: none !important;
        }

        /* ADA Widget Elements - Style 5: Side Tab with Flyout */
        .ada-widget {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
        }

        .ada-panel {
            position: fixed;
            right: -300px;
            top: 50%;
            transform: translateY(-50%);
            width: 300px;
            max-height: 80vh;
            background: white;
            border-radius: 20px 0 0 20px;
            box-shadow: -4px 0 25px rgba(0,0,0,0.15);
            z-index: 9999;
            transition: right 0.3s ease;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            font-size: 14px !important;
        }

        .ada-panel.open {
            right: 0;
        }

        .ada-panel-header {
            background: #333;
            color: white;
            padding: 18px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-shrink: 0;
        }

        .ada-panel-header h2 {
            margin: 0;
            font-size: 16px;
            display: flex;
            align-items: center;
            gap: 10px;
            color: white;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }

        .ada-panel-header h2::after {
            display: none;
        }

        .ada-panel-header h2 i {
            color: #7ab541;
            font-size: 20px;
        }

        .ada-close {
            background: rgba(255,255,255,0.1);
            border: none;
            color: white;
            width: 34px;
            height: 34px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 16px;
            transition: background 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .ada-close:hover {
            background: rgba(255,255,255,0.2);
        }

        .ada-panel-body {
            flex: 1;
            overflow-y: auto;
            padding: 20px;
        }

        .ada-section {
            margin-bottom: 20px;
        }

        .ada-section-title {
            font-size: 11px;
            font-weight: 700;
            color: #595959;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 12px;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }

        .ada-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid #eee;
        }

        .ada-row:last-child {
            border-bottom: none;
        }

        .ada-row .ada-label {
            font-size: 13px;
            color: #333;
            display: flex;
            align-items: center;
            gap: 8px;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }

        .ada-row .ada-label i {
            width: 18px;
            color: #7ab541;
            text-align: center;
            font-size: 14px;
        }

        /* Toggle Switch */
        .ada-toggle {
            width: 44px;
            height: 24px;
            background: #ddd;
            border-radius: 12px;
            position: relative;
            cursor: pointer;
            transition: background 0.2s;
            flex-shrink: 0;
        }

        .ada-toggle.active {
            background: #7ab541;
        }

        .ada-toggle::after {
            content: '';
            position: absolute;
            width: 20px;
            height: 20px;
            background: white;
            border-radius: 50%;
            top: 2px;
            left: 2px;
            transition: transform 0.2s;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }

        .ada-toggle.active::after {
            transform: translateX(20px);
        }

        /* Slider Control */
        .ada-slider {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .ada-slider button {
            width: 28px;
            height: 28px;
            border: 1px solid #ddd;
            background: white;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            color: #333;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }

        .ada-slider button:hover {
            background: #f5f5f5;
            border-color: #7ab541;
        }

        .ada-slider span {
            font-size: 13px;
            font-weight: 600;
            min-width: 45px;
            text-align: center;
            color: #333;
        }

        /* Reset Button */
        .ada-reset {
            width: 100%;
            padding: 12px;
            background: #f5f5f5;
            border: none;
            border-radius: 10px;
            color: #666;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transition: all 0.2s;
            margin-top: 10px;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }

        .ada-reset:hover {
            background: #eee;
            color: #333;
        }

        /* Dark mode overrides for widget - Enhanced */
        body.dark-mode .ada-panel {
            background: #1a1a1a;
            border-color: #404040;
        }

        body.dark-mode .ada-panel-header {
            background: #0d0d0d;
        }

        body.dark-mode .ada-panel-body {
            color: #e0e0e0;
            background: #1a1a1a;
        }

        body.dark-mode .ada-section-title {
            color: #b0b0b0;
        }

        body.dark-mode .ada-row {
            border-color: #333333;
        }

        body.dark-mode .ada-row .ada-label,
        body.dark-mode .ada-row label,
        body.dark-mode .ada-label {
            color: #e0e0e0;
        }

        body.dark-mode .ada-label i {
            color: #7ab541;
        }

        body.dark-mode .ada-slider span {
            color: #e0e0e0;
            background: #2a2a2a;
        }

        body.dark-mode .ada-slider button {
            background: #2a2a2a;
            border-color: #505050;
            color: #e0e0e0;
        }

        body.dark-mode .ada-slider button:hover {
            background: #333333;
            border-color: #7ab541;
        }

        body.dark-mode .ada-toggle {
            background: #404040;
        }

        body.dark-mode .ada-toggle.active {
            background: #7ab541;
        }

        body.dark-mode .ada-reset {
            background: #2a2a2a;
            color: #c0c0c0;
            border-color: #404040;
        }

        body.dark-mode .ada-reset:hover {
            background: #333333;
            color: #ffffff;
        }

/* ---------------------------------------------------------------------
 * High contrast
 *
 * The ADA panel offers this alongside dark mode. It previously existed
 * only on nine profile pages (an older template) and was never carried
 * over here, so the option was absent from every top-level page.
 *
 * Selectors repeat .high-contrast to raise specificity. The dark-mode
 * rules above use !important at specificity (0,2,1); without the bump,
 * turning high contrast on while dark mode is already on would leave
 * cards and body text at dark-mode greys instead of pure black and
 * white, which defeats the purpose of the mode.
 * --------------------------------------------------------------------- */
body.high-contrast {
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* Strip decorative colour so nothing competes with the black field. */
body.high-contrast.high-contrast.high-contrast *,
body.high-contrast.high-contrast.high-contrast *::before,
body.high-contrast.high-contrast.high-contrast *::after {
    background-color: transparent !important;
    background-image: none !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

body.high-contrast.high-contrast.high-contrast .site-header,
body.high-contrast.high-contrast.high-contrast .nav-menu,
body.high-contrast.high-contrast.high-contrast .site-footer,
body.high-contrast.high-contrast.high-contrast .footer-bottom,
body.high-contrast.high-contrast.high-contrast .ada-panel,
body.high-contrast.high-contrast.high-contrast .scroll-to-top,
body.high-contrast.high-contrast.high-contrast .ls-chat-button,
body.high-contrast.high-contrast.high-contrast .skip-link {
    background-color: #000000 !important;
    border: 1px solid #ffffff !important;
}

/* Yellow on black is the conventional high-contrast link pairing; the
   underline keeps links identifiable without relying on colour alone. */
body.high-contrast.high-contrast.high-contrast a,
body.high-contrast.high-contrast.high-contrast a * {
    color: #ffff00 !important;
    text-decoration: underline !important;
}

/* Controls need a visible edge once their fills are stripped. */
body.high-contrast.high-contrast.high-contrast button,
body.high-contrast.high-contrast.high-contrast .btn,
body.high-contrast.high-contrast.high-contrast input,
body.high-contrast.high-contrast.high-contrast select,
body.high-contrast.high-contrast.high-contrast textarea {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
}
body.high-contrast.high-contrast.high-contrast ::placeholder {
    color: #cccccc !important;
    opacity: 1 !important;
}

/* The accessibility panel's own switches signal on/off through their
   background colour, which the blanket rule above would have flattened. */
body.high-contrast.high-contrast.high-contrast .ada-toggle {
    background-color: #000000 !important;
    border: 2px solid #ffffff !important;
}
body.high-contrast.high-contrast.high-contrast .ada-toggle.active {
    background-color: #ffff00 !important;
}
body.high-contrast.high-contrast.high-contrast .ada-toggle::after {
    background-color: #ffffff !important;
}
body.high-contrast.high-contrast.high-contrast .ada-toggle.active::after {
    background-color: #000000 !important;
}

/* Keep focus obvious against the black field. */
body.high-contrast.high-contrast.high-contrast *:focus,
body.high-contrast.high-contrast.high-contrast *:focus-visible {
    outline: 3px solid #ffff00 !important;
    outline-offset: 2px !important;
}

        /* ============================================
           Accessibility drawer toggle in the main nav
           ============================================ */
        /* Replaces the fixed tab that used to sit against the right edge of
           the viewport. Icon only - the aria-label carries the name for
           screen readers. The drawer itself is unchanged and still slides in
           from the same place; this button just opens and closes it. */
        .nav-ada-item {
            display: flex;
            align-items: center;
        }

        .nav-ada-toggle {
            display: flex;
            align-items: center;
            justify-content: center;
            background: transparent;
            border: none;
            cursor: pointer;
            color: var(--color-text-light);
            font-size: 1.2rem;
            line-height: 1;
            padding: var(--spacing-xs) var(--spacing-sm);
            border-radius: var(--radius-sm);
            transition: color var(--transition-fast), background var(--transition-fast);
        }

        /* Hover gives feedback with a background tint only. The icon must stay
           white while the drawer is closed, so no colour change here - and
           deliberately no :focus colour either: the button keeps focus after a
           click, which previously left it looking green with the drawer shut. */
        .nav-ada-toggle:hover {
            background: rgba(255, 255, 255, 0.1);
        }

        /* Green ONLY while the drawer is open. Declared after :hover so it
           still wins when the button is both open and hovered. Keyboard focus
           is still shown by the global :focus-visible outline. */
        .nav-ada-toggle[aria-expanded="true"] {
            color: var(--color-primary-light);
            background: rgba(255, 255, 255, 0.15);
        }

        /* Below the nav breakpoint the menu collapses behind the hamburger,
           which would bury this button. The header's own always-visible
           accessibility button (.ada-toggle-mobile) covers mobile instead. */
        @media (max-width: 768px) {
            .nav-ada-item {
                display: none;
            }
        }

        /* ============================================
           Drawer variant of the modal
           ============================================ */
        /* Same dialog semantics and the same openModal/closeModal JS - only the
           presentation differs. Opted into per-dialog with .modal-drawer, so
           other modals on the site keep the centred treatment.
           Desktop: slides in from the right. Mobile: rises from the bottom. */
        .modal-overlay.modal-drawer {
            align-items: stretch;
            justify-content: flex-end;
            padding: 0;
        }

        .modal-overlay.modal-drawer .modal {
            width: min(520px, 100%);
            max-width: 100%;
            height: 100%;
            max-height: 100%;
            border-radius: 0;
            border-top: none;
            border-left: 5px solid var(--color-primary-green);   /* --color-accent is never defined anywhere, so the existing modal's accent border renders as nothing; use the brand green that actually exists */
            box-shadow: -20px 0 60px rgba(0, 0, 0, 0.3);
            /* Start off-screen to the right rather than below. */
            transform: translateX(100%);
            opacity: 1;
            transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
        }

        .modal-overlay.modal-drawer.active .modal {
            transform: translateX(0);
        }

        /* The header stays put while the body scrolls, so the title and close
           button remain reachable in a long panel. */
        .modal-overlay.modal-drawer .modal-body {
            overscroll-behavior: contain;
        }

        /* Mobile: bottom sheet. Opens tall because some panels are long. */
        @media (max-width: 768px) {
            .modal-overlay.modal-drawer {
                align-items: flex-end;
                justify-content: center;
            }

            .modal-overlay.modal-drawer .modal {
                width: 100%;
                height: auto;
                max-height: 88vh;
                border-left: none;
                border-top: 5px solid var(--color-primary-green);
                border-radius: 18px 18px 0 0;
                box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.3);
                transform: translateY(100%);
            }

            .modal-overlay.modal-drawer.active .modal {
                transform: translateY(0);
            }
        }

        /* Someone who asked for reduced motion gets the panel without the slide. */
        @media (prefers-reduced-motion: reduce) {
            .modal-overlay.modal-drawer .modal {
                transition: none;
            }
        }

        /* ---- Mobile bottom-sheet grab bar ---------------------------------
           Only meaningful in the bottom-sheet layout, so it is hidden on the
           desktop side drawer where there is nothing to drag. */
        .modal-drawer-handle {
            display: none;
        }

        @media (max-width: 768px) {
            .modal-overlay.modal-drawer .modal-drawer-handle {
                display: block;
                flex: 0 0 auto;
                padding: 10px 0 4px;
                background: white;
                cursor: grab;
                /* Take over the vertical gesture; without this the browser
                   scrolls the page instead of letting us drag the sheet. */
                touch-action: none;
            }

            .modal-overlay.modal-drawer .modal-drawer-handle::before {
                content: '';
                display: block;
                width: 40px;
                height: 4px;
                margin: 0 auto;
                border-radius: 999px;
                background: #d2d2d2;
            }

            .modal-overlay.modal-drawer .modal-drawer-handle:active {
                cursor: grabbing;
            }

            /* While a finger is down the sheet must track it exactly, so the
               easing that animates open/close is suspended. */
            .modal-overlay.modal-drawer.is-dragging .modal {
                transition: none;
            }
        }

        /* ---- Desktop drawer: expanded / contracted ------------------------
           Scoped to min-width so the mobile bottom sheet, which has no size
           states, is left exactly as it is. */
        @media (min-width: 769px) {
            /* Expanded is the default: a wide working surface with the page
               behind it blurred back, so the panel is clearly the focus. */
            .modal-overlay.modal-drawer {
                background: rgba(0, 0, 0, 0.45);
                backdrop-filter: blur(10px);
                -webkit-backdrop-filter: blur(10px);
                transition: opacity 0.3s ease, visibility 0.3s ease,
                            background-color 0.3s ease, backdrop-filter 0.3s ease;
            }

            .modal-overlay.modal-drawer .modal {
                width: min(900px, 92vw);
                transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1),
                            width 0.3s cubic-bezier(0.32, 0.72, 0, 1);
            }

            /* Contracted: narrow panel, and the page behind returns to normal
               so it can be read and referred to while the panel stays open. */
            .modal-overlay.modal-drawer.is-contracted {
                background: rgba(0, 0, 0, 0);
                backdrop-filter: none;
                -webkit-backdrop-filter: none;
            }

            .modal-overlay.modal-drawer.is-contracted .modal {
                width: min(520px, 100%);
            }

            /* Size toggle sits immediately left of the close button
               (close is 44px wide at right:15px, so 15 + 44 + 8 = 67px). */
            .modal-size-toggle {
                position: absolute;
                top: 15px;
                right: 67px;
                width: 44px;
                height: 44px;
                border-radius: 12px;
                background: #f5f5f5;
                color: #666;
                font-size: 16px;
                display: flex;
                align-items: center;
                justify-content: center;
                border: none;
                cursor: pointer;
                transition: all 0.2s ease;
                z-index: 10;
            }

            .modal-size-toggle:hover {
                background: #e0e0e0;
                color: #333;
            }
        }

        /* The bottom sheet is a single size, so the control has no meaning there. */
        @media (max-width: 768px) {
            .modal-size-toggle {
                display: none;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .modal-overlay.modal-drawer,
            .modal-overlay.modal-drawer .modal {
                transition: none;
            }
        }

        /* ---- Drawer header: keep the title clear of the controls ----------
           The size toggle and close button are absolutely positioned at the
           top right. The shared .modal-header centres its title with no space
           reserved, so a long heading ran underneath those buttons. Reserve
           the right edge and left-align, matching the side-panel convention. */
        .modal-overlay.modal-drawer .modal-header {
            padding-right: 120px;
        }

        .modal-overlay.modal-drawer .modal-header h2 {
            text-align: left;
            font-size: 1.35rem;
            letter-spacing: 1px;
        }

        .modal-overlay.modal-drawer .modal-header h2 .title-underline {
            margin-left: 0;
        }

        @media (max-width: 768px) {
            /* The sheet shows only the close button, so it needs less room. */
            .modal-overlay.modal-drawer .modal-header {
                padding-right: 72px;
            }
        }

        /* ---- Drawer call-to-action ---------------------------------------
           Centred rather than pushed to the right edge: in a panel this is the
           single next step, so it reads better as a deliberate, central
           action than as a secondary control tucked in the corner. */
        .modal-overlay.modal-drawer .modal-actions {
            justify-content: center;
        }

        /* ---- Drawer call-to-action: solid green, larger, with an arrow ----
           The shared .modal-btn is pale grey with muted green text and only
           fills in on hover, which reads as a disabled control rather than the
           panel's primary action. These overrides need !important because the
           base rule uses it on background and colour.
           #3d7a1c is the green already used on the site's form buttons and
           measures 5.25:1 against white. The base hover colour (#7ab541) is
           NOT used here: white on that green is 2.47:1 and fails WCAG AA. */
        .modal-overlay.modal-drawer .modal-btn {
            background: #3d7a1c !important;
            color: #ffffff !important;
            font-size: 0.9375rem;
            padding: 1rem 2.25rem;
            border-radius: 8px;
        }

        .modal-overlay.modal-drawer .modal-btn:hover,
        .modal-overlay.modal-drawer .modal-btn:focus {
            background: #336617 !important;   /* darker, 6.88:1 */
            color: #ffffff !important;
        }

        /* The arrow signals that this leads somewhere rather than toggling
           something; nudging it on hover reinforces the direction. */
        .modal-overlay.modal-drawer .modal-btn i {
            font-size: 0.85em;
            /* The label is uppercase, so its glyphs stop at the baseline while
               its text box still reserves descender space below. Centring the
               two boxes therefore leaves the arrow sitting visibly high. This
               nudge drops it onto the optical midline of the capitals. */
            position: relative;
            top: 1.5px;
            transition: transform 0.2s ease;
        }

        .modal-overlay.modal-drawer .modal-btn:hover i {
            transform: translateX(3px);
        }