@charset "UTF-8";

.contact {
  
  background: #ffffff;
  
}

.contact .eyebrow--light { color: var(--wood-deep); }
.contact .title--light { color: var(--ink); }
.contact__text { color: var(--ink-soft); }
.contact__hours { color: var(--ink-soft); }

.contact__tel {
  background: var(--sage-deep);
  
  border-radius: 999px;
  padding-inline: clamp(2rem, 5vw, 3.2rem);
  
  box-shadow: 0 8px 22px rgba(79, 97, 73, .22);
}
.contact__tel:hover,
.contact__tel:focus-visible {
  box-shadow: 0 12px 28px rgba(79, 97, 73, .3);
}
.contact__tel-number { color: #ffffff; }

@media (min-width: 1200px) {
  .contact { position: relative; }
  .contact .inner { position: relative; z-index: 1; }

  .contact::before,
  .contact::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: max(0px, calc((100% - 60rem) / 2));
    background-size: cover;
    background-position: center;
    opacity: .6;
    
    -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 26%, transparent 100%);
    mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 26%, transparent 100%);
    pointer-events: none;
  }

  .contact::before { left: 0;  background-image: url("../img/hero/29.webp"); }
  .contact::after  { right: 0; background-image: url("../img/hero/27.webp"); }
}