/* =================================================================== REQUEST section css =================================================================== */
.request {
    padding-block:0 var(--sectionGap);
    background: var(--cream);
    & .request__box::before{
       z-index: -1;
    }
    /* measured: inset dark box 1680 wide with the 2-step notch */
    & .request__box {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--g100);        
        padding: var(--sp110) var(--sp110);
        background: var(--ink);
    }
    & .request__intro {
        max-width: 490px;
        margin: 0 auto;
    }
    & .section-title-wrap {
        margin-bottom: var(--sp40);
    }
    & .request__title {
        margin-bottom: var(--sp40);
        color: var(--text-invert);
    }

    & .request__intro p {
        max-width: 620px;
        color: var(--muted-invert);
    }

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

    & .request__form {
        display: flex;
        flex-direction: column;
        gap: var(--sp30);
        align-self: end;
        max-width: 680px;
        width: 100%;
        margin-left: auto;
    }

    & .request__row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--g20);
    }

    /* The global .field-input paints itself --dark-surface, and in the live
       vendor.css --dark-surface resolves to #0C0C0C — the same value as --ink,
       which is this box's own background. The four inputs were therefore
       invisible at every width: only the labels showed. Lifted here rather than
       in vendor.css, which is closed to section code (CLAUDE.md 5.2 / checklist).
       The mix lands on #161616, the value CLAUDE.md 2 documents for
       --dark-surface, so this is the intended colour rather than a new one. */
    & .field-input {
        background: color-mix(in srgb, var(--white) 4%, var(--ink));

        &:hover { background: color-mix(in srgb, var(--white) 7%, var(--ink)); }
    }

    & .request__submit { margin-top: var(--sp25); }

    & .request__note {
        font-size: var(--f18);        
        color: var(--muted-invert);
    }
}

/* =================================================================== responsive =================================================================== */
@media (max-width: 991.98px) {
    .request {
        & .request__box {
            grid-template-columns: 1fr;
            margin-inline: 0;
            
        }

        /* the intro is centred inside its column on the two-column layout; once
           stacked it has to sit on the box's own left edge like the form does */
        & .request__intro {
            max-width: none;
            margin-inline: 0;
        }

        & .request__form { margin-left: 0; max-width: none; }
    }
}

@media (max-width: 767.98px) {
    .request {
        /* --sp40 rather than --sp30 so the inner inset matches .agenda__cta, the
           other inset dark box on the page — they were 15px vs 20px at mobile */        
        & .request__form { gap: var(--sp30); }
    }
}

@media (max-width: 575.98px) {
    .request {
        & .request__box { padding: 30px 40px; }
        & .request__row { grid-template-columns: 1fr;             
        }
    }
}