/* ============================================================
   CONTACT / LEAD FORM  (the "get in touch" one-shot enquiry)
   Loaded AFTER style.css so the .contact rules here override the
   old orange CTA block. Two fonts only (Judson + Istok Web).
   Submits via Netlify Forms (form name "lead") to hello@slabb.ai.
   Kept in its own file so the shared style.css stays untouched.
   ============================================================ */

.contact{
  position:relative; z-index:2;
  background:var(--cream); color:var(--ink);
  padding:clamp(88px,13vw,170px) 0 clamp(150px,20vw,240px);
  /* scoped tokens (site --line is white, meant for dark sections) */
  --ink-72:rgba(13,13,13,.72);
  --ink-50:rgba(13,13,13,.5);
  --ink-34:rgba(13,13,13,.34);
  --lnd:rgba(13,13,13,.16);
  --lnd2:rgba(13,13,13,.09);
  --osoft:rgba(255,74,28,.1);
}
.contact__grid{
  display:grid; grid-template-columns:1fr 1.05fr;
  gap:clamp(40px,6vw,96px); align-items:start;
}

/* ---- left rail ---- */
.contact .rail{position:sticky; top:clamp(40px,6vw,84px)}
.contact .rail__kicker{display:block; font-family:var(--font-text); font-weight:700;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--orange)}
.contact .rail__h{font-family:var(--font-display); font-weight:400; font-size:clamp(52px,7.5vw,104px);
  line-height:.92; letter-spacing:-.015em; text-transform:lowercase; color:var(--ink); margin:20px 0 0}
.contact .rail__sub{font-size:clamp(18px,1.7vw,23px); line-height:1.35; color:var(--ink); margin-top:24px}
.contact .rail__alt{margin-top:18px; font-size:16px; line-height:1.55; color:var(--ink-72); max-width:34ch}
.contact .rail__alt a{color:var(--orange); text-decoration:none; border-bottom:1px solid var(--osoft); transition:border-color .15s}
.contact .rail__alt a:hover{border-bottom-color:var(--orange)}
.contact .rail__meta{margin-top:32px; display:flex; flex-direction:column; gap:9px;
  font-family:var(--font-text); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-50)}
.contact .rail__meta a{text-decoration:none; transition:color .15s}
.contact .rail__meta a:hover{color:var(--orange)}

/* ---- form ---- */
.contact .lab{font-family:var(--font-text); font-weight:700; text-transform:uppercase; letter-spacing:.14em}
.contact .fieldset{border:0; margin:0 0 34px; padding:0}
.contact .fieldset__label{display:flex; align-items:center; gap:16px; margin-bottom:16px;
  font-size:12px; letter-spacing:.16em; color:var(--ink-50)}
.contact .fieldset__label .rule{flex:1; height:1px; background:var(--lnd2)}
.contact .fieldset__label .req{color:var(--orange); letter-spacing:.16em}

.contact .chips{display:flex; flex-wrap:wrap; gap:10px}
.contact .chip{position:relative}
.contact .chip input{position:absolute; opacity:0; width:0; height:0}
.contact .chip span{display:inline-block; cursor:pointer; font-family:var(--font-text); font-size:15px;
  color:var(--ink-72); background:#fff; border:1px solid var(--lnd);
  padding:11px 22px; border-radius:999px; transition:.14s; user-select:none}
.contact .chip span:hover{border-color:var(--orange); color:var(--ink)}
.contact .chip input:checked + span{background:var(--orange); color:#fff; border-color:var(--orange)}
.contact .chip input:focus-visible + span{box-shadow:0 0 0 3px var(--osoft)}

.contact .pitch{width:100%; background:transparent; color:var(--ink); border:0; border-bottom:1px solid var(--lnd);
  font-family:var(--font-text); font-size:clamp(19px,2vw,24px); line-height:1.4; padding:6px 2px 16px;
  resize:vertical; min-height:120px}
.contact .pitch::placeholder{color:var(--ink-34)}
.contact .pitch:focus{outline:none; border-bottom-color:var(--orange)}

.contact .who{display:grid; grid-template-columns:1fr 1fr; gap:26px 30px; margin-top:4px}
.contact .who .full{grid-column:1 / -1}
.contact .field{display:flex; flex-direction:column; gap:9px}
.contact .field > span{font-family:var(--font-text); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-50)}
.contact .field input{background:transparent; color:var(--ink); border:0; border-bottom:1px solid var(--lnd);
  font-family:var(--font-text); font-size:17px; padding:8px 2px; transition:.14s}
.contact .field input::placeholder{color:var(--ink-34)}
.contact .field input:focus{outline:none; border-bottom-color:var(--orange)}

.contact .send{display:flex; align-items:center; gap:clamp(20px,3vw,40px); flex-wrap:wrap; margin-top:38px}
.contact .send__btn{display:inline-flex; align-items:center; gap:14px; cursor:pointer;
  background:var(--ink); color:var(--cream); border:0; border-radius:999px;
  font-family:var(--font-text); font-weight:700; font-size:19px; letter-spacing:.01em;
  padding:20px 40px; transition:.2s}
.contact .send__btn .ar{transition:transform .2s}
.contact .send__btn:hover{background:var(--orange); color:#fff}
.contact .send__btn:hover .ar{transform:translateX(5px)}
.contact .send__note{font-family:var(--font-text); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  line-height:1.7; color:var(--ink-50); max-width:32ch}
.contact .send__note b{color:var(--orange); font-weight:700}
.contact .hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* ---- entrance (JS adds .contact-entrance to arm, .contact-in to play) ---- */
.contact.contact-entrance .rail__kicker,
.contact.contact-entrance .rail__h,
.contact.contact-entrance .rail__sub,
.contact.contact-entrance .rail__alt,
.contact.contact-entrance .rail__meta,
.contact.contact-entrance .fieldset,
.contact.contact-entrance .send{
  opacity:0; transform:translateY(26px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);
}
.contact.contact-in .rail__kicker,
.contact.contact-in .rail__h,
.contact.contact-in .rail__sub,
.contact.contact-in .rail__alt,
.contact.contact-in .rail__meta,
.contact.contact-in .fieldset,
.contact.contact-in .send{opacity:1; transform:none}
/* stagger: rail cascades, form groups follow */
.contact.contact-entrance .rail__h{transition-delay:.06s}
.contact.contact-entrance .rail__sub{transition-delay:.12s}
.contact.contact-entrance .rail__alt{transition-delay:.16s}
.contact.contact-entrance .rail__meta{transition-delay:.2s}
.contact.contact-entrance .fieldset:nth-of-type(1){transition-delay:.14s}
.contact.contact-entrance .fieldset:nth-of-type(2){transition-delay:.2s}
.contact.contact-entrance .fieldset:nth-of-type(3){transition-delay:.26s}
.contact.contact-entrance .fieldset:nth-of-type(4){transition-delay:.32s}
.contact.contact-entrance .fieldset:nth-of-type(5){transition-delay:.38s}
.contact.contact-entrance .send{transition-delay:.44s}

/* ---- responsive ---- */
@media (max-width:900px){
  .contact__grid{grid-template-columns:1fr; gap:44px}
  .contact .rail{position:static}
}
@media (max-width:560px){
  .contact .who{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .contact.contact-entrance .rail__kicker,
  .contact.contact-entrance .rail__h,
  .contact.contact-entrance .rail__sub,
  .contact.contact-entrance .rail__alt,
  .contact.contact-entrance .rail__meta,
  .contact.contact-entrance .fieldset,
  .contact.contact-entrance .send{opacity:1; transform:none; transition:none}
}