.contacts-hero {
    position:relative;
    height:min(100svh,calc(max(320px,39vw) + 10vw));
    overflow:hidden;
    background:var(--paper);
}
.contacts-hero-photo {
    position:absolute;
    width:100%;
    height:266.67%;
    top:-125.47%;
    object-fit:cover;
}
.contacts-hero-copy {
    position:absolute;
    inset:auto var(--gutter) clamp(4px,.35vw,8px);
    width:max-content;
    max-width:calc(100% - 2 * var(--gutter));
    margin-inline:auto;
    color:#fff;
}
.contacts-hero-copy h1 {
    font-size:20vw;
    line-height:.78;
    font-weight:700;
    letter-spacing:-.015em;
    white-space:nowrap;
}
.contacts-hero-values {
    display:grid;
    grid-template-columns:40.43478% 1fr auto;
    margin-bottom:-4.35vw;
    padding-inline:1vw .5vw;
    font-size:var(--body);
    font-weight:500;
    text-transform:uppercase;
}
.contacts-location {
    position:relative;
    display:grid;
    place-items:center;
    min-height:clamp(360px,37.03125vw,720px);
    padding:36px var(--gutter);
    background:#282828;
}
.contacts-location-map {
    position:absolute;
    inset:0;
    display:block;
    width:100%;
    height:100%;
    border:0;
    filter:invert(.9) hue-rotate(180deg);
}
.contacts-cards {
    position:relative;
    width:min(100%,clamp(240px,18.333333vw,352px));
    display:grid;
    gap:clamp(8px,.520833vw,10px);
}
.contacts-card {
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    gap:clamp(12px,1.041667vw,20px);
    padding:clamp(12px,1.041667vw,20px) clamp(10px,.520833vw,14px);
    background:#fff;
    color:#161616;
    font-size:clamp(14px,.9375vw,18px);
    line-height:1.1;
}
.contacts-card dt {color:#666;font-weight:600}
.contacts-card dd {margin:0;font-size:16px}
.contacts-card a:hover {text-decoration:underline}
.contacts-card a:focus-visible {outline-color:#161616}
@media(max-width:600px) {
    .contacts-hero {height:min(100svh,calc(340px + 10vw))}
    .contacts-hero-photo {height:100%;top:0;object-position:center 67%}
    .contacts-hero-values {grid-template-columns:1fr auto 1fr;gap:8px;font-size:10px}
    .contacts-hero-values span:last-child {text-align:right}
    .contacts-hero-copy h1 {font-size:19vw}
}