/* Doorway-inspired light, with no animation required to use the form. */
.contact-grid {
  position: relative;
  isolation: isolate;
  align-items: center;
  padding-block: 2.5rem 1rem;
}
.contact-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 75% 45%, #37bde51c, transparent 65%);
}
.contact-intro { padding-block: 1rem; }
.contact-intro .contact-kicker {
  font: 600 .875rem ui-monospace, Consolas, monospace;
  letter-spacing: .16em;
  color: var(--accent);
  margin: 0 0 1.4rem;
}
.contact-intro h3 {
  font-size: clamp(2.4rem, 4.6vw, 3.75rem);
  letter-spacing: -.055em;
  line-height: 1.12;
}
.contact-intro h3 em {
  font-style: normal;
  color: var(--accent);
  text-shadow: 0 0 36px #74dbfa30;
}
@supports (background-clip: text) {
  .contact-intro h3 em {
    background: linear-gradient(110deg, #d1f5ff, #74dbfa 58%, #9aacf7);
    background-clip: text;
    color: transparent;
  }
}
.contact-topics { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.7rem; }
.contact-topics span {
  border: 1px solid #33495c;
  border-radius: 100px;
  padding: .45rem .75rem;
  color: #c0d3e1;
  font-size: .875rem;
  background: #122130;
}
.contact-form {
  position: relative;
  isolation: isolate;
  border-color: #416075;
  border-radius: 16px;
  background: linear-gradient(145deg, #152636, #101b29 55%, #101b2e);
  box-shadow: 0 22px 55px #00000030, inset 0 1px 0 #e4f9ff10;
  transition: border-color .25s ease, box-shadow .25s ease;
}
/* Two offset corners echo the brand's doorway frames. */
.contact-form::before,
.contact-form::after {
  content: "";
  position: absolute;
  width: 56px;
  height: 56px;
  pointer-events: none;
  border-color: var(--accent);
  border-style: solid;
  opacity: .55;
  transition: width .35s ease, height .35s ease, opacity .25s ease;
}
.contact-form::before { top: -6px; left: -6px; border-width: 2px 0 0 2px; border-radius: 20px 0 0; }
.contact-form::after { bottom: -6px; right: -6px; border-width: 0 2px 2px 0; border-radius: 0 0 20px; }
.contact-form:focus-within {
  border-color: #74dbfa99;
  box-shadow: 0 22px 55px #00000030, 0 0 40px #74dbfa15;
}
.contact-form:focus-within::before,
.contact-form:focus-within::after { width: 90px; height: 90px; opacity: 1; }
.contact-field label { transition: color .2s ease; }
.contact-field:focus-within label { color: var(--accent); }
.contact-field input,
.contact-field textarea {
  background: #091420;
  border-color: #50677d;
  box-shadow: inset 0 2px 5px #00000020;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.contact-field input:focus,
.contact-field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px #74dbfa12, inset 0 -2px 0 #74dbfa55;
}
.contact-submit {
  position: relative;
  overflow: hidden;
  background: linear-gradient(110deg, #a3e8fc, #74dbfa);
  box-shadow: 0 4px 20px #74dbfa18;
  transition: box-shadow .2s ease, transform .2s ease;
}
.contact-submit::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 25%, #ffffff75 50%, transparent 75%);
  transform: translateX(-150%);
}
.contact-submit span { transition: transform .2s ease; }
.contact-submit:focus-visible::before { animation: contact-sweep .7s ease-out; }
.contact-submit:active { transform: translateY(1px); }
@media (hover: hover) {
  .contact-form:hover { border-color: #74dbfa80; }
  .contact-submit:hover { box-shadow: 0 5px 28px #74dbfa35; }
  .contact-submit:hover::before { animation: contact-sweep .7s ease-out; }
  .contact-submit:hover span { transform: translate(2px, -2px); }
}
@keyframes contact-sweep { to { transform: translateX(150%); } }
@media (max-width: 760px) {
  .contact-grid { padding-top: 1.5rem; gap: 2rem; }
  .contact-intro { padding: 0; }
  .contact-intro h3 { font-size: clamp(2.4rem, 9vw, 3.5rem); }
  .contact-topics { margin-top: 1.25rem; }
  .contact-submit { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .contact *, .contact *::before, .contact *::after {
    animation: none !important;
    transition: none !important;
  }
}
@media (forced-colors: active) {
  .contact-intro h3 em { background: none; color: CanvasText; text-shadow: none; }
  .contact-submit { border: 1px solid ButtonText; }
}