.contact-redesign { padding-block:160px 100px; text-align:left; }
.contact-redesign .contact-eyebrow { color:#e04349; font:700 10px/1.6 Arial,sans-serif; letter-spacing:.15em; margin:0 0 22px; }
.contact-redesign h1 { font:650 clamp(42px,5vw,68px)/1.08 Arial,sans-serif; letter-spacing:-.045em; margin:0 0 25px; }
.contact-redesign .contact-lead { font:17px/1.8 Arial,sans-serif; color:#babbb9; margin:0 0 55px; }
.contact-layout { display:grid; grid-template-columns:minmax(0,460px); gap:0; align-items:start; }
.contact-person { background:#17191b; border:1px solid #ffffff20; border-radius:12px; overflow:hidden; }
.contact-redesign .contact-person-role { margin:0 0 6px; color:#e04349; font:600 13px/1.6 Arial,sans-serif; }
.contact-person-body { padding:24px; }
.contact-person img { display:block; width:100%; height:300px; object-fit:cover; object-position:50% 40%; margin-bottom:18px; border-radius:12px; }
.contact-person h2 { font:600 26px/1.2 Arial,sans-serif; margin:0 0 5px; letter-spacing:-.02em; }
.contact-redesign .contact-person-studio { font:13px/1.6 Arial,sans-serif; color:#92988e; margin:0 0 16px; }
.contact-person dl { margin:0; }
.contact-person dl div + div { margin-top:12px; }
.contact-person dt { color:#92988e; font:12px/1.5 Arial,sans-serif; margin-bottom:4px; }
.contact-person dd { margin:0; font:600 15px/1.6 Arial,sans-serif; overflow-wrap:anywhere; }
.contact-person dd a:hover { color:#e04349; text-decoration:underline; text-underline-offset:3px; }
.contact-discord { display:flex; align-items:center; justify-content:space-between; border-top:1px solid #ffffff20; padding-top:22px; margin-top:28px; color:#e04349; font:700 13px/1.6 Arial,sans-serif; }
.contact-redesign .contact-form { margin:0; max-width:none; padding:0; border:0; background:none; border-radius:0; gap:12px; }
.contact-redesign .contact-form label { font:600 13px/1.6 Arial,sans-serif; margin-top:10px; }
.contact-redesign .contact-form input,.contact-redesign .contact-form textarea { padding:16px; border:1px solid #ffffff25; border-radius:0; font:15px/1.6 Arial,sans-serif; background:#17191b; color:var(--site-white); }
.contact-redesign .contact-form textarea { min-height:220px; }
.contact-redesign .contact-form button { align-self:flex-start; border-radius:0; padding:16px 28px; font:700 13px/1.6 Arial,sans-serif; margin-top:15px; }
.contact-redesign :focus-visible { outline:2px solid #e04349; outline-offset:4px; }
@media(max-width:1000px) { .contact-layout { gap:40px; } }
@media(max-width:760px) { .contact-redesign { padding-block:125px 70px; } .contact-layout { grid-template-columns:1fr; gap:45px; } .contact-person { max-width:480px; } .contact-redesign .contact-lead { margin-bottom:35px; } }
#contact-message { scroll-margin-top: 110px; }

/* Keep the contact details open, framing only the portrait. */
.contact-person{background:transparent;border:0;border-radius:0;overflow:visible}
.contact-person-body{padding:0}
.contact-person img{box-sizing:border-box;border:1px solid #777a7e99;border-radius:12px}

/* A balanced square portrait with identity details inside its frame. */
.contact-portrait{position:relative;overflow:hidden;border:1px solid #777a7e99;border-radius:8px;isolation:isolate;aspect-ratio:1}
:root body .contact-person .contact-portrait img{display:block;width:100%;height:100%;aspect-ratio:1;object-fit:cover;object-position:50% 52%;margin:0;border:0;border-radius:0;transform:none}
.contact-portrait-caption{position:absolute;inset:auto 0 0;padding:64px 24px 24px;background:linear-gradient(transparent,rgba(0,0,0,.84));color:var(--site-white)}
.contact-redesign .contact-portrait-caption .contact-person-studio{margin:0;color:#d5d5d2}
.contact-person dl{margin-top:24px}
@media(max-width:760px){.contact-portrait-caption{padding:56px 20px 20px}}

/* One contact card: a landscape portrait above the contact details. */
.contact-person{background:#191b1e;border:1px solid #777a7e66;border-radius:10px;overflow:hidden}
.contact-portrait{aspect-ratio:4/3;border:0;border-radius:0}
:root body .contact-person .contact-portrait img{aspect-ratio:auto;object-position:50% 42%}
.contact-person dl{margin:0;padding:24px}
.contact-person dl div+div{margin-top:18px}
@media(max-width:760px){.contact-person dl{padding:20px}}