.contact-page {
    display: grid;
    place-items: center;
    min-height: calc(100vh - 200px); /* Adjust based on header/footer height */
    padding: 52px 20px;
}

.stage {
    perspective: 1200px;
    width: min(95vw, 540px);
    margin-top: 4px;
}

.tilter {
    position: relative;
    width: 100%;
    aspect-ratio: 3/2;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform: rotateX(0deg) rotateY(0deg);
    transition: transform .35s ease;
}

body.template-contact {
    background-color: #000;
    color: #fff;
}

.contact-page {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: 52px 20px;
}

.stage {
    perspective: 1200px;
    width: min(95vw, 540px);
    margin-top: 4px;
}

.tilter {
    position: relative;
    width: 100%;
    aspect-ratio: 3/2;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform: rotateX(0deg) rotateY(0deg);
    transition: transform .35s ease;
}

.card {
    position: absolute;
    inset: 0;
    border-radius: 22px;
    background: #1a1a1a;
    color: #f0f0f0;
    box-shadow: 0 20px 60px rgba(192, 192, 192, .2), inset 0 1px 0 rgba(255, 255, 255, .1);
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transition: transform .5s ease;
    overflow: hidden;
    cursor: grab;
    border: 1px solid rgba(255,255,255,0.1);
}

.card:active {
    cursor: grabbing;
}

.card.is-flipped {
    transform: rotateY(180deg);
}

.side {
    position: absolute;
    inset: 0;
    padding: 26px 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.front {
    transform: rotateY(0deg);
}

.back {
    transform: rotateY(180deg);
    background: #222;
}

.front .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.slug {
    font-size: 12px;
    /* letter-spacing: .14em; */
    line-height: 1.3;
    color: #aaa;
}

.cta,
.accent-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 14px;
    text-decoration: none;
    color: #fff;
    border: 1px solid #555;
    background: transparent;
    transition: all .2s ease;
}

.cta:hover,
.accent-link:hover {
    background: #fff;
    color: #000;
    border-color: #fff;
}

.pair {
    display: grid;
    gap: 10px;
    width: 100%;
    margin: 0 auto;
}

.big {
    color: #aaa;
    font-size: clamp(16px, 2.6vw, 22px);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mini {
    font-size: 14px;
    line-height: 1.45;
    color: #ccc;
}

.pair-back {
    display: grid;
    gap: 12px;
}

.k {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: #888;
}

.v {
    font-size: 14px;
}

.v a {
    color: #3498db;
    text-decoration: none;
}

.v a:hover {
    text-decoration: underline;
}

.flip {
    margin-top: 12px;
    font-size: 12px;
    color: #888;
}

.flip a {
    color: #aaa;
    text-underline-offset: 3px;
}

.shine {
    position: absolute;
    inset: -40%;
    pointer-events: none;
    background:
        radial-gradient(180px 200px at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .1), transparent 60%),
        radial-gradient(240px 260px at calc(var(--mx, 50%) + 120px) calc(var(--my, 50%) - 60px), rgba(255, 255, 255, .05), transparent 70%);
    mix-blend-mode: screen;
    opacity: 0.5;
}

@media(max-width:480px) {
    .cta, .accent-link {
        font-size: 11px;
        padding: 8px 10px;
    }
    .mini {
        font-size: 13px;
    }
    .big {
        white-space: normal;
    }
}


.side {
    position: absolute;
    inset: 0;
    padding: 26px 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.front {
    transform: rotateY(0deg);
}

.back {
    transform: rotateY(180deg);
    background: #f0f0f0;
}

.front .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.slug {
    font-size: 12px;
    line-height: 1.3;
}

.cta,
.accent-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 4px;
    font-size: 14px;
    text-decoration: none;
    color: #aaa;
    border: 1px solid #333;
    background: transparent;
    transition: all .2s ease;
}

.cta:hover,
.accent-link:hover {
    background: #333;
    color: #fff;
    border-color: #333;
}

.pair {
    display: grid;
    gap: 10px;
    width: 100%;
    margin: 0 auto;
}

.big {
    font-size: clamp(24px, 2.6vw, 32px);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mini {
    font-size: 14px;
    line-height: 1.45;
}

.pair-back {
    display: grid;
    gap: 12px;
}

.k {
    font-size: 11px;
    text-transform: uppercase;
    /* letter-spacing: .14em; */
    color: #888;
}

.v {
    font-size: 14px;
}

.v a {
    color: var(--link-color, #0066cc);
    text-decoration: none;
}

.v a:hover {
    text-decoration: underline;
}

.flip {
    margin-top: 12px;
    font-size: 12px;
    color: #888;
}

.flip a {
    color: #555;
    text-underline-offset: 3px;
}

.shine {
    position: absolute;
    inset: -40%;
    pointer-events: none;
    background:
        radial-gradient(180px 200px at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .4), transparent 60%),
        radial-gradient(240px 260px at calc(var(--mx, 50%) + 120px) calc(var(--my, 50%) - 60px), rgba(255, 255, 255, .2), transparent 70%);
    mix-blend-mode: screen;
    opacity: 0.5;
}

@media(max-width:480px) {
    .cta, .accent-link {
        font-size: 11px;
        padding: 8px 10px;
    }
    .mini {
        font-size: 13px;
    }
    .big {
        white-space: normal;
    }
}