/* ============================================================
   The VET Sector Awards Website - LIGHT-FIRST FIX SKIN  (generated by make_light.py, loaded LAST)
   caqa-data precedent (lightfirst.css + redesign S3) parameterized by the
   site accent #8A6A1F (ink-safe text accent #6E5314). 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:#8A6A1F;              /* brand accent (details/CTA fill) */
  --lfx-ac2:#AB945E;            /* gradient end */
  --lfx-ac-ink:#6E5314;         /* 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,106,31,.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,#8A6A1F,#AB945E)!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,#8A6A1F,#AB945E)!important;color:#fff!important}
.mast .btn-gold:hover{box-shadow:0 14px 30px rgba(138,106,31,.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,106,31,.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,#8A6A1F,#AB945E)!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,#8A6A1F,#AB945E)!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(138,106,31,.06),transparent 62%),
    radial-gradient(700px 420px at 92% 100%,rgba(138,106,31,.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,106,31,.4)!important}
.sigband .sb-kicker{
  color:var(--lfx-ac-ink)!important;
  border-color:rgba(138,106,31,.35)!important;
  background:rgba(138,106,31,.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,106,31,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(138,106,31,.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,106,31,.4)!important;
  background:rgba(138,106,31,.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,#8A6A1F,#AB945E)!important;
  color:#fff!important;
  box-shadow:0 14px 30px rgba(138,106,31,.3)!important;
}
.cqslide .cq-btn:hover{
  box-shadow:0 20px 42px rgba(138,106,31,.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,106,31,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(138,106,31,.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,#8A6A1F,#AB945E)!important}
.cqsvc-card:hover{
  background:#fff!important;border-color:rgba(138,106,31,.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}

/* ---------- X-C. VET v3 chassis inner-page hero (.pagehero + .ink/.em/.gold/
   .indigo/.plum variants, v3.css L516) -> light. The variants are all dark
   gradients over white text; the selector list carries every variant so
   specificity beats the variant rules. Ivory wall, ink serif heading, the
   site's accent (deep gold on Awards, indigo on Directory) as ink-safe
   details. Crumbs + .lead were light-grey-on-dark -> muted-dark on white. */
.pagehero,.pagehero.ink,.pagehero.em,.pagehero.gold,.pagehero.indigo,.pagehero.plum{
  background:
    radial-gradient(640px 300px at 90% -10%,color-mix(in srgb,var(--lfx-ac) 8%,transparent),transparent 60%),
    linear-gradient(180deg,#FFFFFF 0%,#F6F8FB 100%)!important;
  color:var(--lfx-body)!important;
}
.pagehero::before,.pagehero::after{display:none!important}
.pagehero h1{color:var(--lfx-ink)!important}
.pagehero h1 .it,.pagehero h1 em{color:var(--lfx-ac-ink)!important}
.pagehero .lead{color:var(--lfx-muted)!important}
.pagehero .crumbs{color:var(--lfx-muted)!important}
.pagehero .crumbs a{color:var(--lfx-ac-ink)!important}
.pagehero .crumbs a:hover{color:var(--lfx-ink)!important}
.pagehero [style*="color:#fff"],.pagehero [style*="color:#FFF"]{color:var(--lfx-ink)!important}

/* --- newsletter block fix, 31 Aug 2026 ---------------------------------
   A consent paragraph (.cq-consent) and a Cloudflare Turnstile widget were
   injected INSIDE .cqft-card form. That form is a nowrap flex row styled as
   the white pill, so both became flex items on the same row as the input:
   the email field collapsed to about 100px (only "Enter y" was visible) and
   the pale consent text rendered over the pill edge, unreadable.

   The pill is rebuilt on the input and button themselves, the form is allowed
   to wrap, and the injected elements drop to their own full width row below.

   Where the card already carries its own .cqft-consent line the injected one
   is a duplicate, so it is hidden. That also covers the three sites with a
   white card, where white consent text would be invisible. No site that
   relies on the injected consent has a white card, so the white is safe. */
.cqft-card form{flex-wrap:wrap; background:transparent; padding:0; border-radius:0; gap:10px 0}
.cqft-card form > input[type=email]{flex:1 1 auto; min-width:0; background:#fff;
  border-radius:999px 0 0 999px; padding:16px 24px}
.cqft-card form > button{border-radius:0 999px 999px 0}
.cqft-card form > .cq-consent{flex:0 0 100%; order:9; margin:2px 0 0; opacity:1;
  text-align:left; color:rgba(255,255,255,.92)}
.cqft-card form > .cq-consent a{color:#fff; text-decoration:underline}
.cqft-card form > .cf-turnstile{flex:0 0 100%; order:10; margin:0}
.cqft-card:has(> .cqft-consent) form > .cq-consent{display:none}
/* --- end newsletter block fix --- */