/* ==========================================================================
   CONTACT PAGE (page-scoped)
   ========================================================================== */

.contact{
  background:#fff;
  padding: .75rem 0 3rem; /* tighter top spacing under the white header */
}

/* Headline + blurb */
.contact .hero-copy{
  text-align:center;
  margin-bottom: 1rem;
}
.contact .hero-copy h1{
  margin:0 0 .5rem;
  font-size: var(--fs-hero-title);
  letter-spacing:.06875rem;
  text-transform:uppercase;
  font-weight:500;
  color: var(--color-dark);
}
.contact .hero-copy .lead{
  max-width: 68rem; /* full width feel but contained */
  margin: 0 auto;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--color-muted);
}

/* Section title "send a message" */
.contact .muted-label{
  display:block;
  text-align:left;
  font-size:1.25rem;     /* slightly larger */
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0 0 .75rem 0;  /* reduced gap before form */
}

/* Form grid */
.contact-form{
  display:grid;
  grid-template-columns: 1fr;   /* single column on mobile */
  gap: 1rem 1.25rem;
  max-width: 48rem;
  margin-inline:auto;
}
@media (min-width:60rem){
  .contact-form{ grid-template-columns:1fr 1fr; }
  .contact-form .field-span-2{ grid-column:1 / -1; }
  .contact-form button.field-span-2{ grid-column:1 / -1; }
}

/* Field blocks */
.contact-form .field{ display:flex; flex-direction:column; }
.contact-form .field label{
  margin:0 0 .25rem 0;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: var(--ls-nav);
  font-size: var(--fs-nav);
  line-height: 1.2;
}

.contact-form input,
.contact-form textarea{
  width:100%;
  box-sizing:border-box;
  border:0;
  border-bottom:1px solid var(--color-muted);
  background:transparent;
  padding:.75rem 0;
  font:inherit;
  line-height:1.4;
}
.contact-form textarea{ min-height:8rem; resize:vertical; }

/* Submit button — larger, “footer tone”, and centered on wide */
.contact-form button{
  margin-top:.25rem;
  justify-self:start;                /* left on mobile */
  padding:1rem 1.5rem;
  background: var(--color-light);
  color: var(--color-dark);
  border: var(--border-muted);
  text-transform: uppercase;
  letter-spacing: .05625rem;
  font-size: 1.0625rem;
  cursor: pointer;
}
@media (min-width:60rem){
  .contact-form button{ justify-self:center; } /* centered on desktop */
}
.contact-form button:hover{ filter:brightness(.97); }
.contact-form button:active{ transform: translateY(1px); }

/* Info list under the form (address, hours, email, phone) */
.contact .meta{
  max-width:48rem;
  margin:.25rem auto 0;
  font-size:.95rem;
  color: var(--color-dark);
}