/* ═══════════════════════════════════════════════════════════════
   PARK CITY 3 & 4 — CONTACT PAGE
   Cream hero, sticky info sidebar, editorial form with success
   and error states, and an after-hours emergency split.
   ═══════════════════════════════════════════════════════════════ */

.contact-hero .hero__eyebrow {
  color: var(--brass-deep);
}
.contact-hero .hero__eyebrow-line {
  background: var(--brass);
}

/* ──────────── 2. HERO ──────────── */
.contact-hero {
  position: relative;
  background: var(--bone);
  padding: clamp(140px, 20vh, 220px) var(--pad-x) clamp(80px, 12vh, 120px);
  overflow: hidden;
  isolation: isolate;
}
.contact-hero__grain {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.4;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/></svg>");
}
.contact-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(1200px, 90%);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hairline), transparent);
  pointer-events: none;
}

.contact-hero__inner {
  position: relative;
  max-width: var(--max-w);
  margin: 0 auto;
}

.contact-hero__title {
  font-family: var(--f-display);
  font-size: clamp(48px, 9vw, 152px);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--ink);
  margin: 36px 0 36px;
  max-width: 14ch;
}
.contact-hero__title .line {
  display: block;
  overflow: hidden;
}
.contact-hero__title .line > * {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1s var(--e-soft);
}
.contact-hero__title em {
  font-family: var(--f-italic);
  font-style: italic;
  color: var(--brass-deep);
}

.contact-hero__lede {
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 56ch;
  letter-spacing: -0.005em;
  margin-bottom: 56px;
}

.contact-hero__rule {
  width: 64px;
  height: 1px;
  background: var(--brass);
  margin: 0 0 28px;
}

/* Three quick-link cards in a row — same hairline pattern as
   .inquire__cards in styles.css, repeated here scoped to contact. */
.contact-hero__quick {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  max-width: 720px;
}
.contact-hero__quick-link {
  background: var(--bone);
  padding: 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: background 0.3s ease;
  text-decoration: none;
  color: inherit;
}
.contact-hero__quick-link:hover {
  background: var(--cream-100);
}
.contact-hero__quick-label {
  font-family: var(--f-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--taupe);
}
.contact-hero__quick-value {
  font-family: var(--f-display);
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
  transition: color 0.3s ease;
}
.contact-hero__quick-link:hover .contact-hero__quick-value {
  color: var(--brass-deep);
}

/* ──────────── 3. BODY GRID ──────────── */
.contact-body {
  background: var(--bone);
  padding: clamp(60px, 10vh, 120px) var(--pad-x) clamp(80px, 14vh, 160px);
  border-top: 1px solid var(--hairline-2);
  position: relative;
}

.contact-body__grid {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: clamp(48px, 6vw, 100px);
  align-items: start;
}

/* ──────────── 4. INFO SIDEBAR ──────────── */
.contact-info {
  align-self: stretch;
}
.contact-info__inner {
  position: sticky;
  top: 100px;
}
.contact-info__head {
  font-family: var(--f-display);
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 18px 0 24px;
}
.contact-info__head em {
  color: var(--brass-deep);
}
.contact-info__intro {
  font-family: var(--f-serif);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: 32px;
  max-width: 36ch;
}
.contact-info__intro strong {
  font-weight: 500;
  color: var(--ink);
}

.contact-info__list {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--hairline);
}
.contact-info__list > div {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 20px;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid var(--hairline-2);
}
.contact-info__list dt {
  font-family: var(--f-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--taupe);
  margin: 0;
}
.contact-info__list dd {
  font-family: var(--f-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
  line-height: 1.4;
  margin: 0;
}
.contact-info__list dd a {
  color: var(--ink);
  border-bottom: 1px solid var(--hairline);
  transition: color 0.3s ease, border-color 0.3s ease;
}
.contact-info__list dd a:hover {
  color: var(--brass-deep);
  border-bottom-color: var(--brass);
}
.contact-info__list dd em.serif-italic {
  color: var(--brass-deep);
  font-size: 17px;
}

.contact-info__minor {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline-2);
  font-family: var(--f-italic);
  font-style: italic;
  font-size: 14px;
  color: var(--taupe);
  line-height: 1.55;
}
.contact-info__minor a {
  color: var(--brass-deep);
  border-bottom: 1px solid var(--hairline);
  transition: color 0.3s ease, border-color 0.3s ease;
}
.contact-info__minor a:hover {
  color: var(--ink);
  border-bottom-color: var(--brass);
}

/* ──────────── 5. FORM WRAPPER ──────────── */
.contact-form-wrap {
  min-width: 0;
}
.contact-form-wrap__head {
  margin-bottom: 40px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--hairline);
}
.contact-form-wrap__title {
  font-family: var(--f-display);
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 14px 0 18px;
}
.contact-form-wrap__title em {
  color: var(--brass-deep);
}
.contact-form-wrap__lede {
  font-family: var(--f-serif);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  max-width: 52ch;
}
.contact-form-wrap__lede em {
  color: var(--ink);
}

/* ──────────── 6. FORM ──────────── */
.contact-form {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Honeypot — invisible to humans, attractive to bots */
.contact-form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

/* Field styles inherit from styles.css (.field). The styles.css
   :valid selector incorrectly raises the label for empty optional
   inputs (because empty optional fields are technically valid).
   Override here so the label stays in place when an optional input
   is empty and unfocused. The placeholder=" " in the markup makes
   :placeholder-shown reliably true when empty. */
.contact-form .field input:not([required]):placeholder-shown:not(:focus) + label,
.contact-form .field textarea:not([required]):placeholder-shown:not(:focus) + label {
  top: 24px;
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
  font-style: italic;
  font-family: var(--f-italic);
  font-weight: 400;
  color: var(--taupe);
}

/* Hide the placeholder text — we only use placeholder=" " as a
   trick for :placeholder-shown to work; we don't want to see it */
.contact-form .field input::placeholder,
.contact-form .field textarea::placeholder {
  color: transparent;
}

/* Privacy note */
.contact-form__privacy {
  font-family: var(--f-italic);
  font-style: italic;
  font-size: 14px;
  line-height: 1.55;
  color: var(--taupe);
  margin: 0;
  padding: 18px 22px;
  background: color-mix(in srgb, var(--brass-pale) 10%, var(--bone));
  border: 1px solid color-mix(in srgb, var(--brass-pale) 28%, transparent);
  border-left: 2px solid var(--brass);
}
.contact-form__privacy em {
  color: var(--brass-deep);
}

/* Submit button — brass slide-up on dark CTA, same as inquire */
.contact-form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 28px;
  background: var(--ink);
  color: var(--bone);
  position: relative;
  overflow: hidden;
  transition: background 0.3s ease;
  border: 0;
  cursor: pointer;
  width: 100%;
}
.contact-form__submit::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--brass-deep);
  transform: translateY(100%);
  transition: transform 0.5s var(--e-soft);
}
.contact-form__submit:hover::before {
  transform: translateY(0);
}
.contact-form__submit-label {
  font-family: var(--f-display);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  position: relative;
  z-index: 2;
}
.contact-form__submit-arrow {
  position: relative;
  z-index: 2;
  transition: transform 0.4s var(--e-soft);
  display: inline-flex;
  align-items: center;
}
.contact-form__submit:hover .contact-form__submit-arrow {
  transform: translateX(6px);
}
.contact-form__submit.is-loading .contact-form__submit-label,
.contact-form__submit.is-loading .contact-form__submit-arrow {
  opacity: 0;
}
.contact-form__submit-loader {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 22px; height: 22px;
  border: 2px solid color-mix(in srgb, var(--bone) 30%, transparent);
  border-top-color: var(--bone);
  border-radius: 50%;
  opacity: 0;
  animation: contactSpin 0.8s linear infinite;
  z-index: 3;
}
.contact-form__submit.is-loading .contact-form__submit-loader {
  opacity: 1;
}
@keyframes contactSpin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ──────────── 7. SUCCESS / ERROR STATES ────────────
   These overlay the form fields when shown. The form itself stays
   in the DOM beneath them — easier to hide/show than to swap. */
.contact-form__success,
.contact-form__error {
  position: absolute;
  inset: 0;
  background: var(--bone);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 32px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--e-soft), visibility 0.5s var(--e-soft);
  z-index: 5;
}
.contact-form__success.is-shown,
.contact-form__error.is-shown {
  opacity: 1;
  visibility: visible;
}

.contact-form__success-mark,
.contact-form__error-mark {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-bottom: 28px;
}
.contact-form__success-mark {
  color: var(--brass-deep);
}
.contact-form__error-mark {
  background: color-mix(in srgb, var(--terracotta) 12%, var(--bone));
  border: 1px solid color-mix(in srgb, var(--terracotta) 35%, transparent);
  font-family: var(--f-display);
  font-size: 28px;
  font-weight: 400;
  color: var(--terracotta);
}

.contact-form__success-title,
.contact-form__error-title {
  font-family: var(--f-display);
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 14px;
  max-width: 24ch;
}
.contact-form__success p,
.contact-form__error p {
  font-family: var(--f-serif);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 32px;
  max-width: 44ch;
}
.contact-form__success p em {
  color: var(--brass-deep);
}
.contact-form__error p a {
  color: var(--brass-deep);
  border-bottom: 1px solid var(--hairline);
  transition: color 0.3s ease, border-color 0.3s ease;
}
.contact-form__error p a:hover {
  color: var(--ink);
  border-bottom-color: var(--brass);
}

.contact-form__success-back,
.contact-form__error-back {
  font-family: var(--f-display);
  font-size: 14px;
  font-weight: 500;
  color: var(--brass-deep);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--brass);
  padding-bottom: 4px;
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease;
  letter-spacing: -0.005em;
}
.contact-form__success-back:hover,
.contact-form__error-back:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* ──────────── 8. EMERGENCY SECTION ──────────── */
.contact-emergency {
  background: var(--cream-50);
  border-top: 1px solid var(--hairline-2);
  padding: clamp(80px, 12vh, 140px) var(--pad-x);
}
.contact-emergency__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}

.contact-emergency__head {
  position: sticky;
  top: 100px;
  align-self: start;
}
.contact-emergency__title {
  font-family: var(--f-display);
  font-size: clamp(28px, 3vw, 48px);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 18px 0 0;
  max-width: 16ch;
}
.contact-emergency__title em {
  color: var(--terracotta);
}

.contact-emergency__body > p {
  font-family: var(--f-serif);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 40px;
  max-width: 60ch;
}

.contact-emergency__divide {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-bottom: 32px;
}

.contact-emergency__label {
  display: block;
  font-family: var(--f-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hairline);
}
.contact-emergency__divide > div:first-child .contact-emergency__label {
  color: var(--terracotta);
  border-bottom-color: color-mix(in srgb, var(--terracotta) 35%, transparent);
}
.contact-emergency__divide > div:last-child .contact-emergency__label {
  color: var(--brass-deep);
  border-bottom-color: var(--brass-pale);
}

.contact-emergency__divide ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.contact-emergency__divide li {
  font-family: var(--f-serif);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-soft);
  padding: 8px 0;
  position: relative;
  padding-left: 18px;
}
.contact-emergency__divide li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 16px;
  width: 6px;
  height: 1px;
  background: var(--brass);
}
.contact-emergency__divide > div:first-child li::before {
  background: var(--terracotta);
}

.contact-emergency__minor {
  font-family: var(--f-italic);
  font-style: italic;
  font-size: 14px;
  color: var(--taupe);
  line-height: 1.6;
  padding-top: 24px;
  border-top: 1px solid var(--hairline-2);
  margin: 0;
  max-width: 60ch;
}

/* ──────────── 9. RESPONSIVE ──────────── */

/* Tablet — sidebar drops above form, sticky becomes static */
@media (max-width: 1100px) {
  .contact-body__grid {
    grid-template-columns: 1fr;
    gap: 56px;
  }
  .contact-info__inner {
    position: static;
  }
  .contact-emergency__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .contact-emergency__head {
    position: static;
  }
}

/* Smaller tablet — quick links wrap, form rows stack on narrower */
@media (max-width: 980px) {
  .contact-hero {
    padding: clamp(120px, 16vh, 160px) var(--pad-x) 80px;
  }
  .contact-hero__quick {
    grid-template-columns: 1fr;
  }
  .contact-form__row {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* Mobile */
@media (max-width: 600px) {
  .contact-hero {
    padding: 110px var(--pad-x) 64px;
  }
  .contact-hero__title {
    font-size: clamp(40px, 13vw, 64px);
    line-height: 0.98;
  }
  .contact-hero__lede {
    font-size: 17px;
    margin-bottom: 36px;
  }
  .contact-hero__quick-link {
    padding: 18px 22px;
  }

  .contact-body {
    padding: 60px var(--pad-x);
  }
  .contact-info__list > div {
    grid-template-columns: 90px 1fr;
    gap: 14px;
    padding: 14px 0;
  }
  .contact-info__list dd {
    font-size: 15px;
  }

  .contact-form-wrap__title {
    font-size: 28px;
  }
  .contact-form {
    gap: 24px;
  }
  .contact-form__privacy {
    padding: 16px 18px;
    font-size: 13px;
  }
  .contact-form__submit {
    padding: 20px 22px;
  }
  .contact-form__submit-label {
    font-size: 15px;
  }

  .contact-emergency {
    padding: 60px var(--pad-x);
  }
  .contact-emergency__divide {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .contact-emergency__title {
    font-size: 26px;
  }
  .contact-emergency__body > p {
    font-size: 16px;
  }
}

/* ──────────── 10. REDUCED MOTION ──────────── */
@media (prefers-reduced-motion: reduce) {
  .contact-hero__title .line > * {
    transform: none !important;
  }
  .contact-hero__quick-link,
  .contact-info__list dd a,
  .contact-form__submit,
  .contact-form__submit::before,
  .contact-form__submit-arrow,
  .contact-form__success,
  .contact-form__error {
    transition: none !important;
  }
  .contact-form__submit-loader {
    animation: none !important;
  }
}