.contact-hero { background: var(--color-white); }
.contact-hero__inner { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); min-height: 510px; align-items: center; gap: clamp(3rem, 8vw, 8rem); }
.contact-hero__content { max-width: 520px; padding-block: 4rem; } .contact-hero__content .eyebrow { margin-bottom: 1rem; }
.contact-hero__content h1 { margin-bottom: 1.4rem; font-size: clamp(3rem, 5.5vw, 5.5rem); } .contact-hero__content p:last-child { color: var(--color-muted); }
.contact-hero__media { position: relative; align-self: stretch; min-height: 390px; overflow: hidden; background: #282b2d; }
.contact-hero__placeholder { position: absolute; inset: 0; display: grid; place-content: center; background: linear-gradient(135deg, #3c4042, #1a1d1f); color: rgb(255 255 255 / 52%); font-size: .8rem; font-weight: 800; letter-spacing: .1em; line-height: 1.5; text-align: center; text-transform: uppercase; }
.contact-hero__placeholder span { color: var(--color-amber); font-size: .6rem; }
.contact-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .contact-hero__media img.is-missing { display: none; }
.contact-main { background: var(--color-neutral); }
.contact-main__grid { display: grid; grid-template-columns: minmax(260px, .7fr) minmax(0, 1.3fr); gap: clamp(3rem, 10vw, 10rem); }
.contact-info .eyebrow, .contact-form-wrap .eyebrow { margin-bottom: 1rem; }
.contact-info dl { display: grid; gap: 0; } .contact-info dl > div { padding: 1.1rem 0; border-top: 1px solid var(--color-border); } .contact-info dt { margin-bottom: .35rem; color: var(--color-muted); font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .contact-info dd { font-size: .9rem; font-weight: 600; } .contact-info a:hover { color: var(--color-orange); }
.contact-form-wrap { padding: clamp(1.5rem, 4vw, 3.5rem); background: var(--color-white); border: 1px solid var(--color-border); }
.contact-form-wrap h2 { margin-bottom: .6rem; } .contact-form__intro { margin-bottom: 2rem; color: var(--color-muted); font-size: .875rem; }
.contact-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; } .contact-form__field--full { grid-column: 1 / -1; }
.contact-form label { display: block; margin-bottom: .45rem; color: var(--color-black); font-size: .72rem; font-weight: 800; letter-spacing: .05em; } .contact-form label span { color: var(--color-red); }
.contact-form input, .contact-form textarea { width: 100%; border: 1px solid var(--color-border); border-radius: 0; background: var(--color-white); color: var(--color-text); padding: .8rem .85rem; font-size: .9rem; outline: none; transition: border-color var(--transition-base); } .contact-form textarea { resize: vertical; } .contact-form input:focus, .contact-form textarea:focus { border-color: var(--color-orange); } .contact-form input[aria-invalid="true"], .contact-form textarea[aria-invalid="true"] { border-color: var(--color-red); }
.form-error { min-height: 1.25em; margin-top: .35rem; color: var(--color-red); font-size: .72rem; } .form-status { min-height: 1.5em; margin-top: .9rem; color: var(--color-muted); font-size: .8rem; } .form-status.is-success { color: #277245; }
@media (max-width: 768px) { .contact-hero__inner { grid-template-columns: 1fr; gap: 0; } .contact-hero__content { padding-top: 4rem; padding-bottom: 2.5rem; } .contact-hero__media { min-height: 310px; } .contact-main__grid { grid-template-columns: 1fr; gap: 3rem; } }
@media (max-width: 520px) { .contact-form { grid-template-columns: 1fr; } .contact-form__field--full { grid-column: auto; } }