/* Moon Garden contact page: a quiet path from arrival to conversation. */

.contact-page {
  --contact-ink: #6c5a43;
  --contact-gold: #a9824c;
  --contact-line: rgba(167, 128, 72, 0.25);
  background: #fbf7ef;
}

.contact-hero {
  position: relative;
  min-height: clamp(520px, 68svh, 720px);
  margin-top: var(--header-height, 74px);
  overflow: hidden;
  background: #eee7d8;
}

.contact-hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.contact-hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 250, 240, 0.82) 0%, rgba(255, 250, 240, 0.45) 31%, rgba(255, 250, 240, 0.04) 60%),
    linear-gradient(0deg, rgba(78, 58, 35, 0.08), transparent 40%);
}

.contact-hero-copy {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: clamp(36px, 10vw, 170px);
  width: min(520px, 42vw);
  color: #735a38;
  text-align: center;
  transform: translateY(-50%);
  text-shadow: 0 2px 18px rgba(255, 252, 243, 0.9);
}

.contact-hero-copy p {
  margin: 0 0 5px;
  color: #9b7543;
  font-family: var(--font-en-serif);
  font-size: clamp(19px, 2vw, 28px);
  font-style: italic;
  letter-spacing: 0.04em;
}

.contact-hero-copy h1 {
  margin: 0;
  font-size: clamp(52px, 6.2vw, 88px);
  font-weight: 400;
  letter-spacing: 0.16em;
}

.contact-hero-copy span {
  display: block;
  margin-top: 16px;
  color: #b9955e;
  font-size: 25px;
}

.contact-page .contact-page-main {
  position: relative;
  min-height: 0;
  padding: clamp(72px, 8vw, 112px) 0 clamp(88px, 9vw, 128px);
  background:
    radial-gradient(circle at 8% 18%, rgba(218, 226, 195, 0.24), transparent 24rem),
    radial-gradient(circle at 92% 72%, rgba(237, 215, 198, 0.28), transparent 25rem),
    linear-gradient(180deg, #fffaf2, #f9f4e9);
}

.contact-page .contact-page-main::before,
.contact-page .contact-page-main::after {
  content: "";
  position: absolute;
  width: min(260px, 24vw);
  aspect-ratio: 1;
  pointer-events: none;
  opacity: 0.16;
  background: url("assets/images/contact-letter.svg") center / contain no-repeat;
}

.contact-page .contact-page-main::before {
  top: 4%;
  left: -5%;
  transform: rotate(-18deg);
}

.contact-page .contact-page-main::after {
  right: -6%;
  bottom: 5%;
  transform: rotate(20deg);
}

.contact-page .service-v2-booking-inner {
  position: relative;
  z-index: 1;
  max-width: 1040px;
}

.contact-page .service-v2-booking h2 {
  margin: 0;
  color: var(--service-v2-gold-deep);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 400;
  letter-spacing: 0.12em;
}

.contact-page-intro {
  max-width: 760px !important;
  margin-top: 22px !important;
  margin-inline: auto !important;
  color: #75664f;
  font-size: 16px;
  line-height: 2.05;
  text-align: center;
}

.contact-botanical-divider {
  display: block;
  margin: 24px auto 0;
  color: #b6925b;
  font-size: 24px;
}

.contact-page .service-v2-contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-top: clamp(42px, 5vw, 62px);
}

.contact-page .service-v2-contact-card {
  min-height: 245px;
  padding: 30px 34px;
  border-color: var(--contact-line);
  border-radius: 6px;
  background:
    linear-gradient(rgba(255, 253, 247, 0.94), rgba(250, 244, 232, 0.9)),
    radial-gradient(circle at top, rgba(219, 226, 199, 0.4), transparent 14rem);
  box-shadow: 0 16px 42px rgba(102, 77, 42, 0.08);
}

.contact-page .service-v2-contact-card[data-contact-channel="calendly"] {
  background: linear-gradient(155deg, rgba(255, 252, 246, 0.97), rgba(237, 225, 213, 0.86));
}

.contact-page .service-v2-contact-card[data-contact-channel="email"] {
  background: linear-gradient(155deg, rgba(255, 253, 248, 0.97), rgba(230, 237, 216, 0.86));
}

.contact-page button.service-v2-contact-card[data-contact-message-toggle] {
  display: flex;
  min-height: 190px;
  grid-column: 1 / -1;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  background:
    linear-gradient(90deg, rgba(255, 253, 247, 0.97), rgba(246, 240, 225, 0.9)),
    radial-gradient(circle at 15% 50%, rgba(220, 229, 201, 0.42), transparent 16rem);
}

.contact-page button.service-v2-contact-card[data-contact-message-toggle] .service-v2-contact-action {
  align-self: auto;
}

.contact-garden-symbol {
  display: block;
  width: 76px;
  height: 76px;
  flex: 0 0 auto;
  margin-bottom: 14px;
  border: 1px solid rgba(170, 132, 76, 0.24);
  border-radius: 50%;
  background-color: rgba(255, 253, 247, 0.62);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 58px 58px;
  box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.35);
}

.contact-garden-symbol-message { background-image: url("assets/images/contact-message.svg"); }
.contact-garden-symbol-calendar { background-image: url("assets/images/contact-calendar.svg"); }
.contact-garden-symbol-letter { background-image: url("assets/images/contact-letter.svg"); }

.contact-page .service-v2-contact-title {
  font-size: 24px;
}

.contact-page .service-v2-contact-description {
  margin-top: 13px;
}

.contact-page .service-v2-message-panel {
  position: relative;
  width: 100%;
  max-width: none;
  grid-column: 1 / -1;
  margin: 0;
  padding: clamp(36px, 5vw, 60px);
  overflow: hidden;
  border-color: rgba(173, 135, 78, 0.25);
  background:
    radial-gradient(circle at 100% 0, rgba(220, 229, 202, 0.32), transparent 19rem),
    radial-gradient(circle at 0 100%, rgba(240, 215, 198, 0.28), transparent 17rem),
    rgba(255, 252, 246, 0.97);
}

.contact-page .service-v2-message-panel::before,
.contact-page .service-v2-message-panel::after {
  content: "❦";
  position: absolute;
  color: rgba(176, 139, 83, 0.22);
  font-size: 34px;
}

.contact-page .service-v2-message-panel::before { top: 17px; left: 22px; }
.contact-page .service-v2-message-panel::after { right: 22px; bottom: 17px; transform: rotate(180deg); }

.contact-page .service-v2-message-panel > h2 {
  margin: 0;
  color: #80623c;
  font-size: clamp(29px, 4vw, 43px);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-align: center;
}

.contact-page .service-v2-message-panel > p:not([hidden]) {
  max-width: 680px;
  margin: 14px auto 30px;
  text-align: center;
}

.contact-page .service-v2-message-panel form {
  max-width: 760px;
  margin-inline: auto;
}

@media (max-width: 760px) {
  .contact-hero {
    min-height: 540px;
    margin-top: var(--header-height, 68px);
  }

  .contact-hero > img {
    object-position: 65% center;
  }

  .contact-hero-shade {
    background:
      linear-gradient(0deg, rgba(62, 46, 29, 0.42) 0%, rgba(62, 46, 29, 0.04) 55%),
      linear-gradient(180deg, rgba(255, 252, 244, 0.08), transparent 40%);
  }

  .contact-hero-copy {
    top: auto;
    bottom: 46px;
    left: 24px;
    width: calc(100% - 48px);
    color: #fff9eb;
    transform: none;
    text-shadow: 0 2px 18px rgba(54, 38, 22, 0.7);
  }

  .contact-hero-copy p,
  .contact-hero-copy span {
    color: #f3dfb7;
  }

  .contact-hero-copy h1 {
    font-size: clamp(45px, 14vw, 62px);
  }

  .contact-page .contact-page-main {
    padding-block: 64px 86px;
  }

  .contact-page .service-v2-contact-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .contact-page button.service-v2-contact-card[data-contact-message-toggle] {
    display: flex;
    min-height: 250px;
    grid-column: auto;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }

  .contact-page button.service-v2-contact-card[data-contact-message-toggle] .service-v2-contact-action {
    align-self: auto;
  }

  .contact-page .service-v2-message-panel {
    grid-column: auto;
    padding: 36px 20px 42px;
  }

  .contact-page .service-v2-form-grid {
    grid-template-columns: 1fr;
  }

  .contact-page .contact-page-main::before,
  .contact-page .contact-page-main::after {
    width: 150px;
    opacity: 0.1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-page .service-v2-message-panel {
    animation: none;
  }
}