/* ==========================================================================
   cb-why.css — Custom Build: Why Meadan / Designed For You
   Figma: W 1440px fixed, H 700px, justify-content space-between
   Padding: 80px top/bottom (top-bottom token), 60px left/right (desktop-left-right token)
   ========================================================================== */

.cb-why {
    background-color: #C8BBAB;
    padding-block: 80px;
    padding-inline: var(--gutter); /* resolves to 60px at ≥1200px */
}

.cb-why__inner {
    width: 100%;
    max-width: var(--max-width); /* 1320px */
    margin-inline: auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
}

/* ── Left column: eyebrow + heading ───────────────────────────────────────── */
.cb-why__header {
    display: flex;
    flex-direction: column;
    gap: 28px;
    flex: 1 1 0;
    min-width: 0;
    max-width: 336px;
}

.cb-why__eyebrow {
    font-family: var(--font-body);
    font-size: 0.875rem;   /* 14px */
    font-weight: 500;      /* Geist Medium */
    line-height: 1;        /* 100% */
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--Lead-Colours-Yakisugi, #1C1C1C);
}

.cb-why__heading {
    font-family: var(--font-heading);  /* Freight Neo Pro */
    font-size: 2.5rem;     /* 40px */
    font-weight: 400;      /* Freight Neo Book */
    line-height: 1.15;     /* 115% */
    letter-spacing: 0;
    color: var(--color-dark, #1a1a1a);
    width: 100%;           /* fills 336px container, hug height */
    margin: 0;
    overflow-wrap: break-word;
}

/* ── Right column: 2-col wrap of numbered items ───────────────────────────── */
.cb-why__items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 40px;
    flex: 1 1 0;
    min-width: 0;
    align-content: flex-start;
}

.cb-why__item {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cb-why__item-number {
    font-family: var(--font-heading);  /* Freight Neo Pro — Figma: text-[40px] Freight Neo Book */
    font-size: 2.5rem;     /* 40px */
    font-weight: 400;      /* Book */
    line-height: 1.15;
    letter-spacing: 0;
    color: var(--color-dark, #1c1c1c);
}

.cb-why__item-title {
    font-family: var(--font-body);
    font-size: 1.5rem;     /* 24px */
    font-weight: 500;      /* Geist Medium */
    line-height: 1.1;      /* 110% */
    letter-spacing: 0;
    color: var(--color-dark, #1a1a1a);
    margin: 0;
    overflow-wrap: break-word;
}

.cb-why__item-description {
    font-family: var(--font-body);
    font-size: 1rem;       /* 16px */
    font-weight: 300;      /* Geist Light */
    line-height: 1.39;     /* 139% */
    letter-spacing: 0;
    color: var(--Lead-Colours-Yakisugi, #1C1C1C);
    margin: 0;
    overflow-wrap: break-word;
}

/* ── Laptop / tablet proportional ─────────────────────────────────────────── */
@media (max-width: 1200px) {
    .cb-why__header {
        flex: 1 1 32%;
        max-width: none;
    }

    .cb-why__items {
        flex: 1 1 62%;
    }

    .cb-why__header,
    .cb-why__items {
        min-width: 0;
    }
}

/* ── Stack (≤ 900px) ──────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .cb-why__inner {
        flex-direction: column;
        gap: 40px;
    }

    .cb-why__header {
        flex: none;
        width: 100%;
        max-width: 100%;
    }

    .cb-why__items {
        flex: none;
        width: 100%;
    }
}

/* ── Mobile — Figma 390px: 80px block / 16px sides, single column ──────────── */
@media (max-width: 639px) {
    .cb-why {
        padding-block: 80px;
        padding-inline: 16px;
    }

    .cb-why__header {
        flex: none;
        width: 100%;
    }

    /* Heading: Mobile/H2 — Freight Neo 32px, lh 1 */
    .cb-why__heading {
        font-size: 2rem;
        line-height: 1;
    }

    /* Single column, 20px gap between items */
    .cb-why__items {
        flex: none;
        width: 100%;
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .cb-why__item {
        width: 100%;
    }
}