[data-page=contact] {
  --contact-ink:#b4c0c8;
  --contact-dim:#78848d;
  --contact-accent:#72dcf5;
  background:#050505;
  color-scheme:dark;
  position:relative;
  isolation:isolate;
}
[data-page=contact] .stage-bg { z-index:0; }
.contact-main, .contact-footer { z-index:1; }
[data-page=contact] ::selection { background:#33d2ff38; }
[data-page=contact] :focus-visible { outline-color:var(--contact-accent); }
.contact-skip { position:fixed; top:12px; left:20px; transform:translateY(-180%); z-index:100; padding:12px 18px; background:#111a20; color:#fff; }
.contact-skip:focus { transform:translateY(0); }
.contact-main {
  position:relative;
  max-width:var(--wrap);
  margin-inline:auto;
  padding:clamp(154px,18vh,194px) var(--gutter) 66px;
}
.contact-main::before {
  content:"";
  position:absolute;
  pointer-events:none;
  width:80%; height:82%; right:0; top:8%;
  background:radial-gradient(ellipse at 50% 45%,#17374626,transparent 67%);
  z-index:0;
}
.contact-layout { position:relative; display:grid; grid-template-columns:.95fr 1fr; gap:clamp(48px,6vw,100px); align-items:start; }
.contact-intro { position:relative; padding-top:21px; animation:contact-arrive 1s var(--ease) .05s both; }
.contact-kicker { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:0 0 35px; font-size:10px; font-weight:500; text-transform:uppercase; letter-spacing:.25em; color:var(--contact-accent); }
.contact-dash { width:26px; height:1px; background:var(--contact-accent); }
.kicker-separator { color:#52636c; margin-inline:3px; }
.contact-intro h1 { font-size:clamp(54px,6.4vw,90px); font-weight:200; letter-spacing:-.045em; line-height:1.04; }
.contact-intro h1 span { color:#d2dce3; }
.contact-lead { margin:26px 0 0; font-size:17px; color:var(--contact-ink); line-height:1.8; font-weight:300; }
.connection-scene { position:relative; width:100%; height:280px; margin-top:18px; pointer-events:none; }
.connection-sky { position:absolute; inset:0; opacity:.5; background:radial-gradient(ellipse at 49% 48%,#2049573d,transparent 57%); }
.connection-orbits { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.orbit-shell { transform-origin:275px 165px; animation:orbit-breathe 12s ease-in-out infinite; }
.orbit-traveler { transform-origin:275px 165px; animation:orbit-travel 44s linear infinite; }
.orbit-traveler--second { animation-duration:66s; animation-direction:reverse; }
.connection-prism { position:absolute; width:58px; height:58px; object-fit:contain; left:calc(49% - 29px); top:calc(50% - 29px); opacity:.82; filter:drop-shadow(0 0 16px #81d8f31f); animation:prism-float 8s ease-in-out infinite; }
.connection-caption { position:absolute; bottom:0; left:0; right:0; display:flex; justify-content:space-between; gap:10px; font-size:10px; font-weight:400; letter-spacing:.08em; color:#82949e; }
.contact-back { display:inline-flex; gap:13px; align-items:center; margin-top:26px; color:#a2b1bb; font-size:11px; letter-spacing:.08em; text-decoration:none; transition:color .25s; }
.contact-back svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.2; transition:transform .3s var(--ease); }
.contact-back:hover { color:var(--contact-accent); }
.contact-back:hover svg { transform:translateX(-4px); }
.contact-panel {
  position:relative;
  padding:38px;
  border:1px solid #8da4b623;
  background:linear-gradient(135deg,#10181de6,#080c10f5 60%,#0a1014f2);
  box-shadow:0 25px 65px #0006,inset 0 1px 0 #e8f6ff08;
  animation:contact-arrive 1.1s var(--ease) .15s both;
}
.contact-panel::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(340px circle at var(--panel-x,75%) var(--panel-y,0%),#5fb8d80b,transparent 70%);
}
.panel-corner { position:absolute; width:24px; height:24px; pointer-events:none; border-color:#83d5e77a; border-style:solid; }
.panel-corner--top { top:-1px; left:-1px; border-width:1px 0 0 1px; }
.panel-corner--bottom { right:-1px; bottom:-1px; border-width:0 1px 1px 0; }
.contact-panel-head { position:relative; margin-bottom:30px; padding-bottom:24px; border-bottom:1px solid #d5e6f012; }
.panel-kicker { margin:0 0 13px; text-transform:uppercase; letter-spacing:.24em; font-size:9px; font-weight:500; color:var(--contact-accent); }
.contact-panel-head h2 { margin:0; font-weight:300; font-size:27px; line-height:1.25; letter-spacing:-.025em; }
.contact-panel-head > p:last-child { margin:12px 0 0; font-size:13px; color:#9aa9b4; }
#contact-form { position:relative; scroll-margin-top:155px; }
.contact-field-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:25px; }
.contact-field { min-width:0; }
.contact-field label { display:block; margin-bottom:10px; color:#d7e1e8; font-size:10px; font-weight:500; text-transform:uppercase; letter-spacing:.15em; }
.contact-field label > span:not(.optional) { color:var(--contact-accent); margin-left:2px; }
.contact-field .optional { color:#80909c; font-size:8px; letter-spacing:.05em; margin-left:6px; }
.contact-field :is(input,textarea,select) {
  width:100%; margin:0; border:1px solid #8a9cab33; border-radius:0; padding:13px 14px;
  background:#05090db8; color:#f0f5f8; font:300 14px/1.5 var(--font);
  transition:background .25s,border-color .25s,box-shadow .25s; outline:none;
}
.contact-field :is(input,select) { height:49px; }
.contact-field :is(input,textarea)::placeholder { color:#77858f; opacity:1; }
.contact-field :is(input,textarea,select):hover { border-color:#adc5d255; }
.contact-field :is(input,textarea,select):focus { border-color:#72dcf599; background:#0b141a; box-shadow:0 0 0 2px #72dcf510; }
.contact-field [aria-invalid=true] { border-color:#ee949499; }
.contact-select-wrap { position:relative; }
.contact-select-wrap select { appearance:none; padding-right:30px; cursor:pointer; }
.contact-select-wrap svg { position:absolute; right:14px; top:18px; width:14px; height:14px; fill:none; stroke:#a6b7c0; stroke-width:1; pointer-events:none; }
.contact-field textarea { display:block; min-height:167px; max-height:420px; resize:vertical; }
.message-label { display:flex; justify-content:space-between; gap:10px; align-items:start; }
.message-label > span { color:#748591; font-size:9px; letter-spacing:.05em; font-variant-numeric:tabular-nums; }
.field-error { margin:6px 0 0; color:#efb1b1; font-size:11px; line-height:1.5; }
.field-error:empty { display:none; }
.contact-honeypot { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.form-finish { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:26px; }
.form-finish > p { margin:0; font-size:10px; color:#8798a3; }
.form-finish > p span { color:var(--contact-accent); }
.contact-submit {
  position:relative; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; gap:29px;
  min-height:48px; padding:13px 21px; border:1px solid #9be9ff88; border-radius:0;
  background:#b4e8f3; color:#081218; font:500 11px var(--font); letter-spacing:.07em; cursor:pointer;
  transition:background .25s,box-shadow .25s;
}
.contact-submit::before { content:""; position:absolute; inset:0; background:linear-gradient(110deg,transparent,#fff7,transparent); transform:translateX(-120%); transition:transform .75s var(--ease); }
.contact-submit:hover { background:#d5f3fb; box-shadow:0 0 25px #72dcf518; }
.contact-submit:hover::before { transform:translateX(120%); }
.contact-submit svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.2; transition:transform .25s var(--ease); }
.contact-submit:hover svg { transform:translateX(3px); }
.contact-submit:disabled { cursor:wait; opacity:.65; }
.contact-status { margin:18px 0 0; font-size:12px; color:#a6d9e7; line-height:1.6; }
.contact-status:empty { display:none; }
.contact-status[data-state=error] { color:#edb0b0; }
.contact-footer {
  position:relative; display:flex; align-items:center; justify-content:space-between; gap:20px;
  max-width:calc(var(--wrap) - 2 * var(--gutter)); margin:0 auto;
  padding:25px 0 30px; border-top:1px solid var(--line);
  font-size:9px; font-weight:400; letter-spacing:.12em; color:#84919b;
}
.contact-footer p { margin:0; text-transform:uppercase; }
.contact-footer a { display:inline-flex; gap:11px; align-items:center; text-decoration:none; }
.contact-footer a:hover { color:var(--contact-accent); }
.contact-footer svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.2; }
@keyframes contact-arrive { from {opacity:0;transform:translateY(16px);} to {opacity:1;transform:none;} }
@keyframes orbit-breathe { 0%,100% {opacity:.7;} 50% {opacity:1;} }
@keyframes orbit-travel { to {transform:rotate(360deg);} }
@keyframes prism-float { 0%,100% {transform:translateY(0);} 50% {transform:translateY(-5px);} }
@media(min-width:1500px) { .contact-main { padding-top:185px; } }
@media(max-width:1000px) {
  .contact-layout { gap:36px; grid-template-columns:.85fr 1fr; }
  .contact-panel { padding:28px; }
  .contact-intro h1 { font-size:clamp(48px,6.2vw,64px); }
  .contact-kicker { font-size:9px; gap:8px; letter-spacing:.15em; }
  .contact-dash { width:16px; }
  .contact-field-row { gap:14px; }
  .contact-panel-head h2 { font-size:24px; }
  .form-finish { align-items:stretch; flex-direction:column-reverse; gap:12px; }
  .form-finish > p { text-align:center; }
}
@media(max-width:760px) {
  .contact-main { padding-top:152px; padding-bottom:38px; }
  .contact-layout { grid-template-columns:1fr; gap:34px; }
  .contact-intro { padding-top:0; }
  .contact-kicker { margin-bottom:22px; }
  .contact-intro h1 { font-size:clamp(48px,10vw,76px); }
  .contact-lead { margin-top:18px; font-size:15px; }
  .connection-scene { position:absolute; width:240px; height:180px; right:-15px; top:35px; margin:0; z-index:-1; opacity:.28; }
  .connection-caption { display:none; }
  .contact-back { margin-top:22px; }
  .contact-panel { padding:26px; }
  .contact-panel-head { margin-bottom:24px; }
  .contact-footer { margin-inline:var(--gutter); flex-wrap:wrap; gap:15px; }
  .desktop-break { display:none; }
}
@media(max-width:430px) {
  .contact-panel { padding:23px; }
  .contact-field-row { grid-template-columns:1fr; gap:21px; margin-bottom:21px; }
  .contact-intro h1 { font-size:13vw; }
  .contact-panel-head h2 { font-size:25px; max-width:14ch; }
}