/* The contact page. Only what site.css doesn't already have. site.css styles
   the form for a blue band, so the fields get a line here to show up on paper. */
.ct-top{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:32px;align-items:end}
.ct-top .h1{grid-column:1}
.ct-top .lead{grid-column:1}
.ct-pic{grid-column:2;grid-row:1/3;width:104px;height:104px}
.ct form{max-width:none;margin-top:0}
.ct fieldset{min-width:0;padding:0;border:0;scroll-margin-top:20px}
.ct legend{padding:0;font-family:var(--tight);font-weight:600;font-size:17px;letter-spacing:-.01em;line-height:1.3}
.ct legend span{font-family:var(--sans);font-weight:400;font-size:15px;letter-spacing:0;white-space:nowrap}
.ct label{margin-top:16px}
.ct input:not(.hp),.ct select,.ct textarea{border-color:var(--cobalt)}
.ct input:focus-visible,.ct select:focus-visible,.ct textarea:focus-visible{outline-color:var(--cobalt)}
.ct [aria-invalid=true]{box-shadow:inset 0 0 0 1px var(--cobalt)}
.ct textarea{min-height:128px}
.ct-err{margin-top:6px;font-size:14px;font-weight:600;line-height:1.4}

/* tick boxes: the whole row is the tap target */
.ct-ticks{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0 12px}
.ct .ct-ticks label{position:relative;display:block;margin:0;cursor:pointer}
.ct .ct-ticks input{position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;padding:0;border:0;opacity:0;cursor:pointer}
.ct-ticks span{display:flex;align-items:center;gap:12px;height:100%;min-height:52px;padding:10px 14px;border:1.5px solid var(--cobalt);border-radius:10px;font-size:15px;font-weight:500;line-height:1.3;transition:background-color .15s,color .15s}
.ct-ticks span::before{content:"";flex:none;width:22px;height:22px;border:1.5px solid currentColor;border-radius:6px}
.ct-ticks span::after{content:"";position:absolute;left:21px;top:50%;width:11px;height:5px;margin-top:-5px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);opacity:0}
.ct-ticks input:checked+span{background:var(--cobalt);color:var(--paper)}
.ct-ticks input:checked+span::after{opacity:1}
.ct-ticks input:focus-visible+span{outline:3px solid var(--cobalt);outline-offset:2px}
@media (hover:hover){.ct-ticks input:not(:checked):hover+span{background:#E6EAF4}}

/* thank you */
.ct #thanks{margin:0;font:inherit;letter-spacing:0;outline:0}
.ct #thanks h2{margin-bottom:8px}
.ct #thanks .more{margin-top:8px}

@media (max-width:860px){
.ct-pic{width:72px;height:72px}
}
@media (max-width:599px){
.ct-top{column-gap:16px}
.ct-top .h1{grid-column:1/-1}
.ct-pic{grid-row:2}
.ct-ticks{grid-template-columns:1fr}
.ct .submit{width:100%}
}
@media (prefers-reduced-motion:reduce){.ct-ticks span{transition:none}}