/* ==========================================================================
   Sopra Health Comms — v6 revisions layer
   Loads AFTER css/styles.css. Implements the team's design feedback:
   smaller hero imagery, more prominent primary CTAs, and stronger visual
   hierarchy on the diagnostic (persona/situation) cards.
   Keep this file separate so styles.css stays untouched; fold into the
   main stylesheet at the next full build if preferred.
   ========================================================================== */

/* ---------- 1. Hero: reduce image dominance ----------
   Feedback: the hero image pushes key messaging and navigation down the
   page. Cap its rendered height and let it crop, on every page hero. */
.hero .photo img{
  width:100%;
  height:auto;
  max-height:380px;
  object-fit:cover;
}
.hero .photo{margin-bottom:0}
.hero{padding-top:4rem;padding-bottom:3.4rem}
@media (max-width:640px){
  .hero .photo img{max-height:240px}
}

/* ---------- 2. Primary CTAs: increase prominence ----------
   Feedback: 'Talk to us' and the secondary CTA visually compete with the
   hero copy. Larger targets, clearer weight. */
.hero-ctas .btn{
  font-size:1.06rem;
  padding:.85rem 1.7rem;
}
.hero-ctas{gap:1rem}
.cta-actions{display:flex;gap:.8rem;flex-wrap:wrap;align-items:center}

/* ---------- 3. Diagnostic cards: stronger scanning hierarchy ----------
   Feedback: the Likely trigger / Common failure mode / Our focus /
   Example starting point structure reads deck-like; visitors scan.
   Clearer labels, tighter chunks, breathing room between rows. */
.card.diag dl{margin:0}
.card.diag dl > div{margin-bottom:1rem}
.card.diag dl > div:last-child{margin-bottom:0}
.card.diag dt{
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--muted, #54657A);
  margin-bottom:.2rem;
}
.card.diag dd{margin:0}