/* ============================================================
   Diligent - /contact/ page (redesign frame).
   Loads ON TOP of styles.css + service-v3.css + service-audit.css
   (the contact form REUSES the audit form classes: .form-band,
   .form-grid, .form-rail, .audit-form-card, .af-field, .af-input,
   .af-select, .af-success). Only the bits unique to /contact/ live
   here, namespaced .ct-*. Tokens only - no new colors.
   ============================================================ */

/* ---- hero ---- */
.ct-hero { padding: 76px 0 34px; }
/* tighten the gap between the hero copy and the floating form panel */
#contact-form.form-band { padding-top: 34px; }
.ct-hero h1 { font-size: clamp(2.1rem, 4vw, 3rem); letter-spacing: -.03em; max-width: 18ch; }
.ct-hero h1 .hl { color: var(--coral-deep); }
.ct-hero .lead { font-size: 1.15rem; color: var(--muted); margin-top: 18px; line-height: 1.62; max-width: 56ch; }

/* ---- form band: float the dark form as a contained panel ----
   The shared .form-band is var(--ink) and the footer is var(--ink-2) - two
   near-identical navies stacked edge to edge, so they read as one dark block.
   On /contact/ we drop the band to the light page surface and sit the dark
   form inside a rounded panel, so it is clearly bounded and a light strip
   separates it from the dark footer below. */
#contact-form.form-band { background: var(--bone-2); color: var(--ink); }
#contact-form.form-band::before { display: none; }
.ct-panel { position: relative; overflow: hidden; background: var(--ink); color: var(--on-dark);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: 52px clamp(26px, 5vw, 56px) 56px; }
.ct-panel::before { content:""; position:absolute; top:-26%; right:-8%; width:520px; height:520px;
  border-radius:50%; background: radial-gradient(circle, rgba(236,106,76,.26), transparent 65%); pointer-events:none; }

/* ---- direct channels (live in the dark .form-rail) ---- */
.ct-channels { display: flex; flex-direction: column; gap: 16px; margin-top: 28px; }
.ct-channel { display: flex; align-items: flex-start; gap: 13px; }
.ct-channel .ci { width: 40px; height: 40px; border-radius: 11px; background: rgba(244,162,60,.16);
  border: 1px solid rgba(244,162,60,.34); display: grid; place-items: center; flex-shrink: 0;
  color: var(--amber); font-size: 17px; }
/* checkmark tiles in the reassurance list (scoped to /contact/ so the audit form is unchanged) */
#contact-form .fr-list li .frk { background: rgba(244,162,60,.16); border-color: rgba(244,162,60,.34); color: var(--amber); }
.ct-channel .cmeta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ct-channel .cl { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-mut); }
.ct-channel .cv, .ct-channel a { color: var(--on-dark); font-weight: 600; text-decoration: none; font-size: 1rem; line-height: 1.3; }
.ct-channel a:hover { color: var(--amber); }

/* ---- single audit cross-link (the one /audit/ content CTA) ---- */
.ct-audit-note { margin-top: 30px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1);
  font-size: .98rem; color: var(--on-dark-mut); line-height: 1.55; }
.ct-audit-note a { color: var(--on-dark); font-weight: 600; }
.ct-audit-note a:hover { color: var(--amber); }

/* ---- the contact form is a single panel (no stepper) ---- */
.ct-form .af-panel-head { margin-bottom: 22px; }
textarea.af-input { min-height: 134px; resize: vertical; line-height: 1.55; padding-top: 12px; font-family: var(--body); }

@media (max-width: 860px) {
  .ct-hero h1 { max-width: none; }
}