/* contact.css — layout for the Contact Us page only.

   The form itself is not styled here. It lives in styles.css under "LEAD FORM"
   because the same component also sits at the bottom of Home, and one set of
   styles means it cannot look like two different forms. */

/* The nav floats over the hero on the home page, so it is positioned absolutely
   there. This page has no hero, so it is put back into the normal flow. */
.contact-header { padding: 24px; }
.contact-header .nav-wrap { position: static; transform: none; left: auto; margin: 0 auto; }

.contact-shell { max-width: 1500px; margin: 0 auto; padding: 24px; }
.contact-frame {
  border: 1px solid var(--border-dark); border-radius: 30px; overflow: hidden;
  background: linear-gradient(180deg, rgba(23, 26, 28, 0.92), rgba(14, 16, 17, 0.98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02), 0 30px 90px rgba(0, 0, 0, 0.24);
}
.contact-inner { padding: clamp(32px, 6vw, 72px) clamp(20px, 5vw, 64px); }

.contact-head { max-width: 680px; }
.contact-eyebrow { margin: 0 0 14px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bronze); }
.contact-title { margin: 0; font-size: clamp(2.2rem, 6vw, 3.6rem); line-height: 1.02; letter-spacing: -0.04em; color: var(--text); }
.contact-lede { margin: 18px 0 0; font-size: clamp(1rem, 2vw, 1.15rem); line-height: 1.6; color: var(--text-soft); }

/* Three cards that each do one job: call, email, book. They wrap to one column
   on a phone, where they are also the first thing on screen after the heading. */
.contact-ways { margin-top: clamp(28px, 5vw, 48px); display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 760px) { .contact-ways { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }

.contact-way {
  display: flex; flex-direction: column; gap: 6px;
  padding: 22px 22px 24px; border-radius: 20px;
  border: 1px solid rgba(231, 227, 218, 0.10); background: rgba(231, 227, 218, 0.03);
  text-decoration: none; transition: border-color 200ms ease, background-color 200ms ease, transform 200ms ease;
}
.contact-way:hover { border-color: rgba(168, 138, 109, 0.45); background: rgba(231, 227, 218, 0.05); transform: translateY(-2px); }
.contact-way:focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; }

.contact-way-icon {
  width: 40px; height: 40px; margin-bottom: 10px; border-radius: 999px;
  border: 1px solid rgba(231, 227, 218, 0.12); background: rgba(231, 227, 218, 0.04);
  display: inline-flex; align-items: center; justify-content: center; color: var(--bronze);
}
.contact-way-label { font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.contact-way-value { font-family: 'Poppins', sans-serif; font-size: 17px; line-height: 1.3; letter-spacing: -0.02em; color: var(--text); word-break: break-word; }
.contact-way-note { font-size: 13px; line-height: 1.5; color: var(--text-soft); }

/* The form sits in its own frame below, so the page reads as two clear offers:
   reach us now, or leave your details. */
.contact-form-section .contact-shell { padding-top: 0; }