/* ==========================================================================
   CASE STUDY LAYOUT
   ========================================================================== */

body{

    background:#050505;
    color:#fff;

}


/* ==========================================================================
   HEADER
   ========================================================================== */

.case-header{

    width:min(1800px,92vw);

    margin:0 auto;

    padding:2rem 0 1.5rem;

    display:flex;

    justify-content:center;

}


.case-header__home{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-decoration:none;

    color:inherit;

    cursor:pointer;

    transition:opacity .35s ease;

}

.case-header__home:hover{

    opacity:.75;

}

.case-header__home h1{

    margin:0;

    font-size:clamp(1.8rem,3vw,3rem);

    font-family:"Archivo",sans-serif;

    font-optical-sizing:auto;

    font-weight:800;

    font-style:normal;

    font-variation-settings:
        "wdth" 62.5;

    text-transform:uppercase;

    letter-spacing:.01em;

    line-height:.9;

    color:#fff;

}


.case-header__home p{

    margin:.8rem 0 0;

    font-size:.9rem;

    font-weight:500;

    text-transform:uppercase;

    letter-spacing:.18em;

    color:rgba(255,255,255,.88);

    font-variation-settings:
        "wdth" 62.5;

}


/* ==========================================================================
   HERO
   ========================================================================== */

.case-hero{

    position:relative;

    width:100%;

    overflow:hidden;

}


.case-hero__images{

    position:relative;

}


.case-hero img{

    display:block;

    width:100%;

    height:auto;

}


.hero-front{

    position:absolute;

    inset:0;

    opacity:0;

    transition:opacity 3.6s linear;

}

.hero-front.is-visible{

    opacity:1;

}


.case-hero__content{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

}

.case-hero h2{

    display:none;

}


.case-hero__strapline{

    --strapline-offset:0px;

    max-width:36rem;

    margin:0 auto;

    text-align:center;

    font-size:1.8rem;

    line-height:1.5;

    font-weight:350;

    font-variation-settings:
        "wght" 350,
        "wdth" 87.5;

    opacity:0;

    transform:translateY(calc(36px + var(--strapline-offset)));

    transition:
        opacity 1.8s ease,
        transform 2.2s cubic-bezier(.16,1,.3,1);

}

.case-hero.is-visible .case-hero__strapline{

    opacity:1;

    transform:translateY(var(--strapline-offset));

}

.reveal-page .case-hero__strapline{

    --strapline-offset:60px;

}

/* ==========================================================================
   ACTIVATE PAGE HERO
   ========================================================================== */

.activate-page .case-hero{

    height:min(72vw,56rem);

    background:#050505;

}

.activate-page .case-hero__images{

    height:115%;

    position:relative;

    overflow:hidden;

}

.activate-page .activate-hero-image{

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center 42%;

    filter:brightness(.52);

    transform:translate3d(0,0,0) scale(1.04);

    will-change:transform;

}

.activate-page .case-hero::after{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.30),
            rgba(0,0,0,.08) 52%,
            rgba(0,0,0,.22)
        );

    pointer-events:none;

}

.activate-page .case-hero__content{

    z-index:2;

}

.activate-page .case-hero__strapline{

    max-width:42rem;

    font-weight:500;

    font-variation-settings:
        "wght" 500,
        "wdth" 75;

}

/* ======================================================
   CONTEXT
====================================================== */

.case-context{

    padding:5rem 0;

}

.case-context__inner{

    width:min(1100px,82vw);
    margin:0 auto;

    display:flex;
    align-items:center;
    gap:2.5rem;

    padding:2.5rem 3rem;

    border:1px solid rgba(255,255,255,.18);
    background:rgba(255,255,255,.025);

}

.case-context__portrait{

    width:128px;
    height:128px;

    object-fit:cover;
    object-position:center 10%;

    border-radius:3px;

    flex-shrink:0;

}

.case-context__copy{

    flex:1;

}

.case-context__copy p{

    font-size:1rem;
    line-height:1.8;
    color:rgba(255,255,255,.78);

}

.case-context__copy p + p{

    margin-top:1.2rem;

}

/* ==========================================================================
   INTRO VIDEO
   ========================================================================== */

.intro-video{

    position:relative;

}


.intro-video video{

    display:block;

    width:100%;

    height:auto;

}


.intro-video__content{

    position:absolute;

    inset:0;

}


/* ==========================================================================
   MAIN CONTENT
   ========================================================================== */

.case-study{

    width:min(1800px,92vw);

    margin:5rem auto 8rem;

}

/* ==========================================================================
   EDITORIAL
   ========================================================================== */

.case-editorial{

    display:flex;

    flex-direction:column;

    gap:1.0rem;

}

/* ==========================================================================
   EDITORIAL ROWS
   ========================================================================== */

.editorial-row{

    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:1.0rem;

    align-items:stretch;

    margin-bottom:1.5rem;

}


.editorial-media{

    margin:0;

}

.editorial-media--square{

    aspect-ratio:1 / 1;
    overflow:hidden;

}

.editorial-media--square img{

    width:100%;
    height:100%;
    object-fit:cover;

}

.editorial-media img,
.editorial-media video{

    display:block;

    width:100%;

    height:100%;

    object-fit:cover;

}

.editorial-row--media .editorial-media{

    aspect-ratio:1152 / 752;

    overflow:hidden;

}

.editorial-row--media video{

    object-position:center;

}

.editorial-copy{

    display:flex;

    align-items:center;

    padding:2rem 5vw;

}


.editorial-copy > div{

    width:100%;

    max-width:42rem;

}



.editorial-copy p:last-child{

    margin-bottom:0;

}

.editorial-row--post-campaign{
    margin-top:2rem;
}


/* ==========================================================
   CALLOUT
========================================================== */

.case-callout{

    position:relative;

    height:clamp(24rem,37vw,34rem);

    overflow:hidden;

}

.callout-media{

    position:absolute;

    inset:0;

    display:block;

}

.callout-media img{

    display:block;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center 38%;

}

.callout-media::after{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.28) 0%,
            rgba(0,0,0,.08) 48%,
            rgba(0,0,0,.18) 100%
        );

}

.callout-overlay{

    position:absolute;

    inset:0;

    z-index:2;

    display:flex;
    flex-direction:column;
    justify-content:space-between;

    box-sizing:border-box;

    padding:2rem 3vw;

}

.callout-copy{

    width:min(34rem,45%);

}

.callout-copy--bottom{

    align-self:flex-end;

    text-align:right;

}

/* ==========================================================================
   END IMAGE
   ========================================================================== */

.case-ending{

    position:relative;
    margin-top:4vw;

}


.case-ending img{

    display:block;

    width:100%;

    height:auto;

}


.ending-panel{

    width:min(46rem,44vw);

    min-width:32rem;

    margin-left:auto;

    padding:5rem 8vw 5rem 5rem;

    background:rgba(0,0,0,.52);

    backdrop-filter:blur(12px);

    opacity:0;

    transform:translateX(70%);

    transition:
        transform 2.2s cubic-bezier(.25,.9,.3,1),
        opacity 1s ease;

}

.case-ending.is-visible .ending-panel{

    opacity:1;

    transform:translateX(0);

}

.case-ending__content{

    display:flex;

    align-items:center;

    justify-content:flex-end;

    position:absolute;

    inset:0;

}

.campaign-transition a{

    color:#fff;
    text-decoration:none;
    transition:opacity .25s ease;

}

.campaign-transition a:hover{

    opacity:.7;

}

.campaign-transition a::after{

    content:" →";
    opacity:0;
    transition:opacity .25s ease, transform .25s ease;
    transform:translateX(-4px);

}

.campaign-transition a:hover::after{

    opacity:1;
    transform:translateX(0);

}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.case-footer{

    width:min(1800px,92vw);

    margin:6rem auto;

    display:flex;

    justify-content:space-between;

}


.case-footer a{

    color:#fff;

    text-decoration:none;

}

/* ==========================================================================
   INTRO
   ========================================================================== */

.case-intro{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:6rem;

    align-items:center;

    margin-bottom:10rem;

}

.case-intro .case-copy{

    max-width:54rem;

}

.case-intro .case-image{

    margin:0;

}

.case-intro img{

    display:block;

    width:100%;

    height:auto;

}

/* ==========================================================================
   INTRO VIDEO PANEL
   ========================================================================== */

.intro-video{

    position:relative;

    width:100%;

    overflow:hidden;

}

.intro-video video{

    display:block;

    width:100%;

    height:auto;

    position:relative;

}

.intro-video__content{

    position:absolute;

    inset:0;

    display:flex;

    align-items:center;

}

.intro-panel{

    width:min(46rem,44vw);

    min-width:32rem;

    padding:5rem 5rem 5rem 8vw;

    background:rgba(0,0,0,.52);

    backdrop-filter:blur(12px);

    opacity:.25;

    transform:translateX(-70%);

    transition:
        transform 2.2s cubic-bezier(.25,.9,.3,1),
        opacity 1s ease;

}

.callout-copy h2{
    font-family:var(--font-display);
    font-weight:700;
    line-height:1.05;
    letter-spacing:-0.02em;
}

.callout-copy p{
    font-family:var(--font-body);
    font-weight:400;
    line-height:1.4;
}

.intro-panel h2,
.editorial-copy h2,
.callout-copy h2,
.ending-panel h2{

    font-family:"Archivo",sans-serif;
    font-optical-sizing:auto;
    font-style:normal;

    font-size:clamp(2.3rem,2.8vw,3.2rem);

    line-height:1.02;

    margin:0 0 2.4rem;

    font-variation-settings:
        "wght" 600,
        "wdth" 62.5;

    color:#fff;

}

.intro-panel p,
.editorial-copy p,
.callout-copy p,
.ending-panel p{

    font-size:1.35rem;

    font-weight:350;

    line-height:1.5;

    margin:0 0 2rem;

    color:rgba(255,255,255,.92);

    font-variation-settings:
        "wght" 350,
        "wdth" 85;

}

.intro-panel p:last-child{

    margin-bottom:0;

}

.intro-panel h2,
.intro-panel p,
.ending-panel h2,
.ending-panel p{

    max-width:34rem;

}

.intro-video.is-visible .intro-panel{

    opacity:1;

    transform:translateX(0);

}

/* ==========================================================================
   CASE FILM
   ========================================================================== */

.case-film{

    position:relative;

    width:100%;

    overflow:hidden;

    background:#061052;

    margin-bottom:1.5rem;

}


.case-film__video{

    display:block;

    width:100%;
    height:auto;

}


.case-film__overlay{

    position:absolute;

    inset:0;

    display:flex;

    align-items:center;

    padding:5rem 8vw;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.78) 0%,
            rgba(0,0,0,.58) 42%,
            rgba(0,0,0,.08) 78%
        );

    opacity:1;

    transition:opacity .65s ease;

}


.case-film.is-playing .case-film__overlay{

    opacity:0;

    pointer-events:none;

}


.case-film__copy{

    width:min(38rem,48%);

}


.case-film__copy h2{

    margin:0 0 1.5rem;

    font-family:"Archivo",sans-serif;

    font-size:clamp(2.3rem,2.8vw,3.2rem);

    line-height:1.02;

    color:#fff;

    font-variation-settings:
        "wght" 600,
        "wdth" 62.5;

}


.case-film__copy p{

    margin:0 0 1.25rem;

    font-size:1.35rem;
    line-height:1.5;

    color:rgba(255,255,255,.88);

    font-variation-settings:
        "wght" 350,
        "wdth" 85;

}


.case-film__play{

    display:inline-flex;

    align-items:center;
    gap:.8rem;

    margin-top:.75rem;

    padding:.85rem 1.25rem;

    border:1px solid rgba(255,255,255,.55);
    border-radius:999px;

    background:rgba(0,0,0,.22);

    color:#fff;

    font:inherit;
    font-weight:500;

    cursor:pointer;

    transition:
        background .3s ease,
        border-color .3s ease;

}


.case-film__play:hover{

    background:rgba(255,255,255,.12);
    border-color:#fff;

}


.case-film__play-icon{

    width:0;
    height:0;

    border-top:.38rem solid transparent;
    border-bottom:.38rem solid transparent;
    border-left:.58rem solid currentColor;

}

/* ==========================================================================
   BRAND APPLICATION CAROUSEL
   ========================================================================== */

.brand-carousel{

    --carousel-height:420px;
    --carousel-gap:2rem;

    width:100%;

    padding:1.5rem 0;

    overflow:hidden;

    background:#000;

}


.brand-carousel__row{

    width:100%;

    overflow:hidden;

}


.brand-carousel__row + .brand-carousel__row{

    margin-top:var(--carousel-gap);

}


.brand-carousel__track{

    display:flex;

    width:max-content;

    gap:var(--carousel-gap);

}


.brand-carousel__set{

    display:flex;

    align-items:center;

    gap:var(--carousel-gap);

    flex-shrink:0;

}


.brand-carousel__set img{

    display:block;

    width:auto;
    height:var(--carousel-height);

    max-width:none;

    object-fit:contain;

    flex-shrink:0;

}


/* R2-02 sits in front of R2-01 and R2-03 */

.brand-carousel__overlap{

    position:relative;

    z-index:2;

    margin-left:-3rem;
    margin-right:-3rem;

}

/* ==========================================================================
   BRAND CAROUSEL MOTION
   ========================================================================== */

.brand-carousel__row--left .brand-carousel__track{

    animation:brand-carousel-left 60s linear infinite;

}

.brand-carousel__row--right .brand-carousel__track{

    animation:brand-carousel-right 55s linear infinite;

}


/* Pause on hover */

/* .brand-carousel__row:hover .brand-carousel__track{

    animation-play-state:paused;

} */


@keyframes brand-carousel-left{

    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(calc(-50% - (var(--carousel-gap) / 2)));
    }

}


@keyframes brand-carousel-right{

    from{
        transform:translateX(calc(-50% - (var(--carousel-gap) / 2)));
    }

    to{
        transform:translateX(0);
    }

}


/* Respect reduced-motion preferences */

@media (prefers-reduced-motion:reduce){

    .brand-carousel__track{

        animation:none !important;
        transform:none !important;

    }

}

/* ==========================================================================
   CAMPAIGN SPOTLIGHT
   ========================================================================== */

.campaign-spotlight{

    margin-top:4rem;

    background:#001535;

}


.campaign-spotlight__hero{

    position:relative;

    min-height:42rem;

    overflow:hidden;

}


.campaign-spotlight__hero img{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

}


.campaign-spotlight__hero::after{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.82) 0%,
            rgba(0,0,0,.55) 45%,
            rgba(0,0,0,.18) 75%
        );

}


.campaign-spotlight__overlay{

    position:relative;

    z-index:2;

    width:min(42rem,46%);

    padding:7rem 0 7rem 7vw;

}


.campaign-spotlight__label{

    display:inline-block;

    width:auto;

    margin:0 0 1.5rem;

    padding:.35rem .45rem;

    background:#fff;

    color:#000 !important;

    border:none;

    font-family:"Archivo", sans-serif;
    font-variation-settings:"wdth" 62.5, "wght" 750;

    font-size:.95rem;

    letter-spacing:.06em;

    text-transform:uppercase;

    line-height:.95;

}


.campaign-spotlight__overlay h2{

margin:0 0 1.5rem;

    font-family:"Archivo",sans-serif;

    font-size:clamp(2.3rem,2.8vw,3.2rem);

    line-height:1.02;

    color:#fff;

    font-variation-settings:
        "wght" 600,
        "wdth" 62.5;

}


.campaign-spotlight__overlay p:not(.campaign-spotlight__label){

    margin:0 0 1.2rem;

    font-size:1.2rem;
    line-height:1.55;

    color:rgba(255,255,255,.86);

        font-variation-settings:
        "wght" 350,
        "wdth" 85;

}


.campaign-spotlight__content{

    padding:7rem 7vw;

}

/* ==========================================================================
   CAMPAIGN SPOTLIGHT — SOCIAL STORY
   ========================================================================== */

.campaign-spotlight__story{

    display:grid;

    grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr);

    gap:5rem;

    align-items:center;

    margin-top:-20rem;
position:relative;
z-index:3;

}


.campaign-spotlight__phone{

    display:flex;

    justify-content:center;

}


.phone-video{

    position:relative;

    width:min(430px, 100%);

}


.phone-video__screen{

    position:absolute;

    top:1.7%;
    left:1.7%;

    width:95%;
    height:95%;

    object-fit:contain;

    background:#0a0e11;

    border-radius:2rem;

    z-index:1;

}


.phone-video__frame{

    position:relative;

    z-index:2;

    display:block;

    width:100%;
    height:auto;

    pointer-events:none;

}


.campaign-spotlight__story-copy{

    max-width:38rem;

        align-self:center;
    transform:translate(1.3rem, 8rem);
    padding-left:2rem;

}


.campaign-spotlight__story-copy p{

    margin:0 0 1.5rem;

    font-size:1.2rem;
    line-height:1.6;

    color:rgba(255,255,255,.86);

        font-variation-settings:
        "wght" 350,
        "wdth" 85;

}

.campaign-spotlight__story-copy h2{

    margin:0 0 1.5rem;

    font-family:"Archivo", sans-serif;
    font-variation-settings:"wdth" 62.5, "wght" 600;

    font-size:clamp(2rem,2.8vw,3rem);

    line-height:1.05;

}

/* ==========================================================================
   CAMPAIGN SPOTLIGHT — JOURNEY
   ========================================================================== */

.campaign-spotlight__journey{

    display:grid;
    grid-template-columns: 1fr 1fr;

    gap:2rem;

    align-items:center;

    margin-top:3rem;

}


.campaign-spotlight__journey-intro{

    max-width:38rem;

}


.campaign-spotlight__journey-intro h2{

    margin:0 0 1.5rem;

    font-family:"Archivo", sans-serif;
    font-variation-settings:"wdth" 62.5, "wght" 600;

    font-size:clamp(2rem,2.8vw,3rem);
    line-height:1.05;

}


.campaign-spotlight__journey-intro p,
.campaign-spotlight__journey-caption{

    margin:0 0 1.5rem;

    font-family:"Archivo", sans-serif;
    font-variation-settings:"wdth" 85, "wght" 350;

    font-size:1.2rem;
    line-height:1.65;

    color:rgba(255,255,255,.82);

}


.campaign-spotlight__journey-caption strong{

    font-variation-settings:"wdth" 85, "wght" 600;

    color:#fff;

}


.campaign-spotlight__journey-media{

    display:flex;
    flex-direction:column;

    width:100%;

    gap:3rem;

}


.campaign-spotlight__journey-item{

    margin:0;

}


.campaign-spotlight__journey-item img{

    display:block;

    width:100%;
    height:auto;

}


.campaign-spotlight__journey-item figcaption{

    margin-top:1rem;

}

/* ==========================================================================
   CAMPAIGN SPOTLIGHT — ROLLOUT
   ========================================================================== */

.campaign-spotlight__rollout{

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:2rem;

    margin-top:2rem;

}

.campaign-spotlight__rollout-feature{

    position:relative;

}

.campaign-spotlight__rollout-feature img{

    display:block;
    width:100%;

}

.campaign-spotlight__rollout-overlay{

    position:absolute;

    inset:0;

    display:flex;
    flex-direction:column;
    justify-content:flex-end;

    padding:3rem;

}

.campaign-spotlight__rollout-feature::before{

    content:"";

    position:absolute;
    inset:0;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.82),
        rgba(0,0,0,.45),
        rgba(0,0,0,.15)
    );

    pointer-events:none;

}

.campaign-spotlight__rollout-media{

    display:flex;
    flex-direction:column;

    gap:2rem;

}


.campaign-spotlight__rollout-media img{

    display:block;

    width:100%;
    height:auto;

}


.campaign-spotlight__rollout-copy{

    max-width:38rem;

}


.campaign-spotlight__rollout-overlay h2{

    margin:0 0 1.5rem;

    font-family:"Archivo", sans-serif;
    font-variation-settings:"wdth" 62.5, "wght" 600;

    font-size:clamp(2rem,2.8vw,3rem);
    line-height:1.05;

}


.campaign-spotlight__rollout-overlay p{

    margin:0 0 1.5rem;

    font-family:"Archivo", sans-serif;
    font-variation-settings:"wdth" 85, "wght" 350;

    font-size:1.2rem;
    line-height:1.65;

    color:rgba(255,255,255,.82);

}

/* ==========================================================================
   CAMPAIGN SPOTLIGHT — COLLAPSED / EXPANDED
   ========================================================================== */

.campaign-spotlight__expandable{

    display:grid;
    grid-template-rows:0fr;

    overflow:hidden;

    transition:grid-template-rows .7s ease;

}


.campaign-spotlight__content{

    min-height:0;
    overflow:hidden;

    padding-top:0;
    padding-bottom:0;

    transition:
    max-height .8s ease,
        padding-top .7s ease,
        padding-bottom .7s ease;

}



.campaign-spotlight.is-open .campaign-spotlight__content{

    padding-top:7rem;
    padding-bottom:7rem;
    overflow:visible;
}

.campaign-spotlight.is-open .campaign-spotlight__expandable{

    grid-template-rows:1fr;
    overflow:visible;

}


/* HERO TEASER */

.campaign-spotlight__hero{

    min-height:0;
    height:31.5rem;

    transition:height .7s ease;

}


.campaign-spotlight.is-open .campaign-spotlight__hero{

    height:42rem;

}

.campaign-spotlight__toggle{

    display:inline-flex;
    align-items:center;

    margin-top:1.5rem;
    padding:.7rem 1rem;

    border:1px solid rgba(255,255,255,.45);

    background:rgba(0,0,0,.18);
    color:#fff;

    font-family:"Archivo", sans-serif;
    font-variation-settings:"wdth" 85, "wght" 600;

    font-size:.9rem;
    line-height:1;

    cursor:pointer;
}


/* ==========================================================================
   MOBILE VIEW
   ========================================================================== */

@media (max-width:1100px){

.case-hero{

    height:calc(100svh - 7rem);
    min-height:38rem;
    max-height:50rem;

}

    .reveal-page .case-hero::after{

    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:5rem;

    background:linear-gradient(
        to bottom,
        rgba(0,0,0,0),
        rgba(0,0,0,1)
    );

    pointer-events:none;

    z-index:2;

}

    .case-hero__images{

    height:100%;

    }

  .case-hero img{

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;

    transform:scale(1.2);
    transform-origin:center;

}

    .case-hero__strapline{

        max-width:18rem;

        font-size:1.2rem;

        line-height:1.35;

    }

    .reveal-page .case-hero__strapline{

        --strapline-offset:-0px;

    }

.intro-video{

    height:min(150vw,38rem);

}

.intro-video video{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;

    transform:scale(1.15);
    transform-origin:center;

}

.intro-video__content{

    align-items:flex-end;

}


.intro-panel{

    width:100%;
    min-width:0;

    padding:2.25rem 5vw 2.5rem;

    background:rgba(0,0,0,.68);

    backdrop-filter:none;

    opacity:0;

    transform:translate3d(0,35px,0);

    transition:
    transform 1.6s cubic-bezier(.22,.61,.36,1) .15s,
    opacity .8s ease .15s;

    will-change:transform,opacity;

}

.intro-video.is-visible .intro-panel{

    opacity:1;
    transform:translate3d(0,0,0);

}

.intro-panel h2{

    max-width:22rem;

    margin-bottom:1.25rem;

    font-size:1.75rem;
    line-height:1.05;

}

.intro-panel p{

    max-width:34rem;

    margin-bottom:1.25rem;

    font-size:1.05rem;
    line-height:1.45;

}

    .case-study{

        width:min(92vw,48rem);

        margin:5rem auto;

    }


    .case-editorial{

        gap:1.5rem;

    }


    .editorial-row{

        grid-template-columns:1fr;

    }


    .editorial-copy{

        order:1;

        padding:3rem 0;

    }

.editorial-copy h2,
.ending-panel h2{
    font-size:1.75rem;
}

.callout-copy h2{
    font-size:1.75rem;
}

.editorial-copy p,
.ending-panel p{
    font-size:1.05rem;
    line-height:1.6;
}

.callout-copy p{
    font-size:1.05rem;
}


    .editorial-media{

        order:2;

    }


.activate-page .image-first .editorial-media{

    order:1;

}

.activate-page .image-first .editorial-copy{

    order:2;
    padding:2.5rem 5vw 3rem;

}

.framed-row .editorial-copy{

    padding:2.5rem 5vw 3rem;

}

.activate-page .framed-row{

    border:1px solid rgba(255,255,255,.14);

}

.case-callout{

    height:auto;

    aspect-ratio:3 / 4;

}

.callout-media img{

    object-position:center;

}

.callout-media::after{

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.18) 0%,
            rgba(0,0,0,.06) 42%,
            rgba(0,0,0,.34) 100%
        );

}

.callout-overlay{

    padding:2rem 5vw 1rem;

}

.callout-copy{

    width:min(24rem,75%);

}

.callout-copy--top p{

    margin-top:11rem;

}

.callout-copy--bottom{

    position:absolute;

    right:5vw;
    bottom:1.0rem;

    width:min(22rem,68%);

    text-align:right;

}

.callout-copy--bottom p{

    margin:0;

}


.ending-panel{

    width:100%;

    min-width:0;

    padding:2.25rem 5vw 2.5rem;

    background:rgba(0,0,0,.68);

    backdrop-filter:none;

    opacity:0;

    transform:translate3d(0,35px,0);

    transition:
        transform 1.6s cubic-bezier(.22,.61,.36,1) .15s,
        opacity .8s ease .15s;

}

.case-ending__content{

    align-items:flex-end;

}

.case-ending.is-visible .ending-panel{

    opacity:1;

    transform:translate3d(0,0,0);

}

.case-ending{

    height:42rem;
    min-height:42rem;

    overflow:hidden;

}

.case-ending > img{

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;

}

.case-ending__content{

    display:flex;
    align-items:flex-end;

}

.ending-panel{

    width:100%;

}

.case-film{

    min-height:32rem;
    background:linear-gradient(
        180deg,
        #00145a 0%,
        #000d4d 20%,
        #050505 100%
    );

}


.case-film__video{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:contain;
    object-position:center center;

}


.case-film__overlay{

    align-items:flex-end;

    padding:3rem 5vw;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.08) 20%,
            rgba(0,0,0,.82) 100%
        );

}


.case-film__copy{

    width:100%;
    max-width:34rem;

}


.case-film__copy h2{

    margin-bottom:1.25rem;

    font-size:1.75rem;

}


.case-film__copy p{

    margin-bottom:1rem;

    font-size:1.05rem;
    line-height:1.6;

}

.brand-carousel{

    --carousel-height:150px;
    --carousel-gap:.75rem;

    padding:1rem 0;

}


.brand-carousel__overlap{

    margin-left:-2rem;
    margin-right:-2rem;

}

.campaign-spotlight{

    margin-top:2.5rem;

}


.campaign-spotlight__hero{

    min-height:auto;

}


.campaign-spotlight__hero img{

    position:relative;

    height:auto;

}


.campaign-spotlight__hero::after{

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.05) 35%,
            rgba(0,0,0,.88) 100%
        );

}


.campaign-spotlight__overlay{

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    width:100%;

    padding:3rem 5vw;

}


.campaign-spotlight__overlay h2{

    font-size:1.75rem;

}


.campaign-spotlight__overlay p{

    font-size:1.05rem;

}


.campaign-spotlight__content{

    padding:4rem 5vw;

}

.campaign-spotlight__story{

    grid-template-columns:1fr;

    gap:3rem;

    margin-top:-3rem;

}


.campaign-spotlight__phone{

    justify-content:center;

}


.phone-video{

    width:min(320px, 78vw);

}


.campaign-spotlight__story-copy,
.campaign-spotlight__journey-intro{

    max-width:38rem;
    margin:0 auto;
    padding:0;

    transform:none;

}


.campaign-spotlight__story-copy p{

    font-size:1.05rem;
    line-height:1.6;

}

.campaign-spotlight__journey{

    display:flex;
    flex-direction:column;

    gap:1.5rem;

    margin-top:5rem;

}


.campaign-spotlight__journey-intro h2{

    font-size:1.75rem;

}


.campaign-spotlight__journey-intro p,
.campaign-spotlight__journey-caption{

    font-size:1.05rem;
    line-height:1.6;

}


.journey-image--arrival{

    margin-top:1.5rem;

}

/* ===== Campaign Rollout ===== */

.campaign-spotlight__rollout{

    grid-template-columns:1fr;

    gap:2rem;

}


.campaign-spotlight__rollout-feature{

    display:flex;
    flex-direction:column;

}


.campaign-spotlight__rollout-overlay{

    position:static;

    display:block;

    padding:0 0 2rem;

    background:none;

    order:-1;

}


.campaign-spotlight__rollout-feature::before{

    display:none;

}

.campaign-spotlight__rollout{

    grid-template-columns:1fr;

    gap:3rem;

    margin-top:5rem;

}

.campaign-spotlight:not(.is-open) .campaign-spotlight__content{
    padding-top:0;
    padding-bottom:0;
}

.campaign-spotlight.is-open .campaign-spotlight__content{
    padding-top:3rem;
    padding-bottom:3rem;
}


/* ==================================================
768px MEDIA BLOCK
=====================================================*/

@media (max-width:768px){

    .case-context{

        padding:3rem 0;

    }

    .case-context__inner{

        width:100%;

        flex-direction:row;
        align-items:flex-start;

        gap:1.25rem;

        padding:1.75rem 5vw;

    }

    .case-context__portrait{

        width:88px;
        height:88px;

        object-position:center 18%;

    }

    .case-context__copy p{

        font-size:.95rem;
        line-height:1.6;

    }

    .case-context__copy p + p{

        margin-top:1rem;

    }

}





}