/* About Us page — v2 redesign (ab-* classes, vars from v2-core.css) */

.accent { color: var(--cr); }

/* ── Section label pill ── */
.ab-section-tag {
    display: inline-block;
    background: var(--yet);
    color: var(--ch);
    font-size: 11px;
    font-weight: 800;
    padding: 6px 14px;
    border-radius: 9999px;
    letter-spacing: 0.4px;
    margin-bottom: 18px;
}

/* ── Shared centred heading block ── */
.ab-head { text-align: center; margin-bottom: 56px; }
.ab-head h2 {
    font-size: 42px;
    font-weight: 800;
    color: var(--t1);
    letter-spacing: -0.5px;
    line-height: 1.12;
    margin-bottom: 14px;
}
.ab-head p {
    font-size: 17px;
    font-weight: 600;
    color: var(--t2);
    line-height: 1.65;
    max-width: 620px;
    margin: 0 auto;
}

/* ─────────────────────────── HERO ─────────────────────────── */
.ab-hero {
    padding: 88px 56px 96px;
    background: #fff;
    position: relative;
    overflow: hidden;
}
.ab-hero::before {
    content: '';
    position: absolute;
    width: 520px; height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(232,23,93,0.10) 0%, transparent 70%);
    top: -100px; left: -100px;
    pointer-events: none;
}
.ab-hero::after {
    content: '';
    position: absolute;
    width: 420px; height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,214,0,0.18) 0%, transparent 70%);
    bottom: -120px; right: -80px;
    pointer-events: none;
}
.ab-hero-in {
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
    position: relative;
    z-index: 2;
}
.ab-hero h1 {
    font-size: 54px;
    font-weight: 900;
    letter-spacing: -1.4px;
    line-height: 1.05;
    color: var(--t1);
    margin-bottom: 20px;
}
.ab-hero p.lead {
    font-size: 18px;
    font-weight: 600;
    color: var(--t2);
    line-height: 1.65;
    margin-bottom: 32px;
    max-width: 540px;
}

/* Collage */
.ab-collage {
    position: relative;
    width: 100%;
    max-width: 540px;
    height: 520px;
}
.ab-photo {
    position: absolute;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 12px 36px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.06);
}
.ab-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ab-photo.p1 {
    top: 0; left: 0;
    width: 300px; height: 220px;
    background: linear-gradient(135deg, var(--crt) 0%, #fce4ec 100%);
    animation: abFloat 5s ease-in-out infinite;
    z-index: 2;
}
.ab-photo.p2 {
    top: 60px; right: 0;
    width: 200px; height: 260px;
    background: linear-gradient(135deg, var(--yet) 0%, #fffde7 100%);
    animation: abFloat 5s ease-in-out infinite 0.8s;
    z-index: 3;
}
.ab-photo.p3 {
    bottom: 0; left: 60px;
    width: 320px; height: 200px;
    background: linear-gradient(135deg, #e8f5e9 0%, #f1f8e9 100%);
    animation: abFloat 5s ease-in-out infinite 1.6s;
    z-index: 2;
}
.ab-photo-deco {
    position: absolute;
    border-radius: 50%;
    animation: abFloat 5s ease-in-out infinite;
}
.ab-photo-deco.d1 {
    top: 24px; right: -8px;
    width: 46px; height: 46px;
    background: radial-gradient(circle, #FFD600 0%, #FFA500 100%);
    box-shadow: 0 6px 20px rgba(255,214,0,0.5);
    animation-delay: 0.4s;
    z-index: 4;
}
.ab-photo-deco.d2 {
    bottom: 30px; right: 14px;
    width: 30px; height: 30px;
    background: radial-gradient(circle, #E8175D 0%, #C4104A 100%);
    box-shadow: 0 4px 16px rgba(232,23,93,0.5);
    animation-delay: 1.2s;
    z-index: 4;
}
@keyframes abFloat {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-6px); }
}

/* ─────────────────────────── STORY ─────────────────────────── */
.ab-story {
    padding: 96px 56px;
    background: #FAF7F2;
    position: relative;
    overflow: hidden;
}
.ab-story::before {
    content: '';
    position: absolute;
    width: 480px; height: 480px;
    background: radial-gradient(circle, rgba(255,214,0,0.20) 0%, transparent 70%);
    top: -100px; right: -60px;
    pointer-events: none;
}
.ab-story-in {
    max-width: 980px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}
.ab-story h2 {
    font-size: 42px;
    font-weight: 800;
    color: var(--t1);
    letter-spacing: -0.5px;
    line-height: 1.12;
    margin-bottom: 22px;
}
.ab-story p {
    font-size: 16px;
    font-weight: 600;
    color: var(--t2);
    line-height: 1.85;
    margin-bottom: 18px;
}
.ab-story p strong { color: var(--t1); }
.ab-mission {
    background: #fff;
    border-radius: 22px;
    padding: 36px 40px;
    margin-top: 36px;
    border-left: 5px solid var(--cr);
    box-shadow: 0 4px 24px rgba(0,0,0,0.05);
}
.ab-mission-lbl {
    font-size: 11px;
    font-weight: 800;
    color: var(--cr);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.ab-mission p {
    font-size: 18px;
    font-weight: 700;
    color: var(--t1);
    line-height: 1.65;
    margin: 0;
}

/* ─────────────────────────── VALUES ─────────────────────────── */
.ab-values { padding: 96px 56px; background: #fff; }
.ab-values-in { max-width: 1240px; margin: 0 auto; }
.ab-vgrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}
.ab-vcard {
    background: #FAFAFB;
    border: 1px solid var(--bl);
    border-radius: 20px;
    padding: 32px 28px;
    transition: transform 240ms ease, box-shadow 240ms ease, background 240ms ease;
}
.ab-vcard:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.06), 0 20px 44px rgba(0,0,0,0.04);
    background: #fff;
}
.ab-vcard-bell {
    width: 56px; height: 56px;
    border-radius: 16px;
    background: var(--crt);
    color: var(--cr);
    display: flex; align-items: center; justify-content: center;
    font-size: 26px;
    margin-bottom: 22px;
    transition: all 240ms;
}
.ab-vcard:hover .ab-vcard-bell { background: var(--cr); color: #fff; transform: scale(1.05); }
.ab-vcard h3 { font-size: 18px; font-weight: 800; color: var(--t1); margin-bottom: 10px; letter-spacing: -0.2px; }
.ab-vcard p  { font-size: 13px; font-weight: 600; color: var(--t2); line-height: 1.7; }

/* ─────────────────────────── CEO QUOTE ─────────────────────────── */
.ab-quote {
    padding: 96px 56px;
    background: var(--ch);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.ab-quote::before {
    content: '';
    position: absolute;
    width: 640px; height: 640px;
    background: radial-gradient(circle, rgba(232,23,93,0.18) 0%, transparent 70%);
    top: -160px;
    left: 50%; transform: translateX(-50%);
    pointer-events: none;
}
.ab-quote-in {
    max-width: 880px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 2;
}
.ab-quote-mark {
    font-size: 120px;
    line-height: 0.8;
    font-weight: 900;
    color: var(--cr);
    margin-bottom: 8px;
}
.ab-quote q {
    font-size: 26px;
    font-weight: 800;
    line-height: 1.45;
    letter-spacing: -0.3px;
    color: #fff;
    display: block;
    margin-bottom: 30px;
    quotes: none;
}
.ab-quote q::before, .ab-quote q::after { content: ''; }
.ab-quote-au { display: inline-flex; align-items: center; gap: 14px; }
.ab-quote-av {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: #FFF0F4;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(232,23,93,0.32);
}
.ab-quote-av svg { width: 100%; height: 100%; display: block; }
.ab-quote-n { font-size: 15px; font-weight: 800; color: #fff; text-align: left; }
.ab-quote-r { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.6); margin-top: 2px; }

/* ─────────────────────────── TEAM ─────────────────────────── */
.ab-team { padding: 96px 56px; background: #FAF7F2; }
.ab-team-in { max-width: 1240px; margin: 0 auto; }
.ab-team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}
.ab-team-card {
    background: #fff;
    border: 1px solid var(--bl);
    border-radius: 18px;
    padding: 28px 24px;
    transition: transform 220ms ease, box-shadow 220ms ease;
    text-align: center;
}
.ab-team-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.07), 0 18px 40px rgba(0,0,0,0.05);
}
.ab-team-av {
    width: 96px; height: 96px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 16px;
    overflow: hidden;
    background: #FFF0F4;
    box-shadow: 0 6px 18px rgba(232,23,93,0.18);
    transition: transform 280ms ease;
}
.ab-team-card:hover .ab-team-av { transform: scale(1.06) rotate(-3deg); }
.ab-team-av svg { width: 100%; height: 100%; display: block; }
.ab-team-name { font-size: 16px; font-weight: 900; color: var(--t1); margin-bottom: 4px; letter-spacing: -0.2px; }
.ab-team-role {
    display: inline-block;
    font-size: 10px; font-weight: 800;
    color: var(--cr);
    background: var(--crt);
    padding: 3px 11px;
    border-radius: 9999px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.ab-team-bio { font-size: 12px; font-weight: 600; color: var(--t2); line-height: 1.65; }

/* ─────────────────────────── RESPONSIVE ─────────────────────────── */
@media (max-width: 980px) {
    .ab-hero-in { grid-template-columns: 1fr; gap: 48px; }
    .ab-hero h1 { font-size: 40px; }
    .ab-vgrid { grid-template-columns: 1fr 1fr; }
    .ab-team-grid { grid-template-columns: 1fr 1fr; }
    .ab-hero, .ab-story, .ab-values, .ab-quote, .ab-team { padding-left: 24px; padding-right: 24px; }
    .ab-quote q { font-size: 20px; }
}
@media (max-width: 640px) {
    .ab-hero h1, .ab-story h2, .ab-head h2 { font-size: 30px; }
    .ab-vgrid, .ab-team-grid { grid-template-columns: 1fr; }
    .ab-collage { height: 420px; max-width: 340px; }
    .ab-photo.p1 { width: 220px; height: 160px; }
    .ab-photo.p2 { width: 140px; height: 180px; }
    .ab-photo.p3 { width: 240px; height: 150px; left: 40px; }
    .ab-photo-deco.d1 { width: 34px; height: 34px; }
    .ab-photo-deco.d2 { width: 24px; height: 24px; }
}