/* ==========================================================================
   HOME   body.page-index
   ==========================================================================
   Sections by id: #difference (the dark band), #testimonial. Site asset paths
   (files/content/home/*) live here, not in component files.
   ========================================================================== */

/* The dark band: the board's 80px above the copy and 55px under the closing
   rule, 84px under "A partner built for advisors…", 296px column dividers,
   balanced feature copy. The swirls are black SVG paths that read as darker
   navy; `.decor` supplies the clip and stacking. */
#difference {
    padding-block: clamp(48px, 3.333vw, 80px) clamp(36px, 2.292vw, 55px);
    .content-text:has(+ .feature-cols) { margin-bottom: clamp(2.5rem, 3.5vw, 5.25rem); }
    .content-text:has(+ .feature-cols) h2 { margin-bottom: 0; }
    .feature-cols { --fc-rule-h: min(12.333vw, 296px); }
    .feature-cols :is(h3, p) { text-wrap: balance; }

    &::before, &::after {
        content: "";
        position: absolute;
        z-index: 0;
        pointer-events: none;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        opacity: 1;
    }
    &::before {
        top: -22%; left: -20%;
        width: 46vw; height: 46vw; max-width: 720px; max-height: 720px;
        background-image: url("/files/content/home/swirl.svg");
    }
    &::after {
        top: -16%; right: -16%;
        width: 48vw; height: 48vw; max-width: 760px; max-height: 760px;
        background-image: url("/files/content/home/swirl-2.svg");
    }
}

/* Testimonial: a full-bleed split; the copy aligns to the container column */
#testimonial .testimonial {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    align-items: center;

    > *:first-child {
        padding-block: clamp(40px, 5vw, 72px);
        padding-left: max(var(--page-gutter), calc(50vw - var(--container-max) / 2 + var(--page-gutter)));
        padding-right: clamp(24px, 4vw, 60px);
    }
    > *:last-child { align-self: stretch; }

    figure { margin: 0; height: 100%; }
    img { display: block; width: 100%; height: 100%; min-height: 440px; object-fit: cover; }

    blockquote {
        margin: 0;
        p + p.cite { margin-top: 1.1rem; }
        & + p { margin: clamp(1.75rem, 3vw, 2.5rem) 0 0; }
    }
    a.btn { margin-bottom: 0; }
}
@media only screen and (max-width: 760px) {
    #testimonial .testimonial {
        grid-template-columns: 1fr;
        > *:first-child { padding-inline: var(--page-gutter); }
        img { min-height: 280px; }
    }
}

/* The composed user+plus icon (the Penpot group, not a Font Awesome name),
   drawn as a mask so it takes `color` like the fa-light icons */
.cs-icon {
    display: inline-block;
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask: var(--cs-icon) center / contain no-repeat;
            mask: var(--cs-icon) center / contain no-repeat;
}
.cs-icon--user-plus { --cs-icon: url("/files/content/home/icon-user-plus.svg"); }
.split-band > *:first-child .cs-icon {
    width: clamp(56px, 6.2vw, 89px);
    height: clamp(56px, 6.2vw, 89px);
    margin-top: 0.1rem;
}