/* ============================================================
   Prince Charles Animal Hospital — homepage (index.html)
   Self-contained: nav, dropdowns, hero, sections, footer.
   ============================================================ */

/* --- Services dropdown + service cards --- */
/* Services dropdown and card links */
        .pc-services-menu { position: relative; display: inline-flex; align-items: center; }
        .pc-services-trigger {
            appearance: none;
            border: 0;
            background: transparent;
            color: #082f49;
            font: inherit;
            font-weight: inherit;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 12px 10px;
            border-radius: 999px;
            line-height: 1.1;
            transition: color .16s ease, background .16s ease;
        }
        .pc-services-trigger:hover,
        .pc-services-menu:focus-within .pc-services-trigger {
            color: #ea580c;
            background: #e0f2fe;
            outline: none;
        }
        .pc-services-trigger svg { width: 16px; height: 16px; transition: transform .2s ease; }
        .pc-services-menu:hover .pc-services-trigger svg,
        .pc-services-menu:focus-within .pc-services-trigger svg,
        .pc-services-menu.is-open .pc-services-trigger svg { transform: rotate(180deg); }
        .pc-services-panel {
            position: absolute;
            z-index: 70;
            top: calc(100% - 2px);
            left: 50%;
            width: min(650px, calc(100vw - 48px));
            transform: translateX(-39%);
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 6px;
            padding: 14px;
            border: 1px solid rgba(12, 74, 110, .14);
            border-radius: 20px;
            background: rgba(255,255,255,.98);
            box-shadow: 0 24px 60px rgba(8, 47, 73, .18);
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
        }
        .pc-services-menu:hover .pc-services-panel,
        .pc-services-menu:focus-within .pc-services-panel,
        .pc-services-menu.is-open .pc-services-panel {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transform: translateX(-39%);
        }
        .pc-services-panel::before { display: none; }
        .pc-service-menu-item {
            position: relative;
            display: grid !important;
            grid-template-columns: 34px 1fr;
            gap: 10px;
            align-items: center;
            min-height: 66px;
            padding: 10px 12px !important;
            border-radius: 14px !important;
            color: #082f49 !important;
            text-decoration: none;
            background: transparent !important;
        }
        .pc-service-menu-item:hover,
        .pc-service-menu-item:focus-visible {
            background: #f0f9ff !important;
            color: #c2410c !important;
            outline: none;
        }
        .pc-service-menu-icon {
            display: grid;
            place-items: center;
            width: 34px;
            height: 34px;
            border-radius: 10px;
            background: #f1f5f9;
            color: #0c4a6e;
        }
        .pc-service-menu-item:hover .pc-service-menu-icon { background: #ffedd5; color: #ea580c; }
        .pc-service-menu-icon .iconify { width: 18px; height: 18px; }
        .pc-service-menu-copy { display: grid; gap: 2px; }
        .pc-service-menu-copy strong { font-size: .92rem; line-height: 1.1; }
        .pc-service-menu-copy span { color: #64748b; font-size: .78rem; font-weight: 600; line-height: 1.25; }
        .pc-services-overview {
            grid-column: 1 / -1;
            display: flex !important;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
            margin-top: 5px;
            padding: 12px 14px !important;
            border-radius: 12px !important;
            background: #082f49 !important;
            color: #fff !important;
            text-decoration: none;
        }
        .pc-services-overview:hover,
        .pc-services-overview:focus-visible { background: #0c4a6e !important; color: #fff !important; }
        .pc-services-overview span { font-size: .86rem; font-weight: 800; }
        .pc-services-overview svg { width: 18px; height: 18px; }
        .pc-service-card-link { text-decoration: none; display: block; }
        .pc-service-card-link:focus-visible { outline: 3px solid rgba(234, 88, 12, .45); outline-offset: 3px; }
        .pc-service-card-link:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(8, 47, 73, .09); }
        @media (max-width: 767px) {
            .pc-services-menu { display: block; width: 100%; }
            .pc-services-trigger { width: 100%; justify-content: space-between; padding: 16px; font-size: 16px; border-bottom: 1px solid #f1f5f9; border-radius: 0; }
            .pc-services-panel,
            .pc-services-menu:hover .pc-services-panel,
            .pc-services-menu:focus-within .pc-services-panel { position: static; width: auto; transform: none; display: none; grid-template-columns: 1fr; padding: 8px; margin: 0 0 8px; border-radius: 16px; box-shadow: none; opacity: 1; visibility: visible; pointer-events: auto; }
            .pc-services-menu.is-open .pc-services-panel { display: grid; }
            .pc-services-panel::before { display: none; }
            .pc-service-menu-item { min-height: 54px; padding: 8px 10px !important; }
            .pc-service-menu-copy span { display: none; }
            .pc-services-overview { margin: 2px 0 0; min-height: 48px; }
        }

        /* Full doctor bio page links in the mobile team cards */
        .mobile-team-card a.btn-more { display: block; text-align: center; text-decoration: none; }

/* --- Main homepage layout --- */
/* Smooth scrolling */
        html {
            scroll-behavior: smooth;
        }

        /* Offset anchor targets so fixed navbar doesn't cover them */
        [id] {
            scroll-margin-top: 89px;
        }

        /* Mobile-first optimizations */
        @media (max-width: 767px) {
    
            /* Enhanced Mobile Hero Title */
            .mobile-hero-header {
                text-align: center;
                padding: 24px 16px 20px;
                background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 50%, #e2e8f0 100%);
                border-bottom: 1px solid #e2e8f0;
                margin: 0 -16px;
                position: relative;
                overflow: hidden;
            }
    
            .mobile-hero-header::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                height: 3px;
                background: linear-gradient(90deg, #ea580c 0%, #f97316 50%, #ea580c 100%);
            }
    
            .mobile-hero-header h1 {
                font-size: clamp(1.5rem, 6vw, 2.25rem);
                font-weight: 600;
                color: #0f172a;
                margin: 0;
                line-height: 1.25;
                letter-spacing: -0.025em;
            }
    
            /* Prevent horizontal scroll */
            body {
                overflow-x: hidden;
            }
            
            /* Mobile sticky bottom action bar */
            .mobile-action-bar {
                position: fixed;
                bottom: 0;
                left: 0;
                right: 0;
                background: white;
                border-top: 1px solid #e2e8f0;
                padding: 12px 16px;
                padding-bottom: max(12px, env(safe-area-inset-bottom));
                z-index: 50;
                display: flex;
                gap: 12px;
                box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
            }
            
            .mobile-action-bar .btn-primary {
                flex: 1;
                background: #ea580c;
                color: white;
                padding: 14px 20px;
                border-radius: 12px;
                font-weight: 600;
                font-size: 15px;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                border: none;
                touch-action: manipulation;
            }
            
            .mobile-action-bar .btn-secondary {
                flex: 1;
                background: #0c4a6e;
                color: white;
                padding: 14px 20px;
                border-radius: 12px;
                font-weight: 600;
                font-size: 15px;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                border: none;
                touch-action: manipulation;
            }
            
            /* Add padding to body to account for sticky bar */
            body {
                padding-bottom: 80px;
            }
            
            /* Mobile hero - restructured */
            .mobile-hero {
                padding-top: 16px;
                padding-bottom: 24px;
            }
            
            .mobile-hero-header {
                text-align: center;
                padding: 28px 20px;
                background: linear-gradient(to bottom, #f8fafc, #ffffff);
                border-bottom: 1px solid #e2e8f0;
                margin: 0 -16px;
            }
            
            .mobile-hero-header h1 {
                font-size: clamp(1.5rem, 6vw, 2.25rem);
                font-weight: 600;
                color: #0f172a;
                margin: 0;
                line-height: 1.25;
                letter-spacing: -0.025em;
            }
            
            /* PCAH image - smaller and centered */
            .mobile-hero-image-top {
                width: 100vw;
                max-width: 100vw;
                height: 220px;
                object-fit: cover;
                object-position: center;
                border-radius: 0;
                margin: 0 -16px 16px;
                display: block;
                box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            }
            
            /* Tagline under image */
            .mobile-tagline {
                text-align: center;
                padding: 0 16px 20px;
                font-size: 15px;
                color: #475569;
                line-height: 1.5;
                max-width: 320px;
                margin: 0 auto;
            }
            
            /* Quick info cards for mobile – readable and clean */
            .mobile-quick-info {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 12px;
                margin-bottom: 20px;
                margin-top: 20px;
            }
            
            .mobile-quick-info .info-card {
                background: #ffffff;
                border: 1px solid #e2e8f0;
                border-radius: 14px;
                padding: 16px 14px;
                text-align: center;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
                transition: box-shadow 0.2s ease, border-color 0.2s ease;
            }
            
            .mobile-quick-info .info-card .icon {
                width: 40px;
                height: 40px;
                background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
                border-radius: 10px;
                display: flex;
                align-items: center;
                justify-content: center;
                margin: 0 auto 10px;
                color: #0c4a6e;
            }
            
            .mobile-quick-info .info-card .label {
                font-size: 11px;
                font-weight: 600;
                color: #64748b;
                text-transform: uppercase;
                letter-spacing: 0.06em;
                margin-bottom: 4px;
                line-height: 1.3;
            }
            
            .mobile-quick-info .info-card .value {
                font-size: 14px;
                font-weight: 600;
                color: #0f172a;
                line-height: 1.4;
                word-break: break-word;
            }
            
            .mobile-quick-info .info-card .value a {
                color: inherit;
                text-decoration: none;
            }
            
            .mobile-quick-info .info-card .status-open {
                color: #059669;
                font-weight: 600;
            }
            
            .mobile-quick-info .info-card .status-closed {
                color: #dc2626;
                font-weight: 600;
            }
            
            /* Mobile emergency banner */
            .mobile-emergency-banner {
                background: #fef2f2;
                border: 1px solid #fecaca;
                border-radius: 12px;
                padding: 12px 16px;
                display: flex;
                align-items: center;
                gap: 12px;
                margin-bottom: 16px;
            }
            
            .mobile-emergency-banner .icon {
                width: 36px;
                height: 36px;
                background: #fee2e2;
                border-radius: 8px;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #dc2626;
                flex-shrink: 0;
            }
            
            .mobile-emergency-banner .text {
                flex: 1;
            }
            
            .mobile-emergency-banner .text h4 {
                font-size: 14px;
                font-weight: 600;
                color: #991b1b;
                margin-bottom: 2px;
            }
            
            .mobile-emergency-banner .text p {
                font-size: 13px;
                color: #7f1d1d;
            }
            
            /* Mobile Services - Horizontal Scroll Cards with Center Alignment */
            .mobile-services-scroll {
                display: flex;
                gap: 12px;
                overflow-x: auto;
                scroll-snap-type: x proximity;
                -webkit-overflow-scrolling: touch;
                overscroll-behavior-x: contain;
                scroll-behavior: smooth;
                padding: 4px 0 16px;
                margin: 0 -16px;
                scrollbar-width: none;
                -ms-overflow-style: none;
                /* Center cards - padding creates space for first/last card centering */
                scroll-padding-left: 50vw;
                scroll-padding-right: 50vw;
                padding-left: calc(50vw - 42.5vw);
                padding-right: calc(50vw - 42.5vw);
            }
            
            .mobile-services-scroll::-webkit-scrollbar {
                display: none;
            }
            
            .mobile-service-card {
                flex: 0 0 85vw;
                max-width: 320px;
                scroll-snap-align: center;
                background: #f8fafc;
                border: 1px solid #e2e8f0;
                border-radius: 16px;
                padding: 20px;
                display: flex;
                flex-direction: column;
            }
            
            .mobile-service-card .icon-wrapper {
                width: 48px;
                height: 48px;
                background: white;
                border-radius: 12px;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-bottom: 12px;
                color: #0c4a6e;
                box-shadow: 0 1px 3px rgba(0,0,0,0.05);
            }
            
            .mobile-service-card h3 {
                font-size: 16px;
                font-weight: 600;
                color: #0f172a;
                margin-bottom: 8px;
            }
            
            .mobile-service-card p {
                font-size: 14px;
                color: #475569;
                line-height: 1.5;
                margin: 0;
            }
            
            /* Peek indicator for horizontal scroll */
            .mobile-services-container {
                position: relative;
            }
            
            .scroll-hint {
                display: flex;
                justify-content: center;
                gap: 6px;
                margin-top: 12px;
            }
            
            .scroll-hint-dot {
                width: 6px;
                height: 6px;
                border-radius: 50%;
                background: #cbd5e1;
            }
            
            .scroll-hint-dot.active {
                background: #0c4a6e;
            }
            
            /* Mobile team cards - horizontal scroll with center alignment */
            .mobile-team-scroll {
                display: flex;
                gap: 12px;
                overflow-x: auto;
                scroll-snap-type: x proximity;
                -webkit-overflow-scrolling: touch;
                overscroll-behavior-x: contain;
                scroll-behavior: smooth;
                padding-bottom: 8px;
                margin: 0 -16px;
                /* Center cards */
                scroll-padding-left: 50vw;
                scroll-padding-right: 50vw;
                padding-left: calc(50vw - 42.5vw);
                padding-right: calc(50vw - 42.5vw);
            }
            
            .mobile-team-scroll::-webkit-scrollbar {
                display: none;
            }
            
            .mobile-team-card {
                flex: 0 0 85vw;
                max-width: 320px;
                scroll-snap-align: center;
                background: white;
                border-radius: 16px;
                overflow: hidden;
                border: 1px solid #e2e8f0;
            }
            
            .mobile-team-card img {
                width: 100%;
                height: 200px;
                object-fit: cover;
                object-position: top;
            }
            
            .mobile-team-card .content {
                padding: 16px;
            }
            
            .mobile-team-card h3 {
                font-size: 16px;
                font-weight: 600;
                margin-bottom: 4px;
            }
            
            .mobile-team-card .role {
                color: #0c4a6e;
                font-size: 13px;
                font-weight: 500;
                margin-bottom: 8px;
            }
            
            .mobile-team-card .btn-more {
                width: 100%;
                padding: 10px;
                background: #f1f5f9;
                border: none;
                border-radius: 8px;
                color: #0c4a6e;
                font-weight: 500;
                font-size: 13px;
                margin-top: 12px;
            }
            
            /* Mobile testimonials - horizontal scroll with center alignment */
            .mobile-testimonials-scroll {
                display: flex;
                gap: 12px;
                overflow-x: auto;
                scroll-snap-type: x proximity;
                -webkit-overflow-scrolling: touch;
                overscroll-behavior-x: contain;
                scroll-behavior: smooth;
                padding: 4px 0 16px;
                margin: 0 -16px;
                scrollbar-width: none;
                -ms-overflow-style: none;
                /* Center cards */
                scroll-padding-left: 50vw;
                scroll-padding-right: 50vw;
                padding-left: calc(50vw - 42.5vw);
                padding-right: calc(50vw - 42.5vw);
            }
            
            .mobile-testimonials-scroll::-webkit-scrollbar {
                display: none;
            }
            
            .mobile-testimonial-card {
                flex: 0 0 85vw;
                max-width: 320px;
                scroll-snap-align: center;
                background: #f8fafc;
                border-radius: 12px;
                padding: 16px;
                border: 1px solid #e2e8f0;
            }
            
            .mobile-testimonial-card .stars {
                color: #f59e0b;
                margin-bottom: 8px;
                font-size: 14px;
            }
            
            .mobile-testimonial-card p {
                font-size: 14px;
                line-height: 1.5;
                color: #334155;
                margin-bottom: 12px;
            }
            
            .mobile-testimonial-card .author {
                display: flex;
                align-items: center;
                gap: 8px;
            }
            
            .mobile-testimonial-card .avatar {
                width: 32px;
                height: 32px;
                background: white;
                border-radius: 8px;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #64748b;
            }
            
            .mobile-testimonial-card .name {
                font-weight: 600;
                font-size: 13px;
                color: #0f172a;
            }
            
            .mobile-testimonial-card .pet {
                font-size: 12px;
                color: #64748b;
            }
            
            /* Mobile contact section */
            .mobile-contact-grid {
                display: flex;
                flex-direction: column;
                gap: 12px;
            }
            
            .mobile-contact-card {
                display: flex;
                align-items: flex-start;
                gap: 12px;
                background: white;
                padding: 16px;
                border-radius: 12px;
                border: 1px solid #e2e8f0;
            }
            
            .mobile-contact-card .icon {
                width: 40px;
                height: 40px;
                background: #f1f5f9;
                border-radius: 10px;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
                color: #0c4a6e;
            }
            
            .mobile-contact-card .content h3 {
                font-size: 14px;
                font-weight: 600;
                color: #0f172a;
                margin-bottom: 4px;
            }
            
            .mobile-contact-card .content p {
                font-size: 14px;
                color: #475569;
                line-height: 1.4;
            }
            
            .mobile-contact-card .content a {
                color: #0c4a6e;
                font-weight: 500;
            }
            
            /* Hide desktop elements on mobile */
            .desktop-only {
                display: none !important;
            }
            
            /* Mobile navigation improvements */
            #mobile-menu {
                max-height: calc(100vh - 85px);
                overflow-y: auto;
            }
            
            #mobile-menu a {
                padding: 16px;
                font-size: 16px;
                border-bottom: 1px solid #f1f5f9;
            }
            
            /* Ensure tap targets are minimum 44px */
            button, a {
                min-height: 44px;
                min-width: 44px;
            }
        }
        
        /* Desktop only elements */
        @media (min-width: 768px) {
            .mobile-only {
                display: none !important;
            }
        }

        /* ============================================================
           Nav bar
           (announcement bar + glass sticky header + hamburger menu)
           Classes are prefixed pc- so they never collide with Tailwind.
           ============================================================ */
        .pc-announcement {
            display: flex;
            justify-content: center;
            gap: .5rem;
            align-items: center;
            min-height: 44px;
            padding: .55rem 1rem;
            background: #082f49;
            color: rgba(255, 255, 255, .92);
            font-size: .92rem;
            text-align: center;
        }
        .pc-announcement strong { font-weight: 700; }

        .pc-header {
            position: sticky;
            top: 0;
            z-index: 40;
            background: rgba(255, 255, 255, .92);
            -webkit-backdrop-filter: blur(18px);
            backdrop-filter: blur(18px);
            border-bottom: 1px solid rgba(12, 74, 110, .08);
        }
        .pc-nav {
            max-width: 1280px;
            margin: 0 auto;
            min-height: 90px;
            padding: 0 24px;
            display: grid;
            grid-template-columns: auto 1fr auto;
            align-items: center;
            gap: 24px;
        }
        .pc-brand { display: inline-flex; align-items: center; gap: 12px; }
        .pc-brand-logo {
            display: block;
            width: min(34vw, 440px);
            max-width: 100%;
            height: auto;
            object-fit: contain;
        }

        .pc-nav-menu {
            display: flex;
            justify-content: center;
            gap: 22px;
            font-size: 1.05rem;
            font-weight: 900;
            color: #082f49;
        }
        .pc-nav-menu a {
            padding: 12px 10px;
            border-radius: 999px;
            line-height: 1.1;
            color: #082f49;
            text-decoration: none;
            transition: color .16s ease, background .16s ease;
        }
        .pc-nav-menu a:hover,
        .pc-nav-menu a:focus-visible {
            color: #ea580c;
            background: #e0f2fe;
            outline: none;
        }
        .pc-nav-menu a:focus-visible { box-shadow: 0 0 0 3px rgba(234, 88, 12, .45); }

        .pc-nav-actions {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 6px;
            border: 1px solid rgba(12, 74, 110, .12);
            border-radius: 999px;
            background: rgba(255, 255, 255, .76);
            box-shadow: 0 14px 34px rgba(8, 47, 73, .08);
        }
        .pc-nav-phone {
            padding-left: 12px;
            font-weight: 900;
            font-size: 1.06rem;
            line-height: 1;
            letter-spacing: -.02em;
            color: #082f49;
            text-decoration: none;
        }
        .pc-nav-phone:hover,
        .pc-nav-phone:focus-visible { color: #ea580c; outline: none; }

        .pc-nav-call {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            gap: 8px;
            min-height: 56px;
            padding: 1rem 1.5rem;
            border-radius: 999px;
            font-weight: 800;
            font-size: 1.08rem;
            letter-spacing: -.01em;
            background: #ea580c;
            color: #fff;
            text-decoration: none;
            border: 1px solid transparent;
            box-shadow: 0 16px 36px rgba(234, 88, 12, .28);
            transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
            white-space: nowrap;
        }
        .pc-nav-call:hover {
            transform: translateY(-1px);
            background: #c2410c;
            box-shadow: 0 18px 42px rgba(234, 88, 12, .32);
        }
        .pc-nav-call:focus-visible {
            outline: none;
            box-shadow: 0 0 0 3px rgba(234, 88, 12, .45), 0 18px 42px rgba(234, 88, 12, .32);
        }
        .pc-nav-call svg {
            width: 20px;
            height: 20px;
            fill: none;
            stroke: currentColor;
            stroke-width: 2.2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .pc-menu-toggle {
            display: none;
            width: 46px;
            height: 46px;
            border: 0;
            background: #fff;
            border-radius: 50%;
            box-shadow: 0 10px 26px rgba(8, 47, 73, .1);
            cursor: pointer;
            padding: 0;
        }
        .pc-menu-toggle span:not(.pc-sr-only) {
            display: block;
            width: 18px;
            height: 2px;
            background: #0c4a6e;
            margin: 4px auto;
            border-radius: 10px;
            transition: transform .2s ease, opacity .2s ease;
        }
        .pc-menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
        .pc-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
        .pc-menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
        .pc-sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            border: 0;
        }

        /* Mobile view of the nav */
        @media (max-width: 767px) {
            .pc-nav {
                grid-template-columns: auto auto;
                justify-content: space-between;
                gap: 8px;
                min-height: 66px;
                padding: 0 12px;
            }
            .pc-menu-toggle { display: block; width: 42px; height: 42px; }
            .pc-nav-menu {
                position: absolute;
                left: 16px;
                right: 16px;
                top: calc(100% + 8px);
                display: none;
                flex-direction: column;
                background: #fff;
                border: 1px solid rgba(12, 74, 110, .16);
                border-radius: 24px;
                padding: 18px;
                box-shadow: 0 24px 60px rgba(8, 47, 73, .12);
            }
            .pc-nav-menu.is-open { display: flex; }
            .pc-nav-actions { display: none; }
            .pc-announcement {
                gap: .35rem;
                min-height: 34px;
                padding: .38rem .75rem;
                font-size: .78rem;
                white-space: nowrap;
                overflow: hidden;
            }
            .pc-announcement strong {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .pc-brand-logo { width: min(calc(100vw - 76px), 340px); }
        }

        /* ============================================================
           Hero contact card (mobile only).
           Lives inside .mobile-only, so it's hidden on desktop.
           ============================================================ */
        .pc-hero-card {
            display: grid;
            gap: 0;
            margin: 4px 0 4px;
            background: #0c4a6e;
            color: #fff;
            border-radius: 22px;
            padding: 12px;
            box-shadow: 0 18px 50px rgba(8, 47, 73, .12);
            border: 1px solid rgba(255, 255, 255, .16);
        }
        .pc-pet-portrait {
            display: block;
            margin-bottom: 10px;
            overflow: hidden;
            border-radius: 18px;
            border: 1px solid rgba(255, 255, 255, .14);
            background: rgba(255, 255, 255, .92);
            aspect-ratio: 4 / 3;
        }
        .pc-pet-portrait img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            display: block;
            border-radius: inherit;
        }
        .pc-contact-stack { display: grid; gap: 8px; padding: 0; }
        .pc-contact-item {
            display: grid;
            grid-template-columns: 36px 1fr;
            gap: 10px;
            align-items: center;
            padding: 10px 12px;
            border-radius: 16px;
            background: rgba(255, 255, 255, .08);
            border: 1px solid rgba(255, 255, 255, .12);
            text-decoration: none;
        }
        .pc-contact-icon {
            display: grid;
            place-items: center;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: #ffedd5;
            color: #ea580c;
            flex: none;
        }
        .pc-contact-icon svg {
            width: 18px;
            height: 18px;
            fill: none;
            stroke: currentColor;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
        .pc-contact-copy strong {
            display: block;
            line-height: 1.25;
            color: #fff;
            font-size: .92rem;
        }
        .pc-contact-copy a,
        .pc-contact-copy span {
            color: rgba(255, 255, 255, .78);
            font-weight: 700;
            font-size: .84rem;
        }

        .pc-contact-item-button {
            width: 100%;
            appearance: none;
            font: inherit;
            color: inherit;
            text-align: left;
            cursor: pointer;
        }
        .pc-contact-item-button:hover,
        .pc-contact-item-button:focus-visible {
            background: rgba(255, 255, 255, .12);
            outline: none;
        }
        .pc-contact-item-button:focus-visible { box-shadow: 0 0 0 3px rgba(234, 88, 12, .45); }

        .pc-hours-toggle {
            position: relative;
            grid-template-columns: 36px 1fr 24px;
        }
        .pc-hours-toggle-indicator {
            width: 24px;
            height: 24px;
            border-radius: 999px;
            display: grid;
            place-items: center;
            justify-self: end;
            background: rgba(255, 255, 255, .12);
            color: #ea580c;
            line-height: 1;
            transition: transform .18s ease;
        }
        .pc-hours-toggle-indicator svg {
            width: 15px;
            height: 15px;
            fill: none;
            stroke: currentColor;
            stroke-width: 2.5;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
        .pc-hours-toggle[aria-expanded="true"] .pc-hours-toggle-indicator {
            transform: rotate(180deg);
        }
        .pc-mobile-hours-panel {
            display: block;
            overflow: hidden;
            border-radius: 16px;
            background: rgba(255, 255, 255, .08);
            border: 1px solid rgba(255, 255, 255, .12);
        }
        .pc-mobile-hours-panel[hidden] { display: none; }
        .pc-hours-table {
            display: grid;
            gap: 0;
            padding: 8px 10px;
        }
        .pc-hours-table div {
            display: flex;
            justify-content: space-between;
            gap: 16px;
            padding: 8px 2px;
            border-bottom: 1px solid rgba(255, 255, 255, .16);
        }
        .pc-hours-table div:last-child { border-bottom: 0; }
        .pc-hours-table span,
        .pc-hours-table strong {
            color: rgba(255, 255, 255, .9);
            font-size: .84rem;
            font-weight: 700;
        }

        /* ============================================================
           Desktop reviews: horizontal scroll when more cards are added.
           3 cards fill the row exactly; a 4th (or more) scrolls sideways.
           ============================================================ */
        .pc-reviews { position: relative; }
        .pc-reviews-scroll {
            display: flex;
            gap: 24px;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            scroll-behavior: smooth;
            padding: 8px 4px 18px;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: thin;
            scrollbar-color: #cbd5e1 transparent;
        }
        .pc-reviews-scroll::-webkit-scrollbar { height: 8px; }
        .pc-reviews-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
        .pc-reviews-scroll::-webkit-scrollbar-track { background: transparent; }
        /* Each card takes exactly one third of the row (minus the two gaps),
           so adding a 4th card overflows and enables horizontal scrolling. */
        .pc-reviews-scroll > * {
            flex: 0 0 clamp(300px, calc((100% - 48px) / 3), 460px);
            scroll-snap-align: start;
        }
        /* Dots underneath, matching the mobile scroller */
        .pc-reviews-hint {
            display: flex;
            justify-content: center;
            gap: 8px;
            margin-top: 18px;
        }
        .pc-reviews-dot {
            width: 8px;
            height: 8px;
            padding: 0;
            border: 0;
            border-radius: 50%;
            background: #cbd5e1;
            cursor: pointer;
            transition: background .16s ease, transform .16s ease;
        }
        .pc-reviews-dot:hover { background: #94a3b8; }
        .pc-reviews-dot.active { background: #0c4a6e; transform: scale(1.25); }

/* --- Services dropdown (dark panel) --- */
.pc-services-panel {
    background: #082f49 !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    box-shadow: 0 28px 64px rgba(8, 47, 73, .34) !important;
  }
  .pc-service-menu-item {
    color: #ffffff !important;
    background: transparent !important;
  }
  .pc-service-menu-item:hover,
  .pc-service-menu-item:focus-visible {
    background: rgba(255, 255, 255, .12) !important;
    color: #ffffff !important;
  }
  .pc-service-menu-icon {
    background: rgba(255, 255, 255, .12) !important;
    color: #bae6fd !important;
  }
  .pc-service-menu-item:hover .pc-service-menu-icon,
  .pc-service-menu-item:focus-visible .pc-service-menu-icon {
    background: #ffedd5 !important;
    color: #c2410c !important;
  }
  .pc-service-menu-copy span {
    color: #bfdbfe !important;
  }
  @media (max-width: 900px) {
    .pc-services-panel {
      border-color: rgba(255, 255, 255, .16) !important;
      box-shadow: none !important;
    }
  }

/* --- Our Team / About dropdown --- */
.pc-team-menu { position:relative; display:inline-flex; align-items:center; }
  .pc-team-trigger { appearance:none; border:0; background:transparent; color:#082f49; font:inherit; font-weight:inherit; cursor:pointer; display:inline-flex; align-items:center; gap:7px; padding:12px 10px; border-radius:999px; line-height:1.1; transition:color .16s ease,background .16s ease; }
  .pc-team-trigger:hover,
  .pc-team-menu:focus-within .pc-team-trigger { color:#ea580c; background:#e0f2fe; outline:none; }
  .pc-team-trigger:focus-visible { box-shadow:0 0 0 3px rgba(234,88,12,.45); }
  .pc-team-trigger svg { width:16px; height:16px; transition:transform .2s ease; }
  .pc-team-menu:hover .pc-team-trigger svg,
  .pc-team-menu:focus-within .pc-team-trigger svg,
  .pc-team-menu.is-open .pc-team-trigger svg { transform:rotate(180deg); }
  .pc-team-panel { position:absolute; z-index:70; top:calc(100% - 2px); left:50%; width:min(330px,calc(100vw - 48px)); transform:translateX(-50%); display:grid; grid-template-columns:1fr; gap:6px; padding:10px; border:1px solid rgba(255,255,255,.18); border-radius:18px; background:#082f49; box-shadow:0 28px 64px rgba(8,47,73,.34); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .16s ease,transform .16s ease,visibility .16s ease; }
  .pc-team-menu:hover .pc-team-panel,
  .pc-team-menu:focus-within .pc-team-panel,
  .pc-team-menu.is-open .pc-team-panel { opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%); }
  .pc-team-menu-item { display:grid !important; grid-template-columns:34px 1fr; gap:10px; align-items:center; min-height:66px; padding:10px 12px !important; border-radius:14px !important; color:#fff !important; text-decoration:none; background:transparent !important; }
  .pc-team-menu-item:hover,
  .pc-team-menu-item:focus-visible { background:rgba(255,255,255,.12) !important; color:#fff !important; outline:none; }
  .pc-team-menu-icon { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:rgba(255,255,255,.12); color:#bae6fd; }
  .pc-team-menu-item:hover .pc-team-menu-icon,
  .pc-team-menu-item:focus-visible .pc-team-menu-icon { background:#ffedd5; color:#c2410c; }
  .pc-team-menu-icon .iconify { width:18px; height:18px; }
  .pc-team-menu-copy { display:grid; gap:2px; }
  .pc-team-menu-copy strong { font-size:.92rem; line-height:1.1; }
  .pc-team-menu-copy span { color:#bfdbfe; font-size:.78rem; font-weight:600; line-height:1.25; }
  @media (max-width:767px) {
    .pc-team-menu { display:block; width:100%; }
    .pc-team-trigger { width:100%; justify-content:space-between; padding:16px; font-size:16px; border-bottom:1px solid #f1f5f9; border-radius:0; }
    .pc-team-panel,
    .pc-team-menu:hover .pc-team-panel,
    .pc-team-menu:focus-within .pc-team-panel { position:static; display:none; grid-template-columns:1fr; width:auto; margin:0 0 8px; padding:8px; border-radius:16px; box-shadow:none; opacity:1; visibility:visible; pointer-events:auto; transform:none; }
    .pc-team-menu.is-open .pc-team-panel { display:grid; }
    .pc-team-menu-item { min-height:54px; padding:8px 10px !important; }
    .pc-team-menu-copy span { display:none; }
  }

/* --- 'Explore All Services' CTA --- */
/* "Explore All Services" CTA at the foot of the Services dropdown. */
.pc-services-allcta {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 2px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .1) !important;
  color: #fff !important;
  font-weight: 800;
  font-size: .92rem;
  letter-spacing: -.01em;
  text-decoration: none;
  transition: background .16s ease, color .16s ease;
}
.pc-services-allcta svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .16s ease;
}
.pc-services-allcta:hover,
.pc-services-allcta:focus-visible {
  background: #ea580c !important;
  color: #fff !important;
  outline: none;
}
.pc-services-allcta:hover svg,
.pc-services-allcta:focus-visible svg { transform: translateX(3px); }
.pc-services-allcta:focus-visible { box-shadow: 0 0 0 3px rgba(234, 88, 12, .45); }