.about-top-nav{position:absolute;inset:0 0 auto;z-index:80;display:flex;align-items:center;justify-content:space-between;gap:20px;box-sizing:border-box;padding:28px var(--gutter);background:var(--paper,#fff);color:var(--ink,#262630)}
.about-top-brand{display:flex;align-items:center;gap:14px;padding:6px 16px 6px 6px;background:#181818;border-radius:999px;font-size:13px;white-space:nowrap}
.about-top-nav .vinny-logo{display:block;width:48px;height:48px!important;flex:0 0 auto;background:var(--paper)!important;color:var(--ink)!important;border-color:var(--ink)!important}
.about-top-nav .vinny-logo:hover,.about-top-nav .vinny-logo:focus-visible{width:165px}
.about-top-nav .vinny-logo span{display:grid;color:inherit;line-height:1}
.about-top-nav nav{display:flex;align-items:center;gap:14px}
.about-top-nav nav>a,.about-top-nav summary,.about-menu-toggle{display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;border:0;border-radius:999px;background:#eee;color:#111;font-size:14px;font-weight:500;cursor:pointer;text-decoration:none}
.about-top-nav :is(nav>a,summary,.about-menu-toggle){transition:background-color .2s ease,color .2s ease}
.about-top-nav :is(nav>a,summary,.about-menu-toggle):is(:hover,:focus-visible){background:#000;color:#fff}
.about-top-nav details{position:relative}.about-top-nav summary{list-style:none}.about-top-nav summary::-webkit-details-marker{display:none}
.about-top-nav details>div{position:absolute;right:0;top:calc(100% + 10px);width:180px;padding:8px;border-radius:20px;background:#eee;color:#111;box-shadow:0 8px 24px #0003}
.about-top-nav details a{display:block;padding:12px;border-radius:12px;color:inherit;text-decoration:none}.about-top-nav details a:hover{background:#ddd}
.about-menu-toggle{display:none}.about-menu-toggle svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.about-page .page-main{padding-top:150px}
@media(max-width:760px){.about-top-nav{padding:16px 20px;gap:12px}.about-top-brand{font-size:11px;gap:8px}.about-menu-toggle{display:flex;padding:0;width:44px}.about-top-nav nav{display:none;position:absolute;right:20px;top:calc(100% + 4px);width:240px;padding:12px;box-sizing:border-box;border-radius:24px;background:#181818;flex-direction:column;align-items:stretch;gap:8px}.about-top-nav.menu-open nav{display:flex}.about-top-nav details>div{position:static;width:auto;margin-top:8px}.about-page .page-main{padding-top:128px}}
.about-top-brand{background:#f5f5f6;color:var(--ink)}
.about-top-nav nav>a,.about-top-nav summary,.about-menu-toggle{background:#f5f5f6;color:var(--ink);height:42px;min-height:42px;padding-inline:18px}
.about-top-nav .vinny-logo{text-decoration:none}
/* About is always dark, but its entrance still uses the shared temporary blur. */
html[data-theme=dark] .about-page .type-reveal{filter:blur(7px)!important;transition-property:opacity,translate,filter!important;text-shadow:none!important}
html[data-theme=dark] .about-page .type-reveal.type-is-visible{filter:none!important}
@media(prefers-reduced-motion:reduce){html[data-theme=dark] .about-page .type-reveal{filter:none!important}}
.about-page .about-top-nav{position:fixed;background:#000;color:#fff}
html[data-theme=dark] .about-top-brand,html[data-theme=dark] .about-top-nav nav>a,html[data-theme=dark] .about-top-nav summary,html[data-theme=dark] .about-menu-toggle{background:#202024;color:#fff}
html[data-theme=dark] .about-top-nav :is(nav>a,summary,.about-menu-toggle):is(:hover,:focus-visible),.about-page .about-top-nav :is(nav>a,summary,.about-menu-toggle):is(:hover,:focus-visible){background:#fff;color:#000}
.page-body>.page-header{display:none}
.page-body:not(.about-page) .page-main,.hire-main{padding-top:150px}
.offer-symbol svg,.hire-cta>span svg,.hire-contact>a>span svg{width:28px;height:28px;fill:currentColor;display:block}
@media(max-width:760px){.about-top-nav nav{background:var(--paper,#fff)}.about-top-nav .about-top-brand{font-size:11px}.page-body:not(.about-page) .page-main,.hire-main{padding-top:128px}}

/* The mobile navigation opens as a full-height sheet above the page. */
@media(max-width:760px){
  body.mobile-menu-open{overflow:hidden}
  .about-top-nav.menu-open,.about-top-nav.menu-closing{position:fixed;inset:0 0 auto;z-index:100;background:transparent}
  .about-top-nav .about-top-brand,.about-top-nav .about-menu-toggle{position:relative;z-index:2}
  .about-top-nav nav{display:flex;position:fixed;inset:0;width:100%;height:100dvh;box-sizing:border-box;margin:0;padding:max(112px,calc(env(safe-area-inset-top) + 96px)) 20px max(32px,env(safe-area-inset-bottom));border-radius:0;background:var(--paper,#fff);color:var(--ink,#272735);box-shadow:none;z-index:1;align-items:stretch;justify-content:center;gap:12px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;visibility:hidden;pointer-events:none;transform:translate3d(0,-104%,0);transition:transform .48s cubic-bezier(.22,.8,.2,1),visibility 0s .48s}
  .about-top-nav.menu-open nav{display:flex;visibility:visible;pointer-events:auto;transform:translate3d(0,0,0);transition:transform .6s cubic-bezier(.16,1,.3,1),visibility 0s}
  .about-top-nav nav>a,.about-top-nav nav summary{display:flex;align-items:center;justify-content:flex-start;width:100%;height:auto;min-height:clamp(64px,12dvh,104px);padding:16px 24px;border-radius:28px;font-size:clamp(28px,7vw,44px);font-weight:500;line-height:1.1;letter-spacing:-.035em;background:#f5f5f6;color:var(--ink,#272735);text-align:left;box-sizing:border-box}
  .about-top-nav nav>a[aria-current=page]{box-shadow:inset 0 0 0 1px var(--line)}
  .about-top-nav details>div{margin-top:10px;padding:6px;background:var(--panel);border-radius:24px;box-shadow:none}
  .about-top-nav details a{padding:16px 18px;font-size:17px;line-height:1.4}
  .about-top-nav .about-menu-toggle{flex:0 0 44px;width:44px;height:44px;padding:0}
  .about-page .about-top-nav nav{background:#000}
  body.mobile-menu-open .app-nav{translate:0 calc(100% + 40px)!important;pointer-events:none}
}
@media(max-height:600px) and (max-width:760px){.about-top-nav nav{justify-content:flex-start;padding-top:104px;gap:10px}.about-top-nav nav>a,.about-top-nav nav summary{min-height:68px;font-size:32px;padding:16px 22px}}
@media(prefers-reduced-motion:reduce){.about-top-nav nav{transition:none!important}}

@media(max-width:760px){html[data-theme=dark] .about-top-nav nav>a,html[data-theme=dark] .about-top-nav nav summary{background:#202024;color:#fff}}