/* NY Agency UI layer, shared by every page: buttons, the menu, and the funnel dividers.
   Loaded after each page's own styles, so these rules win where they overlap. */

[hidden]{display:none!important}

/* ---------- buttons: a label that rolls, an arrow badge, and a fill that grows out of the badge ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn-accent::after{content:none;animation:none}
.btn .bt{position:relative;display:inline-block;overflow:hidden;line-height:1.25;vertical-align:middle}
.btn .bt-in{position:relative;display:block;transition:transform .6s cubic-bezier(.7,0,.2,1)}
.btn .bt-in::after{content:attr(data-t);position:absolute;left:0;top:100%;white-space:nowrap}
.btn:hover .bt-in,.btn:focus-visible .bt-in{transform:translateY(-100%)}

.btn-accent{padding:6px 6px 6px 22px;gap:14px;transition:color .45s var(--ease-out),transform .5s var(--ease-out)}
.btn-accent:hover{background:var(--accent);color:var(--accent)}
.btn-accent::before{content:"";position:absolute;z-index:-1;right:6px;top:50%;width:34px;height:34px;margin-top:-17px;border-radius:50%;background:#1A1408;transform:scale(0);transition:transform .65s cubic-bezier(.7,0,.2,1)}
.btn-accent:hover::before,.btn-accent:focus-visible::before{transform:scale(16)}
.btn-accent .arr{flex:none;display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#1A1408;color:var(--accent);font-size:15px;line-height:1;transform:rotate(-45deg);transition:transform .55s var(--ease-out),background .45s var(--ease-out),color .45s var(--ease-out)}
.btn-accent:hover .arr,.btn-accent:focus-visible .arr{transform:rotate(0);background:var(--accent);color:#1A1408}
.nav .btn-accent{padding:5px 5px 5px 18px;gap:12px}
.nav .btn-accent .arr,.nav .btn-accent::before{width:28px;height:28px;font-size:13px}
.nav .btn-accent::before{right:5px;margin-top:-14px}

.btn-ghost::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(90deg,rgba(246,185,92,.16),rgba(246,185,92,.06));transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.7,0,.2,1)}
.btn-ghost:hover::before,.btn-ghost:focus-visible::before{transform:scaleX(1)}
.btn-ghost:hover{transform:none}

@media (max-width:900px){
  .nav .btn-accent{padding:4px 4px 4px 14px;gap:10px}
  .nav .btn-accent .arr,.nav .btn-accent::before{width:26px;height:26px}
  .nav .btn-accent::before{right:4px;margin-top:-13px}
}

/* ---------- the menu: hairline rows, a live preview of where each one goes ---------- */
.mbrand{position:absolute;top:18px;left:var(--gutter);z-index:2;display:flex;align-items:center;min-height:44px;opacity:0;transition:opacity .4s var(--ease-out)}
.mbrand img{width:112px;height:auto}
.menu.open .mbrand{opacity:1;transition-delay:.4s}
.menu.closing .mbrand{opacity:0;transition-delay:0s}
.menu-in{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,96px);align-items:center;padding-top:max(96px,12vh)}
.mlist{align-self:center}
.mlist li{position:relative;overflow:hidden;padding:0;margin:0;border-top:1px solid var(--line)}
.mlist li:last-child{border-bottom:1px solid var(--line)}
.mlist a{position:relative;isolation:isolate;display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:0;padding:.17em 0;font-size:clamp(26px,min(3.5vw,5.8vh),58px)}
.mlist a .mtx{white-space:nowrap}
.mlist a i{transform:none;align-self:center;font-size:12px}
.mlist a::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(246,185,92,.1),rgba(246,185,92,0) 75%);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease-out)}
.mlist a:hover::before,.mlist a:focus-visible::before,.mlist a.pv::before{transform:scaleX(1)}
.mlist a.pv{color:var(--accent)}
.mlist a.pv .mtx{transform:translateX(14px)}
.mlist .mgo{padding-left:18px;font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-secondary);white-space:nowrap;opacity:0;transform:translateX(-14px);transition:opacity .4s var(--ease-out),transform .5s var(--ease-out)}
.mlist a:hover .mgo,.mlist a:focus-visible .mgo,.mlist a.pv .mgo{opacity:1;transform:none}

.maside{align-self:center;gap:26px}
.mprev{position:relative;display:block;aspect-ratio:16/10;border-radius:22px;overflow:hidden;background:#0C0B0A;border:1px solid var(--line);box-shadow:0 40px 90px -40px rgba(0,0,0,.9)}
.mprev .pvl{position:absolute;inset:0;opacity:0;transform:scale(1.06);transition:opacity .6s var(--ease-out),transform 1.4s var(--ease-out)}
.mprev .pvl.on{opacity:1;transform:none}
.mprev img,.mprev video{width:100%;height:100%;object-fit:cover;display:block}
.mprev::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,9,8,0) 45%,rgba(10,9,8,.88));pointer-events:none}
.mpv-cap{position:absolute;left:20px;right:20px;bottom:16px;z-index:1;display:flex;align-items:baseline;gap:14px;min-width:0}
.mpv-cap .no{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--accent)}
.mpv-cap .t{font-family:var(--display);font-stretch:125%;font-weight:800;font-size:clamp(18px,1.6vw,24px);letter-spacing:-.02em;white-space:nowrap}
.mpv-cap .d{margin-left:auto;font-size:14px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.mstatus{max-width:none!important;display:flex;align-items:center;gap:10px;margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-secondary)}
.mstatus i{width:8px;height:8px;border-radius:50%;background:#7BD88F;box-shadow:0 0 0 4px rgba(123,216,143,.14)}
@media (min-width:901px){.maside .mcard{display:none}}
@media (max-width:900px){
  .mprev{display:none}
  .mbrand{top:14px;left:20px}.mbrand img{width:96px}
  .menu-in{grid-template-columns:1fr;align-content:start;padding-top:84px;gap:30px}
  .mlist a{font-size:clamp(26px,7.4vw,40px);grid-template-columns:52px minmax(0,1fr)}
  .mlist .mgo{display:none}
  .maside{align-self:start}
}
@media (max-width:900px) and (max-height:720px){.mlist a{font-size:clamp(24px,6.6vw,34px);padding:.12em 0}}

/* ---------- funnel dividers: the signal runs through seen, clicked, qualified, booked ---------- */
.fdiv{position:relative;height:72px;margin:0 var(--gutter)}
.fd-line{position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line);overflow:hidden}
.fd-beam{position:absolute;left:0;top:0;width:18%;height:1px;background:linear-gradient(90deg,rgba(246,185,92,0),var(--accent) 80%,#FFF1D6);box-shadow:0 0 10px 1px rgba(246,185,92,.6);transform:translateX(-100%);animation:fdbeam 5s linear infinite;animation-play-state:paused}
.fd-st{position:absolute;left:calc(var(--f)*100%);top:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:var(--canvas);font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary);white-space:nowrap;animation:fdchip 5s linear infinite;animation-delay:calc(var(--f)*3.37s);animation-play-state:paused}
.fd-st::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.7}
.fd-last::before{content:"\2713";width:auto;height:auto;background:none;font-size:11px;line-height:1;opacity:1}
.fdiv.live .fd-beam,.fdiv.live .fd-st{animation-play-state:running}
@keyframes fdbeam{0%{transform:translateX(-100%)}80%,100%{transform:translateX(560%)}}
@keyframes fdchip{0%{color:#1A1408;background:var(--accent);border-color:var(--accent);box-shadow:0 0 22px rgba(246,185,92,.45)}26%{color:var(--text-primary);background:var(--canvas);border-color:rgba(246,185,92,.5);box-shadow:none}55%,100%{color:var(--text-secondary);background:var(--canvas);border-color:var(--line);box-shadow:none}}
@media (max-width:560px){.fdiv{margin:0 16px;height:60px}.fd-st{padding:5px 8px;gap:5px;font-size:9px;letter-spacing:.1em}}
@media (prefers-reduced-motion: reduce){
  .fd-beam{display:none}
  .fd-st{animation:none}
  .fd-last{color:#1A1408;background:var(--accent);border-color:var(--accent)}
}
@media (min-width:901px) and (max-height:780px){
  .mprev{aspect-ratio:auto;height:34vh}
  .maside{gap:18px}
  .maside > p:not(.mstatus){display:none}
}
.btn-accent .arr:not(.keep){font-size:0}
.btn-accent .arr:not(.keep)::before{content:"";width:15px;height:15px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8h11M9 3.5 13.5 8 9 12.5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8h11M9 3.5 13.5 8 9 12.5'/%3E%3C/svg%3E") center/contain no-repeat}
.nav .btn-accent .arr:not(.keep)::before{width:13px;height:13px}
.btn-accent .arr.keep{transform:none}
.btn-sm.btn-accent{padding:4px 4px 4px 16px;font-size:14px;gap:10px}
.btn-sm.btn-accent .arr,.btn-sm.btn-accent::before{width:28px;height:28px}
.btn-sm.btn-accent::before{right:4px;margin-top:-14px}

/* header: logo and buttons never shrink; when the chapter links do not fit, they step aside */
.nav .brand,.nav .navlink,.nav .menu-btn,.nav .btn{flex:none}
.nav .chapters{min-width:0}
.nav.tight .chapters{display:none}
.nav.tight .navlink{margin-left:auto}
@media (max-width:1500px){.nav{gap:20px}.nav .chapters{gap:clamp(10px,1.1vw,18px)}}
.btn.btn-accent .arr{display:inline-grid}
.btn-accent .arr:not(.keep)::before{display:block}