/*---------------------impact collage--------------------------*/

.impact-collage {
    position: relative;
}

/* The blue is its own block below the collage rather than a band painted inside
   it, so it also backs the intro copy and the cards. */
.impact-collage .impact-body {
    position: relative;
    background: linear-gradient(180deg, #004EA8 0%, #0C2340 100%);
    padding-bottom: 90px;
}



/*---------------------collage--------------------------*/

/* The negative bottom margin lifts the blue block up to the design's fold, about
   two-thirds down the band, so the lower third of the prints sits on it. */
.impact-collage .collage {
    position: relative;
    z-index: 2;
    max-width: 1830px;
    margin: 0 auto -9%;
    padding: 0 20px;
}


/* The section's own top edge is this box, but the prints are scaled 1.5 about
   their centres, so the highest of them (slot 6, top 1.1%) reaches 3.94% of the
   collage width above it. Clearing that in the same units the arrangement is
   built from keeps the design's 80px between the intro copy and the first print
   at every viewport, rather than only at the width it was measured on.

   Nothing above this has a top border or padding, so the margin collapses out of
   .collage and .impact-collage and becomes the whole gap - which is why the
   section no longer carries a margin-top of its own. */
.impact-collage .collage-inner {
    position: relative;
    width: 100%;
    aspect-ratio: 1884 / 497;
    margin-top: calc(80px + 3.94%);
}

/* Each print's tilt lives in --rot rather than in the transform itself, so the
   reveal keyframes below can rebuild the same transform without hard-coding
   eleven separate sets of them. */
.impact-collage .collage-item {
    --rot: 0deg;
    position: absolute;
    box-sizing: border-box;
    line-height: 0;
    transform: rotate(var(--rot)) scale(1.5);
}

/* WOW.js reads animation-name off this class, keeps the item hidden until the
   band scrolls in, then applies the per-item data-wow-delay for the stagger. */
.impact-collage .collage-item.wow {
    animation-name: collage-print-in;
    animation-duration: 0.7s;
    animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
    animation-fill-mode: both;
}

/* The print starts lower, flatter and over-rotated, so it reads as being tossed
   onto the pile and settling into its final tilt. */
@keyframes collage-print-in {
    from {
        opacity: 0;
        transform: translateY(34px) rotate(calc(var(--rot) * 2.6)) scale(1.2);
    }

    to {
        opacity: 1;
        transform: translateY(0) rotate(var(--rot)) scale(1.5);
    }
}

@media (prefers-reduced-motion: reduce) {
    .impact-collage .collage-item.wow {
        animation-name: none;
    }
}

/* Each print keeps its own proportions — only the width and placement come from
   the design, so nothing is cropped. */
.impact-collage .collage-item img {
    width: 100%;
    height: auto;
    display: block;
}

.impact-collage .collage-item:nth-child(1) {
    left: 0.6%;
    top: 27.3%;
    width: 16.5%;
    --rot: -4deg;
    z-index: 2;
}

.impact-collage .collage-item:nth-child(2) {
    left: 13%;
    top: 52.6%;
    width: 10.5%;
    --rot: 5deg;
    z-index: 5;
}

.impact-collage .collage-item:nth-child(3) {
    left: 19%;
    top: 10.9%;
    width: 18.6%;
    --rot: -3deg;
    z-index: 1;
}

.impact-collage .collage-item:nth-child(4) {
    left: 24.3%;
    top: 54.4%;
    width: 11.2%;
    --rot: 3deg;
    z-index: 4;
}

.impact-collage .collage-item:nth-child(5) {
    left: 31.3%;
    top: 31.4%;
    width: 12.7%;
    --rot: -3deg;
    z-index: 2;
}

.impact-collage .collage-item:nth-child(6) {
    left: 42.7%;
    top: 1.1%;
    width: 17.2%;
    --rot: 2deg;
    z-index: 3;
}

.impact-collage .collage-item:nth-child(7) {
    left: 41.9%;
    top: 51.6%;
    width: 14%;
    --rot: -3deg;
    z-index: 4;
}

.impact-collage .collage-item:nth-child(8) {
    left: 63.9%;
    top: 9.6%;
    width: 14.2%;
    --rot: 2deg;
    z-index: 1;
}

.impact-collage .collage-item:nth-child(9) {
    left: 59.7%;
    top: 34.3%;
    width: 11.8%;
    --rot: -4deg;
    z-index: 5;
}

.impact-collage .collage-item:nth-child(10) {
    left: 68.5%;
    top: 38.6%;
    width: 14.2%;
    --rot: 3deg;
    z-index: 4;
}

/* The right-hand group shot spans from the top of the band down past the fold. */
.impact-collage .collage-item:nth-child(11) {
    left: 82.3%;
    top: 19.8%;
    width: 17.2%;
    --rot: -3deg;
    z-index: 3;
}

/* Native size of each print, divided by the 1.5 the transform above adds, so no
   photo is ever rasterised larger than the pixels it actually has. Without these
   the wider slots run past their source around a 1250px page - slot 3 (329px
   wide) was painting at 402px - and the band reads soft.

   The two .svg slots carry an embedded bitmap rather than vectors, so their
   ceiling is that bitmap (502px and 756px), not the 234px and 349px viewBox.

   These are the assets currently in the repeater. Swapping in larger exports is
   the other half of the fix: raise or drop the matching line when that happens,
   and the slot goes back to filling its share of the band. */
.impact-collage .collage-item:nth-child(1) { max-width: 246px; }   /* 369px */
.impact-collage .collage-item:nth-child(2) { max-width: 286px; }   /* 430px */
.impact-collage .collage-item:nth-child(3) { max-width: 219px; }   /* 329px */
.impact-collage .collage-item:nth-child(4) { max-width: 167px; }   /* 251px */
.impact-collage .collage-item:nth-child(5) { max-width: 163px; }   /* 245px */
.impact-collage .collage-item:nth-child(6) { max-width: 334px; }   /* 502px */
.impact-collage .collage-item:nth-child(7) { max-width: 504px; }   /* 756px */
.impact-collage .collage-item:nth-child(8) { max-width: 308px; }   /* 462px */
.impact-collage .collage-item:nth-child(9) { max-width: 299px; }   /* 449px */
.impact-collage .collage-item:nth-child(10) { max-width: 174px; }  /* 262px */
.impact-collage .collage-item:nth-child(11) { max-width: 519px; }  /* 779px */

.impact-collage .collage-item:nth-child(n + 12) {
    display: none;
}

/*---------------------intro--------------------------*/

/* The scaled prints hang about 20% of the collage width below the fold, so the
   copy clears them by tracking the same width rather than a fixed offset. */
.impact-collage .intro-block {
    text-align: center;
    max-width: 775px;
    margin: 0 auto 50px;
    padding-top: min(21vw, 245px);
}

.impact-collage .intro-block h2 {
    /* H2 token: 50/60. */
    font-family: 'UniversLTStd Cn' !important;
    font-weight: 700 !important;
    font-size: 50px !important;
    line-height: 60px !important;
    color: #fff;
    letter-spacing: 0;
    margin-bottom: 30px;
}

.impact-collage .intro-block p {
    /* <p> large token: 55 Roman, 18/28. The weight has to be stated - this copy
       otherwise inherits 300, which the 55 face has no cut for. */
    font-family: 'Univers LT Std Pro 55' !important;
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
    color: #fff;
    margin: 0;
}

/*---------------------cards--------------------------*/

.impact-collage .row-wrap {
    display: flex;
    justify-content: center;
    gap: 40px;
}

.impact-collage .col-three {
    flex: 1 1 0;
    background: #fff;
    border-radius: 15px;
    padding: 35px 30px;
    /* Light drop shadow full: 0 0 30, #7A95A4 at 30%. */
    box-shadow: 0 0 30px rgba(122, 149, 164, 0.3);
}

.impact-collage .col-three h4 {
    /* H4 token: 28/36. The pillar name is authored in caps. */
    font-family: 'UniversLTStd Cn' !important;
    font-weight: 700 !important;
    font-size: 28px !important;
    line-height: 36px !important;
    color: #0C2340;
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: 0;
}

.impact-collage .col-three .card-sub {
    /* 65 Bold, 16/24 - the strapline sits tight under the pillar name and
       carries the same weight as the nav labels, not the body copy. */
    font-family: 'Univers LT Std Pro 65' !important;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: #011728;
    margin-bottom: 20px;
}

.impact-collage .col-three ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.impact-collage .col-three ul li {
    position: relative;
    list-style: none;
    margin: 0 0 18px;
    padding-left: 44px;
    /* <p> token: 45 Light, 16/24. css/company/global.css sets `p, li` to the 55
       Roman face with !important, so the family has to be restated the same way
       for the 300 below to land on a real Light cut. */
    font-family: 'Univers LT Pro' !important;
    font-size: 16px;
    line-height: 24px;
    font-weight: 300;
    color: #31445C;
    background: none;
    background-image: url(/wp-content/themes/modeln/product/images/check-circle-green.svg);
    background-repeat: no-repeat;
    background-position: 0 3px;
    background-size: 24px 24px;
}

.impact-collage .col-three ul li:last-child {
    margin-bottom: 0;
}

/* Card copy reads as plain text in the design. A link pasted into an item keeps
   working but inherits the list styling, instead of picking up the theme's blue
   underlined anchor treatment and breaking rank with the other cards. */
.impact-collage .col-three ul li a {
    color: inherit;
    text-decoration: none;
}

@media (max-width: 1200px) {
    .impact-collage .intro-block h2 {
        font-size: 44px !important;
    }

    .impact-collage .col-three {
        padding: 32px 28px;
    }
}

@media (max-width: 991px) {
    .impact-collage .impact-body {
        padding-bottom: 70px;
    }

    .impact-collage .intro-block {
        margin-bottom: 40px;
    }

    .impact-collage .intro-block h2 {
        font-size: 34px !important;
    }

    .impact-collage .intro-block p {
        font-size: 18px;
    }

    .impact-collage .row-wrap {
        gap: 24px;
    }
}

@media (max-width: 767px) {
    .impact-collage .row-wrap {
        flex-wrap: wrap;
    }

    .impact-collage .col-three {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (max-width: 595px) {
    .impact-collage .impact-body {
        padding-bottom: 50px;
    }

    /* At this width the eleven-photo arrangement is too small to read, so the
       collage keeps its shape but reads as a textured band above the copy. */
    .impact-collage .collage {
        padding: 0;
    }

    .impact-collage .intro-block h2 {
        font-size: 24px !important;
        margin-bottom: 18px;
    }

    .impact-collage .intro-block p {
        font-size: 16px;
    }

    .impact-collage .col-three h4 {
        font-size: 22px !important;
        line-height: 30px !important;
    }

    .impact-collage .col-three .card-sub,
    .impact-collage .col-three ul li {
        font-size: 16px;
    }
}

/*---------------------impact collage end--------------------------*/