/* Site header, shared by every page (loaded from app/layout.js; colors and fonts from tokens.css).
   On the home page it floats over the hero and home-motion.jsx toggles header-solid / header-gone;
   on the other pages (vv-hd--page) it is solid black and scrolls away with the page. */
.vv-hd{position:fixed;inset:0 0 auto 0;z-index:20;color:rgb(var(--vv-paper));font-family:var(--vv-sans);line-height:1.5;
  background:linear-gradient(to bottom,rgba(0,0,0,.75),rgba(0,0,0,0));
  transition:transform .6s cubic-bezier(.2,.7,.2,1),opacity .6s ease,background-color .4s ease}
.vv-hd.header-gone{transform:translateY(-100%);opacity:0;pointer-events:none}
.vv-hd.header-solid{background:rgb(var(--vv-ink)/.94);box-shadow:0 1px 0 rgb(var(--vv-paper)/.06)}
/* the blur only past the hero (header-blur): re-blurring the moving 3D scene every frame is wasted GPU */
.vv-hd.header-blur{background:rgb(var(--vv-ink)/.88);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
/* same black as the page's opening under it, so the two read as one */
.vv-hd--page{position:relative;background:rgb(var(--vv-ink));margin-bottom:-1px}
.vv-hd a{color:inherit;text-decoration:none}
/* the logo starts on the same line as the text under it: --hd-max is the width of that text column */
.vv-hd{--hd-max:84rem;--hd-pad:1.5rem;--hd-left:max(var(--hd-pad),calc((100% - var(--hd-max))/2 + var(--hd-pad)))}
.vv-hd--page{--hd-max:72rem}
.vv-hd-row{height:6rem;padding:0 1.5rem 0 var(--hd-left);display:flex;align-items:center;justify-content:space-between;gap:1rem}
.vv-hd-brand{display:flex;align-items:center;gap:1rem}
.vv-hd-wordmark{font-family:var(--vv-serif);font-weight:500;letter-spacing:.14em;font-size:1.25rem;line-height:1.75rem;white-space:nowrap}
.vv-hd-wordmark i{letter-spacing:0}
.vv-hd-descriptor{display:none;font-weight:500;font-size:10.5px;letter-spacing:.32em;color:rgb(var(--vv-paper)/.7)}
.vv-hd-nav{display:none;align-items:center;gap:1.25rem;font-size:.875rem;color:rgb(var(--vv-paper)/.8)}
.vv-hd-nav a{white-space:nowrap;transition:color .2s}
.vv-hd-nav a:hover{color:rgb(var(--vv-paper))}
.vv-hd-nav .vv-hd-cta{border:1px solid rgb(var(--vv-paper)/.55);padding:.55rem 1rem;color:rgb(var(--vv-paper));transition:background .3s,color .3s}
.vv-hd-nav .vv-hd-cta:hover{background:rgb(var(--vv-paper));color:rgb(var(--vv-ink))}
.vv-hd-menu{font:inherit;font-size:.875rem;letter-spacing:.025em;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.vv-hd-mobile{display:none;flex-direction:column;gap:1.25rem;padding:0 1.5rem 2rem var(--hd-left);background:rgb(var(--vv-ink));font-family:var(--vv-serif);font-size:1.125rem}
.vv-hd-mobile.is-open{display:flex}
@media(min-width:640px){.vv-hd-descriptor{display:block}}
@media(min-width:768px){.vv-hd{--hd-pad:3rem}.vv-hd-row{padding-right:2.5rem}.vv-hd-wordmark{font-size:1.5rem;line-height:2rem}}
/* five nav items need the width; below this the menu button takes over */
@media(min-width:1280px){.vv-hd-row{padding-right:3.5rem}.vv-hd-nav{display:flex}.vv-hd-menu,.vv-hd-mobile.is-open{display:none}}
@media(min-width:1440px){.vv-hd-nav{gap:2.5rem}}

/* Site footer, shared by every page (components/site-footer.jsx). */
.vv-ft{background:rgb(var(--vv-ink));color:rgb(var(--vv-paper)/.6);font-family:var(--vv-sans);font-size:.875rem;line-height:1.7;border-top:1px solid rgb(var(--vv-paper)/.1)}
.vv-ft a{color:inherit;text-decoration:none}
.vv-ft a:hover{color:rgb(var(--vv-paper))}
.vv-ft p{margin:0}
.vv-ft-row{max-width:84rem;margin:0 auto;padding:3.5rem 1.5rem;display:grid;gap:2.5rem}
/* the wordmark and FISCALISTEN on one line, as in the header */
.vv-ft-brand{display:flex;align-items:center;gap:1rem;align-self:start;white-space:nowrap;color:rgb(var(--vv-paper))}
.vv-ft .wordmark{font-family:var(--vv-serif);font-weight:500;letter-spacing:.14em;font-size:1rem;line-height:1.5}
.vv-ft .wordmark i{letter-spacing:0}
.vv-ft .descriptor{font-weight:500;font-size:10.5px;letter-spacing:.32em;color:rgb(var(--vv-paper)/.7)}
.vv-ft address{font-style:normal}
.vv-ft nav a{display:block}
/* the link columns are as wide as their longest link, so none of them breaks over two lines */
@media(min-width:768px){.vv-ft-row{padding:3.5rem 3rem;grid-template-columns:max-content 1fr max-content max-content auto;column-gap:3.5rem}.vv-ft nav a{white-space:nowrap}}