/* ==========================================================================
   Contact — PAGE LAYER (contact.php). .ct-* only, over brand/hub.css (.bdh-*).
   Section styles live in assets/css/contact/<id>.css. Tokens from core.css :root
   only; no new colours; no gradients except core .dots and mask fades; no !important.

   The page's idiom is the DOCUMENT: a brief is paper. Mono meta bars across the top
   of a sheet, hairline rules between answers, a sheet or two stacked behind the one
   in use. The hero specimen, the live brief beside the form and the copy on the
   success page are all the same sheet.
   ========================================================================== */

.ct{--ct-gap:clamp(18px,2vw,28px);--ct-sheet:var(--paper)}
.ct :focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.ct .svc-ico{display:block;flex:none;width:20px;height:20px}
.ct .svc-ico .a{stroke:var(--blue)}
.ct .svc-ico .af{fill:var(--blue);stroke:none}
.ct [hidden]{display:none}

/* the top bar of a hero: eyebrow left, a status right, a rule under both */
.ct-hero__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding-bottom:20px;border-bottom:1px solid var(--ink)}
.ct-hero__sla{display:inline-flex;align-items:center;gap:10px;font-family:var(--f);font-size:var(--t-lbl);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ct-live{position:relative;width:8px;height:8px;border-radius:50%;background:var(--blue);flex:none}
.ct-live::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--blue-line);opacity:0}
.is-live .ct-live::after{animation:ctPing 2.4s var(--e) infinite}
@keyframes ctPing{0%{transform:scale(.6);opacity:.9}80%,100%{transform:scale(1.8);opacity:0}}

/* a link inside running text: underlined, with a 44px hit area that does not move the line */
.ct-inl{color:var(--ink);font-weight:500;text-decoration:underline;text-decoration-color:var(--line-3);text-underline-offset:3px;padding-block:14px;margin-block:-14px}
.ct-inl:hover{color:var(--blue-d);text-decoration-color:var(--blue)}

/* a sheet of paper: meta bar, hairline rows */
.ct-sheet{position:relative;background:var(--ct-sheet);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1)}
.ct-meta{display:flex;justify-content:space-between;gap:12px;font-family:var(--f);font-size:var(--t-lbl);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* phones: every small button is still a 44px target */
@media (max-width:680px){
  .ct .btn--sm{height:44px}
}

@media (prefers-reduced-motion:reduce){
  .is-live .ct-live::after{animation:none}
}