.page-shell {
    width: min(100%, 1296px);
    margin-inline: auto;
    padding-inline:28px
}

.eyebrow {
    color: #bf2330;
    letter-spacing: .15em;
    text-transform: uppercase;
    margin: 0 0 16px;
    font-size: 11px;
    font-weight: 500;
    line-height:1.35
}

.eyebrow--light {
    color:#fff
}


.editorial-layout {
    grid-template-columns: minmax(330px, .36fr) minmax(0, .64fr);
    align-items: start;
    gap: clamp(42px, 4.5vw, 62px);
    padding-top: 54px;
    display:grid
}

.opening-layout {
    min-width:0
}

.introduction__lead {
    max-width:390px
}

.introduction__copy {
    max-width: 420px;
    margin-top:42px
}

.introduction__lead h1 {
    color: #413c3d;
    letter-spacing: -.035em;
    text-wrap: balance;
    max-width: 390px;
    margin: 0;
    font-size: clamp(42px, 4.2vw, 56.4px);
    font-weight: 600;
    line-height:1.06
}

.introduction h2, .introduction__copy h2, .section-heading h2, .cta h2 {
    color: #413c3d;
    letter-spacing: -.025em;
    text-wrap: balance;
    margin: 0;
    font-size: clamp(26px, 3vw, 34px);
    font-weight: 500;
    line-height:1.2
}

.introduction__copy h2 {
    max-width: 400px;
    margin-bottom: 26px;
    font-size:clamp(24px, 2.25vw, 30px)
}

.introduction__copy p:not(.eyebrow) {
    color: #5f5a5b;
    margin: 0 0 17px;
    font-size: 15px;
    line-height:1.72
}

.portfolio {
    min-width: 0;
    padding-top: clamp(96px, 8.5vw, 124px);
    padding-bottom:110px
}

.portfolio--intro {
    padding-bottom:0
}

.portfolio--wide {
    padding-top:72px
}

.portfolio--wide .gallery--shein {
    max-width: none;
    margin-inline:0
}

.portfolio > .project:first-child {
    margin-top:0
}

.section-heading {
    max-width: 820px;
    margin-bottom:28px
}

.section-heading h2 {
    margin-bottom:18px
}

.section-heading > p:last-child {
    color: #6a6566;
    max-width: 740px;
    margin: 0;
    font-size: 15.5px;
    line-height:1.7
}

.project {
    width: 100%;
    margin:72px 0 0
}

.project-header {
    border-top: 1px solid #dcd8d6;
    justify-content: space-between;
    align-items: flex-start;
    gap: 32px;
    min-height: 68px;
    padding-top: 15px;
    display:flex
}

.project-header h3 {
    color: #272324;
    letter-spacing: -.01em;
    text-transform: uppercase;
    max-width: 520px;
    margin: 0;
    font-size: 19px;
    font-weight: 500;
    line-height:1.3
}

.project-credits {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 12px 30px;
    display:flex
}

.project-credits p {
    gap: 2px;
    margin: 0;
    display:grid
}

.project-credits span {
    color: #bf2330;
    letter-spacing: .09em;
    text-transform: uppercase;
    font-size: 9px;
    font-weight: 500;
    line-height:1.3
}

.project-credits strong {
    color: #413c3d;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 500;
    line-height:1.4
}

.gallery {
    gap: 14px;
    display:grid
}

.gallery--portrait-three, .gallery--landscape-three, .gallery--freenow-clean, .gallery--oasa, .gallery--axe-mother, .gallery--dettol, .gallery--panadol, .gallery--shein {
    grid-template-columns:repeat(3, minmax(0, 1fr))
}

.gallery--portrait-two, .gallery--landscape-two {
    grid-template-columns:repeat(2, minmax(0, 1fr))
}

.gallery--portrait-four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap:14px
}

.gallery--freenow-campaign {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top:14px
}

.photo-frame {
    outline-offset: 4px;
    background: #f0eeee;
    display: block;
    position: relative;
    overflow:hidden
}

.photo-frame:focus-visible {
    outline:2px solid #bf2330
}

.photo-frame img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    transition: transform .6s cubic-bezier(.2, .7, .2, 1);
    display:block
}

.photo-frame:hover img {
    transform:scale(1.018)
}

.gallery--portrait-three .photo-frame, .gallery--portrait-two .photo-frame {
    aspect-ratio:.707
}

.gallery--oasa .photo-frame {
    aspect-ratio:.65
}

.gallery--axe-mother .photo-frame {
    aspect-ratio:.8
}

.gallery--portrait-four .photo-frame {
    aspect-ratio:.65
}

.gallery--djokovic .photo-frame {
    aspect-ratio:.74
}

.gallery--landscape-three .photo-frame, .gallery--freenow-clean .photo-frame, .gallery--dettol .photo-frame, .gallery--shein .photo-frame {
    aspect-ratio:1.5
}

.gallery--shein {
    max-width: 900px;
    margin-inline:auto
}

.gallery--landscape-two .photo-frame {
    aspect-ratio:1.5
}

.gallery--panadol .photo-frame {
    aspect-ratio:1.57
}

.gallery--freenow-campaign .photo-frame {
    aspect-ratio:1.72
}

.gallery--sweetzone {
    grid-template-columns: 1.25fr .75fr .75fr;
    grid-template-areas: "main group group""main one two";
    align-items: stretch;
    width: 100%;
    max-width: 840px;
    margin-inline:auto
}

.sweetzone-main {
    grid-area:main
}

.sweetzone-group {
    grid-area:group
}

.sweetzone-one {
    grid-area:one
}

.sweetzone-two {
    grid-area:two
}

.gallery--sweetzone .photo-frame {
    min-height:0
}

.sweetzone-group {
    aspect-ratio:16/9
}

.closing-projects {
    grid-template-columns: minmax(0, .76fr) minmax(0, 1.24fr);
    align-items: start;
    gap: 36px;
    width: 100%;
    margin-inline: auto;
    display:grid
}

.closing-projects .project {
    width:100%
}

.project--single-landscape {
    margin-top:220px
}

.project--euroleague .project-header {
    display:block
}

.project--euroleague .project-header h3 {
    margin-bottom:12px
}

.project--euroleague .project-credits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: start;
    gap: 12px 24px;
    display:grid
}

.alpha-frame {
    aspect-ratio: .653;
    width: min(100%, 560px);
    margin-inline:auto
}

.enerwave-frame {
    aspect-ratio: 16/9;
    width:100%
}

.cta {
    color: #fff;
    background:#413c3d
}

.cta__inner {
    justify-content: space-between;
    align-items: center;
    gap: 64px;
    min-height: 310px;
    padding-top: 66px;
    padding-bottom: 66px;
    display:flex
}

.cta__inner > div {
    max-width:780px
}

.cta h2 {
    color: #fff;
    margin-bottom:18px
}

.cta p:not(.eyebrow) {
    color: #ffffffc4;
    max-width: 700px;
    margin: 0;
    font-size: 15.5px;
    line-height:1.75
}

.cta__link {
    color: #fff;
    letter-spacing: .11em;
    text-transform: uppercase;
    background: #bf2330;
    justify-content: center;
    align-items: center;
    min-width: 148px;
    min-height: 48px;
    padding: 13px 24px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.3;
    transition: background .18s, transform .18s;
    display:inline-flex
}

.cta__link:hover, .cta__link:focus-visible {
    background: #a91d29;
    transform:translateY(-2px)
}

@media (width<=1090px) {
    .editorial-layout {
        grid-template-columns: minmax(270px, .42fr) minmax(0, .58fr);
        gap:34px
    }

    .project-header {
        padding-bottom: 17px;
        display:block
    }

    .project-header h3 {
        margin-bottom:12px
    }

    .project-credits {
        justify-content:flex-start
    }

    .closing-projects {
        grid-template-columns: .8fr 1.2fr;
        gap:36px
    }
}

@media (width<=760px) {
    .page-shell, .site-header__inner, .site-footer__inner {
        padding-left: 20px;
        padding-right:20px
    }

    html {
        scroll-padding-top:82px
    }

    .editorial-layout {
        padding-top: 42px;
        display:block
    }

    .opening-layout {
        display:block
    }

    .introduction__lead, .introduction__copy {
        max-width:620px
    }

    .introduction__lead h1 {
        max-width: 560px;
        font-size:clamp(31px, 9vw, 38px)
    }

    .introduction__copy {
        margin-top:40px
    }

    .introduction__copy p:not(.eyebrow) {
        font-size: 15px;
        line-height:1.7
    }

    .portfolio {
        padding-top: 46px;
        padding-bottom:86px
    }

    .portfolio--intro {
        padding-bottom:0
    }

    .portfolio--wide {
        padding-top:62px
    }

    .project {
        margin-top:62px
    }

    .gallery--portrait-three, .gallery--portrait-two, .gallery--landscape-three, .gallery--landscape-two, .gallery--freenow-clean, .gallery--oasa, .gallery--axe-mother, .gallery--dettol, .gallery--panadol, .gallery--shein, .gallery--freenow-campaign {
        grid-template-columns:1fr
    }

    .gallery--portrait-four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap:10px
    }

    .gallery--sweetzone {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "group group""main one""main two";
        gap:10px
    }

    .closing-projects {
        grid-template-columns: 1fr;
        gap:0
    }

    .project--single-landscape {
        margin-top:62px
    }

    .alpha-frame {
        width:min(88%, 500px)
    }

    .cta__inner {
        min-height: auto;
        padding-top: 55px;
        padding-bottom: 58px;
        display:block
    }

    .cta__link {
        margin-top:30px
    }
}

@media (width<=430px) {
    .gallery--portrait-four {
        grid-template-columns:1fr
    }

    .gallery--sweetzone {
        grid-template-columns: 1fr;
        grid-template-areas: "group""main""one""two"
    }

    .gallery--sweetzone .photo-frame {
        aspect-ratio:auto
    }

    .gallery--sweetzone .photo-frame img {
        height:auto
    }
}

.project-header {
  float: none;
  clear: none;
  width: auto;
  position: static;
}