/* ===========================================================
   SPC — CONTACT PAGE
   Dark blueprint "signal" hero + light editorial form.
   =========================================================== */

/* ============ HERO ============ */
.ct-hero{position:relative;min-height:clamp(580px,84vh,860px);overflow:hidden;display:flex;align-items:center;
  background:radial-gradient(120% 92% at 72% 14%,#13243c 0%,#0a1320 48%,#060a11 100%);}
#ctCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;}

.ct-copy{position:relative;z-index:6;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);}
.ct-tag{display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-size:12px;
  letter-spacing:.26em;color:#76d3ff;margin-bottom:26px;}
.ct-tag i{display:block;width:34px;height:1px;background:#76d3ff;opacity:.6;}
.ct-hero h1{font-size:clamp(37px,5.6vw,86px);font-weight:800;line-height:.94;letter-spacing:-.03em;color:#eef5fc;
  text-wrap:balance;}
.ct-hero h1 em{font-style:normal;color:#76d3ff;}
.ct-hero .ct-lead{margin-top:28px;max-width:46ch;font-size:clamp(15px,1.2vw,19px);line-height:1.7;
  color:#9fb2cd;text-wrap:pretty;}

.ct-chips{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(32px,5vh,48px);}
.ct-chip{display:inline-flex;align-items:center;gap:13px;padding:13px 20px 13px 16px;border-radius:14px;
  border:1px solid rgba(118,211,255,.22);background:rgba(10,20,34,.5);backdrop-filter:blur(6px);
  transition:border-color .35s,background .35s,transform .45s cubic-bezier(.16,1,.3,1);}
.ct-chip:hover{border-color:rgba(118,211,255,.6);background:rgba(16,30,48,.7);transform:translateY(-3px);}
.ct-chip .ic{width:34px;height:34px;flex:none;border-radius:9px;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(118,211,255,.3);color:#76d3ff;font-size:15px;}
.ct-chip .tx{display:flex;flex-direction:column;gap:3px;line-height:1.1;}
.ct-chip .tx b{font-size:15px;font-weight:600;color:#e9f3fd;letter-spacing:.01em;}
.ct-chip .tx span{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#6f86a8;}

/* ============ FORM BODY ============ */
.ct-body{background:var(--bg);padding:clamp(64px,10vh,128px) 0;border-top:1px solid rgba(118,211,255,.12);}
.ct-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(40px,6vw,96px);align-items:start;}

.ct-form-head .kicker{display:block;margin-bottom:18px;}
.ct-form-head h2{font-size:clamp(26px,3.2vw,46px);font-weight:800;line-height:1;letter-spacing:-.025em;text-wrap:balance;}
.ct-form-head h2 em{font-style:normal;color:var(--accent);}
.ct-form-head p{margin-top:18px;max-width:48ch;font-size:16px;line-height:1.66;color:var(--ink-soft);}

/* fields and the confirmation share one grid cell, so the confirmation takes the
   form's place without moving the page */
.ct-form{margin-top:clamp(34px,5vh,52px);position:relative;display:grid;}
.ct-form>.ct-fields,.ct-form>.ct-success{grid-area:1/1;min-width:0;}
.ct-fields{display:flex;flex-direction:column;gap:clamp(22px,3vh,30px);
  transition:opacity .5s ease,transform .6s cubic-bezier(.16,1,.3,1);}
.ct-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3vw,40px);}
.field{display:flex;flex-direction:column;gap:9px;position:relative;}
.field label{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);}
.field label .req{color:var(--accent);}
.field input,.field select,.field textarea{appearance:none;-webkit-appearance:none;border:0;
  border-bottom:1.5px solid var(--line);background:transparent;padding:11px 2px;font:inherit;font-size:16.5px;
  color:var(--ink);transition:border-color .35s ease;border-radius:0;}
.field textarea{resize:vertical;min-height:96px;line-height:1.55;}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-faint);opacity:.7;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom-color:var(--accent);}
.field.sel{position:relative;}
.field.sel::after{content:"";position:absolute;right:6px;bottom:18px;width:8px;height:8px;
  border-right:1.5px solid var(--ink-soft);border-bottom:1.5px solid var(--ink-soft);transform:rotate(45deg);pointer-events:none;}
.field select{cursor:pointer;padding-right:24px;}
.field select option{color:#10141a;}

.ct-submit-row{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-top:clamp(34px,5vh,46px);}
.ct-submit{display:inline-flex;align-items:center;gap:12px;padding:18px 36px;border-radius:46px;
  background:var(--ink);color:var(--bg);font-size:16px;font-weight:600;letter-spacing:.01em;cursor:pointer;border:0;
  font-family:inherit;position:relative;overflow:hidden;
  box-shadow:0 16px 40px -16px rgba(16,20,26,.6);transition:transform .4s cubic-bezier(.16,1,.3,1),background .3s,box-shadow .4s;}
.ct-submit i{font-style:normal;font-size:18px;transition:transform .4s cubic-bezier(.16,1,.3,1);}
.ct-submit:hover{transform:translateY(-3px);background:var(--accent);box-shadow:0 22px 50px -18px rgba(34,135,198,.7);}
.ct-submit:hover i{transform:translate(4px,-4px);}
.ct-submit-note{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--ink-faint);max-width:24ch;line-height:1.6;}

.ct-error{margin:0;padding:12px 16px;border-inline-start:2px solid #d9534f;background:rgba(217,83,79,.08);
  color:#c0392b;font-size:14.5px;line-height:1.6;animation:ctErr .4s cubic-bezier(.16,1,.3,1);}
@keyframes ctErr{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
.ct-submit:disabled{cursor:progress;}
.ct-submit.is-loading{background:var(--accent);transform:none;}
.ct-spin{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;
  animation:ctSpin .7s linear infinite;flex:none;}
@keyframes ctSpin{to{transform:rotate(360deg);}}

/* success state */
.ct-success{display:flex;flex-direction:column;justify-content:center;align-items:stretch;
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(18px) scale(.985);
  transition:opacity .5s ease .18s,transform .7s cubic-bezier(.16,1,.3,1) .18s,visibility 0s linear .7s;}
.ct-form.is-sent .ct-fields{opacity:0;transform:translateY(-14px);pointer-events:none;
  transition:opacity .35s ease,transform .5s cubic-bezier(.16,1,.3,1);}
.ct-form.is-sent .ct-success{opacity:1;visibility:visible;pointer-events:auto;transform:none;
  transition:opacity .5s ease .18s,transform .7s cubic-bezier(.16,1,.3,1) .18s,visibility 0s;}
.ct-ok-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;
  padding:clamp(28px,4vw,46px);border:1px solid var(--line);border-radius:4px;
  background:linear-gradient(160deg,color-mix(in oklab,var(--accent) 9%,transparent),transparent 60%);
  box-shadow:0 30px 70px -40px rgba(16,20,26,.45);overflow:hidden;}
/* blueprint corner ticks */
.ct-ok-card::before,.ct-ok-card::after{content:"";position:absolute;width:18px;height:18px;border:1.5px solid var(--accent);opacity:.7;}
.ct-ok-card::before{top:10px;inset-inline-start:10px;border-bottom:0;border-inline-end:0;}
.ct-ok-card::after{bottom:10px;inset-inline-end:10px;border-top:0;border-inline-start:0;}
.ct-ok-mark{width:72px;height:72px;margin-bottom:24px;overflow:visible;}
.ct-ok-mark .ring{fill:color-mix(in oklab,var(--accent) 10%,transparent);stroke:var(--accent);stroke-width:2;
  stroke-dasharray:208;stroke-dashoffset:208;transform:rotate(-90deg);transform-origin:center;}
.ct-ok-mark .tick{fill:none;stroke:var(--accent);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:40;stroke-dashoffset:40;}
.ct-form.is-sent .ct-ok-mark .ring{animation:ctRing .8s cubic-bezier(.65,0,.35,1) .35s forwards;}
.ct-form.is-sent .ct-ok-mark .tick{animation:ctTick .45s cubic-bezier(.65,0,.35,1) 1s forwards;}
.ct-form.is-sent .ct-ok-mark{animation:ctPop .5s cubic-bezier(.34,1.56,.64,1) 1.3s;}
@keyframes ctRing{to{stroke-dashoffset:0;}}
@keyframes ctTick{to{stroke-dashoffset:0;}}
@keyframes ctPop{50%{transform:scale(1.08);}}
.ct-ok-kicker{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:12px;}
.ct-success h3{font-size:clamp(26px,3vw,40px);font-weight:800;letter-spacing:-.02em;line-height:1.15;text-wrap:balance;outline:none;}
.ct-success p{margin-top:16px;max-width:46ch;font-size:16px;line-height:1.75;color:var(--ink-soft);}
.ct-ok-meta{margin-top:22px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:14px;color:var(--ink-soft);}
.ct-ok-meta b{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--ink);padding:6px 12px;
  border:1px solid var(--line);border-radius:30px;background:color-mix(in oklab,var(--bg) 70%,transparent);
  max-width:100%;overflow-wrap:anywhere;}
.ct-success .again{margin-top:30px;font:inherit;font-family:var(--mono);font-size:12px;letter-spacing:.1em;
  color:var(--ink-soft);background:none;border:0;border-bottom:1px solid var(--line);padding:0 0 3px;cursor:pointer;
  transition:color .3s,border-color .3s;}
.ct-success .again:hover,.ct-success .again:focus-visible{color:var(--accent);border-color:var(--accent);outline:none;}
/* the card's pieces arrive one after another */
.ct-ok-card>*:not(.ct-ok-mark){opacity:0;transform:translateY(10px);}
.ct-form.is-sent .ct-ok-card>*:not(.ct-ok-mark){animation:ctIn .6s cubic-bezier(.16,1,.3,1) forwards;}
.ct-form.is-sent .ct-ok-kicker{animation-delay:.5s!important;}
.ct-form.is-sent .ct-success h3{animation-delay:.6s!important;}
.ct-form.is-sent .ct-success p{animation-delay:.7s!important;}
.ct-form.is-sent .ct-ok-meta{animation-delay:.8s!important;}
.ct-form.is-sent .ct-success .again{animation-delay:.9s!important;}
@keyframes ctIn{to{opacity:1;transform:none;}}
@media(prefers-reduced-motion:reduce){
  .ct-ok-card>*:not(.ct-ok-mark){opacity:1;transform:none;animation:none!important;}
  .ct-ok-mark .ring,.ct-ok-mark .tick{stroke-dashoffset:0;animation:none!important;}
}

/* ---- info sidebar ---- */
.ct-info{display:flex;flex-direction:column;border-top:1px solid var(--line);}
.ct-blk{padding:clamp(22px,3vh,30px) 0;border-bottom:1px solid var(--line);}
.ct-blk .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);
  display:block;margin-bottom:16px;}
.ct-line{font-size:23px;font-weight:700;letter-spacing:-.01em;display:inline-block;
  background:linear-gradient(var(--accent),var(--accent)) left bottom / 0% 1.5px no-repeat;
  transition:background-size .4s ease;padding-bottom:3px;}
a.ct-line:hover{background-size:100% 1.5px;}
.ct-sub{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--ink-soft);margin-top:8px;}
.ct-addr{display:flex;flex-direction:column;gap:20px;}
.ct-addr .a-item h3,.ct-addr .a-item h4{font-size:13px;font-weight:700;letter-spacing:.02em;margin-bottom:6px;}
.ct-addr .a-item p{font-size:15px;line-height:1.6;color:var(--ink-soft);}
.ct-addr .a-item .coord{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--ink-faint);margin-top:6px;}
.ct-hours{display:flex;flex-direction:column;gap:9px;}
.ct-hours .hr{display:flex;justify-content:space-between;gap:16px;font-size:14px;color:var(--ink);}
.ct-hours .hr span:last-child{font-family:var(--mono);font-size:13px;color:var(--ink-soft);}

/* ============ LOCATIONS BAND ============ */
.ct-map{padding:0 0 clamp(70px,11vh,130px);background:var(--bg);}
.ct-map-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:18px;
  margin-bottom:clamp(28px,4vh,44px);}
.ct-map-head h2{font-size:clamp(26px,3.2vw,44px);font-weight:800;letter-spacing:-.02em;line-height:1.02;max-width:16ch;}
.ct-map-head .note{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--ink-soft);max-width:28ch;line-height:1.7;}
.ct-map-frame{position:relative;aspect-ratio:21/9;border:1px solid var(--line);overflow:hidden;background:#0a1320;}
.ct-map-frame image-slot{position:absolute;inset:0;width:100%;height:100%;display:block;}
.ct-pin{position:absolute;z-index:3;display:flex;align-items:center;gap:9px;font-family:var(--mono);
  font-size:11px;letter-spacing:.08em;color:#d8efff;white-space:nowrap;}
.ct-pin i{width:11px;height:11px;border:1.5px solid #76d3ff;border-radius:50%;flex:none;
  box-shadow:0 0 0 4px rgba(118,211,255,.14);position:relative;}
.ct-pin i::after{content:"";position:absolute;inset:2.5px;border-radius:50%;background:#76d3ff;
  animation:ctpulse 2.4s ease-in-out infinite;}
.ct-pin .cal{padding:5px 11px;border:1px solid rgba(118,211,255,.28);border-radius:4px;
  background:linear-gradient(180deg,rgba(12,24,40,.8),rgba(8,16,28,.66));backdrop-filter:blur(4px);
  display:flex;flex-direction:column;gap:2px;}
.ct-pin .cal b{font-size:12px;font-weight:700;color:#eaf6ff;letter-spacing:.04em;}
.ct-pin .cal span{font-size:9px;letter-spacing:.16em;color:#7390b0;}
.ct-pin.p1{left:30%;top:38%;}
.ct-pin.p2{left:62%;top:60%;}
@keyframes ctpulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.45;transform:scale(.7);}}

@media(max-width:920px){
  .ct-grid{grid-template-columns:1fr;gap:clamp(44px,7vh,64px);}
  .ct-row{grid-template-columns:1fr;}
  .ct-map-frame{aspect-ratio:4/3;}
  .ct-pin.p1{left:22%;}.ct-pin.p2{left:58%;}
}
@media(max-width:560px){
  .ct-chips{gap:10px;}.ct-chip{padding:11px 16px 11px 13px;}
}
@media(prefers-reduced-motion:reduce){
  .ct-pin i::after{animation:none;}
}