.contact-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 78% 38%, rgba(17,156,255,.08), transparent 30%),
        linear-gradient(140deg, #081116 0%, #0a161c 52%, #071015 100%);
    isolation: isolate;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1.02fr .98fr;
    gap: clamp(40px, 6vw, 84px);
    align-items: start;
    padding-top: calc(var(--header-height) + 90px);
    padding-bottom: 120px;
}

.contact-intro h1 { max-width: 640px; color: var(--pa-white); font-size: clamp(3.2rem, 6vw, 5.8rem); }
.contact-intro h1 em { display: block; color: transparent; font-style: normal; background: linear-gradient(100deg, var(--pa-teal), #6ee9ff 55%, var(--pa-blue)); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.contact-intro > p { max-width: 560px; margin-top: 28px; color: rgba(247,255,253,.68); font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.8; }

.contact-showcase { position: relative; margin-top: 48px; }
.contact-showcase::before { position: absolute; inset: 14px -14px -14px 14px; z-index: -1; border: 1px solid rgba(0,217,163,.38); border-radius: 26px; content: ""; box-shadow: 0 0 28px rgba(0,217,163,.08); }
.contact-showcase img { display: block; width: 100%; height: auto; border-radius: 26px; box-shadow: 0 28px 70px rgba(0,0,0,.45); }

.contact-card {
    position: relative;
    padding: clamp(30px, 4.5vw, 52px);
    overflow: hidden;
    border: 1px solid rgba(0,217,163,.24);
    border-radius: 34px;
    background: linear-gradient(135deg, rgba(16,36,45,.96), rgba(8,17,22,.97));
    box-shadow: 0 28px 80px rgba(0,0,0,.38), 0 0 52px rgba(17,156,255,.055);
}

.contact-card::after { position: absolute; top: -190px; right: -170px; width: 420px; height: 420px; border: 1px solid rgba(17,156,255,.16); border-radius: 50%; content: ""; pointer-events: none; }

.contact-form, .contact-success { position: relative; z-index: 1; display: grid; gap: 22px; }
.contact-card-heading span { color: var(--pa-teal); font-family: var(--heading); font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.contact-card-heading h2, .contact-success h2 { margin-top: 12px; color: var(--pa-white); font-size: clamp(2.2rem, 3.6vw, 3.2rem); }

.contact-field { display: grid; gap: 9px; }
.contact-field span { color: rgba(247,255,253,.8); font-family: var(--heading); font-size: .82rem; font-weight: 600; letter-spacing: .04em; }
.contact-field input, .contact-field textarea {
    width: 100%;
    padding: 15px 18px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--radius-sm);
    color: var(--pa-white);
    background: rgba(8,17,22,.72);
    font: inherit;
    transition: border-color var(--ease), box-shadow var(--ease), background var(--ease);
}
.contact-field textarea { min-height: 160px; resize: vertical; }
.contact-field input::placeholder, .contact-field textarea::placeholder { color: rgba(147,169,174,.6); }
.contact-field input:focus, .contact-field textarea:focus { border-color: var(--pa-teal); outline: none; background: rgba(8,17,22,.92); box-shadow: 0 0 0 4px rgba(0,217,163,.12); }

.contact-submit { justify-self: start; border: 0; cursor: pointer; }
.contact-submit:disabled { opacity: .65; cursor: progress; }
.contact-submit:hover b { transform: translateX(4px); }
.contact-status { min-height: 1.4em; color: var(--pa-muted); font-size: .9rem; }
.contact-honeypot { position: absolute; left: -9999px; }

.contact-success { justify-items: start; }
.contact-success[hidden] { display: none; }
.contact-success p { max-width: 440px; color: var(--pa-muted); }
.contact-success-mark { display: grid; width: 64px; height: 64px; place-items: center; border: 1px solid rgba(0,217,163,.5); border-radius: 50%; color: var(--pa-teal); font-size: 1.6rem; box-shadow: 0 0 34px rgba(0,217,163,.2); }

@media (max-width: 980px) {
    .contact-grid { grid-template-columns: 1fr; padding-top: calc(var(--header-height) + 60px); }
    .contact-showcase { max-width: 640px; }
}

@media (max-width: 680px) {
    .contact-grid { padding-bottom: 80px; }
    .contact-intro h1 { font-size: clamp(2.8rem, 13vw, 4rem); }
    .contact-submit, .contact-success .btn { width: 100%; justify-self: stretch; }
}