/* 10 Nov How NYC works + nav (build.py block "10 Nov How NYC works + nav") */
/* persistent menu: the menu button is pinned on every page, a disc in NYC gold #FFC629 with dark bars */
header.v2{z-index:90}
.navtoggle{position:fixed !important;top:16px;right:max(20px,calc((100vw - 1240px) / 2));background:#FFC629 !important;border-radius:50%;box-shadow:0 4px 18px rgba(0,0,0,.28);z-index:95;transition:transform .2s ease,box-shadow .2s ease}
.navtoggle:hover{transform:scale(1.06);box-shadow:0 6px 22px rgba(0,0,0,.34)}
.navtoggle:focus-visible{outline:3px solid #111;outline-offset:3px}
.navtoggle .bars{transform:translateY(1px)}
.navtoggle .bars i{background:#111 !important;box-shadow:none !important}
@media (max-width:760px){.navtoggle{top:8px}}
/* How NYC works: what clients bring */
.hw-intro .lbl{margin-bottom:14px}
.hw-intro .lead{font-size:clamp(22px,2.3vw,30px);line-height:1.45;max-width:36ch}
.hw-intro .hw-q{font-size:18px;line-height:1.6;color:#555;max-width:52ch;margin:18px 0 0}
/* three steps on black, a slow gold dot travelling along the rail */
.hw-steps{background:#0B0B0B !important;color:#fff;padding:96px 0 110px}
.hw-steps .lbl{color:#FFC629}
.hw-steps h2{color:#fff}
.hw-track{position:relative;margin-top:60px}
.hw-track::before{content:"";position:absolute;left:0;right:0;top:9px;height:1px;background:linear-gradient(90deg,rgba(255,198,41,.2),rgba(255,198,41,.55) 50%,rgba(255,198,41,.2))}
.hw3{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:56px;position:relative}
.hw3 li{position:relative;padding-top:46px;margin:0}
.hw3 li::before{content:"";position:absolute;top:3px;left:0;width:13px;height:13px;box-sizing:border-box;border-radius:50%;border:1px solid rgba(255,198,41,.75);background:#0B0B0B}
.hw-n{display:block;font-size:13px;letter-spacing:.16em;color:rgba(255,255,255,.55)}
.hw3 h3{font-size:clamp(22px,2vw,28px);line-height:1.2;margin:10px 0 14px;color:#fff}
.hw3 p{font-size:19px;line-height:1.65;color:rgba(255,255,255,.84);max-width:32ch;margin:0}
.hw-dot{position:absolute;top:2px;left:0;width:15px;height:15px;border-radius:50%;background:#FFC629;box-shadow:0 0 18px 6px rgba(255,198,41,.45);z-index:2;animation:hwdot 18s ease-in-out infinite alternate}
@keyframes hwdot{from{left:0}to{left:calc(100% - 15px)}}
/* trust is the product: bigger, with the one call line under it */
.hw-trust h2{font-size:clamp(46px,7.4vw,104px);line-height:.98}
.hw-trust .hw-sub{font-size:clamp(19px,1.7vw,24px);line-height:1.45;max-width:30ch;color:#fff;margin:22px 0 0 auto;text-align:right;text-shadow:0 1px 14px rgba(0,0,0,.6)}
/* two quiet cards */
.hw-why{padding:88px 0 96px}
.hw-pair{display:grid;grid-template-columns:1fr 1fr;gap:72px}
.hw-pair h3{font-size:clamp(24px,2.2vw,30px);line-height:1.2;margin:10px 0 14px}
.hw-pair p{font-size:19px;line-height:1.65;max-width:40ch;margin:0}
@media (max-width:760px){
 .hw-steps{padding:64px 0 72px}
 .hw-track{margin-top:40px}
 .hw-track::before{left:7px;right:auto;top:0;bottom:0;width:1px;height:auto;background:linear-gradient(180deg,rgba(255,198,41,.2),rgba(255,198,41,.55) 50%,rgba(255,198,41,.2))}
 .hw3{grid-template-columns:1fr;gap:40px;padding-left:36px}
 .hw3 li{padding-top:0}
 .hw3 li::before{left:-35px;top:6px}
 .hw3 p{font-size:18px}
 .hw-dot{left:0;top:0;animation-name:hwdotv;animation-duration:16s}
 @keyframes hwdotv{from{top:0}to{top:calc(100% - 15px)}}
 .hw-why{padding:60px 0 68px}
 .hw-pair{grid-template-columns:1fr;gap:44px}
}
@media (prefers-reduced-motion:reduce){.hw-dot{animation:none}.navtoggle{transition:none}}
/* Work: a toned scene in each case card's dotted top */
.card.case2.sc::before{height:112px;border-bottom:0 !important;background:radial-gradient(circle,rgba(255,255,255,.34) 1px,transparent 1.6px) 0 0/14px 14px,linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.5)),var(--sc) center/cover no-repeat #111 !important}
.card.case2.sc::after{height:112px}
.wclink3{margin:12px 0 30px}
@media (max-width:760px){.hw-trust .hw-sub{margin-left:0;text-align:left}}