.contact-page { background: #fff; min-width: 280px; }
.contact-page .site-header { z-index: 30; }
body.contact-page .site-audio-toggle { top: 20px; }
.contact-layout { --dial-size: min(34vw, 480px, max(310px, calc(100svh - 300px))); display: grid; grid-template-columns: .9fr 1.2fr; align-items: center; gap: clamp(45px, 5vw, 85px); min-height: 100svh; width: min(100%, 1540px); margin: 0 auto; padding: 115px 5vw 125px; }
.contact-instrument { width: var(--dial-size); max-width: 100%; justify-self: center; }
.contact-dial { --orbit: calc(var(--dial-size) * .355); --hole: calc(var(--dial-size) * .168); position: relative; width: 100%; aspect-ratio: 1; isolation: isolate; }
.dial-bezel { position: absolute; inset: -8px; border: 1px solid #dbdcd6; border-radius: 50%; box-shadow: 0 3px 0 #ecece8; background: #f5f5f1; }
.dial-face { position: absolute; inset: 0; overflow: hidden; border-radius: 50%; }
.dial-rotor { position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(140deg, #222321 0%, #151615 48%, #111211 100%); transform: rotate(var(--rotation)); transition: transform 900ms cubic-bezier(.22,.8,.15,1); box-shadow: inset 0 0 0 1px #090a09, inset 0 1px 1px #ffffff70, 0 7px 18px #0000000c; }
.dial-groove { position: absolute; border: 1px solid #74766d; opacity: .4; border-radius: 50%; pointer-events: none; }
.dial-groove-outer { inset: 6.6%; }
.dial-groove-inner { inset: 25%; }
.dial-choice { position: absolute; z-index: 2; left: 50%; top: 50%; display: grid; place-items: center; width: var(--hole); height: var(--hole); border: 0; border-radius: 50%; padding: 0; background: #f8f8f3; color: #252722; transform: translate(-50%, -50%) rotate(var(--slot-angle)) translateY(calc(0px - var(--orbit))); box-shadow: inset 0 2px 3px #0000001c, 0 0 0 5px #373a35, 0 0 0 6px #93968b; touch-action: manipulation; }
.dial-choice::after { content: ''; position: absolute; bottom: 11%; left: calc(50% - 1.5px); width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0; }
.dial-choice[aria-selected="true"] { color: #d3532c; }
.dial-choice[aria-selected="true"]::after { opacity: 1; }
.dial-choice:hover { background: #fff; }
.dial-choice:focus-visible { outline: 2px solid #d3532c; outline-offset: 8px; }
.dial-icon { width: 37%; height: 37%; display: block; transform: rotate(calc(0deg - var(--rotation) - var(--slot-angle))); transition: transform 900ms cubic-bezier(.22,.8,.15,1); }
.dial-icon svg { display: block; width: 100%; height: 100%; overflow: visible; }
.dial-rivet { position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; margin: -2.5px; background: #a4a79d; border: 1px solid #55594e; box-shadow: inset 1px 1px 1px #e0e1dc; border-radius: 50%; transform: rotate(var(--slot-angle)) translateY(calc(0px - var(--orbit))); }
.dial-hub { position: absolute; inset: 29.3%; display: flex; align-items: center; justify-content: center; flex-direction: column; border: 1px solid #bdbfb3; border-radius: 50%; color: #f3f3e9; background: #171917; box-shadow: 0 0 0 9px #171917, 0 0 0 10px #565a50; pointer-events: none; }
.hub-brand { font-size: calc(var(--dial-size) * .123); line-height: .94; font-weight: 700; letter-spacing: calc(var(--dial-size) * -.01); margin: 0; padding-right: .08em; }
.dial-index { position: absolute; z-index: 5; top: -22px; left: 50%; width: 1px; height: 36px; background: #b2b4aa; }
.dial-index i { position: absolute; left: -2px; top: -1px; width: 5px; height: 5px; background: #d3532c; border-radius: 50%; }
.dial-stop { position: absolute; z-index: 4; right: 3%; bottom: 11%; width: 9%; height: 16%; border: 1px solid #cdcec5; background: linear-gradient(105deg,#fafaf7,#e2e3dc); clip-path: polygon(35% 0,100% 18%,70% 100%,0 77%); transform: rotate(19deg); box-shadow: 0 5px 8px #00000020; pointer-events: none; }
.contact-panel { min-width: 0; max-width: 740px; width: 100%; outline: none; }
.contact-panel:focus-visible { outline: 1px solid #d3d5cb; outline-offset: 15px; }
.contact-panel-content { opacity: 1; transform: translateY(0); transition: opacity 190ms ease, transform 280ms ease; }
.contact-panel.is-switching .contact-panel-content { opacity: 0; transform: translateY(7px); }
.contact-panel h1 { margin: 0 0 28px; font-size: clamp(48px, 5.4vw, 78px); font-weight: 400; line-height: .98; letter-spacing: -.065em; }
.contact-rows { display: grid; gap: 14px; }
.contact-row { display: grid; grid-template-columns: minmax(150px,.74fr) minmax(0,1fr); align-items: center; gap: 14px; min-height: 220px; }
.contact-head-wrap { display: grid; place-items: center; height: 220px; perspective: 900px; }
.contact-person-head { display: block; width: 100%; height: 220px; object-fit: contain; user-select: none; transform: rotateX(var(--head-x,0deg)) rotateY(var(--head-y,0deg)); transition: transform 360ms cubic-bezier(.2,.8,.2,1); }
.contact-person-details { position: relative; isolation: isolate; display: flex; flex-direction: column; min-width: 0; border: 1px solid #c8c9c4; background: #ffffffe6; overflow: hidden; }
.contact-portrait-echo { position: absolute; z-index: -1; width: 100%; height: 200%; inset: -45% 0 auto 12%; object-fit: contain; opacity: .21; filter: blur(17px); pointer-events: none; }
.contact-person { position: relative; display: block; padding: 22px 24px; border-bottom: 1px solid #c8c9c4; font-size: 25px; line-height: 1.2; letter-spacing: -.035em; }
.contact-row a { position: relative; display: flex; align-items: center; min-height: 79px; max-width: 100%; overflow-wrap: anywhere; padding: 22px 24px; color: #272924; font: 14px/1.5 var(--mono); text-decoration: none; transition: background-color 160ms ease, color 160ms ease; }
.contact-row a:hover { color: #d3532c; background: #ffffff85; }
.contact-row a:focus-visible { outline: 2px solid #d3532c; outline-offset: -5px; }
.contact-link-pending { color: #b3b6ac; font: 11px var(--mono); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.contact-noscript { margin: 0 auto 110px; text-align: center; font-size: 13px; }

@media (min-width: 1600px) { .contact-layout { padding-inline: 50px; gap: 100px; } }
@media (max-width: 1100px) and (min-width: 761px) { .contact-layout { --dial-size: min(33vw,390px); padding-inline: 4vw; gap: 5vw; grid-template-columns: .8fr 1.2fr; } .contact-row { grid-template-columns: minmax(110px,.65fr) minmax(0,1fr); gap: 8px; min-height: 190px; } .contact-head-wrap,.contact-person-head { height: 185px; } .contact-person,.contact-row a { padding-inline: 18px; } .contact-person { font-size: 22px; } .contact-row a { font-size: 12px; } }
@media (max-width: 760px) {
 .contact-layout { --dial-size: min(55vw,270px); display: flex; flex-direction: column; gap: 44px; align-items: center; min-height: 100svh; padding: 145px 24px 135px; }
 body.contact-page .site-audio-toggle { top: 76px; }
 .contact-instrument { flex-shrink: 0; }
 .contact-panel { max-width: 520px; }
 .contact-panel h1 { margin: 0 0 25px; font-size: clamp(44px,12vw,61px); }
 .contact-rows { gap: 20px; }
 .contact-row { grid-template-columns: minmax(110px,.72fr) minmax(0,1fr); gap: 10px; min-height: 175px; }
 .contact-head-wrap,.contact-person-head { height: 175px; }
 .contact-person { padding: 18px 15px; font-size: 22px; }
 .contact-row a { min-height: 68px; padding: 18px 15px; font-size: 12px; }
}
@media (max-width: 360px) { .contact-layout { padding-inline: 18px; } .contact-row { grid-template-columns: 100px minmax(0,1fr); } .contact-head-wrap,.contact-person-head { height: 150px; } .contact-person,.contact-row a { padding-inline: 12px; } .contact-row a { font-size: 11px; } }
@media (prefers-reduced-motion: reduce) { .dial-rotor,.dial-icon,.contact-panel-content,.contact-person-head { transition: none !important; } }