/* =========================================================
   UI WORLD PRO — Teamwork (White Primary + Yellow Secondary)
   Mobile-first • Responsive • Clean • Premium
   ========================================================= */

/* ---------- THEME TOKENS ---------- */
:root {
    /* Brand */
    --primary: #ffffff;
    --secondary: #FFD400;

    /* Neutral (still fits white/yellow brand, readable) */
    --bg: #ffffff;
    --bg-soft: #fbfbfd;
    --text: rgba(0, 0, 0, .88);
    --text-2: rgba(0, 0, 0, .62);
    --text-3: rgba(0, 0, 0, .48);

    /* Surfaces */
    --card: #ffffff;
    --border: rgba(0, 0, 0, .08);
    --border-2: rgba(0, 0, 0, .12);

    /* Effects */
    --shadow-sm: 0 6px 18px rgba(0, 0, 0, .06);
    --shadow-md: 0 16px 40px rgba(0, 0, 0, .10);
    --ring: 0 0 0 3px rgba(255, 212, 0, .25);

    /* Radius */
    --r-xl: 24px;
    --r-lg: 18px;
    --r-md: 14px;
    --r-sm: 12px;

    /* Spacing */
    --container: 1200px;
    --gutter: clamp(14px, 3.5vw, 28px);

    /* Typography */
    --h1: clamp(28px, 3.2vw, 44px);
    --p: clamp(14px, 1.6vw, 16px);
    --p2: clamp(13px, 1.4vw, 14px);

    /* Motion */
    --ease: cubic-bezier(.2, .8, .2, 1);
    --t: 220ms;
}

/* ---------- RESET ---------- */
* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    margin: 0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color: var(--text);
    background: radial-gradient(1100px 520px at 50% -120px, rgba(255, 212, 0, .18), transparent 60%),
        linear-gradient(180deg, var(--bg-soft), var(--bg));
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    max-width: 100%;
    display: block;
}

p {
    margin: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

:focus-visible {
    outline: none;
    box-shadow: var(--ring);
    border-radius: 10px;
}

/* ---------- UTIL ---------- */
.container {
    width: min(var(--container), calc(100% - (var(--gutter) * 2)));
    margin-inline: auto;
}

/* ---------- PAGE WRAP ---------- */
.page {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

/* ---------- HEADER ---------- */
.page__header {
    padding: clamp(26px, 5vw, 56px) 0 clamp(18px, 3vw, 28px);
}

.header__inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.header__text {
    flex: 1 1 auto;
    min-width: 0;
}

.page__title {
    font-size: var(--h1);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0;
}

.page__subtitle {
    margin-top: 12px;
    color: var(--text-2);
    line-height: 1.7;
    font-size: var(--p);
    max-width: 820px;
}

/* subtitle block in your HTML */
.page-subtitle {
    max-width: 860px;
    margin-top: 14px;
}

.subtitle-main {
    font-size: clamp(15px, 2vw, 18px);
    line-height: 1.7;
    font-weight: 550;
    color: var(--text);
    margin: 0 0 10px;
}

.subtitle-sub {
    font-size: var(--p2);
    line-height: 1.7;
    color: var(--text-2);
    margin: 0;
}

/* Meta pill (badge right) */
.header__meta {
    flex: 0 0 auto;
}

.meta__pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 212, 0, .65);
    background: linear-gradient(180deg, rgba(255, 212, 0, .22), rgba(255, 212, 0, .10));
    box-shadow: var(--shadow-sm);
    font-size: 12px;
    white-space: nowrap;
}

.meta__dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--secondary);
    box-shadow: 0 0 0 4px rgba(255, 212, 0, .18);
}

/* ---------- PANELS / CARDS ---------- */
.panel {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(255, 212, 0, .10), transparent);
}

.panel__title {
    font-size: 14px;
    letter-spacing: .02em;
    margin: 0;
}

.panel__count {
    font-size: 12px;
    color: var(--text-3);
}

/* ---------- LEADERSHIP GRID ---------- */
.leadership {
    display: grid;
    grid-template-columns: 1fr minmax(260px, 1.15fr) 1fr;
    gap: clamp(14px, 2.4vw, 24px);
    margin-top: clamp(18px, 3vw, 34px);
    align-items: start;
}

/* Make side panels same vibe */
.panel--side {
    position: relative;
}

.panel--side::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(380px 120px at 30% 0%, rgba(255, 212, 0, .16), transparent 60%);
}

/* ---------- PEOPLE LIST ---------- */
.people {
    padding: 14px;
    display: grid;
    gap: 12px;
}

.person {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 12px;
    align-items: center;
    padding: 10px;
    border-radius: var(--r-md);
    border: 1px solid transparent;
    transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}

.person:hover {
    border-color: rgba(255, 212, 0, .55);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .08);
    transform: translateY(-2px);
}

.photo {
    background: #f3f4f6;
}

/* passports */
.photo--passport {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    object-fit: cover;
    border: 1px solid var(--border);
}

/* placeholders when no image */
.photo--placeholder {
    position: relative;
    overflow: hidden;
}

.photo--placeholder::after {
    content: "";
    position: absolute;
    inset: -40%;
    background: linear-gradient(90deg, transparent, rgba(255, 212, 0, .25), transparent);
    transform: rotate(18deg);
    animation: shimmer 1.6s infinite;
    opacity: .6;
}

@keyframes shimmer {
    0% {
        transform: translateX(-40%) rotate(18deg);
    }

    100% {
        transform: translateX(40%) rotate(18deg);
    }
}

.person__name {
    font-size: 14px;
    font-weight: 650;
    margin: 0;
    line-height: 1.2;
}

.person__role {
    font-size: 12px;
    color: var(--text-2);
    margin-top: 4px;
}

/* ---------- CEO CENTER CARD ---------- */
.panel--ceo {
    position: relative;
}

.ceo {
    padding: clamp(18px, 2.6vw, 26px);
    text-align: center;
    position: relative;
    isolation: isolate;
}

/* yellow accent glow */
.ceo::before {
    content: "";
    position: absolute;
    inset: -1px;
    background:
        radial-gradient(520px 200px at 50% 0%, rgba(255, 212, 0, .25), transparent 60%);
    z-index: -1;
}

.ceo__badge {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 212, 0, .65);
    background: rgba(255, 212, 0, .18);
    font-size: 12px;
    box-shadow: var(--shadow-sm);
}

.badge__dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--secondary);
    box-shadow: 0 0 0 4px rgba(255, 212, 0, .18);
}

/* CEO photo */
.photo--ceo {
    width: clamp(120px, 16vw, 170px);
    height: clamp(120px, 16vw, 170px);
    border-radius: 22px;
    object-fit: cover;
    border: 3px solid var(--secondary);
    margin-inline: auto;
    box-shadow: var(--shadow-md);
}

.ceo__name {
    font-size: clamp(18px, 2.2vw, 24px);
    font-weight: 800;
    margin: 14px 0 4px;
    letter-spacing: -.01em;
}

.ceo__role {
    font-size: 13px;
    color: var(--text-2);
    margin: 0;
}

/* ---------- STAFF ---------- */
.panel--staff {
    margin-top: clamp(18px, 3vw, 40px);
}

.staff {
    padding: 16px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.staff-card {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border-radius: var(--r-lg);
    border: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(255, 212, 0, .10), transparent);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .06);
    transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}

.staff-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 212, 0, .55);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .10);
}

.staff-card__name {
    font-size: 14px;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
}

.staff-card__role {
    font-size: 12px;
    color: var(--text-2);
    margin-top: 4px;
}

.tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    border: 1px solid rgba(255, 212, 0, .65);
    background: rgba(255, 212, 0, .18);
}

/* Empty message */
.empty {
    padding: 14px;
    color: var(--text-2);
    font-size: 13px;
    line-height: 1.6;
}

/* ---------- FOOTER ---------- */
.page__footer {
    margin-top: auto;
    padding: 18px 0 26px;
}

.footer__text {
    color: var(--text-3);
    font-size: 12px;
    text-align: center;
}

/* ---------- RESPONSIVE BREAKPOINTS ---------- */

/* Tablets / small laptops */
@media (max-width: 980px) {
    .header__inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .meta__pill {
        white-space: normal;
        line-height: 1.4;
    }

    .leadership {
        grid-template-columns: 1fr;
    }

    .staff {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Phones */
@media (max-width: 540px) {
    .panel__head {
        padding: 12px 14px;
    }

    .people {
        padding: 12px;
    }

    .person {
        grid-template-columns: 52px 1fr;
        padding: 10px;
    }

    .photo--passport {
        width: 52px;
        height: 52px;
        border-radius: 13px;
    }

    .staff {
        grid-template-columns: 1fr;
    }

    .staff-card {
        padding: 12px;
    }
}