/* Homepage hero layout. */
.salon-site .hero-wide .hero-stage {
  --hero-stage-height: clamp(550px, 72svh, 640px);
  height: var(--hero-stage-height);
  background: #252129;
}
.salon-site .hero-wide .hero-type {
  max-width: 52%;
}
.salon-site .hero-copy { display: contents; }
.salon-site .hero-wide .hero-media { background: #252129; }
.salon-site .hero-atmosphere {
  left: auto;
  right: 0;
  width: calc(var(--hero-stage-height) * 1.5);
  transform: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%);
  mask-image: linear-gradient(90deg, transparent, #000 20%);
}
.salon-site .hero-atmosphere img {
  object-fit: contain;
  object-position: right top;
  animation: none;
  opacity: .78;
}
.salon-site .hero-wide .hero-media::after {
  background: linear-gradient(90deg, rgba(37, 33, 41, .94) 0%, rgba(37, 33, 41, .82) 23%, rgba(37, 33, 41, .46) 38%, transparent 62%),
    linear-gradient(0deg, rgba(25, 20, 31, .30), transparent 19%);
}
.salon-site-note {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 9px;
  margin: 0;
  padding: 10px 22px;
  background: #eee7ee;
  color: #55445f;
  font-size: 11px;
  line-height: 1.4;
  text-align: center;
}
.salon-site-note > span {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
}
@media (min-width: 761px) and (max-width: 1100px) {
  .salon-site .hero-wide h1 { font-size: 15vw; }
  .salon-site .hero-wide .hero-tagline { font-size: 25px; }
  .salon-site .hero-wide .hero-location { font-size: 14px; }
  .salon-site .hero-wide .hero-actions { gap: 15px; }
}
@media (max-width: 760px) {
  .salon-site .hero-wide { --mobile-title-overlap: clamp(64px, 19vw, 86px); }
  .salon-site .hero-wide .hero-stage { height: auto; }
  .salon-site .hero-wide .hero-grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    height: auto;
  }
  .salon-site .hero-wide .hero-visual {
    position: relative;
    order: -1;
    inset: auto;
    width: 100%;
    height: clamp(220px, 72vw, 300px);
    flex: none;
  }
  .salon-site .hero-atmosphere { width: 100%; left: 0; transform: none; -webkit-mask-image: none; mask-image: none; }
  .salon-site .hero-atmosphere img {
    object-fit: cover;
    object-position: right top;
    animation: none;
    opacity: .84;
  }
  .salon-site .hero-wide .hero-media::after {
    background: linear-gradient(0deg, #242139, rgba(36, 33, 57, .08) 16%, transparent 34%);
  }
  .salon-site .hero-wide .hero-type {
    width: 100%;
    max-width: none;
    margin-top: calc(-1 * var(--mobile-title-overlap));
    padding: 0 var(--gutter) 96px;
    background: linear-gradient(180deg, transparent, #242139 96px);
  }
  .salon-site .hero-copy { display: flow-root; width: 100%; }
  .salon-site .hero-wide .hero-name { font-size: 10px; }
  .salon-site .hero-wide h1 {
    font-size: clamp(90px, 28.5vw, 168px);
    margin: 9px 0 18px;
  }
  .salon-site .hero-wide .hero-tagline {
    font-size: 23px;
    max-width: none;
    padding-right: 0;
  }
  .salon-site .hero-wide .hero-location { margin-top: 6px; font-size: 13px; }
  .salon-site .hero-wide .hero-actions { margin-top: 19px; gap: 16px; }
  .salon-site .hero-wide .hero-actions .button { padding: 13px 17px; }
  .salon-site .hero-wide .hero-footer {
    position: relative;
    left: auto;
    right: auto;
    margin: 0 var(--gutter);
    min-height: 46px;
    padding: 12px 0;
  }
  .salon-site .hero-wide .hero-scroll-note { font-size: 10px; }
  .salon-site .hero-wide .hero-address { font-size: 10px; }
  .salon-site-note { font-size: 10px; padding: 9px 20px; }
}
/* Align the visible edge of the large H with the name and copy above/below. */
.salon-site .hero-wide h1 { margin-left: -.068em; }