/* =========================================================
   ESTHETICAPLUS — PREMIUM HOME HERO
========================================================= */

#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);

}



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

#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);

}



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

#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;

}



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

#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){


  #ep-home-hero-v3{

    min-height:auto;

    height:auto;

    display:block;

    overflow:visible;

    background:var(--ivory2);

    color:var(--navy);

  }



  /* =====================================================
     DOMINANT PHOTO
  ====================================================== */

  #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;

  }



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

  #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;

  }

}