/* ============================================================
   SC HOME BUYERS — contact.css
   Page-specific styles. Shared styles (nav, footer, buttons,
   .section__eyebrow, .reveal) inherited from index.css.
   ============================================================ */

/* ---------- 1 · HEADING ---------- */
.contact-head {
  text-align: center;
  padding: clamp(7.5rem, 13vh, 9.5rem) var(--pad-x) clamp(2rem, 4vw, 3rem);
  max-width: 46rem;
  margin: 0 auto;
}
.contact-head__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.5rem;
}
.contact-head__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.2rem, 5.5vw, 4rem);
  line-height: 1.1;
  color: var(--ivory);
  margin-bottom: 1.5rem;
  /* soft gold glow pulse, matching hero/heading treatment */
  text-shadow: 0 0 22px rgba(201, 162, 75, 0.18);
  animation: headGlow 4.5s ease-in-out infinite;
}
@keyframes headGlow {
  0%, 100% { text-shadow: 0 0 20px rgba(201,162,75,0.14); }
  50%      { text-shadow: 0 0 30px rgba(201,162,75,0.28); }
}
.contact-head__sub {
  font-size: clamp(0.88rem, 1.4vw, 1rem);
  line-height: 1.9;
  color: rgba(245, 242, 236, 0.72);
  max-width: 36rem;
  margin: 0 auto;
}

/* ---------- 2 · MESSAGE FORM ---------- */
.form-section {
  padding: clamp(1rem, 3vw, 2rem) var(--pad-x) clamp(2.5rem, 5vw, 4rem);
}
.cform {
  max-width: 54rem;
  margin: 0 auto;
}
.cform__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem;
}
.cform__field {
  margin-bottom: 1.8rem;
  display: flex;
  flex-direction: column;
}
.cform__field label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.7rem;
}
.cform__opt {
  color: rgba(138, 133, 120, 0.6);
  letter-spacing: 0.1em;
}

/* underline-style text inputs */
.cform__field input {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line-soft);
  padding: 0.55rem 0;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--ivory);
  transition: border-color .35s ease, box-shadow .35s ease;
}
.cform__field input:focus {
  outline: none;
  border-bottom-color: var(--gold);
  box-shadow: 0 2px 12px -6px rgba(201, 162, 75, 0.7);
}

/* defeat the browser's pale autofill background so fields stay on-theme.
   The huge inset shadow paints over Chrome's forced yellow/white fill,
   and the delayed text-fill-color keeps typed/autofilled text ivory. */
.cform__field input:-webkit-autofill,
.cform__field input:-webkit-autofill:hover,
.cform__field input:-webkit-autofill:focus,
.cform__field textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--ivory);
  caret-color: var(--ivory);
  -webkit-box-shadow: 0 0 0 1000px var(--charcoal) inset;
  box-shadow: 0 0 0 1000px var(--charcoal) inset;
  transition: background-color 9999s ease-in-out 0s;
}

/* message textarea — subtle bordered box that glows on focus */
.cform__field textarea {
  background: var(--charcoal);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  padding: 1rem 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ivory);
  resize: vertical;
  min-height: 8rem;
  transition: border-color .35s ease, box-shadow .35s ease;
}
.cform__field textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(201,162,75,0.25), 0 8px 26px -12px rgba(201,162,75,0.5);
}
.cform__field input::placeholder,
.cform__field textarea::placeholder {
  color: rgba(138, 133, 120, 0.6);
}

/* honeypot — hidden from users, catches bots */
.cform__hp {
  position: absolute;
  left: -9999px;
  opacity: 0;
  height: 0;
  width: 0;
}

.cform__actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 0.5rem;
}

/* secondary "Clear" button — lighter outline, distinct from gold Send */
.btn--ghost-alt {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line-soft);
}
.btn--ghost-alt:hover,
.btn--ghost-alt:focus-visible {
  background: transparent;
  color: var(--ivory);
  border-color: var(--muted);
  transform: translateY(-3px);
  box-shadow: none;
}

.cform__status {
  text-align: center;
  margin-top: 1.4rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  min-height: 1.2rem;
}
.cform__status.is-success { color: var(--gold); }
.cform__status.is-error { color: #d98b8b; }

/* ---------- 3 · REACH US DIRECTLY ---------- */
.reach {
  text-align: center;
  padding: clamp(2.5rem, 5vw, 4rem) var(--pad-x) clamp(3rem, 6vw, 5rem);
  border-top: 1px solid var(--line-soft);
  max-width: 40rem;
  margin: 0 auto;
}
.reach__icons {
  display: flex;
  gap: 1.1rem;
  justify-content: center;
  margin: 1.6rem 0 1.4rem;
}
.reach__icon {
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  transition: background .35s ease, color .35s ease,
              transform .3s ease, box-shadow .35s ease;
}
.reach__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}
.reach__icon:hover,
.reach__icon:focus-visible {
  background: var(--gold);
  color: var(--ink);
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(201, 162, 75, 0.32);
  outline: none;
}
.reach__note {
  font-size: 0.8rem;
  color: rgba(245, 242, 236, 0.55);
  letter-spacing: 0.02em;
}

/* ---------- responsive safeguard (desktop-first) ---------- */
@media (max-width: 640px) {
  .cform__row { grid-template-columns: 1fr; gap: 0; }
}

/* ============================================================
   THANK-YOU PAGE
   ============================================================ */
.thanks {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  /* generous top padding always clears the fixed nav at any screen size;
     bottom padding keeps it off the footer */
  padding: clamp(9rem, 20vh, 13rem) var(--pad-x) clamp(4rem, 8vw, 6rem);
  max-width: 52rem;
  margin: 0 auto;
}
.thanks__mark {
  color: var(--gold);
  width: 4.5rem;
  height: 4.5rem;
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  filter: drop-shadow(0 0 14px rgba(201, 162, 75, 0.35));
}
.thanks__mark svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  display: block;
}
/* draw-on animation for the checkmark */
.thanks__check {
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: thanksDraw 0.7s ease 0.15s forwards;
}
@keyframes thanksDraw {
  to { stroke-dashoffset: 0; }
}
.thanks__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.4rem;
}
.thanks__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.1;
  color: var(--ivory);
  margin-bottom: 1.4rem;
}
.thanks__sub {
  font-size: clamp(0.9rem, 1.4vw, 1.02rem);
  line-height: 1.9;
  color: rgba(245, 242, 236, 0.72);
  max-width: 46rem;
  margin: 0 auto 2.4rem;
}
.thanks__actions { margin-bottom: 2.4rem; }
.thanks__note {
  font-size: 0.8rem;
  line-height: 1.8;
  color: rgba(245, 242, 236, 0.5);
}
/* contact lines with gold icons */
.thanks__contact {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-size: 0.85rem;
  color: rgba(245, 242, 236, 0.7);
  margin: 0.3rem 0;
}
.thanks__icon {
  width: 1.05rem;
  height: 1.05rem;
  color: var(--gold);
  flex-shrink: 0;
  filter: drop-shadow(0 0 4px rgba(201, 162, 75, 0.35));
}
.thanks__or {
  margin: 0.5rem 0;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  color: rgba(245, 242, 236, 0.35);
}
.thanks__note a,
.thanks__contact a {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 162, 75, 0.3);
  transition: border-color .3s ease;
}
.thanks__note a:hover,
.thanks__contact a:hover { border-color: var(--gold); }

@media (prefers-reduced-motion: reduce) {
  .thanks__check { animation: none; stroke-dashoffset: 0; }
}