/* ============================================================
   wb-gloss.css — global "glossy sheen" finish, injected site-wide
   by server.mjs (before </head>, so it layers over each page's
   inline <style>).

   SAME brand colors. The sheen is a translucent, color-AGNOSTIC
   highlight applied through background-IMAGE only (never
   background-color), so navy / slate / orange fills keep their
   exact hue while gaining a soft, high-gloss corporate finish.

   Media heroes (.vhero / .vhero-blog / .vband / .vid) are left
   untouched and stay protected by their more-specific
   `background:transparent` rules, so video is never painted over.
   ============================================================ */

:root{
  /* subtle sheen for large surfaces (bright top edge, gentle fall-off) */
  --gloss-band: linear-gradient(180deg,
      rgba(255,255,255,.10) 0%,
      rgba(255,255,255,.035) 14%,
      rgba(255,255,255,0) 34%,
      rgba(0,0,0,.05) 100%);
  /* glossier two-tone sheen for buttons */
  --gloss-btn: linear-gradient(180deg,
      rgba(255,255,255,.24) 0%,
      rgba(255,255,255,.07) 47%,
      rgba(0,0,0,.05) 53%,
      rgba(0,0,0,.11) 100%);
  /* crisper sheen for small badges/pills */
  --gloss-badge: linear-gradient(180deg,
      rgba(255,255,255,.28) 0%,
      rgba(255,255,255,.05) 50%,
      rgba(0,0,0,.10) 100%);
}

/* ---- Group A: glossy bands (fill hue preserved) ---- */
.hdr, .nav, .top, .topbar,
.hero, .detail-hero, .phero,
.div, .foot, .fid, .pbar,
.cta, .cta-band, .fee, .demo,
.prj, .prj-band, .prj-head, .rail, .seccard,
.bk-howto, .ctable thead th, .dtbl thead th, .sched .sbar{
  background-image: var(--gloss-band);
}

/* ---- Group B: glossy solid buttons ---- */
.btn-p, .btn, .btn-orange, .btn-sub, .lg-btn, .dlbtn,
.cta a.btn, .cta .cta-btn, .cta-band a, .hero .herobtns a.b1,
.portbtns a.b1, .portbtns a.b2, .lpnav a.cta, .nav-dl, .demo-pill{
  background-image: var(--gloss-btn);
  box-shadow: 0 1px 2px rgba(20,30,55,.18), inset 0 1px 0 rgba(255,255,255,.30);
  border-radius: 4px;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn-p:hover, .btn:hover, .btn-orange:hover, .btn-sub:hover, .lg-btn:hover, .dlbtn:hover,
.cta a.btn:hover, .cta .cta-btn:hover, .cta-band a:hover, .hero .herobtns a.b1:hover,
.portbtns a.b1:hover, .portbtns a.b2:hover, .lpnav a.cta:hover, .nav-dl:hover, .demo-pill:hover{
  background-image: var(--gloss-btn);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(20,30,55,.22), inset 0 1px 0 rgba(255,255,255,.35);
  filter: saturate(1.03) brightness(1.02);
}

/* ---- Group C: glossy badges/pills (sheen only, stay tiny) ----
   Only the COLOR-modifier badges (solid fills). Bare `.b` has no
   background of its own, so gloss it only through its color variant
   to avoid a faint gray wash on a transparent element. */
.bn, .bo, .bt, .bbl, .bgd{
  background-image: var(--gloss-badge);
}

/* ---- Group D: softer, deeper card depth for a sleek corporate feel ---- */
.svc-card, .team-card, .staff-card, .lg-card{
  box-shadow: 0 2px 10px rgba(20,30,55,.06), 0 1px 2px rgba(20,30,55,.04);
}

@media (prefers-reduced-motion: reduce){
  .btn-p, .btn, .btn-orange, .btn-sub, .lg-btn, .dlbtn,
  .cta a.btn, .cta .cta-btn, .cta-band a, .hero .herobtns a.b1,
  .portbtns a.b1, .portbtns a.b2, .lpnav a.cta, .nav-dl, .demo-pill{
    transition: none;
  }
  .btn-p:hover, .btn:hover, .btn-orange:hover, .btn-sub:hover, .lg-btn:hover, .dlbtn:hover,
  .cta a.btn:hover, .cta .cta-btn:hover, .cta-band a:hover, .hero .herobtns a.b1:hover,
  .portbtns a.b1:hover, .portbtns a.b2:hover, .lpnav a.cta:hover, .nav-dl:hover, .demo-pill:hover{
    transform: none;
  }
}