/* Kankode Labs — contact form. Shared by the homepage (#contact) and /contact/.
   Relies on the brand tokens defined in css/styles.css and css/pages.css. */
.contact-form{position:relative;width:100%;max-width:620px;display:flex;flex-direction:column;gap:.9rem;
  text-align:left;padding:clamp(1.3rem,2.6vw,2rem);background:rgba(12,19,16,.74);
  border:1px solid var(--line);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.contact-form::before{content:'';position:absolute;left:-1px;right:-1px;top:-1px;height:2px;background:var(--grad)}
.contact-form__row{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.contact-form__field{display:flex;flex-direction:column;gap:.4rem;min-width:0}
.contact-form__field>span{font-family:var(--mono);font-size:.62rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--spring)}
.contact-form__field em{font-style:normal;letter-spacing:.12em;color:rgba(238,245,240,.45)}
.contact-form input,.contact-form select,.contact-form textarea{width:100%;border-radius:0;
  -webkit-appearance:none;appearance:none;background:var(--glass);color:var(--mist);
  border:1px solid rgba(238,245,240,.14);padding:.7rem .85rem;
  font:300 1rem/1.4 var(--sora);                       /* 16px: stops iOS zooming on focus */
  transition:border-color .2s,background-color .2s,box-shadow .2s}
.contact-form textarea{resize:vertical;min-height:6.2rem}
.contact-form ::placeholder{color:rgba(238,245,240,.35)}
.contact-form select{padding-right:2.4rem;cursor:pointer;
  background:var(--glass) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2334E0A1' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right .9rem center}
.contact-form select:invalid{color:rgba(238,245,240,.45)}
.contact-form option{background:var(--forest);color:var(--mist)}
.contact-form input:hover,.contact-form select:hover,.contact-form textarea:hover{border-color:rgba(52,224,161,.4)}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{outline:none;
  border-color:var(--spring);background-color:rgba(52,224,161,.06);
  box-shadow:0 0 0 1px var(--spring),0 0 18px rgba(52,224,161,.22)}
/* invalid only after the visitor has interacted — lime, never red */
.contact-form :user-invalid{border-color:var(--lime);box-shadow:0 0 0 1px var(--lime)}
.contact-form__field:has(:user-invalid)>span{color:var(--lime)}
.contact-form__hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.contact-form__legal{margin:0;font-size:.78rem;line-height:1.5;color:rgba(238,245,240,.55)}
.contact-form__legal a{color:var(--spring);text-decoration:underline;text-underline-offset:3px}
.contact-form__legal a:hover{color:var(--lime)}
.contact-form__foot{display:flex;align-items:center;gap:.6rem 1.2rem;flex-wrap:wrap}
.contact-form__send{border:0;cursor:pointer;padding:1rem 1.9rem;background:var(--grad);color:var(--forest);
  font:700 .74rem var(--mono);letter-spacing:.18em;text-transform:uppercase;transition:filter .2s;
  clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px)}
.contact-form__send:hover{filter:brightness(1.1)}
.contact-form__send:disabled{opacity:.6;cursor:progress}
.contact-form__status{flex:1 1 200px;margin:0;font-family:var(--mono);font-size:.72rem;line-height:1.5;color:var(--lime)}
.contact-form__status:empty{display:none}
@media (min-width:900px) and (max-height:760px){
  .contact-form{gap:.7rem;padding:1.3rem 1.5rem}
  .contact-form textarea{min-height:4.6rem}
}
@media (max-width:560px){.contact-form__row{grid-template-columns:1fr}}