/* =========================================================
   LV BODY WAXING & FACIALS — CONTACT PAGE
   ========================================================= */

.contact-hero {
  min-height: 610px;

  display: flex;
  align-items: center;

  position: relative;
  overflow: hidden;

  background:
    linear-gradient(
      90deg,
      rgba(248,242,234,.98) 0%,
      rgba(248,242,234,.93) 42%,
      rgba(248,242,234,.30) 72%,
      rgba(248,242,234,.08) 100%
    ),
    url('assets/images/meet-care.png')
    70% center / cover no-repeat;
}

.contact-hero-inner {
  width: min(92%, 1160px);

  margin: auto;
}

.contact-copy {
  width: min(560px, 50%);
}

.contact-copy h1 {
  margin: 13px 0 20px;

  font-family: var(--serif);

  font-size: clamp(64px, 7vw, 94px);
  font-weight: 500;

  line-height: .9;

  color: var(--espresso);
}

.contact-copy p {
  max-width: 520px;

  color: #69564a;

  font-size: 14px;
  line-height: 1.85;
}

.contact-actions {
  margin-top: 30px;

  display: flex;
  flex-wrap: wrap;

  gap: 12px;
}

.contact-primary,
.contact-secondary {
  min-height: 51px;

  padding: 0 24px;

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

  text-decoration: none;

  font-size: 10px;
  font-weight: 700;

  letter-spacing: .07em;

  text-transform: uppercase;
}

.contact-primary {
  background:
    linear-gradient(
      135deg,
      #efcb79,
      #d69b3e,
      #eabd62
    );

  color: #211008;

  border: 1px solid #efd08c;
}

.contact-secondary {
  border: 1px solid var(--gold);

  color: var(--espresso);

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



.contact-details {
  padding: 95px 0;

  background: var(--cream);
}

.contact-details-inner {
  width: min(92%, 1100px);

  margin: auto;

  display: grid;

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

  gap: 22px;
}

.contact-card {
  min-height: 300px;

  padding: 34px 30px;

  background: var(--white);

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

.contact-card > span {
  color: var(--gold);

  font-size: 10px;
  font-weight: 700;

  letter-spacing: .14em;
}

.contact-card h2 {
  margin: 14px 0 16px;

  font-family: var(--serif);

  font-size: 35px;
  font-weight: 500;

  color: var(--espresso);
}

.contact-card a,
.contact-card address {
  color: var(--espresso);

  font-style: normal;

  font-family: var(--serif);

  font-size: 23px;
  line-height: 1.4;

  text-decoration: none;
}

.contact-card p {
  margin-top: 22px;

  color: var(--muted);

  font-size: 12px;
  line-height: 1.8;
}



.contact-cta {
  padding: 90px 20px;

  text-align: center;

  color: white;

  background:
    linear-gradient(
      135deg,
      #160b06,
      #321a0e
    );
}

.contact-cta h2 {
  margin: 10px auto 16px;

  font-family: var(--serif);

  font-size: clamp(46px,5vw,66px);

  font-weight: 500;
}

.contact-cta p {
  max-width: 580px;

  margin: 0 auto 27px;

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

  font-size: 13px;
}

.contact-cta > a {
  min-height: 52px;

  padding: 0 31px;

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

  color: #211008;

  background:
    linear-gradient(
      135deg,
      #efcb79,
      #d69b3e,
      #eabd62
    );

  border: 1px solid #efd08c;

  text-decoration: none;

  font-size: 10px;
  font-weight: 800;

  letter-spacing: .08em;

  text-transform: uppercase;
}



@media (max-width: 820px) {

  .contact-hero {
    min-height: 710px;

    align-items: flex-end;

    background:
      linear-gradient(
        180deg,
        rgba(25,12,7,.05) 0%,
        rgba(25,12,7,.10) 38%,
        rgba(25,12,7,.72) 74%,
        rgba(25,12,7,.91) 100%
      ),
      url('assets/images/meet-care.png')
      center center / cover no-repeat;
  }

  .contact-hero-inner {
    width: 100%;

    padding:
      0
      18px
      35px;
  }

  .contact-copy {
    width: 100%;
    max-width: 500px;

    padding: 22px 20px;

    background:
      linear-gradient(
        135deg,
        rgba(49,25,14,.86),
        rgba(27,13,8,.75)
      );

    border:
      1px solid
      rgba(224,181,96,.34);

    backdrop-filter: blur(5px);
  }

  .contact-copy h1 {
    color: white;

    font-size: 52px;
  }

  .contact-copy p {
    color: rgba(255,255,255,.88);
  }

  .contact-details-inner {
    grid-template-columns: 1fr;
  }

}


@media (max-width: 520px) {

  .contact-actions {
    display: grid;

    grid-template-columns: 1fr;
  }

  .contact-primary,
  .contact-secondary {
    width: 100%;
  }

}