/* /contact (Oct 18): a mist header with two CTAs, then four inbox rows. Brand tokens only.
   Cabinet Grotesk + Manrope come from hai-brand.css. */
.ct {
  --gold: #FFC61E; --gold-3: #FFE8A5; --violet: #341D99; --ink: #110A33; --mist: #F6F4FF; --slate: #5B6478;
  --line: rgba(17,10,51,.12); --disp: "Cabinet Grotesk", Cabinetgrotesk, Arial, sans-serif;
  --body: Manrope, "Manrope Fallback", Arial, sans-serif; --shell: 960px; --gutter: clamp(16px, 4vw, 48px);
  margin: 0; overflow-x: clip; background: #fff; color: var(--ink); font-family: var(--body);
}
html { overflow-x: clip; }
.ct *, .ct *::before, .ct *::after { box-sizing: border-box; }
.ct :where(h1, p) { margin: 0; }
.ct-shell { max-width: var(--shell); margin: 0 auto; padding: 0 var(--gutter); }
.ct main a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 8px; }

.ct-hero { padding: clamp(112px, 12vw, 144px) 0 clamp(32px, 4vw, 48px); background: var(--mist); text-align: center; }
.ct .ct-hero h1 { font: 700 clamp(32px, 5vw, 56px)/1.08 var(--disp); letter-spacing: -.04em; text-wrap: balance; }
.ct-lede { max-width: 52ch; margin: 16px auto 0; font-size: clamp(17px, 1rem + .3vw, 19px); line-height: 1.6; color: var(--slate); text-wrap: pretty; }
.ct-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
.ct-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; border-radius: 999px; font: 800 16px/1 var(--body); text-decoration: none; color: var(--ink); transition: background-color .2s, transform .15s; }
.ct-btn--gold { background: var(--gold); }
.ct-btn--gold:hover { background: var(--gold-3); }
.ct-btn--line { border: 1.5px solid var(--ink); background: #fff; }
.ct-btn--line:hover { background: var(--gold-3); border-color: var(--gold-3); }
.ct-btn:active { transform: scale(.97); }

.ct-list { padding-top: clamp(32px, 4vw, 48px); padding-bottom: clamp(48px, 6vw, 96px); }
.ct-row { display: flex; align-items: center; justify-content: space-between; gap: 8px 32px; padding: 24px 16px; border-top: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: background-color .2s; border-radius: 0; }
.ct-row:last-child { border-bottom: 1px solid var(--line); }
.ct-row:hover { background: var(--mist); }
.ct-row__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ct-row__title { font: 700 clamp(19px, 2vw, 22px)/1.25 var(--disp); letter-spacing: -.01em; }
.ct-row__sub { font-size: 15px; line-height: 1.5; color: var(--slate); text-wrap: pretty; }
.ct-row__mail { flex: none; font: 700 16px/1.3 var(--body); color: var(--violet); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; }

@media (max-width: 640px) {
  .ct-row { flex-direction: column; align-items: flex-start; padding: 20px 8px; }
  .ct-btn { width: 100%; }
}