/* =============================================================================
   Contact page — the two-path section (write a message | book a call).
   Replaces the old .contact-book layout. The hero is the shared .page-hero
   (css/page-hero.css). Form JS hooks (#cf-form, field names, Turnstile) are
   unchanged — this file only restyles. Booking uses the Cal.com popup embed.
   ============================================================================= */
.contact-paths{background:var(--ink-900); padding:56px 0 96px}
.contact-paths__grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:22px; align-items:stretch;
}
.cpath{
  display:flex; flex-direction:column;
  background:var(--canvas); color:var(--text-body);
  border:1px solid var(--border); border-radius:20px;
  box-shadow:0 26px 60px -34px rgba(4,12,28,.85);
  padding:32px 32px 30px;
}
.cpath .eyebrow{color:var(--green-ink); margin:0 0 8px}
.cpath h2{
  font-family:var(--font-display); font-weight:700; letter-spacing:-.01em;
  font-size:25px; line-height:1.16; color:var(--text-strong); margin:0;
}
.cpath__lede{margin:10px 0 22px; font-size:14.5px; line-height:1.6; color:var(--text-muted); max-width:44ch}

/* ---- form ---- */
.cf-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.cf-row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.cf-field{display:flex; flex-direction:column; gap:6px; margin-bottom:14px}
.cf-field label{font-size:12.5px; font-weight:600; color:var(--text-strong)}
.cf-req{color:var(--green-ink)}
.cf-opt{color:var(--text-muted); font-weight:500}
.cf-field input, .cf-field select, .cf-field textarea{
  width:100%; font-family:var(--font-body); font-size:15px; color:var(--text-strong);
  background:var(--canvas-soft); border:1px solid var(--border); border-radius:12px;
  padding:12px 14px; transition:border-color .15s, box-shadow .15s, background .15s;
}
.cf-field textarea{resize:vertical; min-height:112px}
/* inline errors (2026-09-26) — --danger on white is 4.8:1 */
.cf-err{margin:2px 0 0; font-size:13px; line-height:1.4; color:var(--danger); font-weight:600}
.cf-consent{flex-wrap:wrap}
.cf-consent .cf-err{flex-basis:100%; padding-left:26px}
.cf-field [aria-invalid="true"]{border-color:var(--danger); box-shadow:0 0 0 3px rgba(220,38,38,.14)}
.cf-field input:focus, .cf-field select:focus, .cf-field textarea:focus{
  outline:none; border-color:var(--green);
  box-shadow:0 0 0 4px var(--focus-ring); background:#fff;
}
.cf-consent{display:flex; gap:10px; align-items:flex-start; margin:4px 0 18px;
  font-size:12.5px; line-height:1.5; color:var(--text-muted)}
.cf-consent input{margin-top:2px; width:16px; height:16px; flex:none; accent-color:var(--green)}
.cf-consent a{color:var(--green-ink)}
.cf-turnstile{margin:0 0 16px}
#cf-submit{width:100%; min-height:50px; margin-top:auto}
.cf-status{margin:12px 0 0; font-size:13.5px; line-height:1.5; min-height:1.2em}
.cf-status--error{color:var(--danger)}
.cf-status--success{color:var(--green-ink)}

/* ---- booking card (dark) ---- */
.cpath--book{
  background:linear-gradient(180deg,#0E1E44 0%, var(--ink-900) 100%);
  color:#fff; border-color:rgba(255,255,255,.10);
}
.cpath--book .eyebrow{color:var(--accent)}
.cpath--book h2{color:#fff}
.cpath--book .cpath__lede{color:var(--on-ink-muted, #9FB0C9)}
.book-host{display:flex; align-items:center; gap:12px; margin:2px 0 20px}
.book-host__av{
  width:46px; height:46px; border-radius:50%; flex:none;
  background:linear-gradient(120deg,#15265C 0%,#178A63 46%,#2EE09A 100%);
  display:grid; place-items:center; color:#04101f; font-family:var(--font-display);
  font-weight:700; font-size:16px;
}
.book-host__meta b{display:block; font-family:var(--font-display); font-size:14.5px; color:#fff}
.book-host__meta span{font-family:var(--font-mono); font-size:12px; letter-spacing:.03em; color:var(--mint)}
.book-reassure{list-style:none; padding:0; margin:0 0 24px; display:flex; flex-direction:column; gap:12px}
.book-reassure li{display:flex; gap:11px; align-items:flex-start; font-size:14px; line-height:1.45; color:#D7E0F0}
.book-reassure .tick{
  flex:none; width:20px; height:20px; border-radius:50%; margin-top:1px;
  background:rgba(46,224,154,.16); color:var(--accent);
  display:grid; place-items:center; font-size:12px;
}
.book-cta{margin-top:auto}
#book-call{width:100%; min-height:50px}
.book-fine{margin:12px 0 0; text-align:center; font-size:12px; color:var(--on-ink-muted, #9FB0C9)}

/* ---- direct-email fallback ---- */
.contact-direct{
  border-top:1px solid rgba(255,255,255,.08); margin-top:26px; padding-top:24px;
  text-align:center; font-size:14px; color:var(--on-ink-muted, #9FB0C9);
}
.contact-direct a{color:var(--accent); font-weight:600; text-decoration:none}
.contact-direct a:hover{text-decoration:underline}

@media (max-width:820px){
  /* minmax(0,1fr): let the column shrink below its content (the 300px Turnstile
     widget pushed the form 42px off a 320px screen). 2026-09-25 */
  .contact-paths__grid{grid-template-columns:minmax(0,1fr); gap:16px}
  .cf-row{grid-template-columns:1fr}
  .cpath{padding:26px 22px 24px}
}
/* Inline link inside the booking card's fine print — default link blue was
   near-invisible on the navy card (1.9:1). 2026-09-23 QA. */
.book-fine a{color:var(--accent); text-decoration:underline; text-underline-offset:3px}
.book-fine a:hover{color:var(--mint)}