/* ============================================================
   .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 — blue header behind a full-bleed banner (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;
}
.chero.cew-chero-contact .chero__title {
  font-size: clamp(36px, 4.4vw, 54px);
  color: #fff;
  margin: 0 0 14px;
}
.chero.cew-chero-contact .chero__lead {
  color: rgba(255, 255, 255, 0.82);
  font-size: 16px;
  max-width: 560px;
  margin: 0 auto;
}
/* The 2026-09 banner art carries its contact icons on the left third and
   leaves the right open, so the copy sits right of centre on wide screens.
   This MUST stay below the two rules above: it ties with them on
   specificity and only wins by source order — which is also how it beats
   .chero__lead's `margin: 0 auto` in contact.css itself. */
.chero.cew-chero-contact .chero__content > * {
  max-width: 620px;
  margin-left: auto;
  margin-right: 0;
}
@media (max-width: 960px) {
  /* the crop drops the icons here, so the copy returns to the middle */
  .chero.cew-chero-contact .chero__content > * {
    margin-inline: auto;
    max-width: 100%;
  }
}

/* ---- 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;
  }

  /* contact.css: padding:0 0 clamp(30px,8vw,42px) — the banner became a
     normal-flow image above the copy, so the top padding goes. */
  .chero.cew-chero-contact {
    padding: 0 0 clamp(30px, 8vw, 42px);
  }

  /* …and that same rule turns .chero__bg into a flow image. Both stylesheets
     load in the editor canvas, so career's absolutely positioned fill is
     restated at (0,3,0) to survive contact.css's bare (0,1,0) version. */
  .chero.cew-chero-career .chero__bg {
    position: absolute;
    inset: 0;
    height: 100%!important;
    aspect-ratio: auto;
    margin-bottom: 0;
  }
}