/* =================================================================== OUTCOMES section css =================================================================== */
.outcomes {
    position: relative;
    background: var(--cream);
    overflow: clip;
    padding-block: calc(var(--sectionGap) + var(--stair2)) var(--sectionGap);
    
    

    /* the last 105px step of the one-reason panel, which bleeds past the top
       of this band (measured x1347->1920, y4420->4525) */
    & .outcomes__step {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 0;
        width: 29.8%;
        height: var(--notch-lg);
        background: var(--surface-raised);
        pointer-events: none;
    }

    /* the ASCII control tower that replaced the stepped white panel.
       Measured box on Website.pdf: x150->635, y4862->5930 — it runs past the
       flat bottom of the band and is cut off by the stair below it. */
    /* Same clamp as the reasons chevron: 30% + 70% lands on the column's right
       edge at every width, so the tower cannot reach into the body copy. It was
       12px into it at 1366 and 70px at 1200. Inert above ~1430. */
    & .outcomes__art-wrap {
        bottom: calc(var(--sectionGap) * -1);
        left: 30%;
        width: min(500px, 55%);
        /* `img, svg` because ascii-scramble.js swaps the <img> for a live
           inline <svg> (CLAUDE.md §8.0.5) — the rule is about the artwork,
           not the element type. The script maps this object-fit onto the
           <svg>'s preserveAspectRatio, since object-fit does not apply to
           inline SVG. */
        img, svg {
            height: 100%;
            /* object-fit: cover; */
        }
    }
    & .outcomes__art-col {
        position: relative;
    }

    /* The art is a 750px-tall drawing anchored to the band's bottom edge, so as
       the section gets shorter its top climbs into the title — measured grazing
       the h2's line box by 15px at 1100. The copy is raised one layer instead of
       the art being re-anchored, which holds at every width. */
    & .outcomes__head,
    & .outcomes__body {
        position: relative;
        z-index: 1;
    }
    & .container {
        position: relative;
        z-index: 1;
    }

    /* Website.pdf indents the whole title block: the h2 starts at x668 in the
       100->1820 measure, 33% in. The wrapper carries the offset so the
       .section-title-wrap component itself stays untouched (CLAUDE.md 3.1). */
    & .outcomes__head {
    text-align: center;
        & .section-title-wrap{             
             align-items: center;
             @media (max-width: 991.98px) {
                align-items: flex-start;
             }
        }
}

    /* measured, 100->1820 measure:
         left column  100 ->  870   (770)
         gutter                     (100)
         body column  970 -> 1525   (555)
       295px of the measure is unused on the right, hence the 82.8% cap. */
    & .outcomes__grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--g100);
        margin-top: var(--sp100);
    }

    & .outcomes__body {grid-column: 2;max-width: 600px;}

    & .outcomes__item + .outcomes__item {margin-top: var(--sp60);}

    & .outcomes__title { margin-bottom: var(--sp20); }

    & .outcomes__actions {margin-top: var(--sp80);}

    & .outcomes__note {
        margin-top: var(--sp20);
        font-size: var(--f18);
    }
}

/* =================================================================== responsive =================================================================== */
/* No 1365.98 query any more. It carried `margin-left: 25%` on .outcomes__head,
   which pushed the CENTRED title block off the measure — the artboard indents a
   left-aligned title and this build centres it, so the indent was working
   against itself. The only other declaration in it was `max-width: 100%` on
   .outcomes__grid, which the grid already resolves to as a block child of
   .container. Verified identical at 1366 and 1300 with the query gone.
   Empty queries are not written (CLAUDE.md 7.2). */

@media (max-width: 991.98px) {
    .outcomes {
        & .outcomes__art-wrap {            
            right: 15%;
            left: auto;           
        }
    }
}
@media (max-width: 767.98px) {
    .outcomes {
        & .outcomes__grid { grid-template-columns: 1fr; }
        & .outcomes__body { grid-column: 1; }

        /* Hiding only the <img> left the 500px absolute wrapper and, more to the
           point, an empty first grid row — so the section opened with ~140px of
           dead space under the title. The whole column goes. */
        & .outcomes__art-col { display: none; }
    }
}