/* Keep the existing works link above the hero copy and decorations. */
@media (min-width:1201px) {
    body.home section.hero > a.hero-case {
        z-index: 5;
        pointer-events: auto;
        cursor: pointer;
    }
    body.home section.hero::before,
    body.home section.hero::after,
    body.home section.hero > .hero-art { pointer-events: none; }
    body.home section.hero > a.hero-case:focus-visible {
        outline: 3px solid #70d4ff;
        outline-offset: 5px;
    }
}
/* Phones and tablets: a true circular contact panel. */
@media (max-width:1200px) {
    body section#contact.contact .contact-circle {
        position: relative;
        inset: auto;
        box-sizing: border-box;
        width: 100%;
        max-width: 620px;
        height: auto;
        min-height: 0;
        max-height: none;
        aspect-ratio: 1 / 1;
        border-radius: 50%;
        margin: 0 auto;
        transform: none;
        overflow: hidden;
        display: grid;
        grid-template-columns: minmax(0,1fr);
        grid-template-rows: minmax(0,1fr) minmax(0,1fr);
    }
    body section#contact.contact .contact-circle > div {
        box-sizing: border-box;
        min-height: 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    body section#contact.contact .contact-circle > div:first-child {
        padding: 10% 5% 0;
    }
    body section#contact.contact .contact-circle > div:last-child {
        padding: 0 5% 10%;
    }
}

@media (min-width:768px) and (max-width:1200px) {
    body section#contact.contact .contact-grid { display:block; }
    body section#contact.contact .contact-circle { margin:40px auto 0; }
    body section#contact.contact .contact-circle h3 { font-size:clamp(20px,2.4vw,28px);margin-bottom:22px; }
    body section#contact.contact .contact-circle .phone { font-size:clamp(30px,3.6vw,42px); }
}