/* ==========================================================================
   CONTACT PAGE — layout specific to this page.
   ========================================================================== */

.hero-contact {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: var(--sp-10);
  padding: var(--sp-8); flex-wrap: wrap; border: 1px solid var(--line); border-radius: var(--r-xl);
}
.hero-contact-shape {
  position: absolute; inset: 0; z-index: 0;
  clip-path: polygon(0 0, 29% 0, 21% 100%, 0 100%);
  background: var(--blue-50);
}
.hero-contact-blob { top: auto; bottom: 10%; left: 6%; width: 110px; height: 110px; z-index: 0; background: var(--blue-100); }
.hero-contact-photo {
  position: relative; z-index: 1; width: 170px; height: 170px; flex-shrink: 0; border-radius: 18px;
  overflow: hidden; transform: rotate(-3deg); border: 3px solid #fff; box-shadow: 0 0 0 3px var(--blue-800);
  background: var(--blue-600);
}
.hero-contact-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-contact-body { position: relative; z-index: 1; min-width: 0; }
.hero-contact h1 { font-size: var(--fs-2xl); line-height: 1.2; font-weight: 800; margin: var(--sp-3) 0 var(--sp-3); max-width: 500px; }
.hero-contact p { font-size: var(--fs-base); color: var(--muted); max-width: 480px; margin: 0 0 var(--sp-4); }
.hero-contact-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
@media (max-width: 640px) { .hero-contact-shape { display: none; } }

/* ---------- Stats — alternating solid-blue-800 / blue-50 tint cards,
   staggered vertically instead of a perfectly even row. ---------- */
.contact-stats { align-items: start; }
.contact-stats .stat-tile {
  transition: transform var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease);
}
.contact-stats .stat-tile:nth-child(odd) { background: var(--blue-800); margin-top: var(--sp-5); }
.contact-stats .stat-tile:nth-child(odd) .num { color: #fff; }
.contact-stats .stat-tile:nth-child(odd) .label { color: var(--blue-100); }
.contact-stats .stat-tile:nth-child(odd) .stat-icon { background: rgba(255, 255, 255, 0.15); color: #fff; }
.contact-stats .stat-tile:nth-child(even) { background: var(--blue-50); }
.contact-stats .stat-tile:nth-child(even) .num { color: var(--blue-800); }
.contact-stats .stat-tile:nth-child(even) .label { color: var(--blue-600); }
.contact-stats .stat-tile:nth-child(even) .stat-icon { background: #fff; color: var(--blue-800); }
.contact-stats .stat-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
@media (max-width: 700px) { .contact-stats .stat-tile:nth-child(odd) { margin-top: 0; } }

.logo-strip-label { font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: var(--sp-3); }
.logo-row { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.logo-chip {
  display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 16px;
  font-size: var(--fs-sm); font-weight: 600; color: var(--muted); filter: grayscale(1); opacity: 0.6;
  transition: opacity var(--dur-fast) var(--ease), filter var(--dur-fast) var(--ease);
}
.logo-chip:hover { filter: grayscale(0); opacity: 1; }
.logo-chip .dot { width: 8px; height: 8px; border-radius: 50%; }

.audience-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.audience-btn {
  font-size: var(--fs-sm); padding: 9px 18px; border-radius: var(--r-full); border: 1px solid var(--line);
  color: var(--ink); cursor: pointer; background: #fff; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.audience-btn:hover { border-color: var(--navy); color: var(--navy); }
.audience-btn.active { background: var(--navy); color: #fff; border-color: var(--navy); font-weight: 600; }
.audience-hint { font-size: var(--fs-sm); color: var(--muted); min-height: 18px; }
.audience-hint strong { color: var(--navy); }

/* ---------- Ways to work together — 3-column grid, colored icon tile
   per card, CTA text pinned to the bottom via flex so all three cards
   line up evenly regardless of description length. ---------- */
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
@media (max-width: 900px) { .cat-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .cat-grid { grid-template-columns: 1fr; } }

.cat-card {
  display: flex; flex-direction: column; text-align: left; width: 100%;
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-5);
  background: #fff; cursor: pointer; font: inherit; color: inherit;
  transition: transform var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease);
}
.cat-card:hover { box-shadow: var(--shadow-md); border-color: var(--blue-400); transform: translateY(-3px) scale(1.012); }
.cat-icon { width: 38px; height: 38px; border-radius: var(--r-md); flex-shrink: 0; display: flex; align-items: center; justify-content: center; margin-bottom: var(--sp-3); }
.cat-icon-blue { background: var(--blue-800); }
/* "Coral" is a legacy class name — no coral/warm color exists in the kit,
   so this now uses Secondary (blue-400 = kit Secondary) to keep 3 visually
   distinct icons using only the 3 official kit colors (Primary/Secondary/
   Accent), rather than duplicating the Accent used by cat-icon-teal. */
.cat-icon-coral { background: var(--blue-400); }
.cat-icon-teal { background: var(--teal-600); }
.cat-title { font-size: var(--fs-md); font-weight: 700; margin: 0 0 6px; }
.cat-desc { font-size: var(--fs-sm); color: var(--muted); margin: 0; line-height: 1.55; flex: 1; }
.cat-cta { display: inline-block; font-size: var(--fs-sm); font-weight: 600; margin-top: var(--sp-4); }
.cat-cta-blue { color: var(--blue-800); }
.cat-cta-coral { color: var(--blue-400); }
.cat-cta-teal { color: var(--teal-600); }

/* ---------- Contact form ---------- */
.contact-form-card { border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-6); box-shadow: var(--shadow-sm); }
.contact-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-4); }
@media (max-width: 560px) { .contact-form-grid { grid-template-columns: 1fr; } }

/* ---------- Contact sidebar ---------- */
.contact-sidebar {
  display: flex;
  flex-direction: column;
  align-self: start;
  gap: var(--sp-4);
  min-width: 0;
  margin: 0;
  padding: 0;
}
.contact-sidebar .side-card { margin-bottom: 0; }
.side-social { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); }
.side-social a { width: 32px; height: 32px; border-radius: 50%; background: var(--surface); display: flex; align-items: center; justify-content: center; color: var(--navy); transition: background var(--dur-fast) var(--ease); }
.side-social a:hover { background: var(--line); }
.side-social a.social-link-disabled,
.side-social a.social-link-disabled:hover {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--surface);
}

.contact-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--sp-8); align-items: start; }
@media (max-width: 780px) {
  .contact-layout { grid-template-columns: minmax(0, 1fr); }
  .contact-sidebar { width: 100%; }
}