/* /contact/ and the 404 page. Colours come from c.css tokens only.
   Source order is intro, form, next steps, so the form comes first on mobile;
   on desktop the form sits beside the other two. */

.ct{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-rows:auto 1fr;gap:var(--space-6) var(--space-8);padding:var(--space-8) 0;align-items:start}
.ct-intro h1{margin:0 0 var(--space-4);max-width:18ch;font-size:var(--text-h1);line-height:1.05;letter-spacing:-.035em;font-weight:600;text-wrap:balance}
.ct-intro .lede{font-size:var(--text-lg);line-height:1.5}
.ct-panel{grid-column:2;grid-row:1 / span 2;min-width:0}
.ct-steps{grid-column:1;grid-row:2;min-width:0}

/* form */
.ct-panel .cf{gap:var(--space-4)}
.ct-panel .cf h2{font-size:var(--text-h3)}
.ct-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:var(--space-4)}
.ct-panel .cf select{appearance:auto;min-height:48px;width:100%;padding:12px 14px;font:inherit;font-size:var(--text-base);color:var(--fg);background:var(--bg);border:1px solid var(--line2);border-radius:var(--r-md)}
.ct-panel .cf select.is-preset{border-color:var(--acc)}
.ct-panel .cf select option,.ct-panel .cf select optgroup{color:var(--fg);background:var(--card)}
.ct-panel .cf input[type=text],.ct-panel .cf input[type=email],.ct-panel .cf textarea{min-height:48px;padding:12px 14px}
.ct-panel .cf .opt{color:var(--fg3);font-size:var(--text-sm)}
.ct-hint{margin:calc(var(--space-2) * -1) 0 0;font-size:var(--text-sm);line-height:1.5;color:var(--fg3)}
.ct-hint a,.ct-picked a{color:var(--acc)}
.ct-picked{margin:0;padding:var(--space-3) 14px;font-size:var(--text-sm);line-height:1.5;color:var(--fg2);border:1px solid var(--acc);border-radius:var(--r-md)}
.ct-panel .cf .btn{display:block;width:100%;min-height:48px;padding:14px 18px;font-size:var(--text-base)}

/* Inline errors. c.js sets aria-invalid on submit; each message goes away as soon as the value is valid. */
.f-err{display:none;font-size:var(--text-sm);line-height:1.4;color:var(--danger)}
.ct-panel .cf [aria-invalid="true"]:invalid{border-color:var(--danger)}
.ct-panel .cf [aria-invalid="true"]:valid{border-color:var(--line2)}
.ct-panel .cf [aria-invalid="true"]:invalid+.f-err{display:block}
.ct-panel .cf .status{padding:var(--space-3) 14px;line-height:1.4;border:1px solid var(--danger);border-radius:var(--r-md)}
.ct-panel .cf .status:empty{display:none}
.ct-panel .cf ul{margin:0;font-size:var(--text-sm);line-height:1.45;color:var(--fg3)}
.ct-panel .cf ul a{color:var(--acc)}
.ct-panel .cf .legal{font-size:var(--text-sm);line-height:1.45;color:var(--fg3)}
.ct-panel .cf .legal a{color:var(--acc)}

/* success */
.ct-sent{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-5) 0}
.ct-sent[hidden]{display:none}
.ct-sent:focus{outline:0}
.ct-sent i{font-size:40px;line-height:1;color:var(--acc)}
.ct-sent h2{margin:0;font-size:var(--text-h2);line-height:1.1;letter-spacing:-.025em;font-weight:600}
.ct-sent p{margin:0;font-size:var(--text-base);line-height:1.55;color:var(--fg2)}
.ct-sent a{color:var(--acc)}

/* what happens next: a real sequence, so the numbers stay */
.ct-steps h2{margin:0 0 var(--space-2);font-size:var(--text-lg);font-weight:600}
.ct-steps ol{list-style:none;margin:0;padding:0}
.ct-steps li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:var(--space-3);padding:var(--space-4) 0;border-bottom:1px solid var(--line)}
.ct-steps .n{font-size:var(--text-base);font-weight:600;line-height:1.4;color:var(--acc);font-variant-numeric:tabular-nums}
.ct-steps h3{margin:0 0 var(--space-1);font-size:var(--text-base);line-height:1.4;font-weight:600}
.ct-steps p{margin:0;font-size:15px;line-height:1.5;color:var(--fg3)}

@media (max-width:900px){
  .ct{grid-template-columns:minmax(0,1fr);grid-template-rows:none;gap:var(--space-5);padding:var(--space-5) 0 var(--space-7)}
  .ct-panel,.ct-steps{grid-column:auto;grid-row:auto}
  .ct-intro h1{margin-bottom:var(--space-3)}
  .ct-intro .lede{font-size:var(--text-base)}
}

/* 404 */
.err-page{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-8) 0 var(--space-9)}
.err-page h1{margin:0;max-width:20ch;font-size:var(--text-h1);line-height:1.05;letter-spacing:-.035em;font-weight:600;text-wrap:balance}
.err-page .lede a{color:var(--acc)}
.err-ctas{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-2)}
.c-head .c-status{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--fg3)}