/* Contact page and thank-you page (Milestone 5). Tokens and shell come from tokens.css / shell.css.
   A few generic helpers (sr-only, tick, outline button) are repeated on purpose so this file stands alone. */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.btn--lg{min-height:56px;padding-inline:32px}
.btn--outline{background:transparent;color:inherit;border:1.5px solid currentColor;min-height:52px}
.btn--outline:hover{background:var(--ink);color:var(--warm);border-color:var(--ink)}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:800;font-stretch:125%;letter-spacing:-.005em;margin:0;text-wrap:balance}
.tick{width:8px;height:8px;background:var(--lime);display:inline-block}
.ct-eyebrow{display:flex;align-items:center;gap:var(--s3);color:var(--grey);margin-bottom:var(--s4)}

/* hero */
.ct-hero{background:var(--ink);color:var(--warm);padding-block:var(--s7) var(--s8)}
.ct-hero h1{font-size:var(--t-h1);line-height:1.04;overflow-wrap:anywhere}
.ct-lead{font-size:var(--t-lead);color:var(--grey);max-width:40ch;margin-top:var(--s5);line-height:1.5}
.ct-quick{margin-top:var(--s5);color:var(--grey);overflow-wrap:anywhere}
.ct-quick a,.ct-done-mail a,.ct-alert-mail a,.ct-direct-mail a{color:var(--warm);text-decoration:underline;text-decoration-color:var(--lime);text-decoration-thickness:2px;text-underline-offset:4px}
.ct-quick a:hover,.ct-direct-mail a:hover{color:var(--lime)}
.ct-thanks-cta{margin-top:var(--s6)}
.ct-thanks-cta .btn{width:100%}

/* form section: warm-white band, so focus rings are ink */
.ct-formsec{background:var(--warm);color:var(--ink);padding-block:var(--s7) var(--s9)}
.ct-formsec :focus-visible,.ct-close :focus-visible{outline-color:var(--ink)}
.ct-formsec [hidden]{display:none!important}
.ct-steps{list-style:none;margin:0 0 var(--s5);padding:0;display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);max-width:880px}
.ct-stepi{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);min-height:52px;padding:var(--s2) var(--s4);border:1.5px solid var(--ink);font-weight:700;font-size:var(--t-small)}
.ct-stepn{font-family:var(--font-mono);font-weight:500;letter-spacing:.08em}
.ct-stepi[aria-current="step"]{background:var(--lime)}
.ct-stepi[data-state="done"]{background:var(--ink);color:var(--warm)}
.ct-card{max-width:880px;border-top:4px solid var(--lime);background:var(--warm)}
.ct-note{margin:var(--s5) 0 0;color:var(--graphite);font-size:var(--t-small);max-width:60ch}
.ct-step{padding-block:var(--s5)}
.js .ct-step[hidden]{display:none}
.ct-h{display:flex;align-items:baseline;gap:var(--s3);font-size:clamp(22px,calc(22px + 8 * (100vw - 390px) / 1050),30px);line-height:1.1;margin-bottom:var(--s5)}
.ct-h .label{color:var(--graphite)}
.ct-step+.ct-step{border-top:1.5px solid var(--ink);margin-top:var(--s5)}
.js .ct-step+.ct-step{border-top:0;margin-top:0}

.ct-field{margin-bottom:var(--s5);min-width:0}
.ct-field label,.ct-checks legend,.ct-panel legend{display:block;font-weight:700;font-size:var(--t-body);margin-bottom:var(--s2)}
.ct-req,.ct-opt{font-family:var(--font-mono);font-weight:500;font-size:var(--t-label);letter-spacing:.08em;text-transform:uppercase;color:var(--graphite);margin-left:var(--s2)}
.ct-help{margin:0 0 var(--s2);color:var(--graphite);font-size:var(--t-small);max-width:60ch;line-height:1.45}
.ct-field input[type="text"],.ct-field input[type="email"],.ct-field input[type="url"],.ct-field input[type="tel"],.ct-field select,.ct-field textarea{
  display:block;width:100%;min-height:48px;padding:var(--s3) var(--s4);font:inherit;font-size:16px;color:var(--ink);background:transparent;border:1.5px solid var(--ink);border-radius:0;appearance:none;-webkit-appearance:none}
.ct-field select{background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:var(--s7);text-overflow:ellipsis}
.ct-field textarea{min-height:140px;resize:vertical;line-height:1.5}
.ct-field input:focus-visible,.ct-field select:focus-visible,.ct-field textarea:focus-visible{outline:3px solid var(--ink);outline-offset:2px;background-color:#fff}
.ct-field input::placeholder,.ct-field textarea::placeholder{color:#5a5a57;opacity:1}
.ct-field [aria-invalid="true"]{border-color:var(--error);border-width:2px}
.ct-error{margin:var(--s2) 0 0;color:var(--error);font-weight:700;font-size:var(--t-small)}
.ct-error::before{content:"Error: "}
.ct-error[hidden]{display:none}
.ct-row{display:grid;grid-template-columns:1fr;column-gap:var(--s5)}

.ct-panel{margin:0 0 var(--s5);padding:var(--s4) 0 0 var(--s4);border:0;border-left:4px solid var(--lime);min-width:0}
.ct-panel[hidden]{display:none}
.ct-panel>legend{padding:0;margin-left:calc(var(--s4) * -1 + 0px);padding-left:var(--s4);float:left;width:100%}
.ct-panel>legend+*{clear:both}
.ct-checks{border:0;margin:0 0 var(--s5);padding:0;min-width:0}
.ct-checks legend{padding:0}
.ct-check{display:flex;align-items:center;gap:var(--s3);min-height:44px;padding:var(--s1) 0;font-size:var(--t-body);cursor:pointer}
.ct-check input{width:24px;height:24px;flex:none;accent-color:var(--ink);margin:0}
.ct-checks .ct-check{margin-bottom:0}
.ct-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.ct-privacy{margin:var(--s5) 0;color:var(--graphite);font-size:var(--t-small);max-width:60ch;line-height:1.5}
.ct-noscript{margin-top:var(--s4);color:var(--graphite);font-size:var(--t-small)}

.ct-actions{display:flex;flex-direction:column-reverse;gap:var(--s3);margin-top:var(--s5)}
.ct-actions .btn{width:100%}
.ct-actions .btn[disabled]{opacity:.6;cursor:not-allowed}
.ct-actions .btn[hidden]{display:none}
.ct-alert{margin:var(--s5) 0;padding:var(--s4) var(--s5);border:1.5px solid var(--ink);border-left:8px solid var(--error);background:#fff}
.ct-alert[hidden]{display:none}
.ct-alert h4{font-size:var(--t-lead);line-height:1.2;margin-bottom:var(--s2)}
.ct-alert p{margin:var(--s2) 0 0;max-width:60ch;line-height:1.5}
.ct-alert .ct-alert-mail a,.ct-done .ct-done-mail a{color:var(--ink);text-decoration-color:var(--ink)}
.ct-done{padding-block:var(--s7)}
.ct-done[hidden]{display:none}
.ct-done h2{font-size:var(--t-h2);line-height:1.08}
.ct-done p{margin:var(--s4) 0 0;max-width:56ch;font-size:var(--t-lead);line-height:1.5;color:var(--graphite)}
.ct-done p.ct-done-mail{font-size:var(--t-body);overflow-wrap:anywhere}
.ct-done .btn{width:100%;margin-top:var(--s3)}

/* direct contact */
.ct-direct{background:var(--ink);color:var(--warm);padding-block:var(--s9)}
.ct-direct h2{font-size:var(--t-h2);line-height:1.08}
.ct-direct-text{margin-top:var(--s4);color:var(--grey);font-size:var(--t-lead);max-width:36ch;line-height:1.5}
.ct-direct-grid{display:grid;gap:var(--s6);grid-template-columns:1fr;align-items:end}
.ct-direct-mail{margin:0;font-family:var(--font-display);font-weight:800;font-stretch:125%;font-size:clamp(17px,calc(17px + 13 * (100vw - 320px) / 1120),30px);line-height:1.2;overflow-wrap:anywhere}
.ct-direct-mail a{display:inline-block;padding-block:var(--s2)}

/* closing detail */
.ct-close{background:var(--warm);color:var(--ink);padding-block:var(--s9)}
.ct-close-grid{display:grid;gap:var(--s6);grid-template-columns:1fr;align-items:center}
.ct-close-sym{width:96px}
.ct-close h2{font-size:var(--t-h2);line-height:1.1;max-width:20ch}

@media (min-width:700px){
  .ct-hero{padding-block:var(--s8) var(--s9)}
  .ct-steps{gap:var(--s3)}
  .ct-stepi{padding-inline:var(--s5);font-size:var(--t-body)}
  .ct-card{padding-top:var(--s2)}
  .ct-row{grid-template-columns:1fr 1fr}
  .ct-checks{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--s5)}
  .ct-checks legend{grid-column:1 / -1}
  .ct-actions{flex-direction:row;justify-content:space-between;align-items:center}
  .ct-actions .btn{width:auto}
  .ct-actions--step1{justify-content:flex-end}
  .ct-thanks-cta .btn,.ct-done .btn{width:auto}
  .ct-close-sym{width:120px}
}
@media (min-width:900px){
  .ct-direct-grid{grid-template-columns:1fr 1fr}
  .ct-direct-grid>p{justify-self:end;text-align:right}
  .ct-close-grid{grid-template-columns:auto 1fr;gap:var(--s8)}
}
@media (min-width:1100px){.ct-close-sym{width:160px}}