/* ==========================================================================
   cb-approach.css — Custom Build: Our Approach (FAQ Accordion + Image)
   Figma: 1440×932, background #C8BBAB, padding 80px top/bottom, 60px sides
   Left col: 675px | Auto gap | Right image: 560×700px
   ========================================================================== */

.cb-approach {
    background-color: #F0EBDF;
    /* background-color: var(--cb-approach-bg, var(--color-stone, #c8bbab)); */
    padding-block: 80px;
    padding-inline: var(--gutter); /* 60px at ≥1200px */
}

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

/* ── Left column: header + accordion ──────────────────────────────────────── */
.cb-approach__content {
    flex: 1 1 0;
    min-width: 0;
    max-width: 675px;
    display: flex;
    flex-direction: column;
    gap: 40px; /* between header group and accordion */
}

/* Header group: eyebrow + heading + description — 28px between each */
.cb-approach__header {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* Eyebrow — Figma: Geist 500, 14px, 100% lh, uppercase */
.cb-approach__eyebrow {
    font-family: var(--font-body);
    font-size: 0.875rem;   /* 14px */
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
  
}

/* Heading — Figma: Freight Neo 400, 40px, 115% lh */
.cb-approach__heading {
    font-family: var(--font-heading);
    font-size: 2.5rem;     /* 40px */
    font-weight: 400;
    line-height: 1.15;     /* 115% */
    letter-spacing: 0;
    color: var(--color-dark, #1a1a1a);
    margin: 0;
    overflow-wrap: break-word;
}

/* Description — Figma: Geist 300, 16px, 139% lh */
.cb-approach__description {
    font-family: var(--font-body);
    font-size: 1rem;       /* 16px */
    font-weight: 300;
    line-height: 1.39;     /* 139% */
    letter-spacing: 0;
    color: var(--color-dark, #1a1a1a);
    margin: 0;
}

/* ── Accordion ─────────────────────────────────────────────────────────────── */
.cb-approach__accordion {
    display: flex;
    flex-direction: column;
    border-top: 1px solid rgba(0, 0, 0, 0.15);
}

.cb-approach__item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

/* FAQ question — Figma: Geist 500, 20px, 110% lh */
.cb-approach__question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 20px 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-body);
    font-size: 1.25rem;    /* 20px */
    font-weight: 500;
    line-height: 1.1;      /* 110% */
    letter-spacing: 0;
    color: var(--color-dark, #1a1a1a);
}

.cb-approach__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    transition: transform 0.2s ease;
    font-size: 35px;
    font-weight: 200;
}

.cb-approach__icon::before {
    content: "+";
}
.cb-approach__item.is-open .cb-approach__icon {
    transform: none;
}
.cb-approach__item.is-open .cb-approach__icon::before {
    content: "-";
}

.cb-approach__item.is-open .cb-approach__icon {
    transform: rotate(180deg);
}

.cb-approach__answer {
    overflow: hidden;
}

.cb-approach__answer[hidden] {
    display: none;
}

/* FAQ answer — Figma: Geist 300, 16px, 139% lh */
.cb-approach__answer-inner {
    padding-bottom: 20px;
    font-family: var(--font-body);
    font-size: 1rem;       /* 16px */
    font-weight: 300;
    line-height: 1.39;     /* 139% */
    letter-spacing: 0;

}

.cb-approach__answer-inner p {
    margin: 0 0 12px;
}

.cb-approach__answer-inner p:last-child {
    margin-bottom: 0;
}

/* ── Right: tall image 560×700px ──────────────────────────────────────────── */
.cb-approach__image-wrap {
    flex: 1 1 0;
    min-width: 0;
    max-width: 560px;
    height: 700px;
    margin: 0;
    overflow: hidden;
    position: sticky;
    top: 80px;
}

.cb-approach__image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform var(--image-hover-duration, 0.5s) var(--image-hover-ease, ease);
}

.cb-approach__image-wrap:hover .cb-approach__image {
    transform: scale(var(--image-hover-scale, 1.03));
}

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

    .cb-approach__image-wrap {
        flex: 1 1 44%;
        max-width: none;
    }

    .cb-approach__content,
    .cb-approach__image-wrap {
        min-width: 0;
    }
}

/* ── Tablet ────────────────────────────────────────────────────────────────── */
@media (max-width: 959px) {
    .cb-approach__inner {
        flex-direction: column;
        gap: 40px;
    }

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

    .cb-approach__image-wrap {
        flex: none;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        position: static;
        order: -1;
    }
}

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

    .cb-approach__inner {
        flex-direction: column;
        gap: 40px;
    }

    .cb-approach__content {
        flex: none;
        width: 100%;
        order: 1;           /* content first */
    }

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

    /* Image below content — Figma: aspect-[358/448] (portrait), w-full */
    .cb-approach__image-wrap {
        flex: none;
        width: 100%;
        height: auto;
        aspect-ratio: 358 / 448;
        position: static;
        order: 2;           /* image after content */
    }
}