/* Contact page */
.contact { position: relative; overflow: hidden; padding: 40px 0 64px; }
@media (min-width: 720px) { .contact { padding: 48px 0 72px; } }
.contact-wrap { position: relative; z-index: 1; }
.contact-intro .ss-lead { margin: 12px 0 0; max-width: 40em; }
.contact-grid { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); align-items: start; }
/* Desktop: heading + "What happens next" on the left, form on the right, both from the top (2026-10-11: heading
   first in reading order, as people scan top-left first; the form still starts at the top so it fits 1080p) */
@media (min-width: 900px) {
  .contact-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "intro form" "next form"; grid-template-rows: auto 1fr; gap: 32px 56px; }
  .contact-intro { grid-area: intro; padding-top: 4px; }
  .contact-card { grid-area: form; }
  .contact-next { grid-area: next; }
}
.contact-next { padding-top: 4px; }
/* Name + email side by side when there's room */
@media (min-width: 560px) { .field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
.ss .contact-next h2 { margin: 0 0 20px; font-size: clamp(22px, 3vw, 26px); }
.next-list { list-style: none; counter-reset: step; margin: 0 0 24px; padding: 0; }
.next-list li { counter-increment: step; position: relative; padding: 0 0 18px 44px; color: var(--ss-text-2); font-size: 16px; line-height: 1.5; }
.next-list li::before { content: counter(step); position: absolute; left: 0; top: -1px; width: 28px; height: 28px; border: 1px solid var(--ss-line-strong); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font: 500 13px/1 var(--ss-font-mono); color: var(--ss-text); }
.ss .next-mail { margin: 0; font-size: 15px; color: var(--ss-text-2); }
.ss .next-mail a { color: var(--ss-text); }
/* Rings (_rings.html, styled in site.css): bottom-left on desktop, under "What happens next", clear of the form */
/* Extra room under the columns (it only fills space that sat empty above the footer) so the arcs stay clear of the words */
@media (min-width: 1000px) { .contact { padding-bottom: 200px; } .contact .rings { left: -200px; bottom: -260px; width: 480px; height: 480px; } }
.contact-rings-2 { display: none; }
@media (min-width: 1000px) {
  .contact-rings-2 { display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
  /* Bigger, from the top right, behind the form card (the card covers the middle; Shrav 2026-10-12) */
  .contact .contact-rings-2 .rings { left: auto; bottom: auto; right: -330px; top: -170px; width: 980px; height: 980px; transform: rotate(-35deg); }
}
@media (min-width: 900px) { .ss .contact-fallback { display: none; } }
.contact-card { padding: 20px 16px; }
@media (min-width: 720px) { .contact-card { padding: 28px; } }
.contact-card .ss-field { margin-bottom: 16px; }
.contact-card .ss-textarea { min-height: 132px; }
.contact-card .ss-select { min-height: 44px; }
.contact-card .ss-input { min-height: 44px; }
.contact-card .ss-btn.lg { width: 100%; }
.contact-card .ss-check { margin-bottom: 0; }
.contact-card .ss-check label { cursor: pointer; }
.contact-card .consent { margin-bottom: 22px; }
.ss .field-err { color: var(--ss-danger); font-size: .88em; margin: 0; }
.ss .field-err:empty { display: none; }
.ss .contact-status { margin-bottom: 18px; }
.ss .contact-status:empty { display: none; }
.ss .contact-status ul { margin: 6px 0 0 18px; padding: 0; }
.ss .contact-status a { color: inherit; text-decoration: underline; }
.ss .contact-fallback { margin: 16px 0 0; font-size: .88em; color: var(--ss-text-2); text-align: center; }
.ss .contact-fallback a { color: var(--ss-text); }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.ss .ss-select, .ss .ss-input, .ss .ss-textarea { max-width: 100%; }
.ss .ss-select[aria-invalid="true"] { border-color: var(--ss-danger); }
.ss .ss-check input[aria-invalid="true"] { outline: 2px solid var(--ss-danger); }
.contact-done { padding: 64px 16px 96px; }
@media (min-width: 720px) { .contact-done { padding: 96px 32px 120px; } }
.contact-done .btns { margin-top: 28px; }
@media (max-width: 899px) { .ss .next-mail { display: none; } }

/* Same heading-to-intro gap as every other page (20 px; was about 50 here, design check 19) */
.ss .contact-intro .ss-h1 { margin: 0 0 20px; }
.ss .contact-intro .ss-lead { margin: 0; }

/* Turnstile spam check: full width of the form (data-size="flexible"), height kept so nothing jumps while it loads */
.cf-turnstile { width: 100%; min-height: 65px; }