.contact-dialog { border:0; padding:0; margin:auto; width:min(560px,calc(100% - 32px)); max-height:calc(var(--viewport-height,100vh) - 32px); overflow:auto; border-radius:24px; background:var(--dark,#fff); color:var(--heading,#111); font-family:inherit; box-shadow:0 24px 100px #0003; }
.contact-dialog::backdrop { background:rgba(12,16,24,.38); backdrop-filter:blur(8px); }
.contact-dialog[open] { animation:contact-enter 480ms cubic-bezier(.22,.1,.3,1) both; }
.contact-dialog[open]::backdrop { animation:contact-fade 480ms cubic-bezier(.22,.1,.3,1) both; }
.contact-dialog.is-closing { animation:contact-exit 360ms cubic-bezier(.4,0,.2,1) both; }
.contact-dialog.is-closing::backdrop { animation:contact-backdrop-exit 360ms cubic-bezier(.4,0,.2,1) both; }
.contact-content { padding:44px; }
.contact-dialog h2 { font-size:32px; line-height:1.15; letter-spacing:-.04em; margin:0 40px 24px 0; color:inherit; }
.contact-close { position:absolute; right:20px; top:20px; width:36px; height:36px; border:0; border-radius:50%; background:rgba(128,128,128,.12); color:inherit; display:grid; place-items:center; padding:0; line-height:1; cursor:pointer; }
.contact-form { display:grid; gap:12px; }
.contact-form label { display:grid; gap:8px; font-size:14px; font-weight:500; }
.contact-form input,.contact-form textarea { box-sizing:border-box; width:100%; border:1px solid var(--border,#ddd); border-radius:10px; background:rgba(128,128,128,.05); color:inherit; font:inherit; font-size:16px; padding:12px 14px; outline:none; box-shadow:none; transition:border-color 160ms ease; }
.contact-form textarea { min-height:120px; resize:none; }
/* Share the prototype button's highlight and texture layers, in the site's orange. */
.contact-send {
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  box-sizing:border-box; margin:6px 0 0; padding:14px 24px; border:0; border-radius:999px;
  color:#231300; font:inherit; font-size:16px; font-weight:500; line-height:24px; letter-spacing:-.4px;
  text-decoration:none; white-space:nowrap; cursor:pointer;
  background:linear-gradient(180deg,#ffb34d 0%,#ff9500 45%,#ed7b00 100%);
  box-shadow:0 0 0 6px rgb(255 149 0 / .12),0 10px 30px rgb(237 123 0 / .35),inset 0 2px 10px rgb(255 255 255 / .22);
  overflow:hidden; isolation:isolate;
  transition:transform .3s ease,box-shadow .3s ease;
}
@media(hover:hover) and (pointer:fine) {
  .contact-send:enabled:hover {
    transform:translateY(-2px) scale(1.02);
    box-shadow:0 0 0 10px rgb(255 149 0 / .16),0 16px 40px rgb(237 123 0 / .42),inset 0 2px 10px rgb(255 255 255 / .28);
  }
}
.contact-send:focus-visible { outline:2px solid #ff9500; outline-offset:12px; }
.contact-send:enabled:active { transform:scale(.98); }
.contact-send:disabled { opacity:.65; cursor:wait; }
@media(prefers-reduced-motion:reduce) {
  .contact-send { transition:none; }
  .contact-send:is(:hover,:focus-visible,:active) { transform:none; }
}
.contact-status { margin:0; color:var(--portfolio-copy,#555); font-size:14px; line-height:1.5; }
.contact-status:empty { display:none; }
.contact-direct { margin-top:24px; padding-top:20px; border-top:1px solid var(--border,#ddd); font-size:14px; color:var(--portfolio-copy,#555); }
.contact-direct p { margin:0 0 8px; font-size:inherit; }
.contact-copy { border:0; background:none; padding:4px 0; color:var(--heading,#111); font:inherit; cursor:pointer; display:flex; gap:12px; align-items:center; flex-wrap:wrap; text-align:left; }
.contact-copy span { color:var(--portfolio-copy,#555); font-size:12px; }
.contact-trap { position:absolute; left:-10000px; }
@keyframes contact-enter { from { opacity:0; transform:translateY(12px) scale(.985); } to { opacity:1; transform:none; } }
@keyframes contact-exit { from { opacity:var(--contact-exit-opacity,1); transform:var(--contact-exit-transform,none); } to { opacity:0; transform:translateY(16px) scale(.98); } }
@keyframes contact-backdrop-exit { from { opacity:var(--contact-backdrop-opacity,1); } to { opacity:0; } }
@keyframes contact-fade { from { opacity:0; } to { opacity:1; } }
@media(max-width:599px) { .contact-content { padding:32px 24px; } .contact-dialog h2 { font-size:28px; } }
@media(prefers-reduced-motion:reduce) { .contact-dialog[open],.contact-dialog[open]::backdrop { animation:none; } }

.contact-close svg { display:block; width:20px; height:20px; flex:none; }

.contact-field-label { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.contact-form input::placeholder,.contact-form textarea::placeholder { color:var(--portfolio-copy,#555); opacity:.8; }
.contact-form input:focus,.contact-form input:focus-visible,
.contact-form textarea:focus,.contact-form textarea:focus-visible { outline:none; box-shadow:none; border-color:var(--portfolio-copy,#555); }

.contact-copy .contact-copy-icon { display:block; width:14px; height:14px; min-width:14px; max-width:14px; flex:0 0 14px; color:inherit; }
.contact-copy { gap:6px; color:var(--portfolio-copy,#555); }
.contact-copy-feedback:empty { display:none; }

.contact-copy-glyph,.contact-check-glyph { transition:opacity 180ms ease; }
.contact-check-glyph { opacity:0; }
.contact-copy.is-copied .contact-copy-glyph { opacity:0; }
.contact-copy.is-copied .contact-check-glyph { opacity:1; }
.contact-copy:not(.has-copy-error) .contact-copy-feedback { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media(prefers-reduced-motion:reduce) { .contact-copy-glyph,.contact-check-glyph { transition:none; } }