#contact-modal {
            position: fixed;
            inset: 0;
            z-index: 100;
            display: flex;
            visibility: hidden;
            pointer-events: none;
            transition: visibility 0s linear 240ms;
            align-items: center;
            justify-content: center;
            padding: 1.5rem;
        }
        #contact-modal.is-open {
            visibility: visible;
            pointer-events: auto;
            transition-delay: 0s;
        }
        #contact-modal .contact-backdrop {
            position: absolute;
            inset: 0;
            background: rgba(15, 23, 42, 0.55);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            opacity: 0;
            transition: opacity 200ms ease;
        }
        #contact-modal .contact-dialog {
            position: relative;
            width: 100%;
            max-width: 540px;
            background: #ffffff;
            border-radius: 1rem;
            border: 1px solid rgba(15, 23, 42, 0.06);
            box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22), 0 4px 12px rgba(15, 23, 42, 0.08);
            padding: 2rem 2rem 1.75rem;
            max-height: calc(100vh - 3rem);
            overflow-y: auto;
            transform: translateY(8px) scale(0.985);
            opacity: 0;
            transition: opacity 200ms ease, transform 240ms var(--motion-ease);
        }
        #contact-modal.is-open .contact-backdrop { opacity: 1; }
        #contact-modal.is-open .contact-dialog { transform: translateY(0) scale(1); opacity: 1; }
        #contact-modal .contact-close {
            position: absolute;
            top: 0.875rem;
            right: 0.875rem;
            width: 2.25rem;
            height: 2.25rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 9999px;
            color: rgb(100 116 139);
            background: transparent;
            border: 0;
            cursor: pointer;
            transition: background 160ms ease, color 160ms ease;
        }
        #contact-modal .contact-close:hover {
            background: rgb(241 245 249);
            color: rgb(15 23 42);
        }
        #contact-modal .contact-close:focus-visible {
            outline: 2px solid rgb(27 107 81);
            outline-offset: 2px;
        }
        #contact-modal .contact-title {
            font-family: 'Newsreader', ui-serif, Georgia, serif;
            font-size: 30px;
            line-height: 1.15;
            letter-spacing: -0.012em;
            font-weight: 400;
            color: rgb(15 23 42);
            margin: 0 0 0.4rem;
            padding-right: 2rem;
        }
        #contact-modal .contact-subtitle {
            font-size: 14px;
            line-height: 1.55;
            color: rgb(100 116 139);
            margin: 0 0 1.5rem;
        }
        #contact-modal .contact-field {
            display: flex;
            flex-direction: column;
            gap: 0.4rem;
            margin-bottom: 1rem;
        }
        #contact-modal .contact-field-label {
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: rgb(71 85 105);
        }
        #contact-modal .contact-input,
        #contact-modal .contact-textarea {
            font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
            font-size: 15px;
            color: rgb(15 23 42);
            background: #ffffff;
            border: 1px solid rgb(203 213 225);
            border-radius: 0.5rem;
            padding: 0.625rem 0.875rem;
            transition: border-color 160ms ease, box-shadow 160ms ease;
            width: 100%;
            appearance: none;
            -webkit-appearance: none;
        }
        #contact-modal .contact-textarea {
            min-height: 160px;
            resize: vertical;
            line-height: 1.55;
        }
        #contact-modal .contact-input::placeholder,
        #contact-modal .contact-textarea::placeholder {
            color: rgb(148 163 184);
        }
        #contact-modal .contact-input:focus,
        #contact-modal .contact-textarea:focus {
            outline: none;
            border-color: rgb(27 107 81);
            box-shadow: 0 0 0 3px rgba(27, 107, 81, 0.16);
        }
        #contact-modal .contact-input.is-invalid,
        #contact-modal .contact-textarea.is-invalid {
            border-color: rgb(186 26 26);
            box-shadow: 0 0 0 3px rgba(186, 26, 26, 0.14);
        }
        #contact-modal .contact-field-row {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            font-size: 12px;
            color: rgb(148 163 184);
            margin-top: 0.25rem;
            min-height: 1em;
            gap: 0.75rem;
        }
        #contact-modal .contact-error-text {
            color: rgb(186 26 26);
            font-weight: 500;
        }
        #contact-modal .contact-honeypot {
            position: absolute;
            left: -10000px;
            top: auto;
            width: 1px;
            height: 1px;
            overflow: hidden;
        }
        #contact-modal .contact-privacy {
            font-size: 12px;
            line-height: 1.55;
            color: rgb(100 116 139);
            margin: 0.25rem 0 1.25rem;
        }
        #contact-modal .contact-privacy a {
            color: rgb(27 107 81);
            text-decoration: underline;
            text-decoration-thickness: 1px;
            text-underline-offset: 2px;
        }
        #contact-modal .contact-actions {
            display: flex;
            gap: 0.75rem;
            justify-content: flex-end;
            align-items: center;
        }
        #contact-modal .contact-btn {
            font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
            font-size: 13px;
            font-weight: 600;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            border-radius: 9999px;
            padding: 0.625rem 1.25rem;
            cursor: pointer;
            transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
            line-height: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            min-height: 2.5rem;
        }
        #contact-modal .contact-btn-secondary {
            background: transparent;
            color: rgb(71 85 105);
            border: 1px solid rgb(203 213 225);
        }
        #contact-modal .contact-btn-secondary:hover {
            border-color: rgb(15 23 42);
            color: rgb(15 23 42);
        }
        #contact-modal .contact-btn-primary {
            background: rgb(15 23 42);
            color: #ffffff;
            border: 1px solid rgb(15 23 42);
        }
        #contact-modal .contact-btn-primary:hover {
            background: rgb(2 6 23);
            border-color: rgb(2 6 23);
        }
        #contact-modal .contact-btn-primary:disabled,
        #contact-modal .contact-btn-secondary:disabled {
            opacity: 0.55;
            cursor: not-allowed;
        }
        #contact-modal .contact-btn:focus-visible {
            outline: 2px solid rgb(27 107 81);
            outline-offset: 2px;
        }
        #contact-modal .contact-spinner {
            width: 14px;
            height: 14px;
            border-radius: 9999px;
            border: 2px solid currentColor;
            border-right-color: transparent;
            animation: contact-spin 720ms linear infinite;
            display: none;
        }
        #contact-modal .contact-btn[data-loading="true"] .contact-spinner {
            display: inline-block;
        }
        @keyframes contact-spin {
            to { transform: rotate(360deg); }
        }
        #contact-modal .contact-status {
            margin-top: 1rem;
            padding: 0.75rem 0.875rem;
            border-radius: 0.5rem;
            font-size: 14px;
            line-height: 1.5;
            display: none;
        }
        #contact-modal .contact-status.is-success {
            display: block;
            background: rgba(27, 107, 81, 0.08);
            color: rgb(27 107 81);
            border: 1px solid rgba(27, 107, 81, 0.24);
        }
        #contact-modal .contact-status.is-error {
            display: block;
            background: rgba(186, 26, 26, 0.06);
            color: rgb(186 26 26);
            border: 1px solid rgba(186, 26, 26, 0.2);
        }
        body.contact-modal-open { overflow: hidden; }
        @media (max-width: 480px) {
            #contact-modal {
                padding: 0;
                align-items: stretch;
            }
            #contact-modal .contact-dialog {
                border-radius: 0;
                max-width: none;
                max-height: 100vh;
                height: 100vh;
                padding: 1.5rem 1.25rem 1.25rem;
                border: none;
                transform: translateY(16px);

            }

            #contact-modal .contact-title { font-size: 26px; }
        }

@media(prefers-reduced-motion:reduce){
  #contact-modal .contact-dialog{transform:none}
}