.contact-section {
    padding: 0 0 80px
}

.contact-panel {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 50px;
    padding: 48px 52px;
    border: 1px solid #d8b66b38;
    border-radius: 14px;
    background: radial-gradient(ellipse at 0% 100%, #d8b66b0b, transparent 48%), linear-gradient(120deg, #24262b, #1e2025)
}

.contact-copy {
    position: relative;
    z-index: 1
}

.contact-copy h2 {
    font: 800 clamp(30px, 3.5vw, 42px)/1.15 var(--display);
    letter-spacing: -.05em;
    margin: 16px 0
}

.contact-copy p {
    font-size: 12px;
    line-height: 1.9;
    color: #a5a7ad;
    max-width: 410px;
    margin: 0 0 24px
}

.contact-copy .button {
    font-size: 11px
}

.contact-side {
    align-self: center;
    position: relative;
    z-index: 1;
    padding: 23px 0 23px 30px;
    border-left: 1px solid var(--line)
}

.contact-side-label {
    font-size: 9px;
    color: #777b82;
    letter-spacing: .18em;
    font-weight: 700;
    margin-bottom: 12px
}

.contact-email {
    font: 700 17px var(--display);
    letter-spacing: -.02em;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: color .2s
}

.contact-email:hover {
    color: var(--gold-light)
}

.contact-email i {
    font-size: 13px;
    color: var(--gold)
}

.contact-divider {
    height: 1px;
    background: var(--line);
    margin: 24px 0
}

.contact-topic {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #b6b8bd;
    font-size: 11px;
    margin-top: 11px
}

.contact-topic i {
    color: var(--gold);
    font-size: 14px
}

.contact-decoration {
    position: absolute;
    right: -55px;
    top: -95px;
    width: 300px;
    height: 300px;
    border: 1px solid #d8b66b13;
    border-radius: 50%;
    pointer-events: none
}

.contact-decoration span {
    position: absolute;
    inset: 20px;
    border: 1px solid #d8b66b0d;
    border-radius: 50%
}

.contact-decoration span:nth-child(2) {
    inset: 45px
}

.contact-decoration span:nth-child(3) {
    inset: 70px
}

.contact-panel {
    isolation: isolate
}

.contact-panel:before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .3;
    background: linear-gradient(115deg, transparent 30%, #d8b66b09 52%, transparent 74%);
    transform: translateX(-60%);
    animation: contact-sheen 12s ease-in-out infinite
}

.contact-copy .button {
    box-shadow: 0 7px 24px #d8b66b12
}

.contact-email {
    width: fit-content
}

.contact-topic i {
    transition: transform .25s
}

.contact-topic:hover i {
    transform: translateX(3px);
    color: var(--gold-light)
}

@keyframes contact-sheen {

    0%,
    30% {
        transform: translateX(-60%)
    }

    65%,
    100% {
        transform: translateX(60%)
    }
}