/* Spatial Apex — Talent Network. Matches spatialapex.co design tokens. */
:root{
  --teal:#1EB397;--teal-hover:#25d4b3;--teal-dim:#147a68;--teal-bright:#2ee6c2;
  --teal-glow:rgba(30,179,151,0.15);
  --coral:#FAA165;--coral-dim:#d4784a;
  --black:#000;--surface:#0a0a0a;--surface2:#111;--surface3:#0d0d0d;
  --gray:#8A8A8A;--gray-light:#C0C0C0;--white:#fff;
  --line:rgba(255,255,255,.10);--line-soft:rgba(255,255,255,.06);
  --maxw:1000px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--black);color:var(--white);font-family:'Plus Jakarta Sans',sans-serif;
  line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,40px)}
a{color:var(--teal);text-decoration:none}
a:hover{color:var(--teal-hover)}

/* header */
.site-head{position:sticky;top:0;z-index:50;background:rgba(0,0,0,.82);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line-soft)}
.head-row{display:flex;align-items:center;justify-content:space-between;
  max-width:var(--maxw);margin:0 auto;padding:16px clamp(20px,5vw,40px)}
.brand{font-weight:700;letter-spacing:-.02em;color:var(--white);font-size:1.02rem}
.brand span{color:var(--teal)}
.head-link{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:2px;
  text-transform:uppercase;color:var(--gray)}
.head-link:hover{color:var(--teal)}

/* hero */
.hero{padding:clamp(64px,11vw,120px) 0 clamp(36px,6vw,60px);position:relative;overflow:hidden}
.hero::after{content:'';position:absolute;top:-30%;right:-10%;width:520px;height:520px;
  background:radial-gradient(circle,var(--teal-glow),transparent 68%);pointer-events:none}
.eyebrow{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:5px;
  text-transform:uppercase;color:var(--teal);margin-bottom:22px}
h1{font-size:clamp(2.1rem,5.4vw,3.5rem);line-height:1.08;letter-spacing:-.03em;font-weight:700;
  margin-bottom:22px;position:relative;z-index:1}
h1 .accent{color:var(--teal)}
.lede{font-size:clamp(1.02rem,1.9vw,1.2rem);color:var(--gray-light);max-width:60ch;
  position:relative;z-index:1}

/* honest note */
.note{border-left:2px solid var(--coral);background:var(--surface2);
  padding:20px 24px;border-radius:0 10px 10px 0;margin:38px 0;max-width:66ch}
.note .k{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:3px;
  text-transform:uppercase;color:var(--coral);display:block;margin-bottom:8px}
.note p{color:var(--gray-light);font-size:.97rem}

/* sections */
section{padding:clamp(40px,7vw,72px) 0;border-top:1px solid var(--line-soft)}
h2{font-size:clamp(1.5rem,3.1vw,2.1rem);letter-spacing:-.02em;font-weight:700;margin-bottom:14px}
.sec-intro{color:var(--gray);max-width:62ch;margin-bottom:34px}

/* what we build */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.tile{background:var(--surface2);border:1px solid var(--line);border-radius:12px;padding:24px}
.tile .n{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:2px;
  color:var(--coral);display:block;margin-bottom:10px}
.tile h3{font-size:1.05rem;margin-bottom:8px;font-weight:600}
.tile p{color:var(--gray);font-size:.92rem}

/* form */
.form-card{background:var(--surface2);border:1px solid var(--line);border-radius:14px;
  padding:clamp(24px,4vw,40px)}
.field{margin-bottom:26px}
label,.legend{display:block;font-family:'DM Mono',monospace;font-size:11px;letter-spacing:2px;
  text-transform:uppercase;color:var(--gray-light);margin-bottom:10px}
.req{color:var(--coral)}
.hint{font-family:'Plus Jakarta Sans',sans-serif;font-size:.85rem;color:var(--gray);
  text-transform:none;letter-spacing:0;margin-top:-4px;margin-bottom:10px}
input[type=text],input[type=email],input[type=url],select,textarea{
  width:100%;background:var(--surface3);border:1px solid var(--line);border-radius:8px;
  padding:13px 15px;color:var(--white);font-family:'Plus Jakarta Sans',sans-serif;font-size:.97rem}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--teal);
  box-shadow:0 0 0 3px var(--teal-glow)}
textarea{min-height:120px;resize:vertical}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--gray) 50%),
  linear-gradient(135deg,var(--gray) 50%,transparent 50%);
  background-position:calc(100% - 20px) 21px,calc(100% - 15px) 21px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:640px){.row{grid-template-columns:1fr}}

/* skill checkbox grid */
.skills{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:9px}
.chk{position:relative}
.chk input{position:absolute;opacity:0;width:0;height:0}
.chk span{display:block;background:var(--surface3);border:1px solid var(--line);
  border-radius:7px;padding:10px 13px;font-size:.89rem;color:var(--gray-light);
  cursor:pointer;transition:all .15s ease}
.chk input:checked+span{border-color:var(--teal);color:var(--white);background:rgba(30,179,151,.10)}
.chk input:focus-visible+span{box-shadow:0 0 0 3px var(--teal-glow)}
.skill-group{margin-bottom:22px}
.skill-group .gl{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:2px;
  color:var(--teal);text-transform:uppercase;margin-bottom:9px;display:block}

.btn{display:inline-block;background:var(--teal);color:#04120f;font-weight:700;
  border:none;border-radius:999px;padding:15px 34px;font-size:.98rem;cursor:pointer;
  font-family:'Plus Jakarta Sans',sans-serif;transition:background .15s ease}
.btn:hover{background:var(--teal-hover)}
.privacy-line{font-size:.85rem;color:var(--gray);margin-top:18px;max-width:60ch}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* footer */
footer{border-top:1px solid var(--line-soft);padding:34px 0 46px;margin-top:20px}
.foot-row{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:.85rem;color:var(--gray)}
.foot-row a{color:var(--gray)}
.foot-row a:hover{color:var(--teal)}

/* thanks page */
.center-wrap{min-height:64vh;display:flex;align-items:center}

/* ---------- show your work ---------- */
.showcase{border:1px solid var(--line);border-radius:12px;padding:clamp(20px,3vw,28px);
  background:var(--surface3);margin-bottom:26px}
.showcase-head{margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--line-soft)}
.opt{font-family:'Plus Jakarta Sans',sans-serif;font-style:normal;font-size:10px;
  letter-spacing:1px;color:var(--coral);border:1px solid var(--coral-dim);
  border-radius:999px;padding:3px 9px;margin-left:8px;vertical-align:middle}

.proj{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
@media(max-width:640px){.proj{grid-template-columns:1fr}}

/* file drop */
.filedrop{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:5px;padding:26px 20px;border:1.5px dashed var(--line);border-radius:10px;
  background:var(--surface2);cursor:pointer;transition:border-color .15s,background .15s;text-align:center}
.filedrop:hover{border-color:var(--teal);background:rgba(30,179,151,.05)}
.filedrop input[type=file]{position:absolute;opacity:0;width:0;height:0}
.fd-icon{font-size:1.15rem;color:var(--teal);line-height:1}
.fd-main{font-family:'DM Mono',monospace;font-size:12px;letter-spacing:2px;
  text-transform:uppercase;color:var(--gray-light)}
.fd-sub{font-size:.8rem;color:var(--gray)}
.filedrop:focus-within{border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-glow)}

.fd-list{margin-top:12px;display:flex;flex-direction:column;gap:6px}
.fd-item{display:flex;justify-content:space-between;gap:12px;align-items:center;
  background:var(--surface2);border:1px solid var(--line-soft);border-radius:7px;
  padding:9px 13px;font-size:.85rem;color:var(--gray-light)}
.fd-item .sz{font-family:'DM Mono',monospace;font-size:11px;color:var(--gray);flex:none}
.fd-warn{color:var(--coral);font-size:.85rem;margin-top:8px}

/* ---------- imagery ---------- */
.band{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line);
  margin-top:44px}
.band img{width:100%;height:auto;display:block;aspect-ratio:2/1;object-fit:cover}
.band::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.72) 100%)}
.band .cap{position:absolute;left:0;bottom:0;z-index:2;padding:20px 24px;
  font-family:'DM Mono',monospace;font-size:11px;letter-spacing:2px;
  text-transform:uppercase;color:var(--gray-light)}
.band .cap b{color:var(--teal);font-weight:500}

.duo{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:34px}
@media(max-width:720px){.duo{grid-template-columns:1fr}}
.duo figure{margin:0;border-radius:12px;overflow:hidden;border:1px solid var(--line);
  background:var(--surface2)}
.duo img{width:100%;height:auto;display:block;aspect-ratio:16/10;object-fit:cover}
.duo figcaption{padding:14px 18px;font-size:.88rem;color:var(--gray)}
.duo figcaption b{display:block;color:var(--white);font-weight:600;font-size:.95rem;
  margin-bottom:3px;font-family:'Plus Jakarta Sans',sans-serif}

.subhead{font-size:clamp(19px,2.3vw,25px);font-weight:600;letter-spacing:-.5px;color:var(--coral);margin:16px 0 18px;line-height:1.35;max-width:640px}