/* ============================================================
   caqa-com - LIGHT-FIRST FIX SKIN  (generated by make_light.py, loaded LAST)
   caqa-data precedent (lightfirst.css + redesign S3) parameterized by the
   site accent #8A6D14 (ink-safe text accent #8A6D14). 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:#8A6D14;              /* brand accent (details/CTA fill) */
  --lfx-ac2:#A0801A;            /* gradient end */
  --lfx-ac-ink:#8A6D14;         /* 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(138,109,20,.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,#8A6D14,#A0801A)!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,#E3BE4A,#C9A227)!important;color:#17191F!important}
.mast .btn-gold:hover{box-shadow:0 14px 30px rgba(138,109,20,.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(138,109,20,.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,#8A6D14,#A0801A)!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,#E3BE4A,#C9A227)!important;color:#17191F!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(138,109,20,.06),transparent 62%),
    radial-gradient(700px 420px at 92% 100%,rgba(138,109,20,.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(138,109,20,.4)!important}
.sigband .sb-kicker{
  color:var(--lfx-ac-ink)!important;
  border-color:rgba(138,109,20,.35)!important;
  background:rgba(138,109,20,.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(138,109,20,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(138,109,20,.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(138,109,20,.4)!important;
  background:rgba(138,109,20,.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,#8A6D14,#A0801A)!important;
  color:#fff!important;
  box-shadow:0 14px 30px rgba(138,109,20,.3)!important;
}
.cqslide .cq-btn:hover{
  box-shadow:0 20px 42px rgba(138,109,20,.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(138,109,20,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(138,109,20,.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,#8A6D14,#A0801A)!important}
.cqsvc-card:hover{
  background:#fff!important;border-color:rgba(138,109,20,.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. caqa-com remnants (verify pass 1)
   - .mast .bg.gfx: real child DIV painting the dark navy backdrop
     (linear-gradient(120deg,#0E1013,#191408) + hairline motif) —
     re-lit white->ivory with soft green accents. Harmonises with the
     fb0707 blocks in intl.css: item 12's light hero-greys are re-inked
     by the earlier .mast/.page-hero rules above (!important, loaded
     last); item 13 practice-card shadows, item 1 black body fonts and
     the menu work are untouched.
   - .statwall: dark glass chip wall -> white framed card, ink stats.
   - m375: slide media card gets breathing room so the page edges
     read white beside the framed dark imagery.
   ============================================================ */
.mast .bg.gfx{
  background:
    radial-gradient(900px 480px at 85% 12%,rgba(138,109,20,.09),transparent 60%),
    radial-gradient(700px 420px at 8% 88%,rgba(217,178,58,.09),transparent 62%),
    linear-gradient(120deg,#FFFFFF,#F2F5FA)!important;
}
.mast .bg.gfx i{opacity:.14!important}
.mast .bg::after{display:none!important}
.statwall,.statwall.six{
  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(138,109,20,.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}
/* fb0707 item 12 set light hero greys for the old dark mast — re-ink */
.mast .lead{color:var(--lfx-muted)!important}
.mast .stat span{color:var(--lfx-muted)!important}
.mast .crumbs{color:var(--lfx-muted)!important}
.page-hero .lead{color:var(--lfx-muted)!important}
@media (max-width:760px){
  .cqslide{padding:44px 30px!important}
}

/* ============================================================
   fb0721 — owner feedback 2026-07-21 (site-scoped; engines untouched;
   loaded last so it wins ties against cq-menu.css / inline page styles).
   ============================================================ */

/* fb0721 item 1 — black body fonts wherever light grey was used.
   The lightfix vars drive most light-surface body/muted text. */
:root{--lfx-body:#161B26;--lfx-muted:#20293A}
body{color:#161B26}
.card p,.svx-card p,.pr-row p,.acc .ac-body,.q-card .who span,.lead{color:#20293A}

/* fb0721 item 2 — typography: Sora headings in a distinct brand-navy
   colour, Montserrat body/links. (Dark bands keep their own explicit
   white heading rules — class rules outrank these element selectors.) */
body h1,body h2,body h3,body h4{font-family:'Sora',sans-serif;color:#1C1F26}
.cta-band h2,.cqft-copy h2,.f-news h3{color:#fff}
a{font-family:'Montserrat','Inter',sans-serif}

/* fb0721 item 2b — mega-menu (v4 engine defaults to a display serif for
   panel/spotlight titles and a monospace for Explore links + chips;
   menu-data.js fonts.display now injects Sora, and the mono var is
   re-pointed at Montserrat here — this file loads after cq-menu.css) */
#cqMega{--cqm-mono:'Montserrat','Inter',sans-serif}
#cqMega .cqm-colhead .cqm-coltitle{font-weight:700;color:#1C1F26;font-size:clamp(19px,1.6vw,22px)}
#cqMega .cqm-feat-title{font-weight:700;color:#1C1F26;font-size:clamp(21px,1.8vw,25px);line-height:1.2}
#cqMega .cqm-feat-more{text-decoration-thickness:1.5px}

/* fb0721 item 4 — all top-level menu items at one size + weight
   (engine buttons inherited 16.5px while plain links got .9rem=14.4px) */
#cqMega .cqm-list .cqm-top{font-size:16px;font-weight:700}

/* fb0721 item 13 (home) — practice-card elevation: stop the track
   padding clipping the card shadows, and show the accent top edge
   at rest like every other card */
.svx-track{padding:8px 16px 34px;margin:0 -16px}
.svx-card{border-top:3px solid #C9A227}
.statwall,.statwall.six{box-shadow:0 18px 44px rgba(16,24,40,.14)!important}

/* fb0721 (home) — sector ticker strip readability */
.ticker .tk-track span{color:#FFFFFF;font-size:.95rem}

/* fb0721 (home) — world/global list on the re-lit light band: the old
   dark-band inks (white bold labels) were invisible on ivory */
section.world .wlist b{color:#1C1F26}
section.world .wlist li{color:#20293A;border-bottom-color:rgba(20,22,27,.14)}

/* fb0721 (about) — Mission / Focus / People cards carry inline dark-band
   styles (glass fill + #D6D2C6 copy) that read pale on the light band */
.section.navy .card[style]{background:#fff!important;border:1px solid #E4E7EC!important;border-top:3px solid #C9A227!important;box-shadow:0 12px 30px rgba(14,39,59,.08)}
.section.navy .card h3[style]{color:#1C1F26!important}
.section.navy .card p[style]{color:#161B26!important}

/* fb0721 (about) — clear space between the Mission band and the
   consultation CTA band */
.section.navy + .section:has(.cta-band){padding-top:72px}

/* fb0721 (policies) — larger headings, black text, more air between
   headings and paragraphs on every .cq-policy page */
.cq-policy{color:#161B26}
.cq-policy h1{font-size:2.35rem;margin:0 0 10px}
.cq-policy h2{font-size:1.7rem;margin:2.2em 0 .85em;color:#1C1F26;line-height:1.25}
.cq-policy h3{font-size:1.3rem;margin:1.9em 0 .65em;color:#1C1F26}
.cq-policy p{margin:0 0 1.15em}
.cq-policy li{margin:.45em 0}
.cq-policy h1 + .cq-policy-updated{margin-bottom:36px}

/* fb0721 (contact, QA pass) — the two-column enquiry layout is built from
   inline grid styles with no mobile collapse; stack it on small screens */
@media(max-width:860px){
  .section .container:has(#ph){display:block!important}
  .section .container:has(#ph) .form-card{margin-bottom:26px}
}
@media(max-width:480px){
  .form-card div[style*="grid-template-columns:1fr 1fr"]{display:block!important}
}

/* fb0721 (footer) — tighter link rows, left-aligned content,
   compact official-info column (labels removed in HTML) */
.cqf3 li{margin:0 0 6px}
.cqf3-info li{margin:0 0 8px}
.cqf3-info b{margin-bottom:1px}
.cqf3-bottom{text-align:left}
.cqf3-logo{max-width:200px}