/* Let the contact background extend behind the floating navigation. */
body:has(.contact-page.contact-reimagined) { background: #060e1d; }
body:has(.contact-page.contact-reimagined) > .site-header { position: fixed; left: 50%; transform: translateX(-50%); margin: 0; }
.contact-page.contact-reimagined { position: relative; isolation: isolate; overflow: hidden; min-height: 0; padding: clamp(8rem, 10vw, 9rem) 5% 6rem; background: #060e1d; color: #f5f8ff; animation: contact-night-shift 18s ease-in-out infinite alternate; }
.contact-reimagined .contact-atmosphere { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; background: radial-gradient(ellipse at 50% 0%, #102c4e88, transparent 55%); }
.contact-reimagined .contact-atmosphere::before, .contact-reimagined .contact-atmosphere::after { content: ''; position: absolute; inset: -15%; pointer-events: none; transform-origin: center; }
.contact-reimagined .contact-atmosphere::before { background: radial-gradient(ellipse at 22% 18%, #23599388 0%, transparent 35%), radial-gradient(ellipse at 78% 62%, #143f7766 0%, transparent 40%); animation: contact-aurora-flow 16s ease-in-out infinite alternate; }
.contact-reimagined .contact-atmosphere::after { background: radial-gradient(ellipse at 80% 12%, #326d9b55 0%, transparent 28%), radial-gradient(ellipse at 12% 78%, #1b438b66 0%, transparent 33%); animation: contact-aurora-counterflow 23s ease-in-out infinite alternate; }
.contact-reimagined .contact-stage { position: relative; z-index: 1; max-width: 980px; margin-inline: auto; }
.contact-reimagined .contact-opening { max-width: 820px; margin: 0 auto 3rem; text-align: center; }
.contact-reimagined .contact-opening h1 { margin: 1.5rem 0; font: 550 clamp(3rem, 6.3vw, 6.2rem)/1.02 var(--display, sans-serif); letter-spacing: -.065em; }
.contact-reimagined .contact-opening h1 em { font-style: normal; color: #afdfff; background: linear-gradient(105deg, #d4f2ff, #94c8ff 65%, #a8baff); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.contact-reimagined .contact-opening > p { max-width: 610px; margin: 0 auto; color: #d0deef; font-size: clamp(1.03rem, 1.45vw, 1.18rem); line-height: 1.8; }
.contact-reimagined .contact-message-form { position: relative; width: 100%; margin: 0; padding: clamp(1.5rem, 4vw, 3.5rem); border: 1px solid #ffffff; border-radius: 28px; background: linear-gradient(145deg, #fbfdff, #f1f5fb); color: #142946; box-shadow: 0 35px 90px #00000035, 0 0 0 6px #8cbaff07; }
.contact-reimagined .message-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid #ccdae9; }
.contact-reimagined .message-heading h2 { margin: 0; font: 600 clamp(1.7rem, 2.6vw, 2.4rem)/1.15 var(--display, sans-serif); letter-spacing: -.04em; }
.contact-reimagined .message-heading p { margin: 0; color: #62738a; font-size: .73rem; }
.contact-reimagined .message-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.45rem 1.6rem; }
.contact-reimagined .contact-message-form .message-grid > label { display: block; margin: 0; color: #243a56; font-size: .8rem; font-weight: 650; letter-spacing: 0; }
.contact-reimagined .message-optional { float: right; color: #718095; font-size: .67rem; font-weight: 400; }
.contact-reimagined .contact-message-form .message-grid input, .contact-reimagined .contact-message-form .message-grid select, .contact-reimagined .contact-message-form .message-grid textarea { display: block; width: 100%; min-width: 0; margin-top: .6rem; padding: .9rem 1rem; border: 1px solid #bccddd; border-radius: 12px; background: #fff; color: #152a43; font-size: .9rem; font-weight: 400; line-height: 1.5; box-shadow: 0 2px 4px #17315403; transition: border-color .2s, box-shadow .2s; }
.contact-reimagined .contact-message-form .message-grid input, .contact-reimagined .contact-message-form .message-grid select { min-height: 54px; }
.contact-reimagined .contact-message-form .message-grid textarea { min-height: 165px; resize: vertical; }
.contact-reimagined .contact-message-form input::placeholder, .contact-reimagined .contact-message-form textarea::placeholder { color: #65778d; opacity: 1; }
.contact-reimagined .contact-message-form .message-grid input:focus, .contact-reimagined .contact-message-form .message-grid select:focus, .contact-reimagined .contact-message-form .message-grid textarea:focus { outline: none; border-color: #2465b8; box-shadow: 0 0 0 4px #3979c51a; }
.contact-reimagined .message-wide { grid-column: 1/-1; }
.contact-reimagined .message-wide > small { display: block; margin-top: .65rem; color: #586c84; font-size: .73rem; font-weight: 400; line-height: 1.65; }
.contact-reimagined .contact-message-form .message-consent { display: flex; align-items: flex-start; gap: .75rem; margin: 1.8rem 0 0; color: #4b607a; font-size: .75rem; line-height: 1.7; }
.contact-reimagined .contact-message-form .message-consent input { flex: 0 0 18px; width: 18px; height: 18px; min-height: 18px; margin: .15rem 0 0; padding: 0; accent-color: #2866b6; cursor: pointer; }
.contact-reimagined .message-consent a { color: #155baf; text-decoration: underline; text-underline-offset: .2em; }
.contact-reimagined .message-consent input:focus-visible { outline: 2px solid #2866b6; outline-offset: 4px; }
.contact-reimagined .message-submit { display: flex; align-items: center; gap: 1.8rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid #d4dfec; }
.contact-reimagined .message-submit .message-button { display: inline-flex; align-items: center; justify-content: center; min-width: 185px; min-height: 54px; padding: .9rem 1.4rem; border: 1px solid #2a67b8; border-radius: 12px; background: linear-gradient(115deg, #2868bf, #16488f); color: #f8fbff; font-size: .87rem; font-weight: 750; box-shadow: 0 8px 24px #225bb022; transition: box-shadow .2s, transform .2s; }
.contact-reimagined .message-submit .message-button:hover { transform: translateY(-2px); box-shadow: 0 12px 30px #225bb039; }
.contact-reimagined .message-button:focus-visible { outline: 2px solid #1c559d; outline-offset: 4px; }
.contact-reimagined .message-submit > p { max-width: 430px; margin: 0; color: #526880; font-size: .73rem; line-height: 1.65; }
.contact-reimagined .message-status { margin: 1rem 0 0; color: #214e7d; font-size: .83rem; line-height: 1.7; }
.contact-reimagined .message-status:empty { display: none; }
.contact-reimagined .contact-alternative { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-top: 2rem; padding: 1.8rem 2rem; border: 1px solid #9cc8ff26; border-radius: 20px; background: #a2ceff05; }
.contact-reimagined .contact-alternative h2 { margin: 0; font: 550 1.15rem/1.3 var(--display, sans-serif); letter-spacing: -.025em; }
.contact-reimagined .contact-alternative p { margin: .4rem 0 0; color: #aebfd6; font-size: .84rem; }
.contact-reimagined .contact-alternative > a { display: inline-flex; align-items: center; min-height: 44px; color: #c3e1ff; font-size: .88rem; border-bottom: 1px solid #9cc8ff50; overflow-wrap: anywhere; }
.contact-reimagined .contact-alternative > a:hover { color: #fff; border-color: #bce4ff; }
@keyframes contact-aurora-flow { 0% { transform: translate(-4%, -2%) rotate(-7deg) scale(1); opacity: .65; } 50% { opacity: 1; } 100% { transform: translate(7%, 5%) rotate(8deg) scale(1.12); opacity: .85; } }
@keyframes contact-aurora-counterflow { 0% { transform: translate(5%, -3%) scale(1.04); opacity: .8; } 100% { transform: translate(-7%, 4%) scale(1.18); opacity: .5; } }
@keyframes contact-night-shift { from { background-color: #060e1d; } to { background-color: #071529; } }
.contact-reimagined .message-button:disabled { opacity: .65; cursor: wait; transform: none; }
@media (prefers-reduced-motion: reduce) { .contact-page.contact-reimagined { animation: none; } }
@media (max-width: 700px) { .contact-reimagined .message-heading { flex-direction: column; align-items: flex-start; gap: .7rem; } .contact-reimagined .message-submit { align-items: stretch; flex-direction: column; gap: 1rem; } .contact-reimagined .message-submit .message-button { width: 100%; } .contact-reimagined .contact-alternative { align-items: flex-start; flex-direction: column; gap: .8rem; padding: 1.5rem; } }
@media (max-width: 550px) { .contact-page.contact-reimagined { padding-top: 8rem; padding-bottom: 4rem; } .contact-reimagined .contact-opening h1 { font-size: clamp(2.7rem, 11.7vw, 4rem); } .contact-reimagined .contact-opening { margin-bottom: 2rem; } .contact-reimagined .message-grid { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; } .contact-reimagined .contact-message-form { border-radius: 20px; } }
@media (prefers-reduced-motion: reduce) { .contact-reimagined *, .contact-reimagined *::before, .contact-reimagined *::after { animation: none !important; transition: none !important; } .contact-reimagined .message-submit .message-button:hover { transform: none; } }

/* Contact signal: luminous messages travelling through a connected network. */
.contact-reimagined .contact-signal-network { position: absolute; z-index: 0; top: 170px; left: 50%; width: max(100%, 1100px); height: 1050px; transform: translateX(-50%); pointer-events: none; opacity: .85; }
.contact-signal-network svg { display: block; width: 100%; height: 100%; }
.contact-wire-base { stroke: url(#contact-wire-gradient); stroke-width: 1; opacity: .28; }
.contact-wire-packets { stroke: #8adaff; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 22 1100; filter: drop-shadow(0 0 7px #438cff); animation: contact-signal-travel 9s linear infinite; }
.contact-wire-packets path:nth-child(2) { stroke-dashoffset: 360; }
.contact-wire-packets path:nth-child(3) { stroke-dashoffset: 720; }
.contact-wire-packets path:nth-child(4) { stroke-dashoffset: 950; }
.contact-wire-nodes { fill: #99deff; stroke: #3d84d9; stroke-width: 5; filter: drop-shadow(0 0 10px #258cff); animation: contact-node-pulse 4s ease-in-out infinite; }
.contact-reimagined .contact-message-beacon { position: relative; display: grid; place-items: center; width: 112px; height: 112px; margin: 0 auto 1.5rem; border: 1px solid #7cbcff40; border-radius: 32px; background: radial-gradient(circle at 30% 20%, #3266ac70, #07182a); box-shadow: 0 0 50px #368dfb26, inset 0 0 28px #5bb7ff13; transform: rotate(-5deg); animation: contact-beacon-float 6s ease-in-out infinite; }
.contact-message-beacon > svg { width: 80px; height: 80px; stroke: #d5f3ff; stroke-width: 1.8; filter: drop-shadow(0 0 8px #74bfff66); }
.contact-beacon-orbit { position: absolute; inset: -13px; border: 1px solid #79baff18; border-top-color: #8dd6ffa0; border-right-color: #458fff55; border-radius: 44px; animation: contact-beacon-orbit 12s linear infinite; }
.contact-beacon-orbit::after { content: ''; position: absolute; top: 12px; right: 10px; width: 6px; height: 6px; border-radius: 50%; background: #bdedff; box-shadow: 0 0 15px #64b7ff; }
.contact-beacon-ring { position: absolute; inset: -5px; border: 1px solid #5eacff55; border-radius: 36px; animation: contact-beacon-ripple 4s ease-out infinite; }
.contact-beacon-spark { stroke: #9fdcff; animation: contact-node-pulse 3s ease-in-out infinite; }
@keyframes contact-signal-travel { to { stroke-dashoffset: -1122; } }
@keyframes contact-node-pulse { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }
@keyframes contact-beacon-float { 0%, 100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-7px) rotate(2deg); } }
@keyframes contact-beacon-orbit { to { transform: rotate(360deg); } }
@keyframes contact-beacon-ripple { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.55); opacity: 0; } }
@media (max-width: 550px) { .contact-reimagined .contact-message-beacon { width: 92px; height: 92px; border-radius: 26px; } .contact-message-beacon > svg { width: 66px; height: 66px; } .contact-reimagined .contact-signal-network { top: 210px; opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .contact-reimagined .contact-signal-network *, .contact-reimagined .contact-message-beacon, .contact-reimagined .contact-message-beacon * { animation: none !important; } .contact-beacon-ring { display: none; } .contact-wire-packets { stroke-dasharray: none; opacity: .2; } }
