/* ============================================================
   MCE JOB POSTING — careers page + individual job pages.
   Self-contained on the shared tokens, the way mcf-child's article.css
   is: does not touch main.css or its BESS-Advisory-specific component
   classes, so this cannot regress that page. Requires tokens.css.
   ============================================================ */
#mceJob,#mceJob *,#mceJob *::before,#mceJob *::after{box-sizing:border-box}
/* Reading width: the default lives in the var() FALLBACK, never as a
   --job-measure declaration on this container. A custom property set on the
   element itself outranks the :root value the panel writes, which would make
   the panel's Reading width control look dead. Posting reads narrower than
   the index on purpose, so each keeps its own fallback. */
#mceJob{font-family:var(--font,"Roboto Flex",system-ui,sans-serif);
  color:var(--body);line-height:1.6}
#mceJob .jmeasure{max-width:var(--job-measure,760px);margin:0 auto;padding:0 24px}

/* ── header band: eyebrow, title, meta row ── */
/* Header band colour is a Global token, --job-hdr-bg — default #12356b,
   Alicia's colour, set 2026-09-13 as the standard for every job posting.
   Declared on :root so the panel's swatch reads the real default (a
   fallback-only token reports blank to getComputedStyle and the swatch shows
   the wrong colour). The saved Global prints later, in wp_head at 99, so her
   panel value still wins. */
:root{--job-hdr-bg:#12356b}
#mceJob .jhead{background:var(--job-hdr-bg);color:#fff;padding:56px 0 40px}
#mceJob .jeyebrow{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-bright,#D9A63C);margin:0 0 16px}
/* Own colour token, for the same reason as the careers title: the two pages
   share the "title" role, so a role colour cannot differ between them — and a
   role rule carries !important, which would outrank a per-page token. */
#mceJob .jhead h1{font-size:var(--fs-h1,44px);font-weight:700;color:var(--job-h1-col,#fff);
  line-height:1.15;margin:0 0 20px;letter-spacing:-.01em}
#mceJob .jmeta{display:flex;flex-wrap:wrap;gap:10px 28px;font-size:14.5px;color:rgba(255,255,255,.82)}
#mceJob .jmeta span{display:flex;align-items:center;gap:7px}
#mceJob .jmeta b{color:#fff;font-weight:600}

/* ── body: her text, verbatim, styled to read like a real document ── */
#mceJob .jbody{padding:48px 0 8px}
#mceJob .jbody h2{font-size:22px;color:var(--c-h2,var(--navy));font-weight:700;
  margin:2em 0 .6em;line-height:1.3}
#mceJob .jbody h2:first-child{margin-top:0}
#mceJob .jbody p{margin:0 0 1.1em;font-size:16.5px;line-height:1.65}
#mceJob .jbody ul{margin:0 0 1.4em;padding-left:1.3em}
#mceJob .jbody li{margin-bottom:.65em;font-size:16.5px;line-height:1.55}
#mceJob .jbody li::marker{color:var(--gold);font-weight:700}
#mceJob .jbody strong{color:var(--c-h3,var(--navy))}
#mceJob .jeeo{margin:2.4em 0 0;padding:20px 22px;background:var(--bar);border-left:4px solid var(--gold);
  border-radius:0 6px 6px 0;font-size:14.5px;color:var(--body);font-style:italic}

/* ── apply CTA ── */
#mceJob .japply{margin:44px 0 0;padding:30px 32px;background:var(--bar);border-radius:8px;text-align:center}
#mceJob .japply p.h{font-size:19px;font-weight:700;color:var(--page-h1);margin:0 0 8px}
#mceJob .japply p{margin:0 0 18px;font-size:15px;color:var(--body)}
#mceJob .japply .btn{display:inline-block;font-weight:500;font-size:15px;padding:13px 30px;
  border-radius:8px;background:var(--btn);color:var(--btn-txt);border:1px solid var(--btn);
  transition:all .15s;cursor:pointer;text-decoration:none}
#mceJob .japply .btn:hover{background:var(--btn-hov-bg);color:var(--btn-hov-txt);border-color:var(--btn-hov-bd)}
#mceJob .japply .sub{margin-top:14px;font-size:13px;color:#5a6478}

/* ── back-to-all-openings link ── */
#mceJob .jback{padding:28px 0 56px}
#mceJob .jback a{font-size:14.5px;color:var(--link);text-decoration:none;font-weight:500}
#mceJob .jback a:hover{color:var(--link-hover);text-decoration:underline}

@media(max-width:640px){
  #mceJob .jhead{padding:40px 0 28px}
  #mceJob .jbody{padding:36px 0 8px}
  #mceJob .japply{padding:26px 20px}
}

/* ============================================================
   CAREERS INDEX — the existing /contact/career/ page.
   ============================================================ */
#mceCareers,#mceCareers *,#mceCareers *::before,#mceCareers *::after{box-sizing:border-box}
#mceCareers{font-family:var(--font,"Roboto Flex",system-ui,sans-serif);color:var(--body);line-height:1.6}
#mceCareers .jmeasure{max-width:var(--job-measure,920px);margin:0 auto;padding:0 24px}
/* Restored: the page's own original header photo (a team-of-engineers shot),
   which the flat navy replaced when the Elementor page was swapped for this
   template. Same scrim treatment the rest of the site uses on a photo hero
   (main.css .vhero .vmedia::after) so white text stays legible over it. */
/* The standard MCE image slot: .imgbox/.imgsc/.imgtx, the exact mechanism
   BESS Advisory's hero images use, so the shade colour and strength are the
   panel's existing Overlay controls, not a value baked into this file. */
/* Flex column so the text block CENTRES vertically when the header is taller
   than its content — as a plain block it stayed pinned to the top and left a
   gap underneath once a height was set. This also makes the Element pane's
   "Align contents" control meaningful here: justify-content now moves the
   text box up/down, align-items moves it left/right. */
#mceCareers .chead{position:relative;overflow:hidden;color:#fff;padding:64px 0 48px;text-align:center;
  display:flex;flex-direction:column;justify-content:var(--chead-valign,center)}
#mceCareers .chead .imgbox{position:absolute;inset:0;overflow:hidden}
#mceCareers .chead .imgbox img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;margin:0;display:block}
/* Default shade until she sets her own: no !important, so ANY panel Overlay
   value — including turning it off — wins the moment she saves one. */
#mceCareers .chead .imgsc{position:absolute;inset:0;background:rgba(20,26,52,.35)}
#mceCareers .chead .imgtx{position:absolute;left:0;right:0;bottom:0;padding:26px 30px;color:#fff}
#mceCareers .chead .jmeasure{position:relative;z-index:1}
#mceCareers .chead .jeyebrow{color:var(--gold-bright,#D9A63C);justify-content:center;text-align:center}
/* The careers header title has its OWN token, not the shared --fs-h1.
   Careers and the job postings are one template family, so they share one
   Global bucket — the only way to give this title a different size used to be
   an element pin, and an element pin carries !important, which silently kills
   the Global and Roles controls for that element. A separate token keeps it
   a real control she can keep turning. Falls back to --fs-h1 when unset. */
/* Literal fallback, NOT var(--fs-h1): falling back to the job posting's token
   would mean this page reads two different H1 controls, which is the duplicate
   H1 confusion again. This page has exactly one H1 control. */
#mceCareers .chead h1{font-size:var(--careers-h1,44px);font-weight:700;
  color:var(--careers-h1-col,#fff);
  margin:0 0 16px;letter-spacing:-.01em}
#mceCareers .chead p{font-size:var(--careers-dek,17px);color:var(--careers-dek-col,rgba(255,255,255,.85));max-width:640px;margin:0 auto}
#mceCareers .clist{padding:48px 0 64px;display:grid;gap:16px}
#mceCareers .ccard{display:flex;justify-content:space-between;align-items:center;gap:20px;
  border:1px solid var(--line);border-radius:8px;padding:22px 26px;transition:.15s;background:#fff}
#mceCareers .ccard:hover{border-color:var(--btn);box-shadow:0 6px 18px rgba(28,36,75,.08)}
#mceCareers .ccard h3{font-size:var(--fs-h3,18px);font-weight:700;color:var(--c-h3,var(--navy));margin:0 0 6px}
#mceCareers .ccard .cmeta{font-size:13.5px;color:#5a6478}
#mceCareers .ccard .cgo{flex:none;font-size:14px;font-weight:600;color:var(--link);white-space:nowrap}
#mceCareers .cnote{padding:0 0 56px;font-size:14.5px;color:var(--body)}
#mceCareers .cnote a{color:var(--link)}
@media(max-width:640px){
  #mceCareers .ccard{flex-direction:column;align-items:flex-start}
}