/* ============================================================
   .chero — page-header variants
   ------------------------------------------------------------
   career.css and contact.css both declare .chero, .chero__content,
   .chero__title and .chero__lead, with different rules:

     career.css   a rounded photo banner — no background on the
                  section, text left, content capped at 640px
     contact.css  a centred blue header — full-bleed blue, text
                  centred, content uncapped

   Whichever stylesheet loads second wins, and Elementor loads every
   registered widget's CSS in the editor canvas, so the career hero
   was being restyled by contact.css even with no contact widget on
   the page.

   Each widget therefore renders an explicit modifier class, and the
   conflicting properties are re-declared here at (0,2,0) so they
   outrank both source files regardless of load order. Values are
   copied verbatim from the originals — nothing is redesigned.

   The ≤720px blocks mirror the overrides each source file already
   declares, so the modifiers don't freeze the mobile layout.
   ============================================================ */

/* ---- Career — rounded photo banner (career.css) ---------------- */
.chero.cew-chero-career {
  position: static;
  overflow: visible;
  text-align: left;
  background: none;
  padding: clamp(20px, 3vw, 40px) 0 clamp(24px, 3vw, 36px);
}
.chero.cew-chero-career .chero__content {
  position: relative;
  z-index: 2;
  max-width: 640px;
  text-align: left;
}
.chero.cew-chero-career .chero__title {
  font-size: clamp(36px, 4.6vw, 58px);
  margin: 0 0 20px;
  max-width: 16ch;
}
.chero.cew-chero-career .chero__lead {
  color: rgba(255, 255, 255, 0.9);
  font-size: 18px;
  max-width: 520px;
  margin: 0 0 30px;
}

/* ---- Contact — centred blue header (contact.css) --------------- */
.chero.cew-chero-contact {
  position: relative;
  overflow: hidden;
  text-align: center;
  background: var(--cci-blue);
  padding: clamp(64px, 8vw, 96px) 0;
}
.chero.cew-chero-contact .chero__content {
  position: relative;
  z-index: 2;
  max-width: none;
  text-align: center;
}
.chero.cew-chero-contact .chero__title {
  font-size: clamp(36px, 4.4vw, 54px);
  margin: 0 0 14px;
  max-width: none;
}
.chero.cew-chero-contact .chero__lead {
  color: rgba(255, 255, 255, 0.82);
  font-size: 16px;
  max-width: 560px;
  margin: 0 auto;
}

/* ---- Mobile — mirrors each source file's own ≤720px block ------ */
@media (max-width: 720px) {
  .chero.cew-chero-career {
    padding: 16px 0 40px;
  }
  .chero.cew-chero-career .chero__lead {
    font-size: 16px;
  }

  .chero.cew-chero-contact {
    padding: 112px 0;
  }
}