.contact-page .contact-layout { display: grid; grid-template-columns: 1fr 1.05fr; align-items: start; gap: clamp(32px,5vw,76px); padding-top: 74px; padding-bottom: 80px; }
.contact-intro h1 { font-size: clamp(42px,4.6vw,66px); line-height: 1.08; letter-spacing: -.045em; margin: 22px 0 24px; }
.contact-intro h1 em { font-style: normal; background: var(--blue-gradient); background-clip: text; -webkit-background-clip: text; color: transparent; }
.contact-intro > p { font-size: 18px; line-height: 1.7; color: #b8c4cf; max-width: 430px; }
.contact-direct { display: grid; gap: 18px; margin-top: 38px; }
.contact-direct > a { display: flex; gap: 14px; align-items: center; min-width: 0; }
.contact-channel-icon { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; color: #65c8f7; border: 1px solid #3a94c84d; border-radius: 14px; background: #0f2030; font-size: 22px; }
.contact-direct small { display: block; color: #9bafbe; margin-bottom: 5px; font-size: 12px; }
.contact-direct strong { font-weight: 500; font-size: 15px; overflow-wrap: anywhere; }
.contact-direct a:hover strong { color: #6dc9f6; }
.contact-next { max-width: 420px; margin-top: 42px; padding-top: 24px; border-top: 1px solid #3d739539; }
.contact-next p { color: #9faebb; font-size: 14px; line-height: 1.8; }
.contact-form-panel { padding: 32px; border: 1px solid #4792c43d; border-radius: 26px; background: linear-gradient(145deg,#101f30f2,#0a121ef5); box-shadow: 0 16px 70px #0003; min-width: 0; }
.form-heading h2 { font-size: 27px; line-height: 1.25; margin: 12px 0; letter-spacing: -.03em; }
.form-heading > p { font-size: 14px; color: #a8b8c8; margin-bottom: 26px; }
#project-contact label { display: block; font-size: 13px; color: #d7e1ec; line-height: 1.5; margin-bottom: 8px; }
#project-contact input, #project-contact select, #project-contact textarea { width: 100%; min-width: 0; padding: 14px 12px; color: #f1f6fb; background: #08121e; border: 1px solid #52718d70; border-radius: 10px; font: inherit; font-size: 16px; min-height: 50px; color-scheme: dark; }
#project-contact textarea { resize: vertical; min-height: 130px; }
#project-contact input:focus-visible, #project-contact select:focus-visible, #project-contact textarea:focus-visible, .contact-submit:focus-visible, .contact-direct a:focus-visible { outline: 2px solid #63c8f6; outline-offset: 3px; }
#project-contact fieldset { border: 0; padding: 0; margin: 24px 0 0; min-width: 0; }
#project-contact [hidden] { display: none; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; }
.form-grid > div { min-width: 0; }
.form-wide { grid-column: 1 / -1; }
.optional { color: #97a7b7; font-size: 12px; }
.contact-data-note { font-size: 12px; color: #a5b5c5; line-height: 1.7; margin: 20px 0; }
.contact-submit { border: 0; cursor: pointer; gap: 16px; font-weight: 600; min-height: 50px; }
.contact-submit:disabled { cursor: wait; opacity: .65; }
.contact-status { font-size: 14px; line-height: 1.6; margin: 0; }
.contact-status:not(:empty) { margin-top: 20px; padding: 14px; background: #112b3d; border: 1px solid #4287ae66; border-radius: 10px; }
.contact-status[data-state="error"] { background: #301d27; border-color: #bb6d8a66; }
.form-trap, .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media(max-width:980px) { .contact-page .contact-layout { grid-template-columns: 1fr; gap: 32px; padding-top: 38px; max-width: 760px; } .contact-intro h1 { font-size: clamp(38px,7vw,56px); } .contact-next { display: none; } .contact-direct { margin-top: 24px; } }
@media(max-width:640px) { .contact-page .contact-layout { padding: 28px 20px 48px; gap: 26px; } .contact-intro h1 { font-size: 39px; margin: 16px 0; } .contact-intro > p { font-size: 16px; } .contact-form-panel { padding: 24px 20px; border-radius: 22px; } .form-grid { grid-template-columns: 1fr; gap: 18px; } .contact-submit { width: 100%; } .contact-direct strong { font-size: 14px; } .form-heading h2 { font-size: 25px; } }
/* Keep the dropdown indicator inset consistently across browsers. */
#project-contact select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 48px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23d7e1ec' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 18px;
}
@media (forced-colors: active) {
  #project-contact select { appearance: auto; background-image: none; }
}