:root{--black:#080808;--cream:#eee9dd;--gold:#e7b957;--wine:#683746;--line:rgba(255,255,255,.14)}
*{box-sizing:border-box}
html{background:var(--black)}
body{margin:0;background:var(--black);color:var(--cream);font-family:"DM Sans",sans-serif;font-weight:300}
a{color:inherit;text-decoration:none}
main{position:relative;z-index:1;overflow:hidden;padding:0 3vw 8vw}
.contact-hero{position:relative;min-height:38vh;padding:clamp(3.5rem,5vw,5rem) 2vw clamp(2.5rem,3.5vw,3.5rem);display:flex;align-items:flex-end;border-bottom:1px solid var(--line)}
.contact-intro{position:relative;z-index:2;max-width:1050px}
.contact-kicker{margin:0 0 1.25rem;color:rgba(238,233,221,.45);font-size:.64rem;letter-spacing:.22em;text-transform:uppercase}
.contact-intro h1{margin:0;font-family:"DM Serif Display",serif;font-size:clamp(3rem,4.6vw,5.2rem);font-weight:400;line-height:.9;letter-spacing:-.035em}
.contact-intro h1 i{color:var(--gold);font-weight:400}
.contact-note{max-width:470px;margin:1.4rem 0 0;color:rgba(238,233,221,.55);font-size:.94rem;line-height:1.65}
.contact-routes{display:grid;grid-template-columns:1.2fr .8fr .8fr;border:1px solid var(--line);border-top:0}
.contact-route{position:relative;min-width:0;min-height:190px;padding:1.35rem;display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto 1fr;gap:.8rem 1rem;border-right:1px solid var(--line);overflow:hidden;transition:background-color .35s,color .35s}
.contact-route:last-child{border-right:0}.contact-route:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(231,185,87,.16),rgba(104,55,70,.26));opacity:0;transition:opacity .35s}.contact-route>*{position:relative;z-index:1}
.route-index{grid-column:1/4;font-size:.64rem;letter-spacing:.18em;color:rgba(238,233,221,.34)}
.route-icon{grid-column:1;grid-row:2;align-self:end;width:42px;height:42px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.2);border-radius:50%}.route-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5}.route-icon--x svg{fill:currentColor;stroke:none}
.route-copy{grid-column:2/4;grid-row:2;align-self:end;display:flex;flex-direction:column;gap:.5rem;min-width:0}.route-copy small{color:rgba(238,233,221,.42);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase}.route-copy strong{font-family:"DM Serif Display",serif;font-size:clamp(1.35rem,1.75vw,2.15rem);font-weight:400;line-height:1.05;overflow-wrap:anywhere}
.route-arrow{position:absolute;right:1.7rem;bottom:1.7rem;font-size:1rem;opacity:0;transform:translate(-8px,8px);transition:opacity .3s,transform .3s}
@media(hover:hover){.contact-route:hover:before{opacity:1}.contact-route:hover .route-arrow{opacity:1;transform:none}.contact-route:hover .route-icon{background:var(--gold);border-color:var(--gold);color:#111}}
@media(max-width:900px){main{padding:0 4vw 14vw}.contact-hero{min-height:auto;padding:4.5rem 0 3rem}.contact-intro h1{font-size:clamp(3.2rem,12vw,5rem)}.contact-note{max-width:82%;position:relative;z-index:2}.contact-routes{grid-template-columns:1fr}.contact-route{min-height:155px;border-right:0;border-bottom:1px solid var(--line)}.contact-route:last-child{border-bottom:0}.route-arrow{opacity:.5;transform:none}.route-copy strong{font-size:clamp(1.45rem,6vw,2.1rem)}}
@media(max-width:480px){.contact-intro h1{font-size:17vw}.contact-note{max-width:100%}.contact-route{padding:1.25rem;min-height:170px}.route-arrow{right:1.25rem;bottom:1.25rem}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Compact studio directory: introduction left, contact rows right. */
.contact-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(2rem,5vw,6rem);align-items:center;min-height:72vh;padding:clamp(3rem,6vw,6rem) 5vw clamp(4rem,7vw,7rem)}
.contact-layout .contact-hero{min-height:0;padding:0;border:0;align-items:center}
.contact-layout .contact-routes{display:flex;flex-direction:column;border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.contact-layout .contact-route{min-height:118px;padding:1.6rem 0;display:grid;grid-template-columns:1.25rem 42px minmax(0,1fr);grid-template-rows:1fr;gap:1.2rem;align-items:center;border:0;border-bottom:1px solid var(--line);overflow:visible}
.contact-layout .contact-route:last-child{border-bottom:0}
.contact-layout .contact-route:before{inset:0 -1rem;background:rgba(231,185,87,.045)}
.contact-layout .route-index{grid-column:1;grid-row:1;align-self:center}
.contact-layout .route-icon{grid-column:2;grid-row:1;align-self:center;border:0;border-radius:0}
.contact-layout .route-copy{grid-column:3;grid-row:1;align-self:center;gap:.6rem}
.contact-layout .contact-route:focus-visible{outline:2px solid var(--gold);outline-offset:5px}
@media(hover:hover){.contact-layout .contact-route:hover .route-icon{background:none;color:var(--gold)}.contact-layout .contact-route:hover .route-copy small{color:var(--gold)}}
@media(max-width:900px){.contact-layout{grid-template-columns:1fr;gap:3rem;min-height:0;padding:4.5rem 5vw 5rem}.contact-layout .contact-route{min-height:110px}.contact-layout .contact-note{max-width:470px}}
@media(max-width:480px){.contact-layout .contact-route{grid-template-columns:1rem 30px minmax(0,1fr);gap:.75rem;padding:1.4rem 0}.contact-layout .route-icon{width:30px}.contact-layout .route-copy strong{font-size:clamp(1.45rem,6vw,2.1rem)}}

/* Framed directory, matching the About panels. */
.contact-layout .contact-routes{border:1px solid var(--line);background:#0d0d0d}
.contact-layout .contact-route{padding:1.6rem 1.5rem;grid-template-columns:1.25rem 42px minmax(0,1fr)}
.contact-layout .contact-route:before{inset:0;background:#151116}
.contact-layout .route-index{align-self:stretch;display:flex;align-items:center;border-right:1px solid var(--line);margin:-1.6rem 0;padding-right:1rem;width:2.25rem}
.contact-layout .route-icon{margin-left:.5rem}
.contact-layout .route-copy{padding-left:.25rem}
.contact-layout .route-label{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.contact-layout .route-active{font-family:"DM Sans",sans-serif;color:var(--gold);font-size:.75rem;font-weight:400;letter-spacing:0;text-transform:none;padding:.25rem .5rem;border:1px solid rgba(231,185,87,.28);border-radius:3px;line-height:1.2}
@media(max-width:480px){.contact-layout .contact-route{padding:1.4rem 1rem;grid-template-columns:1rem 30px minmax(0,1fr);gap:.75rem}.contact-layout .route-index{margin:-1.4rem 0;width:1.6rem;padding-right:.6rem}.contact-layout .route-icon{margin-left:.2rem}.contact-layout .route-copy{padding-left:.2rem}.contact-layout .route-label{gap:.5rem}.contact-layout .route-active{font-size:.75rem}}

.contact-layout .contact-route--active{grid-template-columns:1.25rem 42px minmax(0,1fr) auto}
.contact-layout .contact-route--active>.route-active{position:static;grid-column:4;grid-row:1;align-self:center;justify-self:end;color:rgba(238,233,221,.5);background:none;border:0;border-radius:0;padding:0;font-size:.75rem;white-space:nowrap}
@media(max-width:480px){.contact-layout .contact-route--active{grid-template-columns:1rem 30px minmax(0,1fr)}.contact-layout .contact-route--active>.route-active{grid-column:3;grid-row:2;justify-self:end;margin-top:.15rem}}

/* Tighter directory spacing, preserving the typography. */
.contact-layout .contact-route{min-height:94px;padding:1.1rem 1.25rem;gap:1rem}
.contact-layout .route-index{margin:-1.1rem 0}
.contact-layout .route-copy{gap:.4rem}
@media(max-width:900px){.contact-layout .contact-route{min-height:94px}}
@media(max-width:480px){.contact-layout .contact-route{min-height:90px;padding:1rem;gap:.65rem}.contact-layout .route-index{margin:-1rem 0}.contact-layout .contact-route--active>.route-active{margin-top:0}}

.contact-layout .route-copy strong{font-size:clamp(1.2rem,1.5vw,1.85rem)}
.contact-layout .route-index{transition:color .25s}
@media(hover:hover){.contact-layout .contact-route:hover .route-index{color:var(--gold)}}
.contact-layout .contact-route:focus-visible .route-index{color:var(--gold)}
@media(max-width:900px){.contact-layout .route-copy strong{font-size:clamp(1.3rem,5.2vw,1.8rem)}}

/* Reference layout: one email row above two social cells. */
.contact-layout{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:4vw}
.contact-layout .contact-directory{display:block;background:transparent;border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.directory-email{display:grid;grid-template-columns:auto minmax(0,1fr) 40px;align-items:center;gap:1.5rem;min-height:110px;padding:1.5rem 0;border-bottom:1px solid var(--line)}
.directory-label{display:flex;align-items:center;gap:.55rem;color:rgba(238,233,221,.5);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase}
.directory-label svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.4}
.directory-email strong{font-family:"DM Serif Display",serif;font-size:clamp(1.3rem,2vw,2.3rem);font-weight:400;line-height:1.1;letter-spacing:-.035em;overflow-wrap:anywhere}
.directory-email-arrow{width:40px;height:40px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;font-size:1.1rem}
.directory-socials{display:grid;grid-template-columns:1fr 1fr}
.directory-social{position:relative;min-width:0;min-height:86px;display:flex;align-items:center;gap:.85rem;padding:1.25rem 1.4rem 1.25rem 0}
.directory-social+.directory-social{border-left:1px solid var(--line);padding-left:1.4rem}
.directory-social>svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7}.directory-social>svg.directory-x{fill:currentColor;stroke:none}
.directory-social-copy{display:flex;flex-direction:column;gap:.35rem;font-size:.95rem}.directory-social-copy small{font-size:.75rem;color:rgba(238,233,221,.5)}
.directory-social-arrow{margin-left:auto;color:rgba(238,233,221,.5)}
.directory-active{position:absolute;right:1.4rem;bottom:.45rem;font-size:.65rem;color:rgba(238,233,221,.5);white-space:nowrap}
.directory-email,.directory-social{transition:background-color .25s}.directory-email-arrow,.directory-social-arrow{transition:color .25s,border-color .25s}
@media(hover:hover){.directory-email:hover,.directory-social:hover{background:rgba(255,255,255,.025)}.directory-email:hover .directory-email-arrow{color:var(--gold);border-color:var(--gold)}.directory-social:hover .directory-social-arrow,.directory-social:hover>svg{color:var(--gold)}}
.contact-directory a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media(max-width:1100px){.directory-email{gap:1rem}.directory-email strong{font-size:clamp(1.25rem,2.1vw,2rem)}}
@media(max-width:900px){.contact-layout{grid-template-columns:1fr}.directory-email strong{font-size:clamp(1.35rem,4.5vw,2.3rem)}}
@media(max-width:480px){.directory-email{grid-template-columns:minmax(0,1fr) 34px;gap:.65rem;min-height:110px;padding:1.2rem 0}.directory-label{grid-column:1}.directory-email strong{grid-column:1;font-size:clamp(1.3rem,6vw,1.7rem)}.directory-email-arrow{grid-column:2;grid-row:1/3;width:34px;height:34px}.directory-social{gap:.65rem;padding-right:.8rem;min-height:95px}.directory-social+.directory-social{padding-left:.8rem}.directory-active{right:.8rem;font-size:.6rem}.directory-social-copy{font-size:.875rem}.directory-social-copy small{font-size:.7rem}}

.directory-email-arrow{transition:background-color .3s,border-color .3s,color .3s}
.directory-email-arrow>span{display:block;transition:transform .35s}
.directory-social-arrow{display:inline-block;transition:transform .35s,color .3s}
@media(hover:hover){.directory-email:hover .directory-email-arrow{background:var(--gold);border-color:var(--gold);color:#080808}.directory-email:hover .directory-email-arrow>span,.directory-social:hover .directory-social-arrow{transform:rotate(45deg)}}
@media(prefers-reduced-motion:reduce){.directory-email-arrow>span,.directory-social-arrow{transition:none}}