/* Contact page. A port of 06 Contact.dc.html: its inline styles as classes, its <helmet> media rules as written.
   Breakpoints: phone <= 640px. Shared tokens and components (.wrap, .btn) live in site.css. */

.ct-sec{position:relative;border-top:1px solid #e3ecf4;padding-block:clamp(64px,8vw,112px)}
.ct-h1{margin:0;max-width:820px;font:440 var(--text-display)/1.15 var(--font);letter-spacing:-.02em;color:#0b2239;text-wrap:pretty}
.ct-h1 span{color:#647489}
.ct-row{display:flex;flex-wrap:wrap;gap:40px 88px;margin-top:clamp(40px,5vw,56px);padding-top:clamp(32px,4vw,48px);border-top:1px solid #e3ecf4}

.ct-intro{flex:1 1 300px;display:flex;flex-direction:column;gap:16px}
.ct-h2{margin:0;font:500 var(--text-lg)/1.3 var(--font);color:#0b2239}
.ct-intro p{margin:0;font:440 var(--text-base)/1.6 var(--font);color:#4d5f75}
.ct-h2 + p{text-wrap:pretty}

.ct-form{flex:1.25 1 400px;min-width:0;display:flex;flex-direction:column;gap:20px}
.ct-field{display:flex;flex-direction:column;gap:8px}
.ct-label{font:500 var(--text-sm)/1.4 var(--font);color:#0b2239}
.ct-req{color:#c2334a}
.ct-form textarea,.ct-form input{margin:0;border:1px solid #dde6ef;border-radius:4px;background:#fff;color:#0b2239;outline:none}
.ct-form textarea{resize:vertical;min-height:132px;padding:12px 14px;font:440 var(--text-base)/1.5 var(--font)}
.ct-form input{height:44px;padding:0 14px;font:440 var(--text-base)/1 var(--font)}
.ct-form textarea::placeholder,.ct-form input::placeholder{color:#8a98aa}
/* Signed in, the email field gives way to one line naming the account's address (contact.js). */
.ct-form [hidden]{display:none}
.ct-acct{margin:0;font:440 var(--text-base)/1.5 var(--font);color:#4d5f75;overflow-wrap:anywhere}
/* Focus: the design's blue border, plus a 1px ring so keyboard focus reads clearly (as on the blog search). */
.ct-form textarea:focus,.ct-form input:focus{border-color:#0872b0;box-shadow:0 0 0 1px #0872b0}

/* Status and error messages are live regions that stay in the page and are empty while idle.
   Spacing comes from margins on a non-empty message, so an empty one takes no room. */
.ct-actions{display:flex;justify-content:flex-end;align-items:center;flex-wrap:wrap;row-gap:16px}
.ct-msg{font:500 var(--text-sm)/1.4 var(--font)}
.ct-msg:not(:empty){margin-right:16px}
.ct-sent{color:#1a7f4b}
.ct-err{color:#c2334a}

/* Keyboard focus */
.ct-sec a:focus-visible,.ct-sec button:focus-visible{outline:2px solid #0872b0;outline-offset:2px}

@media (max-width:640px){
.ct-sec{padding-block:40px 64px}
.ct-h1{font-size:var(--text-xl);line-height:1.2}
.ct-row{margin-top:28px;padding-top:28px;gap:32px}
.ct-h2{font-size:var(--text-lg)}
.ct-form{flex-basis:100%}
/* Send is full width with the message centred below it (the prototype's column-reverse). */
.ct-actions{flex-direction:column-reverse;align-items:stretch;row-gap:0}
.ct-actions > .btn{width:100%}
.ct-msg{text-align:center}
.ct-msg:not(:empty){margin:12px 0 0}
/* 16px or iOS zooms the page on focus */
.ct-form textarea,.ct-form input{font-size:var(--text-base)}
}

@media (max-width:1023px){.ct-h1{font-size:var(--text-xl)}}