/* =================================================================== DIFFERENT section css =================================================================== */
.different {
    /* .band-stair pulls the section up 120px so its white corners climb into
       the agenda band above; the top padding buys that 120px back. */
    padding-block: calc(var(--sectionGap) + var(--stair2)) var(--sectionGap);
    background: var(--white);

    /* measured 80px on the new artboard (the old one set it at 100), with the
       opening mark hanging in a 60px column of its own at x110 so the copy
       lines up with the body columns below at x170 */
    & .different__quote {
        display: grid;
        grid-template-columns: var(--sp50) minmax(0, 1fr);        
    }
    & .different__art-wrap {
        position: absolute;
        right: -5%;
        top: 50%;
        transform: translateY(-50%);
        width: 522px;
        height: 478px;
    }

    & .different__mark {
        font-family: var(--font-display);
        font-size: var(--f80);
        font-weight: var(--fw-display);
        line-height: 1;
        color: var(--primary);

        &.different__mark--close {
            margin-left: 10px;
            line-height: 0 !important;
        }
    }

    & .different__q {
        font-family: var(--font-display);
        font-size: var(--f80);
        font-weight: var(--fw-display);
        letter-spacing: var(--track-display);
        line-height: var(--lhTight);
        color: var(--heading);

        /* the closing mark sits inline at the end of the last line */
        & .different__mark--close {
            font-size: var(--f60);
            color: var(--primary);
        }
    }

    & .different__answer {
        grid-column: 2;
        margin-top: var(--sp60);
        font-family: var(--font-display);
        font-size: var(--f60);
        font-weight: var(--fw-label);
        letter-spacing: var(--track-display);
        line-height: 1;
        color: var(--primary);
    }

    /* measured, 100->1820 measure:
         left column  170 ->  540   (370)
         gutter                     (110)
         right column 680 -> 1140   (460) */
    & .different__grid {
        display: grid;
        grid-template-columns: minmax(0, 370fr) minmax(0, 460fr);
        gap: var(--sp110);
        max-width: 970px;
        margin-top: var(--sp60);
        margin-left: var(--sp50);
    }

    & .different__col p + p { margin-top: var(--sp30); }

    & .different__cta { margin-top: var(--sp50); }

    & .different__note {
        margin-top: var(--sp25);
        font-size: var(--f18);
    }
}

/* =================================================================== responsive =================================================================== */
@media (max-width: 1599.98px) {
    .different {
        & .different__art-wrap{
            width: 472px;
            height: 478px;
        }
        & .different__grid{
            max-width: 820px;
            gap: var(--sp60);
        }
    }
@media (max-width: 1199.98px) {
    .different {
        & .different__art-wrap {
            width: 370px;
            position: relative;
            transform: unset;
            /* aspect-ratio: 1 / 1; */
            height: 370px;
            top: 40px;
            margin-bottom: 50px;
        }
        }
    }
}
@media (max-width: 767.98px) {
    & .different__art-wrap {
        width: 310px;
        position: unset;
        transform: unset;
        /* aspect-ratio: 1 / 1; */
        height: 450px;
    }
}
@media (max-width: 767.98px) {
    .different {
        & .different__quote {
            grid-template-columns: 1fr;
            margin-left: 0;
        }

        & .different__mark { display: none; }
        & .different__answer { grid-column: 1; }

        & .different__grid {
            grid-template-columns: 1fr;
            gap: var(--sp30);
            margin-left: 0;
        }
    }
}

@media (max-width: 575.98px) {
    .different {
        /* the artboard's break falls mid-sentence at this measure */
        & .different__title br { display: none; }
    }
}