/* Verapath marketing — nav bar, page heroes, footer (design_handoff_v8 v8-vp-site.css). */
/* Verapath site - shared LIGHT chrome (nav, footer, page-hero, sections)
   used by About / News / Request a Demo. Homepages keep their own copy. */
.B{background:var(--paper);color:var(--ink)}
.B .shell{width:var(--shell);margin-inline:auto}
.B .mk{display:inline-block;width:auto;height:1em;vertical-align:-.06em}
.B .mk svg{height:100%;width:auto;display:block}
.B ::selection{background:var(--lime);color:var(--forest)}

.B nav[data-nav]{position:fixed;inset:0 0 auto 0;z-index:50;transition:background .4s var(--ease),backdrop-filter .4s,border-color .4s}
.B nav .bar{width:var(--shell);margin-inline:auto;display:flex;align-items:center;justify-content:space-between;height:76px}
.B nav[data-nav].scrolled{background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(16px) saturate(1.2);border-bottom:1px solid var(--line)}
.B .brand{display:flex;align-items:center;gap:.6rem;font-family:var(--serif);font-size:1.5rem;color:var(--forest)}
.B .brand .mk{color:var(--forest);height:1.05rem;width:auto}
.B .navlinks{display:flex;gap:2rem;font-size:.95rem;color:color-mix(in srgb,var(--ink) 66%,transparent)}
.B .navlinks a:hover{color:var(--green)}
.B .navlinks a[aria-current=page]{color:var(--green)}
@media(max-width:1060px){.B .navlinks{display:none}}

.B section.block{padding:110px 0;position:relative}
.B .head{max-width:64ch}
.B .head .eyebrow{color:var(--green)}
.B .head h2{font-family:var(--serif);font-size:var(--t-h2);color:var(--forest);margin:.8rem 0 0;line-height:1.04}
.B .head h2 em{font-style:italic;color:var(--green)}
.B .head p{margin-top:1rem;color:color-mix(in srgb,var(--ink) 70%,transparent);font-size:var(--t-lead)}

/* page hero (sub-pages) */
.B .phero{position:relative;padding:200px 0 90px;overflow:hidden;
  background:radial-gradient(125% 95% at 70% -10%, var(--mint-2) 0%, var(--paper) 58%)}
.B .phero .eyebrow{color:var(--green)}
.B .phero h1{font-family:var(--serif);font-size:var(--t-h1);color:var(--forest);line-height:.98;margin:1.1rem 0 0;max-width:18ch;letter-spacing:-.02em}
.B .phero h1 em{font-style:italic;color:var(--green)}
.B .phero p.sub{font-size:var(--t-lead);max-width:52ch;margin:1.4rem 0 0;color:color-mix(in srgb,var(--ink) 72%,transparent)}
.B .phero .grid-deco{position:absolute;inset:0;z-index:-1;opacity:.7;
  background-image:linear-gradient(rgba(34,48,41,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(34,48,41,.05) 1px,transparent 1px);
  background-size:54px 54px;mask-image:radial-gradient(80% 90% at 60% 0%,#000 30%,transparent 75%)}

.B .cta-row{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:2.2rem}

/* footer */
.B footer{padding:40px 0 40px;border-top:1px solid var(--line)}
.B .fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:30px}
@media(max-width:820px){.B .fgrid{grid-template-columns:1fr 1fr}}
.B footer h5{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:1rem;font-weight:650}
.B footer .brand{color:var(--forest)}
.B footer a{display:block;color:color-mix(in srgb,var(--ink) 66%,transparent);padding:.3rem 0;font-size:.95rem}
.B footer a:hover{color:var(--green)}
.B .fbar{display:flex;justify-content:space-between;border-top:1px solid var(--line);margin-top:46px;padding-top:24px;font-size:.85rem;color:var(--mute);flex-wrap:wrap;gap:10px}
/* Blazor addition (approved v4 deviation): social icons in the footer bottom bar */
.B .fsocial{display:flex;gap:14px;align-items:center}
.B .fsocial a{display:inline-flex;padding:.2rem 0}
.B .fsocial svg{width:16px;height:16px}
.B .ftag{font-family:var(--serif);font-style:italic;color:var(--mute)}