.contact-page .nav .active { color: white; }
.contact-hero { position: relative; overflow: hidden; padding: 7rem 0 8rem; background: var(--art-navy); color: white; }
.contact-hero::before { content: "HELLO"; position: absolute; left: -2vw; bottom: -5vw; color: rgba(255,255,255,.045); font-family: Georgia,serif; font-size: clamp(11rem,29vw,31rem); line-height: .7; letter-spacing: -.09em; }
.contact-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: .82fr 1.18fr; gap: 6rem; align-items: start; }
.contact-intro { position: sticky; top: 10rem; padding-top: 2rem; }
.contact-intro h1 { margin: 1.4rem 0 2rem; color: white; font-size: clamp(3.8rem,6.2vw,6.7rem); line-height: .9; }
.contact-intro h1 em { display: block; margin-top: .16em; color: #ffd387; font-size: .72em; font-weight: 500; transform: translateX(2vw); }
.contact-intro .eyebrow { color: #ffd387; }
.contact-intro .lede { color: rgba(255,255,255,.82); }
.contact-promises { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 2rem; }
.contact-promises span { padding: .45rem .7rem; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; font-size: .78rem; font-weight: 750; }
.contact-form { padding: 3rem; background: var(--art-paper); color: var(--art-navy); box-shadow: 22px 24px 0 var(--art-gold); transform: rotate(.35deg); }
.form-heading { display: grid; grid-template-columns: 4rem 1fr; gap: 1.5rem; margin-bottom: 2.5rem; align-items: start; }
.form-heading > span { color: var(--art-coral); font-family: Georgia,serif; font-size: 3.2rem; font-style: italic; line-height: 1; }
.form-heading h2 { margin-bottom: 0; font-size: clamp(2.3rem,4vw,4rem); }
.contact-form label span { color: var(--muted); font-weight: 500; }
.contact-form input,.contact-form select,.contact-form textarea { border: 1px solid rgba(7,95,168,.3); border-radius: 0; background: white; }
.contact-form textarea { min-height: 175px; }
.form-submit { display: grid; justify-items: start; padding-top: .6rem; }
.contact-form .button { min-width: 200px; border-radius: 999px; }
.contact-form .form-status { border-left: 5px solid var(--art-gold); border-radius: 0; background: #eef6fc; }
.after-contact { background: var(--art-paper); }
.after-contact-grid { display: grid; grid-template-columns: .2fr 1fr .8fr; gap: 4rem; align-items: start; }
.after-number { margin: 0; color: rgba(7,95,168,.18); font-family: Georgia,serif; font-size: 7rem; font-style: italic; line-height: .8; }
.after-copy { padding-top: 1.4rem; border-top: 6px solid var(--art-coral); font-size: 1.1rem; }
.after-copy p:first-child { margin-top: 0; }
.contact-quote { padding: 8rem 0; overflow: hidden; background: var(--art-coral); color: white; text-align: center; }
.contact-quote blockquote { max-width: 1080px; margin: 0 auto; font-family: Georgia,serif; font-size: clamp(2.8rem,6vw,6rem); font-style: italic; line-height: .98; letter-spacing: -.045em; }
.contact-quote p { margin: 2rem 0 0; color: var(--art-navy); font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
@media (max-width: 980px) {
  .contact-hero-grid,.after-contact-grid { grid-template-columns: 1fr; }
  .contact-hero-grid,.after-contact-grid { gap: 4rem; }
  .contact-intro { position: static; }
  .after-contact-grid { gap: 1.5rem; }
}
@media (max-width: 700px) {
  .contact-hero { padding: 4rem 0 5rem; }
  .contact-intro h1 { font-size: 3.5rem; }
  .contact-intro h1 em { transform: none; }
  .contact-form { padding: 2rem; box-shadow: 10px 12px 0 var(--art-gold); transform: none; }
  .form-heading { grid-template-columns: 1fr; gap: .5rem; }
  .form-grid { grid-template-columns: 1fr; }
  .field-full { grid-column: auto; }
  .contact-quote { padding: 5rem 0; }
}
