/* Scoped to .mm-page — do not reset html/body or site chrome */
.mm-page {
    --mm-teal-900: #0f3835;
    --mm-teal-800: #194141;
    --mm-teal-700: #195954;
    --mm-teal-600: #2a7a73;
    --mm-gold: #c9a97a;
    --mm-surface: #faf9f7;
    --mm-page: #f3f0ec;
    --mm-ink: #33302c;
    --mm-ink-soft: #6c655d;
    --mm-hair: #e7e1d9;
    --mm-wa: #1faa59;
    color: var(--mm-ink);
    line-height: 1.6;
    padding: 28px 0 calc(env(safe-area-inset-bottom, 0px) + 40px);
    background: linear-gradient(180deg, #f7f5f2 0%, #fff 48%);
}

.mm-page *,
.mm-page *::before,
.mm-page *::after {
    box-sizing: border-box;
}

.mm-intro {
    max-width: 720px;
    margin: 0 auto 28px;
    padding: 0 18px;
    text-align: center;
}

.mm-intro__subtitle {
    margin: 0 auto;
    max-width: 36em;
    color: var(--mm-ink-soft);
    font-size: clamp(.98rem, 2.4vw, 1.1rem);
    font-weight: 400;
    line-height: 1.85;
}

.mm-hint {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 18px;
    padding: 10px 20px;
    border-radius: 999px;
    background: rgba(25, 89, 84, .06);
    border: 1px solid rgba(201, 169, 122, .45);
    color: var(--mm-teal-700);
    font-size: .9rem;
    font-weight: 400;
}

.mm-hint svg {
    width: 17px;
    height: 17px;
    flex: none;
}

.mm-team {
    max-width: 880px;
    margin: 0 auto;
    padding: 0 18px;
    position: relative;
}

.mm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
    gap: 16px;
}

.mm-card {
    background: var(--mm-surface);
    border: 1px solid var(--mm-hair);
    border-radius: 18px;
    padding: 18px 16px 16px;
    box-shadow: 0 10px 28px rgba(15, 56, 53, .08);
    animation: mm-rise .55s ease both;
}

.mm-card__top {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.mm-avatar {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: linear-gradient(145deg, #e8f2f0, #d6e8e4);
    color: var(--mm-teal-700);
    display: grid;
    place-items: center;
    flex: none;
    overflow: hidden;
}

.mm-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mm-avatar svg {
    width: 28px;
    height: 28px;
}

.mm-card__name {
    font-size: 1.22rem;
    font-weight: 700;
    color: var(--mm-teal-700);
    line-height: 1.2;
}

.mm-card__role {
    font-size: .86rem;
    color: var(--mm-ink-soft);
    margin-top: 3px;
}

.mm-card__bio {
    font-size: .85rem;
    color: var(--mm-ink-soft);
    margin: -6px 0 14px;
    line-height: 1.6;
}

.mm-card__actions {
    display: grid;
    gap: 8px;
}

.mm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 8px 12px;
    border-radius: 12px;
    text-decoration: none;
    font-size: .92rem;
    font-weight: 600;
    transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.mm-btn svg {
    width: 18px;
    height: 18px;
    flex: none;
}

.mm-btn--call {
    background: #fff;
    color: var(--mm-teal-700);
    border: 1px solid var(--mm-hair);
}

/* Phone row: always LTR so digit groups + icon match EN in Arabic RTL pages */
.mm-phone {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: start;
    flex-direction: row;
}

.mm-phone__digits {
    direction: ltr;
    unicode-bidi: isolate;
    white-space: nowrap;
}

.mm-btn--wa {
    background: var(--mm-wa);
    color: #fff;
    border: 1px solid transparent;
}

.mm-btn:hover {
    transform: translateY(-1px);
    text-decoration: none;
}

.mm-btn--call:hover {
    color: var(--mm-teal-700);
}

.mm-btn--wa:hover {
    color: #fff;
}

.mm-note {
    max-width: 720px;
    margin: 28px auto 0;
    padding: 0 18px;
    text-align: center;
    color: var(--mm-ink-soft);
    font-size: .92rem;
}

@keyframes mm-rise {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 420px) {
    .mm-card__top {
        gap: 8px;
        margin-bottom: 8px;
    }

    .mm-avatar {
        width: 44px;
        height: 44px;
    }

    .mm-card__name {
        font-size: .97rem;
    }

    .mm-card__role {
        font-size: .68rem;
        margin-top: 1px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mm-card {
        animation: none;
    }

    .mm-btn {
        transition: none;
    }
}