/* =========================================================
   ESTHETICAPLUS — PROOF & REAL CASES
   PREMIUM EDITORIAL VERSION
========================================================= */

#ep-proof-premium,
#ep-proof-premium *{
  box-sizing:border-box;
}

#ep-proof-premium{
  --navy:#07111f;
  --navy2:#0d2034;
  --ink:#17293a;
  --text:#596978;
  --muted:#7d8893;
  --cream:#f6f1e8;
  --ivory:#fffdf8;
  --white:#ffffff;

  --gold:#b99561;
  --gold-dark:#947243;
  --gold-light:#e8cb94;

  --line:rgba(7,17,31,.11);

  --serif:"Fraunces",Georgia,serif;
  --sans:"Inter Tight",Arial,sans-serif;

  width:100%;
  overflow:hidden;

  background:var(--ivory);
  color:var(--ink);

  font-family:var(--sans);
}

#ep-proof-premium img{
  display:block;
  max-width:100%;
}

#ep-proof-premium a{
  color:inherit;
}

#ep-proof-premium h2,
#ep-proof-premium h3,
#ep-proof-premium h4,
#ep-proof-premium p,
#ep-proof-premium figure{
  margin-top:0;
}

#ep-proof-premium .epp-shell{
  width:min(1240px,calc(100% - 80px));
  margin:0 auto;
}


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

#ep-proof-premium .epp-intro{
  padding:118px 0 68px;
}

#ep-proof-premium .epp-intro-grid{
  display:grid;
  grid-template-columns:1.15fr .7fr;
  gap:75px;
  align-items:end;
}

#ep-proof-premium .epp-kicker{
  display:flex;
  align-items:center;
  gap:12px;

  margin:0 0 18px;

  color:var(--gold-dark);

  font-size:11px;
  font-weight:700;
  line-height:1.3;
  letter-spacing:.18em;

  text-transform:uppercase;
}

#ep-proof-premium .epp-kicker:before{
  content:"";

  width:34px;
  height:1px;

  background:currentColor;
}

#ep-proof-premium .epp-title{
  max-width:820px;

  margin:0!important;

  color:var(--navy)!important;

  font-family:var(--serif)!important;

  font-size:clamp(49px,5.6vw,80px)!important;

  font-weight:400!important;

  line-height:.97!important;

  letter-spacing:-.048em!important;
}

#ep-proof-premium .epp-title em{
  color:var(--gold-dark);

  font-style:italic;

  font-weight:300;
}

#ep-proof-premium .epp-intro-copy{
  padding-bottom:5px;
}

#ep-proof-premium .epp-intro-copy p{
  margin:0;

  color:#516272;

  font-size:17px;

  line-height:1.76;
}


/* =========================================================
   VIDEOS
========================================================= */

#ep-proof-premium .epp-videos{
  padding-bottom:112px;
}

#ep-proof-premium .epp-video-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:27px;
}

#ep-proof-premium .epp-video{
  min-width:0;
}

#ep-proof-premium .epp-video-media{
  position:relative;

  overflow:hidden;

  aspect-ratio:16 / 9;

  border-radius:22px;

  background:var(--navy);

  box-shadow:
    0 20px 55px rgba(7,17,31,.10);
}

#ep-proof-premium .epp-video-media video,
#ep-proof-premium .epp-video-media iframe{
  display:block;

  width:100%;
  height:100%;

  border:0;

  object-fit:cover;
}

#ep-proof-premium .epp-video-copy{
  display:grid;
  grid-template-columns:100px 1fr;
  gap:23px;

  padding:25px 4px 0;
}

#ep-proof-premium .epp-video-number{
  padding-top:3px;

  color:var(--gold-dark);

  font-family:var(--serif);

  font-size:18px;

  font-style:italic;
}

#ep-proof-premium .epp-video-kicker{
  margin:0 0 8px;

  color:var(--gold-dark);

  font-size:10px;

  font-weight:700;

  line-height:1.4;

  letter-spacing:.15em;

  text-transform:uppercase;
}

#ep-proof-premium .epp-video h3{
  margin:0 0 10px!important;

  color:var(--navy)!important;

  font-family:var(--serif)!important;

  font-size:30px!important;

  font-weight:400!important;

  line-height:1.12!important;

  letter-spacing:-.02em!important;
}

#ep-proof-premium .epp-video-text{
  margin:0;

  color:#61707e;

  font-size:15px;

  line-height:1.7;
}


/* =========================================================
   CASES SECTION
========================================================= */

#ep-proof-premium .epp-cases{
  padding:108px 0 118px;

  background:var(--cream);

  border-top:1px solid rgba(7,17,31,.06);
}

#ep-proof-premium .epp-cases-head{
  display:grid;
  grid-template-columns:1fr .66fr;
  gap:65px;
  align-items:end;

  margin-bottom:43px;
}

#ep-proof-premium .epp-cases-title{
  margin:0!important;

  color:var(--navy)!important;

  font-family:var(--serif)!important;

  font-size:clamp(43px,4.8vw,68px)!important;

  font-weight:400!important;

  line-height:1!important;

  letter-spacing:-.043em!important;
}

#ep-proof-premium .epp-cases-title em{
  color:var(--gold-dark);

  font-style:italic;

  font-weight:300;
}

#ep-proof-premium .epp-cases-copy{
  margin:0;

  color:#596978;

  font-size:16px;

  line-height:1.72;
}


/* =========================================================
   CAROUSEL CONTROL BAR
========================================================= */

#ep-proof-premium .epp-carousel-top{
  display:flex;
  justify-content:flex-end;
  align-items:center;

  gap:9px;

  margin-bottom:17px;
}

#ep-proof-premium .epp-arrow{
  width:48px;
  height:48px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:1px solid rgba(7,17,31,.13);

  border-radius:999px;

  background:transparent;

  color:var(--navy);

  cursor:pointer;

  font-family:Arial,sans-serif;

  font-size:19px;

  line-height:1;

  transition:
    background .25s ease,
    color .25s ease,
    border-color .25s ease,
    transform .25s ease;
}

#ep-proof-premium .epp-arrow:hover{
  transform:translateY(-2px);

  color:#fff;

  background:var(--navy);

  border-color:var(--navy);
}


/* =========================================================
   CASE TRACK
========================================================= */

#ep-proof-premium .epp-track{
  display:flex;

  gap:21px;

  overflow-x:auto;

  padding:0 0 5px;

  scroll-snap-type:x mandatory;

  scrollbar-width:none;

  -webkit-overflow-scrolling:touch;
}

#ep-proof-premium .epp-track::-webkit-scrollbar{
  display:none;
}


/* =========================================================
   CASE CARD
========================================================= */

#ep-proof-premium .epp-case{
  flex:0 0 calc((100% - 42px) / 3);

  min-width:0;

  scroll-snap-align:start;
}

#ep-proof-premium .epp-case-media{
  position:relative;

  overflow:hidden;

  border-radius:18px;

  background:#e8e5df;

  box-shadow:
    0 14px 40px rgba(7,17,31,.07);
}


/*
   IMPORTANT
   Taller-than-4:3 ratio = less vertical cropping
*/

#ep-proof-premium .epp-case-image{
  display:block;

  width:100%;

  aspect-ratio:1.27 / 1;

  object-fit:cover;

  /*
     Lower the focal point:
     more of the lower part of the image remains visible
  */
  object-position:center 78%;

  background:#e7e5e0;

  transition:transform .6s ease;
}

#ep-proof-premium .epp-case:hover .epp-case-image{
  transform:scale(1.018);
}


/* Even lower */

#ep-proof-premium .epp-case-image.epp-focus-low{
  object-position:center 84%;
}


/* Slightly more centered */

#ep-proof-premium .epp-case-image.epp-focus-mid{
  object-position:center 70%;
}


/* small number on the image */

#ep-proof-premium .epp-case-index{
  position:absolute;

  left:15px;
  top:15px;

  min-width:42px;
  height:42px;

  display:flex;
  align-items:center;
  justify-content:center;

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

  border-radius:50%;

  color:#fff;

  background:rgba(7,17,31,.54);

  backdrop-filter:blur(8px);

  font-family:var(--serif);

  font-size:15px;

  font-style:italic;
}


/* CASE TEXT */

#ep-proof-premium .epp-case-copy{
  padding:23px 4px 0;
}

#ep-proof-premium .epp-case-type{
  margin:0 0 10px;

  color:var(--gold-dark);

  font-size:10px;

  font-weight:700;

  letter-spacing:.14em;

  line-height:1.4;

  text-transform:uppercase;
}

#ep-proof-premium .epp-case h4{
  margin:0 0 11px!important;

  color:var(--navy)!important;

  font-family:var(--serif)!important;

  font-size:27px!important;

  font-weight:400!important;

  line-height:1.12!important;

  letter-spacing:-.02em!important;
}

#ep-proof-premium .epp-case-text{
  margin:0;

  color:#61707d;

  font-size:14.5px;

  line-height:1.7;
}


/* =========================================================
   DOTS
========================================================= */

#ep-proof-premium .epp-dots{
  display:flex;
  align-items:center;
  justify-content:center;

  gap:7px;

  margin-top:31px;
}

#ep-proof-premium .epp-dot{
  width:6px;
  height:6px;

  border:0;

  padding:0;

  border-radius:50%;

  background:#c9ccd0;

  transition:
    width .25s ease,
    border-radius .25s ease,
    background .25s ease;
}

#ep-proof-premium .epp-dot.active{
  width:27px;

  border-radius:999px;

  background:var(--gold);
}


/* =========================================================
   MEDICAL NOTE
========================================================= */

#ep-proof-premium .epp-note{
  max-width:900px;

  margin:38px auto 0;

  padding-top:22px;

  border-top:1px solid rgba(7,17,31,.1);

  color:#78838d;

  font-size:12px;

  line-height:1.65;

  text-align:center;
}


/* =========================================================
   CTA DARK
========================================================= */

#ep-proof-premium .epp-cta-wrap{
  padding:0 0 115px;

  background:var(--cream);
}

#ep-proof-premium .epp-cta{
  position:relative;

  overflow:hidden;

  display:grid;

  grid-template-columns:1fr auto;

  gap:65px;

  align-items:center;

  padding:58px 62px;

  border-radius:25px;

  color:#fff;

  background:
    radial-gradient(
      circle at 92% 10%,
      rgba(185,149,97,.16),
      transparent 27%
    ),
    var(--navy);

  box-shadow:
    0 28px 70px rgba(7,17,31,.15);
}

#ep-proof-premium .epp-cta:after{
  content:"E+";

  position:absolute;

  right:-34px;
  bottom:-96px;

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

  font-family:var(--serif);

  font-size:290px;

  line-height:1;

  pointer-events:none;
}

#ep-proof-premium .epp-cta-copy{
  position:relative;

  z-index:2;

  max-width:760px;
}

#ep-proof-premium .epp-cta-label{
  margin:0 0 10px;

  color:var(--gold-light);

  font-size:10px;

  font-weight:700;

  letter-spacing:.16em;

  text-transform:uppercase;
}

#ep-proof-premium .epp-cta h3{
  margin:0 0 13px!important;

  color:#fff!important;

  font-family:var(--serif)!important;

  font-size:clamp(34px,3.5vw,49px)!important;

  font-weight:400!important;

  line-height:1.08!important;

  letter-spacing:-.03em!important;
}

#ep-proof-premium .epp-cta h3 em{
  color:var(--gold-light);

  font-style:italic;

  font-weight:300;
}

#ep-proof-premium .epp-cta-text{
  margin:0;

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

  font-size:15.5px;

  line-height:1.7;
}

#ep-proof-premium .epp-btn{
  position:relative;

  z-index:2;

  min-height:58px;

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

  padding:17px 28px;

  border:1px solid var(--ivory);

  border-radius:999px;

  color:var(--navy)!important;

  background:var(--ivory);

  font-size:11px;

  font-weight:700;

  letter-spacing:.11em;

  line-height:1.3;

  text-decoration:none!important;

  text-transform:uppercase;

  white-space:nowrap;

  transition:
    transform .25s ease,
    background .25s ease,
    border-color .25s ease;
}

#ep-proof-premium .epp-btn:hover{
  transform:translateY(-2px);

  background:var(--gold-light);

  border-color:var(--gold-light);
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:1050px){

  #ep-proof-premium .epp-shell{
    width:calc(100% - 56px);
  }

  #ep-proof-premium .epp-intro-grid{
    grid-template-columns:1fr;

    gap:25px;
  }

  #ep-proof-premium .epp-intro-copy{
    max-width:760px;
  }

  #ep-proof-premium .epp-cases-head{
    grid-template-columns:1fr;

    gap:20px;
  }

  #ep-proof-premium .epp-case{
    flex-basis:calc((100% - 21px) / 2);
  }

  #ep-proof-premium .epp-cta{
    grid-template-columns:1fr;

    gap:30px;
  }

}


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

@media(max-width:767px){

  #ep-proof-premium .epp-shell{
    width:calc(100% - 36px);
  }


  /* INTRO */

  #ep-proof-premium .epp-intro{
    padding:74px 0 43px;
  }

  #ep-proof-premium .epp-kicker{
    font-size:10px;

    letter-spacing:.14em;
  }

  #ep-proof-premium .epp-title{
    font-size:clamp(43px,12.5vw,58px)!important;

    line-height:1!important;
  }

  #ep-proof-premium .epp-intro-copy p{
    font-size:16px;

    line-height:1.7;
  }


  /* VIDEOS */

  #ep-proof-premium .epp-videos{
    padding-bottom:70px;
  }

  #ep-proof-premium .epp-video-grid{
    grid-template-columns:1fr;

    gap:43px;
  }

  #ep-proof-premium .epp-video-media{
    border-radius:17px;
  }

  #ep-proof-premium .epp-video-copy{
    grid-template-columns:44px 1fr;

    gap:12px;

    padding-top:19px;
  }

  #ep-proof-premium .epp-video h3{
    font-size:26px!important;
  }

  #ep-proof-premium .epp-video-text{
    font-size:14.5px;
  }


  /* CASES */

  #ep-proof-premium .epp-cases{
    padding:70px 0 75px;
  }

  #ep-proof-premium .epp-cases-head{
    margin-bottom:28px;
  }

  #ep-proof-premium .epp-cases-title{
    font-size:clamp(39px,11.8vw,54px)!important;
  }

  #ep-proof-premium .epp-cases-copy{
    font-size:15.5px;
  }

  #ep-proof-premium .epp-carousel-top{
    margin-bottom:14px;
  }

  #ep-proof-premium .epp-arrow{
    width:44px;
    height:44px;
  }

  /*
     Wider card and taller image on mobile:
     show even more of the lower part of the before/after image.
  */

  #ep-proof-premium .epp-track{
    width:calc(100vw - 18px);

    margin-right:calc((100vw - 100%) / -2);

    padding-right:18px;

    gap:14px;
  }

  #ep-proof-premium .epp-case{
    flex:0 0 86%;
  }

  #ep-proof-premium .epp-case-media{
    border-radius:15px;
  }

  #ep-proof-premium .epp-case-image{
    aspect-ratio:1.16 / 1;

    object-position:center 80%;
  }

  #ep-proof-premium .epp-case-image.epp-focus-low{
    object-position:center 87%;
  }

  #ep-proof-premium .epp-case-image.epp-focus-mid{
    object-position:center 72%;
  }

  #ep-proof-premium .epp-case h4{
    font-size:25px!important;
  }

  #ep-proof-premium .epp-note{
    font-size:11.5px;

    text-align:left;
  }


  /* CTA */

  #ep-proof-premium .epp-cta-wrap{
    padding-bottom:65px;
  }

  #ep-proof-premium .epp-cta{
    padding:41px 23px;

    border-radius:20px;
  }

  #ep-proof-premium .epp-cta h3{
    font-size:34px!important;
  }

  #ep-proof-premium .epp-cta-text{
    font-size:15px;
  }

  #ep-proof-premium .epp-btn{
    width:100%;

    white-space:normal;

    text-align:center;
  }

}