/* ============================================
   About Page
   ============================================ */

/* ── Hero ── */
.uv-ab-hero {
    padding: clamp(72px, 8vw, 120px) 56px 40px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 48px;
}
.uv-ab-hero-body { flex: 1; min-width: 0; }
.uv-ab-title {
    font: 300 clamp(36px, 4.5vw, 60px)/1.1 var(--sans);
    letter-spacing: -0.025em;
    color: var(--text);
    margin: 0 0 20px;
    max-width: 640px;
    text-wrap: balance;
}
.uv-ab-title em {
    font-family: 'Bitter', serif;
    font-style: italic;
    font-weight: 700;
    background: linear-gradient(120deg, #136275, #4ecdc4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.uv-ab-tagline {
    font: 300 clamp(14px, 1.3vw, 17px)/1.7 var(--sans);
    color: var(--text-3);
    letter-spacing: 0.01em;
    margin: 0;
    max-width: 500px;
}
.uv-ab-hero-stats {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex-shrink: 0;
    padding-bottom: 4px;
}
.uv-ab-stat { text-align: right; }
.uv-ab-stat-val {
    display: block;
    font: 300 clamp(16px, 1.6vw, 22px)/1 var(--sans);
    letter-spacing: -0.02em;
    color: var(--text);
}
.uv-ab-stat-lbl {
    display: block;
    font: 500 9px/1 var(--mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-3);
    margin-top: 5px;
}

/* ── Team ── */
.uv-ab-team {
    padding: 40px 56px clamp(80px, 10vw, 128px);
    border-top: 1px solid var(--border);
}
.uv-ab-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 36px 20px;
    max-width: 760px;
}
.uv-ab-photo-wrap {
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 4px;
    background: var(--bg2);
}
.uv-ab-photo-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    filter: grayscale(1) contrast(1.08) brightness(0.92);
    transition: filter 0.5s var(--ease), transform 0.7s var(--ease);
    display: block;
}
.uv-ab-member:hover .uv-ab-photo-wrap img {
    filter: grayscale(0) contrast(1) brightness(1);
    transform: scale(1.04);
}
.uv-ab-meta { padding: 16px 0 0; }
.uv-ab-name {
    display: block;
    font: 500 15px/1.2 var(--sans);
    letter-spacing: -0.01em;
    color: var(--text);
    margin-bottom: 6px;
    transition: color 0.2s;
}
.uv-ab-member:hover .uv-ab-name { color: var(--accent); }
.uv-ab-role {
    display: block;
    font: 500 10px/1 var(--mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 9px;
}
.uv-ab-bio {
    font: 500 13px/1.5 var(--sans);
    color: var(--text-3);
    margin: 0;
}

/* ── Contact strip ── */
.uv-ab-contact {
    padding: 40px 56px 72px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 14px 24px;
    flex-wrap: wrap;
}
.uv-ab-contact-label {
    font: 500 10px/1 var(--mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-3);
    flex-basis: 100%;
    margin-bottom: 2px;
}
.uv-ab-contact a {
    font: 500 14px/1 var(--sans);
    color: var(--text-2);
    text-decoration: none;
    letter-spacing: -0.005em;
    transition: color 0.15s;
}
.uv-ab-contact a:hover { color: var(--accent); }
.uv-ab-contact-sep {
    color: var(--border);
    font-size: 16px;
    line-height: 1;
    user-select: none;
}

/* ── Responsive ── */
@media (max-width: 960px) {
    .uv-ab-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 740px) {
    .uv-ab-hero { flex-direction: column; align-items: flex-start; gap: 36px; }
    .uv-ab-hero-stats { flex-direction: row; gap: 32px; }
    .uv-ab-stat { text-align: left; }
}
@media (max-width: 640px) {
    .uv-ab-hero { padding: 56px 24px 48px; }
    .uv-ab-team { padding: 48px 24px 72px; }
    .uv-ab-grid { gap: 28px 16px; }
    .uv-ab-contact { padding: 36px 24px 56px; }
    .uv-ab-contact-sep { display: none; }
}