/* ══════════════════════════════════════
   CORPO DA PÁGINA
══════════════════════════════════════ */
body, html {
	background-color: #f8f9fa;
}

/* ══════════════════════════════════════
   INTRODUCTION
══════════════════════════════════════ */

.case-intro{
    margin:120px auto 10px;
}


/* HEADER */

.case-intro__header{
    max-width:980px;
    margin:0 auto 20px;
    text-align:center;
}

.case-intro__client{
    margin:0;
    font-family:"Abril Display", serif;
    font-size:.80rem;
    font-weight:700;
    text-transform:lowercase;
    font-style: italic;
    color:#18182B;
}

.case-intro__title{
    margin:2px 0;
    font-size:clamp(2.8rem,6vw,5.8rem);
    font-weight:100;
    line-height:.98;
    -webkit-text-stroke: .8px #f8f9fa;
    color:#18182B;

}

.case-intro__subtitle{
    max-width:760px;
    margin:0 auto;
    font-family: "Abril display", serif;
    font-size:1.05rem;
    font-weight:300;
    line-height:1.8;
    color:#18182B;
}


/* VIDEO */

.qs-hero-cases {
    margin: 20px 20px 0 20px;
    overflow: hidden;
    position: relative;
    height: 70vh;
    min-height: 420px;
}

.qs-hero__video-cases {
  width: 100%;
  height: 100%;
  object-fit: cover;
	object-position: center 30% !important;
  display: block;
}
/* The two curtain halves */
  .qs-hero-cases::before,
  .qs-hero-cases::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    background: #f8f9fa;
    z-index: 2;
    transition: transform 1.1s cubic-bezier(0.77, 0, 0.18, 1);
  }
  .qs-hero-cases::before { left: 0; transform: translateX(0); }
  .qs-hero-cases::after  { right: 0; transform: translateX(0); }
 
  .qs-hero-cases.revealed::before { transform: translateX(-100%); }
  .qs-hero-cases.revealed::after  { transform: translateX(100%); }
 
  .qs-hero-cases.revealed img {
    width: 100%; 
	height: 100%;
    object-fit: cover;
	object-position: center 30% !important;
    display: block;
  }


/* CONTENT */

.case-intro__content{
    display:grid;
    grid-template-columns:1fr 2fr;
    gap:90px;
    padding: 20px;
    align-items:start;
}


/* SERVICES */

.case-intro__services ul{
    margin:0;
    padding:0;
    list-style:none;
}
.services-title {
    margin: 0px 0px 10px 0px;
    font-size:14px;
    font-weight:200;
    line-height:.98;
    color:#18182B;
}
.case-intro__services li{
    margin-bottom:10px;
    font-family:"Abril Display", serif;
    font-size:.85rem;
    font-weight:700;
    text-transform:lowercase;
    font-style: italic;
    color:#18182B;
}


/* DESCRIPTION */

.case-intro__description{
    max-width:760px;
}

.case-intro__description p{
    margin: 5px 0 28px;
    line-height: 1.4em;
    font-size: .9rem;
    color:#18182B;
}

.case-intro__description p:last-child{
    margin-bottom:0;
}


/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (max-width:768px){
    .case-intro{
        width:calc(100% - 32px);
        margin:80px auto 10px;
    }
    .case-intro__header{
        margin-bottom:16px;
    }
    .case-intro__title{
        margin:18px 0;
        font-size:2.4rem;
        line-height:1.05;
        -webkit-text-stroke: .3px #f8f9fa;
    }

    .case-intro__subtitle{
        font-size:.95rem;
        line-height:1.7;
    }

    .qs-hero-cases { 
        height: 55vw; 
        min-height: 260px; 
        width: 100%;
        margin:0 auto;
    }
   .case-intro__content{
       display: flex;
    flex-direction: column-reverse;
   }
    .case-intro__description p{
        font-size:.95rem;
        margin-bottom: 0px;
        line-height: 1.4em;
    }
    .case-intro__services li{
        margin-bottom:8px;
}
}
/* ══════════════════════════════════════
   ELEMENTOS REPETIDOS
══════════════════════════════════════ */
.cases-header{
    max-width:900px;
    margin:0 auto 20px;
    text-align:center;
}

.cases-eyebrow{
    margin:0;
    font-family:"Abril Display", serif;
    font-size:.80rem;
    font-weight:700;
    text-transform:lowercase;
    font-style: italic;
    color:#18182B;
}

.cases-title{
    margin:20px 0;
    font-size:clamp(1.8rem,4vw,3.8rem);
    font-weight:100;
    line-height:.98;
    -webkit-text-stroke: .4px #f8f9fa;
    color:#18182B;
}

.cases-subtitle{
    margin:0;
    font-size:1.05rem;
    font-weight:300;
    line-height:1.8;
    color:#18182B;
}

/* TEXT */

.cases-content{
    max-width:700px;
    margin:0 auto 20px;

}

.cases-content p{
    margin:0 0 5px;
    font-size: .9rem;
    color:#18182B;
    line-height: 1.4em;
    text-align: left;
}

.cases-content strong{
    font-style: italic;
    font-weight:700;
    font-family:"Abril Display", serif;
    margin-top: 24px;
    font-size: 16px;
}
.cases-content p:last-child{
    margin-bottom:0;
}
@media (max-width: 768px){
    .cases-content{
        margin-bottom: 0;
}}

/* ══════════════════════════════════════
   THE CHALLENGE
══════════════════════════════════════ */

.case-challenge{
margin:120px auto 10px;
}

/* IMAGES */

.case-challenge__images{
    display:flex;
    flex-direction:column;
    gap:8px;

}

.case-challenge__images img{
width: calc(100vw - 40px);
  max-width: calc(100vw - 40px);

  margin-left: calc(50% - 50vw + 20px);
  margin-right: calc(50% - 50vw + 20px);

  display: block;
  height: auto !important;
}


/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */

@media (max-width:768px){
    .case-challenge{
        width:calc(100% - 32px);
        margin:100px auto;
    }
    .case-challenge__header{
        margin-bottom:56px;
    }
    .case-challenge__title{
        font-size:2.4rem;
    }
    .case-challenge__subtitle{
        font-size:.95rem;
    }
    .case-challenge__content{
        margin-bottom:64px;
    }
    .case-challenge__content p{
        font-size:.9rem;
        line-height:1.8;
    }
    .case-challenge__images{
        gap:8px;
    }

}

/* ══════════════════════════════════════
   BRAND IDENTITY — INTRO
══════════════════════════════════════ */

.case-brand-intro{
    margin:100px auto 20px;
}

/* HERO IMAGE */
.case-brand-intro__hero{
    margin:20px 0 20px;
}

.case-brand-intro__hero img{
width: calc(100vw - 40px);
  max-width: calc(100vw - 40px);
  height: 100px;
  margin-left: calc(50% - 50vw + 20px);
  margin-right: calc(50% - 50vw + 20px);

  display: block;
  height: auto !important;
}


/* VIDEO */

.case-brand-intro__video{
    margin-top:20px;
}

.case-brand-intro__video video{
width: calc(100vw - 40px);
  max-width: calc(100vw - 40px);

  margin-left: calc(50% - 50vw + 20px);
  margin-right: calc(50% - 50vw + 20px);

  display: block;
  height: auto !important;
}


/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (max-width:768px){
    .case-brand-intro{
        width:calc(100% - 32px);
        margin:10px auto 10px;
    }
    .case-brand-intro__video{
        margin-top:8px;
    }

}
/* ══════════════════════════════════════
   LOGO
══════════════════════════════════════ */

.case-logo{
    margin:20px auto 10px;
    padding: 5px 10px 5px 10px;
}
.case-logo__image{
width: calc(100vw - 40px);
  max-width: calc(100vw - 40px);

  margin-left: calc(50% - 50vw + 20px);
  margin-right: calc(50% - 50vw + 20px);

  display: block;
  height: auto !important;

}

.case-logo__variations{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    margin-top:20px;
}
.case-logo__variations img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */

@media (max-width:768px){
    .case-logo{
        margin:1px auto 10px;
    }

    .case-logo__image{
        margin:8px auto 8px;
 
    }
    .case-logo__variations{
        grid-template-columns:1fr;
    }
}
/* ══════════════════════════════════════
   COLOR PALETTE
══════════════════════════════════════ */

.case-colors{
    margin:60px auto 10px;
    padding: 5px 10px 5px 10px;
}
.case-colors__image img{
    display:block;
    width:100%;
    height:auto;
}

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */

@media (max-width:768px){
    .case-colors{
        width:calc(100% - 32px);
        margin:100px auto;
    }
    .case-colors__header{
        margin-bottom:48px;
    }
    .case-colors__title{
        font-size:2.4rem;
        line-height:1.05;
    }
    .case-colors__content{
        margin-bottom:56px;
    }
    .case-colors__content p{
        font-size:.95rem;
        line-height:1.8;
    }
}
/* ══════════════════════════════════════
   TYPOGRAPHY
══════════════════════════════════════ */

.case-typography{
    margin:60px auto 10px;
    padding: 5px 10px 5px 10px;
}

.case-typography__playfair{
    font-family:"Playfair Display", serif !important;
    font-size: 12px;
}

.case-typography__poppins{
    font-family:"Poppins", sans-serif !important;
    font-size: 12px;
}

.case-typography__gallery{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:8px;
}

.case-typography__gallery img{
    display:block;
    width:100%;
    height:auto;
}

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */

@media (max-width:768px){
    .case-typography{
        width:calc(100% - 32px);
        margin:100px auto;
    }
    .case-typography__header{
        margin-bottom:48px;
    }
   .case-typography__playfair{
    font-family:"Playfair Display", serif;
}

.case-typography__poppins{
    font-family:"Poppins", sans-serif;
}

    .case-typography__content{

        margin-bottom:56px;

    }

    .case-typography__content h2{

        margin:48px 0 20px;

    }

    .case-typography__content p{

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

    }

    .case-typography__gallery{

        grid-template-columns:1fr;
        gap:24px;

    }

}
/* ══════════════════════════════════════
   PATTERNS
══════════════════════════════════════ */

.case-patterns{
    margin:20px auto 5px;
    padding: 5px 10px 5px 10px;
}

.case-patterns__image{    margin-bottom:2px;

}
.case-patterns__image img{
    display:block;
    width:100%;
    height:auto;
}

.case-patterns__videos{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:2px;
}

.case-patterns__videos video{
    display:block;
    width:100%;
    height:auto;
}

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */

@media (max-width:768px){
    .case-patterns{
        width:calc(100% - 32px);
        margin:100px auto;
    }
    .case-patterns__header{
        margin-bottom:48px;
    }
    .case-patterns__title{
        font-size:2.4rem;
        line-height:1.05;
    }
    .case-patterns__content{

        margin-bottom:56px;

    }
    .case-patterns__content h2{
        margin:48px 0 20px;
    }
    .case-patterns__content p{
        font-size:.95rem;
        line-height:1.8;
    }
    .case-patterns__image{
        margin-top: 10px;
        margin-bottom:24px;
        background-color: black;
    }
     .case-patterns__image img{
         object-fit: cover;
        aspect-ratio: 1/1;
     }
    .case-patterns__videos{
        grid-template-columns:1fr;
        gap:24px;
    }
}

/* ══════════════════════════════════════
   BRAND APPLICATIONS GALLERY
══════════════════════════════════════ */

.case-gallery{
    max-width:1600px;
    margin:auto;
    padding:20px;
}

.case-gallery-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    grid-auto-rows:180px;
    gap:2px;
}

.gallery-item{
    overflow:hidden;
}

.gallery-item img{

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

    transition:.5s;

}

.gallery-item:hover img{

    transform:scale(1.03);

}
.gallery-item.tall{

    grid-row:span 2;

}
.gallery-item.wide{

    grid-column:span 2;

}
.gallery-item.large{

    grid-column:span 2;
    grid-row:span 2;

}

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media(max-width:900px){

.case-gallery-grid{

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

    grid-auto-rows:150px;

}

}


@media(max-width:600px){

.case-gallery-grid{

    grid-template-columns:1fr;

    grid-auto-rows:auto;

}

.gallery-item,
.gallery-item.large,
.gallery-item.tall,
.gallery-item.wide{

    grid-column:auto;
    grid-row:auto;

}

.gallery-item img{

    height:auto;

}

}

/* ══════════════════════════════════════
   WEBSITE
══════════════════════════════════════ */

.case-website{
    margin: 60px auto 20px;
    padding: 5px 10px 5px 10px;
}
.case-website__cta{
    display:flex;
    justify-content:center;
    margin-top: 10px;
    margin-bottom:20px;
}

.case-website__video video{

    display:block;

    width:100%;
    height:auto;

}

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */

@media (max-width:768px){
    .case-website{
        width:calc(100% - 32px);
        margin: 60px auto 10px;
    }
    .case-website__header{
        margin-bottom:56px;
    }
    .case-website__title{
        font-size:2.4rem;
        line-height:1.05;
    }
    .case-website__subtitle{
        font-size:.95rem;
        line-height:1.7;
    }
    .case-website__content{
        margin-bottom:48px;
    }
    .case-website__content p{
        font-size:.95rem;
        line-height:1.8;
    }
    .case-website__cta{
       margin-bottom:26px;
    }

}
/* ══════════════════════════════════════
   WEBSITE DETAILS
══════════════════════════════════════ */

.case-website-details{
    margin:20px auto 10px;
    padding: 5px 10px 5px 10px;
}

.case-website-details__image{
    margin-bottom:80px;
}
.case-website-details__image img{
    display:block;
    width:100%;
    height:auto;
}
.case-website-details__video{
    margin-bottom:80px;
}
.case-website-details__video video{
   display:block;
    width:100%;
    height:auto;
}

.case-website-details__gallery{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:8px;
}
.case-website-details__gallery img{
    display:block;
    width:100%;
    height:auto;
}

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */

@media (max-width:768px){
    .case-website-details{
        width:calc(100% - 32px);
        margin:10px auto;
    }
    .case-website-details__header{
        margin-bottom:48px;
    }
    .case-website-details__title{
        font-size:2.4rem;
        line-height:1.05;
    }
    .case-website-details__content{
        margin-bottom:56px;
    }
    .case-website-details__content p{
        font-size:.95rem;
        line-height:1.8;
    }
    .case-website-details__image{
        margin-bottom:8px;
    }
    .case-website-details__video{
        margin-bottom:8px;
    }
    .case-website-details__gallery{
        grid-template-columns:1fr;
        gap: 8px;
    }
}

/* ══════════════════════════════════════
   SOCIAL MEDIA
══════════════════════════════════════ */

.case-social{
    margin:60px auto 10px;
    padding: 5px 10px 5px 10px;
}
.case-social__video{
    margin-bottom:40px;
}
.case-social__video video{
    display:block;
    width:100%;
    height:auto;
}
.case-social__gallery{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:6px;
}
.case-social__gallery img{
    display:block;
    object-fit: cover;
    aspet-ratio: 16/9;
    width:100%;
    height:auto;
}

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */

@media (max-width:768px){
    .case-social{
        width:calc(100% - 32px);
        margin:100px auto 10px;
    }
    .case-social__header{
        margin-bottom:56px;
    }
    .case-social__title{
        font-size:2.4rem;
        line-height:1.05;
    }
    .case-social__content{
        margin-bottom:8px;
    }
    .case-social__content p{
        font-size:.95rem;
        line-height:1.8;
    }
    .case-social__video{
        margin-bottom:8px;
    }
    .case-social__gallery{
        grid-template-columns:1fr;
        gap: 8px;
    }

}
/* ══════════════════════════════════════
   CAMPAIGN
══════════════════════════════════════ */

.case-campaign{
    margin: 60px auto 10px;
    padding: 5px 10px 5px 10px;
}

.case-campaign__video{
    width:100%;
}
.case-campaign__video video{
    display:block;
    width:100%;
    height:auto;
}

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (max-width:768px){
    .case-campaign{
        width:calc(100% - 32px);
        margin:100px auto 10px;
    }
    .case-campaign__header{
        margin-bottom:56px;
    }
    .case-campaign__title{
        font-size:2.4rem;
        line-height:1.05;
    }
    .case-campaign__content{
        margin-bottom:56px;
    }
    .case-campaign__content p{
        font-size:.95rem;
        line-height:1.8;
    }
}
/* ══════════════════════════════════════
   CAMPAIGN CONCEPT
══════════════════════════════════════ */

.case-campaign-concept{
    margin:20px auto 10px;
    padding: 5px 10px 5px 10px;
}
.case-campaign-concept__gallery{
    display:grid;
    width:80%;
    grid-template-columns:repeat(2,1fr);
    gap:6px;
    margin: 0 auto;
}
.case-campaign-concept__gallery video{
    display:block;
    width:100%;
    height:auto;
}

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */

@media (max-width:768px){
    .case-campaign-concept{
        width:calc(100% - 32px);
        margin:10px auto 10px;
    }
    .case-campaign-concept__header{
        margin-bottom:48px;
    }
    .case-campaign-concept__title{
        font-size:2.4rem;
        line-height:1.05;
    }
    .case-campaign-concept__content{
        margin-bottom:56px;
    }
    .case-campaign-concept__content p{
        font-size:.95rem;
        line-height:1.8;
    }
    .case-campaign-concept__gallery{
        grid-template-columns:1fr;
        gap:8px;
        width:100%;
    }

}
/* ══════════════════════════════════════
   BRAND ALIGNMENT
══════════════════════════════════════ */

.case-brand-alignment{
    margin:20px auto 10px;
    padding: 5px 10px 5px 10px;
}

.case-brand-alignment__gallery{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:6px;
}
.case-brand-alignment__gallery video{
    display:block;
    width:100%;
    height:auto;
}

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */

@media (max-width:768px){
    .case-brand-alignment{
        width:calc(100% - 32px);
        margin:10px auto 10px;
    }
    .case-brand-alignment__header{
        margin-bottom:48px;
    }
    .case-brand-alignment__title{
        font-size:2.4rem;
        line-height:1.05;
    }
    .case-brand-alignment__content{
        margin-bottom:12px;
    }
    .case-brand-alignment__content p{
        font-size:.9rem;
        line-height:1.8;
        width: 700px;
    }
    .case-brand-alignment__gallery{
        grid-template-columns:1fr;
        gap:8px;
    }
}
/* ══════════════════════════════════════
   JOURNEY
══════════════════════════════════════ */

.case-journey{
    margin:50px auto 10px;
    padding: 5px 10px 5px 10px;
}
.case-journey__header{
    margin-bottom:6px;
    text-align:center;
}
.case-journey__content{
    max-width:460px;
    margin:0 auto;
    text-align:center;
}
.case-journey__content p{
    margin:0 0 28px;
    font-size:.9rem;
    color:#18182B;
}
.case-journey__content p:last-child{
    margin-bottom:0;
}

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */

@media (max-width:768px){
    .case-journey{
        width:calc(100% - 32px);
        margin:120px auto;
    }
    .case-journey__header{
        margin-bottom:40px;
    }
   .case-journey__content p{
        font-size:.9rem;
    }
}