/* ============================================================
   Squadra — /contact "Get in touch"
   Dynamic three-path intent form (hire / coach / join).
   Intent themes the page accent, matching the site's colour
   language: Hire → Ink (Fractional), Coach → Electric (Coaching),
   Join → Lime (Collective).
   ============================================================ */

/* intent accent, themed on the section */
.contact { background: var(--bg-primary); }
.contact[data-intent="hire"] { --intent: var(--bg-dark); --on-intent: #fff; }
.contact[data-intent="coach"] { --intent: var(--bg-anchor); --on-intent: #fff; }
.contact[data-intent="join"] { --intent: var(--bg-editorial); --on-intent: var(--text-primary); }

.contact-grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(40px, 6vw, 88px);
  align-items: start; padding-top: clamp(40px, 7vh, 88px); padding-bottom: clamp(64px, 10vh, 120px); }

/* ---------- left: lead + intent picker ---------- */
.contact-lead { position: sticky; top: 96px; }
.contact-lead .eyebrow { display: block; margin-bottom: 22px; }
.contact-lead h1, .contact-lead h2#c-headline { font-family: var(--font-condensed); font-weight: 700; letter-spacing: -0.02em;
  line-height: 1.0; font-size: clamp(36px, 4.6vw, 62px); margin: 0 0 18px; max-width: 14ch; }
.contact-lead .lead-copy { font-size: var(--body-large-size); line-height: 1.5; color: var(--text-secondary);
  max-width: 42ch; margin: 0 0 34px; }

.intent-picker { margin-bottom: 32px; }
.intent-label { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-secondary); margin-bottom: 12px; }
.intent-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.intent-btn { appearance: none; cursor: pointer; text-align: left; background: var(--bg-card);
  border: 1.5px solid var(--divider-light); padding: 14px 14px 13px; display: flex; flex-direction: column;
  gap: 4px; transition: border-color var(--dur-base) var(--ease-standard), transform var(--dur-fast) var(--ease-standard); }
.intent-btn:hover { border-color: var(--text-primary); transform: translateY(-2px); }
.intent-btn .ib-n { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; opacity: 0.55; }
.intent-btn .ib-t { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
.intent-btn[data-intent="hire"].on { background: var(--bg-dark); color: #fff; border-color: var(--bg-dark); }
.intent-btn[data-intent="coach"].on { background: var(--bg-anchor); color: #fff; border-color: var(--bg-anchor); }
.intent-btn[data-intent="join"].on { background: var(--bg-editorial); color: var(--text-primary); border-color: var(--bg-editorial); }
.intent-btn.on .ib-n { opacity: 0.7; }

/* what-happens-next reassurance */
.contact-next { border-top: 1px solid var(--divider-light); padding-top: 22px; }
.contact-next .cn-title { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-secondary); margin-bottom: 16px; }
.contact-next ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px;
  counter-reset: cn; }
.contact-next li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start;
  font-size: 14.5px; line-height: 1.5; color: var(--text-secondary); }
.contact-next li::before { counter-increment: cn; content: counter(cn, decimal-leading-zero);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--intent, var(--text-link));
  padding-top: 2px; font-weight: 600; }
.contact[data-intent="join"] .contact-next li::before { color: #8a9a17; } /* lime is too light as text */
.contact-next li strong { color: var(--text-primary); font-weight: 600; }

/* ---------- right: form card ---------- */
.form-card { background: var(--bg-card); border: 1px solid var(--divider-light); padding: clamp(26px, 3vw, 40px); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 7px; border: 0; padding: 0; background: none; } /* wrapper only: undo the design-system input underline */
.field.col-2 { grid-column: 1 / -1; }
.field label { font-size: 13px; font-weight: 600; letter-spacing: -0.005em; color: var(--text-primary); }
.field label .opt { font-weight: 400; color: var(--text-secondary); }
.field input, .field select, .field textarea { font-family: var(--font-standard); font-size: 15px;
  color: var(--text-primary); background: var(--bg-primary); border: 1.5px solid var(--divider-light);
  padding: 12px 13px; width: 100%; transition: border-color var(--dur-base) var(--ease-standard);
  border-radius: 0; -webkit-appearance: none; appearance: none; }
.field textarea { min-height: 104px; resize: vertical; line-height: 1.5; }
.field select { background-image: 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' stroke='%231A1A2E' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 34px; cursor: pointer; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--intent, var(--text-primary)); }
.field input::placeholder, .field textarea::placeholder { color: var(--text-secondary); opacity: 0.7; }

/* segmented control */
.seg { display: flex; gap: 0; border: 1.5px solid var(--divider-light); }
.seg-opt { flex: 1; cursor: pointer; text-align: center; padding: 11px 8px; font-size: 13.5px; font-weight: 600;
  color: var(--text-secondary); background: var(--bg-card); border: none; border-left: 1.5px solid var(--divider-light);
  transition: background var(--dur-cta) var(--ease-cta), color var(--dur-cta) var(--ease-cta); }
.seg-opt:first-child { border-left: none; }
.seg-opt:hover { color: var(--text-primary); }
.seg-opt.on { background: var(--intent, var(--text-primary)); color: var(--on-intent, #fff); }

/* fieldsets — only the active intent's fields show */
.fields-for { display: none; }
.fields-for.active { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* smooth intent swap: incoming fields + lead copy fade-and-rise in */
@keyframes contactSwapIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .fields-for.active { animation: contactSwapIn 0.36s cubic-bezier(0.16, 1, 0.3, 1) both; }
  .contact-lead h1.swap, .contact-lead h2#c-headline.swap, .contact-lead .lead-copy.swap,
  .contact-next.swap { animation: contactSwapIn 0.34s cubic-bezier(0.16, 1, 0.3, 1) both; }
  .form-card { transition: min-height 0.36s cubic-bezier(0.16, 1, 0.3, 1); }
}

.form-foot { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; }
.form-submit { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 16px;
  padding: 15px 26px; background: var(--text-primary); color: #fff; border: none; cursor: pointer;
  transition: transform var(--dur-cta-move) var(--ease-cta), background var(--dur-cta) var(--ease-cta); }
.form-submit .arr { transition: transform var(--dur-cta-move) var(--ease-cta); }
.form-submit:hover { background: #000; }
.form-submit:hover .arr { transform: translateX(4px); }
.form-note { font-size: 13px; color: var(--text-secondary); line-height: 1.45; max-width: 30ch; }
.err-msg { grid-column: 1 / -1; font-size: 13.5px; color: #b3261e; display: none; }
.err-msg.show { display: block; }
.field.invalid input, .field.invalid select { border-color: #b3261e; }

/* success state */
.form-success { display: none; }
.form-success.show { display: block; }
.form-card.done .form-live { display: none; }

.fs-check { width: 74px; height: 74px; margin-bottom: 26px; }
.fs-check svg { width: 100%; height: 100%; overflow: visible; }
.fs-check .fs-ring { fill: none; stroke: var(--text-primary); stroke-width: 3; }
.fs-check .fs-tick { fill: none; stroke: var(--bg-anchor); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }

.fs-eyebrow { display: block; margin-bottom: 14px; }
.form-success h2 { font-family: var(--font-condensed); font-weight: 700; letter-spacing: -0.018em;
  font-size: clamp(28px, 3.4vw, 42px); line-height: 1.02; margin: 0 0 14px; max-width: 16ch; }
.form-success p { font-size: 16px; line-height: 1.55; color: var(--text-secondary); max-width: 42ch; margin: 0 0 22px; }

.fs-badge { display: inline-flex; align-items: center; gap: 11px; padding: 11px 17px;
  background: var(--bg-primary); border: 1px solid var(--divider-light); margin-bottom: 30px;
  font-size: 14px; font-weight: 600; color: var(--text-primary); }
.fs-badge-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--bg-anchor); position: relative; flex: none; }
.fs-badge-dot::after { content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 1.5px solid var(--bg-anchor); opacity: 0; }

.fs-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.fs-linkedin { display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  background: var(--bg-anchor); color: #fff; font-weight: 600; font-size: 15px; padding: 13px 20px;
  transition: transform var(--dur-cta-move) var(--ease-cta), background var(--dur-cta) var(--ease-cta); }
.fs-linkedin svg { width: 18px; height: 18px; flex: none; }
.fs-linkedin:hover { background: #0a5bd6; transform: translateY(-2px); }
.form-success .fs-back { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: 14.5px;
  background: none; border: none; cursor: pointer; color: var(--text-primary); padding: 0; }
.form-success .fs-back .arr { transition: transform var(--dur-cta-move) var(--ease-cta); }
.form-success .fs-back:hover .arr { transform: translateX(-3px); }

/* entrance choreography (degrades to fully-visible under reduced motion) */
@media (prefers-reduced-motion: no-preference) {
  .form-success.show .fs-check { animation: fsPop 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; }
  .form-success.show .fs-ring { stroke-dasharray: 184; stroke-dashoffset: 184; animation: fsDraw 0.6s ease 0.12s forwards; }
  .form-success.show .fs-tick { stroke-dasharray: 44; stroke-dashoffset: 44; animation: fsDraw 0.4s ease 0.52s forwards; }
  .form-success.show .fs-badge-dot::after { animation: fsPing 1.6s ease 0.95s 3; }
  .form-success.show > .fs-eyebrow { animation: fsUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both; }
  .form-success.show > h2 { animation: fsUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.58s both; }
  .form-success.show > p { animation: fsUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.66s both; }
  .form-success.show > .fs-badge { animation: fsUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.74s both; }
  .form-success.show > .fs-actions { animation: fsUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.82s both; }
}
@keyframes fsDraw { to { stroke-dashoffset: 0; } }
@keyframes fsPop { 0% { transform: scale(0.5); opacity: 0; } 60% { transform: scale(1.06); } 100% { transform: scale(1); opacity: 1; } }
@keyframes fsUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes fsPing { 0% { transform: scale(1); opacity: 0.7; } 70%, 100% { transform: scale(2.5); opacity: 0; } }

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: 36px; }
  .contact-lead { position: static; }
}
@media (max-width: 560px) {
  .form-grid, .fields-for.active { grid-template-columns: 1fr; }
  .intent-row { grid-template-columns: 1fr; }
}