/* =========================================================
   LV CORRECTIVE SKIN PROGRAMS
   ========================================================= */

:root {
  --corrective-espresso: #281209;
  --corrective-brown: #402014;
  --corrective-gold: #cf9c4a;
  --corrective-gold-light: #edc978;
  --corrective-cream: #f8f3ec;
  --corrective-ivory: #fffaf4;
  --corrective-taupe: #cdbdad;
  --corrective-text: #38251c;
}


.page-corrective-skin {
  background:
    var(--corrective-cream);
  color:
    var(--corrective-text);
}


/* HERO */

.corrective-hero {
  position: relative;
  min-height: 640px;
  overflow: hidden;

  display: flex;
  align-items: center;

  background:
    #3a2115;
}


.corrective-hero-image {
  position: absolute;
  inset: 0;

  background:
    url("assets/images/facials.png")
    72% center / cover no-repeat;

  transform:
    scale(1.02);
}


.corrective-hero-overlay {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(248,243,236,.98) 0%,
      rgba(248,243,236,.91) 38%,
      rgba(248,243,236,.40) 61%,
      rgba(40,18,9,.05) 100%
    );
}


.corrective-hero-content {
  position: relative;
  z-index: 2;

  width:
    min(1180px, calc(100% - 48px));

  margin:
    0 auto;

  padding:
    90px 0;

  color:
    var(--corrective-text);
}


.corrective-eyebrow,
.corrective-section-kicker {
  margin:
    0 0 16px;

  font-family:
    "Montserrat",
    sans-serif;

  font-size:
    11px;

  font-weight:
    700;

  letter-spacing:
    .30em;

  color:
    #7d5738;
}


.corrective-hero h1 {
  max-width:
    620px;

  margin:
    0;

  font-family:
    "Cormorant Garamond",
    Georgia,
    serif;

  font-size:
    clamp(68px, 8vw, 116px);

  font-weight:
    500;

  line-height:
    .82;

  letter-spacing:
    -.045em;
}


.corrective-hero-copy {
  max-width:
    570px;

  margin:
    32px 0 30px;

  font-size:
    17px;

  line-height:
    1.7;
}


.corrective-primary-button,
.corrective-secondary-button,
.program-book-button {
  text-decoration:
    none;

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}


.corrective-primary-button {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    52px;

  padding:
    0 28px;

  border:
    1px solid
    var(--corrective-gold);

  background:
    linear-gradient(
      135deg,
      #edc776,
      #cf9840
    );

  color:
    #29140b;

  font-family:
    "Montserrat",
    sans-serif;

  font-size:
    10px;

  font-weight:
    700;

  letter-spacing:
    .12em;

  text-transform:
    uppercase;
}


.corrective-primary-button:hover {
  transform:
    translateY(-2px);

  box-shadow:
    0 12px 25px
    rgba(91,52,22,.18);
}


/* INTRO */

.corrective-intro {
  padding:
    78px 24px
    34px;

  text-align:
    center;
}


.corrective-container {
  width:
    min(790px, 100%);

  margin:
    0 auto;
}


.corrective-intro h2 {
  margin:
    0 0 18px;

  font-family:
    "Cormorant Garamond",
    Georgia,
    serif;

  font-size:
    clamp(40px, 6vw, 64px);

  font-weight:
    500;

  line-height:
    .98;
}


.corrective-intro p:last-child {
  max-width:
    650px;

  margin:
    0 auto;

  line-height:
    1.8;

  color:
    #725d51;
}


/* PROGRAMS */

.corrective-programs {
  padding:
    42px 26px
    80px;
}


.corrective-program-grid {
  width:
    min(1240px, 100%);

  margin:
    0 auto;

  display:
    grid;

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

  gap:
    22px;
}


.program-card {
  overflow:
    hidden;

  display:
    flex;

  flex-direction:
    column;

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

  border:
    1px solid
    rgba(117,81,53,.17);

  border-radius:
    22px;

  box-shadow:
    0 18px 42px
    rgba(65,40,26,.08);
}


.program-image {
  position:
    relative;

  min-height:
    245px;

  background-position:
    center;

  background-size:
    cover;
}


.program-image::after {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  background:
    linear-gradient(
      180deg,
      transparent 45%,
      rgba(39,19,9,.20)
    );
}


.program-image-clear {
  background-image:
    url("assets/images/facials.png");

  background-position:
    38% center;
}


.program-image-tone {
  background-image:
    url("assets/images/hydro-facials-1.png");
}


.program-image-renew {
  background-image:
    url("assets/images/hydro-facials.png");
}


.program-badge {
  position:
    absolute;

  z-index:
    2;

  left:
    20px;

  bottom:
    16px;

  padding:
    7px 13px;

  border:
    1px solid
    rgba(100,67,44,.38);

  border-radius:
    999px;

  background:
    rgba(255,250,244,.94);

  color:
    #4d3324;

  font-family:
    "Montserrat",
    sans-serif;

  font-size:
    9px;

  font-weight:
    700;

  letter-spacing:
    .16em;
}


.program-content {
  flex:
    1;

  display:
    flex;

  flex-direction:
    column;

  padding:
    27px 23px
    24px;
}


.program-content h2 {
  margin:
    0;

  font-family:
    "Cormorant Garamond",
    Georgia,
    serif;

  font-size:
    clamp(36px, 3.3vw, 51px);

  line-height:
    .84;

  font-weight:
    500;
}


.program-content h2 span {
  display:
    block;
}


.program-concerns {
  min-height:
    44px;

  margin:
    18px 0;

  font-family:
    "Montserrat",
    sans-serif;

  font-size:
    9px;

  font-weight:
    600;

  line-height:
    1.6;

  letter-spacing:
    .14em;

  color:
    #755d4e;
}


.program-meta {
  display:
    grid;

  grid-template-columns:
    auto 1fr auto;

  gap:
    14px;

  align-items:
    center;

  padding:
    14px 0;

  border-top:
    1px solid
    rgba(87,58,38,.25);

  border-bottom:
    1px solid
    rgba(87,58,38,.25);

  font-family:
    "Montserrat",
    sans-serif;

  font-size:
    11px;

  letter-spacing:
    .13em;
}


.program-meta span {
  height:
    1px;

  background:
    rgba(90,58,38,.22);
}


.program-description {
  margin:
    19px 0;

  line-height:
    1.65;

  font-size:
    14px;

  color:
    #695549;
}


.program-includes {
  margin-top:
    auto;

  padding:
    20px;

  border-radius:
    16px;

  background:
    rgba(232,220,207,.42);
}


.program-includes h3 {
  margin:
    0 0 13px;

  font-family:
    "Montserrat",
    sans-serif;

  font-size:
    10px;

  letter-spacing:
    .17em;

  text-transform:
    uppercase;
}


.program-includes ul {
  padding:
    0;

  margin:
    0;

  list-style:
    none;
}


.program-includes li {
  position:
    relative;

  padding:
    4px 0
    4px 25px;

  font-size:
    12px;

  line-height:
    1.45;
}


.program-includes li::before {
  content:
    "✓";

  position:
    absolute;

  left:
    0;

  top:
    3px;

  color:
    #8d5d30;

  font-weight:
    700;
}


.program-book-button {
  min-height:
    50px;

  margin-top:
    20px;

  padding:
    0 15px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    999px;

  background:
    #382016;

  color:
    #fffaf3;

  font-family:
    "Montserrat",
    sans-serif;

  font-size:
    9px;

  font-weight:
    600;

  letter-spacing:
    .08em;

  text-align:
    center;

  text-transform:
    uppercase;
}


.program-book-button:hover {
  transform:
    translateY(-2px);

  background:
    #4a291a;
}


/* TRUST */

.corrective-trust {
  padding:
    0 26px
    86px;
}


.corrective-trust-grid {
  width:
    min(1180px, 100%);

  margin:
    0 auto;

  padding:
    35px 30px;

  display:
    grid;

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

  gap:
    0;

  border:
    1px solid
    rgba(107,73,48,.15);

  border-radius:
    22px;

  background:
    #eee4d9;
}


.corrective-trust article {
  display:
    grid;

  grid-template-columns:
    62px 1fr;

  gap:
    17px;

  padding:
    5px 27px;
}


.corrective-trust article + article {
  border-left:
    1px solid
    rgba(94,61,40,.16);
}


.trust-icon {
  width:
    58px;

  height:
    58px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    #9b6a3e;

  border-radius:
    50%;

  color:
    #89562e;

  font-size:
    24px;
}


.corrective-trust h3 {
  margin:
    0 0 8px;

  font-family:
    "Montserrat",
    sans-serif;

  font-size:
    10px;

  letter-spacing:
    .17em;

  text-transform:
    uppercase;
}


.corrective-trust p {
  margin:
    0;

  font-size:
    12px;

  line-height:
    1.55;

  color:
    #685448;
}


/* CTA */

.corrective-cta {
  padding:
    86px 24px;

  color:
    #fff7ec;

  text-align:
    center;

  background:
    linear-gradient(
      145deg,
      #261007,
      #452216
    );
}


.corrective-cta-inner {
  width:
    min(750px, 100%);

  margin:
    0 auto;
}


.corrective-cta .corrective-section-kicker {
  color:
    #e8b65c;
}


.corrective-cta h2 {
  margin:
    0;

  font-family:
    "Cormorant Garamond",
    Georgia,
    serif;

  font-size:
    clamp(45px, 6vw, 70px);

  font-weight:
    500;

  line-height:
    .96;
}


.corrective-cta p {
  max-width:
    570px;

  margin:
    22px auto
    28px;

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

  line-height:
    1.7;
}


.corrective-cta-actions {
  display:
    flex;

  justify-content:
    center;

  flex-wrap:
    wrap;

  gap:
    12px;
}


.corrective-secondary-button {
  min-height:
    52px;

  padding:
    0 28px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid
    rgba(234,190,100,.54);

  color:
    #f2c971;

  font-family:
    "Montserrat",
    sans-serif;

  font-size:
    10px;

  font-weight:
    700;

  letter-spacing:
    .12em;

  text-transform:
    uppercase;
}


/* TABLET */

@media (max-width: 980px) {

  .corrective-program-grid {
    grid-template-columns:
      1fr;
  }


  .program-card {
    width:
      min(650px, 100%);

    margin:
      0 auto;
  }


  .program-image {
    min-height:
      320px;
  }


  .corrective-trust-grid {
    grid-template-columns:
      1fr;

    gap:
      24px;
  }


  .corrective-trust article + article {
    border-left:
      none;

    border-top:
      1px solid
      rgba(94,61,40,.16);

    padding-top:
      28px;
  }

}


/* MOBILE */

@media (max-width: 820px) {

  .page-corrective-skin {
    padding-top:
      82px;
  }


  .corrective-hero {
    min-height:
      760px;

    align-items:
      flex-end;
  }


  .corrective-hero-image {
    background-position:
      65% center;
  }


  .corrective-hero-overlay {
    background:
      linear-gradient(
        180deg,
        rgba(40,18,9,.05) 0%,
        rgba(40,18,9,.10) 37%,
        rgba(31,13,6,.80) 72%,
        rgba(31,13,6,.96) 100%
      );
  }


  .corrective-hero-content {
    width:
      auto;

    margin:
      0 18px;

    padding:
      50px 0
      44px;

    color:
      white;
  }


  .corrective-eyebrow {
    color:
      #efc66f;
  }


  .corrective-hero h1 {
    max-width:
      520px;

    font-size:
      clamp(57px, 15vw, 82px);

    line-height:
      .83;
  }


  .corrective-hero-copy {
    max-width:
      520px;

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


  .corrective-intro {
    padding:
      60px 22px
      24px;
  }


  .corrective-programs {
    padding:
      30px 14px
      58px;
  }


  .program-card {
    border-radius:
      18px;
  }


  .program-image {
    min-height:
      255px;
  }


  .program-content {
    padding:
      24px 19px
      20px;
  }


  .program-content h2 {
    font-size:
      43px;
  }


  .program-includes {
    padding:
      17px;
  }


  .corrective-trust {
    padding:
      0 14px
      65px;
  }


  .corrective-trust-grid {
    padding:
      25px 18px;

    border-radius:
      18px;
  }


  .corrective-trust article {
    grid-template-columns:
      50px 1fr;

    padding:
      3px 4px;
  }


  .trust-icon {
    width:
      48px;

    height:
      48px;
  }


  .corrective-cta {
    padding:
      70px 19px;
  }

}


@media (max-width: 480px) {

  .corrective-hero {
    min-height:
      700px;
  }


  .corrective-hero h1 {
    font-size:
      54px;
  }


  .corrective-hero-copy {
    font-size:
      14px;
  }


  .program-image {
    min-height:
      220px;
  }


  .program-content h2 {
    font-size:
      39px;
  }


  .program-meta {
    gap:
      8px;

    font-size:
      9px;
  }


  .program-includes li {
    font-size:
      11.5px;
  }

}