.contact-page{position:relative}

.contact-hero{position:relative;display:flex;justify-content:center;align-items:center}
.contact-hero-bg{position:absolute;inset:0;background:var(--color-decor-yellow)}
.contact-hero-card{position:relative;max-width:600px;padding:var(--space-5);background:var(--color-surface-card);border:var(--border);box-shadow:var(--shadow-offset);display:flex;flex-direction:column;gap:var(--space-3)}
.contact-hero-actions{display:flex;gap:var(--space-3);flex-wrap:wrap}

.contact-types-intro{max-width:600px;margin-inline:auto}
.contact-type-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.contact-type{cursor:pointer;text-align:center}
.contact-type.active{background:var(--color-brand-blue)}

.contact-form-wrapper{display:flex;justify-content:center}
.contact-form-card{max-width:700px;width:100%;background:#fff;border:var(--border);box-shadow:var(--shadow-offset);padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3)}
.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
.form-field{display:flex;flex-direction:column;gap:var(--space-1)}
.form-field.full{grid-column:1/-1}
input,select,textarea{border:var(--border);padding:var(--space-3);background:#fff}
.form-success{display:none;margin-top:var(--space-3)}
.form-success.visible{display:block}

.contact-steps .card{display:flex;flex-direction:column;gap:var(--space-2)}

.contact-faq-inner{max-width:600px;margin-inline:auto;display:flex;flex-direction:column;gap:var(--space-3)}
.faq-item{border:var(--border);background:#fff;box-shadow:var(--shadow-offset)}
.faq-question{width:100%;text-align:left;padding:var(--space-3);font-family:var(--font-heading)}
.faq-answer{display:none;padding:var(--space-3)}
.faq-item.active .faq-answer{display:block}

.contact-alt .panel{max-width:600px;margin-inline:auto;display:flex;flex-direction:column;gap:var(--space-3)}

.contact-cta{background:var(--color-brand-pink)}
.contact-cta-inner{max-width:600px;margin-inline:auto;text-align:center;display:flex;flex-direction:column;gap:var(--space-3)}

@media(max-width:900px){
.contact-type-grid{grid-template-columns:1fr}
.contact-form{grid-template-columns:1fr}
}