/* ============================================================
   NEXAURA STUDIOS — ABOUT PAGE STYLES
   ============================================================ */

/* ── About Hero ───────────────────────────────────── */
.about-hero {
    padding-top: calc(var(--nav-height) + var(--space-3xl));
    padding-bottom: var(--space-3xl);
    position: relative;
    overflow: hidden;
}
.about-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gradient-hero);
    pointer-events: none;
}
.about-hero__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
    align-items: center;
    position: relative;
    z-index: 1;
}
.about-hero__title {
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 900;
    margin-bottom: var(--space-lg);
}
.about-hero__desc {
    font-size: var(--fs-md);
    color: var(--clr-text-secondary);
    line-height: 1.7;
}
.about-hero__image {
    display: flex;
    justify-content: center;
}
.about-hero__image img {
    max-width: 100%;
    animation: float 4s ease-in-out infinite;
    filter: drop-shadow(0 20px 40px rgba(251, 54, 64, 0.15));
}

/* ── Core Values ──────────────────────────────────── */
.values-section .grid {
    grid-template-columns: repeat(3, 1fr);
}

/* ── Team Section ─────────────────────────────────── */
.team-section .grid {
    grid-template-columns: repeat(3, 1fr);
    max-width: 800px;
    margin: 0 auto;
}

/* ── Timeline Section ─────────────────────────────── */
.timeline-section {
    overflow: hidden;
}

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 1024px) {
    .about-hero__inner {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .about-hero__image img { max-width: 350px; }
}
@media (max-width: 768px) {
    .values-section .grid,
    .team-section .grid {
        grid-template-columns: 1fr;
        max-width: 300px;
        margin: 0 auto;
    }
}