.contact-page { min-height:calc(100vh - var(--header-height)); }.contact-hero { padding-top:5.5rem; }.contact-layout { display:grid; gap:2rem; align-items:start; }.contact-copy { max-width:38rem; }.contact-copy > p:not(.eyebrow) { color:var(--color-text-muted); font-size:1.1rem; max-width:33rem; }.contact-email { display:inline-flex; align-items:center; gap:.7rem; margin:1.25rem 0 1rem; color:var(--color-primary-light); font-weight:700; }.contact-email span { display:grid; place-items:center; width:2.1rem; height:2.1rem; border:1px solid var(--color-border); border-radius:.7rem; background:var(--color-surface); }.contact-note { max-width:30rem; color:var(--color-text-muted); font-size:.78rem; }.contact-form { display:grid; gap:1rem; padding:1.4rem; border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-surface); box-shadow:var(--shadow-card); }.contact-form__heading { margin-bottom:.2rem; }.contact-form__heading h2 { font-size:1.5rem; }.contact-form__heading p { margin:.35rem 0 0; color:var(--color-text-muted); font-size:.85rem; }.contact-form textarea { width:100%; resize:vertical; min-height:8rem; padding:.7rem; color:var(--color-text); background:var(--color-bg); border:1px solid var(--color-border); border-radius:.65rem; outline:0; }.contact-form textarea:focus { border-color:var(--color-primary); box-shadow:0 0 0 3px rgba(198,255,61,.13); }.contact-status { min-height:1.2rem; margin:0; color:var(--color-mint); font-size:.8rem; }
.contact-form[hidden] { display:none; }
.contact-success { min-height:31rem; display:grid; align-content:center; justify-items:center; gap:.85rem; padding:2rem; text-align:center; border:1px solid rgba(198,255,61,.42); border-radius:var(--radius-lg); background:radial-gradient(circle at 50% 18%,rgba(198,255,61,.16),transparent 45%),var(--color-surface); box-shadow:var(--shadow-card); animation:contact-arrive .55s cubic-bezier(.2,.8,.2,1) both; }.contact-success[hidden] { display:none; }.contact-success__check { display:grid; place-items:center; width:6.25rem; height:6.25rem; margin-bottom:.35rem; border:2px solid var(--color-primary-light); border-radius:50%; color:#10140e; background:var(--color-primary); font-size:3.4rem; font-weight:800; box-shadow:0 0 2rem rgba(198,255,61,.35); animation:contact-pop .65s .18s cubic-bezier(.2,1.4,.35,1) both,contact-float 2.6s 1s ease-in-out infinite; }.contact-success h2 { max-width:12ch; font-size:clamp(2rem,4vw,3rem); }.contact-success > p:not(.eyebrow) { max-width:20rem; margin:0; color:var(--color-text-muted); }
@keyframes contact-arrive { from { opacity:0; transform:translateY(1.5rem); } to { opacity:1; transform:translateY(0); } } @keyframes contact-pop { from { opacity:0; transform:scale(.45) rotate(-20deg); } to { opacity:1; transform:scale(1) rotate(0); } } @keyframes contact-float { 50% { transform:translateY(-.45rem); } }
@media (min-width:50rem) { .contact-layout { grid-template-columns:minmax(0,1fr) minmax(23rem,.8fr); gap:4rem; }.contact-form { padding:1.75rem; } }