/* ============================================================
   THE VET SECTOR RESOURCES - site skin (loaded after v3.css/cq.css)
   Family chassis: The VET Sector newsroom header + cqbar + cqf3 footer.
   Accent: deep emerald green #0E5C46 + warm sand #E8DCC8 on white.
   Light-first: white/bright surfaces; dark only in contained frames.
   All small text on white is #0E5C46 or darker (WCAG AA computed).
   ============================================================ */
:root{
  --res:#0E5C46;            /* brand emerald */
  --res-d:#0A4634;          /* family dark (footer, deep accents) */
  --res-t:#E9F3EE;          /* emerald tint */
  --sand:#E8DCC8;           /* warm sand - dark surfaces + washes only */
  --sand-wash:#F5EFE3;      /* light sand wash for tint bands */
  /* re-point the chassis accent hooks at the emerald identity */
  --em:#0E5C46;--em-d:#0A4634;--em-l:#8FC7B0;--em-t:#E9F3EE;
  --ind:#0E5C46;--ind-d:#0A4634;--ind-t:#E9F3EE;
  /* coral stays in the family header CTA but must be AA on white */
  --coral:#C13A1C;--coral-d:#9C2E15;
}

/* ---------- fleet quality bars ---------- */
[id]{scroll-margin-top:96px}
[hidden]{display:none!important}

/* v3.css sets body{overflow-x:hidden}, which turns body into a scroll
   container and double-offsets the sticky subnav (fleet fix from the
   cinema engine): clip keeps the overflow cut without a scroll box. */
body{overflow-x:clip}

/* ---------- secondary nav (emerald variant of dirsub) ---------- */
.ressub .aw-mark{background:linear-gradient(150deg,#177A5D,var(--res-d))}
.ressub .awbrand b{color:var(--res-d)}
.ressub .awlinks a:hover,.ressub .awlinks a.on{background:var(--res-t);color:var(--res-d)}
.resnom{background:var(--res)!important}
.resnom:hover{background:var(--res-d)!important}

/* ---------- light-first hero ---------- */
.reshero{position:relative;overflow:hidden;padding:88px 0 96px;
  background:
    radial-gradient(720px 360px at 88% 0%,rgba(14,92,70,.08),transparent 62%),
    radial-gradient(560px 300px at 4% 100%,rgba(232,220,200,.55),transparent 60%),
    linear-gradient(180deg,#FFFFFF 0%,#FAF6EE 100%)}
.reshero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(14,92,70,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(14,92,70,.05) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(closest-side at 76% 30%,#000,transparent);mask-image:radial-gradient(closest-side at 76% 30%,#000,transparent)}
.reshero .in{position:relative;max-width:860px;z-index:2}
.reshero .kk{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--res-d);background:var(--res-t);border:1px solid rgba(14,92,70,.28);padding:7px 15px;border-radius:100px}
.reshero h1{font-family:var(--serif);font-weight:600;font-size:clamp(2.4rem,5.4vw,4.1rem);line-height:1.04;letter-spacing:-.025em;margin:18px 0 14px;color:var(--ink)}
.reshero h1 em{font-style:italic;color:var(--res)}
.reshero .lead{font-family:var(--read);font-size:19px;line-height:1.75;color:var(--ink2);max-width:60ch}
.reshero .cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
/* stacked resource-card motif (pure CSS, unique to this site) */
.reshero .stack{position:absolute;right:var(--gut);top:50%;transform:translateY(-50%) rotate(4deg);width:250px;display:none}
.reshero .stack i{display:block;height:64px;border-radius:14px;margin-bottom:12px;border:1px solid rgba(14,92,70,.16);box-shadow:0 18px 36px -22px rgba(10,70,52,.45)}
.reshero .stack i:nth-child(1){background:linear-gradient(120deg,#0E5C46,#12735A);transform:translateX(24px)}
.reshero .stack i:nth-child(2){background:linear-gradient(120deg,#E8DCC8,#F5EFE3)}
.reshero .stack i:nth-child(3){background:#fff;transform:translateX(14px)}
.reshero .stack i:nth-child(4){background:linear-gradient(120deg,#0A4634,#0E5C46);transform:translateX(-8px)}
@media(min-width:1180px){.reshero .stack{display:block}}

/* ---------- tint bands: warm sand wash instead of the news ivory ---------- */
.sec-tint{background:linear-gradient(180deg,#fff,var(--sand-wash))}

/* ---------- category cards (emerald via --ind hooks; sizing tweaks) ---------- */
.dcat .di{background:var(--res-t);color:var(--res-d)}
.dcat:hover{box-shadow:0 22px 40px -26px rgba(14,92,70,.4);border-color:var(--res)}
.dcat:hover .di{background:var(--res);color:#fff}

/* ---------- value props ---------- */
.whyrow .why{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px}
.whyrow .wi{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:var(--res-t);color:var(--res-d);margin-bottom:16px}
.whyrow h3{font-family:var(--serif);font-weight:600;font-size:20px;margin-bottom:8px}
.whyrow p{font-family:var(--read);font-size:14.5px;color:var(--ink2);line-height:1.6}

/* ---------- CTA band ---------- */
.dirband{background:linear-gradient(135deg,var(--res-d),var(--res));color:#fff}
.dirband h2{color:#fff}
.dirband p{color:var(--sand)}
.dirband .btn{background:var(--sand);color:var(--res-d);font-weight:700}
.dirband .btn:hover{background:#fff;transform:translateY(-2px)}

/* ---------- shop page ---------- */
#cqShopMount{--cqshop-accent:#0E5C46;--cqshop-ink:#fff;--cqshop-deep:#0A4634}
.shopintro{padding:56px 0 8px}
.shopintro h1{font-family:var(--serif);font-weight:600;font-size:clamp(2rem,4vw,3rem);letter-spacing:-.02em;margin:14px 0 10px}
.shopintro .lead{font-family:var(--read);font-size:17px;line-height:1.7;color:var(--ink2);max-width:70ch}
.shopwrap{padding:34px 0 90px}

/* ---------- generic inner-page hero ---------- */
.pagehead{padding:64px 0 26px;background:linear-gradient(180deg,#fff,#FBF8F1)}
.pagehead h1{font-family:var(--serif);font-weight:600;font-size:clamp(2rem,4.4vw,3.2rem);letter-spacing:-.02em;margin:14px 0 10px}
.pagehead .lead{font-family:var(--read);font-size:17.5px;line-height:1.7;color:var(--ink2);max-width:72ch}

/* ---------- prose blocks (about / for-rtos) ---------- */
.prose{max-width:820px}
.prose h2{font-family:var(--serif);font-weight:600;font-size:clamp(24px,3vw,34px);letter-spacing:-.02em;margin:2em 0 .5em}
.prose h2:first-child{margin-top:0}
.prose p{font-family:var(--read);font-size:16.5px;line-height:1.8;color:var(--ink2);margin:0 0 1.1em}
.prose ul{list-style:disc;padding-left:1.4em;margin:0 0 1.2em}
.prose li{font-family:var(--read);font-size:16px;line-height:1.75;color:var(--ink2);margin:.4em 0}
.prose strong{color:var(--ink)}

/* checklist cards on for-rtos */
.checkgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.checkgrid .chk{display:flex;gap:14px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 22px}
.checkgrid .chk .ci{flex:none;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:var(--res-t);color:var(--res-d)}
.checkgrid .chk h3{font-weight:600;font-size:16px;margin-bottom:4px}
.checkgrid .chk p{font-family:var(--read);font-size:14px;color:var(--ink2);line-height:1.6;margin:0}
@media(max-width:760px){.checkgrid{grid-template-columns:1fr}}

/* ---------- contact ---------- */
.cgrid{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:start}
@media(max-width:900px){.cgrid{grid-template-columns:1fr}}
.cpanel{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:26px}
.consent-row input{accent-color:var(--res)}
.form-ok{background:#EFF6F1;border:1px solid #CBE3D3;border-left:4px solid #0E5C46}

/* ---------- footer: brand-dark emerald, centered per VET family ---------- */
.cqf3{background:var(--res-d);color:#EAF3ED}
.cqf3 a{color:#C9E2D4}
.cqf3 a:hover{color:#fff}
.cqf3 h4{color:#BFE0CD}
.cqf3-wrap{text-align:center}
.cqf3-cols{grid-template-columns:repeat(3,minmax(200px,1fr));justify-items:center}
.cqf3-brand{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;max-width:760px;margin:0 auto}
.cqf3-logo{margin:0 auto 16px}
.cqf3-blurb{max-width:66ch;margin-left:auto;margin-right:auto}
.cqf3-socials{justify-content:center}
.cqf3-socials a{background:rgba(255,255,255,.1)}
.cqf3-socials a:hover{background:rgba(255,255,255,.2)}
.cqf3-socials svg{fill:#C9E2D4}
.cqf3-socials a:hover svg{fill:#fff}
.cqf3-news .f-news-form{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.cqf3-news input{min-width:250px;padding:12px 15px;border:1px solid rgba(255,255,255,.25);border-radius:10px;background:rgba(255,255,255,.07);color:#fff;font-family:inherit;font-size:14px}
.cqf3-news input::placeholder{color:#BFD8C9}
.cqf3-news button{padding:12px 22px;border-radius:10px;background:var(--sand);color:var(--res-d);font-weight:700;font-size:14px;transition:.25s}
.cqf3-news button:hover{background:#fff}
.cqf3-news .news-consent{font-size:12px;color:#BFD8C9;margin-top:10px}
.cqf3-info li{margin-bottom:12px}
.cqf3-info li b{display:block;color:#BFE0CD;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase}
.cqf3-band{border-top:1px solid rgba(255,255,255,.14);margin-top:36px;padding-top:22px}
.cqf3-band h4{margin-bottom:10px}
.cqf3-band ul{display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:center}
.cqf3-bottom{border-top:1px solid rgba(255,255,255,.14);margin-top:24px;padding-top:20px;font-size:.85rem;color:#BFD8C9}
@media(max-width:900px){.cqf3-cols{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.cqf3-cols{grid-template-columns:1fr}}

/* footer fold above the emerald footer */
.cqft-res svg{display:block;width:100%;height:120px}

/* ---------- policy pages ---------- */
.cq-policy a{color:var(--res-d);text-decoration:underline}

/* ---------- mobile hygiene ---------- */
@media(max-width:600px){
  .reshero{padding:64px 0 70px}
  .sh{flex-direction:column;align-items:flex-start;gap:14px}
}