/* /contact/: AfterQuery's calm layout (underlined fields, checkbox list, info panel), refined in our tokens. */
.cx { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px clamp(40px, 6vw, 96px); align-items: start; padding-top: clamp(80px, 13vh, 140px); }
.cx-form h1 { margin: 0 0 clamp(36px, 5vh, 56px); font-weight: 400; font-size: var(--t-h1); line-height: 1.05; letter-spacing: -0.03em; }
#lead { font-family: var(--sans); }
.cx-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.cf { position: relative; margin: 0 0 26px; }
.cf > label, .cf legend { display: block; margin: 0 0 6px; padding: 0; font-size: 13.5px; font-weight: 450; color: var(--muted); }
.cf input, .cf textarea { display: block; width: 100%; padding: 8px 0 11px; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; background: transparent; color: var(--ink); font: 400 17px/1.4 var(--sans); outline: none; -webkit-appearance: none; appearance: none; transition: border-color var(--t-quick); }
.cf textarea { min-height: 110px; resize: vertical; }
.cf input::placeholder, .cf textarea::placeholder { color: color-mix(in srgb, var(--muted) 70%, transparent); }
.cf input:hover, .cf textarea:hover { border-bottom-color: color-mix(in srgb, var(--ink) 35%, var(--rule)); }
/* focus: an accent line draws from the left */
.cf:not(.boxes)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); pointer-events: none; }
.cf:focus-within::after { transform: scaleX(1); }
.cf:has(textarea)::after { bottom: 6px; }

/* checkbox list */
fieldset.cf { border: 0; padding: 0; min-width: 0; margin-top: 6px; }
.boxes legend { margin-bottom: 10px; }
.boxes label { display: flex; align-items: center; gap: 12px; padding: 7px 0; font-size: 16px; color: var(--ink); cursor: pointer; }
.boxes input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.boxes span { position: relative; padding-left: 32px; }
.boxes span::before { content: ""; position: absolute; left: 0; top: 50%; width: 20px; height: 20px; margin-top: -10px; border: 1px solid color-mix(in srgb, var(--ink) 28%, var(--rule)); border-radius: 6px; background: var(--paper); transition: background var(--t-quick), border-color var(--t-quick); }
.boxes span::after { content: ""; position: absolute; left: 7px; top: 50%; width: 6px; height: 11px; margin-top: -7px; border: solid var(--on-accent); border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform .25s var(--ease); }
.boxes label:hover span::before { border-color: var(--ink); }
.boxes input:checked + span::before { background: var(--accent); border-color: var(--accent); }
.boxes input:checked + span::after { transform: rotate(45deg) scale(1); }
.boxes input:focus-visible + span::before { border-color: var(--accent); }

.submit { width: 100%; height: 52px; margin-top: 8px; font-size: 15.5px; }
.submit[disabled] { opacity: .6; cursor: progress; }
.fine { margin: 14px 0 0; font-size: 13px; color: var(--muted); text-align: center; }
.fine a { color: var(--muted); }
.status { min-height: 1.2em; margin: 0 0 6px; font-size: 14px; color: var(--muted); }
.status.bad { color: var(--accent); font-weight: 500; }
.invalid input, .invalid textarea { border-bottom-color: var(--accent); }
.invalid.boxes span::before { border-color: var(--accent); }
.err { margin: 6px 0 0; font-size: 13px; font-weight: 500; color: var(--accent); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.done { padding: 8px 0; font-family: var(--sans); }
.done:focus { outline: none; }
.done h2 { margin: 14px 0 10px; font-family: var(--serif); font-weight: 400; font-size: 32px; line-height: 1.12; letter-spacing: -0.02em; }
.done p:not(.label) { margin: 0; font-size: 16px; color: var(--muted); }

/* side: intro and the dark info panel, which stays in view on desktop */
.cx-side { position: sticky; top: calc(var(--header-h) + 24px); }
.cx-lede { margin: 0 0 28px; font-family: var(--sans); font-size: clamp(17px, .4vw + 14px, 20px); line-height: 1.5; color: var(--muted); }
.cx-panel { position: relative; overflow: hidden; min-height: 460px; border-radius: var(--radius); background: #070a1a; color: #f5f3ed; }
.cx-panel > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cx-sym { position: absolute; right: 28px; bottom: 28px; width: 34px; height: 34px; fill: #f5f3ed; opacity: .9; }
.cx-panel-in { position: relative; display: flex; flex-direction: column; gap: 26px; padding: 32px; font-family: var(--sans); }
.cx-panel .k { margin: 0 0 6px; font-size: 13.5px; color: rgba(245, 243, 237, .66); }
.cx-panel a { font-size: 17px; color: #f5f3ed; text-decoration: none; border-bottom: 1px solid rgba(245, 243, 237, .3); }
.cx-panel a:hover { border-color: #f5f3ed; }
.cx-note { margin: 10px 0 0; max-width: 30ch; font-size: 14.5px; line-height: 1.5; color: rgba(245, 243, 237, .72); }
@media (max-width: 900px) {
  .cx { grid-template-columns: 1fr; padding-top: 64px; }
  .cx-side { position: static; }
  .cx-panel { min-height: 0; }
  .cx-sym { width: 26px; height: 26px; right: 22px; bottom: 22px; }
}
@media (max-width: 520px) { .cx-row { grid-template-columns: 1fr; } }
.m-only { display: none; }
@media (max-width: 900px) { .m-only { display: block; margin-top: -20px; } .cx-side .cx-lede { display: none; } }
.cx-panel { min-height: 560px; }
.cx-panel-in { gap: 34px; padding: 36px; }
@media (max-width: 900px) { .cx-panel { min-height: 0; } .cx-panel-in { gap: 26px; padding: 28px 24px 64px; } }
/* submit: grey until the required fields are filled, then the accent; always a pointer */
.submit { cursor: pointer; background: color-mix(in srgb, var(--ink) 9%, var(--paper)); color: color-mix(in srgb, var(--ink) 55%, transparent) !important; transition: background .3s var(--ease), color .3s var(--ease); }
.submit:hover { background: color-mix(in srgb, var(--ink) 13%, var(--paper)); }
.submit.ready { background: var(--accent); color: var(--on-accent) !important; }
.submit.ready:hover { background: color-mix(in srgb, var(--accent) 86%, var(--ink)); }