/* ---------------------------------------------------------------------
 * Luke & Spencer - staff profile page styles
 *
 * Shared by every page in /profiles/. Previously duplicated inline in
 * each one, in two slightly different versions; this is the fuller of
 * the two, so pages that had the reduced copy gain the dark-mode and
 * accessibility rules they were missing.
 * --------------------------------------------------------------------- */
        /* ============================================
           CSS Custom Properties (Design Tokens)
           ============================================ */
        :root {
            --color-primary-dark: #4a5d4a;
            /* Link colour: see the note on the `a` rule below. */
            --color-link: #3d7a1c;
            --color-primary-green: #7ab541;
            --color-primary-light: #8bc34a;
            --color-charcoal: #333333;
            --color-text-dark: #333333;
            --color-text-gray: #5a5a5a;
            --color-text-light: #ffffff;
            --color-bg-light: #f5f5f5;
            --color-bg-white: #ffffff;
            --color-bg-cream: #fafafa;
            --color-focus: #7ab541;
            --font-heading: 'Playfair Display', Georgia, serif;
            --font-body: 'Open Sans', Arial, sans-serif;
            --spacing-xs: 0.5rem;
            --spacing-sm: 1rem;
            --spacing-md: 1.5rem;
            --spacing-lg: 2rem;
            --spacing-xl: 3rem;
            --spacing-xxl: 4rem;
            --transition-fast: 0.2s ease;
            --transition-normal: 0.3s ease;
            --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
            --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
            --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
            --radius-sm: 4px;
            --radius-md: 8px;
            --radius-lg: 12px;
        }

        /* ============================================
           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); min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

        /* ============================================
           Accessibility
           ============================================ */
        .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 { 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); }
        /* Not --color-primary-green (#7ab541): that measures 2.47:1 on white,
           under the 4.5:1 WCAG AA minimum. --color-link (#3d7a1c) is the
           darker green already used on buttons and measures 5.25:1. Dark
           mode keeps the brighter green via its own rule. */

        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; }

        /* Page Wrapper */
        .page-wrapper { min-height: 100vh; overflow-x: hidden; }
        .page-wrapper.grayscale, .site-header.grayscale { filter: grayscale(100%); }
        .page-wrapper.invert-colors, .site-header.invert-colors { filter: invert(100%); }
        body.invert-colors-active { background-color: #000000; }
        .page-wrapper.invert-colors img, .page-wrapper.invert-colors video, .page-wrapper.invert-colors .profile-image, .site-header.invert-colors img { filter: invert(100%); }

        /* ============================================
           Header & Navigation (Always Scrolled State for Profile Pages)
           ============================================ */
        .site-header { position: fixed; top: 0; left: 0; right: 0; background: var(--color-charcoal); z-index: 1000; box-shadow: var(--shadow-sm); }
        .header-inner { display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-sm) var(--spacing-xl); max-width: 100%; margin: 0 auto; }
        .header-logo { height: 40px; width: auto; opacity: 1; max-width: 50px; margin-right: var(--spacing-sm); overflow: hidden; }
        .client-login { 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: 1px solid transparent; border-radius: var(--radius-sm); transition: all 0.3s ease; margin-right: auto; }
        .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); }
        .main-nav { display: flex; align-items: center; margin-left: auto; }
        .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); }
        .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); }
        .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); }

        /* ============================================
           Profile Page Styles
           ============================================ */
        .profile-page { background-color: var(--color-bg-light); padding: 120px 24px 80px; min-height: 100vh; }
        .profile-page-inner { max-width: 1100px; margin: 0 auto; }
        .back-link-top { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 24px; color: var(--color-text-gray); text-decoration: none; font-family: var(--font-body); font-size: 0.9rem; transition: color 0.2s ease; }
        .back-link-top:hover { color: var(--color-primary-green); }
        .back-link-top i { font-size: 0.8rem; transition: transform 0.2s ease; }
        .back-link-top:hover i { transform: translateX(-3px); }
        
        /* Profile Card Container */
        .profile-card { background: white; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); padding: 40px; overflow: hidden; }
        
        /* Two Column Layout - Photo sidebar on left, content on right */
        .profile-layout { display: grid; grid-template-columns: 180px 1fr; gap: 40px; align-items: start; }
        .profile-sidebar { margin: 0; padding: 0; }
        .profile-photo { width: 100%; aspect-ratio: 1; border-radius: var(--radius-lg); object-fit: cover; box-shadow: var(--shadow-md); margin: 0; }
        .profile-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; background: #fafafa; border-radius: 8px; padding: 16px; border: 1px solid #eee; }
        .specializing-label { width: 100%; font-size: 0.75rem; font-weight: 700; color: #555555; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; display: block; }
        .profile-tag { display: inline-block; padding: 5px 12px; background: white; color: var(--color-text-gray); font-family: var(--font-body); font-size: 0.75rem; font-weight: 600; border-radius: 4px; border: 1px solid #e5e5e5; }
        
        .profile-main { min-width: 0; margin: 0; padding: 0; }
        .profile-main header { margin: 0; padding: 0; }
        .profile-name { font-family: var(--font-heading); font-size: 2.4rem; font-weight: 600; color: var(--color-text-dark); line-height: 1.15; margin: 0 0 8px 0; }
        .profile-credentials { font-family: var(--font-body); font-size: 1.15rem; color: #555555; font-weight: 600; margin: 0 0 24px 0; }
        
        /* Profile Bio */
        .profile-bio { border-top: 1px solid #e5e5e5; padding-top: 24px; }
        .profile-bio p { margin-bottom: 20px; line-height: 1.85; color: var(--color-text-gray); font-size: 1rem; font-family: var(--font-body); }
        .profile-bio p:last-child { margin-bottom: 0; }

        /* Section headings within a bio. Only used by profiles whose bio is
           long enough to be sectioned; shorter bios remain plain paragraphs.
           Sized down from the browser default so a heading reads as a label
           within the bio rather than competing with the person's name. */
        .profile-bio h2 { font-family: var(--font-body); font-size: 1.05rem; font-weight: 700; color: var(--color-text-dark); margin: 28px 0 10px; }
        .profile-bio h2:first-child { margin-top: 0; }

        /* Book Section */
        .profile-book { margin-top: 48px; padding-top: 40px; border-top: 1px solid #e5e5e5; }

        /* Specialties Link - Hidden on desktop */
        .specialties-link {
            display: none;
        }

        /* Specialties Modal */
        .specialties-modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 10000;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
        .specialties-modal-overlay.active {
            display: flex;
        }
        .specialties-modal {
            background: white;
            border-radius: 12px;
            max-width: 320px;
            width: 100%;
            box-shadow: 0 10px 40px rgba(0,0,0,0.2);
            overflow: hidden;
            animation: modalSlideIn 0.25s ease;
        }
        @keyframes modalSlideIn {
            from { opacity: 0; transform: translateY(-20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .specialties-modal-header {
            padding: 20px 20px 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .specialties-modal-title {
            font-size: 0.75rem;
            font-weight: 700;
            color: #555555;
            text-transform: uppercase;
            letter-spacing: 0.08em;
        }
        .specialties-modal-close {
            background: none;
            border: none;
            font-size: 1.5rem;
            color: #999;
            cursor: pointer;
            line-height: 1;
            padding: 0;
        }
        .specialties-modal-close:hover {
            color: #666;
        }
        .specialties-modal-body {
            padding: 0 20px 20px;
        }
        .specialties-modal-box {
            background: #fafafa;
            border: 1px solid #eee;
            border-radius: 8px;
            padding: 16px;
        }
        .specialties-modal-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        .specialties-modal-tag {
            padding: 6px 14px;
            background: white;
            color: #666;
            font-size: 0.8rem;
            font-weight: 600;
            border-radius: 4px;
            border: 1px solid #e5e5e5;
        }
        .book-label { font-family: var(--font-body); font-size: 0.75rem; font-weight: 700; color: var(--color-primary-dark); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 12px; }
        .book-title { font-family: var(--font-heading); font-size: 1.3rem; font-weight: 600; color: var(--color-text-dark); margin-bottom: 16px; line-height: 1.3; }
        .book-description { font-family: var(--font-body); font-size: 0.95rem; line-height: 1.75; margin-bottom: 24px; color: var(--color-text-gray); }
        .btn-book { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; background: #555; color: white; text-decoration: none; border-radius: 6px; font-family: var(--font-body); font-weight: 600; font-size: 0.9rem; transition: background 0.2s ease; }
        .btn-book:hover { background: var(--color-primary-green); color: white; }

        /* ============================================
           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-heading { font-family: 'Open Sans', sans-serif; font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #e8e0d5; margin-bottom: 20px; }
        .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; }
        .footer-section nav a.mobile-footer-link { display: none; }
        .hours-mobile { display: none; }
        .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 & Chatbot
           ============================================ */
        .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; }
        .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; }

        /* ============================================
           ADA Widget Styles
           ============================================ */
        body.readable-font, body.readable-font * { font-family: 'OpenDyslexic', sans-serif !important; }
        body.dark-mode { background-color: #1a1a1a; color: #e0e0e0; }
        body.dark-mode .profile-page { background-color: #1a1a1a !important; }
        body.dark-mode .profile-card { background: #2a2a2a !important; }
        body.dark-mode .profile-sidebar { background: #2a2a2a !important; }
        body.dark-mode .profile-tags { background: #333333 !important; border-color: #404040 !important; }
        body.dark-mode .profile-tag { background: #404040 !important; color: #e0e0e0 !important; border-color: #505050 !important; }
        body.dark-mode .profile-main h1 { color: #7ab541 !important; }
        body.dark-mode .profile-main h2, body.dark-mode .profile-main h3 { color: #7ab541 !important; }
        body.dark-mode .profile-main p { color: #c0c0c0 !important; }
        body.dark-mode .credential { color: #b0b0b0 !important; }
        body.dark-mode .bio-divider { border-color: #404040 !important; }
        body.dark-mode .published-work { background: #333333 !important; border-color: #404040 !important; }
        body.dark-mode .published-work h3 { color: #7ab541 !important; }
        body.dark-mode .published-work p { color: #c0c0c0 !important; }
        body.dark-mode .book-title { color: #e0e0e0 !important; }
        body.dark-mode .nav-link { color: #e0e0e0; }
        body.dark-mode .dropdown-menu { background: #1a1a1a; border-color: #404040; }
        body.dark-mode .dropdown-link { color: #e0e0e0; }
        body.dark-mode .dropdown-link:hover { background: #333333; }
        body.dark-mode .site-header { background: #0d0d0d; }
        body.dark-mode .profile-main { background: #2a2a2a; color: #e0e0e0; }
        body.dark-mode footer { background: #0d0d0d; }
        /* ---------------------------------------------------------------
         * High contrast
         *
         * Nine profiles previously had a three-rule version of this (black
         * background, white text, yellow links) and the other seventeen had
         * none. This is the same implementation the top-level pages use, in
         * css/site.css, extended to the profile-page components.
         *
         * 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
         * the profile card and its 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,
body.high-contrast.high-contrast.high-contrast .specialties-modal,
body.high-contrast.high-contrast.high-contrast .specialties-modal-overlay {
            background-color: #000000 !important;
            border: 1px solid #ffffff !important;
        }

        /* The profile card and its specialisation chips lose their fills to
           the blanket rule, so give them an outline to stay distinguishable. */
        body.high-contrast.high-contrast.high-contrast .profile-card,
        body.high-contrast.high-contrast.high-contrast .profile-tags,
        body.high-contrast.high-contrast.high-contrast .profile-tag,
        body.high-contrast.high-contrast.high-contrast .specialties-modal-box,
        body.high-contrast.high-contrast.high-contrast .specialties-modal-tag {
            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 .btn-book,
        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;
        }

        body.highlight-links a { background: #ffff00 !important; color: #000000 !important; padding: 2px 4px; text-decoration: underline !important; }
        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; }
        body.focus-indicators *:focus { outline: 3px solid #ff0000 !important; outline-offset: 2px !important; }
        body.pause-animations *, body.pause-animations *::before, body.pause-animations *::after { animation: none !important; transition: none !important; }

        .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 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; }
        .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); }
        .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; }
        .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; }

        /* ============================================
           Responsive Design
           ============================================ */
        @media (max-width: 768px) {
            .site-header { position: fixed; }
            .header-inner { position: relative; padding: var(--spacing-sm) var(--spacing-sm); justify-content: flex-end; }
            .header-logo { height: 32px; max-width: 40px; margin-right: var(--spacing-sm); order: 0; }
            .client-login { display: none; }
            .mobile-only { display: block; }
            .nav-toggle { display: block; }
            .ada-toggle-mobile { display: block; }
            .main-nav { position: static; }
            .nav-menu { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; background: var(--color-charcoal); padding: 0; gap: 0; max-height: 0; overflow: hidden; transition: max-height var(--transition-normal); }
            .nav-menu.is-active { max-height: 400px; border-top: 1px solid rgba(255, 255, 255, 0.1); }
            .nav-menu li { width: 100%; }
            .nav-link { display: block; padding: var(--spacing-md) var(--spacing-lg); border-bottom: 1px solid rgba(255, 255, 255, 0.05); text-align: center; }
            .nav-link::after { display: none; }
            .nav-link-login { background: rgba(122, 181, 65, 0.15); border-bottom: none; }
            .nav-link-login i { font-size: 0.75rem; margin-left: 5px; }
            .footer-top { grid-template-columns: 1fr 1fr; padding: 40px 20px 30px; }
            .footer-location { order: 1; }
            .footer-hours { order: 2; }
            .footer-contact { order: 3; }
            .footer-links { order: 4; }
            .hours-full { display: none; }
            .hours-mobile { display: block; }
            .footer-section nav a.link-full { display: none; }
            .footer-section nav a.link-mobile { display: inline-block; }
            .footer-section nav a { padding: 3px 0; }
            .footer-middle { flex-direction: column; gap: 15px; text-align: center; }
        }

        @media (max-width: 700px) {
            .profile-page { padding: 100px 16px 60px; }
            .back-link-top { margin-bottom: 20px; }
            .profile-card { padding: 24px; }
            
            /* Mobile layout with display contents to flatten structure */
            .profile-layout {
                display: grid;
                grid-template-columns: 120px 1fr;
                grid-template-rows: auto auto auto;
                gap: 0;
            }
            .profile-sidebar {
                display: contents;
            }
            .profile-main {
                display: contents;
            }
            
            /* Photo: top left */
            .profile-photo {
                grid-column: 1;
                grid-row: 1;
                width: 120px;
            }
            
            /* Header: top right, centered and vertically aligned with photo */
            .profile-main header {
                grid-column: 2;
                grid-row: 1;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                text-align: center;
                padding-left: 16px;
            }
            
            .profile-name {
                font-size: 2rem;
                margin: 0 0 6px 0;
            }
            .profile-credentials {
                font-size: 1.05rem;
                margin: 0;
            }
            
            /* Show specialties link on mobile */
            .specialties-link {
                display: inline-block;
                margin-top: 12px;
                font-size: 0.8rem;
                color: #7ab541;
                text-decoration: none;
                font-weight: 600;
                padding: 0;
                background: none;
                border-radius: 0;
                align-self: flex-end;
            }
            .specialties-link:hover,
            .specialties-link:focus {
                text-decoration: underline;
            }
            .specialties-link i {
                margin-left: 4px;
                font-size: 0.65rem;
            }
            
            /* Hide tags on mobile */
            .profile-tags {
                display: none;
            }
            
            /* Bio: full width below, with top border as the line */
            .profile-bio {
                grid-column: 1 / -1;
                grid-row: 2;
                border-top: 1px solid #ddd;
                margin-top: 20px;
                padding-top: 20px;
            }
            
            .profile-book {
                grid-column: 1 / -1;
                grid-row: 3;
                margin-top: 24px;
                padding-top: 24px;
            }
        }

        @media (max-width: 480px) {
            .header-inner { padding: var(--spacing-xs) var(--spacing-sm); }
            .profile-card { padding: 20px; }
            .profile-layout { grid-template-columns: 100px 1fr; }
            .profile-photo { width: 100px; }
            .profile-name { font-size: 1.6rem; }
            .profile-credentials { font-size: 0.95rem; }
            .profile-main header { padding-left: 12px; }
            .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; }
            .ada-panel { width: 280px; right: -280px; }
        }

        @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; }
        }
    

        /* ============================================
           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;
            }
        }