/* ============================================================
   HOW WE WORK — SECTION BASE
============================================================ */

.how-we-work {
    padding-top: var(--section-padding-y);
    padding-bottom: var(--section-padding-y);
    background: var(--color-purple);
    color: var(--color-white);
    text-align: center;
}

.how-we-work__heading {
    font-family: var(--font-heading);
    font-size: var(--font-h2);
    line-height: var(--lh-tight);
    color: var(--color-white);
    margin-bottom: var(--space-lg);
}

/* ============================================================
   DESKTOP — Horizontal Scroll Row
============================================================ */

.how-we-work__grid {
    display: flex;
    justify-content: center;
    gap: var(--space-lg);
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: var(--space-xs);
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin-top: var(--space-xl);
}

.how-we-work__item {
    scroll-snap-align: center;
    overflow: visible !important;
}

.how-we-work__icon {
    width: 90px;
    margin: 0 auto var(--space-sm);
    filter: brightness(1.1);
    transform-origin: center bottom;
    transition: transform 0.25s ease, filter 0.25s ease;
}

/* Title under each icon */
.how-we-work__title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--font-h4);
    color: var(--color-white);
    margin-bottom: var(--space-xs);
}

/* Description */
.how-we-work__text {
    max-width: 320px;
    margin: 0 auto;
    font-size: var(--font-body);
    line-height: var(--lh-normal);
    color: var(--color-white);
}

/* Hover animation (desktop only) */
@media (min-width: 1025px) {
    .how-we-work__item:hover .how-we-work__icon {
        transform: scale(1.12);
        filter: brightness(1.25);
    }
}

/* ============================================================
   RESPONSIVE — Tablet + Mobile (Stacked)
============================================================ */

@media (max-width: 1024px) {
    .how-we-work__grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-lg);
        overflow: visible;
        margin-top: var(--space-lg);
    }

    .how-we-work__item {
        max-width: 380px;
        margin: 0 auto;
    }

    /* Disable hover animation on touch devices */
    .how-we-work__icon,
    .how-we-work__item:hover .how-we-work__icon {
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
}

.how-we-work {
    overflow: visible !important;
}

.how-we-work__grid {
    overflow: visible !important;
}

/* ============================================================
   HOW WE WORK — SMALLER TITLES (match Approach block sizing)
============================================================ */

.how-we-work__title {
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    font-size: 20px !important;   /* Desktop size */
    line-height: 1.3 !important;
    color: var(--color-white) !important;
    margin-bottom: var(--space-xs) !important;
}

/* Tablet */
@media (max-width: 1024px) {
    .how-we-work__title {
        font-size: 18px !important;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .how-we-work__title {
        font-size: 16px !important;
    }
}

/* ============================================================
   HOW WE WORK — SMALLER ICONS
============================================================ */

/* Desktop */
.how-we-work__icon {
    width: 70px !important;   /* was 90px */
    margin: 0 auto var(--space-sm) !important;
}

/* Tablet */
@media (max-width: 1024px) {
    .how-we-work__icon {
        width: 60px !important;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .how-we-work__icon {
        width: 50px !important;
    }
}

/* ============================================================
   HOW WE WORK — CORRECT H2 HEADING (MATCH GLOBAL SYSTEM)
============================================================ */

.how-we-work__heading {
    font-family: var(--font-heading) !important;
    font-size: var(--font-h2) !important;   /* desktop H2 */
    font-weight: 700 !important;
    line-height: var(--lh-tight) !important;
    color: var(--color-white) !important;
    text-align: center !important;
    margin-bottom: var(--space-lg) !important;
}

/* Tablet ≤1024px — same behaviour as your other H2 blocks */
@media (max-width: 1024px) {
    .how-we-work__heading {
        font-size: 26px !important;   /* matches H2 clamp mid-range */
    }
}

/* Mobile ≤768px — match lowest end of H2 clamp */
@media (max-width: 768px) {
    .how-we-work__heading {
        font-size: 22px !important;
    }
}

/* Small phones ≤480px — final safe size */
@media (max-width: 480px) {
    .how-we-work__heading {
        font-size: 20px !important;
    }
}

/* HOW WE WORK — KEEP GLOBAL SIZE, ONLY CHANGE COLOR */
.how-we-work__heading {
    color: var(--color-white) !important;
}

/* Tablet */
@media (max-width: 1024px) {
    .approach-block__icon {
        width: 60px !important;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .approach-block__icon {
        width: 50px !important;
    }
}

.how-we-work__heading {
    font-family: var(--font-heading);
    font-size: var(--font-h2);        /* your global H2 */
    font-weight: 700;
    line-height: var(--lh-tight);
    color: var(--color-white);        /* this block uses white */
    margin-bottom: var(--space-md);
    text-align: center;
}

@media (max-width: 1024px) {
    .how-we-work__heading {
        font-size: var(--font-h2);   /* consistent step-down */
    }
}

@media (max-width: 768px) {
    .how-we-work__heading {
        font-size: 20px;             /* your mobile H3 equivalent */
    }
}

/* Reduce space between heading and icons */
.how-we-work__grid {
    margin-top: 20px !important;   /* instead of var(--space-xl) */
    padding-top: 10px !important;  /* adds safe breathing room for icons */
}

/* Force perfect vertical alignment in HOW WE WORK block */
.how-we-work__item {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    text-align: center;
    height: 100% !important;
}

.how-we-work__icon,
.how-we-work__title {
    flex-shrink: 0 !important;
}

.how-we-work__text {
    flex: 1 1 auto !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* ============================================================
   HOW WE WORK — MATCH VALUE PILLARS SPACING (DESKTOP ONLY)
============================================================ */
@media (min-width: 1025px) {

    /* Match section padding to Value Pillars */
    .how-we-work {
        padding-top: 80px !important;      /* was much larger */
        padding-bottom: 80px !important;
    }

    /* Reduce huge gap between heading and icons */
    .how-we-work__grid {
        margin-top: 40px !important;       /* was var(--space-xl) */
        gap: 60px !important;              /* matches Value Pillars feel */
    }

    /* ICON — match Value Pillars icon size */
    .how-we-work__icon {
        width: 70px !important;
        height: 70px !important;
        margin-bottom: 6px !important;     /* tighten like Value Pillars */
    }

    /* TITLE — match Value Pillars title spacing + size */
    .how-we-work__title {
        font-size: 20px !important;
        line-height: 1.3 !important;
        margin-bottom: 4px !important;     /* smaller gap */
        min-height: 50px !important;       /* aligns rows perfectly */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    /* DESCRIPTION — match Value Pillars paragraph spacing */
    .how-we-work__text {
        max-width: 220px !important;
        margin: 0 auto !important;
        font-size: var(--font-small);
        line-height: var(--lh-normal);
    }

    /* Each item has identical height visually */
    .how-we-work__item {
        max-width: 240px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: center !important;
        text-align: center !important;
    }
}

/* ============================================================
   HOW WE WORK — Pyramid layout (BOTTOM TWO ON SAME LINE)
   TABLET ONLY (768px–1024px)
============================================================ */

@media (min-width: 768px) and (max-width: 1024px) {

    .how-we-work__grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        justify-items: center !important;
        row-gap: 60px !important;
    }

    /* TOP ROW (unchanged) */
    .how-we-work__item:nth-child(1) { grid-column: 1; }
    .how-we-work__item:nth-child(2) { grid-column: 2; }
    .how-we-work__item:nth-child(3) { grid-column: 3; }

    /* BOTTOM ROW – FORCE ON SAME LINE */

    /* Item 4 sits between column 1 & 2 */
    .how-we-work__item:nth-child(4) {
        grid-column: 1 / span 1;
        justify-self: end;
    }

    /* Item 5 sits between column 2 & 3 */
    .how-we-work__item:nth-child(5) {
        grid-column: 3 / span 1;
        justify-self: start;
    }
}

/* ============================================================
   HOW WE WORK — Move bottom two icons inward (tablet only)
============================================================ */

@media (min-width: 768px) and (max-width: 1024px) {

    /* Ethical mindset – move slightly right */
    .how-we-work__item:nth-child(4) {
        transform: translateX(120px); /* adjust this number if needed */
    }

    /* Trusted delivery – move slightly left */
    .how-we-work__item:nth-child(5) {
        transform: translateX(-120px); /* adjust this number if needed */
    }
}