/* ==========================================================================
   dab-intro-stats.css — Design & Build: Intro + Stats
   Figma: node 4799:22636 — white bg, px-60px py-80px
   Centered text (max-width 768px) + 3 stats with gap-163px
   ========================================================================== */

.dab-intro-stats {
    background-color: var(--color-white, #fff);
    padding-block: 80px;
    padding-inline: 60px;
    text-align: center;
    color: var(--color-dark, #1c1c1c);
}

.dab-intro-stats__inner {
    max-width: var(--max-width);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center;
}

/* Text block */
.dab-intro-stats__text {
    display: flex;
    flex-direction: column;
    gap: 28px;
    max-width: 768px;
    width: 100%;
}

/* Heading: Freight Neo 400, 40px, 115% lh */
.dab-intro-stats__heading {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 400;
    line-height: 1.15;
    color: var(--color-dark, #1c1c1c);
    margin: 0;
}

/* Description: Geist 300, 16px, 139% lh */
.dab-intro-stats__description {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.39;
    color: var(--color-dark, #1c1c1c);
    margin: 0;
}

/* Stats row: 3 stats, centred, gap 163px */
.dab-intro-stats__stats {
    display: flex;
    justify-content: center;
    gap: 163px;
    width: 100%;
}

.dab-intro-stats__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}

/* Stat value: Freight Neo 400, 48px, lh 1 */
.dab-intro-stats__stat-value {
    font-family: var(--font-heading);
    font-size: 3rem;   /* 48px */
    font-weight: 400;
    line-height: 1;
    color: var(--color-dark, #1c1c1c);
    display: block;
}

/* Stat label: Geist 500, 24px, lh 1.1 */
.dab-intro-stats__stat-label {
    font-family: var(--font-body);
    font-size: 1.5rem;  /* 24px */
    font-weight: 500;
    line-height: 1.1;
    color: var(--color-dark, #1c1c1c);
    display: block;
}

/* ── Tablet ─────────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .dab-intro-stats {
        padding-inline: 40px;
    }
    .dab-intro-stats__stats {
        gap: 60px;
    }
}

/* ── Mobile (≤ 639px) ────────────────────────────────────────────────────────── */
@media (max-width: 639px) {
    .dab-intro-stats {
        padding-block: 80px;
        padding-inline: 16px;
    }

    /* Mobile/H2: 32px lh 1 */
    .dab-intro-stats__heading {
        font-size: 2rem;
        line-height: 1;
    }

    /* Stats: stack vertically, centred, 40px gap */
    .dab-intro-stats__stats {
        flex-direction: column;
        gap: 40px;
        align-items: center;
    }

    /* Mobile/H1: 40px (not 48px desktop) */
    .dab-intro-stats__stat-value {
        font-size: 2.5rem;   /* 40px */
    }

    /* Mobile/H4: 20px (not 24px desktop) */
    .dab-intro-stats__stat-label {
        font-size: 1.25rem;  /* 20px */
    }
}