.ssc-about-page {
    --ssca-navy: #0D2B55;
    --ssca-cobalt: #1A4E9F;
    --ssca-teal: #0E7C7B;
    --ssca-teal-lt: #E6F4F4;
    --ssca-gold: #C8973A;
    --ssca-white: #FFFFFF;
    --ssca-offwhite: #F7F9FC;
    --ssca-text: #1C2B3A;
    --ssca-muted: #5A6A7A;
    --ssca-border: #D6E4F0;
    --ssca-shadow: 0 4px 24px rgba(13, 43, 85, 0.09);
    --ssca-radius: 14px;
    --ssca-radius-sm: 8px;
    --ssca-font-d: 'Playfair Display', Georgia, serif;
    --ssca-font-b: 'DM Sans', system-ui, sans-serif;

    font-family: var(--ssca-font-b);
    color: var(--ssca-text);
    background: var(--ssca-white);
    line-height: 1.7;
    font-size: 16px;
}

.ssc-about-page img {
    max-width: 100%;
    display: block
}

.ssc-about-page a {
    color: var(--ssca-cobalt);
    text-decoration: none
}

.ssc-about-page a:hover {
    text-decoration: underline
}

.ssca-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px
}

/* HERO */
.ssca-hero {
    background: linear-gradient(135deg, var(--ssca-navy) 0%, var(--ssca-cobalt) 60%, var(--ssca-teal) 100%);
    color: var(--ssca-white);
    padding: 72px 20px 60px;
    position: relative;
    overflow: hidden
}

.ssca-hero::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: rgba(200, 151, 58, .12);
    pointer-events: none
}

.ssca-hero-inner {
    max-width: 700px;
    position: relative;
    z-index: 1
}

.ssca-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .25);
    color: #fde9b8;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 50px;
    margin-bottom: 20px
}

.ssca-hero h1 {
    font-family: var(--ssca-font-d);
    font-size: clamp(28px, 6vw, 48px);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 16px;
    color: var(--ssca-white)
}

.ssca-hero h1 em {
    font-style: normal;
    color: #fde9b8
}

.ssca-hero-sub {
    font-size: 17px;
    color: rgba(255, 255, 255, .85);
    max-width: 580px;
    margin-bottom: 32px;
    font-weight: 300
}

.ssca-hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px
}

.ssca-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .22);
    color: var(--ssca-white);
    font-size: 13px;
    font-weight: 500;
    padding: 7px 14px;
    border-radius: 50px
}

.ssca-badge .ssca-dot {
    width: 7px;
    height: 7px;
    background: #6ee7c8;
    border-radius: 50%;
    flex-shrink: 0
}

/* STATS STRIP */
.ssca-stats-strip {
    background: var(--ssca-gold);
    padding: 20px
}

.ssca-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    max-width: 900px;
    margin: 0 auto
}

.ssca-stat-item {
    text-align: center;
    padding: 8px 12px;
    border-right: 1px solid rgba(255, 255, 255, .3)
}

.ssca-stat-item:last-child {
    border-right: none
}

.ssca-stat-num {
    font-family: var(--ssca-font-d);
    font-size: clamp(22px, 4vw, 32px);
    font-weight: 700;
    color: var(--ssca-navy);
    line-height: 1
}

.ssca-stat-label {
    font-size: 12px;
    color: var(--ssca-navy);
    font-weight: 500;
    opacity: .85;
    margin-top: 3px
}

/* SECTIONS */
.ssca-section {
    padding: 64px 20px
}

.ssca-section-alt {
    background: var(--ssca-offwhite)
}

.ssca-section-header {
    margin-bottom: 40px
}

.ssca-section-eyebrow {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ssca-teal);
    margin-bottom: 10px
}

.ssca-section-title {
    font-family: var(--ssca-font-d);
    font-size: clamp(24px, 4vw, 36px);
    font-weight: 700;
    color: var(--ssca-navy);
    line-height: 1.25;
    margin-bottom: 14px
}

.ssca-section-title span {
    color: var(--ssca-teal)
}

.ssca-section-lead {
    font-size: 16px;
    color: var(--ssca-muted);
    max-width: 640px;
    line-height: 1.8
}

/* ABOUT GRID */
.ssca-about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: start
}

.ssca-about-text p {
    color: var(--ssca-text);
    margin-bottom: 16px;
    font-size: 15.5px;
    line-height: 1.8
}

.ssca-about-text p:last-child {
    margin-bottom: 0
}

.ssca-about-highlights {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.ssca-highlight-card {
    background: var(--ssca-white);
    border: 1px solid var(--ssca-border);
    border-left: 4px solid var(--ssca-teal);
    border-radius: var(--ssca-radius-sm);
    padding: 18px 20px;
    box-shadow: var(--ssca-shadow)
}

.ssca-highlight-card h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--ssca-navy);
    margin-bottom: 6px
}

.ssca-highlight-card p {
    font-size: 14px;
    color: var(--ssca-muted);
    line-height: 1.6
}

/* DOCTORS */
.ssca-doctors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px
}

.ssca-doctor-card {
    background: var(--ssca-white);
    border-radius: var(--ssca-radius);
    overflow: hidden;
    border: 1px solid var(--ssca-border);
    box-shadow: var(--ssca-shadow);
    transition: transform .2s ease, box-shadow .2s ease
}

.ssca-doctor-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(13, 43, 85, .13)
}

.ssca-doctor-avatar {
    height: 340px;
    background-size: cover;
    background-position: center top;
    display: flex;
    align-items: flex-end;
    position: relative
}

.ssca-doctor-body {
    padding: 22px 22px 24px
}

.ssca-doctor-name {
    font-family: var(--ssca-font-d);
    font-size: 19px;
    font-weight: 700;
    color: var(--ssca-navy);
    margin-bottom: 4px
}

.ssca-doctor-spec {
    font-size: 13px;
    color: var(--ssca-teal);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 12px
}

.ssca-doctor-desc {
    font-size: 14px;
    color: var(--ssca-muted);
    line-height: 1.7;
    margin-bottom: 16px
}

.ssca-doctor-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px
}

.ssca-tag {
    background: var(--ssca-teal-lt);
    color: var(--ssca-teal);
    font-size: 12px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 50px
}

.ssca-team-note {
    text-align: center;
    margin-top: 30px;
    color: var(--ssca-muted);
    font-size: .94rem
}

/* SERVICES */
.ssca-services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px
}

.ssca-service-tile {
    background: var(--ssca-white);
    border: 1px solid var(--ssca-border);
    border-radius: var(--ssca-radius-sm);
    padding: 20px 16px;
    text-align: center;
    transition: border-color .2s, box-shadow .2s;
    display: block
}

.ssca-service-tile:hover {
    border-color: var(--ssca-teal);
    box-shadow: 0 4px 16px rgba(14, 124, 123, .1);
    text-decoration: none
}

.ssca-service-icon {
    font-size: 28px;
    margin-bottom: 10px
}

.ssca-service-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--ssca-navy);
    line-height: 1.4
}

/* FAQ */
.ssca-faq-list {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ssca-border);
    border-radius: var(--ssca-radius);
    overflow: hidden
}

.ssca-faq-item {
    border-bottom: 1px solid var(--ssca-border)
}

.ssca-faq-item:last-child {
    border-bottom: none
}

.ssca-faq-question {
    width: 100%;
    background: none;
    border: none;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
    text-align: left;
    font-family: var(--ssca-font-b);
    font-size: 15.5px;
    font-weight: 600;
    color: var(--ssca-navy);
    transition: background .15s
}

.ssca-faq-question:hover {
    background: var(--ssca-offwhite)
}

.ssca-faq-question[aria-expanded="true"] {
    background: var(--ssca-teal-lt);
    color: var(--ssca-teal)
}

.ssca-faq-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    background: var(--ssca-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 300;
    color: var(--ssca-cobalt);
    transition: transform .25s, background .15s
}

.ssca-faq-question[aria-expanded="true"] .ssca-faq-icon {
    transform: rotate(45deg);
    background: var(--ssca-teal);
    color: var(--ssca-white)
}

.ssca-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease
}

.ssca-faq-answer-inner {
    padding: 0 24px 20px;
    font-size: 15px;
    color: var(--ssca-text);
    line-height: 1.8
}

/* CONTACT */
.ssca-contact-wrapper {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 40px;
    align-items: start
}

.ssca-contact-info {
    display: flex;
    flex-direction: column;
    gap: 20px
}

.ssca-contact-card {
    background: var(--ssca-white);
    border: 1px solid var(--ssca-border);
    border-radius: var(--ssca-radius-sm);
    padding: 20px 22px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    box-shadow: var(--ssca-shadow)
}

.ssca-contact-icon {
    width: 44px;
    height: 44px;
    background: var(--ssca-teal-lt);
    border-radius: var(--ssca-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0
}

.ssca-contact-card h3 {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--ssca-muted);
    margin-bottom: 4px
}

.ssca-contact-card p,
.ssca-contact-card a {
    font-size: 15px;
    font-weight: 500;
    color: var(--ssca-navy);
    line-height: 1.5
}

.ssca-contact-card a:hover {
    color: var(--ssca-teal)
}

.ssca-hours-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 16px;
    margin-top: 8px
}

.ssca-hours-row {
    font-size: 13.5px;
    color: var(--ssca-muted);
    display: flex;
    justify-content: space-between;
    gap: 8px
}

.ssca-hours-row span:last-child {
    color: var(--ssca-navy);
    font-weight: 500
}

.ssca-map-area {
    margin-top: 8px;
    border-radius: var(--ssca-radius);
    overflow: hidden;
    border: 1px solid var(--ssca-border);
    box-shadow: var(--ssca-shadow)
}

.ssca-map-area iframe {
    width: 100%;
    height: 300px;
    border: none;
    display: block
}

.ssca-map-label {
    background: var(--ssca-navy);
    color: var(--ssca-white);
    padding: 14px 22px;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px
}

.ssca-form-card {
    background: var(--ssca-white);
    border: 1px solid var(--ssca-border);
    border-radius: var(--ssca-radius);
    padding: 36px 32px;
    box-shadow: var(--ssca-shadow)
}

    {
        {
        -- .ssca-form-card h2 {
            font-family: var(--ssca-font-d);
            font-size: 22px;
            color: var(--ssca-navy);
            margin-bottom: 6px
        }

        --
    }
}

    {
        {
        -- .ssca-form-card>p {
            font-size: 14px;
            color: var(--ssca-muted);
            margin-bottom: 24px
        }

        --
    }
}

.ssca-form-card {
    background: #0d2b55;
    border: 1px solid #0d2b55;
    border-radius: var(--ssca-radius);
    padding: 36px 32px;
    box-shadow: var(--ssca-shadow);
}

.ssca-form-card h2 {
    font-family: var(--ssca-font-d);
    font-size: 22px;
    color: #ffffff;
    margin-bottom: 6px;
}

.ssca-form-card h3 {
    color: #ffffff;
}

.ssca-form-card p {
    color: #ffffff;
}


/* ACCREDITATION STRIP */
.ssca-accred-strip {
    background: var(--ssca-navy);
    padding: 36px 20px;
    text-align: center
}

.ssca-accred-strip h2 {
    font-family: var(--ssca-font-d);
    font-size: 22px;
    color: var(--ssca-white);
    margin-bottom: 8px
}

.ssca-accred-strip p {
    font-size: 14px;
    color: rgba(255, 255, 255, .7);
    max-width: 580px;
    margin: 0 auto 28px
}

.ssca-accred-badges {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px
}

.ssca-accred-badge {
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
    color: var(--ssca-white);
    padding: 10px 20px;
    border-radius: var(--ssca-radius-sm);
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px
}

/* MOBILE */
@media (max-width:768px) {
    .ssca-section {
        padding: 48px 20px
    }

    .ssca-stats-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .ssca-stat-item:nth-child(2) {
        border-right: none
    }

    .ssca-stat-item {
        border-bottom: 1px solid rgba(255, 255, 255, .25)
    }

    .ssca-stat-item:nth-child(3),
    .ssca-stat-item:nth-child(4) {
        border-bottom: none
    }

    .ssca-about-grid {
        grid-template-columns: 1fr
    }

    .ssca-contact-wrapper {
        grid-template-columns: 1fr
    }

    .ssca-hero {
        padding: 52px 20px 44px
    }

    .ssca-faq-question {
        padding: 16px 18px;
        font-size: 14.5px
    }

    .ssca-faq-answer-inner {
        padding: 0 18px 16px
    }
}

@media (max-width:480px) {
    .ssca-services-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .ssca-doctors-grid {
        grid-template-columns: 1fr
    }
}

@media (prefers-reduced-motion:reduce) {
    .ssc-about-page * {
        transition: none !important
    }
}