/* a11y/layout safety (low specificity) */
img,video{height:auto}
.about-page-hero {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
            padding: 100px 0 60px;
            text-align: center;
            color: #fff;
        }
        .about-page-hero h1 {
            font-size: clamp(1.8rem, 4vw, 2.8rem);
            font-weight: 700;
            margin-bottom: 0.5rem;
        }
        .about-page-hero p { font-size: 1.1rem; opacity: 0.9; }
        .about-page-hero .breadcrumb { font-size: 0.95rem; opacity: 0.75; margin-bottom: 1.2rem; }
        .about-page-hero .breadcrumb a { color: #fff; text-decoration: none; }
        .about-page-hero .breadcrumb a:hover { text-decoration: underline; }

        .doctor-profile { padding: 70px 0 50px; }
        .doctor-profile-inner {
            display: grid;
            grid-template-columns: 320px 1fr;
            gap: 50px;
            align-items: start;
        }
        .doctor-photo-card {
            background: #fff;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 8px 40px rgba(0,0,0,0.1);
            position: sticky;
            top: 100px;
        }
        .doctor-photo-card img { width: 100%; height: 360px; object-fit: cover; display: block; }
        .doctor-photo-card-info { padding: 20px; text-align: center; }
        .doctor-photo-card-info h3 { font-size: 1.2rem; font-weight: 700; color: var(--text-dark); margin-bottom: 6px; }
        .doctor-photo-card-info span { color: var(--primary-color); font-size: 0.9rem; font-weight: 500; }
        .doctor-photo-card-info .card-locations { margin-top: 12px; font-size: 0.85rem; color: var(--text-muted); line-height: 1.8; }
        .doctor-photo-card-info .card-locations i { color: var(--primary-color); margin-left: 4px; }

        .doctor-bio h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; color: var(--text-dark); margin-bottom: 20px; }
        .doctor-bio p { font-size: 1.05rem; line-height: 1.9; color: var(--text-muted); margin-bottom: 20px; }

        .doctor-quote {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            border-radius: 16px;
            padding: 30px 35px;
            margin: 35px 0;
            position: relative;
            color: #fff;
        }
        .doctor-quote::before {
            content: '"';
            font-size: 5rem;
            font-family: serif;
            position: absolute;
            top: -10px;
            right: 20px;
            opacity: 0.25;
            line-height: 1;
        }
        .doctor-quote p { font-size: 1.15rem; font-style: italic; font-weight: 500; color: #fff; margin: 0; position: relative; z-index: 1; }

        .clinic-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 30px; }
        .clinic-card {
            background: #fff;
            border: 1.5px solid rgba(0,0,0,0.07);
            border-radius: 16px;
            padding: 28px 24px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.06);
            transition: transform 0.25s ease, box-shadow 0.25s ease;
        }
        .clinic-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,0.12); }
        .clinic-card-icon {
            width: 50px; height: 50px;
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            border-radius: 12px;
            display: flex; align-items: center; justify-content: center;
            margin-bottom: 14px;
        }
        .clinic-card-icon i { color: #fff; font-size: 1.3rem; }
        .clinic-card h3 { font-size: 1.1rem; font-weight: 700; color: var(--text-dark); margin-bottom: 10px; }
        .clinic-card p { font-size: 0.95rem; color: var(--text-muted); line-height: 1.7; margin: 0; }

        .section-divider { border: none; border-top: 1.5px solid #f0f0f0; margin: 40px 0; }

        .about-cta {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
            border-radius: 20px; padding: 40px 35px; text-align: center; color: #fff; margin-top: 50px;
        }
        .about-cta h3 { font-size: 1.4rem; font-weight: 700; margin-bottom: 10px; }
        .about-cta p { opacity: 0.9; margin-bottom: 22px; font-size: 1rem; }
        .about-cta .btn-white {
            background: #fff; color: var(--primary-color);
            padding: 12px 32px; border-radius: 50px; font-weight: 600;
            text-decoration: none; font-size: 1rem;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            display: inline-block;
        }
        .about-cta .btn-white:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,0,0,0.2); }

        .back-btn {
            display: inline-flex; align-items: center; gap: 8px;
            color: var(--primary-color); text-decoration: none; font-weight: 600;
            margin-bottom: 30px; transition: gap 0.2s ease;
        }
        .back-btn:hover { gap: 12px; }

        @media (max-width: 900px) {
            .doctor-profile-inner { grid-template-columns: 1fr; }
            .doctor-photo-card { position: static; max-width: 320px; margin: 0 auto; }
            .clinic-cards { grid-template-columns: 1fr; }
        }

/* accessibility additions */
.skip-link{position:absolute;top:-60px;inset-inline-start:8px;background:#fff;color:#000;padding:10px 16px;border-radius:6px;z-index:10000;font-weight:600;text-decoration:none;box-shadow:0 2px 10px rgba(0,0,0,.25)}
.skip-link:focus{top:8px}
button.hamburger{background:none;border:0;padding:4px 6px;font-family:inherit}
button.close-modal{background:none;border:0;padding:0;font-family:inherit;cursor:pointer}
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid #1a73e8;outline-offset:2px}
.form-control:focus{outline:2px solid #1a73e8;outline-offset:2px}

/* credentials */
.doctor-credentials{padding:40px 0}
.doctor-credentials h2{margin-bottom:20px}
.cred-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.cred-card{background:#fff;border:1px solid #e3e8ee;border-radius:12px;padding:20px}
.cred-card h3{margin:0 0 10px;font-size:1.1rem}
.cred-card ul{margin:0;padding-inline-start:20px;line-height:1.9}

.footer-policy{text-align:center;margin:12px 0 0;font-size:.9rem}.footer-policy a{color:inherit;text-decoration:underline}
.review-badge{font-size:.9rem;opacity:.85;margin:8px 0 16px}

html[lang="en"] body{direction:ltr;text-align:left}