.contact-surface-page {
    background: #f1efe8;
}

.contact-surface-page .site-header {
    color: #f4efe5;
    border-color: rgba(235, 223, 202, .2);
    background:
        linear-gradient(90deg, rgba(36, 16, 11, .66), rgba(8, 25, 38, .76)),
        repeating-linear-gradient(94deg, #2a130f 0, #60301f 10px, #24100d 21px, #704027 31px);
}

.contact-surface-page .site-header::after {
    display: none;
}

.contact-surface-page .brand span {
    color: #25130f;
    background: radial-gradient(circle at 35% 28%, #fffdf2, #d7c9b2 56%, #8b705d);
    border: 1px solid rgba(255, 255, 255, .68);
    box-shadow: 0 0 0 2px rgba(214, 104, 69, .12), 0 0 12px rgba(214, 104, 69, .3);
}

.contact-surface-page .contact-page {
    position: relative;
    min-height: calc(100vh - 90px);
    isolation: isolate;
    background:
        linear-gradient(180deg, rgba(7, 24, 37, .86) 0, rgba(13, 35, 48, .82) 330px,
            rgba(86, 91, 87, .48) 480px, #f1efe8 650px),
        repeating-linear-gradient(95deg, #2b130f 0, #693421 11px, #26110e 22px, #754127 33px);
}

.contact-surface-page .contact-page::before {
    content: '';
    position: absolute;
    z-index: -1;
    width: min(34vw, 450px);
    aspect-ratio: 1;
    top: 60px;
    left: -12vw;
    border: 1px solid rgba(214, 104, 69, .26);
    border-radius: 50%;
    box-shadow: 0 0 0 32px rgba(214, 104, 69, .025), 0 0 0 70px rgba(216, 187, 255, .018);
}

.contact-surface-page .contact-copy { color: #f5f0e6; }
.contact-surface-page .contact-copy h1 em {
    color: #e47b58;
    text-shadow: 0 0 22px rgba(214, 104, 69, .28);
}
.contact-surface-page .contact-copy > p:not(.eyebrow) { color: #c5ced1; }
.contact-surface-page .contact-copy .text-link { color: #f3dccf; border-color: rgba(228, 123, 88, .7); }
.contact-surface-page .contact-copy .text-link {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    font-size: clamp(17px, 1.5vw, 20px);
    letter-spacing: .015em;
    text-shadow: 0 0 14px rgba(228, 123, 88, .28);
}

.contact-surface-page .contact-form-wrap {
    position: relative;
    overflow: hidden;
    align-self: start;
    padding: clamp(28px, 4vw, 50px);
    border: 0;
    border-radius: 22px;
    background:
        radial-gradient(circle at 85% 8%, rgba(255, 255, 255, .72), transparent 34%),
        linear-gradient(145deg, rgba(241, 239, 232, .9), rgba(224, 224, 216, .82));
    box-shadow: 0 26px 70px rgba(4, 16, 25, .18), 0 8px 24px rgba(54, 29, 21, .1),
                inset 0 1px rgba(255, 255, 255, .7);
    backdrop-filter: blur(12px) saturate(.9);
}

.contact-surface-page .contact-form-wrap::before {
    display: none;
}

.contact-surface-page .contact-form-wrap::after {
    display: none;
}

@media (max-width: 760px) {
    .contact-surface-page .site-nav {
        color: #f4efe5;
        background: rgba(17, 22, 26, .97);
        border-color: rgba(235, 223, 202, .2);
    }
    .contact-surface-page .contact-page { background-position: center; }
    .contact-surface-page .contact-form-wrap { margin-top: 20px; }
}