/* ── About Us page ─────────────────────────────────────────────────────────── */

.gb-about {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 16px 60px;
}

/* ── Section: About ── */
.gb-about__hero {
    padding: 48px 0 40px;
    text-align: center;
    border-bottom: 1px solid #f0f0f0;
}
.gb-about__hero h1 {
    font-size: 2rem;
    font-weight: 800;
    color: #1a1a1a;
    margin-bottom: 16px;
    line-height: 1.2;
}
.gb-about__hero p {
    font-size: 1.05rem;
    color: #555;
    line-height: 1.75;
    max-width: 680px;
    margin: 0 auto;
}

/* ── Section: Our Story ── */
.gb-about__story {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    padding: 56px 0;
    border-bottom: 1px solid #f0f0f0;
}
.gb-about__story-img {
    background: linear-gradient(135deg, #f5f0eb 0%, #ede8e3 100%);
    border-radius: 16px;
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
}
.gb-about__story-text h2 {
    font-size: 1.6rem;
    font-weight: 800;
    color: #1a1a1a;
    margin-bottom: 16px;
    line-height: 1.25;
}
.gb-about__story-text p {
    font-size: 1rem;
    color: #555;
    line-height: 1.75;
}

/* ── Section: Team ── */
.gb-about__team {
    padding: 56px 0 0;
}
.gb-about__team-title {
    font-size: 1.6rem;
    font-weight: 800;
    color: #1a1a1a;
    text-align: center;
    margin-bottom: 40px;
}
.gb-about__team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 24px;
}
.gb-about__member {
    text-align: center;
}
.gb-about__member-photo {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 14px;
    display: block;
    background: #f0f0f0;
}
.gb-about__member-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.5rem;
    background: linear-gradient(135deg, #fdf0f5 0%, #f5e6ee 100%);
}
.gb-about__member-avatar.male {
    background: linear-gradient(135deg, #e8f4ff 0%, #d6eaff 100%);
}
.gb-about__member h3 {
    font-size: 1rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 4px;
}
.gb-about__member-role {
    font-size: 0.82rem;
    color: var(--b360x-primary, #e05a00);
    font-weight: 600;
    margin-bottom: 8px;
}
.gb-about__member p {
    font-size: 0.88rem;
    color: #666;
    line-height: 1.6;
}

/* ── Breadcrumb ── */
.gb-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: #999;
    padding: 16px 0 0;
}
.gb-breadcrumb a { color: #666; text-decoration: none; }
.gb-breadcrumb a:hover { color: var(--b360x-primary, #e05a00); }
.gb-breadcrumb__sep { color: #ccc; }

/* ── Mobile ── */
@media (max-width: 640px) {
    .gb-about__hero { padding: 32px 0 28px; }
    .gb-about__hero h1 { font-size: 1.6rem; }
    .gb-about__hero p { font-size: 0.95rem; }
    .gb-about__story {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 36px 0;
    }
    .gb-about__story-img { display: none; }
    .gb-about__story-text h2 { font-size: 1.35rem; }
    .gb-about__team { padding: 36px 0 0; }
    .gb-about__team-title { font-size: 1.35rem; margin-bottom: 28px; }
    .gb-about__team-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .gb-about__member-photo,
    .gb-about__member-avatar { width: 90px; height: 90px; font-size: 2.5rem; }
}