/* ============================================================
   CAQA DATA — LIGHT-FIRST CONTENT SKIN  (loaded last)
   Re-skins the DARK content shells (.mast hero, .page-hero,
   .section.deep, .sigband, .awh awards teaser) to the canonical
   CAQA light-first brand: white/ivory pages, dark ink headings,
   teal accent (#193E99; text-safe #142F73 on white).
   Chassis (cqbar/cq3, cqslider, header nav, footer, ticker,
   newsletter, cqsvc wall, cine-artband cinema band) untouched.
   Content is verbatim — this file only changes appearance.
   ============================================================ */

:root{
  --lf-ink:#12264F;          /* dark ink headings (>=7:1 on white) */
  --lf-body:#39434E;         /* body */
  --lf-muted:#5A6570;        /* muted-but-dark */
  --lf-paper:#FFFFFF;
  --lf-ivory:#F6F8FB;        /* alternating section tint */
  --lf-line:#E4E7EC;         /* 1px borders */
  --lf-teal:#193E99;         /* brand teal (details/CTA fill) */
  --lf-teal-ink:#142F73;     /* teal-as-text on white (>=4.5:1) */
  --lf-teal-ink2:#142F73;    /* accentInk */
  --lf-shadow:0 12px 30px rgba(18,38,79,.08);
  --lf-shadow-lg:0 24px 60px rgba(16,24,40,.14);
  --lf-radius:22px;
}

/* ---------- 1. HERO ( .mast ) → WHITE HERO ---------- */
.mast{
  background:linear-gradient(180deg,#FFFFFF 0%,#F6F8FB 100%)!important;
  color:var(--lf-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(--lf-ink)!important}
.mast .lead{color:var(--lf-muted)!important}
.mast .eyebrow{color:var(--lf-teal-ink)!important}
.mast .eyebrow::before{background:var(--lf-teal)!important}
/* pink gradient headline word → teal gradient on the light hero */
.mast h1 .gx{
  background:linear-gradient(110deg,#193E99,#2F5BD6)!important;
  -webkit-background-clip:text!important;background-clip:text!important;
  color:transparent!important;
}
/* audience pills: light chips, dark text, teal hover */
.mast .aud span{
  color:#3A4652!important;border-color:var(--lf-line)!important;background:#fff;
}
.mast .aud span:hover{
  color:var(--lf-teal-ink)!important;border-color:var(--lf-teal)!important;
}
/* the outline "Explore Services" button was white-on-dark → dark ink on white */
.mast .hero-cta .btn-line{
  color:var(--lf-ink)!important;border-color:var(--lf-ink)!important;
}
.mast .hero-cta .btn-line:hover{background:var(--lf-ink)!important;color:#fff!important}
/* gold(pink) CTA fill → brand teal fill */
.mast .btn-gold,
.awh .btn-gold{background:var(--lf-teal)!important;color:#fff!important}
.mast .btn-gold:hover{box-shadow:0 14px 30px rgba(25,62,153,.35)!important}

/* .ledger stays a CONTAINED framed media card (dark dashboard allowed
   inside a rounded frame per the light-first rule) — just soften the
   frame + shadow so it reads as a card on white, not a full-bleed slab */
.mast .ledger{
  border-radius:var(--lf-radius)!important;
  box-shadow:var(--lf-shadow-lg)!important;
}

/* ---------- 2. SUB-PAGE HERO ( .page-hero ) → WHITE ---------- */
.page-hero{
  background:linear-gradient(180deg,#FFFFFF 0%,#F6F8FB 100%)!important;
  color:var(--lf-body)!important;
}
.page-hero::before,
.page-hero::after{display:none!important}
.page-hero h1,
.page-hero h2{color:var(--lf-ink)!important}
.page-hero .lead{color:var(--lf-muted)!important}
.page-hero .eyebrow{color:var(--lf-teal-ink)!important}
.page-hero .eyebrow::before{background:var(--lf-teal)!important}
.page-hero .crumbs{color:var(--lf-muted)!important}
.page-hero .crumbs a{color:var(--lf-teal-ink)!important}

/* ---------- 3. DARK BAND ( .section.deep ) → LIGHT ---------- */
.section.deep{
  background:var(--lf-ivory)!important;color:var(--lf-body)!important;
}
.section.deep h1,
.section.deep h2,
.section.deep h3{color:var(--lf-ink)!important}
/* inline color:#fff / #C4CFDD on children need !important to win */
.section.deep [style*="color:#fff"],
.section.deep h2[style*="color:#fff"],
.section.deep span[style*="color:var(--gold)"]{color:var(--lf-ink)!important}
.section.deep p[style*="color:#C4CFDD"],
.section.deep [style*="C4CFDD"]{color:var(--lf-body)!important}
.section.deep .eyebrow,
.section.deep .eyebrow[style*="gold"]{color:var(--lf-teal-ink)!important}
.section.deep .eyebrow::before{background:var(--lf-teal)!important}
.section.deep h2 span[style*="gold"]{color:var(--lf-teal-ink)!important}
.section.deep .btn-gold{background:var(--lf-teal)!important;color:#fff!important}
/* the info-card on the dark band → white card, light dashed rows */
.section.deep .info-card{
  background:#fff!important;border-color:var(--lf-line)!important;
  box-shadow:var(--lf-shadow)!important;
}
.section.deep .info-card .row{border-color:var(--lf-line)!important}
.section.deep .info-card .row span[style*="A7B2C2"],
.section.deep .info-card .row span{color:var(--lf-muted)!important}
.section.deep .info-card .row b{color:var(--lf-ink)!important}

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

/* ---------- 5. AWARDS TEASER ( .awh ) → LIGHT ---------- */
/* .awh is fully inline-styled dark; the inline bg is neutralised in HTML,
   this restyles it to a light ivory band with gold+teal accents. */
.awh{
  background:linear-gradient(180deg,#FFFFFF 0%,#F6F8FB 100%)!important;
  color:var(--lf-body)!important;
  border-top:1px solid var(--lf-line)!important;
}
.awh>div[aria-hidden]{
  background-image:
    linear-gradient(rgba(25,62,153,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(25,62,153,.05) 1px,transparent 1px)!important;
}
.awh p[style*="E5C55B"]{color:#9A7A16!important}          /* eyebrow → deep gold */
.awh h2{color:var(--lf-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(--lf-muted)!important}
.awh span[style*="border"][style*="99px"]{
  border-color:rgba(184,134,11,.45)!important;color:var(--lf-ink)!important;
  background:#fff;
}
.awh a[href="awards.html"]{
  background:linear-gradient(100deg,#B8860B,#D4AF37)!important;
  color:#1A1A00!important;
}

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

/* ---------- 7. Mobile: no 375 overflow, stacked hero ---------- */
@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
   The homepage's actual first viewport is the .cqslider band,
   previously a full-bleed dark carousel (bg #0B1F4E, 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 teal accents, and the
   dark visual (.cqbg image + cqfx video) is demoted into a
   CONTAINED framed rounded MEDIA CARD on the right (dark imagery
   inside the frame is allowed — it is no longer the page bg).
   Multi-slide rotation, dots and arrows keep working (crossfade
   stacking via grid-area:1/1 is preserved). Copy is verbatim.
   ============================================================ */

/* section: white→ivory, no dark full-bleed slab */
.cqslider{
  background:linear-gradient(180deg,#FFFFFF 0%,#F6F8FB 100%)!important;
  border-bottom:1px solid var(--lf-line);
}

/* each slide (.cqbg + .cqslide-in are siblings) → two-column grid:
   copy LEFT, framed media card RIGHT. keep crossfade stack + sane
   min-height. .cqslide is normally display:flex; make it a grid. */
.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(--lf-body)!important;
  min-height:auto!important;
  max-width:1280px;
  margin-inline:auto;
  padding:clamp(48px,6vw,84px) 26px;
  width:100%;
  box-sizing:border-box;
}
/* keep the crossfade: every slide occupies the same grid cell of the
   parent .cqslides (base css already sets .cqslide grid-area:1/1) */

/* 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(--lf-radius)!important;
  border:1px solid var(--lf-line)!important;
  box-shadow:var(--lf-shadow-lg)!important;
  overflow:hidden!important;
  transform:none!important;
  z-index:1;
}
.cqslide.cq-active .cqbg{transform:none!important}
/* the dark scrims that made the backdrop unreadable-dark are demoted
   to a subtle inner vignette so text-over-image is not needed anymore */
.cqslide .cqbg::after{
  background:linear-gradient(180deg,rgba(11,31,78,.06),rgba(11,31,78,.22))!important;
}
.cqslide .cqbg video.cqfx{border-radius:inherit}

/* copy → dark ink, teal accents on the light background */
.cqslide h2{
  color:var(--lf-ink)!important;
  text-shadow:none!important;
  max-width:14ch;
}
.cqslide p{
  color:var(--lf-muted)!important;
  text-shadow:none!important;
}
.cqslide .cq-eyebrow{
  color:var(--lf-teal-ink)!important;
  border-color:rgba(25,62,153,.4)!important;
  background:rgba(25,62,153,.06)!important;
  backdrop-filter:none!important;
}
.cqslide .cq-kicker{
  color:var(--lf-muted)!important;
  text-shadow:none!important;
}
/* teal CTA fill, white text */
.cqslide .cq-btn{
  background:linear-gradient(100deg,#193E99,#2F5BD6)!important;
  color:#fff!important;
  box-shadow:0 14px 30px rgba(25,62,153,.3)!important;
}
.cqslide .cq-btn:hover{
  box-shadow:0 20px 42px rgba(25,62,153,.42)!important;
}

/* dots + arrows recoloured for the light band */
.cqslider .cq-dots button{background:rgba(18,38,79,.18)!important}
.cqslider .cq-dots button.cq-on{background:var(--lf-teal)!important}
.cqslider .cq-arr{
  border-color:rgba(18,38,79,.22)!important;
  background:rgba(255,255,255,.7)!important;
  color:var(--lf-ink)!important;
  backdrop-filter:blur(6px);
}
.cqslider .cq-arr:hover{background:var(--lf-teal)!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}
  /* keep the arrows hidden on mobile as the base css already does */
}
@media (prefers-reduced-motion:reduce){
  .cqslide .cqbg{transform:none!important}
}