.nav { gap: 24px; }
.nav-links { display: flex; align-items: center; gap: 30px; margin-left: auto; }
.nav-links a { color: #a8a8a4; font: 500 13px "JetBrains Mono", monospace; transition: color .2s; }
.nav-links a:hover { color: var(--paper); }
.nav-contact { border: 0; cursor: pointer; color: var(--paper); }
.contact-trigger { border: 1px solid #8da0ff; background: transparent; color: var(--paper); padding: 16px 19px; font: 600 14px Roboto, sans-serif; cursor: pointer; transition: background .2s, color .2s; display: inline-block; text-decoration: none; }
.contact-trigger:hover { color: var(--blue); background: var(--paper); }
.contact-trigger-cal { background: var(--paper); color: var(--blue); border-color: var(--paper); }
.contact-trigger-cal:hover { background: transparent; color: var(--paper); }
.contact-trigger span { margin-left: 24px; }
.contact .email { margin-top: 27px; }
.modal-panel a { color: var(--blue); }
.site-footer { display: block; min-height: 0; border-top: 1px solid var(--line); padding: 72px 0 0; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1.25fr 1fr; gap: 42px; padding-bottom: 64px; }
.footer-brand p { max-width: 265px; margin: 22px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.footer-grid > div:not(.footer-brand) { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.footer-label { color: var(--blue-light); font: 500 10px "JetBrains Mono", monospace; letter-spacing: .08em; margin: 0 0 10px; }
.footer-grid a, .footer-grid p:not(.footer-label) { color: #c6c6c1; font-size: 13px; line-height: 1.35; margin: 0; }
.footer-grid a:hover { color: var(--blue-light); }
.footer-grid button { color: var(--paper); background: none; padding: 0; border: 0; font: 700 13px Roboto, sans-serif; cursor: pointer; }
.footer-bottom { border-top: 1px solid var(--line); min-height: 68px; display: flex; justify-content: space-between; align-items: center; }
.footer-bottom p { color: var(--muted); font-size: 11px; margin: 0; }
.footer-bottom .status { text-align: right; font-size: 9px; }
.contact-modal { position: fixed; z-index: 30; inset: 0; display: grid; place-items: center; padding: 22px; background: #000000b8; opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; }
.contact-modal.is-open { opacity: 1; visibility: visible; }
.modal-panel { position: relative; width: min(100%, 590px); max-height: min(92vh, 900px); overflow: auto; padding: 38px; background: var(--paper); color: var(--void); transform: translateY(12px); transition: transform .2s; }
.contact-modal.is-open .modal-panel { transform: none; }
.modal-close { position: absolute; top: 18px; right: 20px; border: 0; background: none; color: var(--void); font: 300 34px/1 Roboto, sans-serif; cursor: pointer; }
.modal-panel h2 { max-width: 430px; margin: 20px 0 9px; font-size: clamp(35px, 5vw, 54px); letter-spacing: -.06em; line-height: .93; }
.modal-panel > p:not(.label) { color: #42423e; margin: 0 0 28px; }
#contact-form { display: grid; gap: 16px; }
#contact-form label { display: grid; gap: 8px; color: #71716e; font: 500 10px "JetBrains Mono", monospace; letter-spacing: .08em; }
#contact-form input, #contact-form textarea, #contact-form select { width: 100%; border: 1px solid #c7c7c0; border-radius: 0; background: transparent; color: var(--void); padding: 12px; outline-color: var(--blue); font: 15px Roboto, sans-serif; resize: vertical; }
#contact-form select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--blue) 50%), linear-gradient(135deg, var(--blue) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.modal-submit { margin-top: 8px; width: max-content; border: 0; background: var(--blue); color: var(--paper); padding: 14px 17px; font: 600 14px Roboto, sans-serif; cursor: pointer; }
.modal-submit span { margin-left: 20px; }
@media (max-width: 840px) { .nav-links { display: none; } .nav { gap: 14px; } .nav-contact { margin-left: auto; } .footer-grid { grid-template-columns: 1.4fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; gap: 34px; } .footer-bottom { display: block; padding: 22px 0; } .footer-bottom .status { text-align: left; margin-top: 13px; } .modal-panel { padding: 31px 22px 26px; } }