/* Contact page (prefix ct-). Loaded only on pages using the "Contact" template (functions.php). Markup: blocks/contact/render.php.
   Contrast (tools/contrast.py ratio): ink-soft #4E5A54 on white 7.21:1 · green-700 11.63:1 · error #A4262C 7.26:1 (6.85 on ivory)
   · field border #7A847E 3.87:1 (non-text ≥ 3:1). Gold-500 appears only as decorative rules (never as text on light). */

/* ── header (as the practice-area header) ── */
.ct-hero{ padding-top:calc(var(--nav-safe) + 20px) }
.ct-crumbs ol{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; font-size:12.5px; line-height:1.5; color:var(--ink-soft) }
.ct-crumbs li{ display:inline-flex; align-items:center; gap:10px }
.ct-crumbs li + li::before{ content:""; width:5px; height:5px; border-top:1px solid var(--gold-700); border-right:1px solid var(--gold-700);
  transform:rotate(45deg); margin-right:2px }
.ct-crumbs a{ display:inline-flex; align-items:center; min-height:44px; color:var(--ink-soft); text-decoration:underline;
  text-decoration-color:transparent; text-underline-offset:3px; transition:color .2s var(--ease-out), text-decoration-color .2s var(--ease-out) }
.ct-crumbs a:hover{ color:var(--green-700); text-decoration-color:currentColor }
.ct-crumbs [aria-current]{ color:var(--ink); font-weight:600 }

.ct-h1{ font-size:56px; line-height:1; color:var(--ink) }
@media (min-width:640px){ .ct-h1{ font-size:68px } }
@media (min-width:1024px){ .ct-h1{ font-size:80px } }

/* direct contact (as #offices .of-k / .of-line) */
.ct-k{ font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft) }
.ct-line{ display:inline-flex; align-items:center; min-height:44px; padding:4px 0; font-family:'Cormorant Garamond',Georgia,serif; font-weight:600;
  font-size:26px; line-height:1.2; color:var(--green-700); font-variant-numeric:lining-nums; overflow-wrap:anywhere;
  background:linear-gradient(var(--gold-500),var(--gold-500)) 0 calc(100% - 6px)/100% 1px no-repeat; transition:background-size .4s var(--ease-out) }
.ct-line:hover{ background-size:100% 2px }

/* ── form section ── */
.ct-h2{ font-size:38px; line-height:1.06; color:var(--ink) }
@media (min-width:640px){ .ct-h2{ font-size:46px } }
@media (min-width:1024px){ .ct-h2{ font-size:50px } .ct-head{ position:sticky; top:calc(var(--nav-safe) + 24px) } }

.ct-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:26px 24px }
@media (min-width:640px){ .ct-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) } .ct-span{ grid-column:1 / -1 } }

.ct-field{ min-width:0 }
.ct-label{ display:block; font-size:14px; font-weight:600; line-height:1.4; color:var(--ink) }
.ct-opt{ font-weight:500; color:var(--ink-soft) }
.ct-hint{ margin-top:4px; font-size:13.5px; line-height:1.5; color:var(--ink-soft) }

.ct-input{ display:block; width:100%; min-height:48px; margin-top:8px; padding:11px 14px; font-size:16px; line-height:1.5; color:var(--ink);
  background:#fff; border:1px solid #7A847E; border-radius:3px; box-shadow:none;
  transition:border-color .2s var(--ease-out), box-shadow .2s var(--ease-out) }
.ct-input:hover{ border-color:var(--ink-soft) }
.ct-input:focus{ outline:none }
.ct-input:focus-visible, .ct-input:focus{ border-color:var(--green-700); box-shadow:0 0 0 1px var(--green-700), 0 0 0 4px rgba(0,66,37,.16) }
.ct-textarea{ min-height:200px; resize:vertical }
.ct-input[aria-invalid="true"]{ border-color:#A4262C; box-shadow:0 0 0 1px #A4262C }
.ct-input[aria-invalid="true"]:focus{ box-shadow:0 0 0 1px #A4262C, 0 0 0 4px rgba(164,38,44,.16) }

.ct-select{ position:relative }
.ct-select select{ appearance:none; -webkit-appearance:none; padding-right:44px; cursor:pointer; text-overflow:ellipsis }
.ct-caret{ position:absolute; right:16px; top:50%; margin-top:4px; transform:translateY(-50%); color:var(--green-700); pointer-events:none }

.ct-count{ margin-top:6px; font-size:12.5px; color:var(--ink-soft); text-align:right; font-variant-numeric:tabular-nums }
.ct-count.is-over{ color:#A4262C; font-weight:600 }

.ct-err{ margin-top:8px; display:flex; gap:8px; align-items:flex-start; font-size:14px; font-weight:600; line-height:1.45; color:#A4262C }
.ct-err:empty{ display:none }
.ct-err::before{ content:"!"; content:"!" / ""; flex:none; display:grid; place-items:center; width:16px; height:16px; margin-top:2px; border-radius:50%;
  background:#A4262C; color:#fff; font-size:11px; font-weight:700; line-height:1 }

/* checkbox: native input, 22px, whole row ≥ 44px */
.ct-check{ display:flex; align-items:flex-start; gap:14px; min-height:44px; padding:10px 0 }
.ct-check input{ flex:none; width:22px; height:22px; margin:1px 0 0; accent-color:var(--green-700); cursor:pointer }
.ct-check input[aria-invalid="true"]{ outline:2px solid #A4262C; outline-offset:2px }
.ct-check label{ font-size:15px; line-height:1.55; color:var(--ink); cursor:pointer; text-wrap:pretty }
.ct-ack-hint{ margin-top:0; padding-left:36px }
.ct-ack-hint a{ display:inline-flex; align-items:center; min-height:44px; font-weight:600; color:var(--green-700); text-decoration:underline;
  text-decoration-color:var(--gold-500); text-underline-offset:4px }
.ct-ack-hint a:hover{ text-decoration-thickness:2px }
[data-field="ack"] .ct-err{ padding-left:36px }

.ct-actions{ margin-top:34px; padding-top:28px; border-top:1px solid var(--line) }
.ct-submit{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; min-width:200px; padding:14px 30px;
  border-radius:3px; font-size:15px; font-weight:600; letter-spacing:.01em; cursor:pointer }
.ct-submit:focus-visible{ outline:2px solid var(--green-700); outline-offset:3px }
.ct-submit[aria-disabled="true"]{ opacity:.7; cursor:progress }
@media (max-width:639.98px){ .ct-submit{ width:100% } }

/* honeypot: off-screen, not display:none (some bots skip hidden fields) */
.ct-hp{ position:absolute !important; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden }

/* ── status box (success / errors) ── */
.ct-status:focus{ outline:none }
.ct-status:focus-visible .ct-box{ outline:2px solid var(--green-700); outline-offset:3px }
.ct-box{ margin-bottom:32px; padding:22px 24px 22px 22px; border:1px solid var(--line); border-left-width:3px; border-radius:3px; background:var(--ivory) }
.ct-box.is-error{ border-left-color:#A4262C }
.ct-box.is-success{ border-left-color:var(--green-700) }
.ct-box-t{ font-size:16px; font-weight:600; line-height:1.5; color:var(--ink) }
.ct-box.is-success .ct-box-t{ font-family:'Cormorant Garamond',Georgia,serif; font-size:28px; line-height:1.2; color:var(--green-700) }
.ct-box-list{ margin-top:10px }
.ct-box-list li + li{ margin-top:2px }
.ct-box-list a{ display:inline-flex; align-items:center; min-height:32px; font-size:14.5px; font-weight:600; color:#A4262C; text-decoration:underline; text-underline-offset:3px }
.ct-box-more{ margin-top:12px }
.ct-box-more a{ display:inline-flex; align-items:center; min-height:44px; font-size:14px; font-weight:600; color:var(--green-700);
  text-decoration:underline; text-decoration-color:var(--gold-500); text-underline-offset:4px }

@media (prefers-reduced-motion:reduce){ .ct-input, .ct-line{ transition:none } }

/* ── newsletter sign-up (#subscribe): the factual "how your email is used" line (ink-soft on white 7.21:1) ── */
.ct-use{ font-size:14px; line-height:1.6; color:var(--ink-soft); text-wrap:pretty }
.ct-use a{ display:inline-flex; align-items:center; min-height:44px; margin-left:4px; font-weight:600; color:var(--green-700); text-decoration:underline;
  text-decoration-color:var(--gold-500); text-underline-offset:4px }
.ct-use a:hover{ text-decoration-thickness:2px }
