/* ============================================================
   careercalling - LIGHT-FIRST FIX SKIN  (generated by make_light.py, loaded LAST)
   caqa-data precedent (lightfirst.css + redesign S3) parameterized by the
   site accent #01216E (ink-safe text accent #01216E). Re-skins the dark content
   shells to the canonical light-first brand: white/ivory pages, dark ink
   headings, accent details. Chassis (cqbar/cq3, mega-menu, search, ticker,
   footers, foot-dome, policies, awards pages) untouched. Content verbatim -
   this file only changes appearance. PRM-safe.
   ============================================================ */

:root{
  --lfx-ink:#0E273B;          /* dark ink headings (>=7:1 on white) */
  --lfx-body:#39434E;         /* body */
  --lfx-muted:#5A6570;        /* muted-but-dark */
  --lfx-paper:#FFFFFF;
  --lfx-ivory:#F6F8FB;        /* alternating section tint */
  --lfx-line:#E4E7EC;         /* 1px borders */
  --lfx-ac:#01216E;              /* brand accent (details/CTA fill) */
  --lfx-ac2:#3A5CB4;            /* gradient end */
  --lfx-ac-ink:#01216E;         /* accent-as-text on white (>=4.5:1) */
  --lfx-shadow:0 12px 30px rgba(14,39,59,.08);
  --lfx-shadow-lg:0 24px 60px rgba(16,24,40,.14);
  --lfx-radius:22px;
}

/* ---------- 1. HERO ( .mast ) -> WHITE HERO ---------- */
.mast{
  background:
    radial-gradient(760px 380px at 90% 6%,rgba(1,33,110,.06),transparent 60%),
    linear-gradient(180deg,#FFFFFF 0%,#F6F8FB 100%)!important;
  color:var(--lfx-body)!important;
}
.mast::before,
.mast::after{display:none!important}   /* kill dark grid + dark scrims */
.mast .container{position:relative;z-index:2}
.mast h1,
.mast h2,
.mast h3{color:var(--lfx-ink)!important}
.mast .lead{color:var(--lfx-muted)!important}
.mast .eyebrow{color:var(--lfx-ac-ink)!important}
.mast .eyebrow::before{background:var(--lfx-ac)!important}
/* gradient headline word -> accent gradient on the light hero */
.mast h1 .gx{
  background:linear-gradient(110deg,#01216E,#3A5CB4)!important;
  -webkit-background-clip:text!important;background-clip:text!important;
  color:transparent!important;
}
/* audience pills: light chips, dark text, accent hover */
.mast .aud span{
  color:#3A4652!important;border-color:var(--lfx-line)!important;background:#fff!important;
}
.mast .aud span:hover{
  color:var(--lfx-ac-ink)!important;border-color:var(--lfx-ac)!important;
}
/* the outline button was white-on-dark (often inline) -> dark ink on white */
.mast .btn-line,
.mast .hero-cta .btn-line{
  color:var(--lfx-ink)!important;border-color:var(--lfx-ink)!important;background:transparent!important;
}
.mast .btn-line:hover,
.mast .hero-cta .btn-line:hover{background:var(--lfx-ink)!important;color:#fff!important}
/* filled CTA -> brand accent fill */
.mast .btn-gold,
.awh .btn-gold{background:linear-gradient(100deg,#01216E,#3A5CB4)!important;color:#fff!important}
.mast .btn-gold:hover{box-shadow:0 14px 30px rgba(1,33,110,.35)!important}
/* generic inline white text inside the hero -> ink */
.mast [style*="color:#fff"],.mast [style*="color:#FFF"],
.mast [style*="color: #fff"]{color:var(--lfx-ink)!important}

/* hero visual (.ledger dashboard etc) stays a CONTAINED framed media card
   (dark imagery allowed inside a rounded frame per the light-first rule) */
.mast .ledger,
.mast .hviz{
  border-radius:var(--lfx-radius)!important;
  border:1px solid rgba(14,39,59,.16)!important;
  box-shadow:var(--lfx-shadow-lg)!important;
  overflow:hidden;
}

/* ---------- 2. SUB-PAGE HERO ( .page-hero ) -> WHITE ---------- */
.page-hero{
  background:
    radial-gradient(640px 300px at 90% -10%,rgba(1,33,110,.06),transparent 60%),
    linear-gradient(180deg,#FFFFFF 0%,#F6F8FB 100%)!important;
  color:var(--lfx-body)!important;
}
.page-hero::before,
.page-hero::after{display:none!important}
.page-hero h1,
.page-hero h2{color:var(--lfx-ink)!important}
.page-hero .lead{color:var(--lfx-muted)!important}
.page-hero .eyebrow{color:var(--lfx-ac-ink)!important}
.page-hero .eyebrow::before{background:var(--lfx-ac)!important}
.page-hero .crumbs{color:var(--lfx-muted)!important}
.page-hero .crumbs a{color:var(--lfx-ac-ink)!important}
.page-hero h1 .gx{
  background:linear-gradient(110deg,#01216E,#3A5CB4)!important;
  -webkit-background-clip:text!important;background-clip:text!important;
  color:transparent!important;
}
.page-hero [style*="color:#fff"],.page-hero [style*="color:#FFF"]{color:var(--lfx-ink)!important}

/* ---------- 3. DARK BAND ( .section.deep / .navy / .world ) -> LIGHT ---------- */
.section.deep,.section.navy,section.world{
  background:var(--lfx-ivory)!important;color:var(--lfx-body)!important;
}
.section.deep h1,.section.deep h2,.section.deep h3,
.section.navy h1,.section.navy h2,.section.navy h3,
section.world h1,section.world h2,section.world h3{color:var(--lfx-ink)!important}
.section.deep .lead,.section.navy .lead,section.world .lead{color:var(--lfx-muted)!important}
/* inline color:#fff / light-grey on children need !important to win */
.section.deep [style*="color:#fff"],.section.navy [style*="color:#fff"],section.world [style*="color:#fff"],
.section.deep [style*="color:#FFF"],.section.navy [style*="color:#FFF"],
.section.deep h2[style*="color:#fff"],
.section.deep span[style*="color:var(--gold)"],.section.navy span[style*="color:var(--gold)"]{color:var(--lfx-ink)!important}
.section.deep p[style*="color:#C4CFDD"],.section.deep [style*="C4CFDD"],
.section.navy [style*="C4CFDD"],section.world [style*="C4CFDD"],
.section.deep [style*="A7B2C2"],.section.navy [style*="A7B2C2"]{color:var(--lfx-body)!important}
.section.deep .eyebrow,.section.navy .eyebrow,section.world .eyebrow,
.section.deep .eyebrow[style*="gold"]{color:var(--lfx-ac-ink)!important}
.section.deep .eyebrow::before,.section.navy .eyebrow::before{background:var(--lfx-ac)!important}
.section.deep h2 span[style*="gold"],.section.navy h2 span[style*="gold"]{color:var(--lfx-ac-ink)!important}
.section.deep .btn-gold,.section.navy .btn-gold,section.world .btn-gold{
  background:linear-gradient(100deg,#01216E,#3A5CB4)!important;color:#fff!important}
.section.deep .btn-line,.section.navy .btn-line{
  color:var(--lfx-ink)!important;border-color:var(--lfx-ink)!important;background:transparent!important}
/* the info-card on the dark band -> white card, light dashed rows */
.section.deep .info-card,.section.navy .info-card{
  background:#fff!important;border-color:var(--lfx-line)!important;
  box-shadow:var(--lfx-shadow)!important;
}
.section.deep .info-card .row,.section.navy .info-card .row{border-color:var(--lfx-line)!important}
.section.deep .info-card .row span[style*="A7B2C2"],
.section.deep .info-card .row span,.section.navy .info-card .row span{color:var(--lfx-muted)!important}
.section.deep .info-card .row b,.section.navy .info-card .row b{color:var(--lfx-ink)!important}

/* ---------- 4. SIGNATURE BAND ( .sigband ) -> LIGHT IVORY ---------- */
.sigband{
  background:
    radial-gradient(820px 420px at 12% 0%,rgba(1,33,110,.06),transparent 62%),
    radial-gradient(700px 420px at 92% 100%,rgba(1,33,110,.05),transparent 60%),
    var(--lfx-ivory)!important;
  color:var(--lfx-body)!important;
  border-top:1px solid var(--lfx-line);border-bottom:1px solid var(--lfx-line);
}
.sigband .sb-shapes i{opacity:.14!important;background:rgba(1,33,110,.4)!important}
.sigband .sb-kicker{
  color:var(--lfx-ac-ink)!important;
  border-color:rgba(1,33,110,.35)!important;
  background:rgba(1,33,110,.06)!important;
}
.sigband h2{color:var(--lfx-ink)!important}
.sigband h2 em{color:var(--lfx-ac-ink)!important}
.sigband p{color:var(--lfx-muted)!important}
.sigband .sb-chips div{
  background:#fff!important;border-color:var(--lfx-line)!important;
  box-shadow:var(--lfx-shadow)!important;
}
.sigband .sb-chips b{color:var(--lfx-ac-ink)!important}
.sigband .sb-chips span{color:var(--lfx-muted)!important}
.sigband [style*="color:#fff"],.sigband [style*="color:#FFF"]{color:var(--lfx-ink)!important}

/* ---------- 5. AWARDS TEASER ( .awh ) -> LIGHT ---------- */
/* .awh is fully inline-styled dark; !important beats the inline bg.
   Gold accents kept (awards identity) but text-safe deep gold. */
.awh{
  background:linear-gradient(180deg,#FFFFFF 0%,#F6F8FB 100%)!important;
  color:var(--lfx-body)!important;
  border-top:1px solid var(--lfx-line)!important;
}
.awh>div[aria-hidden]{
  background-image:
    linear-gradient(rgba(1,33,110,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(1,33,110,.05) 1px,transparent 1px)!important;
}
.awh p[style*="E5C55B"]{color:#9A7A16!important}          /* eyebrow -> deep gold */
.awh h2{color:var(--lfx-ink)!important}
.awh h2 em{
  background:linear-gradient(100deg,#B8860B,#9A7A16)!important;
  -webkit-background-clip:text!important;background-clip:text!important;
  color:transparent!important;
}
.awh p[style*="C0C9E2"]{color:var(--lfx-muted)!important}
.awh [style*="color:#fff"],.awh [style*="color:#FFF"]{color:var(--lfx-ink)!important}
.awh span[style*="border"][style*="99px"]{
  border-color:rgba(184,134,11,.45)!important;color:var(--lfx-ink)!important;
  background:#fff!important;
}
.awh a[href="awards.html"]{
  background:linear-gradient(100deg,#B8860B,#D4AF37)!important;
  color:#1A1A00!important;
}

/* ---------- 6. GENERIC: accent-as-text safety on any light surface ---------- */
.section:not(.deep) .eyebrow,
.section.mist .eyebrow{color:var(--lfx-ac-ink)!important}

/* ---------- 7. Mobile + PRM ---------- */
@media (max-width:760px){
  .mast .ledger{margin-top:24px}
  .awh h2,.awh p{padding-inline:6px}
}
@media (prefers-reduced-motion:reduce){
  .sigband .sb-shapes i{animation:none!important}
}

/* ============================================================
   8. FIRST-VIEWPORT HERO ( .cqslider ) -> LIGHT-FIRST
   Engine .cqslider is a full-bleed dark carousel (dark bg + dark scrims
   over each .cqbg). Per the white-hero rule the first viewport MUST read
   white: the SECTION becomes white->ivory, the slide COPY moves to a
   dark-ink LEFT column with accent details, and the dark visual (.cqbg
   image/video) is demoted into a CONTAINED framed rounded MEDIA CARD on
   the right. Multi-slide rotation, dots and arrows keep working
   (crossfade stacking via grid-area:1/1 preserved). Copy is verbatim.
   ============================================================ */
.cqslider{
  background:linear-gradient(180deg,#FFFFFF 0%,#F6F8FB 100%)!important;
  border-bottom:1px solid var(--lfx-line);
}
.cqslide{
  display:grid!important;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.9fr);
  gap:clamp(28px,4vw,60px);
  align-items:center!important;
  color:var(--lfx-body)!important;
  min-height:auto!important;
  max-width:1280px;
  margin-inline:auto;
  padding:clamp(48px,6vw,84px) 26px;
  width:100%;
  box-sizing:border-box;
}
/* the engine's full-slide dark scrim is not needed on the light band */
.cqslide::after{display:none!important}
/* copy column: left, no longer full-width padded block */
.cqslide-in{
  grid-column:1!important;
  order:1;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  width:auto!important;
  position:relative;z-index:2;
}
/* the dark backdrop -> a CONTAINED framed media card, right column */
.cqslide .cqbg{
  position:relative!important;
  inset:auto!important;
  grid-column:2!important;
  order:2;
  align-self:center;
  width:100%;
  max-width:100%;
  aspect-ratio:16 / 11;
  border-radius:var(--lfx-radius)!important;
  border:1px solid var(--lfx-line)!important;
  box-shadow:var(--lfx-shadow-lg)!important;
  overflow:hidden!important;
  transform:none!important;
  z-index:1;
}
.cqslide.cq-active .cqbg{transform:none!important}
/* dark scrims over the media -> subtle inner vignette (text no longer overlays) */
.cqslide .cqbg::after{
  background:linear-gradient(180deg,rgba(6,24,38,.06),rgba(6,24,38,.22))!important;
}
.cqslide .cqbg video.cqfx,.cqslide .cqbg video{border-radius:inherit}
/* copy -> dark ink, accent details on the light background */
.cqslide h2{
  color:var(--lfx-ink)!important;
  text-shadow:none!important;
  max-width:14ch;
}
.cqslide p{
  color:var(--lfx-muted)!important;
  text-shadow:none!important;
}
.cqslide .cq-eyebrow{
  color:var(--lfx-ac-ink)!important;
  border-color:rgba(1,33,110,.4)!important;
  background:rgba(1,33,110,.06)!important;
  backdrop-filter:none!important;
}
.cqslide .cq-kicker{
  color:var(--lfx-muted)!important;
  text-shadow:none!important;
}
.cqslide .cq-btn{
  background:linear-gradient(100deg,#01216E,#3A5CB4)!important;
  color:#fff!important;
  box-shadow:0 14px 30px rgba(1,33,110,.3)!important;
}
.cqslide .cq-btn:hover{
  box-shadow:0 20px 42px rgba(1,33,110,.42)!important;
}
/* dots + arrows recoloured for the light band */
.cqslider .cq-dots button{background:rgba(14,39,59,.18)!important}
.cqslider .cq-dots button.cq-on{background:var(--lfx-ac)!important}
.cqslider .cq-arr{
  border-color:rgba(14,39,59,.22)!important;
  background:rgba(255,255,255,.7)!important;
  color:var(--lfx-ink)!important;
  backdrop-filter:blur(6px);
}
.cqslider .cq-arr:hover{background:var(--lfx-ac)!important;color:#fff!important;border-color:transparent!important}
/* mobile: media card stacks BELOW the copy, no overflow */
@media (max-width:760px){
  .cqslide{
    grid-template-columns:1fr!important;
    gap:24px;
    padding:44px 20px;
  }
  .cqslide-in{grid-column:1!important;order:1}
  .cqslide .cqbg{
    grid-column:1!important;
    order:2;
    aspect-ratio:16 / 10;
  }
  .cqslide h2{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .cqslide .cqbg{transform:none!important}
}

/* ============================================================
   9. FAMILY WALL ( .cqsvc - page-scoped LIGHT, engine ships #071228 )
   caqa-data-redesign.css S3 precedent: white cards, accent-ink labels.
   ============================================================ */
.cqsvc,
.cqsvc::after{
  background:linear-gradient(180deg,#FFFFFF 0%,#F6F8FB 100%)!important;
}
.cqsvc{border-top:1px solid var(--lfx-line)}
.cqsvc::before{
  background-image:
    linear-gradient(rgba(1,33,110,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(1,33,110,.05) 1px,transparent 1px)!important;
}
.cqsvc-head .t{color:var(--lfx-ac-ink)!important}
.cqsvc-head h2{color:var(--lfx-ink)!important}
.cqsvc-head p{color:var(--lfx-muted)!important}
.cqsvc-card{
  background:#fff!important;border:1px solid var(--lfx-line)!important;
  box-shadow:var(--lfx-shadow)!important;
}
.cqsvc-card::before{background:linear-gradient(100deg,#01216E,#3A5CB4)!important}
.cqsvc-card:hover{
  background:#fff!important;border-color:rgba(1,33,110,.4)!important;
  box-shadow:var(--lfx-shadow-lg)!important;
}
.cqsvc-card .b{color:var(--lfx-ac-ink)!important}
.cqsvc-card .s{color:var(--lfx-ink)!important}
.cqsvc-card .g{color:var(--lfx-muted)!important}
.cqsvc-card:hover .g{color:var(--lfx-ac-ink)!important}

/* ============================================================
   P1. careercalling remnants (verify pass 1)
   - .mast .bg.gfx: real child DIV painting the dark navy backdrop
     (linear-gradient(120deg,#0A172B,#0C1D36) + white-line motif) —
     re-lit as a white->ivory gradient with soft green/blue accents.
   - .mast .bg::after dark scrim killed.
   - .statwall: dark glass chip wall -> white framed card, ink stats.
   ============================================================ */
.mast .bg.gfx{
  background:
    radial-gradient(900px 480px at 85% 12%,rgba(1,33,110,.10),transparent 60%),
    radial-gradient(700px 420px at 8% 88%,rgba(110,168,255,.10),transparent 62%),
    linear-gradient(120deg,#FFFFFF,#F2F5FA)!important;
}
.mast .bg.gfx i{opacity:.14!important}
.mast .bg::after{display:none!important}
.statwall{
  background:#FFFFFF!important;
  border:1px solid var(--lfx-line)!important;
  box-shadow:var(--lfx-shadow)!important;
  backdrop-filter:none!important;
}
.stat{border-right:1px solid var(--lfx-line)!important}
.stat:last-child{border-right:0!important}
.stat:hover{background:rgba(1,33,110,.06)!important}
.stat b{color:var(--lfx-ink)!important}
.stat b i{color:var(--lfx-ac-ink)!important}
.stat span{color:var(--lfx-muted)!important}

/* ============================================================
   P2. careercalling reveal safety-net (audit side-note fix)
   Diagnosis: the two grey below-fold voids in the headless full-page
   capture were NOT lazy-load placeholders (all lazy imgs complete) —
   they are the "Our Mission" + "Fourteen brands" .section.soft bands
   whose IO-gated .reveal children stay opacity:0 when a full-page
   paint never scrolls (headless capture, print/PDF). JS half of the
   net lives in cci.js (navigator.webdriver + beforeprint force-reveal);
   this CSS half covers print even with JS unavailable.
   ============================================================ */
@media print{
  .reveal{opacity:1!important;transform:none!important}
  .clipreveal{clip-path:none!important}
}

/* cq-audit-13jul : contrast + dark-theme leftover fixes (scoped overrides, appended) */
/* 1. Accent CTA buttons: white 14px text needs >=4.5:1 -> deepen the green fill */
.mast .btn-gold,.awh .btn-gold,
.section.deep .btn-gold,.section.navy .btn-gold,section.world .btn-gold,
.cqslide .cq-btn{background:linear-gradient(100deg,#01216E,#0A2F8C)!important}
.btn-red{background:#01216E!important;background-color:#01216E!important}
.btn-red:hover{background:#0A2F8C!important;background-color:#0A2F8C!important}
/* 2. Family bar "You are on" label: restore readable slate on the dark bar */
.cqbar .cq3-here{color:#8FA0BC}
/* 3. Brand ticker sits on navy - restore its light slate text */
.ticker .tk-track span{color:#8B98B2!important}
/* 4. Global-presence band is light now: kill leftover dark-theme text colours */
section.world p[style*="C9D4EA"]{color:#3D4858!important}
section.world .wlist li{color:#3D4858!important;border-bottom-color:rgba(13,27,46,.14)!important}
section.world .wlist b{color:#0D1B2E!important}
section.world .wlist li:hover{color:#0D1B2E!important}
/* 5. Hero pale-green italic word barely visible on the light hero */
.mast h1 .rx{color:#01216E!important}
/* 6. Awards teaser eyebrow: deep gold for 4.5:1 on the light band */
.awh p[style*="E5C55B"]{color:#7D6414!important}
/* 7. Policy footer legal line was diluted below 4.5:1 by opacity */
.cq-policy .cq-policy-legal{opacity:.92}

/* cq-audit-13jul (pass 2) : residual contrast fixes */
/* a. About-page mission/vision cards: dark-theme translucent cards left pale
      #C2CDEA text on the now-light band -> white cards, dark body text */
.section.navy .card[style*="255,255,255,.05"],
.section.navy .card[style*="255, 255, 255, .05"]{
  background:#fff!important;border:1px solid var(--lfx-line)!important;
  box-shadow:var(--lfx-shadow)!important;
}
.section.navy .card [style*="C2CDEA"],
.section.navy .card p[style*="color:#C2CDEA"]{color:var(--lfx-body)!important}
/* b. Mega-menu CTA pill: white 14px text on accent #01216E was 3.4:1 ->
      deepen fill (matches btn-red fix precedent), keep hover feedback */
.cqm-cta{background:#01216E}
.cqm-cta:hover{background:#01216E}