/* =========================================================
   ESTHETICAPLUS — PARCOURS PATIENT PREMIUM
========================================================= */

#ep-patient-path,
#ep-patient-path *{
  box-sizing:border-box;
}

#ep-patient-path{
  --navy:#07111f;
  --navy2:#0d2034;
  --white:#ffffff;
  --ivory:#fffdf8;
  --cream:#f6f1e8;

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

  --line:rgba(255,255,255,.14);

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

  position:relative;

  overflow:hidden;

  padding:120px 0;

  color:#fff;

  background:
    radial-gradient(
      circle at 10% 8%,
      rgba(185,149,97,.12),
      transparent 26%
    ),
    radial-gradient(
      circle at 88% 100%,
      rgba(185,149,97,.08),
      transparent 30%
    ),
    var(--navy);

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


/* subtle E+ background */

#ep-patient-path:after{
  content:"E+";

  position:absolute;

  right:-35px;
  bottom:-115px;

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

  font-family:var(--serif);

  font-size:360px;

  line-height:1;

  pointer-events:none;
}


#ep-patient-path .ep-path-shell{
  position:relative;

  z-index:2;

  width:min(1320px,calc(100% - 80px));

  margin:0 auto;
}


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

#ep-patient-path .ep-path-head{
  display:grid;

  grid-template-columns:1.15fr .65fr;

  gap:75px;

  align-items:end;

  margin-bottom:72px;
}


#ep-patient-path .ep-path-kicker{
  display:flex;

  align-items:center;

  gap:12px;

  margin:0 0 18px;

  color:var(--gold-light);

  font-size:11px;

  font-weight:700;

  line-height:1.3;

  letter-spacing:.18em;

  text-transform:uppercase;
}


#ep-patient-path .ep-path-kicker:before{
  content:"";

  width:34px;
  height:1px;

  background:currentColor;
}


#ep-patient-path h2{
  max-width:850px;

  margin:0!important;

  color:#fff!important;

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

  font-size:clamp(48px,5.6vw,78px)!important;

  font-weight:400!important;

  line-height:.98!important;

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


#ep-patient-path h2 em{
  color:var(--gold-light);

  font-style:italic;

  font-weight:300;
}


#ep-patient-path .ep-path-intro{
  max-width:520px;

  margin:0;

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

  font-size:17px;

  line-height:1.76;
}


/* =========================================================
   STEPS
========================================================= */

#ep-patient-path .ep-path-steps{
  position:relative;

  display:grid;

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

  gap:0;

  border-top:1px solid var(--line);

  border-bottom:1px solid var(--line);
}


/* horizontal gold line */

#ep-patient-path .ep-path-steps:before{
  content:"";

  position:absolute;

  top:-1px;
  left:0;

  width:20%;
  height:1px;

  background:linear-gradient(
    90deg,
    var(--gold),
    var(--gold-light)
  );
}


#ep-patient-path .ep-path-step{
  position:relative;

  min-height:345px;

  padding:34px 28px 36px;

  transition:
    background .3s ease,
    transform .3s ease;
}


#ep-patient-path .ep-path-step + .ep-path-step{
  border-left:1px solid var(--line);
}


#ep-patient-path .ep-path-step:hover{
  background:rgba(255,255,255,.035);
}


/* Number */

#ep-patient-path .ep-path-number{
  margin-bottom:68px;

  color:var(--gold-light);

  font-family:var(--serif);

  font-size:20px;

  font-style:italic;

  line-height:1;
}


/* small marker */

#ep-patient-path .ep-path-number:after{
  content:"";

  display:block;

  width:6px;
  height:6px;

  margin-top:16px;

  border-radius:50%;

  background:var(--gold);
}


#ep-patient-path .ep-path-step h3{
  margin:0 0 15px!important;

  color:#fff!important;

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

  font-size:27px!important;

  font-weight:400!important;

  line-height:1.12!important;

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


#ep-patient-path .ep-path-step p{
  margin:0;

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

  font-size:15px;

  line-height:1.72;
}


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

#ep-patient-path .ep-path-cta{
  display:grid;

  grid-template-columns:1fr auto;

  gap:50px;

  align-items:center;

  margin-top:62px;
}


#ep-patient-path .ep-path-cta-copy{
  max-width:780px;
}


#ep-patient-path .ep-path-cta-label{
  margin:0 0 10px;

  color:var(--gold-light);

  font-size:10px;

  font-weight:700;

  letter-spacing:.16em;

  text-transform:uppercase;
}


#ep-patient-path .ep-path-cta h3{
  margin:0 0 10px!important;

  color:#fff!important;

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

  font-size:clamp(30px,3vw,43px)!important;

  font-weight:400!important;

  line-height:1.13!important;

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


#ep-patient-path .ep-path-cta h3 em{
  color:var(--gold-light);

  font-style:italic;

  font-weight:300;
}


#ep-patient-path .ep-path-cta p{
  max-width:680px;

  margin:0;

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

  font-size:14.5px;

  line-height:1.65;
}


/* Button */

#ep-patient-path .ep-path-btn{
  min-height:58px;

  display:inline-flex;

  align-items:center;

  justify-content:center;

  gap:10px;

  padding:17px 29px;

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

  border-radius:999px;

  background:var(--ivory);

  color:var(--navy)!important;

  font-size:11px;

  font-weight:700;

  line-height:1.2;

  letter-spacing:.11em;

  text-decoration:none!important;

  text-transform:uppercase;

  white-space:nowrap;

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


#ep-patient-path .ep-path-btn:hover{
  transform:translateY(-2px);

  background:var(--gold-light);

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


#ep-patient-path .ep-path-btn span{
  font-size:17px;
}


/* =========================================================
   SMALL TRUST LINE
========================================================= */

#ep-patient-path .ep-path-trust{
  display:flex;

  flex-wrap:wrap;

  align-items:center;

  gap:9px 27px;

  margin-top:35px;

  padding-top:24px;

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

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

  font-size:12px;

  line-height:1.5;
}


#ep-patient-path .ep-path-trust span{
  position:relative;
}


#ep-patient-path .ep-path-trust span + span:before{
  content:"";

  position:absolute;

  left:-14px;
  top:50%;

  width:3px;
  height:3px;

  border-radius:50%;

  background:var(--gold);

  transform:translateY(-50%);
}


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

@media(max-width:1100px){

  #ep-patient-path{
    padding:95px 0;
  }


  #ep-patient-path .ep-path-shell{
    width:calc(100% - 56px);
  }


  #ep-patient-path .ep-path-head{
    grid-template-columns:1fr;

    gap:25px;

    margin-bottom:55px;
  }


  #ep-patient-path .ep-path-intro{
    max-width:700px;
  }


  #ep-patient-path .ep-path-steps{
    grid-template-columns:repeat(2,1fr);
  }


  #ep-patient-path .ep-path-step:nth-child(3),
  #ep-patient-path .ep-path-step:nth-child(5){
    border-left:0;
  }


  #ep-patient-path .ep-path-step:nth-child(n+3){
    border-top:1px solid var(--line);
  }


  #ep-patient-path .ep-path-steps:before{
    width:50%;
  }

}


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

@media(max-width:767px){

  #ep-patient-path{
    padding:74px 0 68px;
  }


  #ep-patient-path:after{
    display:none;
  }


  #ep-patient-path .ep-path-shell{
    width:calc(100% - 36px);
  }


  #ep-patient-path .ep-path-head{
    margin-bottom:40px;
  }


  #ep-patient-path .ep-path-kicker{
    font-size:10px;

    letter-spacing:.14em;
  }


  #ep-patient-path h2{
    font-size:clamp(42px,12.4vw,58px)!important;

    line-height:1!important;
  }


  #ep-patient-path .ep-path-intro{
    font-size:16px;

    line-height:1.68;
  }


  /* Horizontal swipe */

  #ep-patient-path .ep-path-steps{
    width:calc(100vw - 18px);

    display:flex;

    gap:12px;

    overflow-x:auto;

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

    padding-right:18px;
    padding-bottom:7px;

    border:0;

    scroll-snap-type:x mandatory;

    scrollbar-width:none;
  }


  #ep-patient-path .ep-path-steps::-webkit-scrollbar{
    display:none;
  }


  #ep-patient-path .ep-path-steps:before{
    display:none;
  }


  #ep-patient-path .ep-path-step,
  #ep-patient-path .ep-path-step:nth-child(3),
  #ep-patient-path .ep-path-step:nth-child(5),
  #ep-patient-path .ep-path-step:nth-child(n+3){

    min-width:82%;

    min-height:325px;

    padding:28px 24px;

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

    border-radius:16px;

    background:rgba(255,255,255,.035);

    scroll-snap-align:start;

  }


  #ep-patient-path .ep-path-number{
    margin-bottom:57px;
  }


  #ep-patient-path .ep-path-step h3{
    font-size:25px!important;
  }


  #ep-patient-path .ep-path-step p{
    font-size:15px;
  }


  /* CTA */

  #ep-patient-path .ep-path-cta{
    grid-template-columns:1fr;

    gap:26px;

    margin-top:48px;
  }


  #ep-patient-path .ep-path-cta h3{
    font-size:31px!important;
  }


  #ep-patient-path .ep-path-btn{
    width:100%;

    white-space:normal;

    text-align:center;
  }


  #ep-patient-path .ep-path-trust{
    gap:9px;

    flex-direction:column;

    align-items:flex-start;
  }


  #ep-patient-path .ep-path-trust span + span:before{
    display:none;
  }

}