/* =========================================================
   ESTHETICAPLUS — HERO ACCUEIL PREMIUM
========================================================= */

#ep-home-hero-v3,
#ep-home-hero-v3 *{
  box-sizing:border-box;
}

#ep-home-hero-v3{
  --navy:#07111f;
  --navy2:#0d2034;
  --ivory:#fffdf8;
  --ivory2:#f8f3ea;
  --gold:#b99561;
  --gold-dark:#947243;
  --gold-light:#efd7a8;

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

  position:relative;

  isolation:isolate;

  min-height:100svh;

  overflow:hidden;

  display:flex;

  align-items:center;

  background:var(--navy);

  color:#fff;

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


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

#ep-home-hero-v3 .ep-h3-media{
  position:absolute;

  inset:0;

  z-index:-4;
}

#ep-home-hero-v3 .ep-h3-media picture,
#ep-home-hero-v3 .ep-h3-media img{
  display:block;

  width:100%;

  height:100%;
}

#ep-home-hero-v3 .ep-h3-media img{
  object-fit:cover;

  object-position:center center;

  transform:scale(1.002);
}


/* =========================================================
   OVERLAY DESKTOP
========================================================= */

#ep-home-hero-v3 .ep-h3-overlay{
  position:absolute;

  inset:0;

  z-index:-3;

  background:

    radial-gradient(
      circle at 78% 17%,
      rgba(202,164,104,.13),
      transparent 29%
    ),

    linear-gradient(
      90deg,
      rgba(3,9,16,.97) 0%,
      rgba(3,9,16,.90) 29%,
      rgba(3,9,16,.69) 48%,
      rgba(3,9,16,.25) 74%,
      rgba(3,9,16,.08) 100%
    ),

    linear-gradient(
      180deg,
      rgba(3,9,16,.07) 0%,
      transparent 43%,
      rgba(3,9,16,.63) 100%
    );
}


/* =========================================================
   LAYOUT
========================================================= */

#ep-home-hero-v3 .ep-h3-shell{
  width:min(1380px,calc(100% - 96px));

  margin:0 auto;

  padding:135px 0 105px;
}

#ep-home-hero-v3 .ep-h3-grid{
  display:grid;

  grid-template-columns:
    minmax(0,1.25fr)
    minmax(300px,.55fr);

  gap:80px;

  align-items:center;
}


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

#ep-home-hero-v3 .ep-h3-main{
  max-width:960px;
}


/* =========================================================
   EYEBROW
========================================================= */

#ep-home-hero-v3 .ep-h3-eyebrow{
  display:flex;

  align-items:center;

  gap:13px;

  margin:0 0 21px;

  color:var(--gold-light);

  font-size:11px;

  font-weight:700;

  line-height:1.35;

  letter-spacing:.18em;

  text-transform:uppercase;
}

#ep-home-hero-v3 .ep-h3-eyebrow:before{
  content:"";

  width:34px;

  height:1px;

  flex:0 0 34px;

  background:currentColor;
}


/* =========================================================
   TITLE
========================================================= */

#ep-home-hero-v3 h1{
  max-width:960px;

  margin:0 0 27px!important;

  color:#fff!important;

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

  font-size:
    clamp(67px,7vw,116px)!important;

  font-weight:400!important;

  line-height:.89!important;

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

#ep-home-hero-v3 h1 em{
  display:block;

  color:var(--gold-light);

  font-style:italic;

  font-weight:300;
}


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

#ep-home-hero-v3 .ep-h3-intro{
  max-width:715px;

  margin:0 0 30px;

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

  font-size:
    clamp(18px,1.5vw,21px);

  font-weight:500;

  line-height:1.7;
}

#ep-home-hero-v3 .ep-h3-intro strong{
  color:#f0d9b0;

  font-family:var(--serif);

  font-size:1.05em;

  font-style:italic;

  font-weight:400;
}


/* =========================================================
   ACTIONS
========================================================= */

#ep-home-hero-v3 .ep-h3-actions{
  display:flex;

  flex-wrap:wrap;

  gap:12px;
}

#ep-home-hero-v3 .ep-h3-btn{
  min-height:58px;

  display:inline-flex;

  align-items:center;

  justify-content:center;

  gap:10px;

  padding:16px 28px;

  border:1px solid transparent;

  border-radius:999px;

  font-size:11px;

  font-weight:700;

  line-height:1.25;

  letter-spacing:.11em;

  text-align:center;

  text-decoration:none!important;

  text-transform:uppercase;

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

#ep-home-hero-v3 .ep-h3-btn:hover{
  transform:translateY(-2px);
}

#ep-home-hero-v3 .ep-h3-btn-primary{
  color:var(--navy)!important;

  background:var(--ivory);

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

#ep-home-hero-v3 .ep-h3-btn-primary:hover{
  background:var(--gold-light);

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

#ep-home-hero-v3 .ep-h3-btn-secondary{
  color:#fff!important;

  border-color:
    rgba(255,255,255,.42);

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

  backdrop-filter:blur(10px);
}


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

#ep-home-hero-v3 .ep-h3-note{
  display:flex;

  align-items:center;

  gap:9px;

  margin:17px 0 0;

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

  font-size:12.5px;

  line-height:1.55;
}

#ep-home-hero-v3 .ep-h3-note:before{
  content:"";

  width:5px;

  height:5px;

  border-radius:50%;

  background:var(--gold);
}


/* =========================================================
   EXPERTISE DESKTOP
========================================================= */

#ep-home-hero-v3 .ep-h3-expertise{
  align-self:center;

  padding-left:37px;

  border-left:
    1px solid
    rgba(255,255,255,.21);
}

#ep-home-hero-v3 .ep-h3-expertise-label{
  margin:0 0 24px;

  color:var(--gold-light);

  font-size:10px;

  font-weight:700;

  letter-spacing:.18em;

  text-transform:uppercase;
}

#ep-home-hero-v3 .ep-h3-exp{
  display:grid;

  grid-template-columns:
    37px
    1fr;

  gap:12px;

  padding:17px 0;

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

#ep-home-hero-v3 .ep-h3-exp-num{
  color:var(--gold-light);

  font-family:var(--serif);

  font-size:15px;

  font-style:italic;
}

#ep-home-hero-v3 .ep-h3-exp strong{
  display:block;

  margin:0 0 5px;

  color:#fff;

  font-family:var(--serif);

  font-size:22px;

  font-weight:400;

  line-height:1.18;
}

#ep-home-hero-v3 .ep-h3-exp span{
  display:block;

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

  font-size:13px;

  line-height:1.5;
}


/* =========================================================
   META DESKTOP
========================================================= */

#ep-home-hero-v3 .ep-h3-meta{
  max-width:940px;

  display:grid;

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

  margin-top:42px;

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

#ep-home-hero-v3 .ep-h3-meta-item{
  padding:
    20px
    23px
    0
    0;
}

#ep-home-hero-v3
.ep-h3-meta-item +
.ep-h3-meta-item{
  padding-left:23px;

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

#ep-home-hero-v3 .ep-h3-meta strong{
  display:block;

  margin-bottom:5px;

  color:var(--gold-light);

  font-family:var(--serif);

  font-size:18px;

  font-weight:400;

  line-height:1.2;
}

#ep-home-hero-v3 .ep-h3-meta span{
  display:block;

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

  font-size:12px;

  line-height:1.5;
}


/* =========================================================
   SCROLL
========================================================= */

#ep-home-hero-v3 .ep-h3-scroll{
  position:absolute;

  right:32px;

  bottom:34px;

  display:flex;

  align-items:center;

  gap:10px;

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

  font-size:9px;

  font-weight:600;

  letter-spacing:.16em;

  text-transform:uppercase;

  transform:rotate(-90deg);

  transform-origin:right bottom;
}

#ep-home-hero-v3 .ep-h3-scroll:before{
  content:"";

  width:35px;

  height:1px;

  background:
    rgba(255,255,255,.3);
}


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

@media(max-width:1050px){

  #ep-home-hero-v3 .ep-h3-shell{
    width:calc(100% - 56px);
  }

  #ep-home-hero-v3 .ep-h3-grid{
    grid-template-columns:
      1fr
      .48fr;

    gap:45px;
  }

  #ep-home-hero-v3 .ep-h3-expertise{
    padding-left:25px;
  }

}


/* =========================================================
   MOBILE — PREMIUM PHOTO + IVORY CARD
========================================================= */

@media(max-width:767px){


  /* HERO */

  #ep-home-hero-v3{
    min-height:auto;

    height:auto;

    display:block;

    overflow:visible;

    background:var(--ivory2);

    color:var(--navy);
  }



  /* =====================================================
     PHOTO DOMINANTE
  ====================================================== */

  #ep-home-hero-v3 .ep-h3-media{
    position:relative;

    inset:auto;

    z-index:0;

    width:100%;

    height:
      clamp(
        470px,
        64svh,
        620px
      );

    overflow:hidden;

    background:var(--navy);
  }


  #ep-home-hero-v3
  .ep-h3-media picture,
  #ep-home-hero-v3
  .ep-h3-media img{
    width:100%;

    height:100%;
  }


  #ep-home-hero-v3
  .ep-h3-media img{
    object-fit:cover;

    object-position:
      center 42%;

    transform:none;
  }



  /* =====================================================
     OVERLAY PHOTO
  ====================================================== */

  #ep-home-hero-v3 .ep-h3-overlay{
    position:absolute;

    top:0;
    left:0;
    right:0;
    bottom:auto;

    z-index:1;

    width:100%;

    height:
      clamp(
        470px,
        64svh,
        620px
      );

    background:

      linear-gradient(
        90deg,
        rgba(7,17,31,.10) 0%,
        rgba(7,17,31,.02) 25%,
        rgba(7,17,31,.02) 75%,
        rgba(7,17,31,.10) 100%
      ),

      linear-gradient(
        180deg,
        rgba(7,17,31,.10) 0%,
        rgba(7,17,31,.05) 30%,
        rgba(7,17,31,.08) 54%,
        rgba(7,17,31,.20) 72%,
        rgba(7,17,31,.52) 88%,
        rgba(7,17,31,.76) 100%
      );

    pointer-events:none;
  }



  /* =====================================================
     SHELL
  ====================================================== */

  #ep-home-hero-v3 .ep-h3-shell{
    position:relative;

    z-index:4;

    width:
      calc(100% - 30px);

    margin:
      -74px
      auto
      0;

    padding:
      0
      0
      24px;
  }


  #ep-home-hero-v3 .ep-h3-grid{
    display:block;
  }



  /* =====================================================
     PREMIUM IVORY CARD
  ====================================================== */

  #ep-home-hero-v3 .ep-h3-main{
    position:relative;

    width:100%;

    max-width:none;

    padding:
      25px
      21px
      21px;

    overflow:hidden;

    border:
      1px solid
      rgba(185,149,97,.66);

    border-radius:
      22px
      22px
      10px
      10px;

    background:
      linear-gradient(
        145deg,
        rgba(255,253,248,.985) 0%,
        rgba(248,243,234,.985) 100%
      );

    box-shadow:
      0 22px 55px
      rgba(7,17,31,.17),
      inset 0 0 0 1px
      rgba(255,255,255,.65);
  }



  /* SUBTLE GOLD DETAIL */

  #ep-home-hero-v3 .ep-h3-main:before{
    content:"";

    position:absolute;

    top:0;

    left:28px;

    width:88px;

    height:2px;

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



  /* =====================================================
     EYEBROW
  ====================================================== */

  #ep-home-hero-v3 .ep-h3-eyebrow{
    margin:
      0
      0
      11px;

    color:var(--gold-dark);

    font-size:9px;

    font-weight:700;

    line-height:1.3;

    letter-spacing:.12em;

    text-shadow:none;
  }


  #ep-home-hero-v3 .ep-h3-eyebrow:before{
    width:22px;

    flex:
      0
      0
      22px;

    background:var(--gold);
  }



  /* =====================================================
     TITLE
  ====================================================== */

  #ep-home-hero-v3 h1{
    width:100%;

    max-width:100%;

    margin:
      0
      0
      19px!important;

    color:
      var(--navy)!important;

    font-size:
      clamp(
        37px,
        10.2vw,
        47px
      )!important;

    line-height:.96!important;

    letter-spacing:
      -.043em!important;

    text-shadow:none!important;
  }


  #ep-home-hero-v3 h1 em{
    display:block;

    margin-top:3px;

    color:
      var(--gold-dark);

    font-size:.94em;

    line-height:.99;

    font-weight:300;
  }



  /* =====================================================
     HIDE NON-ESSENTIAL MOBILE CONTENT
  ====================================================== */

  #ep-home-hero-v3
  .ep-h3-intro,

  #ep-home-hero-v3
  .ep-h3-note,

  #ep-home-hero-v3
  .ep-h3-meta,

  #ep-home-hero-v3
  .ep-h3-expertise,

  #ep-home-hero-v3
  .ep-h3-scroll{
    display:none;
  }



  /* =====================================================
     ACTIONS
  ====================================================== */

  #ep-home-hero-v3 .ep-h3-actions{
    display:flex;

    flex-direction:column;

    align-items:stretch;

    gap:10px;
  }



  /* MAIN CTA */

  #ep-home-hero-v3 .ep-h3-btn{
    width:100%;

    min-height:52px;

    padding:
      14px
      18px;

    font-size:10px;
  }


  #ep-home-hero-v3 .ep-h3-btn-primary{
    border-color:var(--navy);

    background:var(--navy);

    color:#fff!important;

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


  #ep-home-hero-v3
  .ep-h3-btn-primary:hover{
    border-color:var(--gold-dark);

    background:var(--gold-dark);
  }



  /* SECONDARY LINK */

  #ep-home-hero-v3
  .ep-h3-btn-secondary{
    width:auto;

    align-self:center;

    min-height:auto;

    padding:
      5px
      8px
      0;

    border:0;

    border-radius:0;

    background:transparent;

    color:
      #66717c!important;

    backdrop-filter:none;

    font-size:9.5px;

    letter-spacing:.10em;
  }


  #ep-home-hero-v3
  .ep-h3-btn-secondary:hover{
    color:
      var(--gold-dark)!important;
  }

}



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

@media(max-width:390px){

  #ep-home-hero-v3 .ep-h3-media,
  #ep-home-hero-v3 .ep-h3-overlay{
    height:
      clamp(
        435px,
        61svh,
        550px
      );
  }


  #ep-home-hero-v3
  .ep-h3-media img{
    object-position:
      center 40%;
  }


  #ep-home-hero-v3
  .ep-h3-shell{
    width:
      calc(100% - 22px);

    margin-top:-62px;
  }


  #ep-home-hero-v3
  .ep-h3-main{
    padding:
      23px
      17px
      19px;
  }


  #ep-home-hero-v3 h1{
    font-size:
      clamp(
        34px,
        9.9vw,
        42px
      )!important;
  }

}



/* =========================================================
   REDUCED MOTION
========================================================= */

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

  #ep-home-hero-v3 *,
  #ep-home-hero-v3 *:before,
  #ep-home-hero-v3 *:after{
    transition:none!important;
  }

}