.contact-page {
  overflow: hidden;
}

.contact-page address {
  font-style: normal;
}

.contact-hero {
  padding-block: clamp(5.5rem, 11vw, 8.5rem) clamp(4rem, 8vw, 7.5rem);
}

.contact-hero__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--space-6);
  align-items: stretch;
}

.contact-hero__content {
  grid-column: 1 / span 6;
  min-width: 0;
  max-width: 35rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.contact-hero__content > * {
  min-width: 0;
  margin: 0;
}

.contact-hero__content h1 {
  font-size: clamp(3rem, 7vw, 5.5rem);
}

.contact-hero__content .lead {
  max-width: 34rem;
  font-size: 1.125rem;
}

.contact-hero__note {
  max-width: 32rem;
  font-size: var(--font-size-small);
}

.contact-hero__rule,
.contact-location__rule {
  width: min(100%, 9.5rem);
  height: 1px;
  background: var(--color-accent);
}

.contact-hero__cta {
  width: auto;
}

.contact-hero__space {
  grid-column: 7 / span 6;
  min-width: 0;
  position: relative;
  border-inline-start: 1px solid color-mix(in srgb, var(--color-deep-line) 75%, transparent);
}

.contact-hero__space span {
  position: absolute;
  top: 15%;
  bottom: 5%;
  left: var(--space-6);
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--color-accent), transparent);
  opacity: 0.7;
}

.contact-direct__layout {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-6);
}

.contact-direct__intro {
  grid-column: 1 / span 7;
  min-width: 0;
}

.contact-direct__intro p:not(.eyebrow) {
  max-width: 38.75rem;
}

.contact-direct__cards {
  grid-column: 1 / -1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.contact-channel {
  min-width: 0;
  min-height: 21rem;
  padding: var(--space-6);
  border: var(--border-default);
  border-radius: var(--radius-panel);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.contact-channel > * {
  min-width: 0;
  margin: 0;
}

.contact-channel:hover {
  border-color: var(--color-accent);
  background-color: color-mix(in srgb, var(--color-emerald-slate) 98%, var(--color-emerald));
}

.contact-channel--phone {
  background: var(--color-emerald-slate);
}

.contact-channel--email {
  background: var(--color-dark-slate);
}

.contact-channel--email:hover {
  background-color: color-mix(in srgb, var(--color-dark-slate) 98%, var(--color-emerald));
}

.contact-channel__icon,
.contact-location__mark {
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  border: 1px solid var(--color-deep-line);
  border-radius: var(--radius-control);
}

.contact-channel__icon svg,
.contact-location__mark svg {
  width: 1.3rem;
  height: 1.3rem;
}

.contact-channel h3 {
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
}

.contact-channel__link {
  overflow-wrap: anywhere;
  color: var(--color-crisp-white);
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 3vw, 2rem);
  font-weight: 650;
  line-height: 1.15;
}

.contact-channel p:last-child {
  max-width: 32rem;
  margin-top: auto;
}

.contact-direct__guidance {
  grid-column: 1 / -1;
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-4) 0 0 var(--space-5);
  border-inline-start: 2px solid var(--color-accent);
}

.contact-direct__guidance > * {
  min-width: 0;
  margin: 0;
}

.contact-direct__guidance > span {
  color: var(--color-accent);
  font-size: var(--font-size-meta);
  font-weight: 800;
  letter-spacing: 0.08em;
}

.contact-direct__guidance p {
  max-width: 46rem;
}

.contact-location {
  background: color-mix(in srgb, var(--color-emerald-slate) 38%, var(--color-midnight-charcoal));
}

.contact-location__intro {
  max-width: 40rem;
}

.contact-location__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.contact-location__address-panel {
  grid-column: 1 / span 8;
  min-width: 0;
  padding: clamp(var(--space-5), 4vw, var(--space-7));
  border: var(--border-default);
  border-radius: var(--radius-panel);
  background: var(--color-emerald-slate);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
}

.contact-location__address-panel > * {
  min-width: 0;
  margin: 0;
}

.contact-location__address-panel address {
  max-width: 45rem;
  color: var(--color-crisp-white);
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 3.2vw, 2rem);
  font-weight: 650;
  line-height: 1.13;
}

.contact-location__arrival {
  max-width: 27rem;
}

.contact-location__meta {
  grid-column: 9 / span 4;
  min-width: 0;
  padding: var(--space-6);
  border: var(--border-default);
  border-radius: var(--radius-panel);
  background: var(--color-dark-slate);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-5);
}

.contact-location__meta > * {
  min-width: 0;
  margin: 0;
}

.contact-location__meta-item {
  padding-bottom: var(--space-4);
  border-bottom: var(--border-default);
}

.contact-location__meta-item > * {
  margin: 0;
}

.contact-location__meta-item .eyebrow {
  margin-bottom: var(--space-2);
}

.contact-location__meta-item p:last-child {
  color: var(--color-crisp-white);
  font-family: var(--font-heading);
  font-size: 1.45rem;
  font-weight: 650;
  line-height: 1.15;
}

.contact-location__meta-copy {
  max-width: 26rem;
  font-size: var(--font-size-small);
}

.contact-booking__intro {
  max-width: 35rem;
}

.contact-booking__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: start;
  margin-top: var(--space-6);
}

.contact-form {
  grid-column: 1 / span 8;
  min-width: 0;
  padding: clamp(var(--space-5), 4vw, var(--space-7));
  border: var(--border-accent);
  border-radius: var(--radius-panel);
  background: var(--color-dark-slate);
  box-shadow: var(--shadow-deep);
}

.contact-form__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.contact-field {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
}

.contact-field--full {
  grid-column: 1 / -1;
}

.contact-field label,
.contact-field p {
  min-width: 0;
  margin: 0;
}

.contact-field__optional {
  color: var(--color-muted-stone);
  font-weight: 500;
}

.contact-field input,
.contact-field select,
.contact-field textarea {
  min-width: 0;
  min-height: 3rem;
}

.contact-field textarea {
  min-height: 9rem;
}

.contact-field__help {
  color: var(--color-muted-stone);
  font-size: var(--font-size-small);
}

.contact-field__error {
  display: none;
  color: #f0c29a;
  font-size: var(--font-size-small);
  line-height: 1.45;
}

.contact-field.is-invalid .contact-field__error,
.contact-form__consent.is-invalid .contact-field__error {
  display: block;
}

.contact-field.is-invalid input,
.contact-field.is-invalid select,
.contact-field.is-invalid textarea,
.contact-form__consent.is-invalid .contact-consent {
  border-color: var(--color-amber);
}

.contact-form__consent {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: var(--border-default);
}

.contact-form__consent > * {
  min-width: 0;
  margin: 0;
}

.contact-consent {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  margin: 0;
  padding: var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  color: var(--color-text-muted);
  font-weight: 500;
}

.contact-consent input {
  margin-top: 0.22rem;
}

.contact-form__submit {
  width: auto;
  min-width: 11.5rem;
}

.contact-form__status {
  display: none;
  margin-top: var(--space-5);
  padding: var(--space-4);
  border: 1px solid var(--color-emerald);
  border-radius: var(--radius-control);
  background: color-mix(in srgb, var(--color-emerald) 18%, var(--color-dark-slate));
  color: var(--color-crisp-white);
}

.contact-form__status.is-visible {
  display: block;
}

.contact-booking__tips {
  grid-column: 9 / span 4;
  min-width: 0;
  padding: var(--space-6);
  border: var(--border-default);
  border-radius: var(--radius-panel);
  background: var(--color-emerald-slate);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-4);
}

.contact-booking__tips > * {
  min-width: 0;
  margin: 0;
}

.contact-booking__tips h3 {
  font-size: clamp(1.7rem, 2.5vw, 2rem);
}

.contact-booking__tips ol {
  display: grid;
  gap: var(--space-4);
  padding: 0;
  list-style: none;
}

.contact-booking__tips li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
}

.contact-booking__tips li > * {
  min-width: 0;
  margin: 0;
}

.contact-booking__tips li > span {
  color: var(--color-accent);
  font-size: var(--font-size-meta);
  font-weight: 800;
  letter-spacing: 0.08em;
}

.contact-booking__tips li p,
.contact-booking__tips-note {
  max-width: 20.625rem;
  font-size: var(--font-size-small);
}

.contact-booking__tips-note {
  padding-top: var(--space-4);
  border-top: var(--border-default);
}

.contact-occasions {
  background: color-mix(in srgb, var(--color-emerald-slate) 28%, var(--color-midnight-charcoal));
}

.contact-occasions__intro {
  max-width: 33.75rem;
}

.contact-occasions__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: stretch;
  margin-top: var(--space-6);
}

.contact-occasion {
  min-width: 0;
  padding: var(--space-5);
  border: var(--border-default);
  border-radius: var(--radius-panel);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.contact-occasion > * {
  min-width: 0;
  margin: 0;
}

.contact-occasion--table {
  background: transparent;
}

.contact-occasion--event {
  background: var(--color-emerald-slate);
}

.contact-occasion--salon {
  background: var(--color-dark-slate);
  border-top: 2px solid var(--color-amber);
}

.contact-occasion__number {
  color: var(--color-accent);
  font-size: var(--font-size-meta);
  font-weight: 800;
  letter-spacing: 0.08em;
}

.contact-occasion h3 {
  font-size: 1.5rem;
}

.contact-occasion h3 a {
  color: var(--color-crisp-white);
  text-decoration-color: color-mix(in srgb, var(--color-accent) 65%, transparent);
}

.contact-occasion p {
  max-width: 21.25rem;
}

.contact-occasions__outro {
  max-width: 38rem;
  margin-top: var(--space-6);
  padding-left: var(--space-4);
  border-inline-start: 2px solid var(--color-accent);
}

.contact-closing {
  padding-top: clamp(var(--space-8), 9vw, var(--space-10));
}

.contact-closing__panel {
  width: min(100%, 47.5rem);
  min-width: 0;
  margin-inline: auto;
  padding: clamp(var(--space-6), 5vw, var(--space-8));
  border: var(--border-default);
  border-top-color: var(--color-accent);
  border-top-width: 2px;
  border-radius: var(--radius-panel);
  background: var(--color-emerald-slate);
  box-shadow: var(--shadow-deep);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
}

.contact-closing__panel > * {
  min-width: 0;
  margin: 0;
}

.contact-closing__panel p:not(.eyebrow) {
  max-width: 31.25rem;
  color: var(--color-crisp-white);
}

.contact-closing__actions {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

.contact-closing__actions > * {
  width: auto;
  min-width: 0;
}

@media (max-width: 65rem) {
  .contact-hero__grid,
  .contact-direct__layout,
  .contact-location__grid,
  .contact-booking__grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .contact-hero__content {
    grid-column: 1 / -1;
    max-width: 39rem;
  }

  .contact-hero__space {
    display: none;
  }

  .contact-direct__intro {
    grid-column: 1 / -1;
  }

  .contact-location__address-panel {
    grid-column: 1 / span 4;
  }

  .contact-location__meta {
    grid-column: 5 / span 2;
  }

  .contact-booking__grid {
    gap: var(--space-5);
  }

  .contact-form {
    grid-column: 1 / span 4;
  }

  .contact-booking__tips {
    grid-column: 5 / span 2;
  }

  .contact-occasions__grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .contact-occasion--table,
  .contact-occasion--event {
    grid-column: span 3;
  }

  .contact-occasion--salon {
    grid-column: 1 / -1;
  }

  .contact-occasion--salon p {
    max-width: 34rem;
  }
}

@media (max-width: 55rem) {
  .contact-booking__grid {
    grid-template-columns: 1fr;
  }

  .contact-form,
  .contact-booking__tips {
    grid-column: 1;
  }

  .contact-booking__tips li p,
  .contact-booking__tips-note {
    max-width: 32rem;
  }
}

@media (max-width: 51.25rem) {
  .contact-location__grid {
    grid-template-columns: 1fr;
  }

  .contact-location__address-panel,
  .contact-location__meta {
    grid-column: 1;
  }

  .contact-location__meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contact-location__meta-copy {
    grid-column: 1 / -1;
  }
}

@media (max-width: 45rem) {
  .contact-hero {
    padding-block: var(--space-8) var(--space-7);
  }

  .contact-hero__content {
    gap: var(--space-4);
  }

  .contact-hero__content h1 {
    font-size: clamp(3rem, 12vw, 4rem);
  }

  .contact-hero__content .lead {
    font-size: 1.0625rem;
  }

  .contact-hero__cta {
    width: auto;
  }

  .contact-direct__cards,
  .contact-occasions__grid {
    grid-template-columns: 1fr;
  }

  .contact-channel {
    min-height: 0;
  }

  .contact-channel__link {
    font-size: clamp(1.35rem, 7vw, 1.7rem);
  }

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

  .contact-location__meta-copy {
    grid-column: 1;
  }

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

  .contact-field--full {
    grid-column: 1;
  }

  .contact-form__submit,
  .contact-closing__actions,
  .contact-closing__actions > * {
    width: 100%;
  }

  .contact-closing__panel {
    align-items: stretch;
  }

  .contact-closing__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .contact-closing__actions > * {
    justify-content: center;
  }

  .contact-occasion--table,
  .contact-occasion--event,
  .contact-occasion--salon {
    grid-column: 1;
  }
}